:root{--n:#07334c;--t:#087f83;--g:#d4a82c;--i:#173042;--m:#627887;--l:#d7e4e7;--s:#f1f7f8;--w:#fff;--sh:0 14px 30px rgba(7,51,76,.10)}*{box-sizing:border-box}body{margin:0;background:#edf4f5;color:var(--i);font:15px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif}a{color:#07666d}.wrap{width:min(1180px,calc(100% - 30px));margin:auto}.site-header{background:linear-gradient(135deg,#052b42,#087c7d);color:#fff}.head{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none}.brand>span{font-size:30px}.brand b,.brand small{display:block}.brand small{color:#d9f5f3;font-weight:500}.head nav,.foot nav,.actions,.badges{display:flex;flex-wrap:wrap;gap:9px}.head nav a{padding:9px 13px;border-radius:999px;color:#fff;font-weight:800;text-decoration:none}.head nav a:hover{background:#fff;color:var(--n)}main{padding:32px 0 50px}.hero,.detail-hero{padding:34px;border-radius:25px;color:#fff;background:linear-gradient(135deg,#063653,#078b8a);box-shadow:var(--sh)}.hero h1,.detail-hero h1{margin:0 0 13px;font-size:clamp(2rem,5vw,3.5rem);line-height:1.06}.hero p,.detail-hero p{max-width:900px;color:#e1f7f5}.button{display:inline-flex;justify-content:center;align-items:center;min-height:45px;padding:10px 18px;border:0;border-radius:999px;background:var(--t);color:#fff;font-weight:850;text-decoration:none;cursor:pointer}.button.gold{background:var(--g);color:#2b2205}.button.danger{background:#9b1c1c}.section{margin-top:30px}.grid,.datasets,.software,.stats{display:grid;gap:15px}.grid{grid-template-columns:repeat(3,1fr)}.datasets,.software{grid-template-columns:repeat(3,1fr)}.stats{grid-template-columns:repeat(4,1fr)}.card,.panel,.stat,.detail{background:#fff;border:1px solid var(--l);border-radius:19px;box-shadow:var(--sh)}.card{display:block;padding:19px;color:inherit;text-decoration:none}.card h3{margin:8px 0;color:var(--n)}.card p{color:var(--m)}.panel,.detail{padding:22px}.stat{padding:17px}.stat strong,.stat span{display:block}.stat strong{font-size:1.8rem;color:var(--n)}.badge{display:inline-flex;padding:4px 9px;border-radius:999px;background:#e7f5f4;color:#075c61;font-size:.78rem;font-weight:850}.badge.gold{background:#fff2c2;color:#6b5100}.meta{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}.meta div{padding:9px;border-radius:11px;background:var(--s)}.meta strong,.meta span{display:block}.meta strong{color:var(--m);font-size:.7rem;text-transform:uppercase}.detail-grid{display:grid;grid-template-columns:2fr .9fr;gap:20px;margin-top:20px}.detail{margin-bottom:16px}.detail h2,.panel h1,.panel h2{margin-top:0;color:var(--n)}.detail p{text-align:justify}.links{display:grid;gap:8px}.links a{padding:10px;border-radius:10px;background:#edf7f7;font-weight:800;text-decoration:none;overflow-wrap:anywhere}.form-grid,.search{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.search{grid-template-columns:2fr 1fr 1fr 1fr auto}.full{grid-column:1/-1}label{display:block;color:var(--n);font-weight:750}label span{display:block;margin-bottom:5px}input,select,textarea{width:100%;padding:10px 11px;border:1px solid #bed0d5;border-radius:10px;font:inherit}textarea{min-height:115px;resize:vertical}.check{display:flex;gap:8px;align-items:center}.check input{width:auto}fieldset{margin:0 0 20px;padding:18px;border:1px solid var(--l);border-radius:16px}legend{padding:0 7px;color:var(--n);font-weight:900}.flash{width:min(1180px,calc(100% - 30px));margin:14px auto 0;padding:11px;border-radius:10px;font-weight:750}.flash.success{background:#dcf7e9;color:#0b6b43}.flash.error{background:#fee2e2;color:#9b1c1c}.adminbar{display:flex;justify-content:space-between;gap:14px;margin-bottom:18px}.table{overflow-x:auto;background:#fff;border-radius:15px;box-shadow:var(--sh)}table{width:100%;border-collapse:collapse}th,td{padding:12px 13px;border-bottom:1px solid var(--l);text-align:left;vertical-align:top}th{background:#edf5f6;color:var(--n)}footer{background:#052f3a;color:#e7f6f5}.foot{display:flex;justify-content:space-between;gap:20px;padding:26px 0}.foot a{color:#fff}.copy{padding:13px;border-top:1px solid rgba(255,255,255,.15);text-align:center}@media(max-width:950px){.head,.foot{align-items:flex-start;flex-direction:column;padding:17px 0}.grid,.datasets,.software{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}.search{grid-template-columns:1fr 1fr}.detail-grid{grid-template-columns:1fr}}@media(max-width:640px){main{padding-top:20px}.hero,.detail-hero{padding:23px 18px}.grid,.datasets,.software,.stats,.form-grid,.search{grid-template-columns:1fr}.full{grid-column:auto}.head nav{width:100%}.head nav a{flex:1 1 44%;text-align:center}.panel,.detail{padding:17px}}

/* WATER DATA ADMIN BUTTON CORRECTION */
.adminbar{
    align-items:center;
}

.adminbar .actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    margin:0;
}

