/* ===================================================== WQStyle Override: The following legacy master page styles are disabled because WQStyle.Ajax now provides the agency look and feel via the wq-style attribute on . ===================================================== */ /* WebForms requires

to wrap all server controls including header/footer. Layout representation: - Top: 0.4em ebb blue - Header: 0.4em ebb blue left & right (thin frame via padding) - Main/Footer: wider ebb blue gutters (minmax(1em,3em)) left & right - Bottom: ebb blue fills remaining viewport below footer */ #formMain { display: grid; grid-template-columns: 1em 1fr 1em; grid-template-rows: auto auto auto 1fr; grid-template-areas: "header header header" ". main ." ". footer ." ". . ."; min-height: 100vh; overflow-x: clip; /* clip without creating a scroll/stacking context so dropdowns are not trapped */ background-color: var(--ecy-color-primary-ebbblue, #44688f); /* Span entire WQStyle body grid */ grid-column: 1 / -1; grid-row: 1 / -1; } body { background-color: var(--ecy-color-primary-ebbblue, #44688f); /* Override WQStyle body grid — make it a simple pass-through so #formMain (the only child) fills the entire viewport. The real 3-column grid lives on #formMain instead. */ display: block !important; grid-template-columns: unset !important; grid-template-areas: unset !important; margin: 0; padding: 0; } /* Header spans all columns (full-bleed). Padding creates the thin 0.4em ebb blue frame on top, left, and right. */ #formMain > header { grid-area: header; background-color: var(--ecy-color-primary-ebbblue, #44688f); font-family: var(--wq-font-primary, inherit); box-sizing: border-box; padding: 0.4em 0.4em 0; } /* Match WQStyle: main occupies center column only */ #formMain > main { grid-area: main; background-color: var(--wq-color-body, #fff); width: 100%; min-width: 0; overflow: visible; padding: 1em 2em; box-sizing: border-box; } /* Match WQStyle: footer occupies center column only */ #formMain > footer { grid-area: footer; background-color: var(--wq-color-footer, var(--ecy-color-primary-50-galeblue, #80a8cd)); width: 100%; min-height: 3em; padding-left: 2.5em; color: #000; box-sizing: border-box; } /* ASP.NET injects hidden divs (ViewState etc.) as direct form children. Collapse them so they don't create visible grid cells. */ #formMain > div { display: none; } #formMain > script { display: none; } /* Override WQStyle .banner 3-column grid - Paris only has 2 children (logo + title) */ header .banner { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1em; padding: 0.5em 1em; background-color: white; min-width: 0; box-sizing: border-box; margin: 0; } header .banner h1 { text-align: center; white-space: normal; min-width: 0; overflow-wrap: break-word; } /* body { margin: 0%; font-size: 100%; font-family: Verdana, Helvetica, Arial, sans-serif; color: #333; } html{ position:relative; min-height:100%; } .masterfooter{ position:absolute; left:0; bottom:0; width:100%; overflow:hidden; } */ /* * Master page styles - DISABLED (WQStyle now handles layout) */ /* .banner { border-collapse: collapse; border: none; background-color: #45759A; height: 57px; width: 100%; } .bannerLogoArea { border: none; margin: 0%; padding: 0%; width: 257px; } */ .bannerEcologyLink { border: none; text-decoration: none; } /* .bannerEcologyLogo { border: none; margin: 0%; padding: 0%; width: 257px; height: 57px; display: block; } .bannerTitleArea { border: none; margin: 0%; padding: 0%; white-space: nowrap; background-image: url(../../Images/sa_banner_right_a.jpg); background-size: 244px 57px; background-position: right center; background-repeat: no-repeat; } */ .bannerAppTitle { text-align: center; color: var(--ecy-color-primary-jettygray, #333); white-space: normal; } .environment { background-color: #f0f0f0; padding: 0.2em 1em; min-height: 1.2em; margin: 0; box-sizing: border-box; } .bannerAppEnvironment { text-align: left; font-size:70%; color: #000; font-weight: bold; } /* .menu { vertical-align: middle; background-color: #234f78; margin: 0%; padding: 5px 0; text-align: left; white-space: nowrap; width: 100%; } .menu li { display: inline; font-size: 80%; margin: 0px 1%; white-space: nowrap; } .menu li a { color: white; text-decoration: none; } .menu li a:hover { text-decoration: underline; } */ /* Nav styling - WQStyle gale blue menu */ nav.menu { background-color: var(--ecy-color-primary-50-galeblue, #80a8cd); padding: 5px 0; margin: 0; } nav.menu ul { padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; } nav.menu ul li { display: inline-block; padding: 0 1em; height: 2.5em; line-height: 2.5em; position: relative; } nav.menu ul li:hover { background: var(--ecy-color-primary-75-galeblue, #9fbdd9); } nav.menu ul li a { color: var(--ecy-color-text-on-galeblue-jettygray, #333); text-decoration: underline; } nav.menu ul li a:hover { text-decoration: none; } /* Submenus: hidden by default, shown via jQuery mouseenter events or CSS hover */ nav.menu > ul > li > ul { display: none; position: absolute; top: 2.5em; left: 0; z-index: 999; background-color: white; border: 1px solid #ccc; padding: 0; margin: 0; list-style: none; min-width: 200px; } /* Hide any open submenus when hovering over items without submenus (jQuery handles show, but doesn't hide when moving to non-submenu items) */ nav.menu > ul > li:not(:has(> ul)):hover ~ li > ul { display: none !important; } nav.menu ul li ul li { display: block; height: auto; line-height: 1.6; padding: 0.4em 1em; white-space: nowrap; } nav.menu ul li ul li a { color: #000; text-decoration: none; font-weight: normal; } nav.menu ul li ul li:hover, nav.menu ul li ul li:focus-within { background: var(--ecy-color-primary-25-galeblue, #dde7f0); } /* .mainContent { padding: 10px 0.5%; position: relative; z-index: 1; } */ /* .footer { text-align: left; padding: 10px 0; width: 100%; white-space: nowrap; color: #06C; font-size: 70%; margin: 0%; float: left; } .footer li { display: inline; } .footer li a { color: #666; text-decoration: none; padding: 10px 1%; } .footer li a:hover { color: #06C; } .footer li:after { color: #CCC; font-size: 80%; content: "|"; } .version { text-align: left; width: 100%; white-space: nowrap; color: #6a6a6a; font-size: 75%; float: left; } .copyright a { text-align: left; width: 100%; white-space: nowrap; color: #6a6a6a; font-size: 75%; text-decoration: none; } */ /* Footer helpers */ .foot-dividers { padding: 0 0.3em; color: #555; } footer .foot { color: #0000ee; text-decoration: underline; padding: 0px 3px; white-space: nowrap; } footer .foot:hover, footer .foot:focus { color: #000; text-decoration: underline; } .subfooter { font-size: 0.85rem; margin-top: 0.5em; } .subfoot-text { color: var(--ecy-color-secondary-evergreen, #135756); } .subfoot { color: var(--ecy-color-secondary-evergreen, #135756); text-decoration: underline; } .subfoot:hover { color: #000; text-decoration: underline; } /* WCAG 2.2 target-size: ensure checkboxes and radio buttons meet 24x24px minimum */ input[type="checkbox"], input[type="radio"] { min-width: 24px; min-height: 24px; } /* Match Portal link styling: simple blue underlined links in body and footer */ main a { color: #0000ee; text-decoration: underline; } main a:visited { color: #551a8b; } main a:hover { color: #0000ee; text-decoration: underline; } /* Footer links: match main content link colors (blue/purple) */ footer a { color: #0000ee; text-decoration: underline; white-space: nowrap; padding: 0px 3px; } footer a:visited { color: #551a8b; } footer a:hover, footer a:focus { color: #000; text-decoration: underline; } .contentArea { font-size: .8em; color: #000000; } /*master page styles - end*/ /* ===================================================== Shared Portal-style application boxes (matches WQWebPortal) ===================================================== */ .applicationbox { border: 1px solid #ccc; border-radius: 4px; margin-bottom: 1em; background-color: var(--ecy-color-primary-25-galeblue, #dde7f0); } .applicationbox h2.frontpage { margin: 0; padding: 0.6em 1em; background-color: var(--ecy-color-primary-25-galeblue, #dde7f0); font-size: 2rem; font-weight: 700; } .applicationbox .innerbox { padding: 1em; margin: 0 0.6em 0.6em; background-color: #fff; border-radius: 3px; } .applicationbox .innerbox p { margin: 0 0 0.8em; } ul.applicationlist { list-style: none; padding: 0; margin: 0; } ul.applicationlist li { padding: 0.4em 0; } /* Remove any border on checkbox containers inside application boxes */ .applicationbox .innerbox span[class] input[type="checkbox"] { border: none; box-shadow: none; } .applicationbox .innerbox span { border: none !important; } /* WQStyle applies outline/height to all inputs including checkboxes - undo that */ input[type="checkbox"], input[type="radio"] { outline: none !important; height: auto !important; width: auto !important; padding: 0 !important; } /* WQStyle applies outline/height to all selects via :is([wq-style]) :is(select) - override for pager/grid dropdowns that shouldn't have the form input treatment */ body[wq-style] select[size], body[wq-style] .GridView select, body[wq-style] td select, body[wq-style] .RadGrid select, body[wq-style] .rgPager select, :is([wq-style], [wq-style-controls]) :is(td select, .rgPager select, .RadGrid select) { outline: none !important; border: none !important; height: auto !important; padding: 2px 4px !important; box-shadow: none !important; outline-offset: 0 !important; } :is([wq-style], [wq-style-controls]) :is(td select, .rgPager select, .RadGrid select):hover { outline: none !important; } /* Remove WQStyle border/outline from export data image buttons */ :is([wq-style], [wq-style-controls]) :is(input[type="image"]) { outline: none !important; border: none !important; box-shadow: none !important; } /* Remove WQStyle border from RadComboBox action button in pager only */ .rgPager .rcbActionButton, .rgPager .rcbArrowCell, :is([wq-style], [wq-style-controls]) :is(.rgPager .rcbActionButton, .rgPager .rcbArrowCell) { outline: none !important; border: none !important; box-shadow: none !important; } /* Ensure Report Details RadComboBox matches the Filter Search Result dropdowns */ .radcomboboxpermitreport .RadComboBox, .radfilterpermitreport .RadComboBox { display: inline-block !important; } /* Prevent WQStyle hover outlines on RadComboBox internals */ :is([wq-style], [wq-style-controls]) .radcomboboxpermitreport :is(input, a, .rcbArrowCell, .rcbActionButton), :is([wq-style], [wq-style-controls]) .radfilterpermitreport :is(input, a, .rcbArrowCell, .rcbActionButton), :is([wq-style], [wq-style-controls]) .radcomboboxpermitreport :is(input, a, .rcbArrowCell, .rcbActionButton):hover, :is([wq-style], [wq-style-controls]) .radfilterpermitreport :is(input, a, .rcbArrowCell, .rcbActionButton):hover { outline: none !important; box-shadow: none !important; } /* Reset WQStyle forced input height inside RadComboBox */ :is([wq-style], [wq-style-controls]) .radcomboboxpermitreport input.rcbInput, :is([wq-style], [wq-style-controls]) .radfilterpermitreport input.rcbInput { height: auto !important; border: none !important; } /* Download Checked button in grid header */ .btn-download-checked { display: inline-block !important; background-color: #fff; color: #44688f !important; font-weight: 700; font-size: 0.75em; padding: 0.3em 0.7em; border: 2px solid #44688f; border-radius: 4px; text-decoration: none !important; cursor: pointer; transition: background-color 0.2s, color 0.2s; } .btn-download-checked:hover { background-color: #44688f; color: #fff !important; text-decoration: none !important; } /* Global loading overlay */ /* Loading overlay styles moved inline to WebSite.Master for reliability */ /* Shared button styles (Portal-matching) */ .wq-btn { display: inline-block; padding: 0.5em 1.5em; font-size: 1rem; font-weight: 600; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; text-align: center; transition: background-color 0.2s; } .wq-btn-primary { background-color: var(--ecy-color-primary-ebbblue, #44688f); color: #fff; } .wq-btn-primary:hover { background-color: #365a7a; } .wq-btn-secondary { background-color: #e0e0e0; color: #333; } .wq-btn-secondary:hover { background-color: #ccc; } /* Portal-style two-column layout for home page boxes */ .portalboxes { display: grid; grid-template-columns: 1fr; gap: 1em; margin-bottom: 1em; } @media (min-width: 801px) { .portalboxes { grid-template-columns: 1fr 1fr; } } /*These styles are used throughout the demo, but are useful for ui elements common to most applications. You can change them, extend them, or replace them to fit your application.*/ /*h1 { font-weight: bold; color: #7194b6; margin: 0; }*/ .H2 { color: black; font-weight: bold; font-size:17px; margin:0; } .inputFieldLabel { line-height: 1.6; font-size: 75%; font-weight: bold; color: #1a3b69; vertical-align: top; } .inputFieldLabelAbove { display: block; margin-top: 10px; line-height: 1.6; font-size: 75%; font-weight: bold; color: #1a3b69; vertical-align: top; } /* ===== Skip link ===== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 100000; text-decoration: none; border-radius: 0 0 4px 0; } .skip-link:focus, .skip-link:focus-visible { position: fixed; left: 0; top: 0; width: auto; height: auto; overflow: visible; clip: auto; background: #44688f !important; color: #fff !important; padding: 0.6em 1.2em; font-size: 1rem; font-weight: 700; outline: 3px solid #fff !important; outline-offset: -3px; } /* ===== Global focus-visible ===== */ *:focus-visible { outline: 2px solid var(--ecy-color-primary-ebbblue, #44688f); outline-offset: 2px; } /* Nav links on dark background — white outline */ #ParisMainMenuP a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border: none; } /* Submenu items on white background — ebb blue outline */ ul.permits a:focus-visible, ul.compliance a:focus-visible, ul.inspections a:focus-visible, ul.charts a:focus-visible, ul.permits a:focus, ul.compliance a:focus, ul.inspections a:focus, ul.charts a:focus { outline: 2px solid var(--ecy-color-primary-ebbblue, #44688f) !important; outline-offset: 0; } /* Hamburger button focus */ .hamburger-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Checkboxes/radios — box-shadow since outline doesn't show well on small controls */ input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--ecy-color-primary-ebbblue, #44688f); outline-offset: 2px; } /* RadComboBox internals — restore focus ring */ :is([wq-style], [wq-style-controls]) .radcomboboxpermitreport :is(input, a, .rcbArrowCell, .rcbActionButton):focus-visible, :is([wq-style], [wq-style-controls]) .radfilterpermitreport :is(input, a, .rcbArrowCell, .rcbActionButton):focus-visible { outline: 2px solid var(--ecy-color-primary-ebbblue, #44688f) !important; outline-offset: 1px; } /* Image buttons — restore focus ring */ :is([wq-style], [wq-style-controls]) :is(input[type="image"]):focus-visible { outline: 2px solid var(--ecy-color-primary-ebbblue, #44688f) !important; outline-offset: 2px; } /* Grid pager selects — restore focus ring */ body[wq-style] select[size]:focus-visible, body[wq-style] .GridView select:focus-visible, body[wq-style] td select:focus-visible, body[wq-style] .RadGrid select:focus-visible, body[wq-style] .rgPager select:focus-visible { outline: 2px solid var(--ecy-color-primary-ebbblue, #44688f) !important; outline-offset: 1px; } .fieldHint { /*Nest the field hint in its related label so that it gets picked up by screen readers*/ font-size: 80%; font-weight: normal; color: #333; } .readOnlyFieldLabel { line-height: 1.6; font-size: 70%; font-weight: bold; color: #1a3b69; } .readOnlyFieldText { line-height: 1.6; font-size: 80%; } .imageLink { color: #0066cc; text-decoration: none; display: inline-block; padding: 5px 0%; } .lesserImageLink { color: #0066cc; text-decoration: none; font-size: 80%; } .primaryButtonStyle { margin: 10px 0%; font-weight: 600; cursor: pointer; color: white; background-color: var(--ecy-color-primary-ebbblue, #44688f); border: none; border-radius: 4px; padding: 0.5em 1.5em; font-size: 1rem; transition: background-color 0.2s; } .buttonStyle { margin: 10px 0%; font-weight: 600; cursor: pointer; color: white; background-color: var(--ecy-color-primary-ebbblue, #44688f); border: none; border-radius: 4px; padding: 0.5em 1.5em; font-size: 1rem; transition: background-color 0.2s; } .errorSummary { font-size: 75%; display: block; color: red; } .errorFieldMarker { vertical-align: top; color: Red; font-size: 120%; font-weight: bold; } /*table styles - start*/ .table { border: 1px solid #828282; border-collapse: collapse; background: #fff; font-size: 70%; line-height: 1.4; } .table tr:nth-child(odd) { background-color: #F2F2F2; } .table td { border: none; padding: 4px 7px; } .table th { border: none; background-color: #eee; font-weight: normal; text-align: left; padding: 9px 7px; white-space: nowrap; } .sortLink { border-style: none; color: #333; text-decoration: none; } .sortLinkSelected { font-weight: bold; border-style: none; color: #333; text-decoration: none; } .pagingContainer { padding: 4px 0%; min-width: 300px; font-size: 70%; line-height: 1.4; } /*table styles - end*/ /* ===================================================== Agency color scheme for all data grids (GridView + RadGrid) Header: ebb blue, Footer/Pager: light gale, Alternating: 25% gale blue ===================================================== */ /* ASP.NET GridView header — matches all GridView tables rendered by ASP.NET */ table[rules="rows"] th, table[rules="all"] th, table[id*="GridView"] th, table[id*="gridview"] th { background-color: var(--ecy-color-primary-ebbblue, #44688f) !important; color: #fff !important; font-weight: 600; padding: 0.6em 0.8em; } /* ASP.NET GridView header links (for sortable columns) */ table[rules="rows"] th a, table[rules="all"] th a, table[id*="GridView"] th a, table[id*="gridview"] th a { color: #fff !important; text-decoration: underline; } /* ASP.NET GridView alternating row */ table[rules="rows"] tr:nth-child(even) td, table[rules="all"] tr:nth-child(even) td, table[id*="GridView"] tr:nth-child(even) td, table[id*="gridview"] tr:nth-child(even) td { background-color: var(--ecy-color-primary-25-galeblue, #dde7f0) !important; color: #000 !important; } /* ASP.NET GridView normal row */ table[rules="rows"] tr:nth-child(odd) td, table[rules="all"] tr:nth-child(odd) td, table[id*="GridView"] tr:nth-child(odd) td, table[id*="gridview"] tr:nth-child(odd) td { background-color: #fff !important; color: #000 !important; } /* Don't override the header row (first row is odd) */ table[rules="rows"] tr:first-child th, table[rules="all"] tr:first-child th, table[id*="GridView"] tr:first-child th, table[id*="gridview"] tr:first-child th { background-color: var(--ecy-color-primary-ebbblue, #44688f) !important; color: #fff !important; } /* ASP.NET GridView pager row (last row with a td[colspan]) */ table[rules="rows"] tr:last-child td[colspan], table[rules="all"] tr:last-child td[colspan], table[id*="GridView"] tr:last-child td[colspan], table[id*="gridview"] tr:last-child td[colspan] { background-color: var(--ecy-color-primary-ebbblue, #44688f) !important; color: #fff !important; padding: 0.5em 0.8em; } /* Pager links in GridView — dark text on white pills */ table[rules="rows"] tr:last-child td[colspan] a, table[rules="all"] tr:last-child td[colspan] a, table[id*="GridView"] tr:last-child td[colspan] a, table[id*="gridview"] tr:last-child td[colspan] a { display: inline-block; color: #000 !important; background-color: #fff; text-decoration: none; padding: 0.3em 0.7em; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 4px; margin: 0 0.2em; transition: background-color 0.2s; } table[rules="rows"] tr:last-child td[colspan] a:hover, table[rules="all"] tr:last-child td[colspan] a:hover, table[id*="GridView"] tr:last-child td[colspan] a:hover, table[id*="gridview"] tr:last-child td[colspan] a:hover { background-color: var(--ecy-color-primary-25-galeblue, #dde7f0); border-color: #ccc; } /* Current page number (rendered as span in pager) */ table[rules="rows"] tr:last-child td[colspan] span, table[rules="all"] tr:last-child td[colspan] span, table[id*="GridView"] tr:last-child td[colspan] span, table[id*="gridview"] tr:last-child td[colspan] span { display: inline-block; background-color: #fff; color: var(--ecy-color-primary-ebbblue, #44688f) !important; font-weight: 700; padding: 0.3em 0.7em; border-radius: 4px; margin: 0 0.2em; } /* GridView footer row (when ShowFooter=true) */ table[rules="rows"] tfoot td, table[rules="all"] tfoot td, table[id*="GridView"] tfoot td, table[id*="gridview"] tfoot td { background-color: var(--ecy-color-primary-ebbblue, #44688f) !important; color: #fff !important; font-weight: 600; padding: 0.6em 0.8em; } /* Telerik RadGrid header */ .RadGrid .rgHeader, .RadGrid th.rgHeader, .RadGrid .rgHeaderWrapper, .RadGrid thead th { background-color: var(--ecy-color-primary-ebbblue, #44688f) !important; background-image: none !important; color: #fff !important; font-weight: 600; border-color: #365a7a !important; } /* RadGrid header links */ .RadGrid .rgHeader a, .RadGrid thead th a { color: #fff !important; } /* RadGrid alternating row */ .RadGrid .rgAltRow, .RadGrid tr.rgAltRow { background-color: var(--ecy-color-primary-25-galeblue, #dde7f0) !important; color: #000 !important; } /* RadGrid normal row */ .RadGrid .rgRow, .RadGrid tr.rgRow { background-color: #fff !important; color: #000 !important; } /* RadGrid footer */ .RadGrid .rgFooter, .RadGrid tfoot td { background-color: var(--ecy-color-primary-ebbblue, #44688f) !important; background-image: none !important; color: #fff !important; } /* Hide RadGrid built-in filter row — filtering done by separate RadFilter controls */ .RadGrid .rgFilterRow { display: none !important; } /* RadGrid pager */ .RadGrid .rgPager, .RadGrid .rgPager td { background-color: var(--ecy-color-primary-ebbblue, #44688f) !important; background-image: none !important; color: #fff !important; } .RadGrid .rgPager .rgCurrentPage { color: #fff !important; font-weight: 700; border: 1px solid #fff; border-radius: 3px; padding: 2px 6px; } /* Non-selected page numbers in RadGrid pager — black text on light background */ .RadGrid .rgPager .rgNumPart a { color: #000 !important; background-color: #fff; border-radius: 3px; padding: 2px 6px; text-decoration: none; margin: 0 1px; } .RadGrid .rgPager .rgNumPart a:hover { background-color: var(--ecy-color-primary-25-galeblue, #dde7f0); } /* Selected/current page number */ .RadGrid .rgPager .rgNumPart a.rgCurrentPage, .RadGrid .rgPager .rgCurrentPage { color: #fff !important; background-color: var(--ecy-color-primary-ebbblue, #44688f) !important; font-weight: 700; border: 1px solid #fff; } /* RadGrid pager navigation arrows */ .RadGrid .rgPager .rgPageFirst, .RadGrid .rgPager .rgPagePrev, .RadGrid .rgPager .rgPageNext, .RadGrid .rgPager .rgPageLast { color: #000 !important; } /* RadGrid pager page size label and inputs */ .RadGrid .rgPager .rgPagerLabel, .RadGrid .rgPager .rgInfoPart { color: #fff !important; } /* ===================================================== GridView pager — additional .grid-pager class support ===================================================== */ .grid-pager td { background-color: var(--ecy-color-primary-ebbblue, #44688f) !important; color: #fff !important; padding: 0.5em 0.8em; text-align: center; } .grid-pager td span { display: inline-block; background-color: #fff; color: var(--ecy-color-primary-ebbblue, #44688f); font-weight: 700; padding: 0.3em 0.7em; border-radius: 4px; margin: 0 0.2em; } .grid-pager td a { display: inline-block; color: #000 !important; background-color: #fff; text-decoration: none; padding: 0.3em 0.7em; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 4px; margin: 0 0.2em; transition: background-color 0.2s; } .grid-pager td a:hover { background-color: #365a7a; border-color: #fff; text-decoration: none; } /* Form utilities */ .form-group { margin-bottom: 1em; } .form-group label { display: block; font-family: 'Lato', sans-serif; font-weight: 700; margin-bottom: 0.25em; } .validation-error { color: #c00; font-family: 'Lato', sans-serif; font-weight: 700; } .maintenance-message { display: block; margin-top: 1em; padding: 1em; background-color: #fff3cd; border: 1px solid #ffc107; border-radius: 4px; font-family: 'Lato', sans-serif; font-size: 1rem; color: #856404; } /* RadGrid sort indicators - white icons on dark header */ .RadGrid thead th { position: relative !important; } .RadGrid thead th a { cursor: pointer; display: block; padding-right: 1.4em !important; } .RadGrid thead th a::after { content: "\25B2\000A\25BC"; white-space: pre; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 0.5em; line-height: 1; opacity: 0.5; color: #fff; } .RadGrid thead th.rgSorted a::after, .RadGrid thead th a.rgSorted::after { content: none; } .RadGrid input.rgSortAsc, .RadGrid input.rgSortDesc, .RadGrid .rgSortIcon, .RadGrid .GridHeaderDiv .rsSort { filter: brightness(0) invert(1) !important; position: absolute !important; right: 6px !important; top: 50% !important; transform: translateY(-50%) !important; } /* ===================================================== RESPONSIVE - Mobile / Tablet ===================================================== */ /* Hamburger button - hidden on desktop */ .hamburger-btn { display: none; background: none; border: none; color: var(--ecy-color-text-on-galeblue-jettygray, #333); font-size: 1.5rem; cursor: pointer; padding: 0.3em 0.6em; line-height: 1; } @media (max-width: 1024px) { /* ===== OVERRIDE WQSTYLE LAYOUT AT SMALL SIZES ===== */ /* Match WQStyle specificity: :is([wq-style]):not([wq-style-no-layout]) */ body[wq-style] { display: block !important; grid-template-columns: unset !important; grid-template-areas: unset !important; } body[wq-style] header .banner { grid-template-columns: auto 1fr !important; } body[wq-style] header .ecology-logo { width: auto !important; } body[wq-style] footer { white-space: normal !important; padding-left: 0.75em !important; } body[wq-style] main, body[wq-style] #main { padding: 0.5em !important; width: 100% !important; } /* ===== LAYOUT ===== */ html, body { overflow-x: hidden; max-width: 100vw; } #formMain { grid-template-columns: 0 1fr 0; overflow-x: hidden; max-width: 100vw; width: 100%; box-sizing: border-box; } #formMain > main { padding: 0.5em; min-width: 0; width: auto !important; max-width: calc(100vw) !important; overflow-x: auto; box-sizing: border-box; } #formMain > main * { max-width: 100% !important; box-sizing: border-box; } /* Allow grid tables to overflow and scroll horizontally */ .RadGrid table, .RadGrid table *, .rgMasterTable, table.rgMasterTable * { max-width: none !important; } /* ArcGIS InfoWindow panes are absolutely-positioned overlays; restoring their natural sizing prevents contentPane / actionsPane from collapsing to ~0 width. Uses #map anchor for specificity (0,1,1,0) to beat #formMain>main* (0,1,0,1). */ #map .esriPopup, #map .esriPopupWrapper, #map .esriPopup *, /* ArcGIS Search dijit relies on content-box + float layout; border-box breaks the clear (✕) and search (🔍) button alignment. */ #City .arcgisSearch, #City .arcgisSearch *, .dijitTooltipContainer, .dijitTooltipContainer * { max-width: none !important; box-sizing: content-box !important; } #formMain > header { max-width: 100vw; overflow: hidden; } #formMain > footer { padding: 0.5em 0.75em; white-space: normal !important; box-sizing: border-box; } #formMain > footer .foot-dividers { display: none; } #formMain > footer > div { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3em 0.5em; } #formMain > footer > div.subfooter { grid-template-columns: 1fr; } #formMain > footer a, #formMain > footer span, #formMain > footer .foot { white-space: normal !important; font-size: small; } /* ===== BANNER ===== */ header .banner { grid-template-columns: auto 1fr; gap: 0.5em; padding: 0.5em; } header .banner .ecology-logo img { max-width: 80px; height: auto; } header .banner h1 { font-size: 0.85rem; } .bannerAppTitle { font-size: 0.8rem !important; white-space: normal !important; } /* ===== NAV MENU ===== */ .hamburger-btn { display: block; } nav.menu ul.menu { display: none !important; flex-direction: column; align-items: stretch; width: 100%; white-space: normal !important; } nav.menu ul.menu.menu-open { display: flex !important; } nav.menu ul.menu > li { display: block !important; float: none !important; padding: 0 !important; height: auto !important; line-height: normal !important; width: 100% !important; white-space: normal !important; border-bottom: 1px solid rgba(255,255,255,0.3); } nav.menu ul.menu > li > a { display: block !important; padding: 0.7em 1em !important; width: auto !important; height: auto !important; white-space: normal !important; } /* Kill the .hyplnkCharts fixed dimensions in nav */ nav.menu a.hyplnkCharts { width: auto !important; height: auto !important; } /* Submenus: all types hidden by default */ nav.menu ul.menu ul.permits, nav.menu ul.menu ul.compliance, nav.menu ul.menu ul.inspections, nav.menu ul.menu ul.charts, nav.menu ul.menu > li > ul { position: static !important; border: none !important; background-color: var(--ecy-color-primary-25-galeblue, #dde7f0) !important; min-width: unset !important; width: 100% !important; display: none; } nav.menu ul.menu > li.submenu-open > ul, nav.menu ul.menu > li.submenu-open > ul.permits, nav.menu ul.menu > li.submenu-open > ul.compliance, nav.menu ul.menu > li.submenu-open > ul.inspections, nav.menu ul.menu > li.submenu-open > ul.charts { display: block !important; } nav.menu ul.menu ul li { padding: 0 !important; float: none !important; display: block !important; } nav.menu ul.menu ul li a { display: block !important; padding: 0.5em 1em 0.5em 2em !important; } /* Search textbox in menu - don't stretch full width */ nav.menu .searchtextbox { padding: 0.5em 1em !important; } nav.menu .searchtextbox input[type="search"] { width: 60% !important; max-width: 200px !important; } nav.menu .searchtextbox input[type="submit"] { width: auto !important; } /* ===== CONTENT ===== */ /* Kill ALL fixed widths and floats in content */ #parentpanel, .ppFrame, .hyplnkCharts, #permitsearch { float: none !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .applicationbox { border-radius: 0; width: 100% !important; max-width: 100% !important; overflow: hidden; box-sizing: border-box; } .applicationbox .innerbox, .innerbox { margin: 0.5em; padding: 0.75em; overflow-x: auto; word-wrap: break-word; overflow-wrap: break-word; } /* Form inputs */ main input[type="text"], main select, main textarea { max-width: 100% !important; box-sizing: border-box; } /* ArcGIS Search dijit uses content-box + explicit px widths for its float layout. Forcing border-box shifts the input width and pushes the clear/search buttons out of position. */ main .arcgisSearch input[type="text"], main .arcgisSearch input, main .arcgisSearch * { max-width: none !important; box-sizing: content-box !important; } .RadComboBox { max-width: 100% !important; box-sizing: border-box; } /* ===== GRIDS ===== */ .RadGrid { overflow-x: auto !important; } .RadGrid table { font-size: 0.75rem; } .RadGrid thead th, .RadGrid tbody td { padding: 0.3em 0.4em !important; white-space: nowrap; } .RadGrid::before { content: "\21BB Rotate device for best table view"; display: block; text-align: center; font-size: 0.75rem; color: #666; background: #f0f4f8; padding: 0.4em; border-bottom: 1px solid #ccc; } /* Environment */ .environment { font-size: 0.7rem; } } /* Hide landscape prompt when in landscape */ @media (max-width: 1024px) and (orientation: landscape) { .RadGrid::before { display: none; } }