/* ==========================================================================
   hidrologi.net — Modern v2.15.0
   Modul Kekeringan — Modern v2 visual integration
   Visual master: Engineer Profile / Cuaca / Peta & GIS / EPANET
   ========================================================================== */

.mv2-kekeringan-page{
    background:#f4f7fb;
}

.mv2-kekeringan-page .mv2-footer{
    margin-top:0;
}

.kt-page,
.kp-page,
.kr-page,
.kb-page{
    --kr-page:#f4f7fb;
    --kr-card:#ffffff;
    --kr-line:#dfe7ef;
    --kr-line-soft:#eaf0f5;
    --kr-ink:#173f5f;
    --kr-body:#587287;
    --kr-muted:#8093a2;
    --kr-blue:#0874d8;
    --kr-blue-dark:#0864ba;
    --kr-cyan:#289bc4;
    --kr-orange:#ea8a2c;
    --kr-red:#bd5f59;
    --kr-green:#3d9473;
    --kr-yellow:#c69a35;
    --kr-radius:12px;
    --kr-shadow:0 5px 18px rgba(31,72,107,.055);
    --kr-shadow-hover:0 10px 26px rgba(31,72,107,.075);
    color:var(--kr-ink);
    background:var(--kr-page);
}

.kt-page *,
.kp-page *,
.kr-page *,
.kb-page *{
    box-sizing:border-box;
}

/* ----------------------------------------------------------------------
   Minimal layout compatibility for the module's existing Bootstrap-like
   markup. This avoids forcing Bootstrap's global stylesheet onto Modern v2.
   ---------------------------------------------------------------------- */

.kt-page .wrapper,
.kp-page .wrapper,
.kr-page .wrapper,
.kb-page .wrapper{
    width:100%;
}

.kt-page .container,
.kp-page .container,
.kr-page .container,
.kb-page .container,
.kr-container{
    width:min(1160px,calc(100% - 36px));
    margin-left:auto;
    margin-right:auto;
}

.kr-page .container-fluid{
    width:100%;
    padding-left:18px;
    padding-right:18px;
}

.kt-page .row,
.kp-page .row,
.kr-page .row,
.kb-page .row{
    --kr-gx:12px;
    --kr-gy:12px;
    display:flex;
    flex-wrap:wrap;
    margin-left:calc(var(--kr-gx) / -2);
    margin-right:calc(var(--kr-gx) / -2);
    margin-top:calc(var(--kr-gy) * -1);
}

.kt-page .row>*,
.kp-page .row>*,
.kr-page .row>*,
.kb-page .row>*{
    width:100%;
    min-width:0;
    max-width:100%;
    padding-left:calc(var(--kr-gx) / 2);
    padding-right:calc(var(--kr-gx) / 2);
    margin-top:var(--kr-gy);
}

.kt-page .g-2,
.kp-page .g-2,
.kr-page .g-2,
.kb-page .g-2{--kr-gx:8px;--kr-gy:8px}

.kt-page .g-3,
.kp-page .g-3,
.kr-page .g-3,
.kb-page .g-3{--kr-gx:12px;--kr-gy:12px}

.kt-page .g-4,
.kp-page .g-4,
.kr-page .g-4,
.kb-page .g-4{--kr-gx:16px;--kr-gy:16px}

.kt-page .gy-3,
.kp-page .gy-3,
.kr-page .gy-3,
.kb-page .gy-3{--kr-gy:12px}

.kt-page .gy-4,
.kp-page .gy-4,
.kr-page .gy-4,
.kb-page .gy-4{--kr-gy:16px}

.kt-page .gy-5,
.kp-page .gy-5,
.kr-page .gy-5,
.kb-page .gy-5{--kr-gy:20px}

.kt-page .gy-6,
.kp-page .gy-6,
.kr-page .gy-6,
.kb-page .gy-6{--kr-gy:24px}

@media(min-width:576px){
    .kt-page .col-sm-6,
    .kp-page .col-sm-6,
    .kr-page .col-sm-6,
    .kb-page .col-sm-6{width:50%}
}

@media(min-width:768px){
    .kt-page .col-md-2,.kp-page .col-md-2,.kr-page .col-md-2,.kb-page .col-md-2{width:16.666667%}
    .kt-page .col-md-3,.kp-page .col-md-3,.kr-page .col-md-3,.kb-page .col-md-3{width:25%}
    .kt-page .col-md-4,.kp-page .col-md-4,.kr-page .col-md-4,.kb-page .col-md-4{width:33.333333%}
    .kt-page .col-md-5,.kp-page .col-md-5,.kr-page .col-md-5,.kb-page .col-md-5{width:41.666667%}
    .kt-page .col-md-6,.kp-page .col-md-6,.kr-page .col-md-6,.kb-page .col-md-6{width:50%}
    .kt-page .col-md-7,.kp-page .col-md-7,.kr-page .col-md-7,.kb-page .col-md-7{width:58.333333%}
}

@media(min-width:992px){
    .kt-page .col-lg-2,.kp-page .col-lg-2,.kr-page .col-lg-2,.kb-page .col-lg-2{width:16.666667%}
    .kt-page .col-lg-3,.kp-page .col-lg-3,.kr-page .col-lg-3,.kb-page .col-lg-3{width:25%}
    .kt-page .col-lg-4,.kp-page .col-lg-4,.kr-page .col-lg-4,.kb-page .col-lg-4{width:33.333333%}
    .kt-page .col-lg-5,.kp-page .col-lg-5,.kr-page .col-lg-5,.kb-page .col-lg-5{width:41.666667%}
    .kt-page .col-lg-6,.kp-page .col-lg-6,.kr-page .col-lg-6,.kb-page .col-lg-6{width:50%}
    .kt-page .col-lg-7,.kp-page .col-lg-7,.kr-page .col-lg-7,.kb-page .col-lg-7{width:58.333333%}
    .kt-page .col-lg-8,.kp-page .col-lg-8,.kr-page .col-lg-8,.kb-page .col-lg-8{width:66.666667%}
    .kt-page .col-lg-9,.kp-page .col-lg-9,.kr-page .col-lg-9,.kb-page .col-lg-9{width:75%}
    .kt-page .g-lg-4,.kp-page .g-lg-4,.kr-page .g-lg-4,.kb-page .g-lg-4{--kr-gx:16px;--kr-gy:16px}
    .kt-page .gx-lg-4,.kp-page .gx-lg-4,.kr-page .gx-lg-4,.kb-page .gx-lg-4{--kr-gx:16px}
    .kt-page .gx-lg-8,.kp-page .gx-lg-8,.kr-page .gx-lg-8,.kb-page .gx-lg-8{--kr-gx:28px}
}

