@charset "UTF-8";
/* CSS Document */

.md-nav__link:active {
  color: #E40046 !important;
}

.md-nav__link:hover {
  color: #E40046 !important;
}


/* Shadow to differentiate images from white space */
img.shadow {
  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
  margin-bottom: 20px;
  margin-top: 20px;
}

/* See: docs-sdm autofix codeInline */

.sample-code {
  text-align: right;
  font-size: 0.8em;
  line-height: 0.5em;
}

/* OVERRIDES OF MATERIAL THEME */

body,
input {
  font-family: Muli, Helvetica, Arial, sans-serif;
}

h1,
h2,
h3 {
  color: #484848 !important;
  font-weight: 500 !important;
}


.md-typeset h4:target {
  --md-scroll-offset: 0.15rem;
}

.md-typeset :target {
  --md-scroll-margin: 6.6rem;
  --md-scroll-offset: 0rem;
  scroll-margin-top: calc(var(--md-scroll-margin) - var(--md-scroll-offset));
}

h4,
h5 {
  color: #484848 !important;
  font-weight: 700 !important;
  padding-top: 20px !important;
  padding-bottom: 0px !important;
}

h1 {
  margin-bottom: 20px !important;
}

.md-typeset a {
  color: #E40046 !important;
}

.md-typeset table:not([class]) th {
  background-color: rgb(65, 65, 65);
  color: #fff;
}

/* Header */

.md-header {
  height: 63px;
  background-color: #fff !important;
  position: fixed !important;
}

.md-header-nav {
  height: 63px !important;
}

.md-header-nav__title {
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  line-height: 50px !important;
}

.md-header__title {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  line-height: 50px !important;
  color: #414141;
}

.md-header__button.md-logo :is(img,svg) {
  fill: currentColor;
  display: block;
  height: 43px !important;
  width: 150px !important;
}

.visit-main-site {
  font-size: 14px;
  padding-right: 1rem;
  color: #d4d4d4;
  text-align: right;
  position: relative;
  width: 100%;
}

.visit-main-site a {
  color: #229df5;
  margin-right: 0.5rem;
  padding-right: 0.5rem;
  font-weight: bold;
}

.visit-main-site a:last-child {
  padding: 0;
  margin: 0;
  border: none;
}

/* Title and search */

.title-and-search-bar {
  width: 100%;
  position: fixed;
  top: 63px;
  background-color: #eff2f4;
  height: 50px;
  z-index: -1;
  padding-right: 0.75rem;
  box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.15);
}

[data-md-state="lock"] .title-and-search-bar {
  z-index: 1;
}

.md-header-nav__topic {
  color: #414141 !important;
}

.md-search__input,
.md-search__input:hover,
.md-search__input:focus {
  color: #414141;
  background-color: #ffffff;
  border: 1px solid #d4d4d4;
}

.md-search__input::placeholder {
  color: #757c81 !important;
}

.md-search__icon {
  color: #757c81 !important;
}

.md-search__inner {
  margin-right: 0;
}

.md-container {
  padding-top: 75px !important;
}

.md-main__inner {
  padding-top: 50px !important;
}

.md-sidebar {
  padding: 40px 0 0 0 !important;
  top: 120px !important;
  height: 100% !important;
  padding-bottom: 20px !important;
}

.md-sidebar--primary .md-nav__item {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 25px;
  text-transform: uppercase !important;
}

.fixed {
  position: fixed;
}


.md-nav__item--nested.open nav.md-nav {
  display: block !important;
  overflow: visible !important;
  max-height: 100% !important;
}

.md-nav__item--nested .md-nav .md-nav__list {
  margin-top: 2px !important;
}

.md-nav__item--nested .md-nav .md-nav__list .md-nav__item {
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0px !important;
  margin-bottom: 2px !important;
  text-transform: none !important;
}

.md-nav--secondary {
  border-left: 1px solid #e4e4e4;
  padding-left: 15px !important;
  padding-bottom: 50px !important;
}

.md-nav--secondary .md-nav__link {
  color: #E40046 !important;
}

.md-nav__title {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  margin-bottom: 25px;
  text-transform: uppercase !important;
}

.md-nav__link--active {
  color: #E40046 !important;
}

.md-content__inner {
  padding: 30px !important;
}

.md-content {
  border-left: 1px solid #e4e4e4;
}

.md-typeset .admonition {
  border-color: #757575 !important;
  border-left: 0px !important;
}