.adminbar .actions .button{
    flex:0 0 auto;
    width:auto;
    min-width:0;
    min-height:44px;
    height:44px;
    padding:10px 18px;
    border-radius:12px;
    white-space:nowrap;
    line-height:1.2;
}

@media(max-width:700px){
    .adminbar{
        flex-direction:column;
        align-items:stretch;
    }

    .adminbar .actions{
        width:100%;
        display:grid;
        grid-template-columns:1fr;
    }

    .adminbar .actions .button{
        width:100%;
        height:auto;
        min-height:46px;
        text-align:center;
    }
}

/* WATER DATA EARTH ENGINE ACCESS CARD */

.links .earth-engine-access-link{
    display:block;
    background:#e6f4f7;
}

.links .earth-engine-access-link strong,
.links .earth-engine-access-link small{
    display:block;
}

.links .earth-engine-access-link small{
    margin-top:4px;
    color:#075c61;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;
    font-size:12px;
    font-weight:750;
    line-height:1.45;
    overflow-wrap:anywhere;
}


/* WATER DATA VISITOR COUNTERS */

.wdata-visitor-section{
    padding:30px 0;
    background:
        linear-gradient(
            135deg,
            #e7f4f5,
            #f8fbfb
        );
    border-top:
        1px solid var(--l);
}

.wdata-visitor-inner{
    display:grid;
    gap:18px;
}

.wdata-visitor-heading{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:24px;
}

.wdata-visitor-heading h2{
    margin:2px 0 0;
    color:var(--n);
    font-size:
        clamp(
            1.45rem,
            3vw,
            2rem
        );
    line-height:1.2;
}

.wdata-visitor-heading p{
    max-width:520px;
    margin:0;
    color:var(--m);
    text-align:right;
}

.wdata-visitor-kicker{
    color:#08767b;
    font-size:.76rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.wdata-visitor-grid{
    display:grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );
    gap:14px;
}

.wdata-visitor-card{
    position:relative;
    min-height:118px;
    padding:19px;
    border:
        1px solid #cfe1e4;
    border-radius:18px;
    background:#fff;
    box-shadow:var(--sh);
    overflow:hidden;
}

.wdata-visitor-card::after{
    content:"";
    position:absolute;
    right:-26px;
    bottom:-34px;
    width:92px;
    height:92px;
    border-radius:50%;
    background:
        rgba(
            8,
            127,
            131,
            .08
        );
}

.wdata-visitor-card strong,
.wdata-visitor-card small{
    display:block;
    position:relative;
    z-index:1;
}

.wdata-visitor-card strong{
    margin-top:8px;
    color:var(--n);
    font-size:2rem;
    line-height:1;
}

.wdata-visitor-card small{
    margin-top:8px;
    color:var(--m);
    font-weight:800;
}

.wdata-visitor-icon{
    position:relative;
    z-index:1;
    font-size:1.25rem;
}

