*, ::before, ::after{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } [class^="btn"]:disabled { /* This needs to be important to override any previous fade-in animations */ opacity: 0.5 !important; cursor: not-allowed; } /* 2E8C70 */ /* #FFD38F */ /* #F0F3F9 */ /* #9D8DF7 */ /* #A9A6BD */ /* This line is used as a flag for post-processing */ /* Do not change it!! */ .exercism-delete-before-this { color: red; } /* @import "./ui-kit/borders"; */ /* @import "./ui-kit/colors"; */ /* @import "./ui-kit/effects"; */ /* @import "./ui-kit/inputs"; */ /* @import "./ui-kit/shapes"; */ /* @import "./ui-kit/label"; */ /* @import "./ui-kit/tracks"; */ /* @import "./ui-kit/filters"; */ /* @import "./ui-kit/scroll"; */ /* Track */ .c-track-breadcrumbs{ border-bottom-width: 1px; border-color: var(--color22); } .c-track-breadcrumbs .container{ display: flex; align-items: center; padding-top: 8px; padding-bottom: 8px; font-size: 14px; line-height: 150%; color: var(--textColor3); overflow-x: auto; } .c-track-breadcrumbs a { color: var(--textColorTrackBreadcrumbs); font-weight: 500; margin-right: 16px; display: flex; align-items: center; white-space: nowrap; } .c-track-breadcrumbs a .c-icon, .c-track-breadcrumbs a .c-track-icon { height: 32px; width: 32px; margin-right: 12px; } .c-track-breadcrumbs .seperator{ font-size: 15px; --tw-text-opacity: 1; color: rgb(110 130 170 / var(--tw-text-opacity, 1)); margin-right: 16px; } .c-track-breadcrumbs .track-title{ margin-right: 16px; white-space: nowrap; } .c-track-breadcrumbs .exercise-title{ white-space: nowrap; } .c-track-breadcrumbs .seperator{ margin-right: 16px; } /* Keep until deleted everywhere */ .c-track-header{ --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); padding-top: 16px; --tw-shadow: var(--box-shadow-base); --tw-shadow-colored: var(--box-shadow-base); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); /* Needed for the box-shadow */ position: relative; z-index: 2; } .c-track-header > .container{ position: relative; } .c-track-header .text-h1{ font-size: 28px; } @media (min-width: 768px){ .c-track-header .text-h1{ font-size: 39px; } } .c-track-header .c-track-icon { height: 48px; width: 48px; margin-right: 16px; } @media (min-width: 1024px) { .c-track-header .c-track-icon { height: 54px; width: 54px } } .c-track-header .students{ font-size: 15px; font-weight: 500; line-height: 150%; color: var(--textColor6); } .c-track-header .students .c-icon { height: 21px; width: 21px; filter: var(--textColor6-filter); margin-right: 12px; } .c-track-header .tabs{ margin-top: 8px; display: flex; flex-grow: 1; } @media screen and (max-width: 435px) { .c-track-header .tabs .c-tab-2{ padding-top: 8px; padding-bottom: 8px; } .c-track-header .tabs .c-icon{ display: none; } .c-concepts-map .connection.c-track-header .tabs .c-icon { opacity: 0; } } .c-track-header .tabs :last-child{ margin-right: 0px; } .c-track-header .people{ align-items: center; justify-content: flex-end; } #page-tracks-build .record-row .record-value .record-element.c-track-header .people { justify-content: flex-end; } .c-track-header .people{ line-height: 150%; } .c-track-header .people .c-faces{ margin-right: 16px; } .c-track-header .people .contributors{ font-weight: 600; color: var(--textColor2); } .c-track-header .people .mentors{ font-weight: 500; color: var(--textColor2); } .c-track-header .c-react-wrapper-dropdowns-track-menu{ position: absolute; right: 0; } @media (min-width: 1024px) { .c-track-header .c-react-wrapper-dropdowns-track-menu { right: var(--container-padding-x); } } .c-track-header .c-react-wrapper-dropdowns-track-menu{ top: 50%; margin-top: -17px; } .c-track-header .c-track-menu{ margin-left: 48px; } .c-track-header .c-track-menu li { white-space: nowrap; } .c-track-header .c-track-menu > button{ padding: 8px; border-width: 1px; border-color: var(--borderColor5); border-radius: 5px; --tw-shadow: 0px 1px 0px 1px rgba(var(--shadowColorKeystroke), 0.6); --tw-shadow-colored: 0px 1px 0px 1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .c-track-header .c-track-menu > button .c-icon { height: 16px; width: 16px; filter: var(--textColor5-filter); } .c-track-concept-nav { --nav-height: 40px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); padding-top: 12px; padding-bottom: 12px; --tw-shadow: var(--box-shadow-base); --tw-shadow-colored: var(--box-shadow-base); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .c-track-concept-nav .container{ display: flex; align-items: center; } .c-track-concept-nav .back{ margin-right: 24px; display: block; line-height: var(--nav-height); } .c-track-concept-nav .back .c-icon { height: 21px; width: 21px; } .c-track-concept-nav .c-track-icon { height: var(--nav-height); width: var(--nav-height); margin-right: 20px; } .c-track-concept-nav .title{ font-family: Source Code Pro, monospace; font-size: 16px; font-weight: 600; line-height: var(--nav-height); margin-right: 12px; } .c-track-concept-nav .divider{ margin-right: 12px; font-size: 16px; color: var(--textColor6); } .c-track-concept-nav .item{ font-family: Source Code Pro, monospace; font-size: 16px; } :root { --c-concept-map-line-dasharray-dashed: 12, 5; --c-concept-map-line-dasharray-solid: 1, 0; --c-concept-map-text-unlocked: #26282d; --c-concept-map-text-locked: #6d6986; --c-concept-map-hover-opacity: 0.1; --c-concept-map-line-width: 2; --c-concept-map-circle-radius: 3; --c-concept-map-drawing-margin: 50; } .c-concepts-map { --c-concept-map-background: var(--backgroundColorA); --c-concept-map-card-background: var(--backgroundColorA); min-width: 300px; margin-top: -40px; } /* Compensate for the first row of cards */ .c-concepts-map .track{ pointer-events: none; display: block; } .c-concepts-map .track .layer{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-evenly; } .c-concepts-map .track .layer .card{ border-radius: 8px; pointer-events: auto; box-sizing: border-box; position: relative; margin: 40px; display: flex; flex-direction: column; justify-content: space-between; color: var(--textColor2); border-width: 1px; border-color: var(--borderColor7); background-color: var(--backgroundColorA); opacity: var(--c-concept-map-hover-opacity); transition: opacity 200ms ease-out, box-shadow 200ms ease-out; } .c-concepts-map .track .layer .card:hover{ border-color: var(--borderColor6); } .c-concepts-map .track .layer .card:after{ position: absolute; background-repeat: no-repeat; background-size: contain; height: 32px; width: 32px; top: -15px; right: -15px; } .c-concepts-map .track .layer .card.mastered{ border-width: 2px; --tw-border-opacity: 1; border-color: rgb(67 181 147 / var(--tw-border-opacity, 1)); background: var(--backgroundColorA); } .c-concepts-map .track .layer .card.mastered .exercise-status-bar{ --tw-border-opacity: 1; border-color: rgb(67 181 147 / var(--tw-border-opacity, 1)); } .c-concepts-map .track .layer .card.mastered:after { content: ""; background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzMgMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxlbGxpcHNlIGN4PSIxNi45NzUiIGN5PSIxNiIgcng9IjE2LjAyNDkiIHJ5PSIxNiIgZmlsbD0iIzQzQjU5MyIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE3LjQ4MzggMjEuNTM5NkMxOC43NjIgMjAuNDU5IDIwLjMyNzMgMTkuNzcyNiAyMS45ODkxIDE5LjU2MzdDMjIuMzk0MSAxOS41MTA0IDIyLjY5NjkgMTkuMTY1NiAyMi42OTY3IDE4Ljc1NzZWMTEuMTA2MUMyMi42OTcgMTAuODY4OSAyMi41OTQ0IDEwLjY0MzIgMjIuNDE1NCAxMC40ODc0QzIyLjIzNjQgMTAuMzMxNSAyMS45OTg1IDEwLjI2MDcgMjEuNzYzMiAxMC4yOTM0QzIwLjE4NDUgMTAuNTM3NSAxOC43MDM3IDExLjIxMTUgMTcuNDgzOCAxMi4yNDEzQzE3LjE4NDEgMTIuNDcyNCAxNi43NjYgMTIuNDcyNCAxNi40NjYzIDEyLjI0MTNDMTUuMjQ1OCAxMS4yMTE2IDEzLjc2NDUgMTAuNTM3OSAxMi4xODU0IDEwLjI5NDRDMTEuOTUwMyAxMC4yNjE4IDExLjcxMjUgMTAuMzMyNCAxMS41MzM1IDEwLjQ4OEMxMS4zNTQ1IDEwLjY0MzcgMTEuMjUxOCAxMC44NjkxIDExLjI1MTggMTEuMTA2MVYxOC43NTc2QzExLjI1MTcgMTkuMTY1NiAxMS41NTQ0IDE5LjUxMDQgMTEuOTU5NSAxOS41NjM3QzEzLjYyMTggMTkuNzcyMyAxNS4xODc2IDIwLjQ1ODggMTYuNDY2MyAyMS41Mzk2QzE2Ljc2NTggMjEuNzcxMiAxNy4xODQzIDIxLjc3MTIgMTcuNDgzOCAyMS41Mzk2WiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTYuOTc1IDEyLjQxM1YyMS43MTM5IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo="); } .c-concepts-map .track .layer .card.learnt:after { content: ""; background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzMgMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxlbGxpcHNlIGN4PSIxNi45NzUiIGN5PSIxNiIgcng9IjE2LjAyNDkiIHJ5PSIxNiIgZmlsbD0iIzEzMEI0MyIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE3LjQ4MzggMjEuNTM5NkMxOC43NjIgMjAuNDU5IDIwLjMyNzMgMTkuNzcyNiAyMS45ODkxIDE5LjU2MzdDMjIuMzk0MSAxOS41MTA0IDIyLjY5NjkgMTkuMTY1NiAyMi42OTY3IDE4Ljc1NzZWMTEuMTA2MUMyMi42OTcgMTAuODY4OSAyMi41OTQ0IDEwLjY0MzIgMjIuNDE1NCAxMC40ODc0QzIyLjIzNjQgMTAuMzMxNSAyMS45OTg1IDEwLjI2MDcgMjEuNzYzMiAxMC4yOTM0QzIwLjE4NDUgMTAuNTM3NSAxOC43MDM3IDExLjIxMTUgMTcuNDgzOCAxMi4yNDEzQzE3LjE4NDEgMTIuNDcyNCAxNi43NjYgMTIuNDcyNCAxNi40NjYzIDEyLjI0MTNDMTUuMjQ1OCAxMS4yMTE2IDEzLjc2NDUgMTAuNTM3OSAxMi4xODUzIDEwLjI5NDRDMTEuOTUwMiAxMC4yNjE4IDExLjcxMjUgMTAuMzMyNCAxMS41MzM1IDEwLjQ4OEMxMS4zNTQ1IDEwLjY0MzcgMTEuMjUxOCAxMC44NjkxIDExLjI1MTggMTEuMTA2MVYxOC43NTc2QzExLjI1MTcgMTkuMTY1NiAxMS41NTQ0IDE5LjUxMDQgMTEuOTU5NSAxOS41NjM3QzEzLjYyMTggMTkuNzcyMyAxNS4xODc2IDIwLjQ1ODggMTYuNDY2MyAyMS41Mzk2QzE2Ljc2NTggMjEuNzcxMiAxNy4xODQzIDIxLjc3MTIgMTcuNDgzOCAyMS41Mzk2WiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTYuOTc1IDEyLjQxM1YyMS43MTM5IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo="); } .c-concepts-map .track .layer .card.locked{ color: var(--textColor6); background: var(--backgroundColorConceptLocked); } .c-concepts-map .track .layer .card.locked:after { content: ""; background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzMgMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxlbGxpcHNlIGN4PSIxNi45NzUiIGN5PSIxNiIgcng9IjE2LjAyNDkiIHJ5PSIxNiIgZmlsbD0iI0Q1RDhFNCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEyLjc3OCAxNi4zNTcyQzEyLjc3OCAxNS41Mjg3IDEzLjQ0OTYgMTQuODU3MiAxNC4yNzggMTQuODU3MkgxOS42NzJDMjAuNTAwNSAxNC44NTcyIDIxLjE3MiAxNS41Mjg4IDIxLjE3MiAxNi4zNTcyVjIwLjIxNDNDMjEuMTcyIDIxLjA0MjcgMjAuNTAwNSAyMS43MTQzIDE5LjY3MiAyMS43MTQzSDE0LjI3OEMxMy40NDk2IDIxLjcxNDMgMTIuNzc4IDIxLjA0MjcgMTIuNzc4IDIwLjIxNDNWMTYuMzU3MloiIHN0cm9rZT0iIzVDNTU4OSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTQuMzA0MiAxNC44NTcxVjEyLjk1MjNDMTQuMzA0MiAxMS40Nzk2IDE1LjUgMTAuMjg1NiAxNi45NzUgMTAuMjg1NkMxOC40NTAxIDEwLjI4NTYgMTkuNjQ1OCAxMS40Nzk2IDE5LjY0NTggMTIuOTUyM1YxNC44NTcxIiBzdHJva2U9IiM1QzU1ODkiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE2Ljk3NSAxNy45MDQ4QzE2Ljg2OTcgMTcuOTA0OCAxNi43ODQyIDE3Ljk5MDEgMTYuNzg0MiAxOC4wOTUzQzE2Ljc4NDIgMTguMjAwNSAxNi44Njk3IDE4LjI4NTcgMTYuOTc1IDE4LjI4NTdDMTcuMDgwNCAxOC4yODU3IDE3LjE2NTggMTguMjAwNSAxNy4xNjU4IDE4LjA5NTNDMTcuMTY1OSAxOC4wNDQ3IDE3LjE0NTkgMTcuOTk2MiAxNy4xMTAxIDE3Ljk2MDRDMTcuMDc0MyAxNy45MjQ3IDE3LjAyNTcgMTcuOTA0NyAxNi45NzUgMTcuOTA0OFYxNy45MDQ4IiBzdHJva2U9IiM1QzU1ODkiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg=="); } .c-concepts-map .track .layer .card:not(.locked){ --tw-shadow: 0px 4px 24px 0px rgba(var(--shadowColorMain), 0.3); --tw-shadow-colored: 0px 4px 24px 0px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .c-concepts-map .track .layer .card:not(.locked):hover{ --tw-shadow: var(--box-shadow-lgZ1); --tw-shadow-colored: var(--box-shadow-lgZ1); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .c-concepts-map .track .layer .card:not(.locked) .display:hover{ background-color: var(--backgroundColorE); } .c-concepts-map .track .layer .card.active { opacity: 1; } .c-concepts-map .track .layer .card .display{ display: flex; align-items: center; justify-content: center; border-radius: 7px 7px 0 0; padding-top: 16px; padding-bottom: 16px; padding-left: 24px; padding-right: 24px; } .c-concepts-map .track .layer .card .display .name{ font-size: 18px; font-weight: 600; line-height: 150%; margin-left: 16px; } .c-concepts-map .track .layer .card .display .complete-icon{ margin-left: 12px; width: 16px; height: 16px; } .c-concepts-map .track .layer .card.mastered .display:hover{ background-color: rgba(79,205,167,0.15); } .c-concepts-map .track .layer .exercise-status-bar{ justify-content: center; vertical-align: middle; padding-top: 10px; padding-bottom: 10px; padding-left: 24px; padding-right: 24px; border-top-width: 1px; border-color: var(--borderColor7); } .c-concepts-map .track .layer .exercise-status-bar .c-ed{ margin: 6px; } .c-concepts-map .connection{ position: absolute; top: 0px; left: 0px; z-index: -1; touch-action: none; opacity: var(--c-concept-map-hover-opacity); transition: opacity 200ms ease-out; stroke-width: 2px; fill: none; } .c-concepts-map .connection.active { opacity: 1; } .c-concepts-map .connection.hidden { opacity: 0; } .c-concepts-map .connection.locked{ z-index: -3; stroke: var(--c-concept-map-line-faded); stroke-dasharray: var(--c-concept-map-line-dasharray-dashed); } .c-concepts-map .connection.unlocked{ z-index: -2; stroke: var(--c-concept-map-line-available); stroke-dasharray: var(--c-concept-map-line-dasharray-solid); } .c-concepts-map .connection circle { fill: var(--c-concept-map-card-background); stroke-dasharray: var(--c-concept-map-line-dasharray-solid); } @keyframes shimmer { 0% { /*clip-path: polygon(100% 0%,100% 10%,0% 100%,0% 90%);*/ clip-path: polygon(-5% 0%, 5% 0%, 0% 5%, 0% -5%); } 30% { clip-path: polygon(195% 0%, 205% 0%, 0% 205%, 0% 195%); } /* This just keeps adds a delay between visible animation iteratons */ 100% { clip-path: polygon(295% 0%, 305% 0%, 0% 305%, 0% 295%); } } @keyframes pulse-box-shadow { 0% { box-shadow: 0px 4px 8px 0px rgba(var(--shadowColorMain), 0.2); } 50% { box-shadow: 0px 4px 16px 0px rgba(var(--shadowColorMain), 0.5); } 100% { box-shadow: 0px 4px 8px 0px rgba(var(--shadowColorMain), 0.2); } } #page-track-show .track-header .container{ display: flex; align-items: flex-start; padding-top: 32px; padding-bottom: 32px; height: 256px; } #page-track-show .track-header .info{ flex-grow: 1; margin-bottom: 32px; } #page-track-show .track-header .info h1{ font-size: 28px; font-weight: 700; line-height: 140%; color: var(--textColor1); } @media (min-width: 768px){ #page-track-show .track-header .info h1{ font-size: 31px; } } #page-track-show .track-header .info h1{ margin-bottom: 8px; } #page-track-show .track-header .graphics{ position: relative; display: flex; flex-grow: 1; align-items: center; justify-content: center; align-self: stretch; overflow: hidden; max-width: 400px; } #page-track-show .track-header .graphics:before { content: ""; background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTY5IDM0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzNC4yNDkgNDguMzIzNkMxMzQuMjQ5IDU3Ljc1MzcgMTQxLjg5MyA2NS4zOTg0IDE1MS4zMjQgNjUuMzk4NEMxNjAuNzU0IDY1LjM5ODQgMTY4LjM5OCA1Ny43NTM3IDE2OC4zOTggNDguMzIzNkMxNjguMzk4IDM4Ljg5MzQgMTYwLjc1NCAzMS4yNDg4IDE1MS4zMjQgMzEuMjQ4OEMxNDEuODkzIDMxLjI0ODggMTM0LjI0OSAzOC44OTM0IDEzNC4yNDkgNDguMzIzNloiIGZpbGw9IiNGQUU1NEUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNDMuODUzIDU0LjAxNTJDMTM2LjU4NCA1NC4wMTUyIDEzMC42OTIgNDguMTIyNSAxMzAuNjkyIDQwLjg1MzRDMTMwLjY5MiAzMy41ODQzIDEzNi41ODQgMjcuNjkxNiAxNDMuODUzIDI3LjY5MTZDMTUxLjEyMiAyNy42OTE2IDE1Ny4wMTUgMzMuNTg0MyAxNTcuMDE1IDQwLjg1MzRDMTU3LjAxNSA0OC4xMjI1IDE1MS4xMjIgNTQuMDE1MiAxNDMuODUzIDU0LjAxNTJaTTE0My44NTMgNTkuNzA2OEMxMzMuNDQxIDU5LjcwNjggMTI1IDUxLjI2NTkgMTI1IDQwLjg1MzRDMTI1IDMwLjQ0MSAxMzMuNDQxIDIyIDE0My44NTMgMjJDMTU0LjI2NiAyMiAxNjIuNzA3IDMwLjQ0MSAxNjIuNzA3IDQwLjg1MzRDMTYyLjcwNyA1MS4yNjU5IDE1NC4yNjYgNTkuNzA2OCAxNDMuODUzIDU5LjcwNjhaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0wIDMxMC42ODdMMjIuMTM1MSAyODguNTUyTDQ0LjI3MDIgMzEwLjY4N0wyMi4xMzUxIDMzMi44MjJMMCAzMTAuNjg3WiIgZmlsbD0iIzU5RDJBRSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE0LjA4NjEgMzA2LjY2M0wzMS4xOTA1IDI4OS41NThDMzMuNjkxMSAyODcuMDU4IDM3Ljc0NTIgMjg3LjA1OCA0MC4yNDU4IDI4OS41NThMNTcuMzUwMiAzMDYuNjYzQzU5Ljg1MDcgMzA5LjE2MyA1OS44NTA3IDMxMy4yMTggNTcuMzUwMiAzMTUuNzE4TDQwLjI0NTggMzMyLjgyMkMzNy43NDUzIDMzNS4zMjMgMzMuNjkxMSAzMzUuMzIzIDMxLjE5MDUgMzMyLjgyMkwxNC4wODYxIDMxNS43MThDMTEuNTg1NiAzMTMuMjE4IDExLjU4NTYgMzA5LjE2MyAxNC4wODYxIDMwNi42NjNaTTE4LjExMDcgMzEwLjY4N0MxNy44MzI4IDMxMC45NjUgMTcuODMyOCAzMTEuNDE2IDE4LjExMDcgMzExLjY5NEwzNS4yMTUxIDMyOC43OThDMzUuNDkyOSAzMjkuMDc2IDM1Ljk0MzQgMzI5LjA3NiAzNi4yMjEyIDMyOC43OThMNTMuMzI1NiAzMTEuNjkzQzUzLjYwMzUgMzExLjQxNiA1My42MDM1IDMxMC45NjUgNTMuMzI1NiAzMTAuNjg3TDM2LjIyMTIgMjkzLjU4M0MzNS45NDM0IDI5My4zMDUgMzUuNDkyOSAyOTMuMzA1IDM1LjIxNTEgMjkzLjU4M0wxOC4xMTA3IDMxMC42ODdaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0yMi4xMTQ1IDMuNTU3MjVDMjIuMTE0NSA1LjUyMTg2IDIwLjUyMTkgNy4xMTQ1IDE4LjU1NzIgNy4xMTQ1QzE2LjU5MjYgNy4xMTQ1IDE1IDUuNTIxODYgMTUgMy41NTcyNUMxNSAxLjU5MjYzIDE2LjU5MjYgMCAxOC41NTcyIDBDMjAuNTIxOSAwIDIyLjExNDUgMS41OTI2MyAyMi4xMTQ1IDMuNTU3MjVaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0yMi4xMTQ3IDE2LjM2MzRDMjIuMTE0NyAxOC4zMjggMjAuNTIyIDE5LjkyMDYgMTguNTU3NCAxOS45MjA2QzE2LjU5MjggMTkuOTIwNiAxNS4wMDAyIDE4LjMyOCAxNS4wMDAyIDE2LjM2MzRDMTUuMDAwMiAxNC4zOTg4IDE2LjU5MjggMTIuODA2MiAxOC41NTc0IDEyLjgwNjJDMjAuNTIyIDEyLjgwNjIgMjIuMTE0NyAxNC4zOTg4IDIyLjExNDcgMTYuMzYzNFoiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTIyLjExNDcgMjkuMTY5NkMyMi4xMTQ3IDMxLjEzNDIgMjAuNTIyIDMyLjcyNjggMTguNTU3NCAzMi43MjY4QzE2LjU5MjggMzIuNzI2OCAxNS4wMDAyIDMxLjEzNDIgMTUuMDAwMiAyOS4xNjk2QzE1LjAwMDIgMjcuMjA0OSAxNi41OTI4IDI1LjYxMjMgMTguNTU3NCAyNS42MTIzQzIwLjUyMiAyNS42MTIzIDIyLjExNDcgMjcuMjA0OSAyMi4xMTQ3IDI5LjE2OTZaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0zNC45MjA3IDMuNTU3MjVDMzQuOTIwNyA1LjUyMTg2IDMzLjMyODEgNy4xMTQ1IDMxLjM2MzUgNy4xMTQ1QzI5LjM5ODggNy4xMTQ1IDI3LjgwNjIgNS41MjE4NiAyNy44MDYyIDMuNTU3MjVDMjcuODA2MiAxLjU5MjYzIDI5LjM5ODggMCAzMS4zNjM1IDBDMzMuMzI4MSAwIDM0LjkyMDcgMS41OTI2MyAzNC45MjA3IDMuNTU3MjVaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0zNC45MjA3IDE2LjM2MzRDMzQuOTIwNyAxOC4zMjggMzMuMzI4MSAxOS45MjA2IDMxLjM2MzUgMTkuOTIwNkMyOS4zOTg4IDE5LjkyMDYgMjcuODA2MiAxOC4zMjggMjcuODA2MiAxNi4zNjM0QzI3LjgwNjIgMTQuMzk4OCAyOS4zOTg4IDEyLjgwNjIgMzEuMzYzNSAxMi44MDYyQzMzLjMyODEgMTIuODA2MiAzNC45MjA3IDE0LjM5ODggMzQuOTIwNyAxNi4zNjM0WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNMzQuOTIwNyAyOS4xNjk2QzM0LjkyMDcgMzEuMTM0MiAzMy4zMjgxIDMyLjcyNjggMzEuMzYzNSAzMi43MjY4QzI5LjM5ODggMzIuNzI2OCAyNy44MDYyIDMxLjEzNDIgMjcuODA2MiAyOS4xNjk2QzI3LjgwNjIgMjcuMjA0OSAyOS4zOTg4IDI1LjYxMjMgMzEuMzYzNSAyNS42MTIzQzMzLjMyODEgMjUuNjEyMyAzNC45MjA3IDI3LjIwNDkgMzQuOTIwNyAyOS4xNjk2WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNDcuNzI2NyAzLjU1NzI1QzQ3LjcyNjcgNS41MjE4NiA0Ni4xMzQxIDcuMTE0NSA0NC4xNjk1IDcuMTE0NUM0Mi4yMDQ5IDcuMTE0NSA0MC42MTIyIDUuNTIxODYgNDAuNjEyMiAzLjU1NzI1QzQwLjYxMjIgMS41OTI2MyA0Mi4yMDQ5IDAgNDQuMTY5NSAwQzQ2LjEzNDEgMCA0Ny43MjY3IDEuNTkyNjMgNDcuNzI2NyAzLjU1NzI1WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNDcuNzI2NyAxNi4zNjM0QzQ3LjcyNjcgMTguMzI4IDQ2LjEzNDEgMTkuOTIwNiA0NC4xNjk1IDE5LjkyMDZDNDIuMjA0OSAxOS45MjA2IDQwLjYxMjIgMTguMzI4IDQwLjYxMjIgMTYuMzYzNEM0MC42MTIyIDE0LjM5ODggNDIuMjA0OSAxMi44MDYyIDQ0LjE2OTUgMTIuODA2MkM0Ni4xMzQxIDEyLjgwNjIgNDcuNzI2NyAxNC4zOTg4IDQ3LjcyNjcgMTYuMzYzNFoiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTQ3LjcyNjcgMjkuMTY5NkM0Ny43MjY3IDMxLjEzNDIgNDYuMTM0MSAzMi43MjY4IDQ0LjE2OTUgMzIuNzI2OEM0Mi4yMDQ5IDMyLjcyNjggNDAuNjEyMiAzMS4xMzQyIDQwLjYxMjIgMjkuMTY5NkM0MC42MTIyIDI3LjIwNDkgNDIuMjA0OSAyNS42MTIzIDQ0LjE2OTUgMjUuNjEyM0M0Ni4xMzQxIDI1LjYxMjMgNDcuNzI2NyAyNy4yMDQ5IDQ3LjcyNjcgMjkuMTY5NloiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTk3LjQxNTMgMTY5LjAxMkM5OC41MjY2IDE2Ny45MDEgMTAwLjMyOCAxNjcuOTAxIDEwMS40NCAxNjkuMDEyTDExNi41MzIgMTg0LjEwNEMxMTcuNjQzIDE4NS4yMTYgMTE3LjY0MyAxODcuMDE4IDExNi41MzIgMTg4LjEyOUMxMTUuNDIxIDE4OS4yNCAxMTMuNjE5IDE4OS4yNCAxMTIuNTA3IDE4OC4xMjlMOTcuNDE1MyAxNzMuMDM3Qzk2LjMwMzkgMTcxLjkyNSA5Ni4zMDM5IDE3MC4xMjQgOTcuNDE1MyAxNjkuMDEyWiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNOTEuMDEyMyAxODEuODE4QzkyLjEyMzYgMTgwLjcwNyA5My45MjU1IDE4MC43MDcgOTUuMDM2OCAxODEuODE4TDExMC4xMjkgMTk2LjkxMUMxMTEuMjQgMTk4LjAyMiAxMTEuMjQgMTk5LjgyNCAxMTAuMTI5IDIwMC45MzVDMTA5LjAxOCAyMDIuMDQ2IDEwNy4yMTYgMjAyLjA0NiAxMDYuMTA0IDIwMC45MzVMOTEuMDEyMyAxODUuODQzQzg5LjkwMDkgMTg0LjczMiA4OS45MDA5IDE4Mi45MyA5MS4wMTIzIDE4MS44MThaIiBmaWxsPSIjMzMzNjNGIi8+Cjwvc3ZnPg=="); height: 200px; position: absolute; width: 130px; background-repeat: no-repeat; left: 0; top: -90px; } #page-track-show .track-header .graphics:after { content: ""; background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjEzIDMyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzOSA3Ny42ODc1TDE2MS4xMzUgNTUuNTUyNEwxODMuMjcgNzcuNjg3NUwxNjEuMTM1IDk5LjgyMjZMMTM5IDc3LjY4NzVaIiBmaWxsPSIjNTlEMkFFIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTUzLjA4NiA3My42NjNMMTcwLjE5MSA1Ni41NTg2QzE3Mi42OTEgNTQuMDU4MSAxNzYuNzQ1IDU0LjA1ODEgMTc5LjI0NiA1Ni41NTg2TDE5Ni4zNSA3My42NjNDMTk4Ljg1MSA3Ni4xNjM2IDE5OC44NTEgODAuMjE3OCAxOTYuMzUgODIuNzE4M0wxNzkuMjQ2IDk5LjgyMjdDMTc2Ljc0NSAxMDIuMzIzIDE3Mi42OTEgMTAyLjMyMyAxNzAuMTkxIDk5LjgyMjdMMTUzLjA4NiA4Mi43MTgzQzE1MC41ODYgODAuMjE3OCAxNTAuNTg2IDc2LjE2MzYgMTUzLjA4NiA3My42NjNaTTE1Ny4xMTEgNzcuNjg3NkMxNTYuODMzIDc3Ljk2NTQgMTU2LjgzMyA3OC40MTU5IDE1Ny4xMTEgNzguNjkzN0wxNzQuMjE1IDk1Ljc5ODJDMTc0LjQ5MyA5Ni4wNzYgMTc0Ljk0MyA5Ni4wNzYgMTc1LjIyMSA5NS43OTgyTDE5Mi4zMjYgNzguNjkzN0MxOTIuNjA0IDc4LjQxNTkgMTkyLjYwNCA3Ny45NjU0IDE5Mi4zMjYgNzcuNjg3NkwxNzUuMjIxIDYwLjU4MzJDMTc0Ljk0MyA2MC4zMDU0IDE3NC40OTMgNjAuMzA1NCAxNzQuMjE1IDYwLjU4MzJMMTU3LjExMSA3Ny42ODc2WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNMCAwSDMxLjMwMzhWMzEuMzAzOEgwVjBaIiBmaWxsPSIjRkFFNTRFIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIuODA2NCA3LjExNDVIMzYuOTk1N0M0MC41MzIgNy4xMTQ1IDQzLjM5ODggOS45ODEyNCA0My4zOTg4IDEzLjUxNzVWMzcuNzA2OEM0My4zOTg4IDQxLjI0MzEgNDAuNTMyIDQ0LjEwOTkgMzYuOTk1NyA0NC4xMDk5SDEyLjgwNjRDOS4yNzAxMyA0NC4xMDk5IDYuNDAzMzggNDEuMjQzMSA2LjQwMzM4IDM3LjcwNjhWMTMuNTE3NUM2LjQwMzM4IDkuOTgxMjUgOS4yNzAxMiA3LjExNDUgMTIuODA2NCA3LjExNDVaTTEyLjgwNjQgMTIuODA2MUMxMi40MTM1IDEyLjgwNjEgMTIuMDk1IDEzLjEyNDYgMTIuMDk1IDEzLjUxNzVWMzcuNzA2OEMxMi4wOTUgMzguMDk5OCAxMi40MTM1IDM4LjQxODMgMTIuODA2NCAzOC40MTgzSDM2Ljk5NTdDMzcuMzg4NiAzOC40MTgzIDM3LjcwNzIgMzguMDk5OCAzNy43MDcyIDM3LjcwNjhWMTMuNTE3NUMzNy43MDcyIDEzLjEyNDYgMzcuMzg4NiAxMi44MDYxIDM2Ljk5NTcgMTIuODA2MUgxMi44MDY0WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNjcuNTkyOSAxODAuNzk2QzY3LjU5MjkgMTgyLjM0MSA2Ni4zNDA5IDE4My41OTMgNjQuNzk2NSAxODMuNTkzQzYzLjI1MjEgMTgzLjU5MyA2Mi4wMDAxIDE4Mi4zNDEgNjIuMDAwMSAxODAuNzk2QzYyLjAwMDEgMTc5LjI1MiA2My4yNTIxIDE3OCA2NC43OTY1IDE3OEM2Ni4zNDA5IDE3OCA2Ny41OTI5IDE3OS4yNTIgNjcuNTkyOSAxODAuNzk2WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNjcuNTkyNyAxOTAuODYzQzY3LjU5MjcgMTkyLjQwOCA2Ni4zNDA3IDE5My42NiA2NC43OTYzIDE5My42NkM2My4yNTIgMTkzLjY2IDYyIDE5Mi40MDggNjIgMTkwLjg2M0M2MiAxODkuMzE5IDYzLjI1MiAxODguMDY3IDY0Ljc5NjMgMTg4LjA2N0M2Ni4zNDA3IDE4OC4wNjcgNjcuNTkyNyAxODkuMzE5IDY3LjU5MjcgMTkwLjg2M1oiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTY3LjU5MjcgMjAwLjkzQzY3LjU5MjcgMjAyLjQ3NSA2Ni4zNDA3IDIwMy43MjcgNjQuNzk2MyAyMDMuNzI3QzYzLjI1MiAyMDMuNzI3IDYyIDIwMi40NzUgNjIgMjAwLjkzQzYyIDE5OS4zODYgNjMuMjUyIDE5OC4xMzQgNjQuNzk2MyAxOTguMTM0QzY2LjM0MDcgMTk4LjEzNCA2Ny41OTI3IDE5OS4zODYgNjcuNTkyNyAyMDAuOTNaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik03Ny42NTk4IDE4MC43OTZDNzcuNjU5OCAxODIuMzQxIDc2LjQwNzkgMTgzLjU5MyA3NC44NjM1IDE4My41OTNDNzMuMzE5MSAxODMuNTkzIDcyLjA2NzEgMTgyLjM0MSA3Mi4wNjcxIDE4MC43OTZDNzIuMDY3MSAxNzkuMjUyIDczLjMxOTEgMTc4IDc0Ljg2MzUgMTc4Qzc2LjQwNzkgMTc4IDc3LjY1OTggMTc5LjI1MiA3Ny42NTk4IDE4MC43OTZaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik03Ny42NTk4IDE5MC44NjNDNzcuNjU5OCAxOTIuNDA4IDc2LjQwNzkgMTkzLjY2IDc0Ljg2MzUgMTkzLjY2QzczLjMxOTEgMTkzLjY2IDcyLjA2NzEgMTkyLjQwOCA3Mi4wNjcxIDE5MC44NjNDNzIuMDY3MSAxODkuMzE5IDczLjMxOTEgMTg4LjA2NyA3NC44NjM1IDE4OC4wNjdDNzYuNDA3OSAxODguMDY3IDc3LjY1OTggMTg5LjMxOSA3Ny42NTk4IDE5MC44NjNaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik03Ny42NTk4IDIwMC45M0M3Ny42NTk4IDIwMi40NzUgNzYuNDA3OSAyMDMuNzI3IDc0Ljg2MzUgMjAzLjcyN0M3My4zMTkxIDIwMy43MjcgNzIuMDY3MSAyMDIuNDc1IDcyLjA2NzEgMjAwLjkzQzcyLjA2NzEgMTk5LjM4NiA3My4zMTkxIDE5OC4xMzQgNzQuODYzNSAxOTguMTM0Qzc2LjQwNzkgMTk4LjEzNCA3Ny42NTk4IDE5OS4zODYgNzcuNjU5OCAyMDAuOTNaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik04Ny43MjY4IDE4MC43OTZDODcuNzI2OCAxODIuMzQxIDg2LjQ3NDggMTgzLjU5MyA4NC45MzA0IDE4My41OTNDODMuMzg2IDE4My41OTMgODIuMTM0MSAxODIuMzQxIDgyLjEzNDEgMTgwLjc5NkM4Mi4xMzQxIDE3OS4yNTIgODMuMzg2IDE3OCA4NC45MzA0IDE3OEM4Ni40NzQ4IDE3OCA4Ny43MjY4IDE3OS4yNTIgODcuNzI2OCAxODAuNzk2WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNODcuNzI2OCAxOTAuODYzQzg3LjcyNjggMTkyLjQwOCA4Ni40NzQ4IDE5My42NiA4NC45MzA0IDE5My42NkM4My4zODYgMTkzLjY2IDgyLjEzNDEgMTkyLjQwOCA4Mi4xMzQxIDE5MC44NjNDODIuMTM0MSAxODkuMzE5IDgzLjM4NiAxODguMDY3IDg0LjkzMDQgMTg4LjA2N0M4Ni40NzQ4IDE4OC4wNjcgODcuNzI2OCAxODkuMzE5IDg3LjcyNjggMTkwLjg2M1oiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTg3LjcyNjggMjAwLjkzQzg3LjcyNjggMjAyLjQ3NSA4Ni40NzQ4IDIwMy43MjcgODQuOTMwNCAyMDMuNzI3QzgzLjM4NiAyMDMuNzI3IDgyLjEzNDEgMjAyLjQ3NSA4Mi4xMzQxIDIwMC45M0M4Mi4xMzQxIDE5OS4zODYgODMuMzg2IDE5OC4xMzQgODQuOTMwNCAxOTguMTM0Qzg2LjQ3NDggMTk4LjEzNCA4Ny43MjY4IDE5OS4zODYgODcuNzI2OCAyMDAuOTNaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0xODguNDQ0IDI4Ni4yNjZDMTg4Ljg3NiAyODYuMjM5IDE4OS4xNjUgMjg2LjcwMyAxODguOTUyIDI4Ny4wOEwxNzQuMjk3IDMxMy4wMDNDMTc0LjA5MyAzMTMuMzYzIDE3My41NzggMzEzLjM3NCAxNzMuMzU5IDMxMy4wMjNMMTU4LjI5IDI4OC45MDhDMTU4LjA3IDI4OC41NTcgMTU4LjMwNiAyODguMDk5IDE1OC43MiAyODguMDc0TDE4OC40NDQgMjg2LjI2NloiIGZpbGw9IiNGNjk2MDUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNjguOTkxIDI5Ni4xMkMxNjguNTg1IDI5Ni4xNTYgMTY4LjM1OSAyOTYuNjA4IDE2OC41NzUgMjk2Ljk1NEwxODIuNjcgMzE5LjUxQzE4Mi44ODYgMzE5Ljg1NiAxODMuMzkxIDMxOS44NTIgMTgzLjYwMiAzMTkuNTAyTDE5OC42OTMgMjk0LjM5QzE5OC45MjMgMjk0LjAwNyAxOTguNjIyIDI5My41MjYgMTk4LjE3NyAyOTMuNTY1TDE2OC45OTEgMjk2LjEyWk0yMDIuNDM4IDI5Ni42NDFMMTg3LjM0NyAzMjEuNzUzQzE4NS40NTYgMzI0Ljg5OSAxODAuOTEgMzI0LjkzOSAxNzguOTY1IDMyMS44MjZMMTY0Ljg3IDI5OS4yNjlDMTYyLjkyNSAyOTYuMTU3IDE2NC45NTMgMjkyLjA4OCAxNjguNjEgMjkxLjc2OEwxOTcuNzk2IDI4OS4yMTJDMjAxLjc5OCAyODguODYxIDIwNC41MDggMjkzLjE5OCAyMDIuNDM4IDI5Ni42NDFaIiBmaWxsPSIjMzMzNjNGIi8+Cjwvc3ZnPgoK"); height: 200px; position: absolute; width: 130px; background-repeat: no-repeat; right: 30px; bottom: 0px; transform: rotate(65deg); } #page-track-show .track-header .graphics .c-track-icon{ margin-right: 48px; height: 128px; width: 128px; filter: drop-shadow( 0px 2px 16px rgba(var(--track-icon-color), 0.3) ); } #page-track-show article{ padding-bottom: 80px; /* background: linear-gradient(180deg, #ffffff 80%, #fbfbff 100%); */ } #page-track-show article.summary-article{ background-color: var(--backgroundColorB); } #page-track-show article.summary-article .container{ display: flex; padding-top: 32px; } #page-track-show article.summary-article .lhs{ flex-grow: 1; /* margin-top: -130px; */ } #page-track-show article.summary-article .rhs{ margin-left: 64px; flex-shrink: 0; width: 400px; } #page-track-show article.summary-article section.hello-world{ display: flex; border-radius: 8px; background-color: var(--backgroundColorF); --tw-shadow: 0px 4px 24px 0px rgba(var(--shadowColorMain), 0.3); --tw-shadow-colored: 0px 4px 24px 0px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); padding-top: 24px; padding-bottom: 24px; padding-left: 32px; padding-right: 32px; position: relative; margin-bottom: 32px; border-style: solid; border-color: transparent; /* TODO: decide its lighttheme color. it was white, now it is FAFAFF */ background-image: linear-gradient( var(--backgroundColorA), var(--backgroundColorA) ), linear-gradient(#2200ff, #9e00ff); background-origin: border-box; background-clip: padding-box, border-box; border-width: 2px; } #page-track-show article.summary-article section.hello-world:before { content: ""; position: absolute; background-color: var(--borderColor7); width: 2px; bottom: -33px; height: 30px; left: 50px; } #page-track-show article.summary-article section.hello-world > .c-icon { height: 80px; width: 80px; margin-right: 32px; } #page-track-show article.summary-article section.hello-world > .content{ display: flex; flex-direction: column; align-items: flex-start; } #page-track-show article.summary-article section.hello-world > .content h3{ font-size: 21px; font-weight: 500; line-height: 150%; color: var(--textColor2); margin-bottom: 8px; } #page-track-show article.summary-article section.hello-world > .content h3 strong{ font-weight: 600; } #page-track-show article.summary-article section.hello-world > .content p{ line-height: 160%; } #page-track-show article.summary-article section.hello-world > .content p a:not(.btn-primary) { color: var(--c-prominent-link-color); font-weight: 500; } #page-track-show article.summary-article section.hello-world > .content p strong{ font-weight: 500; color: var(--textColor2); } #page-track-show article.summary-article section.hello-world > .content p{ font-size: 16px; margin-bottom: 16px; } #page-track-show article.summary-article section.progress-chart{ border-radius: 8px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); --tw-shadow: var(--box-shadow-lg); --tw-shadow-colored: var(--box-shadow-lg); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); padding-left: 32px; padding-right: 32px; padding-top: 20px; padding-bottom: 28px; } #page-track-show article.summary-article section.progress-chart h2{ font-size: 20px; font-weight: 500; line-height: 170%; color: var(--textColor2); margin-bottom: 8px; } #page-track-show article.summary-article section.progress-chart h2 em{ font-weight: 600; font-style: normal; color: var(--colorPurpleToBrightPurple); } #page-track-show article.summary-article section.progress-chart h2 strong{ font-weight: 600; } #page-track-show article.summary-article section.progress-chart .c-progress{ margin-bottom: 20px; } #page-track-show article.summary-article section.progress-chart .exercises{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(24px, 1fr)); margin-bottom: 24px; } #page-track-show article.summary-article section.progress-chart .key{ display: flex; align-items: center; } #page-track-show article.summary-article section.progress-chart .key .item{ display: flex; align-items: center; margin-right: 32px; } #page-track-show article.summary-article section.progress-chart .key .item .c-ed { height: 16px; width: 16px; margin-right: 12px; } #page-track-show article.summary-article section.progress-chart .key .item .status{ font-size: 16px; font-weight: 600; line-height: 150%; color: var(--textColor6); margin-right: 8px; } #page-track-show article.summary-article section.progress-chart .key .item .count{ font-size: 14px; font-weight: 500; line-height: 150%; color: var(--textColor6); } #page-track-show article.summary-article section.progress-chart .key .item.total{ margin-left: auto; margin-right: 0px; border-left-width: 1px; border-color: var(--borderColor6); padding-left: 24px; } #page-track-show article.summary-article .c-react-wrapper-track-trophies { min-height: 144px; } #page-track-show article.summary-article section.trophy-cabinet{ border-radius: 8px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); padding-left: 32px; padding-right: 32px; padding-top: 24px; padding-bottom: 28px; --tw-shadow: var(--box-shadow-lg); --tw-shadow-colored: var(--box-shadow-lg); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } #page-track-show article.summary-article section.trophy-cabinet .trophies{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } #page-track-show article.summary-article section.trophy-cabinet .trophy{ overflow: hidden; border-radius: 8px; border-width: 1px; border-color: var(--borderColor7); --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); display: flex; flex-direction: column; align-items: stretch; flex: 1 1 20%; } #page-track-show article.summary-article section.trophy-cabinet .trophy .icon{ padding: 8px; } #page-track-show article.summary-article section.trophy-cabinet .trophy .icon img{ width: 100%; } #page-track-show article.summary-article section.trophy-cabinet .trophy .title{ border-top-width: 1px; border-color: var(--borderColor7); background-color: var(--backgroundColorB); padding: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--textColor6); display: grid; flex-grow: 1; place-items: center; text-align: center; line-height: 130%; } #page-track-show article.summary-article section.trophy-cabinet .trophy.revealable { animation: pulse-box-shadow 2s infinite forwards; --tw-shadow: var(--box-shadow-sm); --tw-shadow-colored: var(--box-shadow-sm); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } #page-track-show article.summary-article section.trophy-cabinet .trophy.revealable:hover{ --tw-shadow: 0px 4px 16px 0px rgba(var(--shadowColorMain), 0.3); --tw-shadow-colored: 0px 4px 16px 0px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } #page-track-show article.summary-article section.trophy-cabinet .trophy.revealable{ position: relative; overflow: hidden; } #page-track-show article.summary-article section.trophy-cabinet .trophy.revealable img:not(.shimmer){ opacity: 0.15; --tw-grayscale: grayscale(100%); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } #page-track-show article.summary-article section.trophy-cabinet .trophy.revealable .shimmer{ position: absolute; inset: 0px; bottom: 0px; background-size: contain; background-repeat: no-repeat; clip-path: polygon(-5% 0%, 5% 0%, 0% 5%, 0% -5%); animation: shimmer 3s infinite forwards; } #page-track-show article.summary-article section.trophy-cabinet .trophy.acquired{ --tw-shadow: var(--box-shadow-sm); --tw-shadow-colored: var(--box-shadow-sm); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } #page-track-show article.summary-article section.trophy-cabinet .trophy.acquired:hover{ --tw-shadow: 0px 4px 16px 0px rgba(var(--shadowColorMain), 0.3); --tw-shadow-colored: 0px 4px 16px 0px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } #page-track-show article.summary-article section.trophy-cabinet .trophy.not-acquired img{ opacity: 0.15; --tw-grayscale: grayscale(100%); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } #page-track-show article.summary-article section.trophy-cabinet .trophy.not-acquired .title{ opacity: 0.7; } #page-track-show article.summary-article section.activities-zero-state{ margin-top: 40px; padding-top: 16px; padding-bottom: 16px; padding-left: 24px; padding-right: 24px; position: relative; display: flex; align-items: center; border-radius: 8px; background-color: var(--backgroundColorD); } #page-track-show article.summary-article section.activities-zero-state:before { content: ""; position: absolute; background-color: var(--borderColor7); width: 2px; top: -40px; height: 40px; left: 50px; } #page-track-show article.summary-article section.activities-zero-state .c-icon { height: 24px; width: 24px; margin-right: 24px; filter: var(--textColor6-filter); } #page-track-show article.summary-article section.activities-zero-state p{ font-size: 17px; font-weight: 500; line-height: 170%; color: var(--textColor6); } #page-track-show article.summary-article section.activities{ display: flex; flex-direction: column; } #page-track-show article.summary-article section.activities > .exercise{ display: flex; flex-direction: column; padding-top: 8px; position: relative; margin-top: 32px; } #page-track-show article.summary-article section.activities > .exercise:before { content: ""; position: absolute; background-color: var(--borderColor7); width: 2px; top: -32px; left: 31px; bottom: 0; } #page-track-show article.summary-article section.activities > .exercise:first-child{ margin-top: 24px; } #page-track-show article.summary-article section.activities > .exercise:first-child:before { top: -24px; } #page-track-show article.summary-article section.activities > .exercise:last-of-type{ margin-top: 24px; } #page-track-show article.summary-article section.activities > .exercise:last-of-type:before { bottom: -24px; } #page-track-show article.summary-article section.activities > .exercise:not(:first-child) .c-combo-button { display: none; } #page-track-show article.summary-article section.activities > .exercise > header{ display: flex; align-items: center; } #page-track-show article.summary-article section.activities > .exercise > header > .content{ display: flex; flex-grow: 1; align-items: center; } #page-track-show article.summary-article section.activities > .exercise > header > .content .c-exercise-icon { height: 64px; width: 64px; margin-right: 16px; } #page-track-show article.summary-article section.activities > .exercise > header > .content .c-exercise-widget .--blurb{ display: none; } .c-concepts-map .connection#page-track-show article.summary-article section.activities > .exercise > header > .content .c-exercise-widget .--blurb { opacity: 0; } #page-track-show article.summary-article section.activities > .exercise > header > .content .c-exercise-widget:hover { box-shadow: none; } #page-track-show article.summary-article section.activities > .exercise > .latest-iteration{ display: flex; align-items: center; border-radius: 5px; border-width: 1px; border-color: var(--borderColor5); padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; margin-top: 16px; margin-left: 80px; } #page-track-show article.summary-article section.activities > .exercise > .latest-iteration .action-icon { height: 16px; width: 16px; margin-left: 32px; color: var(--textColor6); } #page-track-show article.summary-article section.activities > .exercise > .activities{ margin-top: 8px; margin-left: 80px; } #page-track-show article.summary-article section.activities > .exercise > .activities > .activity{ display: flex; align-items: center; border-radius: 5px; padding-top: 4px; padding-bottom: 4px; /* Line this up with the iteration summary above */ padding-left: 13px; padding-right: 18px; } #page-track-show article.summary-article section.activities > .exercise > .activities > .activity:hover{ background-color: var(--backgroundColorE); } #page-track-show article.summary-article section.activities > .exercise > .activities > .activity > .icon{ border-radius: 100%; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); --tw-shadow: var(--box-shadow-sm); --tw-shadow-colored: var(--box-shadow-sm); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); display: grid; place-items: center; margin-right: 16px; padding-top: 8px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; } #page-track-show article.summary-article section.activities > .exercise > .activities > .activity > .icon > .c-icon { height: 16px; width: 16px; filter: var(--textColor5-filter); } #page-track-show article.summary-article section.activities > .exercise > .activities > .activity > .description{ flex-grow: 1; font-size: 15px; line-height: 140%; } #page-track-show article.summary-article section.activities > .exercise > .activities > .activity > .description strong{ font-weight: 500; color: var(--textColor5); } #page-track-show article.summary-article section.activities > .exercise > .activities > .activity > time{ font-size: 13px; color: var(--textColor6); margin-left: 32px; } #page-track-show article.summary-article section.activities > .exercise > .activities > .activity > .action-icon { height: 12px; width: 12px; margin-left: 32px; filter: var(--textColor6-filter); } #page-track-show article.summary-article section.activities > .c-prominent-link{ margin-top: 20px; align-self: flex-start; } #page-track-show article.summary-article .weekly-count{ display: flex; align-items: center; } #page-track-show article.summary-article .weekly-count .text{ flex-grow: 1; } #page-track-show article.summary-article .weekly-count .text .count{ font-size: 32px; font-weight: 500; line-height: 150%; } #page-track-show article.summary-article .weekly-count .text h3{ margin-bottom: 0px; font-size: 16px; line-height: 150%; color: var(--textColor2); } #page-track-show article.summary-article .weekly-count .c-react-wrapper-common-progress-graph{ margin-left: 32px; width: 145px; flex-shrink: 0; } #page-track-show article.summary-article .weekly-count .graph, #page-track-show article.summary-article .weekly-count .c-progress-graph { height: 70px; width: 145px; } #page-track-show article.summary-article .weekly-count .c-progress-graph { stroke-width: 3px; stroke-linecap: round; --progress-graph-first-color: rgb(15, 33, 244); --progress-graph-last-color: rgb(136, 30, 245); } #page-track-show article.summary-article section.learning-pattern, #page-track-show article.summary-article .stats-box{ border-radius: 8px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); } #page-track-show article.summary-article section.learning-pattern{ margin-bottom: 40px; padding-top: 12px; padding-bottom: 12px; padding-left: 24px; padding-right: 24px; display: flex; align-items: center; } #page-track-show article.summary-article section.learning-pattern .c-icon { width: 24px; height: 24px; margin-right: 24px; } #page-track-show article.summary-article section.learning-pattern h3{ font-weight: 600; line-height: 160%; color: var(--textColor6); } #page-track-show article.summary-article section.learning-pattern p{ font-weight: 500; line-height: 160%; color: var(--textColor6); } #page-track-show article.summary-article .stats-box{ display: block; margin-bottom: 24px; padding-top: 16px; padding-bottom: 16px; padding-left: 24px; padding-right: 24px; display: flex; align-items: center; --tw-shadow: var(--box-shadow-sm); --tw-shadow-colored: var(--box-shadow-sm); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } #page-track-show article.summary-article .stats-box:hover{ --tw-shadow: var(--box-shadow-base); --tw-shadow-colored: var(--box-shadow-base); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } #page-track-show article.summary-article .stats-box .count{ font-size: 28px; font-weight: 500; line-height: 150%; color: var(--textColor2); } #page-track-show article.summary-article .stats-box h3{ font-size: 16px; line-height: 150%; color: var(--textColor2); margin-bottom: 16px; } #page-track-show article.summary-article .stats-box .c-icon.action-icon { height: 24px; width: 24px; margin-left: auto; filter: var(--textColor2-filter); } #page-track-show article.summary-article .stats-box .icons{ display: flex; align-items: center; } #page-track-show article.summary-article .stats-box .icons .c-icon { height: 40px; width: 40px; margin-right: 8px; } #page-track-show article.summary-article .stats-box .icons .c-concept-icon{ margin-right: 8px; } #page-track-show section.live-section{ height: 100px; } #page-track-show section.live-section .cover { width: 0; } #page-track-show article.updates-article{ padding-top: 64px; padding-bottom: 40px; } #page-track-show article.updates-article header .c-icon.graphical-icon { width: 80px; height: 80px; margin-bottom: 16px; } #page-track-show article.updates-article .container{ display: flex; } #page-track-show article.updates-article section.updates-section{ flex-grow: 1; } #page-track-show article.updates-article section.updates-section h2{ font-size: 28px; font-weight: 700; line-height: 140%; color: var(--textColor1); } @media (min-width: 768px){ #page-track-show article.updates-article section.updates-section h2{ font-size: 31px; } } #page-track-show article.updates-article section.updates-section h2{ margin-bottom: 20px; } #page-track-show article.updates-article section.updates-section hr.c-divider{ margin-bottom: 40px; } #page-track-show article.updates-article section.updates-section .c-prominent-link{ margin-top: 24px; } #page-track-show article.updates-article section.contributors-section{ flex-shrink: 0; margin-left: 140px; width: 33.3%; } #page-track-show article.updates-article section.contributors-section h2{ margin-bottom: 16px; display: flex; align-items: center; } #page-track-show article.updates-article section.contributors-section h2 .c-icon { height: 24px; width: 24px; margin-right: 16px; filter: var(--textColor1-filter); } #page-track-show article.updates-article section.contributors-section .c-heading-with-count{ margin-bottom: 16px; } #page-track-show article.updates-article section.contributors-section .showcase{ margin-bottom: 24px; display: flex; flex-direction: column; gap: 8px; } #page-track-show article.updates-article section.contributors-section .showcase a{ display: flex; align-items: center; border-radius: 8px; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(203 201 217 / var(--tw-border-opacity, 1)); padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; } #page-track-show article.updates-article section.contributors-section .showcase a .c-avatar { height: 48px; width: 48px; margin-right: 16px; } #page-track-show article.updates-article section.contributors-section .showcase a .name{ margin-right: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 600; } #page-track-show article.updates-article section.contributors-section .faces{ margin-bottom: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } #page-track-show article.updates-article section.contributors-section .faces a { width: 48px; } #page-track-show article.updates-article section.contributors-section .faces .c-avatar{ display: block; flex-shrink: 0; flex-grow: 0; border-radius: 100%; background-size: cover; background-position: center; height: 48px; } #page-track-show article.updates-article section.contributors-section .faces a.all{ display: block; flex-shrink: 0; flex-grow: 0; font-weight: 600; color: var(--linkColor); } #page-track-show article.updates-article section.contributors-section .cta{ border-radius: 8px; background-color: var(--backgroundColorD); padding-top: 16px; padding-bottom: 16px; padding-left: 24px; padding-right: 24px; } #page-track-show article.updates-article section.contributors-section .cta h3{ margin-bottom: 8px; font-size: 16px; font-weight: 600; } #page-track-show article.updates-article section.contributors-section .cta p{ margin-bottom: 8px; font-size: 14px; line-height: 150%; } #page-track-show article.updates-article section.contributors-section .cta a{ display: block; font-size: 14px; font-weight: 600; color: var(--linkColor); } #page-track-show article.mentoring-article{ position: relative; padding-top: 72px; } #page-track-show article.mentoring-article .mentoring-locked-overlay{ position: absolute; z-index: 10; display: grid; place-items: center; top: 0; left: 0; right: 0; bottom: 0; /* TODO: Make into var */ background: rgba(255, 255, 255, 0.8); } #page-track-show article.mentoring-article .mentoring-locked-overlay .content{ border-radius: 8px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); --tw-shadow: var(--box-shadow-lg); --tw-shadow-colored: var(--box-shadow-lg); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); padding-top: 32px; padding-bottom: 32px; padding-left: 64px; padding-right: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; } #page-track-show article.mentoring-article .mentoring-locked-overlay .content .c-icon { width: 64px; height: 64px; margin-bottom: 24px; } #page-track-show article.mentoring-article .mentoring-locked-overlay .content h3{ font-size: 20px; font-weight: 600; line-height: 140%; color: var(--textColor1); } #page-track-show article.mentoring-article .container{ display: flex; flex-direction: column; } #page-track-show article.mentoring-article header.mentoring-header{ margin-bottom: 40px; display: flex; align-items: center; } #page-track-show article.mentoring-article header.mentoring-header .lhs{ display: flex; align-items: center; margin-right: 72px; } #page-track-show article.mentoring-article header.mentoring-header .lhs .c-icon { height: 80px; width: 80px; margin-right: 24px; } #page-track-show article.mentoring-article header.mentoring-header .lhs h2{ font-size: 28px; font-weight: 700; line-height: 140%; color: var(--textColor1); } @media (min-width: 768px){ #page-track-show article.mentoring-article header.mentoring-header .lhs h2{ font-size: 31px; } } #page-track-show article.mentoring-article header.mentoring-header .lhs h2{ margin-bottom: 4px; } #page-track-show article.mentoring-article header.mentoring-header .lhs p{ font-size: 18px; line-height: 170%; color: var(--textColor6); } #page-track-show article.mentoring-article header.mentoring-header .rhs{ margin-left: auto; width: 100%; max-width: 680px; } #page-track-show article.mentoring-article header.mentoring-header .rhs h3{ font-size: 20px; font-weight: 600; line-height: 140%; color: var(--textColor1); margin-bottom: 12px; display: flex; align-items: center; } #page-track-show article.mentoring-article header.mentoring-header .rhs h3 .c-primary-reputation{ margin-left: 12px; } #page-track-show article.mentoring-article header.mentoring-header .rhs .max{ font-size: 15px; font-weight: 600; line-height: 160%; color: var(--textColor7); margin-bottom: 12px; padding-top: 12px; padding-bottom: 12px; text-align: center; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23C8D5EF' stroke-width='3' stroke-dasharray='16%2c16' stroke-dashoffset='4' stroke-linecap='round'/%3e%3c/svg%3e"); } #page-track-show article.mentoring-article header.mentoring-header .rhs .c-progress{ margin-bottom: 12px; } #page-track-show article.mentoring-article header.mentoring-header .rhs .info .explanation{ display: flex; align-items: center; font-size: 14px; font-weight: 600; line-height: 150%; color: var(--textColor6); } #page-track-show article.mentoring-article header.mentoring-header .rhs .info .explanation .c-icon{ margin-right: 12px; height: 16px; width: 16px; filter: var(--textColor6-filter); } #page-track-show article.mentoring-article header.mentoring-header .rhs .info .next-slot{ font-weight: 500; line-height: 160%; color: var(--textColor6); } #page-track-show article.mentoring-article header.mentoring-header .rhs .info .next-slot strong{ font-weight: 600; color: #7029f5; background: -webkit-linear-gradient( #9e00ff, #2200ff ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #page-track-show article.mentoring-article header.mentoring-header .rhs .info .next-slot a{ text-decoration-line: underline; } #page-track-show article.mentoring-article .slots{ display: grid; gap: 32px; grid-template-columns: repeat(4, 1fr); margin-bottom: 48px; } #page-track-show article.mentoring-article .slots .discussion, #page-track-show article.mentoring-article .slots .request, #page-track-show article.mentoring-article .slots .available-slot, #page-track-show article.mentoring-article .slots .locked-slot { height: 240px; border-radius: 8px; } #page-track-show article.mentoring-article .slots .discussion, #page-track-show article.mentoring-article .slots .request{ padding-top: 16px; padding-bottom: 16px; padding-left: 24px; padding-right: 24px; display: flex; flex-direction: column; align-items: flex-start; --tw-shadow: 0px 4px 24px 0px var(--shadowColorSecondary); --tw-shadow-colored: 0px 4px 24px 0px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } #page-track-show article.mentoring-article .slots .discussion .c-exercise-icon, #page-track-show article.mentoring-article .slots .request .c-exercise-icon { height: 54px; width: 54px; margin-bottom: 12px; } #page-track-show article.mentoring-article .slots .discussion .exercise-title, #page-track-show article.mentoring-article .slots .request .exercise-title{ font-size: 20px; font-weight: 600; line-height: 140%; color: var(--textColor1); margin-bottom: 4px; } #page-track-show article.mentoring-article .slots .discussion .mentor{ margin-bottom: 16px; display: flex; align-items: center; font-size: 16px; font-weight: 500; line-height: 160%; color: var(--textColor6); } #page-track-show article.mentoring-article .slots .discussion .mentor .c-avatar { height: 24px; width: 24px; margin-left: 8px; margin-right: 8px; } #page-track-show article.mentoring-article .slots .discussion .mentor .name{ color: var(--textColor2); } #page-track-show article.mentoring-article .slots .discussion .--comments{ margin-top: auto; } #page-track-show article.mentoring-article .slots .request h4{ font-size: 16px; font-weight: 500; line-height: 160%; color: var(--textColor6); } #page-track-show article.mentoring-article .slots .request .estimate{ font-size: 15px; line-height: 160%; color: var(--textColor6); margin-top: auto; } #page-track-show article.mentoring-article .slots .available-slot{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23C8D5EF' stroke-width='3' stroke-dasharray='16%2c16' stroke-dashoffset='4' stroke-linecap='round'/%3e%3c/svg%3e"); } #page-track-show article.mentoring-article .slots .available-slot h4{ font-size: 18px; font-weight: 600; line-height: 150%; color: var(--textColor6); margin-bottom: 16px; } #page-track-show article.mentoring-article .slots .locked-slot{ background-color: var(--backgroundColorD); display: flex; flex-direction: column; align-items: center; justify-content: center; } #page-track-show article.mentoring-article .slots .locked-slot h4{ font-size: 18px; font-weight: 600; line-height: 150%; color: var(--textColor1); color: var(--textColor7); } #page-track-show article.mentoring-article .slots .locked-slot .c-icon { width: 32px; height: 32px; margin-bottom: 16px; filter: var(--textColor7-filter); } #page-track-show article.mentoring-article .c-prominent-link{ align-self: center; } .m-track-trophy .num-awardees{ background-color: var(--backgroundColorD); margin-bottom: 10px; padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; border-radius: 8px; } .m-track-trophy .num-awardees .c-icon{ margin-right: 4px; margin-bottom: 4px; height: 24px; width: 24px; filter: var(--textColor2-filter); display: inline; } #page-track-about .track-header .container{ display: flex; align-items: stretch; padding-top: 40px; padding-bottom: 56px; } #page-track-about .track-header .info{ flex-grow: 1; max-width: 600px; } @media (min-width: 1024px) { #page-track-about .track-header .info { /* Ensure this doesn't cause CLS with system fonts */ max-width: 680px } } #page-track-about .track-header .info h1{ margin-bottom: 12px; } #page-track-about .track-header .info p{ margin-bottom: 24px; max-width: 780px; } #page-track-about .track-header .info p strong{ font-weight: 600; color: var(--textColor1); } #page-track-about .track-header .graphics { max-width: 450px; position: relative; flex-grow: 1; place-items: center; margin-left: auto; flex-shrink: 0; overflow: hidden; } @media screen and (min-width: 1100px) { #page-track-about .track-header .graphics:before { content: ""; background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTY5IDM0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzNC4yNDkgNDguMzIzNkMxMzQuMjQ5IDU3Ljc1MzcgMTQxLjg5MyA2NS4zOTg0IDE1MS4zMjQgNjUuMzk4NEMxNjAuNzU0IDY1LjM5ODQgMTY4LjM5OCA1Ny43NTM3IDE2OC4zOTggNDguMzIzNkMxNjguMzk4IDM4Ljg5MzQgMTYwLjc1NCAzMS4yNDg4IDE1MS4zMjQgMzEuMjQ4OEMxNDEuODkzIDMxLjI0ODggMTM0LjI0OSAzOC44OTM0IDEzNC4yNDkgNDguMzIzNloiIGZpbGw9IiNGQUU1NEUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNDMuODUzIDU0LjAxNTJDMTM2LjU4NCA1NC4wMTUyIDEzMC42OTIgNDguMTIyNSAxMzAuNjkyIDQwLjg1MzRDMTMwLjY5MiAzMy41ODQzIDEzNi41ODQgMjcuNjkxNiAxNDMuODUzIDI3LjY5MTZDMTUxLjEyMiAyNy42OTE2IDE1Ny4wMTUgMzMuNTg0MyAxNTcuMDE1IDQwLjg1MzRDMTU3LjAxNSA0OC4xMjI1IDE1MS4xMjIgNTQuMDE1MiAxNDMuODUzIDU0LjAxNTJaTTE0My44NTMgNTkuNzA2OEMxMzMuNDQxIDU5LjcwNjggMTI1IDUxLjI2NTkgMTI1IDQwLjg1MzRDMTI1IDMwLjQ0MSAxMzMuNDQxIDIyIDE0My44NTMgMjJDMTU0LjI2NiAyMiAxNjIuNzA3IDMwLjQ0MSAxNjIuNzA3IDQwLjg1MzRDMTYyLjcwNyA1MS4yNjU5IDE1NC4yNjYgNTkuNzA2OCAxNDMuODUzIDU5LjcwNjhaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0wIDMxMC42ODdMMjIuMTM1MSAyODguNTUyTDQ0LjI3MDIgMzEwLjY4N0wyMi4xMzUxIDMzMi44MjJMMCAzMTAuNjg3WiIgZmlsbD0iIzU5RDJBRSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE0LjA4NjEgMzA2LjY2M0wzMS4xOTA1IDI4OS41NThDMzMuNjkxMSAyODcuMDU4IDM3Ljc0NTIgMjg3LjA1OCA0MC4yNDU4IDI4OS41NThMNTcuMzUwMiAzMDYuNjYzQzU5Ljg1MDcgMzA5LjE2MyA1OS44NTA3IDMxMy4yMTggNTcuMzUwMiAzMTUuNzE4TDQwLjI0NTggMzMyLjgyMkMzNy43NDUzIDMzNS4zMjMgMzMuNjkxMSAzMzUuMzIzIDMxLjE5MDUgMzMyLjgyMkwxNC4wODYxIDMxNS43MThDMTEuNTg1NiAzMTMuMjE4IDExLjU4NTYgMzA5LjE2MyAxNC4wODYxIDMwNi42NjNaTTE4LjExMDcgMzEwLjY4N0MxNy44MzI4IDMxMC45NjUgMTcuODMyOCAzMTEuNDE2IDE4LjExMDcgMzExLjY5NEwzNS4yMTUxIDMyOC43OThDMzUuNDkyOSAzMjkuMDc2IDM1Ljk0MzQgMzI5LjA3NiAzNi4yMjEyIDMyOC43OThMNTMuMzI1NiAzMTEuNjkzQzUzLjYwMzUgMzExLjQxNiA1My42MDM1IDMxMC45NjUgNTMuMzI1NiAzMTAuNjg3TDM2LjIyMTIgMjkzLjU4M0MzNS45NDM0IDI5My4zMDUgMzUuNDkyOSAyOTMuMzA1IDM1LjIxNTEgMjkzLjU4M0wxOC4xMTA3IDMxMC42ODdaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0yMi4xMTQ1IDMuNTU3MjVDMjIuMTE0NSA1LjUyMTg2IDIwLjUyMTkgNy4xMTQ1IDE4LjU1NzIgNy4xMTQ1QzE2LjU5MjYgNy4xMTQ1IDE1IDUuNTIxODYgMTUgMy41NTcyNUMxNSAxLjU5MjYzIDE2LjU5MjYgMCAxOC41NTcyIDBDMjAuNTIxOSAwIDIyLjExNDUgMS41OTI2MyAyMi4xMTQ1IDMuNTU3MjVaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0yMi4xMTQ3IDE2LjM2MzRDMjIuMTE0NyAxOC4zMjggMjAuNTIyIDE5LjkyMDYgMTguNTU3NCAxOS45MjA2QzE2LjU5MjggMTkuOTIwNiAxNS4wMDAyIDE4LjMyOCAxNS4wMDAyIDE2LjM2MzRDMTUuMDAwMiAxNC4zOTg4IDE2LjU5MjggMTIuODA2MiAxOC41NTc0IDEyLjgwNjJDMjAuNTIyIDEyLjgwNjIgMjIuMTE0NyAxNC4zOTg4IDIyLjExNDcgMTYuMzYzNFoiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTIyLjExNDcgMjkuMTY5NkMyMi4xMTQ3IDMxLjEzNDIgMjAuNTIyIDMyLjcyNjggMTguNTU3NCAzMi43MjY4QzE2LjU5MjggMzIuNzI2OCAxNS4wMDAyIDMxLjEzNDIgMTUuMDAwMiAyOS4xNjk2QzE1LjAwMDIgMjcuMjA0OSAxNi41OTI4IDI1LjYxMjMgMTguNTU3NCAyNS42MTIzQzIwLjUyMiAyNS42MTIzIDIyLjExNDcgMjcuMjA0OSAyMi4xMTQ3IDI5LjE2OTZaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0zNC45MjA3IDMuNTU3MjVDMzQuOTIwNyA1LjUyMTg2IDMzLjMyODEgNy4xMTQ1IDMxLjM2MzUgNy4xMTQ1QzI5LjM5ODggNy4xMTQ1IDI3LjgwNjIgNS41MjE4NiAyNy44MDYyIDMuNTU3MjVDMjcuODA2MiAxLjU5MjYzIDI5LjM5ODggMCAzMS4zNjM1IDBDMzMuMzI4MSAwIDM0LjkyMDcgMS41OTI2MyAzNC45MjA3IDMuNTU3MjVaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0zNC45MjA3IDE2LjM2MzRDMzQuOTIwNyAxOC4zMjggMzMuMzI4MSAxOS45MjA2IDMxLjM2MzUgMTkuOTIwNkMyOS4zOTg4IDE5LjkyMDYgMjcuODA2MiAxOC4zMjggMjcuODA2MiAxNi4zNjM0QzI3LjgwNjIgMTQuMzk4OCAyOS4zOTg4IDEyLjgwNjIgMzEuMzYzNSAxMi44MDYyQzMzLjMyODEgMTIuODA2MiAzNC45MjA3IDE0LjM5ODggMzQuOTIwNyAxNi4zNjM0WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNMzQuOTIwNyAyOS4xNjk2QzM0LjkyMDcgMzEuMTM0MiAzMy4zMjgxIDMyLjcyNjggMzEuMzYzNSAzMi43MjY4QzI5LjM5ODggMzIuNzI2OCAyNy44MDYyIDMxLjEzNDIgMjcuODA2MiAyOS4xNjk2QzI3LjgwNjIgMjcuMjA0OSAyOS4zOTg4IDI1LjYxMjMgMzEuMzYzNSAyNS42MTIzQzMzLjMyODEgMjUuNjEyMyAzNC45MjA3IDI3LjIwNDkgMzQuOTIwNyAyOS4xNjk2WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNDcuNzI2NyAzLjU1NzI1QzQ3LjcyNjcgNS41MjE4NiA0Ni4xMzQxIDcuMTE0NSA0NC4xNjk1IDcuMTE0NUM0Mi4yMDQ5IDcuMTE0NSA0MC42MTIyIDUuNTIxODYgNDAuNjEyMiAzLjU1NzI1QzQwLjYxMjIgMS41OTI2MyA0Mi4yMDQ5IDAgNDQuMTY5NSAwQzQ2LjEzNDEgMCA0Ny43MjY3IDEuNTkyNjMgNDcuNzI2NyAzLjU1NzI1WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNDcuNzI2NyAxNi4zNjM0QzQ3LjcyNjcgMTguMzI4IDQ2LjEzNDEgMTkuOTIwNiA0NC4xNjk1IDE5LjkyMDZDNDIuMjA0OSAxOS45MjA2IDQwLjYxMjIgMTguMzI4IDQwLjYxMjIgMTYuMzYzNEM0MC42MTIyIDE0LjM5ODggNDIuMjA0OSAxMi44MDYyIDQ0LjE2OTUgMTIuODA2MkM0Ni4xMzQxIDEyLjgwNjIgNDcuNzI2NyAxNC4zOTg4IDQ3LjcyNjcgMTYuMzYzNFoiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTQ3LjcyNjcgMjkuMTY5NkM0Ny43MjY3IDMxLjEzNDIgNDYuMTM0MSAzMi43MjY4IDQ0LjE2OTUgMzIuNzI2OEM0Mi4yMDQ5IDMyLjcyNjggNDAuNjEyMiAzMS4xMzQyIDQwLjYxMjIgMjkuMTY5NkM0MC42MTIyIDI3LjIwNDkgNDIuMjA0OSAyNS42MTIzIDQ0LjE2OTUgMjUuNjEyM0M0Ni4xMzQxIDI1LjYxMjMgNDcuNzI2NyAyNy4yMDQ5IDQ3LjcyNjcgMjkuMTY5NloiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTk3LjQxNTMgMTY5LjAxMkM5OC41MjY2IDE2Ny45MDEgMTAwLjMyOCAxNjcuOTAxIDEwMS40NCAxNjkuMDEyTDExNi41MzIgMTg0LjEwNEMxMTcuNjQzIDE4NS4yMTYgMTE3LjY0MyAxODcuMDE4IDExNi41MzIgMTg4LjEyOUMxMTUuNDIxIDE4OS4yNCAxMTMuNjE5IDE4OS4yNCAxMTIuNTA3IDE4OC4xMjlMOTcuNDE1MyAxNzMuMDM3Qzk2LjMwMzkgMTcxLjkyNSA5Ni4zMDM5IDE3MC4xMjQgOTcuNDE1MyAxNjkuMDEyWiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNOTEuMDEyMyAxODEuODE4QzkyLjEyMzYgMTgwLjcwNyA5My45MjU1IDE4MC43MDcgOTUuMDM2OCAxODEuODE4TDExMC4xMjkgMTk2LjkxMUMxMTEuMjQgMTk4LjAyMiAxMTEuMjQgMTk5LjgyNCAxMTAuMTI5IDIwMC45MzVDMTA5LjAxOCAyMDIuMDQ2IDEwNy4yMTYgMjAyLjA0NiAxMDYuMTA0IDIwMC45MzVMOTEuMDEyMyAxODUuODQzQzg5LjkwMDkgMTg0LjczMiA4OS45MDA5IDE4Mi45MyA5MS4wMTIzIDE4MS44MThaIiBmaWxsPSIjMzMzNjNGIi8+Cjwvc3ZnPg=="); height: 157px; position: absolute; width: 93px; background-repeat: no-repeat; left: 0; top: 0px; } #page-track-about .track-header .graphics:after { content: ""; background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjEzIDMyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzOSA3Ny42ODc1TDE2MS4xMzUgNTUuNTUyNEwxODMuMjcgNzcuNjg3NUwxNjEuMTM1IDk5LjgyMjZMMTM5IDc3LjY4NzVaIiBmaWxsPSIjNTlEMkFFIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTUzLjA4NiA3My42NjNMMTcwLjE5MSA1Ni41NTg2QzE3Mi42OTEgNTQuMDU4MSAxNzYuNzQ1IDU0LjA1ODEgMTc5LjI0NiA1Ni41NTg2TDE5Ni4zNSA3My42NjNDMTk4Ljg1MSA3Ni4xNjM2IDE5OC44NTEgODAuMjE3OCAxOTYuMzUgODIuNzE4M0wxNzkuMjQ2IDk5LjgyMjdDMTc2Ljc0NSAxMDIuMzIzIDE3Mi42OTEgMTAyLjMyMyAxNzAuMTkxIDk5LjgyMjdMMTUzLjA4NiA4Mi43MTgzQzE1MC41ODYgODAuMjE3OCAxNTAuNTg2IDc2LjE2MzYgMTUzLjA4NiA3My42NjNaTTE1Ny4xMTEgNzcuNjg3NkMxNTYuODMzIDc3Ljk2NTQgMTU2LjgzMyA3OC40MTU5IDE1Ny4xMTEgNzguNjkzN0wxNzQuMjE1IDk1Ljc5ODJDMTc0LjQ5MyA5Ni4wNzYgMTc0Ljk0MyA5Ni4wNzYgMTc1LjIyMSA5NS43OTgyTDE5Mi4zMjYgNzguNjkzN0MxOTIuNjA0IDc4LjQxNTkgMTkyLjYwNCA3Ny45NjU0IDE5Mi4zMjYgNzcuNjg3NkwxNzUuMjIxIDYwLjU4MzJDMTc0Ljk0MyA2MC4zMDU0IDE3NC40OTMgNjAuMzA1NCAxNzQuMjE1IDYwLjU4MzJMMTU3LjExMSA3Ny42ODc2WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNMCAwSDMxLjMwMzhWMzEuMzAzOEgwVjBaIiBmaWxsPSIjRkFFNTRFIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIuODA2NCA3LjExNDVIMzYuOTk1N0M0MC41MzIgNy4xMTQ1IDQzLjM5ODggOS45ODEyNCA0My4zOTg4IDEzLjUxNzVWMzcuNzA2OEM0My4zOTg4IDQxLjI0MzEgNDAuNTMyIDQ0LjEwOTkgMzYuOTk1NyA0NC4xMDk5SDEyLjgwNjRDOS4yNzAxMyA0NC4xMDk5IDYuNDAzMzggNDEuMjQzMSA2LjQwMzM4IDM3LjcwNjhWMTMuNTE3NUM2LjQwMzM4IDkuOTgxMjUgOS4yNzAxMiA3LjExNDUgMTIuODA2NCA3LjExNDVaTTEyLjgwNjQgMTIuODA2MUMxMi40MTM1IDEyLjgwNjEgMTIuMDk1IDEzLjEyNDYgMTIuMDk1IDEzLjUxNzVWMzcuNzA2OEMxMi4wOTUgMzguMDk5OCAxMi40MTM1IDM4LjQxODMgMTIuODA2NCAzOC40MTgzSDM2Ljk5NTdDMzcuMzg4NiAzOC40MTgzIDM3LjcwNzIgMzguMDk5OCAzNy43MDcyIDM3LjcwNjhWMTMuNTE3NUMzNy43MDcyIDEzLjEyNDYgMzcuMzg4NiAxMi44MDYxIDM2Ljk5NTcgMTIuODA2MUgxMi44MDY0WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNjcuNTkyOSAxODAuNzk2QzY3LjU5MjkgMTgyLjM0MSA2Ni4zNDA5IDE4My41OTMgNjQuNzk2NSAxODMuNTkzQzYzLjI1MjEgMTgzLjU5MyA2Mi4wMDAxIDE4Mi4zNDEgNjIuMDAwMSAxODAuNzk2QzYyLjAwMDEgMTc5LjI1MiA2My4yNTIxIDE3OCA2NC43OTY1IDE3OEM2Ni4zNDA5IDE3OCA2Ny41OTI5IDE3OS4yNTIgNjcuNTkyOSAxODAuNzk2WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNNjcuNTkyNyAxOTAuODYzQzY3LjU5MjcgMTkyLjQwOCA2Ni4zNDA3IDE5My42NiA2NC43OTYzIDE5My42NkM2My4yNTIgMTkzLjY2IDYyIDE5Mi40MDggNjIgMTkwLjg2M0M2MiAxODkuMzE5IDYzLjI1MiAxODguMDY3IDY0Ljc5NjMgMTg4LjA2N0M2Ni4zNDA3IDE4OC4wNjcgNjcuNTkyNyAxODkuMzE5IDY3LjU5MjcgMTkwLjg2M1oiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTY3LjU5MjcgMjAwLjkzQzY3LjU5MjcgMjAyLjQ3NSA2Ni4zNDA3IDIwMy43MjcgNjQuNzk2MyAyMDMuNzI3QzYzLjI1MiAyMDMuNzI3IDYyIDIwMi40NzUgNjIgMjAwLjkzQzYyIDE5OS4zODYgNjMuMjUyIDE5OC4xMzQgNjQuNzk2MyAxOTguMTM0QzY2LjM0MDcgMTk4LjEzNCA2Ny41OTI3IDE5OS4zODYgNjcuNTkyNyAyMDAuOTNaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik03Ny42NTk4IDE4MC43OTZDNzcuNjU5OCAxODIuMzQxIDc2LjQwNzkgMTgzLjU5MyA3NC44NjM1IDE4My41OTNDNzMuMzE5MSAxODMuNTkzIDcyLjA2NzEgMTgyLjM0MSA3Mi4wNjcxIDE4MC43OTZDNzIuMDY3MSAxNzkuMjUyIDczLjMxOTEgMTc4IDc0Ljg2MzUgMTc4Qzc2LjQwNzkgMTc4IDc3LjY1OTggMTc5LjI1MiA3Ny42NTk4IDE4MC43OTZaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik03Ny42NTk4IDE5MC44NjNDNzcuNjU5OCAxOTIuNDA4IDc2LjQwNzkgMTkzLjY2IDc0Ljg2MzUgMTkzLjY2QzczLjMxOTEgMTkzLjY2IDcyLjA2NzEgMTkyLjQwOCA3Mi4wNjcxIDE5MC44NjNDNzIuMDY3MSAxODkuMzE5IDczLjMxOTEgMTg4LjA2NyA3NC44NjM1IDE4OC4wNjdDNzYuNDA3OSAxODguMDY3IDc3LjY1OTggMTg5LjMxOSA3Ny42NTk4IDE5MC44NjNaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik03Ny42NTk4IDIwMC45M0M3Ny42NTk4IDIwMi40NzUgNzYuNDA3OSAyMDMuNzI3IDc0Ljg2MzUgMjAzLjcyN0M3My4zMTkxIDIwMy43MjcgNzIuMDY3MSAyMDIuNDc1IDcyLjA2NzEgMjAwLjkzQzcyLjA2NzEgMTk5LjM4NiA3My4zMTkxIDE5OC4xMzQgNzQuODYzNSAxOTguMTM0Qzc2LjQwNzkgMTk4LjEzNCA3Ny42NTk4IDE5OS4zODYgNzcuNjU5OCAyMDAuOTNaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik04Ny43MjY4IDE4MC43OTZDODcuNzI2OCAxODIuMzQxIDg2LjQ3NDggMTgzLjU5MyA4NC45MzA0IDE4My41OTNDODMuMzg2IDE4My41OTMgODIuMTM0MSAxODIuMzQxIDgyLjEzNDEgMTgwLjc5NkM4Mi4xMzQxIDE3OS4yNTIgODMuMzg2IDE3OCA4NC45MzA0IDE3OEM4Ni40NzQ4IDE3OCA4Ny43MjY4IDE3OS4yNTIgODcuNzI2OCAxODAuNzk2WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNODcuNzI2OCAxOTAuODYzQzg3LjcyNjggMTkyLjQwOCA4Ni40NzQ4IDE5My42NiA4NC45MzA0IDE5My42NkM4My4zODYgMTkzLjY2IDgyLjEzNDEgMTkyLjQwOCA4Mi4xMzQxIDE5MC44NjNDODIuMTM0MSAxODkuMzE5IDgzLjM4NiAxODguMDY3IDg0LjkzMDQgMTg4LjA2N0M4Ni40NzQ4IDE4OC4wNjcgODcuNzI2OCAxODkuMzE5IDg3LjcyNjggMTkwLjg2M1oiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTg3LjcyNjggMjAwLjkzQzg3LjcyNjggMjAyLjQ3NSA4Ni40NzQ4IDIwMy43MjcgODQuOTMwNCAyMDMuNzI3QzgzLjM4NiAyMDMuNzI3IDgyLjEzNDEgMjAyLjQ3NSA4Mi4xMzQxIDIwMC45M0M4Mi4xMzQxIDE5OS4zODYgODMuMzg2IDE5OC4xMzQgODQuOTMwNCAxOTguMTM0Qzg2LjQ3NDggMTk4LjEzNCA4Ny43MjY4IDE5OS4zODYgODcuNzI2OCAyMDAuOTNaIiBmaWxsPSIjMzMzNjNGIi8+CjxwYXRoIGQ9Ik0xODguNDQ0IDI4Ni4yNjZDMTg4Ljg3NiAyODYuMjM5IDE4OS4xNjUgMjg2LjcwMyAxODguOTUyIDI4Ny4wOEwxNzQuMjk3IDMxMy4wMDNDMTc0LjA5MyAzMTMuMzYzIDE3My41NzggMzEzLjM3NCAxNzMuMzU5IDMxMy4wMjNMMTU4LjI5IDI4OC45MDhDMTU4LjA3IDI4OC41NTcgMTU4LjMwNiAyODguMDk5IDE1OC43MiAyODguMDc0TDE4OC40NDQgMjg2LjI2NloiIGZpbGw9IiNGNjk2MDUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNjguOTkxIDI5Ni4xMkMxNjguNTg1IDI5Ni4xNTYgMTY4LjM1OSAyOTYuNjA4IDE2OC41NzUgMjk2Ljk1NEwxODIuNjcgMzE5LjUxQzE4Mi44ODYgMzE5Ljg1NiAxODMuMzkxIDMxOS44NTIgMTgzLjYwMiAzMTkuNTAyTDE5OC42OTMgMjk0LjM5QzE5OC45MjMgMjk0LjAwNyAxOTguNjIyIDI5My41MjYgMTk4LjE3NyAyOTMuNTY1TDE2OC45OTEgMjk2LjEyWk0yMDIuNDM4IDI5Ni42NDFMMTg3LjM0NyAzMjEuNzUzQzE4NS40NTYgMzI0Ljg5OSAxODAuOTEgMzI0LjkzOSAxNzguOTY1IDMyMS44MjZMMTY0Ljg3IDI5OS4yNjlDMTYyLjkyNSAyOTYuMTU3IDE2NC45NTMgMjkyLjA4OCAxNjguNjEgMjkxLjc2OEwxOTcuNzk2IDI4OS4yMTJDMjAxLjc5OCAyODguODYxIDIwNC41MDggMjkzLjE5OCAyMDIuNDM4IDI5Ni42NDFaIiBmaWxsPSIjMzMzNjNGIi8+Cjwvc3ZnPgoK"); height: 200px; position: absolute; width: 130px; background-repeat: no-repeat; right: 30px; bottom: 0px; transform: rotate(65deg); } } #page-track-about .track-header .graphics .c-track-icon{ z-index: 1; height: 160px; width: 160px; filter: drop-shadow( 0px 2px 16px rgba(var(--track-icon-color), 0.3) ); } #page-track-about .about-section{ background-color: var(--backgroundColorB); padding-top: 40px; } #page-track-about .about-section .inner{ padding-bottom: 64px; display: flex; align-items: flex-start; border-bottom-width: 3px; border-color: var(--borderColor7); } #page-track-about .about-section .inner .info{ flex-grow: 1; } #page-track-about .about-section .inner .info .c-textual-content { max-width: 750px; /* Avoid CLS */ min-height: 272px; } #page-track-about .about-section .inner .info .c-textual-content h2{ font-size: 28px; font-weight: 700; line-height: 140%; color: var(--textColor1); } @media (min-width: 768px){ #page-track-about .about-section .inner .info .c-textual-content h2{ font-size: 31px; } } #page-track-about .about-section .inner .info .c-textual-content .c-expander.compressed .content { overflow: hidden; height: 150px; position: relative; } #page-track-about .about-section .inner .info .c-textual-content .c-expander.compressed .content:after{ position: absolute; content: ""; width: 100%; bottom: 0; box-shadow: 0px 0px 25px 15px var(--backgroundColorA); } #page-track-about .about-section .inner .info .c-textual-content .c-expander.compressed button:after { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS13aWR0aDoxLjVweDtmaWxsLXJ1bGU6ZXZlbm9kZDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93LWRvd24tMTwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjMuMjUsNy4zMTEsMTIuNTMsMTguMDNhLjc0OS43NDksMCwwLDEtMS4wNiwwTC43NSw3LjMxMSIvPjwvc3ZnPg=="); filter: var(--c-prominent-link-icon-filter); } #page-track-about .about-section .inner .info .c-textual-content .c-expander.expanded button:after { background-image: url("data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6MS41cHg7ZmlsbC1ydWxlOmV2ZW5vZGQ7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5hcnJvdy11cC0xPC90aXRsZT48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0uNzUsMTcuMTg5LDExLjQ3LDYuNDdhLjc0OS43NDksMCwwLDEsMS4wNiwwTDIzLjI1LDE3LjE4OSIvPjwvc3ZnPg=="); filter: var(--c-prominent-link-icon-filter); } #page-track-about .about-section .inner .info .c-textual-content .c-expander button{ display: flex; align-items: center; font-size: 16px; font-weight: 600; line-height: 170%; color: var(--c-prominent-link-color); justify-content: center; border-radius: 100px; background: var(--c-prominent-link-bg); margin-top: 20px; padding-top: 8px; padding-bottom: 8px; padding-left: 24px; padding-right: 24px; } #page-track-about .about-section .inner .info .c-textual-content .c-expander button:after { content: ""; filter: var(--link-blue-filter); margin-left: 12px; height: 16px; width: 16px; } #page-track-about .about-section .inner > pre { width: 100%; overflow-x: hidden; overflow-y: auto; flex-shrink: 0; border-radius: 8px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); padding-top: 24px; padding-bottom: 24px; padding-left: 36px; padding-right: 36px; --tw-shadow: var(--box-shadow-base); --tw-shadow-colored: var(--box-shadow-base); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } @media (min-width: 768px){ #page-track-about .about-section .inner > pre{ margin-left: 72px; width: 50%; } } #page-track-about .about-section .inner > pre pre{ white-space: pre-wrap; } @media (min-width: 768px) { #page-track-about .about-section .inner > pre { max-width: 450px } } #page-track-about .exercises-section .header-icon, #page-track-about .features-section .header-icon, #page-track-about .concepts-section .header-icon { width: 80px; height: 80px; margin-bottom: 16px; } #page-track-about .exercises-section h2, #page-track-about .features-section h2, #page-track-about .concepts-section h2{ font-size: 28px; font-weight: 700; line-height: 140%; color: var(--textColor1); } @media (min-width: 768px){ #page-track-about .exercises-section h2, #page-track-about .features-section h2, #page-track-about .concepts-section h2{ font-size: 31px; } } #page-track-about .exercises-section h2, #page-track-about .features-section h2, #page-track-about .concepts-section h2{ margin-bottom: 20px; } #page-track-about .features-section .section-header, #page-track-about .concepts-section .section-header{ display: flex; flex-direction: column; align-items: center; margin-bottom: 56px; } #page-track-about .exercises-section{ background-color: var(--backgroundColorB); padding-bottom: 80px; } #page-track-about .exercises-section .inner{ display: flex; align-items: flex-start; } #page-track-about .exercises-section .inner .info { max-width: 656px; } #page-track-about .exercises-section .inner .info hr.c-divider{ margin-bottom: 28px; } #page-track-about .exercises-section .inner .info p{ line-height: 160%; } #page-track-about .exercises-section .inner .info p a:not(.btn-primary) { color: var(--c-prominent-link-color); font-weight: 500; } #page-track-about .exercises-section .inner .info p strong{ font-weight: 500; color: var(--textColor2); } #page-track-about .exercises-section .inner .info p{ font-size: 18px; line-height: 150%; margin-bottom: 32px; } #page-track-about .exercises-section .inner .info .exercises{ margin-bottom: 40px; } #page-track-about .exercises-section .inner .info .exercises .exercise{ display: flex; align-items: center; margin-bottom: 16px; padding-top: 12px; padding-bottom: 12px; padding-left: 24px; padding-right: 32px; border-radius: 8px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); --tw-shadow: var(--box-shadow-base); --tw-shadow-colored: var(--box-shadow-base); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } #page-track-about .exercises-section .inner .info .exercises .exercise .c-icon.c-exercise-icon { height: 48px; width: 48px; margin-right: 24px; } #page-track-about .exercises-section .inner .info .exercises .exercise .exercise-info{ flex-grow: 1; } #page-track-about .exercises-section .inner .info .exercises .exercise .exercise-info h3{ font-size: 18px; font-weight: 600; line-height: 150%; color: var(--textColor1); } #page-track-about .exercises-section .inner .info .exercises .exercise .exercise-info p{ line-height: 160%; } #page-track-about .exercises-section .inner .info .exercises .exercise .exercise-info p a:not(.btn-primary) { color: var(--c-prominent-link-color); font-weight: 500; } #page-track-about .exercises-section .inner .info .exercises .exercise .exercise-info p strong{ font-weight: 500; color: var(--textColor2); } #page-track-about .exercises-section .inner .info .exercises .exercise .exercise-info p{ font-size: 16px; margin: 0px; } #page-track-about .exercises-section .inner .info .exercises .exercise .c-icon.action-icon{ display: none; } .c-concepts-map .connection#page-track-about .exercises-section .inner .info .exercises .exercise .c-icon.action-icon { opacity: 0; } @media (min-width: 640px){ #page-track-about .exercises-section .inner .info .exercises .exercise .c-icon.action-icon{ display: block; } } #page-track-about .exercises-section .inner .info .exercises .exercise .c-icon.action-icon { height: 24px; width: 24px; margin-left: 56px; filter: var(--textColor5-filter); } #page-track-about .exercises-section .inner > img{ margin-left: 80px; max-width: 640px; width: 50%; -webkit-mask-image: linear-gradient( to right, rgba(0, 0, 0, 1) 10%, transparent 95% ); mask-image: linear-gradient( to right, rgba(0, 0, 0, 1) 10%, transparent 95% ); } #page-track-about .features-section { background: linear-gradient( 180deg, var(--backgroundColorB) 80%, var(--backgroundColorB) 100% ); } /* background: linear-gradient(180deg, #ffffff 80%, #fbfbff 100%); */ #page-track-about .features-section .section-header{ border-top-width: 3px; border-color: var(--borderColor7); padding-top: 48px; } #page-track-about .features-section .features{ position: relative; overflow: hidden; margin-bottom: 64px; } #page-track-about .features-section .features .c-track-icon{ position: absolute; display: none; } .c-concepts-map .connection#page-track-about .features-section .features .c-track-icon { opacity: 0; } @media (min-width: 1024px){ #page-track-about .features-section .features .c-track-icon{ display: block; } } #page-track-about .features-section .features .c-track-icon { height: 128px; width: 128px; top: 50%; left: 50%; margin-left: -64px; margin-top: -64px; filter: drop-shadow( 0px 2px 16px rgba(var(--track-icon-color), 0.3) ); } #page-track-about .features-section .features .c-icon { width: 48px; height: 48px; margin-bottom: 16px; } #page-track-about .features-section .features .feature{ display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 48px; } #page-track-about .features-section .features .feature p { max-width: 340px; } @media (min-width: 1024px){ #page-track-about .features-section .features{ margin-left: auto; margin-right: auto; max-width: 1050px; height: 654px; } #page-track-about .features-section .features .feature{ position: absolute; width: 340px; } #page-track-about .features-section .features .feature.--0 { top: 40px; left: 10%; } #page-track-about .features-section .features .feature.--1 { left: 45%; } #page-track-about .features-section .features .feature.--2 { top: 260px; left: 0px; } #page-track-about .features-section .features .feature.--3 { top: 170px; right: 0px; } #page-track-about .features-section .features .feature.--4 { top: 480px; left: 20%; } #page-track-about .features-section .features .feature.--5 { top: 420px; right: 10%; } } #page-track-about .concepts-section{ background-color: var(--backgroundColorB); padding-top: 64px; padding-bottom: 64px; } #page-track-about .concepts-section .container{ display: flex; flex-direction: column; align-items: center; } #page-track-about .concepts-section img.screenshot{ margin-bottom: 32px; max-width: 100%; -webkit-mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 1) 30%, transparent 95% ); mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 1) 30%, transparent 95% ); } #page-track-about .upsell-section { background: linear-gradient( var(--backgroundColorB), var(--backgroundColorB) ); padding-top: 64px; } #page-track-about .upsell-section .container{ display: flex; flex-direction: column; align-items: center; } #page-track-about .upsell-section .feature{ position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 128px; } #page-track-about .upsell-section .feature .info { max-width: 680px; } #page-track-about .upsell-section .feature .info .c-icon.small-icon { height: 48px; width: 48px; margin-bottom: 12px; filter: var(--textColor1-filter); } #page-track-about .upsell-section .feature .info h3{ font-size: 28px; font-weight: 700; line-height: 140%; color: var(--textColor1); } @media (min-width: 768px){ #page-track-about .upsell-section .feature .info h3{ font-size: 31px; } } #page-track-about .upsell-section .feature .info h3{ margin-bottom: 12px; } #page-track-about .upsell-section .feature .info p{ line-height: 160%; } #page-track-about .upsell-section .feature .info p a:not(.btn-primary) { color: var(--c-prominent-link-color); font-weight: 500; } #page-track-about .upsell-section .feature .info p strong{ font-weight: 500; color: var(--textColor2); } #page-track-about .upsell-section .feature .info p{ font-size: 18px; line-height: 150%; margin-bottom: 16px; } #page-track-about .upsell-section .feature .c-icon.graphic { height: 240px; width: 240px; flex-shrink: 0; } @media (min-width: 1024px) { #page-track-about .upsell-section .feature:nth-child(1):after { content: ""; background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjIgMTQxIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMCAxQzQ1LjkxNjcgMSAxNi4wODMzIDE0MCA2MiAxNDAiIHN0cm9rZT0iI0NCQzlEOSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtZGFzaGFycmF5PSI0IDYiLz4KPC9zdmc+Cg=="); position: absolute; height: 141px; width: 62px; left: 50%; bottom: -130px; } #page-track-about .upsell-section .feature:nth-child(2):after { content: ""; background-image: url("data:image/svg+xml;base64,PHN2ZyAgdmlld0JveD0iMCAwIDM4NSAxMzgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zNzguNzAyIDFDMzk1LjYxMyAxIDM5NS42MTMgMTM3IDAgMTM3IiBzdHJva2U9IiNDQkM5RDkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWRhc2hhcnJheT0iNCA2Ii8+Cjwvc3ZnPgo="); position: absolute; width: 385px; height: 138px; right: 130px; bottom: -170px; } } #page-track-about .upsell-section .cta{ display: flex; flex-direction: column; align-items: center; text-align: center; } #page-track-about .upsell-section .cta .c-track-icon { height: 80px; width: 80px; margin-bottom: 24px; } #page-track-about .upsell-section .cta h3{ font-size: 20px; font-weight: 600; line-height: 130%; color: var(--textColor1); } @media (min-width: 768px){ #page-track-about .upsell-section .cta h3{ font-size: 24px; } } #page-track-about .upsell-section .cta h3{ margin-bottom: 12px; } #page-track-about .upsell-section .cta p{ line-height: 160%; } #page-track-about .upsell-section .cta p a:not(.btn-primary) { color: var(--c-prominent-link-color); font-weight: 500; } #page-track-about .upsell-section .cta p strong{ font-weight: 500; color: var(--textColor2); } #page-track-about .upsell-section .cta p{ font-size: 18px; line-height: 150%; margin-bottom: 24px; } #page-track-about .upsell-section .cta form.button_to{ display: grid; width: 100%; place-items: center; } #page-tracks-build .theme-light, #page-tracks-build .theme-accessibility-dark { --headerBackground: linear-gradient( 180deg, rgba(251, 251, 255, 0) 79.36%, #f4f4fd 100% ), linear-gradient( 180deg, #fafaff 0%, rgba(250, 250, 255, 0.677852) 24.48%, rgba(250, 250, 255, 0) 77.6%, #fafaff 100% ), var(--hex-bg-image), #fafaff; } #page-tracks-build .theme-dark { --headerBackground: #191525; } #page-tracks-build .--syllabus:before { content: url("/assets/icons/syllabus-475d59a0f3b10b43c9dfabcbd63e4555d35d28cd.svg"); } #page-tracks-build .--lightbulb:before { content: url("/assets/icons/lightbulb-idea-db7117064ce8c0501a0b16d6281ddb86ac80f4a1.svg"); } #page-tracks-build .--practice-exercises:before { content: url("/assets/icons/practice-exercises-6f6f10f3dd3e2e62e10cb31b4752430469818aa4.svg"); } #page-tracks-build .--syllabus-gradient:before { content: url("/assets/icons/syllabus-gradient-bde52966ced8c967a2500d5e872829e33f0ac2b7.svg"); } #page-tracks-build .--test-runner-gradient:before { content: url("/assets/icons/test-runner-gradient-0fa1a4bccc0eabbcb9be02d7f1bc8b17375a4b61.svg"); } #page-tracks-build .--analyzer-gradient:before { content: url("/assets/icons/analyzer-gradient-121ca8cf8e6d0915717a55e4a182742c2a24a063.svg"); } #page-tracks-build .--representer-gradient:before { content: url("/assets/icons/representer-gradient-c96c09bdcb7d7386d7f2cdfcb85c90f89125109a.svg"); } #page-tracks-build .--practice-exercises-gradient:before { content: url("/assets/icons/practice-exercises-gradient-a5ad8aee1311a12f3eb26ab43f055e8fcaf4129b.svg"); } /* --------------------------------------------------------------------- */ #page-tracks-build .track-build-header { z-index: 0; width: 100%; height: 501px; left: 0px; top: 200px; position: absolute; background: var(--headerBackground); background-size: cover; } #page-tracks-build .contributor-credit-block{ margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; border-radius: 8px; border-width: 1px; padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; border-color: var(--borderColorContributorCreditBlock); } #page-tracks-build .contributor-credit-block .contributor{ font-size: 16px; font-weight: 600; line-height: 150%; color: var(--textColor1); display: flex; align-items: center; } #page-tracks-build .contributor-credit-block .contributor img { width: 32px; height: 32px; margin-right: 12px; border-radius: 100%; } #page-tracks-build .report-stat{ display: flex; flex-direction: column; border-radius: 8px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); padding-top: 16px; padding-bottom: 16px; padding-left: 24px; padding-right: 24px; --tw-shadow: var(--box-shadow-sm); --tw-shadow-colored: var(--box-shadow-sm); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } #page-tracks-build .report-stat .stat-name{ display: flex; align-items: center; font-size: 18px; font-weight: 600; line-height: 150%; color: var(--textColor2); } #page-tracks-build .report-stat .stat-name img { filter: var(--textColor6-filter); margin-left: 12px; width: 15px; height: 15px; } #page-tracks-build .report-stat .current-number{ font-size: 32px; font-weight: 600; line-height: 150%; --tw-text-opacity: 1; color: rgb(96 79 205 / var(--tw-text-opacity, 1)); } #page-tracks-build .report-stat .growth{ font-size: 16px; font-weight: 600; line-height: 150%; --tw-text-opacity: 1; color: rgb(0 181 0 / var(--tw-text-opacity, 1)); } /* TOOLING STATUS INDICATORS */ #page-tracks-build .tooling-status-label{ font-weight: 600; line-height: 150%; color: var(--textColor2); margin-bottom: 8px; font-size: 16px; } #page-tracks-build .tooling-status-group{ display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; } @media (min-width: 640px){ #page-tracks-build .tooling-status-group{ flex-wrap: nowrap; gap: unset; } } #page-tracks-build .tooling-status-group{ justify-content: center; } @media (min-width: 640px){ #page-tracks-build .tooling-status-group{ justify-content: flex-start; } } #page-tracks-build .track-status{ margin-bottom: 32px; border-radius: 16px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); padding-left: 32px; padding-right: 32px; padding-top: 24px; padding-bottom: 24px; color: var(--textColor1); --tw-shadow: var(--box-shadow-lgZ1); --tw-shadow-colored: var(--box-shadow-lgZ1); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } #page-tracks-build [tooling-status="exemplar"]{ margin-right: 0px; display: flex; align-items: center; border-radius: 100%; border-width: 2px; --tw-border-opacity: 1; border-color: rgb(0 0 0 / var(--tw-border-opacity, 1)); } @media (min-width: 640px){ #page-tracks-build [tooling-status="exemplar"]{ margin-right: 16px; } } #page-tracks-build [tooling-status="exemplar"]{ --tw-bg-opacity: 1; background-color: rgb(250 250 255 / var(--tw-bg-opacity, 1)); height: 48px; width: 48px; } #page-tracks-build [tooling-status="exemplar"] img { height: 20px; width: 20px; margin-left: auto; margin-right: auto; } #page-tracks-build [tooling-status="exemplar"]{ position: relative; --tw-border-opacity: 1; border-color: rgb(0 181 0 / var(--tw-border-opacity, 1)); background: var(--backgroundColorBuildToolingStatus); } #page-tracks-build [tooling-status="exemplar"] img { filter: invert(57%) sepia(64%) saturate(5598%) hue-rotate(92deg) brightness(99%) contrast(111%); } #page-tracks-build [tooling-status="exemplar"]:after { content: url("/assets/icons/healthy-green-check-1484455ee116cc7b5105ab8869b3570cfb511c5a.svg"); position: absolute; right: 0px; --tw-translate-x: 25%; top: 0px; --tw-translate-y: -25%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); width: 24px; height: 24px; } #page-tracks-build [tooling-status="healthy"]{ margin-right: 0px; display: flex; align-items: center; border-radius: 100%; border-width: 2px; --tw-border-opacity: 1; border-color: rgb(0 0 0 / var(--tw-border-opacity, 1)); } @media (min-width: 640px){ #page-tracks-build [tooling-status="healthy"]{ margin-right: 16px; } } #page-tracks-build [tooling-status="healthy"]{ --tw-bg-opacity: 1; background-color: rgb(250 250 255 / var(--tw-bg-opacity, 1)); height: 48px; width: 48px; } #page-tracks-build [tooling-status="healthy"] img { height: 20px; width: 20px; margin-left: auto; margin-right: auto; } #page-tracks-build [tooling-status="healthy"]{ --tw-border-opacity: 1; border-color: rgb(0 181 0 / var(--tw-border-opacity, 1)); background: var(--backgroundColorBuildToolingStatus); } #page-tracks-build [tooling-status="healthy"] img { filter: invert(57%) sepia(64%) saturate(5598%) hue-rotate(92deg) brightness(99%) contrast(111%); } #page-tracks-build [tooling-status="needs_attention"]{ margin-right: 0px; display: flex; align-items: center; border-radius: 100%; border-width: 2px; --tw-border-opacity: 1; border-color: rgb(0 0 0 / var(--tw-border-opacity, 1)); } @media (min-width: 640px){ #page-tracks-build [tooling-status="needs_attention"]{ margin-right: 16px; } } #page-tracks-build [tooling-status="needs_attention"]{ --tw-bg-opacity: 1; background-color: rgb(250 250 255 / var(--tw-bg-opacity, 1)); height: 48px; width: 48px; } #page-tracks-build [tooling-status="needs_attention"] img { height: 20px; width: 20px; margin-left: auto; margin-right: auto; } #page-tracks-build [tooling-status="needs_attention"]{ --tw-border-opacity: 1; border-color: rgb(228 137 0 / var(--tw-border-opacity, 1)); background: var(--backgroundColorBuildToolingStatus); } #page-tracks-build [tooling-status="needs_attention"] img { filter: invert(67%) sepia(54%) saturate(5119%) hue-rotate(8deg) brightness(98%) contrast(101%); } #page-tracks-build [tooling-status="missing"]{ margin-right: 0px; display: flex; align-items: center; border-radius: 100%; border-width: 2px; --tw-border-opacity: 1; border-color: rgb(0 0 0 / var(--tw-border-opacity, 1)); } @media (min-width: 640px){ #page-tracks-build [tooling-status="missing"]{ margin-right: 16px; } } #page-tracks-build [tooling-status="missing"]{ --tw-bg-opacity: 1; background-color: rgb(250 250 255 / var(--tw-bg-opacity, 1)); height: 48px; width: 48px; } #page-tracks-build [tooling-status="missing"] img { height: 20px; width: 20px; margin-left: auto; margin-right: auto; } #page-tracks-build [tooling-status="missing"]{ border-color: var(--borderColor5); background: var(--backgroundColorBuildToolingStatus); } #page-tracks-build [tooling-status="missing"] img { filter: var(--textColor6-filter); } /* TOOLING STATUS DETAILS */ #page-tracks-build .track-team-group{ --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); margin-bottom: 24px; display: flex; flex-direction: column; border-radius: 8px; padding-left: 24px; padding-right: 24px; padding-top: 16px; padding-bottom: 16px; --tw-shadow: var(--box-shadow-base); --tw-shadow-colored: var(--box-shadow-base); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } #page-tracks-build .track-team-group details .record-row{ margin-bottom: 16px; } #page-tracks-build .track-team-group details .record-row:first-of-type{ margin-top: 20px; } #page-tracks-build .track-team-group details .record-row:last-of-type{ margin-bottom: 6px; } #page-tracks-build .track-team-group details .record-row:has(.external-link){ flex-direction: column; align-items: flex-start; } @media (min-width: 768px){ #page-tracks-build .track-team-group details .record-row:has(.external-link){ flex-direction: row; align-items: center; } } #page-tracks-build .track-team-group details{ -webkit-user-select: none; -moz-user-select: none; user-select: none; display: flex; flex-direction: column; padding-top: 12px; padding-bottom: 12px; padding-left: 24px; padding-right: 24px; border-radius: 8px; border-width: 1px; border-color: var(--borderColor5); } #page-tracks-build .track-team-group details + .c-react-component{ margin-top: 16px; } #page-tracks-build .track-team-group details summary{ display: flex; align-items: center; -moz-column-gap: 4px; column-gap: 4px; } @media (min-width: 480px){ #page-tracks-build .track-team-group details summary{ -moz-column-gap: 0px; column-gap: 0px; } } #page-tracks-build .track-team-group details summary{ font-size: 18px; font-weight: 600; color: var(--textColor2); line-height: 150%; cursor: pointer; display: flex; align-items: center; } #page-tracks-build .track-team-group details summary:before { height: 24px; width: 24px; margin-right: 16px; display: none; } .c-concepts-map .connection#page-tracks-build .track-team-group details summary:before { opacity: 0; } @media (min-width: 480px){ #page-tracks-build .track-team-group details summary:before{ display: block; } } #page-tracks-build .track-team-group details summary:before { filter: var(--textColor1-filter); } #page-tracks-build .track-team-group details summary .summary-chevron{ transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; filter: var(--textColor6-filter); height: 16px; width: 16px; margin-left: auto; display: flex; } #page-tracks-build .track-team-group details[open] summary .summary-chevron{ --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } #page-tracks-build .track-header h3{ font-size: 20px; font-weight: 600; line-height: 130%; color: var(--textColor1); } @media (min-width: 768px){ #page-tracks-build .track-header h3{ font-size: 24px; } } #page-tracks-build .track-header h3{ display: flex; flex-direction: row-reverse; font-weight: 700; } @media (min-width: 768px){ #page-tracks-build .track-header h3{ flex-direction: row; } } #page-tracks-build .track-header h3{ align-items: center; text-align: left; } @media (min-width: 768px){ #page-tracks-build .track-header h3{ text-align: center; } } #page-tracks-build .track-header h3{ justify-content: space-between; } @media (min-width: 768px){ #page-tracks-build .track-header h3{ justify-content: flex-start; } } #page-tracks-build .track-header h3:before{ margin-right: 0px; display: block; } @media (min-width: 768px){ #page-tracks-build .track-header h3:before{ margin-right: 16px; } } #page-tracks-build .track-header h3:before { height: 32px; width: 32px; } #page-tracks-build .track-header p{ font-size: 16px; line-height: 150%; color: var(--textColor5); } #page-tracks-build .learn-more-new-tab{ display: flex; align-items: center; white-space: nowrap; font-size: 16px; font-weight: 600; line-height: 150%; color: var(--textColor6); } #page-tracks-build .learn-more-new-tab img { filter: var(--textColor6-filter); margin-left: 12px; } #page-tracks-build .action-required{ padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; font-weight: 600; line-height: 150%; color: var(--textColor2); font-size: 16px; border-style: solid; border-color: transparent; background-image: linear-gradient( var(--backgroundColorBorderGradientLightPurple), var(--backgroundColorBorderGradientLightPurple) ), linear-gradient(#2200ff, #9e00ff); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 16px; border-width: 1px; } #page-tracks-build .action-required a{ text-decoration-line: underline; } #page-tracks-build .usage-stats-header h4{ font-size: 18px; font-weight: 600; line-height: 150%; color: var(--textColor1); margin-bottom: 8px; padding-bottom: 8px; display: flex; align-items: center; } #page-tracks-build .usage-stats-header h4:before { height: 24px; width: 24px; margin-right: 16px; display: none; } .c-concepts-map .connection#page-tracks-build .usage-stats-header h4:before { opacity: 0; } @media (min-width: 480px){ #page-tracks-build .usage-stats-header h4:before{ display: block; } } #page-tracks-build .usage-stats-header h4:before { filter: var(--textColor1-filter); } #page-tracks-build .usage-stats-header h4{ border-bottom-width: 1px; border-color: var(--borderColor7); } #page-tracks-build .usage-stats-header h4:before { content: url("/assets/icons/graph-stats-59145bb4407f4cdea5d91b4ee550e452d12d1c41.svg"); } #page-tracks-build .sticky .record-name{ margin-bottom: 0px; } #page-tracks-build .sticky .record-element{ align-items: center; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); } #page-tracks-build .record-value strong{ margin-top: 0px; } @media (min-width: 1280px){ #page-tracks-build .record-value strong{ margin-top: 0px; } } @media (min-width: 480px){ #page-tracks-build .record-value strong{ margin-top: 8px; } } #page-tracks-build .record-row.sticky{ display: none; } .c-concepts-map .connection#page-tracks-build .record-row.sticky { opacity: 0; } @media (min-width: 768px){ #page-tracks-build .record-row.sticky{ display: flex; } } #page-tracks-build .record-row.sticky{ flex-direction: column; align-items: flex-start; } @media (min-width: 1024px){ #page-tracks-build .record-row.sticky{ flex-direction: row; align-items: center; } } #page-tracks-build .record-row{ display: flex; justify-content: space-between; } @media (min-width: 768px){ #page-tracks-build .record-row{ align-items: center; } } #page-tracks-build .record-row{ flex-direction: column; } @media (min-width: 768px){ #page-tracks-build .record-row{ flex-direction: row; } } #page-tracks-build .record-row{ margin-bottom: 8px; } #page-tracks-build .record-row:first-of-type{ margin-top: 4px; } #page-tracks-build .record-row:last-of-type{ margin-bottom: 4px; } #page-tracks-build .record-row:has([data-record-label]){ flex-direction: column; } @media (min-width: 768px){ #page-tracks-build .record-row:has([data-record-label]){ align-items: flex-start; } } @media (min-width: 1024px){ #page-tracks-build .record-row:has([data-record-label]){ flex-direction: row; align-items: center; } } #page-tracks-build .record-row:has([data-record-label]):nth-child(3){ margin-top: 16px; } @media (min-width: 768px){ #page-tracks-build .record-row:has([data-record-label]):nth-child(3){ margin-top: 0px; } } #page-tracks-build .record-row .record-name{ margin-bottom: 8px; } @media (min-width: 768px){ #page-tracks-build .record-row .record-name{ margin-bottom: 0px; } } #page-tracks-build .record-row .record-name{ font-weight: 600; line-height: 150%; color: var(--textColor2); font-size: 16px; display: flex; align-items: center; } #page-tracks-build .record-row .record-name .c-concept-icon, #page-tracks-build .record-row .record-name img{ margin-right: 12px; } #page-tracks-build .record-row .record-name img { width: 32px; height: 32px; } #page-tracks-build .record-row .record-value{ font-size: 14px; line-height: 150%; color: var(--textColor6); display: flex; flex-direction: column; font-weight: 600; } @media (min-width: 768px){ #page-tracks-build .record-row .record-value{ flex-direction: row; } } #page-tracks-build .record-row .record-value .record-element{ display: flex; flex-direction: column; } @media (min-width: 768px){ #page-tracks-build .record-row .record-value .record-element{ display: grid; } } @media (min-width: 480px){ #page-tracks-build .record-row .record-value .record-element{ flex-direction: row; } } #page-tracks-build .record-row .record-value .record-element{ justify-content: space-between; } @media (min-width: 768px){ #page-tracks-build .record-row .record-value .record-element{ width: 128px; justify-content: flex-start; gap: 2px; } } #page-tracks-build .record-row .record-value .record-element{ align-items: baseline; font-size: 14px; font-weight: 400; } @media (min-width: 768px){ #page-tracks-build .record-row .record-value .record-element{ align-items: center; } } #page-tracks-build .record-row .record-value .record-element[data-record-label]:before{ display: block; } @media (min-width: 768px){ #page-tracks-build .record-row .record-value .record-element[data-record-label]:before{ display: none; } } #page-tracks-build .record-row .record-value .record-element[data-record-label]:before{ margin-right: 8px; content: attr(data-record-label) ":"; } #page-tracks-build .record-row .record-value .record-element[data-record-label="Started"]{ flex-direction: row; justify-content: flex-start; } @media (min-width: 480px){ #page-tracks-build .record-row .record-value .record-element[data-record-label="Started"]{ justify-content: space-between; } } #page-tracks-build .record-row .record-value .record-element strong{ font-weight: 600; } #page-tracks-build .record-row .record-value .record-element .external-link{ display: flex; align-items: center; gap: 12px; font-weight: 600; } #page-tracks-build .record-row .record-value .record-element .external-link img { filter: var(--textColor6-filter); width: 12px; } #page-tracks-build .record-row .record-value .record-element.justify-end { justify-content: flex-end; } #page-tracks-build .highlight-text{ position: relative; z-index: 1; display: inline; color: var(--textColor1-no-dark); background-color: transparent; } #page-tracks-build .highlight-text:before { content: ""; position: absolute; z-index: -1; width: 100%; height: 1.2em; background-image: url("/assets/graphics/impact-highlight-d40d6d0a2b56ab059d525422ad6460a2d46aa9c7.svg"); } #page-concepts-index article.content, #page-exercises-index article.content{ padding-top: 40px; } #page-concepts-index section.external-cta, #page-exercises-index section.external-cta{ margin-bottom: 56px; border-radius: 12px; padding-top: 24px; padding-bottom: 24px; padding-left: 80px; padding-right: 80px; border-width: 2px; --tw-border-opacity: 1; border-color: rgb(96 79 205 / var(--tw-border-opacity, 1)); display: flex; align-items: center; background: var(--backgroundColorExternalCTA); } #page-concepts-index section.external-cta .c-track-icon, #page-exercises-index section.external-cta .c-track-icon { height: 64px; width: 64px; margin-right: 64px; } #page-concepts-index section.external-cta .info, #page-exercises-index section.external-cta .info{ margin-right: 24px; flex-grow: 1; } #page-concepts-index section.external-cta .info h2, #page-exercises-index section.external-cta .info h2{ font-size: 20px; font-weight: 600; line-height: 140%; color: var(--textColor1); margin-bottom: 6px; } #page-concepts-index section.external-cta .info p, #page-exercises-index section.external-cta .info p{ font-size: 16px; line-height: 150%; max-width: 440px; } #page-concepts-index header.page-header, #page-exercises-index header.page-header{ margin-bottom: 40px; } #page-concepts-index header.page-header .container, #page-exercises-index header.page-header .container{ display: flex; align-items: center; justify-content: center; } #page-concepts-index header.page-header .graphic, #page-exercises-index header.page-header .graphic { height: 128px; width: 128px; margin-right: 36px; } #page-concepts-index header.page-header .info h1, #page-exercises-index header.page-header .info h1{ font-size: 28px; font-weight: 700; line-height: 140%; color: var(--textColor1); } @media (min-width: 768px){ #page-concepts-index header.page-header .info h1, #page-exercises-index header.page-header .info h1{ font-size: 31px; } } #page-concepts-index header.page-header .info h1, #page-exercises-index header.page-header .info h1{ margin-bottom: 8px; } #page-concepts-index header.page-header .info p, #page-exercises-index header.page-header .info p{ line-height: 160%; } #page-concepts-index header.page-header .info p a:not(.btn-primary), #page-exercises-index header.page-header .info p a:not(.btn-primary) { color: var(--c-prominent-link-color); font-weight: 500; } #page-concepts-index header.page-header .info p strong, #page-exercises-index header.page-header .info p strong{ font-weight: 500; color: var(--textColor2); } #page-concepts-index header.page-header .info p, #page-exercises-index header.page-header .info p{ font-size: 18px; line-height: 150%; } /* Concepts */ #page-concepts-index { } #page-concept-show .concept-header > .container{ display: flex; align-items: center; padding-top: 24px; padding-bottom: 24px; } #page-concept-show .concept-header{ background: linear-gradient( 180deg, var(--backgroundColorI) 0%, transparent 100% ); } #page-concept-show .concept-header .c-concept-icon{ margin-right: 32px; } #page-concept-show .concept-header .info{ flex-grow: 1; } #page-concept-show .concept-header h1{ font-size: 32px; font-weight: 700; color: var(--textColor1); line-height: 1.25; } @media (min-width: 768px){ #page-concept-show .concept-header h1{ font-size: 34px; } } @media (min-width: 1024px){ #page-concept-show .concept-header h1{ font-size: 39px; } } #page-concept-show .concept-header h1{ margin-bottom: 8px; display: flex; align-items: center; } .c-track-header #page-concept-show .concept-header h1{ font-size: 28px; } @media (min-width: 768px){ .c-track-header #page-concept-show .concept-header h1{ font-size: 39px; } } #page-concept-show .concept-header h1 small{ margin-left: 16px; margin-right: 12px; font-size: 18px; font-weight: 400; color: var(--textColor5); } #page-concept-show .concept-header h1 .c-track-icon { /* TODO: Switch these */ /*@mixin track-icon 48px;*/ width: 48px; height: 48px; } #page-concept-show .concept-header .exercises{ display: flex; align-items: center; font-size: 18px; color: var(--textColor1); } #page-concept-show .concept-header .exercises .c-icon{ margin-right: 8px; height: 24px; width: 24px; filter: var(--textColor1-filter); } #page-concept-show .concept-header .progress{ flex-shrink: 0; } #page-concept-show .concept-header .progress .progress-text{ display: flex; align-items: center; justify-content: flex-end; } #page-tracks-build .record-row .record-value .record-element#page-concept-show .concept-header .progress .progress-text { justify-content: flex-end; } #page-concept-show .concept-header .progress .progress-text{ font-size: 16px; font-weight: 600; line-height: 150%; color: var(--textColor2); margin-bottom: 12px; } #page-concept-show .concept-header .progress .progress-text.completed{ font-weight: 600; color: var(--textColorProgressTextCompleted); } #page-concept-show .concept-header .progress .progress-text.completed .c-icon{ display: block; } #page-concept-show .concept-header .progress .progress-exercises{ display: flex; align-items: center; justify-content: flex-end; } #page-tracks-build .record-row .record-value .record-element#page-concept-show .concept-header .progress .progress-exercises { justify-content: flex-end; } #page-concept-show .concept-header .progress .progress-exercises .c-ed{ margin-left: 16px; } #page-concept-show section.mastered-heading{ margin-bottom: 32px; display: flex; align-items: center; border-radius: 8px; padding-top: 12px; padding-bottom: 12px; padding-left: 32px; padding-right: 32px; --tw-shadow: var(--box-shadow-lg); --tw-shadow-colored: var(--box-shadow-lg); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); border-width: 2px; --tw-border-opacity: 1; border-color: rgb(67 181 147 / var(--tw-border-opacity, 1)); background: var(--backgroundColorCompletedHeading); } #page-concept-show section.mastered-heading .c-prominent-link { color: var(--backgroundColorNotificationsUnreadDot); } #page-concept-show section.mastered-heading .c-prominent-link .c-icon { filter: var(--iconFilterNotificationsProminentLink); } #page-concept-show section.mastered-heading .check-mark-icon { height: 32px; width: 32px; margin-right: 16px; } #page-concept-show section.mastered-heading .text{ font-size: 18px; font-weight: 600; line-height: 150%; color: var(--textColor1); flex-grow: 1; } #page-concept-show .rhs{ flex-shrink: 0; } @media (min-width: 1280px) { #page-concept-show .rhs { width: 520px } } #page-concept-show section.about{ margin-bottom: 32px; border-radius: 8px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); --tw-shadow: var(--box-shadow-lg); --tw-shadow-colored: var(--box-shadow-lg); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } #page-concept-show section.about .links{ margin-top: 32px; } #page-concept-show section.about .links h3{ font-size: 20px; font-weight: 600; line-height: 130%; color: var(--textColor1); } @media (min-width: 768px){ #page-concept-show section.about .links h3{ font-size: 24px; } } #page-concept-show section.about .links h3{ margin-bottom: 16px; } #page-concept-show section.about .links ul{ display: flex; flex-wrap: wrap; gap: 12px; } #page-concept-show section.about .links a{ display: flex; align-items: center; border-radius: 100px; padding-top: 6px; padding-bottom: 6px; padding-left: 16px; padding-right: 16px; --tw-shadow: var(--box-shadow-base); --tw-shadow-colored: var(--box-shadow-base); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } #page-concept-show section.about .links a .c-bg-img{ margin-right: 12px; height: 16px; width: 16px; } #page-concept-show section.about .links a .c-icon { height: 12px; width: 12px; margin-left: 8px; filter: var(--textColor6-filter); } #page-concept-show section.extra-info{ display: flex; align-items: center; } #page-concept-show section.extra-info a{ font-size: 15px; font-weight: 500; color: var(--textColor6); display: flex; align-items: center; margin-left: auto; } #page-concept-show section.extra-info a .c-icon { filter: var(--textColor6-filter); } #page-concept-show section.extra-info a .github-icon { height: 22px; width: 22px; margin-right: 16px; } #page-concept-show section.extra-info a .action-icon { height: 12px; width: 12px; margin-left: 12px; } #page-concept-show .learn h3, #page-concept-show .practice h3{ font-size: 20px; font-weight: 600; line-height: 140%; color: var(--textColor1); margin-bottom: 16px; display: flex; align-items: center; } #page-concept-show .learn h3 .c-icon, #page-concept-show .practice h3 .c-icon{ margin-right: 16px; height: 24px; width: 24px; filter: var(--textColor1-filter); } #page-concept-show .learn .exercises, #page-concept-show .practice .exercises{ display: flex; flex-direction: column; } #page-concept-show .learn .exercises .c-react-wrapper-common-exercise-widget, #page-concept-show .practice .exercises .c-react-wrapper-common-exercise-widget{ margin-bottom: 12px; width: 100%; } #page-concept-show .learn + .practice{ margin-top: 16px; } #page-concept-show .practice-locked-bar{ margin-top: 36px; margin-bottom: 48px; border-top-width: 1px; border-color: var(--borderColor6); position: relative; } #page-concept-show .practice-locked-bar .c-icon{ position: absolute; height: 42px; width: 42px; top: -21px; left: 50%; margin-left: -21px; } .c-concept-tooltip{ border-radius: 8px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); padding-top: 20px; padding-bottom: 20px; padding-left: 24px; padding-right: 24px; --tw-shadow: var(--box-shadow-lg); --tw-shadow-colored: var(--box-shadow-lg); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); position: relative; z-index: 80; width: 460px; } /* TODO: add fade in transition for opacity */ .c-concept-tooltip .header{ margin-bottom: 12px; display: flex; align-items: center; } .c-concept-tooltip .header .c-concept-icon{ margin-right: 16px; } .c-concept-tooltip .header .summary{ flex-grow: 1; } .c-concept-tooltip .header .summary .title{ display: flex; align-items: center; } .c-concept-tooltip .header .summary .title .name{ font-size: 18px; font-weight: 600; line-height: 150%; color: var(--textColor1); margin-right: 8px; } .c-concept-tooltip .header .summary .title .in{ margin-right: 8px; color: var(--textColor2); } .c-concept-tooltip .header .summary .title .c-track-icon { height: 32px; width: 32px; } .c-concept-tooltip .header .summary .num-exercises{ font-size: 15px; font-weight: 500; line-height: 160%; color: var(--textColor6); } .c-concept-tooltip .header .c-exercise-status-tag{ margin-left: 32px; } .c-concept-tooltip .blurb{ font-size: 15px; line-height: 160%; color: var(--textColor6); } .c-concept-tooltip .info{ display: flex; align-items: center; line-height: 150%; margin-top: 16px; } .c-concept-tooltip .info > .icon, .c-concept-tooltip .info > .c-icon { height: 24px; width: 24px; margin-right: 12px; } .c-concept-tooltip .info .icon{ display: grid; place-items: center; border-radius: 100px; } .c-concept-tooltip .info .icon .c-icon { width: 12px; height: 12px; filter: var(--textColor6-filter); } .c-concept-tooltip .locked{ font-weight: 600; color: var(--textColor6); } .c-concept-tooltip .locked .icon{ background-color: var(--lockedColor); } .c-concept-tooltip .locked .icon .c-icon { filter: var(--textColor6-filter); } .c-concept-tooltip .available{ font-weight: 600; color: var(--textColor1); } .c-concept-tooltip .available .icon{ --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .c-concept-tooltip .learnt{ font-weight: 600; color: var(--textColor1); } .c-concept-tooltip .learnt .icon{ --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } .c-concept-tooltip .learnt .icon .c-icon { filter: var(--white-filter); } .c-concept-tooltip .mastered{ font-weight: 600; color: var(--textColor1); } .c-unlocked-concept{ display: flex; align-items: center; margin-right: 12px; margin-bottom: 12px; padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; border-radius: 5px; --tw-shadow: var(--box-shadow-base); --tw-shadow-colored: var(--box-shadow-base); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); transition: box-shadow 0.2s ease-out; } .c-unlocked-concept .c-concept-icon{ margin-right: 12px; } .c-unlocked-concept .name{ font-size: 16px; font-weight: 500; line-height: 150%; color: var(--textColor2); } a.c-unlocked-concept:hover:not(.--locked){ --tw-shadow: 0px 4px 24px 0px rgba(var(--shadowColorMain), 0.3); --tw-shadow-colored: 0px 4px 24px 0px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .c-concept{ display: flex; flex-direction: column; border-radius: 8px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); --tw-shadow: var(--box-shadow-base); --tw-shadow-colored: var(--box-shadow-base); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); font-size: 14px; font-weight: 600; } .c-concept .info{ display: flex; align-items: center; padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; } .c-concept .c-concept-icon{ margin-right: 8px; } .c-concept .c-concept-progress-bar { height: 6px; } .c-concept-icon { width: 24px; height: 24px; display: flex; align-items: flex-end; border-width: 1px; border-color: var(--borderColor1); color: var(--textColor2); vertical-align: bottom; line-height: 0.9; } .c-concept-icon.c--small { width: 24px; height: 24px; padding: 3px; font-size: 11px; font-weight: 600; } .c-concept-icon.c--medium { width: 32px; height: 32px; padding: 4px; font-size: 14px; font-weight: 600; } .c-concept-icon.c--base { width: 40px; height: 40px; padding: 5px; border-width: 2px; border-color: var(--textColor2); font-size: 16px; font-weight: 600; } .c-concept-icon.c--large { width: 48px; height: 48px; padding: 6px; border-width: 2px; border-color: var(--textColor2); font-size: 16px; font-weight: 600; } .c-concept-icon.c--huge { width: 96px; height: 96px; font-size: 42px; border-width: 4px; border-color: var(--textColor2); display: flex; padding: 8px; font-weight: 700; } progress.c-concept-progress-bar{ width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; overflow: hidden; border-radius: 8px; height: 6px; } progress.c-concept-progress-bar::-webkit-progress-bar{ --tw-bg-opacity: 1; background-color: rgb(225 235 255 / var(--tw-bg-opacity, 1)); } progress.c-concept-progress-bar[value]::-webkit-progress-value{ --tw-bg-opacity: 1; background-color: rgb(46 87 232 / var(--tw-bg-opacity, 1)); } progress.c-concept-progress-bar.--completed[value]::-webkit-progress-value{ --tw-bg-opacity: 1; background-color: rgb(89 210 174 / var(--tw-bg-opacity, 1)); } /* Exercise */ body.namespace-tracks .auth-buttons a:nth-child(2), body.namespace-.controller-tracks .auth-buttons a:nth-child(2){ display: none; } .c-concepts-map body.connection.namespace-tracks .auth-buttons a:nth-child(2),.c-concepts-map body.connection.namespace-.controller-tracks .auth-buttons a:nth-child(2) { opacity: 0; } @media (min-width: 640px){ body.namespace-tracks .auth-buttons a:nth-child(2), body.namespace-.controller-tracks .auth-buttons a:nth-child(2){ display: flex; } } body.namespace-tracks.controller-exercises.action-show .explore-concept-button { display: none; } #page-exercise-show section.completed-info{ margin-bottom: 20px; border-radius: 8px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); padding-top: 24px; padding-bottom: 24px; padding-left: 32px; padding-right: 32px; --tw-shadow: var(--box-shadow-lg); --tw-shadow-colored: var(--box-shadow-lg); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } #page-exercise-show section.completed-info h3{ font-size: 20px; font-weight: 600; line-height: 140%; } #page-exercise-show section.completed-info .progressed-concepts{ margin-bottom: 16px; } #page-exercise-show section.completed-info .progressed-concepts .c-react-wrapper-student-exercise-status-dot{ margin-left: 8px; } #page-exercise-show section.completed-info .c-prominent-link{ margin-bottom: 24px; } #page-exercise-show .tutorial-introduction{ border-radius: 8px; background-color: var(--backgroundColorB); --tw-shadow: var(--box-shadow-lg); --tw-shadow-colored: var(--box-shadow-lg); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); margin-bottom: 24px; padding-top: 16px; padding-bottom: 16px; padding-left: 32px; padding-right: 32px; line-height: 160%; } #page-exercise-show .tutorial-introduction a:not(.btn-primary) { color: var(--c-prominent-link-color); font-weight: 500; } #page-exercise-show .tutorial-introduction strong{ font-weight: 500; color: var(--textColor2); } #page-exercise-show .tutorial-introduction{ font-size: 18px; line-height: 150%; } #page-exercise-show .tutorial-introduction strong{ font-weight: 500; color: var(--textColor2); } #page-exercise-show section.taught-concepts{ margin-bottom: 20px; border-radius: 8px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); padding-top: 16px; padding-bottom: 16px; padding-left: 32px; padding-right: 32px; --tw-shadow: var(--box-shadow-lg); --tw-shadow-colored: var(--box-shadow-lg); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } #page-exercise-show section.taught-concepts h3{ font-size: 20px; font-weight: 600; line-height: 140%; } #page-exercise-show section.taught-concepts .concepts{ display: flex; flex-wrap: wrap; } #page-exercise-show section.taught-concepts .concepts .concept{ display: flex; align-items: center; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(240 243 249 / var(--tw-border-opacity, 1)); margin-right: 8px; border-radius: 8px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; --tw-shadow: var(--box-shadow-base); --tw-shadow-colored: var(--box-shadow-base); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); font-size: 14px; font-weight: 600; } #page-exercise-show section.taught-concepts .concepts .concept .c-concept-icon{ margin-right: 8px; } #page-exercise-show section.taught-concepts .c-prominent-link{ margin-bottom: 24px; } #page-exercise-show section.taught-concepts .explanation{ border-radius: 8px; --tw-bg-opacity: 1; background-color: rgb(240 243 249 / var(--tw-bg-opacity, 1)); padding-top: 12px; padding-bottom: 12px; padding-left: 24px; padding-right: 24px; font-size: 16px; font-weight: 500; line-height: 150%; } #page-exercise-show section.taught-concepts .explanation a{ color: var(--c-prominent-link-color); } #page-exercise-show section.latest-iteration{ margin-bottom: 32px; border-radius: 8px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); --tw-shadow: var(--box-shadow-lg); --tw-shadow-colored: var(--box-shadow-lg); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); padding-top: 24px; padding-bottom: 24px; padding-left: 32px; padding-right: 32px; } #page-exercise-show section.latest-iteration header{ margin-bottom: 20px; display: flex; } #page-exercise-show section.latest-iteration header .info{ flex-grow: 1; } #page-exercise-show section.latest-iteration header .info h2{ font-size: 20px; font-weight: 600; line-height: 130%; color: var(--textColor1); } @media (min-width: 768px){ #page-exercise-show section.latest-iteration header .info h2{ font-size: 24px; } } #page-exercise-show section.latest-iteration header .info h2{ margin-bottom: 6px; } #page-exercise-show section.latest-iteration header .info p{ font-size: 16px; line-height: 160%; } #page-exercise-show section.latest-iteration header .info p .essential{ font-weight: 600; --tw-text-opacity: 1; color: rgb(235 87 87 / var(--tw-text-opacity, 1)); } #page-exercise-show section.latest-iteration header .info p .actionable{ font-weight: 600; color: var(--textColor3); } #page-exercise-show section.latest-iteration header .info p .non-actionable{ font-weight: 600; color: var(--textColor6); } #page-exercise-show section.latest-iteration header .info p strong{ font-weight: 600; } #page-exercise-show section.latest-iteration header .info p a{ display: inline-flex; align-items: center; font-weight: 500; color: var(--c-prominent-link-color); } #page-exercise-show section.latest-iteration header .info p a .c-icon { filter: var(--c-prominent-link-icon-filter); height: 12px; width: 12px; margin-left: 8px; filter: var(--textColor6-filter); } #page-exercise-show section.latest-iteration header > .c-icon.spinner { margin-left: 24px; height: 24px; width: 24px; filter: var(--textColor6-filter); animation: spin 3s linear infinite; } #page-exercise-show section.latest-iteration header .status{ margin-top: 16px; margin-right: 16px; border-radius: 100%; flex-shrink: 0; height: 8px; width: 8px; overflow: hidden; } #page-exercise-show section.latest-iteration header .status.passed{ --tw-bg-opacity: 1; background-color: rgb(67 181 147 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(67 181 147 / var(--tw-text-opacity, 1)); } #page-exercise-show section.latest-iteration header .status.failed{ --tw-bg-opacity: 1; background-color: rgb(235 87 87 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(235 87 87 / var(--tw-text-opacity, 1)); } #page-exercise-show section.latest-iteration a.iteration{ border-radius: 8px; border-width: 1px; border-color: var(--borderColor5); --tw-shadow: var(--box-shadow-sm); --tw-shadow-colored: var(--box-shadow-sm); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); margin-bottom: 16px; padding-top: 8px; padding-bottom: 8px; padding-left: 24px; padding-right: 24px; display: flex; align-items: center; } #page-exercise-show section.latest-iteration a.iteration .action-icon { height: 16px; width: 16px; margin-left: 64px; filter: var(--textColor6-filter); } #page-exercise-show section.latest-iteration .next-steps{ margin-top: 32px; border-top-width: 1px; border-color: var(--borderColor7); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } #page-exercise-show section.latest-iteration .next-steps .community-solutions, #page-exercise-show section.latest-iteration .next-steps .mentoring{ padding-top: 24px; display: flex; flex-direction: column; align-items: center; text-align: center; } #page-exercise-show section.latest-iteration .next-steps .community-solutions .header-icon, #page-exercise-show section.latest-iteration .next-steps .mentoring .header-icon { width: 48px; height: 48px; margin-bottom: 12px; } #page-exercise-show section.latest-iteration .next-steps .community-solutions h3, #page-exercise-show section.latest-iteration .next-steps .mentoring h3{ font-size: 20px; font-weight: 600; line-height: 140%; color: var(--textColor1); margin-bottom: 6px; } #page-exercise-show section.latest-iteration .next-steps .community-solutions p, #page-exercise-show section.latest-iteration .next-steps .mentoring p{ margin-bottom: 20px; font-size: 16px; line-height: 160%; } #page-exercise-show section.latest-iteration .next-steps .community-solutions{ padding-right: 32px; border-right-width: 1px; border-color: var(--borderColor7); } #page-exercise-show section.latest-iteration .next-steps .community-solutions p{ margin-bottom: 20px; } #page-exercise-show section.latest-iteration .next-steps .mentoring{ padding-left: 32px; } #page-exercise-show section.latest-iteration .next-steps .mentoring p{ margin-bottom: 16px; } #page-exercise-show section.latest-iteration .next-steps .mentoring .c-combo-button{ margin-bottom: 16px; } #page-exercise-show section.latest-iteration .next-steps .mentoring .learn-more{ display: flex; align-items: center; font-size: 14px; font-weight: 600; line-height: 170%; color: var(--c-prominent-link-color); } #page-exercise-show section.latest-iteration .next-steps .mentoring .learn-more .c-icon { height: 14px; width: 14px; filter: var(--c-prominent-link-icon-filter); margin-left: 8px; } #page-exercise-show section.instructions{ margin-bottom: 32px; border-radius: 8px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); --tw-shadow: var(--box-shadow-lg); --tw-shadow-colored: var(--box-shadow-lg); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } #page-exercise-show section.instructions .source{ margin-top: 24px; } #page-exercise-show section.instructions .source hr{ margin-bottom: 16px; } #page-exercise-show section.instructions .source a{ display: inline-flex; align-items: center; } #page-exercise-show section.instructions .source a .c-icon { height: 12px; width: 12px; margin-left: 6px; } #page-exercise-show section.extra-info{ margin-bottom: 40px; display: flex; flex-direction: row; align-items: center; } #page-exercise-show section.extra-info a{ display: none; align-items: center; } .c-concepts-map .connection#page-exercise-show section.extra-info a { opacity: 0; } @media (min-width: 480px){ #page-exercise-show section.extra-info a{ display: flex; } } #page-exercise-show section.extra-info a{ font-size: 15px; font-weight: 500; color: var(--textColor6); margin-left: auto; } #page-exercise-show section.extra-info a .c-icon { filter: var(--textColor6-filter); } #page-exercise-show section.extra-info a .github-icon { height: 22px; width: 22px; margin-right: 16px; } #page-exercise-show section.extra-info a .action-icon { height: 12px; width: 12px; margin-left: 12px; } #page-exercise-show .action-box{ position: relative; border-left-width: 1px; border-color: var(--borderColor6); padding-left: 24px; } #page-exercise-show .action-box + .action-box{ padding-top: 24px; } #page-exercise-show .action-box + .action-box:before{ margin-top: 24px; } #page-exercise-show .action-box.locked + .action-box{ padding-top: 16px; } #page-exercise-show .action-box.locked + .action-box:before{ margin-top: 16px; } #page-exercise-show .action-box.pending:before, #page-exercise-show .action-box.locked:before, #page-exercise-show .action-box.completed:before{ position: absolute; left: -12px; top: 2px; border-radius: 100%; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); height: 24px; width: 24px; content: ""; } #page-exercise-show .action-box.pending::before { content: ""; display: block; background-image: url("/assets/graphics/minus-a106b399487da85ae55267f3f6f7ebbc85d08967.svg"); background-repeat: no-repeat; background-position: center; background-size: 70% 70%; background-color: #e1ebff; } #page-exercise-show .action-box.locked:before { background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjQgNjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjMyIiBjeT0iMzIiIHI9IjMyIiBmaWxsPSIjRTFFQkZGIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjMuNjE5IDMxLjIxNDRDMjMuNjE5IDMwLjM4NTkgMjQuMjkwNiAyOS43MTQ0IDI1LjExOSAyOS43MTQ0SDM4Ljg4MUMzOS43MDk0IDI5LjcxNDQgNDAuMzgwOSAzMC4zODU5IDQwLjM4MDkgMzEuMjE0NFY0MS45Mjg2QzQwLjM4MDkgNDIuNzU3MSAzOS43MDk0IDQzLjQyODYgMzguODgwOSA0My40Mjg2SDI1LjExOUMyNC4yOTA2IDQzLjQyODYgMjMuNjE5IDQyLjc1NzEgMjMuNjE5IDQxLjkyODZWMzEuMjE0NFoiIHN0cm9rZT0iIzVDNTU4OSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMjYuNjY2NyAyOS43MTQ0VjI1LjkwNDlDMjYuNjY2NyAyMi45NTkzIDI5LjA1NDUgMjAuNTcxNSAzMiAyMC41NzE1QzM0Ljk0NTUgMjAuNTcxNSAzNy4zMzMzIDIyLjk1OTMgMzcuMzMzMyAyNS45MDQ5VjI5LjcxNDQiIHN0cm9rZT0iIzVDNTU4OSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMzIgMzUuODA5NkMzMS43ODk2IDM1LjgwOTYgMzEuNjE5IDM1Ljk4MDEgMzEuNjE5IDM2LjE5MDVDMzEuNjE5IDM2LjQwMDkgMzEuNzg5NiAzNi41NzE1IDMyIDM2LjU3MTVDMzIuMjEwNCAzNi41NzE1IDMyLjM4MSAzNi40MDA5IDMyLjM4MSAzNi4xOTA1QzMyLjM4MTIgMzYuMDg5NCAzMi4zNDEyIDM1Ljk5MjQgMzIuMjY5NyAzNS45MjA5QzMyLjE5ODIgMzUuODQ5MyAzMi4xMDExIDM1LjgwOTMgMzIgMzUuODA5NlYzNS44MDk2IiBzdHJva2U9IiM1QzU1ODkiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg=="); } #page-exercise-show .action-box.locked h3{ font-size: 18px; font-weight: 600; line-height: 150%; color: var(--textColor1); margin-bottom: 0px; color: var(--textColor6); } #page-exercise-show .action-box.completed:before { background-image: url("data:image/svg+xml;base64,PHN2ZwogIGlkPSJjb21wbGV0ZWQtY2hlY2stY2lyY2xlIgogIHZpZXdCb3g9IjAgMCA1MTIgNTEyIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICBjbGFzc05hbWU9ImNvbXBsZXRlLWljb24iCj4KICA8cGF0aAogICAgZD0ibTI1NiAwYy0xNDEuMTY0MDYyIDAtMjU2IDExNC44MzU5MzgtMjU2IDI1NnMxMTQuODM1OTM4IDI1NiAyNTYgMjU2IDI1Ni0xMTQuODM1OTM4IDI1Ni0yNTYtMTE0LjgzNTkzOC0yNTYtMjU2LTI1NnptMCAwIgogICAgZmlsbD0iIzU5RDJBRSIKICAvPgogIDxwYXRoCiAgICBkPSJtMzg1Ljc1IDIwMS43NS0xMzguNjY3OTY5IDEzOC42NjQwNjJjLTQuMTYwMTU2IDQuMTYwMTU3LTkuNjIxMDkzIDYuMjUzOTA3LTE1LjA4MjAzMSA2LjI1MzkwN3MtMTAuOTIxODc1LTIuMDkzNzUtMTUuMDgyMDMxLTYuMjUzOTA3bC02OS4zMzIwMzEtNjkuMzMyMDMxYy04LjM0Mzc1LTguMzM5ODQzLTguMzQzNzUtMjEuODI0MjE5IDAtMzAuMTY0MDYyIDguMzM5ODQzLTguMzQzNzUgMjEuODIwMzEyLTguMzQzNzUgMzAuMTY0MDYyIDBsNTQuMjUgNTQuMjUgMTIzLjU4NTkzOC0xMjMuNTgyMDMxYzguMzM5ODQzLTguMzQzNzUgMjEuODIwMzEyLTguMzQzNzUgMzAuMTY0MDYyIDAgOC4zMzk4NDQgOC4zMzk4NDMgOC4zMzk4NDQgMjEuODIwMzEyIDAgMzAuMTY0MDYyem0wIDAiCiAgICBmaWxsPSIyNjI4MkQiCiAgLz4KPC9zdmc+Cg=="); } #page-exercise-show .action-box.completed h3 { /*@apply text-textColor6 text-h5 mb-0;*/ } #page-exercise-show .action-box .action-box-content > *:last-child{ margin-bottom: 0px !important; } #page-exercise-show .action-box .inner-box{ position: relative; margin-left: 10px; display: flex; border-left-width: 1px; border-color: var(--borderColor6); } #page-exercise-show .action-box .inner-box + .inner-box{ padding-top: 24px; } #page-exercise-show .action-box .inner-box + .inner-box:before{ margin-top: 24px; } #page-exercise-show .action-box .inner-box:before{ position: absolute; left: -11px; top: 0px; border-radius: 100%; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); height: 20px; width: 20px; content: ""; } #page-exercise-show .action-box .inner-box.in-progress:before { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMCAxOEMxNC40MTgzIDE4IDE4IDE0LjQxODMgMTggMTBDMTggNS41ODE3MiAxNC40MTgzIDIgMTAgMkM1LjU4MTcyIDIgMiA1LjU4MTcyIDIgMTBDMiAxNC40MTgzIDUuNTgxNzIgMTggMTAgMThaTTEwIDIwQzE1LjUyMjggMjAgMjAgMTUuNTIyOCAyMCAxMEMyMCA0LjQ3NzE1IDE1LjUyMjggMCAxMCAwQzQuNDc3MTUgMCAwIDQuNDc3MTUgMCAxMEMwIDE1LjUyMjggNC40NzcxNSAyMCAxMCAyMFoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik03LjUgMTBDNy41IDEwLjgyODQgNi44Mjg0MyAxMS41IDYgMTEuNUM1LjE3MTU3IDExLjUgNC41IDEwLjgyODQgNC41IDEwQzQuNSA5LjE3MTYgNS4xNzE1NyA4LjUgNiA4LjVDNi44Mjg0MyA4LjUgNy41IDkuMTcxNiA3LjUgMTBaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNMTEuNSAxMEMxMS41IDEwLjgyODQgMTAuODI4NCAxMS41IDEwIDExLjVDOS4xNzE2IDExLjUgOC41IDEwLjgyODQgOC41IDEwQzguNSA5LjE3MTYgOS4xNzE2IDguNSAxMCA4LjVDMTAuODI4NCA4LjUgMTEuNSA5LjE3MTYgMTEuNSAxMFoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xNS41IDEwQzE1LjUgMTAuODI4NCAxNC44Mjg0IDExLjUgMTQgMTEuNUMxMy4xNzE2IDExLjUgMTIuNSAxMC44Mjg0IDEyLjUgMTBDMTIuNSA5LjE3MTYgMTMuMTcxNiA4LjUgMTQgOC41QzE0LjgyODQgOC41IDE1LjUgOS4xNzE2IDE1LjUgMTBaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4KCg=="); } #page-exercise-show .action-box .inner-box.pending:before { background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0ibWludXMtY2lyY2xlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5hIHsKICAgICAgICBmaWxsOiBub25lOwogICAgICAgIHN0cm9rZTogY3VycmVudENvbG9yOwogICAgICAgIHN0cm9rZS1saW5lY2FwOiByb3VuZDsKICAgICAgICBzdHJva2UtbGluZWpvaW46IHJvdW5kOwogICAgICAgIHN0cm9rZS13aWR0aDogMS41cHg7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDx0aXRsZT5zdWJ0cmFjdC1jaXJjbGU8L3RpdGxlPgogIDxsaW5lIGNsYXNzPSJhIiB4MT0iNy41IiB5MT0iMTIiIHgyPSIxNi41IiB5Mj0iMTIiIC8+CiAgPGNpcmNsZSBjbGFzcz0iYSIgY3g9IjEyIiBjeT0iMTIiIHI9IjExLjI1IiAvPgo8L3N2Zz4K"); } #page-exercise-show .action-box .inner-box.locked:before { background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjQgNjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjMyIiBjeT0iMzIiIHI9IjMyIiBmaWxsPSIjRTFFQkZGIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjMuNjE5IDMxLjIxNDRDMjMuNjE5IDMwLjM4NTkgMjQuMjkwNiAyOS43MTQ0IDI1LjExOSAyOS43MTQ0SDM4Ljg4MUMzOS43MDk0IDI5LjcxNDQgNDAuMzgwOSAzMC4zODU5IDQwLjM4MDkgMzEuMjE0NFY0MS45Mjg2QzQwLjM4MDkgNDIuNzU3MSAzOS43MDk0IDQzLjQyODYgMzguODgwOSA0My40Mjg2SDI1LjExOUMyNC4yOTA2IDQzLjQyODYgMjMuNjE5IDQyLjc1NzEgMjMuNjE5IDQxLjkyODZWMzEuMjE0NFoiIHN0cm9rZT0iIzVDNTU4OSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMjYuNjY2NyAyOS43MTQ0VjI1LjkwNDlDMjYuNjY2NyAyMi45NTkzIDI5LjA1NDUgMjAuNTcxNSAzMiAyMC41NzE1QzM0Ljk0NTUgMjAuNTcxNSAzNy4zMzMzIDIyLjk1OTMgMzcuMzMzMyAyNS45MDQ5VjI5LjcxNDQiIHN0cm9rZT0iIzVDNTU4OSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMzIgMzUuODA5NkMzMS43ODk2IDM1LjgwOTYgMzEuNjE5IDM1Ljk4MDEgMzEuNjE5IDM2LjE5MDVDMzEuNjE5IDM2LjQwMDkgMzEuNzg5NiAzNi41NzE1IDMyIDM2LjU3MTVDMzIuMjEwNCAzNi41NzE1IDMyLjM4MSAzNi40MDA5IDMyLjM4MSAzNi4xOTA1QzMyLjM4MTIgMzYuMDg5NCAzMi4zNDEyIDM1Ljk5MjQgMzIuMjY5NyAzNS45MjA5QzMyLjE5ODIgMzUuODQ5MyAzMi4xMDExIDM1LjgwOTMgMzIgMzUuODA5NlYzNS44MDk2IiBzdHJva2U9IiM1QzU1ODkiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg=="); } #page-exercise-show .action-box .inner-box.locked h3{ font-size: 18px; font-weight: 600; line-height: 150%; color: var(--textColor1); margin-bottom: 0px; color: var(--textColor6); } #page-exercise-show .action-box .inner-box.completed:before { background-image: url("data:image/svg+xml;base64,PHN2ZwogIGlkPSJjb21wbGV0ZWQtY2hlY2stY2lyY2xlIgogIHZpZXdCb3g9IjAgMCA1MTIgNTEyIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICBjbGFzc05hbWU9ImNvbXBsZXRlLWljb24iCj4KICA8cGF0aAogICAgZD0ibTI1NiAwYy0xNDEuMTY0MDYyIDAtMjU2IDExNC44MzU5MzgtMjU2IDI1NnMxMTQuODM1OTM4IDI1NiAyNTYgMjU2IDI1Ni0xMTQuODM1OTM4IDI1Ni0yNTYtMTE0LjgzNTkzOC0yNTYtMjU2LTI1NnptMCAwIgogICAgZmlsbD0iIzU5RDJBRSIKICAvPgogIDxwYXRoCiAgICBkPSJtMzg1Ljc1IDIwMS43NS0xMzguNjY3OTY5IDEzOC42NjQwNjJjLTQuMTYwMTU2IDQuMTYwMTU3LTkuNjIxMDkzIDYuMjUzOTA3LTE1LjA4MjAzMSA2LjI1MzkwN3MtMTAuOTIxODc1LTIuMDkzNzUtMTUuMDgyMDMxLTYuMjUzOTA3bC02OS4zMzIwMzEtNjkuMzMyMDMxYy04LjM0Mzc1LTguMzM5ODQzLTguMzQzNzUtMjEuODI0MjE5IDAtMzAuMTY0MDYyIDguMzM5ODQzLTguMzQzNzUgMjEuODIwMzEyLTguMzQzNzUgMzAuMTY0MDYyIDBsNTQuMjUgNTQuMjUgMTIzLjU4NTkzOC0xMjMuNTgyMDMxYzguMzM5ODQzLTguMzQzNzUgMjEuODIwMzEyLTguMzQzNzUgMzAuMTY0MDYyIDAgOC4zMzk4NDQgOC4zMzk4NDMgOC4zMzk4NDQgMjEuODIwMzEyIDAgMzAuMTY0MDYyem0wIDAiCiAgICBmaWxsPSIyNjI4MkQiCiAgLz4KPC9zdmc+Cg=="); } #page-exercise-show .action-box .inner-box.completed h3 { /*@apply text-textColor6 text-h5 mb-0;*/ } #page-exercise-show .action-box .inner-box .inner-box-content{ margin-left: 20px; margin-top: -2px; } #page-exercise-show .action-box .inner-box .inner-box-content > *:last-child{ margin-bottom: 0px !important; } #page-exercise-show .action-box .prereqs{ display: flex; flex-wrap: wrap; gap: 4px; } #page-exercise-show .action-box .prereqs .c-exercise-widget{ margin-right: 8px; margin-bottom: 8px; } #page-exercise-show .action-box .prereqs .c-exercise-widget.--published.--skinny, #page-exercise-show .action-box .prereqs .c-exercise-widget.--completed.--skinny{ outline-style: solid; outline-width: 2px; outline-color: #43B593; } #page-exercise-show .action-box h4{ font-family: Source Code Pro, monospace; font-size: 14px; font-weight: 700; text-transform: uppercase; line-height: 138%; color: var(--textColor3); margin-bottom: 12px; color: var(--textColor6); } #page-exercise-show .action-box .editor-btn{ margin-bottom: 16px; } #page-exercise-show .action-box .c-copy-text-to-clipboard{ --tw-border-opacity: 1; border-color: rgb(92 85 137 / var(--tw-border-opacity, 1)); } #page-exercise-show .action-box .c-cli-walkthrough-button{ margin-bottom: 16px; } #page-exercise-show .action-box .cli-btn{ margin-bottom: 16px; font-family: Source Code Pro, monospace; font-size: 14px; font-weight: 400; } #page-exercise-show .action-box .c-prominent-link{ margin-top: 16px; } #page-exercise-show .action-box .complete button{ width: 100%; } #page-exercise-show .action-box .publish-section{ margin-bottom: 16px; font-size: 16px; line-height: 160%; } #page-exercise-show .action-box .publish-section .c-react-wrapper-student-unpublish-solution-modal-button, #page-exercise-show .action-box .publish-section .c-react-wrapper-student-change-published-iteration-modal-button{ display: inline-block; } #page-exercise-show .action-box .publish-section .c-community-solution{ margin-top: 16px; } #page-exercise-show .join-box{ border-radius: 8px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; --tw-shadow: var(--box-shadow-lg); --tw-shadow-colored: var(--box-shadow-lg); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } @media (min-width: 1024px){ #page-exercise-show .join-box{ padding-top: 24px; padding-bottom: 24px; padding-left: 32px; padding-right: 32px; } } #page-exercise-show .join-box .icons{ display: flex; align-items: center; margin-bottom: 12px; } #page-exercise-show .join-box .icons .c-track-icon, #page-exercise-show .join-box .icons .c-icon { height: 48px; width: 48px; } #page-exercise-show .join-box .icons .c-icon.plus { height: 16px; width: 16px; margin-left: 12px; margin-right: 12px; } #page-exercise-show .join-box p a{ font-weight: 600; } #page-exercise-show .join-box .buttons .btn-primary{ width: 100%; } #page-exercise-show .join-box .buttons > :first-child{ margin-bottom: 12px; } #page-exercise-show .action-box h3, #page-exercise-show .join-box h3{ font-size: 20px; font-weight: 600; line-height: 140%; color: var(--textColor1); margin-bottom: 4px; display: flex; align-items: center; } #page-exercise-show .action-box p, #page-exercise-show .join-box p{ font-size: 16px; line-height: 160%; color: var(--textColor2); } #page-exercise-show .action-box p a, #page-exercise-show .join-box p a{ font-weight: 500; color: var(--c-prominent-link-color); } #page-exercise-show .action-box p strong, #page-exercise-show .join-box p strong{ font-weight: 500; } #page-exercise-show .action-box p strong a, #page-exercise-show .join-box p strong a{ border-bottom-width: 2px; border-color: var(--c-prominent-link-color); color: var(--c-prominent-link-color); } #page-exercise-show a.latest-iteration-link{ border-radius: 8px; border-width: 1px; border-color: var(--borderColor5); --tw-shadow: var(--box-shadow-sm); --tw-shadow-colored: var(--box-shadow-sm); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); padding-top: 8px; padding-bottom: 8px; padding-left: 24px; padding-right: 24px; display: flex; align-items: center; } #page-exercise-show a.latest-iteration-link h3{ font-size: 18px; font-weight: 600; line-height: 150%; color: var(--textColor1); } #page-exercise-show a.latest-iteration-link .--published, #page-exercise-show a.latest-iteration-link .--latest, #page-exercise-show a.latest-iteration-link .--upload-method-icon{ display: none; } .c-concepts-map .connection#page-exercise-show a.latest-iteration-link .--published,.c-concepts-map .connection #page-exercise-show a.latest-iteration-link .--latest,.c-concepts-map .connection #page-exercise-show a.latest-iteration-link .--upload-method-icon { opacity: 0; } #page-exercise-show.has-advert .c-react-wrapper-student-update-exercise-notice, #page-exercise-show.has-advert .c-completed-exercise-heading, #page-concept-show.has-advert .c-react-wrapper-student-update-exercise-notice, #page-concept-show.has-advert .c-completed-exercise-heading { max-width: calc(100% - 340px); } #page-exercise-show.has-advert .c-perk-a, #page-concept-show.has-advert .c-perk-a{ position: absolute; top: 20px; right: var(--container-padding-x); width: var(--c-perk-a-width); } #page-generic-exercise .header { background: var(--exercise-header-gradient); } #page-generic-exercise section.instructions{ margin-bottom: 32px; border-radius: 8px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); --tw-shadow: var(--box-shadow-lg); --tw-shadow-colored: var(--box-shadow-lg); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } #page-generic-exercise section.instructions .source{ margin-top: 24px; } #page-generic-exercise section.instructions .source hr{ margin-bottom: 16px; } #page-generic-exercise section.instructions .source a{ display: inline-flex; align-items: center; } #page-generic-exercise section.instructions .source a .c-icon { height: 12px; width: 12px; margin-left: 6px; } #page-generic-exercise section.tracks a{ display: flex; flex-direction: column; align-items: center; border-radius: 8px; border-width: 3px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); padding: 12px; --tw-shadow: 0px 4px 16px 0px rgba(var(--shadowColorMain), 0.3); --tw-shadow-colored: 0px 4px 16px 0px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); position: relative; text-align: center; line-height: 120%; } #page-generic-exercise section.tracks a:before{ position: absolute; top: -12px; right: -12px; height: 24px; width: 24px; background-size: cover; } #page-generic-exercise section.tracks a .track-icon{ margin-bottom: 12px; max-width: 60px; } #page-generic-exercise section.tracks a.completed{ --tw-border-opacity: 1; border-color: rgb(67 181 147 / var(--tw-border-opacity, 1)); } #page-generic-exercise section.tracks a.completed:before { content: ""; background-image: url("/assets/icons/completed-check-circle-611f69e228bf620a3a5d883825d6e760abf0e25d.svg"); } #page-generic-exercise section.tracks a.in-progress{ --tw-border-opacity: 1; border-color: rgb(246 150 5 / var(--tw-border-opacity, 1)); } #page-generic-exercise section.tracks a.in-progress:before { content: ""; background-image: url("/assets/icons/pending-circle-orange-b1dca948cdf79822e963dd1a3b3e427872efe86b.svg"); border-radius: 100px; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } #page-generic-exercise section.tracks a.not-started{ border-color: transparent; } #page-exercises-index section.exercises .c-search-bar{ margin-bottom: 32px; } #page-exercises-index section.exercises .c-search-bar input.--search { width: 100%; } @media (min-width: 768px) { #page-exercises-index section.exercises .c-search-bar input.--search { max-width: 440px } } #page-exercises-index section.exercises .tabs{ display: flex; overflow-x: auto; margin-bottom: 20px; padding-bottom: 12px; } #page-exercises-index section.exercises .tabs .c-tab { height: 40px; cursor: pointer; } #page-exercises-index section.exercises .tabs .c-tab .c-ed { height: 16px; width: 16px; margin-right: 12px; } #page-exercises-index section.exercises .tabs .c-tab .c-ed.--locked { cursor: pointer; opacity: 1; } #page-exercises-index section.exercises .exercises{ display: grid; gap: 16px; padding-bottom: 40px; } #page-iterations-index section.zero-state{ display: flex; flex-direction: column; align-items: center; border-radius: 8px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23C8D5EF' stroke-width='3' stroke-dasharray='16%2c16' stroke-dashoffset='4' stroke-linecap='round'/%3e%3c/svg%3e"); margin-bottom: 32px; padding-top: 48px; padding-bottom: 48px; padding-left: 32px; padding-right: 32px; } #page-iterations-index section.zero-state h2{ font-size: 28px; font-weight: 700; line-height: 140%; color: var(--textColor1); } @media (min-width: 768px){ #page-iterations-index section.zero-state h2{ font-size: 31px; } } #page-iterations-index section.zero-state h2{ margin-bottom: 12px; text-align: center; } #page-iterations-index section.zero-state p{ margin-bottom: 28px; text-align: center; font-size: 18px; line-height: 170%; max-width: 640px; } #page-iterations-index section.zero-state .box{ display: flex; flex-direction: column; gap: 32px; } @media (min-width: 768px){ #page-iterations-index section.zero-state .box{ flex-direction: row; } } #page-iterations-index section.zero-state .box{ border-radius: 12px; border-width: 2px; --tw-border-opacity: 1; border-color: rgb(96 79 205 / var(--tw-border-opacity, 1)); margin-bottom: 24px; padding-top: 24px; padding-bottom: 24px; padding-left: 32px; padding-right: 32px; background: var(--backgroundColorExternalCTA); width: 100%; max-width: 640px; } #page-iterations-index section.zero-state .box h4{ font-family: Source Code Pro, monospace; font-size: 14px; font-weight: 700; text-transform: uppercase; line-height: 138%; color: var(--textColor3); margin-bottom: 12px; } #page-iterations-index section.zero-state .box .editor{ flex-shrink: 0; } #page-iterations-index section.zero-state .box .cli{ overflow: hidden; } @media (min-width: 768px){ #page-iterations-index section.zero-state .box .cli{ overflow: visible; } } #page-iterations-index section.zero-state .box .cli .c-copy-text-to-clipboard{ width: 100%; } @media (min-width: 768px){ #page-iterations-index section.zero-state .box .cli .c-copy-text-to-clipboard{ width: 360px; } } #page-iterations-index section.iterations .iteration{ position: relative; margin-bottom: 16px; border-radius: 8px; --tw-shadow: var(--box-shadow-lg); --tw-shadow-colored: var(--box-shadow-lg); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); display: flex; flex-direction: column; } #page-iterations-index section.iterations .iteration .header .--summary-inner{ display: flex; align-items: center; padding-top: 12px; padding-bottom: 12px; padding-left: 24px; padding-right: 24px; } #page-iterations-index section.iterations .iteration .header .--summary-inner .c-icon { filter: var(--textColor6-filter); } #page-iterations-index section.iterations .iteration .header .opener{ margin-left: 32px; padding-left: 24px; border-left-width: 1px; border-color: var(--borderColor5); } #page-iterations-index section.iterations .iteration .header .--closed-icon, #page-iterations-index section.iterations .iteration .header .--open-icon { height: 32px; width: 32px; display: flex; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 100%; border-width: 1px; border-color: var(--borderColor4); color: var(--textColor6); } #page-iterations-index section.iterations .iteration .header .--closed-icon .c-icon, #page-iterations-index section.iterations .iteration .header .--open-icon .c-icon { height: 14px; width: 14px; filter: var(--textColor6-filter); } #page-iterations-index section.iterations .iteration .deleted{ padding: 32px; text-align: center; font-size: 16px; color: var(--textColor6); } #page-iterations-index section.iterations .iteration .content{ flex-grow: 1; display: flex; align-items: stretch; border-top-width: 1px; border-color: var(--borderColor7); margin-bottom: 32px; max-height: calc(95vh - 80px); } #page-iterations-index section.iterations .iteration .content .files, #page-iterations-index section.iterations .iteration .content .information{ overflow: auto; } #page-iterations-index section.iterations .iteration .content .files{ flex-grow: 1; } #page-iterations-index section.iterations .iteration .content .information{ width: 33.3%; flex-shrink: 0; flex-grow: 0; border-left-width: 1px; border-color: var(--borderColor7); display: flex; flex-direction: column; } #page-iterations-index section.iterations .iteration .content .information .tabs{ display: flex; padding-left: 24px; padding-right: 24px; padding-top: 16px; padding-bottom: 16px; } #page-iterations-index section.iterations .iteration .content .information .tabs .c-tab { line-height: 38px; } #page-iterations-index section.iterations .iteration .content .information .tabs .options-button{ margin-left: auto; padding-top: 6px; padding-bottom: 6px; padding-left: 12px; padding-right: 12px; border-radius: 8px; --tw-shadow: 0px 2px 4px 0px rgba(var(--shadowColorMain), 0.3); --tw-shadow-colored: 0px 2px 4px 0px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } #page-iterations-index section.iterations .iteration .content .information .tabs .options-button .c-icon { filter: var(--textColor6-filter); } #page-iterations-index section.iterations .iteration .content .information .panels{ overflow: auto; } #page-iterations-index section.iterations .iteration .content .information .analysis-panel{ padding-left: 24px; padding-right: 24px; padding-bottom: 16px; } #page-iterations-index section.iterations .iteration .content .information .tests-panel{ padding-bottom: 16px; } #page-iterations-index section.iterations .iteration .content .information .automated-feedback-pending, #page-iterations-index section.iterations .iteration .content .information .automated-feedback-absent, #page-iterations-index section.iterations .iteration .content .information .test-runner-disabled{ display: flex; flex-direction: column; align-items: center; padding-top: 24px; padding-bottom: 24px; } #page-iterations-index section.iterations .iteration .content .information .automated-feedback-pending h3, #page-iterations-index section.iterations .iteration .content .information .automated-feedback-absent h3, #page-iterations-index section.iterations .iteration .content .information .test-runner-disabled h3{ font-size: 18px; font-weight: 600; line-height: 138%; color: var(--textColor1); margin-bottom: 12px; text-align: center; max-width: 280px; } #page-iterations-index section.iterations .iteration .content .information .automated-feedback-pending p, #page-iterations-index section.iterations .iteration .content .information .automated-feedback-absent p, #page-iterations-index section.iterations .iteration .content .information .test-runner-disabled p{ text-align: center; font-size: 16px; line-height: 170%; max-width: 360px; } #page-iterations-index section.iterations .iteration .content .information .automated-feedback-pending .upsell, #page-iterations-index section.iterations .iteration .content .information .automated-feedback-absent .upsell, #page-iterations-index section.iterations .iteration .content .information .test-runner-disabled .upsell{ border-width: 1px; border-color: var(--borderColor6); border-radius: 8px; padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; line-height: 150%; color: var(--textColor6); text-align: center; } #page-iterations-index section.iterations .iteration .content .information .automated-feedback-pending .upsell a, #page-iterations-index section.iterations .iteration .content .information .automated-feedback-absent .upsell a, #page-iterations-index section.iterations .iteration .content .information .test-runner-disabled .upsell a{ text-decoration-line: underline; } #page-iterations-index section.iterations .iteration .content .information .automated-feedback-pending .c-icon { height: 24px; width: 24px; margin-bottom: 16px; --tw-text-opacity: 1; color: rgb(246 150 5 / var(--tw-text-opacity, 1)); } #page-iterations-index section.iterations .iteration .content .information .automated-feedback-absent .c-icon { height: 120px; width: 120px; margin-bottom: 16px; } #page-iterations-index section.iterations .iteration .content .information .automated-feedback-absent p{ margin-bottom: 24px; } #page-iterations-index section.iterations .iteration .content .information .representer-feedback + .analyzer-feedback{ border-top-width: 2px; border-color: var(--borderColor6); margin-top: 16px; padding-top: 16px; } #page-community-solutions-index h2, #page-favorites h2{ font-size: 20px; font-weight: 600; line-height: 130%; color: var(--textColor1); } @media (min-width: 768px){ #page-community-solutions-index h2, #page-favorites h2{ font-size: 24px; } } #page-community-solutions-index h2, #page-favorites h2{ margin-bottom: 20px; } #page-community-solutions-index .c-search-bar, #page-favorites .c-search-bar{ margin-bottom: 32px; } #page-community-solutions-index .c-search-bar .--search, #page-favorites .c-search-bar .--search{ width: 100%; margin-right: 0px; margin-bottom: 12px; } @media (min-width: 768px){ #page-community-solutions-index .c-search-bar .--search, #page-favorites .c-search-bar .--search{ margin-right: 24px; margin-bottom: 0px; } } #page-community-solutions-index .solutions, #page-favorites .solutions{ display: grid; -moz-column-gap: 48px; column-gap: 48px; row-gap: 32px; padding-bottom: 80px; } #page-community-solutions-index .solutions.grid-layout, #page-favorites .solutions.grid-layout{ grid-template-columns: repeat(1, minmax(0, 1fr)); } @media (min-width: 768px){ #page-community-solutions-index .solutions.grid-layout, #page-favorites .solutions.grid-layout{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1280px){ #page-community-solutions-index .solutions.grid-layout, #page-favorites .solutions.grid-layout{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } #page-community-solutions-index .solutions.lines-layout, #page-favorites .solutions.lines-layout{ grid-template-columns: repeat(1, minmax(0, 1fr)); } #page-community-solutions-index .solutions.lines-layout .c-community-solution pre code, #page-favorites .solutions.lines-layout .c-community-solution pre code { height: unset; /* 15 loc */ max-height: 358px; } #page-community-solutions-index .solutions.lines-layout .c-community-solution .--info, #page-favorites .solutions.lines-layout .c-community-solution .--info { /* @apply grow-0; */ } #page-community-solutions-index .solutions.lines-layout .c-community-solution .--footer, #page-favorites .solutions.lines-layout .c-community-solution .--footer{ flex-direction: row-reverse; gap: 20px; } #page-community-solution{ padding-bottom: 80px; } #page-community-solution .c-exercise-header{ margin-bottom: 40px; } #page-community-solution .c-exercise-header .content .c-track-icon { height: 48px; width: 48px; margin-right: 32px; display: none; } .c-concepts-map .connection#page-community-solution .c-exercise-header .content .c-track-icon { opacity: 0; } @media (min-width: 1024px){ #page-community-solution .c-exercise-header .content .c-track-icon{ display: block; } } #page-community-solution .c-exercise-header .content .avatar a{ display: block; } #page-community-solution .c-exercise-header .content .avatar .c-avatar { height: 48px; width: 48px; } @media (min-width: 640px){ #page-community-solution .c-exercise-header .content .avatar .c-avatar{ display: block; height: 80px; width: 80px; } } #page-community-solution .c-exercise-header .content h1{ font-size: 28px; font-weight: 700; line-height: 140%; color: var(--textColor1); } @media (min-width: 768px){ #page-community-solution .c-exercise-header .content h1{ font-size: 31px; } } #page-community-solution .c-exercise-header .content h1{ margin-bottom: 0px; line-height: 140%; display: flex; flex-direction: column; align-items: flex-start; } #page-community-solution .c-exercise-header .content h1 .name{ margin-bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; } #page-community-solution .c-exercise-header .content h1 .name a{ margin-right: 10px; border-bottom-width: 2px; border-color: var(--borderColor6); margin-bottom: -2px; /* Visually compensate for the border */ } #page-community-solution .c-exercise-header .content h1 .name .c-primary-reputation{ margin-left: 16px; display: none; } .c-concepts-map .connection#page-community-solution .c-exercise-header .content h1 .name .c-primary-reputation { opacity: 0; } @media (min-width: 640px){ #page-community-solution .c-exercise-header .content h1 .name .c-primary-reputation{ display: flex; } } #page-community-solution .c-exercise-header .content h1 .to{ font-size: 20px; line-height: 120%; color: var(--textColor6); font-weight: 400; } #page-community-solution .c-exercise-header .content h1 .to a{ font-weight: 500; color: var(--textColor2); border-bottom-width: 2px; border-color: var(--borderColor6); } #page-community-solution .c-exercise-header .content .decorations{ margin-left: auto; } #page-community-solution .c-exercise-header .content .buttons{ display: flex; align-items: center; } #page-community-solution .c-exercise-header .content .buttons .c-react-wrapper-common-share-solution-button{ flex-grow: 1; } @media (min-width: 640px){ #page-community-solution .c-exercise-header .content .buttons .c-react-wrapper-common-share-solution-button{ flex-grow: 0; } } #page-community-solution .c-exercise-header .content .buttons .c-react-wrapper-common-share-solution-button .c-share-button{ width: 100%; } #page-community-solution .c-exercise-header .content .buttons .c-react-wrapper-common-share-solution-button .c-share-button .inner{ display: flex; width: 100%; align-items: center; justify-content: center; } #page-community-solution .c-exercise-header .content .buttons .star-button .c-icon, #page-community-solution .c-exercise-header .content .buttons .comments-button .c-icon { filter: var(--textColor6-filter); } #page-community-solution .c-exercise-header .content .buttons .star-button { border: 2px solid #daa425; } #page-community-solution .c-exercise-header .content .buttons .star-button span { min-width: 10px; } #page-community-solution .c-exercise-header .content .buttons .star-button.--starred { background: var(--backgroundColorStarButtonStarred); } #page-community-solution .c-exercise-header .content .buttons .star-button.--starred .c-icon { filter: none; } #page-community-solution .c-exercise-header .content .buttons .comments-button{ margin-left: 12px; } #page-community-solution article .lhs{ flex-grow: 1; } #page-community-solution article .lhs .iteration-section{ border-radius: 8px; background-color: var(--backgroundColorB); --tw-shadow: var(--box-shadow-base); --tw-shadow-colored: var(--box-shadow-base); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); margin-bottom: 32px; } #page-community-solution article .lhs .iteration-section .c-react-wrapper-track-iteration-summary { height: auto; } #page-community-solution article .lhs .iteration-section .c-solution-iterations { height: 500px; } #page-community-solution article .lhs .iteration-section .c-solution-iterations.full-height-iteration { height: 100%; } #page-community-solution article .lhs .iteration-section .c-solution-iterations.full-height-iteration .c-iteration-pane { height: 100%; } #page-community-solution article .lhs .iteration-section .c-solution-iterations .c-iteration-summary{ padding-top: 8px; padding-bottom: 8px; padding-left: 24px; padding-right: 24px; border-bottom-width: 1px; border-color: var(--borderColor7); } #page-community-solution article .lhs .mentoring { background: linear-gradient(180deg, #2200ff 0%, #9e00ff 100%); padding: 2px; border-radius: 8px; } #page-community-solution article .lhs .mentoring .inner { border-radius: 6px; display: flex; align-items: center; background-color: var(--backgroundColorF); padding-top: 16px; padding-bottom: 16px; padding-left: 24px; padding-right: 24px; } #page-community-solution article .lhs .mentoring .inner .c-faces{ margin-right: 12px; } #page-community-solution article .lhs .mentoring .inner .c-faces .face { height: 32px; width: 32px; } #page-community-solution article .lhs .mentoring .inner .info{ flex-grow: 1; } #page-community-solution article .lhs .mentoring .inner .info .mentors{ margin-bottom: 4px; display: flex; font-size: 16px; line-height: 150%; color: var(--textColor2); } #page-community-solution article .lhs .mentoring .inner .info .mentors strong{ font-weight: 600; } #page-community-solution article .lhs .mentoring .inner .info .more{ display: flex; align-items: center; font-weight: 600; line-height: 150%; color: var(--textColor6); } #page-community-solution article .lhs .mentoring .inner .info .more .c-icon { height: 15px; width: 15px; margin-right: 8px; } #page-community-solution article .lhs .comments .c-markdown-editor.--expanded { min-height: 220px; } #page-community-solution article .lhs .comments .comment + .comment{ margin-top: 32px; } #page-community-solution article .lhs .comments .comment .c-avatar { height: 48px; width: 48px; margin-right: 16px; } #page-community-solution article .lhs .comments .comment .edit-button{ margin-left: auto; display: none; align-items: center; } .c-concepts-map .connection#page-community-solution article .lhs .comments .comment .edit-button { opacity: 0; } #page-community-solution article .lhs .comments .comment .edit-button{ border-radius: 100px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); --tw-shadow: 0px 2px 4px 0px rgba(var(--shadowColorMain), 0.3); --tw-shadow-colored: 0px 2px 4px 0px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; } #page-community-solution article .lhs .comments .comment .edit-button .c-icon { width: 50%; width: 16px; height: 16px; margin-right: 8px; filter: var(--textColor6-filter); } #page-community-solution article .lhs .comments .comment .edit-button span{ font-weight: 500; line-height: 150%; color: var(--textColor6); } #page-community-solution article .lhs .comments .comment:hover .edit-button { display: flex; } @media (min-width: 1024px) { #page-community-solution article .rhs { width: 440px } } #page-community-solution article .rhs .about h2, #page-community-solution article .rhs .other-solutions h2{ font-size: 20px; font-weight: 600; line-height: 140%; color: var(--textColor1); display: flex; align-items: center; margin-bottom: 16px; } #page-community-solution article .rhs .about h2 .c-track-icon, #page-community-solution article .rhs .other-solutions h2 .c-track-icon { height: 32px; width: 32px; margin-left: 8px; margin-right: 8px; } #page-community-solution article .rhs .about .light, #page-community-solution article .rhs .about .track-title, #page-community-solution article .rhs .other-solutions .light, #page-community-solution article .rhs .other-solutions .track-title{ font-size: 16px; color: var(--textColor6); } #page-community-solution article .rhs .about .light, #page-community-solution article .rhs .other-solutions .light{ margin-left: 8px; } #page-community-solution article .rhs .about{ border-bottom-width: 1px; border-color: var(--borderColor6); margin-bottom: 24px; padding-bottom: 24px; } #page-community-solution article .rhs .other-solutions .c-community-solution{ margin-bottom: 16px; } .c-exercise-status-tag{ border-radius: 100px; font-size: 14px; font-weight: 600; line-height: 170%; display: flex; align-items: center; padding-left: 12px; padding-right: 12px; padding-top: 4px; padding-bottom: 4px; border-width: 1px; white-space: nowrap; } .c-exercise-status-tag .c-icon { height: 16px; width: 16px; margin-right: 8px; filter: var(--textColor6-filter); } .c-exercise-status-tag.--small{ padding-left: 10px; padding-right: 10px; font-size: 13px; line-height: 150%; } .c-exercise-status-tag.--compact{ padding-top: 4px; padding-bottom: 4px; padding-left: 12px; padding-right: 12px; line-height: 130%; } .c-exercise-status-tag.--practice-mode{ --tw-border-opacity: 1; border-color: rgb(19 11 67 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(92 85 137 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(240 243 249 / var(--tw-text-opacity, 1)); } .c-exercise-status-tag.--practice-mode .c-icon { filter: var(--white-filter); } .c-exercise-status-tag.--locked{ --tw-border-opacity: 1; border-color: rgb(203 201 217 / var(--tw-border-opacity, 1)); color: var(--textColor6); background: var(--backgroundColorExerciseStatusTagLocked); } .c-exercise-status-tag.--locked:before { content: ""; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxNiAxOCI+CiAgPGRlZnMvPgogIDxwYXRoIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTIuNSA5YzAtLjgyODQzLjY3MTU3LTEuNSAxLjUtMS41aDhjLjgyODQgMCAxLjUuNjcxNTcgMS41IDEuNXY2YzAgLjgyODQtLjY3MTYgMS41LTEuNSAxLjVINGMtLjgyODQzIDAtMS41LS42NzE2LTEuNS0xLjVWOXoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgogIDxwYXRoIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTQuNSA3LjVWNWMwLTEuOTMzIDEuNTY3LTMuNSAzLjUtMy41czMuNSAxLjU2NyAzLjUgMy41djIuNU04IDExLjVjLS4xMzgwNyAwLS4yNS4xMTE5LS4yNS4yNXMuMTExOTMuMjUuMjUuMjUuMjUtLjExMTkuMjUtLjI1Yy4wMDAxOC0uMDY2NC0uMDI2MS0uMTMtLjA3MzAzLS4xNzctLjA0NjkyLS4wNDY5LS4xMTA2MS0uMDczMi0uMTc2OTctLjA3M3YwIi8+Cjwvc3ZnPg=="); background-size: contain; background-repeat: no-repeat; height: 16px; width: 16px; filter: var(--textColor6-filter); margin-right: 8px; } .c-exercise-status-tag.--wip{ --tw-border-opacity: 1; border-color: rgb(87 60 19 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(228 137 0 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .c-exercise-status-tag.--in-progress { border-color: var(--borderColorExerciseStatusTagInProgress); background: var(--backgroundColorExerciseStatusTagInProgress); color: var(--textColorExerciseStatusTagInProgress); } .c-exercise-status-tag.--available{ border-color: var(--buttonBorderColor2); --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); } .c-exercise-status-tag.--recommended{ border-color: var(--buttonBorderColor2); --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); } .c-exercise-status-tag.--completed, .c-exercise-status-tag.--published{ --tw-border-opacity: 1; border-color: rgb(67 181 147 / var(--tw-border-opacity, 1)); background: var(--backgroundColorConceptMastered); --tw-text-opacity: 1; color: rgb(52 159 127 / var(--tw-text-opacity, 1)); } .c-exercise-status-tag.--completed:before, .c-exercise-status-tag.--published:before { content: ""; background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjgiIGN5PSI4IiByPSI4IiBmaWxsPSIjNTlEMkFFIi8+CjxwYXRoIGQ9Ik0xMC44NTY5IDUuMTQyNThMNy4wMjM5NyAxMC42MTc5QzYuOTIxMzggMTAuNzY1MyA2Ljc1NDE4IDEwLjg1NDQgNi41NzQ2IDEwLjg1NzRDNi4zOTUwMyAxMC44NjAzIDYuMjI0OTcgMTAuNzc2OCA2LjExNzU2IDEwLjYzMjlMNS4xNDI1OCA5LjMzMzA1IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg=="); background-size: cover; height: 16px; width: 16px; margin-right: 8px; } .c-exercise-type-tag{ border-radius: 100px; font-size: 14px; font-weight: 600; line-height: 170%; display: flex; align-items: center; padding-left: 12px; padding-right: 12px; padding-top: 4px; padding-bottom: 4px; border-width: 1px; white-space: nowrap; } .c-exercise-type-tag .c-icon { height: 16px; width: 16px; margin-right: 8px; filter: var(--textColor6-filter); } .c-exercise-type-tag.--small{ padding-left: 10px; padding-right: 10px; font-size: 13px; line-height: 150%; } .c-exercise-type-tag.--compact{ padding-top: 4px; padding-bottom: 4px; padding-left: 12px; padding-right: 12px; line-height: 130%; } .c-exercise-type-tag.--practice-mode{ --tw-border-opacity: 1; border-color: rgb(19 11 67 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(92 85 137 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(240 243 249 / var(--tw-text-opacity, 1)); } .c-exercise-type-tag.--practice-mode .c-icon { filter: var(--white-filter); } .c-exercise-type-tag{ color: var(--textColor2); border-color: var(--buttonBorderColor2); --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); } .c-exercise-type-tag .c-icon { filter: var(--textColor6-filter); } /* Short for .c-exercise-dot */ .c-ed { height: 24px; width: 24px; display: block; justify-self: center; border-radius: 100%; transition: box-shadow 0.2s ease-out; } .c-ed.--completed, .c-ed.--published { background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjgiIGN5PSI4IiByPSI4IiBmaWxsPSIjNTlEMkFFIi8+CjxwYXRoIGQ9Ik0xMC44NTY5IDUuMTQyNThMNy4wMjM5NyAxMC42MTc5QzYuOTIxMzggMTAuNzY1MyA2Ljc1NDE4IDEwLjg1NDQgNi41NzQ2IDEwLjg1NzRDNi4zOTUwMyAxMC44NjAzIDYuMjI0OTcgMTAuNzc2OCA2LjExNzU2IDEwLjYzMjlMNS4xNDI1OCA5LjMzMzA1IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg=="); background-size: cover; } .c-ed.--completed:hover, .c-ed.--published:hover { box-shadow: 0px 1px 2px 1px rgba(var(--shadowColorED), 0.3); } .c-ed.--in_progress, .c-ed.--iterated, .c-ed.--started { background: var(--backgroundColorEDIterated); } .c-ed.--in_progress:not(.disabled), .c-ed.--iterated:not(.disabled), .c-ed.--started:not(.disabled) { box-shadow: 0px 1px 3px 1px rgba(var(--shadowColorED), 0.4); } .c-ed.--in_progress:not(.disabled):hover, .c-ed.--iterated:not(.disabled):hover, .c-ed.--started:not(.disabled):hover { box-shadow: 0px 1px 6px 1px rgba(var(--shadowColorED), 0.7); } .c-ed.--available { background: var(--backgroundColorEDAvailable); } .c-ed.--available.disabled { box-shadow: 0px 0px 0px 1px rgba(var(--shadowColorED), 0.45); } .c-ed.--available:not(.disabled) { box-shadow: 0px 1px 4px 2px rgba(var(--shadowColorED), 0.35); } .c-ed.--available:not(.disabled):hover { box-shadow: 0px 1px 5px 3px rgba(var(--shadowColorED), 0.45); } .c-ed.--locked{ background-color: var(--lockedColor); background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTIgMTQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMS44NzUgNy4xMzY5NkMxLjg3NSA2LjMwODU0IDIuNTQ2NTcgNS42MzY5NiAzLjM3NSA1LjYzNjk2SDguNjI1QzkuNDUzNDMgNS42MzY5NiAxMC4xMjUgNi4zMDg1NCAxMC4xMjUgNy4xMzY5NlYxMC44ODdDMTAuMTI1IDExLjcxNTQgOS40NTM0MyAxMi4zODcgOC42MjUgMTIuMzg3SDMuMzc1QzIuNTQ2NTcgMTIuMzg3IDEuODc1IDExLjcxNTQgMS44NzUgMTAuODg3VjcuMTM2OTZaIiBzdHJva2U9IiNBN0I3RDYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTMuMzc1IDUuNjM2OTZWMy43NjE5NkMzLjM3NSAyLjMxMjIyIDQuNTUwMjUgMS4xMzY5NiA2IDEuMTM2OTZDNy40NDk3NSAxLjEzNjk2IDguNjI1IDIuMzEyMjIgOC42MjUgMy43NjE5NlY1LjYzNjk2IiBzdHJva2U9IiNBN0I3RDYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTYgOC42MzY5NkM1Ljg5NjQ1IDguNjM2OTYgNS44MTI1IDguNzIwOTEgNS44MTI1IDguODI0NDZDNS44MTI1IDguOTI4MDIgNS44OTY0NSA5LjAxMTk2IDYgOS4wMTE5NkM2LjEwMzU1IDkuMDExOTYgNi4xODc1IDguOTI4MDIgNi4xODc1IDguODI0NDZDNi4xODc2MyA4Ljc3NDY5IDYuMTY3OTIgOC43MjY5MyA2LjEzMjczIDguNjkxNzNDNi4wOTc1NCA4LjY1NjU0IDYuMDQ5NzcgOC42MzY4MyA2IDguNjM2OTZWOC42MzY5NiIgc3Ryb2tlPSIjQTdCN0Q2IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo="); background-position: center center; background-repeat: no-repeat; background-size: 50%; cursor: not-allowed; opacity: 0.75; } .c-ed.--concept.--in_progress, .c-ed.--concept.--iterated, .c-ed.--concept.--started, .c-ed.--concept.--available{ display: grid; place-items: center; } .c-ed.--concept.--in_progress:after, .c-ed.--concept.--iterated:after, .c-ed.--concept.--started:after, .c-ed.--concept.--available:after { height: 50%; width: 50%; content: ""; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNiAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMi41MDA2N1YxLjUwMDY3IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTEyLjI0MjcgNC4yNTg2NkwxMi45NSAzLjU1MTMzIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE0IDguNTAwNjdIMTUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTIuMjQyNyAxMi43NDMzTDEyLjk1IDEzLjQ1MDciIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMy43NTczOCA0LjI1ODY2TDMuMDUwMDUgMy41NTEzMyIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0yIDguNTAwNjdIMSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0zLjc1NzM4IDEyLjc0MzNMMy4wNTAwNSAxMy40NTA3IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTYgMTEuOTY2VjEzLjQ5OTNDNiAxNC42MDM5IDYuODk1NDMgMTUuNDk5MyA4IDE1LjQ5OTNDOS4xMDQ1NyAxNS40OTkzIDEwIDE0LjYwMzkgMTAgMTMuNDk5M1YxMS45NjYiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTggMTIuNTAwN0MxMC4yMDkxIDEyLjUwMDcgMTIgMTAuNzA5OCAxMiA4LjUwMDY3QzEyIDYuMjkxNTMgMTAuMjA5MSA0LjUwMDY3IDggNC41MDA2N0M1Ljc5MDg2IDQuNTAwNjcgNCA2LjI5MTUzIDQgOC41MDA2N0M0IDEwLjcwOTggNS43OTA4NiAxMi41MDA3IDggMTIuNTAwN1oiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNOCAxNS41MDA3VjE2LjUwMDciIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K"); background-size: 100%; } .c-ed.--concept.--in_progress:after, .c-ed.--concept.--iterated:after, .c-ed.--concept.--started:after { filter: var(--white-filter); } .c-ed.--concept.--available:after { filter: var(--iconFilterEDConcept); } .c-exercise-widget{ display: flex; align-items: center; width: 100%; } .c-exercise-widget.--interactive{ border-radius: 8px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); --tw-shadow: var(--box-shadow-base); --tw-shadow-colored: var(--box-shadow-base); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); padding-top: 16px; padding-bottom: 16px; padding-left: 24px; padding-right: 24px; transition: box-shadow 0.2s ease-out; } .c-exercise-widget.--interactive:hover:not(.--locked){ --tw-shadow: 0px 4px 24px 0px rgba(var(--shadowColorMain), 0.3); --tw-shadow-colored: 0px 4px 24px 0px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .c-exercise-widget.--skinny{ padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; } .c-exercise-widget.--skinny > .c-exercise-icon { height: 24px; width: 24px; margin-right: 12px; } .c-exercise-widget.--skinny > .--info > .--title{ margin-bottom: 0px; font-size: 16px; font-weight: 500; color: var(--textColor2); } .c-exercise-widget.--skinny > .c-icon.--action-icon { height: 16px; width: 16px; margin-left: 8px; } .c-exercise-widget > .c-exercise-icon { height: 64px; width: 64px; margin-right: 16px; align-self: flex-start; } .c-exercise-widget > .c-icon.--action-icon { height: 24px; width: 24px; margin-left: 20px; filter: var(--textColor6-filter); } .c-exercise-widget > .--info{ display: flex; flex-grow: 1; flex-direction: column; align-items: flex-start; align-self: flex-start; } .c-exercise-widget > .--info > .--title{ display: flex; align-items: center; font-size: 20px; font-weight: 600; line-height: 140%; color: var(--textColor1); margin-bottom: 8px; } .c-exercise-widget > .--info > .--title .c-notification-dot{ margin-left: 16px; } .c-exercise-widget > .--info > .--title .--out-of-date{ margin-left: 16px; height: 16px; width: 16px; filter: var(--orange-filter); } .c-exercise-widget > .--info > .--title .--track{ display: flex; flex-shrink: 0; align-items: center; margin-left: 8px; font-size: 14px; font-weight: 400; line-height: 160%; } .c-exercise-widget > .--info > .--title .--track .c-track-icon { height: 32px; width: 32px; margin-left: 6px; margin-right: 6px; } .c-exercise-widget > .--info > .--title .--track .--track-title{ font-weight: 600; color: var(--textColor2); } .c-exercise-widget > .--info > .--data{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .c-exercise-widget > .--info > .--data .c-exercise-status-tag.--completed, .c-exercise-widget > .--info > .--data .c-exercise-status-tag.--published, .c-exercise-widget > .--info > .--data .c-exercise-status-tag.--in-progress{ margin-right: 8px; } .c-exercise-widget > .--info > .--data .--iterations-count{ display: flex; align-items: center; font-weight: 500; line-height: 150%; color: var(--textColor6); } .c-exercise-widget > .--info > .--data .--iterations-count .c-icon { height: 16px; width: 16px; filter: var(--textColor6-filter); margin-right: 6px; } .c-exercise-widget > .--info > .--data .--mentoring-status { height: 24px; width: 24px; filter: var(--textColor6-filter); } .c-exercise-widget > .--info > .--blurb{ margin-top: 12px; overflow: hidden; font-size: 15px; line-height: 150%; color: var(--textColor6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 44px; } .c-exercise-widget.--locked { cursor: pointer; } .c-exercise-widget.--locked:hover:not(.--static){ --tw-shadow: var(--box-shadow-sm); --tw-shadow-colored: var(--box-shadow-sm); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .c-exercise-widget.--locked > .--info > .--title{ color: var(--textColor1); } .c-exercise-widget.--locked > .--info .--difficulty{ display: none; } .c-concepts-map .connection.c-exercise-widget.--locked > .--info .--difficulty { opacity: 0; } .c-exercise-widget.--locked > .c-icon.--action-icon { filter: var(--textColor6-filter); } /* TODO */ .c-exercise-widget.--recommended { border-style: solid; border-color: transparent; /* TODO: decide its lighttheme color. it was white, now it is FAFAFF */ background-image: linear-gradient( var(--backgroundColorA), var(--backgroundColorA) ), linear-gradient(#2200ff, #9e00ff); background-origin: border-box; background-clip: padding-box, border-box; border-width: 2px; box-shadow: 0px 4px 24px rgb(96, 79, 205, 0.4); background-color: var(--backgroundColorF); } .c-exercise-widget.--recommended:hover:not(.--locked) { box-shadow: 0px 4px 24px rgb(96, 79, 205, 0.7); } .c-difficulty-tag{ border-radius: 100px; font-size: 14px; font-weight: 600; line-height: 170%; display: flex; align-items: center; padding-left: 12px; padding-right: 12px; padding-top: 4px; padding-bottom: 4px; border-width: 1px; white-space: nowrap; } .c-difficulty-tag .c-icon { height: 16px; width: 16px; margin-right: 8px; filter: var(--textColor6-filter); } .c-difficulty-tag.--small{ padding-left: 10px; padding-right: 10px; font-size: 13px; line-height: 150%; } .c-difficulty-tag.--compact{ padding-top: 4px; padding-bottom: 4px; padding-left: 12px; padding-right: 12px; line-height: 130%; } .c-difficulty-tag.--practice-mode{ --tw-border-opacity: 1; border-color: rgb(19 11 67 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(92 85 137 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(240 243 249 / var(--tw-text-opacity, 1)); } .c-difficulty-tag.--practice-mode .c-icon { filter: var(--white-filter); } .c-difficulty-tag .icon { height: 8px; width: 8px; margin-right: 8px; border-radius: 1px; } .c-difficulty-tag.--easy .icon{ --tw-bg-opacity: 1; background-color: rgb(95 178 104 / var(--tw-bg-opacity, 1)); } .c-difficulty-tag.--easy{ --tw-border-opacity: 1; border-color: rgb(95 178 104 / var(--tw-border-opacity, 1)); --tw-text-opacity: 1; color: rgb(95 178 104 / var(--tw-text-opacity, 1)); background: var(--backgroundColorEasyTag); } .c-difficulty-tag.--medium .icon{ --tw-bg-opacity: 1; background-color: rgb(165 162 86 / var(--tw-bg-opacity, 1)); } .c-difficulty-tag.--medium{ --tw-border-opacity: 1; border-color: rgb(165 162 86 / var(--tw-border-opacity, 1)); --tw-text-opacity: 1; color: rgb(165 162 86 / var(--tw-text-opacity, 1)); background: var(--backgroundColorMediumTag); } .c-difficulty-tag.--hard .icon{ --tw-bg-opacity: 1; background-color: rgb(203 141 106 / var(--tw-bg-opacity, 1)); } .c-difficulty-tag.--hard{ --tw-border-opacity: 1; border-color: rgb(203 141 106 / var(--tw-border-opacity, 1)); --tw-text-opacity: 1; color: rgb(203 141 106 / var(--tw-text-opacity, 1)); background: var(--backgroundColorMediumTag); } .c-community-solution{ display: flex; flex-direction: column; border-radius: 8px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); --tw-shadow: var(--box-shadow-base); --tw-shadow-colored: var(--box-shadow-base); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); padding-top: 16px; padding-bottom: 16px; padding-left: 24px; padding-right: 24px; } .c-community-solution > .--header{ margin-bottom: 20px; display: flex; align-items: center; } .c-community-solution > .--header > .c-exercise-icon, .c-community-solution > .--header > .c-avatar { height: 48px; width: 48px; margin-right: 16px; } .c-community-solution > .--header > .--info{ flex-grow: 1; } .c-community-solution > .--header > .--info > .--title{ display: flex; font-size: 16px; font-weight: 600; line-height: 150%; color: var(--textColor1); } .c-community-solution > .--header > .--info > .--subtitle{ font-size: 14px; line-height: 160%; color: var(--textColor6); } .c-community-solution > .--header .--out-of-date{ margin-left: 24px; height: 16px; width: 16px; filter: var(--orange-filter); } .c-community-solution > .--header .passed-up-to-date-tests, .c-community-solution > .--header .failed-up-to-date-tests{ margin-left: 16px; height: 16px; width: 16px; } .c-community-solution > .--header .passed-up-to-date-tests { filter: var(--dark-green-filter); } .c-community-solution > .--header .failed-up-to-date-tests { filter: var(--red-filter); } .c-community-solution > .--header .c-iteration-processing-status{ margin-left: 24px; } .c-community-solution > .--header .c-iteration-processing-status .--status{ display: none; } .c-concepts-map .connection.c-community-solution > .--header .c-iteration-processing-status .--status { opacity: 0; } .c-community-solution > pre{ flex-grow: 1; border-radius: 8px; border-width: 1px; border-color: var(--borderColor7); margin-bottom: 16px; overflow: hidden; } .c-community-solution > pre code{ padding: 16px; display: block; height: 216px; text-overflow: ellipsis; overflow: hidden; } .c-community-solution > footer.--footer{ display: flex; align-items: center; line-height: 150%; color: var(--textColor6); } .c-community-solution > footer.--footer > time, .c-community-solution > footer.--footer .not-published{ display: none; } .c-concepts-map .connection.c-community-solution > footer.--footer > time,.c-concepts-map .connection .c-community-solution > footer.--footer .not-published { opacity: 0; } @media (min-width: 640px){ .c-community-solution > footer.--footer > time, .c-community-solution > footer.--footer .not-published{ display: block; } } .c-community-solution > footer.--footer > time, .c-community-solution > footer.--footer .not-published{ margin-right: 24px; flex-grow: 1; line-height: 160%; color: var(--textColor6); } .c-community-solution > footer.--footer > .--counts{ display: flex; -moz-column-gap: 24px; column-gap: 24px; } .c-community-solution > footer.--footer > .--counts > .--count{ display: flex; align-items: center; } .c-community-solution > footer.--footer > .--counts > .--count > .c-icon { height: 18px; width: 18px; margin-right: 8px; filter: var(--textColor6-filter); } .c-community-solution > footer.--footer > .--counts > .--count > .--num{ flex-grow: 1; text-align: right; } .c-community-solutions-list > .c-search-bar input.--search{ margin: 0px !important; } .c-community-solutions-list > .c-search-bar .c-checkbox-wrapper{ margin-right: 16px; } .c-community-solutions-list > .c-search-bar .c-checkbox-wrapper .c-checkbox{ margin-right: 8px; } .c-community-solutions-list > .c-search-bar .c-checkbox-wrapper .row > .c-icon { width: 24px; height: 24px; filter: var(--dark-green-filter); } .c-community-solutions-list > .c-search-bar .c-iteration-processing-status .--status{ display: none; } .c-concepts-map .connection.c-community-solutions-list > .c-search-bar .c-iteration-processing-status .--status { opacity: 0; } .c-community-solutions-list .c-single-select button{ justify-content: space-between; } .c-community-solutions-list .c-single-select button .value{ margin-right: 0px; } .c-community-solutions-list .c-single-select button .c-icon.action-icon{ margin-left: 0px; } .c-exercise-header { /* is it necessary? it creates a 2px top border (site header has 1px bottom-border) while it has a 1px bottom border which looks a bit disturbing */ /* @apply border-t-1 border-color22; */ margin-bottom: 12px; background: var(--exercise-header-gradient); } .c-exercise-header .c-track-breadcrumbs{ margin-bottom: 24px; } .c-exercise-header .c-react-wrapper-student-update-exercise-notice { min-height: 49px; /* Override the bottom border from the header */ margin-top: -8px; margin-bottom: 24px; } .c-exercise-header .update-bar { background: var(--backgroundColorCAlert); text-align: left; border-radius: 8px; border-width: 2px; --tw-border-opacity: 1; border-color: rgb(255 211 143 / var(--tw-border-opacity, 1)); padding-top: 10px; padding-bottom: 10px; padding-left: 24px; padding-right: 24px; font-size: 16px; font-weight: 600; line-height: 160%; color: var(--textColor2); display: flex; width: 100%; align-items: center; } .c-exercise-header .update-bar .c-icon { height: 22px; width: 22px; filter: var(--textColor2-filter); margin-right: 12px; } .c-exercise-header .update-bar .faux-link{ margin-left: auto; display: contents; text-align: right; color: var(--c-prominent-link-color); } @media (min-width: 768px){ .c-exercise-header .update-bar .faux-link{ display: block; } } .c-exercise-header .content{ margin-bottom: 24px; } .c-exercise-header .content .c-exercise-icon { width: 64px; height: 64px; margin-right: 12px; } @media (min-width: 768px){ .c-exercise-header .content .c-exercise-icon{ margin-right: 32px; width: 118px; height: 118px; } } .c-exercise-header .content .info{ flex-grow: 1; } .c-exercise-header .content h1{ font-size: 32px; font-weight: 700; color: var(--textColor1); line-height: 1.25; } @media (min-width: 768px){ .c-exercise-header .content h1{ font-size: 34px; } } @media (min-width: 1024px){ .c-exercise-header .content h1{ font-size: 39px; } } .c-exercise-header .content h1{ margin-bottom: 12px; display: flex; align-items: center; } .c-track-header .c-exercise-header .content h1{ font-size: 28px; } @media (min-width: 768px){ .c-track-header .c-exercise-header .content h1{ font-size: 39px; } } .c-exercise-header .content h1 > .c-icon { height: 32px; width: 32px; margin-left: 16px; } .c-exercise-header .content .tags{ display: flex; align-items: center; } .c-exercise-header .content .tags .c-exercise-status-tag{ margin-right: 12px; } .c-exercise-header .content .decorations { background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTU2IDcyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMTIxIDUzLjk0NEwxMzMuMjIyIDQxLjcyMjFMMTQ1LjQ0NCA1My45NDRMMTMzLjIyMiA2Ni4xNjU4TDEyMSA1My45NDRaIiBmaWxsPSIjNTlEMkFFIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTI4Ljc3OCA1MS43MjE5TDEzOC4yMjIgNDIuMjc3N0MxMzkuNjAyIDQwLjg5NzEgMTQxLjg0MSA0MC44OTcxIDE0My4yMjIgNDIuMjc3N0wxNTIuNjY2IDUxLjcyMTlDMTU0LjA0NiA1My4xMDI1IDE1NC4wNDYgNTUuMzQxMSAxNTIuNjY2IDU2LjcyMTdMMTQzLjIyMiA2Ni4xNjU5QzE0MS44NDEgNjcuNTQ2NSAxMzkuNjAyIDY3LjU0NjUgMTM4LjIyMiA2Ni4xNjU5TDEyOC43NzggNTYuNzIxN0MxMjcuMzk3IDU1LjM0MTEgMTI3LjM5NyA1My4xMDI1IDEyOC43NzggNTEuNzIxOVpNMTMxIDUzLjk0NEMxMzAuODQ2IDU0LjA5NzQgMTMwLjg0NiA1NC4zNDYyIDEzMSA1NC40OTk2TDE0MC40NDQgNjMuOTQzN0MxNDAuNTk3IDY0LjA5NzEgMTQwLjg0NiA2NC4wOTcxIDE0MC45OTkgNjMuOTQzN0wxNTAuNDQ0IDU0LjQ5OTZDMTUwLjU5NyA1NC4zNDYyIDE1MC41OTcgNTQuMDk3NCAxNTAuNDQ0IDUzLjk0NEwxNDAuOTk5IDQ0LjQ5OTlDMTQwLjg0NiA0NC4zNDY1IDE0MC41OTcgNDQuMzQ2NSAxNDAuNDQ0IDQ0LjQ5OTlMMTMxIDUzLjk0NFoiIGZpbGw9IiMzMzM2M0YiLz4KPHBhdGggZD0iTTAgMEgxNy4yODQzVjE3LjI4NDNIMFYwWiIgZmlsbD0iI0ZBRTU0RSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuMDcxMDQgMy45MjgyMkgyMC40MjcxQzIyLjM3OTYgMy45MjgyMiAyMy45NjI1IDUuNTExMDggMjMuOTYyNSA3LjQ2MzY1VjIwLjgxOTdDMjMuOTYyNSAyMi43NzIzIDIyLjM3OTYgMjQuMzU1MSAyMC40MjcxIDI0LjM1NTFINy4wNzEwNEM1LjExODQ4IDI0LjM1NTEgMy41MzU2MSAyMi43NzIzIDMuNTM1NjEgMjAuODE5N1Y3LjQ2MzY1QzMuNTM1NjEgNS41MTEwOSA1LjExODQ4IDMuOTI4MjIgNy4wNzEwNCAzLjkyODIyWk03LjA3MTA0IDcuMDcwODJDNi44NTQwOSA3LjA3MDgyIDYuNjc4MjEgNy4yNDY3IDYuNjc4MjEgNy40NjM2NVYyMC44MTk3QzYuNjc4MjEgMjEuMDM2NiA2Ljg1NDA5IDIxLjIxMjUgNy4wNzEwNCAyMS4yMTI1SDIwLjQyNzFDMjAuNjQ0IDIxLjIxMjUgMjAuODE5OSAyMS4wMzY2IDIwLjgxOTkgMjAuODE5N1Y3LjQ2MzY1QzIwLjgxOTkgNy4yNDY3IDIwLjY0NCA3LjA3MDgyIDIwLjQyNzEgNy4wNzA4Mkg3LjA3MTA0WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNOTUuMDg4MSAxNi41NDRDOTUuMDg4MSAxNy4zOTY3IDk0LjM5NjkgMTguMDg4IDkzLjU0NDEgMTguMDg4QzkyLjY5MTQgMTguMDg4IDkyLjAwMDEgMTcuMzk2NyA5Mi4wMDAxIDE2LjU0NEM5Mi4wMDAxIDE1LjY5MTMgOTIuNjkxNCAxNSA5My41NDQxIDE1Qzk0LjM5NjkgMTUgOTUuMDg4MSAxNS42OTEzIDk1LjA4ODEgMTYuNTQ0WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNOTUuMDg4IDIyLjEwMjVDOTUuMDg4IDIyLjk1NTIgOTQuMzk2NyAyMy42NDY1IDkzLjU0NCAyMy42NDY1QzkyLjY5MTMgMjMuNjQ2NSA5MiAyMi45NTUyIDkyIDIyLjEwMjVDOTIgMjEuMjQ5OCA5Mi42OTEzIDIwLjU1ODUgOTMuNTQ0IDIwLjU1ODVDOTQuMzk2NyAyMC41NTg1IDk1LjA4OCAyMS4yNDk4IDk1LjA4OCAyMi4xMDI1WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNOTUuMDg4IDI3LjY2MDhDOTUuMDg4IDI4LjUxMzYgOTQuMzk2NyAyOS4yMDQ4IDkzLjU0NCAyOS4yMDQ4QzkyLjY5MTMgMjkuMjA0OCA5MiAyOC41MTM2IDkyIDI3LjY2MDhDOTIgMjYuODA4MSA5Mi42OTEzIDI2LjExNjggOTMuNTQ0IDI2LjExNjhDOTQuMzk2NyAyNi4xMTY4IDk1LjA4OCAyNi44MDgxIDk1LjA4OCAyNy42NjA4WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNMTAwLjY0NyAxNi41NDRDMTAwLjY0NyAxNy4zOTY3IDk5Ljk1NTMgMTguMDg4IDk5LjEwMjUgMTguMDg4Qzk4LjI0OTggMTguMDg4IDk3LjU1ODUgMTcuMzk2NyA5Ny41NTg1IDE2LjU0NEM5Ny41NTg1IDE1LjY5MTMgOTguMjQ5OCAxNSA5OS4xMDI1IDE1Qzk5Ljk1NTMgMTUgMTAwLjY0NyAxNS42OTEzIDEwMC42NDcgMTYuNTQ0WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNMTAwLjY0NyAyMi4xMDI1QzEwMC42NDcgMjIuOTU1MiA5OS45NTUzIDIzLjY0NjUgOTkuMTAyNSAyMy42NDY1Qzk4LjI0OTggMjMuNjQ2NSA5Ny41NTg1IDIyLjk1NTIgOTcuNTU4NSAyMi4xMDI1Qzk3LjU1ODUgMjEuMjQ5OCA5OC4yNDk4IDIwLjU1ODUgOTkuMTAyNSAyMC41NTg1Qzk5Ljk1NTMgMjAuNTU4NSAxMDAuNjQ3IDIxLjI0OTggMTAwLjY0NyAyMi4xMDI1WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNMTAwLjY0NyAyNy42NjA4QzEwMC42NDcgMjguNTEzNiA5OS45NTUzIDI5LjIwNDggOTkuMTAyNSAyOS4yMDQ4Qzk4LjI0OTggMjkuMjA0OCA5Ny41NTg1IDI4LjUxMzYgOTcuNTU4NSAyNy42NjA4Qzk3LjU1ODUgMjYuODA4MSA5OC4yNDk4IDI2LjExNjggOTkuMTAyNSAyNi4xMTY4Qzk5Ljk1NTMgMjYuMTE2OCAxMDAuNjQ3IDI2LjgwODEgMTAwLjY0NyAyNy42NjA4WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNMTA2LjIwNSAxNi41NDRDMTA2LjIwNSAxNy4zOTY3IDEwNS41MTQgMTguMDg4IDEwNC42NjEgMTguMDg4QzEwMy44MDggMTguMDg4IDEwMy4xMTcgMTcuMzk2NyAxMDMuMTE3IDE2LjU0NEMxMDMuMTE3IDE1LjY5MTMgMTAzLjgwOCAxNSAxMDQuNjYxIDE1QzEwNS41MTQgMTUgMTA2LjIwNSAxNS42OTEzIDEwNi4yMDUgMTYuNTQ0WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNMTA2LjIwNSAyMi4xMDI1QzEwNi4yMDUgMjIuOTU1MiAxMDUuNTE0IDIzLjY0NjUgMTA0LjY2MSAyMy42NDY1QzEwMy44MDggMjMuNjQ2NSAxMDMuMTE3IDIyLjk1NTIgMTAzLjExNyAyMi4xMDI1QzEwMy4xMTcgMjEuMjQ5OCAxMDMuODA4IDIwLjU1ODUgMTA0LjY2MSAyMC41NTg1QzEwNS41MTQgMjAuNTU4NSAxMDYuMjA1IDIxLjI0OTggMTA2LjIwNSAyMi4xMDI1WiIgZmlsbD0iIzMzMzYzRiIvPgo8cGF0aCBkPSJNMTA2LjIwNSAyNy42NjA4QzEwNi4yMDUgMjguNTEzNiAxMDUuNTE0IDI5LjIwNDggMTA0LjY2MSAyOS4yMDQ4QzEwMy44MDggMjkuMjA0OCAxMDMuMTE3IDI4LjUxMzYgMTAzLjExNyAyNy42NjA4QzEwMy4xMTcgMjYuODA4MSAxMDMuODA4IDI2LjExNjggMTA0LjY2MSAyNi4xMTY4QzEwNS41MTQgMjYuMTE2OCAxMDYuMjA1IDI2LjgwODEgMTA2LjIwNSAyNy42NjA4WiIgZmlsbD0iIzMzMzYzRiIvPgo8L3N2Zz4K"); height: 71px; width: 155px; background-size: 155px; margin-right: 32px; } @media (min-width: 1024px){ .c-exercise-header .content .c-react-wrapper-track-exercise-makers-button{ margin-left: auto; } } .c-exercise-header .navbar{ display: flex; align-items: center; padding-bottom: 12px; } .c-exercise-header .navbar .tabs{ display: flex; align-items: center; flex-grow: 1; overflow-x: auto; } .c-exercise-header .navbar .tabs .c-tab { line-height: 40px; } .c-completed-exercise-heading{ margin-bottom: 24px; display: flex; align-items: center; border-radius: 8px; padding-top: 12px; padding-bottom: 12px; padding-left: 32px; padding-right: 32px; --tw-shadow: var(--box-shadow-lg); --tw-shadow-colored: var(--box-shadow-lg); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); border-width: 2px; --tw-border-opacity: 1; border-color: rgb(67 181 147 / var(--tw-border-opacity, 1)); background: var(--backgroundColorCompletedHeading); } .c-completed-exercise-heading .check-mark-icon { height: 32px; width: 32px; margin-right: 16px; } .c-completed-exercise-heading .text{ font-size: 18px; font-weight: 600; line-height: 150%; color: var(--textColor1); flex-grow: 1; } .c-completed-exercise-heading .c-prominent-link { color: var(--backgroundColorNotificationsUnreadDot); } .c-completed-exercise-heading .c-prominent-link .c-icon { filter: var(--iconFilterNotificationsProminentLink); } /* General */ .c-modal.m-makers .--modal-content { width: 100%; max-width: 810px; padding-left: 32px; padding-right: 32px; padding-top: 24px; padding-bottom: 24px; } .c-modal.m-makers .c-prominent-link{ margin-bottom: 24px; } .c-modal.m-makers .heading{ display: flex; align-items: center; justify-content: space-between; } .c-modal.m-makers .heading h3{ display: flex; align-items: center; font-size: 20px; font-weight: 600; line-height: 130%; color: var(--textColor1); } @media (min-width: 768px){ .c-modal.m-makers .heading h3{ font-size: 24px; } } .c-modal.m-makers .heading h3{ margin-bottom: 12px; } .c-modal.m-makers .heading h3 .count{ border-width: 1px; border-color: var(--borderColor5); border-radius: 100%; margin-left: 12px; padding-left: 12px; padding-right: 12px; padding-top: 4px; padding-bottom: 4px; font-size: 14px; font-weight: 500; line-height: 160%; color: var(--textColor6); } .c-modal.m-makers .heading .subtitle{ font-size: 15px; line-height: 170%; color: var(--textColor6); } .c-modal.m-makers .authors + .contributors{ margin-top: 24px; } .c-modal.m-makers a.maker:hover{ background-color: var(--backgroundColorE); } .c-modal.m-makers .maker{ display: flex; align-items: center; padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; border-bottom-width: 1px; border-color: var(--borderColor7); } .c-modal.m-makers .maker .c-avatar { height: 48px; width: 48px; margin-right: 16px; } .c-modal.m-makers .maker .handle{ flex-grow: 1; font-size: 16px; font-weight: 600; line-height: 170%; color: var(--textColor2); } .c-modal.m-makers .maker > .c-icon, .c-modal.m-makers .maker .faux-icon { height: 16px; width: 16px; margin-left: 48px; } .m-track-welcome-modal.c-modal.--cover { background: var(--modalBackgroundColor); } .m-track-welcome-modal.c-modal.--cover .--modal-container { padding: 50px 0; } .m-track-welcome-modal.c-modal.--cover .wrapper { overflow-y: scroll; max-height: 100%; width: 100%; display: flex; align-items: flex-start; justify-content: center; } .m-track-welcome-modal.c-modal.--cover .--modal-content { padding: 0; max-height: none; margin-top: 20px; margin-bottom: 40px; --tw-bg-opacity: 1; background-color: rgb(var(--backgroundColorA-RGB) / var(--tw-bg-opacity, 1)); padding-top: 40px; padding-bottom: 40px; padding-left: 48px; padding-right: 48px; border-radius: 16px; --tw-shadow: var(--box-shadow-lgZ1); --tw-shadow-colored: var(--box-shadow-lgZ1); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); overflow: hidden; width: 100%; max-width: 1120px; } .m-track-welcome-modal.c-modal.--cover .lhs{ margin-right: 48px; display: flex; width: 50%; flex-grow: 1; flex-direction: column; } .m-track-welcome-modal.c-modal.--cover .lhs h1{ font-size: 32px; font-weight: 700; color: var(--textColor1); line-height: 1.25; } @media (min-width: 768px){ .m-track-welcome-modal.c-modal.--cover .lhs h1{ font-size: 34px; } } @media (min-width: 1024px){ .m-track-welcome-modal.c-modal.--cover .lhs h1{ font-size: 39px; } } .m-track-welcome-modal.c-modal.--cover .lhs h1{ margin-bottom: 12px; } .c-track-header .m-track-welcome-modal.c-modal.--cover .lhs h1{ font-size: 28px; } @media (min-width: 768px){ .c-track-header .m-track-welcome-modal.c-modal.--cover .lhs h1{ font-size: 39px; } } .m-track-welcome-modal.c-modal.--cover .lhs p, .m-track-welcome-modal.c-modal.--cover .lhs li{ font-size: 17px; line-height: 170%; } .m-track-welcome-modal.c-modal.--cover .lhs p strong, .m-track-welcome-modal.c-modal.--cover .lhs li strong{ font-weight: 500; } .m-track-welcome-modal.c-modal.--cover .lhs p a, .m-track-welcome-modal.c-modal.--cover .lhs li a{ font-weight: 600; color: var(--linkColor); } .m-track-welcome-modal.c-modal.--cover .lhs li{ margin-bottom: 2px; } .m-track-welcome-modal.c-modal.--cover .lhs .improvements{ margin-top: 24px; margin-bottom: 32px; } .m-track-welcome-modal.c-modal.--cover .lhs .improvements .improvement{ display: flex; align-items: flex-start; } .m-track-welcome-modal.c-modal.--cover .lhs .improvements .improvement + .improvement{ margin-top: 24px; } .m-track-welcome-modal.c-modal.--cover .lhs .improvements .improvement .c-icon { height: 64px; width: 64px; margin-right: 24px; flex-shrink: 0; } .m-track-welcome-modal.c-modal.--cover .lhs .improvements .improvement h3{ font-size: 18px; font-weight: 600; line-height: 150%; color: var(--textColor1); margin-bottom: 4px; } .m-track-welcome-modal.c-modal.--cover .lhs .improvements .improvement p{ color: var(--textColor3); } .m-track-welcome-modal.c-modal.--cover .rhs{ display: flex; flex-shrink: 0; flex-direction: column; width: 450px; } .m-track-welcome-modal.c-modal.--cover .rhs .video{ margin-bottom: 40px; position: relative; overflow: hidden; border-radius: 8px; padding-bottom: 56.25%; padding-top: 30px; height: 0; } .m-track-welcome-modal.c-modal.--cover .rhs .video iframe, .m-track-welcome-modal.c-modal.--cover .rhs .video object, .m-track-welcome-modal.c-modal.--cover .rhs .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .m-track-welcome-modal.c-modal.--cover .rhs .thank-you{ background-color: var(--backgroundColorD); border-radius: 8px; padding-top: 24px; padding-bottom: 24px; padding-left: 32px; padding-right: 32px; } .m-track-welcome-modal.c-modal.--cover .rhs .thank-you h3{ font-size: 20px; font-weight: 600; line-height: 140%; color: var(--textColor1); margin-bottom: 8px; } .m-track-welcome-modal.c-modal.--cover .rhs .thank-you p{ font-size: 16px; line-height: 150%; } .c-react-wrapper-track-exercise-makers-button{ display: flex; min-height: 36px; } .c-makers-button{ display: flex; align-items: center; justify-content: flex-end; } #page-tracks-build .record-row .record-value .record-element.c-makers-button { justify-content: flex-end; } .c-makers-button .stats{ margin-left: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .c-makers-button .stats .authors{ font-weight: 600; } .c-makers-button .stats .contributors{ font-weight: 500; } .c-code-pane{ display: flex; overflow: auto; } .c-code-pane .--tab-panel{ flex-grow: 1; } .c-code-pane code{ display: flex; padding-top: 8px; padding-bottom: 8px; } .c-code-pane code ul{ width: 100%; } .c-code-pane code li{ display: flex; font-family: Source Code Pro, monospace; font-size: 15px; line-height: 170%; } .c-code-pane code li .idx{ flex-shrink: 0; text-align: center; color: var(--textColor6); -webkit-user-select: none; -moz-user-select: none; user-select: none; width: 64px; } .c-code-pane code li .loc{ flex-grow: 1; padding-right: 24px; } .c-code-pane code li:hover{ background-color: var(--backgroundColorC); cursor: pointer; } /* Taken from https://github.com/lipis/flag-icons */ .fib, .fi { background-size: contain; background-position: 50%; background-repeat: no-repeat; } .fi { position: relative; display: inline-block; } .fi:before { content: " "; } .fi-xx { background-image: url("/assets/flags/4x3/xx-ff7ff76e9dfbef0c9014dddf1374b6afd7ce203d.svg"); } .fi-ad { background-image: url("/assets/flags/4x3/ad-fda6e420e8bc8e377294f8a6e918116e66472693.svg"); } .fi-ae { background-image: url("/assets/flags/4x3/ae-6c96073bc6bc341836ad6cd74657a778640aca93.svg"); } .fi-af { background-image: url("/assets/flags/4x3/af-f96cd09f301948c22648fd732f6cb3c0b89fcedb.svg"); } .fi-ag { background-image: url("/assets/flags/4x3/ag-5baf5bd21e3794b9f242bdf03dd757cd8acac490.svg"); } .fi-ai { background-image: url("/assets/flags/4x3/ai-f49d84b402175d5c8681017d24645efca58bcc55.svg"); } .fi-al { background-image: url("/assets/flags/4x3/al-70ed19699904377788e20d142d67c7380bc95d15.svg"); } .fi-am { background-image: url("/assets/flags/4x3/am-f76ac96d537d87bd73a06e5a1c8db6795c115fef.svg"); } .fi-ao { background-image: url("/assets/flags/4x3/ao-b54df50082a6311e7f1240a5510a45cb660158cc.svg"); } .fi-aq { background-image: url("/assets/flags/4x3/aq-66276aaded45346983d4b2e24f7da2e07a161b4c.svg"); } .fi-ar { background-image: url("/assets/flags/4x3/ar-6b09361bde2ae1af06b3348eb0d8c9402c68a8bf.svg"); } .fi-as { background-image: url("/assets/flags/4x3/as-4691ccb59d0e17404bb67c6fe3f2d1b127433c9b.svg"); } .fi-at { background-image: url("/assets/flags/4x3/at-d2389cae693e58407fed6a6420b4ef8dc294c454.svg"); } .fi-au { background-image: url("/assets/flags/4x3/au-4871ec58de94feb020594ca32debd84b7597ab1c.svg"); } .fi-aw { background-image: url("/assets/flags/4x3/aw-852b4f5c92f053d287c9cbfce4224e1901580889.svg"); } .fi-ax { background-image: url("/assets/flags/4x3/ax-846fc7fcdc7424bcbab691b8b6b6cfb6de045cd5.svg"); } .fi-az { background-image: url("/assets/flags/4x3/az-fbd092491b51967a8e906db1c81fdf97f0711249.svg"); } .fi-ba { background-image: url("/assets/flags/4x3/ba-b10d5781f12373d54497181b5fa23245e9e89049.svg"); } .fi-bb { background-image: url("/assets/flags/4x3/bb-e4d3e6afdb2064f06228b040842bb67854678328.svg"); } .fi-bd { background-image: url("/assets/flags/4x3/bd-8b8a2f0441d09d072afb35fe083541050b36b869.svg"); } .fi-be { background-image: url("/assets/flags/4x3/be-dea9fe090129f33b7f2956b404c0870957fd69f4.svg"); } .fi-bf { background-image: url("/assets/flags/4x3/bf-6ca38d513dc607b4780a6d86dbb84e9c08805290.svg"); } .fi-bg { background-image: url("/assets/flags/4x3/bg-8beddb485d5771bc6f4a517b4041a5b01b882588.svg"); } .fi-bh { background-image: url("/assets/flags/4x3/bh-43c16549510ab5de31e989a297e99536d33d81a4.svg"); } .fi-bi { background-image: url("/assets/flags/4x3/bi-b349ee7c99f0787df5e6b5cb6cd989ea06764b55.svg"); } .fi-bj { background-image: url("/assets/flags/4x3/bj-fcfefc8b786dba7de5b0c97d7c12eb93ebc65f45.svg"); } .fi-bl { background-image: url("/assets/flags/4x3/bl-2058b6fe5e262928d6a529e259e957aa7ac09957.svg"); } .fi-bm { background-image: url("/assets/flags/4x3/bm-25f5bbcf5d1123b68415d0343016cc15f696ee25.svg"); } .fi-bn { background-image: url("/assets/flags/4x3/bn-5de36f85451068a2c0a24eb3e984ee261d35d060.svg"); } .fi-bo { background-image: url("/assets/flags/4x3/bo-b5426fdba15b6e9a1cee782d0ff525e4ce3b4f96.svg"); } .fi-bq { background-image: url("/assets/flags/4x3/bq-964c50933c5c741c10a9024984fbe87fc299ef67.svg"); } .fi-br { background-image: url("/assets/flags/4x3/br-657d0dc2475c002ae3db03dccb0bc3bc9fb241c2.svg"); } .fi-bs { background-image: url("/assets/flags/4x3/bs-c24e8b7ca869f2d80c720f0ccc7b7a8667cf296a.svg"); } .fi-bt { background-image: url("/assets/flags/4x3/bt-a78dc71395629e7a4dd04a75bdc63e5296f74c30.svg"); } .fi-bv { background-image: url("/assets/flags/4x3/bv-1c7cb1579274b1058027857deece545e5319df8a.svg"); } .fi-bw { background-image: url("/assets/flags/4x3/bw-f6791d26da62b59b770e9438faa8ea6ed19248f7.svg"); } .fi-by { background-image: url("/assets/flags/4x3/by-6c3a7c35f33f15a02f34e922685a5e7ec06ead58.svg"); } .fi-bz { background-image: url("/assets/flags/4x3/bz-5ed15077ff1cae53c1acabde32da8eb1bed4bd8c.svg"); } .fi-ca { background-image: url("/assets/flags/4x3/ca-a82eded5bde47d934fd7cf5695f42b011e4e36ff.svg"); } .fi-cc { background-image: url("/assets/flags/4x3/cc-188922723e5197f01b0e8085f63324041f19d50d.svg"); } .fi-cd { background-image: url("/assets/flags/4x3/cd-593a941e63c86ac829c783b013c58acd04d81d83.svg"); } .fi-cf { background-image: url("/assets/flags/4x3/cf-c3cc5aa4af2e07d5049ad17aa23a4a6a82659b1a.svg"); } .fi-cg { background-image: url("/assets/flags/4x3/cg-cf4cbf60e522d0b5e2d49a30874ea111df26bf8d.svg"); } .fi-ch { background-image: url("/assets/flags/4x3/ch-d012b2792dffc21807ead2e6678dd87a3992e428.svg"); } .fi-ci { background-image: url("/assets/flags/4x3/ci-ea940471d5aff2fe37a8896d5f1080c13d36da9f.svg"); } .fi-ck { background-image: url("/assets/flags/4x3/ck-24ea683c71c79202c0f1c558f752cb8aff2290ca.svg"); } .fi-cl { background-image: url("/assets/flags/4x3/cl-260c7853a4893c92883ed0d4ad4fb99a86bc3f51.svg"); } .fi-cm { background-image: url("/assets/flags/4x3/cm-6300107e32d6494f63a19d5726972d5b2992e18b.svg"); } .fi-cn { background-image: url("/assets/flags/4x3/cn-6a132cb7d0c5fb1fd90fc5857a15057dad164fcf.svg"); } .fi-co { background-image: url("/assets/flags/4x3/co-4752b21e87ed006024c0caa870207d86b3459735.svg"); } .fi-cr { background-image: url("/assets/flags/4x3/cr-7745d557c1b113e9e240dba042c2618b9e661926.svg"); } .fi-cu { background-image: url("/assets/flags/4x3/cu-dfa873aa2cd6bdfcec2ef0b5a7cf2850affabacf.svg"); } .fi-cv { background-image: url("/assets/flags/4x3/cv-04d90747e1c892f4830bcc85d7b43484d1fd1b8a.svg"); } .fi-cw { background-image: url("/assets/flags/4x3/cw-329d4825e51527342311776b20ac8ef104f38ccb.svg"); } .fi-cx { background-image: url("/assets/flags/4x3/cx-c24ef4fd9195291c769bb55826a5dc818ea06544.svg"); } .fi-cy { background-image: url("/assets/flags/4x3/cy-8e3f0a54ad09953c82b620b9b0f5585ce897f8c7.svg"); } .fi-cz { background-image: url("/assets/flags/4x3/cz-4b0135f6aeeea3f5d3cf75a388928f2da6d40dfd.svg"); } .fi-de { background-image: url("/assets/flags/4x3/de-a1433065fc0e8a3d14458ab872bdf44f8a1040fa.svg"); } .fi-dj { background-image: url("/assets/flags/4x3/dj-f3a04850f5fe5cb5e32880d840cad60e3400099b.svg"); } .fi-dk { background-image: url("/assets/flags/4x3/dk-2630112e36e79fdc7fa929ad3cced252e87c9ad0.svg"); } .fi-dm { background-image: url("/assets/flags/4x3/dm-0c0976a066098eadf2f83d1e5dc6401142ff258a.svg"); } .fi-do { background-image: url("/assets/flags/4x3/do-5fcad7ae840d3eee31717fcd81771d5eb8f8a0de.svg"); } .fi-dz { background-image: url("/assets/flags/4x3/dz-d381c8108af5e4db1284cdf68d2a0d631c50b2ef.svg"); } .fi-ec { background-image: url("/assets/flags/4x3/ec-64f9c2beab1666446d28fe8ddf848d1124676311.svg"); } .fi-ee { background-image: url("/assets/flags/4x3/ee-cfea0275d18bea4bacd63d7a8060cc445cadcfed.svg"); } .fi-eg { background-image: url("/assets/flags/4x3/eg-e7635d5279572c49d8790e165af6876ccd573caa.svg"); } .fi-eh { background-image: url("/assets/flags/4x3/eh-1d51435c38b93d94eeb931fed25957f764762a38.svg"); } .fi-er { background-image: url("/assets/flags/4x3/er-272218fdcc31617472d0ccd03bab4ed06cc137b9.svg"); } .fi-es { background-image: url("/assets/flags/4x3/es-a9556ab0e13a9fb6f2bed11251c35044864a0b52.svg"); } .fi-et { background-image: url("/assets/flags/4x3/et-38f58a0c8a5392ce6401b6fd4d1648fd2e02c19d.svg"); } .fi-fi { background-image: url("/assets/flags/4x3/fi-4732cbaff1fbebc41b79106ed2f551e7f80b4660.svg"); } .fi-fj { background-image: url("/assets/flags/4x3/fj-e46e447e46f20f8d491ce43f1a0630d38088e46a.svg"); } .fi-fk { background-image: url("/assets/flags/4x3/fk-b64079e4a92c47c4ce4bbaf788f3887f29864f04.svg"); } .fi-fm { background-image: url("/assets/flags/4x3/fm-7787d0a6a406381f8aad880e6b9415d68363d5b8.svg"); } .fi-fo { background-image: url("/assets/flags/4x3/fo-5895b9e9a98741a26f5b13384ac4e123c8a17eb5.svg"); } .fi-fr { background-image: url("/assets/flags/4x3/fr-a761902c65cfdca4058ce0c9d5f8eac667cd6118.svg"); } .fi-ga { background-image: url("/assets/flags/4x3/ga-e6eea23fde7b8bfa239409bcf192cf1f63544c19.svg"); } .fi-gb { background-image: url("/assets/flags/4x3/gb-68b2ead4370e7ab7b70eb6d35a09c31e73c44fd3.svg"); } .fi-gd { background-image: url("/assets/flags/4x3/gd-20f27ab8162c5f7859d41548f3283f0df9647239.svg"); } .fi-ge { background-image: url("/assets/flags/4x3/ge-2beb04c7f6c4df508671df9870e57c9e1adca8c3.svg"); } .fi-gf { background-image: url("/assets/flags/4x3/gf-4f9002995e85d2e41f177eb574889ccf8a95e264.svg"); } .fi-gg { background-image: url("/assets/flags/4x3/gg-a6997d031f28ef69740f3e91c9489c9e2389be13.svg"); } .fi-gh { background-image: url("/assets/flags/4x3/gh-dec4f9f0db2fa74f49aeae76c4d315e59a751a77.svg"); } .fi-gi { background-image: url("/assets/flags/4x3/gi-7fe3cbb49353e03f399f39ae140c7ed62b0657a2.svg"); } .fi-gl { background-image: url("/assets/flags/4x3/gl-33b0d8291ccec8447f8b0596ea318552de2a25da.svg"); } .fi-gm { background-image: url("/assets/flags/4x3/gm-75db5c169b846d76404f7efd7610579a6afcb0f5.svg"); } .fi-gn { background-image: url("/assets/flags/4x3/gn-2f70821159904c5b554234675af85c32e0d8a6f4.svg"); } .fi-gp { background-image: url("/assets/flags/4x3/gp-799e5ebfd6990873d43a06fed291905e1374f416.svg"); } .fi-gq { background-image: url("/assets/flags/4x3/gq-c303f8acf5598ff1d12b801986707f78b67e80be.svg"); } .fi-gr { background-image: url("/assets/flags/4x3/gr-969ee199cd71c64ba163fa84d5707f4d414c4e4d.svg"); } .fi-gs { background-image: url("/assets/flags/4x3/gs-06329dbe817dc8dfe02bf1a04735485c22d8d9b6.svg"); } .fi-gt { background-image: url("/assets/flags/4x3/gt-be4988419417074268363f17d56694eeffca24b6.svg"); } .fi-gu { background-image: url("/assets/flags/4x3/gu-97baf146129ae4cc48b9043388d6fc925f926643.svg"); } .fi-gw { background-image: url("/assets/flags/4x3/gw-62b702458c06e52ad0069f2a8028212e8b1d5586.svg"); } .fi-gy { background-image: url("/assets/flags/4x3/gy-cc0c66f5933f0fe805a9dbc675c0d9ce77637a95.svg"); } .fi-hk { background-image: url("/assets/flags/4x3/hk-425047b23c1dc986434ab563f7301a6de91f2d7c.svg"); } .fi-hm { background-image: url("/assets/flags/4x3/hm-6fd2e78a3edf7d850406b6612de5a87d737b2bc3.svg"); } .fi-hn { background-image: url("/assets/flags/4x3/hn-168dcb4e5c9ff29b315f8b791db28e90544911d0.svg"); } .fi-hr { background-image: url("/assets/flags/4x3/hr-11f960389478fc06a9620d75474f72def13ce6fd.svg"); } .fi-ht { background-image: url("/assets/flags/4x3/ht-5a851f9c5f95f491d1e7b716dabb8ba3bf3f7296.svg"); } .fi-hu { background-image: url("/assets/flags/4x3/hu-777b844e3522fddba17673a45ada138351fc6f62.svg"); } .fi-id { background-image: url("/assets/flags/4x3/id-3ce40942dbc41556fd6f97f7f5b3524579d47392.svg"); } .fi-ie { background-image: url("/assets/flags/4x3/ie-713af507e8eb25f1ab4d1a98527e30a30772aa8d.svg"); } .fi-il { background-image: url("/assets/flags/4x3/il-de2bce1dd55ad0d32c41e030b4ada53f99662d2a.svg"); } .fi-im { background-image: url("/assets/flags/4x3/im-877686857b847d7ed829be927b07570a55a8f1d2.svg"); } .fi-in { background-image: url("/assets/flags/4x3/in-57e2b9fc27073c32d59d7f96b9964c0e67e3e9be.svg"); } .fi-io { background-image: url("/assets/flags/4x3/io-4f4e7858dfcc90f301651be28470a9025e59fa29.svg"); } .fi-iq { background-image: url("/assets/flags/4x3/iq-dab1fe22ec3ff7bc8040ca0ff9851cf15cc9409b.svg"); } .fi-ir { background-image: url("/assets/flags/4x3/ir-120ea56a077f9a4c1aa27698b31699e0baf06e35.svg"); } .fi-is { background-image: url("/assets/flags/4x3/is-f73006bdbef41c86df6dc5bff074179e140b3b29.svg"); } .fi-it { background-image: url("/assets/flags/4x3/it-25ecff80eb26ef79709ab7278eb3991ac8cc2734.svg"); } .fi-je { background-image: url("/assets/flags/4x3/je-978aa85267075987e2687f46d408d681abb09ae0.svg"); } .fi-jm { background-image: url("/assets/flags/4x3/jm-07d3a1ea7281784bdef4ee7b2cbfb6ad99c465dc.svg"); } .fi-jo { background-image: url("/assets/flags/4x3/jo-6ef6670363fb2040b1193f8ff1e4fae361c88b4f.svg"); } .fi-jp { background-image: url("/assets/flags/4x3/jp-b5f2d0d5127becf2f525f44adb8ff9f8c8d67150.svg"); } .fi-ke { background-image: url("/assets/flags/4x3/ke-bf3b36e1b1f97788ef8eec964a75d9acad6f1d5e.svg"); } .fi-kg { background-image: url("/assets/flags/4x3/kg-e3ac6ee66588f5a5e6b20224975049060664d94f.svg"); } .fi-kh { background-image: url("/assets/flags/4x3/kh-536132d05a0950d70bffd8c0b3b6933d52b4a3ca.svg"); } .fi-ki { background-image: url("/assets/flags/4x3/ki-ebf803314da2f75a8606b566b68482dee8720879.svg"); } .fi-km { background-image: url("/assets/flags/4x3/km-2074bfb0f6d217758956a10c9a1bf08d9bb344d2.svg"); } .fi-kn { background-image: url("/assets/flags/4x3/kn-ca9fb4cbea3a70549c35ff17873e9c766b0b4451.svg"); } .fi-kp { background-image: url("/assets/flags/4x3/kp-29069cae27bb17cd433790a61147c1131b23fbb5.svg"); } .fi-kr { background-image: url("/assets/flags/4x3/kr-324bf7929e7587d06b5b96cd9455e6298515986e.svg"); } .fi-kw { background-image: url("/assets/flags/4x3/kw-c3a1bf3567379411828265bbf66d11c7645df9f7.svg"); } .fi-ky { background-image: url("/assets/flags/4x3/ky-914fad053f1fbf76c8ba3b2ed32b33011141bc3c.svg"); } .fi-kz { background-image: url("/assets/flags/4x3/kz-9372818ae0fa472323fd8c907272f06d9b42b137.svg"); } .fi-la { background-image: url("/assets/flags/4x3/la-d9794a33eb9739183cf93f7ef02f36497b1631c1.svg"); } .fi-lb { background-image: url("/assets/flags/4x3/lb-ed981a9dfddc9070ecfeb3b62f2ffc7401d742ab.svg"); } .fi-lc { background-image: url("/assets/flags/4x3/lc-985bad06de71f1b66457f3c26b5268d65649b180.svg"); } .fi-li { background-image: url("/assets/flags/4x3/li-47b4a58119bc029d6c14e6fa80d4229e75f82d69.svg"); } .fi-lk { background-image: url("/assets/flags/4x3/lk-89877bbff0a5214c0f408e83e770c8c2f31ebb1f.svg"); } .fi-lr { background-image: url("/assets/flags/4x3/lr-d97dda1165a9b8c3c8cc2e863b21284ed5466f9e.svg"); } .fi-ls { background-image: url("/assets/flags/4x3/ls-5abc150856676908c993d9db8c294c01ade669d5.svg"); } .fi-lt { background-image: url("/assets/flags/4x3/lt-7cc5b0f52d6687b8a81fde47b5c9198555c2b157.svg"); } .fi-lu { background-image: url("/assets/flags/4x3/lu-6cafb0eeab199a80c6f07328769c161beb131c11.svg"); } .fi-lv { background-image: url("/assets/flags/4x3/lv-74117638c933573029e067ae705b07229a626aa2.svg"); } .fi-ly { background-image: url("/assets/flags/4x3/ly-331585b54676c1c21db9d73019d897a785211492.svg"); } .fi-ma { background-image: url("/assets/flags/4x3/ma-f0bdec701cfac27e1704304d5bb954559e4220a6.svg"); } .fi-mc { background-image: url("/assets/flags/4x3/mc-30153462e90b7ea0a5f9257be9fc455678305c41.svg"); } .fi-md { background-image: url("/assets/flags/4x3/md-44ada1dd1b36659419c92375c8cea5bdcf07b8c9.svg"); } .fi-me { background-image: url("/assets/flags/4x3/me-ee01f37d6098b94ca82559637361006b926190b5.svg"); } .fi-mf { background-image: url("/assets/flags/4x3/mf-61c320befde3e41973f1166c9f695aff72388378.svg"); } .fi-mg { background-image: url("/assets/flags/4x3/mg-89b24baa95888689630588450fced10e448a44df.svg"); } .fi-mh { background-image: url("/assets/flags/4x3/mh-c730c5bad26d9342689e9b504d3a0fb9fe2e2e94.svg"); } .fi-mk { background-image: url("/assets/flags/4x3/mk-c5f84605ef0a3e477378444625f4ac4cd8c320c0.svg"); } .fi-ml { background-image: url("/assets/flags/4x3/ml-890486cc562661e650acd1ff0f8110076940034a.svg"); } .fi-mm { background-image: url("/assets/flags/4x3/mm-bbb573afc7695ec08ac91f3bdc8f11bb5843ed28.svg"); } .fi-mn { background-image: url("/assets/flags/4x3/mn-8f55a8fdc7f0a11827794cd0eafcf093a72b0251.svg"); } .fi-mo { background-image: url("/assets/flags/4x3/mo-16f9e753f5cf5cc0dbe9b6e6cad63d0a953345a8.svg"); } .fi-mp { background-image: url("/assets/flags/4x3/mp-d793eb48bc6eeb21b9b2226c43fa8d739d6c189e.svg"); } .fi-mq { background-image: url("/assets/flags/4x3/mq-e9f38c0867913aa27050e33d4e4f1a15c82f1b9e.svg"); } .fi-mr { background-image: url("/assets/flags/4x3/mr-e27b50f89dda0cc7441569e78dada0ddd080a0ab.svg"); } .fi-ms { background-image: url("/assets/flags/4x3/ms-7e2ef8468bb87c32263edc5058e4cbbdb13475ef.svg"); } .fi-mt { background-image: url("/assets/flags/4x3/mt-08add1f35d014f6e0d6598adbba4cb149b1d61c1.svg"); } .fi-mu { background-image: url("/assets/flags/4x3/mu-d535b4283aec444834d151394fa28cfb716ee8ec.svg"); } .fi-mv { background-image: url("/assets/flags/4x3/mv-87e3241edb6b67c19138bf1e962f4155b9e5ffc8.svg"); } .fi-mw { background-image: url("/assets/flags/4x3/mw-57400eb9812e9370d8f26b1e0b472fc487a424ac.svg"); } .fi-mx { background-image: url("/assets/flags/4x3/mx-f3f45a3cf0ba07dc45acbe79fdca584f73e2f14d.svg"); } .fi-my { background-image: url("/assets/flags/4x3/my-e00308d3a370966f1bd36b75139d6867aaafa090.svg"); } .fi-mz { background-image: url("/assets/flags/4x3/mz-f7be4ee78e331540ee252674f36e25e7e1b1114f.svg"); } .fi-na { background-image: url("/assets/flags/4x3/na-98a8c65dc6e471d35206b220d88c5704c80aacf4.svg"); } .fi-nc { background-image: url("/assets/flags/4x3/nc-700e44d1734e11fa5b268e9565aee27f3f90bf1f.svg"); } .fi-ne { background-image: url("/assets/flags/4x3/ne-79da6ccb64d61a7d6624945834e4f0f1edc04040.svg"); } .fi-nf { background-image: url("/assets/flags/4x3/nf-5199669f80dba44a059c04ba99657b2a999aff62.svg"); } .fi-ng { background-image: url("/assets/flags/4x3/ng-591cf324ce15830a8ae4b73c11f51797706ba65f.svg"); } .fi-ni { background-image: url("/assets/flags/4x3/ni-45a2de218583d09c04a3a1230247080cbc65b2fe.svg"); } .fi-nl { background-image: url("/assets/flags/4x3/nl-26a13c58eb6166dc9688c4ef53290539fdc135ad.svg"); } .fi-no { background-image: url("/assets/flags/4x3/no-c2ab5ac79474bf31976cef328f5880ab07d0654f.svg"); } .fi-np { background-image: url("/assets/flags/4x3/np-17b0f05815ccde25cf64b8fe3fcbec62582794b9.svg"); } .fi-nr { background-image: url("/assets/flags/4x3/nr-c8e9ee87137545e4815f50258e523d692e7a53e0.svg"); } .fi-nu { background-image: url("/assets/flags/4x3/nu-fa9f0df9095bbb865441f21cb37db3e32a808034.svg"); } .fi-nz { background-image: url("/assets/flags/4x3/nz-92e54537569aa464f3b6e40f37bca5dc405d15a3.svg"); } .fi-om { background-image: url("/assets/flags/4x3/om-88b00a4cdff12241e84a02a2bce9134f0494254d.svg"); } .fi-pa { background-image: url("/assets/flags/4x3/pa-2363815abfbf517ae3eb8b5514b893bfb73c4217.svg"); } .fi-pe { background-image: url("/assets/flags/4x3/pe-93657feec944e2c2ac966a44db0efcbc7814bf6a.svg"); } .fi-pf { background-image: url("/assets/flags/4x3/pf-99049750418f79cad7be71588920bef2cf4d3703.svg"); } .fi-pg { background-image: url("/assets/flags/4x3/pg-8542bcbd9caf07d474f5079322b6ec310f8ffa4c.svg"); } .fi-ph { background-image: url("/assets/flags/4x3/ph-583d556247393cfe465b3e56e333f95b3ac94bc5.svg"); } .fi-pk { background-image: url("/assets/flags/4x3/pk-7e51d4c079a35c89fe112a9bfd0d89bf5372012b.svg"); } .fi-pl { background-image: url("/assets/flags/4x3/pl-503ba2fb9621f21207a1ad1f34cec04100c193e0.svg"); } .fi-pm { background-image: url("/assets/flags/4x3/pm-a263945c83626df6ee62d7ef735df80e99f56d51.svg"); } .fi-pn { background-image: url("/assets/flags/4x3/pn-864c79deef986014235473281afb4eee5a3218e8.svg"); } .fi-pr { background-image: url("/assets/flags/4x3/pr-8facaae5657287077e1086caf004474be2039ad4.svg"); } .fi-ps { background-image: url("/assets/flags/4x3/ps-9cc092024d1d66210757b9ed4619da50ed14831c.svg"); } .fi-pt { background-image: url("/assets/flags/4x3/pt-8f299124b834e3d7357d1bcb62cded94720edd8a.svg"); } .fi-pw { background-image: url("/assets/flags/4x3/pw-79c0bf1be51c95cefe11d525ab7ee3663a4a7120.svg"); } .fi-py { background-image: url("/assets/flags/4x3/py-5cb3be1f6c0efbdd342402ac36609d1bdf8e381d.svg"); } .fi-qa { background-image: url("/assets/flags/4x3/qa-133f1f2172ee20c907abd2e51428804951006fe6.svg"); } .fi-re { background-image: url("/assets/flags/4x3/re-06af799d461d62294ce5de2ee3d47f651d3e4c0b.svg"); } .fi-ro { background-image: url("/assets/flags/4x3/ro-3d213051140fd4c1174c5afb893d141395aff0dd.svg"); } .fi-rs { background-image: url("/assets/flags/4x3/rs-829f362ca1000d23bfa26c185b47f1d613b70248.svg"); } .fi-ru { background-image: url("/assets/flags/4x3/ru-2224f01348b870c064900bce135bfd7888a5b745.svg"); } .fi-rw { background-image: url("/assets/flags/4x3/rw-2c40f69375cec2e2d819dc9bdcfac0375d275403.svg"); } .fi-sa { background-image: url("/assets/flags/4x3/sa-989a122aacd051689a6da11724e1e7a140854c99.svg"); } .fi-sb { background-image: url("/assets/flags/4x3/sb-4d59dc49202f85d2145f3c50f25f939770a529ac.svg"); } .fi-sc { background-image: url("/assets/flags/4x3/sc-822ae93b043d373b11d7bcb49431da4b5a7caa5a.svg"); } .fi-sd { background-image: url("/assets/flags/4x3/sd-ee7962ceb78cf5493d0289827367769c7181106a.svg"); } .fi-se { background-image: url("/assets/flags/4x3/se-5f252512649b05a15be68adc7075b629bc429297.svg"); } .fi-sg { background-image: url("/assets/flags/4x3/sg-70bf514a88109f12187bd3867e2a07ff9e012d0f.svg"); } .fi-sh { background-image: url("/assets/flags/4x3/sh-fdc42ad13d1dae68c4928d756508daf2853849fd.svg"); } .fi-si { background-image: url("/assets/flags/4x3/si-72831b96ecf983bfaa11d32e419893ff42077979.svg"); } .fi-sj { background-image: url("/assets/flags/4x3/sj-db573ced774315e13faafcd08b6bd2c3db84936e.svg"); } .fi-sk { background-image: url("/assets/flags/4x3/sk-9a4fb2c97c245e3fb49a68ac54819bbf25c7f819.svg"); } .fi-sl { background-image: url("/assets/flags/4x3/sl-9802244ff0ae58020eefd38f32154901937b296c.svg"); } .fi-sm { background-image: url("/assets/flags/4x3/sm-bd30d883ae3a64213979077e54b11cf9d0259635.svg"); } .fi-sn { background-image: url("/assets/flags/4x3/sn-0e9ed71535c9ffb41845bde0436c25a911804a4b.svg"); } .fi-so { background-image: url("/assets/flags/4x3/so-ce6cc351468e4da1374300c6a3c206b85923ad12.svg"); } .fi-sr { background-image: url("/assets/flags/4x3/sr-8179259a23128dcd749986696895eeec222a8039.svg"); } .fi-ss { background-image: url("/assets/flags/4x3/ss-468ba0436e1d257af5bbdf3e040a6938633a576a.svg"); } .fi-st { background-image: url("/assets/flags/4x3/st-c1366fb3ce12bdc98b66dccc5cd3b692f31c85a7.svg"); } .fi-sv { background-image: url("/assets/flags/4x3/sv-e275d6cf104c23ee7eb47b5f13fddce17280f40b.svg"); } .fi-sx { background-image: url("/assets/flags/4x3/sx-c25d9d532f0ca3771be811ff7dc184c1584d3549.svg"); } .fi-sy { background-image: url("/assets/flags/4x3/sy-8d9f5a4dc8c52af7ac74a4ac5b7ae37a980637ba.svg"); } .fi-sz { background-image: url("/assets/flags/4x3/sz-1d50c9bb15670a8ba7b9a25cb1e6e98046ef8321.svg"); } .fi-tc { background-image: url("/assets/flags/4x3/tc-e449a5790e6bb0009209fd0abb49a2ae8609a4a8.svg"); } .fi-td { background-image: url("/assets/flags/4x3/td-a2958597fd3ed91c1e82d5bb1814c1e5614ef1a2.svg"); } .fi-tf { background-image: url("/assets/flags/4x3/tf-62811b84acaa1ae5224f890d1ba5b4f715b9d3a4.svg"); } .fi-tg { background-image: url("/assets/flags/4x3/tg-c97e816f5f94696bcaadd882c16f1346e7288b5d.svg"); } .fi-th { background-image: url("/assets/flags/4x3/th-cc941547c987ff2a0de3c2429094e2471b003eeb.svg"); } .fi-tj { background-image: url("/assets/flags/4x3/tj-015b8c309abad3d137f981235ff7fca209d013ed.svg"); } .fi-tk { background-image: url("/assets/flags/4x3/tk-6c8e901f6ad9748bb7d003b93737ef0f5c48e86e.svg"); } .fi-tl { background-image: url("/assets/flags/4x3/tl-df8bac3bd817f3d88b428fd8c6af6ea509d0982c.svg"); } .fi-tm { background-image: url("/assets/flags/4x3/tm-2fb2ef33ede0669bd61f4a147fa6e3e63536d9a5.svg"); } .fi-tn { background-image: url("/assets/flags/4x3/tn-d2d844c1e253750ea48d3b40b13936955d6c0904.svg"); } .fi-to { background-image: url("/assets/flags/4x3/to-3d10fac500e9aa8376a16c5d6ee8cfc2ca17b7be.svg"); } .fi-tr { background-image: url("/assets/flags/4x3/tr-2f8e068b107feda4f9264f6996ac604991031257.svg"); } .fi-tt { background-image: url("/assets/flags/4x3/tt-785363a21ba2ef7fe412a9dfce3278f2a0562473.svg"); } .fi-tv { background-image: url("/assets/flags/4x3/tv-c098f01dbf6a2a9d4fad2a24948ffa4667f64714.svg"); } .fi-tw { background-image: url("/assets/flags/4x3/tw-fa4464225aa8743553d66713d8f4ef4a206c2554.svg"); } .fi-tz { background-image: url("/assets/flags/4x3/tz-ef5bf7ab1fe0f2731e41cf36063c52c6c7133483.svg"); } .fi-ua { background-image: url("/assets/flags/4x3/ua-a957f8e2c5803d3f5f41ce7adc30aa3ddc628d1b.svg"); } .fi-ug { background-image: url("/assets/flags/4x3/ug-b82447090a21429812d0ce17f99f2e259dca0171.svg"); } .fi-um { background-image: url("/assets/flags/4x3/um-34e8aade342a34673fe79c1c4e9223522dd16926.svg"); } .fi-us { background-image: url("/assets/flags/4x3/us-211873c57051bde2c618c07d5d603cec6bd7e2b6.svg"); } .fi-uy { background-image: url("/assets/flags/4x3/uy-3219304ac6d644da6ca0b0684f0a33c4e462056c.svg"); } .fi-uz { background-image: url("/assets/flags/4x3/uz-41e7c385c013d1736c5e4007521479768a78f48b.svg"); } .fi-va { background-image: url("/assets/flags/4x3/va-64e0c25f6a49aaac72eb86f765ca7f9448d0d5a5.svg"); } .fi-vc { background-image: url("/assets/flags/4x3/vc-3daf8af8f8e515a9c22862774f0776a90179d1e5.svg"); } .fi-ve { background-image: url("/assets/flags/4x3/ve-dc1fdcd39307802e52f534495cdb2d554bb20ec6.svg"); } .fi-vg { background-image: url("/assets/flags/4x3/vg-5a32b58a9ffc2d9141ad8bd726c21c90bf785418.svg"); } .fi-vi { background-image: url("/assets/flags/4x3/vi-d791e8929239675983aed389af04f53ab7733ca9.svg"); } .fi-vn { background-image: url("/assets/flags/4x3/vn-a03cc2bbbaeaff6e0ce01bda5d400ba4b5050df3.svg"); } .fi-vu { background-image: url("/assets/flags/4x3/vu-1d2142dc354dd08864f9ad02905c73ac208070f5.svg"); } .fi-wf { background-image: url("/assets/flags/4x3/wf-8c095507531942db20a06a7e86c0b662ed37b654.svg"); } .fi-ws { background-image: url("/assets/flags/4x3/ws-2eae236dc7e3f94e684ebd1ece13eae0264b14dd.svg"); } .fi-ye { background-image: url("/assets/flags/4x3/ye-f3ea043e6ffdb509ead965c7274e402732ca8b1c.svg"); } .fi-yt { background-image: url("/assets/flags/4x3/yt-ebe64ab2d47d5ee9914ae7ac04b611be61e8b0cf.svg"); } .fi-za { background-image: url("/assets/flags/4x3/za-5f5fee311f77ebd23e42ca61e65f46d36e41262f.svg"); } .fi-zm { background-image: url("/assets/flags/4x3/zm-94c7a9194d5c9d6a3988d0e39260db5250808787.svg"); } .fi-zw { background-image: url("/assets/flags/4x3/zw-73fbf2ae5ef770f43116f5896ac8790470003162.svg"); } .fi-arab { background-image: url("/assets/flags/4x3/arab-ef41bf3858540cfbf1d27887e65ad5b0aab696be.svg"); } .fi-cefta { background-image: url("/assets/flags/4x3/cefta-4565ebe8744b9a971911c9bd561167564eaf5b0a.svg"); } .fi-cp { background-image: url("/assets/flags/4x3/cp-a83448180cefc745b4fb2e51fffd49abdc9cab7d.svg"); } .fi-dg { background-image: url("/assets/flags/4x3/dg-8c7a67f850e6ae9950d151a9a632bcc20af64f96.svg"); } .fi-eac { background-image: url("/assets/flags/4x3/eac-34028b15ba905187aed778bd66aa333fa3739962.svg"); } .fi-es-ct { background-image: url("/assets/flags/4x3/es-ct-b15eacabc4aeb6f087eda85077a4b3aab72c1d89.svg"); } .fi-es-ga { background-image: url("/assets/flags/4x3/es-ga-8b6f1459824db65ccd4198ddcb4bef8871316721.svg"); } .fi-es-pv { background-image: url("/assets/flags/4x3/es-pv-c245873481535b31dc699608c0d53f130103045a.svg"); } .fi-eu { background-image: url("/assets/flags/4x3/eu-ebbe870f77114dc2a12e385c56a5a7c993b3f22d.svg"); } .fi-gb-eng { background-image: url("/assets/flags/4x3/gb-eng-c859dccfd9e13e47a27a025c3d5dac3afff178e8.svg"); } .fi-gb-nir { background-image: url("/assets/flags/4x3/gb-nir-71d09345d3732bebe9a22bb38f57c99dcd7b356d.svg"); } .fi-gb-sct { background-image: url("/assets/flags/4x3/gb-sct-2983601a486ae876c3c2d503290a78f3985ae40c.svg"); } .fi-gb-wls { background-image: url("/assets/flags/4x3/gb-wls-fbdcd2caa92c126540060caa3acc053456b1bf09.svg"); } .fi-ic { background-image: url("/assets/flags/4x3/ic-0b610f9c4fee601210ff4fca7fefaceed4acc77d.svg"); } .fi-pc { background-image: url("/assets/flags/4x3/pc-bb3ccb48800ffb89ded545d4226bba44b140b5fc.svg"); } .fi-sh-ac { background-image: url("/assets/flags/4x3/sh-ac-7698d2b882d8a3236247bca22815b378a5f37850.svg"); } .fi-sh-hl { background-image: url("/assets/flags/4x3/sh-hl-dd63e57f0082f080908d0c5c17c102283e48fe21.svg"); } .fi-sh-ta { background-image: url("/assets/flags/4x3/sh-ta-47d6166ede4d4e6c4e34baa797af784cb90560af.svg"); } .fi-un { background-image: url("/assets/flags/4x3/un-a5fc2bcd01ce1ea48581a9abacd0d3832e7c4169.svg"); } .fi-xk { background-image: url("/assets/flags/4x3/xk-cf87449a1812e7f3fc32081899e752141b1fa8d8.svg"); }