/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/* Common */
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
:root {
--ifm-color-scheme: light;
/* Colors. */
--ifm-dark-value: 10%;
--ifm-darker-value: 15%;
--ifm-darkest-value: 30%;
--ifm-light-value: 15%;
--ifm-lighter-value: 30%;
--ifm-lightest-value: 50%;
/*
This seems like a lot, but we want to ensure enough contrast.
Goal is to have a min score of 3 on https://www.myndex.com/APCA/fullmatrix
For fontWeight 400 + score 3, the cell must show a value < 16px (fontsize we use in places like alerts)
See also https://github.com/facebookincubator/infima/issues/55#issuecomment-884023075
*/
--ifm-contrast-background-value: 90%;
--ifm-contrast-foreground-value: 70%;
/* Using slightly different values for dark mode */
--ifm-contrast-background-dark-value: 70%;
--ifm-contrast-foreground-dark-value: 90%;
--ifm-color-primary: #3578e5;
--ifm-color-secondary: #ebedf0;
--ifm-color-success: #00a400;
--ifm-color-info: #54c7ec;
--ifm-color-warning: #ffba00;
--ifm-color-danger: #fa383e;
--ifm-color-primary-dark: rgb(48, 108, 206);
--ifm-color-primary-darker: rgb(45, 102, 195);
--ifm-color-primary-darkest: rgb(37, 84, 160);
--ifm-color-primary-light: rgb(83, 140, 233);
--ifm-color-primary-lighter: rgb(114, 161, 237);
--ifm-color-primary-lightest: rgb(154, 188, 242);
--ifm-color-primary-contrast-background: rgb(235, 242, 252);
--ifm-color-primary-contrast-foreground: rgb(16, 36, 69);
--ifm-color-secondary-dark: rgb(212, 213, 216);
--ifm-color-secondary-darker: rgb(200, 201, 204);
--ifm-color-secondary-darkest: rgb(164, 166, 168);
--ifm-color-secondary-light: rgb(238, 240, 242);
--ifm-color-secondary-lighter: rgb(241, 242, 245);
--ifm-color-secondary-lightest: rgb(245, 246, 248);
--ifm-color-secondary-contrast-background: rgb(253, 253, 254);
--ifm-color-secondary-contrast-foreground: rgb(71, 71, 72);
--ifm-color-success-dark: rgb(0, 148, 0);
--ifm-color-success-darker: rgb(0, 139, 0);
--ifm-color-success-darkest: rgb(0, 115, 0);
--ifm-color-success-light: rgb(38, 178, 38);
--ifm-color-success-lighter: rgb(77, 191, 77);
--ifm-color-success-lightest: rgb(128, 210, 128);
--ifm-color-success-contrast-background: rgb(230, 246, 230);
--ifm-color-success-contrast-foreground: rgb(0, 49, 0);
--ifm-color-info-dark: rgb(76, 179, 212);
--ifm-color-info-darker: rgb(71, 169, 201);
--ifm-color-info-darkest: rgb(59, 139, 165);
--ifm-color-info-light: rgb(110, 207, 239);
--ifm-color-info-lighter: rgb(135, 216, 242);
--ifm-color-info-lightest: rgb(170, 227, 246);
--ifm-color-info-contrast-background: rgb(238, 249, 253);
--ifm-color-info-contrast-foreground: rgb(25, 60, 71);
--ifm-color-warning-dark: rgb(230, 167, 0);
--ifm-color-warning-darker: rgb(217, 158, 0);
--ifm-color-warning-darkest: rgb(179, 130, 0);
--ifm-color-warning-light: rgb(255, 196, 38);
--ifm-color-warning-lighter: rgb(255, 207, 77);
--ifm-color-warning-lightest: rgb(255, 221, 128);
--ifm-color-warning-contrast-background: rgb(255, 248, 230);
--ifm-color-warning-contrast-foreground: rgb(77, 56, 0);
--ifm-color-danger-dark: rgb(225, 50, 56);
--ifm-color-danger-darker: rgb(213, 48, 53);
--ifm-color-danger-darkest: rgb(175, 39, 43);
--ifm-color-danger-light: rgb(251, 86, 91);
--ifm-color-danger-lighter: rgb(251, 116, 120);
--ifm-color-danger-lightest: rgb(253, 156, 159);
--ifm-color-danger-contrast-background: rgb(255, 235, 236);
--ifm-color-danger-contrast-foreground: rgb(75, 17, 19);
--ifm-color-white: #fff;
--ifm-color-black: #000;
--ifm-color-gray-0: var(--ifm-color-white);
--ifm-color-gray-100: #f5f6f7;
--ifm-color-gray-200: #ebedf0;
--ifm-color-gray-300: #dadde1;
--ifm-color-gray-400: #ccd0d5;
--ifm-color-gray-500: #bec3c9;
--ifm-color-gray-600: #8d949e;
--ifm-color-gray-700: #606770;
--ifm-color-gray-800: #444950;
--ifm-color-gray-900: #1c1e21;
--ifm-color-gray-1000: var(--ifm-color-black);
--ifm-color-emphasis-0: var(--ifm-color-gray-0);
--ifm-color-emphasis-100: var(--ifm-color-gray-100);
--ifm-color-emphasis-200: var(--ifm-color-gray-200);
--ifm-color-emphasis-300: var(--ifm-color-gray-300);
--ifm-color-emphasis-400: var(--ifm-color-gray-400);
--ifm-color-emphasis-500: var(--ifm-color-gray-500);
--ifm-color-emphasis-600: var(--ifm-color-gray-600);
--ifm-color-emphasis-700: var(--ifm-color-gray-700);
--ifm-color-emphasis-800: var(--ifm-color-gray-800);
--ifm-color-emphasis-900: var(--ifm-color-gray-900);
--ifm-color-emphasis-1000: var(--ifm-color-gray-1000);
/* Base. */
--ifm-color-content: var(--ifm-color-emphasis-900);
--ifm-color-content-inverse: var(--ifm-color-emphasis-0);
--ifm-color-content-secondary: #525860;
--ifm-background-color: transparent; /* Body's background. */
--ifm-background-surface-color: var(--ifm-color-content-inverse);
--ifm-global-border-width: 1px;
--ifm-global-radius: 0.4rem;
--ifm-hover-overlay: rgba(0, 0, 0, 0.05);
/* Typography. */
--ifm-font-color-base: var(--ifm-color-content);
--ifm-font-color-base-inverse: var(--ifm-color-content-inverse);
--ifm-font-color-secondary: var(--ifm-color-content-secondary);
--ifm-font-family-base: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol';
--ifm-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace;
--ifm-font-size-base: 100%;
--ifm-font-weight-light: 300;
--ifm-font-weight-normal: 400;
--ifm-font-weight-semibold: 500;
--ifm-font-weight-bold: 700;
--ifm-font-weight-base: var(--ifm-font-weight-normal);
--ifm-line-height-base: 1.65;
/* Spacing. */
--ifm-global-spacing: 1rem;
--ifm-spacing-vertical: var(--ifm-global-spacing);
--ifm-spacing-horizontal: var(--ifm-global-spacing);
/* Transitions. */
--ifm-transition-fast: 200ms;
--ifm-transition-slow: 400ms;
--ifm-transition-timing-default: cubic-bezier(0.08, 0.52, 0.52, 1);
/* Shadows. */
--ifm-global-shadow-lw: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
--ifm-global-shadow-md: 0 5px 40px rgba(0, 0, 0, 0.2);
--ifm-global-shadow-tl: 0 12px 28px 0 rgba(0, 0, 0, 0.2),
0 2px 4px 0 rgba(0, 0, 0, 0.1);
/* Z-index. */
--ifm-z-index-dropdown: 100;
--ifm-z-index-fixed: 200;
--ifm-z-index-overlay: 400;
--ifm-container-width: 1140px;
--ifm-container-width-xl: 1320px;
--ifm-code-background: rgb(246, 247, 248);
--ifm-code-border-radius: var(--ifm-global-radius);
--ifm-code-font-size: 90%;
--ifm-code-padding-horizontal: 0.1rem;
--ifm-code-padding-vertical: 0.1rem;
--ifm-pre-background: var(--ifm-code-background);
--ifm-pre-border-radius: var(--ifm-code-border-radius);
--ifm-pre-color: inherit;
--ifm-pre-line-height: 1.45;
--ifm-pre-padding: 1rem;
--ifm-heading-color: inherit;
--ifm-heading-margin-top: 0;
--ifm-heading-margin-bottom: var(--ifm-spacing-vertical);
--ifm-heading-font-family: var(--ifm-font-family-base);
--ifm-heading-font-weight: var(--ifm-font-weight-bold);
--ifm-heading-line-height: 1.25;
--ifm-h1-font-size: 2rem;
--ifm-h2-font-size: 1.5rem;
--ifm-h3-font-size: 1.25rem;
--ifm-h4-font-size: 1rem;
--ifm-h5-font-size: 0.875rem;
--ifm-h6-font-size: 0.85rem;
--ifm-image-alignment-padding: 1.25rem;
/* Leading is the distance between two baselines */
/* TODO: add appropriate mobile leading */
--ifm-leading-desktop: 1.25;
--ifm-leading: calc(var(--ifm-leading-desktop) * 1rem);
--ifm-list-left-padding: 2rem;
--ifm-list-margin: 1rem;
--ifm-list-item-margin: 0.25rem;
--ifm-list-paragraph-margin: 1rem;
--ifm-table-cell-padding: 0.75rem;
--ifm-table-background: transparent;
--ifm-table-stripe-background: rgba(0, 0, 0, 0.03);
--ifm-table-border-width: 1px;
--ifm-table-border-color: var(--ifm-color-emphasis-300);
--ifm-table-head-background: inherit;
--ifm-table-head-color: inherit;
--ifm-table-head-font-weight: var(--ifm-font-weight-bold);
--ifm-table-cell-color: inherit;
/* Links. */
--ifm-link-color: var(--ifm-color-primary);
--ifm-link-decoration: none;
--ifm-link-hover-color: var(--ifm-link-color);
--ifm-link-hover-decoration: underline;
/* Paragraphs. */
--ifm-paragraph-margin-bottom: var(--ifm-leading);
/* Blockquotes. */
--ifm-blockquote-font-size: var(--ifm-font-size-base);
--ifm-blockquote-border-left-width: 2px;
--ifm-blockquote-padding-horizontal: var(--ifm-spacing-horizontal);
--ifm-blockquote-padding-vertical: 0;
--ifm-blockquote-shadow: none;
--ifm-blockquote-color: var(--ifm-color-emphasis-800);
--ifm-blockquote-border-color: var(--ifm-color-emphasis-300);
/* Horizontal Rules. */
--ifm-hr-background-color: var(--ifm-color-emphasis-500);
--ifm-hr-height: 1px;
--ifm-hr-margin-vertical: 1.5rem;
--ifm-scrollbar-size: 7px;
--ifm-scrollbar-track-background-color: #f1f1f1;
--ifm-scrollbar-thumb-background-color: #c0c0c0;
--ifm-scrollbar-thumb-hover-background-color: #a7a7a7;
--ifm-alert-background-color: inherit; /* Set a default which will be overridden later. */
--ifm-alert-border-color: inherit; /* Set a default which will be overridden later. */
--ifm-alert-border-radius: var(--ifm-global-radius);
--ifm-alert-border-width: 0px; /* For users that want to easily add a border */
--ifm-alert-border-left-width: 5px;
--ifm-alert-color: var(--ifm-font-color-base);
--ifm-alert-padding-horizontal: var(--ifm-spacing-horizontal);
--ifm-alert-padding-vertical: var(--ifm-spacing-vertical);
--ifm-alert-shadow: var(--ifm-global-shadow-lw);
--ifm-avatar-intro-margin: 1rem;
--ifm-avatar-intro-alignment: inherit;
--ifm-avatar-photo-size: 3rem;
--ifm-badge-background-color: inherit; /* Set a default which will be overridden later. */
--ifm-badge-border-color: inherit; /* Set a default which will be overridden later. */
--ifm-badge-border-radius: var(--ifm-global-radius);
--ifm-badge-border-width: var(--ifm-global-border-width);
--ifm-badge-color: var(--ifm-color-white);
--ifm-badge-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 0.5);
--ifm-badge-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.25);
--ifm-breadcrumb-border-radius: 1.5rem;
--ifm-breadcrumb-spacing: 0.5rem;
--ifm-breadcrumb-color-active: var(--ifm-color-primary);
--ifm-breadcrumb-item-background-active: var(--ifm-hover-overlay);
--ifm-breadcrumb-padding-horizontal: 0.8rem;
--ifm-breadcrumb-padding-vertical: 0.4rem;
--ifm-breadcrumb-size-multiplier: 1;
--ifm-breadcrumb-separator: url('data:image/svg+xml;utf8,');
--ifm-breadcrumb-separator-filter: none;
--ifm-breadcrumb-separator-size: 0.5rem;
--ifm-breadcrumb-separator-size-multiplier: 1.25;
--ifm-button-background-color: inherit;
--ifm-button-border-color: var(--ifm-button-background-color);
--ifm-button-border-width: var(--ifm-global-border-width);
--ifm-button-color: var(--ifm-font-color-base-inverse);
--ifm-button-font-weight: var(--ifm-font-weight-bold);
--ifm-button-padding-horizontal: 1.5rem;
--ifm-button-padding-vertical: 0.375rem;
--ifm-button-size-multiplier: 1;
--ifm-button-transition-duration: var(--ifm-transition-fast);
--ifm-button-border-radius: calc(
var(--ifm-global-radius) * var(--ifm-button-size-multiplier)
);
--ifm-button-group-spacing: 2px;
--ifm-card-background-color: var(--ifm-background-surface-color);
--ifm-card-border-radius: calc(var(--ifm-global-radius) * 2);
--ifm-card-horizontal-spacing: var(--ifm-global-spacing);
--ifm-card-vertical-spacing: var(--ifm-global-spacing);
--ifm-toc-border-color: var(--ifm-color-emphasis-300);
--ifm-toc-link-color: var(--ifm-color-content-secondary);
--ifm-toc-padding-vertical: 0.5rem;
--ifm-toc-padding-horizontal: 0.5rem;
--ifm-dropdown-background-color: var(--ifm-background-surface-color);
--ifm-dropdown-font-weight: var(--ifm-font-weight-semibold);
--ifm-dropdown-link-color: var(--ifm-font-color-base);
--ifm-dropdown-hover-background-color: var(--ifm-hover-overlay);
--ifm-footer-background-color: var(--ifm-color-emphasis-100);
--ifm-footer-color: inherit;
--ifm-footer-link-color: var(--ifm-color-emphasis-700);
--ifm-footer-link-hover-color: var(--ifm-color-primary);
--ifm-footer-link-horizontal-spacing: 0.5rem;
--ifm-footer-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 2);
--ifm-footer-padding-vertical: calc(var(--ifm-spacing-vertical) * 2);
--ifm-footer-title-color: inherit;
--ifm-footer-logo-max-width: min(30rem, 90vw);
--ifm-hero-background-color: var(--ifm-background-surface-color);
--ifm-hero-text-color: var(--ifm-color-emphasis-800);
--ifm-menu-color: var(--ifm-color-emphasis-700);
--ifm-menu-color-active: var(--ifm-color-primary);
--ifm-menu-color-background-active: var(--ifm-hover-overlay);
--ifm-menu-color-background-hover: var(--ifm-hover-overlay);
--ifm-menu-link-padding-horizontal: 0.75rem;
--ifm-menu-link-padding-vertical: 0.375rem;
--ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,');
--ifm-menu-link-sublist-icon-filter: none;
--ifm-navbar-background-color: var(--ifm-background-surface-color);
--ifm-navbar-height: 3.75rem;
--ifm-navbar-item-padding-horizontal: 0.75rem;
--ifm-navbar-item-padding-vertical: 0.25rem;
--ifm-navbar-link-color: var(--ifm-font-color-base);
--ifm-navbar-link-hover-color: var(--ifm-color-primary);
--ifm-navbar-link-active-color: var(--ifm-link-color);
--ifm-navbar-padding-horizontal: var(--ifm-spacing-horizontal);
--ifm-navbar-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.5);
--ifm-navbar-shadow: var(--ifm-global-shadow-lw);
--ifm-navbar-search-input-background-color: var(--ifm-color-emphasis-200);
--ifm-navbar-search-input-color: var(--ifm-color-emphasis-800);
--ifm-navbar-search-input-placeholder-color: var(--ifm-color-emphasis-500);
--ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,');
--ifm-navbar-sidebar-width: 83vw;
--ifm-pagination-border-radius: var(--ifm-global-radius);
--ifm-pagination-color-active: var(--ifm-color-primary);
--ifm-pagination-font-size: 1rem;
--ifm-pagination-item-active-background: var(--ifm-hover-overlay);
--ifm-pagination-page-spacing: 0.2em;
--ifm-pagination-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 1);
--ifm-pagination-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.25);
--ifm-pagination-nav-border-radius: var(--ifm-global-radius);
--ifm-pagination-nav-color-hover: var(--ifm-color-primary);
--ifm-pills-color-active: var(--ifm-color-primary);
--ifm-pills-color-background-active: var(--ifm-hover-overlay);
--ifm-pills-spacing: 0.125rem;
--ifm-tabs-color: var(--ifm-font-color-secondary);
--ifm-tabs-color-active: var(--ifm-color-primary);
--ifm-tabs-color-active-border: var(--ifm-tabs-color-active);
--ifm-tabs-padding-horizontal: 1rem;
--ifm-tabs-padding-vertical: 1rem;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
* {
box-sizing: border-box;
}
html {
background-color: var(--ifm-background-color);
color: var(--ifm-font-color-base);
color-scheme: var(--ifm-color-scheme);
font: var(--ifm-font-size-base) / var(--ifm-line-height-base)
var(--ifm-font-family-base);
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
text-rendering: optimizelegibility;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
word-wrap: break-word;
}
iframe {
border: 0;
color-scheme: auto;
}
/* Layout */
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.container {
margin: 0 auto;
max-width: var(--ifm-container-width);
padding: 0 var(--ifm-spacing-horizontal);
width: 100%;
}
.container--fluid {
max-width: inherit;
}
.row {
display: flex;
flex-wrap: wrap;
margin: 0 calc(var(--ifm-spacing-horizontal) * -1);
}
.row--no-gutters {
margin-left: 0;
margin-right: 0;
}
.row--no-gutters > .col {
padding-left: 0;
padding-right: 0;
}
.row--align-top {
align-items: flex-start;
}
.row--align-bottom {
align-items: flex-end;
}
.row--align-center {
align-items: center;
}
.row--align-stretch {
align-items: stretch;
}
.row--align-baseline {
align-items: baseline;
}
.col {
--ifm-col-width: 100%;
flex: 1 0;
margin-left: 0;
max-width: var(--ifm-col-width);
padding: 0 var(--ifm-spacing-horizontal);
width: 100%;
}
.col[class*='col--'] {
flex: 0 0 var(--ifm-col-width);
}
.col--1 {
--ifm-col-width: calc(1 / 12 * 100%);
}
.col--offset-1 {
margin-left: calc(1 / 12 * 100%);
}
.col--2 {
--ifm-col-width: calc(2 / 12 * 100%);
}
.col--offset-2 {
margin-left: calc(2 / 12 * 100%);
}
.col--3 {
--ifm-col-width: calc(3 / 12 * 100%);
}
.col--offset-3 {
margin-left: calc(3 / 12 * 100%);
}
.col--4 {
--ifm-col-width: calc(4 / 12 * 100%);
}
.col--offset-4 {
margin-left: calc(4 / 12 * 100%);
}
.col--5 {
--ifm-col-width: calc(5 / 12 * 100%);
}
.col--offset-5 {
margin-left: calc(5 / 12 * 100%);
}
.col--6 {
--ifm-col-width: calc(6 / 12 * 100%);
}
.col--offset-6 {
margin-left: calc(6 / 12 * 100%);
}
.col--7 {
--ifm-col-width: calc(7 / 12 * 100%);
}
.col--offset-7 {
margin-left: calc(7 / 12 * 100%);
}
.col--8 {
--ifm-col-width: calc(8 / 12 * 100%);
}
.col--offset-8 {
margin-left: calc(8 / 12 * 100%);
}
.col--9 {
--ifm-col-width: calc(9 / 12 * 100%);
}
.col--offset-9 {
margin-left: calc(9 / 12 * 100%);
}
.col--10 {
--ifm-col-width: calc(10 / 12 * 100%);
}
.col--offset-10 {
margin-left: calc(10 / 12 * 100%);
}
.col--11 {
--ifm-col-width: calc(11 / 12 * 100%);
}
.col--offset-11 {
margin-left: calc(11 / 12 * 100%);
}
.col--12 {
--ifm-col-width: calc(12 / 12 * 100%);
}
.col--offset-12 {
margin-left: calc(12 / 12 * 100%);
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.margin--none {
margin: 0 !important;
}
.margin-top--none {
margin-top: 0 !important;
}
.margin-left--none {
margin-left: 0 !important;
}
.margin-bottom--none {
margin-bottom: 0 !important;
}
.margin-right--none {
margin-right: 0 !important;
}
.margin-vert--none {
margin-bottom: 0 !important;
margin-top: 0 !important;
}
.margin-horiz--none {
margin-left: 0 !important;
margin-right: 0 !important;
}
.margin--xs {
margin: 0.25rem !important;
}
.margin-top--xs {
margin-top: 0.25rem !important;
}
.margin-left--xs {
margin-left: 0.25rem !important;
}
.margin-bottom--xs {
margin-bottom: 0.25rem !important;
}
.margin-right--xs {
margin-right: 0.25rem !important;
}
.margin-vert--xs {
margin-bottom: 0.25rem !important;
margin-top: 0.25rem !important;
}
.margin-horiz--xs {
margin-left: 0.25rem !important;
margin-right: 0.25rem !important;
}
.margin--sm {
margin: 0.5rem !important;
}
.margin-top--sm {
margin-top: 0.5rem !important;
}
.margin-left--sm {
margin-left: 0.5rem !important;
}
.margin-bottom--sm {
margin-bottom: 0.5rem !important;
}
.margin-right--sm {
margin-right: 0.5rem !important;
}
.margin-vert--sm {
margin-bottom: 0.5rem !important;
margin-top: 0.5rem !important;
}
.margin-horiz--sm {
margin-left: 0.5rem !important;
margin-right: 0.5rem !important;
}
.margin--md {
margin: 1rem !important;
}
.margin-top--md {
margin-top: 1rem !important;
}
.margin-left--md {
margin-left: 1rem !important;
}
.margin-bottom--md {
margin-bottom: 1rem !important;
}
.margin-right--md {
margin-right: 1rem !important;
}
.margin-vert--md {
margin-bottom: 1rem !important;
margin-top: 1rem !important;
}
.margin-horiz--md {
margin-left: 1rem !important;
margin-right: 1rem !important;
}
.margin--lg {
margin: 2rem !important;
}
.margin-top--lg {
margin-top: 2rem !important;
}
.margin-left--lg {
margin-left: 2rem !important;
}
.margin-bottom--lg {
margin-bottom: 2rem !important;
}
.margin-right--lg {
margin-right: 2rem !important;
}
.margin-vert--lg {
margin-bottom: 2rem !important;
margin-top: 2rem !important;
}
.margin-horiz--lg {
margin-left: 2rem !important;
margin-right: 2rem !important;
}
.margin--xl {
margin: 5rem !important;
}
.margin-top--xl {
margin-top: 5rem !important;
}
.margin-left--xl {
margin-left: 5rem !important;
}
.margin-bottom--xl {
margin-bottom: 5rem !important;
}
.margin-right--xl {
margin-right: 5rem !important;
}
.margin-vert--xl {
margin-bottom: 5rem !important;
margin-top: 5rem !important;
}
.margin-horiz--xl {
margin-left: 5rem !important;
margin-right: 5rem !important;
}
.padding--none {
padding: 0 !important;
}
.padding-top--none {
padding-top: 0 !important;
}
.padding-left--none {
padding-left: 0 !important;
}
.padding-bottom--none {
padding-bottom: 0 !important;
}
.padding-right--none {
padding-right: 0 !important;
}
.padding-vert--none {
padding-bottom: 0 !important;
padding-top: 0 !important;
}
.padding-horiz--none {
padding-left: 0 !important;
padding-right: 0 !important;
}
.padding--xs {
padding: 0.25rem !important;
}
.padding-top--xs {
padding-top: 0.25rem !important;
}
.padding-left--xs {
padding-left: 0.25rem !important;
}
.padding-bottom--xs {
padding-bottom: 0.25rem !important;
}
.padding-right--xs {
padding-right: 0.25rem !important;
}
.padding-vert--xs {
padding-bottom: 0.25rem !important;
padding-top: 0.25rem !important;
}
.padding-horiz--xs {
padding-left: 0.25rem !important;
padding-right: 0.25rem !important;
}
.padding--sm {
padding: 0.5rem !important;
}
.padding-top--sm {
padding-top: 0.5rem !important;
}
.padding-left--sm {
padding-left: 0.5rem !important;
}
.padding-bottom--sm {
padding-bottom: 0.5rem !important;
}
.padding-right--sm {
padding-right: 0.5rem !important;
}
.padding-vert--sm {
padding-bottom: 0.5rem !important;
padding-top: 0.5rem !important;
}
.padding-horiz--sm {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
.padding--md {
padding: 1rem !important;
}
.padding-top--md {
padding-top: 1rem !important;
}
.padding-left--md {
padding-left: 1rem !important;
}
.padding-bottom--md {
padding-bottom: 1rem !important;
}
.padding-right--md {
padding-right: 1rem !important;
}
.padding-vert--md {
padding-bottom: 1rem !important;
padding-top: 1rem !important;
}
.padding-horiz--md {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.padding--lg {
padding: 2rem !important;
}
.padding-top--lg {
padding-top: 2rem !important;
}
.padding-left--lg {
padding-left: 2rem !important;
}
.padding-bottom--lg {
padding-bottom: 2rem !important;
}
.padding-right--lg {
padding-right: 2rem !important;
}
.padding-vert--lg {
padding-bottom: 2rem !important;
padding-top: 2rem !important;
}
.padding-horiz--lg {
padding-left: 2rem !important;
padding-right: 2rem !important;
}
.padding--xl {
padding: 5rem !important;
}
.padding-top--xl {
padding-top: 5rem !important;
}
.padding-left--xl {
padding-left: 5rem !important;
}
.padding-bottom--xl {
padding-bottom: 5rem !important;
}
.padding-right--xl {
padding-right: 5rem !important;
}
.padding-vert--xl {
padding-bottom: 5rem !important;
padding-top: 5rem !important;
}
.padding-horiz--xl {
padding-left: 5rem !important;
padding-right: 5rem !important;
}
/* Content */
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
code {
background-color: var(--ifm-code-background);
border: 0.1rem solid rgba(0, 0, 0, 0.1);
border-radius: var(--ifm-code-border-radius);
font-family: var(--ifm-font-family-monospace);
font-size: var(--ifm-code-font-size);
padding: var(--ifm-code-padding-vertical) var(--ifm-code-padding-horizontal);
vertical-align: middle;
}
a code {
color: inherit;
}
pre {
background-color: var(--ifm-pre-background);
border-radius: var(--ifm-pre-border-radius);
color: var(--ifm-pre-color);
font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
var(--ifm-font-family-monospace);
margin: 0 0 var(--ifm-spacing-vertical);
overflow: auto;
padding: var(--ifm-pre-padding);
}
pre code {
background-color: transparent;
border: none;
font-size: 100%;
line-height: inherit;
padding: 0;
}
kbd {
background-color: var(--ifm-color-emphasis-0);
border: 1px solid var(--ifm-color-emphasis-400);
border-radius: 0.2rem;
box-shadow: inset 0 -1px 0 var(--ifm-color-emphasis-400);
color: var(--ifm-color-emphasis-800);
font: 80% var(--ifm-font-family-monospace);
padding: 0.15rem 0.3rem;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--ifm-heading-color);
font-family: var(--ifm-heading-font-family);
font-weight: var(--ifm-heading-font-weight);
line-height: var(--ifm-heading-line-height);
margin: var(--ifm-heading-margin-top) 0 var(--ifm-heading-margin-bottom) 0;
}
h1 {
font-size: var(--ifm-h1-font-size);
}
h2 {
font-size: var(--ifm-h2-font-size);
}
h3 {
font-size: var(--ifm-h3-font-size);
}
h4 {
font-size: var(--ifm-h4-font-size);
}
h5 {
font-size: var(--ifm-h5-font-size);
}
h6 {
font-size: var(--ifm-h6-font-size);
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
img {
max-width: 100%;
}
img[align='right'] {
padding-left: var(--image-alignment-padding);
}
img[align='left'] {
padding-right: var(--image-alignment-padding);
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.markdown {
--ifm-h1-vertical-rhythm-top: 3;
--ifm-h2-vertical-rhythm-top: 2;
--ifm-h3-vertical-rhythm-top: 1.5;
--ifm-heading-vertical-rhythm-top: 1.25;
--ifm-h1-vertical-rhythm-bottom: 1.25;
--ifm-heading-vertical-rhythm-bottom: 1;
}
.markdown:before {
content: '';
display: table;
}
.markdown:after {
clear: both;
content: '';
display: table;
}
.markdown > *:last-child {
margin-bottom: 0 !important;
}
.markdown h1:first-child {
--ifm-h1-font-size: 3rem;
margin-bottom: calc(
var(--ifm-h1-vertical-rhythm-bottom) * var(--ifm-leading)
);
}
.markdown > h2 {
--ifm-h2-font-size: 2rem;
margin-bottom: calc(
var(--ifm-heading-vertical-rhythm-bottom) * var(--ifm-leading)
);
margin-top: calc(var(--ifm-h2-vertical-rhythm-top) * var(--ifm-leading));
}
.markdown > h3 {
--ifm-h3-font-size: 1.5rem;
margin-bottom: calc(
var(--ifm-heading-vertical-rhythm-bottom) * var(--ifm-leading)
);
margin-top: calc(var(--ifm-h3-vertical-rhythm-top) * var(--ifm-leading));
}
.markdown > h4,
.markdown > h5,
.markdown > h6 {
margin-bottom: calc(
var(--ifm-heading-vertical-rhythm-bottom) * var(--ifm-leading)
);
margin-top: calc(
var(--ifm-heading-vertical-rhythm-top) * var(--ifm-leading)
);
}
/* Consistent spacing between content paragraphs. */
.markdown > pre,
.markdown > ul,
.markdown > p {
margin-bottom: var(--ifm-leading);
}
.markdown li {
word-wrap: break-word;
}
.markdown li > p {
margin-top: var(--ifm-list-paragraph-margin);
}
.markdown li + li {
margin-top: var(--ifm-list-item-margin);
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/* Lists */
ul,
ol {
margin: 0 0 var(--ifm-list-margin);
padding-left: var(--ifm-list-left-padding);
}
ol ol,
ul ol {
list-style-type: lower-roman;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin: 0;
}
ul ul ol,
ul ol ol,
ol ul ol,
ol ol ol {
list-style-type: lower-alpha;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
table {
border-collapse: collapse;
display: block;
margin-bottom: var(--ifm-spacing-vertical);
overflow: auto;
}
table thead tr {
border-bottom: 2px solid var(--ifm-table-border-color);
}
table thead {
background-color: var(--ifm-table-stripe-background);
}
table tr {
background-color: var(--ifm-table-background);
border-top: var(--ifm-table-border-width) solid
var(--ifm-table-border-color);
}
table tr:nth-child(2n) {
background-color: var(--ifm-table-stripe-background);
}
table th,
table td {
border: var(--ifm-table-border-width) solid var(--ifm-table-border-color);
padding: var(--ifm-table-cell-padding);
}
table th {
background-color: var(--ifm-table-head-background);
color: var(--ifm-table-head-color);
font-weight: var(--ifm-table-head-font-weight);
}
table td {
color: var(--ifm-table-cell-color);
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
strong {
font-weight: var(--ifm-font-weight-bold);
}
/* Links */
a {
color: var(--ifm-link-color);
/* autoprefixer: ignore next */
text-decoration: var(--ifm-link-decoration);
transition: color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
}
a:hover {
color: var(--ifm-link-hover-color);
/* autoprefixer: ignore next */
text-decoration: var(--ifm-link-hover-decoration);
}
a:not([href]) {
-webkit-text-decoration: none;
text-decoration: none;
}
/* Paragraphs */
p {
margin: 0 0 var(--ifm-paragraph-margin-bottom);
}
/* Blockquotes */
blockquote {
border-left: var(--ifm-blockquote-border-left-width) solid
var(--ifm-blockquote-border-color);
box-shadow: var(--ifm-blockquote-shadow);
color: var(--ifm-blockquote-color);
font-size: var(--ifm-blockquote-font-size);
margin: 0 0 var(--ifm-spacing-vertical);
padding: var(--ifm-blockquote-padding-vertical)
var(--ifm-blockquote-padding-horizontal);
}
blockquote > :first-child {
margin-top: 0;
}
blockquote > :last-child {
margin-bottom: 0;
}
/* Horizontal Rules */
hr {
background-color: var(--ifm-hr-background-color);
border: 0;
height: var(--ifm-hr-height);
margin: var(--ifm-hr-margin-vertical) 0;
}
/* Utilities */
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.shadow--lw {
box-shadow: var(--ifm-global-shadow-lw) !important;
}
.shadow--md {
box-shadow: var(--ifm-global-shadow-md) !important;
}
.shadow--tl {
box-shadow: var(--ifm-global-shadow-tl) !important;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.text--primary {
color: var(--ifm-color-primary);
}
.text--secondary {
color: var(--ifm-color-secondary);
}
.text--success {
color: var(--ifm-color-success);
}
.text--info {
color: var(--ifm-color-info);
}
.text--warning {
color: var(--ifm-color-warning);
}
.text--danger {
color: var(--ifm-color-danger);
}
.text--center {
text-align: center;
}
.text--left {
text-align: left;
}
.text--justify {
text-align: justify;
}
.text--right {
text-align: right;
}
.text--capitalize {
text-transform: capitalize;
}
.text--lowercase {
text-transform: lowercase;
}
.text--uppercase {
text-transform: uppercase;
}
.text--light {
font-weight: var(--ifm-font-weight-light);
}
.text--normal {
font-weight: var(--ifm-font-weight-normal);
}
.text--semibold {
font-weight: var(--ifm-font-weight-semibold);
}
.text--bold {
font-weight: var(--ifm-font-weight-bold);
}
.text--italic {
font-style: italic;
}
.text--truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text--break {
word-wrap: break-word !important;
word-break: break-word !important;
}
.text--no-decoration,
.text--no-decoration:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.clean-btn {
background: none;
border: none;
color: inherit;
cursor: pointer;
font-family: inherit;
padding: 0;
}
.clean-list {
list-style: none;
padding-left: 0;
}
/* Components */
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.alert--primary {
--ifm-alert-background-color: var(
--ifm-color-primary-contrast-background
);
--ifm-alert-background-color-highlight: rgba(53, 120, 229, 0.15);
--ifm-alert-foreground-color: var(
--ifm-color-primary-contrast-foreground
);
--ifm-alert-border-color: var(--ifm-color-primary-dark);
}
.alert--secondary {
--ifm-alert-background-color: var(
--ifm-color-secondary-contrast-background
);
--ifm-alert-background-color-highlight: rgba(235, 237, 240, 0.15);
--ifm-alert-foreground-color: var(
--ifm-color-secondary-contrast-foreground
);
--ifm-alert-border-color: var(--ifm-color-secondary-dark);
}
.alert--success {
--ifm-alert-background-color: var(
--ifm-color-success-contrast-background
);
--ifm-alert-background-color-highlight: rgba(0, 164, 0, 0.15);
--ifm-alert-foreground-color: var(
--ifm-color-success-contrast-foreground
);
--ifm-alert-border-color: var(--ifm-color-success-dark);
}
.alert--info {
--ifm-alert-background-color: var(
--ifm-color-info-contrast-background
);
--ifm-alert-background-color-highlight: rgba(84, 199, 236, 0.15);
--ifm-alert-foreground-color: var(
--ifm-color-info-contrast-foreground
);
--ifm-alert-border-color: var(--ifm-color-info-dark);
}
.alert--warning {
--ifm-alert-background-color: var(
--ifm-color-warning-contrast-background
);
--ifm-alert-background-color-highlight: rgba(255, 186, 0, 0.15);
--ifm-alert-foreground-color: var(
--ifm-color-warning-contrast-foreground
);
--ifm-alert-border-color: var(--ifm-color-warning-dark);
}
.alert--danger {
--ifm-alert-background-color: var(
--ifm-color-danger-contrast-background
);
--ifm-alert-background-color-highlight: rgba(250, 56, 62, 0.15);
--ifm-alert-foreground-color: var(
--ifm-color-danger-contrast-foreground
);
--ifm-alert-border-color: var(--ifm-color-danger-dark);
}
.alert {
--ifm-code-background: var(--ifm-alert-background-color-highlight);
--ifm-link-color: var(--ifm-alert-foreground-color);
--ifm-link-hover-color: var(--ifm-alert-foreground-color);
--ifm-link-decoration: underline;
--ifm-tabs-color: var(--ifm-alert-foreground-color);
--ifm-tabs-color-active: var(--ifm-alert-foreground-color);
--ifm-tabs-color-active-border: var(--ifm-alert-border-color);
background-color: var(--ifm-alert-background-color);
border: var(--ifm-alert-border-width) solid var(--ifm-alert-border-color);
border-left-width: var(--ifm-alert-border-left-width);
border-radius: var(--ifm-alert-border-radius);
box-shadow: var(--ifm-alert-shadow);
color: var(--ifm-alert-foreground-color);
padding: var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal);
}
.alert__heading {
align-items: center;
display: flex;
font: bold var(--ifm-h5-font-size) / var(--ifm-heading-line-height)
var(--ifm-heading-font-family);
margin-bottom: 0.5rem;
text-transform: uppercase;
}
.alert__icon {
display: inline-flex;
margin-right: 0.4em;
}
.alert__icon svg {
fill: var(--ifm-alert-foreground-color);
stroke: var(--ifm-alert-foreground-color);
stroke-width: 0;
}
.alert .close {
color: var(--ifm-alert-foreground-color);
margin: calc(var(--ifm-alert-padding-vertical) * -1)
calc(var(--ifm-alert-padding-horizontal) * -1) 0 0;
opacity: 0.75;
}
.alert .close:hover,
.alert .close:focus {
opacity: 1;
}
.alert a {
text-decoration-color: var(--ifm-alert-border-color);
}
.alert a:hover {
text-decoration-thickness: 2px;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.avatar {
column-gap: var(--ifm-avatar-intro-margin);
display: flex;
}
.avatar__photo {
border-radius: 50%;
display: block;
height: var(--ifm-avatar-photo-size);
overflow: hidden;
width: var(--ifm-avatar-photo-size);
}
.avatar__photo--sm {
--ifm-avatar-photo-size: 2rem;
}
.avatar__photo--lg {
--ifm-avatar-photo-size: 4rem;
}
.avatar__photo--xl {
--ifm-avatar-photo-size: 6rem;
}
.avatar__intro {
display: flex;
flex: 1 1;
flex-direction: column;
justify-content: center;
text-align: var(--ifm-avatar-intro-alignment);
}
.avatar__name {
font: bold var(--ifm-h4-font-size) / var(--ifm-heading-line-height)
var(--ifm-font-family-base);
}
.avatar__subtitle {
margin-top: 0.25rem;
}
.avatar--vertical {
--ifm-avatar-intro-alignment: center;
--ifm-avatar-intro-margin: 0.5rem;
align-items: center;
flex-direction: column;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.badge {
background-color: var(--ifm-badge-background-color);
border: var(--ifm-badge-border-width) solid var(--ifm-badge-border-color);
border-radius: var(--ifm-badge-border-radius);
color: var(--ifm-badge-color);
display: inline-block;
font-size: 75%;
font-weight: var(--ifm-font-weight-bold);
line-height: 1;
padding: var(--ifm-badge-padding-vertical) var(--ifm-badge-padding-horizontal);
}
.badge--primary {
--ifm-badge-background-color: var(--ifm-color-primary);
--ifm-badge-border-color: var(--ifm-badge-background-color);
}
.badge--secondary {
--ifm-badge-background-color: var(--ifm-color-secondary);
--ifm-badge-border-color: var(--ifm-badge-background-color);
color: var(--ifm-color-black);
}
.badge--success {
--ifm-badge-background-color: var(--ifm-color-success);
--ifm-badge-border-color: var(--ifm-badge-background-color);
}
.badge--info {
--ifm-badge-background-color: var(--ifm-color-info);
--ifm-badge-border-color: var(--ifm-badge-background-color);
}
.badge--warning {
--ifm-badge-background-color: var(--ifm-color-warning);
--ifm-badge-border-color: var(--ifm-badge-background-color);
}
.badge--danger {
--ifm-badge-background-color: var(--ifm-color-danger);
--ifm-badge-border-color: var(--ifm-badge-background-color);
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.breadcrumbs {
margin-bottom: 0;
padding-left: 0;
}
.breadcrumbs__item {
display: inline-block;
}
.breadcrumbs__item:not(:last-child):after {
background: var(--ifm-breadcrumb-separator) center;
content: ' ';
display: inline-block;
filter: var(--ifm-breadcrumb-separator-filter);
height: calc(
var(--ifm-breadcrumb-separator-size) *
var(--ifm-breadcrumb-size-multiplier) *
var(--ifm-breadcrumb-separator-size-multiplier)
);
margin: 0 var(--ifm-breadcrumb-spacing);
opacity: 0.5;
width: calc(
var(--ifm-breadcrumb-separator-size) *
var(--ifm-breadcrumb-size-multiplier) *
var(--ifm-breadcrumb-separator-size-multiplier)
);
/*rtl:raw:
transform: rotate(180deg);
*/
}
.breadcrumbs__item--active .breadcrumbs__link {
background: var(--ifm-breadcrumb-item-background-active);
color: var(--ifm-breadcrumb-color-active);
}
.breadcrumbs__link {
border-radius: var(--ifm-breadcrumb-border-radius);
color: var(--ifm-font-color-base);
display: inline-block;
font-size: calc(1rem * var(--ifm-breadcrumb-size-multiplier));
padding: calc(
var(--ifm-breadcrumb-padding-vertical) *
var(--ifm-breadcrumb-size-multiplier)
)
calc(
var(--ifm-breadcrumb-padding-horizontal) *
var(--ifm-breadcrumb-size-multiplier)
);
transition-property: background, color;
transition-duration: var(--ifm-transition-fast);
transition-timing-function: var(--ifm-transition-timing-default);
}
.breadcrumbs__link:link:hover, .breadcrumbs__link:visited:hover, area[href].breadcrumbs__link:hover {
background: var(--ifm-breadcrumb-item-background-active);
-webkit-text-decoration: none;
text-decoration: none;
}
.breadcrumbs__link:any-link:hover {
background: var(--ifm-breadcrumb-item-background-active);
-webkit-text-decoration: none;
text-decoration: none;
}
.breadcrumbs--sm {
--ifm-breadcrumb-size-multiplier: 0.8;
}
.breadcrumbs--lg {
--ifm-breadcrumb-size-multiplier: 1.2;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.button {
background-color: var(--ifm-button-background-color);
border: var(--ifm-button-border-width) solid var(--ifm-button-border-color);
border-radius: var(--ifm-button-border-radius);
color: var(--ifm-button-color);
cursor: pointer;
display: inline-block;
font-size: calc(0.875rem * var(--ifm-button-size-multiplier));
font-weight: var(--ifm-button-font-weight);
line-height: 1.5;
padding: calc(
var(--ifm-button-padding-vertical) * var(--ifm-button-size-multiplier)
)
calc(
var(--ifm-button-padding-horizontal) * var(--ifm-button-size-multiplier)
);
text-align: center;
-webkit-user-select: none;
user-select: none;
vertical-align: middle;
white-space: nowrap;
transition-property: color, background, border-color;
transition-duration: var(--ifm-button-transition-duration);
transition-timing-function: var(--ifm-transition-timing-default);
}
.button:hover {
color: var(--ifm-button-color); /* Override for button links. */
-webkit-text-decoration: none;
text-decoration: none;
}
.button--outline {
--ifm-button-background-color: transparent;
--ifm-button-color: var(--ifm-button-border-color);
}
.button--outline:hover {
--ifm-button-background-color: var(--ifm-button-border-color);
}
.button--outline:hover,
.button--outline:active,
.button--outline.button--active {
--ifm-button-color: var(--ifm-font-color-base-inverse);
}
.button--link {
--ifm-button-background-color: transparent;
--ifm-button-border-color: transparent;
color: var(--ifm-link-color);
/* autoprefixer: ignore next */
text-decoration: var(--ifm-link-decoration);
}
.button--link:hover,
.button--link:active,
.button--link.button--active {
color: var(--ifm-link-hover-color);
/* autoprefixer: ignore next */
text-decoration: var(--ifm-link-hover-decoration);
}
.button.disabled,
.button:disabled,
.button[disabled] {
opacity: 0.65;
pointer-events: none;
}
.button--sm {
--ifm-button-size-multiplier: 0.8;
}
.button--lg {
--ifm-button-size-multiplier: 1.35;
}
.button--block {
display: block;
width: 100%;
}
.button.button--secondary {
color: var(--ifm-color-gray-900);
}
.button.button--secondary.button--outline:not(.button--active):not(:hover) {
color: var(--ifm-font-color-base);
}
:where(.button--primary) {
--ifm-button-background-color: var(--ifm-color-primary);
--ifm-button-border-color: var(--ifm-color-primary);
}
:where(.button--primary):not(.button--outline):hover {
--ifm-button-background-color: var(--ifm-color-primary-dark);
--ifm-button-border-color: var(--ifm-color-primary-dark);
}
.button--primary:active,
.button--primary.button--active {
--ifm-button-background-color: var(--ifm-color-primary-darker);
--ifm-button-border-color: var(--ifm-color-primary-darker);
}
:where(.button--secondary) {
--ifm-button-background-color: var(--ifm-color-secondary);
--ifm-button-border-color: var(--ifm-color-secondary);
}
:where(.button--secondary):not(.button--outline):hover {
--ifm-button-background-color: var(--ifm-color-secondary-dark);
--ifm-button-border-color: var(--ifm-color-secondary-dark);
}
.button--secondary:active,
.button--secondary.button--active {
--ifm-button-background-color: var(--ifm-color-secondary-darker);
--ifm-button-border-color: var(--ifm-color-secondary-darker);
}
:where(.button--success) {
--ifm-button-background-color: var(--ifm-color-success);
--ifm-button-border-color: var(--ifm-color-success);
}
:where(.button--success):not(.button--outline):hover {
--ifm-button-background-color: var(--ifm-color-success-dark);
--ifm-button-border-color: var(--ifm-color-success-dark);
}
.button--success:active,
.button--success.button--active {
--ifm-button-background-color: var(--ifm-color-success-darker);
--ifm-button-border-color: var(--ifm-color-success-darker);
}
:where(.button--info) {
--ifm-button-background-color: var(--ifm-color-info);
--ifm-button-border-color: var(--ifm-color-info);
}
:where(.button--info):not(.button--outline):hover {
--ifm-button-background-color: var(--ifm-color-info-dark);
--ifm-button-border-color: var(--ifm-color-info-dark);
}
.button--info:active,
.button--info.button--active {
--ifm-button-background-color: var(--ifm-color-info-darker);
--ifm-button-border-color: var(--ifm-color-info-darker);
}
:where(.button--warning) {
--ifm-button-background-color: var(--ifm-color-warning);
--ifm-button-border-color: var(--ifm-color-warning);
}
:where(.button--warning):not(.button--outline):hover {
--ifm-button-background-color: var(--ifm-color-warning-dark);
--ifm-button-border-color: var(--ifm-color-warning-dark);
}
.button--warning:active,
.button--warning.button--active {
--ifm-button-background-color: var(--ifm-color-warning-darker);
--ifm-button-border-color: var(--ifm-color-warning-darker);
}
:where(.button--danger) {
--ifm-button-background-color: var(--ifm-color-danger);
--ifm-button-border-color: var(--ifm-color-danger);
}
:where(.button--danger):not(.button--outline):hover {
--ifm-button-background-color: var(--ifm-color-danger-dark);
--ifm-button-border-color: var(--ifm-color-danger-dark);
}
.button--danger:active,
.button--danger.button--active {
--ifm-button-background-color: var(--ifm-color-danger-darker);
--ifm-button-border-color: var(--ifm-color-danger-darker);
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.button-group {
display: inline-flex;
gap: var(--ifm-button-group-spacing);
}
.button-group > .button:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.button-group > .button:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.button-group--block {
display: flex;
justify-content: stretch;
}
.button-group--block > .button {
flex-grow: 1;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.card {
background-color: var(--ifm-card-background-color);
border-radius: var(--ifm-card-border-radius);
box-shadow: var(--ifm-global-shadow-lw);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Because of border-radius. */
.card--full-height {
height: 100%;
}
.card__image {
padding-top: var(--ifm-card-vertical-spacing);
}
.card__image:first-child {
padding-top: 0;
}
.card__header,
.card__body,
.card__footer {
padding: var(--ifm-card-vertical-spacing) var(--ifm-card-horizontal-spacing);
}
.card__header:not(:last-child), .card__body:not(:last-child), .card__footer:not(:last-child) {
padding-bottom: 0;
}
.card__header > :last-child, .card__body > :last-child, .card__footer > :last-child {
margin-bottom: 0;
}
.card__footer {
margin-top: auto; /* Pushes the footer to the bottom of the card. */
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.table-of-contents {
font-size: 0.8rem;
margin-bottom: 0;
padding: var(--ifm-toc-padding-vertical) 0;
}
.table-of-contents,
.table-of-contents ul {
list-style: none;
padding-left: var(--ifm-toc-padding-horizontal);
}
.table-of-contents li {
margin: var(--ifm-toc-padding-vertical) var(--ifm-toc-padding-horizontal);
}
.table-of-contents__left-border {
border-left: 1px solid var(--ifm-toc-border-color);
}
.table-of-contents__link {
color: var(--ifm-toc-link-color);
display: block;
}
.table-of-contents__link:hover,
.table-of-contents__link:hover code,
.table-of-contents__link--active,
.table-of-contents__link--active code {
color: var(--ifm-color-primary);
-webkit-text-decoration: none;
text-decoration: none;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.close {
color: var(--ifm-color-black);
float: right;
font-size: 1.5rem;
font-weight: var(--ifm-font-weight-bold);
line-height: 1;
opacity: 0.5;
padding: 1rem;
transition: opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default);
}
.close:hover {
opacity: 0.7;
}
.close:focus {
opacity: 0.8;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.dropdown {
display: inline-flex;
font-weight: var(--ifm-dropdown-font-weight);
position: relative;
vertical-align: top;
}
.dropdown--hoverable:hover .dropdown__menu, .dropdown--show .dropdown__menu {
opacity: 1;
pointer-events: all;
transform: translateY(-1px);
visibility: visible;
}
.dropdown--right .dropdown__menu {
left: inherit;
right: 0;
}
.dropdown--nocaret .navbar__link:after {
content: none !important;
}
.dropdown__menu {
background-color: var(--ifm-dropdown-background-color);
border-radius: var(--ifm-global-radius);
box-shadow: var(--ifm-global-shadow-md);
left: 0;
list-style: none;
max-height: 80vh;
min-width: 10rem;
opacity: 0;
overflow-y: auto;
padding: 0.5rem;
pointer-events: none;
position: absolute;
top: calc(100% - var(--ifm-navbar-item-padding-vertical) + 0.3rem);
transform: translateY(-0.625rem);
visibility: hidden;
z-index: var(--ifm-z-index-dropdown);
transition-property: opacity, transform, visibility;
transition-duration: var(--ifm-transition-fast);
transition-timing-function: var(--ifm-transition-timing-default);
}
.dropdown__link {
border-radius: 0.25rem;
color: var(--ifm-dropdown-link-color);
display: block;
font-size: 0.875rem;
margin-top: 0.2rem;
padding: 0.25rem 0.5rem;
white-space: nowrap;
}
.dropdown__link:hover,
.dropdown__link--active {
background-color: var(--ifm-dropdown-hover-background-color);
color: var(--ifm-dropdown-link-color);
-webkit-text-decoration: none;
text-decoration: none;
}
.dropdown__link--active,
.dropdown__link--active:hover {
--ifm-dropdown-link-color: var(--ifm-link-color);
}
.dropdown > .navbar__link:after {
border-color: currentColor transparent;
border-style: solid;
border-width: 0.4em 0.4em 0;
content: '';
display: inline-block;
margin-left: 0.3em;
position: relative;
top: 2px;
transform: translateY(-50%);
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.footer {
background-color: var(--ifm-footer-background-color);
color: var(--ifm-footer-color);
padding: var(--ifm-footer-padding-vertical)
var(--ifm-footer-padding-horizontal);
}
.footer--dark {
--ifm-footer-background-color: #303846;
--ifm-footer-color: var(--ifm-footer-link-color);
--ifm-footer-link-color: var(--ifm-color-secondary);
--ifm-footer-title-color: var(--ifm-color-white);
}
.footer__links {
margin-bottom: 1rem;
}
.footer__link-item {
color: var(--ifm-footer-link-color);
line-height: 2;
}
.footer__link-item:hover {
color: var(--ifm-footer-link-hover-color);
}
.footer__link-separator {
margin: 0 var(--ifm-footer-link-horizontal-spacing);
}
.footer__logo {
margin-top: 1rem;
max-width: var(--ifm-footer-logo-max-width);
}
.footer__title {
color: var(--ifm-footer-title-color);
font: bold var(--ifm-h4-font-size) / var(--ifm-heading-line-height)
var(--ifm-font-family-base);
margin-bottom: var(--ifm-heading-margin-bottom);
}
.footer__item {
margin-top: 0;
}
.footer__items {
margin-bottom: 0;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
[type='checkbox'] {
padding: 0;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.hero {
align-items: center;
background-color: var(--ifm-hero-background-color);
color: var(--ifm-hero-text-color);
display: flex;
padding: 4rem 2rem;
}
.hero--primary {
--ifm-hero-background-color: var(--ifm-color-primary);
--ifm-hero-text-color: var(--ifm-font-color-base-inverse);
}
.hero--dark {
--ifm-hero-background-color: #303846;
--ifm-hero-text-color: var(--ifm-color-white);
}
.hero__title {
font-size: 3rem;
}
.hero__subtitle {
font-size: 1.5rem;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.menu {
font-weight: var(--ifm-font-weight-semibold);
overflow-x: hidden;
}
.menu__list {
list-style: none;
margin: 0;
padding-left: 0;
}
/* Non-top level menus */
.menu__list .menu__list {
flex: 0 0 100%;
margin-top: 0.25rem;
padding-left: var(--ifm-menu-link-padding-horizontal);
}
.menu__list-item:not(:first-child) {
margin-top: 0.25rem;
}
.menu__list-item--collapsed .menu__list {
height: 0;
overflow: hidden;
}
.menu__list-item--collapsed .menu__link--sublist:after,
.menu__list-item--collapsed .menu__caret:before {
transform: rotateZ(90deg);
}
.menu__list-item-collapsible {
flex-wrap: wrap;
position: relative;
border-radius: 0.25rem;
display: flex;
transition: background var(--ifm-transition-fast) var(--ifm-transition-timing-default);
}
.menu__list-item-collapsible:hover {
background: var(--ifm-menu-color-background-hover);
}
.menu__list-item-collapsible--active {
background: var(--ifm-menu-color-background-hover);
}
.menu__list-item-collapsible .menu__link:hover,
.menu__list-item-collapsible .menu__link--active {
background: none !important;
}
.menu__link,
.menu__caret {
align-items: center;
border-radius: 0.25rem;
display: flex;
transition: background var(--ifm-transition-fast) var(--ifm-transition-timing-default);
}
.menu__link:hover, .menu__caret:hover {
background: var(--ifm-menu-color-background-hover);
}
.menu__link {
color: var(--ifm-menu-color);
flex: 1;
line-height: 1.25;
padding: var(--ifm-menu-link-padding-vertical)
var(--ifm-menu-link-padding-horizontal);
}
.menu__link:hover {
-webkit-text-decoration: none;
text-decoration: none;
color: var(--ifm-menu-color);
transition: color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
}
.menu__link--sublist-caret:after {
content: '';
margin-left: auto;
min-width: 1.25rem;
background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
filter: var(--ifm-menu-link-sublist-icon-filter);
height: 1.25rem;
transform: rotate(180deg);
width: 1.25rem;
transition: transform var(--ifm-transition-fast) linear;
}
.menu__link--active {
color: var(--ifm-menu-color-active);
}
.menu__link--active:hover {
color: var(--ifm-menu-color-active);
}
.menu__link--active:not(.menu__link--sublist) {
background-color: var(--ifm-menu-color-background-active);
}
.menu__caret {
padding: var(--ifm-menu-link-padding-vertical)
var(--ifm-menu-link-padding-horizontal);
}
.menu__caret:before {
content: '';
background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
filter: var(--ifm-menu-link-sublist-icon-filter);
height: 1.25rem;
transform: rotate(180deg);
width: 1.25rem;
transition: transform var(--ifm-transition-fast) linear;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
html[data-theme='dark'],
.navbar--dark {
--ifm-menu-link-sublist-icon-filter: invert(100%) sepia(94%) saturate(17%)
hue-rotate(223deg) brightness(104%) contrast(98%);
}
.navbar {
background-color: var(--ifm-navbar-background-color);
box-shadow: var(--ifm-navbar-shadow);
display: flex;
height: var(--ifm-navbar-height);
padding: var(--ifm-navbar-padding-vertical)
var(--ifm-navbar-padding-horizontal);
}
.navbar > .container,
.navbar > .container-fluid {
display: flex;
}
.navbar--fixed-top {
position: sticky;
top: 0;
z-index: var(--ifm-z-index-fixed);
}
.navbar__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.navbar__brand {
align-items: center;
color: var(--ifm-navbar-link-color);
display: flex;
margin-right: 1rem;
min-width: 0;
}
.navbar__brand:hover {
color: var(--ifm-navbar-link-hover-color);
-webkit-text-decoration: none;
text-decoration: none;
}
.navbar__title {
flex: 1 1 auto;
}
.navbar__toggle {
display: none;
margin-right: 0.5rem;
}
.navbar__logo {
flex: 0 0 auto;
height: 2rem;
margin-right: 0.5rem;
}
.navbar__logo img {
height: 100%;
}
.navbar__items {
align-items: center;
display: flex;
flex: 1;
min-width: 0;
}
.navbar__items--center {
flex: 0 0 auto;
}
.navbar__items--center .navbar__brand {
margin: 0;
}
.navbar__items--center + .navbar__items--right {
flex: 1;
}
.navbar__items--right {
flex: 0 0 auto;
justify-content: flex-end;
}
.navbar__items--right > :last-child {
padding-right: 0;
}
.navbar__item {
display: inline-block;
padding: var(--ifm-navbar-item-padding-vertical)
var(--ifm-navbar-item-padding-horizontal);
}
.navbar__item.dropdown .navbar__link:not([href]) {
pointer-events: none;
}
.navbar__link {
color: var(--ifm-navbar-link-color);
font-weight: var(--ifm-font-weight-semibold);
}
.navbar__link:hover,
.navbar__link--active {
color: var(--ifm-navbar-link-hover-color);
-webkit-text-decoration: none;
text-decoration: none;
}
.navbar--dark,
.navbar--primary {
--ifm-menu-color: var(--ifm-color-gray-300);
--ifm-navbar-link-color: var(--ifm-color-gray-100);
--ifm-navbar-search-input-background-color: rgba(255, 255, 255, 0.1);
--ifm-navbar-search-input-placeholder-color: rgba(255, 255, 255, 0.5);
color: var(--ifm-color-white);
}
.navbar--dark {
--ifm-navbar-background-color: #242526;
--ifm-navbar-link-hover-color: var(--ifm-color-primary);
--ifm-menu-color-background-active: rgba(255, 255, 255, 0.05);
--ifm-navbar-search-input-color: var(--ifm-color-white);
}
.navbar--primary {
--ifm-navbar-background-color: var(--ifm-color-primary);
--ifm-navbar-link-hover-color: var(--ifm-color-white);
--ifm-menu-color-active: var(--ifm-color-white);
--ifm-navbar-search-input-color: var(--ifm-color-emphasis-500);
}
.navbar__search-input {
appearance: none; /* Algolia will add type="search" to the input in Safari and Safari's styling will override the styling here. */
background: var(--ifm-navbar-search-input-background-color)
var(--ifm-navbar-search-input-icon) no-repeat 0.75rem center / 1rem 1rem;
border: none;
border-radius: 2rem;
color: var(--ifm-navbar-search-input-color);
cursor: text;
display: inline-block;
font-size: 1rem;
height: 2rem;
padding: 0 0.5rem 0 2.25rem;
width: 12.5rem;
}
.navbar__search-input::placeholder {
color: var(--ifm-navbar-search-input-placeholder-color);
}
.navbar-sidebar {
background-color: var(--ifm-navbar-background-color);
bottom: 0;
box-shadow: var(--ifm-global-shadow-md);
left: 0;
opacity: 0;
overflow-x: hidden;
position: fixed;
top: 0;
transform: translate3d(-100%, 0, 0);
visibility: hidden;
width: var(--ifm-navbar-sidebar-width);
transition-property: opacity, visibility, transform;
transition-duration: var(--ifm-transition-fast);
transition-timing-function: ease-in-out;
}
.navbar-sidebar--show .navbar-sidebar,
.navbar-sidebar--show .navbar-sidebar__backdrop {
opacity: 1;
visibility: visible;
}
.navbar-sidebar--show .navbar-sidebar {
transform: translate3d(0, 0, 0);
}
.navbar-sidebar__backdrop {
background-color: rgba(0, 0, 0, 0.6);
bottom: 0;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
visibility: hidden;
transition-property: opacity, visibility;
transition-duration: var(--ifm-transition-fast);
transition-timing-function: ease-in-out;
}
.navbar-sidebar__brand {
align-items: center;
box-shadow: var(--ifm-navbar-shadow);
display: flex;
flex: 1;
height: var(--ifm-navbar-height);
padding: var(--ifm-navbar-padding-vertical)
var(--ifm-navbar-padding-horizontal);
}
.navbar-sidebar__items {
display: flex;
height: calc(100% - var(--ifm-navbar-height));
transform: translateZ(0);
transition: transform var(--ifm-transition-fast) ease-in-out;
}
.navbar-sidebar__items--show-secondary {
transform: translate3d(
calc((var(--ifm-navbar-sidebar-width)) * -1),
0,
0
);
}
.navbar-sidebar__item {
flex-shrink: 0;
padding: 0.5rem;
width: calc(var(--ifm-navbar-sidebar-width));
}
.navbar-sidebar__back {
background: var(--ifm-menu-color-background-active);
font-size: 15px;
font-weight: var(--ifm-button-font-weight);
margin: 0 0 0.2rem -0.5rem;
padding: 0.6rem 1.5rem;
position: relative;
text-align: left;
top: -0.5rem;
width: calc(100% + 1rem);
}
.navbar-sidebar__close {
display: flex;
margin-left: auto;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.pagination {
column-gap: var(--ifm-pagination-page-spacing);
display: flex;
font-size: var(--ifm-pagination-font-size);
padding-left: 0;
}
.pagination--sm {
--ifm-pagination-font-size: 0.8rem;
--ifm-pagination-padding-horizontal: 0.8rem;
--ifm-pagination-padding-vertical: 0.2rem;
}
.pagination--lg {
--ifm-pagination-font-size: 1.2rem;
--ifm-pagination-padding-horizontal: 1.2rem;
--ifm-pagination-padding-vertical: 0.3rem;
}
.pagination__item {
display: inline-flex;
}
.pagination__item > span {
padding: var(--ifm-pagination-padding-vertical);
}
.pagination__item--active .pagination__link {
background: var(--ifm-pagination-item-active-background);
color: var(--ifm-pagination-color-active);
}
.pagination__item:not(.pagination__item--active):hover .pagination__link {
background: var(--ifm-pagination-item-active-background);
}
.pagination__item--disabled,
.pagination__item[disabled] {
opacity: 0.25;
pointer-events: none;
}
.pagination__link {
border-radius: var(--ifm-pagination-border-radius);
color: var(--ifm-font-color-base);
display: inline-block;
padding: var(--ifm-pagination-padding-vertical)
var(--ifm-pagination-padding-horizontal);
transition: background var(--ifm-transition-fast) var(--ifm-transition-timing-default);
}
.pagination__link:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.pagination-nav {
display: grid;
grid-gap: var(--ifm-spacing-horizontal);
gap: var(--ifm-spacing-horizontal);
grid-template-columns: repeat(2, 1fr);
}
.pagination-nav__link {
border: 1px solid var(--ifm-color-emphasis-300);
border-radius: var(--ifm-pagination-nav-border-radius);
display: block;
height: 100%;
line-height: var(--ifm-heading-line-height);
padding: var(--ifm-global-spacing);
transition: border-color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
}
.pagination-nav__link:hover {
border-color: var(--ifm-pagination-nav-color-hover);
-webkit-text-decoration: none;
text-decoration: none;
}
.pagination-nav__link--next {
grid-column: 2/3;
text-align: right;
}
.pagination-nav__label {
font-size: var(--ifm-h4-font-size);
font-weight: var(--ifm-heading-font-weight);
word-break: break-word;
}
.pagination-nav__link--prev .pagination-nav__label::before {
content: '« ';
}
.pagination-nav__link--next .pagination-nav__label::after {
content: ' »';
}
.pagination-nav__sublabel {
color: var(--ifm-color-content-secondary);
font-size: var(--ifm-h5-font-size);
font-weight: var(--ifm-font-weight-semibold);
margin-bottom: 0.25rem;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.pills {
display: flex;
gap: var(--ifm-pills-spacing);
padding-left: 0;
}
.pills__item {
border-radius: 0.5rem;
cursor: pointer;
display: inline-block;
font-weight: var(--ifm-font-weight-bold);
padding: 0.25rem 1rem;
transition: background var(--ifm-transition-fast) var(--ifm-transition-timing-default);
}
.pills__item--active {
background: var(--ifm-pills-color-background-active);
color: var(--ifm-pills-color-active);
}
.pills__item:not(.pills__item--active):hover {
background: var(--ifm-pills-color-background-active);
}
.pills--block {
justify-content: stretch;
}
.pills--block .pills__item {
flex-grow: 1;
text-align: center;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.tabs {
color: var(--ifm-tabs-color);
display: flex;
font-weight: var(--ifm-font-weight-bold);
margin-bottom: 0;
overflow-x: auto;
padding-left: 0;
}
.tabs__item {
border-bottom: 3px solid transparent;
border-radius: var(--ifm-global-radius);
cursor: pointer;
display: inline-flex;
padding: var(--ifm-tabs-padding-vertical) var(--ifm-tabs-padding-horizontal);
transition: background-color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
}
.tabs__item--active {
border-bottom-color: var(--ifm-tabs-color-active-border);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
color: var(--ifm-tabs-color-active);
}
.tabs__item:hover {
background-color: var(--ifm-hover-overlay);
}
.tabs--block {
justify-content: stretch;
}
.tabs--block .tabs__item {
flex-grow: 1;
justify-content: center;
}
/* Mode */
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
html[data-theme='dark'] {
--ifm-color-scheme: dark;
--ifm-color-emphasis-0: var(--ifm-color-gray-1000);
--ifm-color-emphasis-100: var(--ifm-color-gray-900);
--ifm-color-emphasis-200: var(--ifm-color-gray-800);
--ifm-color-emphasis-300: var(--ifm-color-gray-700);
--ifm-color-emphasis-400: var(--ifm-color-gray-600);
--ifm-color-emphasis-500: var(--ifm-color-gray-500);
--ifm-color-emphasis-600: var(--ifm-color-gray-400);
--ifm-color-emphasis-700: var(--ifm-color-gray-300);
--ifm-color-emphasis-800: var(--ifm-color-gray-200);
--ifm-color-emphasis-900: var(--ifm-color-gray-100);
--ifm-color-emphasis-1000: var(--ifm-color-gray-0);
--ifm-background-color: #1b1b1d;
--ifm-background-surface-color: #242526;
--ifm-hover-overlay: rgba(255, 255, 255, 0.05);
--ifm-color-content: #e3e3e3;
--ifm-color-content-secondary: rgba(255, 255, 255, 1);
--ifm-breadcrumb-separator-filter: invert(64%) sepia(11%) saturate(0%)
hue-rotate(149deg) brightness(99%) contrast(95%);
--ifm-code-background: rgba(255, 255, 255, 0.1);
--ifm-scrollbar-track-background-color: #444444;
--ifm-scrollbar-thumb-background-color: #686868;
--ifm-scrollbar-thumb-hover-background-color: #7a7a7a;
--ifm-table-stripe-background: rgba(255, 255, 255, 0.07);
--ifm-toc-border-color: var(--ifm-color-emphasis-200);
--ifm-color-primary-contrast-background: rgb(16, 36, 69);
--ifm-color-primary-contrast-foreground: rgb(235, 242, 252);
--ifm-color-secondary-contrast-background: rgb(71, 71, 72);
--ifm-color-secondary-contrast-foreground: rgb(253, 253, 254);
--ifm-color-success-contrast-background: rgb(0, 49, 0);
--ifm-color-success-contrast-foreground: rgb(230, 246, 230);
--ifm-color-info-contrast-background: rgb(25, 60, 71);
--ifm-color-info-contrast-foreground: rgb(238, 249, 253);
--ifm-color-warning-contrast-background: rgb(77, 56, 0);
--ifm-color-warning-contrast-foreground: rgb(255, 248, 230);
--ifm-color-danger-contrast-background: rgb(75, 17, 19);
--ifm-color-danger-contrast-foreground: rgb(255, 235, 236)
}
@media (min-width: 1440px) {
.container {
max-width: var(--ifm-container-width-xl);
}
}
@media (max-width: 996px) {
.col {
--ifm-col-width: 100%;
flex-basis: var(--ifm-col-width);
margin-left: 0;
}
.footer {
--ifm-footer-padding-horizontal: 0
}
.footer__link-separator {
display: none;
}
.footer__col {
margin-bottom: calc(var(--ifm-spacing-vertical) * 3);
}
.footer__link-item {
display: block;
width: max-content;
}
.hero {
padding-left: 0;
padding-right: 0
}
.navbar > .container,
.navbar > .container-fluid {
padding: 0
}
.navbar__toggle {
display: inherit
}
.navbar__item {
display: none
}
.navbar__search-input {
width: 9rem
}
.pills--block {
flex-direction: column
}
.tabs--block {
flex-direction: column
}
}
@media (max-width: 576px) {
.markdown h1:first-child {
--ifm-h1-font-size: 2rem;
}
.markdown > h2 {
--ifm-h2-font-size: 1.5rem;
}
.markdown > h3 {
--ifm-h3-font-size: 1.25rem;
}
}
@media (pointer: fine) {
.thin-scrollbar {
scrollbar-width: thin;
}
.thin-scrollbar::-webkit-scrollbar {
height: var(--ifm-scrollbar-size);
width: var(--ifm-scrollbar-size);
}
.thin-scrollbar::-webkit-scrollbar-track {
background: var(--ifm-scrollbar-track-background-color);
border-radius: 10px;
}
.thin-scrollbar::-webkit-scrollbar-thumb {
background: var(--ifm-scrollbar-thumb-background-color);
border-radius: 10px;
}
.thin-scrollbar::-webkit-scrollbar-thumb:hover {
background: var(--ifm-scrollbar-thumb-hover-background-color);
}
}
@media (prefers-reduced-motion: reduce) {
:root {
--ifm-transition-fast: 0ms;
--ifm-transition-slow: 0ms;
}
}
@media print {
.table-of-contents {
display: none
}
.footer {
display: none
}
.menu {
display: none
}
.navbar {
display: none
}
.pagination-nav {
display: none
}
.tabs {
page-break-inside: avoid
}
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* Styles for NProgress
* Copied over to remove unused styles for the spinner.
* https://github.com/rstacruz/nprogress/blob/master/nprogress.css
*/
:root {
--docusaurus-progress-bar-color: var(--ifm-color-primary);
}
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: var(--docusaurus-progress-bar-color);
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
#nprogress .peg {
position: absolute;
right: 0;
width: 100px;
height: 100%;
box-shadow: 0 0 10px var(--docusaurus-progress-bar-color),
0 0 5px var(--docusaurus-progress-bar-color);
opacity: 1;
transform: rotate(3deg) translate(0, -4px);
}
/**
* Any CSS included here will be global. The classic template
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
*/
/* You can override the default Infima variables here. */
/* For readability concerns, you should choose a lighter palette in dark mode. */
/* You can override the default Infima variables here. */
/* For readability concerns, you should choose a lighter palette in dark mode. */
/* You can override the default Infima variables here. */
:root {
--ifm-button-border-radius: 0;
--ifm-button-color: white;
--ifm-header-background: #0a1e2d; /* Navy Blue */
--ifm-header-text: white;
--ifm-color-primary: #00c3cd; /* Spacemint */
--ifm-color-secondary: #ff7d00; /* Orange Accent */
--ifm-color-success: #00c387; /* Fresh Green */
--ifm-color-primary-dark: #00afb8;
--ifm-color-primary-darker: #00a5ad;
--ifm-color-primary-darkest: #00878f;
--ifm-color-primary-light: #00d7e2;
--ifm-color-primary-lighter: #00e1ed;
--ifm-color-primary-lightest: #07f8ff;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
--ifm-hero-background-color: #ffffff; /* White */
--ifm-navbar-background-color: #ededed; /* 10% Black */
--ifm-menu-color-background-active: #e5edef;
--color-text-accent-hovered: #00a5ad; /* Darker Spacemint */
--color-text-accent-on-accent: #0a1e2d; /* Navy Blue */
--color-background-accent-subtler: #e5edef;
--color-background-accent-subtler-border: #dadada; /* 20% Black */
--course-next-lesson-button: #e5edef;
--sidebar-collapsible-button: #9d9d9c; /* 50% Black */
--sidebar-bg-color: #ffffff; /* White */
--sidebar-bg--header-color: #0a1e2d; /* Navy Blue */
--sidebar-text-color: #0a1e2d; /* Navy Blue */
--sidebar-progress-bar-bg: rgba(
0,
195,
205,
0.2
); /* Spacemint with opacity */
--sidebar-progress-bar-indicator: #00c3cd; /* Spacemint */
--sidebar-nav-item-hover-bg: rgba(
0,
195,
205,
0.05
); /* Spacemint with opacity */
--sidebar-nav-item-active-bg: rgba(
10,
30,
45,
0.05
); /* Navy Blue with opacity */
--sidebar-nav-item-active-border: #00c3cd; /* Spacemint */
--sidebar-nav-item-icon-color: #9d9d9c; /* 50% Black */
--sidebar-nav-item-icon-completed-color: #00c387; /* Fresh Green */
--sidebar-nav-item-border-right: #dadada; /* 20% Black */
--orange-accent: #ff7d00;
--sidebar-dark-bg: #0a1e2d;
--sidebar-text-light: #ffffff;
--sidebar-text-dark: #0a1e2d;
--sidebar-accent-orange: #ef7c00;
--sidebar-accent-aqua: #00c3cd;
--sidebar-lesson-progress-bg: #4a5a6a;
}
[data-theme="dark"] {
--ifm-color-primary: #00c3cd; /* Spacemint */
--ifm-color-secondary: #ff7d00; /* Orange Accent */
--ifm-color-success: #00c387; /* Fresh Green */
--ifm-color-primary-dark: #00afb8;
--ifm-color-primary-darker: #00a5ad;
--ifm-color-primary-darkest: #00878f;
--ifm-color-primary-light: #00d7e2;
--ifm-color-primary-lighter: #00e1ed;
--ifm-color-primary-lightest: #07f8ff;
--ifm-background-color: #0a1e2d; /* Navy Blue */
--ifm-background-surface-color: #0a1e2d; /* Navy Blue */
--ifm-navbar-background-color: #000000; /* 100% Black */
--ifm-hero-background-color: #0a1e2d; /* Navy Blue */
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
--sidebar-collapsible-button: #b2b2b2; /* 40% Black */
--course-next-lesson-button: rgba(0, 0, 0, 0.1);
--ifm-menu-color-background-active: #000000; /* 100% Black */
--color-text-accent-hovered: #00d7e2; /* Lighter Spacemint */
--color-text-accent-on-accent: #ffffff; /* White */
--color-background-accent-subtler: #000000; /* 100% Black */
--color-background-accent-subtler-border: #3c3c3b; /* 90% Black */
--sidebar-bg-color: #0a1e2d; /* Navy Blue */
--sidebar-bg--header-color: #000000; /* 100% Black */
--sidebar-text-color: #ffffff; /* White */
--sidebar-progress-bar-bg: rgba(
0,
195,
205,
0.2
); /* Spacemint with opacity */
--sidebar-progress-bar-indicator: #00c3cd; /* Spacemint */
--sidebar-nav-item-hover-bg: rgba(
0,
195,
205,
0.1
); /* Spacemint with opacity */
--sidebar-nav-item-active-bg: rgba(
255,
255,
255,
0.05
); /* White with opacity */
--sidebar-nav-item-active-border: #00c3cd; /* Spacemint */
--sidebar-nav-item-icon-color: #9d9d9c; /* 50% Black */
--sidebar-nav-item-icon-completed-color: #00c387; /* Fresh Green */
--sidebar-nav-item-border-right: #0a1e2d; /* Navy Blue */
--sidebar-dark-bg: #0a1e2d;
--sidebar-text-light: #ffffff;
--sidebar-text-dark: #0a1e2d;
--sidebar-accent-orange: #ef7c00;
--sidebar-accent-aqua: #00c3cd;
--sidebar-lesson-progress-bg: #4a5a6a;
}
.font-weight-300 {
font-weight: 300 !important;
}
@font-face {
font-weight: 500;
font-family: MuseoSansW05;
src: url(https://cdn.apps.01.cf.eu01.stackit.cloud/fonts/museo/MuseoSansW05-500.eot?#iefix);
src: url(https://cdn.apps.01.cf.eu01.stackit.cloud/fonts/museo/MuseoSansW05-500.eot?#iefix)
format("eot"),
url(https://cdn.apps.01.cf.eu01.stackit.cloud/fonts/museo/MuseoSansW05-500.woff2)
format("woff2"),
url(https://cdn.apps.01.cf.eu01.stackit.cloud/fonts/museo/MuseoSansW05-500.woff)
format("woff"),
url(https://cdn.apps.01.cf.eu01.stackit.cloud/fonts/museo/MuseoSansW05-500.ttf)
format("truetype");
}
.font-weight-500 {
font-weight: 500 !important;
}
@font-face {
font-weight: 700;
font-family: MuseoSansW05;
src: url(https://cdn.apps.01.cf.eu01.stackit.cloud/fonts/museo/MuseoSansW05-700.eot?#iefix);
src: url(https://cdn.apps.01.cf.eu01.stackit.cloud/fonts/museo/MuseoSansW05-700.eot?#iefix)
format("eot"),
url(https://cdn.apps.01.cf.eu01.stackit.cloud/fonts/museo/MuseoSansW05-700.woff2)
format("woff2"),
url(https://cdn.apps.01.cf.eu01.stackit.cloud/fonts/museo/MuseoSansW05-700.woff)
format("woff"),
url(https://cdn.apps.01.cf.eu01.stackit.cloud/fonts/museo/MuseoSansW05-700.ttf)
format("truetype");
}
.font-weight-700 {
font-weight: 700 !important;
}
@font-face {
font-weight: 900;
font-family: MuseoSansW05;
src: url(https://cdn.apps.01.cf.eu01.stackit.cloud/fonts/museo/MuseoSansW05-900.eot?#iefix);
src: url(https://cdn.apps.01.cf.eu01.stackit.cloud/fonts/museo/MuseoSansW05-900.eot?#iefix)
format("eot"),
url(https://cdn.apps.01.cf.eu01.stackit.cloud/fonts/museo/MuseoSansW05-900.woff2)
format("woff2"),
url(https://cdn.apps.01.cf.eu01.stackit.cloud/fonts/museo/MuseoSansW05-900.woff)
format("woff"),
url(https://cdn.apps.01.cf.eu01.stackit.cloud/fonts/museo/MuseoSansW05-900.ttf)
format("truetype");
}
body {
font-family: MuseoSansW05, Helvetica, Arial, sans-serif;
line-height: 1.9411764706;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: MuseoSansW05, Helvetica, Arial, sans-serif;
font-weight: 500;
}
h1 {
font-size: 2.125rem;
line-height: 1.5;
}
h2 {
font-size: 1.5rem;
line-height: 1.5;
margin: 1.75rem 0;
}
h3 {
font-size: 1.25rem;
line-height: 1.5;
margin: 1.25rem 0;
}
h4 {
font-size: 1rem;
line-height: 1.5;
}
h5 {
font-size: 0.875rem;
line-height: 1.5;
margin: 0.875rem 0;
}
/* STACKIT Chatbot Styles */
.rcb-chat-input {
background-color: var(--ifm-background-surface-color) !important;
border: 1px solid var(--color-background-accent-subtler-border) !important;
border-radius: 4px !important;
}
.rcb-chat-input-textarea {
color: var(--ifm-font-color-base) !important;
background-color: transparent !important;
font-family: MuseoSansW05, Helvetica, Arial, sans-serif !important;
}
/* Dark mode overrides for chatbot */
[data-theme="dark"] .rcb-chat-input {
background-color: var(--ifm-background-surface-color) !important;
border-color: var(--color-background-accent-subtler-border) !important;
}
[data-theme="dark"] .rcb-chat-input-textarea {
color: var(--ifm-font-color-base) !important;
}
/* Additional chatbot styling for brand consistency */
.rcb-header {
background-color: var(--ifm-navbar-background-color) !important;
color: var(--ifm-color-primary-lightest) !important;
}
.rcb-bot-bubble {
background-color: var(--ifm-color-primary) !important;
color: white !important;
}
.rcb-user-bubble {
background-color: var(--color-background-accent-subtler) !important;
color: var(--ifm-font-color-base) !important;
}
.rcb-send-button {
background-color: var(--ifm-color-primary) !important;
}
/* STACKIT Chatbot Button Styling */
.rcb-chat-button {
background-color: var(--ifm-color-primary) !important;
width: 60px !important;
height: 60px !important;
border-radius: 30px !important;
box-shadow: 0 4px 12px rgba(4, 84, 98, 0.25) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.rcb-chat-button:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 16px rgba(4, 84, 98, 0.3) !important;
background-color: var(--color-text-accent-hovered) !important;
}
/* Chat button icon styling */
.rcb-chat-button svg {
width: 30px !important;
height: 30px !important;
fill: white !important;
}
/* Tooltip styling */
/*
.rcb-chat-tooltip {
background-color: white !important;
color: var(--ifm-color-primary-dark) !important;
border-radius: 8px !important;
padding: 12px 16px !important;
font-family: MuseoSansW05, Helvetica, Arial, sans-serif !important;
font-weight: 500 !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
border-left: 4px solid var(--ifm-color-primary) !important;
max-width: 220px !important;
}
*/
/* Dark mode overrides */
[data-theme="dark"] .rcb-chat-tooltip {
background-color: var(--ifm-navbar-background-color) !important;
color: var(--ifm-color-primary-lightest) !important;
border-left: 4px solid var(--ifm-color-primary) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
/* Notification badge styling */
.rcb-notification-badge {
background-color: #ff0555 !important; /* Coral color for notifications */
border: 2px solid white !important;
}
/* STACKIT Chatbot Toggle Button Styling */
.rcb-toggle-button {
background-color: transparent !important;
border-radius: 4px !important;
transition: background-color 0.2s ease !important;
margin: 0 2px !important;
padding: 6px !important;
background-image: none !important;
}
.rcb-toggle-button:hover {
background-color: rgba(4, 84, 98, 0.1) !important;
}
/* Toggle button icon styling */
.rcb-toggle-button svg {
width: 42px !important;
height: 42px !important;
fill: var(--ifm-color-primary) !important;
}
/* Active/toggled state */
.rcb-toggle-button[data-active="true"] {
background-color: rgba(4, 84, 98, 0.15) !important;
}
/* Dark mode overrides for toggle buttons */
[data-theme="dark"] .rcb-toggle-button:hover {
background-color: rgba(0, 195, 205, 0.15) !important;
}
[data-theme="dark"] .rcb-toggle-button svg {
fill: var(--ifm-color-primary-lightest) !important;
}
[data-theme="dark"] .rcb-toggle-button[data-active="true"] {
background-color: rgba(0, 195, 205, 0.25) !important;
}
/* Media Queries for hiding elements */
@media (max-width: 768px) {
.hide-on-mobile {
display: none !important;
}
}
@media (min-width: 769px) {
.hide-on-desktop {
display: none !important;
}
}
.courseContainer_Sf6p {
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
margin-bottom: 1.5rem;
background-color: var(--ifm-card-background-color);
overflow: hidden;
transition: all 0.3s ease;
}
.courseContainer_Sf6p:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
.courseHeader_1SXS {
padding: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
border-bottom: 1px solid var(--ifm-color-emphasis-200);
}
.courseInfo_oUBh {
flex: 1;
}
.courseTitle_RiKx {
margin-bottom: 0.5rem;
font-size: 1.5rem;
color: var(--ifm-heading-color);
}
.courseTitle_RiKx a {
color: inherit;
-webkit-text-decoration: none;
text-decoration: none;
}
.courseTitle_RiKx a:hover {
color: var(--ifm-link-color);
}
.courseDescription_H4fA {
margin-top: 0.5rem;
color: var(--ifm-color-emphasis-700);
font-size: 0.9rem;
line-height: 1.5;
}
.courseProgress_RbBj {
display: flex;
align-items: center;
margin-top: 0.75rem;
}
.courseState_xNnD {
margin-top: 0.5rem;
font-size: 0.9rem;
color: var(--ifm-color-emphasis-700);
}
.courseID_bYLl {
margin-top: 0.5rem;
font-size: 0.85rem;
color: var(--ifm-color-emphasis-600);
background-color: var(--ifm-color-emphasis-100);
padding: 0.2rem 0.5rem;
border-radius: 4px;
display: inline-block;
}
.progressBar_Mg1C {
flex: 1;
height: 8px;
background-color: var(--ifm-color-emphasis-200);
border-radius: 4px;
margin-right: 10px;
overflow: hidden;
}
.progressFill_sBHI {
height: 100%;
background-color: var(--ifm-color-primary);
border-radius: 4px;
}
.expandButton_NzvS {
background: transparent;
border: none;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
border-radius: 50%;
cursor: pointer;
color: var(--ifm-color-emphasis-700);
}
.expandButton_NzvS:hover {
background-color: var(--ifm-color-emphasis-100);
}
.modulesContainer_svYf {
padding: 1.5rem;
background-color: var(--ifm-background-surface-color);
}
.modulesHeading_UPeJ {
font-size: 1.1rem;
margin-bottom: 1rem;
color: var(--ifm-color-emphasis-700);
}
.modulesList_ya08 {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.moduleItem_ZJD6 {
padding: 0.75rem 1rem;
border-radius: 6px;
background-color: var(--ifm-card-background-color);
transition: all 0.2s ease;
}
.moduleItem_ZJD6:hover {
background-color: var(--ifm-color-emphasis-100);
}
.moduleItem_ZJD6 a {
display: block;
color: var(--ifm-font-color-base);
-webkit-text-decoration: none;
text-decoration: none;
}
.moduleHeader_GRvi {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.moduleTitle_VxMa {
font-weight: 500;
}
.moduleId_jZW0 {
font-size: 0.8rem;
color: var(--ifm-color-emphasis-600);
background-color: var(--ifm-color-emphasis-100);
padding: 0.2rem 0.5rem;
border-radius: 4px;
}
.moduleDescription_pxUj {
margin-top: 0.5rem;
font-size: 0.85rem;
color: var(--ifm-color-emphasis-700);
line-height: 1.4;
}
.moduleProgress_eWcH {
display: flex;
align-items: center;
margin-top: 0.5rem;
font-size: 0.85rem;
}
.moduleState_qO9B {
margin-top: 0.25rem;
font-size: 0.85rem;
color: var(--ifm-color-emphasis-700);
}
.noModules_OhWl {
color: var(--ifm-color-emphasis-600);
font-style: italic;
}
.loadingContainer_pG4w, .errorContainer_z0qb {
padding: 2rem;
text-align: center;
border-radius: 8px;
background-color: var(--ifm-color-emphasis-100);
}
.errorContainer_z0qb {
color: var(--ifm-color-danger);
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.backToTopButton_sjWU {
position: fixed;
right: 1.3rem;
bottom: 1.3rem;
border-radius: 50%;
background-color: var(--ifm-color-emphasis-200);
width: 3rem;
height: 3rem;
z-index: calc(var(--ifm-z-index-fixed) - 1);
box-shadow: var(--ifm-global-shadow-lw);
transition: all var(--ifm-transition-fast)
var(--ifm-transition-timing-default);
opacity: 0;
transform: scale(0);
visibility: hidden;
}
.backToTopButton_sjWU::after {
content: ' ';
display: inline-block;
-webkit-mask: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem no-repeat;
mask: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem no-repeat;
background-color: var(--ifm-color-emphasis-1000);
width: 100%;
height: 100%;
}
@media (hover: hover) {
.backToTopButton_sjWU:hover {
background-color: var(--ifm-color-emphasis-300);
}
}
.backToTopButtonShow_xfvO {
opacity: 1;
transform: scale(1);
visibility: visible;
}
/* Futuristic Course Manager Styles */
:root {
--neon-blue: #00d4ff;
--neon-purple: #bf00ff;
--neon-green: #00ff88;
--dark-bg: #0a0a0f;
--card-bg: rgba(15, 15, 25, 0.8);
--glass-bg: rgba(255, 255, 255, 0.05);
--border-glow: rgba(0, 212, 255, 0.3);
--text-primary: #ffffff;
--text-secondary: #b8bcc8;
--text-accent: var(--neon-blue);
}
.gradientBackground_gLEj {
background:
radial-gradient(circle at 20% 80%, rgba(0, 212, 255, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(191, 0, 255, 0.15) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(0, 255, 136, 0.1) 0%, transparent 50%),
linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
min-height: 100vh;
position: relative;
overflow: hidden;
}
.gradientBackground_gLEj::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
repeating-linear-gradient(
90deg,
transparent,
transparent 98px,
rgba(0, 212, 255, 0.03) 100px
),
repeating-linear-gradient(
0deg,
transparent,
transparent 98px,
rgba(0, 212, 255, 0.03) 100px
);
pointer-events: none;
}
.header_tQbr {
text-align: center;
margin: 3rem auto 4rem;
position: relative;
max-width: 800px;
}
.title_GO7w {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
margin-bottom: 1rem;
background: linear-gradient(
45deg,
var(--neon-blue) 0%,
var(--neon-purple) 50%,
var(--neon-green) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
position: relative;
letter-spacing: -0.02em;
}
.title_GO7w::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background: linear-gradient(90deg, transparent, var(--neon-blue), transparent);
border-radius: 2px;
box-shadow: 0 0 10px var(--neon-blue);
}
.subtitle_QpHV {
font-size: 1.2rem;
color: var(--text-secondary);
margin-bottom: 2rem;
font-weight: 300;
letter-spacing: 0.5px;
}
/* Navigation Cards */
.navigationContainer_OKae {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.navCard_VWyl {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid var(--border-glow);
border-radius: 20px;
padding: 2.5rem;
text-align: center;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.navCard_VWyl::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(0, 212, 255, 0.1),
transparent
);
transition: left 0.6s ease;
}
.navCard_VWyl:hover::before {
left: 100%;
}
.navCard_VWyl:hover {
transform: translateY(-8px) scale(1.02);
border-color: var(--neon-blue);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3),
0 0 30px rgba(0, 212, 255, 0.3),
inset 0 0 30px rgba(0, 212, 255, 0.1);
}
.navCard_VWyl.active_t5FX {
border-color: var(--neon-purple);
box-shadow:
0 0 30px rgba(191, 0, 255, 0.4),
inset 0 0 30px rgba(191, 0, 255, 0.1);
}
.navCardIcon_cC2v {
font-size: 3rem;
margin-bottom: 1.5rem;
background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.navCardTitle_cYWz {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 1rem;
}
.navCardDescription_QU2n {
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.6;
}
/* Content Area */
.contentArea_AaPH {
max-width: 1200px;
margin: 4rem auto 0;
padding: 0 2rem;
position: relative;
}
.contentCard_I12z {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid var(--border-glow);
border-radius: 20px;
padding: 3rem;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.2),
0 0 20px rgba(0, 212, 255, 0.1);
animation: slideInUp_JOTO 0.6s ease-out;
}
@keyframes slideInUp_JOTO {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Course Creation Wizard */
.wizardContainer_eACl {
position: relative;
}
.wizardHeader_dodQ {
text-align: center;
margin-bottom: 3rem;
}
.wizardTitle_SuXC {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
background: linear-gradient(45deg, var(--neon-blue), var(--neon-green));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.wizardSubtitle_KK_m {
color: var(--text-secondary);
font-size: 1.1rem;
margin-bottom: 2rem;
}
.progressSteps_mVSQ {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 3rem;
gap: 2rem;
}
.progressStep_hJBK {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.stepNumber_cx96 {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--glass-bg);
border: 2px solid var(--border-glow);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 0.5rem;
transition: all 0.3s ease;
}
.stepNumber_cx96.active_t5FX {
background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple));
border-color: var(--neon-blue);
color: white;
box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}
.stepNumber_cx96.completed_C9Wb {
background: var(--neon-green);
border-color: var(--neon-green);
color: var(--dark-bg);
}
.stepLabel_yir0 {
font-size: 0.9rem;
color: var(--text-secondary);
text-align: center;
}
.stepConnector_XZrj {
position: absolute;
top: 25px;
left: 50px;
width: calc(2rem + 50px);
height: 2px;
background: var(--border-glow);
}
.stepConnector_XZrj.completed_C9Wb {
background: var(--neon-green);
box-shadow: 0 0 10px var(--neon-green);
}
/* Form Styles */
.formSection_as9C {
margin-bottom: 2.5rem;
}
.sectionTitle_L60B {
font-size: 1.3rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.sectionIcon_DVhD {
color: var(--neon-blue);
}
.formGrid_PANn {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.inputGroup_A66b {
position: relative;
}
.inputLabel_iZcv {
display: block;
font-size: 0.9rem;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.inputField_kjqG,
.textareaField_kQO9,
.selectField_Tk_K {
width: 100%;
padding: 1rem 1.5rem;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
color: var(--text-primary);
font-size: 1rem;
transition: all 0.3s ease;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.inputField_kjqG:focus,
.textareaField_kQO9:focus,
.selectField_Tk_K:focus {
outline: none;
border-color: var(--neon-blue);
box-shadow:
0 0 20px rgba(0, 212, 255, 0.3),
inset 0 0 20px rgba(0, 212, 255, 0.1);
background: rgba(0, 0, 0, 0.5);
}
.inputField_kjqG::placeholder,
.textareaField_kQO9::placeholder {
color: var(--text-secondary);
}
.textareaField_kQO9 {
min-height: 120px;
resize: vertical;
}
.inputHint_tVk6 {
font-size: 0.8rem;
color: var(--text-secondary);
margin-top: 0.5rem;
opacity: 0.8;
}
/* Action Buttons */
.actionButtons_r0kL {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 3rem;
gap: 1rem;
}
.backButton_RYbO {
background: transparent;
border: 1px solid var(--border-glow);
color: var(--text-secondary);
padding: 0.8rem 1.5rem;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
}
.backButton_RYbO:hover {
border-color: var(--neon-blue);
color: var(--neon-blue);
box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}
.primaryButton_eGYF {
background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple));
border: none;
color: white;
padding: 1rem 2rem;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
min-width: 150px;
}
.primaryButton_eGYF::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}
.primaryButton_eGYF:hover::before {
left: 100%;
}
.primaryButton_eGYF:hover {
transform: translateY(-2px);
box-shadow:
0 10px 25px rgba(0, 0, 0, 0.3),
0 0 25px rgba(0, 212, 255, 0.5);
}
.primaryButton_eGYF:disabled {
background: rgba(255, 255, 255, 0.1);
color: var(--text-secondary);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* Loading States */
.loadingOverlay_k4rl {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.loadingContent_hXMS {
text-align: center;
max-width: 500px;
padding: 3rem;
background: var(--glass-bg);
border: 1px solid var(--border-glow);
border-radius: 20px;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
.loadingSpinner_gIWY {
width: 80px;
height: 80px;
border: 3px solid rgba(0, 212, 255, 0.1);
border-top: 3px solid var(--neon-blue);
border-radius: 50%;
animation: spin_iAKM 1s linear infinite;
margin: 0 auto 2rem;
}
.loadingText_xlLB {
font-size: 1.2rem;
color: var(--text-primary);
margin-bottom: 1rem;
}
.loadingStep_XFdG {
color: var(--text-secondary);
font-size: 0.95rem;
margin-bottom: 2rem;
}
.progressBar_P3hE {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
overflow: hidden;
}
.progressFill_gg19 {
height: 100%;
background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple));
border-radius: 3px;
transition: width 0.5s ease;
box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}
@keyframes spin_iAKM {
to { transform: rotate(360deg); }
}
/* Success State */
.successContainer_R7dZ {
text-align: center;
padding: 3rem;
}
.successIcon_Cyse {
font-size: 4rem;
color: var(--neon-green);
margin-bottom: 2rem;
animation: successPulse_v7N4 2s ease-in-out infinite alternate;
}
@keyframes successPulse_v7N4 {
from { text-shadow: 0 0 20px rgba(0, 255, 136, 0.5); }
to { text-shadow: 0 0 30px rgba(0, 255, 136, 0.8); }
}
.successTitle_jmTe {
font-size: 2rem;
font-weight: 600;
color: var(--neon-green);
margin-bottom: 1rem;
}
.successMessage_dgf6 {
color: var(--text-secondary);
font-size: 1.1rem;
margin-bottom: 2rem;
line-height: 1.6;
}
.resultDisplay_zG_R {
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(0, 255, 136, 0.3);
border-radius: 12px;
padding: 1.5rem;
margin: 2rem 0;
text-align: left;
max-height: 300px;
overflow-y: auto;
}
.resultDisplay_zG_R pre {
color: var(--text-primary);
font-family: 'JetBrains Mono', monospace;
font-size: 0.9rem;
line-height: 1.5;
margin: 0;
white-space: pre-wrap;
}
/* Course Management */
.coursesGrid_lepj {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.courseCard_A6Ck {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
border: 1px solid var(--border-glow);
border-radius: 16px;
padding: 2rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.courseCard_A6Ck::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple), var(--neon-green));
}
.courseCard_A6Ck:hover {
transform: translateY(-5px);
border-color: var(--neon-blue);
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.2),
0 0 25px rgba(0, 212, 255, 0.2);
}
.courseTitle_oMLo {
font-size: 1.4rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 1rem;
}
.courseStats_Poyg {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
}
.courseStat_SsCW {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-secondary);
font-size: 0.9rem;
}
.courseActions_IKBw {
display: flex;
gap: 1rem;
}
.courseAction__iv1 {
flex: 1;
padding: 0.8rem;
border: 1px solid var(--border-glow);
background: transparent;
color: var(--text-primary);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.9rem;
font-weight: 500;
}
.courseAction__iv1:hover {
border-color: var(--neon-blue);
color: var(--neon-blue);
box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}
/* Floating particles animation */
.gradientBackground_gLEj::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(2px 2px at 20px 30px, rgba(0, 212, 255, 0.3), transparent),
radial-gradient(2px 2px at 40px 70px, rgba(191, 0, 255, 0.3), transparent),
radial-gradient(1px 1px at 90px 40px, rgba(0, 255, 136, 0.3), transparent),
radial-gradient(1px 1px at 130px 80px, rgba(0, 212, 255, 0.3), transparent);
background-repeat: repeat;
background-size: 150px 100px;
animation: float_CCsp 20s linear infinite;
opacity: 0.6;
pointer-events: none;
}
@keyframes float_CCsp {
0% { transform: translateY(0px) translateX(0px); }
33% { transform: translateY(-10px) translateX(10px); }
66% { transform: translateY(-5px) translateX(-5px); }
100% { transform: translateY(0px) translateX(0px); }
}
/* Responsive Design */
@media (max-width: 768px) {
.navigationContainer_OKae {
grid-template-columns: 1fr;
padding: 0 1rem;
}
.contentArea_AaPH {
padding: 0 1rem;
}
.contentCard_I12z {
padding: 2rem 1.5rem;
}
.formGrid_PANn {
grid-template-columns: 1fr;
}
.actionButtons_r0kL {
flex-direction: column;
}
.coursesGrid_lepj {
grid-template-columns: 1fr;
}
.progressSteps_mVSQ {
flex-direction: column;
gap: 1rem;
}
.stepConnector_XZrj {
display: none;
}
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.skipToContent_fXgn {
position: fixed;
top: 1rem;
left: 100%;
z-index: calc(var(--ifm-z-index-fixed) + 1);
padding: calc(var(--ifm-global-spacing) / 2) var(--ifm-global-spacing);
color: var(--ifm-color-emphasis-900);
background-color: var(--ifm-background-surface-color);
}
.skipToContent_fXgn:focus {
left: 1rem;
box-shadow: var(--ifm-global-shadow-md);
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.closeButton_CVFx {
padding: 0;
line-height: 0;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.content_knG7 {
font-size: 85%;
text-align: center;
padding: 5px 0;
}
.content_knG7 a {
color: inherit;
-webkit-text-decoration: underline;
text-decoration: underline;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
:root {
--docusaurus-announcement-bar-height: auto;
}
.announcementBar_mb4j {
display: flex;
align-items: center;
height: var(--docusaurus-announcement-bar-height);
background-color: var(--ifm-color-white);
color: var(--ifm-color-black);
/*
Unfortunately we can't make announcement bar render above the navbar
IE need to use border-bottom instead of shadow
See https://github.com/facebookincubator/infima/issues/275
box-shadow: var(--ifm-global-shadow-lw);
z-index: calc(var(--ifm-z-index-fixed) + 1);
*/
border-bottom: 1px solid var(--ifm-color-emphasis-100);
}
html[data-announcement-bar-initially-dismissed='true'] .announcementBar_mb4j {
display: none;
}
.announcementBarPlaceholder_vyr4 {
flex: 0 0 10px;
}
.announcementBarClose_gvF7 {
flex: 0 0 30px;
align-self: stretch;
}
.announcementBarContent_xLdY {
flex: 1 1 auto;
}
@media print {
.announcementBar_mb4j {
display: none;
}
}
@media (min-width: 997px) {
:root {
--docusaurus-announcement-bar-height: 30px;
}
.announcementBarPlaceholder_vyr4,
.announcementBarClose_gvF7 {
flex-basis: 50px;
}
}
.quiz-wrapper {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 3rem;
margin-top: 2rem;
}
.quiz-container {
padding: 2rem;
margin: 2rem auto;
box-shadow: 0 0.2rem 3rem rgba(0, 0, 0, 0.1);
text-align: center;
background-color: #0f1b2a;
border-radius: 10px;
color: #fff;
}
.quiz-question {
font-weight: bold;
margin-bottom: 1rem;
font-size: 1.2rem;
}
.quiz-options {
list-style-type: none;
}
.quiz-option {
padding: 1.5rem;
position: relative;
transition: background-color 0.3s ease;
border: 2px solid transparent;
border-radius: 6px;
}
.quiz-option.selected {
border-color: #00aeff;
}
.quiz-option.correct {
border-color: #4caf50;
}
.quiz-option.incorrect {
border-color: #f44336;
}
.quiz-option:hover {
background-color: #1e2a3a;
border-radius: 6px;
}
.quiz-option label {
display: flex;
align-items: center;
cursor: pointer;
left: 0;
}
@keyframes popIn {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.option-feedback {
position: absolute;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
animation: popIn 0.3s ease-in-out;
}
.quiz-submit {
padding: 0.5rem 2.4rem;
margin-top: 1rem;
}
.feedback-warning {
color: #b00020;
border: 1px solid #b00020;
background-color: #ffe6e6;
padding: 0.75rem 1rem;
border-radius: 8px;
margin-top: 1rem;
}
.feedback-text {
margin-top: 1rem;
font-size: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
justify-content: center;
}
.feedback-container {
margin-top: 1rem;
}
.feedback-message {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 1rem;
}
.quiz-feedback-summary {
text-align: left;
background-color: #1d2b3a;
padding: 1rem 1.5rem;
border-radius: 8px;
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
max-width: 300px;
color: white;
}
.quiz-feedback-summary h3 {
margin-bottom: 1rem;
font-size: 1.1rem;
}
.quiz-feedback-summary ul {
list-style: none;
padding: 0;
margin: 0;
}
.quiz-feedback-summary li {
display: flex;
align-items: center;
margin-bottom: 0.75rem;
gap: 0.5rem;
}
.quiz-feedback-summary li.correct {
color: #4caf50; /* grün */
}
.quiz-feedback-summary li.wrong {
color: #f44336; /* rot */
}
.quiz-explanation {
margin-top: 1rem;
padding: 1rem;
background-color: #f0f4f8;
border-left: 4px solid #4caf50;
border-radius: 4px;
font-size: 0.9rem;
color: #333;
line-height: 1.5;
}
.quiz-explanation--incorrect {
background-color: #fff1f1;
border-left-color: #e53e3e;
}
.quiz-explanation p {
margin: 0;
}
.radio-button-label {
display: inline-flex;
align-items: center;
cursor: pointer;
font-size: 16px;
}
.radio-button-label.disabled {
cursor: not-allowed;
color: #aaa;
}
.radio-button-input {
display: none;
}
.radio-button-custom {
width: 24px;
height: 24px;
border: 2px solid white;
border-radius: 50%;
margin-right: 10px;
display: inline-block;
position: relative;
background-color: transparent;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.radio-button-label.disabled .radio-button-custom {
border-color: #ccc;
background-color: #eee;
}
.radio-button-custom::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 14px;
height: 14px;
border-radius: 50%;
background-color: var(--accent-primary);
transition: transform 0.2s ease-in-out;
}
.radio-button-input:checked + .radio-button-custom {
background-color: var(--accent-primary);
}
.radio-button-input:checked + .radio-button-custom::after {
transform: translate(-50%, -50%) scale(1);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.quiz-content {
animation: fadeIn 0.5s ease-in-out;
}
.wizard-container {
}
.progress-bar-container {
width: 100%;
border-radius: 4px;
margin-bottom: 10px;
background: white;
}
.progress-bar {
height: 5px;
background-color: var(--orange-accent);
border-radius: 4px;
transition: width 0.3s ease-in-out;
}
.question-header {
font-size: 1.1em;
font-weight: bold;
margin-bottom: 16px;
}
.navigation {
display: flex;
justify-content: space-between;
align-items: center;
justify-self: center;
}
.button {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
background-color: var(--ifm-color-primary);
color: white;
}
.button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.summary {
text-align: center;
}
.summary h2 {
margin-bottom: 16px;
}
.summary-list {
text-align: left;
margin-top: 24px;
}
.summary-item {
padding: 16px;
border-bottom: 1px solid #eee;
}
.summary-item:last-child {
border-bottom: none;
}
.correct {
color: green;
}
.incorrect {
color: red;
}
.explanation {
font-style: italic;
color: #666;
margin-top: 8px;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.toggle_vylO {
width: 2rem;
height: 2rem;
}
.toggleButton_gllP {
-webkit-tap-highlight-color: transparent;
align-items: center;
display: flex;
justify-content: center;
width: 100%;
height: 100%;
border-radius: 50%;
transition: background var(--ifm-transition-fast);
}
.toggleButton_gllP:hover {
background: var(--ifm-color-emphasis-200);
}
.toggleIcon_g3eP {
display: none;
}
[data-theme-choice='system'] .systemToggleIcon_QzmC,
[data-theme-choice='light'] .lightToggleIcon_pyhR,
[data-theme-choice='dark'] .darkToggleIcon_wfgR {
display: initial;
}
.toggleButtonDisabled_aARS {
cursor: not-allowed;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.darkNavbarColorModeToggle_X3D1:hover {
background: var(--ifm-color-gray-800);
}
/* STACKIT Brand Colors */
:root {
--stackit-navy: #0a1e2d;
--stackit-spacemint: #00c3cd;
--stackit-pumpkin: #ef7c00;
--stackit-psychedelic: #5f23a0;
--stackit-sunshine: #fafc00;
--stackit-fresh-green: #00c387;
--stackit-coral: #ff0555;
--stackit-grey-10: #EDEDED;
--stackit-grey-20: #DADADA;
--stackit-grey-30: #C6C6C6;
--stackit-grey-40: #B2B2B2;
--stackit-grey-50: #9D9D9C;
--stackit-grey-60: #878787;
--stackit-grey-70: #706F6F;
--stackit-grey-80: #575756;
--stackit-grey-90: #3C3C3B;
}
.playgroundLab_kiQN {
border: 2px solid var(--stackit-spacemint);
border-radius: 12px;
padding: 2rem;
margin-bottom: 2rem;
background: var(--ifm-card-background-color);
box-shadow: 0 4px 12px rgba(10, 30, 45, 0.1);
}
.header_K5fx {
margin-bottom: 1.5rem;
}
.header_K5fx h3 {
margin: 0 0 0.5rem 0;
color: var(--stackit-navy);
font-size: 1.5rem;
font-weight: 700;
}
[data-theme='dark'] .header_K5fx h3 {
color: var(--stackit-spacemint);
}
.header_K5fx p {
margin: 0;
color: var(--stackit-grey-70);
font-size: 1.1rem;
}
.sessionInfo_oQAq {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1rem;
padding: 1rem;
background: var(--ifm-color-emphasis-100);
border-radius: var(--ifm-global-radius);
}
.projectLink_QBZW a {
color: var(--ifm-color-primary);
-webkit-text-decoration: none;
text-decoration: none;
font-weight: 600;
}
.projectLink_QBZW a:hover {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.countdown_One2 {
font-weight: 600;
color: var(--ifm-color-success);
}
.expired_rUcl {
font-weight: 600;
color: var(--ifm-color-danger);
}
.taskPreview_B9Z7 {
background: var(--ifm-color-emphasis-100);
padding: 1rem;
border-radius: var(--ifm-global-radius);
margin-bottom: 1.5rem;
}
.taskPreview_B9Z7 h4 {
margin: 0 0 0.5rem 0;
}
.taskPreview_B9Z7 ul {
margin: 0;
padding-left: 1.5rem;
}
.taskPreview_B9Z7 li {
margin-bottom: 0.25rem;
}
.progressSummary_y1uJ {
margin-bottom: 1.5rem;
}
.progressBar_hL3T {
width: 100%;
height: 8px;
background: var(--ifm-color-emphasis-200);
border-radius: 4px;
overflow: hidden;
margin-bottom: 0.5rem;
}
.progressFill_xwJN {
height: 100%;
background: linear-gradient(90deg, var(--ifm-color-success), var(--ifm-color-primary));
transition: width 0.3s ease;
}
.progressText_RHpR {
text-align: center;
font-weight: 700;
color: var(--stackit-navy);
font-size: 1.1rem;
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
letter-spacing: 0.5px;
}
[data-theme='dark'] .progressText_RHpR {
color: var(--stackit-spacemint);
}
.actions_hioe {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
}
.startButton_JrSK {
background: linear-gradient(135deg, var(--stackit-spacemint), var(--stackit-navy));
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 12px;
cursor: pointer;
font-size: 1.1rem;
font-weight: 700;
transition: all 0.2s ease;
box-shadow: 0 4px 8px rgba(0, 195, 205, 0.2);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.startButton_JrSK:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.startButton_JrSK:disabled {
background: var(--ifm-color-emphasis-500);
cursor: not-allowed;
transform: none;
opacity: 0.6;
}
.validateAllButton_fLDP {
background: linear-gradient(135deg, var(--stackit-fresh-green), var(--stackit-spacemint));
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
cursor: pointer;
font-weight: 700;
font-size: 1rem;
transition: all 0.2s ease;
box-shadow: 0 2px 6px rgba(0, 195, 135, 0.3);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.validateAllButton_fLDP:hover:not(:disabled) {
background: linear-gradient(135deg, var(--stackit-fresh-green), var(--stackit-navy));
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 195, 135, 0.4);
}
.validateAllButton_fLDP:disabled {
background-color: var(--ifm-color-emphasis-500);
cursor: not-allowed;
opacity: 0.6;
}
.resetButton_m9hC {
background: linear-gradient(135deg, var(--stackit-grey-30), var(--stackit-grey-40));
color: var(--stackit-navy);
border: 2px solid var(--stackit-grey-40);
padding: 0.75rem 1.5rem;
border-radius: 8px;
cursor: pointer;
font-weight: 700;
font-size: 1rem;
transition: all 0.2s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.resetButton_m9hC:hover {
background: linear-gradient(135deg, var(--stackit-grey-40), var(--stackit-grey-50));
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(109, 111, 111, 0.3);
}
.taskList_B5pd {
display: flex;
flex-direction: column;
gap: 1rem;
}
.taskItem_QzFL {
border: 1px solid var(--ifm-color-emphasis-300);
border-radius: var(--ifm-global-radius);
padding: 1.5rem;
background: var(--ifm-card-background-color);
transition: all 0.2s ease;
}
.taskItem_QzFL:hover {
border-color: var(--ifm-color-primary);
box-shadow: var(--ifm-global-shadow-md);
}
.taskHeader_GUKh {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.taskTitle_WcZ8 {
display: flex;
align-items: center;
gap: 0.75rem;
flex: 1;
}
.taskTitle_WcZ8 h4 {
margin: 0;
color: var(--ifm-color-emphasis-900);
}
.taskScore_gr9G {
font-weight: 700;
color: var(--stackit-navy);
background: linear-gradient(135deg, var(--stackit-grey-10), #f8f9fa);
padding: 0.6rem 1rem;
border-radius: 10px;
font-size: 1.1rem;
border: 2px solid var(--stackit-grey-20);
min-width: 100px;
text-align: center;
box-shadow: 0 2px 4px rgba(10, 30, 45, 0.1);
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
letter-spacing: 0.5px;
}
[data-theme='dark'] .taskScore_gr9G {
color: var(--stackit-spacemint);
background: linear-gradient(135deg, var(--stackit-grey-90), var(--stackit-grey-80));
border-color: var(--stackit-grey-70);
box-shadow: 0 2px 4px rgba(0, 195, 205, 0.2);
}
.checkmarkCompleted_gQE2 {
font-size: 1.2rem;
}
.checkmarkPending_HO0s {
font-size: 1.2rem;
opacity: 0.6;
}
.validateButton_BX_e {
background: linear-gradient(135deg, var(--stackit-spacemint), var(--stackit-navy));
color: white;
border: none;
padding: 0.6rem 1.2rem;
border-radius: 8px;
cursor: pointer;
font-weight: 700;
font-size: 0.95rem;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 195, 205, 0.3);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.validateButton_BX_e:hover:not(:disabled) {
background: linear-gradient(135deg, var(--stackit-navy), var(--stackit-psychedelic));
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 195, 205, 0.4);
}
.validateButton_BX_e:disabled {
background-color: var(--ifm-color-emphasis-500);
cursor: not-allowed;
opacity: 0.6;
}
.taskDescription_PU81 {
margin: 0 0 1rem 0;
color: var(--ifm-color-emphasis-700);
line-height: 1.5;
}
.validationResults_uBy2 {
background: var(--ifm-color-emphasis-100);
border-radius: var(--ifm-global-radius);
padding: 1rem;
border-left: 4px solid var(--ifm-color-info);
}
.feedback_FubS {
font-weight: 600;
margin-bottom: 1rem;
color: var(--ifm-color-emphasis-800);
}
.validationDetails_ml6A {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.validationRule_AFNZ {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem;
background: var(--ifm-card-background-color);
border-radius: 4px;
}
.ruleSuccess_qgYO {
font-size: 1.1rem;
}
.ruleFailed_cC_S {
font-size: 1.1rem;
}
.ruleMessage_Xujb {
flex: 1;
color: var(--ifm-color-emphasis-800);
}
.rulePoints_nEFE {
font-weight: 700;
color: var(--stackit-navy);
background: linear-gradient(135deg, var(--stackit-grey-10), #f0f9ff);
padding: 0.3rem 0.7rem;
border-radius: 6px;
font-size: 0.85rem;
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
letter-spacing: 0.3px;
border: 1px solid var(--stackit-grey-20);
box-shadow: 0 1px 3px rgba(10, 30, 45, 0.1);
}
[data-theme='dark'] .rulePoints_nEFE {
color: var(--stackit-spacemint);
background: linear-gradient(135deg, var(--stackit-grey-90), var(--stackit-grey-80));
border-color: var(--stackit-grey-70);
box-shadow: 0 1px 3px rgba(0, 195, 205, 0.2);
}
.error_hpHu {
background: var(--ifm-color-danger-contrast-background);
color: var(--ifm-color-danger-contrast-foreground);
padding: 1rem;
border-radius: var(--ifm-global-radius);
border-left: 4px solid var(--ifm-color-danger);
margin-bottom: 1rem;
font-weight: 600;
}
.taskGuidance_WNHV {
background: var(--ifm-color-info-contrast-background);
border-radius: var(--ifm-global-radius);
padding: 1.5rem;
margin-top: 1rem;
border-left: 4px solid var(--ifm-color-info);
}
.taskGuidance_WNHV h5 {
margin: 0 0 1rem 0;
color: var(--ifm-color-info-dark);
font-size: 1.1rem;
}
.stepByStep_HyXe {
margin-bottom: 1.5rem;
}
.guidanceStep_QeMm {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.75rem;
padding: 0.5rem;
background: var(--ifm-card-background-color);
border-radius: 6px;
border: 1px solid var(--ifm-color-emphasis-200);
}
.stepNumber_xR7Q {
background: linear-gradient(135deg, var(--stackit-spacemint), var(--stackit-navy));
color: white;
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
font-weight: 700;
flex-shrink: 0;
box-shadow: 0 2px 4px rgba(0, 195, 205, 0.3);
border: 2px solid white;
}
.stepText_Or8_ {
color: var(--ifm-color-emphasis-800);
line-height: 1.4;
font-size: 0.95rem;
}
.helpLinks_mkC8 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
padding-top: 1rem;
border-top: 1px solid var(--ifm-color-emphasis-200);
}
.helpLabel_jh1C {
font-weight: 600;
color: var(--ifm-color-emphasis-700);
font-size: 0.9rem;
}
.helpLink_Y2Vb {
background: linear-gradient(135deg, var(--stackit-spacemint), var(--stackit-psychedelic));
color: white;
padding: 0.5rem 1rem;
border-radius: 8px;
-webkit-text-decoration: none;
text-decoration: none;
font-size: 0.85rem;
font-weight: 600;
transition: all 0.2s ease;
border: 2px solid transparent;
box-shadow: 0 2px 4px rgba(0, 195, 205, 0.3);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.helpLink_Y2Vb:hover {
background: linear-gradient(135deg, var(--stackit-navy), var(--stackit-pumpkin));
color: white;
-webkit-text-decoration: none;
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 195, 205, 0.5);
}
.getStartedPrompt_Z_Po {
background: var(--ifm-color-success-contrast-background);
color: var(--ifm-color-success-contrast-foreground);
padding: 0.75rem;
border-radius: 6px;
margin-bottom: 1rem;
text-align: center;
border: 1px solid var(--ifm-color-success-light);
}
/* Dark mode specific adjustments */
[data-theme='dark'] .playgroundLab_kiQN {
box-shadow: var(--ifm-global-shadow-lw);
}
[data-theme='dark'] .startButton_JrSK:hover:not(:disabled) {
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
}
[data-theme='dark'] .taskItem_QzFL:hover {
box-shadow: var(--ifm-global-shadow-md);
}
[data-theme='dark'] .progressFill_xwJN {
background: linear-gradient(90deg, var(--ifm-color-success-dark), var(--ifm-color-primary-dark));
}
[data-theme='dark'] .error_hpHu {
background: var(--ifm-color-danger-contrast-background);
color: var(--ifm-color-danger-contrast-foreground);
}
/* Better contrast for dark mode */
[data-theme='dark'] .resetButton_m9hC {
background: linear-gradient(135deg, var(--stackit-grey-70), var(--stackit-grey-60));
color: var(--stackit-spacemint);
border-color: var(--stackit-grey-60);
}
[data-theme='dark'] .resetButton_m9hC:hover {
background: linear-gradient(135deg, var(--stackit-grey-60), var(--stackit-grey-50));
color: white;
}
[data-theme='dark'] .taskGuidance_WNHV {
background: var(--ifm-color-info-contrast-background);
border-left-color: var(--ifm-color-info-dark);
}
[data-theme='dark'] .guidanceStep_QeMm {
background: var(--ifm-color-emphasis-100);
border-color: var(--ifm-color-emphasis-300);
}
[data-theme='dark'] .helpLink_Y2Vb {
background: linear-gradient(135deg, var(--stackit-navy), var(--stackit-psychedelic));
color: var(--stackit-spacemint);
border-color: var(--stackit-grey-60);
}
[data-theme='dark'] .helpLink_Y2Vb:hover {
background: linear-gradient(135deg, var(--stackit-psychedelic), var(--stackit-pumpkin));
color: white;
}
/* Responsive design */
@media (max-width: 768px) {
.sessionInfo_oQAq {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}
.actions_hioe {
flex-direction: column;
}
.taskHeader_GUKh {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.validationRule_AFNZ {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.themedComponent_mlkZ {
display: none;
}
[data-theme='light'] .themedComponent--light_NVdE {
display: initial;
}
[data-theme='dark'] .themedComponent--dark_xIcU {
display: initial;
}
/*
JS disabled??? Show light version by default => better than showing nothing
TODO bad, but we currently always show light mode when there's no data-theme
*/
html:not([data-theme]) .themedComponent--light_NVdE {
display: initial;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
:root {
--docusaurus-collapse-button-bg: transparent;
--docusaurus-collapse-button-bg-hover: rgb(0 0 0 / 10%);
}
[data-theme='dark']:root {
--docusaurus-collapse-button-bg: rgb(255 255 255 / 5%);
--docusaurus-collapse-button-bg-hover: rgb(255 255 255 / 10%);
}
@media (min-width: 997px) {
.collapseSidebarButton_PEFL {
display: block !important;
background-color: var(--docusaurus-collapse-button-bg);
height: 40px;
position: sticky;
bottom: 0;
border-radius: 0;
border: 1px solid var(--ifm-toc-border-color);
}
.collapseSidebarButtonIcon_kv0_ {
transform: rotate(180deg);
margin-top: 4px;
}
[dir='rtl'] .collapseSidebarButtonIcon_kv0_ {
transform: rotate(0);
}
.collapseSidebarButton_PEFL:hover,
.collapseSidebarButton_PEFL:focus {
background-color: var(--docusaurus-collapse-button-bg-hover);
}
}
.collapseSidebarButton_PEFL {
display: none;
margin: 0;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.iconExternalLink_nPIU {
margin-left: 0.3rem;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.menuExternalLink_NmtK {
align-items: center;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
@media (min-width: 997px) {
.menuHtmlItem_M9Kj {
padding: var(--ifm-menu-link-padding-vertical)
var(--ifm-menu-link-padding-horizontal);
}
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
@media (min-width: 997px) {
.menu_SIkG {
flex-grow: 1;
padding: 0.5rem;
}
@supports (scrollbar-gutter: stable) {
.menu_SIkG {
padding: 0.5rem 0 0.5rem 0.5rem;
scrollbar-gutter: stable;
}
}
.menuWithAnnouncementBar_GW3s {
margin-bottom: var(--docusaurus-announcement-bar-height);
}
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
@media (min-width: 997px) {
.sidebar_njMd {
display: flex;
flex-direction: column;
height: 100%;
padding-top: var(--ifm-navbar-height);
width: var(--doc-sidebar-width);
}
.sidebarWithHideableNavbar_wUlq {
padding-top: 0;
}
.sidebarHidden_VK0M {
opacity: 0;
visibility: hidden;
}
.sidebarLogo_isFc {
display: flex !important;
align-items: center;
margin: 0 var(--ifm-navbar-padding-horizontal);
min-height: var(--ifm-navbar-height);
max-height: var(--ifm-navbar-height);
color: inherit !important;
-webkit-text-decoration: none !important;
text-decoration: none !important;
}
.sidebarLogo_isFc img {
margin-right: 0.5rem;
height: 2rem;
}
}
.sidebarLogo_isFc {
display: none;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
@media (min-width: 997px) {
.expandButton_TmdG {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: background-color var(--ifm-transition-fast) ease;
background-color: var(--docusaurus-collapse-button-bg);
}
.expandButton_TmdG:hover,
.expandButton_TmdG:focus {
background-color: var(--docusaurus-collapse-button-bg-hover);
}
.expandButtonIcon_i1dp {
transform: rotate(0);
}
[dir='rtl'] .expandButtonIcon_i1dp {
transform: rotate(180deg);
}
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
:root {
--doc-sidebar-width: 300px;
--doc-sidebar-hidden-width: 30px;
}
.docSidebarContainer_YfHR {
display: none;
}
@media (min-width: 997px) {
.docSidebarContainer_YfHR {
display: block;
width: var(--doc-sidebar-width);
margin-top: calc(-1 * var(--ifm-navbar-height));
border-right: 1px solid var(--ifm-toc-border-color);
will-change: width;
transition: width var(--ifm-transition-fast) ease;
clip-path: inset(0);
}
.docSidebarContainerHidden_DPk8 {
width: var(--doc-sidebar-hidden-width);
cursor: pointer;
}
.sidebarViewport_aRkj {
top: 0;
position: sticky;
height: 100%;
max-height: 100vh;
}
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.docMainContainer_TBSr {
display: flex;
width: 100%;
}
@media (min-width: 997px) {
.docMainContainer_TBSr {
flex-grow: 1;
max-width: calc(100% - var(--doc-sidebar-width));
}
.docMainContainerEnhanced_lQrH {
max-width: calc(100% - var(--doc-sidebar-hidden-width));
}
.docItemWrapperEnhanced_JWYK {
max-width: calc(
var(--ifm-container-width) + var(--doc-sidebar-width)
) !important;
}
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.docRoot_UBD9 {
display: flex;
width: 100%;
}
.docsWrapper_hBAB {
display: flex;
flex: 1 0 auto;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
When the navbar is sticky, ensure that on anchor click,
the browser does not scroll that anchor behind the navbar
See https://x.com/JoshWComeau/status/1332015868725891076
*/
.anchorWithStickyNavbar_LWe7 {
scroll-margin-top: calc(var(--ifm-navbar-height) + 0.5rem);
}
.anchorWithHideOnScrollNavbar_WYt5 {
scroll-margin-top: 0.5rem;
}
.hash-link {
opacity: 0;
padding-left: 0.5rem;
transition: opacity var(--ifm-transition-fast);
-webkit-user-select: none;
user-select: none;
}
.hash-link::before {
content: '#';
}
.hash-link:focus,
*:hover > .hash-link {
opacity: 1;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.cardContainer_fWXF {
--ifm-link-color: var(--ifm-color-emphasis-800);
--ifm-link-hover-color: var(--ifm-color-emphasis-700);
--ifm-link-hover-decoration: none;
box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
border: 1px solid var(--ifm-color-emphasis-200);
transition: all var(--ifm-transition-fast) ease;
transition-property: border, box-shadow;
}
.cardContainer_fWXF:hover {
border-color: var(--ifm-color-primary);
box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
}
.cardContainer_fWXF *:last-child {
margin-bottom: 0;
}
.cardTitle_rnsV {
font-size: 1.2rem;
}
.cardDescription_PWke {
font-size: 0.8rem;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.docCardListItem_W1sv {
margin-bottom: 2rem;
}
.docCardListItem_W1sv > * {
height: 100%;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.dropdownNavbarItemMobile_J0Sd {
cursor: pointer;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.iconLanguage_nlXk {
vertical-align: text-bottom;
margin-right: 5px;
}
.searchBar_RVTs .dropdownMenu_qbY6 {
left: auto !important;
right: 0 !important;
background: var(--search-local-modal-background, #f5f6f7);
border-radius: 6px;
box-shadow: var(
--search-local-modal-shadow,
inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5),
0 3px 8px 0 #555a64
);
margin-top: 8px;
width: var(--search-local-modal-width, 560px);
position: relative;
padding: var(--search-local-spacing, 12px);
}
.searchInput_YFbd:focus {
outline: 2px solid var(--search-local-input-active-border-color, var(--ifm-color-primary));
outline-offset: 0px;
}
@media not (max-width: 996px) {
.searchBar_RVTs.searchBarLeft_MXDe .dropdownMenu_qbY6 {
left: 0 !important;
right: auto !important;
}
}
@media (max-width: 576px) {
.navbar__search-input:not(:focus) {
width: 2rem;
}
.searchBar_RVTs .dropdownMenu_qbY6 {
width: var(--search-local-modal-width-sm, 340px);
max-width: calc(100vw - var(--ifm-navbar-padding-horizontal) * 2);
}
}
html[data-theme="dark"] .searchBar_RVTs .dropdownMenu_qbY6 {
background: var(--search-local-modal-background, var(--ifm-background-color));
box-shadow: var(
--search-local-modal-shadow,
inset 1px 1px 0 0 #2c2e40,
0 3px 8px 0 #000309
);
}
.searchBar_RVTs .dropdownMenu_qbY6 .suggestion_fB_2 {
cursor: pointer;
background: var(--search-local-hit-background, #fff);
border-radius: 4px;
box-shadow: var(--search-local-hit-shadow, 0 1px 3px 0 #d4d9e1);
padding: 0 var(--search-local-spacing, 12px);
width: 100%;
align-items: center;
color: var(--search-local-hit-color, #444950);
display: flex;
flex-direction: row;
height: var(--search-local-hit-height, 56px);
}
html[data-theme="dark"] .dropdownMenu_qbY6 .suggestion_fB_2 {
background: var(--search-local-hit-background, var(--ifm-color-emphasis-100));
box-shadow: var(--search-local-hit-shadow, none);
color: var(--search-local-hit-color, var(--ifm-font-color-base));
}
.searchBar_RVTs .dropdownMenu_qbY6 .suggestion_fB_2:not(:last-child) {
margin-bottom: 4px;
}
.searchBar_RVTs .dropdownMenu_qbY6 .suggestion_fB_2.cursor_eG29 {
background-color: var(
--search-local-highlight-color,
var(--ifm-color-primary)
);
}
.hitTree_kk6K,
.hitIcon_a7Zy,
.hitPath_ieM4,
.noResultsIcon_EBY5,
.hitFooter_E9YW a {
color: var(--search-local-muted-color, #969faf);
}
html[data-theme="dark"] .hitTree_kk6K,
html[data-theme="dark"] .hitIcon_a7Zy,
html[data-theme="dark"] .hitPath_ieM4,
html[data-theme="dark"] .noResultsIcon_EBY5 {
color: var(--search-local-muted-color, var(--ifm-color-secondary-darkest));
}
.hitTree_kk6K {
display: flex;
align-items: center;
}
.hitTree_kk6K > svg {
height: var(--search-local-hit-height, 56px);
opacity: 0.5;
stroke-width: var(--search-local-icon-stroke-width, 1.4);
width: 24px;
}
.hitIcon_a7Zy {
stroke-width: var(--search-local-icon-stroke-width, 1.4);
height: 20px;
width: 20px;
}
.hitWrapper_sAK8 {
flex: 1 1 auto;
display: flex;
flex-direction: column;
font-weight: 500;
justify-content: center;
margin: 0 8px;
overflow-x: hidden;
width: 80%;
}
.hitWrapper_sAK8 mark {
background: none;
color: var(--search-local-highlight-color, var(--ifm-color-primary));
}
.hitTitle_vyVt {
font-size: 0.9em;
}
.hitPath_ieM4 {
font-size: 0.75em;
}
.hitPath_ieM4,
.hitTitle_vyVt {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.hitAction_NqkB {
height: 20px;
width: 20px;
}
.hideAction_vcyE > svg {
display: none;
}
.noResults_l6Q3 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--search-local-spacing, 12px) 0;
}
.noResultsIcon_EBY5 {
margin-bottom: var(--search-local-spacing, 12px);
}
.hitFooter_E9YW {
text-align: center;
margin-top: var(--search-local-spacing, 12px);
font-size: 0.85em;
}
.hitFooter_E9YW a {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.cursor_eG29 .hideAction_vcyE > svg {
display: block;
}
.suggestion_fB_2.cursor_eG29,
.suggestion_fB_2.cursor_eG29 mark,
.suggestion_fB_2.cursor_eG29 .hitTree_kk6K,
.suggestion_fB_2.cursor_eG29 .hitIcon_a7Zy,
.suggestion_fB_2.cursor_eG29 .hitPath_ieM4 {
color: var(
--search-local-hit-active-color,
var(--ifm-color-white)
) !important;
}
.suggestion_fB_2.cursor_eG29 mark {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.searchBarContainer_NW3z {
margin-left: 16px;
}
.searchBarContainer_NW3z .searchBarLoadingRing_YnHq {
display: none;
position: absolute;
left: 10px;
top: 6px;
}
.searchBarContainer_NW3z .searchClearButton_qk4g {
position: absolute;
right: 0.8rem;
top: 50%;
transform: translate(0, -50%);
padding: 0;
background: none;
border: none;
line-height: 1rem;
}
.navbar__search {
position: relative;
}
.searchIndexLoading_EJ1f .navbar__search-input {
background-image: none;
}
.searchBarContainer_NW3z.searchIndexLoading_EJ1f .searchBarLoadingRing_YnHq {
display: inline-block;
}
.searchHintContainer_Pkmr {
position: absolute;
right: 10px;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
pointer-events: none;
gap: 4px;
}
.searchHint_iIMx {
color: var(--ifm-navbar-search-input-placeholder-color);
background-color: var(--ifm-navbar-search-input-background-color);
border: 1px solid var(--ifm-color-emphasis-500);
box-shadow: inset 0 -1px 0 var(--ifm-color-emphasis-500);
}
@media (max-width: 576px) {
.searchBarContainer_NW3z:not(.focused_OWtg) .searchClearButton_qk4g,
.searchHintContainer_Pkmr {
display: none;
}
}
/* Manually make the search bar be LTR even if in RTL */
html[dir="rtl"] .searchHintContainer_Pkmr {
right: auto;
left: 10px;
}
html[dir="rtl"] .searchBarContainer_NW3z .searchClearButton_qk4g {
right: auto;
left: 0.8rem;
}
html[dir="rtl"] .searchBarContainer_NW3z .searchBarLoadingRing_YnHq {
left: auto;
right: 10px;
}
html[dir="rtl"] .navbar__search-input {
padding: 0 2.25em 0 0.5em;
}
/* For autocomplete.js only. */
.input_FOTf {
}
.hint_URu1 {
}
.suggestions_X8XU {
}
.dataset_QiCy {
}
.empty_eITn {
}
/**/
/* https://loading.io/css/ */
.loadingRing_RJI3 {
display: inline-block;
position: relative;
width: 20px;
height: 20px;
opacity: var(--search-local-loading-icon-opacity, 0.5);
}
.loadingRing_RJI3 div {
box-sizing: border-box;
display: block;
position: absolute;
width: 16px;
height: 16px;
margin: 2px;
border: 2px solid
var(--search-load-loading-icon-color, var(--ifm-navbar-search-input-color));
border-radius: 50%;
animation: loading-ring_FB5o 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: var(
--search-load-loading-icon-color,
var(--ifm-navbar-search-input-color)
)
transparent transparent transparent;
}
.loadingRing_RJI3 div:nth-child(1) {
animation-delay: -0.45s;
}
.loadingRing_RJI3 div:nth-child(2) {
animation-delay: -0.3s;
}
.loadingRing_RJI3 div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes loading-ring_FB5o {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
Workaround to avoid rendering empty search container
See https://github.com/facebook/docusaurus/pull/9385
*/
.navbarSearchContainer_Bca1:empty {
display: none;
}
@media (max-width: 996px) {
.navbarSearchContainer_Bca1 {
position: absolute;
right: var(--ifm-navbar-padding-horizontal);
}
}
@media (min-width: 997px) {
.navbarSearchContainer_Bca1 {
padding: var(--ifm-navbar-item-padding-vertical)
var(--ifm-navbar-item-padding-horizontal);
}
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.navbarHideable_m1mJ {
transition: transform var(--ifm-transition-fast) ease;
}
.navbarHidden_jGov {
transform: translate3d(0, calc(-100% - 2px), 0);
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
Hide color mode toggle in small viewports
*/
@media (max-width: 996px) {
.colorModeToggle_DEke {
display: none;
}
}
/*
Restore some Infima style that broke with CSS Cascade Layers
See https://github.com/facebook/docusaurus/pull/11142
*/
.navbar__items--right > :last-child {
padding-right: 0;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.errorBoundaryError_a6uf {
white-space: pre-wrap;
color: red;
}
.errorBoundaryFallback_VBag {
color: red;
padding: 0.55rem;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
body:not(.navigation-with-keyboard) *:not(input):focus {
outline: none;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
#__docusaurus-base-url-issue-banner-container {
display: none;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.footerLogoLink_BH7S {
opacity: 0.5;
transition: opacity var(--ifm-transition-fast)
var(--ifm-transition-timing-default);
}
.footerLogoLink_BH7S:hover {
opacity: 1;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
html,
body {
height: 100%;
}
.mainWrapper_z2l0 {
flex: 1 0 auto;
display: flex;
flex-direction: column;
}
/* Docusaurus-specific utility class */
.docusaurus-mt-lg {
margin-top: 3rem;
}
#__docusaurus {
min-height: 100%;
display: flex;
flex-direction: column;
}
.rcb-chat-header-container{padding:12px;color:#fff;border-bottom:1px solid #ccc;display:flex;justify-content:space-between;max-height:55px}.rcb-chat-header{display:flex;flex-direction:row}.rcb-bot-avatar{background-size:cover;width:30px;height:30px;border-radius:50%;margin-right:12px}.rcb-message-prompt-container.visible{position:sticky;bottom:0;margin:auto;display:flex;align-items:center;justify-content:center;opacity:1;animation:rcb-animation-pop-in .3s ease-in-out;pointer-events:auto}.rcb-message-prompt-container.hidden{opacity:0;height:0px;visibility:hidden;pointer-events:none}.rcb-message-prompt-text{padding:6px 12px;border-radius:20px;color:#adadad;font-size:12px;background-color:#fff;border:.5px solid #adadad;cursor:pointer;transition:color .3s ease,border-color .3s ease;z-index:9999}.rcb-message-prompt-container.hidden .rcb-message-prompt-text{padding:0}.rcb-user-message-container{display:flex;flex-direction:row;justify-content:right}.rcb-user-message{margin-top:8px;padding:12px 16px;border-radius:22px;min-height:20px;height:fit-content;width:fit-content;font-size:15px;overflow-wrap:anywhere;overflow:auto;white-space:pre-wrap;text-align:right;margin-right:16px}.rcb-user-message-offset{margin-right:50px}.rcb-user-message-entry{animation:rcb-animation-user-message-entry .3s ease-in backwards}.rcb-message-user-avatar{background-size:cover;width:40px;height:40px;border-radius:50%;margin-top:9px}.rcb-message-user-avatar{margin-left:-10px;margin-right:6px}.rcb-bot-message-container{display:flex;flex-direction:row}.rcb-bot-message{margin-top:8px;padding:12px 16px;border-radius:22px;min-height:20px;height:fit-content;width:fit-content;font-size:15px;overflow-wrap:anywhere;overflow:auto;white-space:pre-wrap;text-align:left;margin-left:16px}.rcb-bot-message-offset{margin-left:50px}.rcb-bot-message-entry{animation:rcb-animation-bot-message-entry .3s ease-in backwards}.rcb-message-bot-avatar{background-size:cover;width:40px;height:40px;border-radius:50%;margin-top:9px}.rcb-message-bot-avatar{margin-left:6px;margin-right:-10px}.rcb-typing-indicator{display:flex;align-items:center}.rcb-dot{width:8px;height:8px;border-radius:50%;background-color:#ccc;margin-right:4px;animation:rcb-animation-bot-typing 1s infinite}.rcb-dot:nth-child(2){animation-delay:.2s}.rcb-dot:nth-child(3){animation-delay:.4s}.rcb-chat-body-container{position:relative;height:100%;width:100%;padding-bottom:16px;overflow-x:hidden;overflow-y:scroll;touch-action:pan-y}.rcb-chat-body-container::-webkit-scrollbar-track{background-color:#f1f1f1}.rcb-chat-body-container::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rcb-chat-body-container::-webkit-scrollbar-thumb:hover{background-color:#cfcfcf}.rcb-chat-body-container::-webkit-scrollbar-corner{background-color:#f1f1f1}.rcb-checkbox-container{display:flex;padding-top:12px;margin-left:16px;flex-wrap:wrap;gap:10px}.rcb-checkbox-offset{margin-left:50px!important}.rcb-checkbox-row-container{display:flex;align-items:center;gap:5px;border-width:.5px;border-style:solid;border-radius:10px;min-height:30px;max-height:32px;width:80%;cursor:pointer;background-color:#fff;animation:rcb-animations-checkboxes-entry .5s ease-out;overflow:hidden}.rcb-checkbox-row-container:hover{box-shadow:0 0 5px #0003}.rcb-checkbox-row{display:inline-flex;margin-left:10px;align-items:center;cursor:pointer}.rcb-checkbox-mark{width:20px;height:20px;background-color:#f2f2f2;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;transition:all .3s ease;margin-right:10px;cursor:pointer}.rcb-checkbox-mark:hover{background-color:#c2c2c2}.rcb-checkbox-mark:before{content:"✓";transition:all .3s ease}.rcb-checkbox-label{font-size:14px}.rcb-checkbox-next-button{text-align:center;display:inline-block;align-items:center;border-width:.5px;border-style:solid;border-radius:10px;font-size:24px;min-height:30px;max-height:32px;width:80%;cursor:pointer;background-color:#fff;animation:rcb-animations-checkboxes-entry .5s ease-out}.rcb-checkbox-next-button:before{content:"→"}.rcb-checkbox-next-button:hover{box-shadow:0 0 5px #0003}.rcb-options-container{padding-top:12px;margin-left:16px;max-width:70%;display:flex;flex-wrap:wrap;gap:10px}.rcb-options-offset{margin-left:50px!important}.rcb-options{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;border-radius:20px;font-size:14px;border-width:.5px;border-style:solid;cursor:pointer;transition:background-color .3s ease;animation:rcb-animation-options-entry .5s ease-out;overflow:hidden}.rcb-options:hover{box-shadow:0 0 5px #0003}.rcb-line-break-container{display:flex;justify-content:center;align-items:center;padding-top:10px;padding-bottom:5px;max-height:45px}.rcb-line-break-text{padding:6px 12px;color:#adadad;font-size:12px}.rcb-spinner-container{display:flex;justify-content:center;align-items:center;padding-top:10px;padding-bottom:5px;min-height:35px;max-height:45px}.rcb-spinner{width:22px;height:22px;border-radius:50%;border:4px solid #f3f3f3;animation:rcb-animation-spin 1s linear infinite}.rcb-chat-input{padding:8px 16px;border-top:1px solid #ccc;display:flex;align-items:center;background-color:#fff}.rcb-chat-input::placeholder{color:#999}.rcb-chat-input-textarea{flex:1;padding:8px;border:none;border-radius:4px;outline:none;font-size:16px;resize:none;height:auto;min-height:38px;overflow-y:scroll;font-family:inherit;background-color:#fff;color:#000;touch-action:none}.rcb-chat-input-textarea::-webkit-scrollbar{background-color:transparent}.rcb-chat-input-textarea::-webkit-scrollbar-thumb{background-color:transparent}.rcb-chat-input-textarea::-webkit-scrollbar-thumb:hover{background-color:transparent}.rcb-chat-input-char-counter{font-size:14px;margin-left:8px;margin-top:3px}.rcb-chat-footer-container{padding:12px 16px 8px 10px;border-top:1px solid #ccc;max-height:55px;display:flex;justify-content:space-between;align-items:flex-end;font-size:12px;background-color:#f2f2f2;color:#000}.rcb-chat-footer{display:flex;flex-direction:row}.rcb-toggle-button{display:flex;flex-direction:row;position:fixed;bottom:20px;right:20px;z-index:9999;width:75px;height:75px;border-radius:50%;border:none;cursor:pointer;box-shadow:0 2px 4px #0003}.rcb-toggle-button.rcb-button-hide{opacity:0;visibility:hidden;animation:rcb-animation-collapse .3s ease-in-out forwards}.rcb-toggle-button.rcb-button-show{opacity:1;visibility:visible;animation:rcb-animation-expand .3s ease-in-out forwards}.rcb-toggle-icon{display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-position:center;background-size:cover;background-repeat:no-repeat;margin:auto;border-radius:inherit}.rcb-badge{position:absolute;top:-6px;right:-6px;border-radius:50%;background-color:red;color:#fff;height:25px;width:25px;display:flex;justify-content:center;align-items:center}.rcb-chat-tooltip{position:fixed;padding:16px;border-radius:20px;box-shadow:0 2px 6px #0003;white-space:nowrap;cursor:pointer;font-size:20px;transition:transform .3s ease;z-index:9999}.rcb-chat-tooltip-tail{content:"";position:absolute;top:50%;right:-10px;margin-top:-10px;border-width:10px 0 10px 10px;border-style:solid}.rcb-chat-tooltip.rcb-tooltip-hide{opacity:0;visibility:hidden;animation:rcb-animation-tooltip-out .5s ease-in-out}.rcb-chat-tooltip.rcb-tooltip-show{opacity:1;visibility:visible;animation:rcb-animation-tooltip-in .5s ease-in-out}.rcb-toast-prompt{padding:6px 12px;border-radius:5px;color:#7a7a7a;font-size:12px;text-align:center;background-color:#fff;border:.5px solid #7a7a7a;cursor:pointer;transition:color .3s ease,border-color .3s ease;z-index:9999;width:100%;margin-top:6px;animation:rcb-animation-pop-in .3s ease-in-out}.rcb-toast-prompt-container{position:absolute;left:50%;transform:translate(-50%);bottom:0;margin:auto;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;opacity:1;animation:popIn .3s ease-in-out;pointer-events:auto;margin-top:200}.rcb-media-display-image-container,.rcb-media-display-video-container{margin-top:8px;margin-right:16px;border-radius:22px;padding:16px;width:fit-content}.rcb-media-display-offset{margin-right:50px!important}.rcb-media-display-image{width:100%;height:auto;border-radius:22px;object-fit:cover}.rcb-media-display-video{width:100%;height:auto;border-radius:22px;background-color:#000}.rcb-media-display-audio{margin-top:8px;margin-right:16px;width:100%;height:auto;border-radius:22px}.rcb-media-entry{animation:rcb-animation-user-message-entry .3s ease-in backwards}.rcb-attach-button-enabled,.rcb-attach-button-disabled{position:relative;display:inline-block;background-size:cover;width:30px;height:30px;border-radius:6px;text-align:center}.rcb-attach-button-enabled input[type=file],.rcb-attach-button-disabled input[type=file]{position:absolute;width:100%;height:100%;display:none}.rcb-attach-button-enabled{cursor:pointer}.rcb-attach-button-disabled{opacity:.5}.rcb-attach-button-enabled:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;background-color:#0000001a;border-radius:50%;opacity:0;transition:width .2s ease-out,height .2s ease-out,opacity .2s ease-out}.rcb-attach-button-enabled:hover:after{width:130%;height:130%;opacity:1}.rcb-attach-icon-enabled,.rcb-attach-icon-disabled{display:inline-block;width:24px;height:24px;margin-top:2px;background-repeat:no-repeat;background-size:cover;transition:background-image .3s ease}.rcb-attach-icon-enabled{cursor:pointer}.rcb-emoji-button-enabled,.rcb-emoji-button-disabled{position:relative;display:inline-block;background-size:cover;width:30px;height:30px;border-radius:6px;text-align:center;cursor:pointer}.rcb-emoji-icon-enabled,.rcb-emoji-icon-disabled{position:relative;display:inline-block;background-size:cover;font-size:20px;width:24px;height:24px;margin-top:2px;background-repeat:no-repeat}.rcb-emoji-icon-enabled{cursor:pointer}.rcb-emoji-icon-disabled{opacity:.5}.rcb-emoji-button-enabled:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;background-color:#0000001a;border-radius:50%;opacity:0;transition:width .2s ease-out,height .2s ease-out,opacity .2s ease-out}.rcb-emoji-button-enabled:hover:after{width:130%;height:130%;opacity:1}.rcb-emoji-button-popup{position:absolute;width:158px;background-color:#fff;border:1px solid #ccc;border-radius:4px;padding:8px;box-shadow:0 2px 4px #0003;max-height:200px;overflow-y:auto;transform:translateY(calc(-100% - 30px))}.rcb-emoji{cursor:pointer;font-size:24px;padding:3px;transition:transform .2s ease-in-out}.rcb-emoji:hover{transform:scale(1.2)}.rcb-audio-icon{position:relative;display:inline-block;background-size:cover;width:30px;height:30px;border:none;cursor:pointer;margin-left:5px}.rcb-audio-icon:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;background-color:#0000001a;border-radius:50%;opacity:0;transition:width .2s ease-out,height .2s ease-out,opacity .2s ease-out}.rcb-audio-icon:hover:after{width:130%;height:130%;opacity:1}.rcb-close-chat-icon{position:relative;display:inline-block;background-size:cover;width:30px;height:30px;border:none;margin-left:5px;cursor:pointer}.rcb-close-chat-icon:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;background-color:#0000001a;border-radius:50%;opacity:0;transition:width .2s ease-out,height .2s ease-out,opacity .2s ease-out}.rcb-close-chat-icon:hover:after{width:130%;height:130%;opacity:1}.rcb-notification-icon{position:relative;display:inline-block;background-size:cover;width:30px;height:30px;border:none;cursor:pointer;margin-left:5px}.rcb-notification-icon:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;background-color:#0000001a;border-radius:50%;opacity:0;transition:width .2s ease-out,height .2s ease-out,opacity .2s ease-out}.rcb-notification-icon:hover:after{width:130%;height:130%;opacity:1}.rcb-voice-button-enabled,.rcb-voice-button-disabled{display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;border-radius:4px;box-shadow:0 0 3px #0000004d;cursor:pointer;height:32px;width:32px;margin-left:8px;transition:all .3s ease;background-color:#fff}.rcb-voice-button-enabled{border:1px solid red;box-shadow:0 0 3px #ff000080}.rcb-voice-button-enabled:hover{border:1px solid rgb(61,0,0)}.rcb-voice-button-disabled{border:1px;border-style:solid;border-color:#0003}.rcb-voice-button-disabled:hover{box-shadow:0 0 3px #8a0000}.rcb-voice-icon{width:60%;height:60%;background-size:cover;object-fit:cover;background-size:contain;background-repeat:no-repeat;background-position:center}.rcb-voice-icon.on{animation:rcb-animation-ping 1s infinite}.rcb-send-button{display:inline-flex;justify-content:center;text-transform:uppercase;border:none;border-radius:4px;box-shadow:0 0 3px #0000004d;cursor:pointer;transition:background-color .3s ease;height:32px;width:51px;margin-left:8px}.rcb-send-icon{width:50%;height:50%;transform:translateY(20%);background-size:cover;object-fit:cover;background-size:contain;background-repeat:no-repeat;background-position:center}.rcb-view-history-container{display:flex;justify-content:center;align-items:center;padding-top:10px;padding-bottom:5px;min-height:35px;max-height:45px}.rcb-view-history-button{display:inline-flex;align-items:center;justify-content:center;padding:6px 12px;border-radius:20px;color:#adadad;font-size:12px;background-color:#fff;border-color:#adadad;border-width:.5px;border-style:solid;max-width:60%;cursor:pointer;transition:color .3s ease,border-color .3s ease}.rcb-view-history-button>p{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rcb-chatbot-global{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5;z-index:9999}.rcb-chat-window{position:fixed;right:20px;bottom:20px;border-radius:10px;box-shadow:0 2px 4px #0003;background-color:#fff;transition:all .3s ease;overflow:hidden;display:flex;flex-direction:column;width:375px;height:550px}.rcb-window-embedded .rcb-chat-window{position:relative;opacity:1;visibility:visible;right:auto;bottom:auto}.rcb-window-open .rcb-chat-window{opacity:1;visibility:visible;animation:rcb-animation-expand .3s ease-in-out forwards}.rcb-window-close .rcb-chat-window{opacity:0;visibility:hidden;animation:rcb-animation-collapse .3s ease-in-out forwards}@keyframes rcb-animation-expand{0%{transform:translate(100%,100%) scale(0);opacity:0}to{transform:translate(0) scale(1);opacity:1}}@keyframes rcb-animation-collapse{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(100%,100%) scale(0);opacity:0}}@keyframes rcb-animation-ping{0%{filter:brightness(100%);opacity:1}50%{filter:brightness(50%);opacity:.8}}@keyframes rcb-animation-bot-message-entry{0%{transform:translate(-100%,50%) scale(0);opacity:0}to{transform:translate(0) scale(1);opacity:1}}@keyframes rcb-animation-user-message-entry{0%{transform:translate(100%,50%) scale(0);opacity:0}to{transform:translate(0) scale(1);opacity:1}}@keyframes rcb-animation-bot-typing{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}@keyframes rcb-animation-pop-in{0%{transform:scale(.8);opacity:0}70%{transform:scale(1.1);opacity:1}to{transform:scale(1)}}@keyframes rcb-animations-checkboxes-entry{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes rcb-animation-options-entry{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes rcb-animation-tooltip-in{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes rcb-animation-tooltip-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-5px)}}@keyframes rcb-animation-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
/* Futuristic Chatbot Animations and Additional Styles */
@keyframes glow {
0% {
box-shadow: 0 2px 10px rgba(0, 255, 255, 0.2), 0 0 20px rgba(0, 255, 255, 0.1);
}
100% {
box-shadow: 0 2px 15px rgba(0, 255, 255, 0.4), 0 0 30px rgba(0, 255, 255, 0.2);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.8;
}
}
@keyframes slideInBot {
0% {
transform: translateX(-20px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInUser {
0% {
transform: translateX(20px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes neuralNetwork {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes holographic {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 0%;
}
}
/* Apply animations to chatbot elements */
.rcb-bot-message {
animation: slideInBot 0.5s ease-out, glow 2s ease-in-out infinite alternate;
}
.rcb-user-message {
animation: slideInUser 0.4s ease-out;
}
.rcb-chat-button {
animation: pulse 3s ease-in-out infinite;
}
.rcb-chat-button:hover {
animation: pulse 1s ease-in-out infinite;
}
/* Neural network background effect */
.rcb-header-title {
background-size: 400% 400%;
animation: neuralNetwork 3s ease infinite;
}
/* Option buttons enhancement */
.rcb-bot-option {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.rcb-bot-option::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.4), transparent);
transition: left 0.5s;
}
.rcb-bot-option:hover::before {
left: 100%;
}
/* Typing indicator enhancement */
.rcb-typing-indicator {
filter: drop-shadow(0 0 5px #00ffff);
}
/* Scrollbar styling for chat window */
.rcb-chat-body::-webkit-scrollbar {
width: 6px;
}
.rcb-chat-body::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
}
.rcb-chat-body::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #00ffff, #0080ff);
border-radius: 3px;
}
.rcb-chat-body::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #40ffff, #4090ff);
}
/* Futuristic input focus effect */
.rcb-chat-input:focus {
outline: none;
box-shadow: 0 0 15px rgba(0, 255, 255, 0.5), inset 0 0 10px rgba(0, 255, 255, 0.1);
border-color: #00ffff;
}
/* Loading state enhancement */
.rcb-loading {
background: linear-gradient(45deg, transparent, rgba(0, 255, 255, 0.1), transparent);
background-size: 200% 200%;
animation: holographic 2s linear infinite;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.sidebar_re4s {
max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
overflow-y: auto;
position: sticky;
top: calc(var(--ifm-navbar-height) + 2rem);
}
.sidebarItemTitle_pO2u {
font-size: var(--ifm-h3-font-size);
font-weight: var(--ifm-font-weight-bold);
}
.sidebarItemList_Yudw {
font-size: 0.9rem;
}
.sidebarItem__DBe {
margin-top: 0.7rem;
}
.sidebarItemLink_mo7H {
color: var(--ifm-font-color-base);
display: block;
}
.sidebarItemLink_mo7H:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.sidebarItemLinkActive_I1ZP {
color: var(--ifm-color-primary) !important;
}
@media (max-width: 996px) {
.sidebar_re4s {
display: none;
}
}
.yearGroupHeading_rMGB {
margin-top: 1.6rem;
margin-bottom: 0.4rem;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.yearGroupHeading_QT03 {
margin: 1rem 0.75rem 0.5rem;
}
/* content/src/components/CourseViewer/CourseHeader.module.css */
.courseHeader_IYHo {
position: relative;
padding: 2rem 0;
background-color: var(--ifm-background-surface-color);
border-bottom: 1px solid var(--color-background-accent-subtler-border);
}
.headerContent_UBMr {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.courseTitle_EiWF {
font-size: 2.125rem;
font-weight: 500;
margin-bottom: 1rem;
color: var(--ifm-color-primary);
}
.courseMetadata_FMqu {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.metadataItem_cllz {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
color: var(--ifm-color-emphasis-700);
}
.courseDescription_kYXJ {
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 1.5rem;
max-width: 800px;
color: var(--ifm-color-emphasis-800);
}
.enhancementBadges_S9Ui {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1rem;
}
.badge_qD2g {
display: inline-block;
padding: 0.3rem 0.8rem;
background-color: var(--color-background-accent-subtler);
border: 1px solid var(--color-background-accent-subtler-border);
font-size: 0.85rem;
font-weight: 500;
color: var(--ifm-color-emphasis-700);
}
@media (max-width: 768px) {
.courseHeader_IYHo {
padding: 1.5rem 0;
}
.courseTitle_EiWF {
font-size: 1.75rem;
}
.courseMetadata_FMqu {
flex-direction: column;
gap: 0.75rem;
}
}
/* content/src/components/CourseViewer/Navigation.module.css */
.navigation_m9tI {
width: 280px;
background-color: var(--ifm-background-surface-color);
border: 1px solid var(--color-background-accent-subtler-border);
align-self: flex-start;
position: sticky;
top: calc(var(--ifm-navbar-height) + 1rem);
max-height: calc(100vh - var(--ifm-navbar-height) - 2rem);
overflow-y: auto;
}
.navigationHeader_iUlI {
padding: 1rem;
background-color: var(--ifm-color-primary);
color: white;
}
.navigationHeader_iUlI h3 {
margin: 0;
font-size: 1.1rem;
font-weight: 500;
}
.modulesList_makA {
padding: 0.5rem 0;
}
.moduleItem_sikA {
margin-bottom: 0.5rem;
}
.moduleHeader_rfEm {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
background-color: var(--ifm-background-surface-color);
border-left: 3px solid transparent;
cursor: pointer;
}
.moduleHeader_rfEm.activeModule_x2Qv {
background-color: var(--ifm-menu-color-background-active);
border-left-color: var(--ifm-color-primary);
}
.moduleTitle_tyCz {
font-size: 0.95rem;
font-weight: 500;
color: var(--ifm-color-emphasis-900);
}
.expandIcon_lZsg {
font-size: 0.7rem;
color: var(--ifm-color-emphasis-600);
transition: transform 0.3s ease;
}
.expandIcon_lZsg.expanded_lBuv {
transform: rotate(180deg);
}
.sectionsList_lrYz {
padding: 0.25rem 0 0.25rem 1.25rem;
}
.sectionItem_mDIp,
.quizItem_ldft {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.6rem 1rem 0.6rem 1.5rem;
font-size: 0.9rem;
color: var(--ifm-color-emphasis-800);
border-left: 3px solid transparent;
cursor: pointer;
transition: background-color 0.2s ease;
}
.sectionItem_mDIp:hover,
.quizItem_ldft:hover {
background-color: var(--color-background-accent-subtler);
}
.sectionItem_mDIp.activeSection_oEf7 {
background-color: var(--ifm-menu-color-background-active);
border-left-color: var(--ifm-color-primary);
color: var(--ifm-color-primary);
}
.sectionTitle_mfNc,
.quizTitle_qlhy {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.completedIcon_eMS9 {
color: var(--ifm-color-primary);
font-weight: bold;
}
.completedSection_gOHN {
color: var(--ifm-color-emphasis-600);
}
.completedSection_gOHN .sectionTitle_mfNc {
-webkit-text-decoration: line-through;
text-decoration: line-through;
text-decoration-thickness: 1px;
}
.quizItems_qsVK {
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px dashed var(--color-background-accent-subtler-border);
}
.quizItem_ldft {
background-color: rgba(var(--ifm-color-primary-rgb), 0.05);
}
.quizIcon_YjMB {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background-color: var(--ifm-color-primary-lightest);
color: var(--ifm-color-primary-dark);
font-size: 0.75rem;
font-weight: bold;
margin-right: 0.5rem;
}
.completedQuiz_yKVa {
color: var(--ifm-color-emphasis-600);
background-color: var(--color-background-accent-subtler);
}
@media (max-width: 992px) {
.navigation_m9tI {
width: 100%;
position: relative;
top: 0;
max-height: none;
margin-bottom: 1.5rem;
}
}
/* content/src/components/CourseViewer/ImageDisplay.module.css */
.imageDisplay_Q13l {
margin: 1.5rem 0;
}
.figure_XP_7 {
margin: 0;
}
.imageWrapper_TxpL {
position: relative;
cursor: pointer;
overflow: hidden;
max-width: 100%;
transition: all 0.3s ease;
}
.imageWrapper_TxpL.expanded_QO_b {
max-width: 100%;
margin: 0 auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.image_kIHj {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
}
.imageWrapper_TxpL:hover .image_kIHj {
transform: scale(1.02);
}
.imagePlaceholder_JYxt {
background-color: var(--color-background-accent-subtler);
width: 100%;
padding-bottom: 60%; /* 3:5 aspect ratio */
position: relative;
}
.imagePlaceholder_JYxt::after {
content: "Loading image...";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--ifm-color-emphasis-600);
font-size: 0.9rem;
}
.caption_HaxG {
margin-top: 0.75rem;
font-size: 0.9rem;
color: var(--ifm-color-emphasis-700);
font-style: italic;
}
@media (max-width: 768px) {
.imageDisplay_Q13l {
margin: 1rem 0;
}
}
/* content/src/components/CourseViewer/TechnicalContent.module.css */
.technicalContent_QNsW {
margin: 1.5rem 0;
border: 1px solid var(--color-background-accent-subtler-border);
}
.validationHeader_EZ3R {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 1rem;
background-color: var(--color-background-accent-subtler);
border-bottom: 1px solid var(--color-background-accent-subtler-border);
flex-wrap: wrap;
}
.validationBadge_gMMQ {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.9rem;
font-weight: 500;
color: var(--ifm-color-primary);
}
.confidenceIndicator_pT8W {
font-size: 0.85rem;
padding: 0.25rem 0.6rem;
border-radius: 0;
}
.highConfidence_gHPs {
background-color: rgba(16, 185, 129, 0.1);
color: rgb(16, 185, 129);
}
.mediumConfidence_lg_2 {
background-color: rgba(245, 158, 11, 0.1);
color: rgb(245, 158, 11);
}
.lowConfidence_Qy00 {
background-color: rgba(239, 68, 68, 0.1);
color: rgb(239, 68, 68);
}
.compareButton_HKSY {
display: flex;
align-items: center;
gap: 0.4rem;
margin-left: auto;
font-size: 0.85rem;
padding: 0.3rem 0.7rem;
background-color: transparent;
border: 1px solid var(--color-background-accent-subtler-border);
color: var(--ifm-color-emphasis-700);
cursor: pointer;
transition: all 0.2s ease;
}
.compareButton_HKSY:hover {
background-color: var(--ifm-color-emphasis-200);
}
.contentContainer_MazI {
padding: 1.5rem;
background-color: var(--ifm-background-surface-color);
}
.contentText_XGVO {
line-height: 1.94;
color: var(--ifm-color-emphasis-800);
}
.originalContent_lT1j {
position: relative;
padding-top: 1.5rem;
}
.originalLabel_eVmS {
position: absolute;
top: -0.75rem;
left: 0;
font-size: 0.75rem;
padding: 0.2rem 0.5rem;
background-color: rgba(239, 68, 68, 0.1);
color: rgb(239, 68, 68);
font-weight: 500;
}
.referencesPanel_Nl7j {
padding: 1rem;
background-color: var(--color-background-accent-subtler);
border-top: 1px solid var(--color-background-accent-subtler-border);
}
.referencesTitle_A9gj {
margin-top: 0;
margin-bottom: 0.75rem;
font-size: 0.95rem;
color: var(--ifm-color-primary-dark);
}
.referencesList_sIzN {
margin: 0;
padding-left: 1.5rem;
list-style-type: square;
}
.referenceItem_n71C {
margin-bottom: 0.5rem;
font-size: 0.9rem;
color: var(--ifm-color-emphasis-800);
}
@media (max-width: 768px) {
.validationHeader_EZ3R {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.compareButton_HKSY {
margin-left: 0;
}
}
/* content/src/components/CourseViewer/SectionContent.module.css */
.sectionContent_Fceh {
padding: 1.5rem;
background-color: var(--ifm-card-background-color);
border: 1px solid var(--color-background-accent-subtler-border);
margin-bottom: 2rem;
}
.sectionTitle_coxH {
font-size: 1.25rem;
margin-top: 0;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--color-background-accent-subtler-border);
color: var(--ifm-color-emphasis-900);
}
.content_dUb7 {
line-height: 1.94;
margin-bottom: 1.5rem;
}
.imageContainer_WwQL {
margin: 1.5rem 0;
}
.technicalNotes_SIx2 {
margin-top: 1.5rem;
padding: 1rem;
background-color: var(--color-background-accent-subtler);
border-left: 4px solid var(--ifm-color-primary);
}
.technicalNotes_SIx2 h4 {
margin-top: 0;
color: var(--ifm-color-primary-dark);
font-size: 1rem;
}
.references_T0eY {
margin-top: 1.5rem;
border-top: 1px solid var(--color-background-accent-subtler-border);
padding-top: 1rem;
}
.references_T0eY h4 {
font-size: 1rem;
margin-top: 0;
}
.references_T0eY ul {
padding-left: 1.5rem;
}
.references_T0eY li {
margin-bottom: 0.5rem;
}
/* content/src/components/CourseViewer/QuizComponent.module.css */
.quizContainer_gkQf {
margin: 2rem 0;
padding: 1.5rem;
background-color: var(--ifm-card-background-color);
border: 1px solid var(--color-background-accent-subtler-border);
border-left: 4px solid var(--ifm-color-primary-dark);
}
.quizHeader_KL4m {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--color-background-accent-subtler-border);
}
.quizTitle_zVVT {
margin: 0;
font-size: 1.25rem;
color: var(--ifm-color-primary-dark);
}
.progressIndicator_NrkQ {
font-size: 0.9rem;
color: var(--ifm-color-emphasis-600);
}
.questionCard_Lr7E {
padding: 1.5rem;
background-color: var(--ifm-background-surface-color);
border: 1px solid var(--color-background-accent-subtler-border);
}
.questionText_fHTo {
font-size: 1.1rem;
font-weight: 500;
margin-bottom: 1.5rem;
line-height: 1.5;
}
.optionsContainer_CLse {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
}
.option_wVsH {
display: flex;
align-items: center;
padding: 1rem;
border: 1px solid var(--color-background-accent-subtler-border);
cursor: pointer;
transition: all 0.2s ease;
}
.option_wVsH:hover {
background-color: var(--color-background-accent-subtler);
}
.option_wVsH.selected_Pbt1 {
background-color: rgba(var(--ifm-color-primary-rgb), 0.1);
border-color: var(--ifm-color-primary);
}
.optionSelector_S8F3 {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--color-background-accent-subtler);
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
font-weight: 500;
}
.option_wVsH.selected_Pbt1 .optionSelector_S8F3 {
background-color: var(--ifm-color-primary);
color: white;
}
.feedback_Y7Wz {
padding: 1rem;
margin: 1rem 0;
background-color: var(--color-background-accent-subtler);
border-left: 4px solid var(--ifm-color-primary);
}
.navigationButtons_YHoN {
display: flex;
justify-content: flex-end;
margin-top: 1.5rem;
}
.nextButton_fCsG {
padding: 0.75rem 1.5rem;
background-color: var(--ifm-color-primary);
color: white;
border: none;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s ease;
}
.nextButton_fCsG:hover {
background-color: var(--color-text-accent-hovered);
}
.nextButton_fCsG:disabled {
background-color: var(--ifm-color-emphasis-300);
cursor: not-allowed;
}
/* Quiz results styling */
.quizResults_XrA1 {
padding: 1.5rem;
}
.resultsTitle__fJL {
font-size: 1.5rem;
margin-bottom: 1.5rem;
color: var(--ifm-color-primary-dark);
}
.scoreCard_bmlQ {
display: flex;
justify-content: center;
margin-bottom: 2rem;
}
.score_P5QV {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
background-color: var(--color-background-accent-subtler);
border-radius: 0;
}
.scoreValue_nSvY {
font-size: 3rem;
font-weight: 700;
color: var(--ifm-color-primary);
line-height: 1;
margin-bottom: 0.5rem;
}
.scoreLabel_Rudc {
font-size: 1rem;
color: var(--ifm-color-emphasis-700);
}
.answerReview_waDl {
margin-top: 2rem;
}
.answerReview_waDl h4 {
margin-bottom: 1rem;
font-size: 1.1rem;
}
.reviewQuestion_T4eN {
padding: 1rem;
margin-bottom: 1rem;
border: 1px solid var(--color-background-accent-subtler-border);
}
.reviewQuestion_T4eN.correct_Ibk6 {
border-left: 4px solid #10b981; /* Success green */
}
.reviewQuestion_T4eN.incorrect_kSm0 {
border-left: 4px solid #dc2626; /* Error red */
}
.questionText_fHTo {
font-weight: 500;
margin-bottom: 0.75rem;
}
.answerReviewInfo_a294 {
font-size: 0.9rem;
}
.yourAnswer_agLd {
margin-bottom: 0.25rem;
}
.correctAnswer_wwJ0 {
color: #10b981;
font-weight: 500;
}
/* content/src/components/CourseViewer/ModuleViewer.module.css */
.moduleViewer_XVan {
padding: 1rem;
background-color: var(--ifm-background-surface-color);
}
.moduleHeader_lqEV {
margin-bottom: 2rem;
}
.moduleTitle_lsXi {
font-size: 1.75rem;
color: var(--ifm-color-emphasis-900);
margin-bottom: 0.75rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--color-background-accent-subtler-border);
}
.moduleDescription_i1Xl {
font-size: 1.05rem;
color: var(--ifm-color-emphasis-700);
line-height: 1.6;
}
.quizSection_jg5m {
margin: 2rem 0;
border-top: 1px solid var(--color-background-accent-subtler-border);
padding-top: 2rem;
}
.navigationFooter_wWsJ {
display: flex;
justify-content: flex-end;
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-background-accent-subtler-border);
}
.nextSectionButton_yGD7 {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
background-color: var(--course-next-lesson-button);
color: var(--ifm-color-primary-dark);
border: none;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.nextSectionButton_yGD7:hover {
background-color: var(--ifm-color-primary-lightest);
}
@media (max-width: 768px) {
.moduleTitle_lsXi {
font-size: 1.5rem;
}
.navigationFooter_wWsJ {
margin-top: 2rem;
}
.nextSectionButton_yGD7 {
width: 100%;
}
}
/* content/src/components/CourseViewer/CourseProgress.module.css */
.progressContainer_tQLg {
margin: 3rem 0;
padding: 0 1rem;
}
.progressCard_zJg7 {
background-color: var(--ifm-card-background-color);
border: 1px solid var(--color-background-accent-subtler-border);
padding: 1.5rem;
}
.progressTitle_fiVx {
margin-top: 0;
margin-bottom: 1.5rem;
font-size: 1.25rem;
color: var(--ifm-color-emphasis-900);
border-bottom: 1px solid var(--color-background-accent-subtler-border);
padding-bottom: 0.75rem;
}
.progressStats_Nfj0 {
display: flex;
align-items: center;
gap: 2rem;
margin-bottom: 1.5rem;
}
.progressPercentage_vv3O {
display: flex;
flex-direction: column;
align-items: center;
}
.progressCircle__Pve {
width: 120px;
height: 120px;
border-radius: 50%;
background: conic-gradient(
var(--ifm-color-primary) var(--progress-percentage),
var(--color-background-accent-subtler) var(--progress-percentage)
);
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-bottom: 0.5rem;
}
.progressCircle__Pve::before {
content: "";
position: absolute;
width: 90px;
height: 90px;
border-radius: 50%;
background-color: var(--ifm-card-background-color);
}
.progressCircle__Pve span {
position: relative;
font-size: 1.5rem;
font-weight: 700;
color: var(--ifm-color-primary);
}
.progressLabel_Yfjt {
font-size: 0.9rem;
color: var(--ifm-color-emphasis-600);
}
.statsDetails_w5gC {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.statItem_Oqcs {
display: flex;
justify-content: space-between;
font-size: 0.95rem;
}
.statLabel_iD53 {
color: var(--ifm-color-emphasis-700);
}
.statValue_M_V3 {
font-weight: 500;
color: var(--ifm-color-emphasis-900);
}
.progressPrompt_f0iM {
padding: 1rem;
background-color: var(--color-background-accent-subtler);
text-align: center;
margin-top: 1rem;
}
.progressPrompt_f0iM p {
margin: 0;
font-weight: 500;
color: var(--ifm-color-emphasis-700);
}
.completionBanner_mvaU {
padding: 1.5rem;
background-color: rgba(var(--ifm-color-primary-rgb), 0.1);
text-align: center;
margin-top: 1rem;
border-left: 4px solid var(--ifm-color-primary);
}
.completionBanner_mvaU h4 {
margin-top: 0;
font-size: 1.1rem;
color: var(--ifm-color-primary-dark);
}
.completionBanner_mvaU p {
margin-bottom: 1rem;
}
.certificateButton_u8s9 {
padding: 0.6rem 1.2rem;
background-color: var(--ifm-color-primary);
color: white;
border: none;
font-weight: 500;
cursor: pointer;
}
.certificateButton_u8s9:hover {
background-color: var(--color-text-accent-hovered);
}
@media (max-width: 768px) {
.progressStats_Nfj0 {
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.statsDetails_w5gC {
width: 100%;
}
}
/* content/src/components/CourseViewer/CourseViewer.module.css */
.courseViewer_VSqI {
display: flex;
flex-direction: column;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.courseContent_V9aJ {
display: flex;
gap: 2rem;
margin-top: 2rem;
}
.moduleContainer_I_2h {
flex: 1;
min-width: 0; /* Prevents flexbox from overflowing */
}
.loading_aweg,
.error_sy8w {
padding: 3rem;
text-align: center;
font-size: 1.2rem;
background-color: var(--ifm-card-background-color);
border-radius: 0;
margin: 2rem 0;
}
.error_sy8w {
color: #dc2626;
border-left: 4px solid #dc2626;
}
@media (max-width: 992px) {
.courseContent_V9aJ {
flex-direction: column;
}
}
/* content/src/pages/course-view.module.css */
.courseViewPage_wEiO {
padding: 0;
min-height: calc(100vh - var(--ifm-navbar-height));
background: var(--ifm-background-color);
}
.noCourseSelected_Ogpb {
max-width: 600px;
margin: 4rem auto;
text-align: center;
padding: 2rem;
background-color: var(--ifm-card-background-color);
border: 1px solid var(--color-background-accent-subtler-border);
}
.catalogLink_RA4L {
display: inline-block;
margin-top: 1rem;
padding: 0.75rem 1.5rem;
background-color: var(--ifm-color-primary);
color: white;
-webkit-text-decoration: none;
text-decoration: none;
font-weight: 500;
}
.catalogLink_RA4L:hover {
background-color: var(--color-text-accent-hovered);
-webkit-text-decoration: none;
text-decoration: none;
color: white;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.searchBar_KVSA {
margin-left: auto;
}
.searchBar_KVSA input {
height: 30px;
border-radius: 15px;
padding: 10px;
border: 1px solid gray;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.svg_U73t {
-webkit-user-select: none;
user-select: none;
color: #e9669e;
width: 1em;
height: 1em;
display: inline-block;
fill: currentColor;
}
.small_mpfF {
font-size: 1rem;
}
.medium_Q4Aw {
font-size: 1.25rem;
}
.large_JGHP {
font-size: 1.8rem;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.showcaseCardImage_jBKv {
overflow: hidden;
height: 150px;
border-bottom: 2px solid var(--ifm-color-emphasis-200);
}
.showcaseCardHeader_hhqu {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.showcaseCardTitle_UK7e {
margin-bottom: 0;
flex: 1 1 auto;
}
.showcaseCardTitle_UK7e a {
-webkit-text-decoration: none;
text-decoration: none;
background: linear-gradient(
var(--ifm-color-primary),
var(--ifm-color-primary)
)
0% 100% / 0% 1px no-repeat;
transition: background-size ease-out 200ms;
}
.showcaseCardTitle_UK7e a:not(:focus):hover {
background-size: 100% 1px;
}
.showcaseCardTitle_UK7e,
.showcaseCardHeader_hhqu {
margin-right: 0.25rem;
}
.showcaseCardSrcBtn_k3X5 {
margin-left: 6px;
padding-left: 12px;
padding-right: 12px;
border: none;
}
.showcaseCardSrcBtn_k3X5:focus-visible {
background-color: var(--ifm-color-secondary-dark);
}
[data-theme='dark'] .showcaseCardSrcBtn_k3X5 {
background-color: var(--ifm-color-emphasis-200) !important;
color: inherit;
}
[data-theme='dark'] .showcaseCardSrcBtn_k3X5:hover {
background-color: var(--ifm-color-emphasis-300) !important;
}
.showcaseCardBody_HnAb {
font-size: smaller;
line-height: 1.66;
}
.cardFooter_Ppiu {
display: flex;
flex-wrap: wrap;
}
.tag_ZLM_ {
font-size: 0.675rem;
border: 1px solid var(--ifm-color-secondary-darkest);
cursor: default;
margin-right: 6px;
margin-bottom: 6px !important;
border-radius: 12px;
display: inline-flex;
align-items: center;
}
.tag_ZLM_ .textLabel_Zsny {
margin-left: 8px;
}
.tag_ZLM_ .colorLabel_MJWk {
width: 7px;
height: 7px;
border-radius: 50%;
margin-left: 6px;
margin-right: 6px;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.cardList_hi3z {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
.showcaseFavorite_uA7Y {
padding-top: 2rem;
padding-bottom: 2rem;
background-color: #f6fdfd;
}
html[data-theme='dark'] .showcaseFavorite_uA7Y {
background-color: #232525;
}
.headingFavorites_Tp8m {
display: flex;
align-items: center;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.checkboxLabel_GlGm:hover {
opacity: 1;
box-shadow: 0 0 2px 1px var(--ifm-color-secondary-darkest);
}
input[type='checkbox'] + .checkboxLabel_GlGm {
display: flex;
align-items: center;
cursor: pointer;
line-height: 1.5;
border-radius: 4px;
padding: 0.275rem 0.8rem;
opacity: 0.85;
transition: opacity 200ms ease-out;
border: 2px solid var(--ifm-color-secondary-darkest);
}
input:focus-visible + .checkboxLabel_GlGm {
outline: 2px solid currentColor;
}
input:checked + .checkboxLabel_GlGm {
opacity: 0.9;
background-color: hsl(167deg 56% 73% / 25%);
border: 2px solid var(--ifm-color-primary-darkest);
}
input:checked + .checkboxLabel_GlGm:hover {
opacity: 0.75;
box-shadow: 0 0 2px 1px var(--ifm-color-primary-dark);
}
html[data-theme='dark'] input:checked + .checkboxLabel_GlGm {
background-color: hsl(167deg 56% 73% / 10%);
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.checkboxLabel_Lu61 {
--height: 25px;
--width: 80px;
--border: 2px;
display: flex;
width: var(--width);
height: var(--height);
position: relative;
border-radius: var(--height);
border: var(--border) solid var(--ifm-color-primary-darkest);
cursor: pointer;
justify-content: space-around;
opacity: 0.75;
transition: opacity var(--ifm-transition-fast)
var(--ifm-transition-timing-default);
box-shadow: var(--ifm-global-shadow-md);
}
.checkboxLabel_Lu61:hover {
opacity: 1;
box-shadow: var(--ifm-global-shadow-md),
0 0 2px 1px var(--ifm-color-primary-dark);
}
.checkboxLabel_Lu61::after {
position: absolute;
content: '';
inset: 0;
width: calc(var(--width) / 2);
height: 100%;
border-radius: var(--height);
background-color: var(--ifm-color-primary-darkest);
transition: transform var(--ifm-transition-fast)
var(--ifm-transition-timing-default);
transform: translateX(calc(var(--width) / 2 - var(--border)));
}
input:focus-visible ~ .checkboxLabel_Lu61::after {
outline: 2px solid currentColor;
}
.checkboxLabel_Lu61 > * {
font-size: 0.8rem;
color: inherit;
transition: opacity 150ms ease-in 50ms;
}
input:checked ~ .checkboxLabel_Lu61::after {
transform: translateX(calc(-1 * var(--border)));
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.headingRow_Ob9y {
display: flex;
align-items: center;
justify-content: space-between;
}
.headingText_egCk {
display: flex;
align-items: baseline;
}
.headingText_egCk > h2 {
margin-bottom: 0;
}
.headingText_egCk > span {
margin-left: 8px;
}
.headingButtons_cXI9 {
display: flex;
align-items: center;
}
.headingButtons_cXI9 > * {
margin-left: 8px;
}
.tagList_z7rC {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.tagListItem_l0Vz {
-webkit-user-select: none;
user-select: none;
white-space: nowrap;
height: 32px;
font-size: 0.8rem;
margin-top: 0.5rem;
margin-right: 0.5rem;
}
.tagListItem_l0Vz:last-child {
margin-right: 0;
}
.searchContextInput_mXoe,
.searchQueryInput_CFBF {
border-radius: var(--ifm-global-radius);
border: var(--ifm-global-border-width) solid
var(--ifm-color-content-secondary);
font-size: var(--ifm-font-size-base);
padding: 0.5rem;
width: 100%;
background: var(--ifm-background-color);
color: var(--ifm-font-color-base);
margin-bottom: 1rem;
}
.searchResultItem_U687 {
padding: 1rem 0px;
border-bottom: 1px solid rgb(223, 227, 232);
}
.searchResultItem_U687 > h2 {
margin-bottom: 0;
}
.searchResultItemPath_uIbk {
color: var(--ifm-color-content-secondary);
font-size: 0.8rem;
margin: 0.5rem 0px 0px;
}
.searchResultItemSummary_oZHr {
font-style: italic;
margin: 0.5rem 0px 0px;
}
@media only screen and (max-width: 996px) {
.searchQueryColumn_q7nx {
max-width: 60% !important;
}
.searchContextColumn_oWAF {
max-width: 40% !important;
}
}
@media screen and (max-width: 576px) {
.searchQueryColumn_q7nx {
max-width: 100% !important;
}
.searchContextColumn_oWAF {
max-width: 100% !important;
padding-left: var(--ifm-spacing-horizontal) !important;
}
}
.heroBanner_aCW8 {
padding: 6rem 0 8rem;
position: relative;
overflow: hidden;
min-height: 85vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.bgGradient_cjJA {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -2;
}
html[data-theme="light"] .bgGradient_cjJA {
background: linear-gradient(135deg, #f5f7fa 0%, #e8edf5 100%);
}
html[data-theme="dark"] .bgGradient_cjJA {
background: linear-gradient(135deg, #1a1b23 0%, #141824 100%);
}
.overlay_kY7l {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Removed the background-image reference */
background: repeating-linear-gradient(
-45deg,
rgba(var(--ifm-color-primary-rgb), 0.03),
rgba(var(--ifm-color-primary-rgb), 0.03) 10px,
transparent 10px,
transparent 20px
);
opacity: 0.4;
z-index: -1;
}
.container_kr8o {
display: flex;
justify-content: space-between;
align-items: center;
gap: 60px;
position: relative;
z-index: 1;
}
.left_pR4C {
text-align: left;
max-width: 55%;
}
.right__eB0 {
display: flex;
justify-content: center;
align-items: center;
max-width: 45%;
}
.preHeading_ZSfM {
display: inline-block;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--ifm-color-primary);
margin-bottom: 1rem;
}
.title_B07A {
font-size: 3.5rem;
line-height: 1.1;
margin-bottom: 1.5rem;
font-weight: 800;
color: var(--ifm-heading-color);
}
.highlight_PeVr {
color: var(--ifm-color-primary);
}
.subtitle_JdtJ {
font-size: 1.1rem;
line-height: 1.6;
color: var(--ifm-color-emphasis-700);
margin-bottom: 2rem;
max-width: 90%;
}
.buttons_zMmC {
display: flex;
gap: 1rem;
margin-top: 2rem;
}
.primaryButton_IYeo {
padding: 0.8rem 1.8rem;
font-size: 1rem;
font-weight: 600;
background: var(--ifm-color-primary);
border: none;
border-radius: 50px;
color: #ffffff;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-webkit-text-decoration: none;
text-decoration: none;
}
.primaryButton_IYeo:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
color: #ffffff;
background: var(--ifm-color-primary-dark);
-webkit-text-decoration: none;
text-decoration: none;
}
.secondaryButton_g95k {
padding: 0.8rem 1.8rem;
font-size: 1rem;
font-weight: 600;
background: transparent;
border: 2px solid var(--ifm-color-primary);
border-radius: 50px;
color: var(--ifm-color-primary);
transition: all 0.3s ease;
-webkit-text-decoration: none;
text-decoration: none;
}
.secondaryButton_g95k:hover {
background-color: rgba(var(--ifm-color-primary-rgb), 0.1);
transform: translateY(-2px);
-webkit-text-decoration: none;
text-decoration: none;
}
.scrollIndicator_AFNw {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
color: var(--ifm-color-emphasis-600);
font-size: 0.9rem;
opacity: 0.7;
}
.scrollArrow_gKR3 {
animation: bounce_w2f4 1.5s infinite;
font-size: 1.5rem;
margin-top: -5px;
}
@keyframes bounce_w2f4 {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(10px); }
}
@media screen and (max-width: 996px) {
.heroBanner_aCW8 {
padding: 4rem 2rem;
min-height: auto;
}
.container_kr8o {
flex-direction: column;
text-align: center;
}
.left_pR4C {
max-width: 100%;
text-align: center;
}
.right__eB0 {
max-width: 100%;
margin-top: 2rem;
}
.subtitle_JdtJ {
max-width: 100%;
}
.buttons_zMmC {
justify-content: center;
}
.title_B07A {
font-size: 2.5rem;
}
.scrollIndicator_AFNw {
display: none;
}
}
#svg-animation {
opacity: 0;
}
#svg-animation .svg-dark-line {
stroke: #045462;
}
[data-theme='dark'] #svg-animation .svg-dark-line {
stroke: #fff;
}
#svg-animation * {
fill-opacity: 0;
transition: fill-opacity 1s;
}
#svg-animation .svg-layer {
opacity: 0;
}
#svg-animation .svg-layer-last {
opacity: 0;
}
#svg-animation.finished * {
fill-opacity: 1;
}
#svg-animation.finished .svg-layer {
opacity: 1;
transition: all 0.5s linear;
}
#svg-animation.finished .svg-layer-last {
opacity: 1;
transition-delay: 1s;
transition-property: opacity;
transition-duration: 0.5s;
}
.section_CXBt {
padding: 4rem 0;
background: var(--ifm-background-color);
color: var(--ifm-font-color-base);
}
.row_lVbZ {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.content_MT_q {
padding: 0 1rem;
}
.heading_HD9b {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--ifm-color-primary);
}
.description_knxF {
font-size: 1.2rem;
line-height: 1.6;
color: var(--ifm-color-secondary);
margin-bottom: 2rem;
}
.features_JR_k {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@keyframes fadeInUp_Efp6 {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.feature_I9g_ {
display: flex;
gap: 1rem;
padding: 1.5rem;
background: var(--ifm-background-surface-color);
border-radius: 12px;
border: 1px solid var(--color-background-accent-subtler-border);
transition: all 0.3s ease;
animation: fadeInUp_Efp6 0.6s ease forwards;
opacity: 0;
}
.feature_I9g_:hover {
background: var(--color-background-accent-subtler);
border-color: var(--ifm-color-primary);
transform: translateY(-2px);
}
.featureIcon_KQOY {
font-size: 2rem;
min-width: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
.featureContent_U0Ej {
flex: 1;
}
.featureTitle_yusP {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--ifm-color-primary);
}
.featureDescription_FjPY {
color: var(--ifm-color-secondary);
margin-bottom: 0.5rem;
line-height: 1.5;
}
.featureLink_xwz4 {
color: var(--ifm-color-primary-dark);
-webkit-text-decoration: none;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
transition: color 0.3s ease;
}
.featureLink_xwz4:hover {
color: var(--color-text-accent-hovered);
-webkit-text-decoration: none;
text-decoration: none;
}
.visual_ArWl {
display: flex;
justify-content: center;
align-items: center;
}
.codeBlock_lhBo {
background: var(--ifm-background-surface-color);
border-radius: 12px;
border: 1px solid var(--color-background-accent-subtler-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}
.codeHeader_gKTC {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: var(--ifm-navbar-background-color);
border-bottom: 1px solid var(--color-background-accent-subtler-border);
border-radius: 12px 12px 0 0;
}
.codeDot_se8o {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ff5f56;
}
.codeDot_se8o:nth-child(2) {
background: #ffbd2e;
}
.codeDot_se8o:nth-child(3) {
background: #27ca3f;
}
.codeTitle_B_ml {
margin-left: auto;
font-size: 0.8rem;
color: var(--ifm-color-secondary);
}
.codeContent_HdJw {
padding: 1rem;
font-size: 0.9rem;
line-height: 1.5;
}
.codeLine_xPLu {
margin-bottom: 0.5rem;
display: flex;
align-items: center;
}
.prompt_AgAC {
color: var(--ifm-color-primary);
margin-right: 0.5rem;
}
.output_DC_9 {
color: var(--ifm-color-primary-light);
}
.cursor_gwDv {
color: var(--ifm-color-primary);
animation: blink_druM 1s infinite;
}
@keyframes blink_druM {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
@media (max-width: 768px) {
.row_lVbZ {
grid-template-columns: 1fr;
gap: 2rem;
}
.heading_HD9b {
font-size: 2rem;
}
.feature_I9g_ {
flex-direction: column;
text-align: center;
}
.featureIcon_KQOY {
align-self: center;
}
}
.section_etd2 {
padding: 4rem 0;
background: linear-gradient(135deg, var(--ifm-color-primary) 0%, #00a8b5 100%);
color: white;
position: relative;
overflow: hidden;
}
.section_etd2::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
z-index: 1;
}
.header_n_YU {
text-align: center;
margin-bottom: 4rem;
position: relative;
z-index: 2;
}
.heading_j_fb {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
color: white;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.titleIcon_Qs9x {
font-size: 3.5rem;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
.subheading_F6sN {
font-size: 1.3rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
max-width: 700px;
margin: 0 auto;
}
.pathsConstellation_KTbi {
position: relative;
margin: 4rem 0;
z-index: 2;
}
.pathsGrid_YLNm {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 3;
}
@keyframes fadeInScale_hHxd {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
.pathOrb_FhCW {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 140px;
height: 140px;
border-radius: 50%;
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
border: 3px solid rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: all 0.3s ease;
margin: 0 auto;
animation: fadeInScale_hHxd 0.6s ease forwards;
opacity: 0;
}
.orbLink_BCHM {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
-webkit-text-decoration: none;
text-decoration: none;
color: inherit;
border-radius: 50%;
}
.orbLink_BCHM:hover {
-webkit-text-decoration: none;
text-decoration: none;
color: inherit;
}
.pathOrb_FhCW:hover {
border-color: rgba(255, 255, 255, 0.7);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
transform: scale(1.05) rotate(3deg);
}
.pathOrbCore_ZEpF { background: rgba(0, 195, 205, 0.4); }
.pathOrbSecondary_NFKp { background: rgba(0, 195, 135, 0.4); }
.pathOrbTertiary_Ck23 { background: rgba(25, 118, 210, 0.4); }
.pathOrbAdmin_NHFq { background: rgba(245, 124, 0, 0.4); }
.pathOrbProduct_Sz2h { background: rgba(123, 31, 162, 0.4); }
.pathOrbData_OE79 { background: rgba(211, 47, 47, 0.4); }
.pathOrbSecurity_ka1k { background: rgba(56, 142, 60, 0.4); }
.pathOrbAi_EMLK { background: rgba(255, 193, 7, 0.4); }
.pathOrbBusiness_j4sw { background: rgba(103, 58, 183, 0.4); }
.orbIcon_N1Mg {
font-size: 3rem;
margin-bottom: 0.5rem;
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}
.orbLabel_WgfD {
font-size: 0.9rem;
font-weight: 700;
text-align: center;
line-height: 1.2;
color: white;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
padding: 0 0.5rem;
}
.orbGlow_fKGP {
position: absolute;
top: -15px;
left: -15px;
right: -15px;
bottom: -15px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.pathOrb_FhCW:hover .orbGlow_fKGP {
opacity: 1;
}
.constellationLines_tYX9 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.connectionsSvg_rf3m {
width: 100%;
height: 100%;
opacity: 0.5;
}
.showcaseActions_uDs1 {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 4rem;
position: relative;
z-index: 2;
}
.exploreAllButton_M4cN {
background: white;
color: var(--ifm-color-primary);
padding: 1.2rem 2.5rem;
border-radius: 16px;
-webkit-text-decoration: none;
text-decoration: none;
font-weight: 700;
font-size: 1.2rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.75rem;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.exploreAllButton_M4cN:hover {
background: rgba(255, 255, 255, 0.95);
-webkit-text-decoration: none;
text-decoration: none;
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.buttonIcon__Lbl {
font-size: 1.4rem;
}
.pathStats_vdVp {
display: flex;
gap: 3rem;
}
.statItem_XpTu {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.statNumber_Mc4u {
font-size: 2.5rem;
font-weight: 800;
color: white;
text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}
.statLabel_dZZh {
font-size: 1rem;
color: rgba(255, 255, 255, 0.9);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
}
/* Responsive Design */
@media (max-width: 1024px) {
.pathsGrid_YLNm {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
max-width: 600px;
}
.showcaseActions_uDs1 {
flex-direction: column;
gap: 2.5rem;
text-align: center;
}
.pathStats_vdVp {
justify-content: center;
gap: 2rem;
}
}
@media (max-width: 768px) {
.section_etd2 {
padding: 3rem 0;
}
.heading_j_fb {
font-size: 2.5rem;
flex-direction: column;
gap: 0.5rem;
}
.titleIcon_Qs9x {
font-size: 3rem;
}
.subheading_F6sN {
font-size: 1.1rem;
padding: 0 1rem;
}
.pathsGrid_YLNm {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
max-width: 400px;
}
.pathOrb_FhCW {
width: 120px;
height: 120px;
}
.orbIcon_N1Mg {
font-size: 2.5rem;
}
.orbLabel_WgfD {
font-size: 0.8rem;
}
.pathStats_vdVp {
gap: 1.5rem;
}
.statNumber_Mc4u {
font-size: 2rem;
}
.statLabel_dZZh {
font-size: 0.9rem;
}
.exploreAllButton_M4cN {
padding: 1rem 2rem;
font-size: 1.1rem;
}
}
@media (max-width: 480px) {
.pathsGrid_YLNm {
grid-template-columns: 1fr;
gap: 1.5rem;
max-width: 300px;
}
.pathOrb_FhCW {
width: 140px;
height: 140px;
}
.orbIcon_N1Mg {
font-size: 3rem;
}
.orbLabel_WgfD {
font-size: 0.9rem;
}
.pathStats_vdVp {
flex-direction: column;
gap: 1.5rem;
}
.exploreAllButton_M4cN {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
.section__w0L {
padding: 4rem 0;
background: var(--color-background-accent-subtler);
}
.header_Qikb {
text-align: center;
margin-bottom: 3rem;
}
.heading_gxtt {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--ifm-font-color-base);
}
.subheading_gksv {
font-size: 1.2rem;
color: var(--ifm-color-secondary);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.grid_BKD8 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 4rem;
}
@keyframes fadeInUp_hm_5 {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card_GCIz {
background: var(--ifm-background-surface-color);
padding: 2rem;
border-radius: 16px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
border: 1px solid var(--color-background-accent-subtler-border);
transition: all 0.3s ease;
text-align: center;
animation: fadeInUp_hm_5 0.6s ease forwards;
opacity: 0;
}
.card_GCIz:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
border-color: var(--ifm-color-primary);
}
.cardIcon_kxu8 {
font-size: 3rem;
margin-bottom: 1rem;
}
.cardTitle_GcY6 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--ifm-font-color-base);
}
.cardDescription_WOoO {
color: var(--ifm-color-secondary);
line-height: 1.6;
margin-bottom: 1rem;
}
.cardStats_wpK9 {
font-size: 0.9rem;
font-weight: 600;
color: var(--ifm-color-primary);
background: var(--color-background-accent-subtler);
padding: 0.5rem 1rem;
border-radius: 20px;
display: inline-block;
}
.showcase_tZc4 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
background: var(--ifm-background-surface-color);
padding: 3rem;
border-radius: 20px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.showcaseTitle_fs7U {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--ifm-font-color-base);
}
.showcaseDescription_wkXM {
color: var(--ifm-color-secondary);
line-height: 1.6;
margin-bottom: 2rem;
}
.showcaseButtons_Tspu {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.primaryButton_S369 {
background: var(--ifm-color-primary);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 8px;
-webkit-text-decoration: none;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.primaryButton_S369:hover {
background: var(--color-text-accent-hovered);
-webkit-text-decoration: none;
text-decoration: none;
transform: translateY(-1px);
}
.secondaryButton__jUG {
background: transparent;
color: var(--ifm-color-primary);
padding: 0.75rem 1.5rem;
border: 2px solid var(--ifm-color-primary);
border-radius: 8px;
-webkit-text-decoration: none;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.secondaryButton__jUG:hover {
background: var(--ifm-color-primary);
color: white;
-webkit-text-decoration: none;
text-decoration: none;
transform: translateY(-1px);
}
.showcaseVisual__Q32 {
display: flex;
justify-content: center;
align-items: center;
}
.gitWorkflow_y9gv {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.workflowStep_d7ag {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1rem;
background: var(--color-background-accent-subtler);
border-radius: 12px;
border: 2px solid var(--color-background-accent-subtler-border);
min-width: 80px;
transition: all 0.3s ease;
}
.workflowStep_d7ag:hover {
border-color: var(--ifm-color-primary);
background: var(--ifm-background-surface-color);
}
.stepIcon_Ozy2 {
font-size: 1.5rem;
}
.workflowStep_d7ag span {
font-size: 0.8rem;
font-weight: 600;
color: var(--ifm-color-secondary);
}
.workflowArrow_ej0Q {
font-size: 1.2rem;
color: var(--ifm-color-secondary);
font-weight: bold;
}
@media (max-width: 768px) {
.heading_gxtt {
font-size: 2rem;
}
.showcase_tZc4 {
grid-template-columns: 1fr;
gap: 2rem;
padding: 2rem;
}
.showcaseButtons_Tspu {
justify-content: center;
}
.gitWorkflow_y9gv {
gap: 0.5rem;
}
.workflowStep_d7ag {
min-width: 60px;
padding: 0.75rem 0.5rem;
}
.workflowArrow_ej0Q {
display: none;
}
}
.section__K0b {
padding: 4rem 0;
background: var(--ifm-header-background);
color: white;
}
.header_XqAx {
text-align: center;
margin-bottom: 3rem;
}
.heading__Hpn {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: white;
}
.subheading_UlgT {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.toolsGrid_qwVz {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin-bottom: 4rem;
}
@keyframes fadeInUp_fbyU {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.toolCard_jwrt {
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 2rem;
transition: all 0.3s ease;
animation: fadeInUp_fbyU 0.6s ease forwards;
opacity: 0;
}
.toolCard_jwrt:hover {
transform: translateY(-4px);
background: rgba(255, 255, 255, 0.15);
border-color: var(--ifm-color-primary);
}
.toolHeader_hnbK {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.toolIcon_PBQr {
font-size: 2.5rem;
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
}
.toolInfo__pgp {
flex: 1;
}
.toolName_Tv5G {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 0.25rem;
color: white;
}
.toolTech_hc6c {
font-size: 0.9rem;
color: var(--ifm-color-primary-lightest);
background: rgba(255, 255, 255, 0.1);
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-weight: 500;
}
.toolDescription_Y4Xh {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.toolFeatures_y9US {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.featureTag_RUiz {
font-size: 0.8rem;
background: var(--ifm-color-primary);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 16px;
font-weight: 500;
}
.pipeline_hF_e {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 3rem;
}
.pipelineTitle_Bv4k {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
color: white;
}
.pipelineDescription_SyQt {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 2rem;
}
.exploreButton_QhPr {
background: var(--ifm-color-primary);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 8px;
-webkit-text-decoration: none;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
display: inline-block;
}
.exploreButton_QhPr:hover {
background: var(--color-text-accent-hovered);
-webkit-text-decoration: none;
text-decoration: none;
transform: translateY(-1px);
}
.pipelineVisual_PBEI {
display: flex;
justify-content: center;
align-items: center;
}
.pipelineFlow_ZFHY {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
}
.flowStep_suhq {
display: flex;
align-items: center;
gap: 1rem;
background: rgba(255, 255, 255, 0.1);
padding: 1rem 1.5rem;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
min-width: 150px;
transition: all 0.3s ease;
}
.flowStep_suhq:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.05);
}
.flowIcon_mPlD {
font-size: 1.5rem;
}
.flowStep_suhq span {
font-weight: 600;
color: white;
}
.flowLine_opp5 {
width: 2px;
height: 1.5rem;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
border-radius: 1px;
}
/* Learning Paths Showcase */
.pathsShowcase_bT7p {
background: linear-gradient(135deg, var(--ifm-color-primary) 0%, #00a8b5 100%);
border-radius: 24px;
padding: 3rem;
margin-top: 3rem;
color: white;
position: relative;
overflow: hidden;
}
.pathsShowcase_bT7p::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
z-index: 1;
}
.showcaseHeader_Nd6r {
text-align: center;
margin-bottom: 3rem;
position: relative;
z-index: 2;
}
.showcaseTitle_UuXV {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: white;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.titleIcon_DW8I {
font-size: 3rem;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
.showcaseDescription_OmV1 {
font-size: 1.2rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
max-width: 600px;
margin: 0 auto;
}
.pathsConstellation_k6a9 {
position: relative;
margin: 3rem 0;
z-index: 2;
}
.pathsGrid_p7XB {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 3;
}
.pathOrb_V632 {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
border-radius: 50%;
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
border: 2px solid rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
margin: 0 auto;
}
.pathOrb_V632:hover {
border-color: rgba(255, 255, 255, 0.6);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.pathOrbCore_By_3 { background: rgba(0, 195, 205, 0.3); }
.pathOrbSecondary_DnUo { background: rgba(0, 195, 135, 0.3); }
.pathOrbTertiary_sjiA { background: rgba(25, 118, 210, 0.3); }
.pathOrbAdmin_Q0gM { background: rgba(245, 124, 0, 0.3); }
.pathOrbProduct_bqWU { background: rgba(123, 31, 162, 0.3); }
.pathOrbData_gIeZ { background: rgba(211, 47, 47, 0.3); }
.pathOrbSecurity__2BC { background: rgba(56, 142, 60, 0.3); }
.pathOrbAI__Rae { background: rgba(255, 193, 7, 0.3); }
.pathOrbBusiness_M8Bp { background: rgba(103, 58, 183, 0.3); }
.orbIcon_qUdG {
font-size: 2.5rem;
margin-bottom: 0.5rem;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.orbLabel_TXQj {
font-size: 0.85rem;
font-weight: 600;
text-align: center;
line-height: 1.2;
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.orbGlow_tGM7 {
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.pathOrb_V632:hover .orbGlow_tGM7 {
opacity: 1;
}
.constellationLines_M1dP {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.connectionsSvg_cAMt {
width: 100%;
height: 100%;
opacity: 0.6;
}
.showcaseActions_maKj {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 3rem;
position: relative;
z-index: 2;
}
.exploreAllButton_xGOR {
background: white;
color: var(--ifm-color-primary);
padding: 1rem 2rem;
border-radius: 12px;
-webkit-text-decoration: none;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.exploreAllButton_xGOR:hover {
background: rgba(255, 255, 255, 0.95);
-webkit-text-decoration: none;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.buttonIcon_A6aQ {
font-size: 1.2rem;
}
.pathStats_YzUM {
display: flex;
gap: 2rem;
}
.statItem_RhcS {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.statNumber_FdU3 {
font-size: 2rem;
font-weight: 700;
color: white;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.statLabel_RJ8F {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
letter-spacing: 0.5px;
}
@media (max-width: 1024px) {
.pathsGrid_p7XB {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.showcaseActions_maKj {
flex-direction: column;
gap: 2rem;
text-align: center;
}
.pathStats_YzUM {
justify-content: center;
}
}
@media (max-width: 768px) {
.heading__Hpn {
font-size: 2rem;
}
.toolsGrid_qwVz {
grid-template-columns: 1fr;
}
.pipeline_hF_e {
grid-template-columns: 1fr;
gap: 2rem;
padding: 2rem;
}
.pipelineFlow_ZFHY {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.flowLine_opp5 {
display: none;
}
.flowStep_suhq {
min-width: 120px;
flex-direction: column;
text-align: center;
padding: 1rem;
}
.pathsShowcase_bT7p {
padding: 2rem;
margin-top: 2rem;
}
.showcaseTitle_UuXV {
font-size: 2rem;
flex-direction: column;
gap: 0.5rem;
}
.titleIcon_DW8I {
font-size: 2.5rem;
}
.pathsGrid_p7XB {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.pathOrb_V632 {
width: 100px;
height: 100px;
}
.orbIcon_qUdG {
font-size: 2rem;
}
.orbLabel_TXQj {
font-size: 0.75rem;
}
.pathStats_YzUM {
gap: 1rem;
}
.statNumber_FdU3 {
font-size: 1.5rem;
}
.statLabel_RJ8F {
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.pathsGrid_p7XB {
grid-template-columns: 1fr;
gap: 1rem;
max-width: 300px;
}
.pathOrb_V632 {
width: 120px;
height: 120px;
}
.orbIcon_qUdG {
font-size: 2.5rem;
}
.orbLabel_TXQj {
font-size: 0.85rem;
}
.pathStats_YzUM {
flex-direction: column;
gap: 1rem;
}
}
.section_Z1dW {
padding: 4rem 0;
background: var(--ifm-background-surface-color);
}
.header_O5o7 {
text-align: center;
margin-bottom: 4rem;
}
.heading_c3u1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--ifm-font-color-base);
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.titleIcon_HSq3 {
font-size: 3.5rem;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.subheading_scht {
font-size: 1.3rem;
color: var(--ifm-color-secondary);
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.coursesGrid_dQsJ {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-bottom: 4rem;
}
@keyframes fadeInUp_mtas {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.courseCard_Xr7l {
background: var(--ifm-background-color);
border-radius: 20px;
border: 1px solid var(--color-background-accent-subtler-border);
transition: all 0.3s ease;
overflow: hidden;
height: 100%;
position: relative;
animation: fadeInUp_mtas 0.6s ease forwards;
opacity: 0;
}
.courseCard_Xr7l:hover {
border-color: var(--ifm-color-primary);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
transform: translateY(-4px);
}
.courseLink_b6Ep {
display: flex;
flex-direction: column;
height: 100%;
-webkit-text-decoration: none;
text-decoration: none;
color: inherit;
}
.courseLink_b6Ep:hover {
-webkit-text-decoration: none;
text-decoration: none;
color: inherit;
}
.courseHeader_eorm {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 1.5rem 0;
}
.courseIcon_qgcX {
width: 4rem;
height: 4rem;
background: linear-gradient(135deg, var(--ifm-color-primary) 0%, #00a8b5 100%);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: white;
box-shadow: 0 4px 12px rgba(0, 195, 205, 0.3);
}
.difficultyBadge_sU1s {
padding: 0.5rem 1rem;
border-radius: 20px;
color: white;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.courseContent_a0sd {
padding: 1.5rem;
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 1rem;
}
.courseTitle_TiEW {
font-size: 1.4rem;
font-weight: 600;
color: var(--ifm-font-color-base);
margin: 0;
line-height: 1.3;
}
.courseDescription_QW8B {
color: var(--ifm-color-secondary);
line-height: 1.6;
margin: 0;
flex-grow: 1;
}
.courseMeta_xySH {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 1rem 0;
}
.metaItem_hqlS {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
color: var(--ifm-color-secondary);
}
.metaIcon_fLby {
font-size: 1rem;
}
.metaText_wH7K {
font-weight: 500;
}
.courseTags_jsL6 {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag_u4WW {
background: var(--color-background-accent-subtler);
color: var(--ifm-color-secondary);
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 500;
border: 1px solid var(--color-background-accent-subtler-border);
}
.courseFooter_F6Qq {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
border-top: 1px solid var(--color-background-accent-subtler-border);
background: var(--color-background-accent-subtler);
}
.labIndicator_PCGY {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--ifm-color-primary);
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
}
.labIcon_ypvs {
font-size: 1rem;
}
.startButton_RKh1 {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--ifm-font-color-base);
color: var(--ifm-background-color);
padding: 0.75rem 1.5rem;
border-radius: 12px;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.courseCard_Xr7l:hover .startButton_RKh1 {
background: var(--ifm-color-primary);
transform: translateX(4px);
}
.buttonIcon_WgXr {
font-size: 1rem;
}
/* Showcase Section */
.showcase_S09e {
background: linear-gradient(135deg, var(--ifm-color-primary) 0%, #00a8b5 100%);
border-radius: 24px;
padding: 3rem;
color: white;
position: relative;
overflow: hidden;
}
.showcase_S09e::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
z-index: 1;
}
.showcaseContent_lssV,
.showcaseStats_qpNY {
position: relative;
z-index: 2;
}
.showcaseContent_lssV {
text-align: center;
margin-bottom: 3rem;
}
.showcaseTitle_yIU_ {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.showcaseIcon_mfmC {
font-size: 3rem;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
.showcaseDescription_RYtK {
font-size: 1.2rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
max-width: 600px;
margin: 0 auto 2rem;
}
.showcaseActions_rxxA {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.exploreButton_NRSZ,
.pathsButton_yI01 {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
border-radius: 12px;
font-weight: 600;
-webkit-text-decoration: none;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.1rem;
}
.exploreButton_NRSZ {
background: white;
color: var(--ifm-color-primary);
}
.exploreButton_NRSZ:hover {
background: rgba(255, 255, 255, 0.95);
-webkit-text-decoration: none;
text-decoration: none;
transform: translateY(-2px);
}
.pathsButton_yI01 {
background: transparent;
color: white;
border: 2px solid rgba(255, 255, 255, 0.5);
}
.pathsButton_yI01:hover {
background: rgba(255, 255, 255, 0.1);
border-color: white;
-webkit-text-decoration: none;
text-decoration: none;
transform: translateY(-2px);
}
.showcaseStats_qpNY {
display: flex;
justify-content: center;
gap: 3rem;
}
.statCard_MLCq {
text-align: center;
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 2rem;
min-width: 120px;
}
.statNumber__v1m {
font-size: 2.5rem;
font-weight: 800;
color: white;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 0.5rem;
}
.statLabel_x_1G {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
/* Responsive Design */
@media (max-width: 1024px) {
.coursesGrid_dQsJ {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.showcaseStats_qpNY {
gap: 2rem;
}
}
@media (max-width: 768px) {
.section_Z1dW {
padding: 3rem 0;
}
.heading_c3u1 {
font-size: 2.5rem;
flex-direction: column;
gap: 0.5rem;
}
.titleIcon_HSq3 {
font-size: 3rem;
}
.subheading_scht {
font-size: 1.1rem;
padding: 0 1rem;
}
.coursesGrid_dQsJ {
grid-template-columns: 1fr;
}
.showcase_S09e {
padding: 2rem;
}
.showcaseTitle_yIU_ {
font-size: 2rem;
flex-direction: column;
gap: 0.5rem;
}
.showcaseIcon_mfmC {
font-size: 2.5rem;
}
.showcaseActions_rxxA {
flex-direction: column;
align-items: center;
}
.exploreButton_NRSZ,
.pathsButton_yI01 {
width: 250px;
justify-content: center;
}
.showcaseStats_qpNY {
flex-direction: column;
gap: 1.5rem;
align-items: center;
}
.statCard_MLCq {
min-width: 200px;
}
}
@media (max-width: 480px) {
.courseMeta_xySH {
flex-direction: column;
gap: 0.5rem;
}
.courseFooter_F6Qq {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.startButton_RKh1 {
width: 100%;
justify-content: center;
}
}
.section_NK5r {
padding: 4rem 0;
background: var(--ifm-header-background);
color: white;
}
.header_vrwj {
text-align: center;
margin-bottom: 3rem;
}
.heading_p95F {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: white;
}
.subheading_w6qL {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.content_K6pc {
margin-bottom: 3rem;
}
.sectionTitle_pu0V {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 2rem;
color: white;
text-align: center;
}
.guidesSection_MVRR {
margin-bottom: 4rem;
}
.guidesGrid_cPJC {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
@keyframes fadeInUp_Zxbq {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInScale_l_3Q {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.guideCard_OJiA {
background: rgba(255, 255, 255, 0.1);
animation: fadeInUp_Zxbq 0.6s ease forwards;
opacity: 0;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
}
.guideCard_OJiA:hover {
transform: translateY(-4px);
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
}
.guideAvatar_sS1k {
font-size: 4rem;
margin-bottom: 1rem;
width: 5rem;
height: 5rem;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
margin: 0 auto 1rem;
}
.guideName_kGvo {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: white;
}
.guideRole_M0HC {
color: var(--ifm-color-primary-lightest);
font-weight: 500;
margin-bottom: 0.5rem;
}
.guideExpertise_eFe3 {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 1rem;
line-height: 1.5;
}
.guideStats_qxfN {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-size: 0.9rem;
}
.stat_d2O9 {
color: var(--ifm-color-primary-lightest);
font-weight: 600;
}
.statDivider_fAyO {
color: rgba(255, 255, 255, 0.5);
}
.specialty_sKhQ {
color: rgba(255, 255, 255, 0.8);
}
.benefitsSection_XMfM {
}
.benefitsGrid_zLkr {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.benefitCard_SxBy {
animation: fadeInScale_l_3Q 0.6s ease forwards;
opacity: 0;
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 1.5rem;
text-align: center;
transition: all 0.3s ease;
}
.benefitCard_SxBy:hover {
transform: scale(1.05);
background: rgba(255, 255, 255, 0.15);
}
.benefitIcon_zhFw {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.benefitTitle_beaA {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: white;
}
.benefitDescription_a6Bf {
color: rgba(255, 255, 255, 0.9);
line-height: 1.5;
}
.joinSection_ZMn1 {
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 3rem;
text-align: center;
}
.joinTitle_EYlm {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
color: white;
}
.joinDescription_S2A1 {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.joinRequirements_weMv {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.requirement_xdA3 {
display: flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.1);
padding: 0.75rem 1rem;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.requirementIcon_oS7W {
color: var(--ifm-color-primary-lightest);
font-weight: bold;
}
.joinButtons_dqJE {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.primaryButton_oU99 {
background: var(--ifm-color-primary);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 8px;
-webkit-text-decoration: none;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.primaryButton_oU99:hover {
background: var(--color-text-accent-hovered);
-webkit-text-decoration: none;
text-decoration: none;
transform: translateY(-1px);
}
.secondaryButton_sCEV {
background: transparent;
color: white;
padding: 0.75rem 1.5rem;
border: 2px solid white;
border-radius: 8px;
-webkit-text-decoration: none;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.secondaryButton_sCEV:hover {
background: white;
color: var(--ifm-header-background);
-webkit-text-decoration: none;
text-decoration: none;
transform: translateY(-1px);
}
@media (max-width: 768px) {
.heading_p95F {
font-size: 2rem;
}
.guidesGrid_cPJC {
grid-template-columns: 1fr;
}
.benefitsGrid_zLkr {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.joinRequirements_weMv {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.joinButtons_dqJE {
flex-direction: column;
align-items: center;
}
.primaryButton_oU99,
.secondaryButton_sCEV {
width: 250px;
}
}
.section_w7EQ {
padding: 6rem 0;
position: relative;
overflow: hidden;
}
.sectionBg_ICt_ {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--ifm-color-emphasis-100);
z-index: -1;
}
.container_KpHY {
position: relative;
}
.ctaCard_hcSt {
max-width: 1000px;
margin: 0 auto;
border-radius: 20px;
overflow: hidden;
position: relative;
box-shadow: var(--ifm-global-shadow-md);
background: var(--ifm-background-surface-color);
border: 1px solid var(--ifm-color-emphasis-200);
}
.ctaAccent_qhHQ {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 6px;
background: linear-gradient(
90deg,
var(--ifm-color-primary) 0%,
var(--ifm-color-primary-light) 100%
);
}
.content_VA4x {
padding: 4rem;
position: relative;
z-index: 2;
color: var(--ifm-font-color-base);
}
.title_WSCG {
font-size: 2.5rem;
margin-bottom: 1.5rem;
font-weight: 800;
color: var(--ifm-heading-color);
text-align: center;
}
.description_cenc {
font-size: 1.2rem;
line-height: 1.6;
color: var(--ifm-color-emphasis-700);
margin-bottom: 2.5rem;
text-align: center;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.ctaButtons_Al6Y {
display: flex;
gap: 1.5rem;
justify-content: center;
margin-bottom: 3rem;
}
.primaryButton_KqpE {
padding: 1rem 2rem;
border-radius: 50px;
background: var(--ifm-color-primary);
color: white;
font-weight: 700;
font-size: 1.1rem;
transition: all 0.3s ease;
-webkit-text-decoration: none;
text-decoration: none;
box-shadow: var(--ifm-global-shadow-lw);
}
.primaryButton_KqpE:hover {
transform: translateY(-3px);
box-shadow: var(--ifm-global-shadow-md);
background: var(--ifm-color-primary-dark);
color: white;
-webkit-text-decoration: none;
text-decoration: none;
}
.secondaryButton_K4Yk {
padding: 1rem 2rem;
border-radius: 50px;
background: transparent;
color: var(--ifm-color-primary);
font-weight: 700;
font-size: 1.1rem;
border: 2px solid var(--ifm-color-primary);
transition: all 0.3s ease;
-webkit-text-decoration: none;
text-decoration: none;
display: flex;
align-items: center;
}
.secondaryButton_K4Yk:hover {
background: rgba(var(--ifm-color-primary-rgb), 0.05);
transform: translateY(-3px);
color: var(--ifm-color-primary-dark);
-webkit-text-decoration: none;
text-decoration: none;
}
.externalIcon_YaFf {
margin-left: 0.5rem;
font-size: 1.2rem;
transition: transform 0.2s ease;
}
.secondaryButton_K4Yk:hover .externalIcon_YaFf {
transform: translateY(-2px) translateX(2px);
}
.additionalInfo_XzH4 {
display: flex;
justify-content: space-around;
gap: 2rem;
max-width: 900px;
margin: 0 auto;
}
.infoItem_pK8U {
display: flex;
align-items: center;
gap: 1rem;
}
.infoIcon_AOsb {
font-size: 2rem;
background: var(--ifm-color-emphasis-100);
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--ifm-color-primary);
}
.infoText_GWrv {
display: flex;
flex-direction: column;
}
.infoTitle_lBoU {
font-weight: 700;
font-size: 1.1rem;
color: var(--ifm-heading-color);
}
.infoDesc_fCxw {
font-size: 0.9rem;
color: var(--ifm-color-emphasis-600);
}
.decoration_koT9 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 1;
}
.decorationCircle1_F9Xu,
.decorationCircle2_ewSN,
.decorationCircle3_k2aF {
position: absolute;
border-radius: 50%;
background: var(--ifm-color-primary);
opacity: 0.03;
}
.decorationCircle1_F9Xu {
width: 400px;
height: 400px;
top: -200px;
right: -100px;
}
.decorationCircle2_ewSN {
width: 300px;
height: 300px;
bottom: -100px;
left: -100px;
}
.decorationCircle3_k2aF {
width: 200px;
height: 200px;
top: 50%;
right: 20%;
transform: translateY(-50%);
}
.invisible_vRhP {
opacity: 0;
}
@media screen and (max-width: 900px) {
.section_w7EQ {
padding: 4rem 2rem;
}
.content_VA4x {
padding: 3rem 2rem;
}
.title_WSCG {
font-size: 2rem;
}
.description_cenc {
font-size: 1.1rem;
}
.ctaButtons_Al6Y {
flex-direction: column;
gap: 1rem;
}
.additionalInfo_XzH4 {
flex-direction: column;
gap: 1.5rem;
}
}
/* Futuristic AI Logging Dashboard */
.container_nmXB {
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
--warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
--danger-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
--dark-bg: rgba(0, 0, 0, 0.8);
--dark-border: rgba(255, 255, 255, 0.1);
--neon-blue: #00ffff;
--neon-purple: #bf00ff;
--neon-green: #39ff14;
--neon-orange: #ff6600;
min-height: 100vh;
background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%);
color: #ffffff;
font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
padding: 2rem;
position: relative;
overflow-x: hidden;
}
.container_nmXB::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(120, 255, 198, 0.2) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
}
.header_SwZv {
text-align: center;
margin-bottom: 3rem;
position: relative;
}
.header_SwZv h1 {
font-size: 3.5rem;
font-weight: 900;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1rem;
letter-spacing: -0.02em;
text-shadow: 0 0 30px rgba(102, 126, 234, 0.5);
}
.header_SwZv p {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.7);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.healthIndicator_XGUp {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
}
.healthBadge_hjzF {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 50px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: var(--glass-shadow);
transition: all 0.3s ease;
font-weight: 600;
}
.healthBadge_hjzF:hover {
transform: translateY(-2px);
box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.5);
}
.healthDot_VNKl {
width: 12px;
height: 12px;
border-radius: 50%;
animation: pulse_U3IY 2s infinite;
}
.healthDot_VNKl.online_QcnL {
background: var(--neon-green);
box-shadow: 0 0 10px var(--neon-green);
}
.healthDot_VNKl.offline_VE02 {
background: #ff6b6b;
box-shadow: 0 0 10px #ff6b6b;
}
@keyframes pulse_U3IY {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.1); }
}
.tabs_mqMf {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 3rem;
background: var(--dark-bg);
border-radius: 60px;
padding: 0.5rem;
border: 1px solid var(--dark-border);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
max-width: fit-content;
margin-left: auto;
margin-right: auto;
}
.tab_yXMi {
background: none;
border: none;
padding: 1rem 2rem;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
border-radius: 50px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.tab_yXMi::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--primary-gradient);
transition: left 0.3s ease;
z-index: -1;
}
.tab_yXMi:hover {
color: white;
transform: translateY(-2px);
}
.tab_yXMi:hover::before {
left: 0;
}
.tab_yXMi.active_fgK6 {
color: white;
background: var(--primary-gradient);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}
.content_SAaz {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 24px;
padding: 2.5rem;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
box-shadow: var(--glass-shadow);
position: relative;
overflow: hidden;
}
.content_SAaz::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}
/* Loading and Error States */
.loading_RuN7, .error_dXqX {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 400px;
text-align: center;
}
.loading_RuN7 .spinner_GVB6 {
width: 60px;
height: 60px;
border: 3px solid rgba(255, 255, 255, 0.1);
border-top: 3px solid var(--neon-blue);
border-radius: 50%;
animation: spin_oGPF 1s linear infinite;
margin-bottom: 1rem;
}
@keyframes spin_oGPF {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.error_dXqX {
color: #ff6b6b;
}
/* Stats Grid */
.statsGrid_oNdo {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.statCard_inwS {
background: var(--dark-bg);
border: 1px solid var(--dark-border);
border-radius: 20px;
padding: 2rem;
text-align: center;
position: relative;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
transition: all 0.3s ease;
overflow: hidden;
}
.statCard_inwS::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--primary-gradient);
}
.statCard_inwS:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
border-color: rgba(102, 126, 234, 0.5);
}
.statCard_inwS h3 {
margin: 0 0 1rem 0;
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
}
.statValue__VDI {
font-size: 3rem;
font-weight: 900;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.5rem;
line-height: 1;
}
.statChange_HkRb {
color: rgba(255, 255, 255, 0.6);
font-size: 0.9rem;
font-weight: 500;
}
/* Grid Layouts */
.overviewGrid_AuJE {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
margin-top: 2rem;
}
@media (max-width: 1200px) {
.overviewGrid_AuJE {
grid-template-columns: 1fr;
}
}
/* Recent Activity */
.recentActivity_i7EG {
background: var(--dark-bg);
border: 1px solid var(--dark-border);
border-radius: 20px;
padding: 2rem;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
.recentActivity_i7EG h3 {
margin-bottom: 1.5rem;
color: white;
font-size: 1.4rem;
font-weight: 700;
}
.conversationList_FWyT {
display: flex;
flex-direction: column;
gap: 1rem;
}
.conversationItem_uF_j {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 1.5rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.conversationItem_uF_j::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--primary-gradient);
}
.conversationItem_uF_j:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(102, 126, 234, 0.5);
transform: translateX(8px);
}
.conversationHeader_t5ez {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.taskId_G2oH {
font-family: 'Fira Code', monospace;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
font-size: 0.9rem;
}
.timestamp_otZG {
color: rgba(255, 255, 255, 0.5);
font-size: 0.85rem;
font-family: monospace;
}
.conversationQuery_WnET {
margin-bottom: 1rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
line-height: 1.5;
}
.conversationMeta_xTPZ {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.agent_uBhT, .duration_CxM7, .context7_Wj3L, .feedbackBadge_Uu5f {
padding: 0.4rem 0.8rem;
border-radius: 12px;
font-weight: 600;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.agent_uBhT {
background: var(--success-gradient);
color: white;
}
.duration_CxM7 {
background: var(--warning-gradient);
color: white;
}
.context7_Wj3L {
background: var(--neon-green);
color: black;
box-shadow: 0 0 10px rgba(57, 255, 20, 0.3);
}
.feedbackBadge_Uu5f {
background: var(--secondary-gradient);
color: white;
}
/* Monitor Components */
.miniMonitor_Cgx2 {
background: var(--dark-bg);
border: 1px solid var(--dark-border);
border-radius: 20px;
padding: 2rem;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
height: fit-content;
}
.miniMonitor_Cgx2 h3 {
margin-bottom: 1.5rem;
color: white;
font-size: 1.4rem;
font-weight: 700;
}
/* Real-time Monitor */
.monitorContainer_qW7T {
background: #000000;
border: 1px solid var(--neon-blue);
border-radius: 20px;
overflow: hidden;
min-height: 500px;
display: flex;
flex-direction: column;
box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
}
.monitorHeader_PbLb {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
background: linear-gradient(135deg, #001a1a 0%, #003333 100%);
border-bottom: 1px solid var(--neon-blue);
}
.monitorTitle_qVQY h3 {
margin: 0;
color: var(--neon-blue);
font-family: 'Fira Code', monospace;
font-size: 1.2rem;
text-shadow: 0 0 10px var(--neon-blue);
}
.liveIndicator_HAiM {
display: flex;
align-items: center;
gap: 0.5rem;
background: rgba(0, 255, 255, 0.1);
color: var(--neon-blue);
padding: 0.5rem 1rem;
border-radius: 20px;
border: 1px solid var(--neon-blue);
font-family: monospace;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
}
.liveDot_gYs_ {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--neon-blue);
animation: pulse_U3IY 1.5s infinite;
box-shadow: 0 0 10px var(--neon-blue);
}
.logsContainer_ciNI {
flex: 1;
overflow-y: auto;
padding: 1rem;
background: #000000;
font-family: 'Fira Code', monospace;
font-size: 0.85rem;
line-height: 1.6;
}
.logEntry_M7dY {
border-left: 3px solid var(--neon-blue);
margin-bottom: 1rem;
padding: 1rem;
background: rgba(0, 255, 255, 0.05);
border-radius: 0 12px 12px 0;
transition: all 0.3s ease;
}
.logEntry_M7dY:hover {
background: rgba(0, 255, 255, 0.1);
transform: translateX(5px);
}
.logHeader_opo9 {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.5rem;
}
.logIcon_VBy3 {
font-size: 1.2rem;
}
.logSource_yoZm {
background: var(--primary-gradient);
color: white;
padding: 0.3rem 0.8rem;
border-radius: 12px;
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
}
.logTimestamp_Lu5o {
color: rgba(0, 255, 255, 0.7);
font-size: 0.8rem;
margin-left: auto;
}
.logMessage_Rb1J {
color: var(--neon-blue);
margin-bottom: 0.5rem;
font-weight: 500;
}
.logMetadata_vRzG {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.metadataTag_TAye {
background: rgba(191, 0, 255, 0.2);
color: var(--neon-purple);
padding: 0.2rem 0.6rem;
border-radius: 8px;
font-size: 0.7rem;
border: 1px solid rgba(191, 0, 255, 0.3);
}
/* Mini Monitor Styles */
.miniLogContainer_CQvg {
display: flex;
flex-direction: column;
gap: 0.75rem;
max-height: 200px;
overflow-y: auto;
}
.miniLogEntry_u8zn {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 0.75rem;
transition: all 0.3s ease;
font-size: 0.85rem;
}
.miniLogEntry_u8zn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(102, 126, 234, 0.3);
}
.miniLogHeader_TNSh {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.25rem;
font-size: 0.75rem;
}
.miniLogMessage_n0qL {
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
line-height: 1.3;
}
/* Enhanced Button Styles */
.refreshButton_lAT9 {
background: var(--primary-gradient);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 12px;
cursor: pointer;
font-size: 0.9rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.refreshButton_lAT9:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}
.refreshButton_lAT9:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.retryButton_WHTq {
background: var(--danger-gradient);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 12px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: all 0.3s ease;
margin-top: 1rem;
}
.retryButton_WHTq:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(250, 112, 154, 0.4);
}
/* Conversations Layout */
.conversationsHeader_GGjm {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.conversationsHeader_GGjm h3 {
margin: 0;
color: white;
font-size: 1.8rem;
font-weight: 700;
}
.conversationsContent_SCu3 {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 2rem;
min-height: 600px;
}
.conversationsList_s9uX {
display: flex;
flex-direction: column;
gap: 1rem;
overflow-y: auto;
max-height: 600px;
padding-right: 0.5rem;
}
.conversationCard_ea1C {
background: var(--dark-bg);
border: 1px solid var(--dark-border);
border-radius: 16px;
padding: 1.5rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.conversationCard_ea1C:hover {
border-color: rgba(102, 126, 234, 0.5);
background: rgba(255, 255, 255, 0.05);
transform: translateY(-2px);
}
.conversationCard_ea1C.selected_wC2N {
border-color: var(--neon-blue);
background: rgba(0, 255, 255, 0.1);
box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}
.conversationCardHeader_jxFD {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.conversationCardQuery_gySo {
margin-bottom: 1rem;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.9);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4;
}
.conversationCardMeta_qeST {
display: flex;
gap: 0.75rem;
font-size: 0.8rem;
flex-wrap: wrap;
}
.success_tmXI {
font-size: 1.2rem;
}
/* Conversation Details */
.conversationDetails_kjzq {
background: var(--dark-bg);
border: 1px solid var(--dark-border);
border-radius: 20px;
padding: 2rem;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
overflow-y: auto;
max-height: 600px;
position: relative;
}
.conversationDetailsHeader_k44l {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--dark-border);
}
.conversationDetailsHeader_k44l h4 {
margin: 0;
color: white;
font-size: 1.3rem;
font-weight: 700;
}
.conversationDetailsHeader_k44l button {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: rgba(255, 255, 255, 0.6);
transition: color 0.3s ease;
}
.conversationDetailsHeader_k44l button:hover {
color: var(--neon-blue);
}
.conversationSummary_RHQr {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.summaryItem_x7El {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.summaryItem_x7El strong {
color: rgba(255, 255, 255, 0.7);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Conversation Steps */
.conversationSteps_yutq h5 {
margin-bottom: 1.5rem;
color: var(--neon-blue);
font-size: 1.2rem;
font-weight: 700;
}
.step_HlHX {
border-left: 3px solid var(--neon-blue);
margin-bottom: 1.5rem;
padding-left: 1.5rem;
position: relative;
background: rgba(0, 255, 255, 0.02);
border-radius: 0 12px 12px 0;
padding: 1rem 1.5rem;
}
.step_HlHX::before {
content: '';
position: absolute;
left: -7px;
top: 12px;
width: 11px;
height: 11px;
background: var(--neon-blue);
border-radius: 50%;
box-shadow: 0 0 10px var(--neon-blue);
}
.stepHeader_DESm {
display: flex;
gap: 1rem;
align-items: center;
margin-bottom: 0.75rem;
font-size: 0.9rem;
}
.stepIcon_ylEc {
font-size: 1.2rem;
}
.stepType_pWwU {
background: var(--primary-gradient);
color: white;
padding: 0.3rem 0.8rem;
border-radius: 8px;
font-family: 'Fira Code', monospace;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
}
.stepActor_XJnV {
color: var(--neon-blue);
font-weight: 600;
}
.stepTime_d7kq {
color: rgba(255, 255, 255, 0.5);
font-size: 0.8rem;
margin-left: auto;
font-family: monospace;
}
.stepContent_vr5h {
background: rgba(0, 0, 0, 0.3);
padding: 1rem;
border-radius: 8px;
margin-bottom: 0.75rem;
font-family: 'Inter', sans-serif;
line-height: 1.5;
color: rgba(255, 255, 255, 0.9);
}
.stepMetadata_ahqC {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.metadataItem_nE9H {
background: rgba(191, 0, 255, 0.2);
color: var(--neon-purple);
padding: 0.25rem 0.6rem;
border-radius: 6px;
font-size: 0.75rem;
border: 1px solid rgba(191, 0, 255, 0.3);
font-family: 'Fira Code', monospace;
}
/* Conversation Feedback */
.conversationFeedback_CoSU {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--dark-border);
}
.conversationFeedback_CoSU h5 {
margin-bottom: 1rem;
color: var(--neon-green);
font-size: 1.2rem;
font-weight: 700;
}
.feedbackContent_R9Nm {
background: rgba(57, 255, 20, 0.1);
padding: 1.5rem;
border-radius: 12px;
border: 1px solid rgba(57, 255, 20, 0.2);
}
.feedbackRating_gzPT {
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--neon-green);
font-size: 1.1rem;
}
.feedbackComments_ISsM {
font-style: italic;
margin-bottom: 0.75rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.5;
}
.feedbackCategory_xhWn {
color: rgba(255, 255, 255, 0.6);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* No Data State */
.noData_Iiys {
text-align: center;
padding: 3rem;
color: rgba(255, 255, 255, 0.6);
}
.noData_Iiys h4 {
margin-bottom: 1rem;
color: rgba(255, 255, 255, 0.8);
font-size: 1.3rem;
}
.noData_Iiys p {
line-height: 1.6;
max-width: 400px;
margin: 0 auto;
}
/* Feedback Stats */
.feedbackStats_HyiY {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.feedbackStatCard_sEHB {
background: var(--dark-bg);
border: 1px solid var(--dark-border);
border-radius: 20px;
padding: 2rem;
text-align: center;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
.feedbackStatCard_sEHB h4 {
margin: 0 0 1rem 0;
color: rgba(255, 255, 255, 0.7);
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.satisfactionRate_dmmX, .averageRating_FByB {
font-size: 3rem;
font-weight: 900;
background: var(--success-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 1rem 0;
line-height: 1;
}
.satisfactionDetails_xm6H, .ratingDetails_zMvA {
color: rgba(255, 255, 255, 0.6);
font-size: 0.9rem;
}
/* User Flow Tab Styles */
.userFlow_O7ss {
display: flex;
flex-direction: column;
gap: 2rem;
}
.userFlow_O7ss h3 {
margin-bottom: 0.5rem;
color: white;
font-size: 1.8rem;
font-weight: 700;
}
.userFlowDescription_zw5H {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 2rem;
line-height: 1.6;
font-size: 1rem;
}
.userFlowContainer_Mhbo {
display: flex;
flex-direction: column;
gap: 2rem;
}
/* User Flow Card */
.userFlowCard_prek {
background: var(--dark-bg);
border: 1px solid var(--dark-border);
border-radius: 20px;
overflow: hidden;
transition: all 0.3s ease;
}
.userFlowCard_prek:hover {
border-color: rgba(102, 126, 234, 0.5);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.userFlowHeader_PySw {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
cursor: pointer;
border-bottom: 1px solid var(--dark-border);
transition: background 0.3s ease;
}
.userFlowHeader_PySw:hover {
background: rgba(255, 255, 255, 0.02);
}
.userFlowTitle_v1D9 h4 {
margin: 0 0 0.5rem 0;
color: var(--neon-blue);
font-size: 1.2rem;
font-weight: 700;
font-family: 'Fira Code', monospace;
}
.userFlowQuery_xo7u {
color: rgba(255, 255, 255, 0.8);
font-size: 0.95rem;
line-height: 1.4;
}
.userFlowSummary_VJ4L {
display: flex;
align-items: center;
gap: 1rem;
font-size: 0.9rem;
}
.userFlowDuration_nMuZ {
background: var(--warning-gradient);
color: white;
padding: 0.3rem 0.8rem;
border-radius: 12px;
font-weight: 600;
}
.userFlowSteps_OnPe {
background: var(--primary-gradient);
color: white;
padding: 0.3rem 0.8rem;
border-radius: 12px;
font-weight: 600;
}
.userFlowToggle_BurG {
color: var(--neon-blue);
font-size: 1.2rem;
font-weight: bold;
}
/* Flow Overview */
.userFlowOverview_MSPC {
padding: 1.5rem;
background: rgba(255, 255, 255, 0.02);
}
.flowPhases_qCUn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.flowPhase_hji6 {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
flex: 1;
transition: all 0.3s ease;
}
.flowPhase_hji6:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
}
.phaseIcon_OkMf {
font-size: 1.5rem;
margin-bottom: 0.25rem;
}
.phaseLabel_JVR0 {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: center;
}
.phaseCount_Z3Cx {
font-size: 1.2rem;
font-weight: 700;
color: var(--neon-blue);
}
.flowArrow_oe0g {
color: var(--neon-blue);
font-size: 1.5rem;
font-weight: bold;
margin: 0 0.5rem;
}
/* User Flow Timeline */
.userFlowTimeline_cm4h {
padding: 2rem;
background: rgba(0, 0, 0, 0.2);
}
.userFlowTimeline_cm4h h5 {
margin-bottom: 1.5rem;
color: var(--neon-blue);
font-size: 1.3rem;
font-weight: 700;
}
.timelineContainer_bLHz {
position: relative;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.timelineStep_C513 {
display: flex;
align-items: flex-start;
gap: 1rem;
position: relative;
}
.timelineStepMarker_Jbas {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
border: 2px solid rgba(255, 255, 255, 0.2);
flex-shrink: 0;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
z-index: 2;
position: relative;
}
.timelineConnector_rIJT {
position: absolute;
left: 19px;
top: 40px;
width: 2px;
height: calc(100% + 1.5rem);
background: linear-gradient(180deg, var(--neon-blue) 0%, rgba(0, 255, 255, 0.3) 100%);
z-index: 1;
}
.timelineStepContent_ImCV {
flex: 1;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.timelineStepHeader_d3CK {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.75rem;
flex-wrap: wrap;
}
.timelineStepActor_ef8D {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--neon-blue);
font-weight: 600;
font-size: 0.9rem;
}
.timelineStepType_UYIu {
background: var(--primary-gradient);
color: white;
padding: 0.25rem 0.6rem;
border-radius: 8px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
font-family: 'Fira Code', monospace;
}
.timelineStepTime_sBf4 {
color: rgba(255, 255, 255, 0.5);
font-size: 0.8rem;
margin-left: auto;
font-family: monospace;
}
.timelineStepMessage_i5m0 {
color: rgba(255, 255, 255, 0.9);
line-height: 1.5;
margin-bottom: 0.75rem;
}
.timelineStepMetadata_fjJB {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.timelineMetadataTag_Oijp {
background: rgba(191, 0, 255, 0.2);
color: var(--neon-purple);
padding: 0.2rem 0.5rem;
border-radius: 6px;
font-size: 0.75rem;
border: 1px solid rgba(191, 0, 255, 0.3);
font-family: 'Fira Code', monospace;
}
/* User Flow Feedback Summary */
.userFlowFeedbackSummary_jL5U {
margin-top: 2rem;
padding: 1.5rem;
background: rgba(57, 255, 20, 0.1);
border-radius: 12px;
border: 1px solid rgba(57, 255, 20, 0.2);
}
.userFlowFeedbackSummary_jL5U h6 {
margin: 0 0 1rem 0;
color: var(--neon-green);
font-size: 1.1rem;
font-weight: 700;
}
.feedbackSummaryContent_AIFM {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.feedbackSummaryRating_FLjH {
font-size: 1.1rem;
font-weight: 700;
color: var(--neon-green);
}
.feedbackSummaryComments_djzm {
font-style: italic;
color: rgba(255, 255, 255, 0.8);
line-height: 1.5;
padding: 0.75rem;
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
.feedbackSummaryMeta_FG7D {
color: rgba(255, 255, 255, 0.6);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Responsive Design */
@media (max-width: 1200px) {
.conversationsContent_SCu3 {
grid-template-columns: 1fr;
}
.conversationDetails_kjzq {
max-height: 400px;
}
.flowPhases_qCUn {
flex-direction: column;
gap: 1rem;
}
.flowArrow_oe0g {
transform: rotate(90deg);
margin: 0;
}
}
@media (max-width: 768px) {
.userFlowHeader_PySw {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.userFlowSummary_VJ4L {
width: 100%;
justify-content: space-between;
}
.timelineStepHeader_d3CK {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.timelineStepTime_sBf4 {
margin-left: 0;
}
.flowPhase_hji6 {
padding: 0.75rem;
}
.phaseIcon_OkMf {
font-size: 1.2rem;
}
}
@media (max-width: 768px) {
.container_nmXB {
padding: 1rem;
}
.header_SwZv h1 {
font-size: 2.5rem;
}
.tabs_mqMf {
flex-wrap: wrap;
border-radius: 20px;
}
.tab_yXMi {
padding: 0.75rem 1.5rem;
font-size: 0.9rem;
}
.content_SAaz {
padding: 1.5rem;
}
.statsGrid_oNdo {
grid-template-columns: 1fr;
gap: 1rem;
}
.statCard_inwS {
padding: 1.5rem;
}
.statValue__VDI {
font-size: 2.5rem;
}
.conversationMeta_xTPZ {
flex-direction: column;
gap: 0.5rem;
}
.healthIndicator_XGUp {
flex-wrap: wrap;
}
.conversationSummary_RHQr {
grid-template-columns: 1fr;
}
.stepHeader_DESm {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.stepTime_d7kq {
margin-left: 0;
}
}
/* Custom Scrollbars */
.logsContainer_ciNI::-webkit-scrollbar {
width: 8px;
}
.logsContainer_ciNI::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
}
.logsContainer_ciNI::-webkit-scrollbar-thumb {
background: var(--neon-blue);
border-radius: 4px;
}
.logsContainer_ciNI::-webkit-scrollbar-thumb:hover {
background: rgba(0, 255, 255, 0.8);
}
/* Glow Effects */
.glow_GAZ5 {
box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}
.neon-glow_fuJy {
box-shadow: 0 0 20px var(--neon-blue);
}
/* Animation Classes */
.fade-in_kJaZ {
animation: fadeIn_muGu 0.5s ease-in;
}
@keyframes fadeIn_muGu {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.slide-in_pNNM {
animation: slideIn_Cx6V 0.3s ease-out;
}
@keyframes slideIn_Cx6V {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.title_f1Hy {
font-size: 3rem;
}
/**
Blog post title should be smaller on smaller devices
**/
@media (max-width: 576px) {
.title_f1Hy {
font-size: 2rem;
}
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.container_mt6G {
font-size: 0.9rem;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
[data-theme='dark'] .githubSvg_Uu4N {
fill: var(--light);
}
[data-theme='light'] .githubSvg_Uu4N {
fill: var(--dark);
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
[data-theme='dark'] .xSvg_y3PF {
fill: var(--light);
}
[data-theme='light'] .xSvg_y3PF {
fill: var(--dark);
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
[data-theme='dark'] .instagramSvg_YC40 {
fill: var(--light);
}
[data-theme='light'] .instagramSvg_YC40 {
fill: var(--dark);
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
[data-theme='dark'] .threadsSvg_PTXY {
fill: var(--light);
}
[data-theme='light'] .threadsSvg_PTXY {
fill: var(--dark);
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
:root {
--docusaurus-blog-social-icon-size: 1rem;
}
.authorSocials_rSDt {
/*
This ensures that container takes height even if there's no social link
This keeps author names aligned even if only some have socials
*/
height: var(--docusaurus-blog-social-icon-size);
display: flex;
flex-wrap: wrap;
align-items: center;
line-height: 0;
overflow: hidden;
line-clamp: 1;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.authorSocialLink_owbf {
height: var(--docusaurus-blog-social-icon-size);
width: var(--docusaurus-blog-social-icon-size);
line-height: 0;
margin-right: 0.4rem;
}
.authorSocialIcon_XYv3 {
width: var(--docusaurus-blog-social-icon-size);
height: var(--docusaurus-blog-social-icon-size);
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.authorImage_XqGP {
--ifm-avatar-photo-size: 3.6rem;
}
.author-as-h1_n9oJ .authorImage_XqGP {
--ifm-avatar-photo-size: 7rem;
}
.author-as-h2_gXvM .authorImage_XqGP {
--ifm-avatar-photo-size: 5.4rem;
}
.authorDetails_lV9A {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-around;
}
.authorName_yefp {
font-size: 1.1rem;
line-height: 1.1rem;
display: flex;
flex-direction: row;
}
.author-as-h1_n9oJ .authorName_yefp {
font-size: 2.4rem;
line-height: 2.4rem;
display: inline;
}
.author-as-h2_gXvM .authorName_yefp {
font-size: 1.4rem;
line-height: 1.4rem;
display: inline;
}
.authorTitle_nd0D {
font-size: 0.8rem;
line-height: 1rem;
display: -webkit-box;
overflow: hidden;
line-clamp: 1;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.author-as-h1_n9oJ .authorTitle_nd0D {
font-size: 1.2rem;
line-height: 1.6rem;
}
.author-as-h2_gXvM .authorTitle_nd0D {
font-size: 1rem;
line-height: 1.3rem;
}
.authorBlogPostCount_iiJ5 {
background: var(--ifm-color-secondary);
color: var(--ifm-color-black);
font-size: 0.8rem;
line-height: 1.2;
border-radius: var(--ifm-global-radius);
padding: 0.1rem 0.4rem;
margin-left: 0.3rem;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.authorCol_Hf19 {
max-width: inherit !important;
}
.imageOnlyAuthorRow_pa_O {
display: flex;
flex-flow: row wrap;
}
.imageOnlyAuthorCol_G86a {
margin-left: 0.3rem;
margin-right: 0.3rem;
}
.container_PqSc {
min-height: 100vh;
background: var(--ifm-background-color);
}
/* Hero Section */
.hero_Kph9 {
background: var(--ifm-header-background);
color: white;
padding: 3rem 2rem 4rem;
position: relative;
overflow: hidden;
}
.hero_Kph9::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 30, 45, 0.9) 0%, rgba(0, 195, 205, 0.1) 100%);
z-index: 1;
}
.heroContent_MHPl {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.backLink_P7Uw {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: rgba(255, 255, 255, 0.8);
-webkit-text-decoration: none;
text-decoration: none;
margin-bottom: 2rem;
transition: color 0.3s ease;
}
.backLink_P7Uw:hover {
color: var(--ifm-color-primary-lightest);
-webkit-text-decoration: none;
text-decoration: none;
}
.heroMain_uqvu {
display: grid;
grid-template-columns: 1fr 400px;
gap: 3rem;
align-items: center;
}
.heroText_sTi_ {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.courseCategory_vBqc {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(0, 195, 205, 0.2);
color: var(--ifm-color-primary-lightest);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
border: 1px solid rgba(0, 195, 205, 0.3);
width: fit-content;
}
.categoryIcon_TnR4 {
font-size: 1.1rem;
}
.categoryText_oGzD {
font-weight: 600;
}
.title_dt0C {
font-size: 3rem;
font-weight: 700;
margin: 0;
background: linear-gradient(135deg, white 0%, var(--ifm-color-primary-lightest) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1.2;
}
.description_HqOX {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin: 0;
}
.courseStats_EWeg {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.statBadge_VZAb {
display: flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 0.75rem 1rem;
border-radius: 12px;
color: white;
font-weight: 500;
}
.statIcon_AUBa {
font-size: 1.2rem;
}
.statValue_mPWi {
font-size: 0.95rem;
}
.heroActions_kH0E {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.enrollButton_Ised,
.continueButton_mYrj,
.previewButton_iPlV,
.bookmarkButton_KcVZ {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 1.5rem;
border-radius: 12px;
font-weight: 600;
font-size: 1rem;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.enrollButton_Ised,
.continueButton_mYrj {
background: var(--ifm-color-primary);
color: white;
}
.enrollButton_Ised:hover,
.continueButton_mYrj:hover {
background: #00a8b5;
transform: translateY(-2px);
}
.previewButton_iPlV {
background: transparent;
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.previewButton_iPlV:hover {
background: rgba(255, 255, 255, 0.1);
border-color: white;
}
.bookmarkButton_KcVZ {
background: transparent;
color: rgba(255, 255, 255, 0.8);
border: 2px solid rgba(255, 255, 255, 0.2);
}
.bookmarkButton_KcVZ:hover {
color: white;
border-color: rgba(255, 255, 255, 0.4);
}
.buttonIcon_k2Ii {
font-size: 1.1rem;
}
.heroImageContainer_xfAP {
position: relative;
height: 350px;
border-radius: 16px;
overflow: hidden;
}
.heroImage_x9RJ {
width: 100%;
height: 100%;
object-fit: cover;
}
.imageOverlay_eZmk {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 30, 45, 0.3) 0%, rgba(0, 195, 205, 0.2) 100%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
}
.overlayIcon_xmtz {
font-size: 4rem;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
.overlayBadge_sfM7 {
background: var(--ifm-color-primary);
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-weight: 600;
font-size: 0.9rem;
}
/* Content Section */
.contentSection_9Ibr {
background: var(--ifm-background-surface-color);
padding: 4rem 2rem;
}
.sectionContent_LkH4 {
max-width: 1200px;
margin: 0 auto;
}
.sectionTitle_Jivq {
display: flex;
align-items: center;
gap: 1rem;
font-size: 2.5rem;
font-weight: 700;
color: var(--ifm-font-color-base);
margin-bottom: 1rem;
text-align: center;
justify-content: center;
}
.sectionIcon_hscH {
font-size: 3rem;
}
.sectionSubtitle_ESyu {
font-size: 1.2rem;
color: var(--ifm-color-secondary);
text-align: center;
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Module Navigation */
.moduleNavigation_NL8W {
display: flex;
gap: 1rem;
margin-bottom: 3rem;
overflow-x: auto;
padding-bottom: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.moduleNavButton_OwiZ {
display: flex;
align-items: center;
gap: 1rem;
background: var(--color-background-accent-subtler);
border: 2px solid var(--color-background-accent-subtler-border);
padding: 1rem 1.5rem;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
min-width: 200px;
text-align: left;
}
.moduleNavButton_OwiZ:hover {
border-color: var(--ifm-color-primary);
transform: translateY(-2px);
}
.moduleNavButtonActive_ZMNY {
background: var(--ifm-color-primary);
color: white;
border-color: var(--ifm-color-primary);
}
.moduleNavNumber_RIOl {
width: 2.5rem;
height: 2.5rem;
background: var(--ifm-background-surface-color);
color: var(--ifm-font-color-base);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 1rem;
flex-shrink: 0;
}
.moduleNavButtonActive_ZMNY .moduleNavNumber_RIOl {
background: rgba(255, 255, 255, 0.2);
color: white;
}
.moduleNavContent_Lj96 {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.moduleNavTitle_c2eY {
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
}
.moduleNavDuration_a8XZ {
font-size: 0.85rem;
opacity: 0.8;
}
/* Module Details */
.moduleDetails_UmJQ {
position: relative;
}
.moduleContent_L_UT {
display: none;
}
.moduleContentActive_pSyP {
display: block;
}
.moduleHeader_evNq {
display: flex;
gap: 2rem;
margin-bottom: 3rem;
align-items: flex-start;
}
.moduleNumber_TXVP {
width: 4rem;
height: 4rem;
background: var(--ifm-color-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 700;
flex-shrink: 0;
}
.moduleInfo_G8EI {
flex: 1;
}
.moduleTitle_muia {
font-size: 2rem;
font-weight: 600;
color: var(--ifm-font-color-base);
margin: 0 0 1rem 0;
}
.moduleDescription_OVH1 {
font-size: 1.1rem;
color: var(--ifm-color-secondary);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.moduleMeta__Hsy {
display: flex;
gap: 2rem;
font-size: 1rem;
color: var(--ifm-color-secondary);
flex-wrap: wrap;
}
.moduleMetaItem_YvVq {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--color-background-accent-subtler);
padding: 0.5rem 1rem;
border-radius: 20px;
font-weight: 500;
}
.metaIcon_Xaxm {
font-size: 1.1rem;
}
/* Sections Grid */
.sectionsGrid_R3dt {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
.sectionCard_R7Ns {
background: var(--ifm-background-color);
border: 1px solid var(--color-background-accent-subtler-border);
border-radius: 16px;
padding: 1.5rem;
transition: all 0.3s ease;
position: relative;
display: flex;
flex-direction: column;
gap: 1rem;
}
.sectionCard_R7Ns:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
border-color: var(--ifm-color-primary);
}
.sectionHeader_ynKe {
display: flex;
align-items: center;
gap: 1rem;
}
.sectionNumber_BNpx {
width: 2rem;
height: 2rem;
background: var(--color-background-accent-subtler);
color: var(--ifm-font-color-base);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.9rem;
flex-shrink: 0;
}
.sectionTypeIcon_Z9Jh {
font-size: 1.5rem;
}
.sectionContent_LkH4 {
flex: 1;
}
.sectionTitle_Jivq {
font-size: 1.1rem;
font-weight: 600;
color: var(--ifm-font-color-base);
margin: 0 0 0.5rem 0;
line-height: 1.4;
}
.sectionMeta_FaxB {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.sectionType_w9Tb {
font-size: 0.85rem;
color: var(--ifm-color-secondary);
font-weight: 500;
}
.sectionDuration_oTKj {
font-size: 0.85rem;
color: var(--ifm-color-secondary);
}
.labBadge_GxLy {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--ifm-color-primary);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 500;
}
.labIcon_dydr {
font-size: 0.9rem;
}
.sectionActions_XAms {
display: flex;
gap: 0.5rem;
}
.startSectionButton_s7RA,
.previewSectionButton_YYwc {
background: var(--ifm-color-primary);
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
font-size: 0.9rem;
transition: all 0.3s ease;
flex: 1;
}
.startSectionButton_s7RA:hover {
background: #00a8b5;
}
.previewSectionButton_YYwc {
background: transparent;
color: var(--ifm-color-primary);
border: 1px solid var(--ifm-color-primary);
}
.previewSectionButton_YYwc:hover {
background: var(--ifm-color-primary);
color: white;
}
/* Outcomes Section */
.outcomesSection_MVNZ {
background: var(--color-background-accent-subtler);
padding: 4rem 2rem;
}
.outcomesGrid_XPIV {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.outcomeCard_mlnz {
display: flex;
gap: 1.5rem;
background: var(--ifm-background-surface-color);
padding: 2rem;
border-radius: 16px;
border: 1px solid var(--color-background-accent-subtler-border);
transition: all 0.3s ease;
align-items: flex-start;
}
.outcomeCard_mlnz:hover {
transform: translateY(-4px);
border-color: var(--ifm-color-primary);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.outcomeIcon_svO3 {
width: 3rem;
height: 3rem;
background: var(--ifm-color-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
}
.outcomeContent_K2rD {
flex: 1;
}
.outcomeContent_K2rD h4 {
font-size: 1.2rem;
font-weight: 600;
color: var(--ifm-font-color-base);
margin: 0 0 0.5rem 0;
}
.outcomeContent_K2rD p {
font-size: 0.95rem;
color: var(--ifm-color-secondary);
line-height: 1.5;
margin: 0;
}
/* CTA Section */
.ctaSection_cWZ_ {
background: var(--ifm-color-primary);
color: white;
padding: 4rem 2rem;
}
.ctaContent_kEuN {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.ctaTitle_i35m {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.ctaDescription_faYj {
font-size: 1.2rem;
line-height: 1.6;
margin-bottom: 2rem;
color: rgba(255, 255, 255, 0.9);
}
.ctaActions_szij {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.primaryCta_NSS2,
.secondaryCta_Fq32 {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
border-radius: 12px;
font-weight: 600;
-webkit-text-decoration: none;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
font-size: 1rem;
}
.primaryCta_NSS2 {
background: white;
color: var(--ifm-color-primary);
}
.primaryCta_NSS2:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
}
.secondaryCta_Fq32 {
background: transparent;
color: white;
border: 2px solid white;
}
.secondaryCta_Fq32:hover {
background: white;
color: var(--ifm-color-primary);
-webkit-text-decoration: none;
text-decoration: none;
transform: translateY(-2px);
}
/* Loading & Error States */
.loading_tAyk {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
color: var(--ifm-color-secondary);
min-height: 400px;
}
.loadingSpinner_U_zm {
width: 40px;
height: 40px;
border: 3px solid var(--color-background-accent-subtler-border);
border-top-color: var(--ifm-color-primary);
border-radius: 50%;
animation: spin_VWhe 1s linear infinite;
margin-bottom: 1rem;
}
@keyframes spin_VWhe {
to {
transform: rotate(360deg);
}
}
.error__Y7U {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
text-align: center;
min-height: 400px;
}
.errorIcon_I6ZT {
font-size: 4rem;
margin-bottom: 1rem;
}
.error__Y7U h2 {
font-size: 2rem;
color: var(--ifm-font-color-base);
margin-bottom: 1rem;
}
.error__Y7U p {
color: var(--ifm-color-secondary);
margin-bottom: 2rem;
font-size: 1.1rem;
}
.backButton_ml4p {
background: var(--ifm-color-primary);
color: white;
padding: 1rem 1.5rem;
border-radius: 8px;
-webkit-text-decoration: none;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.backButton_ml4p:hover {
background: #00a8b5;
-webkit-text-decoration: none;
text-decoration: none;
transform: translateY(-2px);
}
/* Responsive Design */
@media (max-width: 1024px) {
.heroMain_uqvu {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.heroImageContainer_xfAP {
max-width: 400px;
margin: 0 auto;
}
.moduleNavigation_NL8W {
justify-content: flex-start;
overflow-x: auto;
}
.moduleNavButton_OwiZ {
min-width: 180px;
}
.sectionsGrid_R3dt {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
}
@media (max-width: 768px) {
.hero_Kph9 {
padding: 2rem 1rem 3rem;
}
.title_dt0C {
font-size: 2.5rem;
}
.description_HqOX {
font-size: 1.1rem;
}
.courseStats_EWeg {
justify-content: center;
}
.heroActions_kH0E {
justify-content: center;
flex-direction: column;
align-items: center;
}
.enrollButton_Ised,
.continueButton_mYrj,
.previewButton_iPlV,
.bookmarkButton_KcVZ {
width: 100%;
max-width: 300px;
}
.moduleHeader_evNq {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.moduleNumber_TXVP {
margin: 0 auto;
}
.moduleMeta__Hsy {
justify-content: center;
}
.sectionsGrid_R3dt {
grid-template-columns: 1fr;
}
.outcomesGrid_XPIV {
grid-template-columns: 1fr;
}
.moduleNavigation_NL8W {
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.moduleNavButton_OwiZ {
width: 100%;
max-width: 350px;
}
.ctaActions_szij {
flex-direction: column;
align-items: center;
}
.primaryCta_NSS2,
.secondaryCta_Fq32 {
width: 250px;
}
}
@media (max-width: 480px) {
.hero_Kph9 {
padding: 1.5rem 1rem 2rem;
}
.title_dt0C {
font-size: 2rem;
}
.sectionTitle_Jivq {
font-size: 2rem;
}
.moduleTitle_muia {
font-size: 1.5rem;
}
.courseStats_EWeg {
flex-direction: column;
align-items: center;
}
.statBadge_VZAb {
width: 100%;
justify-content: center;
max-width: 250px;
}
.outcomeCard_mlnz {
flex-direction: column;
text-align: center;
gap: 1rem;
}
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.authorListItem_n3yI {
list-style-type: none;
margin-bottom: 2rem;
}
.container_IGtr {
padding: 20px;
max-width: 1200px;
margin: auto;
}
.title_mDTT {
text-align: center;
color: #2e8555;
font-size: 2.5rem;
margin-bottom: 10px;
}
.description_DjXB {
text-align: center;
font-size: 1.2rem;
margin-bottom: 40px;
}
.section_CnZf {
margin-bottom: 40px;
}
.sectionTitle_tNfe {
font-size: 1.8rem;
margin-bottom: 10px;
border-bottom: 2px solid #eee;
padding-bottom: 5px;
}
.learningObjective_Pwnv {
font-size: 1.1rem;
margin-bottom: 20px;
}
.cardContainer_LTsR {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.card_Sulg {
border: 1px solid #ddd;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease;
}
.card_Sulg:hover {
transform: translateY(-5px);
}
.cardHeader_hN_b {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.cardType_JC5o {
font-size: 1rem;
color: #888;
}
.cardDescription_Mhyx {
font-size: 1rem;
margin-bottom: 10px;
}
.externalContent_oIG0, .resources_tpku {
margin-top: 10px;
}
.externalContent_oIG0 h4, .resources_tpku h4 {
font-size: 1.1rem;
color: #2e8555;
margin-bottom: 5px;
}
.link_gGM4 {
color: #2e8555;
-webkit-text-decoration: none;
text-decoration: none;
}
.link_gGM4:hover {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.availability_vrlB, .deliveryPartner_z_kD, .notes_fAlA {
font-size: 0.9rem;
margin-top: 10px;
}
/* src/components/CodePlayground/styles.module.css */
.playgroundContainer_uLQi {
background-color: var(--ifm-background-surface-color);
border-radius: 12px;
border: 1px solid var(--ifm-color-emphasis-300);
padding: 20px;
margin-bottom: 2rem;
}
.playgroundTitle_FON_ {
margin-top: 0;
margin-bottom: 20px;
border-bottom: 1px solid var(--ifm-color-emphasis-200);
padding-bottom: 10px;
}
.inputSection_Dhh5 {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 20px;
}
.promptContainer_nuUS {
flex: 1 1 300px;
display: flex;
flex-direction: column;
}
.promptContainer_nuUS label {
margin-bottom: 5px;
font-weight: bold;
}
.promptInput_gVcW {
flex: 1;
padding: 10px;
border-radius: 6px;
border: 1px solid var(--ifm-color-emphasis-300);
resize: vertical;
background-color: var(--ifm-background-color);
color: var(--ifm-font-color-base);
}
.languageSelector_rl60 {
display: flex;
flex-direction: column;
min-width: 150px;
}
.languageSelector_rl60 label {
margin-bottom: 5px;
font-weight: bold;
}
.languageSelector_rl60 select {
padding: 10px;
border-radius: 6px;
border: 1px solid var(--ifm-color-emphasis-300);
background-color: var(--ifm-background-color);
color: var(--ifm-font-color-base);
}
.generateButton_sBNI {
align-self: flex-end;
background-color: var(--ifm-color-primary);
color: white;
border: none;
border-radius: 6px;
padding: 10px 20px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.2s;
}
.generateButton_sBNI:hover:not(:disabled) {
background-color: var(--ifm-color-primary-dark);
}
.generateButton_sBNI:disabled {
background-color: var(--ifm-color-emphasis-300);
cursor: not-allowed;
}
.errorMessage_PMGB {
background-color: #ffebee;
color: #c62828;
padding: 15px;
border-radius: 6px;
margin-bottom: 20px;
}
.codeSection_xIhq {
margin-bottom: 20px;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--ifm-color-emphasis-300);
}
.codeHeader_H1Ch {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 15px;
background-color: var(--ifm-color-emphasis-200);
border-bottom: 1px solid var(--ifm-color-emphasis-300);
}
.fileName_EuB0 {
font-family: var(--ifm-font-family-monospace);
font-size: 0.9rem;
font-weight: bold;
}
.copyButton_OxYf {
background-color: var(--ifm-color-emphasis-300);
border: none;
border-radius: 4px;
padding: 4px 8px;
font-size: 0.8rem;
cursor: pointer;
transition: background-color 0.2s;
}
.copyButton_OxYf:hover {
background-color: var(--ifm-color-emphasis-400);
}
.codeBlock_g_4d {
margin: 0;
padding: 15px;
background-color: var(--ifm-pre-background);
overflow-x: auto;
font-size: 0.9rem;
}
.explanation_lhI3 {
background-color: var(--ifm-color-emphasis-100);
padding: 15px;
border-radius: 8px;
border-left: 4px solid var(--ifm-color-primary);
}
.explanation_lhI3 h4 {
margin-top: 0;
margin-bottom: 10px;
font-size: 1rem;
}
.explanation_lhI3 p {
margin: 0;
white-space: pre-wrap;
}
.loadingState_5f3l {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
background-color: var(--ifm-background-surface-color);
border-radius: 8px;
border: 1px solid var(--ifm-color-emphasis-300);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#game {
text-align: center;
justify-content: center;
position: relative;
overflow: hidden;
min-height: 600px;
height: 100%;
}
.game-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
canvas {
display: block !important;
width: 100% !important;
height: 600px !important;
margin: auto;
outline: none;
position: absolute;
top: 0;
left: 0;
}
.dot {
z-index: 10000;
position: fixed;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
border-radius: 50%;
transform: translate3d(-50%, -50%, 0);
border: 2px solid white;
box-shadow: 0 0 4px rgba(0,0,0,0.5);
pointer-events: none;
}
#testBox {
background-color: transparent;
}
/* Controls help */
.controls-help {
position: absolute;
bottom: 20px;
left: 20px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
border-radius: 5px;
font-size: 14px;
z-index: 1000;
pointer-events: none;
}
/* Game UI elements */
.ui-element {
position: absolute;
padding: 10px;
background: rgba(33, 150, 243, 0.7);
color: white;
border-radius: 5px;
z-index: 100;
}
/* Transition effects */
.scene-transition {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
z-index: 2000;
opacity: 0;
pointer-events: none;
transition: opacity 1s ease;
}
.scene-transition.active {
opacity: 1;
}
/* CSS Custom Properties for Brand Colors and Dark Mode */
:root {
--brand-navy: #0a1e2d;
--brand-spacemint: #00c3cd;
--brand-pumpkin: #ef7c00;
--brand-psychedelic: #5f23a0;
--brand-fresh-green: #00c387;
--brand-coral: #ff0555;
--sidebar-primary: var(--brand-navy);
--sidebar-accent: var(--brand-spacemint);
--sidebar-secondary: var(--brand-pumpkin);
--sidebar-success: var(--brand-fresh-green);
}
[data-theme="dark"] {
--sidebar-primary: var(--brand-navy);
--sidebar-accent: var(--brand-spacemint);
--sidebar-secondary: var(--brand-pumpkin);
--sidebar-success: var(--brand-fresh-green);
}
.course-sidebar-extension {
max-width: 350px;
height: 100svh;
display: flex;
flex-direction: column;
background: var(--sidebar-dark-bg);
color: var(--sidebar-text-light);
border-right: 1px solid var(--ifm-color-emphasis-200);
position: relative;
transition: transform 0.3s ease, width 0.3s ease;
overflow: hidden;
}
.course-sidebar-extension .course-sidebar__header {
padding: 1rem;
background: var(--sidebar-dark-bg);
border-bottom: 1px solid var(--ifm-color-emphasis-200);
}
.course-sidebar-extension .course-sidebar__top-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.course-sidebar-extension .course-sidebar__top-bar.collapsed {
flex-direction: column;
gap: 1rem;
}
.course-sidebar-extension .university-logo {
height: auto;
flex: 1;
max-width: 250px;
}
.course-sidebar-extension .stackit-logo {
height: auto;
width: 40px;
}
.course-sidebar-extension .hidden {
display: none !important;
}
.course-sidebar-extension .hamburger-menu {
background: none;
border: none;
color: var(--sidebar-text-light);
font-size: 1.5rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
transition: background-color 0.3s ease, color 0.3s ease;
}
.course-sidebar-extension .hamburger-menu:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.course-sidebar-extension .hamburger-menu.is-active {
color: var(--sidebar-accent);
}
.course-sidebar-extension .course-sidebar__title {
color: var(--sidebar-text-light);
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.course-sidebar-extension .course-sidebar__progress-wrapper {
display: grid;
grid-template-areas:
"bar bar"
"text actions";
align-items: center;
gap: 0.5rem;
}
.course-sidebar-extension .course-sidebar__progress-bar {
grid-area: bar;
height: 8px;
background: var(--sidebar-lesson-progress-bg);
border-radius: 4px;
overflow: hidden;
}
.course-sidebar-extension .course-sidebar__progress-indicator {
height: 100%;
background: var(--sidebar-accent-orange);
border-radius: 4px;
transition: width 300ms ease;
}
.course-sidebar-extension .course-sidebar__progress-text {
grid-area: text;
display: flex;
align-items: baseline;
gap: 0.5rem;
color: var(--sidebar-text-light);
}
.course-sidebar-extension .progress-percentage {
font-size: 1rem;
font-weight: 700;
color: var(--sidebar-accent-orange);
}
.course-sidebar-extension .progress-count {
font-size: 0.75rem;
opacity: 0.8;
}
.course-sidebar-extension .course-sidebar__actions {
grid-area: actions;
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
.course-sidebar-extension .action-btn {
display: flex;
align-items: center;
gap: 0.25rem;
background: var(--sidebar-accent-aqua);
color: var(--sidebar-text-dark);
border: none;
border-radius: 4px;
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
text-transform: uppercase;
}
.course-sidebar-extension .action-btn.reset-btn {
background: var(--sidebar-accent-orange);
}
.course-sidebar-extension .course-sidebar__search {
padding: 1rem;
background: var(--sidebar-dark-bg);
border-bottom: 1px solid var(--ifm-color-emphasis-200);
}
.course-sidebar-extension .search-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.course-sidebar-extension .search-icon {
position: absolute;
left: 10px;
color: var(--ifm-color-emphasis-500);
font-size: 14px;
}
.course-sidebar-extension .search-input {
width: 100%;
padding: 8px 30px 8px 30px;
border-radius: 4px;
border: 1px solid var(--ifm-color-emphasis-300);
background: var(--sidebar-lesson-progress-bg);
color: var(--sidebar-text-light);
font-size: 14px;
transition: all 0.2s;
}
:is(.course-sidebar-extension .search-input):focus {
border-color: var(--ifm-color-primary);
outline: none;
box-shadow: 0 0 0 2px rgba(var(--ifm-color-primary-rgb), 0.25);
}
.course-sidebar-extension .clear-search {
position: absolute;
right: 10px;
background: transparent;
border: none;
color: var(--ifm-color-emphasis-500);
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
:is(.course-sidebar-extension .clear-search):hover {
color: var(--ifm-color-emphasis-700);
}
.course-sidebar-extension .no-results {
padding: 2rem;
text-align: center;
color: var(--ifm-color-emphasis-600);
}
:is(.course-sidebar-extension .no-results) .clear-search-button {
margin-top: 1rem;
padding: 0.5rem 1rem;
background: var(--ifm-color-primary);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
:is(:is(.course-sidebar-extension .no-results) .clear-search-button):hover {
background: var(--ifm-color-primary-dark);
}
/* Chapter locking styles */
:is(.course-sidebar-extension .chapter-locked) .menu__link--locked {
opacity: 0.6;
color: var(--ifm-color-emphasis-500) !important;
cursor: not-allowed;
}
:is(:is(.course-sidebar-extension .chapter-locked) .menu__link--locked):hover {
background-color: transparent !important;
color: var(--ifm-color-emphasis-500) !important;
}
:is(:is(.course-sidebar-extension .chapter-locked) .menu__link--locked) .chapter-title {
color: var(--ifm-color-emphasis-500);
}
:is(.course-sidebar-extension .lesson-status-locked) .collapsible-button {
cursor: not-allowed;
opacity: 0.6;
}
:is(:is(.course-sidebar-extension .lesson-status-locked) .collapsible-button):hover {
background: transparent;
}
:is(:is(.course-sidebar-extension .lesson-status-locked) .lesson-header-content) .collapsible-button__title {
color: var(--ifm-color-emphasis-500);
}
.course-sidebar-extension .course-sidebar__nav {
flex: 1;
overflow-y: auto;
padding: 0;
scrollbar-width: thin;
scrollbar-color: var(--ifm-color-emphasis-300) transparent;
}
:is(.course-sidebar-extension .course-sidebar__nav)::-webkit-scrollbar {
width: 6px;
}
:is(.course-sidebar-extension .course-sidebar__nav)::-webkit-scrollbar-track {
background: transparent;
}
:is(.course-sidebar-extension .course-sidebar__nav)::-webkit-scrollbar-thumb {
background-color: var(--ifm-color-emphasis-300);
border-radius: 3px;
}
.menu-extension {
list-style: none;
padding: 0;
margin: 0;
}
.menu-extension .menu__list-item {
margin: 0 !important;
position: relative;
border-bottom: 1px solid var(--ifm-color-emphasis-200);
}
.menu-extension .lesson-header-content {
display: flex;
align-items: center;
gap: 0.75rem;
flex-grow: 1;
}
.menu-extension .lock-icon {
font-size: 1.25rem;
color: var(--ifm-color-emphasis-500);
}
.menu-extension .lesson-number {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--sidebar-accent-aqua);
color: var(--sidebar-text-dark);
font-size: 1rem;
font-weight: 700;
flex-shrink: 0;
}
.menu-extension .lesson-controls {
display: flex;
align-items: center;
gap: 0.5rem;
}
.menu-extension .status-indicator.current .progress-circle {
width: 40px;
height: 40px;
}
.menu-extension .chapter-item .menu__link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
color: var(--sidebar-text-light);
width: 100%;
background-color: transparent;
border: none;
}
.menu-extension .chapter-item .menu__link:hover {
background: rgba(255, 255, 255, 0.1);
}
.menu-extension .chapter-item .menu__link--active {
color: var(--sidebar-accent-aqua);
}
.menu-extension .chapter-number {
color: var(--sidebar-accent-aqua);
font-weight: 700;
}
.menu-extension .chapter-title {
flex-grow: 1;
text-align: left;
}
.menu-extension .chapter-status-icon {
font-size: 1.25rem;
color: var(--sidebar-text-light);
}
.menu-extension .chapter-completed-icon {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--brand-navy);
}
.menu-extension .collapsible-button {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 1rem;
background: transparent;
color: var(--sidebar-text-light);
border: none;
cursor: pointer;
text-align: left;
border-radius: 0;
font-weight: 500;
transition: background 0.2s;
}
.menu-extension .collapsible-button:hover {
background: rgba(255, 255, 255, 0.05);
}
.menu-extension .collapsible-button.expanded {
background: rgba(255, 255, 255, 0.1);
}
.menu-extension .collapsible-button__title {
font-size: 0.95rem;
font-weight: 500;
}
.menu-extension .course-sidebar__chapters {
padding-left: 0;
margin: 0;
}
.menu-extension .collapsible-content {
overflow: hidden;
height: 0;
transition: height 0.3s ease;
}
.menu-extension .chevron {
transition: transform 0.3s ease;
}
.menu-extension .chevron--open {
transform: rotate(180deg);
}
.menu-extension .no-chapters {
padding: 1rem;
text-align: center;
color: var(--ifm-color-emphasis-600);
font-size: 0.9rem;
font-style: italic;
}
.course-sidebar-extension.collapsed {
max-width: 80px;
}
.course-sidebar-extension.collapsed .course-sidebar__title,.course-sidebar-extension.collapsed .progress-count,.course-sidebar-extension.collapsed .action-btn span,.course-sidebar-extension.collapsed .lesson-header-content .collapsible-button__title,.course-sidebar-extension.collapsed .chevron,.course-sidebar-extension.collapsed .chapter-title,.course-sidebar-extension.collapsed .chapter-status-icon,.course-sidebar-extension.collapsed .lock-icon,.course-sidebar-extension.collapsed .lesson-controls {
display: none;
}
.course-sidebar-extension.collapsed .course-sidebar__top-bar {
justify-content: space-between;
}
.course-sidebar-extension.collapsed .hamburger-menu {
margin-right: 0;
}
.course-sidebar-extension.collapsed .action-btn {
justify-content: center;
}
.course-sidebar-extension.collapsed .lesson-header-content {
justify-content: center;
}
.course-sidebar-extension.collapsed .collapsible-button {
justify-content: center;
}
.course-sidebar-extension.collapsed .chapter-item .menu__link {
justify-content: center;
}
.course-sidebar-extension.collapsed .course-sidebar__search.collapsed {
padding: 1rem;
display: flex;
justify-content: center;
}
.course-sidebar-extension.collapsed .course-sidebar__search.collapsed .search-icon {
position: static;
font-size: 1.5rem;
}
.course-sidebar-extension.collapsed .course-sidebar__footer.collapsed {
align-items: center;
}
.course-sidebar__footer {
margin-top: auto;
padding: 1rem;
display: flex;
justify-content: center;
gap: 1.5rem;
border-top: 1px solid var(--ifm-color-emphasis-200);
}
.course-sidebar__footer.collapsed {
flex-direction: column;
gap: 1rem;
}
.footer-link {
color: var(--sidebar-text-light);
-webkit-text-decoration: none;
text-decoration: none;
font-size: 1.5rem;
transition: color 0.2s ease-in-out;
}
.footer-link:hover {
color: var(--sidebar-accent);
}
@media (max-width: 768px) {
.course-sidebar-extension {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100%;
max-width: 300px;
z-index: 1000;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}
.university-logo {
margin-left: 0.8rem !important;
width: 100%;
}
.course-sidebar__header {
padding: 0.75rem;
}
.course-sidebar__title {
font-size: 1.1rem;
}
.course-sidebar__search {
padding: 0.75rem;
}
.search-input {
padding: 6px 25px;
font-size: 13px;
}
.course-sidebar__footer {
padding: 0.75rem;
gap: 1rem;
}
.footer-link {
font-size: 1.25rem;
}
.lesson-header-content {
gap: 0.5rem;
}
.collapsible-button {
padding: 0.75rem;
}
.chapter-item .menu__link {
padding: 0.5rem 0.75rem;
}
}
.tooltip-container {
}
.tooltip {
background-color: var(--accent-primary);
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 10px;
z-index: 1000;
white-space: nowrap;
transition: opacity 0.3s;
box-shadow: 1px 1px 5px var(--accent-primary);
}
.tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 0;
transform: rotate(45);
margin-left: 5px;
border-width: 5px;
border-style: solid;
border-color: var(--accent-primary) transparent transparent transparent;
}
/* Course Viewer - Schwarz Digits Brand Design */
:root {
/* Brand Colors */
--navy-blue: #0a1e2d;
--white: #ffffff;
--spacemint: #00c3cd;
--pumpkin: #ef7c00;
--psychedelic: #5f23a0;
--sunshine: #fafc00;
--fresh-green: #00c387;
--coral: #ff0555;
/* Neutral Palette */
--black-10: #ededed;
--black-20: #dadada;
--black-30: #c6c6c6;
--black-50: #9d9d9c;
--black-70: #706f6f;
--black-90: #3c3c3b;
--black-100: #000000;
/* Semantic Mappings */
--background-primary: var(--navy-blue);
--background-secondary: var(--black-90);
--background-panel: rgba(218, 218, 218, 0.05);
--text-primary: var(--white);
--text-secondary: var(--black-20);
--text-subdued: var(--black-50);
--accent-primary: var(--spacemint);
--accent-secondary: var(--pumpkin);
--border-subtle: var(--black-30);
--border-strong: var(--spacemint);
}
.courseMain_jdag {
display: flex;
position: relative;
background: var(--background-primary);
min-height: 100vh;
font-family: "Univia Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
}
.courseMain_jdag .mainContainer_II3t {
flex: 1;
display: flex;
flex-direction: column;
overflow-y: auto;
max-height: 100svh;
padding: 0;
transition: margin-left 0.3s ease;
background: var(--background-primary);
min-height: 100vh;
color: var(--text-primary);
}
.courseMain_jdag .sidebar_prIL {
flex: 0 0 350px;
max-height: 100svh;
overflow-y: auto;
background: var(--background-secondary);
border-right: 1px solid var(--border-subtle);
transition: transform 0.3s ease, width 0.3s ease;
z-index: 10;
box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);
}
.courseMain_jdag .sidebar_prIL.collapsed_ezwA {
flex-basis: 80px;
}
.courseMain_jdag .content_IYt0 {
flex: 1;
max-height: 100svh;
overflow-y: auto;
}
.courseMain_jdag .progressBarContainer_yP4b {
margin: 1rem 0;
text-align: center;
position: relative;
height: 20px;
}
.courseMain_jdag .progressBar_xFBb {
height: 8px;
background: var(--accent-primary);
border-radius: 4px;
transition: width 0.3s ease;
box-shadow: 0 0 16px rgba(0, 195, 205, 0.4);
}
.courseMain_jdag .progressText_TPbR {
font-size: 0.8rem;
margin-top: 0.3rem;
color: var(--text-secondary);
font-family: "Din 2014", "SF Mono", "Monaco", monospace;
}
.courseMain_jdag .noCourse_Uq4R,.courseMain_jdag .errorContainer_UAmo {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 70vh;
text-align: center;
padding: 2rem;
background: var(--background-panel);
border-radius: 8px;
margin: 2rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
color: var(--text-primary);
}
.courseMain_jdag .errorContainer_UAmo {
color: var(--coral);
border: 1px solid var(--coral);
}
.courseMain_jdag .loadingContainer_V7pQ {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
padding: 4rem 2rem;
background: var(--background-panel);
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
max-width: 600px;
margin: 2rem auto;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
}
.courseMain_jdag .loader_s6ax {
width: 60px;
height: 60px;
border: 6px solid var(--black-50);
border-top: 6px solid var(--accent-primary);
border-radius: 50%;
animation: spin_alqI 1.2s linear infinite;
margin-bottom: 2rem;
box-shadow: 0 0 20px rgba(0, 195, 205, 0.3);
}
.courseMain_jdag {
@keyframes spin_alqI {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
}
.courseMain_jdag .courseNavigation_zqPl {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
flex-wrap: wrap;
gap: 1rem;
}
.courseMain_jdag .breadcrumbs_q87f {
font-size: 0.9rem;
color: var(--text-secondary);
font-family: "Univia Pro", sans-serif;
}
.courseMain_jdag .navButtons_k35X {
display: flex;
gap: 0.5rem;
}
.courseMain_jdag .navButton_zQ8P {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: var(--accent-primary);
color: var(--white);
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
font-family: "Univia Pro", sans-serif;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 195, 205, 0.3);
}
.courseMain_jdag .navButton_zQ8P:disabled {
background: var(--black-50);
cursor: not-allowed;
opacity: 0.7;
box-shadow: none;
}
.courseMain_jdag .navButton_zQ8P:not(:disabled):hover {
background: var(--accent-primary);
box-shadow: 0 0 16px rgba(0, 195, 205, 0.4);
transform: translateY(-1px);
}
.courseMain_jdag .sidebarToggle_be0h {
position: fixed;
top: -5px;
left: -5px;
z-index: 20;
background: var(--accent-primary);
border: none;
border-radius: 50%;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
display: none;
transition: all 0.3s ease;
}
.courseMain_jdag .sidebarToggle_be0h:hover {
box-shadow: 0 0 20px rgba(0, 195, 205, 0.6);
transform: scale(1.05);
}
.courseMain_jdag .navigationFooter_FprR {
display: flex;
justify-content: space-between;
margin-top: 2rem;
padding: 1.5rem;
border-top: 1px solid var(--border-subtle);
background: var(--background-panel);
border-radius: 8px 8px 0 0;
}
.courseMain_jdag .lessonContent_oZfF {
background: var(--background-panel);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
padding: 2rem;
margin: 1rem;
animation: fadeIn_SE7f 0.3s ease;
border: 1px solid var(--border-subtle);
color: var(--text-primary);
}
.courseMain_jdag {
@keyframes fadeIn_SE7f {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Responsive styles */
}
@media (max-width: 768px) {
.courseMain_jdag .sidebar_prIL {
position: fixed;
top: 0;
left: 0;
bottom: 0;
transform: translateX(0);
width: 250px;
}
.courseMain_jdag .sidebar_prIL.hidden_VzJ3 {
transform: translateX(-100%) scale(0.9);
opacity: 0;
pointer-events: none;
}
.courseMain_jdag .sidebarToggle_be0h {
display: flex;
}
.courseMain_jdag .mainContainer_II3t {
margin-left: 0;
}
.courseMain_jdag .courseNavigation_zqPl {
flex-direction: column;
align-items: flex-start;
}
}
/* Typography Classes */
.courseMain_jdag .courseTitle_UUwD {
font-family: "Univia Pro", sans-serif;
font-weight: 600;
font-size: 2rem;
color: var(--text-primary);
margin-bottom: 1rem;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.courseMain_jdag .dataText_x5w9 {
font-family: "Din 2014", "SF Mono", monospace;
font-weight: 400;
}
.courseMain_jdag .bodyText_VyiX {
font-family: "Univia Pro", sans-serif;
font-weight: 400;
line-height: 1.6;
color: var(--text-primary);
}
/* Enhanced Status Indicators */
.courseMain_jdag .statusBadge_ma09 {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 500;
font-family: "Univia Pro", sans-serif;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.courseMain_jdag .statusBadge_ma09.success_yGDt {
background: var(--fresh-green);
color: var(--white);
box-shadow: 0 0 16px rgba(0, 195, 135, 0.25);
}
.courseMain_jdag .statusBadge_ma09.error_cgYD {
background: var(--coral);
color: var(--white);
box-shadow: 0 0 16px rgba(255, 5, 85, 0.25);
}
.courseMain_jdag .statusBadge_ma09.warning_DwlJ {
background: var(--sunshine);
color: var(--black-100);
box-shadow: 0 0 16px rgba(250, 252, 0, 0.25);
}
.courseMain_jdag .statusBadge_ma09.info_LXBN {
background: var(--accent-primary);
color: var(--white);
box-shadow: 0 0 16px rgba(0, 195, 205, 0.25);
}
/* Enhanced Button Variants */
.courseMain_jdag .primaryButton_jLNP {
background: var(--accent-primary);
color: var(--white);
font-family: "Univia Pro", sans-serif;
font-weight: 500;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 0 16px rgba(0, 195, 205, 0.4);
}
.courseMain_jdag .primaryButton_jLNP:hover {
box-shadow: 0 0 20px rgba(0, 195, 205, 0.6);
transform: translateY(-1px);
}
.courseMain_jdag .secondaryButton_SWVi {
background: transparent;
color: var(--accent-primary);
border: 1px solid var(--accent-primary);
font-family: "Univia Pro", sans-serif;
font-weight: 500;
padding: 0.75rem 1.5rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.courseMain_jdag .secondaryButton_SWVi:hover {
background: var(--accent-primary);
color: var(--white);
box-shadow: 0 0 16px rgba(0, 195, 205, 0.4);
}
.courseMain_jdag .tertiaryButton_GflI {
background: transparent;
color: var(--text-primary);
border: none;
font-family: "Univia Pro", sans-serif;
font-weight: 500;
padding: 0.75rem 1.5rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.courseMain_jdag .tertiaryButton_GflI:hover {
background: rgba(255, 255, 255, 0.1);
}
/* Panel Component */
.courseMain_jdag .panel_yU7M {
background: var(--background-panel);
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border: 1px solid var(--border-subtle);
margin-bottom: 1rem;
}
.courseMain_jdag .panelWithAccent_nKnT {
border-top: 3px solid var(--accent-primary);
}
.courseMain_jdag {
/* Animation Enhancements */
@keyframes slideIn_uzHa {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideUp_uQoZ {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}
.courseMain_jdag .slideIn_uzHa {
animation: slideIn_uzHa 0.3s ease-out;
}
.courseMain_jdag .slideUp_uQoZ {
animation: slideUp_uQoZ 0.3s ease-out;
}
/* Enhanced Progress Indicator */
.courseMain_jdag .progressBarWrapper_IlyF {
margin: 1rem 0;
padding: 1rem;
background: var(--background-panel);
border-radius: 8px;
border: 1px solid var(--border-subtle);
}
.courseMain_jdag .progressBarTrack_qpjp {
height: 8px;
background: var(--black-50);
border-radius: 4px;
overflow: hidden;
margin-bottom: 0.5rem;
}
.courseMain_jdag .progressBarFill_OGpe {
height: 100%;
background: var(--accent-primary);
border-radius: 4px;
transition: width 0.3s ease;
box-shadow: 0 0 16px rgba(0, 195, 205, 0.4);
}
.courseMain_jdag .progressInfo_lJxK {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
}
.courseMain_jdag .progressPercentage_oczV {
font-family: "Din 2014", monospace;
font-weight: 600;
color: var(--accent-primary);
}
.courseMain_jdag .progressDescription_YWJK {
color: var(--text-secondary);
font-family: "Univia Pro", sans-serif;
}
/* CSS Custom Properties for Brand Colors and Dark Mode */
:root {
--brand-navy: #0a1e2d;
--brand-spacemint: #00c3cd;
--brand-pumpkin: #ef7c00;
--brand-psychedelic: #5f23a0;
--brand-fresh-green: #00c387;
--brand-coral: #ff0555;
--lesson-primary: var(--brand-spacemint);
--lesson-secondary: var(--brand-pumpkin);
--lesson-accent: var(--brand-psychedelic);
--lesson-success: var(--brand-fresh-green);
}
[data-theme='dark'] {
--lesson-primary: var(--brand-spacemint);
--lesson-secondary: var(--brand-pumpkin);
--lesson-accent: var(--brand-psychedelic);
--lesson-success: var(--brand-fresh-green);
}
.courseContentWrapper_Wq_Q {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
}
/* Simplified Navigation */
.simplifiedNavigation_E3D1 {
display: flex;
justify-content: center;
padding: 2rem;
background: var(--ifm-color-background-surface);
border-top: 1px solid var(--ifm-color-emphasis-200);
}
.nextButton_aU7i,
.completeButton_LKlX {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
font-size: 1.1rem;
font-weight: 600;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
-webkit-text-decoration: none;
text-decoration: none;
font-family: inherit;
}
.nextButton_aU7i {
background: var(--lesson-primary);
color: white;
}
.nextButton_aU7i:hover {
background: color-mix(in srgb, var(--lesson-primary) 80%, black 20%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 195, 205, 0.3);
}
.completeButton_LKlX {
background: var(--lesson-success);
color: white;
}
.completeButton_LKlX:hover {
background: color-mix(in srgb, var(--lesson-success) 80%, black 20%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 195, 135, 0.3);
}
.nextIcon_faUG,
.completeIcon_lCjp {
font-size: 1.2rem;
}
.readingProgressBar_NgWE {
position: fixed;
top: 0;
left: 0;
height: 4px;
background: var(--lesson-primary);
z-index: 100;
transition: width 0.2s;
}
.navigationControls_xZPw {
position: fixed;
top: 50%;
right: 1rem;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 1rem;
z-index: 10;
}
.toast-container_sOyH {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.navigationButton_osti {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--lesson-primary);
color: white;
border: none;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transition: all 0.2s;
position: relative;
}
.navigationButton_osti:hover {
background-color: var(--lesson-secondary);
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.navIcon_AV4B {
font-size: 0.875rem;
}
.navTooltip_XNU3 {
position: absolute;
right: 50px;
top: 50%;
transform: translateY(-50%);
background: var(--ifm-color-content);
color: var(--ifm-color-content-inverse);
padding: 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
z-index: 1000;
}
.navigationButton_osti:hover .navTooltip_XNU3 {
opacity: 1;
}
.transitioning_s13W {
opacity: 0.6;
transform: translateY(10px);
transition: all 0.3s ease;
}
.lessonsContainer_EF6q {
display: flex;
flex-direction: column;
width: 100%;
transition: all 0.3s ease;
}
.lessonsContainer_EF6q:not(.transitioning_s13W) {
opacity: 1;
transform: translateY(0);
}
.lessonHeader_DeHC {
padding: 4rem 2rem;
text-align: center;
background: var(--lesson-primary);
color: white;
margin-bottom: 2rem;
position: relative;
overflow: hidden;
border-radius: 0 0 8px 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.headerTop_RUFZ {
position: absolute;
top: 1rem;
left: 2rem;
z-index: 2;
}
.overviewButton_sKcs {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.2);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
-webkit-text-decoration: none;
text-decoration: none;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.overviewButton_sKcs:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.overviewIcon_h8q9 {
font-size: 0.875rem;
}
.lessonHeader_DeHC::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
pointer-events: none;
}
.lessonHeader_DeHC h1 {
margin: 0 0 1rem;
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
}
.chapterInfo_CICs {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-size: 1.1rem;
opacity: 0.9;
}
.bookIcon_gMC6 {
font-size: 1.2rem;
}
.container_ppPU {
max-width: 1000px;
margin: 0 auto;
padding: 2rem;
}
.lesson_gl0c {
line-height: 1.7;
font-size: 1rem;
}
.footerNavigation_w7DS {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-top: 4rem;
padding: 2rem;
background: var(--ifm-color-emphasis-100);
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.footerNavButton_HYm2 {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: var(--ifm-color-background);
border: 1px solid var(--ifm-color-emphasis-200);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
text-align: left;
color: var(--ifm-color-content);
}
.footerNavButton_HYm2:hover {
border-color: var(--lesson-primary);
box-shadow: 0 4px 12px rgba(0, 195, 205, 0.1);
transform: translateY(-2px);
}
.nextLessonButton_vSvS {
justify-content: flex-end;
text-align: right;
}
.footerNavIcon_F0qA {
font-size: 1.25rem;
color: var(--lesson-primary);
flex-shrink: 0;
}
.navLabel_Auq4 {
display: block;
font-size: 0.875rem;
opacity: 0.7;
margin-bottom: 0.25rem;
}
.navTitle_mXK9 {
display: block;
font-weight: 600;
font-size: 1rem;
}
.emptyNavButton_jK3Q {
/* Empty space for grid alignment */
}
/* Responsive Design */
@media (max-width: 768px) {
.navigationControls_xZPw {
display: none;
}
.lessonHeader_DeHC {
padding: 3rem 1rem;
}
.lessonHeader_DeHC h1 {
font-size: 2rem;
}
.headerTop_RUFZ {
left: 1rem;
}
.container_ppPU {
padding: 1rem;
}
.footerNavigation_w7DS {
grid-template-columns: 1fr;
gap: 1rem;
padding: 1rem;
}
.nextLessonButton_vSvS {
justify-content: flex-start;
text-align: left;
}
}
@media (max-width: 480px) {
.lessonHeader_DeHC {
padding: 2rem 1rem;
}
.lessonHeader_DeHC h1 {
font-size: 1.75rem;
}
.chapterInfo_CICs {
font-size: 1rem;
}
.footerNavButton_HYm2 {
padding: 1rem;
}
.navTitle_mXK9 {
font-size: 0.875rem;
}
}
.toast {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px;
margin-bottom: 8px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.15);
min-width: 280px;
max-width: 380px;
transform: translateX(100%);
opacity: 0;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.toast::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, currentColor, transparent);
animation: progress-bar 4s linear forwards;
}
@keyframes progress-bar {
from {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
}
.toast--show {
transform: translateX(0);
opacity: 1;
}
.toast--leave {
transform: translateX(100%);
opacity: 0;
}
/* Toast types */
.toast--success {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.95) 0%, rgba(5, 150, 105, 0.95) 100%);
color: white;
border-color: rgba(16, 185, 129, 0.3);
}
.toast--success::before {
color: rgba(255, 255, 255, 0.8);
}
.toast--info {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.95) 0%, rgba(37, 99, 235, 0.95) 100%);
color: white;
border-color: rgba(59, 130, 246, 0.3);
}
.toast--info::before {
color: rgba(255, 255, 255, 0.8);
}
.toast--warning {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.95) 0%, rgba(217, 119, 6, 0.95) 100%);
color: white;
border-color: rgba(245, 158, 11, 0.3);
}
.toast--warning::before {
color: rgba(255, 255, 255, 0.8);
}
.toast--error {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.95) 0%, rgba(220, 38, 38, 0.95) 100%);
color: white;
border-color: rgba(239, 68, 68, 0.3);
}
.toast--error::before {
color: rgba(255, 255, 255, 0.8);
}
.toast__icon {
font-size: 18px;
flex-shrink: 0;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
}
.toast__content {
flex: 1;
min-width: 0;
}
.toast__title {
font-weight: 600;
font-size: 13px;
line-height: 1.3;
margin-bottom: 2px;
}
.toast__message {
font-size: 12px;
line-height: 1.3;
opacity: 0.9;
}
.toast__close {
background: none;
border: none;
color: currentColor;
font-size: 20px;
line-height: 1;
padding: 4px;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s ease;
flex-shrink: 0;
border-radius: 4px;
}
.toast__close:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.1);
}
.toast__close:focus {
outline: 2px solid rgba(255, 255, 255, 0.5);
outline-offset: 2px;
}
/* Dark mode adjustments */
[data-theme="dark"] .toast {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
border-color: rgba(255, 255, 255, 0.1);
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.toast {
min-width: 260px;
max-width: calc(100vw - 32px);
margin-left: 0;
margin-right: 0;
font-size: 12px;
}
.toast__title {
font-size: 12px;
}
.toast__message {
font-size: 11px;
}
}
/* Animation for multiple toasts */
.toast:not(:last-child) {
animation: toast-stack 0.3s ease-out forwards;
}
@keyframes toast-stack {
from {
transform: translateY(0) scale(1);
}
to {
transform: translateY(-8px) scale(0.98);
}
}
.toast-container {
position: fixed;
top: 80px;
right: 20px;
z-index: 9999;
pointer-events: none;
max-height: calc(100vh - 100px);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: flex-end;
max-width: 400px;
}
.toast-container > * {
pointer-events: auto;
}
/* Mobile positioning */
@media (max-width: 768px) {
.toast-container {
top: 70px;
right: 16px;
left: 16px;
align-items: stretch;
max-width: none;
}
}
/* Ensure toasts don't interfere with sidebar or main content */
@media (max-width: 996px) {
.toast-container {
right: 16px;
max-width: 350px;
}
}
.courseOverviewWrapper__5oY {
background-color: #0a1e2d;
padding: 2rem;
color: #ffffff;
font-family: sans-serif;
}
.courseOverview_at6m {
max-width: 1200px;
margin: 0 auto;
}
.headerSection_I0KX {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.headerText_oFZp {
flex-grow: 1;
}
.courseTitle_wu5N {
font-size: 3.5rem;
font-weight: bold;
margin: 0 0 1rem 0;
}
.courseMeta_KXDk {
display: flex;
gap: 1.5rem;
font-size: 1rem;
color: #bdc3c7;
flex-wrap: wrap;
}
.courseMeta_KXDk span {
display: flex;
align-items: center;
gap: 0.5rem;
}
.headerProgress_aeON {
flex-shrink: 0;
}
.startSection_nain {
margin-bottom: 2rem;
display: flex;
align-items: center;
gap: 1.5rem;
}
.primaryButton_J_gg {
background-color: var(--ifm-color-primary);
color: #0a1e2d;
font-weight: bold;
border: none;
padding: 0.8rem 2rem;
border-radius: 25px;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s;
}
.primaryButton_J_gg:hover {
background-color: var(--ifm-color-primary-dark);
}
.courseDescription_sDmB {
font-size: 1rem;
line-height: 1.6;
color: #bdc3c7;
max-width: 800px;
}
/* Grid layout for lesson cards */
.lessonGrid_LsLu {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 1.5rem;
}
/* Individual lesson card styling */
.lessonCard_VgLv {
background-color: #1c2e3a;
border: 1px solid #34495e;
border-radius: 8px;
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.3s, box-shadow 0.3s;
}
.lessonCard_VgLv:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.lessonCard_VgLv.locked_k5sv {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.lessonCard_VgLv.locked_k5sv:hover {
transform: none;
box-shadow: none;
}
.lockIcon_z2bc {
margin-right: 0.5rem;
color: #bdc3c7;
vertical-align: middle;
}
.lessonCardContent_TXDt {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
}
.lessonInfo_fZcD {
flex-grow: 1;
}
.lessonTitle_Q5rO {
font-size: 1.2rem;
font-weight: bold;
margin: 0 0 1rem 0;
}
.lessonMeta__Ga0 {
display: flex;
gap: 1rem;
font-size: 0.9rem;
color: #bdc3c7;
margin-bottom: 1rem;
}
.lessonMeta__Ga0 span {
display: flex;
align-items: center;
gap: 0.5rem;
}
.chapterList_qMmq {
list-style-type: disc;
padding-left: 20px;
margin: 0;
color: #bdc3c7;
}
.chapterList_qMmq li {
margin-bottom: 0.5rem;
}
.lessonProgress_PFFE {
flex-shrink: 0;
}
.lessonFooter_new7 {
display: flex;
justify-content: flex-end;
}
.secondaryButton_NU33 {
background-color: var(--ifm-color-primary);
color: #0a1e2d;
font-weight: bold;
border: none;
padding: 0.6rem 1.5rem;
border-radius: 20px;
cursor: pointer;
font-size: 0.9rem;
transition: background-color 0.3s;
}
.secondaryButton_NU33:hover {
background-color: #00a8b3;
}
.secondaryButton_NU33:disabled {
background-color: #34495e;
cursor: not-allowed;
color: #7f8c8d;
}
/* Progress Circle Component */
.progressCircle_nLir {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.progressSvg_EL7v {
width: 100%;
height: 100%;
}
.progressBackground_a1JK {
fill: none;
stroke: #34495e;
}
.progressBar_PWVD {
fill: none;
stroke: var(--orange-accent); /* Orange accent for progress */
stroke-linecap: round;
transition: stroke-dashoffset 0.5s ease;
}
.progressText_X6Nb {
position: absolute;
text-align: center;
}
.progressPercentage_Bm5n {
font-size: 1.5em; /* Relative to parent size */
font-weight: bold;
color: var(--orange-accent);
}
.progressSubtext_iuhP {
font-size: 0.6em; /* Relative to parent size */
color: #bdc3c7;
text-transform: lowercase;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.headerSection_I0KX {
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
.courseMeta_KXDk {
gap: 1rem;
}
.startSection_nain {
flex-direction: column;
align-items: flex-start;
}
.lessonGrid_LsLu {
grid-template-columns: 1fr;
}
.courseTitle_wu5N {
font-size: 2.5rem;
}
.lessonCardContent_TXDt {
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
.lessonProgress_PFFE {
align-self: center;
}
}
@media (max-width: 576px) {
.courseOverviewWrapper__5oY {
padding: 1.5rem;
}
.courseTitle_wu5N {
font-size: 2rem;
}
.courseMeta_KXDk {
font-size: 0.9rem;
}
.primaryButton_J_gg {
padding: 0.7rem 1.8rem;
font-size: 0.9rem;
}
}
.successContainer_hYFK {
min-height: calc(100vh - 60px);
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #0a1e2d 0%, #3c3c3b 50%, #5f23a0 100%);
padding: 2rem;
position: relative;
overflow-x: hidden;
width: 100%;
}
.successContainer_hYFK::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.successCard_ivb4 {
background: rgba(255, 255, 255, 0.98);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border-radius: 20px;
padding: 2.5rem;
max-width: 600px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
text-align: center;
box-shadow: 0 20px 40px rgba(0, 195, 205, 0.2);
border: 2px solid #00c3cd;
position: relative;
z-index: 1;
font-family: 'Univia Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.celebrationIcon_EOON {
position: relative;
margin-bottom: 2rem;
display: inline-block;
}
.trophy_sGwR {
font-size: 4rem;
color: #00c387;
animation: bounce_cg9K 2s infinite;
filter: drop-shadow(0 4px 8px rgba(0, 195, 135, 0.4));
}
@keyframes bounce_cg9K {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
60% {
transform: translateY(-10px);
}
}
.confetti_u7HW {
position: absolute;
top: -20px;
left: 50%;
width: 1px;
height: 1px;
pointer-events: none;
z-index: 1;
}
.confettiPiece_Uoai {
position: absolute;
width: 6px;
height: 6px;
border-radius: 2px;
animation: confettiFall_mbd5 2s ease-out infinite;
}
.confetti1_ESvd { background: #00c3cd; animation-delay: 0s; }
.confetti2_pFr9 { background: #ef7c00; animation-delay: 0.5s; }
.confetti3_su2v { background: #00c387; animation-delay: 1s; }
.confetti4_FbdJ { background: #5f23a0; animation-delay: 1.5s; }
@keyframes confettiFall_mbd5 {
0% {
transform: translateX(-30px) translateY(-50px) rotate(0deg);
opacity: 1;
}
100% {
transform: translateX(30px) translateY(150px) rotate(180deg);
opacity: 0;
}
}
.successContent_Xoh5 {
margin-bottom: 2rem;
}
.congratsTitle_hnIW {
font-size: 2.5rem;
font-weight: 800;
color: #0a1e2d;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, #00c3cd 0%, #5f23a0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.courseTitle_Sb0U {
font-size: 1.2rem;
color: #706f6f;
margin-bottom: 0.5rem;
font-weight: 500;
}
.courseName_heWO {
font-size: 1.8rem;
font-weight: 700;
color: #0a1e2d;
margin-bottom: 2rem;
line-height: 1.3;
}
.achievementBadges_XIWJ {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
}
.badge_xuKU {
display: flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, #00c387 0%, #00c3cd 100%);
color: #0a1e2d;
padding: 0.5rem 1rem;
border-radius: 20px;
font-weight: 600;
font-size: 0.9rem;
box-shadow: 0 4px 8px rgba(0, 195, 135, 0.3);
}
.badgeIcon_Jxim {
font-size: 1rem;
}
.successMessage_raqw {
font-size: 1.1rem;
line-height: 1.6;
color: #706f6f;
margin-bottom: 2rem;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.nextSteps_XiAV {
background: rgba(0, 195, 205, 0.1);
border: 2px solid rgba(0, 195, 205, 0.2);
border-radius: 16px;
padding: 1.5rem;
margin-bottom: 2rem;
text-align: left;
}
.nextSteps_XiAV h4 {
color: #0a1e2d;
margin-bottom: 1rem;
font-size: 1.2rem;
font-weight: 600;
text-align: center;
}
.stepsList_QQZi {
list-style: none;
padding: 0;
margin: 0;
}
.stepsList_QQZi li {
padding: 0.5rem 0;
color: #706f6f;
font-size: 1rem;
display: flex;
align-items: center;
}
.actionButtons_OqwE {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.actionButton_vjld {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 12px;
font-weight: 600;
font-size: 0.95rem;
border: none;
cursor: pointer;
transition: all 0.2s ease;
-webkit-text-decoration: none;
text-decoration: none;
}
.primaryButton_M7y3 {
background: linear-gradient(135deg, #00c3cd 0%, #5f23a0 100%);
color: white;
box-shadow: 0 4px 12px rgba(0, 195, 205, 0.4);
}
.primaryButton_M7y3:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 195, 205, 0.5);
}
.secondaryButton_UXeo {
background: rgba(0, 195, 205, 0.1);
color: #00c3cd;
border: 2px solid #00c3cd;
}
.secondaryButton_UXeo:hover {
background: #00c3cd;
color: white;
}
.tertiaryButton_pDPS {
background: rgba(112, 111, 111, 0.1);
color: #706f6f;
border: 2px solid #dadada;
}
.tertiaryButton_pDPS:hover {
background: #706f6f;
color: white;
}
.buttonIcon_j8Wo {
font-size: 0.9rem;
}
.certificatePreview_lXUp {
margin-top: 2rem;
}
.certificateCard_RDyk {
background: linear-gradient(135deg, #ededed 0%, #dadada 100%);
border: 2px solid #00c3cd;
border-radius: 16px;
padding: 1.5rem;
max-width: 400px;
margin: 0 auto;
box-shadow: 0 4px 12px rgba(0, 195, 205, 0.1);
}
.certificateHeader_gZEl {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.certificateIcon_gBHv {
color: #00c387;
font-size: 1.2rem;
}
.certificateTitle_uEZI {
font-weight: 600;
color: #0a1e2d;
font-size: 1rem;
}
.certificateBody_BHBJ {
text-align: center;
}
.certificateText_ft73 {
color: #706f6f;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.certificateCourse_UEzo {
font-weight: 700;
color: #0a1e2d;
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.certificateProvider_hO4c {
color: #00c3cd;
font-weight: 600;
font-size: 0.95rem;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.successContainer_hYFK {
padding: 1rem;
min-height: calc(100vh - 40px);
}
.successCard_ivb4 {
padding: 1.5rem;
max-height: 95vh;
border-radius: 16px;
}
.celebrationIcon_EOON {
margin-bottom: 1.5rem;
}
.trophy_sGwR {
font-size: 3rem;
}
.congratsTitle_hnIW {
font-size: 1.8rem;
}
.courseName_heWO {
font-size: 1.3rem;
}
.achievementBadges_XIWJ {
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.actionButtons_OqwE {
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.actionButton_vjld {
min-width: 200px;
padding: 0.6rem 1.2rem;
}
.nextSteps_XiAV {
text-align: center;
padding: 1rem;
}
.stepsList_QQZi li {
justify-content: center;
font-size: 0.9rem;
}
.certificateCard_RDyk {
padding: 1rem;
}
}
/* src/components/AssessmentQuiz/styles.module.css */
.quizContainer_UKx1 {
background-color: var(--ifm-background-surface-color);
border-radius: 12px;
border: 1px solid var(--ifm-color-emphasis-300);
padding: 20px;
margin-bottom: 2rem;
max-width: 800px;
}
.quizTitle_PeuZ {
text-align: center;
margin-top: 0;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid var(--ifm-color-emphasis-200);
}
.quizSetup_ahUa {
text-align: center;
}
.quizOptions_UiN6 {
display: flex;
flex-direction: column;
gap: 15px;
margin: 20px 0;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.optionGroup_M9Cu {
display: flex;
flex-direction: column;
text-align: left;
}
.optionGroup_M9Cu label {
margin-bottom: 5px;
font-weight: bold;
}
.optionGroup_M9Cu input,
.optionGroup_M9Cu select {
padding: 10px;
border-radius: 6px;
border: 1px solid var(--ifm-color-emphasis-300);
background-color: var(--ifm-background-color);
color: var(--ifm-font-color-base);
}
.startButton_foCc,
.restartButton_k8P0 {
background-color: var(--ifm-color-primary);
color: white;
border: none;
border-radius: 6px;
padding: 12px 24px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s;
}
.startButton_foCc:hover,
.restartButton_k8P0:hover {
background-color: var(--ifm-color-primary-dark);
}
.loadingState_A9ab {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200px;
}
.spinner_To_V {
border: 4px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top: 4px solid var(--ifm-color-primary);
width: 40px;
height: 40px;
animation: spin_OJFA 1s linear infinite;
margin-bottom: 15px;
}
@keyframes spin_OJFA {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.questionContainer_qEyj {
display: flex;
flex-direction: column;
}
.feedback_mA4m {
padding: 15px;
background-color: var(--ifm-color-emphasis-100);
border-left: 4px solid var(--ifm-color-primary);
margin-bottom: 20px;
border-radius: 4px;
}
.questionCount_Fc75 {
font-size: 0.9rem;
color: var(--ifm-color-emphasis-700);
margin-bottom: 10px;
}
.questionText_D_bC {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 20px;
}
.optionsContainer_SIWI {
display: flex;
flex-direction: column;
gap: 10px;
}
.optionButton_tryB {
text-align: left;
padding: 15px;
border: 1px solid var(--ifm-color-emphasis-300);
border-radius: 8px;
background-color: var(--ifm-background-color);
cursor: pointer;
transition: all 0.2s;
}
.optionButton_tryB:hover {
background-color: var(--ifm-color-emphasis-200);
border-color: var(--ifm-color-emphasis-400);
}
.completedContainer_Nk13 {
text-align: center;
}
.completedContainer_Nk13 h3 {
margin-bottom: 20px;
}
.reportContainer_RUQU {
text-align: left;
background-color: var(--ifm-background-color);
padding: 20px;
border-radius: 8px;
border: 1px solid var(--ifm-color-emphasis-300);
margin-bottom: 20px;
max-height: 400px;
overflow-y: auto;
}
.markdown_zhmP {
line-height: 1.6;
}
.markdown_zhmP h1 {
font-size: 1.5rem;
}
.markdown_zhmP h2 {
font-size: 1.3rem;
}
.markdown_zhmP h3 {
font-size: 1.1rem;
}
.errorMessage_kAZE {
background-color: #ffebee;
color: #c62828;
padding: 15px;
border-radius: 6px;
margin-top: 20px;
text-align: center;
}
.debugInfo_zQhY {
margin-top: 20px;
border-top: 1px dashed var(--ifm-color-emphasis-300);
padding-top: 10px;
font-size: 0.8rem;
}
.debugInfo_zQhY summary {
cursor: pointer;
color: var(--ifm-color-emphasis-700);
}
.debugInfo_zQhY pre {
max-height: 200px;
overflow: auto;
font-size: 0.7rem;
background-color: var(--ifm-pre-background);
padding: 10px;
border-radius: 4px;
}
.container_YfCO {
min-height: 100vh;
background: var(--ifm-background-color);
}
/* Hero Section */
.hero_CbLR {
background: var(--ifm-header-background);
color: white;
padding: 4rem 2rem;
text-align: center;
}
.heroContent_zBvH {
max-width: 800px;
margin: 0 auto 3rem;
}
.heroTitle_Jffy {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--ifm-color-primary) 0%, var(--ifm-color-primary-lightest) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.heroSubtitle_QuRN {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 0;
}
.statsGrid_lCJW {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
max-width: 1000px;
margin: 0 auto;
}
.statCard_Nxz0 {
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 1.5rem;
text-align: center;
transition: all 0.3s ease;
}
.statCard_Nxz0:hover {
transform: translateY(-4px);
background: rgba(255, 255, 255, 0.15);
border-color: var(--ifm-color-primary);
}
.statIcon_RzHJ {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.statNumber_iitc {
font-size: 2.5rem;
font-weight: 700;
color: var(--ifm-color-primary-lightest);
margin-bottom: 0.25rem;
}
.statLabel_p3ph {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Filters Section */
.filtersSection_Kswf {
background: var(--color-background-accent-subtler);
padding: 2rem;
border-bottom: 1px solid var(--color-background-accent-subtler-border);
}
.filtersHeader_a6Ln {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.filtersTitle_lyM_ {
font-size: 1.8rem;
font-weight: 600;
color: var(--ifm-font-color-base);
margin: 0;
}
.viewControls_rjXl {
display: flex;
gap: 0.5rem;
}
.viewButton_e3WN {
background: var(--ifm-background-surface-color);
border: 1px solid var(--color-background-accent-subtler-border);
border-radius: 6px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.2rem;
color: var(--ifm-color-secondary);
}
.viewButton_e3WN:hover {
border-color: var(--ifm-color-primary);
color: var(--ifm-color-primary);
}
.viewButtonActive_F2aZ {
background: var(--ifm-color-primary);
color: white;
border-color: var(--ifm-color-primary);
}
.filtersContainer_LH_E {
max-width: 1200px;
margin: 0 auto;
}
.searchContainer_eOvu {
margin-bottom: 2rem;
}
.searchWrapper_pLTk {
position: relative;
max-width: 600px;
margin: 0 auto;
}
.searchIcon_VIvm {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--ifm-color-secondary);
font-size: 1.1rem;
}
.searchInput_c62m {
width: 100%;
padding: 1rem 1rem 1rem 3rem;
border-radius: 12px;
border: 1px solid var(--color-background-accent-subtler-border);
background: var(--ifm-background-surface-color);
font-size: 1rem;
color: var(--ifm-font-color-base);
transition: all 0.3s ease;
}
.searchInput_c62m:focus {
outline: none;
border-color: var(--ifm-color-primary);
box-shadow: 0 0 0 3px rgba(0, 195, 205, 0.1);
}
.filterRow_fms2 {
display: flex;
flex-wrap: wrap;
gap: 2rem;
align-items: flex-start;
margin-bottom: 1rem;
}
.levelFilter_lPe8 {
display: flex;
flex-direction: column;
gap: 0.5rem;
min-width: 200px;
}
.tagsFilter_m0Ke {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}
.filterLabel_sMyB {
font-size: 0.9rem;
font-weight: 600;
color: var(--ifm-font-color-base);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.levelSelect_ntdr {
padding: 0.5rem 1rem;
border-radius: 8px;
border: 1px solid var(--color-background-accent-subtler-border);
background: var(--ifm-background-surface-color);
color: var(--ifm-font-color-base);
font-size: 0.9rem;
}
.tagButtons_VFzW {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tagButton_ghnt {
padding: 0.5rem 1rem;
border-radius: 20px;
border: 1px solid var(--color-background-accent-subtler-border);
background: var(--ifm-background-surface-color);
color: var(--ifm-font-color-base);
font-size: 0.85rem;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
}
.tagButton_ghnt:hover {
border-color: var(--ifm-color-primary);
background: var(--color-background-accent-subtler);
}
.tagButtonActive_slqD {
background: var(--ifm-color-primary);
color: white;
border-color: var(--ifm-color-primary);
}
.clearButton_kcGE {
background: transparent;
color: var(--ifm-color-primary);
border: 1px solid var(--ifm-color-primary);
padding: 0.5rem 1rem;
border-radius: 8px;
cursor: pointer;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s ease;
align-self: flex-end;
}
.clearButton_kcGE:hover {
background: var(--ifm-color-primary);
color: white;
}
.resultsInfo__tZr {
text-align: center;
padding: 1rem 0;
}
.resultsCount_Ufsm {
color: var(--ifm-color-secondary);
font-size: 0.9rem;
font-weight: 500;
}
/* Courses Section */
.coursesSection__Du1 {
padding: 3rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
.courseGrid_Y0af {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 2rem;
}
.courseList_eYen {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.courseCard_fde4 {
display: flex;
flex-direction: column;
border-radius: 16px;
overflow: hidden;
background: var(--ifm-background-surface-color);
border: 1px solid var(--color-background-accent-subtler-border);
transition: all 0.3s ease;
-webkit-text-decoration: none;
text-decoration: none;
color: inherit;
height: 100%;
position: relative;
}
.courseCard_fde4:hover {
transform: translateY(-8px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
border-color: var(--ifm-color-primary);
-webkit-text-decoration: none;
text-decoration: none;
}
.courseCardList_HYkH {
flex-direction: row;
height: auto;
}
.courseImageContainer_W1Ua {
position: relative;
height: 200px;
overflow: hidden;
}
.courseCardList_HYkH .courseImageContainer_W1Ua {
width: 250px;
height: 150px;
flex-shrink: 0;
}
.courseImage_o5cm {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.courseCard_fde4:hover .courseImage_o5cm {
transform: scale(1.05);
}
.courseOverlay__fLv {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 195, 205, 0.2) 100%);
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
}
.courseCard_fde4:hover .courseOverlay__fLv {
opacity: 1;
}
.labIcon_i6Ge {
font-size: 3rem;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.courseActions_R910 {
display: flex;
gap: 1rem;
}
.actionButton_PLbl {
background: var(--ifm-color-primary);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.actionButton_PLbl:hover {
background: var(--color-text-accent-hovered);
transform: translateY(-2px);
}
.courseLevel_DEJs {
position: absolute;
top: 1rem;
right: 1rem;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.levelBeginner_immC {
background: rgba(34, 197, 94, 0.9);
color: white;
}
.levelIntermediate_PBqY {
background: rgba(251, 191, 36, 0.9);
color: white;
}
.levelAdvanced_g_tb {
background: rgba(239, 68, 68, 0.9);
color: white;
}
.levelDefault_yLJj {
background: rgba(107, 114, 128, 0.9);
color: white;
}
.courseProgress_GEYE {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: rgba(255, 255, 255, 0.3);
}
.progressBar_lqs2 {
height: 100%;
background: var(--ifm-color-primary);
transition: width 0.3s ease;
}
.courseContent_ZnJt {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.courseHeader_CwWT {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
gap: 1rem;
}
.courseTitle_hrh8 {
font-size: 1.3rem;
font-weight: 600;
color: var(--ifm-font-color-base);
margin: 0;
line-height: 1.4;
flex: 1;
}
.courseDuration_nY9q {
background: var(--color-background-accent-subtler);
color: var(--ifm-color-secondary);
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 500;
white-space: nowrap;
}
.courseDescription_GkFd {
color: var(--ifm-color-secondary);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 1.5rem;
flex-grow: 1;
}
.courseFooter_HRMU {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1rem;
}
.courseTags_o5bK {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
flex: 1;
}
.tag_DJTL {
background: var(--color-background-accent-subtler);
color: var(--ifm-color-secondary);
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 500;
border: 1px solid var(--color-background-accent-subtler-border);
}
.courseState_nHbr {
background: var(--ifm-color-primary);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 500;
white-space: nowrap;
}
/* Loading State */
.loading_c1yc {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
color: var(--ifm-color-secondary);
}
.loadingSpinner_nI1N {
width: 40px;
height: 40px;
border: 3px solid var(--color-background-accent-subtler-border);
border-top-color: var(--ifm-color-primary);
border-radius: 50%;
animation: spin_Nakt 1s linear infinite;
margin-bottom: 1rem;
}
@keyframes spin_Nakt {
to {
transform: rotate(360deg);
}
}
/* No Results */
.noResults_dO7b {
text-align: center;
padding: 4rem 2rem;
color: var(--ifm-color-secondary);
}
.noResultsIcon_OPHt {
font-size: 4rem;
margin-bottom: 1rem;
}
.noResults_dO7b h3 {
font-size: 1.5rem;
color: var(--ifm-font-color-base);
margin-bottom: 0.5rem;
}
.noResults_dO7b p {
margin-bottom: 2rem;
}
/* Responsive Design */
@media (max-width: 1024px) {
.heroTitle_Jffy {
font-size: 2.5rem;
}
.courseGrid_Y0af {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.filterRow_fms2 {
flex-direction: column;
gap: 1rem;
}
.filtersHeader_a6Ln {
flex-direction: column;
gap: 1rem;
text-align: center;
}
}
@media (max-width: 768px) {
.hero_CbLR {
padding: 3rem 1rem;
}
.heroTitle_Jffy {
font-size: 2rem;
}
.heroSubtitle_QuRN {
font-size: 1.1rem;
}
.statsGrid_lCJW {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.courseGrid_Y0af {
grid-template-columns: 1fr;
}
.courseCardList_HYkH {
flex-direction: column;
}
.courseCardList_HYkH .courseImageContainer_W1Ua {
width: 100%;
height: 200px;
}
.tagButtons_VFzW {
gap: 0.25rem;
}
.tagButton_ghnt {
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
}
}
@media (max-width: 480px) {
.statsGrid_lCJW {
grid-template-columns: 1fr;
}
.filtersSection_Kswf {
padding: 1.5rem 1rem;
}
.coursesSection__Du1 {
padding: 2rem 1rem;
}
}
.placeholder_XlCz {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: white;
}
.initials_Vy33 {
font-size: 2.5rem;
font-weight: bold;
}
.container_HFRv {
min-height: 100vh;
background: var(--ifm-background-color);
}
/* Hero Section */
.hero_BSRI {
background: var(--ifm-header-background);
color: white;
padding: 3rem 2rem 4rem;
position: relative;
overflow: hidden;
}
.hero_BSRI::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 30, 45, 0.9) 0%, rgba(0, 195, 205, 0.1) 100%);
z-index: 1;
}
.heroContent_duGM {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.backLink_qWWA {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: rgba(255, 255, 255, 0.8);
-webkit-text-decoration: none;
text-decoration: none;
margin-bottom: 2rem;
transition: color 0.3s ease;
}
.backLink_qWWA:hover {
color: var(--ifm-color-primary-lightest);
-webkit-text-decoration: none;
text-decoration: none;
}
.heroMain_qOMz {
display: grid;
grid-template-columns: 1fr 400px;
gap: 3rem;
align-items: center;
}
.heroText_LbqC {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.title_fdaQ {
font-size: 3rem;
font-weight: 700;
margin: 0;
background: linear-gradient(135deg, white 0%, var(--ifm-color-primary-lightest) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1.2;
}
.description_baHE {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin: 0;
}
.pathStats_L65F {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.statBadge_cgoo {
display: flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 0.75rem 1rem;
border-radius: 12px;
color: white;
font-weight: 500;
}
.statIcon_VRLo {
font-size: 1.2rem;
}
.statValue_vSh1 {
font-size: 0.95rem;
}
.tags_DDc2 {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag_cYEu {
background: rgba(0, 195, 205, 0.2);
color: var(--ifm-color-primary-lightest);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
border: 1px solid rgba(0, 195, 205, 0.3);
}
.heroActions_slrB {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.startButton_Auk3,
.bookmarkButton_QG_E {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 1.5rem;
border-radius: 12px;
font-weight: 600;
font-size: 1rem;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.startButton_Auk3 {
background: var(--ifm-color-primary);
color: white;
}
.startButton_Auk3:hover {
background: #00a8b5;
transform: translateY(-2px);
}
.bookmarkButton_QG_E {
background: transparent;
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.bookmarkButton_QG_E:hover {
background: rgba(255, 255, 255, 0.1);
border-color: white;
}
.buttonIcon_m_wP {
font-size: 1.1rem;
}
.heroImageContainer_Rc0o {
position: relative;
height: 300px;
border-radius: 16px;
overflow: hidden;
}
.heroImage_pmkC {
width: 100%;
height: 100%;
object-fit: cover;
}
.imageOverlay_preB {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 30, 45, 0.3) 0%, rgba(0, 195, 205, 0.2) 100%);
display: flex;
align-items: center;
justify-content: center;
}
.overlayIcon_AItb {
font-size: 4rem;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
/* Video Section */
.videoSection_x4RU {
background: var(--ifm-background-surface-color);
padding: 3rem 2rem;
border-bottom: 1px solid var(--color-background-accent-subtler-border);
}
.videoContainer_r3Ux {
max-width: 1000px;
margin: 0 auto;
}
.videoTitle_cENc {
display: flex;
align-items: center;
gap: 1rem;
font-size: 2rem;
font-weight: 600;
color: var(--ifm-font-color-base);
margin-bottom: 2rem;
text-align: center;
justify-content: center;
}
.videoIcon_Fjsy {
font-size: 2.5rem;
}
.videoWrapper_oTvs {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}
/* Section Styles */
.outcomesSection_Y55Q,
.prerequisitesSection_yEJV {
padding: 4rem 2rem;
}
.outcomesSection_Y55Q {
background: var(--color-background-accent-subtler);
}
.prerequisitesSection_yEJV {
background: var(--ifm-background-surface-color);
}
.sectionContent_uJ_V {
max-width: 1200px;
margin: 0 auto;
}
.sectionTitle_kkSE {
display: flex;
align-items: center;
gap: 1rem;
font-size: 2.5rem;
font-weight: 700;
color: var(--ifm-font-color-base);
margin-bottom: 1rem;
text-align: center;
justify-content: center;
}
.sectionIcon_OUVg {
font-size: 3rem;
}
.sectionSubtitle_M9of {
font-size: 1.2rem;
color: var(--ifm-color-secondary);
text-align: center;
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.outcomesGrid_I1Eh {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.outcomeCard_Wz__ {
display: flex;
align-items: center;
gap: 1rem;
background: var(--ifm-background-surface-color);
padding: 1.5rem;
border-radius: 12px;
border: 1px solid var(--color-background-accent-subtler-border);
transition: all 0.3s ease;
}
.outcomeCard_Wz__:hover {
transform: translateY(-2px);
border-color: var(--ifm-color-primary);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.outcomeIcon_Bt4v {
width: 2.5rem;
height: 2.5rem;
background: var(--ifm-color-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
flex-shrink: 0;
}
.outcomeText_JZt4 {
font-size: 1.1rem;
line-height: 1.5;
color: var(--ifm-font-color-base);
}
.prerequisitesList_cdy2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 1rem;
}
.prerequisiteItem_KTDY {
display: flex;
align-items: center;
gap: 1rem;
background: var(--color-background-accent-subtler);
padding: 1.25rem;
border-radius: 12px;
border: 1px solid var(--color-background-accent-subtler-border);
}
.prerequisiteIcon_mvNC {
font-size: 1.5rem;
}
.prerequisiteText_daJU {
font-size: 1rem;
line-height: 1.5;
color: var(--ifm-font-color-base);
}
/* Roadmap Section */
.roadmapSection_DDOa {
background: var(--ifm-background-color);
padding: 4rem 2rem;
}
.roadmapPath__ABM {
max-width: 1000px;
margin: 0 auto;
}
.roadmapStep_rwVQ {
display: flex;
gap: 2rem;
margin-bottom: 4rem;
position: relative;
}
.roadmapStep_rwVQ:last-child {
margin-bottom: 0;
}
.stepConnector_Xp2m {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
position: relative;
}
.stepNode_NjuK {
width: 5rem;
height: 5rem;
background: var(--ifm-color-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
box-shadow: 0 8px 24px rgba(0, 195, 205, 0.3);
border: 4px solid white;
}
.stepNodeInner_B2Ow {
color: white;
font-size: 1.8rem;
font-weight: 700;
}
.pathLine_djE1 {
width: 4px;
background: linear-gradient(180deg, var(--ifm-color-primary) 0%, #00a8b5 100%);
min-height: 8rem;
margin-top: 1rem;
border-radius: 2px;
position: relative;
z-index: 1;
}
.pathLine_djE1::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 12px;
background: var(--ifm-color-primary);
border-radius: 50%;
animation: pathProgress_bu8D 3s ease-in-out infinite;
}
@keyframes pathProgress_bu8D {
0%, 100% {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
50% {
transform: translateX(-50%) translateY(4rem);
opacity: 0.7;
}
}
.stepContent_vDIB {
flex: 1;
padding-top: 0.5rem;
}
.stepCard_TbZU {
background: var(--ifm-background-surface-color);
padding: 2rem;
border-radius: 16px;
border: 1px solid var(--color-background-accent-subtler-border);
margin-bottom: 2rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
}
.stepCard_TbZU:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
border-color: var(--ifm-color-primary);
}
.stepCard_TbZU::before {
content: "";
position: absolute;
top: 2rem;
left: -1rem;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 15px solid var(--ifm-background-surface-color);
}
.stepHeader_evxL {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
gap: 1rem;
}
.stepTitle_cw13 {
font-size: 1.8rem;
font-weight: 600;
color: var(--ifm-font-color-base);
margin: 0;
line-height: 1.3;
flex: 1;
}
.stepDescription_hFn_ {
font-size: 1.1rem;
color: var(--ifm-color-secondary);
line-height: 1.6;
margin: 0;
}
.stepMeta_tjWC {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
font-size: 0.95rem;
color: var(--ifm-color-secondary);
align-items: center;
}
.stepDuration_GdLE,
.stepCourseCount_oI8k {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--color-background-accent-subtler);
padding: 0.5rem 1rem;
border-radius: 20px;
font-weight: 500;
}
.metaIcon_fKvw {
font-size: 1.1rem;
}
.coursesGrid_HOSa {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 2rem;
}
.courseCard_oYi9 {
display: flex;
flex-direction: column;
border-radius: 16px;
overflow: hidden;
background: var(--ifm-background-surface-color);
border: 1px solid var(--color-background-accent-subtler-border);
transition: all 0.3s ease;
-webkit-text-decoration: none;
text-decoration: none;
color: inherit;
height: 100%;
}
.courseCard_oYi9:hover {
transform: translateY(-8px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
border-color: var(--ifm-color-primary);
-webkit-text-decoration: none;
text-decoration: none;
}
.courseImageContainer_rSGm {
position: relative;
height: 180px;
overflow: hidden;
}
.courseImage_cFfM {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.courseCard_oYi9:hover .courseImage_cFfM {
transform: scale(1.05);
}
.courseLevel_xIG0 {
position: absolute;
top: 1rem;
right: 1rem;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: capitalize;
}
.courseOverlay_ZUb6 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 30, 45, 0.4) 0%, rgba(0, 195, 205, 0.2) 100%);
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.courseCard_oYi9:hover .courseOverlay_ZUb6 {
opacity: 1;
}
.courseOverlayIcon_Alhc {
font-size: 3rem;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.courseContent_BZ9w {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.courseTitle_bGTN {
font-size: 1.2rem;
font-weight: 600;
color: var(--ifm-font-color-base);
margin: 0 0 1rem 0;
line-height: 1.4;
}
.courseDescription_IEol {
font-size: 0.95rem;
color: var(--ifm-color-secondary);
line-height: 1.6;
margin-bottom: 1rem;
flex-grow: 1;
}
.courseMeta_EwJ2 {
display: flex;
gap: 1rem;
font-size: 0.9rem;
color: var(--ifm-color-secondary);
}
.courseDuration_duPJ {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Coming Soon Section */
.comingSoonSection_65AR {
background: var(--color-background-accent-subtler);
padding: 4rem 2rem;
}
.comingSoonContent_Te62 {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.comingSoonIcon_w8l6 {
font-size: 4rem;
margin-bottom: 2rem;
}
.comingSoonTitle_GsUB {
font-size: 2.5rem;
font-weight: 700;
color: var(--ifm-font-color-base);
margin-bottom: 1rem;
}
.comingSoonDescription_dloC {
font-size: 1.2rem;
color: var(--ifm-color-secondary);
line-height: 1.6;
margin-bottom: 2rem;
}
.comingSoonActions_RFY5 {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.exploreButton_RSjt,
.notifyButton_HJPu {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 1.5rem;
border-radius: 12px;
font-weight: 600;
-webkit-text-decoration: none;
text-decoration: none;
transition: all 0.3s ease;
}
.exploreButton_RSjt {
background: var(--ifm-color-primary);
color: white;
}
.exploreButton_RSjt:hover {
background: #00a8b5;
-webkit-text-decoration: none;
text-decoration: none;
transform: translateY(-2px);
}
.notifyButton_HJPu {
background: transparent;
color: var(--ifm-color-primary);
border: 2px solid var(--ifm-color-primary);
cursor: pointer;
}
.notifyButton_HJPu:hover {
background: var(--ifm-color-primary);
color: white;
}
/* CTA Section */
.ctaSection_N2B5 {
background: var(--ifm-color-primary);
color: white;
padding: 4rem 2rem;
}
.ctaContent_Js71 {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.ctaTitle_jTBs {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.ctaDescription_yUrY {
font-size: 1.2rem;
line-height: 1.6;
margin-bottom: 2rem;
color: rgba(255, 255, 255, 0.9);
}
.ctaActions_hPdu {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.primaryCta_pPQV,
.secondaryCta_JDQW {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
border-radius: 12px;
font-weight: 600;
-webkit-text-decoration: none;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
font-size: 1rem;
}
.primaryCta_pPQV {
background: white;
color: var(--ifm-color-primary);
}
.primaryCta_pPQV:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
}
.secondaryCta_JDQW {
background: transparent;
color: white;
border: 2px solid white;
}
.secondaryCta_JDQW:hover {
background: white;
color: var(--ifm-color-primary);
-webkit-text-decoration: none;
text-decoration: none;
transform: translateY(-2px);
}
/* Loading & Error States */
.loading_ka2y {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
color: var(--ifm-color-secondary);
min-height: 400px;
}
.loadingSpinner_P5J5 {
width: 40px;
height: 40px;
border: 3px solid var(--color-background-accent-subtler-border);
border-top-color: var(--ifm-color-primary);
border-radius: 50%;
animation: spin_aRgU 1s linear infinite;
margin-bottom: 1rem;
}
@keyframes spin_aRgU {
to {
transform: rotate(360deg);
}
}
.error_BeV5 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
text-align: center;
min-height: 400px;
}
.errorIcon_hbIL {
font-size: 4rem;
margin-bottom: 1rem;
}
.error_BeV5 h2 {
font-size: 2rem;
color: var(--ifm-font-color-base);
margin-bottom: 1rem;
}
.error_BeV5 p {
color: var(--ifm-color-secondary);
margin-bottom: 2rem;
font-size: 1.1rem;
}
.backButton_F3J4 {
background: var(--ifm-color-primary);
color: white;
padding: 1rem 1.5rem;
border-radius: 8px;
-webkit-text-decoration: none;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.backButton_F3J4:hover {
background: #00a8b5;
-webkit-text-decoration: none;
text-decoration: none;
transform: translateY(-2px);
}
/* Responsive Design */
@media (max-width: 1024px) {
.heroMain_qOMz {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.heroImageContainer_Rc0o {
max-width: 400px;
margin: 0 auto;
}
.coursesGrid_HOSa {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.stepNavigation_n2LW {
justify-content: flex-start;
}
}
@media (max-width: 768px) {
.hero_BSRI {
padding: 2rem 1rem 3rem;
}
.title_fdaQ {
font-size: 2.5rem;
}
.description_baHE {
font-size: 1.1rem;
}
.pathStats_L65F {
justify-content: center;
}
.heroActions_slrB {
justify-content: center;
}
.roadmapStep_rwVQ {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.stepConnector_Xp2m {
flex-direction: row;
justify-content: center;
margin-bottom: 1rem;
}
.pathLine_djE1 {
width: 6rem;
height: 4px;
margin-top: 0;
margin-left: 1rem;
background: linear-gradient(90deg, var(--ifm-color-primary) 0%, #00a8b5 100%);
}
.pathLine_djE1::before {
top: 50%;
left: 0;
transform: translateY(-50%);
animation: pathProgressHorizontal_hCB_ 3s ease-in-out infinite;
}
.stepCard_TbZU::before {
display: none;
}
.stepHeader_evxL {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.stepMeta_tjWC {
justify-content: center;
}
.coursesGrid_HOSa {
grid-template-columns: 1fr;
}
.outcomesGrid_I1Eh {
grid-template-columns: 1fr;
}
.prerequisitesList_cdy2 {
grid-template-columns: 1fr;
}
@keyframes pathProgressHorizontal_hCB_ {
0%, 100% {
transform: translateY(-50%) translateX(0);
opacity: 1;
}
50% {
transform: translateY(-50%) translateX(3rem);
opacity: 0.7;
}
}
.ctaActions_hPdu {
flex-direction: column;
align-items: center;
}
.primaryCta_pPQV,
.secondaryCta_JDQW {
width: 250px;
}
}
@media (max-width: 480px) {
.hero_BSRI {
padding: 1.5rem 1rem 2rem;
}
.title_fdaQ {
font-size: 2rem;
}
.sectionTitle_kkSE {
font-size: 2rem;
}
.stepTitle_cw13 {
font-size: 1.5rem;
}
.pathStats_L65F {
flex-direction: column;
align-items: center;
}
.statBadge_cgoo {
width: 100%;
justify-content: center;
max-width: 250px;
}
}
/* content/src/pages/agents/course-manager.module.css */
.gradientBackground_ZcRF {
background: linear-gradient(
135deg,
rgba(var(--ifm-color-primary-rgb), 0.08) 0%,
rgba(var(--ifm-color-primary-rgb), 0.03) 100%
);
min-height: calc(100vh - var(--ifm-navbar-height));
padding-bottom: 4rem;
}
.header_Zm1h {
text-align: center;
margin-bottom: 2rem;
position: relative;
}
.title_S65r {
font-size: 2.5rem;
margin-bottom: 0.5rem;
background: linear-gradient(
90deg,
var(--ifm-color-primary) 0%,
var(--ifm-color-primary-dark) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
display: inline-block;
}
.subtitle_A0I7 {
font-size: 1.2rem;
color: var(--ifm-color-emphasis-700);
max-width: 600px;
margin: 0 auto;
}
/* Tabs Navigation */
.tabsContainer_JQEy {
display: flex;
border-bottom: 1px solid var(--ifm-color-emphasis-300);
margin-bottom: 2rem;
justify-content: center;
flex-wrap: wrap;
}
.tabButton_KN3I {
padding: 0.75rem 1.5rem;
font-size: 1rem;
background: transparent;
border: none;
border-bottom: 3px solid transparent;
cursor: pointer;
font-weight: 500;
color: var(--ifm-color-emphasis-700);
transition: all 0.2s ease;
}
.tabButton_KN3I:hover {
color: var(--ifm-color-primary);
}
.activeTab_wCNZ {
border-bottom: 3px solid var(--ifm-color-primary);
color: var(--ifm-color-primary);
}
.contentBox_zUjW {
background: var(--ifm-card-background-color);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
padding: 2rem;
margin-bottom: 2rem;
}
/* Form Styles */
.formContainer_brye {
max-width: 800px;
margin: 0 auto;
}
.formContainer_brye h2 {
text-align: center;
margin-bottom: 0.5rem;
}
.formDescription_t3la {
text-align: center;
margin-bottom: 2rem;
color: var(--ifm-color-emphasis-600);
}
.formGroup_cMkN {
margin-bottom: 1.5rem;
flex: 1;
}
.formRow_wyKv {
display: flex;
gap: 1.5rem;
margin-bottom: 0;
}
.formGroup_cMkN label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
}
.formGroup_cMkN input,
.formGroup_cMkN textarea,
.formGroup_cMkN select {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--ifm-color-emphasis-300);
border-radius: 6px;
background-color: var(--ifm-background-color);
font-size: 1rem;
transition: all 0.2s ease;
}
.formGroup_cMkN input:focus,
.formGroup_cMkN textarea:focus,
.formGroup_cMkN select:focus {
outline: none;
border-color: var(--ifm-color-primary);
box-shadow: 0 0 0 2px rgba(var(--ifm-color-primary-rgb), 0.2);
}
.fieldHelp_lWjf {
font-size: 0.8rem;
margin-top: 0.25rem;
color: var(--ifm-color-emphasis-600);
}
.submitButton_iRbm {
background: linear-gradient(
90deg,
var(--ifm-color-primary) 0%,
var(--ifm-color-primary-dark) 100%
);
color: white;
border: none;
border-radius: 6px;
padding: 0.9rem 2rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: block;
margin: 2rem auto 1rem;
min-width: 200px;
}
.submitButton_iRbm:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.submitButton_iRbm:disabled {
background: var(--ifm-color-emphasis-300);
cursor: not-allowed;
transform: none;
}
/* Loading State */
.loadingContainer_gKIn {
text-align: center;
padding: 3rem 1rem;
max-width: 600px;
margin: 0 auto;
}
.loadingStep_U5no {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 2rem;
}
.loadingStep_U5no p {
margin-top: 1rem;
font-size: 1.2rem;
color: var(--ifm-color-emphasis-800);
}
.spinner_HedI {
display: inline-block;
width: 50px;
height: 50px;
border: 4px solid rgba(var(--ifm-color-primary-rgb), 0.1);
border-left-color: var(--ifm-color-primary);
border-radius: 50%;
animation: spin_Ut1b 1s linear infinite;
}
.progressBar_Swjb {
width: 100%;
height: 8px;
background-color: var(--ifm-color-emphasis-200);
border-radius: 4px;
overflow: hidden;
}
.progressFill_pKg4 {
height: 100%;
background: linear-gradient(
90deg,
var(--ifm-color-primary) 0%,
var(--ifm-color-primary-dark) 100%
);
transition: width 0.5s ease;
}
@keyframes spin_Ut1b {
to {
transform: rotate(360deg);
}
}
/* Error State */
.errorContainer_DPzF {
text-align: center;
padding: 2rem 1rem;
max-width: 600px;
margin: 0 auto;
background-color: var(--ifm-color-danger-contrast-background);
border-radius: 8px;
}
.errorContainer_DPzF h3 {
color: var(--ifm-color-danger);
margin-bottom: 1rem;
}
.resetButton_VQdD {
background-color: var(--ifm-color-danger);
color: white;
border: none;
border-radius: 6px;
padding: 0.75rem 1.5rem;
font-size: 1rem;
margin-top: 1.5rem;
cursor: pointer;
transition: background-color 0.2s ease;
}
.resetButton_VQdD:hover {
background-color: var(--ifm-color-danger-dark);
}
/* Success State */
.successContainer_Chb3 {
text-align: center;
padding: 2rem 0;
}
.successContainer_Chb3 h2 {
color: var(--ifm-color-success);
margin-bottom: 1.5rem;
}
.resultBox_FSfU {
background-color: var(--ifm-background-surface-color);
border: 1px solid var(--ifm-color-emphasis-200);
border-radius: 6px;
padding: 1.5rem;
margin-bottom: 2rem;
text-align: left;
max-height: 400px;
overflow-y: auto;
}
.resultBox_FSfU pre {
margin: 0;
white-space: pre-wrap;
font-family: var(--ifm-font-family-monospace);
font-size: 0.9rem;
}
.actionButtons_vZjh {
display: flex;
justify-content: center;
gap: 1rem;
}
.primaryButton_VbCb,
.secondaryButton_CVNt {
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.primaryButton_VbCb {
background-color: var(--ifm-color-primary);
color: white;
border: none;
}
.primaryButton_VbCb:hover {
background-color: var(--ifm-color-primary-dark);
}
.secondaryButton_CVNt {
background-color: transparent;
color: var(--ifm-color-primary);
border: 1px solid var(--ifm-color-primary);
}
.secondaryButton_CVNt:hover {
background-color: var(--ifm-color-primary-contrast-background);
}
/* Manage Courses Tab */
.manageContainer_mI11 {
width: 100%;
}
.manageContainer_mI11 h2 {
text-align: center;
margin-bottom: 2rem;
}
.courseActions_fJMb {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
}
.actionButton_seS2 {
background-color: transparent;
color: var(--ifm-color-primary);
border: 1px solid var(--ifm-color-primary);
border-radius: 6px;
padding: 0.6rem 1.2rem;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
}
.actionButton_seS2:hover {
background-color: var(--ifm-color-primary);
color: white;
}
.actionButton_seS2:disabled {
border-color: var(--ifm-color-emphasis-300);
color: var(--ifm-color-emphasis-500);
cursor: not-allowed;
}
.message_G7Y7 {
margin: 1rem 0 2rem;
padding: 1.5rem;
background-color: var(--ifm-color-info-contrast-background);
border-left: 4px solid var(--ifm-color-info);
border-radius: 4px;
position: relative;
}
.message_G7Y7 pre {
margin: 0;
white-space: pre-wrap;
font-family: var(--ifm-font-family-base);
font-size: 0.9rem;
}
.closeButton_ZcF5 {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: transparent;
border: none;
color: var(--ifm-color-emphasis-600);
cursor: pointer;
font-size: 0.8rem;
padding: 0.25rem 0.5rem;
border-radius: 4px;
}
.closeButton_ZcF5:hover {
background-color: var(--ifm-color-emphasis-200);
}
.loadingIndicator_kJy6 {
text-align: center;
padding: 3rem;
}
.loadingIndicator_kJy6 p {
margin-top: 1rem;
color: var(--ifm-color-emphasis-600);
}
.coursesList_Kak9 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
margin-top: 1rem;
}
.courseCard_foro {
background-color: var(--ifm-background-surface-color);
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
border: 1px solid var(--ifm-color-emphasis-200);
}
.courseCard_foro:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}
.courseCard_foro h3 {
margin-top: 0;
margin-bottom: 1rem;
font-size: 1.25rem;
color: var(--ifm-color-primary);
}
.courseCardActions_INGm {
display: flex;
gap: 0.75rem;
margin-top: 1.5rem;
}
.viewButton_qsnk,
.validateButton_n2OD {
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 0.875rem;
cursor: pointer;
flex: 1;
border: none;
transition: all 0.2s ease;
font-weight: 500;
}
.viewButton_qsnk {
background-color: var(--ifm-color-primary);
color: white;
}
.viewButton_qsnk:hover {
background-color: var(--ifm-color-primary-dark);
}
.validateButton_n2OD {
background-color: var(--ifm-color-success);
color: white;
}
.validateButton_n2OD:hover {
background-color: var(--ifm-color-success-dark);
}
.emptyCourses__Uby {
text-align: center;
padding: 3rem 0;
color: var(--ifm-color-emphasis-600);
font-size: 1.1rem;
}
/* View Course Tab */
.viewContainer_VqMH {
width: 100%;
}
.viewHeader_Y9yK {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.backButton_ADSA {
background-color: transparent;
color: var(--ifm-color-primary);
border: 1px solid var(--ifm-color-primary);
border-radius: 6px;
padding: 0.5rem 1rem;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s ease;
}
.backButton_ADSA:hover {
background-color: var(--ifm-color-primary);
color: white;
}
.moduleContentBox_ngIo {
background-color: var(--ifm-background-surface-color);
border: 1px solid var(--ifm-color-emphasis-200);
border-radius: 8px;
padding: 1.5rem;
min-height: 300px;
}
.moduleContent_RMQs {
white-space: pre-wrap;
font-family: var(--ifm-font-family-base);
font-size: 0.95rem;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.formRow_wyKv {
flex-direction: column;
gap: 0;
}
.actionButtons_vZjh {
flex-direction: column;
gap: 0.75rem;
}
.coursesList_Kak9 {
grid-template-columns: 1fr;
}
.viewHeader_Y9yK {
flex-direction: column;
gap: 1rem;
}
.backButton_ADSA {
width: 100%;
}
}
/* Floating decoration elements */
.header_Zm1h::before,
.header_Zm1h::after {
content: "";
position: absolute;
width: 80px;
height: 80px;
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
background-color: rgba(var(--ifm-color-primary-rgb), 0.05);
z-index: -1;
}
.header_Zm1h::before {
top: -40px;
left: 15%;
animation: float_pZes 8s ease-in-out infinite;
}
.header_Zm1h::after {
bottom: -30px;
right: 15%;
animation: float_pZes 6s ease-in-out infinite reverse;
}
@keyframes float_pZes {
0% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-15px) rotate(5deg);
}
100% {
transform: translateY(0) rotate(0deg);
}
}
.container_hcFq {
min-height: 100vh;
background: var(--ifm-background-color);
}
/* Hero Section */
.hero__ky9 {
background: var(--ifm-header-background);
color: white;
padding: 4rem 2rem;
text-align: center;
}
.heroContent_xeeI {
max-width: 800px;
margin: 0 auto 3rem;
}
.heroTitle_ppbM {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--ifm-color-primary) 0%, var(--ifm-color-primary-lightest) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.heroSubtitle_m3E_ {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 0;
}
.statsGrid_nzqQ {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
max-width: 1000px;
margin: 0 auto;
}
.statCard_Vqt3 {
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 1.5rem;
text-align: center;
transition: all 0.3s ease;
}
.statCard_Vqt3:hover {
transform: translateY(-4px);
background: rgba(255, 255, 255, 0.15);
border-color: var(--ifm-color-primary);
}
.statIcon_Yvgm {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.statNumber_ZXIH {
font-size: 2.5rem;
font-weight: 700;
color: var(--ifm-color-primary-lightest);
margin-bottom: 0.25rem;
}
.statLabel_tVPC {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Categories Section */
.categoriesSection_plmy {
background: var(--color-background-accent-subtler);
padding: 4rem 2rem;
}
.categoriesContainer_RXXo {
max-width: 1200px;
margin: 0 auto;
}
.sectionTitle_EV2f {
font-size: 2.5rem;
font-weight: 700;
text-align: center;
margin-bottom: 1rem;
color: var(--ifm-font-color-base);
}
.sectionSubtitle_mlvN {
font-size: 1.2rem;
color: var(--ifm-color-secondary);
text-align: center;
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.categoriesGrid_qSqV {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.categoryCard_ByE_ {
display: flex;
align-items: center;
gap: 2rem;
background: var(--ifm-background-surface-color);
padding: 2rem;
border-radius: 16px;
border: 1px solid var(--color-background-accent-subtler-border);
transition: all 0.3s ease;
cursor: pointer;
}
.categoryCard_ByE_:hover {
transform: translateY(-4px);
border-color: var(--ifm-color-primary);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.categoryIcon_MRWN {
width: 4rem;
height: 4rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
flex-shrink: 0;
}
.categoryContent_xa8D {
flex: 1;
}
.categoryTitle_kiCd {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--ifm-font-color-base);
}
.categoryDescription_nDv4 {
color: var(--ifm-color-secondary);
margin-bottom: 1rem;
line-height: 1.6;
}
.categoryMeta_J7mk {
display: flex;
gap: 1rem;
font-size: 0.9rem;
}
.pathCount_mMDW {
background: var(--ifm-color-primary);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-weight: 500;
}
/* Filters Section */
.filtersSection_u4EJ {
background: var(--ifm-background-surface-color);
padding: 3rem 2rem;
border-bottom: 1px solid var(--color-background-accent-subtler-border);
}
.filtersContainer_y1bt {
max-width: 1200px;
margin: 0 auto;
}
.filtersTitle_Aqj3 {
font-size: 2rem;
font-weight: 600;
text-align: center;
margin-bottom: 2rem;
color: var(--ifm-font-color-base);
}
.filterGrid_IADX {
display: grid;
gap: 3rem;
}
.levelFilter_OuXP,
.topicFilter_EziQ {
display: flex;
flex-direction: column;
gap: 1rem;
}
.filterLabel_OAwN {
font-size: 1.1rem;
font-weight: 600;
color: var(--ifm-font-color-base);
text-align: center;
}
.levelButtons_xv_w {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.levelButton_aDdt {
background: var(--color-background-accent-subtler);
border: 1px solid var(--color-background-accent-subtler-border);
color: var(--ifm-font-color-base);
padding: 0.75rem 1.5rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
font-size: 0.9rem;
}
.levelButton_aDdt:hover {
border-color: var(--ifm-color-primary);
background: var(--ifm-background-surface-color);
}
.levelButtonActive_UhT7 {
background: var(--ifm-color-primary);
color: white;
border-color: var(--ifm-color-primary);
}
.topicButtons_HEs0 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
max-width: 900px;
margin: 0 auto;
}
.topicButton_UJ0y {
background: var(--color-background-accent-subtler);
border: 1px solid var(--color-background-accent-subtler-border);
color: var(--ifm-font-color-base);
padding: 1rem;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 500;
text-align: left;
}
.topicButton_UJ0y:hover {
border-color: var(--ifm-color-primary);
background: var(--ifm-background-surface-color);
transform: translateY(-2px);
}
.topicButtonActive_zIew {
background: var(--ifm-color-primary);
color: white;
border-color: var(--ifm-color-primary);
}
.topicIcon_rtEM {
font-size: 1.5rem;
}
/* Paths Section */
.pathsSection_J5H3 {
padding: 3rem 2rem;
}
.pathsContainer_ufsD {
max-width: 1200px;
margin: 0 auto;
}
.pathsHeader_uNR1 {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.pathsTitle_ypsT {
font-size: 2rem;
font-weight: 600;
color: var(--ifm-font-color-base);
margin: 0;
}
.pathsCount_RyOR {
color: var(--ifm-color-secondary);
font-size: 0.9rem;
font-weight: 500;
}
.pathGrid_YrvV {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 2rem;
}
.pathCard_D0MV {
display: flex;
flex-direction: column;
border-radius: 16px;
overflow: hidden;
background: var(--ifm-background-surface-color);
border: 1px solid var(--color-background-accent-subtler-border);
transition: all 0.3s ease;
-webkit-text-decoration: none;
text-decoration: none;
color: inherit;
height: 100%;
position: relative;
}
.pathCard_D0MV:hover {
transform: translateY(-8px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
border-color: var(--ifm-color-primary);
-webkit-text-decoration: none;
text-decoration: none;
}
.pathImageContainer_lN_1 {
position: relative;
height: 200px;
overflow: hidden;
}
.pathImage_o4fi {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.pathCard_D0MV:hover .pathImage_o4fi {
transform: scale(1.05);
}
.pathOverlay_qvXZ {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 195, 205, 0.2) 100%);
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
}
.pathCard_D0MV:hover .pathOverlay_qvXZ {
opacity: 1;
}
.pathCategoryIcon_hn8Y {
font-size: 3rem;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.pathActions_WVHt {
display: flex;
gap: 1rem;
}
.startButton_fqfT {
background: var(--ifm-color-primary);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.startButton_fqfT:hover {
background: var(--color-text-accent-hovered);
transform: translateY(-2px);
}
.pathLevel_NkPV {
position: absolute;
top: 1rem;
right: 1rem;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
color: white;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
gap: 0.5rem;
}
.levelIcon_vQaX {
font-size: 1rem;
}
.pathContent_Y910 {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.pathHeader_fxwz {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
gap: 1rem;
}
.pathTitle_rVQe {
font-size: 1.3rem;
font-weight: 600;
color: var(--ifm-font-color-base);
margin: 0;
line-height: 1.4;
flex: 1;
}
.pathDuration_I2D2 {
background: var(--color-background-accent-subtler);
color: var(--ifm-color-secondary);
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 500;
white-space: nowrap;
}
.pathDescription_T8Es {
color: var(--ifm-color-secondary);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 1.5rem;
flex-grow: 1;
}
.pathProgress_Nht7 {
margin-bottom: 1.5rem;
}
.progressInfo_t308 {
display: flex;
gap: 1rem;
font-size: 0.9rem;
}
.stepsCount_B9GG,
.coursesCount_Dd7T {
background: var(--color-background-accent-subtler);
color: var(--ifm-color-secondary);
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-weight: 500;
}
.pathFooter_O_oT {
display: flex;
flex-direction: column;
gap: 1rem;
}
.pathTags_ASDi {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag__7YF {
background: var(--color-background-accent-subtler);
color: var(--ifm-color-secondary);
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 500;
border: 1px solid var(--color-background-accent-subtler-border);
}
.pathOutcome_Szv9 {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--ifm-color-primary);
color: white;
padding: 0.5rem 1rem;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 500;
}
.outcomeIcon_EZha {
font-size: 1rem;
}
.outcomeText_FEzR {
flex: 1;
}
/* CTA Section */
.ctaSection_Uujw {
background: var(--ifm-color-primary);
color: white;
padding: 4rem 2rem;
}
.ctaContainer_wFE8 {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.ctaTitle_jfm2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.ctaDescription_B4lz {
font-size: 1.2rem;
line-height: 1.6;
margin-bottom: 2rem;
color: rgba(255, 255, 255, 0.9);
}
.ctaButtons_Jkvm {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.primaryButton_Wl9R {
background: white;
color: var(--ifm-color-primary);
padding: 1rem 2rem;
border-radius: 8px;
-webkit-text-decoration: none;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.primaryButton_Wl9R:hover {
background: rgba(255, 255, 255, 0.9);
-webkit-text-decoration: none;
text-decoration: none;
transform: translateY(-2px);
}
.secondaryButton_NWgE {
background: transparent;
color: white;
padding: 1rem 2rem;
border: 2px solid white;
border-radius: 8px;
-webkit-text-decoration: none;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.secondaryButton_NWgE:hover {
background: white;
color: var(--ifm-color-primary);
-webkit-text-decoration: none;
text-decoration: none;
transform: translateY(-2px);
}
/* Loading & No Results */
.loading_fIvm {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
color: var(--ifm-color-secondary);
}
.loadingSpinner_GVTy {
width: 40px;
height: 40px;
border: 3px solid var(--color-background-accent-subtler-border);
border-top-color: var(--ifm-color-primary);
border-radius: 50%;
animation: spin_prTv 1s linear infinite;
margin-bottom: 1rem;
}
@keyframes spin_prTv {
to {
transform: rotate(360deg);
}
}
.noResults_Xcmr {
text-align: center;
padding: 4rem 2rem;
color: var(--ifm-color-secondary);
}
.noResultsIcon_RlnM {
font-size: 4rem;
margin-bottom: 1rem;
}
.noResults_Xcmr h3 {
font-size: 1.5rem;
color: var(--ifm-font-color-base);
margin-bottom: 0.5rem;
}
.noResults_Xcmr p {
margin-bottom: 2rem;
}
.resetButton_XWdt {
background: var(--ifm-color-primary);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}
.resetButton_XWdt:hover {
background: var(--color-text-accent-hovered);
transform: translateY(-1px);
}
/* Responsive Design */
@media (max-width: 1024px) {
.heroTitle_ppbM {
font-size: 2.5rem;
}
.pathGrid_YrvV {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.topicButtons_HEs0 {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.pathsHeader_uNR1 {
flex-direction: column;
gap: 1rem;
text-align: center;
}
}
@media (max-width: 768px) {
.hero__ky9 {
padding: 3rem 1rem;
}
.heroTitle_ppbM {
font-size: 2rem;
}
.heroSubtitle_m3E_ {
font-size: 1.1rem;
}
.statsGrid_nzqQ {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.categoriesSection_plmy {
padding: 3rem 1rem;
}
.categoryCard_ByE_ {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.pathGrid_YrvV {
grid-template-columns: 1fr;
}
.levelButtons_xv_w {
flex-direction: column;
align-items: center;
max-width: 300px;
margin: 0 auto;
}
.topicButtons_HEs0 {
grid-template-columns: 1fr;
max-width: 400px;
margin: 0 auto;
}
.ctaButtons_Jkvm {
flex-direction: column;
align-items: center;
}
.primaryButton_Wl9R,
.secondaryButton_NWgE {
width: 250px;
}
}
@media (max-width: 480px) {
.statsGrid_nzqQ {
grid-template-columns: 1fr;
}
.filtersSection_u4EJ {
padding: 2rem 1rem;
}
.pathsSection_J5H3 {
padding: 2rem 1rem;
}
.categoryCard_ByE_ {
padding: 1.5rem;
}
}
/* src/components/AgentChat/styles.module.css */
.floatingChatContainer_BBzt {
position: fixed;
bottom: 20px;
right: 20px;
width: 400px;
max-width: calc(100vw - 40px);
height: 500px;
max-height: calc(100vh - 100px);
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
z-index: 1000;
transform: translateY(calc(100% - 50px));
transition: transform 0.3s ease;
}
.floatingChatContainer_BBzt.open_MQ0k {
transform: translateY(0);
}
.embeddedChatContainer_GLnv {
width: 100%;
height: 500px;
border-radius: 12px;
border: 1px solid var(--ifm-color-emphasis-300);
display: flex;
flex-direction: column;
margin-bottom: 1.5rem;
}
.chatToggle_Yses {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
border: none;
border-radius: 12px 12px 0 0;
background-color: var(--ifm-color-primary);
color: white;
font-weight: bold;
cursor: pointer;
padding: 0 15px;
display: flex;
align-items: center;
justify-content: space-between;
}
.chatInterface_EuD0 {
display: flex;
flex-direction: column;
height: 100%;
background-color: var(--ifm-background-color);
border-radius: 12px;
overflow: hidden;
}
.chatHeader_XQJ8 {
padding: 10px 15px;
background-color: var(--ifm-color-primary);
color: white;
}
.chatHeader_XQJ8 h3 {
margin: 0;
padding: 0;
font-size: 1.1rem;
}
.agentDescription_nfae {
margin: 5px 0 0;
font-size: 0.8rem;
opacity: 0.9;
}
.messagesContainer_cJNN {
flex: 1;
overflow-y: auto;
padding: 15px;
display: flex;
flex-direction: column;
gap: 8px;
}
.message_QLqb {
padding: 10px 15px;
border-radius: 18px;
max-width: 80%;
word-wrap: break-word;
}
.userMessage_DQNA {
align-self: flex-end;
background-color: var(--ifm-color-primary-lightest);
color: var(--ifm-font-color-base);
}
.agentMessage_BQSn {
align-self: flex-start;
background-color: var(--ifm-color-emphasis-200);
color: var(--ifm-font-color-base);
}
.inProgress_eafC {
opacity: 0.8;
}
.errorMessage_Y8iJ {
background-color: #ffebee;
color: #c62828;
}
.messageContent_EAPh {
white-space: pre-wrap;
}
.inputForm_AKyB {
display: flex;
padding: 10px;
border-top: 1px solid var(--ifm-color-emphasis-200);
}
.chatInput_TfC7 {
flex: 1;
padding: 10px 15px;
border: 1px solid var(--ifm-color-emphasis-300);
border-radius: 20px;
font-size: 0.9rem;
}
.sendButton_Dk82 {
margin-left: 8px;
padding: 8px 16px;
background-color: var(--ifm-color-primary);
color: white;
border: none;
border-radius: 20px;
cursor: pointer;
font-weight: bold;
}
.sendButton_Dk82:disabled {
background-color: var(--ifm-color-emphasis-300);
cursor: not-allowed;
}
.welcomeMessage_uDYF {
text-align: center;
padding: 20px;
color: var(--ifm-color-emphasis-700);
}
.suggestionChips_zWlp {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-top: 15px;
}
.suggestionChips_zWlp button {
background-color: var(--ifm-color-emphasis-200);
border: none;
border-radius: 16px;
padding: 6px 12px;
font-size: 0.8rem;
cursor: pointer;
transition: background-color 0.2s;
}
.suggestionChips_zWlp button:hover {
background-color: var(--ifm-color-emphasis-300);
}
.artifactsContainer_Jaeh {
margin-top: 10px;
border-top: 1px solid var(--ifm-color-emphasis-300);
padding-top: 10px;
}
.artifactsContainer_Jaeh h4 {
margin: 0 0 8px;
font-size: 0.9rem;
color: var(--ifm-color-emphasis-700);
}
.artifact_hrLS {
background-color: var(--ifm-pre-background);
border-radius: 6px;
margin-bottom: 8px;
overflow: hidden;
}
.artifactHeader_ahxb {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 10px;
background-color: var(--ifm-color-emphasis-200);
font-size: 0.8rem;
}
.artifactName_AKFJ {
font-family: var(--ifm-font-family-monospace);
font-weight: bold;
}
.copyButton_j__V {
font-size: 0.7rem;
padding: 2px 6px;
background-color: var(--ifm-color-emphasis-300);
border: none;
border-radius: 4px;
cursor: pointer;
}
.artifactContent_yMXf {
margin: 0;
padding: 10px;
font-size: 0.85rem;
overflow-x: auto;
max-height: 200px;
}
.loadingChat_VvwS {
padding: 20px;
text-align: center;
border: 1px solid var(--ifm-color-emphasis-300);
border-radius: 8px;
background-color: var(--ifm-background-surface-color);
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.codeBlockContainer_Ckt0 {
background: var(--prism-background-color);
color: var(--prism-color);
margin-bottom: var(--ifm-leading);
box-shadow: var(--ifm-global-shadow-lw);
border-radius: var(--ifm-code-border-radius);
}
/* Futuristic AI Agents Hub Styles */
:root {
--neon-blue: #00d4ff;
--neon-purple: #bf00ff;
--neon-green: #00ff88;
--neon-orange: #ff6b35;
--neon-pink: #ff0080;
--dark-bg: #0a0a0f;
--card-bg: rgba(15, 15, 25, 0.8);
--glass-bg: rgba(255, 255, 255, 0.05);
--border-glow: rgba(0, 212, 255, 0.3);
--text-primary: #ffffff;
--text-secondary: #b8bcc8;
--text-accent: var(--neon-blue);
}
.hubContainer_Da7k {
background:
radial-gradient(circle at 20% 80%, rgba(0, 212, 255, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(191, 0, 255, 0.15) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(0, 255, 136, 0.1) 0%, transparent 50%),
radial-gradient(circle at 60% 80%, rgba(255, 107, 53, 0.1) 0%, transparent 50%),
linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
min-height: 100vh;
position: relative;
overflow: hidden;
}
.hubContainer_Da7k::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
repeating-linear-gradient(
90deg,
transparent,
transparent 98px,
rgba(0, 212, 255, 0.03) 100px
),
repeating-linear-gradient(
0deg,
transparent,
transparent 98px,
rgba(0, 212, 255, 0.03) 100px
);
pointer-events: none;
}
/* Quick Actions */
.quickActionsRow_Xp9h {
display: flex;
justify-content: center;
margin-bottom: 2rem;
padding: 1rem;
}
.loggingButton_QE7w {
background: linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-purple) 100%);
border: none;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
-webkit-text-decoration: none;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.loggingButton_QE7w:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
color: white;
-webkit-text-decoration: none;
text-decoration: none;
}
.loggingButton_QE7w:active {
transform: translateY(0);
}
.heroSection_uPPD {
text-align: center;
padding: 4rem 2rem;
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.heroTitle_IaG_ {
font-size: clamp(3rem, 8vw, 5rem);
font-weight: 900;
margin-bottom: 1.5rem;
background: linear-gradient(
45deg,
var(--neon-blue) 0%,
var(--neon-purple) 25%,
var(--neon-green) 50%,
var(--neon-orange) 75%,
var(--neon-pink) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 50px rgba(0, 212, 255, 0.6);
position: relative;
letter-spacing: -0.03em;
animation: titleGlow_k4l2 3s ease-in-out infinite alternate;
}
@keyframes titleGlow_k4l2 {
from {
filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.5));
}
to {
filter: drop-shadow(0 0 40px rgba(191, 0, 255, 0.8));
}
}
.heroSubtitle_TRrA {
font-size: 1.4rem;
color: var(--text-secondary);
margin-bottom: 3rem;
font-weight: 300;
letter-spacing: 0.5px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
.networkStatus_zAB5 {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: var(--glass-bg);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid var(--border-glow);
border-radius: 50px;
padding: 0.75rem 1.5rem;
margin-bottom: 4rem;
animation: pulse_Quwx 2s ease-in-out infinite;
}
@keyframes pulse_Quwx {
0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); }
50% { box-shadow: 0 0 30px rgba(0, 212, 255, 0.6); }
}
.statusDot_rNG5 {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--neon-green);
box-shadow: 0 0 10px var(--neon-green);
animation: statusBlink_nYDh 1.5s ease-in-out infinite;
}
@keyframes statusBlink_nYDh {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0.5; }
}
.statusText_bpF1 {
color: var(--text-primary);
font-weight: 500;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Agent Grid */
.agentGrid_D4lG {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2.5rem;
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
.agentCard_n8yF {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid var(--border-glow);
border-radius: 24px;
padding: 2.5rem;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
height: 100%;
display: flex;
flex-direction: column;
}
.agentCard_n8yF::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.1),
transparent
);
transition: left 0.6s ease;
}
.agentCard_n8yF:hover::before {
left: 100%;
}
.agentCard_n8yF:hover {
transform: translateY(-12px) scale(1.03);
border-color: var(--neon-blue);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.4),
0 0 40px rgba(0, 212, 255, 0.4),
inset 0 0 40px rgba(0, 212, 255, 0.1);
}
.agentCard_n8yF:nth-child(1) { --agent-color: var(--neon-blue); }
.agentCard_n8yF:nth-child(2) { --agent-color: var(--neon-purple); }
.agentCard_n8yF:nth-child(3) { --agent-color: var(--neon-green); }
.agentCard_n8yF:nth-child(4) { --agent-color: var(--neon-orange); }
.agentCard_n8yF:nth-child(5) { --agent-color: var(--neon-pink); }
.agentCard_n8yF:hover {
border-color: var(--agent-color);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.4),
0 0 40px var(--agent-color),
inset 0 0 40px rgba(255, 255, 255, 0.05);
}
.agentHeader_IbqA {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
}
.agentIcon_vVyT {
font-size: 3.5rem;
margin-right: 1rem;
background: linear-gradient(45deg, var(--agent-color), rgba(255, 255, 255, 0.8));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 10px var(--agent-color));
}
.agentTitle_bFzl {
font-size: 1.6rem;
font-weight: 700;
color: var(--text-primary);
margin: 0;
background: linear-gradient(45deg, var(--agent-color), var(--text-primary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.agentDescription_EFNb {
color: var(--text-secondary);
font-size: 1rem;
line-height: 1.6;
margin-bottom: 2rem;
flex-grow: 1;
}
.agentFeatures_XaTy {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 2rem;
}
.featureTag_vuqx {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 500;
}
.agentButton_YqR1 {
background: linear-gradient(45deg, var(--agent-color), rgba(255, 255, 255, 0.2));
border: none;
color: var(--text-primary);
padding: 1rem 2rem;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
-webkit-text-decoration: none;
text-decoration: none;
display: inline-block;
text-align: center;
margin-top: auto;
}
.agentButton_YqR1::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.agentButton_YqR1:hover::before {
left: 100%;
}
.agentButton_YqR1:hover {
transform: translateY(-3px);
box-shadow:
0 10px 25px rgba(0, 0, 0, 0.3),
0 0 25px var(--agent-color);
-webkit-text-decoration: none;
text-decoration: none;
color: var(--text-primary);
}
/* Features Section */
.featuresSection_M3mL {
max-width: 1200px;
margin: 6rem auto 0;
padding: 4rem 2rem;
text-align: center;
}
.featuresTitle_aMri {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
background: linear-gradient(45deg, var(--neon-blue), var(--neon-green));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.featuresSubtitle_eqQo {
color: var(--text-secondary);
font-size: 1.1rem;
margin-bottom: 3rem;
line-height: 1.6;
}
.featuresGrid_a0r5 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-bottom: 4rem;
}
.featureCard_KQYe {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 2rem;
text-align: left;
transition: all 0.3s ease;
}
.featureCard_KQYe:hover {
transform: translateY(-5px);
border-color: var(--neon-blue);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
.featureIcon_Guca {
font-size: 2.5rem;
margin-bottom: 1rem;
display: block;
color: var(--neon-blue);
filter: drop-shadow(0 0 10px var(--neon-blue));
}
.featureTitle_dyts {
font-size: 1.2rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.featureDescription_Rdyo {
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.5;
}
/* Assistant Section */
.assistantSection_bSgA {
max-width: 1000px;
margin: 6rem auto 0;
padding: 0 2rem;
}
.assistantCard_1UHU {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid var(--border-glow);
border-radius: 24px;
padding: 3rem;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3),
0 0 30px rgba(0, 212, 255, 0.2);
animation: slideInUp_dSdp 0.6s ease-out;
}
@keyframes slideInUp_dSdp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.assistantHeader_eorE {
text-align: center;
margin-bottom: 2rem;
}
.assistantTitle_WfDR {
font-size: 2rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.assistantDescription_DD76 {
color: var(--text-secondary);
font-size: 1.1rem;
margin-bottom: 2rem;
line-height: 1.6;
}
.chatContainer_liPy {
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 1.5rem;
min-height: 500px;
position: relative;
}
.loading_fJhA {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 400px;
color: var(--text-secondary);
}
.loadingSpinner_sJie {
width: 50px;
height: 50px;
border: 3px solid rgba(0, 212, 255, 0.1);
border-top: 3px solid var(--neon-blue);
border-radius: 50%;
animation: spin_yEKi 1s linear infinite;
margin-bottom: 1rem;
}
@keyframes spin_yEKi {
to { transform: rotate(360deg); }
}
/* Floating Animation */
.hubContainer_Da7k::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(3px 3px at 40px 60px, rgba(0, 212, 255, 0.4), transparent),
radial-gradient(3px 3px at 80px 120px, rgba(191, 0, 255, 0.4), transparent),
radial-gradient(2px 2px at 160px 40px, rgba(0, 255, 136, 0.4), transparent),
radial-gradient(2px 2px at 200px 160px, rgba(255, 107, 53, 0.4), transparent),
radial-gradient(1px 1px at 320px 80px, rgba(255, 0, 128, 0.4), transparent);
background-repeat: repeat;
background-size: 200px 200px;
animation: float_xlYP 25s linear infinite;
opacity: 0.6;
pointer-events: none;
}
@keyframes float_xlYP {
0% { transform: translateY(0px) translateX(0px); }
25% { transform: translateY(-15px) translateX(15px); }
50% { transform: translateY(-10px) translateX(-10px); }
75% { transform: translateY(-20px) translateX(5px); }
100% { transform: translateY(0px) translateX(0px); }
}
/* Course Manager Button */
.courseManagerCard_tGoK {
background: linear-gradient(135deg, var(--neon-purple), var(--neon-blue));
border: 2px solid var(--neon-purple);
margin-top: 2rem;
}
.courseManagerCard_tGoK:hover {
border-color: var(--neon-green);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.4),
0 0 40px var(--neon-green),
inset 0 0 40px rgba(0, 255, 136, 0.1);
}
.courseManagerCard_tGoK .agentIcon_vVyT {
background: linear-gradient(45deg, var(--neon-green), var(--text-primary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 15px var(--neon-green));
}
.courseManagerCard_tGoK .agentTitle_bFzl {
background: linear-gradient(45deg, var(--neon-green), var(--text-primary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.courseManagerCard_tGoK .agentButton_YqR1 {
background: linear-gradient(45deg, var(--neon-green), rgba(255, 255, 255, 0.2));
border: 1px solid var(--neon-green);
}
.courseManagerCard_tGoK .agentButton_YqR1:hover {
box-shadow:
0 10px 25px rgba(0, 0, 0, 0.3),
0 0 25px var(--neon-green);
}
/* Admin Section */
.adminSection_Y74l {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 100;
}
.adminButton__zsK {
background: rgba(0, 0, 0, 0.8);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50px;
padding: 0.75rem 1.5rem;
color: var(--text-secondary);
-webkit-text-decoration: none;
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.adminButton__zsK:hover {
border-color: var(--neon-blue);
color: var(--neon-blue);
box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
-webkit-text-decoration: none;
text-decoration: none;
}
/* Admin Dashboard Styles */
.adminStatCard_X0wY {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid var(--border-glow);
border-radius: 16px;
padding: 1.5rem;
text-align: center;
min-width: 120px;
transition: all 0.3s ease;
}
.adminStatCard_X0wY:hover {
border-color: var(--neon-blue);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.adminStatNumber_ZR7O {
font-size: 2.5rem;
font-weight: 900;
color: var(--neon-blue);
margin-bottom: 0.5rem;
text-shadow: 0 0 20px var(--neon-blue);
}
.adminStatLabel_xvWe {
color: var(--text-secondary);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
}
.adminTabsContainer_tVTN {
display: flex;
gap: 0.5rem;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-glow);
border-radius: 16px;
padding: 0.5rem;
position: relative;
overflow: hidden;
}
.adminTabsContainer_tVTN::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
rgba(0, 212, 255, 0.05) 12px
);
pointer-events: none;
}
.adminTabButton_f3WF {
background: transparent;
border: none;
color: var(--text-secondary);
padding: 1rem 1.5rem;
border-radius: 12px;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.adminTabButton_f3WF::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.6s ease;
}
.adminTabButton_f3WF:hover::before {
left: 100%;
}
.adminTabButton_f3WF:hover {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.05);
}
.adminTabButton_f3WF.adminTabActive_KQE7 {
background: linear-gradient(45deg, var(--neon-blue), rgba(255, 255, 255, 0.1));
color: var(--text-primary);
box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3);
}
.tabIcon_lhcB {
font-size: 1.2rem;
opacity: 0.8;
}
.tabIndicator_Z9Iw {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: var(--neon-blue);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.adminTabActive_KQE7 .tabIndicator_Z9Iw {
transform: scaleX(1);
}
.adminContentContainer_cESc {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid var(--border-glow);
border-radius: 24px;
overflow: hidden;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3),
0 0 30px rgba(0, 212, 255, 0.1);
}
.adminPanel_GCA9 {
position: relative;
overflow: hidden;
}
.adminPanelHeader_Nin7 {
background: rgba(0, 0, 0, 0.4);
padding: 2rem;
border-bottom: 1px solid var(--border-glow);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.adminPanelTitle_xf_h {
font-size: 1.8rem;
font-weight: 700;
color: var(--text-primary);
margin: 0;
background: linear-gradient(45deg, var(--neon-blue), var(--neon-green));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.refreshButton_s29y {
background: linear-gradient(45deg, var(--neon-green), rgba(255, 255, 255, 0.2));
border: 1px solid var(--neon-green);
color: var(--text-primary);
padding: 0.75rem 1.5rem;
border-radius: 12px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.refreshButton_s29y:hover {
transform: translateY(-2px);
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.3),
0 0 20px var(--neon-green);
}
.refreshButton_s29y:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.agentSelector_R2M0 {
display: flex;
align-items: center;
gap: 1rem;
}
.agentSelector_R2M0 label {
color: var(--text-secondary);
font-size: 0.9rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.adminSelect_ik_e {
background: rgba(0, 0, 0, 0.5);
border: 1px solid var(--border-glow);
border-radius: 8px;
color: var(--text-primary);
padding: 0.5rem 1rem;
font-size: 0.9rem;
min-width: 180px;
transition: all 0.3s ease;
}
.adminSelect_ik_e:focus {
outline: none;
border-color: var(--neon-blue);
box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}
.adminSelect_ik_e option {
background: var(--dark-bg);
color: var(--text-primary);
padding: 0.5rem;
}
/* Documentation Styles */
.docContent_S8s3 {
padding: 2rem;
color: var(--text-primary);
line-height: 1.6;
}
.docContent_S8s3 h2 {
color: var(--neon-blue);
font-size: 2rem;
margin-bottom: 1.5rem;
margin-top: 2rem;
}
.docContent_S8s3 h3 {
color: var(--neon-green);
font-size: 1.5rem;
margin-bottom: 1rem;
margin-top: 1.5rem;
}
.docContent_S8s3 h4 {
color: var(--text-primary);
font-size: 1.2rem;
margin-bottom: 0.75rem;
margin-top: 1rem;
}
.docContent_S8s3 p {
margin-bottom: 1rem;
color: var(--text-secondary);
}
.architectureDiagram_S8Ra {
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-glow);
border-radius: 12px;
padding: 2rem;
margin: 2rem 0;
}
.agentOverview_UlAt {
margin: 2rem 0;
}
.agentOverview_UlAt .agentGrid_D4lG {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.agentOverview_UlAt .agentCard_n8yF {
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 1.5rem;
transition: all 0.3s ease;
}
.agentOverview_UlAt .agentCard_n8yF:hover {
border-color: var(--neon-blue);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.agentOverview_UlAt .agentCard_n8yF h4 {
color: var(--neon-blue);
margin-bottom: 1rem;
font-size: 1.1rem;
}
.agentOverview_UlAt .agentCard_n8yF p {
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.designThinking_Sf8i {
background: rgba(0, 212, 255, 0.05);
border: 1px solid rgba(0, 212, 255, 0.2);
border-radius: 12px;
padding: 2rem;
margin: 2rem 0;
}
.apiMethods_NeDU {
margin: 2rem 0;
}
.methodGrid_qk33 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.methodCard_wU6v {
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-glow);
border-radius: 12px;
padding: 1.5rem;
transition: all 0.3s ease;
}
.methodCard_wU6v:hover {
border-color: var(--neon-green);
transform: translateY(-3px);
}
.methodCard_wU6v h4 {
color: var(--neon-green);
margin-bottom: 0.5rem;
}
.methodCard_wU6v p {
color: var(--text-secondary);
font-size: 0.9rem;
margin-bottom: 1rem;
}
.methodCard_wU6v code {
background: rgba(0, 0, 0, 0.5);
color: var(--neon-orange);
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
}
.integrationPatterns_cIEC {
margin: 2rem 0;
}
.patternCard_tbRb {
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 2rem;
margin: 1.5rem 0;
}
.patternCard_tbRb h4 {
color: var(--neon-purple);
margin-bottom: 1rem;
}
.modelGrid_ww6y {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin: 1.5rem 0;
}
.modelCard_MQDB {
background: rgba(0, 0, 0, 0.4);
border: 1px solid var(--border-glow);
border-radius: 12px;
padding: 1.5rem;
transition: all 0.3s ease;
}
.modelCard_MQDB:hover {
border-color: var(--neon-purple);
transform: translateY(-3px);
}
.modelCard_MQDB h5 {
color: var(--neon-purple);
font-size: 1.2rem;
margin-bottom: 1rem;
}
.modelCard_MQDB p {
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.modelCard_MQDB strong {
color: var(--text-primary);
}
.modelComparison_eukW {
margin: 2rem 0;
}
.comparisonTable_hWI7 {
overflow-x: auto;
margin: 1.5rem 0;
}
.comparisonTable_hWI7 table {
width: 100%;
border-collapse: collapse;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-glow);
border-radius: 12px;
overflow: hidden;
}
.comparisonTable_hWI7 th,
.comparisonTable_hWI7 td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.comparisonTable_hWI7 th {
background: rgba(0, 212, 255, 0.1);
color: var(--neon-blue);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 0.9rem;
}
.comparisonTable_hWI7 td {
color: var(--text-secondary);
font-size: 0.9rem;
}
.comparisonTable_hWI7 tr:hover {
background: rgba(255, 255, 255, 0.02);
}
/* Code block styling improvements */
.docContent_S8s3 pre {
background: rgba(0, 0, 0, 0.6) !important;
border: 1px solid var(--border-glow) !important;
border-radius: 8px !important;
margin: 1rem 0 !important;
}
.docContent_S8s3 code {
background: rgba(0, 0, 0, 0.5) !important;
color: var(--neon-green) !important;
padding: 0.2rem 0.4rem !important;
border-radius: 4px !important;
}
/* Tab content styling */
.docContent_S8s3 [role="tabpanel"] {
margin-top: 1.5rem;
}
/* Lists styling */
.docContent_S8s3 ul,
.docContent_S8s3 ol {
margin: 1rem 0;
padding-left: 2rem;
}
.docContent_S8s3 li {
margin-bottom: 0.5rem;
color: var(--text-secondary);
}
/* Link styling */
.docContent_S8s3 a {
color: var(--neon-blue);
-webkit-text-decoration: none;
text-decoration: none;
transition: color 0.3s ease;
}
.docContent_S8s3 a:hover {
color: var(--neon-green);
-webkit-text-decoration: underline;
text-decoration: underline;
}
/* Responsive Design */
@media (max-width: 1200px) {
.agentGrid_D4lG {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.adminTabsContainer_tVTN {
flex-direction: column;
}
.adminTabButton_f3WF {
justify-content: center;
}
.methodGrid_qk33,
.modelGrid_ww6y {
grid-template-columns: 1fr;
}
.docContent_S8s3 {
padding: 1rem;
}
}
@media (max-width: 768px) {
.heroSection_uPPD {
padding: 2rem 1rem;
}
.heroTitle_IaG_ {
font-size: 2.5rem;
}
.heroSubtitle_TRrA {
font-size: 1.1rem;
}
.agentGrid_D4lG {
grid-template-columns: 1fr;
padding: 0 1rem;
gap: 1.5rem;
}
.agentCard_n8yF {
padding: 2rem 1.5rem;
}
.featuresSection_M3mL,
.assistantSection_bSgA {
padding: 2rem 1rem;
}
.assistantCard_1UHU {
padding: 2rem 1.5rem;
}
.featuresGrid_a0r5 {
grid-template-columns: 1fr;
}
.adminSection_Y74l {
bottom: 1rem;
right: 1rem;
}
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.codeBlock_bY9V {
--ifm-pre-background: var(--prism-background-color);
margin: 0;
padding: 0;
}
.codeBlockStandalone_MEMb {
padding: 0;
}
.codeBlockLines_e6Vv {
font: inherit;
/* rtl:ignore */
float: left;
min-width: 100%;
padding: var(--ifm-pre-padding);
}
.codeBlockLinesWithNumbering_o6Pm {
display: table;
padding: var(--ifm-pre-padding) 0;
}
@media print {
.codeBlockLines_e6Vv {
white-space: pre-wrap;
}
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/* Intentionally has zero specificity, so that to be able to override
the background in custom CSS file due bug https://github.com/facebook/docusaurus/issues/3678 */
:where(:root) {
--docusaurus-highlighted-code-line-bg: rgb(72 77 91);
}
:where([data-theme='dark']) {
--docusaurus-highlighted-code-line-bg: rgb(100 100 100);
}
.theme-code-block-highlighted-line {
background-color: var(--docusaurus-highlighted-code-line-bg);
display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
}
.codeLine_lJS_ {
display: table-row;
counter-increment: line-count;
}
.codeLineNumber_Tfdd {
display: table-cell;
text-align: right;
width: 1%;
position: sticky;
left: 0;
padding: 0 var(--ifm-pre-padding);
background: var(--ifm-pre-background);
overflow-wrap: normal;
}
.codeLineNumber_Tfdd::before {
content: counter(line-count);
opacity: 0.4;
}
.theme-code-block-highlighted-line .codeLineNumber_Tfdd::before {
opacity: 0.8;
}
.codeLineContent_feaV {
padding-right: var(--ifm-pre-padding);
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.theme-code-block:hover .copyButtonCopied_Vdqa {
opacity: 1 !important;
}
.copyButtonIcons_IEyt {
position: relative;
width: 1.125rem;
height: 1.125rem;
}
.copyButtonIcon_TrPX,
.copyButtonSuccessIcon_cVMy {
position: absolute;
top: 0;
left: 0;
fill: currentColor;
opacity: inherit;
width: inherit;
height: inherit;
transition: all var(--ifm-transition-fast) ease;
}
.copyButtonSuccessIcon_cVMy {
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.33);
opacity: 0;
color: #00d600;
}
.copyButtonCopied_Vdqa .copyButtonIcon_TrPX {
transform: scale(0.33);
opacity: 0;
}
.copyButtonCopied_Vdqa .copyButtonSuccessIcon_cVMy {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
transition-delay: 0.075s;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.wordWrapButtonIcon_b1P5 {
width: 1.2rem;
height: 1.2rem;
}
.wordWrapButtonEnabled_uzNF .wordWrapButtonIcon_b1P5 {
color: var(--ifm-color-primary);
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.buttonGroup_M5ko {
display: flex;
column-gap: 0.2rem;
position: absolute;
/* rtl:ignore */
right: calc(var(--ifm-pre-padding) / 2);
top: calc(var(--ifm-pre-padding) / 2);
}
.buttonGroup_M5ko button {
display: flex;
align-items: center;
background: var(--prism-background-color);
color: var(--prism-color);
border: 1px solid var(--ifm-color-emphasis-300);
border-radius: var(--ifm-global-radius);
padding: 0.4rem;
line-height: 0;
transition: opacity var(--ifm-transition-fast) ease-in-out;
opacity: 0;
}
.buttonGroup_M5ko button:focus-visible,
.buttonGroup_M5ko button:hover {
opacity: 1 !important;
}
.theme-code-block:hover .buttonGroup_M5ko button {
opacity: 0.4;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.codeBlockContent_QJqH {
position: relative;
/* rtl:ignore */
direction: ltr;
border-radius: inherit;
}
.codeBlockTitle_OeMC {
border-bottom: 1px solid var(--ifm-color-emphasis-300);
font-size: var(--ifm-code-font-size);
font-weight: 500;
padding: 0.75rem var(--ifm-pre-padding);
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.codeBlockTitle_OeMC + .codeBlockContent_QJqH .codeBlock_a8dz {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.tabItem_Ymn6 > *:last-child {
margin-bottom: 0;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.tabList__CuJ {
margin-bottom: var(--ifm-leading);
}
.tabItem_LNqP {
margin-top: 0 !important;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
:root {
--docusaurus-tag-list-border: var(--ifm-color-emphasis-300);
}
.tag_zVej {
border: 1px solid var(--docusaurus-tag-list-border);
transition: border var(--ifm-transition-fast);
}
.tag_zVej:hover {
--docusaurus-tag-list-border: var(--ifm-link-color);
-webkit-text-decoration: none;
text-decoration: none;
}
.tagRegular_sFm0 {
border-radius: var(--ifm-global-radius);
padding: 0.2rem 0.5rem 0.3rem;
font-size: 90%;
}
.tagWithCount_h2kH {
display: flex;
align-items: center;
position: relative;
padding: 0 0.5rem 0 1rem;
border-left: 0;
}
.tagWithCount_h2kH::before,
.tagWithCount_h2kH::after {
content: '';
position: absolute;
top: 50%;
border: 1px solid var(--docusaurus-tag-list-border);
transition: inherit;
}
.tagWithCount_h2kH::before {
right: 100%;
transform: translate(50%, -50%) rotate(-45deg);
width: 1.18rem;
height: 1.18rem;
border-right: 0;
border-bottom: 0;
}
.tagWithCount_h2kH::after {
left: 0;
transform: translateY(-50%);
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
}
.tagWithCount_h2kH span {
background: var(--ifm-color-secondary);
color: var(--ifm-color-black);
font-size: 0.7rem;
line-height: 1.2;
border-radius: var(--ifm-global-radius);
padding: 0.1rem 0.4rem;
margin-left: 0.3rem;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.tag_Nnez {
display: inline-block;
margin: 0.5rem 0.5rem 0 1rem;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
CSS variables, meant to be overridden by final theme
*/
.details_lb9f {
--docusaurus-details-summary-arrow-size: 0.38rem;
--docusaurus-details-transition: transform 200ms ease;
--docusaurus-details-decoration-color: grey;
}
.details_lb9f > summary {
position: relative;
cursor: pointer;
list-style: none;
padding-left: 1rem;
}
/* TODO: deprecation, need to remove this after Safari will support `::marker` */
.details_lb9f > summary::-webkit-details-marker {
display: none;
}
.details_lb9f > summary::before {
position: absolute;
top: 0.45rem;
left: 0;
/* CSS-only Arrow */
content: '';
border-width: var(--docusaurus-details-summary-arrow-size);
border-style: solid;
border-color: transparent transparent transparent
var(--docusaurus-details-decoration-color);
/* Arrow rotation anim */
transform: rotate(0deg);
transition: var(--docusaurus-details-transition);
transform-origin: calc(var(--docusaurus-details-summary-arrow-size) / 2) 50%;
}
/* When JS disabled/failed to load: we use the open property for arrow animation: */
.details_lb9f[open]:not(.isBrowser_bmU9) > summary::before,
.details_lb9f[data-collapsed='false'].isBrowser_bmU9 > summary::before {
transform: rotate(90deg);
}
.collapsibleContent_i85q {
margin-top: 1rem;
border-top: 1px solid var(--docusaurus-details-decoration-color);
padding-top: 1rem;
}
.collapsibleContent_i85q p:last-child {
margin-bottom: 0;
}
.details_lb9f > summary > p:last-child {
margin-bottom: 0;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.tags_jXut {
display: inline;
}
.tag_QGVx {
margin: 0 0.4rem 0.5rem 0;
display: inline-block;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.iconEdit_Z9Sw {
margin-right: 0.3em;
vertical-align: sub;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.details_b_Ee {
--docusaurus-details-decoration-color: var(--ifm-alert-border-color);
--docusaurus-details-transition: transform var(--ifm-transition-fast) ease;
margin: 0 0 var(--ifm-spacing-vertical);
border: 1px solid var(--ifm-alert-border-color);
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.lastUpdated_JAkA {
font-size: smaller;
font-style: italic;
margin-top: 0.2rem;
}
@media (min-width: 997px) {
.lastUpdated_JAkA {
text-align: right;
}
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.tocCollapsibleButton_TO0P {
font-size: inherit;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.4rem 0.8rem;
width: 100%;
}
.tocCollapsibleButton_TO0P::after {
content: '';
background: var(--ifm-menu-link-sublist-icon) 50% 50% / 2rem 2rem no-repeat;
filter: var(--ifm-menu-link-sublist-icon-filter);
height: 1.25rem;
width: 1.25rem;
transform: rotate(180deg);
transition: transform var(--ifm-transition-fast);
}
.tocCollapsibleButtonExpanded_MG3E::after {
transform: none;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.tocCollapsible_ETCw {
background-color: var(--ifm-menu-color-background-active);
border-radius: var(--ifm-global-radius);
margin: 1rem 0;
}
.tocCollapsibleContent_vkbj > ul {
border-left: none;
border-top: 1px solid var(--ifm-color-emphasis-300);
padding: 0.2rem 0;
font-size: 15px;
}
.tocCollapsibleContent_vkbj ul li {
margin: 0.4rem 0.8rem;
}
.tocCollapsibleContent_vkbj a {
display: block;
}
.tocCollapsibleExpanded_sAul {
transform: none;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
@media (min-width: 997px) {
/* Prevent hydration FOUC, as the mobile TOC needs to be server-rendered */
.tocMobile_ITEo {
display: none;
}
}
@media print {
.tocMobile_ITEo {
display: none;
}
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.containsTaskList_mC6p {
list-style: none;
}
:not(.containsTaskList_mC6p > li) > .containsTaskList_mC6p {
padding-left: 0;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.img_ev3q {
height: auto;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.admonition_xJq3 {
margin-bottom: 1em;
}
.admonitionHeading_Gvgb {
font: var(--ifm-heading-font-weight) var(--ifm-h5-font-size) /
var(--ifm-heading-line-height) var(--ifm-heading-font-family);
text-transform: uppercase;
}
/* Heading alone without content (does not handle fragment content) */
.admonitionHeading_Gvgb:not(:last-child) {
margin-bottom: 0.3rem;
}
.admonitionHeading_Gvgb code {
text-transform: none;
}
.admonitionIcon_Rf37 {
display: inline-block;
vertical-align: middle;
margin-right: 0.4em;
}
.admonitionIcon_Rf37 svg {
display: inline-block;
height: 1.6em;
width: 1.6em;
fill: var(--ifm-alert-foreground-color);
}
.admonitionContent_BuS1 > :last-child {
margin-bottom: 0;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.tableOfContents_bqdL {
max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
overflow-y: auto;
position: sticky;
top: calc(var(--ifm-navbar-height) + 1rem);
}
@media (max-width: 996px) {
.tableOfContents_bqdL {
display: none;
}
.docItemContainer_F8PC {
padding: 0 0.3rem;
}
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.container_lyt7 {
max-width: 100%;
}
.container_lyt7 > svg {
max-width: 100%;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.breadcrumbHomeIcon_YNFT {
position: relative;
top: 1px;
vertical-align: top;
height: 1.1rem;
width: 1.1rem;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.breadcrumbsContainer_Z_bl {
--ifm-breadcrumb-size-multiplier: 0.8;
margin-bottom: 0.8rem;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
@media (min-width: 997px) {
.generatedIndexPage_vN6x {
max-width: 75% !important;
}
}
/* Duplicated from .markdown h1 */
.title_kItE {
--ifm-h1-font-size: 3rem;
margin-bottom: calc(1.25 * var(--ifm-leading));
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.docItemContainer_Djhp header + *,
.docItemContainer_Djhp article > *:first-child {
margin-top: 0;
}
@media (min-width: 997px) {
.docItemCol_VOVn {
max-width: 75% !important;
}
}
.editButton_IH6l {
display: inline-block;
background-color: #007bff;
color: white;
padding: 8px 16px;
border-radius: 4px;
margin-top: 20px;
-webkit-text-decoration: none;
text-decoration: none;
font-weight: 500;
transition: background-color 0.2s;
}
.editButton_IH6l:hover {
background-color: #0056b3;
color: white;
-webkit-text-decoration: none;
text-decoration: none;
}
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.mdxPageWrapper_j9I6 {
justify-content: center;
}