:root {
  --primary: #0f2d5e;
  --primary-mid: #1a4480;
  --primary-light: #2563eb;
  --accent: #f97316;
  --accent-hover: #ea6c00;
  --bg: #f1f5f9;
  --card: #ffffff;
  --text: #1e293b;
  --muted: #64748b;
  --border: #e2e8f0;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --c-pf: #2563eb; --c-pf-bg: #eff6ff;
  --c-esi: #059669; --c-esi-bg: #ecfdf5;
  --c-tds: #d97706; --c-tds-bg: #fffbeb;
  --c-pt: #7c3aed; --c-pt-bg: #f5f3ff;
  --c-lwf: #0891b2; --c-lwf-bg: #ecfeff;
  --c-bonus: #dc2626; --c-bonus-bg: #fef2f2;
  --c-factory: #92400e; --c-factory-bg: #fef3c7;
  --c-env: #15803d; --c-env-bg: #f0fdf4;
  --c-fire: #9d174d; --c-fire-bg: #fff1f2;
  --c-general: #475569; --c-general-bg: #f8fafc;
  --tl-teal: #ff9e2c;
  --tl-white: #ffffff;
}

body{background:#f1f5f9}
/* ── Hero ── */
.hero {
    background-image: url(../images/connectbg.jpg);
    background-size: cover;
    background-position: center center;
    position: relative;
    padding: 140px 0px 110px;
    text-align: center;
}

    .hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 197, 163, .12);
    border: 1px solid rgba(0, 197, 163, .25);
    color: var(--tl-teal);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 99px;
    margin-bottom: 0px;
}