.md-typeset .admonition.summary > .admonition-title,
.md-typeset details.summary > .admonition-title,
.md-typeset .admonition.tldr > .admonition-title,
.md-typeset details.tldr > .admonition-title,
.md-typeset .admonition.summary > summary,
.md-typeset details.summary > summary,
.md-typeset .admonition.tldr > summary,
.md-typeset details.tldr > summary,
.md-typeset .admonition.abstract > .admonition-title,
.md-typeset details.abstract > .admonition-title,
.md-typeset .admonition.abstract > summary,
.md-typeset details.abstract > summary {
  background-color: rgba(34, 127, 126, 0.1) !important;
}

.md-typeset .admonition > .admonition-title,
.md-typeset details > .admonition-title,
.md-typeset .admonition > summary,
.md-typeset details > summary {
  background-color: rgba(169, 169, 169, 0.1) !important;
}

.md-typeset .admonition.summary > .admonition-title::before,
.md-typeset details.summary > .admonition-title::before,
.md-typeset .admonition.tldr > .admonition-title::before,
.md-typeset details.tldr > .admonition-title::before,
.md-typeset .admonition.summary > summary::before,
.md-typeset details.summary > summary::before,
.md-typeset .admonition.tldr > summary::before,
.md-typeset details.tldr > summary::before,
.md-typeset .admonition.abstract > .admonition-title::before,
.md-typeset details.abstract > .admonition-title::before,
.md-typeset .admonition.abstract > summary::before,
.md-typeset details.abstract > summary::before {
  color: #757575 !important;
}

.md-typeset .admonition > .admonition-title::before,
.md-typeset details > .admonition-title::before,
.md-typeset .admonition > summary::before,
.md-typeset details > summary::before {
  color: #757575 !important;
}

.md-typeset :is(.tip,.hint,.important,.note)>:is(.admonition-title,summary) {
  border-color: #757575 !important;
}

.md-typeset :is(.tip,.hint,.important,.note)>:is(.admonition-title,summary):before {
  background-color: #757575 !important;
}

.md-typeset :is(.admonition-title,summary) {
  border: 0 solid #757575 !important;
}

.md-typeset :is(.admonition-title,summary):before {
  background-color: #757575;
}

.md-footer-nav {
  background-color: #1b2937 !important;
}

