/* This is a file for extending aw style to other forms across the website */ /* ============================================================================ 📁 myPHX311 Redesign – Base Styles ---------------------------------------------------------------------------- 🔧 Purpose: This stylesheet contains all layout, spacing, typography, and component-level styles for the myPHX311 redesign. 🎨 Theme Handling: Color-related styling (e.g., background, text, borders) must use CSS custom properties (variables) that are defined in the theme-specific files: - /myPHX311Theme/Dark/dark-theme.css - /myPHX311Theme/Light/light-theme.css ✅ Usage: When defining styles here, reference colors like: color: var(--text-color); background-color: var(--bg-color); border-color: var(--input-border); ❌ Do NOT hard-code color values (e.g., #fff, #000) in this file. ❌ Do NOT redefine color variables here — only use them. 🧪 Example: .card { padding: 1rem; border-radius: 8px; background-color: var(--card-bg); color: var(--text-color); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } 📦 Theme Variable Definition: - Variables like `--card-bg`, `--text-color`, `--link-color` should be defined in the theme-specific files (`dark-theme.css` and `light-theme.css`). 🔄 Theme switching is handled by JavaScript, which sets the `data-theme` attribute on the element and dynamically loads the correct theme CSS. ⚠️ Existing Styles in This File: - Legacy (pre-redesign) styles already present in this file can remain untouched. - However, if any of those styles require changes, they should be: a) Moved to the top of this file within the redesign section, and b) Updated to follow the redesign structure (e.g., spacing, responsive layout, and use of CSS variables for color). 🗃️ Old Theme CSS Files: - The legacy theme stylesheets still exist separately (`/theme-dark.css and /theme-light.css`). - If redesign work requires updating or overriding any styles from those old files, move the relevant styles into this file and update them to follow the new pattern. - This process should continue until the old theme CSS files are fully deprecated. NOTE: For color changing an SVG Icon can go here 'https://codepen.io/sosuke/pen/Pjoqqp'. It is a generator that converts a HEX color code to a filter attribute you can use. Example: If an SVG Icon is white but it needs to be Red when active/hover state then HEX code for Red is '#ff0000'. The generator on the website will convert that to 'invert(28%) sepia(93%) saturate(6991%) hue-rotate(357deg) brightness(93%) contrast(124%)'. Code sample below. img.active { filter: invert(28%) sepia(93%) saturate(6991%) hue-rotate(357deg) brightness(93%) contrast(124%); } ============================================================================ */ /* ============== myPHX311 Redesign Styling ================================ */ /* ============== Temp Important Stylings (Will be modified or deleted once old theme files are no longer needed) ============== */ @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"); #m_311_main > div.row:first-of-type { padding-top: 15px; } #root { margin-top: -50px; } /* #header__desktop div.container a.navbar-brand { margin-top:30px !important; } */ body { top: 0px !important; } footer { height: 64px; padding: 16px; } footer p { margin: 0px; padding: 0px; } .footer-bird-circle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; position: absolute; margin-bottom: 70px; } #bg-video { position: fixed; left: 0; top: -92px; width: 100vw; height: calc(100dvh + 80px); object-fit: cover; } /* Mobile tweak */ @media (max-width: 576px) { #bg-video { top: 0px; height: calc(100dvh + 24px); } } /* Mobile forms need different line-height */ @media (max-width: 516px) { .form-title { line-height: 50px !important; padding-bottom: 8px; } .form-info { line-height: inherit; } } @media (max-width: 462px) { .form-sub-title { line-height: inherit !important; } .form-info { line-height: inherit !important; } } /* needed to override display none for #page-heading */ html.blade-embed body #m_311_main #page-heading { display: block !important; } html.blade-embed body #m_311_main #page-heading .page-header { display: block !important; padding-left: 5px; padding-top: 8px; } .page-heading .breadcrumb { display: none; } .echoiv2 #page-heading .breadcrumb { display: flex !important; } /* Nina added filter to make dropdown arrows on service request accordion white /my-profile */ .accordion-button::after { filter: brightness(0) invert(1) !important; } /* padding for status and Edit Registration buttons */ .btn-toolbar .btn-group { padding-right: 15px; } .status { padding-top: 5px; padding-left: 5px; } /* Stack all columns in this section for sm–md (576–991.98) */ @media (min-width: 576px) and (max-width: 991.98px) { #m_311_main .row { display: flex; /* ensure flex context */ flex-wrap: wrap; } /* Only hit actual grid columns, not every div */ #m_311_main .row > [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; } } /* At lg (≥992px), allow 2-up again since it uses col-sm-6/col-md-6 */ @media (min-width: 992px) { #m_311_main .row > .col-sm-6, #m_311_main .row > .col-md-6, #m_311_main .row > .col-lg-6 { flex: 0 0 50%; max-width: 50%; } } #m_311_main .row > .col-md-12 { padding: 16px; } /* Moving the same CSS from light and dark theme to style.css */ /* ======================================= */ /* MOBILE SPECIFIC STYLES /* ======================================= */ @media (max-width: 992px) { html { height: 100%; } html body { height: 100%; overflow: hidden; display: flex; flex-direction: column; } html body .container-fluid.body-content { position: absolute; padding: 0; top: 65px !important; bottom: 60px; right: 0; left: 0; overflow-y: auto; width: 100%; } #root { height: calc(100% - 92px) !important; } } @media (max-width: 425px) { a.btn.btn-primary.pull-right.action.create-action { margin-top: 10px; } } /* 2) Only show when Bootstrap marks it open */ .table .dropdown.show > .dropdown-menu, .table .dropdown-menu.show { display: block !important; } /* added margin because when opened it bled over into the next item, this pushes it down when opened and closes when close */ .table .dropdown.action.show { margin-bottom: 40px; } /* edit pen svg to be white */ .profile-col svg{ color: white !important; } /* End Nina my-profile additions */ /* More Nina tweaks */ #google_translate_element select.goog-te-combo option { color: white !important; } /* details page read only little dash thing hide */ .text-muted { display: none !important; } /* Page Wrapper */ .page-wrapper { position: relative; /* max-width: 1512px; */ justify-self: center; z-index: 2; display: flex; padding: 5px 96px; flex-direction: column; align-items: center; align-self: stretch; } /* Landing Page Video and Overlay */ .landing-page-video { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.9; } .landing-gradient-overlay, #bg-video-overlay { position: fixed; bottom: 0; left: 0; right: 0; height: 100%; z-index: 1; pointer-events: none !important; /* user-select: none; */ } #bg-video { pointer-events: none !important; /* user-select: none; */ } .tile-section-wrapper { border-radius: 12px; padding: 16px 16px 24px 16px; position: relative; z-index: 2; } /*Hero Navigation Quick Links */ .quick-link { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; font-weight: 600; transition: transform 0.2s ease; width: 100%; } .quick-link:hover, .quick-link:active, .quick-link:focus { transform: translateY(-2px); } .quick-link-icon { width: 20px; height: 20px; flex-shrink: 0; } .chevron-icon { margin-left: auto; width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; } /*Tile Section Content Message */ .intro-message { color: #495057 !important; font-size: 16px; font-style: normal; font-weight: 400; line-height: 120%; } .intro-message h2 { font-size: 24px; margin-bottom: 8px; } .intro-message p { line-height: 1.5; } /* Tile Styles */ .tile-wrapper { /* max-width: 1200px; */ margin: 0 auto; /* padding: 0 20px; */ } .tile-container { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 24px 16px; justify-content: center; } .tile-card { /* width: 31.5%; */ /* max-width: fit-content; */ display: flex; flex-direction: column; /* align-items: flex-start; */ gap: 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.85); box-shadow: 0px 7px 7px -5px rgba(0, 0, 0, 0.04), 0px 10px 15px -5px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.05); overflow: hidden; transition: opacity 0.6s ease, transform 0.6s ease; opacity: 0.4; transform: translateY(20px); } .tile-card { background: rgba(255, 255, 255, 0.85); box-shadow: 0px 7px 7px -5px rgba(0, 0, 0, 0.04), 0px 10px 15px -5px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.05); } .tile-card.visible { opacity: 1; transform: translateY(0); } .tile-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0px 10px 15px -5px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .tile-card img { width: 100%; height: auto; object-fit: cover; } .tile-title { display: flex; align-items: center; gap: 8px; font-family: "Effra", sans-serif; font-size: 22px; font-weight: 700; line-height: 120%; margin: 0; padding: 8px 16px; } .tile-title .tile-icon { width: 20px; height: 20px; margin-right: 8px; vertical-align: middle; flex-shrink: 0; } .tile-card { width: 100%; /* flex: 1 1 calc(33.333% - 12px); */ flex-grow: 0; flex-shrink: 0; flex-basis: calc(33.333% - 12px); } @media (min-width: 1560px) { .tile-card { flex-basis: calc(25% - 12px) !important; } } /* Filter Buttons */ .tile-filters { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0; } .filter-btn { border: 1px solid; border-width: 1px; border-style: solid; padding: 6px 16px; border-radius: 4px; font-weight: 500; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } /* subgrid add properties btn on ppaw*/ #sg_properties a.create-action{ color: #4F7A96; /* Text/sm */ font-family: Roboto; font-size: 14px; font-style: normal; font-weight: 400; /* line-height: 20.3px; */ } /* a.btn.btn-primary.pull-right.action.create-action { display: flex; color: var(--phx-font-colors-link, #1864BE) !important; height: 32px; padding: 0 var(--Padding-padding-md, 20px); justify-content: center; align-items: center; gap: var(--Spacing-spacing-sm, 8px); border-radius: var(--Radius-radius-sm, 4px); border: 1px solid var(--Link, #0E6EB9); background: var(--white, #FFF); } */ a.btn.btn-primary { display: flex; color: #4F7A96!important; /* height: 32px; */ /* padding: 0 var(--Padding-padding-md, 20px); */ justify-content: center; align-items: center; gap: var(--Spacing-spacing-sm, 8px); border-radius: var(--Radius-radius-sm, 4px) !important; border: 1px solid #4F7A96; background: var(--white, #FFF); } /* START button size on mobile */ @media (max-width: 780px) { /* .entitylist .view-toolbar, .entitylist .grid-actions, .entitylist .action-bar, .entity-grid .view-toolbar { display: block; width: 100%; } */ .entitylist .view-toolbar a.btn, .entitylist .grid-actions a.btn, .entitylist .input-group.a.btn.btn-primary { display: block; width: max-content; max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; text-align: center; margin-top: 10px; } /* .entitylist .view-toolbar a.btn, .entitylist .grid-actions a.btn { float: none !important; } */ } /* END */ /* .control textarea { padding: 0; } */ @media (max-width:767px){ .create-btn{ width: 250px; } } /* Optional Feature Callout Section */ .callout-wrapper { display: flex; align-items: flex-start; gap: 8px; align-self: stretch; } .highlight-callout-horizontal { display: flex; padding: 16px 16px 12px 16px; align-items: flex-start; gap: 16px; align-self: stretch; width: 100%; border-radius: 8px; margin-bottom: 2rem; flex-wrap: wrap; } .callout-image-wrapper { flex: 0 0 auto; width: auto; height: 100%; max-width: 250px; } .callout-image-wrapper img { height: 100%; width: 100%; border-radius: 6px; object-fit: cover; } .callout-content { flex: 1 1 400px; } .callout-content h3 { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.25rem; } .callout-content p { margin-bottom: 0.75rem; line-height: 1.5; } /* Callout Button */ .btn-callout { display: inline-block; color: #212529 !important; padding: 0.5rem 1rem; border-radius: 6px; text-decoration: none; font-weight: bold; } .btn-callout:hover { color: #212529 !important; transform: translateY(-4px) scale(1.01); } .btn-callout:visited { color: #212529 !important; } .btn-callout .svg-arrow { margin-left: 6px; } .btn-callout:hover a span .svg-arrow svg { transform: translateX(4px); } .svg-arrow svg { color: #212529 !important; transition: transform 0.3s ease; } .btn-callout:hover svg { color: #212529 !important; transform: translateX(4px); } /* Mobile Layout Stuff */ /* Page Wrapper MOBILE */ .page-wrapper-mobile { position: relative; z-index: 2; display: flex; /* padding: 30px 96px; */ flex-direction: column; align-items: center; align-self: stretch; } /* MOBILE Callout Button */ .callout-content-mobile { flex: 1 1 400px; } .callout-content-mobile h3 { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.25rem; color: #70003b !important; } .callout-content-mobile p { color: #212529 !important; margin-bottom: 0.75rem; line-height: 1.5; } .btn-callout-mobile { display: inline-block; color: #212529; border-radius: 6px; text-decoration: none; font-weight: bold; } .btn-callout-mobile:hover { color: #212529; transform: translateY(-4px) scale(1.01); } .btn-callout-mobile:visited { color: #212529; } .btn-callout-mobile .svg-arrow { margin-left: 6px; } .btn-callout-mobile:hover a span .svg-arrow svg { transform: translateX(4px); } .svg-arrow svg { transition: transform 0.3s ease; } .btn-callout-mobile:hover svg { color: #212529; transform: translateX(4px); } .highlight-callout-horizontal-mobile { display: flex; height: 82px; padding: 16px 16px 12px 16px; align-items: flex-start; gap: 16px; align-self: stretch; width: 100%; background-color: rgba(255, 255, 255, 0.9); border-radius: 8px; margin-bottom: 2rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); flex-wrap: wrap; } .hero-section { width: 100%; } /* Mobile Footer */ .mobile-footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 64px; background-color: #f1f3f5; border-top: 1.5px solid #ffffff; filter: drop-shadow(0 -1px 8px rgba(0, 0, 0, 0.1)); display: flex; justify-content: space-between; align-items: center; padding-left: 20px; padding-right: 20px; z-index: 10; } .footer-left { display: flex; align-items: center; } .footer-left .footer-btn { margin-right: 16px; } .footer-right { margin-left: auto; padding-right: 16px; display: flex; align-items: center; } .footer-btn { background: none !important; border: none; padding: 0; display: flex; align-items: center; } .footer-btn:hover, .footer-btn:active, .footer-btn:focus { background: none !important; } .footer-btn img { width: 40px; height: 40px; } /* Mobile Slide Out Menu */ .slide-menu { position: fixed; top: 0; right: -100%; width: 100%; height: 100%; background: #fff; box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1); transition: right 0.3s ease; z-index: 2000; display: flex; flex-direction: column; } .slide-menu.open { overflow: scroll; scrollbar-width: none; z-index: 9999 !important; right: 0; } body.menu-open .maintenance-banner { display: none; } .menu-header, .menu-footer { background: #f8f9fa; padding-top: 40px; padding-left: 25px; padding-right: 20px; } .menu-header span { font-size: 1.2rem; color: #621138; } .menu-linklist { padding-left: 25px; padding-right: 25px; } .menu-body { background-color: #f8f9fa !important; z-index: 9999; } .menu-body a { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; /* color: #621138 !important; */ padding: 0.75rem 0; font-weight: 500; } #closeMenuBtn { background-color: #f8f9fa !important; border: none; } /* Mobile Slide Up service Links */ /* #footer__mobile{ display:none !important; } */ .fab-button { position: fixed; bottom: 3.5rem; left: 50%; transform: translateX(-50%); width: 64px; height: 64px; background-color: #497895; color: white; font-size: 2rem; border-radius: 50%; border: none; z-index: 1001; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); cursor: pointer; } .slide-up { transform: translateY(100%); transition: transform 0.4s ease-in-out; } .slide-up.open { transform: translateY(0); } .fab-panel { position: fixed; left: 0; right: 0; bottom: 0; height: 100vh; background-color: #f8f9fa !important; z-index: 9999; transform: translateY(100%); transition: transform 0.4s ease-in-out; overflow-y: auto; padding: 2rem; padding-bottom: 20px; padding-top: 100px; } .fab-panel.active { transform: translateY(0%); } .fab-section { transition: all 0.3s ease; overflow: hidden; } .fab-section[style*="display: none"] { margin: 0 !important; padding: 0 !important; height: 0 !important; } .fab-close { background: none !important; border: none; cursor: pointer; z-index: 1002; } .fab-close:active, .fab-close:focus .fab-close:hover { background-color: #f8f9fa !important; } .fab-close svg { width: 24px; height: 24px; } .fab-search-wrapper { margin-bottom: 24px; margin-top: 14px; } /* New wrapper for input + icon */ /* Search CSS */ .fab-search-container { position: relative; width: 100%; } .fab-search { display: flex; width: 100%; height: 40px; padding: 8px 40px 8px 16px; /* Add right padding for icon space */ border-radius: 25px; border: 1px solid var(--Border-Gray-default, #868e96); background: var(--Background-default, #fff); color: black; font-family: Roboto; font-size: 14px; line-height: 20.3px; } .search-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; cursor: pointer; } .no-results-msg { font-size: 1rem; margin-top: 1rem; color: #621138; font-weight: 600; } .hidden { display: none !important; } .fab-header h2 { color: #621138 !important; /* Heading/h4 */ font-family: Roboto; font-size: 20px; font-style: normal; font-weight: 700; line-height: 24px; /* 120% */ } .category-title { color: #621138 !important; font-family: Roboto; font-size: 16px; font-style: normal; font-weight: 700; line-height: 20px; padding-top: 16px; } /* Hide links past 5 */ /* CSS for UL Link List */ .fab-links .fab-link:nth-child(n + 6) { display: none; } .fab-category.expanded .fab-links .fab-link { display: flex; } .fab-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; text-decoration: none; color: #000; border-bottom: 1px solid #eee; } .fab-list { border-radius: var(--radius-large, 8px); border: 1px solid var(--Border-default, #dee2e6); background: var(--phx-bg-colors-white, #fff); } .fab-panel ul.fab-list { list-style: none; padding-left: 0; } .fab-list li { border-bottom: 1px solid #eee; display: flex; height: 48px; padding: 0px var(--Padding-padding-sm, 16px); align-items: center; gap: 8px; align-self: stretch; } .fab-list li:active, .fab-list li:focus .fab-list li:hover { background-color: #f7f7f7 !important; border-radius: 5px; } .fab-list li img.tile-icon { width: 24px; height: 24px; margin-right: 0.75rem; } .fab-list li a { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: #621138 !important; font-weight: 500; font-size: 15px; line-height: 1.4; flex-grow: 1; } .fab-list li a img.tile-icon { width: 24px; height: 24px; flex-shrink: 0; } .fab-list li a:active, .fab-list li a:focus .fab-list li a:hover { background-color: #f7f7f7 !important; border-radius: 5px; } .fab-link-arrow { margin-left: auto; flex-shrink: 0; } /* END CSS for UL Link List */ /* CSS for MORE/LESS Button */ .fab-more-wrapper { display: flex; justify-content: center; align-items: center; } .fab-more-wrapper img { width: 24px; height: 24px; } .fab-more-btn { background-color: #f1f3f5 !important; color: black !important; border: none; padding: 10px; width: 95% !important; font-weight: bold; display: flex; justify-content: space-between; align-items: center; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; cursor: pointer; text-align: left; } .fab-more-left { display: flex; padding-left: 5px; align-items: center; gap: 8px; } .fab-more-left img { width: 24px; height: 24px; } .fab-more-btn:hover, .fab-more-btn:active, .fab-more-btn:focus { background-color: #f2f2f2 !important; color: black !important; } .fab-arrow { transition: transform 0.3s ease; } .fab-more-btn[data-expanded="true"] .fab-arrow { transform: rotate(180deg); } .hero-section-mobile { margin-bottom: 40px; } /* quick links mobile view */ .quick-links-mobile { list-style: none; padding: 0; margin: 0; border-radius: 8px; border: 1px solid #dee2e6; background: #fff; overflow: hidden; width: 100%; } .quick-links-mobile li { border-bottom: 1px solid #eee; } .quick-links-mobile li:last-child { border-bottom: none; } .quick-link-mobile { padding: 12px 16px; text-decoration: none; color: #621138 !important; font-weight: 500; font-size: 15px; transition: background-color 0.2s ease; } .quick-link-mobile:hover, .quick-link-mobile:active, .quick-link-mobile:focus { color: #621138 !important; } .quick-link-mobile-icon { width: 24px; height: 24px; } .chevron-mobile-icon { width: 16px; height: 16px; } /* my service request button */ .my-service-requests-wrapper { display: flex; height: 56px; padding: 12px var(--Padding-padding-lg, 24px); justify-content: center; align-items: center; gap: var(--Spacing-spacing-sm, 8px); align-self: stretch; z-index: 9999; } .btn-my-service-requests { display: flex; align-items: center; justify-content: center; background-color: white; border-color: #4f7a96; border: 1px solid; color: #4f7a96 !important; text-decoration: none; font-weight: 600; font-size: 16px; border-radius: 8px; padding: 12px 20px; width: 100%; transition: background-color 0.3s ease; } .btn-my-service-requests:hover { background-color: #3b5d72; color: white; } .btn-my-service-requests .btn-icon { width: 28px; height: 28px; margin-right: 10px; } /* New Service Request Button */ /* .btn-my-service-requests-new{ display: flex; align-items: center; justify-content: center; background-color: #4F7A96; color: #fff; gap:8px; text-decoration: none; font-weight: 600 !important; border:none !important; font-size: 16px; border-radius: 8px; padding: 8px 20px; width: 100%; transition: background-color 0.3s ease; } */ .btn-my-service-requests-new { display: flex; width: 100%; border: none !important; height: 48px; /* padding: 0 var(--Padding-padding-sm, 16px); */ align-items: center; gap: 8px; align-self: stretch; border-radius: 0 0 8px 8px; background: var(--311---dark-blue, #4f7a96); } .btn-my-service-requests-new span { color: var(--white, #fff); font-family: Roboto; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; } .newsr-icon { margin-left: 3px; } .chevron-newsr { filter: brightness(0) invert(1); } /* .fab-toggle { display: flex; align-items: center; justify-content: center; background-color: #4F7A96; color: #fff; text-decoration: none; font-weight: 600; font-size: 16px; border-radius: 8px; padding: 12px 20px; width: 100%; transition: background-color 0.3s ease; } */ .fab-toggle:hover { background-color: white; color: #4f7a96; } .fab-toggle .btn-icon { width: 28px; height: 28px; margin-right: 10px; } /* END CSS for MORE/LESS Button */ /* End Mobile Layout */ /* Set absolute position for footer so it shows up at the bottom of the page on desktop */ @media (min-width: 991.98px) { .desktop-footer { position: absolute !important; } #footer__mobile { display: none; } } /* Media Queries mostly for tablet view */ /* Tablet (2 per row) */ @media (max-width: 991.98px) { .tile-card { flex: 1 1 calc(50% - 12px); } #header__mobile { display: block; } #footer__mobile { display: flex; } .desktop-footer { display: none; } /* Nina added because in mobile view the bottom of the list hid under the footer */ .servicerequest-card-redesign2025 { margin-bottom: 200px; } .profile-card-redesign2025 { margin-bottom: 15px; } /* Nina added media query to remove padding from profile section to close gap */ .section__311 { padding-top: 0; } } /* Mobile (1 per row) */ @media (max-width: 576px) { .tile-card { flex: 1 1 100%; } .page-wrapper { padding: 5px; } .page-wrapper-mobile { margin-top: 15px; padding: 5px !important; } } @media (min-width: 992) { .mobile-footer { display: none; } } /* @media (min-width: 847px) and (max-width: 991.9px){ .page-wrapper{ padding-top: 50px } } */ @media (max-width: 1490px) and (min-width: 990px) { .quick-link { min-height: 72px; } } @media screen and (max-height: 700px) { .page-wrapper-mobile { transform: scale(0.95); transform-origin: top center; padding-bottom: 80px; } } /* Media Queries - Mostly for Tablets*/ @media (max-width: 950px) { .highlight-callout-horizontal { flex-wrap: nowrap; } } /* page wrapper padding changes when screen is tablet sized */ @media (min-width: 577px) and (max-width: 991.9px) { .page-wrapper { padding: 5px 40px; } /* .page-wrapper-mobile{ padding:50px; } */ } @media (max-width: 768px) { .highlight-callout-horizontal { flex-direction: column; display: grid; align-items: center; } .callout-wrapper { min-width: 325px; align-self: center; } .callout-image-wrapper { height: auto; } .highlight-callout img.callout-img { max-width: 100%; height: auto; margin-bottom: 12px; } .crmEntityFormView .cell { margin-bottom: 0px !important; } } @media (min-width: 577px) { .page-wrapper-mobile { display: none; } /* .mobile-footer{ display:none; } */ } @media (max-width: 474px) { .callout-image-wrapper { display: none; } .callout-content p { display: none; } /* Hide mobile version by default */ /* .layout-mobile .mobile-footer { display: none; } */ } /* Show mobile version and hide desktop version on smaller screens */ @media screen and (max-width: 576px) { .layout-desktop { display: none !important; } .desktop-footer { display: none; } .layout-mobile { display: block; } .mobile-footer { display: flex; } } .layout-desktop { display: grid; } /* Keep CCBDataSection hidden even on mobile */ .crmEntityFormView table.section[data-name="CCBDataSection"]{ display: none !important; } @media (max-width: 767px){ .crmEntityFormView table.section[data-name="CCBDataSection"]{ display: none !important; } } .crmEntityFormView .tab { border: none !important; /* padding: 20px; */ background-color: transparent !important; border-radius: 0px !important; } .crmEntityFormView div.description{ margin-top: 1px !important; margin-bottom: 5px !important; } @media (max-width: 767px) { .crmEntityFormView table.section { display:block !important; width: 100%; overflow: visible; } } /* ============== End of Temp Important Stylings ============== */ /* PIN STUFFFFF make the input-button look like a link */ .pin-lookup-link{ background: none !important; border: 0 !important; padding: 0 !important; color: #0d6efd !important; font-weight: 600; text-decoration: underline; } .pin-lookup-link:hover{ text-decoration: none; } .pin-msg{ color: var(--Text-dimmed, #868E96); font-family: Roboto; font-size: 12px; font-style: normal; font-weight: 400; line-height: 15px; } #openPin{ color: var(--Link, #0E6EB9); /* Text/xs */ font-family: Roboto; font-size: 12px; font-style: normal; font-weight: 400; line-height: 15px; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } #openPin, #openPin:hover, .pin-lookup-link, .pin-lookup-link:hover { cursor: pointer; } #ServiceAddressNote{ color: var(--Text-dimmed, #868E96); font-family: Roboto; font-size: 12px; font-style: normal; font-weight: 400; line-height: 15px; } #serviceAddresses{ margin-bottom:5px; } #m_311_main { background: var(--form-bg); border-radius: 8px; padding-bottom: 60px !important; position: relative; z-index: 10; } #m_311_main .case-info .status { float: right; padding-right: 15px; } #m_311_main .case-info .status .badge { border-radius: var(--Radius-radius-xl, 24px) !important; background: var(--color-semantic-success---success-200, #146c44) !important; color: var(--Neutral-white, #fff); /* Text Uppercase/sm */ font-family: Roboto; font-size: 12px; font-style: normal; font-weight: 600; line-height: 16px; /* 114.286% */ text-transform: uppercase; } .form-title { color: var(--form-title-bg); } .form-sub-title { color: var(--text-color); } #location-success svg, #location-success i { color: var(--success-icon-color); } #location-error svg, #location-error i { color: var(--error-icon-color); } /* acknowledgement classic checkbox START */ /* --- Classic checkbox layout: checkbox left, long text wraps nicely --- */ td.checkbox-cell.classic-checkbox { display: flex; align-items: flex-start; /* key: top align */ gap: 10px; } /* Put the checkbox/control first (left) even though it’s later in the DOM */ td.checkbox-cell.classic-checkbox > .control { order: 1; flex: 0 0 auto; margin: 0; padding: 0; /* tiny nudge so the box aligns with the first line of text */ padding-top: 3px; } td.checkbox-cell.classic-checkbox > .info { order: 2; flex: 1 1 auto; /* label can wrap */ min-width: 0; /* prevents weird overflow in flex */ margin: 0; padding: 0; } /* Kill the “rectangle label” styling for classic rows */ td.checkbox-cell.classic-checkbox .info label.field-label { display: block; /* let it wrap naturally */ padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; justify-content: flex-start !important; align-items: flex-start !important; gap: 0 !important; } /* Make sure the checkbox wrapper isn’t floating */ td.checkbox-cell.classic-checkbox .control span.checkbox { float: none !important; } /* If your global CSS hides checkboxes, force them back on for classic only */ td.checkbox-cell.classic-checkbox input[type="checkbox"] { display: inline-block !important; } /* END styling for verbiage lineup with checkboxes */ /* Only remove the pill/rectangle label styling for those flagged via metadata */ td.checkbox-cell.classic-checkbox .info label { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; display: inline !important; /* or inline-flex if you prefer */ justify-content: initial !important; align-items: initial !important; gap: 0 !important; } td.checkbox-cell.classic-checkbox .info { display: flex; align-items: center; gap: 10px; } td.checkbox-cell.classic-checkbox .info label { margin: 0; } /* Re-show the real checkbox ONLY for classic-checkbox fields */ td.checkbox-cell.classic-checkbox input[type="checkbox"]{ appearance:auto; -webkit-appearance:checkbox; width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--Border-Gray-default, #868E96); background: var(--Background-default, #FFF); display: inline-block !important; } td.checkbox-cell.classic-checkbox.cell { padding-top:5px; } /* on mobile line up box and verbiage */ @media(max-width:600px){ td.checkbox-cell.classic-checkbox .control span.checkbox { margin-right:4px; } td.checkbox-cell.classic-checkbox.cell { padding-top:0px; display: flex; /* flex-direction: row-reverse; */ align-items: flex-start; gap: var(--Spacing-spacing-xs, 4px); align-self: stretch; } } /* acknowledgement classic checkbox END */ .selected-checkbox { color: var(--checkbox-selected-text); padding-right: 5px; } .checkbox-cell .info label.checked { border-color: var(--checkbox-selected-border); background: var(--checkbox-bg); color: var(--checkbox-selected-text); } /* CLASSIC: when checked, do NOT apply the fancy pill styles */ td.checkbox-cell.classic-checkbox .info label.checked, td.checkbox-cell.classic-checkbox label.checked { background: transparent !important; color: var(--checkbox-text) !important; border-color: transparent !important; border: 0 !important; /* keep layout sane if the fancy style uses flex */ display: inline !important; justify-content: initial !important; align-items: initial !important; } .checkbox-cell .info label { border-width: 1px; border-style: solid; border-color: var(--checkbox-border); color: var(--checkbox-text); } .section-title { color: var(--section-title-text) !important; } .form-title { font-size: 40px; font-style: normal; font-weight: 700; line-height: 40px; margin-bottom: 8px; } .xrm-attribute-value h2 { color: var(--form-title-bg) !important; font-size: 40px; font-style: normal; font-weight: 700; line-height: 40px; } .form-sub-title, .form-info { padding-top: 15px; font-size: 16px; font-style: normal; font-weight: 400; } .form-info { line-height: 0px; } .form-sub-info { line-height: 56px; } .form-control.picklist, .form-control.boolean-dropdown, .form-control { border-radius: 4px; border-width: 1px; border-style: solid; } li.msos-selected-display-item span.msos-selected-display-item-text { color: black; } li.msos-option label.msos-label { color: black; } #location-success, #location-error { display: flex; align-items: flex-start; gap: 0.5rem; } #location-success > div:first-child, #location-error > div:first-child { display: flex; align-items: flex-start; } .checkbox-cell .info label.checked { border-radius: 4px; border-width: 1px; border-style: solid; } .required-field-section { display: none; } ul.tab-list { display: flex; gap: 14px; list-style: none; padding: 0; margin: 0; } ul.tab-list li { flex: 1; text-align: center; border-radius: 4px; cursor: pointer; font-size: 14px; padding: 6px 0px 6px 0px; } @media (max-width: 1000px) { ul.tab-list { flex-direction: column; gap: 10px; } ul.tab-list li { flex: 0 0 auto; width: 100%; } } .tab-button-icon { /* height:20px; */ width: 24px; padding-right: 8px; } html[dir="ltr"] .crmEntityFormView .cell.checkbox-cell div.info { padding-left: 0px; } /* .crmEntityFormView tr td.cell:nth-last-child(2) { padding-right: 0; } */ .crmEntityFormView .cell { padding-left: 0px; padding-top: 0px; padding-bottom: 10px; padding-right: 10px; } .checkbox-cell .info label { display: flex !important; padding: 8px 18px; justify-content: center; align-items: center; gap: 10px; border-radius: 3px; /* margin-right:16px; */ } input[type="checkbox"]:not(input[name="overwrite"]) { display: none; } .field-label { padding-bottom: 3.2px; font-size: 14px; font-weight: 400; line-height: 20.3px; /* display: flex; */ } .contact-info-title { color: black; font-size: 18px; margin-bottom: 8px; } .crmEntityFormView .section-title { margin-bottom: 0 !important; } .section-title h3 { font-size: 24px; margin-bottom: 0 !important; font-size: 18px; font-weight: 700; line-height: 120%; } legend.section-title .section-subtext { margin-bottom: 6px; font-size: 0.95rem; line-height: 1.35; color: #343a40; } .section-title h3 p { color: var(--gray-gray-8, #343a40); /* Text/sm */ font-family: Roboto; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20.3px; /* 145% */ } .formTitle { /* Headers/H1 */ font-family: Effra; font-size: 40px; font-style: normal; font-weight: 700; line-height: 50px; /* 125% */ } #header__desktop { background-color: var(--bg-color) !important; background-image: none !important; } /* Nina adding to match figma */ #toggle-theme-new { border: none; } .login-info-container { padding: 10px 96px 10px 96px !important; } .desktop-header-rightside { display: flex; align-items: center; align-self: stretch; flex: 1 0 0; justify-content: flex-end; } .header-content { display: flex; padding: 24px 96px; align-items: center; gap: 51px; align-self: stretch; } /* ============== END of myPHX311 Redesign Styling ========================= */ /* Hide _hidden sections */ .crmEntityFormView table[data-name$="_hidden"], .crmEntityFormView table[data-name$="_hide"] { display: none !important; } #EntityFormView fieldset[aria-label="New Section Hide"] { display: none !important; } .crmEntityFormView fieldset { margin-bottom: 10px !important; } /* Text links that show up on pages */ .myphx311-text-link { color: #0e6eb9 !important; cursor: pointer; } .myphx311-text-link-alt { color: #003ae6 !important; cursor: pointer; } .myphx311-text-link:hover, .myphx311-text-link-alt:hover { text-decoration: underline; cursor: pointer; } /* Fix for arrows on datepicker */ .datepicker .glyphicon { color: black; } /* Fix for nav bar on homepage */ nav#d-nav { top: 4.5rem !important; } /* Required field for required sections */ legend.section-title.required h3::after/*, legend.section-title.required::after*/ { content: " *"; color: red; } /* Address Lookup Tab Buttons */ /* Forms redesign */ .publicdisclosure p { color: var(--fontcolors-primary-black, #202124); /* Text/sm */ font-family: Roboto; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20.3px; /* 145% */ } .msos-caret-button { background-color: white !important; } /* Fix for ddls */ .form-control.picklist, .form-control.boolean-dropdown { display: block; width: 100%; padding: 0.375rem 2.25rem 0.375rem 0.75rem; -moz-padding-start: calc(0.75rem - 3px); font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; border: 0 solid transparent; border-radius: 0; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form-control.picklist, .form-control.boolean-dropdown, .form-control { border-width: 1px; border-style: solid; } /* Fix for SP File Control */ table.table { color: #fafafa; --bs-table-striped-color: #fafafa; } table.table thead { background-color: #455781; } table.table-striped tr:nth-child(even) { background-color: transparent; } table.table-striped tr:nth-child(even) td { background-color: inherit; } div.dropup.open .dropdown-menu, div.dropdown.open .dropdown-menu { display: block; } div.dropup .btn-default:hover, div.dropup .btn-default:focus, div.dropdown .btn-default:hover, div.dropdown .btn-default:focus { color: #fafafa; background-color: #5d5d5d; } div.dropup .btn-default, div.dropdown .btn-default { border-color: #fafafa; } .dropdown-menu > li > a:hover { padding: 0; border: 0; } ul.dropdown-menu { background-color: #455781; color: #fafafa; } .sharepoint-loading.message.text-center { color: #fafafa !important; } .sharepoint-grid .btn { color: #fafafa !important; } .modal-header, .modal-footer { background-color: #455781; color: #fafafa; } .modal-body { background-color: #161627; color: #fafafa; } .modal-header { border-bottom: 0px; } .modal-footer { border-top: 0px; } .modal-dialog .form-close { color: #fafafa; } /* matching figma for service request details modal title */ #bladeModal .modal-header .modal-title { color: #621138 !important; } /* Ryan's Additions */ /* Start Stop Water Service */ body { color: #fff !important; font-family: Roboto !important; } span.webchat__suggested-action__text { color: green !important; } @media (min-width: 992px) { .h1, h1 { color: white; } .h2, h2 { color: white; } span { color: white; } legend { color: white; } #root { position: relative; top: 88px; min-height: 34vh !important; padding-bottom: 10vh !important; } } /* margins for account number field */ #openPin { margin-bottom: 5px; } #adoxio_pin { /* width: 10% !important; */ margin-bottom:5px; min-width: 60px; } #crfe0_pin{ margin-bottom:5px; } #crfe0_accountnumber{ margin-bottom:5px; } #phx_accountnum{ margin-bottom:5px; } /* Address Suggestions Dropdown */ div.auto-complete-suggestions-container { position: relative; z-index: 1; display: none; } div.auto-complete-suggestions { box-sizing: border-box; border: 1px solid #66afe9; position: absolute; top: 39px; background-color: white; width: 100%; color: #555; } div.auto-complete-suggestions option { display: block; } div.auto-complete-suggestions option.selected { display: block; background-color: #1e90ff; color: #fff; } /* --Address Suggestions Dropdown */ /* Calendar datepicker */ div.datetimepicker { width: 25% !important; flex-wrap: nowrap; flex-direction: row; } svg.fa-calendar-days { font-size: 2rem !important; } /* --Calendar datepicker */ /* -- Start Stop Water Service -- */ /* City Services Bill Documents */ /* General body colors */ body { color: #fafafa; } label { font-weight: 700; color: #fafafa; } .form-control.readonly, .form-readonly .form-control { display: flex; padding: var(--Padding-padding-xxs, 8px) var(--Padding-padding-xs, 12px); align-items: center; gap: var(--Spacing-spacing-sm, 8px); align-self: stretch; color: #848484 !important; background-color: #e9ecef !important; padding-left: 5px !important; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { color: #cbcbcf !important; } /* --General body colors */ /* Next/Prev Buttons */ input[type="button"], button { font-size: 16px; margin-bottom: 20px; } input[type="button"], button { background-color: #4f7a96 !important; border-color: #455781 !important; font-weight: 400 !important; color: #fafafa !important; } .address-validator-btn { /* Check Address Button on form needed margin */ margin-top: 8px; } input[type="button"]:hover, button:hover { background-color: #4f7a96 !important; border-color: #2a3a60 !important; color: #fafafa !important; font-weight: 400 !important; } .crmEntityFormView .actions { text-align: right; border: none; margin-bottom: 0 !important; } .crmEntityFormView .actions > .col-sm-6 { float: right; } /* --Next/Prev Buttons */ /* Tabs/Progress Bar */ .crmEntityFormView .tab { border: 3px solid #455781; /* padding:20px; */ background-color: #161627; border-radius: 7px; } .crmEntityFormView .tab-title { border: none; margin: 0; } html[dir="ltr"] ol.progress.top li { border-radius: 4px !important; } .progress { background: transparent; padding-top: 20px; margin-bottom: 20px; border-bottom: 1px solid #e6ac00 !important; border-radius: 0; font-weight: 700 !important; } .list-group { flex-direction: unset; } .list-group-item { width: 100%; font-size: 1rem; background: transparent; } .list-group-item.active { color: #fafafa !important; background: transparent !important; border-color: transparent !important; } .list-group-item.incomplete { color: rgb(113, 119, 144) !important; } @media (max-width: 762px) { .list-group-item.incomplete { display: none; } } @media (max-width: 762px) { .list-group-item.active { text-align: center; } } /* --Tabs/Progress Bar */ /* Alerts */ div.alert.alert-warning { color: black; background-color: #fff9ef; border-color: #ffecb5; } .alert-danger { background-color: #f0b1b1; border-color: #f0b1b1; color: black !important; } .alert-danger a { color: black !important; } /* bullets in lists */ .bullet-list ul { list-style: disc !important; padding-left: 1.25rem !important; /* gives space for the bullets */ margin: 0.5rem 0 0.5rem 0 !important; } .bullet-list li { display: list-item !important; list-style: disc !important; } .div.alert.alert-warning ul.bullet-list { list-style: disc !important; padding-left: 1.25rem !important; margin: 0.5rem 0 0.75rem !important; } .div.alert.alert-warning ul.bullet-list li { display: list-item !important; } /* Add the circled "i" to alert */ div.alert.alert-warning.info-icon { position: relative; padding-left: 2.25rem; /* make room for icon */ } .info-icon::before { content: "i"; position: absolute; left: 0.75rem; /* top: 1rem; */ width: 1.1rem; height: 1.1rem; border: 1px solid currentColor; border-radius: 50%; line-height: 1.05rem; text-align: center; font-weight: 700; font-size: 0.85rem; opacity: 0.85; } /* --Alerts */ /* Address Suggestions Dropdown */ div.auto-complete-suggestions-container { position: relative; z-index: 1; display: none; } div.auto-complete-suggestions { box-sizing: border-box; border: 1px solid #66afe9; position: absolute; top: 39px; background-color: white; width: 100%; color: #555; } div.auto-complete-suggestions option { display: block; } div.auto-complete-suggestions option.selected { display: block; background-color: #1e90ff; color: #fff; } /* --Address Suggestions Dropdown */ /* Validation Summary */ .validation-header { color: #000000 !important; } .validation-summary a:hover { text-decoration: underline !important; } /* --Validation Summary */ /* Other fixes */ /* Pin button too close to input */ #openPin { margin-bottom: 5px; } #adoxio_pin { /* width: 10% !important; */ margin-bottom:5px; min-width: 60px; } #root { position: relative !important; top: 88px; min-height: 34vh !important; height: calc(100% - 50px); padding-bottom: 20vh !important; } .pull-right { float: right !important; } #form-start { margin-top: 20px; } #denotes { margin-top: 10px; margin-right: 10px; } .alert.sr-only { padding: 0; } /* --Other fixes */ /* -- City Services Bill Documents -- */ /* Vacation Rentals Registration */ #openPin { margin-bottom: 5px; } #adoxio_pin { /* width: 10% !important; */ margin-bottom:5px; min-width: 60px; } /* Address Suggestions Dropdown */ div.auto-complete-suggestions-container { position: relative; z-index: 1; display: none; } div.auto-complete-suggestions { box-sizing: border-box; border: 1px solid #66afe9; position: absolute; top: 39px; background-color: white; width: 100%; color: #555; } div.auto-complete-suggestions option { display: block; } div.auto-complete-suggestions option.selected { display: block; background-color: #1e90ff; color: #fff; } /* --Address Suggestions Dropdown */ /* Calendar datepicker */ div.datetimepicker { width: 25% !important; flex-wrap: nowrap; flex-direction: row; } svg.fa-calendar-days { font-size: 2rem !important; } /* --Calendar datepicker */ /* --Vacation Rentals Registration -- */ /* Breadcrumb */ .breadcrumb { padding: 0.5rem !important; background-color: #455781; border-radius: 7px; } .breadcrumb .active, .breadcrumb-item + .breadcrumb-item::before { color: #848484; } /* Pagination Styles */ .view-pagination { color: white; padding: 0.5rem !important; background-color: #455781; border-radius: 7px; } .day button { background-color: #ffffff !important; color: #000000 !important; } .day.weekend button, .day.disabled button { background-color: #f2f2f2 !important; color: #c0c0c0 !important; } .datepicker-days table thead tr th.prev button, .picker-switch button, .datepicker-days table thead tr th.next button { background-color: #ffffff !important; color: #000000 !important; } .picker-switch button { background-color: #ffffff !important; color: #000000 !important; } div.webchat__upload-button button, .webchat__send-box__button { background-color: transparent !important; } button.webchat__suggested-action { background-color: white !important; border-color: green !important; } button.react-film__flipper { background-color: white !important; } .crmEntityFormView .cell.checkbox-cell div.info { /* max-width: 85% !important; */ word-wrap: break-word; } .crmEntityFormView .cell.checkbox-cell div.info { display: unset; } .crmEntityFormView .cell.checkbox-cell div.control { clear: none; display: flex; align-items: flex-start; } .submit-form-btn { display: flex; padding: 8px 18px; justify-content: center; align-items: center; gap: 10px; border-radius: 3px; border: 0px; } /* START Custom File Upload */ .file-cell { padding: 0px !important; } .file-cell .custom-upload-box { max-width: 100%; border: 2px dashed #85a3b2; border-radius: 26px !important; background: #f9fafb; position: relative; /* text-align: center; */ transition: border-color 0.3s ease-in-out; margin: auto; padding-top: 24px !important; padding-left: 24px !important; padding-right: 24px !important; padding-bottom: 0px !important; } .file-cell .custom-upload-box .upload-content { align-items: unset !important; } .file-cell .custom-upload-box:hover { border-color: #5e8690; } .file-cell .custom-upload-icon { font-size: 2.5rem; color: #5e8690; } .file-cell .custom-upload-text { color: #7c2b52; font-size: 18px; font-weight: 700 !important; margin-bottom: -15px; } .file-cell .custom-upload-subtext { color: black; font-size: 16px; font-weight: 400; } .file-cell .custom-upload-button { background-color: #4f7a96; color: #fff; border: none; padding: 10px 15px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease-in-out; } .file-cell .custom-upload-button:hover { background-color: #4a6f75; transform: translateY(-1px); } .file-cell input[type="file"] { display: none; } #file-list-upload { list-style: none; padding: 0px; } #file-list-upload li { display: flow-root; border-bottom-style: solid; border-bottom-width: 1px; font-size: 12px; margin-top: 5px; margin-bottom: 5px; height: 50px; border-radius: 2px; /* margin-left: 5px; */ /* margin-right: 5px; */ padding-left: 5px; padding-right: 5px; } .remove-btn-container span { cursor: pointer; font-size: 18px; } #pagination span { border-style: solid; border-width: 1px; width: 20px; display: inline-table; padding-right: 6px; padding-left: 6px; border-radius: 4px; margin-right: 4px; cursor: pointer; } .file-preview img { max-width: 46px; max-height: 46px; margin-right: 10px; border-style: solid; border-width: 1px; border-radius: 4px; } .file-preview { float: left; } .file-preview, .remove-btn-container { display: flex; align-items: self-end; height: 48px; } .remove-btn-container { float: right; } #fileCount { /* padding-bottom:5px; */ font-size: 10px; } #fileCount span { float: right; } .hover-preview { display: none; position: absolute; bottom: 20%; left: 50%; margin-left: 10px; border: 1px solid #ccc; background-color: white; z-index: 10; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); transform: translateX(-50%); } .file-preview img:hover ~ .hover-preview { display: block; } .hover-preview img { max-width: 300px; max-height: 300px; margin: 0px; } img.file-icon { border: 0px; } .file-name-mobile { display: none; } /* END Custom File Upload */ @media (max-width: 1200px) { div.datetimepicker { width: 35% !important; } } @media (max-width: 992px) { div.datetimepicker { width: 50% !important; } } @media (max-width: 500px) { div.datetimepicker { width: 100% !important; } } @media (max-width: 300px) { div.datetimepicker { width: 100% !important; } .bootstrap-datetimepicker-widget.dropdown-menu { width: 100%; } } /* Nina addition - noticed modals open with mobile layout so mobile header flashes for a moment and mobile footer persists */ /* Nina moving mobile-header styles from header web template to main style.css */ /* fix the double close X appearance */ .modal-header .btn-close span { display: none; } /* --- Mobile header layout --- */ #header__mobile .mobile-header { display: flex; padding: 22px 17px 18px 17px; flex-direction: column; align-items: center; gap: 12px; align-self: stretch; background: #00000057; z-index: 11; } #header__mobile { z-index: 11 !important; } #header__mobile .mobile-header__logo img { min-height: 94px; /* padding:10px; */ display: block; width: 100%; max-width: 400px; height: auto; } /* --- Search wrapper --- */ #header__mobile .mobile-search-wrap { position: relative; flex: 1 0 0; min-width: 0; width: 100%; margin-top: 0.5rem; max-width: none; } /* --- White pill style search input box--- */ #header__mobile .search-pill { position: relative; display: flex; align-items: center; gap: 8px; height: 40px; padding: 8px 16px; border: 1px solid #868e96; border-radius: 25px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .search-pill .search-group { width: 100%; } #header__mobile .search-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important; cursor: default; } #header__mobile .search-icon-btn img, #header__mobile .search-icon-btn svg { display: block; width: 20px; height: 20px; } /* toggle magnifier to X */ #header__mobile .icon-mag { display: block; } #header__mobile .icon-x { display: none; } #header__mobile .search-pill.typing .icon-mag { display: none; } #header__mobile .search-pill.typing .icon-x { display: block; } #header__mobile .search-pill.typing .search-icon-btn { cursor: pointer; } /* input inside pill */ #header__mobile .mobile-search__input { -webkit-appearance: none; appearance: none; flex: 1 1 auto; height: 40px; margin-left: 5px; padding: 0; background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; color: #111827; font: 400 14px/20px Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; } #header__mobile .mobile-search__input::placeholder { color: #adb5bd; } /* --- Dropdown panel --- */ #header__mobile .mobile-search-wrap .output__panel { position: absolute; top: calc(100% + 8px); left: 0; width: 100%; display: none; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); overflow: hidden; z-index: 5; } /* list drives the height */ #header__mobile .mobile-search__suggestions { margin: 0; padding: 0; list-style: none; max-height: 60vh; overflow-y: auto; } /* row look */ #header__mobile .mobile-search__list-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #fff; border-bottom: 1px solid #f1f5f9; } #header__mobile .mobile-search__list-item:last-child { border-bottom: 0; } #header__mobile .mobile-search__list-item:hover { background: #f8fafc; cursor: pointer; } #header__mobile .mobile-search__suggestions .search-item__name { font-weight: 800; color: #111827; } #header__mobile .mobile-search__suggestions .search-item__blurb { font-size: 12px; color: #6b7280; } .mobile-header__logo { display: block; text-align: center; } .mobile-search-wrap { width: 100%; max-width: 300px; } /* END mobile header css from header template */ /* body.modal-open .mobile-footer{ display: none !important; } */