html[data-user-color-scheme="dark"] {
/* -------------------------------------------- FILL BUTTONS -------------------------------------------- */
/* Background */
--zcat-btn-fill-bg-primary-default: var(--zcat-primary-10);
--zcat-btn-fill-bg-primary-hover: var(--zcat-primary-20);
--zcat-btn-fill-bg-primary-click: var(--zcat-primary-10);
--zcat-btn-fill-bg-primary-disabled: var(--zcat-primary-30);
--zcat-btn-fill-bg-success-default: var(--zcat-green-10);
--zcat-btn-fill-bg-success-hover: var(--zcat-green-20);
--zcat-btn-fill-bg-success-click: var(--zcat-green-10);
--zcat-btn-fill-bg-success-disabled: var(--zcat-green-30);
--zcat-btn-fill-bg-danger-default: var(--zcat-red-10);
--zcat-btn-fill-bg-danger-hover: var(--zcat-red-20);
--zcat-btn-fill-bg-danger-click: var(--zcat-red-10);
--zcat-btn-fill-bg-danger-disabled: var(--zcat-red-30);
/* Text and Icons */
--zcat-btn-fill-text-default: var(--zcat-white);
--zcat-btn-fill-text-click: var(--zcat-white);
--zcat-btn-fill-text-disabled: var(--zcat-white-20);
--zcat-btn-fill-icon-default: var(--zcat-white);
--zcat-btn-fill-icon-click: var(--zcat-white);
--zcat-btn-fill-icon-disabled: var(--zcat-white-20);
/* Split line for buttton*/
--zcat-btn-fill-splitLine-default: var(--zcat-white-20);
/* -------------------------------------------- OUTLINE BUTTONS -------------------------------------------- */
/* Text */
--zcat-btn-outline-text-primary-default: var(--zcat-primary-10);
--zcat-btn-outline-text-primary-hover: var(--zcat-primary-20);
--zcat-btn-outline-text-primary-click: var(--zcat-primary-10);
--zcat-btn-outline-text-primary-disabled: var(--zcat-primary-30);
--zcat-btn-outline-text-success-default: var(--zcat-green-10);
--zcat-btn-outline-text-success-hover: var(--zcat-green-20);
--zcat-btn-outline-text-success-click: var(--zcat-green-10);
--zcat-btn-outline-text-success-disabled: var(--zcat-green-30);
--zcat-btn-outline-text-danger-default: var(--zcat-red-10);
--zcat-btn-outline-text-danger-hover: var(--zcat-red-20);
--zcat-btn-outline-text-danger-click: var(--zcat-red-10);
--zcat-btn-outline-text-danger-disabled: var(--zcat-red-30);
/* Icons */
--zcat-btn-outline-icon-primary-default: var(--zcat-primary-10);
--zcat-btn-outline-icon-primary-hover: var(--zcat-primary-20);
--zcat-btn-outline-icon-primary-click: var(--zcat-primary-10);
--zcat-btn-outline-icon-primary-disabled: var(--zcat-primary-30);
--zcat-btn-outline-icon-success-default: var(--zcat-green-10);
--zcat-btn-outline-icon-success-hover: var(--zcat-green-20);
--zcat-btn-outline-icon-success-click: var(--zcat-green-10);
--zcat-btn-outline-icon-success-disabled: var(--zcat-green-30);
--zcat-btn-outline-icon-danger-default: var(--zcat-red-10);
--zcat-btn-outline-icon-danger-hover: var(--zcat-red-20);
--zcat-btn-outline-icon-danger-click: var(--zcat-red-10);
--zcat-btn-outline-icon-danger-disabled: var(--zcat-red-30);
/* Borders */
--zcat-btn-outline-border-primary-default: var(--zcat-primary-10);
--zcat-btn-outline-border-primary-hover: var(--zcat-primary-20);
--zcat-btn-outline-border-primary-click: var(--zcat-primary-10);
--zcat-btn-outline-border-primary-disabled: var(--zcat-primary-30);
--zcat-btn-outline-border-success-default: var(--zcat-green-10);
--zcat-btn-outline-border-success-hover: var(--zcat-green-20);
--zcat-btn-outline-border-success-click: var(--zcat-green-10);
--zcat-btn-outline-border-success-disabled: var(--zcat-green-30);
--zcat-btn-outline-border-danger-default: var(--zcat-red-10);
--zcat-btn-outline-border-danger-hover: var(--zcat-red-20);
--zcat-btn-outline-border-danger-click: var(--zcat-red-10);
--zcat-btn-outline-border-danger-disabled: var(--zcat-red-30);
/* Background */
--zcat-btn-outline-bg-primaryHover: var(--zcat-primary-40);
--zcat-btn-outline-bg-successHover: var(--zcat-green-40);
--zcat-btn-outline-bg-dangerHover: var(--zcat-red-40);
/* -------------------------------------------- GREY BUTTONS -------------------------------------------- */
/* Background */
--zcat-btn-grey-bg-default: var(--zcat-grey-20);
--zcat-btn-grey-bg-hover: var(--zcat-grey-30);
--zcat-btn-grey-bg-click: var(--zcat-grey-20);
--zcat-btn-grey-bg-disabled: var(--zcat-grey-40);
/* Grey-Text & Grey-Icons */
--zcat-btn-grey-text-default: var(--zcat-dark-10);
--zcat-btn-grey-text-hover: var(--zcat-dark-10);
--zcat-btn-grey-text-click: var(--zcat-dark-10);
--zcat-btn-grey-text-disabled: var(--zcat-dark-40);
--zcat-btn-grey-icon-default: var(--zcat-dark-10);
--zcat-btn-grey-icon-hover: var(--zcat-dark-10);
--zcat-btn-grey-icon-click: var(--zcat-dark-10);
--zcat-btn-grey-icon-disabled: var(--zcat-dark-40);
/* Grey-Borders */
--zcat-btn-grey-border-default: var(--zcat-grey-10);
--zcat-btn-grey-border-hover: var(--zcat-grey-10);
--zcat-btn-grey-border-click: var(--zcat-grey-10);
--zcat-btn-grey-border-disabled: var(--zcat-grey-30);
/* -------------------------------------------- GHOST BUTTONS -------------------------------------------- */
/* Background */
--zcat-btn-ghost-bg-primary-hover: var(--zcat-primary-40);
--zcat-btn-ghost-bg-success-hover: var(--zcat-green-40);
--zcat-btn-ghost-bg-danger-hover: var(--zcat-red-40);
/* Text */
--zcat-btn-ghost-text-primary-default: var(--zcat-primary-10);
--zcat-btn-ghost-text-primary-hover: var(--zcat-primary-20);
--zcat-btn-ghost-text-primary-click: var(--zcat-primary-10);
--zcat-btn-ghost-text-primary-disabled: var(--zcat-primary-30);
--zcat-btn-ghost-text-success-default: var(--zcat-green-10);
--zcat-btn-ghost-text-success-hover: var(--zcat-green-20);
--zcat-btn-ghost-text-success-click: var(--zcat-green-10);
--zcat-btn-ghost-text-success-disabled: var(--zcat-green-30);
--zcat-btn-ghost-text-danger-default: var(--zcat-red-10);
--zcat-btn-ghost-text-danger-hover: var(--zcat-red-20);
--zcat-btn-ghost-text-danger-click: var(--zcat-red-10);
--zcat-btn-ghost-text-danger-disabled: var(--zcat-red-30);
/* Icons */
--zcat-btn-ghost-icon-primary-default: var(--zcat-primary-10);
--zcat-btn-ghost-icon-primary-hover: var(--zcat-primary-20);
--zcat-btn-ghost-icon-primary-click: var(--zcat-primary-10);
--zcat-btn-ghost-icon-primary-disabled: var(--zcat-primary-30);
--zcat-btn-ghost-icon-success-default: var(--zcat-green-10);
--zcat-btn-ghost-icon-success-hover: var(--zcat-green-20);
--zcat-btn-ghost-icon-success-click: var(--zcat-green-10);
--zcat-btn-ghost-icon-success-disabled: var(--zcat-green-30);
--zcat-btn-ghost-icon-danger-default: var(--zcat-red-10);
--zcat-btn-ghost-icon-danger-hover: var(--zcat-red-20);
--zcat-btn-ghost-icon-danger-click: var(--zcat-red-10);
--zcat-btn-ghost-icon-danger-disabled: var(--zcat-red-30);
/* -------------------------------------------- Gradient Buttons-------------------------------------------- */
--zcat-btn-gradient-bg-top: var(--zcat-gradient-30);
--zcat-btn-gradient-bg-bottom: var(--zcat-gradient-40);
--zcat-btn-gradient-bg-top-hover: var(--zcat-gradient-30-1);
--zcat-btn-gradient-bg-bottom-hover: var(--zcat-gradient-40-1);
--zcat-btn-gradient-bg-top-click: var(--zcat-gradient-30);
--zcat-btn-gradient-bg-bottom-click: var(--zcat-gradient-40);
--zcat-btn-gradient-bg-top-disabled: var(--zcat-gradient-30-2);
--zcat-btn-gradient-bg-bottom-disabled: var(--zcat-gradient-40-2);
/* Text */
--zcat-btn-gradient-text-default: var(--zcat-white);
--zcat-btn-gradient-text-hover: var(--zcat-white);
--zcat-btn-gradient-text-click: var(--zcat-white);
--zcat-btn-gradient-text-disabled: var(--zcat-white-20);
/* -------------------------------------------- LINK -------------------------------------------- */
/* Link Text */
--zcat-link-text-primary-default: var(--zcat-primary-10);
--zcat-link-text-primary-hover: var(--zcat-primary-20);
--zcat-link-text-primary-click: var(--zcat-primary-10);
--zcat-link-text-primary-disabled: var(--zcat-primary-30);
/* Link Icons */
--zcat-link-icon-primary-default: var(--zcat-primary-10);
--zcat-link-icon-primary-hover: var(--zcat-primary-20);
--zcat-link-icon-primary-click: var(--zcat-primary-10);
--zcat-link-icon-primary-disabled: var(--zcat-primary-30);
/* -------------------------------------------- TABLE -------------------------------------------- */
/* Table-Text & Table-icons */
--zcat-table-text-primary: var(--zcat-dark-10);
--zcat-table-text-secondary: var(--zcat-dark-20);
--zcat-table-text-light: var(--zcat-dark-30);
--zcat-table-text-disabled: var(--zcat-dark-40);
--zcat-table-icon-primary: var(--zcat-dark-10);
--zcat-table-icon-secondary: var(--zcat-dark-20);
--zcat-table-icon-light: var(--zcat-dark-30);
--zcat-table-icon-disabled: var(--zcat-dark-40);
/* Table-border */
--zcat-table-border-default: var(--zcat-grey-20);
/* Table-background */
--zcat-table-bg-row: var(--zcat-black);
--zcat-table-bg-header: var(--zcat-grey-901);
--zcat-table-bg-rowHover: var(--zcat-grey-50);
--zcat-table-bg-rowSelected: var(--zcat-primary-40);
--zcat-table-bg-rowDisabled: var(--zcat-grey-40);
/* Table-threedot */
--zcat-table-threeDot-icon: var(--zcat-dark-10);
--zcat-table-threeDot-iconBg: var(--zcat-grey-40);
--zcat-table-threeDot-iconBg-hover: var(--zcat-grey-20);
--zcat-table-threeDot-iconBg-active: var(--zcat-primary-40);
/* -------------------------------------------- SERVICE MENU -------------------------------------------- */
/* Background */
--zcat-serviceMenu-bg-serviceMenu: linear-gradient(180deg, var(--zcat-grey-902) 0%, var(--zcat-grey-902) 100%);
--zcat-serviceMenu-bg-icon: var(--zcat-grey-50);
/* Border */
--zcat-serviceMenu-border-default: var(--zcat-grey-20);
/* Icons */
--zcat-serviceMenu-icon-default: var(--zcat-white);
--zcat-serviceMenu-iconBg-active: var(--zcat-grey-50);
/* Text */
--zcat-serviceMenu-text-subHeading: var(--zcat-dark-20);
--zcat-serviceMenu-text-default: var(--zcat-white);
--zcat-serviceMenu-text-active: var(--zcat-dark-10);
/* -------------------------------------------- INPUT FIELDS -------------------------------------------- */
/* Input field - Background */
--zcat-inputField-bg-default: var(--zcat-black);
--zcat-inputField-bg-hover: var(--zcat-grey-60);
--zcat-inputField-bg-active: var(--zcat-grey-60);
--zcat-inputField-bg-disabled: var(--zcat-grey-40);
--zcat-inputField-bg-error: var(--zcat-red-40);
--zcat-inputField-bg-linkField-hover: var(--zcat-grey-60);
--zcat-inputField-bg-keyvalue-hover: var(--zcat-grey-50);
/* Input field - border */
--zcat-inputField-border-default: var(--zcat-grey-10);
--zcat-inputField-border-hover: var(--zcat-primary-30);
--zcat-inputField-border-active: var(--zcat-primary-10);
--zcat-inputField-border-disabled: var(--zcat-grey-30);
--zcat-inputField-border-error: var(--zcat-red-30);
/* Input Field Text */
--zcat-inputField-text-placeholder: var(--zcat-dark-30);
--zcat-inputField-text-active: var(--zcat-dark-10);
--zcat-inputField-text-disabled: var(--zcat-dark-40);
--zcat-inputField-text-label: var(--zcat-dark-20);
--zcat-inputField-text-error: var(--zcat-red-10);
--zcat-inputField-text-optional: var(--zcat-dark-30);
/* Input Field Link */
--zcat-inputField-text-linkField: var(--zcat-primary-10);
--zcat-inputField-text-linkField-hover: var(--zcat-primary-20);
--zcat-inputField-text-linkField-active: var(--zcat-primary-10);
--zcat-inputField-text-linkField-disabled: var(--zcat-primary-30);
/* Input Field Icon */
--zcat-inputField-icon-placeholder: var(--zcat-dark-30);
--zcat-inputField-icon-active: var(--zcat-dark-10);
--zcat-inputField-icon-hover: var(--zcat-primary-40);
--zcat-inputField-icon-disabled: var(--zcat-dark-40);
--zcat-inputField-icon-label: var(--zcat-dark-20);
/* -------------------------------------------- CHIPS -------------------------------------------- */
/* Chips background */
--zcat-chips-bg-default: var(--zcat-grey-50);
--zcat-chips-bg-hover: var(--zcat-grey-20);
--zcat-chips-bg-disabled: var(--zcat-grey-40);
/* Chips border */
--zcat-chips-border-default: var(--zcat-grey-20);
--zcat-chips-border-hover: var(--zcat-grey-10);
--zcat-chips-border-disabled: var(--zcat-grey-30);
/* Chips text */
--zcat-chips-text-default: var(--zcat-dark-10);
--zcat-chips-text-hover: var(--zcat-dark-10);
--zcat-chips-text-disabled: var(--zcat-dark-40);
/* Chips icons */
--zcat-chips-icon-default: var(--zcat-dark-10);
--zcat-chips-icon-hover: var(--zcat-dark-10);
--zcat-chips-icon-disabled: var(--zcat-dark-40);
/* -------------------------------------------- CHECKBOX -------------------------------------------- */
/* Checkbox background */
--zcat-checkbox-bg-default: var(--zcat-black);
--zcat-checkbox-bg-hover: var(--zcat-primary-40);
--zcat-checkbox-bg-disabled: var(--zcat-grey-40);
--zcat-checkbox-bg-clicked: var(--zcat-primary-10);
--zcat-checkbox-bg-clicked-hover: var(--zcat-primary-20);
--zcat-checkbox-bg-clicked-disabled: var(--zcat-primary-30);
--zcat-checkbox-bg-white: var(--zcat-black);
/* Checkbox icon */
--zcat-checkbox-icon-click: var(--zcat-dark-10);
--zcat-checkbox-icon-disabled: var(--zcat-white-20);
/* Checkbox border */
--zcat-checkbox-border-default: var(--zcat-grey-10);
--zcat-checkbox-border-hover: var(--zcat-primary-30);
--zcat-checkbox-border-disabled: var(--zcat-grey-30);
/* Inner For checkbox */
--zcat-checkbox-inner-default: var(--zcat-dark-10);
--zcat-checkbox-inner-disabled: var(--zcat-white-20);
/* -------------------------------------------- MENU LIST -------------------------------------------- */
/* Menu background */
--zcat-menuList-bg-default: var(--zcat-black);
--zcat-menuList-bg-hover: var(--zcat-grey-30);
--zcat-menuList-bg-selected: var(--zcat-primary-40);
--zcat-menuList-bg-disabled: var(--zcat-grey-40);
/* Menu border */
--zcat-menuList-border-default: var(--zcat-grey-20);
/* Menu text */
--zcat-menuList-text-default: var(--zcat-dark-10);
--zcat-menuList-text-light: var(--zcat-dark-30);
--zcat-menuList-text-hover: var(--zcat-dark-10);
--zcat-menuList-text-disabled: var(--zcat-dark-40);
--zcat-menuList-text-heading: var(--zcat-dark-20);
/* Menu icon */
--zcat-menuList-icon-active: var(--zcat-dark-10);
--zcat-menuList-icon-hover: var(--zcat-dark-10);
--zcat-menuList-icon-disabled: var(--zcat-dark-40);
--zcat-menuList-icon-check-default: var(--zcat-primary-10);
/* -------------------------------------------- CARDS -------------------------------------------- */
/* Card background */
--zcat-card-bg-default: var(--zcat-black);
--zcat-card-bg-secondary: var(--zcat-grey-901);
--zcat-card-bg-tertiary: var(--zcat-grey-50);
--zcat-card-bg-quaternary: var(--zcat-grey-30);
--zcat-card-bg-bodyBg: var(--zcat-grey-60);
--zcat-card-bg-darkBg: var(--zcat-grey-60);
--zcat-card-bg-disabled: var(--zcat-grey-40);
/* hover state */
--zcat-card-bg-hover: var(--zcat-grey-901);
--zcat-card-bg-hover-secondary: var(--zcat-grey-50);
--zcat-card-bg-hover-tertiary: var(--zcat-grey-60);
--zcat-card-bg-hover-quaternary: var(--zcat-grey-50);
--zcat-card-bg-hover-bodyBg: var(--zcat-grey-50);
/* selected state */
--zcat-card-bg-selected: var(--zcat-primary-40);
--zcat-card-bg-secondary-selected: var(--zcat-primary-40);
--zcat-card-bg-tertiary-selected: var(--zcat-primary-40);
--zcat-card-bg-quaternary-selected: var(--zcat-primary-40);
--zcat-card-bg-bodyBg-selected: var(--zcat-primary-40);
/* Card border */
--zcat-card-border-default: var(--zcat-grey-20);
--zcat-card-border-hover: var(--zcat-grey-70);
--zcat-card-border-selected: var(--zcat-primary-10);
--zcat-card-border-disabled: var(--zcat-grey-30);
/* -------------------------------------------- SHADOWS -------------------------------------------- */
/* Shadows background */
--zcat-shadow-bg-default: var(--zcat-grey-30);
--zcat-shadow-bg-secondary: var(--zcat-grey-104);
/* -------------------------------------------- PRIMARY TABS -------------------------------------------- */
/* Tabs background */
--zcat-tabs-primary-bg: var(--zcat-black);
--zcat-tabs-primary-bg-hover: var(--zcat-primary-40);
--zcat-tabs-primary-bg-hoverDisabled: var(--zcat-grey-40);
/* Tabs border */
--zcat-tabs-primary-border-default: var(--zcat-grey-70);
--zcat-tabs-primary-border-hover: var(--zcat-primary-30);
--zcat-tabs-primary-border-active: var(--zcat-primary-10);
--zcat-tabs-primary-border-disabled: var(--zcat-grey-30);
/* Tabs text */
--zcat-tabs-primary-text-default: var(--zcat-dark-20);
--zcat-tabs-primary-text-hover: var(--zcat-dark-10);
--zcat-tabs-primary-text-active: var(--zcat-primary-10);
--zcat-tabs-primary-text-disabled: var(--zcat-dark-40);
/* Tabs icon */
--zcat-tabs-primary-icon-default: var(--zcat-dark-20);
--zcat-tabs-primary-icon-hover: var(--zcat-dark-10);
--zcat-tabs-primary-icon-active: var(--zcat-primary-10);
--zcat-tabs-primary-icon-disabled: var(--zcat-dark-40);
/* -------------------------------------------- SECONDARY TABS -------------------------------------------- */
/* Tabs bg */
--zcat-tabs-secondary-bg-default: var(--zcat-grey-70);
--zcat-tabs-secondary-bg-hover: var(--zcat-grey-30);
--zcat-tabs-secondary-bg-active: var(--zcat-grey-60);
--zcat-tabs-secondary-bg-disabled: var(--zcat-grey-40);
/* Tabs text */
--zcat-tabs-secondary-text-default: var(--zcat-dark-20);
--zcat-tabs-secondary-text-hover: var(--zcat-dark-10);
--zcat-tabs-secondary-text-active: var(--zcat-dark-10);
--zcat-tabs-secondary-text-disabled: var(--zcat-dark-40);
/* Tabs icon */
--zcat-tabs-secondary-icon-default: var(--zcat-dark-20);
--zcat-tabs-secondary-icon-hover: var(--zcat-dark-10);
--zcat-tabs-secondary-icon-active: var(--zcat-primary-10);
--zcat-tabs-secondary-icon-disabled: var(--zcat-dark-40);
/* Tabs border */
--zcat-tabs-secondary-border-default: var(--zcat-grey-70);
/* -------------------------------------------- CODE TABS -------------------------------------------- */
/* Tabs bg */
--zcat-tabs-code-bg-default: var(--zcat-grey-30);
--zcat-tabs-code-bg-hover: var(--zcat-grey-30);
--zcat-tabs-code-bg-active: var(--zcat-grey-60);
--zcat-tabs-code-bg-disabled: var(--zcat-grey-40);
/* Tabs text */
--zcat-tabs-code-text-default: var(--zcat-dark-20);
--zcat-tabs-code-text-hover: var(--zcat-dark-10);
--zcat-tabs-code-text-active: var(--zcat-dark-10);
--zcat-tabs-code-text-disabled: var(--zcat-dark-40);
/* Tabs icon */
--zcat-tabs-code-icon-default: var(--zcat-dark-20);
--zcat-tabs-code-icon-hover: var(--zcat-dark-10);
--zcat-tabs-code-icon-active: var(--zcat-primary-10);
--zcat-tabs-code-icon-disabled: var(--zcat-dark-40);
/* Tabs border */
--zcat-tabs-code-border-default: var(--zcat-grey-70);
/* -------------------------------------------- BADGE-------------------------------------------- */
/* Primary Badge bg */
--zcat-badge-primary-bg-primary: var(--zcat-primary-10);
--zcat-badge-primary-bg-green: var(--zcat-green-10);
--zcat-badge-primary-bg-red: var(--zcat-red-10);
--zcat-badge-primary-bg-pink: var(--zcat-pink-10);
--zcat-badge-primary-bg-orange: var(--zcat-orange-10);
--zcat-badge-primary-bg-disabled: var(--zcat-grey-40);
/* --zcat-badge-primary-bg-primary2: var(--zcat-primary-40);
--zcat-badge-primary-bg-green2: var(--zcat-green-40);
--zcat-badge-primary-bg-red2: var(--zcat-red-40);
--zcat-badge-primary-bg-orange2: var(--zcat-orange-40);
*/
/* Secondary Badge bg */
--zcat-badge-secondary-bg-default: var(--zcat-grey-20);
--zcat-badge-secondary-bg-primary: var(--zcat-primary-40);
--zcat-badge-secondary-bg-green: var(--zcat-green-40);
--zcat-badge-secondary-bg-red: var(--zcat-red-40);
--zcat-badge-secondary-bg-pink: var(--zcat-pink-40);
--zcat-badge-secondary-bg-orange: var(--zcat-orange-40);
--zcat-badge-secondary-bg-disbaled: var(--zcat-grey-40);
/* primary Badge text */
--zcat-badge-primary-text-white: var(--zcat-white);
--zcat-badge-primary-text-primary: var(--zcat-dark-10);
--zcat-badge-primary-text-disabled: var(--zcat-dark-40);
/* secondary Badge text */
--zcat-badge-secondary-text-default: var(--zcat-black);
--zcat-badge-secondary-text-primary: var(--zcat-primary-10);
--zcat-badge-secondary-text-green: var(--zcat-green-10);
--zcat-badge-secondary-text-red: var(--zcat-red-10);
--zcat-badge-secondary-text-pink: var(--zcat-pink-10);
--zcat-badge-secondary-text-orange: var(--zcat-orange-10);
--zcat-badge-secondary-text-disabled: var(--zcat-dark-40);
/* -------------------------------------------- BREADCRUMBS-------------------------------------------- */
/* breadcrumbs bg */
--zcat-breadcrumbs-bg-hover: var(--zcat-primary-40);
/* breadcrumbs text */
--zcat-breadcrumbs-text-default: var(--zcat-dark-10);
--zcat-breadcrumbs-text-hover: var(--zcat-primary-10);
--zcat-breadcrumbs-text-active: var(--zcat-dark-20);
--zcat-breadcrumbs-text-disabled: var(--zcat-dark-40);
/* breadcrumbs icon */
--zcat-breadcrumbs-icon-default: var(--zcat-dark-20);
--zcat-breadcrumbs-icon-hover: var(--zcat-primary-10);
--zcat-breadcrumbs-icon-active: var(--zcat-dark-10);
--zcat-breadcrumbs-icon-disabled: var(--zcat-dark-40);
/* -------------------------------------------- ACCORDION -------------------------------------------- */
/* Accordion bg */
--zcat-accordion-bg-default: var(--zcat-black);
--zcat-accordion-bg-hover: var(--zcat-grey-901);
--zcat-accordion-bg-active: var(--zcat-grey-50);
--zcat-accordion-bg-disabled: var(--zcat-grey-40);
--zcat-accordion-bg-container: var(--zcat-black);
--zcat-accordion-icon-bg-default: var(--zcat-grey-20);
--zcat-secondary-accordion-bg-hover: var(--zcat-primary-40);
/* Accordion text */
--zcat-accordion-text-default: var(--zcat-dark-10);
--zcat-accordion-text-secondary: var(--zcat-dark-20);
--zcat-accordion-text-disabled: var(--zcat-dark-40);
--zcat-secondary-accordion-text-default: var(--zcat-primary-10);
--zcat-secondary-accordion-text-hover: var(--zcat-primary-20);
/* Accordion icon */
--zcat-accordion-icon-default: var(--zcat-dark-10);
--zcat-accordion-icon-bg-hover: var(--zcat-grey-20);
--zcat-accordion-icon-disabled: var(--zcat-dark-40);
/* Accordion border */
--zcat-accordion-border-default: var(--zcat-grey-20);
--zcat-accordion-border-theme: var(--zcat-primary-10);
--zcat-accordion-border-disabled: var(--zcat-grey-30);
/* -------------------------------------------- SIDE MENU-------------------------------------------- */
/* Side Menu bg*/
--zcat-sidemenu-bg-default: var(--zcat-black);
--zcat-sidemenu-bg-hover: var(--zcat-grey-30);
--zcat-sidemenu-bg-active: var(--zcat-primary-40);
/* Side Menu text*/
--zcat-sidemenu-text-default: var(--zcat-dark-20);
--zcat-sidemenu-text-hover: var(--zcat-dark-10);
--zcat-sidemenu-text-active: var(--zcat-primary-10);
--zcat-sidemenu-text-disabled: var(--zcat-dark-40);
--zcat-sidemenu-text-subHeading: var(--zcat-dark-40);
--zcat-sidemenu-text-serviceName: var(--zcat-dark-10);
/* Side Menu icon */
--zcat-sidemenu-icon-default: var(--zcat-dark-20);
--zcat-sidemenu-icon-hover: var(--zcat-dark-10);
--zcat-sidemenu-icon-active: var(--zcat-primary-10);
--zcat-sidemenu-icon-disabled: var(--zcat-dark-40);
/* Side Menu border */
--zcat-sidemenu-border-default: var(--zcat-grey-70);
/* -------------------------------------------- MAIN HEADER -------------------------------------------- */
/* Project Name */
--zcat-mainHeader-projectName-bg: var(--zcat-green-40);
--zcat-mainHeader-projectName-text: var(--zcat-green-10);
/* Main header bg */
--zcat-mainHeader-bg-default: var(--zcat-black);
/* Main header border */
--zcat-mainHeader-border-default: var(--zcat-grey-70);
/* Main header text */
--zcat-mainHeader-text-default: var(--zcat-dark-10);
/* -------------------------------------------- SUB HEADER -------------------------------------------- */
/* Sub header bg */
--zcat-subHeader-bg-default: var(--zcat-black);
/* sub header border */
--zcat-subHeader-border-default: var(--zcat-grey-70);
/* sub header text */
--zcat-subHeader-text-default: var(--zcat-dark-10);
/* -------------------------------------------- FULL PAGE POPUP HEADER -------------------------------------------- */
/* Fullpage popup Background */
--zcat-fullpagePopup-bg-default: var(--zcat-grey-30);
--zcat-fullpagePopup-bg-body: var(--zcat-black);
/* Fullpage popup border */
--zcat-fullpagePopup-border-default: var(--zcat-grey-70);
/* Fullpage popup text */
--zcat-fullpagePopup-text-default: var(--zcat-dark-10);
/* -------------------------------------------- BODY -------------------------------------------- */
/* background */
--zcat-body-bg: var(--zcat-grey-902);
/* rightpanel */
--zcat-body-container-bg: var(--zcat-black);
--zcat-body-curve-bg: var(--zcat-grey-80);
/* text */
--zcat-body-text-primary: var(--zcat-dark-10);
--zcat-body-text-secondary: var(--zcat-dark-20);
--zcat-body-text-light: var(--zcat-dark-30);
--zcat-body-text-disabled: var(--zcat-dark-40);
--zcat-body-text-theme: var(--zcat-primary-10);
--zcat-body-text-theme-red: var(--zcat-red-10);
--zcat-body-text-white: var(--zcat-black);
/* border */
--zcat-body-border-default: var(--zcat-grey-20);
--zcat-body-border-outerdivider: var(--zcat-grey-70);
--zcat-body-border-outerdivider-secondary: var(--zcat-grey-20);
/* icons */
--zcat-body-icons-static-primary: var(--zcat-dark-10);
--zcat-body-icons-static-secondary: var(--zcat-dark-20);
--zcat-body-icons-static-tertiary: var(--zcat-dark-30);
--zcat-body-icons-static-disabled: var(--zcat-dark-40);
--zcat-body-icons-static-theme: var(--zcat-primary-10);
--zcat-body-icons-static-theme-hover: var(--zcat-primary-20);
--zcat-body-icons-static-theme-light: var(--zcat-primary-40);
/* -------------------------------------------- POPUP -------------------------------------------- */
/* border */
--zcat-popup-border: var(--zcat-grey-20);
--zcat-popup-outer-border: var(--zcat-grey-20);
/* background */
--zcat-popup-bg: var(--zcat-black);
--zcat-popup-bg-blur: var(--zcat-dark-60);
/* -------------------------------------------- ALERTS AND ATTENTION -------------------------------------------- */
/* info */
--zcat-alerts-info-bg: var(--zcat-blue-40);
--zcat-alerts-info-border: var(--zcat-blue-30);
--zcat-alerts-info-text-primary: var(--zcat-dark-10);
--zcat-alerts-info-text-secondary: var(--zcat-dark-20);
--zcat-alerts-info-icon: var(--zcat-dark-10);
/* success */
--zcat-alerts-success-bg: var(--zcat-green-40);
--zcat-alerts-success-border: var(--zcat-green-30);
--zcat-alerts-success-text-primary: var(--zcat-dark-10);
--zcat-alerts-success-text-secondary: var(--zcat-dark-20);
--zcat-alerts-success-icon: var(--zcat-dark-10);
/* danger */
--zcat-alerts-danger-bg: var(--zcat-red-40);
--zcat-alerts-danger-border: var(--zcat-red-30);
--zcat-alerts-danger-text-primary: var(--zcat-dark-10);
--zcat-alerts-danger-text-secondary: var(--zcat-dark-20);
--zcat-alerts-danger-icon: var(--zcat-dark-10);
/* warning */
--zcat-alerts-warning-bg: var(--zcat-orange-40);
--zcat-alerts-warning-border: var(--zcat-orange-30);
--zcat-alerts-warning-text-primary: var(--zcat-dark-10);
--zcat-alerts-warning-text-secondary: var(--zcat-dark-20);
--zcat-alerts-warning-icon: var(--zcat-dark-10);
/* dafault */
--zcat-attention-default-bg: var(--zcat-grey-50);
--zcat-attention-default-border: var(--zcat-grey-20);
--zcat-attention-default-text-primary: var(--zcat-dark-10);
--zcat-attention-default-text-secondary: var(--zcat-dark-20);
--zcat-attention-default-icon: var(--zcat-dark-10);
/* -------------------------------------------- PAGINATION -------------------------------------------- */
--zcat-pagination-bg: var(--zcat-black);
--zcat-pagination-text-primary: var(--zcat-dark-10);
--zcat-pagination-text-secondary: var(--zcat-dark-20);
--zcat-pagination-text-tertiary: var(--zcat-dark-30);
--zcat-pagination-theme: var(--zcat-primary-10);
--zcat-pagination-divider: var(--zcat-grey-20);
/* -------------------------------------------- TOOLTIP -------------------------------------------- */
--zcat-tooltip-bg: var(--zcat-black);
--zcat-tooltip-text-primary: var(--zcat-dark-10);
--zcat-tooltip-text-secondary: var(--zcat-dark-20);
--zcat-tooltip-border: var(--zcat-grey-70);
/* -------------------------------------------- LOADER -------------------------------------------- */
/* content */
--zcat-loader-content-primary: var(--zcat-grey-20);
--zcat-loader-content-secondary: var(--zcat-grey-60);
/* round */
--zcat-loader-round-primary: var(--zcat-primary-10);
--zcat-loader-round-secondary: var(--zcat-dark-10);
--zcat-loader-round-tertiary: var(--zcat-black);
/* progress */
--zcat-loader-progress-primary: var(--zcat-primary-10);
--zcat-loader-progress-secondary: var(--zcat-grey-20);
/* -------------------------------------------- RADIO -------------------------------------------- */
/* radio background */
--zcat-radio-bg-default: var(--zcat-black);
--zcat-radio-bg-hover: var(--zcat-primary-40);
--zcat-radio-bg-disabled: var(--zcat-grey-40);
--zcat-radio-bg-clicked: var(--zcat-primary-10);
--zcat-radio-bg-clicked-hover: var(--zcat-primary-20);
--zcat-radio-bg-clicked-disabled: var(--zcat-primary-30);
--zcat-radio-outer-bg-default: var(--zcat-black);
/* radio border */
--zcat-radio-border-default: var(--zcat-grey-10);
--zcat-radio-border-hover: var(--zcat-primary-30);
--zcat-radio-border-disabled: var(--zcat-grey-30);
--zcat-radio-outer-border-default: var(--zcat-grey-20);
/* Inner For Radio */
--zcat-radio-inner-default: var(--zcat-dark-10);
--zcat-radio-inner-disabled: var(--zcat-white-20);
/* -------------------------------------------- TOGGLE -------------------------------------------- */
/* toggle background */
--zcat-toggle-bg-default: var(--zcat-black);
--zcat-toggle-bg-hover: var(--zcat-grey-30);
--zcat-toggle-bg-disabled: var(--zcat-grey-40);
--zcat-toggle-bg-clicked: var(--zcat-primary-10);
--zcat-toggle-bg-clicked-hover: var(--zcat-primary-20);
--zcat-toggle-bg-clicked-disabled: var(--zcat-primary-30);
/* toggle border */
--zcat-toggle-border-default: var(--zcat-grey-10);
--zcat-toggle-border-hover: var(--zcat-primary-30);
--zcat-toggle-border-disabled: var(--zcat-grey-30);
/* Inner For Toggle */
--zcat-toggle-inner-active: var(--zcat-dark-10);
--zcat-toggle-inner-active-disabled: var(--zcat-white-20);
--zcat-toggle-inner-default: var(--zcat-grey-10);
--zcat-toggle-inner-hover: var(--zcat-primary-30);
--zcat-toggle-inner-disabled: var(--zcat-grey-20);
/* -------------------------------------------- STEPPER -------------------------------------------- */
/* Stepper background */
--zcat-stepper-bg-default: var(--zcat-grey-50);
--zcat-stepper-bg-active: var(--zcat-primary-10);
--zcat-stepper-bg-completed: var(--zcat-green-10);
--zcat-stepper-bg-disabled: var(--zcat-grey-40);
/* Stepper text */
--zcat-stepper-text-default: var(--zcat-dark-20);
--zcat-stepper-text-subText: var(--zcat-dark-20);
--zcat-stepper-text-active: var(--zcat-dark-10);
--zcat-stepper-text-completed: var(--zcat-dark-10);
--zcat-stepper-text-disabled: var(--zcat-dark-40);
--zcat-stepper-text-number: var(--zcat-white);
/* Stepper divider */
--zcat-stepper-divider-default: var(--zcat-grey-10);
--zcat-stepper-divider-active: var(--zcat-primary-10);
--zcat-stepper-divider-completed: var(--zcat-green-10);
--zcat-stepper-divider-disabled: var(--zcat-grey-30);
/* Stepper border */
--zcat-stepper-border-default: var(--zcat-grey-10);
--zcat-stepper-border-active: var(--zcat-white);
--zcat-stepper-border-disabled: var(--zcat-white-20);
--zcat-stepper-border-completed: var(--zcat-green-40);
/* -------------------------------------------- CODE BLOCK & SNIPPET -------------------------------------------- */
/* Code block background */
--zcat-code-bg-writer: var(--zcat-black);
--zcat-code-bg-reader: var(--zcat-grey-50);
--zcat-code-bg-line-highlight: var(--zcat-primary-40);
/* code border */
--zcat-code-border-default: var(--zcat-grey-20);
/* text */
--zcat-code-text-number: var(--zcat-dark-30);
--zcat-code-text-number-active: var(--zcat-dark-10);
/* -------------------------------------------- DATE PICKER -------------------------------------------- */
/* Date picker background */
--zcat-datePicker-bg-default: var(--zcat-black);
--zcat-datePicker-number-bg-hover: var(--zcat-grey-30);
--zcat-datePicker-number-bg-selected: var(--zcat-primary-10);
--zcat-datePicker-number-bg-active: var(--zcat-primary-40);
/* Date picker text */
--zcat-datePicker-text-default: var(--zcat-dark-10);
--zcat-datePicker-text-selected: var(--zcat-white);
--zcat-datePicker-text-active: var(--zcat-primary-10);
--zcat-datePicker-text-disabled: var(--zcat-dark-40);
--zcat-datePicker-text-days: var(--zcat-dark-30);
--zcat-datePicker-text-headings: var(--zcat-dark-10);
/* Date picker border */
--zcat-datePicker-border-default: var(--zcat-grey-10);
--zcat-datePicker-border-line: var(--zcat-grey-20);
/* -------------------------------------------- Link box -------------------------------------------- */
/* link background */
--zcat-linkbox-bg-default: var(--zcat-grey-50);
--zcat-linkbox-bg-hover: var(--zcat-grey-30);
/* link text */
--zcat-linkbox-text-label1: var(--zcat-dark-20);
--zcat-linkbox-text-label2: var(--zcat-dark-10);
--zcat-linkbox-text-mainText: var(--zcat-dark-10);
/* link icon */
--zcat-linkbox-icon-default: var(--zcat-dark-10);
--zcat-linkbox-icon-hover: var(--zcat-primary-10);
--zcat-linkbox-icon-click: var(--zcat-dark-10);
--zcat-linkbox-icon-label: var(--zcat-dark-20);
/* link border */
--zcat-linkbox-border-default: var(--zcat-grey-20);
--zcat-linkbox-border-hover: var(--zcat-primary-30);
--zcat-linkbox-border-divider: var(--zcat-grey-10);
/* -------------------------------------------- GRAPH -------------------------------------------- */
/* Dial Graph */
--zcat-graph-bg-default: var(--zcat-grey-40);
--zcat-graph-bg-success: var(--zcat-green-10);
--zcat-graph-line-bg-success: var(--zcat-green-30);
--zcat-graph-bg-failure: var(--zcat-red-10);
--zcat-graph-line-bg-failure: var(--zcat-red-30);
/* -------------------------------------------- ILLUSTRATION -------------------------------------------- */
--zcat-illus-primary-blue: var(--zcat-primary-10);
--zcat-illus-white: var(--zcat-grey-103);
--zcat-illus-white-static: var(--zcat-white);
--zcat-illus-black: var(--zcat-grey-102);
--zcat-illus-tint-blue: var(--zcat-grey-100);
--zcat-illus-bg-blue: var(--zcat-grey-101);
/* -------------------------------------------- SCROLLBAR -------------------------------------------- */
--zcat-scrollbar-bg: var(--zcat-grey-10);
--zcat-scrollbar-track-bg: var(--zcat-grey-30);
/* -------------------------------------------- OTHER SHADES -------------------------------------------- */
--zcat-shades-red-1: var(--zcat-red-10);
--zcat-shades-red-2: var(--zcat-red-20);
--zcat-shades-red-3: var(--zcat-red-30);
--zcat-shades-red-4: var(--zcat-red-40);
--zcat-shades-green-1: var(--zcat-green-10);
--zcat-shades-green-2: var(--zcat-green-20);
--zcat-shades-green-3: var(--zcat-green-30);
--zcat-shades-green-4: var(--zcat-green-40);
--zcat-shades-theme-1: var(--zcat-primary-10);
--zcat-shades-theme-2: var(--zcat-primary-20);
--zcat-shades-theme-3: var(--zcat-primary-30);
--zcat-shades-theme-4: var(--zcat-primary-40);
--zcat-shades-blue-1: var(--zcat-blue-10);
--zcat-shades-blue-2: var(--zcat-blue-20);
--zcat-shades-blue-3: var(--zcat-blue-30);
--zcat-shades-blue-4: var(--zcat-blue-40);
--zcat-shades-pink-1: var(--zcat-pink-10);
--zcat-shades-pink-2: var(--zcat-pink-20);
--zcat-shades-pink-3: var(--zcat-pink-30);
--zcat-shades-pink-4: var(--zcat-pink-40);
--zcat-shades-orange-1: var(--zcat-orange-10);
--zcat-shades-orange-2: var(--zcat-orange-20);
--zcat-shades-orange-3: var(--zcat-orange-30);
--zcat-shades-orange-4: var(--zcat-orange-40);
/* -------------------------------------------- Toast -------------------------------------------- */
--zcat-toast-bg-default: var(--zcat-black);
--zcat-toast-border-default: var(--zcat-grey-20);
--zcat-toast-icon-line-success: var(--zcat-green-10);
--zcat-toast-icon-line-danger: var(--zcat-red-10);
--zcat-toast-icon-line-warning: var(--zcat-orange-10);
--zcat-toast-icon-line-info: var(--zcat-blue-10);
--zcat-toast-text-primary: var(--zcat-dark-10);
--zcat-toast-text-secondary: var(--zcat-dark-20);
/* -------------------------------------------- GHOST BUTTONS -------------------------------------------- */
/* Background */
--zcat-dropdown-ghost-bg-primary-hover: var(--zcat-primary-40);
--zcat-dropdown-ghost-bg-success-hover: var(--zcat-green-40);
--zcat-dropdown-ghost-bg-danger-hover: var(--zcat-red-40);
/* Text */
--zcat-dropdown-ghost-text-primary-default: var(--zcat-primary-10);
--zcat-dropdown-ghost-text-primary-hover: var(--zcat-primary-20);
--zcat-dropdown-ghost-text-primary-click: var(--zcat-primary-10);
--zcat-dropdown-ghost-text-primary-disabled: var(--zcat-primary-30);
--zcat-dropdown-ghost-text-success-default: var(--zcat-green-10);
--zcat-dropdown-ghost-text-success-hover: var(--zcat-green-20);
--zcat-dropdown-ghost-text-success-click: var(--zcat-green-10);
--zcat-dropdown-ghost-text-success-disabled: var(--zcat-green-30);
--zcat-dropdown-ghost-text-danger-default: var(--zcat-red-10);
--zcat-dropdown-ghost-text-danger-hover: var(--zcat-red-20);
--zcat-dropdown-ghost-text-danger-click: var(--zcat-red-10);
--zcat-dropdown-ghost-text-danger-disabled: var(--zcat-red-30);
/* Icons */
--zcat-dropdown-ghost-icon-primary-default: var(--zcat-primary-10);
--zcat-dropdown-ghost-icon-primary-hover: var(--zcat-primary-20);
--zcat-dropdown-ghost-icon-primary-click: var(--zcat-primary-10);
--zcat-dropdown-ghost-icon-primary-disabled: var(--zcat-primary-30);
--zcat-dropdown-ghost-icon-success-default: var(--zcat-green-10);
--zcat-dropdown-ghost-icon-success-hover: var(--zcat-green-20);
--zcat-dropdown-ghost-icon-success-click: var(--zcat-green-10);
--zcat-dropdown-ghost-icon-success-disabled: var(--zcat-green-30);
--zcat-dropdown-ghost-icon-danger-default: var(--zcat-red-10);
--zcat-dropdown-ghost-icon-danger-hover: var(--zcat-red-20);
--zcat-dropdown-ghost-icon-danger-click: var(--zcat-red-10);
--zcat-dropdown-ghost-icon-danger-disabled: var(--zcat-red-30);
/* -------------------------------------------- AVATAR -------------------------------------------- */
/* Background */
--zcat-avatar-bg-default: var(--zcat-grey-50);
--zcat-avatar-bg-secondary: var(--zcat-grey-20);
/* Border */
--zcat-avatar-border-default: var(--zcat-grey-20);
/* Text */
--zcat-avatar-text-default: var(--zcat-dark-20);
/* Icons */
--zcat-avatar-icon-default: var(--zcat-dark-20);
/* -------------------------------------------- TOUR -------------------------------------------- */
/* Background */
--zcat-tour-bg-default: var(--zcat-dark-50);
--zcat-carosual-bg-default: var(--zcat-dark-40);
--zcat-carosual-bg-active: var(--zcat-dark-10);
/* Border */
--zcat-tour-border-default: var(--zcat-grey-20);
/* Text */
--zcat-avatar-text-default: var(--zcat-dark-10);
/* -------------------------------------------- PROFILE MENU -------------------------------------------- */
/* Background */
--zcat-profileMenu-bg-white: var(--zcat-white);
--zcat-profileMenu-bg-profileArea: var(--zcat-grey-50);
/* Border */
--zcat-profileMenu-border-default: var(--zcat-grey-20);
--zcat-profileMenu-border-outer: var(--zcat-grey-10);
/* Text */
--zcat-profileMenu-text-heading: var(--zcat-dark-10);
--zcat-profileMenu-text-subText: var(--zcat-dark-20);
/* Icon */
--zcat-profileMenu-icon-light: var(--zcat-grey-30);
--zcat-profileMenu-icon-white: var(--zcat-white);
--zcat-profileMenu-icon-primary: var(--zcat-dark-10);
/* -------------------------------------------- TIME LINE -------------------------------------------- */
/* Background */
--zcat-timeLine-bg-green: var(--zcat-green-40);
--zcat-timeLine-bg-greenDot: var(--zcat-green-10);
--zcat-timeLine-bg-orange: var(--zcat-orange-40);
--zcat-timeLine-bg-orangeDot: var(--zcat-orange-10);
--zcat-timeLine-bg-blue: var(--zcat-blue-40);
--zcat-timeLine-bg-blueDot: var(--zcat-blue-10);
--zcat-timeLine-bg-red: var(--zcat-red-40);
--zcat-timeLine-bg-redDot: var(--zcat-red-10);
/* Border */
--zcat-timeLine-border-default: var(--zcat-grey-10);
}
:root {
/* -------------------------------------------- FILL BUTTONS -------------------------------------------- */
/* Background */
--zcat-btn-fill-bg-primary-default: var(--zcat-primary-1);
--zcat-btn-fill-bg-primary-hover: var(--zcat-primary-2);
--zcat-btn-fill-bg-primary-click: var(--zcat-primary-1);
--zcat-btn-fill-bg-primary-disabled: var(--zcat-primary-3);
--zcat-btn-fill-bg-success-default: var(--zcat-green-1);
--zcat-btn-fill-bg-success-hover: var(--zcat-green-2);
--zcat-btn-fill-bg-success-click: var(--zcat-green-1);
--zcat-btn-fill-bg-success-disabled: var(--zcat-green-3);
--zcat-btn-fill-bg-danger-default: var(--zcat-red-1);
--zcat-btn-fill-bg-danger-hover: var(--zcat-red-2);
--zcat-btn-fill-bg-danger-click: var(--zcat-red-1);
--zcat-btn-fill-bg-danger-disabled: var(--zcat-red-3);
/* Text and Icons */
--zcat-btn-fill-text-default: var(--zcat-white);
--zcat-btn-fill-text-click: var(--zcat-white);
--zcat-btn-fill-text-disabled: var(--zcat-primary-4);
--zcat-btn-fill-icon-default: var(--zcat-white);
--zcat-btn-fill-icon-click: var(--zcat-white);
--zcat-btn-fill-icon-disabled: var(--zcat-primary-4);
/* Split line for buttton*/
--zcat-btn-fill-splitLine-default: var(--zcat-white-20);
/* -------------------------------------------- OUTLINE BUTTONS -------------------------------------------- */
/* Text */
--zcat-btn-outline-text-primary-default: var(--zcat-primary-1);
--zcat-btn-outline-text-primary-hover: var(--zcat-primary-2);
--zcat-btn-outline-text-primary-click: var(--zcat-primary-1);
--zcat-btn-outline-text-primary-disabled: var(--zcat-primary-3);
--zcat-btn-outline-text-success-default: var(--zcat-green-1);
--zcat-btn-outline-text-success-hover: var(--zcat-green-2);
--zcat-btn-outline-text-success-click: var(--zcat-green-1);
--zcat-btn-outline-text-success-disabled: var(--zcat-green-3);
--zcat-btn-outline-text-danger-default: var(--zcat-red-1);
--zcat-btn-outline-text-danger-hover: var(--zcat-red-2);
--zcat-btn-outline-text-danger-click: var(--zcat-red-1);
--zcat-btn-outline-text-danger-disabled: var(--zcat-red-3);
/* Icons */
--zcat-btn-outline-icon-primary-default: var(--zcat-primary-1);
--zcat-btn-outline-icon-primary-hover: var(--zcat-primary-2);
--zcat-btn-outline-icon-primary-click: var(--zcat-primary-1);
--zcat-btn-outline-icon-primary-disabled: var(--zcat-primary-3);
--zcat-btn-outline-icon-success-default: var(--zcat-green-1);
--zcat-btn-outline-icon-success-hover: var(--zcat-green-2);
--zcat-btn-outline-icon-success-click: var(--zcat-green-1);
--zcat-btn-outline-icon-success-disabled: var(--zcat-green-3);
--zcat-btn-outline-icon-danger-default: var(--zcat-red-1);
--zcat-btn-outline-icon-danger-hover: var(--zcat-red-2);
--zcat-btn-outline-icon-danger-click: var(--zcat-red-1);
--zcat-btn-outline-icon-danger-disabled: var(--zcat-red-3);
/* Borders */
--zcat-btn-outline-border-primary-default: var(--zcat-primary-1);
--zcat-btn-outline-border-primary-hover: var(--zcat-primary-2);
--zcat-btn-outline-border-primary-click: var(--zcat-primary-1);
--zcat-btn-outline-border-primary-disabled: var(--zcat-primary-3);
--zcat-btn-outline-border-success-default: var(--zcat-green-1);
--zcat-btn-outline-border-success-hover: var(--zcat-green-2);
--zcat-btn-outline-border-success-click: var(--zcat-green-1);
--zcat-btn-outline-border-success-disabled: var(--zcat-green-3);
--zcat-btn-outline-border-danger-default: var(--zcat-red-1);
--zcat-btn-outline-border-danger-hover: var(--zcat-red-2);
--zcat-btn-outline-border-danger-click: var(--zcat-red-1);
--zcat-btn-outline-border-danger-disabled: var(--zcat-red-3);
/* Background */
--zcat-btn-outline-bg-primaryHover: var(--zcat-primary-4);
--zcat-btn-outline-bg-successHover: var(--zcat-green-4);
--zcat-btn-outline-bg-dangerHover: var(--zcat-red-4);
/* -------------------------------------------- GREY BUTTONS -------------------------------------------- */
/* Background */
--zcat-btn-grey-bg-default: var(--zcat-grey-2);
--zcat-btn-grey-bg-hover: var(--zcat-primary-4);
--zcat-btn-grey-bg-click: var(--zcat-grey-2);
--zcat-btn-grey-bg-disabled: var(--zcat-grey-4);
/* Grey-Text & Grey-Icons */
--zcat-btn-grey-text-default: var(--zcat-dark-1);
--zcat-btn-grey-text-hover: var(--zcat-dark-1);
--zcat-btn-grey-text-click: var(--zcat-dark-1);
--zcat-btn-grey-text-disabled: var(--zcat-dark-4);
--zcat-btn-grey-icon-default: var(--zcat-dark-1);
--zcat-btn-grey-icon-hover: var(--zcat-dark-1);
--zcat-btn-grey-icon-click: var(--zcat-dark-1);
--zcat-btn-grey-icon-disabled: var(--zcat-dark-4);
/* Grey-Borders */
--zcat-btn-grey-border-default: var(--zcat-grey-1);
--zcat-btn-grey-border-hover: var(--zcat-grey-1);
--zcat-btn-grey-border-click: var(--zcat-grey-1);
--zcat-btn-grey-border-disabled: var(--zcat-grey-3);
/* -------------------------------------------- GHOST BUTTONS -------------------------------------------- */
/* Background */
--zcat-btn-ghost-bg-primary-hover: var(--zcat-primary-4);
--zcat-btn-ghost-bg-success-hover: var(--zcat-green-4);
--zcat-btn-ghost-bg-danger-hover: var(--zcat-red-4);
/* Text */
--zcat-btn-ghost-text-primary-default: var(--zcat-primary-1);
--zcat-btn-ghost-text-primary-hover: var(--zcat-primary-2);
--zcat-btn-ghost-text-primary-click: var(--zcat-primary-1);
--zcat-btn-ghost-text-primary-disabled: var(--zcat-primary-3);
--zcat-btn-ghost-text-success-default: var(--zcat-green-1);
--zcat-btn-ghost-text-success-hover: var(--zcat-green-2);
--zcat-btn-ghost-text-success-click: var(--zcat-green-1);
--zcat-btn-ghost-text-success-disabled: var(--zcat-green-3);
--zcat-btn-ghost-text-danger-default: var(--zcat-red-1);
--zcat-btn-ghost-text-danger-hover: var(--zcat-red-2);
--zcat-btn-ghost-text-danger-click: var(--zcat-red-1);
--zcat-btn-ghost-text-danger-disabled: var(--zcat-red-3);
/* Icons */
--zcat-btn-ghost-icon-primary-default: var(--zcat-primary-1);
--zcat-btn-ghost-icon-primary-hover: var(--zcat-primary-2);
--zcat-btn-ghost-icon-primary-click: var(--zcat-primary-1);
--zcat-btn-ghost-icon-primary-disabled: var(--zcat-primary-3);
--zcat-btn-ghost-icon-success-default: var(--zcat-green-1);
--zcat-btn-ghost-icon-success-hover: var(--zcat-green-2);
--zcat-btn-ghost-icon-success-click: var(--zcat-green-1);
--zcat-btn-ghost-icon-success-disabled: var(--zcat-green-3);
--zcat-btn-ghost-icon-danger-default: var(--zcat-red-1);
--zcat-btn-ghost-icon-danger-hover: var(--zcat-red-2);
--zcat-btn-ghost-icon-danger-click: var(--zcat-red-1);
--zcat-btn-ghost-icon-danger-disabled: var(--zcat-red-3);
/* -------------------------------------------- Gradient Buttons -------------------------------------------- */
--zcat-btn-gradient-bg-top: var(--zcat-gradient-3);
--zcat-btn-gradient-bg-bottom: var(--zcat-gradient-4);
--zcat-btn-gradient-bg-top-hover: var(--zcat-gradient-3-1);
--zcat-btn-gradient-bg-bottom-hover: var(--zcat-gradient-4-1);
--zcat-btn-gradient-bg-top-click: var(--zcat-gradient-3);
--zcat-btn-gradient-bg-bottom-click: var(--zcat-gradient-4);
--zcat-btn-gradient-bg-top-disabled: var(--zcat-gradient-3-2);
--zcat-btn-gradient-bg-bottom-disabled: var(--zcat-gradient-4-2);
/* Text */
--zcat-btn-gradient-text-default: var(--zcat-dark-1);
--zcat-btn-gradient-text-hover: var(--zcat-dark-1);
--zcat-btn-gradient-text-click: var(--zcat-dark-1);
--zcat-btn-gradient-text-disabled: var(--zcat-dark-4);
/* -------------------------------------------- LINK -------------------------------------------- */
/* Link Text */
--zcat-link-text-primary-default: var(--zcat-primary-1);
--zcat-link-text-primary-hover: var(--zcat-primary-2);
--zcat-link-text-primary-click: var(--zcat-primary-1);
--zcat-link-text-primary-disabled: var(--zcat-primary-3);
/* Link Icons */
--zcat-link-icon-primary-default: var(--zcat-primary-1);
--zcat-link-icon-primary-hover: var(--zcat-primary-2);
--zcat-link-icon-primary-click: var(--zcat-primary-1);
--zcat-link-icon-primary-disabled: var(--zcat-primary-3);
/* -------------------------------------------- TABLE -------------------------------------------- */
/* Table-Text & Table-icons */
--zcat-table-text-primary: var(--zcat-dark-1);
--zcat-table-text-secondary: var(--zcat-dark-2);
--zcat-table-text-light: var(--zcat-dark-3);
--zcat-table-text-disabled: var(--zcat-dark-4);
--zcat-table-icon-primary: var(--zcat-dark-1);
--zcat-table-icon-secondary: var(--zcat-dark-2);
--zcat-table-icon-light: var(--zcat-dark-3);
--zcat-table-icon-disabled: var(--zcat-dark-4);
/* Table-border */
--zcat-table-border-default: var(--zcat-grey-2);
/* Table-background */
--zcat-table-bg-row: var(--zcat-white);
--zcat-table-bg-header: var(--zcat-grey-4);
--zcat-table-bg-rowHover: var(--zcat-grey-5);
--zcat-table-bg-rowSelected: var(--zcat-primary-4);
--zcat-table-bg-rowDisabled: var(--zcat-grey-4);
/* Table-threedot */
--zcat-table-threeDot-icon: var(--zcat-dark-1);
--zcat-table-threeDot-iconBg: var(--zcat-grey-4);
--zcat-table-threeDot-iconBg-hover: var(--zcat-grey-2);
--zcat-table-threeDot-iconBg-active: var(--zcat-primary-4);
/* -------------------------------------------- SERVICE MENU -------------------------------------------- */
/* Background */
--zcat-serviceMenu-bg-serviceMenu: linear-gradient(180deg, var(--zcat-gradient-1) 0%, var(--zcat-gradient-2) 100%);
--zcat-serviceMenu-bg-icon: var(--zcat-primary-5);
/* Border */
--zcat-serviceMenu-border-default: var(--zcat-dark-2);
/* Icons */
--zcat-serviceMenu-icon-default: var(--zcat-white);
--zcat-serviceMenu-iconBg-active: var(--zcat-primary-4);
/* Text */
--zcat-serviceMenu-text-subHeading: var(--zcat-dark-2);
--zcat-serviceMenu-text-default: var(--zcat-white);
--zcat-serviceMenu-text-active: var(--zcat-dark-1);
/* -------------------------------------------- INPUT FIELDS -------------------------------------------- */
/* Input field - Background */
--zcat-inputField-bg-default: var(--zcat-white);
--zcat-inputField-bg-hover: var(--zcat-grey-6);
--zcat-inputField-bg-active: var(--zcat-grey-6);
--zcat-inputField-bg-disabled: var(--zcat-grey-4);
--zcat-inputField-bg-error: var(--zcat-red-4);
--zcat-inputField-bg-linkField-hover: var(--zcat-grey-6);
--zcat-inputField-bg-keyvalue-hover: var(--zcat-grey-5);
/* Input field - border */
--zcat-inputField-border-default: var(--zcat-grey-1);
--zcat-inputField-border-hover: var(--zcat-primary-3);
--zcat-inputField-border-active: var(--zcat-primary-1);
--zcat-inputField-border-disabled: var(--zcat-grey-3);
--zcat-inputField-border-error: var(--zcat-red-3);
/* Input Field Text */
--zcat-inputField-text-placeholder: var(--zcat-dark-3);
--zcat-inputField-text-active: var(--zcat-dark-1);
--zcat-inputField-text-disabled: var(--zcat-dark-4);
--zcat-inputField-text-label: var(--zcat-dark-2);
--zcat-inputField-text-error: var(--zcat-red-1);
--zcat-inputField-text-optional: var(--zcat-dark-3);
/* Input Field Link */
--zcat-inputField-text-linkField: var(--zcat-primary-1);
--zcat-inputField-text-linkField-hover: var(--zcat-primary-2);
--zcat-inputField-text-linkField-active: var(--zcat-primary-1);
--zcat-inputField-text-linkField-disabled: var(--zcat-primary-3);
/* Input Field Icon */
--zcat-inputField-icon-placeholder: var(--zcat-dark-3);
--zcat-inputField-icon-active: var(--zcat-dark-1);
--zcat-inputField-icon-hover: var(--zcat-primary-4);
--zcat-inputField-icon-disabled: var(--zcat-dark-4);
--zcat-inputField-icon-label: var(--zcat-dark-2);
/* -------------------------------------------- CHIPS -------------------------------------------- */
/* Chips background */
--zcat-chips-bg-default: var(--zcat-grey-5);
--zcat-chips-bg-hover: var(--zcat-grey-6);
--zcat-chips-bg-disabled: var(--zcat-grey-4);
/* Chips border */
--zcat-chips-border-default: var(--zcat-grey-2);
--zcat-chips-border-hover: var(--zcat-grey-1);
--zcat-chips-border-disabled: var(--zcat-grey-3);
/* Chips text */
--zcat-chips-text-default: var(--zcat-dark-1);
--zcat-chips-text-hover: var(--zcat-dark-1);
--zcat-chips-text-disabled: var(--zcat-dark-4);
/* Chips icons */
--zcat-chips-icon-default: var(--zcat-dark-1);
--zcat-chips-icon-hover: var(--zcat-dark-1);
--zcat-chips-icon-disabled: var(--zcat-dark-4);
/* -------------------------------------------- CHECKBOX -------------------------------------------- */
/* Checkbox background */
--zcat-checkbox-bg-default: var(--zcat-white);
--zcat-checkbox-bg-hover: var(--zcat-primary-4);
--zcat-checkbox-bg-disabled: var(--zcat-grey-4);
--zcat-checkbox-bg-clicked: var(--zcat-primary-1);
--zcat-checkbox-bg-clicked-hover: var(--zcat-primary-2);
--zcat-checkbox-bg-clicked-disabled: var(--zcat-primary-3);
--zcat-checkbox-bg-white: var(--zcat-white);
/* Checkbox icon */
--zcat-checkbox-icon-click: var(--zcat-white);
--zcat-checkbox-icon-disabled: var(--zcat-primary-4);
/* Checkbox border */
--zcat-checkbox-border-default: var(--zcat-grey-1);
--zcat-checkbox-border-hover: var(--zcat-primary-3);
--zcat-checkbox-border-disabled: var(--zcat-grey-3);
/* Inner For checkbox */
--zcat-checkbox-inner-default: var(--zcat-white);
--zcat-checkbox-inner-disabled: var(--zcat-primary-4);
/* -------------------------------------------- MENU LIST -------------------------------------------- */
/* Menu background */
--zcat-menuList-bg-default: var(--zcat-white);
--zcat-menuList-bg-hover: var(--zcat-grey-5);
--zcat-menuList-bg-selected: var(--zcat-primary-4);
--zcat-menuList-bg-disabled: var(--zcat-grey-4);
/* Menu border */
--zcat-menuList-border-default: var(--zcat-grey-2);
/* Menu text */
--zcat-menuList-text-default: var(--zcat-dark-1);
--zcat-menuList-text-light: var(--zcat-dark-3);
--zcat-menuList-text-hover: var(--zcat-dark-1);
--zcat-menuList-text-disabled: var(--zcat-dark-4);
--zcat-menuList-text-heading: var(--zcat-dark-2);
/* Menu icon */
--zcat-menuList-icon-active: var(--zcat-dark-1);
--zcat-menuList-icon-hover: var(--zcat-dark-1);
--zcat-menuList-icon-disabled: var(--zcat-dark-4);
--zcat-menuList-icon-check-default: var(--zcat-primary-1);
/* -------------------------------------------- CARDS -------------------------------------------- */
/* Card background */
--zcat-card-bg-default: var(--zcat-white);
--zcat-card-bg-secondary: var(--zcat-grey-8);
--zcat-card-bg-tertiary: var(--zcat-grey-5);
--zcat-card-bg-quaternary: var(--zcat-grey-3);
--zcat-card-bg-bodyBg: var(--zcat-grey-6);
--zcat-card-bg-darkBg: var(--zcat-gradient-1);
--zcat-card-bg-disabled: var(--zcat-grey-4);
/* hover state */
--zcat-card-bg-hover: var(--zcat-grey-8);
--zcat-card-bg-hover-secondary: var(--zcat-grey-5);
--zcat-card-bg-hover-tertiary: var(--zcat-grey-6);
--zcat-card-bg-hover-quaternary: var(--zcat-grey-5);
--zcat-card-bg-hover-bodyBg: var(--zcat-grey-5);
/* selected state */
--zcat-card-bg-selected: var(--zcat-primary-4);
--zcat-card-bg-secondary-selected: var(--zcat-primary-4);
--zcat-card-bg-tertiary-selected: var(--zcat-primary-4);
--zcat-card-bg-quaternary-selected: var(--zcat-primary-4);
--zcat-card-bg-bodyBg-selected: var(--zcat-primary-4);
/* Card border */
--zcat-card-border-default: var(--zcat-grey-2);
--zcat-card-border-hover: var(--zcat-grey-7);
--zcat-card-border-selected: var(--zcat-primary-1);
--zcat-card-border-disabled: var(--zcat-grey-3);
/* -------------------------------------------- SHADOWS -------------------------------------------- */
/* Shadows background */
--zcat-shadow-bg-default: var(--zcat-grey-3);
--zcat-shadow-bg-secondary: var(--zcat-grey-9);
/* -------------------------------------------- PRIMARY TABS -------------------------------------------- */
/* Tabs background */
--zcat-tabs-primary-bg: var(--zcat-white);
--zcat-tabs-primary-bg-hover: var(--zcat-primary-4);
--zcat-tabs-primary-bg-hoverDisabled: var(--zcat-grey-4);
/* Tabs border */
--zcat-tabs-primary-border-default: var(--zcat-grey-7);
--zcat-tabs-primary-border-hover: var(--zcat-primary-3);
--zcat-tabs-primary-border-active: var(--zcat-primary-1);
--zcat-tabs-primary-border-disabled: var(--zcat-grey-3);
/* Tabs text */
--zcat-tabs-primary-text-default: var(--zcat-dark-2);
--zcat-tabs-primary-text-hover: var(--zcat-dark-1);
--zcat-tabs-primary-text-active: var(--zcat-primary-1);
--zcat-tabs-primary-text-disabled: var(--zcat-dark-4);
/* Tabs icon */
--zcat-tabs-primary-icon-default: var(--zcat-dark-2);
--zcat-tabs-primary-icon-hover: var(--zcat-dark-1);
--zcat-tabs-primary-icon-active: var(--zcat-primary-1);
--zcat-tabs-primary-icon-disabled: var(--zcat-dark-4);
/* -------------------------------------------- SECONDARY TABS -------------------------------------------- */
/* Tabs bg */
--zcat-tabs-secondary-bg-default: var(--zcat-grey-3);
--zcat-tabs-secondary-bg-hover: var(--zcat-white);
--zcat-tabs-secondary-bg-active: var(--zcat-white);
--zcat-tabs-secondary-bg-disabled: var(--zcat-grey-4);
/* Tabs text */
--zcat-tabs-secondary-text-default: var(--zcat-dark-2);
--zcat-tabs-secondary-text-hover: var(--zcat-dark-1);
--zcat-tabs-secondary-text-active: var(--zcat-primary-1);
--zcat-tabs-secondary-text-disabled: var(--zcat-dark-4);
/* Tabs icon */
--zcat-tabs-secondary-icon-default: var(--zcat-dark-2);
--zcat-tabs-secondary-icon-hover: var(--zcat-dark-1);
--zcat-tabs-secondary-icon-active: var(--zcat-primary-1);
--zcat-tabs-secondary-icon-disabled: var(--zcat-dark-4);
/* Tabs border */
--zcat-tabs-secondary-border-default: var(--zcat-grey-7);
/* -------------------------------------------- CODE TABS -------------------------------------------- */
/* Tabs bg */
--zcat-tabs-code-bg-default: var(--zcat-grey-3);
--zcat-tabs-code-bg-hover: var(--zcat-white);
--zcat-tabs-code-bg-active: var(--zcat-white);
--zcat-tabs-code-bg-disabled: var(--zcat-grey-4);
/* Tabs text */
--zcat-tabs-code-text-default: var(--zcat-dark-2);
--zcat-tabs-code-text-hover: var(--zcat-dark-1);
--zcat-tabs-code-text-active: var(--zcat-primary-1);
--zcat-tabs-code-text-disabled: var(--zcat-dark-4);
/* Tabs icon */
--zcat-tabs-code-icon-default: var(--zcat-dark-2);
--zcat-tabs-code-icon-hover: var(--zcat-dark-1);
--zcat-tabs-code-icon-active: var(--zcat-primary-1);
--zcat-tabs-code-icon-disabled: var(--zcat-dark-4);
/* Tabs border */
--zcat-tabs-code-border-default: var(--zcat-grey-7);
/* -------------------------------------------- BADGE-------------------------------------------- */
/* Primary Badge bg */
--zcat-badge-primary-bg-primary: var(--zcat-primary-1);
--zcat-badge-primary-bg-green: var(--zcat-green-1);
--zcat-badge-primary-bg-red: var(--zcat-red-1);
--zcat-badge-primary-bg-pink: var(--zcat-pink-1);
--zcat-badge-primary-bg-orange: var(--zcat-orange-1);
--zcat-badge-primary-bg-disabled: var(--zcat-grey-4);
/* --zcat-badge-primary-bg-primary2: var(--zcat-primary-4);
--zcat-badge-primary-bg-green2: var(--zcat-green-4);
--zcat-badge-primary-bg-red2: var(--zcat-red-4);
--zcat-badge-primary-bg-pink2: var(--zcat-pink-4);
--zcat-badge-primary-bg-orange2: var(--zcat-orange-4); */
/* Secondary Badge bg */
--zcat-badge-secondary-bg-default: var(--zcat-grey-2);
--zcat-badge-secondary-bg-primary: var(--zcat-primary-4);
--zcat-badge-secondary-bg-green: var(--zcat-green-4);
--zcat-badge-secondary-bg-red: var(--zcat-red-4);
--zcat-badge-secondary-bg-pink: var(--zcat-pink-4);
--zcat-badge-secondary-bg-orange: var(--zcat-orange-4);
--zcat-badge-secondary-bg-disbaled: var(--zcat-grey-4);
/* primary Badge text */
--zcat-badge-primary-text-white: var(--zcat-white);
--zcat-badge-primary-text-primary: var(--zcat-dark-1);
--zcat-badge-primary-text-disabled: var(--zcat-dark-4);
/* secondary Badge text */
--zcat-badge-secondary-text-default: var(--zcat-white);
--zcat-badge-secondary-text-primary: var(--zcat-primary-1);
--zcat-badge-secondary-text-green: var(--zcat-green-1);
--zcat-badge-secondary-text-red: var(--zcat-red-1);
--zcat-badge-secondary-text-pink: var(--zcat-pink-1);
--zcat-badge-secondary-text-orange: var(--zcat-orange-1);
--zcat-badge-secondary-text-disabled: var(--zcat-dark-4);
/* -------------------------------------------- BREADCRUMBS-------------------------------------------- */
/* breadcrumbs bg */
--zcat-breadcrumbs-bg-hover: var(--zcat-primary-4);
/* breadcrumbs text */
--zcat-breadcrumbs-text-default: var(--zcat-dark-1);
--zcat-breadcrumbs-text-hover: var(--zcat-primary-1);
--zcat-breadcrumbs-text-active: var(--zcat-dark-2);
--zcat-breadcrumbs-text-disabled: var(--zcat-dark-4);
/* breadcrumbs icon */
--zcat-breadcrumbs-icon-default: var(--zcat-dark-2);
--zcat-breadcrumbs-icon-hover: var(--zcat-primary-1);
--zcat-breadcrumbs-icon-active: var(--zcat-dark-1);
--zcat-breadcrumbs-icon-disabled: var(--zcat-dark-4);
/* -------------------------------------------- ACCORDION -------------------------------------------- */
/* Accordion bg */
--zcat-accordion-bg-default: var(--zcat-white);
--zcat-accordion-bg-hover: var(--zcat-grey-8);
--zcat-accordion-bg-active: var(--zcat-grey-5);
--zcat-accordion-bg-disabled: var(--zcat-grey-4);
--zcat-accordion-bg-container: var(--zcat-white);
--zcat-accordion-icon-bg-default: var(--zcat-grey-2);
--zcat-secondary-accordion-bg-hover: var(--zcat-primary-4);
/* Accordion text */
--zcat-accordion-text-default: var(--zcat-dark-1);
--zcat-accordion-text-secondary: var(--zcat-dark-2);
--zcat-accordion-text-disabled: var(--zcat-dark-4);
--zcat-secondary-accordion-text-default: var(--zcat-primary-1);
--zcat-secondary-accordion-text-hover: var(--zcat-primary-2);
/* Accordion icon */
--zcat-accordion-icon-default: var(--zcat-dark-1);
--zcat-accordion-icon-bg-hover: var(--zcat-grey-2);
--zcat-accordion-icon-disabled: var(--zcat-dark-4);
/* Accordion border */
--zcat-accordion-border-default: var(--zcat-grey-2);
--zcat-accordion-border-theme: var(--zcat-primary-1);
--zcat-accordion-border-disabled: var(--zcat-grey-3);
/* -------------------------------------------- SIDE MENU-------------------------------------------- */
/* Side Menu bg*/
--zcat-sidemenu-bg-default: var(--zcat-white);
--zcat-sidemenu-bg-hover: var(--zcat-grey-5);
--zcat-sidemenu-bg-active: var(--zcat-primary-4);
/* Side Menu text*/
--zcat-sidemenu-text-default: var(--zcat-dark-1);
--zcat-sidemenu-text-hover: var(--zcat-primary-1);
--zcat-sidemenu-text-active: var(--zcat-primary-1);
--zcat-sidemenu-text-disabled: var(--zcat-dark-4);
--zcat-sidemenu-text-subHeading: var(--zcat-dark-3);
--zcat-sidemenu-text-serviceName: var(--zcat-dark-1);
/* Side Menu icon */
--zcat-sidemenu-icon-default: var(--zcat-dark-1);
--zcat-sidemenu-icon-hover: var(--zcat-primary-1);
--zcat-sidemenu-icon-active: var(--zcat-primary-1);
--zcat-sidemenu-icon-disabled: var(--zcat-dark-4);
/* Side Menu border */
--zcat-sidemenu-border-default: var(--zcat-grey-7);
/* -------------------------------------------- MAIN HEADER -------------------------------------------- */
/* Project Name */
--zcat-mainHeader-projectName-bg: var(--zcat-green-4);
--zcat-mainHeader-projectName-text: var(--zcat-green-1);
/* Main header bg */
--zcat-mainHeader-bg-default: var(--zcat-white);
/* Main header border */
--zcat-mainHeader-border-default: var(--zcat-grey-7);
/* Main header text */
--zcat-mainHeader-text-default: var(--zcat-dark-1);
/* -------------------------------------------- SUB HEADER -------------------------------------------- */
/* Sub header bg */
--zcat-subHeader-bg-default: var(--zcat-white);
/* sub header border */
--zcat-subHeader-border-default: var(--zcat-grey-7);
/* sub header text */
--zcat-subHeader-text-default: var(--zcat-dark-1);
/* -------------------------------------------- FULL PAGE POPUP HEADER -------------------------------------------- */
/* Fullpage popup Background */
--zcat-fullpagePopup-bg-default: var(--zcat-grey-5);
--zcat-fullpagePopup-bg-header: var(--zcat-grey-5);
--zcat-fullpagePopup-bg-body: var(--zcat-white);
/* Fullpage popup border */
--zcat-fullpagePopup-border-default: var(--zcat-grey-7);
/* Fullpage popup text */
--zcat-fullpagePopup-text-default: var(--zcat-dark-1);
/* -------------------------------------------- BODY -------------------------------------------- */
/* background */
--zcat-body-bg: var(--zcat-grey-3);
/* rightpanel */
--zcat-body-container-bg: var(--zcat-white);
--zcat-body-curve-bg: var(--zcat-gradient-2);
/* text */
--zcat-body-text-primary: var(--zcat-dark-1);
--zcat-body-text-secondary: var(--zcat-dark-2);
--zcat-body-text-light: var(--zcat-dark-3);
--zcat-body-text-disabled: var(--zcat-dark-4);
--zcat-body-text-theme: var(--zcat-primary-1);
--zcat-body-text-theme-red: var(--zcat-red-1);
--zcat-body-text-white: var(--zcat-white);
/* border */
--zcat-body-border-default: var(--zcat-grey-2);
--zcat-body-border-outerdivider: var(--zcat-grey-7);
--zcat-body-border-outerdivider-secondary: var(--zcat-grey-2);
/* icons */
--zcat-body-icons-static-primary: var(--zcat-dark-1);
--zcat-body-icons-static-secondary: var(--zcat-dark-2);
--zcat-body-icons-static-tertiary: var(--zcat-dark-3);
--zcat-body-icons-static-disabled: var(--zcat-dark-4);
--zcat-body-icons-static-theme: var(--zcat-primary-1);
--zcat-body-icons-static-theme-hover: var(--zcat-primary-2);
--zcat-body-icons-static-theme-light: var(--zcat-primary-4);
/* -------------------------------------------- POPUP -------------------------------------------- */
/* border */
--zcat-popup-border: var(--zcat-grey-2);
--zcat-popup-outer-border: var(--zcat-grey-2);
/* background */
--zcat-popup-bg: var(--zcat-white);
--zcat-popup-bg-blur: var(--zcat-dark-5);
/* -------------------------------------------- ALERTS AND ATTENTION -------------------------------------------- */
/* info */
--zcat-alerts-info-bg: var(--zcat-blue-4);
--zcat-alerts-info-border: var(--zcat-blue-3);
--zcat-alerts-info-text-primary: var(--zcat-dark-1);
--zcat-alerts-info-text-secondary: var(--zcat-dark-2);
--zcat-alerts-info-icon: var(--zcat-dark-1);
/* success */
--zcat-alerts-success-bg: var(--zcat-green-4);
--zcat-alerts-success-border: var(--zcat-green-3);
--zcat-alerts-success-text-primary: var(--zcat-dark-1);
--zcat-alerts-success-text-secondary: var(--zcat-dark-2);
--zcat-alerts-success-icon: var(--zcat-dark-1);
/* danger */
--zcat-alerts-danger-bg: var(--zcat-red-4);
--zcat-alerts-danger-border: var(--zcat-red-3);
--zcat-alerts-danger-text-primary: var(--zcat-dark-1);
--zcat-alerts-danger-text-secondary: var(--zcat-dark-2);
--zcat-alerts-danger-icon: var(--zcat-dark-1);
/* warning */
--zcat-alerts-warning-bg: var(--zcat-orange-4);
--zcat-alerts-warning-border: var(--zcat-orange-3);
--zcat-alerts-warning-text-primary: var(--zcat-dark-1);
--zcat-alerts-warning-text-secondary: var(--zcat-dark-2);
--zcat-alerts-warning-icon: var(--zcat-dark-1);
/* dafault */
--zcat-attention-default-bg: var(--zcat-grey-5);
--zcat-attention-default-border: var(--zcat-grey-2);
--zcat-attention-default-text-primary: var(--zcat-dark-1);
--zcat-attention-default-text-secondary: var(--zcat-dark-2);
--zcat-attention-default-icon: var(--zcat-dark-1);
/* -------------------------------------------- PAGINATION -------------------------------------------- */
--zcat-pagination-bg: var(--zcat-white);
--zcat-pagination-text-primary: var(--zcat-dark-1);
--zcat-pagination-text-secondary: var(--zcat-dark-2);
--zcat-pagination-text-tertiary: var(--zcat-dark-3);
--zcat-pagination-theme: var(--zcat-primary-1);
--zcat-pagination-divider: var(--zcat-grey-2);
/* -------------------------------------------- TOOLTIP -------------------------------------------- */
--zcat-tooltip-bg: var(--zcat-white);
--zcat-tooltip-text-primary: var(--zcat-dark-1);
--zcat-tooltip-text-secondary: var(--zcat-dark-2);
--zcat-tooltip-border: var(--zcat-grey-7);
/* -------------------------------------------- LOADER -------------------------------------------- */
/* content */
--zcat-loader-content-primary: var(--zcat-grey-1);
--zcat-loader-content-secondary: var(--zcat-grey-6);
/* round */
--zcat-loader-round-primary: var(--zcat-primary-1);
--zcat-loader-round-secondary: var(--zcat-dark-1);
--zcat-loader-round-tertiary: var(--zcat-white);
/* progress */
--zcat-loader-progress-primary: var(--zcat-primary-1);
--zcat-loader-progress-secondary: var(--zcat-grey-2);
/* -------------------------------------------- RADIO -------------------------------------------- */
/* radio background */
--zcat-radio-bg-default: var(--zcat-white);
--zcat-radio-bg-hover: var(--zcat-primary-4);
--zcat-radio-bg-disabled: var(--zcat-grey-4);
--zcat-radio-bg-clicked: var(--zcat-primary-1);
--zcat-radio-bg-clicked-hover: var(--zcat-primary-2);
--zcat-radio-bg-clicked-disabled: var(--zcat-primary-3);
--zcat-radio-outer-bg-default: var(--zcat-white);
/* radio border */
--zcat-radio-border-default: var(--zcat-grey-1);
--zcat-radio-border-hover: var(--zcat-primary-3);
--zcat-radio-border-disabled: var(--zcat-grey-3);
--zcat-radio-outer-border-default: var(--zcat-grey-2);
/* Inner For Radio */
--zcat-radio-inner-default: var(--zcat-white);
--zcat-radio-inner-disabled: var(--zcat-primary-4);
/* -------------------------------------------- TOGGLE -------------------------------------------- */
/* toggle background */
--zcat-toggle-bg-default: var(--zcat-white);
--zcat-toggle-bg-hover: var(--zcat-primary-4);
--zcat-toggle-bg-disabled: var(--zcat-grey-4);
--zcat-toggle-bg-clicked: var(--zcat-primary-1);
--zcat-toggle-bg-clicked-hover: var(--zcat-primary-2);
--zcat-toggle-bg-clicked-disabled: var(--zcat-primary-3);
/* toggle border */
--zcat-toggle-border-default: var(--zcat-grey-1);
--zcat-toggle-border-hover: var(--zcat-primary-3);
--zcat-toggle-border-disabled: var(--zcat-grey-3);
/* Inner For Toggle */
--zcat-toggle-inner-active: var(--zcat-white);
--zcat-toggle-inner-active-disabled: var(--zcat-primary-4);
--zcat-toggle-inner-default: var(--zcat-grey-1);
--zcat-toggle-inner-hover: var(--zcat-primary-3);
--zcat-toggle-inner-disabled: var(--zcat-grey-2);
/* -------------------------------------------- STEPPER -------------------------------------------- */
/* Stepper background */
--zcat-stepper-bg-default: var(--zcat-grey-5);
--zcat-stepper-bg-active: var(--zcat-primary-1);
--zcat-stepper-bg-completed: var(--zcat-green-1);
--zcat-stepper-bg-disabled: var(--zcat-grey-4);
/* Stepper text */
--zcat-stepper-text-default: var(--zcat-dark-2);
--zcat-stepper-text-subText: var(--zcat-dark-2);
--zcat-stepper-text-active: var(--zcat-dark-1);
--zcat-stepper-text-completed: var(--zcat-dark-1);
--zcat-stepper-text-disabled: var(--zcat-dark-4);
--zcat-stepper-text-number: var(--zcat-white);
/* Stepper divider */
--zcat-stepper-divider-default: var(--zcat-grey-1);
--zcat-stepper-divider-active: var(--zcat-primary-1);
--zcat-stepper-divider-completed: var(--zcat-green-1);
--zcat-stepper-divider-disabled: var(--zcat-grey-3);
/* Stepper border */
--zcat-stepper-border-default: var(--zcat-grey-1);
--zcat-stepper-border-active: var(--zcat-white);
--zcat-stepper-border-disabled: var(--zcat-white-20);
--zcat-stepper-border-completed: var(--zcat-green-4);
/* -------------------------------------------- CODE BLOCK & SNIPPET -------------------------------------------- */
/* Code block background */
--zcat-code-bg-writer: var(--zcat-white);
--zcat-code-bg-reader: var(--zcat-grey-4);
--zcat-code-bg-line-highlight: var(--zcat-primary-4);
/* code border */
--zcat-code-border-default: var(--zcat-grey-2);
/* text */
--zcat-code-text-number: var(--zcat-dark-3);
--zcat-code-text-number-active: var(--zcat-dark-1);
/* -------------------------------------------- DATE PICKER -------------------------------------------- */
/* Date picker background */
--zcat-datePicker-bg-default: var(--zcat-white);
--zcat-datePicker-number-bg-hover: var(--zcat-grey-5);
--zcat-datePicker-number-bg-selected: var(--zcat-primary-1);
--zcat-datePicker-number-bg-active: var(--zcat-primary-4);
/* Date picker text */
--zcat-datePicker-text-default: var(--zcat-dark-1);
--zcat-datePicker-text-selected: var(--zcat-white);
--zcat-datePicker-text-active: var(--zcat-primary-1);
--zcat-datePicker-text-disabled: var(--zcat-dark-4);
--zcat-datePicker-text-days: var(--zcat-dark-3);
--zcat-datePicker-text-headings: var(--zcat-dark-1);
/* Date picker border */
--zcat-datePicker-border-default: var(--zcat-grey-1);
--zcat-datePicker-border-line: var(--zcat-grey-2);
/* -------------------------------------------- Link box -------------------------------------------- */
/* link background */
--zcat-linkbox-bg-default: var(--zcat-grey-5);
--zcat-linkbox-bg-hover: var(--zcat-grey-3);
/* link text */
--zcat-linkbox-text-label1: var(--zcat-dark-2);
--zcat-linkbox-text-label2: var(--zcat-dark-1);
--zcat-linkbox-text-mainText: var(--zcat-dark-1);
/* link icon */
--zcat-linkbox-icon-default: var(--zcat-dark-1);
--zcat-linkbox-icon-hover: var(--zcat-primary-1);
--zcat-linkbox-icon-click: var(--zcat-dark-1);
--zcat-linkbox-icon-label: var(--zcat-dark-2);
/* link border */
--zcat-linkbox-border-default: var(--zcat-grey-2);
--zcat-linkbox-border-hover: var(--zcat-primary-3);
--zcat-linkbox-border-divider: var(--zcat-grey-1);
/* -------------------------------------------- GRAPH -------------------------------------------- */
/* Dial Graph */
--zcat-graph-bg-default: var(--zcat-grey-4);
--zcat-graph-bg-success: var(--zcat-green-1);
--zcat-graph-line-bg-success: var(--zcat-green-4);
--zcat-graph-bg-failure: var(--zcat-red-1);
--zcat-graph-line-bg-failure: var(--zcat-red-4);
/* -------------------------------------------- ILLUSTRATION -------------------------------------------- */
--zcat-illus-primary-blue: var(--zcat-primary-1);
--zcat-illus-white: var(--zcat-white);
--zcat-illus-white-static: var(--zcat-white);
--zcat-illus-black: var(--zcat-dark-1);
--zcat-illus-tint-blue: var(--zcat-primary-6);
--zcat-illus-bg-blue: var(--zcat-primary-7);
/* -------------------------------------------- SCROLLBAR -------------------------------------------- */
--zcat-scrollbar-bg: var(--zcat-grey-1);
--zcat-scrollbar-track-bg: var(--zcat-grey-4);
/* -------------------------------------------- OTHER SHADES -------------------------------------------- */
--zcat-shades-red-1: var(--zcat-red-1);
--zcat-shades-red-2: var(--zcat-red-2);
--zcat-shades-red-3: var(--zcat-red-3);
--zcat-shades-red-4: var(--zcat-red-4);
--zcat-shades-green-1: var(--zcat-green-1);
--zcat-shades-green-2: var(--zcat-green-2);
--zcat-shades-green-3: var(--zcat-green-3);
--zcat-shades-green-4: var(--zcat-green-4);
--zcat-shades-theme-1: var(--zcat-primary-1);
--zcat-shades-theme-2: var(--zcat-primary-2);
--zcat-shades-theme-3: var(--zcat-primary-3);
--zcat-shades-theme-4: var(--zcat-primary-4);
--zcat-shades-blue-1: var(--zcat-blue-1);
--zcat-shades-blue-2: var(--zcat-blue-2);
--zcat-shades-blue-3: var(--zcat-blue-3);
--zcat-shades-blue-4: var(--zcat-blue-4);
--zcat-shades-pink-1: var(--zcat-pink-1);
--zcat-shades-pink-2: var(--zcat-pink-2);
--zcat-shades-pink-3: var(--zcat-pink-3);
--zcat-shades-pink-4: var(--zcat-pink-4);
--zcat-shades-orange-1: var(--zcat-orange-1);
--zcat-shades-orange-2: var(--zcat-orange-2);
--zcat-shades-orange-3: var(--zcat-orange-3);
--zcat-shades-orange-4: var(--zcat-orange-4);
/* -------------------------------------------- Toast -------------------------------------------- */
--zcat-toast-bg-default: var(--zcat-white);
--zcat-toast-border-default: var(--zcat-grey-2);
--zcat-toast-icon-line-success: var(--zcat-green-1);
--zcat-toast-icon-line-danger: var(--zcat-red-1);
--zcat-toast-icon-line-warning: var(--zcat-orange-1);
--zcat-toast-icon-line-info: var(--zcat-blue-1);
--zcat-toast-text-primary: var(--zcat-dark-1);
--zcat-toast-text-secondary: var(--zcat-dark-2);
/* -------------------------------------------- GHOST Dropdown -------------------------------------------- */
/* Background */
--zcat-dropdown-ghost-bg-primary-hover: var(--zcat-primary-4);
/* Text */
--zcat-dropdown-ghost-text-primary-default: var(--zcat-primary-1);
--zcat-dropdown-ghost-text-primary-hover: var(--zcat-primary-2);
--zcat-dropdown-ghost-text-primary-click: var(--zcat-primary-1);
--zcat-dropdown-ghost-text-primary-disabled: var(--zcat-primary-3);
/* Icons */
--zcat-dropdown-ghost-icon-primary-default: var(--zcat-primary-1);
--zcat-dropdown-ghost-icon-primary-hover: var(--zcat-primary-2);
--zcat-dropdown-ghost-icon-primary-click: var(--zcat-primary-1);
--zcat-dropdown-ghost-icon-primary-disabled: var(--zcat-primary-3);
/* -------------------------------------------- AVATAR -------------------------------------------- */
/* Background */
--zcat-avatar-bg-default: var(--zcat-grey-5);
--zcat-avatar-bg-secondary: var(--zcat-grey-2);
/* Border */
--zcat-avatar-border-default: var(--zcat-grey-2);
/* Text */
--zcat-avatar-text-default: var(--zcat-dark-2);
/* Icons */
--zcat-avatar-icon-default: var(--zcat-dark-2);
/* -------------------------------------------- TOUR -------------------------------------------- */
/* Background */
--zcat-tour-bg-default: var(--zcat-white);
--zcat-carosual-bg-default: var(--zcat-dark-4);
--zcat-carosual-bg-active: var(--zcat-dark-1);
/* Border */
--zcat-tour-border-default: var(--zcat-grey-2);
/* Text */
--zcat-avatar-text-default: var(--zcat-dark-1);
/* -------------------------------------------- PROFILE MENU -------------------------------------------- */
/* Background */
--zcat-profileMenu-bg-white: var(--zcat-white);
--zcat-profileMenu-bg-profileArea: var(--zcat-grey-5);
/* Border */
--zcat-profileMenu-border-default: var(--zcat-grey-2);
--zcat-profileMenu-border-outer: var(--zcat-grey-1);
/* Text */
--zcat-profileMenu-text-heading: var(--zcat-dark-1);
--zcat-profileMenu-text-subText: var(--zcat-dark-2);
/* Icon */
--zcat-profileMenu-icon-light: var(--zcat-grey-3);
--zcat-profileMenu-icon-white: var(--zcat-white);
--zcat-profileMenu-icon-primary: var(--zcat-dark-1);
/* -------------------------------------------- TIME LINE -------------------------------------------- */
/* Background */
--zcat-timeLine-bg-green: var(--zcat-green-4);
--zcat-timeLine-bg-greenDot: var(--zcat-green-1);
--zcat-timeLine-bg-orange: var(--zcat-orange-4);
--zcat-timeLine-bg-orangeDot: var(--zcat-orange-1);
--zcat-timeLine-bg-blue: var(--zcat-blue-4);
--zcat-timeLine-bg-blueDot: var(--zcat-blue-1);
--zcat-timeLine-bg-red: var(--zcat-red-4);
--zcat-timeLine-bg-redDot: var(--zcat-red-1);
/* Border */
--zcat-timeLine-border-default: var(--zcat-grey-1);
}
lyte-code-snippet * {
box-sizing: border-box;
}
lyte-code-snippet {
display: block;
position: relative;
direction: ltr;
}
.lyteCSCopyButton {
display: none;
position: absolute;
right: 15px;
top: 15px;
}
.lyteCSCopyButton .lyteDefaultBtn {
/* background: var(--zcat-color-grey2); */
color: var(--zcat-body-text-primary);
/* border-color: var(--zcat-color-grey1); */
/* border-radius: 6px; */
}
.lyteCSCopyButton .lyteDefaultBtn:hover {
background: var(--zcat-color-primarylight);
}
.lyteCSContainer {
display: flex;
background: var(--zcat-code-bg-reader);
border: 1px solid var(--zcat-code-border-default);
border-radius: 10px;
font: var(--zcat-font-12-20) var(--zcat-font-family-code);
overflow: auto;
box-sizing: border-box;
}
.lyteCSLineNumberContainer {
padding: 10px 15px;
}
.lyteCSLineNumber {
display: block;
color: var(--zcat-body-text-secondary);
text-align: right;
}
.lyteCSCodeContainer {
padding: 10px 30px 10px 0;
white-space: pre-wrap;
flex-grow: 1;
}
.lyteTagNameCls {
color: var(--zcat-shades-theme-1);
}
.lytePunctuationCls {
color: var(--zcat-shades-theme-1);
}
.lyteContentCls {
color: var(--zcat-body-text-primary);
}
.lyteAttributeEqualsCls {
color: var(--zcat-shades-pink-1);
}
.lyteAttributeNameCls {
color: var(--zcat-shades-pink-1);
}
.lyteAttributeValueCls {
color: var(--zcat-shades-green-1);
}
.lyteEntityCls {
color: var(--zcat-shades-red-1);
}
.lyteCSSComment,
.lyteCommentCls {
color: var(--zcat-shades-blue-1);
}
.lyteCSSSelector {
word-spacing: 5px;
color: var(--zcat-shades-green-1);
}
.lyteCSSRuleName {
color: var(--zcat-body-text-primary);
}
.lyteCSSPunctuation {
color: var(--zcat-body-text-primary);
}
.lyteCSSRuleName + .lyteCSSPunctuation {
margin-right: 3px;
}
.lyteCSSValueFunction,
.lyteCSSRuleValue {
color: var(--zcat-shades-orange-1);
}
.lyteCSSCombinator {
color: var(--zcat-shades-pink-1);
}
.lyteCSSAttributeName {
color: var(--zcat-shades-pink-1);
}
.lyteCSSImportant,
.lyteCSSAttributeValue {
color: var(--zcat-shades-theme-1);
}
.lyteCSSColorValue {
color: var(--zcat-shades-orange-1);
}
.lyteJSKeyword {
color: var(--zcat-shades-pink-1);
}
.lyteJSIndentifier {
color: var(--zcat-body-text-primary);
}
.lyteJSOperator {
color: var(--zcat-shades-pink-1);
}
.lyteJSPunctuator {
color: var(--zcat-body-text-primary);
}
.lyteJSNumber {
color: var(--zcat-shades-orange-1);
}
.lyteJSStringLiteral {
color: var(--zcat-shades-orange-1);
}
.lyteJSComment {
color: var(--zcat-body-text-disabled);
}
.lyteJSRegex {
color: var(--zcat-shades-green-1);
}
.lyteJSBoolean {
color: var(--zcat-shades-blue-1);
}
.lyteJSFunction {
color: var(--zcat-shades-green-1);
}
.lyteJSNull,
.lyteJSUndefined {
color: var(--zcat-shades-blue-1);
}
.lyteCodeSnippetTransparentBg .lyteCSContainer {
background: transparent;
}
.lyteCodeSnippetNumberSectionBg .lyteCSLineNumberContainer {
background: var(--zcat-code-bg-reader);
}
.lyteCSCopyIcon {
display: flex;
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
right: 8px;
top: 8px;
justify-content: center;
align-items: center;
cursor: pointer;
}
.lyteCSCopyIcon:hover {
background: var(--zcat-code-bg-reader);
}
.lyteCSCopyIcon::after {
content: '';
/* background-image: url(../../images/sprite_lyte.svg);
background-position: -263px -61px; */
background: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1319_43593)'%3E%3Cpath d='M10.6666 5.33337V3.46671C10.6666 2.71997 10.6666 2.3466 10.5213 2.06139C10.3934 1.8105 10.1895 1.60653 9.93857 1.4787C9.65336 1.33337 9.27999 1.33337 8.53325 1.33337H3.46659C2.71985 1.33337 2.34648 1.33337 2.06126 1.4787C1.81038 1.60653 1.60641 1.8105 1.47858 2.06139C1.33325 2.3466 1.33325 2.71997 1.33325 3.46671V8.53337C1.33325 9.28011 1.33325 9.65348 1.47858 9.93869C1.60641 10.1896 1.81038 10.3936 2.06126 10.5214C2.34648 10.6667 2.71985 10.6667 3.46659 10.6667H5.33325M7.46659 14.6667H12.5333C13.28 14.6667 13.6534 14.6667 13.9386 14.5214C14.1895 14.3936 14.3934 14.1896 14.5213 13.9387C14.6666 13.6535 14.6666 13.2801 14.6666 12.5334V7.46671C14.6666 6.71997 14.6666 6.3466 14.5213 6.06139C14.3934 5.8105 14.1895 5.60653 13.9386 5.4787C13.6534 5.33337 13.28 5.33337 12.5333 5.33337H7.46659C6.71985 5.33337 6.34648 5.33337 6.06126 5.4787C5.81038 5.60653 5.60641 5.8105 5.47858 6.06139C5.33325 6.3466 5.33325 6.71997 5.33325 7.46671V12.5334C5.33325 13.2801 5.33325 13.6535 5.47858 13.9387C5.60641 14.1896 5.81038 14.3936 6.06126 14.5214C6.34648 14.6667 6.71985 14.6667 7.46659 14.6667Z' stroke='%23101F3E' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1319_43593'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
width: 16px;
height: 16px;
display: block;
}
html[data-user-color-scheme="dark"] .lyteCSCopyIcon::after{
background: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1319_43593)'%3E%3Cpath d='M10.6666 5.33337V3.46671C10.6666 2.71997 10.6666 2.3466 10.5213 2.06139C10.3934 1.8105 10.1895 1.60653 9.93857 1.4787C9.65336 1.33337 9.27999 1.33337 8.53325 1.33337H3.46659C2.71985 1.33337 2.34648 1.33337 2.06126 1.4787C1.81038 1.60653 1.60641 1.8105 1.47858 2.06139C1.33325 2.3466 1.33325 2.71997 1.33325 3.46671V8.53337C1.33325 9.28011 1.33325 9.65348 1.47858 9.93869C1.60641 10.1896 1.81038 10.3936 2.06126 10.5214C2.34648 10.6667 2.71985 10.6667 3.46659 10.6667H5.33325M7.46659 14.6667H12.5333C13.28 14.6667 13.6534 14.6667 13.9386 14.5214C14.1895 14.3936 14.3934 14.1896 14.5213 13.9387C14.6666 13.6535 14.6666 13.2801 14.6666 12.5334V7.46671C14.6666 6.71997 14.6666 6.3466 14.5213 6.06139C14.3934 5.8105 14.1895 5.60653 13.9386 5.4787C13.6534 5.33337 13.28 5.33337 12.5333 5.33337H7.46659C6.71985 5.33337 6.34648 5.33337 6.06126 5.4787C5.81038 5.60653 5.60641 5.8105 5.47858 6.06139C5.33325 6.3466 5.33325 6.71997 5.33325 7.46671V12.5334C5.33325 13.2801 5.33325 13.6535 5.47858 13.9387C5.60641 14.1896 5.81038 14.3936 6.06126 14.5214C6.34648 14.6667 6.71985 14.6667 7.46659 14.6667Z' stroke='%23EEEEEE' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1319_43593'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
code[class*=language-],pre[class*=language-] {
background: var(--zcat-code-bg-reader) !important;
color: var(--zcat-body-text-primary) !important;
}
.monaco-editor .line-numbers{
color: var(--zcat-code-text-number);
}
.monaco-editor .line-numbers.active-line-number{
color: var(--zcat-code-text-number-active);
}
.lyteMessageBox{
display: none;
}
/* Globally used CSS primitives */
:root {
/* Primary */
--zcat-primary-1: #2A65F0;
--zcat-primary-2: #0755F2;
--zcat-primary-3: #7DA2FB;
--zcat-primary-4: #E7EEFE;
--zcat-primary-5: rgba(42,101, 240, 0.20);
/* ILLUSTRATION */
--zcat-primary-6: #E8F0FE;
--zcat-primary-7: #F3F7FF;
--zcat-primary-10: #458BFF;
--zcat-primary-20: #5A97FB;
--zcat-primary-30: #355A8D;
--zcat-primary-40: #1A273D;
--zcat-primary-50: rgba(32, 116, 255, 0.20);
/* Grey */
--zcat-grey-1: #D6DDEF;
--zcat-grey-2: #EBEEF6;
--zcat-grey-3: #EFF2FA;
--zcat-grey-4: #F7F8FB;
--zcat-grey-5: #F4F7FE;
--zcat-grey-6: #F7FAFF;
--zcat-grey-7: #DDE4F6;
--zcat-grey-8: #FBFBFB;
--zcat-grey-9: rgba(239, 242, 250, 0.24);
--zcat-grey-10: #484D58;
--zcat-grey-20: #2F3136;
--zcat-grey-30: #292A2F;
--zcat-grey-40: #242424;
--zcat-grey-50: #242527;
--zcat-grey-60: #1F2022;
--zcat-grey-70: #33373F;
--zcat-grey-80: #121215;
--zcat-grey-90: #111213;
--zcat-grey-901: #1E1F21;
--zcat-grey-902: #151516;
/* ILLUSTRATION */
--zcat-grey-100: #2A303F;
--zcat-grey-101: #212733;
--zcat-grey-102: #828DA4;
--zcat-grey-103: #252932;
--zcat-grey-104: rgba(41, 42, 47, 0.24);
/* Green */
--zcat-green-1: #29B260;
--zcat-green-2: #218E4D;
--zcat-green-3: #7FD1A0;
--zcat-green-4: #EAF7EF;
--zcat-green-10: #3E9F64;
--zcat-green-20: #3AA564;
--zcat-green-30: #2F4326;
--zcat-green-40: #1C2622;
/* Red */
--zcat-red-1: #E22020;
--zcat-red-2: #B51A1A;
--zcat-red-3: #EE7979;
--zcat-red-4: #FCE9E9;
--zcat-red-10: #DE5E60;
--zcat-red-20: #E86E6B;
--zcat-red-30: #682B2D;
--zcat-red-40: #2A1E20;
/* Dark */
--zcat-dark-1: #101F3E;
--zcat-dark-2: #4D618A;
--zcat-dark-3: #7988A8;
--zcat-dark-4: #A6B1C9;
--zcat-dark-5: rgba(16, 31, 62, 0.70);
--zcat-dark-10: #EEEEEE;
--zcat-dark-20: #AAAAAA;
--zcat-dark-30: #888888;
--zcat-dark-40: #666666;
--zcat-dark-50: #1A1B1D;
--zcat-dark-60: rgba(0, 0, 0, 0.70);
/* Orange */
--zcat-orange-1: #C98E06;
--zcat-orange-2: #A5760C;
--zcat-orange-3: #DAB45F;
--zcat-orange-4: #FFF4DC;
--zcat-orange-10: #AE821C;
--zcat-orange-20: #A1874B;
--zcat-orange-30: #493F07;
--zcat-orange-40: #2B261B;
/* White */
--zcat-white: #FFFFFF;
--zcat-white-20: rgba(255, 255, 255, 0.20);
/* Gradient */
--zcat-gradient-1: #0F2A64;
--zcat-gradient-2: #0A245D;
--zcat-gradient-3: #FFE1FB;
--zcat-gradient-3-1: #FFD2F9;
--zcat-gradient-3-2: #FFEFFD;
--zcat-gradient-4: #C4E7FD;
--zcat-gradient-4-1: #B5DDF6;
--zcat-gradient-4-2: #DCF2FF;
--zcat-gradient-30: #46224A;
--zcat-gradient-30-1: #520D49;
--zcat-gradient-30-2: #493546;
--zcat-gradient-40: #08293E;
--zcat-gradient-40-1: #2B4B5E;
--zcat-gradient-40-2: #29333A;
/* Branding */
--zcat-branding-blue: #226DB4;
--zcat-branding-red: #E42527;
/* Black */
--zcat-black: #1A1B1D;
/* Pink */
--zcat-pink-1: #E417B1;
--zcat-pink-2: #C51D9B;
--zcat-pink-3: #F8B4E7;
--zcat-pink-4: #FFE5F8;
--zcat-pink-10: #DA57B9;
--zcat-pink-20: #CD75B8;
--zcat-pink-30: #542F4B;
--zcat-pink-40: #381B31;
/* Blue */
--zcat-blue-1: #2092EF;
--zcat-blue-2: #257EC7;
--zcat-blue-3: #A6CBEA;
--zcat-blue-4: #DCECF9;
--zcat-blue-10: #4A8EFF;
--zcat-blue-20: #2E88D1;
--zcat-blue-30: #2B4254;
--zcat-blue-40: #1B2B38;
}
/* Position */
.zcat-pF {
position: fixed;
}
.zcat-pR {
position: relative;
}
.zcat-pA {
position: absolute;
}
.zcat-pS {
position: -webkit-sticky;
position: sticky;
}
/* Visibility */
.zcat-vH {
visibility: hidden;
}
/* Position Properties*/
/* Top */
.zcat-top-0 {
top: 0px;
}
.zcat-top-2 {
top: 2px;
}
.zcat-top-4 {
top: 4px;
}
.zcat-top-6 {
top: 6px;
}
.zcat-top-8 {
top: 8px;
}
.zcat-top-10 {
top: 10px;
}
.zcat-top-12 {
top: 12px;
}
.zcat-top-14 {
top: 14px;
}
.zcat-top-16 {
top: 16px;
}
.zcat-top-18 {
top: 18px;
}
.zcat-top-20 {
top: 20px;
}
.zcat-top-22 {
top: 22px;
}
.zcat-top-24 {
top: 24px;
}
.zcat-top-26 {
top: 26px;
}
.zcat-top-28 {
top: 28px;
}
.zcat-top-30 {
top: 30px;
}
.zcat-top-32 {
top: 32px;
}
.zcat-top-34 {
top: 34px;
}
.zcat-top-36 {
top: 36px;
}
.zcat-top-38 {
top: 38px;
}
.zcat-top-40 {
top: 40px;
}
.zcat-top-42 {
top: 42px;
}
.zcat-top-44 {
top: 44px;
}
.zcat-top-46 {
top: 46px;
}
.zcat-top-48 {
top: 48px;
}
.zcat-top-50 {
top: 50px;
}
.zcat-top-52 {
top: 52px;
}
.zcat-top-54 {
top: 54px;
}
.zcat-top-56 {
top: 56px;
}
.zcat-top-58 {
top: 58px;
}
.zcat-top-60 {
top: 60px;
}
.zcat-top-62 {
top: 62px;
}
.zcat-top-64 {
top: 64px;
}
.zcat-top-66 {
top: 66px;
}
.zcat-top-68 {
top: 68px;
}
.zcat-top-70 {
top: 70px;
}
.zcat-top-72 {
top: 72px;
}
.zcat-top-74 {
top: 74px;
}
.zcat-top-76 {
top: 76px;
}
.zcat-top-78 {
top: 78px;
}
.zcat-top-80 {
top: 80px;
}
.zcat-top-82 {
top: 82px;
}
.zcat-top-84 {
top: 84px;
}
.zcat-top-86 {
top: 86px;
}
.zcat-top-88 {
top: 88px;
}
.zcat-top-90 {
top: 90px;
}
.zcat-top-92 {
top: 92px;
}
.zcat-top-94 {
top: 94px;
}
.zcat-top-96 {
top: 96px;
}
.zcat-top-98 {
top: 98px;
}
.zcat-top-100 {
top: 100px;
}
/* Right */
.zcat-right-0 {
right: 0px;
}
.zcat-right-2 {
right: 2px;
}
.zcat-right-4 {
right: 4px;
}
.zcat-right-6 {
right: 6px;
}
.zcat-right-8 {
right: 8px;
}
.zcat-right-10 {
right: 10px;
}
.zcat-right-12 {
right: 12px;
}
.zcat-right-14 {
right: 14px;
}
.zcat-right-16 {
right: 16px;
}
.zcat-right-18 {
right: 18px;
}
.zcat-right-20 {
right: 20px;
}
.zcat-right-22 {
right: 22px;
}
.zcat-right-24 {
right: 24px;
}
.zcat-right-26 {
right: 26px;
}
.zcat-right-28 {
right: 28px;
}
.zcat-right-30 {
right: 30px;
}
.zcat-right-32 {
right: 32px;
}
.zcat-right-34 {
right: 34px;
}
.zcat-right-36 {
right: 36px;
}
.zcat-right-38 {
right: 38px;
}
.zcat-right-40 {
right: 40px;
}
.zcat-right-42 {
right: 42px;
}
.zcat-right-44 {
right: 44px;
}
.zcat-right-46 {
right: 46px;
}
.zcat-right-48 {
right: 48px;
}
.zcat-right-50 {
right: 50px;
}
.zcat-right-52 {
right: 52px;
}
.zcat-right-54 {
right: 54px;
}
.zcat-right-56 {
right: 56px;
}
.zcat-right-58 {
right: 58px;
}
.zcat-right-60 {
right: 60px;
}
.zcat-right-62 {
right: 62px;
}
.zcat-right-64 {
right: 64px;
}
.zcat-right-66 {
right: 66px;
}
.zcat-right-68 {
right: 68px;
}
.zcat-right-70 {
right: 70px;
}
.zcat-right-72 {
right: 72px;
}
.zcat-right-74 {
right: 74px;
}
.zcat-right-76 {
right: 76px;
}
.zcat-right-78 {
right: 78px;
}
.zcat-right-80 {
right: 80px;
}
.zcat-right-82 {
right: 82px;
}
.zcat-right-84 {
right: 84px;
}
.zcat-right-86 {
right: 86px;
}
.zcat-right-88 {
right: 88px;
}
.zcat-right-90 {
right: 90px;
}
.zcat-right-92 {
right: 92px;
}
.zcat-right-94 {
right: 94px;
}
.zcat-right-96 {
right: 96px;
}
.zcat-right-98 {
right: 98px;
}
.zcat-right-100 {
right: 100px;
}
/* Bottom */
.zcat-bottom-0 {
bottom: 0px;
}
.zcat-bottom-2 {
bottom: 2px;
}
.zcat-bottom-4 {
bottom: 4px;
}
.zcat-bottom-6 {
bottom: 6px;
}
.zcat-bottom-8 {
bottom: 8px;
}
.zcat-bottom-10 {
bottom: 10px;
}
.zcat-bottom-12 {
bottom: 12px;
}
.zcat-bottom-14 {
bottom: 14px;
}
.zcat-bottom-16 {
bottom: 16px;
}
.zcat-bottom-18 {
bottom: 18px;
}
.zcat-bottom-20 {
bottom: 20px;
}
.zcat-bottom-22 {
bottom: 22px;
}
.zcat-bottom-24 {
bottom: 24px;
}
.zcat-bottom-26 {
bottom: 26px;
}
.zcat-bottom-28 {
bottom: 28px;
}
.zcat-bottom-30 {
bottom: 30px;
}
.zcat-bottom-32 {
bottom: 32px;
}
.zcat-bottom-34 {
bottom: 34px;
}
.zcat-bottom-36 {
bottom: 36px;
}
.zcat-bottom-38 {
bottom: 38px;
}
.zcat-bottom-40 {
bottom: 40px;
}
.zcat-bottom-42 {
bottom: 42px;
}
.zcat-bottom-44 {
bottom: 44px;
}
.zcat-bottom-46 {
bottom: 46px;
}
.zcat-bottom-48 {
bottom: 48px;
}
.zcat-bottom-50 {
bottom: 50px;
}
.zcat-bottom-52 {
bottom: 52px;
}
.zcat-bottom-54 {
bottom: 54px;
}
.zcat-bottom-56 {
bottom: 56px;
}
.zcat-bottom-58 {
bottom: 58px;
}
.zcat-bottom-60 {
bottom: 60px;
}
.zcat-bottom-62 {
bottom: 62px;
}
.zcat-bottom-64 {
bottom: 64px;
}
.zcat-bottom-66 {
bottom: 66px;
}
.zcat-bottom-68 {
bottom: 68px;
}
.zcat-bottom-70 {
bottom: 70px;
}
.zcat-bottom-72 {
bottom: 72px;
}
.zcat-bottom-74 {
bottom: 74px;
}
.zcat-bottom-76 {
bottom: 76px;
}
.zcat-bottom-78 {
bottom: 78px;
}
.zcat-bottom-80 {
bottom: 80px;
}
.zcat-bottom-82 {
bottom: 82px;
}
.zcat-bottom-84 {
bottom: 84px;
}
.zcat-bottom-86 {
bottom: 86px;
}
.zcat-bottom-88 {
bottom: 88px;
}
.zcat-bottom-90 {
bottom: 90px;
}
.zcat-bottom-92 {
bottom: 92px;
}
.zcat-bottom-94 {
bottom: 94px;
}
.zcat-bottom-96 {
bottom: 96px;
}
.zcat-bottom-98 {
bottom: 98px;
}
.zcat-bottom-100 {
bottom: 100px;
}
/* Left */
.zcat-left-0 {
left: 0px;
}
.zcat-left-2 {
left: 2px;
}
.zcat-left-4 {
left: 4px;
}
.zcat-left-6 {
left: 6px;
}
.zcat-left-8 {
left: 8px;
}
.zcat-left-10 {
left: 10px;
}
.zcat-left-12 {
left: 12px;
}
.zcat-left-14 {
left: 14px;
}
.zcat-left-16 {
left: 16px;
}
.zcat-left-18 {
left: 18px;
}
.zcat-left-20 {
left: 20px;
}
.zcat-left-22 {
left: 22px;
}
.zcat-left-24 {
left: 24px;
}
.zcat-left-26 {
left: 26px;
}
.zcat-left-28 {
left: 28px;
}
.zcat-left-30 {
left: 30px;
}
.zcat-left-32 {
left: 32px;
}
.zcat-left-34 {
left: 34px;
}
.zcat-left-36 {
left: 36px;
}
.zcat-left-38 {
left: 38px;
}
.zcat-left-40 {
left: 40px;
}
.zcat-left-42 {
left: 42px;
}
.zcat-left-44 {
left: 44px;
}
.zcat-left-46 {
left: 46px;
}
.zcat-left-48 {
left: 48px;
}
.zcat-left-50 {
left: 50px;
}
.zcat-left-52 {
left: 52px;
}
.zcat-left-54 {
left: 54px;
}
.zcat-left-56 {
left: 56px;
}
.zcat-left-58 {
left: 58px;
}
.zcat-left-60 {
left: 60px;
}
.zcat-left-62 {
left: 62px;
}
.zcat-left-64 {
left: 64px;
}
.zcat-left-66 {
left: 66px;
}
.zcat-left-68 {
left: 68px;
}
.zcat-left-70 {
left: 70px;
}
.zcat-left-72 {
left: 72px;
}
.zcat-left-74 {
left: 74px;
}
.zcat-left-76 {
left: 76px;
}
.zcat-left-78 {
left: 78px;
}
.zcat-left-80 {
left: 80px;
}
.zcat-left-82 {
left: 82px;
}
.zcat-left-84 {
left: 84px;
}
.zcat-left-86 {
left: 86px;
}
.zcat-left-88 {
left: 88px;
}
.zcat-left-90 {
left: 90px;
}
.zcat-left-92 {
left: 92px;
}
.zcat-left-94 {
left: 94px;
}
.zcat-left-96 {
left: 96px;
}
.zcat-left-98 {
left: 98px;
}
.zcat-left-100 {
left: 100px;
}
/* z - index */
.zcat-zindex-1 {
z-index: 1;
}
.zcat-zindex-2 {
z-index: 2;
}
.zcat-zindex-3 {
z-index: 3;
}
.zcat-zindex-4 {
z-index: 4;
}
.zcat-zindex-5 {
z-index: 5;
}
.zcat-zindex-6 {
z-index: 6;
}
.zcat-zindex-7 {
z-index: 7;
}
.zcat-zindex-8 {
z-index: 8;
}
.zcat-zindex-9 {
z-index: 9;
}
.zcat-zindex-10 {
z-index: 10;
}
/* Display */
.zcat-dF {
display: flex;
}
.zcat-dB {
display: block;
}
.zcat-dIB {
display: inline-block;
}
.zcat-dIF{
display: inline-flex;
}
.zcat-dN {
display: none;
}
.zcat-dNimp {
display: none !important;
}
/* flex properties */
.zcat-flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.zcat-align-left {
align-items: left;
}
.zcat-align-center {
align-items: center;
}
.zcat-align-right {
align-items: right;
}
.zcat-justify-between {
justify-content: space-between;
}
.zcat-justify-left {
justify-content: left;
}
.zcat-justify-right {
justify-content: right;
}
.zcat-justify-center {
justify-content: center;
}
.zcat-direction-column {
flex-direction: column;
}
.zcat-flex-wrap {
flex-wrap: wrap;
}
.zcat-flex-nowrap {
flex-wrap: nowrap;
}
.zcat-gap-0 {
gap: 0px;
}
.zcat-gap-2 {
gap: 2px;
}
.zcat-gap-4 {
gap: 4px;
}
.zcat-gap-6 {
gap: 6px;
}
.zcat-gap-8 {
gap: 8px;
}
.zcat-gap-10 {
gap: 10px;
}
.zcat-gap-12 {
gap: 12px;
}
.zcat-gap-14 {
gap: 14px;
}
.zcat-gap-16 {
gap: 16px;
}
.zcat-gap-18 {
gap: 18px;
}
.zcat-gap-20 {
gap: 20px;
}
.zcat-gap-22 {
gap: 22px;
}
.zcat-gap-24 {
gap: 24px;
}
.zcat-gap-26 {
gap: 26px;
}
.zcat-gap-28 {
gap: 28px;
}
.zcat-gap-30 {
gap: 30px;
}
.zcat-gap-32 {
gap: 32px;
}
.zcat-gap-34 {
gap: 34px;
}
.zcat-gap-36 {
gap: 36px;
}
.zcat-gap-38 {
gap: 38px;
}
.zcat-gap-40 {
gap: 40px;
}
/* width */
.zcat-w-auto {
width: auto;
}
.zcat-w10p {
width: 10%;
}
.zcat-w20p {
width: 20%;
}
.zcat-w30p {
width: 30%;
}
.zcat-w40p {
width: 40%;
}
.zcat-w50p {
width: 50%;
}
.zcat-w60p {
width: 60%;
}
.zcat-w70p {
width: 70%;
}
.zcat-w80p {
width: 80%;
}
.zcat-w90p {
width: 90%;
}
.zcat-w100p {
width: 100%;
}
.zcat-w2 {
width: 2px;
}
.zcat-w4 {
width: 4px;
}
.zcat-w6 {
width: 6px;
}
.zcat-w8 {
width: 8px;
}
.zcat-w10 {
width: 10px;
}
.zcat-w12 {
width: 12px;
}
.zcat-w14 {
width: 14px;
}
.zcat-w16 {
width: 16px;
}
.zcat-w18 {
width: 18px;
}
.zcat-w20 {
width: 20px;
}
.zcat-w22 {
width: 22px;
}
.zcat-w24 {
width: 24px;
}
.zcat-w26 {
width: 26px;
}
.zcat-w28 {
width: 28px;
}
.zcat-w30 {
width: 30px;
}
.zcat-w32 {
width: 32px;
}
.zcat-w34 {
width: 34px;
}
.zcat-w36 {
width: 36px;
}
.zcat-w38 {
width: 38px;
}
.zcat-w40 {
width: 40px;
}
.zcat-w42 {
width: 42px;
}
.zcat-w44 {
width: 44px;
}
.zcat-w46 {
width: 46px;
}
.zcat-w48 {
width: 48px;
}
.zcat-w50 {
width: 50px;
}
.zcat-w52 {
width: 52px;
}
.zcat-w54 {
width: 54px;
}
.zcat-w56 {
width: 56px;
}
.zcat-w58 {
width: 58px;
}
.zcat-w60 {
width: 60px;
}
.zcat-w62 {
width: 62px;
}
.zcat-w64 {
width: 64px;
}
.zcat-w66 {
width: 66px;
}
.zcat-w68 {
width: 68px;
}
.zcat-w70 {
width: 70px;
}
.zcat-w72 {
width: 72px;
}
.zcat-w74 {
width: 74px;
}
.zcat-w76 {
width: 76px;
}
.zcat-w78 {
width: 78px;
}
.zcat-w80 {
width: 80px;
}
.zcat-w82 {
width: 82px;
}
.zcat-w84 {
width: 84px;
}
.zcat-w86 {
width: 86px;
}
.zcat-w88 {
width: 88px;
}
.zcat-w90 {
width: 90px;
}
.zcat-w92 {
width: 92px;
}
.zcat-w94 {
width: 94px;
}
.zcat-w96 {
width: 96px;
}
.zcat-w98 {
width: 98px;
}
.zcat-w100 {
width: 100px;
}
.zcat-w102 {
width: 102px;
}
.zcat-w104 {
width: 104px;
}
.zcat-w106 {
width: 106px;
}
.zcat-w108 {
width: 108px;
}
.zcat-w110 {
width: 110px;
}
.zcat-w112 {
width: 112px;
}
.zcat-w114 {
width: 114px;
}
.zcat-w116 {
width: 116px;
}
.zcat-w118 {
width: 118px;
}
.zcat-w120 {
width: 120px;
}
.zcat-w122 {
width: 122px;
}
.zcat-w124 {
width: 124px;
}
.zcat-w126 {
width: 126px;
}
.zcat-w128 {
width: 128px;
}
.zcat-w130 {
width: 130px;
}
.zcat-w132 {
width: 132px;
}
.zcat-w134 {
width: 134px;
}
.zcat-w136 {
width: 136px;
}
.zcat-w138 {
width: 138px;
}
.zcat-w140 {
width: 140px;
}
.zcat-w142 {
width: 142px;
}
.zcat-w144 {
width: 144px;
}
.zcat-w146 {
width: 146px;
}
.zcat-w148 {
width: 148px;
}
.zcat-w150 {
width: 150px;
}
.zcat-w152 {
width: 152px;
}
.zcat-w154 {
width: 154px;
}
.zcat-w156 {
width: 156px;
}
.zcat-w158 {
width: 158px;
}
.zcat-w160 {
width: 160px;
}
.zcat-w162 {
width: 162px;
}
.zcat-w164 {
width: 164px;
}
.zcat-w166 {
width: 166px;
}
.zcat-w168 {
width: 168px;
}
.zcat-w170 {
width: 170px;
}
.zcat-w172 {
width: 172px;
}
.zcat-w174 {
width: 174px;
}
.zcat-w176 {
width: 176px;
}
.zcat-w178 {
width: 178px;
}
.zcat-w180 {
width: 180px;
}
.zcat-w182 {
width: 182px;
}
.zcat-w184 {
width: 184px;
}
.zcat-w186 {
width: 186px;
}
.zcat-w188 {
width: 188px;
}
.zcat-w190 {
width: 190px;
}
.zcat-w192 {
width: 192px;
}
.zcat-w194 {
width: 194px;
}
.zcat-w196 {
width: 196px;
}
.zcat-w198 {
width: 198px;
}
.zcat-w200 {
width: 200px;
}
.zcat-w202 {
width: 202px;
}
.zcat-w204 {
width: 204px;
}
.zcat-w206 {
width: 206px;
}
.zcat-w208 {
width: 208px;
}
.zcat-w210 {
width: 210px;
}
.zcat-w212 {
width: 212px;
}
.zcat-w214 {
width: 214px;
}
.zcat-w216 {
width: 216px;
}
.zcat-w218 {
width: 218px;
}
.zcat-w220 {
width: 220px;
}
.zcat-w222 {
width: 222px;
}
.zcat-w224 {
width: 224px;
}
.zcat-w226 {
width: 226px;
}
.zcat-w228 {
width: 228px;
}
.zcat-w230 {
width: 230px;
}
.zcat-w232 {
width: 232px;
}
.zcat-w234 {
width: 234px;
}
.zcat-w236 {
width: 236px;
}
.zcat-w238 {
width: 238px;
}
.zcat-w240 {
width: 240px;
}
.zcat-w242 {
width: 242px;
}
.zcat-w244 {
width: 244px;
}
.zcat-w246 {
width: 246px;
}
.zcat-w248 {
width: 248px;
}
.zcat-w250 {
width: 250px;
}
.zcat-w252 {
width: 252px;
}
.zcat-w254 {
width: 254px;
}
.zcat-w256 {
width: 256px;
}
.zcat-w258 {
width: 258px;
}
.zcat-w260 {
width: 260px;
}
.zcat-w262 {
width: 262px;
}
.zcat-w264 {
width: 264px;
}
.zcat-w266 {
width: 266px;
}
.zcat-w268 {
width: 268px;
}
.zcat-w270 {
width: 270px;
}
.zcat-w272 {
width: 272px;
}
.zcat-w274 {
width: 274px;
}
.zcat-w276 {
width: 276px;
}
.zcat-w278 {
width: 278px;
}
.zcat-w280 {
width: 280px;
}
.zcat-w282 {
width: 282px;
}
.zcat-w284 {
width: 284px;
}
.zcat-w286 {
width: 286px;
}
.zcat-w288 {
width: 288px;
}
.zcat-w290 {
width: 290px;
}
.zcat-w292 {
width: 292px;
}
.zcat-w294 {
width: 294px;
}
.zcat-w296 {
width: 296px;
}
.zcat-w298 {
width: 298px;
}
.zcat-w300 {
width: 300px;
}
.zcat-w302 {
width: 302px;
}
.zcat-w304 {
width: 304px;
}
.zcat-w306 {
width: 306px;
}
.zcat-w308 {
width: 308px;
}
.zcat-w310 {
width: 310px;
}
.zcat-w312 {
width: 312px;
}
.zcat-w314 {
width: 314px;
}
.zcat-w316 {
width: 316px;
}
.zcat-w318 {
width: 318px;
}
.zcat-w320 {
width: 320px;
}
.zcat-w322 {
width: 322px;
}
.zcat-w324 {
width: 324px;
}
.zcat-w326 {
width: 326px;
}
.zcat-w328 {
width: 328px;
}
.zcat-w330 {
width: 330px;
}
.zcat-w332 {
width: 332px;
}
.zcat-w334 {
width: 334px;
}
.zcat-w336 {
width: 336px;
}
.zcat-w338 {
width: 338px;
}
.zcat-w340 {
width: 340px;
}
.zcat-w342 {
width: 342px;
}
.zcat-w344 {
width: 344px;
}
.zcat-w346 {
width: 346px;
}
.zcat-w348 {
width: 348px;
}
.zcat-w350 {
width: 350px;
}
.zcat-w352 {
width: 352px;
}
.zcat-w354 {
width: 354px;
}
.zcat-w356 {
width: 356px;
}
.zcat-w358 {
width: 358px;
}
.zcat-w360 {
width: 360px;
}
.zcat-w362 {
width: 362px;
}
.zcat-w364 {
width: 364px;
}
.zcat-w366 {
width: 366px;
}
.zcat-w368 {
width: 368px;
}
.zcat-w370 {
width: 370px;
}
.zcat-w372 {
width: 372px;
}
.zcat-w374 {
width: 374px;
}
.zcat-w376 {
width: 376px;
}
.zcat-w378 {
width: 378px;
}
.zcat-w380 {
width: 380px;
}
.zcat-w382 {
width: 382px;
}
.zcat-w384 {
width: 384px;
}
.zcat-w386 {
width: 386px;
}
.zcat-w388 {
width: 388px;
}
.zcat-w390 {
width: 390px;
}
.zcat-w392 {
width: 392px;
}
.zcat-w394 {
width: 394px;
}
.zcat-w396 {
width: 396px;
}
.zcat-w398 {
width: 398px;
}
.zcat-w400 {
width: 400px;
}
.zcat-w402 {
width: 402px;
}
.zcat-w404 {
width: 404px;
}
.zcat-w406 {
width: 406px;
}
.zcat-w408 {
width: 408px;
}
.zcat-w410 {
width: 410px;
}
.zcat-w412 {
width: 412px;
}
.zcat-w414 {
width: 414px;
}
.zcat-w416 {
width: 416px;
}
.zcat-w418 {
width: 418px;
}
.zcat-w420 {
width: 420px;
}
.zcat-w422 {
width: 422px;
}
.zcat-w424 {
width: 424px;
}
.zcat-w426 {
width: 426px;
}
.zcat-w428 {
width: 428px;
}
.zcat-w430 {
width: 430px;
}
.zcat-w432 {
width: 432px;
}
.zcat-w434 {
width: 434px;
}
.zcat-w436 {
width: 436px;
}
.zcat-w438 {
width: 438px;
}
.zcat-w440 {
width: 440px;
}
.zcat-w442 {
width: 442px;
}
.zcat-w444 {
width: 444px;
}
.zcat-w446 {
width: 446px;
}
.zcat-w448 {
width: 448px;
}
.zcat-w450 {
width: 450px;
}
.zcat-w452 {
width: 452px;
}
.zcat-w454 {
width: 454px;
}
.zcat-w456 {
width: 456px;
}
.zcat-w458 {
width: 458px;
}
.zcat-w460 {
width: 460px;
}
.zcat-w462 {
width: 462px;
}
.zcat-w464 {
width: 464px;
}
.zcat-w466 {
width: 466px;
}
.zcat-w468 {
width: 468px;
}
.zcat-w470 {
width: 470px;
}
.zcat-w472 {
width: 472px;
}
.zcat-w474 {
width: 474px;
}
.zcat-w476 {
width: 476px;
}
.zcat-w478 {
width: 478px;
}
.zcat-w480 {
width: 480px;
}
.zcat-w482 {
width: 482px;
}
.zcat-w484 {
width: 484px;
}
.zcat-w486 {
width: 486px;
}
.zcat-w488 {
width: 488px;
}
.zcat-w490 {
width: 490px;
}
.zcat-w492 {
width: 492px;
}
.zcat-w494 {
width: 494px;
}
.zcat-w496 {
width: 496px;
}
.zcat-w498 {
width: 498px;
}
.zcat-w500 {
width: 500px;
}
.zcat-w-fc {
width: -moz-fit-content;
width: fit-content;
}
/* height */
.zcat-h10p {
height: 10%;
}
.zcat-h20p {
height: 20%;
}
.zcat-h30p {
height: 30%;
}
.zcat-h40p {
height: 40%;
}
.zcat-h50p {
height: 50%;
}
.zcat-h60p {
height: 60%;
}
.zcat-h70p {
height: 70%;
}
.zcat-h80p {
height: 80%;
}
.zcat-h90p {
height: 90%;
}
.zcat-h100p {
height: 100%;
}
.zcat-h2 {
height: 2px;
}
.zcat-h4 {
height: 4px;
}
.zcat-h6 {
height: 6px;
}
.zcat-h8 {
height: 8px;
}
.zcat-h10 {
height: 10px;
}
.zcat-h12 {
height: 12px;
}
.zcat-h14 {
height: 14px;
}
.zcat-h16 {
height: 16px;
}
.zcat-h18 {
height: 18px;
}
.zcat-h20 {
height: 20px;
}
.zcat-h22 {
height: 22px;
}
.zcat-h24 {
height: 24px;
}
.zcat-h26 {
height: 26px;
}
.zcat-h28 {
height: 28px;
}
.zcat-h30 {
height: 30px;
}
.zcat-h32 {
height: 32px;
}
.zcat-h34 {
height: 34px;
}
.zcat-h36 {
height: 36px;
}
.zcat-h38 {
height: 38px;
}
.zcat-h40 {
height: 40px;
}
.zcat-h42 {
height: 42px;
}
.zcat-h44 {
height: 44px;
}
.zcat-h46 {
height: 46px;
}
.zcat-h48 {
height: 48px;
}
.zcat-h50 {
height: 50px;
}
.zcat-h52 {
height: 52px;
}
.zcat-h54 {
height: 54px;
}
.zcat-h56 {
height: 56px;
}
.zcat-h58 {
height: 58px;
}
.zcat-h60 {
height: 60px;
}
.zcat-h62 {
height: 62px;
}
.zcat-h64 {
height: 64px;
}
.zcat-h66 {
height: 66px;
}
.zcat-h68 {
height: 68px;
}
.zcat-h70 {
height: 70px;
}
.zcat-h72 {
height: 72px;
}
.zcat-h74 {
height: 74px;
}
.zcat-h76 {
height: 76px;
}
.zcat-h78 {
height: 78px;
}
.zcat-h80 {
height: 80px;
}
.zcat-h82 {
height: 82px;
}
.zcat-h84 {
height: 84px;
}
.zcat-h86 {
height: 86px;
}
.zcat-h88 {
height: 88px;
}
.zcat-h90 {
height: 90px;
}
.zcat-h92 {
height: 92px;
}
.zcat-h94 {
height: 94px;
}
.zcat-h96 {
height: 96px;
}
.zcat-h98 {
height: 98px;
}
.zcat-h100 {
height: 100px;
}
.zcat-h102 {
height: 102px;
}
.zcat-h104 {
height: 104px;
}
.zcat-h106 {
height: 106px;
}
.zcat-h108 {
height: 108px;
}
.zcat-h110 {
height: 110px;
}
.zcat-h112 {
height: 112px;
}
.zcat-h114 {
height: 114px;
}
.zcat-h116 {
height: 116px;
}
.zcat-h118 {
height: 118px;
}
.zcat-h120 {
height: 120px;
}
.zcat-h122 {
height: 122px;
}
.zcat-h124 {
height: 124px;
}
.zcat-h126 {
height: 126px;
}
.zcat-h128 {
height: 128px;
}
.zcat-h130 {
height: 130px;
}
.zcat-h132 {
height: 132px;
}
.zcat-h134 {
height: 134px;
}
.zcat-h136 {
height: 136px;
}
.zcat-h138 {
height: 138px;
}
.zcat-h140 {
height: 140px;
}
.zcat-h142 {
height: 142px;
}
.zcat-h144 {
height: 144px;
}
.zcat-h146 {
height: 146px;
}
.zcat-h148 {
height: 148px;
}
.zcat-h150 {
height: 150px;
}
.zcat-h152 {
height: 152px;
}
.zcat-h154 {
height: 154px;
}
.zcat-h156 {
height: 156px;
}
.zcat-h158 {
height: 158px;
}
.zcat-h160 {
height: 160px;
}
.zcat-h162 {
height: 162px;
}
.zcat-h164 {
height: 164px;
}
.zcat-h166 {
height: 166px;
}
.zcat-h168 {
height: 168px;
}
.zcat-h170 {
height: 170px;
}
.zcat-h172 {
height: 172px;
}
.zcat-h174 {
height: 174px;
}
.zcat-h176 {
height: 176px;
}
.zcat-h178 {
height: 178px;
}
.zcat-h180 {
height: 180px;
}
.zcat-h182 {
height: 182px;
}
.zcat-h184 {
height: 184px;
}
.zcat-h186 {
height: 186px;
}
.zcat-h188 {
height: 188px;
}
.zcat-h190 {
height: 190px;
}
.zcat-h192 {
height: 192px;
}
.zcat-h194 {
height: 194px;
}
.zcat-h196 {
height: 196px;
}
.zcat-h198 {
height: 198px;
}
.zcat-h200 {
height: 200px;
}
.zcat-h202 {
height: 202px;
}
.zcat-h204 {
height: 204px;
}
.zcat-h206 {
height: 206px;
}
.zcat-h208 {
height: 208px;
}
.zcat-h210 {
height: 210px;
}
.zcat-h212 {
height: 212px;
}
.zcat-h214 {
height: 214px;
}
.zcat-h216 {
height: 216px;
}
.zcat-h218 {
height: 218px;
}
.zcat-h220 {
height: 220px;
}
.zcat-h222 {
height: 222px;
}
.zcat-h224 {
height: 224px;
}
.zcat-h226 {
height: 226px;
}
.zcat-h228 {
height: 228px;
}
.zcat-h230 {
height: 230px;
}
.zcat-h232 {
height: 232px;
}
.zcat-h234 {
height: 234px;
}
.zcat-h236 {
height: 236px;
}
.zcat-h238 {
height: 238px;
}
.zcat-h240 {
height: 240px;
}
.zcat-h242 {
height: 242px;
}
.zcat-h244 {
height: 244px;
}
.zcat-h246 {
height: 246px;
}
.zcat-h248 {
height: 248px;
}
.zcat-h250 {
height: 250px;
}
.zcat-h252 {
height: 252px;
}
.zcat-h254 {
height: 254px;
}
.zcat-h256 {
height: 256px;
}
.zcat-h258 {
height: 258px;
}
.zcat-h260 {
height: 260px;
}
.zcat-h262 {
height: 262px;
}
.zcat-h264 {
height: 264px;
}
.zcat-h266 {
height: 266px;
}
.zcat-h268 {
height: 268px;
}
.zcat-h270 {
height: 270px;
}
.zcat-h272 {
height: 272px;
}
.zcat-h274 {
height: 274px;
}
.zcat-h276 {
height: 276px;
}
.zcat-h278 {
height: 278px;
}
.zcat-h280 {
height: 280px;
}
.zcat-h282 {
height: 282px;
}
.zcat-h284 {
height: 284px;
}
.zcat-h286 {
height: 286px;
}
.zcat-h288 {
height: 288px;
}
.zcat-h290 {
height: 290px;
}
.zcat-h292 {
height: 292px;
}
.zcat-h294 {
height: 294px;
}
.zcat-h296 {
height: 296px;
}
.zcat-h298 {
height: 298px;
}
.zcat-h300 {
height: 300px;
}
.zcat-h302 {
height: 302px;
}
.zcat-h304 {
height: 304px;
}
.zcat-h306 {
height: 306px;
}
.zcat-h308 {
height: 308px;
}
.zcat-h310 {
height: 310px;
}
.zcat-h312 {
height: 312px;
}
.zcat-h314 {
height: 314px;
}
.zcat-h316 {
height: 316px;
}
.zcat-h318 {
height: 318px;
}
.zcat-h320 {
height: 320px;
}
.zcat-h322 {
height: 322px;
}
.zcat-h324 {
height: 324px;
}
.zcat-h326 {
height: 326px;
}
.zcat-h328 {
height: 328px;
}
.zcat-h330 {
height: 330px;
}
.zcat-h332 {
height: 332px;
}
.zcat-h334 {
height: 334px;
}
.zcat-h336 {
height: 336px;
}
.zcat-h338 {
height: 338px;
}
.zcat-h340 {
height: 340px;
}
.zcat-h342 {
height: 342px;
}
.zcat-h344 {
height: 344px;
}
.zcat-h346 {
height: 346px;
}
.zcat-h348 {
height: 348px;
}
.zcat-h350 {
height: 350px;
}
.zcat-h352 {
height: 352px;
}
.zcat-h354 {
height: 354px;
}
.zcat-h356 {
height: 356px;
}
.zcat-h358 {
height: 358px;
}
.zcat-h360 {
height: 360px;
}
.zcat-h362 {
height: 362px;
}
.zcat-h364 {
height: 364px;
}
.zcat-h366 {
height: 366px;
}
.zcat-h368 {
height: 368px;
}
.zcat-h370 {
height: 370px;
}
.zcat-h372 {
height: 372px;
}
.zcat-h374 {
height: 374px;
}
.zcat-h376 {
height: 376px;
}
.zcat-h378 {
height: 378px;
}
.zcat-h380 {
height: 380px;
}
.zcat-h382 {
height: 382px;
}
.zcat-h384 {
height: 384px;
}
.zcat-h386 {
height: 386px;
}
.zcat-h388 {
height: 388px;
}
.zcat-h390 {
height: 390px;
}
.zcat-h392 {
height: 392px;
}
.zcat-h394 {
height: 394px;
}
.zcat-h396 {
height: 396px;
}
.zcat-h398 {
height: 398px;
}
.zcat-h400 {
height: 400px;
}
.zcat-h402 {
height: 402px;
}
.zcat-h404 {
height: 404px;
}
.zcat-h406 {
height: 406px;
}
.zcat-h408 {
height: 408px;
}
.zcat-h410 {
height: 410px;
}
.zcat-h412 {
height: 412px;
}
.zcat-h414 {
height: 414px;
}
.zcat-h416 {
height: 416px;
}
.zcat-h418 {
height: 418px;
}
.zcat-h420 {
height: 420px;
}
.zcat-h422 {
height: 422px;
}
.zcat-h424 {
height: 424px;
}
.zcat-h426 {
height: 426px;
}
.zcat-h428 {
height: 428px;
}
.zcat-h430 {
height: 430px;
}
.zcat-h432 {
height: 432px;
}
.zcat-h434 {
height: 434px;
}
.zcat-h436 {
height: 436px;
}
.zcat-h438 {
height: 438px;
}
.zcat-h440 {
height: 440px;
}
.zcat-h442 {
height: 442px;
}
.zcat-h444 {
height: 444px;
}
.zcat-h446 {
height: 446px;
}
.zcat-h448 {
height: 448px;
}
.zcat-h450 {
height: 450px;
}
.zcat-h452 {
height: 452px;
}
.zcat-h454 {
height: 454px;
}
.zcat-h456 {
height: 456px;
}
.zcat-h458 {
height: 458px;
}
.zcat-h460 {
height: 460px;
}
.zcat-h462 {
height: 462px;
}
.zcat-h464 {
height: 464px;
}
.zcat-h466 {
height: 466px;
}
.zcat-h468 {
height: 468px;
}
.zcat-h470 {
height: 470px;
}
.zcat-h472 {
height: 472px;
}
.zcat-h474 {
height: 474px;
}
.zcat-h476 {
height: 476px;
}
.zcat-h478 {
height: 478px;
}
.zcat-h480 {
height: 480px;
}
.zcat-h482 {
height: 482px;
}
.zcat-h484 {
height: 484px;
}
.zcat-h486 {
height: 486px;
}
.zcat-h488 {
height: 488px;
}
.zcat-h490 {
height: 490px;
}
.zcat-h492 {
height: 492px;
}
.zcat-h494 {
height: 494px;
}
.zcat-h496 {
height: 496px;
}
.zcat-h498 {
height: 498px;
}
.zcat-h500 {
height: 500px;
}
.zcat-h-fc {
height: -moz-fit-content;
height: fit-content;
}
/* padding */
.zcat-p-0 {
padding: 0;
}
.zcat-p-2 {
padding: 2px;
}
.zcat-p-4 {
padding: 4px;
}
.zcat-p-6 {
padding: 6px;
}
.zcat-p-8 {
padding: 8px;
}
.zcat-p-10 {
padding: 10px;
}
.zcat-p-12 {
padding: 12px;
}
.zcat-p-14 {
padding: 14px;
}
.zcat-p-16 {
padding: 16px;
}
.zcat-p-18 {
padding: 18px;
}
.zcat-p-20 {
padding: 20px;
}
.zcat-p-22 {
padding: 22px;
}
.zcat-p-24 {
padding: 24px;
}
.zcat-p-26 {
padding: 26px;
}
.zcat-p-28 {
padding: 28px;
}
.zcat-p-30 {
padding: 30px;
}
.zcat-p-32 {
padding: 32px;
}
.zcat-p-34 {
padding: 34px;
}
.zcat-p-36 {
padding: 36px;
}
.zcat-p-38 {
padding: 38px;
}
.zcat-p-40 {
padding: 40px;
}
.zcat-p-42 {
padding: 42px;
}
.zcat-p-44 {
padding: 44px;
}
.zcat-p-46 {
padding: 46px;
}
.zcat-p-48 {
padding: 48px;
}
.zcat-p-50 {
padding: 50px;
}
.zcat-p-52 {
padding: 52px;
}
.zcat-p-54 {
padding: 54px;
}
.zcat-p-56 {
padding: 56px;
}
.zcat-p-58 {
padding: 58px;
}
.zcat-p-60 {
padding: 60px;
}
.zcat-p-62 {
padding: 62px;
}
.zcat-p-64 {
padding: 64px;
}
.zcat-p-66 {
padding: 66px;
}
.zcat-p-68 {
padding: 68px;
}
.zcat-p-70 {
padding: 70px;
}
.zcat-p-72 {
padding: 72px;
}
.zcat-p-74 {
padding: 74px;
}
.zcat-p-76 {
padding: 76px;
}
.zcat-p-78 {
padding: 78px;
}
.zcat-p-80 {
padding: 80px;
}
.zcat-p-82 {
padding: 82px;
}
.zcat-p-84 {
padding: 84px;
}
.zcat-p-86 {
padding: 86px;
}
.zcat-p-88 {
padding: 88px;
}
.zcat-p-90 {
padding: 90px;
}
.zcat-p-92 {
padding: 92px;
}
.zcat-p-94 {
padding: 94px;
}
.zcat-p-96 {
padding: 96px;
}
.zcat-p-98 {
padding: 98px;
}
.zcat-p-100 {
padding: 100px;
}
/* Top */
.zcat-pt-0 {
padding-top: 0;
}
.zcat-pt-2 {
padding-top: 2px;
}
.zcat-pt-4 {
padding-top: 4px;
}
.zcat-pt-6 {
padding-top: 6px;
}
.zcat-pt-8 {
padding-top: 8px;
}
.zcat-pt-10 {
padding-top: 10px;
}
.zcat-pt-12 {
padding-top: 12px;
}
.zcat-pt-14 {
padding-top: 14px;
}
.zcat-pt-16 {
padding-top: 16px;
}
.zcat-pt-18 {
padding-top: 18px;
}
.zcat-pt-20 {
padding-top: 20px;
}
.zcat-pt-22 {
padding-top: 22px;
}
.zcat-pt-24 {
padding-top: 24px;
}
.zcat-pt-26 {
padding-top: 26px;
}
.zcat-pt-28 {
padding-top: 28px;
}
.zcat-pt-30 {
padding-top: 30px;
}
.zcat-pt-32 {
padding-top: 32px;
}
.zcat-pt-34 {
padding-top: 34px;
}
.zcat-pt-36 {
padding-top: 36px;
}
.zcat-pt-38 {
padding-top: 38px;
}
.zcat-pt-40 {
padding-top: 40px;
}
.zcat-pt-42 {
padding-top: 42px;
}
.zcat-pt-44 {
padding-top: 44px;
}
.zcat-pt-46 {
padding-top: 46px;
}
.zcat-pt-48 {
padding-top: 48px;
}
.zcat-pt-50 {
padding-top: 50px;
}
.zcat-pt-52 {
padding-top: 52px;
}
.zcat-pt-54 {
padding-top: 54px;
}
.zcat-pt-56 {
padding-top: 56px;
}
.zcat-pt-58 {
padding-top: 58px;
}
.zcat-pt-60 {
padding-top: 60px;
}
.zcat-pt-62 {
padding-top: 62px;
}
.zcat-pt-64 {
padding-top: 64px;
}
.zcat-pt-66 {
padding-top: 66px;
}
.zcat-pt-68 {
padding-top: 68px;
}
.zcat-pt-70 {
padding-top: 70px;
}
.zcat-pt-72 {
padding-top: 72px;
}
.zcat-pt-74 {
padding-top: 74px;
}
.zcat-pt-76 {
padding-top: 76px;
}
.zcat-pt-78 {
padding-top: 78px;
}
.zcat-pt-80 {
padding-top: 80px;
}
.zcat-pt-82 {
padding-top: 82px;
}
.zcat-pt-84 {
padding-top: 84px;
}
.zcat-pt-86 {
padding-top: 86px;
}
.zcat-pt-88 {
padding-top: 88px;
}
.zcat-pt-90 {
padding-top: 90px;
}
.zcat-pt-92 {
padding-top: 92px;
}
.zcat-pt-94 {
padding-top: 94px;
}
.zcat-pt-96 {
padding-top: 96px;
}
.zcat-pt-98 {
padding-top: 98px;
}
.zcat-pt-100 {
padding-top: 100px;
}
/* Right */
.zcat-pr-0 {
padding-right: 0;
}
.zcat-pr-2 {
padding-right: 2px;
}
.zcat-pr-4 {
padding-right: 4px;
}
.zcat-pr-6 {
padding-right: 6px;
}
.zcat-pr-8 {
padding-right: 8px;
}
.zcat-pr-10 {
padding-right: 10px;
}
.zcat-pr-12 {
padding-right: 12px;
}
.zcat-pr-14 {
padding-right: 14px;
}
.zcat-pr-16 {
padding-right: 16px;
}
.zcat-pr-18 {
padding-right: 18px;
}
.zcat-pr-20 {
padding-right: 20px;
}
.zcat-pr-22 {
padding-right: 22px;
}
.zcat-pr-24 {
padding-right: 24px;
}
.zcat-pr-26 {
padding-right: 26px;
}
.zcat-pr-28 {
padding-right: 28px;
}
.zcat-pr-30 {
padding-right: 30px;
}
.zcat-pr-32 {
padding-right: 32px;
}
.zcat-pr-34 {
padding-right: 34px;
}
.zcat-pr-36 {
padding-right: 36px;
}
.zcat-pr-38 {
padding-right: 38px;
}
.zcat-pr-40 {
padding-right: 40px;
}
.zcat-pr-42 {
padding-right: 42px;
}
.zcat-pr-44 {
padding-right: 44px;
}
.zcat-pr-46 {
padding-right: 46px;
}
.zcat-pr-48 {
padding-right: 48px;
}
.zcat-pr-50 {
padding-right: 50px;
}
.zcat-pr-52 {
padding-right: 52px;
}
.zcat-pr-54 {
padding-right: 54px;
}
.zcat-pr-56 {
padding-right: 56px;
}
.zcat-pr-58 {
padding-right: 58px;
}
.zcat-pr-60 {
padding-right: 60px;
}
.zcat-pr-62 {
padding-right: 62px;
}
.zcat-pr-64 {
padding-right: 64px;
}
.zcat-pr-66 {
padding-right: 66px;
}
.zcat-pr-68 {
padding-right: 68px;
}
.zcat-pr-70 {
padding-right: 70px;
}
.zcat-pr-72 {
padding-right: 72px;
}
.zcat-pr-74 {
padding-right: 74px;
}
.zcat-pr-76 {
padding-right: 76px;
}
.zcat-pr-78 {
padding-right: 78px;
}
.zcat-pr-80 {
padding-right: 80px;
}
.zcat-pr-82 {
padding-right: 82px;
}
.zcat-pr-84 {
padding-right: 84px;
}
.zcat-pr-86 {
padding-right: 86px;
}
.zcat-pr-88 {
padding-right: 88px;
}
.zcat-pr-90 {
padding-right: 90px;
}
.zcat-pr-92 {
padding-right: 92px;
}
.zcat-pr-94 {
padding-right: 94px;
}
.zcat-pr-96 {
padding-right: 96px;
}
.zcat-pr-98 {
padding-right: 98px;
}
.zcat-pr-100 {
padding-right: 100px;
}
/* Bottom */
.zcat-pb-0 {
padding-bottom: 0;
}
.zcat-pb-2 {
padding-bottom: 2px;
}
.zcat-pb-4 {
padding-bottom: 4px;
}
.zcat-pb-6 {
padding-bottom: 6px;
}
.zcat-pb-8 {
padding-bottom: 8px;
}
.zcat-pb-10 {
padding-bottom: 10px;
}
.zcat-pb-12 {
padding-bottom: 12px;
}
.zcat-pb-14 {
padding-bottom: 14px;
}
.zcat-pb-16 {
padding-bottom: 16px;
}
.zcat-pb-18 {
padding-bottom: 18px;
}
.zcat-pb-20 {
padding-bottom: 20px;
}
.zcat-pb-22 {
padding-bottom: 22px;
}
.zcat-pb-24 {
padding-bottom: 24px;
}
.zcat-pb-26 {
padding-bottom: 26px;
}
.zcat-pb-28 {
padding-bottom: 28px;
}
.zcat-pb-30 {
padding-bottom: 30px;
}
.zcat-pb-32 {
padding-bottom: 32px;
}
.zcat-pb-34 {
padding-bottom: 34px;
}
.zcat-pb-36 {
padding-bottom: 36px;
}
.zcat-pb-38 {
padding-bottom: 38px;
}
.zcat-pb-40 {
padding-bottom: 40px;
}
.zcat-pb-42 {
padding-bottom: 42px;
}
.zcat-pb-44 {
padding-bottom: 44px;
}
.zcat-pb-46 {
padding-bottom: 46px;
}
.zcat-pb-48 {
padding-bottom: 48px;
}
.zcat-pb-50 {
padding-bottom: 50px;
}
.zcat-pb-52 {
padding-bottom: 52px;
}
.zcat-pb-54 {
padding-bottom: 54px;
}
.zcat-pb-56 {
padding-bottom: 56px;
}
.zcat-pb-58 {
padding-bottom: 58px;
}
.zcat-pb-60 {
padding-bottom: 60px;
}
.zcat-pb-62 {
padding-bottom: 62px;
}
.zcat-pb-64 {
padding-bottom: 64px;
}
.zcat-pb-66 {
padding-bottom: 66px;
}
.zcat-pb-68 {
padding-bottom: 68px;
}
.zcat-pb-70 {
padding-bottom: 70px;
}
.zcat-pb-72 {
padding-bottom: 72px;
}
.zcat-pb-74 {
padding-bottom: 74px;
}
.zcat-pb-76 {
padding-bottom: 76px;
}
.zcat-pb-78 {
padding-bottom: 78px;
}
.zcat-pb-80 {
padding-bottom: 80px;
}
.zcat-pb-82 {
padding-bottom: 82px;
}
.zcat-pb-84 {
padding-bottom: 84px;
}
.zcat-pb-86 {
padding-bottom: 86px;
}
.zcat-pb-88 {
padding-bottom: 88px;
}
.zcat-pb-90 {
padding-bottom: 90px;
}
.zcat-pb-92 {
padding-bottom: 92px;
}
.zcat-pb-94 {
padding-bottom: 94px;
}
.zcat-pb-96 {
padding-bottom: 96px;
}
.zcat-pb-98 {
padding-bottom: 98px;
}
.zcat-pb-100 {
padding-bottom: 100px;
}
/* Left */
.zcat-pl-0 {
padding-left: 0;
}
.zcat-pl-2 {
padding-left: 2px;
}
.zcat-pl-4 {
padding-left: 4px;
}
.zcat-pl-6 {
padding-left: 6px;
}
.zcat-pl-8 {
padding-left: 8px;
}
.zcat-pl-10 {
padding-left: 10px;
}
.zcat-pl-12 {
padding-left: 12px;
}
.zcat-pl-14 {
padding-left: 14px;
}
.zcat-pl-16 {
padding-left: 16px;
}
.zcat-pl-18 {
padding-left: 18px;
}
.zcat-pl-20 {
padding-left: 20px;
}
.zcat-pl-22 {
padding-left: 22px;
}
.zcat-pl-24 {
padding-left: 24px;
}
.zcat-pl-26 {
padding-left: 26px;
}
.zcat-pl-28 {
padding-left: 28px;
}
.zcat-pl-30 {
padding-left: 30px;
}
.zcat-pl-32 {
padding-left: 32px;
}
.zcat-pl-34 {
padding-left: 34px;
}
.zcat-pl-36 {
padding-left: 36px;
}
.zcat-pl-38 {
padding-left: 38px;
}
.zcat-pl-40 {
padding-left: 40px;
}
.zcat-pl-42 {
padding-left: 42px;
}
.zcat-pl-44 {
padding-left: 44px;
}
.zcat-pl-46 {
padding-left: 46px;
}
.zcat-pl-48 {
padding-left: 48px;
}
.zcat-pl-50 {
padding-left: 50px;
}
.zcat-pl-52 {
padding-left: 52px;
}
.zcat-pl-54 {
padding-left: 54px;
}
.zcat-pl-56 {
padding-left: 56px;
}
.zcat-pl-58 {
padding-left: 58px;
}
.zcat-pl-60 {
padding-left: 60px;
}
.zcat-pl-62 {
padding-left: 62px;
}
.zcat-pl-64 {
padding-left: 64px;
}
.zcat-pl-66 {
padding-left: 66px;
}
.zcat-pl-68 {
padding-left: 68px;
}
.zcat-pl-70 {
padding-left: 70px;
}
.zcat-pl-72 {
padding-left: 72px;
}
.zcat-pl-74 {
padding-left: 74px;
}
.zcat-pl-76 {
padding-left: 76px;
}
.zcat-pl-78 {
padding-left: 78px;
}
.zcat-pl-80 {
padding-left: 80px;
}
.zcat-pl-82 {
padding-left: 82px;
}
.zcat-pl-84 {
padding-left: 84px;
}
.zcat-pl-86 {
padding-left: 86px;
}
.zcat-pl-88 {
padding-left: 88px;
}
.zcat-pl-90 {
padding-left: 90px;
}
.zcat-pl-92 {
padding-left: 92px;
}
.zcat-pl-94 {
padding-left: 94px;
}
.zcat-pl-96 {
padding-left: 96px;
}
.zcat-pl-98 {
padding-left: 98px;
}
.zcat-pl-100 {
padding-left: 100px;
}
/* margin */
.zcat-m-auto {
margin: auto;
}
.zcat-ml-auto {
margin-left: auto;
}
.zcat-mr-auto {
margin-right: auto;
}
.zcat-m-0 {
margin: 0;
}
.zcat-m-2 {
margin: 2px;
}
.zcat-m-4 {
margin: 4px;
}
.zcat-m-6 {
margin: 6px;
}
.zcat-m-8 {
margin: 8px;
}
.zcat-m-10 {
margin: 10px;
}
.zcat-m-12 {
margin: 12px;
}
.zcat-m-14 {
margin: 14px;
}
.zcat-m-16 {
margin: 16px;
}
.zcat-m-18 {
margin: 18px;
}
.zcat-m-20 {
margin: 20px;
}
.zcat-m-22 {
margin: 22px;
}
.zcat-m-24 {
margin: 24px;
}
.zcat-m-26 {
margin: 26px;
}
.zcat-m-28 {
margin: 28px;
}
.zcat-m-30 {
margin: 30px;
}
.zcat-m-32 {
margin: 32px;
}
.zcat-m-34 {
margin: 34px;
}
.zcat-m-36 {
margin: 36px;
}
.zcat-m-38 {
margin: 38px;
}
.zcat-m-40 {
margin: 40px;
}
.zcat-m-42 {
margin: 42px;
}
.zcat-m-44 {
margin: 44px;
}
.zcat-m-46 {
margin: 46px;
}
.zcat-m-48 {
margin: 48px;
}
.zcat-m-50 {
margin: 50px;
}
.zcat-m-52 {
margin: 52px;
}
.zcat-m-54 {
margin: 54px;
}
.zcat-m-56 {
margin: 56px;
}
.zcat-m-58 {
margin: 58px;
}
.zcat-m-60 {
margin: 60px;
}
.zcat-m-62 {
margin: 62px;
}
.zcat-m-64 {
margin: 64px;
}
.zcat-m-66 {
margin: 66px;
}
.zcat-m-68 {
margin: 68px;
}
.zcat-m-70 {
margin: 70px;
}
.zcat-m-72 {
margin: 72px;
}
.zcat-m-74 {
margin: 74px;
}
.zcat-m-76 {
margin: 76px;
}
.zcat-m-78 {
margin: 78px;
}
.zcat-m-80 {
margin: 80px;
}
.zcat-m-82 {
margin: 82px;
}
.zcat-m-84 {
margin: 84px;
}
.zcat-m-86 {
margin: 86px;
}
.zcat-m-88 {
margin: 88px;
}
.zcat-m-90 {
margin: 90px;
}
.zcat-m-92 {
margin: 92px;
}
.zcat-m-94 {
margin: 94px;
}
.zcat-m-96 {
margin: 96px;
}
.zcat-m-98 {
margin: 98px;
}
.zcat-m-100 {
margin: 100px;
}
/* Top */
.zcat-mt-0 {
margin-top: 0;
}
.zcat-mt-2 {
margin-top: 2px;
}
.zcat-mt-4 {
margin-top: 4px;
}
.zcat-mt-6 {
margin-top: 6px;
}
.zcat-mt-8 {
margin-top: 8px;
}
.zcat-mt-10 {
margin-top: 10px;
}
.zcat-mt-12 {
margin-top: 12px;
}
.zcat-mt-14 {
margin-top: 14px;
}
.zcat-mt-16 {
margin-top: 16px;
}
.zcat-mt-18 {
margin-top: 18px;
}
.zcat-mt-20 {
margin-top: 20px;
}
.zcat-mt-22 {
margin-top: 22px;
}
.zcat-mt-24 {
margin-top: 24px;
}
.zcat-mt-26 {
margin-top: 26px;
}
.zcat-mt-28 {
margin-top: 28px;
}
.zcat-mt-30 {
margin-top: 30px;
}
.zcat-mt-32 {
margin-top: 32px;
}
.zcat-mt-34 {
margin-top: 34px;
}
.zcat-mt-36 {
margin-top: 36px;
}
.zcat-mt-38 {
margin-top: 38px;
}
.zcat-mt-40 {
margin-top: 40px;
}
.zcat-mt-42 {
margin-top: 42px;
}
.zcat-mt-44 {
margin-top: 44px;
}
.zcat-mt-46 {
margin-top: 46px;
}
.zcat-mt-48 {
margin-top: 48px;
}
.zcat-mt-50 {
margin-top: 50px;
}
.zcat-mt-52 {
margin-top: 52px;
}
.zcat-mt-54 {
margin-top: 54px;
}
.zcat-mt-56 {
margin-top: 56px;
}
.zcat-mt-58 {
margin-top: 58px;
}
.zcat-mt-60 {
margin-top: 60px;
}
.zcat-mt-62 {
margin-top: 62px;
}
.zcat-mt-64 {
margin-top: 64px;
}
.zcat-mt-66 {
margin-top: 66px;
}
.zcat-mt-68 {
margin-top: 68px;
}
.zcat-mt-70 {
margin-top: 70px;
}
.zcat-mt-72 {
margin-top: 72px;
}
.zcat-mt-74 {
margin-top: 74px;
}
.zcat-mt-76 {
margin-top: 76px;
}
.zcat-mt-78 {
margin-top: 78px;
}
.zcat-mt-80 {
margin-top: 80px;
}
.zcat-mt-82 {
margin-top: 82px;
}
.zcat-mt-84 {
margin-top: 84px;
}
.zcat-mt-86 {
margin-top: 86px;
}
.zcat-mt-88 {
margin-top: 88px;
}
.zcat-mt-90 {
margin-top: 90px;
}
.zcat-mt-92 {
margin-top: 92px;
}
.zcat-mt-94 {
margin-top: 94px;
}
.zcat-mt-96 {
margin-top: 96px;
}
.zcat-mt-98 {
margin-top: 98px;
}
.zcat-mt-100 {
margin-top: 100px;
}
/* Right */
.zcat-mr-0 {
margin-right: 0;
}
.zcat-mr-2 {
margin-right: 2px;
}
.zcat-mr-4 {
margin-right: 4px;
}
.zcat-mr-6 {
margin-right: 6px;
}
.zcat-mr-8 {
margin-right: 8px;
}
.zcat-mr-10 {
margin-right: 10px;
}
.zcat-mr-12 {
margin-right: 12px;
}
.zcat-mr-14 {
margin-right: 14px;
}
.zcat-mr-16 {
margin-right: 16px;
}
.zcat-mr-18 {
margin-right: 18px;
}
.zcat-mr-20 {
margin-right: 20px;
}
.zcat-mr-22 {
margin-right: 22px;
}
.zcat-mr-24 {
margin-right: 24px;
}
.zcat-mr-26 {
margin-right: 26px;
}
.zcat-mr-28 {
margin-right: 28px;
}
.zcat-mr-30 {
margin-right: 30px;
}
.zcat-mr-32 {
margin-right: 32px;
}
.zcat-mr-34 {
margin-right: 34px;
}
.zcat-mr-36 {
margin-right: 36px;
}
.zcat-mr-38 {
margin-right: 38px;
}
.zcat-mr-40 {
margin-right: 40px;
}
.zcat-mr-42 {
margin-right: 42px;
}
.zcat-mr-44 {
margin-right: 44px;
}
.zcat-mr-46 {
margin-right: 46px;
}
.zcat-mr-48 {
margin-right: 48px;
}
.zcat-mr-50 {
margin-right: 50px;
}
.zcat-mr-52 {
margin-right: 52px;
}
.zcat-mr-54 {
margin-right: 54px;
}
.zcat-mr-56 {
margin-right: 56px;
}
.zcat-mr-58 {
margin-right: 58px;
}
.zcat-mr-60 {
margin-right: 60px;
}
.zcat-mr-62 {
margin-right: 62px;
}
.zcat-mr-64 {
margin-right: 64px;
}
.zcat-mr-66 {
margin-right: 66px;
}
.zcat-mr-68 {
margin-right: 68px;
}
.zcat-mr-70 {
margin-right: 70px;
}
.zcat-mr-72 {
margin-right: 72px;
}
.zcat-mr-74 {
margin-right: 74px;
}
.zcat-mr-76 {
margin-right: 76px;
}
.zcat-mr-78 {
margin-right: 78px;
}
.zcat-mr-80 {
margin-right: 80px;
}
.zcat-mr-82 {
margin-right: 82px;
}
.zcat-mr-84 {
margin-right: 84px;
}
.zcat-mr-86 {
margin-right: 86px;
}
.zcat-mr-88 {
margin-right: 88px;
}
.zcat-mr-90 {
margin-right: 90px;
}
.zcat-mr-92 {
margin-right: 92px;
}
.zcat-mr-94 {
margin-right: 94px;
}
.zcat-mr-96 {
margin-right: 96px;
}
.zcat-mr-98 {
margin-right: 98px;
}
.zcat-mr-100 {
margin-right: 100px;
}
/* Bottom */
.zcat-mb-0 {
margin-bottom: 0;
}
.zcat-mb-2 {
margin-bottom: 2px;
}
.zcat-mb-4 {
margin-bottom: 4px;
}
.zcat-mb-6 {
margin-bottom: 6px;
}
.zcat-mb-8 {
margin-bottom: 8px;
}
.zcat-mb-10 {
margin-bottom: 10px;
}
.zcat-mb-12 {
margin-bottom: 12px;
}
.zcat-mb-14 {
margin-bottom: 14px;
}
.zcat-mb-16 {
margin-bottom: 16px;
}
.zcat-mb-18 {
margin-bottom: 18px;
}
.zcat-mb-20 {
margin-bottom: 20px;
}
.zcat-mb-22 {
margin-bottom: 22px;
}
.zcat-mb-24 {
margin-bottom: 24px;
}
.zcat-mb-26 {
margin-bottom: 26px;
}
.zcat-mb-28 {
margin-bottom: 28px;
}
.zcat-mb-30 {
margin-bottom: 30px;
}
.zcat-mb-32 {
margin-bottom: 32px;
}
.zcat-mb-34 {
margin-bottom: 34px;
}
.zcat-mb-36 {
margin-bottom: 36px;
}
.zcat-mb-38 {
margin-bottom: 38px;
}
.zcat-mb-40 {
margin-bottom: 40px;
}
.zcat-mb-42 {
margin-bottom: 42px;
}
.zcat-mb-44 {
margin-bottom: 44px;
}
.zcat-mb-46 {
margin-bottom: 46px;
}
.zcat-mb-48 {
margin-bottom: 48px;
}
.zcat-mb-50 {
margin-bottom: 50px;
}
.zcat-mb-52 {
margin-bottom: 52px;
}
.zcat-mb-54 {
margin-bottom: 54px;
}
.zcat-mb-56 {
margin-bottom: 56px;
}
.zcat-mb-58 {
margin-bottom: 58px;
}
.zcat-mb-60 {
margin-bottom: 60px;
}
.zcat-mb-62 {
margin-bottom: 62px;
}
.zcat-mb-64 {
margin-bottom: 64px;
}
.zcat-mb-66 {
margin-bottom: 66px;
}
.zcat-mb-68 {
margin-bottom: 68px;
}
.zcat-mb-70 {
margin-bottom: 70px;
}
.zcat-mb-72 {
margin-bottom: 72px;
}
.zcat-mb-74 {
margin-bottom: 74px;
}
.zcat-mb-76 {
margin-bottom: 76px;
}
.zcat-mb-78 {
margin-bottom: 78px;
}
.zcat-mb-80 {
margin-bottom: 80px;
}
.zcat-mb-82 {
margin-bottom: 82px;
}
.zcat-mb-84 {
margin-bottom: 84px;
}
.zcat-mb-86 {
margin-bottom: 86px;
}
.zcat-mb-88 {
margin-bottom: 88px;
}
.zcat-mb-90 {
margin-bottom: 90px;
}
.zcat-mb-92 {
margin-bottom: 92px;
}
.zcat-mb-94 {
margin-bottom: 94px;
}
.zcat-mb-96 {
margin-bottom: 96px;
}
.zcat-mb-98 {
margin-bottom: 98px;
}
.zcat-mb-100 {
margin-bottom: 100px;
}
/* Left */
.zcat-ml-0 {
margin-left: 0;
}
.zcat-ml-2 {
margin-left: 2px;
}
.zcat-ml-4 {
margin-left: 4px;
}
.zcat-ml-6 {
margin-left: 6px;
}
.zcat-ml-8 {
margin-left: 8px;
}
.zcat-ml-10 {
margin-left: 10px;
}
.zcat-ml-12 {
margin-left: 12px;
}
.zcat-ml-14 {
margin-left: 14px;
}
.zcat-ml-16 {
margin-left: 16px;
}
.zcat-ml-18 {
margin-left: 18px;
}
.zcat-ml-20 {
margin-left: 20px;
}
.zcat-ml-22 {
margin-left: 22px;
}
.zcat-ml-24 {
margin-left: 24px;
}
.zcat-ml-26 {
margin-left: 26px;
}
.zcat-ml-28 {
margin-left: 28px;
}
.zcat-ml-30 {
margin-left: 30px;
}
.zcat-ml-32 {
margin-left: 32px;
}
.zcat-ml-34 {
margin-left: 34px;
}
.zcat-ml-36 {
margin-left: 36px;
}
.zcat-ml-38 {
margin-left: 38px;
}
.zcat-ml-40 {
margin-left: 40px;
}
.zcat-ml-42 {
margin-left: 42px;
}
.zcat-ml-44 {
margin-left: 44px;
}
.zcat-ml-46 {
margin-left: 46px;
}
.zcat-ml-48 {
margin-left: 48px;
}
.zcat-ml-50 {
margin-left: 50px;
}
.zcat-ml-52 {
margin-left: 52px;
}
.zcat-ml-54 {
margin-left: 54px;
}
.zcat-ml-56 {
margin-left: 56px;
}
.zcat-ml-58 {
margin-left: 58px;
}
.zcat-ml-60 {
margin-left: 60px;
}
.zcat-ml-62 {
margin-left: 62px;
}
.zcat-ml-64 {
margin-left: 64px;
}
.zcat-ml-66 {
margin-left: 66px;
}
.zcat-ml-68 {
margin-left: 68px;
}
.zcat-ml-70 {
margin-left: 70px;
}
.zcat-ml-72 {
margin-left: 72px;
}
.zcat-ml-74 {
margin-left: 74px;
}
.zcat-ml-76 {
margin-left: 76px;
}
.zcat-ml-78 {
margin-left: 78px;
}
.zcat-ml-80 {
margin-left: 80px;
}
.zcat-ml-82 {
margin-left: 82px;
}
.zcat-ml-84 {
margin-left: 84px;
}
.zcat-ml-86 {
margin-left: 86px;
}
.zcat-ml-88 {
margin-left: 88px;
}
.zcat-ml-90 {
margin-left: 90px;
}
.zcat-ml-92 {
margin-left: 92px;
}
.zcat-ml-94 {
margin-left: 94px;
}
.zcat-ml-96 {
margin-left: 96px;
}
.zcat-ml-98 {
margin-left: 98px;
}
.zcat-ml-100 {
margin-left: 100px;
}
/* Font family */
.zcat-font-family-primary {
font-family: var(--zcat-font-family-primary);
}
.zcat-font-family-code {
font-family: var(--zcat-font-family-code) !important;
}
/* Font size & Line height*/
.zcat-text-40 {
font: var(--zcat-font-40-normal) var(--zcat-font-family-primary);
}
.zcat-text-32 {
font: var(--zcat-font-32-normal) var(--zcat-font-family-primary);
}
.zcat-text-24 {
font: var(--zcat-font-24-30) var(--zcat-font-family-primary);
}
.zcat-text-20 {
font: var(--zcat-font-20-24) var(--zcat-font-family-primary);
}
.zcat-text-18 {
font: var(--zcat-font-18-22) var(--zcat-font-family-primary);
}
.zcat-text-16 {
font: var(--zcat-font-16-20) var(--zcat-font-family-primary);
}
.zcat-text-14 {
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
}
.zcat-text-12 {
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
}
.zcat-text-10 {
font: var(--zcat-font-10-12) var(--zcat-font-family-primary);
}
.zcat-code-body {
font: var(--zcat-font-regular) var(--zcat-code-body-font) var(--zcat-font-family-code);
}
.zcat-code-subtitle {
font: var(--zcat-font-semibold) var(--zcat-code-subtitle-font) var(--zcat-font-family-code);
}
.zcat-text-center {
text-align: center;
}
/* font weight */
.zcat-font-400, .zcat-font-regular {
font-weight: var(--zcat-font-regular);
}
.zcat-font-500, .zcat-font-medium {
font-weight: var(--zcat-font-medium);
}
.zcat-font-600, .zcat-font-semibold {
font-weight: var(--zcat-font-semibold);
}
/* font color */
.zcat-color-dark1 {
color: var(--zcat-body-text-primary);
}
.zcat-color-dark2 {
color: var(--zcat-body-text-secondary);
}
.zcat-color-dark3 {
color: var(--zcat-body-text-light);
}
.zcat-color-dark4 {
color: var(--zcat-body-text-light);
}
.zcat-color-grey1 {
color: var(--zcat-color-grey1);
}
.zcat-color-grey2 {
color: var(--zcat-color-grey2);
}
.zcat-color-grey3 {
color: var(--zcat-color-grey3);
}
.zcat-color-grey4 {
color: var(--zcat-color-grey4);
}
.zcat-color-grey5 {
color: var(--zcat-color-grey5);
}
.zcat-color-grey6 {
color: var(--zcat-color-grey6);
}
.zcat-color-grey7 {
color: var(--zcat-color-grey7);
}
.zcat-color-white {
color: var(--zcat-color-white);
}
.zcat-color-primary {
color: var(--zcat-shades-theme-1);
}
.zcat-color-primaryhover {
color: var(--zcat-color-primaryhover);
}
.zcat-color-primarylight {
color: var(--zcat-color-primarylight);
}
.zcat-color-red {
color: var(--zcat-shades-red-1);
}
.zcat-color-redhover {
color: var(--zcat-color-redhover);
}
.zcat-color-redbg {
color: var(--zcat-color-redbg);
}
.zcat-color-green {
color: var(--zcat-color-green);
}
.zcat-color-greenhover {
color: var(--zcat-color-greenhover);
}
.zcat-color-greenbg {
color: var(--zcat-color-greenbg);
}
.zcat-color-yellow {
color: var(--zcat-color-yellow);
}
.zcat-color-yellowhover {
color: var(--zcat-color-yellowhover);
}
.zcat-color-yellowbg {
color: var(--zcat-color-yellowbg);
}
.zcat-color-pink {
color: var(--zcat-color-pink);
}
.zcat-color-pinkhover {
color: var(--zcat-color-pinkhover);
}
.zcat-color-pinkbg {
color: var(--zcat-color-pinkbg);
}
/* stroke */
.zcat-stroke-dark1 {
stroke: var(--zcat-body-icons-static-primary);
}
.zcat-stroke-dark2 {
stroke: var(--zcat-body-icons-static-secondary);
}
.zcat-stroke-dark3 {
stroke: var(--zcat-color-dark3);
}
.zcat-stroke-dark4 {
stroke: var(--zcat-color-dark4);
}
.zcat-stroke-grey1 {
stroke: var(--zcat-color-grey1);
}
.zcat-stroke-grey2 {
stroke: var(--zcat-color-grey2);
}
.zcat-stroke-grey3 {
stroke: var(--zcat-color-grey3);
}
.zcat-stroke-grey4 {
stroke: var(--zcat-color-grey4);
}
.zcat-stroke-grey5 {
stroke: var(--zcat-color-grey5);
}
.zcat-stroke-grey6 {
stroke: var(--zcat-color-grey6);
}
.zcat-stroke-grey7 {
stroke: var(--zcat-color-grey7);
}
.zcat-stroke-white {
stroke: var(--zcat-btn-fill-icon-default);
}
.zcat-stroke-primary {
stroke: var(--zcat-btn-ghost-icon-primary-default);
}
.zcat-stroke-primaryhover {
stroke: var(--zcat-btn-ghost-icon-primary-hover);
}
.zcat-stroke-primarylight {
stroke: var(--zcat-btn-ghost-bg-primary-hover);
}
.zcat-stroke-red {
stroke: var(--zcat-btn-ghost-icon-danger-default);
}
.zcat-stroke-redhover {
stroke: var(--zcat-btn-ghost-icon-danger-hover);
}
.zcat-stroke-redbg {
stroke: var(--zcat-btn-ghost-bg-danger-hover);
}
.zcat-stroke-green {
stroke: var(--zcat-btn-ghost-icon-success-default);
}
.zcat-stroke-greenhover {
stroke: var(--zcat-btn-ghost-icon-success-hover);
}
.zcat-stroke-greenbg {
stroke: var(--zcat-btn-ghost-bg-success-hover);
}
.zcat-stroke-yellow {
stroke: var(--zcat-color-yellow);
}
.zcat-stroke-yellowhover {
stroke: var(--zcat-color-yellowhover);
}
.zcat-stroke-yellowbg {
stroke: var(--zcat-color-yellowbg);
}
.zcat-stroke-pink {
stroke: var(--zcat-color-pink);
}
.zcat-stroke-pinkhover {
stroke: var(--zcat-color-pinkhover);
}
.zcat-stroke-pinkbg {
stroke: var(--zcat-color-pinkbg);
}
/* background */
.zcat-bg-dark1 {
background-color: var(--zcat-color-dark1);
}
.zcat-bg-dark2 {
background-color: var(--zcat-color-dark2);
}
.zcat-bg-dark3 {
background-color: var(--zcat-color-dark3);
}
.zcat-bg-dark4 {
background-color: var(--zcat-color-dark4);
}
.zcat-bg-grey1 {
background-color: var(--zcat-color-grey1);
}
.zcat-bg-grey2 {
background-color: var(--zcat-color-grey2);
}
.zcat-bg-grey3 {
background-color: var(--zcat-color-grey3);
}
.zcat-bg-grey4 {
background-color: var(--zcat-color-grey4);
}
.zcat-bg-grey5 {
background-color: var(--zcat-color-grey5);
}
.zcat-bg-grey6 {
background-color: var(--zcat-color-grey6);
}
.zcat-bg-grey7 {
background-color: var(--zcat-color-grey7);
}
.zcat-bg-white {
background-color: var(--zcat-color-white);
}
.zcat-bg-primary {
background-color: var(--zcat-color-primary);
}
.zcat-bg-primaryhover {
background-color: var(--zcat-color-primaryhover);
}
.zcat-bg-primarylight {
background-color: var(--zcat-color-primarylight);
}
.zcat-bg-red {
background-color: var(--zcat-color-red);
}
.zcat-bg-redhover {
background-color: var(--zcat-color-redhover);
}
.zcat-bg-redbg {
background-color: var(--zcat-color-redbg);
}
.zcat-bg-green {
background-color: var(--zcat-color-green);
}
.zcat-bg-greenhover {
background-color: var(--zcat-color-greenhover);
}
.zcat-bg-greenbg {
background-color: var(--zcat-color-greenbg);
}
.zcat-bg-yellow {
background-color: var(--zcat-color-yellow);
}
.zcat-bg-yellowhover {
background-color: var(--zcat-color-yellowhover);
}
.zcat-bg-yellowbg {
background-color: var(--zcat-color-yellowbg);
}
.zcat-bg-pink {
background-color: var(--zcat-color-pink);
}
.zcat-bg-pinkhover {
background-color: var(--zcat-color-pinkhover);
}
.zcat-bg-pinkbg {
background-color: var(--zcat-color-pinkbg);
}
/* border */
.zcat-border-dark1 {
border: 1px solid var(--zcat-color-dark1);
}
.zcat-border-dark2 {
border: 1px solid var(--zcat-color-dark2);
}
.zcat-border-dark3 {
border: 1px solid var(--zcat-color-dark3);
}
.zcat-border-dark4 {
border: 1px solid var(--zcat-color-dark4);
}
.zcat-border-grey1 {
border: 1px solid var(--zcat-color-grey1);
}
.zcat-border-grey2 {
border: 1px solid var(--zcat-body-border-default);
}
.zcat-border-grey3 {
border: 1px solid var(--zcat-color-grey3);
}
.zcat-border-grey4 {
border: 1px solid var(--zcat-color-grey4);
}
.zcat-border-grey5 {
border: 1px solid var(--zcat-color-grey5);
}
.zcat-border-grey6 {
border: 1px solid var(--zcat-color-grey6);
}
.zcat-border-grey7 {
border: 1px solid var(--zcat-color-grey7);
}
/* border radius */
.zcat-br-2 {
border-radius: 2px;
}
.zcat-br-4 {
border-radius: 4px;
}
.zcat-br-6 {
border-radius: 6px;
}
.zcat-br-8 {
border-radius: 8px;
}
.zcat-br-10 {
border-radius: 10px;
}
.zcat-br-12 {
border-radius: 12px;
}
.zcat-br-14 {
border-radius: 14px;
}
.zcat-br-16 {
border-radius: 16px;
}
.zcat-br-50p {
border-radius: 50%;
}
.zcat-br-100p {
border-radius: 100%;
}
/* cursor */
.zcat-cNA {
cursor: not-allowed;
}
.zcat-cP {
cursor: pointer;
}
/* overflow */
.zcat-oA {
overflow: auto;
}
.zcat-oH {
overflow: hidden;
}
.zcat-oV {
overflow: visible;
}
/* Text Decoration */
.zcat-decoration-none {
text-decoration: none;
}
/* Box Sizing */
.zcat-bs-bb {
box-sizing: border-box;
}
.zcat-bs-cb {
box-sizing: content-box;
}
/* Float */
.zcat-float-left {
float: left;
}
.zcat-float-right {
float: right;
}
/* Box Shadows */
.zcat-shadow-dark-all {
box-shadow: var(--zcat-shadow-dark-all);
}
.zcat-shadow-dark-top {
box-shadow: var(--zcat-shadow-dark-top);
}
.zcat-shadow-dark-right {
box-shadow: var(--zcat-shadow-dark-right);
}
.zcat-shadow-dark-bottom {
box-shadow: var(--zcat-shadow-dark-bottom);
}
.zcat-shadow-dark-left {
box-shadow: var(--zcat-shadow-dark-left);
}
.zcat-shadow-light-all {
box-shadow: var(--zcat-shadow-light-all);
}
.zcat-shadow-light-top {
box-shadow: var(--zcat-shadow-light-top);
}
.zcat-shadow-light-right {
box-shadow: var(--zcat-shadow-light-right);
}
.zcat-shadow-light-bottom {
box-shadow: var(--zcat-shadow-light-bottom);
}
.zcat-shadow-light-left {
box-shadow: var(--zcat-shadow-light-left);
}
/* Opacity */
.zcat-opacity-0 {
opacity: 0;
}
.zcat-opacity-01 {
opacity: 0.1;
}
.zcat-opacity-02 {
opacity: 0.2;
}
.zcat-opacity-03 {
opacity: 0.3;
}
.zcat-opacity-04 {
opacity: 0.4;
}
.zcat-opacity-05 {
opacity: 0.5;
}
.zcat-opacity-06 {
opacity: 0.6;
}
.zcat-opacity-07 {
opacity: 0.7;
}
.zcat-opacity-08 {
opacity: 0.8;
}
.zcat-opacity-09 {
opacity: 0.9;
}
.zcat-opacity-1 {
opacity: 1;
}
.zcat-border-primary {
border: 1px solid var(--zcat-card-border-default);
}
.zcat-ws-nowrap {
white-space: nowrap;
}
/* Badge */
.zcat-badge-blue {
padding: 2px 4px;
border-radius: 2px;
color: var(--zcat-color-primary);
background-color: var(--zcat-color-primarylight);
width: -moz-fit-content;
width: fit-content;
}
.zcat-badge-red {
padding: 2px 4px;
border-radius: 2px;
color: var(--zcat-badge-secondary-text-red);
background-color: var(--zcat-badge-secondary-bg-red);
width: -moz-fit-content;
width: fit-content;
}
.zcat-badge-green {
padding: 2px 4px;
border-radius: 2px;
color: var(--zcat-badge-secondary-text-green);
background-color: var(--zcat-badge-secondary-bg-green);
width: -moz-fit-content;
width: fit-content;
}
.zcat-badge-red {
padding: 2px 4px;
border-radius: 2px;
color: var(--zcat-badge-secondary-text-red);
background-color: var(--zcat-badge-secondary-bg-red);
width: -moz-fit-content;
width: fit-content;
}
.zcat-badge-yellow {
padding: 2px 4px;
border-radius: 2px;
color: var(--zcat-badge-secondary-text-orange);
background-color: var(--zcat-badge-secondary-bg-orange);
width: -moz-fit-content;
width: fit-content;
}
.zcat-badge-pink {
padding: 2px 4px;
border-radius: 2px;
color: var(--zcat-badge-secondary-text-pink);
background-color: var(--zcat-badge-secondary-bg-pink);
width: -moz-fit-content;
width: fit-content;
}
.zcat-badge-default {
padding: 2px 4px;
border-radius: 2px;
color: var(--zcat-badge-secondary-text-default);
background-color: var(--zcat-badge-secondary-bg-default);
width: -moz-fit-content;
width: fit-content;
}
/* Dot */
.zcat-dot-blue {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--zcat-color-primary);
}
.zcat-dot-red {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--zcat-color-red);
}
.zcat-dot-green {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--zcat-color-green);
}
.zcat-dot-yellow {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--zcat-color-yellow);
}
.zcat-dot-pink {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--zcat-color-pink);
}
/* Chips */
.zcat-chips-default {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 6px;
border-radius: 6px;
background: var(--zcat-color-primarylight);
border: 1px solid var(--zcat-color-primarylight);
width: -moz-fit-content;
width: fit-content;
}
.zcat-chips-default:hover {
border: 1px solid var(--zcat-color-grey1);
}
.zcat-chips-default.disabled {
background-color: var(--zcat-color-grey3);
border: 1px solid var(--zcat-color-grey3);
}
.zcat-chips-default.disabled:hover {
border: 1px solid var(--zcat-color-grey3);
}
.zcat-chips-default p {
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
color: var(--zcat-color-dark1);
}
.zcat-chips-default.disabled p {
color: var(--zcat-color-dark4);
}
.zcat-chips-default .close-icon {
background: url('data:image/svg+xml,');
background-position: center;
width: 10px;
height: 10px;
border-radius: 2px;
cursor: pointer;
}
.zcat-chips-default .close-icon:hover {
background-color: var(--zcat-color-grey7);
}
.zcat-chips-default.disabled .close-icon {
background: url('data:image/svg+xml,');
cursor: default;
}
.zcat-chips-default.disabled .close-icon:hover {
background-color: var(--zcat-color-grey3);
}
/* Input Label */
.zcat-input-label, .zcat-input-label-default {
color: var(--zcat-inputField-text-label);
font: var(--zcat-input-label-font-weight) var(--zcat-input-label-font) var(--zcat-font-family-primary);
}
/* link */
.zcat-link, .zcat-link-btn {
font-family: var(--zcat-font-family-primary);
line-height: 20px;
color: var(--zcat-link-text-primary-default);
text-decoration: none;
cursor: pointer;
}
/* scrollbar style */
.hide-scrollbar {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
/* ProgressBar */
.lyteProgressBar.lyteCircle circle:first-child {
stroke: var(--zcat-color-grey1);
}
.lyteProgressBar.lyteCircle circle.ltProgressFillCircle {
stroke: var(--zcat-loader-round-primary);
}
.lyteProgressBar.lyteHorizontal {
background: var(--zcat-loader-content-primary);
}
.lyteProgressBar .lyteProgressStatus {
background: var(--zcat-color-green) !important;
}
.lytePopoverArrowIcon{
width: 9px;
height: 9px;
}
.zcat-link:hover {
text-decoration: underline;
}
/* Apply to the entire page
*::-webkit-scrollbar {
width: 6px;
height: 6px;
}
*::-webkit-scrollbar-thumb {
background-color: var(--zcat-scrollbar-bg);
border-radius: 6px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
.lyteTableScroll::-webkit-scrollbar-corner,
zcat-input lyte-input[lt-prop-type="textarea"]::-webkit-scrollbar-corner,
zcat-dropdown lyte-drop-button::-webkit-scrollbar-corner {
background: transparent;
} */
.optional-label{
color: var(--zcat-inputField-text-optional);
font-weight: var(--zcat-input-text-font-weight);
}
/* Heading class */
.zcat-h1, h1 {
font: var(--zcat-heading-font-weight) var(--zcat-heading-font-h1) var(--zcat-font-family-primary);
}
.zcat-h2, h2 {
font: var(--zcat-heading-font-weight) var(--zcat-heading-font-h2) var(--zcat-font-family-primary);
}
.zcat-h3, h3 {
font: var(--zcat-heading-font-weight) var(--zcat-heading-font-h3) var(--zcat-font-family-primary);
}
.zcat-h4, h4 {
font: var(--zcat-heading-font-weight) var(--zcat-heading-font-h4) var(--zcat-font-family-primary);
}
.zcat-h5, h5 {
font: var(--zcat-heading-font-weight) var(--zcat-heading-font-h5) var(--zcat-font-family-primary);
}
.zcat-h6, h6 {
font: var(--zcat-heading-font-weight) var(--zcat-heading-font-h6) var(--zcat-font-family-primary);
}
.zcat-h1, .zcat-h2, .zcat-h3, .zcat-h4, .zcat-h5, .zcat-h6,
h1, h2, h3, h4, h5, h6 {
color: var(--zcat-body-text-primary);
}
/* Body-text class */
.zcat-body1 {
font: var(--zcat-font-regular) var(--zcat-font-14-20) var(--zcat-font-family-primary);
}
.zcat-body2 {
font: var(--zcat-font-regular) var(--zcat-font-16-20) var(--zcat-font-family-primary);
}
.zcat-body3 {
font: var(--zcat-font-regular) var(--zcat-font-12-16) var(--zcat-font-family-primary);
}
.zcat-body4 {
font: var(--zcat-font-regular) var(--zcat-font-10-12) var(--zcat-font-family-primary);
}
.zcat-body5 {
font: var(--zcat-font-regular) var(--zcat-font-18-22) var(--zcat-font-family-primary);
}
.zcat-subtitle1 {
font: var(--zcat-font-semibold) var(--zcat-font-14-20) var(--zcat-font-family-primary);
}
.zcat-subtitle2 {
font: var(--zcat-font-semibold) var(--zcat-font-12-16) var(--zcat-font-family-primary);
}
.zcat-subtitle3 {
font: var(--zcat-font-semibold) var(--zcat-font-10-12) var(--zcat-font-family-primary);
}
/* button text styles */
.zcat-font-buttonLg, lyte-button .lyteLg {
font: var(--zcat-button-font-weight) var(--zcat-button-font-lg) var(--zcat-font-family-primary);
}
.zcat-font-buttonMd, lyte-button .lyte-button {
font: var(--zcat-button-font-weight) var(--zcat-button-font-default) var(--zcat-font-family-primary);
}
.zcat-font-buttonSm, lyte-button .lyteSm {
font: var(--zcat-button-font-weight) var(--zcat-button-font-sm) var(--zcat-font-family-primary);
}
.zcat-font-buttonXs, lyte-button .lyteExsm {
font: var(--zcat-button-font-weight) var(--zcat-button-font-exsm) var(--zcat-font-family-primary);
}
/* input label icon */
.zcat-input-label-stroke{
stroke: var(--zcat-inputField-icon-label);
}
/* input field text - not yet mentioned these below 2 */
lyte-input::after,
lyte-dropdown::after, lyte-multi-dropdown::after {
font: var(--zcat-input-text-font-weight) var(--zcat-font-12-16) var(--zcat-font-family-primary);
}
lyte-input input::placeholder, lyte-input input:-ms-input-placeholder, lyte-input input::-ms-input-placeholder,
lyte-input textarea::placeholder, lyte-input textarea:-ms-input-placeholder, lyte-input textarea::-ms-input-placeholder {
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-default) var(--zcat-font-family-primary);
}
lyte-drop-button .lyteDropPlaceholderNormal, .lyteDropPlaceholderMultiple {
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-default) var(--zcat-font-family-primary);
}
/* Ateliersulphurpool-light */
code[class*="language-"],
pre[class*="language-"] {
font-family: var(--zcat-font-family-code);
font-size: 14px;
line-height: 25px;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
background: #f5f7ff;
color: #222222;
}
pre > code[class*="language-"] {
font-size: 13px;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #dfe2f1;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #dfe2f1;
}
/* Code blocks */
pre[class*="language-"] {
padding: 0;
margin: 0.5em 0;
overflow: auto;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: 0.1em;
border-radius: 0.3em;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #898ea4;
}
.token.punctuation {
color: #5e6687;
}
.token.namespace {
opacity: 0.7;
}
.token.operator,
.token.boolean,
.token.number {
color: #c76b29;
}
.token.property {
color: #c08b30;
}
.token.tag {
color: #007bde;
}
.token.string {
color: #22a2c9;
}
.token.selector {
color: #6679cc;
}
.token.attr-name {
color: #c55f16;
}
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #22a2c9;
}
.token.attr-value,
.token.keyword,
.token.control,
.token.directive,
.token.unit {
color: #5c2fae;
}
.token.statement,
.token.regex,
.token.atrule {
color: #22a2c9;
}
.token.placeholder,
.token.variable {
color: #3d8fd1;
}
.token.deleted {
text-decoration: line-through;
}
.token.inserted {
border-bottom: 1px dotted #202746;
text-decoration: none;
}
.token.italic {
font-style: italic;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.important {
color: #c94922;
}
.token.entity {
cursor: help;
}
pre > code.highlight {
outline: 0.4em solid #c94922;
outline-offset: 0.4em;
}
/* Element Classes */
.zcat-lyte-exclude *,
.modal-tab-head-container,
.code-tabs .code-tab-slide,
.lyteExsm lyte-drop-item {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0px;
padding: 0px;
color: var(--zcat-body-text-primary);
font-weight: 400;
overflow: hidden;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-family: var(--zcat-font-family-primary), sans-serif;
}
p {
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-weight: 600 !important;
}
:root {
/* Font Family */
--zcat-font-family-primary: Inter, sans-serif;
--zcat-font-family-code: Roboto Mono, sans-serif;
/* colors */
--zcat-color-dark1: #101f3e;
--zcat-color-dark2: #4d618a;
--zcat-color-dark3: #7988a8;
--zcat-color-dark4: #a6b1c9;
--zcat-color-white: #ffffff;
--zcat-color-grey1: #d6ddef;
--zcat-color-grey2: #eff2fa;
--zcat-color-grey3: #eff2fa;
--zcat-color-grey4: #f7f8fb;
--zcat-color-grey5: #f4f7fe;
--zcat-color-grey6: #f8f9fb;
--zcat-color-grey7: #f7faff;
--zcat-color-primary: #2a65f0;
--zcat-color-primaryhover: #255ad8;
--zcat-color-primarylight: #e7eefe;
--zcat-color-red: #e22020;
--zcat-color-redhover: #c61a1a;
--zcat-color-redbg: #ffebeb;
--zcat-color-green: #29b260;
--zcat-color-greenhover: #3cb056;
--zcat-color-greenbg: #eaffee;
--zcat-color-yellow: #ffcf54;
--zcat-color-yellowhover: #fead34;
--zcat-color-yellowbg: #fff8e5;
--zcat-color-pink: #e424ba;
--zcat-color-pinkhover: #c637a6;
--zcat-color-pinkbg: #fdedf9;
/* Font Size & Line Height */
--zcat-font-24-30: 24px/30px;
--zcat-font-20-24: 20px/24px;
--zcat-font-18-22: 18px/22px;
--zcat-font-16-22: 16px/22px;
--zcat-font-16-20: 16px/20px;
--zcat-font-14-20: 14px/20px;
--zcat-font-12-20: 12px/20px;
--zcat-font-12-16: 12px/16px;
--zcat-font-10-12: 10px/12px;
/* Font weight */
--zcat-font-semibold: 600;
--zcat-font-medium: 500;
--zcat-font-regular: 400;
/* Button Fonts */
--zcat-button-font-default: 14px/20px;
--zcat-button-font-sm: 14px/20px;
--zcat-button-font-exsm: 12px/16px;
--zcat-button-font-lg: 16px/22px;
--zcat-button-font-weight: 500;
/* Input fields Fonts */
--zcat-input-label-font: 12px/16px;
--zcat-input-text-font-default: 14px/20px;
--zcat-input-text-font-small: 14px/20px;
--zcat-input-text-font-exsm: 12px/16px;
--zcat-input-label-font-weight: 600;
--zcat-input-text-font-weight: 400;
/* Code Blocks Fonts */
--zcat-code-body-font: 12px/20px;
--zcat-code-subtitle-font: 12px/20px;
--zcat-code-font-regular: 400;
--zcat-code-font-semibold: 600;
/* Side Menu Fonts */
--zcat-sidemenu-font: 10px/12px;
--zcat-sidemenu-font-regular: 400;
/* Heading Fonts */
--zcat-heading-font-h1: 40px/normal;
--zcat-heading-font-h2: 32px/normal;
--zcat-heading-font-h3: 24px/30px;
--zcat-heading-font-h4: 20px/24px;
--zcat-heading-font-h5: 18px/22px;
--zcat-heading-font-h6: 16px/20px;
--zcat-heading-font-weight: 600;
--zcat-heading-lheight-normal: normal;
/* Box Shadow */
--zcat-shadow-dark-all: 0px 0px 16px 4px rgba(121, 136, 168, 0.08);
--zcat-shadow-dark-top: 0px -6px 16px 4px rgba(121, 136, 168, 0.08);
--zcat-shadow-dark-right: 6px 0px 16px 4px rgba(121, 136, 168, 0.08);
--zcat-shadow-dark-bottom: 0px 6px 16px 4px rgba(121, 136, 168, 0.08);
--zcat-shadow-dark-left: -6px 0px 16px 4px rgba(121, 136, 168, 0.08);
--zcat-shadow-light-all: 0px 0px 10px 4px rgba(121, 136, 168, 0.04);
--zcat-shadow-light-top: 0px -4px 10px 4px rgba(121, 136, 168, 0.04);
--zcat-shadow-light-right: 4px 0px 10px 4px rgba(121, 136, 168, 0.04);
--zcat-shadow-light-bottom: 0px 4px 10px 4px rgba(121, 136, 168, 0.04);
--zcat-shadow-light-left: -4px 0px 10px 4px rgba(121, 136, 168, 0.04);
}
@font-face {
font-family: 'Inter';
font-weight: 400;
font-style: normal;
font-display: 'block';
src: url('//static.zohocdn.com/webfonts/interregular/font.eot');
src: url('//static.zohocdn.com/webfonts/interregular/font.eot?#iefix')
format('eot'),
url('//static.zohocdn.com/webfonts/interregular/font.woff2') format('woff2'),
url('//static.zohocdn.com/webfonts/interregular/font.woff') format('woff'),
url('//static.zohocdn.com/webfonts/interregular/font.ttf')
format('truetype'),
url('//static.zohocdn.com/webfonts/interregular/font.svg#Inter-Regular')
format('svg');
}
@font-face {
font-family: 'Inter';
font-weight: 500;
font-style: normal;
font-display: 'block';
src: url('//static.zohocdn.com/webfonts/intermedium/font.eot');
src: url('//static.zohocdn.com/webfonts/intermedium/font.eot?#iefix')
format('eot'),
url('//static.zohocdn.com/webfonts/intermedium/font.woff2') format('woff2'),
url('//static.zohocdn.com/webfonts/intermedium/font.woff') format('woff'),
url('//static.zohocdn.com/webfonts/intermedium/font.ttf') format('truetype'),
url('//static.zohocdn.com/webfonts/intermedium/font.svg#Inter-Medium')
format('svg');
}
@font-face {
font-family: 'Inter';
font-weight: 600;
font-style: normal;
font-display: 'block';
src: url('//static.zohocdn.com/webfonts/intersemibold/font.eot');
src: url('//static.zohocdn.com/webfonts/intersemibold/font.eot?#iefix')
format('eot'),
url('//static.zohocdn.com/webfonts/intersemibold/font.woff2')
format('woff2'),
url('//static.zohocdn.com/webfonts/intersemibold/font.woff') format('woff'),
url('//static.zohocdn.com/webfonts/intersemibold/font.ttf')
format('truetype'),
url('//static.zohocdn.com/webfonts/intersemibold/font.svg#Inter-SemiBold')
format('svg');
}
@font-face {
font-family: 'Inter';
font-weight: 700;
font-style: normal;
font-display: 'block';
src: url('//static.zohocdn.com/webfonts/interbold/font.eot');
src: url('//static.zohocdn.com/webfonts/interbold/font.eot?#iefix')
format('eot'),
url('//static.zohocdn.com/webfonts/interbold/font.woff2') format('woff2'),
url('//static.zohocdn.com/webfonts/interbold/font.woff') format('woff'),
url('//static.zohocdn.com/webfonts/interbold/font.ttf') format('truetype'),
url('//static.zohocdn.com/webfonts/interbold/font.svg#Inter-Bold')
format('svg');
}
@font-face {
font-family: 'Zoho Puvi';
src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2'),
url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Zoho Puvi';
src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Medium.woff2') format('woff2'),
url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Medium.otf') format('opentype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Zoho Puvi';
src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Semibold.woff2') format('woff2'),
url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Semibold.otf') format('opentype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto Mono';
font-weight: 400;
font-style: normal;
font-display: 'block';
src: url('//static.zohocdn.com/webfonts/robotomonoregular/font.eot');
src: url('//static.zohocdn.com/webfonts/robotomonoregular/font.eot?#iefix')
format('eot'),
url('//static.zohocdn.com/webfonts/robotomonoregular/font.woff2')
format('woff2'),
url('//static.zohocdn.com/webfonts/robotomonoregular/font.woff')
format('woff'),
url('//static.zohocdn.com/webfonts/robotomonoregular/font.ttf')
format('truetype'),
url('//static.zohocdn.com/webfonts/robotomonoregular/font.svg#RobotoMono-Regular')
format('svg');
}
@font-face {
font-family: 'Roboto Mono';
font-weight: 500;
font-style: normal;
font-display: 'block';
src: url('//static.zohocdn.com/webfonts/robotomonomedium/font.eot');
src: url('//static.zohocdn.com/webfonts/robotomonomedium/font.eot?#iefix')
format('eot'),
url('//static.zohocdn.com/webfonts/robotomonomedium/font.woff2')
format('woff2'),
url('//static.zohocdn.com/webfonts/robotomonomedium/font.woff')
format('woff'),
url('//static.zohocdn.com/webfonts/robotomonomedium/font.ttf')
format('truetype'),
url('//static.zohocdn.com/webfonts/robotomonomedium/font.svg#RobotoMono-Medium')
format('svg');
}
@font-face {
font-family: 'Roboto Mono';
font-weight: 700;
font-style: normal;
font-display: 'block';
src: url('//static.zohocdn.com/webfonts/robotomonobold/font.eot');
src: url('//static.zohocdn.com/webfonts/robotomonobold/font.eot?#iefix')
format('eot'),
url('//static.zohocdn.com/webfonts/robotomonobold/font.woff2')
format('woff2'),
url('//static.zohocdn.com/webfonts/robotomonobold/font.woff') format('woff'),
url('//static.zohocdn.com/webfonts/robotomonobold/font.ttf')
format('truetype'),
url('//static.zohocdn.com/webfonts/robotomonobold/font.svg#RobotoMono-Bold')
format('svg');
}
[data-font-family="puvi"] {
--zcat-font-family-primary: Zoho Puvi, sans-serif;
}
lyte-accordion * {
box-sizing: border-box;
}
lyte-accordion p {
margin: 0;
}
lyte-accordion h1,
lyte-accordion h2,
lyte-accordion h3,
lyte-accordion h4,
lyte-accordion h5,
lyte-accordion h6 {
font-weight: 600 !important;
margin: 0;
}
lyte-accordion {
display: block;
position: relative;
}
.zcat-accordion-head{
color: var(--zcat-accordion-text-default);
}
.zcat-accordion-desc{
color: var(--zcat-accordion-text-secondary);
}
.primary-accordion lyte-accordion-item {
margin: 0 0 20px 0;
border: 1px solid var(--zcat-accordion-border-default);
display: block;
background: var(--zcat-accordion-bg-default);
border-radius: 6px;
}
.primary-accordion lyte-accordion-item:hover {
border-bottom-color: var(--zcat-accordion-border-default);
}
.primary-accordion lyte-accordion-header{
padding: 10px;
background: var(--zcat-accordion-bg-default);
color: var(--zcat-accordion-text-secondary);
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
text-align: left;
outline: 0;
position: relative;
display: flex;
align-items: center;
border-radius: 6px;
cursor: pointer;
}
.primary-accordion lyte-accordion-header:hover {
color: var(--zcat-accordion-text-secondary);
background: var(--zcat-accordion-bg-hover);
}
/* .primary-accordion lyte-accordion-header .title {
width: 90%;
font: var(--zcat-font-16-20) var(--zcat-font-family-primary);
color: var(--zcat-color-dark1);
font-weight: 600;
margin: 0 0 5px 0;
} */
/* .primary-accordion lyte-accordion-header .desc {
width: 90%;
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
color: var(--zcat-color-dark2);
font-weight: 400;
margin: 0;
} */
.primary-accordion .lyteAccordionActive {
border-bottom-color: var(--zcat-accordion-border-default);
box-shadow: var(--zcat-shadow-light-bottom);
}
.primary-accordion .lyteAccordionActive lyte-accordion-header {
color: var(--zcat-accordion-text-default);
background: var(--zcat-accordion-bg-default);
border-bottom: 1px solid var(--zcat-accordion-border-default);
border-radius: 6px 6px 0 0;
}
.primary-accordion .lyteAccordionActive lyte-accordion-header:hover {
color: var(--zcat-accordion-text-default);
background: var(--zcat-accordion-bg-hover);
}
.primary-accordion .lyteAccordionActive lyte-accordion-header {
background: var(--zcat-accordion-bg-active);
}
.primary-accordion.lyteAccordionNested .lyteAccordionActive lyte-accordion-header{
display: flex;
align-items: center;
padding: 10px;
}
.primary-accordion lyte-accordion-body {
width: auto;
padding: 0;
color: var(--zcat-accordion-text-secondary);
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
font-weight: 400;
text-align: left;
display: block;
overflow: hidden;
transition: height ease-out 0.3s, padding ease-out 0.3s;
}
.primary-accordion lyte-icon.lyteAccordionArrow,.primary-accordion .lyteAccordionActive lyte-icon.lyteAccordionArrow,.primary-accordion.lyteAccordionNested .lyteAccordionActive > lyte-accordion-header lyte-icon.lyteAccordionArrow {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5.00202 5L9 1' stroke='%23101f3e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
width: 10px;
height: 6px;
position: unset;
display: inline-block;
margin-top: 1px;
}
.primary-accordion .lyteAccordionActive,
.primary-accordion lyte-accordion-item:hover {
border: 1px solid var(--zcat-accordion-border-default);
}
.primary-accordion .lyteAccordionArrowBlock {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
margin-left: auto;
}
.primary-accordion .lyteAccordionActive .lyteAccordionArrowBlock {
background-color: var(--zcat-btn-grey-bg-hover);
transform: rotate(180deg);
}
lyte-accordion-header:hover .lyteAccordionArrowBlock {
background-color: var(--zcat-btn-grey-bg-hover);
}
.primary-accordion
.lyteAccordionActive
lyte-accordion-header:hover
.lyteAccordionArrowBlock {
background-color: var(--zcat-btn-grey-bg-hover);
}
.primary-accordion .accordian-icon-wraper,.primary-accordion .accordian-icon-without-desc{
width: 36px;
height: 36px;
background: var(--zcat-accordion-icon-bg-default);
border-radius: 50%;
}
.primary-accordion .accordian-icon-without-desc{
width: 24px;
height: 24px;
}
/* .primary-accordion .lyteAccordionActive .active-line {
background: var(--zcat-accordion-border-theme);
} */
.secondary-accordion lyte-accordion-header,.lyteAccordionNested.secondary-accordion lyte-accordion-header {
padding: 2px 6px;
color: var(--zcat-secondary-accordion-text-default);
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
text-align: left;
position: relative;
cursor: pointer;
border-radius: 6px;
}
.secondary-accordion lyte-accordion-header:hover,.lyteAccordionNested.secondary-accordion lyte-accordion-header:hover,.lyteAccordionNested.secondary-accordion .lyteAccordionActive lyte-accordion-header{
background: var(--zcat-secondary-accordion-bg-hover);
color: var(--zcat-secondary-accordion-text-hover);
}
lyte-accordion-header .show-title {
display: block;
}
.lyteAccordionActive lyte-accordion-header .show-title {
display: none;
}
lyte-accordion-header .hide-title {
display: none;
}
.lyteAccordionActive lyte-accordion-header .hide-title {
display: block;
}
.secondary-accordion lyte-icon.lyteAccordionArrow,.lyteAccordionNested.secondary-accordion lyte-icon.lyteAccordionArrow,.lyteAccordionNested.secondary-accordion .lyteAccordionActive > lyte-accordion-header lyte-icon.lyteAccordionArrow {
background: url('data:image/svg+xml,');
width: 14px;
height: 14px;
position: unset;
display: inline-block;
margin-top: 0;
}
.secondary-accordion .lyteAccordionActive lyte-icon.lyteAccordionArrow,.lyteAccordionNested.secondary-accordion .lyteAccordionActive lyte-icon.lyteAccordionArrow,.lyteAccordionNested.secondary-accordion .lyteAccordionActive > lyte-accordion-header lyte-icon.lyteAccordionArrow {
transform: rotate(90deg);
}
.secondary-accordion lyte-accordion-item,.lyteAccordionNested.secondary-accordion lyte-accordion-item {
margin: 0 0 20px 0;
border: none;
display: block;
background: var(--zcat-accordion-bg-default);
border-radius: 6px;
}
.secondary-accordion lyte-accordion-body,.lyteAccordionNested.secondary-accordion lyte-accordion-body {
width: auto;
padding: 0;
color: var(--zcat-accordion-text-secondary);
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
font-weight: 400;
text-align: left;
display: block;
overflow: hidden;
transition: height ease-out 0.3s, padding ease-out 0.3s;
}
.primary-accordion lyte-accordion-item:last-child,
.secondary-accordion lyte-accordion-item:last-child,.lyteAccordionNested.secondary-accordion lyte-accordion-item:last-child {
margin: 0;
}
.zcat-sec-accordion{
margin-top: 10px;
padding: 16px;
border: 1px solid var(--zcat-accordion-border-default);
border-radius: 6px;
box-shadow: 0px 4px 4px 0px var(--zcat-shadow-bg-default);
}
.alert-content-outer{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 16px;
}
.successMessageIcon .alert-icon-color{
stroke: var(--zcat-toast-icon-line-success);
}
.errorMessageIcon .alert-icon-color {
stroke: var(--zcat-toast-icon-line-danger);
}
.warningMessageIcon .alert-icon-color {
stroke: var(--zcat-toast-icon-line-warning);
}
.infoMessageIcon .alert-icon-color {
stroke: var(--zcat-toast-icon-line-info);
}
.alert-content-outer.success .alert-primary-text{
color: var(--zcat-alerts-success-text-primary);
}
.alert-content-outer.success .alert-secondary-text{
color: var(--zcat-alerts-success-text-secondary)
}
.alert-content-outer.error .alert-primary-text{
color: var(--zcat-alerts-danger-text-primary);
}
.alert-content-outer.error .alert-secondary-text{
color: var(--zcat-alerts-danger-text-secondary)
}
.alert-content-outer.warning .alert-primary-text{
color: var(--zcat-alerts-warning-text-primary);
}
.alert-content-outer.warining .alert-secondary-text{
color: var(--zcat-alerts-warning-text-secondary)
}
.alert-content-outer.info .alert-primary-text{
color: var(--zcat-alerts-info-text-primary);
}
.alert-content-outer.info .alert-secondary-text{
color: var(--zcat-alerts-info-text-secondary)
}
/* no header */
.alert-content-outer.success .alert-secondary-text.no-header{
color: var(--zcat-alerts-success-text-primary)
}
.alert-content-outer.error .alert-secondary-text.no-header{
color: var(--zcat-alerts-danger-text-primary)
}
.alert-content-outer.warining .alert-secondary-text.no-header{
color: var(--zcat-alerts-warning-text-primary)
}
.alert-content-outer.info .alert-secondary-text.no-header{
color: var(--zcat-alerts-info-text-primary)
}
.lyteMessageBox.successMessageIcon, .lyteMessageBox.errorMessageIcon, .lyteMessageBox.warningMessageIcon, .lyteMessageBox.infoMessageIcon{
top: 10px !important
}
.left-alert-content{
/* width: 75%; */
}
.right-alert-content{
/* width: 25%; */
justify-content: flex-end;
}
.min-w25p{
/* min-width: 25%; */
}
.lyte-svg {
display: none;
}
lyte-alert * {
box-sizing: border-box;
}
lyte-alert {
display: none;
}
.alertFreezeLayer {
background: var(--zcat-popup-bg-blur) !important;
opacity: 0.3 !important;
}
.alertPopup {
padding: 25px;
background: var(--zcat-popup-bg);
border: 1px solid var(--zcat-popup-border);
box-shadow: var(--zcat-shadow-dark-all);
border-radius: 10px;
min-width: 450px;
}
.alertPopup .alertHeader {
font: var(--zcat-font-18-22) var(--zcat-font-family-primary);
font-weight: 600;
color: var(--zcat-body-text-primary);
}
.alertPopup .alertPrimaryMsg {
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
color: var(--zcat-body-text-secondary);
}
.alertFooter {
padding-top: 22px;
}
.alertPopup.lyteAlertSlideDown {
transition-property: center;
}
.zcat-body {
background-color: var(--zcat-body-bg);
width: calc(100vw - 294px);
height: calc(100vh - 48px);
overflow: auto;
}
.zcat-body * {
box-sizing: border-box;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-family: var(--zcat-font-family-primary);
}
.zcat-body h1,
.zcat-body h2,
.zcat-body h3 {
font-weight: 600 !important;
}
.zcat-body h4,
.zcat-body h5,
.zcat-body h6 {
font-weight: 500 !important;
}
.zcat-body li,
.zcat-body ul,
form h1,
form h2,
form h3,
form h4,
form h5,
form h6,
form p {
margin: 0;
padding: 0;
}
.zcat-body h1,
.zcat-body h2,
.zcat-body h3,
form h1,
form h2,
form h3,
.zcat-body h4,
.zcat-body h5,
.zcat-body h6,
form h4,
form h5,
form h6 {
font-weight: 600 !important;
}
/* .zcat-body h4,
.zcat-body h5,
.zcat-body h6,
form h4,
form h5,
form h6 {
font-weight: 500 !important;
} */
.zcat-body lyte-svg {
display: flex;
}
/* Body layout styles */
.sub-header-outer{
padding: 10px 14px;
/* border-bottom: 1px solid var(--zcat-subHeader-border-default); */
}
zcat-body .zcat-form-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 48px;
width: 100%;
background: var(--zcat-popup-bg);
border-radius: 0;
box-sizing: border-box;
/* border-bottom: 1px solid var(--zcat-tabs-primary-border-default); */
}
.zcat-right-alignment{
display: flex;
gap: 16px;
align-items: center;
}
.subheader-info:hover {
cursor: pointer;
}
.header-border{
border-bottom: 1px solid var(--zcat-tabs-primary-border-default);
}
.zcat-subheader-tabs.zcat-secondary-tab{
width:fit-content;
padding: 4px;
border-radius: 6px;
background: var(--zcat-tabs-secondary-bg-default);
display: flex;
gap: 4px;
}
.zcat-subheader-tabs.zcat-secondary-tab a {
cursor: pointer;
padding: 0 6px;
border-radius: 4px;
height: 20px;
}
.zcat-subheader-tabs.zcat-secondary-tab a:hover {
cursor: pointer;
color: var(---zcat-tabs-secondary-text-hover) !important;
background: var(--zcat-tabs-secondary-bg-hover);
border-bottom: none;
}
.zcat-subheader-tabs.zcat-secondary-tab a.active-tab {
color: var(--zcat-tabs-secondary-text-active) !important;
font-family: var(--zcat-font-family-primary);
border-bottom: none;
font-weight: 500;
background-color: var(--zcat-tabs-secondary-bg-active);
}
.body-wrapper{
background: var(--zcat-body-bg);
/* width: calc(100% - 284px); */
width: 100%;
box-sizing: border-box;
height: 100%;
height: calc(100vh - 48px);
display: flex;
flex-direction: column;
}
/* copied from other file */
.zcat-subheader-tabs {
width: 100%;
display: flex;
gap: 5px;
padding: 0 14px;
background: var(--zcat-tabs-primary-bg);
box-sizing: border-box;
}
.zcat-subheader-tabs a {
font-size: 14px;
font-family: var(--zcat-font-family-primary);
color: var(--zcat-tabs-primary-text-default);
text-decoration: none;
/* padding: 15px 10px; */
padding: 0 8px;
cursor: pointer;
/* height: 48px; */
display: inline-flex;
font-weight: 400;
padding: 4px 8px;
}
.zcat-subheader-tabs a:hover {
cursor: pointer;
color: var(---zcat-tabs-primary-text-hover) !important;
background: var(--zcat-tabs-primary-bg-hover);
border-bottom: 2px solid var(--zcat-tabs-primary-border-hover);
border-radius: 4px 4px 0px 0px;
}
.zcat-subheader-tabs a.active-tab {
color: var(--zcat-tabs-primary-text-active) !important;
font-family: var(--zcat-font-family-primary);
border-bottom: 2px solid var(--zcat-tabs-primary-border-active);
font-weight: 500;
border-radius: 4px 4px 0px 0px;
}
.zcat-sub-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 14px;
width: 100%;
height: 48px;
background: var(--zcat-color-white);
}
.zcat-sub-header.border-bottom {
border-bottom: 1px solid var(--zcat-body-border-outerdivider);
}
.zcat-sub-header .zcat-left-alignment,
.zcat-sub-header .zcat-right-alignment {
display: flex;
align-items: center;
gap: 10px;
}
.zcat-outer-layout {
/* height: calc(100% - 48px); */
padding: 14px;
box-sizing: border-box;
flex-grow: 1;
height: inherit;
overflow: auto;
}
/* .zcat-outer-layout.zcat-tab-present {
height: calc(100% - 80px);
} */
.zcat-inner-layout {
background: var(--zcat-body-container-bg);
height: auto; /* 100% or auto both are same here */
border: 1px solid var(--zcat-body-border-outerdivider);
border-radius: 10px;
padding: 14px 0;
/* height: 100%; */
box-sizing: border-box;
width: 100%;
min-height: 100%;
}
zcat-button * {
box-sizing: border-box;
}
lyte-button .lyte-button {
position: relative;
display: inline-block;
font-weight: 500 !important;
font: var(--zcat-button-font-weight) var(--zcat-button-font-default) var(--zcat-font-family-primary);
padding: 0 10px;
width: auto;
border-radius: 6px;
border-width: 1px;
border-style: solid;
border-color: transparent;
user-select: none;
cursor: pointer;
height: 36px;
/* min-width: 36px; */
white-space: nowrap;
}
.lytePrimaryBtn {
background: var(--zcat-btn-fill-bg-primary-default);
color: var(--zcat-btn-fill-text-default);
}
.lytePrimaryBtn:hover {
background: var(--zcat-btn-fill-bg-primary-hover);
color: var( --zcat-btn-fill-text-default);
border-color: transparent;
}
.lytePrimaryBtn:active {
background: var(--zcat-btn-fill-bg-primary-click);
}
button:disabled {
opacity: 0.5;
pointer-events: none;
}
.lyte-button.lyteSecondary {
background: var(--zcat-btn-grey-bg-default);
color: var(--zcat-btn-grey-text-default);
border-color: var(--zcat-btn-grey-border-default);
}
.lyte-button.lyteSecondary:hover {
background: var(--zcat-btn-grey-bg-hover);
border-color: var(--zcat-btn-grey-border-hover);
color: var(--zcat-btn-grey-text-hover);
}
.lyte-button.lyteSecondary:active {
background: var(--zcat-btn-grey-bg-click);
color: var(--zcat-btn-grey-text-click);
border-color: var(--zcat-btn-grey-border-click);
}
.lyteTertiaryBtn {
background: transparent;
color: var(--zcat-btn-ghost-text-primary-default);
}
.lyteTertiaryBtn:hover,
.lyteTertiaryBtn:active {
background: var(--zcat-btn-ghost-bg-primary-hover);
border-color: transparent;
}
lyte-button .lyte-button.lytePrimaryLineBtn {
background: transparent;
color: var(--zcat-btn-outline-text-primary-default);
border-color: var(--zcat-btn-outline-border-primary-default);
}
lyte-button .lyte-button.lytePrimaryLineBtn:hover,
lyte-button .lyte-button.lytePrimaryLineBtn:active {
background: var(--zcat-btn-outline-bg-primaryHover);
border-color: var(--zcat-btn-outline-border-primary-default);
}
.lyteFailure {
background: var( --zcat-btn-fill-bg-danger-default);
color: var(--zcat-btn-fill-text-default);
}
.lyteFailure:hover {
background: var(--zcat-btn-fill-bg-danger-hover);
border: 1px solid var(--zcat-btn-fill-bg-danger-hover);
}
.lyteFailure:active {
background: var(--zcat-btn-fill-bg-danger-click);
}
lyte-button.sm-btn .lyte-button {
padding: 4px 12px;
}
/* Button Sizes */
lyte-button .lyteSm {
padding: 0 6px;
font: var(--zcat-button-font-weight) var(--zcat-button-font-sm) var(--zcat-font-family-primary);
height: 28px;
/* min-width: 28px; */
display: flex;
justify-content: center;
align-items: center;
border-radius: 6px;
}
lyte-button .lyteExsm {
padding: 0 6px;
height: 24px;
font: var(--zcat-button-font-weight) var(--zcat-button-font-exsm) var(--zcat-font-family-primary);
border-radius: 6px;
/* min-width: 16px; */
display: flex;
justify-content: center;
align-items: center;
}
lyte-button .lyteLg{
height: 50px;
padding: 0 14px;
font: var(--zcat-button-font-weight) var(--zcat-button-font-lg) var(--zcat-font-family-primary);
/* min-width: 50px; */
display: flex;
align-items: center;
justify-content: center;
}
/* Button Loader */
.button-loader-container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
inset: 0;
opacity: 0;
}
.button-loader {
border-width: 1.5px;
border-style: solid;
border-radius: 50%;
border-top: 1.5px solid transparent;
width: 16px;
height: 16px;
-webkit-animation: button-loader 1.5s linear infinite;
animation: button-loader 1.5s linear infinite;
}
lyte-button.loading button,
lyte-button.loading button .button-loader-container {
pointer-events: none;
opacity: 1;
}
@-webkit-keyframes button-loader {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes button-loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
lyte-button p {
margin: 0;
}
lyte-button.loading p {
opacity: 0;
}
lyte-button.loading .button-loader {
opacity: 1;
}
/* Key value btn */
lyte-button .lyte-button.keyValueAddBtn,
lyte-button .lyte-button.keyValueRemoveBtn {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--zcat-btn-grey-bg-default);
color: var(--zcat-btn-grey-text-default);
}
lyte-button .lyte-button.keyValueAddBtn:hover,
lyte-button .lyte-button.keyValueAddBtn:active,
lyte-button .lyte-button.keyValueRemoveBtn:hover,
lyte-button .lyte-button.keyValueRemoveBtn:active {
background: var(--zcat-btn-grey-bg-hover);
}
lyte-button .lyte-button.keyValueRemoveBtn::after {
content: '';
background-image: url('data:image/svg+xml,');
width: 10px;
height: 2px;
}
/* Button */
.transparent-btn .lyte-button.lyteSecondary,
.transparent-btn .lyte-button.lyteSecondary:hover {
background: transparent !important;
color: transparent !important;
border-color: transparent !important;
padding: 0 !important;
}
/* Split button styles Starts */
lyte-button .lyte-button.fill.split-line{
border-right: 1px solid var(--zcat-btn-fill-splitLine-default) !important; /* this !important is must */
}
lyte-button .lyte-button.split-body-br-6{
border-radius: 6px 0 0 6px;
}
lyte-button .lyte-button.split-body-br-4{
border-radius: 4px 0 0 4px;
}
lyte-button .lyte-button.split-btn-arrow-br-6{
border-radius: 0 6px 6px 0;
}
lyte-button .lyte-button.split-btn-arrow-br-4{
border-radius: 0 4px 4px 0;
}
lyte-button .lyte-button.split-border{
border-right: var(--zcat-btn-fill-splitLine-default);
}
/* Split button styles Ends */
/* Navigation button styles Starts */
lyte-button .lyte-button.round{
border-radius: 50%;
border: none;
}
/* Fill button styles Starts */
lyte-button .lyte-button.fill{
color: var(--zcat-btn-fill-text-default);
}
lyte-button .lyte-button.fill.primary{
background: var(--zcat-btn-fill-bg-primary-default);
border: none;
}
lyte-button .lyte-button.fill.success{
background: var(--zcat-btn-fill-bg-success-default);
border: none;
}
lyte-button .lyte-button.fill.danger{
background: var(--zcat-btn-fill-bg-danger-default);
border: none;
}
/* Hover fill btn */
lyte-button .lyte-button.fill.primary:hover{
background: var(--zcat-btn-fill-bg-primary-hover);
}
lyte-button .lyte-button.fill.success:hover{
background: var(--zcat-btn-fill-bg-success-hover);
}
lyte-button .lyte-button.fill.danger:hover{
background: var(--zcat-btn-fill-bg-danger-hover);
}
/* active */
lyte-button .lyte-button.fill:active{
color: var(--zcat-btn-fill-text-click);
}
lyte-button .lyte-button.fill.primary:active{
background: var(--zcat-btn-fill-bg-primary-click);
}
lyte-button .lyte-button.fill.success:active{
background: var(--zcat-btn-fill-bg-success-click);
}
lyte-button .lyte-button.fill.danger:active{
background: var(--zcat-btn-fill-bg-danger-click);
}
lyte-button .lyte-button.fill.primary:active .zcat-stroke-fillbtn-icon path[stroke],
lyte-button .lyte-button.fill.success:active .zcat-stroke-fillbtn-icon path[stroke],
lyte-button .lyte-button.fill.danger:active .zcat-stroke-fillbtn-icon path[stroke],
lyte-button .lyte-button.fill:active .zcat-stroke-fillbtn-icon path[stroke]
{
stroke: var(--zcat-btn-fill-icon-click);
}
/* disabled - fill */
lyte-button .lyte-button.fill:disabled{
color: var(--zcat-btn-fill-text-disabled);
}
lyte-button .lyte-button.fill.primary:disabled{
background: var(--zcat-btn-fill-bg-primary-disabled);
}
lyte-button .lyte-button.fill.success:disabled{
background: var(--zcat-btn-fill-bg-success-disabled);
}
lyte-button .lyte-button.fill.danger:disabled{
background: var(--zcat-btn-fill-bg-danger-disabled);
}
lyte-button .lyte-button.fill.primary:disabled .zcat-stroke-fillbtn-icon path[stroke],
lyte-button .lyte-button.fill.success:disabled .zcat-stroke-fillbtn-icon path[stroke],
lyte-button .lyte-button.fill.danger:disabled .zcat-stroke-fillbtn-icon path[stroke]{
stroke: var(--zcat-btn-fill-icon-disabled);
}
/* Outline button styles Starts */
lyte-button .lyte-button.outline{
background: transparent;
}
lyte-button .lyte-button.outline.primary{
color: var(--zcat-btn-outline-text-primary-default);
border-color: var(--zcat-btn-outline-border-primary-default);
}
lyte-button .lyte-button.outline.success{
color: var(--zcat-btn-outline-text-success-default);
border-color: var(--zcat-btn-outline-border-success-default);
}
lyte-button .lyte-button.outline.danger{
color: var(--zcat-btn-outline-text-danger-default);
border-color: var(--zcat-btn-outline-border-danger-default);
}
/* Hover outline btn */
lyte-button .lyte-button.outline.primary:hover{
color: var(--zcat-btn-outline-text-primary-hover);
border-color: var(--zcat-btn-outline-border-primary-hover);
background: var(--zcat-btn-outline-bg-primaryHover);
}
lyte-button .lyte-button.outline.success:hover{
color: var(--zcat-btn-outline-text-success-hover);
border-color: var(--zcat-btn-outline-border-success-hover);
background: var(--zcat-btn-outline-bg-successHover);
}
lyte-button .lyte-button.outline.danger:hover{
color: var(--zcat-btn-outline-text-danger-hover);
border-color: var(--zcat-btn-outline-border-danger-hover);
background: var(--zcat-btn-outline-bg-dangerHover);
}
/* icons -outlineBtn:hover */
lyte-button .lyte-button.outline.primary:hover .zcat-stroke-outline-primarybtn-icon path[stroke]{
stroke: var(--zcat-btn-outline-icon-primary-hover)
}
lyte-button .lyte-button.outline.success:hover .zcat-stroke-outline-successbtn-icon path[stroke]{
stroke: var(--zcat-btn-outline-icon-success-hover)
}
lyte-button .lyte-button.outline.danger:hover .zcat-stroke-outline-dangerbtn-icon path[stroke]{
stroke: var(--zcat-btn-outline-icon-danger-hover)
}
/* Active state */
lyte-button .lyte-button.outline.primary:active{
border-color: var(--zcat-btn-outline-border-primary-click);
background: transparent;
}
lyte-button .lyte-button.outline.success:active{
border-color: var(--zcat-btn-outline-border-success-click);
background: transparent;
}
lyte-button .lyte-button.outline.danger:active{
border-color: var(--zcat-btn-outline-border-danger-click);
background: transparent;
}
lyte-button .lyte-button.outline.primary:active p{
color: var(--zcat-btn-outline-text-primary-click);
}
lyte-button .lyte-button.outline.success:active p{
color: var(--zcat-btn-outline-text-success-click);
}
lyte-button .lyte-button.outline.danger:active p{
color: var(--zcat-btn-outline-text-danger-click);
}
/* icons -outlineBtn:active */
lyte-button .lyte-button.outline.primary:active .zcat-stroke-outline-primarybtn-icon path[stroke]{
stroke: var(--zcat-btn-outline-icon-primary-click)
}
lyte-button .lyte-button.outline.success:active .zcat-stroke-outline-successbtn-icon path[stroke]{
stroke: var(--zcat-btn-outline-icon-success-click)
}
lyte-button .lyte-button.outline.danger:active .zcat-stroke-outline-dangerbtn-icon path[stroke]{
stroke: var(--zcat-btn-outline-icon-danger-click)
}
/* disabled */
lyte-button .lyte-button.outline.primary:disabled{
border-color: var(--zcat-btn-outline-border-primary-disabled);
background: transparent;
}
lyte-button .lyte-button.outline.success:disabled{
border-color: var(--zcat-btn-outline-border-success-disabled);
background: transparent;
}
lyte-button .lyte-button.outline.danger:disabled{
border-color: var(--zcat-btn-outline-border-danger-disabled);
background: transparent;
}
lyte-button .lyte-button.outline.primary:disabled p{
color: var(--zcat-btn-outline-text-primary-disabled);
}
lyte-button .lyte-button.outline.success:disabled p{
color: var(--zcat-btn-outline-text-success-disabled);
}
lyte-button .lyte-button.outline.danger:disabled p{
color: var(--zcat-btn-outline-text-danger-disabled);
}
/* icons -outlineBtn:disabled */
lyte-button .lyte-button.outline.primary:disabled .zcat-stroke-outline-primarybtn-icon path[stroke]{
stroke: var(--zcat-btn-outline-icon-primary-disabled)
}
lyte-button .lyte-button.outline.success:disabled .zcat-stroke-outline-successbtn-icon path[stroke]{
stroke: var(--zcat-btn-outline-icon-success-disabled)
}
lyte-button .lyte-button.outline.danger:disabled .zcat-stroke-outline-dangerbtn-icon path[stroke]{
stroke: var(--zcat-btn-outline-icon-danger-disabled)
}
/* GREY btn - hover, active for icon & text */
/* Hover state */
lyte-button .lyte-button.grey:hover p{
color: var(--zcat-btn-grey-text-hover);
}
lyte-button .lyte-button.grey:hover .zcat-stroke-greybtn-icon path[stroke]{
stroke: var(--zcat-btn-grey-icon-hover);
}
/* Click */
lyte-button .lyte-button.grey:active p{
color: var(--zcat-btn-grey-text-click);
}
lyte-button .lyte-button.grey:active .zcat-stroke-greybtn-icon path[stroke]{
stroke: var(--zcat-btn-grey-icon-click);
}
/* disabled */
lyte-button .lyte-button.grey:disabled p{
color: var(--zcat-btn-grey-text-disabled);
}
lyte-button .lyte-button.grey:disabled .zcat-stroke-greybtn-icon path[stroke]{
stroke: var(--zcat-btn-grey-icon-disabled);
}
lyte-button .lyte-button.grey:disabled{
background: var(--zcat-btn-grey-bg-disabled);
border: var(--zcat-btn-grey-border-disabled);
}
/* Ghost button styles starts */
lyte-button .lyte-button.ghost{
border: transparent;
background: transparent;
}
lyte-button .lyte-button.ghost.primary, lyte-button .lyte-button.ghost.primary p{
color: var(--zcat-btn-ghost-text-primary-default);
}
lyte-button .lyte-button.ghost.success, lyte-button .lyte-button.ghost.success p{
color: var(--zcat-btn-ghost-text-success-default);
}
lyte-button .lyte-button.ghost.danger, lyte-button .lyte-button.ghost.danger p{
color: var(--zcat-btn-ghost-text-danger-default);
}
/* hover */
lyte-button .lyte-button.ghost.primary:hover{
background: var(--zcat-btn-ghost-bg-primary-hover);
}
lyte-button .lyte-button.ghost.success:hover{
/* color: var(--zcat-btn-ghost-text-success-hover); */
background: var(--zcat-btn-ghost-bg-success-hover);
}
lyte-button .lyte-button.ghost.danger:hover{
/* color: var(--zcat-btn-ghost-text-danger-hover); */
background: var(--zcat-btn-ghost-bg-danger-hover);
}
lyte-button .lyte-button.ghost.primary:hover p{
color: var(--zcat-btn-ghost-text-primary-hover);
}
lyte-button .lyte-button.ghost.success:hover p{
color: var(--zcat-btn-ghost-text-success-hover);
}
lyte-button .lyte-button.ghost.danger:hover p{
color: var(--zcat-btn-ghost-text-danger-hover);
}
lyte-button .lyte-button.ghost.primary:hover .zcat-stroke-ghost-primarybtn-icon path[stroke]{
stroke: var(--zcat-btn-ghost-icon-primary-hover)
}
lyte-button .lyte-button.ghost.success:hover .zcat-stroke-ghost-successbtn-icon path[stroke]{
stroke: var(--zcat-btn-ghost-icon-success-hover)
}
lyte-button .lyte-button.ghost.danger:hover .zcat-stroke-ghost-dangerbtn-icon path[stroke]{
stroke: var(--zcat-btn-ghost-icon-danger-hover)
}
/* active - click */
lyte-button .lyte-button.ghost.primary:active p{
color: var(--zcat-btn-ghost-text-primary-click);
/* background: var(--zcat-btn-ghost-bg-primary-click); */
}
lyte-button .lyte-button.ghost.success:active p{
color: var(--zcat-btn-ghost-text-success-click);
/* background: var(--zcat-btn-ghost-bg-success-click); */
}
lyte-button .lyte-button.ghost.danger:active p{
color: var(--zcat-btn-ghost-text-danger-click);
/* background: var(--zcat-btn-ghost-bg-danger-click); */
}
lyte-button .lyte-button.ghost.primary:active,
lyte-button .lyte-button.ghost.danger:active,
lyte-button .lyte-button.ghost.success:active{
background: transparent;
}
/* icon active for ghost */
lyte-button .lyte-button.ghost.primary:active .zcat-stroke-ghost-primarybtn-icon path[stroke]{
stroke: var(--zcat-btn-ghost-icon-primary-click)
}
lyte-button .lyte-button.ghost.success:active .zcat-stroke-ghost-successbtn-icon path[stroke]{
stroke: var(--zcat-btn-ghost-icon-success-click)
}
lyte-button .lyte-button.ghost.danger:active .zcat-stroke-ghost-dangerbtn-icon path[stroke]{
stroke: var(--zcat-btn-ghost-icon-danger-click)
}
/* disabled - */
lyte-button .lyte-button.ghost.primary:disabled p{
color: var(--zcat-btn-ghost-text-primary-disabled);
}
lyte-button .lyte-button.ghost.success:disabled p {
color: var(--zcat-btn-ghost-text-success-disabled);
}
lyte-button .lyte-button.ghost.danger:disabled p{
color: var(--zcat-btn-ghost-text-danger-disabled);
}
/* icon active for ghost */
lyte-button .lyte-button.ghost.primary:disabled .zcat-stroke-ghost-primarybtn-icon path[stroke]{
stroke: var(--zcat-btn-ghost-icon-primary-disabled)
}
lyte-button .lyte-button.ghost.success:disabled .zcat-stroke-ghost-successbtn-icon path[stroke]{
stroke: var(--zcat-btn-ghost-icon-success-disabled)
}
lyte-button .lyte-button.ghost.danger:disabled .zcat-stroke-ghost-dangerbtn-icon path[stroke]{
stroke: var(--zcat-btn-ghost-icon-danger-disabled)
}
/* lyte-button .lyte-button.ghost.grey, GREY GHOST - navigation */
lyte-button .lyte-button.ghost.round{
background: transparent;
}
lyte-button .lyte-button.ghost.round:hover{
background: var(--zcat-btn-grey-bg-hover);
}
lyte-button .lyte-button.ghost.round:active{
background: var(--zcat-btn-grey-bg-click);
}
lyte-button .lyte-button.ghost.round:active p{
color: var(--zcat-btn-grey-text-click);
}
lyte-button .lyte-button.ghost.round:active .zcat-stroke-greybtn-icon path[stroke]{
stroke: var(--zcat-btn-grey-icon-click);
}
lyte-button .lyte-button.ghost.round:disabled{
background: var(--zcat-btn-grey-bg-disabled);
}
lyte-button .lyte-button.ghost.round:disabled .zcat-stroke-greybtn-icon path[stroke]{
stroke: var(--zcat-btn-grey-icon-disabled);
}
/* Grey navigation */
lyte-button .lyte-button.grey.round:hover{
border: none;
}
/* ONLY_ICON buttons width */
lyte-button .lyte-button.icon-only {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
}
lyte-button .lyte-button.lyteSm.icon-only{
width: 28px;
}
lyte-button .lyte-button.lyteExsm.icon-only{
width: 24px;
}
lyte-button .lyte-button.lyteLg.icon-only{
width: 50px;
}
/* button loader size */
lyte-button .lyte-button.lyteSm .button-loader{
width: 14px;
height: 14px
}
lyte-button .lyte-button.lyteExsm .button-loader{
width: 12px;
height: 12px
}
lyte-button .lyte-button.lyteLg .button-loader{
width: 22px;
height: 22px
}
.lyte-button.lyteSecondary.split-line:hover {
border-right: none;
}
/* Width full button */
lyte-button .lyte-button.zcat-w100p {
width: 100%
}
zcat-button lyte-button .lyte-button lyte-yield[yield-name="text"] {
display: flex;
align-items: center;
justify-content: center;
}
.zcat-stroke-ghostgrey-active path[stroke]{
stroke: var(--zcat-menuList-icon-active);
}
.zcat-stroke-dark1 path[stroke]{
stroke: var(--zcat-body-icons-static-primary)
}
.zcat-stroke-fillbtn-icon path[stroke]{
stroke: var(--zcat-btn-fill-icon-default);
}
.zcat-stroke-outline-primarybtn-icon path[stroke]{
stroke: var(--zcat-btn-outline-icon-primary-default)
}
.zcat-stroke-outline-successbtn-icon path[stroke]{
stroke: var(--zcat-btn-outline-icon-success-default)
}
.zcat-stroke-outline-dangerbtn-icon path[stroke]{
stroke: var(--zcat-btn-outline-icon-danger-default)
}
.zcat-stroke-ghost-primarybtn-icon path[stroke]{
stroke: var(--zcat-btn-ghost-icon-primary-default)
}
.zcat-stroke-ghost-successbtn-icon path[stroke]{
stroke: var(--zcat-btn-ghost-icon-success-default)
}
.zcat-stroke-ghost-dangerbtn-ico path[stroke]n{
stroke: var(--zcat-btn-ghost-icon-danger-default)
}
.zcat-stroke-greybtn-icon path[stroke]{
stroke: var(--zcat-btn-grey-icon-default);
}
/* input field */
.zcat-stroke-input-icon path[stroke]{
stroke: var(--zcat-inputField-icon-placeholder);
}
/* dropdown - menu list icon */
.zcat-stroke-icon-active path[stroke]{
stroke: var(--zcat-menuList-icon-active);
}
.zcat-stroke-icon-tooltip path[stroke]{
stroke: var(--zcat-body-icons-static-primary);
}
lyte-checkbox * {
box-sizing: border-box;
}
lyte-checkbox,.lyteCheckBoxDefault{
width: 100%;
}
lyte-checkbox label{
width: 100%;
display: flex;
white-space: nowrap;
align-items: center;
}
.lyteCheckbox {
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
font-weight: 400;
color: var(--zcat-body-text-primary);
display: inline-block;
position: relative;
cursor: pointer;
white-space: nowrap;
width: 100%;
display: inline-flex;
align-items: center;
gap: 4px;
}
lyte-checkbox:hover span{
color: var(--zcat-body-text-primary);
}
.lyteCheckbox .lyteCheckBoxPrimary span,.lyteCheckbox .lyteCheckBoxDefault span{
width: calc(100% - 16px);
text-overflow: ellipsis;
overflow: hidden;
}
.lyteCheckbox > input[type='checkbox'] {
opacity: 0;
position: absolute;
height: 0;
width: 0;
}
.lyteCheckBoxDefault::before {
content: '';
width: 14px;
height: 14px;
border-radius: 4px;
background: var(--zcat-checkbox-bg-default);
border: 1px solid;
border-color: var(--zcat-checkbox-border-default);
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
margin-right: 4px;
box-sizing: border-box;
}
.lyteCheckbox:hover .lyteCheckBoxDefault::before {
background: var(--zcat-checkbox-bg-hover);
border: 1px solid var(--zcat-checkbox-border-hover);
}
.lyteCheckbox > input[type='checkbox']:checked + .lyteCheckBoxDefault::after,lyte-checkbox.minus-btn .lyteCheckbox>input[type=checkbox]+.lyteCheckBoxDefault::after,.lyteCheckbox.minus-btn > input[type='checkbox']:checked + .lyteCheckBoxDefault::after {
content: '';
display: block;
width: 8px;
height: 8px;
position: absolute;
top: 1px;
bottom: 0;
left: 3.2px;
right: auto;
margin: auto;
background: url('data:image/svg+xml,');
}
lyte-checkbox.minus-btn .lyteCheckbox > input[type=checkbox] + .lyteCheckBoxDefault::after,.lyteCheckbox.minus-btn > input[type='checkbox']:checked + .lyteCheckBoxDefault::after{
content: '-';
font-weight: 500;
background: none;
color: var(--zcat-color-white);
font-size: 22px;
position: absolute;
top: 0;
left: 3px;
bottom: initial;
}
.lyteCheckbox > input[type='checkbox']:checked + .lyteCheckBoxDefault::before {
background: var(--zcat-checkbox-bg-clicked);
border-color: transparent;
}
.lyteCheckbox:hover
> input[type='checkbox']:checked
+ .lyteCheckBoxDefault::before {
background: var(--zcat-checkbox-bg-clicked-hover);
}
.lyteCheckbox > input[type='checkbox']:disabled + span {
opacity: 1;
}
lyte-checkbox[lt-prop-disabled='true'] {
opacity: 1;
cursor: not-allowed;
}
.lyteCheckbox
> input[type='checkbox']:checked:disabled
+ .lyteCheckBoxDefault::before {
background: var(--zcat-checkbox-bg-clicked-disabled);
border-color: transparent;
opacity: 1;
}
.lyteCheckbox > input[type='checkbox']:disabled + .lyteCheckBoxDefault::before,
.lyteCheckbox:hover > input[type='checkbox']:disabled {
background: var(--zcat-checkbox-bg-disabled);
border-color: var(--zcat-checkbox-border-disabled);
opacity: 1;
}
/*Switch Styles*/
.lyteCheckSwitch {
border: 1px solid;
border-color: var(--zcat-checkbox-border-default);
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
width: 28px;
height: 18px;
border-radius: 25px;
background-color: var(--zcat-toggle-bg-default);
position: relative;
}
.lyteCheckSwitch + span {
margin-left: 4px;
width: calc(100% - 28px);
text-overflow: ellipsis;
overflow: hidden;
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
font-weight: 400;
color: var(--zcat-body-text-primary);
}
.zcat-secondary-checkbox-button[lt-prop-type="switch"] .lyteCheckSwitch + span{
margin: 0;
}
.lyteCheckSwitch .on-btn {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--zcat-toggle-inner-default);
display: block;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
left: 1px;
transition: left 150ms ease-in-out;
will-change: left;
}
.lyteCheckSwitch .on-btn:hover{
background: var(--zcat-toggle-inner-hover);
}
lyte-checkbox:hover .lyteCheckSwitch {
background: var(--zcat-checkbox-bg-hover);
border: 1px solid var(--zcat-toggle-border-hover);
}
input[type='checkbox'].on-off-sw:checked + .lyteCheckSwitch {
background: var(--zcat-checkbox-bg-clicked);
border-color: transparent;
box-shadow: none;
}
input[type='checkbox'].on-off-sw:checked + .lyteCheckSwitch:hover,
input[type='checkbox'].on-off-sw:checked:disabled + .lyteCheckSwitch {
background: var(--zcat-checkbox-bg-clicked);
border-color: transparent;
}
input[type='checkbox'].on-off-sw:disabled + .lyteCheckSwitch {
border-color: var(--zcat-checkbox-border-default);
background-color: var(--zcat-checkbox-bg-hover);
}
input[type='checkbox'].on-off-sw:checked + .lyteCheckSwitch .on-btn {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--zcat-toggle-inner-active);
display: block;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
left: calc(100% - 15px);
}
/*Keyboard Focus*/
input[type='checkbox'].on-off-sw:checked:focus + .lyteCheckSwitch,
input[type='checkbox'].on-off-sw:focus + .lyteCheckSwitch,
.lyteCheckbox
> input[type='checkbox']:checked:focus
+ .lyteCheckBoxDefault::before,
.lyteCheckbox > input[type='checkbox']:focus + .lyteCheckBoxDefault::before {
box-shadow: none;
}
lyte-checkbox:hover .lyteCheckSwitch .on-btn{
background: var(--zcat-toggle-inner-hover);
}
lyte-checkbox:hover
input[type='checkbox'].on-off-sw:checked + .lyteCheckSwitch {
background: var(--zcat-toggle-bg-clicked-hover);
}
.zcat-secondary-checkbox-button.primaryCheckBoxBtn.selected,
.zcat-secondary-checkbox-button.primaryCheckBoxBtn {
padding: 0;
}
.zcat-secondary-checkbox-button .lyteCheckbox {
width: 100%;
padding: 10px;
}
.zcat-secondary-checkbox-button.lyteCheckboxDisabled .lyteCheckbox,.primaryCheckBoxBtn.lyteCheckboxDisabled{
cursor: not-allowed;
pointer-events: none;
}
lyte-checkbox.zcat-secondary-checkbox-button label{
padding: 10px;
cursor: pointer;
flex-direction: row-reverse;
}
.primaryCheckBoxBtn{
padding: 10px;
border-radius: 6px;
border: 1px solid var(--zcat-radio-outer-border-default);
background: var(--zcat-radio-outer-bg-default);
cursor: pointer;
}
.primaryCheckBoxBtn:hover {
box-shadow: 0px 0px 6px 1px var(--zcat-shadow-bg-default);
}
.primaryCheckBoxBtn.selected {
padding: 10px;
border-radius: 6px;
border: 1px solid var(--zcat-color-primary);
background: var(--zcat-color-grey7);
}
.lyteCheckbox.lyteDefault,.primaryCheckBoxBtn .lyteCheckbox.lyteDefault{
position: relative;
cursor: pointer;
display: inline-flex;
align-items: center;
width: 100%;
}
.primaryCheckBoxBtn .lyteCheckbox.lyteDefault{
align-items: baseline;
}
.primaryCheckBoxBtn .lyteCheckBoxDefault{
display: flex;
gap: 4px;
position: relative;
}
.primaryCheckBoxBtn .lyteCheckbox > input[type='checkbox']:checked + .lyteCheckBoxDefault::after{
top: -14px;
}
.primaryCheckBoxBtn.checkboxWutSubtxt .lyteCheckbox > input[type='checkbox']:checked + .lyteCheckBoxDefault::after{
top: 1px;
}
.primaryCheckBoxBtn .lyteCheckBoxDefault::before {
align-items: baseline;
vertical-align: top;
margin-top: 4.5px;
}
.checkboxWutSubtxt.primaryCheckBoxBtn .lyteCheckBoxDefault{
align-items: center;
}
.primaryCheckBoxBtn.checkboxWutSubtxt .lyteCheckBoxDefault::before{
margin: 0;
}
.checkboxWutLabel .lyteCheckbox.lyteDefault{
width: fit-content;
}
.checkboxWutLabel .lyteCheckBoxDefault,lyte-checkbox[lt-prop-disabled='true'].checkboxWutLabel,lyte-checkbox[lt-prop-type="default"].checkboxWutLabel{
width: 14px;
height: 14px;
}
lyte-checkbox[lt-prop-disabled='true'] .lyteCheckbox.lyteDefault{
cursor: not-allowed;
}
.checkboxWutLabel .lyteCheckBoxDefault::before{
position: absolute;
top: 0;
}
zcat-checkbox{
display: flex;
}
/* .lyteCheckBoxDefault, lyte-checkbox{
width: auto;
} */
lyte-combobox * {
box-sizing: border-box;
}
lyte-combobox lyte-dropdown {
display: block;
width: 100%;
max-width: unset;
position: relative;
}
lyte-combobox {
position: relative;
}
lyte-combobox::after {
content: attr(error-message);
position: absolute;
top: 100%;
left: 0;
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-error);
padding-top: 1px;
}
.lyteComboboxButtonSearch.lyteComboboxSearchPresent .lyteDropPlaceholderNormal,
.lyteComboboxButtonSearch.lyteComboboxSearchPresent .lyteDropdownLabel,
lyte-combobox.buttonSearch.lyteComboboxSearchPresent .lyteDropPlaceholderNormal,
lyte-combobox.buttonSearch.lyteComboboxSearchPresent .lyteDropdownLabel {
position: absolute;
z-index: 5;
pointer-events: none;
padding-left: 20px;
}
.lyteComboboxButtonSearch .lyteDropButtonDown .lyteDropdownLabel,
.lyteComboboxButtonSearch .lyteDropButtonUp .lyteDropdownLabel,
lyte-combobox.buttonSearch .lyteDropButtonDown .lyteDropdownLabel,
lyte-combobox.buttonSearch .lyteDropButtonUp .lyteDropdownLabel {
opacity: 0.5;
}
.lyteComboboxFiltering .lyteDropPlaceholderNormal,
.lyteComboboxButtonSearch .lyteComboboxFiltering .lyteDropdownLabel {
opacity: 0;
}
.lyteComboboxBtnSearchInput {
width: 100%;
}
.lyteInput.lyteComboboxBtnSearchInput[lt-prop-type="search"]
.lyteComboboxBtnSearchOrigIpt {
padding: 0;
padding-left: 20px;
}
.lyteComboboxBtnSearchInput.lyteInputFocus .lyteField,
.lyteComboboxBtnSearchInput .lyteField:hover,
.lyteComboboxBtnSearchInput .lyteField {
border: 0;
}
.lyteComboboxBtnSearchInput[lt-prop-type="search"] .searchIcon {
left: 0;
}
.lyteComboboxDropboxSearch {
box-sizing: border-box;
width: 100%;
}
.lyteComboboxDropboxSearch.lyteInputBox {
padding: 15px;
}
.zcat-invalid lyte-dropdown lyte-drop-button,
.zcat-invalid lyte-dropdown lyte-drop-button:hover,
.zcat-invalid lyte-dropdown .lyteDummyEventContainer:focus lyte-drop-button,
.zcat-invalid
lyte-dropdown
.lyteDummyEventContainer:focus
lyte-drop-button:hover {
border-color: var(--zcat-inputField-border-error) !important;
}
.zcat-invalid lyte-dropdown .lyteDummyEventContainer lyte-drop-button::before {
background-color: var(--zcat-inputField-bg-error);
}
lyte-dropdown .lyteDropdown-disabled lyte-drop-button,
lyte-dropdown
.lyteDropdown-disabled
.lyteDummyEventContainer:focus
lyte-drop-button:hover,
lyte-dropdown
.lyteDropdown-disabled
.lyteDummyEventContainer:focus
lyte-drop-button {
background: var(--zcat-inputField-bg-disabled) !important;
color: var(--zcat-inputField-text-disabled) !important;
cursor: not-allowed;
border-color: var(--zcat-inputField-border-disabled) !important;
box-shadow: none;
}
.lyteDropdown-disabled span.lyteDropPlaceholderNormal {
color: var(--zcat-inputField-text-disabled);
}
.lyteDateRangePickerRow {
border: none;
box-shadow: none;
background: var(--zcat-datePicker-bg-default);
}
.lyteCalendarPopup {
background: var(--zcat-datePicker-bg-default);
border-radius: 1px;
border: none;
box-shadow: none;
}
.lyteCalendarPopup lyte-dropdown lyte-drop-button {
font-size: 12px;
color: var(--zcat-inputField-text-active);
border: 1px solid var(--zcat-inputField-border-default);
padding: 2px 22px 2px 4px;
}
.lyteCalDateSpan {
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
}
.lyteDateRPTempSelected .lyteCalDateSpan {
color: var(--zcat-datePicker-text-active);
position: relative;
z-index: 5;
}
.lyteDateRPFirstDateSelected .lyteCalDateSpan{
color: var(--zcat-datePicker-text-selected);
position: relative;
z-index: 5;
}
.lyteCalToday {
background: var(--zcat-datePicker-bg-default);
color: var(--zcat-datePicker-text-default);
border: none;
}
.lyteCalendarPopup lyte-dropdown lyte-drop-button:hover,
.lyteCalendarPopup .lyteDummyEventContainer:focus lyte-drop-button,
.lyteCalendarPopup lyte-dropdown lyte-drop-button.lyteDropButtonDown,
.lyteCalendarPopup .lyteDummyEventContainer:focus lyte-drop-button:hover {
color: var(--zcat-inputField-text-active);
border: 1px solid var(--zcat-inputField-border-hover) !important;
padding: 2px 22px 2px 4px;
}
.lyteDateRPFirstDateSelected,
.lyteDateRPFirstDateSelected::before,
.lyteDateRPTempFirstDateSelected::before,.lyteDateRPTempFirstDateSelected{
background: var(--zcat-datePicker-number-bg-selected);
border-radius: 50%;
z-index: 1;
}
.lyteDateRPTempFirstDateSelected .lyteCalDateSpan,
.lyteDateRPTempLastDateSelected .lyteCalDateSpan {
color: var(--zcat-datePicker-text-selected) !important;
position: relative;
z-index: 5;
}
.lyteDateRPLastDateSelected,
.lyteDateRPLastDateSelected::before,
.lyteDateRPTempLastDateSelected::before,.lyteDateRPLastDateSelected.lyteCalTableCell,.lyteDateRPTempLastDateSelected{
background: var(--zcat-datePicker-number-bg-selected) !important;
border-radius: 50% !important;
}
.lyteDateRPFirstDateSelected,
.lyteDateRPFirstDateSelected:hover,
.lyteDateRPLastDateSelected,
.lyteDateRPLastDateSelected:hover {
border-color: none !important;
border-radius: 0;
}
.lyteDateRPFirstDateSelected,.lyteDateRPLastDateSelected,.lyteDateRPLastDateSelected:hover{
border-radius: 50% !important;
}
.lyteDateRPFirstDateSelected::after,.lyteDateRPTempFirstDateSelected::after,.lyteCalTableCell.lyteCalToday.lyteDateRPTempSelected::after{
left: 50%;
top: 0;
height: 30px;
}
.lyteCalTableCell.lyteCalToday.lyteDateRPTempSelected::after{
left: 100%
}
.lyteDateRPTempFirstDateSelected::after,
.lyteDateRPFirstDateSelected::after,
.lyteDateRPMonthStartDate::after,
.lyteDateRPTempSelected::after{
height: 30px;
width: 38px;
}
.lyteDateRPTempSelected,
.lyteDateRPTempFirstDateSelected::after,
.lyteDateRPFirstDateSelected::after,
.lyteDateRPMonthStartDate::after,
.lyteDateRPTempSelected::after,
.lyteCalTableCell:hover,
.lyteCalToday:hover {
background: var(--zcat-datePicker-number-bg-active);
}
.lyteDateRPMonthStartDate,
.lyteDateRPMonthEndDate,
.lyteDateRPTempSelected,.lyteDateRPFirstDateSelected::after,.lyteDateRangePickerRow .lyteDateRPTempSelected,.lyteDateRPTempSelected::after{
color: var(--zcat-datePicker-text-active) !important;
background: var(--zcat-datePicker-number-bg-active);
}
.lyteCalNav,
.lyteCalNav:hover {
border: none;
}
.lyteCalDisableNav,.lyteDateRPLeftNav[aria-disabled="true"],.lyteDateRPRightNav[aria-disabled="true"]{
opacity: 1;
cursor: not-allowed;
}
.lyteCaldLft::before,
.lyteCaldRgt::before{
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M1.25 1.5L4.75 5L1.25 8.5' stroke='%23101F3E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
width: 6px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) rotate(180deg);
z-index: 2;
opacity: 1;
}
.lyteCaldRgt::before{
transform: translate(-50%,-50%);
}
/* Default (light) mode */
html[data-user-color-scheme="dark"] .lyteCaldLft::before,
html[data-user-color-scheme="dark"] .lyteCaldRgt::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M1.25 1.5L4.75 5L1.25 8.5' stroke='%23EEEEEE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Disabled nav (light mode) */
.lyteCalDisableNav.lyteCaldLft::before,
.lyteDateRPLeftNav[aria-disabled="true"] .lyteCaldLft::before,
.lyteCalDisableNav.lyteCaldRgt::before,
.lyteDateRPRightNav[aria-disabled="true"] .lyteCaldRgt::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M1.25 1.5L4.75 5L1.25 8.5' stroke='%23A6B1C9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Disabled nav (dark mode) */
html[data-user-color-scheme="dark"] .lyteCalDisableNav.lyteCaldLft::before,
html[data-user-color-scheme="dark"] .lyteCalDisableNav.lyteCaldRgt::before,
html[data-user-color-scheme="dark"] .lyteDateRPLeftNav[aria-disabled="true"] .lyteCaldLft::before,
html[data-user-color-scheme="dark"] .lyteDateRPRightNav[aria-disabled="true"] .lyteCaldRgt::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M1.25 1.5L4.75 5L1.25 8.5' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.lyteCaldLft::after,.lyteCaldRgt::after{
content: '';
width: 24px;
height: 24px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
z-index: 1;
}
.lyteCalNav:hover.lyteCaldLft::after,.lyteCalNav:hover.lyteCaldRgt::after{
cursor: pointer;
background-color: var(--zcat-btn-grey-bg-hover);
}
.lyteCalTableCellHeader {
font: var(--zcat-font-regular) var(--zcat-font-10-12) var(--zcat-font-family-primary);
color: var(--zcat-datePicker-text-days);
}
.lyteCalTableCell {
color: var(--zcat-datePicker-text-default);
}
.lyteCalTableCell.lyteCalDisabled{
color: var(--zcat-datePicker-text-disabled);
opacity: 1;
}
.lyteCalTableCell.lyteCalToday {
position: relative;
/* background: var(--zcat-datePicker-number-bg-active); */
color: var(--zcat-datePicker-text-active);
border: none;
}
.lyteDateRPFirstDateSelected.lyteCalTableCell.lyteCalToday::before,.lyteDateRPLastDateSelected.lyteCalTableCell.lyteCalToday::before{
content: '';
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: var(--zcat-datePicker-text-active);
border-radius: 50%;
}
.lyteDateRPLastDateSelected.lyteCalTableCell.lyteCalToday .lyteCalDateSpan,.lyteDateRPFirstDateSelected.lyteCalTableCell.lyteCalToday .lyteCalDateSpan{
position: relative;
z-index: 2;
}
/* .lyteCalToday.lyteCalTableCell.lyteDateRPTempSelected::before,
.lyteCalToday.lyteCalTableCell.lyteDateRPTempSelected::before,
.lyteCalTableCell.lyteCalToday.lyteDateRPFirstDateSelected::before,
.lyteCalTableCell.lyteCalToday.lyteDateRPLastDateSelected::before,
.lyteCalTableCell.lyteCalToday.lyteDateRPTempFirstDateSelected::before,
.lyteCalTableCell.lyteCalToday.lyteDateRPTempLastDateSelected::before {
display: none;
} */
.lyteCalToday.lyteCalTableCell.lyteDateRPTempSelected {
background: var(--zcat-datePicker-number-bg-active);
border: none;
z-index: 5;
}
.lyteDateRPTempFirstDateSelected,
.lyteDateRPTempLastDateSelected,
.lyteDateRPFirstDateSelected,
.lyteDateRPLastDateSelected {
color: var(--zcat-datePicker-text-selected) !important;
}
.lyteDateRPTempFirstDateSelected,
.lyteDateRPFirstDateSelected,
.lyteDateRPTempSelected.lyteDateRPTempFirstDateSelected,
.lyteDateRPTempSelected.lyteDateRPTempFirstDateSelected:hover,
.lyteDateRPTempFirstDateSelected:hover,
.lyteDateRPFirstDateSelected:hover,.lyteDateRPFirstDateSelected.lyteCalTableCell{
background-color: var(--zcat-datePicker-number-bg-active) !important;
border: none !important;
border-radius: 50% !important;
}
.lyteDateRPFirstDateSelected,.lyteDateRPFirstDateSelected.lyteCalTableCell{
border-radius: 50% !important;
}
.lyteDateRPTempLastDateSelected,
.lyteDateRPLastDateSelected,
.lyteDateRPTempSelected.lyteDateRPTempLastDateSelected,
.lyteDateRPTempSelected.lyteDateRPTempLastDateSelected:hover,
.lyteDateRPTempLastDateSelected:hover {
border-radius: 50% !important;
}
.lyteCalToday.lyteDateRPTempFirstDateSelected,
.lyteCalToday.lyteDateRPTempLastDateSelected,
.lyteCalToday.lyteDateRPTempFirstDateSelected:hover,
.lyteCalToday.lyteDateRPTempLastDateSelected:hover,
.lyteDateRPTempFirstDateSelected,
.lyteDateRPTempFirstDateSelected:hover,
.lyteDateRPTempLastDateSelected,
.lyteDateRPTempLastDateSelected:hover {
background-color: var(--zcat-datePicker-number-bg-active) !important;
border-color: none !important;
color: var(--zcat-datePicker-text-selected) !important;
}
.lyteDateRPTempLastDateSelected.lyteDateRPTempFirstDateSelected::after{
display: none;
}
.lyteDateRPMonthEndDate:first-of-type {
border-radius: 50%;
}
.dRPCalendar2 .lyteCalTableContainer {
border: none;
}
.lyteCalTableCell.lyteDateRPTempLastDateSelected:hover,
.lyteDateRPMonthEndDate,
.lyteDateRPTempSelected:last-of-type,
.lyteCalTableCell.lyteDateRPTempSelected:last-of-type:hover {
border-radius: 0 50% 50% 0;
}
.lyteDateRPMonthStartDate{
border-radius: 50% 0 0 50%;
}
.lyteCalDisabled.lyteCalTableCell.lyteCalSel,
.lyteCalTableCell.lyteCalSel,
.lyteCalTableCell.lyteCalSel:hover {
background: var(--zcat-datePicker-number-bg-active);
color: var(--zcat-datePicker-text-selected);
border: none;
/* border-radius: 3px; */
}
/* .lyteCalTableCell.lyteCalSel:hover {
background: var(--zcat-color-white);
color: var(--zcat-color-dark1);
border: none;
border-radius: 4px;
} */
.lyteCalendarNavigator {
justify-content: space-between;
padding: 14px 14px 16px;
gap: 14px;
}
.lyteCalNav.lyteCaldLft {
order: 1;
}
.lyteCalNav.lyteCaldRgt {
order: 3;
margin: 0;
}
.lyteCalsCalMon {
display: flex;
gap: 14px;
flex-grow: unset;
order: 2;
width: calc(100% - 60px);
}
.lyteCalMonthDD,.lyteCalYearDD{
max-width: 100%;
width: 50%;
}
.lyteCalendarPopup lyte-dropdown lyte-drop-button,
.lyteCalendarPopup lyte-dropdown lyte-drop-button:hover,
.lyteCalendarPopup .lyteDummyEventContainer:focus lyte-drop-button,
.lyteCalendarPopup lyte-dropdown lyte-drop-button.lyteDropButtonDown,
.lyteCalendarPopup .lyteDummyEventContainer:focus lyte-drop-button:hover {
min-height: 24px;
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-exsm) var(--zcat-font-family-primary);
padding: 2px 22px 2px 4px;
border-radius: 4px;
}
.lyteCalendarPopup lyte-dropdown lyte-icon.dropdown{
top: 50%;
height: 12px;
width: 12px;
}
html[data-user-color-scheme="dark"] .lyteCalendarPopup lyte-dropdown lyte-icon.dropdown{
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%237988A8' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.date-input-field .lyteField {
position: relative;
}
.date-input-field .lyteField::after {
content: '';
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 6.66668H2M10.6667 1.33334V4.00001M5.33333 1.33334V4.00001M5.2 14.6667H10.8C11.9201 14.6667 12.4802 14.6667 12.908 14.4487C13.2843 14.2569 13.5903 13.951 13.782 13.5747C14 13.1468 14 12.5868 14 11.4667V5.86668C14 4.74657 14 4.18652 13.782 3.7587C13.5903 3.38237 13.2843 3.07641 12.908 2.88466C12.4802 2.66668 11.9201 2.66668 10.8 2.66668H5.2C4.0799 2.66668 3.51984 2.66668 3.09202 2.88466C2.71569 3.07641 2.40973 3.38237 2.21799 3.7587C2 4.18652 2 4.74657 2 5.86668V11.4667C2 12.5868 2 13.1468 2.21799 13.5747C2.40973 13.951 2.71569 14.2569 3.09202 14.4487C3.51984 14.6667 4.0799 14.6667 5.2 14.6667Z' stroke='%237988a8' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
width: 16px;
height: 16px;
background-repeat: no-repeat;
}
html[data-user-color-scheme="dark"] .date-input-field .lyteField::after{
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 6.66668H2M10.6667 1.33334V4.00001M5.33333 1.33334V4.00001M5.2 14.6667H10.8C11.9201 14.6667 12.4802 14.6667 12.908 14.4487C13.2843 14.2569 13.5903 13.951 13.782 13.5747C14 13.1468 14 12.5868 14 11.4667V5.86668C14 4.74657 14 4.18652 13.782 3.7587C13.5903 3.38237 13.2843 3.07641 12.908 2.88466C12.4802 2.66668 11.9201 2.66668 10.8 2.66668H5.2C4.0799 2.66668 3.51984 2.66668 3.09202 2.88466C2.71569 3.07641 2.40973 3.38237 2.21799 3.7587C2 4.18652 2 4.74657 2 5.86668V11.4667C2 12.5868 2 13.1468 2.21799 13.5747C2.40973 13.951 2.71569 14.2569 3.09202 14.4487C3.51984 14.6667 4.0799 14.6667 5.2 14.6667Z' stroke='%23888888' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.date-input-field .lyteField::before {
content: '';
position: absolute;
right: 0;
width: 30px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0 6px 6px 0;
/* background-color: var(--zcat-color-grey6); */
}
.zcat-calendar-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
border-top: 1px solid var(--zcat-datePicker-border-line);
}
.lyteInputBox .lyteInputCalendarIcon {
position: absolute;
right: 0;
top: calc(50%);
transform: translateY(-50%);
width: 100%;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
background-color: transparent;
cursor: pointer;
-webkit-mask-image: none;
}
.lyteInputBox .lyteInputCalendarIcon::before {
content: '';
position: absolute;
right: 0;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 6.66668H2M10.6667 1.33334V4.00001M5.33333 1.33334V4.00001M5.2 14.6667H10.8C11.9201 14.6667 12.4802 14.6667 12.908 14.4487C13.2843 14.2569 13.5903 13.951 13.782 13.5747C14 13.1468 14 12.5868 14 11.4667V5.86668C14 4.74657 14 4.18652 13.782 3.7587C13.5903 3.38237 13.2843 3.07641 12.908 2.88466C12.4802 2.66668 11.9201 2.66668 10.8 2.66668H5.2C4.0799 2.66668 3.51984 2.66668 3.09202 2.88466C2.71569 3.07641 2.40973 3.38237 2.21799 3.7587C2 4.18652 2 4.74657 2 5.86668V11.4667C2 12.5868 2 13.1468 2.21799 13.5747C2.40973 13.951 2.71569 14.2569 3.09202 14.4487C3.51984 14.6667 4.0799 14.6667 5.2 14.6667Z' stroke='%237988a8' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 10px;
background-color: none;
border-radius: 0 5px 5px 0;
width: 34px;
height: 34px;
}
html[data-user-color-scheme="dark"] .lyteInputBox .lyteInputCalendarIcon::before{
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 6.66668H2M10.6667 1.33334V4.00001M5.33333 1.33334V4.00001M5.2 14.6667H10.8C11.9201 14.6667 12.4802 14.6667 12.908 14.4487C13.2843 14.2569 13.5903 13.951 13.782 13.5747C14 13.1468 14 12.5868 14 11.4667V5.86668C14 4.74657 14 4.18652 13.782 3.7587C13.5903 3.38237 13.2843 3.07641 12.908 2.88466C12.4802 2.66668 11.9201 2.66668 10.8 2.66668H5.2C4.0799 2.66668 3.51984 2.66668 3.09202 2.88466C2.71569 3.07641 2.40973 3.38237 2.21799 3.7587C2 4.18652 2 4.74657 2 5.86668V11.4667C2 12.5868 2 13.1468 2.21799 13.5747C2.40973 13.951 2.71569 14.2569 3.09202 14.4487C3.51984 14.6667 4.0799 14.6667 5.2 14.6667Z' stroke='%23888888' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.lyteInputCalendar {
border-radius: 6px;
border: 1px solid var(--zcat-datePicker-border-default);
box-shadow: 0px 4px 14px -4px var(--zcat-shadow-bg-default);
overflow: hidden;
}
.calendarPopover lyte-popover-freeze {
background-color: transparent !important;
opacity: 1 !important;
}
.lyteCalCurrentDate {
display: none;
}
/* Time Picker Css */
.lyteTimePickerField {
border: 1px solid var(--zcat-inputField-border-default);
background: var(--zcat-inputField-bg-default);
border-radius: 4px;
position: relative;
width: 200px;
}
lyte-time-picker:hover .lyteTimePickerField,
.lyteTimePickerField:hover {
border-color: var(--zcat-inputField-border-hover);
}
lyte-time-picker.lyteTimePickerInputFocused .lyteTimePickerField,
lyte-time-picker.lyteTimePickerDropdownOpened .lyteTimePickerField,
lyte-time-picker.lyteTimePickerInputFocused:hover .lyteTimePickerField,
lyte-time-picker.lyteTimePickerDropdownOpened:hover .lyteTimePickerField,
.lyteTimePickerInputFocused .lyteTimePickerField,
.lyteTimePickerDropdownOpened .lyteTimePickerField,
.lyteTimePickerInputFocused .lyteTimePickerField:focus-within,
.lyteTimePickerDropdownOpened .lyteTimePickerField:focus-within {
border-color: var(--zcat-inputField-border-active);
}
.lyteTimePickerField:focus-within,.lyteTimePickerField:hover:focus-within{
border-color: var(--zcat-inputField-border-active);
}
.lyteTimePickerDropdownValues{
gap: 0 16px;
margin: 14px 14px 0;
}
.lyteTimePickerInput{
padding: 8px;
height: 36px;
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-default) var(--zcat-font-family-primary);
border-radius: 6px;
color: var(--zcat-datePicker-text-default) !important;
background: var(--zcat-datePicker-bg-default);
}
.lyteTimePickerInput:hover{
background: var(--zcat-inputField-bg-hover);
}
.lyteTimePickerDropdownValues li {
width: 24px;
height: 24px;
border-radius: 50%;
margin: 0 0 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
color: var(--zcat-datePicker-text-default);
background: var(--zcat-datePicker-bg-default);
}
.lyteTimePickerDropdownValues li:hover{
cursor: pointer;
background-color: var(--zcat-datePicker-number-bg-hover);
}
.lyteTimePickerInput::placeholder {
font-family: var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-placeholder);
}
.lyteTimePickerInput:-ms-input-placeholder {
font-family: var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-placeholder);
}
.lyteTimePickerInput::-ms-input-placeholder {
font-family: var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-placeholder);
}
.lytetimePickerButton {
border-radius: 0px 4px 4px 0px;
/* background-color: var(--zcat-datePicker-bg-secondary);
position: relative;
width: 24px;
height: 24px; */
background-color: transparent;
padding: 0;
width: 100%;
display: flex;
height: 100%;
position: absolute;
}
.lytetimePickerButton::after {
content: '';
display: inline-block;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
width: 14px;
height: 14px;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
}
html[data-user-color-scheme="dark"] .lytetimePickerButton::after{
background-image: url('data:image/svg+xml,');
}
/* .lyteTimePickerField:hover .lytetimePickerButton::after{
background-image: url('data:image/svg+xml,');
} */
.lyteTimePickerBtnIcon{
display: none;
}
/* .lyteTimePickerField:hover .lytetimePickerButton::after {
background: url('data:image/svg+xml,');
} */
/* .lyteTimePickerDropdownOpened .lyteTimePickerField .lytetimePickerButton::after,
.lyteTimePickerDropdownOpened
.lyteTimePickerField:hover
.lytetimePickerButton::after,
.lyteTimePickerInputFocused .lyteTimePickerField .lytetimePickerButton::after,
.lyteTimePickerInputFocused
.lyteTimePickerField:hover
.lytetimePickerButton::after {
background: url('data:image/svg+xml,');
} */
.lytetimePickerButton svg {
display: none;
}
lyte-time-picker-dropdown {
background: var(--zcat-datePicker-bg-default);
border: 1px solid var(--zcat-datePicker-border-default);
border-radius: 6px;
box-shadow: 0px 4px 14px -4px var(--zcat-shadow-bg-default);
transform: translateY(1px);
}
lyte-time-picker-dropdown.lyteDropdownTopSide{
transform: translateY(-1px);
}
.lyteTimePickerUl {
padding: 0;
border: 0;
width: 32px;
}
.lyteTimePickerUl:last-of-type{
width: 26px;
overflow-y: hidden;
}
.lyteTimePickerDropdownValues li.lyteTimePickerItemSelected {
color: var(--zcat-datePicker-text-selected) !important;
background-color: var(--zcat-datePicker-number-bg-selected);
}
.lyteTimePickerItemSelected {
background-color: var(--zcat-datePicker-number-bg-selected);
}
.lyteTimePickerDropdownButton {
padding: 10px 14px;
border-top: 1px solid var(--zcat-datePicker-border-line);
}
.lyteTimePickerDropdownButton lyte-button .lyte-button{
padding: 0 6px;
font: var(--zcat-button-font-weight) var(--zcat-button-font-sm) var(--zcat-font-family-primary);
height: 28px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 6px;
background: var(--zcat-btn-fill-bg-primary-default);
color: var(--zcat-btn-fill-text-default);
border: none;
}
.lyteTimePickerDropdownButton lyte-button .lyte-button.lyteDefaultBtn:hover{
background: var(--zcat-btn-fill-bg-primary-hover);
border: none;
}
.zcat-timepicker-splitter {
background-image: url('data:image/svg+xml,');
width: 14px;
height: 14px;
}
.lyteCalTableCell.lyteCalSel.lyteCalToday, .lyteCalTableCell.lyteCalToday.lyteCalSel:hover{
color: var(--zcat-datePicker-text-selected) !important;
}
/* .lyteCalTableCell.lyteCalToday{
color: unset !important;
}
.lyteCalTableCell.lyteCalToday::before{
display: none !important;
} */
.calendarPopover .lytePopover{
background: var(--zcat-datePicker-bg-default);
border-color: var(--zcat-datePicker-border-default);
}
lyte-drop-button.textDrpdwn:hover{
background-color: var(--zcat-inputField-bg-hover);
border-color: var(--zcat-inputField-border-hover)!important
}
.calendarPopover .zcat-color-dark1{
color: var(--zcat-datePicker-text-headings) !important;
}
.lyteCalTableContainer{
border-spacing: 20px 16px;
padding: 0 14px;
}
.lyteInputCalendar.lyteInputCalendarUp {
transform: translateY(-1px);
}
.lyteInputCalendar.lyteInputCalendarDown {
transform: translateY(1px);
}
.lyteSm.lyteTimePickerInput{
padding: 8px 6px;
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-default) var(--zcat-font-family-primary);
height: 28px;
}
.lyteExsm.lyteTimePickerInput{
padding: 8px 4px;
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-small) var(--zcat-font-family-primary);
height: 24px;
font-size: 12px;
}
.lyteDateRPLeftNav,.lyteDateRPRightNav{
top: 20px;
width: 20px;
height: 20px;
}
.lyteDateRangePickerCol1 .lyteDateRPMonthHeader,.lyteDateRangePickerCol2 .lyteDateRPMonthHeader{
padding: 18px 40px 16px 54px;
text-align: unset;
display: flex;
align-items: center;
gap: 14px;
}
.lyteDateRangePickerCol2 .lyteDateRPMonthHeader{
padding: 18px 54px 16px 40px;
}
.monthDD,.yearDD{
max-width: 100%;
width: 50%;
margin: 0;
}
.lytePopRightToOrig,.lytePopLeftToOrig{
transform: translateX(3px);
}
.lytePopBottomToOrig,.lytePopTopToOrig{
transform: translateY(3px);
}
.lyteDateRPTempSelected:last-of-type::after, .lyteDateRPFirstDateSelected:last-of-type::after, .lyteDateRPTempFirstDateSelected:last-of-type::after, .lyteDateRPTempLastDateSelected::after, .lyteDateRPLastDateSelected::after{
display: none;
}
.lyteDateRPTempSelected.lyteDateRPTempLastDateSelected, .lyteDateRPTempLastDateSelected.lyteCalTableCell, .lyteDateRPLastDateSelected.lyteCalTableCell, .lyteDateRPTempLastDateSelected:hover, .lyteDateRPLastDateSelected:hover{
z-index: 5;
}
.lyteDateRPFirstDateSelected:has(+ .lyteDateRPLastDateSelected)::after,.lyteDateRPTempFirstDateSelected:has(+ .lyteDateRPTempLastDateSelected)::after{
width: 50px;
}
/* .zcat-datepicker-box {
border: 1px solid var(--zcat-inputField-border-default);
color: var(--zcat-inputField-text-active);
padding: 8px 28px 8px 8px;
background: var(--zcat-inputField-text-active);
font-family: var(--zcat-font-family-primary);
font-size: 14px;
line-height: 20px;
width: 100%;
height: 36px;
box-sizing: border-box;
border-radius: 5px;
position: relative;
background: transparent;
cursor: pointer;
}
.zcat-datepicker-box:hover {
border-color: var(--zcat-inputField-border-hover);
}
.zcat-datepicker-box.drop-active {
border-color: var(--zcat-inputField-border-active);
}
.zcat-datepicker-box .drop-icon {
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
}
.zcat-datepicker-box .lytePopover,
.timepicker-drop .lytePopover,
.timezone-drop .lytePopover {
border: 1px solid var(--zcat-inputField-border-default);
border-radius: 5px;
box-shadow: none;
}
.zcat-datepicker-box .lytePopover {
width: 180px !important;
}
.zcat-datepicker-box lyte-popover-header,
.zcat-datepicker-box lyte-popover-content,
.timezone-drop lyte-popover-header {
font-size: 14px;
line-height: 20px;
font-weight: 600;
font-family: var(--zcat-font-family-primary);
}
.zcat-datepicker-box lyte-popover-header {
margin: 0 0 10px;
}
.zcat-datepicker-box lyte-popover-footer {
margin: 10px 0 0;
}
.zcat-datepicker-box lyte-popover-content,
.timezone-drop lyte-popover-content {
line-height: 16px;
font-weight: 400;
padding: 0 10px;
}
.zcat-datepicker-box lyte-popover-content:first-child {
padding: 10px 10px 0 !important;
}
.zcat-datepicker-box lyte-popover-content:last-child {
padding: 0 10px 10px !important;
}
.zcat-datepicker-box lyte-popover-content div {
padding: 10px;
border-radius: 4px;
box-sizing: border-box;
}
.zcat-datepicker-box lyte-popover-content div:hover,
.zcat-datepicker-box lyte-popover-footer div:hover {
background: var(--zcat-inputField-bg-active);
border-radius: 4px;
cursor: pointer;
}
.active-dropdown {
color: var(--zcat-body-text-theme);
background-color: var(--zcat-menuList-bg-selected);
}
.border-bottom {
border-bottom: 1px solid var(--zcat-body-border-outerdivider);
}
.border-top {
border-top: 1px solid var(--zcat-body-border-outerdivider);
}
.rotate-270 {
rotate: 270deg;
}
lyte-modal-freeze {
opacity: 0.3 !important;
} */
body:has(.filter-popover .lytePopoverVisible) #datepicker-dropdown zcat-icon svg{
rotate: 180deg;
}
body:not(:has(.filter-popover .lytePopoverVisible)) #datepicker-dropdown zcat-icon svg {
rotate: 0deg;
}
.zcat-overflow-elipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 160px;
}
.exe-history-dropdown {
padding: 8px;
background: var(--zcat-color-white);
font-family: var(--zcat-font-family-primary);
font-size: 14px;
line-height: 20px;
height: 36px;
box-sizing: border-box;
border-radius: 6px;
position: relative;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.border-primary {
border: 1px solid var(--zcat-inputField-border-default);
}
.color-primary {
color: var(--zcat-inputField-text-active);
}
.exe-history-dropdown lyte-popover-header {
margin: 0 0 10px;
}
.exe-history-dropdown lyte-popover-header, .exe-history-dropdown lyte-popover-content, .exe-history-timezone-drop lyte-popover-header {
font-size: 14px;
line-height: 20px;
font-weight: 600;
font-family: var(--zcat-font-family-primary);
}
.border-bottom {
border-bottom: 1px solid var(--zcat-menuList-border-default);
}
.exe-history-dropdown lyte-popover-content, .exe-history-timezone-drop lyte-popover-content {
line-height: 16px;
font-weight: 400;
padding: 0 8px;
}
.exe-history-dropdown lyte-popover-content .div {
padding: 8px;
border-radius: 4px;
box-sizing: border-box;
}
.zcat-text-14 {
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
}
.exe-history-dropdown .lytePopover, .exe-history-timepicker-drop .lytePopover, .exe-history-timezone-drop .lytePopover {
padding: 8px 0;
box-shadow: 0px 4px 14px -4px var(--zcat-shadow-bg-default);
border-radius: 6px;
border: 1px solid var(--zcat-menuList-border-default);
overflow: hidden;
background: var(--zcat-menuList-bg-default);
}
.exe-history-dropdown .lytePopover {
width: 180px !important;
}
.timezone-footer zcat-timezone zcat-dropdown lyte-drop-button span.lyteDropdownLabel{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 110px;
}
.timezone-dropdown lyte-drop-header {
padding: 10px 10px 0;
}
.timezone-dropdown lyte-drop-body {
padding: 6px 6px 4px;
display: block;
max-height: 210px;
overflow-y: auto;
position: relative;
}
.timezone-dropdown lyte-drop-item {
border-radius: 6px;
padding: 10px 28px 10px 10px;
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
color: var(--zcat-color-dark1);
margin-bottom: 2px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
cursor: pointer;
display: block;
text-align: left;
max-width: 100%;
-ms-word-wrap: break-word;
overflow-wrap: break-word;
}
/* body:has(.filter-popover .lytePopoverVisible) .lyteCalTableCell.lyteCalToday, */
body:has(.filter-popover .lytePopoverVisible) .lyteCalTableCell.lyteCalSel.lyteCalToday,
body:has(.filter-popover .lytePopoverVisible) .lyteCalTableCell.lyteCalToday.lyteCalSel:hover {
color: var(--zcat-datePicker-text-active) !important;
border: none;
background: transparent;
}
.exe-history-dropdown lyte-popover-header{
padding: 0 8px 8px;
color: var(--zcat-menuList-text-default);
}
lyte-popover-footer.timezone-footer{
border-top: 1px solid var(--zcat-menuList-border-default);
padding-left: 8px;
}
.exe-history-dropdown.footerPresent .lytePopover{
padding: 8px 0 0;
}
.exe-history-dropdown lyte-popover-content .div:hover{
background: var(--zcat-inputField-bg-active);
border-radius: 4px;
cursor: pointer;
}
.active-dropdown {
color: var(--zcat-body-text-theme);
background-color: var(--zcat-menuList-bg-selected);
}
lyte-popover-footer.timezone-footer:hover{
background: var(--zcat-inputField-bg-hover);
}
.exe-history-dropdown.zcat-invalid{
border-color: var(--zcat-inputField-border-error) !important;
background-color: var(--zcat-inputField-bg-error);
}
.error-dateselect{
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
font-family: var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-error);
padding-top: 2px;
}
lyte-dropdown * {
box-sizing: border-box;
}
lyte-dropdown, lyte-multi-dropdown {
max-width: unset;
position: relative;
}
lyte-drop-button,
lyte-dropdown[lt-prop-type="multiple"] lyte-drop-button {
padding: 8px 26px 8px 8px;
background: var(--zcat-inputField-bg-default);
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-default) var(--zcat-font-family-primary);
color: var( --zcat-inputField-text-active);
border-color: var(--zcat-inputField-border-default);
border-radius: 6px;
/* height: 36px; */
display: flex;
/* align-items: center; */
padding: 0 26px 0 8px;
max-height: 70px;
min-height: 36px;
overflow: auto;
}
lyte-drop-button{
align-items: center;
}
lyte-dropdown::after, lyte-multi-dropdown::after {
content: attr(error-message);
position: absolute;
top: 100%;
left: 0;
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-error);
padding-top: 2px;
}
lyte-dropdown lyte-drop-button:hover,
lyte-dropdown[lt-prop-type="multiple"] lyte-drop-button:hover {
border-color: var(--zcat-inputField-border-hover) !important;
}
lyte-drop-item[selected='true'],
lyte-popover-item[selected='true'] {
background: var(--zcat-menuList-bg-selected);
}
lyte-dropdown .lyteDummyEventContainer:focus lyte-drop-button:hover,
lyte-dropdown .lyteDummyEventContainer:focus lyte-drop-button,
.lyteDropButtonDown, .lyteDropButtonDown:hover {
border-color: var(--zcat-inputField-border-active) !important;
box-shadow: none;
}
lyte-drop-box, lyte-drop-box.lyteDropdownUp {
box-shadow: 0px 4px 14px -4px var(--zcat-shadow-bg-default);
border-radius: 6px;
border: 1px solid var(--zcat-menuList-border-default);
overflow: hidden;
background: var(--zcat-menuList-bg-default);
}
lyte-drop-box.lyteDropdownUp {
transform: translateY(-1px);
}
lyte-drop-box.lyteDropdownDown {
transform: translateY(1px);
}
.lyteDropPlaceholderNormal,
.lyteDropdownLabel {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
margin-right: 0;
}
.lyteCalendarPopup .lyteDropPlaceholderNormal,
.lyteCalendarPopup .lyteDropdownLabel {
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
}
.lyteDropdownUp.lyteDropdownCurve,
.lyteDropdownDown.lyteDropdownCurve {
border-radius: 6px;
box-shadow: 0px 4px 6px 0px var(--zcat-shadow-bg-default);
}
lyte-drop-button.lyteDropButtonUp,
lyte-drop-button.lyteDropButtonDown {
border-radius: 6px;
box-shadow: none;
}
lyte-drop-body, lyte-menu-body {
padding: 8px;
}
lyte-drop-body.lyteExsm, lyte-drop-body.lyteSm {
padding: 8px;
}
lyte-drop-body.lyteEXsm lyte-drop-item, lyte-drop-body.lyteSm lyte-drop-item,
lyte-popover-item {
border-radius: 4px;
padding: 6px 28px 6px 4px;
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
color: var(--zcat-menuList-text-default);
margin-bottom: 2px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
lyte-drop-body.lyteEXsm lyte-drop-item[selected='true']::before,
lyte-drop-body.lyteEXsm lyte-popover-item[selected='true']::before {
top: 9px;
right: 7px;
transform: scale(0.8);
}
lyte-drop-item, lyte-popover-item {
border-radius: 6px;
/* padding: 10px 28px 10px 10px; */
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
color: var(--zcat-menuList-text-default);
margin-bottom: 2px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: flex;
align-items: center;
padding: 8px 28px 8px 4px;
}
.autocomplete-dropbox lyte-drop-item{
display: block;
}
lyte-drop-item.lyteDropdown-disabled{
opacity: 1;
color: var(--zcat-inputField-text-disabled);
}
lyte-drop-item[selected='true']::before,
lyte-popover-item[selected='true']::before {
top: 14px;
left: auto;
/* right: 10px; */
/* background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M10.6668 1.5L4.25016 7.91667L1.3335 5' stroke='%232A65F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); */
width: 16px;
height: 16px;
right: 4px;
background: url('data:image/svg+xml,');
top: 50%;
transform: translateY(-50%);
}
.lyteDropdownSelection, .lyteMultiDropdownCheckBoxTypeDropbox .lyteDropdownSelection {
background: var(--zcat-menuList-bg-hover);
}
lyte-drop-box .lyteArrowTop::before {
border-bottom-color: var(--zcat-color-grey2);
}
lyte-drop-box .lyteArrowTop::after {
border-bottom-color: var(--zcat-color-white);
}
ul.lyteMultipleSelect {
padding: 0;
margin: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.lyteMultipleSelect li {
background: var(--zcat-chips-bg-default);
color: var(--zcat-inputField-text-active);
border: 1px solid var(--zcat-chips-border-default);
border-radius: 6px;
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-exsm) var(--zcat-font-family-primary);
display: inline-block;
position: relative;
cursor: default;
max-width: 100%;
box-sizing: border-box;
margin: 0;
padding: 2px 18px 2px 4px;
height: 24px;
/* display: flex;
align-items: center; */
padding: 2px 14px 2px 4px;
}
lyte-dropdown lyte-icon.dropdown {
top: calc(50% - 1px);
}
lyte-dropdown[lt-prop-type='multisearch'] lyte-drop-button::after,
lyte-dropdown[lt-prop-type='multiple'] lyte-drop-button::after {
top: calc(50% - 1px);
}
lyte-dropdown[lt-prop-type='multisearch'] lyte-drop-button,
lyte-dropdown[lt-prop-type='multiple'] lyte-drop-button {
padding: 8px 26px 8px 8px;
min-height: 36px;
/* height: auto; */
}
.lyteMultipleSelect .lyteCloseIcon {
border-radius: 5px;
width: 16px;
width: 16px;
height: 16px;
top: 50%;
transform: translateY(-50%);
right: 2px;
border-radius: 50%;
}
.lyteMultipleSelect .lyteCloseIcon::before {
content: '';
/* margin-top: -1px; */
/* background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M10.5 3.5L3.5 10.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.5 3.5L10.5 10.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); */
background-position: center;
/* width: 16px;
height: 16px; */
/* background: url('data:image/svg+xml,'); */
background: url('data:image/svg+xml,');
width: 12px;
height: 12px;
}
html[data-user-color-scheme="dark"] .lyteMultipleSelect .lyteCloseIcon::before {
/* background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M10.5 3.5L3.5 10.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.5 3.5L10.5 10.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); */
background: url('data:image/svg+xml,');
}
.lyteMultipleSelect li:hover {
border-color: var(--zcat-chips-border-hover);
background: var(--zcat-chips-bg-hover);
}
.lyteMultipleSelect li:hover .lyteCloseIcon {
background-color: transparent;
}
.lyteMultipleSelect li:hover .lyteCloseIcon::before {
border-radius: 2px;
}
lyte-drop-box:not(.lyteDropBodyCallout) .lyteArrow {
background-color: transparent;
}
.lyteDropPlaceholderMultiple {
color: var(--zcat-inputField-text-placeholder);
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-default) var(--zcat-font-family-primary);
align-self: center;
}
.lyteDropdownNoResult {
padding: 10px 15px 10px;
text-align: center;
color: var(--zcat-menuList-text-light);
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
font-weight: 400;
}
.sm-dropdown-btn lyte-drop-button {
padding: 5px 35px 5px 8px;
}
lyte-dropdown.zcat-invalid lyte-drop-button,
lyte-dropdown.zcat-invalid lyte-drop-button:hover,
lyte-dropdown.zcat-invalid .lyteDummyEventContainer:focus lyte-drop-button,
lyte-dropdown.zcat-invalid
.lyteDummyEventContainer:focus
lyte-drop-button:hover,
lyte-multi-dropdown.zcat-invalid lyte-drop-button,
lyte-multi-dropdown.zcat-invalid lyte-drop-button:hover {
border-color: var(--zcat-inputField-border-error) !important;
background: var(--zcat-inputField-bg-error);
}
lyte-dropdown.zcat-invalid .lyteDummyEventContainer lyte-drop-button::before {
background-color: var(--zcat-inputField-border-error);
}
lyte-dropdown lyte-icon.dropdown,
lyte-dropdown[lt-prop-type='multiple'] lyte-drop-button::after,
lyte-dropdown[lt-prop-type='multisearch'] lyte-drop-button::after {
top: calc(50% - 2px);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%237988A8' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
height: 6px;
/* height: 12px;
width: 12px; */
}
html[data-user-color-scheme="dark"] lyte-dropdown lyte-icon.dropdown{
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%237988A8' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.header-container lyte-drop-button.lyteExsm lyte-icon.dropdown {
/* transform: scale(0.8); */
}
/* Dropdown Sizes */
lyte-drop-box.lyteSm {
padding: 0;
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-small) var(--zcat-font-family-primary);
}
lyte-drop-box.lyteExsm{
padding: 0;
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-exsm) var(--zcat-font-family-primary);
}
lyte-drop-button.lyteSm,
lyte-dropdown[lt-prop-type="multiple"] lyte-drop-button.lyteSm
{
padding: 2px 6px;
padding-right: 22px;
min-height: 28px;
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-small) var(--zcat-font-family-primary);
}
.lyteSm lyte-drop-item,
.lyteSm lyte-popover-item{
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-small) var(--zcat-font-family-primary);
}
lyte-drop-button.textDrpdwn,
.textDrpdwn lyte-drop-item,
.textDrpdwn lyte-popover-item {
background-color: transparent;
border-color: transparent;
color: var(--zcat-pagination-theme);
}
lyte-drop-button.textDrpdwn:hover {
background-color: var(--zcat-inputField-bg-hover);
border-color: var(--zcat-inputField-border-hover)!important
}
lyte-dropdown .lyteDummyEventContainer {
display: flex;
align-items: center;
}
lyte-dropdown .lyteDummyEventContainer:focus lyte-drop-button.textDrpdwn:hover,
lyte-dropdown .lyteDummyEventContainer:focus lyte-drop-button.textDrpdwn {
background-color: var(--zcat-inputField-bg-hover);
border-color: var(--zcat-inputField-border-hover) !important;
}
lyte-drop-button.lyteExsm,
.lyteExsm lyte-drop-item,
.lyteExsm lyte-popover-item,
lyte-dropdown[lt-prop-type="multiple"] lyte-drop-button.lyteExsm
{
min-height: 24px;
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-exsm) var(--zcat-font-family-primary);
padding: 2px 22px 2px 4px;
}
.lyteExsm lyte-drop-item[selected='true']::before {
/* top: 7px; */
}
.lyteSm lyte-drop-item[selected='true']::before {
/* top: 8px; */
}
lyte-drop-button .lyteDropPlaceholderNormal {
font-family: var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-placeholder);
}
lyte-drop-header, lyte-drop-box.lyteSm lyte-drop-header,
lyte-drop-box.lyteExsm lyte-drop-header {
/* padding: 16px 16px 0 16px; */
padding: 8px 8px 0;
}
lyte-dropdown .lyteDropdown-disabled lyte-drop-button,
lyte-dropdown
.lyteDropdown-disabled
.lyteDummyEventContainer:focus
lyte-drop-button:hover,
lyte-dropdown
.lyteDropdown-disabled
.lyteDummyEventContainer:focus
lyte-drop-button {
background: var(--zcat-inputField-bg-disabled) !important;
color: var(--zcat-inputField-text-disabled) !important;
cursor: not-allowed;
border-color: var(--zcat-inputField-border-disabled) !important;
box-shadow: none;
}
lyte-dropdown.lyteDropdownDisabled
.lyteDummyEventContainer:focus
lyte-drop-button:hover,
lyte-dropdown.lyteDropdownDisabled
.lyteDummyEventContainer:focus
lyte-drop-button {
border-color: var(--zcat-inputField-border-disabled) !important;
}
lyte-drop-label, lyte-drop-header h4 {
/* padding: 5px 10px 5px 7px; */
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
font-weight: 600;
font-family: var(--zcat-font-family-primary);
padding: 0 0 6px;
color: var(--zcat-inputField-text-label);
}
lyte-drop-box.lyteDropBodyCallout {
box-shadow: var(--zcat-shadow-bg-default);
border-radius: 6px;
border: 1px solid var(--zcat-inputField-border-default);
}
/* Dropdown scrollbar */
/* lyte-drop-body::-webkit-scrollbar-track
{
border-radius: 10px;
background-color: var(--zcat-color-grey6);
} */
lyte-drop-body::-webkit-scrollbar {
width: 4px;
background-color: var(--zcat-inputField-bg-default);
}
lyte-drop-body::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: var(--zcat-color-dark4);
}
lyte-drop-box .dropdown-menu-btn {
width: 100%;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
font-weight: 500 !important;
color: var(--zcat-btn-ghost-text-primary-default);
border-top: 1px solid var(--zcat-menuList-border-default);
cursor: pointer;
}
lyte-drop-box .dropdown-menu-btn.sm {
height: 36px;
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
}
lyte-drop-box .dropdown-menu-btn.exSm {
height: 36px;
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
}
lyte-drop-box .dropdown-menu-btn:hover,
lyte-drop-box .dropdown-menu-btn.sm:hover,
lyte-drop-box .dropdown-menu-btn.exSm:hover {
background-color: var(var(--zcat-btn-ghost-bg-primary-hover));
}
lyte-drop-item.hide,
lyte-popover-item.hide {
display: none;
}
/* .lyteMultiDropdownCheckBoxTypeDropbox lyte-drop-item[selected='true'], */
.lyteMultiDropdownCheckBoxTypeDropbox .lyteDropdownSelection {
background: transparent;
background: var(--zcat-menuList-bg-hover);
}
.lyteMultiDropSelectedText {
font: 14px/13px var(--zcat-font-family-primary);
}
.lyteMultiDropSelectedText .lyteTextSuffix {
padding-left: 4px;
}
.lyteMultiDropSelectedText .lyteTextNoSpace {
/* display: inline-table; */
}
lyte-drop-box.lyteMultiSelectDropdown {
z-index: 1000;
}
.lyteDropdownText {
padding: 10px 15px 10px;
text-align: center;
color: var(--zcat-menuList-text-light);
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
font-weight: 400;
}
lyte-drop-button input {
color: var(--zcat-color-dark3);
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
font-weight: 400;
}
lyte-dropdown[lt-prop-type='multisearch']
.lyteMultipleSelect
li.lyteMultiselectInput {
background: transparent;
}
lyte-drop-box.lyteMultiSelectDropdown {
z-index: 10000 !important;
}
/* info icon */
.lyteHovercardPopover .lytePopover {
background: var(--zcat-tooltip-bg);
border-radius: 6px;
color: var(--zcat-tooltip-text-primary);
font-weight: 400;
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
text-align: left;
box-shadow: var(--zcat-shadow-bg-default);
word-break: break-word;
overflow: visible;
border: 1px solid var(--zcat-tooltip-border);
}
.lyteHovercardPopover .lytePopoverArrowIcon.lytePopoverArrowBottom {
box-shadow: 1px 1px 0 0 var(--zcat-shadow-bg-default);
}
.lyteHovercardPopover .lytePopoverArrowIcon {
background: var(--zcat-inputField-icon-active);
}
lyte-hovercard-content {
padding: 6px 10px;
}
.tooltip-info-icon{
background-image: url('data:image/svg+xml,');
width: 12px;
height: 12px;
cursor: pointer;
color: var(--zcat-body-text-light);
}
html[data-user-color-scheme="dark"] .tooltip-info-icon{
background: url('data:image/svg+xml,');
}
#lytedropdownfreezelayer{
background: none !important;
opacity: 1 !important;
}
lyte-drop-body::-webkit-scrollbar-thumb {
background: var(--zcat-scrollbar-bg);
}
lyte-dropdown.now-wrap-dropdown ul.lyteMultipleSelect::-webkit-scrollbar-thumb {
background: var(--zcat-scrollbar-bg);
}
lyte-dropdown.now-wrap-dropdown ul.lyteMultipleSelect::-webkit-scrollbar-track {
background: var(--zcat-scrollbar-track-bg);
}
lyte-button .lyte-button.btn-radius-top0{
border-radius: 0 0 6px 6px;
width: 100%;
}
/* May 28 - Kamali - CSS in document file */
.zcat-dropdown-icon-position{
z-index: 1;
left: 8px;
top: 10px;
}
.zcat-dropdown-icon-position-exsm{
left: 4px;
z-index: 1;
}
.zcat-dropdown-icon-position-sm{
top: 7px;
left: 6px;
}
.zcat-dropdown-icon-position-exsm{
top: 5px;
}
.zcat-dropdown-relative-wrapper {
display: flex;
align-items: center;
}
.zcat-dropdown-relative-wrapper lyte-drop-button {
padding-left: 24px;
}
.zcat-dropdown-relative-wrapper lyte-drop-button.lyteSm {
padding-left: 22px;
}
.zcat-dropdown-relative-wrapper lyte-drop-button.lyteExsm {
padding-left: 18px;
}
/* multiple dropdown */
lyte-dropdown[lt-prop-type="multiple"] lyte-drop-button.lyteSm {
min-height: 28px;
/* height: auto; */
/* height: 28px; */
overflow: auto;
max-height: 70px;
/* padding: 0 26px 0 8px; */
padding: 2px 22px 2px 6px; /* must by sk*/
display: flex;
/* align-items: center; */
}
lyte-dropdown[lt-prop-type="multiple"] lyte-drop-button.lyteExsm {
min-height: 24px;
/* height: auto; */
/* height: 24px; */
overflow: auto;
max-height: 70px;
/* padding: 0 26px 0 4px; */
padding: 2px 20px 2px 4px; /* must by sk */
display: flex;
align-items: center;
/* padding: 0 26px 0 4px; */
}
lyte-dropdown[lt-prop-type="multiple"] lyte-drop-button {
min-height: 36px;
overflow: auto;
display: flex;
/* padding: 0 26px 0 8px; */
max-height: 70px;
align-items: flex-start;
padding: 4px 26px 4px 8px;
padding: 2px 26px 2px 8px; /* must by sk*/
display: flex;
/* align-items: center; */
}
lyte-multi-dropdown lyte-dropdown{
max-width: 220px;
}
.zcat-dropdown-relative-wrapper lyte-dropdown[lt-prop-type='multiple'] lyte-drop-button{
padding-left: 24px;
}
.zcat-dropdown-relative-wrapper lyte-dropdown[lt-prop-type='multiple'] lyte-drop-button.lyteSm{
padding-left: 22px;
}
.zcat-dropdown-relative-wrapper lyte-dropdown[lt-prop-type='multiple'] lyte-drop-button.lyteExsm{
padding-left: 18px;
}
/* lyte-multi-dropdown.lyteExsm lyte-dropdown lyte-drop-button, */
lyte-svg ~ lyte-multi-dropdown.lyteExsm lyte-dropdown[lt-prop-type='multiple'] lyte-drop-button {
padding-left: 16px;
}
.zcat-dropdown-icon-top{ /*enable this, If the selected element takes more than 1 row.. */
top: 9px;
}
lyte-multi-dropdown.lyteSm lyte-dropdown[lt-prop-type='multiple'] lyte-drop-button{
/* height: 28px; */
min-height: 28px;
overflow: auto;
max-height: 70px;
padding: 2px 22px 2px 6px;
padding: 0 22px 0 6px;
}
lyte-multi-dropdown.lyteExsm lyte-dropdown[lt-prop-type='multiple'] lyte-drop-button{
/* height: 24px; */
min-height: 24px;
overflow: auto;
max-height: 70px;
padding: 2px 20px 2px 4px;
padding: 0 20px 0 4px;
}
lyte-multi-dropdown lyte-dropdown[lt-prop-type='multiple'] lyte-drop-button{
display: flex;
align-items: center;
padding: 0 26px 0 8px;
max-height: 70px;
min-height: 36px;
overflow: auto;
padding: 0 24px 0 8px;
}
lyte-multi-dropdown.lyteExsm lyte-dropdown[lt-prop-type="multiple"] lyte-drop-button .lyteMultiDropSelectedText,
lyte-multi-dropdown.lyteExsm lyte-dropdown[lt-prop-type='multiple'] lyte-drop-button .lyteDropPlaceholderMultiple,
/* multiple drop */
lyte-dropdown[lt-prop-type="multiple"] lyte-drop-button.lyteExsm .lyteDropPlaceholderMultiple{
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-exsm) var(--zcat-font-family-primary);
display: flex;
}
lyte-multi-dropdown.lyteSm lyte-dropdown[lt-prop-type="multiple"] lyte-drop-button .lyteMultiDropSelectedText,
lyte-multi-dropdown.lyteSm lyte-dropdown[lt-prop-type="multiple"] lyte-drop-button .lyteMultiDropSelectedText{
/* font: var(--zcat-font-12-16) var(--zcat-font-family-primary); */
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-small) var(--zcat-font-family-primary);
display: flex;
}
lyte-multi-dropdown lyte-dropdown[lt-prop-type="multiple"] lyte-drop-button .lyteMultiDropSelectedText{
/* font: var(--zcat-font-14-20) var(--zcat-font-family-primary); */
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-default) var(--zcat-font-family-primary);
}
lyte-drop-button.lyteSm .lyteMultipleSelect li,
lyte-drop-button.lyteExsm .lyteMultipleSelect li,
lyte-multi-dropdown.lyteSm lyte-dropdown lyte-drop-button .lyteMultipleSelect li,
lyte-multi-dropdown.lyteExsm lyte-dropdown lyte-drop-button .lyteMultipleSelect li
{
margin: 0;
padding: 2px 24px 2px 4px;
height: 20px;
display: flex;
align-items: center;
}
lyte-drop-button.lyteExsm .lyteMultipleSelect li,
lyte-multi-dropdown.lyteExsm lyte-dropdown lyte-drop-button .lyteMultipleSelect li {
/* font: var(--zcat-font-12-16) var(--zcat-font-family-primary); */
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-exsm) var(--zcat-font-family-primary);
}
lyte-drop-button.lyteSm .lyteMultipleSelect li,
lyte-drop-button.lyteExsm .lyteMultipleSelect li{
padding-right: 14px;
height: 20px;
}
lyte-drop-button.lyteExsm ul.lyteMultipleSelect,
lyte-drop-button.lyteSm ul.lyteMultipleSelect{
gap: unset;
}
lyte-drop-button ul.lyteMultipleSelect{
gap: unset;
}
lyte-multi-dropdown.lyteSm, lyte-dropdown.lyteSm,
lyte-multi-dropdown.lyteExsm, lyte-dropdown.lyteExsm{
padding: 0;
}
lyte-multi-dropdown .lyteMultipleSelect .lyteMultiDropdownNmoreElem,
lyte-multi-dropdown.lyteSm lyte-dropdown .lyteMultipleSelect li.lyteMultiDropdownNmoreElem,
lyte-multi-dropdown.lyteExsm lyte-dropdown .lyteMultipleSelect li.lyteMultiDropdownNmoreElem{
padding: 2px;
background: var(--zcat-btn-fill-bg-primary-default);
}
/* may 21 */
/* hover related action styles */
.lyteDropButtonDown:hover,
.lyteDropButtonDown:hover
/* Need to handle for Up too */
{
background: var(--zcat-inputField-bg-hover);
border: var(--zcat-inputField-border-hover);
}
.lyteDropButtonDown:hover .zcat-stroke-input-icon path[stroke],
.lyteDropButtonDown:hover .zcat-stroke-input-icon path[stroke]{
stroke: var(--zcat-inputField-icon-placeholder);
}
/* active */
/* .lyteDropButtonDown:focus,
.lyteDropButtonDown:focus {
background: var(--zcat-inputField-bg-active);
border: var(--zcat-inputField-border-active);
color: var(--zcat-inputField-text-active)
} */
.zcat-input-relative-wrapper:focus-within .zcat-stroke-input-icon path[stroke],
.lyteDropButtonDown:focus-within .zcat-stroke-input-icon path[stroke]{
stroke: var(--zcat-inputField-icon-active);
}
/* disabled */
.lyteInputDisabled + lyte-svg .zcat-stroke-input-icon path[stroke],
.zcat-input-relative-wrapper:has(.lyteInputDisabled) .zcat-stroke-input-icon path[stroke],
.lyteDropButtonDown:active .zcat-stroke-input-icon path[stroke]{
stroke: var(--zcat-inputField-icon-disabled);
}
.zcat-invalid .lyteField input{
background: var(--zcat-inputField-bg-error) !important;
}
/* .lyteDropButtonDown {
border: 1px solid var(--zcat-inputField-border-disabled);
}
.lyteDropButtonDown:hover {
border: 1px solid var(--zcat-inputField-border-disabled);
} */
zcat-dropdown lyte-dropdown lyte-icon.dropdown,
lyte-dropdown lyte-icon.dropdown,
lyte-dropdown[lt-prop-type='multiple'] lyte-drop-button::after{
top: calc(50% - 2px);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%237988A8' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
height: 16px;
width: 16px;
top: 50%;
/* left: 92%; */
right: 0;
transform: translate(-50%, -50%);
position: absolute;
background-repeat: no-repeat;
background-position: center;
background-size: 16px 16px;
right: -2px;
transition: transform 0.1s ease;
}
zcat-dropdown lyte-dropdown lyte-drop-button.lyteSm lyte-icon.dropdown,
lyte-dropdown lyte-drop-button.lyteSm lyte-icon.dropdown,
lyte-dropdown[lt-prop-type='multiple'] lyte-drop-button.lyteSm::after{
height: 14px;
width: 14px;
}
zcat-dropdown lyte-dropdown lyte-drop-button.lyteExsm lyte-icon.dropdown,
lyte-dropdown lyte-drop-button.lyteExsm lyte-icon.dropdown,
lyte-dropdown[lt-prop-type='multiple'] lyte-drop-button.lyteExsm::after {
height: 12px;
width: 12px;
}
lyte-multi-dropdown .lyteMultipleSelect .lyteMultiDropdownNmoreElem,
lyte-multi-dropdown.lyteSm lyte-drop-button.lyteSm .lyteMultipleSelect .lyteMultiDropdownNmoreElem,
lyte-multi-dropdown.lyteExsm lyte-drop-button.lyteExsm .lyteMultipleSelect .lyteMultiDropdownNmoreElem{
background: transparent;
color: var(--zcat-link-text-primary-default);
}
lyte-multi-dropdown .lyteMultipleSelect .lyteMultiDropdownNmoreElem:hover,
lyte-multi-dropdown.lyteSm lyte-drop-button.lyteSm .lyteMultipleSelect .lyteMultiDropdownNmoreElem:hover,
lyte-multi-dropdown.lyteExsm lyte-drop-button.lyteExsm .lyteMultipleSelect .lyteMultiDropdownNmoreElem:hover {
border-color: transparent;
background: var(--zcat-btn-ghost-bg-primary-hover);
}
lyte-drop-button.lyteExsm .lyteMultipleSelect .lyteCloseIcon::before,
lyte-drop-button.lyteSm .lyteMultipleSelect .lyteCloseIcon::before,
.lyteMultipleSelect .lyteCloseIcon::before{
height: 12px;
width: 12px;
top: calc(50% - 5px);
right: 1px;
}
.lyteMultipleSelect .lyteCloseIcon{
/* width: 16px; */
}
lyte-drop-button.lyteSm .lyteDropPlaceholderNormal,
lyte-drop-button.lyteSm .lyteDropPlaceholderMultiple,
lyte-multi-dropdown.lyteSm lyte-dropdown[lt-prop-type='multiple'] lyte-drop-button .lyteDropPlaceholderMultiple,
lyte-dropdown[lt-prop-type="multiple"] lyte-drop-button.lyteSm,
lyte-drop-box.lyteSm lyte-drop-item .lyteCheckbox,
.lyteSm lyte-popover-item .lyteCheckbox {
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-small) var(--zcat-font-family-primary);
}
lyte-dropdown[lt-prop-type="multiple"] lyte-drop-button.lyteExsm,
lyte-drop-box.lyteExsm lyte-drop-item .lyteCheckbox,
.lyteExsm lyte-popover-item .lyteCheckbox,
lyte-drop-button.lyteExsm .lyteDropPlaceholderMultiple,
lyte-drop-button.lyteExsm .lyteDropPlaceholderNormal {
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-exsm) var(--zcat-font-family-primary);
}
lyte-drop-button.lyteExsm,
lyte-drop-button, lyte-dropdown[lt-prop-type="multiple"] lyte-drop-button.lyteExsm {
border-radius: 4px;
}
.lyteMultiDropdownCheckBoxTypeDropbox lyte-drop-item,
.lyteMultiDropdownCheckBoxTypeDropbox lyte-popover-item {
display: block;
display: flex;
align-items: center;
}
lyte-drop-box.lyteSm lyte-drop-label, lyte-drop-box.lyteSm lyte-drop-header h4,
lyte-drop-box.lyteExsm lyte-drop-label, lyte-drop-box.lyteExsm lyte-drop-header h4 {
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
font-weight: 600;
padding-bottom: 6px;
}
.lyteMultipleSelect .lyteDropdownVisible{
display: flex;
align-items: center;
}
.lyteMultipleSelect .lyteDropdownVisible,
.lyteMultipleSelect .lyteDropdownVisible lyte-text {
padding-right: 4px;
margin-right: 4px;
}
.lyteMultipleSelect li:hover .lyteCloseIcon{
border-radius: 50%;
padding: 2px;
box-sizing: border-box;
background-color: var(--zcat-btn-grey-bg-hover);
}
.lyteMultipleSelect .lyteCloseIcon::before {
top: 2px;
left: 2px;
}
lyte-checkbox span, lyte-checkbox{
color: var(--zcat-menuList-text-default);
}
.lyteDropdownSelection .lyteCheckbox .lyteCheckBoxDefault span, lyte-checkbox:hover span{
color: var(--zcat-menuList-text-hover);
}
.lyteMultiDropdownCheckBoxTypeDropbox lyte-drop-item[selected='true'],
.lyteMultiDropdownCheckBoxTypeDropbox lyte-popover-item[selected='true']{
background: var(--zcat-menuList-bg-selected);
}
lyte-drop-button.lyteSm .lyteMultipleSelect .lyteCloseIcon,
lyte-drop-button.lyteExsm .lyteMultipleSelect .lyteCloseIcon{
width: 14px;
height: 14px;
}
lyte-drop-button.lyteExsm .lyteMultipleSelect .lyteCloseIcon::before, lyte-drop-button.lyteSm .lyteMultipleSelect .lyteCloseIcon::before{
top: 1px;
left: 1px;
}
lyte-drop-button.lyteSm .lyteMultipleSelect li, lyte-drop-button.lyteExsm .lyteMultipleSelect li, lyte-multi-dropdown.lyteSm lyte-dropdown lyte-drop-button .lyteMultipleSelect li, lyte-multi-dropdown.lyteExsm lyte-dropdown lyte-drop-button .lyteMultipleSelect li {
padding-right: 16px;
}
.lyteMultipleSelect .lyteCloseIcon:hover::before {
opacity: 0.7;
}
.lyteMultiSelectDropdown lyte-drop-item, .lyteMultiSelectDropdown lyte-popover-item{
/* padding: 8px; */
padding: 8px 4px;
}
lyte-drop-box.lyteExsm lyte-drop-body, lyte-drop-box.lyteSm lyte-drop-body{
padding: 8px;
}
lyte-drop-body lyte-drop-item:last-of-type, lyte-drop-body lyte-popover-item:last-of-type {
margin-bottom: 0 !important;
}
lyte-drop-body h4{
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
color: var(--zcat-menuList-text-heading);
}
.menu-lyte-svg-class{
/* width: 16px;
height: 16px; */
display: inline-block;
vertical-align: middle;
}
/* missed disable styles */
.lyteDropdownDisabled .lyteMultipleSelect li{
background: var(--zcat-chips-bg-default);
border: 1px solid var(--zcat-chips-border-default);
pointer-events: none;
color: var(--zcat-inputField-text-disabled);
}
.lyteDropdownDisabled lyte-drop-button:hover
, lyte-dropdown.lyteDropdownDisabled lyte-drop-button:hover, lyte-dropdown[lt-prop-type="multiple"].lyteDropdownDisabled lyte-drop-button:hover
{
cursor: not-allowed;
border-color: var(--zcat-inputField-border-disabled) !important;
}
lyte-dropdown.lyteDropdownDisabled lyte-drop-button .prefixClass {
pointer-events: none;
}
.lyteDropdownDisabled .lyteMultipleSelect .lyteMultiDropdownNmoreElem{
background: transparent;
border: none;
}
lyte-dropdown[lt-prop-type="multiple"] lyte-drop-button.lyteSm,
lyte-dropdown[lt-prop-type="multiple"] lyte-drop-button.lyteExsm,
lyte-dropdown[lt-prop-type="multiple"] lyte-drop-button {
align-items: unset;
}
lyte-search.lyteSm{
padding: 0;
font-size: unset;
}
lyte-drop-button.lyteSm .lyteMultipleSelect .lyteDropdownVisible, lyte-drop-button.lyteSm .lyteMultipleSelect .lyteDropdownVisible lyte-text,
lyte-drop-button.lyteExsm .lyteMultipleSelect .lyteDropdownVisible, lyte-drop-button.lyteExsm .lyteMultipleSelect .lyteDropdownVisible lyte-text{
margin-right: 0;
}
.zcat-dropdown-relative-wrapper lyte-svg.disabled{
cursor: not-allowed;
}
/* ghost dropdown */
.ghost-dropdown lyte-drop-button{
border-color: transparent;
}
.ghost-dropdown lyte-drop-button, .ghost-dropdown lyte-drop-button .lyteDropPlaceholderNormal{
color: var(--zcat-dropdown-ghost-text-primary-default);
}
zcat-dropdown .ghost-dropdown lyte-dropdown lyte-icon.dropdown, lyte-dropdown lyte-icon.dropdown{
background: url('data:image/svg+xml,');
width: 16px;
height: 16px;
}
zcat-dropdown .ghost-dropdown lyte-dropdown.lyteSm lyte-icon.dropdown, lyte-dropdown lyte-icon.dropdown,
zcat-dropdown .ghost-dropdown lyte-dropdown.lyteExsm lyte-icon.dropdown, lyte-dropdown lyte-icon.dropdown,
zcat-dropdown .ghost-dropdown lyte-dropdown lyte-drop-button.lyteExsm lyte-icon.dropdown{
width: 14px;
height: 14px;
}
.ghost-dropdown lyte-dropdown lyte-drop-button:hover{
border-color: transparent !important;
color: var(--zcat-dropdown-ghost-text-primary-hover);
background: var(--zcat-inputField-bg-hover);
}
.ghost-dropdown lyte-dropdown .lyteDummyEventContainer:focus lyte-drop-button:hover,
.ghost-dropdown lyte-dropdown .lyteDummyEventContainer:focus lyte-drop-button {
border-color: transparent !important;
}
.zcat-ghost-dropdown-icon-primary path[stroke]{
stroke: var(--zcat-dropdown-ghost-icon-primary-default);
}
.ghost-dropdown .zcat-dropdown-icon-position-sm{
top: unset;
}
.ghost-dropdown-wrapper lyte-svg.disabled svg,
.ghost-dropdown-wrapper zcat-icon.disabled path[stroke]{
stroke: var(--zcat-btn-ghost-icon-primary-disabled)
}
.ghost-dropdown lyte-dropdown .lyteDropdown-disabled lyte-drop-button{
color: var(--zcat-dropdown-ghost-text-primary-disabled) !important;
background: transparent !important;
border-color: transparent !important;
}
/* Light mode - downArrowIcon */
zcat-dropdown .ghost-dropdown lyte-dropdown lyte-icon.dropdown
/* , lyte-dropdown lyte-icon.dropdown */
{
background: url('data:image/svg+xml,');
}
/* hover */
.ghost-dropdown lyte-dropdown lyte-drop-button:hover lyte-icon.dropdown{
background: url('data:image/svg+xml,');
}
/* opened */
.ghost-dropdown .lyteDropButtonDown lyte-icon.dropdown,
.ghost-dropdown .lyteDropButtonUp lyte-icon.dropdown,
.ghost-dropdown .lyteDropButtonDown:hover lyte-icon.dropdown,
.ghost-dropdown .lyteDropButtonUp:hover lyte-icon.dropdown {
background: url('data:image/svg+xml,');
}
/* disable */
.ghost-dropdown .lyteDropdownDisabled lyte-icon.dropdown {
background: url('data:image/svg+xml,');
}
/* Dark mode - downArrowIcon */
[data-user-color-scheme="dark"] zcat-dropdown .ghost-dropdown lyte-dropdown lyte-icon.dropdown
/* , [data-user-color-scheme="dark"] lyte-dropdown lyte-icon.dropdown */
{
background: url('data:image/svg+xml,');
}
/* hover */
[data-user-color-scheme="dark"] .ghost-dropdown lyte-dropdown lyte-drop-button:hover lyte-icon.dropdown{
background: url('data:image/svg+xml,');
}
/* opened */
[data-user-color-scheme="dark"] .ghost-dropdown .lyteDropButtonDown lyte-icon.dropdown,
[data-user-color-scheme="dark"] .ghost-dropdown .lyteDropButtonUp lyte-icon.dropdown,
[data-user-color-scheme="dark"] .ghost-dropdown .lyteDropButtonDown:hover lyte-icon.dropdown,
[data-user-color-scheme="dark"] .ghost-dropdown .lyteDropButtonUp:hover lyte-icon.dropdown {
background: url('data:image/svg+xml,');
}
[data-user-color-scheme="dark"] .ghost-dropdown lyte-dropdown lyte-drop-button.lyteDropButtonUp lyte-icon.dropdown,
[data-user-color-scheme="dark"] .ghost-dropdown lyte-dropdown lyte-drop-button.lyteDropButtonDown lyte-icon.dropdown,
.ghost-dropdown lyte-dropdown lyte-drop-button.lyteDropButtonUp lyte-icon.dropdown,
.ghost-dropdown lyte-dropdown lyte-drop-button.lyteDropButtonDown lyte-icon.dropdown {
transform: translate(-50%, -50%) rotate(0deg);
transition: none;
}
/* disable */
[data-user-color-scheme="dark"] .ghost-dropdown .lyteDropdownDisabled lyte-icon.dropdown {
background: url('data:image/svg+xml,');
}
.count-highlight{
color: var(--zcat-link-text-primary-default);
padding: 2px;
border-radius: 6px;
}
.count-highlight:hover{
border-color: transparent;
background: var(--zcat-btn-ghost-bg-primary-hover);
}
lyte-multi-dropdown.zcat-w-fc lyte-dropdown {
max-width: 100%;
}
.lyteDropdownDisabled .lyteMultipleSelect li [yield-name="nMoreTag"]{
color: var(--zcat-dropdown-ghost-text-primary-disabled);
}
lyte-drop-button.lyteExsm.lyteDropButtonUp, lyte-drop-button.lyteDropButtonUp, lyte-dropdown[lt-prop-type="multiple"] lyte-drop-button.lyteExsm.lyteDropButtonUp,
lyte-drop-button.lyteExsm.lyteDropButtonDown, lyte-drop-button.lyteDropButtonDown, lyte-dropdown[lt-prop-type="multiple"] lyte-drop-button.lyteExsm.lyteDropButtonDown{
border-radius: 4px;
}
.lyteDropdown-disabled .count-highlight{
color: var(--zcat-dropdown-ghost-text-primary-disabled);
pointer-events: none;
cursor: not-allowed;
}
.dropdown-disabled lyte-svg svg,
.dropdown-disabled zcat-icon path[stroke]{
stroke: var(--zcat-inputField-icon-disabled);
}
.input-field-disabled .input-label{
color: var(--zcat-inputField-text-disabled);
}
.input-field-disabled .zcat-input-label-stroke path[stroke]{
stroke: var(--zcat-inputField-icon-disabled);
}
[data-user-color-scheme="dark"] lyte-drop-item[selected='true']::before,
[data-user-color-scheme="dark"] lyte-popover-item[selected='true']::before{
background: url('data:image/svg+xml,');
}
.checkboxBoxClass lyte-checkbox, .checkboxBoxClass lyte-checkbox {
width: unset;
}
/* July 8 */
lyte-drop-footer {
border-top: unset;
}
lyte-multi-dropdown[lt-prop-type="checkbox"] lyte-dropdown[lt-prop-type="multiple"] lyte-drop-button.lyteSm, lyte-multi-dropdown[lt-prop-type="checkbox"] lyte-dropdown[lt-prop-type="multiple"] lyte-drop-button.lyteExsm, lyte-multi-dropdown[lt-prop-type="checkbox"] lyte-dropdown[lt-prop-type="multiple"] lyte-drop-button{
align-items: center;
}
.lyteMultiDropSelectedText, .lyteMultiDropSelectedText lyte-text{
width: 100%;
}
lyte-multi-dropdown lyte-dropdown {
max-width: 100%;
max-width: unset;
}
lyte-dropdown.zcat-multiple-dropdown lyte-drop-button.lyteSm .lyteMultipleSelect li,
lyte-dropdown.zcat-multiple-dropdown lyte-drop-button.lyteExsm .lyteMultipleSelect li,
lyte-dropdown.zcat-multiple-dropdown .lyteMultipleSelect li {
display: inline-flex;
}
lyte-multi-dropdown .lyteMultipleSelect li,
lyte-multi-dropdown.lyteSm lyte-dropdown lyte-drop-button .lyteMultipleSelect li,
lyte-multi-dropdown[lt-prop-type="checkbox"] lyte-drop-button.lyteSm .lyteMultipleSelect li,
lyte-multi-dropdown.lyteExsm lyte-dropdown lyte-drop-button .lyteMultipleSelect li,
lyte-multi-dropdown[lt-prop-type="checkbox"] lyte-drop-button.lyteExsm .lyteMultipleSelect li{
display: flex;
align-items: center;
margin: 2px 4px 2px 0;
}
lyte-multi-dropdown.lyteExsm lyte-dropdown lyte-drop-button .lyteMultipleSelect li,
lyte-multi-dropdown[lt-prop-type="checkbox"] lyte-drop-button.lyteExsm .lyteMultipleSelect li{
margin: 0 4px 0 0;
}
lyte-multi-dropdown[lt-prop-type="checkbox"] lyte-drop-button{
display: inline-block;
height: 36px;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
display: flex;
align-items: center;
}
/* checkbox --> placeholder */
lyte-multi-dropdown[lt-prop-type="checkbox"] .lyteDropPlaceholderMultiple {
width: 100%;
display: flex;
}
/* with value */
lyte-multi-dropdown[lt-prop-type="checkbox"] lyte-drop-button ul.lyteMultipleSelect {
width: 100%;
display: flex;
flex-wrap: unset;
gap: unset;
}
lyte-multi-dropdown.zcat-default-checkbox-dropdown[lt-prop-type="checkbox"] .lyteMultiDropSelectedText {
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: flex;
align-items: center;
}
lyte-dropdown.zcat-multiple-dropdown.zcat-w-fc .lyteMultipleSelect li,
lyte-dropdown.zcat-multiple-dropdown.zcat-w-fc lyte-drop-button.lyteSm .lyteMultipleSelect li,
lyte-dropdown.zcat-multiple-dropdown.zcat-w-fc lyte-drop-button.lyteExsm .lyteMultipleSelect li{
margin: 0;
}
lyte-multi-dropdown.zcat-default-checkbox-dropdown[lt-prop-type="checkbox"] .lyteMultiDropSelectedText lyte-text{
display: flex;
}
lyte-multi-dropdown[lt-prop-type="checkbox"] lyte-drop-button.lyteSm {
height: 28px;
}
lyte-multi-dropdown[lt-prop-type="checkbox"] lyte-drop-button.lyteExsm {
height: 24px;
}
.ghost-dropdown lyte-dropdown lyte-drop-button {
border-color: transparent !important;
background: transparent;
}
.ghost-dropdown lyte-dropdown lyte-icon.dropdown{
opacity: unset;
}
lyte-multi-dropdown.lyteExsm lyte-dropdown[lt-prop-type='multiple'] lyte-drop-button .lyteDropPlaceholderMultiple,
lyte-multi-dropdown[lt-prop-type="checkbox"] lyte-drop-button.lyteExsm ul.lyteMultipleSelect,
lyte-multi-dropdown.zcat-default-checkbox-dropdown.lyteExsm[lt-prop-type="checkbox"] .lyteMultiDropSelectedText {
gap: unset;
flex-wrap: unset;
}
lyte-dropdown[lt-prop-type='multiple'] lyte-drop-button.lyteDropButtonDown::after,
lyte-dropdown[lt-prop-type='multiple'] lyte-drop-button.lyteDropButtonUp::after,
zcat-dropdown lyte-dropdown lyte-drop-button.lyteDropButtonDown lyte-icon.dropdown, lyte-dropdown lyte-drop-button.lyteDropButtonDown lyte-icon.dropdown,
zcat-dropdown lyte-dropdown lyte-drop-button.lyteDropButtonUp lyte-icon.dropdown, lyte-dropdown lyte-drop-button.lyteDropButtonUp lyte-icon.dropdown {
transform: translate(-50%, -50%) rotate(180deg);
transition: transform 0.1s ease;
}
lyte-dropdown.zcat-multiple-dropdown lyte-drop-button.lyteExsm ul.lyteMultipleSelect, lyte-drop-button.lyteSm ul.lyteMultipleSelect,
lyte-dropdown.zcat-multiple-dropdown lyte-drop-button ul.lyteMultipleSelect {
gap: 4px;
}
zcat-dropdown lyte-dropdown {
width: 100%; /* default width */
}
/* menu list - yet to add in common place */
.lyteDropdownSelection lyte-svg svg.zcat-stroke-icon-active, .lyteDropdownSelection lyte-svg svg.zcat-ghost-dropdown-icon-primary,
.lyteDropdownSelection .zcat-stroke-icon-active path[stroke], .lyteDropdownSelection .zcat-ghost-dropdown-icon-primary path[stroke]
{
stroke: var(--zcat-menuList-icon-hover);
}
lyte-drop-box.lyteExsm lyte-drop-body.zcat-pt-6, lyte-drop-box.lyteSm lyte-drop-body.zcat-pt-6{
padding-top: 6px;
}
lyte-drop-box.lyteExsm lyte-drop-body.zcat-pb-6, lyte-drop-box.lyteSm lyte-drop-body.zcat-pb-6{
padding-bottom: 6px;
}
.lyteMultiSelectDropdown lyte-drop-body.lyteExsm lyte-drop-item,
.lyteMultiSelectDropdown lyte-drop-body.lyteSm lyte-drop-item,
.lyteMultiSelectDropdown lyte-drop-body.lyteExsm lyte-popover-item,
.lyteMultiSelectDropdown lyte-drop-body.lyteSm lyte-popover-item {
padding: 6px 4px 6px 4px;
}
/* tooltip */
.lyteMultiDropdownTagHovercard.lyteHovercardPopover .lytePopover{
border: 1px solid var(--zcat-tooltip-border);
}
lyte-hovercard-content{
background: var(--zcat-tooltip-bg);
border-radius: 6px;
/* box-shadow: 2px 2px 10px 12px var(--zcat-shadow-bg-default); */
/* border: 1px solid var(--zcat-tooltip-border); */
}
.lyteMultiDropdownTagHovercard.lyteHovercardPopover .lytePopover{
border: 1px solid var(--zcat-tooltip-border);
background: var(--zcat-tooltip-bg);
}
.lyteMultiDropdownTagHovercard.lyteHovercardPopover .lytePopoverArrowIcon{
background: var(--zcat-tooltip-bg);
}
/* dropdown - menu list icon */
.zcat-stroke-icon-active path[stroke]{
stroke: var(--zcat-menuList-icon-active);
}
.zcat-stroke-icon-tooltip path[stroke]{
stroke: var(--zcat-body-icons-static-primary);
}
.zcat-chip-checkbox-dropdown{
max-width: 100%;
}
/* removable - checkbox's defaul */
lyte-drop-body .lyteCheckBoxDefault::before{
margin-right: 4px;
}
lyte-drop-box.cxDropbox{
background: var(--zcat-menuList-bg-default);
border: 1px solid var(--zcat-menuList-border-default);
}
.lyteHovercardPopover.popoverWrapper{
z-index: 10000;
}
.zcat-empty-template {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.zcat-empty-template .title {
font: var(--zcat-font-16-20) var(--zcat-font-family-primary);
color: var(--zcat-body-text-primary);
margin: 20px 0 10px 0;
font-weight: 600;
}
.zcat-empty-template .desc {
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
color: var(--zcat-body-text-primary);
margin: 0 0 24px 0;
width: 70%;
}
lyte-fileupload * {
box-sizing: border-box;
}
lyte-file-message,
lyte-fileupload,
lyte-file-select-area {
position: relative;
font-family: var(--zcat-font-family-primary);
font-weight: 400;
display: block;
}
lyte-fileupload::after {
content: attr(error-message);
position: absolute;
top: 100%;
left: 0;
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-error);
padding-top: 1px;
}
.lyteInputFileUpd {
display: flex;
align-items: center;
/* justify-content: space-between; */
gap: 4px;
height: 36px;
min-width: 300px;
padding-left: 8px;
background: var(--zcat-inputField-bg-default);
border: 1px solid var(--zcat-inputField-border-default);
border-radius: 6px;
cursor: pointer;
padding: 8px;
}
.lyteInputFileUpd:hover {
border: 1px solid var(--zcat-inputField-border-hover);
background: var(--zcat-inputField-bg-hover);
}
.lyteInputFileUpd:hover .sm-upload-icon {
/* background-image: url('data:image/svg+xml,'); */
width: 14px;
height: 14px;
}
.lyteFileUpdMsgWrap {
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
box-sizing: border-box;
cursor: pointer;
outline: none;
background: var(--zcat-inputField-bg-default);
text-align: center;
color: var(--zcat-inputField-text-active);
}
.lyteFileUpdBoxType .lyteFileUpdMsgWrap {
/* border-radius: 10px; */
/* padding: 30px; */
/* border: 1px dashed #b8bdbe; */
}
.lyteFileUpdBoxType .lyteFileUpdMsgWrap:hover {
border: 1px dashed #969b9c;
}
.fileDragEnter.lyteFileUpdInputType .lyteFileUpdMsgWrap,
.fileDragEnter.lyteFileUpdBoxType .lyteFileUpdMsgWrap {
border: 1px dashed #6eb0cb;
background: #fafcff;
}
.lyteFileUpdMsg {
position: relative;
line-height: 21px;
}
.fileDragEnter .lyteFileUpdMsg {
opacity: 0.7;
}
.lyteFileUpdBoxType .lyteFileUpdMsg {
padding-left: 0px;
}
.lyteFileUpdBoxType .lyteFileUpdMsg::before {
content: '';
background-image: url(../../images/sprite_lyte.svg);
background-position: -155px -203px;
width: 30px;
height: 21px;
display: inline-block;
position: absolute;
left: 0;
}
.lyteFileUpdThumb {
display: block;
width: 23px;
height: 23px;
border-radius: 50%;
border: 1px solid #aaa;
}
.multiFileupload .lyteFileUpdList {
/* margin-top: 15px; */
}
.multiFileupload .lyteFileUpdListFile {
margin-bottom: 10px;
}
.lyteFileUpdListFile {
position: relative;
display: flex;
padding: 0;
background: none;
border: none;
border-radius: 0;
align-items: center;
}
.lyteFileUpdListFile.error {
background: #ffeeee;
border: 1px solid #f8dcdc;
}
.lyteFileUpdTypePreview {
margin-right: 10px;
}
.lyteFileUpdTypeIcon::after {
content: '';
background-image: url(../../images/sprite_lyte.svg);
display: block;
background-position: -117px -198px;
width: 21px;
height: 26px;
}
.lyteFileUpdTypeIcon.pdf::after {
background-position: -8px -198px;
}
.lyteFileUpdTypeIcon.video::after {
background-position: -35px -198px;
}
.lyteFileUpdTypeIcon.image::after {
background-position: -63px -198px;
}
.lyteFileUpdTypeIcon.zip::after {
background-position: -90px -198px;
}
.lyteFileUpdFileName {
color: var(--zcat-inputField-text-active);
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
margin-right: 10px;
max-width: calc(100% - 300px);
white-space: nowrap;
}
.lyteFileUpdFileSize {
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
color: #666;
margin-right: auto;
white-space: nowrap;
}
.lyteFileUpdFileStatus {
display: flex;
margin-right: 10px;
}
.lyteFileUpdProgressBar {
height: 5px;
width: 140px;
background: #dfecfb;
flex-grow: 1;
border-radius: 5px;
}
.lyteFileUpdProgressFill {
height: 5px;
background: #4ea2f7;
width: 0;
border-radius: 5px;
transition: width 0.1s linear;
}
lyte-file-retry {
display: inline-flex;
margin-right: 10px;
}
.lyteFileUpdFailMsg {
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
color: #f00;
margin-right: 10px;
text-transform: capitalize;
cursor: default;
}
.lyteFileUpdRetryMsg {
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
color: #555;
text-transform: capitalize;
text-decoration: underline;
cursor: pointer;
}
.lyteFileUpdRetryMsg:hover {
color: #333;
}
/* lyte-file-close {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M10.5 3.5L3.5 10.5' stroke='%234D618A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.5 3.5L10.5 10.5' stroke='%234D618A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-position: -2px;
width: 10px;
height: 10px;
opacity: 0.7;
} */
.lyteFileUpdListFile.success lyte-file-close {
visibility: hidden;
}
.lyteFileUpdListFile.success:hover lyte-file-close {
visibility: visible;
}
lyte-file-close:hover {
opacity: 1;
}
.lyteFileUpdBoxType #lyteFileUpdSelectedFile {
background: #ddd;
border: 1px solid #ccc;
}
.lyteFileUpdInputType .lyteFileUpdMsgWrap {
padding: 7px 10px;
border-radius: 3px;
border: 1px dashed #c7c7c7;
background: #fff;
text-align: left;
}
.lyteFileUpdInputType .lyteFileUpdMsgWrap:hover {
border: 1px dashed #969b9c;
}
.lyteFileUpdInputType .lyteFileUpdListFile {
padding: 7px 10px;
border: 1px dashed #c7c7c7;
border-radius: 3px;
background: #fff;
}
.lyteFileUpdInputType .lyteFileUpdListFile.error {
background: #ffeeee;
border: 1px dashed #f8dcdc;
}
.lyteFileUpdInputType .lyteFileUpdFileName {
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
max-width: calc(100% - 250px);
}
.lyteFileUpdFileName {
display: block;
width: 100%;
margin-bottom: 5px;
max-width: calc(100% - 30px);
}
.lyteFileUpdFileName::before {
content: ' File Name : ';
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-active);
}
.lyteFileUpdFileSize::before {
content: ' File Size : ';
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
color: var(--zcat-color-dark2);
}
.lyteFileUpdFileSize {
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
color: var(--zcat-color-dark2);
}
.lyteFileUpdInputType lyte-file-close {
background-position: -324px -162px;
width: 10px;
height: 10px;
}
.lyteFileUpdBtnType .lyteFileUpdMsgWrap {
width: 30px;
height: 30px;
background: #4ea2f7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.lyteFileUpdBtnType .lyteFileUpdMsgWrap::after {
content: '';
background-image: url(../../images/sprite_lyte.svg);
background-position: -197px -205px;
width: 15px;
height: 19px;
display: block;
}
.lyteFileUpdListFile.error .lyteFileUpdFileStatus,
.lyteFileUpdListFile.success .lyteFileUpdFileStatus,
.lyteFileUpdBtnType .lyteFileUpdMsg,
.fileuploadInput,
.lyteFileUpdInputType .lyteFileUpdTypePreview,
.lyteFileUpdBoxType .lyteFileUpdMsgWrap.lyteHide,
lyte-fileupload .lyteHide {
display: none;
}
.lyteFileUpdDisabled {
pointer-events: none;
opacity: 0.6;
}
/* file upload */
.lyteuploadedfilename {
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-active);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: calc(100% - 20px);
}
.lyteuploadedfilesize {
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
color: var(--zcat-body-text-secondary);
padding-top: 5px;
}
/* .sm-upload-block {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 100%;
background-color: var(--zcat-inputField-bg-hover);
border-radius: 0px 5px 5px 0px;
}
.sm-upload-icon {
background-image: url('data:image/svg+xml,');
width: 14px;
height: 14px;
}
.lg-upload-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M24.5 17.5V22.1667C24.5 22.7855 24.2542 23.379 23.8166 23.8166C23.379 24.2542 22.7855 24.5 22.1667 24.5H5.83333C5.21449 24.5 4.621 24.2542 4.18342 23.8166C3.74583 23.379 3.5 22.7855 3.5 22.1667V17.5' stroke='%234D618A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19.8334 9.33333L14 3.5L8.16669 9.33333' stroke='%234D618A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 3.5V17.5' stroke='%234D618A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
width: 28px;
height: 28px;
} */
.zcat-invalid .lyteInputFileUpd,
.zcat-invalid .lyteInputFileUpd:hover,
.zcat-invalid .lyteFileUpd,
.zcat-invalid .lyteFileUpd:hover {
border-color: var(--zcat-inputField-border-error);
background: var(--zcat-inputField-bg-error) !important;
}
.lyteFileUpdBoxType .lyteFileUpdMsgWrap {
background: var(--zcat-linkbox-bg-default);
border: 1px solid var(--zcat-linkbox-border-default);
padding: 48px 30px 20px 30px;
border-radius: 6px;
}
.lyteFileUpdBoxType .lyteFileUpdMsgWrap:hover {
background: var(--zcat-color-grey5);
border: 1px dashed var(--zcat-color-primary);
}
.lyteFileUpdBoxType .lyteFileUpdMsg::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M24.5 17.5V22.1667C24.5 22.7855 24.2542 23.379 23.8166 23.8166C23.379 24.2542 22.7855 24.5 22.1667 24.5H5.83333C5.21449 24.5 4.621 24.2542 4.18342 23.8166C3.74583 23.379 3.5 22.7855 3.5 22.1667V17.5' stroke='%234D618A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19.8334 9.33333L14 3.5L8.16669 9.33333' stroke='%234D618A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 3.5V17.5' stroke='%234D618A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
width: 28px;
height: 23px;
background-position: center;
left: 50%;
transform: translateX(-50%);
top: -30px;
}
.lyteFileUpdMsg {
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
color: var(--zcat-color-dark2);
}
.lyteFileUpdBoxType #lyteFileUpdSelectedFile {
background: var(--zcat-color-grey6);
border: 1px solid var(--zcat-color-grey1);
}
.lyteFileUpdListFile {
background: var(--zcat-color-grey6);
border: 1px solid var(--zcat-color-grey1);
padding: 15px;
border-radius: 6px;
}
.lyteFileUpdTypePreview {
display: none;
}
.lyteFileUpdListFile.success lyte-file-close {
visibility: visible;
}
.lyteFileUpdListFile {
display: flex;
flex-direction: column;
align-items: start;
}
.lyteFileUpdFileSize + lyte-file-close,
.lyteFileUpdFileStatus + lyte-file-close {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
/* Sept 3 */
/* old */
.lyteFileUploadedList {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid var(--zcat-card-border-default);
padding: 15px;
border-radius: 6px;
flex-direction: column;
}
.lyteFileUpd {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--zcat-inputField-bg-default);
border: 1px solid var(--zcat-inputField-border-default);
padding: 20px 30px;
border-radius: 6px;
cursor: pointer;
}
.lyteFileUpd:hover {
background: var(--zcat-inputField-bg-hover);
border: 1px solid var(--zcat-inputField-border-hover);
}
/* new */
.lyteInputFileUpd .placeholder, .lyteFileUpd .placeholder{
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-default) var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-placeholder);
}
.lyteFileUpdList .lyteInputFileUpd{
justify-content: space-between;
}
.lyteFileUploadedList .lyteuploadedfilename{
max-width: unset;
}
lyte-file-close {
background-image: url('data:image/svg+xml,');
width: 12px;
height: 12px;
background-repeat: no-repeat;
background-position: unset;
}
html[data-user-color-scheme=dark] lyte-file-close {
background-image: url('data:image/svg+xml,');
}
.multi-file-upload .multiFileupload .lyteFileUpdList {
margin-top: 6px;
}
.multi-file-upload .lyteFileUpdList{
display: flex;
flex-direction: column;
}
.multi-file-upload .fileUploaded .lyteFileUpdList{
border: 1px solid var(--zcat-inputField-border-default);
border-radius: 6px;
}
.multi-file-upload .fileUploaded .lyteFileUpdList .lyteInputFileUpd {
justify-content: space-between;
border: none;
border-bottom: 1px solid var(--zcat-inputField-border-default);
border-radius: 0;
}
.multi-file-upload .fileUploaded .lyteFileUpdList .lyteInputFileUpd:only-child {
border-radius: 6px;
border-bottom: none;
}
.multi-file-upload .fileUploaded .lyteFileUpdList .lyteInputFileUpd:first-child:not(:only-child) {
border-radius: 6px 6px 0 0;
}
.multi-file-upload .fileUploaded .lyteFileUpdList .lyteInputFileUpd:last-child:not(:only-child) {
border-bottom: none;
border-radius: 0 0 6px 6px;
}
table.zcat-label-value-pairs {
width: 100%;
border: none;
border-spacing: 0 10px;
}
table.zcat-label-value-pairs td,
th {
border: none;
text-align: left;
}
table.zcat-label-value-pairs td:nth-child(2),
table.zcat-label-value-pairs td:nth-child(5),
table.zcat-label-value-pairs td:nth-child(8) {
width: 30px;
text-align: center;
}
table.zcat-label-value-pairs td:nth-child(3),
table.zcat-label-value-pairs td:nth-child(6) {
padding-right: 20px;
}
table.zcat-label-value-pairs .key {
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
color: var(--zcat-body-text-secondary);
}
table.zcat-label-value-pairs .value {
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
color: var(--zcat-body-text-primary);
}
.zcat-key-value-pair-box.invalid {
padding-bottom: 20px;
}
.zcat-layout-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.zcat-layout-header .zcat-left-alignment,
.zcat-layout-header .zcat-center-alignment,
.zcat-layout-header .zcat-right-alignment {
display: flex;
align-items: center;
gap: 14px;
}
.zcat-layout-header .zcat-left-alignment {
justify-content: left;
}
.zcat-layout-header .zcat-center-alignment {
justify-content: center;
}
.zcat-layout-header .zcat-right-alignment {
justify-content: right;
}
.zcat-layout-header .zcat-center-alignment .zcat-tabs {
height: 36px;
display: flex;
padding: 4px;
background: var(--zcat-color-white);
border-radius: 96px;
border: 1px solid var(--zcat-color-grey2);
background: var(--zcat-color-primarylight);
}
.zcat-layout-header .zcat-center-alignment .zcat-tabs .tab {
display: flex;
align-items: center;
font-size: 14px;
font-family: var(--zcat-font-family-primary);
color: var(--zcat-color-dark1);
padding: 4px 8px;
cursor: pointer;
}
.zcat-layout-header .zcat-center-alignment .zcat-tabs .tab:hover {
color: var(--zcat-color-primary) !important;
}
.zcat-layout-header .zcat-center-alignment .zcat-tabs .tab.active-tab,
.zcat-layout-header .zcat-center-alignment .zcat-tabs .tab.active-tab:hover {
background-color: var(--zcat-color-white);
border-radius: 50px;
color: var(--zcat-color-primary) !important;
border-color: transparent;
}
lyte-loader * {
box-sizing: border-box;
}
/* spinner loader */
.zcat-loader-spinner .ltexitdiv,
.zcat-loader-spinner .ltLoaderProgressBar,
.zcat-loader-spinner .lyteLoaderProgressMessage,
.zcat-loader-spinner .lyteLoaderTimeoutMessage {
display: none;
}
.zcat-loader-spinner .ltLoaderSpin {
width: 40px;
height: 40px;
border-top: 3px solid var(--zcat-loader-content-primary);
border-right: 3px solid var(--zcat-loader-content-primary);
border-bottom: 3px solid var(--zcat-loader-progress-primary);
border-left: 3px solid var(--zcat-loader-progress-primary);
}
.lyteLoaderFreeze {
opacity: 0 !important;
}
/* progress loader */
.zcat-loader-progress .ltexitdiv,
.zcat-loader-progress .ltspindiv,
.zcat-loader-progress .lyteLoaderProgressMessage,
.zcat-loader-progress .lyteLoaderTimeoutMessage {
display: none;
}
.zcat-loader-progress .ltLoaderProgressBar.indefinite {
height: 4px;
background: linear-gradient(
to right,
var(--zcat-loader-progress-primary),
var(--zcat-loader-progress-primary)
);
background-color: var(--zcat-loader-progress-primary);
background-size: 20%;
background-repeat: repeat-y;
background-position: -25% 0;
border-radius: 10px;
}
.zcat-loader-progress .ltLoaderProgressBar.definite {
background-color: var(--zcat-loader-progress-primary);
}
.skeleton-loader {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.skeleton-loader-row {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.skeleton-loader-column {
animation: placeHolderShimmer 1.25s infinite linear forwards;
background: linear-gradient(to right, var(--zcat-loader-content-primary) 8%, var(--zcat-loader-content-secondary) 18%, var(--zcat-loader-content-primary) 33%);
background-size: 800px 104px;
position: relative;
height: 9px;
width: 23%;
margin: 0 1%;
border-radius: 50px;
}
.skeleton-loader-column:first-child {
margin-left: 0;
}
.skeleton-loader-column:last-child {
margin-right: 0;
}
@keyframes placeHolderShimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
.spin-loader {
width: 16px;
aspect-ratio: 1;
display: grid;
border-radius: 50%;
background:
linear-gradient(
0deg,
color-mix(in srgb, var(--zcat-loader-round-primary) 50%, transparent) 30%,
#0000 0 70%,
var(--zcat-loader-round-primary) 0
) 50%/8% 100%,
linear-gradient(
90deg,
color-mix(in srgb, var(--zcat-loader-round-primary) 25%, transparent) 30%,
#0000 0 70%,
color-mix(in srgb, var(--zcat-loader-round-primary) 75%, transparent) 0
) 50%/100% 8%;
background-repeat: no-repeat;
animation: spinanimation 1s infinite steps(12);
}
.spin-loader::before,
.spin-loader::after {
content: "";
grid-area: 1/1;
border-radius: 50%;
background: inherit;
opacity: 0.915;
transform: rotate(30deg);
}
.spin-loader::after {
opacity: 0.83;
transform: rotate(60deg);
}
@keyframes spinanimation {
100% {transform: rotate(1turn)}
}
.progress-loader {
height: 4px;
width: 100%;
--c:no-repeat linear-gradient(var(--zcat-loader-progress-primary) 0 0);
background: var(--c),var(--c),var(--zcat-loader-progress-secondary);
background-size: 60% 100%;
animation: progressanimation 3s infinite;
border-radius: 40px;
}
@keyframes progressanimation {
0% {background-position:-150% 0,-150% 0}
66% {background-position: 250% 0,-150% 0}
100% {background-position: 250% 0, 250% 0}
}
lyte-menu-box * {
box-sizing: border-box;
}
lyte-menu-box {
font-family: var(--zcat-font-family-primary);
box-shadow: 0px 4px 6px -2px var(--zcat-shadow-bg-default);
border-radius: 4px;
}
lyte-menu-body * {
box-sizing: border-box;
margin: 0;
}
lyte-menu-body {
background: var(--zcat-menuList-bg-default);
border: 1px solid var(--zcat-menuList-border-default);
border-radius: 4px;
padding: 5px 0;
}
.lyteMenuSelection {
background: var(--zcat-menuList-bg-hover);
}
lyte-menu-box .lyteArrow {
background: var(--zcat-menuList-bg-default);
}
lyte-menu-box .lyteArrow.lyteArrowTop {
box-shadow: none;
top: -5px;
border-top: 1px solid var(--zcat-menuList-border-default);
border-left: 1px solid var(--zcat-menuList-border-default);
}
lyte-menu-box .lyteArrow.lyteArrowBottom {
box-shadow: var(--zcat-shadow-light-all);
bottom: -4px;
}
lyte-menu-box .lyteArrow.lyteArrowLeft {
box-shadow: var(--zcat-shadow-light-all);
left: -4px;
}
lyte-menu-box .lyteArrow.lyteArrowRight {
box-shadow: var(--zcat-shadow-light-all);
right: -4px;
left: unset;
}
.lytemenufreezelayer {
opacity: 0;
}
lyte-menu-item {
padding: 8px 15px;
margin: 0 5px;
border-radius: 4px;
color: var(--zcat-menuList-text-default);
}
lyte-wormhole * {
box-sizing: border-box;
}
.lyteModal {
background: var(--zcat-popup-bg);
border: 1px solid var(--zcat-popup-border);
box-shadow: 0 0px 4px 0px var(--zcat-shadow-bg-default);
border-radius: 10px;
min-width: 450px;
margin-top: -24px;
margin-left: -27px;
}
lyte-modal-header {
color: var(--zcat-body-text-primary);
font-family: var(--zcat-font-family-primary);
padding: 25px;
font-weight: 600;
}
/* lyte-modal-content {
padding: 8px 25px;
} */
lyte-modal-footer {
padding: 15px 25px 25px;
}
lyte-modal-footer lyte-button {
margin-left: 0px;
}
lyte-modal-freeze {
background: var(--zcat-popup-bg-blur);
opacity: unset !important;
transition: none;
}
lyte-modal-content {
padding: 8px 24px;
max-height: calc(100vh - 200px) !important;
overflow-y: auto;
color: var(--zcat-body-text-primary);
}
lyte-modal-content > * {
display: block;
}
form lyte-modal-footer {
padding: 0;
}
form lyte-modal-footer lyte-button {
margin-left: 0px;
}
/* lyte-modal-freeze {
background: var(--zcat-popup-bg-blur);
/* opacity: 0.3;
transition: none;
} */
form lyte-modal-header {
font-family: var(--zcat-font-family-primary);
padding: 0;
position: relative;
z-index: 1;
}
form lyte-modal-header .zcat-form-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 24px 16px;
width: 100%;
background: var(--zcat-popup-bg);
border-radius: 10px 10px 0 0;
}
form lyte-modal-header .zcat-form-header .zcat-left-alignment {
/* display: flex;
align-items: center;
justify-content: left;
gap: 10px; */
}
form lyte-modal-header .zcat-form-header .zcat-right-alignment {
display: flex;
align-items: center;
justify-content: right;
gap: 10px;
}
form lyte-modal-header .zcat-form-header .three-dots-btn {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 28px;
background: var(--zcat-color-grey2);
border: 1px solid var(--zcat-color-grey1);
border-radius: 6px;
cursor: pointer;
}
form lyte-modal-header .zcat-form-header .three-dots-btn:hover {
background: var(--zcat-color-primarylight);
border-color: var(--zcat-color-grey1);
}
form lyte-modal-header .zcat-form-header-tabs {
width: 100%;
height: 28px;
display: flex;
gap: 5px;
padding: 0 16px;
background: var(--zcat-color-white);
border-bottom: 1px solid var(--zcat-color-primarylight);
}
form lyte-modal-header .zcat-form-header-tabs div {
font-size: 14px;
font-family: var(--zcat-font-family-primary);
color: var(--zcat-color-dark1);
padding: 0px 10px;
cursor: pointer;
display: inline-flex;
}
form lyte-modal-header .zcat-form-header-tabs div:hover {
cursor: pointer;
color: var(--zcat-color-primary) !important;
}
form lyte-modal-header .zcat-form-header-tabs div.active-tab {
color: var(--zcat-color-primary) !important;
font-family: var(--zcat-font-family-primary);
border-bottom: 2px solid var(--zcat-color-primary);
font-weight: 600;
}
form lyte-modal-footer.zcat-form-footer {
position: relative;
z-index: 1;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px 24px;
}
form lyte-modal-footer.zcat-form-footer .zcat-left-alignment {
width: 100%;
display: flex;
align-items: center;
justify-content: left;
gap: 16px;
}
form lyte-modal-footer.zcat-form-footer .zcat-right-alignment {
width: 100%;
display: flex;
align-items: center;
justify-content: right;
gap: 16px;
}
/* popup loader component */
.modal-loader::before {
content: '';
position: absolute;
border: 3px solid #d6ddef;
border-radius: 50%;
border-top: 3px solid #2a65f0;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
z-index: 2;
left: calc(50% - 20px);
top: calc(50% - 20px);
}
.modal-loader::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.65);
transition: none;
top: 0;
z-index: 1;
}
.modal-loader {
width: 100%;
height: 100%;
pointer-events: none;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.refreshing {
animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
to {
transform: rotate(-360deg);
}
}
lyte-popover-freeze {
opacity: 0 !important;
}
.lytePopover {
/* box-shadow: 0px 4px 14px -4px var(--zcat-shadow-bg-default); */
overflow: hidden;
box-shadow: 0px 4px 14px -4px var(--zcat-shadow-bg-default);
border-radius: 6px;
border: 1px solid var(--zcat-menuList-border-default);
overflow: hidden;
background: var(--zcat-menuList-bg-default);
}
.lyteHovercardPopover .lytePopover {
background: var(--zcat-tooltip-bg);
border-radius: 6px;
color: var(--zcat-tooltip-text-primary);
font-weight: 400;
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
text-align: left;
box-shadow: var(--zcat-shadow-light-all);
word-break: break-word;
overflow: visible;
box-shadow: 2px 2px 10px 2px var(--zcat-shadow-bg-default);
border: 1px solid var(--zcat-tooltip-border);
}
.lyteHovercardPopover .lytePopoverArrowIcon.lytePopoverArrowBottom,
.lyteHovercardPopover .lytePopoverArrowIcon.lytePopoverArrowTop,
.lyteHovercardPopover .lytePopoverArrowIcon.lytePopoverArrowLeft,
.lyteHovercardPopover .lytePopoverArrowIcon.lytePopoverArrowRight {
box-shadow: 1px 1px 0 0 var(--zcat-tooltip-bg);
}
.lyteHovercardPopover .lytePopoverArrowIcon {
background: var(--zcat-tooltip-bg);
border-bottom: 1px solid var(--zcat-tooltip-border);
border-right: 1px solid var(--zcat-tooltip-border);
}
lyte-hovercard-content {
padding: 8px;
max-width: unset;
}
/* new for tooltip placement arrow */
.lyteHovercardPopover .lytePopoverArrowIcon.lytePopoverArrowTop { /* placement = bottom */
border-left: 1px solid var(--zcat-tooltip-border);
border-top: 1px solid var(--zcat-tooltip-border);
/* box-shadow: unset; */
border-bottom: transparent;
border-right: transparent;
}
.lyteHovercardPopover .lytePopoverArrowIcon.lytePopoverArrowBottom { /* placement = top */
border-bottom: 1px solid var(--zcat-tooltip-border);
border-right: 1px solid var(--zcat-tooltip-border);
box-shadow: none;
border-left: transparent;
border-top: transparent;
}
.lyteHovercardPopover .lytePopoverArrowIcon.lytePopoverArrowLeft { /* placement = right */
border-bottom: 1px solid var(--zcat-tooltip-border);
border-left: 1px solid var(--zcat-tooltip-border);
border-right: transparent;
border-top: transparent;
}
.lyteHovercardPopover .lytePopoverArrowIcon.lytePopoverArrowRight { /* placement = left */
border-top: 1px solid var(--zcat-tooltip-border);
border-right: 1px solid var(--zcat-tooltip-border);
border-left: transparent;
border-bottom: transparent;
}
.lyteHovercardPopover .lytePopoverArrowIcon.lytePopoverArrowBottom, .lyteHovercardPopover .lytePopoverArrowIcon.lytePopoverArrowTop, .lyteHovercardPopover .lytePopoverArrowIcon.lytePopoverArrowLeft, .lyteHovercardPopover .lytePopoverArrowIcon.lytePopoverArrowRight{
box-shadow: none;
}
lyte-hovercard-content{
background: var(--zcat-tooltip-bg);
border-radius: 6px;
/* box-shadow: 2px 2px 10px 12px var(--zcat-shadow-bg-default); */
/* border: 1px solid var(--zcat-tooltip-border); */
}
.nested-popover-item{
display: flex;
justify-content: space-between;
padding-right: 4px;
width: 100%;
gap: 6px;
}
.zcat-stroke-icon-active{
stroke: var(--zcat-menuList-icon-active);
}
lyte-popover-header, lyte-drop-header{
padding: 8px 8px 0;
}
lyte-popover-content ,lyte-drop-body {
padding: 8px;
display: block;
/* max-height: 210px; */
overflow-y: auto;
position: relative;
}
lyte-popover-content h4 ,lyte-drop-body h4 {
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
color: var(--zcat-menuList-text-heading);
}
lyte-popover-footer{
padding: 0;
}
lyte-drop-item[selected='true']::before{
content:unset;
}
lyte-popover-item{
padding: 8px 4px;
width: 100%;
cursor: pointer;
}
lyte-radiobutton * {
box-sizing: border-box;
}
lyte-radiobutton {
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
font-weight: 400;
color: var(--zcat-body-text-primary);
/* width: 100%; */
display: flex;
}
lyte-radiobutton input[type="radio"]:focus ~ .lyteRadioLabel,lyte-radiobutton label:hover .lyteRadioLabel,.lyteRadioDisabled label:hover .lyteRadioLabel{
color: var(--zcat-body-text-primary);
}
.lyteRadioBtn.lyteDefault,.primaryRadioBtn .lyteRadioBtn.lyteDefault{
position: relative;
cursor: pointer;
display: inline-flex;
align-items: center;
width: 100%;
}
.checkboxWutLabel.lyteRadioDisabled .lyteRadioBtn.lyteDefault,.lyteRadioDisabled .lyteRadioBtn.lyteDefault{
cursor: not-allowed;
}
.checkboxWutLabel .lyteRadioBtn.lyteDefault{
width: 14px;
}
.primaryRadioBtn .lyteRadioBtn.lyteDefault{
align-items: baseline;
}
.primaryRadioBtn.checkboxWutSubtxt .lyteRadioBtn.lyteDefault{
align-items: center;
}
.lyteRadioLabel {
margin-left: 4px;
width: calc(100% - 14px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
font-weight: 400;
}
.lyteRadioBtn.lyteDefault input[type='radio'] {
opacity: 0;
position: absolute;
height: 0;
width: 0;
}
.lyteRadioLayer {
width: 14px;
height: 14px;
border-radius: 50%;
background-color: var(--zcat-radio-bg-default);
border: 1px solid;
border-color: var(--zcat-radio-border-default);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
vertical-align: middle;
margin-right: 0;
}
.lyteRadioBtn:hover .lyteRadioLayer,
.lyteRadioBtn input[type='radio']:active + .lyteRadioLayer {
background-color: var(--zcat-radio-bg-hover);
border-color: var(--zcat-radio-border-hover);
}
.lyteRadioLayer .lyteRadioCheck {
width: 6px;
height: 6px;
transform: none;
position: static;
background: transparent;
}
.lyteRadioBtn.lyteDefault
input[type='radio']:checked
+ .lyteRadioLayer
.lyteRadioCheck {
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--zcat-radio-inner-default);
}
.lyteRadioBtn.lyteDefault input[type='radio']:checked + .lyteRadioLayer {
background-color: var(--zcat-radio-bg-clicked);
border-color: var(--zcat-radio-bg-clicked);
}
.lyteRadioBtn:hover input[type='radio']:checked + .lyteRadioLayer {
background-color: var(--zcat-radio-bg-clicked-hover);
}
.lyteRadioBtn.lyteDefault input[type='radio']:disabled + .lyteRadioLayer {
background-color: var(--zcat-radio-bg-disabled);
border-color: var(--zcat-radio-border-disabled);
cursor: not-allowed;
opacity: 1;
}
.lyteRadioBtn.lyteDefault
input[type='radio']:checked:disabled
+ .lyteRadioLayer {
background-color: var(--zcat-radio-bg-clicked-disabled);
border-color: var(--zcat-radio-bg-clicked-disabled);
cursor: not-allowed;
opacity: 1;
}
.lyteRadioBtn.lyteDefault input[type='radio']:checked:disabled + .lyteRadioLayer .lyteRadioCheck {
background-color: var(--zcat-radio-inner-disabled);
}
/*Keyboard Focus*/
.lyteRadioBtn.lyteDefault input[type='radio']:checked:focus + .lyteRadioLayer,
.lyteRadioBtn.lyteDefault input[type='radio']:focus + .lyteRadioLayer {
box-shadow: none;
}
.zcat-secondary-radio-button.primaryRadioBtn.selected,
.zcat-secondary-radio-button.primaryRadioBtn {
padding: 0;
}
.zcat-secondary-radio-button .lyteRadioBtn {
width: 100%;
padding: 8px 12px;
}
.zcat-secondary-radio-button.lyteRadioDisabled .lyteRadioBtn,.primaryRadioBtn.lyteRadioDisabled{
cursor: not-allowed;
pointer-events: none;
}
.primaryRadioBtn {
padding: 10px;
border-radius: 6px;
border: 1px solid var(--zcat-radio-outer-border-default);
background: var(--zcat-radio-outer-bg-default);
cursor: pointer;
}
.primaryRadioBtn:hover {
box-shadow: 0px 0px 6px 1px var(--zcat-shadow-bg-default);
}
.primaryRadioBtn.selected {
padding: 10px;
border-radius: 6px;
border: 1px solid var(--zcat-color-primary);
background: var(--zcat-color-grey7);
}
zcat-radio * {
box-sizing: border-box;
}
zcat-radio p {
margin: 0;
}
zcat-radio h1,
zcat-radio h2,
zcat-radio h3,
zcat-radio h4,
zcat-radio h5,
zcat-radio h6 {
font-weight: 600 !important;
margin: 0;
}
lyte-step * {
box-sizing: border-box;
}
lyte-step{
width: 100%;
}
.lyteStepBullet {
display: flex;
justify-content: center;
}
.lyteStepBullet lyte-step-item {
width: 31%;
display: flex;
flex-wrap: wrap;
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
align-content: flex-start;
flex-direction: row;
align-items: center;
justify-content: flex-start;
z-index: 0;
position: relative;
}
.lyteStepBullet lyte-step-head {
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
color: transparent;
cursor: pointer;
counter-reset: section;
background: var(--zcat-stepper-bg-default);
border: 1px solid var(--zcat-stepper-border-default);
text-indent: 0;
box-sizing: border-box;
box-shadow: 0px 2px 6px 0px var(--zcat-shadow-bg-default);
}
.lyteStepBullet lyte-step-head::before {
content: attr(step-value);
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
font-weight: 600;
color: var(--zcat-stepper-text-default);
width: 0px;
height: 0px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: transparent;
transform: scale(1);
transition: transform 0.3s ease;
position: relative;
z-index: 10;
}
.lyteStepBullet lyte-step-head:hover::before {
transform: scale(1);
}
.lyteStepBullet .lyteActive lyte-step-head {
background: var(--zcat-stepper-border-active);
border: 2px solid var(--zcat-stepper-bg-active);
box-shadow: none;
}
.lyteStepBullet .lyteActive:last-of-type lyte-step-head,
.lyteStepBullet .lyteCompleted lyte-step-head {
background: var(--zcat-stepper-bg-completed);
border-color: var(--zcat-stepper-bg-completed);
box-shadow: none;
}
/* .lyteStepBullet lyte-step-item.lyteActive:last-of-type lyte-step-head::before,
.lyteStepBullet .lyteCompleted lyte-step-head::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M10.6668 1.5L4.25016 7.91667L1.3335 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
width: 15px;
height: 12px;
transform: scale(1);
background-color: transparent;
color: transparent;
} */
.lyteStepBullet .lyteActive lyte-step-head::before,.lyteStepBullet .lyteCompleted lyte-step-head::before,.lyteStepBullet lyte-step-item.lyteActive:last-of-type lyte-step-head::before {
transform: scale(1);
counter-increment: section;
width: 20px;
height: 20px;
background: var(--zcat-stepper-bg-active);
color: var(--zcat-stepper-text-number);
box-sizing: border-box;
}
.lyteStepBullet .lyteCompleted lyte-step-head::before,.lyteStepBullet lyte-step-item.lyteActive:last-of-type lyte-step-head::before {
background: var(--zcat-stepper-bg-completed);
border: 1px solid var(--zcat-stepper-border-active);
}
/* .lyteStepBullet lyte-step-head::after,.lyteStepBullet .lyteCompleted lyte-step-head::after {
content: "";
position: absolute;
width: 125px;
height: 0px;
vertical-align: middle;
border-top: 1px dashed var(--zcat-stepper-divider-default);
background: none;
left: 19px;
z-index: -1;
}
.lyteStepBullet .lyteActive lyte-step-head::after{
border-color: var(--zcat-stepper-bg-active);
}
.lyteStepBullet .lyteCompleted lyte-step-head::after {
border-color: var(--zcat-stepper-divider-completed);
background: none;
} */
.lyteStepBullet lyte-step-item:last-of-type {
width: auto;
}
.lyteStepBullet lyte-step-item lyte-step-head::after {
content: none;
}
.lyteStepBullet lyte-step-body {
color: var(--zcat-stepper-text-default);
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
display: block;
position: relative;
text-align: center;
padding: 0 4px;
background: var(--zcat-body-container-bg);
transform: none;
cursor: pointer;
display: flex;
}
.lyteStepBullet .lyteCompleted lyte-step-body .lyteStepBody,
.lyteStepBullet .lyteActive lyte-step-body .lyteStepBody {
color: var(--zcat-stepper-text-active);
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
font-weight: 600;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: normal;
text-align: left;
}
.lyteStepBullet .lyteCompleted lyte-step-body,
.lyteStepBullet .lyteActive lyte-step-body{
max-width: calc(100% - 26px);
}
lyte-step-item::after {
content: "";
position: absolute;
height: 0px;
border-top: 1px dashed var(--zcat-stepper-divider-default);
background: none;
z-index: -1;
display: block;
width: calc(100% - 4px);
}
.lyteStepBullet lyte-step-item.lyteActive::after {
border-color: var(--zcat-stepper-bg-active);
}
.lyteStepBullet lyte-step-item.lyteCompleted::after {
border-color: var(--zcat-stepper-divider-completed);
background: none;
}
.lyteStepBullet lyte-step-item:last-of-type::after {
content: none;
}
.lyteStepBullet .lyteActive lyte-step-body, .lyteStepBullet .lyteCompleted lyte-step-body{
color: var(--zcat-stepper-text-active);
}
lyte-tabs * {
box-sizing: border-box;
}
lyte-tabs {
display: block;
background: var(--zcat-tabs-primary-bg);
position: relative;
width: 100%;
font-family: var(--zcat-font-family-primary);
font-weight: 400;
}
.primary-tabs lyte-tab-head {
display: flex;
border: none;
border-bottom: 1px solid var(--zcat-color-primarylight);
box-sizing: border-box;
position: relative;
}
.primary-tabs lyte-tab-title {
font-weight: 400;
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
color: var(--zcat-tabs-primary-text-default);
padding: 0 8px;
margin: 0 10px 0 0;
cursor: pointer;
box-sizing: border-box;
background: var(--zcat-tabs-primary-bg);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
border-bottom: 2px solid transparent;
height: 28px;
border-radius: 4px 4px 0px 0px;
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
}
.primary-tabs lyte-tab-title .zcat-tab-color{
stroke: var(--zcat-tabs-primary-icon-default);
}
.secondary-tabs lyte-tab-head {
display: flex;
border: none;
background: var(--zcat-tabs-secondary-bg-default);
border-radius: 6px;
border-bottom: none;
padding: 4px;
gap: 4px;
box-sizing: border-box;
}
.secondary-tabs lyte-tab-title {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 2px;
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
color: var(--zcat-tabs-secondary-text-default);
padding: 0 6px;
margin: 0;
cursor: pointer;
box-sizing: border-box;
background: transparent;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
border-radius: 4px;
height: 28px;
box-sizing: border-box;
}
.secondary-tabs lyte-tab-title .zcat-tab-color{
stroke: var(--zcat-tabs-secondary-icon-default);
}
.secondary-tabs.small lyte-tab-title,.secondary-tabs.Extsmall lyte-tab-title{
height: 20px;
}
.secondary-tabs.Extsmall lyte-tab-title{
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
}
.code-tabs lyte-tab-head {
display: flex;
border: none;
border-radius: 6px;
padding: 0;
box-sizing: border-box;
height: 36px;
}
.code-tabs lyte-tab-title {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
padding: 10px;
margin: 0 0 0 10px;
border: 1px solid var(--zcat-tabs-code-border-default);
cursor: pointer;
box-sizing: border-box;
background: var(--zcat-tabs-code-bg-default);
border-radius: 6px 6px 0 0;
overflow: visible;
height: 36px;
border-bottom: 0px;
}
.code-tabs lyte-tab-title:first-child {
margin: 0;
}
.code-tabs lyte-tab-title .zcat-tab-color{
stroke: var(--zcat-tabs-code-icon-default);
}
.code-tabs .code-tab-slide {
position: absolute;
top: -1px;
right: -10px;
width: 20px;
height: 36px;
transform: skew(26deg);
background: var(--zcat-tabs-code-bg-default);
border: 1px solid var(--zcat-tabs-code-border-default);
border-left: none;
border-radius: 0 4px 0 0;
z-index: 1;
border-bottom: 0;
}
.code-tabs .lyteTabActive .code-tab-slide {
background: var(--zcat-tabs-code-bg-active);
border-bottom: none;
}
.code-tabs .tab-title {
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
color: var(--zcat-tabs-code-text-default);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 200px;
margin: 0 1px 0 0;
}
lyte-tab-title span {
display: inline-block;
vertical-align: middle;
}
.primary-tabs lyte-tab-title.lyteTabActive {
font-family: var(--zcat-font-family-primary);
color: var(--zcat-tabs-primary-text-active);
font-weight: 600;
}
.primary-tabs lyte-tab-title:hover,.primary-tabs lyte-tab-title.lyteTabActive:hover{
color: var(--zcat-tabs-primary-text-hover);
}
lyte-tab-body {
display: block;
border: none;
padding: 0;
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
text-align: left;
overflow: auto;
box-sizing: border-box;
}
lyte-tab-content {
color: var(--zcat-body-text-primary);
}
.lyteTabShow {
display: block;
flex-grow: 1;
}
.lyteTabHide {
display: none;
}
/* Tab top starts */
.lyteTabDefaultTop lyte-tab-body {
border-top: 0;
}
.lyteTabDefaultTop lyte-tab-head {
border-bottom: 0;
}
.primary-tabs.lyteTabDefaultTop lyte-tab-head::after {
content: '';
display: block;
width: 100%;
background: var(--zcat-tabs-primary-border-default);
height: 1px;
position: absolute;
bottom: 0px;
}
.secondary-tabs.lyteTabDefaultTop lyte-tab-head::after{
content: none;
}
.code-tabs.lyteTabDefaultTop lyte-tab-head::after{
content: none;
}
.secondary-tabs.lyteTabDefaultTop lyte-tab-title {
margin-bottom: 0;
border-bottom: 0;
}
.primary-tabs.lyteTabDefaultTop lyte-tab-title.lyteTabActive {
border-bottom: 2px solid var(--zcat-tabs-primary-border-active);
}
.primary-tabs.lyteTabDefaultTop lyte-tab-title.lyteTabActive .zcat-tab-color{
stroke: var(--zcat-tabs-primary-icon-active);
}
.secondary-tabs.lyteTabDefaultTop lyte-tab-title.lyteTabActive {
border-bottom: none;
background: var(--zcat-tabs-secondary-bg-active);
color: var(--zcat-tabs-secondary-text-active);
}
.secondary-tabs.lyteTabDefaultTop lyte-tab-title.lyteTabActive .zcat-tab-color{
stroke: var(--zcat-tabs-secondary-icon-active);
}
.code-tabs.lyteTabDefaultTop lyte-tab-title.lyteTabActive {
border-bottom: none;
background: var(--zcat-tabs-code-bg-active);
color: var(--zcat-tabs-code-text-active);
z-index: 1;
}
.code-tabs.lyteTabDefaultTop lyte-tab-title.lyteTabActive .zcat-tab-color{
stroke: var(--zcat-tabs-code-icon-active);
}
lyte-tab-title,
lyte-tab-title.lyteTabActive {
outline: none !important;
}
.primary-tabs.lyteTabDefaultTop lyte-tab-title:hover {
background: var(--zcat-tabs-primary-bg-hover);
border-bottom: 2px solid var(--zcat-tabs-primary-border-hover);
}
.primary-tabs.lyteTabDefaultTop lyte-tab-title:hover .zcat-tab-color{
stroke: var(--zcat-tabs-primary-icon-hover);
}
.primary-tabs.lyteTabDefaultTop lyte-tab-title.lyteTabActive:hover {
background: var(--zcat-tabs-primary-bg-active);
color: var(--zcat-tabs-primary-text-active);
border-bottom: 2px solid var(--zcat-tabs-primary-border-active);
}
.primary-tabs.lyteTabDefaultTop lyte-tab-title.lyteTabActive:hover .zcat-tab-color{
stroke: var(--zcat-tabs-primary-icon-active);
}
.secondary-tabs.lyteTabDefaultTop lyte-tab-title:hover {
color: var(--zcat-tabs-secondary-text-hover);
background: var(--zcat-tabs-secondary-bg-hover);
border-bottom: none;
margin-bottom: 0;
}
.code-tabs lyte-tab-title:hover .tab-title,
.code-tabs.lyteTabDefaultTop lyte-tab-title.lyteTabActive .tab-title {
color: var(--zcat-tabs-code-text-hover);
}
.secondary-tabs.lyteTabDefaultTop lyte-tab-title.lyteTabActive:hover {
border-bottom: none;
background: var(--zcat-tabs-secondary-bg-active);
color: var(--zcat-tabs-secondary-text-active);
}
.secondary-tabs.lyteTabDefaultTop lyte-tab-title:hover .zcat-tab-color,.secondary-tabs.lyteTabDefaultTop lyte-tab-title.lyteTabActive:hover .zcat-tab-color{
stroke: var(--zcat-tabs-secondary-text-hover);
}
.code-tabs.lyteTabDefaultTop lyte-tab-title:hover {
/* border: 1px solid var(--zcat-color-grey2); */
color: var(--zcat-tabs-code-text-hover);
}
.code-tabs.lyteTabDefaultTop lyte-tab-title.lyteTabActive:hover {
border: 1px solid var(--zcat-tabs-code-border-default);
background: var(--zcat-tabs-code-bg-hover);
color: var(--zcat-tabs-code-text-hover);
border-bottom: none;
z-index: 1;
}
.code-tabs.lyteTabDefaultTop lyte-tab-title:hover .zcat-tab-color,.code-tabs.lyteTabDefaultTop lyte-tab-title.lyteTabActive:hover .zcat-tab-color{
stroke: var(--zcat-tabs-code-text-hover);
}
/* Tab top ends */
/* Tab bottom starts */
.lyteTabDefaultBottom lyte-yield {
display: flex;
flex-direction: column;
}
.lyteTabDefaultBottom lyte-tab-head {
order: 2;
border-top-color: #e5e5e5;
}
.lyteTabDefaultBottom lyte-tab-body {
order: 1;
border-bottom: 0;
}
.lyteTabDefaultBottom lyte-tab-title {
border-top: 1px solid #e5e5e5;
margin-top: -1px;
}
.lyteTabDefaultBottom lyte-tab-title.lyteTabActive {
border-top: 1px solid #2c7bd0;
}
.lyteTabDefaultBottom lyte-tab-title:hover {
border-top-color: #666;
}
.lyteTabDefaultBottom lyte-tab-title.lyteTabActive:hover {
border-top-color: #2c7bd0;
}
/* Tab bottom ends */
/* Tab left and right starts */
.lyteTabDefaultLeft lyte-yield {
display: flex;
}
.lyteTabDefaultLeft lyte-tab-head,
.lyteTabDefaultRight lyte-tab-head {
flex-direction: column;
flex-grow: 1;
padding: 10px 0;
width: 200px;
text-align: left;
overflow: auto;
}
.lyteTabDefaultLeft lyte-tab-head {
border-right: 0;
}
.lyteTabDefaultLeft lyte-tab-body,
.lyteTabDefaultRight lyte-tab-body {
flex-grow: 10;
width: calc(100% - 200px);
padding-top: 18px;
}
.lyteTabDefaultLeft lyte-tab-title.lyteTabActive,
.lyteTabDefaultLeft lyte-tab-title.lyteTabActive:hover,
.lyteTabDefaultRight lyte-tab-title.lyteTabActive,
.lyteTabDefaultRight lyte-tab-title.lyteTabActive:hover {
border-left: 1px solid #2c7bd0;
background: #f5f5f5;
position: relative;
z-index: 10;
}
.lyteTabDefaultRight lyte-yield {
display: flex;
flex-direction: row-reverse;
}
.lyteTabDefaultRight lyte-tab-head {
border-left: 0;
}
.lyteTabDefaultLeft lyte-tab-title,
.lyteTabDefaultRight lyte-tab-title {
margin: 0;
padding: 10px 15px;
overflow: visible;
}
.lyteTabDefaultLeft lyte-tab-title:hover,
.lyteTabDefaultRight lyte-tab-title:hover {
background: #fafafa;
}
/* Tab left and right ends */
.lyteTabCloseIcon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M10.5 3.5L3.5 10.5' stroke='%234D618A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.5 3.5L10.5 10.5' stroke='%234D618A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-position: -2px;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
margin-left: 10px;
position: relative;
z-index: 1;
opacity: 0.7;
}
.lyteTabCloseIcon:hover {
opacity: 1;
}
.lyteTabAlignStart {
justify-content: flex-start;
}
.lyteTabAlignCenter {
justify-content: center;
}
.lyteTabAlignEnd {
justify-content: flex-end;
}
.lyteTabOverflowV lyte-tab-title {
overflow: visible;
}
.lyteTabForceHide {
display: none;
}
#moreMenu {
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.7;
padding: 10px;
}
#moreMenu.lyteMenuSelected,
#moreMenu:hover {
opacity: 1;
}
#moreMenu span {
background-image: url(../../images/sprite_lyte.svg);
background-position: -294px -165px;
width: 17px;
height: 5px;
}
.lyteTabRightCollapse {
flex-flow: row-reverse;
justify-content: flex-start;
}
.lyteTabVH lyte-tab-title,
.lyteTabVH .lyteMenuSelected {
visibility: hidden;
}
lyte-tab-title.lyteTabDisable {
pointer-events: none;
cursor: default;
opacity: 0.7;
}
/* Lyte Nested Tabs CSS Begins */
.lyteNestedTab .lyteTabDefaultTop > lyte-yield {
display: block;
}
.lyteNestedTab .lyteTabDefaultTop > lyte-yield > lyte-tab-head {
flex-direction: row;
padding: 0;
width: auto;
border: 1px solid #ddd;
overflow: visible;
}
.lyteNestedTab .lyteTabDefaultTop > lyte-yield > lyte-tab-head lyte-tab-title {
margin: 0 10px;
padding: 10px 5px;
overflow: hidden;
margin-bottom: -1px;
border: 0;
border-bottom: 1px solid #e5e5e5;
}
.lyteNestedTab
.lyteTabDefaultTop
> lyte-yield
> lyte-tab-head
lyte-tab-title:hover {
background: #fff;
border: 0;
border-bottom: 1px solid #666;
}
.lyteNestedTab
.lyteTabDefaultTop
> lyte-yield
> lyte-tab-head
lyte-tab-title.lyteTabActive {
border: 0;
border-bottom: 1px solid #2c7bd0;
background: #fff;
}
.lyteNestedTab .lyteTabDefaultTop > lyte-yield > lyte-tab-body {
width: auto;
padding: 15px;
border: 1px solid #ddd;
border-top: 0;
}
.lyteNestedTab .lyteTabDefaultBottom > lyte-yield {
flex-direction: column;
}
.lyteNestedTab .lyteTabDefaultBottom > lyte-yield > lyte-tab-head {
flex-direction: row;
padding: 0;
width: auto;
border: 1px solid #ddd;
overflow: visible;
}
.lyteNestedTab
.lyteTabDefaultBottom
> lyte-yield
> lyte-tab-head
lyte-tab-title {
margin: 0 10px;
padding: 10px 5px;
overflow: hidden;
margin-top: -1px;
border: 0;
border-top: 1px solid #e5e5e5;
}
.lyteNestedTab
.lyteTabDefaultBottom
> lyte-yield
> lyte-tab-head
lyte-tab-title:hover {
background: #fff;
border: 0;
border-top: 1px solid #666;
}
.lyteNestedTab
.lyteTabDefaultBottom
> lyte-yield
> lyte-tab-head
lyte-tab-title.lyteTabActive {
border: 0;
border-top: 1px solid #2c7bd0;
background: #fff;
}
.lyteNestedTab .lyteTabDefaultBottom > lyte-yield > lyte-tab-body {
width: auto;
padding: 15px;
border: 1px solid #ddd;
border-bottom: 0;
}
.lyteNestedTab .lyteTabDefaultLeft > lyte-yield {
flex-direction: row;
}
.lyteNestedTab .lyteTabDefaultLeft > lyte-yield > lyte-tab-head {
order: 0;
border: 1px solid #ddd;
border-right: 0;
}
.lyteNestedTab .lyteTabDefaultLeft > lyte-yield > lyte-tab-head lyte-tab-title {
border: 0;
}
.lyteNestedTab
.lyteTabDefaultLeft
> lyte-yield
> lyte-tab-head
lyte-tab-title.lyteTabActive {
border-bottom: 0;
border-left: 1px solid #2c7bd0;
}
.lyteNestedTab .lyteTabDefaultLeft > lyte-yield > lyte-tab-body {
border: 1px solid #ddd;
}
.lyteNestedTab .lyteTabDefaultRight > lyte-yield {
flex-direction: row-reverse;
}
.lyteNestedTab .lyteTabDefaultRight > lyte-yield > lyte-tab-head {
border: 1px solid #ddd;
border-left: 0;
order: 0;
}
.lyteNestedTab
.lyteTabDefaultRight
> lyte-yield
> lyte-tab-head
lyte-tab-title {
border: 0;
}
.lyteNestedTab
.lyteTabDefaultRight
> lyte-yield
> lyte-tab-head
lyte-tab-title.lyteTabActive {
border: 0;
border-left: 1px solid #2c7bd0;
}
.lyteNestedTab .lyteTabDefaultRight > lyte-yield > lyte-tab-body {
border: 1px solid #ddd;
}
.zcat-tab-badge{
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--zcat-badge-secondary-bg-primary);
display: flex;
align-items: center;
justify-content: center;
font: var(--zcat-font-10-12) var(--zcat-font-family-primary);
color: var(--zcat-badge-secondary-text-primary);
}
lyte-table * {
box-sizing: border-box;
}
lyte-table {
display: block;
width: 100%;
height: inherit;
font-family: var(--zcat-font-family-primary);
border: 1px solid var(--zcat-table-border-default);
border-radius: 5px;
overflow: hidden;
}
lyte-table.borderless-table{
border-radius: 0;
border-right: none;
border-left: none;
}
lyte-table-structure {
display: table;
position: relative;
background: var(--zcat-table-bg-row);
box-sizing: border-box;
}
lyte-tr {
display: table-row;
}
lyte-tr.lyteTableToolkit,
lyte-tr.lyteTableDummyRow {
position: relative;
}
lyte-col {
display: table-column;
}
lyte-colgroup {
display: table-column-group;
}
lyte-thead {
display: table-header-group;
}
.zcat-table lyte-th,lyte-th{
cursor: default;
background: var(--zcat-table-bg-header);
text-align: left;
color: var(--zcat-table-text-light);
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
font-weight: 600;
outline: none;
padding: 0 14px;
position: relative;
display: table-cell;
vertical-align: middle;
min-width: 44px;
height: 44px;
box-sizing: border-box;
white-space: nowrap;
text-transform: capitalize;
}
lyte-th {
padding: 10px 14px;
}
lyte-th.tableRowFixed {
z-index: 6;
}
.lyteTableFixed {
z-index: 7;
box-shadow: var(--zcat-shadow-light-all);
}
lyte-th.tableRowFixed.lyteTableFixed {
z-index: 8;
}
lyte-th:last-of-type lyte-tablehead-resize {
cursor: default;
position: absolute;
right: 0;
height: 0px;
width: 0;
top: 0;
z-index: 0;
pointer-events: none;
}
lyte-tbody {
display: table-row-group;
}
.zcat-table lyte-td,lyte-td{
display: table-cell;
vertical-align: middle;
background: var(--zcat-color-white);
min-width: 44px;
max-width: 350px;
padding: 0;
box-sizing: border-box;
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
white-space: initial;
color: var(--zcat-table-icon-primary);
position: relative;
z-index: 2;
border: none;
}
lyte-td{
padding: 14px;
}
lyte-tfoot {
display: table-footer-group;
}
lyte-table > .lyteTableScroll {
overflow: auto;
max-width: 100%;
max-height: 100%;
outline: none;
}
lyte-table .lyteTableScroll {
border-bottom: none;
border-right: none;
}
lyte-table > .lyteTableScroll > lyte-yield {
display: block;
width: 100%;
}
lyte-table lyte-tbody lyte-tr:last-child {
border-bottom: none;
}
lyte-table lyte-thead lyte-tr lyte-td:last-of-type,
lyte-table lyte-tbody lyte-tr lyte-td:last-of-type {
border-right: 0;
}
lyte-table lyte-th {
border: none;
border-bottom: 1px solid var(--zcat-table-border-default);
/* border-bottom: none;
border-right: none; */
}
lyte-table lyte-th:last-of-type {
border-right: 0;
}
lyte-table lyte-td {
background: 0 0;
border: none;
}
.lyteDualResize lyte-th:last-of-type lyte-tablehead-resize,
lyte-tablehead-resize {
cursor: ew-resize;
height: 100%;
width: 21px;
top: 0;
z-index: 9;
right: -12px;
position: absolute;
}
.lyteDualResize lyte-th:last-of-type lyte-tablehead-resize {
pointer-events: auto;
right: 0;
}
lyte-tablehead-resize::after {
content: '';
position: absolute;
width: 3px;
height: 100%;
right: 10px;
background: transparent;
}
.lyteDualResize lyte-th:last-of-type lyte-tablehead-resize::after {
right: 0;
}
lyte-th[resize='enable']:hover lyte-tablehead-resize::after {
background: #5ba1e5;
opacity: 0.7;
}
lyte-th[resize='enable'] lyte-tablehead-resize:hover::after,
lyte-th[resize='enable'].resizeSelect lyte-tablehead-resize::after {
background: #5ba1e5;
opacity: 1;
}
lyte-table.resizing
lyte-th[resize='enable']:not(.resizeSelect):hover
lyte-tablehead-resize::after {
background: transparent;
}
lyte-table-resize {
width: 15px;
height: 15px;
bottom: 0;
cursor: se-resize;
z-index: 10;
right: 0;
position: absolute;
}
lyte-table-resize:hover {
border-bottom: 2px solid #5ba1e5;
border-right: 2px solid #5ba1e5;
}
lyte-table-horizontal-resize {
width: 15px;
height: 100%;
bottom: 0;
cursor: col-resize;
z-index: 9;
right: 0;
position: absolute;
}
lyte-table-horizontal-resize:hover {
border-right: 2px solid #5ba1e5;
}
lyte-table-vertical-resize {
width: 100%;
height: 15px;
bottom: 0;
cursor: row-resize;
z-index: 9;
right: 0;
position: absolute;
}
lyte-table-vertical-resize:hover {
border-bottom: 2px solid #5ba1e5;
}
.lyteTableSortHelper {
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
position: absolute;
z-index: 10;
background: #fff;
border: 1px solid #5ba1e5;
padding: 12px 15px;
box-sizing: border-box;
cursor: move;
}
.sortableTable lyte-th {
cursor: move;
}
lyte-table.lyteStickyTable {
--lyte-table-intersection: 0px;
}
.lyteStickyTable .lyteFixedColumn {
position: sticky;
}
.lyteIntersectionDiv {
position: absolute;
width: 1px;
height: 10px;
top: var(--lyte-table-intersection);
opacity: 0;
pointer-events: none;
z-index: -1;
}
.lyteStickyTable lyte-th {
top: 0;
position: sticky;
z-index: 12;
}
.lyteStickyTable lyte-th.lyteStickyTableColumnMoving{
z-index: 14;
}
.lyteStickyTable lyte-th.lyteTableFixed {
z-index: 8;
}
.lyteTableRightFixed {
box-shadow: var(--zcat-shadow-light-all);
}
table.zcat-label-value-pairs {
width: 100%;
border: none;
}
table.zcat-label-value-pairs td,
th {
border: none;
text-align: left;
}
table.zcat-label-value-pairs td:nth-child(2),
table.zcat-label-value-pairs td:nth-child(5),
table.zcat-label-value-pairs td:nth-child(8) {
width: 30px;
text-align: center;
}
table.zcat-label-value-pairs td:nth-child(3),
table.zcat-label-value-pairs td:nth-child(6) {
padding-right: 20px;
}
table.zcat-label-value-pairs .key {
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
color: var(--zcat-table-text-secondary);
}
table.zcat-label-value-pairs .value {
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
color: var(--zcat-table-text-primary);
}
lyte-table.zcat-table-action-tool lyte-tbody lyte-tr {
position: relative;
}
lyte-table.zcat-table-action-tool lyte-tbody lyte-tr.row-focused {
background: var(--zcat-table-bg-rowHover);
border-bottom: 1px solid var(--zcat-table-border-default);
border-right: 0;
border-top: 0;
border-left: 0;
}
lyte-table.zcat-table-checkbox lyte-tbody lyte-tr lyte-td:first-child {
width: 65px;
}
lyte-table.zcat-table-checkbox lyte-checkbox {
margin-left: 13px;
}
lyte-checkbox.minus-btn .lyteCheckbox:hover .lyteCheckBoxDefault::before,
lyte-checkbox.minus-btn .lyteCheckBoxDefault::before {
background-color: var(--zcat-color-primary);
border-color: transparent;
}
lyte-checkbox.minus-btn
.lyteCheckbox
> input[type='checkbox']
+ .lyteCheckBoxDefault::after {
content: '-';
font-weight: 500;
background: none;
color: var(--zcat-color-white);
font-size: 22px;
position: absolute;
top: 0;
left: 3px;
}
lyte-table.zcat-table-checkbox lyte-th:first-child {
z-index: 10;
}
.zcat-table-pagination-block {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 30px;
border: 1px solid var(--zcat-body-border-outerdivider);
border-top: none;
box-shadow: 0px 0px 16px -4px var(--zcat-shadow-bg-default);
border-radius: 0 0 10px 10px;
padding: 0 16px;
}
.zcat-table-pagination-block .splitter {
width: 1.5px;
height: 16px;
background: var(--zcat-body-border-outerdivider-secondary);
}
.zcat-table-nav-block {
display: flex;
align-items: center;
gap: 12px;
}
.zcat-table-nav-block span {
color: var(--zcat-color-dark2);
font-size: 12px;
font-weight: 400;
line-height: 16px;
}
.zcat-table-nav-block span.pageno {
display: flex;
align-items: center;
justify-content: center;
color: var(--zcat-color-dark2);
font-size: 12px;
font-weight: 400;
line-height: 16px;
width: 18px;
height: 18px;
border-radius: 50%;
cursor: pointer;
}
.zcat-table-nav-block span.pageno:hover {
background-color: var(--zcat-color-primarylight);
}
.zcat-table-nav-block span.pageno.active {
background-color: var(--zcat-color-primarylight);
color: var(--zcat-color-primary);
font-weight: 600;
}
.zcat-tablenav-prev-icon {
background-image: url('data:image/svg+xml,');
width: 14px;
height: 14px;
cursor: pointer;
}
.zcat-tablenav-next-icon {
background-image: url('data:image/svg+xml,');
width: 14px;
height: 14px;
cursor: pointer;
}
.zcat-tablenav-dots-icon {
background-image: url('data:image/svg+xml,');
width: 10px;
height: 3px;
scale: 1.5;
}
.zcat-tablenav-prev-icon:hover,
.zcat-tablenav-next-icon:hover {
background-color: var(--zcat-color-primarylight);
border-radius: 50%;
}
.zcat-tablenav-prev-icon.disabled,
.zcat-tablenav-next-icon.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
background-color: transparent !important;
}
.zcat-table-pagination-block.freeze {
pointer-events: none;
opacity: 0.7;
}
lyte-checkbox.minus-btn
.lyteCheckbox
> input[type='checkbox']
+ .lyteCheckBoxDefault::after {
content: '-';
font-weight: 500;
background: none;
color: var(--zcat-color-white);
font-size: 22px;
position: absolute;
top: 0;
left: 3px;
}
.zcat-clickable-row lyte-tr {
cursor: pointer;
}
lyte-table lyte-tbody lyte-tr .table-toolkit-wraper{
position: sticky;
top: 0;
right: 0;
padding: 0;
display: flex;
max-width: 44px;
}
lyte-table lyte-tbody lyte-tr .table-toolkit {
width: 44px;
height: 43px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--zcat-table-threeDot-iconBg);
cursor: pointer;
opacity: 0;
transition: all 0.3s;
box-shadow: -8px 0px 6px -4px var(--zcat-shadow-bg-default);
}
lyte-table lyte-tbody lyte-tr:hover .table-toolkit {
opacity: 1;
}
lyte-table lyte-tbody lyte-tr.row-focused {
background: var(--zcat-table-bg-rowHover);
border-bottom: 1px solid var(--zcat-color-grey6);
border-right: 0;
border-top: 0;
border-left: 0;
}
lyte-table lyte-tbody lyte-tr.row-focused .table-toolkit,
lyte-table lyte-tbody lyte-tr:hover .table-toolkit {
opacity: 1;
}
.table-toolkit-three-dots {
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.table-toolkit-three-dots lyte-svg{
z-index: 1;
}
.table-toolkit-three-dots::after {
content: '';
position: absolute;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--zcat-table-threeDot-iconBg-hover);
inset: -1px 0 0 0;
margin: auto;
transform: scale(0);
transition: transform 0.2s ease;
}
.table-toolkit-three-dots:hover::after {
transform: scale(1);
}
lyte-table lyte-tbody lyte-tr{
background: var(--zcat-table-bg-row);
}
lyte-table lyte-tbody lyte-tr.row-focused .table-toolkit{
background: var(--zcat-table-threeDot-iconBg-active);
}
.table-toolkit:hover{
background:var(--zcat-table-threeDot-iconBg-hover);
}
/* sorting css */
.sort-icon {
margin-left: 8px;
font-size: 12px;
user-select: none;
}
/* For Checkbox Minus cion */
lyte-checkbox.minus-btn .lyteCheckbox:hover .lyteCheckBoxDefault::before,
lyte-checkbox.minus-btn .lyteCheckBoxDefault::before {
background-color: var(--zcat-color-primary);
border-color: transparent;
}
lyte-checkbox.minus-btn .lyteCheckbox>input[type=checkbox]+.lyteCheckBoxDefault::after {
content: '-';
font-weight: 500;
background: none;
color: var(--zcat-color-white);
font-size: 22px;
position: absolute;
top: 0;
left: 2px;
}
lyte-checkbox.minus-btn.checkboxWutLabel .lyteCheckbox>input[type=checkbox]+.lyteCheckBoxDefault::after{
top: -4.5px;
}
.zcat-stroke-dark1{
stroke: var(--zcat-table-icon-primary);
}
.sort-asc {
transform: rotate(0deg);
transition: transform 0.2s ease;
}
.sort-desc {
transform: rotate(180deg);
transition: transform 0.2s ease;
}
.zcat-table-body-content-wraper,.zcat-table-body-checkbox{
display: flex;
align-items: center;
height: 44px;
padding: 2px 14px;
box-sizing: border-box;
border-bottom: 1px solid var(--zcat-table-border-default);
background: var(--zcat-table-bg-row);
}
.zcat-table lyte-tr:last-child .zcat-table-body-content-wraper,.zcat-table lyte-tr:last-child .zcat-table-body-checkbox{
border-bottom: 0;
}
/* .zcat-table lyte-tr:first-child .zcat-table-body-content-wraper,.zcat-table lyte-tr:first-child .zcat-table-body-checkbox{
border-bottom: 1px solid var(--zcat-table-border-default);
} */
.zcat-table lyte-tbody lyte-tr:hover .zcat-table-body-content-wraper,.zcat-table lyte-tbody lyte-tr:hover,.zcat-table lyte-tbody lyte-tr:hover .zcat-table-body-checkbox{
background: var(--zcat-table-bg-rowHover);
/* border-bottom: 1px solid var(--zcat-table-border-default); */
}
.zcat-table lyte-tr .table-toolkit-wraper .zcat-table-body-content-wraper{
background-color: transparent;
padding: 0;
width: 44px;
/* right: -5.8px;
position: relative; */
}
lyte-tr lyte-td{
height: 44px;
padding: 2px 14px;
box-sizing: border-box;
border-bottom: 1px solid var(--zcat-table-border-default);
background: var(--zcat-table-bg-row);
}
lyte-tr lyte-td{
border-bottom: 1px solid var(--zcat-table-border-default);
}
lyte-tr:last-child lyte-td{
border-bottom: 0;
}
lyte-tr .table-toolkit-wraper{
background-color: transparent;
}
/* lyte-tr:first-child lyte-td{
border-bottom: 0;
} */
lyte-tbody lyte-tr:hover lyte-td{
background: var(--zcat-table-bg-rowHover);
/* border-bottom: 1px solid var(--zcat-table-border-default); */
}
/* lyte-table lyte-tr:hover .table-toolkit-wraper .zcat-table-body-content-wraper{
opacity: 1;
} */
.zcat-table-body-content-ellipsis{
display: -webkit-box;
-webkit-line-clamp: 2; /* Show max 3 lines */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
max-width: -webkit-fill-available;
width: max-content;
max-height: 100%;
position: relative;
cursor: pointer;
white-space: pre-wrap;
}
.zcat-table-body-content{
width: 100%;
}
.zcat-table-header-checkbox{
width: fit-content;
display: inline-flex;
align-items: center;
justify-content: center;
height: 100%;
}
.zcat-stroke-dark1{
stroke: var(--zcat-table-icon-primary);
}
.zcat-table-header-content{
display: flex;
align-items: center;
gap: 16px;
height: 43px;
}
.zcat-table-head-moreOptions{
width: 44px;
}
lyte-input * {
box-sizing: border-box;
}
lyte-input {
position: relative;
display: inline-flex;
font-family: var(--zcat-font-family-primary);
}
lyte-input::after {
content: attr(error-message);
position: absolute;
top: 100%;
left: 0;
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
font-family: var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-error);
padding-top: 2px;
}
lyte-number .lyteLabel,
lyte-input .lyteLabel {
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
font-family: var(--zcat-font-family-primary);
font-weight: 600;
color: var(--zcat-inputField-text-label);
}
.lyteInputDisabled .lyteLabel {
color: var(--zcat-inputField-text-disabled);
}
lyte-input .lyteField {
flex-grow: 1;
}
lyte-input.vertical {
width: 100%;
}
lyte-input.vertical .lyteLabel {
margin-bottom: 4px;
}
.lyteInputBox .lyteField input,
.lyteInputBox .lyteField textarea {
padding: 8px;
height: 36px;
background: var( --zcat-inputField-bg-default);
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-default) var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-active);
border-radius: 6px;
resize: none;
border: var(--zcat-inputField-border-default);
}
.lyteInputBox .lyteField {
border: 1px solid var(--zcat-inputField-border-default);
background: var(--zcat-inputField-bg-default);
border-radius: 6px;
position: relative;
}
.lyteInputBox.lyteInputDisabled .lyteField {
border: 1px solid var(--zcat-inputField-border-disabled);
}
/*
.lyteInputBox.lyteInputDisabled .lyteField:hover {
/* border: 1px solid var(--zcat-inputField-border-disabled);
} */
.lyteInputBox .lyteField:hover {
border-color: var(--zcat-inputField-border-hover);
}
.lyteInputBox.lyteInputFocus .lyteField {
border-width: 1px;
border-color: var(--zcat-inputField-border-active);
/* box-shadow: var(--zcat-shadow-light-all); */
border-radius: 6px;
}
.zcat-input-mandatory.lyteInputBox .lyteField::before {
content: '';
position: absolute;
left: -0.758px;
top: 0px;
bottom: 0;
width: 3px;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
background-color: var(--zcat-inputField-border-error);
}
lyte-input .ltIconShow.lyteField,
lyte-input[lt-prop-type='search'] .lyteField {
position: relative;
}
lyte-input[lt-prop-type='textarea'] .lyteField {
position: relative;
overflow: hidden;
}
lyte-input textarea {
min-height: 70px;
resize: none;
}
.lyteTextareaNoResize textarea {
resize: none;
}
lyte-input input::placeholder {
font-family: var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-placeholder);
}
lyte-input input:-ms-input-placeholder {
font-family: var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-placeholder);
}
lyte-input input::-ms-input-placeholder {
font-family: var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-placeholder);
}
lyte-input input::-ms-clear {
display: none;
}
lyte-input textarea::placeholder {
font-family: var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-placeholder);
}
lyte-input textarea:-ms-input-placeholder {
font-family: var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-placeholder);
}
lyte-input textarea::-ms-input-placeholder {
font-family: var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-placeholder);
}
.lyteInput.vertical[lt-prop-type='search'] input,
lyte-input[lt-prop-type='search'] input {
/* padding: 8px 30px; */
font-family: var(--zcat-font-family-primary);
background: var(--zcat-inputField-bg-default);
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-active);
border: 1px solid var(--zcat-inputField-border-default);
border-radius: 6px;
height: 36px;
/* padding: 8px 30px 8px 26px; */
padding: 8px 24px 8px 26px;
}
.lyteInput.vertical[lt-prop-type='search'] input:hover,
lyte-input[lt-prop-type='search'] input:hover {
border-color: var(--zcat-inputField-border-hover);
background: var(--zcat-inputField-bg-hover);
}
.lyteInput.vertical[lt-prop-type='search']:hover,
lyte-input[lt-prop-type='search']:hover {
border-color: var(--zcat-inputField-border-hover);
background: var(--zcat-inputField-bg-hover);
border-radius: 6px;
}
.lyteInput.vertical[lt-prop-type='search'].lyteInputFocus input,
lyte-input[lt-prop-type='search'].lyteInputFocus input {
border-color: var(--zcat-inputField-border-active);
box-shadow: var(--zcat-shadow-light-all);
}
lyte-search lyte-input[lt-prop-type='search'] .lyteField::before,
lyte-input[lt-prop-type='search'].lyteComboboxDropboxSearch .lyteField::before {
left: 1px;
}
lyte-input[lt-prop-type='search'] .searchIcon {
position: absolute;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Ccircle cx='6.00889' cy='6.00901' r='4.72325' stroke='%237988A8' stroke-width='1.5'/%3E%3Cpath d='M9.55127 9.55139L13.0937 13.0938' stroke='%237988A8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
width: 14px;
height: 14px;
left: 8px;
top: calc(50% - 8px);
opacity: 0.6;
margin: 0;
}
.lyteInput .lyteField,
.lyteInput .lyteField:hover,
.lyteInput.lyteInputFocus .lyteField {
border-bottom: none;
}
lyte-input .inputCloseIcon::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M10.5 3.5L3.5 10.5' stroke='%234D618A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.5 3.5L10.5 10.5' stroke='%234D618A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-position: -2px;
width: 10px;
height: 10px;
transform: scale(1);
}
.zcat-invalid .lyteField,
.zcat-invalid .lyteField:hover,
.zcat-invalid .lyteField:focus,
.zcat-invalid .lyteInputBox.lyteInputFocus .lyteField,
.zcat-invalid .lyteInputBox.lyteInputFocus:focus .lyteField {
border-color: var(--zcat-inputField-border-error) !important;
}
.zcat-invalid .lyteField input{
background: var(--zcat-inputField-bg-error) !important;
}
.zcat-invalid .lyteField::before,
.zcat-invalid .lyteField:hover::before,
.zcat-invalid .lyteField:focus::before {
background-color: var(--zcat-inputField-bg-error);
}
/* Input Sizes */
.lyteInputBox .lyteField input.lyteSm {
padding: 8px 6px;
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-default) var(--zcat-font-family-primary);
height: 28px;
}
.lyteInputBox .lyteField input.lyteExsm {
padding: 8px 4px;
font: var(--zcat-input-text-font-weight) var(--zcat-input-text-font-small) var(--zcat-font-family-primary);
height: 24px;
font-size: 12px;
}
.lyteInput.vertical[lt-prop-type='search'].lyteInputBox .lyteField input,
lyte-input[lt-prop-type='search'].lyteInputBox .lyteField input {
border: none;
padding: 7px 30px;
}
lyte-input input:disabled, lyte-input textarea:disabled,
lyte-input input:disabled:hover, lyte-input textarea:disabled:hover {
background: var(--zcat-inputField-bg-disabled) !important;
color: var(--zcat-inputField-text-disabled) !important;
cursor: not-allowed;
border-color: var(--zcat-inputField-border-disabled) !important;
box-shadow: none;
}
/* Input Edit */
.zcat-edit-input-box {
display: flex;
align-items: center;
gap: 10px;
color: var(--zcat-body-text-primary);
}
.zcat-edit-input-box:hover .zcat-edit-input-icon {
display: flex;
}
.zcat-close-edit-input-icon,
.zcat-update-edit-input-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background-color: var(--zcat-btn-grey-bg-default);
border-radius: 50%;
}
.zcat-edit-input-icon {
position: relative;
display: none;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background-color: var(--zcat-btn-grey-bg-hover);
border-radius: 50%;
}
.zcat-edit-input-icon::before {
content: '';
position: absolute;
top: 4px;
left: 4px;
background-image: url('data:image/svg+xml,');
width: 12px;
height: 12px;
}
.zcat-close-edit-input-icon::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
background-image: url('data:image/svg+xml,');
width: 12px;
height: 12px;
}
.zcat-update-edit-input-icon::before {
content: '';
position: absolute;
top: 4px;
left: 3px;
background-image: url('data:image/svg+xml,');
width: 13px;
height: 12px;
}
.zcat-close-edit-input-icon:hover,
.zcat-update-edit-input-icon:hover,
.zcat-edit-input-icon:hover {
background-color: var(--zcat-btn-grey-bg-hover);
cursor: pointer;
}
/* Password eye icon */
.lyteInputWithPasswordToggleButton.lyteInputBox input,
.lyteInputWithPasswordToggleButton.lyteInput input {
padding-right: 34px !important;
}
.lyteInputPasswordToggleIcon {
position: absolute;
right: 0;
top: calc(50%);
transform: translateY(-50%);
width: 34px;
height: 34px;
background-color: var(--zcat-inputField-bg-hover);
display: flex;
align-items: center;
justify-content: center;
border-radius: 0 6px 6px 0;
cursor: pointer;
}
.lyteInputPasswordToggleIcon.lyteInputHidePasswordIcon::after {
background-image: url('data:image/svg+xml,');
width: 14px;
height: 14px;
background-position: 0;
opacity: 1;
}
.lyteInputBox
.lyteField:hover
.lyteInputPasswordToggleIcon.lyteInputHidePasswordIcon::after {
background-image: url('data:image/svg+xml,');
}
.lyteInputBox.lyteInputFocus
.lyteField
.lyteInputPasswordToggleIcon.lyteInputHidePasswordIcon::after {
background-image: url('data:image/svg+xml,');
}
.lyteInputBox.lyteInputFocus
.lyteField:hover
.lyteInputPasswordToggleIcon.lyteInputHidePasswordIcon::after {
background-image: url('data:image/svg+xml,');
}
.lyteInputPasswordToggleIcon::after {
background-image: url('data:image/svg+xml,');
width: 14px;
height: 14px;
background-position: 0;
opacity: 1;
}
/* .lyteInputBox .lyteField:hover .lyteInputPasswordToggleIcon::after {
/* background-image: url('data:image/svg+xml,');
} */
.lyteInputBox.lyteInputFocus .lyteField .lyteInputPasswordToggleIcon::after {
background-image: url('data:image/svg+xml,');
}
/* Date Picker */
.date-input-field input,
.date-input-field .lyteField {
cursor: pointer;
}
/* Input Key Value Pair */
.zcat-key-value-pair-list-block {
padding: 0;
margin: 0;
}
.zcat-key-value-pair-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px;
border-radius: 6px;
margin: 0;
}
.zcat-key-value-pair-box:hover {
background-color: var(--zcat-card-bg-tertiary);
}
.keyValueRemoveBtn::after {
content: '';
}
/* .date-input-field .lyteField:hover::after,
.lyteInputBox .lyteField:hover .lyteInputCalendarIcon::before {
background-image: url('data:image/svg+xml,');
} */
/* .date-input-field.lyteInputFocus .lyteField:hover::after,
.date-input-field.lyteInputFocus .lyteField::after,
.lyteInputBox.lyteInputFocus .lyteField:hover .lyteInputCalendarIcon::before,
.lyteInputBox.lyteInputFocus .lyteField .lyteInputCalendarIcon::before {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 6.66668H2M10.6667 1.33334V4.00001M5.33333 1.33334V4.00001M5.2 14.6667H10.8C11.9201 14.6667 12.4802 14.6667 12.908 14.4487C13.2843 14.2569 13.5903 13.951 13.782 13.5747C14 13.1468 14 12.5868 14 11.4667V5.86668C14 4.74657 14 4.18652 13.782 3.7587C13.5903 3.38237 13.2843 3.07641 12.908 2.88466C12.4802 2.66668 11.9201 2.66668 10.8 2.66668H5.2C4.0799 2.66668 3.51984 2.66668 3.09202 2.88466C2.71569 3.07641 2.40973 3.38237 2.21799 3.7587C2 4.18652 2 4.74657 2 5.86668V11.4667C2 12.5868 2 13.1468 2.21799 13.5747C2.40973 13.951 2.71569 14.2569 3.09202 14.4487C3.51984 14.6667 4.0799 14.6667 5.2 14.6667Z' stroke='%232a65f0' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html[data-user-color-scheme="dark"] .date-input-field.lyteInputFocus .lyteField:hover::after,
html[data-user-color-scheme="dark"] .date-input-field.lyteInputFocus .lyteField::after,
html[data-user-color-scheme="dark"] .lyteInputBox.lyteInputFocus .lyteField:hover .lyteInputCalendarIcon::before,
html[data-user-color-scheme="dark"] .lyteInputBox.lyteInputFocus .lyteField .lyteInputCalendarIcon::before {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 6.66668H2M10.6667 1.33334V4.00001M5.33333 1.33334V4.00001M5.2 14.6667H10.8C11.9201 14.6667 12.4802 14.6667 12.908 14.4487C13.2843 14.2569 13.5903 13.951 13.782 13.5747C14 13.1468 14 12.5868 14 11.4667V5.86668C14 4.74657 14 4.18652 13.782 3.7587C13.5903 3.38237 13.2843 3.07641 12.908 2.88466C12.4802 2.66668 11.9201 2.66668 10.8 2.66668H5.2C4.0799 2.66668 3.51984 2.66668 3.09202 2.88466C2.71569 3.07641 2.40973 3.38237 2.21799 3.7587C2 4.18652 2 4.74657 2 5.86668V11.4667C2 12.5868 2 13.1468 2.21799 13.5747C2.40973 13.951 2.71569 14.2569 3.09202 14.4487C3.51984 14.6667 4.0799 14.6667 5.2 14.6667Z' stroke='%23458BFF' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
} */
lyte-autocomplete lyte-dropdown .lyteDummyEventContainer:focus .lyteField,
lyte-autocomplete .lyteDropButtonDown lyte-input.lyteInputBox .lyteField,
lyte-autocomplete .lyteDropButtonUp lyte-input.lyteInputBox .lyteField {
border: 1px solid var(--zcat-inputField-border-hover);
box-shadow: var(--zcat-shadow-bg-default);
border-radius: 6px;
}
lyte-autocomplete .lyteDropButtonUp lyte-input.lyteInputBox .lyteField,lyte-autocomplete .lyteDropButtonUp lyte-input.lyteInputBox input{
border-radius: 6px;
}
lyte-autocomplete::after {
content: attr(error-message);
position: absolute;
top: 100%;
left: 0;
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
font-family: var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-error);
padding-top: 2px;
}
lyte-autocomplete .lyteDropButtonDown lyte-input.lyteInputBox .lyteField,
lyte-autocomplete .lyteDropButtonDown lyte-input.lyteInputBox input {
border-radius: 6px;
}
lyte-drop-box.autocomplete-dropbox {
display: flex;
flex-direction: column;
}
lyte-drop-item .lyteAutoComplete {
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-active);
position: relative;
}
lyte-autocomplete-description {
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-label);
}
.lyteautocompleteHighlight {
background: transparent;
color: var(--zcat-inputField-text-active);
font-weight: 500;
}
.zcat-autocomplete-icon-warper{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.zcat-autocomplete-icon-warper + .lyteautocompleteHighlight {
margin-left: 18px; /* or whatever spacing you want */
}
.autocomplete-dropbox lyte-drop-item[selected='true'] {
background: transparent;
}
.autocomplete-dropbox lyte-drop-item.lyteDropdownSelection[selected='true'] {
background: var(--zcat-inputField-bg-hover);
}
.autocomplete-dropbox lyte-drop-item[selected='true']::before {
background: none;
}
lyte-autocomplete.searchPresent .lyteAutoCompCloseIconWrapper {
right: 5px;
}
lyte-autocomplete
lyte-input[lt-prop-type='search'].lyteInputBox
.lyteField
input {
padding: 7px 30px 7px 8px;
}
.lyteAutoCompCloseIcon {
background-image: url('data:image/svg+xml,');
background-position: -2px;
width: 10px;
height: 10px;
transform: scale(1);
}
lyte-autocomplete lyte-input[lt-prop-type='search'] .searchIcon,
lyte-autocomplete .iconSeparator {
display: none !important;
}
lyte-drop-box.autocomplete-dropbox lyte-drop-body {
order: 1;
}
lyte-drop-box.autocomplete-dropbox .lyteautocompleteError {
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
color: var(--zcat-inputField-text-optional);
padding: 20px 16px 12px 16px;
text-align: center;
}
lyte-drop-box.autocomplete-dropbox .lyteautocompleteNewBtn {
order: 3;
width: 100%;
height: 36px;
display: flex;
align-items: center;
padding: 0 16px;
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
font-weight: 600 !important;
color: var(--zcat-btn-grey-text-default);
border-top: 1px solid var(--zcat-menuList-border-default);
cursor: pointer;
background-color: var(--zcat-menuList-bg-default);
}
lyte-drop-box .lyteautocompleteNewBtn span {
color: var(--zcat-btn-ghost-text-primary-default);
font-weight: 500;
margin-top: -2px;
margin-left: 5px;
}
lyte-drop-box .lyteautocompleteNewBtn:hover {
background-color: var(--zcat-btn-ghost-bg-primary-hover);
}
/* zcat link field */
.zcat-link-field-box {
border-radius: 6px;
border: 1px solid var(--zcat-inputField-border-default);
background: var(--zcat-inputField-bg-default);
font-family: var(--zcat-font-family-code);
padding: 8px 12px;
height: 36px;
box-sizing: border-box;
font-size: 12px;
font-weight: 400;
line-height: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
lyte-dropdown lyte-drop-button:hover, .lyteInputBox .lyteField:hover input, .lyteInputBox .lyteField:hover textarea {
background: var(--zcat-inputField-bg-hover);
}
/* search comp icons */
lyte-search lyte-input[lt-prop-type='search'] .searchIcon{
background-image: url('data:image/svg+xml,');
left: 8px;
}
lyte-search.lyteSm lyte-input[lt-prop-type='search'] .searchIcon,
lyte-search.lyteExsm lyte-input[lt-prop-type='search'] .searchIcon
{
left: 6px;
}
lyte-search lyte-input[lt-prop-type='search'] .searchIcon{
/* background-repeat: no-repeat;
background-size: cover; */
width: 16px;
height: 16px;
}
lyte-search.lyteSm lyte-input[lt-prop-type='search'] .searchIcon,
lyte-search.lyteExsm lyte-input[lt-prop-type='search'] .searchIcon{
width: 14px;
height: 14px;
}
lyte-search.lyteSm .lyteInput.vertical[lt-prop-type='search'] input{
height: 28px;
padding: 4px 22px;
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
}
lyte-input .inputCloseIcon::before{
background-image: url('data:image/svg+xml,');
width: 16px;
height: 16px;
transform: unset;
}
lyte-input .inputCloseIcon{
top: 50%;
transform: translateY(-50%);
padding: 0;
right: 6px;
}
lyte-search.lyteSm lyte-input .inputCloseIcon{
right: 4px;
}
lyte-search.lyteSm lyte-input .inputCloseIcon::before,
lyte-search.lyteExsm lyte-input .inputCloseIcon::before{
width: 14px;
height: 14px;
}
.lyteInput.vertical[lt-prop-type='search'] input, lyte-input[lt-prop-type='search'] input{
padding: 8px 24px 8px 26px;
}
html[data-user-color-scheme="dark"] lyte-input .inputCloseIcon::before {
background: url('data:image/svg+xml,');
}
html[data-user-color-scheme="dark"] lyte-search lyte-input[lt-prop-type='search'] .searchIcon{
background-image: url('data:image/svg+xml,');
}
.lyteInput.lyteInputDisabled .lyteField:hover{
border-bottom: none;
}
lyte-drop-box.lyteDropdownHidden.autocomplete-dropbox{
display: none;
}
.lyteMessageBoxContent {
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
font-weight: 400;
color: var(--zcat-color-dark1);
background-color: var(--zcat-body-container-bg);
}
.lyteMessageBox {
padding: 0;
z-index: 1080;
background: var(--zcat-color-white);
border-radius: 6px;
color: var(--zcat-color-dark1);
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
transition: 0.3s all ease;
display: block;
animation-duration: 0.5s;
animation-fill-mode: both;
position: absolute;
min-width: 200px;
min-height: auto;
box-shadow: var(--zcat-shadow-dark-all);
overflow: hidden;
border: 1px solid var(--zcat-toast-border-default);
/* max-width: 80%;
margin: 0 10%; */
}
.lyteMessageBox.successMessageIcon,
.lyteMessageBox.errorMessageIcon,
.lyteMessageBox.warningMessageIcon,
.lyteMessageBox.infoMessageIcon {
border: 1px solid var(--zcat-body-border-outerdivider);
display: flex;
align-items: center;
border-radius: 6px;
border: 1px solid var(--zcat-toast-border-default);
background: var(--zcat-toast-bg-default);
box-shadow: 0 0 6px 0 var(--zcat-shadow-bg-default);
}
.lyteMessageBox .lyteMessageBoxSymbol {
height: 100%;
display: inline-block;
position: absolute;
width: 4px;
height: 70%;
border-radius: 0 10px 10px 0;
}
.lyteMessageBox.successMessageIcon .lyteMessageBoxSymbol {
background: var(--zcat-toast-icon-line-success);
}
.lyteMessageBox.errorMessageIcon .lyteMessageBoxSymbol {
background: var(--zcat-toast-icon-line-danger);
}
.lyteMessageBox.warningMessageIcon .lyteMessageBoxSymbol {
background: var(--zcat-toast-icon-line-warning);
}
.lyteMessageBox.infoMessageIcon .lyteMessageBoxSymbol {
background: var(--zcat-toast-icon-line-info);
}
.lyteMessageBox .lyteMessageBoxSymbol::before {
content: "";
background: none;
position: absolute;
display: inline-block;
width: 22px;
height: 20px;
top: calc(50% - 10px);
left: calc(50% - 11px);
}
.lyteMessageBox.successMessageIcon .lyteMessageBoxSymbol::before {
background-position: -287px -58px;
}
.lyteMessageBox.errorMessageIcon .lyteMessageBoxSymbol::before {
background-position: -317px -60px;
width: 24px;
left: calc(50% - 12px);
}
.lyteMessageBox.warningMessageIcon .lyteMessageBoxSymbol::before {
background-position: -347px -58px;
}
.lyteMessageBox.infoMessageIcon .lyteMessageBoxSymbol::before {
background-position: -377px -58px;
}
.lyteMessageBox .lyteMessageBoxContent {
display: inline-block;
max-width: 100%;
vertical-align: top;
padding: 14px;
width: 674px;
}
.lyteMessageBox .lyteMessageBoxClose {
background: none;
background-position: center;
top: calc(50% - 10px);
width: 14px;
height: 11px;
display: inline-block;
position: absolute;
cursor: pointer;
right: 15px;
}
.lyteMessageBoxFadeIn {
animation-name: lyteMsgBoxFadeIn;
}
@keyframes lyteMsgBoxFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.lyteMessageBoxFadeOut {
animation-name: lyteMsgBoxFadeOut;
}
@keyframes lyteMsgBoxFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Toaster */
.zcat-toast-msg-block {
display: flex;
flex-direction: column;
gap: 5px;
}
.zcat-toast-header {
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
color: var(--zcat-body-text-primary);
width: 450px;
padding-left: 10px;
}
.errorMessageIcon .zcat-toast-msg {
color: var(--zcat-alerts-danger-text-primary);
/* background-color: var( --zcat-alerts-danger-bg); */
}
.zcat-toast-msg {
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
color: var(--zcat-alerts-warning-text-secondary);
margin: 0;
width: 450px;
padding-left: 10px;
}
.zcat-toast-undo {
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
color: var(--zcat-color-primary);
margin-left: 30px;
cursor: pointer;
}
.zcat-toast-close {
margin: 0 0 0 20px;
cursor: pointer;
}
.zcat-icon-toast-success {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21Z' fill='%2329B360' stroke='%2329B360' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 12L9 14L14.5 9' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
width: 22px;
height: 22px;
}
.zcat-icon-toast-error {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21Z' fill='%23E22020' stroke='%23E22020' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.5 7.5L7.5 14.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.5 7.5L14.5 14.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
width: 22px;
height: 22px;
}
.zcat-icon-toast-warning {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21Z' fill='%23FFCF54' stroke='%23FFCF54' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.0712 14.5703C10.8593 14.5703 10.6521 14.6332 10.4759 14.7509C10.2997 14.8686 10.1624 15.0359 10.0813 15.2317C10.0002 15.4275 9.979 15.6429 10.0203 15.8508C10.0617 16.0586 10.1637 16.2495 10.3136 16.3994C10.4634 16.5492 10.6543 16.6512 10.8622 16.6926C11.07 16.7339 11.2854 16.7127 11.4812 16.6316C11.677 16.5505 11.8443 16.4132 11.962 16.237C12.0798 16.0608 12.1426 15.8536 12.1426 15.6417C12.1389 15.3587 12.0248 15.0884 11.8247 14.8882C11.6246 14.6881 11.3542 14.574 11.0712 14.5703Z' fill='white'/%3E%3Cpath d='M11 6.51172V9.77702V12.226' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
width: 22px;
height: 22px;
}
.zcat-icon-toast-info {
background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21Z' fill='%232a65f0' stroke='%232a65f0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.0712 14.5703C10.8593 14.5703 10.6521 14.6332 10.4759 14.7509C10.2997 14.8686 10.1624 15.0359 10.0813 15.2317C10.0002 15.4275 9.979 15.6429 10.0203 15.8508C10.0617 16.0586 10.1637 16.2495 10.3136 16.3994C10.4634 16.5492 10.6543 16.6512 10.8622 16.6926C11.07 16.7339 11.2854 16.7127 11.4812 16.6316C11.677 16.5505 11.8443 16.4132 11.962 16.237C12.0798 16.0608 12.1426 15.8536 12.1426 15.6417C12.1389 15.3587 12.0248 15.0884 11.8247 14.8882C11.6246 14.6881 11.3542 14.574 11.0712 14.5703Z' fill='white'/%3E%3Cpath d='M11 6.51172V9.77702V12.226' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
width: 22px;
height: 22px;
transform: rotate(180deg);
}
.zcat-icon-toast-close {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M10.5 3.5L3.5 10.5' stroke='%234D618A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.5 3.5L10.5 10.5' stroke='%234D618A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
width: 14px;
height: 14px;
}
.lyteTooltip {
font-weight: 400;
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
max-width: 300px;
padding: 10px;
background: var(--zcat-tooltip-bg) !important;
color: var(--zcat-tooltip-text-primary) !important;
text-align: left;
box-shadow: 2px 2px 10px 2px var(--zcat-shadow-bg-default);;
border-radius: 6px;
word-break: break-word;
box-sizing: border-box;
border: 1px solid var(--zcat-tooltip-border);
}
.lyteTooltip.lyteTooltipCallout .lyteTooltipInnerSpan,.lyteTooltip.lyteTooltipCallout::before {
width: 8px;
height: 8px;
border-right: 1px solid var(--zcat-tooltip-border);
border-bottom: 1px solid var(--zcat-tooltip-border);
border-left: transparent;
border-top: transparent;
}
.lyteTooltip.lyteTooltipCallout.lyteBottom::before{
border-left: 1px solid var(--zcat-tooltip-border);
border-top: 1px solid var(--zcat-tooltip-border);
border-right: transparent;
border-bottom: transparent;
}
.lyteTooltip.lyteTooltipCallout.lyteLeft::before{
border-right: 1px solid var(--zcat-tooltip-border);
border-top: 1px solid var(--zcat-tooltip-border);
border-bottom: transparent;
border-left: transparent;
}
.lyteTooltip.lyteTooltipCallout.lyteRight::before{
border-bottom: 1px solid var(--zcat-tooltip-border);
border-left: 1px solid var(--zcat-tooltip-border);
border-top: transparent;
border-right: transparent;
}
lyte-tree * {
box-sizing: border-box;
}
lyte-tree {
padding-left: 20px;
width: 100%;
}
lyte-tree lyte-yield {
width: 100%;
}
lyte-tree-body {
margin: 0;
}
lyte-tree .mainContainer.lyteTreeMainContainer::before {
border: none;
}
lyte-tree lyte-tree lyte-tree-content::before {
border: none;
}
.lyteTreeOpen .treeValue,
lyte-tree-icon.open .treeValue {
font-family: var(--zcat-font-family-primary);
font-weight: 600;
}
.tree-element {
display: flex;
align-items: center;
width: 100%;
min-height: 36px;
padding: 0 15px;
box-sizing: border-box;
}
.tree-element:hover {
background: var(--zcat-color-grey5);
border-radius: 4px;
}
.treeValue {
font: var(--zcat-font-14-20) var(--zcat-font-family-primary);
color: var(--zcat-color-dark1);
margin: 0;
}
.tree-element.active .treeValue {
color: var(--zcat-color-primary);
font-weight: 500;
}
.lyteTreeOpen .arrow,
lyte-tree-icon.open .arrow {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M1 9L5 4.99798L1 1' stroke='%234D618A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
width: 6px;
height: 10px;
transform: rotate(90deg);
transition: all 0.1s;
margin: 3px 0px 0px 3px;
}
.lyteTreeClose .arrow,
lyte-tree-icon.close .arrow {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M1 9L5 4.99798L1 1' stroke='%234D618A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
width: 6px;
height: 10px;
transform: rotate(0);
transition: all 0.1s;
margin: 3px 0px 0px 3px;
}
.lyteNavigator lyte-yield{
width: 100%;
}
.zcat-pagination-wraper{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 30px;
padding: 6px 16px;
border-radius: 0px 0px 10px 10px;
border-top: 1px solid var(--zcat-pagination-divider);
background-color: var(--zcat-pagination-bg);
box-shadow: 0px -6px 16px 0px var(--zcat-shadow-bg-secondary);
}
zcat-table .zcat-pagination-wraper{
margin-top: -3px;
border: 1px solid var(--zcat-table-border-default);
position: relative;
z-index: 2;
}
zcat-table .zcat-pagination-wraper.borderless-table{
border-radius: 0;
border-left: none;
border-right: none;
}
.zcat-pagination-page-list{
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
font-weight: 400;
color: var(--zcat-pagination-text-secondary);
}
.zcat-pagination-icon-wraper{
height: 24px;
width: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.zcat-pagination-icon-wraper:hover{
cursor: pointer;
background: var(--zcat-btn-grey-bg-hover);
}
.lyteDisabled.zcat-pagination-icon-wraper{
cursor: not-allowed;
background: none;
}
.zcat-pagination-icon-color{
stroke: var(--zcat-body-icons-static-primary);
}
.lyteDisabled.zcat-pagination-icon-disabled-color{
stroke: var(--zcat-body-icons-static-disabled);
}
.zcat-pagination-result-wraper,.zcat-pagination-dropdown-text{
font: var(--zcat-font-12-16) var(--zcat-font-family-primary);
font-weight: 400;
}
.zcat-pagination-result-text{
color: var(--zcat-pagination-text-tertiary);
}
.zcat-pagination-result-count{
color: var(--zcat-pagination-text-primary);
}
.zcat-pagination-result-total{
color: var(--zcat-pagination-text-secondary);
}
.zcat-pagination-divider{
height: 20px;
width: 1px;
background: var(--zcat-pagination-divider);
}
.zcat-pagination-dropdown-text{
color: var(--zcat-pagination-text-tertiary);
}