/*
 * /telehealth/ 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.
 *
 * 401 of 7877 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.
 */
.db-legacy {
  /* ------------------------------------------------------------------------
   * THE NEW PINK. Aug 2026 — see DESIGN.md, "The Ground-Dependent Pink Rule".
   *
   * The live Rails page marks with #ff02af and darkens to #e2009b (and, in two
   * one-off places, #ff00b8 and #b50080). The design system's pink is #d00993:
   * #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 element on all seven
   * legacy pages was measured against the background actually painted behind
   * it. The result: EVERY pink that carries text, a border or an icon is on a
   * light ground, and the only pink on a dark ground is `.button.dark`, a solid
   * fill under white text, which the Never-Adjacent Rule treats as a distinct
   * UI object rather than text on a ground. That fill wants the light-ground
   * value too, because white on #d00993 is 5.07:1 and white on #ff00b4 is
   * 3.57:1.
   *
   * So one value covers every case here, and `pink-bright` is deliberately
   * absent. If a dark panel ever gains pink TEXT, it needs #ff00b4 and a new
   * token — do not reuse --db-mark for it.
   *
   * --db-mark-hover is pink-700. It replaces two different legacy darkenings
   * with one step, and at 8.25:1 on white it is the safer of the two.
   * ---------------------------------------------------------------------- */
  --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 .quote {font-size:18px!important;margin-bottom:10px!important}}
