| 1 |
- Root.Runtime.cachedResources["audits/auditsDialog.css"]="/*\n * Copyright 2017 The Chromium Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n.audits-view {\n --view-horizontal-margin: 20px;\n margin: 7px var(--view-horizontal-margin);\n flex: auto;\n align-items: center;\n width: 100%;\n max-width: 500px;\n}\n\n.audits-view h2 {\n color: #666;\n font-weight: bold;\n font-size: 14px;\n flex: none;\n width: 100%;\n text-align: left;\n}\n\n.audits-view button {\n z-index: 10;\n margin-left: auto;\n margin-right: 0px;\n}\n\n.audits-status {\n width: 100%;\n flex: auto;\n align-items: center;\n color: #666;\n}\n\n.audits-status-text {\n text-align: center;\n min-height: 50px;\n margin-bottom: 10px;\n display: flex;\n justify-content: center;\n flex-direction: column;\n max-width: 100%;\n}\n\n.audits-status-text code {\n user-select: text;\n text-align: left;\n white-space: pre-wrap;\n overflow: auto;\n}\n\n.audits-progress-wrapper {\n width: calc(100% + 2 * var(--view-horizontal-margin));\n height: 2px;\n background-color: #E1F5FE;\n position: relative;\n margin: 10px;\n}\n\n.audits-progress-bar {\n width: 0%;\n height: 100%;\n background: #039BE5;\n position: absolute;\n transform-origin: left;\n animation-fill-mode: forwards;\n animation-timing-function: ease-out;\n --progress-bar-loading-duration: 45s;\n --progress-bar-gathering-duration: 12s;\n --progress-bar-gathering-percent: 70%;\n --progress-bar-auditing-duration: 5s;\n --progress-bar-auditing-percent: 95%;\n}\n\n.audits-progress-bar.errored {\n width: 100%;\n background: #E50303;\n}\n\n.audits-progress-bar.loading {\n animation-duration: var(--progress-bar-loading-duration);\n animation-name: progressBarLoading;\n}\n\n@keyframes progressBarLoading {\n 0% { width: 0%; }\n 100% { width: var(--progress-bar-gathering-percent); }\n}\n\n.audits-progress-bar.gathering {\n animation-duration: var(--progress-bar-gathering-duration);\n animation-name: progressBarGathering;\n}\n\n@keyframes progressBarGathering {\n 0% { width: var(--progress-bar-gathering-percent); }\n 100% { width: var(--progress-bar-auditing-percent); }\n}\n\n.audits-progress-bar.auditing {\n animation-duration: var(--progress-bar-auditing-duration);\n animation-name: progressBarAuditing;\n}\n\n@keyframes progressBarAuditing {\n 0% { width: var(--progress-bar-auditing-percent); }\n 100% { width: 99%; }\n}\n\n.audits-report-error {\n display: block;\n margin-top: 5px;\n}\n\n/*# sourceURL=audits/auditsDialog.css */";Root.Runtime.cachedResources["audits/auditsPanel.css"]="/*\n * Copyright 2017 The Chromium Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n.toolbar {\n background-color: var(--toolbar-bg-color);\n border-bottom: var(--divider-border);\n}\n\n.lh-root {\n --report-menu-width: 0;\n user-select: text;\n}\n\n/* for View Trace button */\n.lh-audit-group {\n position: relative;\n}\nbutton.view-trace {\n margin: 10px;\n}\n\n.audits-results-container {\n position: relative;\n}\n\n/** `window.opener` is null for windows opened from DevTools. This breaks\n the LH viewer app, so disable this feature. */\n.lh-tools--viewer {\n display: none !important;\n}\n\n.audits-settings-pane {\n flex: none;\n}\n\n.audits-settings-pane .toolbar {\n flex: 1 1;\n}\n\n.audits-toolbar-container {\n display: flex;\n flex: none;\n}\n\n.audits-toolbar-container > :first-child {\n flex: 1 1 auto;\n}\n\n/*# sourceURL=audits/auditsPanel.css */";Root.Runtime.cachedResources["audits/auditsStartView.css"]="/*\n * Copyright 2018 The Chromium Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n.audits-start-view {\n font-family: Roboto, sans-serif;\n font-size: var(--font-size);\n line-height: 18px;\n\n --color-blue: #0535C1;\n /* for buttons */\n --accent-color: var(--color-blue);\n --color-bg: white;\n --font-size: 14px;\n --report-font-family: Roboto, Helvetica, Arial, sans-serif;\n}\n\n.audits-start-view header {\n flex: 2 1;\n padding: 16px;\n display: grid;\n justify-items: center;\n}\n\n.audits-logo {\n width: 75px;\n height: 75px;\n flex-shrink: 0;\n background-repeat: no-repeat;\n background-size: contain;\n background-image: url(Images/audits_logo.svg);\n}\n\n.audits-start-view-text {\n margin: 0 40px;\n text-align: center;\n}\n\n.audits-start-view form {\n display: contents;\n}\n\n.audits-form-section {\n padding: 8px;\n flex: 1 1;\n}\n\n.audits-start-view.vbox .audits-form-categories {\n border-top: 1px solid #ebebeb;\n border-bottom: 1px solid #ebebeb;\n}\n\n.audits-form-section-label {\n margin: 7px 0 7px;\n font-weight: 500;\n}\n\n.audits-form-section input {\n margin-top: 0;\n margin-bottom: 0;\n margin-left: 0;\n}\n\n.audits-form-section-label i span {\n position: relative;\n top: -2px;\n}\n\n.audits-form-section-label span.largeicon-checkmark {\n top: -4px;\n}\n\n.audits-radio {\n display: flex;\n align-items: center;\n}\n\n.audits-start-button-container {\n align-items: center;\n}\n\n.audits-start-button-container button {\n margin: 8px auto;\n font-family: var(--report-font-family);\n font-weight: 500;\n font-size: var(--font-size);\n}\n.audits-start-button-container button:disabled {\n cursor: not-allowed;\n}\n\n.audits-start-view .toolbar-dropdown-arrow {\n display: none;\n}\n\n.audits-launcher-row,\n.audits-radio {\n margin-bottom: 6px;\n}\n\n.audits-launcher-row:last-of-type,\n.audits-radio:last-of-type {\n margin-bottom: 0;\n}\n\n.audits-launcher-row .dimmed {\n padding-left: 22px;\n}\n\n.audits-help-text {\n text-align: center;\n color: red;\n font-weight: bold;\n padding-left: 10px;\n}\n\n/*# sourceURL=audits/auditsStartView.css */";Root.Runtime.cachedResources["audits/lighthouse/template.html"]="<!--\n@license\nCopyright 2018 Google Inc. All Rights Reserved.\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS-IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=1\">\n <link rel=\"icon\" href=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEhklEQVR4AWJxL/BhIAesev1U5tcflpncgNrKIsqNIwzC9feMpDUzs70kOczMzMzJJcxwCTMzncPMnOwtzBwzMzPb0vRfeZPp0VhPS5I39V5fdiXV1/VD+9QC7OVn9BsyH1XIoEI1PfmJvLFowVV564+34DFUHudbmfDh4kVXh//7XwE+WjS/YfXZe3yr4j2rqj1AIhSB7hZ8ZtPZu/zw8cK523U4wE1/rvPfWrz4zs0m9ZdC9yUJAlASdBAgocRegfF/f3/h/PuaFsxMdwjAR0vm1+06eMMfIrhLqTWqdH4EumU2SPfMhigJAlRQbZrgrRsl9U+Y2DYDFCz3ILC9kiAiqSrMwbWT0nceEnR+9Kggc2zjOJCASDENkg0a5HfZZgDP81CM3CrQs2Z1+o7DJ6ePr8sK0AOCHv5Jjdt3evyYSaZ351VIStIxPRAUtrBYbxC6w+BZ0ivVSBKkIhJhemSyZpfB00EiPO2VjzYkxhcqXQqCWCShGplvi3y0QxqbuBurMjyJeWnkHZuAEgIQGsUBqwrfjZ+IlBgKyRJzVVYF8O6qFWdh86YzQzMrZigYmxAyfvHgLZQ/LC1CbeniW2Hkqr/PH16SgvGuf2/uzNMBwJA/njxizGPtSyAf7EziJCMGRDRdhoAC4PL1A/SrKQMAAQkEfpJAcRQdrBJ7gNwjSpJsdwK+CANBkqa1LgQB4IicV9nYUct7gaxuDJUErQIiEAiMxLVOFlKzIktPpT0ggpdpC/8YAHnxbgkUY4tAAFSR7AAXNyAAWHJrA/kHGjzg5nleuwFO7Nd/IoDw4Pm58+4jNLmYG0wRA5bErc2Mr3Y+dXTDW1VvwqbJkzMCHQ4S1GTCBOIgUHJrGdEwqzR+jAp/o2qAZelUDoQnruEEdDclJI6576AlNVfc+22XN/+Y1vnJD0Yind6UpEEvn/Hqq15EYjCW7jZCJEpnNvDgkyelDjs106kuux2AAXCSobULOWP8mLhYlpoDMK4qAFXJGk+grtH8YXVz5KJblqaG1+VUdTc0I290bmUQAriGITRbdQnom0aoFj8kx1+wMD2ifncAXUQE4SkDqN1hE0jEophs1SUwZAOhUAiMCLwRtamtTZtbbmZErSAUHbSysaoEmnrsakiMiUAURi283gN6wans9oX8rOCrj7/JP35DFD+iQ7Au/K2KE1jzx6ujjUnXFH9KjEq6ZlhsTBICrNLJf47Pv/pkHzvup1w4dmUbEei0+bcXRqJuh5kVARQ8byyYxOwNGr7A87xh1tp8sGT+uMInrwi++Xj7TQz2d27NvwEkrOflAFQGIDA5khASBCGdO2/Z/MnLPwYfv5TFhjW7QhVKAB6afwe2LpFlFsCnlQEosgQgDsdOG1/LKeNqJS4JCSPJ/i+TakwEARor7gER1Iva5JmPOJK0RUqmoPnnlzFCtmIAhAAQEIQRgDaiYPIauNXcnDlRIrWNFY3hm7PG9YRqr7IV7HrCgAC17befjEvRq2nGhAHtBqDpOuI/I1diUUAMYIxEdyejBJqLnNoszGZtfiX/CztGv2mq+sdaAAAAAElFTkSuQmCC\">\n <title>Lighthouse Report</title>\n <style>/*%%LIGHTHOUSE_CSS%%*/</style>\n</head>\n<body class=\"lh-root lh-vars\">\n <noscript>Lighthouse report requires JavaScript. Please enable.</noscript>\n <div hidden>%%LIGHTHOUSE_TEMPLATES%%</div>\n\n <main><!-- report populated here --></main>\n\n <div id=\"lh-log\"></div>\n\n <script>%%LIGHTHOUSE_JAVASCRIPT%%\n //# sourceURL=compiled-reportrenderer.js\n </script>\n <script>window.__LIGHTHOUSE_JSON__ = %%LIGHTHOUSE_JSON%%;</script>\n <script>\n function __initLighthouseReport__() {\n const dom = new DOM(document);\n const renderer = new ReportRenderer(dom);\n\n const container = document.querySelector('main');\n renderer.renderReport(window.__LIGHTHOUSE_JSON__, container);\n\n // Hook in JS features and page-level event listeners after the report\n // is in the document.\n const features = new ReportUIFeatures(dom);\n features.initFeatures(window.__LIGHTHOUSE_JSON__);\n }\n window.addEventListener('DOMContentLoaded', __initLighthouseReport__);\n\n document.addEventListener('lh-analytics', e => {\n if (window.ga) {\n ga(e.detail.cmd, e.detail.fields);\n }\n });\n\n document.addEventListener('lh-log', e => {\n const logger = new Logger(document.querySelector('#lh-log'));\n\n switch (e.detail.cmd) {\n case 'log':\n logger.log(e.detail.msg);\n break;\n case 'warn':\n logger.warn(e.detail.msg);\n break;\n case 'error':\n logger.error(e.detail.msg);\n break;\n case 'hide':\n logger.hide();\n break;\n }\n });\n </script>\n</body>\n</html>\n\n/*# sourceURL=audits/lighthouse/template.html */";Root.Runtime.cachedResources["audits/lighthouse/templates.html"]="<!--\n@license\nCopyright 2018 Google Inc. All Rights Reserved.\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS-IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n\n<!-- Lighthouse run warnings -->\n<template id=\"tmpl-lh-warnings--toplevel\">\n <div class=\"lh-warnings lh-warnings--toplevel\">\n <strong class=\"lh-warnings__msg\"></strong>\n <ul></ul>\n </div>\n</template>\n\n<!-- Lighthouse score scale -->\n<template id=\"tmpl-lh-scorescale\">\n <div class=\"lh-scorescale\">\n <span class=\"lh-scorescale-range lh-scorescale-range--fail\">0–49</span>\n <span class=\"lh-scorescale-range lh-scorescale-range--average\">50–89</span>\n <span class=\"lh-scorescale-range lh-scorescale-range--pass\">90–100</span>\n </div>\n</template>\n\n<!-- Toggle arrow chevron -->\n<template id=\"tmpl-lh-chevron\">\n <svg class=\"lh-chevron\" title=\"See audits\" xmlns=\"http://www.w3.org/2000/svg\" viewbox=\"0 0 100 100\">\n <g class=\"lh-chevron__lines\">\n <path class=\"lh-chevron__line lh-chevron__line-left\" d=\"M10 50h40\"></path>\n <path class=\"lh-chevron__line lh-chevron__line-right\" d=\"M90 50H50\"></path>\n </g>\n </svg>\n</template>\n\n<!-- Lighthouse category header -->\n<template id=\"tmpl-lh-category-header\">\n <div class=\"lh-category-header\">\n <div class=\"lh-score__gauge\" role=\"heading\" aria-level=\"2\"></div>\n <div class=\"lh-category-header__description\"></div>\n </div>\n</template>\n\n<!-- Lighthouse clump -->\n<template id=\"tmpl-lh-clump\">\n <!-- TODO: group classes shouldn't be reused for clumps. -->\n <details class=\"lh-clump lh-audit-group\">\n <summary>\n <div class=\"lh-audit-group__summary\">\n <div class=\"lh-audit-group__header\">\n <span class=\"lh-audit-group__title\"></span>\n <span class=\"lh-audit-group__itemcount\"></span>\n <!-- .lh-audit-group__description will be added here -->\n <!-- .lh-metrics-toggle will be added here -->\n </div>\n <div class=\"\"></div>\n </div>\n </summary>\n </details>\n</template>\n\n<!-- Lighthouse metrics toggle -->\n<template id=\"tmpl-lh-metrics-toggle\">\n <div class=\"lh-metrics-toggle\">\n <input class=\"lh-metrics-toggle__input\" type=\"checkbox\" id=\"toggle-metric-descriptions\" aria-label=\"Toggle the display of metric descriptions\">\n <label class=\"lh-metrics-toggle__label\" for=\"toggle-metric-descriptions\">\n <div class=\"lh-metrics-toggle__icon lh-metrics-toggle__icon--less\" aria-hidden=\"true\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n <path class=\"lh-metrics-toggle__lines\" d=\"M4 9h16v2H4zm0 4h10v2H4z\" />\n </svg>\n </div>\n <div class=\"lh-metrics-toggle__icon lh-metrics-toggle__icon--more\" aria-hidden=\"true\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n <path class=\"lh-metrics-toggle__lines\" d=\"M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z\" />\n </svg>\n </div>\n </label>\n </div>\n</template>\n\n<!-- Lighthouse audit -->\n<template id=\"tmpl-lh-audit\">\n <div class=\"lh-audit\">\n <details class=\"lh-expandable-details\">\n <summary>\n <div class=\"lh-audit__header lh-expandable-details__summary\">\n <span class=\"lh-audit__score-icon\"></span>\n <span class=\"lh-audit__title-and-text\">\n <span class=\"lh-audit__title\"></span>\n <span class=\"lh-audit__display-text\"></span>\n </span>\n <div class=\"lh-chevron-container\"></div>\n </div>\n </summary>\n <div class=\"lh-audit__description\"></div>\n <div class=\"lh-audit__stackpacks\"></div>\n </details>\n </div>\n</template>\n\n<!-- Lighthouse perf metric -->\n<template id=\"tmpl-lh-metric\">\n <div class=\"lh-metric\">\n <div class=\"lh-metric__innerwrap\">\n <span class=\"lh-metric__title\"></span>\n <div class=\"lh-metric__value\"></div>\n <div class=\"lh-metric__description\"></div>\n </div>\n </div>\n</template>\n\n<!-- Lighthouse perf opportunity -->\n<template id=\"tmpl-lh-opportunity\">\n <div class=\"lh-audit lh-audit--load-opportunity\">\n <details class=\"lh-expandable-details\">\n <summary>\n <div class=\"lh-audit__header lh-expandable-details__summary\">\n <div class=\"lh-load-opportunity__cols\">\n <div class=\"lh-load-opportunity__col lh-load-opportunity__col--one\">\n <span class=\"lh-audit__score-icon\"></span>\n <div class=\"lh-audit__title\"></div>\n </div>\n <div class=\"lh-load-opportunity__col lh-load-opportunity__col--two\">\n <div class=\"lh-load-opportunity__sparkline\">\n <div class=\"lh-sparkline\"><div class=\"lh-sparkline__bar\"></div></div>\n </div>\n <div class=\"lh-audit__display-text\"></div>\n <div class=\"lh-chevron-container\" title=\"See resources\"></div>\n </div>\n </div>\n </div>\n </summary>\n <div class=\"lh-audit__description\"></div>\n <div class=\"lh-audit__stackpacks\"></div>\n </details>\n </div>\n</template>\n\n<!-- Lighthouse perf opportunity header -->\n<template id=\"tmpl-lh-opportunity-header\">\n <div class=\"lh-load-opportunity__header lh-load-opportunity__cols\">\n <div class=\"lh-load-opportunity__col lh-load-opportunity__col--one\"></div>\n <div class=\"lh-load-opportunity__col lh-load-opportunity__col--two\"></div>\n </div>\n</template>\n\n<!-- Lighthouse score container -->\n<template id=\"tmpl-lh-scores-wrapper\">\n <style>\n .lh-scores-container {\n display: flex;\n flex-direction: column;\n padding: var(--scores-container-padding);\n position: relative;\n width: 100%;\n }\n\n .lh-sticky-header {\n --gauge-circle-size: 36px;\n --plugin-badge-size: 18px;\n --plugin-icon-size: 75%;\n --gauge-wrapper-width: 60px;\n --gauge-percentage-font-size: 13px;\n position: sticky;\n left: 0;\n right: 0;\n top: var(--topbar-height);\n font-weight: 700;\n display: none;\n justify-content: center;\n background-color: var(--sticky-header-background-color);\n border-bottom: 1px solid var(--color-gray-200);\n padding-top: var(--score-container-padding);\n padding-bottom: 4px;\n z-index: 1;\n pointer-events: none;\n }\n\n .lh-sticky-header--visible {\n display: grid;\n grid-auto-flow: column;\n pointer-events: auto;\n }\n\n /* Disable the gauge arc animation for the sticky header, so toggling display: none\n does not play the animation. */\n .lh-sticky-header .lh-gauge-arc {\n animation: none;\n }\n\n .lh-sticky-header .lh-gauge__label {\n display: none;\n }\n\n .lh-highlighter {\n width: var(--gauge-wrapper-width);\n height: 1px;\n background-color: var(--highlighter-background-color);\n /* Position at bottom of first gauge in sticky header. */\n position: absolute;\n grid-column: 1;\n bottom: -1px;\n }\n\n .lh-gauge__wrapper:first-of-type {\n contain: none;\n }\n </style>\n <div class=\"lh-scores-wrapper\">\n <div class=\"lh-scores-container\">\n <div class=\"pyro\">\n <div class=\"before\"></div>\n <div class=\"after\"></div>\n </div>\n </div>\n </div>\n</template>\n\n<!-- Lighthouse topbar -->\n<template id=\"tmpl-lh-topbar\">\n <style>\n .lh-topbar {\n position: sticky;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n display: flex;\n align-items: center;\n height: var(--topbar-height);\n background-color: var(--topbar-background-color);\n padding: var(--topbar-padding);\n }\n\n .lh-topbar__logo {\n width: var(--topbar-logo-size);\n height: var(--topbar-logo-size);\n user-select: none;\n flex: none;\n }\n .lh-topbar__logo .shape {\n fill: var(--report-text-color);\n }\n\n .lh-topbar__url {\n margin: var(--topbar-padding);\n text-decoration: none;\n color: var(--report-text-color);\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n }\n\n .lh-tools {\n margin-left: auto;\n will-change: transform;\n }\n .lh-tools__button {\n width: var(--tools-icon-size);\n height: var(--tools-icon-size);\n cursor: pointer;\n margin-right: 5px;\n /* This is actually a button element, but we want to style it like a transparent div. */\n display: flex;\n background: none;\n color: inherit;\n border: none;\n padding: 0;\n font: inherit;\n outline: inherit;\n }\n .lh-tools__button svg {\n fill: var(--tools-icon-color);\n }\n .dark .lh-tools__button svg {\n filter: invert(1);\n }\n .lh-tools__button.active + .lh-tools__dropdown {\n opacity: 1;\n clip: rect(-1px, 187px, 242px, -3px);\n visibility: visible;\n }\n .lh-tools__dropdown {\n position: absolute;\n background-color: var(--report-background-color);\n border: 1px solid var(--report-border-color);\n border-radius: 3px;\n padding: calc(var(--default-padding) / 2) 0;\n cursor: pointer;\n top: 36px;\n right: 0;\n box-shadow: 1px 1px 3px #ccc;\n min-width: 125px;\n clip: rect(0, 164px, 0, 0);\n visibility: hidden;\n opacity: 0;\n transition: all 200ms cubic-bezier(0,0,0.2,1);\n }\n .lh-tools__dropdown a {\n display: block;\n color: currentColor;\n text-decoration: none;\n white-space: nowrap;\n padding: 0 12px;\n line-height: 2;\n }\n .lh-tools__dropdown a:hover,\n .lh-tools__dropdown a:focus {\n background-color: var(--color-gray-200);\n outline: none;\n }\n .lh-tools__dropdown .report-icon {\n cursor: pointer;\n background-repeat: no-repeat;\n background-position: 8px 50%;\n background-size: 18px;\n background-color: transparent;\n text-indent: 18px;\n }\n .dark .report-icon {\n color: var(--color-gray-900);\n filter: invert(1);\n }\n .dark .lh-tools__dropdown a:hover,\n .dark .lh-tools__dropdown a:focus {\n background-color: #BDBDBD;\n }\n /* copy icon needs slight adjustments to look great */\n .lh-tools__dropdown .report-icon--copy {\n background-size: 16px;\n background-position: 9px 50%;\n }\n /* save-as-gist option hidden in report */\n .lh-tools__dropdown .lh-tools--gist {\n display: none;\n }\n\n @media screen and (max-width: 964px) {\n .lh-tools__dropdown {\n right: 0;\n left: initial;\n }\n }\n @media print {\n .lh-topbar {\n position: static;\n margin-left: 0;\n }\n }\n </style>\n\n <div class=\"lh-topbar\">\n <!-- Lighthouse logo. -->\n <svg class=\"lh-topbar__logo\" viewBox=\"0 0 24 24\">\n <defs>\n <linearGradient x1=\"57.456%\" y1=\"13.086%\" x2=\"18.259%\" y2=\"72.322%\" id=\"lh-topbar__logo--a\">\n <stop stop-color=\"#262626\" stop-opacity=\".1\" offset=\"0%\"/>\n <stop stop-color=\"#262626\" stop-opacity=\"0\" offset=\"100%\"/>\n </linearGradient>\n <linearGradient x1=\"100%\" y1=\"50%\" x2=\"0%\" y2=\"50%\" id=\"lh-topbar__logo--b\">\n <stop stop-color=\"#262626\" stop-opacity=\".1\" offset=\"0%\"/>\n <stop stop-color=\"#262626\" stop-opacity=\"0\" offset=\"100%\"/>\n </linearGradient>\n <linearGradient x1=\"58.764%\" y1=\"65.756%\" x2=\"36.939%\" y2=\"50.14%\" id=\"lh-topbar__logo--c\">\n <stop stop-color=\"#262626\" stop-opacity=\".1\" offset=\"0%\"/>\n <stop stop-color=\"#262626\" stop-opacity=\"0\" offset=\"100%\"/>\n </linearGradient>\n <linearGradient x1=\"41.635%\" y1=\"20.358%\" x2=\"72.863%\" y2=\"85.424%\" id=\"lh-topbar__logo--d\">\n <stop stop-color=\"#FFF\" stop-opacity=\".1\" offset=\"0%\"/>\n <stop stop-color=\"#FFF\" stop-opacity=\"0\" offset=\"100%\"/>\n </linearGradient>\n </defs>\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path d=\"M12 3l4.125 2.625v3.75H18v2.25h-1.688l1.5 9.375H6.188l1.5-9.375H6v-2.25h1.875V5.648L12 3zm2.201 9.938L9.54 14.633 9 18.028l5.625-2.062-.424-3.028zM12.005 5.67l-1.88 1.207v2.498h3.75V6.86l-1.87-1.19z\" fill=\"#F44B21\"/>\n <path fill=\"#FFF\" d=\"M14.201 12.938L9.54 14.633 9 18.028l5.625-2.062z\"/>\n <path d=\"M6 18c-2.042 0-3.95-.01-5.813 0l1.5-9.375h4.326L6 18z\" fill=\"url(#lh-topbar__logo--a)\" fill-rule=\"nonzero\" transform=\"translate(6 3)\"/>\n <path fill=\"#FFF176\" fill-rule=\"nonzero\" d=\"M13.875 9.375v-2.56l-1.87-1.19-1.88 1.207v2.543z\"/>\n <path fill=\"url(#lh-topbar__logo--b)\" fill-rule=\"nonzero\" d=\"M0 6.375h6v2.25H0z\" transform=\"translate(6 3)\"/>\n <path fill=\"url(#lh-topbar__logo--c)\" fill-rule=\"nonzero\" d=\"M6 6.375H1.875v-3.75L6 0z\" transform=\"translate(6 3)\"/>\n <path fill=\"url(#lh-topbar__logo--d)\" fill-rule=\"nonzero\" d=\"M6 0l4.125 2.625v3.75H12v2.25h-1.688l1.5 9.375H.188l1.5-9.375H0v-2.25h1.875V2.648z\" transform=\"translate(6 3)\"/>\n </g>\n </svg>\n\n <a href=\"\" class=\"lh-topbar__url\" target=\"_blank\" rel=\"noopener\"></a>\n\n <div class=\"lh-tools\">\n <button id=\"lh-tools-button\" class=\"report-icon report-icon--share lh-tools__button\" title=\"Tools menu\" aria-label=\"Toggle report tools menu\" aria-haspopup=\"menu\" aria-expanded=\"false\" aria-controls=\"lh-tools-dropdown\">\n <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\">\n <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n <path d=\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"/>\n </svg>\n </button>\n <div id=\"lh-tools-dropdown\" role=\"menu\" class=\"lh-tools__dropdown\" aria-labelledby=\"lh-tools-button\">\n <!-- TODO(i18n): localize tools dropdown -->\n <a role=\"menuitem\" tabindex=\"-1\" href=\"#\" class=\"report-icon report-icon--print\" data-action=\"print-summary\">Print Summary</a>\n <a role=\"menuitem\" tabindex=\"-1\" href=\"#\" class=\"report-icon report-icon--print\" data-action=\"print-expanded\">Print Expanded</a>\n <a role=\"menuitem\" tabindex=\"-1\" href=\"#\" class=\"report-icon report-icon--copy\" data-action=\"copy\">Copy JSON</a>\n <a role=\"menuitem\" tabindex=\"-1\" href=\"#\" class=\"report-icon report-icon--download\" data-action=\"save-html\">Save as HTML</a>\n <a role=\"menuitem\" tabindex=\"-1\" href=\"#\" class=\"report-icon report-icon--download\" data-action=\"save-json\">Save as JSON</a>\n <a role=\"menuitem\" tabindex=\"-1\" href=\"#\" class=\"report-icon report-icon--open lh-tools--viewer\" data-action=\"open-viewer\">Open in Viewer</a>\n <a role=\"menuitem\" tabindex=\"-1\" href=\"#\" class=\"report-icon report-icon--open lh-tools--gist\" data-action=\"save-gist\">Save as Gist</a>\n <a role=\"menuitem\" tabindex=\"-1\" href=\"#\" class=\"report-icon report-icon--dark\" data-action=\"toggle-dark\">Toggle Dark Theme</a>\n </div>\n </div>\n </div>\n</template>\n\n<!-- Lighthouse header -->\n<template id=\"tmpl-lh-heading\">\n <style>\n /* CSS Fireworks. Originally by Eddie Lin\n https://codepen.io/paulirish/pen/yEVMbP\n */\n .pyro {\n display: none;\n z-index: 1;\n pointer-events: none;\n }\n .score100 .pyro {\n display: block;\n }\n .score100 .lh-lighthouse stop:first-child {\n stop-color: hsla(200, 12%, 95%, 0);\n }\n .score100 .lh-lighthouse stop:last-child {\n stop-color: hsla(65, 81%, 76%, 1);\n }\n\n .pyro > .before, .pyro > .after {\n position: absolute;\n width: 5px;\n height: 5px;\n border-radius: 2.5px;\n box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;\n animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;\n animation-delay: 1s, 1s, 1s;\n }\n\n .pyro > .after {\n animation-delay: 2.25s, 2.25s, 2.25s;\n animation-duration: 1.25s, 1.25s, 6.25s;\n }\n .fireworks-paused .pyro > div {\n animation-play-state: paused;\n }\n\n @keyframes bang {\n to {\n box-shadow: -70px -115.67px #47ebbc, -28px -99.67px #eb47a4, 58px -31.67px #7eeb47, 13px -141.67px #eb47c5, -19px 6.33px #7347eb, -2px -74.67px #ebd247, 24px -151.67px #eb47e0, 57px -138.67px #b4eb47, -51px -104.67px #479eeb, 62px 8.33px #ebcf47, -93px 0.33px #d547eb, -16px -118.67px #47bfeb, 53px -84.67px #47eb83, 66px -57.67px #eb47bf, -93px -65.67px #91eb47, 30px -13.67px #86eb47, -2px -59.67px #83eb47, -44px 1.33px #eb47eb, 61px -58.67px #47eb73, 5px -22.67px #47e8eb, -66px -28.67px #ebe247, 42px -123.67px #eb5547, -75px 26.33px #7beb47, 15px -52.67px #a147eb, 36px -51.67px #eb8347, -38px -12.67px #eb5547, -46px -59.67px #47eb81, 78px -114.67px #eb47ba, 15px -156.67px #eb47bf, -36px 1.33px #eb4783, -72px -86.67px #eba147, 31px -46.67px #ebe247, -68px 29.33px #47e2eb, -55px 19.33px #ebe047, -56px 27.33px #4776eb, -13px -91.67px #eb5547, -47px -138.67px #47ebc7, -18px -96.67px #eb47ac, 11px -88.67px #4783eb, -67px -28.67px #47baeb, 53px 10.33px #ba47eb, 11px 19.33px #5247eb, -5px -11.67px #eb4791, -68px -4.67px #47eba7, 95px -37.67px #eb478b, -67px -162.67px #eb5d47, -54px -120.67px #eb6847, 49px -12.67px #ebe047, 88px 8.33px #47ebda, 97px 33.33px #eb8147, 6px -71.67px #ebbc47;\n }\n }\n @keyframes gravity {\n to {\n transform: translateY(80px);\n opacity: 0;\n }\n }\n @keyframes position {\n 0%, 19.9% {\n margin-top: 4%;\n margin-left: 47%;\n }\n 20%, 39.9% {\n margin-top: 7%;\n margin-left: 30%;\n }\n 40%, 59.9% {\n margin-top: 6%;\n margin-left: 70%;\n }\n 60%, 79.9% {\n margin-top: 3%;\n margin-left: 20%;\n }\n 80%, 99.9% {\n margin-top: 3%;\n margin-left: 80%;\n }\n }\n </style>\n\n <div class=\"lh-header-container\">\n <div class=\"lh-scores-wrapper-placeholder\"></div>\n </div>\n</template>\n\n\n<!-- Lighthouse footer -->\n<template id=\"tmpl-lh-footer\">\n <style>\n .lh-footer {\n padding: var(--footer-padding-vertical) calc(var(--default-padding) * 2);\n max-width: var(--report-width);\n margin: 0 auto;\n }\n .lh-footer .lh-generated {\n text-align: center;\n }\n .lh-env__title {\n font-size: var(--env-item-font-size-big);\n line-height: var(--env-item-line-height-big);\n text-align: center;\n padding: var(--score-container-padding);\n }\n .lh-env {\n padding: var(--default-padding) 0;\n }\n .lh-env__items {\n padding-left: 16px;\n margin: 0 0 var(--audits-margin-bottom);\n padding: 0;\n }\n .lh-env__items .lh-env__item:nth-child(2n) {\n background-color: var(--env-item-background-color);\n }\n .lh-env__item {\n display: flex;\n padding: var(--env-item-padding);\n position: relative;\n }\n span.lh-env__name {\n font-weight: bold;\n min-width: var(--env-name-min-width);\n flex: 0.5;\n padding: 0 8px;\n }\n span.lh-env__description {\n text-align: left;\n flex: 1;\n }\n </style>\n <footer class=\"lh-footer\">\n <!-- TODO(i18n): localize runtime settings -->\n <div class=\"lh-env\">\n <div class=\"lh-env__title\">Runtime Settings</div>\n <ul class=\"lh-env__items\">\n <template id=\"tmpl-lh-env__items\">\n <li class=\"lh-env__item\">\n <span class=\"lh-env__name\"></span>\n <span class=\"lh-env__description\"></span>\n </li>\n </template>\n </ul>\n </div>\n\n <div class=\"lh-generated\">\n Generated by <b>Lighthouse</b> <span class=\"lh-footer__version\"></span> |\n <a href=\"https://github.com/GoogleChrome/Lighthouse/issues\" target=\"_blank\" rel=\"noopener\">File an issue</a>\n </div>\n </footer>\n</template>\n\n<!-- Lighthouse score gauge -->\n<template id=\"tmpl-lh-gauge\">\n <a href=\"#\" class=\"lh-gauge__wrapper\">\n <!-- Wrapper exists for the ::before plugin icon. Cannot create pseudo-elements on svgs. -->\n <div class=\"lh-gauge__svg-wrapper\">\n <svg viewBox=\"0 0 120 120\" class=\"lh-gauge\">\n <circle class=\"lh-gauge-base\" r=\"56\" cx=\"60\" cy=\"60\"></circle>\n <circle class=\"lh-gauge-arc\" transform=\"rotate(-90 60 60)\" r=\"56\" cx=\"60\" cy=\"60\"></circle>\n </svg>\n </div>\n <div class=\"lh-gauge__percentage\"></div>\n <!-- TODO: should likely be an h2 -->\n <div class=\"lh-gauge__label\"></div>\n </a>\n</template>\n\n\n<!-- Lighthouse PWA badge gauge -->\n<template id=\"tmpl-lh-gauge--pwa\">\n <style>\n .lh-gauge--pwa .lh-gauge--pwa__component {\n display: none;\n }\n .lh-gauge--pwa__wrapper:not(.lh-badged--all) .lh-gauge--pwa__logo > path {\n /* Gray logo unless everything is passing. */\n fill: #B0B0B0;\n }\n\n .lh-gauge--pwa__disc {\n fill: var(--color-gray-200);\n }\n\n .lh-gauge--pwa__logo--primary-color {\n fill: #304FFE;\n }\n\n .lh-gauge--pwa__logo--secondary-color {\n fill: #3D3D3D;\n }\n .dark .lh-gauge--pwa__logo--secondary-color {\n fill: #D8B6B6;\n }\n\n /* No passing groups. */\n .lh-gauge--pwa__wrapper:not([class*='lh-badged--']) .lh-gauge--pwa__na-line {\n display: inline;\n }\n /* Just optimized. Same n/a line as no passing groups. */\n .lh-gauge--pwa__wrapper.lh-badged--pwa-optimized:not(.lh-badged--pwa-installable):not(.lh-badged--pwa-fast-reliable) .lh-gauge--pwa__na-line {\n display: inline;\n }\n\n /* Just fast and reliable. */\n .lh-gauge--pwa__wrapper.lh-badged--pwa-fast-reliable:not(.lh-badged--pwa-installable) .lh-gauge--pwa__fast-reliable-badge {\n display: inline;\n }\n\n /* Just installable. */\n .lh-gauge--pwa__wrapper.lh-badged--pwa-installable:not(.lh-badged--pwa-fast-reliable) .lh-gauge--pwa__installable-badge {\n display: inline;\n }\n\n /* Fast and reliable and installable. */\n .lh-gauge--pwa__wrapper.lh-badged--pwa-fast-reliable.lh-badged--pwa-installable .lh-gauge--pwa__fast-reliable-installable-badges {\n display: inline;\n }\n\n /* All passing groups. */\n .lh-gauge--pwa__wrapper.lh-badged--all .lh-gauge--pwa__check-circle {\n display: inline;\n }\n </style>\n\n <a href=\"#\" class=\"lh-gauge__wrapper lh-gauge--pwa__wrapper\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 60 60\" class=\"lh-gauge lh-gauge--pwa\">\n <defs>\n <linearGradient id=\"lh-gauge--pwa__check-circle__gradient\" x1=\"50%\" y1=\"0%\" x2=\"50%\" y2=\"100%\">\n <stop stop-color=\"#00C852\" offset=\"0%\"></stop>\n <stop stop-color=\"#009688\" offset=\"100%\"></stop>\n </linearGradient>\n <linearGradient id=\"lh-gauge--pwa__installable__shadow-gradient\" x1=\"76.056%\" x2=\"24.111%\" y1=\"82.995%\" y2=\"24.735%\">\n <stop stop-color=\"#A5D6A7\" offset=\"0%\"></stop>\n <stop stop-color=\"#80CBC4\" offset=\"100%\"></stop>\n </linearGradient>\n <linearGradient id=\"lh-gauge--pwa__fast-reliable__shadow-gradient\" x1=\"76.056%\" y1=\"82.995%\" x2=\"25.678%\" y2=\"26.493%\">\n <stop stop-color=\"#64B5F6\" offset=\"0%\"></stop>\n <stop stop-color=\"#2979FF\" offset=\"100%\"></stop>\n </linearGradient>\n\n <g id=\"lh-gauge--pwa__fast-reliable-badge\">\n <circle fill=\"#FFFFFF\" cx=\"10\" cy=\"10\" r=\"10\"></circle>\n <path fill=\"#304FFE\" d=\"M10 3.58l5.25 2.34v3.5c0 3.23-2.24 6.26-5.25 7-3.01-.74-5.25-3.77-5.25-7v-3.5L10 3.58zm-.47 10.74l2.76-4.83.03-.07c.04-.08 0-.24-.22-.24h-1.64l.47-3.26h-.47l-2.7 4.77c-.02.01.05-.1-.04.05-.09.16-.1.31.18.31h1.63l-.47 3.27h.47z\"/>\n </g>\n <g id=\"lh-gauge--pwa__installable-badge\">\n <circle fill=\"#FFFFFF\" cx=\"10\" cy=\"10\" r=\"10\"></circle>\n <path fill=\"#009688\" d=\"M10 4.167A5.835 5.835 0 0 0 4.167 10 5.835 5.835 0 0 0 10 15.833 5.835 5.835 0 0 0 15.833 10 5.835 5.835 0 0 0 10 4.167zm2.917 6.416h-2.334v2.334H9.417v-2.334H7.083V9.417h2.334V7.083h1.166v2.334h2.334v1.166z\"/>\n </g>\n </defs>\n\n <g stroke=\"none\" fill-rule=\"nonzero\">\n <!-- Background and PWA logo (color by default) -->\n <circle class=\"lh-gauge--pwa__disc\" cx=\"30\" cy=\"30\" r=\"30\"></circle>\n <g class=\"lh-gauge--pwa__logo\">\n <path class=\"lh-gauge--pwa__logo--secondary-color\" d=\"M35.66 19.39l.7-1.75h2L37.4 15 38.6 12l3.4 9h-2.51l-.58-1.61z\"/>\n <path class=\"lh-gauge--pwa__logo--primary-color\" d=\"M33.52 21l3.65-9h-2.42l-2.5 5.82L30.5 12h-1.86l-1.9 5.82-1.35-2.65-1.21 3.72L25.4 21h2.38l1.72-5.2 1.64 5.2z\"/>\n <path class=\"lh-gauge--pwa__logo--secondary-color\" fill-rule=\"nonzero\" d=\"M20.3 17.91h1.48c.45 0 .85-.05 1.2-.15l.39-1.18 1.07-3.3a2.64 2.64 0 0 0-.28-.37c-.55-.6-1.36-.91-2.42-.91H18v9h2.3V17.9zm1.96-3.84c.22.22.33.5.33.87 0 .36-.1.65-.29.87-.2.23-.59.35-1.15.35h-.86v-2.41h.87c.52 0 .89.1 1.1.32z\"/>\n </g>\n\n <!-- No badges. -->\n <rect class=\"lh-gauge--pwa__component lh-gauge--pwa__na-line\" fill=\"#FFFFFF\" x=\"20\" y=\"32\" width=\"20\" height=\"4\" rx=\"2\"></rect>\n\n <!-- Just fast and reliable. -->\n <g class=\"lh-gauge--pwa__component lh-gauge--pwa__fast-reliable-badge\" transform=\"translate(20, 29)\">\n <path fill=\"url(#lh-gauge--pwa__fast-reliable__shadow-gradient)\" d=\"M33.63 19.49A30 30 0 0 1 16.2 30.36L3 17.14 17.14 3l16.49 16.49z\"/>\n <use href=\"#lh-gauge--pwa__fast-reliable-badge\" />\n </g>\n\n <!-- Just installable. -->\n <g class=\"lh-gauge--pwa__component lh-gauge--pwa__installable-badge\" transform=\"translate(20, 29)\">\n <path fill=\"url(#lh-gauge--pwa__installable__shadow-gradient)\" d=\"M33.629 19.487c-4.272 5.453-10.391 9.39-17.415 10.869L3 17.142 17.142 3 33.63 19.487z\"/>\n <use href=\"#lh-gauge--pwa__installable-badge\" />\n </g>\n\n <!-- Fast and reliable and installable. -->\n <g class=\"lh-gauge--pwa__component lh-gauge--pwa__fast-reliable-installable-badges\">\n <g transform=\"translate(8, 29)\"> <!-- fast and reliable -->\n <path fill=\"url(#lh-gauge--pwa__fast-reliable__shadow-gradient)\" d=\"M16.321 30.463L3 17.143 17.142 3l22.365 22.365A29.864 29.864 0 0 1 22 31c-1.942 0-3.84-.184-5.679-.537z\"/>\n <use href=\"#lh-gauge--pwa__fast-reliable-badge\" />\n </g>\n <g transform=\"translate(32, 29)\"> <!-- installable -->\n <path fill=\"url(#lh-gauge--pwa__installable__shadow-gradient)\" d=\"M25.982 11.84a30.107 30.107 0 0 1-13.08 15.203L3 17.143 17.142 3l8.84 8.84z\"/>\n <use href=\"#lh-gauge--pwa__installable-badge\" />\n </g>\n </g>\n\n <!-- Full PWA. -->\n <g class=\"lh-gauge--pwa__component lh-gauge--pwa__check-circle\" transform=\"translate(18, 28)\">\n <circle fill=\"#FFFFFF\" cx=\"12\" cy=\"12\" r=\"12\"></circle>\n <path fill=\"url(#lh-gauge--pwa__check-circle__gradient)\" d=\"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"></path>\n </g>\n </g>\n </svg>\n\n <div class=\"lh-gauge__label\"></div>\n </a>\n</template>\n\n<!-- Lighthouse crtiical request chains component -->\n<template id=\"tmpl-lh-crc\">\n <div class=\"lh-crc-container\">\n <style>\n .lh-crc .tree-marker {\n width: 12px;\n height: 26px;\n display: block;\n float: left;\n background-position: top left;\n }\n .lh-crc .horiz-down {\n background: url('data:image/svg+xml;utf8,<svg width=\"16\" height=\"26\" viewBox=\"0 0 16 26\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"%23D8D8D8\" fill-rule=\"evenodd\"><path d=\"M16 12v2H-2v-2z\"/><path d=\"M9 12v14H7V12z\"/></g></svg>');\n }\n .lh-crc .right {\n background: url('data:image/svg+xml;utf8,<svg width=\"16\" height=\"26\" viewBox=\"0 0 16 26\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M16 12v2H0v-2z\" fill=\"%23D8D8D8\" fill-rule=\"evenodd\"/></svg>');\n }\n .lh-crc .up-right {\n background: url('data:image/svg+xml;utf8,<svg width=\"16\" height=\"26\" viewBox=\"0 0 16 26\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 0h2v14H7zm2 12h7v2H9z\" fill=\"%23D8D8D8\" fill-rule=\"evenodd\"/></svg>');\n }\n .lh-crc .vert-right {\n background: url('data:image/svg+xml;utf8,<svg width=\"16\" height=\"26\" viewBox=\"0 0 16 26\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 0h2v27H7zm2 12h7v2H9z\" fill=\"%23D8D8D8\" fill-rule=\"evenodd\"/></svg>');\n }\n .lh-crc .vert {\n background: url('data:image/svg+xml;utf8,<svg width=\"16\" height=\"26\" viewBox=\"0 0 16 26\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 0h2v26H7z\" fill=\"%23D8D8D8\" fill-rule=\"evenodd\"/></svg>');\n }\n .lh-crc .crc-tree {\n font-size: 14px;\n width: 100%;\n overflow-x: auto;\n }\n .lh-crc .crc-node {\n height: 26px;\n line-height: 26px;\n white-space: nowrap;\n }\n .lh-crc .crc-node__tree-value {\n margin-left: 10px;\n }\n .lh-crc .crc-node__tree-value div {\n display: inline;\n }\n .lh-crc .crc-node__chain-duration {\n font-weight: 700;\n }\n .lh-crc .crc-initial-nav {\n color: #595959;\n font-style: italic;\n }\n .lh-crc__summary-value {\n margin-bottom: 10px;\n }\n </style>\n <div>\n <div class=\"lh-crc__summary-value\">\n <span class=\"lh-crc__longest_duration_label\"></span> <b class=\"lh-crc__longest_duration\"></b>\n </div>\n </div>\n <div class=\"lh-crc\">\n <div class=\"crc-initial-nav\"></div>\n <!-- stamp for each chain -->\n <template id=\"tmpl-lh-crc__chains\">\n <div class=\"crc-node\">\n <span class=\"crc-node__tree-marker\">\n\n </span>\n <span class=\"crc-node__tree-value\">\n\n </span>\n </div>\n </template>\n </div>\n </div>\n</template>\n\n<template id=\"tmpl-lh-3p-filter\">\n <style>\n .lh-3p-filter {\n background-color: var(--table-higlight-background-color);\n color: var(--color-gray-600);\n float: right;\n padding: 6px;\n }\n .lh-3p-filter-label, .lh-3p-filter-input {\n vertical-align: middle;\n user-select: none;\n }\n .lh-3p-filter-input:disabled + .lh-3p-ui-string {\n text-decoration: line-through;\n }\n </style>\n <div class=\"lh-3p-filter\">\n <label class=\"lh-3p-filter-label\">\n <input type=\"checkbox\" class=\"lh-3p-filter-input\" checked />\n <span class=\"lh-3p-ui-string\">Show 3rd party resources</span> (<span class=\"lh-3p-filter-count\"></span>)\n </label>\n </div>\n</template>\n\n<!-- Lighthouse snippet component -->\n<template id=\"tmpl-lh-snippet\">\n <div class=\"lh-snippet\">\n <style>\n :root {\n --snippet-highlight-light: #fbf1f2;\n --snippet-highlight-dark: #ffd6d8;\n }\n\n .lh-snippet__header {\n position: relative;\n overflow: hidden;\n padding: 10px;\n border-bottom: none;\n color: var(--snippet-color);\n background-color: var(--snippet-background-color);\n border: 1px solid var(--report-border-color-secondary);\n }\n .lh-snippet__title {\n font-weight: bold;\n float: left;\n }\n .lh-snippet__node {\n float: left;\n margin-left: 4px;\n }\n .lh-snippet__toggle-expand {\n padding: 1px 7px;\n margin-top: -1px;\n margin-right: -7px;\n float: right;\n background: transparent;\n border: none;\n cursor: pointer;\n font-size: 14px;\n color: #0c50c7;\n }\n\n .lh-snippet__snippet {\n overflow: auto;\n border: 1px solid var(--report-border-color-secondary);\n }\n /* Container needed so that all children grow to the width of the scroll container */\n .lh-snippet__snippet-inner {\n display: inline-block;\n min-width: 100%;\n }\n\n .lh-snippet:not(.lh-snippet--expanded) .lh-snippet__show-if-expanded {\n display: none;\n }\n .lh-snippet.lh-snippet--expanded .lh-snippet__show-if-collapsed {\n display: none;\n }\n\n .lh-snippet__line {\n background: white;\n white-space: pre;\n display: flex;\n }\n .lh-snippet__line:not(.lh-snippet__line--message):first-child {\n padding-top: 4px;\n }\n .lh-snippet__line:not(.lh-snippet__line--message):last-child {\n padding-bottom: 4px;\n }\n .lh-snippet__line--content-highlighted {\n background: var(--snippet-highlight-dark);\n }\n .lh-snippet__line--message {\n background: var(--snippet-highlight-light);\n }\n .lh-snippet__line--message .lh-snippet__line-number {\n padding-top: 10px;\n padding-bottom: 10px;\n }\n .lh-snippet__line--message code {\n padding: 10px;\n padding-left: 5px;\n color: var(--color-fail);\n font-family: var(--report-font-family);\n }\n .lh-snippet__line--message code {\n white-space: normal;\n }\n .lh-snippet__line-icon {\n padding-top: 10px;\n display: none;\n }\n .lh-snippet__line--message .lh-snippet__line-icon {\n display: block;\n }\n .lh-snippet__line-icon:before {\n content: \"\";\n display: inline-block;\n vertical-align: middle;\n margin-right: 4px;\n width: var(--score-icon-size);\n height: var(--score-icon-size);\n background-image: var(--fail-icon-url);\n }\n .lh-snippet__line-number {\n flex-shrink: 0;\n width: 40px;\n text-align: right;\n font-family: monospace;\n padding-right: 5px;\n margin-right: 5px;\n color: var(--color-gray-600);\n user-select: none;\n }\n </style>\n <template id=\"tmpl-lh-snippet__header\">\n <div class=\"lh-snippet__header\">\n <div class=\"lh-snippet__title\"></div>\n <div class=\"lh-snippet__node\"></div>\n <button class=\"lh-snippet__toggle-expand\">\n <span class=\"lh-snippet__btn-label-collapse lh-snippet__show-if-expanded\"></span>\n <span class=\"lh-snippet__btn-label-expand lh-snippet__show-if-collapsed\"></span>\n </button>\n </div>\n </template>\n <template id=\"tmpl-lh-snippet__content\">\n <div class=\"lh-snippet__snippet\">\n <div class=\"lh-snippet__snippet-inner\"></div>\n </div>\n </template>\n <template id=\"tmpl-lh-snippet__line\">\n <div class=\"lh-snippet__line\">\n <div class=\"lh-snippet__line-number\"></div>\n <div class=\"lh-snippet__line-icon\"></div>\n <code></code>\n </div>\n </template>\n </div>\n </template>\n\n\n/*# sourceURL=audits/lighthouse/templates.html */";Root.Runtime.cachedResources["audits/lighthouse/report.css"]="/**\n * @license\n * Copyright 2017 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS-IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/*\n Naming convention:\n\n If a variable is used for a specific component: --{component}-{property name}-{modifier}\n\n Both {component} and {property name} should be kebab-case. If the target is the entire page,\n use 'report' for the component. The property name should not be abbreviated. Use the\n property name the variable is intended for - if it's used for multiple, a common descriptor\n is fine (ex: 'size' for a variable applied to 'width' and 'height'). If a variable is shared\n across multiple components, either create more variables or just drop the \"{component}-\"\n part of the name. Append any modifiers at the end (ex: 'big', 'dark').\n\n For colors: --color-{hue}-{intensity}\n\n {intensity} is the Material Design tag - 700, A700, etc.\n*/\n.lh-vars {\n /* Palette using Material Design Colors\n * https://www.materialui.co/colors */\n --color-amber-50: #FFF8E1;\n --color-blue-200: #90CAF9;\n --color-blue-900: #0D47A1;\n --color-blue-A700: #2962FF;\n --color-cyan-500: #00BCD4;\n --color-gray-100: #F5F5F5;\n --color-gray-200: #E0E0E0;\n --color-gray-400: #BDBDBD;\n --color-gray-50: #FAFAFA;\n --color-gray-500: #9E9E9E;\n --color-gray-600: #757575;\n --color-gray-700: #616161;\n --color-gray-800: #424242;\n --color-gray-900: #212121;\n --color-gray: #000000;\n --color-green-700: #018642;\n --color-green: #0CCE6B;\n --color-orange-700: #D04900;\n --color-orange: #FFA400;\n --color-red-700: #EB0F00;\n --color-red: #FF4E42;\n --color-teal-600: #00897B;\n --color-white: #FFFFFF;\n\n /* Context-specific colors */\n --color-average-secondary: var(--color-orange-700);\n --color-average: var(--color-orange);\n --color-fail-secondary: var(--color-red-700);\n --color-fail: var(--color-red);\n --color-informative: var(--color-blue-900);\n --color-pass-secondary: var(--color-green-700);\n --color-pass: var(--color-green);\n --color-hover: var(--color-gray-50);\n\n /* Component variables */\n --audit-description-padding-left: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right));\n --audit-explanation-line-height: 16px;\n --audit-group-margin-bottom: 40px;\n --audit-group-padding-vertical: 8px;\n --audit-margin-horizontal: 5px;\n --audit-padding-vertical: 8px;\n --category-header-font-size: 20px;\n --category-padding: 40px;\n --chevron-line-stroke: var(--color-gray-600);\n --chevron-size: 12px;\n --default-padding: 12px;\n --env-item-background-color: var(--color-gray-100);\n --env-item-font-size: 28px;\n --env-item-line-height: 36px;\n --env-item-padding: 10px 0px;\n --env-name-min-width: 220px;\n --footer-padding-vertical: 16px;\n --gauge-circle-size-big: 112px;\n --gauge-circle-size: 80px;\n --gauge-label-font-size-big: 28px;\n --gauge-label-font-size: 20px;\n --gauge-label-line-height-big: 36px;\n --gauge-label-line-height: 26px;\n --gauge-percentage-font-size-big: 38px;\n --gauge-percentage-font-size: 28px;\n --gauge-wrapper-width: 148px;\n --header-line-height: 24px;\n --highlighter-background-color: var(--report-text-color);\n --icon-square-size: calc(var(--score-icon-size) * 0.88);\n --image-preview-size: 48px;\n --metric-toggle-lines-fill: #7F7F7F;\n --metrics-toggle-background-color: var(--color-gray-200);\n --plugin-badge-background-color: var(--color-white);\n --plugin-badge-size-big: calc(var(--gauge-circle-size-big) / 2.7);\n --plugin-badge-size: calc(var(--gauge-circle-size) / 2.7);\n --plugin-icon-size: 65%;\n --pwa-icon-margin: 0 6px 0 -2px;\n --pwa-icon-size: var(--topbar-logo-size);\n --report-background-color: #fff;\n --report-border-color-secondary: #ebebeb;\n --report-font-family-monospace: 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;\n --report-font-family: Roboto, Helvetica, Arial, sans-serif;\n --report-font-size: 16px;\n --report-line-height: 24px;\n --report-min-width: 400px;\n --report-text-color-secondary: var(--color-gray-800);\n --report-text-color: var(--color-gray-900);\n --report-width: calc(60 * var(--report-font-size));\n --score-container-padding: 8px;\n --score-icon-background-size: 24px;\n --score-icon-margin-left: 4px;\n --score-icon-margin-right: 12px;\n --score-icon-margin: 0 var(--score-icon-margin-right) 0 var(--score-icon-margin-left);\n --score-icon-size: 12px;\n --scores-container-padding: 20px 0 20px 0;\n --scorescale-height: 6px;\n --scorescale-width: 18px;\n --section-padding-vertical: 12px;\n --snippet-background-color: var(--color-gray-50);\n --snippet-color: var(--color-gray-800);\n --sparkline-height: 5px;\n --stackpack-padding-horizontal: 10px;\n --sticky-header-background-color: var(--report-background-color);\n --table-higlight-background-color: hsla(0, 0%, 75%, 0.1);\n --tools-icon-color: var(--color-gray-600);\n --tools-icon-size: var(--score-icon-background-size);\n --topbar-background-color: var(--color-gray-100);\n --topbar-height: 32px;\n --topbar-logo-size: 24px;\n --topbar-padding: 0 8px;\n --toplevel-warning-padding: 22px;\n\n /* SVGs */\n --plugin-icon-url-dark: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\" fill=\"%23FFFFFF\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z\"/></svg>');\n --plugin-icon-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\" fill=\"%23757575\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z\"/></svg>');\n\n --pass-icon-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><title>check</title><path fill=\"%23178239\" d=\"M24 4C12.95 4 4 12.95 4 24c0 11.04 8.95 20 20 20 11.04 0 20-8.96 20-20 0-11.05-8.96-20-20-20zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z\"/></svg>');\n --average-icon-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><title>info</title><path fill=\"%23E67700\" d=\"M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm2 30h-4V22h4v12zm0-16h-4v-4h4v4z\"/></svg>');\n --fail-icon-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><title>warn</title><path fill=\"%23C7221F\" d=\"M2 42h44L24 4 2 42zm24-6h-4v-4h4v4zm0-8h-4v-8h4v8z\"/></svg>');\n\n --pwa-fast-reliable-gray-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"nonzero\"><circle fill=\"%23DAE0E3\" cx=\"12\" cy=\"12\" r=\"12\"/><path d=\"M12.3 4l6.3 2.8V11c0 3.88-2.69 7.52-6.3 8.4C8.69 18.52 6 14.89 6 11V6.8L12.3 4zm-.56 12.88l3.3-5.79.04-.08c.05-.1.01-.29-.26-.29h-1.96l.56-3.92h-.56L9.6 12.52c0 .03.07-.12-.03.07-.11.2-.12.37.2.37h1.97l-.56 3.92h.56z\" fill=\"%23FFF\"/></g></svg>');\n --pwa-installable-gray-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"nonzero\"><circle fill=\"%23DAE0E3\" cx=\"12\" cy=\"12\" r=\"12\"/><path d=\"M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm3.5 7.7h-2.8v2.8h-1.4v-2.8H8.5v-1.4h2.8V8.5h1.4v2.8h2.8v1.4z\" fill=\"%23FFF\"/></g></svg>');\n --pwa-optimized-gray-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><rect fill=\"%23DAE0E3\" width=\"24\" height=\"24\" rx=\"12\"/><path fill=\"%23FFF\" d=\"M12 15.07l3.6 2.18-.95-4.1 3.18-2.76-4.2-.36L12 6.17l-1.64 3.86-4.2.36 3.2 2.76-.96 4.1z\"/><path d=\"M5 5h14v14H5z\"/></g></svg>');\n\n --pwa-fast-reliable-gray-url-dark: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"nonzero\"><circle fill=\"%23424242\" cx=\"12\" cy=\"12\" r=\"12\"/><path d=\"M12.3 4l6.3 2.8V11c0 3.88-2.69 7.52-6.3 8.4C8.69 18.52 6 14.89 6 11V6.8L12.3 4zm-.56 12.88l3.3-5.79.04-.08c.05-.1.01-.29-.26-.29h-1.96l.56-3.92h-.56L9.6 12.52c0 .03.07-.12-.03.07-.11.2-.12.37.2.37h1.97l-.56 3.92h.56z\" fill=\"%23FFF\"/></g></svg>');\n --pwa-installable-gray-url-dark: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"nonzero\"><circle fill=\"%23424242\" cx=\"12\" cy=\"12\" r=\"12\"/><path d=\"M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm3.5 7.7h-2.8v2.8h-1.4v-2.8H8.5v-1.4h2.8V8.5h1.4v2.8h2.8v1.4z\" fill=\"%23FFF\"/></g></svg>');\n --pwa-optimized-gray-url-dark: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><rect fill=\"%23424242\" width=\"24\" height=\"24\" rx=\"12\"/><path fill=\"%23FFF\" d=\"M12 15.07l3.6 2.18-.95-4.1 3.18-2.76-4.2-.36L12 6.17l-1.64 3.86-4.2.36 3.2 2.76-.96 4.1z\"/><path d=\"M5 5h14v14H5z\"/></g></svg>');\n\n --pwa-fast-reliable-color-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill-rule=\"nonzero\" fill=\"none\"><circle fill=\"%230CCE6B\" cx=\"12\" cy=\"12\" r=\"12\"/><path d=\"M12 4.3l6.3 2.8v4.2c0 3.88-2.69 7.52-6.3 8.4-3.61-.88-6.3-4.51-6.3-8.4V7.1L12 4.3zm-.56 12.88l3.3-5.79.04-.08c.05-.1.01-.29-.26-.29h-1.96l.56-3.92h-.56L9.3 12.82c0 .03.07-.12-.03.07-.11.2-.12.37.2.37h1.97l-.56 3.92h.56z\" fill=\"%23FFF\"/></g></svg>');\n --pwa-installable-color-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill-rule=\"nonzero\" fill=\"none\"><circle fill=\"%230CCE6B\" cx=\"12\" cy=\"12\" r=\"12\"/><path d=\"M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm3.5 7.7h-2.8v2.8h-1.4v-2.8H8.5v-1.4h2.8V8.5h1.4v2.8h2.8v1.4z\" fill=\"%23FFF\"/></g></svg>');\n --pwa-optimized-color-url: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><rect fill=\"%230CCE6B\" width=\"24\" height=\"24\" rx=\"12\"/><path d=\"M5 5h14v14H5z\"/><path fill=\"%23FFF\" d=\"M12 15.07l3.6 2.18-.95-4.1 3.18-2.76-4.2-.36L12 6.17l-1.64 3.86-4.2.36 3.2 2.76-.96 4.1z\"/></g></svg>');\n}\n\n@media not print {\n .lh-vars.dark {\n /* Pallete */\n --color-gray-200: var(--color-gray-800);\n --color-gray-400: var(--color-gray-600);\n --color-gray-50: #757575;\n --color-gray-600: var(--color-gray-500);\n --color-green-700: var(--color-green);\n --color-orange-700: var(--color-orange);\n --color-red-700: var(--color-red);\n --color-teal-600: var(--color-cyan-500);\n\n /* Context-specific colors */\n --color-hover: rgba(0, 0, 0, 0.2);\n --color-informative: var(--color-blue-200);\n\n /* Component variables */\n --env-item-background-color: var(--color-gray);\n --plugin-badge-background-color: var(--color-gray-800);\n --report-background-color: var(--color-gray-900);\n --report-border-color-secondary: var(--color-gray-200);\n --report-text-color-secondary: var(--color-gray-400);\n --report-text-color: var(--color-gray-100);\n --topbar-background-color: var(--color-gray);\n\n /* SVGs */\n --plugin-icon-url: var(--plugin-icon-url-dark);\n --pwa-fast-reliable-gray-url: var(--pwa-fast-reliable-gray-url-dark);\n --pwa-installable-gray-url: var(--pwa-installable-gray-url-dark);\n --pwa-optimized-gray-url: var(--pwa-optimized-gray-url-dark);\n }\n}\n\n@media only screen and (max-width: 480px) {\n .lh-vars {\n --audit-group-margin-bottom: 20px;\n --category-padding: 24px;\n --env-name-min-width: 120px;\n --gauge-circle-size-big: 96px;\n --gauge-circle-size: 72px;\n --gauge-label-font-size-big: 22px;\n --gauge-label-font-size: 14px;\n --gauge-label-line-height-big: 26px;\n --gauge-label-line-height: 20px;\n --gauge-percentage-font-size-big: 34px;\n --gauge-percentage-font-size: 26px;\n --gauge-wrapper-width: 112px;\n --header-padding: 16px 0 16px 0;\n --image-preview-size: 24px;\n --plugin-icon-size: 75%;\n --pwa-icon-margin: 0 7px 0 -3px;\n --report-font-size: 14px;\n --report-line-height: 20px;\n --score-icon-margin-left: 2px;\n --score-icon-size: 10px;\n --topbar-height: 28px;\n --topbar-logo-size: 20px;\n }\n\n /* Not enough space to adequately show the relative savings bars. */\n .lh-sparkline {\n display: none;\n }\n}\n\n.lh-vars.lh-devtools {\n --audit-explanation-line-height: 14px;\n --audit-group-margin-bottom: 20px;\n --audit-group-padding-vertical: 12px;\n --audit-padding-vertical: 4px;\n --category-header-font-size: 16px;\n --category-padding: 12px;\n --default-padding: 12px;\n --env-name-min-width: 120px;\n --footer-padding-vertical: 8px;\n --gauge-circle-size-big: 72px;\n --gauge-circle-size: 64px;\n --gauge-label-font-size-big: 22px;\n --gauge-label-font-size: 14px;\n --gauge-label-line-height-big: 26px;\n --gauge-label-line-height: 20px;\n --gauge-percentage-font-size-big: 34px;\n --gauge-percentage-font-size: 26px;\n --gauge-wrapper-width: 97px;\n --header-line-height: 20px;\n --header-padding: 16px 0 16px 0;\n --plugin-icon-size: 75%;\n --pwa-icon-margin: 0 7px 0 -3px;\n --report-font-family-monospace: 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;\n --report-font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;\n --report-font-size: 12px;\n --report-line-height: 20px;\n --score-icon-margin-left: 2px;\n --score-icon-size: 10px;\n --section-padding-vertical: 8px;\n}\n\n.lh-devtools.lh-root {\n height: 100%;\n}\n.lh-devtools.lh-root img {\n /* Override devtools default 'min-width: 0' so svg without size in a flexbox isn't collapsed. */\n min-width: auto;\n}\n.lh-devtools .lh-container {\n overflow-y: scroll;\n height: calc(100% - var(--topbar-height));\n}\n@media print {\n .lh-devtools .lh-container {\n overflow: unset;\n }\n}\n.lh-devtools .lh-sticky-header {\n /* This is normally the height of the topbar, but we want it to stick to the top of our scroll container .lh-container` */\n top: 0;\n}\n\n@keyframes fadeIn {\n 0% { opacity: 0;}\n 100% { opacity: 0.6;}\n}\n\n.lh-root *, .lh-root *::before, .lh-root *::after {\n box-sizing: border-box;\n -webkit-font-smoothing: antialiased;\n}\n\n.lh-root {\n font-family: var(--report-font-family);\n font-size: var(--report-font-size);\n margin: 0;\n line-height: var(--report-line-height);\n background: var(--report-background-color);\n scroll-behavior: smooth;\n color: var(--report-text-color);\n}\n\n.lh-root :focus {\n outline: -webkit-focus-ring-color auto 3px;\n}\n.lh-root summary:focus {\n outline: none;\n box-shadow: 0 0 0 1px hsl(217, 89%, 61%);\n}\n\n.lh-root [hidden] {\n display: none !important;\n}\n\n.lh-root details > summary {\n cursor: pointer;\n}\n\n.lh-container {\n /*\n Text wrapping in the report is so much FUN!\n We have a `word-break: break-word;` globally here to prevent a few common scenarios, namely\n long non-breakable text (usually URLs) found in:\n 1. The footer\n 2. .lh-node (outerHTML)\n 3. .lh-code\n\n With that sorted, the next challenge is appropriate column sizing and text wrapping inside our\n .lh-details tables. Even more fun.\n * We don't want table headers (\"Potential Savings (ms)\") to wrap or their column values, but\n we'd be happy for the URL column to wrap if the URLs are particularly long.\n * We want the narrow columns to remain narrow, providing the most column width for URL\n * We don't want the table to extend past 100% width.\n * Long URLs in the URL column can wrap. Util.getURLDisplayName maxes them out at 64 characters,\n but they do not get any overflow:ellipsis treatment.\n */\n word-break: break-word;\n}\n\n.lh-audit-group a,\n.lh-category-header__description a,\n.lh-audit__description a,\n.lh-footer a {\n color: var(--color-informative);\n}\n\n.lh-audit__description, .lh-audit__stackpack {\n --inner-audit-padding-right: var(--stackpack-padding-horizontal);\n padding-left: var(--audit-description-padding-left);\n padding-right: var(--inner-audit-padding-right);\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n.lh-details {\n font-size: var(--report-font-size);\n margin-top: var(--default-padding);\n margin-bottom: var(--default-padding);\n margin-left: var(--audit-description-padding-left);\n /* whatever the .lh-details side margins are */\n width: 100%;\n}\n\n.lh-details.flex .lh-code {\n max-width: 70%;\n}\n\n.lh-audit__stackpack {\n display: flex;\n align-items: center;\n}\n\n.lh-audit__stackpack__img {\n max-width: 50px;\n margin-right: var(--default-padding)\n}\n\n/* Report header */\n\n.report-icon {\n opacity: 0.7;\n}\n.report-icon:hover {\n opacity: 1;\n}\n.report-icon[disabled] {\n opacity: 0.3;\n pointer-events: none;\n}\n\n.report-icon--print {\n background-image: 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=\"M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z\"/><path fill=\"none\" d=\"M0 0h24v24H0z\"/></svg>');\n}\n.report-icon--copy {\n background-image: url('data:image/svg+xml;utf8,<svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z\"/></svg>');\n}\n.report-icon--open {\n background-image: url('data:image/svg+xml;utf8,<svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z\"/></svg>');\n}\n.report-icon--download {\n background-image: url('data:image/svg+xml;utf8,<svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z\"/><path d=\"M0 0h24v24H0z\" fill=\"none\"/></svg>');\n}\n.report-icon--dark {\n background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 100 125\"><path d=\"M50 23.587c-16.27 0-22.799 12.574-22.799 21.417 0 12.917 10.117 22.451 12.436 32.471h20.726c2.32-10.02 12.436-19.554 12.436-32.471 0-8.843-6.528-21.417-22.799-21.417zM39.637 87.161c0 3.001 1.18 4.181 4.181 4.181h.426l.41 1.231C45.278 94.449 46.042 95 48.019 95h3.963c1.978 0 2.74-.551 3.365-2.427l.409-1.231h.427c3.002 0 4.18-1.18 4.18-4.181V80.91H39.637v6.251zM50 18.265c1.26 0 2.072-.814 2.072-2.073v-9.12C52.072 5.813 51.26 5 50 5c-1.259 0-2.072.813-2.072 2.073v9.12c0 1.259.813 2.072 2.072 2.072zM68.313 23.727c.994.774 2.135.634 2.91-.357l5.614-7.187c.776-.992.636-2.135-.356-2.909-.992-.776-2.135-.636-2.91.357l-5.613 7.186c-.778.993-.636 2.135.355 2.91zM91.157 36.373c-.306-1.222-1.291-1.815-2.513-1.51l-8.85 2.207c-1.222.305-1.814 1.29-1.51 2.512.305 1.223 1.291 1.814 2.513 1.51l8.849-2.206c1.223-.305 1.816-1.291 1.511-2.513zM86.757 60.48l-8.331-3.709c-1.15-.512-2.225-.099-2.736 1.052-.512 1.151-.1 2.224 1.051 2.737l8.33 3.707c1.15.514 2.225.101 2.736-1.05.513-1.149.1-2.223-1.05-2.737zM28.779 23.37c.775.992 1.917 1.131 2.909.357.992-.776 1.132-1.917.357-2.91l-5.615-7.186c-.775-.992-1.917-1.132-2.909-.357s-1.131 1.917-.356 2.909l5.614 7.187zM21.715 39.583c.305-1.223-.288-2.208-1.51-2.513l-8.849-2.207c-1.222-.303-2.208.289-2.513 1.511-.303 1.222.288 2.207 1.511 2.512l8.848 2.206c1.222.304 2.208-.287 2.513-1.509zM21.575 56.771l-8.331 3.711c-1.151.511-1.563 1.586-1.05 2.735.511 1.151 1.586 1.563 2.736 1.052l8.331-3.711c1.151-.511 1.563-1.586 1.05-2.735-.512-1.15-1.585-1.562-2.736-1.052z\"/></svg>');\n}\n\n/* Node */\n.lh-node__snippet {\n font-family: var(--report-font-family-monospace);\n color: var(--color-teal-600);\n font-size: 12px;\n line-height: 1.5em;\n}\n\n/* Score */\n\n.lh-audit__score-icon {\n width: var(--score-icon-size);\n height: var(--score-icon-size);\n margin: var(--score-icon-margin);\n}\n\n.lh-audit--pass .lh-audit__display-text {\n color: var(--color-pass-secondary);\n}\n.lh-audit--pass .lh-audit__score-icon {\n border-radius: 100%;\n background: var(--color-pass);\n}\n\n.lh-audit--average .lh-audit__display-text {\n color: var(--color-average-secondary);\n}\n.lh-audit--average .lh-audit__score-icon {\n background: var(--color-average);\n width: var(--icon-square-size);\n height: var(--icon-square-size);\n}\n\n.lh-audit--fail .lh-audit__display-text {\n color: var(--color-fail-secondary);\n}\n.lh-audit--fail .lh-audit__score-icon,\n.lh-audit--error .lh-audit__score-icon {\n border-left: calc(var(--score-icon-size) / 2) solid transparent;\n border-right: calc(var(--score-icon-size) / 2) solid transparent;\n border-bottom: var(--score-icon-size) solid var(--color-fail);\n}\n\n.lh-audit--manual .lh-audit__display-text,\n.lh-audit--notapplicable .lh-audit__display-text {\n color: var(--color-gray-600);\n}\n.lh-audit--manual .lh-audit__score-icon,\n.lh-audit--notapplicable .lh-audit__score-icon {\n border-radius: 100%;\n background: var(--color-gray-400);\n}\n\n.lh-audit--informative .lh-audit__display-text {\n color: var(--color-gray-600);\n}\n\n.lh-audit--informative .lh-audit__score-icon {\n border: none;\n border-radius: 100%;\n background: var(--color-gray-400);\n}\n\n.lh-audit__description,\n.lh-audit__stackpack {\n color: var(--report-text-color-secondary);\n}\n.lh-category-header__description {\n font-size: var(--report-font-size);\n text-align: center;\n margin: 0px auto;\n max-width: 400px;\n}\n\n\n.lh-audit__display-text,\n.lh-load-opportunity__sparkline,\n.lh-chevron-container {\n margin: 0 var(--audit-margin-horizontal);\n}\n.lh-chevron-container {\n margin-right: 0;\n}\n\n.lh-audit__title-and-text {\n flex: 1;\n}\n\n/* Prepend display text with em dash separator. But not in Opportunities. */\n.lh-audit__display-text:not(:empty):before {\n content: '—';\n margin-right: var(--audit-margin-horizontal);\n}\n.lh-audit-group.lh-audit-group--load-opportunities .lh-audit__display-text:not(:empty):before {\n display: none;\n}\n\n/* Expandable Details (Audit Groups, Audits) */\n.lh-audit__header {\n display: flex;\n align-items: center;\n font-weight: 500;\n padding: var(--audit-padding-vertical) 0;\n}\n\n.lh-audit--load-opportunity .lh-audit__header {\n display: block;\n}\n\n.lh-audit__header:hover {\n background-color: var(--color-hover);\n}\n\n/* Hide the expandable arrow icon, three ways: via the CSS Counter Styles spec, for webkit/blink browsers, hiding the polyfilled icon */\n/* https://github.com/javan/details-element-polyfill/blob/master/src/details-element-polyfill/polyfill.sass */\n.lh-audit-group > summary,\n.lh-expandable-details > summary {\n list-style-type: none;\n}\n.lh-audit-group > summary::-webkit-details-marker,\n.lh-expandable-details > summary::-webkit-details-marker {\n display: none;\n}\n.lh-audit-group > summary:before,\n.lh-expandable-details > summary:before {\n display: none;\n}\n\n\n/* Perf Metric */\n\n.lh-columns {\n display: flex;\n width: 100%;\n}\n@media screen and (max-width: 640px) {\n .lh-columns {\n flex-wrap: wrap;\n\n }\n}\n\n.lh-column {\n flex: 1;\n}\n.lh-column:first-of-type {\n margin-right: 24px;\n}\n\n@media screen and (max-width: 800px) {\n .lh-column:first-of-type {\n margin-right: 8px;\n }\n}\n@media screen and (max-width: 640px) {\n .lh-column {\n flex-basis: 100%;\n }\n .lh-column:first-of-type {\n margin-right: 0px;\n }\n .lh-column:first-of-type .lh-metric:last-of-type {\n border-bottom: 0;\n }\n}\n\n\n.lh-metric {\n border-bottom: 1px solid var(--report-border-color-secondary);\n}\n.lh-metric:first-of-type {\n border-top: 1px solid var(--report-border-color-secondary);\n}\n\n.lh-metric__innerwrap {\n display: grid;\n grid-template-columns: var(--audit-description-padding-left) 10fr 3fr;\n align-items: center;\n padding: 10px 0;\n}\n\n.lh-metric__details {\n order: -1;\n}\n\n.lh-metric__title {\n flex: 1;\n font-weight: 500;\n}\n\n.lh-metrics__disclaimer {\n color: var(--color-gray-600);\n margin: var(--section-padding-vertical) 0;\n}\n.lh-metrics__disclaimer a {\n color: var(--color-gray-700);\n}\n\n.lh-metric__description {\n display: none;\n grid-column-start: 2;\n grid-column-end: 3;\n color: var(--report-text-color-secondary);\n}\n\n.lh-metric__value {\n white-space: nowrap; /* No wrapping between metric value and the icon */\n font-weight: 500;\n justify-self: end;\n}\n\n/* No-JS toggle switch */\n/* Keep this selector sync'd w/ `magicSelector` in report-ui-features-test.js */\n .lh-metrics-toggle__input:checked ~ .lh-columns .lh-metric__description {\n display: block;\n}\n\n.lh-metrics-toggle__input {\n cursor: pointer;\n opacity: 0;\n position: absolute;\n right: 0;\n width: 74px;\n height: 28px;\n top: -3px;\n}\n.lh-metrics-toggle__label {\n display: flex;\n background-color: #eee;\n border-radius: 20px;\n overflow: hidden;\n position: absolute;\n right: 0;\n top: -3px;\n pointer-events: none;\n}\n.lh-metrics-toggle__input:focus + label {\n outline: -webkit-focus-ring-color auto 3px;\n}\n.lh-metrics-toggle__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2px 5px;\n width: 50%;\n height: 28px;\n}\n.lh-metrics-toggle__input:not(:checked) + label .lh-metrics-toggle__icon--less,\n.lh-metrics-toggle__input:checked + label .lh-metrics-toggle__icon--more {\n background-color: var(--color-blue-A700);\n --metric-toggle-lines-fill: var(--color-white);\n}\n.lh-metrics-toggle__lines {\n fill: var(--metric-toggle-lines-fill);\n}\n\n.lh-metrics-toggle__label {\n background-color: var(--metrics-toggle-background-color);\n}\n\n.lh-metrics-toggle__label .lh-metrics-toggle__icon--less {\n padding-left: 8px;\n}\n.lh-metrics-toggle__label .lh-metrics-toggle__icon--more {\n padding-right: 8px;\n}\n\n/* Pushes the metric description toggle button to the right. */\n.lh-audit-group--metrics .lh-audit-group__header {\n display: flex;\n}\n.lh-audit-group--metrics .lh-audit-group__header span.lh-audit-group__title {\n flex: 1;\n}\n\n.lh-metric .lh-metric__innerwrap::before {\n content: '';\n width: var(--score-icon-size);\n height: var(--score-icon-size);\n display: inline-block;\n margin: var(--score-icon-margin);\n}\n\n.lh-metric--pass .lh-metric__value {\n color: var(--color-pass-secondary);\n}\n.lh-metric--pass .lh-metric__innerwrap::before {\n border-radius: 100%;\n background: var(--color-pass);\n}\n\n.lh-metric--average .lh-metric__value {\n color: var(--color-average-secondary);\n}\n.lh-metric--average .lh-metric__innerwrap::before {\n background: var(--color-average);\n width: var(--icon-square-size);\n height: var(--icon-square-size);\n}\n\n.lh-metric--fail .lh-metric__value {\n color: var(--color-fail-secondary);\n}\n.lh-metric--fail .lh-metric__innerwrap::before,\n.lh-metric--error .lh-metric__innerwrap::before {\n border-left: calc(var(--score-icon-size) / 2) solid transparent;\n border-right: calc(var(--score-icon-size) / 2) solid transparent;\n border-bottom: var(--score-icon-size) solid var(--color-fail);\n}\n\n.lh-metric--error .lh-metric__value,\n.lh-metric--error .lh-metric__description {\n color: var(--color-fail-secondary);\n}\n\n/* Perf load opportunity */\n\n.lh-load-opportunity__cols {\n display: flex;\n align-items: flex-start;\n}\n\n.lh-load-opportunity__header .lh-load-opportunity__col {\n color: var(--color-gray-600);\n display: unset;\n line-height: calc(2.3 * var(--report-font-size));\n}\n\n.lh-load-opportunity__col {\n display: flex;\n}\n\n.lh-load-opportunity__col--one {\n flex: 5;\n align-items: center;\n margin-right: 2px;\n}\n.lh-load-opportunity__col--two {\n flex: 4;\n text-align: right;\n}\n\n.lh-audit--load-opportunity .lh-audit__display-text {\n text-align: right;\n flex: 0 0 calc(3 * var(--report-font-size));\n}\n\n\n/* Sparkline */\n\n.lh-load-opportunity__sparkline {\n flex: 1;\n margin-top: calc((var(--report-line-height) - var(--sparkline-height)) / 2);\n}\n\n.lh-sparkline {\n height: var(--sparkline-height);\n width: 100%;\n}\n\n.lh-sparkline__bar {\n height: 100%;\n float: right;\n}\n\n.lh-audit--pass .lh-sparkline__bar {\n background: var(--color-pass);\n}\n\n.lh-audit--average .lh-sparkline__bar {\n background: var(--color-average);\n}\n\n.lh-audit--fail .lh-sparkline__bar {\n background: var(--color-fail);\n}\n\n\n\n/* Filmstrip */\n\n.lh-filmstrip-container {\n /* smaller gap between metrics and filmstrip */\n margin: -8px auto 0 auto;\n}\n\n.lh-filmstrip {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding-bottom: var(--default-padding);\n}\n\n.lh-filmstrip__frame {\n text-align: right;\n position: relative;\n}\n\n.lh-filmstrip__thumbnail {\n border: 1px solid var(--report-border-color-secondary);\n max-height: 100px;\n max-width: 60px;\n}\n\n@media screen and (max-width: 750px) {\n .lh-filmstrip {\n flex-wrap: wrap;\n }\n .lh-filmstrip__frame {\n width: 20%;\n margin-bottom: 5px;\n }\n .lh-filmstrip__thumbnail {\n display: block;\n margin: auto;\n }\n}\n\n/* Audit */\n\n.lh-audit {\n border-bottom: 1px solid var(--report-border-color-secondary);\n}\n\n/* Apply border-top to just the first audit. */\n.lh-audit {\n border-top: 1px solid var(--report-border-color-secondary);\n}\n.lh-audit ~ .lh-audit {\n border-top: none;\n}\n\n\n.lh-audit--error .lh-audit__display-text {\n color: var(--color-fail);\n}\n\n/* Audit Group */\n\n.lh-audit-group {\n margin-bottom: var(--audit-group-margin-bottom);\n position: relative;\n}\n\n.lh-audit-group__header::before {\n /* By default, groups don't get an icon */\n content: none;\n width: var(--pwa-icon-size);\n height: var(--pwa-icon-size);\n margin: var(--pwa-icon-margin);\n display: inline-block;\n vertical-align: middle;\n}\n\n/* Style the \"over budget\" columns red. */\n.lh-audit-group--budgets .lh-table tbody tr td:nth-child(4),\n.lh-audit-group--budgets .lh-table tbody tr td:nth-child(5){\n color: var(--color-red-700);\n}\n\n/* Align the \"over budget request count\" text to be close to the \"over budget bytes\" column. */\n.lh-audit-group--budgets .lh-table tbody tr td:nth-child(4){\n text-align: right;\n}\n\n.lh-audit-group--budgets .lh-table {\n width: 100%;\n}\n\n.lh-audit-group--pwa-fast-reliable .lh-audit-group__header::before {\n content: '';\n background-image: var(--pwa-fast-reliable-gray-url);\n}\n.lh-audit-group--pwa-installable .lh-audit-group__header::before {\n content: '';\n background-image: var(--pwa-installable-gray-url);\n}\n.lh-audit-group--pwa-optimized .lh-audit-group__header::before {\n content: '';\n background-image: var(--pwa-optimized-gray-url);\n}\n.lh-audit-group--pwa-fast-reliable.lh-badged .lh-audit-group__header::before {\n background-image: var(--pwa-fast-reliable-color-url);\n}\n.lh-audit-group--pwa-installable.lh-badged .lh-audit-group__header::before {\n background-image: var(--pwa-installable-color-url);\n}\n.lh-audit-group--pwa-optimized.lh-badged .lh-audit-group__header::before {\n background-image: var(--pwa-optimized-color-url);\n}\n\n.lh-audit-group--metrics .lh-audit-group__summary {\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.lh-audit-group__summary {\n display: flex;\n justify-content: space-between;\n margin-top: calc(var(--category-padding) * 1.5);\n margin-bottom: var(--category-padding);\n}\n\n.lh-audit-group__itemcount {\n color: var(--color-gray-600);\n font-weight: bold;\n}\n.lh-audit-group__header .lh-chevron {\n margin-top: calc((var(--report-line-height) - 5px) / 2);\n}\n\n.lh-audit-group__header {\n font-size: var(--report-font-size);\n margin: 0 0 var(--audit-group-padding-vertical);\n /* When the header takes 100% width, the chevron becomes small. */\n max-width: calc(100% - var(--chevron-size));\n}\n/* max-width makes the metric toggle not flush. metrics doesn't have a chevron so unset. */\n.lh-audit-group--metrics .lh-audit-group__header {\n max-width: unset;\n}\n\n.lh-audit-group__header span.lh-audit-group__title {\n font-weight: bold;\n}\n\n.lh-audit-group__header span.lh-audit-group__itemcount {\n font-weight: bold;\n color: var(--color-gray-600);\n}\n\n.lh-audit-group__header span.lh-audit-group__description {\n font-weight: 500;\n color: var(--color-gray-600);\n}\n.lh-audit-group__header span.lh-audit-group__description::before {\n content: '—';\n margin: 0px var(--audit-margin-horizontal);\n}\n\n.lh-clump > .lh-audit-group__header,\n.lh-audit-group--diagnostics .lh-audit-group__header,\n.lh-audit-group--load-opportunities .lh-audit-group__header,\n.lh-audit-group--metrics .lh-audit-group__header,\n.lh-audit-group--pwa-fast-reliable .lh-audit-group__header,\n.lh-audit-group--pwa-installable .lh-audit-group__header,\n.lh-audit-group--pwa-optimized .lh-audit-group__header {\n margin-top: var(--audit-group-padding-vertical);\n}\n\n.lh-audit-explanation {\n margin: var(--audit-padding-vertical) 0 calc(var(--audit-padding-vertical) / 2) var(--audit-margin-horizontal);\n line-height: var(--audit-explanation-line-height);\n display: inline-block;\n}\n\n.lh-audit--fail .lh-audit-explanation {\n color: var(--color-fail);\n}\n\n/* Report */\n.lh-list > div:not(:last-child) {\n padding-bottom: 20px;\n}\n\n.lh-header-container {\n display: block;\n margin: 0 auto;\n position: relative;\n word-wrap: break-word;\n}\n\n.lh-report {\n min-width: var(--report-min-width);\n}\n\n.lh-exception {\n font-size: large;\n}\n\n.lh-code {\n white-space: normal;\n margin-top: 0;\n font-size: 85%;\n}\n\n.lh-warnings {\n --item-margin: calc(var(--report-line-height) / 6);\n color: var(--color-average);\n margin: var(--audit-padding-vertical) 0;\n padding: calc(var(--audit-padding-vertical) / 2) var(--audit-padding-vertical);\n}\n.lh-warnings span {\n font-weight: bold;\n}\n\n.lh-warnings--toplevel {\n --item-margin: calc(var(--header-line-height) / 4);\n color: var(--report-text-color-secondary);\n margin-left: auto;\n margin-right: auto;\n max-width: calc(var(--report-width) - var(--category-padding) * 2);\n background-color: var(--color-amber-50);\n padding: var(--toplevel-warning-padding);\n}\n\n.lh-warnings ul {\n padding-left: calc(var(--category-padding) * 2);\n margin: 0;\n}\n.lh-warnings li {\n margin: var(--item-margin) 0;\n}\n.lh-warnings li:last-of-type {\n margin-bottom: 0;\n}\n\n.lh-scores-header {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n}\n.lh-scores-header__solo {\n padding: 0;\n border: 0;\n}\n\n/* Gauge */\n\n.lh-gauge__wrapper--pass {\n color: var(--color-pass);\n fill: var(--color-pass);\n stroke: var(--color-pass);\n}\n\n.lh-gauge__wrapper--average {\n color: var(--color-average);\n fill: var(--color-average);\n stroke: var(--color-average);\n}\n\n.lh-gauge__wrapper--fail {\n color: var(--color-fail);\n fill: var(--color-fail);\n stroke: var(--color-fail);\n}\n\n.lh-gauge {\n stroke-linecap: round;\n width: var(--gauge-circle-size);\n height: var(--gauge-circle-size);\n}\n\n.lh-category .lh-gauge {\n --gauge-circle-size: var(--gauge-circle-size-big);\n}\n\n.lh-gauge-base {\n opacity: 0.1;\n stroke: var(--circle-background);\n stroke-width: var(--circle-border-width);\n}\n\n.lh-gauge-arc {\n fill: none;\n stroke: var(--circle-color);\n stroke-width: var(--circle-border-width);\n animation: load-gauge var(--transition-length) ease forwards;\n animation-delay: 250ms;\n}\n\n.lh-gauge__svg-wrapper {\n position: relative;\n height: var(--gauge-circle-size);\n}\n.lh-category .lh-gauge__svg-wrapper {\n --gauge-circle-size: var(--gauge-circle-size-big);\n}\n\n/* The plugin badge overlay */\n.lh-gauge__wrapper--plugin .lh-gauge__svg-wrapper::before {\n width: var(--plugin-badge-size);\n height: var(--plugin-badge-size);\n background-color: var(--plugin-badge-background-color);\n background-image: var(--plugin-icon-url);\n background-repeat: no-repeat;\n background-size: var(--plugin-icon-size);\n background-position: 58% 50%;\n content: \"\";\n position: absolute;\n right: -6px;\n bottom: 0px;\n display: block;\n z-index: 100;\n box-shadow: 0 0 4px rgba(0,0,0,.2);\n border-radius: 25%;\n}\n.lh-category .lh-gauge__wrapper--plugin .lh-gauge__svg-wrapper::before {\n width: var(--plugin-badge-size-big);\n height: var(--plugin-badge-size-big);\n}\n\n@keyframes load-gauge {\n from { stroke-dasharray: 0 352; }\n}\n\n.lh-gauge__percentage {\n width: 100%;\n height: var(--gauge-circle-size);\n position: absolute;\n font-family: var(--report-font-family-monospace);\n font-size: calc(var(--gauge-circle-size) * 0.34 + 1.3px);\n line-height: 0;\n text-align: center;\n top: calc(var(--score-container-padding) + var(--gauge-circle-size) / 2);\n}\n\n.lh-category .lh-gauge__percentage {\n --gauge-circle-size: var(--gauge-circle-size-big);\n --gauge-percentage-font-size: var(--gauge-percentage-font-size-big);\n}\n\n.lh-gauge__wrapper {\n position: relative;\n display: flex;\n align-items: center;\n flex-direction: column;\n text-decoration: none;\n padding: var(--score-container-padding);\n\n --circle-border-width: 8;\n --transition-length: 1s;\n\n /* Contain the layout style paint & layers during animation*/\n contain: content;\n will-change: opacity; /* Only using for layer promotion */\n}\n\n.lh-gauge__label {\n font-size: var(--gauge-label-font-size);\n line-height: var(--gauge-label-line-height);\n margin-top: 10px;\n text-align: center;\n color: var(--report-text-color);\n}\n\n/* TODO(#8185) use more BEM (.lh-gauge__label--big) instead of relying on descendant selector */\n.lh-category .lh-gauge__label {\n --gauge-label-font-size: var(--gauge-label-font-size-big);\n --gauge-label-line-height: var(--gauge-label-line-height-big);\n margin-top: 14px;\n}\n\n\n.lh-scores-header .lh-gauge__wrapper,\n.lh-scores-header .lh-gauge--pwa__wrapper,\n.lh-sticky-header .lh-gauge__wrapper,\n.lh-sticky-header .lh-gauge--pwa__wrapper {\n width: var(--gauge-wrapper-width);\n}\n\n.lh-scorescale {\n display: inline-flex;\n margin: 12px auto 0 auto;\n border: 1px solid var(--color-gray-200);\n border-radius: 20px;\n padding: 8px 8px;\n}\n\n.lh-scorescale-range {\n display: flex;\n align-items: center;\n margin: 0 12px;\n font-family: var(--report-font-family-monospace);\n white-space: nowrap;\n}\n\n.lh-scorescale-range::before {\n content: '';\n width: var(--scorescale-width);\n height: var(--scorescale-height);\n border-radius: 10px;\n display: block;\n margin-right: 10px;\n}\n\n.lh-scorescale-range--pass::before {\n background-color: var(--color-pass);\n}\n\n.lh-scorescale-range--average::before {\n background-color: var(--color-average);\n}\n\n.lh-scorescale-range--fail::before {\n background-color: var(--color-fail);\n}\n\n/* Hide category score gauages if it's a single category report */\n.lh-header--solo-category .lh-scores-wrapper {\n display: none;\n}\n\n\n.lh-categories {\n width: 100%;\n overflow: hidden;\n}\n\n.lh-category {\n padding: var(--category-padding);\n max-width: var(--report-width);\n margin: 0 auto;\n}\n\n.lh-category-wrapper {\n border-bottom: 1px solid var(--color-gray-200);\n}\n\n.lh-category-wrapper:first-of-type {\n border-top: 1px solid var(--color-gray-200);\n}\n\n/* section hash link jump should preserve fixed header\n https://css-tricks.com/hash-tag-links-padding/\n*/\n.lh-category > .lh-permalink {\n --sticky-header-height: calc(var(--gauge-circle-size) + var(--score-container-padding) * 2);\n --topbar-plus-header: calc(var(--topbar-height) + var(--sticky-header-height));\n margin-top: calc(var(--topbar-plus-header) * -1);\n padding-bottom: var(--topbar-plus-header);\n display: block;\n visibility: hidden;\n}\n\n.lh-category-header {\n font-size: var(--category-header-font-size);\n min-height: var(--gauge-circle-size);\n margin-bottom: var(--section-padding-vertical);\n}\n\n.lh-category-header .lh-score__gauge {\n max-width: 400px;\n width: auto;\n margin: 0px auto;\n}\n\n.lh-category-header .lh-audit__title {\n font-size: var(--category-header-font-size);\n line-height: var(--header-line-height);\n}\n\n#lh-log {\n position: fixed;\n background-color: #323232;\n color: #fff;\n min-height: 48px;\n min-width: 288px;\n padding: 16px 24px;\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);\n border-radius: 2px;\n margin: 12px;\n font-size: 14px;\n cursor: default;\n transition: transform 0.3s, opacity 0.3s;\n transform: translateY(100px);\n opacity: 0;\n bottom: 0;\n left: 0;\n z-index: 3;\n}\n\n#lh-log.show {\n opacity: 1;\n transform: translateY(0);\n}\n\n/* 964 fits the min-width of the filmstrip */\n@media screen and (max-width: 964px) {\n .lh-report {\n margin-left: 0;\n width: 100%;\n }\n}\n\n@media print {\n body {\n -webkit-print-color-adjust: exact; /* print background colors */\n }\n .lh-container {\n display: block;\n }\n .lh-report {\n margin-left: 0;\n padding-top: 0;\n }\n .lh-categories {\n margin-top: 0;\n }\n}\n\n.lh-table {\n border-collapse: collapse;\n /* Can't assign padding to table, so shorten the width instead. */\n width: calc(100% - var(--audit-description-padding-left));\n}\n\n.lh-table thead th {\n font-weight: normal;\n color: var(--color-gray-600);\n /* See text-wrapping comment on .lh-container. */\n word-break: normal;\n}\n\n.lh-table tbody tr:nth-child(odd) {\n background-color: var(--table-higlight-background-color);\n}\n\n.lh-table th,\n.lh-table td {\n padding: 8px 6px;\n}\n.lh-table th:first-child {\n padding-left: 0;\n}\n.lh-table th:last-child {\n padding-right: 0;\n}\n\n/* Looks unnecessary, but mostly for keeping the <th>s left-aligned */\n.lh-table-column--text,\n.lh-table-column--url,\n/* .lh-table-column--thumbnail, */\n/* .lh-table-column--empty,*/\n.lh-table-column--code,\n.lh-table-column--node {\n text-align: left;\n}\n\n.lh-table-column--bytes,\n.lh-table-column--timespanMs,\n.lh-table-column--ms,\n.lh-table-column--numeric {\n text-align: right;\n word-break: normal;\n}\n\n\n\n.lh-table .lh-table-column--thumbnail {\n width: var(--image-preview-size);\n padding: 0;\n}\n\n.lh-table-column--url {\n min-width: 250px;\n}\n\n/* Keep columns narrow if they follow the URL column */\n/* 12% was determined to be a decent narrow width, but wide enough for column headings */\n.lh-table-column--url + th.lh-table-column--bytes,\n.lh-table-column--url + .lh-table-column--bytes + th.lh-table-column--bytes,\n.lh-table-column--url + .lh-table-column--ms,\n.lh-table-column--url + .lh-table-column--ms + th.lh-table-column--bytes,\n.lh-table-column--url + .lh-table-column--bytes + th.lh-table-column--timespanMs {\n width: 12%;\n}\n\n\n.lh-text__url-host {\n display: inline;\n}\n\n.lh-text__url-host {\n margin-left: calc(var(--report-font-size) / 2);\n opacity: 0.6;\n font-size: 90%\n}\n\n.lh-thumbnail {\n object-fit: cover;\n width: var(--image-preview-size);\n height: var(--image-preview-size);\n display: block;\n}\n\n.lh-unknown pre {\n overflow: scroll;\n border: solid 1px var(--color-gray-200);\n}\n\n.lh-text__url > a {\n color: inherit;\n text-decoration: none;\n}\n\n.lh-text__url > a:hover {\n text-decoration: underline dotted #999;\n}\n\n/* Chevron\n https://codepen.io/paulirish/pen/LmzEmK\n */\n.lh-chevron {\n --chevron-angle: 42deg;\n /* Edge doesn't support transform: rotate(calc(...)), so we define it here */\n --chevron-angle-right: -42deg;\n width: var(--chevron-size);\n height: var(--chevron-size);\n margin-top: calc((var(--report-line-height) - 12px) / 2);\n}\n\n.lh-chevron__lines {\n transition: transform 0.4s;\n transform: translateY(var(--report-line-height));\n}\n.lh-chevron__line {\n stroke: var(--chevron-line-stroke);\n stroke-width: var(--chevron-size);\n stroke-linecap: square;\n transform-origin: 50%;\n transform: rotate(var(--chevron-angle));\n transition: transform 300ms, stroke 300ms;\n}\n\n.lh-audit-group > summary > .lh-audit-group__summary > .lh-chevron .lh-chevron__line-right,\n.lh-audit-group[open] > summary > .lh-audit-group__summary > .lh-chevron .lh-chevron__line-left,\n.lh-audit > .lh-expandable-details .lh-chevron__line-right,\n.lh-audit > .lh-expandable-details[open] .lh-chevron__line-left {\n transform: rotate(var(--chevron-angle-right));\n}\n\n.lh-audit-group[open] > summary > .lh-audit-group__summary > .lh-chevron .lh-chevron__line-right,\n.lh-audit > .lh-expandable-details[open] .lh-chevron__line-right {\n transform: rotate(var(--chevron-angle));\n}\n\n.lh-audit-group[open] > summary > .lh-audit-group__summary > .lh-chevron .lh-chevron__lines,\n.lh-audit > .lh-expandable-details[open] .lh-chevron__lines {\n transform: translateY(calc(var(--chevron-size) * -1));\n}\n\n\n\n/* Tooltip */\n.tooltip-boundary {\n position: relative;\n}\n\n.tooltip {\n position: absolute;\n display: none; /* Don't retain these layers when not needed */\n opacity: 0;\n background: #ffffff;\n min-width: 246px;\n max-width: 275px;\n padding: 15px;\n border-radius: 5px;\n text-align: initial;\n}\n/* shrink tooltips to not be cutoff on left edge of narrow viewports\n 45vw is chosen to be ~= width of the left column of metrics\n*/\n@media screen and (max-width: 535px) {\n .tooltip {\n min-width: 45vw;\n padding: 3vw;\n }\n}\n\n.tooltip-boundary:hover {\n background-color: var(--color-hover);\n}\n\n.tooltip-boundary:hover .tooltip {\n display: block;\n animation: fadeInTooltip 250ms;\n animation-fill-mode: forwards;\n animation-delay: 850ms;\n bottom: 100%;\n z-index: 1;\n will-change: opacity;\n right: 0;\n pointer-events: none;\n}\n\n.tooltip::before {\n content: \"\";\n border: solid transparent;\n border-bottom-color: #fff;\n border-width: 10px;\n position: absolute;\n bottom: -20px;\n right: 6px;\n transform: rotate(180deg);\n pointer-events: none;\n}\n\n@keyframes fadeInTooltip {\n 0% { opacity: 0; }\n 75% { opacity: 1; }\n 100% { opacity: 1; filter: drop-shadow(1px 0px 1px #aaa) drop-shadow(0px 2px 4px hsla(206, 6%, 25%, 0.15)); pointer-events: auto; }\n}\n\n/*# sourceURL=audits/lighthouse/report.css */";
|
