/* * /ml_drug_discovery_repurposing/ ONLY. Generated by tools/port-legacy-page.mjs — do not hand-tune * towards the design system. If this page is ever redesigned it should be * rebuilt from components and this file deleted whole. * * 446 of 7960 rules from the live site, re-scoped under .db-legacy. * That wrapper is what lets legacy CSS and Tailwind share a page: the legacy * reboot rules become `.db-legacy h1`, which outranks preflight inside the * wrapper and is inert everywhere else. * * Hand-worked afterwards by tools/ports/ml_drug_discovery_repurposing.mjs, and * only in these five ways: * 1. `btn`, `container` and `outline` renamed with a `db-` prefix in both * files — they collide with FlyonUI, and `outline` draws a real border. * 2. The two sign-up modals' rules deleted with their markup, which also * removes the only reference to an asset this repo does not have. * 3. The three `.clicked` rules re-added at the bottom — the generator's * probe cannot see a state class no element carries at rest, and those * three ARE the data-package accordion. * 4. Asset URLs pointed at this repo's copies. * 5. The pink, below. */ .db-legacy { /* ------------------------------------------------------------------------ * THE NEW PINK. Aug 2026 — see DESIGN.md, "The Ground-Dependent Pink Rule". * * The live page marks with #FF02AF and darkens to #E2009B (and once, in a * form rule this port deletes, #FF00B8). #FF02AF measures 3.57:1 on white and * fails AA at body size; #D00993 measures 5.07:1. * * The rule is ground-dependent — #D00993 on light grounds, #FF00B4 on dark — * so this was not a blind find-and-replace. Every pink on this page was * checked against the ground actually painted behind it: * * · the "Accelerate" span in the h1, the "Explore Use Cases" outline button * (pink text AND a pink border) and the data-package row hover are all on * white or the pale hero swoosh — light grounds, so #D00993; * · every `.button.dark` is a solid pink fill under white text. Four of the * five sit on white; the fifth, "Download eBook", sits on the navy badge * panel. The Never-Adjacent Rule treats a filled button as a distinct UI * object rather than text on a ground, and that fill wants the * light-ground value in both places anyway: white on #D00993 is 5.07:1, * white on #FF00B4 only 3.57:1. * * So one value covers every case, and `pink-bright` is deliberately absent. * If a dark panel here ever gains pink TEXT it needs #FF00B4 and a new token * — do not reuse --db-mark for it. * * --db-mark-hover is pink-700. At 8.25:1 on white it is the safer darkening, * and it is the same step the other six legacy ports use. * ---------------------------------------------------------------------- */ --db-mark: #d00993; /* pink-500 — the mark on a light ground */ --db-mark-hover: #970669; /* pink-700 — its hover/active darkening */ --blue: #007bff; --indigo: #6610f2; --purple: #6f42c1; --pink: #e83e8c; --red: #dc3545; --orange: #fd7e14; --yellow: #ffc107; --green: #28a745; --teal: #20c997; --cyan: #17a2b8; --white: #fff; --gray: #6c757d; --gray-dark: #343a40; --primary: #007bff; --secondary: #6c757d; --success: #28a745; --info: #17a2b8; --warning: #ffc107; --danger: #dc3545; --light: #f8f9fa; --dark: #343a40; --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --db-white: #FDFDFE; --db-zebra-stripe-grey: #FCFCFC; --db-pink-50: #FAE6F4; --db-pink-100: #F0B3DE; --db-pink-200: #E98ECD; --db-pink-300: #E05AB7; --db-pink-400: #D93AA9; --db-pink-500: #D00993; --db-pink-600: #BD0886; --db-pink-700: #940668; --db-pink-800: #720551; --db-pink-900: #57043E; --db-blue-10: #F7F8FF; --db-blue-50: #EBECF9; --db-blue-100: #C2C5ED; --db-blue-200: #A4A9E5; --db-blue-300: #7A82D9; --db-blue-400: #616AD1; --db-blue-500: #3945C6; --db-blue-600: #343FB4; --db-blue-700: #28318D; --db-blue-800: #1F266D; --db-blue-900: #181D53; --db-dk-blue-10: #F3F5F6; --db-dk-blue-50: #D1D5DB; --db-dk-blue-100: #B2B8C4; --db-dk-blue-200: #8B95A6; --db-dk-blue-300: #647288; --db-dk-blue-400: #3E4E6B; --db-dk-blue-500: #172B4D; --db-dk-blue-600: #132440; --db-dk-blue-700: #0F1D33; --db-dk-blue-800: #0C1627; --db-dk-blue-900: #080E1A; --db-orange-50: #FAF0E8; --db-orange-100: #EED2B8; --db-orange-200: #E6BC96; --db-orange-300: #DB9D66; --db-orange-400: #D48A49; --db-orange-500: #C96D1B; --db-orange-600: #B76319; --db-orange-700: #8F4D13; --db-orange-800: #6F3C0F; --db-orange-900: #542E0B; --db-green-50: #F3F5E6; --db-green-100: #D9DFB1; --db-green-200: #C6D08C; --db-green-300: #ACBA57; --db-green-400: #9CAD36; --db-green-500: #839804; --db-green-600: #778A04; --db-green-700: #5D6C03; --db-green-800: #485402; --db-green-900: #374002; --db-violet-50: #F2EEF6; --db-violet-100: #D5C9E4; --db-violet-200: #C1AFD7; --db-violet-300: #A58AC5; --db-violet-400: #9374B9; --db-violet-500: #7851A8; --db-violet-600: #6D4A99; --db-violet-700: #553A77; --db-violet-800: #422D5C; --db-violet-900: #322247; --db-teal-50: #E7F2F2; --db-teal-100: #B6D5D7; --db-teal-200: #92C1C4; --db-teal-300: #61A5A9; --db-teal-400: #429499; --db-teal-500: #13797F; --db-teal-600: #116E74; --db-teal-700: #0D565A; --db-teal-800: #0A4346; --db-teal-900: #083335; --db-success-50: #E6F3EA; --db-success-100: #B0DBBE; --db-success-200: #8AC99F; --db-success-300: #54B173; --db-success-400: #33A158; --db-success-500: #008A2E; --db-success-600: #007E2A; --db-success-700: #006221; --db-success-800: #004C19; --db-success-900: #003A13; --db-warning-50: #FDE6E8; --db-warning-100: #F8B0B8; --db-warning-200: #F48A96; --db-warning-300: #F05466; --db-warning-400: #ED3348; --db-warning-500: #E8001A; --db-warning-600: #D30018; --db-warning-700: #A50012; --db-warning-800: #80000E; --db-warning-900: #61000B; --swiper-theme-color: #007aff; --swiper-navigation-size: 44px; } /* Legacy CSS stacks freely (z-index 100, 150…). The site header is position:static and creates no stacking context, so without this the page paints over the navbar and its mega-menu opens behind the content. */ .db-legacy { position: relative; z-index: 0; } /* Preflight sets `img { max-width:100%; height:auto; display:block }`. Legacy images carry explicit heights and are meant to overflow their column; the clamp squashes them. */ .db-legacy img { max-width: none; display: inline; vertical-align: middle; } /* Centre button labels rather than trusting font metrics to do it. */ .db-legacy .commercial-page .button, .db-legacy .commercial-page a.button { display: inline-flex; align-items: center; justify-content: center; } .db-legacy {position:relative} .db-legacy .commercial-page {background-color:white} .db-legacy .commercial-page, .db-legacy .commercial-page li, .db-legacy .commercial-page p, .db-legacy .commercial-page a, .db-legacy .commercial-page h1, .db-legacy .commercial-page h2, .db-legacy .commercial-page h3, .db-legacy .commercial-page h4, .db-legacy .commercial-page h5 {font-family:Gemeli, "Helvetica Neue", Helvetica, Arial, sans-serif;text-rendering:optimizelegibility;font-feature-settings:"kern";color:rgb(38, 48, 99)} .db-legacy .commercial-page, .db-legacy .commercial-page li, .db-legacy .commercial-page p, .db-legacy .commercial-page a {font-weight:400} .db-legacy .commercial-page a:hover, .db-legacy .commercial-page a:active, .db-legacy .commercial-page a:focus {color:inherit;text-decoration:none} .db-legacy .commercial-page h1, .db-legacy .commercial-page h2, .db-legacy .commercial-page h3, .db-legacy .commercial-page h4, .db-legacy .commercial-page h5 {font-weight:700} .db-legacy .commercial-page .db-container {padding:0px;margin:0px 20px;width:auto} @media (max-width:479px){.db-legacy .commercial-page .panel {padding-top:35px!important;padding-bottom:35px!important}} @media (max-width:479px){.db-legacy .commercial-page .header-panel {padding-top:35px!important}} @media (min-width:480px){.db-legacy .commercial-page .db-container {min-width:calc(100% - 100px);margin:0px 50px;max-width:412px}} @media (min-width:768px){.db-legacy .commercial-page .db-container {max-width:668px}} @media (min-width:992px){.db-legacy .commercial-page .db-container {max-width:772px;margin:0px 100px;min-width:calc(100% - 200px)}} @media (min-width:1200px){.db-legacy .commercial-page .db-container {max-width:1000px;min-width:0px;margin:0px auto}} .db-legacy .commercial-page .panel {padding-top:75px;padding-bottom:75px;margin-bottom:0px;border-width:medium;border-style:none;border-color:currentcolor;border-image:none;border-radius:0px;overflow-x:hidden;box-shadow:none} .db-legacy .commercial-page .panel .overflow-panel {overflow:hidden} .db-legacy .commercial-page .panel .db-container {display:flex;flex-direction:column;padding:0px} .db-legacy .commercial-page .panel h1, .db-legacy .commercial-page .panel h2, .db-legacy .commercial-page .panel h3, .db-legacy .commercial-page .panel h4, .db-legacy .commercial-page .panel h5 {margin-top:0px;margin-bottom:15px} .db-legacy .commercial-page .panel h1 .pink {color:var(--db-mark);font-weight:100} .db-legacy .commercial-page .panel h1 {font-size:50px;font-weight:normal;line-height:64px} .db-legacy .commercial-page .panel h2 {font-size:40px;font-weight:normal;line-height:48px} .db-legacy .commercial-page .panel h3 {font-size:24px;font-weight:normal;line-height:34px} .db-legacy .commercial-page .panel h4 {font-size:20px;font-weight:normal;line-height:30px} .db-legacy .commercial-page .panel h5 {font-size:18px;font-weight:normal;line-height:24px;text-transform:uppercase} .db-legacy .commercial-page .panel p {font-size:18px;line-height:25px;margin-top:15px;margin-bottom:15px} .db-legacy .commercial-page .panel ul {margin-top:15px;margin-bottom:15px} .db-legacy .commercial-page .panel li {font-size:18px;line-height:30px} .db-legacy .commercial-page .panel li.smaller {font-size:16px;line-height:28px;font-weight:100} .db-legacy .commercial-page .panel .bold {font-weight:bold} @media (max-width:767px){.db-legacy .commercial-page .panel .break-text br {display:none}} .db-legacy .commercial-page .panel .action-buttons {margin-top:20px;margin-left:-15px;margin-right:-15px} .db-legacy .commercial-page .panel .action-buttons .button {vertical-align:top} .db-legacy .commercial-page .panel .action-buttons .button.db-outline {padding:0px} .db-legacy .commercial-page .header-panel {position:relative;padding-top:40px;padding-bottom:0px;transition:padding-top 0.5s} .db-legacy .commercial-page .header-panel h1 {margin-bottom:20px} .db-legacy .commercial-page .header-panel .db-container {padding:60px 0px 30px!important} .db-legacy .commercial-page .centered-panel .db-container {align-items:center;justify-content:center} .db-legacy .commercial-page .centered-panel .db-container p {text-align:center} .db-legacy .commercial-page .centered-panel h2, .db-legacy .commercial-page .centered-panel h3, .db-legacy .commercial-page .centered-panel h4, .db-legacy .commercial-page .centered-panel h5, .db-legacy .commercial-page .centered-panel p {text-align:center;max-width:750px} .db-legacy .commercial-page .centered-panel h2, .db-legacy .commercial-page .centered-panel h3 {margin-bottom:30px} .db-legacy .commercial-page .centered-panel h3:last-child {margin-bottom:0px} .db-legacy .commercial-page .centered-panel h2.larger {font-size:50px;font-weight:normal;line-height:64px} .db-legacy .commercial-page .centered-panel h3 {font-weight:100} .db-legacy .commercial-page .centered-panel .action-buttons {margin-top:0px} .db-legacy .commercial-page .centered-panel a {font-size:18px;line-height:28px;color:rgb(114, 125, 212);font-weight:bold;text-align:center;transition:opacity 0.25s} .db-legacy .commercial-page .centered-panel a:hover, .db-legacy .commercial-page .centered-panel a:active {opacity:0.75} .db-legacy .commercial-page .centered-panel a .drugbank-icon {margin-left:5px;position:relative;top:1px} .db-legacy .commercial-page .centered-panel a .drugbank-icon svg {height:14px;width:14px} @media (max-width:767px){.db-legacy .commercial-page .centered-panel h2, .db-legacy .commercial-page .centered-panel h2.larger {font-size:34px;line-height:44px}} @media (max-width:767px){.db-legacy .commercial-page .centered-panel h3 {font-size:20px;line-height:30px}} @media (max-width:479px){.db-legacy .commercial-page .centered-panel h2, .db-legacy .commercial-page .centered-panel h2.larger {font-size:26px;line-height:36px}} @media (max-width:479px){.db-legacy .commercial-page .centered-panel h3 {font-size:18px;line-height:24px}} .db-legacy .commercial-page .info-panel {padding-top:150px;padding-bottom:150px} .db-legacy .commercial-page .info-panel .db-container {flex-direction:row;align-items:center;justify-content:space-between} .db-legacy .commercial-page .info-panel .db-container>:first-child {padding-right:4%} .db-legacy .commercial-page .info-panel .db-container>:last-child {padding-left:4%} .db-legacy .commercial-page .info-panel .db-container .text-box, .db-legacy .commercial-page .info-panel .db-container .image-box {width:50%} .db-legacy .commercial-page .info-panel .db-container .image-box {text-align:center} .db-legacy .commercial-page .info-panel .db-container img {width:100%;flex-shrink:0} .db-legacy .commercial-page .info-panel p {font-size:20px;line-height:30px;font-weight:normal} @media (max-width:767px){.db-legacy .commercial-page .info-panel {padding-top:75px;padding-bottom:75px;overflow:hidden}} @media (max-width:767px){.db-legacy .commercial-page .info-panel.right-panel .db-container {flex-direction:column}} @media (max-width:767px){.db-legacy .commercial-page .info-panel.right-panel .db-container .text-box, .db-legacy .commercial-page .info-panel.right-panel .db-container .image-box {padding:0px}} @media (max-width:767px){.db-legacy .commercial-page .info-panel.right-panel .db-container .image-box:not(:last-child) {padding:0px 0px 20px}} @media (max-width:767px){.db-legacy .commercial-page .info-panel .db-container .text-box, .db-legacy .commercial-page .info-panel .db-container .image-box {width:100%!important}} @media (max-width:767px){.db-legacy .commercial-page .info-panel h2 {font-size:28px;line-height:38px}} .db-legacy .commercial-page .white-panel {background:white} .db-legacy .commercial-page .light-blue-panel {background:rgba(225, 226, 246, 0.4)} .db-legacy .commercial-page .swoosh-panel {background-image:url("/static/img/commercial/company/Banner_Background.svg");background-position:70px -40px;background-size:auto;background-repeat:no-repeat;padding-bottom:100px} .db-legacy .commercial-page .product-header-panel.left-panel .db-container {flex-direction:row} .db-legacy .commercial-page .product-header-panel.left-panel .header-images {text-align:right} .db-legacy .commercial-page .product-header-panel .db-container {flex-direction:row;justify-content:space-between} .db-legacy .commercial-page .product-header-panel h1 {font-size:20px;line-height:30px;text-transform:uppercase} .db-legacy .commercial-page .product-header-panel p {font-size:20px;line-height:30px} .db-legacy .commercial-page .product-header-panel .header-text {display:flex;flex-direction:column;z-index:110;min-width:480px} .db-legacy .commercial-page .product-header-panel .header-images {position:relative;z-index:100} .db-legacy .commercial-page .product-header-panel .header-images img {position:relative} @media (max-width:991px){.db-legacy .commercial-page .product-header-panel .db-container {flex-direction:column!important;align-items:stretch}} @media (max-width:991px){.db-legacy .commercial-page .product-header-panel .header-text {min-width:auto}} @media (max-width:991px){.db-legacy .commercial-page .product-header-panel.left-panel .header-text {align-self:flex-start;text-align:left}} @media (max-width:767px){.db-legacy .commercial-page .product-header-panel .header-text {max-width:100%}} .db-legacy .commercial-page .large-bottom-margin-panel {padding-top:75px;padding-bottom:150px} @media (max-width:767px){.db-legacy .commercial-page .large-bottom-margin-panel {padding-top:0px;padding-bottom:75px}} @media (max-width:479px){.db-legacy .commercial-page .large-bottom-margin-panel {padding-top:0px!important;padding-bottom:50px!important}} .db-legacy .commercial-page .no-bottom-padding-panel {padding-bottom:0px} .db-legacy .commercial-page .small-padding-panel {padding:50px 0px} .db-legacy .commercial-page .drugbank-icon svg {width:20px;height:20px} .db-legacy .commercial-page .drugbank-icon {display:inline-block} .db-legacy .commercial-page .drugbank-icon svg {display:block;background-color:transparent;fill:currentcolor;vertical-align:middle} .db-legacy .commercial-page .drugbank-icon.icon-dark-blue {color:rgb(38, 48, 99);fill:rgb(38, 48, 99);stroke:rgb(38, 48, 99)} .db-legacy .commercial-page .drugbank-icon.icon-pink {color:var(--db-mark);fill:var(--db-mark);stroke:var(--db-mark)} .db-legacy .commercial-page .drugbank-icon.icon-white {color:white;fill:white;stroke:white} @media (max-width:479px){.db-legacy .commercial-page .carousel-container {margin:0px}} .db-legacy .commercial-page .badge-panel {overflow-x:visible} .db-legacy .commercial-page .badge-panel .db-container {flex-direction:row;align-items:center} .db-legacy .commercial-page .badge-panel .db-container .badge-box {display:flex;justify-content:space-between;align-items:stretch;background-color:white;box-shadow:rgba(34, 55, 121, 0.2) 0px 0px 6px 0px;padding:40px 100px;z-index:10;width:100%} .db-legacy .commercial-page .badge-panel .db-container .badge-box img {height:200px;padding-right:60px} .db-legacy .commercial-page .badge-panel .db-container .badge-box .badge-text {display:flex;flex:1 1 0%;flex-direction:column;justify-content:center;align-items:flex-start} .db-legacy .commercial-page .badge-panel .db-container .badge-box .badge-text h2 {font-size:36px;line-height:44px} .db-legacy .commercial-page .badge-panel .db-container .badge-box .badge-text p {margin-top:0px} .db-legacy .commercial-page .badge-panel .db-container .badge-box .badge-text a {font-size:18px;line-height:25px;margin-top:5px;font-weight:bold} .db-legacy .commercial-page .badge-panel .db-container .badge-box .badge-text a:hover {text-decoration:none} @media (max-width:767px){.db-legacy .commercial-page .badge-panel .db-container .badge-box {flex-direction:column;padding:20px 40px}} @media (max-width:767px){.db-legacy .commercial-page .badge-panel .db-container .badge-box img {height:150px;margin:0px auto;padding-right:0px}} .db-legacy .commercial-page .badge-panel.download-cta-panel {height:auto} .db-legacy .commercial-page .badge-panel.download-cta-panel .db-container {height:auto} @media (min-width:1200px){.db-legacy .commercial-page .badge-panel.download-cta-panel .db-container {max-width:1100px}} .db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box {border-radius:14px;padding:62px;background:url("/static/img/commercial/datasets/CTA_Background_Blue@2x.png") right center / auto 100% no-repeat, linear-gradient(90deg, rgb(22, 31, 68) 0%, rgb(56, 62, 117) 100%)} .db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box .badge-text {max-width:70%} .db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box .badge-text h2 {color:white;font-size:42px;line-height:60px} .db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box .badge-text p {color:white;font-size:25px;line-height:35px;font-weight:100} .db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box .badge-text a {box-shadow:none} .db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box .badge-image {max-width:30%;width:30%;position:relative;bottom:-62px} .db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box .badge-image img {padding:0px;height:430px;position:absolute;right:-110px;bottom:0px} @media (max-width:1199px){.db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box .badge-text {max-width:50%;width:50%}} @media (max-width:1199px){.db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box .badge-text h2 {font-size:25px;line-height:32px}} @media (max-width:1199px){.db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box .badge-text p {font-size:16px;line-height:25px}} @media (max-width:1199px){.db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box .badge-text a {font-size:16px}} @media (max-width:1199px){.db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box .badge-image {width:50%;max-width:50%}} @media (max-width:1199px){.db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box .badge-image img {max-width:422px;width:120%;height:auto;right:-90px}} @media (max-width:991px){.db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box .badge-image {width:50%;max-width:50%}} @media (max-width:991px){.db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box .badge-image img {max-width:420px;height:auto;width:130%;min-width:375px;right:-100px}} @media (max-width:767px){.db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box {background:linear-gradient(90deg, rgb(22, 31, 68) 0%, rgb(56, 62, 117) 100%)}} @media (max-width:767px){.db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box .badge-text {width:100%;max-width:100%}} @media (max-width:767px){.db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box .badge-image {display:none}} @media (max-width:479px){.db-legacy .commercial-page .badge-panel.download-cta-panel .db-container {height:auto;margin:0px!important}} @media (max-width:479px){.db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box {padding:30px 40px;border-radius:0px;background:linear-gradient(90deg, rgb(22, 31, 68) 0%, rgb(56, 62, 117) 100%)}} @media (max-width:479px){.db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box .badge-text {width:100%;max-width:100%}} @media (max-width:479px){.db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box .badge-text h2 {font-size:22px;line-height:30px}} @media (max-width:479px){.db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box .badge-text p {font-size:16px;line-height:22px}} @media (max-width:479px){.db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box .badge-text .action-buttons {width:100%;align-self:center;display:flex;margin-top:0px;justify-content:center}} @media (max-width:479px){.db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box .badge-text .action-buttons a {font-size:14px;line-height:14px;width:100%;max-width:320px}} @media (max-width:479px){.db-legacy .commercial-page .badge-panel.download-cta-panel .badge-box .badge-image {display:none;width:0%}} .db-legacy .commercial-page .badge-panel.download-cta-panel.bottom-half-gradient-panel {height:auto;padding:50px 0px 75px!important} .db-legacy .commercial-page .badge-panel.download-cta-panel.bottom-half-gradient-panel .db-container {height:auto} @media (max-width:767px){.db-legacy .commercial-page .badge-panel.download-cta-panel.bottom-half-gradient-panel {padding:50px 0px!important}} .db-legacy .commercial-page .api-module-blocks {display:flex;flex-wrap:wrap;margin-top:30px;margin-bottom:5px;margin-right:-25px} .db-legacy .commercial-page .api-module-blocks .module-block {display:flex;flex-direction:column;justify-content:center;align-items:center;padding:25px;width:calc(33.33% - 25px);min-width:150px;background-color:white;border-radius:15px;margin-bottom:25px;margin-right:25px;border:1px solid transparent;transition:border-color 0.25s ease-in-out} .db-legacy .commercial-page .api-module-blocks .module-block .module-image {position:relative;display:flex;justify-content:center;align-items:center} .db-legacy .commercial-page .api-module-blocks .module-block .module-text {text-align:center} .db-legacy .commercial-page .api-module-blocks .module-block img {height:45px;width:auto;margin-bottom:15px;opacity:1;transition:opacity 0.25s ease-in-out} .db-legacy .commercial-page .api-module-blocks .module-block p {font-size:14px;line-height:22px;font-weight:100;margin:0px;text-align:center} .db-legacy .commercial-page .api-module-blocks .module-block p {transition:color 0.25s ease-in-out} @media (max-width:767px){.db-legacy .commercial-page .api-module-blocks .module-block {width:calc(50% - 25px)}} @media (max-width:479px){.db-legacy .commercial-page .api-module-blocks {flex-direction:column;align-items:center;margin-right:0px}} @media (max-width:479px){.db-legacy .commercial-page .api-module-blocks .module-block {width:calc(100% - 40px);margin-bottom:20px;margin-right:0px;flex-direction:row;position:relative}} @media (max-width:479px){.db-legacy .commercial-page .api-module-blocks .module-block .module-image {width:50px;position:absolute;left:-25px}} @media (max-width:479px){.db-legacy .commercial-page .api-module-blocks .module-block .module-text {padding-left:15px}} @media (max-width:479px){.db-legacy .commercial-page .api-module-blocks .module-block img {max-width:50px;margin-bottom:0px}} @media (max-width:479px){.db-legacy .commercial-page .api-module-blocks .module-block p {text-align:left}} .db-legacy .commercial-page .blocks-lead-in-panel.no-bottom-padding-panel {padding-top:120px} .db-legacy .commercial-page .blocks-lead-in-panel h2, .db-legacy .commercial-page .blocks-lead-in-panel h4 {max-width:unset} .db-legacy .commercial-page .blocks-lead-in-panel h4 {font-size:24px;line-height:34px} @media (min-width:1200px){.db-legacy .commercial-page .blocks-lead-in-panel .db-container {max-width:1100px}} @media (max-width:767px){.db-legacy .commercial-page .blocks-lead-in-panel {padding-top:85px!important}} @media (max-width:767px){.db-legacy .commercial-page .blocks-lead-in-panel h2.larger {margin-bottom:30px;font-size:34px!important;line-height:44px!important}} @media (max-width:479px){.db-legacy .commercial-page .blocks-lead-in-panel {padding-top:75px!important;padding-bottom:0px!important}} @media (max-width:479px){.db-legacy .commercial-page .blocks-lead-in-panel h2.larger {margin-bottom:20px;font-size:30px!important;line-height:38px!important}} @media (max-width:479px){.db-legacy .commercial-page .blocks-lead-in-panel h4.larger {margin:0px;font-size:20px;line-height:30px}} .db-legacy .commercial-page .blocks-panel {padding:25px 0px!important;background:linear-gradient(rgb(243, 243, 251) 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 100%)!important} .db-legacy .commercial-page .blocks-panel .api-module-blocks {width:100%!important} .db-legacy .commercial-page .blocks-panel .api-module-blocks .module-block {padding:40px 20px;justify-content:flex-start!important} .db-legacy .commercial-page .blocks-panel .api-module-blocks .module-block .module-text p {font-size:18px!important;line-height:28px!important;font-weight:400!important} @media (max-width:767px){.db-legacy .commercial-page .blocks-panel {background:rgb(243, 243, 251)!important}} @media (max-width:767px){.db-legacy .commercial-page .blocks-panel .api-module-blocks {flex-direction:column!important;justify-content:center}} @media (max-width:767px){.db-legacy .commercial-page .blocks-panel .api-module-blocks .module-block {width:calc(100% - 25px)!important;padding:30px!important}} @media (max-width:479px){.db-legacy .commercial-page .blocks-panel .module-block {flex-direction:column!important;padding:30px!important}} @media (max-width:479px){.db-legacy .commercial-page .blocks-panel .module-block .module-image {margin-bottom:20px;left:unset!important;position:relative!important}} @media (max-width:479px){.db-legacy .commercial-page .blocks-panel .module-block p {text-align:center!important}} .db-legacy .commercial-page .card-panel.white-panel .card-container .discover-box {background:linear-gradient(0deg, rgb(178, 183, 234) -500%, rgb(255, 255, 255) 100%) 0% 0% no-repeat padding-box padding-box transparent} @media (max-width:479px){.db-legacy .commercial-page .card-panel .db-container {margin-left:40px;margin-right:40px}} .db-legacy .commercial-page .card-panel .dataset-description {opacity:0;visibility:hidden;position:absolute;transform:translate(0px, 10px);background-color:rgb(250, 250, 254);padding:15px;width:auto;top:60px} .db-legacy .commercial-page .card-panel .dataset-hover-wrapper {border-bottom:1px solid rgb(209, 212, 221);padding:12.5px 0px} @media (min-width:992px){.db-legacy .commercial-page .card-panel .dataset-row:last-child .dataset-hover-wrapper {border-bottom-width:medium;border-bottom-style:none;border-bottom-color:currentcolor}} .db-legacy .commercial-page .card-panel a.dataset-hover {display:flex;align-items:center} .db-legacy .commercial-page .card-panel a.dataset-hover .text {color:rgb(22, 31, 68);font-weight:400;font-size:15px;line-height:normal;text-align:left;margin-right:18px;white-space:nowrap} .db-legacy .commercial-page .card-panel a.dataset-hover .icon-dropdown-closed, .db-legacy .commercial-page .card-panel a.dataset-hover .icon-dropdown-opened {display:inline-block;text-align:center;margin-right:10px;margin-left:18px;flex-shrink:0} .db-legacy .commercial-page .card-panel a.dataset-hover .icon-dropdown-closed svg, .db-legacy .commercial-page .card-panel a.dataset-hover .icon-dropdown-opened svg {fill:rgb(22, 31, 68);stroke:rgb(22, 31, 68);height:20px!important;width:20px!important} .db-legacy .commercial-page .card-panel a.dataset-hover .icon-dropdown-opened {display:none} .db-legacy .commercial-page .card-panel a.dataset-hover:hover {cursor:pointer} .db-legacy .commercial-page .card-panel a.dataset-hover:hover .text {color:var(--db-mark)!important} .db-legacy .commercial-page .card-panel a.dataset-hover:hover .icon-dropdown-closed svg, .db-legacy .commercial-page .card-panel a.dataset-hover:hover .icon-dropdown-opened svg {fill:var(--db-mark)!important;stroke:var(--db-mark)!important} @media (min-width:1200px){.db-legacy .commercial-page .card-panel .card-container {max-width:1100px}} .db-legacy .commercial-page .card-panel .card-container .discover-box {padding:60px;display:flex;flex-wrap:wrap;background:linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%) 0% 0% no-repeat padding-box padding-box transparent;border-radius:14px;width:100%;align-items:center;margin-bottom:50px} @media (max-width:479px){.db-legacy .commercial-page .card-panel .card-container .discover-box {padding:30px}} .db-legacy .commercial-page .card-panel .card-container .discover-box .text-box {width:50%} .db-legacy .commercial-page .card-panel .card-container .discover-box .text-box h2, .db-legacy .commercial-page .card-panel .card-container .discover-box .text-box h3, .db-legacy .commercial-page .card-panel .card-container .discover-box .text-box p {text-align:left} .db-legacy .commercial-page .card-panel .card-container .discover-box .text-box:nth-child(1) {padding-right:60px} .db-legacy .commercial-page .card-panel .card-container .discover-box .text-box h2 {margin-bottom:30px} .db-legacy .commercial-page .card-panel .card-container .discover-box .text-box p.lighter {font-size:20px;line-height:30px;font-weight:lighter} .db-legacy .commercial-page .card-panel .card-container .discover-box .text-box h3 {font-size:20px;line-height:28px;font-weight:bold} @media (max-width:1199px){.db-legacy .commercial-page .card-panel .card-container .discover-box .text-box {width:100%;padding:0px!important}} @media (max-width:1199px){.db-legacy .commercial-page .card-panel .card-container .discover-box .text-box h3 {margin-top:30px}} @media (max-width:479px){.db-legacy .commercial-page .card-panel .card-container .discover-box .text-box h2 {font-size:22px!important;line-height:30px!important;margin-bottom:22px!important}} @media (max-width:479px){.db-legacy .commercial-page .card-panel .card-container .discover-box .text-box p.lighter {font-size:16px!important;line-height:24px!important;margin-bottom:24px!important}} @media (max-width:479px){.db-legacy .commercial-page .card-panel .card-container .discover-box .text-box h3 {font-size:16px!important;line-height:22px!important;margin-top:0px!important;margin-bottom:15px!important}} .db-legacy .commercial-page .card-panel .card-container .discover-box .action-buttons {width:50%;padding-right:60px;display:flex;justify-content:space-between;margin-left:0px;margin-right:0px;flex-wrap:wrap} @media (max-width:1199px){.db-legacy .commercial-page .card-panel .card-container .discover-box .action-buttons {width:100%;margin-top:15px;padding-right:0px}} @media (max-width:479px){.db-legacy .commercial-page .card-panel .card-container .discover-box .action-buttons {margin-top:0px}} .db-legacy .commercial-page .card-panel .card-container .discover-box .action-buttons a.button {width:calc(50% - 15px);margin-left:0px;margin-right:15px;font-size:14px;line-height:14px} .db-legacy .commercial-page .card-panel .card-container .discover-box .action-buttons a.button.db-outline::before {content:none} .db-legacy .commercial-page .card-panel .card-container .discover-box .action-buttons a.button.db-outline .button-body {width:100%;height:100%;font-size:14px;line-height:14px} .db-legacy .commercial-page .card-panel .card-container .discover-box .action-buttons a.button.db-outline .button-body .icon-see_more {height:12.5px;width:12.5px} @media (max-width:1199px){.db-legacy .commercial-page .card-panel .card-container .discover-box .action-buttons a.button.db-outline {margin-right:0px}} @media (max-width:767px){.db-legacy .commercial-page .card-panel .card-container .discover-box .action-buttons a.button {width:100%;max-width:unset;margin-right:0px}} .db-legacy .commercial-page ul.check-list {list-style-type:none;padding:0px;margin:0px} .db-legacy .commercial-page ul.check-list li {margin-left:25px} .db-legacy .commercial-page ul.check-list li::before {content:"";display:inline-block;background-image:url("/static/img/commercial/icons/Icon_NavyCheck.svg");background-size:contain;background-repeat:no-repeat;width:10px;height:8px;margin-left:-25px;margin-right:15px;vertical-align:top;margin-top:9px} .db-legacy .commercial-page ul.check-list li.smaller::before {margin-top:11px} .db-legacy .commercial-page .bold {font-weight:bold} .db-legacy .commercial-page .lighter {font-weight:lighter} .db-legacy .commercial-page h1 {color:rgb(22, 31, 68)} .db-legacy .commercial-page h2 {color:rgb(22, 31, 68)} .db-legacy .commercial-page .button, .db-legacy .commercial-page a.button, .db-legacy .commercial-page a.button:visited {position:relative;display:inline-block;margin-left:15px;margin-right:15px;margin-top:15px;text-transform:uppercase;font-size:16px;font-weight:normal} .db-legacy .commercial-page .button .drugbank-icon, .db-legacy .commercial-page a.button .drugbank-icon, .db-legacy .commercial-page a.button:visited .drugbank-icon {margin-left:10px;position:relative;top:1px} .db-legacy .commercial-page .button .drugbank-icon svg, .db-legacy .commercial-page a.button .drugbank-icon svg, .db-legacy .commercial-page a.button:visited .drugbank-icon svg {transition:0.25s;height:13.5px;width:13.5px} .db-legacy .commercial-page .button.db-outline .button-body, .db-legacy .commercial-page a.button.db-outline .button-body, .db-legacy .commercial-page a.button.db-outline:visited .button-body {position:relative;font-size:16px;font-weight:normal;line-height:1.2;padding:9.5px 19px;border-radius:22px;color:var(--db-mark);border:2px solid var(--db-mark);background-color:transparent;transition:0.25s} .db-legacy .commercial-page .button.db-outline:hover, .db-legacy .commercial-page .button.db-outline:active, .db-legacy .commercial-page .button.db-outline:focus, .db-legacy .commercial-page a.button.db-outline:hover, .db-legacy .commercial-page a.button.db-outline:active, .db-legacy .commercial-page a.button.db-outline:focus, .db-legacy .commercial-page a.button.db-outline:visited:hover, .db-legacy .commercial-page a.button.db-outline:visited:active, .db-legacy .commercial-page a.button.db-outline:visited:focus {opacity:1;outline:none!important} .db-legacy .commercial-page .button.db-outline:hover .button-body, .db-legacy .commercial-page .button.db-outline:active .button-body, .db-legacy .commercial-page .button.db-outline:focus .button-body, .db-legacy .commercial-page a.button.db-outline:hover .button-body, .db-legacy .commercial-page a.button.db-outline:active .button-body, .db-legacy .commercial-page a.button.db-outline:focus .button-body, .db-legacy .commercial-page a.button.db-outline:visited:hover .button-body, .db-legacy .commercial-page a.button.db-outline:visited:active .button-body, .db-legacy .commercial-page a.button.db-outline:visited:focus .button-body {background-color:var(--db-mark-hover);border:2px solid var(--db-mark-hover);color:white} .db-legacy .commercial-page .button.db-outline:hover .button-body svg, .db-legacy .commercial-page .button.db-outline:active .button-body svg, .db-legacy .commercial-page .button.db-outline:focus .button-body svg, .db-legacy .commercial-page a.button.db-outline:hover .button-body svg, .db-legacy .commercial-page a.button.db-outline:active .button-body svg, .db-legacy .commercial-page a.button.db-outline:focus .button-body svg, .db-legacy .commercial-page a.button.db-outline:visited:hover .button-body svg, .db-legacy .commercial-page a.button.db-outline:visited:active .button-body svg, .db-legacy .commercial-page a.button.db-outline:visited:focus .button-body svg {stroke:white} .db-legacy .commercial-page .button.db-outline:hover .button-body, .db-legacy .commercial-page a.button.db-outline:hover .button-body, .db-legacy .commercial-page a.button.db-outline:visited:hover .button-body {transform:translateY(-2px)} .db-legacy .commercial-page .button.db-outline:active .button-body, .db-legacy .commercial-page .button.db-outline:focus .button-body, .db-legacy .commercial-page a.button.db-outline:active .button-body, .db-legacy .commercial-page a.button.db-outline:focus .button-body, .db-legacy .commercial-page a.button.db-outline:visited:active .button-body, .db-legacy .commercial-page a.button.db-outline:visited:focus .button-body {box-shadow:none;transform:translateY(0px)} .db-legacy .commercial-page .button.dark, .db-legacy .commercial-page a.button.dark, .db-legacy .commercial-page a.button.dark:visited {font-size:16px;font-weight:normal;line-height:1.2;padding:10.5px 20px;border-radius:22px;color:white;background-color:var(--db-mark);transition:0.25s} .db-legacy .commercial-page .button.dark:hover, .db-legacy .commercial-page .button.dark:active, .db-legacy .commercial-page .button.dark:focus, .db-legacy .commercial-page a.button.dark:hover, .db-legacy .commercial-page a.button.dark:active, .db-legacy .commercial-page a.button.dark:focus, .db-legacy .commercial-page a.button.dark:visited:hover, .db-legacy .commercial-page a.button.dark:visited:active, .db-legacy .commercial-page a.button.dark:visited:focus {background-color:var(--db-mark-hover);color:white;opacity:1;outline:none!important} .db-legacy .commercial-page .button.dark:hover, .db-legacy .commercial-page a.button.dark:hover, .db-legacy .commercial-page a.button.dark:visited:hover {transform:translateY(-2px)} .db-legacy .commercial-page .button.dark:active, .db-legacy .commercial-page .button.dark:focus, .db-legacy .commercial-page a.button.dark:active, .db-legacy .commercial-page a.button.dark:focus, .db-legacy .commercial-page a.button.dark:visited:active, .db-legacy .commercial-page a.button.dark:visited:focus {transform:translateY(0px)} .db-legacy .commercial-page .customDrugBankSelect {font-size:14px;line-height:30px;padding:7px 20px;height:auto;color:rgb(38, 48, 99)!important} .db-legacy .commercial-page .customDrugBankSelect .customDrugBankSelect__list {margin-top:0px;margin-bottom:0px} .db-legacy .commercial-page .customDrugBankSelect .customDrugBankSelect__list .customDrugBankSelect__option {font-size:14px;line-height:30px;padding:5px 20px;color:rgb(38, 48, 99)!important} .db-legacy .commercial-page .customDrugBankSelect .customDrugBankSelect__list .customDrugBankSelect__option--highlight {background-color:rgba(0, 0, 0, 0.05)} .db-legacy .commercial-page .customDrugBankSelect:focus {outline:none;box-shadow:none;background-color:rgb(243, 244, 245)} @media (max-width:991px){.db-legacy .commercial-page h1 {font-size:40px;line-height:50px}} @media (max-width:991px){.db-legacy .commercial-page h2 {font-size:30px;line-height:38px}} .db-legacy .commercial-page .data-stats-panel {padding-top:30px;margin-top:-30px} .db-legacy .commercial-page .data-stats-panel .carousel-container {position:relative} .db-legacy .commercial-page .data-stats-panel .data-carousel {box-shadow:none;transition:margin 0.5s, width 0.5s;width:100%} .db-legacy .commercial-page .data-stats-panel .data-carousel .data-row {width:100%;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;transition:width 0.5s, height 0.5s;position:relative;background:white;z-index:100} .db-legacy .commercial-page .data-stats-panel .data-carousel .data-row .item {display:block} .db-legacy .commercial-page .data-stats-panel .data-carousel .data-row .data-item {display:flex;align-items:center;position:relative;height:100%;overflow:hidden} .db-legacy .commercial-page .data-stats-panel .data-carousel .data-row .data-item .data-thumb {display:flex;align-items:center;cursor:pointer} .db-legacy .commercial-page .data-stats-panel .data-carousel .data-row .data-item img {height:80px;width:auto;transition:opacity 0.25s} .db-legacy .commercial-page .data-stats-panel .data-carousel .data-row .data-item .data-text {display:flex;flex-direction:column;justify-content:center;flex:1 1 0%;white-space:nowrap} .db-legacy .commercial-page .data-stats-panel .data-carousel .data-row .data-item .data-text h4, .db-legacy .commercial-page .data-stats-panel .data-carousel .data-row .data-item .data-text h5 {margin-bottom:0px} .db-legacy .commercial-page .data-stats-panel .data-carousel .data-row .data-item .data-text h4 {font-size:34px;line-height:40px;font-weight:100} .db-legacy .commercial-page .data-stats-panel .data-carousel .data-row .data-item .data-text h5 {font-size:14px;line-height:16px;font-weight:bold} .db-legacy .commercial-page .data-stats-panel .data-carousel::after {content:" ";position:absolute;height:100%;width:0px;left:50%;top:0px;box-shadow:rgba(34, 55, 121, 0.2) 0px 0px 30px -10px;z-index:10;transition:width 0.5s, left 0.5s} .db-legacy .commercial-page .data-stats-panel {padding-top:75px;margin:0px} .db-legacy .commercial-page .data-stats-panel .db-container:not(.carousel-container) h3 {margin-bottom:35px} @media (min-width:480px){.db-legacy .commercial-page .data-stats-panel .db-container:not(.carousel-container) h3 {font-size:24px!important;line-height:34px!important}} @media (max-width:479px){.db-legacy .commercial-page .data-stats-panel .db-container:not(.carousel-container) h3 {font-size:20px!important;line-height:30px!important}} @media (min-width:1200px){.db-legacy .commercial-page .data-stats-panel .db-container.carousel-container {max-width:1100px}} @media (max-width:479px){.db-legacy .commercial-page .data-stats-panel h2.larger {margin-bottom:20px;font-size:30px!important;line-height:38px!important}} @media (max-width:1199px){.db-legacy .commercial-page .data-stats-panel .data-row .item {width:50%;margin-bottom:15px}} @media (max-width:767px){.db-legacy .commercial-page .data-stats-panel .data-row .item {width:100%}} .db-legacy .commercial-page .data-stats-panel .data-row .item .data-item {justify-content:center} .db-legacy .commercial-page .data-stats-panel .data-row .item .data-item .data-thumb {width:100%} .db-legacy .commercial-page .data-stats-panel .data-row .item .data-item .data-thumb:hover {cursor:unset} .db-legacy .commercial-page .data-stats-panel .data-row .item .data-item .data-thumb .data-img {display:flex;width:35%;justify-content:flex-end} .db-legacy .commercial-page .data-stats-panel .data-row .item .data-item .data-thumb #data-stat-Book-icon {width:54px;height:auto;margin-right:10px} .db-legacy .commercial-page .data-stats-panel .data-row .item .data-item .data-thumb #data-stat-ClipboardError-icon {width:45px;height:auto;padding-top:15px;margin-right:15px} .db-legacy .commercial-page .data-stats-panel .data-row .item .data-item .data-thumb #data-stat-Coin-icon {width:50px;padding-top:13px;height:auto;margin-right:14px} .db-legacy .commercial-page .data-stats-panel .data-row .item .data-item .data-thumb .data-text {width:100%} @media (max-width:767px){.db-legacy .commercial-page .data-stats-panel .data-row .item .data-item .data-thumb .data-text {width:60%;white-space:normal}} .db-legacy .commercial-page .data-stats-panel .data-row .item .data-item .data-thumb .data-text .data-stat-number {text-align:left;font-size:45px;margin-bottom:5px} .db-legacy .commercial-page .data-stats-panel .data-row .item .data-item .data-thumb .data-text .data-stat-number span {font-size:25px;line-height:0px;text-transform:uppercase;position:relative;bottom:5px;font-weight:normal} @media (max-width:479px){.db-legacy .commercial-page .data-stats-panel .data-row .item .data-item .data-thumb .data-text .data-stat-number {margin-bottom:0px;font-size:30px!important;line-height:38px!important}} @media (max-width:479px){.db-legacy .commercial-page .data-stats-panel .data-row .item .data-item .data-thumb .data-text .data-stat-number span {font-size:18px;bottom:3px}} .db-legacy .commercial-page .data-stats-panel .data-row .item .data-item .data-thumb .data-text .data-stat-text {font-size:14px;line-height:18px;text-transform:none;font-weight:normal;text-align:left} @media (max-width:479px){.db-legacy .commercial-page .data-stats-panel .data-row .item .data-item .data-thumb .data-text .data-stat-text br {display:none}} .db-legacy .commercial-page #use-cases-contact-panel {position:relative;overflow:hidden} .db-legacy .commercial-page #use-cases-contact-panel .db-container {position:relative;z-index:100} .db-legacy .commercial-page #use-cases-contact-panel h2 {font-weight:100} .db-legacy .commercial-page #use-cases-contact-panel h2 .blue {font-weight:bold;color:rgb(114, 125, 212)} .db-legacy .commercial-page #use-cases-contact-panel h3 {max-width:550px} .db-legacy .commercial-page #use-cases-contact-panel .action-buttons {margin-top:10px} @media (max-width:767px){.db-legacy .commercial-page #use-cases-contact-panel .action-buttons {text-align:center}} @media (max-width:479px){.db-legacy .commercial-page #use-cases-contact-panel {overflow:hidden;padding-top:50px!important}} @media (max-width:479px){.db-legacy .commercial-page.use_cases_ml_drug_discovery_repurposing .panel .db-container {margin:0px 40px}} @media (max-width:991px){.db-legacy .commercial-page.use_cases_ml_drug_discovery_repurposing .header-panel .db-container {flex-direction:column-reverse!important}} .db-legacy .commercial-page.use_cases_ml_drug_discovery_repurposing .header-panel .header-text h1 {font-size:50px;font-weight:normal;line-height:64px;text-transform:none} @media (max-width:479px){.db-legacy .commercial-page.use_cases_ml_drug_discovery_repurposing .header-panel .header-text h1 {font-size:38px;line-height:52px}} .db-legacy .commercial-page.use_cases_ml_drug_discovery_repurposing .header-panel .header-text p:not(.page-title) {font-size:24px;line-height:34px;margin:0px;text-align:left;font-weight:lighter} .db-legacy .commercial-page.use_cases_ml_drug_discovery_repurposing .header-panel .header-images {margin-bottom:-90px} @media (max-width:479px){.db-legacy .commercial-page.use_cases_ml_drug_discovery_repurposing .header-panel .header-images {margin-bottom:-50px}} .db-legacy .commercial-page.use_cases_ml_drug_discovery_repurposing .header-panel .header-images img {top:-15%} @media (min-width:1200px){.db-legacy .commercial-page.use_cases_ml_drug_discovery_repurposing .header-panel .header-images img {width:787px}} @media (max-width:1199px){.db-legacy .commercial-page.use_cases_ml_drug_discovery_repurposing .header-panel .header-images img {max-width:787px}} @media (max-width:991px){.db-legacy .commercial-page.use_cases_ml_drug_discovery_repurposing .header-panel .header-images img {top:-100px;width:100%}} @media (max-width:479px){.db-legacy .commercial-page.use_cases_ml_drug_discovery_repurposing .header-panel .header-images img {top:-50px}} .db-legacy .commercial-page.use_cases_ml_drug_discovery_repurposing .centered-panel:not(.trusted-by-panel) h2, .db-legacy .commercial-page.use_cases_ml_drug_discovery_repurposing .centered-panel:not(.trusted-by-panel) h3 {max-width:unset} @media (max-width:767px){.db-legacy .commercial-page.use_cases_ml_drug_discovery_repurposing .centered-panel:not(.trusted-by-panel) h2 {font-size:30px!important;line-height:38px!important}} .db-legacy .commercial-page.use_cases_ml_drug_discovery_repurposing p.statement-text {font-size:16px;line-height:24px} .db-legacy .commercial-page.use_cases_ml_drug_discovery_repurposing .white-panel.info-panel {background:transparent} @media (min-width:1200px){.db-legacy .commercial-page.use_cases_ml_drug_discovery_repurposing .white-panel.info-panel .db-container {max-width:1100px}} .db-legacy .commercial-page.use_cases_ml_drug_discovery_repurposing .white-panel.info-panel .db-container #ml-img {width:135%;margin-left:-32%} @media (max-width:991px){.db-legacy .commercial-page.use_cases_ml_drug_discovery_repurposing .white-panel.info-panel .db-container #ml-img {margin:5% 0px;width:100%}} @media (max-width:479px){.db-legacy .commercial-page.use_cases_ml_drug_discovery_repurposing #use-cases-contact-panel {padding-bottom:75px!important}} .db-legacy .commercial-page .bottom-half-gradient-panel {background:linear-gradient(rgba(255, 255, 255, 0.4) 50%, rgb(243, 243, 251) 0%, white 100%) 100% center} .db-legacy .commercial-page .card-panel.single-card-panel {background:transparent;position:relative;overflow-x:clip} .db-legacy .commercial-page .card-panel.single-card-panel .panel-background {position:absolute;top:-40%;width:103%;height:140%;z-index:-1} .db-legacy .commercial-page .card-panel.single-card-panel .card-container .discover-box {align-items:flex-start;z-index:10} @media (max-width:1199px){.db-legacy .commercial-page .card-panel.single-card-panel .card-container .discover-box {margin-bottom:0px}} .db-legacy .commercial-page #ebook-cta.download-cta-panel.badge-panel {padding:50px 0px 75px} @media (min-width:1200px){.db-legacy .commercial-page #ebook-cta.download-cta-panel.badge-panel .badge-box {padding:50px 62px}} @media (min-width:1200px){.db-legacy .commercial-page #ebook-cta.download-cta-panel.badge-panel .badge-box .badge-text {max-width:57%}} @media (min-width:1200px){.db-legacy .commercial-page #ebook-cta.download-cta-panel.badge-panel .badge-box .badge-text p {font-size:22px;line-height:30px;margin-bottom:10px}} @media (min-width:1200px){.db-legacy .commercial-page #ebook-cta.download-cta-panel.badge-panel .badge-box .badge-image {max-width:43%;width:43%;bottom:-60px}} @media (min-width:1200px){.db-legacy .commercial-page #ebook-cta.download-cta-panel.badge-panel .badge-box .badge-image img {right:-138px}} @media (max-width:1199px){.db-legacy .commercial-page #ebook-cta.download-cta-panel.badge-panel .badge-box .badge-text {max-width:50%}} @media (max-width:1199px){.db-legacy .commercial-page #ebook-cta.download-cta-panel.badge-panel .badge-box .badge-image {width:50%;max-width:50%}} @media (max-width:1199px){.db-legacy .commercial-page #ebook-cta.download-cta-panel.badge-panel .badge-box .badge-image img {max-width:526px;width:150%;right:-130px;bottom:-25px}} @media (max-width:991px){.db-legacy .commercial-page #ebook-cta.download-cta-panel.badge-panel .badge-box .badge-text {max-width:100%}} .db-legacy .commercial-page #use-cases-contact-panel {position:relative;overflow:hidden} .db-legacy .commercial-page #use-cases-contact-panel .db-container {position:relative;z-index:100} .db-legacy .commercial-page #use-cases-contact-panel h2 {font-weight:100} .db-legacy .commercial-page #use-cases-contact-panel h2 .blue {font-weight:bold;color:rgb(114, 125, 212)} .db-legacy .commercial-page #use-cases-contact-panel h3 {max-width:550px} .db-legacy .commercial-page #use-cases-contact-panel .action-buttons {margin-top:10px} .db-legacy [tabindex="-1"]:focus:not(:focus-visible) {outline:0px!important} .db-legacy h1, .db-legacy h2, .db-legacy h3, .db-legacy h4, .db-legacy h5 {margin-top:0px;margin-bottom:0.5rem} .db-legacy p {margin-top:0px;margin-bottom:1rem} .db-legacy ul {margin-top:0px;margin-bottom:1rem} .db-legacy a {color:rgb(0, 176, 242);text-decoration:none;background-color:transparent} .db-legacy a:hover {color:rgb(0, 120, 166);text-decoration:underline} .db-legacy img {vertical-align:middle;border-style:none} .db-legacy svg {overflow:hidden;vertical-align:middle} .db-legacy label {display:inline-block;margin-bottom:0.5rem} .db-legacy button {border-radius:0px} .db-legacy button:focus:not(:focus-visible) {outline:0px} .db-legacy input, .db-legacy button, .db-legacy select {margin:0px;font-family:inherit;font-size:inherit;line-height:inherit} .db-legacy button, .db-legacy input {overflow:visible} .db-legacy button, .db-legacy select {text-transform:none} .db-legacy select {overflow-wrap:normal} .db-legacy button {appearance:button} .db-legacy input[type="checkbox"] {box-sizing:border-box;padding:0px} .db-legacy h1, .db-legacy h2, .db-legacy h3, .db-legacy h4, .db-legacy h5 {margin-bottom:0.5rem;font-weight:500;line-height:1.2} .db-legacy h1 {font-size:2.5rem} .db-legacy h2 {font-size:2rem} .db-legacy h3 {font-size:1.75rem} .db-legacy h4 {font-size:1.5rem} .db-legacy h5 {font-size:1.25rem} .db-legacy .db-container {width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto} @media (min-width:576px){.db-legacy .db-container {max-width:540px}} @media (min-width:768px){.db-legacy .db-container {max-width:720px}} @media (min-width:992px){.db-legacy .db-container {max-width:960px}} @media (min-width:1200px){.db-legacy .db-container {max-width:1140px}} .db-legacy .row {display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px} .db-legacy .col-lg-6, .db-legacy .col-sm-12, .db-legacy .col-sm-6 {position:relative;width:100%;padding-right:15px;padding-left:15px} @media (min-width:576px){.db-legacy .col-sm-6 {flex:0 0 50%;max-width:50%}} @media (min-width:576px){.db-legacy .col-sm-12 {flex:0 0 100%;max-width:100%}} @media (min-width:992px){.db-legacy .col-lg-6 {flex:0 0 50%;max-width:50%}} .db-legacy .form-control {display:block;width:100%;height:calc(1.5em + 2px + 0.75rem);padding:0.375rem 0.75rem;font-size:1rem;font-weight:400;line-height:1.5;color:rgb(73, 80, 87);background-color:rgb(255, 255, 255);background-clip:padding-box;border:1px solid rgb(206, 212, 218);border-radius:0.25rem;transition:border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out} @media (prefers-reduced-motion:reduce){.db-legacy .form-control {transition:none}} .db-legacy .form-control:focus {color:rgb(73, 80, 87);background-color:rgb(255, 255, 255);border-color:rgb(128, 189, 255);outline:0px;box-shadow:rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem} .db-legacy .form-control::placeholder {color:rgb(108, 117, 125);opacity:1} .db-legacy .form-control:disabled {background-color:rgb(233, 236, 239);opacity:1} .db-legacy .form-group {margin-bottom:1rem} .db-legacy .db-btn {display:inline-block;font-weight:400;color:rgb(33, 37, 41);text-align:center;vertical-align:middle;user-select:none;background-color:transparent;border:1px solid transparent;padding:0.375rem 0.75rem;font-size:1rem;line-height:1.5;border-radius:0.25rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out} @media (prefers-reduced-motion:reduce){.db-legacy .db-btn {transition:none}} .db-legacy .db-btn:hover {color:rgb(33, 37, 41);text-decoration:none} .db-legacy .db-btn:focus {outline:0px;box-shadow:rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem} .db-legacy .db-btn:disabled {opacity:0.65} .db-legacy .fade {transition:opacity 0.15s linear} @media (prefers-reduced-motion:reduce){.db-legacy .fade {transition:none}} .db-legacy .fade:not(.show) {opacity:0} .db-legacy .custom-control-input {position:absolute;left:0px;z-index:-1;width:1rem;height:1.25rem;opacity:0} .db-legacy .close {float:right;font-size:1.5rem;font-weight:700;line-height:1;color:rgb(0, 0, 0);text-shadow:rgb(255, 255, 255) 0px 1px 0px;opacity:0.5} .db-legacy .close:hover {color:rgb(0, 0, 0);text-decoration:none} .db-legacy .modal {position:fixed;top:0px;left:0px;z-index:1050;display:none;width:100%;height:100%;overflow:hidden;outline:0px} .db-legacy .modal-dialog {position:relative;width:auto;margin:0.5rem;pointer-events:none} .db-legacy .modal.fade .modal-dialog {transition:transform 0.3s ease-out;transform:translate(0px, -50px)} @media (prefers-reduced-motion:reduce){.db-legacy .modal.fade .modal-dialog {transition:none}} .db-legacy .modal-content {position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:rgb(255, 255, 255);background-clip:padding-box;border:1px solid rgba(0, 0, 0, 0.2);border-radius:0.3rem;outline:0px} .db-legacy .modal-body {position:relative;flex:1 1 auto;padding:1rem} @media (min-width:576px){.db-legacy .modal-dialog {max-width:500px;margin:1.75rem auto}} .db-legacy .d-none {display:none!important} @media (min-width:576px){.db-legacy .d-sm-block {display:block!important}} @media print{.db-legacy a:not(.db-btn) {text-decoration:underline}} @media print{.db-legacy img {break-inside:avoid}} @media print{.db-legacy p, .db-legacy h2, .db-legacy h3 {orphans:3;widows:3}} @media print{.db-legacy h2, .db-legacy h3 {break-after:avoid}} @media print{.db-legacy .db-container {min-width:992px!important}} .db-legacy .drugbank-icon {display:inline-block;line-height:0} .db-legacy .drugbank-icon svg {background-color:transparent;fill:currentcolor;width:1.5rem;height:1.5rem;vertical-align:middle} .db-legacy h1 {color:rgb(170, 179, 193);font-weight:lighter} .db-legacy h2 {color:rgb(0, 22, 30);font-weight:lighter;font-size:1.7rem;margin-top:1.5rem} .db-legacy h3 {color:rgb(0, 22, 30);font-size:1.4rem;margin-top:1.5rem} .db-legacy p {font-weight:lighter} .db-legacy .db-btn {cursor:pointer;transition:background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, color 0.15s ease-in-out;display:inline-flex;align-items:center;justify-content:center} .db-legacy .modal .modal-dialog {margin:calc(64px + 0.5rem) auto} @media (max-width:767.98px){.db-legacy .db-btn:not(.dbp-button,.dbp-btn--not-mobile,.hs-button) {padding:0.25rem 0.5rem;font-size:0.875rem;line-height:1.5;border-radius:999px}} .db-legacy .customDrugBankSelect {position:relative;display:flex;align-items:center;box-sizing:border-box;line-height:normal;font-weight:normal;width:100%;border:1px solid transparent;border-radius:9px;background-color:rgb(243, 244, 245);cursor:pointer;transition:0.2s ease-out;user-select:none} .db-legacy .customDrugBankSelect .customDrugBankSelect__list {position:absolute;top:100%;left:0px;z-index:2;list-style:none;padding:0px;box-sizing:border-box;min-width:calc(100% + 2px);margin:0px 0px 0px -1px;overflow:hidden auto;background-color:rgb(243, 244, 245);border-radius:0px 0px 9px 9px;border:1px solid transparent;max-height:200px} .db-legacy .customDrugBankSelect .customDrugBankSelect__list::-webkit-scrollbar {appearance:none;width:7px} .db-legacy .customDrugBankSelect .customDrugBankSelect__list::-webkit-scrollbar-thumb {border-radius:4px;background-color:rgba(0, 0, 0, 0.5);box-shadow:rgba(255, 255, 255, 0.5) 0px 0px 1px} .db-legacy .customDrugBankSelect .customDrugBankSelect__list--hidden {max-height:0px;visibility:hidden;display:none} .db-legacy .customDrugBankSelect .customDrugBankSelect__list .customDrugBankSelect__option {color:rgb(0, 22, 30);font-size:inherit;line-height:inherit;padding:0.625em 0.75em} .db-legacy .customDrugBankSelect .customDrugBankSelect__list .customDrugBankSelect__option--highlight {background-color:rgba(0, 0, 0, 0.05)} .db-legacy .customDrugBankSelect .customDrugBankSelect__value {display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:top;padding-right:20px} .db-legacy .customDrugBankSelect .customDrugBankSelect__value::after {content:"▾";position:absolute;z-index:1;right:0px;margin-right:18px;top:50%;transform:translateY(-50%);font-size:1.025em} .db-legacy select.select-component {position:absolute;left:-5000em;height:0px;overflow:hidden} /* --------------------------------------------------------------------------- * RE-ADDED BY HAND (tools/ports/ml_drug_discovery_repurposing.mjs). * * The open state of the data-package rows. `.clicked` is set by * assets/js/ml_drug_discovery_repurposing-legacy.js, so no element carries it * in a static export and the generator's probe could not see these three match. * They are the entire visible half of that interaction — verbatim from the live * `commercial/all` bundle, with the pink left out of it (there is none here). * ------------------------------------------------------------------------- */ .db-legacy .commercial-page .card-panel .dataset-hover-wrapper.clicked .dataset-hover .icon-dropdown-closed {display:none} .db-legacy .commercial-page .card-panel .dataset-hover-wrapper.clicked .dataset-hover .icon-dropdown-opened {display:inline-block} .db-legacy .commercial-page .card-panel .dataset-hover-wrapper.clicked .dataset-description {z-index:10;opacity:1;visibility:visible;transform:translate(0px, -20px);transition:0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97)}