/* ========================================================================== tdsbs.css -- DogShow.com Bootstrap-compatible responsive layer Prefix : tdsbs- Requires: tds.css (loaded first), Bootstrap 5 CSS Usage ----- 1. In , after tds.css and Bootstrap 5: 2. Wrap any upgraded section in .tdsbs-wrap:
...
3. HTML structure inside each event row: ← block-level link
← flex container + chevron anchor
← column manager
...
...
...
›
← absolute, tablet/mobile only
========================================================================== */ /* ========================================================================== SHARED ACTION BUTTON ========================================================================== */ .tdsbs-btn-action { background: #ffffff; border: 2px solid #006699; color: #006699; font-size: 14px; font-weight: bold; padding: 7px 22px; border-radius: 1.5em; cursor: pointer; font-family: Arial, Helvetica, sans-serif; white-space: nowrap; flex-shrink: 0; display: inline-block; text-align: center; text-decoration: none; } .tdsbs-btn-action:hover { background: #e8f0f6; } .tdsbs-btn-action:active { background: #d0e4f0; } .tdsbs-btn-action:disabled, .tdsbs-btn-action[disabled] { opacity: 0.5; cursor: default; } /* ========================================================================== SEARCH / FILTER BAR ========================================================================== */ .tdsbs-filter { background: #f6f2e4; border-bottom: 3px solid #d7d6c7; padding: 12px 20px; box-sizing: border-box; } .tdsbs-filter-row { display: flex; gap: 10px; align-items: center; } .tdsbs-search-input { flex: 1; font-size: 14px; font-family: Arial, Helvetica, sans-serif; padding: 7px 10px; border: 1px solid #d7d6c7; color: #333333; background: #ffffff; min-width: 0; box-sizing: border-box; } .tdsbs-search-input:focus { outline: 1px solid #006699; } /* Date dropdowns that sit beside the search box on the IFrameResultList filter row (Month + Year). Visually consistent with the search input, non-shrinking so they stay readable when the search input grows. */ .tdsbs-filter-select { font-size: 14px; font-family: Arial, Helvetica, sans-serif; padding: 7px 10px; border: 1px solid #d7d6c7; color: #333333; background: #ffffff; box-sizing: border-box; flex-shrink: 0; cursor: pointer; } .tdsbs-filter-select:focus { outline: 1px solid #006699; } /* Filter row stacking on narrow screens. The four-item filter row used by IFrameResultList (search + month + year + button) clips the search input down to a few characters around the ~600px mark. Force the search onto its own line so it stays full-width and usable; the dropdowns and button form a second line. Scoped with :has() so the simpler IFrameEventList filter (search + button only) is unaffected. */ @media (max-width: 600px) { .tdsbs-filter-row:has(.tdsbs-filter-select) { flex-wrap: wrap; } .tdsbs-filter-row:has(.tdsbs-filter-select) .tdsbs-search-input { flex: 1 1 100%; } } /* ========================================================================== RESPONSIVE IFRAME ========================================================================== */ .tdsbs-iframe { display: block; width: 100%; border: 0; } /* ========================================================================== ROW CHEVRON Anchored to tdsbs-event-row via position:absolute. Hidden on desktop, shown on tablet/mobile. ========================================================================== */ .tdsbs-chevron { display: none; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #bbbbbb; font-size: 20px; line-height: 1; pointer-events: none; } /* ========================================================================== LOAD MORE (mobile only) ========================================================================== */ .tdsbs-load-more { display: none; padding: 16px 20px; text-align: center; border-top: 1px solid #d7d6c7; box-sizing: border-box; } /* IFrameResultList and IFrameEventList both replace pagination with Load More entirely (no longer mobile-only), so the wrapper must show at every breakpoint when it sits beside either list. */ #ifrResultList ~ .tdsbs-load-more, #ifrEventList ~ .tdsbs-load-more { display: block; } .tdsbs-load-more-btn { background: #ffffff; border: 2px solid #006699; color: #006699; font-size: 14px; font-weight: bold; padding: 9px 32px; border-radius: 1.5em; cursor: pointer; font-family: Arial, Helvetica, sans-serif; width: 100%; max-width: 280px; display: inline-block; } .tdsbs-load-more-btn:hover { background: #e8f0f6; } .tdsbs-load-more-btn:disabled, .tdsbs-load-more-btn[disabled] { opacity: 0.5; cursor: default; } .tdsbs-load-more-count { font-size: 12px; color: #666666; margin-top: 8px; } /* ========================================================================== LAYOUT OVERRIDES (scoped under .tdsbs-wrap) KEY DESIGN DECISION ------------------- The tag (eventListingsEvent) is a plain display:block link. All flex layout lives inside tdsbs-event-row, which is a div child of the . This avoids the "flex on an inline element" browser quirks that caused the broken desktop layout. ========================================================================== */ /* Content area -- force-override the legacy 980px fixed width. Padding is intentionally NOT set here; each page-specific class (e.g. .tdsbs-contact-page, .tdsbs-detail-page) owns its own horizontal padding so it can stay aligned with the title strip. */ .tdsbs-wrap .mainContent { width: 100% !important; max-width: 100% !important; } .tdsbs-wrap .mainContainer { padding: 0 !important; } /* Listings holder -- must be block so percentage widths resolve correctly */ .tdsbs-wrap .eventsListingsHolder { display: block !important; float: none !important; width: 100% !important; margin: 0 !important; } /* Event row link -- plain block, full width, no flex here */ .tdsbs-wrap .eventListingsEvent { display: block !important; float: none !important; width: 100% !important; box-sizing: border-box; text-decoration: none; color: inherit; } .tdsbs-wrap .eventListingsEvent:hover { filter: brightness(0.97); } /* tdsbs-event-row -- the actual flex container for each row. position:relative anchors the absolute chevron. */ .tdsbs-event-row { display: flex; width: 100%; box-sizing: border-box; position: relative; } /* tdsbs-col-main -- manages column layout inside the flex row. flex:1 fills all available width (chevron is absolute, out of flow). */ .tdsbs-col-main { display: flex; flex: 1; flex-direction: row; min-width: 0; } /* Remove float and inline-block set by tds.css on inner columns */ .tdsbs-wrap .eventListingsEventDetails, .tdsbs-wrap .eventListingsEventInfo, .tdsbs-wrap .eventListingsEventType { float: none !important; display: block !important; margin: 0 !important; } /* DESKTOP column widths */ .tdsbs-wrap .eventListingsEventDetails { width: 36% !important; padding: 0 20px !important; } .tdsbs-wrap .eventListingsEventInfo { flex: 1 !important; width: auto !important; padding: 0 !important; } .tdsbs-wrap .eventListingsEventType { width: 160px !important; flex-shrink: 0; padding: 0 12px 0 0 !important; } /* IFrameResultList variant: rows render the localized category name inline next to the colored chip (via the tdsbs-cat-label span), so the column needs more horizontal room than the icon-only EventList variant. Tablet/mobile widths are released in the breakpoint sections below to match the rest of the responsive behaviour. */ #ifrResultList .eventListingsEventType { width: 200px !important; } .tdsbs-cat-label { font-size: 13px; line-height: 1.2; color: #333333; margin-left: 6px; align-self: center; } /* Club name -- first in the details paragraph gets link colour. tds.css sets p colour to #333333 which overrides the outer colour, so we restore the link blue explicitly for the club name only. */ .tdsbs-wrap .eventListingsEventDetails p strong:first-of-type { color: #006699; } /* Fix float/inline on icon list -- also clear Bootstrap's default ul padding-left */ .tdsbs-wrap .eventListingsEventType ul { float: none !important; display: flex !important; flex-wrap: wrap; width: auto !important; gap: 6px; margin: 0 0 4px !important; padding: 0 !important; list-style: none; } .tdsbs-wrap .eventListingsEventType li { float: none !important; display: flex !important; width: auto !important; margin: 0 !important; padding: 0 !important; } /* Registering body -- hidden on desktop and tablet where icon tooltips provide the same info on hover. Shown on mobile where tooltips are unavailable and the stacked layout has room for it. */ .tdsbs-wrap .eventListingsEventType small { display: none; } /* Pagination container */ .tdsbs-wrap .eventListingsPaging { float: none !important; width: 100% !important; box-sizing: border-box; } /* ========================================================================== TABLET (481px to 768px) col-main wraps into two rows: Row 1 : eventListingsEventDetails (100%) Row 2 : eventListingsEventInfo (flex:1) + eventListingsEventType (auto) Chevron shown, absolutely positioned right. ========================================================================== */ @media (max-width: 768px) { /* Remove tds.css vertical padding from the link -- col-main handles it */ .tdsbs-wrap .eventListingsEvent { padding: 0 !important; } /* col-main: two-row wrapping layout, right pad clears the chevron */ .tdsbs-col-main { flex-direction: row; flex-wrap: wrap; padding: 12px 44px 12px 20px; } /* Details: full width row 1 */ .tdsbs-wrap .eventListingsEventDetails { width: 100% !important; padding: 0 0 8px !important; } /* Info and icons: side by side on row 2 */ .tdsbs-wrap .eventListingsEventInfo { flex: 1 !important; width: auto !important; padding: 0 16px 0 0 !important; } .tdsbs-wrap .eventListingsEventType { width: auto !important; flex-shrink: 0; padding: 0 !important; } /* Match the auto width on the result-list variant (overrides edit 2's 200px which would otherwise win on specificity). */ #ifrResultList .eventListingsEventType { width: auto !important; } .tdsbs-chevron { display: block; } } /* ========================================================================== MOBILE (480px and below) col-main stacks everything into a single column. Pagination replaced by Load More. ========================================================================== */ @media (max-width: 480px) { .tdsbs-col-main { flex-direction: column !important; flex-wrap: nowrap !important; padding: 14px 44px 14px 16px !important; } .tdsbs-wrap .eventListingsEventDetails { width: 100% !important; padding: 0 0 6px !important; } .tdsbs-wrap .eventListingsEventInfo { flex: none !important; width: 100% !important; padding: 0 0 6px !important; } .tdsbs-wrap .eventListingsEventType { width: 100% !important; padding: 0 !important; } /* Match the full-width stacking on the result-list variant. */ #ifrResultList .eventListingsEventType { width: 100% !important; } .tdsbs-load-more { display: block; } .tdsbs-wrap .eventListingsPaging { display: none !important; } /* Registering body visible on mobile -- tooltips don't work on touch */ .tdsbs-wrap .eventListingsEventType small { display: block; margin-top: 3px; } } /* ========================================================================== EVENT DETAIL PAGE Two layouts share the same Razor file: - MOBILE (<768px): single-column stacked, warm-brown section headings, gradient pill Enter Now, accordion at the bottom that contains Limits, Secretary, Location (with embedded map), Judges, Hotels, Camping, Additional, Related, Results. - DESKTOP (>=768px): cream/beige header bar with "EVENT DETAIL" title and blue back link, 3-column hero (logo / summary / categories), 4-column info row (useful links / secretary / location / map), Bootstrap nav-tabs row. ========================================================================== */ /* Title strip -- cream/beige with orange-brown title left, blue back link right. Used at all breakpoints. */ .tdsbs-detail-title { background: #f6f3eb; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; box-sizing: border-box; } .tdsbs-detail-title h1 { margin: 0; font-size: 22px; color: #c47c2c; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; } .tdsbs-back-link { color: #006699 !important; text-decoration: none; font-weight: normal; font-size: 14px; white-space: nowrap; } .tdsbs-back-link:hover { text-decoration: underline; } /* Page content wrapper -- gives the page comfortable side padding */ .tdsbs-wrap .tdsbs-detail-page { padding: 16px; box-sizing: border-box; } /* 1. Club name -- warm-brown bold heading at the very top */ .tdsbs-club-title { color: #c47c2c; font-size: 20px; font-weight: bold; margin: 0 0 16px; line-height: 1.3; } /* 2. Logo + 3. Held under the rules of -- centred block */ .tdsbs-logo-block { text-align: center; margin: 0 0 20px; } .tdsbs-logo-block img { max-width: 220px; width: auto; height: auto; display: block; margin: 0 auto 10px; } .tdsbs-reg-body { font-size: 13px; margin: 0; line-height: 1.5; color: #333333; } /* Section heading -- the warm-brown headline that introduces each section */ .tdsbs-section { margin-bottom: 18px; } .tdsbs-section-heading { color: #c47c2c; font-size: 17px; font-weight: bold; margin: 0 0 10px; } /* Modifier for the info-block headings: Useful Links, Event Secretary, Location. Used in both the mobile single-column layout and the desktop info row. The colour follows the site-country stylesheet via the --site-primary-bgcolor custom property (red on .com, blue on .ca); if that stylesheet isn't loaded the fallback firebrick still reads as a "sorta red" heading. Compound selector + !important so this beats any pre-existing heading rule in tds.css. */ .tdsbs-section-heading.tdsbs-info-heading, .tdsbs-info-heading { color: var(--site-primary-bgcolor, #b22222) !important; } /* 5–7. Event Information body */ .tdsbs-event-location { margin: 0 0 4px; font-size: 14px; } .tdsbs-event-dates { margin: 0 0 4px; font-size: 14px; } .tdsbs-event-closing { margin: 0 0 14px; font-size: 14px; color: #d9120c; } .tdsbs-detail-disabled { border: 1px solid #d4880a; background: #fff8e6; padding: 10px; margin: 10px 0; border-radius: 4px; } .tdsbs-detail-disabled p { font-size: 13px; margin: 0 0 6px; } .tdsbs-detail-disabled p:last-child { margin: 0; } /* 8. Enter Now -- yellow → orange gradient pill button, full-width */ .tdsbs-btn-enter { display: block; width: 100%; box-sizing: border-box; padding: 13px 24px; font-size: 16px; font-weight: bold; text-align: center; text-decoration: none; color: #ffffff !important; background: linear-gradient(to bottom, #f5b840 0%, #e89211 100%); border: 1px solid #c97f0c; border-radius: 30px; cursor: pointer; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); margin-top: 6px; font-family: Arial, Helvetica, sans-serif; } .tdsbs-btn-enter:hover { filter: brightness(1.04); color: #ffffff; } .tdsbs-btn-enter:active { filter: brightness(0.94); } /* 11. Categories list -- coloured square icon + label */ .tdsbs-categories { list-style: none; padding: 0 !important; margin: 0; } .tdsbs-categories li { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 14px; } /* 13. Useful links -- icon bullets (use existing tds.css .bullet* classes) */ .tdsbs-useful-links { list-style: none; padding: 0 !important; margin: 0; } .tdsbs-useful-links li { padding-left: 22px; background-position: 0 50% !important; background-repeat: no-repeat !important; margin-bottom: 8px; font-size: 14px; line-height: 1.4; } .tdsbs-useful-links li a { color: #006699; text-decoration: none; font-weight: bold; } .tdsbs-useful-links li a:hover { text-decoration: underline; } /* 15. Accordion (Bootstrap default chevron, restyled to match the page) */ .tdsbs-detail-tabs { margin-top: 6px; } .tdsbs-detail-tabs .accordion-item { border-radius: 0; } .tdsbs-detail-tabs .accordion-item:first-of-type { border-top-left-radius: 4px; border-top-right-radius: 4px; } .tdsbs-detail-tabs .accordion-item:last-of-type { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .tdsbs-detail-tabs .accordion-button { font-weight: 600; color: #333333; background: #ffffff; font-size: 14px; padding: 12px 16px; } .tdsbs-detail-tabs .accordion-button:not(.collapsed) { background: #f6f3eb; color: #333333; box-shadow: none; } .tdsbs-detail-tabs .accordion-button:focus { box-shadow: none; border-color: #d7d6c7; } .tdsbs-detail-tabs .accordion-body { font-size: 14px; padding: 14px 16px; } .tdsbs-detail-tabs .accordion-body p:last-child { margin-bottom: 0; } /* Embedded map inside Location accordion item */ .tdsbs-detail-map-iframe { width: 100%; height: 220px; border: 0; display: block; margin-top: 10px; } /* Limits tables */ .tdsbs-detail-limits-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 13px; } .tdsbs-detail-limits-table td { padding: 4px 8px; border-bottom: 1px solid #f0f0f0; } /* ========================================================================== ENTER NOW CONFIRMATION PANEL (inline collapsible) When Model.WarnOnRedirect is true on the event detail page, the Enter Now button toggles a Bootstrap collapse element below it rather than opening a modal. The panel contains the redirect-partner warning copy plus Cancel and Continue buttons, all in normal document flow so the iframe auto-resizer can grow the iframe naturally. No position:fixed and therefore no positioning issues inside the auto-sized iframe. ========================================================================== */ .tdsbs-enter-now-confirm { margin-top: 14px; } .tdsbs-enter-now-confirm-inner { padding: 16px 18px; background: rgba(213, 126, 31, 0.07); border-left: 3px solid #d57e1f; border-radius: 8px; color: #5a4520; font-size: 14.5px; line-height: 1.55; } .tdsbs-enter-now-confirm-inner p { margin: 0 0 8px; } .tdsbs-enter-now-confirm-inner p:last-of-type { margin-bottom: 0; } .tdsbs-enter-now-confirm-inner strong { color: #4a3a1a; } .tdsbs-enter-now-confirm-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .tdsbs-enter-now-confirm-actions .btn { min-width: 110px; } /* ========================================================================== DESKTOP LAYOUT (>=768px) -- hero, info row, tabs (matches Image 2) ========================================================================== */ @media (min-width: 768px) { .tdsbs-wrap .tdsbs-detail-page { padding: 0; } /* ---- HERO ---- */ .tdsbs-detail-hero { display: grid; grid-template-columns: 180px 1fr 220px; gap: 32px; padding: 28px 32px; align-items: start; } /* Left column: logo + reg-body subtitle */ .tdsbs-detail-hero-logo { text-align: center; } .tdsbs-detail-hero-logo img { max-width: 170px; width: auto; height: auto; display: block; margin: 0 auto 10px; } .tdsbs-detail-hero-logo .tdsbs-reg-body { font-size: 12px; line-height: 1.4; margin: 0; color: #333; } /* Middle column: title, dates, location, closing, enter button */ .tdsbs-detail-hero-summary .tdsbs-club-title { color: #c47c2c; font-size: 22px; font-weight: bold; margin: 0 0 12px; line-height: 1.3; } .tdsbs-detail-hero-summary .tdsbs-event-dates { margin: 0 0 4px; font-size: 15px; color: #000; } .tdsbs-detail-hero-summary .tdsbs-event-location { margin: 0 0 4px; font-size: 15px; color: #666; } .tdsbs-detail-hero-summary .tdsbs-event-closing { margin: 0 0 18px; font-size: 15px; color: #d9120c; } /* Enter Now is pill-shaped but NOT full-width on desktop */ .tdsbs-detail-hero-summary .tdsbs-btn-enter { display: inline-block; width: auto; min-width: 240px; font-size: 17px; padding: 12px 36px; } /* Right column: Event Types heading + categories list */ .tdsbs-detail-hero-cats .tdsbs-section-heading { margin: 0 0 10px; } .tdsbs-detail-hero-cats .tdsbs-categories li { font-size: 14px; } /* ---- Horizontal separators between hero / info / tabs ---- */ .tdsbs-detail-sep { border: 0; border-top: 1px solid #e2e0d8; margin: 0 32px; } /* ---- INFO ROW: Useful Links | Secretary | Location | Map ---- */ .tdsbs-detail-info-row { display: grid; grid-template-columns: 1fr 1.1fr 1.1fr 220px; gap: 28px; padding: 24px 32px; align-items: start; } .tdsbs-detail-info-row > div p { font-size: 14px; margin: 0 0 4px; line-height: 1.5; color: #333; } .tdsbs-detail-info-row > div p strong:first-child { color: #000; } .tdsbs-detail-info-row .tdsbs-section-heading { font-size: 16px; margin: 0 0 10px; } /* The map column shrinks to fit its iframe */ .tdsbs-detail-info-map .tdsbs-detail-map-iframe { width: 100%; height: 200px; border: 1px solid #ddd; border-radius: 2px; } /* ---- TABS (Bootstrap nav-tabs, restyled to match Image 2) ---- */ .tdsbs-detail-nav-tabs { border-bottom: 1px solid #d4d2c5; padding: 0 32px; margin: 0; background: #ebe7d8; flex-wrap: wrap; } .tdsbs-detail-nav-tabs .nav-item { margin-bottom: -1px; } .tdsbs-detail-nav-tabs .nav-link { color: #006699; font-weight: normal; font-size: 15px; padding: 12px 22px; background: transparent; border: 0; border-radius: 0; white-space: nowrap; } .tdsbs-detail-nav-tabs .nav-link:hover { color: #00547a; background: #f1ede0; } .tdsbs-detail-nav-tabs .nav-link.active { color: #006699; font-weight: bold; background: #ffffff; border: 1px solid #d4d2c5; border-bottom: 1px solid #ffffff; border-radius: 2px 2px 0 0; } .tdsbs-detail-tab-content { padding: 24px 32px; background: #ffffff; font-size: 14px; color: #333; } .tdsbs-detail-tab-content .tab-pane p { margin: 0 0 12px; } .tdsbs-detail-tab-content .tab-pane p:last-child { margin-bottom: 0; } } /* Wider desktop: cap the page width for readability on huge monitors */ @media (min-width: 1200px) { .tdsbs-wrap .tdsbs-detail-page { max-width: 1140px; margin: 0 auto; } } /* ========================================================================== CONTACT EVENT SECRETARY PAGE - Mobile (<768px): single column. Flex `order` puts Contact Details on top so the user sees who they're contacting before composing the message, then the form below. - Desktop (>=768px): row layout. Form occupies the wider left column, Contact Details sits in the narrower right column. Source order in the cshtml is form-first; flex `order` flips them on mobile. ========================================================================== */ .tdsbs-wrap .tdsbs-contact-page { padding: 20px 24px; box-sizing: border-box; } .tdsbs-contact-errors { margin-bottom: 16px; } .tdsbs-contact-grid { display: flex; flex-direction: column; gap: 24px; align-items: stretch; } .tdsbs-contact-details { order: 1; } .tdsbs-contact-form { order: 2; } .tdsbs-contact-details-body p, .tdsbs-contact-details-body { font-size: 14px; line-height: 1.5; margin: 0; } .tdsbs-contact-instructions { font-size: 14px; line-height: 1.5; margin: 0 0 16px; color: #333; } /* Form field layout -- stack labels above inputs, force inputs to 100% width so they all line up cleanly at the left edge regardless of label length. !important beats any fixed-pixel widths the legacy ContactUsInformationControl partial sets on the input elements. */ .tdsbs-contact-form label { display: block; margin: 14px 0 4px; font-size: 14px; font-weight: 600; color: #333; } .tdsbs-contact-form input[type="text"], .tdsbs-contact-form input[type="email"], .tdsbs-contact-form input[type="tel"], .tdsbs-contact-form input[type="number"], .tdsbs-contact-form input[type="password"], .tdsbs-contact-form textarea, .tdsbs-contact-form select { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 8px 10px; margin: 0; border: 1px solid #ccc; border-radius: 3px; font-size: 14px; font-family: inherit; background: #ffffff; } .tdsbs-contact-form input:focus, .tdsbs-contact-form textarea:focus, .tdsbs-contact-form select:focus { outline: none; border-color: #999; } .tdsbs-contact-form textarea { min-height: 100px; resize: vertical; } /* Send Form button. Yellow→orange gradient pill, matches the Enter Now button on the event detail page. Doesn't wrap on narrow screens. */ .tdsbs-wrap .formButtonSendForm { margin: 28px 0 24px; text-align: right; clear: both; } .tdsbs-btn-send { display: inline-block; padding: 10px 32px; font-size: 15px; font-weight: bold; color: #ffffff !important; background: linear-gradient(to bottom, #f5b840 0%, #e89211 100%); border: 1px solid #c97f0c; border-radius: 4px; cursor: pointer; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); white-space: nowrap; font-family: inherit; line-height: 1.4; } .tdsbs-btn-send:hover { filter: brightness(1.04); } .tdsbs-btn-send:active { filter: brightness(0.94); } .tdsbs-btn-send:disabled { opacity: 0.6; cursor: not-allowed; filter: grayscale(0.3); } .tdsbs-required-fields { font-size: 12px; color: #666; margin: 24px 0 0; } .tdsbs-required-fields em { color: #d9120c; font-weight: bold; font-style: normal; margin-right: 2px; } /* Prevent the legacy errorMessage940 fixed-width rule from blowing out the viewport on narrow screens. */ .tdsbs-contact-errors.errorMessage940 { width: auto !important; max-width: 100% !important; box-sizing: border-box; } @media (min-width: 768px) { .tdsbs-wrap .tdsbs-contact-page { padding: 24px; } .tdsbs-contact-grid { flex-direction: row; gap: 40px; align-items: flex-start; } .tdsbs-contact-form { order: 1; flex: 2; min-width: 0; } .tdsbs-contact-details { order: 2; flex: 1; min-width: 0; } } @media (min-width: 1200px) { .tdsbs-wrap .tdsbs-contact-page { max-width: 1140px; margin: 0 auto; } } /* ========================================================================== SEARCH CLEAR BUTTON Small × button inside the search input. JS toggles the [hidden] attribute based on whether the input has any value. ========================================================================== */ .tdsbs-search-wrapper { position: relative; flex: 1; min-width: 200px; display: inline-block; } .tdsbs-search-wrapper .tdsbs-search-input { width: 100%; padding-right: 38px; /* room for the clear button */ box-sizing: border-box; } .tdsbs-search-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: none; background: transparent; color: #6c757d; cursor: pointer; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease; } .tdsbs-search-clear[hidden] { display: none !important; } .tdsbs-search-clear:hover { background: rgba(0, 0, 0, 0.07); color: #212529; } .tdsbs-search-clear:focus { outline: 2px solid rgba(0, 102, 204, 0.4); outline-offset: 2px; } /* ========================================================================== FILTER PERIOD GROUP Wraps Month + Year selects on the IFrameResultList filter row so they wrap as a single unit instead of independently. Without this Year falls off onto its own line while Month stays beside the search input. ========================================================================== */ .tdsbs-filter-period { display: flex; gap: 8px; flex-shrink: 0; } .tdsbs-filter-period .tdsbs-filter-select { flex-shrink: 0; }