.wdata-visitor-card.online{
    background:
        linear-gradient(
            135deg,
            #063c52,
            #087f83
        );
    border-color:#087f83;
}

.wdata-visitor-card.online strong,
.wdata-visitor-card.online small{
    color:#fff;
}

.wdata-online-dot{
    display:block;
    width:12px;
    height:12px;
    border-radius:50%;
    background:#4ade80;
    box-shadow:
        0 0 0 6px
        rgba(
            74,
            222,
            128,
            .17
        );
}

.counter-unavailable
.wdata-visitor-card{
    opacity:.75;
}

@media(max-width:820px){

    .wdata-visitor-heading{
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }

    .wdata-visitor-heading p{
        text-align:left;
    }

    .wdata-visitor-grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}

@media(max-width:480px){

    .wdata-visitor-section{
        padding:23px 0;
    }

    .wdata-visitor-grid{
        grid-template-columns:
            1fr 1fr;
        gap:10px;
    }

    .wdata-visitor-card{
        min-height:105px;
        padding:15px;
    }

    .wdata-visitor-card strong{
        font-size:1.65rem;
    }

    .wdata-visitor-card small{
        font-size:.78rem;
    }

}


/* =========================================================
   WATER DATA COMPLETE MOBILE RESPONSIVE V1
   Public pages, administration, forms, tables and navigation
========================================================= */

html{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

body{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:hidden;
}

img,
svg,
video,
canvas,
iframe{
    max-width:100%;
}

img,
video{
    height:auto;
}

.wrap{
    width:min(1180px,calc(100% - 28px));
    min-width:0;
}

main,
section,
article,
aside,
header,
footer,
nav,
div,
form,
fieldset{
    min-width:0;
}

.card,
.panel,
.stat,
.detail,
.hero,
.detail-hero,
.table{
    min-width:0;
}

p,
li,
td,
th,
small,
strong,
span,
a{
    overflow-wrap:anywhere;
    word-break:normal;
}

pre,
code{
    max-width:100%;
    overflow-x:auto;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}


/* =========================================================
   HEADER AND NAVIGATION
========================================================= */

.head{
    min-width:0;
}

.brand{
    min-width:0;
}

.brand b,
.brand small{
    overflow-wrap:normal;
}

.head nav{
    min-width:0;
}

.head nav a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    line-height:1.25;
    text-align:center;
}


/* =========================================================
   CARDS AND PAGE LAYOUT
========================================================= */

.grid,
.datasets,
.software,
.stats,
.detail-grid,
.form-grid,
.search{
    min-width:0;
}

.card,
.panel,
.stat,
.detail{
    overflow:hidden;
}

.card:hover{
    transform:none;
}

.hero p,
.detail-hero p,
.card p,
.panel p,
.detail p{
    max-width:100%;
}

.meta{
    min-width:0;
}

.meta div{
    min-width:0;
}


/* =========================================================
   FORMS
========================================================= */

form{
    width:100%;
    max-width:100%;
}

fieldset{
    min-width:0;
}

legend{
    max-width:100%;
    line-height:1.35;
}

label{
    min-width:0;
}

input,
select,
textarea,
button{
    max-width:100%;
}

input,
select,
textarea{
    min-height:44px;
}

textarea{
    line-height:1.55;
}

input[type="checkbox"],
input[type="radio"]{
    flex:0 0 auto;
    width:18px;
    height:18px;
    min-height:0;
    margin-top:2px;
}

.check{
    min-width:0;
    align-items:flex-start;
}

.check span{
    min-width:0;
    margin:0;
}

.button{
    min-height:46px;
    line-height:1.25;
    text-align:center;
}


/* =========================================================
   ADMINISTRATION
========================================================= */

.adminbar{
    align-items:center;
    min-width:0;
}

.adminbar > div{
    min-width:0;
}

.adminbar .actions{
    flex:0 0 auto;
    align-items:center;
    justify-content:flex-end;
}

.adminbar .actions .button{
    flex:0 0 auto;
    width:auto;
    min-width:0;
    height:auto;
    min-height:44px;
    padding:10px 17px;
    border-radius:12px;
    white-space:nowrap;
}


/* =========================================================
   TABLES
========================================================= */

.table{
    position:relative;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
}

.table table{
    width:100%;
    min-width:760px;
}

