*,h1,h2,h3,h4,h5,h6{ box-sizing:border-box; margin:0;padding:0; } html{ max-width:100%; height:100%; font-family:Arial,Helvetics,sans-serif; } body { min-height: 100vh; overflow-x: auto; overflow-y: auto; font-family:Arial,Helvetics,sans-serif; } li{ list-style-type:none; } li.mainpage{ list-style-type:disc; font-weight: 500; font-size: 1.2em; } li.mainpageol{ list-style-type:decimal; font-weight: 500; font-size: 1.2em; } li.mainpageol::marker { font-weight: bold; } div{ vertical-align:top; } /* Links and list item hover styles */ a:hover, a:focus, li:hover, li:focus { background-color: #f5f5f5; } h1{font-size:2.6em;} h2{font-size:2em;} h3{font-size:1.8em;} h4{font-size:1.6em;} h5{font-size:1.4em;} h6{font-size:1.2em;} .custom-ibox { border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); padding: 20px; margin: 10px; } .custom-box1 { border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); padding: 20px; margin: 10px; } /* Add dark gray vertical line */ .custom-box1 + .custom-box1 { border-left: 4px solid #333; padding-left: 20px; } a.menuwhite{ text-decoration:none; color:inherit; cursor:pointer; } a { text-decoration:none; color:inherit; cursor:pointer; } a img { text-decoration: none; /* Remove underlines from links */ border: none; /* Remove borders from links */ outline: none; /* Remove outline when clicked (optional) */ /* Add any other CSS styles as needed */ } a.underline{ text-decoration:underline; color:inherit; cursor:pointer; } a.underline:hover { color: rgb(16, 88, 213); } input, label, select, textarea{ display:block; } .custom-tooltip { --bs-tooltip-color: #fbce12; --bs-tooltip-bg: #000; } /* send_client_emails page css */ .text-tooltip { --bs-tooltip-color: #171717 !important; --bs-tooltip-bg: rgb(204, 231, 249) !important; --bs-tooltip-max-width: 300px !important; font-size: 18px; font-weight: 500 !important; } /* tooltip on mailing LIst emails */ .tooltip { --bs-tooltip-color: #18160b; font-weight: bold; /* You can change "bold" to other values like "normal" or a specific font weight (e.g., 400, 700, etc.) */ --bs-tooltip-bg: #f1f1f1; } /* Mailing List only (you already add this class to ) */ body.mailing-list-page .tooltip { --bs-tooltip-max-width: 420px; /* default ~200px */ } /* Let long emails wrap cleanly */ body.mailing-list-page .tooltip .tooltip-inner { white-space: normal; /* allow multi-line */ overflow-wrap: anywhere; /* break long parts if needed */ } /* tooltip on action buttons on Mailing List */ .smallertext-tooltip .tooltip-inner { font-size: 14px; } .smallertext-tooltip { --bs-tooltip-bg: #30447b; --bs-tooltip-color: #fbce12; } img{ max-width:100%; } /* Light background for open accordion content Family List Specific */ .accordion-item.show .accordion-body { background-color: #ffffff; border: 0px solid #000000; padding: 1rem; } /* Highlight the entire open accordion item */ .accordion-item.show { background-color: #ffffff; border: 2px solid #616161; border-radius: 0.25rem; } /* Slightly dim collapsed buttons when another item is open */ .accordion-item:not(.show) .accordion-button.collapsed { background-color: #f7f6f6; color: #292929; } /* Default closed header */ .accordion-button.collapsed { background-color: #f1f1f1; /* Light gray background instead of blue */ color: #333; /* Darker text */ font-size: 1rem; /* Adjust font size */ } /* Open header */ .accordion-button:not(.collapsed) { background-color: #d9e4f5; /* Softer blue when open */ color: #111; /* Even darker text for contrast */ font-size: 1.2rem; /* Same font size as closed */ } /* Optional: remove Bootstrap's focus ring color */ .accordion-button:focus { box-shadow: none; } /* add-contact.php styling */ .group-list { max-height: 260px; overflow: auto; border: 1px solid rgba(0,0,0,.125); border-radius: .5rem; padding: .75rem; } .group-col { margin-bottom: .25rem; } .icon-inline { display:inline-flex; align-items:baseline; gap:.25rem; line-height:1; } /* normalize the SVG’s own baseline quirks */ .icon-inline > .icon-nudge > svg { display:block; } /* header-specific tweak: the droplet rides a pixel high vs the shield */ h1 .icon-inline .icon-baptism { position:relative; top:1px; } /* .icon-nudge { vertical-align:-26px; } */ /* familyList Styling*/ .fam-thumb { display:inline-block; object-fit:cover; border-radius:4px; margin-right:8px; vertical-align:middle; } .fam-thumb--spacer { background: transparent; } .accordion-header .position-absolute { right: 1.75rem; } /* Stop double borders from stacking on each item */ .accordion-item { border: 0 !important; /* kill Bootstrap’s item border */ overflow: hidden; /* clip any inner shadow so it doesn't bleed */ } /* Headers: no extra outer border, just a separator when collapsed */ .accordion-button { border: 0; box-shadow: none !important; } .accordion-button.collapsed { background-color: #f1f1f1; border-bottom: 1px solid #e5e5e5; /* single separator line */ } /* “Open” state: use inset highlight instead of an outer border (won’t stack) */ .accordion-item.show { background-color: #ffffff; box-shadow: 0 0 0 2px #616161 inset; /* replaces your 2px outer border */ border-radius: .25rem; } /* If you want side rails, give them to the container once, not each row */ .accordion { border-left: 2px solid #e5e5e5; border-right: 2px solid #e5e5e5; } /* Optional: dim closed headers slightly (keeps your intent) */ .accordion-item:not(.show) .accordion-button.collapsed { background-color: #f7f6f6; color: #292929; } .statustext{ text-decoration:none !important; color: #000 !important; cursor:pointer; } .ql{ width:100%; } .ql:hover{ box-shadow:0 0 0.75em rgb(188, 188, 188); } /* Floating, stackable alerts without breaking Bootstrap’s internals */ .custom-alert { position: fixed; top: 1rem; right: 1rem; z-index: 1080; /* over nav */ min-width: 320px; max-width: 560px; pointer-events: auto; /* allow clicking the X */ } /* Make room for the close button like Bootstrap expects */ .custom-alert.alert-dismissible { padding-right: 3.5rem; } /* Stack multiple messages nicely */ .custom-alert + .custom-alert { margin-top: .5rem; } .custom-alert.alert-success { background-color: #28a745; border-color: #28a745; color: #fff; } /* background check page styling */ /* Only show pointer/underline when a tooltip exists */ .bgc-name { cursor: default; } .bgc-name.has-tip { cursor: pointer; position: relative; } /* Tooltip bubble (appears above) */ .bgc-name.has-tip:hover::after, .bgc-name.has-tip:focus::after { content: attr(data-tooltip); position: absolute; bottom: 100%; /* above the name */ left: 50%; transform: translate(-50%, -8px); white-space: pre-line; /* respect \n in text */ background: #111; color: #fff; font-size: 0.95rem; /* larger font */ line-height: 1.25; padding: 10px 12px; /* more padding */ border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.25); z-index: 1050; width: 300px; max-width: 420px; text-align: left; pointer-events: none; /* no hover flicker */ } /* Little arrow */ .bgc-name.has-tip:hover::before, .bgc-name.has-tip:focus::before { content: ""; position: absolute; bottom: calc(100% - 2px); left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #111; /* arrow color matches bubble */ z-index: 1051; pointer-events: none; } /* let tooltips escape the responsive scroller */ .table-responsive.bc-table-wrap { overflow: visible !important; } /* keep horizontal scroll on narrow viewports */ @media (max-width: 767.98px) { .table-responsive.bc-table-wrap { overflow-x: auto !important; overflow-y: hidden !important; } } /* ========== end background check styling ============= */ /* ========== start Inventory styling ============= */ /* #req-rows .req-row + .req-row { border-top: 1px solid var(--bs-border-color); } */ /* Modern, cross-browser way to reserve scrollbar space */ :root { scrollbar-gutter: stable; } /* Fallback for older browsers */ @supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } /* Always show vertical scrollbar */ } /* Keep column widths stable */ .inventory-table { table-layout: fixed; } /* Numbers shouldn’t wrap; keeps their columns tidy */ .inventory-table td.text-end, .inventory-table th.text-end { white-space: nowrap; } /* Let flags wrap inside their fixed-width cell without growing the column */ .inventory-table td.flags-cell { white-space: normal; } /* Make badges wrap nicely instead of stretching width */ .inventory-table td.flags-cell .badge { display: inline-block; margin: 2px 4px 2px 0; } /* Ensure action buttons don’t widen the column */ .inventory-table td.actions-cell { white-space: nowrap; } .actions-cell { vertical-align: middle !important; /* ensure the cell aligns center */ text-align: center; /* centers button horizontally */ } .actions-cell .btn { display: inline-block; /* prevents it from stretching full width */ margin: 0 auto; /* optional: centers if weird padding exists */ } /* one scrollbar: the iframe's */ #locManagerModal .modal-content, #catManagerModal .modal-content { overflow: hidden; } #locManagerModal .modal-body, #catManagerModal .modal-body { overflow: hidden; padding: 0; } /* ========== end Inventory styling ============= */ /* ========== Buildings/Areas styling ============= */ .cat-row { cursor: grab; } .cat-row:active { cursor: grabbing; } .bld-thumb { height: 30px; width: auto; object-fit: cover; border-radius: 3px; border: 1px solid rgba(0,0,0,.1); } .bld-thumb--placeholder { display:inline-block; width:40px; height:30px; background:#e9ecef; border:1px dashed #cfd3d7; border-radius:3px; } .popover.building-preview { max-width: 420px; } .popover.building-preview .popover-body { padding: 6px; } .popover.building-preview img { max-width: 400px; max-height: 260px; display:block; } /* Tiny inline thumbnail; keep rows compact */ .bld-thumb{ display:inline-block; width:50px; height:35px; /* fixed tiny size */ object-fit:cover; border-radius:2px; border:1px solid rgba(0,0,0,.1); } /* Floating preview container */ .img-preview{ position:absolute; z-index: 2000; display:none; background:#fff; border:1px solid rgba(0,0,0,.15); box-shadow:0 8px 28px rgba(0,0,0,.28); border-radius:.5rem; padding:.5rem .5rem .4rem .5rem; } .img-preview.pinned .preview-close{ display:block; } .img-preview img{ max-width: 460px; max-height: 360px; display:block; } .img-preview .preview-caption{ margin-top:.35rem; text-align:center; font-size:.875rem; /* small */ color:#6c757d; /* muted */ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:480px; /* keep tidy */ } /* Big, easy close button that appears when pinned (clicked) */ .preview-close{ display:none; /* hidden for hover-only; shown when pinned */ position:absolute; top:-12px; right:-12px; width:36px; height:36px; border:none; border-radius:50%; background:#000; color:#fff; font-size:22px; line-height:36px; text-align:center; cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.25); } .preview-close:focus{ outline: 3px solid #86b7fe; } /* Slight hover cue */ .bld-thumb:hover{ filter:brightness(0.95); } /* ========== end Buildings/Areas styling ============= */ /* Button Text alignment on the Projects & Events Pages */ #projects-table a.btn { display: inline-flex; /* ensures vertical centering */ align-items: center; /* center the text vertically */ line-height: 1.5; /* matches Bootstrap's default */ vertical-align: middle; /* consistent with .btn */ } #events-table a.btn { display: inline-flex; /* ensures vertical centering */ align-items: center; /* center the text vertically */ line-height: 1.5; /* matches Bootstrap's default */ vertical-align: middle; /* consistent with .btn */ } #event-btn { display: inline-flex; /* ensures vertical centering */ align-items: center; /* center the text vertically */ line-height: 1.5; /* matches Bootstrap's default */ vertical-align: middle; /* consistent with .btn */ } /* ========== Events styling ============= */ /* Public View board Top hero banner for event or location */ .hero-wrap { border-radius: .75rem; overflow: hidden; box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.08); } .hero-wrap img.hero-img { width: 100%; height: 240px; object-fit: cover; display: block; } @media (min-width: 992px) { .hero-wrap img.hero-img { height: 240px; } } /* Tiny location thumbnail next to the Place meta */ .meta-thumb { display: inline-flex; align-items: center; margin-left: .5rem; padding: .15rem; border-radius: 10px; border: 1px solid #e9ecef; background: #fff; vertical-align: middle; } .meta-thumb img.place-thumb { width: 160px; height: 110px; object-fit: cover; border-radius: 8px; display: block; } .btn-review .badge { font-size: .72rem; padding: .15rem .45rem; border-radius: 999px; background: #d7f0d1 !important; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); } /* ========== End Events styling ============= */ /* ========== Help/Info Modal styling ============= */ /* Tiny help button that fits anywhere */ .btn-help { --hp-bg: #f8f9fa; --hp-bd: #d9d9dc; --hp-fg: #0d6efd; background: var(--hp-bg); border: 1px solid var(--hp-bd); color: var(--hp-fg); line-height: 1; padding: .25rem .5rem; border-radius: 999px; } .btn-help:hover { background: #fff; } /* Floating help panel (non-modal) */ .help-panel { position: fixed; right: 16px; bottom: 16px; width: min(640px, 92vw); max-height: 80vh; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08); z-index: 1085; /* above most content but below Bootstrap modals (1050–1060); bump if needed */ } /* Header (drag handle) */ .help-head { cursor: move; user-select: none; padding: .6rem .75rem; border-bottom: 1px solid rgba(0,0,0,.06); display: flex; align-items: center; justify-content: space-between; gap: .5rem; } /* Scrollable body */ .help-body { padding: .75rem .9rem; overflow: auto; } /* Footer */ .help-foot { padding: .5rem .75rem; border-top: 1px solid rgba(0,0,0,.06); background: #fafbfc; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } /* Optional: icon sizing/spacing for .btn-help */ .btn-help .help-icon { width: 1em; height: 1em; vertical-align: -0.15em; margin-right: .35rem; } /* Mobile: dock to bottom, full width (but still non-blocking) */ @media (max-width: 576px) { .help-panel { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 78vh; border-radius: 12px; } } /* ========== End Help/Info Modal styling ============= */ /* ========== Missions styling ============= */ /* Make the delete button reliably clickable above the thumbnail anchor */ .thumb-cell { position: relative; } .thumb-delete-form { position: absolute; top: 6px; right: 6px; z-index: 10; /* 👈 key line */ } .thumb-delete-form button { line-height: 1; } /* put with your existing card styles */ .mission-card .card-img-top{ aspect-ratio: 16 / 9; /* or whatever you like */ object-fit: cover; object-position: 50% 35%; /* <-- was 50% 50%; nudged up */ } .mission-card a.stretched-link:focus { outline: none; } .mission-card:focus-within { outline: 2px solid #0d6efd; outline-offset: 2px; /* keyboard focus ring */ } /* Card hover/focus highlight */ .mission-card { position: relative; /* already present if using stretched-link */ cursor: pointer; } .mission-card:hover, .mission-card:focus-within { box-shadow: 0 .45rem 1.25rem rgba(0,0,0,.12); border-color: rgba(13,110,253,.35); /* subtle blue border tint */ background-color: #edf5ff; /* light background lift */ } /* Accessible focus ring without double outlines */ .mission-card a.stretched-link:focus { outline: none; } .mission-card:focus-within { outline: 2px solid #0d6efd; outline-offset: 2px; } /* Respect users who prefer less motion */ @media (prefers-reduced-motion: reduce) { .mission-card, .mission-card .card-img-top { transition: none; } } .bday-chip svg { vertical-align: -2px; } /* Let the icon overflow without changing pill size */ .bday-pill { position: relative; /* anchor for the icon */ display: inline-block; padding: .08rem .6rem .08rem .75rem; /* normal padding; left pad can be small */ border-radius: 999px; background: #fff3cd; color: #664d03; border: 1px solid rgba(0,0,0,.06); white-space: nowrap; line-height: 1.25; /* keep pill height steady */ overflow: visible; /* ensure icon can extend out */ } /* The icon lives outside the pill’s left edge */ .bday-pill .pill-icon { position: absolute; left: -20px; /* how far the SVG sticks out */ top: 50%; transform: translateY(-60%); /* vertical centering */ width: 36px; /* visual icon size */ height: 48px; display: inline-block; pointer-events: none; /* clicks go to the pill */ } .bday-pill .pill-icon svg { width: 100%; height: 100%; overflow: visible; /* allow paths to overhang if needed */ } /* -------- Last Update Pill -------- */ .last-update-pill { display: inline-block; padding: .15rem .55rem; font-size: .75rem; border-radius: 999px; background: #e9ecef; color: #495057; border: 1px solid rgba(0,0,0,.08); } .last-update-pill.recent { background: #d1e7dd; /* greenish highlight */ color: #0f5132; border-color: #badbcc; } .last-update-pill.no-updates { background: #f8f9fa; color: #6c757d; border-style: dashed; opacity: 0.75; } /* ------------------ Update Pill Styles ------------------ */ .update-pill { display: inline-block; padding: .2rem .65rem; font-size: .75rem; border-radius: 999px; font-weight: 600; border: 1px solid transparent; } .update-pill.new { background: #ffebcc; /* bright warm yellow */ color: #7a3900; border-color: #ffc107; } .update-pill.old { background: #e7f1ff; /* soft blue-gray */ color: #084298; border-color: #b6d4fe; } .update-pill.none { background: #f8f9fa; color: #6c757d; border-style: dashed; border-color: rgba(0,0,0,0.2); opacity: 0.75; } /* =============================== LAYOUT A — Two-Column Missionary Page =============================== */ /* Keep everything contained and centered */ .missionary-container { max-width: 1350px; margin: 0 auto; } /* Two-column top region */ .missionary-hero-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; align-items: start; } /* Make the missionary photo big */ .missionary-photo { width: 100%; max-height: 420px; object-fit: cover; border-radius: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.12); } /* Info column (left side) */ .hero-info h1 { font-size: 2.4rem; margin-bottom: .25rem; } .hero-info .org { font-size: 1.1rem; color: #666; margin-bottom: .5rem; } /* Facts chips spacing */ .hero-chips { margin: .6rem 0 1rem 0; } /* Sticky contact box on the right column */ .missionary-contact-sticky { position: sticky; top: 90px; } /* About section not full width */ .section-body-narrow { max-width: 800px; margin-top: 1rem; } /* Updates centered and not crazy wide */ .updates-container { max-width: 900px; margin: 40px auto 0 auto; } /* Divider style */ .section-title { margin-top: 2rem; padding-bottom: .25rem; border-bottom: 2px solid rgba(0,0,0,.1); } /* Better spacing for children/languages */ .section-list { max-width: 750px; } /* Reduce excessive vertical gaps in kiosk mode */ @media (max-width: 900px) { .missionary-hero-grid { grid-template-columns: 1fr; } .missionary-contact-sticky { position: relative; top: 0; } } /* ========== End Missions styling ============= */ /* ========== Contact-UPdate styling ============= */ /* Inputs/selects: keep the darker borders */ #contact-update .form-control, #contact-update .form-select { border-color: var(--uc-input-border, #6f7173); } #contact-update .form-control:hover, #contact-update .form-select:hover { border-color: var(--uc-input-border-focus, #4a4d50); } #contact-update .form-control:focus, #contact-update .form-select:focus { border-color: var(--uc-input-border-focus, #4a4d50); box-shadow: 0 0 0 .2rem var(--uc-focus-ring, rgba(79,83,86,.25)); outline: none; } /* Checkboxes & radios: DO NOT override background universally */ #contact-update .form-check-input { border-color: var(--uc-input-border, #6f7173); } #contact-update .form-check-input:hover { border-color: var(--uc-input-border-focus, #4a4d50); } /* Optional: if you really want a brighter unchecked bg only */ #contact-update .form-check-input:not(:checked) { background-color: #fff; } /* ========== End Contact Update styling ============= */