@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 .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 h2 .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 .light {font-weight:100}
.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 .panel .quote {font-size:20px;line-height:30px;font-weight:100}
.db-legacy .commercial-page .panel .quote .icon-quote {position:absolute;top:-45px;left:-45px}
.db-legacy .commercial-page .panel .quote .icon-quote svg {height:40px;width:40px}
.db-legacy .commercial-page .panel .customer {text-transform:uppercase;font-weight:bold}
.db-legacy .commercial-page .panel .customer, .db-legacy .commercial-page .panel .organization {font-size:14px;line-height:24px}
.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 h2, .db-legacy .commercial-page .centered-panel h3, .db-legacy .commercial-page .centered-panel h4 {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 {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 {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 {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}
.db-legacy .commercial-page .info-panel p.light {font-weight:100}
.db-legacy .commercial-page .info-panel a:not(.button) {font-size:18px;line-height:28px;color:rgb(114, 125, 212);font-weight:bold}
.db-legacy .commercial-page .info-panel a:not(.button):hover, .db-legacy .commercial-page .info-panel a:not(.button):active {opacity:0.75}
.db-legacy .commercial-page .info-panel a:not(.button) .drugbank-icon {margin-left:5px;position:relative;top:1px}
.db-legacy .commercial-page .info-panel a:not(.button) .drugbank-icon svg {height:14px;width:14px}
.db-legacy .commercial-page .info-panel p a:not(.button) {font-size:unset}
@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.left-panel .db-container {flex-direction:column-reverse}}
@media (max-width:767px){.db-legacy .commercial-page .info-panel.left-panel .db-container .text-box, .db-legacy .commercial-page .info-panel.left-panel .db-container .image-box {padding:0px}}
@media (max-width:767px){.db-legacy .commercial-page .info-panel.left-panel .db-container .image-box:not(:first-child) {padding:0px 0px 20px}}
@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 .blue-panel {background:rgb(114, 125, 212)}
.db-legacy .commercial-page .blue-panel h4, .db-legacy .commercial-page .blue-panel p {color:white}
.db-legacy .commercial-page .light-blue-panel {background:rgba(225, 226, 246, 0.4)}
.db-legacy .commercial-page .half-light-blue-panel {background:linear-gradient(rgba(225, 226, 246, 0.4) 50%, white 50%, white 100%)}
.db-legacy .commercial-page .gradient-panel {background:linear-gradient(rgb(243, 243, 251), white)}
.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 .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:767px){.db-legacy .commercial-page .product-header-panel .header-text {max-width:100%}}
.db-legacy .commercial-page .pill-header-panel {position:relative;overflow:visible}
.db-legacy .commercial-page .pill-header-panel .db-container {justify-content:center;align-items:center}
.db-legacy .commercial-page .pill-header-panel .pill-header {background-color:rgb(38, 48, 99);padding:13px 50px;border-radius:28px;position:absolute;top:-28px}
.db-legacy .commercial-page .pill-header-panel .pill-header h4 {color:white;margin-bottom:0px}
@media (max-width:479px){.db-legacy .commercial-page .pill-header-panel {padding-top:70px!important}}
.db-legacy .commercial-page .product-panel .product-list {display:flex;flex-flow:wrap;justify-content:center}
.db-legacy .commercial-page .product-panel .product-list .product-box {max-width:300px;text-align:center;padding:30px;display:flex;flex-direction:column;align-items:center}
.db-legacy .commercial-page .product-panel .product-list .product-box .drugbank-icon {margin-bottom:-10px}
.db-legacy .commercial-page .product-panel .product-list .product-box .drugbank-icon svg {width:100px;height:100px}
.db-legacy .commercial-page .product-panel .product-list .product-box p {font-weight:100;font-size:16px;line-height:24px;text-align:center}
@media (max-width:479px){.db-legacy .commercial-page .product-panel {margin-top:35px}}
@media (max-width:479px){.db-legacy .commercial-page .product-panel .product-list .product-box {padding:0px 15px}}
.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 .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-blue {color:rgb(114, 125, 212);fill:rgb(114, 125, 212);stroke:rgb(114, 125, 212)}
.db-legacy .commercial-page .drugbank-icon.icon-pink {color:var(--db-mark);fill:var(--db-mark);stroke:var(--db-mark)}
.db-legacy .commercial-page .db-carousel {background:white;box-shadow:rgba(34, 55, 121, 0.2) 0px 0px 6px 0px;z-index:150}
.db-legacy .commercial-page .db-carousel .carousel-inner .item {background-color:white;height:100%;overflow:hidden}
.db-legacy .commercial-page .db-carousel .carousel-control {background-image:none;opacity:1;color:rgb(114, 125, 212);text-shadow:none;background-color:white;height:60px;width:60px;border-radius:30px;top:calc(50% - 30px);box-shadow:rgba(34, 55, 121, 0.2) 0px 0px 6px 0px}
.db-legacy .commercial-page .db-carousel .carousel-control.left {left:-30px;padding:20px 22px 20px 18px}
.db-legacy .commercial-page .db-carousel .carousel-control.right {right:-30px;padding:20px 18px 20px 22px}
.db-legacy .commercial-page .db-carousel .carousel-control:hover {opacity:1}
.db-legacy .commercial-page .db-carousel .carousel-control .drugbank-icon {margin:0px;top:0px}
@media (max-width:479px){.db-legacy .commercial-page .db-carousel .carousel-control {height:46px;width:46px;border-radius:23px;top:calc(50% - 23px);box-shadow:rgba(34, 55, 121, 0.2) 0px 0px 6px 0px}}
@media (max-width:479px){.db-legacy .commercial-page .db-carousel .carousel-control.left {left:-23px;padding:13px 14px 13px 10px}}
@media (max-width:479px){.db-legacy .commercial-page .db-carousel .carousel-control.right {right:-23px;padding:13px 10px 13px 14px}}
@media (max-width:479px){.db-legacy .commercial-page .carousel-container {margin:0px}}
@media (max-width:479px){.db-legacy .commercial-page .carousel-container .db-carousel {margin:0px}}
@media (max-width:479px){.db-legacy .commercial-page .carousel-container .db-carousel .carousel-control {height:46px;width:46px;top:auto;bottom:-23px}}
@media (max-width:479px){.db-legacy .commercial-page .carousel-container .db-carousel .carousel-control.left {left:40px}}
@media (max-width:479px){.db-legacy .commercial-page .carousel-container .db-carousel .carousel-control.right {right:40px}}
.db-legacy .commercial-page .comment-card {height:100%;width:100%;display:flex;flex-direction:row;align-items:stretch;justify-content:center}
.db-legacy .commercial-page .comment-card a {color:rgb(114, 125, 212);transition:opacity 0.25s}
.db-legacy .commercial-page .comment-card a .drugbank-icon {margin-left:5px;position:relative;top:1px}
.db-legacy .commercial-page .comment-card a .drugbank-icon svg {height:14px;width:14px}
.db-legacy .commercial-page .comment-card a:hover, .db-legacy .commercial-page .comment-card a:active {opacity:0.75}
.db-legacy .commercial-page .comment-card .company-box {width:60%;position:relative;padding:20px 60px 40px}
.db-legacy .commercial-page .comment-card .company-box h4 {z-index:100;position:relative;line-height:28px}
.db-legacy .commercial-page .comment-card .company-box .logo-link {display:flex;align-items:center;z-index:10;height:140px}
.db-legacy .commercial-page .comment-card .company-box img {max-height:50px;max-width:250px;margin-bottom:-10px}
.db-legacy .commercial-page .comment-card .company-box::before {z-index:100;content:"";position:absolute;top:0px;right:0px;width:100%;height:100%;background-image:url("/static/img/commercial/home/Carousel_Background.png");background-size:100%;background-repeat:no-repeat;pointer-events:none}
.db-legacy .commercial-page .comment-card .comment-box {display:flex;flex:1 1 0%;flex-direction:column;justify-content:space-between;background-color:rgb(22, 31, 68);width:40%;padding:80px 60px 40px 80px}
.db-legacy .commercial-page .comment-card .comment-box .quote {position:relative;color:white}
.db-legacy .commercial-page .comment-card .comment-box .quote.smaller {font-size:18px;line-height:25px}
.db-legacy .commercial-page .comment-card .comment-box .signoff {color:white;text-align:right}
@media (max-width:991px){.db-legacy .commercial-page .comment-card .company-box h4, .db-legacy .commercial-page .comment-card .comment-box .quote {font-size:18px!important;line-height:25px}}
@media (max-width:991px){.db-legacy .commercial-page .comment-card .comment-box .quote.smaller {font-size:16px!important;line-height:22px}}
@media (max-width:991px){.db-legacy .commercial-page .comment-card .comment-box {padding:60px 60px 40px}}
@media (max-width:991px){.db-legacy .commercial-page .comment-card .comment-box .icon-quote {top:-35px;left:-35px}}
@media (max-width:991px){.db-legacy .commercial-page .comment-card .comment-box .icon-quote svg {height:30px;width:30px}}
@media (max-width:767px){.db-legacy .commercial-page .comment-card {flex-direction:column;justify-content:flex-start}}
@media (max-width:767px){.db-legacy .commercial-page .comment-card .company-box {width:100%;padding:0px 60px;text-align:center}}
@media (max-width:767px){.db-legacy .commercial-page .comment-card .company-box img {margin-bottom:0px}}
@media (max-width:767px){.db-legacy .commercial-page .comment-card .company-box h4 {display:none}}
@media (max-width:767px){.db-legacy .commercial-page .comment-card .comment-box {width:100%}}
@media (max-width:479px){.db-legacy .commercial-page .comment-card .company-box img {max-width:100%}}
.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 .clinical-header-panel .title-box {display:flex;flex-direction:row;position:relative;width:100%}
.db-legacy .commercial-page .clinical-header-panel .title-box .header-text {flex-shrink:0;min-width:auto}
.db-legacy .commercial-page .clinical-header-panel .title-box .header-text :last-child {margin-bottom:0px!important}
.db-legacy .commercial-page .clinical-header-panel .title-box .header-images {flex-shrink:1}
@media (max-width:767px){.db-legacy .commercial-page .clinical-header-panel .title-box .header-text {width:100%!important;max-width:100%!important}}
@media (max-width:767px){.db-legacy .commercial-page .clinical-header-panel .title-box .header-images {display:none!important}}
@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 .info-panel.right-panel .pm-1-img {width:190%;margin-left:-70%;margin-top:-15%;margin-bottom:-15%}
.db-legacy .commercial-page .info-panel.right-panel .autocomplete-img {margin-top:-3%;margin-bottom:-3%}
.db-legacy .commercial-page .info-panel.left-panel .pm-3-img {width:145%;margin-left:0%;margin-top:-10%;margin-bottom:-10%}
.db-legacy .commercial-page .info-panel.left-panel .medication-tracking-img {width:150%;margin-left:-5%;margin-top:-5%;margin-bottom:-5%}
@media (max-width:767px){.db-legacy .commercial-page .info-panel.right-panel .pm-1-img {width:150%;margin-left:-28%;margin-top:-5%;margin-bottom:-5%}}
@media (max-width:767px){.db-legacy .commercial-page .info-panel.left-panel .pm-3-img {width:120%;margin-left:-9%;margin-top:0%;margin-bottom:0%}}
@media (max-width:767px){.db-legacy .commercial-page .info-panel.right-panel .autocomplete-img {margin-top:5%;margin-bottom:5%}}
@media (max-width:767px){.db-legacy .commercial-page .info-panel.left-panel .medication-tracking-img {width:100%;margin-left:0%;margin-top:5%;margin-bottom:5%}}
.db-legacy .commercial-page .data-carousel-panel {padding-top:30px;margin-top:-30px}
.db-legacy .commercial-page .data-carousel-panel .carousel-container {position:relative}
.db-legacy .commercial-page .data-carousel-panel .data-carousel {box-shadow:none;transition:margin 0.5s, width 0.5s;width:100%}
.db-legacy .commercial-page .data-carousel-panel .data-carousel .carousel-control {display:none;height:36px;width:36px;border-radius:18px;top:calc(50% - 18px);box-shadow:rgba(34, 55, 121, 0.2) 0px 0px 6px 0px;z-index:150;position:absolute}
.db-legacy .commercial-page .data-carousel-panel .data-carousel .carousel-control.left {left:-18px;padding:9px 10px 5px 8px}
.db-legacy .commercial-page .data-carousel-panel .data-carousel .carousel-control.right {right:-18px;padding:9px 8px 5px 10px}
.db-legacy .commercial-page .data-carousel-panel .data-carousel .carousel-control .drugbank-icon svg {width:16px;height:16px}
.db-legacy .commercial-page .data-carousel-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-carousel-panel .data-carousel .data-row .item {display:block}
.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item {display:flex;align-items:center;position:relative;height:100%;overflow:hidden}
.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item .data-thumb {display:flex;align-items:center;cursor:pointer}
.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item .data-thumb .drugbank-icon {display:none}
.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item img {height:80px;width:auto;transition:opacity 0.25s}
.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item img.pink {opacity:0;position:absolute;left:0px}
.db-legacy .commercial-page .data-carousel-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-carousel-panel .data-carousel .data-row .data-item .data-text h4, .db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item .data-text h5 {margin-bottom:0px}
.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item .data-text h4 {font-size:34px;line-height:40px;font-weight:100}
.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item .data-text h5 {font-size:14px;line-height:16px;font-weight:bold}
.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item:hover img.pink {opacity:1}
.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item .data-description {padding:10px 40px;flex-direction:column;justify-content:center;height:100%;display:none}
.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item .data-description p {font-size:16px;line-height:24px;font-weight:100;padding:15px 0px;margin:0px}
.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item .data-description a {font-size:16px;line-height:24px;font-weight:normal;padding-bottom:15px}
.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item .data-description a:hover, .db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item .data-description a:active {opacity:0.75}
.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item .data-description a .drugbank-icon {margin-left:5px;position:relative;top:1px}
.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item .data-description a .drugbank-icon svg {height:12px;width:12px}
.db-legacy .commercial-page .data-carousel-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 #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 .contact-background {position:absolute;top:-30%;width:103%;height:135%;z-index:10}
.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:1199px){.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item img {height:65px}}
@media (max-width:1199px){.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item .data-text h4 {font-size:24px;line-height:40px;font-weight:100}}
@media (max-width:991px){.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row {flex-direction:column;justify-content:flex-start;align-items:stretch;height:auto!important}}
@media (max-width:991px){.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .item {width:100%}}
@media (max-width:991px){.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .item:first-child .data-thumb {border-top:1px solid rgb(225, 226, 246)}}
@media (max-width:991px){.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item {flex-direction:column;justify-content:flex-start;width:100%!important;align-items:stretch!important}}
@media (max-width:991px){.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item .data-thumb {border-bottom:1px solid rgb(225, 226, 246)}}
@media (max-width:991px){.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item .data-thumb .drugbank-icon {margin-right:15px}}
@media (max-width:991px){.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item .data-thumb .drugbank-icon.icon-arrow_down {display:inline-block}}
@media (max-width:991px){.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item .data-thumb .drugbank-icon.icon-arrow_up {display:none}}
@media (max-width:991px){.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item .data-text h4 {display:none}}
@media (max-width:991px){.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item .data-text h5 {font-size:20px;line-height:26px;font-weight:normal;text-transform:none}}
@media (max-width:991px){.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item .data-description {display:block;padding:0px;height:0px;transition:height 0.5s;border-bottom:1px solid rgb(225, 226, 246);position:relative;top:-1px}}
@media (max-width:991px){.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item .data-description p {width:100%!important}}
@media (max-width:991px){.db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .data-item .data-description a {display:none}}
@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 .data-carousel-panel {margin-top:-35px}}
@media (max-width:479px){.db-legacy .commercial-page .data-carousel-panel .carousel-container {margin:0px 20px}}
@media (max-width:479px){.db-legacy .commercial-page .data-carousel-panel .carousel-container .data-carousel .data-row .data-item img {margin-left:-5px}}
@media (max-width:479px){.db-legacy .commercial-page .data-carousel-panel .carousel-container .data-carousel .data-row .data-item .data-text h5 {font-size:18px;line-height:24px}}
@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-contact-panel .action-buttons .button-body {white-space:normal}}
.db-legacy .commercial-page.use_cases_telehealth #telehealth-header {padding-bottom:0px;overflow:visible}
.db-legacy .commercial-page.use_cases_telehealth #telehealth-header h1 {font-size:50px;line-height:64px;text-transform:none}
.db-legacy .commercial-page.use_cases_telehealth #telehealth-header h1, .db-legacy .commercial-page.use_cases_telehealth #telehealth-header p {max-width:470px}
.db-legacy .commercial-page.use_cases_telehealth #telehealth-header .title-box .header-text {text-align:right;width:45%;max-width:470px}
.db-legacy .commercial-page.use_cases_telehealth #telehealth-header .title-box .header-text p {font-weight:lighter}
.db-legacy .commercial-page.use_cases_telehealth #telehealth-header .title-box .header-images {display:flex;flex-direction:row-reverse;width:55%}
.db-legacy .commercial-page.use_cases_telehealth #telehealth-header .telehealth-header-img {height:675px;margin-top:-40px;margin-bottom:-170px}
.db-legacy .commercial-page.use_cases_telehealth #telehealth-panel-1 {padding-top:150px}
.db-legacy .commercial-page.use_cases_telehealth #telehealth-panel-1 h4 {max-width:675px;text-align:center}
@media (max-width:767px){.db-legacy .commercial-page.use_cases_telehealth #telehealth-header {padding-bottom:75px}}
@media (max-width:767px){.db-legacy .commercial-page.use_cases_telehealth #telehealth-header .title-box .header-text {text-align:center;align-items:center}}
@media (max-width:767px){.db-legacy .commercial-page.use_cases_telehealth #telehealth-panel-1 {padding-top:75px}}
.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 .contact-background {position:absolute;top:-30%;width:103%;height:135%;z-index:10}
.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 .commercial-page #comments-panel #comments-carousel .carousel-inner {height:460px}

.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 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 [role="button"] {cursor:pointer}

.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 .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 .db-carousel {position:relative}
.db-legacy .carousel-inner {position:relative;width:100%;overflow:hidden}
.db-legacy .carousel-inner::after {display:block;clear:both;content:""}
.db-legacy .carousel-item {position:relative;display:none;float:left;width:100%;margin-right:-100%;backface-visibility:hidden;transition:transform 0.6s ease-in-out}
@media (prefers-reduced-motion:reduce){.db-legacy .carousel-item {transition:none}}
.db-legacy .carousel-item.active {display:block}
.db-legacy .carousel-control-prev, .db-legacy .carousel-control-next {position:absolute;top:0px;bottom:0px;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0px;color:rgb(255, 255, 255);text-align:center;background:none;border:0px;opacity:0.5;transition:opacity 0.15s}
@media (prefers-reduced-motion:reduce){.db-legacy .carousel-control-prev, .db-legacy .carousel-control-next {transition:none}}
.db-legacy .carousel-control-prev:hover, .db-legacy .carousel-control-prev:focus, .db-legacy .carousel-control-next:hover, .db-legacy .carousel-control-next:focus {color:rgb(255, 255, 255);text-decoration:none;outline:0px;opacity:0.9}
.db-legacy .carousel-control-prev {left:0px}
.db-legacy .carousel-control-next {right:0px}

.db-legacy .db-sr-only {position:absolute;width:1px;height:1px;padding:0px;margin:-1px;overflow:hidden;clip:rect(0px, 0px, 0px, 0px);white-space:nowrap;border:0px}
@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}

@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}}


