/********************************************************
 * Variables
 ********************************************************/
:root {
  --color-teal: #00857c;
  --color-dark-teal: #0c5c55;
  --color-blue: #0c2340;
  --color-light-teal: #6eceb2;
  --color-lighter-teal: #e6f3f2;
  --color-off-white: #f7f7f7;
  --color-lime: #bfed33;
  --color-lemon: #fff063;
  --color-pastel: #69b8f7;
  --color-pastel-blue: #69b8f7;
  --color-vista: #688ce8;
  --color-vista-blue: #688ce8;
  --color-rich: #5450e4;
  --color-rich-blue: #5450e4;
  --color-light-gray: #cfd2d7;
  --color-gray-5: #ddd;
  --color-gray-10: #e6e6e6;
  --color-gray: #cac9c8;
  --color-gray-40: #cac9c8;
  --color-gray-50: #d9d9d9;
  --color-gray-60: #949494;
  --color-gray-70: #dee2e6;
  --color-white: #fff;
  --color-muted-dark: #757575;
  --color-muted-darker: #707070;
  --color-muted-light: #e0e0e0;
  --color-danger: #ea868f;
  --color-danger-5: #cc0100;
  --color-danger-5-darker: #a30000;
  --color-black: #000;
  --color-lime-alt: #f9fdeb;

  --top-navbar-height: 80px;
  --input-btn-padding-x: 1rem;
  --min-page-padding-x: 1.5rem;

  --invention: 'Invention', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --arial: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}


/********************************************************
 * Typography
 ********************************************************/
