/*
 * /electronic_medical_records/ 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.
 *
 * 365 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}
.db-legacy {position:relative;z-index:0}
.db-legacy img {max-width:none;display:inline;vertical-align:middle}
.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 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 {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 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 {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 .text-header-panel {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 {margin-top:0px;margin-bottom:15px}
.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 p {font-size:18px;line-height:25px;margin-top:15px;margin-bottom:15px}
.db-legacy .commercial-page .panel .light {font-weight:100}
@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 .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, .db-legacy .commercial-page .header-panel h4 {margin-bottom:20px}
.db-legacy .commercial-page .header-panel .db-container {padding:60px 0px 30px!important}
.db-legacy .commercial-page .text-header-panel {padding-bottom:75px}
.db-legacy .commercial-page .text-header-panel .db-container {flex-direction:row;justify-content:flex-start}
.db-legacy .commercial-page .text-header-panel h1 {max-width:650px;margin-left:-3px}
.db-legacy .commercial-page .text-header-panel h4, .db-legacy .commercial-page .text-header-panel p {max-width:815px;font-weight:100}
.db-legacy .commercial-page .text-header-panel h4 {text-transform:uppercase}
.db-legacy .commercial-page .text-header-panel .header-text {display:flex;flex-direction:column}
@media (max-width:767px){.db-legacy .commercial-page .text-header-panel h1 {font-size:40px;line-height:50px}}
@media (max-width:479px){.db-legacy .commercial-page .text-header-panel h1 {font-size:22px;line-height:32px}}
@media (max-width:479px){.db-legacy .commercial-page .text-header-panel h4, .db-legacy .commercial-page .text-header-panel p {font-size:18px;line-height:28px}}
.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}
@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 .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 .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-margin-panel {padding-top:150px;padding-bottom:150px}
@media (max-width:767px){.db-legacy .commercial-page .large-margin-panel {padding-top:75px;padding-bottom:75px}}
@media (max-width:479px){.db-legacy .commercial-page .large-margin-panel {padding-top:50px!important;padding-bottom:50px!important}}
.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 h4.smaller {font-size:18px;line-height:25px}
.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, .db-legacy .commercial-page .comment-card .comment-box .quote.smallest {font-size:18px;line-height:25px}
.db-legacy .commercial-page .comment-card .comment-box .signoff {color:white;text-align:right}
@media (max-width:1199px){.db-legacy .commercial-page .comment-card .comment-box .quote.smallest {font-size:16px!important;line-height:22px}}
@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 .company-box h4.smaller, .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 .quote.smallest {font-size:14px!important;line-height:20px}}
@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)}
@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 .use-cases-header-panel .db-container {justify-content:flex-start}
.db-legacy .commercial-page .use-cases-header-panel h1 {max-width:unset}
@media (max-width:767px){.db-legacy .commercial-page .use-cases-header-panel h1 br {display:none}}
.db-legacy .commercial-page .info-panel.right-panel .pm-3-img {width:145%;margin-left:-45%;margin-top:-10%;margin-bottom:-10%}
.db-legacy .commercial-page .info-panel.right-panel .interoperability-img {width:140%;margin-left:-40%}
.db-legacy .commercial-page .info-panel.left-panel .connected-data-img {width:150%;margin-left:-10%;margin-top:-25%;margin-bottom:-25%}
@media (max-width:767px){.db-legacy .commercial-page .info-panel.right-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.left-panel .connected-data-img {width:100%;margin-left:-8%;margin-top:0%;margin-bottom:5%}}
@media (max-width:767px){.db-legacy .commercial-page .info-panel.right-panel .interoperability-img {width:100%;margin-left:0%;margin-top:5%;margin-bottom:10%}}
.db-legacy .commercial-page #emr-header .db-container {position:relative}
.db-legacy .commercial-page #emr-header .header-text {z-index:100}
.db-legacy .commercial-page #emr-header .header-text h1 {max-width:550px}
.db-legacy .commercial-page #emr-header .emr-header-img {position:absolute;height:100%;top:5%;right:-10%}
.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 .use-cases-header-panel h1 {font-size:48px}}
@media (max-width:991px){.db-legacy .commercial-page #emr-header .emr-header-img {right:0%;left:480px}}
@media (max-width:767px){.db-legacy .commercial-page .use-cases-header-panel h1 {font-size:34px;line-height:42px}}
@media (max-width:767px){.db-legacy .commercial-page #emr-header {overflow:visible}}
@media (max-width:767px){.db-legacy .commercial-page #emr-header .db-container {flex-direction:column}}
@media (max-width:767px){.db-legacy .commercial-page #emr-header .header-text h1 {max-width:100%}}
@media (max-width:767px){.db-legacy .commercial-page #emr-header .emr-header-img {position:relative;inset:40px 0px 0px;width:100%;height:auto;z-index:150}}
@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-contact-panel .action-buttons .button-body {white-space:normal}}
.db-legacy .commercial-page.use_cases_electronic_medical_records #api-info-panel .text-box {width:55%}
.db-legacy .commercial-page.use_cases_electronic_medical_records #api-info-panel .image-box {width:45%}
@media (max-width:767px){.db-legacy .commercial-page.use_cases_electronic_medical_records #emr-highlight-panel {padding-bottom:85px!important}}
@media (max-width:767px){.db-legacy .commercial-page.use_cases_electronic_medical_records #emr-features-panel {margin-top:0px}}
.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}
@media (max-width:767px){.db-legacy .commercial-page #comments-panel #comments-carousel .carousel-control {display:none}}
.db-legacy .commercial-page #comments-panel .carousel-controls {display:flex;flex-direction:row;justify-content:space-around;align-items:center;padding-top:10px}
.db-legacy .commercial-page #comments-panel .carousel-controls a {opacity:0.35;transition:0.25s;display:flex;align-items:center;height:100px}
.db-legacy .commercial-page #comments-panel .carousel-controls a.active, .db-legacy .commercial-page #comments-panel .carousel-controls a:active, .db-legacy .commercial-page #comments-panel .carousel-controls a:hover {opacity:1}
.db-legacy .commercial-page #comments-panel .carousel-controls a img {max-height:40px;max-width:200px;margin:0px 10px}
@media (max-width:767px){.db-legacy .commercial-page #comments-panel .carousel-controls {justify-content:center}}
@media (max-width:767px){.db-legacy .commercial-page #comments-panel .carousel-controls a {width:10px;height:10px;background-color:rgb(114, 125, 212);border-radius:5px;margin:20px}}
@media (max-width:767px){.db-legacy .commercial-page #comments-panel .carousel-controls a.active, .db-legacy .commercial-page #comments-panel .carousel-controls a:active, .db-legacy .commercial-page #comments-panel .carousel-controls a:hover {background-color:var(--db-mark);opacity:1}}
@media (max-width:767px){.db-legacy .commercial-page #comments-panel .carousel-controls a img {display:none}}
.db-legacy h1, .db-legacy h2, .db-legacy h3, .db-legacy h4 {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 {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 .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 — checklist item 2.
 *
 * Bootstrap's slide transition. Every one of these hangs off a class the
 * script adds mid-transition (`carousel-item-next`, `-prev`, `-left`,
 * `-right`), so at rest they match nothing and the probe dropped them. What
 * survived — `.carousel-item { display: none }` and `.carousel-item.active
 * { display: block }` — is enough to show the right panel but not to move
 * between them: without these four the testimonials would cut instantly
 * instead of sliding.
 *
 * Copied verbatim from the live stylesheet; they are Bootstrap 4's own rules
 * and carry no `body.commercial` prefix, so scoping is just the wrapper.
 * ------------------------------------------------------------------------ */