@media(min-width:1200px){
    .kt-page .col-xl-4,.kp-page .col-xl-4,.kr-page .col-xl-4,.kb-page .col-xl-4{width:33.333333%}
    .kt-page .col-xl-5,.kp-page .col-xl-5,.kr-page .col-xl-5,.kb-page .col-xl-5{width:41.666667%}
    .kt-page .col-xl-7,.kp-page .col-xl-7,.kr-page .col-xl-7,.kb-page .col-xl-7{width:58.333333%}
    .kt-page .col-xl-8,.kp-page .col-xl-8,.kr-page .col-xl-8,.kb-page .col-xl-8{width:66.666667%}
}

.kt-page .col-6,.kp-page .col-6,.kr-page .col-6,.kb-page .col-6{width:50%}
.kt-page .col-12,.kp-page .col-12,.kr-page .col-12,.kb-page .col-12{width:100%}

.kt-page .d-flex,.kp-page .d-flex,.kr-page .d-flex,.kb-page .d-flex{display:flex!important}
.kt-page .flex-wrap,.kp-page .flex-wrap,.kr-page .flex-wrap,.kb-page .flex-wrap{flex-wrap:wrap!important}
.kt-page .flex-column,.kp-page .flex-column,.kr-page .flex-column,.kb-page .flex-column{flex-direction:column!important}
.kt-page .flex-grow-1,.kp-page .flex-grow-1,.kr-page .flex-grow-1,.kb-page .flex-grow-1{flex-grow:1!important}
.kt-page .align-items-center,.kp-page .align-items-center,.kr-page .align-items-center,.kb-page .align-items-center{align-items:center!important}
.kt-page .align-items-start,.kp-page .align-items-start,.kr-page .align-items-start,.kb-page .align-items-start{align-items:flex-start!important}
.kt-page .align-items-end,.kp-page .align-items-end,.kr-page .align-items-end,.kb-page .align-items-end{align-items:flex-end!important}
.kt-page .justify-content-between,.kp-page .justify-content-between,.kr-page .justify-content-between,.kb-page .justify-content-between{justify-content:space-between!important}
.kt-page .justify-content-center,.kp-page .justify-content-center,.kr-page .justify-content-center,.kb-page .justify-content-center{justify-content:center!important}
.kt-page .gap-2,.kp-page .gap-2,.kr-page .gap-2,.kb-page .gap-2{gap:8px!important}
.kt-page .gap-3,.kp-page .gap-3,.kr-page .gap-3,.kb-page .gap-3{gap:12px!important}
.kt-page .h-100,.kp-page .h-100,.kr-page .h-100,.kb-page .h-100{height:100%!important}
.kt-page .w-100,.kp-page .w-100,.kr-page .w-100,.kb-page .w-100{width:100%!important}
.kt-page .mx-auto,.kp-page .mx-auto,.kr-page .mx-auto,.kb-page .mx-auto{margin-left:auto!important;margin-right:auto!important}
.kt-page .text-center,.kp-page .text-center,.kr-page .text-center,.kb-page .text-center{text-align:center!important}
.kt-page .text-end,.kp-page .text-end,.kr-page .text-end,.kb-page .text-end{text-align:right!important}
.kt-page .text-start,.kp-page .text-start,.kr-page .text-start,.kb-page .text-start{text-align:left!important}
.kt-page .position-relative,.kp-page .position-relative,.kr-page .position-relative,.kb-page .position-relative{position:relative!important}
.kt-page .position-absolute,.kp-page .position-absolute,.kr-page .position-absolute,.kb-page .position-absolute{position:absolute!important}
.kt-page .top-50,.kp-page .top-50,.kr-page .top-50,.kb-page .top-50{top:50%!important}
.kt-page .start-50,.kp-page .start-50,.kr-page .start-50,.kb-page .start-50{left:50%!important}
.kt-page .translate-middle,.kp-page .translate-middle,.kr-page .translate-middle,.kb-page .translate-middle{transform:translate(-50%,-50%)!important}

@media(min-width:576px){
    .kr-page .flex-sm-row{flex-direction:row!important}
}

@media(min-width:992px){
    .kt-page .justify-content-lg-end,.kp-page .justify-content-lg-end,.kr-page .justify-content-lg-end,.kb-page .justify-content-lg-end{justify-content:flex-end!important}
    .kt-page .text-lg-end,.kp-page .text-lg-end,.kr-page .text-lg-end,.kb-page .text-lg-end{text-align:right!important}
    .kr-page .sticky-lg-top{position:sticky!important;z-index:4}
}