.hero h1 {
    font-size: clamp(1.9rem, 4vw, 4.2rem);
    margin-top: 10px;
    font-weight: 700;
    color: var(--tl-white);
    line-height: 58px;
    margin-bottom: 18px;
}
.hero h1 em {
    color: var(--tl-teal);
    font-style: normal;
}
.hero p {
    text-align: center;
    color: #fff;
    font-size: 22px;
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.hero-state{display:flex;justify-content:center;align-items:center;gap:.75rem;flex-wrap:wrap;position:relative;margin-top:30px;}
.hero-state label{font-size:1.6rem;opacity:.9;font-weight:500; color:#fff;}
.state-pick{padding:.7rem 1.25rem;border-radius:8px;border:2px solid rgba(255,255,255,.5);background:#fff;color:var(--text);font-size:1.2rem;font-weight:600;min-width:260px;cursor:pointer;}
.state-pick:focus{outline:none;border-color:#fff;}
.searchrow .hero-stats,
.hero-stats{
    display:grid !important;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    margin:24px 0 0;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    position:relative;
}
.hero-stats > .hs{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    padding:6px 26px !important;
    margin:0 !important;
    border:0 !important;
    text-align:left;
    position:relative;
}
.hero-stats > .hs + .hs::before{
    content:"";
    position:absolute;
    left:0;top:6px;bottom:6px;
    width:1px;
    background:#dfe3ef;
}
.hs-num {
    font-family:'Playfair Display',Georgia,'Times New Roman',serif;
    font-size:clamp(34px,3.6vw,48px);
    font-weight:600;
    color:#0a2540;
    line-height:1.05;
}
.hs-lbl {
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#656971;
}
#statTotal::after{content:"+";}

/* ── Controls bar (Figma node 5113:65854) ── */
.ctrl-bar{
    background:transparent;
    border:0;
    padding:0;
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
    position:static;
    z-index:auto;
}
/* force the filter dropdowns onto their own row, below search + toggle */
.ctrl-bar::after{content:"";flex-basis:100%;height:0;order:1;}

.ctrl-bar select, .ctrl-bar input[type=text] {
    height:56px;
    padding:14px 16px;
    border:1px solid #dbdbf0;
    border-radius:15px;
    font-size:14px;
    font-weight:500;
    color:#0a2540;
    background:#fff;
    transition:border .2s, box-shadow .2s;
}
.ctrl-bar select:focus,.ctrl-bar input:focus{
    outline:none;
    border-color:#18539c;
    box-shadow:0 0 0 3px rgba(24,83,156,.12);
}

.ctrl-bar select{
    order:2;
    flex:1 1 0;
    width:auto;
    min-width:170px;
    padding-right:42px;
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23656971' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    cursor:pointer;
}
select#stateMain{order:2;flex:1.5 1 0;min-width:230px;}
#fySelector{border-color:#dbdbf0 !important;color:#0a2540 !important;font-weight:600 !important;}

.search-wrap{order:0;flex:1 1 380px;position:relative;min-width:260px;}
.ctrl-bar .search-wrap input[type=text]{
    width:100%;
    padding:14px 16px 14px 46px;
    font-weight:400;
    border-radius:15px;
}
.search-wrap .search-ico{
    position:absolute;
    left:18px;
    right:auto;
    top:50%;
    transform:translateY(-50%);
    color:#8a92a6;
    pointer-events:none;
    font-size:16px;
    line-height:1;
    display:flex;
    align-items:center;
}

.view-tog{
    order:0;
    margin-left:auto;
    display:flex;
    background:#eef1f8;
    border:1px solid #e1e6f4;
    border-radius:60px;
    padding:4px;
    gap:2px;
}
.vbtn{
    padding:10px 22px;
    border:none;
    background:transparent;
    border-radius:60px;
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    color:#606880;
    transition:all .2s;
    display:flex;
    align-items:center;
    gap:.4rem;
}
.vbtn.active{background:#18539c;color:#fff;font-weight:600;box-shadow:none;}

.results-bar {
    padding:16px 0 0;
    font-size:13px;
    color:#656971;
    text-align:center;
}
/* ── Legend ── */
.legend{padding:22px 0 4px;display:flex;gap:10px 20px;flex-wrap:wrap;align-items:center;justify-content:flex-start;}
.legend-lbl{font-size:15px;font-weight:700;text-transform:none;letter-spacing:0;color:#0a2540;margin-right:8px;}
.ldot {
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:13px;
    color:#364969;
    cursor:default;
}
.ldot-c{width:9px;height:9px;border-radius:50%;flex-shrink:0;}

/* ── Main ── */
.main{padding:0 1.75rem 2.5rem;max-width:1240px;margin:0 auto;}
.searchrow .main{padding-bottom:1.25rem;}
.sec-hdr{display:block;margin:8px 0 20px;}
.sec-title{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:clamp(22px,2.4vw,31px);
    font-weight:700;
    color:#0a2540;
    line-height:1.25;
}
.sec-sub {
    font-size:14px;
    color:#656971;
    margin-top:6px;
}

/* ── Calendar Grid ── */
.cal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.month-card{background:#fff;border-radius:16px;border:1px solid #e1e6f4;overflow:hidden;transition:box-shadow .2s;box-shadow:0 1px 3px rgba(15,23,42,.04);}
.month-card:hover{box-shadow:0 8px 24px rgba(15,23,42,.08);transform:none;}
.mc-head{background:#fff;color:#0a2540;padding:16px 18px;border-bottom:1px solid #eef0f5;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.mc-month{font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:700;color:#0a2540;line-height:1.2;}
.mc-year{font-size:12px;font-weight:600;color:#8a92a6;margin-top:1px;}
.mc-count{background:#ecf0fe;color:#113e78;padding:4px 12px;border-radius:14px;font-size:12px;font-weight:600;white-space:nowrap;}
.mc-body{padding:4px 16px 12px;}
.cc{
    display:grid;
    grid-template-columns:auto 1fr auto;
    column-gap:10px;
    align-items:center;
    padding:12px 4px;
    margin:0;
    border-bottom:1px solid #eef0f5;
    border-left:0 !important;
    border-radius:0;
    cursor:pointer;
    transition:background .15s;
}
.mc-body .cc:last-child{border-bottom:0;}
.mc-body .cc:first-child{
    background:#fffbf7;
    margin:0 -16px;
    padding:12px 20px;
    border-bottom:1px solid #fff1e3;
}
.cc:hover{background:#f7f8fc;}
.mc-body .cc:first-child:hover{background:#fff6ee;}
.cc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin:0;align-self:center;}
.cc-info{min-width:0;}
.cc-name{font-size:14px;font-weight:600;color:#0a2540;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cc-cat{font-size:13px;color:#656971;margin-top:2px;}
.cc-due{
    background:#fdf2fa;
    color:#c11574;
    font-size:12px;
    font-weight:600;
    padding:4px 12px;
    border-radius:9px;
    white-space:nowrap;
    align-self:center;
}
.mc-empty{text-align:center;padding:1.25rem;font-size:13px;color:#656971;font-style:italic;}

/* ── Table View ── */
.tbl-wrap{background:#fff;border-radius:12px;border:1px solid var(--border);overflow:auto;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.ctbl{width:100%;border-collapse:collapse;}
.ctbl th{background:var(--primary);color:#fff;padding:.8rem 1rem;text-align:left;font-size:1.2rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;cursor:pointer;user-select:none;transition:background .15s;}
.ctbl th:hover{background:#1e4d8c;}
.ctbl th .sort-ico{opacity:.5;margin-left:.3rem;}
.ctbl td{padding:.8rem 1rem;font-size:1.3rem;border-bottom:1px solid var(--border);vertical-align:middle;}
.ctbl tr:last-child td{border-bottom:none;}
.ctbl tr:hover td{background:#f8fafc;}
.month-sep td{background:var(--bg)!important;font-weight:700;color:var(--primary);font-size:1.4rem;text-transform:uppercase;letter-spacing:.6px;padding:.45rem 1rem;}
.cbadge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:99px;font-size:1.2rem;font-weight:500;white-space:nowrap;}
.fbadge{display:inline-block;padding:.18rem .55rem;border-radius:4px;font-size:1.2rem;font-weight:500;border:1.5px solid;white-space:nowrap;}
.fb-monthly{border-color:var(--c-pf);color:var(--c-pf);}
.fb-quarterly{border-color:var(--c-tds);color:var(--c-tds);}
.fb-halfyearly{border-color:var(--c-pt);color:var(--c-pt);}
.fb-annual{border-color:var(--c-esi);color:var(--c-esi);}
.fb-onetime{border-color:var(--muted);color:var(--muted);}
.due-cell{font-weight:700;color:var(--accent);}
.penalty-cell{font-size:.75rem;color:var(--danger);max-width:180px;}

/* ── Detail panel, based on Figma resource card 5113:66734 ── */
.dpanel{position:fixed;right:24px;top:50%;bottom:auto;width:min(630px,calc(100vw - 48px));max-height:calc(100vh - 48px);padding:24px;background:#fff;border:1px solid #d0d5dd;border-radius:12px;z-index:180;transform:translate(calc(100% + 32px),-50%);transition:transform .28s cubic-bezier(.4,0,.2,1);overflow-y:auto;box-shadow:0 18px 42px rgba(16,24,40,.16);}
.dpanel.open{transform:translateX(0);}
.dpanel.open{transform:translate(0,-50%);}
.dp-hdr{padding:0 0 15px;border-bottom:1px solid #d9d9d9;position:relative;background:#fff;z-index:1;}
.dp-close{position:absolute;top:-10px;right:-10px;display:grid;place-items:center;width:40px;height:40px;padding:0;background:#fff;border:1px solid #d0d5dd;border-radius:8px;color:#344054;cursor:pointer;font-size:24px;line-height:1;}
.dp-close:hover{background:#f9fafb;}.dp-close:focus-visible{outline:3px solid rgba(122,90,248,.3);outline-offset:2px;}
.dp-cat-bar{display:inline-flex;align-items:center;gap:6px;margin:0 48px 8px 0;padding:4px 12px 4px 10px;background:#f4f3ff!important;border-radius:16px!important;color:#5925dc!important;font-family:Inter,sans-serif;font-size:14px;font-weight:500;letter-spacing:0;line-height:20px;text-transform:none;}
.dp-cat-bar::before{width:8px;height:8px;background:#7a5af8;border-radius:50%;content:"";}
.dp-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:22px;font-weight:600;color:#343a40;line-height:30px;clear:both;}
.dp-body{display:flex;flex-direction:column;gap:15px;padding:15px 0 0;}
.dp-row{display:flex;gap:15px;margin:0;align-items:flex-start;}
.dp-lbl{width:100px;min-width:100px;padding:0;color:#656971;font-family:Inter,sans-serif;font-size:16px;font-weight:400;letter-spacing:0;line-height:24px;text-transform:none;}
.dp-val{flex:1;min-width:0;color:#343a40;font-family:Inter,sans-serif;font-size:16px;font-weight:500;line-height:24px;}
.dp-due{display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 10px;background:#fffaeb;border-radius:16px;color:#b54708;font-size:14px;font-weight:500;line-height:20px;}.dp-due::before{width:8px;height:8px;background:#f79009;border-radius:50%;content:"";}
.dp-alert{background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;padding:.85rem;margin-top:1rem;font-size:1.3rem;color:#9a3412;}
.dp-alert strong{display:block;margin-bottom:.25rem;}

/* ── Download Section ── */
.dl-section{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-mid) 100%);color:#fff;padding:3rem 2rem;text-align:center;margin-top:2rem;}
.dl-section h2{font-size:1.6rem;font-weight:800;margin-bottom:.5rem;}
.dl-section p{opacity:.85;max-width:460px;margin:0 auto 1.5rem;font-size:.95rem;}
.dl-features{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem;}

.dl-feat {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 1.3rem;
    margin-top: 15px;
    color: #000;
}
.btn-dl{background:var(--accent);color:#fff;border:none;padding:.9rem 2.25rem;border-radius:8px;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:.5rem;box-shadow:0 4px 14px rgba(249,115,22,.4);}
.btn-dl:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 6px 20px rgba(249,115,22,.5);}

/* ── Modal ── */
.modal-ov{overflow:auto; display:none;position:fixed;inset:0;background:rgba(15,45,94,.65);z-index:999;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(3px);}
.modal-ov.open{display:flex;}
.modal2{background:#FBF7EB;border-radius:16px;width:100%;max-width:590px;overflow:hidden;animation:modIn .25s ease;}
.searchrow {
    background: #f7f8fc;
    position: static;
    padding: 26px 0 36px;
    border-top: 1px solid #e6e9f2;
    border-bottom: 1px solid #e6e9f2;
    box-shadow: none;
    z-index: 2;
}
.searchrow > .container{max-width:1280px;}
.searchrow .legend{margin-top:2px;}
#calView, #tblView{margin-top:8px;}
#connectdiv{display:none;}
.reqwestbtn{max-width: 270px;}

@keyframes modIn{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}
.mod-hdr{background:#FBF7EB;color:#fff;padding:1.4rem 1.5rem 0px; position:relative;}
.mod-hdr h3 {
    font-size: 2.5rem;
    font-weight: 600;
    color: #0A3A7C;
    margin-top: 6px;
}

.mod-hdr p {
    font-size: 1.5rem;
    color: #000;
}
.mod-body{padding:1.4rem 1.5rem;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1.9rem; margin-bottom: 10px;}
.fg{margin-bottom:.9rem;}
.fg label {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: .35rem;
}
.fg input, .fg select {
    width: 100%;
    padding: .58rem .85rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text);
    transition: border .2s, box-shadow .2s;
    height: 42px;
}
.fg input:focus,.fg select:focus{outline:none;border-color:var(--primary-light);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
.form-note{font-size:1.5rem;color:#333333;margin-bottom:1rem;}
.btn-sub {
    width: 100%;
    background: #0A3A7C;
    color: #fff;
    border: none;
    padding: 1rem;
    border-radius: 8px;
    font-size: 1.3rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}
.btn-sub:hover{background:var(--accent-hover);}
.btn-sub:disabled{opacity:.6;cursor:not-allowed;}
.btn-can {
    width: auto;
    background: transparent;
    border: none;
    color: #0f4f93;
    padding: .55rem;
    font-size: 2rem;
    cursor: pointer;
    margin-top: .5rem;
    position: absolute;
    right: 11px;
    top: 0;
}
.btn-can:hover{color:var(--text);}
.success-msg{text-align:center;padding:1.5rem 1rem;}
.success-msg .s-ico{font-size:3rem;margin-bottom:.75rem;}
.success-msg h4{font-size:1.5rem;font-weight:500;margin-bottom:.5rem;}
.success-msg p{font-size:1.3rem;color:var(--muted);margin-bottom:1.25rem;}
.btn-sdl {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #fff;
    border: none;
    padding: .75rem 1.75rem;
    border-radius: 8px;
    font-size: 1.3rem;
    font-weight: 500;
    cursor: pointer;
    background: #0a3a7c;
}
.error {
    border-color: #ff9898 !important;
}
.toast {
    position: fixed;
    right: 1.5rem;
    color: #fff;
    padding: .8rem 1.25rem;
    border-radius: 10px;
    font-size: 1.2rem;
    display: none;
    align-items: center;
    gap: .6rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
    z-index: 9999;
    top: 9px;
    font-weight: 500;
}
.toast.show{display:flex;}

.mod-hdr::before {
    content: "";
    width: 100px;
    position: absolute;
    height: 2px;
    background: #FF9D2C;
    bottom: -10px;
}
.hdr-tag{color:#fff;}

header nav .header-btn {
    display: none;
}
.talkexpert {
    white-space: nowrap;
    margin-left: 10px;
    display: flex;
    color: #ffff;
    border-radius: 50px;
    border: 2px solid #fff;
    min-width: 193px;
    padding: 5px 12px;
    font-weight: 500;
    column-gap: 5px;
}
.talkexpert:hover{color:#fff;}

header .menu-main {
    background: transparent;
}
header .navbar-block ul > li > a {
    color: #ffffff !important;
}
.brand-logo {
    filter: brightness(0) saturate(100%) invert(100%) sepia(97%) saturate(16%) hue-rotate(238deg) brightness(104%) contrast(100%);
}

header .navbar ul li .feather-home {
    color: #ff9e2c;
}
.menu li.menu-item:hover > a, header .navbar ul li a.menu-link.active {
    color: #ff9e2c !important;
}
header.darkHeader .navbar ul li a.menu-link {
    color: #333333 !important;
}
header.darkHeader .brand-logo{
filter:none;
}
header.darkHeader .talkexpert {
    border-color: #333;
    color: #333;
}
header.darkHeader .talkexpert img {
    filter: brightness(0) saturate(100%);
}
header {
    background: #0c112f;
    position: sticky;
    top: 0;
    z-index: 200;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.alert-danger{font-size:12px;}
@supports (-webkit-touch-callout: none) {
    .ctrl-bar select {
        height: 40px !important;
        min-height: 40px !important;
        font-size: 16px;
    }
}

@media(max-width:991px) {
.searchrow{top:60px;}
.hero{padding:60px 0px 70px;}
    .talkexpert {
        position: absolute;
        right: 50px;
    }
    header .burger-line {
        background: #fff;
    }
    header.darkHeader .burger-line {
        background: #333;
    }
    header .burger{top:-3px;}
    header .navbar-block ul > li > a {
        border-bottom: 1px dashed #e1e1e1;
        color: #0F4F93 !important;
    }
}
@media(max-width:960px) {
.talkexpert span {
        display: none;
    }
    .talkexpert {
        min-width: 52px;
    }
}
@media(max-width:1100px) {
  .cal-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px) {
    .hero h1{font-size:1.75rem;}
  .cal-grid{grid-template-columns:1fr;}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:14px 0;}
  .hs{padding:8px 20px;}
  .hs + .hs::before{display:none;}
  .hs:nth-child(2)::before,.hs:nth-child(4)::before{content:"";display:block;left:0;}
  .search-wrap{flex:1 1 100%;order:0;}
  .view-tog{margin-left:0;width:fit-content;order:0;}
  .ctrl-bar select,select#stateMain{flex:1 1 45%;min-width:0;}
  .dpanel{right:16px;top:auto;bottom:16px;width:calc(100vw - 32px);height:auto;max-height:calc(100vh - 32px);border:1px solid #d0d5dd;transform:translateY(calc(100% + 24px));}
  .dpanel.open{transform:translateY(0);}
}
@media(max-width:767px) {

.search-wrap input, .search-wrap, select#stateMain{width:100%;}
.searchrow, .ctrl-bar{position:inherit;}
.connect-cta{padding:20px 20px;}
.hero p{font-size:16px;}
.legend-lbl{width:100%;}
.legend{justify-content:flex-start;}
.ctrl-bar #fySelector, .select#catFilter, .ctrl-bar #freqFilter, select#monthFilter, #catFilter{width:48% !important;}



.hs-lbl, .hs-lbl{font-size:1.3rem}
.hero-stats {
    gap: 9px;
    justify-content: center;
}
.ctrl-bar{padding:.75rem 0.1rem}
}
@media(max-width:480px){
  .hero{padding:2.5rem 1rem 2rem;}
  .main{padding:1rem;}
  .hdr{padding:0 1rem;}
}
@media print{
  .hdr,.ctrl-bar,.legend,.dl-section,.dpanel,.modal-ov,.results-bar{display:none!important;}
  .main{padding:0;}
}