/* =====================================================================
   SmartGasNet – THEMES
   Upload as:  /assets/css/theme.css
   The theme is chosen from the palette button in the header and saved in
   the browser (localStorage key "pl-theme"). "Ocean Blue" = the original
   design, so nothing below changes it.
   ===================================================================== */

html[data-theme="ocean"]{--th-1:#2f86df; --th-2:#165da7; --th-3:#0c3b72; --th-soft:#e2edf9; --th-line:color-mix(in srgb,#165da7 20%,#fff)}
html[data-theme="pbg"]{--th-1:#4caf50; --th-2:#328535; --th-3:#173f1c; --th-soft:#e5f2e6; --th-line:color-mix(in srgb,#328535 20%,#fff)}
html[data-theme="indigo"]{--th-1:#6d72f3; --th-2:#4338ca; --th-3:#1e1b4b; --th-soft:#e8e8fc; --th-line:color-mix(in srgb,#4338ca 20%,#fff)}
html[data-theme="teal"]{--th-1:#14b8a6; --th-2:#0f766e; --th-3:#073b37; --th-soft:#dcf2ef; --th-line:color-mix(in srgb,#0f766e 20%,#fff)}
html[data-theme="sunset"]{--th-1:#fb923c; --th-2:#c2410c; --th-3:#5c1a04; --th-soft:#fdece0; --th-line:color-mix(in srgb,#c2410c 20%,#fff)}
html[data-theme="graphite"]{--th-1:#64748b; --th-2:#334155; --th-3:#0f172a; --th-soft:#e6e9ee; --th-line:color-mix(in srgb,#334155 20%,#fff)}
html[data-theme="red"]{--th-1:#ef4444; --th-2:#b91c1c; --th-3:#5f0f0f; --th-soft:#fde8e8; --th-line:color-mix(in srgb,#b91c1c 20%,#fff)}

/* ================= HEADER ================= */
html[data-theme]:not([data-theme="ocean"]) .main-header.pl-header{
    --hd-primary:var(--th-2) !important; --hd-line:var(--th-line) !important;
    background:
        radial-gradient(35% 160% at 100% 0%, color-mix(in srgb,var(--th-2) 16%,transparent), transparent 70%),
        linear-gradient(90deg, var(--th-soft) 0%, color-mix(in srgb,var(--th-soft) 55%,#fff) 60%, color-mix(in srgb,var(--th-soft) 40%,#fff) 100%) !important;
}
html[data-theme]:not([data-theme="ocean"]) .main-header.pl-header::before,
html[data-theme]:not([data-theme="ocean"]) nav.employee-nav.pl-inner::before{
    background:
        radial-gradient(circle at 46% -60%, rgba(255,255,255,.20) 0 70px, transparent 71px),
        radial-gradient(circle at 54% 170%, rgba(255,255,255,.12) 0 80px, transparent 81px),
        linear-gradient(115deg, var(--th-1) 0%, var(--th-2) 55%, var(--th-3) 100%) !important;
}
html[data-theme]:not([data-theme="ocean"]) .pl-header__art svg > rect:first-of-type,
html[data-theme]:not([data-theme="ocean"]) .pl-inner__art svg > rect:first-of-type{fill:var(--th-3) !important}
html[data-theme]:not([data-theme="ocean"]) .header-top-text h4,
html[data-theme]:not([data-theme="ocean"]) .pl-inner .pl-title h4{
    background:
        linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03)) padding-box,
        linear-gradient(color-mix(in srgb,var(--th-3) 70%,var(--th-2)), color-mix(in srgb,var(--th-3) 70%,var(--th-2))) padding-box,
        conic-gradient(from var(--pl-angle,0deg), rgba(255,255,255,.18) 0deg, rgba(255,255,255,.18) 200deg,
            color-mix(in srgb,var(--th-1) 50%,#fff) 250deg, #ffffff 285deg, #fdba74 310deg, rgba(255,255,255,.18) 360deg) border-box !important;
}
html[data-theme]:not([data-theme="ocean"]) .pl-avatar{
    background:linear-gradient(135deg,var(--th-1),var(--th-2)) !important;
    box-shadow:0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb,var(--th-2) 35%,#fff) !important;
}
html[data-theme]:not([data-theme="ocean"]) .pl-header .dropdown-item i, html[data-theme]:not([data-theme="ocean"]) .pl-inner .pl-dropdown li > a i{color:var(--th-2) !important}
html[data-theme]:not([data-theme="ocean"]) .pl-header .dropdown-item:hover, html[data-theme]:not([data-theme="ocean"]) .pl-inner .pl-dropdown li > a:hover{background:var(--th-soft) !important; color:var(--th-2) !important}
html[data-theme]:not([data-theme="ocean"]) .pl-header .dropdown-user .user-box, html[data-theme]:not([data-theme="ocean"]) .pl-inner .pl-dropdown__head{background:linear-gradient(135deg,#fff,var(--th-soft)) !important}
html[data-theme]:not([data-theme="ocean"]) .pl-search__results a:hover, html[data-theme]:not([data-theme="ocean"]) .pl-search__results a.is-active{background:var(--th-soft) !important; color:var(--th-2) !important}
html[data-theme]:not([data-theme="ocean"]) .pl-icon-btn:hover{background:var(--th-soft) !important; color:var(--th-2) !important}
html[data-theme]:not([data-theme="ocean"]) nav.employee-nav.pl-inner{
    --hd-primary:var(--th-2) !important; --hd-line:var(--th-line) !important;
    background:
        radial-gradient(35% 160% at 100% 0%, color-mix(in srgb,var(--th-2) 16%,transparent), transparent 70%),
        linear-gradient(90deg, var(--th-soft) 0%, color-mix(in srgb,var(--th-soft) 55%,#fff) 100%) !important;
}
html[data-theme]:not([data-theme="ocean"]) .pl-inner .pl-chip, html[data-theme]:not([data-theme="ocean"]) .pl-inner .pl-chip i{color:var(--th-2) !important}

/* ================= PAGE LOADER ================= */
html[data-theme]:not([data-theme="ocean"]) #pl-topbar span{background:linear-gradient(90deg,var(--th-2),var(--th-1) 40%,#f29312 70%,var(--th-2)) 0 0/200% 100% !important}
html[data-theme]:not([data-theme="ocean"]) #pl-loader{background:radial-gradient(60% 60% at 50% 45%, rgba(255,255,255,.9), color-mix(in srgb,var(--th-soft) 92%,transparent)) !important}
html[data-theme]:not([data-theme="ocean"]) .pl-loader__orbit{background:conic-gradient(from 0deg, transparent 0deg, var(--th-2) 220deg, var(--th-1) 300deg, #f29312 350deg, transparent 360deg) !important}
html[data-theme]:not([data-theme="ocean"]) .pl-loader__pipe i{background:linear-gradient(90deg,var(--th-1),var(--th-2)) !important}
html[data-theme]:not([data-theme="ocean"]) .pl-loader__text{color:var(--th-2) !important}

/* ================= SIDEBAR ================= */
html[data-theme]:not([data-theme="ocean"]) .sidebar.pl-sidebar{
    --sb-primary:var(--th-2) !important; --sb-primary-d:var(--th-3) !important; --sb-primary-l:var(--th-1) !important;
    --sb-line:var(--th-line) !important; --c:var(--th-2) !important;
    background:
        radial-gradient(80% 25% at 100% 0%, color-mix(in srgb,var(--th-2) 14%,transparent), transparent 70%),
        radial-gradient(80% 30% at 0% 100%, color-mix(in srgb,var(--th-2) 10%,transparent), transparent 70%),
        linear-gradient(180deg,color-mix(in srgb,var(--th-soft) 50%,#fff) 0%,#ffffff 40%,color-mix(in srgb,var(--th-soft) 45%,#fff) 100%) !important;
}
html[data-theme]:not([data-theme="ocean"]) .sidebar.pl-sidebar .panel-heading.pl-ga{background:linear-gradient(180deg,color-mix(in srgb,var(--th-soft) 50%,#fff) 85%,transparent) !important}
html[data-theme]:not([data-theme="ocean"]) .sidebar.pl-sidebar .pl-ga-card{
    background:
        radial-gradient(circle at 92% -20%, rgba(255,255,255,.26) 0 30%, transparent 31%),
        radial-gradient(circle at 110% 120%, rgba(255,255,255,.14) 0 38%, transparent 39%),
        linear-gradient(135deg,var(--th-1) 0%,var(--th-2) 55%,var(--th-3) 100%) !important;
    box-shadow:0 14px 28px -16px var(--th-3) !important;
}

/* ================= DASHBOARD ================= */
html[data-theme]:not([data-theme="ocean"]) .dashboard_tabss, html[data-theme]:not([data-theme="ocean"]) .container-fluid.container{
    --db-primary:var(--th-2) !important; --db-primary-d:var(--th-3) !important; --db-primary-l:var(--th-1) !important;
}
html[data-theme]:not([data-theme="ocean"]) .pl-tab-ink{
    background:linear-gradient(135deg,var(--th-1) 0%,var(--th-2) 60%,var(--th-3) 100%) !important;
    box-shadow:0 10px 20px -10px var(--th-2), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
html[data-theme]:not([data-theme="ocean"]) .dashboard_tabss .nav-tabs .nav-link:not(.active)::after{background:var(--th-2) !important}
html[data-theme]:not([data-theme="ocean"]) .dashboard_tabss .nav-tabs .nav-link:not(.active)::before{background:var(--th-soft) !important}
html[data-theme]:not([data-theme="ocean"]) .dashboard_tabss .nav-tabs .nav-link:hover:not(.active){color:var(--th-2) !important; background:color-mix(in srgb,var(--th-soft) 60%,#fff) !important}
html[data-theme]:not([data-theme="ocean"]) .dashboard_tabss .nav-tabs:not(.pl-has-ink) .nav-link.active{background:linear-gradient(135deg,var(--th-1),var(--th-2)) !important}

/* ================= COMMON (whole project) ================= */
html[data-theme]:not([data-theme="ocean"]) .btn-primary{background-color:var(--th-2) !important; border-color:var(--th-2) !important}
html[data-theme]:not([data-theme="ocean"]) .btn-primary:hover, html[data-theme]:not([data-theme="ocean"]) .btn-primary:focus{background-color:var(--th-3) !important; border-color:var(--th-3) !important}
html[data-theme]:not([data-theme="ocean"]) .page-item.active .page-link{background-color:var(--th-2) !important; border-color:var(--th-2) !important}
html[data-theme]:not([data-theme="ocean"]) .page-link{color:var(--th-2)}
html[data-theme]:not([data-theme="ocean"]) .form-control:focus{border-color:color-mix(in srgb,var(--th-2) 55%,#fff) !important; box-shadow:0 0 0 3px color-mix(in srgb,var(--th-2) 15%,transparent) !important}
/* blue table headers used across the reports */
html[data-theme]:not([data-theme="ocean"]) .table > thead > tr > th, html[data-theme]:not([data-theme="ocean"]) #login_data thead th{
    background:linear-gradient(180deg,var(--th-1),var(--th-2)) !important; color:#fff !important;
    border-color:color-mix(in srgb,#fff 15%,transparent) !important;
}

/* ================= THEME PICKER (header) ================= */
.pl-theme{position:relative}
.pl-theme-pop{
    position:absolute; top:calc(100% + 10px); right:-8px; z-index:2000; width:270px;
    padding:12px; border-radius:16px; background:#fff;
    border:1px solid #dbe6f3; box-shadow:0 22px 44px -20px rgba(11,43,82,.5);
    opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s, transform .18s, visibility .18s; line-height:normal;
}
.pl-theme.is-open .pl-theme-pop{opacity:1; visibility:visible; transform:none}
.pl-theme-pop__title{display:flex; align-items:center; justify-content:space-between; margin:2px 4px 10px; font-weight:800; font-size:13.5px; color:#13244a}
.pl-theme-pop__title button{border:0; background:none; padding:2px 4px; font-weight:700; font-size:12px; color:#6b7a93; cursor:pointer; border-radius:6px}
.pl-theme-pop__title button:hover{color:#13244a; background:#f1f5f9}
.pl-theme-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.pl-theme-opt{
    display:flex; flex-direction:column; align-items:center; gap:6px; padding:9px 4px 8px;
    border:1.5px solid #e6edf6; border-radius:12px; background:#fff; cursor:pointer;
    font-weight:700; font-size:11.5px; color:#334155; transition:border-color .15s, background .15s, transform .15s;
}
.pl-theme-opt:hover{background:#f8fafc; transform:translateY(-1px)}
.pl-theme-opt:focus-visible{outline:2px solid #165da7; outline-offset:2px}
.pl-theme-opt i{
    position:relative; width:34px; height:34px; border-radius:50%;
    background:linear-gradient(135deg,var(--a),var(--b) 55%,var(--c));
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.6), 0 4px 10px -4px var(--b);
}
.pl-theme-opt i::after{ /* tick for the active theme */
    content:""; position:absolute; inset:0; border-radius:50%; opacity:0; transition:opacity .15s;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat;
}
.pl-theme-opt.is-active{border-color:var(--b); background:color-mix(in srgb,var(--b) 6%,#fff)}
.pl-theme-opt.is-active i::after{opacity:1}
.pl-theme-note{margin:10px 4px 0; font-weight:600; font-size:11.5px; line-height:1.4; color:#8a9ab0}
@media (max-width:576px){ .pl-theme-pop{right:-60px; width:250px} }
@media (prefers-reduced-motion:reduce){ .pl-theme-pop{transition:none} }

/* ================= THEME SETTING inside the profile dropdown ================= */
.pl-theme-menu{padding:8px 10px 6px; min-width:236px}
.pl-theme-menu__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:9px}
.pl-theme-menu__head span{display:inline-flex; align-items:center; gap:7px; font-weight:800; font-size:13px; color:#13244a}
.pl-theme-menu__head span svg{color:var(--th-2,#165da7)}
.pl-theme-current{font-weight:700; font-size:11.5px; color:#6b7a93}
.pl-theme-swatches{display:flex; flex-wrap:wrap; gap:7px}
.pl-theme-opt.pl-theme-opt--sm{
    width:28px; height:28px; padding:0; border:0; border-radius:50%; background:none; gap:0; transform:none;
    display:grid; place-items:center;
}
.pl-theme-opt.pl-theme-opt--sm i{width:26px; height:26px; transition:transform .15s, box-shadow .15s}
.pl-theme-opt.pl-theme-opt--sm:hover{background:none; transform:none}
.pl-theme-opt.pl-theme-opt--sm:hover i{transform:scale(1.1)}
.pl-theme-opt.pl-theme-opt--sm.is-active{background:none}
.pl-theme-opt.pl-theme-opt--sm.is-active i{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--b)}
.pl-theme-opt.pl-theme-opt--sm i::after{background-size:13px}
.pl-header .dropdown-user, .pl-inner .pl-dropdown{min-width:260px !important}

/* =====================================================================
   LOGIN · FORGOT PASSWORD · RESET PASSWORD
   These pages read the same saved theme (same browser), so the colours
   chosen inside the app also show here.
   ===================================================================== */
/* --- login --- */
html[data-theme]:not([data-theme="ocean"]){
    --lg-primary:var(--th-2); --lg-primary-d:var(--th-3); --lg-primary-l:var(--th-1); --lg-navy:var(--th-3); --lg-line:var(--th-line);
    --fp-primary:var(--th-2); --fp-primary-d:var(--th-3); --fp-primary-l:var(--th-1); --fp-navy:var(--th-3); --fp-line:var(--th-line);
    --rp-primary:var(--th-2); --rp-primary-d:var(--th-3); --rp-primary-l:var(--th-1); --rp-navy:var(--th-3); --rp-line:var(--th-line);
}
html[data-theme]:not([data-theme="ocean"]) .lg-brand,
html[data-theme]:not([data-theme="ocean"]) .fp-side,
html[data-theme]:not([data-theme="ocean"]) .rp-side{
    background:
        radial-gradient(circle at 90% 6%, rgba(255,255,255,.12) 0 70px, transparent 71px),
        radial-gradient(circle at 90% 6%, rgba(255,255,255,.05) 0 130px, transparent 131px),
        linear-gradient(160deg, var(--th-1) 0%, var(--th-2) 55%, var(--th-3) 100%) !important;
}
html[data-theme]:not([data-theme="ocean"]) .lg-legend{background:color-mix(in srgb,var(--th-3) 80%,#000) !important}
html[data-theme]:not([data-theme="ocean"]) #lgGround stop:first-child{stop-color:var(--th-3)}
html[data-theme]:not([data-theme="ocean"]) #lgGround stop:last-child{stop-color:color-mix(in srgb,var(--th-3) 70%,#000)}
html[data-theme]:not([data-theme="ocean"]) .lg-scene [fill="#165da7"]{fill:var(--th-2)}
html[data-theme]:not([data-theme="ocean"]) .lg-scene [stroke="#165da7"]{stroke:var(--th-2)}
html[data-theme]:not([data-theme="ocean"]) .lg-scene [fill="#0b2b52"]{fill:var(--th-3)}

html[data-theme]:not([data-theme="ocean"]) .lg-form-side{
    background:
        radial-gradient(55% 45% at 50% 48%, rgba(255,255,255,.95), transparent 75%),
        radial-gradient(60% 40% at 100% 0%, color-mix(in srgb,var(--th-2) 14%,transparent), transparent 70%),
        radial-gradient(50% 35% at 0% 100%, rgba(242,147,18,.10), transparent 70%),
        linear-gradient(180deg, var(--th-soft), color-mix(in srgb,var(--th-soft) 40%,#fff)) !important;
}
html[data-theme]:not([data-theme="ocean"]) .lg-form-side::before,
html[data-theme]:not([data-theme="ocean"]) body.hold-transition::before,
html[data-theme]:not([data-theme="ocean"]) .rp-page::before{background:radial-gradient(color-mix(in srgb,var(--th-2) 18%,transparent) 1px, transparent 1.5px) 0 0/22px 22px !important}
html[data-theme]:not([data-theme="ocean"]) .lg-blob--a{background:color-mix(in srgb,var(--th-1) 30%,transparent) !important}
html[data-theme]:not([data-theme="ocean"]) .lg-watermark{background:var(--th-2) !important}
html[data-theme]:not([data-theme="ocean"]) .lg-card{
    background:
        radial-gradient(120% 60% at 100% 0%, color-mix(in srgb,var(--th-2) 6%,transparent), transparent 60%) padding-box,
        linear-gradient(#fff,#fff) padding-box,
        linear-gradient(140deg, var(--th-1) 0%, var(--th-2) 30%, var(--th-line) 55%, var(--th-line) 70%, #f29312 100%) border-box !important;
}

/* inputs on all three pages */
html[data-theme]:not([data-theme="ocean"]) .lg-input > svg, html[data-theme]:not([data-theme="ocean"]) .fp-input > svg, html[data-theme]:not([data-theme="ocean"]) .rp-input > svg{background:color-mix(in srgb,var(--th-2) 10%,#fff) !important; color:var(--th-2) !important}
html[data-theme]:not([data-theme="ocean"]) .lg-input:focus-within > svg, html[data-theme]:not([data-theme="ocean"]) .fp-input:focus-within > svg, html[data-theme]:not([data-theme="ocean"]) .rp-input:focus-within > svg{background:linear-gradient(135deg,var(--th-1),var(--th-2)) !important; color:#fff !important}
html[data-theme]:not([data-theme="ocean"]) .lg-input .form-control:focus, html[data-theme]:not([data-theme="ocean"]) .fp-main .form-control:focus, html[data-theme]:not([data-theme="ocean"]) .rp-input .form-control:focus{
    border-color:var(--th-1) !important; box-shadow:0 0 0 4px color-mix(in srgb,var(--th-2) 14%,transparent) !important;
}
html[data-theme]:not([data-theme="ocean"]) .lg-eye:hover, html[data-theme]:not([data-theme="ocean"]) .rp-eye:hover{background:var(--th-soft); color:var(--th-2)}
html[data-theme]:not([data-theme="ocean"]) #login_submit.lg-btn, html[data-theme]:not([data-theme="ocean"]) #login_submit.rp-btn, html[data-theme]:not([data-theme="ocean"]) .fp-main .sign-btn .btn{box-shadow:0 14px 26px -14px var(--th-2) !important}

/* page backgrounds of forgot / reset */
html[data-theme]:not([data-theme="ocean"]) body.hold-transition:has(.fp-page), html[data-theme]:not([data-theme="ocean"]) body:has(.rp-page){
    background:
        radial-gradient(45% 40% at 100% 0%, color-mix(in srgb,var(--th-1) 24%,transparent), transparent 70%),
        radial-gradient(40% 35% at 0% 100%, rgba(242,147,18,.14), transparent 70%),
        linear-gradient(180deg, var(--th-soft), color-mix(in srgb,var(--th-soft) 40%,#fff)) !important;
}
html[data-theme]:not([data-theme="ocean"]) .fp-steps li b{background:color-mix(in srgb,var(--th-2) 70%,#000) !important}
html[data-theme]:not([data-theme="ocean"]) .fp-steps li.is-active b{background:#f29312 !important}
html[data-theme]:not([data-theme="ocean"]) .fp-steps li.is-done b{background:#22c55e !important}

.nav-toggles {
    background: var(--th-2) !important;
}
.summry-head1.header2 {
    background:var(--th-2) !important;
}
footer.footer {
    background: var(--th-2) !important;
}
.dash_header {
    background: linear-gradient(180deg, var(--th-2)) !important;
}

body .dash_header:before{
linear-gradient(180deg,var(--th-1),var(--th-2)) !important
}
.head {
    background: var(--th-2) !important;
}
.tabs-container .tab.active {
    border-color: var(--th-2) !important;
    background: var(--th-2) !important;
}
.bootstrap5 button.btn.btn-secondary.dropdown-toggle {
    background: var(--th-1) !important;
    border-color: var(--th-1) !important;
}
.tabs-container .tab:hover{
 background: var(--th-1) !important;
}
.summry-head{
background: var(--th-2) !important;
}
.btnlink a {
    background: rgb(255 255 255 / 24%) !important;
    border: none !important;
}
.btnlink a:hover{color:var(--th-2) !important;background: #fff !important}
.list-group-item.active {
    background: var(--th-1) !important;
}
.sidebar.pl-sidebar .sidebar_menu li > .active1.topScroll{
color:var(--th-2) !important;
}
.spread_sect .nav.nav-tabs {
    background: var(--th-1) !important;
}
.spread_sect .nav-tabs .nav-link.active {
    background: #fff !important;
    color: var(--th-2) !important;
}
.panel {
    border-radius: 20px;
    overflow: hidden;
}
/* ---------- PAGE HEADING (.headertitle) – plain, full width, follows --th-1/2/3 ---------- */
.headertitle{
    --hd:var(--th-2, #165da7);
    --hd-d:var(--th-3, color-mix(in srgb, var(--hd) 75%, #000));
    --hd-l:var(--th-1, color-mix(in srgb, var(--hd) 70%, #fff));
    display:flex !important; align-items:center;
    width:100% !important; max-width:100% !important; flex:1 1 100% !important;
    box-sizing:border-box; float:none !important;
    margin:0 0 12px !important; padding:0 !important;
    text-align:left !important;
    background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
}
.headertitle h2{
    display:flex; align-items:center; gap:10px; width:100%;
    margin:0 !important; padding:0 !important;
    font:800 18px/1.2 'Manrope','Segoe UI',sans-serif !important;
    color:var(--hd-d) !important; letter-spacing:-.1px;
    background:none !important; border:0 !important;
}
/* icon tile */
.headertitle h2::before{
    content:""; flex:0 0 32px; width:32px; height:32px; border-radius:10px;
    background:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m12%203%209%205-9%205-9-5%209-5Z'/%3E%3Cpath%20d='m3%2013%209%205%209-5'/%3E%3C/svg%3E") center/16px no-repeat,
        linear-gradient(135deg, var(--hd-l), var(--hd) 60%, var(--hd-d));
    box-shadow:0 8px 14px -8px var(--hd);
}
/* fading line after the title */
.headertitle h2::after{
    content:""; flex:1; height:2px; margin-left:4px; border-radius:2px;
    background:linear-gradient(90deg, color-mix(in srgb, var(--hd) 35%, transparent), transparent);
}

@media (max-width:767px){
    .headertitle h2{font-size:16px !important; gap:8px}
    .headertitle h2::before{flex-basis:28px; width:28px; height:28px; border-radius:9px; background-size:14px, auto}
}