.kt-page .mt-1,.kp-page .mt-1,.kr-page .mt-1,.kb-page .mt-1{margin-top:4px!important}
.kt-page .mt-2,.kp-page .mt-2,.kr-page .mt-2,.kb-page .mt-2{margin-top:8px!important}
.kt-page .mt-3,.kp-page .mt-3,.kr-page .mt-3,.kb-page .mt-3{margin-top:12px!important}
.kt-page .mt-4,.kp-page .mt-4,.kr-page .mt-4,.kb-page .mt-4{margin-top:16px!important}
.kt-page .mt-5,.kp-page .mt-5,.kr-page .mt-5,.kb-page .mt-5{margin-top:20px!important}
.kt-page .mb-0,.kp-page .mb-0,.kr-page .mb-0,.kb-page .mb-0{margin-bottom:0!important}
.kt-page .mb-1,.kp-page .mb-1,.kr-page .mb-1,.kb-page .mb-1{margin-bottom:4px!important}
.kt-page .mb-2,.kp-page .mb-2,.kr-page .mb-2,.kb-page .mb-2{margin-bottom:8px!important}
.kt-page .mb-3,.kp-page .mb-3,.kr-page .mb-3,.kb-page .mb-3{margin-bottom:12px!important}
.kt-page .mb-4,.kp-page .mb-4,.kr-page .mb-4,.kb-page .mb-4{margin-bottom:16px!important}
.kt-page .mb-5,.kp-page .mb-5,.kr-page .mb-5,.kb-page .mb-5{margin-bottom:20px!important}
.kt-page .mb-6,.kp-page .mb-6,.kr-page .mb-6,.kb-page .mb-6{margin-bottom:24px!important}
.kt-page .mb-7,.kp-page .mb-7,.kr-page .mb-7,.kb-page .mb-7{margin-bottom:28px!important}
.kr-page .my-4{margin-top:16px!important;margin-bottom:16px!important}
.kr-page .me-1,.kp-page .me-1,.kt-page .me-1,.kb-page .me-1{margin-right:4px!important}
.kr-page .me-2,.kp-page .me-2,.kt-page .me-2,.kb-page .me-2{margin-right:8px!important}
.kr-page .ps-3{padding-left:12px!important}
.kr-page .p-2{padding:8px!important}
.kr-page .p-3{padding:12px!important}
.kr-page .p-4{padding:16px!important}
.kr-page .p-5{padding:20px!important}
.kr-page .px-4{padding-left:16px!important;padding-right:16px!important}
.kr-page .py-4{padding-top:16px!important;padding-bottom:16px!important}
.kt-page .pt-4,.kp-page .pt-4,.kr-page .pt-4,.kb-page .pt-4{padding-top:16px!important}

.kt-page .py-9,.kp-page .py-9,.kr-page .py-9,.kb-page .py-9{padding-top:28px!important;padding-bottom:28px!important}
.kt-page .py-10,.kp-page .py-10,.kr-page .py-10,.kb-page .py-10{padding-top:32px!important;padding-bottom:32px!important}
.kt-page .py-11,.kp-page .py-11,.kr-page .py-11,.kb-page .py-11{padding-top:36px!important;padding-bottom:36px!important}
.kt-page .py-12,.kp-page .py-12,.kr-page .py-12,.kb-page .py-12{padding-top:40px!important;padding-bottom:40px!important}
.kt-page .pb-10,.kp-page .pb-10,.kr-page .pb-10,.kb-page .pb-10{padding-bottom:32px!important}

@media(min-width:768px){
    .kt-page .py-md-11,.kp-page .py-md-11,.kr-page .py-md-11,.kb-page .py-md-11{padding-top:34px!important;padding-bottom:34px!important}
    .kt-page .py-md-12,.kp-page .py-md-12,.kr-page .py-md-12,.kb-page .py-md-12{padding-top:38px!important;padding-bottom:38px!important}
    .kt-page .py-md-14,.kp-page .py-md-14,.kr-page .py-md-14,.kb-page .py-md-14{padding-top:44px!important;padding-bottom:44px!important}
    .kt-page .py-md-15,.kp-page .py-md-15,.kr-page .py-md-15,.kb-page .py-md-15{padding-top:48px!important;padding-bottom:48px!important}
    .kt-page .pb-md-12,.kp-page .pb-md-12,.kr-page .pb-md-12,.kb-page .pb-md-12{padding-bottom:38px!important}
    .kr-page .p-lg-5{padding:20px!important}
    .kr-page .px-lg-4{padding-left:16px!important;padding-right:16px!important}
}

/* Bootstrap-like components needed by the existing module markup ---------- */

.kt-page .alert,.kp-page .alert,.kr-page .alert,.kb-page .alert{
    position:relative;
    padding:13px 14px;
    border:1px solid var(--kr-line);
    border-radius:10px;
    color:var(--kr-body);
    background:#fff;
    font-size:10px;
    line-height:1.55;
}

.kt-page .alert-warning,.kp-page .alert-warning,.kr-page .alert-warning,.kb-page .alert-warning{
    border-color:#edd8aa;background:#fffaf0;color:#88652e
}
.kt-page .alert-info,.kp-page .alert-info,.kr-page .alert-info,.kb-page .alert-info{
    border-color:#cfe5f1;background:#f5fbff;color:#3d6e88
}
.kt-page .alert-danger,.kp-page .alert-danger,.kr-page .alert-danger,.kb-page .alert-danger{
    border-color:#eccccc;background:#fff8f8;color:#935858
}

