@charset "utf-8";
[theme=developers] {
    --devsite-primary-color: #1a73e8;
    --devsite-secondary-color: #185abc
    }
[foreground=developers], [theme=developers] [foreground=theme] {
    --devsite-foreground-color: #1a73e8;
    --devsite-foreground-button-background-hover: #e8f1fd;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #c6dcf9;
    --devsite-foreground-button-border-color-active: #e8f1fd;
    --devsite-foreground-button-color: #1a73e8;
    --devsite-foreground-button-primary-background: #1a73e8;
    --devsite-foreground-button-primary-background-hover: #185abc;
    --devsite-foreground-button-primary-color: #fff
    }
[theme=blue-grey] {
    --devsite-primary-color: #607d8b;
    --devsite-secondary-color: #455a64
    }
[theme=blue-grey-dark] {
    --devsite-primary-color: #455a64;
    --devsite-secondary-color: #37474f
    }
[theme=cyan] {
    --devsite-primary-color: #12b5cb;
    --devsite-secondary-color: #098591
    }
[theme=deep-orange] {
    --devsite-primary-color: #ff5722;
    --devsite-secondary-color: #e64a19
    }
[theme=deep-purple] {
    --devsite-primary-color: #673ab7;
    --devsite-secondary-color: #512da8
    }
[theme=google-blue] {
    --devsite-primary-color: #1a73e8;
    --devsite-secondary-color: #185abc
    }
[theme=google-green] {
    --devsite-primary-color: #1e8e3e;
    --devsite-secondary-color: #137333
    }
[theme=google-red] {
    --devsite-primary-color: #d93025;
    --devsite-secondary-color: #b31412
    }
[theme=google-yellow] {
    --devsite-primary-color: #f9ab00;
    --devsite-secondary-color: #ea8600
    }
[theme=indigo] {
    --devsite-primary-color: #3f51b5;
    --devsite-secondary-color: #303f9f
    }
[theme=orange] {
    --devsite-primary-color: #e8710a;
    --devsite-secondary-color: #c26401
    }
[theme=pink] {
    --devsite-primary-color: #e52592;
    --devsite-secondary-color: #b80672
    }
[theme=purple] {
    --devsite-primary-color: #9334e6;
    --devsite-secondary-color: #7627bb
    }
[theme=teal] {
    --devsite-primary-color: #009688;
    --devsite-secondary-color: #00796b
    }
[theme=blue] {
    --devsite-primary-color: #1a73e8;
    --devsite-secondary-color: #185abc
    }
[theme=green] {
    --devsite-primary-color: #1e8e3e;
    --devsite-secondary-color: #137333
    }
[theme=light-blue] {
    --devsite-primary-color: #0288d1;
    --devsite-secondary-color: #01579b
    }
[theme=light-green] {
    --devsite-primary-color: #8bc34a;
    --devsite-secondary-color: #689f38
    }
[theme=navy] {
    --devsite-primary-color: #3f51b5;
    --devsite-secondary-color: #303f9f
    }
[theme=pale-blue] {
    --devsite-primary-color: #12b5cb;
    --devsite-secondary-color: #098591
    }
[theme=google-yellow], [theme=light-green] {
    --devsite-header-foreground-lower: rgba(0, 0, 0, 0.87);
    --devsite-header-foreground-lower-hover: #202124;
    --devsite-header-foreground-lower-active: #202124
    }
[theme=cyan] [background=theme], [theme=google-yellow] [background=theme], [theme=light-green] [background=theme], [theme=orange] [background=theme] {
    --devsite-background-button-white-color: #202124;
    --devsite-link-color: #202124;
    --devsite-text-color: #202124;
    --devsite-text-color-hover: hsla(210, 6%, 63%, 0.5)
    }
[theme=cyan] {
    --devsite-background-color: #43cde6
    }
[theme=google-yellow] {
    --devsite-background-color: #fcc934
    }
[theme=light-green] {
    --devsite-background-color: #aed581
    }
[theme=orange] {
    --devsite-background-color: #fcad70
    }
[theme=white] {
    --devsite-primary-color: #fff;
    --devsite-secondary-color: #202124;
    --devsite-cta-background: var(--devsite-link-color);
    --devsite-feedback-icon-background: var(--devsite-link-color);
    --devsite-header-border: 1px solid #bdc1c6;
    --devsite-header-foreground-lower: var(--devsite-secondary-text-color);
    --devsite-header-foreground-lower-hover: var(--devsite-primary-text-color);
    --devsite-header-foreground-lower-active: var(--devsite-primary-text-color);
    --devsite-progress-background-color: #5f6368;
    --devsite-toc-border: #039be5;
    --devsite-user-avatar-background: var(--devsite-link-color);
    --devsite-user-avatar-color: var(--devsite-inverted-text-color)
    }
[theme=white] .devsite-product-button-row {
    --devsite-button-border: 1px solid #dadce0;
    --devsite-button-border-hover: 1px solid #d2e3fc;
    --devsite-button-border-active: 1px solid #e8f0fe;
    --devsite-button-line-height: 34px
    }
[theme=cars-theme] {
    --devsite-body-background: #fff;
    --devsite-header-color-lower: #f7f9fa;
    --devsite-header-foreground-lower: rgba(32, 33, 36, 0.7);
    --devsite-header-foreground-lower-hover: #202124;
    --devsite-header-foreground-lower-active: #202124;
    --devsite-header-foreground-lower-description: #202124;
    --devsite-header-link-color: #1a73e8;
    --devsite-header-link-color-active: #185abc;
    --devsite-lower-tab-marker-color-active: #3ddc84;
    --devsite-page-border: 1px solid #dadce0;
    --devsite-page-border-radius: 8px;
    --devsite-page-box-shadow: none;
    --devsite-first-row-border-radius: 8px 8px 0 0;
    --devsite-last-row-border-radius: 0 0 8px 8px;
    --devsite-upper-tab-active: #202124;
    --devsite-upper-tab-marker-color: #3ddc84
    }
[theme=cars-theme] {
    --devsite-primary-color: #3ddc84;
    --devsite-secondary-color: #00a956
    }
[foreground=cars-theme], [theme=cars-theme] [foreground=theme] {
    --devsite-foreground-color: #3ddc84;
    --devsite-foreground-button-background-hover: #ecfcf3;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #cff6e0;
    --devsite-foreground-button-border-color-active: #ecfcf3;
    --devsite-foreground-button-color: #3ddc84;
    --devsite-foreground-button-primary-background: #3ddc84;
    --devsite-foreground-button-primary-background-hover: #00a956;
    --devsite-foreground-button-primary-color: #fff
    }
[theme=nest-theme] {
    --devsite-header-icon-color-active: #bdc1c6;
    --devsite-header-link-color: #039be5;
    --devsite-header-link-color-active: #0277bd;
    --devsite-upper-tab-marker-color: #0096c8
    }
[theme=nest-theme] {
    --devsite-primary-color: #00afd8;
    --devsite-secondary-color: #0096c8
    }
[foreground=nest-theme], [theme=nest-theme] [foreground=theme] {
    --devsite-foreground-color: #00afd8;
    --devsite-foreground-button-background-hover: #e6f7fb;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #bfebf5;
    --devsite-foreground-button-border-color-active: #e6f7fb;
    --devsite-foreground-button-color: #00afd8;
    --devsite-foreground-button-primary-background: #00afd8;
    --devsite-foreground-button-primary-background-hover: #0096c8;
    --devsite-foreground-button-primary-color: #fff
    }
[theme=stadia-theme] {
    --devsite-header-link-color: #9b0063;
    --devsite-header-link-color-active: #680039;
    --devsite-header-link-color-visited: #d04791
    }
[theme=stadia-theme] {
    --devsite-primary-color: #9b0063;
    --devsite-secondary-color: #680039
    }
[foreground=stadia-theme], [theme=stadia-theme] [foreground=theme] {
    --devsite-foreground-color: #9b0063;
    --devsite-foreground-button-background-hover: #f5e6ef;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #e6bfd8;
    --devsite-foreground-button-border-color-active: #f5e6ef;
    --devsite-foreground-button-color: #9b0063;
    --devsite-foreground-button-primary-background: #9b0063;
    --devsite-foreground-button-primary-background-hover: #680039;
    --devsite-foreground-button-primary-color: #fff
    }
[theme=youtube-theme] {
    --devsite-primary-color: red;
    --devsite-secondary-color: #c20000
    }
[foreground=youtube-theme], [theme=youtube-theme] [foreground=theme] {
    --devsite-foreground-color: red;
    --devsite-foreground-button-background-hover: #ffe6e6;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #ffbfbf;
    --devsite-foreground-button-border-color-active: #ffe6e6;
    --devsite-foreground-button-color: red;
    --devsite-foreground-button-primary-background: red;
    --devsite-foreground-button-primary-background-hover: #c20000;
    --devsite-foreground-button-primary-color: #fff
    }
body, dd, div, dl, figure, form, img, input, menu {
    margin: 0;
    padding: 0
    }
body[no-overflow] {
    overflow: hidden
    }
iframe {
    border: 0
    }
iframe:not([src]) {
    display: none
    }
.beta > :first-child, .caution > :first-child, .deprecated > :first-child, .dogfood > :first-child, .experimental > :first-child, .key-point > :first-child, .key-term > :first-child, .note > :first-child, .objective > :first-child, .preview > :first-child, .quickstart-left > :first-child, .quickstart-wide > :first-child, .special > :first-child, .success > :first-child, .warning > :first-child, aside > :first-child, blockquote > :first-child, dd > :first-child, li > p:first-child, td > .devsite-table-wrapper:first-child > table, td > .expandable:first-child > :nth-child(2), td > :first-child, td > :first-child > li:first-child {
    margin-top: 0
    }
.beta > :last-child, .caution > :last-child, .deprecated > :last-child, .dogfood > :last-child, .experimental > :last-child, .key-point > :last-child, .key-term > :last-child, .note > :last-child, .objective > :last-child, .preview > :last-child, .quickstart-left > :last-child, .quickstart-wide > :last-child, .special > :last-child, .success > :last-child, .warning > :last-child, aside > :last-child, blockquote > :last-child, dd > :last-child, li > p:last-child, td > .devsite-table-wrapper:last-child > table, td > .expandable:last-child > :last-child, td > :last-child, td > :last-child > li:last-child {
    margin-bottom: 0
    }
html {
    -moz-box-sizing: border-box;
    box-sizing: border-box
    }
*, :after, :before {
    -moz-box-sizing: inherit;
    box-sizing: inherit
    }
.clearfix:after, .quickstart-step:after {
    clear: both;
    content: "";
    display: table;
    height: 0;
    visibility: hidden
    }
:root {
    --devsite-code-font-family: Roboto Mono, monospace;
    --devsite-primary-font-family: Roboto, Noto Sans, Noto Sans JP, Noto Sans KR, Noto Naskh Arabic, Noto Sans Thai, Noto Sans Hebrew, Noto Sans Bengali, sans-serif;
    --devsite-h1-margin: 40px 0 20px;
    --devsite-h2-margin: 40px 0 20px;
    --devsite-h3-margin: 32px 0 16px;
    --devsite-h4-font: 500 16px/24px var(--devsite-primary-font-family);
    --devsite-h5-font: 700 14px/24px var(--devsite-primary-font-family);
    --devsite-h6-font: 500 14px/24px var(--devsite-primary-font-family);
    --devsite-background-0: #e8eaed;
    --devsite-background-1: #fff;
    --devsite-background-2: #f8f9fa;
    --devsite-background-3: #f1f3f4;
    --devsite-background-4: #e8eaed;
    --devsite-background-5: #dadce0;
    --devsite-primary-text-color: #202124;
    --devsite-primary-text-rgba: rgba(0, 0, 0, 0.87);
    --devsite-secondary-text-color: #5f6368;
    --devsite-secondary-text-rgba: rgba(0, 0, 0, 0.65);
    --devsite-tertiary-text-color: #bdc1c6;
    --devsite-tertiary-text-rgba: rgba(0, 0, 0, 0.26);
    --devsite-inverted-text-color: #fff;
    --devsite-inverted-text-color-hover: hsla(0, 0%, 100%, 0.7);
    --devsite-inverted-text-rgba: hsla(0, 0%, 100%, 0.7);
    --devsite-primary-border: 1px solid #dadce0;
    --devsite-secondary-border: 1px solid #e8eaed;
    --devsite-elevation-key-shadow-color: rgba(60, 64, 67, 0.3);
    --devsite-elevation-ambient-shadow-color: rgba(60, 64, 67, 0.15);
    --devsite-elevation-inset-shadow-color: hsla(210, 6%, 63%, 0.5);
    --tenant-background-1: #fff;
    --tenant-background-2: #f8f9fa;
    --tenant-background-3: #f1f3f4;
    --tenant-primary-text-color: #202124;
    --tenant-secondary-text-color: #5f6368;
    --tenant-inverted-text-color: #fff;
    --tenant-primary-border: 1px solid #dadce0;
    --tenant-secondary-border: 1px solid #e8eaed;
    --devsite-link-background: #d2e3fc;
    --devsite-link-background-active: #e8f0fe;
    --devsite-link-color: #1a73e8;
    --devsite-contrast-link-color: #185abc;
    --devsite-button-background-hover: #e4eefc;
    --devsite-button-background-active: #c8ddf9;
    --devsite-button-color: #1a73e8;
    --devsite-button-primary-color: #fff;
    --devsite-caution-notice-background: #feefe3;
    --devsite-caution-notice-color: #bf360c;
    --devsite-key-point-notice-background: #e8eaf6;
    --devsite-key-point-notice-color: #3f51b5;
    --devsite-key-term-notice-background: #f3e8fd;
    --devsite-key-term-notice-color: #9334e6;
    --devsite-note-notice-background: #e1f5fe;
    --devsite-note-notice-color: #01579b;
    --devsite-status-notice-background: #eceff1;
    --devsite-status-notice-color: #546e7a;
    --devsite-success-notice-background: #e0f2f1;
    --devsite-success-notice-color: #00796b;
    --devsite-warning-notice-background: #fce8e6;
    --devsite-warning-notice-color: #d50000;
    --devsite-notice-margin: 16px 0;
    --devsite-notice-padding-block: 16px;
    --devsite-notice-padding-inline: 60px 24px;
    --devsite-book-nav-background: var(--devsite-background-1);
    --devsite-concierge-top: 48px;
    --devsite-concierge-width-closed: 54px;
    --devsite-concierge-width-open: 387px;
    --devsite-concierge-width: 0;
    --devsite-card-background: var(--devsite-background-1);
    --devsite-card-header-background: var(--devsite-background-3);
    --devsite-checkbox-border-radius: 2px;
    --devsite-checkbox-icon-canvas-border-radius: 50%;
    --devsite-checkbox-icon-canvas-offset-x: -9px;
    --devsite-checkbox-icon-canvas-offset-y: -9px;
    --devsite-checkbox-icon-canvas-size: 36px;
    --devsite-checkbox-margin-block: -2px 2px;
    --devsite-checkbox-margin-inline: 0 8px;
    --devsite-checkbox-offset-x: 3px;
    --devsite-checkbox-offset-y: -3px;
    --devsite-checkbox-size: 18px;
    --devsite-feature-tooltip-background-color: #1a73e8;
    --devsite-feature-tooltip-offset-y: 3px;
    --devsite-input-background: var(--devsite-background-1);
    --devsite-input-border: var(--devsite-secondary-border);
    --devsite-item-gap: 24px;
    --devsite-mdc-line-height: 56px;
    --devsite-scrollbar-thumb-background: hsla(207, 5%, 52%, 0.26);
    --devsite-select-background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"4\" viewBox=\"0 0 20 4\"><path d=\"M0,0l4,4l4-4H0z\" fill=\"%23202124\"/></svg>");
    --devsite-select-border-radius: 2px
    }
[lang=ar], [lang=fa] {
    --devsite-nav-item-line-height: 18px
    }
devsite-appearance-selector {
    --devsite-appearance-selector-menu-transform: translate3d(-10px, 0, 0)
    }
[dir=rtl] devsite-appearance-selector {
    --devsite-appearance-selector-menu-transform: translate3d(calc(46px - 100%), 0, 0)
    }
devsite-bookmark {
    --devsite-bookmark-background: 0;
    --devsite-bookmark-background-focus-legacy: var(--devsite-background-4);
    --devsite-bookmark-background-hover-legacy: var(--devsite-background-3);
    --devsite-bookmark-icon-color: var(--devsite-secondary-text-color);
    --devsite-bookmark-icon-color-saved: var(--devsite-link-color);
    --devsite-bookmark-icon-color-saved-hover: #174ea6;
    --devsite-dropdown-list-toggle-background-hover: var(--devsite-background-3);
    --devsite-dropdown-list-toggle-border: var(--devsite-primary-border, 0);
    --devsite-dropdown-list-toggle-border-hover: var(--devsite-primary-border);
    --devsite-dropdown-list-toggle-height: 36px
    }
devsite-book-nav {
    --devsite-book-nav-input-height: 32px;
    --devsite-nav-divider-background: #eceff1
    }
.devsite-book-nav-toggle[aria-expanded] {
    --devsite-book-nav-toggle-background: var(--devsite-background-3);
    --devsite-book-nav-toggle-background-hover: var(--devsite-background-4)
    }
.devsite-book-nav-toggle:not([aria-expanded]) {
    --devsite-book-nav-toggle-background: var(--devsite-background-1);
    --devsite-book-nav-toggle-background-hover: var(--devsite-background-3)
    }
devsite-carousel {
    --devsite-carousel-gap: 16px 24px;
    --devsite-carousel-grid: 1fr 40px/40px 1fr 40px;
    --devsite-carousel-item-flex: 0 0 var(--devsite-carousel-item-width, auto);
    --devsite-carousel-marker-margin-inline: -18px 0;
    --devsite-carousel-marker-size: 12px;
    --devsite-carousel-markers-gap: 0 4px;
    --devsite-carousel-markers-grid-column: 2;
    --devsite-carousel-markers-grid-row: 2;
    --devsite-carousel-next-grid-column: 3;
    --devsite-carousel-prev-grid-column: 1;
    --devsite-carousel-prev-next-grid-row: 2;
    --devsite-carousel-slideshow-grid-column: 1/-1;
    --devsite-carousel-slideshow-grid-row: 1
    }
devsite-carousel[data-items-per-slide] {
    --devsite-carousel-item-gap: 0 24px
    }
devsite-carousel[data-items-per-slide=auto] {
    --devsite-carousel-item-gap: 0 8px
    }
[template=page] devsite-carousel[data-full-width], [template=page] devsite-carousel[data-items-per-slide=auto] {
    --devsite-carousel-gap: 16px 40px;
    --devsite-carousel-grid: 1fr 40px/0 40px 1fr 40px 0;
    --devsite-carousel-margin-inline: -40px;
    --devsite-carousel-markers-grid-column: 3;
    --devsite-carousel-next-grid-column: 4;
    --devsite-carousel-prev-grid-column: 2;
    --devsite-carousel-slideshow-grid-column: 1/-1;
    --devsite-carousel-slideshow-padding-inline: 40px
    }
[template=page] devsite-carousel[data-items-per-slide=auto] {
    --devsite-carousel-ghost-item-width: 32px;
    --devsite-carousel-slideshow-scroll-padding: 0 40px
    }
devsite-catalog {
    --devsite-button-icon-content: "cancel";
    --devsite-button-icon-margin-x-end: 8px;
    --devsite-button-icon-margin-x-start: 8px;
    --devsite-catalog-grid: "sidebar main" 1fr/1fr 3fr;
    --devsite-chips-gap: 8px;
    --devsite-dynamic-content-margin: 0;
    --devsite-catalog-sidebar-button-display: none !important;
    --devsite-input-border-radius: var(--devsite-card-border-radius);
    --devsite-input-height: 40px;
    --devsite-input-padding: 7px 16px;
    --devsite-input-width: 100%;
    --devsite-notice-margin: 16px 0;
    --devsite-notice-padding-block: 16px;
    --devsite-notice-padding-inline: 60px 24px
    }
[layout=docs] devsite-catalog {
    --devsite-catalog-grid: "sidebar main" 1fr/1fr 2fr
    }
[layout=docs] devsite-catalog:not([items-across]), devsite-catalog[template=activity]:not([items-across]) {
    --devsite-columns: 2
    }
devsite-catalog .catalog-filter-chip {
    --devsite-button-sibling-gap-x: 0
    }
[dir=ltr] devsite-catalog .catalog-filter-chip {
    --devsite-button-padding: 0 0 0 12px
    }
[dir=rtl] devsite-catalog .catalog-filter-chip {
    --devsite-button-padding: 0 12px 0 0
    }
devsite-code, devsite-content {
    --devsite-code-background: #f1f3f4;
    --devsite-code-color: #37474f;
    --devsite-var-color: #d01884
    }
devsite-code {
    --devsite-code-buttons-toggle-dark-display: inline;
    --devsite-code-buttons-toggle-light-display: none;
    --devsite-code-comments-color: #b80672;
    --devsite-code-keywords-color: #1967d2;
    --devsite-code-numbers-color: #c5221f;
    --devsite-code-strings-color: #188038;
    --devsite-code-types-color: #9334e6;
    --devsite-github-link-icon: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M9-.06A9,9,0,0,0,6.16,17.48c.44.09.59-.19.59-.43V15.38c-2.5.54-3-1.07-3-1.07a2.35,2.35,0,0,0-1-1.31c-.82-.56.06-.55.06-.55a1.89,1.89,0,0,1,1.38.93,1.92,1.92,0,0,0,2.62.75,1.91,1.91,0,0,1,.57-1.21c-2-.23-4.1-1-4.1-4.45a3.49,3.49,0,0,1,.92-2.41,3.25,3.25,0,0,1,.09-2.38S5,3.43,6.75,4.6a8.59,8.59,0,0,1,4.5,0c1.72-1.17,2.48-.92,2.48-.92a3.25,3.25,0,0,1,.09,2.38,3.49,3.49,0,0,1,.92,2.41c0,3.46-2.1,4.22-4.11,4.44a2.14,2.14,0,0,1,.62,1.67v2.47c0,.24.14.52.6.43A9,9,0,0,0,9-.06Z\" fill=\"%231a73e8\"/></svg>")
    }
devsite-code[dark-code] {
    --devsite-code-background: #283142;
    --devsite-code-buttons-color: hsla(0, 0%, 100%, 0.7);
    --devsite-code-buttons-hover: #fff;
    --devsite-code-buttons-toggle-dark-display: none;
    --devsite-code-buttons-toggle-light-display: inline;
    --devsite-code-color: #eceff1;
    --devsite-code-comments-color: #ff8bcb;
    --devsite-code-keywords-color: #78d9ec;
    --devsite-code-numbers-color: #fbc02d;
    --devsite-code-strings-color: #9ccc65;
    --devsite-code-types-color: #d7aefb;
    --devsite-github-link-icon: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M9-.06A9,9,0,0,0,6.16,17.48c.44.09.59-.19.59-.43V15.38c-2.5.54-3-1.07-3-1.07a2.35,2.35,0,0,0-1-1.31c-.82-.56.06-.55.06-.55a1.89,1.89,0,0,1,1.38.93,1.92,1.92,0,0,0,2.62.75,1.91,1.91,0,0,1,.57-1.21c-2-.23-4.1-1-4.1-4.45a3.49,3.49,0,0,1,.92-2.41,3.25,3.25,0,0,1,.09-2.38S5,3.43,6.75,4.6a8.59,8.59,0,0,1,4.5,0c1.72-1.17,2.48-.92,2.48-.92a3.25,3.25,0,0,1,.09,2.38,3.49,3.49,0,0,1,.92,2.41c0,3.46-2.1,4.22-4.11,4.44a2.14,2.14,0,0,1,.62,1.67v2.47c0,.24.14.52.6.43A9,9,0,0,0,9-.06Z\" fill=\"%23669df6\"/></svg>");
    --devsite-scrollbar-thumb-background: hsla(0, 0%, 100%, 0.7);
    --devsite-var-color: #ff8bcb
    }
devsite-content {
    --devsite-compare-yes-color: #34a853;
    --devsite-compare-no-color: #dd2c00;
    --devsite-confidential-results-background: hsla(27, 93%, 94%, 0.5);
    --devsite-search-results-breadcrumb-color: #1e8e3e;
    --devsite-select-sibling-gap-x: 16px;
    --devsite-steps-title-border-focus: 1px solid #174ea6;
    --devsite-steps-title-color: #174ea6;
    --devsite-dropdown-list-border-radius: var(--devsite-dropdown-list-toggle-border-radius);
    --devsite-dropdown-list-min-width: 194px;
    --devsite-dropdown-list-toggle-background-hover: var(--devsite-background-2);
    --devsite-dropdown-list-toggle-border-radius: 4px;
    --devsite-dropdown-list-toggle-color: var(--devsite-secondary-text-color);
    --devsite-dropdown-list-toggle-color-hover: var(--devsite-primary-text-color)
    }
devsite-device {
    --devsite-device-border-color: #ddd
    }
devsite-dynamic-content {
    --devsite-progress-background: #dadce0;
    --devsite-progress-background-2: #dadce0;
    --devsite-progress-background-4: #dadce0;
    --devsite-progress-bar-color: #f9ab00
    }
devsite-dynamic-content .completed {
    --devsite-progress-bar-color: #1e8e3e
    }
devsite-dynamic-hero {
    --devsite-background-text-decoration: none
    }
devsite-footer-linkboxes {
    --devsite-footer-linkboxes-grid-template-columns: repeat(auto-fit, minmax(85.4px, 1fr));
    --devsite-footer-linkboxes-padding: 0 24px
    }
devsite-footer-utility devsite-language-selector {
    --devsite-language-selector-menu-inset-inline: auto 0;
    --devsite-language-selector-menu-transform: translate3d(0, calc(-100% - 36px), 0)
    }
devsite-header devsite-language-selector {
    --devsite-select-color: #3c4043
    }
devsite-multiple-choice {
    --devsite-multiple-choice-answer-border-bottom: var(--devsite-primary-border);
    --devsite-multiple-choice-answer-border-top: 0;
    --devsite-multiple-choice-background: var(--devsite-background-2);
    --devsite-multiple-choice-border: 0;
    --devsite-multiple-choice-border-radius: 0;
    --devsite-multiple-choice-correct-background: #f8fbf9;
    --devsite-multiple-choice-correct-color: #137333;
    --devsite-multiple-choice-incorrect-background: #fef9f9;
    --devsite-multiple-choice-incorrect-color: #d32f2f;
    --devsite-multiple-choice-overflow: visible;
    --devsite-multiple-choice-question-background: var(--devsite-secondary-text-color);
    --devsite-multiple-choice-question-color: var(--devsite-inverted-text-color)
    }
devsite-nav-buttons {
    --devsite-button-primary-background-selected: #174ea6
    }
devsite-playlist {
    --devsite-playlist-icon-color: #0d652d;
    --devsite-playlist-max-width: 936px;
    --devsite-playlist-padding-x: 40px
    }
[type=playlist] {
    --devsite-card-image-object-fit: contain
    }
devsite-playlist devsite-bookmark {
    --devsite-bookmark-background-focus-legacy: rgba(138, 180, 248, 0.12);
    --devsite-bookmark-background-hover-legacy: rgba(138, 180, 248, 0.12);
    --devsite-bookmark-icon-arrow-color: #dadce0;
    --devsite-bookmark-icon-color: #dadce0;
    --devsite-bookmark-icon-color-saved: #8ab4f8;
    --devsite-bookmark-icon-color-saved-hover: #d2e3fc;
    --devsite-dropdown-list-toggle-background-hover: hsla(220, 9%, 87%, 0.24);
    --devsite-dropdown-list-toggle-border: 1px solid #5f6368;
    --devsite-dropdown-list-toggle-border-hover: 1px solid #5f6368;
    --devsite-dropdown-list-toggle-color-hover: #dadce0
    }
devsite-quiz {
    --devsite-quiz-correct-background: #e6f4ea;
    --devsite-quiz-correct-border-color: #e6f4ea;
    --devsite-quiz-correct-border-color-focus: #1e8e3e;
    --devsite-quiz-correct-color: #1e8e3e;
    --devsite-quiz-error-background: #fce8e6;
    --devsite-quiz-error-border-color: #fce8e6;
    --devsite-quiz-error-border-color-focus: #d93025;
    --devsite-quiz-error-color: #d93025;
    --devsite-quiz-partially-correct-background: #feefe3;
    --devsite-quiz-partially-correct-color: #e8710a;
    --devsite-quiz-partially-correct-indicator-background: orange;
    --devsite-quiz-secondary-text-color: #5f6368
    }
devsite-recommendations-sidebar, devsite-recommended-content {
    --devsite-recommendations-accent: #01579b
    }
devsite-recommended-content {
    --devsite-background-text-decoration: none;
    --devsite-checkbox-margin-block: 0;
    --devsite-checkbox-margin-inline: 0;
    --devsite-checkbox-size: 0;
    --devsite-h1-margin: 0;
    --devsite-h3-margin: 0;
    --devsite-recommended-content-filters-overflow: scroll hidden;
    --devsite-recommended-content-grid: "list-header" 24px "content"/1fr;
    --devsite-recommended-content-item-show-all-display: flex;
    --devsite-recommended-content-toggle-display: none
    }
devsite-recommended-content[filters] {
    --devsite-recommended-content-grid: "filters-header" 24px "filters" minmax(40px, auto) "list-header" 24px "content"/1fr
    }
devsite-recommended-content devsite-carousel {
    --devsite-carousel-button-color: var(--devsite-secondary-text-color);
    --devsite-carousel-button-color-hover: var(--devsite-primary-text-color);
    --devsite-carousel-marker-margin-inline: -16px 0;
    --devsite-carousel-marker-size: 8px;
    --devsite-carousel-markers-background-focus: var(--devsite-secondary-text-color);
    --devsite-carousel-markers-background-hover: var(--devsite-secondary-text-color);
    --devsite-carousel-markers-gap: 0;
    --devsite-carousel-prev-next-box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color);
    --devsite-recommended-content-filters-overflow: initial
    }
[template=landing] devsite-recommended-content devsite-carousel {
    --devsite-carousel-gap: 0;
    --devsite-carousel-grid: 1fr auto/24px 24px 1fr 24px 24px;
    --devsite-carousel-margin-inline: -24px;
    --devsite-carousel-markers-grid-column: 2/-2;
    --devsite-carousel-markers-grid-row: 2;
    --devsite-carousel-next-grid-column: -1/-3;
    --devsite-carousel-prev-grid-column: 1/3;
    --devsite-carousel-prev-next-grid-row: 1;
    --devsite-carousel-slideshow-grid-column: 2/-2;
    --devsite-carousel-slideshow-grid-row: 1;
    --devsite-carousel-slideshow-padding-inline: 24px
    }
devsite-recommended-content devsite-carousel[data-items-per-slide=auto] {
    --devsite-carousel-gradient-background: var(--devsite-background-3);
    --devsite-carousel-gradient-display: block;
    --devsite-carousel-gradient-end-grid-column: 5;
    --devsite-carousel-gradient-grid-row: 1;
    --devsite-carousel-gradient-start-grid-column: 1;
    --devsite-carousel-markers-display: none;
    --devsite-carousel-slideshow-margin-block: -8px;
    --devsite-carousel-slideshow-padding-block: 8px
    }
devsite-book-nav, devsite-search {
    --devsite-searchbox-hover: #e8eaed;
    --devsite-searchbox-inactive: var(--devsite-background-3);
    --devsite-search-border-radius: 2px;
    --devsite-search-form-background-active: var(--devsite-background-3);
    --devsite-search-height: 36px;
    --devsite-search-image-top: 6px;
    --devsite-search-image-x: 8px;
    --devsite-search-field-border: 0;
    --devsite-search-field-height: 36px;
    --devsite-search-field-padding-x-start: 40px
    }
devsite-select {
    --devsite-select-display: inline-block
    }
devsite-user {
    --devsite-notification-background: #1967d2
    }
google-codelab-about {
    --google-codelab-about-active-border-color: #1a73e8
    }
table {
    --devsite-alt-table-cell-background: rgba(241, 243, 244, 0.75);
    --devsite-h2-border: 0;
    --devsite-responsive-table-first-column-background: #f1f3f4;
    --devsite-table-cell-background: hsla(0, 0%, 100%, 0.95);
    --devsite-table-heading-background: #e8eaed
    }
table.blue {
    --devsite-alt-table-cell-background: #f6f7fb;
    --devsite-table-heading-background: 0;
    --devsite-responsive-table-first-column-background: #f6f7fb;
    --devsite-table-row-background: #e8eaf6;
    --devsite-table-row-border: 1px solid #c5cae9
    }
table.blue table {
    --devsite-table-heading-background: inherit
    }
table.cyan {
    --devsite-alt-table-cell-background: #f4fcfd;
    --devsite-table-heading-background: 0;
    --devsite-responsive-table-first-column-background: #f4fcfd;
    --devsite-table-row-background: #e4f7fb;
    --devsite-table-row-border: 1px solid #a1e4f2
    }
table.cyan table {
    --devsite-table-heading-background: inherit
    }
table.green {
    --devsite-alt-table-cell-background: #f3faf9;
    --devsite-table-heading-background: 0;
    --devsite-responsive-table-first-column-background: #f3faf9;
    --devsite-table-row-background: #e0f2f1;
    --devsite-table-row-border: 1px solid #b2dfdb
    }
table.green table {
    --devsite-table-heading-background: inherit
    }
table.orange {
    --devsite-alt-table-cell-background: #fff9f4;
    --devsite-table-heading-background: 0;
    --devsite-responsive-table-first-column-background: #fff9f4;
    --devsite-table-row-background: #feefe3;
    --devsite-table-row-border: 1px solid #fedfc8
    }
table.orange table {
    --devsite-table-heading-background: inherit
    }
table.pink {
    --devsite-alt-table-cell-background: #fef5fa;
    --devsite-table-heading-background: 0;
    --devsite-responsive-table-first-column-background: #fef5fa;
    --devsite-table-row-background: #fde7f3;
    --devsite-table-row-border: 1px solid #fdcfe8
    }
table.pink table {
    --devsite-table-heading-background: inherit
    }
table.purple {
    --devsite-alt-table-cell-background: #faf6fe;
    --devsite-table-heading-background: 0;
    --devsite-responsive-table-first-column-background: #faf6fe;
    --devsite-table-row-background: #f3e8fd;
    --devsite-table-row-border: 1px solid #e9d2fd
    }
table.purple table {
    --devsite-table-heading-background: inherit
    }
.devsite-header-billboard {
    --devsite-h1-margin: 14px 0
    }
[background] {
    --devsite-background-button-border-color: transparent;
    --devsite-background-button-color: var(--devsite-button-color);
    --devsite-background-button-color-hover: var(--devsite-button-color);
    --devsite-background-button-primary-background: var(--devsite-background-1);
    --devsite-background-button-primary-background-hover: var(--devsite-link-background-active);
    --devsite-background-button-primary-color: var(--devsite-button-color);
    --devsite-background-button-primary-color-hover: var(--devsite-button-color);
    --devsite-background-button-white-background-hover: hsla(210, 6%, 63%, 0.3);
    --devsite-background-button-white-background-focus: hsla(210, 6%, 63%, 0.5);
    --devsite-background-button-white-color: var(--devsite-inverted-text-color);
    --devsite-heading-color: var(--devsite-inverted-text-color);
    --devsite-icon-color: var(--devsite-inverted-text-color);
    --devsite-icon-color-hover: var(--devsite-inverted-text-color-hover);
    --devsite-link-color: var(--devsite-inverted-text-color)
    }
.devsite-landing-row-cta {
    --devsite-button-border: 1px solid transparent;
    --devsite-button-border-active: 1px solid transparent;
    --devsite-button-border-hover: 1px solid transparent;
    --devsite-button-primary-background: var(--devsite-background-1);
    --devsite-button-primary-background-hover: var(--devsite-link-background-active);
    --devsite-button-primary-color: var(--devsite-button-color);
    --devsite-button-primary-color-hover: var(--devsite-button-color);
    --devsite-button-raised-background: var(--devsite-background-1);
    --devsite-button-raised-background-active: var(--devsite-link-background-active);
    --devsite-button-raised-background-hover: var(--devsite-link-background-active);
    --devsite-button-white-background-focus: hsla(210, 6%, 63%, 0.5);
    --devsite-button-white-background-hover: hsla(210, 6%, 63%, 0.3);
    --devsite-button-white-color: var(--devsite-inverted-text-color)
    }
[theme=cyan] .devsite-landing-row-cta, [theme=google-yellow] .devsite-landing-row-cta, [theme=orange] .devsite-landing-row-cta, [theme=pale-blue] .devsite-landing-row-cta {
    --devsite-button-white-color: #202124;
    --devsite-text-color: #202124
    }
[background=theme] {
    --devsite-background-color: var(--devsite-primary-color)
    }
[background=grey], [background=white] {
    --devsite-background-button-border-color: #dadce0;
    --devsite-background-button-color: var(--devsite-button-color);
    --devsite-background-button-color-hover: var(--devsite-button-color);
    --devsite-background-button-primary-background: var(--devsite-button-primary-background);
    --devsite-background-button-primary-background-hover: var(--devsite-button-primary-background-hover);
    --devsite-background-button-primary-color: var(--devsite-button-primary-color);
    --devsite-background-button-primary-color-hover: var(--devsite-button-primary-color-hover);
    --devsite-background-button-white-color: var(--devsite-button-color);
    --devsite-icon-color: var(--devsite-secondary-text-color);
    --devsite-icon-color-hover: var(--devsite-link-color)
    }
[background=blue-grey] {
    --devsite-background-color: #607d8b
    }
[foreground=blue-grey], [theme=blue-grey] [foreground=theme] {
    --devsite-foreground-color: #607d8b;
    --devsite-foreground-button-background-hover: #eff2f3;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #d7dfe2;
    --devsite-foreground-button-border-color-active: #eff2f3;
    --devsite-foreground-button-color: #607d8b;
    --devsite-foreground-button-primary-background: #607d8b;
    --devsite-foreground-button-primary-background-hover: #455a64;
    --devsite-foreground-button-primary-color: #fff
    }
[background=blue-grey-dark] {
    --devsite-background-color: #455a64
    }
[foreground=blue-grey-dark], [theme=blue-grey-dark] [foreground=theme] {
    --devsite-foreground-color: #455a64;
    --devsite-foreground-button-background-hover: #eceff0;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #d1d6d8;
    --devsite-foreground-button-border-color-active: #eceff0;
    --devsite-foreground-button-color: #455a64;
    --devsite-foreground-button-primary-background: #455a64;
    --devsite-foreground-button-primary-background-hover: #37474f;
    --devsite-foreground-button-primary-color: #fff
    }
[background=cyan] {
    --devsite-background-color: #12b5cb
    }
[foreground=cyan], [theme=cyan] [foreground=theme] {
    --devsite-foreground-color: #12b5cb;
    --devsite-foreground-button-background-hover: #e7f8fa;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #c4edf2;
    --devsite-foreground-button-border-color-active: #e7f8fa;
    --devsite-foreground-button-color: #12b5cb;
    --devsite-foreground-button-primary-background: #12b5cb;
    --devsite-foreground-button-primary-background-hover: #098591;
    --devsite-foreground-button-primary-color: #fff
    }
[background=deep-orange] {
    --devsite-background-color: #ff5722
    }
[foreground=deep-orange], [theme=deep-orange] [foreground=theme] {
    --devsite-foreground-color: #ff5722;
    --devsite-foreground-button-background-hover: #ffeee9;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #ffd5c8;
    --devsite-foreground-button-border-color-active: #ffeee9;
    --devsite-foreground-button-color: #ff5722;
    --devsite-foreground-button-primary-background: #ff5722;
    --devsite-foreground-button-primary-background-hover: #e64a19;
    --devsite-foreground-button-primary-color: #fff
    }
[background=deep-purple] {
    --devsite-background-color: #673ab7
    }
[foreground=deep-purple], [theme=deep-purple] [foreground=theme] {
    --devsite-foreground-color: #673ab7;
    --devsite-foreground-button-background-hover: #f0ebf8;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #d9ceed;
    --devsite-foreground-button-border-color-active: #f0ebf8;
    --devsite-foreground-button-color: #673ab7;
    --devsite-foreground-button-primary-background: #673ab7;
    --devsite-foreground-button-primary-background-hover: #512da8;
    --devsite-foreground-button-primary-color: #fff
    }
[background=google-blue] {
    --devsite-background-color: #1a73e8
    }
[foreground=google-blue], [theme=google-blue] [foreground=theme] {
    --devsite-foreground-color: #1a73e8;
    --devsite-foreground-button-background-hover: #e8f1fd;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #c6dcf9;
    --devsite-foreground-button-border-color-active: #e8f1fd;
    --devsite-foreground-button-color: #1a73e8;
    --devsite-foreground-button-primary-background: #1a73e8;
    --devsite-foreground-button-primary-background-hover: #185abc;
    --devsite-foreground-button-primary-color: #fff
    }
[background=google-green] {
    --devsite-background-color: #1e8e3e
    }
[foreground=google-green], [theme=google-green] [foreground=theme] {
    --devsite-foreground-color: #1e8e3e;
    --devsite-foreground-button-background-hover: #e9f4ec;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #c7e3cf;
    --devsite-foreground-button-border-color-active: #e9f4ec;
    --devsite-foreground-button-color: #1e8e3e;
    --devsite-foreground-button-primary-background: #1e8e3e;
    --devsite-foreground-button-primary-background-hover: #137333;
    --devsite-foreground-button-primary-color: #fff
    }
[background=google-red] {
    --devsite-background-color: #d93025
    }
[foreground=google-red], [theme=google-red] [foreground=theme] {
    --devsite-foreground-color: #d93025;
    --devsite-foreground-button-background-hover: #fbeae9;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #f6cbc9;
    --devsite-foreground-button-border-color-active: #fbeae9;
    --devsite-foreground-button-color: #d93025;
    --devsite-foreground-button-primary-background: #d93025;
    --devsite-foreground-button-primary-background-hover: #b31412;
    --devsite-foreground-button-primary-color: #fff
    }
[background=google-yellow] {
    --devsite-background-color: #f9ab00
    }
[foreground=google-yellow], [theme=google-yellow] [foreground=theme] {
    --devsite-foreground-color: #f9ab00;
    --devsite-foreground-button-background-hover: #fef7e6;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #feeabf;
    --devsite-foreground-button-border-color-active: #fef7e6;
    --devsite-foreground-button-color: #f9ab00;
    --devsite-foreground-button-primary-background: #f9ab00;
    --devsite-foreground-button-primary-background-hover: #ea8600;
    --devsite-foreground-button-primary-color: #fff
    }
[background=indigo] {
    --devsite-background-color: #3f51b5
    }
[foreground=indigo], [theme=indigo] [foreground=theme] {
    --devsite-foreground-color: #3f51b5;
    --devsite-foreground-button-background-hover: #eceef8;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #cfd4ed;
    --devsite-foreground-button-border-color-active: #eceef8;
    --devsite-foreground-button-color: #3f51b5;
    --devsite-foreground-button-primary-background: #3f51b5;
    --devsite-foreground-button-primary-background-hover: #303f9f;
    --devsite-foreground-button-primary-color: #fff
    }
[background=orange] {
    --devsite-background-color: #e8710a
    }
[foreground=orange], [theme=orange] [foreground=theme] {
    --devsite-foreground-color: #e8710a;
    --devsite-foreground-button-background-hover: #fdf1e7;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #f9dcc2;
    --devsite-foreground-button-border-color-active: #fdf1e7;
    --devsite-foreground-button-color: #e8710a;
    --devsite-foreground-button-primary-background: #e8710a;
    --devsite-foreground-button-primary-background-hover: #c26401;
    --devsite-foreground-button-primary-color: #fff
    }
[background=pink] {
    --devsite-background-color: #e52592
    }
[foreground=pink], [theme=pink] [foreground=theme] {
    --devsite-foreground-color: #e52592;
    --devsite-foreground-button-background-hover: #fce9f4;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #f9c9e4;
    --devsite-foreground-button-border-color-active: #fce9f4;
    --devsite-foreground-button-color: #e52592;
    --devsite-foreground-button-primary-background: #e52592;
    --devsite-foreground-button-primary-background-hover: #b80672;
    --devsite-foreground-button-primary-color: #fff
    }
[background=purple] {
    --devsite-background-color: #9334e6
    }
[foreground=purple], [theme=purple] [foreground=theme] {
    --devsite-foreground-color: #9334e6;
    --devsite-foreground-button-background-hover: #f4ebfd;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #e4ccf9;
    --devsite-foreground-button-border-color-active: #f4ebfd;
    --devsite-foreground-button-color: #9334e6;
    --devsite-foreground-button-primary-background: #9334e6;
    --devsite-foreground-button-primary-background-hover: #7627bb;
    --devsite-foreground-button-primary-color: #fff
    }
[background=teal] {
    --devsite-background-color: #009688
    }
[foreground=teal], [theme=teal] [foreground=theme] {
    --devsite-foreground-color: #009688;
    --devsite-foreground-button-background-hover: #e6f5f3;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #bfe5e1;
    --devsite-foreground-button-border-color-active: #e6f5f3;
    --devsite-foreground-button-color: #009688;
    --devsite-foreground-button-primary-background: #009688;
    --devsite-foreground-button-primary-background-hover: #00796b;
    --devsite-foreground-button-primary-color: #fff
    }
[background=blue] {
    --devsite-background-color: #1a73e8
    }
[foreground=blue], [theme=blue] [foreground=theme] {
    --devsite-foreground-color: #1a73e8;
    --devsite-foreground-button-background-hover: #e8f1fd;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #c6dcf9;
    --devsite-foreground-button-border-color-active: #e8f1fd;
    --devsite-foreground-button-color: #1a73e8;
    --devsite-foreground-button-primary-background: #1a73e8;
    --devsite-foreground-button-primary-background-hover: #185abc;
    --devsite-foreground-button-primary-color: #fff
    }
[background=green] {
    --devsite-background-color: #1e8e3e
    }
[foreground=green], [theme=green] [foreground=theme] {
    --devsite-foreground-color: #1e8e3e;
    --devsite-foreground-button-background-hover: #e9f4ec;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #c7e3cf;
    --devsite-foreground-button-border-color-active: #e9f4ec;
    --devsite-foreground-button-color: #1e8e3e;
    --devsite-foreground-button-primary-background: #1e8e3e;
    --devsite-foreground-button-primary-background-hover: #137333;
    --devsite-foreground-button-primary-color: #fff
    }
[background=light-blue] {
    --devsite-background-color: #0288d1
    }
[foreground=light-blue], [theme=light-blue] [foreground=theme] {
    --devsite-foreground-color: #0288d1;
    --devsite-foreground-button-background-hover: #e6f3fa;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #c0e1f4;
    --devsite-foreground-button-border-color-active: #e6f3fa;
    --devsite-foreground-button-color: #0288d1;
    --devsite-foreground-button-primary-background: #0288d1;
    --devsite-foreground-button-primary-background-hover: #01579b;
    --devsite-foreground-button-primary-color: #fff
    }
[background=light-green] {
    --devsite-background-color: #8bc34a
    }
[foreground=light-green], [theme=light-green] [foreground=theme] {
    --devsite-foreground-color: #8bc34a;
    --devsite-foreground-button-background-hover: #f3f9ed;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #e2f0d2;
    --devsite-foreground-button-border-color-active: #f3f9ed;
    --devsite-foreground-button-color: #8bc34a;
    --devsite-foreground-button-primary-background: #8bc34a;
    --devsite-foreground-button-primary-background-hover: #689f38;
    --devsite-foreground-button-primary-color: #fff
    }
[background=navy] {
    --devsite-background-color: #3f51b5
    }
[foreground=navy], [theme=navy] [foreground=theme] {
    --devsite-foreground-color: #3f51b5;
    --devsite-foreground-button-background-hover: #eceef8;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #cfd4ed;
    --devsite-foreground-button-border-color-active: #eceef8;
    --devsite-foreground-button-color: #3f51b5;
    --devsite-foreground-button-primary-background: #3f51b5;
    --devsite-foreground-button-primary-background-hover: #303f9f;
    --devsite-foreground-button-primary-color: #fff
    }
[background=pale-blue] {
    --devsite-background-color: #12b5cb
    }
[foreground=pale-blue], [theme=pale-blue] [foreground=theme] {
    --devsite-foreground-color: #12b5cb;
    --devsite-foreground-button-background-hover: #e7f8fa;
    --devsite-foreground-button-border-color: #dadce0;
    --devsite-foreground-button-border-color-hover: #c4edf2;
    --devsite-foreground-button-border-color-active: #e7f8fa;
    --devsite-foreground-button-color: #12b5cb;
    --devsite-foreground-button-primary-background: #12b5cb;
    --devsite-foreground-button-primary-background-hover: #098591;
    --devsite-foreground-button-primary-color: #fff
    }
[background=cyan] {
    --devsite-background-color: #43cde6
    }
[background=google-yellow] {
    --devsite-background-color: #fcc934
    }
[background=light-green] {
    --devsite-background-color: #aed581
    }
[background=orange] {
    --devsite-background-color: #fcad70
    }
[background=grey], [background=light-green] {
    --devsite-link-color: unset
    }
[background=grey] {
    --devsite-background-color: var(--devsite-background-3);
    --devsite-heading-color: var(--devsite-primary-text-color);
    --devsite-text-color: var(--devsite-primary-text-color);
    --devsite-text-color-hover: var(--devsite-secondary-text-color)
    }
[background=light-green] {
    --devsite-background-button-white-color: #202124;
    --devsite-icon-color: #202124;
    --devsite-icon-color-hover: #5f6368;
    --devsite-text-color: #202124;
    --devsite-text-color-hover: #5f6368
    }
[foreground=light-green] {
    --devsite-foreground-button-primary-color: #202124
    }
.devsite-landing-row-item-labels [background=light-green]:not([foreground]) {
    --devsite-text-color: #202124
    }
[background=cyan], [background=google-yellow], [background=orange], [background=pale-blue], [theme=cyan] [background=theme], [theme=google-yellow] [background=theme], [theme=orange] [background=theme], [theme=pale-blue] [background=theme] {
    --devsite-background-button-white-color: #202124;
    --devsite-heading-color: #202124;
    --devsite-icon-color: #202124;
    --devsite-icon-color-hover: #5f6368;
    --devsite-link-color: #202124;
    --devsite-text-color: #202124;
    --devsite-text-color-hover: #5f6368
    }
[background=white] {
    --devsite-background-color: var(--devsite-background-1);
    --devsite-heading-color: var(--devsite-primary-text-color);
    --devsite-link-color: unset;
    --devsite-text-color: var(--devsite-primary-text-color);
    --devsite-text-color-hover: var(--devsite-secondary-text-color)
    }
[foreground=cyan], [foreground=google-yellow], [foreground=orange], [foreground=pale-blue] {
    --devsite-foreground-button-primary-color: #202124
    }
[foreground=theme] {
    --devsite-icon-color: var(--devsite-primary-color)
    }
[foreground=theme] .devsite-heading-link {
    --devsite-icon-color: var(--devsite-secondary-text-color);
    --devsite-icon-color-hover: var(--devsite-link-color)
    }
[foreground=white] {
    --devsite-icon-color: var(--devsite-inverted-text-color);
    --devsite-text-color: var(--devsite-inverted-text-color)
    }
.devsite-landing-row-item-labels [background]:not([foreground]) {
    --devsite-text-color: #fff
    }
.devsite-landing-row-item-labels [background=cyan]:not([foreground]), .devsite-landing-row-item-labels [background=google-yellow]:not([foreground]), .devsite-landing-row-item-labels [background=orange]:not([foreground]), .devsite-landing-row-item-labels [background=pale-blue]:not([foreground]) {
    --devsite-text-color: #202124
    }
[layout=docs] {
    --devsite-banner-margin: -40px -40px 40px
    }
[layout=docs], [layout=docs][template=landing] {
    --devsite-banner-message-padding: 20px 40px
    }
[layout=full], [template=landing] {
    --devsite-banner-message-padding: 20px 24px
    }
[layout=full] {
    --devsite-banner-margin: -40px calc(50% - 50vw) 40px;
    --devsite-main-content-max-width: 1600px;
    --devsite-main-content-padding: 40px 80px
    }
[template="404"], [template=offline] {
    --devsite-404-links-columns: 4;
    --devsite-404-search-margin: 0 0 160px;
    --devsite-main-content-padding: 0 80px
    }
[layout][template=badge], [layout][template=landing], [layout][template=playlist], [layout][template=profile], [layout][template=quiz], [layout][template=topic] {
    --devsite-banner-margin: 0;
    --devsite-main-content-max-width: none;
    --devsite-main-content-padding: 0
    }
[layout][concierge=closed], [layout][concierge] {
    --devsite-concierge-width: var(--devsite-concierge-width-closed, 0)
    }
[layout][concierge=open] {
    --devsite-concierge-width: var(--devsite-concierge-width-open, 0)
    }
[layout][concierge=modal] {
    --devsite-concierge-width: 0
    }
[layout=full]:not([template=landing]) {
    --devsite-notice-margin: 16px calc(50% - 50vw);
    --devsite-notice-padding-block: 16px;
    --devsite-notice-padding-inline: calc(50vw - 50% + 36px) calc(50vw - 50%)
    }
[layout=full] devsite-content, [template=landing] devsite-content {
    --devsite-breadcrumb-list-display: none;
    --devsite-breadcrumb-list-padding: 20px 24px
    }
[layout=full][template=search] devsite-content {
    --devsite-breadcrumb-list-padding: inherit
    }
.devsite-landing-row {
    --devsite-landing-group-padding: 0 24px;
    --devsite-landing-row-padding: 40px 0
    }
[layout=docs] .devsite-landing-row {
    --devsite-landing-group-padding: 0 40px
    }
.devsite-landing-row-padding-small {
    --devsite-landing-row-padding: 32px 0
    }
.devsite-landing-row-padding-medium {
    --devsite-landing-row-padding: 64px 0
    }
.devsite-landing-row-padding-large {
    --devsite-landing-row-padding: 96px 0
    }
.devsite-landing-row-padding-xlarge {
    --devsite-landing-row-padding: 128px 0
    }
.devsite-landing-row-1-up {
    --devsite-1-up-grid-template-columns: repeat(12, 1fr);
    --devsite-1-up-no-media-description-grid-column: 1/span 8;
    --devsite-custom-image-icon-font-size: 256px;
    --devsite-custom-image-icon-max-height: 256px;
    --devsite-custom-image-icon-width: 256px
    }
.devsite-landing-row-2-up, .devsite-landing-row-50 {
    --devsite-custom-image-icon-font-size: 192px;
    --devsite-custom-image-icon-max-height: 192px;
    --devsite-custom-image-icon-width: 192px
    }
.devsite-landing-row-3-up, .devsite-landing-row-67 {
    --devsite-custom-image-icon-font-size: 128px;
    --devsite-custom-image-icon-max-height: 128px;
    --devsite-custom-image-icon-width: 128px
    }
.devsite-landing-row-4-up, .devsite-landing-row-75, [layout=docs] .devsite-landing-row-2-up {
    --devsite-custom-image-icon-font-size: 96px;
    --devsite-custom-image-icon-max-height: 96px;
    --devsite-custom-image-icon-width: 96px
    }
.devsite-landing-row-2-up {
    --devsite-landing-row-group-grid: auto-flow/repeat(2, 1fr)
    }
.devsite-landing-row-3-up {
    --devsite-landing-row-group-grid: auto-flow/repeat(3, 1fr)
    }
.devsite-landing-row-4-up {
    --devsite-landing-row-group-grid: auto-flow/repeat(4, 1fr)
    }
[header-position=left], [header-position=right] {
    --devsite-landing-row-group-grid: auto-flow/repeat(2, 1fr)
    }
[size=small] {
    --devsite-icon-size: 24px
    }
[size=medium] {
    --devsite-icon-size: 48px
    }
[size=large] {
    --devsite-icon-size: 96px
    }
[size=xlarge] {
    --devsite-icon-size: 144px
    }
.devsite-landing-row-logos [size] {
    --devsite-custom-image-icon-font-size: 96px;
    --devsite-custom-image-icon-max-height: 96px;
    --devsite-custom-image-icon-width: 96px;
    --devsite-icon-size: 96px
    }
[background][size] {
    --devsite-icon-margin-block: 0;
    --devsite-icon-margin-inline: 0
    }
[background][size=small] {
    --devsite-icon-canvas-size: 28px;
    --devsite-icon-size: 18px
    }
[background][size=medium], [size=medium] {
    --devsite-icon-canvas-size: 56px
    }
[background][size=medium] {
    --devsite-icon-size: 36px
    }
[background][size=large] {
    --devsite-icon-canvas-size: 112px;
    --devsite-icon-size: 72px
    }
[background][size=xlarge] {
    --devsite-icon-canvas-size: 168px;
    --devsite-icon-size: 108px
    }
[icon-position^=bottom] {
    --devsite-icon-canvas-margin-block: 8px 0
    }
[icon-position=bottom] {
    --devsite-icon-canvas-margin-inline: 0;
    --devsite-icon-margin-inline: 0
    }
[icon-position=bottom-right] {
    --devsite-icon-canvas-margin-inline: 20px 0;
    --devsite-icon-margin-inline: 0 4px
    }
[icon-position=right] {
    --devsite-icon-canvas-margin-block: 0;
    --devsite-icon-canvas-margin-inline: 20px 0;
    --devsite-icon-margin-block: 0;
    --devsite-icon-margin-inline: 0
    }
[icon-position=top] {
    --devsite-header-icon-canvas-margin-block: 0 20px;
    --devsite-header-icon-canvas-margin-inline: 0
    }
[icon-position=top] [size=small] {
    --devsite-icon-canvas-margin-block: 0 12px
    }
[icon-position=top] [size=medium] {
    --devsite-icon-canvas-margin-block: 0 16px
    }
[icon-position=top] [size=large] {
    --devsite-icon-canvas-margin-block: 0 24px
    }
[icon-position=top] [size=xlarge] {
    --devsite-icon-canvas-margin-block: 0 32px
    }
.devsite-landing-row-header-centered, .devsite-landing-row-header-centered [icon-position=top] {
    --devsite-header-icon-canvas-margin-inline: auto
    }
.devsite-landing-row-item-centered {
    --devsite-icon-margin-inline: auto
    }
@media screen and (max-width: 1253px) {
    [layout] devsite-catalog {
        --devsite-catalog-grid: "main"/1fr;
        --devsite-catalog-sidebar-button-display: inline-block !important;
        --devsite-catalog-sidebar-button-margin: 0 0 16px;
        --devsite-columns: 2
        }
    devsite-recommended-content {
        --devsite-columns: 3
        }
    }
@media screen and (max-width: 1440px) {
    [template] devsite-recommended-content devsite-carousel[data-items-per-slide=auto] {
        --devsite-carousel-gap: 0;
        --devsite-carousel-ghost-item-width: 16px;
        --devsite-carousel-gradient-start-grid-column: 2;
        --devsite-carousel-gradient-end-grid-column: -2;
        --devsite-carousel-gradient-width: 80px;
        --devsite-carousel-grid: minmax(40px, auto)/0 48px 1fr 48px 0;
        --devsite-carousel-slideshow-scroll-padding: 0 24px
        }
    }
@media screen and (max-width: 840px) {
    [template=page] devsite-carousel[data-full-width], [template=page] devsite-carousel[data-items-per-slide=auto] {
        --devsite-carousel-gap: 16px 24px;
        --devsite-carousel-grid: 1fr 40px/0 40px 1fr 40px 0;
        --devsite-carousel-margin-inline: -24px;
        --devsite-carousel-markers-grid-column: 3;
        --devsite-carousel-next-grid-column: 4;
        --devsite-carousel-prev-grid-column: 2;
        --devsite-carousel-slideshow-grid-column: 1/-1;
        --devsite-carousel-slideshow-padding-inline: 24px
        }
    [template=page] devsite-carousel[data-items-per-slide=auto] {
        --devsite-carousel-ghost-item-width: 16px;
        --devsite-carousel-slideshow-scroll-padding: 0 24px
        }
    devsite-footer-utility devsite-language-selector {
        --devsite-language-selector-menu-inset-inline: 0 auto
        }
    devsite-playlist {
        --devsite-playlist-max-width: 768px;
        --devsite-playlist-padding-x: 40px
        }
    devsite-recommended-content {
        --devsite-columns: 2;
        --devsite-recommended-content-filters-margin-inline: -24px;
        --devsite-recommended-content-filters-padding-inline: 24px;
        --devsite-recommended-content-filters-width: calc(100% + 48px)
        }
    [layout] {
        --devsite-banner-margin: -24px -24px 24px
        }
    [layout][template] {
        --devsite-banner-message-padding: 20px 24px
        }
    [layout=full] {
        --devsite-main-content-padding: 24px
        }
    [template="404"], [template=offline] {
        --devsite-404-links-columns: 2;
        --devsite-404-search-margin: 0 0 80px;
        --devsite-main-content-padding: 0 24px
        }
    .devsite-landing-row, [class^=devsite-landing-row-padding-] {
        --devsite-landing-row-padding: 24px 0
        }
    [layout=docs] .devsite-landing-row {
        --devsite-landing-group-padding: 0 24px
        }
    .devsite-landing-row-1-up {
        --devsite-1-up-grid-template-columns: repeat(2, 1fr);
        --devsite-1-up-no-media-description-grid-column: 1/span 2
        }
    .devsite-landing-row-1-up, .devsite-landing-row-2-up, .devsite-landing-row-3-up, .devsite-landing-row-4-up {
        --devsite-custom-image-icon-font-size: 128px;
        --devsite-custom-image-icon-max-height: 128px;
        --devsite-custom-image-icon-width: 128px
        }
    .devsite-landing-row-3-up, .devsite-landing-row-4-up {
        --devsite-landing-row-group-grid: auto-flow/repeat(2, 1fr)
        }
    [icon-position^=bottom] {
        --devsite-icon-canvas-margin-block: 0;
        --devsite-icon-canvas-margin-inline: 20px 0;
        --devsite-icon-margin-inline: 0 4px
        }
    }
@media screen and (max-width: 600px) {
    :root {
        --devsite-item-gap: 16px
        }
    [layout] {
        --devsite-banner-margin: -16px -16px 16px
        }
    [layout][template] {
        --devsite-banner-message-padding: 16px
        }
    [layout=full] {
        --devsite-main-content-padding: 16px;
        --devsite-notice-margin: 16px -40px;
        --devsite-notice-padding-block: 16px;
        --devsite-notice-padding-inline: 76px 40px
        }
    [layout=full] devsite-content, [template=landing] devsite-content {
        --devsite-breadcrumb-list-padding: 20px 16px
        }
    [template="404"], [template=offline] {
        --devsite-404-search-margin: 0 0 40px;
        --devsite-main-content-padding: 0 16px
        }
    [template] devsite-carousel[data-full-width], [template] devsite-carousel[data-items-per-slide=auto] {
        --devsite-carousel-gap: 16px 16px;
        --devsite-carousel-grid: 1fr 40px/0 40px 1fr 40px 0;
        --devsite-carousel-margin-inline: -16px;
        --devsite-carousel-markers-grid-column: 3;
        --devsite-carousel-next-grid-column: 4;
        --devsite-carousel-prev-grid-column: 2;
        --devsite-carousel-slideshow-grid-column: 1/-1;
        --devsite-carousel-slideshow-padding-inline: 16px
        }
    [template] devsite-carousel[data-items-per-slide=auto] {
        --devsite-carousel-ghost-item-width: 8px;
        --devsite-carousel-slideshow-scroll-padding: 0 16px
        }
    devsite-content {
        --devsite-select-sibling-gap-x: 0;
        --devsite-select-sibling-gap-y: 16px
        }
    devsite-footer-linkboxes {
        --devsite-footer-linkboxes-grid-template-columns: 1fr;
        --devsite-footer-linkboxes-padding: 0 16px
        }
    devsite-playlist {
        --devsite-playlist-max-width: 100%;
        --devsite-playlist-padding-x: 24px
        }
    [template] devsite-recommended-content devsite-carousel {
        --devsite-carousel-item-width: 70vw !important;
        --devsite-carousel-margin-inline: -16px;
        --devsite-carousel-markers-display: none;
        --devsite-carousel-prev-next-display: none;
        --devsite-carousel-slideshow-grid-column: 1/-1;
        --devsite-carousel-slideshow-padding-inline: 16px;
        --devsite-carousel-slideshow-scroll-padding: 0 16px
        }
    devsite-recommended-content devsite-carousel[data-items-per-slide=auto] {
        --devsite-carousel-gradient-display: none;
        --devsite-carousel-item-flex: initial
        }
    devsite-select {
        --devsite-select-display: block
        }
    .devsite-landing-row, [class^=devsite-landing-row-padding-] {
        --devsite-landing-group-padding: 0 16px;
        --devsite-landing-row-padding: 16px 0
        }
    [layout=docs] .devsite-landing-row {
        --devsite-landing-group-padding: 0 16px
        }
    .devsite-landing-row-1-up, .devsite-landing-row-2-up, .devsite-landing-row-3-up {
        --devsite-item-display: block
        }
    .devsite-landing-row-2-up, .devsite-landing-row-3-up, .devsite-landing-row-4-up, .devsite-landing-row[header-position] {
        --devsite-landing-row-group-grid: auto-flow/1fr
        }
    }
:root {
    --devsite-headline-font-family: Google Sans, Noto Sans, Noto Sans JP, Noto Sans KR, Noto Naskh Arabic, Noto Sans Thai, Noto Sans Hebrew, Noto Sans Bengali, sans-serif;
    --devsite-heading-color: #202124;
    --devsite-display-font: 400 44px/52px var(--devsite-headline-font-family);
    --devsite-h1-font: 400 32px/40px var(--devsite-headline-font-family);
    --devsite-h1-letter-spacing: 0;
    --devsite-h1-margin: 48px 0 24px;
    --devsite-h2-border: 0;
    --devsite-h2-font: 400 24px/32px var(--devsite-headline-font-family);
    --devsite-h2-letter-spacing: 0;
    --devsite-h2-margin: 48px 0 24px;
    --devsite-h2-padding: 0;
    --devsite-h3-font: 400 20px/28px var(--devsite-headline-font-family);
    --devsite-table-heading-font: 500 14px/20px var(--devsite-primary-font-family);
    --devsite-wordmark-font: 400 22px/32px var(--devsite-headline-font-family);
    --devsite-button-background-hover: #e8f0fe;
    --devsite-button-background-active: #e8f0fe;
    --devsite-button-border: 1px solid #dadce0;
    --devsite-button-border-hover: 1px solid #d2e3fc;
    --devsite-button-border-active: 1px solid #e8f0fe;
    --devsite-button-border-radius: 4px;
    --devsite-button-box-shadow: none;
    --devsite-button-box-shadow-active: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color);
    --devsite-button-font: 500 14px/36px var(--devsite-headline-font-family);
    --devsite-button-line-height: 34px;
    --devsite-button-padding: 0 24px;
    --devsite-button-text-transform: none;
    --devsite-background-button-color: #d2e3fc;
    --devsite-background-button-color-hover: #d2e3fc;
    --devsite-button-disabled-background: transparent;
    --devsite-button-disabled-border: 1px solid #f8f9fa;
    --devsite-button-disabled-color: #9aa0a6;
    --devsite-button-disabled-line-height: 34px;
    --devsite-button-primary-background: #1a73e8;
    --devsite-button-primary-background-hover: #1765cc;
    --devsite-button-primary-background-active: #185abc;
    --devsite-button-primary-box-shadow-hover: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 1px 3px 1px var(--devsite-elevation-ambient-shadow-color);
    --devsite-background-button-primary-background-hover: #e8f0fe;
    --devsite-background-button-primary-color: #d2e3fc;
    --devsite-background-button-primary-color-hover: #d2e3fc;
    --devsite-button-white-background-hover: #e8f0fe;
    --devsite-button-white-background-active: #e8f0fe;
    --devsite-button-white-box-shadow-active: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 1px 3px 1px var(--devsite-elevation-ambient-shadow-color);
    --devsite-button-raised-background-hover: #e8f0fe;
    --devsite-button-raised-background-active: #e8f0fe;
    --devsite-button-with-icon-padding: 0 15px;
    --devsite-button-material-icon-margin-x: -12px;
    --devsite-button-white-material-icon-margin-x: 0;
    --devsite-card-border: var(--devsite-primary-border);
    --devsite-card-border-radius: 8px;
    --devsite-card-box-shadow: none;
    --devsite-card-content-border-radius: 7px 7px 0 0;
    --devsite-card-list-item-border-radius: 0;
    --devsite-card-list-item-margin: 0;
    --devsite-card-list-overflow: hidden;
    --devsite-feature-tooltip-border-radius: 8px;
    --devsite-link-background-hover: #e8f0fe;
    --devsite-nav-active-color: #185abc;
    --devsite-input-background-focus: #d2e3fc;
    --devsite-input-border: 1px solid #dadce0;
    --devsite-input-color-disabled: rgba(95, 99, 104, 0.38);
    --devsite-input-file-padding: 8px 24px
    }
@media screen and (max-width: 600px) {
    :root {
        --devsite-display-font: 400 24px/32px var(--devsite-headline-font-family);
        --devsite-h1-font: 400 24px/32px var(--devsite-headline-font-family)
        }
    }
.button-primary, .button-raised {
    --devsite-button-disabled-background: rgba(241, 243, 244, 0.38);
    --devsite-button-disabled-border: 0
    }
.devsite-article-body > .beta:not([class*=attempt]), .devsite-article-body > .caution:not([class*=attempt]), .devsite-article-body > .deprecated:not([class*=attempt]), .devsite-article-body > .dogfood:not([class*=attempt]), .devsite-article-body > .experimental:not([class*=attempt]), .devsite-article-body > .key-point:not([class*=attempt]), .devsite-article-body > .key-term:not([class*=attempt]), .devsite-article-body > .note:not([class*=attempt]), .devsite-article-body > .objective:not([class*=attempt]), .devsite-article-body > .preview:not([class*=attempt]), .devsite-article-body > .special:not([class*=attempt]), .devsite-article-body > .success:not([class*=attempt]), .devsite-article-body > .tip:not([class*=attempt]), .devsite-article-body > .warning:not([class*=attempt]), .devsite-article-body > aside:not([class*=attempt]) {
    --devsite-notice-margin: 16px -40px;
    --devsite-notice-padding-block: 16px;
    --devsite-notice-padding-inline: 76px 40px
    }
.devsite-article-body > div > .beta:not([class*=attempt]), .devsite-article-body > div > .caution:not([class*=attempt]), .devsite-article-body > div > .deprecated:not([class*=attempt]), .devsite-article-body > div > .dogfood:not([class*=attempt]), .devsite-article-body > div > .experimental:not([class*=attempt]), .devsite-article-body > div > .key-point:not([class*=attempt]), .devsite-article-body > div > .key-term:not([class*=attempt]), .devsite-article-body > div > .note:not([class*=attempt]), .devsite-article-body > div > .objective:not([class*=attempt]), .devsite-article-body > div > .preview:not([class*=attempt]), .devsite-article-body > div > .special:not([class*=attempt]), .devsite-article-body > div > .success:not([class*=attempt]), .devsite-article-body > div > .tip:not([class*=attempt]), .devsite-article-body > div > .warning:not([class*=attempt]), .devsite-article-body > div > aside:not([class*=attempt]), .devsite-article-body > p > .beta:not([class*=attempt]), .devsite-article-body > p > .caution:not([class*=attempt]), .devsite-article-body > p > .deprecated:not([class*=attempt]), .devsite-article-body > p > .dogfood:not([class*=attempt]), .devsite-article-body > p > .experimental:not([class*=attempt]), .devsite-article-body > p > .key-point:not([class*=attempt]), .devsite-article-body > p > .key-term:not([class*=attempt]), .devsite-article-body > p > .note:not([class*=attempt]), .devsite-article-body > p > .objective:not([class*=attempt]), .devsite-article-body > p > .preview:not([class*=attempt]), .devsite-article-body > p > .special:not([class*=attempt]), .devsite-article-body > p > .success:not([class*=attempt]), .devsite-article-body > p > .tip:not([class*=attempt]), .devsite-article-body > p > .warning:not([class*=attempt]), .devsite-article-body > p > aside:not([class*=attempt]), .devsite-article-body > section > .beta:not([class*=attempt]), .devsite-article-body > section > .caution:not([class*=attempt]), .devsite-article-body > section > .deprecated:not([class*=attempt]), .devsite-article-body > section > .dogfood:not([class*=attempt]), .devsite-article-body > section > .experimental:not([class*=attempt]), .devsite-article-body > section > .key-point:not([class*=attempt]), .devsite-article-body > section > .key-term:not([class*=attempt]), .devsite-article-body > section > .note:not([class*=attempt]), .devsite-article-body > section > .objective:not([class*=attempt]), .devsite-article-body > section > .preview:not([class*=attempt]), .devsite-article-body > section > .special:not([class*=attempt]), .devsite-article-body > section > .success:not([class*=attempt]), .devsite-article-body > section > .tip:not([class*=attempt]), .devsite-article-body > section > .warning:not([class*=attempt]), .devsite-article-body > section > aside:not([class*=attempt]) {
    --devsite-notice-margin: 16px -40px;
    --devsite-notice-padding-block: 16px;
    --devsite-notice-padding-inline: 76px 40px
    }
.devsite-breadcrumb-list {
    --devsite-font-family: var(--devsite-headline-font-family)
    }
.devsite-header-billboard {
    --devsite-h1-font: 400 44px/52px var(--devsite-headline-font-family);
    --devsite-h1-letter-spacing: 0.5px
    }
.devsite-landing-row-item {
    --devsite-buttons-margin: auto 0 -4px
    }
.devsite-nav-active {
    --devsite-link-color-active: #185abc
    }
.devsite-product-button-row {
    --devsite-button-border: 0;
    --devsite-button-border-hover: 0;
    --devsite-button-border-active: 0
    }
devsite-book-nav {
    --devsite-nav-divider-background: var(--devsite-background-3);
    --devsite-nav-heading-color-hover: var(--devsite-secondary-text-color);
    --devsite-nav-title-background-active: var(--devsite-link-background-active);
    --devsite-nav-title-background-hover: var(--devsite-background-3);
    --devsite-nav-title-color-hover: var(--devsite-primary-text-color);
    --devsite-nav-title-margin-x: 8px;
    --devsite-nav-title-no-path-color-hover: var(--devsite-secondary-text-color)
    }
devsite-code {
    --devsite-code-button-size: 32px
    }
.devsite-article-body > devsite-code {
    --devsite-code-buttons-container-right: 40px;
    --devsite-code-margin: 16px -40px;
    --devsite-code-padding-block: 24px;
    --devsite-code-padding-inline: 40px
    }
@media screen and (max-width: 840px) {
    .devsite-article-body > devsite-code {
        --devsite-code-buttons-container-right: 24px;
        --devsite-code-margin: 16px -24px;
        --devsite-code-padding-inline: 24px
        }
    }
@media screen and (max-width: 600px) {
    .devsite-article-body > devsite-code {
        --devsite-code-buttons-container-right: 16px;
        --devsite-code-margin: 16px -16px;
        --devsite-code-padding-inline: 16px
        }
    }
.devsite-article-body > devsite-code:last-child {
    --devsite-code-margin: 16px -40px -16px
    }
@media screen and (max-width: 840px) {
    .devsite-article-body > devsite-code:last-child {
        --devsite-code-margin: 16px -24px -16px
        }
    }
@media screen and (max-width: 600px) {
    .devsite-article-body > devsite-code:last-child {
        --devsite-code-margin: 16px -16px -16px
        }
    }
devsite-catalog {
    --devsite-button-icon-content: "clear";
    --devsite-button-icon-margin-x-end: 6px;
    --devsite-chips-gap: 16px 8px
    }
devsite-catalog .catalog-show-sidebar-button {
    --devsite-button-border-radius: 16px;
    --devsite-button-height: 32px;
    --devsite-button-line-height: 30px
    }
devsite-content {
    --devsite-search-term-color: #5f6368;
    --devsite-search-term-weight: 400
    }
devsite-dialog {
    --devsite-border-radius: 8px;
    --devsite-feedback-buttons-padding: 16px 24px 8px;
    --devsite-heading-font: 400 18px/30px var(--devsite-headline-font-family);
    --devsite-heading-text-align: center
    }
devsite-footer-linkboxes, devsite-footer-promos {
    --devsite-footer-heading-font: 400 16px/26px var(--devsite-headline-font-family);
    --devsite-footer-heading-font-weight: 400;
    --devsite-footer-heading-margin: 1px 0 4px;
    --devsite-footer-list-heading-margin: 34px 0 0
    }
devsite-header {
    --devsite-button-line-height: 36px;
    --devsite-header-link-background-active: var(--devsite-link-background-active);
    --devsite-header-link-box-shadow-active: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color);
    --devsite-header-link-color: var(--devsite-link-color);
    --devsite-header-link-color-active: var(--devsite-link-color)
    }
devsite-jump-to {
    --devsite-link-background: #fff;
    --devsite-link-background-hover: #e8f0fe;
    --devsite-link-color: #1a73e8
    }
devsite-multiple-choice {
    --devsite-multiple-choice-answer-border-bottom: 0;
    --devsite-multiple-choice-answer-border-top: var(--devsite-primary-border);
    --devsite-multiple-choice-background: var(--devsite-background-1);
    --devsite-multiple-choice-border: var(--devsite-primary-border);
    --devsite-multiple-choice-border-radius: 8px;
    --devsite-multiple-choice-overflow: hidden;
    --devsite-multiple-choice-question-background: var(--devsite-background-4);
    --devsite-multiple-choice-question-color: var(--devsite-primary-text-color)
    }
devsite-catalog, devsite-nav-buttons {
    --devsite-button-background-selected: var(--devsite-button-primary-background);
    --devsite-button-border-selected: 0;
    --devsite-button-color-selected: var(--devsite-inverted-text-color);
    --devsite-button-padding: 0 16px
    }
devsite-book-nav, devsite-search {
    --devsite-search-border-radius: 4px;
    --devsite-search-active-box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 1px 3px 1px var(--devsite-elevation-ambient-shadow-color);
    --devsite-search-active-overflow: hidden;
    --devsite-searchbox-before-display: none;
    --devsite-search-form-background-active: #fff;
    --devsite-search-form-text-active: var(--devsite-secondary-text-color);
    --devsite-popout-box-shadow: none;
    --devsite-popout-display: none;
    --devsite-popout-active-display: block;
    --devsite-popout-margin-top: 0;
    --devsite-popout-position: relative;
    --devsite-popout-transform: none;
    --devsite-popout-transition: none;
    --devsite-popout-z-index: auto
    }
@media screen and (max-width: 840px) {
    devsite-book-nav, devsite-search {
        --devsite-search-button-margin-before: auto;
        --devsite-search-form-position: absolute;
        --devsite-search-form-position-end: 40px;
        --devsite-search-form-position-start: 0;
        --devsite-popout-display: block;
        --devsite-popout-position-start: 0;
        --devsite-popout-width: auto;
        --devsite-search-content-padding-start: 40px
        }
    }
@media screen and (max-width: 600px) {
    devsite-book-nav, devsite-search {
        --devsite-search-content-padding-start: 12px
        }
    }
devsite-appearance-selector, devsite-language-selector, devsite-select, select {
    --devsite-item-background-selected: #e8f0fe;
    --devsite-item-font-weight-selected: 400;
    --devsite-list-border: 0;
    --devsite-list-border-radius: 4px;
    --devsite-select-border: var(--devsite-primary-border);
    --devsite-select-border-radius: 4px;
    --devsite-select-font: 500 14px/36px var(--devsite-headline-font-family)
    }
devsite-select, select {
    --devsite-select-padding: 0 27px 0 15px
    }
input[type=text] {
    --devsite-input-border-radius: 4px
    }
devsite-selector {
    --devsite-border: 1px solid #dadce0;
    --devsite-border-radius: 8px;
    --devsite-content-border-radius: 0 0 7px 7px;
    --devsite-link-hover: #5f6368;
    --devsite-tab-marker-color: #5f6368;
    --devsite-overflow-tab-background: #f1f3f4;
    --devsite-overflow-tab-border-radius: 0 7px 0 0;
    --devsite-overflow-link-background-hover: #e8f0fe
    }
[dir=rtl] devsite-selector {
    --devsite-overflow-tab-border-radius: 7px 0 0
    }
devsite-snackbar {
    --devsite-snack-max-width: 568px;
    --devsite-snack-min-width: 288px;
    --devsite-snackbar-inner-background: #202124;
    --devsite-snackbar-inner-border-radius: 4px;
    --devsite-snackbar-inner-color: #ddd;
    --devsite-snackbar-message-font: 500 14px/1 Roboto, Noto Sans, Noto Sans JP, Noto Sans KR, Noto Naskh Arabic, Noto Sans Thai, Noto Sans Hebrew, Noto Sans Bengali, sans-serif;
    --devsite-snackbar-action-font: 500 14px/1 var(--devsite-headline-font-family);
    --devsite-snackbar-action-margin-left: auto;
    --devsite-snackbar-action-margin-right: 16px;
    --devsite-snackbar-action-padding: 8px;
    --devsite-snackbar-link-color: #669df6;
    --devsite-snackbar-message-padding: 16px 24px
    }
devsite-snackbar [type=cookie-notification], devsite-snackbar [type^=notification-] {
    --devsite-snackbar-inner-flex-wrap: wrap;
    --devsite-snackbar-action-padding: 4px 8px 24px;
    --devsite-snackbar-message-flex: 0 0 100%;
    --devsite-snackbar-message-padding: 24px 24px 16px
    }
@media screen and (max-width: 840px) {
    devsite-snackbar {
        --devsite-snack-width: 100%;
        --devsite-snackbar-inner-border-radius: 0
        }
    devsite-snackbar [type=cookie-notification], devsite-snackbar [type^=notification-] {
        --devsite-snackbar-message-padding: 24px
        }
    }
devsite-tabs {
    --devsite-tabs-wrapper-x: 6px;
    --devsite-link-font: 500 14px/20px var(--devsite-headline-font-family);
    --devsite-link-padding: 0 18px;
    --devsite-link-text-transform: none;
    --devsite-dropdown-tab-padding-x: 18px;
    --devsite-dropdown-toggle-padding-x: 12px;
    --devsite-overflow-menu-border-radius: 4px;
    --devsite-overflow-menu-top: 44px;
    --devsite-overflow-tab-padding: 0 18px;
    --devsite-tab-marker-border-radius: 3px 3px 0 0;
    --devsite-tab-marker-height: 3px;
    --devsite-tab-marker-inset-x: 4px;
    --devsite-tab-marker-position-x: 22px;
    --devsite-upper-tab-font-weight: 500
    }
html {
    -ms-touch-action: manipulation;
    touch-action: manipulation
    }
body, html {
    color: var(--devsite-primary-text-color);
    font: 400 16px/24px var(--devsite-primary-font-family);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    height: 100%;
    margin: 0;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%
    }
body {
    background-color: var(--devsite-background-1)
    }
.devsite-book-nav-bg:after, body[layout=docs] {
    background-color: var(--devsite-body-background, var(--devsite-background-0))
    }
body[sitemask--active] {
    overflow: hidden
    }
p {
    margin: 16px 0;
    padding: 0
    }
img, video {
    border: 0;
    height: auto;
    max-width: 100%
    }
table img {
    max-width: 272px
    }
table :link, table :visited {
    word-break: normal
    }
.devsite-toast-content :link, .devsite-toast-content :visited {
    color: #fff;
    text-decoration: underline
    }
.devsite-toast-content a:focus {
    background: hsla(0, 0%, 100%, 0.3);
    border-radius: 2px;
    margin: -4px;
    padding: 4px;
    text-decoration: none
    }
sup {
    line-height: 1
    }
dd, ol, ul {
    margin: 0;
    padding-left: 40px
    }
td > dl > dd, td > ol, td > ul {
    padding-left: 20px
    }
ol {
    list-style: decimal outside
    }
ol ol {
    list-style-type: lower-alpha
    }
ol ol ol {
    list-style-type: lower-roman
    }
ol.upper-alpha {
    list-style-type: upper-alpha
    }
ul {
    list-style: disc outside
    }
li, li p {
    margin: 12px 0;
    padding: 0
    }
dt {
    font: 700 16px/24px var(--devsite-primary-font-family)
    }
dd, dt {
    margin: 16px 0
    }
blockquote {
    background: var(--devsite-blockquote-background, var(--devsite-background-3));
    border-left: var(--devsite-blockquote-border-left, 0);
    border-radius: var(--devsite-blockquote-border-radius, 0);
    padding: var(--devsite-blockquote-padding, 8px);
    quotes: none
    }
hr {
    border: 0;
    border-top: var(--devsite-primary-border);
    height: 0;
    width: 100%
    }
.devsite-page-title ~ .devsite-article-body > p:first-child {
    margin-top: 28px
    }
.devsite-article-body > hr.full-width {
    margin: 16px -40px;
    width: calc(100% + 80px)
    }
@media screen and (max-width: 840px) {
    .devsite-article-body > hr.full-width {
        margin: 16px -24px;
        width: calc(100% + 48px)
        }
    }
@media screen and (max-width: 600px) {
    .devsite-article-body > hr.full-width {
        margin: 16px -16px;
        width: calc(100% + 32px)
        }
    }
abbr, acronym {
    border-bottom: 1px dotted var(--devsite-secondary-text-color);
    cursor: help
    }
address, cite, dfn, em {
    font-style: italic
    }
strong {
    font-weight: 700
    }
[visually-hidden] {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important
    }
.hidden, [hidden] {
    display: none !important
    }
[render-hidden] {
    display: inline !important;
    position: absolute !important;
    visibility: hidden !important
    }
[no-scroll] {
    overflow: hidden
    }
#app-progress {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1011
    }
#app-progress .devsite-progress--indeterminate .devsite-progress--indeterminate-1, #app-progress .devsite-progress--indeterminate .devsite-progress--indeterminate-3 {
    background-color: var(--devsite-progress-background-color, var(--devsite-primary-color, var(--devsite-secondary-text-color)))
    }
.devsite-article .material-icons {
    vertical-align: bottom
    }
.devsite-article-body .material-icons:not(:link):not(button), [template=landing] .devsite-article .material-icons:not(:link):not(button) {
    cursor: default;
    pointer-events: none
    }
.footnotes ol {
    padding-left: 16px
    }
.footnotes li {
    font: 400 13px/20px var(--devsite-primary-font-family)
    }
#qv-wrapper, #table-of-contents, #tb-wrapper, .inline-toc, div.toc:not(.class):not(.group):not(.type):not(.interface), h2#contents, h2.toc, h3#contents, h3.toc, ol.toc, section.toc, ul.toc {
    display: none
    }
@media screen and (max-width: 840px) {
    #app-progress {
        z-index: 1014
        }
    }
:link, :visited {
    color: var(--devsite-link-color);
    outline: 0;
    -webkit-text-decoration: var(--devsite-link-text-decoration, none);
    -moz-text-decoration: var(--devsite-link-text-decoration, none);
    text-decoration: var(--devsite-link-text-decoration, none);
    word-break: break-word
    }
a:hover {
    -webkit-text-decoration: var(--devsite-link-text-decoration-hover);
    -moz-text-decoration: var(--devsite-link-text-decoration-hover);
    text-decoration: var(--devsite-link-text-decoration-hover)
    }
a:focus {
    text-decoration: underline
    }
a:focus img {
    -webkit-filter: brightness(75%);
    filter: brightness(75%)
    }
.no-feedback devsite-feedback {
    display: none !important
    }
.preserve-case {
    text-transform: none
    }
a.external:after, a[href*="man7.org"]:after, a[href*="oracle.com"]:after {
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal;
    content: "open_in_new";
    font-size: 18px;
    margin-block: 0;
    margin-inline: 4px 0;
    vertical-align: text-bottom
    }
[dir=rtl] a.external:after, [dir=rtl] a[href*="man7.org"]:after, [dir=rtl] a[href*="oracle.com"]:after {
    -webkit-transform: scalex(-1);
    transform: scalex(-1)
    }
a.download:before {
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal;
    content: "file_download";
    display: inline-block;
    font-size: 18px;
    margin-block: 0;
    margin-inline: 0 4px;
    vertical-align: text-bottom
    }
devsite-content {
    counter-reset: numbered-h2 numbered-h3
    }
h2.numbered {
    line-height: 48px;
    margin-top: 60px;
    padding-bottom: 19px
    }
h2.numbered ~ h3.numbered {
    line-height: 40px
    }
h2.numbered:before, h2.numbered ~ h3.numbered:before {
    background: var(--devsite-tertiary-text-color);
    color: var(--devsite-inverted-text-color);
    display: inline-block;
    margin-block: 0;
    text-align: center
    }
h2.numbered:before {
    border-radius: 24px;
    content: counter(numbered-h2);
    counter-increment: numbered-h2;
    counter-set: numbered-h3 0;
    height: 48px;
    line-height: 48px;
    margin-inline: 0 20px;
    width: 48px
    }
h2.numbered ~ h3.numbered:before {
    border-radius: 20px;
    content: counter(numbered-h2) "." counter(numbered-h3);
    counter-increment: numbered-h3;
    height: 40px;
    line-height: 40px;
    margin-inline: 0 16px;
    min-width: 40px;
    padding-inline: 4px
    }
.compare-better, .compare-no, .compare-worse, .compare-yes {
    font-weight: 700
    }
.compare-better:before, .compare-blank:before, .compare-no:before, .compare-worse:before, .compare-yes:before {
    content: "";
    display: inline-block;
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    word-wrap: normal;
    margin-block: -4px 0;
    margin-inline: 0 4px;
    text-transform: none;
    vertical-align: middle;
    width: 24px
    }
.compare-better:before, .compare-yes:before {
    color: var(--devsite-compare-yes-color)
    }
.compare-no:before, .compare-worse:before {
    color: var(--devsite-compare-no-color)
    }
.compare-better:before {
    content: "thumb_up"
    }
.compare-no:before {
    content: "not_interested"
    }
.compare-worse:before {
    content: "thumb_down"
    }
.compare-yes:before {
    content: "check"
    }
.align-center {
    text-align: center
    }
.align-right {
    text-align: right
    }
.hanging-indent, .members.function td:first-child {
    -webkit-padding-start: 25px;
    -moz-padding-start: 25px;
    padding-inline-start: 25px;
    text-indent: -17px
    }
.bad-table {
    table-layout: fixed
    }
.bad-table td, .bad-table tr {
    word-wrap: break-word
    }
.bad-table pre {
    word-wrap: normal
    }
.screenshot {
    border: var(--devsite-secondary-border);
    padding: 3px
    }
.columns td, .columns th, .columns tr {
    background: 0;
    border: 0;
    font: 16px/24px var(--devsite-primary-font-family);
    padding-block: 0
    }
.columns tr {
    padding-inline: 0
    }
.columns td, .columns th {
    padding-inline: 0 20px
    }
.columns th {
    color: var(--devsite-primary-text-color);
    font-weight: 500
    }
.columns code, .columns pre {
    background: var(--devsite-background-3)
    }
.inline:not(.expandable) {
    display: inline
    }
.inline-block {
    display: inline-block
    }
.block {
    display: block
    }
img.inline-icon {
    height: 1.2em;
    vertical-align: sub
    }
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
    }
.wrap-code {
    white-space: normal
    }
.attempt-left, .attempt-right, aside.attempt-left, aside.attempt-right {
    max-width: calc(50% - 20px)
    }
.attempt-left, .video-wrapper-left, aside.attempt-left {
    margin-block: 0 40px;
    margin-inline: 0 40px
    }
[dir=ltr] .attempt-left, [dir=ltr] .video-wrapper-left, [dir=ltr] aside.attempt-left {
    float: left
    }
[dir=rtl] .attempt-left, [dir=rtl] .video-wrapper-left, [dir=rtl] aside.attempt-left {
    float: right
    }
.attempt-right, .video-wrapper, aside.attempt-right {
    margin-block: 0 40px;
    margin-inline: 40px 0
    }
[dir=ltr] .attempt-right, [dir=ltr] .video-wrapper, [dir=ltr] aside.attempt-right {
    float: right
    }
[dir=rtl] .attempt-right, [dir=rtl] .video-wrapper, [dir=rtl] aside.attempt-right {
    float: left
    }
.clear {
    clear: both
    }
.attempt-left + .attempt-right, .attempt-left + .video-wrapper, .video-wrapper-left + .attempt-right, .video-wrapper-left + .video-wrapper {
    margin-inline: 0
    }
.video-wrapper, .video-wrapper-full-width {
    overflow: hidden;
    position: relative
    }
.video-wrapper, .video-wrapper-left {
    width: calc(50% - 20px)
    }
.video-wrapper-full-width {
    margin: 16px 0;
    width: 100%
    }
.video-wrapper embed, .video-wrapper iframe, .video-wrapper object, .video-wrapper-full-width embed, .video-wrapper-full-width iframe, .video-wrapper-full-width object, .video-wrapper-left embed, .video-wrapper-left iframe, .video-wrapper-left object {
    height: 101%;
    left: -0.5%;
    position: absolute;
    top: -0.5%;
    width: 101%
    }
@media screen and (max-width: 840px) {
    .attempt-left, .attempt-right, aside.attempt-left, aside.attempt-right {
        display: block;
        max-width: 100%
        }
    .attempt-left, .attempt-right, .video-wrapper, .video-wrapper-left, aside.attempt-left, aside.attempt-right {
        float: none;
        margin: 16px 0;
        width: 100%
        }
    }
body[pending] #gc-wrapper {
    margin-top: 0 !important
    }
body[ready] #gc-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0;
    -moz-box-flex: 1;
    -ms-flex: 1 0;
    flex: 1 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
    }
[dir=ltr] body[ready][concierge] #gc-wrapper {
    margin-right: var(--devsite-concierge-width, 0)
    }
[dir=rtl] body[ready][concierge] #gc-wrapper {
    margin-left: var(--devsite-concierge-width, 0)
    }
.devsite-wrapper {
    min-height: 100vh
    }
body[ready] .devsite-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden
    }
.full-bleed {
    margin: 0;
    padding: 0
    }
.devsite-book-nav-bg, devsite-book-nav {
    width: 269px
    }
body[pending] devsite-book-nav {
    position: absolute
    }
@media screen and (max-width: 840px) {
    body[devsite-book-nav--open] {
        overflow: hidden
        }
    body[devsite-book-nav--open] devsite-book-nav[fixed] {
        -webkit-transform: translatex(0) !important;
        transform: translatex(0) !important
        }
    }
.devsite-sidebar {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    width: auto
    }
[has-sidebar] .devsite-sidebar {
    margin: 24px 0 0;
    -webkit-margin-end: 24px;
    -moz-margin-end: 24px;
    margin-inline-end: 24px;
    -webkit-margin-start: -8px;
    -moz-margin-start: -8px;
    margin-inline-start: -8px
    }
.devsite-sidebar[fixed] .devsite-sidebar-content {
    background-color: var(--devsite-body-background, var(--devsite-background-0));
    contain: content;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-height: var(--devsite-js-sidebar-max-height);
    max-width: var(--devsite-js-sidebar-max-width);
    -webkit-padding-start: 8px;
    -moz-padding-start: 8px;
    padding-inline-start: 8px;
    position: fixed;
    -webkit-transform: translate3d(0, var(--devsite-js-sidebar-offset), 0);
    transform: translate3d(0, var(--devsite-js-sidebar-offset), 0)
    }
.devsite-sidebar devsite-toc.devsite-toc, .devsite-sidebar devsite-toc > .devsite-nav-list {
    width: auto
    }
devsite-recommendations-sidebar.recommendations-rendered {
    margin-top: 20px
    }
body devsite-toc > .devsite-nav-list {
    width: auto
    }
.devsite-main-content {
    margin: 0 auto;
    max-width: var(--devsite-main-content-max-width);
    padding: var(--devsite-main-content-padding);
    position: relative;
    width: 100%
    }
#contain-402 {
    z-index: 1004 !important
    }
body[pending] .devsite-main-content {
    min-height: calc(100vh - 456px)
    }
body[ready] .devsite-main-content {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    min-height: auto
    }
body[layout=docs] .devsite-main-content {
    display: grid;
    grid-gap: 24px;
    grid-template-columns: 1fr minmax(752px, 936px) 1fr;
    grid-template-rows: 1fr
    }
body[layout=docs] .devsite-main-content[has-sidebar] {
    grid-template-columns: 1fr minmax(752px, 936px) minmax(160px, 1fr)
    }
body[layout=docs] .devsite-main-content[has-book-nav] {
    grid-template-columns: minmax(269px, 1fr) minmax(752px, 936px) 1fr
    }
body[layout=docs][concierge] .devsite-main-content[has-book-nav] {
    grid-template-columns: minmax(269px, 1fr) minmax(365px, 936px) 1fr
    }
body[layout=docs] .devsite-main-content[has-book-nav][has-sidebar] {
    grid-template-columns: minmax(269px, 1fr) minmax(752px, 936px) minmax(160px, 1fr)
    }
.devsite-main-content[has-book-nav] ~ .devsite-footer, .devsite-main-content[has-book-nav] ~ devsite-footer-promos, .devsite-main-content[has-book-nav] ~ devsite-footer-utility {
    margin-block: 0;
    margin-inline: 269px 0
    }
@media screen and (max-width: 1253px) {
    body[layout=docs] .devsite-main-content[has-sidebar] {
        grid-template-columns: 1fr minmax(752px, 936px) 1fr
        }
    body[layout=docs] .devsite-main-content[has-book-nav], body[layout=docs] .devsite-main-content[has-book-nav][has-sidebar] {
        grid-template-columns: 269px 1fr 0
        }
    [layout][concierge=closed], [layout][concierge=open], [layout][concierge] {
        --devsite-concierge-width: var(--devsite-concierge-width-closed, 0)
        }
    .devsite-sidebar {
        display: none
        }
    }
@media screen and (max-width: 840px) {
    body[layout=docs] .devsite-main-content {
        display: block;
        min-width: 100%
        }
    devsite-content-footer {
        padding: 0 24px
        }
    [layout][concierge=closed], [layout][concierge=open], [layout][concierge] {
        --devsite-concierge-width: 0
        }
    .devsite-main-content[has-book-nav] ~ .devsite-footer, .devsite-main-content[has-book-nav] ~ devsite-footer-promos, .devsite-main-content[has-book-nav] ~ devsite-footer-utility {
        margin-inline: 0
        }
    }
@media screen and (max-width: 600px) {
    devsite-content-footer {
        padding: 0 16px
        }
    }
.devsite-icon:before, ::part(material-icon) {
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal
    }
.devsite-icon-arrow-drop-down:before {
    content: "arrow_drop_down"
    }
.devsite-icon-close:before {
    content: "close"
    }
.devsite-icon-code:before {
    content: "code"
    }
.devsite-icon-code-dark:before, .devsite-icon-code-light:before {
    content: "brightness_medium"
    }
.devsite-icon-copy:before {
    content: "content_copy"
    }
.devsite-icon-edit:before {
    content: "edit"
    }
.beta, .caution, .deprecated, .dogfood, .experimental, .key-point, .key-term, .note, .objective, .preview, .special, .success, .tip, .warning, aside {
    border-radius: var(--devsite-notice-border-radius, 0);
    display: block;
    font-size: 14px;
    margin: var(--devsite-notice-margin);
    padding-block: var(--devsite-notice-padding-block);
    padding-inline: var(--devsite-notice-padding-inline)
    }
.beta :link, .beta :visited, .caution :link, .caution :visited, .deprecated :link, .deprecated :visited, .dogfood :link, .dogfood :visited, .experimental :link, .experimental :visited, .key-point :link, .key-point :visited, .key-term :link, .key-term :visited, .note :link, .note :visited, .objective :link, .objective :visited, .preview :link, .preview :visited, .special :link, .special :visited, .success :link, .success :visited, .tip :link, .tip :visited, .warning :link, .warning :visited, aside :link, aside :visited {
    text-decoration: underline
    }
.beta a:focus, .beta a:hover, .caution a:focus, .caution a:hover, .deprecated a:focus, .deprecated a:hover, .dogfood a:focus, .dogfood a:hover, .experimental a:focus, .experimental a:hover, .key-point a:focus, .key-point a:hover, .key-term a:focus, .key-term a:hover, .note a:focus, .note a:hover, .objective a:focus, .objective a:hover, .preview a:focus, .preview a:hover, .special a:focus, .special a:hover, .success a:focus, .success a:hover, .tip a:focus, .tip a:hover, .warning a:focus, .warning a:hover, aside a:focus, aside a:hover {
    background: hsla(0, 0%, 100%, 0.7);
    border-radius: 2px;
    margin: -4px;
    padding: 4px;
    text-decoration: none
    }
.beta pre, .caution pre, .deprecated pre, .dogfood pre, .experimental pre, .key-point pre, .key-term pre, .note pre, .objective pre, .preview pre, .special pre, .success pre, .tip pre, .warning pre, aside pre {
    background: hsla(0, 0%, 100%, 0.75)
    }
.beta code, .caution code, .deprecated code, .dogfood code, .experimental code, .key-point code, .key-term code, .note code, .objective code, .preview code, .special code, .success code, .tip code, .warning code, aside code {
    border: 0;
    font-weight: 700;
    padding: 0
    }
.beta:before, .caution:before, .deprecated:before, .dogfood:before, .experimental:before, .key-point:before, .key-term:before, .note:before, .objective:before, .preview:before, .special:before, .success:before, .tip:before, .warning:before, aside:before {
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal;
    margin-block: 0;
    margin-inline: -36px 0
    }
[dir=ltr] .beta:before, [dir=ltr] .caution:before, [dir=ltr] .deprecated:before, [dir=ltr] .dogfood:before, [dir=ltr] .experimental:before, [dir=ltr] .key-point:before, [dir=ltr] .key-term:before, [dir=ltr] .note:before, [dir=ltr] .objective:before, [dir=ltr] .preview:before, [dir=ltr] .special:before, [dir=ltr] .success:before, [dir=ltr] .tip:before, [dir=ltr] .warning:before, [dir=ltr] aside:before {
    float: left
    }
[dir=rtl] .beta:before, [dir=rtl] .caution:before, [dir=rtl] .deprecated:before, [dir=rtl] .dogfood:before, [dir=rtl] .experimental:before, [dir=rtl] .key-point:before, [dir=rtl] .key-term:before, [dir=rtl] .note:before, [dir=rtl] .objective:before, [dir=rtl] .preview:before, [dir=rtl] .special:before, [dir=rtl] .success:before, [dir=rtl] .tip:before, [dir=rtl] .warning:before, [dir=rtl] aside:before {
    float: right
    }
aside var {
    background: inherit;
    font-weight: 700;
    padding: 0
    }
.beta, .experimental, .note, .preview, .special, .tip, aside {
    background: var(--devsite-note-notice-background);
    color: var(--devsite-note-notice-color)
    }
.beta :link, .beta :link code, .beta :visited, .beta :visited code, .beta code, .experimental :link, .experimental :link code, .experimental :visited, .experimental :visited code, .experimental code, .note :link, .note :link code, .note :visited, .note :visited code, .note code, .preview :link, .preview :link code, .preview :visited, .preview :visited code, .preview code, .special :link, .special :link code, .special :visited, .special :visited code, .special code, .tip :link, .tip :link code, .tip :visited, .tip :visited code, .tip code, aside :link, aside :link code, aside :visited, aside :visited code, aside code {
    background: var(--devsite-note-notice-background);
    color: var(--devsite-note-notice-color)
    }
.note:before, .special:before, .tip:before, aside:before {
    content: "star"
    }
.beta:before, .experimental:before, .preview:before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M20.21,17.64l-6.15-8.22V5.57h2.57V3H6.35v2.57h2.57v3.86l-6.3,8.4c-0.44,0.6-0.5,1.41-0.15,2.08C2.8,20.58,3.49,21,4.24,21h14.5c1.11,0,2.01-0.9,2.01-2.01C20.75,18.48,20.53,18,20.21,17.64z' fill='%2301579b'/></svg>")
    }
.caution {
    background: var(--devsite-caution-notice-background);
    color: var(--devsite-caution-notice-color)
    }
.caution :link, .caution :link code, .caution :visited, .caution :visited code, .caution code {
    background: var(--devsite-caution-notice-background);
    color: var(--devsite-caution-notice-color)
    }
.caution:before {
    content: "error"
    }
.deprecated {
    background: var(--devsite-status-notice-background);
    color: var(--devsite-status-notice-color)
    }
.deprecated :link, .deprecated :link code, .deprecated :visited, .deprecated :visited code, .deprecated code {
    background: var(--devsite-status-notice-background);
    color: var(--devsite-status-notice-color)
    }
.deprecated:before {
    content: "not_interested"
    }
.dogfood {
    background: var(--devsite-status-notice-background);
    color: var(--devsite-status-notice-color)
    }
.dogfood :link, .dogfood :link code, .dogfood :visited, .dogfood :visited code, .dogfood code {
    background: var(--devsite-status-notice-background);
    color: var(--devsite-status-notice-color)
    }
.dogfood:before {
    content: "pets"
    }
.key-point {
    background: var(--devsite-key-point-notice-background);
    color: var(--devsite-key-point-notice-color)
    }
.key-point :link, .key-point :link code, .key-point :visited, .key-point :visited code, .key-point code {
    background: var(--devsite-key-point-notice-background);
    color: var(--devsite-key-point-notice-color)
    }
.key-point:before {
    content: "lightbulb_outline"
    }
.key-term {
    background: var(--devsite-key-term-notice-background);
    color: var(--devsite-key-term-notice-color)
    }
.key-term :link, .key-term :link code, .key-term :visited, .key-term :visited code, .key-term code {
    background: var(--devsite-key-term-notice-background);
    color: var(--devsite-key-term-notice-color)
    }
.key-term:before {
    content: "font_download"
    }
.objective {
    background: var(--devsite-success-notice-background);
    color: var(--devsite-success-notice-color)
    }
.objective :link, .objective :link code, .objective :visited, .objective :visited code, .objective code {
    background: var(--devsite-success-notice-background);
    color: var(--devsite-success-notice-color)
    }
.objective:before {
    content: "school"
    }
.success {
    background: var(--devsite-success-notice-background);
    color: var(--devsite-success-notice-color)
    }
.success :link, .success :link code, .success :visited, .success :visited code, .success code {
    background: var(--devsite-success-notice-background);
    color: var(--devsite-success-notice-color)
    }
.success:before {
    content: "check_circle"
    }
.warning {
    background: var(--devsite-warning-notice-background);
    color: var(--devsite-warning-notice-color)
    }
.warning :link, .warning :link code, .warning :visited, .warning :visited code, .warning code {
    background: var(--devsite-warning-notice-background);
    color: var(--devsite-warning-notice-color)
    }
.warning:before {
    content: "warning"
    }
.beta :focus code, .beta :hover code, .caution :focus code, .caution :hover code, .deprecated :focus code, .deprecated :hover code, .dogfood :focus code, .dogfood :hover code, .experimental :focus code, .experimental :hover code, .key-point :focus code, .key-point :hover code, .key-term :focus code, .key-term :hover code, .note :focus code, .note :hover code, .objective :focus code, .objective :hover code, .preview :focus code, .preview :hover code, .special :focus code, .special :hover code, .success :focus code, .success :hover code, .tip :focus code, .tip :hover code, .warning :focus code, .warning :hover code, aside :focus code, aside :hover code {
    background: transparent
    }
.devsite-no-page-title > .beta:first-child, .devsite-no-page-title > .caution:first-child, .devsite-no-page-title > .deprecated:first-child, .devsite-no-page-title > .dogfood:first-child, .devsite-no-page-title > .experimental:first-child, .devsite-no-page-title > .key-point:first-child, .devsite-no-page-title > .key-term:first-child, .devsite-no-page-title > .note:first-child, .devsite-no-page-title > .objective:first-child, .devsite-no-page-title > .preview:first-child, .devsite-no-page-title > .special:first-child, .devsite-no-page-title > .success:first-child, .devsite-no-page-title > .tip:first-child, .devsite-no-page-title > .warning:first-child, .devsite-no-page-title > aside:first-child {
    clear: right
    }
.devsite-banner {
    font: var(--devsite-banner-font, inherit);
    font-size: var(--devsite-banner-font-size, 14px);
    letter-spacing: var(--devsite-banner-letter-spacing, normal);
    margin: var(--devsite-banner-margin)
    }
.devsite-banner :link, .devsite-banner :visited {
    text-decoration: underline
    }
.devsite-banner-message {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: var(--devsite-banner-message-justify-content, normal);
    -webkit-justify-content: var(--devsite-banner-message-justify-content, normal);
    -moz-box-pack: var(--devsite-banner-message-justify-content, normal);
    -ms-flex-pack: var(--devsite-banner-message-justify-content, normal);
    justify-content: var(--devsite-banner-message-justify-content, normal);
    margin: 0 auto;
    max-width: var(--devsite-banner-message-max-width, 1488px);
    padding: var(--devsite-banner-message-padding)
    }
.devsite-banner-message-text {
    -webkit-margin-end: var(--devsite-banner-message-text-margin-x-end, auto);
    -moz-margin-end: var(--devsite-banner-message-text-margin-x-end, auto);
    margin-inline-end: var(--devsite-banner-message-text-margin-x-end, auto)
    }
.devsite-banner a:not(.button):focus, .devsite-banner[background] a:not(.button):focus {
    background: var(--devsite-inverted-text-rgba);
    border-radius: 2px;
    margin: -4px;
    padding: 4px;
    text-decoration: none
    }
.devsite-banner[background=white] {
    border-bottom: var(--devsite-primary-border)
    }
.devsite-banner-announcement, .devsite-banner-announcement :link:not(.button), .devsite-banner-announcement :visited:not(.button) {
    background: var(--devsite-banner-background, var(--devsite-note-notice-background))
    }
[layout=docs] .devsite-banner:first-of-type {
    border-radius: var(--devsite-banner-border-radius, 0)
    }
.devsite-banner-announcement[background] :link:not(.button), .devsite-banner-announcement[background] :visited:not(.button) {
    background: 0
    }
.devsite-banner-confidential {
    background: var(--devsite-caution-notice-background);
    color: var(--devsite-caution-notice-color)
    }
.devsite-banner-confidential .devsite-banner-message:before {
    content: "warning";
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal;
    -webkit-margin-end: 16px;
    -moz-margin-end: 16px;
    margin-inline-end: 16px
    }
.devsite-banner-translated {
    background: var(--devsite-background-3);
    color: var(--devsite-secondary-text-rgba)
    }
.devsite-banner-translated :link {
    text-decoration: none
    }
.devsite-banner .button, .devsite-banner button {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: -6px 0;
    -webkit-margin-start: 16px;
    -moz-margin-start: 16px;
    margin-inline-start: 16px;
    text-decoration: none
    }
.devsite-banner .material-icons {
    margin: -2px 0;
    vertical-align: middle
    }
.devsite-banner-translated-image {
    margin: 4px 0 -4px;
    -webkit-margin-end: 24px;
    -moz-margin-end: 24px;
    margin-inline-end: 24px;
    width: 122px
    }
.devsite-banner-heading {
    font-weight: 700
    }
@media screen and (max-width: 1253px) {
    .devsite-banner-translated .devsite-banner-translated-text {
        display: block
        }
    }
@media screen and (max-width: 840px) {
    [layout=docs] .devsite-banner-announcement {
        border-radius: 0
        }
    }
@media screen and (max-width: 600px) {
    [layout][template] .devsite-banner-message {
        display: block
        }
    .devsite-banner .button, .devsite-banner button {
        margin: 12px 0 0;
        -webkit-margin-start: 0;
        -moz-margin-start: 0;
        margin-inline-start: 0
        }
    }
[items-across="1"] {
    --devsite-columns: 1
    }
[items-across="2"] {
    --devsite-columns: 2
    }
[items-across="3"] {
    --devsite-columns: 3
    }
[items-across="4"] {
    --devsite-columns: 4
    }
.devsite-card-group {
    display: grid;
    gap: var(--devsite-item-gap, 24px);
    grid: auto-flow/repeat(var(--devsite-columns, 3), 1fr)
    }
.devsite-card-wrapper {
    min-width: 0
    }
.devsite-card-wrapper[hidden] {
    display: none
    }
.devsite-card h3 {
    font: var(--devsite-h2-font);
    letter-spacing: var(--devsite-h2-letter-spacing);
    margin: 0 0 10px
    }
.devsite-card {
    background: var(--devsite-card-background);
    border: var(--devsite-card-border);
    border-radius: var(--devsite-card-border-radius);
    box-shadow: var(--devsite-card-box-shadow);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
    -webkit-transition: var(--devsite-card-transition, 0);
    transition: var(--devsite-card-transition, 0)
    }
.devsite-card-image {
    height: 100%;
    object-fit: var(--devsite-card-image-object-fit, cover);
    position: absolute;
    width: 100%
    }
.devsite-card-image-container {
    background-image: url(../images/dynamic-content-card-default.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0 0 56.25%
    }
.devsite-card-image-no-background {
    background-image: none !important;
    overflow: hidden;
    position: relative
    }
.devsite-card-content-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0;
    -moz-box-flex: 1;
    -ms-flex: 1 0;
    flex: 1 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
    }
.devsite-card-buttons, .devsite-card-content, .devsite-card-skill {
    padding: var(--devsite-card-content-padding, 16px)
    }
.devsite-card-content {
    word-break: break-word
    }
.devsite-card-category {
    background-color: var(--devsite-label-background-color, transparent);
    border-radius: var(--devsite-label-border-radius, 4px);
    color: var(--devsite-label-color, inherit);
    letter-spacing: var(--devsite-label-letter-spacing, 0.3px);
    padding: var(--devsite-label-padding, 0);
    text-transform: var(--devsite-label-text-transform, uppercase)
    }
.devsite-card-summary {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    color: var(--devsite-card-summary-color, inherit);
    display: -webkit-box;
    font: 400 16px/24px var(--devsite-primary-font-family);
    max-height: 96px;
    overflow: hidden
    }
.devsite-card-attribution {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-top: var(--devsite-card-attribution-border, var(--devsite-primary-border));
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    color: var(--devsite-card-attribution-color, inherit);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font-size: var(--devsite-card-attribution-font-size, 12px);
    font-weight: var(--devsite-card-attribution-font-weight, normal);
    gap: 0 16px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    line-height: var(--devsite-card-attribution-line-height, 16px);
    margin: var(--devsite-card-attribution-margin, 0);
    min-height: var(--devsite-card-attribution-min-height, 40px);
    padding: var(--devsite-card-attribution-padding, 16px);
    position: relative
    }
.devsite-card-icon-container {
    color: var(--devsite-secondary-text-color);
    display: grid;
    height: 32px;
    place-content: center;
    width: 32px
    }
.devsite-card-icon-container[background] {
    background-color: var(--devsite-background-color);
    border-radius: 50%;
    overflow: hidden
    }
.devsite-card-attribution-text-container {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: end
    }
.devsite-card-icon-image {
    height: 32px
    }
.devsite-card-icon.material-icons {
    color: var(--devsite-foreground-color);
    font-size: 32px
    }
.devsite-card-icon-container[background] .devsite-card-icon {
    font-size: 24px
    }
.devsite-card-attribution-author, .devsite-card-attribution-date, .devsite-card-attribution-name, .devsite-card-date, .devsite-card-duration {
    margin: 0
    }
.devsite-card-attribution-author + .devsite-card-attribution-date, .devsite-card-attribution-name + .devsite-card-attribution-author {
    margin-top: 8px
    }
.devsite-card-section {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
    }
.devsite-card-attribution + .devsite-card-buttons, .devsite-card-content + .devsite-card-buttons, .devsite-card-content + .devsite-card-section .activity-card-icons, .devsite-card-content + .devsite-card-section .devsite-card-buttons, .devsite-card-content + .devsite-card-skill, .devsite-card-skill + .devsite-card-attribution, .devsite-card-skill + .devsite-card-buttons {
    padding-top: 0
    }
.devsite-card-date, .devsite-card-duration {
    color: var(--devsite-card-date-color, var(--devsite-secondary-text-color));
    letter-spacing: var(--devsite-card-date-letter-spacing, 0.3px)
    }
.devsite-card-icons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px
    }
.devsite-card-icon {
    height: 32px;
    width: 32px
    }
.devsite-card-api-references {
    list-style: none;
    padding: 0
    }
.devsite-card-api-references {
    color: var(--devsite-card-api-references-color, var(--devsite-secondary-text-color));
    font-size: 14px;
    line-height: 18px;
    margin-top: 12px
    }
.devsite-card-api-references-item {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
    }
.devsite-card-skill {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--devsite-card-skill-color);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: var(--devsite-card-skill-justify-content);
    -webkit-justify-content: var(--devsite-card-skill-justify-content);
    -moz-box-pack: var(--devsite-card-skill-justify-content);
    -ms-flex-pack: var(--devsite-card-skill-justify-content);
    justify-content: var(--devsite-card-skill-justify-content)
    }
.devsite-card-skill-icon {
    height: 24px;
    width: 24px
    }
.devsite-card-skill-icon-filled {
    fill: currentColor
    }
.devsite-card-skill-icon-unfilled {
    fill: var(--devsite-background-5)
    }
.devsite-card-buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -moz-box-orient: horizontal;
    -moz-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    margin: auto 0 0
    }
[template=activity] .devsite-card h3 {
    margin-bottom: 4px
    }
.devsite-card-list {
    border: var(--devsite-card-border);
    border-radius: var(--devsite-card-border-radius);
    list-style: none;
    overflow: var(--devsite-card-list-overflow, visible);
    padding: 0
    }
.devsite-card-list-item {
    border: var(--devsite-card-list-item-border, 0);
    border-radius: var(--devsite-card-list-item-border-radius, 2px)
    }
.devsite-card-list-item:not(:last-child) {
    border-bottom: var(--devsite-card-list-item-border, var(--devsite-card-border, 0))
    }
.devsite-card-list-item:last-child {
    border-bottom: var(--devsite-card-list-item-border, 0);
    margin: 0
    }
.devsite-card-list-link {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--devsite-card-list-link-color, var(--devsite-link-color));
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font: var(--devsite-card-list-link-font, var(--devsite-h2-font));
    letter-spacing: var(--devsite-h2-letter-spacing);
    -webkit-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
    width: 100%
    }
.devsite-card-list-link:focus, .devsite-card-list-link:hover {
    background: var(--devsite-card-list-link-background-hover, var(--devsite-link-background-hover));
    color: var(--devsite-card-list-link-color-hover, var(--devsite-link-color));
    text-decoration: none
    }
.devsite-card-list-link:after {
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal;
    content: "arrow_forward";
    margin-left: auto;
    opacity: 0;
    -webkit-transform: translatex(-20px);
    transform: translatex(-20px);
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    transition: opacity 0.2s, -webkit-transform 0.2s;
    transition: opacity 0.2s, transform 0.2s;
    transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s
    }
.devsite-card-list-link:focus:after, .devsite-card-list-link:hover:after {
    opacity: 1;
    -webkit-transform: translatex(0);
    transform: translatex(0)
    }
@media screen and (max-width: 840px) {
    .devsite-card-group, [items-across="3"], [items-across="4"] {
        --devsite-columns: 2
        }
    }
@media screen and (max-width: 600px) {
    .devsite-card-group {
        display: block
        }
    .devsite-card-wrapper:not(:first-of-type) {
        margin-top: 16px
        }
    .devsite-card-summary {
        font-size: 14px;
        line-height: 20px;
        max-height: 80px
        }
    }
.pre-style, code, pre {
    background: var(--devsite-code-background);
    color: var(--devsite-code-color);
    direction: ltr !important;
    font: 400 100%/1 var(--devsite-code-font-family);
    text-align: left !important
    }
code {
    border: var(--devsite-inline-code-border, 0);
    border-radius: var(--devsite-inline-code-border-radius, 0);
    font: 500 90%/1 var(--devsite-code-font-family);
    word-break: break-word
    }
.pre-style code, pre code, table code {
    font-weight: 400;
    word-break: normal
    }
.pre-style, pre {
    font: 14px/20px var(--devsite-code-font-family);
    margin: 16px 0;
    overflow-x: auto;
    padding: 24px;
    position: relative
    }
.pre-style code, pre code {
    background: 0;
    border: var(--devsite-inline-nested-code-border, 0);
    font-size: 14px;
    padding: 0
    }
b code, strong code {
    font-weight: 700
    }
cite code, em code, i code {
    font-style: italic
    }
pre.devsite-code-highlight > code > span, pre.devsite-code-highlight > span {
    -webkit-filter: grayscale(1);
    filter: grayscale(1)
    }
td > pre:only-child {
    padding: 0
    }
td > devsite-code pre.inline-code, td > devsite-code:only-child pre {
    padding: 0 64px 0 0
    }
td > devsite-code pre.inline-code, td > devsite-code:not([dark-code]):only-child pre {
    background: 0
    }
td > devsite-code pre.inline-code ~ .devsite-code-buttons-container, td > devsite-code:only-child pre ~ .devsite-code-buttons-container {
    top: -6px
    }
h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
    background: 0;
    color: var(--devsite-primary-text-color);
    padding: 0
    }
h1 code {
    color: #80868b
    }
:link code, :visited code, code :link, code :visited, pre :link, pre :visited, td :link code, td :visited code, td code :link, td code :visited {
    color: var(--devsite-contrast-link-color)
    }
body[layout] .devsite-main-content var span, var, var code {
    color: var(--devsite-var-color);
    -moz-osx-font-smoothing: auto;
    -webkit-font-smoothing: auto;
    font-weight: 500
    }
pre.clear-for-copy {
    all: initial;
    left: -100vw;
    position: absolute;
    top: -100vh;
    white-space: pre
    }
pre.clear-for-copy * {
    all: unset;
    font-family: var(--devsite-code-font-family);
    white-space: pre
    }
fieldset {
    border: 0;
    margin: 0;
    padding: 0
    }
input[type=radio] {
    -webkit-appearance: none;
    background: var(--devsite-background-1);
    border-radius: 2px;
    cursor: pointer;
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal;
    height: 18px;
    margin-block: -2px 2px;
    margin-inline: 0 8px;
    outline: 0;
    position: relative;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
    vertical-align: middle;
    width: 18px
    }
input[type=radio] {
    color: var(--devsite-secondary-text-color)
    }
input[type=radio] {
    border-radius: 50%;
    -webkit-transition: none;
    transition: none
    }
input[type=radio]:focus:before {
    background: var(--devsite-background-4)
    }
input[type=radio]:checked {
    color: var(--devsite-link-color)
    }
input[type=radio]:focus:before {
    background: var(--devsite-input-background-focus, var(--devsite-link-background))
    }
input[type=radio]:after {
    content: "check_box_outline_blank";
    position: relative;
    top: -3px;
    z-index: 1
    }
[dir=ltr] input[type=radio]:after {
    right: 3px
    }
[dir=rtl] input[type=radio]:after {
    left: 3px
    }
input[type=radio]:after {
    content: "radio_button_unchecked"
    }
input[type=radio]:checked:after {
    content: "radio_button_checked"
    }
input[type=radio]:before {
    border-radius: 50%;
    content: "";
    display: block;
    height: 36px;
    position: absolute;
    top: -9px;
    -webkit-transition: background 0.2s;
    transition: background 0.2s;
    width: 36px
    }
[dir=ltr] input[type=radio]:before {
    left: -9px
    }
[dir=rtl] input[type=radio]:before {
    right: -9px
    }
input[type=radio]:disabled {
    color: var(--devsite-input-color-disabled, var(--devsite-tertiary-text-color));
    cursor: default
    }
input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select[multiple], select[size], textarea {
    background: var(--devsite-input-background);
    border: var(--devsite-input-border);
    border-radius: var(--devsite-input-border-radius, 2px);
    color: var(--devsite-input-color, var(--devsite-primary-text-color));
    height: var(--devsite-input-height, auto);
    margin: var(--devsite-input-margin, 0);
    max-width: 100%;
    outline: 0;
    padding: var(--devsite-input-padding, 7px);
    -webkit-transition: border-color 0.2s;
    transition: border-color 0.2s;
    vertical-align: middle;
    width: var(--devsite-input-width, auto)
    }
input[type=date]:focus, input[type=datetime-local]:focus, input[type=datetime]:focus, input[type=email]:focus, input[type=month]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=time]:focus, input[type=url]:focus, input[type=week]:focus, select[multiple]:focus, select[size]:focus, textarea:focus {
    padding-bottom: var(--devsite-input-padding-bottom-focus, 6px)
    }
input[type=date]:disabled, input[type=datetime-local]:disabled, input[type=datetime]:disabled, input[type=email]:disabled, input[type=month]:disabled, input[type=number]:disabled, input[type=password]:disabled, input[type=search]:disabled, input[type=tel]:disabled, input[type=text]:disabled, input[type=time]:disabled, input[type=url]:disabled, input[type=week]:disabled, select[multiple]:disabled, select[size]:disabled, textarea:disabled {
    background: var(--devsite-background-3)
    }
body input[type=file] {
    height: auto;
    line-height: 1
    }
select {
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: var(--devsite-select-background-color);
    border: var(--devsite-select-border, var(--devsite-secondary-border));
    border-radius: var(--devsite-select-border-radius);
    box-shadow: none;
    color: var(--devsite-select-color, var(--devsite-primary-text-color));
    cursor: pointer;
    display: inline-block;
    height: var(--devsite-select-height, 36px);
    line-height: var(--devsite-select-line-height, 34px);
    max-width: var(--devsite-select-max-width, 340px);
    min-width: 72px;
    outline: 0;
    overflow: hidden;
    text-align: left;
    text-indent: 0.01px;
    text-overflow: ellipsis;
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
    vertical-align: middle;
    white-space: nowrap;
    background-image: var(--devsite-select-background-image);
    background-position: 100%;
    background-repeat: no-repeat
    }
select:focus, select:hover {
    background-color: var(--devsite-select-background-color-hover, var(--devsite-background-3));
    border: var(--devsite-select-border-hover, var(--devsite-select-border, var(--devsite-secondary-border)));
    color: var(--devsite-select-color-hover)
    }
select:active {
    background-color: var(--devsite-select-background-color-active, var(--devsite-background-4));
    color: var(--devsite-select-color-active)
    }
select:disabled {
    background-color: var(--devsite-background-3);
    border-color: transparent;
    color: var(--devsite-tertiary-text-color);
    cursor: default
    }
select:disabled {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"4\" viewBox=\"0 0 20 4\"><path d=\"M0,0l4,4l4-4H0z\" fill=\"%23bdc1c6\"/></svg>")
    }
@media screen and (-ms-high-contrast: active) {
    select {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"4\" viewBox=\"0 0 20 4\"><path d=\"M0,0l4,4l4-4H0z\" fill=\"white\"/></svg>")
        }
    }
@media screen and (-ms-high-contrast: black-on-white) {
    select {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"4\" viewBox=\"0 0 20 4\"><path d=\"M0,0l4,4l4-4H0z\" fill=\"black\"/></svg>")
        }
    }
input[type=checkbox] {
    -webkit-appearance: none;
    background: var(--devsite-background-1);
    border-radius: var(--devsite-checkbox-border-radius);
    cursor: pointer;
    height: var(--devsite-checkbox-size);
    margin-block: var(--devsite-checkbox-margin-block);
    margin-inline: var(--devsite-checkbox-margin-inline);
    outline: 0;
    position: relative;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
    vertical-align: middle;
    width: var(--devsite-checkbox-size)
    }
input[type=checkbox] {
    color: var(--devsite-secondary-text-color)
    }
input[type=checkbox]:focus:before {
    background: var(--devsite-background-4)
    }
input[type=checkbox]:checked, input[type=checkbox]:indeterminate {
    color: var(--devsite-link-color)
    }
input[type=checkbox]:checked:focus:before, input[type=checkbox]:indeterminate:focus:before {
    background: var(--devsite-input-background-focus, var(--devsite-link-background))
    }
input[type=checkbox]:after {
    content: "check_box_outline_blank";
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal;
    position: relative;
    right: var(--devsite-checkbox-offset-x);
    top: var(--devsite-checkbox-offset-y);
    z-index: 1
    }
input[type=checkbox]:checked:after {
    content: "check_box"
    }
input[type=checkbox]:indeterminate:after {
    content: "indeterminate_check_box"
    }
input[type=checkbox]:before {
    border-radius: var(--devsite-checkbox-icon-canvas-border-radius);
    content: "";
    display: block;
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal;
    height: var(--devsite-checkbox-icon-canvas-size);
    position: absolute;
    top: var(--devsite-checkbox-icon-canvas-offset-y);
    -webkit-transition: background 0.2s;
    transition: background 0.2s;
    width: var(--devsite-checkbox-icon-canvas-size)
    }
input[type=checkbox]:disabled {
    color: var(--devsite-input-color-disabled, var(--devsite-tertiary-text-color));
    cursor: default
    }
label {
    color: var(--devsite-secondary-text-color);
    display: block;
    font-size: 12px
    }
input + label {
    color: var(--devsite-primary-text-color);
    display: inline;
    font-size: 16px
    }
label[for] {
    cursor: pointer
    }
input:disabled + label {
    color: var(--devsite-input-color-disabled, var(--devsite-tertiary-text-color));
    cursor: default
    }
devsite-book-nav .devsite-breadcrumb-list, devsite-content .devsite-breadcrumb-list, devsite-header .devsite-breadcrumb-list {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: var(--devsite-breadcrumb-list-display);
    padding: var(--devsite-breadcrumb-list-padding);
    white-space: nowrap
    }
.devsite-search-project .devsite-breadcrumb-list, devsite-book-nav .devsite-breadcrumb-list, devsite-header .devsite-breadcrumb-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font-family: var(--devsite-font-family, var(--devsite-primary-font-family))
    }
devsite-header .devsite-breadcrumb-list {
    letter-spacing: var(--devsite-header-lower-breadcrumb-letter-spacing, 0);
    text-transform: var(--devsite-header-lower-breadcrumb-text-transform, none)
    }
devsite-content .devsite-breadcrumb-list {
    background: var(--devsite-breadcrumb-list-background, var(--devsite-background-1));
    display: var(--devsite-breadcrumb-list-display, inline-flex);
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: var(--devsite-breadcrumb-list-font-size, 13px);
    width: var(--devsite-breadcrumb-list-width)
    }
devsite-book-nav .devsite-breadcrumb-item, devsite-content .devsite-breadcrumb-item, devsite-header .devsite-breadcrumb-item {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding: var(--devsite-breadcrumb-padding)
    }
devsite-book-nav .devsite-breadcrumb-guillemet, devsite-book-nav .devsite-breadcrumb-link, devsite-header .devsite-breadcrumb-guillemet, devsite-header .devsite-breadcrumb-link {
    color: var(--devsite-secondary-text-rgba);
    fill: var(--devsite-secondary-text-rgba)
    }
devsite-book-nav .devsite-breadcrumb-guillemet:focus, devsite-book-nav .devsite-breadcrumb-guillemet:hover, devsite-book-nav .devsite-breadcrumb-link:focus, devsite-book-nav .devsite-breadcrumb-link:hover, devsite-header .devsite-breadcrumb-guillemet:focus, devsite-header .devsite-breadcrumb-guillemet:hover, devsite-header .devsite-breadcrumb-link:focus, devsite-header .devsite-breadcrumb-link:hover {
    color: var(--devsite-primary-text-rgba)
    }
devsite-book-nav .devsite-breadcrumb-guillemet:focus .devsite-google-wordmark-svg-path, devsite-book-nav .devsite-breadcrumb-guillemet:hover .devsite-google-wordmark-svg-path, devsite-book-nav .devsite-breadcrumb-link:focus .devsite-google-wordmark-svg-path, devsite-book-nav .devsite-breadcrumb-link:hover .devsite-google-wordmark-svg-path, devsite-header .devsite-breadcrumb-guillemet:focus .devsite-google-wordmark-svg-path, devsite-header .devsite-breadcrumb-guillemet:hover .devsite-google-wordmark-svg-path, devsite-header .devsite-breadcrumb-link:focus .devsite-google-wordmark-svg-path, devsite-header .devsite-breadcrumb-link:hover .devsite-google-wordmark-svg-path {
    fill: var(--devsite-primary-text-rgba)
    }
devsite-book-nav .devsite-breadcrumb-guillemet, devsite-header .devsite-breadcrumb-guillemet {
    font-size: 24px;
    margin: 0 4px;
    width: 24px
    }
devsite-content .devsite-breadcrumb-guillemet {
    color: var(--devsite-secondary-text-color);
    font-size: 18px;
    margin: 0 4px;
    width: 18px
    }
devsite-book-nav .devsite-breadcrumb-guillemet:before, devsite-content .devsite-breadcrumb-guillemet:before, devsite-header .devsite-breadcrumb-guillemet:before {
    content: "chevron_right"
    }
[dir=rtl] devsite-book-nav .devsite-breadcrumb-guillemet:before, [dir=rtl] devsite-content .devsite-breadcrumb-guillemet:before, [dir=rtl] devsite-header .devsite-breadcrumb-guillemet:before {
    content: "chevron_left"
    }
devsite-book-nav .devsite-breadcrumb-link, devsite-content .devsite-breadcrumb-link, devsite-header .devsite-breadcrumb-link {
    display: inline-block;
    -webkit-transition: color 0.2s;
    transition: color 0.2s
    }
devsite-header .devsite-doc-set-nav-row .devsite-breadcrumb-link, devsite-header .devsite-product-description-row .devsite-breadcrumb-guillemet, devsite-header .devsite-product-description-row .devsite-breadcrumb-link {
    color: var(--devsite-header-foreground-lower-hover, var(--devsite-inverted-text-color));
    fill: var(--devsite-header-foreground-lower-hover, var(--devsite-inverted-text-color))
    }
devsite-header .devsite-doc-set-nav-row .devsite-breadcrumb-link:focus, devsite-header .devsite-doc-set-nav-row .devsite-breadcrumb-link:hover, devsite-header .devsite-product-description-row .devsite-breadcrumb-guillemet:focus, devsite-header .devsite-product-description-row .devsite-breadcrumb-guillemet:hover, devsite-header .devsite-product-description-row .devsite-breadcrumb-link:focus, devsite-header .devsite-product-description-row .devsite-breadcrumb-link:hover {
    color: var(--devsite-header-foreground-lower, var(--devsite-inverted-text-rgba));
    fill: var(--devsite-header-foreground-lower, var(--devsite-inverted-text-rgba))
    }
devsite-book-nav .devsite-breadcrumb-link:focus, devsite-book-nav .devsite-breadcrumb-link:hover, devsite-header .devsite-breadcrumb-link:focus, devsite-header .devsite-breadcrumb-link:hover {
    text-decoration: none
    }
devsite-content .devsite-breadcrumb-link {
    color: var(--devsite-breadcrumb-link-color, var(--devsite-secondary-text-color))
    }
devsite-content .devsite-breadcrumb-link:focus, devsite-content .devsite-breadcrumb-link:hover {
    color: var(--devsite-breadcrumb-link-hover, var(--devsite-link-color));
    text-decoration: none
    }
.devsite-nav {
    font-size: var(--devsite-nav-font-size, 13px)
    }
.devsite-nav-list, .devsite-nav-responsive-tabs, .devsite-nav-section {
    list-style-type: none;
    padding: 0
    }
.devsite-nav-item {
    line-height: var(--devsite-nav-item-line-height, 16px);
    margin: 0
    }
.devsite-nav-title {
    color: var(--devsite-nav-title-color, var(--devsite-primary-text-color));
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
    }
.devsite-nav-title[href]:focus, .devsite-nav-title[href]:hover {
    color: var(--devsite-nav-color-hover, var(--devsite-link-color));
    text-decoration: none
    }
.devsite-nav-heading > .devsite-nav-title {
    color: var(--devsite-nav-heading-color, var(--devsite-secondary-text-rgba));
    font-weight: 700
    }
.devsite-nav-active {
    font-weight: var(--devsite-nav-font-weight-active, 500)
    }
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast: high) {
    .devsite-nav-active {
        font-weight: 700;
        text-decoration: underline
        }
    }
.devsite-nav-active, .devsite-nav-active.devsite-nav-title, .devsite-nav-active.devsite-nav-title > .devsite-nav-icon:before, .devsite-nav-deprecated .devsite-nav-active.devsite-nav-title {
    color: var(--devsite-nav-color-active, var(--devsite-link-color-active, var(--devsite-link-color)))
    }
.devsite-nav-text {
    overflow: hidden;
    text-overflow: ellipsis
    }
.devsite-nav-accordion > .devsite-expandable-nav > .devsite-nav-title-no-path:focus, .devsite-nav-title-no-path:focus {
    color: var(--devsite-link-color)
    }
.devsite-nav-icon {
    cursor: default;
    font-size: 18px;
    margin: -1px 0 -1px 4px
    }
[dir=rtl] .devsite-nav-icon {
    margin: -1px 4px -1px 0
    }
.devsite-nav-icon:before {
    color: var(--devsite-secondary-text-color);
    content: "info"
    }
.devsite-nav-icon[data-icon=alpha]:before, .devsite-nav-icon[data-icon=beta]:before, .devsite-nav-icon[data-icon=experimental]:before, .devsite-nav-icon[data-icon=preview]:before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><path d='M15.78,13.39L11,7V4h2V2H5v2h2v3l-4.9,6.53c-0.34,0.47-0.39,1.1-0.12,1.62C2.24,15.67,2.77,16,3.36,16h11.28 c0.86,0,1.56-0.7,1.56-1.56C16.2,14.04,16.03,13.67,15.78,13.39z' fill='%2380868b'/></svg>")
    }
.devsite-nav-deprecated .devsite-nav-title, .devsite-nav-deprecated.devsite-nav-accordion .devsite-nav-title, .devsite-nav-icon[data-icon=deprecated]:before, .devsite-nav-icon[data-icon=unsupported]:before {
    color: var(--devsite-secondary-text-color)
    }
.devsite-nav-icon[data-icon=deprecated]:before, .devsite-nav-icon[data-icon=unsupported]:before {
    content: "not_interested"
    }
.devsite-nav-icon[data-icon=external]:before {
    content: "open_in_new"
    }
[dir=rtl] .devsite-nav-icon[data-icon=external]:before {
    display: inline-block;
    -webkit-transform: scalex(-1);
    transform: scalex(-1)
    }
.devsite-nav-icon[data-icon=forward]:before {
    content: "arrow_forward";
    cursor: pointer
    }
[dir=rtl] .devsite-nav-icon[data-icon=forward]:before {
    content: "arrow_back"
    }
.devsite-nav-icon[data-icon=limited]:before {
    content: "verified_user"
    }
.devsite-nav-icon[data-icon=new]:before {
    content: "new_releases"
    }
.devsite-nav-icon[data-icon=nightly]:before {
    content: "nights_stay"
    }
.button, .devsite-footer-utility-button > a, button, input[type=button], input[type=file], input[type=image], input[type=reset], input[type=submit] {
    -moz-appearance: none;
    -webkit-appearance: none;
    background: var(--devsite-button-background, var(--devsite-background-1));
    border: var(--devsite-button-border, 0);
    border-radius: var(--devsite-button-border-radius, 2px);
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--devsite-button-color);
    cursor: pointer;
    display: inline-block;
    height: var(--devsite-button-height, 36px);
    letter-spacing: var(--devsite-button-letter-spacing, 0);
    line-height: var(--devsite-button-line-height, 36px);
    margin: var(--devsite-button-margin, 0);
    -webkit-margin-end: var(--devsite-button-margin-x-end);
    -moz-margin-end: var(--devsite-button-margin-x-end);
    margin-inline-end: var(--devsite-button-margin-x-end);
    max-width: var(--devsite-button-max-width, none);
    min-width: 36px;
    outline: 0;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    text-transform: var(--devsite-button-text-transform, uppercase);
    -webkit-transition: background-color 0.2s, border 0.2s, box-shadow 0.2s;
    transition: background-color 0.2s, border 0.2s, box-shadow 0.2s;
    vertical-align: middle;
    white-space: nowrap;
    width: var(--devsite-button-width, auto)
    }
.button:focus, .button:hover, .devsite-footer-utility-button > a:focus, .devsite-footer-utility-button > a:hover, button:focus, button:hover, input[type=button]:focus, input[type=button]:hover, input[type=file]:focus, input[type=file]:hover, input[type=image]:focus, input[type=image]:hover, input[type=reset]:focus, input[type=reset]:hover, input[type=submit]:focus, input[type=submit]:hover {
    background: var(--devsite-button-background-hover);
    border: var(--devsite-button-border-hover, 0);
    color: var(--devsite-button-color-hover, var(--devsite-button-color));
    font-weight: 500;
    -webkit-text-decoration: var(--devsite-button-text-decoration-hover, none);
    -moz-text-decoration: var(--devsite-button-text-decoration-hover, none);
    text-decoration: var(--devsite-button-text-decoration-hover, none)
    }
.button:focus, .devsite-footer-utility-button > a:focus, button:focus, input[type=button]:focus, input[type=file]:focus, input[type=image]:focus, input[type=reset]:focus, input[type=submit]:focus {
    box-shadow: var(--devsite-button-box-shadow-focus, none)
    }
.button:active, .devsite-footer-utility-button > a:active, button:active, input[type=button]:active, input[type=file]:active, input[type=image]:active, input[type=reset]:active, input[type=submit]:active {
    background: var(--devsite-button-background-active);
    border: var(--devsite-button-border-active, 0);
    -webkit-transform: var(--devsite-button-transform-active, none);
    transform: var(--devsite-button-transform-active, none)
    }
[foreground] .button, [foreground][background] .button {
    border-color: var(--devsite-foreground-button-border-color, transparent)
    }
[foreground] .button, [foreground] .button:active, [foreground] .button:focus, [foreground] .button:hover, [foreground][background] .button, [foreground][background] .button:active, [foreground][background] .button:focus, [foreground][background] .button:hover {
    color: var(--devsite-foreground-button-color, var(--devsite-foreground-color, var(--devsite-primary-color, var(--devsite-button-color))))
    }
[foreground] .button:active, [foreground] .button:focus, [foreground] .button:hover, [foreground][background] .button:active, [foreground][background] .button:focus, [foreground][background] .button:hover {
    background: var(--devsite-foreground-button-background-hover);
    border-color: var(--devsite-foreground-button-border-color-hover, transparent);
    color: var(--devsite-foreground-button-color-hover, var(--devsite-foreground-color, var(--devsite-primary-color, var(--devsite-button-color))))
    }
[foreground] .button:active, [foreground][background] .button:active {
    background: var(--devsite-foreground-button-background-active, var(--devsite-foreground-button-background-hover));
    border-color: var(--devsite-foreground-button-border-color-active, transparent)
    }
[background]:not(.devsite-landing-row-cards) .button:not([disabled]) {
    background: var(--devsite-background-button-background, var(--devsite-background-1));
    border-color: var(--devsite-background-button-border-color, transparent);
    color: var(--devsite-foreground-button-color, var(--devsite-background-button-color, var(--devsite-button-color)))
    }
[background]:not(.devsite-landing-row-cards) .button:not([disabled]):active, [background]:not(.devsite-landing-row-cards) .button:not([disabled]):focus, [background]:not(.devsite-landing-row-cards) .button:not([disabled]):hover {
    background: var(--devsite-background-button-background-hover, var(--devsite-button-background-hover));
    border-color: var(--devsite-background-button-border-color-hover, transparent);
    color: var(--devsite-foreground-button-color-hover, var(--devsite-foreground-button-color, var(--devsite-background-button-color-hover, var(--devsite-button-color))))
    }
[background]:not(.devsite-landing-row-cards) .button:not([disabled]):active {
    border-color: var(--devsite-background-button-border-color-active, transparent)
    }
.button.button-disabled, .button.button-disabled:active, .button.button-disabled:focus, .button.button-disabled:hover, [background] .button.button-disabled, [background] .button.button-disabled:active, [background] .button.button-disabled:focus, [background] .button.button-disabled:hover, [foreground] .button.button-disabled, [foreground] .button.button-disabled:active, [foreground] .button.button-disabled:focus, [foreground] .button.button-disabled:hover, body[theme] [background] .button.button-disabled, body[theme] [background] .button.button-disabled:active, body[theme] [background] .button.button-disabled:focus, body[theme] [background] .button.button-disabled:hover, body[theme] [foreground] .button.button-disabled, body[theme] [foreground] .button.button-disabled:active, body[theme] [foreground] .button.button-disabled:focus, body[theme] [foreground] .button.button-disabled:hover, button[disabled], button[disabled]:active, button[disabled]:focus, button[disabled]:hover, input[type=button][disabled], input[type=button][disabled]:active, input[type=button][disabled]:focus, input[type=button][disabled]:hover, input[type=file][disabled], input[type=file][disabled]:active, input[type=file][disabled]:focus, input[type=file][disabled]:hover, input[type=image][disabled], input[type=image][disabled]:active, input[type=image][disabled]:focus, input[type=image][disabled]:hover, input[type=reset][disabled], input[type=reset][disabled]:active, input[type=reset][disabled]:focus, input[type=reset][disabled]:hover, input[type=submit][disabled], input[type=submit][disabled]:active, input[type=submit][disabled]:focus, input[type=submit][disabled]:hover {
    background: var(--devsite-button-disabled-background, #ddd);
    border: var(--devsite-button-disabled-border, 0);
    box-shadow: none;
    color: var(--devsite-button-disabled-color, var(--devsite-tertiary-text-rgba));
    cursor: default;
    line-height: var(--devsite-button-disabled-line-height, 36px);
    pointer-events: none
    }
.button-blue, .button-green, .button-primary, .button-red, body devsite-footer-utility .devsite-footer-utility-button > a {
    background: var(--devsite-button-primary-background, var(--devsite-button-color));
    color: var(--devsite-button-primary-color, var(--devsite-inverted-text-color));
    line-height: var(--devsite-button-primary-line-height, 36px)
    }
.button-blue, .button-blue:active, .button-blue:focus, .button-blue:hover, .button-green, .button-green:active, .button-green:focus, .button-green:hover, .button-primary, .button-primary:active, .button-primary:focus, .button-primary:hover, .button-red, .button-red:active, .button-red:focus, .button-red:hover, body devsite-footer-utility .devsite-footer-utility-button > a, body devsite-footer-utility .devsite-footer-utility-button > a:active, body devsite-footer-utility .devsite-footer-utility-button > a:focus, body devsite-footer-utility .devsite-footer-utility-button > a:hover {
    border: 0
    }
.button-blue:focus, .button-blue:hover, .button-green:focus, .button-green:hover, .button-primary:focus, .button-primary:hover, .button-red:focus, .button-red:hover, body devsite-footer-utility .devsite-footer-utility-button > a:focus, body devsite-footer-utility .devsite-footer-utility-button > a:hover {
    background: var(--devsite-button-primary-background-hover);
    border: var(--devsite-button-primary-border-hover);
    color: var(--devsite-button-primary-color-hover, var(--devsite-inverted-text-color))
    }
.button-blue:active, .button-green:active, .button-primary:active, .button-red:active, body devsite-footer-utility .devsite-footer-utility-button > a:active {
    background: var(--devsite-button-primary-background-active);
    color: var(--devsite-button-primary-color-active, var(--devsite-inverted-text-color))
    }
[background]:not(.devsite-landing-row-cards) .button-primary:not([disabled]) {
    background: var(--devsite-background-button-primary-background, var(--devsite-background-1));
    color: var(--devsite-background-button-primary-color, var(--devsite-button-color))
    }
[background]:not(.devsite-landing-row-cards) .button-primary:not([disabled]):active, [background]:not(.devsite-landing-row-cards) .button-primary:not([disabled]):focus, [background]:not(.devsite-landing-row-cards) .button-primary:not([disabled]):hover {
    color: var(--devsite-background-button-primary-color-hover, var(--devsite-background-button-primary-color, var(--devsite-button-color)))
    }
[background]:not(.devsite-landing-row-cards) .button-primary:not([disabled]):focus, [background]:not(.devsite-landing-row-cards) .button-primary:not([disabled]):hover {
    background: var(--devsite-background-button-primary-background-hover)
    }
[background]:not(.devsite-landing-row-cards) .button-primary:not([disabled]):active {
    background: var(--devsite-background-button-primary-background-hover)
    }
[foreground] .button-primary, [foreground][background] .button-primary {
    background: var(--devsite-foreground-button-primary-background);
    color: var(--devsite-foreground-button-primary-color, var(--devsite-inverted-text-color))
    }
[foreground] .button-primary:active, [foreground] .button-primary:focus, [foreground] .button-primary:hover, [foreground][background] .button-primary:active, [foreground][background] .button-primary:focus, [foreground][background] .button-primary:hover {
    background: var(--devsite-foreground-button-primary-background-hover);
    color: var(--devsite-foreground-button-primary-color-hover, var(--devsite-foreground-button-primary-color, var(--devsite-inverted-text-color)))
    }
.button-white {
    background: 0;
    line-height: var(--devsite-button-white-line-height, 36px);
    padding: 0 8px
    }
.button-white, .button-white:active, .button-white:focus, .button-white:hover {
    border: 0;
    color: var(--devsite-button-white-color, var(--devsite-button-color))
    }
.button-white, .button-white:hover {
    box-shadow: var(--devsite-button-white-box-shadow-hover, none)
    }
.button-white:active, .button-white:focus, .button-white:hover {
    -webkit-text-decoration: var(--devsite-button-white-text-decoration-hover, none);
    -moz-text-decoration: var(--devsite-button-white-text-decoration-hover, none);
    text-decoration: var(--devsite-button-white-text-decoration-hover, none)
    }
.button-white:focus, .button-white:hover {
    background: var(--devsite-button-white-background-hover, var(--devsite-button-background-hover))
    }
.button-white:focus {
    box-shadow: var(--devsite-button-white-box-shadow-focus, none)
    }
.button-white:active {
    background: var(--devsite-button-white-background-active, var(--devsite-button-background-active));
    box-shadow: var(--devsite-button-white-box-shadow-active, none)
    }
[background]:not(.devsite-landing-row-cards) .button-white:not([disabled]) {
    background: transparent
    }
[background]:not(.devsite-landing-row-cards) .button-white:not([disabled]), [background]:not(.devsite-landing-row-cards) .button-white:not([disabled]):active, [background]:not(.devsite-landing-row-cards) .button-white:not([disabled]):focus, [background]:not(.devsite-landing-row-cards) .button-white:not([disabled]):hover {
    color: var(--devsite-background-button-white-color, var(--devsite-inverted-text-color))
    }
[background]:not(.devsite-landing-row-cards) .button-white:not([disabled]):hover {
    background: var(--devsite-background-button-white-background-hover)
    }
[background]:not(.devsite-landing-row-cards) .button-white:not([disabled]):focus {
    background: var(--devsite-background-button-white-background-focus)
    }
[background][foreground] .button-white, [background][foreground] .button-white:active, [background][foreground] .button-white:focus, [background][foreground] .button-white:hover, [foreground] .button-white, [foreground] .button-white:active, [foreground] .button-white:focus, [foreground] .button-white:hover {
    color: var(--devsite-foreground-button-white-color, var(--devsite-foreground-button-color, var(--devsite-foreground-color)))
    }
[background][foreground] .button-white:focus, [background][foreground] .button-white:hover, [foreground] .button-white:focus, [foreground] .button-white:hover {
    background: var(--devsite-foreground-button-white-background-hover, var(--devsite-foreground-button-background-hover))
    }
[background][foreground] .button-white:active, [foreground] .button-white:active {
    background: var(--devsite-foreground-button-white-background-active, var(--devsite-foreground-button-background-active, var(--devsite-foreground-button-background-hover)))
    }
[background=theme]:not(.devsite-landing-row-cards) .button-white {
    color: var(--devsite-text-color, var(--devsite-inverted-text-color))
    }
.button-white.button-disabled, .button-white[disabled] {
    background: 0
    }
.button-raised {
    background: var(--devsite-button-raised-background, var(--devsite-background-1));
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 1px 3px 1px var(--devsite-elevation-ambient-shadow-color);
    line-height: var(--devsite-button-raised-line-height, 36px)
    }
.button-raised, .button-raised:active, .button-raised:focus, .button-raised:hover {
    border: 0;
    color: var(--devsite-button-raised-color, var(--devsite-button-color))
    }
.button-raised:focus, .button-raised:hover {
    background: var(--devsite-button-raised-background-hover, var(--devsite-button-background-hover));
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color)
    }
.button-raised:active {
    background: var(--devsite-button-raised-background-active, var(--devsite-button-background-active));
    box-shadow: 0 1px 3px 0 var(--devsite-elevation-key-shadow-color), 0 4px 8px 3px var(--devsite-elevation-ambient-shadow-color)
    }
[background]:not(.devsite-landing-row-cards) .button-raised {
    background: var(--devsite-background-1)
    }
.button + .button, button + button, input[type=button] + input[type=button], input[type=file] + input[type=file], input[type=image] + input[type=image], input[type=reset] + input[type=reset], input[type=submit] + input[type=submit] {
    -webkit-margin-start: var(--devsite-button-sibling-gap-x, 16px);
    -moz-margin-start: var(--devsite-button-sibling-gap-x, 16px);
    margin-inline-start: var(--devsite-button-sibling-gap-x, 16px)
    }
.button-flat + .button-flat, .button-white + .button-white, button + .button {
    margin-left: 8px
    }
[dir=rtl] .button-flat + .button-flat, [dir=rtl] .button-white + .button-white, [dir=rtl] button + .button {
    margin-left: 0;
    margin-right: 8px
    }
.button-flat {
    padding: 0 8px
    }
.button-flat, .button-flat:active, .button-flat:focus, .button-flat:hover {
    background: 0;
    border: 0;
    box-shadow: none
    }
.button-flat:disabled {
    background-color: transparent
    }
[foreground] .button-primary:active, [foreground] .button-primary:focus, [foreground] .button-primary:hover, [foreground] .button-raised:active, [foreground] .button-raised:focus, [foreground] .button-raised:hover, [foreground] .button-white:active, [foreground] .button-white:focus, [foreground] .button-white:hover {
    border: 0
    }
.button-transparent {
    padding: 0 8px
    }
.button-transparent, .button-transparent:focus, .button-transparent:hover {
    background-color: transparent;
    border: 0;
    box-shadow: none
    }
.button-text-white {
    color: var(--devsite-inverted-text-color)
    }
.button-text-blue {
    color: var(--devsite-link-color)
    }
.button-lowercase {
    text-transform: none
    }
[dir=ltr] .button-unindented {
    margin-left: var(--devsite-button-unindented-margin-x, -8px)
    }
[dir=rtl] .button-unindented {
    margin-right: var(--devsite-button-unindented-margin-x, -8px)
    }
.button-icon, .button > .material-icons, button > .material-icons {
    font-size: 18px;
    height: 18px;
    width: 18px
    }
.button-white.button-with-icon, .button-white.external {
    padding: 0 16px
    }
.button > .material-icons, button > .material-icons {
    margin: 0 8px;
    position: relative;
    top: -2px;
    vertical-align: middle
    }
.button > .button-icon, button > .button-icon {
    margin: 0 8px
    }
.button-with-icon > .button-icon, .button-with-icon > .material-icons {
    margin: 0 8px 0 -4px
    }
[dir=rtl] .button-with-icon > .button-icon, [dir=rtl] .button-with-icon > .material-icons {
    margin: 0 -4px 0 8px
    }
.button-with-icon > .icon-after, .button.external:not(.button-with-icon):after, button.external:not(.button-with-icon):after {
    margin: 0 -4px 0 8px
    }
[dir=rtl] .button-with-icon > .icon-after, [dir=rtl] .button.external:not(.button-with-icon):after, [dir=rtl] button.external:not(.button-with-icon):after {
    margin: 0 8px 0 -4px
    }
[dir=ltr] .button:not(.button-with-icon) > .material-icons:not(.icon-after) {
    margin-left: var(--devsite-button-material-icon-margin-x, -4px)
    }
[dir=rtl] .button:not(.button-with-icon) > .material-icons:not(.icon-after) {
    margin-right: var(--devsite-button-material-icon-margin-x, -4px)
    }
[dir=ltr] .button:not(.button-with-icon) > .icon-after {
    margin-right: var(--devsite-button-material-icon-margin-x, -4px)
    }
[dir=rtl] .button:not(.button-with-icon) > .icon-after {
    margin-left: var(--devsite-button-material-icon-margin-x, -4px)
    }
[dir=ltr] .button-white:not(.button-with-icon) > .material-icons:not(.icon-after) {
    margin-left: var(--devsite-button-white-material-icon-margin-x, 4px)
    }
[dir=rtl] .button-white:not(.button-with-icon) > .material-icons:not(.icon-after) {
    margin-right: var(--devsite-button-white-material-icon-margin-x, 4px)
    }
[dir=ltr] .button-white:not(.button-with-icon) > .icon-after {
    margin-right: var(--devsite-button-white-material-icon-margin-x, 4px)
    }
[dir=rtl] .button-white:not(.button-with-icon) > .icon-after {
    margin-left: var(--devsite-button-white-material-icon-margin-x, 4px)
    }
.devsite-landing-row-item[foreground=grey] .button, [foreground=grey] .button {
    background: var(--devsite-secondary-text-color)
    }
.devsite-landing-row-item[foreground=grey] .button:active, .devsite-landing-row-item[foreground=grey] .button:focus, .devsite-landing-row-item[foreground=grey] .button:hover, [foreground=grey] .button:active, [foreground=grey] .button:focus, [foreground=grey] .button:hover {
    background: #3c4043
    }
[layout=docs] h1, [layout=docs] h2, [layout=docs] h3, [layout=docs] h4, [layout=docs] h5, [layout=docs] h6 {
    overflow: hidden;
    text-overflow: ellipsis
    }
.devsite-article h1:first-of-type {
    display: inline;
    margin-top: 0;
    vertical-align: middle
    }
.devsite-article[has-bookmark] h1:first-of-type {
    -webkit-margin-end: 83px;
    -moz-margin-end: 83px;
    margin-inline-end: 83px
    }
.devsite-landing-row h2, .devsite-landing-row-item-description h3, h1 {
    color: var(--devsite-heading-color, var(--devsite-secondary-text-color))
    }
.devsite-landing-row h2, .devsite-landing-row-large-headings .devsite-landing-row-item-description h3, h1 {
    font: var(--devsite-h1-font);
    letter-spacing: var(--devsite-h1-letter-spacing);
    margin: var(--devsite-h1-margin)
    }
.devsite-landing-row-1-up.devsite-landing-row-hero .devsite-landing-row-item-description h3, .devsite-landing-row-large-headings h2 {
    font: var(--devsite-display-font);
    letter-spacing: var(--devsite-display-letter-spacing)
    }
.devsite-landing-row .devsite-catalog-alphabet-letter-heading h2 {
    margin: 20px 0
    }
[layout=docs] h2 {
    border-bottom: var(--devsite-h2-border, var(--devsite-secondary-border));
    padding: var(--devsite-h2-padding)
    }
.devsite-landing-row h3, h2 {
    font: var(--devsite-h2-font);
    letter-spacing: var(--devsite-h2-letter-spacing);
    margin: var(--devsite-h2-margin)
    }
h3 {
    font: var(--devsite-h3-font);
    letter-spacing: var(--devsite-h3-letter-spacing);
    margin: var(--devsite-h3-margin)
    }
.devsite-landing-row h4, .devsite-landing-row-item-no-media h3 {
    font: var(--devsite-h3-font);
    padding: 0
    }
.devsite-landing-row-large-headings .devsite-landing-row-item-list h4 {
    font: 400 20px/32px var(--devsite-primary-font-family);
    letter-spacing: -0.01em
    }
h4, h5, h6 {
    margin: 32px 0 16px
    }
h4 {
    font: var(--devsite-h4-font);
    letter-spacing: var(--devsite-h4-letter-spacing)
    }
h5 {
    font: var(--devsite-h5-font);
    letter-spacing: var(--devsite-h5-letter-spacing)
    }
h6 {
    font: var(--devsite-h6-font);
    letter-spacing: var(--devsite-h6-letter-spacing)
    }
h1 + dl > dt:first-child, h1 + h1, h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6, h2 + dl > dt:first-child, h2 + h1, h2 + h2, h2 + h3, h2 + h4, h2 + h5, h2 + h6, h3 + dl > dt:first-child, h3 + h1, h3 + h2, h3 + h3, h3 + h4, h3 + h5, h3 + h6, h4 + dl > dt:first-child, h4 + h1, h4 + h2, h4 + h3, h4 + h4, h4 + h5, h4 + h6, h5 + dl > dt:first-child, h5 + h1, h5 + h2, h5 + h3, h5 + h4, h5 + h5, h5 + h6, h6 + dl > dt:first-child, h6 + h1, h6 + h2, h6 + h3, h6 + h4, h6 + h5, h6 + h6 {
    margin-top: 0
    }
table {
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    font: 14px/20px var(--devsite-primary-font-family);
    margin: 16px 0 15px;
    width: 100%
    }
caption {
    background: var(--devsite-background-3);
    font-weight: 500;
    padding: 12px 8px;
    text-align: center
    }
tr {
    background: var(--devsite-table-row-background, 0);
    border: 0;
    border-bottom: var(--devsite-table-row-border, var(--devsite-primary-border))
    }
tr:first-child {
    border-top: var(--devsite-table-row-border, var(--devsite-primary-border))
    }
td, th {
    border: 0;
    margin: 0;
    text-align: left
    }
[dir=rtl] td, [dir=rtl] th {
    text-align: right
    }
th {
    height: 48px;
    padding: var(--devsite-table-heading-padding, 8px);
    vertical-align: middle
    }
th > h2, th > h3 {
    border: 0;
    margin: 0 !important;
    padding: 0 !important
    }
td > .expandable > h2.showalways, td > .expandable > h3.showalways, td > h2:only-child, td > h3:only-child {
    border: 0;
    font: 500 14px/20px var(--devsite-primary-font-family);
    margin: 0;
    padding-bottom: 0
    }
td > .expandable > h2.showalways, td > .expandable > h3.showalways {
    line-height: 24px
    }
table h4, table h5, table h6 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important
    }
td b, td strong, th b, th strong {
    font-weight: 500
    }
td code, th code {
    background: 0;
    border: 0;
    font: 500 100%/1 var(--devsite-code-font-family);
    -moz-osx-font-smoothing: auto;
    -webkit-font-smoothing: auto;
    padding: 0
    }
td pre code {
    font-weight: 400;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased
    }
table.responsive td, table.responsive th {
    min-width: 214px
    }
table.responsive table:not(.responsive) td, table.responsive table:not(.responsive) th {
    min-width: 120px
    }
table.responsive td code, table.responsive th code {
    word-break: break-all;
    word-break: break-word
    }
table.responsive td tr:not(.alt) td:first-child, table.responsive tr:not(.alt) td td:first-child, td {
    background: var(--devsite-table-cell-background);
    vertical-align: top
    }
table.fixed {
    table-layout: fixed
    }
table.fixed td, table.fixed td code, table.fixed th, table.fixed th code {
    word-break: break-word
    }
.devsite-table-wrapper {
    overflow: auto
    }
.devsite-table-wrapper .devsite-table-wrapper {
    margin: 0;
    overflow: visible
    }
.devsite-table-wrapper table {
    margin: 0
    }
.devsite-table-wrapper .devsite-table-wrapper table {
    margin: 16px 0
    }
table.responsive table.responsive {
    margin: 0
    }
table.responsive td tr:first-child td {
    padding-top: 0
    }
table.responsive td tr:last-child td {
    padding-bottom: 0
    }
[dir=ltr] table.responsive td td:first-child {
    padding-left: 0
    }
[dir=rtl] table.responsive td td:first-child {
    padding-right: 0
    }
table.responsive > * > tr > th:not(:first-child), table.responsive > tr > th:not(:first-child) {
    display: none
    }
table.columns tr {
    border: 0
    }
table table tr:first-child {
    border-top: 0
    }
devsite-selector .devsite-table-wrapper:last-child tr:last-child, table table tr:last-child {
    border-bottom: 0
    }
th, th code {
    background: var(--devsite-table-heading-background, #e8eaed);
    color: var(--devsite-table-heading-color, var(--devsite-primary-text-color))
    }
table.vertical-rules tr > td:not(:last-child), table.vertical-rules tr > th:not(:last-child) {
    border-right: var(--devsite-table-row-border, var(--devsite-primary-border))
    }
.alt td, table.alternating-even-rows tr:nth-child(2n) td, table.alternating-odd-rows tr:nth-child(odd) td, td.alt {
    background: var(--devsite-alt-table-cell-background)
    }
table.responsive > * > tr:not(.alt) td:first-child, table.responsive > tr:not(.alt) td:first-child {
    background: var(--devsite-responsive-table-first-column-background)
    }
.devsite-article-body > .devsite-full-width-table, .devsite-article-body > table.full-width {
    margin: 16px -40px
    }
@media screen and (max-width: 840px) {
    .devsite-article-body > .devsite-full-width-table, .devsite-article-body > table.full-width {
        margin: 16px -24px
        }
    }
@media screen and (max-width: 600px) {
    .devsite-article-body > .devsite-full-width-table, .devsite-article-body > table.full-width {
        margin: 16px -16px
        }
    }
.devsite-article-body > .devsite-full-width-table td:first-child, .devsite-article-body > .devsite-full-width-table th:first-child, .devsite-article-body > table.full-width td:first-child, .devsite-article-body > table.full-width th:first-child {
    padding-left: 40px
    }
@media screen and (max-width: 840px) {
    .devsite-article-body > .devsite-full-width-table td:first-child, .devsite-article-body > .devsite-full-width-table th:first-child, .devsite-article-body > table.full-width td:first-child, .devsite-article-body > table.full-width th:first-child {
        padding-left: 24px
        }
    }
@media screen and (max-width: 600px) {
    .devsite-article-body > .devsite-full-width-table td:first-child, .devsite-article-body > .devsite-full-width-table th:first-child, .devsite-article-body > table.full-width td:first-child, .devsite-article-body > table.full-width th:first-child {
        padding-left: 16px
        }
    }
.devsite-article-body > .devsite-full-width-table td:last-child, .devsite-article-body > .devsite-full-width-table th:last-child, .devsite-article-body > table.full-width td:last-child, .devsite-article-body > table.full-width th:last-child {
    padding-right: 40px
    }
@media screen and (max-width: 840px) {
    .devsite-article-body > .devsite-full-width-table td:last-child, .devsite-article-body > .devsite-full-width-table th:last-child, .devsite-article-body > table.full-width td:last-child, .devsite-article-body > table.full-width th:last-child {
        padding-right: 24px
        }
    }
@media screen and (max-width: 600px) {
    .devsite-article-body > .devsite-full-width-table td:last-child, .devsite-article-body > .devsite-full-width-table th:last-child, .devsite-article-body > table.full-width td:last-child, .devsite-article-body > table.full-width th:last-child {
        padding-right: 16px
        }
    }
.devsite-full-width-table table table td:first-child, .devsite-full-width-table table table th:first-child {
    padding-left: 0
    }
@media screen and (max-width: 840px) {
    .devsite-full-width-table table table td:first-child, .devsite-full-width-table table table th:first-child {
        padding-right: 0
        }
    }
.devsite-full-width-table table table td:last-child, .devsite-full-width-table table table th:last-child {
    padding-right: 0
    }
@media screen and (max-width: 840px) {
    .devsite-full-width-table table table td:last-child, .devsite-full-width-table table table th:last-child {
        padding-left: 0
        }
    }
@media screen and (max-width: 840px) {
    table.responsive td, table.responsive th, table.responsive tr {
        display: block
        }
    table.responsive table:not(.responsive) tr {
        display: table-row
        }
    table.responsive table:not(.responsive) td, table.responsive table:not(.responsive) th {
        display: table-cell
        }
    table.responsive > * > th, table.responsive > th {
        height: auto
        }
    table.fixed.responsive col {
        display: contents
        }
    }
.devsite-book-nav::-webkit-scrollbar, .devsite-dialog::-webkit-scrollbar, .devsite-popout::-webkit-scrollbar, .devsite-table-wrapper::-webkit-scrollbar, .devsite-tabs-overflow-menu::-webkit-scrollbar, .devsite-toc::-webkit-scrollbar, [scrollbars]::-webkit-scrollbar, pre::-webkit-scrollbar {
    height: 8px;
    width: 8px
    }
.devsite-book-nav::-webkit-scrollbar-thumb, .devsite-dialog::-webkit-scrollbar-thumb, .devsite-popout::-webkit-scrollbar-thumb, .devsite-table-wrapper::-webkit-scrollbar-thumb, .devsite-tabs-overflow-menu::-webkit-scrollbar-thumb, .devsite-toc::-webkit-scrollbar-thumb, [scrollbars]::-webkit-scrollbar-thumb, pre::-webkit-scrollbar-thumb {
    background: var(--devsite-scrollbar-thumb-background);
    border-radius: 8px
    }
.devsite-doc-set-nav-row::-webkit-scrollbar, .devsite-header-upper-tabs::-webkit-scrollbar, [no-horizontal-scrollbars]::-webkit-scrollbar {
    height: 0;
    width: 0
    }
.devsite-table-wrapper::-webkit-scrollbar-corner, [scrollbars]::-webkit-scrollbar-corner, pre::-webkit-scrollbar-corner {
    background: 0
    }
.devsite-cse-confidential-results {
    background: var(--devsite-confidential-results-background);
    margin: 16px -40px;
    padding: 0 40px 16px
    }
.devsite-cse-confidential-results + aside {
    margin-top: -16px !important
    }
.devsite-search-results-stats {
    margin-bottom: 8px
    }
.devsite-search-results .gs-title {
    font-weight: 500
    }
.devsite-search-results .gs-title:link, .devsite-search-results .gs-title:visited {
    color: var(--devsite-link-color)
    }
.devsite-search-results .gs-webResult .gs-visibleUrl {
    color: var(--devsite-search-results-breadcrumb-color);
    font-size: 14px
    }
.devsite-search-results .gs-snippet {
    margin-top: 0
    }
.devsite-search-results .gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet {
    color: var(--devsite-primary-text-color)
    }
.devsite-result-item-link .devsite-result-item-confidential, .devsite-search-results .gs-title-label {
    background: var(--devsite-caution-notice-background);
    border-radius: 4px;
    color: var(--devsite-caution-notice-color);
    display: inline-block;
    font: 500 11px/16px var(--devsite-primary-font-family);
    letter-spacing: 0.8px;
    margin: 0 8px;
    padding: 5px 8px 3px;
    text-transform: uppercase
    }
body[template=search] .gsc-webResult .gsc-result {
    border: none;
    margin: 24px 0;
    padding: 0
    }
.devsite-search-page-controls {
    margin-top: 8px
    }
.devsite-search-project {
    border-bottom: var(--devsite-primary-border);
    margin-bottom: 24px;
    padding-bottom: 23px
    }
.devsite-search-project .devsite-project-scoped-results-title {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 8px
    }
.devsite-search-project .devsite-project-scoped-results-title .devsite-product-name-wrapper {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    height: 36px;
    margin: 6px 0
    }
.devsite-search-project .devsite-project-scoped-results-title .devsite-product-name-link, .devsite-search-project .devsite-project-scoped-results-title .devsite-site-logo-link {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    opacity: 1;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s
    }
.devsite-search-project .devsite-project-scoped-results-title .devsite-product-name-link:focus, .devsite-search-project .devsite-project-scoped-results-title .devsite-product-name-link:hover, .devsite-search-project .devsite-project-scoped-results-title .devsite-site-logo-link:focus {
    opacity: 0.7;
    text-decoration: none
    }
.devsite-search-project .devsite-project-scoped-results-title .devsite-site-logo {
    height: var(--devsite-logo-height, 32px)
    }
.devsite-search-project .devsite-project-scoped-results-title .devsite-has-google-wordmark > .devsite-breadcrumb-link, .devsite-search-project .devsite-project-scoped-results-title .devsite-has-google-wordmark > .devsite-product-name {
    direction: ltr
    }
.devsite-search-project .devsite-project-scoped-results-title .devsite-google-wordmark {
    height: 24px;
    margin: 0 4px 0 0;
    position: relative;
    top: 5px
    }
.devsite-search-project .devsite-project-scoped-results-title .devsite-google-wordmark-svg-path {
    -webkit-transition: fill 0.2s;
    transition: fill 0.2s
    }
.devsite-search-project .devsite-project-scoped-results-title .devsite-site-logo-link canvas {
    height: auto !important
    }
.devsite-search-project .devsite-project-scoped-results-title .devsite-site-logo-link picture {
    display: contents
    }
.devsite-search-project .devsite-project-scoped-results-title .devsite-product-logo-container {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 50%;
    color: var(--devsite-primary-color, var(--devsite-primary-text-color));
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 36px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-inline: 0 4px;
    width: 36px
    }
.devsite-search-project .devsite-project-scoped-results-title .devsite-product-logo-container[background] {
    background: var(--devsite-primary-color, var(--devsite-primary-text-color));
    color: var(--devsite-inverted-text-color)
    }
.devsite-search-project .devsite-project-scoped-results-title .devsite-product-logo {
    color: inherit;
    font-size: 32px;
    height: 32px;
    max-width: 32px;
    min-width: 32px;
    overflow: hidden;
    white-space: nowrap
    }
.devsite-search-project .devsite-project-scoped-results-title .devsite-product-logo-container[background] .devsite-product-logo {
    font-size: 28px;
    height: 28px;
    max-width: 28px;
    min-width: 28px
    }
.devsite-search-project .devsite-project-scoped-results-title .devsite-product-name {
    letter-spacing: 0;
    margin: 0;
    max-height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
    white-space: nowrap
    }
.devsite-search-project .devsite-project-scoped-results-title .devsite-site-logo:not([src*=".svg"]) {
    height: auto;
    max-height: 32px
    }
.devsite-search-project .devsite-project-scoped-results-title .devsite-breadcrumb-link > .devsite-product-name {
    color: inherit
    }
@media screen and (max-width: 840px) {
    .devsite-search-project .devsite-project-scoped-results-title .devsite-product-name-wrapper {
        -webkit-box-flex: 0;
        -webkit-flex: 0 1 auto;
        -moz-box-flex: 0;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        min-width: 0
        }
    .devsite-search-project .devsite-project-scoped-results-title .devsite-product-name-wrapper .devsite-breadcrumb-item:not(:first-of-type), .devsite-search-project .devsite-project-scoped-results-title .devsite-product-name-wrapper .devsite-site-logo-link + .devsite-product-name {
        display: none
        }
    .devsite-search-project .devsite-project-scoped-results-title .devsite-product-name-wrapper .devsite-breadcrumb-item, .devsite-search-project .devsite-project-scoped-results-title .devsite-product-name-wrapper .devsite-breadcrumb-link, .devsite-search-project .devsite-project-scoped-results-title .devsite-product-name-wrapper .devsite-breadcrumb-list, .devsite-search-project .devsite-project-scoped-results-title .devsite-product-name-wrapper .devsite-product-name {
        width: 100%
        }
    .devsite-search-project .devsite-project-scoped-results-title .devsite-product-name-wrapper .devsite-breadcrumb-link {
        overflow: hidden;
        text-overflow: ellipsis
        }
    }
.devsite-search-project .devsite-project-scoped-results-title .devsite-product-name-wrapper {
    position: relative;
    margin-left: 0.3em
    }
.devsite-search-project .devsite-breadcrumb-link, .devsite-search-project .devsite-breadcrumb-link:hover {
    color: var(--devsite-primary-text-color)
    }
.devsite-search-project .devsite-product-logo-container {
    color: var(--devsite-primary-color, var(--devsite-primary-text-color))
    }
.devsite-search-project .devsite-product-logo-container[background] {
    background: var(--devsite-primary-color, var(--devsite-primary-text-color));
    color: var(--devsite-inverted-text-color)
    }
.devsite-search-project .devsite-breadcrumb-link .devsite-google-wordmark {
    fill: currentColor
    }
.devsite-steps {
    border-top: var(--devsite-steps-border, 0);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: var(--devsite-steps-margin, 0)
    }
.devsite-steps .steps-direction {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    font-weight: 500;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative
    }
.devsite-steps .steps-previous {
    margin-left: var(--devsite-steps-prev-next-margin-x, 40px)
    }
.devsite-steps .steps-next {
    margin-right: var(--devsite-steps-prev-next-margin-x, 40px);
    text-align: right
    }
.devsite-steps .steps-link:hover {
    -webkit-text-decoration: var(--devsite-steps-text-decoration-hover, none);
    -moz-text-decoration: var(--devsite-steps-text-decoration-hover, none);
    text-decoration: var(--devsite-steps-text-decoration-hover, none)
    }
.devsite-steps .steps-link:focus {
    text-decoration: none
    }
.devsite-steps .steps-link-direction {
    color: var(--devsite-steps-direction-color, var(--devsite-link-color));
    display: block
    }
.devsite-steps .steps-link-title {
    color: var(--devsite-steps-title-color);
    display: var(--devsite-steps-title-display, inline)
    }
.devsite-steps .steps-link:hover .steps-link-title {
    border-bottom: var(--devsite-steps-title-border-hover, none)
    }
.devsite-steps .steps-link:focus .steps-link-title {
    border-bottom: var(--devsite-steps-title-border-focus)
    }
.devsite-steps .steps-link-arrow {
    color: var(--devsite-steps-arrow-color, var(--devsite-link-color));
    position: absolute
    }
.devsite-steps .steps-link-arrow-left {
    left: var(--devsite-steps-arrow-x-start, -40px)
    }
.devsite-steps .steps-link-arrow-right {
    right: var(--devsite-steps-arrow-x-start, -40px)
    }
@media screen and (max-width: 840px) {
    .devsite-steps .steps-previous {
        margin-left: var(--devsite-steps-prev-next-margin-x, 24px)
        }
    .devsite-steps .steps-next {
        margin-right: var(--devsite-steps-prev-next-margin-x, 24px)
        }
    .devsite-steps .steps-link-arrow-left {
        left: var(--devsite-steps-arrow-x-start, -24px)
        }
    .devsite-steps .steps-link-arrow-right {
        right: var(--devsite-steps-arrow-x-start, -24px)
        }
    .devsite-steps .steps-link-arrow {
        bottom: var(--devsite-steps-arrow-y-end, 4px);
        font-size: 16px
        }
    }
@media screen and (max-width: 600px) {
    .devsite-steps {
        padding: 8px 0 16px
        }
    .devsite-steps .steps-previous {
        margin-left: var(--devsite-steps-prev-next-margin-x, 0)
        }
    .devsite-steps .steps-next {
        margin-right: var(--devsite-steps-prev-next-margin-x, 0)
        }
    .devsite-steps .steps-link-arrow {
        display: var(--devsite-steps-arrow-display, none)
        }
    }
.devsite-jsfiddle-hide {
    display: none
    }
html[cached] .devsite-wrapper {
    display: none
    }
.devsite-dialog:not([is-upgraded]), iframe.devsite-embedded-youtube-video:not([is-upgraded]) {
    pointer-events: none;
    visibility: hidden
    }
.code-sample, .data-sample, .ds-selector-dropdown, .ds-selector-tabs, .kd-tabbed-horz, .kd-tabbed-vert {
    display: none
    }
.expandable {
    display: none
    }
devsite-selector {
    pointer-events: none;
    visibility: hidden
    }
devsite-search .devsite-searchbox {
    background: var(--devsite-searchbox-background, var(--devsite-background-3));
    border-radius: 2px
    }
iframe.framebox, iframe.inherit-locale {
    display: block;
    width: 100%
    }
[background] {
    background-color: var(--devsite-background-color, var(--devsite-primary-color))
    }
[background], [background]:not([foreground]) {
    color: var(--devsite-text-color, var(--devsite-inverted-text-color))
    }
[background] :link:not(.button), [background] :visited:not(.button) {
    color: var(--devsite-foreground-color, var(--devsite-link-color))
    }
[background] :focus > :not(.material-icons), [background] :link > :not(.material-icons):hover, [background] p > a:not(.button) {
    -webkit-text-decoration: var(--devsite-background-text-decoration, underline);
    -moz-text-decoration: var(--devsite-background-text-decoration, underline);
    text-decoration: var(--devsite-background-text-decoration, underline)
    }
[background] p > a:focus {
    background: var(--devsite-inverted-text-rgba);
    border-radius: 2px;
    margin: -4px;
    padding: 4px;
    text-decoration: none
    }
[foreground] :focus > :not(.material-icons), [foreground] :link > :not(.material-icons):hover {
    color: var(--devsite-foreground-color, var(--devsite-primary-color, var(--devsite-link-color)));
    text-decoration: underline
    }
[foreground] h2 a:not(.button), [foreground] h3 a:not(.button) {
    color: var(--devsite-foreground-color, var(--devsite-primary-color, var(--devsite-link-color)))
    }
.devsite-landing-row-item[foreground] h2 a:not(.button), .devsite-landing-row-item[foreground] h3 a:not(.button) {
    color: var(--devsite-foreground-color, var(--devsite-primary-color, var(--devsite-link-color)))
    }
devsite-content {
    display: block;
    position: relative
    }
body[layout=docs] devsite-content {
    align-self: start;
    grid-column: 2;
    grid-row: 1;
    margin: 24px 0;
    max-width: 936px;
    min-width: 0
    }
body[layout=docs] .devsite-article {
    background-color: var(--devsite-background-1);
    border: var(--devsite-page-border, 0);
    border-radius: var(--devsite-page-border-radius, 2px);
    padding: 40px
    }
body[layout=docs][template=landing] .devsite-article {
    padding: 0
    }
.devsite-article-meta {
    display: grid;
    grid-gap: 0 16px;
    grid-template-areas: "breadcrumbs ratings";
    grid-template-columns: 1fr auto
    }
.devsite-article-meta .devsite-breadcrumb-list {
    grid-area: breadcrumbs
    }
.devsite-article-meta devsite-thumb-rating {
    grid-area: ratings
    }
.devsite-banner + .devsite-article-meta {
    margin-top: -16px
    }
body[layout=full] .devsite-article-meta, body[template=landing] .devsite-article-meta {
    margin: 0
    }
devsite-feedback[position=header] {
    display: block
    }
[dir=ltr] devsite-feedback[position=header] {
    float: right;
    margin-left: 24px
    }
[dir=rtl] devsite-feedback[position=header] {
    float: left;
    margin-right: 24px
    }
body[layout=full] devsite-feedback[position=header], body[template=landing] devsite-feedback[position=header] {
    display: none
    }
[template=page] .devsite-article-body {
    margin-top: 16px
    }
[template=page] .devsite-article-body > :first-child {
    margin-top: 0
    }
@media screen and (max-width: 840px) {
    body[layout=docs] devsite-content {
        margin: 0
        }
    body[layout=docs] .devsite-article {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 24px
        }
    .devsite-banner + .devsite-article-meta {
        margin-top: 0
        }
    }
@media screen and (max-width: 600px) {
    body[layout=docs] .devsite-article {
        padding: 16px
        }
    .devsite-article-meta {
        display: block;
        margin: 0 0 12px
        }
    [dir] devsite-feedback[position=header] {
        float: none;
        margin: 0 0 12px;
        position: static
        }
    [dir] article[has-bookmark] devsite-feedback[position=header] {
        margin: 0 0 12px
        }
    }
#devsite-support-form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 0 -40px
    }
#devsite-support-form > * {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -moz-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    padding: 0 0 0 40px
    }
.devsite-support-form-error {
    color: #dd2c00
    }
.devsite-support-form-hidden {
    display: none
    }
.devsite-support-form-field {
    margin: 0 0 8px
    }
.devsite-support-form-field input:not([type=checkbox]):not([type=radio]), .devsite-support-form-field select, .devsite-support-form-field textarea {
    width: 100%
    }
.devsite-support-form-cc {
    color: var(--devsite-secondary-text-color);
    display: block;
    font-size: 13px
    }
#devsite-support-form > .devsite-support-form-half {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -moz-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%
    }
.devsite-support-quota {
    font: italic 400 12px/20px var(--devsite-primary-font-family);
    margin-bottom: 8px
    }
.devsite-support-quota-help {
    font-size: 18px;
    margin-left: 4px;
    vertical-align: top
    }
.devsite-support-quota-help:after {
    color: var(--devsite-tertiary-text-color);
    content: "help"
    }
@media screen and (max-width: 600px) {
    #devsite-support-form {
        display: block
        }
    }
.devsite-404, .devsite-offline {
    font: var(--devsite-404-font);
    letter-spacing: var(--devsite-404-letter-spacing);
    max-width: var(--devsite-404-max-width, 804px);
    min-height: var(--devsite-404-min-height);
    position: relative;
    text-align: var(--devsite-404-text-align, center)
    }
.devsite-404 devsite-search, .devsite-offline-reload, .devsite-offline-suggestions {
    margin: var(--devsite-404-search-margin);
    position: relative;
    z-index: 1
    }
.devsite-404 devsite-search .devsite-popout-result {
    max-height: 304px
    }
.devsite-404 devsite-search, .devsite-404 devsite-search .devsite-searchbox {
    width: 100%
    }
.devsite-404 devsite-search .devsite-search-button {
    display: none
    }
.devsite-404 h3, .devsite-offline h3 {
    color: var(--devsite-offline-heading-color, var(--devsite-secondary-color, var(--devsite-primary-text-color)))
    }
.devsite-404 h3 {
    font: 400 64px/64px var(--devsite-code-font-family)
    }
.devsite-404-error {
    background: var(--devsite-404-error-background);
    padding: var(--devsite-404-error-padding);
    text-align: var(--devsite-404-error-text-align, center)
    }
.devsite-404-error-message, .devsite-404-error > h3 {
    position: relative;
    z-index: 2
    }
.devsite-404-error > h3 {
    display: var(--devsite-404-error-heading-display, block)
    }
.devsite-404-error-message {
    font: var(--devsite-404-error-message-font);
    letter-spacing: var(--devsite-404-error-message-letter-spacing)
    }
.devsite-404-links {
    border-top: var(--devsite-404-links-border, var(--devsite-primary-border));
    text-align: start
    }
.devsite-404-links h3 {
    color: var(--devsite-primary-text-color);
    font: var(--devsite-404-links-heading-font, var(--devsite-h3-font))
    }
.devsite-404-links ul {
    display: grid;
    gap: 0 24px;
    grid: auto-flow/repeat(var(--devsite-404-links-columns), 1fr);
    list-style: none;
    padding: 0
    }
.devsite-offline .devsite-offline-suggestions {
    text-align: start
    }
.devsite-offline .devsite-offline-suggestions h3, .devsite-offline .devsite-offline-suggestions ul {
    margin: 0
    }
.devsite-offline h3 {
    font: 400 32px/48px var(--devsite-code-font-family)
    }
.devsite-offline-reload {
    text-align: center
    }
@media screen and (max-width: 840px) {
    .devsite-404, .devsite-offline {
        margin-top: 40px
        }
    }
body[embed] .devsite-book-nav-bg, body[embed] .devsite-book-nav-bg[fixed], body[embed] .devsite-book-nav-blur, body[embed] .devsite-book-nav-toggle, body[embed] .devsite-sidebar, body[embed] devsite-book-nav, body[embed] devsite-feature-tooltip.devsite-page-bookmark-tooltip, body[embed] devsite-feedback[position=header], body[embed] devsite-footer-linkboxes, body[embed] devsite-footer-promos, body[embed] devsite-footer-utility, body[embed] devsite-header, body[embed] devsite-panel, body[embed] devsite-thumb-rating[position=header], body[embed] devsite-toc, body[ready][embed] .devsite-book-nav-bg, body[ready][embed] .devsite-book-nav-bg[fixed], body[ready][embed] .devsite-book-nav-blur, body[ready][embed] .devsite-book-nav-toggle, body[ready][embed] .devsite-sidebar, body[ready][embed] devsite-book-nav, body[ready][embed] devsite-feature-tooltip.devsite-page-bookmark-tooltip, body[ready][embed] devsite-feedback[position=header], body[ready][embed] devsite-footer-linkboxes, body[ready][embed] devsite-footer-promos, body[ready][embed] devsite-footer-utility, body[ready][embed] devsite-header, body[ready][embed] devsite-panel, body[ready][embed] devsite-thumb-rating[position=header], body[ready][embed] devsite-toc {
    display: none
    }
body[layout=docs][embed] .devsite-article {
    box-shadow: none
    }
body[layout=docs][embed] devsite-content {
    margin: 0
    }
@media print {
    .prettyprint a, :link, :visited, a .atn, a .atv, a .com, a .dec, a .kwd, a .lit, a .pln, a .pun, a .str, a .tag, a .typ, a [class^=devsite-syntax-], a code, aside :link, aside :visited, body, code, h1, h1 code, h2, h2 code, h3, h3 code, h4, h4 code, h5, h5 code, h6, h6 code, html, pre, pre .atn, pre .atv, pre .com, pre .dec, pre .kwd, pre .lit, pre .pln, pre .pun, pre .str, pre .tag, pre .typ, pre [class^=devsite-syntax-], td, td code, th, th :link, th :visited, th code, var {
        color: #000 !important;
        padding-left: 0 !important;
        padding-right: 0 !important
        }
    .beta, .caution, .deprecated, .dogfood, .experimental, .key-point, .key-term, .note, .objective, .preview, .special, .success, .tip, .warning, aside {
        color: #000 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important
        }
    .beta a, .caution a, .deprecated a, .dogfood a, .experimental a, .key-point a, .key-term a, .note a, .objective a, .preview a, .special a, .success a, .tip a, .warning a, aside a {
        color: #000 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important
        }
    #gc-wrapper {
        margin: 0 !important
        }
    devsite-code {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important
        }
    devsite-expandable > :not(.showalways):not(.exw-control):not(.exw-expanded-content):not(.expand-control) {
        display: block !important
        }
    :link, :visited {
        text-decoration: underline
        }
    .devsite-article-meta, .devsite-banner-confidential .button, .devsite-banner-translated .button, .devsite-book-nav-bg, .devsite-book-nav-blur, .devsite-book-nav-toggle, .devsite-code-buttons-container, .devsite-page-bookmark-tooltip, .devsite-sidebar, devsite-book-nav, devsite-bookmark, devsite-feedback, devsite-footer-linkboxes, devsite-footer-promos, devsite-footer-utility, devsite-googler-buttons, devsite-header, devsite-recommendations, devsite-snackbar, devsite-thumb-rating {
        display: none !important
        }
    .devsite-article, .devsite-main-content, devsite-content {
        background: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        display: block !important;
        margin: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        width: auto !important
        }
    .devsite-banner {
        margin-top: 0
        }
    .attempt-left, .attempt-right, .video-wrapper {
        float: none;
        margin: 16px 0
        }
    img, video {
        display: block !important;
        page-break-inside: avoid !important
        }
    .devsite-main-content a[href]:after {
        content: " (" attr(href) ")";
        display: inline-block;
        font: 14px/20px var(--devsite-primary-font-family);
        max-width: 100%;
        word-wrap: break-word
        }
    }
@page {
    margin: 0.75in
    }
.devsite-product-platform-row {
    margin: 8px 0;
    padding: 0 24px
    }
.devsite-header-no-lower-tabs .devsite-product-platform-row {
    margin-top: -12px;
    padding-bottom: 24px
    }
.devsite-platform-container {
    display: inline-block
    }
.devsite-platform-container + .devsite-platform-container {
    margin-left: 16px
    }
.devsite-platform-icon-container {
    background: var(--devsite-background-1);
    border-radius: 50%;
    height: 40px;
    margin: 0 auto;
    width: 40px
    }
.devsite-platform-icon {
    color: var(--devsite-secondary-text-color);
    font-size: 24px;
    height: 24px;
    margin: 8px;
    width: 24px
    }
@media screen and (max-width: 1000px) {
    div.devsite-collapsible-section, div.devsite-header-background {
        background-image: none
        }
    }
@media screen and (max-width: 600px) {
    .devsite-product-platform-row {
        padding: 0 16px
        }
    }
.devsite-landing-row-cards .devsite-landing-row-item {
    border: var(--devsite-card-border);
    border-radius: var(--devsite-card-border-radius);
    box-shadow: var(--devsite-card-box-shadow);
    overflow: var(--devsite-card-overflow, hidden);
    position: relative
    }
.devsite-landing-row-cards .devsite-landing-row-item, .devsite-landing-row-cards[background] .devsite-landing-row-item {
    --devsite-link-color: #1a73e8;
    --devsite-text-color: var(--devsite-primary-text-color)
    }
.devsite-landing-row-cards .devsite-landing-row-item:not([background]) {
    background-color: var(--devsite-card-background)
    }
body[theme] .devsite-landing-row-cards[background=theme] :link:not(.button), body[theme] .devsite-landing-row-cards[background=theme] :visited:not(.button) {
    color: var(--devsite-link-color)
    }
.devsite-landing-row-cards .devsite-landing-row-column .devsite-landing-row-item {
    display: block
    }
.devsite-landing-row-cards .devsite-landing-row-item[description-position] .devsite-landing-row-item-media + .devsite-landing-row-item-description {
    margin: 0
    }
.devsite-landing-row-cards .devsite-landing-row-item-description {
    padding: 16px
    }
.devsite-landing-row-cards .devsite-landing-row-item-buttons {
    padding-top: 16px
    }
.devsite-landing-row-cards[background=theme] .devsite-landing-row-item-icon {
    color: var(--devsite-secondary-text-color)
    }
.devsite-landing-row-cards .devsite-landing-row-item-no-media h3 {
    font: var(--devsite-h2-font);
    margin: 0 0 20px
    }
.devsite-landing-row-cards.devsite-landing-row-1-up .devsite-landing-row-item-media {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0;
    -moz-box-flex: 1;
    -ms-flex: 1 0;
    flex: 1 0;
    margin: 0
    }
@media screen and (max-width: 840px) {
    .devsite-landing-row-cards.devsite-landing-row-1-up .devsite-landing-row-item {
        display: block
        }
    }
@media screen and (max-width: 600px) {
    .devsite-landing-row-cards.devsite-landing-row-1-up .devsite-landing-row-item-media + .devsite-landing-row-item-description {
        margin: 0;
        padding: 16px
        }
    }
.devsite-landing-row-cta {
    text-align: center
    }
.devsite-landing-row.devsite-landing-row-cta:not([background]) {
    background: var(--devsite-cta-background, var(--devsite-primary-color));
    color: var(--devsite-text-color, var(--devsite-inverted-text-color))
    }
.devsite-landing-row.devsite-landing-row-cta .devsite-landing-row-item {
    display: block
    }
.devsite-landing-row.devsite-landing-row-cta .devsite-landing-row-item-description {
    margin: 0 auto;
    max-width: 856px
    }
.devsite-landing-row-cta.devsite-landing-row h2, .devsite-landing-row-cta.devsite-landing-row-large-headings .devsite-landing-row-item-description h3 {
    color: var(--devsite-text-color, var(--devsite-inverted-text-color))
    }
.devsite-landing-row-cta h3 {
    letter-spacing: var(--devsite-h1-letter-spacing);
    margin-bottom: 16px;
    text-decoration: inherit
    }
.devsite-landing-row-cta h3 a:not(.button) {
    color: var(--devsite-text-color, var(--devsite-inverted-text-color))
    }
.devsite-landing-row-cta h3 + .devsite-landing-row-item-buttons {
    margin-top: 8px
    }
@media screen and (max-width: 600px) {
    .devsite-landing-row-cta .devsite-landing-row-item-description {
        font: 400 16px/24px var(--devsite-primary-font-family)
        }
    }
.devsite-landing-row-header {
    background: var(--devsite-landing-row-header-background);
    border-radius: var(--devsite-landing-row-header-border-radius);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto;
    max-width: var(--devsite-landing-row-header-max-width);
    padding: var(--devsite-landing-row-header-padding)
    }
.devsite-landing-row[header-position=left] .devsite-landing-row-header, .devsite-landing-row[header-position=right] .devsite-landing-row-header {
    display: block;
    margin: 0
    }
.devsite-landing-row[header-position=left] .devsite-landing-row-header {
    grid-column: var(--devsite-landing-row-header-grid-column, 1)
    }
.devsite-landing-row[header-position=right] .devsite-landing-row-header {
    grid-column: var(--devsite-landing-row-header-grid-column, 3);
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2
    }
.devsite-landing-row-header-text {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    margin: var(--devsite-landing-row-header-text-margin);
    max-width: var(--devsite-landing-row-header-text-max-width)
    }
.devsite-landing-row-header-text > h2 {
    margin: 0
    }
.devsite-landing-row-description {
    color: var(--devsite-text-color, var(--devsite-primary-text-color));
    font-family: var(--devsite-landing-row-description-font-family, var(--devsite-primary-font-family));
    font-size: var(--devsite-landing-row-description-font-size, 18px);
    letter-spacing: var(--devsite-letter-spacing);
    line-height: var(--devsite-line-height, 24px);
    max-width: var(--devsite-landing-row-description-max-width, 856px)
    }
[background] .devsite-landing-row-description {
    color: var(--devsite-text-color, var(--devsite-inverted-text-color))
    }
.devsite-landing-row:not([background]):not([foreground]) .devsite-landing-row-description {
    color: var(--devsite-text-color, var(--devsite-heading-color, var(--devsite-secondary-text-color)))
    }
h2 + .devsite-landing-row-description {
    margin-top: var(--devsite-row-header-contents-gap, 16px)
    }
.devsite-landing-row-header-buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -moz-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    margin-block: 0;
    margin-inline: 0 auto
    }
.devsite-landing-row-header-centered .devsite-landing-row-header, .devsite-landing-row-header[icon-position=top] {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
    }
.devsite-landing-row-header-centered .devsite-landing-row-header-buttons, .devsite-landing-row-header[icon-position=top] .devsite-landing-row-header-buttons {
    margin-inline: 0
    }
.devsite-landing-row-header-centered .devsite-landing-row-header {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center
    }
.devsite-landing-row-header-centered .devsite-landing-row-description {
    margin-left: auto;
    margin-right: auto
    }
.devsite-landing-row-header-centered .devsite-landing-row-header-buttons {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
@media screen and (max-width: 840px) {
    .devsite-landing-row-header + .devsite-landing-row-group {
        margin-top: 32px
        }
    .devsite-landing-row-header {
        display: block
        }
    }
@media screen and (max-width: 840px) {
    .devsite-landing-row-header-text + .devsite-landing-row-header-buttons {
        display: block;
        margin: 24px 0 0
        }
    }
@media screen and (max-width: 600px) {
    .devsite-landing-row-header-text + .devsite-landing-row-header-buttons {
        margin: 16px 0 0
        }
    }
.devsite-landing-row-1-up .devsite-landing-row-item-description[icon-position=left], .devsite-landing-row-item-description[icon-position] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
    }
.devsite-landing-row-item-description[icon-position=right] {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -moz-box-orient: horizontal;
    -moz-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
    }
.devsite-landing-row-item-description[icon-position=top] {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
    }
.devsite-landing-row-item-description[icon-position^=bottom] {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -moz-box-orient: vertical;
    -moz-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse
    }
.devsite-landing-row-header-icon-container, .devsite-landing-row-header-icon-container[background], .devsite-landing-row-item-icon-container, .devsite-landing-row-item-icon-container[background] {
    color: var(--devsite-foreground-color, var(--devsite-icon-color, var(--devsite-secondary-text-color)))
    }
.devsite-landing-row-header-icon-container, .devsite-landing-row-item-icon-container {
    height: var(--devsite-icon-canvas-size);
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-transition: background 0.2s, box-shadow 0.2s, color 0.2s;
    transition: background 0.2s, box-shadow 0.2s, color 0.2s;
    width: var(--devsite-icon-canvas-size)
    }
.devsite-landing-row-item-icon-container {
    display: var(--devsite-icon-canvas-display, inherit);
    inset: var(--devsite-icon-canvas-inset);
    overflow: var(--devsite-icon-canvas-overflow);
    position: var(--devsite-icon-canvas-position)
    }
.devsite-landing-row-item-description[icon-position=bottom] .devsite-landing-row-item-icon-container, .devsite-landing-row-item-description[icon-position=bottom] > a, .devsite-landing-row-item-description[icon-position=right] .devsite-landing-row-item-icon-container, .devsite-landing-row-item-description[icon-position=right] > a {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center
    }
.devsite-landing-row-item-description[icon-position=bottom-right] .devsite-landing-row-item-icon-container, .devsite-landing-row-item-description[icon-position=bottom-right] > a {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end
    }
.devsite-landing-row-header-icon-container[background], .devsite-landing-row-item-icon-container[background] {
    background: var(--devsite-background-color, var(--devsite-primary-color, var(--devsite-primary-text-color)))
    }
.devsite-landing-row-header-icon-container[background][foreground=theme], .devsite-landing-row-header-icon-container[foreground=theme], .devsite-landing-row-item-icon-container[background][foreground=theme], .devsite-landing-row-item-icon-container[foreground=theme] {
    color: var(--devsite-primary-color, var(--devsite-primary-text-color))
    }
.devsite-landing-row :focus .devsite-landing-row-header-icon-container[background][foreground=theme], .devsite-landing-row :focus .devsite-landing-row-item-icon-container[background][foreground=theme], .devsite-landing-row :link .devsite-landing-row-header-icon-container[background][foreground=theme]:hover, .devsite-landing-row :link .devsite-landing-row-item-icon-container[background][foreground=theme]:hover {
    color: var(--devsite-primary-color, var(--devsite-primary-text-color))
    }
.devsite-landing-row-header-icon, .devsite-landing-row-item-icon {
    aspect-ratio: 1
    }
.devsite-landing-row-header-icon {
    font-size: var(--devsite-header-icon-size, var(--devsite-icon-size));
    height: var(--devsite-header-icon-size, var(--devsite-icon-size));
    margin-block: var(--devsite-header-icon-margin-block, 0);
    margin-inline: var(--devsite-header-icon-margin-inline, 0);
    width: var(--devsite-header-icon-size, var(--devsite-icon-size))
    }
.devsite-landing-row-item-icon {
    font-size: var(--devsite-icon-size);
    height: var(--devsite-icon-size);
    margin-block: var(--devsite-icon-margin-block, 0);
    width: var(--devsite-icon-size)
    }
.devsite-landing-row-item-centered [icon-position=top] .devsite-landing-row-item-icon-container, .devsite-landing-row-item-centered [icon-position=top] > a {
    margin-inline: auto
    }
.devsite-landing-row-header-icon-container[background], .devsite-landing-row-item-icon-container[background] {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
[background] .devsite-landing-row-header-icon-container:not([foreground]), [background] .devsite-landing-row-item-icon-container:not([foreground]) {
    color: var(--devsite-icon-color, var(--devsite-inverted-text-color))
    }
:focus .devsite-landing-row-header-icon-container, :focus .devsite-landing-row-item-icon-container, :link .devsite-landing-row-header-icon-container:hover, :link .devsite-landing-row-item-icon-container:hover {
    color: var(--devsite-link-color)
    }
[foreground] .devsite-landing-row-item :focus .devsite-landing-row-item-icon-container, [foreground] .devsite-landing-row-item :link .devsite-landing-row-item-icon-container:hover, [foreground] :focus .devsite-landing-row-header-icon-container, [foreground] :link .devsite-landing-row-header-icon-container:hover {
    color: hsla(210, 6%, 63%, 0.5)
    }
[background] .devsite-landing-row-item :focus .devsite-landing-row-item-icon-container, [background] .devsite-landing-row-item :link .devsite-landing-row-item-icon-container:hover, [background] :focus .devsite-landing-row-header-icon-container, [background] :link .devsite-landing-row-header-icon-container:hover {
    color: var(--devsite-icon-color-hover, var(--devsite-inverted-text-rgba))
    }
:focus .devsite-landing-row-header-icon-container[background], :focus .devsite-landing-row-item-icon-container[background], :link .devsite-landing-row-header-icon-container[background]:hover, :link .devsite-landing-row-item-icon-container[background]:hover {
    color: var(--devsite-foreground-color, var(--devsite-icon-color, var(--devsite-secondary-text-color)));
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color)
    }
[background] :focus .devsite-landing-row-header-icon-container[background], [background] :focus .devsite-landing-row-item-icon-container[background], [background] :link .devsite-landing-row-header-icon-container[background]:hover, [background] :link .devsite-landing-row-item-icon-container[background]:hover {
    color: var(--devsite-foreground-color, var(--devsite-icon-color, var(--devsite-inverted-text-color)));
    text-decoration: none
    }
@media screen and (max-width: 840px) {
    .devsite-landing-row-item-description[icon-position^=bottom] {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: row-reverse;
        -moz-box-orient: horizontal;
        -moz-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
        }
    .devsite-landing-row-item-description[icon-position^=bottom] .devsite-landing-row-item-icon, .devsite-landing-row-item-description[icon-position^=bottom] .devsite-landing-row-item-icon-container, .devsite-landing-row-item-description[icon-position^=bottom] > a {
        -webkit-align-self: center;
        -ms-flex-item-align: center;
        align-self: center
        }
    }
.devsite-landing-row-1-up .devsite-landing-row-item {
    display: grid;
    grid-gap: var(--devsite-item-gap);
    grid-template-columns: var(--devsite-1-up-grid-template-columns)
    }
.devsite-landing-row-1-up.devsite-landing-row-hero .devsite-landing-row-item {
    -webkit-box-align: var(--devsite-hero-align-items, center);
    -webkit-align-items: var(--devsite-hero-align-items, center);
    -moz-box-align: var(--devsite-hero-align-items, center);
    -ms-flex-align: var(--devsite-hero-align-items, center);
    align-items: var(--devsite-hero-align-items, center)
    }
.devsite-landing-row-1-up .devsite-landing-row-item-description, .devsite-landing-row-1-up .devsite-landing-row-item-media-left {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1
    }
.devsite-landing-row-1-up .devsite-landing-row-item-media, .devsite-landing-row-1-up .devsite-landing-row-item-media-left + .devsite-landing-row-item-description {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2
    }
.devsite-landing-row-1-up .devsite-landing-row-item-description {
    display: block;
    grid-column: 1/span 4
    }
.devsite-landing-row-1-up .devsite-landing-row-item-media {
    margin: 0
    }
.devsite-landing-row-1-up .devsite-landing-row-item-media-left + .devsite-landing-row-item-description {
    grid-column: 9/span 4
    }
.devsite-landing-row.devsite-landing-row-1-up .devsite-landing-row-item-description {
    margin-top: 0
    }
.devsite-landing-row-1-up .devsite-landing-row-item-no-media .devsite-landing-row-item-description {
    grid-column: var(--devsite-1-up-no-media-description-grid-column)
    }
.devsite-landing-row-50 .devsite-landing-row-item-description {
    grid-column: 1/span 6
    }
.devsite-landing-row-50 .devsite-landing-row-item-media-left + .devsite-landing-row-item-description {
    grid-column: 7/span 6
    }
.devsite-landing-row-75 .devsite-landing-row-item-description {
    grid-column: 1/span 9
    }
.devsite-landing-row-75 .devsite-landing-row-item-media-left + .devsite-landing-row-item-description {
    grid-column: 4/span 9
    }
.devsite-landing-row-100 .devsite-landing-row-group, .devsite-landing-row-100 .devsite-landing-row-item-media {
    width: 100%
    }
.devsite-landing-row-100 .devsite-landing-row-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
    }
.devsite-landing-row-100 .devsite-landing-row-item-media + .devsite-landing-row-item-description {
    margin-bottom: 32px
    }
@media screen and (max-width: 840px) {
    .devsite-landing-row-1-up .devsite-landing-row-item-description, .devsite-landing-row-1-up .devsite-landing-row-item-media-left {
        grid-column: 1;
        grid-row: 1;
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -moz-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
        }
    .devsite-landing-row-1-up .devsite-landing-row-item-media-left + .devsite-landing-row-item-description, .devsite-landing-row-1-up .devsite-landing-row-item-media:not(.devsite-landing-row-item-media-left) {
        grid-column: 2
        }
    }
@media screen and (max-width: 600px) {
    .devsite-landing-row-1-up .devsite-landing-row-item {
        display: var(--devsite-item-display, block)
        }
    }
.devsite-landing-row-item-buttons {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -12px;
    padding-top: 8px
    }
.devsite-landing-row-1-up.devsite-landing-row-hero .devsite-landing-row-item-buttons {
    padding-top: var(--devsite-landing-row-hero-buttons-padding-top, 32px)
    }
.devsite-landing-row-item-buttons .button {
    margin: 4px 4px 4px 12px
    }
.devsite-landing-row-item-buttons .button > .material-icons {
    top: -1px
    }
.devsite-landing-row-item-buttons .button-white:not(.button-raised), .devsite-landing-row-item-buttons .button-white:not(.button-raised) + .button-white:not(.button-raised) {
    margin: 0 4px
    }
.devsite-landing-row-cta .devsite-landing-row-item-buttons {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 24px 0 0
    }
p + .devsite-landing-row-item-buttons {
    margin-top: -8px
    }
.devsite-landing-row-item-media {
    margin: var(--devsite-item-media-margin, 0);
    min-width: 0;
    padding: var(--devsite-item-media-padding, 0)
    }
.devsite-landing-row-item-code devsite-code {
    margin: 0
    }
.devsite-landing-row-item-video {
    display: block;
    width: 100%
    }
.devsite-landing-row-item-description {
    color: var(--devsite-text-color, inherit)
    }
.devsite-landing-row-item[description-position=left] .devsite-landing-row-item-description, .devsite-landing-row-item[description-position=left] .devsite-landing-row-item-media, .devsite-landing-row-item[description-position=right] .devsite-landing-row-item-description, .devsite-landing-row-item[description-position=right] .devsite-landing-row-item-media {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 var(--devsite-item-media-width, calc(50% - 12px));
    -moz-box-flex: 0;
    -ms-flex: 0 0 var(--devsite-item-media-width, calc(50% - 12px));
    flex: 0 0 var(--devsite-item-media-width, calc(50% - 12px));
    margin: 0
    }
.devsite-landing-row-item[description-position=left] .devsite-landing-row-item-media {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2
    }
.devsite-landing-row-item[description-position=left] .devsite-landing-row-item-description {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1
    }
.devsite-landing-row-item[background] .devsite-landing-row-item-description, .devsite-landing-row-item[background][description-position=left] .devsite-landing-row-item-description, .devsite-landing-row-item[background][description-position=right] .devsite-landing-row-item-description {
    padding: var(--devsite-item-description-padding, 16px)
    }
[dir=ltr] .devsite-landing-row-cards .devsite-landing-row-item[description-position=left] .devsite-landing-row-item-description, [dir=ltr] .devsite-landing-row-item[background][description-position=left] .devsite-landing-row-item-description {
    padding-right: 0
    }
[dir=rtl] .devsite-landing-row-cards .devsite-landing-row-item[description-position=left] .devsite-landing-row-item-description, [dir=rtl] .devsite-landing-row-item[background][description-position=left] .devsite-landing-row-item-description {
    padding-left: 0
    }
[dir=ltr] .devsite-landing-row-cards .devsite-landing-row-item[description-position=right] .devsite-landing-row-item-description, [dir=ltr] .devsite-landing-row-item[background][description-position=right] .devsite-landing-row-item-description {
    padding-left: 0
    }
[dir=rtl] .devsite-landing-row-cards .devsite-landing-row-item[description-position=right] .devsite-landing-row-item-description, [dir=rtl] .devsite-landing-row-item[background][description-position=right] .devsite-landing-row-item-description {
    padding-right: 0
    }
.devsite-landing-row-item[description-position=top] .devsite-landing-row-item-media {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2
    }
.devsite-landing-row-item[description-position=top] .devsite-landing-row-item-description {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1
    }
.devsite-landing-row-item-body, .devsite-landing-row-item-description {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: var(--devsite-item-description-height, auto);
    min-width: 0
    }
.devsite-landing-row-item-body {
    display: var(--devsite-item-body-display, flex);
    grid: var(--devsite-item-body-grid);
    grid-gap: var(--devsite-item-body-grid-gap)
    }
.devsite-landing-row-item-body h3 {
    grid-area: heading
    }
.devsite-landing-row-item-buttons {
    grid-area: buttons
    }
[dir=ltr] .devsite-landing-row-item-buttons {
    margin-left: -12px
    }
[dir=rtl] .devsite-landing-row-item-buttons {
    margin-right: -12px
    }
.devsite-landing-row h3:first-child, .devsite-landing-row h3:first-of-type, .devsite-landing-row h4 + p, .devsite-landing-row h4:first-child, .devsite-landing-row h5:first-child, .devsite-landing-row h6:first-child, .devsite-landing-row p:first-child, .devsite-landing-row-item-description h2, .devsite-landing-row-large-headings h3 {
    margin-top: 0
    }
.devsite-landing-row-item-description-content {
    font: var(--devsite-description-content-font, inherit);
    grid-area: content
    }
.devsite-landing-row-item-description-content > :last-child {
    margin-bottom: 0
    }
.devsite-landing-row-item-centered .devsite-landing-row-item-description-content, .devsite-landing-row-item-centered h3 {
    text-align: center
    }
.devsite-landing-row-item-centered .devsite-landing-row-item-buttons {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
@media screen and (max-width: 840px) {
    .devsite-landing-row-item[description-position] .devsite-landing-row-item-description, .devsite-landing-row-item[description-position] .devsite-landing-row-item-media {
        max-width: none
        }
    .devsite-landing-row-item[description-position] .devsite-landing-row-item-media {
        -webkit-align-self: var(--devsite-item-media-align-self);
        -ms-flex-item-align: var(--devsite-item-media-align-self);
        align-self: var(--devsite-item-media-align-self);
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -moz-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        margin: var(--devsite-item-media-margin, 0);
        -webkit-box-ordinal-group: NaN;
        -webkit-order: var(--devsite-item-media-order, 1);
        -moz-box-ordinal-group: NaN;
        -ms-flex-order: var(--devsite-item-media-order, 1);
        order: var(--devsite-item-media-order, 1);
        width: var(--devsite-item-media-width)
        }
    .devsite-landing-row-item[description-position] .devsite-landing-row-item-description {
        -webkit-box-ordinal-group: NaN;
        -webkit-order: var(--devsite-item-description-order, 2);
        -moz-box-ordinal-group: NaN;
        -ms-flex-order: var(--devsite-item-description-order, 2);
        order: var(--devsite-item-description-order, 2)
        }
    .devsite-landing-row-item[description-position=top] .devsite-landing-row-item-media {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -moz-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2
        }
    .devsite-landing-row-item[description-position=top] .devsite-landing-row-item-description {
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -moz-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
        }
    [dir] .devsite-landing-row-cards .devsite-landing-row-item[description-position] .devsite-landing-row-item-description, [dir] .devsite-landing-row-item[background][description-position] .devsite-landing-row-item-description {
        padding: var(--devsite-item-description-padding, 16px)
        }
    }
@media screen and (max-width: 600px) {
    .devsite-landing-row-1-up .devsite-landing-row-item-media + .devsite-landing-row-item-description {
        padding: 0
        }
    }
.devsite-landing-row-item-custom-image {
    aspect-ratio: 16/9
    }
.devsite-landing-row-item-custom-image, .devsite-landing-row-item-custom-image-icon-wrapper {
    display: grid;
    place-content: center
    }
.devsite-landing-row-item-custom-image:not([background]) {
    background-color: var(--devsite-background-color, var(--devsite-primary-color, var(--devsite-primary-text-color)))
    }
.devsite-landing-row-item-custom-image[background=grey] {
    background: var(--devsite-background-color, var(--devsite-background-3))
    }
.devsite-landing-row-item-custom-image[background=white] {
    background: var(--devsite-background-1)
    }
.devsite-landing-row-item-custom-image-icon-container[background], .devsite-landing-row-no-image-background .devsite-landing-row-item-custom-image:not([background]) {
    background: 0
    }
.devsite-landing-row-item-custom-image-icon {
    color: var(--devsite-inverted-text-color);
    font-size: var(--devsite-custom-image-icon-font-size);
    max-height: var(--devsite-custom-image-icon-max-height);
    width: var(--devsite-custom-image-icon-width)
    }
.devsite-landing-row-item-custom-image[background=grey]:not([foreground]) .devsite-landing-row-item-custom-image-icon, .devsite-landing-row-item-custom-image[background=white]:not([foreground]) .devsite-landing-row-item-custom-image-icon {
    color: var(--devsite-icon-color, var(--devsite-secondary-text-color))
    }
.devsite-landing-row-item-custom-image-icon.material-icons {
    opacity: 0.8
    }
.devsite-landing-row-item-description-callout {
    font-weight: 700
    }
.devsite-landing-row-item-description-feature {
    margin-top: 16px;
    position: relative
    }
.devsite-landing-row-item-description-feature + .devsite-landing-row-item-description-feature {
    margin: 0
    }
.devsite-landing-row-item-description-feature-link {
    border-bottom: var(--devsite-secondary-border);
    font-weight: 500;
    padding: 12px 0 11px
    }
.devsite-landing-row-item-description-feature-tooltip {
    background: #455a64;
    color: hsla(0, 0%, 100%, 0.7);
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color);
    font: 14px/20px var(--devsite-primary-font-family);
    min-width: 200px;
    opacity: 0;
    padding: 24px;
    position: absolute;
    -webkit-transition: opacity 0.2s, visibility 0.2s;
    transition: opacity 0.2s, visibility 0.2s;
    visibility: hidden;
    width: 67%;
    z-index: 1020
    }
.no-touch .devsite-landing-row-item-description-feature-link:hover + .devsite-landing-row-item-description-feature-tooltip {
    opacity: 1;
    visibility: visible
    }
.devsite-landing-row-item-description-feature-tooltip:before {
    border-bottom: 8px solid #455a64;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    content: "";
    position: absolute;
    top: -8px
    }
.devsite-landing-row-item-description-feature-tooltip h3, .devsite-landing-row-large-headings .devsite-landing-row-item-description-feature-tooltip h3 {
    color: #fff;
    font: 14px/20px var(--devsite-primary-font-family);
    margin-bottom: 8px;
    padding: 0
    }
.devsite-landing-row-item-image {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start
    }
.devsite-landing-row-item-image:not([background]) {
    background: var(--devsite-background-4)
    }
.devsite-landing-row-item-image img {
    min-width: var(--devsite-item-image-min-width);
    vertical-align: middle;
    width: var(--devsite-item-image-width, 100%)
    }
.devsite-landing-row-item-image a {
    display: block
    }
.devsite-landing-row-no-image-background .devsite-landing-row-item-image:not([background]) {
    background: 0
    }
.devsite-landing-row-item-list {
    padding: 0
    }
.devsite-landing-row-item-description-content + .devsite-landing-row-item-list {
    margin-top: 32px
    }
.devsite-landing-row-item-list-item {
    list-style: none
    }
.devsite-landing-row-item-list-item-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
.devsite-landing-row-item-list-item-content[icon-position=top] {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
    }
.devsite-landing-row-item-list-item-icon-container, .devsite-landing-row-item-list-item-icon-container[background] {
    color: var(--devsite-foreground-color, var(--devsite-icon-color, var(--devsite-secondary-text-color)))
    }
.devsite-landing-row-item-list-item-icon-container {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    height: 40px;
    margin-block: 0;
    margin-inline: 0 20px;
    -webkit-transition: background 0.2s, box-shadow 0.2s, color 0.2s;
    transition: background 0.2s, box-shadow 0.2s, color 0.2s;
    width: 40px
    }
.devsite-landing-row-item-list-item-icon {
    font-size: 32px;
    height: 32px;
    width: 32px
    }
.devsite-landing-row-item-list-item-icon-container[background] {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--devsite-background-color, var(--devsite-primary-color, var(--devsite-primary-text-color)));
    border-radius: 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
.devsite-landing-row-item-list-item-icon-container[background] .devsite-landing-row-item-list-item-icon {
    font-size: 24px;
    height: 24px;
    width: 24px
    }
.devsite-landing-row-item-list h4 {
    font: 400 16px/20px var(--devsite-primary-font-family)
    }
.devsite-landing-row .devsite-landing-row-item-list h4 {
    margin: 0 0 4px
    }
.devsite-landing-row-item-list-item-description {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font: 400 14px/20px var(--devsite-primary-font-family);
    max-width: calc(100% - 40px)
    }
@media screen and (max-width: 840px) {
    .devsite-landing-row-item-list-item-description {
        max-width: none
        }
    }
.devsite-landing-row-item-list-item:not(:last-child) .devsite-landing-row-item-list-item-description-content {
    margin-bottom: 24px
    }
[background] :focus > .devsite-landing-row-item-list-item-icon-container, [background] :link > .devsite-landing-row-item-list-item-icon-container:hover {
    text-decoration: none
    }
:focus .devsite-landing-row-item-list-item-content .devsite-landing-row-item-list-item-icon-container[foreground=theme], :link .devsite-landing-row-item-list-item-icon-container[foreground=theme]:hover {
    color: var(--devsite-icon-color-hover, var(--devsite-primary-color, var(--devsite-inverted-text-rgba)))
    }
[foreground] :focus .devsite-landing-row-item-list-item-content .devsite-landing-row-item-list-item-icon-container, [foreground] :link .devsite-landing-row-item-list-item-content:hover .devsite-landing-row-item-list-item-icon-container {
    color: hsla(210, 6%, 63%, 0.5)
    }
[background] :focus .devsite-landing-row-item-list-item-content .devsite-landing-row-item-list-item-icon-container, [background] :link .devsite-landing-row-item-list-item-content:hover .devsite-landing-row-item-list-item-icon-container {
    color: var(--devsite-icon-color-hover, var(--devsite-inverted-text-rgba))
    }
:link .devsite-landing-row-item-list-item-description h4 + p {
    color: var(--devsite-primary-text-color);
    text-decoration: none
    }
[background] :link .devsite-landing-row-item-list-item-description h4 + p {
    color: var(--devsite-text-color, var(--devsite-inverted-text-color))
    }
:focus .devsite-landing-row-item-list-item-content .devsite-landing-row-item-list-item-icon-container[background], :link .devsite-landing-row-item-list-item-content:hover .devsite-landing-row-item-list-item-icon-container[background] {
    background: var(--devsite-inverted-text-rgba);
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color)
    }
.devsite-landing-row :focus .devsite-landing-row-item-list-item-description > :first-child, [background] :link .devsite-landing-row-item-list-item-description > :first-child {
    text-decoration: underline
    }
.devsite-landing-row-item-labels > a, .devsite-landing-row-item-labels > span {
    color: var(--devsite-label-color, inherit);
    display: inline-block;
    letter-spacing: var(--devsite-label-letter-spacing, 0.8px);
    text-transform: var(--devsite-label-text-transform, uppercase)
    }
.devsite-landing-row-item-labels > a + a, .devsite-landing-row-item-labels > a + span, .devsite-landing-row-item-labels > span + a, .devsite-landing-row-item-labels > span + span {
    margin-left: 8px
    }
.devsite-landing-row-item-labels > a[background], .devsite-landing-row-item-labels > span[background] {
    border-radius: 4px;
    margin-bottom: 16px;
    padding: 4px 8px
    }
.devsite-landing-row-column > .devsite-landing-row-item:nth-of-type(n+2) {
    margin: 32px 0 0
    }
.devsite-landing-row-item {
    -webkit-box-align: var(--devsite-item-align-items);
    -webkit-align-items: var(--devsite-item-align-items);
    -moz-box-align: var(--devsite-item-align-items);
    -ms-flex-align: var(--devsite-item-align-items);
    align-items: var(--devsite-item-align-items);
    border-radius: var(--devsite-item-border-radius);
    display: var(--devsite-item-display, flex);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 100%
    }
.devsite-landing-row-item[description-position=left], .devsite-landing-row-item[description-position=right] {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
    }
.devsite-landing-row-column, .devsite-landing-row-item {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0;
    -moz-box-flex: 1;
    -ms-flex: 1 0;
    flex: 1 0;
    min-width: 0
    }
.devsite-landing-row-column > .devsite-landing-row-item {
    display: block
    }
.devsite-landing-row-item-hidden {
    visibility: hidden
    }
@media screen and (max-width: 840px) {
    .devsite-landing-row-item[description-position] {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
        }
    }
@media screen and (max-width: 600px) {
    .devsite-landing-row-item[description-position=top] {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
        }
    }
.devsite-landing-row-logos .devsite-landing-row-item-custom-image {
    aspect-ratio: unset;
    height: 96px
    }
.devsite-landing-row-logos .devsite-landing-row-item-custom-image:not([background]) {
    background: 0
    }
.devsite-landing-row-logos .devsite-landing-row-item-custom-image-icon {
    opacity: 1
    }
.devsite-landing-row-logos .devsite-landing-row-item-description {
    margin: 0;
    text-align: center
    }
@media screen and (max-width: 840px) {
    .devsite-landing-row-logos.devsite-landing-row-3-up .devsite-landing-row-group {
        grid-template-columns: repeat(3, 1fr)
        }
    .devsite-landing-row-logos.devsite-landing-row-4-up .devsite-landing-row-group {
        grid-template-columns: repeat(4, 1fr)
        }
    }
@media screen and (max-width: 600px) {
    .devsite-landing-row-logos.devsite-landing-row-2-up .devsite-landing-row-group, .devsite-landing-row-logos.devsite-landing-row-4-up .devsite-landing-row-group, .devsite-landing-row-logos.devsite-landing-row[header-position] .devsite-landing-row-group {
        grid-template-columns: repeat(2, 1fr)
        }
    }
.devsite-landing-row-1-up.devsite-landing-row-marquee, .devsite-landing-row-1-up.devsite-landing-row-marquee[background] {
    padding: 0
    }
.devsite-landing-row-1-up.devsite-landing-row-marquee .devsite-landing-row-header {
    margin: 0;
    padding: 40px 0 0
    }
.devsite-landing-row-1-up.devsite-landing-row-marquee .devsite-landing-row-item-description, .devsite-landing-row-1-up.devsite-landing-row-marquee .devsite-landing-row-item-media {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center
    }
.devsite-landing-row-1-up.devsite-landing-row-marquee .devsite-landing-row-item-media {
    margin: 0
    }
.devsite-landing-row-1-up.devsite-landing-row-marquee .devsite-landing-row-item-image {
    background: 0
    }
.devsite-landing-row-1-up.devsite-landing-row-marquee .devsite-landing-row-item-description {
    padding: 40px 0
    }
@media screen and (max-width: 840px) {
    .devsite-landing-row-1-up.devsite-landing-row-marquee .devsite-landing-row-item {
        display: block
        }
    .devsite-landing-row-1-up.devsite-landing-row-marquee .devsite-landing-row-item-description, .devsite-landing-row-1-up.devsite-landing-row-marquee .devsite-landing-row-item-media {
        width: 100%
        }
    .devsite-landing-row-1-up.devsite-landing-row-marquee .devsite-landing-row-item-description, .devsite-landing-row-1-up.devsite-landing-row-marquee .devsite-landing-row-item-media-left + .devsite-landing-row-item-description {
        margin: 0
        }
    }
.devsite-landing-row {
    padding: var(--devsite-landing-row-padding)
    }
.devsite-landing-row:not([background]) {
    background-color: var(--devsite-background-1)
    }
.devsite-landing-row:not([background]):not(.devsite-landing-row-cta) + .devsite-landing-row:not([background]):not(.devsite-landing-row-cta):not([class^=devsite-landing-row-padding-]), .devsite-landing-row[background=grey]:not(.devsite-landing-row-cta) + [background=grey]:not(.devsite-landing-row-cta):not([class^=devsite-landing-row-padding-]), .devsite-landing-row[background=theme] + [background=theme]:not(.devsite-landing-row-cta):not([class^=devsite-landing-row-padding-]) {
    padding-top: 0
    }
.devsite-landing-row[background=blue-grey] + [background=blue-grey]:not([class^=devsite-landing-row-padding-]) {
    padding-top: 0
    }
.devsite-landing-row[background=blue-grey-dark] + [background=blue-grey-dark]:not([class^=devsite-landing-row-padding-]) {
    padding-top: 0
    }
.devsite-landing-row[background=cyan] + [background=cyan]:not([class^=devsite-landing-row-padding-]) {
    padding-top: 0
    }
.devsite-landing-row[background=deep-orange] + [background=deep-orange]:not([class^=devsite-landing-row-padding-]) {
    padding-top: 0
    }
.devsite-landing-row[background=deep-purple] + [background=deep-purple]:not([class^=devsite-landing-row-padding-]) {
    padding-top: 0
    }
.devsite-landing-row[background=google-blue] + [background=google-blue]:not([class^=devsite-landing-row-padding-]) {
    padding-top: 0
    }
.devsite-landing-row[background=google-green] + [background=google-green]:not([class^=devsite-landing-row-padding-]) {
    padding-top: 0
    }
.devsite-landing-row[background=google-red] + [background=google-red]:not([class^=devsite-landing-row-padding-]) {
    padding-top: 0
    }
.devsite-landing-row[background=google-yellow] + [background=google-yellow]:not([class^=devsite-landing-row-padding-]) {
    padding-top: 0
    }
.devsite-landing-row[background=indigo] + [background=indigo]:not([class^=devsite-landing-row-padding-]) {
    padding-top: 0
    }
.devsite-landing-row[background=orange] + [background=orange]:not([class^=devsite-landing-row-padding-]) {
    padding-top: 0
    }
.devsite-landing-row[background=pink] + [background=pink]:not([class^=devsite-landing-row-padding-]) {
    padding-top: 0
    }
.devsite-landing-row[background=purple] + [background=purple]:not([class^=devsite-landing-row-padding-]) {
    padding-top: 0
    }
.devsite-landing-row[background=teal] + [background=teal]:not([class^=devsite-landing-row-padding-]) {
    padding-top: 0
    }
.devsite-landing-row[background=blue] + [background=blue]:not([class^=devsite-landing-row-padding-]) {
    padding-top: 0
    }
.devsite-landing-row[background=green] + [background=green]:not([class^=devsite-landing-row-padding-]) {
    padding-top: 0
    }
.devsite-landing-row[background=light-blue] + [background=light-blue]:not([class^=devsite-landing-row-padding-]) {
    padding-top: 0
    }
.devsite-landing-row[background=light-green] + [background=light-green]:not([class^=devsite-landing-row-padding-]) {
    padding-top: 0
    }
.devsite-landing-row[background=navy] + [background=navy]:not([class^=devsite-landing-row-padding-]) {
    padding-top: 0
    }
.devsite-landing-row[background=pale-blue] + [background=pale-blue]:not([class^=devsite-landing-row-padding-]) {
    padding-top: 0
    }
.devsite-landing-row:not([background]) + .devsite-landing-row-cta:not([class^=devsite-landing-row-padding-]) {
    padding-top: 40px
    }
.devsite-landing-row:not([background]) + .devsite-landing-row-cta.devsite-landing-row-padding-small {
    padding-top: 32px
    }
.devsite-landing-row:not([background]) + .devsite-landing-row-cta.devsite-landing-row-padding-medium {
    padding-top: 64px
    }
.devsite-landing-row:not([background]) + .devsite-landing-row-cta.devsite-landing-row-padding-large {
    padding-top: 96px
    }
.devsite-landing-row:not([background]) + .devsite-landing-row-cta.devsite-landing-row-padding-xlarge {
    padding-top: 128px
    }
.devsite-landing-row-inner {
    margin: 0 auto;
    max-width: var(--devsite-landing-row-max-width, 1488px);
    padding: var(--devsite-landing-group-padding)
    }
.devsite-landing-row-group, .devsite-landing-row-html {
    margin: 0 auto
    }
.devsite-landing-row-group {
    background: var(--devsite-landing-row-group-background);
    border: var(--devsite-landing-row-group-border);
    border-radius: var(--devsite-landing-row-group-border-radius);
    display: grid;
    grid: var(--devsite-landing-row-group-grid);
    grid-auto-rows: var(--devsite-grid-auto-rows);
    grid-gap: var(--devsite-item-gap);
    max-width: var(--devsite-landing-row-group-max-width);
    padding: var(--devsite-landing-row-group-padding)
    }
.devsite-landing-row-1-up .devsite-landing-row-group {
    display: block
    }
.devsite-landing-row[header-position=left] .devsite-landing-row-inner, .devsite-landing-row[header-position=right] .devsite-landing-row-inner {
    display: grid;
    grid-gap: var(--devsite-item-gap)
    }
.devsite-landing-row[header-position=right] .devsite-landing-row-group {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1
    }
@media screen and (max-width: 840px) {
    .devsite-landing-row[header-position] .devsite-landing-row-inner {
        display: block
        }
    .devsite-landing-row:not([background]) + .devsite-landing-row-cta.devsite-landing-row-padding-large, .devsite-landing-row:not([background]) + .devsite-landing-row-cta.devsite-landing-row-padding-medium, .devsite-landing-row:not([background]) + .devsite-landing-row-cta.devsite-landing-row-padding-small, .devsite-landing-row:not([background]) + .devsite-landing-row-cta.devsite-landing-row-padding-xlarge, .devsite-landing-row:not([background]) + .devsite-landing-row-cta:not([class^=devsite-landing-row-padding-]) {
        padding-top: 24px
        }
    }
@media screen and (max-width: 600px) {
    .devsite-landing-row:not([background]) + .devsite-landing-row-cta.devsite-landing-row-padding-large, .devsite-landing-row:not([background]) + .devsite-landing-row-cta.devsite-landing-row-padding-medium, .devsite-landing-row:not([background]) + .devsite-landing-row-cta.devsite-landing-row-padding-small, .devsite-landing-row:not([background]) + .devsite-landing-row-cta.devsite-landing-row-padding-xlarge, .devsite-landing-row:not([background]) + .devsite-landing-row-cta:not([class^=devsite-landing-row-padding-]) {
        padding-top: 16px
        }
    }
devsite-a11y-announce {
    background: transparent;
    color: transparent;
    display: block;
    left: -500vw;
    position: absolute;
    top: -500vh;
    z-index: -1
    }
devsite-analytics > iframe {
    display: none
    }
devsite-anselm {
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
    }
devsite-anselm .anselm-loading {
    display: none
    }
devsite-anselm .anselm-loading devsite-spinner {
    margin: 0 auto
    }
devsite-anselm[loading] .anselm-loading {
    display: block
    }
devsite-anselm[type=playlist] .anselm-results {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin: 0 -12px
    }
devsite-anselm h3:first-child {
    margin-bottom: 4px
    }
devsite-anselm[active] .anselm-suggest-container input {
    box-shadow: 0 1px 3px 0 var(--devsite-elevation-key-shadow-color), 0 4px 8px 3px var(--devsite-elevation-ambient-shadow-color)
    }
devsite-anselm[pending-suggestions] .anselm-suggest-container .anselm-suggest-search-icon {
    opacity: 0
    }
devsite-anselm[pending-suggestions] .anselm-suggest-container .anselm-suggest-spinner {
    opacity: 1
    }
devsite-anselm[has-query] .anselm-suggest-container .anselm-suggest-close-icon {
    opacity: 1;
    pointer-events: all
    }
devsite-anselm[has-suggestions][active] .anselm-suggest-container input {
    border-radius: 2px 2px 0
    }
devsite-anselm .anselm-suggest-container {
    max-width: 492px;
    margin-bottom: 36px
    }
devsite-anselm .anselm-suggest-container form {
    position: relative
    }
devsite-anselm .anselm-suggest-container input {
    border: 0 !important;
    border-radius: 4px;
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 1px 3px 1px var(--devsite-elevation-ambient-shadow-color);
    color: #3c4043;
    line-height: 26px;
    padding: 8px 46px;
    width: 100%
    }
devsite-anselm .anselm-suggest-container input:hover {
    box-shadow: 0 1px 3px 0 var(--devsite-elevation-key-shadow-color), 0 4px 8px 3px var(--devsite-elevation-ambient-shadow-color)
    }
devsite-anselm .anselm-suggest-container input:focus {
    border: 0 !important;
    padding-bottom: 8px
    }
devsite-anselm .anselm-suggest-container .anselm-suggestions {
    background: var(--devsite-background-1);
    border-top: 1px solid #ccc;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 3px 0 var(--devsite-elevation-key-shadow-color), 0 6px 10px 4px var(--devsite-elevation-ambient-shadow-color);
    position: absolute;
    width: 100%;
    z-index: 100
    }
devsite-anselm .anselm-suggest-container .anselm-suggestions:empty {
    box-shadow: none
    }
devsite-anselm .anselm-suggest-container .anselm-suggest-result {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 56px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
    }
devsite-anselm .anselm-suggest-container .anselm-suggest-result a {
    color: #3c4043;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 0 16px
    }
devsite-anselm .anselm-suggest-container .anselm-suggest-result a:focus, devsite-anselm .anselm-suggest-container .anselm-suggest-result a:hover, devsite-anselm .anselm-suggest-container .anselm-suggest-result.highlight a {
    text-decoration: none;
    background: #f1f3f4
    }
devsite-anselm .anselm-suggest-input-container {
    position: relative
    }
devsite-anselm .anselm-suggest-input-container .anselm-suggest-close-icon, devsite-anselm .anselm-suggest-input-container .anselm-suggest-search-icon, devsite-anselm .anselm-suggest-input-container .anselm-suggest-spinner {
    color: #5f6368;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    -webkit-transition: opacity 0.3s cubic-bezier(0, 0.795, 0, 1);
    transition: opacity 0.3s cubic-bezier(0, 0.795, 0, 1)
    }
devsite-anselm .anselm-suggest-input-container .anselm-suggest-close-icon, devsite-anselm .anselm-suggest-input-container .anselm-suggest-close-icon:focus {
    text-decoration: none
    }
devsite-anselm .anselm-suggest-input-container .anselm-suggest-search-icon {
    opacity: 1
    }
devsite-anselm .anselm-suggest-input-container .anselm-suggest-search-icon, devsite-anselm .anselm-suggest-input-container .anselm-suggest-spinner {
    top: 8px;
    left: 16px
    }
devsite-anselm .anselm-suggest-input-container .anselm-suggest-close-icon {
    top: 8px;
    right: 16px
    }
devsite-anselm .anselm-more {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 20px 0 32px
    }
devsite-anselm .anselm-cell {
    opacity: 0;
    -webkit-transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1)
    }
devsite-anselm .anselm-cell[show] {
    opacity: 1
    }
devsite-anselm .anselm-cell .bull {
    padding: 0 4px
    }
devsite-anselm .anselm-cell .anselm-meta {
    font-family: var(--devsite-primary-font-family);
    font-size: 12px;
    color: #6a6e74;
    letter-spacing: 0.3px;
    text-align: left;
    line-height: 16px
    }
devsite-anselm .anselm-cell .anselm--tags span {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-family: var(--devsite-primary-font-family);
    font-size: 12px;
    color: #5f6368;
    letter-spacing: 0.3px;
    text-align: left;
    line-height: 16px;
    border: var(--devsite-primary-border);
    border-radius: 16px;
    height: 30px;
    padding: 12px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
    }
devsite-anselm .anselm-cell--list p {
    font-family: var(--devsite-primary-font-family);
    font-size: 14px;
    color: #3c4043;
    letter-spacing: 0.2px;
    line-height: 20px;
    margin: 8px 0;
    text-align: left
    }
devsite-anselm .anselm-card {
    background: var(--devsite-card-background);
    border: var(--devsite-card-border);
    border-radius: var(--devsite-card-border-radius);
    box-shadow: var(--devsite-card-box-shadow);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%
    }
devsite-anselm .anselm-card .anselm-card--top {
    height: 158px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative
    }
devsite-anselm .anselm-card .anselm-card--top .badge-icon {
    width: 110px;
    height: 110px;
    position: relative;
    z-index: 2;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0)
    }
@-webkit-keyframes bounce {
    0% {
        opacity: 0;
        -webkit-transform: scale(.2);
        transform: scale(.2)
        } 50% {
        opacity: 1;
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
        } to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
        }
    }
devsite-anselm .anselm-card .anselm-card--top .badge-icon.bounce {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-name: bounce;
    animation-name: bounce;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
    }
devsite-anselm .anselm-card devsite-progress .devsite-progress--indeterminate .devsite-progress--indeterminate-2, devsite-anselm .anselm-card devsite-progress .devsite-progress--indeterminate .devsite-progress--indeterminate-4 {
    background: #dadce0
    }
devsite-anselm .anselm-card .anselm-card--progress {
    overflow: hidden;
    height: 2px;
    background: #dadce0
    }
devsite-anselm .anselm-card .anselm-card--progress .anselm-card--progress--bar {
    background: #fbbc04;
    height: 2px;
    -webkit-transform: translatex(-101%);
    transform: translatex(-101%);
    -webkit-transition: background 0.213s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.213s cubic-bezier(0, 0, 0.2, 1);
    transition: background 0.213s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.213s cubic-bezier(0, 0, 0.2, 1);
    transition: transform 0.213s cubic-bezier(0, 0, 0.2, 1), background 0.213s cubic-bezier(0, 0, 0.2, 1);
    transition: transform 0.213s cubic-bezier(0, 0, 0.2, 1), background 0.213s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.213s cubic-bezier(0, 0, 0.2, 1)
    }
devsite-anselm .anselm-card .anselm-card--progress .anselm-card--progress--bar.completed {
    background: #34a853
    }
devsite-anselm .anselm-card .anselm-card--progress--info:empty:before {
    content: " "
    }
devsite-anselm .anselm-card .anselm-card--progress--info {
    font-size: 12px;
    font-weight: 700;
    color: #45494c;
    padding: 0 16px;
    opacity: 0;
    -webkit-transform: translatey(12px);
    transform: translatey(12px);
    -webkit-transition: opacity 0.213s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.213s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.213s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.213s cubic-bezier(0.4, 0, 1, 1);
    transition: transform 0.213s cubic-bezier(0.4, 0, 1, 1), opacity 0.213s cubic-bezier(0.4, 0, 1, 1);
    transition: transform 0.213s cubic-bezier(0.4, 0, 1, 1), opacity 0.213s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.213s cubic-bezier(0.4, 0, 1, 1)
    }
devsite-anselm .anselm-card .anselm-card--progress--info.show {
    opacity: 1;
    -webkit-transform: translatey(0);
    transform: translatey(0);
    -webkit-transition: opacity 0.213s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.213s cubic-bezier(0, 0, 0.2, 1);
    transition: opacity 0.213s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.213s cubic-bezier(0, 0, 0.2, 1);
    transition: transform 0.213s cubic-bezier(0, 0, 0.2, 1), opacity 0.213s cubic-bezier(0, 0, 0.2, 1);
    transition: transform 0.213s cubic-bezier(0, 0, 0.2, 1), opacity 0.213s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.213s cubic-bezier(0, 0, 0.2, 1)
    }
devsite-anselm .anselm-card .anselm-card--body {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0 16px
    }
devsite-anselm .anselm-card .anselm--tags:not(:empty) {
    border-bottom: var(--devsite-primary-border);
    margin: 0 16px;
    padding: 0 0 16px
    }
devsite-anselm .anselm-card .anselm-card--bottom {
    margin: 16px
    }
devsite-anselm .anselm-card .anselm-card--summary {
    font-family: var(--devsite-primary-font-family);
    font-size: 12px;
    color: #6a6e74;
    letter-spacing: 0.3px;
    text-align: left;
    line-height: 16px
    }
devsite-anselm .anselm-card .anselm-card--actions {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
    }
devsite-anselm .anselm-cell--card {
    -webkit-flex-basis: calc(33.33% - 24px);
    -ms-flex-preferred-size: calc(33.33% - 24px);
    flex-basis: calc(33.33% - 24px);
    margin: 12px
    }
devsite-anselm .anselm-cell--list {
    margin-bottom: 32px
    }
devsite-anselm .anselm-cell--list a {
    color: #346cf2
    }
devsite-anselm .anselm-no-results-found {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin-top: 36px
    }
devsite-anselm .anselm-no-results-found .no-results-text {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    padding: 0 12px
    }
devsite-anselm .anselm-no-results-found .no-results-text h3 {
    font-size: 28px;
    color: #3c4043;
    line-height: 36px;
    margin: 0
    }
devsite-anselm .anselm-no-results-found .no-results-text p {
    margin: 0;
    padding: 8px 0 0;
    font-size: 14px;
    color: #5f6368;
    line-height: 20px
    }
devsite-anselm .anselm-no-results-found .no-results-img {
    margin: 0 12px;
    padding: 0 12px;
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    background-image: url(../../images/not-found.svg);
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    height: 206px
    }
devsite-anselm .anselm-results-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
    }
devsite-anselm .anselm-results-container .anselm-results-cell {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
    }
devsite-anselm .anselm-results-container .anselm-featured-cell {
    display: none;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 292px;
    padding-left: 18px
    }
devsite-anselm .anselm-results-container .anselm-featured-cell h4 {
    font-size: 10px;
    font-weight: 500;
    color: #666;
    line-height: 16px;
    text-transform: uppercase
    }
devsite-anselm.has-featured .anselm-no-results-found {
    display: block
    }
devsite-anselm.has-featured .anselm-no-results-found .no-results-img {
    margin: 48px 12px;
    height: 295px
    }
devsite-anselm.has-featured .anselm-no-results-found .no-results-text {
    text-align: center
    }
devsite-anselm.has-featured .anselm-results-container .anselm-results-cell {
    max-width: 491px
    }
devsite-anselm.has-featured .anselm-results-container .anselm-featured-cell {
    display: block
    }
devsite-anselm .anselm--featured {
    border: var(--devsite-card-border);
    border-radius: var(--devsite-card-border-radius);
    box-shadow: var(--devsite-card-box-shadow);
    margin-bottom: 12px;
    padding: 16px
    }
devsite-anselm .anselm--featured .topic__meta {
    border-top: 1px solid #d8d8d8;
    color: #3c4043;
    font-size: 12px;
    line-height: 16px;
    margin: 16px 0 8px;
    padding: 16px 0 0
    }
devsite-anselm .anselm--featured .topic__updated {
    padding-top: 4px
    }
@media screen and (max-width: 840px) {
    devsite-anselm .anselm-cell--card {
        -webkit-flex-basis: calc(50% - 24px);
        -ms-flex-preferred-size: calc(50% - 24px);
        flex-basis: calc(50% - 24px)
        }
    devsite-anselm.has-featured .anselm-results-container .anselm-featured-cell {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex
        }
    devsite-anselm .anselm-results-container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: column-reverse;
        -moz-box-orient: vertical;
        -moz-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
        }
    devsite-anselm .anselm-results-container .anselm-featured-cell {
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        overflow-x: auto;
        min-width: 100%;
        margin: 0 0 24px;
        padding: 24px 0 0;
        position: relative
        }
    devsite-anselm .anselm-results-container .anselm-featured-cell h4 {
        position: absolute;
        top: 0;
        left: 0
        }
    devsite-anselm .anselm-results-container .anselm--featured {
        min-width: 200px;
        margin-right: 8px;
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        max-width: 300px
        }
    devsite-anselm .anselm-results-container .anselm--featured .devsite-landing-row-item-description {
        position: relative
        }
    devsite-anselm .anselm-results-container .anselm--featured a {
        position: absolute;
        right: 8px;
        top: 8px;
        padding: 0;
        height: 30px;
        width: 30px
        }
    devsite-anselm .anselm-results-container .anselm--featured a .devsite-landing-row-item-icon-container {
        width: 30px;
        height: 30px
        }
    devsite-anselm .anselm-results-container .anselm--featured a .devsite-landing-row-item-icon-container img {
        width: 30px;
        height: 30px;
        margin: 0
        }
    devsite-anselm .anselm-results-container .anselm--featured h3 {
        margin: 0
        }
    devsite-anselm .anselm-results-container .anselm--featured .devsite-landing-row-item-body a {
        position: static;
        margin: 12px;
        text-overflow: ellipsis;
        margin-right: 54px;
        width: auto;
        height: auto
        }
    devsite-anselm .anselm-results-container .anselm--featured .devsite-landing-row-item-body .topic__meta {
        margin-top: 0
        }
    devsite-anselm .anselm-results-container .anselm--featured .devsite-landing-row-item-body .devsite-landing-row-item-buttons, devsite-anselm .anselm-results-container .anselm--featured .devsite-landing-row-item-body p {
        display: none
        }
    }
@media screen and (max-width: 600px) {
    devsite-anselm .anselm-cell--card {
        -webkit-flex-basis: calc(100% - 24px);
        -ms-flex-preferred-size: calc(100% - 24px);
        flex-basis: calc(100% - 24px)
        }
    devsite-anselm .anselm-no-results-found {
        margin-top: 12px;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
        }
    devsite-anselm .anselm-no-results-found .no-results-img, devsite-anselm .anselm-no-results-found .no-results-text {
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%
        }
    devsite-anselm .anselm-no-results-found .no-results-img {
        margin-top: 32px;
        height: 163px
        }
    }
devsite-dialog[open].devsite-henhouse-dialog {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0
    }
.devsite-henhouse-inner {
    background: var(--devsite-background-1);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 2px;
    overflow: hidden
    }
.devsite-henhouse-spinner-container {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 240px
    }
.devsite-credentials-spinner-region {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
.devsite-henhouse-cross-container {
    height: 160px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
    }
.devsite-henhouse-cross {
    margin: 16px;
    float: right;
    cursor: pointer
    }
.devsite-apix-error {
    padding: 32px
    }
.devsite-apix-controls {
    position: absolute;
    right: 8px;
    z-index: 1001
    }
.devsite-apix-controls .button-flat {
    cursor: pointer !important
    }
.devsite-apix-controls .devsite-dock-apix:before, .devsite-apix-controls .devsite-fullscreen-apix:before, .devsite-apix-controls .devsite-hide-apix:before {
    color: var(--devsite-primary-text-color)
    }
.devsite-apix-controls .devsite-hide-apix:before {
    content: "close"
    }
.devsite-apix-controls .devsite-fullscreen-apix:before {
    content: "fullscreen"
    }
.devsite-apix-controls .devsite-dock-apix:before {
    content: "fullscreen_exit"
    }
.apis-explorer {
    background: var(--devsite-background-3)
    }
.devsite-apix {
    background: var(--devsite-background-3);
    -webkit-transform: translatez(0);
    transform: translatez(0);
    will-change: height, transform
    }
.devsite-apix:not(.dialog) .devsite-apix-controls {
    top: 24px
    }
.devsite-apix:not(.dialog) .devsite-apix-controls .devsite-dock-apix {
    display: none
    }
.devsite-apix.dialog {
    border-radius: 2px;
    box-shadow: 0 17px 17px rgba(0, 0, 0, 0.15), 0 27px 55px rgba(0, 0, 0, 0.3);
    font: 14px/20px var(--devsite-primary-font-family);
    max-width: calc(100% - 48px);
    overflow: auto;
    padding: 8px;
    position: fixed;
    z-index: 10012;
    max-height: none !important
    }
.devsite-apix.dialog .apis-explorer {
    height: 100%;
    min-height: 100%
    }
.devsite-apix.dialog .devsite-fullscreen-apix, .devsite-apix.dialog .devsite-hide-apix {
    display: none
    }
.devsite-has-apix .devsite-main-content {
    z-index: auto
    }
.devsite-has-apix .devsite-main-content devsite-googler-buttons {
    z-index: 1003
    }
@media screen and (min-width: 1201px) {
    .devsite-apix:not(.dialog) {
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
        display: none;
        max-height: 100vh;
        overflow: auto;
        position: fixed;
        right: 0;
        top: 96px;
        width: 400px;
        z-index: 1001
        }
    .devsite-apix.dialog {
        bottom: 20px;
        left: calc(50% - 576px);
        margin: 0;
        top: 50px;
        width: 1152px
        }
    .devsite-has-apix .devsite-apix {
        display: block
        }
    }
@media screen and (max-width: 1200px) {
    .devsite-apix {
        display: block
        }
    .devsite-apix:not(.dialog) {
        margin-top: 32px;
        max-height: none !important;
        position: relative;
        -webkit-transform: none !important;
        transform: none !important;
        top: auto !important;
        height: auto !important
        }
    .devsite-apix.dialog {
        bottom: 20px;
        left: 24px;
        margin: 0;
        top: 50px;
        width: calc(100% - 48px)
        }
    .devsite-hide-apix {
        display: none
        }
    }
.devsite-page-insights-dialog.has-embed {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    width: 100%
    }
.devsite-page-insights-dialog .dashboard-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%
    }
.devsite-page-insights-dialog p {
    text-align: center
    }
.devsite-page-insights-dialog.has-embed aside {
    margin: auto;
    max-width: 800px;
    -webkit-margin-after: 8px;
    margin-block-end: 8px
    }
.devsite-page-insights-dialog .dashboard-embed {
    height: 100%;
    width: 100%
    }
.devsite-page-insights-dialog .dashboard-link {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    -webkit-margin-before: 16px;
    margin-block-start: 16px
    }
devsite-badger {
    display: none
    }
.static-badge-awarded-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
    }
.static-badge-awarded-container .devsite-badger-award-inner {
    padding: 10px
    }
.static-badge-awarded-container .dismiss {
    display: none
    }
.devsite-badger-award {
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    z-index: 99999
    }
.devsite-badger-award .devsite-badger-award-inner {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 670px;
    width: 670px;
    margin-bottom: 16px;
    pointer-events: all;
    position: absolute;
    -webkit-transform: translatey(150%);
    transform: translatey(150%);
    -webkit-transition: bottom 0.2s, margin-right 0.2s, -webkit-transform 0.2s cubic-bezier(0.4, 0, 1, 1);
    transition: bottom 0.2s, margin-right 0.2s, -webkit-transform 0.2s cubic-bezier(0.4, 0, 1, 1);
    transition: bottom 0.2s, margin-right 0.2s, transform 0.2s cubic-bezier(0.4, 0, 1, 1);
    transition: bottom 0.2s, margin-right 0.2s, transform 0.2s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 1, 1)
    }
@media screen and (max-width: 600px) {
    .devsite-badger-award .devsite-badger-award-inner {
        width: calc(100% - 20px);
        margin-bottom: 10px
        }
    }
.devsite-badger-award .devsite-badger-award-inner[show] {
    -webkit-transform: translatey(0);
    transform: translatey(0);
    -webkit-transition: bottom 0.2s, margin-right 0.2s, -webkit-transform 0.2s cubic-bezier(0, 0, 0.2, 1);
    transition: bottom 0.2s, margin-right 0.2s, -webkit-transform 0.2s cubic-bezier(0, 0, 0.2, 1);
    transition: bottom 0.2s, margin-right 0.2s, transform 0.2s cubic-bezier(0, 0, 0.2, 1);
    transition: bottom 0.2s, margin-right 0.2s, transform 0.2s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0, 0, 0.2, 1)
    }
.devsite-badger-award .devsite-badger-award-inner[show] .devsite-badger-award-actions, .devsite-badger-award .devsite-badger-award-inner[show] .devsite-badger-award-details {
    opacity: 1
    }
.devsite-badger-award .devsite-badger-award-inner:first-child {
    bottom: 10px;
    z-index: 15
    }
.devsite-badger-award .devsite-badger-award-inner:nth-child(2) {
    bottom: 5px;
    margin-right: -10px;
    z-index: 14;
    -webkit-filter: grayscale(100%) brightness(110%);
    filter: grayscale(100%) brightness(110%)
    }
.devsite-badger-award .devsite-badger-award-inner:nth-child(3) {
    bottom: 0;
    margin-right: -20px;
    z-index: 13;
    -webkit-filter: grayscale(100%) brightness(110%);
    filter: grayscale(100%) brightness(110%)
    }
.devsite-badger-award .devsite-badger-award-inner:nth-child(4) {
    bottom: -5px;
    margin-right: -30px;
    z-index: 12;
    -webkit-filter: grayscale(100%) brightness(110%);
    filter: grayscale(100%) brightness(110%)
    }
.devsite-badger-award .devsite-badger-award-inner:nth-child(n+5) {
    bottom: -5px;
    margin-right: -30px;
    display: none
    }
@media screen and (max-width: 600px) {
    .devsite-badger-award .devsite-badger-award-inner:first-child {
        bottom: 0;
        z-index: 15
        }
    .devsite-badger-award .devsite-badger-award-inner:nth-child(2) {
        bottom: 0;
        margin-right: 0
        }
    .devsite-badger-award .devsite-badger-award-inner:nth-child(n+3) {
        display: none
        }
    }
.devsite-badger-award .devsite-badger-award-actions {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -moz-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    opacity: 0;
    -webkit-transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 1px solid #d8d8d8;
    padding: 8px
    }
@-webkit-keyframes badgeGrowIn {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
        } to {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
        }
    }
@-webkit-keyframes badgeGrowOut {
    0% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
        } to {
        -webkit-transform: scale(1);
        transform: scale(1)
        }
    }
@-webkit-keyframes badgeFadeIn {
    0% {
        opacity: 0
        } 12% {
        opacity: 0
        } 87% {
        opacity: 100%
        }
    }
@-webkit-keyframes counterHide {
    0% {
        opacity: 0
        } to {
        opacity: 0
        }
    }
.devsite-claim-badge-dialog.devsite-claim-badge-dialog, devsite-badge-awarded.devsite-claim-badge-dialog {
    padding: 0
    }
.devsite-claim-badge-dialog .card, devsite-badge-awarded .card {
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
    border-radius: 5px;
    background: var(--devsite-background-1);
    display: block;
    max-width: 856px;
    border-top: 5px solid #1a73e8;
    position: relative;
    overflow: hidden;
    margin: 0 auto
    }
.devsite-claim-badge-dialog .card .card-content, devsite-badge-awarded .card .card-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-height: calc(100vh - 32px);
    overflow: visible
    }
.devsite-claim-badge-dialog .card .illustration-container, .devsite-claim-badge-dialog .card .text-container, devsite-badge-awarded .card .illustration-container, devsite-badge-awarded .card .text-container {
    width: 50%
    }
@media screen and (max-width: 600px) {
    .devsite-claim-badge-dialog .card .illustration-container, .devsite-claim-badge-dialog .card .text-container, devsite-badge-awarded .card .illustration-container, devsite-badge-awarded .card .text-container {
        width: 100%
        }
    }
.devsite-claim-badge-dialog .card .profile-creation-container, devsite-badge-awarded .card .profile-creation-container {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: auto;
    max-height: 50vh;
    border-top: 1px solid #e8eaed;
    padding: 16px 24px
    }
.devsite-claim-badge-dialog .card .profile-creation-container p, devsite-badge-awarded .card .profile-creation-container p {
    margin: 8px 0;
    color: #3c4043;
    font-size: 14px;
    line-height: 22px
    }
.devsite-claim-badge-dialog .card .profile-creation-container-email-options, devsite-badge-awarded .card .profile-creation-container-email-options {
    margin-top: 8px
    }
.devsite-claim-badge-dialog .card .profile-creation-container-email-options .profile-creation-container-email-option, devsite-badge-awarded .card .profile-creation-container-email-options .profile-creation-container-email-option {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
    }
.devsite-claim-badge-dialog .card .profile-creation-container-email-options .profile-creation-container-email-option input, devsite-badge-awarded .card .profile-creation-container-email-options .profile-creation-container-email-option input {
    margin-top: 0
    }
.devsite-claim-badge-dialog .card .profile-creation-container-email-options .profile-creation-container-email-option label, devsite-badge-awarded .card .profile-creation-container-email-options .profile-creation-container-email-option label {
    font-size: 14px
    }
.devsite-claim-badge-dialog .card .spinner-container, devsite-badge-awarded .card .spinner-container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: hsla(0, 0%, 100%, 0.8);
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)
    }
.devsite-claim-badge-dialog .card .content-container, devsite-badge-awarded .card .content-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
@media screen and (max-width: 600px) {
    .devsite-claim-badge-dialog .card .content-container, devsite-badge-awarded .card .content-container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
        }
    }
.devsite-claim-badge-dialog .card .text-container, devsite-badge-awarded .card .text-container {
    padding: 36px 24px;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
    }
@media screen and (max-width: 600px) {
    .devsite-claim-badge-dialog .card .text-container, devsite-badge-awarded .card .text-container {
        padding: 24px
        }
    }
.devsite-claim-badge-dialog .illustration-container, devsite-badge-awarded .illustration-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 164px;
    min-width: 303px;
    height: 164px;
    width: 303px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    background-image: url(../images/badge-award-background.svg);
    background-size: 100% calc(100% + 2px);
    background-position: 1px -1px;
    background-repeat: no-repeat
    }
.devsite-claim-badge-dialog .illustration-container.show .badge-icon, devsite-badge-awarded .illustration-container.show .badge-icon {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
    }
.devsite-claim-badge-dialog .illustration-container.animate .badge-icon, devsite-badge-awarded .illustration-container.animate .badge-icon {
    -webkit-animation: badgeGrowIn 0.33s cubic-bezier(0.75, 0, 0.71, 0.97), badgeGrowOut 0.17s cubic-bezier(0.85, -0.14, 0.83, 0.83) 0.33s, badgeFadeIn 0.5s linear;
    animation: badgeGrowIn 0.33s cubic-bezier(0.75, 0, 0.71, 0.97), badgeGrowOut 0.17s cubic-bezier(0.85, -0.14, 0.83, 0.83) 0.33s, badgeFadeIn 0.5s linear
    }
.devsite-claim-badge-dialog .illustration-container .badge-icon, devsite-badge-awarded .illustration-container .badge-icon {
    width: 124px;
    height: 124px;
    z-index: 1000;
    opacity: 0;
    -webkit-transform: scale(0, 0, 0);
    transform: scale(0, 0, 0);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
    }
.devsite-claim-badge-dialog .illustration-container .badge-icon.incomplete, devsite-badge-awarded .illustration-container .badge-icon.incomplete {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
    }
.devsite-claim-badge-dialog .illustration-container .badge-animation, devsite-badge-awarded .illustration-container .badge-animation {
    position: absolute;
    width: 195px;
    height: 170px;
    background-image: url(../images/badge-award-animation.gif);
    background-size: 100% 100%
    }
.devsite-claim-badge-dialog .completed-title, devsite-badge-awarded .completed-title {
    font-size: 20px;
    margin-bottom: 8px;
    line-height: 28px;
    color: #000;
    font-family: var(--devsite-headline-font-family)
    }
.devsite-claim-badge-dialog .claim-badge-text, .devsite-claim-badge-dialog .completed-text, .devsite-claim-badge-dialog .create-profile-text, .devsite-claim-badge-dialog .error-text, .devsite-claim-badge-dialog .not-eligible-text, .devsite-claim-badge-dialog .sign-in-text, devsite-badge-awarded .claim-badge-text, devsite-badge-awarded .completed-text, devsite-badge-awarded .create-profile-text, devsite-badge-awarded .error-text, devsite-badge-awarded .not-eligible-text, devsite-badge-awarded .sign-in-text {
    font-size: 14px
    }
.devsite-claim-badge-dialog .buttons-container, devsite-badge-awarded .buttons-container {
    border-top: 1px solid #e8eaed;
    padding: 0 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
    }
.devsite-claim-badge-dialog .buttons-container .buttons, devsite-badge-awarded .buttons-container .buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
    }
.devsite-claim-badge-dialog .buttons-container .dismiss, devsite-badge-awarded .buttons-container .dismiss {
    position: relative;
    overflow: visible
    }
@media screen and (max-width: 600px) {
    .devsite-claim-badge-dialog .buttons-container, devsite-badge-awarded .buttons-container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: column-reverse;
        -moz-box-orient: vertical;
        -moz-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        padding-top: 0;
        text-align: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center
        }
    .devsite-claim-badge-dialog .buttons-container .button, devsite-badge-awarded .buttons-container .button {
        margin: 10px auto 0
        }
    .devsite-claim-badge-dialog .buttons-container .buttons, devsite-badge-awarded .buttons-container .buttons {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -moz-box-orient: horizontal;
        -moz-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        margin-top: 5px
        }
    }
.devsite-claim-badge-dialog[loading] .card .spinner-container, devsite-badge-awarded[loading] .card .spinner-container {
    opacity: 1;
    pointer-events: all
    }
.devsite-claim-badge-dialog .qr-code-container, devsite-badge-awarded .qr-code-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 225px;
    background-image: url(../images/claim-badge-dialog-background.png);
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-position: 50%;
    background-size: 700px
    }
.devsite-claim-badge-dialog .qr-code-container canvas, devsite-badge-awarded .qr-code-container canvas {
    display: none
    }
.devsite-claim-badge-dialog .qr-code-container img, devsite-badge-awarded .qr-code-container img {
    height: 150px;
    width: 150px;
    padding: 10px;
    background: var(--devsite-background-1)
    }
.devsite-claim-badge-dialog .redeem-code-section, devsite-badge-awarded .redeem-code-section {
    padding: 18px 24px 0;
    margin-bottom: -15px
    }
.devsite-claim-badge-dialog .redeem-code-title, devsite-badge-awarded .redeem-code-title {
    text-transform: uppercase;
    font-size: 10.5px;
    font-weight: 600;
    color: #80868b;
    margin-bottom: 3px
    }
.devsite-claim-badge-dialog .redeem-code, devsite-badge-awarded .redeem-code {
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 12px;
    color: #000;
    padding: 8px 2px 8px 12px;
    border: 2px solid #1a73e8;
    border-radius: 4px;
    background-color: rgba(227, 242, 253, 0.6)
    }
.devsite-claim-badge-dialog .illustration-container.animate .badge-icon-counter, devsite-badge-awarded .illustration-container.animate .badge-icon-counter {
    -webkit-animation: counterHide 1s, badgeGrowIn 0.33s cubic-bezier(0.75, 0, 0.71, 0.97) 1s, badgeGrowOut 0.17s cubic-bezier(0.85, -0.14, 0.83, 0.83) 1.33s, badgeFadeIn 0.5s linear 1s;
    animation: counterHide 1s, badgeGrowIn 0.33s cubic-bezier(0.75, 0, 0.71, 0.97) 1s, badgeGrowOut 0.17s cubic-bezier(0.85, -0.14, 0.83, 0.83) 1.33s, badgeFadeIn 0.5s linear 1s;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
    }
.devsite-claim-badge-dialog .illustration-container .badge-icon-counter, devsite-badge-awarded .illustration-container .badge-icon-counter {
    padding: 3px 10px;
    font-size: 14px;
    border-radius: 19px;
    color: #fff;
    font-weight: 500;
    background-color: #1976d2;
    position: absolute;
    bottom: 17px;
    z-index: 10001;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    box-shadow: 0 4px 8px 3px rgba(60, 64, 67, 0.149), 0 1px 3px 0 rgba(60, 64, 67, 0.302)
    }
.devsite-claim-badge-dialog .badge-name, devsite-badge-awarded .badge-name {
    font-weight: 500
    }
.devsite-claim-badge-dialog .buttons-container .more-badges-marker, devsite-badge-awarded .buttons-container .more-badges-marker {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: -12px;
    right: -12px;
    background: #e53935;
    min-width: 24px;
    min-height: 24px;
    border-radius: 50px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-weight: 700;
    max-height: 24px;
    max-width: 24px;
    line-height: 24px;
    font-size: 12px
    }
@media screen and (max-width: 600px) {
    .devsite-claim-badge-dialog .buttons-container .sharing, devsite-badge-awarded .buttons-container .sharing {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -moz-box-orient: horizontal;
        -moz-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        padding: 2px 0 20px
        }
    }
.devsite-claim-badge-dialog .buttons-container .actions .button, .devsite-claim-badge-dialog .buttons-container .actions button, devsite-badge-awarded .buttons-container .actions .button, devsite-badge-awarded .buttons-container .actions button {
    margin: 8px
    }
.devsite-claim-badge-dialog .buttons-container .sharing, devsite-badge-awarded .buttons-container .sharing {
    font-size: 14px;
    color: #3c4043;
    padding-left: 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
    }
.devsite-claim-badge-dialog .buttons-container .sharing .share-buttons-container, devsite-badge-awarded .buttons-container .sharing .share-buttons-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
    }
.devsite-claim-badge-dialog .buttons-container .sharing span, devsite-badge-awarded .buttons-container .sharing span {
    margin: 0 8px
    }
.devsite-claim-badge-dialog .buttons-container .sharing .button, .devsite-claim-badge-dialog .buttons-container .sharing button, devsite-badge-awarded .buttons-container .sharing .button, devsite-badge-awarded .buttons-container .sharing button {
    box-shadow: none;
    margin: 0 8px;
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: 0;
    height: auto;
    min-width: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0
    }
.devsite-claim-badge-dialog .buttons-container .sharing .button:focus, .devsite-claim-badge-dialog .buttons-container .sharing .button:hover, .devsite-claim-badge-dialog .buttons-container .sharing button:focus, .devsite-claim-badge-dialog .buttons-container .sharing button:hover, devsite-badge-awarded .buttons-container .sharing .button:focus, devsite-badge-awarded .buttons-container .sharing .button:hover, devsite-badge-awarded .buttons-container .sharing button:focus, devsite-badge-awarded .buttons-container .sharing button:hover {
    background: none
    }
.devsite-claim-badge-dialog .buttons-container .sharing .button:active, .devsite-claim-badge-dialog .buttons-container .sharing button:active, devsite-badge-awarded .buttons-container .sharing .button:active, devsite-badge-awarded .buttons-container .sharing button:active {
    box-shadow: none
    }
.devsite-claim-badge-dialog .buttons-container .sharing a:active, .devsite-claim-badge-dialog .buttons-container .sharing a:focus, .devsite-claim-badge-dialog .buttons-container .sharing a:hover, devsite-badge-awarded .buttons-container .sharing a:active, devsite-badge-awarded .buttons-container .sharing a:focus, devsite-badge-awarded .buttons-container .sharing a:hover {
    text-decoration: none
    }
.devsite-claim-badge-dialog .buttons-container .sharing .material-icons, devsite-badge-awarded .buttons-container .sharing .material-icons {
    color: #5f6368;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 8px
    }
devsite-badge-redeemer {
    display: block;
    opacity: 1;
    -webkit-transition: opacity 0.7s ease-in;
    transition: opacity 0.7s ease-in
    }
devsite-badge-redeemer .redeem-code-page-subtitle {
    margin-bottom: 50px;
    margin-top: -28px;
    font-size: 18px;
    color: #202124;
    font-family: var(--devsite-headline-font-family)
    }
devsite-badge-redeemer devsite-badge-awarded {
    display: block
    }
devsite-badge-redeemer.redeem-success {
    opacity: 0
    }
devsite-badge-redeemer .waiting-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
    }
devsite-badge-redeemer .waiting-container devsite-spinner {
    margin-top: 15px;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center
    }
devsite-badge-redeemer .change-account-button, devsite-badge-redeemer .create-profile-button, devsite-badge-redeemer .sign-in-button {
    margin-top: 10px
    }
devsite-badge-redeemer .enter-button {
    margin-top: 15px
    }
devsite-badge-redeemer .redeem-code-title {
    text-transform: uppercase;
    font-size: 10.5px;
    font-weight: 600;
    color: #80868b;
    letter-spacing: 1px
    }
devsite-badge-redeemer .redeem-code-error-icon, devsite-badge-redeemer .redeem-code-error-message, devsite-badge-redeemer .redeem-code-success-icon {
    display: none
    }
devsite-badge-redeemer.redeem-success .redeem-code-input {
    border-color: #1e8e3e !important;
    color: default !important
    }
devsite-badge-redeemer.redeem-success .redeem-code-success-icon {
    display: inline;
    font-size: 25px;
    color: #1e8e3e;
    margin-left: 10px;
    line-height: 44px
    }
devsite-badge-redeemer.redeem-error .redeem-code-input {
    border-color: #d93025
    }
devsite-badge-redeemer.redeem-error .redeem-code-error-message {
    display: block;
    font-size: 12px;
    color: #80868b;
    font-style: italic;
    font-weight: 600
    }
devsite-badge-redeemer.redeem-error .redeem-code-error-icon {
    display: inline;
    font-size: 25px;
    color: #d93025;
    margin-left: 10px;
    line-height: 44px
    }
devsite-badge-redeemer .redeem-code-spinner {
    display: inline-block;
    margin-left: 10px;
    top: 6px
    }
devsite-badge-redeemer .redeem-code-input {
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 12px;
    color: #000;
    padding: 8px 2px 8px 12px;
    border: 2px solid #1a73e8;
    border-radius: 4px;
    background-color: rgba(227, 242, 253, 0.6);
    width: 450px;
    height: 45px
    }
devsite-badge-redeemer .redeem-code-input:disabled {
    border-color: #80868b;
    color: #80868b
    }
devsite-book-nav {
    max-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    z-index: 1004
    }
.devsite-book-nav-bg, body[pending] devsite-book-nav {
    background: var(--devsite-book-nav-background)
    }
body[pending] devsite-book-nav {
    height: 100vh
    }
body[ready] devsite-book-nav[fixed] {
    box-shadow: none;
    contain: content;
    max-height: 100%;
    position: fixed;
    -webkit-transform: translatey(var(--devsite-js-book-nav-y-offset, 0));
    transform: translatey(var(--devsite-js-book-nav-y-offset, 0));
    will-change: top, max-height, transform
    }
body[ready] .devsite-book-nav-bg[fixed] {
    bottom: 0;
    display: block;
    position: fixed;
    top: 0;
    z-index: 1
    }
body[ready] .devsite-book-nav-bg[animatable], body[ready] devsite-book-nav[animatable] {
    -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
    }
.devsite-book-nav-bg:after {
    bottom: -10px;
    content: "";
    display: block;
    height: 10px;
    position: fixed;
    width: 279px
    }
[dir=ltr] .devsite-book-nav-bg:after {
    left: 0
    }
[dir=rtl] .devsite-book-nav-bg:after {
    right: 0
    }
devsite-book-nav .devsite-book-nav-filter {
    background: var(--devsite-book-nav-background);
    border-bottom: var(--devsite-primary-border);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 12px;
    padding: 24px 24px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2
    }
devsite-book-nav input[type=text] {
    background: var(--devsite-searchbox-inactive);
    border: 0;
    border-radius: 4px;
    color: var(--devsite-searchbox-placeholder, var(--devsite-secondary-text-color));
    font-size: var(--devsite-nav-font-size, 13px);
    height: var(--devsite-book-nav-input-height);
    padding-inline: var(--devsite-book-nav-input-height);
    width: 100%
    }
devsite-book-nav input[type=text]:hover {
    background: var(--devsite-searchbox-hover)
    }
devsite-book-nav input[type=text]:focus {
    background: var(--devsite-search-form-background-active);
    border: 0;
    box-shadow: var(--devsite-search-active-box-shadow, none);
    color: var(--devsite-search-form-text-active, var(--devsite-primary-text-color));
    padding: 16px var(--devsite-book-nav-input-height)
    }
devsite-book-nav .devsite-nav-list {
    padding-bottom: 56px
    }
devsite-book-nav .devsite-nav-list > .devsite-nav-item:not(.devsite-nav-accordion):not(.devsite-nav-divider):first-child {
    border-top: 0;
    margin-top: 20px;
    padding-top: 0
    }
devsite-book-nav .devsite-book-nav-filter:not(.hidden) + .devsite-book-nav .devsite-nav-list > .devsite-nav-item:not(.devsite-nav-accordion):not(.devsite-nav-divider):first-child {
    margin-top: 0
    }
devsite-book-nav .devsite-book-nav-filter:before, devsite-book-nav .filter-clear-button {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--devsite-searchbox-placeholder, var(--devsite-secondary-text-color));
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font: normal normal normal 14px/1 Material Icons;
    height: var(--devsite-book-nav-input-height);
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    top: 24px;
    width: var(--devsite-book-nav-input-height)
    }
devsite-book-nav .devsite-book-nav-filter:before {
    content: "filter_list";
    inset-inline: 24px auto
    }
devsite-book-nav .filter-clear-button {
    cursor: pointer;
    inset-inline: auto 24px;
    outline: 0
    }
devsite-book-nav .filter-clear-button:before {
    content: "close"
    }
devsite-book-nav .filter-clear-button:focus:before, devsite-book-nav .filter-clear-button:hover:before {
    background: var(--devsite-background-5);
    border-radius: 50%;
    padding: 4px
    }
devsite-book-nav .devsite-nav-text mark {
    background: #feefc3;
    border-radius: 4px
    }
[dir=ltr] devsite-book-nav li .devsite-nav-title {
    padding-left: 24px
    }
[dir=rtl] devsite-book-nav li .devsite-nav-title {
    padding-left: 8px;
    padding-right: 24px
    }
[dir=ltr] devsite-book-nav .devsite-expandable-nav li .devsite-nav-title {
    padding-left: 40px
    }
[dir=rtl] devsite-book-nav .devsite-expandable-nav li .devsite-nav-title {
    padding-right: 40px
    }
[dir=ltr] devsite-book-nav .devsite-expandable-nav li li .devsite-nav-title {
    padding-left: 56px
    }
[dir=rtl] devsite-book-nav .devsite-expandable-nav li li .devsite-nav-title {
    padding-right: 56px
    }
[dir=ltr] devsite-book-nav .devsite-expandable-nav li li li .devsite-nav-title {
    padding-left: 72px
    }
[dir=rtl] devsite-book-nav .devsite-expandable-nav li li li .devsite-nav-title {
    padding-right: 72px
    }
[dir=ltr] devsite-book-nav .devsite-expandable-nav li li li li .devsite-nav-title {
    padding-left: 88px
    }
[dir=rtl] devsite-book-nav .devsite-expandable-nav li li li li .devsite-nav-title {
    padding-right: 88px
    }
[dir=ltr] devsite-book-nav .devsite-expandable-nav li li li li li .devsite-nav-title {
    padding-left: 104px
    }
[dir=rtl] devsite-book-nav .devsite-expandable-nav li li li li li .devsite-nav-title {
    padding-right: 104px
    }
[dir=ltr] devsite-book-nav .devsite-expandable-nav li li li li li li .devsite-nav-title {
    padding-left: 120px
    }
[dir=rtl] devsite-book-nav .devsite-expandable-nav li li li li li li .devsite-nav-title {
    padding-right: 120px
    }
[dir=ltr] devsite-book-nav li.devsite-nav-divider .devsite-nav-title {
    padding-left: 0
    }
[dir=rtl] devsite-book-nav li.devsite-nav-divider .devsite-nav-title {
    padding-right: 0
    }
[dir=ltr] devsite-book-nav .devsite-nav-title {
    margin-right: var(--devsite-nav-title-margin-x, 0);
    padding-right: 8px
    }
[dir=rtl] devsite-book-nav .devsite-nav-title {
    margin-left: var(--devsite-nav-title-margin-x, 0);
    padding-left: 8px
    }
devsite-book-nav .devsite-nav-title.devsite-nav-active {
    background: var(--devsite-nav-title-background-active, 0)
    }
devsite-book-nav .devsite-nav-item:not(.devsite-nav-accordion):not(.devsite-nav-heading) > .devsite-nav-title:not(.devsite-nav-active):focus, devsite-book-nav .devsite-nav-item:not(.devsite-nav-accordion):not(.devsite-nav-heading) > .devsite-nav-title:not(.devsite-nav-active):hover, devsite-book-nav .devsite-nav-item:not(.devsite-nav-accordion) > .devsite-expandable-nav > .devsite-nav-title-no-path:focus, devsite-book-nav .devsite-nav-item:not(.devsite-nav-accordion) > .devsite-expandable-nav > .devsite-nav-title-no-path:hover {
    background: var(--devsite-nav-title-background-hover, 0)
    }
devsite-book-nav .devsite-nav-item:not(.devsite-nav-accordion):not(.devsite-nav-heading) > .devsite-nav-title:not(.devsite-nav-active):focus, devsite-book-nav .devsite-nav-item:not(.devsite-nav-accordion):not(.devsite-nav-heading) > .devsite-nav-title:not(.devsite-nav-active):hover {
    color: var(--devsite-nav-title-color-hover, var(--devsite-link-color))
    }
devsite-book-nav .devsite-nav-list > .devsite-nav-heading:not(.devsite-nav-divider) {
    border-top: var(--devsite-primary-border);
    padding-top: 11px
    }
devsite-book-nav .devsite-nav-heading:not(.devsite-nav-divider) {
    margin-top: 12px
    }
[dir=ltr] devsite-book-nav .devsite-nav-heading:not(.devsite-nav-divider) .devsite-nav-title-no-path {
    padding-left: 24px
    }
[dir=rtl] devsite-book-nav .devsite-nav-heading:not(.devsite-nav-divider) .devsite-nav-title-no-path {
    padding-right: 24px
    }
[dir=ltr] devsite-book-nav .devsite-expandable-nav .devsite-nav-heading:not(.devsite-nav-divider) .devsite-nav-title-no-path {
    padding-left: 40px
    }
[dir=rtl] devsite-book-nav .devsite-expandable-nav .devsite-nav-heading:not(.devsite-nav-divider) .devsite-nav-title-no-path {
    padding-right: 40px
    }
[dir=ltr] devsite-book-nav .devsite-expandable-nav li .devsite-nav-heading:not(.devsite-nav-divider) .devsite-nav-title-no-path {
    padding-left: 56px
    }
[dir=rtl] devsite-book-nav .devsite-expandable-nav li .devsite-nav-heading:not(.devsite-nav-divider) .devsite-nav-title-no-path {
    padding-right: 56px
    }
[dir=ltr] devsite-book-nav .devsite-expandable-nav li li .devsite-nav-heading:not(.devsite-nav-divider) .devsite-nav-title-no-path {
    padding-left: 72px
    }
[dir=rtl] devsite-book-nav .devsite-expandable-nav li li .devsite-nav-heading:not(.devsite-nav-divider) .devsite-nav-title-no-path {
    padding-right: 72px
    }
[dir=ltr] devsite-book-nav .devsite-expandable-nav li li li .devsite-nav-heading:not(.devsite-nav-divider) .devsite-nav-title-no-path {
    padding-left: 88px
    }
[dir=rtl] devsite-book-nav .devsite-expandable-nav li li li .devsite-nav-heading:not(.devsite-nav-divider) .devsite-nav-title-no-path {
    padding-right: 88px
    }
[dir=ltr] devsite-book-nav .devsite-expandable-nav li li li li .devsite-nav-heading:not(.devsite-nav-divider) .devsite-nav-title-no-path {
    padding-left: 104px
    }
[dir=rtl] devsite-book-nav .devsite-expandable-nav li li li li .devsite-nav-heading:not(.devsite-nav-divider) .devsite-nav-title-no-path {
    padding-right: 104px
    }
[dir=ltr] devsite-book-nav .devsite-expandable-nav li li li li li .devsite-nav-heading:not(.devsite-nav-divider) .devsite-nav-title-no-path {
    padding-left: 120px
    }
[dir=rtl] devsite-book-nav .devsite-expandable-nav li li li li li .devsite-nav-heading:not(.devsite-nav-divider) .devsite-nav-title-no-path {
    padding-right: 120px
    }
[dir=ltr] devsite-book-nav .devsite-nav-accordion > .devsite-expandable-nav > .devsite-nav-title-no-path {
    margin-right: 0
    }
[dir=rtl] devsite-book-nav .devsite-nav-accordion > .devsite-expandable-nav > .devsite-nav-title-no-path {
    margin-left: 0
    }
devsite-book-nav .devsite-nav-heading.devsite-nav-divider {
    background: var(--devsite-nav-divider-background);
    border-bottom: var(--devsite-primary-border);
    border-top: var(--devsite-primary-border);
    padding: 4px 24px 2px
    }
devsite-book-nav .devsite-nav-heading.devsite-nav-divider:first-child {
    padding-top: 4px
    }
devsite-book-nav .devsite-nav-divider > .devsite-nav-title {
    font: 500 11px/16px var(--devsite-primary-font-family);
    letter-spacing: 0.8px;
    text-transform: uppercase
    }
devsite-book-nav .devsite-nav-accordion + .devsite-nav-accordion, devsite-book-nav .devsite-nav-divider + .devsite-nav-accordion {
    border-top: 0;
    padding-top: 12px
    }
devsite-book-nav .devsite-nav-accordion + .devsite-nav-divider {
    border-top: 0;
    padding-top: 4px
    }
devsite-book-nav .devsite-nav-item:not(.devsite-nav-accordion) .devsite-nav-heading > .devsite-nav-title-no-path {
    border-radius: 0;
    cursor: default
    }
devsite-book-nav .devsite-nav-item:not(.devsite-nav-accordion) .devsite-nav-heading > .devsite-nav-title-no-path:focus, devsite-book-nav .devsite-nav-item:not(.devsite-nav-accordion) .devsite-nav-heading > .devsite-nav-title-no-path:hover {
    background: 0
    }
devsite-book-nav .devsite-nav-item.devsite-nav-deprecated:not(.devsite-nav-accordion) .devsite-nav-heading > .devsite-nav-title-no-path:focus, devsite-book-nav .devsite-nav-item.devsite-nav-deprecated:not(.devsite-nav-accordion) .devsite-nav-heading > .devsite-nav-title-no-path:hover {
    color: var(--devsite-nav-title-no-path-color-hover, var(--devsite-link-color))
    }
devsite-book-nav .devsite-nav-accordion + .devsite-nav-item:not(.devsite-nav-accordion):not(.devsite-nav-divider), devsite-book-nav .devsite-nav-divider + .devsite-nav-item:not(.devsite-nav-accordion):not(.devsite-nav-divider), devsite-book-nav .devsite-nav-item:not(.devsite-nav-accordion):not(.devsite-nav-divider) + .devsite-nav-accordion, devsite-book-nav .devsite-nav-item:not(.devsite-nav-accordion):not(.devsite-nav-divider) + .devsite-nav-divider {
    margin-top: 12px
    }
devsite-book-nav .devsite-nav-break {
    height: 24px
    }
#devsite-hamburger-menu, devsite-book-nav .devsite-mobile-header, devsite-book-nav .devsite-mobile-nav-top {
    display: none
    }
devsite-book-nav .devsite-mobile-header {
    background: var(--devsite-header-color-upper, var(--devsite-background-1));
    border-bottom: var(--devsite-header-border, var(--devsite-primary-border))
    }
#devsite-hamburger-menu:before, devsite-book-nav #devsite-close-nav:before {
    border-radius: 50%;
    padding: 8px;
    -webkit-transition: background 0.2s;
    transition: background 0.2s
    }
#devsite-hamburger-menu:focus:before, #devsite-hamburger-menu:hover:before, devsite-book-nav #devsite-close-nav:focus:before, devsite-book-nav #devsite-close-nav:hover:before {
    background: var(--devsite-background-3)
    }
#devsite-hamburger-menu:before {
    content: "menu"
    }
[dir=ltr] devsite-book-nav #devsite-close-nav:before {
    content: "arrow_back"
    }
[dir=rtl] devsite-book-nav #devsite-close-nav:before {
    content: "arrow_forward"
    }
devsite-book-nav[top-level-nav] #devsite-close-nav:before {
    content: "close"
    }
.devsite-book-nav-toggle {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: var(--devsite-book-nav-toggle-background);
    border: var(--devsite-book-nav-toggle-border, 0);
    bottom: 16px;
    color: var(--devsite-book-nav-toggle-color, var(--devsite-secondary-text-color));
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 40px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 24px;
    padding: 0;
    position: fixed;
    text-decoration: none;
    -webkit-transform: translatex(calc(var(--devsite-js-book-nav-scrollbar-width, 0) - var(--devsite-nav-title-margin-x, 8px)));
    transform: translatex(calc(var(--devsite-js-book-nav-scrollbar-width, 0) - var(--devsite-nav-title-margin-x, 8px)));
    -webkit-transition: border-radius 0.2s ease, -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition: border-radius 0.2s ease, -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.2s ease;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.2s ease, -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1004
    }
.devsite-book-nav-toggle:focus, .devsite-book-nav-toggle:hover {
    background-color: var(--devsite-book-nav-toggle-background-hover);
    border: var(--devsite-book-nav-toggle-border-hover, 0);
    color: var(--devsite-book-nav-toggle-color-hover, var(--devsite-secondary-text-color))
    }
.devsite-book-nav-toggle[aria-expanded] {
    border-radius: 50%;
    width: 40px
    }
[dir=ltr] .devsite-book-nav-toggle[aria-expanded] {
    -webkit-transform: translatex(calc(229px - var(--devsite-js-book-nav-scrollbar-width, 0) - var(--devsite-nav-title-margin-x, 8px)));
    transform: translatex(calc(229px - var(--devsite-js-book-nav-scrollbar-width, 0) - var(--devsite-nav-title-margin-x, 8px)))
    }
[dir=rtl] .devsite-book-nav-toggle[aria-expanded] {
    -webkit-transform: translatex(calc(-229px + var(--devsite-js-book-nav-scrollbar-width, 0) + var(--devsite-nav-title-margin-x, 8px)));
    transform: translatex(calc(-229px + var(--devsite-js-book-nav-scrollbar-width, 0) + var(--devsite-nav-title-margin-x, 8px)))
    }
.devsite-book-nav-toggle:not([aria-expanded]) {
    -webkit-border-start: 0;
    -moz-border-start: 0;
    border-inline-start: 0;
    -webkit-transition: width 0.2s ease, border-radius 0.2s ease, -webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    transition: width 0.2s ease, border-radius 0.2s ease, -webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    transition: width 0.2s ease, transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.2s ease;
    transition: width 0.2s ease, transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.2s ease, -webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    width: 24px
    }
[dir=ltr] .devsite-book-nav-toggle:not([aria-expanded]) {
    border-radius: 0 20px 20px 0
    }
[dir=rtl] .devsite-book-nav-toggle:not([aria-expanded]) {
    border-radius: 20px 0 0 20px
    }
.devsite-book-nav-toggle:not([aria-expanded]):focus, .devsite-book-nav-toggle:not([aria-expanded]):hover {
    width: 40px
    }
[dir=ltr] body[ready] .devsite-book-nav-bg[collapsed] {
    -webkit-transform: translate(-279px);
    transform: translate(-279px)
    }
[dir=rtl] body[ready] .devsite-book-nav-bg[collapsed] {
    -webkit-transform: translate(279px);
    transform: translate(279px)
    }
[dir=ltr] body[ready] devsite-book-nav[collapsed] {
    -webkit-transform: translate(-279px, var(--devsite-js-book-nav-y-offset, 0));
    transform: translate(-279px, var(--devsite-js-book-nav-y-offset, 0))
    }
[dir=rtl] body[ready] devsite-book-nav[collapsed] {
    -webkit-transform: translate(279px, var(--devsite-js-book-nav-y-offset, 0));
    transform: translate(279px, var(--devsite-js-book-nav-y-offset, 0))
    }
.devsite-book-nav-toggle .devsite-book-nav-toggle-icon {
    font-size: 20px;
    height: 20px;
    position: static;
    width: 20px
    }
.devsite-book-nav-toggle .devsite-book-nav-toggle-icon:before {
    content: var(--devsite-book-nav-toggle-icon)
    }
[dir=ltr] .devsite-book-nav-toggle, [dir=rtl] .devsite-book-nav-toggle[aria-expanded] {
    --devsite-book-nav-toggle-icon: "chevron_right"
    }
[dir=ltr] .devsite-book-nav-toggle[aria-expanded], [dir=rtl] .devsite-book-nav-toggle {
    --devsite-book-nav-toggle-icon: "chevron_left"
    }
devsite-book-nav ~ .devsite-book-nav-blur {
    background-color: var(--devsite-book-nav-background);
    bottom: 0;
    height: 64px;
    -webkit-mask-image: -webkit-linear-gradient(transparent, #000 28px);
    mask-image: linear-gradient(transparent, #000 28px);
    pointer-events: none;
    position: fixed;
    width: calc(269px - var(--devsite-js-book-nav-scrollbar-width, 0));
    z-index: 1004;
    -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transform: translate(0);
    transform: translate(0)
    }
[dir=ltr] devsite-book-nav ~ .devsite-book-nav-blur {
    left: 0
    }
[dir=rtl] devsite-book-nav ~ .devsite-book-nav-blur {
    right: 0
    }
[dir=ltr] devsite-book-nav ~ .devsite-book-nav-blur[collapsed] {
    left: 0;
    -webkit-transform: translate(-281px, var(--devsite-js-book-nav-y-offset, 0));
    transform: translate(-281px, var(--devsite-js-book-nav-y-offset, 0))
    }
[dir=rtl] devsite-book-nav ~ .devsite-book-nav-blur[collapsed] {
    right: 0;
    -webkit-transform: translate(281px, var(--devsite-js-book-nav-y-offset, 0));
    transform: translate(281px, var(--devsite-js-book-nav-y-offset, 0))
    }
@media screen and (max-width: 840px) {
    devsite-book-nav {
        display: none;
        height: 100vh;
        max-height: 100vh !important;
        top: 0 !important;
        z-index: 1013
        }
    body[ready] .devsite-book-nav-bg, body[ready] devsite-book-nav {
        -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
        }
    [dir=ltr] body[ready] devsite-book-nav {
        -webkit-transform: translate(-281px);
        transform: translate(-281px)
        }
    [dir=rtl] body[ready] devsite-book-nav {
        -webkit-transform: translate(281px);
        transform: translate(281px)
        }
    .devsite-book-nav-blur {
        display: none
        }
    body[ready] .devsite-book-nav-bg[fixed] {
        display: none
        }
    body[ready] devsite-book-nav[fixed] {
        background: var(--devsite-book-nav-background);
        display: block !important;
        box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color)
        }
    devsite-book-nav[visually-hidden] {
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important
        }
    #devsite-hamburger-menu, devsite-book-nav #devsite-close-nav {
        height: 100%;
        position: relative;
        width: auto;
        z-index: 20
        }
    #devsite-hamburger-menu {
        display: block;
        width: 40px
        }
    [dir=ltr] #devsite-hamburger-menu {
        margin: 0 0 0 -4px
        }
    [dir=rtl] #devsite-hamburger-menu {
        margin: 0 -4px 0 0
        }
    devsite-book-nav #devsite-close-nav {
        color: var(--devsite-secondary-text-color);
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0
        }
    [dir=ltr] devsite-book-nav #devsite-close-nav {
        margin: 0 0 0 -12px
        }
    [dir=rtl] devsite-book-nav #devsite-close-nav {
        margin: 0 -12px 0 0
        }
    devsite-book-nav .devsite-mobile-nav-top {
        display: block
        }
    devsite-book-nav .devsite-book-nav-wrapper {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
        }
    [dir=ltr] devsite-book-nav .devsite-book-nav-wrapper {
        -webkit-transform: translatex(-269px);
        transform: translatex(-269px)
        }
    [dir=rtl] devsite-book-nav .devsite-book-nav-wrapper {
        -webkit-transform: translatex(269px);
        transform: translatex(269px)
        }
    devsite-book-nav .devsite-nav-list {
        padding-bottom: 120px
        }
    devsite-book-nav .devsite-nav-list > .devsite-nav-item:not(.devsite-nav-accordion):not(.devsite-nav-divider):first-child {
        margin-top: 0
        }
    devsite-book-nav .devsite-mobile-nav-bottom .devsite-nav-list > .devsite-nav-item:not(.devsite-nav-accordion):not(.devsite-nav-divider):first-child {
        margin-top: 13px
        }
    devsite-book-nav .devsite-mobile-nav-top .devsite-nav-text {
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -moz-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1
        }
    devsite-book-nav[top-level-nav] .devsite-book-nav-wrapper {
        -webkit-transform: translatex(0);
        transform: translatex(0)
        }
    devsite-book-nav:not([top-level-nav]) .devsite-mobile-nav-top, devsite-book-nav[top-level-nav] .devsite-mobile-nav-bottom {
        height: calc(100vh - 64px);
        overflow: hidden
        }
    devsite-book-nav .devsite-mobile-nav-top > .devsite-nav-list > .devsite-nav-item {
        border-bottom: var(--devsite-primary-border)
        }
    devsite-book-nav .devsite-mobile-nav-top > .devsite-nav-list > .devsite-nav-item > .devsite-nav-title {
        font-weight: 700;
        padding-bottom: 15px;
        padding-top: 16px
        }
    devsite-book-nav .devsite-mobile-nav-top > .devsite-nav-list > .devsite-nav-item > .devsite-nav-active {
        background: 0
        }
    devsite-book-nav .devsite-mobile-nav-top > .devsite-nav-list > .devsite-nav-item > .devsite-nav-title:not(.devsite-nav-active) {
        color: var(--devsite-secondary-text-color)
        }
    devsite-book-nav .devsite-mobile-nav-top > .devsite-nav-list > .devsite-nav-item:not(.devsite-nav-accordion):not(.devsite-nav-heading) > .devsite-nav-title {
        border-radius: 0
        }
    devsite-book-nav .devsite-mobile-nav-top > .devsite-nav-list > .devsite-nav-item:not(.devsite-nav-accordion):not(.devsite-nav-heading) > .devsite-nav-title:focus, devsite-book-nav .devsite-mobile-nav-top > .devsite-nav-list > .devsite-nav-item:not(.devsite-nav-accordion):not(.devsite-nav-heading) > .devsite-nav-title:hover {
        background: 0
        }
    devsite-book-nav .devsite-mobile-nav-bottom, devsite-book-nav .devsite-mobile-nav-top {
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: 269px
        }
    devsite-book-nav .devsite-mobile-header {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        height: 49px;
        padding: 0 16px;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 100
        }
    devsite-book-nav .devsite-mobile-header .devsite-nav-active {
        font-weight: 400
        }
    devsite-book-nav .devsite-nav-responsive-tabs {
        margin-bottom: 12px;
        margin-top: -11px
        }
    devsite-book-nav .devsite-lower-tab-item {
        margin: 0
        }
    devsite-book-nav .devsite-nav-responsive-tabs > .devsite-nav-item:last-child {
        margin-bottom: 8px
        }
    devsite-book-nav ~ .devsite-book-nav-toggle {
        display: none
        }
    devsite-book-nav .devsite-book-nav-filter {
        display: none
        }
    }
@media screen and (max-width: 600px) {
    #devsite-hamburger-menu, devsite-book-nav #devsite-close-nav {
        margin: 0 4px 0 -12px
        }
    }
.devsite-expandable-nav {
    display: block;
    position: relative
    }
.devsite-expandable-nav > .devsite-nav-section {
    max-width: 100%;
    overflow-y: hidden;
    -webkit-transition: height 0.2s;
    transition: height 0.2s;
    width: 100%;
    will-change: height
    }
.devsite-expandable-nav:not([animatable]) > .devsite-nav-section {
    -webkit-transition: height 1ms;
    transition: height 1ms
    }
.devsite-expandable-nav > .devsite-nav-section .devsite-nav-heading:not(.devsite-nav-divider):first-child {
    margin-top: 0
    }
.devsite-expandable-nav:not(.expanded) > .devsite-nav-section {
    display: none
    }
.devsite-expandable-nav:not(.expanded) > .devsite-nav-section {
    height: 0
    }
.devsite-expandable-nav > .devsite-nav-title-no-path {
    cursor: pointer;
    outline: 0
    }
.devsite-expandable-nav > .devsite-nav-title {
    -webkit-padding-start: 24px;
    -moz-padding-start: 24px;
    padding-inline-start: 24px
    }
.devsite-expandable-nav .devsite-expandable-nav > .devsite-nav-title {
    -webkit-padding-start: 40px;
    -moz-padding-start: 40px;
    padding-inline-start: 40px
    }
.devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav > .devsite-nav-title {
    -webkit-padding-start: 56px;
    -moz-padding-start: 56px;
    padding-inline-start: 56px
    }
.devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav > .devsite-nav-title {
    -webkit-padding-start: 72px;
    -moz-padding-start: 72px;
    padding-inline-start: 72px
    }
.devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav > .devsite-nav-title {
    -webkit-padding-start: 88px;
    -moz-padding-start: 88px;
    padding-inline-start: 88px
    }
.devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav > .devsite-nav-title {
    -webkit-padding-start: 104px;
    -moz-padding-start: 104px;
    padding-inline-start: 104px
    }
.devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav > .devsite-nav-title {
    -webkit-padding-start: 120px;
    -moz-padding-start: 120px;
    padding-inline-start: 120px
    }
.devsite-expandable-nav > .devsite-nav-toggle {
    cursor: pointer;
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal;
    text-decoration: none
    }
.devsite-nav-item:not(.devsite-nav-accordion) > .devsite-expandable-nav > .devsite-nav-toggle {
    font-size: 18px;
    position: absolute;
    top: var(--devsite-nav-toggle-y-start, 2px);
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
    transition: transform 0.2s ease, -webkit-transform 0.2s ease;
    will-change: transform
    }
.devsite-nav-item:not(.devsite-nav-accordion) > .devsite-expandable-nav:not([animatable]) > .devsite-nav-toggle {
    -webkit-transition: -webkit-transform 1ms;
    transition: -webkit-transform 1ms;
    transition: transform 1ms;
    transition: transform 1ms, -webkit-transform 1ms
    }
[dir=ltr] .devsite-expandable-nav > .devsite-nav-toggle {
    left: 4px
    }
[dir=rtl] .devsite-expandable-nav > .devsite-nav-toggle {
    right: 4px
    }
[dir=ltr] .devsite-expandable-nav .devsite-expandable-nav > .devsite-nav-toggle {
    left: 20px
    }
[dir=rtl] .devsite-expandable-nav .devsite-expandable-nav > .devsite-nav-toggle {
    right: 20px
    }
[dir=ltr] .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav > .devsite-nav-toggle {
    left: 36px
    }
[dir=rtl] .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav > .devsite-nav-toggle {
    right: 36px
    }
[dir=ltr] .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav > .devsite-nav-toggle {
    left: 52px
    }
[dir=rtl] .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav > .devsite-nav-toggle {
    right: 52px
    }
[dir=ltr] .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav > .devsite-nav-toggle {
    left: 68px
    }
[dir=rtl] .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav > .devsite-nav-toggle {
    right: 68px
    }
[dir=ltr] .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav > .devsite-nav-toggle {
    left: 84px
    }
[dir=rtl] .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav > .devsite-nav-toggle {
    right: 84px
    }
[dir=ltr] .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav > .devsite-nav-toggle {
    left: 100px
    }
[dir=rtl] .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav .devsite-expandable-nav > .devsite-nav-toggle {
    right: 100px
    }
.devsite-nav-item:not(.devsite-nav-accordion) > .devsite-expandable-nav:not(.expanded) > .devsite-nav-toggle {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
    }
[dir=rtl] .devsite-nav-item:not(.devsite-nav-accordion) > .devsite-expandable-nav:not(.expanded) > .devsite-nav-toggle {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
    }
.devsite-expandable-nav > .devsite-nav-toggle:before {
    content: "arrow_drop_down"
    }
.devsite-nav-accordion {
    border-bottom: var(--devsite-primary-border);
    border-top: var(--devsite-primary-border);
    padding: 11px 0
    }
.devsite-nav-accordion > .devsite-expandable-nav {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
    }
.devsite-nav-accordion > .devsite-expandable-nav > .devsite-nav-title {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--devsite-secondary-text-rgba);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 196px;
    -moz-box-flex: 1;
    -ms-flex: 1 0 196px;
    flex: 1 0 196px;
    font-weight: 700;
    overflow: hidden
    }
.devsite-nav-accordion > .devsite-expandable-nav > .devsite-nav-toggle {
    color: var(--devsite-secondary-text-color);
    font-size: 24px;
    margin-block: 0;
    margin-inline: 0 8px;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    -webkit-transform: rotatex(0deg);
    transform: rotatex(0deg);
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s
    }
.devsite-nav-accordion > .devsite-expandable-nav:not([animatable]) > .devsite-nav-toggle {
    -webkit-transition: -webkit-transform 1ms;
    transition: -webkit-transform 1ms;
    transition: transform 1ms;
    transition: transform 1ms, -webkit-transform 1ms
    }
.devsite-nav-accordion > .devsite-expandable-nav:not(.expanded) > .devsite-nav-toggle {
    -webkit-transform: rotatex(180deg);
    transform: rotatex(180deg)
    }
.devsite-nav-accordion > .devsite-expandable-nav > .devsite-nav-toggle:before {
    content: "expand_less"
    }
.devsite-nav-accordion > .devsite-expandable-nav > .devsite-nav-section {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2
    }
devsite-book-nav .devsite-product-id-row {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-height: 60px
    }
devsite-book-nav .devsite-header-no-lower-tabs .devsite-product-id-row {
    min-height: 72px
    }
devsite-book-nav .devsite-product-description-row {
    color: var(--devsite-header-foreground-lower-description, var(--devsite-header-foreground-lower-hover, var(--devsite-inverted-text-color)))
    }
devsite-book-nav .devsite-product-description {
    font: 16px/24px var(--devsite-primary-font-family);
    margin-block: 0;
    margin-inline: 0 180px
    }
devsite-book-nav .devsite-breadcrumb-list + .devsite-product-description {
    margin-block: 8px 0
    }
devsite-book-nav .devsite-product-button-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin-block: 0;
    margin-inline: 24px 0;
    z-index: 1
    }
@media screen and (max-width: 840px) {
    devsite-book-nav .devsite-product-id-row {
        min-height: 72px
        }
    devsite-book-nav .devsite-product-description {
        margin-inline: 0
        }
    }
@media screen and (max-width: 600px) {
    devsite-book-nav .devsite-header-no-lower-tabs .devsite-product-id-row, devsite-book-nav .devsite-product-id-row {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
        }
    devsite-book-nav .devsite-product-button-row {
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        margin-block: 16px 0;
        margin-inline: 0
        }
    }
devsite-book-nav .devsite-product-name-wrapper {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    height: 36px;
    margin: 6px 0
    }
devsite-book-nav .devsite-product-name-link, devsite-book-nav .devsite-site-logo-link {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    opacity: 1;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s
    }
devsite-book-nav .devsite-product-name-link:focus, devsite-book-nav .devsite-product-name-link:hover, devsite-book-nav .devsite-site-logo-link:focus {
    opacity: 0.7;
    text-decoration: none
    }
devsite-book-nav .devsite-site-logo {
    height: var(--devsite-logo-height, 32px)
    }
devsite-book-nav .devsite-has-google-wordmark > .devsite-breadcrumb-link, devsite-book-nav .devsite-has-google-wordmark > .devsite-product-name {
    direction: ltr
    }
devsite-book-nav .devsite-google-wordmark {
    height: 24px;
    margin: 0 4px 0 0;
    position: relative;
    top: 5px
    }
devsite-book-nav .devsite-google-wordmark-svg-path {
    -webkit-transition: fill 0.2s;
    transition: fill 0.2s
    }
devsite-book-nav .devsite-site-logo-link canvas {
    height: auto !important
    }
devsite-book-nav .devsite-site-logo-link picture {
    display: contents
    }
devsite-book-nav .devsite-product-logo-container {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 50%;
    color: var(--devsite-primary-color, var(--devsite-primary-text-color));
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 36px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-inline: 0 4px;
    width: 36px
    }
devsite-book-nav .devsite-product-logo-container[background] {
    background: var(--devsite-primary-color, var(--devsite-primary-text-color));
    color: var(--devsite-inverted-text-color)
    }
devsite-book-nav .devsite-product-logo {
    color: inherit;
    font-size: 32px;
    height: 32px;
    max-width: 32px;
    min-width: 32px;
    overflow: hidden;
    white-space: nowrap
    }
devsite-book-nav .devsite-product-logo-container[background] .devsite-product-logo {
    font-size: 28px;
    height: 28px;
    max-width: 28px;
    min-width: 28px
    }
devsite-book-nav .devsite-product-name {
    letter-spacing: 0;
    margin: 0;
    max-height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
    white-space: nowrap
    }
devsite-book-nav .devsite-site-logo:not([src*=".svg"]) {
    height: auto;
    max-height: 32px
    }
devsite-book-nav .devsite-breadcrumb-link > .devsite-product-name {
    color: inherit
    }
@media screen and (max-width: 840px) {
    devsite-book-nav .devsite-product-name-wrapper {
        -webkit-box-flex: 0;
        -webkit-flex: 0 1 auto;
        -moz-box-flex: 0;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        min-width: 0
        }
    devsite-book-nav .devsite-product-name-wrapper .devsite-breadcrumb-item:not(:first-of-type), devsite-book-nav .devsite-product-name-wrapper .devsite-site-logo-link + .devsite-product-name {
        display: none
        }
    devsite-book-nav .devsite-product-name-wrapper .devsite-breadcrumb-item, devsite-book-nav .devsite-product-name-wrapper .devsite-breadcrumb-link, devsite-book-nav .devsite-product-name-wrapper .devsite-breadcrumb-list, devsite-book-nav .devsite-product-name-wrapper .devsite-product-name {
        width: 100%
        }
    devsite-book-nav .devsite-product-name-wrapper .devsite-breadcrumb-link {
        overflow: hidden;
        text-overflow: ellipsis
        }
    }
devsite-bookmark.show {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--devsite-bookmark-background);
    border: 0;
    box-shadow: none;
    cursor: pointer;
    height: 36px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
    min-width: 66px;
    padding: 0;
    vertical-align: middle;
    width: 66px
    }
devsite-bookmark.show.devsite-legacy-bookmark {
    border-radius: 18px;
    min-width: 36px;
    width: 36px
    }
devsite-bookmark.show.devsite-legacy-bookmark:focus, devsite-bookmark.show.devsite-legacy-bookmark:hover {
    background: var(--devsite-bookmark-background-hover-legacy)
    }
devsite-bookmark.show.devsite-page-bookmark, devsite-feature-tooltip.devsite-page-bookmark-tooltip {
    -webkit-margin-end: 8px;
    -moz-margin-end: 8px;
    margin-inline-end: 8px;
    -webkit-margin-start: -74px;
    -moz-margin-start: -74px;
    margin-inline-start: -74px
    }
devsite-bookmark input.bookmark-checkbox {
    background: var(--devsite-bookmark-background);
    color: var(--devsite-bookmark-icon-color);
    margin: 0
    }
devsite-bookmark devsite-dropdown-list {
    --devsite-button-box-shadow: none
    }
devsite-bookmark devsite-dropdown-list .bookmark-icon {
    color: var(--devsite-bookmark-icon-color);
    -webkit-transition: color 0.2s;
    transition: color 0.2s
    }
devsite-bookmark devsite-dropdown-list .bookmark-icon.toggled {
    color: var(--devsite-bookmark-icon-color-saved)
    }
devsite-bookmark input.bookmark-checkbox:after {
    content: "bookmark_border"
    }
devsite-bookmark input.bookmark-checkbox:checked:after {
    content: "bookmark"
    }
devsite-bookmark input.bookmark-checkbox:checked:focus:before, devsite-bookmark input.bookmark-checkbox:focus:before {
    background: var(--devsite-bookmark-background-focus-legacy)
    }
devsite-bookmark input.bookmark-checkbox:checked, devsite-bookmark[saved] input.bookmark-checkbox, devsite-bookmark[saved] input.bookmark-checkbox:checked {
    color: var(--devsite-bookmark-icon-color-saved)
    }
.devsite-bookmark-dialog .create-profile-spinner {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: hsla(0, 0%, 100%, 0.8);
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10
    }
.devsite-bookmark-dialog.loading .create-profile-spinner {
    opacity: 1
    }
devsite-catalog {
    display: block;
    margin: 20px 0;
    width: 100%
    }
devsite-catalog > * {
    display: none
    }
devsite-catalog > .catalog-container {
    -webkit-box-align: start;
    -webkit-align-items: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    display: grid;
    gap: 30px;
    grid: var(--devsite-catalog-grid)
    }
devsite-catalog .catalog-sidebar {
    grid-area: sidebar
    }
devsite-catalog .catalog-main {
    grid-area: main
    }
devsite-catalog .catalog-checkbox-controls-container, devsite-catalog .catalog-checkbox-controls-group, devsite-catalog .catalog-main-filter-controls {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-catalog .catalog-checkbox-controls-container, devsite-catalog .catalog-checkbox-controls-group {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
    }
devsite-catalog .catalog-checkbox-controls-group, devsite-catalog .catalog-checkbox-controls-subtitle, devsite-catalog .catalog-checkbox-controls-title, devsite-catalog .catalog-checkbox-label, devsite-catalog .catalog-filter-bar {
    text-align: var(--devsite-catalog-text-align, start);
    width: 100%
    }
devsite-catalog .catalog-checkbox-controls-container {
    border: var(--devsite-primary-border);
    border-radius: var(--devsite-card-border-radius);
    color: var(--devsite-secondary-text-color)
    }
devsite-catalog .catalog-filter-chips {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: var(--devsite-chips-gap)
    }
devsite-catalog .catalog-checkbox-controls-filter-chips-container {
    display: none
    }
devsite-catalog .catalog-main-filter-chips > :only-child {
    margin-bottom: 24px
    }
devsite-catalog .catalog-main-filter-chips > div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 16px 8px
    }
devsite-catalog .catalog-main-filter-chips > div:empty {
    display: none
    }
devsite-catalog .catalog-filter-chip {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 16px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 32px
    }
devsite-catalog .catalog-filter-chip:after {
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    content: var(--devsite-button-icon-content);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 18px;
    height: 18px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-margin-end: var(--devsite-button-icon-margin-x-end);
    -moz-margin-end: var(--devsite-button-icon-margin-x-end);
    margin-inline-end: var(--devsite-button-icon-margin-x-end);
    -webkit-margin-start: var(--devsite-button-icon-margin-x-start);
    -moz-margin-start: var(--devsite-button-icon-margin-x-start);
    margin-inline-start: var(--devsite-button-icon-margin-x-start);
    width: 18px
    }
devsite-catalog .catalog-checkbox-controls-group {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 0 20px 20px
    }
devsite-catalog .catalog-container .catalog-clear-group-checkboxes-button, devsite-catalog .catalog-container .catalog-select-group-checkboxes-button {
    -webkit-margin-start: -8px;
    -moz-margin-start: -8px;
    margin-inline-start: -8px
    }
devsite-catalog .catalog-checkbox-controls-group > devsite-pagination {
    margin: 0
    }
devsite-catalog .catalog-checkbox-controls-group > devsite-pagination .button {
    border: 0;
    -webkit-margin-start: -10px;
    -moz-margin-start: -10px;
    margin-inline-start: -10px
    }
devsite-catalog .catalog-checkbox-controls-buttons-container {
    display: none
    }
devsite-catalog .catalog-checkbox-controls-title {
    border-bottom: var(--devsite-primary-border);
    color: var(--devsite-catalog-title-color);
    letter-spacing: var(--devsite-catalog-title-letter-spacing, 1.5px);
    text-transform: var(--devsite-catalog-title-text-transform, uppercase)
    }
devsite-catalog .catalog-checkbox-controls-subtitle {
    color: var(--devsite-primary-text-color);
    padding: var(--devsite-catalog-subtitle-padding)
    }
devsite-catalog .catalog-checkbox-container {
    margin: 6px 0
    }
devsite-catalog .catalog-checkbox-label {
    color: var(--devsite-catalog-label-color, --devsite-secondary-text-color)
    }
devsite-catalog .catalog-main-filter-controls {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 24px;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
    }
devsite-catalog .catalog-filter-bar-container {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    width: 100%
    }
devsite-catalog .catalog-filter-bar-container:before {
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal;
    color: var(--devsite-catalog-filter-bar-container-color);
    content: var(--devsite-catalog-filter-bar-container-content);
    position: var(--devsite-catalog-filter-bar-container-position);
    top: var(--devsite-catalog-filter-bar-container-top)
    }
[dir=ltr] devsite-catalog .catalog-filter-bar-container:before {
    left: var(--devsite-catalog-filter-bar-container-x-start)
    }
[dir=rtl] devsite-catalog .catalog-filter-bar-container:before {
    right: var(--devsite-catalog-filter-bar-container-x-start)
    }
devsite-catalog .catalog-filter-bar {
    margin: 0 0 24px;
    max-width: var(--devsite-catalog-filter-bar-max-width, 725px);
    min-width: 150px
    }
devsite-catalog .catalog-show-sidebar-button {
    display: var(--devsite-catalog-sidebar-button-display);
    margin: var(--devsite-catalog-sidebar-button-margin, 0)
    }
devsite-catalog .catalog-filter-bar-container + .catalog-show-sidebar-button {
    margin: 4px 0 auto
    }
devsite-catalog devsite-pagination {
    margin-top: 20px
    }
devsite-catalog devsite-dynamic-content .devsite-dynamic-content-no-results {
    border: 0;
    padding: 0;
    width: auto
    }
devsite-catalog devsite-dynamic-content .devsite-dynamic-content-no-results-image {
    width: 425px
    }
@media screen and (max-width: 1253px) {
    devsite-catalog .catalog-sidebar {
        border-radius: var(--devsite-catalog-sidebar-border-radius);
        box-shadow: var(--devsite-card-box-shadow);
        height: calc(100vh - var(--devsite-js-header-height, 0) - 4px);
        margin-block: calc(var(--devsite-js-header-height, 0) + 4px) 0;
        -webkit-margin-end: 0;
        -moz-margin-end: 0;
        margin-inline-end: 0;
        position: fixed;
        top: 0;
        -webkit-transition: width 0.2s;
        transition: width 0.2s;
        visibility: hidden;
        width: 0;
        z-index: 1007
        }
    [dir=ltr] devsite-catalog .catalog-sidebar {
        right: 0
        }
    [dir=rtl] devsite-catalog .catalog-sidebar {
        left: 0
        }
    devsite-catalog .catalog-sidebar[expanded] {
        max-width: 90%;
        visibility: visible;
        width: 340px
        }
    devsite-catalog .catalog-sidebar:before {
        background-color: rgba(0, 0, 0, 0.4);
        bottom: 0;
        content: "";
        left: 0;
        margin: -200px;
        opacity: 0;
        pointer-events: none;
        position: fixed;
        right: 0;
        -webkit-tap-highlight-color: transparent;
        top: 0;
        -webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s linear;
        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s linear;
        visibility: hidden;
        z-index: -1
        }
    devsite-catalog .catalog-sidebar[expanded]:before {
        content: "";
        cursor: pointer;
        opacity: 1;
        pointer-events: auto;
        -webkit-transition: opacity 0.2s ease;
        transition: opacity 0.2s ease;
        visibility: visible
        }
    devsite-catalog .catalog-checkbox-controls-title {
        margin-bottom: 10px
        }
    devsite-catalog .catalog-checkbox-controls-buttons-container {
        border-top: var(--devsite-primary-border);
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -webkit-justify-content: flex-end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        margin-top: auto;
        padding: 16px 20px
        }
    devsite-catalog .catalog-checkbox-controls-container {
        background: var(--devsite-card-background, var(--devsite-background-1));
        height: 100%;
        overflow-y: scroll
        }
    devsite-catalog .catalog-checkbox-controls-filter-chips-container {
        display: block;
        margin-block: 0 2px;
        margin-inline: 16px 12px
        }
    devsite-catalog .catalog-main {
        width: 100%
        }
    }
cloudx-catalog-innovators .loading, devsite-catalog-body-badges .loading {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 36px 0
    }
cloudx-catalog-innovators p, devsite-catalog-body-badges p {
    margin: 0
    }
cloudx-catalog-innovators .no-results, devsite-catalog-body-badges .no-results {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 64px 0;
    gap: 8px;
    opacity: 0.5
    }
cloudx-catalog-innovators .profile-cards-grid, devsite-catalog-body-badges .profile-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 22px
    }
cloudx-catalog-innovators .profile-cards-controls, devsite-catalog-body-badges .profile-cards-controls {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px
    }
@media screen and (max-width: 1253px) {
    cloudx-catalog-innovators .profile-cards-grid, devsite-catalog-body-badges .profile-cards-grid {
        grid-template-columns: 1fr 1fr
        }
    }
@media screen and (max-width: 600px) {
    cloudx-catalog-innovators .profile-cards-grid, devsite-catalog-body-badges .profile-cards-grid {
        grid-template-columns: 1fr
        }
    }
cloudx-catalog-innovators .transparent, devsite-catalog-body-badges .transparent {
    opacity: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
    }
cloudx-catalog-innovators .profile-card, devsite-catalog-body-badges .profile-card {
    border-radius: 8px;
    border: var(--devsite-primary-border);
    padding: 32px 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center
    }
cloudx-catalog-innovators .profile-card-image, cloudx-catalog-innovators .profile-card-image-placeholder, devsite-catalog-body-badges .profile-card-image, devsite-catalog-body-badges .profile-card-image-placeholder {
    width: 118px;
    height: 118px;
    min-width: 118px;
    min-height: 118px;
    border-radius: 118px
    }
cloudx-catalog-innovators .profile-card-image-placeholder, devsite-catalog-body-badges .profile-card-image-placeholder {
    background: var(--devsite-background-5)
    }
cloudx-catalog-innovators .profile-card-name, devsite-catalog-body-badges .profile-card-name {
    font-family: var(--devsite-headline-font-family);
    font-size: 24px;
    line-height: 32px;
    color: var(--devsite-secondary-color);
    margin-top: 20px
    }
cloudx-catalog-innovators .profile-card-details, cloudx-catalog-innovators .profile-card-location, devsite-catalog-body-badges .profile-card-details, devsite-catalog-body-badges .profile-card-location {
    font-family: var(--devsite-primary-font-family);
    font-size: 16px;
    line-height: 24px
    }
cloudx-catalog-innovators .profile-card-location, devsite-catalog-body-badges .profile-card-location {
    color: #3c4043;
    margin-top: 8px
    }
cloudx-catalog-innovators .profile-card-details, devsite-catalog-body-badges .profile-card-details {
    color: var(--devsite-secondary-color);
    margin-top: 8px;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
    }
cloudx-catalog-innovators .profile-card-button, devsite-catalog-body-badges .profile-card-button {
    margin-top: 20px
    }
devsite-checkbox:not([ready]) {
    background: 0;
    visibility: hidden
    }
devsite-checkbox[ready] {
    visibility: visible
    }
devsite-code {
    border: var(--devsite-code-border, 0);
    border-radius: var(--devsite-code-border-radius, 0);
    clear: both;
    direction: ltr !important;
    display: block;
    overflow: hidden;
    position: relative
    }
devsite-code .devsite-code-buttons-container {
    position: absolute;
    right: var(--devsite-code-buttons-container-right, 0);
    top: 0;
    z-index: 1
    }
devsite-code .devsite-code-buttons-container button {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #202124;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: 18px;
    height: var(--devsite-code-button-size, 24px);
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
    min-width: auto;
    padding: 0;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
    width: var(--devsite-code-button-size, 24px)
    }
devsite-code .devsite-code-buttons-container button:focus, devsite-code .devsite-code-buttons-container button:hover {
    color: #5f6368
    }
devsite-code .devsite-code-buttons-container button.material-icons, devsite-code .devsite-code-buttons-container button.material-icons:hover {
    cursor: pointer
    }
devsite-code .devsite-code-buttons-container button {
    color: var(--devsite-code-buttons-color)
    }
devsite-code .devsite-code-buttons-container button:focus, devsite-code .devsite-code-buttons-container button:hover {
    color: var(--devsite-code-buttons-hover)
    }
devsite-code .devsite-code-buttons-container .devsite-toggle-dark {
    display: var(--devsite-code-buttons-toggle-dark-display)
    }
devsite-code .devsite-code-buttons-container .devsite-toggle-light {
    display: var(--devsite-code-buttons-toggle-light-display)
    }
devsite-code pre {
    margin: 0;
    padding-block: var(--devsite-code-padding-block, 24px);
    padding-inline: var(--devsite-code-padding-inline, 24px)
    }
devsite-code pre::-webkit-scrollbar-thumb {
    background: var(--devsite-scrollbar-thumb-background)
    }
devsite-code pre .com, devsite-code pre .devsite-syntax-c, devsite-code pre .devsite-syntax-c1, devsite-code pre .devsite-syntax-ch, devsite-code pre .devsite-syntax-cm, devsite-code pre .devsite-syntax-cp, devsite-code pre .devsite-syntax-cpf, devsite-code pre .devsite-syntax-cs {
    color: var(--devsite-code-comments-color)
    }
devsite-code pre .dec, devsite-code pre .devsite-syntax-il, devsite-code pre .devsite-syntax-m, devsite-code pre .devsite-syntax-mb, devsite-code pre .devsite-syntax-mf, devsite-code pre .devsite-syntax-mh, devsite-code pre .devsite-syntax-mi, devsite-code pre .devsite-syntax-mo, devsite-code pre .lit {
    color: var(--devsite-code-numbers-color)
    }
devsite-code pre .devsite-syntax-k, devsite-code pre .devsite-syntax-kc, devsite-code pre .devsite-syntax-kd, devsite-code pre .devsite-syntax-kn, devsite-code pre .devsite-syntax-kp, devsite-code pre .devsite-syntax-kr, devsite-code pre .devsite-syntax-kt, devsite-code pre .devsite-syntax-nt, devsite-code pre .devsite-syntax-ow, devsite-code pre .kwd, devsite-code pre .tag {
    color: var(--devsite-code-keywords-color)
    }
devsite-code pre .atv, devsite-code pre .cpf, devsite-code pre .devsite-syntax-dl, devsite-code pre .devsite-syntax-s, devsite-code pre .devsite-syntax-s1, devsite-code pre .devsite-syntax-s2, devsite-code pre .devsite-syntax-sa, devsite-code pre .devsite-syntax-sb, devsite-code pre .devsite-syntax-sc, devsite-code pre .devsite-syntax-sd, devsite-code pre .devsite-syntax-se, devsite-code pre .devsite-syntax-sh, devsite-code pre .devsite-syntax-si, devsite-code pre .devsite-syntax-sr, devsite-code pre .devsite-syntax-ss, devsite-code pre .devsite-syntax-sx, devsite-code pre .str {
    color: var(--devsite-code-strings-color)
    }
devsite-code pre .atn, devsite-code pre .devsite-syntax-bp, devsite-code pre .devsite-syntax-fm, devsite-code pre .devsite-syntax-gh, devsite-code pre .devsite-syntax-go, devsite-code pre .devsite-syntax-gp, devsite-code pre .devsite-syntax-gr, devsite-code pre .devsite-syntax-gt, devsite-code pre .devsite-syntax-gu, devsite-code pre .devsite-syntax-na, devsite-code pre .devsite-syntax-nb, devsite-code pre .devsite-syntax-nc, devsite-code pre .devsite-syntax-nd, devsite-code pre .devsite-syntax-ne, devsite-code pre .devsite-syntax-nf, devsite-code pre .devsite-syntax-ni, devsite-code pre .devsite-syntax-nl, devsite-code pre .devsite-syntax-nn, devsite-code pre .devsite-syntax-no, devsite-code pre .devsite-syntax-nv, devsite-code pre .devsite-syntax-vc, devsite-code pre .devsite-syntax-vg, devsite-code pre .devsite-syntax-vi, devsite-code pre .devsite-syntax-vm, devsite-code pre .typ {
    color: var(--devsite-code-types-color)
    }
devsite-code .devsite-terminal:before {
    color: #bdc1c6;
    content: "$";
    padding-right: 8px
    }
devsite-code .devsite-terminal[data-terminal-prefix]:before {
    content: attr(data-terminal-prefix)
    }
devsite-code .devsite-github-link {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
    }
devsite-code a.devsite-github-link:focus, devsite-code a.devsite-github-link:hover {
    text-decoration: none
    }
devsite-code .devsite-github-link:after {
    background: no-repeat var(--devsite-github-link-icon);
    content: "";
    display: block;
    height: 18px;
    margin-left: 8px;
    width: 18px
    }
devsite-code[dark-code] .devsite-github-link > a {
    color: #669df6
    }
devsite-code devsite-selector pre {
    margin: 0
    }
body[layout=full] devsite-code {
    overflow: visible
    }
body[layout=full] devsite-code:after {
    background: var(--devsite-code-background);
    content: "";
    display: block;
    height: 100%;
    left: calc(50% - 50vw);
    position: absolute;
    top: 0;
    width: 100vw;
    z-index: -1
    }
devsite-codelab-catalog .controls {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
    }
devsite-codelab-catalog .catalog-selector, devsite-codelab-catalog .category-selector, devsite-codelab-catalog .sort-controls {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1
    }
devsite-codelab-catalog .controls {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
    }
devsite-codelab-catalog .catalog-selector, devsite-codelab-catalog .category-selector {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-codelab-catalog .catalog-selector {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
    width: auto
    }
devsite-codelab-catalog .category-selector {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
    }
devsite-codelab-catalog[sortorder=-timestamp] .button[sortorder=-timestamp], devsite-codelab-catalog[sortorder=displaytitle] .button[sortorder=displaytitle], devsite-codelab-catalog[sortorder=durationminutes] .button[sortorder=durationminutes] {
    border-bottom: 2px solid;
    border-radius: 4px 4px 0 0
    }
@media screen and (max-width: 840px) {
    devsite-codelab-catalog .sort-controls {
        -webkit-box-flex: 0;
        -webkit-flex: 0 1 auto;
        -moz-box-flex: 0;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        padding-bottom: 16px;
        width: 100%
        }
    devsite-codelab-catalog .catalog-selector {
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
        }
    }
@media screen and (max-width: 600px) {
    devsite-codelab-catalog .catalog-selector {
        padding-bottom: 16px
        }
    devsite-codelab-catalog .category-selector {
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
        }
    }
devsite-concierge {
    bottom: 0;
    display: none;
    position: fixed;
    right: 0;
    top: var(--devsite-concierge-top, 48px);
    z-index: 1006
    }
[dir=rtl] devsite-concierge {
    left: 0;
    right: auto
    }
body[ready] devsite-concierge {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
body[ready][concierge=modal] devsite-concierge {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1014;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
.devsite-concierge-container {
    background: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    width: var(--devsite-concierge-width-closed, 54px)
    }
.devsite-concierge-container:before {
    --devsite-elevation-key-shadow-color: rgba(0, 0, 0, 0.3);
    --devsite-elevation-ambient-shadow-color: rgba(0, 0, 0, 0.15);
    content: "";
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 1px 3px 1px var(--devsite-elevation-ambient-shadow-color);
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: -1
    }
[dir=ltr] .devsite-concierge-container:before {
    -webkit-clip-path: inset(0 0 0 -3px);
    clip-path: inset(0 0 0 -3px)
    }
[dir=rtl] .devsite-concierge-container:before {
    -webkit-clip-path: inset(0 -3px 0 0);
    clip-path: inset(0 -3px 0 0)
    }
body[ready][concierge=modal] .devsite-concierge-container {
    height: 80vh;
    width: 80vw;
    border-radius: 8px;
    box-shadow: 0 1px 3px 0 var(--devsite-elevation-key-shadow-color), 0 4px 8px 3px var(--devsite-elevation-ambient-shadow-color)
    }
body[ready][concierge=modal] .devsite-concierge-container:before {
    display: none
    }
.devsite-concierge-menu {
    border-top: 1px solid #bdc1c6;
    -webkit-padding-before: 8px;
    padding-block-start: 8px;
    z-index: 1
    }
body[ready][concierge=modal] .devsite-concierge-menu {
    border-top: 0;
    border-radius: 8px 0 0 8px
    }
.devsite-concierge-panel {
    display: none;
    background: #fff;
    border-top: 1px solid #bdc1c6;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
    z-index: 2
    }
[dir=ltr] .devsite-concierge-panel {
    border-left: 1px solid #bdc1c6
    }
[dir=rtl] .devsite-concierge-panel {
    border-right: 1px solid #bdc1c6
    }
.devsite-concierge-panel > * {
    display: none
    }
.devsite-concierge-panel > [active] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
    }
body[ready][concierge=modal] .devsite-concierge-panel {
    border-radius: 0 8px 8px 0;
    border-top: 0
    }
.devsite-concierge-menu {
    overflow: visible
    }
.devsite-concierge-panel-open {
    width: var(--devsite-concierge-width-open, 355px)
    }
.devsite-concierge-panel-open .devsite-concierge-panel {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
    }
.devsite-concierge-menu-item {
    height: 56px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 56px
    }
.devsite-concierge-menu--hidden {
    display: none
    }
.devsite-concierge-menu-icon {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: transparent;
    border-radius: 50%;
    color: #5f6368;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 40px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    -webkit-transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 40px
    }
.devsite-concierge-menu-icon:active, .devsite-concierge-menu-icon:hover {
    background-color: #e5edfc;
    border-radius: 50%
    }
.devsite-concierge-menu-icon .material-icons {
    font-size: 20px
    }
.devsite-concierge-menu-item--selected .devsite-concierge-menu-icon {
    background-color: #e5edfc
    }
.devsite-concierge-menu-item--selected:after {
    background: #1967d2;
    content: "";
    height: 42px;
    position: absolute;
    top: 0;
    width: 4px
    }
[dir=ltr] .devsite-concierge-menu-item--selected:after {
    border-radius: 4px 0 0 4px;
    right: 0
    }
[dir=rtl] .devsite-concierge-menu-item--selected:after {
    border-radius: 0 4px 4px 0;
    left: 0
    }
.devsite-concierge-notification-dot {
    width: 10px;
    height: 10px;
    position: absolute;
    border-radius: 50%;
    background: #0b57d0;
    top: 2px;
    right: 8px;
    -webkit-animation-name: notificationDotAnimation;
    animation-name: notificationDotAnimation;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: 3;
    animation-iteration-count: 3
    }
@-webkit-keyframes notificationDotAnimation {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
        } 30% {
        -webkit-transform: scale3d(1.25, .75, 1);
        transform: scale3d(1.25, .75, 1)
        } 40% {
        -webkit-transform: scale3d(.75, 1.25, 1);
        transform: scale3d(.75, 1.25, 1)
        } 50% {
        -webkit-transform: scale3d(1.15, .85, 1);
        transform: scale3d(1.15, .85, 1)
        } 65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1)
        } 75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1)
        } to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
        }
    }
@keyframes notificationDotAnimation {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
        } 30% {
        -webkit-transform: scale3d(1.25, .75, 1);
        transform: scale3d(1.25, .75, 1)
        } 40% {
        -webkit-transform: scale3d(.75, 1.25, 1);
        transform: scale3d(.75, 1.25, 1)
        } 50% {
        -webkit-transform: scale3d(1.15, .85, 1);
        transform: scale3d(1.15, .85, 1)
        } 65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1)
        } 75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1)
        } to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
        }
    }
.devsite-concierge-notification {
    font-size: 12px;
    top: 8px;
    border-radius: 12px;
    white-space: nowrap;
    color: #fff;
    background: #0b57d0;
    padding: 0 12px;
    position: absolute;
    cursor: pointer;
    pointer-events: none;
    -webkit-animation: notifcationAnimation 0.5s ease-out 0.15s forwards;
    animation: notifcationAnimation 0.5s ease-out 0.15s forwards;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    opacity: 0
    }
[dir=ltr] .devsite-concierge-notification {
    right: calc(100% - 8px)
    }
[dir=rtl] .devsite-concierge-notification {
    left: calc(100% - 8px)
    }
@-webkit-keyframes notifcationAnimation {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(0) scaleX(1);
        transform: translateZ(0) scaleX(1)
        } to {
        opacity: 0;
        -webkit-transform: translate3d(12px, 0, 0) scale3d(.9, .9, .9);
        transform: translate3d(12px, 0, 0) scale3d(.9, .9, .9)
        }
    }
@keyframes notifcationAnimation {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(0) scaleX(1);
        transform: translateZ(0) scaleX(1)
        } to {
        opacity: 0;
        -webkit-transform: translate3d(12px, 0, 0) scale3d(.9, .9, .9);
        transform: translate3d(12px, 0, 0) scale3d(.9, .9, .9)
        }
    }
@media screen and (max-width: 840px) {
    body[ready] devsite-concierge, devsite-concierge {
        display: none
        }
    }
devsite-concierge-info-panel {
    --devsite-toc-border-width: 0;
    --devsite-nav-list-padding-x-start: 0
    }
devsite-concierge-info-panel .devsite-concierge-panel-header {
    padding: 12px 16px;
    border-bottom: 1px solid #dadce0
    }
devsite-concierge-info-panel .devsite-concierge-panel-header-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 2px
    }
devsite-concierge-info-panel .devsite-concierge-panel-header-row h2 {
    --devsite-h2-margin: 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
    -webkit-margin-end: 10px;
    -moz-margin-end: 10px;
    margin-inline-end: 10px
    }
devsite-concierge-info-panel .devsite-concierge-panel-header-row h3 {
    --devsite-h3-margin: 0;
    background: #feefe3;
    border-radius: 4px;
    color: #bf360c;
    font-family: Roboto;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    padding: 2px 6px;
    text-transform: uppercase
    }
devsite-concierge-info-panel .devsite-concierge-panel-header-button {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
    color: #5f6368;
    font-size: 20px;
    text-decoration: none;
    line-height: 28px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-concierge-info-panel .devsite-concierge-panel-header-button:active, devsite-concierge-info-panel .devsite-concierge-panel-header-button:focus, devsite-concierge-info-panel .devsite-concierge-panel-header-button:hover {
    background: #e8eaed
    }
devsite-concierge-info-panel .devsite-concierge-panel-sections {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    gap: 10px;
    overflow: auto;
    padding: 16px
    }
devsite-concierge-info-panel .devsite-concierge-panel-section {
    border: 1px solid #dadce0;
    border-radius: 8px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0
    }
[layout=docs] devsite-concierge-info-panel .devsite-concierge-panel-section h1, [layout=docs] devsite-concierge-info-panel .devsite-concierge-panel-section h2, [layout=docs] devsite-concierge-info-panel .devsite-concierge-panel-section h3, [layout=docs] devsite-concierge-info-panel .devsite-concierge-panel-section h4, [layout=docs] devsite-concierge-info-panel .devsite-concierge-panel-section h5, [layout=docs] devsite-concierge-info-panel .devsite-concierge-panel-section h6 {
    -webkit-margin-end: 0;
    -moz-margin-end: 0;
    margin-inline-end: 0;
    -webkit-padding-end: 0;
    -moz-padding-end: 0;
    padding-inline-end: 0
    }
devsite-concierge-info-panel .devsite-concierge-panel-section-header {
    border-bottom: 1px solid #dadce0;
    padding: 14px 16px
    }
devsite-concierge-info-panel .devsite-concierge-panel-section-content {
    padding: 16px
    }
devsite-concierge-info-panel .devsite-concierge-panel-section-fill {
    min-height: 200px;
    overflow: auto;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1
    }
devsite-concierge-info-panel .devsite-concierge-panel-feedback {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
    justify-self: flex-end;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -moz-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-concierge-info-panel .devsite-concierge-panel-section h3 {
    --devsite-h3-margin: 0;
    font-family: Roboto;
    font-weight: 700;
    font-size: 13px;
    line-height: 21px;
    color: #5f6368
    }
devsite-concierge-info-panel .devsite-concierge-panel-section p {
    font-family: Roboto;
    font-weight: 400;
    font-size: 13px;
    line-height: 21px;
    color: #202124;
    margin: 0
    }
[concierge=modal] devsite-concierge-info-panel .devsite-concierge-panel-close, [concierge=modal] devsite-concierge-info-panel .devsite-concierge-panel-fullscreen {
    display: none
    }
devsite-concierge-info-panel .devsite-concierge-panel-dock {
    display: none
    }
[concierge=modal] devsite-concierge-info-panel .devsite-concierge-panel-dock {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-concierge-info-panel .devsite-concierge-panel-section--loading {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 4px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
    }
@-webkit-keyframes pulse {
    0%, to {
        opacity: 1
        } 50% {
        opacity: .5
        }
    }
devsite-concierge-info-panel .devsite-concierge-panel-section--loading .devsite-concierge-panel-section-header {
    border-bottom: 1px solid transparent
    }
devsite-concierge-info-panel .devsite-concierge-panel-section--loading h2.devsite-concierge-panel-skeleton {
    height: 21px
    }
devsite-concierge-info-panel .devsite-concierge-panel-section--loading .devsite-concierge-panel-skeleton {
    background: var(--tenant-background-3);
    border-radius: 4px;
    margin: 0 0 4px;
    font-size: 13px;
    height: 21px;
    -webkit-animation: pulse 2s infinite;
    animation: pulse 2s infinite
    }
devsite-concierge-info-panel .devsite-concierge-panel-section--loading > .devsite-concierge-panel-skeleton:first-child {
    width: 100%
    }
devsite-concierge-info-panel .devsite-concierge-panel-section--loading > .devsite-concierge-panel-skeleton:nth-child(2) {
    width: 50%
    }
devsite-concierge-info-panel .devsite-concierge-panel-section--loading > .devsite-concierge-panel-skeleton:nth-child(3) {
    width: 33%
    }
devsite-concierge-info-panel .devsite-concierge-panel-section--loading > .devsite-concierge-panel-skeleton:nth-child(4) {
    width: 66%
    }
devsite-concierge-info-panel .devsite-concierge-panel-section--loading > .devsite-concierge-panel-skeleton:nth-child(5) {
    width: 25%
    }
devsite-concierge-info-panel .devsite-concierge-panel-section--loading > .devsite-concierge-panel-skeleton:nth-child(6) {
    width: 44%
    }
devsite-concierge-info-panel .devsite-concierge-info-panel-tags {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0
    }
devsite-concierge-info-panel .devsite-concierge-info-panel-tags li {
    background: #f1f3f4;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
    padding: 0 8px
    }
devsite-concierge-info-panel .devsite-concierge-info-panel-toggle-tags {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-top: 6px
    }
devsite-concierge-info-panel .devsite-concierge-info-panel-toggle-tags:active, devsite-concierge-info-panel .devsite-concierge-info-panel-toggle-tags:hover {
    text-decoration: none
    }
devsite-concierge-info-panel devsite-toc .devsite-nav-heading {
    display: none
    }
devsite-concierge-info-panel devsite-toc ul ul {
    --devsite-nav-list-padding-x-start: 12px
    }
@media screen and (max-width: 1253px) {
    devsite-concierge-info-panel devsite-toc.devsite-toc, devsite-concierge-info-panel devsite-toc[visible].devsite-toc {
        display: block
        }
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-header {
    padding: 12px 16px;
    border-bottom: 1px solid #dadce0
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-header-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 2px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-header-row h2 {
    --devsite-h2-margin: 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
    -webkit-margin-end: 10px;
    -moz-margin-end: 10px;
    margin-inline-end: 10px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-header-row h3 {
    --devsite-h3-margin: 0;
    background: #feefe3;
    border-radius: 4px;
    color: #bf360c;
    font-family: Roboto;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    padding: 2px 6px;
    text-transform: uppercase
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-header-button {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
    color: #5f6368;
    font-size: 20px;
    text-decoration: none;
    line-height: 28px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-header-button:active, devsite-concierge-recommendations-panel .devsite-concierge-panel-header-button:focus, devsite-concierge-recommendations-panel .devsite-concierge-panel-header-button:hover {
    background: #e8eaed
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-sections {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    gap: 10px;
    overflow: auto;
    padding: 16px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-section {
    border: 1px solid #dadce0;
    border-radius: 8px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0
    }
[layout=docs] devsite-concierge-recommendations-panel .devsite-concierge-panel-section h1, [layout=docs] devsite-concierge-recommendations-panel .devsite-concierge-panel-section h2, [layout=docs] devsite-concierge-recommendations-panel .devsite-concierge-panel-section h3, [layout=docs] devsite-concierge-recommendations-panel .devsite-concierge-panel-section h4, [layout=docs] devsite-concierge-recommendations-panel .devsite-concierge-panel-section h5, [layout=docs] devsite-concierge-recommendations-panel .devsite-concierge-panel-section h6 {
    -webkit-margin-end: 0;
    -moz-margin-end: 0;
    margin-inline-end: 0;
    -webkit-padding-end: 0;
    -moz-padding-end: 0;
    padding-inline-end: 0
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-section-header {
    border-bottom: 1px solid #dadce0;
    padding: 14px 16px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-section-content {
    padding: 16px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-section-fill {
    min-height: 200px;
    overflow: auto;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-feedback {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
    justify-self: flex-end;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -moz-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-section h3 {
    --devsite-h3-margin: 0;
    font-family: Roboto;
    font-weight: 700;
    font-size: 13px;
    line-height: 21px;
    color: #5f6368
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-section p {
    font-family: Roboto;
    font-weight: 400;
    font-size: 13px;
    line-height: 21px;
    color: #202124;
    margin: 0
    }
[concierge=modal] devsite-concierge-recommendations-panel .devsite-concierge-panel-close, [concierge=modal] devsite-concierge-recommendations-panel .devsite-concierge-panel-fullscreen {
    display: none
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-dock {
    display: none
    }
[concierge=modal] devsite-concierge-recommendations-panel .devsite-concierge-panel-dock {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-section--loading {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 4px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-section--loading .devsite-concierge-panel-section-header {
    border-bottom: 1px solid transparent
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-section--loading h2.devsite-concierge-panel-skeleton {
    height: 21px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-section--loading .devsite-concierge-panel-skeleton {
    background: var(--tenant-background-3);
    border-radius: 4px;
    margin: 0 0 4px;
    font-size: 13px;
    height: 21px;
    -webkit-animation: pulse 2s infinite;
    animation: pulse 2s infinite
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-section--loading > .devsite-concierge-panel-skeleton:first-child {
    width: 100%
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-section--loading > .devsite-concierge-panel-skeleton:nth-child(2) {
    width: 50%
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-section--loading > .devsite-concierge-panel-skeleton:nth-child(3) {
    width: 33%
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-section--loading > .devsite-concierge-panel-skeleton:nth-child(4) {
    width: 66%
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-section--loading > .devsite-concierge-panel-skeleton:nth-child(5) {
    width: 25%
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-section--loading > .devsite-concierge-panel-skeleton:nth-child(6) {
    width: 44%
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-section {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 476px;
    padding: 0
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-header {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid #dadce0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    padding: 12px 16px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-header-titles {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-header h2 {
    color: #5f6368;
    font-size: 16px;
    font-weight: 500;
    line-height: 21px;
    margin: 0
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-header h3 {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #e6f4ea;
    border-radius: 4px;
    color: #5f6368;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 12px;
    font-weight: 500;
    gap: 6px;
    line-height: 14px;
    margin: 0;
    padding: 3px 6px;
    text-transform: uppercase
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-header h3 .material-icons {
    font-size: 12px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat--reset, devsite-concierge-recommendations-panel .devsite-concierge-panel-chat--reset[disabled] {
    --devsite-button-color: #5f6368;
    --devsite-button-line-height: 21px;
    --devsite-button-border: 0;
    --devsite-button-disabled-border: 0;
    --devsite-button-disabled-line-height: 24px;
    min-width: auto
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-body {
    background: #f3f6fc;
    border-radius: 0 0 8px 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow: hidden;
    gap: 8px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-form {
    background: #fff;
    border-radius: 30px;
    border: 1px solid #dadce0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 4px;
    padding: 0;
    -webkit-padding-start: 18px;
    -moz-padding-start: 18px;
    padding-inline-start: 18px;
    margin-bottom: 8px;
    --devsite-input-border: 0;
    --devsite-input-padding: 0;
    --devsite-input-border-bottom-focus: 0;
    --devsite-input-padding-bottom-focus: 0;
    --devsite-input-height: 45px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-form[disabled] {
    background: var(--devsite-background-3)
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-header, devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-inputs {
    --devsite-button-border: 0;
    --devsite-button-padding: 0;
    --devsite-button-height: auto;
    --devsite-button-background-hover: 0;
    --devsite-button-border-hover: 0;
    --devsite-button-box-shadow-active: 0;
    --devsite-button-background-active: 0;
    --devsite-button-border-active: 0;
    --devsite-button-disabled-background: 0;
    --devsite-button-disabled-border: 0
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-inputs {
    padding: 0 16px 16px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-input {
    --devsite-input-border-radius: 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    font-size: 13px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-button {
    --devsite-button-background: 0
    }
[dir=rtl] devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-button {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-user-button {
    --devsite-button-padding: 0 16px;
    --devsite-button-border: 1px solid #dadce0;
    --devsite-button-border-hover: 1px solid #dadce0
    }
devsite-concierge-recommendations-panel p.devsite-concierge-panel-chat-disclaimer {
    color: rgba(0, 0, 0, 0.55);
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
    margin: 0;
    padding: 0;
    text-align: center
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: calc(var(--devsite-concierge-width-open) - 91px);
    padding: 16px 16px 0;
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow: scroll
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-loading, devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-requires-access {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    width: 100%
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-requires-access {
    text-align: center;
    gap: 8px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-requires-access h3 {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #202124
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-requires-access .button {
    --devsite-button-background: none;
    margin-top: 16px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-row {
    -webkit-animation: fadeInChatRow 0.5s;
    animation: fadeInChatRow 0.5s;
    margin: 8px 0
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-row:first-child {
    margin-top: 0
    }
@-webkit-keyframes fadeInChatRow {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 12px, 0);
        transform: translate3d(0, 12px, 0)
        } to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
        }
    }
@keyframes fadeInChatRow {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 12px, 0);
        transform: translate3d(0, 12px, 0)
        } to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
        }
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-from-system, devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-from-user, devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-quickprompt-questions {
    color: #3c4043;
    font-size: 13px;
    font-weight: 400;
    line-height: 17px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-from-system, devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-quickprompt-questions {
    background: #fff;
    border-radius: 8px;
    padding: 16px 0
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-quickprompt-questions {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    padding: 16px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-quickprompt-questions-icon {
    padding-top: 2px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-quickprompt-questions-icon svg {
    width: 16px;
    height: 16px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-from-system dd, devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-from-system ol, devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-from-system p, devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-from-system ul, devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-quickprompt-questions dd, devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-quickprompt-questions ol, devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-quickprompt-questions p, devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-quickprompt-questions ul {
    padding: 0 16px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-from-system ol, devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-from-system ul, devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-quickprompt-questions ol, devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-quickprompt-questions ul {
    -webkit-margin-start: 16px;
    -moz-margin-start: 16px;
    margin-inline-start: 16px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-references {
    padding: 16px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-references h3 {
    color: #80868b;
    font-size: 10px;
    line-height: 14px;
    font-weight: 500;
    text-transform: uppercase
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-references ul {
    padding: 0;
    -webkit-margin-start: 0;
    -moz-margin-start: 0;
    margin-inline-start: 0
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-references ul li {
    -webkit-margin-start: 0;
    -moz-margin-start: 0;
    margin-inline-start: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 0 2px;
    list-style: none
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-references ul li a {
    --devsite-link-color: #1967d2
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-quickprompt-questions ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    list-style: none;
    margin: 8px 0 0;
    padding: 0
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-quickprompt-questions ul li {
    line-height: 15px;
    margin: 0
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-quickprompt-questions a {
    font-size: 13px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-communicating {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 4px;
    padding: 0 16px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-communicating span {
    -webkit-animation: devsite-concierge-panel-chat-dot-blink 1.5s infinite;
    animation: devsite-concierge-panel-chat-dot-blink 1.5s infinite;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    background-color: #0b57d0;
    border-radius: 50%;
    height: 6px;
    opacity: 0;
    width: 6px
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-communicating span:nth-child(2) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-communicating span:nth-child(3) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s
    }
@-webkit-keyframes devsite-concierge-panel-chat-dot-blink {
    0%, to {
        opacity: .1
        } 20% {
        opacity: 1
        }
    }
@keyframes devsite-concierge-panel-chat-dot-blink {
    0%, to {
        opacity: .1
        } 20% {
        opacity: 1
        }
    }
devsite-concierge-recommendations-panel .devsite-concierge-panel-recommendations {
    min-height: 200px
    }
devsite-concierge-recommendations-panel devsite-recommended-content .devsite-recommended-content-list {
    --devsite-columns: 1;
    --devsite-card-border: 0;
    --devsite-item-gap: 0
    }
devsite-concierge-recommendations-panel devsite-recommended-content .devsite-recommended-content-item {
    --devsite-card-border: none;
    --devsite-card-border-radius: 0;
    padding: 16px;
    border-bottom: 1px solid #dadce0
    }
devsite-concierge-recommendations-panel devsite-recommended-content .devsite-recommended-content-item:last-child {
    border-bottom: 0
    }
devsite-concierge-recommendations-panel devsite-recommended-content h3.devsite-recommended-content-item-heading {
    min-height: auto
    }
[layout=docs] devsite-concierge-recommendations-panel devsite-recommended-content h3.devsite-recommended-content-item-heading {
    min-height: 0;
    -webkit-margin-end: 0;
    -moz-margin-end: 0;
    margin-inline-end: 0;
    -webkit-padding-end: 0;
    -moz-padding-end: 0;
    padding-inline-end: 0
    }
devsite-concierge-recommendations-panel devsite-recommended-content .devsite-recommended-content-item-description {
    min-height: auto
    }
devsite-concierge-recommendations-panel devsite-recommended-content .skeleton-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
    }
devsite-concierge-recommendations-panel devsite-recommended-content .skeleton-list .skeleton-item {
    --tenant-primary-border: none;
    width: 100%
    }
devsite-concierge-recommendations-panel pre code {
    font-size: 13px
    }
devsite-concierge-recommendations-panel devsite-code pre {
    --devsite-code-padding-inline: 16px
    }
[concierge=modal] devsite-concierge-recommendations-panel .devsite-concierge-panel-sections {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
    }
[concierge=modal] devsite-concierge-recommendations-panel .devsite-concierge-panel-recommendations {
    -webkit-flex-basis: 298px;
    -ms-flex-preferred-size: 298px;
    flex-basis: 298px
    }
[concierge=modal] devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-section {
    height: 100%;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1
    }
[concierge=modal] devsite-concierge-recommendations-panel .devsite-concierge-panel-chat-container {
    max-width: 100%
    }
devsite-content-footer {
    clear: both;
    color: var(--devsite-secondary-text-rgba);
    display: block;
    font: 13px/20px var(--devsite-primary-font-family)
    }
devsite-content-footer :link, devsite-content-footer :visited {
    color: var(--devsite-contrast-link-color)
    }
devsite-countdown {
    --devsite-countdown-box-height: 158px;
    --devsite-countdown-box-margin: 0 12px;
    --devsite-countdown-box-width: 220px;
    --devsite-countdown-display: flex;
    --devsite-countdown-gap: unset;
    --devsite-countdown-grid: unset;
    --devsite-countdown-label-font: 500 32px "Google Sans";
    --devsite-countdown-number-font: 700 64px/56px "Google Sans"
    }
@media screen and (max-width: 825px) {
    devsite-countdown {
        --devsite-countdown-box-height: 100px;
        --devsite-countdown-box-margin: 0;
        --devsite-countdown-box-width: 100%;
        --devsite-countdown-display: grid;
        --devsite-countdown-gap: 10px 18px;
        --devsite-countdown-grid: auto-flow/1fr 1fr;
        --devsite-countdown-label-font: 500 22px "Google Sans";
        --devsite-countdown-number-font: 700 44px/56px "Google Sans"
        }
    }
devsite-countdown {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: var(--devsite-countdown-display);
    gap: var(--devsite-countdown-gap);
    grid: var(--devsite-countdown-grid);
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 20px
    }
devsite-countdown .devsite-countdown-box {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid #dadce0;
    border-radius: 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: var(--devsite-countdown-box-height);
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: var(--devsite-countdown-box-margin);
    width: var(--devsite-countdown-box-width)
    }
devsite-countdown .devsite-countdown-number {
    font: var(--devsite-countdown-number-font)
    }
devsite-countdown .devsite-countdown-label {
    font: var(--devsite-countdown-label-font)
    }
devsite-credentials-dialog {
    border: 1px dashed #f439a0;
    cursor: pointer;
    padding: 2px
    }
.devsite-credentials-dialog .devsite-credentials-dialog-credentials, .devsite-credentials-dialog .devsite-credentials-dialog-oauth-message, .devsite-credentials-dialog .devsite-credentials-dialog-projects {
    margin-top: 16px
    }
.devsite-credentials-dialog devsite-spinner {
    margin: auto
    }
.devsite-credentials-dialog .devsite-credentials-dialog-selector {
    width: 100%
    }
devsite-cse {
    display: block
    }
devsite-cse table {
    border-collapse: inherit;
    margin: 0
    }
devsite-cse tr {
    background: var(--devsite-background-1);
    border: 0
    }
devsite-cse td {
    padding: 0
    }
devsite-cse .gsc-control-cse, devsite-cse .gsc-control-cse .gsc-table-result {
    background: 0;
    border: 0;
    font: 400 16px/24px var(--devsite-primary-font-family);
    padding: 0
    }
devsite-cse .gsc-above-wrapper-area {
    display: none
    }
devsite-cse .gsc-results {
    width: 100%
    }
devsite-cse .has-cse-filter .gsc-webResult.gsc-result:has(.gs-spelling) {
    display: none
    }
devsite-cse .gsc-results .gsc-imageResult, devsite-cse .gsc-webResult.gsc-result, devsite-cse .gsc-webResult.gsc-result:hover {
    background: 0
    }
devsite-cse .gsc-results .gsc-cursor-box {
    margin: 8px 0
    }
devsite-cse .gsc-table-result, devsite-cse .gsc-thumbnail-inside, devsite-cse .gsc-url-top {
    padding-left: 0;
    padding-right: 0
    }
devsite-cse .gs-error-result .gs-snippet, devsite-cse .gs-no-results-result .gs-snippet, devsite-cse .gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet {
    color: var(--devsite-primary-text-color)
    }
devsite-cse .gs-error-result .gs-snippet, devsite-cse .gs-no-results-result .gs-snippet {
    background: 0;
    border: 0;
    margin: 0;
    padding: 0
    }
devsite-cse .gcsc-find-more-on-google {
    margin: 0
    }
devsite-cse .has-cse-filter .gcsc-find-more-on-google {
    display: none
    }
devsite-cse .gcsc-find-more-on-google, devsite-cse .gsc-control-cse .gs-imageResult a.gs-title:link, devsite-cse .gsc-control-cse .gs-imageResult a.gs-title:link b, devsite-cse .gsc-control-cse .gs-imageResult a.gs-title:visited, devsite-cse .gsc-control-cse .gs-imageResult a.gs-title:visited b, devsite-cse .gsc-control-cse .gs-result .gs-title, devsite-cse .gsc-control-cse .gs-result .gs-title *, devsite-cse .gsc-control-cse .gs-webResult.gs-result a.gs-title:link, devsite-cse .gsc-control-cse .gs-webResult.gs-result a.gs-title:link b, devsite-cse .gsc-control-cse .gs-webResult.gs-result a.gs-title:visited, devsite-cse .gsc-control-cse .gs-webResult.gs-result a.gs-title:visited b {
    color: var(--devsite-link-color);
    font: 500 16px/24px var(--devsite-primary-font-family);
    height: auto;
    text-decoration: none
    }
devsite-cse .gcsc-find-more-on-google-magnifier {
    fill: var(--devsite-link-color)
    }
devsite-cse .gsc-results .gsc-cursor-box .gsc-cursor-page {
    background: 0;
    border-color: transparent;
    color: var(--devsite-link-color)
    }
devsite-cse .gsc-control-cse .gs-imageResult a.gs-title:focus, devsite-cse .gsc-control-cse .gs-result .gs-title:focus, devsite-cse .gsc-control-cse .gs-webResult.gs-result a.gs-title:focus {
    text-decoration: underline
    }
devsite-cse .gsc-control-cse .gs-result .gs-title b {
    font-weight: 700
    }
devsite-cse .gs-imageResult div.gs-visibleUrl, devsite-cse .gs-webResult div.gs-visibleUrl {
    color: var(--devsite-search-results-breadcrumb-color);
    font-size: 14px
    }
devsite-cse .gcsc-branding {
    display: none
    }
devsite-device {
    display: block;
    margin: 16px 0
    }
devsite-device > .devsite-device-options {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 12px;
    margin: 0 0 24px
    }
devsite-device .devsite-device-input {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 0 24px
    }
devsite-device .devsite-device-input > input {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-inline: 0 16px
    }
devsite-device [type=radio], devsite-device [type=radio]:after, devsite-device [type=radio]:before {
    display: none
    }
devsite-device [type=radio] + label {
    border: var(--devsite-primary-border);
    box-shadow: none;
    font: 500 14px/36px var(--devsite-headline-font-family);
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 16px;
    color: var(--devsite-link-color);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 32px;
    padding: 0 16px;
    -webkit-transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
    transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s
    }
devsite-device [type=radio] + label:focus, devsite-device [type=radio] + label:hover {
    background: var(--devsite-link-background-active)
    }
devsite-device [type=radio]:checked + label {
    background: var(--devsite-link-color);
    border-color: var(--devsite-link-color);
    color: var(--devsite-inverted-text-color)
    }
devsite-device > .devsite-device {
    overflow: hidden;
    position: relative
    }
devsite-device[device=desktop] > .devsite-device {
    max-width: 100%;
    padding-bottom: 62.5%
    }
devsite-device[device=tablet] > .devsite-device {
    max-width: 60%;
    padding-bottom: 80%
    }
devsite-device[device=mobile] > .devsite-device {
    max-width: 32.109375%;
    padding-bottom: 57.109375%
    }
devsite-device iframe {
    background: var(--devsite-background-1);
    border: solid var(--devsite-device-border-color);
    height: 166.666667%;
    position: absolute;
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    width: 166.666667%
    }
[dir=ltr] devsite-device iframe {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
    }
[dir=rtl] devsite-device iframe {
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0
    }
devsite-device[device=desktop] iframe {
    border-radius: 16px;
    border-width: 32px 16px
    }
devsite-device[device=tablet] iframe {
    border-radius: 24px;
    border-width: 60px 16px
    }
devsite-device[device=mobile] iframe {
    border-radius: 36px;
    border-width: 60px 12px
    }
devsite-dropdown-list:not([ready]) {
    background: 0;
    visibility: hidden;
    position: relative;
    z-index: 2
    }
devsite-dropdown-list[ready] {
    visibility: visible
    }
devsite-dynamic-content {
    display: block;
    width: 100%
    }
.devsite-dynamic-content-display-tag-container {
    list-style: none;
    padding: 12px 0
    }
.devsite-dynamic-content-display-tag-container:empty {
    display: none
    }
devsite-dynamic-content .devsite-card-progress {
    background: var(--devsite-progress-background);
    height: 2px;
    margin: 0 -16px;
    overflow: hidden;
    width: auto
    }
devsite-dynamic-content .devsite-card-progress-bar {
    background: var(--devsite-progress-bar-color);
    height: 2px;
    -webkit-transform: translatex(-101%);
    transform: translatex(-101%);
    -webkit-transition: background 0.213s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.213s cubic-bezier(0, 0, 0.2, 1);
    transition: background 0.213s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.213s cubic-bezier(0, 0, 0.2, 1);
    transition: transform 0.213s cubic-bezier(0, 0, 0.2, 1), background 0.213s cubic-bezier(0, 0, 0.2, 1);
    transition: transform 0.213s cubic-bezier(0, 0, 0.2, 1), background 0.213s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.213s cubic-bezier(0, 0, 0.2, 1)
    }
devsite-dynamic-content .devsite-card-progress-info {
    font: 13px/20px var(--devsite-primary-font-family);
    margin-top: 2px;
    opacity: 0;
    -webkit-transform: translatey(12px);
    transform: translatey(12px);
    -webkit-transition: opacity 0.213s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.213s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.213s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.213s cubic-bezier(0.4, 0, 1, 1);
    transition: transform 0.213s cubic-bezier(0.4, 0, 1, 1), opacity 0.213s cubic-bezier(0.4, 0, 1, 1);
    transition: transform 0.213s cubic-bezier(0.4, 0, 1, 1), opacity 0.213s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.213s cubic-bezier(0.4, 0, 1, 1)
    }
devsite-dynamic-content .devsite-card-progress-info.show {
    opacity: 1;
    -webkit-transform: translatey(0);
    transform: translatey(0);
    -webkit-transition: opacity 0.213s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.213s cubic-bezier(0, 0, 0.2, 1);
    transition: opacity 0.213s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.213s cubic-bezier(0, 0, 0.2, 1);
    transition: transform 0.213s cubic-bezier(0, 0, 0.2, 1), opacity 0.213s cubic-bezier(0, 0, 0.2, 1);
    transition: transform 0.213s cubic-bezier(0, 0, 0.2, 1), opacity 0.213s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.213s cubic-bezier(0, 0, 0.2, 1)
    }
devsite-dynamic-content .devsite-card-progress-info:empty:before {
    content: " "
    }
.devsite-dynamic-content-display-tag {
    background: var(--devsite-background-3);
    border-radius: var(--devsite-display-tag-border-radius);
    color: var(--devsite-display-tag-color, var(--devsite-secondary-text-color));
    display: inline-block;
    margin-block: 0 12px;
    margin-inline: 0 4px
    }
devsite-dynamic-content .devsite-label-confidential {
    font: 500 11px/16px var(--devsite-primary-font-family);
    letter-spacing: 0.8px;
    background: var(--devsite-caution-notice-background);
    border-radius: var(--devsite-label-border-radius, 4px);
    color: var(--devsite-caution-notice-color);
    display: inline-block;
    margin-block: 0 8px;
    padding-block: 5px 3px;
    padding-inline: 8px;
    text-transform: uppercase
    }
devsite-dynamic-content .devsite-dynamic-content-no-results {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--devsite-background-1);
    border: var(--devsite-secondary-border);
    border-radius: var(--devsite-card-border-radius);
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 32px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-width: 100%;
    padding: 25px 55px;
    width: 100%
    }
devsite-dynamic-content .devsite-dynamic-content-no-results-image {
    display: var(--devsite-dynamic-content-no-results-image-display, block);
    max-width: 100%;
    width: 250px
    }
devsite-dynamic-content devsite-pagination {
    margin-top: 20px
    }
devsite-dynamic-hero {
    display: none
    }
devsite-dynamic-hero img {
    object-fit: contain;
    padding: 50px
    }
devsite-dynamic-hero .scale-down img {
    max-height: 180px;
    object-fit: scale-down;
    padding: 0
    }
devsite-dynamic-hero a:focus {
    text-decoration: none
    }
devsite-dynamic-hero .devsite-landing-row-item-description-content {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis
    }
devsite-dynamic-hero .devsite-landing-row-item-image .material-icons {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 190px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 55px
    }
.dgc-hero.fade-in {
    -webkit-animation: dynamic-hero-fade-in 1s;
    animation: dynamic-hero-fade-in 1s;
    background: url(../images/dynamic-hero-background.svg) 100%/contain no-repeat;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
[appearance=dark] .dgc-hero.fade-in {
    background-image: url(../images/dynamic-hero-background-dark.svg)
    }
.dgc-hero.fade-in devsite-dynamic-hero {
    display: block
    }
.dgc-hero.fade-out {
    -webkit-animation: dynamic-hero-fade-out 0.5s forwards;
    animation: dynamic-hero-fade-out 0.5s forwards
    }
.dgc-dynamic-hero {
    display: none
    }
@media screen and (max-width: 840px) {
    .dgc-hero.fade-in {
        background-image: url(../images/dynamic-hero-background-cropped.svg)
        }
    [appearance=dark] .dgc-hero.fade-in {
        background-image: url(../images/dynamic-hero-background-dark-cropped.svg)
        }
    devsite-dynamic-hero .devsite-landing-row-item-image .material-icons, devsite-dynamic-hero img {
        padding: 0 30px 0 0
        }
    devsite-dynamic-hero .devsite-landing-row-item-description-content {
        -webkit-line-clamp: 3;
        max-width: 100%
        }
    }
@media screen and (max-width: 600px) {
    .dgc-hero.fade-in {
        background: unset
        }
    [appearance=dark] .dgc-hero.fade-in {
        background: unset
        }
    devsite-dynamic-hero .devsite-landing-row-item-image .material-icons, devsite-dynamic-hero img {
        padding: 0
        }
    }
@-webkit-keyframes dynamic-hero-fade-in {
    0% {
        opacity: 0
        } to {
        opacity: 1
        }
    }
@keyframes dynamic-hero-fade-in {
    0% {
        opacity: 0
        } to {
        opacity: 1
        }
    }
@-webkit-keyframes dynamic-hero-fade-out {
    0% {
        opacity: 1
        } to {
        opacity: 0
        }
    }
@keyframes dynamic-hero-fade-out {
    0% {
        opacity: 1
        } to {
        opacity: 0
        }
    }
.pac-container {
    z-index: 2000
    }
devsite-edit-profile {
    display: grid;
    grid: auto/calc(50% - 12px) calc(50% - 12px);
    margin-block: 0 18px;
    margin-inline: 24px;
    gap: 20px
    }
devsite-edit-profile .waiting-container {
    margin: auto
    }
devsite-edit-profile .devsite-edit-profile-error-incorrect, devsite-edit-profile .devsite-edit-profile-error-missing {
    display: none;
    color: #e53935;
    font-size: 12px;
    margin: 2px 0 0 14px
    }
devsite-edit-profile .devsite-edit-profile-textarea {
    grid-column: 1/3;
    min-height: 110px
    }
devsite-edit-profile .devsite-edit-profile-input {
    display: block;
    position: relative;
    min-height: 86px
    }
devsite-edit-profile .devsite-edit-profile-input[incorrect] .devsite-edit-profile-error-incorrect, devsite-edit-profile .devsite-edit-profile-input[missing] .devsite-edit-profile-error-missing {
    display: inline-block
    }
devsite-edit-profile .devsite-edit-profile-input-length, devsite-edit-profile .devsite-edit-profile-private-chip {
    color: var(--devsite-secondary-text-color);
    font-size: 12px;
    font-weight: 500;
    margin: 2px 0 0 14px;
    display: inline-block
    }
devsite-edit-profile .devsite-edit-profile-input-length .material-symbols-outlined, devsite-edit-profile .devsite-edit-profile-private-chip .material-symbols-outlined {
    font-size: 12px;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
    top: 2px;
    position: relative
    }
devsite-edit-profile.devsite-edit-profile-small {
    grid: auto/auto
    }
devsite-edit-profile.devsite-edit-profile-small .devsite-edit-profile-textarea {
    grid-column: unset
    }
devsite-expandable {
    display: block;
    min-height: 24px
    }
devsite-expandable:not([expanded]) > :not(.showalways):not(.expand-control):not(.exw-control) {
    display: none
    }
devsite-expandable .exw-control > h2.showalways {
    margin: 40px 0 20px;
    padding-bottom: 7px
    }
devsite-expandable .exw-control > h3.showalways {
    margin: 34px 0 20px
    }
devsite-expandable .exw-control > h4.showalways {
    margin: 36px 0 20px
    }
devsite-expandable .expand-control:not(button):not(.button) {
    color: var(--devsite-link-color);
    cursor: pointer
    }
devsite-expandable a.exw-control:active, devsite-expandable a.exw-control:focus, devsite-expandable a.exw-control:hover {
    color: var(--devsite-link-color);
    cursor: pointer;
    outline: 0;
    text-decoration: none
    }
devsite-expandable a.exw-control > .showalways:before {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--devsite-secondary-text-color);
    content: "add_circle";
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal;
    height: 20px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-margin-end: 12px;
    -moz-margin-end: 12px;
    margin-inline-end: 12px;
    -webkit-transform: translate3d(0, -1px, 0);
    transform: translate3d(0, -1px, 0);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle;
    width: 20px
    }
devsite-expandable.arrow-icon a.exw-control > .showalways:before {
    content: "chevron_right"
    }
[dir=rtl] devsite-expandable.arrow-icon a.exw-control > .showalways:before {
    content: "chevron_left"
    }
devsite-expandable .exw-control > h2.showalways:before {
    -webkit-transform: translate3d(0, -2px, 0);
    transform: translate3d(0, -2px, 0)
    }
devsite-expandable[expanded] > a.exw-control > .showalways:before {
    content: "remove_circle"
    }
devsite-expandable.arrow-icon[expanded] > a.exw-control > .showalways:before {
    content: "keyboard_arrow_down"
    }
devsite-expandable a.exw-control:focus > .showalways:before, devsite-expandable a.exw-control:hover > .showalways:before {
    color: var(--devsite-link-color)
    }
devsite-expandable .collapse-content-msg, devsite-expandable[expanded] .expand-content-msg {
    display: none
    }
devsite-expandable[expanded] .collapse-content-msg {
    display: inline
    }
devsite-content devsite-expandable devsite-expandable {
    margin-left: 40px
    }
devsite-extradory {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
    }
devsite-extradory .devsite-extra-dory-iframe {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-extradory .devsite-extra-dory-iframe iframe {
    width: 100%;
    height: 100%;
    border: 0
    }
devsite-extradory h2 {
    font-size: 24px;
    color: #424242;
    text-align: center;
    line-height: 32px;
    margin: 0;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center
    }
devsite-extradory .devsite-extradory-create-profile {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center
    }
devsite-extradory .devsite-extradory-step1, devsite-extradory .devsite-extradory-step2, devsite-extradory .devsite-extradory-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    width: 100%;
    padding: 20px
    }
devsite-extradory .devsite-extradory-create-profile {
    margin-top: 26px
    }
devsite-extradory p {
    font-size: 16px;
    color: #424242;
    line-height: 24px
    }
devsite-extradory .devsite-extradory-cta label, devsite-extradory .devsite-extradory-cta p {
    font-size: 14px;
    color: #424242;
    line-height: 29px;
    margin: 0
    }
devsite-extradory .devsite-extradory-buttons, devsite-extradory .devsite-extradory-join-group, devsite-extradory .devsite-extradory-try-again-buttons {
    margin-top: 36px
    }
devsite-extradory .devsite-extradory-spinner {
    padding: 64px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%
    }
devsite-extradory .devsite-extradory-try-again-buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%
    }
devsite-extradory .devsite-extradory-authorize, devsite-extradory .devsite-extradory-change-account, devsite-extradory .devsite-extradory-join-group, devsite-extradory .devsite-extradory-not-eligible, devsite-extradory .devsite-extradory-sign-in, devsite-extradory .devsite-extradory-try-again {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center
    }
.devsite-fast-track-creator-dialog {
    padding: 24px
    }
devsite-fast-track-profile-creator label {
    font-size: 16px
    }
devsite-fast-track-profile-creator h4 {
    margin: 0 0 10px
    }
devsite-fast-track-profile-creator .sub-text {
    color: var(--devsite-secondary-text-color);
    font: 400 12px/16px var(--devsite-primary-font-family);
    letter-spacing: 0.3px;
    -webkit-padding-start: 16px;
    -moz-padding-start: 16px;
    padding-inline-start: 16px;
    margin: 5px 0 20px
    }
devsite-fast-track-profile-creator .tos {
    margin: 12px 0 24px
    }
devsite-fast-track-profile-creator devsite-spinner {
    margin-right: 8px
    }
devsite-fast-track-profile-creator .devsite-devprofile-callout-buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end
    }
devsite-feature-tooltip:not([ready]) > [slot] {
    display: none
    }
devsite-feature-tooltip {
    display: block
    }
devsite-feature-tooltip [slot].step {
    display: none
    }
devsite-feature-tooltip [slot].step.current {
    display: block
    }
devsite-dialog.devsite-feedback .devsite-dialog-contents {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0
    }
devsite-dialog.devsite-feedback h3 {
    margin: 0 0 20px;
    padding: 16px 16px 0
    }
devsite-dialog.devsite-feedback .devsite-feedback-items {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 6px
    }
devsite-dialog.devsite-feedback .devsite-feedback-item {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--devsite-secondary-text-color);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 0;
    -moz-box-flex: 1;
    -ms-flex: 1 0 0;
    flex: 1 0 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-decoration: none
    }
devsite-dialog.devsite-feedback .devsite-feedback-item-type {
    color: var(--devsite-link-color)
    }
devsite-dialog.devsite-feedback .devsite-feedback-item:focus > .devsite-feedback-item-type {
    text-decoration: underline
    }
devsite-dialog.devsite-feedback .devsite-feedback-item-icon-container {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 48px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 8px 0;
    width: 48px
    }
devsite-dialog.devsite-feedback .devsite-feedback-item-icon-color {
    background-color: var(--devsite-feedback-icon-background, var(--devsite-primary-color, var(--devsite-primary-text-color)));
    border-radius: 50%;
    color: var(--devsite-inverted-text-color)
    }
devsite-dialog.devsite-feedback .devsite-feedback-item-icon {
    font-size: 32px
    }
devsite-dialog.devsite-feedback .devsite-feedback-item-icon-container img {
    max-width: 100%
    }
devsite-dialog.devsite-feedback .devsite-feedback-notice, devsite-dialog.devsite-feedback .devsite-feedback-support {
    padding: 16px 16px 0;
    text-align: center
    }
devsite-dialog.devsite-feedback .devsite-feedback-support-icon {
    font-size: 18px;
    margin-right: 4px;
    vertical-align: middle
    }
devsite-dialog.devsite-feedback .devsite-feedback-support-icon + span {
    vertical-align: middle
    }
devsite-dialog.devsite-feedback .devsite-feedback-buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
    }
devsite-filter {
    display: block
    }
.devsite-filter-input, devsite-filter input[type=text] {
    --devsite-input-width: 100%
    }
devsite-filter > .devsite-table-wrapper:first-child > table {
    margin-top: 0
    }
devsite-filter [results-count-container] {
    color: var(--devsite-filter-results-count-color);
    font-family: var(--devsite-filter-results-count-font-family)
    }
devsite-filter[sortable] th:hover {
    cursor: pointer
    }
devsite-filter th[sort-ascending], devsite-filter th[sort-descending] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
    }
devsite-filter th[sort-ascending]:after, devsite-filter th[sort-descending]:after {
    content: "arrow_drop_down";
    display: inline-block;
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal;
    margin: -2px 0 0;
    position: absolute;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
    vertical-align: middle
    }
devsite-filter th[sort-descending]:after {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
    }
devsite-filter[hide-if-empty][empty] {
    display: none
    }
devsite-filter[highlight] mark {
    background-color: #ffe168
    }
devsite-filter[highlight] mark:after, devsite-filter[highlight] mark:before {
    -webkit-clip-path: inset(100%);
    clip-path: inset(100%);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px
    }
devsite-filter[highlight] mark:before {
    content: " [highlight start] "
    }
devsite-filter[highlight] mark:after {
    content: " [highlight end] "
    }
devsite-filter .devsite-filter-input-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    position: relative
    }
devsite-filter .devsite-filter-clear-button {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--devsite-searchbox-placeholder, var(--devsite-secondary-text-color));
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font: normal normal normal 14px/1 Material Icons;
    height: var(--devsite-input-height, 36px);
    inset-inline: auto 0;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    outline: 0;
    position: absolute;
    width: var(--devsite-input-height, 36px)
    }
devsite-filter .devsite-filter-clear-button:before {
    content: "close"
    }
devsite-filter .devsite-filter-clear-button:focus:before, devsite-filter .devsite-filter-clear-button:hover:before {
    background: var(--devsite-background-5);
    border-radius: 50%;
    padding: 4px
    }
devsite-footer-linkboxes {
    background: var(--devsite-footer-background, var(--devsite-background-1));
    color: var(--devsite-footer-color);
    display: block;
    padding: var(--devsite-footer-linkboxes-padding)
    }
devsite-footer-linkboxes .devsite-footer-linkboxes-list {
    border-bottom: var(--devsite-primary-border);
    display: grid;
    grid-gap: 24px;
    grid-template-columns: var(--devsite-footer-linkboxes-grid-template-columns);
    list-style: none;
    padding: 24px 0
    }
devsite-footer-linkboxes .devsite-footer-linkbox {
    margin: 0
    }
devsite-footer-linkboxes .devsite-footer-linkbox-heading {
    text-transform: var(--devsite-footer-heading-text-transform)
    }
devsite-footer-linkboxes .devsite-footer-linkbox-list {
    list-style-type: none;
    padding: 0
    }
devsite-footer-linkboxes .devsite-footer-linkbox-item {
    margin: 0
    }
devsite-footer-linkboxes .devsite-footer-linkbox-link {
    color: var(--devsite-footer-link-color, var(--devsite-primary-text-color));
    display: inline-block;
    padding: 8px 0
    }
devsite-footer-linkboxes .devsite-footer-linkbox-link:focus, devsite-footer-linkboxes .devsite-footer-linkbox-link:hover {
    color: var(--devsite-footer-link-hover, var(--devsite-link-color));
    font-weight: var(--devsite-footer-link-font-weight-hover);
    text-decoration: none
    }
devsite-footer-linkboxes .devsite-footer-linkbox-description {
    color: var(--devsite-secondary-text-color);
    margin: 0 0 16px
    }
devsite-footer-linkboxes .devsite-footer-linkbox-icon {
    margin-block: 0 4px
    }
devsite-footer-promos {
    background: var(--devsite-footer-background, var(--devsite-background-1));
    border-top: var(--devsite-footer-border, var(--devsite-primary-border));
    color: var(--devsite-footer-color);
    display: block;
    font: 14px/20px var(--devsite-primary-font-family);
    padding: 0 24px
    }
devsite-footer-promos .devsite-footer-promos-list {
    border-bottom: var(--devsite-primary-border);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0 24px;
    list-style: none;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding: 18px 0
    }
devsite-footer-promos .devsite-footer-promo {
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 192px;
    -moz-box-flex: 0;
    -ms-flex: 0 1 192px;
    flex: 0 1 192px;
    margin: 20px 0;
    text-align: center
    }
devsite-footer-promos .devsite-footer-promo-icon {
    color: var(--devsite-text-color, var(--devsite-primary-text-rgba));
    display: block;
    font-size: 48px;
    height: 48px;
    margin-block: 0 8px;
    margin-inline: auto;
    width: 48px
    }
devsite-footer-promos .devsite-footer-promo-title {
    color: var(--devsite-footer-heading-color, var(--devsite-primary-text-rgba));
    display: block;
    font: var(--devsite-footer-heading-font);
    font-weight: var(--devsite-footer-heading-font-weight, 500)
    }
devsite-footer-promos .devsite-footer-promo-title:focus, devsite-footer-promos .devsite-footer-promo-title:hover {
    color: var(--devsite-footer-link-hover, var(--devsite-link-color));
    font-weight: var(--devsite-footer-link-font-weight-hover);
    text-decoration: none
    }
@media screen and (max-width: 1253px) {
    .devsite-main-content[has-book-nav] ~ devsite-footer-promos .devsite-footer-promos-list {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: unset;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
        }
    .devsite-main-content[has-book-nav] ~ devsite-footer-promos .devsite-footer-promo {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        padding-block: 0;
        padding-inline: 20px
        }
    }
@media screen and (max-width: 840px) {
    .devsite-main-content[has-book-nav] ~ devsite-footer-promos .devsite-footer-promos-list, devsite-footer-promos .devsite-footer-promos-list {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        padding: 12px 0
        }
    .devsite-main-content[has-book-nav] ~ devsite-footer-promos .devsite-footer-promo, devsite-footer-promos .devsite-footer-promo {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        margin: 0;
        padding-block: 8px;
        padding-inline: 0;
        text-align: start
        }
    devsite-footer-promos .devsite-footer-promo-icon {
        height: 32px;
        margin-block: 0;
        margin-inline: 0 8px;
        width: 32px
        }
    devsite-footer-promos .devsite-footer-promo-title {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        font-weight: 400
        }
    devsite-footer-promos .devsite-footer-promo-description {
        display: none
        }
    }
@media screen and (max-width: 600px) {
    devsite-footer-promos {
        padding: 0 16px
        }
    devsite-footer-promos .devsite-footer-promos-list {
        display: block
        }
    }
devsite-footer-utility {
    background: var(--devsite-footer-background, var(--devsite-background-1));
    color: var(--devsite-footer-color);
    display: block;
    font: 400 14px/16px var(--devsite-primary-font-family);
    padding: 0 24px
    }
devsite-footer-utility .devsite-footer-sites-list, devsite-footer-utility .devsite-footer-sites-logo-link, devsite-footer-utility .devsite-footer-utility-button, devsite-footer-utility .devsite-footer-utility-item, devsite-footer-utility .devsite-footer-utility-list, devsite-footer-utility nav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-footer-utility .devsite-footer-utility-button, devsite-footer-utility .devsite-footer-utility-list, devsite-footer-utility nav {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
    }
devsite-footer-utility nav {
    gap: 16px;
    padding: 24px 0
    }
devsite-footer-utility .devsite-footer-sites, devsite-footer-utility .devsite-footer-sites-list {
    gap: 0 40px
    }
devsite-footer-utility .devsite-footer-sites {
    -webkit-border-after: var(--devsite-primary-border);
    border-block-end: var(--devsite-primary-border);
    padding: 24px 0 23px
    }
devsite-footer-utility .devsite-footer-sites-list, devsite-footer-utility .devsite-footer-utility-list {
    list-style: none;
    padding: 0
    }
devsite-footer-utility .devsite-footer-sites-item, devsite-footer-utility .devsite-footer-utility-item {
    margin: 0
    }
devsite-footer-utility .devsite-footer-sites-link {
    color: var(--devsite-primary-text-color);
    display: block;
    padding: 8px 0
    }
devsite-footer-utility .devsite-footer-sites-link:focus, devsite-footer-utility .devsite-footer-sites-link:hover {
    color: var(--devsite-link-color);
    text-decoration: none
    }
devsite-footer-utility .devsite-footer-sites-logo {
    height: 32px;
    margin-top: -4px;
    width: 185px
    }
devsite-footer-utility .devsite-footer-utility-links, devsite-footer-utility .devsite-footer-utility-list {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
    }
devsite-footer-utility .devsite-footer-utility-list {
    gap: 16px 8px;
    -webkit-box-flex: var(--devsite-footer-utility-list-flex, 1);
    -webkit-flex: var(--devsite-footer-utility-list-flex, 1);
    -moz-box-flex: var(--devsite-footer-utility-list-flex, 1);
    -ms-flex: var(--devsite-footer-utility-list-flex, 1);
    flex: var(--devsite-footer-utility-list-flex, 1);
    min-height: 36px
    }
devsite-footer-utility .devsite-footer-utility-link {
    color: var(--devsite-footer-link-color, var(--devsite-primary-text-color))
    }
devsite-footer-utility .devsite-footer-utility-link:focus, devsite-footer-utility .devsite-footer-utility-link:hover {
    color: var(--devsite-footer-link-hover, var(--devsite-link-color))
    }
devsite-footer-utility a:focus, devsite-footer-utility a:hover {
    font-weight: var(--devsite-footer-link-font-weight-hover)
    }
devsite-footer-utility .devsite-footer-utility-item {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto
    }
devsite-footer-utility .devsite-footer-utility-item-centered {
    margin: 0 auto
    }
devsite-footer-utility .devsite-footer-utility-button {
    gap: 0 16px;
    line-height: 20px;
    margin-inline: auto 0
    }
devsite-footer-utility .devsite-footer-utility-button > a:focus {
    text-decoration: none
    }
devsite-footer-utility .devsite-footer-utility-item:before {
    content: "|";
    -webkit-margin-end: 8px;
    -moz-margin-end: 8px;
    margin-inline-end: 8px
    }
devsite-footer-utility .devsite-footer-utility-button:before, devsite-footer-utility .devsite-footer-utility-item-centered:before, devsite-footer-utility .devsite-footer-utility-item-no-marker:before, devsite-footer-utility .devsite-footer-utility-item:first-child:before {
    content: "";
    -webkit-margin-end: 0;
    -moz-margin-end: 0;
    margin-inline-end: 0
    }
devsite-footer-utility devsite-language-selector {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
    margin: var(--devsite-language-selector-margin, 0)
    }
@media screen and (max-width: 1253px) {
    [has-book-nav] ~ devsite-footer-utility .devsite-footer-sites, [has-book-nav] ~ devsite-footer-utility .devsite-footer-sites-list {
        -webkit-box-align: start;
        -webkit-align-items: start;
        -moz-box-align: start;
        -ms-flex-align: start;
        align-items: start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
        }
    [has-book-nav] ~ devsite-footer-utility .devsite-footer-sites {
        gap: 16px 0
        }
    }
@media screen and (max-width: 840px) {
    devsite-footer-utility .devsite-footer-sites, devsite-footer-utility .devsite-footer-sites-list {
        -webkit-box-align: start;
        -webkit-align-items: start;
        -moz-box-align: start;
        -ms-flex-align: start;
        align-items: start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
        }
    devsite-footer-utility .devsite-footer-sites {
        gap: 16px 0
        }
    devsite-footer-utility .devsite-footer-utility-list {
        -webkit-box-flex: 100%;
        -webkit-flex: 100%;
        -moz-box-flex: 100%;
        -ms-flex: 100%;
        flex: 100%
        }
    devsite-footer-utility .devsite-footer-utility-button {
        -webkit-box-flex: 100%;
        -webkit-flex: 100%;
        -moz-box-flex: 100%;
        -ms-flex: 100%;
        flex: 100%;
        margin-inline: 0
        }
    devsite-footer-utility .devsite-footer-utility-button:before {
        display: none
        }
    }
@media screen and (max-width: 600px) {
    devsite-footer-utility {
        padding: 0 16px
        }
    devsite-footer-utility .devsite-footer-utility-item-centered {
        margin: 12px 0
        }
    }
.devsite-fully-clickable {
    background-color: var(--devsite-fully-clickable-background, var(--devsite-background-color));
    border-radius: var(--devsite-fully-clickable-border-radius);
    position: relative
    }
.devsite-fully-clickable:before {
    border-radius: var(--devsite-fully-clickable-border-radius);
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    -webkit-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
    width: 100%
    }
.devsite-fully-clickable:focus-within:before, .devsite-fully-clickable:hover:before {
    opacity: 1
    }
.devsite-fully-clickable:active:before {
    opacity: 0.4
    }
.devsite-fully-clickable-link:active, .devsite-fully-clickable-link:focus, .devsite-fully-clickable-link:hover {
    -webkit-transform: none !important;
    transform: none !important
    }
.devsite-fully-clickable-link:not(.button):active, .devsite-fully-clickable-link:not(.button):focus, .devsite-fully-clickable-link:not(.button):hover {
    text-decoration: none !important
    }
.devsite-fully-clickable-link:before {
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1
    }
devsite-googler-buttons {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    bottom: calc(var(--devsite-panel-height, 0) + 24px);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: fixed;
    z-index: 1004
    }
[dir=ltr] devsite-googler-buttons {
    right: 24px
    }
[dir=ltr] [concierge] devsite-googler-buttons {
    right: calc(24px + var(--devsite-concierge-width))
    }
[dir=rtl] devsite-googler-buttons {
    left: 24px
    }
[dir=rtl] [concierge] devsite-googler-buttons {
    left: calc(24px + var(--devsite-concierge-width))
    }
devsite-googler-buttons > a:focus {
    text-decoration: none
    }
devsite-googler-buttons .devsite-googler-button {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--devsite-background-1);
    border-radius: 50%;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 40px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: -48px auto;
    outline: 0;
    position: relative;
    -webkit-transition: background 0.2s, box-shadow 0.2s, margin 0.2s;
    transition: background 0.2s, box-shadow 0.2s, margin 0.2s;
    width: 40px
    }
devsite-googler-buttons[active] .devsite-googler-button {
    box-shadow: 0 1px 3px 0 var(--devsite-elevation-key-shadow-color), 0 4px 8px 3px var(--devsite-elevation-ambient-shadow-color);
    margin: 4px auto
    }
devsite-googler-buttons .devsite-googler-button:focus, devsite-googler-buttons .devsite-googler-button:hover, devsite-googler-buttons a:focus > .devsite-googler-button {
    background: #e3f2fd
    }
devsite-googler-buttons .devsite-googler-button:active, devsite-googler-buttons a:active > .devsite-googler-button {
    background: #bbdefb
    }
devsite-googler-buttons .devsite-googler-admin:before {
    color: #80868b;
    content: "storage"
    }
devsite-googler-buttons .devsite-googler-page-insights:before {
    color: #12b5cb;
    content: "bar_chart"
    }
devsite-googler-buttons .devsite-googler-analytics:before {
    color: #e8710a;
    content: "timeline"
    }
devsite-googler-buttons .devsite-googler-bug:before {
    color: #e52592;
    content: "bug_report"
    }
devsite-googler-buttons .devsite-googler-cache {
    background: #689f38
    }
devsite-googler-buttons .devsite-googler-cache:hover {
    background: #7cb342
    }
devsite-googler-buttons .devsite-googler-cache:active, devsite-googler-buttons .devsite-googler-cache:focus {
    background: #8bc34a
    }
devsite-googler-buttons .devsite-googler-cache[active] {
    background: #d93025
    }
devsite-googler-buttons .devsite-googler-cache[active]:hover {
    background: #ea4335
    }
devsite-googler-buttons .devsite-googler-cache[active]:active, devsite-googler-buttons .devsite-googler-cache[active]:focus {
    background: #ee675c
    }
devsite-googler-buttons .devsite-googler-cache:before {
    color: var(--devsite-inverted-text-color);
    content: "cached"
    }
devsite-googler-buttons .devsite-googler-cache[active]:after {
    background: var(--devsite-background-1);
    border-bottom: 2px solid #d93025;
    content: "";
    display: block;
    height: 4px;
    position: absolute;
    -webkit-transform: rotate(45deg) translatey(1px);
    transform: rotate(45deg) translatey(1px);
    width: 28px
    }
devsite-googler-buttons .devsite-googler-cache[active]:active:after, devsite-googler-buttons .devsite-googler-cache[active]:focus:after {
    border-color: #ee675c
    }
devsite-googler-buttons .devsite-googler-devrel:before {
    color: #607d8b;
    content: "build"
    }
devsite-googler-buttons .devsite-googler-edit:before {
    color: #689f38;
    content: "edit"
    }
devsite-googler-buttons .devsite-googler-source:before {
    color: #1e88e5;
    content: "code"
    }
devsite-googler-buttons .devsite-googler-env:before {
    color: #673ab7;
    content: "swap_horiz"
    }
devsite-googler-buttons .devsite-googler-speed-dial {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    box-shadow: 0 1px 3px 0 var(--devsite-elevation-key-shadow-color), 0 4px 8px 3px var(--devsite-elevation-ambient-shadow-color);
    height: 56px;
    margin: 0;
    width: 56px
    }
devsite-googler-buttons[active] .devsite-googler-speed-dial {
    margin: 16px 0 0
    }
devsite-googler-buttons .devsite-googler-speed-dial:before {
    content: url(../../images/fab.svg);
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s
    }
devsite-googler-buttons[active] .devsite-googler-speed-dial:before {
    content: "close";
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
    }
devsite-header {
    display: block;
    position: relative;
    z-index: 1006
    }
body[ready] devsite-header[fixed] {
    contain: layout;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 100%
    }
body[ready][concierge] devsite-header[fixed] {
    contain: unset;
    top: auto;
    position: static;
    z-index: unset
    }
devsite-header .devsite-top-logo-row-wrapper-wrapper {
    border-bottom: var(--devsite-header-border, 0);
    position: relative;
    z-index: 1
    }
body[ready][concierge] devsite-header[fixed] .devsite-top-logo-row-wrapper-wrapper {
    position: fixed;
    z-index: 1007;
    left: 0;
    right: 0
    }
devsite-header .devsite-top-logo-row-wrapper-wrapper, devsite-header .devsite-top-logo-row-wrapper-wrapper:before {
    background: var(--devsite-header-color-upper, var(--devsite-background-1))
    }
body[ready] devsite-header[fixed] .devsite-top-logo-row-wrapper-wrapper:before {
    content: "";
    height: 400px;
    position: absolute;
    -webkit-transform: translatey(-400px);
    transform: translatey(-400px);
    width: 100%
    }
devsite-header[fixed] .devsite-top-logo-row-wrapper-wrapper {
    pointer-events: all
    }
devsite-header .devsite-collapsible-section {
    position: relative
    }
body[ready][concierge] devsite-header[fixed] .devsite-collapsible-section {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--devsite-js-top-row--height, 49px);
    z-index: 1005
    }
[dir=ltr] body[ready][concierge] devsite-header[fixed] .devsite-collapsible-section {
    right: var(--devsite-concierge-width, 0)
    }
[dir=rtl] body[ready][concierge] devsite-header[fixed] .devsite-collapsible-section {
    left: var(--devsite-concierge-width, 0)
    }
devsite-header[fixed] .devsite-collapsible-section {
    contain: style;
    pointer-events: all;
    -webkit-transform: translatez(0);
    transform: translatez(0);
    will-change: transform
    }
devsite-header .devsite-top-logo-row {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--devsite-header-color-upper, var(--devsite-background-1));
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
    height: 48px;
    padding: 0 16px 0 24px;
    position: relative;
    -webkit-transform: translatez(0);
    transform: translatez(0)
    }
[dir=rtl] devsite-header .devsite-top-logo-row {
    padding: 0 24px 0 16px
    }
devsite-header .devsite-top-button {
    background: var(--devsite-header-link-background, 0);
    border-radius: var(--devsite-header-link-border-radius, var(--devsite-button-border-radius, 2px));
    color: var(--devsite-header-link-color, var(--devsite-secondary-text-rgba));
    -webkit-text-decoration: var(--devsite-header-link-text-decoration);
    -moz-text-decoration: var(--devsite-header-link-text-decoration);
    text-decoration: var(--devsite-header-link-text-decoration);
    -webkit-transition: background 0.2s, box-shadow 0.2s, color 0.2s;
    transition: background 0.2s, box-shadow 0.2s, color 0.2s
    }
devsite-header .devsite-top-button, devsite-header .devsite-top-button:active, devsite-header .devsite-top-button:focus, devsite-header .devsite-top-button:hover {
    border: 0
    }
devsite-header .devsite-top-button:active, devsite-header .devsite-top-button:focus, devsite-header .devsite-top-button:hover {
    color: var(--devsite-header-link-color-active, var(--devsite-primary-text-rgba));
    -webkit-text-decoration: var(--devsite-header-link-text-decoration-active);
    -moz-text-decoration: var(--devsite-header-link-text-decoration-active);
    text-decoration: var(--devsite-header-link-text-decoration-active)
    }
devsite-header .devsite-top-button:focus {
    background: var(--devsite-header-link-background-focus, var(--devsite-header-link-background-hover, var(--devsite-header-link-background-active, var(--devsite-background-3))))
    }
devsite-header .devsite-top-button:hover {
    background: var(--devsite-header-link-background-hover, var(--devsite-header-link-background-active, var(--devsite-background-3)))
    }
devsite-header .devsite-top-button:active {
    background: var(--devsite-header-link-background-active, var(--devsite-background-3));
    box-shadow: var(--devsite-header-link-box-shadow-active, none)
    }
devsite-header .devsite-header-icon-button {
    color: var(--devsite-header-icon-color, var(--devsite-secondary-text-rgba));
    display: none;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    height: 24px;
    min-width: 24px;
    padding: 0;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
    width: 24px
    }
devsite-header .devsite-header-icon-button:active, devsite-header .devsite-header-icon-button:focus, devsite-header .devsite-header-icon-button:hover {
    color: var(--devsite-header-icon-color-active, var(--devsite-primary-text-rgba))
    }
devsite-header .devsite-top-logo-row-middle {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    position: relative
    }
devsite-header .devsite-collapsible-section {
    background-color: var(--devsite-header-color-lower, var(--devsite-primary-color, var(--devsite-secondary-text-color)))
    }
@media screen and (max-width: 840px) {
    devsite-header {
        -webkit-transform: translatez(0);
        transform: translatez(0)
        }
    devsite-header .devsite-top-logo-row {
        padding: 0 16px;
        gap: 8px
        }
    devsite-header .devsite-header-upper-tabs devsite-tabs {
        margin: 0 0 0 16px
        }
    [dir=rtl] devsite-header .devsite-header-upper-tabs devsite-tabs {
        margin: 0 16px 0 0
        }
    devsite-header .devsite-header-upper-tabs .devsite-doc-set-nav {
        display: none
        }
    }
devsite-header .devsite-header-billboard {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: var(--devsite-header-color-lower, var(--devsite-primary-color, var(--devsite-background-1)));
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 40px 24px 20px;
    position: relative;
    z-index: 100
    }
devsite-header .devsite-header-billboard h1 {
    line-height: var(--devsite-h1-line-height, 1);
    overflow: visible;
    padding: 0
    }
devsite-header .devsite-header-billboard-logo {
    max-height: 64px
    }
devsite-header .devsite-header-billboard-search {
    margin: 0 auto;
    max-width: 816px;
    padding-bottom: 48px
    }
devsite-header .devsite-header-billboard-search devsite-search {
    width: 100%
    }
devsite-header .devsite-header-billboard-search devsite-search .devsite-popout-result {
    max-height: 50vh
    }
devsite-header .devsite-header-billboard-search .devsite-search-background, devsite-header .devsite-header-billboard-search devsite-search .devsite-searchbox:before {
    background: var(--devsite-header-color-lower, var(--devsite-primary-color, var(--devsite-background-1)))
    }
@media screen and (max-width: 840px) {
    devsite-header .devsite-header-billboard-search {
        margin: 0 24px
        }
    }
devsite-header .devsite-doc-set-nav-row {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: var(--devsite-header-lower-tabs-border-bottom, none);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 24px 0 0
    }
[dir=rtl] devsite-header .devsite-doc-set-nav-row {
    padding: 0 0 0 24px
    }
[dir=ltr] devsite-header .devsite-doc-set-nav-row .devsite-breadcrumb-list {
    padding-left: 24px
    }
[dir=rtl] devsite-header .devsite-doc-set-nav-row .devsite-breadcrumb-list {
    padding-right: 24px
    }
@media screen and (max-width: 840px) {
    devsite-header .devsite-doc-set-nav-row {
        display: none
        }
    }
@media screen and (max-width: 600px) {
    devsite-header devsite-language-selector {
        display: none
        }
    }
devsite-header .devsite-header-link {
    -webkit-transition: background 0.2s, box-shadow 0.2s, color 0.2s;
    transition: background 0.2s, box-shadow 0.2s, color 0.2s
    }
devsite-header .devsite-header-link, devsite-header .devsite-header-link:visited {
    color: var(--devsite-header-link-color, var(--devsite-secondary-text-rgba))
    }
devsite-header .devsite-header-link:focus, devsite-header .devsite-header-link:hover {
    color: var(--devsite-header-link-color-active, var(--devsite-primary-text-rgba))
    }
@media screen and (max-width: 840px) {
    devsite-header .devsite-header-link {
        display: none
        }
    }
devsite-header .devsite-product-name-wrapper {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    height: 36px;
    margin: 6px 0
    }
devsite-header .devsite-product-name-link, devsite-header .devsite-site-logo-link {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    opacity: 1;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s
    }
devsite-header .devsite-product-name-link:focus, devsite-header .devsite-product-name-link:hover, devsite-header .devsite-site-logo-link:focus {
    opacity: 0.7;
    text-decoration: none
    }
devsite-header .devsite-site-logo {
    height: var(--devsite-logo-height, 32px)
    }
devsite-header .devsite-has-google-wordmark > .devsite-breadcrumb-link, devsite-header .devsite-has-google-wordmark > .devsite-product-name {
    direction: ltr
    }
devsite-header .devsite-google-wordmark {
    height: 24px;
    margin: 0 4px 0 0;
    position: relative;
    top: 5px
    }
devsite-header .devsite-google-wordmark-svg-path {
    -webkit-transition: fill 0.2s;
    transition: fill 0.2s
    }
devsite-header .devsite-site-logo-link canvas {
    height: auto !important
    }
devsite-header .devsite-site-logo-link picture {
    display: contents
    }
devsite-header .devsite-product-logo-container {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 50%;
    color: var(--devsite-primary-color, var(--devsite-primary-text-color));
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 36px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-inline: 0 4px;
    width: 36px
    }
devsite-header .devsite-product-logo-container[background] {
    background: var(--devsite-primary-color, var(--devsite-primary-text-color));
    color: var(--devsite-inverted-text-color)
    }
devsite-header .devsite-product-logo {
    color: inherit;
    font-size: 32px;
    height: 32px;
    max-width: 32px;
    min-width: 32px;
    overflow: hidden;
    white-space: nowrap
    }
devsite-header .devsite-product-logo-container[background] .devsite-product-logo {
    font-size: 28px;
    height: 28px;
    max-width: 28px;
    min-width: 28px
    }
devsite-header .devsite-product-name {
    letter-spacing: 0;
    margin: 0;
    max-height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
    white-space: nowrap
    }
devsite-header .devsite-site-logo:not([src*=".svg"]) {
    height: auto;
    max-height: 32px
    }
devsite-header .devsite-breadcrumb-link > .devsite-product-name {
    color: inherit
    }
@media screen and (max-width: 840px) {
    devsite-header .devsite-product-name-wrapper {
        -webkit-box-flex: 0;
        -webkit-flex: 0 1 auto;
        -moz-box-flex: 0;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        min-width: 0
        }
    devsite-header .devsite-product-name-wrapper .devsite-breadcrumb-item:not(:first-of-type), devsite-header .devsite-product-name-wrapper .devsite-site-logo-link + .devsite-product-name {
        display: none
        }
    devsite-header .devsite-product-name-wrapper .devsite-breadcrumb-item, devsite-header .devsite-product-name-wrapper .devsite-breadcrumb-link, devsite-header .devsite-product-name-wrapper .devsite-breadcrumb-list, devsite-header .devsite-product-name-wrapper .devsite-product-name {
        width: 100%
        }
    devsite-header .devsite-product-name-wrapper .devsite-breadcrumb-link {
        overflow: hidden;
        text-overflow: ellipsis
        }
    }
devsite-header .devsite-product-id-row {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-height: 60px
    }
devsite-header .devsite-header-no-lower-tabs .devsite-product-id-row {
    min-height: 72px
    }
devsite-header .devsite-product-description-row {
    color: var(--devsite-header-foreground-lower-description, var(--devsite-header-foreground-lower-hover, var(--devsite-inverted-text-color)))
    }
devsite-header .devsite-product-description {
    font: 16px/24px var(--devsite-primary-font-family);
    margin-block: 0;
    margin-inline: 0 180px
    }
devsite-header .devsite-breadcrumb-list + .devsite-product-description {
    margin-block: 8px 0
    }
devsite-header .devsite-product-button-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin-block: 0;
    margin-inline: 24px 0;
    z-index: 1
    }
@media screen and (max-width: 840px) {
    devsite-header .devsite-product-id-row {
        min-height: 72px
        }
    devsite-header .devsite-product-description {
        margin-inline: 0
        }
    }
@media screen and (max-width: 600px) {
    devsite-header .devsite-header-no-lower-tabs .devsite-product-id-row, devsite-header .devsite-product-id-row {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
        }
    devsite-header .devsite-product-button-row {
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        margin-block: 16px 0;
        margin-inline: 0
        }
    }
devsite-header[search-expanded] .devsite-header-upper-tabs {
    opacity: 0;
    position: absolute
    }
devsite-header[search-expanded] devsite-search {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0;
    -moz-box-flex: 1;
    -ms-flex: 1 0;
    flex: 1 0
    }
devsite-header [transition] {
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s
    }
devsite-header[search-active] .devsite-search-background:after {
    background: var(--devsite-searchbox-active, var(--devsite-background-3))
    }
devsite-header devsite-search[search-active] .devsite-search-field::-webkit-input-placeholder {
    color: var(--devsite-searchbox-placeholder-active, var(--devsite-secondary-text-color))
    }
devsite-header devsite-search[search-active] .devsite-search-field::-moz-placeholder {
    color: var(--devsite-searchbox-placeholder-active, var(--devsite-secondary-text-color))
    }
devsite-header devsite-search[search-active] .devsite-search-field:-ms-input-placeholder {
    color: var(--devsite-searchbox-placeholder-active, var(--devsite-secondary-text-color))
    }
devsite-header devsite-search[search-active] .devsite-search-field::-ms-input-placeholder {
    color: var(--devsite-searchbox-placeholder-active, var(--devsite-secondary-text-color))
    }
devsite-header devsite-search[search-active] .devsite-search-field::placeholder {
    color: var(--devsite-searchbox-placeholder-active, var(--devsite-secondary-text-color))
    }
devsite-header devsite-search[search-active] .devsite-search-field, devsite-header devsite-search[search-active] .devsite-search-field:hover {
    background: var(--devsite-searchbox-active, var(--devsite-background-3));
    color: var(--devsite-searchbox-text-active, var(--devsite-primary-text-color))
    }
devsite-header devsite-search[search-active] .devsite-search-image {
    color: var(--devsite-searchbox-placeholder, var(--devsite-secondary-text-color))
    }
@media screen and (max-width: 840px) {
    devsite-header[search-active] .devsite-product-name-wrapper, devsite-header[search-active] devsite-language-selector, devsite-header[search-active] devsite-user {
        display: none
        }
    devsite-header[search-active] devsite-search {
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -moz-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -webkit-transform: none !important;
        transform: none !important
        }
    devsite-header[search-active] .devsite-header-upper-tabs {
        -webkit-box-flex: 0;
        -webkit-flex: 0 1;
        -moz-box-flex: 0;
        -ms-flex: 0 1;
        flex: 0 1;
        overflow: hidden
        }
    devsite-header[search-active] .devsite-top-logo-row devsite-search {
        margin: 6px 0
        }
    devsite-header .devsite-top-logo-row devsite-search[search-active] .devsite-searchbox {
        width: 100%
        }
    devsite-header devsite-search[search-active] .devsite-search-form {
        border-radius: var(--devsite-search-border-radius, 0);
        box-shadow: var(--devsite-search-active-box-shadow, none);
        left: 0;
        overflow: var(--devsite-search-active-overflow, visible);
        position: var(--devsite-search-form-position, relative);
        top: 0
        }
    [dir=ltr] devsite-header devsite-search[search-active] .devsite-search-form {
        right: var(--devsite-search-form-position-end, auto)
        }
    [dir=rtl] devsite-header devsite-search[search-active] .devsite-search-form {
        left: var(--devsite-search-form-position-end, auto)
        }
    devsite-header devsite-search[search-active] .devsite-search-field, devsite-header devsite-search[search-active] .devsite-search-field:hover {
        background: var(--devsite-search-form-background-active, var(--devsite-background-3));
        color: var(--devsite-search-form-text-active, var(--devsite-primary-text-color))
        }
    [dir=ltr] devsite-header .devsite-header-billboard-search devsite-search[search-active] .devsite-search-form {
        right: var(--devsite-search-form-position-start, auto)
        }
    [dir=rtl] devsite-header .devsite-header-billboard-search devsite-search[search-active] .devsite-search-form {
        left: var(--devsite-search-form-position-start, auto)
        }
    devsite-header .devsite-top-logo-row devsite-search[search-active] .devsite-searchbox .devsite-search-image {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex
        }
    devsite-header .devsite-top-logo-row devsite-search .devsite-searchbox:before, devsite-header .devsite-top-logo-row devsite-search[search-active] .devsite-popout {
        width: var(--devsite-popout-width, calc(100vw + 16px))
        }
    [dir=ltr] devsite-header .devsite-top-logo-row devsite-search .devsite-searchbox:before, [dir=ltr] devsite-header .devsite-top-logo-row devsite-search[search-active] .devsite-popout {
        left: var(--devsite-popout-position-start, -60px)
        }
    [dir=rtl] devsite-header .devsite-top-logo-row devsite-search .devsite-searchbox:before, [dir=rtl] devsite-header .devsite-top-logo-row devsite-search[search-active] .devsite-popout {
        right: var(--devsite-popout-position-start, -60px)
        }
    devsite-header .devsite-top-logo-row devsite-search[search-active] .devsite-search-button {
        margin-block: 0;
        margin-inline: var(--devsite-search-button-margin-before, 16px) 0
        }
    devsite-header .devsite-top-logo-row devsite-search[search-active] .devsite-search-button[search-open] {
        display: none
        }
    devsite-header .devsite-top-logo-row devsite-search[search-active] .devsite-search-button[search-close] {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex
        }
    devsite-header [transition] {
        -webkit-transition: none;
        transition: none
        }
    }
devsite-header .devsite-search-background {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: stretch;
    -webkit-justify-content: stretch;
    -moz-box-pack: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
    margin-block: 0;
    margin-inline: 24px 0;
    padding: 6px 0;
    pointer-events: none;
    position: absolute;
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
    will-change: transition;
    z-index: 9
    }
[dir=ltr] devsite-header .devsite-search-background {
    right: 0;
    -webkit-transform-origin: right center;
    transform-origin: right center
    }
[dir=rtl] devsite-header .devsite-search-background {
    left: 0;
    -webkit-transform-origin: left center;
    transform-origin: left center
    }
devsite-header .devsite-search-background, devsite-header .devsite-searchbox:before {
    background: var(--devsite-header-color-upper, var(--devsite-background-1))
    }
devsite-header .devsite-search-background:after {
    content: "";
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: 100%;
    -webkit-transition: background 0.2s;
    transition: background 0.2s
    }
devsite-header .devsite-search-background:after, devsite-header devsite-search input.devsite-search-field {
    background: var(--devsite-searchbox-inactive)
    }
devsite-header devsite-search input.devsite-search-field::-webkit-input-placeholder {
    color: var(--devsite-searchbox-placeholder, var(--devsite-secondary-text-color))
    }
devsite-header devsite-search input.devsite-search-field::-moz-placeholder {
    color: var(--devsite-searchbox-placeholder, var(--devsite-secondary-text-color))
    }
devsite-header devsite-search input.devsite-search-field:-ms-input-placeholder {
    color: var(--devsite-searchbox-placeholder, var(--devsite-secondary-text-color))
    }
devsite-header devsite-search input.devsite-search-field::-ms-input-placeholder {
    color: var(--devsite-searchbox-placeholder, var(--devsite-secondary-text-color))
    }
devsite-header devsite-search input.devsite-search-field::placeholder {
    color: var(--devsite-searchbox-placeholder, var(--devsite-secondary-text-color))
    }
devsite-header devsite-search input.devsite-search-field:hover {
    background: var(--devsite-searchbox-hover)
    }
devsite-header devsite-search .devsite-search-image, devsite-header devsite-search input.devsite-search-field {
    color: var(--devsite-searchbox-placeholder, var(--devsite-secondary-text-color))
    }
devsite-header[billboard] .devsite-search-background {
    display: none
    }
devsite-header[billboard][bottom-row--hidden] .devsite-search-background {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-header[billboard] .devsite-top-logo-row devsite-search .devsite-search-form {
    opacity: 1;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    transition: opacity 0.2s, -webkit-transform 0.2s;
    transition: opacity 0.2s, transform 0.2s;
    transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s
    }
devsite-header[billboard][bottom-row--hidden] .devsite-top-logo-row devsite-search .devsite-search-form {
    -webkit-transform: translatez(0);
    transform: translatez(0)
    }
body[template="404"] devsite-header .devsite-top-logo-row .devsite-search-form, devsite-header[billboard]:not([bottom-row--hidden]) .devsite-top-logo-row devsite-search .devsite-search-form {
    opacity: 0;
    pointer-events: none
    }
[dir=ltr] body[template="404"] devsite-header .devsite-top-logo-row .devsite-search-form, [dir=ltr] devsite-header[billboard]:not([bottom-row--hidden]) .devsite-top-logo-row devsite-search .devsite-search-form {
    -webkit-transform: translate3d(200px, 0, 0);
    transform: translate3d(200px, 0, 0)
    }
[dir=rtl] body[template="404"] devsite-header .devsite-top-logo-row .devsite-search-form, [dir=rtl] devsite-header[billboard]:not([bottom-row--hidden]) .devsite-top-logo-row devsite-search .devsite-search-form {
    -webkit-transform: translate3d(-200px, 0, 0);
    transform: translate3d(-200px, 0, 0)
    }
devsite-header[billboard][bottom-row--hidden] .devsite-header-billboard-search devsite-search {
    opacity: 0
    }
devsite-header[billboard] .devsite-header-billboard-search devsite-search {
    margin-inline: 0
    }
devsite-header[billboard] .devsite-header-billboard-search devsite-search .devsite-popout {
    max-height: calc(100vh - 255px)
    }
@media screen and (max-width: 840px) {
    devsite-header .devsite-top-logo-row devsite-search {
        width: auto
        }
    devsite-header .devsite-top-logo-row devsite-search .devsite-searchbox {
        width: 0
        }
    devsite-header .devsite-search-background, devsite-header .devsite-search-background:after, devsite-header devsite-search .devsite-search-field, devsite-header devsite-search .devsite-search-field:hover, devsite-header[search-active] .devsite-search-background:after {
        background: 0
        }
    devsite-header .devsite-top-logo-row devsite-search .devsite-searchbox .devsite-search-image {
        display: none
        }
    devsite-header .devsite-top-logo-row devsite-search .devsite-search-button {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: var(--devsite-secondary-text-color);
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        z-index: 1
        }
    devsite-header .devsite-top-logo-row devsite-search .devsite-search-button[search-open] {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex
        }
    devsite-header .devsite-top-logo-row devsite-search .devsite-search-button[search-close] {
        display: none;
        margin-right: 6px
        }
    devsite-header .devsite-top-logo-row devsite-search .devsite-search-button[search-open]:before {
        content: "search"
        }
    devsite-header .devsite-top-logo-row devsite-search .devsite-search-button[search-close]:before {
        content: "cancel"
        }
    devsite-header .devsite-top-logo-row devsite-search .devsite-result-item a, devsite-header .devsite-top-logo-row devsite-search .devsite-result-label, devsite-header .devsite-top-logo-row devsite-search .devsite-suggest-footer, devsite-header .devsite-top-logo-row devsite-search .devsite-suggest-header {
        padding-inline: var(--devsite-search-content-padding-start, 60px) 8px
        }
    }
devsite-header .devsite-header-upper-tabs {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0;
    -moz-box-flex: 1;
    -ms-flex: 1 1 0;
    flex: 1 1 0;
    margin-block: 0;
    margin-inline: var(--devsite-upper-tab-margin-x, 32px) 0;
    opacity: 1;
    position: relative;
    z-index: 8
    }
devsite-header devsite-tabs tab a:focus, devsite-header devsite-tabs tab a:hover {
    text-decoration: none
    }
devsite-header cloudx-tabs-nav.upper-tabs .devsite-tabs-wrapper, devsite-header devsite-tabs.upper-tabs .devsite-tabs-wrapper {
    background: var(--devsite-header-color-upper, var(--devsite-background-1))
    }
devsite-header devsite-tabs.upper-tabs > .devsite-tabs-wrapper > tab > a:focus, devsite-header devsite-tabs.upper-tabs > .devsite-tabs-wrapper > tab > a:hover {
    color: var(--devsite-upper-tab-active, var(--devsite-primary-text-color))
    }
devsite-header devsite-tabs.upper-tabs > .devsite-tabs-wrapper > tab > a:focus:after, devsite-header devsite-tabs.upper-tabs > .devsite-tabs-wrapper > tab > a:hover:after {
    border-color: var(--devsite-upper-tab-marker-color-inactive, var(--devsite-upper-tab-inactive, var(--devsite-secondary-text-color)))
    }
devsite-header cloudx-tabs-nav.lower-tabs a, devsite-header devsite-tabs.lower-tabs .devsite-tabs-content, devsite-header devsite-tabs.lower-tabs a {
    color: var(--devsite-header-foreground-lower, var(--devsite-inverted-text-color));
    letter-spacing: var(--devsite-header-lower-tabs-letter-spacing, 0)
    }
devsite-header cloudx-tabs-nav.lower-tabs a:focus, devsite-header cloudx-tabs-nav.lower-tabs a:hover, devsite-header devsite-tabs.lower-tabs .devsite-tabs-content:focus, devsite-header devsite-tabs.lower-tabs .devsite-tabs-content:hover, devsite-header devsite-tabs.lower-tabs a:focus, devsite-header devsite-tabs.lower-tabs a:hover {
    color: var(--devsite-header-foreground-lower-hover, var(--devsite-header-foreground-lower, var(--devsite-inverted-text-rgba)))
    }
devsite-header cloudx-tabs-nav.lower-tabs tab[active] > a, devsite-header devsite-tabs.lower-tabs tab[active] > .devsite-tabs-content, devsite-header devsite-tabs.lower-tabs tab[active] > a {
    color: var(--devsite-header-foreground-lower-active, var(--devsite-inverted-text-color))
    }
devsite-header cloudx-tabs-nav.lower-tabs tab[active] > a:focus, devsite-header devsite-tabs.lower-tabs tab[active] > .devsite-tabs-content:focus, devsite-header devsite-tabs.lower-tabs tab[active] > a:focus {
    color: var(--devsite-header-foreground-lower-active-focus, var(--devsite-header-foreground-lower, var(--devsite-inverted-text-rgba)))
    }
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast: high) {
    devsite-header cloudx-tabs-nav.lower-tabs tab[active] > a, devsite-header devsite-tabs.lower-tabs tab[active] > .devsite-tabs-content, devsite-header devsite-tabs.lower-tabs tab[active] > a {
        color: inherit
        }
    }
devsite-header cloudx-tabs-nav.lower-tabs > .devsite-tabs-wrapper > tab > a:after, devsite-header devsite-tabs.lower-tabs > .devsite-tabs-wrapper > tab > a:after {
    border-radius: var(--devsite-lower-tab-marker-border-radius, var(--devsite-tab-marker-border-radius, 0))
    }
devsite-header devsite-tabs.lower-tabs > .devsite-tabs-wrapper > tab > a:focus:after, devsite-header devsite-tabs.lower-tabs > .devsite-tabs-wrapper > tab > a:hover:after {
    border-color: var(--devsite-lower-tab-marker-color-inactive, var(--devsite-header-foreground-lower, var(--devsite-inverted-text-rgba)))
    }
devsite-header cloudx-tabs-nav.lower-tabs > .devsite-tabs-wrapper > tab[active] > a:after, devsite-header devsite-tabs.lower-tabs > .devsite-tabs-wrapper > tab[active] > a:after {
    border-color: var(--devsite-lower-tab-marker-color-active, var(--devsite-header-foreground-lower-active, var(--devsite-background-1)))
    }
devsite-header cloudx-tabs-nav tab[overflow-tab] > a:after, devsite-header devsite-tabs tab[overflow-tab] > a:after {
    display: none
    }
devsite-header devsite-tabs.upper-tabs tab[overflow-tab]:after {
    background: var(--devsite-header-color-upper, var(--devsite-background-1))
    }
devsite-header cloudx-tabs-nav.upper-tabs .devsite-tabs-overflow-menu, devsite-header devsite-tabs.upper-tabs .devsite-tabs-overflow-menu {
    border-top: var(--devsite-header-border, 0)
    }
@media screen and (max-width: 840px) {
    [dir=ltr] devsite-header .devsite-header-upper-tabs {
        margin-left: 0
        }
    [dir=rtl] devsite-header .devsite-header-upper-tabs {
        margin-right: 0
        }
    devsite-header devsite-tabs.lower-tabs, devsite-header devsite-tabs.upper-tabs {
        display: none
        }
    }
[layout=docs] h2:not(.no-link), [layout=docs] h3:not(.no-link), [layout=docs] h4:not(.no-link), [layout=docs] h5:not(.no-link), [layout=docs] h6:not(.no-link), h1.add-link {
    -webkit-margin-end: -40px;
    -moz-margin-end: -40px;
    margin-inline-end: -40px;
    -webkit-padding-end: 40px;
    -moz-padding-end: 40px;
    padding-inline-end: 40px
    }
.devsite-heading-link.material-icons {
    color: var(--devsite-icon-color, var(--devsite-secondary-text-color));
    height: 24px;
    opacity: 0
    }
.devsite-heading-link.material-icons:focus, .devsite-heading-link.material-icons:hover {
    color: var(--devsite-icon-color-hover, var(--devsite-link-color));
    cursor: pointer !important
    }
.devsite-landing-row-item-list h4 > .devsite-heading-link.material-icons, h1 > .devsite-heading-link.material-icons, h2 > .devsite-heading-link.material-icons, h3 > .devsite-heading-link.material-icons {
    vertical-align: middle
    }
.devsite-landing-row-item-list h4 > .devsite-heading-link.material-icons, th > h2 > .devsite-heading-link.material-icons, th > h3 > .devsite-heading-link.material-icons {
    margin: -4px 0
    }
.devsite-heading-link.material-icons:focus, .devsite-heading-link.material-icons:hover, :focus > .devsite-heading-link.material-icons, :hover > .devsite-heading-link.material-icons {
    opacity: 1
    }
.devsite-heading-link:after {
    content: "link"
    }
devsite-iframe {
    display: block;
    width: 100%
    }
devsite-iframe + * {
    position: relative
    }
devsite-iframe + devsite-iframe {
    margin-top: 16px
    }
devsite-iframe iframe {
    height: 100%;
    width: 100%
    }
devsite-iframe iframe[src*=".frame"] {
    height: calc(100% + 32px);
    margin: -16px;
    width: calc(100% + 32px)
    }
devsite-info-popout:not(:defined) {
    visibility: hidden
    }
devsite-jump-to {
    display: block;
    margin: 40px 0 0 !important;
    opacity: 0;
    padding-bottom: 96px;
    pointer-events: none;
    position: relative;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s
    }
devsite-jump-to[visible] {
    opacity: 1;
    pointer-events: auto
    }
devsite-jump-to .devsite-jump-to-link {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--devsite-link-background, var(--devsite-link-color)) !important;
    border-radius: 50%;
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 1px 3px 1px var(--devsite-elevation-ambient-shadow-color);
    color: var(--devsite-link-color, var(--devsite-inverted-text-color)) !important;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 24px;
    height: 56px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    position: absolute;
    -webkit-transition: background 0.2s, box-shadow 0.2s, color 0.2s;
    transition: background 0.2s, box-shadow 0.2s, color 0.2s;
    width: 56px
    }
devsite-jump-to .devsite-jump-to-link:focus, devsite-jump-to .devsite-jump-to-link:hover {
    background: var(--devsite-link-background-hover, var(--devsite-background-1)) !important;
    color: var(--devsite-link-color) !important;
    text-decoration: none
    }
devsite-jump-to .devsite-jump-to-link:active {
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color)
    }
[dir=ltr] devsite-jump-to .devsite-jump-to-link {
    right: 0
    }
[dir=rtl] devsite-jump-to .devsite-jump-to-link {
    left: 0
    }
devsite-jump-to[pinned] .devsite-jump-to-link {
    bottom: 40px;
    box-shadow: 0 1px 3px 0 var(--devsite-elevation-key-shadow-color), 0 4px 8px 3px var(--devsite-elevation-ambient-shadow-color);
    position: fixed
    }
devsite-jump-to[pinned] .devsite-jump-to-link:active {
    box-shadow: 0 2px 3px 0 var(--devsite-elevation-key-shadow-color), 0 6px 10px 4px var(--devsite-elevation-ambient-shadow-color)
    }
devsite-jump-to .devsite-jump-to-link:before {
    content: "arrow_upward";
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal
    }
@media screen and (max-width: 840px) {
    devsite-jump-to {
        margin: 40px 0 0 !important;
        padding-bottom: 80px
        }
    devsite-jump-to[pinned] .devsite-jump-to-link {
        bottom: 24px
        }
    }
devsite-language-selector:not(:defined) ul, devsite-language-selector:not([open]) ul {
    display: none
    }
devsite-language-selector ul {
    display: block;
    list-style: none;
    padding: 0
    }
devsite-language-selector li {
    font-size: 14px;
    margin: 0;
    min-width: 100%
    }
devsite-language-selector a {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 48px;
    min-width: 0;
    overflow: hidden;
    padding-inline: 16px;
    text-overflow: ellipsis;
    white-space: nowrap
    }
devsite-language-selector a[aria-current] {
    background-color: var(--devsite-item-background-selected, var(--devsite-background-3));
    font-weight: var(--devsite-item-font-weight-selected, 500)
    }
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast: high) {
    devsite-language-selector a[aria-current] {
        font-weight: 700;
        text-decoration: underline
        }
    }
.devsite-dialog-wrapper {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1014
    }
.devsite-dialog-wrapper.below-site-mask {
    z-index: 1011
    }
devsite-dialog {
    background: var(--devsite-background-1);
    border-radius: var(--devsite-border-radius, 2px);
    color: var(--devsite-secondary-text-color);
    box-shadow: 0 1px 3px 0 var(--devsite-elevation-key-shadow-color), 0 4px 8px 3px var(--devsite-elevation-ambient-shadow-color);
    font-size: 14px;
    line-height: 20px;
    max-height: calc(100vh - 48px);
    max-width: calc(100vw - 48px);
    pointer-events: all;
    overflow: auto;
    padding: var(--devsite-dialog-padding, 8px);
    width: 480px
    }
@media screen and (max-width: 840px) {
    devsite-dialog {
        max-height: calc(100vh - 32px);
        max-width: calc(100vw - 32px)
        }
    }
devsite-dialog:not([open]) {
    display: none
    }
devsite-dialog .devsite-dialog-contents {
    color: var(--devsite-secondary-text-color);
    overflow: hidden;
    padding: var(--devsite-dialog-contents-padding, 16px)
    }
devsite-dialog .devsite-dialog-close {
    cursor: pointer
    }
devsite-dialog .devsite-dialog-close:not(.button):not(button) {
    border-radius: 16px;
    height: 32px;
    width: 32px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-dialog .devsite-dialog-close:not(.button):not(button):hover {
    background-color: #f1f3f4
    }
devsite-dialog .devsite-dialog-contents > p:first-child:last-child {
    margin: 0
    }
devsite-dialog h2, devsite-dialog h3 {
    color: var(--devsite-heading-color, inherit)
    }
devsite-dialog h3 {
    margin: 0 0 20px;
    outline: 0;
    text-align: var(--devsite-heading-text-align, inherit)
    }
devsite-dialog .devsite-dialog-buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 4px 4px 0
    }
devsite-lightbox {
    pointer-events: all;
    position: relative
    }
devsite-lightbox:not([open]) {
    display: none
    }
devsite-lightbox .devsite-dialog-contents {
    padding: 0
    }
devsite-lightbox .devsite-lightbox-icon-close {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.54);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 40px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    outline: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 40px;
    z-index: 1
    }
[dir=ltr] devsite-lightbox .devsite-lightbox-icon-close {
    right: 0
    }
[dir=rtl] devsite-lightbox .devsite-lightbox-icon-close {
    left: 0
    }
devsite-lightbox .devsite-lightbox-icon-close:hover {
    background: rgba(0, 0, 0, 0.43)
    }
devsite-lightbox .devsite-lightbox-icon-close:active {
    box-shadow: none
    }
devsite-lightbox .devsite-lightbox-icon-close:after {
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal;
    color: #f1f1f1;
    content: "close";
    -webkit-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out
    }
devsite-lightbox .devsite-lightbox-icon-close:focus:after, devsite-lightbox .devsite-lightbox-icon-close:hover:after {
    color: #fff
    }
devsite-lightbox img {
    max-height: 100vh
    }
.devsite-lightbox-image {
    cursor: pointer;
    outline: 0
    }
.devsite-lightbox-image:focus {
    -webkit-filter: brightness(75%);
    filter: brightness(75%)
    }
.MathJax_SVG_Display {
    overflow-x: auto
    }
@media screen and (max-width: 600px) {
    .MathJax_SVG_Display {
        margin: 1em -16px !important;
        padding: 0 16px 16px;
        width: calc(100% + 32px) !important
        }
    }
devsite-multiple-choice {
    background-color: var(--devsite-multiple-choice-background);
    border: var(--devsite-multiple-choice-border);
    border-radius: var(--devsite-multiple-choice-border-radius);
    display: block;
    margin: 16px 0;
    overflow: var(--devsite-multiple-choice-overflow);
    visibility: hidden !important
    }
devsite-multiple-choice[ready] {
    visibility: visible !important
    }
devsite-multiple-choice .devsite-multiple-choice-question {
    background-color: var(--devsite-multiple-choice-question-background);
    color: var(--devsite-multiple-choice-question-color);
    padding: 16px 24px
    }
devsite-multiple-choice .devsite-multiple-choice-answer {
    border-bottom: var(--devsite-multiple-choice-answer-border-bottom);
    border-top: var(--devsite-multiple-choice-answer-border-top)
    }
devsite-multiple-choice .devsite-multiple-choice-answer, devsite-multiple-choice .devsite-multiple-choice-answer:focus, devsite-multiple-choice .devsite-multiple-choice-answer:hover {
    outline: 0
    }
devsite-multiple-choice .devsite-multiple-choice-answer:not([clicked]):focus, devsite-multiple-choice .devsite-multiple-choice-answer:not([clicked]):hover {
    color: var(--devsite-link-color);
    cursor: pointer
    }
devsite-multiple-choice .devsite-multiple-choice-option {
    padding: 16px 72px 16px 24px;
    position: relative
    }
devsite-multiple-choice .devsite-multiple-choice-option:after {
    content: "expand_more";
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal;
    height: 100%;
    position: absolute;
    right: 24px;
    top: calc(50% - 12px)
    }
devsite-multiple-choice [correct] {
    background-color: var(--devsite-multiple-choice-correct-background)
    }
devsite-multiple-choice [incorrect] {
    background-color: var(--devsite-multiple-choice-incorrect-background)
    }
devsite-multiple-choice [correct] .devsite-multiple-choice-option:after {
    color: var(--devsite-multiple-choice-correct-color);
    content: "check"
    }
devsite-multiple-choice [incorrect] .devsite-multiple-choice-option:after {
    color: var(--devsite-multiple-choice-incorrect-color);
    content: "not_interested"
    }
devsite-multiple-choice .devsite-multiple-choice-explanation {
    font-size: 14px;
    padding: 0 24px 16px
    }
devsite-multiple-choice .devsite-multiple-choice-explanation-correctness {
    font-weight: 500;
    margin-top: 16px
    }
devsite-multiple-choice [correct] .devsite-multiple-choice-explanation-correctness {
    color: var(--devsite-multiple-choice-correct-color)
    }
devsite-multiple-choice [incorrect] .devsite-multiple-choice-explanation-correctness {
    color: var(--devsite-multiple-choice-incorrect-color)
    }
devsite-my-community {
    font-size: 16px
    }
devsite-my-community .devsite-my-community-feature-not-available {
    text-align: center;
    margin: 50px 0
    }
devsite-my-community .waiting-container {
    margin: auto
    }
devsite-my-community .devsite-my-community-card {
    margin-bottom: 24px;
    height: unset
    }
devsite-my-community .devsite-my-community-header {
    padding: 24px;
    border-bottom: var(--devsite-card-border);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
    }
devsite-my-community .devsite-my-community-icon {
    max-width: 66px;
    max-height: 66px;
    -webkit-margin-end: 18px;
    -moz-margin-end: 18px;
    margin-inline-end: 18px
    }
devsite-my-community .devsite-my-community-title-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-my-community .devsite-my-community-title {
    font: var(--devsite-h2-font);
    font-weight: 400;
    font-size: 28px;
    line-height: 36px;
    color: var(--devsite-heading-color, var(--devsite-secondary-text-color))
    }
devsite-my-community .devsite-my-community-member-chip {
    font-family: Roboto;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--devsite-success-notice-color);
    background-color: var(--devsite-success-notice-background);
    padding: 1px 8px;
    -webkit-margin-before: 7px;
    margin-block-start: 7px
    }
devsite-my-community .devsite-my-community-description {
    padding: 0 24px 20px;
    white-space: pre-line
    }
devsite-my-community .devsite-my-community-button-container {
    padding: 0 24px 24px
    }
devsite-my-community .devsite-my-community-button-container button.button {
    margin: 6px 6px 0 0
    }
devsite-my-community .devsite-my-community-button-container devsite-spinner {
    display: inline-block;
    margin-left: 24px;
    position: absolute
    }
devsite-my-community .devsite-my-community-details-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-transition: border-color, max-height, 0.5s ease-out;
    transition: border-color, max-height, 0.5s ease-out;
    border-top: 1px solid transparent;
    margin-top: 4px;
    max-height: 0
    }
devsite-my-community .devsite-my-community-details-container[opened] {
    border-top: var(--devsite-card-border);
    -webkit-transition: border-color, max-height, 0.5s ease-in;
    transition: border-color, max-height, 0.5s ease-in;
    max-height: 3000px
    }
devsite-my-community .devsite-my-community-missing-info-warning, devsite-my-community .devsite-my-community-profile-not-allowed {
    gap: 10px;
    color: var(--devsite-caution-notice-color);
    background-color: var(--devsite-caution-notice-background);
    padding: 9px 24px;
    font-size: 14px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-margin-after: 24px;
    margin-block-end: 24px;
    -webkit-margin-before: 3px;
    margin-block-start: 3px
    }
devsite-my-community .devsite-my-community-missing-info-warning .material-symbols-outlined, devsite-my-community .devsite-my-community-profile-not-allowed .material-symbols-outlined {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48
    }
devsite-my-community .devsite-my-community-no-profile-info {
    color: var(--devsite-note-notice-color);
    background-color: var(--devsite-note-notice-background);
    padding: 9px 24px;
    font-size: 14px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-margin-after: 24px;
    margin-block-end: 24px
    }
devsite-my-community .devsite-my-community-no-profile-info .material-symbols-outlined {
    -webkit-margin-end: 10px;
    -moz-margin-end: 10px;
    margin-inline-end: 10px
    }
devsite-my-community .devsite-my-community-profile-attributes-title {
    font-size: 18px;
    margin: 0 24px 9px;
    font-family: var(--devsite-headline-font-family)
    }
devsite-my-community .devsite-my-community-legal-title {
    font-size: 18px;
    margin: 0 0 16px;
    font-family: var(--devsite-headline-font-family)
    }
devsite-my-community .devsite-my-community-profile-attributes {
    display: grid;
    grid: auto/calc(50% - 12px) calc(50% - 12px);
    margin: 0 24px 18px;
    gap: 24px;
    font-size: 18px
    }
devsite-my-community .devsite-my-community-profile-attributes-text {
    margin: 0;
    font-size: 16px;
    grid-column: 1/3
    }
devsite-my-community .devsite-my-community-error-incorrect, devsite-my-community .devsite-my-community-error-missing {
    display: none;
    color: #e53935;
    font-size: 12px;
    margin: 2px 0 0 14px
    }
devsite-my-community .devsite-my-community-legal-container {
    margin: 0 24px 24px
    }
devsite-my-community .devsite-my-community-legal-container[missing] .devsite-my-community-error-missing {
    display: inline-block
    }
devsite-my-community .devsite-my-community-legal-container[missing] .devsite-my-community-legal-copy {
    border: 2px solid #e53935
    }
devsite-my-community .devsite-my-community-profile-attribute-input {
    display: block;
    position: relative;
    min-height: 86px
    }
devsite-my-community .devsite-my-community-profile-attribute-input[incorrect] .devsite-my-community-error-incorrect, devsite-my-community .devsite-my-community-profile-attribute-input[missing] .devsite-my-community-error-missing {
    display: inline-block
    }
devsite-my-community .devsite-my-community-email-preference {
    padding: 0 24px 24px
    }
devsite-my-community .devsite-my-community-email-pref-input {
    margin-top: 8px
    }
devsite-my-community .devsite-my-community-profile-title {
    margin: 24px 24px 16px;
    font-size: 18px;
    font-family: var(--devsite-headline-font-family)
    }
devsite-my-community .devsite-my-community-profile-text {
    margin: 0 24px 16px
    }
devsite-my-community .devsite-my-community-private-explanation {
    margin: 0 24px 24px
    }
devsite-my-community .devsite-my-community-private-explanation span {
    color: var(--devsite-secondary-text-color);
    font-size: 12px;
    font-weight: 500;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: bottom;
    line-height: 23px
    }
devsite-my-community .devsite-my-community-private-explanation span:before {
    content: "lock";
    font-family: Material Symbols Outlined;
    font-size: 12px;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
    -webkit-margin-end: 3px;
    -moz-margin-end: 3px;
    margin-inline-end: 3px
    }
devsite-my-community .devsite-my-community-private-chip {
    color: var(--devsite-secondary-text-color);
    font-size: 12px;
    font-weight: 500;
    margin: 2px 0 0 14px;
    display: inline-block
    }
devsite-my-community .devsite-my-community-private-chip .material-symbols-outlined {
    font-size: 12px;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
    top: 2px;
    position: relative
    }
devsite-my-community .devsite-my-community-legal-copy {
    padding: 16px;
    font-size: 14px;
    background-color: var(--devsite-background-3);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-my-community .devsite-my-community-legal-copy input {
    background-color: transparent;
    -webkit-margin-before: 5px;
    margin-block-start: 5px;
    -webkit-margin-end: 11px;
    -moz-margin-end: 11px;
    margin-inline-end: 11px
    }
.devsite-my-community-leave-title {
    font-family: Google Sans;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color: var(--devsite-heading-color, var(--devsite-secondary-text-color));
    margin-bottom: 16px
    }
.devsite-my-community-leave-buttons {
    margin-top: 24px
    }
devsite-my-community.devsite-my-community-small .devsite-my-community-title {
    font-size: 22px
    }
devsite-my-community.devsite-my-community-small .devsite-my-community-profile-attributes {
    grid: auto/auto
    }
devsite-my-community.devsite-my-community-small .devsite-my-community-profile-attributes-text {
    grid-column: 1/2
    }
devsite-nav-buttons {
    display: block
    }
devsite-nav-buttons button {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: var(--devsite-button-border);
    box-shadow: none;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-weight: 500;
    text-transform: none
    }
devsite-nav-buttons button, devsite-nav-buttons button:focus, devsite-nav-buttons button:hover {
    color: var(--devsite-button-color)
    }
devsite-nav-buttons button:focus, devsite-nav-buttons button:hover {
    background: var(--devsite-button-background-hover);
    border: var(--devsite-button-border-hover)
    }
devsite-nav-buttons button, devsite-nav-buttons button[class^=button-] {
    border-radius: 16px;
    height: 32px;
    line-height: 30px
    }
devsite-nav-buttons button[class^=button-][selected], devsite-nav-buttons button[selected] {
    border: var(--devsite-button-border-selected);
    padding-left: 8px
    }
devsite-nav-buttons button[class^=button-], devsite-nav-buttons button[class^=button-][selected] {
    border: 0
    }
devsite-nav-buttons button[selected] {
    background: var(--devsite-button-background-selected);
    color: var(--devsite-button-color-selected)
    }
devsite-nav-buttons button.button-white[selected] {
    background: var(--devsite-button-white-background-selected, var(--devsite-link-color));
    color: var(--devsite-button-white-color-selected, var(--devsite-inverted-text-color))
    }
devsite-nav-buttons button.button-primary[selected] {
    background: var(--devsite-button-primary-background-selected);
    color: var(--devsite-button-primary-color-selected, var(--devsite-inverted-text-color))
    }
devsite-nav-buttons button[selected]:before {
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal;
    content: "checked";
    margin-right: 8px;
    width: 24px
    }
devsite-pagination {
    display: block;
    font: var(--devsite-pagination-font, inherit);
    letter-spacing: var(--devsite-pagination-letter-spacing, normal)
    }
devsite-pagination[buttons], devsite-pagination[initial-results] {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-pagination button[hidden] {
    display: none
    }
devsite-pagination .devsite-pagination-page-numbers-controls {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -moz-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-pagination .devsite-pagination-next-button, devsite-pagination .devsite-pagination-previous-button {
    border: 0
    }
devsite-pagination .devsite-pagination-next-button:not([disabled]), devsite-pagination .devsite-pagination-previous-button:not([disabled]) {
    border: 0;
    color: var(--devsite-secondary-text-color)
    }
devsite-pagination .devsite-pagination-previous-button:before {
    content: "chevron_left"
    }
devsite-pagination .devsite-pagination-next-button:before {
    content: "chevron_right"
    }
devsite-pagination .devsite-pagination-page-numbers {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-pagination a[selected] {
    text-decoration: underline
    }
devsite-pagination .devsite-pagination-ellipsis {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
    padding-top: 1px
    }
[dir] devsite-pagination .button, [dir] devsite-pagination .button + .button {
    margin-left: 10px;
    margin-right: 10px
    }
devsite-panel {
    bottom: 0;
    display: block;
    height: var(--devsite-panel-height, auto);
    left: 0;
    max-height: var(--devsite-panel-max-height, 50vh);
    overflow: auto;
    position: fixed;
    right: 0;
    z-index: 1017
    }
devsite-panel[always-on-top] {
    z-index: 1019
    }
devsite-panel[devsite-size=content-area] {
    background-color: var(--devsite-background-1)
    }
devsite-playlist {
    display: block;
    margin-bottom: 48px
    }
devsite-playlist .devsite-playlist--inner {
    margin: 0 auto;
    max-width: var(--devsite-playlist-max-width);
    padding: 0 var(--devsite-playlist-padding-x)
    }
devsite-playlist .devsite-playlist--header {
    background-color: #133041
    }
devsite-playlist .devsite-playlist--header .devsite-playlist--inner {
    padding-bottom: 24px
    }
devsite-playlist .devsite-playlist--header-details {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
    }
devsite-playlist .devsite-playlist--header-badge-info, devsite-playlist .devsite-playlist--header-details-info {
    color: #fff;
    padding-top: 40px;
    width: calc(50% - 20px)
    }
devsite-playlist .devsite-playlist--header-badge-info {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative
    }
devsite-playlist .devsite-playlist--header-badge-info--bg {
    background: url(../images/playlist_header.svg) no-repeat 0 -20px/cover;
    content: "";
    height: 213px;
    left: 0;
    position: absolute;
    top: 0;
    width: 510px
    }
devsite-playlist .devsite-playlist--header-badge-info--container {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    justify-self: center;
    position: relative
    }
devsite-playlist .devsite-playlist-badge-details-icon, devsite-playlist .devsite-playlist-badge-details-icon-container {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-playlist .devsite-playlist-badge-details-icon-container-signin-enabled.devsite-playlist-badge-details-icon-container {
    margin-bottom: -48px;
    position: relative;
    z-index: 1
    }
devsite-playlist .devsite-playlist-badge-details-icon {
    background: var(--devsite-background-1);
    border-radius: 50%;
    height: 135px;
    padding: 7px;
    position: relative;
    width: 135px
    }
devsite-playlist .devsite-playlist-badge-details-icon-container-signin-enabled .devsite-playlist-badge-details-icon {
    -webkit-transform: translate3d(0, -44px, 0);
    transform: translate3d(0, -44px, 0);
    -webkit-transition: -webkit-transform 0.2s cubic-bezier(0, 0, 0.2, 1);
    transition: -webkit-transform 0.2s cubic-bezier(0, 0, 0.2, 1);
    transition: transform 0.2s cubic-bezier(0, 0, 0.2, 1);
    transition: transform 0.2s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0, 0, 0.2, 1)
    }
devsite-playlist .devsite-playlist--progress-bar--outer, devsite-playlist .devsite-playlist--progress-text, devsite-playlist .devsite-playlist-badge-details-action, devsite-playlist .devsite-playlist-badge-details-icon img, devsite-playlist .devsite-playlist-badge-details-subtext {
    opacity: 1;
    position: relative;
    -webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1), transform 0.2s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1), transform 0.2s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 1, 1);
    z-index: 2
    }
devsite-playlist .devsite-playlist-badge-details-icon img {
    -webkit-animation: badgeGrowIn 0.33s cubic-bezier(0.75, 0, 0.71, 0.97), badgeGrowOut 0.17s cubic-bezier(0.85, -0.14, 0.83, 0.83) 0.33s, badgeFadeIn 0.5s linear;
    animation: badgeGrowIn 0.33s cubic-bezier(0.75, 0, 0.71, 0.97), badgeGrowOut 0.17s cubic-bezier(0.85, -0.14, 0.83, 0.83) 0.33s, badgeFadeIn 0.5s linear;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
    }
devsite-playlist .devsite-playlist-badge-sharing {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-top: var(--devsite-secondary-border);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 12px -16px -16px;
    padding: 8px 0;
    -webkit-padding-start: 12px;
    -moz-padding-start: 12px;
    padding-inline-start: 12px
    }
devsite-playlist .devsite-playlist-share-buttons {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-playlist .devsite-playlist-badge-sharing span {
    color: var(--devsite-secondary-text-color);
    font-size: 14px;
    line-height: 1
    }
devsite-playlist .devsite-playlist-badge-sharing img {
    width: 18px
    }
devsite-playlist .devsite-playlist-badge-sharing button {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 0;
    box-shadow: none;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: auto;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 0;
    padding: 4px
    }
devsite-playlist .devsite-playlist-badge-sharing button:focus, devsite-playlist .devsite-playlist-badge-sharing button:hover {
    background: none
    }
devsite-playlist .devsite-playlist-badge-sharing button + button {
    margin: 0 8px
    }
devsite-playlist .devsite-playlist-badge-details-icon img {
    position: static
    }
devsite-playlist .devsite-playlist-badge-details-icon devsite-spinner {
    opacity: 0;
    position: absolute;
    -webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1)
    }
devsite-playlist .devsite-playlist--progress-text {
    color: var(--devsite-primary-text-color);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    text-align: center
    }
devsite-playlist .devsite-playlist--progress-bar {
    -webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1)
    }
devsite-playlist .devsite-playlist--progress-bar.hide {
    opacity: 0
    }
devsite-playlist .devsite-playlist--progress-bar--outer {
    background: var(--devsite-link-background-active);
    border-radius: 24px;
    height: 10px;
    margin: 14px 0 0;
    position: relative
    }
devsite-playlist .devsite-playlist--progress-bar--inner {
    background: var(--devsite-link-color);
    border-radius: 24px;
    display: inline-block;
    height: 100%;
    position: absolute;
    -webkit-transition: width 0.3s cubic-bezier(0, 0, 0.2, 1);
    transition: width 0.3s cubic-bezier(0, 0, 0.2, 1);
    white-space: nowrap;
    width: 0
    }
devsite-playlist .devsite-playlist-badge-details-action, devsite-playlist .devsite-playlist-badge-details-subtext {
    font-size: 14px;
    line-height: 16px;
    text-align: center
    }
devsite-playlist .devsite-playlist-badge-details-subtext {
    color: var(--devsite-secondary-text-color);
    padding: 28px 0 0
    }
devsite-playlist .devsite-playlist-badge-details-action {
    font-weight: 700;
    padding: 4px 0 0
    }
devsite-playlist .no-badge .devsite-playlist-badge-details-icon-container {
    display: none
    }
devsite-playlist .badge-earned .devsite-playlist-badge-details-subtext {
    padding: 0 0 12px
    }
devsite-playlist .not-eligible .devsite-playlist--progress-bar, devsite-playlist .not-eligible .devsite-playlist--progress-text {
    display: none
    }
devsite-playlist .not-eligible.no-badge .devsite-playlist-badge-details-subtext {
    padding-top: 0
    }
devsite-playlist .loading {
    pointer-events: none
    }
devsite-playlist .loading .devsite-playlist-badge-details-icon-container {
    bottom: 0;
    left: 0;
    margin-bottom: 0;
    position: absolute;
    right: 0;
    top: 0
    }
devsite-playlist .loading .devsite-playlist-badge-details-icon {
    background: 0;
    -webkit-transform: translatez(0);
    transform: translatez(0)
    }
devsite-playlist .loading .devsite-playlist--progress-bar--outer, devsite-playlist .loading .devsite-playlist--progress-text, devsite-playlist .loading .devsite-playlist-badge-details-action, devsite-playlist .loading .devsite-playlist-badge-details-subtext {
    opacity: 0
    }
devsite-playlist .loading .devsite-playlist-badge-details-icon img {
    opacity: 0;
    position: absolute
    }
devsite-playlist .loading .devsite-playlist-badge-details-icon devsite-spinner {
    opacity: 1
    }
devsite-playlist .devsite-playlist--header h1:first-of-type {
    color: #fff;
    font: var(--devsite-h1-font)
    }
devsite-playlist .devsite-playlist-details {
    color: var(--devsite-secondary-text-color);
    font-size: 12px;
    line-height: 16px
    }
devsite-playlist .devsite-playlist--header p {
    line-height: 24px;
    margin: 22px 0;
    padding: 0
    }
devsite-playlist .devsite-playlist-return-button {
    margin-top: 24px
    }
devsite-playlist .devsite-playlist-summary {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font: normal 700 12px/24px var(--devsite-primary-font-family)
    }
devsite-playlist .devsite-playlist-badge-details {
    background: var(--devsite-background-1);
    border-radius: 8px;
    height: auto;
    max-width: 213px;
    padding: 16px;
    width: 100%;
    min-width: 64px;
    min-height: 64px
    }
devsite-playlist .profile-notification {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-playlist .profile-notification--inner {
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color);
    border-radius: 4px;
    color: var(--devsite-secondary-text-color);
    margin: 0 auto;
    padding: 16px
    }
devsite-playlist .devsite-playlist--section {
    padding: 24px 0;
    position: relative
    }
devsite-playlist .devsite-playlist--section .arrow--up, devsite-playlist[not-signed-in] .devsite-playlist--item--meta em, devsite-playlist[not-signed-in] .devsite-playlist--section .playlist-skip {
    display: none
    }
devsite-playlist .devsite-playlist--item-top {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-playlist .devsite-playlist--item-top:before {
    background: var(--devsite-background-5);
    content: "";
    display: block;
    height: 0;
    -webkit-margin-start: 15px;
    -moz-margin-start: 15px;
    margin-inline-start: 15px;
    margin-top: 2px;
    position: absolute;
    top: 54px;
    -webkit-transition: height 0.2s cubic-bezier(0.4, 0, 1, 1), opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
    transition: height 0.2s cubic-bezier(0.4, 0, 1, 1), opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
    width: 1px;
    z-index: 1
    }
devsite-playlist .devsite-playlist--item-top-index {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0;
    -moz-box-flex: 0;
    -ms-flex: 0 0;
    flex: 0 0;
    position: relative;
    width: 30px
    }
devsite-playlist .devsite-playlist--item-top-index span {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--devsite-primary-text-color);
    border-radius: 50%;
    color: var(--devsite-inverted-text-color);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 30px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 2px;
    opacity: 1;
    width: 30px
    }
devsite-playlist .devsite-playlist--item-top-index i {
    color: var(--devsite-playlist-icon-color);
    font-size: 36px;
    height: 36px;
    left: -3px;
    opacity: 0;
    position: absolute;
    top: -1px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 36px
    }
devsite-playlist .devsite-playlist--item-top-index devsite-spinner {
    opacity: 0;
    position: absolute;
    top: 2px
    }
devsite-playlist .devsite-playlist--item-top-index devsite-spinner, devsite-playlist .devsite-playlist--item-top-index i, devsite-playlist .devsite-playlist--item-top-index span {
    -webkit-transition: background 0.2s cubic-bezier(0.4, 0, 1, 1), opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
    transition: background 0.2s cubic-bezier(0.4, 0, 1, 1), opacity 0.2s cubic-bezier(0.4, 0, 1, 1)
    }
devsite-playlist .devsite-playlist--item-top-controls {
    width: 32px
    }
devsite-playlist .devsite-playlist--item-top-controls button {
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color);
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 50%;
    color: var(--devsite-playlist-button-color, var(--devsite-primary-text-color));
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 32px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 0;
    padding: 0;
    width: 32px
    }
devsite-playlist .devsite-playlist--item-top-controls button:focus, devsite-playlist .devsite-playlist--item-top-controls button:hover {
    color: var(--devsite-playlist-button-color-hover)
    }
devsite-playlist .devsite-playlist--item-top-controls button:active {
    color: var(--devsite-playlist-button-color-active)
    }
devsite-playlist .devsite-playlist--item-top-controls button .material-icons {
    cursor: pointer;
    font-size: 24px;
    height: 24px;
    margin: 0;
    position: static;
    top: auto;
    width: 24px
    }
devsite-playlist .devsite-playlist--item-top-title {
    cursor: pointer;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0 18px
    }
devsite-playlist .devsite-playlist--item-top-title h2 {
    font-size: 28px;
    line-height: 36px;
    margin: 0;
    padding: 0
    }
devsite-playlist .devsite-playlist--item--content, devsite-playlist .devsite-playlist--item--meta {
    padding: 0 48px
    }
devsite-playlist .devsite-playlist--item--meta {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--devsite-secondary-text-color);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 12px;
    line-height: 16px;
    margin: 4px 0
    }
devsite-playlist .devsite-playlist--item--meta em {
    -webkit-padding-start: 16px;
    -moz-padding-start: 16px;
    padding-inline-start: 16px
    }
devsite-playlist .devsite-playlist--item--meta .material-icons {
    font-size: 18px;
    height: 18px;
    -webkit-margin-end: 4px;
    -moz-margin-end: 4px;
    margin-inline-end: 4px;
    width: 18px
    }
devsite-playlist .devsite-playlist--item--actions, devsite-playlist .devsite-playlist--item--content {
    display: none
    }
devsite-playlist .devsite-playlist--item--actions {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 8px 0 32px;
    -webkit-padding-start: 48px;
    -moz-padding-start: 48px;
    padding-inline-start: 48px
    }
devsite-playlist [ready] .devsite-playlist--item-top:before {
    height: calc(100% - 30px)
    }
devsite-playlist [expanded] {
    background: #f5f5f7 url(../images/playlist_active.svg) repeat-x top
    }
devsite-playlist [expanded] .arrow--down {
    display: none
    }
devsite-playlist [expanded] .arrow--up {
    display: block
    }
devsite-playlist [expanded] .devsite-playlist--item-top-index span {
    background: var(--devsite-link-color)
    }
devsite-playlist [expanded] .devsite-playlist--item--content {
    display: block
    }
devsite-playlist [expanded] .devsite-playlist--item--actions {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-playlist [type=game] .devsite-playlist--item--content, devsite-playlist [type=video] .devsite-playlist--item--content {
    padding: 12px 48px
    }
devsite-playlist [completing] devsite-spinner {
    opacity: 1
    }
devsite-playlist [completed] .devsite-playlist--item-top-index span {
    opacity: 0
    }
devsite-playlist [completed] .devsite-playlist--item-top-index i {
    opacity: 1;
    -webkit-transform: rotate(0);
    transform: rotate(0)
    }
devsite-playlist [completed] .playlist-skip {
    display: none
    }
devsite-playlist [completed][expanded] .devsite-playlist--item-top-index i {
    background-color: rgba(230, 240, 255, 0.24)
    }
devsite-playlist [last] .devsite-playlist--item-top:before {
    display: none
    }
devsite-playlist .devsite-playlist--section-quiz {
    border: var(--devsite-primary-border);
    border-radius: 4px;
    padding: 24px
    }
devsite-playlist .devsite-playlist--section-quiz h2 {
    margin: 0;
    padding: 0
    }
devsite-playlist .devsite-playlist--section-project-header {
    -webkit-box-align: start;
    -webkit-align-items: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0 8px
    }
devsite-playlist .devsite-playlist--project--status {
    background: var(--devsite-background-3);
    border-radius: 4px;
    font: 500 11px/16px var(--devsite-primary-font-family);
    letter-spacing: 0.8px;
    padding-block: 4px;
    padding-inline: 8px;
    text-transform: uppercase
    }
devsite-playlist .devsite-playlist--footer, devsite-playlist .devsite-playlist--section-quiz .devsite-playlist--item--actions {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-playlist .devsite-playlist--footer {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 20px;
    padding: 4px 0
    }
.devsite-playlist-dialog {
    box-shadow: 0 1px 3px 0 var(--devsite-elevation-key-shadow-color), 0 4px 8px 3px var(--devsite-elevation-ambient-shadow-color);
    background: var(--devsite-background-1);
    border-radius: 8px;
    padding: 24px;
    position: relative
    }
.devsite-playlist-dialog .devsite-playlist-dialog-spinner {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--devsite-background-1);
    bottom: 0;
    display: none;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 100
    }
.devsite-playlist-dialog.loading .devsite-playlist-dialog-spinner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
.devsite-playlist-dialog .devsite-playlist-dialog-inner {
    color: var(--devsite-secondary-text-color);
    position: relative
    }
.devsite-playlist-dialog .devsite-playlist-dialog-inner h4 {
    font-family: var(--devsite-headline-font-family);
    font-size: 16px;
    line-height: 24px;
    margin: 0 0 16px
    }
.devsite-playlist-dialog .devsite-playlist-dialog-inner label {
    font-size: 14px;
    line-height: 22px
    }
.devsite-playlist-dialog .devsite-playlist-dialog-inner p {
    color: var(--devsite-secondary-text-color);
    font-size: 12px;
    line-height: 16px
    }
@media screen and (max-width: 600px) {
    devsite-playlist .devsite-playlist--header-details {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
        }
    devsite-playlist .devsite-playlist--header-badge-info, devsite-playlist .devsite-playlist--header-details-info {
        width: 100%
        }
    devsite-playlist .devsite-playlist--header-badge-info--bg {
        background-position: 0;
        top: 84px
        }
    }
devsite-playlist-earnable-badges {
    display: block
    }
devsite-playlist-earnable-badges.loading {
    position: relative
    }
devsite-playlist-earnable-badges .spinner-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-playlist-summary {
    display: block
    }
devsite-playlist-summary.loading {
    position: relative
    }
devsite-playlist-summary .progress-container {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000
    }
devsite-playlist-summary .devsite-playlist-summary-image.hide, devsite-playlist-summary .devsite-playlist-summary-info.hide {
    opacity: 0;
    -webkit-transform: translatey(12px);
    transform: translatey(12px);
    -webkit-transition: opacity 0.213s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.213s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.213s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.213s cubic-bezier(0.4, 0, 1, 1);
    transition: transform 0.213s cubic-bezier(0.4, 0, 1, 1), opacity 0.213s cubic-bezier(0.4, 0, 1, 1);
    transition: transform 0.213s cubic-bezier(0.4, 0, 1, 1), opacity 0.213s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.213s cubic-bezier(0.4, 0, 1, 1)
    }
devsite-playlist-summary .devsite-playlist-summary-image, devsite-playlist-summary .devsite-playlist-summary-info {
    opacity: 1;
    -webkit-transform: translatey(0);
    transform: translatey(0);
    -webkit-transition: opacity 0.213s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.213s cubic-bezier(0, 0, 0.2, 1);
    transition: opacity 0.213s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.213s cubic-bezier(0, 0, 0.2, 1);
    transition: transform 0.213s cubic-bezier(0, 0, 0.2, 1), opacity 0.213s cubic-bezier(0, 0, 0.2, 1);
    transition: transform 0.213s cubic-bezier(0, 0, 0.2, 1), opacity 0.213s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.213s cubic-bezier(0, 0, 0.2, 1)
    }
devsite-playlist-summary .devsite-playlist-summary-progress-background {
    overflow: hidden
    }
devsite-playlist-summary.not-signed-in .devsite-playlist-summary-progress-background {
    margin-right: 0
    }
devsite-playlist-summary.not-signed-in .devsite-playlist-summary-progress-bar-value {
    display: none
    }
devsite-playlist-summary .devsite-playlist-summary-progress-bar {
    -webkit-transform: translatex(-101%);
    transform: translatex(-101%);
    -webkit-transition: -webkit-transform 0.213s cubic-bezier(0, 0, 0.2, 1);
    transition: -webkit-transform 0.213s cubic-bezier(0, 0, 0.2, 1);
    transition: transform 0.213s cubic-bezier(0, 0, 0.2, 1);
    transition: transform 0.213s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.213s cubic-bezier(0, 0, 0.2, 1)
    }
devsite-playlist-summary .devsite-playlist-summary-progress-bar-value:empty:before, devsite-playlist-summary .devsite-playlist-summary-status:empty:before {
    content: " "
    }
devsite-product-catalog .devsite-product-catalog-alphabet {
    border-bottom: var(--devsite-primary-border);
    border-top: var(--devsite-primary-border);
    color: var(--devsite-secondary-text-color);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 20px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 16px 0
    }
devsite-product-catalog .devsite-product-catalog-alphabet-link, devsite-product-catalog .devsite-product-catalog-alphabet-link-disabled {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 10px 0
    }
devsite-product-catalog .devsite-product-catalog-alphabet-letter:not(:last-child) {
    border-bottom: var(--devsite-primary-border)
    }
devsite-product-catalog .devsite-product-catalog-alphabet-letter-heading {
    margin: 20px 0
    }
devsite-product-catalog .devsite-product-catalog-alphabet-letter-list {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
    list-style: none;
    margin: 0 0 40px;
    padding: 0
    }
devsite-product-catalog .devsite-product-catalog-alphabet-letter-list-item {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    margin: 0 0 16px
    }
devsite-product-catalog .devsite-product-catalog-alphabet-letter-link {
    display: block;
    padding: 8px 0
    }
devsite-product-catalog .devsite-product-catalog-item-name {
    margin: 0
    }
devsite-product-catalog devsite-filter:not(:first-of-type) {
    border-top: var(--devsite-primary-border)
    }
devsite-product-catalog .devsite-filter-input + .devsite-product-catalog-alphabet {
    margin-top: 32px
    }
devsite-product-catalog .devsite-filter-input:valid + .devsite-product-catalog-alphabet {
    display: none
    }
@media screen and (max-width: 840px) {
    devsite-product-catalog .devsite-product-catalog-alphabet {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
        }
    devsite-product-catalog .devsite-product-catalog-alphabet-letter-list {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2
        }
    devsite-product-catalog .devsite-product-catalog-alphabet-link, devsite-product-catalog .devsite-product-catalog-alphabet-link-disabled {
        display: block;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 44px;
        -moz-box-flex: 0;
        -ms-flex: 0 0 44px;
        flex: 0 0 44px;
        text-align: center
        }
    }
@media screen and (max-width: 600px) {
    devsite-product-catalog .devsite-product-catalog-alphabet {
        padding: 0 0 20px
        }
    devsite-product-catalog .devsite-product-catalog-alphabet-letter-list {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1
        }
    }
devsite-progress {
    pointer-events: none;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scaley(0);
    transform: scaley(0);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
    transition: transform 0.2s ease, -webkit-transform 0.2s ease
    }
devsite-progress[type=indeterminate] {
    height: 2px;
    -webkit-transform: scaley(1);
    transform: scaley(1);
    contain: size layout style paint
    }
devsite-progress .devsite-progress--indeterminate {
    position: relative;
    height: 2px
    }
devsite-progress .devsite-progress--indeterminate-1, devsite-progress .devsite-progress--indeterminate-2, devsite-progress .devsite-progress--indeterminate-3, devsite-progress .devsite-progress--indeterminate-4 {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scalex(0);
    transform: scalex(0)
    }
devsite-progress .devsite-progress--indeterminate-1 {
    -webkit-animation: progress-indeterminate-1 2.5s linear infinite;
    animation: progress-indeterminate-1 2.5s linear infinite;
    background: var(--devsite-progress-background-1, var(--devsite-background-1));
    z-index: 1
    }
devsite-progress .devsite-progress--indeterminate-2 {
    -webkit-animation: progress-indeterminate-2 2.5s ease-in infinite;
    animation: progress-indeterminate-2 2.5s ease-in infinite;
    background: var(--devsite-progress-background-2, var(--devsite-background-1));
    z-index: 2
    }
devsite-progress .devsite-progress--indeterminate-3 {
    -webkit-animation: progress-indeterminate-3 2.5s ease-out infinite;
    animation: progress-indeterminate-3 2.5s ease-out infinite;
    background: var(--devsite-progress-background-3, var(--devsite-background-1));
    z-index: 3
    }
devsite-progress .devsite-progress--indeterminate-4 {
    -webkit-animation: progress-indeterminate-4 2.5s ease-out infinite;
    animation: progress-indeterminate-4 2.5s ease-out infinite;
    background: var(--devsite-progress-background-4, var(--devsite-background-1));
    z-index: 4
    }
@-webkit-keyframes progress-indeterminate-1 {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
        } 50%, to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
        }
    }
@keyframes progress-indeterminate-1 {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
        } 50%, to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
        }
    }
@-webkit-keyframes progress-indeterminate-2 {
    0%, 20% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
        } 70%, to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
        }
    }
@keyframes progress-indeterminate-2 {
    0%, 20% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
        } 70%, to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
        }
    }
@-webkit-keyframes progress-indeterminate-3 {
    0%, 60% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
        } 90%, to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
        }
    }
@keyframes progress-indeterminate-3 {
    0%, 60% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
        } 90%, to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
        }
    }
@-webkit-keyframes progress-indeterminate-4 {
    0%, 75% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
        } to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
        }
    }
@keyframes progress-indeterminate-4 {
    0%, 75% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
        } to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
        }
    }
devsite-quiz {
    display: block;
    font-size: 14px
    }
devsite-quiz input[type=checkbox], devsite-quiz input[type=radio] {
    margin-top: 0;
    position: relative;
    top: 3px
    }
devsite-quiz devsite-bookmark input.bookmark-checkbox {
    top: 0
    }
devsite-quiz input + label {
    font-size: 14px;
    vertical-align: middle
    }
devsite-quiz devsite-select .devsite-select-toggle {
    min-width: 200px
    }
devsite-quiz [answered] .variant-success:checked {
    color: var(--devsite-quiz-correct-color)
    }
devsite-quiz [answered] .variant-success:checked:focus:before {
    background: var(--devsite-quiz-correct-background)
    }
devsite-quiz [answered] input[type=text].variant-success {
    background-color: var(--devsite-quiz-correct-background);
    border-color: var(--devsite-quiz-correct-border-color)
    }
devsite-quiz [answered] input[type=text]:focus.variant-success {
    border-bottom-color: var(--devsite-quiz-correct-border-color-focus)
    }
devsite-quiz [answered] .variant-error:checked {
    color: var(--devsite-quiz-error-color)
    }
devsite-quiz [answered] .variant-error:checked:focus:before {
    background: var(--devsite-quiz-error-background)
    }
devsite-quiz [answered] input[type=text].variant-error {
    background-color: var(--devsite-quiz-error-background);
    border-color: var(--devsite-quiz-error-border-color)
    }
devsite-quiz [answered] input[type=text]:focus.variant-error {
    border-bottom-color: var(--devsite-quiz-error-color)
    }
devsite-quiz .devsite-quiz-header {
    background: var(--devsite-background-2);
    border-bottom: var(--devsite-primary-border)
    }
devsite-quiz .devsite-quiz-header-content {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto;
    padding: 48px 16px
    }
devsite-quiz .devsite-quiz-title {
    margin-bottom: 8px;
    padding: 0;
    top: 0
    }
devsite-quiz .devsite-quiz-tagline {
    color: var(--devsite-quiz-secondary-text-color);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    margin: 0
    }
devsite-quiz .devsite-quiz-tagline:empty {
    min-height: 40px
    }
devsite-quiz .devsite-quiz-return-button {
    margin-top: 15px
    }
devsite-quiz .devsite-quiz-badge {
    display: none
    }
devsite-quiz .devsite-quiz-partially-correct-indicator {
    background-color: var(--devsite-quiz-partially-correct-indicator-background)
    }
devsite-quiz .devsite-quiz-body {
    margin: 0 auto;
    padding: 48px 16px 0
    }
devsite-quiz [answered] .devsite-quiz-feedback {
    margin-bottom: 18px;
    opacity: 1;
    -webkit-transform: translatex(0);
    transform: translatex(0);
    -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0, 0, 0.2, 1);
    transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0, 0, 0.2, 1);
    transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1);
    transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0, 0, 0.2, 1)
    }
devsite-quiz .devsite-quiz-submit-error {
    background: var(--devsite-quiz-error-background);
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    line-height: 30px;
    padding: 6px 12px
    }
devsite-quiz .devsite-quiz-submit-error i {
    color: var(--devsite-quiz-error-color);
    line-height: 30px;
    -webkit-margin-end: 8px;
    -moz-margin-end: 8px;
    margin-inline-end: 8px
    }
devsite-quiz .devsite-quiz-submit-button {
    margin-top: 64px
    }
devsite-quiz .devsite-quiz-submit-button devsite-spinner {
    display: inline-block;
    -webkit-margin-start: 15px;
    -moz-margin-start: 15px;
    margin-inline-start: 15px;
    top: 5px
    }
devsite-quiz .devsite-quiz-question-list {
    font: 400 18px/30px var(--devsite-headline-font-family);
    font-weight: 500;
    list-style-position: inside;
    -webkit-padding-start: 0;
    -moz-padding-start: 0;
    padding-inline-start: 0
    }
devsite-quiz .devsite-quiz-question {
    margin: 0 0 64px
    }
devsite-quiz .devsite-quiz-question:last-child {
    margin-bottom: 0
    }
devsite-quiz .devsite-quiz-question-header {
    font: 400 18px/30px var(--devsite-headline-font-family);
    font-weight: 500;
    margin: 0
    }
devsite-quiz .devsite-quiz-question-sub-header {
    color: var(--devsite-quiz-secondary-text-color);
    font-size: 12px;
    font-style: italic;
    line-height: 16px;
    margin: 0
    }
devsite-quiz .devsite-quiz-answer {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin: 16px 0;
    position: relative
    }
devsite-quiz .devsite-quiz-answer label {
    font-family: var(--devsite-primary-font-family);
    font-weight: 400;
    line-height: 24px;
    -webkit-margin-end: 15px;
    -moz-margin-end: 15px;
    margin-inline-end: 15px
    }
devsite-quiz .devsite-quiz-answer .devsite-landing-row-item-media {
    -webkit-margin-end: 15px;
    -moz-margin-end: 15px;
    margin-inline-end: 15px;
    min-width: auto
    }
devsite-quiz .devsite-quiz-match-question {
    border-top: var(--devsite-primary-border);
    margin: 24px 0 0
    }
devsite-quiz .devsite-quiz-match-question-row {
    border-bottom: var(--devsite-primary-border);
    display: block
    }
devsite-quiz .devsite-quiz-feedback, devsite-quiz .devsite-quiz-match-question-row-element {
    margin: 24px 0
    }
devsite-quiz .devsite-quiz-problem-item {
    font-size: 14px;
    line-height: 20px;
    margin: 0
    }
devsite-quiz .devsite-quiz-fill-in-the-blank-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: 14px;
    margin: 8px 0 0
    }
devsite-quiz .devsite-quiz-fill-in-the-blank-question {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: block;
    line-height: 32px;
    margin-bottom: 0
    }
devsite-quiz .devsite-quiz-fill-in-the-blank-question + .devsite-quiz-feedback {
    margin-top: 8px
    }
devsite-quiz .devsite-quiz-text-input {
    font-family: var(--devsite-primary-font-family);
    font-size: 14px;
    font-weight: 400;
    -webkit-margin-start: 0;
    -moz-margin-start: 0;
    margin-inline-start: 0;
    padding: 3px 7px
    }
devsite-quiz .devsite-quiz-text-input::-webkit-input-placeholder {
    font-size: 14px;
    font-style: italic;
    line-height: 20px
    }
devsite-quiz .devsite-quiz-text-input::-moz-placeholder {
    font-size: 14px;
    font-style: italic;
    line-height: 20px
    }
devsite-quiz .devsite-quiz-text-input:-ms-input-placeholder {
    font-size: 14px;
    font-style: italic;
    line-height: 20px
    }
devsite-quiz .devsite-quiz-text-input::-ms-input-placeholder {
    font-size: 14px;
    font-style: italic;
    line-height: 20px
    }
devsite-quiz .devsite-quiz-text-input::placeholder {
    font-size: 14px;
    font-style: italic;
    line-height: 20px
    }
devsite-quiz .devsite-quiz-footer {
    background: transparent;
    min-height: 48px;
    -webkit-transition: background 0.2s cubic-bezier(0.4, 0, 1, 1);
    transition: background 0.2s cubic-bezier(0.4, 0, 1, 1);
    margin: 64px 0 -68px
    }
devsite-quiz devsite-badge-awarded {
    max-width: 720px;
    display: block;
    margin: 0 auto
    }
devsite-quiz [show] {
    background: var(--devsite-background-2);
    -webkit-transition: background 0.2s cubic-bezier(0, 0, 0.2, 1);
    transition: background 0.2s cubic-bezier(0, 0, 0.2, 1)
    }
devsite-quiz [show] .devsite-quiz-footer-content {
    opacity: 1;
    -webkit-transform: translatey(0);
    transform: translatey(0);
    -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0, 0, 0.2, 1);
    transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0, 0, 0.2, 1);
    transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1);
    transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0, 0, 0.2, 1)
    }
devsite-quiz .devsite-quiz-footer-content {
    opacity: 0;
    padding: 48px 16px;
    -webkit-transform: translatey(24px);
    transform: translatey(24px);
    -webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1), transform 0.2s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1), transform 0.2s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 1, 1)
    }
devsite-quiz .static-badge-awarded-container {
    min-height: 68px;
    background: var(--devsite-background-2)
    }
devsite-quiz .static-badge-awarded-container .devsite-badger-award-inner:first-child {
    padding-top: 30px
    }
devsite-quiz .static-badge-awarded-container .devsite-badger-award-inner:last-child {
    padding-bottom: 30px
    }
devsite-quiz .devsite-quiz-results-container {
    width: 100%
    }
devsite-quiz .devsite-quiz-footer-header {
    font: 400 32px/40px var(--devsite-headline-font-family)
    }
devsite-quiz .devsite-quiz-score {
    font-weight: 500
    }
devsite-quiz .devsite-quiz-score-copy {
    font: 400 24px/32px var(--devsite-headline-font-family);
    margin-bottom: 8px
    }
devsite-quiz .devsite-quiz-score-success {
    font-size: 20px;
    margin-bottom: 20px
    }
devsite-quiz .devsite-quiz-score-fail .devsite-quiz-score {
    color: var(--devsite-quiz-error-color)
    }
devsite-quiz .devsite-quiz-score-success .devsite-quiz-score {
    color: var(--devsite-quiz-correct-color)
    }
devsite-quiz .devsite-quiz-score-subtext {
    color: var(--devsite-quiz-secondary-text-color);
    margin-top: 8px
    }
devsite-quiz .devsite-quiz-action-buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-quiz .devsite-quiz-rating {
    border-top: var(--devsite-primary-border);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 32px 0
    }
devsite-quiz .devsite-quiz-feedback {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--devsite-primary-text-color);
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin: 0;
    opacity: 0;
    position: relative;
    -webkit-transform: translatex(-24px);
    transform: translatex(-24px);
    -webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1), transform 0.2s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1), transform 0.2s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 1, 1)
    }
devsite-quiz .devsite-quiz-feedback-container {
    border-radius: 4px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin: -9px 0;
    padding: 4px 12px
    }
devsite-quiz .devsite-quiz-feedback-container:before {
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal;
    line-height: inherit;
    -webkit-margin-end: 8px;
    -moz-margin-end: 8px;
    margin-inline-end: 8px
    }
devsite-quiz .correct {
    background: var(--devsite-quiz-correct-background)
    }
devsite-quiz .correct:before {
    color: var(--devsite-quiz-correct-color);
    content: "check_circle_outline"
    }
devsite-quiz .partially-correct {
    background: var(--devsite-quiz-partially-correct-background);
    margin: 15px 0 0
    }
devsite-quiz .partially-correct:before {
    color: var(--devsite-quiz-partially-correct-color);
    content: "remove_circle_outline"
    }
devsite-quiz .incorrect {
    background: var(--devsite-quiz-error-background)
    }
devsite-quiz .incorrect:before {
    color: var(--devsite-quiz-error-color);
    content: "not_interested"
    }
devsite-quiz .devsite-quiz-feedback-text {
    font-family: var(--devsite-headline-font-family);
    font-size: 14px;
    line-height: 20px;
    margin: 5px 0
    }
devsite-quiz .devsite-quiz-feedback-title {
    font-family: var(--devsite-headline-font-family);
    font-size: 16px;
    font-weight: 500
    }
devsite-quiz .devsite-quiz-feedback-message {
    font-family: var(--devsite-primary-font-family)
    }
@media screen and (max-width: 600px) {
    devsite-quiz .devsite-quiz-question {
        margin-bottom: 36px
        }
    devsite-quiz .devsite-quiz-match-question-row-element {
        margin: 12px 0
        }
    devsite-quiz .devsite-quiz-feedback {
        margin: 0 0 12px;
        top: 0
        }
    }
@media screen and (min-width: 601px) {
    devsite-quiz .devsite-quiz-body, devsite-quiz .devsite-quiz-footer-content, devsite-quiz .devsite-quiz-header-content {
        -webkit-padding-start: 24px;
        -moz-padding-start: 24px;
        padding-inline-start: 24px;
        -webkit-padding-end: 24px;
        -moz-padding-end: 24px;
        padding-inline-end: 24px
        }
    devsite-quiz .devsite-quiz-badge {
        display: block;
        height: 122px;
        min-width: 122px;
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
        width: 122px
        }
    devsite-quiz .devsite-quiz-badge.show {
        -webkit-animation: badgeGrowIn 0.33s cubic-bezier(0.75, 0, 0.71, 0.97), badgeGrowOut 0.17s cubic-bezier(0.85, -0.14, 0.83, 0.83) 0.33s, badgeFadeIn 0.5s linear;
        animation: badgeGrowIn 0.33s cubic-bezier(0.75, 0, 0.71, 0.97), badgeGrowOut 0.17s cubic-bezier(0.85, -0.14, 0.83, 0.83) 0.33s, badgeFadeIn 0.5s linear;
        -webkit-margin-start: 48px;
        -moz-margin-start: 48px;
        margin-inline-start: 48px;
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
        }
    devsite-quiz .devsite-quiz-badge img {
        height: 120px;
        width: 120px
        }
    devsite-quiz .devsite-quiz-match-question {
        border: 0;
        display: table;
        max-width: 600px;
        width: 100%
        }
    devsite-quiz .devsite-quiz-match-question-row {
        border: 0;
        display: table-row
        }
    devsite-quiz .devsite-quiz-match-question-row-element, devsite-quiz .devsite-quiz-match-question-row > .devsite-quiz-feedback {
        display: table-cell;
        margin: 0;
        padding: 24px;
        position: relative;
        top: 0;
        vertical-align: middle
        }
    devsite-quiz .devsite-quiz-match-question-row-element {
        border-top: var(--devsite-primary-border)
        }
    devsite-quiz .devsite-quiz-match-question-row:last-child > .devsite-quiz-match-question-row-element {
        border-bottom: var(--devsite-primary-border)
        }
    devsite-quiz .devsite-quiz-problem {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-padding-start: 0;
        -moz-padding-start: 0;
        padding-inline-start: 0;
        width: 100%
        }
    devsite-quiz .devsite-quiz-answer {
        -webkit-padding-end: 0;
        -moz-padding-end: 0;
        padding-inline-end: 0
        }
    devsite-quiz .devsite-quiz-feedback-container {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex
        }
    }
@media screen and (min-width: 841px) {
    devsite-quiz .devsite-quiz-body, devsite-quiz .devsite-quiz-footer-content, devsite-quiz .devsite-quiz-header-content {
        max-width: 768px
        }
    devsite-quiz .devsite-quiz-header-text {
        max-width: 488px
        }
    devsite-quiz .devsite-quiz-footer {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
        }
    devsite-quiz .devsite-quiz-footer-content {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%
        }
    devsite-quiz .devsite-quiz-footer-content + .devsite-quiz-footer-content {
        margin-top: 0
        }
    devsite-quiz .devsite-quiz-footer-content:nth-last-child(2), devsite-quiz .devsite-quiz-footer-content:nth-last-child(2) + .devsite-quiz-footer-content {
        max-width: 384px
        }
    devsite-quiz .devsite-quiz-footer-content:nth-last-child(2) {
        -webkit-box-pack: end;
        -webkit-justify-content: flex-end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end
        }
    }
devsite-recommendations {
    border-top: var(--devsite-primary-border);
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 40px -40px -40px;
    padding: 20px 40px 40px
    }
body[layout=full] devsite-recommendations {
    padding: 12px 0
    }
body[layout=docs][template=landing] devsite-recommendations {
    margin: 0;
    padding: 12px 40px
    }
devsite-recommendations .significatio-overview {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative
    }
body[layout=full] devsite-recommendations .significatio-overview {
    margin: 0 auto
    }
body[layout=full] devsite-recommendations .significatio-body, body[layout=full] devsite-recommendations .significatio-overview {
    max-width: 1488px;
    padding: 0 24px
    }
devsite-recommendations .significatio-heading {
    font: var(--devsite-h2-font);
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding-right: 4px
    }
devsite-recommendations .significatio-body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 12px 0 0;
    width: 100%
    }
body[layout=full] devsite-recommendations .significatio-body {
    margin: 16px auto 0
    }
devsite-recommendations .significatio-heading-icon {
    fill: currentColor;
    margin-inline: 0 4px;
    width: 24px
    }
devsite-recommendations .significatio-buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
    }
devsite-recommendations .significatio-buttons button {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 20px;
    height: 40px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0;
    -webkit-transition: background 0.2s;
    transition: background 0.2s;
    width: 40px
    }
devsite-recommendations .significatio-buttons button:focus, devsite-recommendations .significatio-buttons button:hover {
    background-color: #aecbfa
    }
devsite-recommendations .significatio-buttons .material-icons {
    top: auto
    }
devsite-recommendations .significatio-buttons .material-icons:not(:link) {
    pointer-events: none
    }
devsite-recommendations .significatio-loading {
    display: none
    }
devsite-recommendations[loading] .significatio-loading {
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1
    }
devsite-recommendations .significatio-loading devsite-spinner {
    margin: 0 auto
    }
devsite-recommendations .significatio-recommendations {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0 24px
    }
devsite-recommendations:not([loading]) .significatio-recommendations {
    width: 100%
    }
devsite-recommendations .significatio-card {
    background: var(--devsite-card-background);
    border: var(--devsite-card-border);
    border-radius: var(--devsite-card-border-radius);
    box-shadow: var(--devsite-card-box-shadow);
    color: var(--devsite-primary-text-color);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1;
    -moz-box-flex: 1;
    -ms-flex: 1 1;
    flex: 1 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: calc(33.333333% - 16px);
    min-width: 0;
    opacity: 0;
    padding: 18px 20px 20px;
    -webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1)
    }
devsite-recommendations .significatio-card:hover {
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 1px 3px 1px var(--devsite-elevation-ambient-shadow-color)
    }
devsite-recommendations .significatio-card.error {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-recommendations .significatio-card[show] {
    opacity: 1
    }
devsite-recommendations .significatio-card-heading {
    font: 500 16px/24px var(--devsite-primary-font-family);
    margin: 0 0 8px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--devsite-link-color)
    }
devsite-recommendations .significatio-card-description {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-size: 14px;
    -webkit-line-clamp: 2;
    margin: 0 0 20px;
    max-height: 48px;
    overflow: hidden
    }
devsite-recommendations .significatio-card.error .significatio-card-description {
    color: #80868b;
    font: 400 12px/16px var(--devsite-primary-font-family);
    letter-spacing: 0;
    -webkit-line-clamp: 3;
    margin: 12px 0;
    text-align: center
    }
devsite-recommendations .significatio-card.error .significatio-card-description + .significatio-card-description {
    margin-top: 0
    }
devsite-recommendations .significatio-card-meta {
    font: 400 14px/16px var(--devsite-primary-font-family);
    color: var(--devsite-secondary-text-color);
    margin: auto 0 0
    }
devsite-recommendations .info-container, devsite-recommendations .significatio-popout-container, devsite-recommendations .significatio-recommend-popout-container {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    position: relative
    }
devsite-recommendations .info-button, devsite-recommendations .significatio-popout-toggle {
    color: #5f6368
    }
devsite-recommendations .significatio-attr-toggle {
    height: 16px;
    color: #80868b;
    padding: 0 5px;
    min-width: 0;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: visible
    }
devsite-recommendations .significatio-attr-toggle .significatio-attr-info {
    height: 16px;
    width: 16px;
    fill: #80868b;
    position: relative;
    top: -2px;
    margin: 0
    }
devsite-recommendations .significatio-attr h4 {
    font: 500 14px/16px var(--devsite-primary-font-family);
    color: #3c4043;
    line-height: 20px
    }
devsite-recommendations .significatio-attr p {
    font: 400 14px/16px var(--devsite-primary-font-family);
    color: #3c4043;
    line-height: 20px
    }
devsite-recommendations .significatio-info-container {
    border-radius: 50%;
    height: 36px;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    transition: opacity 0.2s, -webkit-transform 0.2s;
    transition: opacity 0.2s, transform 0.2s;
    transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s
    }
devsite-recommendations .significatio-info-container:hover {
    background-color: var(--devsite-background-4)
    }
devsite-recommendations .significatio-error-icon, devsite-recommendations .significatio-icon-info {
    fill: currentColor;
    vertical-align: text-bottom;
    width: 18px;
    height: 36px
    }
devsite-recommendations .significatio-popout {
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 1px 3px 1px var(--devsite-elevation-ambient-shadow-color);
    background: var(--devsite-background-1);
    max-width: 400px;
    opacity: 0;
    padding: 20px 24px;
    position: absolute;
    top: calc(100% + 8px);
    -webkit-transform: translatey(-12px);
    transform: translatey(-12px);
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    transition: opacity 0.2s, -webkit-transform 0.2s;
    transition: opacity 0.2s, transform 0.2s;
    transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s
    }
[dir=ltr] devsite-recommendations .significatio-popout {
    left: -12px
    }
[dir=rtl] devsite-recommendations .significatio-popout {
    right: -12px
    }
devsite-recommendations .significatio-popout.significatio-attr {
    box-shadow: 0 1px 3px 0 var(--devsite-elevation-key-shadow-color), 0 4px 8px 3px var(--devsite-elevation-ambient-shadow-color);
    border-radius: 4px;
    padding: 16px 17px;
    width: 150px
    }
[dir=ltr] devsite-recommendations .significatio-popout.significatio-attr {
    left: calc(-75px + 50%)
    }
[dir=rtl] devsite-recommendations .significatio-popout.significatio-attr {
    right: calc(-75px + 50%)
    }
devsite-recommendations .significatio-popout.significatio-attr h4 {
    margin-bottom: 8px
    }
devsite-recommendations .significatio-popout.significatio-attr p {
    margin-bottom: 0
    }
devsite-recommendations .significatio-popout-heading {
    margin-top: 0
    }
[dir=ltr] body[layout=full] devsite-recommendations .significatio-popout {
    right: 32px
    }
[dir=rtl] body[layout=full] devsite-recommendations .significatio-popout {
    left: 32px
    }
devsite-recommendations .significatio-popout[active] {
    opacity: 1;
    -webkit-transform: translatey(0);
    transform: translatey(0)
    }
devsite-recommendations .significatio-popout p {
    margin-top: 0
    }
devsite-recommendations .significatio-interaction-container {
    height: 36px
    }
devsite-recommendations .significatio-internal-only {
    line-height: 12px;
    size: 12px;
    margin: 14px 0;
    color: #a50e0e
    }
@media screen and (max-width: 1253px) {
    body[layout] devsite-recommendations .significatio-recommendations {
        display: block
        }
    body[layout] devsite-recommendations .significatio-card {
        max-width: none
        }
    [dir] body[layout] devsite-recommendations .significatio-card:not(:first-child) {
        margin: 24px 0 0
        }
    }
@media screen and (max-width: 840px) {
    body[layout][template] devsite-recommendations {
        margin: 24px -24px -24px;
        padding: 24px
        }
    body[layout=full] devsite-recommendations .significatio-body, body[layout=full] devsite-recommendations .significatio-overview {
        padding: 0
        }
    [dir=ltr] body[layout=full] devsite-recommendations .significatio-popout {
        right: -8px
        }
    [dir=rtl] body[layout=full] devsite-recommendations .significatio-popout {
        left: -8px
        }
    }
@media screen and (max-width: 600px) {
    body[layout][template] devsite-recommendations {
        margin: 32px -16px -16px;
        padding: 16px
        }
    [dir] body[layout] devsite-recommendations .significatio-card:not(:first-child) {
        margin: 16px 0 0
        }
    }
devsite-recommendations-dropdown {
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1
    }
.devsite-recommendations-dropdown-toggle {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
.devsite-recommendations-dropdown-icon {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    pointer-events: none;
    top: 0
    }
[dir=ltr] .devsite-recommendations-dropdown-icon {
    right: 8px
    }
[dir=rtl] .devsite-recommendations-dropdown-icon {
    left: 8px
    }
.devsite-recommendations-dropdown-icon:before {
    font-size: 18px;
    content: "keyboard_arrow_down"
    }
.devsite-recommendations-dropdown-toggle.active > .devsite-recommendations-dropdown-icon:before {
    content: "keyboard_arrow_up"
    }
.devsite-recommendations-dropdown-list {
    background: var(--devsite-background-1);
    border: var(--devsite-list-border, var(--devsite-secondary-border));
    border-radius: var(--devsite-list-border-radius, 2px);
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color);
    display: none;
    font: 400 14px/20px var(--devsite-primary-font-family);
    opacity: 0;
    outline: 0;
    overflow-y: auto;
    pointer-events: none;
    position: absolute;
    -webkit-transition: opacity 0.2s, visibility 0.2s;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 1005;
    list-style-type: none;
    padding: 0 14px
    }
.devsite-recommendations-dropdown-list.active {
    display: block;
    opacity: 1;
    pointer-events: auto
    }
devsite-recommendations-dropdown .devsite-select-item {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0;
    min-height: 48px;
    min-width: 100%;
    white-space: nowrap;
    border-bottom: 1px solid #dadce0;
    padding: 14px 0
    }
devsite-recommendations-dropdown .devsite-select-item:hover {
    background-color: var(--devsite-background-3);
    cursor: pointer
    }
devsite-recommendations-dropdown .devsite-select-item > .significatio-card-heading {
    margin: 0
    }
devsite-recommendations-sidebar {
    display: var(--devsite-js-recommendations-sidebar-display, block);
    position: relative
    }
devsite-recommendations-sidebar .devsite-recommendations-sidebar-heading {
    font-weight: 700;
    margin-bottom: 8px;
    -webkit-margin-start: -8px;
    -moz-margin-start: -8px;
    margin-inline-start: -8px
    }
devsite-recommendations-sidebar .devsite-recommendations-sidebar-heading-link {
    color: var(--devsite-recommendations-accent);
    padding: 0
    }
devsite-recommendations-sidebar .devsite-nav-text, devsite-recommendations-sidebar .devsite-recommendations-sidebar-icon {
    pointer-events: none
    }
devsite-recommendations-sidebar .devsite-recommendations-sidebar-icon {
    fill: var(--devsite-recommendations-accent);
    height: 24px;
    -webkit-margin-end: 8px;
    -moz-margin-end: 8px;
    margin-inline-end: 8px;
    width: 24px
    }
devsite-recommendations-sidebar .devsite-nav-active .devsite-recommendations-sidebar-icon, devsite-recommendations-sidebar .devsite-recommendations-sidebar-heading-link:focus .devsite-recommendations-sidebar-icon, devsite-recommendations-sidebar .devsite-recommendations-sidebar-heading-link:hover .devsite-recommendations-sidebar-icon {
    fill: var(--devsite-nav-color-hover, var(--devsite-link-color))
    }
devsite-recommendations-sidebar > .devsite-nav-list {
    -webkit-border-start: var(--devsite-toc-border-width, 4px) solid var(--devsite-recommendations-accent);
    -moz-border-start: var(--devsite-toc-border-width, 4px) solid var(--devsite-recommendations-accent);
    border-inline-start: var(--devsite-toc-border-width, 4px) solid var(--devsite-recommendations-accent);
    -webkit-padding-start: var(--devsite-nav-list-padding-x-start, 12px);
    -moz-padding-start: var(--devsite-nav-list-padding-x-start, 12px);
    padding-inline-start: var(--devsite-nav-list-padding-x-start, 12px)
    }
devsite-recommendations-sidebar .devsite-nav-item:first-of-type, devsite-recommendations-sidebar .devsite-nav-title:first-of-type {
    padding-top: 0
    }
devsite-recommendations-sidebar .devsite-nav-title {
    padding-bottom: 0;
    text-decoration: none
    }
devsite-recommendations-sidebar .significatio-card-meta {
    color: var(--devsite-secondary-text-color);
    font-size: 11px;
    line-height: 14px;
    margin: 4px 0 0
    }
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
        } to {
        opacity: 1
        }
    }
@keyframes fadeIn {
    0% {
        opacity: 0
        } to {
        opacity: 1
        }
    }
devsite-recommended-content:not(:defined) {
    min-height: 354px
    }
@keyframes pulse {
    0%, to {
        opacity: 1
        } 50% {
        opacity: .5
        }
    }
devsite-recommended-content .skeleton-filters, devsite-recommended-content .skeleton-list {
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
    list-style: none;
    padding: 0
    }
devsite-recommended-content .skeleton-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--devsite-item-gap, 24px);
    -webkit-flex-wrap: var(--devsite-recommended-content-filters-flex-wrap);
    -ms-flex-wrap: var(--devsite-recommended-content-filters-flex-wrap);
    flex-wrap: var(--devsite-recommended-content-filters-flex-wrap);
    padding-bottom: 38px
    }
devsite-recommended-content .skeleton-filters {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    -webkit-flex-wrap: var(--devsite-recommended-content-filters-flex-wrap);
    -ms-flex-wrap: var(--devsite-recommended-content-filters-flex-wrap);
    flex-wrap: var(--devsite-recommended-content-filters-flex-wrap);
    overflow: hidden;
    padding-bottom: 2px
    }
devsite-recommended-content .skeleton-header {
    grid-area: header
    }
devsite-recommended-content .skeleton-item {
    align-self: start;
    background: var(--tenant-background-1);
    border: var(--tenant-primary-border);
    border-radius: 8px;
    display: grid;
    grid: var(--skeleton-item-grid);
    margin: 0;
    padding: 16px
    }
devsite-recommended-content .skeleton-filters .skeleton-item {
    gap: 8px 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0
    }
devsite-recommended-content .skeleton-list .skeleton-item {
    gap: 8px 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
    }
devsite-recommended-content .skeleton-filters, devsite-recommended-content .skeleton-filters-header, devsite-recommended-content .skeleton-item-heading, devsite-recommended-content .skeleton-item-icon, devsite-recommended-content .skeleton-item-meta, devsite-recommended-content .skeleton-item-text {
    -webkit-animation: pulse 2s infinite;
    animation: pulse 2s infinite
    }
devsite-recommended-content .skeleton-filters-header > div, devsite-recommended-content .skeleton-item-heading > div, devsite-recommended-content .skeleton-item-icon, devsite-recommended-content .skeleton-item-meta, devsite-recommended-content .skeleton-item-text > div {
    background: var(--tenant-background-3);
    border-radius: 4px
    }
devsite-recommended-content .skeleton-filters-header {
    height: 40px;
    padding-top: 6px
    }
devsite-recommended-content .skeleton-filters-header > div {
    border: var(--tenant-primary-border);
    background: var(--tenant-background-1);
    width: 20%;
    height: 24px
    }
devsite-recommended-content .skeleton-item-heading > div {
    height: 26px
    }
devsite-recommended-content .skeleton-item-heading > div:first-child {
    margin-block: 4px 0;
    width: 95%
    }
devsite-recommended-content .skeleton-item-heading > div:nth-child(2) {
    margin-block: 8px 0;
    width: 55%
    }
devsite-recommended-content .skeleton-item-meta, devsite-recommended-content .skeleton-item-text {
    margin-block: 4px 0
    }
devsite-recommended-content .skeleton-item-meta {
    height: 14px;
    width: 45%
    }
devsite-recommended-content .skeleton-item-text > div {
    height: 14px
    }
devsite-recommended-content .skeleton-item-text > div:first-child {
    width: 100%
    }
devsite-recommended-content .skeleton-item-text > div:nth-child(2) {
    margin-block: 8px 0;
    width: 70%
    }
devsite-recommended-content .skeleton-item-text > div:nth-child(3) {
    margin-block: 8px 0;
    width: 60%
    }
devsite-recommended-content .skeleton-item-icon {
    height: 32px;
    width: 32px
    }
@media (max-width: 1128px) {
    devsite-recommended-content:not(:defined) {
        min-height: 496px
        }
    devsite-recommended-content .skeleton-filters-header {
        height: 114px
        }
    devsite-recommended-content .skeleton-filters {
        padding-bottom: 6px
        }
    devsite-recommended-content .skeleton-list .skeleton-item:nth-child(4) {
        display: none
        }
    }
@media (max-width: 820px) {
    devsite-recommended-content .skeleton-list .skeleton-item:nth-child(3) {
        display: none
        }
    }
@media (max-width: 600px) {
    devsite-recommended-content:not(:defined) {
        min-height: 334px
        }
    devsite-recommended-content .skeleton-list .skeleton-item:nth-child(2) {
        display: none
        }
    devsite-recommended-content .skeleton-list {
        padding-bottom: 18px
        }
    devsite-recommended-content .skeleton-list .skeleton-item {
        max-width: 85%
        }
    devsite-recommended-content .skeleton-filters {
        padding-bottom: 2px
        }
    devsite-recommended-content .skeleton-filters-header {
        height: 40px
        }
    }
devsite-recommended-content .devsite-recommended-content-filters-spacer {
    min-height: 100px
    }
devsite-recommended-content .devsite-recommended-content-profile-cta {
    min-height: 46px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 16px;
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
    --devsite-background-button-background: transparent;
    --devsite-background-button-background-hover: transparent;
    --devsite-background-button-border-color-hover: var(--devsite-background-button-border-color)
    }
devsite-recommended-content .devsite-recommended-content-profile-cta .devsite-recommended-content-profile-cta-badge {
    height: 46px;
    width: 190px;
    border-bottom: 1px solid #dadce0
    }
devsite-recommended-content .devsite-recommended-content-profile-cta .button {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0
    }
devsite-recommended-content .devsite-recommended-content-profile-cta .text {
    color: #1a73e8;
    line-height: 1
    }
@media (max-width: 820px) {
    devsite-recommended-content .devsite-recommended-content-profile-cta .devsite-recommended-content-profile-cta-badge {
        display: none
        }
    }
@media (max-width: 600px) {
    devsite-recommended-content .devsite-recommended-content-profile-cta {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-top: 18px;
        text-align: center
        }
    devsite-recommended-content .devsite-recommended-content-profile-cta .text {
        line-height: 20px
        }
    }
devsite-recommended-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
    }
devsite-recommended-content .devsite-recommended-content-header {
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
    }
@media (max-width: 600px) {
    devsite-recommended-content .devsite-recommended-content-header {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
        -moz-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start
        }
    }
devsite-recommended-content .devsite-recommended-content-heading {
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    line-height: 24px
    }
devsite-recommended-content .devsite-recommended-content-heading-message, devsite-recommended-content .devsite-recommended-content-item-updated {
    color: var(--devsite-secondary-text-color);
    font-size: 14px
    }
devsite-recommended-content .devsite-recommended-content-heading-label {
    font-size: 16px;
    line-height: 36px
    }
devsite-recommended-content devsite-rich-tooltip {
    font: 14px/20px var(--devsite-primary-font-family)
    }
devsite-recommended-content .devsite-recommended-content-heading-message {
    font-style: italic
    }
devsite-recommended-content .devsite-recommended-content-toggle {
    display: var(--devsite-recommended-content-toggle-display)
    }
devsite-recommended-content .devsite-recommended-content-filters-wrapper {
    position: relative
    }
devsite-recommended-content devsite-feature-tooltip {
    top: 24px
    }
devsite-recommended-content .devsite-recommended-content-filters {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    -webkit-flex-wrap: var(--devsite-recommended-content-filters-flex-wrap);
    -ms-flex-wrap: var(--devsite-recommended-content-filters-flex-wrap);
    flex-wrap: var(--devsite-recommended-content-filters-flex-wrap);
    grid-area: filters;
    margin-block: var(--devsite-recommended-content-filters-margin-block, -8px);
    margin-inline: var(--devsite-recommended-content-filters-margin-inline, 0);
    overflow: var(--devsite-recommended-content-filters-overflow);
    padding-block: var(--devsite-recommended-content-filters-padding-block, 8px);
    padding-inline: var(--devsite-recommended-content-filters-padding-inline, 0);
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    width: var(--devsite-recommended-content-filters-width, 100%)
    }
devsite-recommended-content .devsite-recommended-content-filters::-webkit-scrollbar {
    background: 0;
    height: 0;
    width: 0
    }
devsite-recommended-content .devsite-recommended-content-filters-item input[type=checkbox] {
    display: inline
    }
devsite-recommended-content .devsite-recommended-content-filters-item input[type=checkbox]:after, devsite-recommended-content .devsite-recommended-content-filters-item input[type=checkbox]:before {
    display: none
    }
devsite-recommended-content .devsite-recommended-content-filters-item label {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--devsite-background-1);
    border: var(--devsite-primary-border);
    border-radius: 8px;
    color: var(--devsite-primary-text-color);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 32px;
    padding: 0 16px;
    -webkit-transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
    transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap
    }
devsite-recommended-content .devsite-recommended-content-filters-item label:hover {
    background: var(--devsite-background-2)
    }
devsite-recommended-content .devsite-recommended-content-filters-item input:disabled + label:hover {
    background: var(--devsite-background-1)
    }
devsite-recommended-content .devsite-recommended-content-filters-item input[type=checkbox]:focus + label {
    background: var(--devsite-background-3);
    border-color: var(--devsite-primary-text-color)
    }
devsite-recommended-content .devsite-recommended-content-filters-item input[type=checkbox]:checked + label {
    background: var(--devsite-link-background-hover);
    border-color: transparent;
    color: var(--devsite-link-color)
    }
[background=grey] devsite-recommended-content .devsite-recommended-content-filters-item input[type=checkbox]:checked + label {
    border-color: var(--devsite-link-color)
    }
devsite-recommended-content .devsite-recommended-content-filters-item input[type=checkbox]:checked + label:hover {
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 1px 3px 1px var(--devsite-elevation-ambient-shadow-color)
    }
devsite-recommended-content .devsite-recommended-content-filters-item input[type=checkbox]:checked:disabled + label:hover {
    box-shadow: revert
    }
devsite-recommended-content .devsite-recommended-content-filters-item input[type=checkbox]:checked:focus + label {
    color: var(--devsite-contrast-link-color)
    }
.devsite-recommended-content-filters-item input[type=checkbox]:disabled {
    pointer-events: none
    }
devsite-recommended-content .devsite-recommended-content-list-header {
    grid-area: list-header
    }
devsite-recommended-content .devsite-recommended-content-list {
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
    display: grid;
    gap: var(--devsite-item-gap, 24px);
    grid: auto-flow/repeat(var(--devsite-columns, 4), 1fr);
    grid-area: content
    }
devsite-recommended-content devsite-carousel .devsite-recommended-content-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-recommended-content .devsite-recommended-content-item {
    background: var(--devsite-card-background);
    border: var(--devsite-card-border);
    border-radius: var(--devsite-card-border-radius);
    box-shadow: var(--devsite-card-box-shadow);
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 16px
    }
devsite-recommended-content .devsite-recommended-content-item:nth-child(n+5) {
    display: var(--devsite-recommended-content-item-show-all-display)
    }
devsite-recommended-content .devsite-recommended-content-item-doc-type {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    margin-bottom: 0;
    text-transform: uppercase
    }
devsite-recommended-content .devsite-recommended-content-item-doc-type:before {
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal;
    color: #5f6368;
    display: inline;
    font-size: 16px;
    margin-right: 4px
    }
devsite-recommended-content .devsite-recommended-content-item-doc-type-article:before, devsite-recommended-content .devsite-recommended-content-item-doc-type-blog:before, devsite-recommended-content .devsite-recommended-content-item-doc-type-case_study:before, devsite-recommended-content .devsite-recommended-content-item-doc-type-concept:before, devsite-recommended-content .devsite-recommended-content-item-doc-type-course:before, devsite-recommended-content .devsite-recommended-content-item-doc-type-guide:before, devsite-recommended-content .devsite-recommended-content-item-doc-type-marketing:before, devsite-recommended-content .devsite-recommended-content-item-doc-type-pathway:before, devsite-recommended-content .devsite-recommended-content-item-doc-type-quickstart:before, devsite-recommended-content .devsite-recommended-content-item-doc-type-release_notes:before, devsite-recommended-content .devsite-recommended-content-item-doc-type-support:before, devsite-recommended-content .devsite-recommended-content-item-doc-type-topic:before, devsite-recommended-content .devsite-recommended-content-item-doc-type-troubleshooting:before, devsite-recommended-content .devsite-recommended-content-item-doc-type-tutorial:before {
    content: "article"
    }
devsite-recommended-content .devsite-recommended-content-item-doc-type-best_practices:before {
    content: "check_circle"
    }
devsite-recommended-content .devsite-recommended-content-item-doc-type-api_reference:before, devsite-recommended-content .devsite-recommended-content-item-doc-type-reference:before, devsite-recommended-content .devsite-recommended-content-item-doc-type-sample:before {
    content: "code"
    }
devsite-recommended-content .devsite-recommended-content-item-doc-type-playlist:before {
    content: "format_list_numbered"
    }
devsite-recommended-content .devsite-recommended-content-item-doc-type-pricing:before {
    content: "monetization_on"
    }
devsite-recommended-content .devsite-recommended-content-item-doc-type-podcast:before {
    content: "podcasts"
    }
devsite-recommended-content .devsite-recommended-content-item-doc-type-quiz:before {
    content: "quiz"
    }
devsite-recommended-content .devsite-recommended-content-item-doc-type-codelab:before {
    content: "science"
    }
devsite-recommended-content .devsite-recommended-content-item-doc-type-media:before, devsite-recommended-content .devsite-recommended-content-item-doc-type-video:before {
    content: "smart_display"
    }
devsite-recommended-content .devsite-recommended-content-item-doc-type-content_navigator:before, devsite-recommended-content .devsite-recommended-content-item-doc-type-landing:before, devsite-recommended-content .devsite-recommended-content-item-doc-type-landing_page:before, devsite-recommended-content .devsite-recommended-content-item-doc-type-product:before {
    content: "web"
    }
devsite-recommended-content .devsite-recommended-content-item-heading {
    -webkit-box-orient: vertical;
    color: var(--devsite-link-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-height: 28px;
    min-height: 56px;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    overflow: hidden
    }
devsite-recommended-content[truncate] .devsite-recommended-content-item-heading {
    display: initial;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap
    }
devsite-recommended-content .devsite-recommended-content-item-description, devsite-recommended-content .devsite-recommended-content-item-updated {
    margin: 0
    }
devsite-recommended-content .devsite-recommended-content-item-description {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-height: 24px;
    min-height: 72px;
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -moz-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    overflow: hidden;
    word-break: break-word
    }
devsite-recommended-content .devsite-recommended-content-item-updated {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2
    }
devsite-recommended-content .devsite-recommended-content-item-products {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-ordinal-group: 5;
    -webkit-order: 4;
    -moz-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4
    }
devsite-recommended-content .devsite-recommended-content-item-icon {
    display: grid;
    margin-block: auto 0;
    -webkit-margin-end: 8px;
    -moz-margin-end: 8px;
    margin-inline-end: 8px;
    place-content: center;
    width: 32px
    }
devsite-recommended-content .devsite-recommended-content-item-icon img, devsite-recommended-content .devsite-recommended-content-item-icon picture {
    height: 32px
    }
devsite-recommended-content .devsite-recommended-content-item-icon .material-icons {
    color: var(--devsite-foreground-color, var(--devsite-secondary-text-color));
    font-size: 32px
    }
devsite-recommended-content .devsite-recommended-content-item-product-tag {
    background: var(--devsite-background-3);
    color: var(--devsite-display-tag-color, var(--devsite-secondary-text-color));
    display: inline-block;
    -webkit-margin-end: 8px;
    -moz-margin-end: 8px;
    margin-inline-end: 8px;
    padding: 2px 4px
    }
devsite-recommended-content devsite-rich-tooltip {
    --devsite-rich-tooltip-button-size: 24px;
    --devsite-rich-tooltip-button-hover-background: 0;
    --devsite-rich-tooltip-padding-block: 8px;
    --devsite-rich-tooltip-padding-inline: 16px;
    --devsite-rich-tooltip-width: auto;
    --devsite-rich-tooltip-min-width: 200px;
    height: var(--devsite-rich-tooltip-button-size);
    width: var(--devsite-rich-tooltip-button-size)
    }
devsite-recommended-content devsite-rich-tooltip:defined {
    background: var(--devsite-background-3);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-recommended-content .devsite-recommended-content-cta {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    letter-spacing: 0.25px;
    --devsite-button-border: 0;
    --devsite-button-border-hover: 0;
    --devsite-button-disabled-border: 0;
    --devsite-background-button-background: transparent;
    --devsite-button-border-active: 0;
    --devsite-button-box-shadow-active: 0
    }
devsite-recommended-content .devsite-recommended-content-cta .material-icons {
    top: auto;
    font-size: 20px
    }
devsite-recommended-content .devsite-recommended-content-cta devsite-spinner {
    margin-right: 7px
    }
devsite-recommended-content .ctable {
    display: none
    }
devsite-recommended-content .devsite-table-wrapper {
    display: none
    }
devsite-reference-results {
    background: var(--devsite-background-1);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 1px 3px 1px var(--devsite-elevation-ambient-shadow-color);
    max-height: 305px;
    padding: 20px 10px 20px 28px;
    margin: 16px 0
    }
devsite-reference-results:empty {
    display: none
    }
devsite-reference-results .devsite-reference-results {
    height: auto;
    width: 100%
    }
devsite-reference-results .devsite-reference-results h3 {
    margin-top: 0
    }
devsite-reference-results .devsite-reference-results-list {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    padding-left: 0
    }
devsite-reference-results .devsite-reference-results-list-item {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    margin: 0 0 0 -8px;
    outline: 0;
    overflow: hidden;
    padding: 10px 8px;
    text-decoration: none;
    text-overflow: ellipsis;
    -webkit-transition: background 0.2s;
    transition: background 0.2s;
    white-space: nowrap
    }
devsite-reference-results .devsite-reference-results-list-item:focus, devsite-reference-results .devsite-reference-results-list-item:hover {
    background: var(--devsite-background-3)
    }
devsite-reference-results .devsite-reference-results-list-link {
    color: var(--devsite-primary-text-color);
    font: 13px/20px var(--devsite-primary-font-family)
    }
@media screen and (max-width: 600px) {
    devsite-reference-results {
        overflow-y: scroll
        }
    devsite-reference-results .devsite-reference-results-list {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-bottom: 20px
        }
    devsite-reference-results .devsite-reference-results {
        width: auto
        }
    }
devsite-related-entities {
    --devsite-chips-gap: 8px;
    --devsite-button-background-active: var(--devsite-background-2);
    --devsite-button-border-hover: var(--devsite-button-border, 0);
    --devsite-button-color: var(--devsite-primary-text-color)
    }
devsite-rich-tooltip {
    display: none;
    position: relative;
    z-index: 2
    }
devsite-rich-tooltip:defined {
    background: 0;
    display: revert
    }
devsite-rich-tooltip > [slot] {
    margin: 0 !important;
    padding: 0 !important
    }
devsite-rich-tooltip ul {
    list-style: none
    }
devsite-rich-tooltip li {
    margin-block: 2px
    }
devsite-search {
    border-radius: var(--devsite-search-border-radius);
    display: inline-block;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    height: var(--devsite-search-height);
    margin: 6px 0 6px 24px;
    overflow: hidden;
    position: relative;
    text-align: left;
    -webkit-transform: translatez(0);
    transform: translatez(0);
    vertical-align: top;
    width: 200px;
    will-change: transition;
    z-index: 10
    }
[dir=rtl] devsite-search {
    margin: 6px 24px 6px 0;
    text-align: right
    }
body[pending] devsite-search {
    visibility: hidden !important
    }
devsite-search .devsite-search-image {
    color: var(--devsite-search-image-color, var(--devsite-secondary-text-color));
    position: absolute;
    top: var(--devsite-search-image-top);
    -webkit-transition: color 0.2s;
    transition: color 0.2s
    }
[dir=ltr] devsite-search .devsite-search-image {
    left: var(--devsite-search-image-x)
    }
[dir=rtl] devsite-search .devsite-search-image {
    right: var(--devsite-search-image-x)
    }
devsite-search .devsite-search-image:before {
    content: "search"
    }
devsite-search .devsite-search-container {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-search .devsite-suggest-results-container {
    border-top: var(--devsite-primary-border)
    }
devsite-search input.devsite-search-field {
    background: none;
    border: var(--devsite-search-field-border);
    border-radius: var(--devsite-search-field-border-radius);
    color: var(--devsite-secondary-text-color);
    height: var(--devsite-search-field-height);
    outline: 0;
    padding: 8px;
    -webkit-padding-start: var(--devsite-search-field-padding-x-start);
    -moz-padding-start: var(--devsite-search-field-padding-x-start);
    padding-inline-start: var(--devsite-search-field-padding-x-start);
    -webkit-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
    width: 100%
    }
devsite-search input.devsite-search-field::-webkit-input-placeholder {
    color: var(--devsite-search-field-placeholder-color, var(--devsite-secondary-text-color));
    font: var(--devsite-search-field-placeholder-font);
    -webkit-transition: color 0.2s;
    transition: color 0.2s
    }
devsite-search input.devsite-search-field::-moz-placeholder {
    color: var(--devsite-search-field-placeholder-color, var(--devsite-secondary-text-color));
    font: var(--devsite-search-field-placeholder-font);
    -moz-transition: color 0.2s;
    transition: color 0.2s
    }
devsite-search input.devsite-search-field:-ms-input-placeholder {
    color: var(--devsite-search-field-placeholder-color, var(--devsite-secondary-text-color));
    font: var(--devsite-search-field-placeholder-font);
    -ms-transition: color 0.2s;
    transition: color 0.2s
    }
devsite-search input.devsite-search-field::-ms-input-placeholder {
    color: var(--devsite-search-field-placeholder-color, var(--devsite-secondary-text-color));
    font: var(--devsite-search-field-placeholder-font);
    -ms-transition: color 0.2s;
    transition: color 0.2s
    }
devsite-search input.devsite-search-field::placeholder {
    color: var(--devsite-search-field-placeholder-color, var(--devsite-secondary-text-color));
    font: var(--devsite-search-field-placeholder-font);
    -webkit-transition: color 0.2s;
    transition: color 0.2s
    }
devsite-search input.devsite-search-field:focus {
    border: var(--devsite-search-field-border);
    padding-bottom: 8px
    }
devsite-search .devsite-searchbox {
    width: 100%
    }
devsite-search .devsite-searchbox:before {
    background: var(--devsite-background-1);
    content: "";
    display: var(--devsite-searchbox-before-display, block);
    height: 500px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: -458px;
    -webkit-transition: opacity 1ms 0.2s;
    transition: opacity 1ms 0.2s;
    width: calc(100% + 12px);
    will-change: opacity;
    z-index: -1
    }
[dir=ltr] devsite-search .devsite-searchbox:before {
    left: -6px
    }
[dir=rtl] devsite-search .devsite-searchbox:before {
    right: -6px
    }
devsite-search[search-active] {
    overflow: visible
    }
devsite-search[search-active] .devsite-searchbox:before {
    opacity: 1
    }
devsite-search[search-active] .devsite-searchbox:hover {
    background: var(--devsite-searchbox-background-active, var(--devsite-background-3))
    }
.devsite-header-billboard-search devsite-search[search-active] .devsite-search-form, body[template="404"] devsite-search[search-active] .devsite-search-form, devsite-header[search-expanded] .devsite-search-form {
    border-radius: var(--devsite-search-border-radius, 0);
    box-shadow: var(--devsite-search-active-box-shadow, none);
    overflow: var(--devsite-search-active-overflow, visible)
    }
.devsite-header-billboard-search devsite-search[search-active] .devsite-popout, body[template="404"] devsite-search[search-active] .devsite-popout, devsite-header[search-expanded] devsite-search .devsite-popout {
    display: var(--devsite-popout-active-display, block)
    }
.devsite-header-billboard-search devsite-search[search-active] .devsite-search-field, .devsite-header-billboard-search devsite-search[search-active] .devsite-search-field:hover, body[template="404"] devsite-search[search-active] .devsite-search-field, body[template="404"] devsite-search[search-active] .devsite-search-field:hover, devsite-header[search-expanded] devsite-search[search-active] .devsite-search-field, devsite-header[search-expanded] devsite-search[search-active] .devsite-search-field:hover {
    background: var(--devsite-search-form-background-active);
    color: var(--devsite-search-form-text-active, var(--devsite-primary-text-color))
    }
devsite-search[search-active] .devsite-search-field {
    color: var(--devsite-primary-text-color)
    }
devsite-search[search-active] .devsite-search-field::-webkit-input-placeholder {
    color: var(--devsite-secondary-text-color)
    }
devsite-search[search-active] .devsite-search-field::-moz-placeholder {
    color: var(--devsite-secondary-text-color)
    }
devsite-search[search-active] .devsite-search-field:-ms-input-placeholder {
    color: var(--devsite-secondary-text-color)
    }
devsite-search[search-active] .devsite-search-field::-ms-input-placeholder {
    color: var(--devsite-secondary-text-color)
    }
devsite-search[search-active] .devsite-search-field::placeholder {
    color: var(--devsite-secondary-text-color)
    }
devsite-search[search-active] .devsite-search-image {
    color: var(--devsite-search-active-image-color, var(--devsite-secondary-text-color))
    }
devsite-search .devsite-popout, devsite-search[search-active] .devsite-popout {
    display: var(--devsite-popout-display, block)
    }
devsite-search .devsite-popout {
    margin-top: var(--devsite-popout-margin-top, 6px);
    position: var(--devsite-popout-position, absolute);
    -webkit-transform: var(--devsite-popout-transform, translatey(-100vh));
    transform: var(--devsite-popout-transform, translatey(-100vh));
    visibility: hidden;
    width: 100%;
    z-index: var(--devsite-popout-z-index, -2)
    }
devsite-search[search-active] .devsite-popout {
    -webkit-transform: translatey(0);
    transform: translatey(0);
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
    visibility: visible;
    will-change: transform
    }
devsite-search .devsite-popout-result {
    background: var(--devsite-background-1);
    max-height: calc(100vh - 56px);
    overflow-y: auto
    }
devsite-search .devsite-popout-result:empty, devsite-search[search-active][no-suggest] .devsite-popout {
    display: none
    }
devsite-search .devsite-suggest-wrapper {
    padding: 16px 0 0;
    font-size: 14px
    }
devsite-search .devsite-result-item, devsite-search .devsite-result-label {
    font: 13px/20px var(--devsite-primary-font-family);
    margin: 0
    }
devsite-search .devsite-result-label {
    padding-left: 40px
    }
[dir=rtl] devsite-search .devsite-result-label {
    padding-left: 0;
    padding-right: 40px
    }
devsite-search .devsite-result-item a {
    color: var(--devsite-primary-text-color);
    display: block;
    outline: 0;
    padding: 8px;
    text-decoration: none;
    -webkit-transition: background 0.2s;
    transition: background 0.2s;
    will-change: transition
    }
[dir=ltr] devsite-search .devsite-result-item a {
    padding-left: 40px
    }
[dir=rtl] devsite-search .devsite-result-item a {
    padding-right: 40px
    }
devsite-search .devsite-result-item a:focus, devsite-search .devsite-result-item a:hover, devsite-search .devsite-result-item.highlight a {
    background: var(--devsite-background-3)
    }
devsite-search .devsite-result-item b {
    font-weight: 500
    }
devsite-search .devsite-suggest-footer {
    border-top: var(--devsite-primary-border);
    margin: 8px 0 0;
    padding: 7px 0 8px 40px
    }
[dir=rtl] devsite-search .devsite-suggest-footer {
    padding: 7px 40px 8px 0
    }
devsite-search .devsite-suggest-footer > .button {
    display: inline-block;
    margin: 6px 0;
    max-width: calc(100% - 16px)
    }
[dir=ltr] devsite-search .devsite-suggest-footer > .button {
    margin-right: 16px
    }
[dir=rtl] devsite-search .devsite-suggest-footer > .button {
    margin-left: 16px
    }
devsite-search .devsite-suggest-footer > .button-white {
    max-width: 100%
    }
[dir=ltr] devsite-search .devsite-suggest-footer > .button-white {
    margin-left: -8px
    }
[dir=rtl] devsite-search .devsite-suggest-footer > .button-white {
    margin-right: -8px
    }
devsite-search .devsite-suggest-header {
    font: 500 11px/16px var(--devsite-primary-font-family);
    letter-spacing: 0.8px;
    margin: 12px 0;
    padding-left: 40px;
    text-transform: uppercase
    }
[dir=rtl] devsite-search .devsite-suggest-header {
    padding-left: 0;
    padding-right: 40px
    }
devsite-search hr + .devsite-suggest-sub-section > .devsite-suggest-header {
    margin-top: 24px
    }
devsite-search .devsite-suggest-header .devsite-suggest-project:before {
    content: "|";
    margin: 0 8px
    }
devsite-search hr {
    margin: 8px 0
    }
devsite-search .devsite-suggestion-fragment + .devsite-suggestion-fragment:before {
    content: "|";
    margin: 0 8px
    }
devsite-search .devsite-search-disabled {
    padding-bottom: 16px
    }
devsite-search[compact] {
    width: auto
    }
devsite-search[compact] .devsite-search-field, devsite-search[compact] .devsite-searchbox {
    background-color: transparent
    }
devsite-search[compact] input.devsite-search-field {
    width: 0
    }
devsite-search[compact] .devsite-search-image {
    left: calc(50% - 12px);
    pointer-events: none
    }
[dir=ltr] devsite-search[compact][search-active] .devsite-search-image {
    left: 8px;
    right: auto
    }
[dir=rtl] devsite-search[compact][search-active] .devsite-search-image {
    right: 8px;
    left: auto
    }
devsite-search[compact][search-active] input.devsite-search-field {
    width: 100%
    }
@media screen and (max-width: 840px) {
    devsite-search input.devsite-search-field {
        padding-left: 40px
        }
    [dir=rtl] devsite-search input.devsite-search-field {
        padding-left: 0;
        padding-right: 40px
        }
    .devsite-search-background, .devsite-search-background:after, [search-active] .devsite-search-background:after, devsite-search .devsite-search-field, devsite-search .devsite-search-field:hover {
        -webkit-transition: none;
        transition: none
        }
    devsite-search .devsite-search-image {
        left: 8px
        }
    [dir=rtl] devsite-search .devsite-search-image {
        left: auto;
        right: 8px
        }
    devsite-header devsite-search {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        margin-left: 8px;
        overflow: visible
        }
    [dir=rtl] devsite-header devsite-search {
        margin-left: 0;
        margin-right: 8px
        }
    devsite-header devsite-search .devsite-search-form {
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -moz-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1
        }
    devsite-header .devsite-top-logo-row devsite-search:not([search-active]) input.devsite-search-field {
        padding: 0
        }
    }
devsite-select {
    display: var(--devsite-select-display);
    margin: var(--devsite-select-margin);
    position: relative
    }
devsite-select + devsite-select, devsite-select ~ .button, devsite-select ~ button {
    -webkit-margin-before: var(--devsite-select-sibling-gap-y);
    margin-block-start: var(--devsite-select-sibling-gap-y);
    -webkit-margin-start: var(--devsite-select-sibling-gap-x);
    -moz-margin-start: var(--devsite-select-sibling-gap-x);
    margin-inline-start: var(--devsite-select-sibling-gap-x)
    }
devsite-select select {
    display: none !important;
    pointer-events: none !important;
    position: absolute;
    z-index: -1
    }
devsite-select .devsite-select {
    position: relative
    }
devsite-select .devsite-select-toggle {
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: var(--devsite-select-background-color);
    border: var(--devsite-select-border, var(--devsite-secondary-border));
    border-radius: var(--devsite-select-border-radius);
    box-shadow: none;
    color: var(--devsite-select-color, var(--devsite-primary-text-color));
    cursor: pointer;
    display: inline-block;
    height: var(--devsite-select-height, 36px);
    line-height: var(--devsite-select-line-height, 34px);
    max-width: var(--devsite-select-max-width, 340px);
    min-width: 72px;
    outline: 0;
    overflow: hidden;
    text-align: left;
    text-indent: 0.01px;
    text-overflow: ellipsis;
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
    vertical-align: middle;
    white-space: nowrap;
    position: relative
    }
devsite-select .devsite-select-toggle:focus, devsite-select .devsite-select-toggle:hover {
    background-color: var(--devsite-select-background-color-hover, var(--devsite-background-3));
    border: var(--devsite-select-border-hover, var(--devsite-select-border, var(--devsite-secondary-border)));
    color: var(--devsite-select-color-hover)
    }
devsite-select .devsite-select-toggle:active {
    background-color: var(--devsite-select-background-color-active, var(--devsite-background-4));
    color: var(--devsite-select-color-active)
    }
devsite-select .devsite-select-toggle:disabled {
    background-color: var(--devsite-background-3);
    border-color: transparent;
    color: var(--devsite-tertiary-text-color);
    cursor: default
    }
devsite-select .devsite-select-toggle-icon {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    pointer-events: none;
    position: absolute;
    top: 0
    }
[dir=ltr] devsite-select .devsite-select-toggle-icon {
    right: var(--devsite-select-toggle-icon-x, 8px)
    }
[dir=rtl] devsite-select .devsite-select-toggle-icon {
    left: var(--devsite-select-toggle-icon-x, 8px)
    }
devsite-select .devsite-select-toggle-icon:before {
    font-size: 18px
    }
devsite-select .devsite-select-toggle-count {
    -webkit-margin-start: var(--devsite-select-count-margin-inline-start, 6px);
    -moz-margin-start: var(--devsite-select-count-margin-inline-start, 6px);
    margin-inline-start: var(--devsite-select-count-margin-inline-start, 6px)
    }
devsite-select .devsite-select-toggle-count[parens]:not(:empty):before {
    content: "("
    }
devsite-select .devsite-select-toggle-count[parens]:not(:empty):after {
    content: ")"
    }
devsite-select .devsite-select-list {
    background: var(--devsite-background-1);
    border: var(--devsite-list-border, var(--devsite-secondary-border));
    border-radius: var(--devsite-list-border-radius, 2px);
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color);
    display: none;
    max-height: 304px;
    min-width: var(--devsite-list-min-width);
    opacity: 0;
    outline: 0;
    overflow-y: auto;
    padding: 8px 0;
    pointer-events: none;
    position: absolute;
    -webkit-transition: opacity 0.2s, visibility 0.2s;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 1005
    }
devsite-dialog devsite-select .devsite-select-list {
    z-index: 1015
    }
devsite-select[menu--open] .devsite-select-list {
    display: block;
    pointer-events: auto
    }
devsite-select[menu--show] .devsite-select-list {
    opacity: 1
    }
devsite-select[menu-position=above] .devsite-select-list {
    bottom: var(--devsite-list-position-y, 36px)
    }
devsite-select[menu-position=below] .devsite-select-list {
    top: var(--devsite-list-position-y, 36px)
    }
devsite-select .devsite-select-item {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    min-height: 48px;
    min-width: 100%;
    padding: 8px 16px;
    white-space: nowrap
    }
devsite-select .devsite-select-item.devsite-focused, devsite-select .devsite-select-item:focus, devsite-select .devsite-select-item:hover {
    background-color: var(--devsite-background-3);
    cursor: pointer
    }
devsite-select .devsite-select-item[data-selected] {
    background-color: var(--devsite-item-background-selected, var(--devsite-background-3));
    color: var(--devsite-item-color-selected);
    font-weight: var(--devsite-item-font-weight-selected, 500)
    }
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast: high) {
    devsite-select .devsite-select-item[data-selected] {
        font-weight: 700;
        text-decoration: underline
        }
    }
devsite-select.devsite-select--multiple .devsite-select-item {
    padding-left: 48px;
    position: relative
    }
devsite-select.devsite-select--multiple .devsite-select-item:before {
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal;
    color: #80868b;
    content: "check_box_outline_blank";
    display: block;
    font-size: 24px;
    left: 16px;
    position: absolute;
    top: 50%;
    -webkit-transform: translatey(-50%);
    transform: translatey(-50%)
    }
devsite-select.devsite-select--multiple .devsite-select-item[data-selected]:before {
    color: #1976d2;
    content: "check_box"
    }
devsite-selector {
    background: var(--devsite-selector-background, var(--devsite-background-1));
    border: var(--devsite-border, var(--devsite-secondary-border));
    border-radius: var(--devsite-border-radius, 0);
    display: block
    }
devsite-selector devsite-tabs {
    display: none
    }
devsite-selector devsite-tabs[connected] {
    border-bottom: var(--devsite-border, var(--devsite-secondary-border));
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-selector devsite-tabs tab a {
    cursor: pointer;
    display: inline-block;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    line-height: var(--devsite-selector-tab-line-height, 48px);
    margin: 0;
    max-width: 200px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
    white-space: nowrap
    }
devsite-selector devsite-tabs tab a, devsite-selector devsite-tabs tab a:link, devsite-selector devsite-tabs tab a:visited {
    color: var(--devsite-secondary-text-color)
    }
devsite-selector devsite-tabs tab a:focus, devsite-selector devsite-tabs tab a:hover {
    color: var(--devsite-link-hover, var(--devsite-link-color))
    }
devsite-selector devsite-tabs tab[active] a:link, devsite-selector devsite-tabs tab[active] a:visited {
    color: var(--devsite-link-color)
    }
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast: high) {
    devsite-selector devsite-tabs tab[active] a:link, devsite-selector devsite-tabs tab[active] a:visited {
        color: inherit
        }
    }
devsite-selector devsite-tabs > div > tab[tab] a:focus:after, devsite-selector devsite-tabs > div > tab[tab] a:hover:after {
    border-color: var(--devsite-tab-marker-color, transparent)
    }
devsite-selector devsite-tabs > div > tab[active] a:after, devsite-selector devsite-tabs > div > tab[active] a:focus:after, devsite-selector devsite-tabs > div > tab[active] a:hover:after {
    border-color: var(--devsite-link-color)
    }
devsite-selector devsite-tabs tab[two-line] a {
    line-height: 20px;
    padding-top: 4px;
    white-space: normal
    }
devsite-selector tab[two-line] [tab-label]:after {
    content: attr(tab-label);
    display: block;
    font-size: 12px
    }
body devsite-selector devsite-tabs tab[overflow-tab] .devsite-tabs-overflow-menu tab a {
    height: auto;
    min-height: 48px;
    width: 100%
    }
devsite-selector devsite-tabs[overflow-menu--open] tab[overflow-tab] {
    background: var(--devsite-overflow-tab-background, 0);
    border-radius: var(--devsite-overflow-tab-border-radius, 0)
    }
body devsite-selector devsite-tabs tab[overflow-tab] .devsite-tabs-overflow-menu tab a:focus, body devsite-selector devsite-tabs tab[overflow-tab] .devsite-tabs-overflow-menu tab a:hover {
    background: var(--devsite-overflow-link-background-hover, var(--devsite-background-3))
    }
devsite-selector > section {
    display: none;
    outline: 0
    }
devsite-selector > section[active] {
    display: block;
    padding: 0 23px
    }
devsite-selector > section .devsite-table-wrapper:first-child tbody tr:first-child, devsite-selector > section .devsite-table-wrapper:first-child thead tr {
    border-top: 0
    }
devsite-selector > section > .devsite-table-wrapper, devsite-selector > section > .github-docwidget-gitinclude-code > devsite-code, devsite-selector > section > .github-docwidget-include, devsite-selector > section > aside.beta, devsite-selector > section > aside.caution, devsite-selector > section > aside.deprecated, devsite-selector > section > aside.dogfood, devsite-selector > section > aside.experimental, devsite-selector > section > aside.key-objective, devsite-selector > section > aside.key-point, devsite-selector > section > aside.key-term, devsite-selector > section > aside.note, devsite-selector > section > aside.preview, devsite-selector > section > aside.success, devsite-selector > section > aside.warning, devsite-selector > section > devsite-code, devsite-selector > section > table {
    margin: 0 -23px
    }
devsite-selector > section > :first-child:not(:empty):not(aside):not(devsite-code):not(table):not(.devsite-table-wrapper):not([class^=github-]) {
    margin-top: var(--devsite-selector-content-margin-y, 15px)
    }
devsite-selector > section > :last-child:not(aside):not(devsite-code):not(table):not(.devsite-table-wrapper):not([class^=github-]) {
    margin-bottom: var(--devsite-selector-content-margin-y, 15px)
    }
devsite-selector .devsite-table-wrapper:last-child, devsite-selector > section > .github-docwidget-gitinclude-code > devsite-code:last-child > pre, devsite-selector > section > aside:last-child, devsite-selector > section > devsite-code:last-child > pre {
    border-radius: var(--devsite-content-border-radius, 0)
    }
devsite-selector .devsite-table-wrapper + .devsite-table-wrapper {
    margin-top: 16px
    }
devsite-selector > section table devsite-code {
    margin: 16px 0
    }
devsite-selector > section > devsite-code pre {
    padding-left: 23px
    }
.devsite-article devsite-selector .material-icons {
    font-size: var(--devsite-selector-icon-font-size, 18px);
    vertical-align: text-bottom
    }
devsite-selector[ready] {
    pointer-events: auto;
    visibility: visible
    }
devsite-shell-activate-button {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around
    }
devsite-shell-activate-button[tooltip--shown] {
    z-index: 104
    }
@media screen and (max-width: 840px) {
    devsite-shell-activate-button {
        display: none
        }
    }
devsite-shell-activate-button ul li {
    text-align: left
    }
devsite-shell-activate-button button {
    border: none;
    color: #5f6368;
    height: auto;
    margin: 0 0 0 11px;
    min-width: 0;
    padding: 9px 13px;
    width: auto
    }
devsite-shell-activate-button button.cloudshell-dogfood {
    padding-right: 0
    }
devsite-shell-activate-button button.cloudshell-dogfood:before {
    background: var(--devsite-background-1);
    border-radius: 100%;
    border: var(--devsite-header-border);
    box-shadow: 1px 1px 1px var(--devsite-background-0);
    color: #1976d2;
    content: "pets";
    float: right;
    font-family: Material Icons;
    font-size: 14px;
    font-weight: 400;
    height: 20px;
    line-height: 18px;
    overflow: hidden;
    position: relative;
    right: 7px;
    text-align: center;
    text-rendering: optimizelegibility;
    top: 7px;
    width: 20px
    }
devsite-shell-activate-button button[disabled].cloudshell-dogfood:before {
    color: #9aa0a6
    }
devsite-shell-activate-button button:active {
    background: var(--devsite-background-4);
    border: none
    }
devsite-shell-activate-button button:focus {
    background: none;
    border: none;
    color: #5f6368
    }
devsite-shell-activate-button button:hover {
    background: var(--devsite-background-4);
    border: none;
    color: #5f6368
    }
devsite-shell-activate-button cloud-mdc-rich-tooltip::part(richTooltip) {
    -webkit-transform: translatex(-36px);
    transform: translatex(-36px)
    }
devsite-shell-activate-button button[disabled] {
    border: none
    }
devsite-shell-activate-button button svg {
    display: block;
    margin: auto;
    pointer-events: none
    }
devsite-shell-activate-button .tooltip-title {
    color: #3c4043;
    font-size: 16px;
    font-weight: 500;
    margin: 2px 0 8px;
    padding: 0
    }
devsite-shell-activate-button [slot=contents].tooltip-contents {
    color: #3c4043;
    font-family: var(--devsite-wordmark-font-family);
    font-size: 14px;
    font-weight: 400
    }
devsite-shell-activate-button p.tooltip-contents {
    text-align: left;
    margin: 0
    }
devsite-shell-activate-button ul.tooltip-contents {
    margin: 8px 0 0
    }
devsite-shell-activate-button ul.tooltip-contents li {
    margin: 0
    }
devsite-shell-activate-button .tooltip-buttons {
    float: left;
    margin: 24px 0 2px
    }
body[free-trial] devsite-shell-activate-button[free-trial-hide] {
    display: none
    }
body[free-trial] devsite-shell-activate-button[force-visibility] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-sitemask {
    background: rgba(0, 0, 0, 0.4);
    bottom: -200px;
    cursor: pointer;
    left: -200px;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    right: -200px;
    top: -200px;
    -webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s linear;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s linear;
    visibility: hidden;
    z-index: 1012;
    -webkit-tap-highlight-color: transparent
    }
devsite-sitemask[visible] {
    opacity: 1;
    pointer-events: auto;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    visibility: visible
    }
devsite-snackbar {
    bottom: 0;
    left: 0;
    margin-right: 24px;
    min-width: 288px;
    position: fixed;
    right: 0;
    z-index: 1018
    }
devsite-snackbar .devsite-snackbar-snack {
    bottom: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: var(--devsite-snack-max-width, none);
    min-width: var(--devsite-snack-min-width, auto);
    padding: 0 0 24px 24px;
    position: absolute;
    -webkit-transform: translatey(100px);
    transform: translatey(100px);
    -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 1, 1);
    transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 1, 1);
    transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);
    transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 1, 1);
    width: var(--devsite-snack-width, auto)
    }
devsite-snackbar [show].devsite-snackbar-snack {
    -webkit-transform: translatey(0);
    transform: translatey(0)
    }
devsite-snackbar .devsite-snackbar-inner {
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--devsite-snackbar-inner-background, #3c4043);
    border-radius: var(--devsite-snackbar-inner-border-radius, 2px);
    box-shadow: 0 1px 3px 0 var(--devsite-elevation-key-shadow-color), 0 4px 8px 3px var(--devsite-elevation-ambient-shadow-color);
    color: var(--devsite-snackbar-inner-color, #fff);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row var(--devsite-snackbar-inner-flex-wrap, nowrap);
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-flow: row var(--devsite-snackbar-inner-flex-wrap, nowrap);
    flex-flow: row var(--devsite-snackbar-inner-flex-wrap, nowrap);
    font-size: 14px;
    min-height: 48px;
    padding: 0
    }
devsite-snackbar .devsite-snackbar-message {
    font: var(--devsite-snackbar-message-font, inherit);
    letter-spacing: 0.2px;
    line-height: 20px;
    font-weight: 400;
    overflow: hidden;
    padding: var(--devsite-snackbar-message-padding, 24px);
    text-overflow: ellipsis;
    word-break: break-word
    }
devsite-snackbar .devsite-snackbar-message a {
    color: var(--devsite-snackbar-link-color, #669df6)
    }
devsite-snackbar .devsite-snackbar-action, devsite-snackbar .devsite-snackbar-link {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    color: var(--devsite-snackbar-link-color, #eeff41);
    cursor: pointer;
    display: inline-block;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0;
    -moz-box-flex: 0;
    -ms-flex: 0 0;
    flex: 0 0;
    float: right;
    font: var(--devsite-snackbar-action-font, inherit);
    height: auto;
    letter-spacing: 0.25px;
    line-height: 20px;
    margin-left: 0;
    margin-right: var(--devsite-snackbar-action-margin-right, 0);
    min-width: -webkit-fit-content;
    min-width: -moz-fit-content;
    min-width: fit-content;
    outline: none;
    position: relative
    }
devsite-snackbar .devsite-snackbar-action, devsite-snackbar .devsite-snackbar-action:active, devsite-snackbar .devsite-snackbar-action:focus, devsite-snackbar .devsite-snackbar-action:hover, devsite-snackbar .devsite-snackbar-link, devsite-snackbar .devsite-snackbar-link:active, devsite-snackbar .devsite-snackbar-link:focus, devsite-snackbar .devsite-snackbar-link:hover {
    background: 0;
    border: 0;
    box-shadow: none
    }
devsite-snackbar .devsite-snackbar-link:focus {
    text-decoration: none
    }
devsite-snackbar [type=cookie-notification] .devsite-snackbar-link, devsite-snackbar [type^=notification-] .devsite-snackbar-action {
    margin-left: var(--devsite-snackbar-action-margin-left, 0)
    }
@media screen and (max-width: 840px) {
    devsite-snackbar {
        margin-right: 0;
        max-width: 100%
        }
    devsite-snackbar [type=cookie-notification] .devsite-snackbar-inner, devsite-snackbar [type^=notification-] .devsite-snackbar-inner {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
        }
    devsite-snackbar [type=cookie-notification] .devsite-snackbar-message, devsite-snackbar [type^=notification-] .devsite-snackbar-message {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%
        }
    devsite-snackbar .devsite-snackbar-inner {
        border-radius: 0
        }
    devsite-snackbar .devsite-snackbar-snack {
        left: 0;
        padding: 24px 0 0;
        right: 0
        }
    }
devsite-spinner.devsite-send-spinner {
    margin-left: 78px
    }
#devsite-support-form-button-wrapper {
    height: 36px
    }
.devsite-support-projects {
    position: relative
    }
.devsite-support-projects .devsite-support-projects-placeholder {
    height: 36px;
    position: absolute
    }
devsite-tabs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: var(--devsite-tabs-height, 48px);
    margin: var(--devsite-tabs-margin);
    max-width: calc(100% - 208px);
    position: relative;
    width: var(--devsite-tabs-width)
    }
devsite-tabs[connected] {
    max-width: none
    }
devsite-tabs .devsite-tabs-wrapper {
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0
    }
[dir=ltr] devsite-tabs.lower-tabs .devsite-tabs-wrapper {
    left: var(--devsite-tabs-wrapper-x, 0)
    }
[dir=rtl] devsite-tabs.lower-tabs .devsite-tabs-wrapper {
    right: var(--devsite-tabs-wrapper-x, 0)
    }
devsite-tabs[no-overflow] .devsite-tabs-wrapper {
    overflow: auto
    }
devsite-tabs[dropdown--open] .devsite-tabs-wrapper, devsite-tabs[overflow-menu--open] .devsite-tabs-wrapper {
    overflow: visible
    }
devsite-tabs tab {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: relative
    }
devsite-tabs tab > .devsite-tabs-content, devsite-tabs tab > a {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    letter-spacing: var(--devsite-link-letter-spacing, normal);
    margin: 0;
    text-transform: var(--devsite-link-text-transform, uppercase);
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
    white-space: nowrap
    }
devsite-tabs tab > .devsite-tabs-content, devsite-tabs tab > .devsite-tabs-content:focus, devsite-tabs tab > .devsite-tabs-content:hover, devsite-tabs tab > a, devsite-tabs tab > a:focus, devsite-tabs tab > a:hover {
    text-decoration: none
    }
devsite-tabs.upper-tabs tab a {
    font-weight: var(--devsite-upper-tab-font-weight, 400);
    text-transform: none
    }
devsite-tabs.upper-tabs tab > a {
    color: var(--devsite-upper-tab-inactive, var(--devsite-secondary-text-color))
    }
devsite-tabs.upper-tabs tab[active] > a {
    font-weight: 500
    }
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast: high) {
    devsite-tabs.upper-tabs tab[active] > a {
        color: inherit
        }
    }
devsite-tabs.upper-tabs > .devsite-tabs-wrapper > tab[active] > a {
    color: var(--devsite-upper-tab-active, var(--devsite-primary-text-color))
    }
devsite-tabs.upper-tabs > .devsite-tabs-wrapper > tab[active] > a:hover {
    color: var(--devsite-upper-tab-active-hover, var(--devsite-upper-tab-active, var(--devsite-primary-text-color)))
    }
devsite-tabs.upper-tabs > .devsite-tabs-wrapper > tab[active] > a:focus {
    color: var(--devsite-upper-tab-active-focus, var(--devsite-secondary-text-color))
    }
devsite-tabs.upper-tabs > .devsite-tabs-wrapper > tab[active] > a:after {
    border-color: var(--devsite-upper-tab-marker-color, var(--devsite-secondary-color, var(--devsite-primary-text-color)))
    }
devsite-tabs.upper-tabs > .devsite-tabs-wrapper > tab[active] > a:hover:after {
    border-color: var(--devsite-upper-tab-marker-color-hover, var(--devsite-upper-tab-marker-color, var(--devsite-secondary-color, var(--devsite-primary-text-color))))
    }
devsite-tabs tab > a:focus:after, devsite-tabs tab > a:hover:after, devsite-tabs tab[active] > a:after {
    border-radius: var(--devsite-tab-marker-border-radius, 0);
    border-top: var(--devsite-tab-marker-height, 2px) solid transparent;
    bottom: 0;
    content: "";
    display: block;
    position: absolute
    }
[dir=ltr] devsite-tabs tab > a:focus:after, [dir=ltr] devsite-tabs tab > a:hover:after, [dir=ltr] devsite-tabs tab[active] > a:after {
    left: var(--devsite-tab-marker-position-x, 0);
    right: var(--devsite-tab-marker-position-x-end, var(--devsite-tab-marker-position-x, 0))
    }
[dir=rtl] devsite-tabs tab > a:focus:after, [dir=rtl] devsite-tabs tab > a:hover:after, [dir=rtl] devsite-tabs tab[active] > a:after {
    left: var(--devsite-tab-marker-position-x-end, var(--devsite-tab-marker-position-x, 0));
    right: var(--devsite-tab-marker-position-x, 0)
    }
devsite-tabs tab[dropdown] > a {
    padding-block: 0;
    padding-inline: var(--devsite-dropdown-tab-padding-x, 24px) 0;
    position: relative;
    z-index: 2
    }
[dir=ltr] devsite-tabs tab[active][dropdown] a:not(.devsite-tabs-dropdown-toggle):after, [dir=ltr] devsite-tabs tab[dropdown] a:not(.devsite-tabs-dropdown-toggle):focus:after, [dir=ltr] devsite-tabs tab[dropdown] a:not(.devsite-tabs-dropdown-toggle):hover:after {
    right: var(--devsite-tab-marker-inset-x, 0)
    }
[dir=rtl] devsite-tabs tab[active][dropdown] a:not(.devsite-tabs-dropdown-toggle):after, [dir=rtl] devsite-tabs tab[dropdown] a:not(.devsite-tabs-dropdown-toggle):focus:after, [dir=rtl] devsite-tabs tab[dropdown] a:not(.devsite-tabs-dropdown-toggle):hover:after {
    left: var(--devsite-tab-marker-inset-x, 0)
    }
devsite-tabs.upper-tabs tab[dropdown] .devsite-tabs-dropdown a {
    font-weight: var(--devsite-upper-tab-dropdown-link-font-weight)
    }
devsite-tabs.upper-tabs tab[dropdown] .devsite-tabs-dropdown a, devsite-tabs.upper-tabs tab[dropdown] .devsite-tabs-dropdown a:visited {
    color: var(--devsite-upper-tab-dropdown-link, var(--devsite-primary-text-color))
    }
devsite-tabs.upper-tabs tab[dropdown] .devsite-tabs-dropdown a:focus, devsite-tabs.upper-tabs tab[dropdown] .devsite-tabs-dropdown a:hover {
    color: var(--devsite-upper-tab-dropdown-link-hover, var(--devsite-secondary-text-color))
    }
devsite-tabs.upper-tabs tab[dropdown] .devsite-tabs-dropdown a:focus .devsite-nav-item-title, devsite-tabs.upper-tabs tab[dropdown] .devsite-tabs-dropdown a:hover .devsite-nav-item-title {
    -webkit-text-decoration: var(--devsite-nav-item-title-text-decoration-hover, none);
    -moz-text-decoration: var(--devsite-nav-item-title-text-decoration-hover, none);
    text-decoration: var(--devsite-nav-item-title-text-decoration-hover, none)
    }
devsite-tabs.upper-tabs tab[dropdown] .devsite-nav-item-description {
    color: var(--devsite-upper-tab-dropdown-description, var(--devsite-secondary-text-color));
    font-weight: var(--devsite-upper-tab-dropdown-description-font-weight);
    margin: var(--devsite-upper-tab-dropdown-description-margin)
    }
devsite-tabs .devsite-tabs-dropdown-content {
    border-top: var(--devsite-header-border, 0)
    }
devsite-tabs.lower-tabs tab[dropdown] .devsite-tabs-dropdown-content, devsite-tabs.lower-tabs tab[overflow-tab] .devsite-tabs-overflow-menu, devsite-tabs.upper-tabs tab[dropdown] .devsite-tabs-dropdown-content, devsite-tabs.upper-tabs tab[overflow-tab] .devsite-tabs-overflow-menu {
    border-radius: var(--devsite-upper-tab-dropdown-corner-radius, 0)
    }
devsite-tabs.upper-tabs tab[dropdown] .devsite-tabs-dropdown-toggle:before, devsite-tabs.upper-tabs tab[overflow-tab] .devsite-icon-arrow-drop-down:before {
    color: var(--devsite-upper-tab-dropdown-inactive, var(--devsite-upper-tab-inactive, var(--devsite-secondary-text-color)))
    }
devsite-tabs.upper-tabs tab[active][dropdown] .devsite-tabs-dropdown-toggle:before {
    color: var(--devsite-upper-tab-dropdown-active, var(--devsite-upper-tab-active, var(--devsite-primary-text-color)))
    }
devsite-tabs tab[dropdown] .devsite-tabs-dropdown-toggle {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    padding-block: 0;
    padding-inline: 0 var(--devsite-dropdown-toggle-padding-x, 0)
    }
devsite-tabs tab[dropdown] .devsite-tabs-dropdown-toggle:before, devsite-tabs.upper-tabs .devsite-icon-arrow-drop-down:before {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: background 0.2s, color 0.2s, -webkit-transform 0.2s;
    transition: background 0.2s, color 0.2s, -webkit-transform 0.2s;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    transition: background 0.2s, color 0.2s, transform 0.2s, -webkit-transform 0.2s
    }
devsite-tabs tab[dropdown] .devsite-tabs-dropdown-toggle:focus:before {
    background: var(--devsite-background-3);
    border-radius: 50%
    }
devsite-tabs tab[dropdown--open] .devsite-tabs-dropdown-toggle:before, devsite-tabs.upper-tabs[overflow-menu--open] tab:hover .devsite-icon-arrow-drop-down:before {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
    }
devsite-tabs tab[overflow-tab] {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    position: relative
    }
devsite-tabs tab[overflow-tab][collapsed] {
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0
    }
devsite-tabs.upper-tabs tab[overflow-tab]:after {
    content: "";
    height: 48px;
    position: absolute;
    z-index: -1
    }
[dir=ltr] devsite-tabs.upper-tabs tab[overflow-tab]:after {
    left: -6px;
    right: -100%
    }
[dir=rtl] devsite-tabs.upper-tabs tab[overflow-tab]:after {
    left: -100%;
    right: -6px
    }
devsite-tabs tab[overflow-tab] a {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -moz-box-orient: horizontal;
    -moz-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    position: relative
    }
devsite-tabs tab[overflow-tab] tab .devsite-tabs-dropdown, devsite-tabs tab[overflow-tab] tab .devsite-tabs-dropdown-toggle {
    display: none
    }
devsite-tabs tab[overflow-tab] .devsite-tabs-overflow-menu {
    background: var(--devsite-overflow-menu-background, var(--devsite-background-1));
    border-radius: var(--devsite-overflow-menu-border-radius, 2px);
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-height: 320px;
    overflow-y: auto;
    padding: 16px 0;
    position: absolute;
    top: var(--devsite-overflow-menu-top, -16px);
    z-index: 1005
    }
devsite-tabs.upper-tabs tab[overflow-tab] .devsite-tabs-overflow-menu {
    border-radius: 0 0 2px 2px;
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color), inset 0 4px 6px -4px var(--devsite-elevation-inset-shadow-color);
    top: 48px;
    -webkit-transform: translatez(0);
    transform: translatez(0);
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
    z-index: -1
    }
devsite-tabs.upper-tabs .devsite-tabs-overflow-menu .devsite-tabs-dropdown-toggle {
    display: none !important
    }
devsite-tabs.upper-tabs tab[overflow-tab] .devsite-tabs-overflow-menu[hidden] {
    display: block !important;
    pointer-events: none;
    -webkit-transform: translate3d(0, -150%, 0);
    transform: translate3d(0, -150%, 0)
    }
devsite-tabs tab[overflow-tab] .devsite-tabs-overflow-menu tab a {
    background: var(--devsite-background-1);
    color: var(--devsite-secondary-text-color);
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: 48px
    }
devsite-tabs tab[overflow-tab] .devsite-tabs-overflow-menu tab a:focus, devsite-tabs tab[overflow-tab] .devsite-tabs-overflow-menu tab a:hover {
    background: var(--devsite-background-3);
    color: var(--devsite-primary-text-color)
    }
devsite-tabs .devsite-tabs-dropdown {
    display: block;
    font-size: 13px;
    left: -6px;
    min-width: calc(100% + 12px);
    outline: 0;
    overflow: hidden;
    padding: 0 6px 6px;
    pointer-events: none;
    position: absolute;
    top: 100%;
    z-index: -1
    }
[dir=rtl] devsite-tabs .devsite-tabs-dropdown {
    right: -6px;
    left: auto
    }
devsite-tabs [dropdown-full] .devsite-tabs-dropdown {
    left: 0;
    width: var(--devsite-dropdown-full-width, 100vw)
    }
[dir=rtl] devsite-tabs [dropdown-full] .devsite-tabs-dropdown {
    left: auto;
    right: 0
    }
devsite-tabs .devsite-tabs-dropdown-content {
    background-color: var(--devsite-background-1);
    display: var(--devsite-dropdown-content-display, flex);
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color), inset 0 4px 6px -4px var(--devsite-elevation-inset-shadow-color);
    grid-template-columns: var(--devsite-dropdown-content-grid-template-columns, none);
    grid-template-rows: var(--devsite-dropdown-content-grid-template-rows, none);
    overflow: auto;
    max-height: 600px;
    max-width: 100vw;
    pointer-events: none;
    -webkit-transform: translate3d(0, -150%, 0);
    transform: translate3d(0, -150%, 0);
    -webkit-transition: -webkit-transform 0s;
    transition: -webkit-transform 0s;
    transition: transform 0s;
    transition: transform 0s, -webkit-transform 0s;
    white-space: nowrap
    }
devsite-tabs .devsite-tabs-dropdown[dropdown-transition] .devsite-tabs-dropdown-content {
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s
    }
devsite-tabs tab[dropdown--open] .devsite-tabs-dropdown-content {
    pointer-events: all;
    -webkit-transform: translatez(0);
    transform: translatez(0)
    }
devsite-tabs .devsite-tabs-dropdown-column {
    background: var(--devsite-dropdown-column-background, none);
    border-top: var(--devsite-dropdown-column-border-top, 0);
    -moz-box-sizing: var(--devsite-dropdown-column-box-sizing, inherit);
    box-sizing: var(--devsite-dropdown-column-box-sizing, inherit);
    display: var(--devsite-dropdown-column-display);
    margin: var(--devsite-dropdown-column-margin, 0);
    max-width: var(--devsite-dropdown-column-max-width, none);
    min-width: var(--devsite-dropdown-column-min-width, 180px);
    padding: var(--devsite-dropdown-column-padding, 0)
    }
devsite-tabs [dropdown-full] .devsite-tabs-dropdown-column {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    grid-row: var(--devsite-dropdown-column-grid-row, auto);
    min-width: 0
    }
devsite-tabs .devsite-tabs-dropdown-section {
    list-style: none;
    margin: var(--devsite-dropdown-section-margin, 0)
    }
devsite-tabs .devsite-tabs-dropdown-section:not(:first-child) {
    margin-top: 54px
    }
devsite-tabs tab[dropdown] .devsite-nav-item, devsite-tabs tab[dropdown] .devsite-nav-title {
    line-height: 18px
    }
devsite-tabs tab[dropdown] .devsite-nav-title {
    border-bottom: var(--devsite-nav-title-border-bottom, 0);
    color: var(--devsite-nav-title-color, var(--devsite-secondary-text-color));
    font: var(--devsite-nav-title-font, inherit);
    font-weight: var(--devsite-nav-title-font-weight, 700);
    outline: none;
    padding: var(--devsite-nav-title-padding, 0);
    text-transform: var(--devsite-nav-title-transform, none);
    white-space: var(--devsite-nav-title-white-space)
    }
devsite-tabs tab[dropdown] .devsite-nav-item-title {
    display: var(--devsite-nav-item-title-display, block);
    font: var(--devsite-nav-item-title-font, inherit);
    letter-spacing: var(--devsite-nav-item-title-letter-spacing, normal);
    line-height: var(--devsite-nav-item-title-line-height, inherit);
    margin: var(--devsite-nav-item-title-margin, 0)
    }
devsite-tabs [dropdown-full] .devsite-nav-item > a, devsite-tabs [dropdown-full] .devsite-nav-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal
    }
devsite-tabs tab[dropdown] .devsite-nav-description, devsite-tabs tab[dropdown] .devsite-nav-item-description {
    font: var(--devsite-nav-description-font, inherit);
    font-size: var(--devsite-nav-description-font-size, inherit);
    line-height: var(--devsite-nav-description-line-height, inherit)
    }
devsite-tabs tab[dropdown] .devsite-nav-description {
    color: var(--devsite-nav-description-color, inherit);
    display: var(--devsite-nav-description-display, inherit);
    white-space: var(--devsite-nav-description-white-space, inherit)
    }
devsite-tabs tab[dropdown] .devsite-nav-item-description {
    color: var(--devsite-secondary-text-color);
    padding: var(--devsite-padding, 0);
    white-space: normal
    }
body[theme] devsite-tabs .devsite-tabs-dropdown a, body[theme] devsite-tabs .devsite-tabs-dropdown a:visited {
    color: var(--devsite-primary-text-color);
    display: var(--devsite-dropdown-link-display, block);
    font-weight: 400
    }
body[theme] devsite-tabs .devsite-tabs-dropdown a:focus, body[theme] devsite-tabs .devsite-tabs-dropdown a:hover {
    color: var(--devsite-link-color)
    }
devsite-tabs[render-hidden] {
    width: 100%
    }
devsite-tabs tab[overflow-tab][render-hidden], devsite-tabs[render-hidden] tab[overflow-tab] {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -moz-box-flex: 0;
    -ms-flex: none;
    flex: none
    }
devsite-tabs tab[dropdown] .devsite-tabs-close-button {
    color: var(--devsite-primary-text-color);
    cursor: pointer;
    position: absolute;
    right: 24px;
    top: 24px;
    visibility: hidden;
    z-index: 1
    }
devsite-tabs tab[dropdown] .devsite-tabs-close-button:focus, devsite-tabs tab[dropdown] .devsite-tabs-close-button:hover {
    color: var(--devsite-link-color)
    }
devsite-tabs tab[dropdown--open] .devsite-tabs-close-button {
    visibility: visible
    }
devsite-thumb-rating {
    display: block
    }
devsite-thumb-rating[position=footer] {
    text-align: center
    }
devsite-thumb-rating .devsite-thumb-rating {
    border-radius: 4px;
    display: grid;
    grid-gap: 0 8px;
    grid-template-areas: "label thumbs";
    grid-template-columns: auto 1fr
    }
devsite-thumb-rating .devsite-thumb-label {
    font-size: 13px;
    grid-area: label
    }
devsite-thumb-rating .devsite-thumbs {
    grid-area: thumbs
    }
devsite-thumb-rating[position=header] .devsite-thumbs, devsite-thumb-rating[position=main] .devsite-thumbs {
    margin: -3px 0
    }
devsite-thumb-rating .devsite-thumb {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: 0;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    cursor: pointer;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    fill: var(--devsite-secondary-text-color);
    height: 30px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 30px;
    padding: 0;
    width: 30px
    }
devsite-thumb-rating .devsite-thumb:focus, devsite-thumb-rating .devsite-thumb:hover {
    background: var(--devsite-background-3)
    }
devsite-thumb-rating .devsite-thumb + .devsite-thumb {
    margin: 0
    }
devsite-thumb-rating[rating=down] .devsite-thumb-down, devsite-thumb-rating[rating=up] .devsite-thumb-up {
    fill: var(--devsite-link-color)
    }
devsite-thumb-rating[rating=down] .devsite-thumb-down:focus, devsite-thumb-rating[rating=down] .devsite-thumb-down:hover, devsite-thumb-rating[rating=up] .devsite-thumb-up:focus, devsite-thumb-rating[rating=up] .devsite-thumb-up:hover {
    background: var(--devsite-link-background-active)
    }
devsite-thumb-rating .devsite-thumb-icon {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -moz-box-flex: 0;
    -ms-flex: none;
    flex: none;
    height: 18px;
    pointer-events: none;
    width: 18px
    }
devsite-thumb-rating[position=footer] .devsite-thumb-rating {
    display: block;
    margin-top: 24px
    }
.devsite-thumb-rating-dialog {
    position: relative
    }
.devsite-thumb-rating-dialog .devsite-thumb-rating-categories {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
    }
.devsite-thumb-rating-dialog .devsite-thumb-rating-category {
    padding-bottom: 12px
    }
[dir=ltr] .devsite-thumb-rating-dialog h3 {
    text-align: left
    }
[dir=rtl] .devsite-thumb-rating-dialog h3 {
    text-align: right
    }
.devsite-thumb-rating-dialog h3:only-child {
    margin-bottom: 8px
    }
.devsite-thumb-rating-dialog .devsite-dialog-buttons {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding: 0 16px 16px
    }
.devsite-thumb-rating-dialog .devsite-feedback-icon {
    fill: currentColor;
    top: 0
    }
[dir=ltr] .button + devsite-feedback[position=thumb-rating] {
    margin-left: 16px
    }
[dir=rtl] .button + devsite-feedback[position=thumb-rating] {
    margin-right: 16px
    }
devsite-feedback[feedback-type=thumb-rating][position=header] {
    margin-top: 4px
    }
devsite-feedback[feedback-type=thumb-rating][position=footer] {
    display: block;
    margin-top: 8px;
    text-align: center
    }
.devsite-thumb-rating-dialog .devsite-dialog-contents {
    color: var(--devsite-primary-text-color)
    }
.devsite-thumb-rating-dialog input + label {
    font-size: 14px
    }
.devsite-thumb-rating-dialog .account-note {
    color: var(--devsite-secondary-text-color);
    font: 400 12px/16px var(--devsite-primary-font-family);
    letter-spacing: 0.3px
    }
.devsite-thumb-rating-dialog .create-profile-spinner {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: hsla(0, 0%, 100%, 0.8);
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10
    }
.devsite-thumb-rating-dialog.loading .create-profile-spinner {
    opacity: 1
    }
@media screen and (max-width: 600px) {
    devsite-thumb-rating[position=header] .devsite-thumb-rating {
        margin: 16px 0 8px
        }
    devsite-thumb-rating[position=main] .devsite-thumb-rating {
        margin: 8px 0
        }
    devsite-thumb-rating[position=footer] .devsite-thumb-rating {
        margin-bottom: 24px
        }
    }
devsite-toc.devsite-toc {
    overflow: auto;
    width: 160px
    }
devsite-toc > .devsite-nav-list {
    -webkit-border-start: var(--devsite-toc-border-width, 4px) solid var(--devsite-toc-border, var(--devsite-primary-color));
    -moz-border-start: var(--devsite-toc-border-width, 4px) solid var(--devsite-toc-border, var(--devsite-primary-color));
    border-inline-start: var(--devsite-toc-border-width, 4px) solid var(--devsite-toc-border, var(--devsite-primary-color));
    width: 160px
    }
.devsite-sidebar[fixed] devsite-toc > .devsite-nav-list {
    -webkit-padding-end: 8px;
    -moz-padding-end: 8px;
    padding-inline-end: 8px
    }
devsite-toc > .devsite-nav-list > :first-child > .devsite-nav-title {
    padding-top: 0
    }
devsite-toc > .devsite-nav-list > :last-child > .devsite-nav-list > :last-child > .devsite-nav-title:last-child, devsite-toc > .devsite-nav-list > :last-child > .devsite-nav-title:only-child {
    padding-bottom: 0
    }
devsite-toc .devsite-nav-list {
    -webkit-padding-start: var(--devsite-nav-list-padding-x-start, 12px);
    -moz-padding-start: var(--devsite-nav-list-padding-x-start, 12px);
    padding-inline-start: var(--devsite-nav-list-padding-x-start, 12px)
    }
devsite-toc .devsite-nav-list .devsite-nav-list .devsite-nav-title {
    color: var(--devsite-nav-title-nested-color, var(--devsite-nav-title-color, var(--devsite-primary-text-color)))
    }
devsite-toc .devsite-nav-list .devsite-nav-list .devsite-nav-title:focus, devsite-toc .devsite-nav-list .devsite-nav-list .devsite-nav-title:hover {
    color: var(--devsite-nav-nested-color-hover, var(--devsite-nav-color-hover, var(--devsite-link-color)))
    }
devsite-toc .devsite-nav-list .devsite-nav-list .devsite-nav-active {
    color: var(--devsite-nav-color-active, var(--devsite-link-color-active, var(--devsite-link-color)))
    }
devsite-toc.devsite-toc-embedded {
    display: none
    }
devsite-toc.devsite-toc-embedded > .devsite-nav-list {
    width: auto
    }
devsite-toc.devsite-toc-embedded .devsite-nav-item {
    display: none
    }
devsite-toc.devsite-toc-embedded .devsite-nav-item[visible], devsite-toc.devsite-toc-embedded[expanded] .devsite-nav-item {
    display: block
    }
devsite-toc.devsite-toc-embedded .devsite-nav-item.devsite-toc-toggle, devsite-toc.devsite-toc-embedded[expanded] .devsite-nav-item.devsite-toc-toggle {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-toc .devsite-nav-more-items, devsite-toc .devsite-nav-show-all {
    display: none
    }
devsite-toc[expandable] .devsite-nav-more-items, devsite-toc[expandable] .devsite-nav-show-all {
    color: var(--devsite-secondary-text-color);
    display: block;
    height: 24px;
    padding: 0
    }
devsite-toc .devsite-nav-show-all {
    margin: -4px 0 0 4px;
    min-width: 20px
    }
devsite-toc .devsite-nav-show-all:before {
    content: "expand_more"
    }
devsite-toc .devsite-nav-more-items {
    margin-bottom: -8px;
    min-width: 0
    }
devsite-toc .devsite-nav-more-items:before {
    content: "more_horiz"
    }
devsite-toc[expanded] .devsite-nav-more-items:before, devsite-toc[expanded] .devsite-nav-show-all:before {
    content: "expand_less"
    }
devsite-toc .devsite-toc-toggle {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0
    }
devsite-toc .devsite-show-apix {
    margin-top: 12px
    }
@media screen and (max-width: 1253px) {
    devsite-toc.devsite-toc, devsite-toc[visible].devsite-toc {
        display: none
        }
    devsite-toc.devsite-toc-embedded:not(:empty) {
        display: block;
        margin: 28px 0 24px
        }
    body[layout][concierge] devsite-toc.devsite-toc-embedded {
        display: none
        }
    devsite-toc.devsite-toc-embedded:not(:empty) ~ .devsite-article-body > :first-child {
        margin-top: 0
        }
    body[template=landing] devsite-toc.devsite-toc-embedded:not(:empty) {
        margin: 20px 40px 24px
        }
    }
@media screen and (max-width: 840px) {
    body[template=landing] devsite-toc.devsite-toc-embedded:not(:empty) {
        margin: 20px 24px 24px
        }
    body[layout][concierge] devsite-toc.devsite-toc-embedded:not(:empty) {
        display: block
        }
    }
@media screen and (max-width: 600px) {
    body[template=landing] devsite-toc.devsite-toc-embedded:not(:empty) {
        margin: 20px 16px 24px
        }
    }
.devsite-tooltip-msg {
    border-radius: 2px;
    background: rgba(95, 99, 104, 0.9);
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font: 500 10px/10px var(--devsite-primary-font-family);
    margin: 8px 0;
    max-width: 300px;
    opacity: 1;
    padding: 6px 8px;
    pointer-events: none;
    position: fixed;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 1020
    }
devsite-topic {
    display: block
    }
devsite-topic .devsite-topic--inner {
    max-width: 936px;
    padding: 0 40px;
    margin: 0 auto
    }
devsite-topic .devsite-topic--header {
    background-color: var(--devsite-background-1);
    background-image: url(../images/devsite_topics_header.svg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: 1440px auto;
    margin-bottom: 40px
    }
devsite-topic .devsite-topic--header .devsite-topic--inner {
    padding-top: 168px
    }
devsite-topic .devsite-topic--header h1 {
    margin: 0;
    top: auto;
    font-size: 36px;
    line-height: 44px;
    color: #202124;
    font-family: var(--devsite-headline-font-family)
    }
devsite-topic .devsite-topic--header p {
    margin: 0;
    padding: 0;
    color: #202124;
    font-size: 18px;
    line-height: 24px;
    font-family: var(--devsite-headline-font-family)
    }
devsite-topic .devsite-topic--header .jump-links {
    border-bottom: 1px solid #ddd;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-family: Google Sans;
    font-weight: 500;
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    list-style: none;
    padding: 26px 0 0;
    width: 100%
    }
devsite-topic .devsite-topic--header .jump-links a:after {
    content: "arrow_downward";
    font: normal normal normal 18px/1 Material Icons;
    margin-left: 8px;
    vertical-align: text-bottom
    }
devsite-topic .devsite-topic--header .jump-links a {
    text-decoration: none !important
    }
devsite-topic .devsite-topic--header .jump-links a:link, devsite-topic .devsite-topic--header .jump-links a:visited {
    color: #5f6368 !important
    }
devsite-topic .devsite-topic--header .jump-links a:focus, devsite-topic .devsite-topic--header .jump-links a:hover {
    color: #1a73e8 !important
    }
devsite-topic .devsite-topic--section {
    padding: 40px 0
    }
devsite-topic .devsite-topic--section:nth-child(odd) {
    background: #f8f9fa
    }
devsite-topic .devsite-topic--section h2 {
    margin: 0;
    padding: 0;
    font-size: 32px;
    color: #202124;
    line-height: 40px;
    font-family: var(--devsite-headline-font-family)
    }
devsite-topic .devsite-topic--section .devsite-topic-section-description {
    margin: 0;
    padding: 0;
    font-size: 16px;
    color: #3c4043;
    line-height: 24px;
    font-family: var(--devsite-primary-font-family);
    max-width: calc(66.666667% - 13.333333px)
    }
devsite-topic .devsite-topic-section--row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 -12px;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
    }
devsite-topic .devsite-topic-section--row .devsite-topic-section--card {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    min-width: 0;
    max-width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 12px 24px
    }
devsite-topic .devsite-topic-section--row .devsite-topic-section--card .devsite-topic-section-card--title {
    font-size: 24px;
    color: #202124;
    line-height: 32px;
    font-family: var(--devsite-primary-font-family)
    }
devsite-topic .devsite-topic-section--row .devsite-topic-section--card .devsite-topic-section-card--title a {
    color: #202124
    }
devsite-topic .devsite-topic-section--row .devsite-topic-section--card .devsite-topic-section-card--description {
    font-size: 16px;
    color: #3c4043;
    letter-spacing: 0.1px;
    line-height: 24px;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
    }
devsite-topic .devsite-topic-section-card--label {
    padding: 16px
    }
devsite-topic .devsite-topic-section-card--label span {
    border-radius: 4px;
    padding: 2px 8px;
    font-family: var(--devsite-primary-font-family);
    font-size: 12px;
    color: rgba(0, 0, 0, 0.87);
    text-transform: uppercase
    }
devsite-topic .devsite-topic-section--hero {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -moz-box-orient: horizontal;
    -moz-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
    }
devsite-topic .devsite-topic-section--hero-media {
    margin-left: 12px
    }
devsite-topic .devsite-topic-section--hero-media .devsite-landing-row-item-image {
    background: none
    }
devsite-topic .devsite-topic-section--hero-description {
    margin-right: 12px
    }
devsite-topic .devsite-topic-section--hero-description p.devsite-topic-section-description {
    max-width: 100%
    }
devsite-topic .devsite-topic-section--hero-description, devsite-topic .devsite-topic-section--hero-media {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: calc(50% - 12px)
    }
devsite-topic .devsite-topic-section--cards {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 24px;
    margin: 0 -12px;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
    }
devsite-topic .devsite-topic-section--cards .devsite-topic-section--card {
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color);
    background: var(--devsite-background-1);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    min-width: 0;
    max-width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    border-radius: 4px;
    margin: 0 12px 24px;
    width: calc(50% - 24px)
    }
devsite-topic .devsite-topic-section--cards .devsite-topic-section--card .devsite-topic-section-card--title {
    padding: 0 16px
    }
devsite-topic .devsite-topic-section--cards .devsite-topic-section--card .devsite-topic-section-card--title a {
    font-family: var(--devsite-headline-font-family);
    font-size: 24px;
    color: #202124;
    line-height: 32px
    }
devsite-topic .devsite-topic-section--cards .devsite-topic-section--card .devsite-topic-section-card--description {
    padding: 8px 16px 24px;
    border-bottom: 1px solid #ddd;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
    }
devsite-topic .devsite-topic-section--cards .devsite-topic-section--card .devsite-topic-section-card--description p {
    font-size: 16px;
    color: #3c4043;
    line-height: 24px
    }
devsite-topic .devsite-topic-section--cards .devsite-topic-section--card .devsite-topic-section-card--meta {
    padding: 16px 16px 12px;
    font-size: 12px;
    line-height: 16px
    }
devsite-topic .devsite-topic-section--cards .devsite-topic-section--card .devsite-topic-section-card--meta-byline {
    color: #202124
    }
devsite-topic .devsite-topic-section--cards .devsite-topic-section--card .devsite-topic-section-card--meta-date {
    color: #3c4043
    }
devsite-topic .devsite-topic-section--cards .devsite-topic-section--card .devsite-topic-section-card--buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 12px 8px 8px
    }
devsite-topic .devsite-topic-section--1-up .devsite-topic-section--card {
    width: calc(100% - 24px);
    margin-bottom: 0
    }
devsite-topic .devsite-topic-section--2-up .devsite-topic-section--card {
    margin-bottom: 0
    }
devsite-topic .devsite-topic-section--3-up .devsite-topic-section--card {
    width: calc(33% - 24px)
    }
@media screen and (max-width: 840px) {
    devsite-topic .devsite-topic--inner {
        max-width: 768px;
        padding: 0 40px
        }
    }
@media screen and (max-width: 600px) {
    devsite-topic .devsite-topic--inner {
        max-width: 100%;
        padding: 0 24px
        }
    devsite-topic .devsite-topic--section {
        padding: 24px 0
        }
    devsite-topic .devsite-topic--section .devsite-topic-section--card {
        width: calc(100% - 24px)
        }
    devsite-topic .devsite-topic-section--hero {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
        }
    devsite-topic .devsite-topic-section--hero-description, devsite-topic .devsite-topic-section--hero-media {
        margin: 0;
        width: 100%
        }
    devsite-topic .devsite-topic-section--hero-media {
        margin-bottom: 24px
        }
    }
devsite-tracking-question {
    background-color: var(--devsite-background-3);
    display: block;
    padding: 8px
    }
devsite-tracking-question .devsite-tracking-question-text {
    font-weight: 700
    }
devsite-tracking-question .devsite-tracking-question-hidden {
    display: none
    }
devsite-tracking-question .devsite-tracking-question-choice-button {
    background: var(--devsite-background-1);
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    color: var(--devsite-primary-text-color);
    cursor: pointer;
    line-height: 50px;
    margin: 8px 0;
    padding: 0 20px;
    -webkit-transition: background 0.2s, box-shadow 0.2s;
    transition: background 0.2s, box-shadow 0.2s
    }
devsite-tracking-question .devsite-tracking-question-choice-button:focus, devsite-tracking-question .devsite-tracking-question-choice-button:hover {
    background: #bdc1c6;
    box-shadow: 0 4px 8px 0 hsla(210, 6%, 63%, 0.5)
    }
devsite-user {
    display: block;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto
    }
devsite-user[signed-in], devsite-user[signed-in].not-eligible {
    min-width: 44px
    }
devsite-user[signed-in][enable-profiles] {
    min-width: 84px
    }
devsite-user[signed-in][enable-profiles].not-eligible {
    min-width: 44px
    }
devsite-user[signed-in][enable-profiles][fp-auth] {
    min-width: 88px
    }
devsite-user[signed-in][enable-profiles][fp-auth].not-eligible {
    min-width: 44px
    }
devsite-user #devsite-signin-btn {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font: 500 14px/36px var(--devsite-primary-font-family)
    }
devsite-user devsite-spinner {
    margin: 4px 8px 4px 20px
    }
devsite-user devsite-spinner.hide {
    opacity: 0;
    -webkit-transition: opacity 0.45s ease;
    transition: opacity 0.45s ease;
    -webkit-animation-delay: 0.45s;
    animation-delay: 0.45s
    }
devsite-user .ogb-wrapper {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    opacity: 1;
    -webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1)
    }
devsite-user .ogb-pending {
    opacity: 0
    }
devsite-user .gb_Mb > .gb_Lb, devsite-user .gb_Nb > .gb_Mb, devsite-user .gb_Pd > .gb_Za, devsite-user .gb_Rb > .gb_Qb, devsite-user .gb_Sb > .gb_Rb {
    -moz-box-sizing: content-box;
    box-sizing: content-box
    }
devsite-user button.devsite-user-change-account, devsite-user button.devsite-user-signout {
    height: auto;
    color: var(--devsite-primary-text-color)
    }
devsite-user button.devsite-user-change-account .material-icons, devsite-user button.devsite-user-signout .material-icons {
    margin: 0;
    height: auto;
    width: auto;
    top: auto
    }
devsite-user button.devsite-user-change-account {
    border-left: 0;
    border-right: 0;
    border: 0
    }
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), not all {
    [dir=rtl] devsite-user .gb_xa:before {
        -webkit-transform-origin: right 0;
        transform-origin: right 0
        }
    }
devsite-user .devsite-user-dialog {
    display: none
    }
devsite-user .devsite-user-dialog a:link, devsite-user .devsite-user-dialog a:visited {
    text-decoration: none
    }
devsite-user[dialog--open] .devsite-user-dialog {
    background: #f3f6fc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.87);
    display: block;
    max-height: calc(100vh - 86px);
    outline: none;
    overflow: auto;
    position: absolute;
    right: 24px;
    top: 62px;
    width: 354px
    }
[dir=rtl] devsite-user[dialog--open] .devsite-user-dialog {
    left: 24px;
    right: auto
    }
devsite-user .devsite-user-dialog-photo, devsite-user .devsite-user-dialog-toggle, devsite-user .devsite-user-dialog-toggle .devsite-user-dialog-letter {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
    overflow: hidden;
    padding: 0
    }
devsite-user .devsite-user-dialog .devsite-user-dialog-photo, devsite-user .devsite-user-dialog-signin .devsite-user-dialog-letter {
    background: var(--devsite-user-avatar-background, var(--devsite-background-color, var(--devsite-primary-color, var(--devsite-primary-text-color))));
    color: var(--devsite-user-avatar-color, var(--devsite-text-color, var(--devsite-inverted-text-color)))
    }
devsite-user .devsite-user-dialog-toggle {
    border: 4px solid transparent;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 32px;
    margin: 0 4px 0 0;
    overflow: hidden;
    text-decoration: none;
    width: 32px
    }
[dir=rtl] devsite-user .devsite-user-dialog-toggle {
    margin: 0 0 0 4px
    }
devsite-user .devsite-user-dialog-toggle:focus {
    border-color: var(--devsite-link-background-active)
    }
devsite-user .devsite-user-dialog-photo-thumbnail {
    height: 32px;
    width: 32px
    }
devsite-user[js-signin] button {
    box-shadow: none
    }
devsite-user[js-signin] .devsite-user-dialog-toggle {
    opacity: 0;
    -webkit-transition: opacity 0.45s ease;
    transition: opacity 0.45s ease
    }
devsite-user[js-signin] .devsite-user-dialog-toggle.show {
    opacity: 1
    }
devsite-user .devsite-user-dialog-toggle .devsite-user-dialog-letter {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 32px;
    -moz-box-flex: 0;
    -ms-flex: 0 0 32px;
    flex: 0 0 32px;
    font-size: 17px;
    height: 32px
    }
devsite-user .devsite-user-dialog-learn-more {
    background-color: var(--devsite-link-background-active);
    border-radius: 4px;
    color: var(--devsite-secondary-text-color);
    font: 12px/16px var(--devsite-primary-font-family);
    margin: 4px 4px 0;
    padding: 4px 29px;
    text-align: center
    }
devsite-user .devsite-user-dialog-learn-more a, devsite-user .devsite-user-dialog-learn-more span {
    font-weight: 500
    }
devsite-user .devsite-user-dialog-learn-more a {
    color: var(--devsite-contrast-link-color)
    }
devsite-user .devsite-user-dialog-learn-more a:focus, devsite-user .devsite-user-dialog-learn-more a:hover {
    text-decoration: underline
    }
devsite-user .devsite-user-dialog-user {
    background: #fff;
    border-radius: 0 0 16px 16px;
    margin: 0 4px 4px;
    padding: 20px 33px 23px;
    text-align: center
    }
devsite-user .devsite-user-dialog-photo {
    margin: 0 auto 16px;
    position: relative;
    left: -2px
    }
devsite-user .devsite-user-dialog-photo, devsite-user .devsite-user-dialog-photo-portrait {
    height: 80px;
    width: 80px
    }
devsite-user .devsite-user-dialog-letter {
    text-transform: uppercase
    }
devsite-user .devsite-user-dialog-photo .devsite-user-dialog-letter {
    font-size: 52px
    }
devsite-user .devsite-user-dialog-email, devsite-user .devsite-user-dialog-name {
    text-overflow: ellipsis;
    overflow: hidden
    }
devsite-user .devsite-user-dialog-name {
    color: var(--devsite-primary-text-color);
    font: 500 16px/22px var(--devsite-headline-font-family);
    letter-spacing: 0.29px
    }
devsite-user .devsite-user-dialog-email {
    color: var(--devsite-secondary-text-color);
    font: 400 14px/19px var(--devsite-primary-font-family)
    }
devsite-user .devsite-user-manage {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: 0;
    border: var(--devsite-primary-border);
    border-radius: 17px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font: 500 14px/20px var(--devsite-headline-font-family);
    height: 34px;
    letter-spacing: 0.25px;
    margin: 16px 0 0;
    padding: 0 16px;
    white-space: nowrap
    }
devsite-user .devsite-user-manage:link, devsite-user .devsite-user-manage:visited {
    color: var(--devsite-primary-text-color)
    }
devsite-user .devsite-user-manage:focus, devsite-user .devsite-user-manage:hover {
    background-color: var(--devsite-background-2)
    }
devsite-user .devsite-user-manage:active {
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color);
    background-color: var(--devsite-background-4);
    border-color: transparent
    }
devsite-user .devsite-user-dialog-buttons {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
    }
devsite-user .devsite-user-dialog .developer-profile:link, devsite-user .devsite-user-dialog .developer-profile:visited, devsite-user .devsite-user-dialog .devsite-user-developer-profile:link, devsite-user .devsite-user-dialog .devsite-user-developer-profile:visited, devsite-user .devsite-user-dialog .devsite-user-signin:link, devsite-user .devsite-user-dialog .devsite-user-signin:visited, devsite-user .devsite-user-signout:link, devsite-user .devsite-user-signout:visited {
    color: var(--devsite-primary-text-color)
    }
devsite-user .devsite-user-dialog .developer-profile:focus, devsite-user .devsite-user-dialog .developer-profile:hover, devsite-user .devsite-user-dialog .devsite-user-developer-profile:focus, devsite-user .devsite-user-dialog .devsite-user-developer-profile:hover, devsite-user .devsite-user-dialog .devsite-user-signin:focus, devsite-user .devsite-user-dialog .devsite-user-signin:hover, devsite-user .devsite-user-signout:focus, devsite-user .devsite-user-signout:hover {
    background-color: var(--devsite-background-2)
    }
devsite-user .devsite-user-dialog .developer-profile:active, devsite-user .devsite-user-dialog .devsite-user-developer-profile:active, devsite-user .devsite-user-dialog .devsite-user-signin:active, devsite-user .devsite-user-signout:active {
    background-color: var(--devsite-background-4)
    }
devsite-user .devsite-user-dialog .devsite-user-developer-profile, devsite-user .devsite-user-dialog .devsite-user-signin {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font: 500 14px/16px var(--devsite-headline-font-family);
    letter-spacing: 0.25px;
    padding: 15px 39px 16px;
    width: 100%
    }
devsite-user .devsite-user-dialog-buttons > :first-child {
    border-top: var(--devsite-secondary-border)
    }
devsite-user .devsite-user-dialog .devsite-user-signin {
    border-bottom: var(--devsite-secondary-border)
    }
devsite-user .devsite-user-dialog .new-notification {
    background: var(--devsite-notification-background);
    border-radius: 10px;
    color: var(--devsite-inverted-text-color);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.3px;
    padding: 2px 8px
    }
[dir=ltr] devsite-user .devsite-user-dialog .new-notification {
    margin-left: 12px
    }
[dir=rtl] devsite-user .devsite-user-dialog .new-notification {
    margin-right: 12px
    }
devsite-user .devsite-user-signin .devsite-switch-account-icon {
    fill: currentColor;
    -webkit-margin-end: 12px;
    -moz-margin-end: 12px;
    margin-inline-end: 12px
    }
devsite-user .devsite-user-developer-profile .google-dev-icon {
    width: 28px;
    position: relative
    }
[dir=ltr] devsite-user .devsite-user-developer-profile .google-dev-icon {
    margin-left: -4px;
    margin-right: 8px
    }
[dir=rtl] devsite-user .devsite-user-developer-profile .google-dev-icon {
    margin-left: 8px;
    margin-right: -4px
    }
devsite-user .devsite-user-signout {
    border: var(--devsite-primary-border);
    border-radius: 4px;
    display: inline-block;
    font: 500 14px/16px var(--devsite-headline-font-family);
    letter-spacing: 0.15px;
    margin: 16px auto;
    padding: 10px 24px
    }
devsite-user .devsite-user-signout:active {
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color);
    background-color: var(--devsite-background-4);
    border-color: transparent
    }
devsite-user .devsite-user-dialog-footer {
    border-top: var(--devsite-secondary-border);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 14px 20px
    }
devsite-user .devsite-user-dialog-footer-link {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin: 0
    }
devsite-user .devsite-user-dialog-footer-link:not(:first-child):before {
    color: var(--devsite-secondary-text-color);
    content: "•";
    font-size: 13px
    }
devsite-user .devsite-user-dialog-footer-link > a {
    border-radius: 4px;
    display: inline-block;
    font: 400 12px/16px var(--devsite-primary-font-family);
    padding: 4px 8px
    }
devsite-user .devsite-user-dialog-footer-link > a:link, devsite-user .devsite-user-dialog-footer-link > a:visited {
    color: var(--devsite-secondary-text-color)
    }
devsite-user .devsite-user-dialog-footer-link > a:focus, devsite-user .devsite-user-dialog-footer-link > a:hover {
    background-color: var(--devsite-background-2)
    }
devsite-user .devsite-user-dialog-footer-link > a:active {
    background-color: var(--devsite-background-4)
    }
devsite-user .devsite-devprofile-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    position: relative;
    opacity: 0
    }
devsite-user .devsite-devprofile-wrapper.show {
    opacity: 1;
    -webkit-transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0s
    }
devsite-user .devsite-devprofile-wrapper devsite-spinner {
    margin: 0
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-notifications-indicator {
    border-radius: 8px;
    background-color: #1a73e8;
    width: 8px;
    height: 8px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-button {
    height: 32px;
    width: 32px;
    min-width: 32px;
    min-height: 32px;
    margin: 0;
    padding: 0;
    border: var(--devsite-primary-border);
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    --devsite-button-background-hover: #e8eaed;
    --devsite-button-background-active: #e8eaed;
    --devsite-button-border-hover: none;
    --devsite-button-border-radius: 50%;
    --devsite-button-box-shadow: none;
    --devsite-button-box-shadow-active: none
    }
devsite-user .devsite-devprofile-wrapper.open .devsite-devprofile-button {
    background: #e8eaed
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout, devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout {
    max-width: 378px;
    width: 100vw
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout .devsite-devprofile-notch, devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout .devsite-devprofile-notch {
    border-bottom: 8px solid var(--devsite-background-1);
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    -webkit-clip-path: inset(-8px -8px 0);
    clip-path: inset(-8px -8px 0);
    height: 0;
    position: absolute;
    right: 9px;
    top: -8px;
    width: 0;
    -webkit-filter: drop-shadow(0 1px 2px var(--devsite-elevation-key-shadow-color)) drop-shadow(0 2px 6px var(--devsite-elevation-ambient-shadow-color));
    filter: drop-shadow(0 1px 2px var(--devsite-elevation-key-shadow-color)) drop-shadow(0 2px 6px var(--devsite-elevation-ambient-shadow-color))
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout .devsite-devprofile-notch:before {
    background: var(--devsite-background-1)
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout {
    position: absolute;
    background: var(--devsite-background-1);
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
    border-radius: 8px;
    font-family: var(--devsite-primary-font-family);
    padding: 8px 0;
    margin-top: 8px;
    margin-right: -2px;
    top: 100%;
    right: 0;
    opacity: 0;
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    pointer-events: none;
    display: none;
    z-index: 1007
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout .devsite-devprofile-notch:before {
    background: var(--devsite-background-1)
    }
[dir=rtl] devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout {
    left: 0;
    right: auto
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout.show {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    pointer-events: all
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout.visible {
    display: block
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout .devsite-devprofile-notifications-container {
    margin-left: 10px;
    font-weight: 500;
    color: #fff;
    font-size: 12px;
    background-color: #1a73e8;
    border-radius: 16px;
    padding: 0 5px 0 4px;
    height: 16px;
    line-height: 16px
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout .profile-links-header {
    color: var(--devsite-primary-text-color);
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 12px 14px
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout .profile-link {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 14px 16px;
    color: var(--devsite-primary-text-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-decoration: none
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout .profile-link:hover {
    background: #f1f3f4
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout ul {
    margin: 0;
    padding: 0
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout ul li {
    margin: 0;
    padding: 0;
    list-style: none
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=view-profile] {
    max-width: 232px
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=view-bookmarked-pages], devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=view-rated-pages] {
    background: var(--devsite-link-color);
    color: var(--devsite-inverted-text-color);
    padding: 16px 24px
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=view-bookmarked-pages] .devsite-devprofile-notch, devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=view-rated-pages] .devsite-devprofile-notch {
    border-bottom: 8px solid var(--devsite-link-color)
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=view-bookmarked-pages] .devsite-devprofile-notch:before, devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=view-rated-pages] .devsite-devprofile-notch:before {
    background: var(--devsite-link-color)
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=view-bookmarked-pages] .devsite-devprofile-notch svg g path, devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=view-rated-pages] .devsite-devprofile-notch svg g path {
    fill: var(--devsite-link-color)
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=view-bookmarked-pages] .buttons, devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=view-rated-pages] .buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-top: 16px
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=view-bookmarked-pages] .buttons .button:hover, devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=view-rated-pages] .buttons .button:hover {
    --devsite-link-color: #1e88e5
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=view-bookmarked-pages] .button-white, devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=view-rated-pages] .button-white {
    color: var(--devsite-inverted-text-color)
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=view-bookmarked-pages] .button-white:focus, devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=view-bookmarked-pages] .button-white:hover, devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=view-rated-pages] .button-white:focus, devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=view-rated-pages] .button-white:hover {
    background: var(--devsite-link-color);
    color: var(--devsite-button-background-hover)
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=create-profile] {
    font-family: var(--devsite-primary-font-family);
    padding: 12px 20px
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=create-profile] .devsite-devprofile-callout-logo {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 36px;
    margin: 20px 0
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=create-profile] .devsite-devprofile-callout-subhead {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    letter-spacing: 0.1px;
    color: var(--devsite-primary-text-color);
    margin-bottom: 8px
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=create-profile] .devsite-devprofile-callout-body {
    font-size: 14px;
    margin-bottom: 24px
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout[popup-type=create-profile] .devsite-devprofile-callout-buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout {
    position: absolute;
    background: var(--devsite-background-1);
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
    border-radius: 8px;
    font-family: var(--devsite-headline-font-family);
    margin-top: 8px;
    top: 100%;
    right: -2px;
    padding: 16px;
    max-width: 378px;
    width: 100vw;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0s
    }
[dir=rtl] devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout {
    left: 0;
    right: auto
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout.hide {
    opacity: 0;
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: scale(0.8);
    transform: scale(0.8)
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout .devsite-devprofile-callout-error, devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout .devsite-devprofile-callout-step1, devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout .devsite-devprofile-callout-step2, devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout .devsite-devprofile-callout-step3, devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout .devsite-devprofile-callout-step4 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout .devsite-devprofile-callout-step3 {
    padding: 24px 0
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout .devsite-devprofile-logo {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout .devsite-devprofile-logo svg {
    width: 74px
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout h4 {
    margin: 20px 0 8px;
    padding: 0;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.1px;
    color: var(--devsite-primary-text-color);
    text-align: left
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: var(--devsite-primary-text-color)
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout .account-note, devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout .sub-text, devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout .tos {
    color: var(--devsite-secondary-text-color);
    font: 400 12px/16px var(--devsite-primary-font-family);
    letter-spacing: 0.3px
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout .sub-text, devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout .tos {
    font-size: 14px
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout .sub-text {
    -webkit-padding-start: 16px;
    -moz-padding-start: 16px;
    padding-inline-start: 16px
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout .devsite-devprofile-callout-newsletter, devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout .devsite-devprofile-callout-occupation {
    width: 100%;
    margin-bottom: 16px
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout .devsite-devprofile-callout-newsletter label, devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout .devsite-devprofile-callout-occupation label {
    font-size: 14px;
    letter-spacing: 0.25px;
    color: var(--devsite-primary-text-color);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 16px
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout .devsite-devprofile-callout-buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-top: 24px
    }
devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout .devsite-devprofile-callout-buttons .button-dismiss {
    --devsite-button-border: 0;
    --devsite-button-border-hover: 0;
    --devsite-button-background-hover: #fff;
    --devsite-button-background-active: #fff;
    --devsite-button-border-active: 0;
    --devsite-button-box-shadow-active: none
    }
@media screen and (max-width: 840px) {
    devsite-user[dialog--open] .devsite-user-dialog {
        right: 16px
        }
    [dir=rtl] devsite-user[dialog--open] .devsite-user-dialog {
        left: 16px;
        right: auto
        }
    devsite-user .devsite-devprofile-wrapper .devsite-devprofile-callout {
        max-width: calc(100vw - 80px)
        }
    devsite-user .devsite-devprofile-wrapper .devsite-devprofile-popout {
        max-width: calc(100vw - 64px)
        }
    }
devsite-var {
    position: relative;
    white-space: nowrap
    }
devsite-var .devsite-var-input-wrapper {
    bottom: -2px;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    display: none;
    left: -4px;
    position: absolute;
    width: 100%
    }
devsite-var[active] .devsite-var-input-wrapper {
    display: inline-block
    }
devsite-selector devsite-var .devsite-var-input-wrapper {
    bottom: -3px
    }
table devsite-var .devsite-var-input-wrapper {
    bottom: -3px
    }
devsite-code devsite-var .devsite-var-input-wrapper {
    bottom: -2px
    }
devsite-var .devsite-var-input-wrapper + var {
    border-bottom: 1px dotted var(--devsite-var-color);
    cursor: pointer
    }
devsite-var input.devsite-var-input {
    border: 1px solid #80868b;
    font-family: inherit;
    font-size: inherit;
    padding: 1px 3px 0;
    width: inherit
    }
devsite-var input.devsite-var-input:focus {
    border-bottom: 1px solid #80868b;
    padding-bottom: 0
    }
devsite-var button.devsite-icon-edit {
    color: var(--devsite-var-color);
    margin: 0 0 2px 5px
    }
devsite-var .material-icons.devsite-icon-edit {
    vertical-align: middle
    }
devsite-var .devsite-icon-close {
    bottom: 0;
    position: absolute;
    right: -4px;
    top: 0
    }
devsite-var .devsite-icon-close, devsite-var .devsite-icon-close:hover {
    color: #202124
    }
devsite-var .devsite-var-wrapper .material-icons {
    background: none;
    border: none;
    font-size: inherit;
    height: inherit;
    min-width: inherit;
    padding: 0
    }
devsite-var .devsite-var-wrapper .material-icons:active {
    box-shadow: none
    }
devsite-var .devsite-var-wrapper .material-icons:hover {
    cursor: pointer
    }
devsite-version-selector {
    display: block;
    padding: 0 24px
    }
devsite-version-selector .devsite-version-selector-select {
    width: 100%
    }
.devsite-future-version, .devsite-future-version * {
    color: var(--devsite-tertiary-text-rgba);
    text-decoration: none
    }
devsite-video {
    aspect-ratio: 16/9;
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%
    }
devsite-video .devsite-video-placeholder img, devsite-video .devsite-video-placeholder span, devsite-video iframe {
    position: absolute
    }
devsite-video iframe {
    height: 101%;
    left: -0.5%;
    top: -0.5%;
    width: 101%
    }
devsite-video .devsite-video-placeholder span {
    color: var(--devsite-primary-text-color);
    padding: 8px
    }
devsite-video .devsite-basic-video-player {
    border: 0;
    height: 100%;
    position: absolute;
    width: 100%
    }
.devsite-view-release-notes-dialog-container {
    height: 80%
    }
devsite-view-release-notes-dialog {
    color: #000;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    padding: 15px
    }
[appearance=dark] devsite-view-release-notes-dialog {
    color: #fff
    }
devsite-view-release-notes-dialog .devsite-dialog-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 10px
    }
devsite-view-release-notes-dialog .devsite-dialog-header .title {
    text-align: initial
    }
devsite-view-release-notes-dialog .devsite-dialog-header devsite-dropdown-list {
    -webkit-align-self: end;
    -ms-flex-item-align: end;
    align-self: end;
    border: var(--devsite-primary-border);
    border-radius: 5px;
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
    padding: 6px 8px
    }
devsite-view-release-notes-dialog .devsite-dialog-header devsite-dropdown-list .toggle-button {
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content
    }
devsite-view-release-notes-dialog .devsite-dialog-header .chip-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 4px
    }
devsite-view-release-notes-dialog .devsite-dialog-header .selected-date-toggle {
    color: #1a73e8;
    line-height: 10px;
    margin: 0
    }
[appearance=dark] devsite-view-release-notes-dialog .devsite-dialog-header .selected-date-toggle {
    color: #8ab4f8
    }
devsite-view-release-notes-dialog .devsite-dialog-contents {
    border: var(--devsite-primary-border);
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    overflow-y: scroll
    }
devsite-view-release-notes-dialog .devsite-dialog-contents .release-note-date-section {
    margin-bottom: 24px
    }
devsite-view-release-notes-dialog .devsite-dialog-contents .release-note-date-section .release-note-date-header {
    margin-bottom: 12px;
    margin-top: 0
    }
devsite-view-release-notes-dialog .devsite-dialog-contents .release-note-date-section .release-note {
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -moz-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-view-release-notes-dialog .devsite-dialog-contents .release-note .release-note-content {
    color: #000;
    padding: 0 8px
    }
[appearance=dark] devsite-view-release-notes-dialog .devsite-dialog-contents .release-note .release-note-content {
    color: #fff
    }
devsite-view-release-notes-dialog .release-note-type-chip {
    border-radius: 20px;
    font-weight: 700
    }
devsite-view-release-notes-dialog .release-note-type-chip.large {
    padding: 4px 20px
    }
devsite-view-release-notes-dialog .release-note-type-chip.large.green {
    background: #137333;
    color: #fff
    }
devsite-view-release-notes-dialog .release-note-type-chip.large.yellow {
    background: #ea8600;
    color: #fff
    }
devsite-view-release-notes-dialog .release-note-type-chip.large.blue {
    background: #185abc;
    color: #fff
    }
devsite-view-release-notes-dialog .release-note-type-chip.large.red {
    background: #b31412;
    color: #fff
    }
devsite-view-release-notes-dialog .release-note-type-chip.large.orange {
    background: #c26401;
    color: #fff
    }
devsite-view-release-notes-dialog .release-note-type-chip.large.grey {
    background: #3c4043;
    color: #fff
    }
devsite-view-release-notes-dialog .release-note-type-chip.small {
    font-size: 12px;
    padding: 0 8px
    }
devsite-view-release-notes-dialog .release-note-type-chip.small.green {
    background: #e6f4ea;
    color: #137333
    }
devsite-view-release-notes-dialog .release-note-type-chip.small.yellow {
    background: #fef7e0;
    color: #ea8600
    }
devsite-view-release-notes-dialog .release-note-type-chip.small.blue {
    background: #e8f0fe;
    color: #185abc
    }
devsite-view-release-notes-dialog .release-note-type-chip.small.red {
    background: #fce8e6;
    color: #b31412
    }
devsite-view-release-notes-dialog .release-note-type-chip.small.orange {
    background: #feefe3;
    color: #c26401
    }
devsite-view-release-notes-dialog .release-note-type-chip.small.grey {
    background: #f8f9fa;
    color: #3c4043
    }
devsite-view-release-notes-dialog .devsite-dialog-footer {
    padding: 10px 0 0
    }
devsite-visibility-analytics[counterfactual] {
    display: block;
    height: 1px;
    opacity: 0
    }
devsite-visibility-analytics[counterfactual] * {
    display: none
    }
devsite-vplus .devsite-vplus-content-container {
    border: 1px solid #000;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
    visibility: hidden
    }
devsite-vplus .devsite-vplus-slide-frame {
    height: 100%;
    left: 0;
    overflow: auto;
    position: absolute;
    top: 0;
    width: 100%
    }
devsite-vplus .devsite-vplus-video {
    bottom: 0;
    height: 26%;
    position: absolute;
    right: 0;
    -webkit-transition: width 1.3s ease, height 1.3s ease, position 1.3s ease;
    transition: width 1.3s ease, height 1.3s ease, position 1.3s ease;
    width: 26%;
    z-index: 1
    }
devsite-vplus .devsite-vplus-video.devsite-vplus-large {
    height: 100%;
    width: 100%
    }
devsite-vplus .devsite-vplus-video-container {
    bottom: 0;
    cursor: pointer;
    height: 26%;
    position: absolute;
    right: 0;
    -webkit-transition: width 1.3s ease, height 1.3s ease, position 1.3s ease;
    transition: width 1.3s ease, height 1.3s ease, position 1.3s ease;
    width: 26%;
    z-index: 1
    }
devsite-vplus .devsite-vplus-video-container.devsite-vplus-large {
    height: 100%;
    width: 100%
    }
devsite-vplus .devsite-vplus-video-container > video {
    width: 100%
    }
@media (max-width: 1049px) {
    #video-caption-container span {
        font-size: 1.9vw
        }
    }
@media (min-width: 1050px) {
    #video-caption-container span {
        font-size: 1.1vw
        }
    }
devsite-vplus .devsite-vplus-controls {
    background-color: #fff;
    border-radius: 6px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    margin: 0 auto;
    max-width: 490px;
    padding: 6px;
    text-align: center
    }
devsite-vplus .devsite-vplus-controls-text {
    font-size: 16px;
    font-style: normal;
    font-weight: 700
    }
devsite-vplus .devsite-vplus-slide-status {
    margin: auto
    }
devsite-vplus .devsite-vplus-slide-status span {
    font-size: 18px
    }
devsite-vplus .devsite-vplus-slide-status span:not(:first-of-type) {
    padding-left: 5px
    }
devsite-vplus .devsite-vplus-player-controls {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin: 8px 16px
    }
devsite-vplus .devsite-vplus-control-button {
    cursor: pointer;
    box-shadow: none;
    height: 43px;
    padding-top: 0;
    width: 50px
    }
devsite-vplus .devsite-vplus-control-button:hover {
    box-shadow: 0 2px 4px #aaa;
    border-radius: 4px
    }
devsite-vplus .devsite-vplus-video-controls-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-vplus .devsite-vplus-play-icon {
    margin-left: 0
    }
devsite-vplus .devsite-vplus-pause-icon {
    margin-left: 0
    }
devsite-vplus .devsite-vplus-play-button {
    padding-left: 0;
    margin-left: 16px;
    width: 50px
    }
devsite-vplus .devsite-vplus-next-button {
    padding-left: 0;
    margin-left: 16px;
    width: 50px
    }
devsite-vplus .devsite-vplus-triangle {
    border-style: solid;
    height: 0;
    margin: auto;
    position: relative;
    width: 0
    }
devsite-vplus .devsite-vplus-back {
    border-color: transparent #24508d transparent transparent;
    border-width: 8px 16px 8px 0
    }
devsite-vplus .devsite-vplus-back-triangle-1 {
    left: -8px;
    top: 15px
    }
devsite-vplus .devsite-vplus-back-triangle-2 {
    left: 8px;
    top: -1px
    }
devsite-vplus .devsite-vplus-forward-single {
    border-color: transparent transparent transparent #24508d;
    border-width: 16px 0 16px 25px;
    top: 5px
    }
devsite-vplus .devsite-vplus-forward {
    border-color: transparent transparent transparent #24508d;
    border-width: 8px 0 8px 16px;
    top: 5px
    }
devsite-vplus .devsite-vplus-forward-triangle-1 {
    left: -8px;
    top: 15px
    }
devsite-vplus .devsite-vplus-forward-triangle-2 {
    left: 8px;
    top: -1px
    }
devsite-vplus .devsite-vplus-pause {
    background-color: #24508d;
    height: 30px;
    width: 9px
    }
devsite-vplus .devsite-vplus-rect-1 {
    left: 12px;
    position: relative;
    top: 6px
    }
devsite-vplus .devsite-vplus-rect-2 {
    left: 29px;
    position: relative;
    top: -24px
    }
devsite-vplus .devsite-vplus-playbackrate select:hover {
    box-shadow: 0 2px 4px #aaa
    }
devsite-vplus .devsite-vplus-playbackrate .material-icons {
    margin-top: 10px
    }
devsite-vplus .devsite-vplus-playbackrate select {
    border-color: transparent;
    font-size: 18px;
    height: 46px;
    padding-bottom: 2px;
    padding-top: 2px;
    -moz-text-align-last: center;
    text-align-last: center;
    text-transform: none
    }
devsite-vplus .devsite-vplus-caption-control-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 8px
    }
devsite-vplus .devsite-vplus-caption-control {
    background-color: #24508d;
    border: 0;
    border-radius: 16px;
    color: var(--devsite-inverted-text-color);
    display: inline-block;
    height: 35px;
    line-height: 39px;
    margin-right: 10px;
    margin-top: 1px;
    padding: 0;
    text-align: center;
    text-decoration: none;
    text-indent: 0;
    vertical-align: 10%;
    width: 50px
    }
devsite-vplus .devsite-vplus-captions-off {
    background-color: #fff;
    color: #24508d
    }
devsite-vplus .devsite-vplus-controls .devsite-vplus-control-button.disabled {
    background-color: transparent
    }
devsite-vplus .devsite-vplus-prev-button.disabled .devsite-vplus-triangle {
    border-right-color: #94969a
    }
devsite-vplus .devsite-vplus-prev-button:hover:not(.disabled) .devsite-vplus-triangle {
    border-right-color: #18345c
    }
devsite-vplus .devsite-vplus-next-button:hover:not(.disabled) .devsite-vplus-triangle {
    border-right-color: #18345c
    }
devsite-vplus .devsite-vplus-next-button.disabled .devsite-vplus-triangle {
    border-left-color: #94969a
    }
.next-button:hover:not(.disabled) .devsite-vplus-triangle, devsite-vplus .devsite-vplus-play-button:hover:not(.disabled) .devsite-vplus-triangle {
    border-left-color: #18345c
    }
devsite-vplus .devsite-vplus-navigation-button-container {
    margin: 0 auto;
    text-align: center
    }
devsite-vplus .devsite-vplus-navigation-button-link {
    text-decoration: none
    }
devsite-vplus .devsite-vplus-navigation-button {
    background-color: #24508d;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    color: var(--devsite-inverted-text-color);
    display: inline-block;
    font-size: 16px;
    margin: 12px 36px;
    padding: 12px 36px
    }
devsite-vplus .devsite-vplus-addendums {
    border-top: 0;
    border: 1px solid #000;
    cursor: pointer
    }
devsite-vplus .devsite-vplus-addendums-header {
    background-color: var(--devsite-background-5);
    outline: none;
    padding: 8px 8px 8px 0;
    width: 100%
    }
devsite-vplus .devsite-vplus-addendums-control {
    cursor: pointer;
    display: table-cell;
    vertical-align: middle
    }
devsite-vplus .devsite-vplus-addendums-control .material-icons.devsite-vplus-caption-button {
    cursor: pointer
    }
devsite-vplus .devsite-vplus-addendums-control > div {
    white-space: nowrap;
    margin-left: 8px;
    margin-right: 8px
    }
devsite-vplus .devsite-vplus select {
    outline: 2px
    }
devsite-vplus .devsite-vplus select:hover, devsite-vplus .devsite-vplus-notes-control > div > div:hover, devsite-vplus .devsite-vplus-transcript-control > div > div:hover {
    box-shadow: 0 2px 4px #aaa;
    background-color: #e1f3fc
    }
devsite-vplus .devsite-vplus select:focus {
    background-color: #e1f3fc
    }
devsite-vplus .devsite-vplus-addendums-control.devsite-vplus-search-widget > div {
    margin-left: 0;
    margin-right: 0
    }
devsite-vplus .devsite-vplus-addendums-label {
    white-space: nowrap
    }
devsite-vplus .devsite-vplus-addendums-control .devsite-hidden {
    display: none
    }
devsite-vplus .devsite-vplus-notes-control .devsite-vplus-addendums-closed, devsite-vplus .devsite-vplus-notes-control .devsite-vplus-addendums-opened, devsite-vplus .devsite-vplus-transcript-control .devsite-vplus-addendums-closed, devsite-vplus .devsite-vplus-transcript-control .devsite-vplus-addendums-opened {
    display: none
    }
devsite-vplus .devsite-vplus-notes-control.goog-zippy-collapsed .devsite-vplus-addendums-closed, devsite-vplus .devsite-vplus-notes-control.goog-zippy-expanded .devsite-vplus-addendums-opened, devsite-vplus .devsite-vplus-transcript-control.goog-zippy-collapsed .devsite-vplus-addendums-closed, devsite-vplus .devsite-vplus-transcript-control.goog-zippy-expanded .devsite-vplus-addendums-opened {
    display: inline
    }
devsite-vplus .devsite-vplus-search-widget {
    background: var(--devsite-background-3);
    padding: 2px 4px;
    position: relative;
    width: 100%
    }
devsite-vplus .devsite-vplus-search-widget > div {
    width: 100%
    }
devsite-vplus .devsite-vplus-search-input {
    background-color: transparent;
    border-width: 0;
    font-size: 14px;
    width: 100%
    }
devsite-vplus .devsite-vplus-search-input:hover {
    box-shadow: 0 2px 4px #aaa
    }
devsite-vplus .devsite-vplus-search-autocomplete {
    position: relative;
    white-space: normal;
    width: 100%;
    z-index: 1
    }
devsite-vplus .devsite-vplus-search-autocomplete .ac-renderer {
    background: var(--devsite-background-1);
    border: 1px solid var(--devsite-secondary-text-color);
    box-shadow: 2px 2px 2px hsla(0, 0%, 40%, 0.4);
    font: normal 13px Arial, sans-serif;
    position: absolute;
    width: 100%
    }
devsite-vplus .devsite-vplus-search-autocomplete .ac-row {
    cursor: pointer;
    padding: 6px
    }
devsite-vplus .devsite-vplus-search-autocomplete .ac-highlighted {
    font-weight: 700
    }
devsite-vplus .devsite-vplus-search-autocomplete .ac-active {
    background-color: #bdc1c6
    }
devsite-vplus .devsite-vplus-addendums-control div.devsite-vplus-captions-language-selector-wrapper, devsite-vplus .devsite-vplus-addendums-control div.devsite-vplus-video-language-selector-wrapper {
    display: inline-block;
    height: auto;
    margin-right: 2px;
    padding: 0;
    vertical-align: bottom
    }
devsite-vplus .devsite-vplus-captions-language-selector-wrapper .material-icons, devsite-vplus .devsite-vplus-video-language-selector-wrapper .material-icons {
    vertical-align: middle
    }
devsite-vplus .devsite-vplus-captions-language-selector-wrapper:focus-within .material-icons, devsite-vplus .devsite-vplus-video-language-selector-wrapper:focus-within .material-icons {
    display: none
    }
devsite-vplus .devsite-vplus-captions-language-selector-wrapper select, devsite-vplus .devsite-vplus-video-language-selector-wrapper select {
    background-color: var(--devsite-background-5);
    min-width: 0;
    padding-right: 16px;
    width: 0
    }
devsite-vplus .devsite-vplus-captions-language-selector-wrapper select:focus, devsite-vplus .devsite-vplus-video-language-selector-wrapper select:focus {
    outline: 5px auto -webkit-focus-ring-color;
    padding-right: 27px;
    width: auto
    }
devsite-vplus .devsite-vplus-captions-language-selector-wrapper select.kd-select, devsite-vplus .devsite-vplus-video-language-selector-wrapper select.kd-select {
    border-color: transparent;
    font-size: small;
    height: auto;
    padding-bottom: 2px;
    padding-top: 2px;
    -moz-text-align-last: right;
    text-align-last: right
    }
devsite-vplus .devsite-vplus-addendums-opened .material-icons {
    width: 1em
    }
devsite-vplus .devsite-vplus-addendums-closed .material-icons {
    background-color: #bdc1c6;
    color: var(--devsite-inverted-text-color);
    width: 1em
    }
devsite-vplus .devsite-vplus-notes {
    border-top: 1 solid #000;
    height: 100px;
    margin: 0;
    overflow: auto;
    padding: 16px;
    position: relative;
    resize: vertical;
    width: 100%
    }
devsite-vplus .devsite-vplus-transcript-captions {
    border-top: 1 solid #000;
    height: 4.5em;
    margin: 0;
    overflow: auto;
    padding: 0;
    position: relative;
    resize: vertical;
    width: 100%
    }
devsite-vplus .devsite-vplus-transcript-captions table {
    border-collapse: separate;
    margin: 0
    }
devsite-vplus .devsite-vplus-transcript-caption {
    padding: 0.15em 1em;
    width: 100%
    }
devsite-vplus .devsite-vplus-transcript-slide-separator {
    font-weight: 700;
    font-style: italic
    }
devsite-vplus .devsite-vplus-transcript-slide-separator hr {
    padding: 1px 0
    }
devsite-vplus .devsite-vplus-transcript-caption:focus {
    outline-offset: -3px
    }
devsite-vplus .devsite-vplus-transcript-caption td {
    background-color: #fff;
    border-color: #fff;
    padding: 0 0.25em;
    text-shadow: 0 0 0 currentColor
    }
devsite-vplus .devsite-vplus-transcript-caption:hover td {
    text-shadow: 0.5px 0 0.1px #5f6368, -0.5px 0 0.1px #5f6368
    }
devsite-vplus .devsite-vplus-transcript-caption:hover .devsite-vplus-transcript-caption-bullet {
    visibility: visible
    }
devsite-vplus .devsite-vplus-transcript-caption.devsite-vplus-caption-highlighted td {
    background-color: #fff176
    }
devsite-vplus .devsite-vplus-transcript-caption .devsite-vplus-transcript-caption-bullet {
    padding: 0 0 0 4px;
    visibility: hidden
    }
devsite-vplus .devsite-vplus-transcript-caption-time {
    font-weight: lighter;
    min-width: 2.5em;
    text-align: right
    }
devsite-vplus .devsite-vplus-transcript-caption-text {
    width: 100%
    }
devsite-vplus .devsite-vplus-fullscreen-icon {
    color: #24508d;
    padding: 0;
    text-overflow: inherit;
    text-transform: none
    }
devsite-vplus .devsite-hidden {
    display: none
    }
devsite-youtube {
    aspect-ratio: 16/9;
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%
    }
devsite-youtube .devsite-video-placeholder img, devsite-youtube .devsite-video-placeholder span, devsite-youtube iframe {
    position: absolute
    }
devsite-youtube iframe {
    height: 101%;
    left: -0.5%;
    top: -0.5%;
    width: 101%
    }
devsite-youtube .devsite-video-placeholder span {
    color: var(--devsite-primary-text-color);
    padding: 8px
    }
devsite-youtube .devsite-basic-video-player {
    border: 0;
    height: 100%;
    position: absolute;
    width: 100%
    }
body[codelabs-content-type=paginated] google-codelab {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 64px 1fr 56px/256px 1fr;
    grid-template-areas: "title title" "drawer  main" "metadata  main"
    }
body[codelabs-content-type=paginated] google-codelab #main {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    grid-area: main;
    position: relative;
    background: #f8f9fa
    }
body[codelabs-content-type=paginated] google-codelab #codelab-title {
    background: #fff;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
    color: #3c4043;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    grid-area: title;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 64px;
    padding: 0 36px 0 16px;
    -webkit-font-smoothing: antialiased;
    z-index: 1000;
    max-width: 100vw
    }
body[codelabs-content-type=paginated] google-codelab #codelab-title h1 {
    font-size: 20px;
    font-weight: 400;
    margin: 0 8px;
    font-family: Roboto, Noto, sans-serif;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 0;
    display: inline-block
    }
body[codelabs-content-type=paginated] google-codelab #codelab-title h1 a {
    color: #3c4043;
    text-decoration: none
    }
body[codelabs-content-type=paginated] google-codelab #codelab-title h1 a:focus, body[codelabs-content-type=paginated] google-codelab #codelab-title h1 a:hover {
    color: #212121;
    text-decoration: underline
    }
body[codelabs-content-type=paginated] google-codelab #codelab-title .time-remaining {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap
    }
body[codelabs-content-type=paginated] google-codelab #codelab-title .time-remaining i {
    margin-right: 3px
    }
body[codelabs-content-type=paginated] google-codelab #codelab-nav-buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0
    }
body[codelabs-content-type=paginated] google-codelab #codelab-nav-buttons #arrow-back, body[codelabs-content-type=paginated] google-codelab #codelab-nav-buttons #menu {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    text-decoration: none;
    color: #3c4043;
    width: 40px;
    height: 40px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
    }
body[codelabs-content-type=paginated] google-codelab #controls {
    position: absolute;
    bottom: 32px;
    left: 0;
    right: 0;
    padding: 0 32px;
    z-index: 1001
    }
body[codelabs-content-type=paginated] google-codelab #fabs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1025px
    }
body[codelabs-content-type=paginated] google-codelab #done, body[codelabs-content-type=paginated] google-codelab #next-step, body[codelabs-content-type=paginated] google-codelab #previous-step {
    border-radius: 4px;
    font-family: Google Sans, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.6px;
    line-height: 24px;
    padding-bottom: 6px;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 6px;
    pointer-events: auto;
    text-transform: none;
    background: #fff;
    color: #1a73e8;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    -webkit-font-smoothing: antialiased
    }
body[codelabs-content-type=paginated] google-codelab #next-step {
    color: #fff;
    background: #1a73e8
    }
body[codelabs-content-type=paginated] google-codelab #done {
    background: #1e8e3e;
    color: #fff
    }
body[codelabs-content-type=paginated] google-codelab #fabs a[disappear] {
    -webkit-transform: scale(0);
    transform: scale(0)
    }
body[codelabs-content-type=paginated] google-codelab #done {
    background: #0f9d58
    }
body[codelabs-content-type=paginated] google-codelab #drawer .codelab-time-container {
    display: none
    }
body[codelabs-content-type=paginated] google-codelab .metadata {
    background: #f8f9fa;
    color: #777;
    font-size: 14px;
    grid-area: metadata;
    padding: 16px
    }
body[codelabs-content-type=paginated] google-codelab .metadata a {
    color: currentcolor;
    margin-left: 4px
    }
body[codelabs-content-type=paginated] google-codelab .metadata a:focus, body[codelabs-content-type=paginated] google-codelab .metadata a:hover {
    color: #212121
    }
@media (max-width: 768px) {
    body[codelabs-content-type=paginated] google-codelab {
        grid-template: 64px 1fr 56px/1fr;
        grid-template-areas: "title" "main" "metadata";
        padding-top: 0
        }
    body[codelabs-content-type=paginated] google-codelab #codelab-title {
        padding: 0 16px
        }
    body[codelabs-content-type=paginated] google-codelab #codelab-title .codelab-time-container {
        display: none
        }
    }
body[codelabs-content-type=paginated] google-codelab #drawer {
    width: 256px;
    grid-area: drawer;
    position: relative;
    z-index: 100;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: #f8f9fa;
    overflow: auto
    }
body[codelabs-content-type=paginated] google-codelab #drawer .steps {
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    overflow-x: visible;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
body[codelabs-content-type=paginated] google-codelab #drawer .steps:only-child {
    max-height: 100%
    }
body[codelabs-content-type=paginated] google-codelab #drawer ol {
    margin: 0;
    padding: 16px 12px;
    counter-reset: li-count;
    list-style: none;
    overflow-x: visible;
    overflow-y: auto;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
    }
body[codelabs-content-type=paginated] google-codelab #drawer ol li {
    display: block;
    counter-increment: li-count
    }
body[codelabs-content-type=paginated] google-codelab #drawer ol li a {
    text-decoration: none;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 14px;
    color: #80868b;
    padding: 3px 10px;
    min-height: 48px;
    font-weight: 400;
    line-height: 20px;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    position: relative;
    font-family: Roboto, Noto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    border: 1px solid #dadce0;
    border-radius: 5px;
    margin: 6px 0;
    background: #fff
    }
body[codelabs-content-type=paginated] google-codelab #drawer ol li a:active, body[codelabs-content-type=paginated] google-codelab #drawer ol li a:focus {
    background: #c6c6c6;
    -webkit-tap-highlight-color: transparent;
    outline: 0;
    border-color: #c6c6c6 !important
    }
body[codelabs-content-type=paginated] google-codelab #drawer ol li a .step {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
    }
body[codelabs-content-type=paginated] google-codelab #drawer ol li .step:before {
    content: counter(li-count);
    display: inline-block;
    font-style: normal;
    width: 26px;
    min-width: 26px;
    color: #fff;
    background: #80868b;
    border-radius: 50%;
    text-align: center;
    height: 26px;
    vertical-align: middle;
    line-height: 26px;
    margin-right: 8px;
    font-weight: 400;
    position: relative;
    z-index: 2;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out
    }
body[codelabs-content-type=paginated] google-codelab #drawer ol li a:focus, body[codelabs-content-type=paginated] google-codelab #drawer ol li[selected] a {
    color: #212121;
    font-weight: 600;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15)
    }
body[codelabs-content-type=paginated] google-codelab #drawer ol li[selected] a {
    border-color: #fff
    }
body[codelabs-content-type=paginated] google-codelab #drawer ol li[selected] .step:before {
    font-weight: 600
    }
body[codelabs-content-type=paginated] google-codelab #drawer ol li[completed] a {
    color: #212121
    }
body[codelabs-content-type=paginated] google-codelab #drawer ol li[completed] .step:before {
    background-color: #1a73e8;
    color: #fff
    }
body[codelabs-content-type=paginated] google-codelab #codelab-nav-buttons #menu {
    display: none
    }
body[codelabs-content-type=paginated] google-codelab #drawer ol ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px
    }
body[codelabs-content-type=paginated] google-codelab #drawer ol ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 1px hsla(0, 0%, 100%, 0.5)
    }
@media (max-width: 768px) {
    body[codelabs-content-type=paginated] google-codelab #codelab-nav-buttons #arrow-back {
        display: none
        }
    body[codelabs-content-type=paginated] google-codelab #codelab-nav-buttons #menu {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex
        }
    body[codelabs-content-type=paginated] google-codelab #drawer {
        grid-area: auto;
        width: 256px;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 10000;
        will-change: transform;
        box-shadow: 2px 2px 4px transparent;
        pointer-events: none;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        -webkit-transition: box-shadow 0.3s, -webkit-transform 0.3s ease-in-out;
        transition: box-shadow 0.3s, -webkit-transform 0.3s ease-in-out;
        transition: transform 0.3s ease-in-out, box-shadow 0.3s;
        transition: transform 0.3s ease-in-out, box-shadow 0.3s, -webkit-transform 0.3s ease-in-out
        }
    body[codelabs-content-type=paginated] google-codelab[drawer--open] #drawer {
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
        -webkit-transform: translatez(0);
        transform: translatez(0);
        pointer-events: all
        }
    body[codelabs-content-type=paginated] google-codelab #main:before {
        content: "";
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
        -webkit-transition: opacity 0.38s ease-in-out;
        transition: opacity 0.38s ease-in-out;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 10;
        pointer-events: none;
        opacity: 0
        }
    body[codelabs-content-type=paginated] google-codelab[drawer--open] #main:before {
        opacity: 1;
        pointer-events: all
        }
    body[codelabs-content-type=paginated] google-codelab #drawer .codelab-time-container {
        display: block;
        padding: 20px 10px 10px 23px
        }
    body[codelabs-content-type=paginated] google-codelab #drawer .time-remaining i {
        margin-right: 9px
        }
    }
body[codelabs-content-type=paginated] google-codelab #steps {
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
    }
body[codelabs-content-type=paginated] google-codelab google-codelab-step {
    display: none;
    width: 100%;
    -webkit-transform: translatez(0);
    transform: translatez(0);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 32px;
    overflow-y: auto;
    overflow-x: hidden
    }
body[codelabs-content-type=paginated] google-codelab google-codelab-step[animating], body[codelabs-content-type=paginated] google-codelab google-codelab-step[selected] {
    display: block;
    -webkit-transform-origin: 0 50% 0;
    transform-origin: 0 50% 0;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
    }
body[codelabs-content-type=paginated] google-codelab google-codelab-step[animating] {
    pointer-events: none;
    position: absolute;
    overflow: hidden
    }
@media (max-width: 768px) {
    body[codelabs-content-type=paginated] google-codelab google-codelab-step {
        padding-top: 8px
        }
    }
body[codelabs-content-type=paginated] google-codelab #drawer ol li {
    padding: 0;
    margin: 0
    }
body[codelabs-content-type=paginated] google-codelab {
    bottom: 0;
    left: 0;
    position: fixed;
    top: 0
    }
body[codelabs-content-type=paginated] google-codelab #codelab-title h1 {
    width: auto;
    color: #3c4043;
    top: 0
    }
body[codelabs-content-type=paginated] google-codelab .title {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-left: 10px;
    overflow: hidden
    }
body[codelabs-content-type=paginated] google-codelab .no-return-url {
    display: none !important
    }
body[codelabs-content-type=paginated] google-codelab #drawer .metadata .material-icons, body[codelabs-content-type=paginated] google-codelab-about .about-card .material-icons {
    top: 0 !important
    }
body[codelabs-content-type=paginated] body[template=codelab] devsite-footer-utility .devsite-footer-utility-button > a, body[codelabs-content-type=paginated] google-codelab .button-blue, body[codelabs-content-type=paginated] google-codelab .button-green, body[codelabs-content-type=paginated] google-codelab .button-primary, body[codelabs-content-type=paginated] google-codelab .button-red {
    color: #fff !important
    }
body[codelabs-content-type=paginated] google-codelab #codelab-title devsite-language-selector {
    margin: 0 16px
    }
body[codelabs-content-type=paginated] google-codelab #controls devsite-language-selector {
    background: var(--devsite-background-1);
    display: none
    }
@media screen and (max-width: 840px) {
    body[codelabs-content-type=paginated] google-codelab #codelab-title devsite-language-selector {
        margin: 0 8px
        }
    }
@media screen and (max-width: 600px) {
    body[codelabs-content-type=paginated] google-codelab #codelab-title devsite-language-selector {
        display: none
        }
    body[codelabs-content-type=paginated] google-codelab #controls devsite-language-selector {
        display: block
        }
    body[codelabs-content-type=paginated] google-codelab #main #controls {
        padding: 0 8px
        }
    body[codelabs-content-type=paginated] google-codelab #controls .spacer {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
        }
    }
body[codelabs-content-type=paginated] {
    color: #5c5c5c;
    font-family: var(--devsite-primary-font-family);
    overflow: hidden
    }
body[codelabs-content-type=paginated] google-codelab {
    opacity: 0
    }
body[codelabs-content-type=paginated] devsite-googler-buttons {
    bottom: 148px
    }
body[codelabs-content-type=paginated][ready] google-codelab {
    opacity: 1
    }
body[codelabs-content-type=paginated] .devsite-main-content {
    max-width: 100% !important;
    padding: 0 !important
    }
body[codelabs-content-type=paginated] a:focus {
    text-decoration: none
    }
body[codelabs-content-type=paginated] .devsite-badger-award {
    left: 256px
    }
body[codelabs-content-type=paginated] .devsite-back-to-top-link, body[codelabs-content-type=paginated] .devsite-banner, body[codelabs-content-type=paginated] .devsite-book-nav-bg, body[codelabs-content-type=paginated] .devsite-book-nav-bg[fixed], body[codelabs-content-type=paginated] .devsite-book-nav-blur, body[codelabs-content-type=paginated] .devsite-book-nav-toggle, body[codelabs-content-type=paginated] .devsite-footer, body[codelabs-content-type=paginated] .devsite-heading-link, body[codelabs-content-type=paginated] .devsite-page-bookmark-tooltip, body[codelabs-content-type=paginated] .devsite-page-title, body[codelabs-content-type=paginated] .devsite-sidebar, body[codelabs-content-type=paginated] devsite-book-nav, body[codelabs-content-type=paginated] devsite-bookmark, body[codelabs-content-type=paginated] devsite-header {
    display: none
    }
body[codelabs-content-type=paginated] devsite-code:after {
    display: none
    }
body[codelabs-content-type=paginated] devsite-user[signed-in][enable-profiles] {
    min-width: 44px
    }
body[codelabs-content-type=scrolling][type=codelab] .devsite-sidebar[fixed] .devsite-sidebar-content {
    -webkit-padding-start: 0;
    -moz-padding-start: 0;
    padding-inline-start: 0
    }
body[codelabs-content-type=scrolling][type=codelab] .devsite-sidebar[fixed] devsite-toc {
    -webkit-padding-end: 8px;
    -moz-padding-end: 8px;
    padding-inline-end: 8px
    }
body[codelabs-content-type=scrolling][type=codelab] devsite-toc .devsite-nav-show-all {
    margin: 0
    }
body[codelabs-content-type=scrolling][type=codelab] devsite-toc .devsite-nav-more-items {
    -webkit-margin-after: 0;
    margin-block-end: 0
    }
body[codelabs-content-type=scrolling][type=codelab] devsite-toc > .devsite-nav-list, body[codelabs-content-type=scrolling][type=codelab] devsite-toc[fixed] > .devsite-nav-list {
    border: 0;
    counter-reset: steps;
    padding: 0
    }
body[codelabs-content-type=scrolling][type=codelab] devsite-toc .devsite-nav-item {
    -webkit-margin-after: 8px;
    margin-block-end: 8px;
    -webkit-margin-start: 2px;
    -moz-margin-start: 2px;
    margin-inline-start: 2px
    }
body[codelabs-content-type=scrolling][type=codelab] .devsite-toc-toggle, body[codelabs-content-type=scrolling][type=codelab] devsite-toc .devsite-nav-item:last-child > a {
    padding: 12px 8px
    }
body[codelabs-content-type=scrolling][type=codelab] devsite-toc .devsite-nav-item > a {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--devsite-background-1);
    border-radius: 4px;
    color: var(--devsite-secondary-text-color);
    display: grid;
    font-family: var(--devsite-headline-font-family);
    font-size: 14px;
    grid-gap: 0 8px;
    grid-template-columns: 26px 1fr;
    padding: 12px 8px;
    border: var(--devsite-primary-border);
    box-shadow: none
    }
body[codelabs-content-type=scrolling][type=codelab] devsite-toc .devsite-nav-item[completed] > a {
    color: var(--devsite-primary-text-color)
    }
body[codelabs-content-type=scrolling][type=codelab] devsite-toc .devsite-nav-item > a:before {
    background: var(--devsite-tertiary-text-color);
    border-radius: 100%;
    color: var(--devsite-inverted-text-color);
    content: counter(steps);
    counter-increment: steps;
    height: 26px;
    line-height: 26px;
    text-align: center;
    width: 26px
    }
body[codelabs-content-type=scrolling][type=codelab] devsite-toc .devsite-nav-text {
    color: var(--devsite-primary-text-color)
    }
body[codelabs-content-type=scrolling][type=codelab] devsite-toc .devsite-nav-active.devsite-nav-title {
    border: 0;
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 1px 3px 1px var(--devsite-elevation-ambient-shadow-color)
    }
body[codelabs-content-type=scrolling][type=codelab] devsite-toc .devsite-nav-active.devsite-nav-title, body[codelabs-content-type=scrolling][type=codelab] devsite-toc .devsite-nav-active.devsite-nav-title:focus, body[codelabs-content-type=scrolling][type=codelab] devsite-toc .devsite-nav-active.devsite-nav-title:hover {
    color: var(--devsite-primary-text-color)
    }
body[codelabs-content-type=scrolling][type=codelab] devsite-toc .devsite-nav-active.devsite-nav-title:before, body[codelabs-content-type=scrolling][type=codelab] devsite-toc .devsite-nav-item[completed] > a:before {
    background: var(--devsite-link-color)
    }
body[codelabs-content-type=scrolling][type=codelab] .codelab-banner {
    background-color: var(--devsite-background-2);
    color: var(--devsite-button-color);
    font: 500 14px/36px var(--devsite-primary-font-family);
    line-height: 24px
    }
body[codelabs-content-type=scrolling][type=codelab] .codelab-banner .devsite-banner-message {
    padding: 16px 40px
    }
body[codelabs-content-type=scrolling] .devsite-banner :link, body[codelabs-content-type=scrolling] .devsite-banner :visited {
    text-decoration: underline
    }
body[codelabs-content-type=scrolling][type=codelab] .codelab-banner :link, body[codelabs-content-type=scrolling][type=codelab] .codelab-banner :visited {
    color: var(--devsite-button-color);
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap
    }
body[codelabs-content-type=scrolling][type=codelab] .codelab-banner .material-icons {
    color: var(--devsite-button-color);
    margin: 0;
    vertical-align: bottom
    }
body[codelabs-content-type=scrolling][type=codelab] .devsite-nav-item.devsite-toc-toggle {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-margin-after: 0;
    margin-block-end: 0
    }
body[codelabs-content-type=scrolling][type=codelab] .devsite-toc-toggle .devsite-nav-title {
    padding: 0
    }
body[codelabs-content-type=scrolling][type=codelab] devsite-toc:not(.devsite-toc-embedded) .devsite-toc-toggle:before {
    color: var(--devsite-secondary-text-color);
    content: "schedule";
    -webkit-margin-end: 8px;
    -moz-margin-end: 8px;
    margin-inline-end: 8px;
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal
    }
body[codelabs-content-type=scrolling][type=codelab] h3 > .devsite-heading > a[href*=github], body[codelabs-content-type=scrolling][type=codelab] h3 > .devsite-heading > a[href*=github]:visited {
    color: #000;
    text-decoration: none;
    padding-left: 24px;
    background-repeat: no-repeat;
    background-size: 18px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAflBMVEUAAACXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZbf2s+YAAAAKXRSTlMA+SAC7QrIBPXROWMX17rCSmusXEaAD9zNeXFWJqOLMx3mtJJAK5xP4Jw4LyAAAAT6SURBVGje1NbdcqJAEAXg0zJAQEFA0QhojJHE8/4vuBfrJlvQGHSGbO13CzVT09M/g//HIssPRZAYIUkxSVAc8myBSfnrMjVUmbRc+5jEsUqFN0lazeDYogo4SlC5jPq6EI4mxRpOhKuId4pWof228y0fsJ1bbp0lfFCS4XFNSgtpg8eEO6EV2YV4QBvRWtTiXl4udEByD3fxCzpS+LhDk9CZpMFosaFDJsZItdApqTHKnM7NMULOCeQW5534zDUnUuOmWDgRiXFDYzgZ02CQn3BCiY8BXsFJFd7YQjLPkeGDTPRsRhZVK+zIABxX+yfe6Wm/OgL4YIe0UIQRO8x1jm/yiHeI8s11RdP7FKJvx649PmUBRwoyfNqza6dUktzsNt7HliNsa+9m95UGXSl7XvQn2OV0qOpzO1tsNotZe66rw+lyXbb08bcX9qToyNgjYTcoS3PaxT4UflydzLJ7nFDYk3V+SdhzQZfnQTP89VW5jPDbmRTAWvDdnAq1zFnC2pLfHHnFn9uYK3yJ+HOhZoRPa2peYe2VmjX+KKjawNKGqgJXC6HqDEtnqmSB3yrqSlgqqau+UkAVwVLEKz1tZxxQw1LNATObSNvHOqUqCGEtDKhKAcAXqlo40Ag14g92D77BiTcO9pByqNbsDfeIcvCK3+HI++AlG2piOBJTY4AjNVs4s6XmiMwitSzSK0Nu0bQs2leOAzUzODOj5qDPYvHgTCj6TA703HLoog+oxGIgWgzHBMbigWnx1DSQyTcOqBDw34Sav9q1sx1HYSAKoNcYE4cl0AlhIB22rF3//4PTI43ULbrMYjzKy5zHROiGyNhlyqAXDC5z8Acc6mcFu3+OpeCD+Y87ONMRR1isik6qet+wah3gzMEwfIPXLIsB9sQp4UxJnL2pDFRwRBHrauoEZHDkaeoV5PSKKpNydMTSCk4oTawO8O07Nva9JN+8Z0skHNgk5l3bkf7hLUcjW+CceH2B1YqeeDmzTXU5sB/EE4rZmDucsA9ksBtvJuoQq4SaDE5sqc8n2+eaNyqBOTmHtcycG8xo3B4lrMgjmZ0GrwtYaQsLbUBmImZeojKuHRbyHjRmz5ZFQRUdByfGxCPEfPJW07gbVyVoiU9xIwYz97GVs1LD5oMmbPknvcKntLmXNNDvT2GBEV1WXXyadjA0Q64bIMygLsTo00aCsbmWfCbfDOEnt6QF8EzjlBi6BasVdscU5HYwbdz9LO65y9ae4tjKwTzDTJUZfxlPJjRLhoELfdPHgNrl9ZIFK6I5LhjyxOB75QdFsqAEVIKmCW+qcZ0B9xvOPft7eReaVnFPRPmj1lPvbcJdx6toUrkB46zpmyeAnFLViMGDZvSkKfo8Y3ikAORjB8RVqonIT4+hxJjW/qRRzezNvd1VoegKoG1uGOPRhBomaktfAok/PJ9a3PykQEk1xsQ0bqtg5Pk/+04qBtryotDlG4wpaJTvzS7Q3sCwDdbhgu1sw9yi7V/9XFSEb3MwbAbXYWn5H7zF3+5J2gZHNhuPX5frsaqaOvWpsAw+rC3FY6tg/cRMYU88zya4DzGbV7oL3npYQNWugmuFZSLtIlhHWOwcrA8OzrAgT3pdsD5J2PH2a4L3HuzdStvgMscq8j2hL/e5wcm7BLA2OuBbFebVKWBirYR/D6OWc16JizqEO0WUCrHzMMrbCZFGBf5j/QYa/td1VlNoIAAAAABJRU5ErkJggg==")
    }
body[codelabs-content-type=scrolling][type=codelab] .faq a[href*="cloud.google.com"] {
    padding-left: 22px;
    background-size: 20px;
    background-repeat: no-repeat;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAC9FBMVEX////u7u7v7+/ZRDf/zEH/zkPbRTlJifT/z0XYRDhRj/XWRDdPjvVOjfX/zkH/z0fXQzdGiPXUQzdMi/VKi/Xr6+3t7e1SkPXbRDdLjPW70fPaQjVOjPXx8PD9/f1nnff19fXRQzdHifVJhOxEh/Tu7/JLifH9y0DUQjVtofhOi/NKh+9HgelGf+b+7saaWXX/zDz+yTrZRzrRQjT7+/vxx8PeqkTsuj32uzrOQzdqn/j39/fr6Oj9yT/3vjvaQDPUPTBJivVKifPq7O/z0Mz968T4wj7zwD3NPTHGPDD0+P9Bifrv8/Xx8vJJhu5EfOPo3Nv/0Ez8y0rxvT3ZPjBDi/tBhPT55ePkysj+3Hr/0VLHVErcpkPcTUH7xD35wTzztznpsTjKRTjo8P3U4/z6+vr//PmQt/mBrff//fayy/ZUkfZjmfSXufP78/L18+//+Oj66Of+9eBCdt3t59f/89TvxcPsurXasKztqKL+4Y7jjIT0033ShH3hc2ngaV7/1F3/0ljjv1fbWU37xkDaoEDCSj/xujvptjvutjrxtjn8xDflrDb5vjXJQjX2tzP4+v+bwf3I3Pyiw/t0pvhel/VZlPW90fP/+/DV3/Cdu+/e4uv33Nk+btP+8Mz+8Mniwb7+7L3u371Vdrv+6bDusq3+56j+5aTx2Z+Gjpj+4pbolI3RjYehnIT+2XPedW370mbHaGDMZl3bY1jQVUvbU0f/00PYTkLKSj/tsjjwpjfeXjfnfjbEQjbXPjTSPS/w9vu50vs7hfr5+flypPf89vb89fTF1fHM2vBsnfB3ou/67+6swOpekert6uNdi+M5deLq4OA/dt83bt80a9xmjdby19VKc8jx5cf12cP/7r/gwr+pnr/v4b7xwLtffbf+6rHx3KnorKjYqKTXpqHXo57aop3ZkovTwIboh3+jX3f30XDgenCWUm3Kc2zIsGnMcGj4y1zgYFXgX1TfrEXWlz7mhjfsrTbkljbabDbcVTbsmTBDSJ02AAAFFklEQVRYw+2WV1jTUABGkyZpi6W0tKUWC0hBsAporbMWrCgqKA6WCooK7r333nvvvffee++99957b33x3uTetIEGnnzx83y89Tunf25SWuI/f4Oqk6cU4ijLkr9sfp5Ckyfk6h8o5JkH4umpVPr5+fnqdLro6GiZTBYkk3l71z5SNbdA8zyt8wLYhKefUunr66vV6WQsMDExF3/StLytka/0VPopfbUgoEWBoCBv76lNcj6AFnnQ+6MB0BcsKNA8x2M4iPbjAThQgVsAA545TWg8RQlc5MMBflrg8wHgg3NsIX6OAa10Lr6SDQgHgAXetSeJD5iqRTrytfAKdHwgiAu0EZ3QvEBhYLLAu6+LDoIOtCApKSnVUqoBDondyiahoTggazt9ej4hd94Wxbya4z5wskZoYVgA0/NXlGSlVr3iJpOpOMsbt36r4BphsACQHSezBfSP4zQQs8Zs3n7P3QmeDQ8OAwVwdkEt0ADhhI3jFCxms7lfu+yBthHhwcFhoaCgnXZC4obqPYbZPABqgHVpNj/yak1QABdRQatriwcIiXy312alrBRFqff175jFb9lrZecIVGgz09+NTurjbw/LNFmtUqnVw8PRM0AY6JowaHFN7iIKz2rvtCIjfbBPkvF992aapABKakzvKByQymxbO5e7iDb8BfjoA5uWsPv7kJxPSi4Oy7RpgA/+kl8KArdolUq1uDMshLXCA8jD6NXqpEQPAmDCszibTSFlccS4+DMGMCrVtvdzO0eEh59CPulfgsDYoQ/Rb4q1mbiCsX8zZ2AVrQLIV16uGRGMTxD6PIEkh2TBOPA4og09nSeYJoe+fND1SxdmSRCBgg+6PypE9o01mTRq6Bs+1yEQqcCHJK69cn62xDnA3YS6W4qD51kBA9LV6MX5aXKuIB90/wyJnztCQFMJKuif2zQANfANn9CnchlYzyWYF7OFV8ATgAPV624BAzQKCgTSSxIsDxIYOQR00m7kFgjpsQP6CgUlNWxFd7LDAEaOoPvoc74ESa1NsUBXK9QelLHfafTqclZmKwXvsjpJihyi/mkc9j3Su/P7BngxeMJHPXoru9vbCP4vYZ9aT/DMpxkAW7CsCCFZ3D5I5BowAPnp1wgnqRaGQ84kduEKemchwC5BJ1jX6Tt6Ey50SvBiMH1AgCvYA1i9BP8UkRtjsW8c3E5wjcstfCBxUQgW/APt9sBAfxIR/2ScBvnS5O6EgA4baL7w+hzpRELyhNSqZ1Jgf/0xQsgSuXPCQzxBSPwaG/YpawyRhRnrvBh0DvSGLkITn2A9M/Kljt5HiawsTGAwxVbohS7+JGPfOBgNEJDK3wg60d2EBTvM2KdWE27opPLCWPqEZP9W+BCLfIoa3JFwxyoLX4haVNFHSMUecQrsGx8RbmmZxgfoIV9KIeoDhg4d+jXTzPubCREWWmhOB0SV5hgxYkRGxpgxY36i+2cEgRixQLN1FpqnYJWkKklJScNLjxy5MyPjhwf0Kegn9yZEmZdAuxQqVwEkDR8+auTO77uhD3XKsbWOeKBZL4ugULlyuXJlyjQaNeqbFfhG6BuSwdeqOF0H0q6FBmyhUaNdu6FPQd/RHw4Qpxfj4heMatCwIZywh1JTLAYD+mkhSoeBLoGoqCENYGDXL943oB834iyhLdjHgfF79mHfsb0bkRvLBhZDjB49euzYsePH/96/vzyHeXN3Inc6zSuCqcRys1tJjm4xdYj//JP8AXE5S/JuAn7MAAAAAElFTkSuQmCC")
    }
body[codelabs-content-type=scrolling][type=codelab] .faq a[href*="stackoverflow.com"] {
    padding-left: 22px;
    background-size: 24px;
    background-repeat: no-repeat;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATwAAAE8CAMAAABq2/00AAAA4VBMVEUAAACCg4aCg4aCg4bIj0P1fx/2hh+ojHCojHCojHD2ih/UjCn0eiD0eiD2hB/2hR/RjjDUjCnKkkPUjCnUjCn2ih/UjCnCllPCllP2ih/CllPCllPCllP2ih/CllPCllPCllP2ih/2ih/CllPCllP2ih/2ih/CllPUjCnCllPUjCn0eiD0eiD2ih+ojHD0eiDUjCn0eiD0eiCojHDUjCn0eiDUjCn0eiDUjCnUjCn0eiCojHD0eiCojHD2ih+ojHD2ih+ojHCojHCdiXaViHuCg4aojHD0eiDCllPUjCn2ih8XYwy7AAAARXRSTlMAv0CAEEAQv4BA7++/gCBQQN8wIIDPv2Dfv5+PUDDPryCAcO+/r49wn4Bg79/frJ9QcGDPr6+Pj3DPz2AwIJ9wYOaPVDAbIL/gAAAGhElEQVR42uzbsYrCQBDG8WmyxaJJlcIixQmxMSIRgiBB7Bbm/R/oPAnH3e0SxwSvyf/3DLt8zDeMAAAAAAAAAAAAAAAAAAAAAAAAAAAA4F9k7Xm1Xwlek53WqyY87AVWfbHumvCTE5hkIZYJTFyIrQU2+xA5CmxWIULcWq1DTGBzCrFcMDluC4ENcTtDEyKdwKYLkYuAuH27ggFtuj7ETgLiNo0B7Z3c1YnNMUQaWbTC6/W1uKUPHbha7wr60GnP7ot3YpGHWCsL5Wod1JP70LMsU+H12424nfDsBj4XgzMD2kN20F82YtDSh965nf61JW7Nzy7iKwY067OLlfJcw/qx1KQPQ9zSh1aaVtGHGnxoUummrB97WZhSk3byRM/6UST3mpQRtwZbTTo4GXdhQLvbaNJVxnX0oSMftyBuDQpN8o4BzaDWpFrG5KwfH5zXpJuMCfShox83pw812GnSxrx+XPI5hjvowF7ttawfB5km+Yq4nf5xS84x5lR7nGPMqfaI2znVHgPajGqPc4w51R7nGJ/sm29P2zAQh49h1kJgJHGWlrbQItAIebNO67owadpgwOzv/4Wm8S8NLsXxGSTu/HyEk/O78+McRu0FH4pQe2EdA6P2wjoGRu2FdotQe2EdA6P2wjoGRu2FdotQe+GChlF7DNcxKulN7bFbx4h1lPlSe+x8aKK1Tqae1B6zdYxM35BLP2qP1TqGjPQdmfCi9ji125l+ICp9qD1G6xixXiSPPag9PusYiW5SCLza49JuK/2YKEOrPSYXNBFpkyTGqj0e6xiFXkoukWqPwzpGrJ8iEyi1x8GHnuknSUqU2qO/jlHpVeQpwhB8oL6OISK9mkK4qz3q7bbQzxFV7mqP9jpGqi1IYme1R3sdI060BTPpaAiot9ss0hZkwk3tUb+gyUJbkEzd1B55HxqfaQvy1Ent0V/HKCNtwVy0NwSfGPhQMdcWRJWD2uOwjiFzbcFZ3F7tsVjHmDqMLTZqj3S7bTm2RJloZwh2maxjyJnd2NJS7XFZx7AcW2QrtUe93dZUDmOLjdrbaTTa7e9fNgj1i7ZjS9lK7dU+dPvzzgaRZ8elpPZji73a2/j749vOLuWytRtbCmmv9jghLMcWuw936zfwwnZssTAEexw+VidTmstn1N4Wr2/2gcrBlO6HY3eHKNqPLYfh2FmPLeZ/aXvh2D1Q2o0tYkHt8ZxQliIybTm2NNXex30IWI8tcePDPYSAywPv+61w7NwfeHfJHrvJS44tSQmUGan+oCfAgTi3fOCly1D952A4eqkH3gTocqDuOT5NX2JsmQJZhFrkaHwy8fzAmwNdeuoRRgQiTakEugyUSR2B+LFlDoTpK4M6AvH/pUUC6JIqAyMCMQ+8pMe8E2XgGIFlxKxbAIyVgUUEWj/wUh6QAZQBIgJlzqlbQKwMUBE4Tdh0C4ChMsBFoMgiJt2ivpvVoCNQznh0CxDKAB2B9dgSA2l6ygAbgfUDbwG0GSgDPxEo5tS7xYq7GT4CU8Im6pbRsNkxMBFIex5ezqQ3qM8fPgL5kZ6Mj1QNLgKpR90y4tNjpbxFID+ExwjsAUN8ReAYmOIjAlmePF8RyLHv+orAPgScI3AIb531tQZ/XjECR3DL5VoTeDOsXTVYf8UIFHDLu6sm8GZAFA8ZgccQimcgLCPwNBRvOROLCExD8Z4mXR2BRxCK5+wCx6F47hHYC8Vzj8BJKJ5zBPYhFM85Agf0i3dx3ulcdLubm5e+I3BEv3id65r7Ov70EoGCV/EW+NrpdLu/cHWkX7zz65pn6hiK9689O8hJKIaiMCxK0nYzTBgSYxDs/pekiTohEq/v0eRKv28J/+zkXMbrF2IdxQvEC3ScOF7r6+3LrtZDa1vxVinfHaeId+qjTBCv9kGO4i1XJoi365/EWxCv9EF24i1XJ4jXv4iXKd7p/uNt+yjt/uO1PspZvOVmmGcPrZ1q3ZUi3qoDaNva4WYdj5PFu2nHMm+8nzqKF4y3vuOreL923PcrqngRz6291FrKXrxbdWzifXB6iydehHh5iDco3maQpxnivQ2yEU888cQLEi8R8cSLES8R8cSLES8R8cSLES8R8cSLES8R8QbFexzkPEO86xxA4on3F+LlIZ54QeLlIZ54QeLlIZ54QeLlId6qeOk8/BviiRciXibiiRciXibiiRciXibiiRciXibiiQcAAAAAAAAAAAAAAAAAwHTeAe21evvWi2VXAAAAAElFTkSuQmCC")
    }
body[codelabs-content-type=scrolling][type=codelab] .faq a[href*="support.google.com/webmasters/"] {
    padding-left: 24px;
    background-size: 24px;
    background-repeat: no-repeat;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAolBMVEUAAADW1tbW1tZ6enrQ0dJ6enrMzMzq6+zq6+x6enru7+/m5+ju7+/m5+j////S09REi/XW1tbm5+ju7+9PT0/Q0dK8vLxGjfVZWVlNTU16enrMzMzIyMj09PS/0uuSkpJpaWmbm5tim/e0tLSEhIStx+3e3+GsrKxwcHBZk/dPk/R1p/KPtu/U3eqmpqZlZWVfmO5woeqHreWvwN6nu9qLi4vZSE73AAAADnRSTlMAEcxmzO7MzDMz7u6IiHn/rpYAAALMSURBVHja7dXpjtowFIZhUkqZlSV1ncQdEsK+zD7T+7+1xjTiwxVOAmeORyP5+2UspPchEtDy8/Pz8/Pz8/M7cZeduHKdyxbL0FfVAMUraHdUHUB12i22tZWqBRSDgKFfC4CApV8PgIClXw/gE6hyTd/lAR7gAV8fEHwbWtc/ul/WfQ8IfQKAIECfCoCA3sdq+nQB+nQABIQ+CQABtY9Z+lQB+gwACBj6AFAE6DM9AL0fAalPB/yGgNAfntwHAAJKnwCAwNLneQAAVAvM/ttzVLlB4z2/A6AFVoDRf43IfewVgGKNAG/Uvrl39BsCXqh9cy8nA/51tmk63+jDZp6m9wTA4DzANiyW6lOqTxAMHAD22XASReuwpKDvELCNookBGJwx9E8B3OvsQp8e9GmOviNANA/Dh4k+TApBukHfFSBa7/I7whqf3xWA/gOAoU8DDJwBCHk+wIAw9CsAPw/W++CFB/MAD/hCgL59PXPS8toRYKHEndkTauEQIIUQ0hToG2eAXOicKdBXmSPAo9CTpkDo5U4Ad6IEGILy0gFgFJctCACIh/yATABwIChvVyE3IBR7AAQAiOmIGZADAMEBQMkRL+AJAAgOALGUI07AQgBgCPb3uRbwAaYAGAIAZlIL2AA5AIYAgJXUAjaAAsAQADCWO4EjAAQGQAvYAUsDsDQAeuwAMZvu89PZ/jZhBmQCi2dl60+MPiMAf8UgZEUpK/LoJ4oX0C9LIIyF0U8yXkBPVCzRWzIDZjX9sWQG9Kv7ScYN6KnKfizZAf2qfpLzA3p5RV9JboDeytp/kk4Ao5WtP+UFQKCO9sdTSQQ03+OR/kxKdgAWZv/11VI6AWBmP5HSNQD5zwQknwxIqIBu468hBgDqNYCuFXBDASSNAbdWQHB1PiBpDLgOWtZdXPEDri/QswjYAOjbF9x0OQHd26Dl5+fn5+fn5+dn7i/3LEaKJNV/0wAAAABJRU5ErkJggg==")
    }
body[codelabs-content-type=scrolling][type=codelab] .faq a[href*="developer.android.com"], body[codelabs-content-type=scrolling][type=codelab] .faq a[href*=android-developer] {
    padding-left: 20px;
    background-repeat: no-repeat;
    background-size: 20px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAq1BMVEX///+lyjmfxyGhyCqkyjakyTP+/vuiyS7z+OWlyjKgxyTX57ChyCfa6bTx9uLy9+Sz0l6szk/D24Tt9NrN4ZnK4JSiyCyexh34+/D6/PTp8dPh7cjf7L7k78vc6rnW5qzU5ajS5KPP4p+21GWnzD3F3Yi813Kx0ViqzUWexhr8/vjv9d7Z6LKy0lyZxADh7cLA2n2rzkr1+erJ35C61m6uz1KcxRHn8M6/2XgEePWtAAACr0lEQVRo3u3Z2XKiQBiG4Y9ebNO2aCCyzOC+7zH7/V/ZRJZQZaJpWnKS4TlJUItXbX4pFJXK71DTusvccI6z5oMSAutdhDP2uzpK4CxwxsRBGYJdA19qLAOU4s4LkyUN7G4Ude2glmzuRihHKDqAPZhNuJRKSckms37rvctrKMnG728l5cxKMU7JuCF7KEvf87h1gnu0iXK4B2p9Sc3dUgZNMusMLvu42r20LiBXT8JMWRepN1xlGu+fK8/6xFPxwsvH697/eP/j7uDTOvB+dxwX/AaM2SQ+6icrYHDyGmgfWE3irNeCqTaPAwcArydroboAbuMAb8NQRNJn20SYtHK8HaKZzoffhZl5tlNxsD5PsnUQ2b9jwwnO35WvRo3lN/o2TDwKS5M3gokF0w2wZxgIlpY2FpgsgdQPkLXJQar0A/LVIDB6Idp2GxQQrJI/rbq2Voijlc5S9LZs8uYCqBVyXLTZhLW/fSn3hDMmZAQ05I020gT2PmeM+w4uGpLksFs+oEEtbaqJVnpUkz4uyebf6xQK0CY6XjoSC1xQ9/PPr4KB52zuvTrOa5EssC0auM0C0tYKtI0DqgpUgSpQBapAFfifAj90Tn5YZoGnooH8eutB56KDDosGhlTrYiTyk0epVdFAKJLn9rLHRSNfcE4tF0UDcAXlXPhDfGPtjGejEMUDCEdPY8eFHoOADvPAxiDQLBBQkUHAJfoB34UBS/9CfAETe6lZYKZft/QIFe94vicRy7tcvKOkB0PhYOo4zlNWYNvjpjOdZwU+O24OQlynK62EGCF2J9IbpIsy/P0I3CHW+Qj8qQJVoAr8VOCx3EB+YvDSwIDmXzaW4oZZseU6Lfr5aaAUPT8uyPuT33VeIpRkI5RHyRQfHEKFUj2UJuh1GjaQsxudKECl8jv8A6GtQkKSkMLrAAAAAElFTkSuQmCC")
    }
@media screen and (max-width: 840px) {
    body[codelabs-content-type=paginated] .devsite-badger-award {
        left: 0
        }
    body[codelabs-content-type=scrolling][type=codelab] .codelab-banner .devsite-banner-message {
        padding: 16px 24px
        }
    }
body[codelabs-content-type=paginated] google-codelab-about .codelab-title {
    width: 100%;
    text-align: center;
    font-size: 32px;
    margin: 20px auto 30px auto;
    line-height: 45px;
    max-width: 700px
    }
body[codelabs-content-type=paginated] google-codelab-about .codelab-title .token {
    display: inline-block;
    margin: 0 5px
    }
body[codelabs-content-type=paginated] google-codelab-about .about-card {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    border: 1px solid #dadce0;
    border-radius: 5px;
    background: #fff;
    max-width: 800px;
    margin: 0 auto 30px auto;
    padding: 20px
    }
body[codelabs-content-type=paginated] google-codelab-about .about-card h2 {
    font-weight: 500;
    font-weight: 400 !important;
    line-height: 1em !important;
    margin: 0 !important;
    font-size: 28px
    }
body[codelabs-content-type=paginated] google-codelab-about .about-card > :not(:first-child) {
    padding-top: 30px
    }
body[codelabs-content-type=paginated] google-codelab-about .about-card .material-icons {
    margin-right: 10px;
    top: 6px;
    position: relative
    }
body[codelabs-content-type=scrolling][ready] google-codelab-about {
    border-radius: 4px;
    border: var(--devsite-primary-border);
    border-left: solid 4px var(--google-codelab-about-active-border-color);
    display: block;
    margin-top: 32px;
    padding: 32px
    }
body[codelabs-content-type=scrolling] google-codelab-about .caption {
    color: var(--devsite-primary-text-color);
    font: 400 12px/16px var(--devsite-primary-font-family);
    letter-spacing: 0.3px;
    margin: 0 0 24px;
    text-transform: uppercase
    }
body[codelabs-content-type=scrolling] google-codelab-about .about {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
body[codelabs-content-type=scrolling] google-codelab-about .about-item {
    -webkit-border-end: solid 1px var(--devsite-background-5);
    -moz-border-end: solid 1px var(--devsite-background-5);
    border-inline-end: solid 1px var(--devsite-background-5);
    -webkit-padding-end: 16px;
    -moz-padding-end: 16px;
    padding-inline-end: 16px;
    -webkit-padding-start: 16px;
    -moz-padding-start: 16px;
    padding-inline-start: 16px
    }
body[codelabs-content-type=scrolling] google-codelab-about .about-item:first-child {
    -webkit-padding-start: 0;
    -moz-padding-start: 0;
    padding-inline-start: 0
    }
body[codelabs-content-type=scrolling] google-codelab-about .about-item:last-child {
    -webkit-border-end: 0;
    -moz-border-end: 0;
    border-inline-end: 0;
    -webkit-padding-end: 0;
    -moz-padding-end: 0;
    padding-inline-end: 0
    }
body[codelabs-content-type=scrolling] google-codelab-about .authors, body[codelabs-content-type=scrolling] google-codelab-about .duration, body[codelabs-content-type=scrolling] google-codelab-about .last-updated {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font: 14px/20px var(--devsite-primary-font-family)
    }
body[codelabs-content-type=scrolling] google-codelab-about .material-icons {
    color: var(--devsite-secondary-text-color);
    -webkit-margin-end: 8px;
    -moz-margin-end: 8px;
    margin-inline-end: 8px
    }
@media screen and (max-width: 840px) {
    body[codelabs-content-type=scrolling] google-codelab-about .about {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16px;
        padding: 0
        }
    body[codelabs-content-type=scrolling] google-codelab-about .about-item {
        border: 0;
        padding: 0
        }
    }
body[codelabs-content-type=paginated] google-codelab-step {
    line-height: 24px;
    display: block
    }
body[codelabs-content-type=paginated] google-codelab-step:focus {
    outline: none
    }
body[codelabs-content-type=paginated] google-codelab-step code, body[codelabs-content-type=paginated] google-codelab-step pre {
    font-family: Source Code Pro, Helvetica, Arial;
    font-size: inherit;
    border-radius: 4px;
    overflow-x: auto;
    overflow-y: visible
    }
body[codelabs-content-type=paginated] google-codelab-step code {
    background-color: #e8eaed;
    padding: 0.1em 0.3em
    }
body[codelabs-content-type=paginated] google-codelab-step pre {
    display: block;
    color: #fff;
    background-color: #28323f;
    padding: 14px;
    -webkit-text-size-adjust: none;
    line-height: 1.4
    }
body[codelabs-content-type=paginated] google-codelab-step pre > code {
    padding: 0;
    background-color: transparent
    }
body[codelabs-content-type=paginated] google-codelab-step code em {
    color: #97c8f2
    }
body[codelabs-content-type=paginated] google-codelab-step code .str, body[codelabs-content-type=paginated] google-codelab-step pre .str {
    color: #34a853
    }
body[codelabs-content-type=paginated] google-codelab-step code .kwd, body[codelabs-content-type=paginated] google-codelab-step pre .kwd {
    color: #f538a0
    }
body[codelabs-content-type=paginated] google-codelab-step code .com, body[codelabs-content-type=paginated] google-codelab-step pre .com {
    color: #bdc1c6
    }
body[codelabs-content-type=paginated] google-codelab-step code .typ, body[codelabs-content-type=paginated] google-codelab-step pre .typ {
    color: #24c1e0
    }
body[codelabs-content-type=paginated] google-codelab-step code .lit, body[codelabs-content-type=paginated] google-codelab-step pre .lit {
    color: #4285f4
    }
body[codelabs-content-type=paginated] google-codelab-step code .pun, body[codelabs-content-type=paginated] google-codelab-step pre .pun {
    color: #f8f9fa
    }
body[codelabs-content-type=paginated] google-codelab-step code .pln, body[codelabs-content-type=paginated] google-codelab-step pre .pln {
    color: #f8f9fa
    }
body[codelabs-content-type=paginated] google-codelab-step code .tag, body[codelabs-content-type=paginated] google-codelab-step pre .tag {
    color: #24c1e0
    }
body[codelabs-content-type=paginated] google-codelab-step code .atn, body[codelabs-content-type=paginated] google-codelab-step pre .atn {
    color: #eda912
    }
body[codelabs-content-type=paginated] google-codelab-step code .atv, body[codelabs-content-type=paginated] google-codelab-step pre .atv {
    color: #34a853
    }
body[codelabs-content-type=paginated] google-codelab-step code .dec, body[codelabs-content-type=paginated] google-codelab-step pre .dec {
    color: #5195ea
    }
body[codelabs-content-type=paginated] google-codelab-step paper-button {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 5.14em;
    margin: 0 0.29em;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
    font: inherit;
    text-transform: uppercase;
    outline-width: 0;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    z-index: 0;
    padding: 0.7em 0.57em;
    font-family: Roboto, Noto, sans-serif;
    -webkit-font-smoothing: antialiased;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2)
    }
body[codelabs-content-type=paginated] google-codelab-step h2.step-title {
    font-family: Google Sans, Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    line-height: 1em !important;
    margin: 0 0 30px !important
    }
body[codelabs-content-type=paginated] google-codelab-step .step-title a {
    color: #3c4043;
    text-decoration: none
    }
body[codelabs-content-type=paginated] google-codelab-step .step-title a:focus, body[codelabs-content-type=paginated] google-codelab-step .step-title a:hover {
    color: #212121;
    text-decoration: underline
    }
body[codelabs-content-type=paginated] google-codelab:not([theme=minimal]) google-codelab-step .instructions {
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
    background: #fff;
    max-width: 800px;
    font-size: 14px;
    margin: 0 auto;
    margin-bottom: 90px;
    border-radius: 4px
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions .inner {
    padding: 24px
    }
body[codelabs-content-type=paginated] google-codelab[theme=minimal] google-codelab-step .instructions .inner {
    padding: 0 24px
    }
@media (max-width: 800px) {
    body[codelabs-content-type=paginated] google-codelab .instructions {
        margin: 0 0 16px 0
        }
    }
body[codelabs-content-type=paginated] google-codelab:not([theme=minimal]) google-codelab-step .instructions :not(.step-title) > a, body[codelabs-content-type=paginated] google-codelab:not([theme=minimal]) google-codelab-step .instructions :not(.step-title) > a:visited {
    color: #1a73e8
    }
body[codelabs-content-type=paginated] google-codelab:not([theme=minimal]) google-codelab-step .instructions h2, body[codelabs-content-type=paginated] google-codelab:not([theme=minimal]) google-codelab-step .instructions h3, body[codelabs-content-type=paginated] google-codelab:not([theme=minimal]) google-codelab-step .instructions h4 {
    font-weight: 400;
    margin: 0
    }
body[codelabs-content-type=paginated] google-codelab:not([theme=minimal]) google-codelab-step .instructions h2 {
    font-weight: 300;
    line-height: 1em;
    font-size: 22px
    }
body[codelabs-content-type=paginated] google-codelab:not([theme=minimal]) google-codelab-step .instructions {
    line-height: 24px
    }
body[codelabs-content-type=paginated] google-codelab:not([theme=minimal]) google-codelab-step .instructions li {
    margin: 0.5em 0
    }
body[codelabs-content-type=paginated] google-codelab:not([theme=minimal]) google-codelab-step .instructions h2 {
    font-weight: 500;
    margin: 20px 0 0 0;
    font-size: 20px
    }
body[codelabs-content-type=paginated] google-codelab:not([theme=minimal]) google-codelab-step .instructions h3 {
    font-size: 16px;
    font-weight: 500;
    margin: 20px 0 0 0
    }
body[codelabs-content-type=paginated] google-codelab:not([theme=minimal]) google-codelab-step .instructions aside {
    padding: 0.5em 1em;
    margin: 2em 0;
    border-left: 4px solid;
    border-radius: 4px
    }
body[codelabs-content-type=paginated] google-codelab:not([theme=minimal]) google-codelab-step .instructions aside p {
    margin: 0.5em 0
    }
body[codelabs-content-type=paginated] google-codelab:not([theme=minimal]) google-codelab-step .instructions aside.note, body[codelabs-content-type=paginated] google-codelab:not([theme=minimal]) google-codelab-step .instructions aside.notice {
    border-color: #ea8600;
    background: #fef7e0;
    color: #212124
    }
body[codelabs-content-type=paginated] google-codelab:not([theme=minimal]) google-codelab-step .instructions aside.special, body[codelabs-content-type=paginated] google-codelab:not([theme=minimal]) google-codelab-step .instructions aside.tip {
    border-color: #137333;
    background: #e6f4ea;
    color: #212124
    }
body[codelabs-content-type=paginated] google-codelab:not([theme=minimal]) google-codelab-step .instructions aside.warning {
    border-color: #ea8600;
    background: #fef7e0;
    color: #212124
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions aside.callout {
    background-color: #e8f0fe;
    margin: 20px 0;
    padding: 15px;
    border-left: 3px solid #185abc;
    border-radius: 4px;
    color: #212124;
    font-size: 14px;
    line-height: 1.5
    }
body[codelabs-content-type=paginated] google-codelab-step aside.callout b {
    color: #185abc
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions ul.checklist {
    list-style: none;
    padding: 0 0 0 1em
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions ul.checklist li {
    padding-left: 24px;
    background-size: 20px;
    background-repeat: no-repeat;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAWlBMVEUAAAAxokwwoks1pFAxokwxokwxokwxokwxokwnnkQnnkQnnkRou3y84cTS69cxokwonkQxokwnnkRqvH1VsmtluXlVsmsnnkRdtnLw+PIxokwqn0YinEAfmj3goh/UAAAAGnRSTlMA2CcEo+6AQT7+2IOBJxPl27alhoBnX15SCCe258UAAAB+SURBVEjH7dA5EoAgEERR3BcQ923Q+1/T0SqKlNbMouP3gxkRFvZpyQb64VSQT4mOcYc8mU5DnqIG8zXoozj4d34tML+YrET8XBFx4e2F4oAL4N7J3EUB/EfSUwD/zG3hvFdROu9XtL31vgXguQA9F6DnAvM8WbOHpkXYD3cBBCcPjtASYjwAAAAASUVORK5CYII=")
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions h2 code, body[codelabs-content-type=paginated] google-codelab-step .instructions table code {
    background: #fff
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions .indented {
    margin-left: 40px
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions strong {
    font-weight: 600
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions :link paper-button {
    text-decoration: none !important
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions paper-button {
    display: inline-block;
    border-radius: 4px;
    color: #fff;
    font-family: Google Sans, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.6px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 16px;
    padding-top: 6px;
    text-transform: none
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions paper-button a {
    text-decoration: none;
    color: inherit !important
    }
body[codelabs-content-type=paginated] google-codelab-step a paper-button {
    display: inline-block
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions paper-button.colored {
    background-color: #1e8e3e
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions paper-button.red {
    background-color: #d93025
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions iron-icon {
    vertical-align: sub;
    margin-right: 7px;
    margin-left: 3px;
    font-size: 16px;
    top: -1px;
    position: relative
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions img {
    max-width: 100%;
    vertical-align: bottom
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions .image-container {
    text-align: center
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions table {
    border-spacing: 0
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions td {
    vertical-align: top;
    border-bottom: 1px solid #ccc;
    padding: 8px
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions table p {
    margin: 0
    }
body[codelabs-content-type=paginated] google-codelab:not([theme=minimal]) .instructions h3.faq {
    border-bottom: 1px solid #ddd
    }
body[codelabs-content-type=paginated] google-codelab:not([theme=minimal]) .instructions ul.faq {
    list-style: none;
    padding-left: 1em
    }
body[codelabs-content-type=paginated] google-codelab:not([theme=minimal]) .instructions .faq li {
    font-size: 1.1em;
    margin-bottom: 0.8em
    }
body[codelabs-content-type=paginated] google-codelab:not([theme=minimal]) .instructions .faq a {
    color: inherit;
    text-decoration: none
    }
body[codelabs-content-type=paginated] google-codelab:not([theme=minimal]) .instructions .faq a:hover {
    text-decoration: underline
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions .faq a[href*="cloud.google.com"] {
    padding-left: 22px;
    background-size: 20px;
    background-repeat: no-repeat;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAC9FBMVEX////u7u7v7+/ZRDf/zEH/zkPbRTlJifT/z0XYRDhRj/XWRDdPjvVOjfX/zkH/z0fXQzdGiPXUQzdMi/VKi/Xr6+3t7e1SkPXbRDdLjPW70fPaQjVOjPXx8PD9/f1nnff19fXRQzdHifVJhOxEh/Tu7/JLifH9y0DUQjVtofhOi/NKh+9HgelGf+b+7saaWXX/zDz+yTrZRzrRQjT7+/vxx8PeqkTsuj32uzrOQzdqn/j39/fr6Oj9yT/3vjvaQDPUPTBJivVKifPq7O/z0Mz968T4wj7zwD3NPTHGPDD0+P9Bifrv8/Xx8vJJhu5EfOPo3Nv/0Ez8y0rxvT3ZPjBDi/tBhPT55ePkysj+3Hr/0VLHVErcpkPcTUH7xD35wTzztznpsTjKRTjo8P3U4/z6+vr//PmQt/mBrff//fayy/ZUkfZjmfSXufP78/L18+//+Oj66Of+9eBCdt3t59f/89TvxcPsurXasKztqKL+4Y7jjIT0033ShH3hc2ngaV7/1F3/0ljjv1fbWU37xkDaoEDCSj/xujvptjvutjrxtjn8xDflrDb5vjXJQjX2tzP4+v+bwf3I3Pyiw/t0pvhel/VZlPW90fP/+/DV3/Cdu+/e4uv33Nk+btP+8Mz+8Mniwb7+7L3u371Vdrv+6bDusq3+56j+5aTx2Z+Gjpj+4pbolI3RjYehnIT+2XPedW370mbHaGDMZl3bY1jQVUvbU0f/00PYTkLKSj/tsjjwpjfeXjfnfjbEQjbXPjTSPS/w9vu50vs7hfr5+flypPf89vb89fTF1fHM2vBsnfB3ou/67+6swOpekert6uNdi+M5deLq4OA/dt83bt80a9xmjdby19VKc8jx5cf12cP/7r/gwr+pnr/v4b7xwLtffbf+6rHx3KnorKjYqKTXpqHXo57aop3ZkovTwIboh3+jX3f30XDgenCWUm3Kc2zIsGnMcGj4y1zgYFXgX1TfrEXWlz7mhjfsrTbkljbabDbcVTbsmTBDSJ02AAAFFklEQVRYw+2WV1jTUABGkyZpi6W0tKUWC0hBsAporbMWrCgqKA6WCooK7r333nvvvffee++99957b33x3uTetIEGnnzx83y89Tunf25SWuI/f4Oqk6cU4ijLkr9sfp5Ckyfk6h8o5JkH4umpVPr5+fnqdLro6GiZTBYkk3l71z5SNbdA8zyt8wLYhKefUunr66vV6WQsMDExF3/StLytka/0VPopfbUgoEWBoCBv76lNcj6AFnnQ+6MB0BcsKNA8x2M4iPbjAThQgVsAA545TWg8RQlc5MMBflrg8wHgg3NsIX6OAa10Lr6SDQgHgAXetSeJD5iqRTrytfAKdHwgiAu0EZ3QvEBhYLLAu6+LDoIOtCApKSnVUqoBDondyiahoTggazt9ej4hd94Wxbya4z5wskZoYVgA0/NXlGSlVr3iJpOpOMsbt36r4BphsACQHSezBfSP4zQQs8Zs3n7P3QmeDQ8OAwVwdkEt0ADhhI3jFCxms7lfu+yBthHhwcFhoaCgnXZC4obqPYbZPABqgHVpNj/yak1QABdRQatriwcIiXy312alrBRFqff175jFb9lrZecIVGgz09+NTurjbw/LNFmtUqnVw8PRM0AY6JowaHFN7iIKz2rvtCIjfbBPkvF992aapABKakzvKByQymxbO5e7iDb8BfjoA5uWsPv7kJxPSi4Oy7RpgA/+kl8KArdolUq1uDMshLXCA8jD6NXqpEQPAmDCszibTSFlccS4+DMGMCrVtvdzO0eEh59CPulfgsDYoQ/Rb4q1mbiCsX8zZ2AVrQLIV16uGRGMTxD6PIEkh2TBOPA4og09nSeYJoe+fND1SxdmSRCBgg+6PypE9o01mTRq6Bs+1yEQqcCHJK69cn62xDnA3YS6W4qD51kBA9LV6MX5aXKuIB90/wyJnztCQFMJKuif2zQANfANn9CnchlYzyWYF7OFV8ATgAPV624BAzQKCgTSSxIsDxIYOQR00m7kFgjpsQP6CgUlNWxFd7LDAEaOoPvoc74ESa1NsUBXK9QelLHfafTqclZmKwXvsjpJihyi/mkc9j3Su/P7BngxeMJHPXoru9vbCP4vYZ9aT/DMpxkAW7CsCCFZ3D5I5BowAPnp1wgnqRaGQ84kduEKemchwC5BJ1jX6Tt6Ey50SvBiMH1AgCvYA1i9BP8UkRtjsW8c3E5wjcstfCBxUQgW/APt9sBAfxIR/2ScBvnS5O6EgA4baL7w+hzpRELyhNSqZ1Jgf/0xQsgSuXPCQzxBSPwaG/YpawyRhRnrvBh0DvSGLkITn2A9M/Kljt5HiawsTGAwxVbohS7+JGPfOBgNEJDK3wg60d2EBTvM2KdWE27opPLCWPqEZP9W+BCLfIoa3JFwxyoLX4haVNFHSMUecQrsGx8RbmmZxgfoIV9KIeoDhg4d+jXTzPubCREWWmhOB0SV5hgxYkRGxpgxY36i+2cEgRixQLN1FpqnYJWkKklJScNLjxy5MyPjhwf0Kegn9yZEmZdAuxQqVwEkDR8+auTO77uhD3XKsbWOeKBZL4ugULlyuXJlyjQaNeqbFfhG6BuSwdeqOF0H0q6FBmyhUaNdu6FPQd/RHw4Qpxfj4heMatCwIZywh1JTLAYD+mkhSoeBLoGoqCENYGDXL943oB834iyhLdjHgfF79mHfsb0bkRvLBhZDjB49euzYsePH/96/vzyHeXN3Inc6zSuCqcRys1tJjm4xdYj//JP8AXE5S/JuAn7MAAAAAElFTkSuQmCC")
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions .faq a[href*="stackoverflow.com"] {
    padding-left: 22px;
    background-size: 24px;
    background-repeat: no-repeat;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATwAAAE8CAMAAABq2/00AAAA4VBMVEUAAACCg4aCg4aCg4bIj0P1fx/2hh+ojHCojHCojHD2ih/UjCn0eiD0eiD2hB/2hR/RjjDUjCnKkkPUjCnUjCn2ih/UjCnCllPCllP2ih/CllPCllPCllP2ih/CllPCllPCllP2ih/2ih/CllPCllP2ih/2ih/CllPUjCnCllPUjCn0eiD0eiD2ih+ojHD0eiDUjCn0eiD0eiCojHDUjCn0eiDUjCn0eiDUjCnUjCn0eiCojHD0eiCojHD2ih+ojHD2ih+ojHCojHCdiXaViHuCg4aojHD0eiDCllPUjCn2ih8XYwy7AAAARXRSTlMAv0CAEEAQv4BA7++/gCBQQN8wIIDPv2Dfv5+PUDDPryCAcO+/r49wn4Bg79/frJ9QcGDPr6+Pj3DPz2AwIJ9wYOaPVDAbIL/gAAAGhElEQVR42uzbsYrCQBDG8WmyxaJJlcIixQmxMSIRgiBB7Bbm/R/oPAnH3e0SxwSvyf/3DLt8zDeMAAAAAAAAAAAAAAAAAAAAAAAAAAAA4F9k7Xm1Xwlek53WqyY87AVWfbHumvCTE5hkIZYJTFyIrQU2+xA5CmxWIULcWq1DTGBzCrFcMDluC4ENcTtDEyKdwKYLkYuAuH27ggFtuj7ETgLiNo0B7Z3c1YnNMUQaWbTC6/W1uKUPHbha7wr60GnP7ot3YpGHWCsL5Wod1JP70LMsU+H12424nfDsBj4XgzMD2kN20F82YtDSh965nf61JW7Nzy7iKwY067OLlfJcw/qx1KQPQ9zSh1aaVtGHGnxoUummrB97WZhSk3byRM/6UST3mpQRtwZbTTo4GXdhQLvbaNJVxnX0oSMftyBuDQpN8o4BzaDWpFrG5KwfH5zXpJuMCfShox83pw812GnSxrx+XPI5hjvowF7ttawfB5km+Yq4nf5xS84x5lR7nGPMqfaI2znVHgPajGqPc4w51R7nGJ/sm29P2zAQh49h1kJgJHGWlrbQItAIebNO67owadpgwOzv/4Wm8S8NLsXxGSTu/HyEk/O78+McRu0FH4pQe2EdA6P2wjoGRu2FdotQe2EdA6P2wjoGRu2FdotQe+GChlF7DNcxKulN7bFbx4h1lPlSe+x8aKK1Tqae1B6zdYxM35BLP2qP1TqGjPQdmfCi9ji125l+ICp9qD1G6xixXiSPPag9PusYiW5SCLza49JuK/2YKEOrPSYXNBFpkyTGqj0e6xiFXkoukWqPwzpGrJ8iEyi1x8GHnuknSUqU2qO/jlHpVeQpwhB8oL6OISK9mkK4qz3q7bbQzxFV7mqP9jpGqi1IYme1R3sdI060BTPpaAiot9ss0hZkwk3tUb+gyUJbkEzd1B55HxqfaQvy1Ent0V/HKCNtwVy0NwSfGPhQMdcWRJWD2uOwjiFzbcFZ3F7tsVjHmDqMLTZqj3S7bTm2RJloZwh2maxjyJnd2NJS7XFZx7AcW2QrtUe93dZUDmOLjdrbaTTa7e9fNgj1i7ZjS9lK7dU+dPvzzgaRZ8elpPZji73a2/j749vOLuWytRtbCmmv9jghLMcWuw936zfwwnZssTAEexw+VidTmstn1N4Wr2/2gcrBlO6HY3eHKNqPLYfh2FmPLeZ/aXvh2D1Q2o0tYkHt8ZxQliIybTm2NNXex30IWI8tcePDPYSAywPv+61w7NwfeHfJHrvJS44tSQmUGan+oCfAgTi3fOCly1D952A4eqkH3gTocqDuOT5NX2JsmQJZhFrkaHwy8fzAmwNdeuoRRgQiTakEugyUSR2B+LFlDoTpK4M6AvH/pUUC6JIqAyMCMQ+8pMe8E2XgGIFlxKxbAIyVgUUEWj/wUh6QAZQBIgJlzqlbQKwMUBE4Tdh0C4ChMsBFoMgiJt2ivpvVoCNQznh0CxDKAB2B9dgSA2l6ygAbgfUDbwG0GSgDPxEo5tS7xYq7GT4CU8Im6pbRsNkxMBFIex5ezqQ3qM8fPgL5kZ6Mj1QNLgKpR90y4tNjpbxFID+ExwjsAUN8ReAYmOIjAlmePF8RyLHv+orAPgScI3AIb531tQZ/XjECR3DL5VoTeDOsXTVYf8UIFHDLu6sm8GZAFA8ZgccQimcgLCPwNBRvOROLCExD8Z4mXR2BRxCK5+wCx6F47hHYC8Vzj8BJKJ5zBPYhFM85Agf0i3dx3ulcdLubm5e+I3BEv3id65r7Ov70EoGCV/EW+NrpdLu/cHWkX7zz65pn6hiK9689O8hJKIaiMCxK0nYzTBgSYxDs/pekiTohEq/v0eRKv28J/+zkXMbrF2IdxQvEC3ScOF7r6+3LrtZDa1vxVinfHaeId+qjTBCv9kGO4i1XJoi365/EWxCv9EF24i1XJ4jXv4iXKd7p/uNt+yjt/uO1PspZvOVmmGcPrZ1q3ZUi3qoDaNva4WYdj5PFu2nHMm+8nzqKF4y3vuOreL923PcrqngRz6291FrKXrxbdWzifXB6iydehHh5iDco3maQpxnivQ2yEU888cQLEi8R8cSLES8R8cSLES8R8cSLES8R8cSLES8R8QbFexzkPEO86xxA4on3F+LlIZ54QeLlIZ54QeLlIZ54QeLlId6qeOk8/BviiRciXibiiRciXibiiRciXibiiRciXibiiQcAAAAAAAAAAAAAAAAAwHTeAe21evvWi2VXAAAAAElFTkSuQmCC")
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions .faq a[href*="support.google.com/webmasters/"] {
    padding-left: 24px;
    background-size: 24px;
    background-repeat: no-repeat;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAolBMVEUAAADW1tbW1tZ6enrQ0dJ6enrMzMzq6+zq6+x6enru7+/m5+ju7+/m5+j////S09REi/XW1tbm5+ju7+9PT0/Q0dK8vLxGjfVZWVlNTU16enrMzMzIyMj09PS/0uuSkpJpaWmbm5tim/e0tLSEhIStx+3e3+GsrKxwcHBZk/dPk/R1p/KPtu/U3eqmpqZlZWVfmO5woeqHreWvwN6nu9qLi4vZSE73AAAADnRSTlMAEcxmzO7MzDMz7u6IiHn/rpYAAALMSURBVHja7dXpjtowFIZhUkqZlSV1ncQdEsK+zD7T+7+1xjTiwxVOAmeORyP5+2UspPchEtDy8/Pz8/Pz8/M7cZeduHKdyxbL0FfVAMUraHdUHUB12i22tZWqBRSDgKFfC4CApV8PgIClXw/gE6hyTd/lAR7gAV8fEHwbWtc/ul/WfQ8IfQKAIECfCoCA3sdq+nQB+nQABIQ+CQABtY9Z+lQB+gwACBj6AFAE6DM9AL0fAalPB/yGgNAfntwHAAJKnwCAwNLneQAAVAvM/ttzVLlB4z2/A6AFVoDRf43IfewVgGKNAG/Uvrl39BsCXqh9cy8nA/51tmk63+jDZp6m9wTA4DzANiyW6lOqTxAMHAD22XASReuwpKDvELCNookBGJwx9E8B3OvsQp8e9GmOviNANA/Dh4k+TApBukHfFSBa7/I7whqf3xWA/gOAoU8DDJwBCHk+wIAw9CsAPw/W++CFB/MAD/hCgL59PXPS8toRYKHEndkTauEQIIUQ0hToG2eAXOicKdBXmSPAo9CTpkDo5U4Ad6IEGILy0gFgFJctCACIh/yATABwIChvVyE3IBR7AAQAiOmIGZADAMEBQMkRL+AJAAgOALGUI07AQgBgCPb3uRbwAaYAGAIAZlIL2AA5AIYAgJXUAjaAAsAQADCWO4EjAAQGQAvYAUsDsDQAeuwAMZvu89PZ/jZhBmQCi2dl60+MPiMAf8UgZEUpK/LoJ4oX0C9LIIyF0U8yXkBPVCzRWzIDZjX9sWQG9Kv7ScYN6KnKfizZAf2qfpLzA3p5RV9JboDeytp/kk4Ao5WtP+UFQKCO9sdTSQQ03+OR/kxKdgAWZv/11VI6AWBmP5HSNQD5zwQknwxIqIBu468hBgDqNYCuFXBDASSNAbdWQHB1PiBpDLgOWtZdXPEDri/QswjYAOjbF9x0OQHd26Dl5+fn5+fn5+dn7i/3LEaKJNV/0wAAAABJRU5ErkJggg==")
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions .faq a[href*="developer.android.com"], body[codelabs-content-type=paginated] google-codelab-step .instructions .faq a[href*=android-developer] {
    padding-left: 20px;
    background-repeat: no-repeat;
    background-size: 20px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAq1BMVEX///+lyjmfxyGhyCqkyjakyTP+/vuiyS7z+OWlyjKgxyTX57ChyCfa6bTx9uLy9+Sz0l6szk/D24Tt9NrN4ZnK4JSiyCyexh34+/D6/PTp8dPh7cjf7L7k78vc6rnW5qzU5ajS5KPP4p+21GWnzD3F3Yi813Kx0ViqzUWexhr8/vjv9d7Z6LKy0lyZxADh7cLA2n2rzkr1+erJ35C61m6uz1KcxRHn8M6/2XgEePWtAAACr0lEQVRo3u3Z2XKiQBiG4Y9ebNO2aCCyzOC+7zH7/V/ZRJZQZaJpWnKS4TlJUItXbX4pFJXK71DTusvccI6z5oMSAutdhDP2uzpK4CxwxsRBGYJdA19qLAOU4s4LkyUN7G4Ude2glmzuRihHKDqAPZhNuJRKSckms37rvctrKMnG728l5cxKMU7JuCF7KEvf87h1gnu0iXK4B2p9Sc3dUgZNMusMLvu42r20LiBXT8JMWRepN1xlGu+fK8/6xFPxwsvH697/eP/j7uDTOvB+dxwX/AaM2SQ+6icrYHDyGmgfWE3irNeCqTaPAwcArydroboAbuMAb8NQRNJn20SYtHK8HaKZzoffhZl5tlNxsD5PsnUQ2b9jwwnO35WvRo3lN/o2TDwKS5M3gokF0w2wZxgIlpY2FpgsgdQPkLXJQar0A/LVIDB6Idp2GxQQrJI/rbq2Voijlc5S9LZs8uYCqBVyXLTZhLW/fSn3hDMmZAQ05I020gT2PmeM+w4uGpLksFs+oEEtbaqJVnpUkz4uyebf6xQK0CY6XjoSC1xQ9/PPr4KB52zuvTrOa5EssC0auM0C0tYKtI0DqgpUgSpQBapAFfifAj90Tn5YZoGnooH8eutB56KDDosGhlTrYiTyk0epVdFAKJLn9rLHRSNfcE4tF0UDcAXlXPhDfGPtjGejEMUDCEdPY8eFHoOADvPAxiDQLBBQkUHAJfoB34UBS/9CfAETe6lZYKZft/QIFe94vicRy7tcvKOkB0PhYOo4zlNWYNvjpjOdZwU+O24OQlynK62EGCF2J9IbpIsy/P0I3CHW+Qj8qQJVoAr8VOCx3EB+YvDSwIDmXzaW4oZZseU6Lfr5aaAUPT8uyPuT33VeIpRkI5RHyRQfHEKFUj2UJuh1GjaQsxudKECl8jv8A6GtQkKSkMLrAAAAAElFTkSuQmCC")
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions h3 > a[href*=github], body[codelabs-content-type=paginated] google-codelab-step .instructions h3 > a[href*=github]:visited {
    color: #000;
    text-decoration: none;
    padding-left: 24px;
    background-repeat: no-repeat;
    background-size: 18px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAflBMVEUAAACXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZaXlZbf2s+YAAAAKXRSTlMA+SAC7QrIBPXROWMX17rCSmusXEaAD9zNeXFWJqOLMx3mtJJAK5xP4Jw4LyAAAAT6SURBVGje1NbdcqJAEAXg0zJAQEFA0QhojJHE8/4vuBfrJlvQGHSGbO13CzVT09M/g//HIssPRZAYIUkxSVAc8myBSfnrMjVUmbRc+5jEsUqFN0lazeDYogo4SlC5jPq6EI4mxRpOhKuId4pWof228y0fsJ1bbp0lfFCS4XFNSgtpg8eEO6EV2YV4QBvRWtTiXl4udEByD3fxCzpS+LhDk9CZpMFosaFDJsZItdApqTHKnM7NMULOCeQW5534zDUnUuOmWDgRiXFDYzgZ02CQn3BCiY8BXsFJFd7YQjLPkeGDTPRsRhZVK+zIABxX+yfe6Wm/OgL4YIe0UIQRO8x1jm/yiHeI8s11RdP7FKJvx649PmUBRwoyfNqza6dUktzsNt7HliNsa+9m95UGXSl7XvQn2OV0qOpzO1tsNotZe66rw+lyXbb08bcX9qToyNgjYTcoS3PaxT4UflydzLJ7nFDYk3V+SdhzQZfnQTP89VW5jPDbmRTAWvDdnAq1zFnC2pLfHHnFn9uYK3yJ+HOhZoRPa2peYe2VmjX+KKjawNKGqgJXC6HqDEtnqmSB3yrqSlgqqau+UkAVwVLEKz1tZxxQw1LNATObSNvHOqUqCGEtDKhKAcAXqlo40Ag14g92D77BiTcO9pByqNbsDfeIcvCK3+HI++AlG2piOBJTY4AjNVs4s6XmiMwitSzSK0Nu0bQs2leOAzUzODOj5qDPYvHgTCj6TA703HLoog+oxGIgWgzHBMbigWnx1DSQyTcOqBDw34Sav9q1sx1HYSAKoNcYE4cl0AlhIB22rF3//4PTI43ULbrMYjzKy5zHROiGyNhlyqAXDC5z8Acc6mcFu3+OpeCD+Y87ONMRR1isik6qet+wah3gzMEwfIPXLIsB9sQp4UxJnL2pDFRwRBHrauoEZHDkaeoV5PSKKpNydMTSCk4oTawO8O07Nva9JN+8Z0skHNgk5l3bkf7hLUcjW+CceH2B1YqeeDmzTXU5sB/EE4rZmDucsA9ksBtvJuoQq4SaDE5sqc8n2+eaNyqBOTmHtcycG8xo3B4lrMgjmZ0GrwtYaQsLbUBmImZeojKuHRbyHjRmz5ZFQRUdByfGxCPEfPJW07gbVyVoiU9xIwYz97GVs1LD5oMmbPknvcKntLmXNNDvT2GBEV1WXXyadjA0Q64bIMygLsTo00aCsbmWfCbfDOEnt6QF8EzjlBi6BasVdscU5HYwbdz9LO65y9ae4tjKwTzDTJUZfxlPJjRLhoELfdPHgNrl9ZIFK6I5LhjyxOB75QdFsqAEVIKmCW+qcZ0B9xvOPft7eReaVnFPRPmj1lPvbcJdx6toUrkB46zpmyeAnFLViMGDZvSkKfo8Y3ikAORjB8RVqonIT4+hxJjW/qRRzezNvd1VoegKoG1uGOPRhBomaktfAok/PJ9a3PykQEk1xsQ0bqtg5Pk/+04qBtryotDlG4wpaJTvzS7Q3sCwDdbhgu1sw9yi7V/9XFSEb3MwbAbXYWn5H7zF3+5J2gZHNhuPX5frsaqaOvWpsAw+rC3FY6tg/cRMYU88zya4DzGbV7oL3npYQNWugmuFZSLtIlhHWOwcrA8OzrAgT3pdsD5J2PH2a4L3HuzdStvgMscq8j2hL/e5wcm7BLA2OuBbFebVKWBirYR/D6OWc16JizqEO0WUCrHzMMrbCZFGBf5j/QYa/td1VlNoIAAAAABJRU5ErkJggg==")
    }
body[codelabs-content-type=paginated] google-codelab-step .youtube-video {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin: auto;
    width: 560px;
    height: 315px;
    border: none;
    max-width: 100%;
    max-height: 51vw
    }
body[codelabs-content-type=paginated] google-codelab-step .embedded-iframe {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin: auto;
    width: 560px;
    height: 315px;
    border: none;
    max-width: 100%;
    max-height: 51vw
    }
body[codelabs-content-type=paginated] google-codelab google-codelab-step .note:before, body[codelabs-content-type=paginated] google-codelab google-codelab-step .special:before, body[codelabs-content-type=paginated] google-codelab google-codelab-step aside:before {
    content: unset !important
    }
body[codelabs-content-type=paginated] google-codelab google-codelab-step .instructions aside.special, body[codelabs-content-type=paginated] google-codelab google-codelab-step .instructions aside.warning {
    margin: 10px 0 !important;
    padding: 15px 20px !important
    }
body[codelabs-content-type=paginated] iron-icon {
    font: normal normal normal 24px/1 Material Icons;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal;
    font-size: inherit
    }
body[codelabs-content-type=paginated] iron-icon[icon=file-download]:after {
    content: "cloud_download"
    }
body[codelabs-content-type=paginated] google-codelab .warning, body[codelabs-content-type=paginated] google-codelab .warning :link, body[codelabs-content-type=paginated] google-codelab .warning :visited, body[codelabs-content-type=paginated] google-codelab .warning code {
    background: #fef7e0
    }
body[codelabs-content-type=paginated] google-codelab .special :link, body[codelabs-content-type=paginated] google-codelab .special :visited, body[codelabs-content-type=paginated] google-codelab .special code, body[codelabs-content-type=paginated] google-codelab aside :link, body[codelabs-content-type=paginated] google-codelab aside :visited, body[codelabs-content-type=paginated] google-codelab aside code {
    background: #e6f4ea
    }
body[codelabs-content-type=paginated] google-codelab-step td {
    background: transparent
    }
body[codelabs-content-type=paginated] google-codelab-step .instructions h3 > a[href*=github], body[codelabs-content-type=paginated] google-codelab-step .instructions h3 > a[href*=github]:visited {
    background-position: 0 3px
    }
body[codelabs-content-type=paginated] google-codelab-step code {
    font: 500 90%/1 var(--devsite-code-font-family)
    }
body[codelabs-content-type=paginated] google-codelab-step pre {
    background: var(--devsite-code-background, #f1f3f4);
    border-radius: 0;
    color: var(--devsite-code-color, inherit);
    font: 14px/20px var(--devsite-code-font-family);
    margin: 16px 0;
    overflow-x: auto;
    padding: 8px 80px 8px 8px;
    position: relative
    }
body[codelabs-content-type=paginated] google-codelab-step devsite-code pre {
    margin: 0
    }
body[codelabs-content-type=paginated] google-codelab-step pre, body[codelabs-content-type=paginated] google-codelab-step pre code {
    font: 14px/20px var(--devsite-code-font-family)
    }
body[codelabs-content-type=paginated] google-codelab-step code .com, body[codelabs-content-type=paginated] google-codelab-step pre .com {
    color: var(--devsite-code-comments-color)
    }
body[codelabs-content-type=paginated] google-codelab-step code .dec, body[codelabs-content-type=paginated] google-codelab-step code .lit, body[codelabs-content-type=paginated] google-codelab-step pre .dec, body[codelabs-content-type=paginated] google-codelab-step pre .lit {
    color: var(--devsite-code-numbers-color)
    }
body[codelabs-content-type=paginated] google-codelab-step code .kwd, body[codelabs-content-type=paginated] google-codelab-step code .tag, body[codelabs-content-type=paginated] google-codelab-step pre .kwd, body[codelabs-content-type=paginated] google-codelab-step pre .tag {
    color: var(--devsite-code-keywords-color)
    }
body[codelabs-content-type=paginated] google-codelab-step code .atv, body[codelabs-content-type=paginated] google-codelab-step code .str, body[codelabs-content-type=paginated] google-codelab-step pre .atv, body[codelabs-content-type=paginated] google-codelab-step pre .str {
    color: var(--devsite-code-strings-color)
    }
body[codelabs-content-type=paginated] google-codelab-step code .atn, body[codelabs-content-type=paginated] google-codelab-step code .typ, body[codelabs-content-type=paginated] google-codelab-step pre .atn, body[codelabs-content-type=paginated] google-codelab-step pre .typ {
    color: var(--devsite-code-types-color)
    }
body[codelabs-content-type=paginated] google-codelab-step code .pln, body[codelabs-content-type=paginated] google-codelab-step code .pun, body[codelabs-content-type=paginated] google-codelab-step pre .pln, body[codelabs-content-type=paginated] google-codelab-step pre .pun {
    color: inherit
    }
google-codelab-survey {
    visibility: hidden
    }
google-codelab-survey[upgraded] {
    visibility: visible
    }
google-codelab-survey {
    display: block;
    margin: 2em 0;
    padding: 0;
    background: #e8f0fe;
    border-left: 4px solid #185abc;
    border-radius: 4px;
    color: #3c4043
    }
google-codelab-survey h4 {
    font-size: 16px;
    font-weight: 400;
    padding: 0.8em 0 0;
    margin: 0
    }
google-codelab-survey .survey-question-wrapper {
    padding: 0.4em 0 1.1em 30px
    }
google-codelab-survey .survey-question-options {
    padding: 0.8em 0 0
    }
.survey-option-wrapper {
    cursor: pointer;
    display: block;
    padding: 0 0 4px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle
    }
google-codelab-survey .option-text {
    color: #212121;
    font-size: 16px;
    padding-left: 24px
    }
.survey-option-wrapper input {
    position: absolute;
    opacity: 0
    }
.custom-radio-button {
    position: absolute;
    top: 5px;
    left: 0;
    height: 13px;
    width: 13px;
    background-color: #fff;
    border: 2px solid #3f51b5;
    border-radius: 50%
    }
.custom-radio-button:after {
    content: "";
    position: absolute;
    display: none
    }
.survey-option-wrapper input:checked ~ .custom-radio-button:after {
    display: block
    }
.survey-option-wrapper .custom-radio-button:after {
    top: 1px;
    left: 1px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3f51b5
    }
devsite-avatar {
    display: block
    }
devsite-avatar .photo-selector-loading, devsite-avatar .photo-selector-mini {
    border-radius: 50%;
    height: 36px;
    width: 36px;
    font-size: 20px;
    border: var(--devsite-primary-border);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #666;
    position: absolute;
    vertical-align: bottom;
    left: calc(50% + 30px);
    bottom: 0;
    background: var(--devsite-background-1);
    cursor: pointer;
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color);
    z-index: 90
    }
devsite-avatar .photo-selector-loading {
    display: none;
    pointer-events: all;
    z-index: 91
    }
devsite-avatar .photo-selector-loading.show {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-avatar .photo-selector-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    background: var(--devsite-background-1);
    top: 90px;
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color);
    border-radius: 4px;
    z-index: 100;
    display: none;
    padding: 8px 0;
    --devsite-button-border: 0;
    --devsite-button-border-hover: 0;
    --devsite-button-border-active: 0;
    --devsite-button-padding: 0 24px;
    --devsite-button-border-radius: 4px;
    --devsite-button-color: #3c4043;
    --devsite-button-color-hover: #3c4043;
    --devsite-button-background-hover: #f1f3f4;
    --devsite-button-background-active: #f1f3f4;
    --devsite-button-width: 100%;
    --devsite-button-line-height: 48px;
    --devsite-button-box-shadow-active: none;
    --devsite-button-height: "auto"
    }
devsite-avatar .photo-selector-dropdown.show {
    display: block
    }
devsite-avatar .photo-selector-dropdown ul {
    margin: 0;
    padding: 0;
    list-style: none
    }
devsite-avatar .photo-selector-dropdown ul li {
    margin: 0;
    padding: 0;
    border-bottom: var(--devsite-primary-border)
    }
devsite-avatar .photo-selector-dropdown ul li:last-child {
    border-bottom: 0
    }
devsite-avatar .photo-selector-dropdown ul button {
    --devsite-button-border-radius: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: visible;
    gap: 12px;
    text-align: initial;
    white-space: normal;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-family: Roboto, Noto Sans, Noto Sans JP, Noto Sans KR, Noto Naskh Arabic, Noto Sans Thai, Noto Sans Hebrew, Noto Sans Bengali, sans-serif;
    color: var(--devsite-secondary-text-color)
    }
devsite-avatar .photo-selector-dropdown ul .info-popout-container {
    max-width: 268px
    }
devsite-avatar .photo-selector-dropdown .photo-selector-dropdown-icon {
    line-height: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0
    }
devsite-avatar .photo-selector-dropdown .photo-selector-dropdown-icon img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: var(--devsite-primary-border)
    }
devsite-avatar .photo-selector-dropdown .photo-selector-dropdown-remove-photo .material-icons {
    width: 32px;
    height: 32px;
    font-size: 20px;
    top: auto;
    margin: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #5f6368;
    border-radius: 50%;
    border: var(--devsite-primary-border)
    }
devsite-avatar .photo-selector {
    border-radius: 50%;
    display: inline-block;
    color: var(--devsite-primary-text-color);
    height: 130px;
    width: 130px;
    text-align: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
    border: var(--devsite-primary-border);
    background-color: var(--devsite-background-1);
    -webkit-filter: var(--devsite-darkmode-image-filter);
    filter: var(--devsite-darkmode-image-filter)
    }
.devsite-avatar-dialog {
    padding: 0;
    background-color: transparent;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: none;
    width: 100vw;
    height: 56.25vw;
    max-height: 100vh;
    max-width: 177vh
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-dialog {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0
        }
    }
.devsite-avatar-dialog .cool-circle {
    width: 42vw;
    height: 42vw;
    max-height: 680px;
    max-width: 680px;
    position: absolute;
    -webkit-transition: margin 0.8s, -webkit-transform 0.8s ease-in-out;
    transition: margin 0.8s, -webkit-transform 0.8s ease-in-out;
    transition: margin 0.8s, transform 0.8s ease-in-out;
    transition: margin 0.8s, transform 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    border-color: rgba(0, 0, 0, 0.54);
    -webkit-animation: rotating 1s linear infinite;
    animation: rotating 1s linear infinite;
    background: transparent
    }
@-webkit-keyframes rotating {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
        } to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
        }
    }
@keyframes rotating {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
        } to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
        }
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-dialog .cool-circle {
        width: 84vw;
        height: 84vw;
        max-height: 84vh;
        max-width: 84vh
        }
    }
.devsite-avatar-dialog .cool-circle .frame {
    position: absolute;
    -webkit-transition: margin 0.4s, border-radius 0.4s ease-out, width 0.4s, height 0.4s, border-width 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
    transition: margin 0.4s, border-radius 0.4s ease-out, width 0.4s, height 0.4s, border-width 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
    margin: 0;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    border-width: 0.9vw !important
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-dialog .cool-circle .frame {
        border-width: 1.8vw !important
        }
    }
.devsite-avatar-dialog .cool-circle .top-left {
    border-left: solid #fbbc04;
    border-right: solid #fbbc04;
    border-top: solid #fbbc04
    }
.devsite-avatar-dialog .cool-circle .top-right {
    border-right: solid #34a853;
    border-bottom: solid #34a853;
    border-top: solid transparent
    }
.devsite-avatar-dialog .cool-circle .bottom-left {
    border-bottom: solid #ea4335;
    border-left: solid #ea4335
    }
.devsite-avatar-dialog .cool-circle .bottom-right {
    border-bottom: solid #4285f4;
    border-left: solid transparent
    }
.devsite-avatar-dialog .devsite-avatar-loading-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    z-index: 10;
    background-color: #fff;
    opacity: 1
    }
.devsite-avatar-dialog .devsite-avatar-loading-container.hide {
    opacity: 0
    }
.devsite-avatar-dialog .devsite-avatar-loading-container.customizer-loading-container {
    z-index: 8
    }
.devsite-avatar-dialog .devsite-avatar-loading-container .loading-text {
    text-transform: uppercase;
    margin-top: 10.5vw;
    position: absolute;
    color: #666;
    font-weight: 500;
    font-size: 1.2vw
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-dialog .devsite-avatar-loading-container .loading-text {
        margin-top: 21%;
        font-size: 3.5vw
        }
    }
@media screen and (max-width: 820px) and (max-height: 578.531073px) {
    .devsite-avatar-dialog .devsite-avatar-loading-container .loading-text {
        margin-top: 21%;
        font-size: 100%
        }
    }
.devsite-avatar-dialog .devsite-avatar-loading-container .progress-loading-container {
    position: relative
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-dialog .devsite-avatar-loading-container .progress-loading-container {
        -webkit-transform: scale(2);
        transform: scale(2)
        }
    }
.devsite-avatar-dialog .devsite-avatar-loading-container .progress-loading-container i {
    font-size: 10vw;
    margin: 0 0 1.2vw
    }
@media screen and (max-height: 578.531073px) {
    .devsite-avatar-dialog .devsite-avatar-loading-container .progress-loading-container i {
        margin: 0 0 5vw
        }
    }
.devsite-avatar-dialog .devsite-avatar-loading-container .progress-loading-container i.person {
    margin: 0 0 1.2vw
    }
@media screen and (max-height: 578.531073px) {
    .devsite-avatar-dialog .devsite-avatar-loading-container .progress-loading-container i.person {
        margin: 0 0 6vw
        }
    }
.devsite-avatar-dialog .devsite-avatar-loading-container .progress-loading-container .icon-full {
    opacity: 0.3;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
.devsite-avatar-dialog .devsite-avatar-loading-container .progress-loading-container .icon-loading {
    position: absolute;
    bottom: 0;
    z-index: 100;
    height: 25%;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -moz-box-orient: vertical;
    -moz-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse
    }
.devsite-avatar-dialog .devsite-avatar-loading-container .progress-loading-container .icon-loading.start {
    height: 80%;
    -webkit-transition: height 3s ease-out;
    transition: height 3s ease-out
    }
.devsite-avatar-dialog .devsite-avatar-loading-container .progress-loading-container .icon-loading.finish {
    height: 100%;
    -webkit-transition: height 0.2s linear;
    transition: height 0.2s linear
    }
.devsite-avatar-dialog .close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1000;
    padding: 5px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    background-color: rgba(0, 0, 0, 0.87);
    color: #fff;
    cursor: pointer;
    min-width: 50px;
    min-height: 50px;
    max-height: 50px;
    max-width: 50px;
    border-bottom-left-radius: 5px
    }
.devsite-avatar-dialog .close .material-icons {
    font-size: 40px
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-dialog .close .material-icons {
        font-size: 26px
        }
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-dialog .close {
        min-width: 35px;
        min-height: 35px;
        max-height: 35px;
        max-width: 35px
        }
    }
.devsite-avatar-dialog .devsite-avatar-dialog-inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: calc(100% - 48px);
    height: calc(100% - 48px);
    max-height: 767px;
    max-width: 1363px;
    background-color: #fff;
    -webkit-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 1px 3px 0 var(--devsite-elevation-key-shadow-color), 0 4px 8px 3px var(--devsite-elevation-ambient-shadow-color)
    }
@media screen and (max-height: 500px) {
    .devsite-avatar-dialog .devsite-avatar-dialog-inner {
        width: calc(100% - 18px);
        height: calc(100% - 18px)
        }
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-dialog .devsite-avatar-dialog-inner {
        width: 100%;
        height: 100%;
        position: unset
        }
    }
.devsite-avatar-dialog .devsite-avatar-customizer, .devsite-avatar-dialog .devsite-avatar-loading-container, .devsite-avatar-dialog .devsite-avatar-photobooth {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
    opacity: 1
    }
.devsite-avatar-dialog .devsite-avatar-photobooth {
    z-index: 9
    }
.devsite-avatar-dialog .devsite-avatar-photobooth.hide {
    opacity: 0
    }
.devsite-avatar-dialog .devsite-avatar-photobooth.show .devsite-avatar-video-overlay-mask {
    width: 36.8%;
    height: 68.1%;
    top: -5%
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-dialog .devsite-avatar-photobooth.show .devsite-avatar-video-overlay-mask {
        width: 85vw;
        height: 85vw;
        top: -10vh
        }
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-photo, .devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video, .devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay, .devsite-avatar-dialog .devsite-avatar-photobooth .video-error {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-photo, .devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video {
    object-fit: cover
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-photo.from-video, .devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video {
    -webkit-transform: rotatey(180deg) scale(1.002);
    transform: rotatey(180deg) scale(1.002)
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-photobooth-controls {
    position: absolute;
    left: 0;
    right: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 100;
    bottom: calc(9% - 24px)
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-photobooth-controls {
        bottom: calc(46vh - 30vw - 22px)
        }
    }
.devsite-avatar-dialog .devsite-avatar-photobooth #refresh-video, .devsite-avatar-dialog .devsite-avatar-photobooth #take-photo {
    border: none !important;
    border-radius: 50%;
    background: #1e88e5;
    color: #fff;
    width: 55px;
    height: 55px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 1px 3px 0 var(--devsite-elevation-key-shadow-color), 0 4px 8px 3px var(--devsite-elevation-ambient-shadow-color);
    margin: 0 2%
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-dialog .devsite-avatar-photobooth #refresh-video, .devsite-avatar-dialog .devsite-avatar-photobooth #take-photo {
        position: absolute;
        bottom: -90px;
        margin: auto;
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
        }
    }
.devsite-avatar-dialog .devsite-avatar-photobooth #refresh-video .material-icons, .devsite-avatar-dialog .devsite-avatar-photobooth #take-photo .material-icons {
    font-size: 22px;
    margin: 0;
    top: 0;
    width: 21px;
    height: 21px
    }
.devsite-avatar-dialog .devsite-avatar-photobooth #refresh-video {
    display: none
    }
.devsite-avatar-dialog .devsite-avatar-photobooth #flip-camera, .devsite-avatar-dialog .devsite-avatar-photobooth #random-avatar, .devsite-avatar-dialog .devsite-avatar-photobooth #upload-photo {
    border: none !important;
    background: #e6f0fe;
    color: #1a73e8;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 1px 3px 0 var(--devsite-elevation-key-shadow-color), 0 4px 8px 3px var(--devsite-elevation-ambient-shadow-color);
    margin: 0;
    padding: 0 16px 0 14px
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-dialog .devsite-avatar-photobooth #flip-camera, .devsite-avatar-dialog .devsite-avatar-photobooth #random-avatar, .devsite-avatar-dialog .devsite-avatar-photobooth #upload-photo {
        padding: 0 13px 0 11px;
        margin: 0 10px;
        height: unset
        }
    }
.devsite-avatar-dialog .devsite-avatar-photobooth #flip-camera .material-icons, .devsite-avatar-dialog .devsite-avatar-photobooth #random-avatar .material-icons, .devsite-avatar-dialog .devsite-avatar-photobooth #upload-photo .material-icons {
    margin: 0;
    top: 0;
    margin-right: 7px
    }
.devsite-avatar-dialog .devsite-avatar-photobooth #flip-camera:disabled, .devsite-avatar-dialog .devsite-avatar-photobooth #random-avatar:disabled, .devsite-avatar-dialog .devsite-avatar-photobooth #take-photo:disabled, .devsite-avatar-dialog .devsite-avatar-photobooth #upload-photo:disabled {
    color: grey;
    background-color: #eee;
    border: var(--devsite-primary-border);
    box-shadow: none
    }
.devsite-avatar-dialog .devsite-avatar-photobooth #upload-photo-input {
    position: absolute;
    bottom: 200%;
    opacity: 0
    }
@media screen and (min-width: 820px) {
    .devsite-avatar-dialog .devsite-avatar-photobooth #flip-camera {
        border-radius: 50%;
        width: 43px;
        height: 43px;
        margin-right: 2%;
        font-size: 0
        }
    .devsite-avatar-dialog .devsite-avatar-photobooth #flip-camera .material-icons {
        margin-right: 0
        }
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .video-error {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-dialog .devsite-avatar-photobooth .video-error {
        top: -10vh
        }
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .video-error .message {
    width: 36vw;
    text-align: center
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-dialog .devsite-avatar-photobooth .video-error .message {
        width: 85vw
        }
    }
.devsite-avatar-dialog .devsite-avatar-photobooth.no-camera-support {
    background-color: #fff
    }
.devsite-avatar-dialog .devsite-avatar-photobooth.no-camera-support .video-error {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
.devsite-avatar-dialog .devsite-avatar-photobooth.no-camera-support .devsite-avatar-video-overlay-mask .frame {
    border-color: var(--devsite-background-5);
    background-color: var(--devsite-background-5)
    }
.devsite-avatar-dialog .devsite-avatar-photobooth.no-camera-support #take-photo {
    display: none
    }
.devsite-avatar-dialog .devsite-avatar-photobooth.no-camera-support #refresh-video {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
.devsite-avatar-dialog .devsite-avatar-photobooth.avatar-done .video-error {
    display: none
    }
.devsite-avatar-dialog .devsite-avatar-photobooth.avatar-done .devsite-avatar-photobooth-controls {
    display: none
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .countdown {
    top: -5%;
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 100px;
    opacity: 1;
    height: 100%;
    width: 100%;
    z-index: 9;
    text-shadow: 0 0 40px #000;
    color: #fff;
    -webkit-transition: font-size 0s ease-out, opacity 0s ease-out;
    transition: font-size 0s ease-out, opacity 0s ease-out
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-dialog .devsite-avatar-photobooth .countdown {
        top: -10vh
        }
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .countdown.fade {
    font-size: 300px;
    opacity: 0;
    -webkit-transition: font-size 2s ease-out, opacity 2s ease-out;
    transition: font-size 2s ease-out, opacity 2s ease-out
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .flash {
    height: 100%;
    width: 100%;
    background-color: #fff;
    opacity: 0;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
    z-index: 10;
    position: absolute
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .flash.start {
    opacity: 1;
    -webkit-transition: opacity 0s;
    transition: opacity 0s
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask {
    width: 80px;
    height: 80px;
    -webkit-transition: width 0.1s linear, height 0.1s linear;
    transition: width 0.1s linear, height 0.1s linear;
    position: relative;
    background: hsla(0, 0%, 100%, 0.2)
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .frame {
    border-radius: 1.5vw;
    width: 0;
    height: 0;
    position: absolute
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .red {
    border: solid #ea4335;
    background-color: #ea4335
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .green {
    border: solid #34a853;
    background-color: #34a853
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .blue {
    border: solid #4285f4;
    background-color: #4285f4
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .yellow {
    border: solid #fbbc04;
    background-color: #fbbc04
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .top {
    top: -1.2vw
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .left {
    left: -1.2vw
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .right {
    right: -1.2vw
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .bottom {
    bottom: -1.2vw
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .horizontal {
    border-width: 1.2vw 2.4vw
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .horizontal.long {
    width: 7vw
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .horizontal.short {
    width: 4vw
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .vertical {
    border-width: 2.4vw 1.2vw
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .vertical.long {
    height: 7vw
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .vertical.short {
    height: 4vw
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .frame {
        border-radius: 3vw
        }
    .devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .top {
        top: -2.8vw
        }
    .devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .left {
        left: -2.8vw
        }
    .devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .right {
        right: -2.8vw
        }
    .devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .bottom {
        bottom: -2.8vw
        }
    .devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .horizontal {
        border-width: 2.8vw 5.6vw
        }
    .devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .horizontal.long {
        width: 17vw
        }
    .devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .horizontal.short {
        width: 11vw
        }
    .devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .vertical {
        border-width: 5.6vw 2.8vw
        }
    .devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .vertical.long {
        height: 17vw
        }
    .devsite-avatar-dialog .devsite-avatar-photobooth .devsite-avatar-video-overlay-mask .vertical.short {
        height: 11vw
        }
    }
.devsite-avatar-dialog .devsite-avatar-photobooth .video-error {
    display: none
    }
.devsite-avatar-customizer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    z-index: 2;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    opacity: 0;
    background: var(--devsite-background-1)
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-customizer {
        padding-top: 28vh;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
        }
    }
.devsite-avatar-customizer .customizer-avatar {
    padding: 24px;
    width: 47vw;
    max-width: 350px;
    height: 100%;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -moz-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-customizer .customizer-avatar {
        width: 100%;
        min-width: 100%;
        height: 56px;
        padding: 10px;
        border-top: 1px solid #f1f3f4
        }
    }
.devsite-avatar-customizer .customizer-avatar .customizer-controller {
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    text-align: end;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-customizer .customizer-avatar .customizer-controller {
        padding: 0
        }
    }
.devsite-avatar-customizer .customizer-avatar .customizer-controller #save-avatar, .devsite-avatar-customizer .customizer-avatar .customizer-controller #start-over {
    border: none !important;
    background: #e6f0fe;
    color: #1a73e8;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative
    }
.devsite-avatar-customizer .customizer-avatar .customizer-controller #save-avatar {
    background: #1a73e8;
    color: #fff
    }
.devsite-avatar-customizer .customizer-avatar .customizer-avatar-inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 40px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    max-width: calc(75vh - 90px)
    }
@media screen and (max-height: 500px) {
    .devsite-avatar-customizer .customizer-avatar .customizer-avatar-inner {
        margin-bottom: 20px
        }
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-customizer .customizer-avatar .customizer-avatar-inner {
        position: fixed;
        margin-bottom: 0;
        bottom: 73vh;
        -webkit-box-pack: end;
        -webkit-justify-content: flex-end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        left: 0;
        top: 0;
        height: 27vh;
        max-width: unset
        }
    }
.devsite-avatar-customizer .customizer-avatar .customizer-avatar-img {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -moz-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    max-height: 400px;
    width: 100%;
    max-width: 300px
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-customizer .customizer-avatar .customizer-avatar-img {
        max-width: unset
        }
    }
.devsite-avatar-customizer .customizer-avatar .customizer-avatar-img img {
    max-width: 100%;
    width: 22vw
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-customizer .customizer-avatar .customizer-avatar-img img {
        width: unset;
        height: 24vh;
        max-width: unset
        }
    }
.devsite-avatar-customizer .customizer-avatar .customizer-avatar-img-border {
    background: -webkit-gradient(linear, left top, right top, color-stop(25%, #ea4335), color-stop(25%, #4285f4), color-stop(50%, #4285f4), color-stop(50%, #34a853), color-stop(75%, #34a853), color-stop(75%, #fbbc04));
    background: -webkit-linear-gradient(left, #ea4335 25%, #4285f4 0, #4285f4 50%, #34a853 0, #34a853 75%, #fbbc04 0);
    background: linear-gradient(90deg, #ea4335 25%, #4285f4 0, #4285f4 50%, #34a853 0, #34a853 75%, #fbbc04 0);
    height: 9px;
    width: 100%;
    -webkit-transform: scalex(0);
    transform: scalex(0);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
    transition: transform 0.2s ease, -webkit-transform 0.2s ease;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
    position: relative;
    top: -1px;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-customizer .customizer-avatar .customizer-avatar-img-border {
        height: 5px;
        width: 30vh;
        margin: 0 auto
        }
    }
.devsite-avatar-customizer.show {
    opacity: 1
    }
.devsite-avatar-customizer.show .customizer-avatar-img {
    -webkit-transform: translatez(0);
    transform: translatez(0)
    }
.devsite-avatar-customizer.show .customizer-avatar-img-border {
    -webkit-transform: scalex(1);
    transform: scalex(1)
    }
.devsite-avatar-customizer button .material-icons {
    line-height: 21px;
    margin-left: 0
    }
.devsite-avatar-customizer h2 {
    margin-top: 2vw
    }
.devsite-avatar-customizer h2 {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    margin: 0
    }
.devsite-avatar-customizer .customizer-options {
    background: var(--devsite-background-1);
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    height: 100%;
    width: 100%
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-customizer .customizer-options {
        width: 200%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -moz-box-orient: horizontal;
        -moz-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        overflow: hidden;
        box-shadow: inset 0 9px 6px -8px #80868b;
        -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        -webkit-transform: translatez(0);
        transform: translatez(0)
        }
    .devsite-avatar-customizer .customizer-options.show-sections {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0)
        }
    }
.devsite-avatar-customizer .customizer-options .customizer-categories {
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 18px 8px 18px 0;
    border-right: 1px solid #ccc
    }
@media screen and (max-width: 1024px) {
    .devsite-avatar-customizer .customizer-options .customizer-categories {
        padding-right: 18px
        }
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-customizer .customizer-options .customizer-categories {
        padding: 5px 0;
        width: 50%;
        margin: 0;
        display: block;
        overflow-y: auto
        }
    }
.devsite-avatar-customizer .customizer-options .customizer-categories .vertical-tabs {
    white-space: nowrap;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 24px;
    background: var(--devsite-background-1);
    opacity: 0.8;
    border-radius: 0 24px 24px 0;
    padding-right: 18px;
    cursor: pointer
    }
@media screen and (max-height: 578.531073px), screen and (max-width: 1024px) {
    .devsite-avatar-customizer .customizer-options .customizer-categories .vertical-tabs {
        width: 58px;
        overflow: hidden
        }
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-customizer .customizer-options .customizer-categories .vertical-tabs {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #ddd;
        border-radius: 0;
        position: relative;
        background: unset
        }
    .devsite-avatar-customizer .customizer-options .customizer-categories .vertical-tabs:after {
        content: "❯";
        position: absolute;
        right: 10px;
        font-size: 20px
        }
    }
@media screen and (min-width: 820px) {
    .devsite-avatar-customizer .customizer-options .customizer-categories .vertical-tabs.selected {
        color: #4285f4;
        background-color: var(--devsite-background-3);
        opacity: 1;
        font-weight: 500
        }
    .devsite-avatar-customizer .customizer-options .customizer-categories .vertical-tabs.selected img {
        -webkit-filter: hue-rotate(8deg) saturate(900%);
        filter: hue-rotate(8deg) saturate(900%)
        }
    .devsite-avatar-customizer .customizer-options .customizer-categories .vertical-tabs:hover {
        background-color: var(--devsite-background-2);
        opacity: 1
        }
    }
.devsite-avatar-customizer .customizer-options .customizer-categories .vertical-tabs img {
    width: 38px;
    height: 38px;
    min-width: 38px
    }
.devsite-avatar-customizer .customizer-options .customizer-sections-container {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-customizer .customizer-options .customizer-sections-container {
        width: 50%;
        position: relative;
        overflow: hidden
        }
    }
.devsite-avatar-customizer .customizer-options .customizer-sections-container .tab-name {
    display: none
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-customizer .customizer-options .customizer-sections-container .tab-name {
        width: 100%;
        background-color: var(--devsite-background-1);
        box-shadow: 0 -6px 6px 7px #80868b;
        height: 60px;
        min-height: 60px;
        z-index: 10;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border-top: 1px solid #f1f3f4;
        font-size: 18px;
        font-weight: 500;
        padding: 5px 0;
        cursor: pointer
        }
    .devsite-avatar-customizer .customizer-options .customizer-sections-container .tab-name img {
        height: 100%
        }
    .devsite-avatar-customizer .customizer-options .customizer-sections-container .tab-name:before {
        content: "❮";
        position: absolute;
        left: 22px;
        font-size: 20px
        }
    }
.devsite-avatar-customizer .customizer-options .customizer-sections-container .customizer-sections {
    overflow: auto;
    padding: 0 24px;
    margin: 24px 0
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-customizer .customizer-options .customizer-sections-container .customizer-sections {
        display: block;
        margin: 0;
        padding: 15px;
        position: relative
        }
    }
.devsite-avatar-customizer .customizer-options .customizer-sections-container .customizer-sections h3, .devsite-avatar-customizer .customizer-options .customizer-sections-container .customizer-sections h4 {
    width: 100%;
    text-align: left;
    text-transform: uppercase;
    font-size: 12px;
    font-family: Roboto, Noto Sans, Noto Sans JP, Noto Sans KR, Noto Naskh Arabic, Noto Sans Thai, Noto Sans Hebrew, Noto Sans Bengali, sans-serif;
    margin: 20px 0 8px
    }
.devsite-avatar-customizer .customizer-options .customizer-sections-container .customizer-sections h3:first-child, .devsite-avatar-customizer .customizer-options .customizer-sections-container .customizer-sections h4:first-child {
    margin-top: 0
    }
.devsite-avatar-customizer .customizer-options .customizer-sections-container .customizer-sections .customizer-section {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: wrap;
    -ms-flex-flow: wrap;
    flex-flow: wrap
    }
.devsite-avatar-customizer .customizer-options .customizer-sections-container .customizer-sections .customizer-section .customizer-option.form-field {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 16px 16px
    }
.devsite-avatar-customizer .customizer-options .customizer-sections-container .customizer-sections .customizer-section img {
    width: 40px;
    height: 40px;
    opacity: 0.8
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-customizer .customizer-options .customizer-sections-container .customizer-sections .customizer-section img {
        width: 36px;
        height: 36px
        }
    }
.devsite-avatar-customizer .customizer-options .color {
    border-radius: 50%;
    width: 40px;
    height: 40px
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-customizer .customizer-options .color {
        width: 36px;
        height: 36px
        }
    }
.devsite-avatar-customizer .customizer-options button {
    border: 2px solid transparent;
    padding: 0;
    height: 64px;
    margin: 4px;
    border-radius: 50%;
    width: 64px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0
    }
@media screen and (max-width: 820px) {
    .devsite-avatar-customizer .customizer-options button {
        width: 52px;
        height: 52px;
        background: transparent
        }
    }
@media screen and (min-width: 820px) {
    .devsite-avatar-customizer .customizer-options button:after, .devsite-avatar-customizer .customizer-options button:before {
        background-color: #fff
        }
    }
.devsite-avatar-customizer .customizer-options button[selected] {
    border: 2px solid #4285f4
    }
.devsite-changelog-dialog {
    width: 680px;
    position: relative
    }
.devsite-changelog-dialog .devsite-dialog-close:not(.button):not(button) {
    inset-inline-end: 10px;
    position: absolute;
    top: 10px
    }
.devsite-changelog-dialog .devsite-changelog-page-title {
    color: #202124;
    font-family: var(--devsite-headline-font-family);
    font-size: 18px;
    line-height: 22px;
    -webkit-margin-after: 12px;
    margin-block-end: 12px
    }
.devsite-changelog-dialog .devsite-changelog-title {
    color: #202124;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    -webkit-margin-end: 9.5px;
    -moz-margin-end: 9.5px;
    margin-inline-end: 9.5px
    }
.devsite-changelog-dialog .devsite-changelog-date {
    color: #3c4043;
    font-size: 14px;
    line-height: 22px;
    margin-block: 12px;
    margin-inline: 0
    }
.devsite-changelog-dialog .updated-tag {
    background-color: #e3f2fd;
    color: #1565c0;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    margin-block: 0 -1px;
    margin-inline: 0 10px;
    padding-block: 1px;
    padding-inline: 8px
    }
.devsite-changelog-dialog .updated-tag-FEATURE {
    color: #137333;
    background-color: #e6f4ea
    }
.devsite-changelog-dialog .updated-tag-BREAKING_CHANGE, .devsite-changelog-dialog .updated-tag-DEPRECATION, .devsite-changelog-dialog .updated-tag-ISSUE {
    color: #b31412;
    background-color: #fce8e6
    }
.devsite-changelog-dialog .updated-tag-NON_BREAKING_CHANGE, .devsite-changelog-dialog .updated-tag-SERVICE_ANNOUNCEMENT {
    color: #ea8600;
    background-color: #fef7e0
    }
.devsite-changelog-dialog .updated-tag-SECURITY_BULLETIN {
    color: #c26401;
    background-color: #feefe3
    }
.devsite-changelog-dialog .devsite-changelog-description {
    border: 1px solid #dadce0;
    color: #3c4043;
    font-size: 16px;
    line-height: 22px;
    margin-block: 16px;
    margin-inline: 0;
    max-height: 400px;
    overflow-y: auto;
    overflow: hidden;
    padding-block: 4px;
    padding-inline: 20px;
    word-break: break-word
    }
.devsite-changelog-dialog .devsite-changelog-linebreak {
    border-top: 1px solid #dadce0;
    margin-block: 20px;
    margin-inline: -24px;
    height: 1px;
    display: block
    }
.devsite-changelog-dialog .devsite-dialog-contents {
    overflow: visible;
    -webkit-padding-after: 4px;
    padding-block-end: 4px
    }
.devsite-changelog-dialog .devsite-dialog-buttons {
    -webkit-box-pack: start;
    -webkit-justify-content: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    padding-block: 0 16px;
    padding-inline: 0 16px
    }
devsite-activity-list {
    min-height: 295px;
    position: relative;
    display: block
    }
devsite-activity-list .devsite-activity-searchbox {
    padding-block: 12px;
    padding-inline: 14px;
    position: relative
    }
devsite-activity-list .devsite-activity-searchbox .devsite-activity-searchbox-input {
    border: 0;
    background-color: #f1f3f4;
    border-radius: 4px;
    color: #5f6368;
    font-size: 14px;
    height: 32px;
    max-width: 400px;
    -webkit-padding-start: 38px;
    -moz-padding-start: 38px;
    padding-inline-start: 38px;
    width: 100%
    }
devsite-activity-list .devsite-activity-searchbox .devsite-activity-searchbox-image {
    color: #80868b;
    direction: unset;
    inset-inline-start: 20px;
    position: absolute;
    top: 17px
    }
devsite-activity-list .waiting-container {
    padding-block: 40px;
    padding-inline: 20px
    }
devsite-activity-list .show-more-button {
    display: block;
    margin-block: 20px 0;
    margin-inline: auto
    }
@media screen and (max-width: 600px) {
    devsite-activity-list:not(.more-activities) .activities .activity:nth-child(12) .activity-cell {
        border-bottom: none
        }
    }
@media screen and (max-width: 600px) {
    devsite-activity-list:not(.more-activities) .activities .activity:nth-child(n+13) .activity-cell {
        display: none
        }
    }
@media screen and (max-width: 600px) {
    devsite-activity-list:not(.more-activities) .my-pages-button {
        display: none
        }
    }
devsite-activity-list:not(.more-activities) .more-activities-button {
    display: none;
    margin-block: 20px 30px;
    margin-inline: 0
    }
@media screen and (max-width: 600px) {
    devsite-activity-list:not(.more-activities) .more-activities-button {
        display: block
        }
    }
devsite-activity-list.more-activities .more-activities-button {
    display: none
    }
devsite-activity-list .my-pages-button.button {
    margin-block: 20px 30px;
    margin-inline: 0
    }
devsite-activity-list .empty-sate {
    border-radius: 8px;
    border: var(--devsite-primary-border);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -moz-box-orient: horizontal;
    -moz-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-block: 40px 8px;
    padding-block: 40px;
    padding-inline: 40px
    }
@media screen and (max-width: 840px) {
    devsite-activity-list .empty-sate {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-block: 0;
        padding-inline: 0
        }
    }
@media screen and (max-width: 840px) {
    devsite-activity-list .empty-sate .text-container {
        padding-block: 24px 0;
        padding-inline: 24px
        }
    }
devsite-activity-list .empty-sate .text-container .title {
    font-size: 24px;
    font-family: var(--devsite-headline-font-family);
    display: inline
    }
devsite-activity-list .empty-sate .text-container .getting-started-list {
    counter-reset: steps;
    list-style: none;
    padding-block: 0;
    padding-inline: 0
    }
devsite-activity-list .empty-sate .text-container .getting-started-list li {
    counter-increment: steps;
    font-siwe: 16px;
    margin-block: 24px;
    margin-inline: 0
    }
devsite-activity-list .empty-sate .text-container .getting-started-list li:before {
    border-radius: 50%;
    border: 1px solid #dadce0;
    color: #1e88e5;
    content: counter(steps);
    display: inline-grid;
    font-size: 20px;
    height: 36px;
    line-height: 1.2em;
    -webkit-margin-end: 0.5rem;
    -moz-margin-end: 0.5rem;
    margin-inline-end: 0.5rem;
    place-items: center;
    width: 36px
    }
devsite-activity-list .empty-sate .illustration {
    background: url(../images/activity-list-get-started.gif) no-repeat;
    width: 50%;
    background-size: contain;
    background-position: 100%
    }
@media screen and (max-width: 840px) {
    devsite-activity-list .empty-sate .illustration {
        background-position: top;
        border-top-left-radius: 11px;
        border-top-right-radius: 11px;
        height: calc(58vw - 27px);
        margin-block: -1px;
        margin-inline: -1px;
        width: calc(100% + 2px)
        }
    }
devsite-activity-list .empty-sate-embedded {
    -webkit-margin-before: 0;
    margin-block-start: 0;
    -webkit-margin-start: 0;
    -moz-margin-start: 0;
    margin-inline-start: 0;
    max-width: 715px
    }
@media screen and (max-width: 840px) {
    devsite-activity-list .empty-sate-embedded {
        -webkit-margin-before: 30px;
        margin-block-start: 30px
        }
    }
devsite-activity-list .empty-sate-embedded .title {
    display: block;
    font-family: var(--devsite-headline-font-family);
    font-size: 20px;
    -webkit-margin-after: 10px;
    margin-block-end: 10px
    }
devsite-activity-list .empty-sate-embedded .empty-state-card {
    display: inline-block;
    -webkit-margin-after: 10px;
    margin-block-end: 10px;
    -webkit-margin-end: 24px;
    -moz-margin-end: 24px;
    margin-inline-end: 24px;
    min-height: 0;
    padding-block: 16px;
    padding-inline: 16px;
    width: calc(33% - 18px)
    }
@media screen and (max-width: 600px) {
    devsite-activity-list .empty-sate-embedded .empty-state-card {
        -webkit-margin-after: 10px;
        margin-block-end: 10px;
        padding-block: 10px;
        padding-inline: 16px;
        width: 100%
        }
    }
devsite-activity-list .empty-sate-embedded .empty-state-card:last-child {
    -webkit-margin-end: 0;
    -moz-margin-end: 0;
    margin-inline-end: 0
    }
devsite-activity-list .empty-sate-embedded .empty-state-card .card-icon {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 22px;
    border-radius: 17px;
    border: var(--devsite-primary-border);
    height: 34px;
    -webkit-margin-after: 8px;
    margin-block-end: 8px;
    width: 34px
    }
@media screen and (max-width: 600px) {
    devsite-activity-list .empty-sate-embedded .empty-state-card .card-icon {
        float: left;
        margin-block: 7px 0;
        margin-inline: 0 14px
        }
    }
devsite-activity-list .empty-sate-embedded .empty-state-card.android .card-icon {
    background-image: url(../images/activity-android.png)
    }
devsite-activity-list .empty-sate-embedded .empty-state-card.developers .card-icon {
    background-image: url(../images/activity-other.png)
    }
devsite-activity-list .empty-sate-embedded .empty-state-card.firebase .card-icon {
    background-image: url(../images/activity-firebase.svg);
    background-size: 15px
    }
devsite-activity-list .empty-sate-embedded .empty-state-card .card-title {
    font-size: 16px;
    white-space: nowrap;
    font-family: var(--devsite-headline-font-family)
    }
devsite-activity-list .empty-sate-embedded .empty-state-card .card-domain {
    font-size: 12px;
    color: #202124
    }
devsite-activity-list .compact-subheaders {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-activity-list .mobile-date-updated {
    display: none;
    font-size: 14px;
    -webkit-margin-after: 8px;
    margin-block-end: 8px
    }
devsite-activity-list .mobile-date-updated .mobile-date-separator {
    margin-block: 0;
    margin-inline: 10px
    }
devsite-activity-list .updated-indicator-text {
    color: #3c4043;
    display: none;
    font-size: 14px;
    -webkit-margin-after: 8px;
    margin-block-end: 8px
    }
devsite-activity-list .updated-indicator-text .updated-indicator {
    background-color: #1e88e5;
    border-radius: 5px;
    height: 8px;
    -webkit-margin-end: 7px;
    -moz-margin-end: 7px;
    margin-inline-end: 7px;
    position: relative;
    top: 8px;
    width: 8px
    }
devsite-activity-list .tooltip {
    background-color: #1a73e8;
    border-radius: 10px;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
    color: #fff;
    inset-inline-start: 36px;
    padding-block: 20px 10px;
    padding-inline: 20px;
    position: absolute;
    top: 51px;
    width: 400px;
    z-index: 1
    }
@media screen and (max-width: 600px) {
    devsite-activity-list .tooltip {
        inset-inline-start: 28px;
        max-width: 80vw;
        top: 50px
        }
    }
devsite-activity-list .tooltip .arrow {
    color: #1a73e8;
    font-size: 60px;
    inset-inline-start: 4px;
    position: absolute;
    top: -34px
    }
devsite-activity-list .tooltip .title {
    font-weight: 500;
    font-size: 100% !important;
    font-family: var(--devsite-headline-font-family)
    }
devsite-activity-list .tooltip .button {
    color: #fff;
    float: right;
    -webkit-margin-before: 10px;
    margin-block-start: 10px
    }
devsite-activity-list .tooltip .button:hover {
    background-color: #1a73e8
    }
devsite-activity-list .title-container {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-margin-after: 10px;
    margin-block-end: 10px
    }
devsite-activity-list .title-container .title {
    font-size: 30px;
    line-height: 30px;
    display: inline;
    font-family: var(--devsite-headline-font-family)
    }
devsite-activity-list devsite-info-popout {
    margin-block: 5px;
    margin-inline: 5px;
    position: relative;
    top: 2px;
    z-index: 5
    }
devsite-activity-list .text {
    -webkit-margin-after: 20px;
    margin-block-end: 20px
    }
devsite-activity-list .activities {
    border: var(--devsite-primary-border);
    border-radius: 8px;
    position: relative;
    width: 100%;
    display: table
    }
devsite-activity-list .activities .activity {
    display: table-row
    }
devsite-activity-list .activities .activity .activity-cell {
    border-top: var(--devsite-primary-border);
    display: table-cell;
    min-height: 32px;
    padding-block: 12px;
    padding-inline: 16px;
    vertical-align: middle
    }
devsite-activity-list .activities .activity .activity-cell:last-child {
    -webkit-padding-end: 32px;
    -moz-padding-end: 32px;
    padding-inline-end: 32px
    }
devsite-activity-list .activities .activity:first-child .activity-cell {
    border-top: none
    }
devsite-activity-list .activities .activity:hover .activity-cell {
    background-color: var(--devsite-background-2)
    }
devsite-activity-list .activities .activity.empty-activity {
    font-style: italic;
    font-size: 14px
    }
devsite-activity-list .activities .activity.empty-activity .activity-link {
    -webkit-padding-start: 3px;
    -moz-padding-start: 3px;
    padding-inline-start: 3px
    }
devsite-activity-list .activities .activity.empty-activity .activity-link .activity-text, devsite-activity-list .activities .activity.empty-activity .activity-link .activity-text:hover {
    color: #5f6368;
    -webkit-margin-start: 10px;
    -moz-margin-start: 10px;
    margin-inline-start: 10px
    }
devsite-activity-list .activities .activity.header {
    height: 58px
    }
devsite-activity-list .activities .activity.header .activity-date-changeable {
    display: inline-block;
    cursor: pointer;
    position: relative
    }
devsite-activity-list .activities .activity.header .activity-date-changeable .title-text {
    margin-block: -15px;
    margin-inline: 0;
    padding-block: 15px 15px;
    padding-inline: 0 18px;
    z-index: 2
    }
devsite-activity-list .activities .activity.header .activity-date-changeable:hover:after {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #5f6368;
    content: "arrow_drop_down";
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-family: Material Icons;
    font-size: 22px;
    inset-inline-end: -4px;
    position: absolute;
    top: 3px;
    z-index: 1
    }
devsite-activity-list .activities .activity.header .activity-date-menu {
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color);
    background: var(--devsite-background-1);
    border-radius: 4px;
    inset-inline-start: 0;
    padding-block: 8px;
    padding-inline: 0;
    position: absolute;
    top: 36px;
    z-index: 10
    }
devsite-activity-list .activities .activity.header .activity-date-menu ul {
    list-style: none;
    margin-block: 0;
    margin-inline: 0;
    padding-block: 0;
    padding-inline: 0
    }
devsite-activity-list .activities .activity.header .activity-date-menu ul li {
    color: #3c4043;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-block: 0;
    margin-inline: 0;
    padding-block: 12px 12px;
    padding-inline: 48px 35px;
    white-space: nowrap
    }
devsite-activity-list .activities .activity.header .activity-date-menu ul li:hover {
    background: #f1f3f4
    }
devsite-activity-list .activities .activity.header .activity-date-menu ul li[selected]:before {
    color: #5f6368;
    content: "check";
    font-family: Material Icons;
    font-size: 24px;
    inset-inline-start: 13px;
    position: absolute
    }
devsite-activity-list .activities .activity.header:hover {
    background-color: transparent
    }
devsite-activity-list .activities .activity.header:not(.rated-down-sort):not(.rated-up-sort) .activity-updown:hover .activity-sortable:after, devsite-activity-list .activities .activity.header:not(.title-down-sort):not(.title-up-sort) .activity-link:hover .activity-sortable:after {
    font-family: Material Icons;
    content: "arrow_downward"
    }
devsite-activity-list .activities .activity.header.date-down-sort .activity-date .activity-sortable:after, devsite-activity-list .activities .activity.header.rated-down-sort .activity-updown .activity-sortable:after, devsite-activity-list .activities .activity.header.title-down-sort .activity-link .activity-sortable:after, devsite-activity-list .activities .activity.header.updates-down-sort .activity-updates .activity-sortable:after {
    font-family: Material Icons;
    content: "arrow_downward"
    }
devsite-activity-list .activities .activity.header.date-up-sort .activity-date .activity-sortable:after, devsite-activity-list .activities .activity.header.rated-up-sort .activity-updown .activity-sortable:after, devsite-activity-list .activities .activity.header.title-up-sort .activity-link .activity-sortable:after, devsite-activity-list .activities .activity.header.updates-up-sort .activity-updates .activity-sortable:after {
    font-family: Material Icons;
    content: "arrow_upward"
    }
devsite-activity-list .activities .activity.header .activity-sortable:hover:after {
    background-color: var(--devsite-background-3)
    }
devsite-activity-list .activities .activity.header .activity-sortable {
    cursor: pointer;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 27px;
    margin-block: -5px 0;
    margin-inline: 0 -30px;
    position: relative;
    top: 2px;
    width: 27px
    }
devsite-activity-list .activities .activity.header .activity-sortable:after {
    min-width: 27px;
    max-width: 27px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-height: 27px;
    min-height: 27px;
    font-size: 21px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 20px;
    cursor: pointer
    }
devsite-activity-list .activities .activity.header .activity-cell {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap;
    width: 10%;
    color: #5f6368;
    font-weight: 500
    }
devsite-activity-list .activities .activity.header .activity-bookmarked-container, devsite-activity-list .activities .activity.header .activity-date, devsite-activity-list .activities .activity.header .activity-updates, devsite-activity-list .activities .activity.header .activity-updown {
    width: 5%
    }
@media screen and (max-width: 600px) {
    devsite-activity-list .activities .activity.header .activity-bookmarked-container, devsite-activity-list .activities .activity.header .activity-date, devsite-activity-list .activities .activity.header .activity-updates, devsite-activity-list .activities .activity.header .activity-updown {
        width: 1%
        }
    }
devsite-activity-list .activities .activity.header .activity-link {
    cursor: pointer;
    overflow: visible;
    width: 80%
    }
devsite-activity-list .activities .activity.header .activity-updates-button {
    width: 1%
    }
@media screen and (max-width: 840px) {
    devsite-activity-list .activities .activity.header .activity-updates-button {
        display: none
        }
    }
devsite-activity-list .activities .activity.badge .activity-icon {
    background-image: url(../images/activity-badge.svg)
    }
devsite-activity-list .activities .activity.android .activity-icon {
    background-image: url(../images/activity-android.png)
    }
devsite-activity-list .activities .activity.cloud .activity-icon {
    background-image: url(../images/activity-cloud.png)
    }
devsite-activity-list .activities .activity.bazel .activity-icon {
    background-image: url(../images/activity-bazel.svg)
    }
devsite-activity-list .activities .activity.other .activity-icon {
    background-image: url(../images/activity-other.png)
    }
devsite-activity-list .activities .activity.firebase .activity-icon {
    background-image: url(../images/activity-firebase.svg);
    background-size: 15px
    }
devsite-activity-list .activities .activity:last-child {
    border-bottom: none
    }
devsite-activity-list .activities .activity:last-child .activity-cell:first-child {
    border-bottom-left-radius: 8px;
    overflow: hidden
    }
devsite-activity-list .activities .activity:last-child .activity-cell:last-child {
    border-bottom-right-radius: 8px
    }
devsite-activity-list .activities .activity:first-child .activity-cell:first-child {
    border-top-left-radius: 8px;
    overflow: hidden
    }
devsite-activity-list .activities .activity:first-child .activity-cell:last-child {
    border-top-right-radius: 8px;
    overflow: hidden
    }
devsite-activity-list .activities .activity .activity-icon {
    display: inline-block;
    border: var(--devsite-primary-border);
    border-radius: 20px;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 24px;
    background-color: var(--devsite-background-1);
    position: absolute;
    -webkit-margin-before: 6px;
    margin-block-start: 6px
    }
devsite-activity-list .activities .activity .updated-tag {
    background-color: #e3f2fd;
    color: #1565c0;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    margin-block: -1px;
    margin-inline: 5px;
    padding-block: 1px;
    padding-inline: 8px
    }
devsite-activity-list .activities .activity .activity-notifications-indicator {
    background-color: #1e88e5;
    border-radius: 8px;
    display: none;
    height: 8px;
    inset-inline-end: 0;
    position: absolute;
    top: 0;
    width: 8px
    }
devsite-activity-list .activities .activity .activity-link {
    overflow: hidden;
    white-space: nowrap;
    max-width: 1px
    }
devsite-activity-list .activities .activity .activity-link .activity-text {
    display: block;
    font-size: 14px;
    height: 22px;
    line-height: 22px;
    overflow: hidden;
    padding-block: 0 1px;
    padding-inline: 48px 0;
    text-overflow: ellipsis
    }
devsite-activity-list .activities .activity .activity-link .activity-text:hover {
    color: #174ea6
    }
devsite-activity-list .activities .activity .activity-link .activity-domain {
    color: #5f6368;
    display: block;
    font-size: 14px;
    height: 22px;
    line-height: 22px;
    overflow: hidden;
    padding-block: 0 1px;
    padding-inline: 48px 0;
    text-overflow: ellipsis
    }
devsite-activity-list .activities .activity .activity-link .activity-domain:hover {
    color: #202124
    }
devsite-activity-list .activities .activity .title-text {
    font-size: 14px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    top: 3px;
    position: relative;
    color: #202124;
    font-weight: 500
    }
devsite-activity-list .activities .activity .activity-updates-button .read-more-button {
    color: #1a73e8;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap
    }
devsite-activity-list .activities .activity .activity-updates-button .read-more-button:hover {
    color: #0d47a1;
    text-decoration: underline;
    cursor: pointer
    }
@media screen and (max-width: 840px) {
    devsite-activity-list .activities .activity .activity-updates-button {
        display: none
        }
    }
devsite-activity-list .activities .activity .activity-date, devsite-activity-list .activities .activity .activity-updates {
    font-size: 14px;
    line-height: 22px;
    white-space: nowrap
    }
@media screen and (max-width: 600px) {
    devsite-activity-list .activities .activity .activity-date, devsite-activity-list .activities .activity .activity-updates {
        display: none
        }
    }
devsite-activity-list .activities .activity .activity-bookmarked-container, devsite-activity-list .activities .activity .activity-updown {
    text-align: center
    }
devsite-activity-list .activities .activity .activity-bookmarked {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 20px;
    color: #bdc1c6;
    cursor: pointer;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: 20px;
    height: 32px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-block: -4px;
    margin-inline: -9px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 32px
    }
devsite-activity-list .activities .activity .activity-bookmarked.active {
    color: #1a73e8;
    cursor: pointer;
    pointer-events: all
    }
devsite-activity-list .activities .activity .activity-bookmarked.unsaved {
    color: #669df6
    }
devsite-activity-list .activities .activity .activity-bookmarked:hover {
    background-color: var(--devsite-background-3)
    }
devsite-activity-list .activities .activity .activity-bookmarked[hidden] {
    display: inline-block !important;
    opacity: 0
    }
devsite-activity-list .activities .activity .activity-updown .activity-downvoted, devsite-activity-list .activities .activity .activity-updown .activity-upvoted {
    display: inline-block;
    color: #bdc1c6;
    font-size: 20px;
    line-height: 24px
    }
@media screen and (max-width: 600px) {
    devsite-activity-list .mobile-date-updated, devsite-activity-list .updated-indicator-text {
        display: -webkit-inline-box;
        display: -webkit-inline-flex;
        display: -moz-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex
        }
    devsite-activity-list .activities .header {
        visibility: collapse
        }
    devsite-activity-list .activities .header .title-text {
        font-size: 1px
        }
    devsite-activity-list .activities .activity .activity-notifications-indicator {
        display: inline-block
        }
    devsite-activity-list .activities .activity .activity-cell {
        -webkit-padding-end: 8px;
        -moz-padding-end: 8px;
        padding-inline-end: 8px;
        -webkit-padding-start: 8px;
        -moz-padding-start: 8px;
        padding-inline-start: 8px
        }
    devsite-activity-list .activities .activity .activity-cell:last-child {
        -webkit-padding-end: 16px;
        -moz-padding-end: 16px;
        padding-inline-end: 16px
        }
    devsite-activity-list .activities .activity .activity-cell:first-child {
        -webkit-padding-start: 16px;
        -moz-padding-start: 16px;
        padding-inline-start: 16px
        }
    devsite-activity-list:not([embedded]) .activities .activity .activity-updates-button {
        display: none
        }
    }
devsite-activity-list[embedded] .updated-indicator-text {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex
    }
devsite-activity-list[embedded] .activities .activity:nth-child(3) .activity-cell {
    border-top: none
    }
devsite-activity-list[embedded] .activities .activity.header {
    visibility: collapse
    }
devsite-activity-list[embedded] .activities .activity.header .activity-cell {
    width: 0
    }
devsite-activity-list[embedded] .activities .activity.header .activity-cell.activity-link {
    width: 100%
    }
devsite-activity-list[embedded] .activities .activity.header .title-text {
    font-size: 1px
    }
devsite-activity-list[embedded] .activities .activity:nth-child(3) .activity-cell:first-child {
    border-top-left-radius: 8px;
    overflow: hidden
    }
devsite-activity-list[embedded] .activities .activity:nth-child(3) .activity-cell:last-child {
    border-top-right-radius: 8px;
    overflow: hidden
    }
devsite-activity-list[embedded] .activities .activity .activity-cell {
    -webkit-padding-end: 8px;
    -moz-padding-end: 8px;
    padding-inline-end: 8px;
    -webkit-padding-start: 8px;
    -moz-padding-start: 8px;
    padding-inline-start: 8px
    }
devsite-activity-list[embedded] .activities .activity .activity-cell .updated-tag {
    display: none
    }
devsite-activity-list[embedded] .activities .activity .activity-cell:last-child {
    -webkit-padding-end: 16px;
    -moz-padding-end: 16px;
    padding-inline-end: 16px
    }
devsite-activity-list[embedded] .activities .activity .activity-cell:first-child {
    -webkit-padding-start: 16px;
    -moz-padding-start: 16px;
    padding-inline-start: 16px
    }
devsite-activity-list[embedded] .activities .activity .activity-link .activity-domain {
    display: none
    }
devsite-activity-list[embedded] .activities .activity .activity-icon {
    margin-block: -5px;
    margin-inline: 0
    }
devsite-activity-list[embedded] .activities .activity .activity-updates-button {
    display: none
    }
devsite-activity-list[embedded] .activities .activity .activity-date, devsite-activity-list[embedded] .activities .activity .activity-updates {
    font-size: 12px
    }
devsite-activity-list[embedded] .activities .activity .activity-notifications-indicator {
    display: inline-block
    }
@keyframes badgeGrowIn {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
        } to {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
        }
    }
@keyframes badgeGrowOut {
    0% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
        } to {
        -webkit-transform: scale(1);
        transform: scale(1)
        }
    }
@keyframes badgeFadeIn {
    0% {
        opacity: 0
        } 12% {
        opacity: 0
        } 87% {
        opacity: 100%
        }
    }
@keyframes counterHide {
    0% {
        opacity: 0
        } to {
        opacity: 0
        }
    }
devsite-badge {
    display: block
    }
devsite-badge .badge {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    padding: 12px;
    max-width: 125px;
    min-width: 125px;
    min-height: 170px;
    border: var(--devsite-primary-border);
    border-radius: 8px;
    background-color: #fff;
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s
    }
devsite-badge .badge .badge-icon {
    width: 75px;
    height: 75px;
    margin-bottom: 5px
    }
devsite-badge .badge .badge-icon img {
    opacity: 1;
    -webkit-transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1)
    }
devsite-badge .badge .favorite-indicator {
    position: absolute;
    top: 3px;
    left: 3px;
    color: #bdc1c6;
    height: 24px;
    width: 24px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-badge .badge .favorite-indicator .favorite-indicator-icon {
    font-size: 16px
    }
devsite-badge .badge .favorite-indicator .favorite-indicator-text {
    position: absolute;
    border-radius: 2px;
    top: 27px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    white-space: nowrap;
    font-size: 10px;
    color: #fff;
    background: #3c4043;
    padding: 0 9px;
    weight: 500
    }
devsite-badge .badge .favorite-indicator:hover .favorite-indicator-text {
    opacity: 0.73
    }
devsite-badge .badge.dragged {
    opacity: 0.5;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing
    }
devsite-badge .badge.dragged[draggable=true]:hover .drag-indicator {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
    display: none
    }
devsite-badge .badge .drag-indicator {
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    position: absolute;
    top: 3px;
    left: 3px;
    color: #5f6368;
    height: 24px;
    width: 24px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
    border-radius: 12px
    }
devsite-badge .badge .drag-indicator:hover {
    background: #f1f3f4
    }
devsite-badge .badge .drag-indicator .drag-indicator-text {
    position: absolute;
    border-radius: 2px;
    top: 27px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    white-space: nowrap;
    font-size: 10px;
    color: #fff;
    background: #3c4043;
    padding: 0 9px;
    weight: 500
    }
devsite-badge .badge .drag-indicator:hover .drag-indicator-text {
    opacity: 0.73
    }
devsite-badge .badge .drag-indicator .drag-indicator-icon {
    font-size: 16px
    }
devsite-badge .badge[draggable=true]:hover .drag-indicator {
    opacity: 1;
    pointer-events: unset
    }
devsite-badge .badge .badge-icon-counter {
    font-size: 11.5px;
    padding: 0 7px
    }
@media screen and (max-width: 600px) {
    devsite-badge .badge.empty {
        display: none
        }
    }
devsite-badge .badge.active, devsite-badge .badge:not(.empty):hover:not(:active) {
    cursor: pointer;
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 1px 3px 1px var(--devsite-elevation-ambient-shadow-color);
    border-color: transparent
    }
devsite-badge .badge .badge-meta {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center
    }
devsite-badge .badge .badge-icon {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative
    }
devsite-badge .badge .badge-title {
    font-weight: 500;
    color: #3c4043;
    font-family: var(--devsite-headline-font-family);
    font-size: 11.5px;
    line-height: 16px;
    padding-bottom: 6px
    }
devsite-badge .badge .badge-date {
    color: #5f6368;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.4px
    }
devsite-badge .badge .badge-controls {
    position: absolute;
    right: 3px;
    top: 3px
    }
devsite-badge .badge .badge-controls .toggle {
    color: #3c4043;
    cursor: pointer;
    height: 24px;
    min-width: 0;
    width: 24px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 12px 0;
    border-radius: 12px
    }
devsite-badge .badge .badge-controls .toggle .material-icons {
    font-size: 16px
    }
devsite-badge .badge .badge-controls .toggle.active, devsite-badge .badge .badge-controls .toggle:hover {
    background: #f1f3f4
    }
devsite-badge .badge .badge-controls .toggle:focus {
    text-decoration: none
    }
devsite-badge .badge .badge-controls .badge-controls-menu {
    background: var(--devsite-background-1);
    border-radius: 4px;
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color);
    padding: 8px 0;
    position: absolute;
    right: 0;
    top: 25px;
    z-index: 10
    }
devsite-badge .badge .badge-controls .badge-controls-menu ul {
    list-style: none;
    margin: 0;
    padding: 0
    }
devsite-badge .badge .badge-controls .badge-controls-menu ul li {
    margin: 0;
    padding: 0
    }
devsite-badge .badge .badge-controls .badge-controls-menu ul li a {
    color: #3c4043;
    font-size: 14px;
    line-height: 20px;
    padding: 8px 16px;
    white-space: nowrap
    }
devsite-badge .badge .badge-controls .badge-controls-menu ul li a:hover {
    background: #f1f3f4
    }
devsite-badge .badge-icon.loading .badge-icon-counter {
    display: none
    }
devsite-badge .badge-icon.loading devsite-spinner {
    top: 7px;
    width: 60px;
    height: 60px;
    z-index: 1000;
    position: absolute
    }
devsite-badge .badge-icon.loading img {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0)
    }
devsite-badge .badge {
    margin: 0 22px 22px 0
    }
devsite-badge .badge.incomplete {
    -webkit-filter: grayscale(1);
    filter: grayscale(1)
    }
devsite-badge .invisible {
    opacity: 0
    }
devsite-badge .fadeout {
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s
    }
devsite-badge .fadein {
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s
    }
devsite-badge .devsite-badge-summary--header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    border-bottom: 1px solid #dadce0
    }
@media screen and (max-width: 840px) {
    devsite-badge .devsite-badge-summary--header {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: column-reverse;
        -moz-box-orient: vertical;
        -moz-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
        }
    }
devsite-badge .devsite-badge-summary--badge-info {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -moz-box-flex: 1;
    -ms-flex: auto;
    flex: auto;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 0 50px 0 min(200px, 10vw)
    }
devsite-badge .devsite-badge-summary--badge-info .award-date {
    text-transform: uppercase;
    font-family: Roboto, Noto Sans, Noto Sans JP, Noto Sans KR, Noto Naskh Arabic, Noto Sans Thai, Noto Sans Hebrew, Noto Sans Bengali, sans-serif;
    font-size: 12px;
    color: #3c4043;
    line-height: 20px;
    letter-spacing: 0.8px;
    margin: 0 0 7px;
    font-weight: 500;
    min-height: 20px
    }
devsite-badge .devsite-badge-summary--badge-info .award-title {
    font-size: 32px;
    color: #202124;
    letter-spacing: 0;
    line-height: 40px;
    margin: 0 0 10px
    }
devsite-badge .devsite-badge-summary--badge-info .award-description {
    font-size: 16px;
    color: #202124;
    letter-spacing: 0;
    text-align: center;
    line-height: 24px;
    margin: 0
    }
devsite-badge .devsite-badge-summary--badge-info .award-sharing {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 8px;
    height: 20px
    }
devsite-badge .devsite-badge-summary--badge-info .award-sharing .share-text {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-align: end
    }
devsite-badge .devsite-badge-summary--badge-info .award-sharing span {
    margin: 0 16px 0 0;
    font-size: 16px;
    line-height: 20px
    }
devsite-badge .devsite-badge-summary--badge-info .award-sharing img {
    width: 18px
    }
devsite-badge .devsite-badge-summary--badge-info .award-sharing button {
    border: 0;
    padding: 0;
    height: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 0
    }
devsite-badge .devsite-badge-summary--badge-image {
    max-width: min(815px, 44vw);
    min-width: min(815px, 44vw);
    min-height: min(400px, 23vw);
    max-height: min(400px, 23vw);
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    background-image: url(../images/badge-landing-background.svg);
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-transition: -webkit-filter 1s;
    transition: -webkit-filter 1s;
    transition: filter 1s;
    transition: filter 1s, -webkit-filter 1s
    }
@media screen and (max-width: 840px) {
    devsite-badge .devsite-badge-summary--badge-image {
        max-width: 100%;
        max-height: 200px;
        background-size: 100%;
        background-position: top;
        margin-bottom: 20px
        }
    }
devsite-badge .devsite-badge-summary--badge-image.incomplete .badge-icon {
    -webkit-filter: grayscale(1);
    filter: grayscale(1)
    }
devsite-badge .devsite-badge-summary--badge-image .award-count {
    padding: 5px 12px;
    font-size: 17px;
    border-radius: 19px;
    color: #fff;
    font-weight: 500;
    background-color: #1976d2;
    position: absolute;
    z-index: 11;
    margin-top: 150px;
    box-shadow: 0 4px 8px 3px rgba(60, 64, 67, 0.149), 0 1px 3px 0 rgba(60, 64, 67, 0.302)
    }
devsite-badge .devsite-badge-summary--content {
    position: relative;
    z-index: 10;
    padding-top: 26px
    }
devsite-badge .devsite-badge-summary--badge-image .badge-icon {
    width: 194px;
    height: 194px;
    margin: 26px;
    position: relative;
    z-index: 2;
    -webkit-animation: badgeGrowIn 0.33s cubic-bezier(0.75, 0, 0.71, 0.97), badgeGrowOut 0.17s cubic-bezier(0.85, -0.14, 0.83, 0.83) 0.33s, badgeFadeIn 0.5s linear;
    animation: badgeGrowIn 0.33s cubic-bezier(0.75, 0, 0.71, 0.97), badgeGrowOut 0.17s cubic-bezier(0.85, -0.14, 0.83, 0.83) 0.33s, badgeFadeIn 0.5s linear;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
    }
@keyframes bounce {
    0% {
        opacity: 0;
        -webkit-transform: scale(.2);
        transform: scale(.2)
        } 50% {
        opacity: 1;
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
        } to {
        -webkit-transform: scale(1);
        transform: scale(1)
        }
    }
devsite-badge .devsite-badge-summary--badge-image .badge-icon.paused {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0)
    }
devsite-badge .badge-animation {
    position: absolute;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 400px 400px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    pointer-events: none
    }
devsite-badge .spinner {
    margin: 100px 0 50px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-badge .devsite-badge-summary--earn-more-badges, devsite-badge .devsite-badge-summary--ways-to-earn {
    padding: 0 min(200px, 10vw) 26px
    }
devsite-badge .devsite-badge-summary--earn-more-badges h3, devsite-badge .devsite-badge-summary--ways-to-earn h3 {
    font-size: 20px;
    color: #3c4043;
    letter-spacing: 0.1px;
    line-height: 24px;
    margin: 0
    }
devsite-badge .devsite-badge-summary--earn-more-badges h3 i.material-icons, devsite-badge .devsite-badge-summary--ways-to-earn h3 i.material-icons {
    color: #1a73e8
    }
devsite-badge .devsite-badge-summary--awarded-by {
    padding: 0 min(200px, 10vw) 0
    }
devsite-badge .devsite-badge-summary--awarded-by ul {
    margin: 0;
    padding: 0;
    list-style: none
    }
devsite-badge .devsite-badge-summary--awarded-by ul li {
    margin: 0;
    padding: 0
    }
devsite-badge .devsite-badge-summary--awarded-by .earn-badge, devsite-badge .devsite-badge-summary--awarded-by .earned-badge {
    display: none
    }
devsite-badge .devsite-badge-summary--awarded-by.has-badge .earned-badge {
    display: inline
    }
devsite-badge .devsite-badge-summary--awarded-by.needs-badge .earn-badge {
    display: inline
    }
devsite-badge .devsite-badge-summary--awarded-by .devsite-badge-summary--card {
    border: var(--devsite-primary-border);
    border-radius: 4px;
    margin-bottom: 30px
    }
devsite-badge .devsite-badge-summary--awarded-by .devsite-badge-summary--card h4 {
    font-size: 22px;
    font-weight: 400;
    color: #202124;
    letter-spacing: 0;
    line-height: 28px;
    margin: 0;
    padding: 24px 24px 4px
    }
devsite-badge .devsite-badge-summary--awarded-by .devsite-badge-summary--card p {
    margin: 0;
    padding: 4px 24px 24px
    }
devsite-badge .devsite-badge-summary--awarded-by .devsite-badge-summary--card-buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding: 0 24px 24px
    }
devsite-badge .devsite-badge-summary--awarded-by .devsite-badge-summary--card-buttons .button {
    font-size: 14px
    }
devsite-badge .devsite-badge-summary--sub-badges-details {
    padding: 26px min(200px, 10vw) 0
    }
devsite-card {
    visibility: hidden
    }
devsite-card[ready] {
    visibility: visible
    }
devsite-catalog-profiles .loading {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 36px 0
    }
devsite-catalog-profiles p {
    margin: 0
    }
devsite-catalog-profiles .no-results {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 64px 0;
    gap: 8px;
    opacity: 0.5
    }
devsite-catalog-profiles .profile-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 22px
    }
devsite-catalog-profiles .profile-cards-controls {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px
    }
@media screen and (max-width: 1253px) {
    devsite-catalog-profiles .profile-cards-grid {
        grid-template-columns: 1fr 1fr
        }
    }
@media screen and (max-width: 600px) {
    devsite-catalog-profiles .profile-cards-grid {
        grid-template-columns: 1fr
        }
    }
devsite-catalog-profiles .transparent {
    opacity: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
    }
devsite-catalog-profiles .profile-card {
    border-radius: 8px;
    border: var(--devsite-primary-border);
    padding: 32px 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center
    }
devsite-catalog-profiles .profile-card-image, devsite-catalog-profiles .profile-card-image-placeholder {
    width: 118px;
    height: 118px;
    border-radius: 118px
    }
devsite-catalog-profiles .profile-card-image-placeholder {
    background: var(--devsite-background-5)
    }
devsite-catalog-profiles .profile-card-name {
    font-family: var(--devsite-headline-font-family);
    font-size: 24px;
    line-height: 32px;
    color: var(--devsite-secondary-color);
    margin-top: 20px
    }
devsite-catalog-profiles .profile-card-details, devsite-catalog-profiles .profile-card-location {
    font-family: var(--devsite-primary-font-family);
    font-size: 16px;
    line-height: 24px
    }
devsite-catalog-profiles .profile-card-location {
    color: #3c4043;
    margin-top: 8px
    }
devsite-catalog-profiles .profile-card-details {
    color: var(--devsite-secondary-color);
    margin-top: 8px;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
    }
devsite-catalog-profiles .profile-card-button {
    margin-top: 20px
    }
devsite-collection:not(:defined) {
    visibility: hidden
    }
devsite-collection:defined {
    visibility: visible
    }
.devsite-collection-dialog {
    --devsite-heading-text-align: start
    }
.devsite-collection-dialog .devsite-dialog-contents .form-inputs {
    display: grid;
    gap: 36px
    }
.devsite-collection-dialog .devsite-dialog-buttons {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding-block: 0 16px;
    padding-inline: 16px
    }
devsite-collection-list:not(:defined) {
    visibility: hidden
    }
devsite-collection-list:defined {
    visibility: visible
    }
.devsite-collection-create-dialog {
    --devsite-heading-text-align: start
    }
.devsite-collection-create-dialog .form-inputs {
    display: grid;
    gap: 36px
    }
.devsite-collection-create-dialog .devsite-dialog-buttons {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding-block: 0 16px;
    padding-inline: 16px
    }
.devsite-edit-dialog {
    max-height: 75vh;
    width: 708px;
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
    }
@media screen and (max-width: 600px) {
    .devsite-edit-dialog {
        max-height: calc(100vh - 32px)
        }
    }
.devsite-edit-dialog .devsite-dialog-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    padding: 20px 24px;
    position: relative;
    border-bottom: var(--devsite-primary-border)
    }
.devsite-edit-dialog .devsite-dialog-header .devsite-dialog-close {
    position: absolute;
    top: 10px;
    right: 10px
    }
.devsite-edit-dialog devsite-avatar {
    position: relative;
    height: 74px;
    width: 74px
    }
.devsite-edit-dialog devsite-avatar .photo-selector {
    height: 74px;
    width: 74px
    }
.devsite-edit-dialog devsite-avatar .photo-selector-loading, .devsite-edit-dialog devsite-avatar .photo-selector-mini {
    right: 0;
    bottom: 0;
    height: 32px;
    width: 32px;
    left: unset;
    font-size: 16px
    }
.devsite-edit-dialog devsite-avatar .photo-selector-dropdown {
    top: 68px;
    right: unset
    }
.devsite-edit-dialog devsite-avatar .photo-selector-dropdown button {
    white-space: nowrap;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-flow: row;
    flex-flow: row;
    margin-right: 25px
    }
.devsite-edit-dialog .devsite-dialog-header .devsite-edit-profile-title {
    -webkit-padding-start: 16px;
    -moz-padding-start: 16px;
    padding-inline-start: 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center
    }
.devsite-edit-dialog .devsite-dialog-header .devsite-edit-profile-title h2 {
    margin: 0;
    -webkit-margin-before: 5px;
    margin-block-start: 5px
    }
.devsite-edit-dialog .profile-visibility {
    display: block
    }
.devsite-edit-dialog .profile-visibility-tag {
    color: var(--devsite-secondary-text-color);
    font-size: 14px;
    font-weight: 500;
    padding: 0 6px;
    display: inline-block;
    white-space: nowrap;
    background-color: var(--devsite-background-3);
    height: 20px;
    -webkit-margin-end: 8px;
    -moz-margin-end: 8px;
    margin-inline-end: 8px;
    -webkit-margin-after: 5px;
    margin-block-end: 5px
    }
.devsite-edit-dialog .profile-visibility-tag .material-symbols-outlined {
    font-size: 14px;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
    top: 2px;
    position: relative;
    -webkit-margin-end: 3px;
    -moz-margin-end: 3px;
    margin-inline-end: 3px
    }
.devsite-edit-dialog .devsite-dialog-contents {
    padding: 3px 24px 20px;
    overflow-y: auto
    }
.devsite-edit-dialog .profile-edit-section-title {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 500;
    margin: 17px 0
    }
.devsite-edit-dialog devsite-edit-profile {
    margin: 0
    }
.devsite-edit-dialog .profile-visibility-text {
    display: inline-block;
    -webkit-margin-end: 5px;
    -moz-margin-end: 5px;
    margin-inline-end: 5px
    }
.devsite-edit-dialog .profile-visibility a {
    white-space: nowrap;
    display: inline-block
    }
.devsite-edit-dialog .devsite-dialog-footer {
    padding: 24px;
    border-top: var(--devsite-primary-border);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
.devsite-edit-dialog .devsite-dialog-footer devsite-spinner {
    -webkit-margin-start: 16px;
    -moz-margin-start: 16px;
    margin-inline-start: 16px
    }
.devsite-badge-delete-modal h4 {
    -webkit-margin-before: 0;
    margin-block-start: 0;
    -webkit-margin-after: 10px;
    margin-block-end: 10px;
    font-family: var(--devsite-heading-font)
    }
.devsite-badge-delete-modal .devsite-dialog-buttons {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding-block: 8px 16px;
    padding-inline: 0 16px
    }
.devsite-badge-delete-modal .devsite-dialog-contents-warning {
    font-size: 12px;
    -webkit-margin-before: 8px;
    margin-block-start: 8px
    }
.devsite-badge-delete-modal .devsite-dialog-contents-warning .warning-icon {
    font-size: 15px;
    position: relative;
    inset-block-start: 3px;
    -webkit-margin-end: 7px;
    -moz-margin-end: 7px;
    margin-inline-end: 7px;
    color: #5f6368
    }
.devsite-profile-banner {
    color: var(--devsite-note-notice-color);
    background-color: var(--devsite-note-notice-background);
    font-family: Roboto, Noto Sans, Noto Sans JP, Noto Sans KR, Noto Naskh Arabic, Noto Sans Thai, Noto Sans Hebrew, Noto Sans Bengali, sans-serif;
    font-size: 14px;
    letter-spacing: 0.2px;
    line-height: 20px;
    padding-block: 12px;
    padding-inline: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
.devsite-profile-banner .material-icons {
    direction: unset;
    font-size: 18px;
    margin-block: 0;
    margin-inline: 8px
    }
devsite-profile {
    --container-width: 1440px;
    --container-padding: 40px;
    --badge-description-text-color: #3c4043
    }
.devsite-badges-dialog {
    --badge-sharing-text-color: #5f6368
    }
devsite-profile {
    display: block
    }
devsite-profile .profile-container {
    margin-block: 0;
    margin-inline: auto;
    max-width: var(--container-width, 1440px);
    padding: 40px var(--container-padding, 40px) var(--container-padding, 40px);
    width: 100%;
    background: url(../images/profile_header.svg) 270px 0 no-repeat;
    background-size: auto 72px
    }
devsite-profile .profile--error, devsite-profile .profile--loading {
    padding-block: 60px;
    padding-inline: 0
    }
devsite-profile .profile-view {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
    }
devsite-profile .profile-view .badge {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    padding: 12px;
    max-width: 125px;
    min-width: 125px;
    min-height: 170px;
    border: var(--devsite-primary-border);
    border-radius: 8px;
    background-color: #fff;
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s
    }
devsite-profile .profile-view .badge .badge-icon {
    width: 75px;
    height: 75px;
    margin-bottom: 5px
    }
devsite-profile .profile-view .badge .badge-icon img {
    opacity: 1;
    -webkit-transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1)
    }
devsite-profile .profile-view .badge .favorite-indicator {
    position: absolute;
    top: 3px;
    left: 3px;
    color: #bdc1c6;
    height: 24px;
    width: 24px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-profile .profile-view .badge .favorite-indicator .favorite-indicator-icon {
    font-size: 16px
    }
devsite-profile .profile-view .badge .favorite-indicator .favorite-indicator-text {
    position: absolute;
    border-radius: 2px;
    top: 27px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    white-space: nowrap;
    font-size: 10px;
    color: #fff;
    background: #3c4043;
    padding: 0 9px;
    weight: 500
    }
devsite-profile .profile-view .badge .favorite-indicator:hover .favorite-indicator-text {
    opacity: 0.73
    }
devsite-profile .profile-view .badge.dragged {
    opacity: 0.5;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing
    }
devsite-profile .profile-view .badge.dragged[draggable=true]:hover .drag-indicator {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
    display: none
    }
devsite-profile .profile-view .badge .drag-indicator {
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    position: absolute;
    top: 3px;
    left: 3px;
    color: #5f6368;
    height: 24px;
    width: 24px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
    border-radius: 12px
    }
devsite-profile .profile-view .badge .drag-indicator:hover {
    background: #f1f3f4
    }
devsite-profile .profile-view .badge .drag-indicator .drag-indicator-text {
    position: absolute;
    border-radius: 2px;
    top: 27px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    white-space: nowrap;
    font-size: 10px;
    color: #fff;
    background: #3c4043;
    padding: 0 9px;
    weight: 500
    }
devsite-profile .profile-view .badge .drag-indicator:hover .drag-indicator-text {
    opacity: 0.73
    }
devsite-profile .profile-view .badge .drag-indicator .drag-indicator-icon {
    font-size: 16px
    }
devsite-profile .profile-view .badge[draggable=true]:hover .drag-indicator {
    opacity: 1;
    pointer-events: unset
    }
devsite-profile .profile-view .badge .badge-icon-counter {
    font-size: 11.5px;
    padding: 0 7px
    }
@media screen and (max-width: 600px) {
    devsite-profile .profile-view .badge.empty {
        display: none
        }
    }
devsite-profile .profile-view .badge.active, devsite-profile .profile-view .badge:not(.empty):hover:not(:active) {
    cursor: pointer;
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 1px 3px 1px var(--devsite-elevation-ambient-shadow-color);
    border-color: transparent
    }
devsite-profile .profile-view .badge .badge-meta {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center
    }
devsite-profile .profile-view .badge .badge-icon {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative
    }
devsite-profile .profile-view .badge .badge-title {
    font-weight: 500;
    color: #3c4043;
    font-family: var(--devsite-headline-font-family);
    font-size: 11.5px;
    line-height: 16px;
    padding-bottom: 6px
    }
devsite-profile .profile-view .badge .badge-date {
    color: #5f6368;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.4px
    }
devsite-profile .profile-view .badge .badge-controls {
    position: absolute;
    right: 3px;
    top: 3px
    }
devsite-profile .profile-view .badge .badge-controls .toggle {
    color: #3c4043;
    cursor: pointer;
    height: 24px;
    min-width: 0;
    width: 24px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 12px 0;
    border-radius: 12px
    }
devsite-profile .profile-view .badge .badge-controls .toggle .material-icons {
    font-size: 16px
    }
devsite-profile .profile-view .badge .badge-controls .toggle.active, devsite-profile .profile-view .badge .badge-controls .toggle:hover {
    background: #f1f3f4
    }
devsite-profile .profile-view .badge .badge-controls .toggle:focus {
    text-decoration: none
    }
devsite-profile .profile-view .badge .badge-controls .badge-controls-menu {
    background: var(--devsite-background-1);
    border-radius: 4px;
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color);
    padding: 8px 0;
    position: absolute;
    right: 0;
    top: 25px;
    z-index: 10
    }
devsite-profile .profile-view .badge .badge-controls .badge-controls-menu ul {
    list-style: none;
    margin: 0;
    padding: 0
    }
devsite-profile .profile-view .badge .badge-controls .badge-controls-menu ul li {
    margin: 0;
    padding: 0
    }
devsite-profile .profile-view .badge .badge-controls .badge-controls-menu ul li a {
    color: #3c4043;
    font-size: 14px;
    line-height: 20px;
    padding: 8px 16px;
    white-space: nowrap
    }
devsite-profile .profile-view .badge .badge-controls .badge-controls-menu ul li a:hover {
    background: #f1f3f4
    }
devsite-profile .profile-view .badge-icon.loading .badge-icon-counter {
    display: none
    }
devsite-profile .profile-view .badge-icon.loading devsite-spinner {
    top: 7px;
    width: 60px;
    height: 60px;
    z-index: 1000;
    position: absolute
    }
devsite-profile .profile-view .badge-icon.loading img {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0)
    }
devsite-profile .profile-view .profile-info-container-wrapper {
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-block: 72px 48px;
    margin-inline: 0 min(9vw, 130px);
    width: 342px
    }
devsite-profile .profile-view .profile-info-container-wrapper .profile-info-container:not(:empty) {
    border: 1px solid #dadce0;
    border-radius: 8px
    }
devsite-profile .profile-view .devsite-profile-feedback-button {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 0;
    color: #5f6368;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 12px;
    padding-block: 0;
    padding-inline: 0
    }
devsite-profile .profile-view .devsite-profile-feedback-button .material-icons {
    inset-block-start: auto;
    margin-block: 0;
    margin-inline: 4px
    }
devsite-profile .profile-view .devsite-profile-feedback-button:active, devsite-profile .profile-view .devsite-profile-feedback-button:hover {
    background: none;
    box-shadow: none
    }
devsite-profile .profile-view .profile-details {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-margin-after: 12px;
    margin-block-end: 12px
    }
devsite-profile .profile-view .profile-details a {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    color: #3c4043;
    line-height: 20px
    }
devsite-profile .profile-view .profile-bio, devsite-profile .profile-view .profile-experiencelevel, devsite-profile .profile-view .profile-links, devsite-profile .profile-view .profile-location, devsite-profile .profile-view .profile-name, devsite-profile .profile-view .profile-stats {
    color: #3c4043;
    font-size: 14px;
    line-height: 20px;
    padding-block: 2px 6px;
    padding-inline: 24px;
    word-break: break-word
    }
devsite-profile .profile-view .profile-bio h4, devsite-profile .profile-view .profile-experiencelevel h4, devsite-profile .profile-view .profile-links h4, devsite-profile .profile-view .profile-location h4, devsite-profile .profile-view .profile-name h4, devsite-profile .profile-view .profile-stats h4 {
    color: #202124;
    font-size: 12px;
    font-weight: 500;
    margin-block: 0 6px;
    margin-inline: 0;
    text-transform: uppercase
    }
devsite-profile .profile-view .profile-bio p, devsite-profile .profile-view .profile-experiencelevel p, devsite-profile .profile-view .profile-links p, devsite-profile .profile-view .profile-location p, devsite-profile .profile-view .profile-name p, devsite-profile .profile-view .profile-stats p {
    margin-block: 0 12px;
    margin-inline: 0
    }
devsite-profile .profile-view .profile-location-empty-location, devsite-profile .profile-view .profile-location-warning {
    color: #d93025;
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    margin-block: 4px;
    margin-inline: 16px
    }
devsite-profile .profile-view .profile-name {
    padding-block: 24px;
    padding-inline: 24px;
    text-align: center
    }
devsite-profile .profile-view .profile-name h2 {
    color: #202124;
    font-size: 32px;
    font-weight: 400;
    line-height: 40px;
    margin-block: 0;
    margin-inline: 0;
    word-break: break-word
    }
devsite-profile .profile-view .profile-name h3 {
    color: #202124;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin-block: 0;
    margin-inline: 0;
    word-break: break-word
    }
devsite-profile .profile-view .profile-name h4 {
    font-family: var(--devsite-headline-font-family);
    font-size: 14px;
    color: #202124;
    line-height: 24px;
    text-transform: none;
    word-break: break-word
    }
devsite-profile .profile-view .bull {
    padding-block: 0;
    padding-inline: 4px
    }
devsite-profile .profile-container--signin {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-profile .profile-info-top {
    height: 65px;
    inset-block-start: -65px;
    position: relative
    }
devsite-profile .profile-info-top .edit-profile {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: url(../images/icons/settings.svg) no-repeat 50%;
    border-radius: 16px;
    border: 0;
    color: #5f6368;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    float: right;
    height: 36px;
    inset-block-start: 65px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-block: 12px;
    margin-inline: 12px;
    padding-block: 0;
    padding-inline: 0;
    position: relative;
    text-indent: -3000em;
    width: 36px;
    z-index: 2
    }
devsite-profile .profile-info-top .edit-profile:hover {
    background-color: #f1f3f4
    }
devsite-profile .profile-info-top .edit-profile:active, devsite-profile .profile-info-top .edit-profile:focus {
    box-shadow: none
    }
devsite-profile .profile-info-top .profile-avatar {
    position: relative
    }
devsite-profile .profile-info-top .profile-avatar .profile-avatar {
    background-color: var(--devsite-background-1);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 50%;
    border: var(--devsite-primary-border);
    display: block;
    height: 130px;
    margin-block: 0;
    margin-inline: auto;
    width: 130px
    }
devsite-profile .profile-info-top .profile-avatar devsite-avatar {
    height: 130px;
    margin-block: 0;
    margin-inline: auto;
    width: 130px
    }
devsite-profile .profile-view .profile-badges-container {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1
    }
devsite-profile .profile-view .profile-badges-container h2 {
    color: #202124;
    font-size: 28px;
    line-height: 36px;
    margin-block: 0;
    margin-inline: 0
    }
devsite-profile .profile-view .profile-badges-container h3 {
    color: #202124;
    font-size: 24px;
    line-height: 32px;
    margin-block: 0;
    margin-inline: 0
    }
devsite-profile .profile-view .profile-badges-container[busy] .badge-controls {
    display: none
    }
devsite-profile .profile-view .profile-badges-container .badge-grid {
    display: grid;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -moz-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    grid-auto-flow: row;
    grid-gap: 22px min(26px, 1.8vw);
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    margin-block: 24px;
    margin-inline: 0
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case {
    -webkit-padding-before: 4px;
    padding-block-start: 4px;
    position: relative
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case.show-dropzone .drop-zone {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.5s, visibility 0;
    transition: opacity 0.5s, visibility 0
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .drop-zone {
    background: #fff;
    box-shadow: 0 0 10px 10px #fff;
    inset-block-start: 0;
    inset-inline-end: 0;
    inset-inline-start: 0;
    opacity: 0;
    padding-block: 20px 20px;
    padding-inline: 20px 0;
    position: fixed;
    -webkit-transition: opacity 0.5s, visibility 0.5s;
    transition: opacity 0.5s, visibility 0.5s;
    visibility: hidden;
    z-index: 10
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .drop-zone .badge {
    max-width: 125px;
    min-width: 125px;
    min-height: 170px;
    max-height: 170px
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .drop-zone .badge.empty .badge-icon:not(.loading) {
    height: 60px;
    width: 60px
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .badge-icon-counter {
    padding-block: 1px;
    padding-inline: 9px;
    font-size: 14px
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .badge-icon.loading devsite-spinner {
    height: 91px;
    inset-block-start: 11px;
    width: 91px
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .profile-trophy-case-helper {
    inset-block-start: 2px;
    -webkit-margin-start: 10px;
    -moz-margin-start: 10px;
    margin-inline-start: 10px;
    position: relative
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .profile-trophy-case-helper .info-icon {
    font-size: 17px
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .badge-grid {
    border-bottom: 1px solid #dadce0;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
    -webkit-padding-after: 50px;
    padding-block-end: 50px
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .badge[visibility=PROMOTED] {
    max-width: 156px;
    min-width: 156px;
    padding-block: 20px;
    padding-inline: 20px
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .badge[visibility=PROMOTED] .favorite-indicator {
    display: none
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .badge[pending] .badge-icon {
    -webkit-transform: scale(0);
    transform: scale(0)
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .badge[pending] .badge-icon devsite-spinner {
    display: none
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .badge[pending] .badge-meta {
    opacity: 0;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0)
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .badge[pending] .badge-controls {
    opacity: 0
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .badge-icon {
    height: 110px;
    -webkit-margin-after: 8px;
    margin-block-end: 8px;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 0.16s cubic-bezier(0.4, 0, 1, 1);
    transition: -webkit-transform 0.16s cubic-bezier(0.4, 0, 1, 1);
    transition: transform 0.16s cubic-bezier(0.4, 0, 1, 1);
    transition: transform 0.16s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.16s cubic-bezier(0.4, 0, 1, 1);
    width: 114px
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .badge-icon img {
    -webkit-transition: opacity 0.16s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.16s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.16s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.16s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.16s cubic-bezier(0.4, 0, 1, 1), transform 0.16s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.16s cubic-bezier(0.4, 0, 1, 1), transform 0.16s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.16s cubic-bezier(0.4, 0, 1, 1)
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case.dragging .badge.empty {
    box-shadow: 0 4px 8px 3px #e8f0fe, 0 1px 3px 0 #d2e3fc
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .badge.empty {
    -webkit-transition: box-shadow 0.5s;
    transition: box-shadow 0.5s;
    box-shadow: 0 4px 8px 3px transparent, 0 1px 3px 0 transparent
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .badge.empty.drop-target {
    background-color: #e8f0fe;
    border: 2px solid #1a73e8
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .badge.empty .badge-meta {
    color: rgba(0, 0, 0, 0.12);
    pointer-events: none
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .badge.empty .badge-icon:not(.loading) {
    background: none;
    border-radius: 50px;
    border: 2px dashed #dadce0;
    height: 94px;
    -webkit-margin-after: 17px;
    margin-block-end: 17px;
    -webkit-margin-before: 9px;
    margin-block-start: 9px;
    pointer-events: none;
    width: 94px
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .badge.empty .badge-icon.loading {
    -webkit-margin-after: 11px;
    margin-block-end: 11px;
    pointer-events: none
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .badge.empty .badge-title {
    color: #bdc1c6
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .badge-meta {
    font-size: 13px;
    line-height: 20px;
    opacity: 1;
    -webkit-transform: translatez(0);
    transform: translatez(0);
    -webkit-transition: opacity 0.16s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.16s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.16s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.16s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.16s cubic-bezier(0.4, 0, 1, 1), transform 0.16s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.16s cubic-bezier(0.4, 0, 1, 1), transform 0.16s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.16s cubic-bezier(0.4, 0, 1, 1)
    }
devsite-profile .profile-view .profile-badges-container .profile-trophy-case .badge-controls {
    opacity: 1;
    -webkit-transition: opacity 0.16s cubic-bezier(0.4, 0, 1, 1);
    transition: opacity 0.16s cubic-bezier(0.4, 0, 1, 1)
    }
devsite-profile .profile-view .profile-badges-container .profile-no-badges {
    -webkit-margin-before: 72px;
    margin-block-start: 72px
    }
devsite-profile .profile-view .profile-badges-container .profile-no-badges p {
    color: #202124;
    font-family: var(--devsite-headline-font-family);
    font-size: 22px;
    line-height: 28px;
    margin-block: 0 8px;
    margin-inline: 0
    }
devsite-profile .profile-view .profile-badges-container .profile-no-badges .profile-no-badges-img {
    background-image: url(../images/no-badges.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    height: 360px;
    margin-block: 0;
    margin-inline: auto
    }
devsite-profile .profile-view .profile-badges-container .badge .badge-controls-menu a {
    display: none
    }
devsite-profile .profile-view .profile-badges-container .badge .badge-controls-menu a:focus, devsite-profile .profile-view .profile-badges-container .badge .badge-controls-menu a:hover {
    text-decoration: none
    }
devsite-profile .profile-view .profile-badges-container .badges-trophy-case--add em {
    color: #3c4043;
    display: none;
    font-size: 11px;
    line-height: 20px
    }
devsite-profile .profile-view .profile-badges-container[trophy-case--full] .badges-trophy-case--add {
    cursor: default;
    opacity: 0.5
    }
devsite-profile .profile-view .profile-badges-container[trophy-case--full] .badges-trophy-case--add em {
    display: block
    }
devsite-profile .profile-view .profile-badges-container .profile-badges {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-padding-before: 16px;
    padding-block-start: 16px
    }
devsite-profile .profile-view .profile-badges-container .profile-badges devsite-expandable {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0;
    -moz-box-flex: 1;
    -ms-flex: 1 0;
    flex: 1 0
    }
devsite-profile .profile-view .profile-badges-container .profile-badges devsite-expandable .expandable-heading {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -moz-box-orient: horizontal;
    -moz-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
    }
devsite-profile .profile-view .profile-badges-container .profile-badges devsite-expandable .expandable-heading .header-text-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 12px
    }
devsite-profile .profile-view .profile-badges-container .profile-badges devsite-expandable a.exw-control > .showalways:before {
    color: var(--devsite-secondary-text-color);
    content: "expand_more";
    margin-inline: 16px 0
    }
devsite-profile .profile-view .profile-badges-container .profile-badges devsite-expandable[expanded] a.exw-control > .showalways:before {
    content: "expand_less"
    }
devsite-profile .profile-view .profile-badges-container .profile-badges .favorite-indicator {
    display: none
    }
devsite-profile .profile-view .profile-badges-container .profile-badges .all-badges-heading {
    display: inline-block
    }
devsite-profile .profile-view .profile-badges-container .profile-badges.incomplete-badges {
    border-bottom: var(--devsite-primary-border);
    -webkit-margin-after: 25px;
    margin-block-end: 25px;
    -webkit-padding-after: 25px;
    padding-block-end: 25px
    }
devsite-profile .profile-view .profile-badges-container .profile-badges.incomplete-badges img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
    }
devsite-profile .profile-view .profile-badges-container .profile-badges.hidden-badges {
    border-top: var(--devsite-primary-border);
    -webkit-margin-before: 18px;
    margin-block-start: 18px;
    -webkit-padding-before: 32px;
    padding-block-start: 32px
    }
devsite-profile .profile-view .profile-badges-container .badge[visibility=INCOMPLETE] .badges--delete {
    display: block
    }
devsite-profile .profile-view .profile-badges-container .badge[visibility=PUBLIC] .badges--delete, devsite-profile .profile-view .profile-badges-container .badge[visibility=PUBLIC] .badges--hide, devsite-profile .profile-view .profile-badges-container .badge[visibility=PUBLIC] .badges-trophy-case--add {
    display: block
    }
devsite-profile .profile-view .profile-badges-container .badge[visibility=PRIVATE] .badges--delete, devsite-profile .profile-view .profile-badges-container .badge[visibility=PRIVATE] .badges--unhide {
    display: block
    }
devsite-profile .profile-view .profile-badges-container .badge[visibility=PROMOTED] .badges--delete, devsite-profile .profile-view .profile-badges-container .badge[visibility=PROMOTED] .badges--hide, devsite-profile .profile-view .profile-badges-container .badge[visibility=PROMOTED] .badges-trophy-case--remove {
    display: block
    }
devsite-profile .profile-view .profile-badges-container .badge[visibility=PROMOTED] .favorite-indicator {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-profile .profile-edit .profile-info-container {
    position: relative
    }
devsite-profile .profile-edit .profile-spinner {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -moz-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    background: hsla(0, 0%, 100%, 0.8);
    border-radius: 0 0 6px 6px;
    display: none;
    inset-block-end: 0;
    inset-block-start: 70px;
    inset-inline-end: 0;
    inset-inline-start: 0;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-block: 24px;
    padding-inline: 24px;
    position: absolute;
    z-index: 100000
    }
devsite-profile .profile-edit.profile-saving .profile-avatar-desc {
    background: #fff
    }
devsite-profile .profile-edit.profile-saving .profile-spinner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-profile .profile-edit .profile-avatar-desc {
    background: #f1f3f4;
    border-bottom: 1px solid #dadce0;
    border-radius: 8px 8px 0 0;
    padding-block: 0;
    padding-inline: 24px
    }
devsite-profile .profile-edit .profile-avatar-desc h4 {
    font-size: 12px;
    color: #202124
    }
devsite-profile .profile-edit .profile-avatar-desc h4 .devsite-avatar-tooltip {
    color: #5f6368;
    cursor: pointer;
    font-size: 16px;
    margin-block: 0;
    margin-inline: 8px
    }
devsite-profile .profile-edit .profile-avatar-desc p {
    color: #3c4043;
    font-size: 14px;
    line-height: 20px;
    margin-block: 0;
    margin-inline: 0
    }
devsite-profile .profile-edit .profile-avatar-desc hr {
    margin-block: 0 24px;
    margin-inline: 0
    }
devsite-profile .profile-edit .profile-avatar-desc .profile-visibility {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-padding-after: 24px;
    padding-block-end: 24px
    }
devsite-profile .profile-edit .profile-avatar-desc .profile-visibility .profile-visibility-icon {
    width: 38px;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0
    }
devsite-profile .profile-edit .profile-avatar-desc .profile-visibility .material-icons {
    color: #5f6368
    }
devsite-profile .profile-edit .profile-avatar-desc .profile-visibility h4 {
    font-size: 16px;
    margin-block: 1px 0;
    margin-inline: 0
    }
devsite-profile .profile-edit .profile-avatar-desc .profile-visibility p {
    margin-block: 0;
    margin-inline: 0
    }
devsite-profile .profile-edit .profile-editable-section {
    padding-block: 24px 0;
    padding-inline: 24px
    }
devsite-profile .profile-edit .profile-editable-section h4 {
    margin-block: 0 16px;
    margin-inline: 0
    }
devsite-profile .profile-edit .profile-editable-section .error-message {
    color: #d93025;
    font-size: 12px;
    -webkit-margin-after: -24px;
    margin-block-end: -24px
    }
devsite-profile .profile-edit .profile-edit-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-padding-after: 32px;
    padding-block-end: 32px
    }
devsite-profile .profile-edit .profile-edit-row:last-child {
    -webkit-padding-after: 0;
    padding-block-end: 0
    }
devsite-profile .profile-edit .profile-edit-row devsite-mwc {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
    }
devsite-profile .profile-edit .profile-edit-row .profile-edit-help-text {
    color: #5f6368;
    font-size: 12px;
    line-height: 16px;
    margin-block: 4px;
    margin-inline: 16px
    }
devsite-profile .profile-edit .profile-editable-controls {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding-block: 24px;
    padding-inline: 24px
    }
devsite-profile .profile-edit .profile-editable-controls mwc-button {
    margin-block: 0;
    margin-inline: 8px
    }
devsite-profile .icon {
    background-position: 50%;
    background-repeat: no-repeat;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 24px;
    -webkit-margin-end: 8px;
    -moz-margin-end: 8px;
    margin-inline-end: 8px;
    width: 24px
    }
devsite-profile .location-icon {
    background-image: url(../images/icons/location.svg)
    }
devsite-profile .github-icon {
    background-image: url(../images/icons/github.svg)
    }
devsite-profile .gitlab-icon {
    background-image: url(../images/icons/gitlab.svg)
    }
devsite-profile .linkedin-icon {
    background-image: url(../images/icons/linkedin.svg)
    }
devsite-profile .stackoverflow-icon {
    background-image: url(../images/icons/stackoverflow.svg)
    }
devsite-profile .twitter-icon {
    background-image: url(../images/icons/twitter.svg)
    }
devsite-profile .star-icon {
    background-image: url(../images/icons/star.svg)
    }
devsite-profile .page-icon {
    background-image: url(../images/icons/page.svg)
    }
devsite-profile .rating-icon {
    background-image: url(../images/icons/rating.svg)
    }
devsite-profile .calendar-icon {
    background-image: url(../images/icons/calendar.svg)
    }
devsite-profile .profile-information, devsite-profile .profile-privacy {
    border-top: 1px solid #dadce0;
    padding: 20px 0 2px
    }
devsite-profile .profile-vanityid a {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 22px;
    border: var(--devsite-button-border, 0);
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    gap: 8px;
    line-height: 32px;
    padding-block: 0;
    padding-inline: 15px
    }
devsite-profile .profile-vanityid a .material-icons {
    font-size: 18px;
    pointer-events: none
    }
devsite-profile .profile-vanityid a:active, devsite-profile .profile-vanityid a:focus, devsite-profile .profile-vanityid a:hover {
    text-decoration: none
    }
devsite-profile .profile-privacy {
    font-size: 14px;
    padding-block: 18px;
    padding-inline: 24px
    }
devsite-profile .profile-privacy .material-icons {
    color: #5f6368;
    direction: unset;
    -webkit-margin-end: 8px;
    -moz-margin-end: 8px;
    margin-inline-end: 8px
    }
devsite-profile .profile-information-toggle {
    display: none
    }
@media screen and (max-width: 1024px) {
    devsite-profile .profile-view {
        background-position: 0 0
        }
    devsite-profile .profile-view .profile-info-container-wrapper {
        -webkit-margin-end: 24px;
        -moz-margin-end: 24px;
        margin-inline-end: 24px
        }
    devsite-profile .profile-view .profile-badges-container .badge-grid {
        grid-template-columns: 1fr 1fr 1fr
        }
    devsite-profile .profile-view .profile-badges-container .badge-grid .badge {
        margin-block: 0;
        margin-inline: auto
        }
    devsite-profile .profile-view .profile-badges-container .profile-trophy-case .badge-grid {
        grid-template-columns: 1fr 1fr
        }
    }
@media screen and (max-width: 840px) {
    devsite-profile .profile-view {
        background-position: top;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
        }
    devsite-profile .profile-view .profile-info-container-wrapper {
        margin-block: 72px 0;
        margin-inline: auto;
        width: 100%
        }
    devsite-profile .profile-view .profile-badges-container {
        -webkit-margin-before: 40px;
        margin-block-start: 40px;
        width: 100%
        }
    devsite-profile .profile-view .profile-badges-container .badge-grid {
        grid-template-columns: 1fr 1fr 1fr
        }
    devsite-profile .profile-view .profile-badges-container .profile-trophy-case .badge-grid {
        grid-template-columns: 1fr 1fr
        }
    devsite-profile .profile-information-toggle {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border-radius: 0 0 7px 7px;
        border-top: 1px solid #dadce0;
        border: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding-block: 28px;
        padding-inline: 16px;
        width: 100%
        }
    devsite-profile .profile-information-toggle:active, devsite-profile .profile-information-toggle:focus, devsite-profile .profile-information-toggle:hover {
        border: 0;
        border-top: 1px solid #dadce0;
        box-shadow: none;
        background: none
        }
    devsite-profile .profile-information-toggle i {
        content: "keyboard_arrow_down";
        font-size: 20px;
        height: auto;
        inset-block-start: 0;
        margin-block: 0;
        margin-inline: 0;
        padding-block: 0;
        padding-inline: 0;
        width: auto
        }
    devsite-profile .profile-information {
        display: none
        }
    devsite-profile .profile-information-expanded .profile-information {
        display: block;
        border-top: 1px solid #dadce0
        }
    devsite-profile .profile-information-expanded .profile-information-toggle i {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
        }
    }
@media screen and (max-width: 600px) {
    devsite-profile .profile-view .profile-badges-container .badge-grid {
        grid-template-columns: 1fr 1fr
        }
    }
devsite-profile .profile-badges-sort {
    float: right;
    position: relative
    }
@media screen and (max-width: 600px) {
    devsite-profile .profile-badges-sort {
        display: none
        }
    }
devsite-profile .profile-badges-sort devsite-select {
    -webkit-margin-start: 10px;
    -moz-margin-start: 10px;
    margin-inline-start: 10px;
    z-index: 90
    }
devsite-profile .profile-badges-sort devsite-select[menu--open] .devsite-select-toggle {
    background: transparent;
    cursor: default
    }
devsite-profile .profile-badges-sort .devsite-select-toggle {
    border: none;
    height: 36px;
    -webkit-padding-end: 38px;
    -moz-padding-end: 38px;
    padding-inline-end: 38px;
    z-index: 93
    }
devsite-profile .profile-badges-sort .devsite-select-toggle-label {
    font-size: 16px
    }
devsite-profile .profile-badges-sort .devsite-icon-arrow-drop-down:before {
    content: "import_export";
    font-size: 25px
    }
devsite-profile .profile-badges-sort .devsite-select-list {
    -webkit-margin-before: -40px;
    margin-block-start: -40px;
    min-width: 130px;
    -webkit-padding-before: 40px;
    padding-block-start: 40px;
    z-index: 92
    }
devsite-profile .profile-badges-sort .devsite-select-item {
    -webkit-padding-start: 40px;
    -moz-padding-start: 40px;
    padding-inline-start: 40px;
    position: relative
    }
devsite-profile .profile-badges-sort .devsite-select .devsite-select-item[data-selected] {
    background-color: transparent
    }
devsite-profile .profile-badges-sort .devsite-select .devsite-select-item[data-selected]:before {
    content: "done";
    font-family: Material Icons;
    font-size: 18px;
    inset-inline-start: 12px;
    position: absolute
    }
devsite-profile[path=settings] .profile-container {
    background: url(../images/profile_settings_header.svg) 100% 0 no-repeat;
    background-size: auto 72px
    }
devsite-profile .profile-settings {
    max-width: 708px;
    margin-block: 0;
    margin-inline: auto;
    padding-block: 40px;
    padding-inline: 0
    }
devsite-profile .profile-settings hr {
    margin-block: 40px;
    margin-inline: 0
    }
devsite-profile .profile-settings devsite-selector {
    -webkit-margin-before: 0;
    margin-block-start: 0;
    border: 0
    }
devsite-profile .profile-settings devsite-selector devsite-tabs {
    --devsite-tab-marker-position-x: 0;
    --devsite-border: #dadce0;
    --devsite-tab-marker-border-radius: 0;
    border-bottom: 1px solid var(--devsite-border)
    }
devsite-profile .profile-settings devsite-selector devsite-tabs tab {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-profile .profile-settings devsite-selector devsite-tabs tab a {
    max-width: 100%;
    width: 100%
    }
devsite-profile .profile-settings devsite-selector > section[active] {
    padding-block: 16px;
    padding-inline: 0
    }
devsite-profile .profile-settings devsite-selector h4, devsite-profile .profile-settings devsite-selector > section > :first-child:not(:empty):not(aside):not(devsite-code):not(table):not(.devsite-table-wrapper):not([class^=github-]) {
    -webkit-margin-before: 16px;
    margin-block-start: 16px;
    -webkit-margin-after: 24px;
    margin-block-end: 24px
    }
devsite-profile .profile-settings h4 {
    font-family: var(--devsite-headline-font-family);
    font-size: 18px;
    line-height: 24px;
    font-weight: 400
    }
devsite-profile .profile-settings h5 {
    margin-block: 0;
    margin-inline: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--devsite-secondary-text-color)
    }
devsite-profile .devsite-profile-settings-options {
    border: 1px solid #dadce0;
    border-radius: 8px;
    padding-block: 8px;
    padding-inline: 24px;
    margin-block: 0 24px;
    margin-inline: 0
    }
devsite-profile .devsite-profile-settings-options .devsite-profile-settings-options--label {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin-block: 16px;
    margin-inline: 0
    }
devsite-profile .devsite-profile-settings-options p {
    margin-block: 0;
    margin-inline: 0;
    font-size: 14px;
    color: var(--devsite-secondary-text-color);
    line-height: 20px
    }
devsite-profile .devsite-profile-settings-options .devsite-profile-settings-options--option-text {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1
    }
devsite-profile .devsite-profile-settings-options .devsite-profile-settings-options--option-input {
    max-width: 116px;
    -webkit-margin-start: 24px;
    -moz-margin-start: 24px;
    margin-inline-start: 24px;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    -webkit-padding-before: 6px;
    padding-block-start: 6px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
    }
devsite-profile .devsite-profile-settings-controls {
    -webkit-margin-before: 24px;
    margin-block-start: 24px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
    }
devsite-profile .devsite-profile-settings-controls .profile-account-save, devsite-profile .devsite-profile-settings-controls .profile-settings-save {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-profile .devsite-profile-settings-controls .profile-account-save devsite-spinner, devsite-profile .devsite-profile-settings-controls .profile-settings-save devsite-spinner {
    -webkit-margin-start: 8px;
    -moz-margin-start: 8px;
    margin-inline-start: 8px
    }
devsite-profile .devsite-profile-settings-interests {
    margin-block: 0 24px;
    margin-inline: 0
    }
devsite-profile p.devsite-profile-settings-terms {
    font-size: 12px;
    color: var(--devsite-secondary-text-color);
    line-height: 16px
    }
devsite-profile p.devsite-profile-settings-heading-summary {
    font-size: 14px;
    color: var(--devsite-secondary-text-color);
    line-height: 20px;
    -webkit-margin-before: -16px;
    margin-block-start: -16px
    }
devsite-profile .devsite-profile-settings-vanityid-container {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
    }
devsite-profile .devsite-profile-settings-vanityid-container.disabled {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
    }
devsite-profile .devsite-profile-settings-vanityid-container.disabled .devsite-profile-settings-vanityid-available, devsite-profile .devsite-profile-settings-vanityid-container.disabled .devsite-profile-settings-vanityid-invalid, devsite-profile .devsite-profile-settings-vanityid-container.disabled .devsite-profile-settings-vanityid-requirements, devsite-profile .devsite-profile-settings-vanityid-container.disabled .devsite-profile-settings-vanityid-unavailable, devsite-profile .devsite-profile-settings-vanityid-container.disabled devsite-mwc {
    opacity: 0.23;
    -webkit-transition: opacity 0.233s;
    transition: opacity 0.233s
    }
devsite-profile .devsite-profile-settings-vanityid-container.wait .devsite-profile-settings-vanityid-container-field .devsite-profile-settings-vanityid-wait {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-container-field {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
    }
devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-container-field devsite-spinner {
    display: none;
    -webkit-transition: opacity 0.233s ease;
    transition: opacity 0.233s ease
    }
devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-container-field devsite-spinner.show {
    display: block
    }
devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-container-field devsite-mwc {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-right: 8px;
    max-width: 346px
    }
devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-container-field .devsite-profile-settings-vanityid-status {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    pointer-events: all
    }
devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-container-field .devsite-profile-settings-vanityid-available, devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-container-field .devsite-profile-settings-vanityid-invalid, devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-container-field .devsite-profile-settings-vanityid-unavailable, devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-container-field .devsite-profile-settings-vanityid-wait {
    display: none;
    font-size: 24px;
    color: #34a853;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
    }
devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-container-field .devsite-profile-settings-vanityid-available .material-icons, devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-container-field .devsite-profile-settings-vanityid-invalid .material-icons, devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-container-field .devsite-profile-settings-vanityid-unavailable .material-icons, devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-container-field .devsite-profile-settings-vanityid-wait .material-icons {
    font-size: 24px
    }
devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-container-field .devsite-profile-settings-vanityid-available.show, devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-container-field .devsite-profile-settings-vanityid-invalid.show, devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-container-field .devsite-profile-settings-vanityid-unavailable.show, devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-container-field .devsite-profile-settings-vanityid-wait.show {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-container-field .devsite-profile-settings-vanityid-available {
    color: #34a853
    }
devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-container-field .devsite-profile-settings-vanityid-invalid {
    color: #d93025
    }
devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-container-field .devsite-profile-settings-vanityid-wait {
    font-family: Roboto;
    font-style: normal;
    font-size: 12px;
    line-height: 16px;
    color: #5f6368
    }
devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-container-field .devsite-profile-settings-vanityid-wait .message {
    -webkit-margin-start: 8px;
    -moz-margin-start: 8px;
    margin-inline-start: 8px;
    background: #f8f9fa;
    border: 1px solid #dadce0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 4px;
    padding-block: 4px;
    padding-inline: 8px
    }
devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-container-field .devsite-profile-settings-vanityid-unavailable {
    color: #e37400
    }
devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-container-field .devsite-profile-settings-vanityid-unavailable .message {
    background: hsla(46, 94%, 94%, 0.5);
    border: 1px solid #fde293;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 4px;
    padding-block: 4px;
    padding-inline: 8px;
    -webkit-margin-start: 8px;
    -moz-margin-start: 8px;
    margin-inline-start: 8px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px
    }
devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-requirements {
    color: #5f6368;
    max-width: 294px;
    font-family: Roboto;
    font-size: 12px;
    line-height: 16px;
    margin-block: 0;
    margin-inline: 12px;
    display: block
    }
devsite-profile .devsite-profile-settings-vanityid-container .devsite-profile-settings-vanityid-requirements.invalid {
    color: #d93025
    }
devsite-profile .profile-delete-profile, devsite-profile .profile-delete-profile:hover {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #ea4335;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-margin-before: 8px;
    margin-block-start: 8px
    }
devsite-profile .profile-delete-profile .material-icons, devsite-profile .profile-delete-profile:hover .material-icons {
    inset-block-start: auto
    }
devsite-profile devsite-profile-interests .devsite-profile-interests-container {
    -webkit-margin-before: 0;
    margin-block-start: 0
    }
devsite-profile .profile-not-found {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 400px;
    max-width: 936px;
    margin-block: 0;
    margin-inline: auto;
    width: 100%;
    padding-block: 0;
    padding-inline: 40px
    }
devsite-profile .profile-not-found .profile-not-found-cell {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-basis: calc(50% - 18px);
    -ms-flex-preferred-size: calc(50% - 18px);
    flex-basis: calc(50% - 18px);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-profile .profile-not-found h2 {
    margin-block: 0;
    margin-inline: 0;
    padding-block: 0;
    padding-inline: 0
    }
devsite-profile .profile-not-found .profile-not-found-img {
    background-image: url(../images/profile_not_found.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%
    }
.devsite-badges-dialog .badge-icon .badge-icon-counter {
    padding-block: 5px;
    padding-inline: 12px;
    font-size: 17px
    }
.devsite-badges-dialog .badge-icon .badge-icon-counter, .profile-badges-container .badge-icon .badge-icon-counter {
    border-radius: 19px;
    color: #fff;
    font-weight: 500;
    background-color: #1976d2;
    position: absolute;
    inset-block-end: 0;
    box-shadow: 0 4px 8px 3px rgba(60, 64, 67, 0.149), 0 1px 3px 0 rgba(60, 64, 67, 0.302)
    }
.devsite-badges-dialog {
    margin-block: 16px;
    margin-inline: 16px;
    max-width: 410px;
    position: relative;
    background-color: #fff
    }
.devsite-badges-dialog .badge-sub-badges-container {
    position: relative
    }
.devsite-badges-dialog .badge-sub-badges-container .badge-sub-badges-spinner-container {
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
    inset-block-start: 0;
    -webkit-padding-before: 43px;
    padding-block-start: 43px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
    }
.devsite-badges-dialog .devsite-badges-dialog-helper {
    -webkit-margin-start: 10px;
    -moz-margin-start: 10px;
    margin-inline-start: 10px;
    inset-block-start: 3px;
    position: relative
    }
.devsite-badges-dialog .devsite-badges-dialog-helper .info-icon {
    font-size: 15px
    }
.devsite-badges-dialog .devsite-badges-dialog-helper .info-popout-container {
    inset-inline-start: -140px;
    max-width: 300px
    }
.devsite-badges-dialog.is-squad-badge:before {
    background-image: url(../images/squad_badge_card_header.svg)
    }
.devsite-badges-dialog:before {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: #fff url(../images/badge_card_header.svg) 0 0 no-repeat;
    background-size: contain
    }
.devsite-badges-dialog .devsite-badges-dialog-contents, .devsite-badges-dialog .devsite-badges-dialog-footer, .devsite-badges-dialog .devsite-dialog-buttons {
    position: relative
    }
@media screen and (max-width: 600px) {
    .devsite-badges-dialog .devsite-dialog-buttons {
        position: fixed;
        inset-inline-end: 23px;
        z-index: 10
        }
    .devsite-badges-dialog .devsite-badges-dialog-contents {
        -webkit-margin-before: 35px;
        margin-block-start: 35px
        }
    }
.devsite-badges-dialog.badge-incomplete .badge-icon {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
    }
.devsite-badges-dialog .badge-date, .devsite-badges-dialog .badge-icon, .devsite-badges-dialog .badge-title {
    text-align: center
    }
.devsite-badges-dialog .badge-title {
    font-family: Google Sans, Noto Sans, Noto Sans JP, Noto Sans KR, Noto Naskh Arabic, Noto Sans Thai, Noto Sans Hebrew, Noto Sans Bengali, sans-serif;
    font-size: 22px;
    color: #202124;
    line-height: 28px;
    -webkit-padding-after: 4px;
    padding-block-end: 4px
    }
.devsite-badges-dialog .badge-date {
    text-transform: uppercase;
    font-family: Roboto, Noto Sans, Noto Sans JP, Noto Sans KR, Noto Naskh Arabic, Noto Sans Thai, Noto Sans Hebrew, Noto Sans Bengali, sans-serif;
    font-size: 12px;
    color: var(--badge-date-text-color);
    line-height: 20px;
    letter-spacing: 0.8px;
    margin-block: 0 7px;
    margin-inline: 0;
    font-weight: 500
    }
.devsite-badges-dialog .devsite-badges-dialog-contents {
    padding-block: 0;
    padding-inline: 13px
    }
.devsite-badges-dialog .badge-sub-badges[show] .badge-sub-badges-line {
    opacity: 1
    }
.devsite-badges-dialog .badge-next, .devsite-badges-dialog .badge-sub-badges {
    margin-block: 20px 0;
    margin-inline: 0;
    border: 1px solid #dadce0;
    border-radius: 4px
    }
.devsite-badges-dialog .badge-next .badge-next-info, .devsite-badges-dialog .badge-sub-badges .badge-next-info {
    inset-block-start: 3px;
    inset-inline-start: 5px;
    position: relative
    }
.devsite-badges-dialog .badge-next .badge-next-info .info-popout-container, .devsite-badges-dialog .badge-sub-badges .badge-next-info .info-popout-container {
    inset-inline-start: -50px;
    max-width: 300px
    }
.devsite-badges-dialog .badge-next .badge-next-header, .devsite-badges-dialog .badge-next .badge-sub-badges-header, .devsite-badges-dialog .badge-sub-badges .badge-next-header, .devsite-badges-dialog .badge-sub-badges .badge-sub-badges-header {
    font-weight: 700;
    border-bottom: 1px solid #dadce0;
    padding-block: 11px;
    padding-inline: 16px;
    position: relative
    }
.devsite-badges-dialog .badge-next .badge-sub-badges-line, .devsite-badges-dialog .badge-sub-badges .badge-sub-badges-line {
    padding-block: 11px;
    padding-inline: 16px;
    border-bottom: 1px solid #dadce0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s
    }
.devsite-badges-dialog .badge-next .badge-sub-badges-line:last-child, .devsite-badges-dialog .badge-sub-badges .badge-sub-badges-line:last-child {
    border-bottom: none
    }
.devsite-badges-dialog .badge-next .badge-sub-badges-line.empty, .devsite-badges-dialog .badge-sub-badges .badge-sub-badges-line.empty {
    border-bottom: none;
    min-height: 43px
    }
.devsite-badges-dialog .badge-next .badge-sub-badges-line.empty:last-child, .devsite-badges-dialog .badge-sub-badges .badge-sub-badges-line.empty:last-child {
    min-height: 42px
    }
.devsite-badges-dialog .badge-next .badge-sub-badges-link, .devsite-badges-dialog .badge-sub-badges .badge-sub-badges-link {
    word-break: keep-all;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-padding-end: 10px;
    -moz-padding-end: 10px;
    padding-inline-end: 10px
    }
.devsite-badges-dialog .badge-next .badge-sub-badges-completed, .devsite-badges-dialog .badge-sub-badges .badge-sub-badges-completed {
    color: #80868b;
    white-space: nowrap
    }
.devsite-badges-dialog .badge-next .badge-next-stat-label, .devsite-badges-dialog .badge-sub-badges .badge-next-stat-label {
    padding-block: 11px;
    padding-inline: 16px;
    display: inline-block
    }
.devsite-badges-dialog .badge-next .badge-next-stat-value, .devsite-badges-dialog .badge-sub-badges .badge-next-stat-value {
    border-left: 1px solid #dadce0;
    -webkit-margin-start: -1px;
    -moz-margin-start: -1px;
    margin-inline-start: -1px;
    padding-block: 11px;
    padding-inline: 16px;
    display: inline-block
    }
.devsite-badges-dialog .badge-icon {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-margin-after: 24px;
    margin-block-end: 24px
    }
.devsite-badges-dialog .badge-icon .icon {
    width: 180px;
    height: 180px
    }
.devsite-badges-dialog .badge-description {
    padding-block: 6px 32px;
    padding-inline: 0;
    text-align: center;
    color: var(--badge-description-text-color)
    }
.devsite-badges-dialog .badge-community-info {
    gap: 10px;
    color: var(--devsite-note-notice-color);
    background-color: var(--devsite-note-notice-background);
    padding: 10px 18px;
    font-size: 14px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    border-radius: 4px
    }
.devsite-badges-dialog .badge-community-info .material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48
    }
.devsite-badges-dialog .devsite-badges-dialog-footer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-block: 20px 0;
    margin-inline: -8px;
    padding-block: 10px;
    padding-inline: 20px
    }
@media screen and (max-width: 600px) {
    .devsite-badges-dialog .devsite-badges-dialog-footer {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-flow: row wrap;
        -moz-box-orient: horizontal;
        -moz-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap
        }
    .devsite-badges-dialog .devsite-badges-dialog-footer .devsite-badge-details-button {
        -webkit-box-flex: 0;
        -webkit-flex: 0 1 100%;
        -moz-box-flex: 0;
        -ms-flex: 0 1 100%;
        flex: 0 1 100%;
        -webkit-margin-after: 20px;
        margin-block-end: 20px
        }
    }
.devsite-badges-dialog .devsite-badges-dialog-footer .devsite-badge-details-button:hover {
    background-color: #bbdefb
    }
.devsite-badges-dialog .devsite-badges-dialog-footer .share-text {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-align: end
    }
.devsite-badges-dialog .devsite-badges-dialog-footer span {
    margin-block: 0;
    margin-inline: 16px;
    font-size: 14px;
    color: var(--badge-sharing-text-color);
    line-height: 20px
    }
.devsite-badges-dialog .devsite-badges-dialog-footer img {
    width: 18px
    }
.devsite-badges-dialog .devsite-badges-dialog-footer button {
    border: 0;
    padding-block: 0;
    padding-inline: 0;
    height: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 0
    }
.devsite-badges-dialog .devsite-badges-dialog-footer a:active, .devsite-badges-dialog .devsite-badges-dialog-footer a:focus, .devsite-badges-dialog .devsite-badges-dialog-footer a:hover, .devsite-badges-dialog .devsite-badges-dialog-footer button:active, .devsite-badges-dialog .devsite-badges-dialog-footer button:focus, .devsite-badges-dialog .devsite-badges-dialog-footer button:hover {
    text-decoration: none;
    background: none
    }
.devsite-badges-dialog .devsite-badges-dialog-footer .material-icons {
    color: var(--badge-sharing-text-color);
    direction: unset;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-margin-start: 12px;
    -moz-margin-start: 12px;
    margin-inline-start: 12px
    }
@media screen and (max-width: 600px) {
    devsite-profile {
        --container-padding: 16px
        }
    devsite-profile .profile-not-found {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-block: 0;
        padding-inline: 0
        }
    devsite-profile .profile-not-found .profile-not-found-cell {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center
        }
    devsite-profile .profile-not-found .profile-not-found-img {
        height: 250px
        }
    }
.devsite-profile-confirm-vanityid-dialog h3, .devsite-profile-delete-confirmation-dialog h3 {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: left
    }
.devsite-profile-confirm-vanityid-dialog p, .devsite-profile-delete-confirmation-dialog p {
    font-size: 14px;
    line-height: 20px
    }
.devsite-profile-confirm-vanityid-dialog .devsite-profile-confirm-vanityid-dialog-tip, .devsite-profile-delete-confirmation-dialog .devsite-profile-confirm-vanityid-dialog-tip {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: Roboto, Noto Sans, Noto Sans JP, Noto Sans KR, Noto Naskh Arabic, Noto Sans Thai, Noto Sans Hebrew, Noto Sans Bengali, sans-serif;
    font-size: 12px;
    line-height: 20px;
    color: var(--devsite-secondary-text-color)
    }
.devsite-profile-confirm-vanityid-dialog .devsite-profile-confirm-vanityid-dialog-tip .material-icons, .devsite-profile-delete-confirmation-dialog .devsite-profile-confirm-vanityid-dialog-tip .material-icons {
    direction: unset;
    font-size: 16px;
    -webkit-margin-end: 8px;
    -moz-margin-end: 8px;
    margin-inline-end: 8px
    }
.devsite-profile-confirm-vanityid-dialog .devsite-dialog-contents, .devsite-profile-delete-confirmation-dialog .devsite-dialog-contents {
    padding-block: 8px;
    padding-inline: 8px
    }
.devsite-profile-confirm-vanityid-dialog .devsite-dialog-contents--bottom, .devsite-profile-delete-confirmation-dialog .devsite-dialog-contents--bottom {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-margin-before: 40px;
    margin-block-start: 40px
    }
.devsite-profile-confirm-vanityid-dialog .devsite-dialog-contents--bottom .devsite-profile-delete-confirmation-dialog-confirm, .devsite-profile-delete-confirmation-dialog .devsite-dialog-contents--bottom .devsite-profile-delete-confirmation-dialog-confirm {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #ea4335;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
.devsite-profile-confirm-vanityid-dialog .devsite-dialog-contents--bottom .devsite-profile-delete-confirmation-dialog-confirm .material-icons, .devsite-profile-delete-confirmation-dialog .devsite-dialog-contents--bottom .devsite-profile-delete-confirmation-dialog-confirm .material-icons {
    direction: unset;
    inset-block-start: auto
    }
body[template=profile] .pac-container {
    z-index: 10000;
    border: 0;
    border-radius: 0 0 6px 6px;
    -webkit-margin-before: 1px;
    margin-block-start: 1px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)
    }
body[template=profile] .pac-container .pac-item {
    line-height: 48px;
    font-size: 16px;
    padding-block: 0;
    padding-inline: 16px;
    border-top: 0;
    cursor: pointer
    }
body[template=profile] .pac-container .pac-item .pac-item-query {
    font-size: 16px
    }
body[template=profile] .pac-container .pac-item .pac-icon {
    display: none
    }
body[template=profile] .pac-container .pac-logo:after {
    margin-block: 0;
    margin-inline: 8px
    }
devsite-profile-dashboard {
    display: block;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column wrap;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    max-width: 1600px;
    padding: 40px 80px
    }
@media screen and (max-width: 840px) {
    devsite-profile-dashboard {
        -webkit-margin-before: 0;
        margin-block-start: 0;
        padding-block: 0;
        padding-inline: 0
        }
    }
devsite-profile-dashboard .change-account-button, devsite-profile-dashboard .create-profile-button, devsite-profile-dashboard .sign-in-button {
    -webkit-margin-before: 20px;
    margin-block-start: 20px
    }
devsite-profile-dashboard .button-primary[disabled], devsite-profile-dashboard .button-primary[disabled]:hover {
    background: rgba(26, 115, 232, 0.4)
    }
devsite-profile-dashboard .waiting-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 250px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-profile-dashboard .waiting-container devsite-spinner {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    -webkit-margin-before: 15px;
    margin-block-start: 15px
    }
devsite-profile-dashboard .return-container {
    background-color: #e8f0fe;
    border-radius: 4px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 14px;
    -webkit-margin-after: 45px;
    margin-block-end: 45px;
    -webkit-margin-before: -20px;
    margin-block-start: -20px;
    padding-block: 10px;
    padding-inline: 15px;
    position: relative;
    width: 100%
    }
devsite-profile-dashboard .return-container .back-arrow {
    color: #4285f4;
    -webkit-margin-end: 10px;
    -moz-margin-end: 10px;
    margin-inline-end: 10px
    }
devsite-profile-dashboard .return-container .back-link {
    text-decoration: none;
    font-weight: 500;
    color: #4285f4
    }
devsite-profile-dashboard .return-container .close-return-link-button {
    color: #5f6368;
    cursor: pointer !important;
    font-size: 21px;
    inset-inline-end: 15px;
    -webkit-margin-before: 2px;
    margin-block-start: 2px;
    position: absolute
    }
devsite-profile-dashboard .column {
    display: inline-block;
    width: calc(50% - 12px);
    vertical-align: top
    }
devsite-profile-dashboard .column:last-child {
    -webkit-margin-start: 20px;
    -moz-margin-start: 20px;
    margin-inline-start: 20px
    }
@media screen and (max-width: 840px) {
    devsite-profile-dashboard .column {
        display: block;
        width: 100%
        }
    devsite-profile-dashboard .column:last-child {
        -webkit-margin-start: 0;
        -moz-margin-start: 0;
        margin-inline-start: 0
        }
    }
devsite-profile-dashboard .devsite-card {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-margin-after: 23px;
    margin-block-end: 23px;
    min-height: 250px
    }
@media screen and (max-width: 840px) {
    devsite-profile-dashboard .devsite-card {
        -webkit-padding-before: 180px;
        padding-block-start: 180px
        }
    }
devsite-profile-dashboard .devsite-card .card-content {
    background: var(--devsite-background-1);
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding-block: 15px;
    padding-inline: 15px;
    width: 50%
    }
@media screen and (max-width: 840px) {
    devsite-profile-dashboard .devsite-card .card-content {
        width: 100%;
        border-top: var(--devsite-primary-border)
        }
    }
devsite-profile-dashboard .learn-anything {
    background: url(../images/learn-anything-illustration.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 100%
    }
@media screen and (max-width: 840px) {
    devsite-profile-dashboard .learn-anything {
        background-size: 100%;
        background-position: 0 0
        }
    }
devsite-profile-dashboard .no-badge-pathway {
    background: url(../images/default-pathway-illustration.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 100%
    }
@media screen and (max-width: 840px) {
    devsite-profile-dashboard .no-badge-pathway {
        background-size: 100%;
        background-position: 0 0
        }
    }
@media screen and (max-width: 840px) {
    devsite-profile-dashboard devsite-activity-list {
        display: block;
        -webkit-margin-before: 30px;
        margin-block-start: 30px
        }
    }
devsite-profile-dashboard .notifications-announce-card {
    background: url(../images/notifications-illustration.svg)
    }
devsite-profile-dashboard .notifications-announce-card .card-controls {
    white-space: nowrap
    }
devsite-profile-dashboard .notifications-announce-card .card-controls .button-white:not:hover {
    background-color: #fff
    }
devsite-profile-dashboard .complete-profile-card {
    background: url(../images/complete-profile-illustration.png)
    }
devsite-profile-dashboard .make-profile-public {
    background: url(../images/public-profile-announcement-illustration.png)
    }
devsite-profile-dashboard .make-profile-public .card-controls {
    white-space: nowrap
    }
devsite-profile-dashboard .make-profile-public .card-controls .button-white:not:hover {
    background-color: #fff
    }
devsite-profile-dashboard .complete-profile-card, devsite-profile-dashboard .make-profile-public, devsite-profile-dashboard .notifications-announce-card {
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: auto 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-margin-after: 50px;
    margin-block-end: 50px
    }
[dir=rtl] devsite-profile-dashboard .complete-profile-card, [dir=rtl] devsite-profile-dashboard .make-profile-public, [dir=rtl] devsite-profile-dashboard .notifications-announce-card {
    background-position: 0
    }
devsite-profile-dashboard .complete-profile-card:nth-child(n+2), devsite-profile-dashboard .make-profile-public:nth-child(n+2), devsite-profile-dashboard .notifications-announce-card:nth-child(n+2) {
    -webkit-margin-before: -27px;
    margin-block-start: -27px
    }
@media screen and (max-width: 840px) {
    devsite-profile-dashboard .complete-profile-card, devsite-profile-dashboard .make-profile-public, devsite-profile-dashboard .notifications-announce-card {
        background-position: center 0;
        background-size: auto 74%;
        -webkit-margin-before: 20px;
        margin-block-start: 20px
        }
    }
devsite-profile-dashboard .complete-profile-card .card-content, devsite-profile-dashboard .make-profile-public .card-content, devsite-profile-dashboard .notifications-announce-card .card-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-profile-dashboard .complete-profile-card .card-title, devsite-profile-dashboard .make-profile-public .card-title, devsite-profile-dashboard .notifications-announce-card .card-title {
    font-family: var(--devsite-headline-font-family);
    font-size: 30px;
    line-height: 30px;
    -webkit-margin-after: 10px;
    margin-block-end: 10px;
    max-height: 87px;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: block;
    display: -webkit-box
    }
@media screen and (max-width: 840px) {
    devsite-profile-dashboard .complete-profile-card .card-title, devsite-profile-dashboard .make-profile-public .card-title, devsite-profile-dashboard .notifications-announce-card .card-title {
        -webkit-margin-before: 10px;
        margin-block-start: 10px
        }
    }
devsite-profile-dashboard .complete-profile-card .card-text, devsite-profile-dashboard .make-profile-public .card-text, devsite-profile-dashboard .notifications-announce-card .card-text {
    -webkit-margin-after: 20px;
    margin-block-end: 20px
    }
@media screen and (max-width: 840px) {
    devsite-profile-dashboard .complete-profile-card .card-text, devsite-profile-dashboard .make-profile-public .card-text, devsite-profile-dashboard .notifications-announce-card .card-text {
        -webkit-margin-after: 40px;
        margin-block-end: 40px
        }
    }
@media screen and (max-width: 840px) {
    devsite-profile-dashboard .event-card:not(.no-badge-pathway):not(.learn-anything), devsite-profile-dashboard .learn-card:not(.no-badge-pathway):not(.learn-anything) {
        -webkit-padding-before: 208px;
        padding-block-start: 208px
        }
    }
devsite-profile-dashboard .event-card .badge-icon, devsite-profile-dashboard .learn-card .badge-icon {
    background-image: url(../images/badge-background.png);
    background-position: 0 9px;
    background-repeat: no-repeat;
    background-size: 100%;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 170px;
    inset-block-start: calc(50% - 85px);
    inset-inline-end: calc(25% - 121px);
    padding-block: 0;
    padding-inline: 36px;
    position: absolute;
    width: 170px;
    z-index: 1
    }
@media screen and (max-width: 840px) {
    devsite-profile-dashboard .event-card .badge-icon, devsite-profile-dashboard .learn-card .badge-icon {
        background-position: 50%;
        background-size: 80%;
        height: 136px;
        inset-block-start: 37px;
        inset-inline-end: calc(50% - 104px);
        width: 136px
        }
    }
devsite-profile-dashboard .event-card .event-image-container, devsite-profile-dashboard .learn-card .event-image-container {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 100px;
    border: var(--devsite-primary-border);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row nowrap;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    height: 170px;
    inset-block-start: calc(50% - 85px);
    inset-inline-end: calc(25% - 85px);
    overflow: hidden;
    padding-block: 20px;
    padding-inline: 20px;
    position: absolute;
    width: 170px
    }
devsite-profile-dashboard .event-card .card-type, devsite-profile-dashboard .learn-card .card-type {
    color: #5f6368;
    font-size: 12px;
    font-weight: 500;
    -webkit-margin-after: 20px;
    margin-block-end: 20px;
    text-transform: uppercase
    }
devsite-profile-dashboard .event-card .card-title, devsite-profile-dashboard .learn-card .card-title {
    color: #1a73e8;
    font-size: 24px;
    line-height: 30px;
    z-index: 3;
    font-family: var(--devsite-headline-font-family);
    max-height: 87px;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: block;
    display: -webkit-box
    }
devsite-profile-dashboard .event-card .card-title:hover, devsite-profile-dashboard .learn-card .card-title:hover {
    color: #174ea6
    }
devsite-profile-dashboard .event-card .completion-container, devsite-profile-dashboard .learn-card .completion-container {
    font-size: 12px;
    -webkit-margin-before: 15px;
    margin-block-start: 15px;
    z-index: 3
    }
devsite-profile-dashboard .event-card .completion-container .color, devsite-profile-dashboard .learn-card .completion-container .color {
    background-color: #fcad70;
    height: 6px;
    inset-block-start: 0;
    position: absolute
    }
devsite-profile-dashboard .event-card .completion-container .grey, devsite-profile-dashboard .learn-card .completion-container .grey {
    background-color: var(--devsite-background-3);
    border-radius: 5px;
    height: 6px;
    -webkit-margin-after: 4px;
    margin-block-end: 4px;
    overflow: hidden;
    position: relative;
    width: 200px
    }
devsite-profile-dashboard .event-card .card-text, devsite-profile-dashboard .learn-card .card-text {
    -webkit-margin-before: 10px;
    margin-block-start: 10px
    }
devsite-profile-dashboard .event-card .button, devsite-profile-dashboard .learn-card .button {
    inset-block-end: 15px;
    position: absolute
    }
@media screen and (max-width: 840px) {
    devsite-profile-dashboard .event-card .button, devsite-profile-dashboard .learn-card .button {
        inset-block-end: 0;
        -webkit-margin-before: 24px;
        margin-block-start: 24px;
        position: relative
        }
    }
devsite-profile-interests .devsite-profile-interests-container {
    border: var(--devsite-primary-border);
    border-radius: 8px;
    margin-top: 40px
    }
devsite-profile-interests .devsite-profile-interests-header {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: var(--devsite-primary-border);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    padding: 13px 24px 11px
    }
devsite-profile-interests .devsite-profile-interests-header h3 {
    font-size: 18px;
    line-height: 26px;
    margin: 0
    }
[dir=ltr] devsite-profile-interests .devsite-profile-interests-header .devsite-profile-interests-clear {
    margin-left: auto
    }
[dir=rtl] devsite-profile-interests .devsite-profile-interests-header .devsite-profile-interests-clear {
    margin-right: auto
    }
devsite-profile-interests .devsite-profile-interests-body {
    padding: 24px
    }
devsite-profile-interests .devsite-profile-interests-footer {
    padding: 24px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    border-top: var(--devsite-primary-border)
    }
devsite-profile-interests .devsite-profile-interests-chips {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: -8px;
    min-height: 410px;
    max-height: 410px;
    width: 100%;
    -webkit-box-align: start;
    -webkit-align-items: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    -webkit-align-content: start;
    -ms-flex-line-pack: start;
    align-content: start;
    overflow-y: auto
    }
devsite-profile-interests .devsite-profile-interests-chips .interest-chip {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fff;
    border: var(--devsite-primary-border);
    border-radius: 8px;
    box-shadow: none;
    color: var(--devsite-secondary-text-color);
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font-family: var(--devsite-headline-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
    margin: 8px 0 0;
    padding: 6px 16px;
    text-align: center;
    -webkit-transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, border-color 0.2s;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, border-color 0.2s
    }
devsite-profile-interests .devsite-profile-interests-chips .interest-chip:active, devsite-profile-interests .devsite-profile-interests-chips .interest-chip:focus, devsite-profile-interests .devsite-profile-interests-chips .interest-chip:hover {
    color: var(--devsite-primary-text-color)
    }
devsite-profile-interests .devsite-profile-interests-chips .interest-chip:hover {
    background: rgba(60, 64, 67, 0.04)
    }
devsite-profile-interests .devsite-profile-interests-chips .interest-chip:focus {
    border: 1px solid #202124;
    background: rgba(60, 64, 67, 0.08)
    }
devsite-profile-interests .devsite-profile-interests-chips .interest-chip:focus:active {
    background: rgba(60, 64, 67, 0.06)
    }
[appearance=dark] devsite-profile-interests .devsite-profile-interests-chips .interest-chip {
    background: transparent;
    color: #fff
    }
[appearance=dark] devsite-profile-interests .devsite-profile-interests-chips .interest-chip:active, [appearance=dark] devsite-profile-interests .devsite-profile-interests-chips .interest-chip:focus, [appearance=dark] devsite-profile-interests .devsite-profile-interests-chips .interest-chip:hover {
    color: var(--devsite-secondary-text-color)
    }
[appearance=dark] devsite-profile-interests .devsite-profile-interests-chips .interest-chip:hover {
    background: #e8eaed
    }
devsite-profile-interests .devsite-profile-interests-chips .interest-chip[disabled] {
    opacity: 0.5;
    pointer-events: none
    }
devsite-profile-interests .devsite-profile-interests-chips .interest-chip.interest-chip-selected {
    background: #e8f0fe;
    box-shadow: none;
    border-color: transparent;
    color: #1967d2
    }
devsite-profile-interests .devsite-profile-interests-chips .interest-chip.interest-chip-selected:active, devsite-profile-interests .devsite-profile-interests-chips .interest-chip.interest-chip-selected:focus, devsite-profile-interests .devsite-profile-interests-chips .interest-chip.interest-chip-selected:hover {
    color: #174ea6
    }
devsite-profile-interests .devsite-profile-interests-chips .interest-chip.interest-chip-selected:hover {
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15)
    }
devsite-profile-interests .devsite-profile-interests-chips .interest-chip.interest-chip-selected:focus, devsite-profile-interests .devsite-profile-interests-chips .interest-chip.interest-chip-selected:hover {
    background: #d2e3fc
    }
devsite-profile-interests .devsite-profile-interests-chips .interest-chip.interest-chip-selected:focus {
    box-shadow: none
    }
devsite-profile-interests .devsite-profile-interests-chips .interest-chip.interest-chip-selected:focus:active {
    background: #aecbfa;
    box-shadow: 0 1px 4px rgba(60, 64, 67, 0.3), 0 1px 6px 1px rgba(60, 64, 67, 0.15)
    }
devsite-profile-interests .devsite-profile-interests-chips .interest-chip.interest-chip-selected[disabled] {
    background: rgba(60, 64, 67, 0.08);
    box-shadow: none;
    color: var(--devsite-primary-text-color);
    opacity: 0.5;
    pointer-events: none
    }
devsite-profile-interests .devsite-profile-interests-no-results {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 32px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    max-width: 100%;
    width: 100%;
    height: 408px
    }
devsite-profile-interests .devsite-profile-interests-no-results .devsite-profile-interests-no-results-image {
    width: 250px
    }
devsite-profile-interests .devsite-profile-interests-searchbox {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    border-radius: 4px;
    border: var(--devsite-primary-border);
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 24px;
    padding: 8px 4px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -moz-box-orient: horizontal;
    -moz-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
    }
devsite-profile-interests .devsite-profile-interests-searchbox .devsite-search-image {
    font-size: 24px
    }
[dir=ltr] devsite-profile-interests .devsite-profile-interests-searchbox .devsite-search-image {
    margin-left: 8px
    }
[dir=rtl] devsite-profile-interests .devsite-profile-interests-searchbox .devsite-search-image {
    margin-right: 8px
    }
devsite-profile-interests .devsite-profile-interests-searchbox .devsite-searchbox-input {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    border: none;
    outline: none;
    padding: 6px
    }
devsite-profile-recommendations .devsite-card {
    background: url(../images/recently-updated-illustration.svg);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 100%
    }
[dir=rtl] devsite-profile-recommendations .devsite-card {
    background-position: 0
    }
@media screen and (max-width: 840px) {
    devsite-profile-recommendations .devsite-card {
        background-size: 100%;
        background-position: 0 0
        }
    devsite-profile-recommendations .devsite-card .card-type {
        -webkit-margin-after: 16px;
        margin-block-end: 16px
        }
    devsite-profile-recommendations .devsite-card .card-timestamp {
        -webkit-margin-after: 16px;
        margin-block-end: 16px
        }
    }
devsite-profile-recommendations .devsite-card .card-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
    }
devsite-profile-recommendations .devsite-card .card-content devsite-spinner {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    -webkit-margin-after: auto;
    margin-block-end: auto;
    -webkit-margin-before: auto;
    margin-block-start: auto
    }
devsite-profile-recommendations .devsite-card .card-title {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--devsite-link-color);
    cursor: pointer;
    display: -webkit-box;
    font-family: var(--devsite-headline-font-family);
    font-size: 24px;
    line-height: 32px;
    -webkit-margin-after: 8px;
    margin-block-end: 8px;
    max-height: 64px;
    overflow-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis
    }
devsite-profile-recommendations .devsite-card .card-title:hover {
    color: #174ea6
    }
devsite-profile-recommendations .devsite-card .card-type {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #5f6368;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    -webkit-margin-after: 24px;
    margin-block-end: 24px;
    text-transform: uppercase
    }
devsite-profile-recommendations .devsite-card .card-type .material-icons {
    font-size: 16px;
    cursor: pointer;
    -webkit-margin-start: 4px;
    -moz-margin-start: 4px;
    margin-inline-start: 4px
    }
devsite-profile-recommendations .devsite-card .card-description {
    color: #3c4043;
    font-size: 14px;
    line-height: 24px;
    -webkit-margin-after: 2px;
    margin-block-end: 2px;
    -webkit-margin-end: 8px;
    -moz-margin-end: 8px;
    margin-inline-end: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
    }
devsite-profile-recommendations .devsite-card .card-timestamp {
    color: #3c4043;
    font-size: 12px;
    line-height: 20px;
    -webkit-margin-after: 24px;
    margin-block-end: 24px
    }
devsite-profile-recommendations .devsite-card .card-controls {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 12px;
    -webkit-margin-before: auto;
    margin-block-start: auto
    }
devsite-profile-recommendations .devsite-card .view-button {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-margin-end: 4px;
    -moz-margin-end: 4px;
    margin-inline-end: 4px
    }
devsite-profile-recommendations .devsite-card .carousel-buttons {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0
    }
devsite-profile-recommendations .devsite-card .carousel-button {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 32px;
    border: var(--devsite-primary-border);
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 32px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 32px;
    min-width: 32px;
    padding-block: 0;
    padding-inline: 0;
    width: 32px
    }
devsite-profile-recommendations .devsite-card .carousel-button .left-arrow, devsite-profile-recommendations .devsite-card .carousel-button .right-arrow {
    display: none
    }
devsite-profile-recommendations .devsite-card .carousel-button .material_icons, devsite-profile-recommendations .devsite-card .carousel-button svg {
    fill: #5f6368;
    color: #5f6368
    }
devsite-profile-recommendations .devsite-card .carousel-button:hover {
    border: var(--devsite-button-border-hover)
    }
devsite-profile-recommendations .devsite-card .carousel-button:hover svg {
    fill: var(--devsite-link-color)
    }
devsite-profile-recommendations .devsite-card .carousel-button[disabled] {
    opacity: 0.5;
    pointer-events: none
    }
devsite-profile-recommendations .devsite-card .carousel-button-prev {
    -webkit-margin-end: 8px;
    -moz-margin-end: 8px;
    margin-inline-end: 8px;
    -webkit-margin-start: auto;
    -moz-margin-start: auto;
    margin-inline-start: auto
    }
[dir=ltr] devsite-profile-recommendations .devsite-card .carousel-button-prev .left-arrow {
    display: inline-block
    }
[dir=rtl] devsite-profile-recommendations .devsite-card .carousel-button-prev .right-arrow {
    display: inline-block
    }
devsite-profile-recommendations .devsite-card .carousel-button-prev .material-icons, devsite-profile-recommendations .devsite-card .carousel-button-prev svg {
    -webkit-margin-end: 2px;
    -moz-margin-end: 2px;
    margin-inline-end: 2px
    }
devsite-profile-recommendations .devsite-card .carousel-button-next {
    -webkit-margin-end: 8px;
    -moz-margin-end: 8px;
    margin-inline-end: 8px;
    -webkit-margin-start: 8px;
    -moz-margin-start: 8px;
    margin-inline-start: 8px
    }
[dir=ltr] devsite-profile-recommendations .devsite-card .carousel-button-next .right-arrow {
    display: inline-block
    }
[dir=rtl] devsite-profile-recommendations .devsite-card .carousel-button-next .left-arrow {
    display: inline-block
    }
devsite-profile-recommendations .devsite-card .carousel-button-next .material-icons, devsite-profile-recommendations .devsite-card .carousel-button-next svg {
    -webkit-margin-start: 2px;
    -moz-margin-start: 2px;
    margin-inline-start: 2px
    }
devsite-profile-recommendations .devsite-card .carousel-dot {
    background-color: #e8eaed;
    border-radius: 8px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 8px;
    margin-block: 0;
    margin-inline: 8px;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
    width: 8px
    }
devsite-profile-recommendations .devsite-card .carousel-dot[active] {
    background-color: #1a73e8
    }
devsite-profile-wizard {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    padding: 104px 24px;
    max-width: 709px;
    margin: 0 auto
    }
.devsite-profile-wizard-new-profile {
    width: 100%
    }
.devsite-profile-wizard-new-profile .devsite-profile-wizard-step-counter {
    width: 220px;
    font-size: 12px;
    color: #3c4043;
    line-height: 16px
    }
.devsite-profile-wizard-new-profile .devsite-profile-wizard-step-counter .devsite-profile-wizard-step-counter--bar {
    margin-top: 8px;
    background: #e8eaed;
    height: 8px;
    border-radius: 4px
    }
.devsite-profile-wizard-new-profile .devsite-profile-wizard-step-counter .devsite-profile-wizard-step-counter--bar .devsite-profile-wizard-step-counter--progress {
    height: 8px;
    width: 0;
    -webkit-transition: all 0.15s ease-in;
    transition: all 0.15s ease-in;
    border-radius: 4px;
    background: -webkit-gradient(linear, left top, right top, from(#34a853), to(#81c995));
    background: -webkit-linear-gradient(left, #34a853, #81c995);
    background: linear-gradient(90deg, #34a853, #81c995)
    }
devsite-profile-wizard.submitting .devsite-profile-wizard-step--controls, devsite-profile-wizard.submitting .devsite-profile-wizard-step-counter {
    display: none
    }
.devsite-profile-wizard-new-profile h2 {
    font-size: 36px;
    color: #202124;
    line-height: 44px;
    margin: 40px 0 14px
    }
.devsite-profile-wizard-new-profile p {
    font-size: 16px;
    color: #3c4043;
    line-height: 24px;
    margin: 0 0 36px
    }
.devsite-profile-wizard-new-profile .devsite-profile-wizard-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
    }
.devsite-profile-wizard-new-profile .devsite-profile-wizard-help-text {
    display: block;
    font-size: 12px;
    color: #5f6368;
    line-height: 16px;
    margin: 4px 16px
    }
.devsite-profile-wizard-new-profile .devsite-profile-wizard-location-empty-location, .devsite-profile-wizard-new-profile .devsite-profile-wizard-location-warning {
    color: #d93025
    }
.devsite-profile-wizard-new-profile .devsite-profile-wizard-language-notice {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 24px
    }
.devsite-profile-wizard-new-profile .devsite-profile-wizard-language-notice i {
    color: #3c4043;
    font-size: 16px;
    margin: 2px 8px 0 0
    }
.devsite-profile-wizard-new-profile .devsite-profile-wizard-language-notice p {
    font-size: 14px;
    color: #3c4043;
    line-height: 20px;
    margin: 0
    }
.devsite-profile-wizard-new-profile .devsite-profile-wizard-step {
    display: none
    }
.devsite-profile-wizard-new-profile .devsite-profile-wizard-step.active {
    display: block
    }
.devsite-profile-wizard-step--controls {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 34px
    }
.devsite-profile-wizard-step--controls button {
    display: none
    }
.devsite-profile-wizard-step--controls button.visible {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex
    }
.devsite-profile-wizard-step--controls .devsite-profile-wizard-previous-step {
    margin-right: auto
    }
.devsite-profile-wizard-step-container {
    border: 1px solid #dadce0;
    border-radius: 8px;
    padding: 24px;
    margin: 40px 0 16px;
    --devsite-h3-margin: 0 0 16px
    }
.devsite-profile-wizard-step-container h3 {
    font-size: 18px;
    line-height: 26px
    }
.devsite-profile-wizard-newsletter-option {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
    }
.devsite-profile-wizard-newsletter-option h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: #3c4043;
    line-height: 24px
    }
.devsite-profile-wizard-newsletter-option p {
    margin: 0;
    font-size: 14px;
    color: #3c4043;
    line-height: 20px
    }
.devsite-profile-wizard-newsletter-option .devsite-profile-wizard-newsletter-option-text {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1
    }
.devsite-profile-wizard-newsletter-option .devsite-profile-wizard-newsletter-option-input {
    max-width: 132px;
    margin-left: 24px;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-top: 6px
    }
p.devsite-profile-wizard-terms {
    color: var(--devsite-secondary-text-color);
    font: 400 12px/16px var(--devsite-primary-font-family);
    font-size: 14px
    }
.profile-wizard--error {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%
    }
.profile-wizard--error .profile-wizard--error-cell {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-basis: calc(50% - 18px);
    -ms-flex-preferred-size: calc(50% - 18px);
    flex-basis: calc(50% - 18px);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 180px
    }
.profile-wizard--error h2 {
    margin: 0;
    padding: 0
    }
.profile-wizard--error .profile-wizard--error-img {
    background-image: url(../images/profile_not_found.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%
    }
.profile-wizard--error .profile-wizard-signed-in-as-btn {
    margin-top: 24px
    }
@media screen and (max-width: 600px) {
    devsite-profile-wizard {
        padding: 0 24px 24px
        }
    devsite-profile-wizard .devsite-profile-wizard-new-profile .devsite-profile-wizard-form {
        grid-template-columns: 1fr
        }
    }
devsite-profile-router {
    display: block;
    min-height: 50vh;
    margin: 0 auto
    }
devsite-profile-router .devsite-profile-router--loading, devsite-profile-router .devsite-profile-router-signin {
    padding: 96px 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-profile-router > .devsite-collection-details, devsite-profile-router > .devsite-title-container, devsite-profile-router > .my-community-container, devsite-profile-router > devsite-activity-list, devsite-profile-router > devsite-collection-list, devsite-profile-router > devsite-profile-dashboard {
    margin: 0 auto;
    max-width: 1600px;
    padding-block: 48px;
    padding-inline: 24px
    }
devsite-profile-router > .my-community-container:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 74px;
    background: url(../images/my_community_header.svg) no-repeat;
    background-position: 100% 0;
    background-size: auto 74px;
    z-index: -1
    }
[dir=rtl] devsite-profile-router > .my-community-container:before {
    -webkit-transform: scalex(-1);
    transform: scalex(-1)
    }
[appearance=dark] devsite-profile-router > .my-community-container:before {
    background-image: url(../images/my_community_header_dark.svg)
    }
@media (prefers-color-scheme: dark) {
    [appearance=device] devsite-profile-router > .my-community-container:before {
        background-image: url(../images/my_community_header_dark.svg)
        }
    }
devsite-profile-router > .my-community-container {
    padding: 40px
    }
devsite-profile-router > .my-community-container h1:first-of-type {
    display: block;
    margin-top: 8px
    }
devsite-profile-router devsite-my-community {
    -webkit-margin-before: 32px;
    margin-block-start: 32px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 32px auto 0;
    max-width: 708px
    }
devsite-profile-router:not([collections-enabled=true]) > devsite-activity-list {
    padding-top: 40px;
    width: 100%;
    background: url(../images/saved_pages_header.svg) 270px 0 no-repeat;
    background-size: auto 72px
    }
devsite-profile-router > devsite-collection-list {
    padding-block: 40px
    }
devsite-profile-router > .devsite-collection-details {
    -webkit-padding-after: 0;
    padding-block-end: 0
    }
.devsite-collection-details > devsite-collection {
    max-width: 640px
    }
devsite-profile-router > .devsite-title-container {
    -webkit-padding-after: 0;
    padding-block-end: 0
    }
.devsite-title-container > .devsite-breadcrumbs {
    font: 400 18px/30px var(--devsite-headline-font-family);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 388px
    }
.devsite-breadcrumbs devsite-collection {
    display: inline
    }
.devsite-breadcrumbs .devsite-breadcrumb-separator {
    vertical-align: middle
    }
.devsite-breadcrumbs .devsite-breadcrumb {
    color: var(--devsite-secondary-text-color)
    }
.devsite-breadcrumbs .devsite-breadcrumb-last {
    color: var(--devsite-primary-text-color)
    }
devsite-profile-router > devsite-collection-list {
    padding-block: 0 16px;
    width: 100%
    }
devsite-profile-router > .devsite-title-container, devsite-profile-router > devsite-activity-list:not([onlypages]) {
    background: url(../images/saved_pages_header.svg) 270px 0 no-repeat;
    background-size: auto 72px
    }
devsite-profile-router .page-title {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 10px
    }
devsite-profile-router > devsite-activity-list:not([onlypages]) {
    background: url(../images/saved_pages_header.svg) 270px 0 no-repeat;
    background-size: auto 72px
    }
devsite-profile-router > devsite-activity-list {
    -webkit-padding-before: 24px;
    padding-block-start: 24px;
    width: 100%
    }
devsite-profile-router .devsite-profiles-feedback {
    margin: 24px auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-profile-router .devsite-profiles-feedback button {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: var(--devsite-secondary-text-color);
    font-weight: 400;
    border: 0
    }
devsite-profile-router .devsite-profiles-feedback button:active, devsite-profile-router .devsite-profiles-feedback button:focus, devsite-profile-router .devsite-profiles-feedback button:hover {
    box-shadow: none;
    background: 0
    }
devsite-profile-router .devsite-profiles-feedback button .material-icons {
    top: auto
    }
@media screen and (max-width: 600px) {
    devsite-profile-router > .my-community-container:before {
        background-position: -507px 0
        }
    devsite-profile-router > .my-community-container {
        padding: 86px 16px 40px
        }
    }
@media screen and (max-width: 840px) {
    devsite-profile-router > devsite-profile-dashboard {
        padding-top: 0
        }
    devsite-profile-router > devsite-activity-list {
        background-position: -160px 0;
        padding-top: 84px
        }
    }
devsite-profiles-splash {
    display: block;
    margin-bottom: 94px;
    min-height: 50vh
    }
devsite-profiles-splash .devsite-profiles-splash--loading {
    padding: 96px 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
devsite-profiles-splash .devsite-profiles-splash--banner {
    background: #e8f0fe;
    box-shadow: 0 2px 6px rgba(60, 64, 67, 0.15), 0 1px 2px rgba(60, 64, 67, 0.3), 0 4px 8px hsla(207, 5%, 52%, 0.06), 0 -2px 8px hsla(207, 5%, 52%, 0.09);
    box-shadow: 0 1px 2px 0 var(--devsite-elevation-key-shadow-color), 0 2px 6px 2px var(--devsite-elevation-ambient-shadow-color);
    padding: 14px 40px
    }
devsite-profiles-splash .devsite-profiles-splash--banner div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #3c4043
    }
devsite-profiles-splash .devsite-profiles-splash--banner i {
    color: #1a73e8;
    margin: 0 10px
    }
devsite-profiles-splash .devsite-profiles-splash--banner .button {
    margin: 0 48px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0
    }
devsite-profiles-splash .devsite-profiles-splash--container {
    background: url(../images/profile-404-header.svg) top no-repeat;
    padding: 144px 0
    }
devsite-profiles-splash .devsite-profiles-splash--container .devsite-profiles-splash--content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    max-width: 896px;
    padding: 0 24px;
    margin: 0 auto
    }
devsite-profiles-splash .devsite-profiles-splash--container .devsite-profiles-splash--content .devsite-profiles-splash--graphic, devsite-profiles-splash .devsite-profiles-splash--container .devsite-profiles-splash--content .devsite-profiles-splash--text {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: 50%
    }
devsite-profiles-splash .devsite-profiles-splash--container .devsite-profiles-splash--content .devsite-profiles-splash--text {
    margin-right: 30px
    }
devsite-profiles-splash .devsite-profiles-splash--container .devsite-profiles-splash--content .devsite-profiles-splash--text h2 {
    margin: 0;
    padding: 0;
    font-size: 36px;
    line-height: 44px;
    color: #202124
    }
devsite-profiles-splash .devsite-profiles-splash--container .devsite-profiles-splash--content .devsite-profiles-splash--text p {
    margin: 0;
    padding: 16px 0
    }
devsite-profiles-splash .devsite-profiles-splash--container .devsite-profiles-splash--content .devsite-profiles-splash--graphic {
    margin-left: 30px;
    height: 300px;
    background: url(../images/profile_not_found.svg) 50% no-repeat
    }
devsite-profiles-splash .dotdev__home__intro {
    background: url(../images/background-illustration.svg) top no-repeat;
    padding-top: 60px;
    text-align: center;
    background-size: 100% auto;
    padding-bottom: calc(16vw - 115px);
    margin-bottom: 32px
    }
devsite-profiles-splash .dotdev__home__box__container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    margin: 0 12px
    }
devsite-profiles-splash .dotdev__home__box {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin: 0 12px;
    -webkit-flex-basis: 33%;
    -ms-flex-preferred-size: 33%;
    flex-basis: 33%
    }
devsite-profiles-splash .dotdev__home__box h4 {
    margin: 24px 0 8px;
    font: 400 24px/32px var(--devsite-headline-font-family)
    }
devsite-profiles-splash .dotdev__home__box .dotdev__home__img {
    height: 15vw;
    border: 1px solid #dadce0
    }
devsite-profiles-splash .dotdev__home__box .dotdev__home__box1_img {
    background: url(../images/box1-illustration.svg) top/cover no-repeat
    }
devsite-profiles-splash .dotdev__home__box .dotdev__home__box2_img {
    background: url(../images/box2-illustration.svg) top/cover no-repeat
    }
devsite-profiles-splash .dotdev__home__box .dotdev__home__box3_img {
    background: url(../images/box3-illustration.svg) top/cover no-repeat
    }
devsite-profiles-splash .dotdev__home__intro h3:first-of-type {
    font-family: Google Sans;
    font-size: 36px;
    line-height: 44px;
    margin: 5vw 0 0
    }
devsite-profiles-splash .dotdev__home__intro p {
    margin: 12px 0
    }
devsite-profiles-splash .dotdev__home__actions {
    margin-top: 20px
    }
@media only screen and (max-width: 768px) {
    devsite-profiles-splash .dotdev__home__intro {
        background-size: 200vw
        }
    devsite-profiles-splash .dotdev__home__box__container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-top: 60px
        }
    devsite-profiles-splash .dotdev__home__box {
        width: 100%;
        margin: 0 0 30px;
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%
        }
    devsite-profiles-splash .dotdev__home__box .dotdev__home__img {
        height: 45vw
        }
    devsite-profiles-splash .devsite-article-body {
        background-size: 400vw;
        margin: 0
        }
    devsite-profiles-splash .dotdev__home .devsite-landing-row-inner {
        padding: 0 30px
        }
    devsite-profiles-splash .dotdev__home__intro h3 {
        margin-top: 70px
        }
    }