@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Yarndings+20&display=swap'); @font-face { font-family: 'DMSans'; src: url('https://static.cimcontent.net/common-web-assets/fonts/dm-sans/dmsans-regular.woff2') format('woff2'), url('https://static.cimcontent.net/common-web-assets/fonts/dm-sans/dmsans-regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'DMSans'; src: url('https://static.cimcontent.net/common-web-assets/fonts/dm-sans/dmsans-medium.woff2') format('woff2'), url('https://static.cimcontent.net/common-web-assets/fonts/dm-sans/dmsans-medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'DMSans'; src: url('https://static.cimcontent.net/common-web-assets/fonts/dm-sans/dmsans-bold.woff2') format('woff2'), url('https://static.cimcontent.net/common-web-assets/fonts/dm-sans/dmsans-bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } /* Move category expand/collapse arrow to the right side of the row. Only applies to .default-category rows (those with a tree-arrow). Article rows (which use .tree-active-circle) are unaffected. */ .tree-wrapper.default-category { display: flex; align-items: center; flex-wrap: nowrap; position: relative; } /* Indentation fillers stay on the left, in source order */ .tree-wrapper.default-category > .filler { flex: 0 0 auto; } /* Title fills the available space inside the row */ .tree-wrapper.default-category > a.data-title { flex: 1 1 auto; min-width: 0; padding-left: 8px; } .tree-wrapper > a.data-title { padding-left: 8px; } /* Context menu sits in flex flow, with right margin clearing the arrow */ .tree-wrapper.default-category > .contextMenu-container { flex: 0 0 auto; margin-right: 28px !important; /* override the existing me-2 (8px) */ } /* Arrow pinned to the right edge, out of flex flow */ .tree-wrapper.default-category > .tree-arrow { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); } /* Have extra scroll margin on top of headers + anchor so that navbar does not cover content when anchor linking */ h2, h3, h4, .targetElement { scroll-margin-top: 90px !important; } /* Have extra margin on top of h3 to help spacing, especially between dense pages */ h3 { margin-top: 1.5em !important; } /* Bolds tabs */ .tab.active { font-weight: 600 !important; } /* Standardize table styling */ thead, tbody, tfoot, tr, td, th { border-color: #d8d8d8 !important; border-style: solid !important; border-width: 1pt !important; } table th { background-color: var(--header-secondary-bg) !important; } /* Changes sidebar font size */ .ng-scroll-viewport[_nghost-serverApp-c3810715847]>.ng-scroll-content[_ngcontent-serverApp-c3810715847], .ng-scrollbar-external-viewport[_nghost-serverApp-c3810715847] .ng-scroll-viewport>.ng-scroll-content { font-size: 14px !important; } /* Changes sidebar hover and selection colors and active state */ .tree-wrapper .data-title:hover, .tree-wrapper .data-title:hover, .tree-wrapper .active, .tree-wrapper .tree-active-circle, .tree-wrapper.active .data-title { color: var(--text-theme1-base) !important; } /* Arrow inherits theme color on row hover and when the row is active. The arrow's ::before uses background-color: currentColor, so this cascades into the mask icon. */ .tree-wrapper:hover > .tree-arrow, .tree-wrapper.active > .tree-arrow, .tree-wrapper.d360-parent-of-active > .tree-arrow { color: var(--text-theme1-base); } /* Site font and heading font sizes (!important added to override font on Homepage) */ h1, h2, h3, h4, h5 { font-family: "DM Sans" !important; } /* Adjust lines in file tree so that they align with point of downward arrow */ .tree-wrapper.filler::after { left: 9.5px; } /* Add external links icon, ignoring support homepage */ .main-content a[href^="http"]:not([href^="https://x-ottapp.comcast.com"]):not([href^="https://developer.comcast.com"]):not([href^="https://docs.developer.comcast.com"]):not([href^="http://docs.developer.comcast.com"])::after { content: ""; /* Required for pseudo-elements */ display: inline-block; /* Allows width/height and positioning */ width: .9em; /* Adjust size as needed */ height: .9em; /* Adjust size as needed */ margin-left: 2px; background-color: currentColor; mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">/%3E%3C/svg%3E'); mask-repeat: no-repeat; mask-size: contain; /* Ensures the SVG fits within the defined width/height */ vertical-align: middle; /* Aligns the icon with the text */ } /* Replace right caret icon */ i.fa-solid.fa-angle-right::before { content: ""; /* Required for pseudo-elements */ display: inline-block; /* Allows width/height and positioning */ width: 18px; /* Adjust size as needed */ height: 18px; /* Adjust size as needed */ background-color: currentColor; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='9.53 18.52 8.47 17.45 13.94 11.99 8.47 6.52 9.53 5.46 16.06 11.99 9.53 18.52' stroke='black' stroke-width='.3' stroke-linejoin='miter'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-size: contain; /* Ensures the SVG fits within the defined width/height */ vertical-align: middle; } /* Replace down caret icon */ i.fa-solid.fa-angle-down::before { content: ""; /* Required for pseudo-elements */ display: inline-block; /* Allows width/height and positioning */ width: 18px; /* Adjust size as needed */ height: 18px; /* Adjust size as needed */ background-color: currentColor; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='12.01 16.06 5.48 9.53 6.54 8.47 12.01 13.94 17.48 8.47 18.54 9.53 12.01 16.06' stroke='black' stroke-width='.3' stroke-linejoin='miter'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-size: contain; /* Ensures the SVG fits within the defined width/height */ vertical-align: middle; } /* Replace home breadcrumb icon */ i.fa-regular.fa-home::before { content: ""; /* Required for pseudo-elements */ display: inline-block; /* Allows width/height and positioning */ width: 18px; /* Adjust size as needed */ height: 18px; /* Adjust size as needed */ background-color: currentColor; mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">/%3E%3C/svg%3E'); mask-repeat: no-repeat; mask-size: contain; /* Ensures the SVG fits within the defined width/height */ vertical-align: middle; } /* Replace subpath icon in breadcrumbs */ .scroll-by-button-container.breadcrumb-scroll li::before { content: "/" !important; font-family: "DM Sans" !important; font-size: 1rem !important; } /* Replace search icon */ i.fa-regular.fa-search::before, i.fa-regular.fa-magnifying-glass::before { content: ""; /* Required for pseudo-elements */ display: inline-block; /* Allows width/height and positioning */ width: 24px; /* Adjust size as needed */ height: 24px; /* Adjust size as needed */ background-color: currentColor; mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">/%3E%3C/svg%3E'); mask-repeat: no-repeat; mask-size: contain; /* Ensures the SVG fits within the defined width/height */ vertical-align: middle; } /* Replace filter icon */ i.fa-regular.fa-bars-filter::before { content: ""; /* Required for pseudo-elements */ display: inline-block; /* Allows width/height and positioning */ width: 24px; /* Adjust size as needed */ height: 24px; /* Adjust size as needed */ background-color: currentColor; mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">/%3E%3C/svg%3E'); mask-repeat: no-repeat; mask-size: contain; /* Ensures the SVG fits within the defined width/height */ vertical-align: middle; } /* Replace open folder index icon */ i.fad.fa-folder-open::before { content: ""; /* Required for pseudo-elements */ display: inline-block; /* Allows width/height and positioning */ width: 2rem; /* Adjust size as needed */ height: 2rem; /* Adjust size as needed */ background-color: var(--bs-body-color); mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="currentColor" id="a" data-name="Layer 1" width="24" height="24" viewBox="0 0 24 24">/%3E%3C/svg%3E'); mask-repeat: no-repeat; mask-size: contain; /* Ensures the SVG fits within the defined width/height */ vertical-align: middle; } i.fad.fa-folder-open::after { visibility: hidden !important; } /* Replace index docs icon */ i.fa-regular.fa-memo-pad.me-1::before { content: ""; /* Required for pseudo-elements */ display: inline-block; /* Allows width/height and positioning */ width: 24px; /* Adjust size as needed */ height: 24px; /* Adjust size as needed */ background-color: currentColor; mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">/%3E%3C/svg%3E'); mask-repeat: no-repeat; mask-size: contain; /* Ensures the SVG fits within the defined width/height */ vertical-align: middle; } /* Replace closed folder index icons */ i.fa-duotone.fa-folder-closed.me-1::after { content: ""; /* Required for pseudo-elements */ display: inline-block; /* Allows width/height and positioning */ width: 1.75rem; /* Adjust size as needed */ height: 1.75rem; /* Adjust size as needed */ background-color: currentColor; mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="currentColor" id="a" data-name="Layer 1" width="24" height="24" viewBox="0 0 24 24">/%3E%3C/svg%3E'); mask-repeat: no-repeat; mask-size: contain; /* Ensures the SVG fits within the defined width/height */ vertical-align: middle; opacity: 1; } i.fa-duotone.fa-folder-closed.me-1::before { visibility: hidden !important; } /* Replace link icon */ i.fa-regular.fa-link-horizontal::before { content: ""; /* Required for pseudo-elements */ display: inline-block; /* Allows width/height and positioning */ width: 24px; /* Adjust size as needed */ height: 24px; /* Adjust size as needed */ background-color: currentColor; mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">/%3E%3C/svg%3E'); mask-repeat: no-repeat; mask-size: contain; /* Ensures the SVG fits within the defined width/height */ vertical-align: middle; } /* Rotate link icon in article title to correct from doc360 rotation */ .article-title i.fa-regular.fa-link-horizontal::before, .sticky-article-title i.fa-regular.fa-link-horizontal::before { transform: rotate(45deg); } /* Hide small folder and doc icons in list */ i.fa-regular.fa-folder-closed.me-2, i.fa-regular.fa-memo-pad.me-2, div.page-info i.fa-regular.fa-memo-pad.me-1::before { display: none; } /* Bold ordered list marker to help distinguish from text */ ol>li::marker { font-weight: bold !important; } /* Change category and article title fonts*/ body, div, p, h1.category-title, span.article-title { font-family: "DM Sans" !important; font-weight: 400 !important; } /* Removes letter spacing added by Doc360 */ body, div, p, span { letter-spacing: normal !important; } /* Rounded images in article content */ #articleContent img { border-radius: 8px; } /*hr-divider2 styling .editor360-preview-content .hr-divider2, .editor360-article-content .hr-divider2, .editor360-published-content .hr-divider2 { border: none; border-top: 1px solid grey; width: 60px; margin: 1.5rem auto; } */ /* Custom requirement code format in header */ h3>code { font-weight: 500; padding: 2px 5px; } /* Custom nav highlight applied to the title rather than the row, so the highlight starts after any indentation fillers. */ div.tree-wrapper.active.highlight { background-color: transparent !important; } /* General active styling — applies to all active rows */ div.tree-wrapper.active.highlight > a.data-title { background-color: #F1ECF8 !important; border-radius: 3px !important; align-self: stretch; display: flex; align-items: center; flex: 1 1 auto !important; } /* Extend bg leftward only on nested rows (those that have at least one filler) */ div.tree-wrapper.active.highlight:has(> .filler) > a.data-title { margin-left: -8px; padding-left: 16px !important; } div.tree-wrapper div.filler::after { display: none !important; } /* Highlight the ancestor chain of the active item (marker class set by JS) */ .tree-wrapper.d360-parent-of-active > a.data-title { color: var(--text-theme1-base) !important; } /* Hide active article circle nav */ .tree-active-circle { display: none; } /* Non-category nave weight + hover weight */ .tree-wrapper.active a.data-title, .tree-wrapper a.data-title, .tree-wrapper a.data-title:hover, .tree-wrapper .data-title:hover { font-weight: 500 !important; } .progress-bar { background: #28006A !important; } div.node.tree-wrapper.highlight div.filler::after { left: 10px !important; } :root { /* Xfinity semantic light secondary */ --header-secondary-bg: #F6F6F9 !important; --bs-progres-bar-color: #6138f5 !important; --editor-360-block-body-font: "DM Sans"; --text-theme1-base: #5A23B9; --material-info-base: #D9E1F2; --material-caution-base: #F2E1D9; --material-negative-base: #F2D9E1; --material-positive-base: #D9F2EA; --text-info-base: #0051D0; --text-caution-base: #B33D00; --text-negative-base: #B7023C; --text-positive-base: #006851; } .tree-wrapper a.data-title[aria-label="Explore"], .tree-wrapper a.data-title[aria-label="Design & Plan"], .tree-wrapper a.data-title[aria-label="Develop"], .tree-wrapper a.data-title[aria-label="Launch"], .tree-wrapper a.data-title[aria-label="Firebolt APIs"], .tree-wrapper a.data-title[aria-label="Legacy Documentation"] { font-size: 14px; font-weight: 600 !important; } /* Bold top-level folders in nav */ .tree-wrapper a.data-title.cursor-pointer[aria-label="Explore"]:hover, .tree-wrapper a.data-title.cursor-pointer[aria-label="Design & Plan"]:hover, .tree-wrapper a.data-title.cursor-pointer[aria-label="Develop"]:hover, .tree-wrapper a.data-title.cursor-pointer[aria-label="Launch"]:hover, .tree-wrapper a.data-title.cursor-pointer[aria-label="Firebolt APIs"]:hover, .tree-wrapper a.data-title.cursor-pointer[aria-label="Legacy Documentation"]:hover { font-size: 14px; font-weight: 600 !important; } /* Custom Details Tag */ :not(.details-wrapper)>details { border: 1px solid #CECEDA; border-radius: 4px; background: #F6F6F9; margin: 1.5em 0; padding: 0.5em 1em; } :not(.details-wrapper)>details summary { cursor: pointer; font-weight: 600; vertical-align: middle; padding: 0.5em 0; outline: none; list-style: none; display: block; align-items: center; position: relative; } :not(.details-wrapper)>details summary>strong { vertical-align: middle; font-weight: 600; } :not(.details-wrapper)>details summary::-webkit-details-marker { display: none; } :not(.details-wrapper)>details summary::before { content: ""; /* Required for pseudo-elements */ display: inline-block; /* Allows width/height and positioning */ width: 18px; /* Adjust size as needed */ height: 18px; /* Adjust size as needed */ background-color: currentColor; margin-right: .5em; mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">/%3E%3C/svg%3E'); mask-repeat: no-repeat; mask-size: contain; /* Ensures the SVG fits within the defined width/height */ vertical-align: middle; bottom: 6px; transition: transform 0.2s; } :not(.details-wrapper)>details[open] summary::before { transform: rotate(90deg); } :not(.details-wrapper)>details>*:not(summary) { margin-left: 1.5em; margin-bottom: 0.5em; } :not(.details-wrapper)>details[open] summary::after { content: ""; display: block; border-bottom: 1px solid #CECEDA; margin-top: 16px; margin-bottom: 16px; } /* Custom requirement code format in header */ h3>code { border: 1px solid #CECEDA; border-radius: 4px; background: #F6F6F9 !important; font-weight: 500; padding: 2px 5px; } div.code-toolbar>.toolbar { border-radius: 4px 4px 0 0 !important; background: #F6F6F9 !important; } div.code-toolbar>.toolbar .toolbar-item { font-weight: 500 !important; } pre[class*=language-] { border-radius: 4px !important; background: #FFFFFF !important; } /* Link color and formatting (broken by doc360 in that custom colors no longer work in normal theme settings) */ .editor360-preview-content a, .editor360-article-content a, .editor360-published-content a { color: var(--site-link-color); text-decoration: underline; } .editor360-preview-content a:visited, .editor360-article-content a:visited, .editor360-published-content a:visited { color: var(--site-link-visited-color); text-decoration: underline; } .editor360-preview-content a:hover, .editor360-article-content a:hover, .editor360-published-content a:hover { color: var(--site-link-hover-color); } p .editor360-published-content { font-family: "DM Sans" !important; } /****************************************************** Fix "In this article" right sidebar height ******************************************************/ /* Override the JS-injected 320px max-height cap on the TOC scroll area */ .toc-scroll-bar.toc-scroll-limited { max-height: none !important; height: auto !important; } /***************************************************** Cards & Card Grids *****************************************************/ /* Float three columns side by side */ .column { float: left; width: 33.3%; padding: 0 10px; } .flex-container { display: flex; gap: 16px; } .flex-column { flex: 1; padding: 5px; } /* Remove extra left and right margins, due to padding in columns */ .row { margin: 0 -5px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Style the counter cards */ .card { /* this adds the "card" effect */ padding: 16px; text-align: left; background-color: #F6F6F9; border-style: solid; border-radius: 12px; border-width: 1px !important; border-color: #D9D9D9 !important; } /* Responsive columns - one column layout (vertical) on small screens */ @media screen and (max-width: 600px) { .column { width: 100%; display: block; margin-bottom: 20px; } } .single-card-container { display: grid; /* Define columns: 1 column*/ grid-template-columns: repeat(1, 1fr); /* Add a gap between grid items (cards) */ grid-gap: 20px; /* Optional: Center the grid and set a maximum width */ max-width: 1200px; margin: 0 auto; padding: 8px; } .two-card-grid-container { display: grid; /* Define columns: 2 columns, each taking an equal fraction of the available space */ grid-template-columns: repeat(2, 1fr); /* Add a gap between grid items (cards) */ grid-gap: 20px; /* Optional: Center the grid and set a maximum width */ max-width: 1200px; margin: 0 auto; padding: 8px; } .three-card-grid-container { display: grid; /* Define columns: 3 columns, each taking an equal fraction of the available space */ grid-template-columns: repeat(3, 1fr); /* Add a gap between grid items (cards) */ grid-gap: 20px; /* Optional: Center the grid and set a maximum width */ max-width: 1200px; margin: 0 auto; padding: 8px; } @media (max-width: 768px) { .card-grid-container { /* Change to 2 columns on medium screens */ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .card-grid-container { /* Change to 1 column on small screens */ grid-template-columns: 1fr; } } /***************************************************** Callouts *****************************************************/ /* }.infoBox { background-color: var(--material-info-base) !important; color: var(--text-info-base) !important; } .errorBox { background: var(--material-negative-base) !important; color: var(--text-negative-base) !important; } .warningBox { background: var(--material-caution-base) !important; color: var(--text-caution-base) !important; } .successBox { background: var(--material-positive-base) !important; color: var(--text-positive-base) !important; } */ /***************************************************** Top Navigation bar styling to match rest of dev portal *****************************************************/ /*Remove separator image before menu*/ .nav-bar-nav.nav-l.divider { border: none; } /*update nav links color to match with figma*/ site-primary-header-section { max-height: 80px !important; } .primary-nav-bar-container .nav-bar.primary-nav-bar { padding-top: 20px !important; padding-bottom: 20px !important; height: 80px !important; } .primary-nav-bar-container .nav-bar-nav.nav-l>ul>li>a { padding: 8px 12px; } .primary-nav-bar-container .nav-bar-nav.nav-l>ul>li>a>span { color: #141417; font-size: 14px; font-family: 'DMSans'; font-weight: 400; } .primary-nav-bar-container .nav-bar-nav.nav-l>ul>li>a:hover { color: rgb(72 72 81/var(--tw-text-opacity)) !important; text-decoration: none !important; } .primary-nav-bar-container .nav-bar-nav.nav-l>ul>li>a:hover::after { width: 33%; left: 50%; } .primary-nav-bar-container .nav-bar-nav.nav-l>ul>li>a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background-color: #6138F5; transition: width 0.3s ease, left 0.3s ease; transform: translateX(-50%); } .primary-nav-bar-container .nav-bar-nav.nav-l>ul { gap: 0 !important; } .primary-nav-bar-container .nav-bar-nav.nav-l>ul>li>a.active>span { font-size: 14px; font-weight: 700; } .primary-nav-bar-container .nav-bar .nav-bar-brand { margin: 0; } .primary-nav-bar-container .nav-bar.primary-nav-bar { margin: 0 40px; } .primary-nav-bar-container .nav-bar .nav-bar-brand>a.brand-logo>span.brand-text { font-size: 20px; font-weight: 700; font-family: 'DMSans'; line-height: 24px;

Documentation Index

launchCompletedMetricsHandler()

launchCompletedMetricsHandler()