.kr-page .btn-close{
    position:absolute;
    top:9px;
    right:9px;
    width:28px;
    height:28px;
    border:0;
    border-radius:50%;
    background:#eef3f6;
    cursor:pointer;
}
.kr-page .btn-close::before{content:"×";color:#607889;font-size:18px}

.kr-page .badge{
    display:inline-flex;
    align-items:center;
    padding:5px 8px;
    border-radius:999px;
    font-size:8px;
    font-weight:850;
}
.kr-page .text-bg-primary{color:#2e6b91;background:#eaf5fc}
.kr-page .text-bg-warning{color:#91651d;background:#fff4d9}
.kr-page .text-bg-success{color:#417965;background:#edf8f4}
.kr-page .text-bg-danger{color:#985858;background:#fff0f0}
.kr-page .text-bg-info{color:#3d708d;background:#edf8fe}
.kr-page .text-bg-secondary{color:#687e8d;background:#eef3f6}

.kr-page .form-control,
.kr-page .form-select,
.kr-page textarea,
.kr-page select,
.kb-page input,
.kb-page select,
.kp-page input,
.kp-page select,
.kt-page input,
.kt-page select{
    width:100%;
    min-height:38px;
    padding:8px 10px;
    border:1px solid #d6e1e9;
    border-radius:8px;
    outline:0;
    color:#31566f;
    background:#fff;
    font:inherit;
    font-size:10px;
    transition:border-color .16s ease,box-shadow .16s ease;
}

.kr-page textarea{min-height:100px;resize:vertical}

.kr-page .form-control:focus,
.kr-page .form-select:focus,
.kr-page textarea:focus,
.kr-page select:focus,
.kb-page input:focus,
.kb-page select:focus,
.kp-page input:focus,
.kp-page select:focus,
.kt-page input:focus,
.kt-page select:focus{
    border-color:#8ec3e6;
    box-shadow:0 0 0 3px rgba(8,116,216,.065);
}

.kr-page .input-group{
    display:flex;
    align-items:stretch;
}
.kr-page .input-group>.form-control{
    min-width:0;
    flex:1 1 auto;
    border-radius:8px 0 0 8px;
}
.kr-page .input-group>.btn{
    border-radius:0 8px 8px 0;
}

.kr-page .form-check{
    display:flex;
    align-items:flex-start;
    gap:7px;
}
.kr-page .form-check-input{
    width:15px;
    height:15px;
    flex:0 0 auto;
    margin-top:2px;
}
.kr-page .form-check-label{font-size:9px;color:var(--kr-body)}

.kr-page .btn{
    min-height:36px;
    padding:0 13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid #d7e2e9;
    border-radius:8px;
    color:#42657b;
    background:#fff;
    font:inherit;
    font-size:9px;
    font-weight:800;
    text-decoration:none;
    cursor:pointer;
}
.kr-page .btn-lg{min-height:40px;padding:0 15px;font-size:10px}
.kr-page .rounded-pill{border-radius:8px!important}
.kr-page .rounded-4{border-radius:10px!important}

.kr-page .table-responsive,
.kb-page .kb-table-wrap{
    max-width:100%;
    overflow:auto;
}
.kr-page .table{
    width:100%;
    border-collapse:collapse;
    color:#47667a;
    font-size:9px;
}
.kr-page .table th,
.kr-page .table td{
    padding:9px 10px;
    border-bottom:1px solid #edf2f5;
    text-align:left;
    vertical-align:top;
}
.kr-page .table-light th{background:#f6f9fb;color:#627d8f}
.kr-page .align-middle td{vertical-align:middle}

.kr-page .progress{
    height:7px;
    overflow:hidden;
    border-radius:999px;
    background:#edf2f5;
}
.kr-page .progress-bar{
    height:100%;
    border-radius:inherit;
    background:var(--kr-blue);
}

.kt-page .accordion-item,
.kp-page .accordion-item{
    overflow:hidden;
    margin-bottom:8px;
    border:1px solid var(--kr-line)!important;
    border-radius:10px!important;
    background:#fff;
}
.kt-page .accordion-header,
.kp-page .accordion-header{margin:0}
.kt-page .accordion-button,
.kp-page .accordion-button{
    width:100%;
    min-height:48px;
    padding:12px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:0;
    color:#315c77;
    background:#fff;
    font:inherit;
    font-size:10px;
    font-weight:850;
    text-align:left;
    cursor:pointer;
}
.kt-page .accordion-button::after,
.kp-page .accordion-button::after{
    content:"+";
    flex:0 0 auto;
    color:#7890a0;
    font-size:17px;
}
.kt-page .accordion-button:not(.collapsed)::after,
.kp-page .accordion-button:not(.collapsed)::after{content:"−"}
.kt-page .accordion-collapse,
.kp-page .accordion-collapse{display:none}
.kt-page .accordion-collapse.show,
.kp-page .accordion-collapse.show{display:block}
.kt-page .accordion-body,
.kp-page .accordion-body{
    padding:0 14px 14px;
    color:#667f91;
    font-size:9px;
    line-height:1.65;
}

.kt-page .display-6,
.kp-page .display-6,
.kr-page .display-6,
.kb-page .display-6{font-size:22px!important;line-height:1.2!important}
.kr-page .display-4{font-size:30px!important;line-height:1.1!important}
.kr-page .display-5{font-size:26px!important;line-height:1.15!important}
.kr-page .h2{font-size:20px}.kr-page .h3{font-size:17px}.kr-page .h4{font-size:14px}.kr-page .h5{font-size:12px}
.kr-page .lead,.kp-page .lead,.kt-page .lead,.kb-page .lead{font-size:12px;line-height:1.65}
.kr-page .small,.kp-page .small,.kt-page .small,.kb-page .small{font-size:8px}
.kr-page .fs-1{font-size:28px!important}.kr-page .fs-5{font-size:12px!important}
.kr-page .fw-bold{font-weight:850!important}.kr-page .fw-semibold{font-weight:700!important}
.kr-page .text-uppercase{text-transform:uppercase}
.kr-page .text-primary{color:var(--kr-blue)!important}
.kr-page .text-warning{color:#a36e1e!important}

/* ----------------------------------------------------------------------
   Shared Modern v2 surfaces
   ---------------------------------------------------------------------- */

.kt-page,
.kp-page,
.kr-page,
.kb-page{
    padding:14px 0 30px;
}

.kt-page section,
.kp-page section,
.kr-page section,
.kb-page section{
    background:transparent;
}

.kt-page .kt-soft,
.kp-page .kp-soft,
.kb-page .kb-soft{
    background:transparent!important;
}

.kt-breadcrumb,
.kp-breadcrumb,
.kb-breadcrumb{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    color:#8797a3!important;
    font-size:8px!important;
}
.kt-breadcrumb a,
.kp-breadcrumb a,
.kb-breadcrumb a{
    color:#547890!important;
    text-decoration:none!important;
}

.kt-kicker,
.kp-kicker,
.kb-kicker,
.kr-eyebrow{
    display:inline-flex!important;
    align-items:center;
    gap:6px;
    padding:0!important;
    border:0!important;
    color:#4d7f9f!important;
    background:transparent!important;
    font-size:8px!important;
    font-weight:900!important;
    letter-spacing:.10em!important;
    text-transform:uppercase!important;
}

.kt-kicker i,
.kp-kicker i,
.kb-kicker i{color:var(--kr-orange)!important}

.kt-title,
.kp-title,
.kb-title,
.kr-title{
    color:var(--kr-ink)!important;
    font-weight:850!important;
    letter-spacing:-.7px!important;
}

.kt-title{
    max-width:720px!important;
    font-size:40px!important;
    line-height:1.08!important;
}

.kp-title,
.kb-title{
    font-size:35px!important;
    line-height:1.1!important;
}

.kt-lead,
.kp-lead,
.kb-lead,
.kt-section-lead,
.kp-section-lead,
.kb-section-lead,
.kr-muted{
    color:var(--kr-body)!important;
}

.kt-lead,
.kp-lead,
.kb-lead{
    font-size:12px!important;
    line-height:1.7!important;
}

.kt-section-title,
.kb-section-title{
    color:var(--kr-ink)!important;
    font-size:22px!important;
    line-height:1.2!important;
    letter-spacing:-.35px!important;
}

.kt-section-lead,
.kp-section-lead,
.kb-section-lead{
    font-size:10px!important;
    line-height:1.6!important;
}

/* ----------------------------------------------------------------------
   Landing page
   ---------------------------------------------------------------------- */

.kt-hero{
    padding-top:4px;
}

.kt-hero>.container{
    position:relative;
    overflow:hidden;
    padding:29px!important;
    border:1px solid var(--kr-line);
    border-radius:var(--kr-radius);
    background:
        radial-gradient(circle at 94% 10%,rgba(30,146,199,.10),transparent 26%),
        radial-gradient(circle at 5% 100%,rgba(234,138,44,.08),transparent 22%),
        linear-gradient(135deg,#fff,#fbfdff 66%,#f3f9fd);
    box-shadow:var(--kr-shadow);
}

.kt-hero>.container::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:linear-gradient(180deg,var(--kr-blue),var(--kr-cyan),var(--kr-orange));
}

.kt-actions{
    display:flex!important;
    flex-wrap:wrap;
    gap:8px!important;
}

.kt-btn,
.kp-btn,
.kb-btn{
    min-height:38px!important;
    padding:0 14px!important;
    border:1px solid #d6e2ea!important;
    border-radius:8px!important;
    color:#3d6078!important;
    background:#fff!important;
    box-shadow:none!important;
    font-size:9px!important;
    font-weight:850!important;
    text-decoration:none!important;
    transform:none!important;
}

.kt-btn:hover,
.kp-btn:hover,
.kb-btn:hover{
    border-color:#aacce2!important;
    color:var(--kr-blue)!important;
    background:#f8fbfe!important;
    transform:none!important;
}

.kt-btn-primary,
.kp-btn-main,
.kb-btn-primary{
    border-color:transparent!important;
    color:#fff!important;
    background:linear-gradient(180deg,#1183e9,#0870d2)!important;
    box-shadow:0 4px 10px rgba(8,112,210,.12)!important;
}

.kt-btn-primary:hover,
.kp-btn-main:hover,
.kb-btn-primary:hover{
    color:#fff!important;
    background:linear-gradient(180deg,#0f79da,#0568c8)!important;
}

.kt-btn-report,
.kp-btn-report{
    border-color:#edd1be!important;
    color:#a15d28!important;
    background:#fff8f2!important;
}

.kt-btn-light,
.kp-btn-light,
.kb-btn-light{
    color:#466a81!important;
    background:#fff!important;
}

.kt-note,
.kp-form-note{
    color:#8293a0!important;
    font-size:8px!important;
}

.kt-hero-card,
.kt-service-card,
.kt-stat,
.kt-recent,
.kt-report-item,
.kt-step,
.kt-info-grid>div,
.kt-cta,
.kt-bmkg-card,
.kt-bmkg-period,
.kt-bmkg-empty{
    border:1px solid var(--kr-line)!important;
    border-radius:10px!important;
    background:#fff!important;
    box-shadow:var(--kr-shadow)!important;
}

.kt-hero-card{
    padding:18px!important;
}

.kt-hero-card-icon,
.kt-service-icon{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:38px!important;
    height:38px!important;
    border-radius:10px!important;
    color:var(--kr-blue)!important;
    background:#edf7ff!important;
    box-shadow:none!important;
}

.kt-hero-card h2{
    margin:11px 0 4px!important;
    color:#315b76!important;
    font-size:14px!important;
}

.kt-source{
    padding:11px 0!important;
    border-top:1px solid var(--kr-line-soft)!important;
}

.kt-source-no{
    width:28px!important;
    height:28px!important;
    flex:0 0 28px!important;
    border-radius:8px!important;
    color:#8f6a31!important;
    background:#fff6e9!important;
    font-size:9px!important;
}

.kt-source strong{color:#3b6078;font-size:10px}
.kt-source p{color:#718797!important;font-size:8px!important;line-height:1.5!important}

.kt-service-card{
    padding:17px!important;
    border-top:1px solid var(--kr-line)!important;
}
.kt-service-card h2{color:#315a74!important;font-size:14px!important}
.kt-service-card p,.kt-service-card li{color:#6c8495!important;font-size:9px!important;line-height:1.55!important}
.kt-label{color:#8395a2!important;font-size:7px!important}
.kt-text-link{color:#367da5!important;font-size:9px!important;text-decoration:none!important}

.kt-stat{
    min-height:92px!important;
    padding:14px!important;
}
.kt-stat i{color:#4f8daf!important;font-size:15px!important}
.kt-stat strong{margin:6px 0 3px!important;color:#2f5e79!important;font-size:22px!important}
.kt-stat span{color:#8294a1!important;font-size:8px!important}

.kt-recent{padding:16px!important;background:#fbfdff!important}
.kt-recent h3{color:#315a75!important;font-size:13px!important}
.kt-report-item{padding:14px!important}
.kt-report-item-head{color:#698596!important;font-size:7.5px!important}
.kt-report-item h4,.kt-report-item h2{color:#335c76!important;font-size:11px!important}
.kt-report-item p{color:#708798!important;font-size:8px!important}
.kt-report-item small{color:#91a0aa!important;font-size:7px!important}

.kt-step{
    min-height:130px!important;
    padding:15px!important;
}
.kt-step-no{
    position:static!important;
    width:28px!important;
    height:28px!important;
    margin-bottom:10px!important;
    border-radius:8px!important;
    color:#fff!important;
    background:linear-gradient(180deg,#3395c3,#1478ac)!important;
    font-size:8px!important;
}
.kt-step>i{display:none!important}
.kt-step h3{color:#345d77!important;font-size:11px!important}
.kt-step p{color:#718798!important;font-size:8px!important;line-height:1.55!important}

.kt-info-grid{gap:8px!important}
.kt-info-grid>div{padding:13px!important;box-shadow:none!important}
.kt-info-grid strong{color:#335c76!important;font-size:10px!important}
.kt-info-grid span{color:#758a99!important;font-size:8px!important}

.kt-cta{
    padding:20px!important;
    color:var(--kr-ink)!important;
}
.kt-cta h2{color:var(--kr-ink)!important;font-size:16px!important}
.kt-cta p{color:var(--kr-body)!important;font-size:9px!important}

.kt-bmkg-section{background:transparent!important}
.kt-bmkg-period{box-shadow:none!important}
.kt-bmkg-card{padding:14px!important}
.kt-bmkg-card strong{color:#335c76!important;font-size:22px!important}
.kt-bmkg-card p{font-size:8px!important}
.kt-bmkg-card.is-waspada{border-top:3px solid #d5b04a!important}
.kt-bmkg-card.is-siaga{border-top:3px solid #e5903f!important}
.kt-bmkg-card.is-awas{border-top:3px solid #c95f59!important}

/* ----------------------------------------------------------------------
   Prediksi / outlook
   ---------------------------------------------------------------------- */

.kp-hero{
    padding-top:4px;
}

.kp-hero>.container{
    position:relative;
    overflow:hidden;
    padding:28px!important;
    border:1px solid var(--kr-line);
    border-radius:var(--kr-radius);
    background:
        radial-gradient(circle at 94% 8%,rgba(32,149,196,.10),transparent 24%),
        linear-gradient(135deg,#fff,#fbfdff 70%,#f3f9fd);
    box-shadow:var(--kr-shadow);
}

.kp-hero>.container::before{
    content:"";
    position:absolute;
    left:0;top:0;bottom:0;width:4px;
    background:linear-gradient(180deg,var(--kr-blue),var(--kr-cyan),var(--kr-orange));
}

.kp-form,
.kp-hero-panel,
.kp-panel,
.kp-metric,
.kp-step,
.kp-coordinate-map,
.kp-bmkg-panel{
    border:1px solid var(--kr-line)!important;
    border-radius:10px!important;
    background:#fff!important;
    box-shadow:var(--kr-shadow)!important;
}

.kp-form{
    padding:15px!important;
    background:#fbfdff!important;
}

.kp-form label{
    color:#658092!important;
    font-size:8px!important;
    font-weight:800!important;
}

.kp-input-icon{
    border:1px solid #d6e2e9!important;
    border-radius:8px!important;
    background:#fff!important;
}
.kp-input-icon i{color:#6d91a6!important}
.kp-input-icon input{
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
}

.kp-search-results{
    overflow:hidden;
    border:1px solid var(--kr-line)!important;
    border-radius:8px!important;
    background:#fff!important;
    box-shadow:0 8px 22px rgba(31,72,107,.10)!important;
}

.kp-hero-panel{
    padding:17px!important;
}
.kp-hero-icon{
    width:38px!important;height:38px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    border-radius:10px!important;
    color:var(--kr-blue)!important;
    background:#edf7ff!important;
}
.kp-hero-panel h2{color:#335c76!important;font-size:14px!important}
.kp-hero-panel li{color:#6c8494!important;font-size:8.5px!important;line-height:1.5!important}
.kp-source-line{
    padding:8px 0!important;
    border-top:1px solid var(--kr-line-soft)!important;
}
.kp-source-line span{color:#8a9aa5!important;font-size:7px!important}
.kp-source-line strong{color:#47677c!important;font-size:8px!important}

.kp-result-head{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:14px!important;
    margin-bottom:14px!important;
}
.kp-result-actions{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}

.kp-alert{
    border:1px solid #ead9b7!important;
    border-radius:10px!important;
    background:#fffaf2!important;
    box-shadow:none!important;
}

.kp-metric{
    min-height:96px!important;
    padding:13px!important;
    box-shadow:none!important;
}
.kp-metric span{color:#8597a3!important;font-size:7px!important}
.kp-metric strong{color:#2e607c!important;font-size:17px!important}
.kp-metric small{color:#91a0aa!important;font-size:7px!important}

.kp-panel{
    padding:16px!important;
}
.kp-panel-head{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:10px!important;
    margin-bottom:12px!important;
}
.kp-panel-head h3{color:#315b75!important;font-size:12px!important}
.kp-panel-head p{color:#8293a0!important;font-size:8px!important;line-height:1.45!important}
.kp-chip{
    padding:5px 7px!important;
    border:1px solid #dbe7ee!important;
    border-radius:999px!important;
    color:#668397!important;
    background:#f5f9fb!important;
    font-size:7px!important;
}
.kp-chart-wrap{min-height:260px!important}
.kp-map{min-height:330px!important;border-radius:9px!important}
.kp-map-note{color:#8797a2!important;font-size:7px!important}
.kp-window-grid>div,
.kp-horizon-grid>div,
.kp-outlook-pair>div{
    border:1px solid #e4ebf0!important;
    border-radius:9px!important;
    background:#f9fbfd!important;
}

.kp-trmm-panel{
    overflow:hidden!important;
}
.kp-trmm-titlebar{
    padding-bottom:12px!important;
    border-bottom:1px solid var(--kr-line-soft)!important;
}
.kp-trmm-meta>div,
.kp-trmm-chart-card,
.kp-trmm-summary-card,
.kp-trmm-grid>div,
.kp-trmm-hth>div{
    border-color:#e3ebf0!important;
    border-radius:9px!important;
    background:#fbfdff!important;
    box-shadow:none!important;
}
.kp-trmm-subhead h4,
.kp-trmm-section-head h4{color:#365f79!important;font-size:11px!important}
.kp-trmm-subhead p,
.kp-trmm-section-head p,
.kp-trmm-chart-caption,
.kp-trmm-note{color:#7b909f!important;font-size:7.5px!important;line-height:1.5!important}

.kp-forecast-grid>article{
    border:1px solid #e3ebf0!important;
    border-radius:9px!important;
    background:#fff!important;
    box-shadow:none!important;
}

.kp-report-panel{
    background:linear-gradient(135deg,#fff,#fffaf5)!important;
}
.kp-report-link{color:#4e809e!important;font-size:8px!important}

.kp-limitations{
    color:#6e8596!important;
    font-size:8.5px!important;
    line-height:1.6!important;
}

.kp-step{
    padding:15px!important;
    min-height:120px!important;
    box-shadow:none!important;
}
.kp-step>span{
    width:28px!important;height:28px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    border-radius:8px!important;
    color:#fff!important;background:#358db7!important;
    font-size:8px!important;
}
.kp-step h3{color:#345e78!important;font-size:11px!important}
.kp-step p{color:#708798!important;font-size:8px!important;line-height:1.55!important}

/* BMKG panel embedded in prediction */
.kp-bmkg-panel{overflow:hidden!important}
.kp-bmkg-stripe{height:3px!important}
.kp-bmkg-icon{border-radius:9px!important}
.kp-bmkg-heading-row h3{color:#315d78!important;font-size:11px!important}
.kp-bmkg-description{font-size:8px!important;line-height:1.55!important}
.kp-bmkg-meta{font-size:7px!important}

/* ----------------------------------------------------------------------
   BMKG page
   ---------------------------------------------------------------------- */

.kb-hero{
    padding-top:4px!important;
    background:transparent!important;
}

.kb-hero>.container{
    position:relative;
    overflow:hidden;
    padding:28px!important;
    border:1px solid var(--kr-line);
    border-radius:var(--kr-radius);
    background:
        radial-gradient(circle at 95% 12%,rgba(211,164,52,.11),transparent 24%),
        linear-gradient(135deg,#fff,#fbfdff 72%,#fffaf2);
    box-shadow:var(--kr-shadow);
}

.kb-hero>.container::before{
    content:"";
    position:absolute;left:0;top:0;bottom:0;width:4px;
    background:linear-gradient(180deg,#d6ad47,#e58c3a,#bf5b56);
}

.kb-period-card,
.kb-status-card,
.kb-official-map,
.kb-filter,
.kb-table-wrap,
.kb-meaning,
.kb-disclaimer,
.kb-coordinate-summary,
.kb-empty{
    border:1px solid var(--kr-line)!important;
    border-radius:10px!important;
    background:#fff!important;
    box-shadow:var(--kr-shadow)!important;
}

.kb-period-card{padding:15px!important}
.kb-period-card span{color:#8698a4!important;font-size:7px!important}
.kb-period-card strong{color:#355f79!important;font-size:13px!important}
.kb-period-card small{color:#8a9aa5!important;font-size:7px!important}

.kb-status-card{
    padding:15px!important;
}
.kb-status-icon{
    width:36px!important;height:36px!important;border-radius:9px!important;
}
.kb-status-card strong{color:#315e79!important;font-size:22px!important}
.kb-status-card p{color:#748998!important;font-size:8px!important}
.kb-status-card.is-waspada{border-top:3px solid #d7b24b!important}
.kb-status-card.is-siaga{border-top:3px solid #e89442!important}
.kb-status-card.is-awas{border-top:3px solid #c6615a!important}

.kb-official-map{
    overflow:hidden!important;
    padding:10px!important;
}
.kb-official-map img{border-radius:8px!important}
.kb-official-map figcaption{color:#81929f!important;font-size:7px!important}

.kb-coordinate-summary{
    padding:10px 12px!important;
    box-shadow:none!important;
    color:#658092!important;
    font-size:8px!important;
}
.kb-filter{
    padding:13px!important;
    box-shadow:none!important;
}
.kb-filter label{color:#6d8393!important;font-size:8px!important}
.kb-table-wrap{box-shadow:none!important}
.kb-table{
    width:100%!important;
    border-collapse:collapse!important;
    color:#536f83!important;
    font-size:8.5px!important;
}
.kb-table th,.kb-table td{
    padding:9px 10px!important;
    border-bottom:1px solid #edf2f5!important;
    text-align:left!important;
}
.kb-table th{color:#647f91!important;background:#f6f9fb!important}
.kb-level{
    padding:4px 7px!important;
    border-radius:999px!important;
    font-size:7px!important;
    font-weight:850!important;
}
.kb-analyse-link{color:#347da5!important;font-size:8px!important;text-decoration:none!important}
.kb-coordinate-note{font-size:7px!important}
.kb-meaning{
    padding:15px!important;
    box-shadow:none!important;
}
.kb-meaning h3{color:#315d77!important;font-size:11px!important}
.kb-meaning p{color:#718797!important;font-size:8px!important;line-height:1.55!important}
.kb-disclaimer{padding:13px!important;box-shadow:none!important}
.kb-disclaimer p{font-size:8px!important}

/* ----------------------------------------------------------------------
   Reporting / map / statistics / detail / status
   ---------------------------------------------------------------------- */

.kr-hero-sm{
    padding-top:4px!important;
    background:transparent!important;
}

.kr-hero-sm>.container,
.kr-hero-sm>.kr-container{
    position:relative;
    overflow:hidden;
    padding:24px!important;
    border:1px solid var(--kr-line);
    border-radius:var(--kr-radius);
    background:
        radial-gradient(circle at 94% 10%,rgba(30,146,199,.08),transparent 24%),
        linear-gradient(135deg,#fff,#fbfdff);
    box-shadow:var(--kr-shadow);
}

.kr-hero-sm>.container::before,
.kr-hero-sm>.kr-container::before{
    content:"";
    position:absolute;left:0;top:0;bottom:0;width:4px;
    background:linear-gradient(180deg,var(--kr-blue),var(--kr-cyan),var(--kr-orange));
}

.kr-section{
    padding:16px 0!important;
}

.kr-card,
.kr-card-soft,
.kr-notice,
.kr-filter-bar,
.kr-map-shell{
    border:1px solid var(--kr-line)!important;
    border-radius:10px!important;
    background:#fff!important;
    box-shadow:var(--kr-shadow)!important;
}

.kr-card-soft{
    background:#f8fbfd!important;
    box-shadow:none!important;
}

.kr-card h1,.kr-card h2,.kr-card h3,.kr-card h4{
    color:#315a74!important;
}
.kr-card p,.kr-card li,.kr-help{
    color:#708697!important;
    font-size:9px;
    line-height:1.55;
}

.kr-icon{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:38px!important;
    height:38px!important;
    border-radius:10px!important;
    color:var(--kr-blue)!important;
    background:#edf7ff!important;
    box-shadow:none!important;
}
.kr-icon.orange{color:#aa672d!important;background:#fff4e9!important}

.kr-form-label{
    display:block!important;
    margin-bottom:5px!important;
    color:#617b8d!important;
    font-size:8px!important;
    font-weight:850!important;
}
.kr-required::after{color:#bd5f59!important}

.kr-btn-primary{
    border:1px solid transparent!important;
    color:#fff!important;
    background:linear-gradient(180deg,#1183e9,#0870d2)!important;
}
.kr-btn-outline{
    border:1px solid #d5e2e9!important;
    color:#45697f!important;
    background:#fff!important;
}

.kr-notice{
    padding:13px!important;
    color:#6e8392!important;
    background:#fffaf3!important;
    border-color:#ead9bb!important;
    box-shadow:none!important;
}

.kr-map,
.kr-map-form{
    overflow:hidden!important;
    border:1px solid var(--kr-line)!important;
    border-radius:9px!important;
    background:#dfe8ed!important;
}
.kr-map{min-height:560px!important}
.kr-map-form{min-height:390px!important}
.kr-map-coordinate,.kr-map-footer,.kr-map-help{
    color:#748b99!important;
    font-size:8px!important;
}

.kr-filter-bar{
    box-shadow:none!important;
}

.kr-preview-grid img,
.kr-photo{
    border:1px solid #dce6ec!important;
    border-radius:9px!important;
}

.kr-stat-value{
    color:#2f607b!important;
    font-size:24px!important;
    font-weight:850!important;
}

.kr-data-table{
    width:100%;
    border-collapse:collapse;
    color:#587285;
    font-size:8.5px;
}
.kr-data-table th,.kr-data-table td{
    padding:9px 10px;
    border-bottom:1px solid #edf2f5;
    text-align:left;
}

.kr-status-line{
    position:relative;
    padding:0 0 16px 22px!important;
    border-left:1px solid #dce6ec!important;
}
.kr-status-dot{
    position:absolute!important;
    left:-5px!important;
    top:2px!important;
    width:9px!important;
    height:9px!important;
    border-radius:50%!important;
    background:var(--kr-blue)!important;
    box-shadow:0 0 0 3px #edf7ff!important;
}

.kr-dropzone{
    border:1px dashed #bcd0dd!important;
    border-radius:10px!important;
    background:#fbfdff!important;
}

.kr-page a{
    text-underline-offset:2px;
}

/* ----------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */

@media(max-width:900px){
    .kt-page .container,
    .kp-page .container,
    .kr-page .container,
    .kb-page .container,
    .kr-container{
        width:min(100% - 24px,1160px);
    }

    .kt-hero>.container,
    .kp-hero>.container,
    .kb-hero>.container{
        padding:22px!important;
    }

    .kt-title{font-size:33px!important}
    .kp-title,.kb-title{font-size:30px!important}

    .kp-result-head{
        align-items:flex-start!important;
        flex-direction:column!important;
    }

    .kr-map{min-height:480px!important}
}

@media(max-width:620px){
    .kt-page,
    .kp-page,
    .kr-page,
    .kb-page{
        padding-top:10px;
    }

    .kt-title{font-size:29px!important}
    .kp-title,.kb-title{font-size:27px!important}

    .kt-hero>.container,
    .kp-hero>.container,
    .kb-hero>.container,
    .kr-hero-sm>.container,
    .kr-hero-sm>.kr-container{
        padding:18px!important;
    }

    .kt-actions,
    .kp-form-actions,
    .kb-hero-actions{
        display:grid!important;
        grid-template-columns:1fr!important;
        width:100%;
    }

    .kt-actions .kt-btn,
    .kp-form-actions .kp-btn,
    .kb-hero-actions .kb-btn{
        width:100%!important;
    }

    .kt-page .col-6,
    .kp-page .col-6,
    .kr-page .col-6,
    .kb-page .col-6{
        width:100%;
    }

    .kp-coordinate-grid{
        grid-template-columns:1fr!important;
    }

    .kp-map{min-height:300px!important}
    .kr-map{min-height:430px!important}
    .kr-map-form{min-height:320px!important}

    .kb-table{min-width:690px!important}
}