/**
* 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]) {
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 {
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);
text-decoration: none;
}
.breadcrumbs__link:any-link:hover {
background: var(--ifm-breadcrumb-item-background-active);
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. */
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);
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);
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 {
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);
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);
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 {
-webkit-appearance: none;
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: 0.9rem;
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 {
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);
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;
}
.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.
*/
@font-face {
font-family: "Lexend";
src: url("../../../../resources/zcloud-landing/fonts/lexend/Lexend-Bold.woff2")
format("woff2"),
url("../../../../resources/zcloud-landing/fonts/lexend/Lexend-Bold.woff")
format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Lexend";
src: url("../../../../resources/zcloud-landing/fonts/lexend/Lexend-Medium.woff2")
format("woff2"),
url("../../../../resources/zcloud-landing/fonts/lexend/Lexend-Medium.woff")
format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Lexend";
src: url("../../../../resources/zcloud-landing/fonts/lexend/Lexend-Light.woff2")
format("woff2"),
url("../../../../resources/zcloud-landing/fonts/lexend/Lexend-Light.woff")
format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Lexend";
src: url("../../../../resources/zcloud-landing/fonts/lexend/Lexend-Thin.woff2")
format("woff2"),
url("../../../../resources/zcloud-landing/fonts/lexend/Lexend-Thin.woff")
format("woff");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Lexend";
src: url("../../../../resources/zcloud-landing/fonts/lexend/Lexend-ExtraBold.woff2")
format("woff2"),
url("../../../../resources/zcloud-landing/fonts/lexend/Lexend-ExtraBold.woff")
format("woff");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Lexend";
src: url("../../../../resources/zcloud-landing/fonts/lexend/Lexend-Regular.woff2")
format("woff2"),
url("../../../../resources/zcloud-landing/fonts/lexend/Lexend-Regular.woff")
format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Lexend";
src: url("../../../../resources/zcloud-landing/fonts/lexend/Lexend-SemiBold.woff2")
format("woff2"),
url("../../../../resources/zcloud-landing/fonts/lexend/Lexend-SemiBold.woff")
format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Maitree";
src: url("../../../../resources/zcloud-landing/fonts/maitree/Maitree-SemiBold.woff2")
format("woff2"),
url("../../../../resources/zcloud-landing/fonts/maitree/Maitree-SemiBold.woff")
format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Maitree";
src: url("../../../../resources/zcloud-landing/fonts/maitree/Maitree-Bold.woff2")
format("woff2"),
url("../../../../resources/zcloud-landing/fonts/maitree/Maitree-Bold.woff")
format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Maitree";
src: url("../../../../resources/zcloud-landing/fonts/maitree/Maitree.woff2")
format("woff2"),
url("../../../../resources/zcloud-landing/fonts/maitree/Maitree.woff")
format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Maitree";
src: url("../../../../resources/zcloud-landing/fonts/maitree/Maitree-ExtraLight.woff2")
format("woff2"),
url("../../../../resources/zcloud-landing/fonts/maitree/Maitree-ExtraLight.woff")
format("woff");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Maitree";
src: url("../../../../resources/zcloud-landing/fonts/maitree/Maitree-Light.woff2")
format("woff2"),
url("../../../../resources/zcloud-landing/fonts/maitree/Maitree-Light.woff")
format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}
/* .navbar,
#ec-bubble {
display: none !important;
} */
.dropdown {
display: unset;
position: unset;
font-weight: unset;
}
#footer {
background: rgba(255, 255, 255, 0.48);
}
body a {
text-decoration: none !important;
}
@media (max-width: 768px) {
#footer {
font-size: 16px;
line-height: 24px;
}
}
@media (min-width: 769px) {
.heading .wraper {
padding-left: 30px;
}
#footer {
padding-top: 80px;
}
}
header ul,
footer ul,
.nav_sub ul {
list-style: none;
}
header ul,
footer ul,
header li,
footer li,
.nav_sub li {
margin: 0;
padding: 0;
}
.nav_sub ul {
margin: 0 !important;
}
/* You can override the default Infima variables here. */
:root {
--ifm-font-family-base: "Roboto";
--ifm-color-primary: #2e8555;
--ifm-color-primary-dark: #29784c;
--ifm-color-primary-darker: #277148;
--ifm-color-primary-darkest: #205d3b;
--ifm-color-primary-light: #33925d;
--ifm-color-primary-lighter: #359962;
--ifm-color-primary-lightest: #3cad6e;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}
/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme="dark"] {
--ifm-color-primary: #25c2a0;
--ifm-color-primary-dark: #21af90;
--ifm-color-primary-darker: #1fa588;
--ifm-color-primary-darkest: #1a8870;
--ifm-color-primary-light: #29d5b0;
--ifm-color-primary-lighter: #32d8b4;
--ifm-color-primary-lightest: #4fddbf;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
body:before {
top: 0;
}
:root {
--ifm-color-primary: #0b3fde;
--ifm-color-primary-dark: #123292;
--ifm-color-primary-darker: #08216f;
--ifm-color-primary-darkest: #031546;
--ifm-color-primary-light: #3358ca;
--ifm-color-primary-lighter: #5074e3;
--ifm-color-primary-lightest: #526bb9;
--ifm-code-font-size: 95%;
--ifm-menu-color-background-hover: unset;
--ifm-navbar-height: unset;
--ifm-navbar-shadow: unset;
--ifm-menu-color: #6c7089;
--ifm-h1-font-size: 40px;
--ifm-h2-font-size: 24px;
}
ins {
text-decoration-color: #1745cf !important;
}
@media (min-width: 997px) {
aside > div {
top: 72px !important;
}
.container {
max-width: calc(100vw - 300px) !important;
}
#footer .container {
max-width: 1260px !important;
}
#footer.footer_zns .row {
margin: 0 !important;
}
#footer.footer_zns .col {
flex: unset !important;
}
}
@media (max-width: 768px) {
.col {
padding: 0 16px !important;
}
p,
pre,
code {
white-space: break-spaces !important;
display: block !important;
float: none !important;
overflow: inherit !important;
}
main span {
white-space: break-spaces !important;
display: block !important;
float: none !important;
}
main .theme-code-block {
overflow: auto !important;
width: calc(100vw - 32px) !important;
}
main pre {
background-color: unset !important;
}
}
nav.thin-scrollbar {
padding: 0 !important;
}
nav .menu__link--active:not(.menu__link--sublist) {
background-color: unset;
border-left: 4px solid #0068ff !important;
color: #0068ff !important;
font-weight: 600 !important;
font-size: 14px !important;
line-height: 21px !important;
padding-left: 28px;
}
nav .menu__link {
font-size: 14px !important;
line-height: 21px !important;
}
.menu__link,
.menu__caret {
border-radius: 0 !important;
}
.theme-doc-breadcrumbs {
display: none !important;
}
.menu__link:hover {
/* background: rgba(15, 43, 230, 0.08); */
color: #69686d;
font-weight: 400 !important;
}
.menu__link {
padding: 10px 16px;
color: #8d8d8f;
}
.menu__list .menu__list {
padding-left: 0;
}
.menu {
font-weight: unset !important;
}
.markdown h1:first-child {
font-weight: 700;
font-size: 40px;
line-height: 48px;
color: #24252e;
font-family: "Roboto";
}
.markdown h2 {
font-size: 24px;
line-height: 28px;
font-weight: 700;
color: #343436;
font-family: "Roboto";
}
.markdown h3 {
font-size: 18px;
line-height: 24px;
color: #343436;
font-family: "Roboto";
}
.markdown h4 {
font-weight: bold;
}
.markdown a {
color: #0b3fde;
text-decoration: underline;
}
.markdown {
color: #343436;
font-size: 16px;
line-height: 24px;
}
.markdown strong {
color: #343436 !important;
}
.markdown a strong {
color: #0b3fde !important;
}
.table-of-contents {
padding: 0;
font-size: 13px;
line-height: 20px;
}
.col .thin-scrollbar {
position: sticky !important;
top: 72px !important;
}
.table-of-contents li {
margin: 0;
}
.table-of-contents ul:not(:first-child),
.table-of-contents ul:not(:first-child) li {
padding-left: 0;
}
.table-of-contents ul:not(:first-child) li > a {
padding: 6px 16px 6px 28px !important;
}
.table-of-contents li > a {
padding: 6px 16px;
}
.table-of-contents__link:hover {
background: rgba(15, 43, 230, 0.08);
color: #6c7089 !important;
}
.table-of-contents__link--active:hover {
color: #0f2be6 !important;
background: unset;
}
.table-of-contents__link--active {
color: #0f2be6 !important;
font-weight: 600;
}
.has-bottom-line {
border-bottom: 1px solid #c6c8d2 !important;
}
.ttl_sec {
margin-bottom: 0 !important;
}
@media (max-width: 997px) {
article > .theme-doc-toc-mobile {
display: none !important;
}
#footer .row .col {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
}
aside {
padding-top: 16px;
}
aside .menu__list-item:not(:first-child) {
margin-top: 0;
}
.menu__list-item > a {
padding: 6px 16px 6px 32px;
}
.menu__list-item-collapsible > .menu__link--active,
.menu__list-item-collapsible > .menu__link--active:hover,
.menu__list-item-collapsible > .menu__link,
.menu__list-item-collapsible > .menu__link:hover {
color: #343436 !important;
font-weight: 700 !important;
font-size: 16px !important;
line-height: 24px !important;
}
.menu__link--sublist-caret:after {
width: 16px;
height: 20px;
min-width: 16px;
min-height: 20px;
background-image: url("../../../../uploads/2023/06/19/ad37379c227da908d8e012ceb54dcfd8.png");
background-size: 16px 20px;
}
.menu__list-item-collapsible .menu__link--sublist-caret:after {
transform: unset;
}
.menu__list-item--collapsed
.menu__list-item-collapsible
.menu__link--sublist-caret:after {
transform: rotate(-90deg);
}
.modal_submit.modal_submit_consent {
display: none;
position: fixed;
bottom: 24px;
left: 24px;
top: unset;
margin: unset;
transform: unset;
min-height: -moz-fit-content;
min-height: fit-content;
z-index: 999;
padding: 24px;
width: 378px;
}
.modal_submit.modal_submit_consent .text {
color: #484a5b;
font-size: 14px;
font-style: normal;
font-weight: 300;
line-height: 22px;
}
.modal_submit.modal_submit_consent .ttl {
margin-top: 0;
text-align: left;
color: #484a5b;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 28px;
}
.modal_submit.modal_submit_consent #btn-accept-all {
font-family: "Roboto";
border: none;
}
.modal_submit.modal_submit_consent #btn-reject-all {
font-family: "Roboto";
color: #484a5b;
font-weight: 600;
font-size: 14px;
line-height: 22px;
background-color: #dddee4;
}
@media (max-width: 768px) {
.modal_submit.modal_submit_consent {
width: 274px !important;
}
.modal_submit.modal_submit_consent .btn_blue {
padding: 8px 16px !important;
}
}
.main-wrapper {
max-width: 1272px;
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}
@media (max-width: 768px) {
.main-wrapper {
width: 100%;
}
}
body {
background: #fff !important;
}
.docMainContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Main-styles-module {
& > .container {
padding: 24px 60px 40px;
}
}
@media screen and (max-width: 768px) {
.docMainContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Main-styles-module {
& > .container {
padding: 0px;
padding-top: 24px;
}
}
}
.theme-doc-sidebar-item-category-level-2 {
.menu__list-item-collapsible {
a {
font-size: 14px !important;
line-height: 21px !important;
padding: 6px 16px 6px 32px;
color: #8d8d8f !important;
font-weight: 400 !important;
&.menu__link--sublist-caret.menu__link--active,
&.menu__link--active {
background-color: unset;
border-left: 4px solid #0068ff !important;
color: #0068ff !important;
font-weight: 700 !important;
padding-left: 28px;
&:hover {
font-weight: 700 !important;
}
}
&:hover {
font-weight: 400 !important;
font-size: 14px !important;
line-height: 21px !important;
}
&::after {
display: none !important;
}
}
}
& > .menu__list {
.theme-doc-sidebar-item-link-level-3 {
a {
padding-left: 48px !important;
&.menu__link--active {
border-left: none !important;
font-weight: 500 !important;
color: #0068ff;
background: transparent;
}
}
}
}
.theme-doc-sidebar-item-category-level-3.menu__list-item {
padding-left: 16px !important;
a {
padding: 6px 16px 6px 32px;
}
.menu__list-item-collapsible {
a {
&.menu__link.menu__link--active {
border-left: transparent !important;
font-weight: 500 !important;
}
}
}
& > .menu__list {
padding-left: 32px !important;
.theme-doc-sidebar-item-link-level-4.menu__list-item {
border-left: 1px solid #8d8d8f !important;
position: relative;
margin-top: 0;
&::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 14px;
height: 1px;
background: #8d8d8f;
}
&:last-of-type {
&::before {
content: "";
position: absolute;
top: calc(50% + 1px);
bottom: 0;
left: -2px;
width: 10px;
background: #fff;
z-index: 10;
}
}
a {
padding-left: 24px !important;
&.menu__link.menu__link--active {
border-left: none !important;
font-weight: 400 !important;
background-color: transparent;
color: #0068ff;
}
}
}
}
}
}
.theme-doc-sidebar-item-link-level-2 {
margin-top: 0;
a {
background: transparent !important;
&.menu__link--active {
border-left: 4px solid #0068ff !important;
color: #0068ff !important;
font-weight: 700 !important;
padding-left: 28px;
}
}
}
.theme-back-to-top-button {
display: none;
}
/* .navbar {
padding: 0;
.container {
width: 100%;
max-width: unset !important;
padding: 0 16px;
}
} */
.main-wrapper .sec_notfound {
height: calc(100vh - 360px);
}
#header .navi .dropdown {
padding-right: 0 !important;
}
/* @media screen and (min-width: 997px) {
.main-wrapper .docItemCol_node_modules-\@docusaurus-theme-classic-lib-theme-DocItem-Layout-styles-module {
max-width: unset !important;
& + div {
display: none !important;
}
}
} */
.navbar > .container {
max-width: 1272px !important;
}
h1[id],
h2[id],
h3[id],
h4[id],
h5[id],
h6[id] {
scroll-margin-top: 90px;
}
main img,
main blockquote {
margin-bottom: 16px;
}
main img {
margin-bottom: 24px;
}
main h2 {
margin-top: 32px !important;
margin-bottom: 16px !important;
}
main p {
margin-bottom: 12px !important;
}
.slick-loading .slick-list {
background: #fff
url(../../../../gh/kenwheeler/slick@1.8.1/slick/ajax-loader.gif)
50% no-repeat;
}
@font-face {
font-family: slick;
font-weight: 400;
font-style: normal;
src: url(../../../../gh/kenwheeler/slick@1.8.1/slick/fonts/slick.eot);
src: url(../../../../gh/kenwheeler/slick@1.8.1/slick/fonts/slick.eot)
format("embedded-opentype"),
url(../../../../gh/kenwheeler/slick@1.8.1/slick/fonts/slick.woff)
format("woff"),
url(../../../../gh/kenwheeler/slick@1.8.1/slick/fonts/slick.ttf)
format("truetype"),
url(../../../../gh/kenwheeler/slick@1.8.1/slick/fonts/slick.svg)
format("svg");
}
/*
! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com
*/
*,
:after,
:before {
box-sizing: border-box;
border: 0 solid #e5e7eb;
}
:after,
:before {
--tw-content: "";
}
html {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-feature-settings: normal;
font-variation-settings: normal;
}
body {
margin: 0;
line-height: inherit;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
a {
color: inherit;
text-decoration: inherit;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
pre,
samp {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
Liberation Mono, Courier New, monospace;
font-feature-settings: normal;
font-variation-settings: normal;
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
button,
select {
text-transform: none;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
-webkit-appearance: button;
background-color: transparent;
background-image: none;
}
:-moz-focusring {
outline: auto;
}
:-moz-ui-invalid {
box-shadow: none;
}
progress {
vertical-align: baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
summary {
display: list-item;
}
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
}
fieldset,
legend {
padding: 0;
}
dialog {
padding: 0;
}
textarea {
resize: vertical;
}
input::placeholder,
textarea::placeholder {
opacity: 1;
color: #9ca3af;
}
[role="button"],
button {
cursor: pointer;
}
:disabled {
cursor: default;
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
display: block;
vertical-align: middle;
}
img,
video {
max-width: 100%;
height: auto;
}
[hidden] {
display: none;
}
*,
:after,
:before {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246/0.5);
--tw-ring-offset-shadow: 0 0 transparent;
--tw-ring-shadow: 0 0 transparent;
--tw-shadow: 0 0 transparent;
--tw-shadow-colored: 0 0 transparent;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246/0.5);
--tw-ring-offset-shadow: 0 0 transparent;
--tw-ring-shadow: 0 0 transparent;
--tw-shadow: 0 0 transparent;
--tw-shadow-colored: 0 0 transparent;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
.container {
width: 100%;
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}
.visible {
visibility: visible;
}
.static {
position: static;
}
.fixed {
position: fixed;
}
.m-auto {
margin: auto;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mb-32 {
margin-bottom: 8rem;
}
.mb-\[94px\] {
margin-bottom: 94px;
}
.mt-12 {
margin-top: 3rem;
}
.mt-16 {
margin-top: 4rem;
}
.mt-24 {
margin-top: 6rem;
}
.mt-32 {
margin-top: 8rem;
}
.mt-40 {
margin-top: 10rem;
}
.mt-48 {
margin-top: 12rem;
}
.mt-5 {
margin-top: 1.25rem;
}
.mt-60 {
margin-top: 15rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-80 {
margin-top: 20rem;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.flex {
display: flex;
}
.contents {
display: contents;
}
.hidden {
display: none;
}
.flex-shrink {
flex-shrink: 1;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.gap-12 {
gap: 3rem;
}
.gap-16 {
gap: 4rem;
}
.gap-24 {
gap: 6rem;
}
.gap-32 {
gap: 8rem;
}
.gap-4 {
gap: 1rem;
}
.gap-40 {
gap: 10rem;
}
.gap-8 {
gap: 2rem;
}
.gap-80 {
gap: 20rem;
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.p-4 {
padding: 1rem;
}
.p-40 {
padding: 10rem;
}
.px-24 {
padding-left: 6rem;
padding-right: 6rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-40 {
padding-left: 10rem;
padding-right: 10rem;
}
.px-80 {
padding-left: 20rem;
padding-right: 20rem;
}
.py-40 {
padding-top: 10rem;
padding-bottom: 10rem;
}
.py-44 {
padding-top: 11rem;
padding-bottom: 11rem;
}
.py-60 {
padding-top: 15rem;
padding-bottom: 15rem;
}
.pb-40 {
padding-bottom: 10rem;
}
.pt-24 {
padding-top: 6rem;
}
.pt-40 {
padding-top: 10rem;
}
.pt-48 {
padding-top: 12rem;
}
.pt-8 {
padding-top: 2rem;
}
.uppercase {
text-transform: uppercase;
}
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
var(--tw-sepia) var(--tw-drop-shadow);
}
@media (min-width: 768px) {
.md\:mt-0 {
margin-top: 0;
}
.md\:flex {
display: flex;
}
.md\:flex-row {
flex-direction: row;
}
}
.icon {
display: block;
position: relative;
}
.icon.sz-8 {
width: 8px;
height: 8px;
}
.icon.sz-12 {
width: 12px;
height: 12px;
}
.icon.sz-16 {
width: 16px;
height: 16px;
}
.icon.sz-20 {
width: 20px;
height: 20px;
}
.icon.sz-24 {
width: 24px;
height: 24px;
}
.icon.sz-30 {
width: 30px;
height: 30px;
}
.icon.sz-32 {
width: 32px;
height: 32px;
}
.icon.sz-40 {
width: 40px;
height: 40px;
}
.icon.sz-48 {
width: 48px;
height: 48px;
}
.icon.sz-60 {
width: 60px;
height: 60px;
}
.icon i {
display: block;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
background-size: contain;
}
.icon .imgDrop {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.icon .imgDrop.bdrs_50,
.icon .status {
border-radius: 50%;
}
.icon .status {
width: 4px;
height: 4px;
position: absolute;
top: 0;
display: block;
right: 0;
}
.icon .status.stt_red {
background-color: #ff4740;
}
.icon_color_w {
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0)
hue-rotate(231deg) brightness(103%) contrast(106%);
}
.icon_search {
background-image: url(../../../../resources/zoa-landing/v122023/images/icon/icon_search.svg);
}
.icon_chat {
background-image: url(../../../../resources/zoa-landing/v122023/images/icon/icon_chat.svg);
}
.icon_chat2 {
background-image: url(../../../../resources/zoa-landing/v122023/images/icon/icon_chat2.svg);
}
.icon_app {
background-image: url(../../../../resources/zoa-landing/v122023/images/icon/icon_app.svg);
}
.icon_report {
background-image: url(../../../../resources/zoa-landing/v122023/images/icon/icon_report.svg);
}
.icon_setting {
background-image: url(../../../../resources/zoa-landing/v122023/images/icon/icon_setting.svg);
}
.icon_bell {
background-image: url(../../../../resources/zoa-landing/v122023/images/icon/icon_bell.svg);
}
.icon_content {
background-image: url(../../../../resources/zoa-landing/v122023/images/icon/icon_content.svg);
}
.icon_call {
background-image: url(../../../../resources/zoa-landing/v122023/images/icon/icon_call.svg);
}
.icon_down,
.icon_left {
background-image: url(../../../../resources/zoa-landing/v122023/images/icon/icon_down.svg);
}
.icon_left {
transform: rotate(90deg);
}
.icon_right {
background-image: url(../../../../resources/zoa-landing/v122023/images/icon/icon_down.svg);
transform: rotate(-90deg);
}
.icon_filter {
background-image: url(../../../../resources/zoa-landing/v122023/images/icon/icon_filter.svg);
}
.icon_menu {
background-image: url(../../../../resources/zoa-landing/v122023/images/icon/icon_menu.svg);
}
.icon_menu2 {
background-image: url(../../../../resources/zoa-landing/v122023/images/icon/icon_menu2.svg);
}
.icon_calender {
background-image: url(../../../../resources/zoa-landing/v122023/images/icon/icon_calender.svg);
}
.icon_dislike,
.icon_like {
background-image: url(../../../../resources/zoa-landing/v122023/images/icon/icon_dislike.svg);
}
.icon_like {
transform: rotateX(180deg);
}
.mt-4 {
margin-top: 4px;
}
.mt-6 {
margin-top: 6px;
}
.mt-8 {
margin-top: 8px;
}
.mt-12 {
margin-top: 12px;
}
.mt-16 {
margin-top: 16px;
}
.mt-20 {
margin-top: 20px;
}
.mt-24 {
margin-top: 24px;
}
.mt-28 {
margin-top: 28px;
}
.mt-32 {
margin-top: 32px;
}
.mt-36 {
margin-top: 36px;
}
.mt-40 {
margin-top: 40px;
}
.mt-42 {
margin-top: 42px;
}
.mt-44 {
margin-top: 44px;
}
.mt-48 {
margin-top: 48px;
}
.mt-56 {
margin-top: 56px;
}
.mt-60 {
margin-top: 60px;
}
.mt-70 {
margin-top: 70px;
}
.mt-75 {
margin-top: 75px;
}
.mt-80 {
margin-top: 80px;
}
.mt-100 {
margin-top: 100px;
}
.mt-120 {
margin-top: 120px;
}
.mt-140 {
margin-top: 140px;
}
.mb-4 {
margin-bottom: 4px;
}
.mb-6 {
margin-bottom: 6px;
}
.mb-8 {
margin-bottom: 8px;
}
.mb-12 {
margin-bottom: 12px;
}
.mb-16 {
margin-bottom: 16px;
}
.mb-20 {
margin-bottom: 20px;
}
.mb-24 {
margin-bottom: 24px;
}
.mb-28 {
margin-bottom: 28px;
}
.mb-32 {
margin-bottom: 32px;
}
.mb-36 {
margin-bottom: 36px;
}
.mb-40 {
margin-bottom: 40px;
}
.mb-42 {
margin-bottom: 42px;
}
.mb-44 {
margin-bottom: 44px;
}
.mb-48 {
margin-bottom: 48px;
}
.mb-56 {
margin-bottom: 56px;
}
.mb-60 {
margin-bottom: 60px;
}
.mb-70 {
margin-bottom: 70px;
}
.mb-75 {
margin-bottom: 75px;
}
.mb-80 {
margin-bottom: 80px;
}
.mb-100 {
margin-bottom: 100px;
}
.mb-120 {
margin-bottom: 120px;
}
.mb-140 {
margin-bottom: 140px;
}
.ml-4 {
margin-left: 4px;
}
.ml-6 {
margin-left: 6px;
}
.ml-8 {
margin-left: 8px;
}
.ml-12 {
margin-left: 12px;
}
.ml-16 {
margin-left: 16px;
}
.ml-20 {
margin-left: 20px;
}
.ml-24 {
margin-left: 24px;
}
.ml-28 {
margin-left: 28px;
}
.ml-32 {
margin-left: 32px;
}
.ml-36 {
margin-left: 36px;
}
.ml-40 {
margin-left: 40px;
}
.ml-42 {
margin-left: 42px;
}
.ml-44 {
margin-left: 44px;
}
.ml-48 {
margin-left: 48px;
}
.ml-56 {
margin-left: 56px;
}
.ml-60 {
margin-left: 60px;
}
.ml-70 {
margin-left: 70px;
}
.ml-75 {
margin-left: 75px;
}
.ml-80 {
margin-left: 80px;
}
.ml-100 {
margin-left: 100px;
}
.ml-120 {
margin-left: 120px;
}
.ml-140 {
margin-left: 140px;
}
.mr-4 {
margin-right: 4px;
}
.mr-6 {
margin-right: 6px;
}
.mr-8 {
margin-right: 8px;
}
.mr-12 {
margin-right: 12px;
}
.mr-16 {
margin-right: 16px;
}
.mr-20 {
margin-right: 20px;
}
.mr-24 {
margin-right: 24px;
}
.mr-28 {
margin-right: 28px;
}
.mr-32 {
margin-right: 32px;
}
.mr-36 {
margin-right: 36px;
}
.mr-40 {
margin-right: 40px;
}
.mr-42 {
margin-right: 42px;
}
.mr-44 {
margin-right: 44px;
}
.mr-48 {
margin-right: 48px;
}
.mr-56 {
margin-right: 56px;
}
.mr-60 {
margin-right: 60px;
}
.mr-70 {
margin-right: 70px;
}
.mr-75 {
margin-right: 75px;
}
.mr-80 {
margin-right: 80px;
}
.mr-100 {
margin-right: 100px;
}
.mr-120 {
margin-right: 120px;
}
.mr-140 {
margin-right: 140px;
}
.mx-4 {
margin: auto 4px;
}
.mx-6 {
margin: auto 6px;
}
.mx-8 {
margin: auto 8px;
}
.mx-12 {
margin: auto 12px;
}
.mx-16 {
margin: auto 16px;
}
.mx-20 {
margin: auto 20px;
}
.mx-24 {
margin: auto 24px;
}
.mx-28 {
margin: auto 28px;
}
.mx-32 {
margin: auto 32px;
}
.mx-36 {
margin: auto 36px;
}
.mx-40 {
margin: auto 40px;
}
.mx-42 {
margin: auto 42px;
}
.mx-44 {
margin: auto 44px;
}
.mx-48 {
margin: auto 48px;
}
.mx-56 {
margin: auto 56px;
}
.mx-60 {
margin: auto 60px;
}
.mx-70 {
margin: auto 70px;
}
.mx-75 {
margin: auto 75px;
}
.mx-80 {
margin: auto 80px;
}
.mx-100 {
margin: auto 100px;
}
.mx-120 {
margin: auto 120px;
}
.mx-140 {
margin: auto 140px;
}
.my-4 {
margin: 4px auto;
}
.my-6 {
margin: 6px auto;
}
.my-8 {
margin: 8px auto;
}
.my-12 {
margin: 12px auto;
}
.my-16 {
margin: 16px auto;
}
.my-20 {
margin: 20px auto;
}
.my-24 {
margin: 24px auto;
}
.my-28 {
margin: 28px auto;
}
.my-32 {
margin: 32px auto;
}
.my-36 {
margin: 36px auto;
}
.my-40 {
margin: 40px auto;
}
.my-42 {
margin: 42px auto;
}
.my-44 {
margin: 44px auto;
}
.my-48 {
margin: 48px auto;
}
.my-56 {
margin: 56px auto;
}
.my-60 {
margin: 60px auto;
}
.my-70 {
margin: 70px auto;
}
.my-75 {
margin: 75px auto;
}
.my-80 {
margin: 80px auto;
}
.my-100 {
margin: 100px auto;
}
.my-120 {
margin: 120px auto;
}
.my-140 {
margin: 140px auto;
}
.m-4 {
margin: 4px;
}
.m-6 {
margin: 6px;
}
.m-8 {
margin: 8px;
}
.m-12 {
margin: 12px;
}
.m-16 {
margin: 16px;
}
.m-20 {
margin: 20px;
}
.m-24 {
margin: 24px;
}
.m-28 {
margin: 28px;
}
.m-32 {
margin: 32px;
}
.m-36 {
margin: 36px;
}
.m-40 {
margin: 40px;
}
.m-42 {
margin: 42px;
}
.m-44 {
margin: 44px;
}
.m-48 {
margin: 48px;
}
.m-56 {
margin: 56px;
}
.m-60 {
margin: 60px;
}
.m-70 {
margin: 70px;
}
.m-75 {
margin: 75px;
}
.m-80 {
margin: 80px;
}
.m-100 {
margin: 100px;
}
.m-120 {
margin: 120px;
}
.m-140 {
margin: 140px;
}
.pt-4 {
padding-top: 4px;
}
.pt-6 {
padding-top: 6px;
}
.pt-8 {
padding-top: 8px;
}
.pt-12 {
padding-top: 12px;
}
.pt-16 {
padding-top: 16px;
}
.pt-20 {
padding-top: 20px;
}
.pt-24 {
padding-top: 24px;
}
.pt-28 {
padding-top: 28px;
}
.pt-32 {
padding-top: 32px;
}
.pt-36 {
padding-top: 36px;
}
.pt-40 {
padding-top: 40px;
}
.pt-42 {
padding-top: 42px;
}
.pt-44 {
padding-top: 44px;
}
.pt-48 {
padding-top: 48px;
}
.pt-56 {
padding-top: 56px;
}
.pt-60 {
padding-top: 60px;
}
.pt-70 {
padding-top: 70px;
}
.pt-75 {
padding-top: 75px;
}
.pt-80 {
padding-top: 80px;
}
.pt-100 {
padding-top: 100px;
}
.pt-120 {
padding-top: 120px;
}
.pt-140 {
padding-top: 140px;
}
.pb-4 {
padding-bottom: 4px;
}
.pb-6 {
padding-bottom: 6px;
}
.pb-8 {
padding-bottom: 8px;
}
.pb-12 {
padding-bottom: 12px;
}
.pb-16 {
padding-bottom: 16px;
}
.pb-20 {
padding-bottom: 20px;
}
.pb-24 {
padding-bottom: 24px;
}
.pb-28 {
padding-bottom: 28px;
}
.pb-32 {
padding-bottom: 32px;
}
.pb-36 {
padding-bottom: 36px;
}
.pb-40 {
padding-bottom: 40px;
}
.pb-42 {
padding-bottom: 42px;
}
.pb-44 {
padding-bottom: 44px;
}
.pb-48 {
padding-bottom: 48px;
}
.pb-56 {
padding-bottom: 56px;
}
.pb-60 {
padding-bottom: 60px;
}
.pb-70 {
padding-bottom: 70px;
}
.pb-75 {
padding-bottom: 75px;
}
.pb-80 {
padding-bottom: 80px;
}
.pb-100 {
padding-bottom: 100px;
}
.pb-120 {
padding-bottom: 120px;
}
.pb-140 {
padding-bottom: 140px;
}
.pl-4 {
padding-left: 4px;
}
.pl-6 {
padding-left: 6px;
}
.pl-8 {
padding-left: 8px;
}
.pl-12 {
padding-left: 12px;
}
.pl-16 {
padding-left: 16px;
}
.pl-20 {
padding-left: 20px;
}
.pl-24 {
padding-left: 24px;
}
.pl-28 {
padding-left: 28px;
}
.pl-32 {
padding-left: 32px;
}
.pl-36 {
padding-left: 36px;
}
.pl-40 {
padding-left: 40px;
}
.pl-42 {
padding-left: 42px;
}
.pl-44 {
padding-left: 44px;
}
.pl-48 {
padding-left: 48px;
}
.pl-56 {
padding-left: 56px;
}
.pl-60 {
padding-left: 60px;
}
.pl-70 {
padding-left: 70px;
}
.pl-75 {
padding-left: 75px;
}
.pl-80 {
padding-left: 80px;
}
.pl-100 {
padding-left: 100px;
}
.pl-120 {
padding-left: 120px;
}
.pl-140 {
padding-left: 140px;
}
.pr-4 {
padding-right: 4px;
}
.pr-6 {
padding-right: 6px;
}
.pr-8 {
padding-right: 8px;
}
.pr-12 {
padding-right: 12px;
}
.pr-16 {
padding-right: 16px;
}
.pr-20 {
padding-right: 20px;
}
.pr-24 {
padding-right: 24px;
}
.pr-28 {
padding-right: 28px;
}
.pr-32 {
padding-right: 32px;
}
.pr-36 {
padding-right: 36px;
}
.pr-40 {
padding-right: 40px;
}
.pr-42 {
padding-right: 42px;
}
.pr-44 {
padding-right: 44px;
}
.pr-48 {
padding-right: 48px;
}
.pr-56 {
padding-right: 56px;
}
.pr-60 {
padding-right: 60px;
}
.pr-70 {
padding-right: 70px;
}
.pr-75 {
padding-right: 75px;
}
.pr-80 {
padding-right: 80px;
}
.pr-100 {
padding-right: 100px;
}
.pr-120 {
padding-right: 120px;
}
.pr-140 {
padding-right: 140px;
}
.px-4 {
padding-left: 4px;
padding-right: 4px;
}
.px-6 {
padding-left: 6px;
padding-right: 6px;
}
.px-8 {
padding-left: 8px;
padding-right: 8px;
}
.px-12 {
padding-left: 12px;
padding-right: 12px;
}
.px-16 {
padding-left: 16px;
padding-right: 16px;
}
.px-20 {
padding-left: 20px;
padding-right: 20px;
}
.px-24 {
padding-left: 24px;
padding-right: 24px;
}
.px-28 {
padding-left: 28px;
padding-right: 28px;
}
.px-32 {
padding-left: 32px;
padding-right: 32px;
}
.px-36 {
padding-left: 36px;
padding-right: 36px;
}
.px-40 {
padding-left: 40px;
padding-right: 40px;
}
.px-42 {
padding-left: 42px;
padding-right: 42px;
}
.px-44 {
padding-left: 44px;
padding-right: 44px;
}
.px-48 {
padding-left: 48px;
padding-right: 48px;
}
.px-56 {
padding-left: 56px;
padding-right: 56px;
}
.px-60 {
padding-left: 60px;
padding-right: 60px;
}
.px-70 {
padding-left: 70px;
padding-right: 70px;
}
.px-75 {
padding-left: 75px;
padding-right: 75px;
}
.px-80 {
padding-left: 80px;
padding-right: 80px;
}
.px-100 {
padding-left: 100px;
padding-right: 100px;
}
.px-120 {
padding-left: 120px;
padding-right: 120px;
}
.px-140 {
padding-left: 140px;
padding-right: 140px;
}
.py-4 {
padding-top: 4px;
padding-bottom: 4px;
}
.py-6 {
padding-top: 6px;
padding-bottom: 6px;
}
.py-8 {
padding-top: 8px;
padding-bottom: 8px;
}
.py-12 {
padding-top: 12px;
padding-bottom: 12px;
}
.py-16 {
padding-top: 16px;
padding-bottom: 16px;
}
.py-20 {
padding-top: 20px;
padding-bottom: 20px;
}
.py-24 {
padding-top: 24px;
padding-bottom: 24px;
}
.py-28 {
padding-top: 28px;
padding-bottom: 28px;
}
.py-32 {
padding-top: 32px;
padding-bottom: 32px;
}
.py-36 {
padding-top: 36px;
padding-bottom: 36px;
}
.py-40 {
padding-top: 40px;
padding-bottom: 40px;
}
.py-42 {
padding-top: 42px;
padding-bottom: 42px;
}
.py-44 {
padding-top: 44px;
padding-bottom: 44px;
}
.py-48 {
padding-top: 48px;
padding-bottom: 48px;
}
.py-56 {
padding-top: 56px;
padding-bottom: 56px;
}
.py-60 {
padding-top: 60px;
padding-bottom: 60px;
}
.py-70 {
padding-top: 70px;
padding-bottom: 70px;
}
.py-75 {
padding-top: 75px;
padding-bottom: 75px;
}
.py-80 {
padding-top: 80px;
padding-bottom: 80px;
}
.py-100 {
padding-top: 100px;
padding-bottom: 100px;
}
.py-120 {
padding-top: 120px;
padding-bottom: 120px;
}
.py-140 {
padding-top: 140px;
padding-bottom: 140px;
}
.p-4 {
padding: 4px;
}
.p-6 {
padding: 6px;
}
.p-8 {
padding: 8px;
}
.p-12 {
padding: 12px;
}
.p-16 {
padding: 16px;
}
.p-20 {
padding: 20px;
}
.p-24 {
padding: 24px;
}
.p-28 {
padding: 28px;
}
.p-32 {
padding: 32px;
}
.p-36 {
padding: 36px;
}
.p-40 {
padding: 40px;
}
.p-42 {
padding: 42px;
}
.p-44 {
padding: 44px;
}
.p-48 {
padding: 48px;
}
.p-56 {
padding: 56px;
}
.p-60 {
padding: 60px;
}
.p-70 {
padding: 70px;
}
.p-75 {
padding: 75px;
}
.p-80 {
padding: 80px;
}
.p-100 {
padding: 100px;
}
.p-120 {
padding: 120px;
}
.p-140 {
padding: 140px;
}
.flex.midle {
align-items: center;
align-content: center;
}
.flex.center {
justify-content: center;
}
.flex.space {
justify-content: space-between;
}
.flex-shrink {
flex-shrink: 0;
}
.flex-space {
justify-content: space-between;
}
.flex-center {
justify-content: center;
}
.flex-midle {
align-items: center;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-top {
align-items: flex-start;
}
.flex-end {
justify-content: flex-end;
}
.gap-4 {
grid-gap: 4px;
gap: 4px;
}
.gap-6 {
grid-gap: 6px;
gap: 6px;
}
.gap-8 {
grid-gap: 8px;
gap: 8px;
}
.gap-12 {
grid-gap: 12px;
gap: 12px;
}
.gap-16 {
grid-gap: 16px;
gap: 16px;
}
.gap-24 {
grid-gap: 24px;
gap: 24px;
}
.gap-32 {
grid-gap: 32px;
gap: 32px;
}
.gap-36 {
grid-gap: 36px;
gap: 36px;
}
.gap-40 {
grid-gap: 40px;
gap: 40px;
}
.gap-42 {
grid-gap: 42px;
gap: 42px;
}
.gap-80 {
grid-gap: 80px;
gap: 80px;
}
.h-full {
height: 100%;
}
.w-200 {
width: 200px;
}
.bg_brand_80 {
background-color: #0047ad;
color: #fff;
}
.bg_white_10 {
background-color: hsla(0, 0%, 100%, 0.1);
}
.bg_trans {
background-color: transparent;
}
.bg_neu_90 {
background-color: #343436;
color: #d6d5dd;
}
.color_white {
color: #fff;
}
.color_white::placeholder {
color: #fff;
}
.bdrs_4 {
border-radius: 4px;
}
@font-face {
font-family: Roboto;
src: url(../../../../resources/zoa-landing/v122023/fonts/Roboto-Black.woff2)
format("woff2"),
url(../../../../resources/zoa-landing/v122023/fonts/Roboto-Black.woff)
format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Roboto;
src: url(../../../../resources/zoa-landing/v122023/fonts/Roboto-Bold.woff2)
format("woff2"),
url(../../../../resources/zoa-landing/v122023/fonts/Roboto-Bold.woff)
format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Roboto;
src: url(../../../../resources/zoa-landing/v122023/fonts/Roboto-Regular.woff2)
format("woff2"),
url(../../../../resources/zoa-landing/v122023/fonts/Roboto-Regular.woff)
format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Roboto;
src: url(../../../../resources/zoa-landing/v122023/fonts/Roboto-Medium.woff2)
format("woff2"),
url(../../../../resources/zoa-landing/v122023/fonts/Roboto-Medium.woff)
format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
.trim {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.trim.trim_1 {
-webkit-line-clamp: 1;
}
.trim.trim_2 {
-webkit-line-clamp: 2;
}
.trim.trim_3 {
-webkit-line-clamp: 3;
}
.trim.trim_4 {
-webkit-line-clamp: 4;
}
.links {
text-decoration: underline;
}
.text_limit {
display: block;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: break-word;
overflow: hidden;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-link {
color: #0068ff;
text-decoration: underline;
}
.fnt_bold {
font-weight: 700;
}
.fnt_medium {
font-weight: 500;
}
.fnt_black {
font-weight: 900;
}
strong {
font-weight: 500;
}
.color_red {
color: #e60f0f;
}
.color_green {
color: #00c853;
}
.color_neu_70 {
color: #8d8d8f;
}
.color_neu_90 {
color: #343436;
}
.color_brand_50 {
color: #0068ff;
}
.color_white {
color: #fff !important;
}
.fz-48 {
font-size: 28px;
line-height: 33px;
}
@media (min-width: 769px) {
.fz-48 {
font-size: 48px;
line-height: 58px;
}
}
.fz-32 {
font-size: 28px;
line-height: 33px;
}
@media (min-width: 769px) {
.fz-32 {
font-size: 32px;
line-height: 38px;
}
}
.fz-28 {
font-size: 24px;
line-height: 36px;
}
@media (min-width: 769px) {
.fz-28 {
font-size: 28px;
line-height: 33px;
}
}
.fz-24 {
font-size: 24px;
line-height: 36px;
}
.fz-20 {
font-size: 20px;
line-height: 30px;
}
.fz-18 {
font-size: 18px;
line-height: 27px;
}
.fz-16 {
font-size: 16px;
line-height: 24px;
}
.fz-14 {
font-size: 14px;
line-height: 21px;
}
.fz-12 {
font-size: 12px;
line-height: 15px;
}
.fz-10 {
font-size: 10px;
line-height: 12px;
}
.fw-400 {
font-weight: 400;
}
.fw-500 {
font-weight: 500;
}
.fw-700 {
font-weight: 700;
}
.btn {
line-height: 34px;
height: 36px;
font-family: Roboto;
border-radius: 4px;
padding: 0 20px;
font-weight: 500;
text-align: center;
cursor: pointer;
white-space: nowrap;
font-size: 14px;
transition: 0.25s ease-out;
}
.btn:focus {
outline: initial;
}
.btn-lg {
line-height: 48px;
height: 48px;
font-size: 18px;
}
.btn-primary {
background-color: #0068ff;
color: #fff;
}
.btn-primary:hover {
box-shadow: 0 0 16px 0 rgba(0, 56, 255, 0.4);
}
.btn-primary.disabled {
background-color: #d6d5dd;
pointer-events: none;
}
.btn-blue {
background-color: #e5f0ff;
color: #003889;
}
.btn-white {
background-color: #fff;
border: 1px solid #0068ff;
color: #0068ff;
}
.btn-outline-primary {
border: 1px solid #0068ff;
color: #0068ff !important;
}
.btn-outline-white {
border: 1px solid #fff;
color: #fff !important;
}
.btn-outline-white:hover {
background-color: #fff;
color: #0047ad !important;
}
.link {
color: #0068ff;
font-weight: 500;
}
input,
select,
textarea {
font-family: Roboto;
}
button,
input,
select,
textarea {
-webkit-appearance: none;
appearance: none;
}
input {
height: 34px;
padding: 8px 12px;
}
input[type="checkbox"],
input[type="radio"] {
display: none;
}
input[type="checkbox"] + label,
input[type="radio"] + label {
display: block;
padding-left: 18px;
width: 100%;
position: relative;
cursor: pointer;
}
input[type="checkbox"] + label:after,
input[type="checkbox"] + label:before,
input[type="radio"] + label:after,
input[type="radio"] + label:before {
position: absolute;
content: "";
left: 0;
top: 2px;
border: 1px solid #efefef;
}
input[type="checkbox"] + label:after,
input[type="radio"] + label:after {
opacity: 0;
background-color: #0068ff;
}
input[type="checkbox"]:checked + label:after,
input[type="radio"]:checked + label:after {
opacity: 1;
}
input[type="checkbox"] + label:after,
input[type="checkbox"] + label:before {
width: 13px;
height: 13px;
border-radius: 2px;
}
input[type="checkbox"] + label:after {
content: "✓";
color: #fff;
font-size: 8px;
text-align: center;
line-height: 11px;
}
input:not([type="checkbox"]),
input:not([type="radio"]) {
width: 100%;
}
input.is_icon_before {
padding-left: 48px;
}
input.is_icon_after {
padding-right: 48px;
}
input + .icon {
position: absolute;
top: 0;
bottom: 0;
left: 16px;
margin: auto;
}
input.bg_trans:focus {
outline: none;
}
.field .label {
font-weight: 400;
margin-bottom: 0;
font-size: 16px;
}
.field .control .input {
height: 42px;
background-color: #fafafa;
border: 1px solid #f2f2f2;
margin-top: 4px;
padding: 8px 12px;
}
.field .control .input:focus {
box-shadow: none;
border: 1px solid #0068ff;
}
.field .control .input::placeholder {
font-size: 16px;
}
.field .control .input_search {
padding-right: 38px;
background-image: url(https://stc-oa.zdn.vn/resources/zoa-landing/v122023/images/icon/icon_search_primary.svg);
background-position: center right 11px;
background-repeat: no-repeat;
}
.list_dirc {
margin-bottom: 8px;
}
.list_dirc li {
position: relative;
padding-left: 18px;
margin-top: 8px;
}
.list_dirc li:before {
position: absolute;
content: "";
left: 5px;
border-radius: 50%;
background: #343436;
top: 8px;
width: 3px;
height: 3px;
}
.list_dirc.fz-12 li:before {
top: 4px;
}
.list_dirc.fz-16 li:before {
top: 10px;
}
.list_dirc.fz-16 li + li {
margin-top: 12px;
}
.list_dirc_blue li:before {
background-color: #0068ff;
}
.list_number {
list-style-position: inside;
list-style-type: decimal;
}
.list_number li {
margin-top: 8px;
}
.list li {
display: flex;
gap: 12px;
}
.list li:before {
width: 20px;
height: 20px;
content: "";
flex-shrink: 0;
margin-top: 2.5px;
background-repeat: no-repeat;
background-size: 100%;
background-image: url(../../../../resources/zoa-landing/v122023/images/icon/icon_list_check.svg);
}
.list li + li {
margin-top: 24px;
}
.dropdown,
.dropdown .input {
position: relative;
}
.dropdown .input {
cursor: pointer;
background: #fafafa;
border: 1px solid #f2f2f2;
border-radius: 8px;
height: 43px;
padding: 12px 8px;
}
.dropdown .input.not_select {
color: #aeaeae;
}
.dropdown .input:before {
position: absolute;
right: 8px;
top: 0;
bottom: 0;
margin: auto;
width: 20px;
height: 20px;
content: "";
background-image: url(../../../../resources/zoa-landing/v122023/images/icon/icon_down.svg);
transition: all 0.3s;
}
.dropdown .dropdown_content {
position: absolute;
top: 100%;
left: 0;
min-width: 100%;
z-index: 9;
padding-top: 4px;
display: none;
font-size: 14px;
line-height: 20px;
}
.dropdown .dropdown_content .inner {
padding: 6px 0;
background-color: #fff;
border: 1px solid #d2d0d9;
border-radius: 8px;
box-shadow: 0 2px 16px rgba(45, 45, 45, 0.12);
min-width: 160px;
}
.dropdown .dropdown_content li {
cursor: pointer;
padding: 6px 12px;
position: relative;
}
.dropdown .dropdown_content li:hover {
background-color: #e5f0ff;
}
.dropdown_right .dropdown_content {
right: 0;
left: auto;
}
.des_content h1 {
font-size: 28px;
line-height: 33px;
}
.des_content h2 {
font-size: 24px;
line-height: 30px;
}
.des_content h3 {
font-size: 20px;
line-height: 28px;
}
.des_content h4 {
font-size: 18px;
line-height: 26px;
}
.des_content h5 {
font-size: 16px;
line-height: 24px;
}
.des_content h6 {
font-size: 14px;
line-height: 22px;
}
.des_content h1,
.des_content h2,
.des_content h3,
.des_content h4,
.des_content h5,
.des_content h6 {
font-weight: 700;
}
.des_content h1,
.des_content h2,
.des_content h3,
.des_content h4,
.des_content h5,
.des_content h6,
.des_content ol,
.des_content p,
.des_content ul {
margin-bottom: 16px;
}
.des_content h1 *,
.des_content h2 *,
.des_content h3 *,
.des_content h4 *,
.des_content h5 *,
.des_content h6 *,
.des_content ol *,
.des_content p *,
.des_content ul * {
font-family: Roboto;
font-size: inherit !important;
line-height: inherit !important;
word-break: break-word;
}
.des_content ul {
list-style: disc;
margin-left: 16px;
}
.des_content ol {
list-style: decimal;
margin-left: 16px;
}
.images_thum {
border-radius: 12px;
overflow: hidden;
}
.images_thum img {
width: 100%;
height: auto;
}
body {
font-family: Roboto;
font-style: normal;
font-weight: 400;
background: #f6f7fa;
font-size: 14px;
line-height: 21px;
color: #343436;
}
@media (min-width: 769px) {
body {
font-size: 16px;
line-height: 24px;
}
}
body.bg_white {
background-color: #fff;
}
input,
section,
textarea {
font-family: Roboto;
}
.container {
max-width: 1272px;
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}
img {
max-width: 100%;
}
.imgAuto {
width: 100%;
display: block;
height: auto;
}
.imgDrop {
position: relative;
overflow: hidden;
background-size: cover;
display: block;
}
.imgDrop.avt {
padding-top: 100%;
border-radius: 50%;
}
.imgDrop img {
position: absolute;
top: 0;
left: 0;
object-fit: cover;
width: 100%;
height: 100%;
}
.imgDrop .img_srcset,
.imgDrop iframe,
.imgDrop video {
position: absolute !important;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
a {
transition: 0.25s ease-out;
cursor: pointer;
}
a[href="none"] {
pointer-events: none;
}
.w-auto {
width: 100%;
height: auto;
}
.w-40 {
width: 40px;
}
.w-48 {
width: 48px;
}
.w-310 {
max-width: 310px;
margin-left: auto;
margin-right: auto;
}
.w-full {
width: 100%;
}
.w-800 {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.shadow2 {
box-shadow: 0 2px 6px rgba(51, 51, 51, 0.08),
0 1px 1px 1px rgba(0, 0, 0, 0.03);
}
.relative {
position: relative;
}
.block_click {
cursor: pointer;
}
@media (min-width: 992px) {
.only_sp {
display: none !important;
}
}
@media (max-width: 991px) {
.only_pc {
display: none !important;
}
}
.transtion {
transition: 0.25s ease-out;
}
.scrollbar {
overflow-y: auto;
}
.scrollbar::-webkit-scrollbar {
width: 6px;
}
.scrollbar::-webkit-scrollbar-track {
background: transparent;
width: 0;
}
.scrollbar::-webkit-scrollbar-thumb {
border-radius: 4px;
background: #efefef;
}
.btn_read_more {
display: flex;
font-weight: 500;
color: #0068ff;
align-items: center;
gap: 12px;
white-space: nowrap;
padding: 6px 0;
}
.btn_read_more:after {
content: "";
width: 16px;
height: 16px;
background-size: auto 10px;
background-image: url(../../../../resources/zoa-landing/v122023/images/icon_btn_more.svg);
transition: all 0.3s;
background-repeat: no-repeat;
background-position: 100%;
}
.btn_read_more:hover:after {
width: 32px;
}
#content_main {
width: 100%;
}
.inner_wrap {
background-color: #fff;
border-radius: 8px;
}
@media (max-width: 768px) {
h2.fz-28 {
letter-spacing: 0.96px;
}
h2.fz-28 br {
display: none;
}
}
.btn-shadow {
box-shadow: 0 9px 36px 0 rgba(0, 56, 255, 0.24);
}
.line_qrcode {
position: relative;
overflow: hidden;
}
.line_qrcode:before {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 10%;
background-image: linear-gradient(rgba(0, 104, 255, 0), #0068ff);
content: "";
animation-name: aniqrcode;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
z-index: 9;
opacity: 0.7;
}
@keyframes aniqrcode {
0% {
top: 0;
transform: translateY(-100%);
}
to {
top: 100%;
transform: translateY(0);
}
}
#header {
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 99999;
background-color: #fff;
border-bottom: 1px solid #efefef;
}
#header nav {
display: flex;
align-items: center;
height: 72px;
}
@media screen and (max-width: 1024px) {
#header nav .content_left,
#header nav .content_right {
position: relative;
z-index: 100;
}
}
#header #navbar-toggle {
width: 24px;
height: 24px;
cursor: pointer;
position: relative;
margin-right: 16px;
z-index: 999;
}
@media (min-width: 992px) {
#header #navbar-toggle {
display: none;
}
}
#header #navbar-toggle:focus {
outline: none;
}
#header #navbar-toggle span {
display: block;
position: absolute;
width: 30px;
height: 2px;
border-radius: 1px;
background: #343436;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#header #navbar-toggle span:after,
#header #navbar-toggle span:before {
position: absolute;
content: "";
width: 100%;
height: 2px;
background-color: #343436;
border-radius: 1px;
transition: 0.25s ease-out;
left: 0;
}
#header #navbar-toggle span:before {
top: -9px;
}
#header #navbar-toggle span:after {
bottom: -9px;
}
@media (max-width: 991px) {
#header #navbar-collapse {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
background-color: transparent;
padding: 73px 0 0;
text-align: center;
transform: translateX(-100%);
transition: all 0.3s;
}
#header #navbar-collapse .navi {
background-color: #fff;
padding: 16px 24px;
height: 100%;
max-width: 372px;
overflow: auto;
}
}
@media (min-width: 992px) {
#header #navbar-collapse {
overflow: inherit;
}
}
#header #navbar-collapse.is_show {
transform: translateX(0);
}
#header #navbar-collapse.is_show + .content_right #navbar-toggle span {
background-color: transparent;
}
#header #navbar-collapse.is_show + .content_right #navbar-toggle span:before {
transform: rotate(45deg);
top: 0;
}
#header #navbar-collapse.is_show + .content_right #navbar-toggle span:after {
transform: rotate(-45deg);
bottom: 0;
}
@media (min-width: 992px) {
#header .content_left {
margin-right: 24px;
}
}
@media (min-width: 1241px) {
#header .content_left {
margin-right: 32px;
}
}
@media (min-width: 1367px) {
#header .content_left {
margin-right: 64px;
}
}
#header .content_left .logo {
width: 120px;
}
@media (min-width: 1241px) {
#header .content_left .logo {
width: 150px;
}
}
#header .content_center {
margin-right: auto;
}
#header .content_center > a {
display: block;
}
@media (max-width: 991px) {
#header .content_center > a {
padding: 16px 0;
font-size: 20px;
line-height: 30px;
text-align: left;
}
}
@media (min-width: 992px) {
#header .content_center > a {
padding: 25px 12px;
margin: 0 8px;
}
}
@media (min-width: 1367px) {
#header .content_center > a {
margin: 0 16px;
font-size: 16px;
}
}
@media (min-width: 1601px) {
#header .content_center > a {
margin: 0 24px;
}
}
#header .content_center > a:hover {
color: #84b6ff;
}
@media (max-width: 768px) {
#header .content_center > a + a {
border-top: 1px solid hsla(0, 0%, 100%, 0.2);
}
}
#header .content_center > a.active {
position: relative;
color: #fff;
}
#header .content_center > a.active:before {
position: absolute;
content: "";
bottom: 0;
left: 0;
right: 0;
height: 2px;
background-color: #fff;
}
#header .content_center button {
height: 44px;
font-size: 18px;
line-height: 27px;
}
@media (min-width: 769px) {
#header .content_right {
position: relative;
}
}
#header .content_right .nav_search {
width: 24px;
transition: all 0.3s;
overflow: hidden;
}
@media (max-width: 1366px) {
#header .content_right .nav_search {
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
background-color: transparent;
}
}
@media (max-width: 768px) {
#header .content_right .nav_search {
width: 100%;
top: 0;
height: 72px;
right: 0;
transform: translateY(0);
}
}
@media (min-width: 1367px) {
#header .content_right .nav_search {
width: 246px;
}
#header .content_right .nav_search .icon {
pointer-events: none;
}
}
@media (max-width: 1366px) {
#header .content_right .nav_search input {
display: none;
}
#header .content_right .nav_search input + .icon {
position: static;
}
}
@media (max-width: 768px) {
#header .content_right .nav_search input + .icon {
margin-right: 70px;
}
}
#header .content_right .nav_search input::placeholder {
color: #84b6ff;
}
#header .content_right .nav_search .icon_sp {
position: absolute;
left: 24px;
top: 24px;
}
@media (max-width: 768px) {
#header .content_right .nav_search .icon_sp {
opacity: 0;
}
}
#header .content_right .account_user {
width: 34px;
position: relative;
}
@media (max-width: 768px) {
#header .content_right .account_user {
display: none;
}
}
#header .content_right .account_user .avatar {
padding-top: 100%;
border-radius: 50%;
cursor: pointer;
position: relative;
z-index: 1;
}
#header .content_right .account_user .dropdown_content {
position: absolute;
top: 0;
right: -16px;
padding-top: 40px;
color: #343436;
opacity: 0;
transition: all 0.3s;
}
#header .content_right .account_user .dropdown_content .inner {
min-width: 255px;
padding: 18px 16px;
background: #fff;
border: 1px solid #e9ebed;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.02), 0 4px 8px rgba(0, 0, 0, 0.02);
border-radius: 8px;
}
#header .content_right .account_user .dropdown_content .user_name {
border-bottom: 1px solid #efefef;
}
#header .content_right .account_user .dropdown_content .list_acction a {
display: flex;
padding: 8px;
border-radius: 4px;
margin-top: 8px;
color: #343436;
}
#header .content_right .account_user .dropdown_content .list_acction a:hover {
background-color: #f6f6f7;
}
#header .content_right .account_user .dropdown_content .list_acction .line {
border-top: 1px solid #efefef;
margin-top: 8px;
}
#header .content_right .account_user:not(:hover) .dropdown_content {
pointer-events: none;
}
#header .content_right .account_user:hover .dropdown_content {
opacity: 1;
}
#header .navi {
width: 100%;
}
@media (max-width: 991px) {
#header .navi .nav_list {
display: block;
transition: all 0.3s;
}
#header .navi .nav_list > ul {
display: block;
}
}
#header .navi .nav_item:focus-visible {
border: none;
outline: none;
}
@media (min-width: 992px) {
#header .navi .nav_item.sp {
display: none;
}
}
@media (max-width: 991px) {
#header .navi .nav_item + .nav_item {
border-top: 1px solid hsla(0, 0%, 100%, 0.2);
}
}
#header .navi .nav_item > .link {
display: flex;
align-items: center;
color: #343436;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
position: relative;
transition: all 0.3s;
}
@media (max-width: 991px) {
#header .navi .nav_item > .link {
width: 100%;
}
}
@media (min-width: 992px) {
#header .navi .nav_item > .link:before {
position: absolute;
content: "";
bottom: 0;
left: 0;
right: 0;
height: 3px;
background-color: #0068ff;
opacity: 0;
}
}
#header .navi .nav_item > .link a,
#header .navi .nav_item > .link span {
display: block;
font-weight: 400;
}
@media (max-width: 991px) {
#header .navi .nav_item > .link a,
#header .navi .nav_item > .link span {
padding: 8px 0;
font-size: 18px;
line-height: 30px;
font-weight: 700;
text-align: left;
width: 100%;
}
}
@media (min-width: 992px) {
#header .navi .nav_item > .link a,
#header .navi .nav_item > .link span {
padding: 25px 12px;
}
}
@media (min-width: 1241px) {
#header .navi .nav_item > .link a,
#header .navi .nav_item > .link span {
padding: 25px 16px;
}
}
#header .navi .nav_item > .link > .icz {
background-image: url(../../../../resources/zoa-landing/v122023/images/icon/icon_down.svg);
background-size: 100%;
margin-left: -8px;
background-repeat: no-repeat;
background-position: 50%;
position: relative;
width: 16px;
height: 16px;
}
@media (min-width: 992px) {
#header .navi .nav_item > .link > .icz {
width: 12px;
height: 12px;
margin-right: 16px;
}
}
@media (min-width: 1241px) {
#header .navi .nav_item > .link > .icz {
width: 16px;
height: 16px;
}
}
#header .navi .nav_item > .link.is-active > .icz {
transform: rotate(180deg);
}
@media (min-width: 992px) {
#header .navi .nav_item:hover .sub_menu {
transform: translateX(0);
pointer-events: all;
opacity: 1;
}
#header .navi .nav_item:hover > .link {
background-color: #e5f0ff;
}
#header .navi .nav_item.active > .link {
background-color: #e5f0ff;
color: #0068ff;
}
}
#header .navi .nav_item.active > .link:before {
opacity: 1;
}
#header .navi .nav_item.active .icz {
filter: brightness(0) saturate(100%) invert(26%) sepia(43%) saturate(5633%)
hue-rotate(210deg) brightness(101%) contrast(106%);
}
#header .navi .dropdown {
display: flex;
flex-wrap: wrap;
align-items: center;
padding-right: 10px;
}
@media (max-width: 991px) {
#header .navi .dropdown {
position: relative;
padding-right: 0;
}
}
#header .navi .dropdown .link a {
pointer-events: none;
}
#header .navi .dropdown > a {
padding-right: 8px;
}
@media (max-width: 991px) {
#header .navi .dropdown > a {
margin-right: 50px;
}
}
#header .navi .dropdown.dropdown_sub {
position: relative;
}
#header .navi .dropdown.on > .sub_service {
transform: translateX(0);
}
#header .navi .dropdown.on > .icon_down > .icz,
#header .navi .dropdown.on > .icz {
transform: rotatex(180deg);
}
#header .sub_menu {
text-align: left;
}
@media (max-width: 991px) {
#header .sub_menu {
display: none;
}
}
@media (min-width: 992px) {
#header .sub_menu {
position: absolute;
top: 100%;
margin-top: -4px;
left: 0;
z-index: 9;
transform: translateX(-20px);
min-width: 250px;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
opacity: 0;
pointer-events: none;
background-color: #fff;
padding: 12px;
white-space: nowrap;
}
}
#header .sub_menu li a {
display: block;
position: relative;
transition: all 0.3s;
}
@media (max-width: 991px) {
#header .sub_menu li a {
font-size: 16px;
line-height: 24px;
font-weight: 500;
padding: 6px 16px;
border-left: 1px solid #8d8d8f;
}
}
@media (min-width: 992px) {
#header .sub_menu li a {
padding: 8px;
display: flex;
align-items: center;
gap: 16px;
font-weight: 500;
border-radius: 8px;
}
#header .sub_menu li a .icon {
width: 32px;
height: 32px;
flex-shrink: 0;
}
#header .sub_menu li a .text {
width: 100%;
display: flex;
align-items: center;
}
}
@media (max-width: 991px) {
#header .sub_menu li a .icon {
display: none;
}
}
@media (min-width: 992px) {
#header .sub_menu li:hover a {
color: #0068ff;
background-color: #e5f0ff;
}
}
#header .sub_menu li.active {
color: #0068ff;
}
#header.is_search .content_center,
#header.is_search .content_left {
opacity: 0;
pointer-events: none;
}
@media (max-width: 768px) {
#header.is_search .content_right {
position: static;
}
#header.is_search .content_right .nav_search .icon_sp {
display: block;
opacity: 1;
}
}
@media (min-width: 769px) {
#header.is_search .content_right .nav_search {
width: 246px;
background-color: hsla(0, 0%, 100%, 0.1);
}
}
@media (max-width: 768px) {
#header.is_search .content_right .nav_search input {
width: 100%;
height: 72px;
padding: 20px 20px 20px 76px;
font-size: 20px;
line-height: 30px;
}
#header.is_search .content_right .nav_search input + .icon {
display: none;
}
}
@media (max-width: 1366px) {
#header.is_search .content_right .nav_search input {
display: block;
}
#header.is_search .content_right .nav_search input + .icon {
position: absolute;
}
}
@media (max-width: 768px) {
#header.is_search #navbar-toggle {
opacity: 0;
pointer-events: none;
}
}
@media (max-width: 480px) {
#header .btn {
padding: 0 12px;
}
}
.modal-nav #header #navbar-toggle span {
background-color: #fff;
}
.modal-nav #header #navbar-toggle span:before {
top: 0;
transform: rotate(45deg);
}
.modal-nav #header #navbar-toggle span:after {
bottom: 0;
transform: rotate(-45deg);
}
body:before {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
right: 0;
content: "";
background-color: rgba(0, 0, 0, 0.65);
z-index: 9;
transition: all 0.3s;
opacity: 0;
pointer-events: none;
}
.modal-nav,
.modal-sidebar {
overflow: hidden;
}
.modal-nav:before,
.modal-sidebar:before {
opacity: 1;
}
#footer {
background-color: #003889;
color: hsla(0, 0%, 100%, 0.85);
background-image: url(../../../../resources/zoa-landing/v122023/images/footer_bg.png);
background-size: 100% 100%;
padding: 40px 0 16px;
font-size: 14px;
line-height: 20px;
font-weight: 400;
}
@media (max-width: 768px) {
#footer {
background-size: auto 100%;
background-position: top right -360px;
}
}
#footer .logo {
width: 150px;
}
#footer .ttl_sub {
color: #fff;
}
@media (max-width: 768px) {
#footer .row {
flex-direction: column;
}
}
#footer .col:first-child {
flex-shrink: 0;
}
@media (min-width: 769px) {
#footer .col:first-child {
width: 288px;
}
#footer .col:nth-child(2),
#footer .col:nth-child(3) {
width: 25%;
}
#footer .col:nth-child(4) {
flex-shrink: 0;
width: 173px;
text-align: center;
}
}
#footer ul li + li {
margin-top: 8px;
}
#footer ul li a:hover {
color: #fff;
}
#footer .qrcode {
width: 96px;
height: 96px;
padding: 8px;
border-radius: 8px;
background-color: #fff;
margin: 8px auto 0;
}
#footer address {
border-top: 1px solid #0047ad;
font-style: normal;
color: #d2d0d9;
font-size: 12px;
margin-top: 16px;
}
.modal {
padding: 16px;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
display: none;
background-color: rgba(0, 0, 0, 0.65);
}
.modal .modal_close {
position: relative;
width: 20px;
height: 20px;
margin: 8px 8px 8px auto;
display: block;
background-image: url(https://stc-oa.zdn.vn/resources/zoa-landing/v122023/images/icon/icon_close_gray.svg);
z-index: 9;
}
.modal_content {
position: absolute;
left: 16px;
right: 16px;
top: 50%;
margin-top: 22px;
transform: translateY(-50%);
height: auto;
margin-left: auto;
margin-right: auto;
background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
0 2px 8px 2px hsla(0, 0%, 82.7%, 0.1);
border-radius: 8px;
}
.modal_head {
padding: 16px;
position: relative;
text-align: center;
font-size: 16px;
line-height: 22px;
font-weight: 500;
border-bottom: 1px solid #efefef;
}
.modal_head .modal_close {
position: absolute;
top: 8px;
right: 8px;
margin: 0;
left: auto;
}
.modal_body {
padding: 16px;
max-height: calc(100vh - 146px);
overflow: auto;
}
.modal_body.h-full {
max-height: calc(100vh - 120px);
}
.modal_footer {
margin-top: 8px;
padding: 0 16px 16px;
}
.modal-open,
.sec_intro {
overflow: hidden;
}
.sec_intro {
background: linear-gradient(180deg, #e3eaff, #e9eeff 50.52%, #fff);
position: relative;
}
.sec_intro .container {
height: 688px;
}
@media (min-width: 769px) {
.sec_intro .container {
height: 900px;
}
}
.sec_intro .images_deco {
position: absolute;
bottom: 100px;
left: calc(50% + 190px);
height: 585px;
}
@media (max-width: 768px) {
.sec_intro .images_deco {
display: none;
}
}
.sec_intro .images_deco img {
height: 100%;
width: auto;
max-width: inherit;
}
.sec_intro .content_main {
display: flex;
flex-direction: column;
align-content: center;
height: 100%;
overflow: hidden;
}
@media (max-width: 768px) {
.sec_intro .content_main {
margin: 0 -16px;
}
}
.sec_intro .content_main .content {
flex-shrink: 0;
padding-top: 40px;
}
@media (max-width: 768px) {
.sec_intro .content_main .content {
padding-left: 16px;
padding-right: 16px;
}
}
.sec_intro .content_main .content .btn {
min-width: 225px;
}
.sec_intro .content_main .ani_images {
overflow: hidden;
}
.sec_intro .content_main .ani_images,
.sec_intro .content_main .ani_images .inner {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) {
.sec_intro .content_main .ani_images .inner {
padding: 0 20px;
}
}
.sec_intro .content_main .ani_images .inner .ani {
overflow: hidden;
position: relative;
height: 100%;
display: flex;
align-items: center;
margin: 0 -40px;
z-index: 1;
}
.sec_intro .content_main .ani_images .inner .ani .wrap .item {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
}
@media (min-width: 769px) {
.sec_intro .content_main .ani_images .inner .ani .wrap .item {
padding: 20px 0;
}
}
.sec_intro .content_main .ani_images .inner .ani .wrap .item .icon {
width: 10%;
z-index: 9;
flex-shrink: 0;
border-radius: 50%;
box-shadow: 0 9px 36px 0 rgba(0, 56, 255, 0.24);
}
.sec_intro .content_main .ani_images .inner .ani .wrap .item .box_wrap {
overflow: hidden;
animation-name: aniwidth;
animation-duration: 1.8s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.sec_intro .content_main .ani_images .inner .ani .wrap .item .box_wrap .box {
width: 200px;
}
@media (min-width: 769px) {
.sec_intro .content_main .ani_images .inner .ani .wrap .item .box_wrap .box {
width: 350px;
}
}
.sec_intro .content_main .ani_images .inner .ani .wrap .item:nth-child(2n) {
flex-direction: row-reverse;
}
.sec_intro
.content_main
.ani_images
.inner
.ani
.wrap
.item:nth-child(2n)
.box_wrap {
transform: rotateY(180deg);
}
.sec_intro
.content_main
.ani_images
.inner
.ani
.wrap
.item:nth-child(2n)
.box_wrap
.box {
margin-left: 0;
}
.sec_intro .content_main .ani_images .inner .images {
height: 100%;
position: relative;
z-index: 9;
padding: 60px 0 24px;
flex-shrink: 0;
}
@media (min-width: 769px) {
.sec_intro .content_main .ani_images .inner .images {
padding: 100px 0 24px;
}
}
.sec_intro .content_main .ani_images .inner .images:before {
position: absolute;
content: "";
left: 0;
right: 0;
border-radius: 26px;
box-shadow: 3px 3px 26px 0 rgba(0, 56, 255, 0.24);
z-index: -1;
top: 70px;
bottom: 50px;
}
@media (min-width: 769px) {
.sec_intro .content_main .ani_images .inner .images:before {
top: 110px;
bottom: 30px;
}
}
.sec_intro .content_main .ani_images .inner .images > img {
border-radius: 20px;
overflow: hidden;
width: 144px;
height: auto;
}
@media (min-width: 769px) {
.sec_intro .content_main .ani_images .inner .images > img {
height: 100%;
width: auto;
}
}
.sec_intro .content_main .ani_images .inner .images .deco3 {
width: 32.0388349515%;
position: absolute;
top: 100px;
right: 0;
transform: translate(65%, -50%);
z-index: -1;
}
@media (min-width: 769px) {
.sec_intro .content_main .ani_images .inner .images .deco3 {
width: 41.7475728155%;
transform: translate(65%, -50%);
}
}
.sec_intro .content_main .ani_images .inner .images .deco2 {
width: 19.4174757282%;
position: absolute;
bottom: 40px;
right: 0;
transform: translate(80%);
z-index: -1;
}
@media (min-width: 769px) {
.sec_intro .content_main .ani_images .inner .images .deco2 {
width: 29.1262135922%;
transform: translate(180%);
}
}
.sec_intro .content_main .ani_images .inner .images .deco1 {
width: 24.2718446602%;
position: absolute;
top: 100px;
left: 0;
transform: translate(-50%, 110%);
}
@media (min-width: 769px) {
.sec_intro .content_main .ani_images .inner .images .deco1 {
width: 38.8349514563%;
transform: translate(-140%, 110%);
}
}
@keyframes anicon {
0% {
right: 100%;
}
to {
right: -10px;
}
}
@keyframes aniconleft {
0% {
left: 100%;
}
to {
left: -10px;
}
}
@keyframes aniwidth {
0% {
width: 0;
}
to {
width: 100%;
}
}
.sec_benefic {
background-color: #fff;
}
@media (max-width: 768px) {
.sec_benefic .content_main {
margin-left: -8px;
margin-right: -8px;
}
}
.sec_benefic .item {
width: 50%;
}
@media (max-width: 768px) {
.sec_benefic .item {
padding: 16px 8px;
}
}
@media (min-width: 992px) {
.sec_benefic .item {
width: 33.33%;
}
}
@media (min-width: 1241px) {
.sec_benefic .item {
width: 25%;
}
}
@media (max-width: 768px) {
.sec_benefic .item .icon {
width: 48px;
height: 48px;
}
.sec_benefic .item .text br {
display: none;
}
}
.sec_feature {
background-color: #fff;
}
@media (max-width: 768px) {
.sec_feature {
padding: 0 0 20px;
}
}
.sec_feature .content_main {
background-color: #f6f6f7;
border-radius: 24px;
padding-bottom: 0;
}
@media (max-width: 768px) {
.sec_feature .content_main {
padding: 24px 16px;
}
.sec_feature .content_main h2 {
max-width: 287px;
margin-left: auto;
margin-right: auto;
}
.sec_feature .content_tab {
margin-top: 16px;
}
}
.sec_feature .nav_tab {
font-size: 14px;
line-height: 21px;
font-weight: 500;
}
.sec_feature .nav_tab .slick-arrow {
height: 37px;
width: 50px;
z-index: 9;
top: 0;
display: block !important;
transform: translate(0);
}
.sec_feature .nav_tab .slick-arrow:after {
display: none;
}
.sec_feature .nav_tab .slick-arrow:before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "";
width: 16px;
height: 16px;
background-image: url(../../../../resources/zoa-landing/v122023/images/icon/icon_down.svg);
background-repeat: no-repeat;
background-size: 10px;
background-position: 50%;
opacity: 1;
margin: auto;
border-radius: 4px;
}
.sec_feature .nav_tab .slick-arrow[aria-disabled="true"] {
display: none !important;
}
.sec_feature .nav_tab .slick-prev {
left: 0;
background: linear-gradient(
90deg,
#fff,
hsla(0, 0%, 100%, 0.85),
hsla(0, 0%, 100%, 0)
);
}
.sec_feature .nav_tab .slick-prev:before {
transform: rotate(90deg);
right: auto;
}
.sec_feature .nav_tab .slick-next {
right: 0;
background: linear-gradient(
270deg,
#fff,
hsla(0, 0%, 100%, 0.85),
hsla(0, 0%, 100%, 0)
);
}
.sec_feature .nav_tab .slick-next:before {
transform: rotate(-90deg);
left: auto;
}
.sec_feature .nav_tab .slick-current li,
.sec_feature .nav_tab .slick-current li:hover {
color: #fff;
background-color: #0068ff;
}
.sec_feature .nav_tab ul {
background-color: #fff;
}
.sec_feature .nav_tab ul li {
width: 25%;
padding: 4px;
border-radius: 4px;
transition: all 0.3s;
cursor: pointer;
text-align: center;
}
@media (max-width: 768px) {
.sec_feature .nav_tab ul li {
min-width: 112px;
padding: 4px 8px;
margin-left: 4px;
white-space: nowrap;
}
}
.sec_feature .nav_tab ul li:hover {
color: #0068ff;
background-color: #e5f0ff;
}
.sec_feature .nav_tab ul li.slick-current {
color: #fff;
background-color: #0068ff;
}
@media (min-width: 769px) {
.sec_feature .nav_tab ul li.active {
color: #fff;
background-color: #0068ff;
}
}
.sec_feature .content_tab {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.sec_feature .content_tab .content {
width: 100%;
max-width: 420px;
}
@media (max-width: 768px) {
.sec_feature .content_tab .content {
padding-top: 0;
}
}
.sec_feature .content_tab .slider_tab {
margin: 0 -16px;
}
@media (min-width: 769px) {
.sec_feature .content_tab .slider_tab {
margin: 0 -40px;
}
}
.sec_feature .content_tab .slider_tab .item {
padding: 16px 16px 0;
}
@media (max-width: 768px) {
.sec_feature .content_tab .slider_tab .item {
flex-direction: column;
align-items: center;
}
}
@media (min-width: 769px) {
.sec_feature .content_tab .slider_tab .item {
padding: 40px;
}
}
.sec_feature .content_tab .images {
width: 210px;
flex-shrink: 0;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 9px 36px 0 rgba(0, 56, 255, 0.24);
}
.sec_feature .content_tab .qrcode {
width: 170px;
background-color: #fff;
border-radius: 8px;
padding: 24px 8px 16px;
text-align: center;
}
@media (max-width: 768px) {
.sec_feature .content_tab .qrcode {
display: none;
}
}
.sec_feature .content_tab .qrcode .code {
width: 80px;
margin: auto;
}
.sec_feature .content_tab .qrcode .text {
border-top: 1px solid #efefef;
}
@media (max-width: 768px) {
.sec_feature .feature_other .row_item {
flex-direction: column;
}
}
@media (min-width: 769px) {
.sec_feature .feature_other .row_item:nth-child(2n) {
flex-direction: row-reverse;
}
}
.sec_feature .feature_other .row_item .content {
max-width: 480px;
}
.sec_feature .feature_other .row_item .images {
max-width: 280px;
}
@media (min-width: 769px) {
.sec_feature .feature_other .row_item .images {
max-width: 480px;
}
}
.sec_trip {
background-color: #003889;
background-image: linear-gradient(280deg, #1a0a60 3.76%, #4113c6 145.85%);
color: #fff;
position: relative;
overflow: hidden;
}
.sec_trip:before {
position: absolute;
content: "";
top: 60px;
bottom: 60px;
left: 0;
right: 0;
background-image: url(../../../../resources/zoa-landing/v122023/images/home/sec_trip_bg1.png);
background-repeat: repeat;
background-size: 80%;
}
.sec_trip .block_main {
position: relative;
}
.sec_trip .trip_inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 40px;
}
@media (min-width: 769px) {
.sec_trip .trip_inner {
height: calc(100vh - 72px);
}
}
.sec_trip .trip_inner .block_head {
flex-shrink: 0;
}
.sec_trip .trip_inner .block_main {
padding-bottom: 40px;
}
@media (min-width: 769px) {
.sec_trip .trip_inner .block_main .content_main {
height: 100%;
display: flex;
justify-content: space-between;
}
}
.sec_trip .trip_inner .block_main .nav-listing__item__link {
pointer-events: none;
}
@media (max-width: 768px) {
.sec_trip .trip_inner .block_main .nav-listing__item__link .des {
display: none;
}
}
.sec_trip .trip_inner .block_main .trip_content,
.sec_trip .trip_inner .block_main .trip_nav {
position: relative;
}
@media (min-width: 769px) {
.sec_trip .trip_inner .block_main .trip_content,
.sec_trip .trip_inner .block_main .trip_nav {
width: 50%;
}
}
.sec_trip .trip_inner .block_main .trip_content .slick-list,
.sec_trip .trip_inner .block_main .trip_content .slick-track,
.sec_trip .trip_inner .block_main .trip_nav .slick-list,
.sec_trip .trip_inner .block_main .trip_nav .slick-track {
height: 100% !important;
overflow: hidden;
}
.sec_trip .trip_inner .block_main .trip_content ul,
.sec_trip .trip_inner .block_main .trip_nav ul {
position: relative;
counter-reset: li;
gap: 12px;
}
@media (min-width: 769px) {
.sec_trip .trip_inner .block_main .trip_content ul,
.sec_trip .trip_inner .block_main .trip_nav ul {
flex-wrap: wrap;
display: flex;
height: 100%;
align-content: space-between;
}
.sec_trip .trip_inner .block_main .trip_content ul:before,
.sec_trip .trip_inner .block_main .trip_nav ul:before {
position: absolute;
top: 40px;
bottom: 80px;
left: 23px;
width: 2px;
content: "";
background-color: #0047ad;
}
}
.sec_trip .trip_inner .block_main .trip_content ul li,
.sec_trip .trip_inner .block_main .trip_nav ul li {
width: 100%;
color: #84b6ff;
position: relative;
display: flex;
counter-increment: li;
transition: all 0.3s;
cursor: pointer;
gap: 16px;
}
@media (max-width: 768px) {
.sec_trip .trip_inner .block_main .trip_content ul li,
.sec_trip .trip_inner .block_main .trip_nav ul li {
width: 290px;
flex-shrink: 0;
padding-bottom: 16px;
}
}
@media (min-width: 769px) {
.sec_trip .trip_inner .block_main .trip_content ul li,
.sec_trip .trip_inner .block_main .trip_nav ul li {
gap: 55px;
}
}
.sec_trip .trip_inner .block_main .trip_content ul li:before,
.sec_trip .trip_inner .block_main .trip_nav ul li:before {
content: counter(li);
text-align: center;
display: block;
flex-shrink: 0;
color: #3b8bff;
font-weight: 700;
border-radius: 50%;
background-color: #0047ad;
transition: all 0.3s;
width: 32px;
height: 32px;
line-height: 32px;
font-size: 16px;
}
@media (min-width: 769px) {
.sec_trip .trip_inner .block_main .trip_content ul li:before,
.sec_trip .trip_inner .block_main .trip_nav ul li:before {
font-size: 24px;
width: 48px;
height: 48px;
line-height: 48px;
}
}
.sec_trip .trip_inner .block_main .trip_content ul li:after,
.sec_trip .trip_inner .block_main .trip_nav ul li:after {
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
content: "";
border: 2px solid #0068ff;
opacity: 0;
transition: all 0.3s;
width: 32px;
height: 32px;
}
@media (min-width: 769px) {
.sec_trip .trip_inner .block_main .trip_content ul li:after,
.sec_trip .trip_inner .block_main .trip_nav ul li:after {
border-width: 4px;
width: 48px;
height: 48px;
}
}
.sec_trip .trip_inner .block_main .trip_content ul li.active,
.sec_trip .trip_inner .block_main .trip_nav ul li.active {
color: #fff;
}
@media (max-width: 768px) {
.sec_trip .trip_inner .block_main .trip_content ul li.active,
.sec_trip .trip_inner .block_main .trip_nav ul li.active {
border-bottom-color: #fff;
}
}
.sec_trip .trip_inner .block_main .trip_content ul li.active:before,
.sec_trip .trip_inner .block_main .trip_nav ul li.active:before {
color: #0047ad;
background-color: #fff;
}
.sec_trip .trip_inner .block_main .trip_content ul li.active:after,
.sec_trip .trip_inner .block_main .trip_nav ul li.active:after {
opacity: 1;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(1turn);
}
}
@media (max-width: 768px) {
.sec_trip .trip_inner .block_main .trip_nav {
overflow: auto;
margin-bottom: 16px;
}
.sec_trip .trip_inner .block_main .trip_nav::-webkit-scrollbar {
display: none;
}
}
.sec_trip .trip_inner .block_main .trip_content {
max-width: 580px;
justify-content: flex-end;
position: relative;
}
.sec_trip .trip_inner .block_main .trip_content:before {
position: absolute;
top: -80px;
bottom: -40px;
left: -30px;
right: -80;
content: "";
background-image: url(../../../../resources/zoa-landing/v122023/images/home/sec_trip_bg2.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: 50%;
pointer-events: none;
}
.sec_trip .trip_inner .block_main .trip_content img {
max-height: calc(100vh - 72px - 150px);
width: auto !important;
margin-left: auto;
}
.sec_trip #nav-listing-underline {
position: absolute;
left: 0;
width: 4px;
background-color: #fff;
transition: top 0.2s ease-out, height 0.2s ease-out;
}
.heading_banner {
text-align: center;
background-color: #fff;
background-image: url(../../../../resources/zoa-landing/v122023/images/bg.png);
background-size: 100% 100%;
}
.heading_banner .container {
display: flex;
flex-direction: column;
align-items: center;
justify-items: center;
justify-content: center;
min-height: 188px;
padding: 24px 0;
}
.heading_banner .search_news {
max-width: 570px;
width: 100%;
margin: 24px auto 0;
border-radius: 400px;
border: 1px solid #efefef;
background-color: #fff;
display: flex;
align-items: center;
position: relative;
}
.heading_banner .search_news input {
width: 100%;
padding: 12px 162px 12px 24px;
box-sizing: border-box;
background-color: transparent;
height: 61px;
}
@media (min-width: 769px) {
.heading_banner .search_news input {
height: 72px;
}
}
.heading_banner .search_news input:focus {
outline: none;
border: none;
}
.heading_banner .search_news button {
position: absolute;
top: 12px;
right: 12px;
bottom: 12px;
width: 150px;
height: auto;
flex-shrink: 0;
text-align: center;
border-radius: 80px;
transition: all 0.3s;
}
.heading_banner .search_news button:hover {
box-shadow: 0 9px 36px 0 rgba(0, 56, 255, 0.24);
}
@media (max-width: 768px) {
.heading_block {
flex-direction: column;
gap: 12px;
}
.heading_block .list_categoty {
overflow: auto;
width: 100%;
}
.heading_block .list_categoty::-webkit-scrollbar {
display: none;
}
}
.heading_block .list_categoty ul {
gap: 0 24px;
}
@media (max-width: 768px) {
.heading_block .list_categoty ul {
flex-wrap: nowrap;
white-space: nowrap;
}
}
@media (min-width: 769px) {
.heading_block .list_categoty ul {
gap: 24px 48px;
}
}
.heading_block .list_categoty li {
cursor: pointer;
}
.heading_block .list_categoty li span {
display: block;
padding-bottom: 10px;
position: relative;
}
.heading_block .list_categoty li span:before {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
content: "";
opacity: 0;
background-color: #0068ff;
transition: all 0.3s;
}
.heading_block .list_categoty li.active,
.heading_block .list_categoty li:hover {
color: #0068ff;
}
.heading_block .list_categoty li.active span:before {
opacity: 1;
}
@media (max-width: 768px) {
.heading_block .btn_filter {
width: 100%;
}
.heading_block .btn_filter .dropdown_btn {
justify-content: center;
}
}
.heading_block .btn_filter .dropdown_content {
display: block;
pointer-events: none;
opacity: 0;
transition: all 0.3s;
}
.heading_block .btn_filter:hover .dropdown_content {
opacity: 1;
pointer-events: all;
}
.news_list {
gap: 24px;
}
@media (max-width: 768px) {
.news_list {
margin-top: 24px;
}
}
@media (min-width: 769px) {
.news_list {
gap: 42px;
}
}
.news_list .item_blog {
width: 100%;
}
@media (min-width: 769px) {
.news_list .item_blog {
width: calc(50% - 21px);
}
}
@media (min-width: 992px) {
.news_list .item_blog {
width: calc(33.33% - 28px);
}
}
.item_blog {
display: block;
border-radius: 8px;
overflow: hidden;
border: 1px solid #efefef;
background: #fff;
transition: all 0.3s;
}
.item_blog .imgDrop {
padding-top: 53.7634408602%;
}
.item_blog .content {
padding: 16px 24px;
}
.item_blog:hover {
box-shadow: 0 3.67347px 18.36735px 0 rgba(0, 0, 0, 0.08);
}
.item_blog:hover .ttl {
color: #0068ff;
}
.item_blog.is-horizontal {
display: flex;
gap: 16px;
border: none;
}
.item_blog.is-horizontal:hover {
box-shadow: none;
}
.item_blog.is-horizontal .images {
width: 80px;
flex-shrink: 0;
}
.item_blog.is-horizontal .images .imgDrop {
padding-top: 100%;
border-radius: 8px;
}
.item_blog.is-horizontal .content {
width: 100%;
padding: 0;
}
.list_page ul {
gap: 1px;
}
.list_page ul li {
width: 32px;
height: 32px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.list_page ul li:hover {
background-color: #efefef;
}
.list_page ul li.active {
background-color: #e5f0ff;
color: #0068ff;
}
.list_page ul li.disabled {
opacity: 0.5;
pointer-events: none;
}
.news_detail .container {
gap: 40px;
}
@media (max-width: 991px) {
.news_detail .container {
flex-direction: column;
gap: 24px;
}
}
.news_detail .block_sidebar {
flex-shrink: 0;
max-width: 480px;
}
@media (min-width: 992px) {
.news_detail .block_sidebar {
width: 360px;
}
}
.block_detail {
width: 100%;
}
.block_detail img {
max-width: 100%;
}
.block_search form {
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.06);
border-radius: 8px;
border: 1px solid #f6f6f7;
background: #fff;
display: flex;
overflow: hidden;
}
.block_search input {
height: 48px;
width: 100%;
background: transparent;
border: none;
padding: 12px;
}
.block_search input:focus {
border: none;
outline: none;
}
.block_search .btn_submit {
width: 60px;
flex-shrink: 0;
transition: all 0.3s;
}
.block_search .btn_submit:focus {
border: none;
outline: none;
}
.block_search .btn_submit:hover {
background-color: #efefef;
}
.block_list .item_blog {
padding: 16px 0;
}
.block_list .item_blog .content .info {
font-size: 12px;
gap: 8px;
}
.block_list .item_blog .content .ttl {
margin-top: 8px;
font-size: 14px;
line-height: 20px;
}
.block_list .item_blog + .item_blog {
border-top: 1px solid #efefef;
}
.block_category ul li {
border-bottom: 1px solid #efefef;
}
.block_category ul li a {
display: block;
width: 100%;
padding: 16px 0;
}
.block_category ul li:hover a {
color: #0068ff;
}
.block_tags ul li {
padding: 4px 8px;
border-radius: 4px;
background-color: #f6f6f7;
}
.footing {
background-color: #f6f6f7;
border-radius: 8px;
padding: 16px;
}
@media (max-width: 768px) {
.footing {
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
}
.footing .btn.active {
background-color: #0068ff;
color: #fff;
}
.footing .btn.active .icon {
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0)
hue-rotate(231deg) brightness(103%) contrast(106%);
}
.modal_feedback .modal_content {
max-width: 590px;
}
.modal_feedback .modal_content .modal_body {
padding: 24px;
}
.modal_feedback .modal_content form {
padding: 12px;
margin-bottom: 0;
}
.modal_feedback .modal_content form input[type="radio"] {
display: none;
}
.modal_feedback .modal_content form input[type="radio"] + label {
position: relative;
padding-left: 28px;
}
.modal_feedback .modal_content form input[type="radio"] + label:after,
.modal_feedback .modal_content form input[type="radio"] + label:before {
content: "";
position: absolute;
left: 0;
top: 1px;
width: 20px;
height: 20px;
border: 2px solid #8d8d8f;
border-radius: 100%;
background: #fff;
}
.modal_feedback .modal_content form input:checked + label:before {
background-color: #0068ff;
border-color: #0068ff;
}
.modal_feedback .modal_content form input:checked + label:after {
transform: scale(0.4);
border-color: #fff;
}
.modal_feedback .modal_content form textarea {
width: 100%;
border: 1px solid #d2d0d9;
padding: 12px 16px;
border-radius: 8px;
height: 120px;
resize: none;
}
.modal_feedback .modal_content form textarea:focus {
border-color: #0068ff;
outline: none;
}
.modal_feedback .modal_content form textarea::placeholder {
font-size: 14px;
}
.modal_noti .modal_content {
max-width: 590px;
background-color: transparent;
box-shadow: none;
display: flex;
align-items: center;
justify-content: center;
}
.modal_noti .text_noti {
border-radius: 4px;
background: rgba(52, 52, 54, 0.9);
padding: 16px;
color: #fff;
}
.ttl_main {
font-family: Roboto;
text-align: center;
letter-spacing: -0.002em;
color: #343436;
font-size: 27px;
line-height: 32px;
}
@media (min-width: 769px) {
.ttl_main {
font-size: 28px;
line-height: 35px;
}
}
.questions {
padding: 30px 0 0;
}
@media (min-width: 321px) {
.questions {
padding: 60px 0 0;
}
}
@media (min-width: 769px) {
.questions.home {
display: none;
}
}
.questions .images {
margin-top: 40px;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 769px) {
.questions .images {
max-width: 388px;
width: 100%;
}
}
.questions .ttl_main {
font-size: 28px;
}
.questions .accordion {
border-top: 1px solid #d6d5dd;
margin-top: 24px;
}
@media (min-width: 769px) {
.questions .accordion {
max-width: 760px;
margin-top: 50px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
}
.questions .accordion .item {
border-bottom: 1px solid #d6d5dd;
font-size: 18px;
line-height: 27px;
}
.questions .accordion .item .item_btn {
padding: 12px 30px 12px 0;
color: #343436;
position: relative;
}
.questions .accordion .item .item_btn:before {
position: absolute;
content: "";
width: 30px;
height: 30px;
top: 0;
bottom: 0;
margin: auto;
right: 0;
background-image: url(../../../../resources/zoa-landing/images/icon/ic_down.svg);
background-size: 17px;
background-repeat: no-repeat;
background-position: 50%;
transform: rotate(-90deg);
transition: all 0.2s;
}
.questions .accordion .item .submenu {
display: none;
}
.questions .accordion .item .submenu .content {
padding: 6px 0 12px;
}
.questions .accordion .item.active .item_btn:before {
transform: rotate(0deg);
}
.questions .accordion .item.active .item_content {
display: block !important;
}
.questions .sec_research {
padding: 0;
}
.sec_research {
padding: 30px 0 0;
}
@media (min-width: 769px) {
.sec_research {
padding: 60px 0;
}
}
.sec_research .ttl_main {
font-size: 32px;
line-height: 38px;
}
.sec_research .form_research {
margin-top: 24px;
max-width: 600px;
width: 100%;
margin-left: auto;
margin-right: auto;
position: relative;
}
.sec_research .form_research .input_search {
border: 1px solid #f6f6f7;
width: 100%;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.06);
border-radius: 8px;
padding: 16px 20px;
height: 60px;
}
@media (min-width: 769px) {
.sec_research .form_research .input_search {
height: 75px;
padding: 24px 70px 24px 24px;
}
}
.sec_research .form_research .input_search:focus {
border: none;
outline: none;
}
.sec_research .form_research .input_search::placeholder {
font-size: 18px;
line-height: 27px;
color: #8d8d8f;
}
.sec_research .form_research .input_submit {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 70px;
background-image: url(../../../../resources/zoa-landing/images/icon/icon_search.svg);
background-repeat: no-repeat;
background-position: 50%;
border: none;
background-color: transparent;
}
.sec_research .nav_tav {
overflow-x: scroll;
margin-top: 24px;
}
@media (min-width: 769px) {
.sec_research .nav_tav {
margin-top: 40px;
justify-content: center;
}
}
.sec_research .nav_tav::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #f5f5f5;
cursor: pointer;
}
@media (min-width: 769px) {
.sec_research .nav_tav::-webkit-scrollbar-track {
display: none;
}
}
.sec_research .nav_tav::-webkit-scrollbar {
height: 8px;
background-color: #f5f5f5;
}
@media (min-width: 769px) {
.sec_research .nav_tav::-webkit-scrollbar {
display: none;
}
}
.sec_research .nav_tav::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #ccc;
}
@media (min-width: 769px) {
.sec_research .nav_tav::-webkit-scrollbar-thumb {
display: none;
}
}
.sec_research .nav_tav ul {
padding-bottom: 20px;
}
@media (max-width: 768px) {
.sec_research .nav_tav ul {
display: table;
}
}
.sec_research .nav_tav ul li {
display: table-cell;
}
.sec_research .nav_tav ul li + li {
color: #343436;
padding-left: 30px;
}
@media (min-width: 769px) {
.sec_research .nav_tav ul li + li {
padding-left: 48px;
}
}
.sec_research .nav_tav ul li a {
color: #343436;
white-space: nowrap;
display: block;
font-family: Roboto, Calibri, "sans-serif";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 20px;
}
@media (min-width: 1241px) {
.sec_research .nav_tav ul li a {
font-size: 16px;
line-height: 24px;
}
}
@media (min-width: 769px) {
.sec_research .nav_tav ul li:hover a {
color: #0068ff;
}
}
.sec_research .nav_tav ul li.active a {
color: #0068ff;
position: relative;
}
.sec_research .nav_tav ul li.active a:before {
position: absolute;
content: "";
bottom: -10px;
left: 0;
right: 0;
height: 2px;
background: #0068ff;
}
.sec_research .list_item {
margin-left: -16px;
margin-right: -16px;
}
@media (max-width: 768px) {
.sec_research .list_item {
margin-top: 16px;
}
}
.sec_research .list_item .col {
padding-left: 16px;
padding-right: 16px;
width: 100%;
}
@media (min-width: 769px) {
.sec_research .list_item .col {
width: 50%;
}
}
@media (min-width: 992px) {
.sec_research .list_item .col {
width: 33.33%;
}
}
.sec_research .list_item .item {
display: block;
background: #fff;
border: 1px solid #e8e7ec;
border-radius: 10px;
margin-top: 8px;
}
@media (min-width: 769px) {
.sec_research .list_item .item {
margin-top: 40px;
}
}
.sec_research .list_item .item .imgDrop {
padding-top: 56.4102564103%;
border-radius: 10px 10px 0 0;
}
.sec_research .list_item .item .content {
padding: 8px 16px;
}
.sec_research .list_item .item .content .category {
background: #bdbbc3;
border-radius: 2px;
color: #fff;
display: inline-block;
font-size: 12px;
line-height: 18px;
padding: 2px 4px;
margin-top: 2px;
margin-right: 2px;
}
.sec_research .list_item .item .content .category:hover {
background-color: #0068ff;
}
.sec_research .list_item .item .content .ttl_item {
font-weight: 700;
margin-top: 8px;
color: #343436;
display: block;
}
.sec_research .list_item .item .content .date {
margin-top: 8px;
color: #8d8d8f;
font-size: 16px;
line-height: 24px;
}
.sec_research .list_item .item:hover .content .ttl_item {
color: #0068ff;
}
@media (max-width: 768px) {
.sec_research.sec_contact .list_item {
margin-top: 0;
}
}
@media (min-width: 769px) {
.sec_research.sec_contact .list_item .item {
margin-top: 24px;
}
}
.flexBox {
display: flex;
flex-wrap: wrap;
}
.flexBox.center {
justify-content: center;
}
.flexBox.space {
justify-content: space-between;
}
.flexBox.midle {
align-items: center;
}
.flexBox.bottom {
align-items: flex-end;
}
.flexBox.end {
justify-content: flex-end;
}
.flexBox:after,
.flexBox:before {
display: none;
}
.slick-slider {
box-sizing: border-box;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list,
.slick-slider {
position: relative;
display: block;
}
.slick-list {
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-list,
.slick-slider .slick-track {
transform: translateZ(0);
}
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:after,
.slick-track:before {
display: table;
content: "";
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir="rtl"] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
.slick-next,
.slick-prev {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
transform: translateY(-50%);
cursor: pointer;
border: none;
}
.slick-next,
.slick-next:focus,
.slick-next:hover,
.slick-prev,
.slick-prev:focus,
.slick-prev:hover {
color: transparent;
outline: none;
background: transparent;
}
.slick-next:focus:before,
.slick-next:hover:before,
.slick-prev:focus:before,
.slick-prev:hover:before {
opacity: 1;
}
.slick-next.slick-disabled:before,
.slick-prev.slick-disabled:before {
opacity: 0.25;
}
.slick-next:before,
.slick-prev:before {
font-family: slick;
font-size: 20px;
line-height: 1;
opacity: 0.75;
color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
left: -25px;
}
[dir="rtl"] .slick-prev {
right: -25px;
left: auto;
}
.slick-prev:before {
content: "←";
}
[dir="rtl"] .slick-prev:before {
content: "→";
}
.slick-next {
right: -25px;
}
[dir="rtl"] .slick-next {
right: auto;
left: -25px;
}
.slick-next:before {
content: "→";
}
[dir="rtl"] .slick-next:before {
content: "←";
}
.slick-dotted.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
position: absolute;
bottom: -25px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li {
position: relative;
display: inline-block;
margin: 0 5px;
padding: 0;
}
.slick-dots li,
.slick-dots li button {
width: 20px;
height: 20px;
cursor: pointer;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
padding: 5px;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:focus,
.slick-dots li button:hover {
outline: none;
}
.slick-dots li button:focus:before,
.slick-dots li button:hover:before {
opacity: 1;
}
.slick-dots li button:before {
font-family: slick;
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: "•";
text-align: center;
opacity: 0.25;
color: #000;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
opacity: 0.75;
color: #000;
}
.slick-slide {
height: auto;
}
.slider .slick-track {
margin: 0;
}
.slider .cursor-click {
display: block !important;
}
.slider.slider_banner,
.slider.slider_banner .item {
border-radius: 8px;
overflow: hidden;
}
.slider.slider_banner .slick-dots {
position: absolute;
bottom: 8px;
left: 0;
right: 0;
}
.slider.slick-flex .slick-track {
display: flex;
}
.slider.slick-flex .slick-slide .column,
.slider.slick-flex .slick-slide .item,
.slider.slick-flex .slick-slide > div,
.slider.slick-flex .slick-track .slick-slide > div > * {
height: 100%;
}
.slider .slick-arrow {
width: 70px;
height: 100%;
z-index: 99;
}
.slider .slick-arrow.slick-disabled {
display: none !important;
}
.slider .slick-arrow:after,
.slider .slick-arrow:before {
position: absolute;
content: "";
opacity: 1;
pointer-events: none;
background-repeat: no-repeat;
background-position: 50%;
}
.slider .slick-arrow:before {
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
width: 30px;
margin: auto;
}
.slider .slick-arrow:after {
z-index: -1;
top: 0;
bottom: -1px;
width: 160px;
}
.slider .slick-arrow.slick-prev {
left: 0;
}
.slider .slick-arrow.slick-prev:before {
background-image: url(https://stc-oa.zdn.vn/resources/zoa-landing/v122023/images/icon/arr_prev.png);
}
.slider .slick-arrow.slick-prev:after {
left: 0;
background-image: linear-gradient(
270deg,
hsla(0, 0%, 100%, 0),
hsla(0, 0%, 100%, 0.95),
#fafafa
);
}
.slider .slick-arrow.slick-next {
right: 0;
}
.slider .slick-arrow.slick-next:before {
background-image: url(https://stc-oa.zdn.vn/resources/zoa-landing/v122023/images/icon/arr_next.png);
}
.slider .slick-arrow.slick-next:after {
right: 0;
background-image: linear-gradient(
90deg,
hsla(0, 0%, 100%, 0),
hsla(0, 0%, 100%, 0.95),
#fafafa
);
}
.slider.mask_white .slick-arrow.slick-prev:after {
background-image: linear-gradient(
270deg,
hsla(0, 0%, 100%, 0),
hsla(0, 0%, 100%, 0.95),
#fff
);
}
.slider.mask_white .slick-arrow.slick-next:after {
background-image: linear-gradient(
90deg,
hsla(0, 0%, 100%, 0),
hsla(0, 0%, 100%, 0.95),
#fff
);
}
.slider.has_shadow {
margin-top: -10px;
margin-bottom: -10px;
}
.slider.has_shadow .slick-track {
padding-top: 10px;
padding-bottom: 10px;
}
.slider.has_shadow .slick-arrow:after {
top: 10px;
bottom: 10px;
}
.slider.slick-dotted {
margin-bottom: 0;
}
.slider .slick-dots {
bottom: -3px;
}
.slider .slick-dots li {
width: auto;
height: auto;
margin: 0 2px;
}
.slider .slick-dots li button {
display: block;
padding: 0;
width: 3px;
height: 3px;
background-color: #efefef;
border-radius: 50%;
transition: all 0.3s;
}
.slider .slick-dots li button:before {
display: none;
}
.slider .slick-dots li.slick-active button {
background-color: #0068ff;
width: 8px;
}
.banner {
min-height: calc(100vh - 90px);
position: relative;
display: flex;
align-items: center;
justify-content: center;
background-size: 100% 100%;
color: #fff;
background-image: url(https://stc-oa.zdn.vn/resources/zoa-landing/v122023/images/bg_banner_sp.png);
}
@media (min-width: 769px) {
.banner {
background-image: url(https://stc-oa.zdn.vn/resources/zoa-landing/v122023/images/bg_banner.png);
min-height: calc(100vh - 200px);
}
}
.banner .content_main {
width: 100%;
max-width: 1440px;
}
@media (max-width: 991px) {
.banner .content_main {
flex-direction: column;
}
}
@media (min-width: 992px) {
.banner .content_main {
padding: 20px 30px 20px 80px;
}
}
@media (max-width: 768px) {
.banner .content_main .content {
max-width: 320px;
}
}
@media (max-width: 991px) {
.banner .content_main .content {
order: 1;
text-align: center;
margin-top: 24px;
}
}
@media (min-width: 769px) {
.banner .content_main .content {
width: 50%;
flex-shrink: 0;
margin-right: 60px;
}
}
@media (max-width: 768px) {
.banner .content_main .content .text {
font-size: 16px;
line-height: 24px;
margin-top: 16px;
}
}
@media (min-width: 992px) {
.banner .content_main .images {
padding-right: 30px;
}
}
@media (max-width: 991px) {
.banner .content_main .images img {
width: 100%;
height: auto;
}
}
@media (min-width: 992px) {
.banner .content_main .images img {
max-height: calc(100vh - 72px);
height: 100%;
width: auto;
}
}
@media (max-width: 768px) {
.sec_product {
padding: 0 0 40px;
}
}
.sec_product .logo_product {
flex-wrap: wrap;
}
@media (max-width: 768px) {
.sec_product .logo_product {
margin-top: 24px;
}
}
.sec_product .logo_product .item {
max-width: calc(50% - 12px);
width: 100%;
padding: 16px 24px;
text-align: center;
border-radius: 12px;
border: 1px solid #efefef;
background-color: #fff;
display: block;
transition: all 0.3s;
}
.sec_product .logo_product .item:hover {
box-shadow: 0 9px 36px 0 rgba(0, 56, 255, 0.24);
}
@media (min-width: 769px) {
.sec_product .logo_product .item {
max-width: 240px;
padding: 24px 8px;
}
}
.sec_product .logo_product .item img {
display: block;
height: 32px;
width: auto;
margin: auto;
}
.sec_product .content_main {
border-radius: 24px;
background-color: #e5f0ff;
}
@media (max-width: 768px) {
.sec_product .content_main {
flex-direction: column;
gap: 24px;
padding: 40px 24px 24px;
text-align: center;
margin-top: 40px;
}
}
.sec_product .content_main .images {
max-width: 374px;
width: 100%;
}
@media (max-width: 768px) {
.sec_product .content_main .images {
margin: 0 -24px;
width: auto;
}
}
.sidebar_heading {
padding: 8px 16px;
font-size: 16px;
border-radius: 8px 8px 0 0;
}
@media (min-width: 1025px) {
.sidebar_heading {
display: none;
}
}
.sidebar_heading .category li {
display: flex;
align-items: center;
white-space: nowrap;
}
.sidebar_heading .category li:not(.active):after {
display: block;
content: "/";
margin: 0 8px;
}
.sidebar_heading .category li.active {
padding: 4px 8px;
border-radius: 4px;
background-color: #e5f0ff;
color: #0068ff;
}
.sidebar_heading .category li.active .icon {
filter: brightness(0) saturate(100%) invert(24%) sepia(58%) saturate(4990%)
hue-rotate(211deg) brightness(104%) contrast(103%);
}
.sidebar_heading.show {
background-color: #e5f0ff;
}
.sidebar_heading.show .category li.active {
background-color: #fff;
}
@media (max-width: 1024px) {
.acc_container {
display: none;
border-top: 1px solid #0068ff;
}
}
.acc_container .acc_item .acc_head {
padding: 16px;
cursor: pointer;
}
@media (min-width: 1025px) {
.acc_container .acc_item .acc_head {
padding: 20px 14px;
}
}
.acc_container .acc_item .acc_head.active {
font-weight: 700;
}
@media (min-width: 1025px) {
.acc_container .acc_item .acc_head.active {
font-weight: 500;
color: #0068ff;
}
}
.acc_container .acc_item .acc_head.active .icon {
transform: rotate(180deg);
}
@media (min-width: 1025px) {
.acc_container .acc_item .acc_head.active .icon {
filter: brightness(0) saturate(100%) invert(27%) sepia(81%) saturate(3578%)
hue-rotate(208deg) brightness(99%) contrast(111%);
}
}
.acc_container .acc_item + .acc_item {
border-top: 1px solid #efefef;
}
.acc_container .acc_item .acc_content {
display: none;
}
.acc_container .acc_item .acc_content ul li {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
position: relative;
transition: all 0.3s;
border-top: 1px solid #efefef;
padding: 8px 32px;
}
@media (min-width: 1025px) {
.acc_container .acc_item .acc_content ul li {
padding: 20px 24px;
}
}
.acc_container .acc_item .acc_content ul li .icon {
flex-shrink: 0;
}
@media (max-width: 1024px) {
.acc_container .acc_item .acc_content ul li .icon {
display: none;
}
}
.acc_container .acc_item .acc_content ul li.active,
.acc_container .acc_item .acc_content ul li:hover {
color: #0068ff;
}
@media (min-width: 1025px) {
.acc_container .acc_item .acc_content ul li.active,
.acc_container .acc_item .acc_content ul li:hover {
background-color: #e5f0ff;
}
}
.acc_container .acc_item .acc_content ul li.active {
font-weight: 500;
}
@media (min-width: 1025px) {
.acc_container .acc_item .acc_content ul li.active:before {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
content: "";
background-color: #0068ff;
}
}
.acc_container .acc_item .acc_content ul li.active .icon {
filter: brightness(0) saturate(100%) invert(27%) sepia(81%) saturate(3578%)
hue-rotate(208deg) brightness(99%) contrast(111%);
}
@media (max-width: 1024px) {
.sec_feature {
padding: 24px 0;
}
.sec_feature .container {
flex-direction: column;
}
.sec_feature #sidebar {
border-radius: var(--Radius, 8px);
border: 1px solid #0068ff;
width: auto;
top: 74px;
box-shadow: 0 9px 36px 0 rgba(0, 56, 255, 0.24);
}
}
@media (max-width: 768px) {
.sec_feature #sidebar {
width: 100%;
}
}
@media (max-width: 991px) {
.sec_feature #content_main .inner_wrap {
padding: 0 16px;
}
}
@media (max-width: 768px) {
.feature_detail {
flex-direction: column;
align-items: center;
gap: 24px;
}
}
.feature_detail .content {
width: 100%;
}
.feature_detail .slider {
width: 210px;
flex-shrink: 0;
}
@media (min-width: 769px) {
.feature_detail .slider {
padding-right: 40px;
width: 250px;
}
}
.feature_detail .slider_inner {
border-radius: 24px;
background: var(--neutral-20, #f6f6f7);
padding: 8px;
margin-bottom: 0;
box-shadow: 0 9px 36px 0 rgba(0, 56, 255, 0.24);
}
.feature_detail .slider .slick-dots {
right: -40px;
left: auto;
display: block;
bottom: auto;
top: 50%;
width: auto;
transform: translateY(-50%);
}
.feature_detail .slider .slick-dots li {
display: block;
width: 8px;
height: 8px;
border-radius: 50px;
background-color: #d6d5dd;
margin: 8px 0;
transition: all 0.3s;
}
.feature_detail .slider .slick-dots li button {
display: none;
}
.feature_detail .slider .slick-dots li.slick-active {
height: 24px;
background-color: #0068ff;
}
.feature_detail > .images {
width: 320px;
flex-shrink: 0;
}
.feature_detail .banner_images {
border-radius: 8px;
overflow: hidden;
}
.feature_other {
gap: 24px 40px;
}
@media (max-width: 768px) {
.feature_other {
flex-direction: column;
gap: 24px;
}
}
.feature_other .box_feature {
width: 100%;
}
@media (min-width: 769px) {
.feature_other .box_feature {
width: calc(50% - 20px);
}
}
.box_feature {
padding: 24px;
border-radius: 12px;
}
.box_feature_blue {
background-color: #f2f7ff;
}
.box_feature_blue .list li:before {
background-color: #0068ff;
}
.box_feature_green {
background-color: #f0fff9;
}
.box_feature_green .list li:before {
background-color: #16c47d;
}
.box_feature_green2 {
background-color: #f5fff3;
}
.box_feature_green2 .list li:before {
background-color: #65d952;
}
.box_feature_orange {
background-color: #fff8f2;
}
.box_feature_orange .list li:before {
background-color: #ffa800;
}
.box_feature_red {
background-color: #fff5f5;
}
.box_feature_red .list li:before {
background-color: #e56179;
}
.box_feature_yellow {
background-color: #fffae8;
}
.box_feature_yellow .list li:before {
background-color: #f3c008;
}
.box_feature_brand {
background-color: #f0f3ff;
}
.box_feature_brand .list li:before {
background-color: #0e34fb;
}
.box_feature_violet {
background-color: #fdf3ff;
}
.box_feature_violet .list li:before {
background-color: #c400e3;
}
.box_feature .list li:before {
margin-top: -1px;
background-image: url(../../../../resources/zoa-landing/v122023/images/icon/icon_check_w.svg);
width: 20px;
height: 20px;
background-size: 13px;
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
}
.box_feature .list li + li {
margin-top: 12px;
}
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: #29d;
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
#nprogress .peg {
display: block;
position: absolute;
right: 0;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #29d, 0 0 5px #29d;
opacity: 1;
transform: rotate(3deg) translateY(-4px);
}
#nprogress .spinner {
display: block;
position: fixed;
z-index: 1031;
top: 15px;
right: 15px;
}
#nprogress .spinner-icon {
width: 18px;
height: 18px;
box-sizing: border-box;
border-color: #29d transparent transparent #29d;
border-style: solid;
border-width: 2px;
border-radius: 50%;
animation: nprogress-spinner 0.4s linear infinite;
}
.nprogress-custom-parent {
overflow: hidden;
position: relative;
}
.nprogress-custom-parent #nprogress .bar,
.nprogress-custom-parent #nprogress .spinner {
position: absolute;
}
@keyframes nprogress-spinner {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(1turn);
}
}
@media (max-width: 991px) {
#sidebar {
position: fixed !important;
z-index: 10;
bottom: 0;
top: 72px;
width: 320px;
background-color: #fff;
transform: translateX(-100%);
transition: all 0.3s;
}
}
@media (min-width: 992px) {
#sidebar {
width: 350px;
}
}
@media (max-width: 991px) {
#sidebar .inner_wrap {
border-radius: 0;
height: 100%;
overflow: auto;
}
}
#sidebar.show {
transform: translateX(0);
font-size: 14px;
line-height: 21px;
}
#btn_sidebar {
width: 48px;
height: 48px;
position: fixed;
bottom: 32px;
right: 12px;
z-index: 999;
border-radius: 8px;
box-shadow: 0px 9px 36px 0px rgba(0, 56, 255, 0.24);
border: 1px solid #0068ff;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
@media (min-width: 992px) {
#btn_sidebar {
display: none;
}
}
#btn_sidebar span {
position: absolute;
left: 0;
right: 0;
width: 16px;
height: 2px;
background-color: #69686d;
top: 50%;
transform: translateY(-50%);
margin: auto;
transition: all 0.3s;
}
#btn_sidebar span:before,
#btn_sidebar span:after {
position: absolute;
background-color: #69686d;
content: "";
height: 2px;
left: 0;
width: 100%;
transition: all 0.3s;
}
#btn_sidebar span:before {
top: -5px;
}
#btn_sidebar span:after {
bottom: -5px;
}
#btn_sidebar.active span {
background-color: #fff;
}
#btn_sidebar.active span:before {
top: 0;
transform: rotate(45deg);
}
#btn_sidebar.active span:after {
bottom: 0;
transform: rotate(-45deg);
}
.modal-nav #btn_sidebar {
z-index: 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.
*/
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.
*/
.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;
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;
}
}
/**
* 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://twitter.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.
*/
.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.
*/
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;
}
/**
* 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 {
text-decoration: none;
}
.sidebarItemLinkActive_I1ZP {
color: var(--ifm-color-primary) !important;
}
@media (max-width: 996px) {
.sidebar_re4s {
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.
*/
.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.
*/
.authorCol_Hf19 {
max-width: inherit !important;
flex-grow: 1 !important;
}
.imageOnlyAuthorRow_pa_O {
display: flex;
flex-flow: row wrap;
}
.imageOnlyAuthorCol_G86a {
margin-left: 0.3rem;
margin-right: 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.
*/
.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;
}
/**
* 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;
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;
-webkit-clip-path: inset(0);
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.
*/
.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);
}
/**
* 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_biex {
position: relative;
/* rtl:ignore */
direction: ltr;
border-radius: inherit;
}
.codeBlockTitle_Ktv7 {
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;
}
.codeBlock_bY9V {
--ifm-pre-background: var(--prism-background-color);
margin: 0;
padding: 0;
}
.codeBlockTitle_Ktv7 + .codeBlockContent_biex .codeBlock_bY9V {
border-top-left-radius: 0;
border-top-right-radius: 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;
}
}
.buttonGroup__atx {
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__atx 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__atx button:focus-visible,
.buttonGroup__atx button:hover {
opacity: 1 !important;
}
.theme-code-block:hover .buttonGroup__atx 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.
*/
.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.
*/
/* 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.
*/
: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);
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.
*/
.theme-code-block:hover .copyButtonCopied_obH4 {
opacity: 1 !important;
}
.copyButtonIcons_eSgA {
position: relative;
width: 1.125rem;
height: 1.125rem;
}
.copyButtonIcon_y97N,
.copyButtonSuccessIcon_LjdS {
position: absolute;
top: 0;
left: 0;
fill: currentColor;
opacity: inherit;
width: inherit;
height: inherit;
transition: all var(--ifm-transition-fast) ease;
}
.copyButtonSuccessIcon_LjdS {
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.33);
opacity: 0;
color: #00d600;
}
.copyButtonCopied_obH4 .copyButtonIcon_y97N {
transform: scale(0.33);
opacity: 0;
}
.copyButtonCopied_obH4 .copyButtonSuccessIcon_LjdS {
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.
*/
.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.
*/
.lastUpdated_vwxv {
margin-top: 0.2rem;
font-style: italic;
font-size: smaller;
}
@media (min-width: 997px) {
.lastUpdated_vwxv {
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.
*/
.wordWrapButtonIcon_Bwma {
width: 1.2rem;
height: 1.2rem;
}
.wordWrapButtonEnabled_EoeP .wordWrapButtonIcon_Bwma {
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.
*/
/*
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.
*/
.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.
*/
.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.
*/
.blogPostFooterDetailsFull_mRVl {
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.
*/
.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.
*/
.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.
*/
.docItemContainer_Djhp header + *,
.docItemContainer_Djhp article > *:first-child {
margin-top: 0;
}
@media (min-width: 997px) {
.docItemCol_VOVn {
max-width: 75% !important;
}
}