@font-face {
  font-family: 'Invention';
  src:
    url('../fonts/Invention-Italic.woff2') format('woff2'),
    url('../fonts/Invention-Italic.woff') format('woff'),
    url('../fonts/Invention-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Invention';
  src:
    url('../fonts/Invention-Bold.woff2') format('woff2'),
    url('../fonts/Invention-Bold.woff') format('woff'),
    url('../fonts/Invention-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Invention';
  src:
    url('../fonts/Invention-BoldItalic.woff2') format('woff2'),
    url('../fonts/Invention-BoldItalic.woff') format('woff'),
    url('../fonts/Invention-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Invention';
  src:
    url('../fonts/Invention-LightItalic.woff2') format('woff2'),
    url('../fonts/Invention-LightItalic.woff') format('woff'),
    url('../fonts/Invention-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Invention';
  src:
    url('../fonts/Invention-Light.woff2') format('woff2'),
    url('../fonts/Invention-Light.woff') format('woff'),
    url('../fonts/Invention-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Invention';
  src:
    url('../fonts/Invention-Regular.woff2') format('woff2'),
    url('../fonts/Invention-Regular.woff') format('woff'),
    url('../fonts/Invention-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/********************************************************
 * Base tags
 ********************************************************/
html {
  cursor: default;
  font-size: 16px;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-behavior: smooth;
  /* Stop Bootstrap layout shift when modal opens
	 * (scrollbar disappears + padding compensation) */
  scrollbar-gutter: stable;
  /* keeps width stable on supporting browsers */
}

::selection {
  /* color: var(--color-blue); */
  background-color: var(--color-light-teal);
  /* background-color: rgba(110, 206, 178, 0.3); */

}

body {
  font-family: var(--invention);
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5em;
  color: var(--color-blue);
  background-color: var(--color-white);
  /* Keep scrollbar space reserved even on browsers that don't support scrollbar-gutter */
  overflow-y: scroll;
  /* Hide reserved scrollbar from layout calculation */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

body::-webkit-scrollbar {
  /* Hide reserved scrollbar from layout calculation */
  display: none;
  /* Chrome, Safari, Opera */
}

/* Bootstrap typically adds `padding-right` to elements with `.fixed-top`, `.fixed-bottom`, `.sticky-top`, or the `body` element itself when a modal opens. We need to override this behavior to avoid a layout shift below the backdrop when a modal opens. */
body.modal-open {
  /* Override Bootstrap's automatic padding when a modal opens */
  padding-right: 0 !important;
}
top-header.fixed-top {
  /* Override Bootstrap's automatic padding when a modal opens */
  padding-right: 0 !important;
}

body.left-gray-bg {
  background-color: var(--color-white);
  background-image: linear-gradient(90deg, rgba(247, 247, 247, 1) 0%, rgba(247, 247, 247, 1) 49.65vw, rgba(255, 255, 255, 0) 49.65vw, rgba(255, 255, 255, 0) 100vw);
  background-size: 100% 100%;
  background-repeat: repeat-y;
}

body.modal-iframe {
  /* Don't show scroll gutter in modals */
  overflow-y: auto;
  /* or hidden */
}

body.gradient {
  background-color: var(--color-white);
  background-image: linear-gradient(90deg, rgba(247, 247, 247, 1) 0%, rgba(247,
        247, 247, 1) 49.65vw, rgba(255, 255, 255, 0) 49.65vw, rgba(255, 255, 255,
        0) 100vw);
  background-size: 100% 100%;
  background-repeat: repeat-y;
}

a {
  color: var(--color-teal);
  padding: 0.2em 0;
  text-decoration: none;
}

a:hover {
  color: var(--color-teal);
  text-decoration: underline;
}

a.body-link:hover {
  text-decoration: underline;
}

a.btn-light-teal,
a.btn-light-teal:hover {
  color: var(--color-white);
}

a.btn {
  text-decoration: none;
}

a.btn.download {
  background-image: url(../images/icons/download.svg);
  background-position: 85% center;
  background-repeat: no-repeat;
  padding-right: 3em;
}

.btn,
.btn:focus {
  border: 1px dotted transparent;
  box-shadow: none;
  border-radius: 0;
  line-height: 1;
  padding: 8px 1rem 8px 1rem;
}

.btn:focus {
  border: 1px dotted var(--color-white);
}

.btn-danger {
  background-color: var(--color-danger-5);
}

.btn-danger:hover {
  background-color: var(--color-danger-5-darker);
}

.btn-teal,
.btn-teal:hover,
.btn-light-teal:hover {
  background-color: var(--color-dark-teal);
  color: var(--color-off-white);
}

.btn-teal[disabled] {
  background-color: var(--color-gray-60);
  color: var(--color-off-white);
}

.btn-teal[enabled]:hover {
  background-color: var(--color-dark-teal);
  color: var(--color-white);
}

.btn-signin {
  background-image: url(../images/icons/chevron-white.svg);
  background-position: 95% center;
  background-repeat: no-repeat;
  border: 1px solid var(--color-white);
  color: var(--color-white);
  padding: 2em;
}

.btn-signin:hover {
  background-color: var(--color-white);
  background-image: url(../images/icons/chevron-teal.svg);
  color: var(--color-teal);
  text-decoration: none;
}

.btn-white {
  background-color: var(--color-white);
  border: 1px solid var(--color-blue);
  color: var(--color-blue);
}

.btn-white:hover {
  background-color: var(--color-blue);
  color: var(--color-white);
}

.whats-new a.btn-link {
  border: none;
}

.chevron-teal {
  padding-right: 2em;
  background-image: url("../images/icons/chevron-teal.svg");
  background-repeat: no-repeat;
  background-position: 95% center;
}

.chevron-teal:hover, .chevron-teal:focus {
  padding-right: 2em;
}

a.btn.chevron {
  padding-right: 2.4rem;
  background-image: url("../images/icons/chevron-white.svg");
  background-repeat: no-repeat;
  background-position-x: right 3%;
  background-position-y: calc(50% + 1px);
}

.btn-white.chevron-start,
.btn-white.chevron-start:focus
{
	/* Optically offset the button label due to chevron symbol */
  padding-left: 1.7rem;
  background-image: url("../images/icons/chevron-blue-left.svg");
  background-repeat: no-repeat;
  background-position-x: left 3%;
  background-position-y: calc(50% + 1px);
}

.btn-white.chevron-start:hover {
  background-image: url("../images/icons/chevron-white-left.svg");
}

button.btn.chevron {
  background-color: var(--color-teal);
  background-image: url("../images/icons/chevron-white.svg");
  background-repeat: no-repeat;
  background-position: 95% center;
  padding-right: 2rem;
}

a.btn.chevron:hover, button.btn.chevron:hover {
  background-color: #005C55;
  color: #fff;
}

a.btn.chevron.long-text {
  background-position: 97.5% center;
}

a.btn.btn-link {
  width: 100%;
  color: #0c2340;
  font-weight: normal;
  text-decoration: none;
  text-align: left;
  padding: 0.5em 0em !important;
  /* padding: 0.5 2em 0.5 0; */
  background-image: url("../images/icons/chevron-teal.svg");
  background-repeat: no-repeat;
  background-position: right center;
}

a.btn.btn-link.md {
  font-size: 20px;
  background-size: 15%;
}

a.btn.btn-link.md.agencybtn {
  background-size: 35px;
}

/*home btns override */
.arrow-btns a.btn.btn-link.md {
  background-size: 35px;
}

a.btn.btn-link:hover {
  color: #00857c;
}

h1 {
  font-size: 1.875rem;
  margin: 3.5em 0 3em 0;
}

h2 {
  color: var(--color-teal);
  font-size: 1.375rem;
  font-family: var(--invention);
}

h3 {
  color: var(--color-teal);
  font-size: 1.25rem;
  font-family: var(--invention);
  font-weight: bold;
}

h4 {
  color: var(--color-blue);
  font-size: 1.125rem;
  font-weight: bold;
}

/* hr { */
/*   height: 3px; */
/*   background: #00857c; */
/*   margin: 0.5em 0em; */
/* } */
hr.content,
hr.content-divider {
  height: 1px;
  background: var(--color-blue);
  box-sizing: content-box;
  border-top: 1.2px solid rgb(0 0 0 / 1.0);
	/* Below is margin for when dark line is visible. */
	/* Otherwise, we will match Icon section's <hr> margin. */
  /* margin: 2em 0 5em 0; */
  margin-top: 0;
  margin-bottom: 3rem;
  opacity: 0; /* hide all dark divider lines */
}

ul, ol {
  padding-left: 1.2rem;
}

strong {
  font-family: 'Invention';
  font-weight: bold;
}


/********************************************************
 * Common utility classes
 ********************************************************/
.border {
  /* Must override Bootstrap's .border which also has !important */
  border-color: var(--color-light-gray) !important;
}

.border-blue {
  border-color: var(--color-blue);
}

.border-gray2 {
  border: 1px solid var(--color-light-gray);
}

.border-teal2 {
	border: 1px solid var(--color-teal) !important;
}

.bg-blue,
.bg-navy {
  background-color: var(--color-blue);
}

.bg-gray1 {
  background-color: var(--color-gray);
}

.btn-lemon,
.bg-lemon {
  color: var(--color-blue);
  background-color: var(--color-lemon);
}

.btn-lime,
.bg-lime {
  color: #0c2340;
  background-color: var(--color-lime);
}

.bg-off-white {
  background-color: var(--color-off-white);
}

.btn-rich-blue:hover,
.btn-pastel-blue,
.bg-pastel-blue {
  color: var(--color-off-white);
  background-color: var(--color-pastel-blue);
}

.bg-teal,
.teal-bg,
.btn-teal {
  background-color: var(--color-teal);
}

.bg-light-teal,
.btn-light-teal {
  background-color: var(--color-light-teal);
}

.btn-pastel-blue:hover,
.btn-rich-blue,
.bg-rich-blue {
  color: var(--color-off-white);
  background-color: var(--color-rich-blue);
}

.btn-vista-blue:hover,
.btn-vista-blue,
.bg-vista-blue {
  color: var(--color-off-white);
  background-color: var(--color-vista-blue);
}

.bg-white {
  background-color: var(--color-white);
}

.fadeIn {
  animation: fadeIn 1s ease-in-out;
}

.float-left {
  float: left !important;
}

.font-14 {
  font-size: 0.875rem;
}

.font-16 {
  font-size: 1rem;
}

.font-18 {
  font-size: 1.125rem;
}

.font-24 {
  font-size: 1.5rem;
}

.font-bold {
  font-weight: bold;
}

.font-italic {
  font-style: italic;
}

.font-regular-italic {
  font-family: "Invention";
  font-style: italic;
}

.gray-section {
  padding: 1em;
}

.invention-light {
  font-family: 'Invention';
  font-weight: 300;
}

.row.logo-spacing {
	margin-bottom: 75px;
}

.max-width-unset {
  max-width: unset !important;
}

.mt-start-below-nav {
  padding-top: 134px;
}

.navy-bordered {
  border: 1px solid var(--color-blue);
}

.navy-bordered-btm {
  border-bottom: 1px solid var(--color-blue);
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters>.col, .no-gutters>[class*=col-] {
  padding-right: 0;
  padding-left: 0;
}

.nowrap {
  text-wrap: nowrap;
}

.teal-outline-around {
  border: 1px solid var(--color-teal);
}

.text-blue,
.text-merck-blue,
.text-navy
{
  color: var(--color-blue);
}

.text-right {
  text-align: right;
}

.text-sm {
  font-size: .875rem;
	/* Ensure same line height for MS Edge and Firefox */
	/* compared to correct visual look in Chrome, Safari */
  line-height: 1.4;
}

.text-teal {
  color: var(--color-teal);
}

.wrap-balance {
  text-wrap: balance;
}

.wrap-default {
  text-wrap: initial;
}

.wrap-pretty {
  text-wrap: pretty;
}

.xsmall {
  font-size: 0.8em;
}

/* MCS spinner */
.mcs-spinner {
  animation: rotate 2s linear infinite;
  outline: transparent;

  .path {
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

/* Vue transitions */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.container {
  width: 100%;
  max-width: 1125px;
}

.btn.btn-outline-white {
  color: var(--color-white);
  border: 1px solid var(--color-white);
}

.btn.btn-outline-white:hover {
  background-color: var(--color-white);
}

.btn-outline-white.teal:hover {
  color: var(--color-teal);
  background-color: var(--color-white);
}

.btn-outline-white.teal.download:hover {
  background-image: url(../images/icons/download-teal.svg);
}

/* This is for the teal banner inside body sections, */
/* not the #cta_guidelines on leftnav */
.cta-guidelines {
  margin: 0px;
  margin-bottom: 3em;
  padding-top: 1em;
  padding-bottom: 0.5em;
}

.cta-guidelines p {
  margin: 0;
  padding: 0;
  padding-left: 0.4rem;
  padding-bottom: 0.5rem;
  font-size: 1.125rem;
}

.cta-guidelines .btn-inner-row {
  padding-top: 0.9rem;
}

.guidelines-downloads a.download,
.dguidehome .guidelines-downloads .btn:first-child {
  margin-bottom: .25rem !important;
}

.info-note {
  padding-left: 30px;
  background-image: url(../images/icons/exclamation.svg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 20px;
  text-wrap: pretty;
}

.info-note-indent {
  padding-left: 30px;
}

/*
To use download-mask:
	1) Add .download-mask-wrapper to parent which has hover activation zone.
	2) Add .download-mask as child of parent that limits the width/height of stretching mask.
	3) On the parent of .download-mask, set 'position:relative' to limit the mask stretching.
*/
.download-mask-wrapper {
  /* This class sets the hover zone for the mask to activate. */
  position: relative;
  display: block;
  cursor: pointer;
  overflow: hidden;
}

.download-mask-wrapper:hover .download-mask {
  /* Animate only the mask, not the whole hover zone of download-mask-wrapper */
  transform: translateY(0);
}

.download-mask {
  /* Note: make sure nearest ancestor is position: relative to stretch only to the immediate parent */
  position: absolute;
  /* 0 for top,right,bottom,left will stretch to immediate parent, not download-mask-wrapper */
  top: -1px;
  /* remove top black line at some zoom levels */
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.7);
  background-image: url(../images/icons/download-logo.svg);
  background-size: 55%;
  background-repeat: no-repeat;
  background-position: center center;
  transform: translateY(-100%);
  /* Start position at top of parent container, out of view */
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Prevent mask from blocking interactions, clicks pass through to <a> tag below it */
  pointer-events: none;
}

.download-mask.view-modal-mask {
  background-image: url(../images/icons/view.svg);
  background-size: 20%;
}

.download-mask.mask-animation {
  background-image: url(../images/icons/view.svg);
	background-image: url(../images/icons/view-animation.svg);
  background-size: 50%;
}

iframe {
  width: 100%;
  height: 100%;
}

/* body.modal-open { */
/* Don't allow scrolling of body tag when modal is open */
/* This doesn't work because the scroll position gets reset to top of page. */
/* position: fixed; */
/* } */
.modal {
  background-color: rgb(255 255 255 / 0.5);
}

.modal .modal-content {
  border-radius: 0;
  border-width: 1px;
  border-style: solid;
}

.modal #modal_close {
  opacity: 1;
  right: 0px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 1em;
  color: var(--color-white);
  position: absolute;
  cursor: pointer;
  z-index: 1001;
  text-align: center;
  background-color: var(--color-blue);
  background-image: url(../images/icons/close.svg);
  background-repeat: no-repeat;
  background-position: center center;
}

.modal-body {
  padding: 0;
}

.section-content>div.row {
  margin-bottom: 3em;
}