.md-footer-nav__direction {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

.md-footer-nav__title {
  position:relative;
  padding:0 1rem;
  font-size:.9rem;
  line-height:1rem !important;
}

.md-content__icon, .md-footer-nav__button, .md-header-nav__button, .md-nav__button, .md-nav__title:before, .md-search-result__article--document:before {
  display: inline-block;
  margin: .2rem;
  padding: 0rem .4rem .4rem .4rem !important;
  font-size: 1.2rem;
  cursor: pointer;
}

.md-footer-meta {
  background-color: #162330 !important;
  padding: 0px 15px !important;
  text-align: left;
}

.md-footer-copyright {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

html .md-footer-meta.md-typeset a.md-footer-social__link {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 21px;
  margin-left: 5px;
}

/* OVERRIDES FOR RESPONSIVE ISSUES INTRODUCED WITH OVERRIDES */

@media only screen and (min-width: 60em) {
  .md-content {
    margin-right: 0 !important;
  }
}

@media only screen and (min-width: 76.25em) {
}

@media screen and (max-width: 76.1875em) {
 .md-nav--primary .md-nav__item--active>.md-nav__link {
  color: #E40046 !important;
 }
}

@media (max-width: 76.1875em) {
  .md-nav--primary {
    overflow-y: auto;
    overflow-x: hidden; 
    max-height: calc(100vh - 63px); 
    -webkit-overflow-scrolling: touch;
  }
}

@media screen and (max-width: 60em) {
  .md-search {
    padding: 0.2rem 0;
    display: hidden !important
  }
}

@media screen and (max-width: 76.1875em) {
.md-header__button.md-logo {
    display: inline-block !important; 
  }
}

@media only screen and (max-width: 44.9375em) {
  .md-footer-meta {
    text-align: center;
  }
}

@media only screen and (max-width: 60em) {
  .md-nav__item--nested .md-nav .md-nav__list {
    margin-top: 0px !important;
  }
  .md-nav--primary .md-nav__link {
    padding: 20px 40px 20px 20px !important;
  }
  .md-nav__source {
    padding-bottom: 15px !important;
    padding-top: 15px !important;
  }
  html .md-nav--primary .md-nav__title {
    height: auto;
    line-height: 1;
    padding: 22px 20px 22px 50px;
  }
  html .md-nav--primary .md-nav__title--site {
    background-color: #a9a9a9 !important;
    color: white !important;
    padding-left: 20px !important;
  }
  .mobile-hide {
    display: none !important;
  }
  .md-icon--menu {
    background-color: #ffffff;
    color: #757c81;
    margin: 5px 10px 5px 5px;
    padding: 10px !important;
    top: 10px;
    left: 10px;
  }

  element.style {
  }
  .md-header__button:not(.focus-visible) {
      -webkit-tap-highlight-color: transparent;
      outline: none;
  }
  .md-header__button:not([hidden]) {
      display: inline-block;
  }

  .md-header__button {
    color: #757c81 !important;
  }

  .md-header-nav__button.md-icon--home,
  .md-header-nav__button.md-logo {
    display: inline-block !important;
  }
  .md-nav__title {
    margin-bottom: 0px !important;
  }
  .md-nav__item {
    margin-bottom: 0px !important;
  }
  .title-and-search-bar {
    z-index: 1;
  }
  .md-header__inner {  
    z-index: 5;
  }
}

.md-nav__source {
  background-color: #757c81 !important;
}

.home-logo
{
	text-align: center;
}

.tile-product,
.tile-product a
{
	line-height: 1.6;
	font-size: .8rem;
	text-align: center;
	text-decoration: none;
	color: #E40046 !important;
}

.tile-text,
.tile-text a
{
	line-height: 1.2;
	text-decoration: none;
	font-size: .8rem;
	margin: 0;
	padding: 0 .4em;
	text-align: center;
  color: #484848;
}

.tile-container > .tile
{
	position: relative;
	max-width: 12rem;
	width: 12rem;
	height: 130px;
}

.tile-container-bottom > .tile
{
	position: relative;
	margin: .5rem;
	max-width: 180px;
	width: 180px;
	height: 60px;
}

.tile-container,
.tile-container-bottom
{
	display: flex;
	flex-wrap: wrap;
	grid-template-columns: repeat(10, 1fr);
  grid-template-columns: fit-content;
	column-gap: 1em;
	row-gap: 1em;
	margin: .5em auto;
	max-width: 100%;
	justify-content: left;
	text-align: center;
}

.tile-container-bottom > div.home-icon
{
	padding: 0 5px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #fff;
	border: 1px solid #d3d3d3;
	border-radius: 10px;
  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	overflow: hidden;
	margin: .1em;
	width: 10em;
	height: 7.5em;
	color: #E40046 !important;
}


.tile-container > .tile,
.tile-container-bottom > .tile
{
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #fff;
	border: 1px solid #d3d3d3;
	border-radius: 10px;
  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	overflow: hidden;
	margin: 1em;
}

.tile-container > div:hover,
.tile-container-bottom > div:hover
{
	box-shadow: 0 12px 22px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.15);
}

.home-icon
{
	display: flex;
	flex-wrap: wrap;
	grid-template-columns: repeat(8, 1fr);
	column-gap: 2em;
	row-gap: 1em;
	justify-content: center;
	font-size: 0.75rem;
}

button.mc-dropdown-item
{
	font-size: 0.625rem;
	padding: 0;
}

.landing
{
	text-align: center;
}

div.home-icon
{
	color: #E40046 !important;
}

div.home-content
{
	margin: 0;
	padding: 1em 2em;
}

div.home-content::before
{
	content: ' ';
	display: table;
}

div.home-content::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.home-content > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.home-content > div:nth-child(1)
{
	width: 75%;
	margin-left: 0;
}

div.home-content > div:nth-child(2)
{
	width: 25%;
	margin-left: 0;
}

video {
  padding-top:0px;
  padding-right:10px;
  padding-bottom:10px;
  padding-left:0px;
  }

dfn {
    font-style: normal;
    border-bottom: 1px dotted #ccc;
  }

.tooltip {
    position: relative;
    display: inline;
    border-bottom: 1px dotted #ccc;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    background-color: black;
    color: #fff;
    padding: 10px;
    font-size: .64rem;
    line-height: 1.6;
	  width: 300px;
    border-radius: 6px;
    text-align: left;
    line-height: 1.375em;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 40%;
	  margin-left: -50px;
	  opacity: 0;
    transition: opacity 0.5s;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }


  .md-typeset .admonition, .md-typeset details 
{
  border: 0 !important;
}

span.md-footer__direction
{
   display: block;
}

.md-source-file {
  border-top: .05rem solid #f5f5f5;
  padding-top: 1rem;
  margin-top: 1rem;
}

.md-top {
top: 85% !important;
}

.md-top:hover
{
  background-color:  #E40046;
}


.gif-container {
    position: relative;
    display: inline-block;
  }

.gif-container img {
    width: 550px;  /* Adjust the size to 550px */
    cursor: pointer;
    transition: all 0.3s ease-in-out; /* Add transition for smooth pop-up effect */
}

.gif-container img.overlay {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow to the overlay */
}

.gif-container img.gif {
    display: none; /* Initially hide the GIF */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow to the GIF */
    transform: scale(0.95); /* Initially scale down the GIF */
}

.gif-container img.gif:not(.hidden) {
    display: block; /* Show the GIF when not hidden */
    transform: scale(1); /* Scale up the GIF to give pop-up effect */
 }

/* external links styling for the top nav */
.visit-main-site a[href^="http"]::after,
.visit-main-site a[href^="https:"]::after,
.visit-main-site a[href^="mailto:"]::after {
  content: "";
  width: 10px;
  height: 10px;
  margin-left: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23229df5' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' stroke='%23229df5' stroke-width='1' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' stroke='%23229df5' stroke-width='1' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}

/* external links styling for the topic */
article a[href^="http"]:not(:has(> img))::after,
article a[href^="https:"]:not(:has(> img))::after,
article a[href^="mailto:"]:not(:has(> img))::after {
  content: "";
  width: 10px;
  height: 10px;
  margin-left: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23E40046' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}


/* exclude Megaport external links if needed
article a[href^="https://fb5e2f02-811d-4284-8f58-6a3a7439afaf.p.bardy.io"]::after
{
  display: none !important;
}
*/

/* language dropdown on mobile phone */

.has-submenu > ul  {
  z-index: 9;
}

.close-button 
{
  color:  #ffffff !important;
  left: 1rem !important;
  max-width: 50px !important;
}


/* Container for the header */
.header-container {
  display: flex;  /* Use flexbox for alignment */
  justify-content: space-between;  /* Space the content across the width */
  align-items: center;  /* Vertically center the content */
  width: 100%;  /* Ensure the container spans the full width */
  clear: both;  /* Ensure no floated elements interfere */
  float: right;
  width: auto;
  font-weight: bold;
  font-size: .6rem;
}

/* Style for the PDF icon link */
.pdf-icon {
  color: #E40046;  /* Red color for the PDF icon and text */
  text-decoration: none;
  display: inline-flex;  /* Align icon and text on the same line */
  align-items: center;
  padding-bottom: 1rem;
}

.pdf-icon i {
  margin-right: 5px;  /* Space between the icon and the text */
}

.pdf-icon:hover {
  opacity: 0.7; /* Hover effect */
}

@media print {
  /* Hiding unnecessary elements */
  .pdf-icon, .md-feedback, .md-header, .title-and-search-bar {
    display: none !important;
  }

  /* Prevent headings from being isolated at the bottom of a page */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid; /* Avoid breaking the page immediately after a heading */
    page-break-inside: avoid; /* Avoid breaking the page inside a heading block */
  }

  /* Ensure the content after the heading sticks with the heading */
  h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + * {
    page-break-before: avoid; /* Avoid breaking the page immediately before the content */
  }

    .md-main__inner {
    padding-top: 0 !important;
    margin-top: -30mm !important; /* Adjust main content */
  }
}

/* wrap button */
.wrap-toggle-button {
  position: absolute;
  top: 0.25rem;
  right: 2rem; /* to the left of the copy button */
  z-index: 2;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0.2rem;
  font-size: 1rem;
  color: var(--md-default-fg-color--lighter); /* lighter color by default */
  opacity: 0.4; /* same as copy button default */
  transition: opacity 0.2s, color 0.2s;
}

.wrap-toggle-button:hover,
div.highlight:hover .wrap-toggle-button,
div.codehilite:hover .wrap-toggle-button {
  color: var(--md-code-fg-color); /* match copy button when active */
  opacity: 1;
}

/* Ensure consistent icon appearance */
.wrap-toggle-button .material-icons {
  font-size: 1rem;
  color: inherit;
}

/* Remove ::after pseudo-content if any */
.wrap-toggle-button::after {
  content: none !important;
}

/* Wrap behavior */
pre {
  white-space: pre;
}

pre.wrap-enabled {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Add top/right space inside code content */
div.highlight pre > code,
div.codehilite pre > code {
  display: block;
  padding-top: 1.4rem;     /* Make room for buttons */
  padding-bottom: 1.4rem;  
}


.breadcrumbs {
  font-size: 0.80em;
  margin-bottom: 1em;
  color: #666;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.breadcrumbs a {
  text-decoration: none;
  color: var(--md-primary-fg-color);
  display: inline-flex;
  align-items: center;
}

.breadcrumbs a:hover {
  opacity: 0.6; /* subtle fade effect */
}

.breadcrumbs .home-icon {
  font-size: 1rem;
  line-height: 1;
  vertical-align: middle;
}

.breadcrumbs .breadcrumb-separator {
  margin: 0 0.25em;
}

/* Hide duplicate breadcrumb links with the same text */
.breadcrumbs a {
  display: inline;
}

.breadcrumbs a + a  {
  display: none;
}

.breadcrumbs .breadcrumb-separator + .breadcrumb-separator {
  display: none;
}