/* ---------------------------------------------------------------------------
 * RE-ADDED BY HAND. The generator only keeps rules that match the markup AT
 * REST, so every rule below — the whole open/closing state of the data
 * carousel — was dropped even though it is what the interaction looks like.
 * Copied from the live stylesheet, `.data-stats-panel` twins removed (this
 * page has no stats panel) and the `.carousel-item-next/-prev` selectors
 * removed with them: the port has no slide animation to key off.
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .db-legacy .commercial-page .data-carousel-panel .data-carousel.carousel-open .carousel-inner {justify-content:flex-start}
  .db-legacy .commercial-page .data-carousel-panel .data-carousel.carousel-open .carousel-control {display:block}
  .db-legacy .commercial-page .data-carousel-panel .data-carousel.carousel-open .item {display:none;overflow:hidden;transition:width 0.5s, left 0.5s}
  .db-legacy .commercial-page .data-carousel-panel .data-carousel.carousel-open .item.active {display:block}
  .db-legacy .commercial-page .data-carousel-panel .data-carousel.carousel-open .data-item .data-thumb {padding-left:40px;cursor:default}
  .db-legacy .commercial-page .data-carousel-panel .data-carousel.carousel-open .data-item .data-thumb img.pink {left:40px}
  .db-legacy .commercial-page .data-carousel-panel .data-carousel.carousel-open .data-item .data-description {display:flex}
  .db-legacy .commercial-page .data-carousel-panel .data-carousel.carousel-open .data-item:hover img.pink {opacity:0}
  .db-legacy .commercial-page .data-carousel-panel .data-carousel.carousel-open::after {width:60%;left:20%}
  .db-legacy .commercial-page .data-carousel-panel .data-carousel.carousel-closing::after {width:0px!important;left:50%!important}
}
@media (max-width: 991px) {
  .db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .item.active .data-item .data-thumb img.pink {opacity:1}
  .db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .item.active .data-item .data-thumb .drugbank-icon.icon-arrow_down {display:none}
  .db-legacy .commercial-page .data-carousel-panel .data-carousel .data-row .item.active .data-item .data-thumb .drugbank-icon.icon-arrow_up {display:inline-block}
}

/* The legacy buttons set `outline:none!important` on :focus, and the data
   thumbs were divs with a click handler — so nothing on this page showed a
   keyboard user where they were. A :focus-visible ring is invisible to mouse
   users and does not change the design. */
.db-legacy .commercial-page .button:focus-visible,
.db-legacy .commercial-page a:focus-visible,
.db-legacy .commercial-page .carousel-control:focus-visible {
  outline: 2px solid var(--db-mark) !important;
  outline-offset: 2px;
  border-radius: 4px;
}
/* The thumb's own ring goes INSIDE it. `.data-item` is `overflow:hidden`, so
   an offset ring is clipped down to a bare vertical sliver at the item edge. */
.db-legacy .commercial-page .data-thumb:focus-visible {
  outline: 2px solid var(--db-mark) !important;
  outline-offset: -2px;
  border-radius: 4px;
}