th,
td{
    overflow-wrap:normal;
    word-break:normal;
}


/* =========================================================
   ACCESS AND LONG LINKS
========================================================= */

.links{
    min-width:0;
}

.links a{
    min-width:0;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.earth-engine-access-link small{
    overflow-wrap:anywhere;
    word-break:break-all;
}


/* =========================================================
   FOOTER SAFETY
========================================================= */

.foot{
    min-width:0;
}

.foot nav{
    min-width:0;
}

.wdf-inner,
.wdf-counter-section,
.wdf-services-section,
.wdf-counter-grid,
.wdf-services-grid{
    min-width:0;
}

.wdf-service-card,
.wdf-counter-card{
    min-width:0;
}

.wdf-service-text{
    min-width:0;
}

.wdf-service-text strong,
.wdf-service-text small{
    overflow-wrap:anywhere;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

    .wrap{
        width:min(100% - 24px,1180px);
    }

    .head{
        flex-wrap:wrap;
        padding:15px 0;
    }

    .head nav{
        display:grid;
        grid-template-columns:
            repeat(4,minmax(0,1fr));
        width:100%;
        gap:8px;
    }

    .head nav a{
        width:100%;
        padding:10px 8px;
        border:1px solid rgba(255,255,255,.15);
        border-radius:11px;
        background:rgba(255,255,255,.06);
    }

    main{
        padding:25px 0 42px;
    }

    .hero,
    .detail-hero{
        padding:28px 24px;
    }

    .grid,
    .datasets,
    .software{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .stats{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .detail-grid{
        grid-template-columns:1fr;
    }

    .search{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .full{
        grid-column:auto;
    }

    .adminbar{
        flex-direction:column;
        align-items:stretch;
    }

    .adminbar .actions{
        display:grid;
        grid-template-columns:
            repeat(3,minmax(0,1fr));
        width:100%;
    }

    .adminbar .actions .button{
        width:100%;
        white-space:normal;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:640px){

    body{
        font-size:16px;
        line-height:1.6;
    }

    .wrap{
        width:min(100% - 20px,1180px);
    }

    .site-header{
        position:relative;
    }

    .head{
        min-height:0;
        padding:13px 0 15px;
    }

    .brand{
        width:100%;
        justify-content:center;
        text-align:center;
    }

    .brand > span{
        flex:0 0 auto;
        font-size:27px;
    }

    .brand b{
        font-size:15px;
    }

    .brand small{
        margin-top:2px;
        font-size:12px;
        line-height:1.35;
    }

    .head nav{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
        gap:7px;
    }

    .head nav a{
        min-height:46px;
        padding:9px 7px;
        border-radius:10px;
        font-size:14px;
    }

    main{
        padding:18px 0 32px;
    }

    .hero,
    .detail-hero{
        padding:22px 17px;
        border-radius:18px;
    }

    .hero h1,
    .detail-hero h1{
        margin-bottom:11px;
        font-size:clamp(1.75rem,8vw,2.35rem);
        line-height:1.12;
    }

    .hero p,
    .detail-hero p{
        margin-bottom:0;
        font-size:15px;
        line-height:1.65;
        text-align:left;
    }

    .section{
        margin-top:22px;
    }

    .grid,
    .datasets,
    .software,
    .stats,
    .search,
    .form-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .card,
    .panel,
    .stat,
    .detail{
        border-radius:15px;
    }

    .card{
        padding:16px;
    }

    .panel,
    .detail{
        padding:17px 15px;
    }

    .stat{
        padding:15px;
    }

    .stat strong{
        font-size:1.55rem;
    }

    .meta{
        grid-template-columns:1fr;
    }

    .meta div{
        padding:10px;
    }

    .badges{
        gap:6px;
    }

    .badge{
        max-width:100%;
        white-space:normal;
        line-height:1.35;
    }

    fieldset{
        margin-bottom:16px;
        padding:14px 12px;
        border-radius:13px;
    }

    legend{
        padding:0 5px;
        font-size:14px;
    }

    label{
        font-size:14px;
    }

    input,
    select,
    textarea{
        width:100%;
        min-height:47px;
        padding:11px 12px;
        border-radius:10px;
        font-size:16px;
    }

    textarea{
        min-height:130px;
    }

    .check{
        padding:6px 0;
        font-size:15px;
    }

    .button{
        width:100%;
        min-height:48px;
        padding:12px 15px;
        border-radius:12px;
        white-space:normal;
    }

    .actions{
        display:grid;
        grid-template-columns:1fr;
        width:100%;
        gap:9px;
    }

    .adminbar{
        margin-bottom:15px;
    }

    .adminbar h1{
        margin-bottom:5px;
        font-size:1.65rem;
        line-height:1.2;
    }

    .adminbar p{
        margin-top:0;
    }

    .adminbar .actions{
        grid-template-columns:1fr;
        gap:8px;
    }

    .adminbar .actions .button{
        width:100%;
        min-height:47px;
        padding:11px 14px;
        border-radius:11px;
    }

    .table{
        border-radius:13px;
    }

    .table::before{
        content:"Swipe horizontally to view all columns";
        display:block;
        position:sticky;
        left:0;
        padding:9px 12px;
        border-bottom:1px solid var(--l);
        background:#e8f4f5;
        color:var(--n);
        font-size:12px;
        font-weight:800;
    }

    .table table{
        min-width:720px;
    }

    th,
    td{
        padding:11px 12px;
        font-size:14px;
    }

    .links a{
        min-height:48px;
        padding:12px;
        border-radius:11px;
    }

    .flash{
        width:min(100% - 20px,1180px);
        padding:11px 12px;
    }

    .foot{
        flex-direction:column;
        gap:15px;
        padding:22px 0;
    }

    .foot nav{
        width:100%;
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
    }

    .foot nav a{
        display:block;
        min-height:44px;
        padding:10px 12px;
        border:1px solid rgba(255,255,255,.16);
        border-radius:10px;
        text-align:center;
    }

    .copy{
        padding:13px 10px;
        font-size:13px;
    }

    .wdf-counter-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

    .wdf-services-grid{
        grid-template-columns:1fr !important;
    }

    .wdf-service-card{
        min-height:100px !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:420px){

    .wrap{
        width:min(100% - 16px,1180px);
    }

    .head nav{
        grid-template-columns:1fr;
    }

    .hero,
    .detail-hero{
        padding:20px 15px;
    }

    .hero h1,
    .detail-hero h1{
        font-size:1.7rem;
    }

    .panel,
    .detail,
    .card{
        padding:15px 13px;
    }

    fieldset{
        padding:13px 10px;
    }

    .wdf-counter-grid{
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
    }

    .wdf-counter-card{
        min-height:105px !important;
        padding:12px !important;
    }

    .wdf-counter-card strong{
        font-size:22px !important;
    }

    .wdf-service-card{
        align-items:flex-start !important;
    }

}



/* =========================================================
   WATER DATA DATASET META CONTRAST V1
   Provider, coverage, resolution and other dataset facts
========================================================= */

.dataset-card .meta,
.card .meta,
.dataset-card .meta-list,
.card .meta-list {
    color: #173042 !important;
}


/*
 * Small uppercase labels:
 * Provider, Coverage, Resolution, etc.
 */

.dataset-card .meta strong,
.card .meta strong,
.dataset-card .meta-list strong,
.card .meta-list strong {
    color: #294f60 !important;
    font-weight: 900 !important;
}


/*
 * Dataset fact values.
 */

.dataset-card .meta span,
.card .meta span,
.dataset-card .meta-list span,
.card .meta-list span {
    color: #173042 !important;
    font-weight: 650 !important;
}


/*
 * Keep the fact-box background light while providing
 * sufficient separation from the text.
 */

.dataset-card .meta div,
.card .meta div,
.dataset-card .meta-list div,
.card .meta-list div {
    background: #edf5f6 !important;
    border: 1px solid #cfdee2 !important;
}


/*
 * Mobile readability.
 */

@media (max-width: 640px) {

    .dataset-card .meta strong,
    .card .meta strong,
    .dataset-card .meta-list strong,
    .card .meta-list strong {
        color: #214657 !important;
        font-size: 12px !important;
    }

    .dataset-card .meta span,
    .card .meta span,
    .dataset-card .meta-list span,
    .card .meta-list span {
        color: #102f40 !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

}