/* Force blue headings and links in light mode */ html[data-theme='light'] h1, html[data-theme='light'] h2, html[data-theme='light'] h3, html[data-theme='light'] h4, html[data-theme='light'] h5, html[data-theme='light'] h6 { color: #007ac3 !important; } html[data-theme='light'] a, html[data-theme='light'] a:visited { color: #007ac3 !important; } html[data-theme='light'] body, html[data-theme='light'] .search-results-div { background-color: var(--background-color-light, #fff) !important; color: var(--text-color-light, #212529) !important; } /* ============================= lp_styles.css Main stylesheet - imports all modular theme files ============================= */ @import url('./_variables.css'); @import url('./_base.css'); @import url('./_components.css'); @import url('./_exceptions.css'); /* Fallback for users with JS disabled: system theme only. If JS is enabled, the theme is set via data-theme on . */ /* #region Fonts */ @font-face { font-family: Franziska; src: url(/resources/fonts/FranziskaWebPro-DemiboldItalic.eot); src: url(/resources/fonts/FranziskaWebPro-DemiboldItalic.woff) format("woff"), url(/resources/fonts/FranziskaWebPro-DemiboldItalic.ttf) format("truetype"); font-weight: 700; font-style: italic; } @font-face { font-family: Franziska; src: url(/resources/fonts/FranziskaWebPro-Italic.eot); src: url(/resources/fonts/FranziskaWebPro-Italic.woff) format("woff"), url(/resources/fonts/FranziskaWebPro-Italic.ttf) format("truetype"); font-weight: 400; font-style: italic; } @font-face { font-family: Fira-Sans; src: url(/resources/fonts/FiraSans-Regular.eot); src: url(/resources/fonts/FiraSans-Regular.eot#iefix) format("embedded-opentype"), url(/resources/fonts/FiraSans-Regular.woff) format("woff"), url(/resources/fonts/FiraSans-Regular.ttf) format("truetype"); font-weight: 400; font-style: normal; } @font-face { font-family: Fira-Sans; src: url(/resources/fonts/FiraSans-Italic.eot); src: url(/resources/fonts/FiraSans-Italic.eot#iefix) format("embedded-opentype"), url(/resources/fonts/FiraSans-Italic.woff) format("woff"), url(/resources/fonts/FiraSans-Italic.ttf) format("truetype"); font-weight: 400; font-style: italic; } @font-face { font-family: Fira-Sans; src: url(/resources/fonts/FiraSans-Light.eot); src: url(/resources/fonts/FiraSans-Light.eot#iefix) format("embedded-opentype"), url(/resources/fonts/FiraSans-Light.woff) format("woff"), url(/resources/fonts/FiraSans-Light.ttf) format("truetype"); font-weight: 300; font-style: normal; } @font-face { font-family: Fira-Sans; src: url(/resources/fonts/FiraSans-LightItalic.eot); src: url(/resources/fonts/FiraSans-LightItalic.eot#iefix) format("embedded-opentype"), url(/resources/fonts/FiraSans-LightItalic.woff) format("woff"), url(/resources/fonts/FiraSans-LightItalic.ttf) format("truetype"); font-weight: 300; font-style: italic; } @font-face { font-family: Fira-Sans; src: url(/resources/fonts/FiraSans-Medium.eot); src: url(/resources/fonts/FiraSans-Medium.eot#iefix) format("embedded-opentype"), url(/resources/fonts/FiraSans-Medium.woff) format("woff"), url(/resources/fonts/FiraSans-Medium.ttf) format("truetype"); font-weight: 500; font-style: normal; } @font-face { font-family: FontAwesome; src: url(/resources/fonts/fontawesome-webfont.eot?v=4.2.0); src: url(/resources/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0) format("embedded-opentype"), url(/resources/fonts/fontawesome-webfont.woff?v=4.2.0) format("woff"), url(/resources/fonts/fontawesome-webfont.ttf?v=4.2.0) format("truetype"), url(/resources/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular) format("svg"); font-weight: 400; font-style: normal; } /* #endregion Fonts */ :root { --background-color-light: #ffffff; --text-color-light: #333333; --background-color-dark: #333333; --text-color-dark: #ffffff; } /* #region DEFAULT STYLES */ html { font-size: 16px; /* Sets the base font size */ font-family: Fira-Sans; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { font-size: 1rem; margin: 0; background-color: var(--background-color-light); color: var(--text-color-light); } h1 { font-size: 1.75rem; } h2 { font-size: 1.5rem; color: #007ac3; } .site-main blockquote, .site-main h1, .site-main h2, .site-main h3, .site-main h4, .site-main h5, .site-main h6, .site-main ol, .site-main p, .site-main ul { max-width: 768px } .site-main p.full-width { max-width: 1200px } .site-main p.full-width .full-width { width: 100% } .site-main { margin-top: 140px; } #primary h1.page-title, .entry-title { font-weight: 400; font-style: italic; color: #007ac3; margin-bottom: 32px; line-height: inherit } .full-width { width: 100%; } .row:nth-child(2) { /* margin-top: 20px; */ } .navbar, .navbar-collapse { height: 76px !important; } #master-header { background-color: #85bc20; color: #ffffff; height: 72px; /* position: fixed; */ top: 0; left: 0; right: 0; z-index: 1000; /* display: block; */ display: flex; flex-wrap: nowrap; justify-content: space-between; } #product_title { line-height: 60px; } .header-logo { margin-left: 64px; background-image: url("/resources/img/logos/wolters-kluwer-logo-large-dark.png"); width: 334px; } #master-header .logo, .logo { background-image: url("/resources/img/logos/WK_H_Horizontal_RGB_PNG/WK_H_04_Rev_RGB_250_Color.png"); width: 250px; margin-left: 20px; padding-top: 24px; display: block; background-size: 100%; background-repeat: no-repeat; background-position: left center; text-indent: -999999px; } /* #region More Menu Items */ #mode-select { padding: 8px 12px; border: 1px solid #85bc20; border-radius: 4px; background-color: #ffffff; color: #333333; font-size: 1rem; cursor: pointer; transition: background-color 0.3s, border-color 0.3s; } #mode-select:hover { background-color: #f8f9fa; border-color: #a0e226; } #mode-select:focus { outline: none; border-color: #007ac3; box-shadow: 0 0 5px rgba(0, 122, 195, 0.5); } #MoreMenuItems li::before { content: none; padding: 0px 10px; } /* Dropdown button Styles */ /* Container Styles */ .dropdown-container { position: relative; display: inline-block; /* Ensure the container only takes the space it needs */ } /* Button Styles */ .list-btn { background-color: #85bc20; color: white; padding: 6px 6px 6px 10px; border: none; cursor: pointer; height: 100%; } #MoreMenuItems { list-style: none; padding: 0; margin-top: 0px; display: none; /* Hide by default */ position: absolute; background-color: #85bc20; border: #a0e226 solid 1px; border-radius: 0 0 6px 6px; /* Rounded bottom corners */ } /* Button Icon Styles */ .list-btn .bi { margin-right: 5px; font-size: x-large; } .list-btn:hover { background-color: #a0e226; /* Change background color when hovered over */ } .results-section-header { margin-top: 1.5em; margin-bottom: 0.5em; /* font-size: 1.2em; */ font-weight: bold; color: #2a5d9f; } .collapsible-header::before { content: "▶"; display: inline-block; margin-right: 8px; transition: transform 0.2s; } .results-section-content { padding-left: 1em; } .results-section-header.expanded::before { content: "▼"; } /*#region List Styles */ .list-items { list-style: none !important; padding: 0; margin-top: 0px; display: none; position: absolute; top: 100%; right: 0; background-color: #85bc20; border: #a0e226 solid 1px; } .list-item { } .list-items li { list-style: none !important; padding: 10px 20px; border-bottom: 1px solid #85bc20; /* Add a border between list items */ cursor: pointer; white-space: nowrap; } .list-item:last-child { border-bottom: none; /* Remove border from last list item */ } .list-item:hover { background-color: #a0e226; /* Change background color on hover */ } /* Show list items when hovering over the button */ .dropdown-container:hover .list-items { display: block; } #landingPagesList li ul { list-style: none; padding: 0; } #landingPagesList li ul li { position: relative; padding-left: 1.5em; /* Adjust based on icon size */ } li::before { /* content: "\f0da"; */ font-family: "Font Awesome 5 Free"; /* Ensure correct font family */ font-weight: 900; /* Ensure correct font weight */ /* position: absolute; */ /* padding: 0px 10px; */ left: 0; color: #007ac3; /* Icon color */ } /* #landingPagesList li ul li::marker { color: #337ab7; } */ #main { margin-bottom: 40px; } .main-content { position: relative; top: 144px; } .ProductNameRow { margin-top: 1rem; } .content-row { margin-left: -15px; } .intro-text { position: relative; } .search-form { border-radius: 6px; margin-top: 2rem; max-width: 90%; } .input-group { width: 100%; } #searchInput { border-radius: 6px 0 0 6px; /* Rounded corners on the left */ } #clearSearchInputBtn { /* border-radius: 6px 0 0 6px; */ padding: 10px; /* Adjust as needed */ box-sizing: content-box; /* Ensure padding doesn't affect width */ background-color: darkgrey; color: #ffffff; } #searchButton { border-radius: 0 6px 6px 0; padding: 10px; /* Adjust as needed */ box-sizing: content-box; /* Ensure padding doesn't affect width */ } .search-options-btn-wrapper { display: inline-block; width: 42px !important; margin-left: 4px !important; } #searchOptionsBtn { height: 46px !important; } #customSearchOptions { margin: 0px 20px; margin-top: 0px; padding: 10px; border: solid 1px #dee2e6; border-top: none; border-radius: 0px 0px 10px 10px; } .productimagediv { margin-top: 0px !important; } .select-statement { padding-bottom: 10px; } .img-laptop { position: absolute; bottom: 0; right: 0; } .img-rounded { border-radius: 6px; } .announcementCard { border: solid 2px #85bc20 !important; border-radius: 6px; margin-bottom: 20px; } .releaseNotesCard, .messageCard { border: solid 2px #007ac3 !important; border-radius: 6px; margin-bottom: 20px; } .releaseNotesCard .panel-heading, .messageCard .panel-heading { background: #007ac3 !important; color: #fff !important; } .releaseNotesCard .panel-heading .bi, .messageCard .panel-heading .bi, .announcementCard .panel-heading .bi { color: #fff !important; } .releaseNotesCard .panel-heading span.bi { padding-left: 0.6rem; } .announcementCard .panel-heading { background: #85bc20 !important; color: #fff !important; } .panel-heading { border-bottom: 0; font-size: 1.5rem; border-top-left-radius: 4px; border-top-right-radius: 4px; } .panel-heading span.bi { padding-left: 0.6rem; } #gettingStartedSection, #releaseNotesSection, #userGuidesSection, #featureGuidesSection, #releaseCalendarsSection { margin-bottom: 30px; } .panel-body { margin: 20px; } [data-theme="dark"] .releaseNotesCard, [data-theme="dark"] .releaseNotesCard .panel-body, [data-theme="dark"] .messageCard, [data-theme="dark"] .messageCard .panel-body, [data-theme="dark"] .announcementCard, [data-theme="dark"] .announcementCard .panel-body { background: #23272b !important; /* or use your dark surface variable if defined */ color: #fff !important; border-color: #007ac3; } /* Custom dark mode */ body.dark-mode .releaseNotesCard, body.dark-mode .releaseNotesCard .panel-body { background: #23272b !important; color: #fff !important; border-color: #007ac3 !important; } p { font-size: 1rem; } .paraintro { margin: 0 0 20px 0; } ul { margin-top: 15px; margin-left: 30px; /* margin-bottom: 40px !important; */ padding: 0; } ul li { text-indent: -0.6em; padding-bottom: 5px; list-style: disc inside; } .dropdown::before { content: ""; } .tight_list { /* margin-top: -25px !important; */ } ul.no_bullets, ul.tight_list { list-style: none !important; } /* ul.no_bullets li, ul.tight_list li { list-style: none !important; } */ .subtext { font-size: .75em; } .wh_footer { background: #007ac3; background-image: url(/resources/img/logos/Wolters-Kluwer-logo_blu.png); background-repeat: no-repeat; /* background-position: right; */ background-position: calc(100% - 20px) center; margin-bottom: 0px; } .footer-container { height: 100%; padding-right: 50px; } #footer-copyright { font-size: .85rem; text-align: center; color: #ffffff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .centered-vertically { margin: 0; position: relative; top: 50%; transform: translateY(-50%); } /* Search */ /* Add this CSS to your existing stylesheet */ .search-results-div { position: fixed; top: 0; right: 0; bottom: 0; width: 50%; /* Adjust as needed */ padding: 8px; background-color: white; /* Background color of the search results div */ z-index: 9990; /* Ensure the search results div appears above other content */ /* overflow-y: auto; Enable vertical scrolling if content overflows */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Optional: Add box shadow for visual effect */ } .search-results-header { display: flex; justify-content: space-between; /* Align items with space between them */ align-items: center; /* Align items vertically in the center */ background-color: #85bc20; /* Background color for the header */ border-top-left-radius: 10px; border-top-right-radius: 10px; /* padding: 10px; Adjust as needed */ border-bottom: 1px solid #ccc; /* Optional: Add border at the bottom of the header */ height: 4rem; } .search-results-header button { align-self: center; display: flex; align-items: center; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } .search-results-header h2 { text-align: center; /* Align the title text center */ margin: 0; /* Remove any default margin */ flex-grow: 1; /* Allow the title to expand and fill the available space */ color: #ffffff; } /* Force transparent background on open dropdown */ #sortResultsOptions.dropdown-menu, #sortResultsOptions.dropdown-menu.show { transform: translate(0px, 44px); background: transparent !important; border: none !important; box-shadow: none !important; } /* Dropdown items: transparent by default, white on hover */ #sortResultsOptions.dropdown-menu .dropdown-item { background: transparent !important; color: #fff !important; transition: background 0.2s, color 0.2s; } #sortResultsOptions.dropdown-menu .dropdown-item:hover, #sortResultsOptions.dropdown-menu .dropdown-item:focus { background: #fff !important; color: #23272b !important; } .dropdown-divider { margin-bottom: 0px; } .dropdown-header { margin: 0; margin-bottom: 0px; font-size: 18px; color: #333; font-size: 1em; font-weight: bold; background-color: #f8f9fa; padding: 10px; padding-bottom: 2px; border-bottom: 1px solid #ddd; } #sortResultsOptions { width: 240px; } #sortResultsOptions li { text-indent: 0px; padding: 0px; } #sortResultsOptions li::before { content: none; } .lt10-switch, .word-match-switch { margin-left: 1rem; } .close-results-btn, .sortByType, .filterDropdown { color: #ffffff; background: transparent; border-width: 0px; font-size: x-large; padding: .5em; height: 40px; } #highlightmessage { padding-left: 10px; font-size: smaller; border: solid 1px #dee2e6; border-top: none; border-radius: 0px 0px 10px 10px; margin: 0px 10px; text-align: center; } .yellowhighlight { background-color: #ff8; } .search-result { margin-bottom: 20px; } .search-results-container { padding: 10px; /* Adjust padding as needed */ height: calc(100% - 40px); /* Adjust to leave space for the header */ overflow-y: auto; /* Enable scrolling for search results */ } .searchResultTitle { color:#007ac3; font-size: 14pt; text-decoration-color:#007ac3; text-decoration-line: none !important; text-decoration-style: solid; text-decoration-thickness: auto; margin-bottom: auto; } .search-results-div { transition: transform 0.3s ease-out; /* Adjust the duration and timing function as needed */ } .rel-doc-container { background: linear-gradient(to right, #ecf2f9 50%, rgba(236,242,249,0) 90%); width: 100%; } .RelDocTitle { font-family: "Open Sans"; font-size: 12px; font-weight: 400; margin-top: -12px; padding: 0 10px 0 10px; color: #007ac3; display: inline; } #resultNotFound { font-family: 'Open Sans'; font-weight: 400; margin-top: 20px; } #resultsFound { font-family: 'Open Sans'; font-weight: 400; margin-top: 20px; border-bottom:#ccc solid 1px; } #ResultsWaitMsg { font-size: 1.25rem; margin: 30px 30px 0 30px; display: none; } .spinner-border { width: 40px; margin-right: 20px; } .result-details { overflow: hidden; /* Clear floats */ } .rel-doc-container { float: left; /* Float the container to the left */ margin-right: 10px; /* Adjust spacing between elements */ margin-top: 4px; } .stars-container { position: relative; display: inline-block; width: 100px; height: 20px; float: right; margin-right: 10px; cursor: help; } .stars-background { position: absolute; top: 0; left: 0; width: 100%; color: #e0e0e0; } .stars-filled { position: absolute; top: 0; left: 0; white-space: nowrap; overflow: hidden; color: #FFD700; } .stars-background i, .stars-filled i { font-size: 10px; /* margin-right: 2px; */ } /* Ensure the stars stay yellow in dark mode */ /* @media (prefers-color-scheme: dark) { .stars-background { color: #666; } .stars-filled { color: #FFD700; } .releaseNotesCard .panel-heading { background: #23272b !important; color: #fff !important; } } */ body.dark-mode .releaseNotesCard .panel-heading { background: #23272b !important; color: #fff !important; } body.dark-mode .stars-background { color: #666; } body.dark-mode .stars-filled { color: #FFD700; } .hits-info { font-size: 12px; color: #666; text-align: end; margin: -4px 42px 0px; } .searchResultsFooter { background-color: #007ac3; height: 40px; } /* Hidden Results Info */ .hidden-results-info { position: absolute; top: 69px; right: 82px; width: 40%; z-index: 9999; padding: 6px; border: 4px solid #85bc20; /* Green border */ border-radius: 0 0 6px 6px; /* Square top corners, rounded bottom corners */ background-color: #ffffff; /* White background */ } .info-title-row { background-color: #f8f9fa; /* Background color for the title row */ padding: 10px; /* Adjust as needed */ border-bottom: 1px solid #ddd; /* Bottom border for separation */ } .info-title-row h3 { margin: 0; /* Reset margin for the title */ font-size: 18px; /* Adjust font size as needed */ color: #333; /* Text color for the title */ font-size: 1em; font-weight: bold; margin-left: -10px; } .info-content-row { background-color: #ffffff; } .info-content-row-text { font-size: .80rem; text-indent: -1em; /* Indent all lines except the first */ padding-left: 1em; /* Maintain space for the first line */ } #omittingPara, #wholeWordPara { margin-bottom: 0px; } #omittingItems, #wholeWordItems { font-size: .80rem; padding-left: 10px; margin-top: 0px; } /* CSS Tooltip */ .custom-tooltip { position: relative; margin-left: 16px !important; cursor: pointer; font-size: .825rem; } /* Tooltip text */ .custom-tooltip::after { content: attr(aria-label); /* Use aria-label attribute */ visibility: hidden; min-width: 240px; height: auto; /* or min-height: auto; */ font-family: 'Segoe UI', Tahoma, Verdana, sans-serif; font-weight: 400; background-color: #ffffff; color: #000000; text-align: center; border-radius: 6px; border: #85bc20 solid 2px; /* Change border style to solid */ padding: 10px; /* Adjust padding to create space inside the border */ margin: -10px; /* Adjust margin to create space outside the border */ position: absolute; z-index: 1; top: calc(-100% - 20px); /* Adjust the offset */ left: calc(150% + 90px); /* Adjust the offset */ transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; } /* Tooltip text visibility */ .custom-tooltip:hover::after { visibility: visible; opacity: 1; } /*#endregion DEFAULT STYLES */ /* #region SYSTEM PREFERS LIGHT STYLES */ @media (prefers-color-scheme: light) { body { background-color: var(--background-color-light); color: var(--text-color-light); } h2 { color: #007ac3; } body:not(.dark-mode) h2 { color: #007ac3; /* Ensure this overrides */ } a { color: #007ac3; /* Link color for light mode */ } a:hover { color: #005f99; /* Hover color for light mode */ } li::before { content: "\f0da"; /* FontAwesome caret-right icon */ font-family: "Font Awesome 5 Free"; /* Ensure correct font family */ font-weight: 900; /* Ensure correct font weight */ padding: 0px 10px; left: 0; color: #007ac3; /* Icon color */ } } /* #endregion */ /* #region SYSTEM PREFERS DARK STYLES */ @media (prefers-color-scheme: dark) { body, .search-results-div { background-color: var(--background-color-dark); color: var(--text-color-dark); } .entry-title, h2, a { color: var(--text-color-dark); } /* li::before { content: "\f0da"; /* FontAwesome caret-right icon */ font-family: "Font Awesome 5 Free"; /* Ensure correct font family */ font-weight: 900; /* Ensure correct font weight */ padding: 0px 10px; left: 0; color: #ffffff; /* Icon color */ } */ /* Update other styles for Dark Mode */ .form-control { background-color: #d3d3d3; color: var(--text-color-dark); } .form-control:focus { background-color: #7f7f7f; color: var(--text-color-dark); } .yellowhighlight { color: #000000; } .rel-doc-container { background: linear-gradient(to right, #ecf2f9 10%, rgba(236, 242, 249, 0) 90%); width: 100%; } .hits-info { color: #fff; } } /* #endregion */ /* #region CUSTOM LIGHT MODE STYLES */ body.light-mode { background-color: var(--background-color-light); color: var(--text-color-light); } body.light-mode h1, h2, h3, h4, h5, h6 { font-style: normal; font-weight: 400; clear: both; font-style: italic; color: #007ac3; line-height: inherit; } /* body.light-mode h2 { color: #007ac3; } */ body.light-mode a { color: #007ac3; } /* li::before { content: "\f0da"; /* FontAwesome caret-right icon */ font-family: "Font Awesome 5 Free"; /* Ensure correct font family */ font-weight: 900; /* Ensure correct font weight */ padding: 0px 10px; left: 0; color: #007ac3; /* Icon color */ } */ body.light-mode #searchTerm { background-color: #ffffff; /* Set to white */ color: var(--text-color-light); } body.light-mode .hits-info { color: #000 !important; } /* #endregion */ /* #region CUSTOM DARK MODE STYLES */ body.dark-mode { background-color: var(--background-color-dark); color: var(--text-color-dark); } body.dark-mode h1, h2, h3, h4, h5, h6 { color: #ffffff; } body.dark-mode a { color: #ffffff; /* Ensure link color is white in dark mode */ } body.dark-mode .hits-info { color: #fff !important; /* White in custom dark mode */ } body.dark-mode li::marker { background-color: #7f7f7f; /* Set to dark background */ color: #ffffff !important; } body.dark-mode li::before { content: "\f0da"; /* FontAwesome caret-right icon */ font-family: "Font Awesome 5 Free"; /* Ensure correct font family */ font-weight: 900; /* Ensure correct font weight */ padding: 0px 10px; left: 0; color: #ffffff; /* Icon color */ } body.dark-mode #searchTerm { background-color: #7f7f7f; /* Set to dark background */ color: var(--text-color-dark); } /* #endregion */ body.dark-mode .releaseNotesCard .panel-heading { background: #23272b !important; color: #fff !important; } [data-theme="dark"] .releaseNotesCard .panel-heading { background: #23272b !important; color: #fff !important; }