.db-legacy .carousel-item-next,
.db-legacy .carousel-item-prev { display: block; }
.db-legacy .carousel-item-next:not(.carousel-item-left),
.db-legacy .active.carousel-item-right { transform: translateX(100%); }
.db-legacy .carousel-item-prev:not(.carousel-item-right),
.db-legacy .active.carousel-item-left { transform: translateX(-100%); }
.db-legacy .carousel-item.active.carousel-item-left,
.db-legacy .carousel-item.active.carousel-item-right { position: absolute; top: 0; left: 0; }

/*
 * Respect a reduced-motion preference. Bootstrap ships this guard; the port
 * would otherwise slide 0.6s at every step for readers who asked it not to.
 */
@media (prefers-reduced-motion: reduce) {
  .db-legacy .carousel-item { transition: none; }
}

/*
 * The prev/next controls and the logo indicators are `<a href="#…">`, so they
 * focus fine, but nothing in the legacy sheet draws a focus ring on them.
 * These two rules have no counterpart on the live site — see the note in
 * pages/use_cases/electronic_medical_records.html.
 */
.db-legacy .commercial-page #comments-panel .carousel-control:focus-visible,
.db-legacy .commercial-page #comments-panel .carousel-controls a:focus-visible { outline: 2px solid var(--db-mark); outline-offset: 4px; opacity: 1; }