/*! * Theme Name: Lagom WHMCS Client Theme * Author: RS Studio (https://rsstudio.net) * Theme URL: https://lagom.rsstudio.net/ * Terms of Service: https://lagom.rsstudio.net/legal/terms-of-service/ * * This file is part of a licensed product. Unauthorized redistribution, modification, * or use outside of the licensed environment is strictly prohibited. * * © RS Studio. All rights reserved. */ :root { /* Name: General; Index: 2 */ /* Spacing */ --spacing-0x: 0px; --spacing-1x: 8px; --spacing-2x: calc(2 * var(--spacing-1x)); --spacing-3x: calc(3 * var(--spacing-1x)); --spacing-4x: calc(4 * var(--spacing-1x)); --spacing-5x: calc(5 * var(--spacing-1x)); --spacing-6x: calc(6 * var(--spacing-1x)); --spacing-7x: calc(7 * var(--spacing-1x)); --spacing-8x: calc(8 * var(--spacing-1x)); --spacing-9x: calc(9 * var(--spacing-1x)); --spacing-10x: calc(10 * var(--spacing-1x)); --spacing-11x: calc(11 * var(--spacing-1x)); --spacing-12x: calc(12 * var(--spacing-1x)); --spacing-13x: calc(13 * var(--spacing-1x)); --spacing-14x: calc(14 * var(--spacing-1x)); --spacing-15x: calc(15 * var(--spacing-1x)); /* Section: UI Border Radius;*/ --border-radius-none: 0px; /* name: None; group: Border Radius; type: size; type:hidden; */ --border-radius-xs: 3px; /* name: Extra Small; group: Border Radius; type: size; append: px; */ --border-radius-sm: 4px; /* name: Small; group: Border Radius; type: size; append: px; */ --border-radius-base: 6px; /* name: Base; group: Border Radius; type: size; append: px; */ --border-radius-lg: 8px; /* name: Large; group: Border Radius; type: size; append: px; */ --border-radius-xlg: 12px; /* name: Extra Large; group: Border Radius; type: size; append: px; */ --border-width-base: 1px; /* Section: UI Shadow;*/ --box-shadow-none: unset; /* name: None; group: Box Shadow; type:hidden; */ --box-shadow-xs: 0 1px 1px rgba(0,0,0,.05); /* name: Extra Small; group: Box Shadow; */ --box-shadow-sm: 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 2px 16px rgba(0, 0, 0, 0.08); /* name: Small; group: Box Shadow; */ --box-shadow-base: 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 2px 24px rgba(0, 0, 0, 0.08); /* name: Base; group: Box Shadow; */ --box-shadow-lg: 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 8px 40px rgba(0, 0, 0, 0.08); /* name: Large; group: Box Shadow; */ --box-shadow-xlg: 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 8px 56px rgba(0, 0, 0, 0.08); /* name: Extra Large; group: Box Shadow; */ /* Section: UI Elements Height */ --ui-height-xs: 30px; /* name: Extra Small; group: UI Height; type: size; append: px; */ --ui-height-sm: 36px; /* name: Small; group: UI Height; type: size; append: px; */ --ui-height-base: 44px; /* name: Base; group: UI Height; type: size; append: px; */ --ui-height-lg: 56px; /* name: Large; group: UI Heighte; type: size; append: px; */ --ui-height-xlg: 64px; /* name: Extra Large; group: UI Height; type: size; append: px; */ /* UI Padding */ --ui-padding-base-v: var(--spacing-1x); --ui-padding-base-h: var(--spacing-2x); --ui-padding-xs-v: 2px; --ui-padding-xs-h: var(--spacing-1x); --ui-padding-sm-v: 4px; --ui-padding-sm-h: var(--spacing-2x); --ui-padding-lg-v: var(--spacing-1x); --ui-padding-lg-h: var(--spacing-3x); --ui-padding-xlg-v: var(--spacing-1x); --ui-padding-xlg-h: var(--spacing-4x); /* UI Block */ --ui-block-bg: #fff; --ui-block-overlay-bg: rgba(255,255,255, .78); --ui-block-overlay-bg-2: #fff; --ui-block-bg-form: #fff; --ui-block-border-color: transparent; --ui-block-border-radius: var(--border-radius-base); --ui-block-border-radius-lg: var(--border-radius-lg); --ui-block-shadow: var(--box-shadow-sm); --ui-block-shadow-lg: var(--box-shadow-lg); --ui-block-shadow-xlg: var(--box-shadow-xlg); --ui-block-border: none; --ui-block-header-height: 56px; --ui-block-header-bg: #fff; --ui-block-secondary-divider-border-color: hsla(0, 0%, 100%, 12%); --ui-block-divider-color: var(--gray-lighter-4); --ui-block-divider-border: 1px solid var(--ui-block-divider-color); /* Links - Blocks (Tables, List Groups) */ --ui-block-link-hover-bg: var(--brand-primary-lighter-4); --ui-block-link-active-bg: var(--brand-primary-lighter-4); --ui-block-link-disabled-color: var(--text-lighter-color); --ui-block-overlay-shadow: var(--box-shadow-lg); /* Links - horizontal navigations (Sidebars, Dropdowns, Vertical Navigation) */ --ui-nav-link-bg: transparent; --ui-nav-link-border-radius: var(--border-radius-sm); --ui-nav-link-hover-bg: transparent; --ui-nav-link-active-bg: var(--brand-primary-lighter-4); --dropdown-link-disabled-color: #ACB0B9; --ui-nav-link-icon-size: 18px; --ui-nav-link-icon-size-sm: 12px; --ui-nav-link-icon-spacing: 10px; --ui-nav-link-icon-spacing-lg: 16px; --ui-nav-h-link-padding-h: var(--spacing-2x); --ui-nav-v-link-padding-v: 6px; --ui-nav-v-link-padding-h: 0px; --ui-nav-v-link-hover-padding-h: 12px; --ui-nav-v-link-active-padding-h: 12px; /* UI Block - Spacing */ --ui-block-padding-base: var(--spacing-3x); --ui-block-padding-base-v: var(--spacing-2x); --ui-block-padding-sm: var(--spacing-2x); --ui-block-padding-sm-v: var(--spacing-1x); --ui-block-padding-lg: var(--spacing-4x); --ui-block-padding-lg-v: var(--spacing-3x); --ui-block-padding-xlg: var(--spacing-6x); --ui-block-padding-xlg-v: var(--spacing-4x); --ui-block-spacing-xs: var(--spacing-1x); --ui-block-spacing-sm: var(--spacing-2x); --ui-block-spacing-base: var(--spacing-3x); --ui-block-spacing-lg: var(--spacing-4x); --ui-block-spacing-xlg: var(--spacing-5x); /* Section: UI State;*/ --state-primary-bg: var(--brand-primary-lighter-3); /* name: Primary - Background; type: select-colors*/ --state-primary-text: var(--brand-primary); /* name: Primary - Font Color; type: select-colors*/ --state-primary-border: var(--brand-primary-lighter-2); /* name: Primary - Border Color; type: select-colors*/ --state-info-bg: var(--brand-info-lighter-4); /* name: Info - Background; type: select-colors*/ --state-info-text: var(--brand-info); /* name: Info - Font Color; type: select-colors*/ --state-info-border: var(--brand-info-lighter-2); /* name: Info - Border Color; type: select-colors*/ --state-success-bg: var(--brand-success-lighter-4); /* name: Success - Background; type: select-colors*/ --state-success-text: var(--brand-success); /* name: Success - Font Color; type: select-colors*/ --state-success-border: var(--brand-success-lighter-2); /* name: Success - Border Color; type: select-colors*/ --state-warning-bg: var(--brand-warning-lighter-4); /* name: Warning - Background; type: select-colors*/ --state-warning-text: var(--brand-warning); /* name: Warning - Font Color; type: select-colors*/ --state-warning-border: var(--brand-warning-lighter-2); /* name: Warning - Border Color; type: select-colors*/ --state-danger-bg: var(--brand-danger-lighter-4); /* name: Danger - Background; type: select-colors*/ --state-danger-text: var(--brand-danger); /* name: Danger - Font Color; type: select-colors*/ --state-danger-border: var(--brand-danger-lighter-2); /* name: Danger - Border Color; type: select-colors*/ /* Section: Labels */ --label-color: #fff; --label-link-hover-color: #fff; --label-default-bg: var(--gray-faded); /* name: Default - Background; type: select-colors;*/ --label-default-color: var(--gray-base); /* name: Default - Color; type: select-colors;*/ --label-primary-bg: var(--brand-primary); /* name: Primary - Background; type: select-colors;*/ --label-primary-color: #fff; /* name: Primary - Color; type: select-colors;*/ --label-primary-faded-bg: var(--brand-primary-lighter-3); --label-primary-faded-color: var(--brand-primary); --label-secondary-bg: var(--brand-secondary); /* name: Secondary - Background; type: select-colors;*/ --label-secondary-color: #fff; /* name: Secondary - Color; type: select-colors;*/ --label-success-bg: var(--state-success-bg); /* name: Success - Background; type: select-colors;*/ --label-success-color: var(--state-success-text); /* name: Success - Color; type: select-colors;*/ --label-info-bg: var(--state-info-bg); /* name: Info - Background; type: select-colors;*/ --label-info-color: var(--state-info-text); /* name: Info - Color; type: select-colors;*/ --label-warning-bg: var(--state-warning-bg); /* name: Warning - Background; type: select-colors;*/ --label-warning-color: var(--state-warning-text); /* name: Warning - Color; type: select-colors;*/ --label-danger-bg: var(--state-danger-bg); /* name: Danger - Background; type: select-colors;*/ --label-danger-color: var(--state-danger-text); /* name: Danger - Color; type: select-colors;*/ --label-purple-bg: #b3a3de; /* name: Purple - Background; type: select-colors;*/ --label-purple-color: #fff; /* name: Purple - Color; type: select-colors;*/ --label-savings-bg: #FFE7EC; /* name: Savings - Background; type: select-colors;*/ --label-savings-color: #F01A67; /* name: Savings - Color; type: select-colors;*/ --label-savings-border: #FCCFDF; /* name: Savings - Border Color; type: select-colors;*/ --label-text-transform: uppercase; --label-margin-bottom: 5px; --tickets-label-color: #fff; --label-xxs-font-size: 10px; --label-xs-font-size: var(--font-size-xs); --label-sm-font-size: var(--font-size-xs); --label-font-size: var(--font-size-sm); --label-lg-font-size: var(--font-size-base); --label-xxs-line-height: var(--line-height-xs); --label-xs-line-height: var(--line-height-xs); --label-sm-line-height: var(--line-height-xs); --label-line-height: var(--line-height-sm); --label-lg-line-height: var(--line-height-base); --label-xxs-padding: 1px 6px; --label-xs-padding: 1px 6px; --label-sm-padding: 3px 6px; --label-padding: 4px 6px; --label-lg-padding: 6px 8px; --label-xxs-border-radius: var(--border-radius-xs); --label-xs-border-radius: var(--border-radius-xs); --label-sm-border-radius: var(--border-radius-sm); --label-border-radius: var(--border-radius-sm); --label-lg-border-radius: var(--border-radius-base); --label-icon-size: 10px; /* WHMCS Status Colors */ --status-pending-transfer: var(--brand-warning-darker); --status-pending: var(--brand-warning-darker); --status-active: var(--brand-success); --status-suspended: var(--brand-danger-lighter); --status-customer-reply: var(--brand-warning-darker); --status-fraud: var(--gray-darker); --status-answered: #7b4f9d; --status-expired: #004258; --status-grace: var(--brand-warning-darker); --status-terminated: var(--gray-lighter); --status-onhold: var(--brand-info); --status-inprogress: var(--brand-danger-lighter); --status-closed: var(--gray-lighter-2); --status-paid: var(--brand-success); --status-unpaid: var(--brand-danger); --status-cancelled: var(--gray-lighter-2); --status-collections: #2c3e50; --status-refunded: var(--brand-warning); --status-payment-pending: var(--brand-info); --status-accepted: var(--brand-success); --status-delivered: var(--brand-warning); --status-lost: var(--gray-darker); --status-default: var(--gray-base); --status-type-operator: var(--label-info-bg); --status-type-operator-text-color: var(--label-info-color); --status-type-owner: var(--label-success-bg); --status-type-owner-text-color: var(--label-success-color); --status-type-authorizeduser: var(--label-default-bg); --status-type-authorizeduser-text-color: var(--label-default-color); --status-type-registereduser: var(--label-warning-bg); --status-type-registereduser-text-color: var(--label-warning-color); --status-type-guest: var(--label-default-bg); --status-type-guest-text-color: var(--label-default-color); /* Transition */ --transition-base: .24s ease; --transition-fade: opacity .15s linear; --transition-collapse: height .35s ease; /* zindex */ --zindex-navbar: 1000; --zindex-dropdown: 1000; --zindex-popover: 1001; --zindex-tooltip: 1001; --zindex-sticky: 1020; --zindex-navbar-fixed: 1030; --zindex-fixed: 1030; --zindex-modal-background: 1040; --zindex-modal-backdrop: 1040; --zindex-modal: 1050; --zindex-popover: 1060; --zindex-tooltip: 1070; /* Caret */ --caret-width-base: 4px; --caret-width-large: 5px; --caret-width: .3em; --caret-vertical-align: var(--caret-width) * .85; --caret-spacing: var(--caret-width) * .85; /* Other */ --ui-icon-color: var(--gray-icons); --ui-icon-size-base: 18px; --ui-icon-size-small: 12px; --scrollbar-width: 6px; --scrollbar-track-bg: var(--gray-lighter-4); --scrollbar-thumb-bg: var(--gray-lighter-3); --scrollbar-thumb-hover-bg: var(--gray-lighter-2); --scrollbar-secondary-track-bg: rgba(255,255,255, 0.1); --scrollbar-secondary-thumb-bg: rgba(255,255,255, 0.32); --scrollbar-secondary-thumb-hover-bg: rgba(255,255,255, 0.48); /* Section: UI Max Width */ --max-width-xs: 380px; /* Name: Extra Small; group: Max Width; type: size; append: px; */ --max-width-sm: 548px; /* Name: Small; group: Max Width; type: size; append: px; */ --max-width-md: 768px; /* Name: Medium; group: Max Width; type: size; append: px; */ --max-width-lg: 928px; /* Name: Large; group: Max Width; type: size; append: px; */ --container-xl-max-width: 1288px; --container-lg-max-width: 960px; --container-md-max-width: 720px; --container-sm-max-width: 540px; --ui-gutter-base: var(--spacing-3x); --ui-gutter-sm: var(--spacing-2x); --ui-gutter-lg: var(--spacing-4x); --ui-gutter-xlg: var(--spacing-5x); } @media (max-width: 767px) { :root { --ui-gutter-base: var(--spacing-2x); --ui-gutter-sm: var(--spacing-1x); --ui-gutter-lg: var(--spacing-3x); --ui-gutter-xlg: var(--spacing-4x); --ui-block-spacing-sm: calc(var(--spacing-1x)2/); --ui-block-spacing-sm: var(--spacing-1x); --ui-block-spacing-base: var(--spacing-2x); --ui-block-spacing-lg: var(--spacing-3x); --ui-block-spacing-xlg: var(--spacing-4x); --ui-block-padding-base: var(--spacing-2x); --ui-block-padding-base-v: var(--spacing-2x); --ui-block-padding-sm: var(--spacing-2x); --ui-block-padding-sm-v: var(--spacing-1x); --ui-block-padding-lg: var(--spacing-3x); --ui-block-padding-lg-v: var(--spacing-2x); --ui-block-padding-xlg: var(--spacing-4x); --ui-block-padding-xlg-v: var(--spacing-3x); } } .lagom-dark-mode{ /* Section : Dark Mode Colors */ --ui-block-bg: #242424; --ui-block-bg-form: var(--gray-lighter-4); --ui-block-link-hover-bg: var(--gray-faded); --ui-block-link-active-bg: var(--gray-faded); --ui-block-header-bg: transparent; --ui-block-divider-color: #2E2E2E; --dropdown-link-disabled-color: #666666; --status-answered: #9871B7; --status-expired: #3FA1B8; --status-onhold: var(--brand-info-ligher); --status-collections: #6185A8; --status-payment-pending: var(--brand-info-lighter); --box-shadow-base: 0px 0px 1px rgba(0, 0, 0, 0.16), 0px 2px 24px rgba(0, 0, 0, 0.24); --box-shadow-lg: 0px 0px 1px rgba(0, 0, 0, 0.16), 0px 8px 40px rgba(0, 0, 0, 0.24); --box-shadow-xlg: 0px 0px 1px rgba(0, 0, 0, 0.16), 0px 8px 56px rgba(0, 0, 0, 0.24); --state-pirmary-bg: var(--dark-mode-brand-primary-lighter-3); --state-pirmary-text: var(--dark-mode-brand-primary-lighter); --state-pirmary-border: var(--dark-mode-brand-primary-lighter-2); --state-info-bg: var(--dark-mode-brand-info-lighter-4); --state-info-text: var(--dark-mode-brand-info-lighter); --state-info-border: var(--dark-mode-brand-info-lighter-2); --state-success-bg: var(--dark-mode-brand-success-lighter-4); --state-success-text: var(--dark-mode-brand-success); --state-success-border: var(--dark-mode-brand-success-lighter-2); --state-warning-bg: var(--dark-mode-brand-warning-lighter-4); --state-warning-text: var(--dark-mode-brand-warning); --state-warning-border: var(--dark-mode-brand-warning-lighter-2); --state-danger-bg: var(--dark-mode-brand-danger-lighter-4); --state-danger-text: var(--dark-mode-brand-danger); --state-danger-border: var(--dark-mode-brand-danger-lighter-2); --label-success-bg: var(--dark-mode-brand-success-lighter-3); --label-success-color: var(--dark-mode-brand-success); --label-info-bg: var(--dark-mode-brand-info-lighter-3); --label-info-color: var(--dark-mode-brand-info); --label-warning-bg: var(--dark-mode-brand-warning-lighter-3); --label-warning-color: var(--dark-mode-brand-warning); --label-danger-bg: var(--dark-mode-brand-danger-lighter-4); --label-danger-color: var(--dark-mode-brand-danger); --label-savings-bg: #4d2830; --label-savings-color: #F2367A; --label-savings-border: #6B3843; --label-primary-faded-color: var(--brand-primary-lighter); } /*! * Theme Name: Lagom WHMCS Client Theme * Author: RS Studio (https://rsstudio.net) * Theme URL: https://lagom.rsstudio.net/ * Terms of Service: https://lagom.rsstudio.net/legal/terms-of-service/ * * This file is part of a licensed product. Unauthorized redistribution, modification, * or use outside of the licensed environment is strictly prohibited. * * © RS Studio. All rights reserved. */ :root { /* Name: Typography; Index: 1 */ /* Section: Font Family */ --font-family-base: "Inter", system-ui, sans-serif; /* name: Use Google Font Face; type: font; */ /* name: Use Google Font Face; type: font; */ --font-family-custom: "Sora", "Inter", system-ui, sans-serif; /*name: Use Custom Font Face; type: custom-font; overwrite: --font-family-base;*/ /*name: Use Custom Font Face; type: custom-font; overwrite: --font-family-base;*/ --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --font-family-icons-medium: 'lagom-medium-icons'; --font-family-icons-small: 'lagom-small-icons'; /* Section: Font Color */ --text-body-color: var(--gray-base); /* name: Base; group: Font Color; type: select-colors; */ --text-lighter-color: var(--gray-lighter); /* name: Lighter; group: Font Color; type: select-colors; */ --text-faded-color: var(--gray-lighter-2); /* name: Faded; group: Font Color; type: select-colors; */ --text-heading-color: var(--gray-darker); /* name: Heading; group: Font Color; type: select-colors; */ --text-primary-color: var(--brand-primary); /* name: Primary; group: Font Color; type: select-colors; */ --text-success-color: var(--brand-success); /* name: Success; group: Font Color; type: select-colors; */ --text-warning-color: var(--brand-warning); /* name: Warning; group: Font Color; type: select-colors; */ --text-danger-color: var(--brand-danger); /* name: Danger; group: Font Color; type: select-colors; */ /* Section: Secondary Font Color - on secondary and primary color */ --text-secondary-body-color: hsla(0, 0%, 100%, 92%); /* name: Secondary - Base; group: Font Color; type: select-colors; */ --text-secondary-lighter-color: hsla(0, 0%, 100%, 80%); /* name: Secondary - Lighter; group: Font Color; type: select-colors; */ --text-secondary-faded-color: hsla(0, 0%, 100%, 56%); /* name: Secondary - Faded; group: Font Color; type: select-colors; */ --text-secondary-heading-color: #fff; /* name: Secondary - Heading; group: Font Color; type: select-colors; */ --text-secondary-primary-color: var(--brand-primary-lighter); /* name: Secondary - Primary; group: Font Color; type: select-colors; */ --text-secondary-success-color: var(--brand-success-lighter); /* name: Secondary - Success; group: Font Color; type: select-colors; */ --text-secondary-warning-color: var(--brand-warning-lighter); /* name: Secondary - Warning; group: Font Color; type: select-colors; */ --text-secondary-danger-color: var(--brand-danger-lighter); /* name: Secondary - Danger; group: Font Color; type: select-colors; */ /* Section: Link Colors */ --link-color: var(--text-primary-color); /* name: Link; group: Font Color; type: select-colors; */ --link-hover-color: var(--text-primary-color); /* name: Link Hover; group: Font Color; type: select-colors; */ --ui-nav-link-color: var(--text-heading-color); /* name: Nav Link; group: Font Color; type: select-colors; */ --ui-nav-link-hover-color: var(--text-primary-color); /* name: Nav Link - Hover; group: Font Color; type: select-colors; */ --ui-nav-link-active-color: var(--text-primary-color); /* name: Nav Link - Active; group: Font Color; type: select-colors; */ --ui-nav-link-icon-color: var(--gray-icons); /* name: Nav Link Icon; group: Font Color; type: select-colors; */ --ui-nav-link-icon-hover-color: var(--gray-icons-hover); /* name: Nav Link Icon - Hover; group: Font Color; type: select-colors; */ --ui-nav-link-icon-active-color: var(--gray-icons-hover); /* name: Nav Link Icon - Active; group: Font Color; type: select-colors; */ --ui-nav-secondary-link-color: var(--text-body-color); /* name: Sub Nav Link; group: Font Color; type: select-colors; */ --ui-nav-secondary-link-hover-color: var(--text-primary-color); /* name: Sub Nav Link - Hover; group: Font Color; type: select-colors; */ --ui-nav-secondary-link-active-color: var(--text-primary-color); /* name: Sub Nav Link - Active; group: Font Color; type: select-colors; */ --ui-nav-secondary-link-icon-color: var(--gray-icons); /* name: Sub Nav Link Icon; group: Font Color; type: select-colors; */ --ui-nav-secondary-link-icon-hover-color: var(--gray-icons-hover); /* name: Sub Nav Link Icon - Hover; group: Font Color; type: select-colors; */ --ui-nav-secondary-link-icon-active-color: var(--gray-icons-hover); /* name: Sub Nav Link Icon - Active; group: Font Color; type: select-colors; */ /* Section: Font Size */ --font-size-xs: 12px; /* name: Extra Small; group: Font Size; type: size; append: px;*/ --font-size-sm: 13px; /* name: Small; group: Font Size; type: size; append: px;*/ --font-size-base: 14px; /* name: Base; group: Font Size; type: size; append: px;*/ --font-size-md: 15px; /* name: Medium; group: Font Size; type: size; append: px;*/ --font-size-lg: 17px; /* name: Large; group: Font Size; type: size; append: px;*/ --font-size-xlg: 20px; /* name: Extra Large; group: Font Size; type: size; append: px;*/ --font-size-xxlg: 24px; /* name: Super Large; group: Font Size; type: size; append: px;*/ --font-size-h6: 18px; /* name: Heading "h6"; group_name: H6; group: Font Size; type: size; append: px;*/ --font-size-h5: 20px; /* name: Heading "h5"; group_name: H5; group: Font Size; type: size; append: px;*/ --font-size-h4: 26px; /* name: Heading "h4"; group_name: H4; group: Font Size; type: size; append: px;*/ --font-size-h3: 36px; /* name: Heading "h3"; group_name: H3; group: Font Size; type: size; append: px;*/ --font-size-h2: 40px; /* name: Heading "h2"; group_name: H2; group: Font Size; type: size; append: px;*/ --font-size-h1: 48px; /* name: Heading "h1"; group_name: H1; group: Font Size; type: size; append: px;*/ /* Section: Font Line Height */ --line-height-xs: 18px; /* name: Extra Small; group: Line Height; type: size; append: px;*/ --line-height-sm: 20px; /* name: Small; group: Line Height; type: size; append: px;*/ --line-height-base: 24px; /* name: Base; group: Line Height; type: size; append: px;*/ --line-height-md: 24px; /* name: Medium; group: Line Height; type: size; append: px;*/ --line-height-lg: 28px; /* name: Large; group: Line Height; type: size; append: px;*/ --line-height-xlg: 32px; /* name: Extra Large; group: Line Height; type: size; append: px;*/ --line-height-xxlg: 40px; /* name: Super Large; group: Line Height; type: size; append: px;*/ --line-height-h6: 24px; /* name: Heading "h6"; group_name: H6; group: Line Height; type: size; append: px;*/ --line-height-h5: 28px; /* name: Heading "h5"; group_name: H5; group: Line Height; type: size; append: px;*/ --line-height-h4: 34px; /* name: Heading "h4"; group_name: H4; group: Line Height; type: size; append: px;*/ --line-height-h3: 46px; /* name: Heading "h3"; group_name: H3; group: Line Height; type: size; append: px;*/ --line-height-h2: 52px; /* name: Heading "h2"; group_name: H2; group: Line Height; type: size; append: px;*/ --line-height-h1: 56px; /* name: Heading "h1"; group_name: H1; group: Line Height; type: size; append: px;*/ /* Section: Font Weight */ --font-weight-light: 300; /* name: Light; group: Font Weight;*/ --font-weight-base: 400; /* name: Base; group: Font Weight;*/ --font-weight-medium: 500; /* name: Medium; group: Font Weight;*/ --font-weight-bold: 700; /* name: Bold; group: Font Weight;*/ --font-weight-black: 900; /* name: Black; group: Font Weight;*/ --font-weight-bolder: bolder; --font-weight-h6: var(--font-weight-medium); /* name: Heading "h6"; var_group: Font Weight; group: Font Weight;*/ --font-weight-h5: var(--font-weight-base); /* name: Heading "h5"; var_group: Font Weight; group: Font Weight;*/ --font-weight-h4: var(--font-weight-light); /* name: Heading "h4"; var_group: Font Weight; group: Font Weight;*/ --font-weight-h3: var(--font-weight-bold); /* name: Heading "h3"; var_group: Font Weight; group: Font Weight;*/ --font-weight-h2: var(--font-weight-light); /* name: Heading "h2"; var_group: Font Weight; group: Font Weight;*/ --font-weight-h1: var(--font-weight-black); /* name: Heading "h1"; var_group: Font Weight; group: Font Weight;*/ --paragraph-margin-bottom: var(--spacing-2x); --headings-margin-bottom: var(--spacing-2x); --link-decoration: none; --article-font-color: var(--text-body-color); --article-font-size-base: var(--font-size-lg); --article-font-weight-base: var(--font-weight-base); --article-line-height-base: var(--line-height-lg); --article-h1-margin-top: var(--spacing-8x); --article-h1-margin-bottom: var(--spacing-6x); --article-h2-margin-top: var(--spacing-6x); --article-h2-margin-bottom: var(--spacing-4x); --article-h3-margin-top: var(--spacing-5x); --article-h3-margin-bottom: var(--spacing-4x); --article-h4-margin-top: var(--spacing-5x); --article-h4-margin-bottom: var(--spacing-4x); --article-h5-margin-top: var(--spacing-4x); --article-h5-margin-bottom: var(--spacing-2x); --article-h6-margin-top: var(--spacing-3x); --article-h6-margin-bottom: var(--spacing-2x); } @media (max-width: 767px) { :root { --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 14px; --font-size-md: 15px; --font-size-lg: 16px; --font-size-xlg: 18px; --font-size-xxlg: 21px; --font-size-h6: 16px; --font-size-h5: 18px; --font-size-h4: 21px; --font-size-h3: 26px; --font-size-h2: 32px; --font-size-h1: 40px; --line-height-xs: 18px; --line-height-sm: 20px; --line-height-base: 24px; --line-height-md: 24px; --line-height-lg: 28px; --line-height-xlg: 32px; --line-height-xxlg: 40px; --line-height-h6: 22px; --line-height-h5: 28px; --line-height-h4: 30px; --line-height-h3: 34px; --line-height-h2: 40px; --line-height-h1: 48px; } } .lagom-dark-mode{ /* Section : Dark Mode Colors */ --text-primary-color: var(--brand-primary-lighter); --text-heading-color: #fff; } /*! * Theme Name: Lagom WHMCS Client Theme * Author: RS Studio (https://rsstudio.net) * Theme URL: https://lagom.rsstudio.net/ * Terms of Service: https://lagom.rsstudio.net/legal/terms-of-service/ * * This file is part of a licensed product. Unauthorized redistribution, modification, * or use outside of the licensed environment is strictly prohibited. * * © RS Studio. All rights reserved. */ :root { /* Name: Layout; Index: 4 */ /* Main - Top */ --main-top-bg: transparent; --main-top-border-bottom: 1px solid var(--ui-block-divider-color); --main-top-box-shadow: none; --main-top-padding: 4px 0; /* Main - Body */ --main-body-padding-v: var(--spacing-6x); /* Main Body - Sidebar */ --main-body-sidebar-width: 32%; --main-body-sidebar-padding-h: var(--spacing-6x); --main-body-sidebar-padding-v: var(--spacing-6x); --main-body-sidebar-content-bg: #fff; /* Section: Header */ --main-header-padding-v: var(--spacing-6x); --main-header-title-color: var(--text-heading-color); --main-header-title-font-size: var(--font-size-h2); /* name: Title - Font Size; var_group: Font Size; */ --main-header-title-font-weight: var(--font-weight-h2); /* name: Title - Font Weight; var_group: Font Weight; */ --main-header-title-line-height: var(--line-height-h2); /* name: Title - Line Height; var_group: Line Height; */ --main-header-breadcrumb-font-size: var(--font-size-sm); /* name: Breadcrumb - Font Size; var_group: Font Size; */ --main-header-breadcrumb-color: var(--text-lighter-color); --main-header-breadcrumb-color-active: var(--gray-base); --main-header-label-bg: var(--gray-lighter-4); --main-header-label-desc-color: var(--gray-base); --main-header-label-name-color: var(--gray-darker); /* Section: Header for Banner Layout */ --main-header-banner-bg: var(--brand-primary-gradient-h); /* name: Background; type: select-colors; */ --main-header-banner-title-color: var(--text-secondary-heading-color); /* name: Title - Color; var_group: Font Color; type: select-colors; */ --main-header-banner-breadcrumb-color: var(--text-secondary-lighter-color); /* name: Breadcrumb - Color; var_group: Font Color; type: select-colors; */ --main-header-banner-breadcrumb-color-active: var(--text-secondary-body-color); /* name: Breadcrumb - Active Color; var_group: Font Color; type: select-colors; */ --main-header-banner-label-bg: rgba(255, 255, 255, 0.08); /* name: Label - Background; type: select-colors; */ --main-header-banner-label-desc-color: var(--text-secondary-lighter-color); /* name: Label - Primary Color; var_group: Font Color; type: select-colors; */ --main-header-banner-label-name-color: var(--text-secondary-heading-color); /* name: Label - Secondary Color; var_group: Font Color; type: select-colors; */ --main-header-banner-save-label-bg: #FFE7EC; /* name: Promo Label - Background; type: select-colors; */ --main-header-banner-save-label-color: #F01A67; /* name: Promo Label - Color; type: select-colors; */ --main-header-banner-save-label-border: #FCCFDF; /* name: Promo Label - Border Color; type: select-colors; */ /* Section: Sidebar */ --main-sidebar-sticky-top: var(--spacing-3x); --main-sidebar-width: 280px; /* name: Base - Width; type: size; append: px;*/ --main-sidebar-spacing-h: var(--spacing-5x); --main-sidebar-right-spacing-h: var(--spacing-5x); --main-sidebar-lg-width: 340px; /* name: Large - Width; type: size; append: px;*/ /* Main - Footer */ --main-footer-bg: #fff; --main-footer-border-top: var(--ui-block-divider-border); --main-footer-box-shadow: none; --main-footer-link-font-size: var(--font-size-lg); --main-footer-link-line-height: var(--line-height-lg); --main-footer-link-font-weight: var(--font-weight-light); --main-footer-link-padding-h: 0; --main-footer-link-padding-v: var(--ui-nav-v-link-padding-v); --main-footer-link-color: var(--ui-nav-secondary-link-color); --main-footer-link-hover-color: var(--ui-nav-secondary-link-hover-color); --main-footer-link-hover-padding-h: var(--ui-nav-v-link-hover-padding-h); --main-footer-link-icon-color: var(--ui-nav-secondary-link-icon-color); --main-footer-link-icon-hover-color: var(--ui-nav-secondary-link-icon-hover-color); --main-footer-link-icon-size: 18px; --main-footer-h-link-padding-v: var(--spacing-1x); --main-footer-h-link-padding-h: var(--spacing-2x); /* Extended - Footer */ --main-footer-extended-padding: var(--spacing-9x); --main-footer-extended-border-top: var(--main-footer-border-top); --main-footer-extended-spacing: var(--spacing-3x); --main-footer-extended-company-margin-right: var(--spacing-8x); --main-footer-extended-title-color: var(--text-heading-color); --main-footer-extended-title-font-size: var(--font-size-xlg); --main-footer-extended-title-line-height: var(--line-height-lg); --main-footer-extended-title-font-weight: var(--font-weight-base); --main-footer-extended-title-margin-bottom: var(--spacing-2x); --main-footer-extended-desc-color: var(--text-body-color); --main-footer-extended-desc-font-size: var(--font-size-base); --main-footer-extended-desc-line-height: var(--line-height-base); --main-footer-extended-desc-font-weight: var(--font-weight-light); --main-footer-extended-desc-margin: var(--spacing-4x) 0 var(--spacing-2x) 0; --main-footer-extended-link-hover-padding-h: var(--ui-nav-v-link-hover-padding-h); --main-footer-extended-side-min-width: 240px; /* Container */ --layout-container-gutter: 40px; --layout-left-container-gutter: 40px; /* Section: Client Area Section */ --ca-section-spacing: var(--spacing-6x); --ca-section-header-margin-bottom: var(--spacing-3x); --ca-section-title-color: var(--text-heading-color); --ca-section-title-font-size: var(--font-size-h4); /* name: Title - Font Size; var_group: Font Size; */ --ca-section-title-font-weight: var(--font-weight-h4); /* name: Title - Font Weight; var_group: Font Weight; */ --ca-section-title-line-height: var(--line-height-h4); /* name: Title - Line height; var_group: Line Height; */ --ca-section-desc-color: var(--text-body-color); --ca-section-desc-font-size: var(--font-size-base); --ca-section-desc-font-weight: var(--font-weight-base); --ca-section-desc-line-height: var(--line-height-base); --ca-section-sm-spacing: var(--spacing-4x); --ca-section-sm-title-font-size: var(--font-size-h5); --ca-section-sm-title-font-weight: var(--font-weight-h5); --ca-section-sm-title-line-height: var(--line-height-h5); } @media (max-width: 1319px) { :root { --main-sidebar-spacing-h: var(--spacing-4x); --main-body-sidebar-width: 40%; --main-footer-extended-side-min-width: 160px; } } @media (max-width: 991px) { :root { --main-footer-extended-desc-margin: var(--spacing-1x) 0 0 0; --main-footer-extended-spacing: var(--spacing-2x); } } @media (max-width: 767px) { :root { --main-body-padding-v: var(--spacing-5x); --main-header-padding-v: var(--spacing-5x); --main-body-sidebar-padding-h: var(--spacing-4x); --main-body-sidebar-padding-v: var(--spacing-4x); --ca-section-spacing: var(--spacing-4x); --main-footer-extended-padding: var(--spacing-6x); } } @media (max-width: 479px) { :root { --layout-container-gutter: 24px; } } .lagom-dark-mode{ --main-header-banner-save-label-bg: #4D2830; --main-header-banner-save-label-color: #F2367A; --main-header-banner-save-label-border: #6B3843; --main-footer-bg: #121212; --main-top-bg: transparent; --main-body-sidebar-content-bg: transparent; } /*! * Theme Name: Lagom WHMCS Client Theme * Author: RS Studio (https://rsstudio.net) * Theme URL: https://lagom.rsstudio.net/ * Terms of Service: https://lagom.rsstudio.net/legal/terms-of-service/ * * This file is part of a licensed product. Unauthorized redistribution, modification, * or use outside of the licensed environment is strictly prohibited. * * © RS Studio. All rights reserved. */ :root { /* Name: Navigation; Index: 3 */ /* Section: Navigation Logo */ --app-nav-logo-height: 42px; /* name: Height; type: size; append: px;*/ --app-nav-logo-width: 100%; --app-nav-header-height: calc(var(--app-nav-logo-height) + var(--spacing-4x)); /* Section: Top Layout Navigation*/ --app-nav-top-bg: #fff; --app-nav-navbar-bg: var(--app-nav-top-bg); --app-nav-top-box-shadow: var(--box-shadow-sm); /* name: Shadow; var_group: Box Shadow; */ --app-nav-top-border-bottom: none; --app-nav-top-menu-link-color: var(--ui-nav-link-color); /* name: Menu Link - Color; var_group: Font Color; type: select-colors;*/ --app-nav-top-menu-link-hover-color: var(--ui-nav-link-hover-color); /* name: Menu Link - Hover Color; var_group: Font Color;type: select-colors; */ --app-nav-top-menu-link-font-size: var(--font-size-lg); /* name: Menu Link - Font Size; var_group: Font Size; */ --app-nav-top-menu-link-font-weight: var(--font-weight-base); /* name: Menu Link - Font Weight; var_group: Font Weight; */ --app-nav-top-menu-link-line-height: var(--line-height-base); /* name: Menu Link - Line Height; var_group: Line Height; */ --app-nav-top-menu-icon-size: 18px; /* name: Menu Link - Icon Size; type: size; append: px;*/ --app-nav-top-menu-svg-icon-size: 32px; /* name: Menu Link - SVG Icon Size; type: size; append: px;*/ --app-nav-top-menu-icon-color: var(--ui-nav-link-icon-color); /* name: Menu Link - Icon Color; var_group: Font Color; type: select-colors;*/ --app-nav-top-menu-icon-hover-color: var(--ui-nav-link-icon-hover-color); /* name: Menu Link - Icon Hover Color; var_group: Font Color; type: select-colors;*/ --app-nav-top-menu-link-padding-h: var(--spacing-3x); --app-nav-top-menu-link-padding-v: var(--spacing-2x); --app-nav-top-menu-dropdown-width: 250px; --app-nav-top-menu-dropdown-icon-size: 40px; /* Secondary Navigation*/ --top-nav-link-padding-h: 8px; --top-nav-link-padding-v: 6px; --top-nav-link-spacing: 8px; --top-nav-link-color: var(--ui-nav-secondary-link-color); --top-nav-link-hover-color: var(--ui-nav-secondary-link-hover-color); --top-nav-link-active-color: var(--ui-nav-secondary-link-active-color); --top-nav-link-icon-color: var(--ui-nav-secondary-link-icon-color); --top-nav-link-icon-hover-color: var(--ui-nav-secondary-link-icon-hover-color); --top-nav-link-icon-active-color: var(--ui-nav-secondary-link-icon-active-color); /* Top Condensed Layout Navigation */ --app-nav-top-condensed-header-height: 36px; --app-nav-top-condensed-header-border-bottom: 1px solid var(--ui-block-divider-color); --app-nav-top-condensed-menu-link-padding-h: var(--spacing-2x); --app-nav-top-condensed-menu-link-padding-v: var(--app-nav-top-menu-link-padding-v); --app-nav-top-condensed-logo-spacing: var(--spacing-4x); /* Section: Left Layout Navigation */ --app-nav-left-width: 140px; /* name: Width; type: size; append: px;*/ --app-nav-left-bg: #fff; --app-nav-left-box-shadow: var(--box-shadow-lg); /* name: Shadow; var_group: Box Shadow; */ --app-nav-left-link-hover-bg: transparent; --app-nav-left-link-active-bg: var(--ui-nav-link-active-bg); --app-nav-left-link-color: var(--text-heading-color); /* name: Menu Link - Color; var_group: Font Color; type: select-colors; */ --app-nav-left-link-hover-color: var(--ui-nav-link-hover-color); /* name: Menu Link - Hover Color; var_group: Font Color; type: select-colors; */ --app-nav-left-link-active-color: var(--ui-nav-link-active-color); /* name: Menu Link - Active Color; var_group: Font Color; type: select-colors; */ --app-nav-left-link-font-size: var(--font-size-lg); /* name: Menu Link - Font Size; var_group: Font Size */ --app-nav-left-link-font-weight: var(--font-weight-base); /* name: Menu Link - Font Weight; var_group: Font Weight */ --app-nav-left-link-padding-h: var(--spacing-2x); --app-nav-left-link-padding-v: var(--spacing-2x); --app-nav-left-icon-size: 18px; /* name: Menu Link - Icon Size; type: size; append: px;*/ --app-nav-left-svg-icon-size: 40px; /* name: Menu Link - SVG Icon Size; type: size; append: px;*/ --app-nav-left-icon-color: var(--ui-nav-link-icon-color); /* name: Menu Link - Icon Color; var_group: Font Color; type: select-colors;*/ --app-nav-left-icon-hover-color: var(--ui-nav-link-icon-hover-color); /* name: Menu Link - Icon Hover Color; var_group: Font Color; type: select-colors; */ --app-nav-left-icon-active-color: var(--ui-nav-link-icon-active-color); /* name: Menu Link - Icon Active Color; var_group: Font Color; type: select-colors; */ --app-nav-left-dropdown-icon-size: 12px; --app-nav-left-dropdown-width: 240px; /* Section: Left Wide Layout Navigation */ --app-nav-left-wide-width: 280px; /* name: Width; type: size; append: px; */ --app-nav-left-wide-link-padding-h: var(--spacing-3x); --app-nav-left-wide-link-padding-v: var(--spacing-2x); --app-nav-left-wide-link-color: var(--ui-nav-link-color); --app-nav-left-wide-link-hover-color: var(--ui-nav-link-hover-color); --app-nav-left-wide-link-hover-bg: transparent; --app-nav-left-wide-link-hover-padding-h: var(--ui-nav-v-link-hover-padding-h); --app-nav-left-wide-link-active-padding-h: var(--ui-nav-v-link-active-padding-h); --app-nav-left-wide-link-active-color: var(--ui-nav-link-active-color); --app-nav-left-wide-link-active-bg: var(--ui-nav-link-active-bg); --app-nav-left-wide-icon-color: var(--ui-nav-link-icon-color); --app-nav-left-wide-icon-hover-color: var(--ui-nav-link-icon-hover-color); --app-nav-left-wide-icon-active-color: var(--ui-nav-link-icon-active-color); --app-nav-left-wide-svg-icon-size: 32px; /* name: Menu Link - SVG Icon Size; type: size; append: px;*/ --app-nav-left-wide-dropdown-border-left: 1px solid var(--ui-block-divider-color); --app-nav-left-wide-dropdown-padding-h: var(--app-nav-left-wide-link-padding-h); --app-nav-left-wide-dropdown-padding-v: 16px; --app-nav-left-wide-dropdown-link-color: var(--ui-nav-link-color); --app-nav-left-wide-dropdown-link-hover-bg: var(--ui-nav-link-hover-bg); --app-nav-left-wide-dropdown-link-hover-color: var(--ui-nav-link-hover-color); --app-nav-left-wide-dropdown-link-hover-padding-h: var(--ui-nav-v-link-hover-padding-h); --app-nav-left-wide-dropdown-link-active-padding-h: 0; --app-nav-left-wide-dropdown-link-active-color: var(--ui-nav-link-active-color); --app-nav-left-wide-dropdown-link-active-bg: var(--ui-nav-link-active-bg); --app-nav-left-wide-dropdown-icon-color: var(--app-nav-left-icon-color); --app-nav-left-wide-dropdown-icon-hover-color: var(--app-nav-left-icon-hover-color); --app-nav-left-wide-dropdown-icon-active-color: var(--app-nav-left-icon-active-color); --app-nav-left-wide-dropdown-open-bg: transparent; --app-nav-left-wide-dropdown-open-bg-on-primary: rgba(0,0,0, 0.08); --app-nav-left-wide-dropdown-open-bg-on-secondary: rgba(0,0,0, 0.08); /* Section: Extended Navigation */ --extended-nav-dropdown-width: 364px; --extended-nav-link-hover-bg: var(--brand-primary-lighter-4); --extended-nav-link-hover-color: var(--brand-primary); /* Section: Top New Layout Navigation */ --app-nav-top-new-spacing-h: var(--spacing-3x); --app-nav-top-new-spacing-v: var(--spacing-3x); /* Navigation - Mobile */ --mob-app-nav-bg: #fff; --mob-app-nav-width: 270px; --mob-app-nav-logo-height: 40px; --mob-app-nav-menu-padding-h: var(--spacing-2x); /* Navigation - Mobile Dropdown */ --mob-dropdown-nav-bg: var(--ui-block-overlay-bg-2); --mob-dropdown-nav-bg-filter: unset; --mob-dropdown-nav-bg-hover: transparent; --mob-dropdown-nav-bg-active: transparent; --mob-dropdown-nav-border-radius: var(--border-radius-lg); --mob-dropdown-nav-width: 270px; --mob-dropdown-nav-logo-height: 40px; --mob-dropdown-nav-padding-h: 0px; --mob-dropdown-nav-padding-v: var(--spacing-1x); --mob-dropdown-nav-margin-h: var(--spacing-3x); --mob-dropdown-nav-box-shadow: var(--box-shadow-lg); --mob-dropdown-nav-link-bg: transparent; --mob-dropdown-nav-link-hover-bg: transparent; --mob-dropdown-nav-link-active-bg: transparent; --mob-dropdown-nav-link-color: var(--text-heading-color); --mob-dropdown-nav-link-hover-color: var(--ui-nav-link-hover-color); --mob-dropdown-nav-link-active-color: var(--ui-nav-link-active-color); --mob-dropdown-nav-link-font-size: var(--font-size-lg); --mob-dropdown-nav-link-font-weight: var(--font-weight-medium); --mob-dropdown-nav-link-padding-h: var(--spacing-3x); --mob-dropdown-nav-link-padding-v: var(--spacing-2x); --mob-dropdown-nav-link-list-padding-h: var(--spacing-2x); --mob-dropdown-nav-link-list-padding-v: 6px; --mob-dropdown-nav-caret-color: var(--gray-icons); --mob-dropdown-nav-list-bg: var(--gray-faded); --mob-dropdown-nav-list-box-shadow: none; --mob-dropdown-nav-list-padding-h: var(--spacing-3x); --mob-dropdown-nav-list-padding-v: 0; --mob-dropdown-nav-list-sidebar-bg: var(--gray-lighter-4); --mob-dropdown-nav-svg-icon-size: 40px; /* Header - Mobile */ --mob-app-nav-header-bg: #fff; --mob-app-nav-header-border-bottom: var(--ui-block-border); --mob-app-nav-header-box-shadow: var(--box-shadow-lg); --mob-app-nav-header-height: 74px; } @media (min-width: 992px) and (max-width: 1320px) { :root { --app-nav-top-menu-link-padding-h: var(--spacing-2x); } } .lagom-dark-mode{ /* Section : Dark Mode Colors */ --app-nav-top-menu-link-color: var(--text-heading-color); --app-nav-top-bg: #242424; --app-nav-left-bg: #242424; --mob-app-nav-header-bg: #242424; --mob-app-nav-bg: #242424; --mob-dropdown-nav-bg: #242424; --extended-nav-link-hover-bg: var(--gray-faded); --extended-nav-link-hover-color: var(--brand-primary-lighter); } /*! * Theme Name: Lagom WHMCS Client Theme * Author: RS Studio (https://rsstudio.net) * Theme URL: https://lagom.rsstudio.net/ * Terms of Service: https://lagom.rsstudio.net/legal/terms-of-service/ * * This file is part of a licensed product. Unauthorized redistribution, modification, * or use outside of the licensed environment is strictly prohibited. * * © RS Studio. All rights reserved. */ :root { /* Name: Buttons; Index: 5 */ /* General */ --btn-white-space: nowrap; --btn-transition: var(--transition-base); --btn-font-family: var(--font-family-base); --btn-border-width: 1px; --btn-block-spacing-y: var(--spacing-1x); --btn-box-shadow: none; --btn-focus-box-shadow: 0 0 0 .var(--spacing-2x) rgba(var(--brand-primary) .25); --btn-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); --btn-spacing-between: var(--spacing-2x); --btn-spacing-between-sm: var(--spacing-1x); --btn-link-font-weight: var(--font-weight-base); /* Section: Extra Small */ --btn-xs-font-size: var(--font-size-xs); /* name: Font Size; var_group: Font Size; */ --btn-xs-font-weight: var(--font-weight-base); /* name: Font Weight; var_group: Font Weight; */ --btn-xs-line-height: var(--line-height-xs); /* name: Line Height; var_group: Line Height; */ --btn-xs-border-radius: var(--border-radius-xs); /* name: Border Radius; var_group: Border Radius; */ --btn-xs-icon-spacing: 6px; /* Section: Small */ --btn-sm-font-size: var(--font-size-sm); /* name: Font Size; var_group: Font Size; */ --btn-sm-font-weight: var(--font-weight-medium); /* name: Font Weight; var_group: Font Weight; */ --btn-sm-line-height: var(--line-height-sm); /* name: Line Height; var_group: Line Height; */ --btn-sm-border-radius: var(--border-radius-xs); /* name: Border Radius; var_group: Border Radius; */ --btn-sm-icon-spacing: 8px; /* Section: Base */ --btn-base-font-size: var(--font-size-base); /* name: Font Size; var_group: Font Size; */ --btn-base-font-weight: var(--font-weight-medium); /* name: Font Weight; var_group: Font Weight; */ --btn-base-line-height: var(--line-height-base); /* name: Line Height; var_group: Line Height; */ --btn-base-border-radius: var(--border-radius-xs); /* name: Border Radius; var_group: Border Radius; */ --btn-base-icon-spacing: 12px; /* Section: Large */ --btn-lg-font-size: var(--font-size-lg); /* name: Font Size; var_group: Font Size; */ --btn-lg-font-weight: var(--font-weight-medium); /* name: Font Weight; var_group: Font Weight; */ --btn-lg-line-height: var(--line-height-lg); /* name: Line Height; var_group: Line Height; */ --btn-lg-border-radius: var(--border-radius-sm); /* name: Border Radius; var_group: Border Radius; */ --btn-lg-icon-spacing: 16px; /* Section: Extra Large */ --btn-xlg-font-size: var(--font-size-xlg); /* name: Font Size; var_group: Font Size; */ --btn-xlg-font-weight: var(--font-weight-medium); /* name: Font Weight; var_group: Font Weight; */ --btn-xlg-line-height: var(--line-height-xlg); /* name: Line Height; var_group: Line Height; */ --btn-xlg-border-radius: var(--border-radius-base); /* name: Border Radius; var_group: Border Radius; */ --btn-xlg-icon-spacing: 20px; /* Section: Default */ --btn-default-bg: transparent; /* name: Background; type: select-colors;*/ --btn-default-border: var(--gray-lighter-3); /* name: Border Color; type: select-colors;*/ --btn-default-color: var(--gray-darker); /* name: Font Color; type: select-colors;*/ --btn-default-hover-bg: var(--gray-faded); /* name: Hover - Background; type: select-colors;*/ --btn-default-hover-border: var(--gray-lighter-2); /* name: Hover - Border Color; type: select-colors;*/ --btn-default-hover-color: var(--gray-darker); /* name: Hover - Font Color; type: select-colors;*/ --btn-default-active-bg: var(--gray-lighter-3); /* name: Active - Background; type: select-colors;*/ --btn-default-active-border: transparent; /* name: Active - Border Color; type: select-colors;*/ /* Section: Primary */ --btn-primary-bg: var(--brand-primary); /* name: Background; type: select-colors;*/ --btn-primary-border: var(--brand-primary); /* name: Border Color; type: select-colors;*/ --btn-primary-color: #fff; /* name: Font Color; type: select-colors;*/ --btn-primary-hover-bg: var(--brand-primary-lighter); /* name: Hover - Background; type: select-colors;*/ --btn-primary-hover-border: var(--brand-primary-lighter); /* name: Hover - Border Color; type: select-colors;*/ --btn-primary-hover-color: #fff; /* name: Hover - Font Color; type: select-colors;*/ --btn-primary-active-bg: var(--brand-primary-darker); /* name: Active - Background; type: select-colors;*/ --btn-primary-active-border: var(--brand-primary-darker); /* name: Active - Border Color; type: select-colors;*/ /* Section: Primary Faded */ --btn-primary-faded-bg: var(--brand-primary-lighter-3); /* name: Background; type: select-colors;*/ --btn-primary-faded-border: var(--brand-primary-lighter-3); /* name: Border Color; type: select-colors;*/ --btn-primary-faded-color: var(--brand-primary); /* name: Font Color; type: select-colors;*/ --btn-primary-faded-hover-bg: var(--brand-primary-lighter-2); /* name: Hover - Background; type: select-colors;*/ --btn-primary-faded-hover-border: var(--brand-primary-lighter-2); /* name: Hover - Border Color; type: select-colors;*/ --btn-primary-faded-hover-color: var(--brand-primary); /* name: Hover - Font Color; type: select-colors;*/ --btn-primary-faded-active-bg: var(--brand-primary-lighter-2); /* name: Active - Background; type: select-colors;*/ --btn-primary-faded-active-border: var(--brand-primary-lighter-2); /* name: Active - Border Color; type: select-colors;*/ /* Section: Secondary */ --btn-secondary-bg: var(--brand-secondary); /* name: Background; type: select-colors;*/ --btn-secondary-border: var(--brand-secondary); /* name: Border Color; type: select-colors;*/ --btn-secondary-color: #fff; /* name: Font Color; type: select-colors;*/ --btn-secondary-hover-bg: var(--brand-secondary-lighter); /* name: Hover - Background; type: select-colors;*/ --btn-secondary-hover-border: var(--brand-secondary-lighter); /* name: Hover - Border Color; type: select-colors;*/ --btn-secondary-hover-color: #fff; /* name: Hover - Font Color; type: select-colors;*/ --btn-secondary-active-bg: var(--brand-secondary-darker); /* name: Active - Background; type: select-colors;*/ --btn-secondary-active-border: var(--brand-secondary-darker); /* name: Active - Border Color; type: select-colors;*/ /* Section: Success */ --btn-success-bg: var(--brand-success-darker); /* name: Background; type: select-colors;*/ --btn-success-border: var(--brand-success-darker); /* name: Border Color; type: select-colors;*/ --btn-success-color: #fff; /* name: Font Color; type: select-colors;*/ --btn-success-hover-bg: var(--brand-success); /* name: Hover - Background; type: select-colors;*/ --btn-success-hover-border: var(--brand-success); /* name: Hover - Border Color; type: select-colors;*/ --btn-success-hover-color: #fff; /* name: Hover - Font Color; type: select-colors;*/ --btn-success-active-bg: var(--brand-success-lighter-2); /* name: Active - Background; type: select-colors;*/ --btn-success-active-border: var(--brand-success-lighter-2); /* name: Active - Border Color; type: select-colors;*/ /* Section: Info */ --btn-info-bg: var(--brand-info-darker); /* name: Background; type: select-colors;*/ --btn-info-border: var(--brand-info-darker); /* name: Border Color; type: select-colors;*/ --btn-info-color: #fff; /* name: Font Color; type: select-colors;*/ --btn-info-hover-bg: var(--brand-info); /* name: Hover - Background; type: select-colors;*/ --btn-info-hover-border: var(--brand-info); /* name: Hover - Border Color; type: select-colors;*/ --btn-info-hover-color: #fff; /* name: Hover - Font Color; type: select-colors;*/ --btn-info-active-bg: var(--brand-info-lighter-2); /* name: Active - Background; type: select-colors;*/ --btn-info-active-border: var(--brand-info-lighter-2); /* name: Active - Border Color; type: select-colors;*/ /* Section: Warning */ --btn-warning-bg: var(--brand-warning-darker); /* name: Background; type: select-colors;*/ --btn-warning-border: var(--brand-warning-darker); /* name: Border Color; type: select-colors;*/ --btn-warning-color: #fff; /* name: Font Color; type: select-colors;*/ --btn-warning-hover-bg: var(--brand-warning); /* name: Hover - Background; type: select-colors;*/ --btn-warning-hover-border: var(--brand-warning); /* name: Hover - Border Color; type: select-colors;*/ --btn-warning-hover-color: #fff; /* name: Hover - Font Color; type: select-colors;*/ --btn-warning-active-bg: var(--brand-warning-lighter-2); /* name: Active - Background; type: select-colors;*/ --btn-warning-active-border: var(--brand-warning-lighter-2); /* name: Active - Border Color; type: select-colors;*/ /* Section: Danger */ --btn-danger-bg: var(--brand-danger-darker); /* name: Background; type: select-colors;*/ --btn-danger-border: var(--brand-danger-darker); /* name: Border Color; type: select-colors;*/ --btn-danger-color: #fff; /* name: Font Color; type: select-colors;*/ --btn-danger-hover-bg: var(--brand-danger); /* name: Hover - Background; type: select-colors;*/ --btn-danger-hover-border: var(--brand-danger); /* name: Hover - Border Color; type: select-colors;*/ --btn-danger-hover-color: #fff; /* name: Hover - Font Color; type: select-colors;*/ --btn-danger-active-bg: var(--brand-danger-lighter-2); /* name: Active - Background; type: select-colors;*/ --btn-danger-active-border: var(--brand-danger-lighter-2); /* name: Active - Border Color; type: select-colors;*/ /* Section: Light */ --btn-light-bg: rgba(255, 255, 255, 0.08); /* name: Background; type: select-colors;*/ --btn-light-border: rgba(255, 255, 255, 0.16); /* name: Border Color; type: select-colors;*/ --btn-light-color: #fff; /* name: Font Color; type: select-colors;*/ --btn-light-hover-bg: rgba(255, 255, 255, 0.16); /* name: Hover - Background; type: select-colors;*/ --btn-light-hover-border: rgba(255, 255, 255, 0.24); /* name: Hover - Border Color; type: select-colors;*/ --btn-light-hover-color: #fff; /* name: Hover - Font Color; type: select-colors;*/ --btn-light-active-bg: rgba(255, 255, 255, 0.24); /* name: Active - Background; type: select-colors;*/ --btn-light-active-border: rgba(255, 255, 255, 0.32); /* name: Active - Border Color; type: select-colors;*/ /* Disabled */ --btn-disabled-color: var(--gray-lighter); --btn-disabled-bg: var(--gray-faded); --btn-disabled-border: transparent; --btn-link-disabled-color: var(--gray-lighter-4); --btn-disabled-opacity: .65; /* Social */ --btn-social-height: 40px; --btn-social-font-size: var(--font-size-sm); --btn-social-padding-h: var(--spacing-2x); --btn-social-border-radius: var(--border-radius-xs); --btn-social-facebook-bg: #4267b2; --btn-social-facebook-hover-bg: #30487b; --btn-social-facebook-border-color: var(--btn-social-facebook-bg); --btn-social-facebook-hover-border: var(--btn-social-facebook-bg); --btn-social-facebook-color: #fff; --btn-social-facebook-hover-color: var(--btn-social-facebook-color); --btn-social-google-bg: #fff; --btn-social-google-hover-bg: #fff; --btn-social-google-border-color: #e6e8ec; --btn-social-google-border-hover-color: #BEC0C4; --btn-social-google-color: #2A2E36; --btn-social-twitter-bg: #1DA1F2; --btn-social-twitter-hover-bg: #0597F2; --btn-social-twitter-border-color: var(--btn-social-twitter-bg); --btn-social-twitter-border-hover-color: var(--btn-social-twitter-bg); --btn-social-twitter-color: #fff; --btn-social-twitter-hover-color: var(--btn-social-twitter-color); --btn-social-linkedin-bg: #0077b5; } .lagom-dark-mode{ /* Section : Dark Mode Colors */ --btn-primary-faded-bg: var(--gray-lighter-3); --btn-primary-faded-border: transparent; --btn-primary-faded-color: #fff; --btn-primary-faded-hover-bg: var(--gray-lighter-4); --btn-primary-faded-hover-border: transparent; --btn-primary-faded-hover-color: #fff; --btn-primary-faded-active-bg: var(--gray-lighter-5); --btn-primary-faded-active-border: transparent; } /*! * Theme Name: Lagom WHMCS Client Theme * Author: RS Studio (https://rsstudio.net) * Theme URL: https://lagom.rsstudio.net/ * Terms of Service: https://lagom.rsstudio.net/legal/terms-of-service/ * * This file is part of a licensed product. Unauthorized redistribution, modification, * or use outside of the licensed environment is strictly prohibited. * * © RS Studio. All rights reserved. */ :root { /* Name: Forms; Index: 6 */ --input-font-family: var(--font-family-base); --input-font-weight: var(--font-weight-base); --input-font-size: var(--btn-base-font-size); --input-line-height: var(--btn-base-line-height); --input-xs-font-size: var(--btn-xs-font-size); --input-xs-line-height: var(--btn-xs-line-height); --input-xs-border-radius: var(--btn-xs-border-radius); --input-sm-font-size: var(--btn-sm-font-size); --input-sm-line-height: var(--btn-sm-line-height); --input-sm-border-radius: var(--btn-sm-border-radius); --input-lg-border-radius: var(--btn-lg-border-radius); --input-lg-font-weight: var(--font-weight-light); --input-lg-font-size: var(--btn-lg-font-size); --input-lg-line-height: var(--btn-lg-line-height); --input-xlg-border-radius: var(--btn-xlg-border-radius); --input-xlg-font-weight: var(--font-weight-light); --input-xlg-font-size: var(--btn-xlg-font-size); --input-xlg-line-height: var(--btn-xlg-line-height); --input-border-width: 1px; --input-border: var(--input-border-width) solid var(--input-border-color); --input-border-radius: var(--btn-base-border-radius); --input-focus-box-shadow: var(--input-btn-focus-box-shadow); --input-box-shadow: inset 0 1px 1px rgba(#000, .075); --input-focus-width: var(--input-btn-focus-box-shadow); --input-btn-focus-width: 4px; --input-btn-focus-color: #000; --input-btn-focus-box-shadow: 0 0 0 var(--input-btn-focus-width) var(--input-btn-focus-color); /* Section: Label */ --input-label-color: var(--gray-base); /* name: Font Color; var_group: Font Color; type: select-colors; */ --input-label-font-size: var(--font-size-base); /* name: Font Size; var_group: Font Size; */ --input-label-font-weight: var(--font-weight-base); /* name: Font Weight; var_group: Font Weight; */ --input-label-margin-bottom: var(--spacing-1x); /* Section: Field */ --input-bg: #fff; /* name: Background; type: select-colors;*/ --input-border-color: var(--gray-lighter-3); /* name: Border Color; type: select-colors;*/ --input-color: var(--text-heading-color); /* name: Font Color; var_group: Font Color; type: select-colors;*/ --input-color-placeholder: var(--text-lighter-color); /* name: Placeholder Color; var_group: Font Color; type: select-colors;*/ --input-hover-bg: #fff; /* name: Hover - Background; type: select-colors;*/ --input-hover-border-color: var(--gray-lighter-2); /* name: Hover - Border Color; type: select-colors;*/ --input-hover-color: var(--text-heading-color); /* name: Hover - Font Color; var_group: Font Color; type: select-colors;*/ --input-hover-placeholder-color: var(--text-lighter-color); /* name: Hover - Placeholder Color; var_group: Font Color; type: select-colors;*/ --input-focus-bg: #fff; /* name: Focus - Background; type: select-colors;*/ --input-focus-border-color: var(--brand-primary); /* name: Focus - Border Color; type: select-colors;*/ --input-focus-color: var(--text-heading-color); /* name: Focus - Font Color; var_group: Font Color; type: select-colors;*/ --input-focus-placeholder-color: var(--text-lighter-color); /* name: Focus - Placeholder Color; var_group: Font Color; type: select-colors;*/ --input-disabled-bg: var(--gray-faded); /* name: Disabled - Background; type: select-colors;*/ --input-disabled-border-color: var(--gray-lighter-3); /* name: Disabled - Border Color; type: select-colors;*/ --input-disabled-color: var(--text-heading-color); /* name: Disabled - Font Color; var_group: Font Color; type: select-colors;*/ --input-disabled-color-placeholder: var(--text-lighter-color); /* name: Disabled - Placeholder Color; var_group: Font Color; type: select-colors;*/ /* Section: Radio and Checkbox */ --icheck-bg: #fff; /* name: Background; type: select-colors*/ --icheck-border-width: 2px; /* name: Border Width; type: size; append: px;*/ --icheck-size: 18px; /* name: Size; type: size; append: px;*/ --icheck-border-color: var(--gray-lighter-3); /* name: Border Color; type: select-colors*/ --icheck-hover-bg: #fff; /* name: Hover - Background; type: select-colors*/ --icheck-hover-border-color: var(--brand-primary); /* name: Hover - Border Color; type: select-colors*/ --icheck-active-bg: var(--brand-primary); /* name: Checked - Background; type: select-colors*/ --icheck-active-border-color: var(--brand-primary); /* name: Checked - Border Color; type: select-colors*/ --icheck-active-icon-color: #fff; /* name: Icon Color; type: select-colors*/ --icheck-disabled-bg: var(--gray-lighter-4); /* name: Disabled - Background; type: select-colors*/ --icheck-disabled-border-color: var(--gray-lighter-4); /* name: Disabled - Border Color; type: select-colors*/ --icheck-border-radius: var(--border-radius-sm); --icheck-border: var(--icheck-border-width) solid var(--icheck-border-color); --checkbox-spacing: var(--spacing-2x); /* Input Group */ --input-group-addon-bg: var(--gray-lighter-4); --input-group-addon-border-color: var(--input-border); --input-group-spacing-base: var(--spacing-2x); --input-group-spacing-lg: var(--spacing-3x); --input-group-spacing-sm: var(--spacing-1x); /* Other */ --form-group-margin-bottom: 12px; --form-check-input-gutter: 20px; --form-check-input-margin-y: 5px; --form-check-inline-margin-x: 12px; --form-check-inline-input-margin-x: 5px; --legend-color: var(--gray-darker); --legend-border-color: #e5e5e5; --cursor-disabled: not-allowed; /* Form validation */ --form-text-margin-top: var(--spacing-1x); --form-feedback-margin-top: var(--form-text-margin-top); --form-feedback-font-size: var(--font-size-sm); --form-feedback-valid-color: var(--brand-success); --form-feedback-invalid-color: var(--brand-danger); --form-feedback-icon-valid-color: var(--form-feedback-valid-color); --form-feedback-icon-valid: url("data:image/svg+xml,"); --form-feedback-icon-invalid-color: var(--form-feedback-invalid-color); --form-feedback-icon-invalid: url("data:image/svg+xml,"); /* Form Tooltips */ --form-feedback-tooltip-padding-y: var(--tooltip-padding-y); --form-feedback-tooltip-padding-x: var(--tooltip-padding-x); --form-feedback-tooltip-font-size: var(--tooltip-font-size); --form-feedback-tooltip-line-height: var(--line-height-base); --form-feedback-tooltip-opacity: var(--tooltip-opacity); --form-feedback-tooltip-border-radius: var(--tooltip-border-radius); --form-grid-gutter-width: 10px; --select-option-color: var(--text-body-color); --select-option-bg: #fff; } .lagom-dark-mode{ --input-bg: var(--ui-block-bg); --input-hover-bg: var(--ui-block-bg); --input-focus-bg: var(--ui-block-bg); --icheck-bg: transparent; --icheck-hover-bg: transparent; --select-option-bg: #262626; } /*! * Theme Name: Lagom WHMCS Client Theme * Author: RS Studio (https://rsstudio.net) * Theme URL: https://lagom.rsstudio.net/ * Terms of Service: https://lagom.rsstudio.net/legal/terms-of-service/ * * This file is part of a licensed product. Unauthorized redistribution, modification, * or use outside of the licensed environment is strictly prohibited. * * © RS Studio. All rights reserved. */ :root { /* Table */ --table-font-size-small: var(--font-size-sm); --table-bg: transparent; --table-bg-accent: var(--gray-faded); --table-bg-hover: var(--ui-block-link-hover-bg); --table-bg-active: var(--ui-block-link-hover-bg); --table-border-color: var(--ui-block-divider-color); --table-caption-color: var(--text-muted); --table-vertical-align: middle; --table-horizontal-align: left; --table-horizontal-rtl: right; --table-th-bg: transparent; --table-th-padding: 12px 8px; --table-th-first-last-padding: var(--ui-block-padding-base); --table-th-height: 40px; --table-th-font-color: var(--text-body-color); --table-th-font-size: var(--font-size-sm); --table-th-font-weight: var(--font-weight-base); --table-td-bg: transparent; --table-td-padding: var(--ui-block-padding-base-v) 8px; --table-td-first-last-padding: var(--ui-block-padding-base); --table-td-height: 58px; --table-td-font-color: var(--text-heading-color); --table-td-font-size: var(--font-size-base); --table-condensed-cell-padding: var(--ui-block-padding-sm-v) var(--ui-block-padding-sm); --table-condensed-cell-th-padding: var(--ui-block-padding-sm-v) var(--ui-block-padding-sm); /* Table Container */ --table-container-header-bg: var(--ui-block-header-bg); --table-container-header-height: 48px; --table-container-pagination-bg: var(--ui-block-header-bg); --table-container-bg: var(--ui-block-bg); --table-container-border: var(--ui-block-border); --table-container-box-shadow: var(--ui-block-shadow); --table-container-border-radius: var(--ui-block-border-radius); --table-container-table-padding: 0px; --table-container-table-bg-filter: var(--ui-block-header-bg); --table-container-table-bg-pagination: var(--ui-block-header-bg); /* Dropdown */ --dropdown-bg: #fff; --dropdown-border: var(--ui-block-border); --dropdown-border-radius: var(--ui-block-border-radius); --dropdown-box-shadow: var(--box-shadow-lg); --dropdown-divider-bg: var(--ui-block-divider-color); --dropdown-link-padding-h: var(--ui-block-padding-base); --dropdown-link-padding-v: var(--ui-nav-v-link-padding-v); --dropdown-collapse-link-padding-h: 16px; --dropdown-collapse-link-padding-v: 8px; --dropdown-collapse-bg: var(--gray-faded); --dropdown-link-color: var(--ui-nav-link-color); --dropdown-link-hover-color: var(--ui-nav-link-hover-color); --dropdown-link-hover-bg: var(--ui-nav-link-hover-bg); --dropdown-link-hover-padding-h: calc(var(--dropdown-link-padding-h) + var(--ui-nav-v-link-hover-padding-h)); --dropdown-link-active-color: var(--ui-nav-link-active-color); --dropdown-link-active-bg: var(--ui-nav-link-active-bg); --dropdown-link-disabled-color: var(--ui-nav-link-disabled-bg); --dropdown-link-icon-color: var(--ui-nav-link-icon-color); --dropdown-link-icon-hover-color: var(--ui-nav-link-icon-hover-color); --dropdown-link-icon-active-color: var(--ui-nav-link-icon-active-color); --dropdown-header-color: var(--text-heading-color); --dropdown-caret-color: var(--icons-color); --dropdown-min-width: 200px; /* Navbar */ --navbar-height: 50px; --navbar-border-radius: var(--border-radius-base); --navbar-padding-h: calc(var(--ui-gutter-base) / 2); --navbar-padding-v: calc(var(--navbar-height) - var(--line-height-computed) / 2); --navbar-dropdown-max-height: 660px; --navbar-nav-link-padding-x: var(--spacing-2x); /* Navbar Toggler */ --navbar-toggler-padding-y: var(--spacing-1x); --navbar-toggler-padding-x: var(--spacing-2x); --navbar-toggler-font-size: var(--font-size-lg); --navbar-toggler-border-radius: var(--border-radius-base); --navbar-toggler-border-width: 1px; --navbar-toggler-icon-width: var(--spacing-1x); --navbar-toggler-icon-height: var(--spacing-1x); --navbar-toggler-icon-content: ""; /* Navbar Nav Scroll */ --navbar-nav-scroll-max-height: 75vh; /* Nav */ --nav-link-height: 64px; --nav-link-padding-h: var(--ui-padding-base-h); --nav-link-padding-v: var(--ui-padding-base-v); --nav-link-color: var(--ui-nav-link-color); --nav-link-hover-bg: null; --nav-link-hover-color: var(--ui-nav-link-hover-color); --nav-disabled-link-color: var(--ui-nav-link-disabled-color); --nav-disabled-link-hover-color: var(--ui-nav-link-disabled-color); --nav-condensed-link-height: var(--ui-height-sm); --nav-condensed-link-padding-h: var(--ui-padding-sm-h); --nav-condensed-link-padding-v: var(--ui-padding-sm-v); --nav-divider-color: var(--ui-block-divider-color); --nav-divider-margin-y: 8px; /* Nav - Tabs */ --nav-tabs-border-color: var(--ui-block-divider-color); --nav-tabs-border-radius: var(--border-radius-base); --nav-tabs-border-width: 1px; --nav-tabs-link-color: var(--ui-nav-secondary-link-color); --nav-tabs-link-icon-color: var(--ui-nav-secondary-link-icon-color); --nav-tabs-link-padding: var(--ui-padding-base-h) 0; --nav-tabs-link-negative-margin: calc(-1 * var(--nav-tabs-border-width)); --nav-tabs-item-margin-right: var(--spacing-1x); --nav-tabs-link-active-color: var(--ui-nav-link-active-color); --nav-tabs-link-active-icon-color: var(--ui-nav-link-icon-active-color); --nav-tabs-link-active-bg: transparent; --nav-tabs-link-active-border-color: var(--brand-primary-lighter); --nav-tabs-link-active-border-width: 3px; --nav-tabs-link-hover-color: var(--ui-nav-link-hover-color); --nav-tabs-link-hover-icon-color: var(--ui-nav-link-icon-hover-color); --nav-tabs-link-hover-bg: transparent; --nav-tabs-link-hover-border-color: var(--gray-lighter-4); /* Pills */ --nav-pills-border-radius: var(--border-radius-base); --nav-pills-active-link-hover-bg: var(--ui-block-link-active-bg); --nav-pills-active-link-hover-color: var(--ui-nav-link-active-color); --nav-pills-link-active-color: #fff; --nav-pills-link-active-bg: var(--brand-primary); --nav-pills-link-active-color: #fff; --nav-pills-link-active-bg: var(--brand-primary); /* Pagination */ --pagination-color: var(--btn-default-color); --pagination-bg: var(--btn-default-bg); --pagination-border: var(--btn-default-border); --pagination-hover-color: var(--btn-default-hover-color); --pagination-hover-bg: var(--btn-default-hover-bg); --pagination-hover-border: var(--btn-default-hover-border); --pagination-active-color: var(--btn-primary-faded-color); --pagination-active-bg: var(--btn-primary-faded-bg); --pagination-active-border: var(--btn-primary-faded-border); --pagination-disabled-color: var(--btn-disabled-color); --pagination-disabled-bg: var(--btn-disabled-bg); --pagination-disabled-border: var(--btn-disabled-border); /* Jumbotron */ --jumbotron-padding-h: var(--spacing-2x); --jumbotron-padding-v: var(--spacing-4x); --jumbotron-color: inherit; --jumbotron-bg: var(--gray-lighter-4); --jumbotron-heading-color: inherit; --jumbotron-font-size: calc(var(--font-size-base) * 1.5); --jumbotron-heading-font-size: calc(var(--font-size-base) * 4.5); /* Tooltip */ --tooltip-max-width: 268px; --tooltip-color: var(--gray-base); --tooltip-bg: #fff; --tooltip-opacity: 1; --tooltip-arrow-width: 5px; --tooltip-arrow-color: var(--tooltip-bg); --tooltip-font-size: var(--font-size-sm); --tooltip-border-radius: var(--border-radius-xs); --tooltip-padding-y: var(--spacing-2x); --tooltip-padding-x: var(--spacing-2x); --tooltip-margin: 0; --tooltip-arrow-height: 3px; --tooltip-box-shadow: var(--box-shadow-lg); /* Popover */ --popover-bg: #fff; --popover-max-width: 288px; --popover-border-color: var(--gray-lighter-4); --popover-title-bg: var(--gray-lighter-4); --popover-arrow-width: 10px; --popover-arrow-height: 5px; --popover-arrow-color: var(--popover-bg); --popover-arrow-outer-width: calc(var(--popover-arrow-width) + 1); --popover-arrow-outer-color: var(--popover-bg); --popover-arrow-outer-fallback-color: var(--popover-fallback-border-color); --popover-header-bg: brightness(var(--popover-bg), 97%); --popover-header-color: null; --popover-header-padding-y: var(--spacing-1x); --popover-header-padding-x: .75rem; --popover-border-color: var(--gray-lighter-4); --popover-header-border-bottom-color: brightness(var(--popover-header-bg), 92%); --popover-border-radius: var(--border-radius-base); --popover-border-width: 1px; --popover-inner-border-radius: calc(var(--popover-border-radius) - var(--popover-border-width)); --popover-body-color: #212529; --popover-body-padding-y: var(--popover-header-padding-y); --popover-body-padding-x: var(--popover-header-padding-x); /* Toast */ --toast-max-width: 350px; --toast-padding-x: .75rem; --toast-padding-y: var(--spacing-1x); --toast-font-size: .875rem; --toast-color: null; --toast-background-color: rgba(#fff, .85); --toast-border-width: 1px; --toast-border-color: rgba(0, 0, 0, .1); --toast-border-radius: var(--spacing-1x); --toast-box-shadow: 0 var(--spacing-1x) .75rem rgba(#000, .1); --toast-header-color: #6c757d; --toast-header-background-color: rgba(#fff, .85); --toast-header-border-color: rgba(0, 0, 0, .05); /* Modal */ --modal-inner-padding: var(--ui-block-padding-base); --modal-title-padding: var(--ui-block-padding-base-v) var(--ui-block-padding-base); --modal-footer-padding: 0 var(--ui-block-padding-base) var(--ui-block-padding-base) var(--ui-block-padding-base); --modal-footer-margin-between: var(--spacing-2x); --modal-title-font-size: var(--font-size-h5); --modal-title-font-weight: var(--font-weight-light); --modal-title-line-height: var(--line-height-h5); --modal-content-bg: var(--ui-block-bg); --modal-content-border-color: var(--ui-block-border-color); --modal-content-fallback-border-color: var(--ui-block-border-color); --modal-content-max-height: calc(100vh - (var(--modal-dialog-margin) * 2)); --modal-content-min-height-sm: calc(100vh - (var(--modal-dialog-margin-y-sm-up) * 2)); --modal-content-color: null; --modal-content-border-radius: var(--ui-block-border-radius); --modal-content-inner-border-radius: calc(var(--modal-content-border-radius) - var(--modal-content-border-width)); --modal-content-box-shadow: var(--box-shadow-xlg); --modal-content-box-shadow-sm-up: var(--box-shadow-lg); --modal-body-max-height: calc(100vh - 200px); --modal-backdrop-bg: var(--ui-block-overlay-bg); --modal-header-background-color: transparent; --modal-header-border-color: var(--ui-block-divider-color); --modal-footer-border-color: var(--ui-block-divider-color); --modal-xl: 800px; --modal-lg: 560px; --modal-md: 448px; --modal-sm: 300px; --modal-transition: all var(--transition-base); --modal-fade-transform: scale(0.5); --modal-show-transform: none; --modal-scale-transform: scale(1.02); --modal-dialog-margin: var(--spacing-1x); --modal-dialog-margin-y-sm-up: var(--spacing-3x); --modal-dialog-max-height: calc(100% - (var(--modal-dialog-margin) * 2)); --modal-dialog-centered-min-height: var(--modal-dialog-max-height); --modal-dialog-centered-before-height: var(--modal-content-max-height); --modal-dialog-scrollable-max-height-sm: calc(100% - (var(--modal-dialog-margin-y-sm-up) * 2)); --modal-dialog-centered-min-height-sm: var(--modal-dialog-scrollable-max-height-sm); --modal-dialog-centered-before-height-sm: var(--modal-content-min-height-sm); --modal-btn-close-padding: var(--ui-block-padding-base-v); /* Alert */ --alert-padding-v: var(--ui-block-padding-base-v); --alert-padding-h: var(--ui-block-padding-base); --alert-padding-2x: var(--ui-block-padding-base); --alert-border-radius: var(--ui-block-border-radius); --alert-link-font-weight: var(--font-weight-bold); --alert-success-bg: var(--state-success-bg); --alert-success-text: var(--state-success-text); --alert-success-border: var(--state-success-border); --alert-info-bg: var(--state-info-bg); --alert-info-text: var(--state-info-text); --alert-info-border: var(--state-info-border); --alert-warning-bg: var(--state-warning-bg); --alert-warning-text: var(--state-warning-text); --alert-warning-border: var(--state-warning-border); --alert-danger-bg: var(--state-danger-bg); --alert-danger-text: var(--state-danger-text); --alert-danger-border: var(--state-danger-border); --alert-gray-bg: var(--gray-faded); --alert-gray-text: var(--gray-darker); --alert-gray-border: var(--gray-lighter-3); --alert-primary-bg: var(--brand-primary); --alert-primary-text: var(--text-secondary-heading-color); --alert-primary-border: var(--brand-primary); --alert-secondary-bg: var(--brand-secondary); --alert-secondary-text: var(--text-secondary-heading-color); --alert-secondary-border: var(--brand-secondary); --alert-icon-font-family: "FontAwesome"; --alert-success-icon: "\f058"; --alert-info-icon: "\f05a"; --alert-warning-icon: "\f071"; --alert-danger-icon: "\f06a"; --alert-gray-icon: "\f05a"; --alert-primary-icon: "\f05a"; --alert-secondary-icon: "\f05a"; --alert-variants-title-color: var(--text-heading-color); /* Progress bars*/ --progress-bg: var(--gray-lighter-4); --progress-bar-color: #fff; --progress-font-size: var(--font-size-base) * 0.75; --progress-height: var(--spacing-1x); --progress-width: 76px; --progress-border-radius: var(--border-radius-sm); --progress-bar-bg: var(--gray-lighter); --progress-bar-success-bg: var(--brand-success); --progress-bar-warning-bg: var(--brand-warning); --progress-bar-danger-bg: var(--brand-danger); --progress-bar-info-bg: var(--brand-info); --progress-bar-transition: var(--transition-base); /* Panels*/ --panel-bg: var(--ui-block-bg); --panel-box-shadow: var(--ui-block-shadow); --panel-border: var(--ui-block-border); --panel-border-radius: var(--ui-block-border-radius); --panel-border-divider-color: var(--ui-block-divider-color); --panel-padding-v: var(--ui-block-padding-base); --panel-padding-h: var(--ui-block-padding-base); --panel-body-padding: var(--ui-block-padding-base); --panel-heading-height: 56px; --panel-heading-padding: var(--ui-block-padding-base-v) var(--ui-block-padding-base); --panel-footer-bg: var(--ui-block-header-bg); --panel-footer-padding: var(--ui-block-padding-base-v) var(--ui-block-padding-base); --panel-title-color: var(--text-heading-color); --panel-title-font-size: var(--font-size-h6); --panel-title-font-weight: var(--font-weight-h6); --panel-title-line-height: var(--line-height-h6); --panel-default-bg: var(--panel-bg); --panel-default-text: var(--text-heading-color); --panel-default-border: var(--ui-block-divider-color); --panel-default-heading-bg: var(--ui-block-header-bg); --panel-active-bg: var(--ui-block-bg-form); --panel-active-border-color: var(--input-focus-border-color); --panel-hover-bg: var(--panel-bg); --panel-hover-shadow: var(--ui-block-shadow-lg); --panel-hover-border-color: var(--input-hover-border-color); --panel-lg-border-radius: var(--border-radius-xlg); --panel-lg-heading-padding: 10px var(--ui-block-padding-lg); --panel-lg-body-padding: var(--ui-block-padding-lg); --panel-lg-footer-padding: 10px var(--ui-block-padding-lg); /* Other Panels */ --panel-success-bg: var(--state-success-bg); --panel-success-text: var(--state-success-text); --panel-success-border: var(--state-success-border); --panel-success-heading-bg: var(--state-success-bg); --panel-info-bg: var(--state-info-bg); --panel-info-text: var(--state-info-text); --panel-info-border: var(--state-info-border); --panel-info-heading-bg: var(--state-info-bg); --panel-warning-bg: var(--state-warning-bg); --panel-warning-text: var(--state-warning-text); --panel-warning-border: var(--state-warning-border); --panel-warning-heading-bg: var(--state-warning-bg); --panel-danger-bg: var(--state-danger-bg); --panel-danger-text: var(--state-danger-text); --panel-danger-border: var(--state-danger-border); --panel-danger-heading-bg: var(--state-danger-bg); /* Panel Check */ --panel-check-padding: 16px; /* Card */ --card-spacer-y: var(--panel-padding-v); --card-spacer-x: var(--panel-padding-h); --card-border: var(--panel-border); --card-border-radius: var(--panel-border-radius); --card-inner-border-radius: calc(var(--panel-border-radius) - var(--panel-border-width)); --card-cap-bg: var(--panel-footer-bg); --card-cap-color: var(--panel-title-color); --card-bg: var(--panel-bg); --card-img-overlay-padding: var(--spacing-1x); --card-group-margin: var(--ui-gutter-base) / 2; --card-deck-margin: var(--card-group-margin); --card-columns-count: 3; --card-columns-gap: var(--spacing-1x); --card-columns-margin: var(--card-spacer-y); --card-body-padding: var(--panel-body-padding); --card-footer-padding: var(--panel-footer-padding); --card-heading-padding: var(--panel-heading-padding); /* Thumbnails*/ --thumbnail-padding: 4px; --thumbnail-bg: var(--body-bg); --thumbnail-border: var(--gray-lighter-4); --thumbnail-border-colo: #dee2e6; --thumbnail-border-width: 1px; --thumbnail-border-radius: var(--border-radius-base); --thumbnail-caption-color: var(--text-lighter-color); --thumbnail-caption-padding: var(--spacing-1x); /* Wells*/ --well-bg: var(--gray-faded); --well-border: var(--ui-block-border-color); /* Badges*/ --badge-color: #fff; --badge-link-hover-color: #fff; --badge-bg: var(--gray-lighter-4); --badge-active-color: var(--link-color); --badge-active-bg: #fff; --badge-font-size: var(--font-size-xs); --badge-font-weight: var(--font-weight-base); --badge-line-height: 1; --badge-border-radius: 10px; --badge-padding-y: 3px; --badge-padding-x: 6px; --badge-margin: 0 0 0 auto; --badge-transition: var(--transition-base); --badge-focus-width: var(--input-btn-focus-width); --badge-default-bg: var(--gray-lighter-3); --badge-default-color: var(--text-lighter-color); --badge-primary-bg: var(--brand-primary); --badge-primary-hover-bg: var(--brand-primary-darker); --badge-primary-color: var(--badge-color); --badge-primary-faded-bg: var(--brand-primary-lighter-3); --badge-primary-faded-hover-bg: var(--brand-primary-lighter-2); --badge-primary-faded-color: var(--brand-primary); --badge-success-bg: var(--state-success-bg); --badge-success-hover-bg: var(--brand-success-darker); --badge-success-color: var(--state-success-text); --badge-info-bg: var(--state-info-bg); --badge-info-hover-bg: var(--brand-primary-darker); --badge-info-color: var(--state-info-text); --badge-warning-bg: var(--state-warning-bg); --badge-warning-hover-bg: var(--brand-warning-darker); --badge-warning-color: var(--state-warning-text); --badge-danger-bg: var(--state-danger-bg); --badge-danger-hover-bg: var(--brand-danger-darker); --badge-danger-color: var(--state-danger-text); --badge-text-transform: none; /* Breadcrumbs */ --breadcrumb-padding-vertical: var(--ui-padding-base-v); --breadcrumb-padding-horizontal: var(--ui-padding-base-h); --breadcrumb-item-padding-vertical: 0px; --breadcrumb-item-padding-horizontal: 5px; --breadcrumb-bg: #fff; --breadcrumb-color: var(--gray-lighter-3); --breadcrumb-active-color: var(--gray-lighter-4); --breadcrumb-separator: "/"; --breadcrumb-font-size: null; /* Carousel */ --carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6); --carousel-control-color: #fff; --carousel-control-width: 15%; --carousel-control-opacity: .5; --carousel-control-hover-opacity: .9; --carousel-control-font-size: 20px; --carousel-indicator-active-bg: #fff; --carousel-indicator-border-color: #fff; --carousel-indicator-width: 30px; --carousel-indicator-height: 3px; --carousel-indicator-hit-area-height: 10px; --carousel-indicator-spacer: 3px; --carousel-caption-color: #fff; --carousel-caption-width: 70%; /* Carousel control color used as fill below */ --carousel-control-prev-icon-bg: url("data:image/svg+xml,"); --carousel-control-next-icon-bg: url("data:image/svg+xml,"); --carousel-control-icon-width: 20px; /* Spinners */ --spinner-width: var(--spacing-2x); --spinner-height: var(--spinner-width); --spinner-border-width: var(--spacing-1x); --spinner-width-sm: var(--spacing-2x); --spinner-height-sm: var(--spinner-width-sm); --spinner-border-width-sm: var(--spacing-1x); /* Close */ --close-font-weight: var(--font-weight-bold); --close-font-size: 22px; --close-color: var(--gray-icons); --close-color-hover: var(--brand-primary); --close-text-shadow: 0 1px 0 #fff; /* Code */ --code-color: #c7254e; --code-bg: #f9f2f4; --code-font-size: 90%; --code-font-family: Menlo,Monaco,Consolas,Courier New,monospace; --kbd-color: #fff; --kbd-bg: #333; --kbd-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); --kbd-padding-y: 2px; --kbd-padding-x: 4px; --nested-kbd-font-size: 100%; --nested-kbd-font-weight: bold; --pre-bg: var(--gray-faded); --pre-padding: var(--ui-block-padding-sm); --pre-color: var(--text-body-color); --pre-font-size: var(--font-size-sm); --pre-border-color: var(--ui-block-border-color); --pre-border-radius: var(--ui-block-border-radius); --pre-scrollable-max-height: 340px; /* Blockquote */ --blockquote-bg: var(--gray-faded); --blockquote-border-color: var(--gray-lighter-4); --blockquote-font-color: var(--text-heading-color); --blockquote-font-size: var(--font-size-lg); --blockquote-line-height: var(--line-height-lg); --blockquote-small-color: var(--gray-lighter-4); --blockquote-small-font-size: var(--font-size-sm); --blockquote-padding: 32px 32px 32px 72px; --hr-border: var(--gray-lighter-4); --show-animation: transform .32s cubic-bezier(0,0,0,1), opacity .08s; /* Other */ --dt-font-weight: var(--font-weight-bold); --previews-img-height: 240px; /* Printing */ --print-page-size: a3; --print-body-min-width: 992px; /*From map-get($grid-breakpoints,"lg")*/ /* Hr */ --hr-margin-y: var(--spacing-1x); --hr-border-color: rgba(#000, .1); --hr-border-width: var(--border-width-base); --list-inline-padding: var(--spacing-1x); } @media (max-width: 991px) { :root { --navbar-dropdown-max-height: 560px; } } .lagom-dark-mode{ /* Section : Dark Mode Colors */ --dropdown-bg: #242424; --modal-backdrop-bg: rgba(18, 18, 18, .78); --popover-bg: var(--dropdown-bg); --tooltip-arrow-color: var(--dropdown-bg); --tooltip-bg: var(--dropdown-bg); --dropdown-collapse-bg: #1A1A1A; --dropdown-link-color: var(--text-body-color); --badge-success-bg: var(--state-success-bg); --badge-success-hover-bg: var(--brand-success-darker); --badge-success-color: var(--state-success-text); --badge-info-bg: var(--state-info-bg); --badge-info-hover-bg: var(--brand-primary-darker); --badge-info-color: var(--state-info-text); --badge-warning-bg: var(--state-warning-bg); --badge-warning-hover-bg: var(--brand-warning-darker); --badge-warning-color: var(--state-warning-text); --badge-danger-bg: var(--state-danger-bg); --badge-danger-hover-bg: var(--brand-danger-darker); --badge-danger-color: var(--state-danger-text); } /*! * Theme Name: Lagom WHMCS Client Theme * Author: RS Studio (https://rsstudio.net) * Theme URL: https://lagom.rsstudio.net/ * Terms of Service: https://lagom.rsstudio.net/legal/terms-of-service/ * * This file is part of a licensed product. Unauthorized redistribution, modification, * or use outside of the licensed environment is strictly prohibited. * * © RS Studio. All rights reserved. */ :root { /* Name: Elements; Index: 7 */ /* List Group */ --list-group-bg: var(--ui-block-bg); --list-group-color: null; --list-group-border: var(--ui-block-border); --list-group-box-shadow: var(--ui-block-shadow); --list-group-border-radius: var(--ui-block-border-radius); --list-group-active-color: var(--ui-nav-link-active-color); --list-group-active-bg: var(--ui-block-link-active-bg); --list-group-active-border: var(--list-group-active-bg); --list-group-active-text-color: var(--list-group-active-bg); --list-group-disabled-color: #6c757d; /* List Group Item Action */ --list-group-action-color: var(--gray-base); --list-group-action-hover-color: var(--list-group-action-color); --list-group-action-active-color: var(--gray-darker); --list-group-action-active-bg: var(--gray-lighter-3); /* List Group Item */ --list-group-item-padding: var(--ui-block-padding-base-v) var(--ui-block-padding-base); --list-group-item-lg-padding: var(--ui-block-padding-lg); --list-group-item-border-color: var(--ui-block-divider-color); --list-group-item-heading-color: var(--text-heading-color); --list-group-item-text-color: var(--text-body-color); --list-group-item-icon-color: var(--text-primary-color); --list-group-item-disabled-color: var(--gray-lighter); --list-group-item-disabled-bg: var(--list-group-bg); --list-group-item-disabled-text-color: var(--list-group-disabled-color); /* List Group Item - Link */ --list-group-item-link-color: var(--ui-block-link-color); --list-group-item-link-heading-color: var(--brand-primary); --list-group-item-link-text-color: var(--list-group-item-text-color); --list-group-item-link-hover-bg: var(--ui-block-link-hover-bg); --list-group-item-link-hover-color: var(--ui-nav-link-hover-color); --list-group-item-link-active-color: var(--ui-nav-link-active-color); --list-group-item-link-active-bg: var(--ui-block-link-active-bg); --list-group-item-link-active-border: var(--brand-primary-lighter-4); --list-group-item-link-disabled-color: var(--text-lighter-color); --list-group-item-link-disabled-bg: var(--gray-lighter-4); --list-group-item-link-disabled-border: var(--gray-lighter-3); --list-group-item-link-icon-color: var(--ui-icon-color); /* Section: Promotion Slider */ --promo-slider-min-height: 314px; --promo-slider-caption-font-size: var(--font-size-h6); /* name: Caption - Size; var_group: Font Size; */ --promo-slider-caption-line-height: var(--line-height-h6); /* name: Caption - Line Height; var_group: Line Height; */ --promo-slider-caption-font-weight: var(--font-weight-h6); /* name: Caption - Weight; var_group: Font Weight; */ --promo-slider-title-font-size: var(--font-size-h4); /* name: Title - Size; var_group: Font Size; */ --promo-slider-title-line-height: var(--line-height-h4); /* name: Title - Line Height; var_group: Line Height; */ --promo-slider-title-font-weight: var(--font-weight-bold); /* name: Title - Weight; var_group: Font Weight; */ --promo-slider-body-padding: var(--spacing-7x) 0px var(--spacing-5x) var(--spacing-3x); --promo-slider-content-padding: var(--spacing-4x) 0 var(--spacing-5x) var(--spacing-3x); --promo-slider-header-padding: var(--spacing-1x) var(--spacing-1x) 0 var(--spacing-3x); --promo-slider-body-padding-rtl: var(--spacing-7x) var(--spacing-3x) var(--spacing-5x) 0px; --promo-slider-content-padding-rtl: var(--spacing-4x) var(--spacing-3x) var(--spacing-5x) 0; --promo-slider-header-padding-rtl: var(--spacing-1x) var(--spacing-3x) 0 var(--spacing-1x) ; --promo-slider-illustration-width: 400px; /* name: Illustration - Width; type: size; append: px; */ --promo-slider-sm-title-font-size: var(--font-size-h4); --promo-slider-sm-title-line-height: var(--line-height-h4); /* Section: Promotion Slider Small */ --promo-slider-xs-title-font-size: var(--font-size-h5); /* name: Title - Size; var_group: Font Size; */ --promo-slider-xs-title-line-height: var(--line-height-h5); /* name: Title - Line Height; var_group: Line Height; */ --promo-slider-xs-illustration-height: 326px; /* name: Illustration - Height; type: size; append: px; */ --promo-slider-xs-illustration-width: 376px; /* name: Illustration - Width; type: size; append: px; */ /* Panel Summary */ --panel-summary-shadow: var(--box-shadow-base); --panel-summary-border-radius: var(--ui-block-border-radius); --panel-summary-padding: var(--ui-block-padding-base); --panel-summary-title-font-size: var(--font-size-h4); --panel-summary-title-font-weight: var(--font-weight-h4); --panel-summary-title-line-height: var(--line-height-h4); --panel-summary-text-font-size: var(--font-size-sm); --panel-summary-text-font-weight: var(--font-weight-light); --panel-summary-text-line-height: var(--line-height-sm); --panel-summary-list-padding-v: 3px; --panel-summary-list-item-padding-v: var(--spacing-2x); --panel-summary-list-title-font-size: var(--font-size-xs); --panel-summary-list-color-faded: var(--text-body-color); --panel-summary-total-text-font-color: var(--text-body-color); --panel-summary-content-max-height: 500px; --panel-summary-main-item-font-size: var(--font-size-base); --panel-summary-main-item-line-height: var(--line-height-sm); --panel-summary-main-item-font-weight: var(--font-weight-medium); /* Panel Sidebar */ --panel-sidebar-bg: transparent; --panel-sidebar-footer-bg: transparent; --panel-sidebar-border: none; --panel-sidebar-box-shadow: none; --panel-sidebar-heading-bg: transparent; --panel-sidebar-heading-height: unset; --panel-sidebar-heading-padding: 0 0 var(--ui-block-padding-sm); --panel-sidebar-title-size: var(--font-size-h6); --panel-sidebar-title-weight: var(--font-weight-h6); --panel-sidebar-body-padding: 0; --panel-sidebar-footer-padding: var(--ui-block-padding-sm) 0 0; --panel-sidebar-margin-bottom: var(--spacing-4x); --panel-sidebar-link-bg: transparent; --panel-sidebar-link-color: var(--link-color); --panel-sidebar-link-icon-color: var(--link-color); --panel-sidebar-link-margin: 1px; --panel-sidebar-link-padding: var(--ui-nav-v-link-padding-v) 0; --panel-sidebar-link-border-radius: var(--ui-nav-link-border-radius); --panel-sidebar-link-hover-bg: var(--ui-nav-link-hover-bg); --panel-sidebar-link-hover-color: var(--ui-nav-link-hover-color); --panel-sidebar-link-hover-padding-h: var(--ui-nav-v-link-hover-padding-h); --panel-sidebar-link-hover-icon-color: var(--ui-nav-link-icon-hover-color); --panel-sidebar-link-active-bg: var(--ui-nav-link-active-bg); --panel-sidebar-link-active-color: var(--ui-nav-link-active-color); --panel-sidebar-link-active-padding-h: var(--ui-nav-v-link-active-padding-h); --panel-sidebar-link-active-icon-color: var(--ui-nav-link-icon-active-color); /* Panel Sidebar - List Group */ --panel-sidebar-list-group-bg: var(--ui-block-bg); --panel-sidebar-list-group-border: var(--ui-block-border); --panel-sidebar-list-group-box-shadow: var(--ui-block-shadow); --panel-sidebar-list-group-border-radius: var(--ui-block-border-radius); /* Panel Home - Domain Register */ --panel-home-domain-bg: var(--secondary-block-bg); --panel-home-domain-border: none; --panel-home-domain-title-color: var(--secondary-block-title-color); --panel-home-domain-text-color: var(--text-body-color); /* Panel - Product Details */ --product-details-bg: var(--primary-block-bg); --product-details-title-color: var(--text-secondary-heading-color); --product-details-title-font-size: var(--font-size-h4); --product-details-title-font-weight: var(--font-weight-h4); --product-details-title-line-height: var(--line-height-h4); --product-details-text-color: var(--text-secondary-body-color); /* Panel Accordion */ --panel-accordion-heading-bg: transparent; --panel-accordion-hover-border-color: var(--brand-primary); --panel-accordion-active-border-color: var(--brand-primary); --panel-accordion-active-heading-color: var(--ui-nav-link-active-color); /* Search Block */ --search-field-icon-color: var(--gray-icons); --search-field-combined-icon-color: var(--brand-primary); --search-group-max-width: var(--max-width-md); /* Tiles */ --tile-min-height: 182px; --tile-padding: var(--ui-padding-base-v) var(--ui-block-padding-base); --tile-bg: var(--ui-block-bg); --tile-bg-color: var(--ui-block-bg); --tile-border-radius: var(--ui-block-border-radius); --tile-box-shadow: var(--ui-block-shadow); --tile-border: var(--ui-block-border); --tile-border-color-hover: var(--brand-primary); --tile-icon-font-size: var(--font-size-h3); --tile-icon-color: var(--gray-icons); --tile-stat-color: var(--text-primary-color); --tile-stat-font-size: 62px; --tile-stat-sm-font-size: 48px; --tile-stat-font-weight: var(--font-weight-light); --tile-title-color: var(--text-heading-color); --tile-title-font-size: var(--font-size-h6); --tile-title-font-weight: var(--font-weight-base); --tile-title-line-height: var(--line-height-h6); --tile-sm-stat-font-size: var(--font-size-h2); --tile-sm-title-font-size: var(--font-size-base); --tile-hover-bg: var(--ui-block-bg); --tile-hover-shadow: var(--box-shadow-base); --tile-hover-transform: translate3d(0,-8px,0); --tile-mob-stat-font-size: var(--font-size-h2); --tile-mob-title-font-size: var(--font-size-base); --tile-sm-mob-stat-font-size: var(--font-size-xxlg); --tile-sm-mob-title-font-size: var(--font-size-sm); --tile-loader-bg: var(--gray-lighter-4); --tile-loader-progress-bg: var(--brand-primary); /* Section: Login and Register Box */ --login-logo-height: 56px; /* Name: Logo - Height; type: size; append: px;* */ --login-width: var(--max-width-xs); /* Name: Login Container - Width; var_group: Max Width; */ --login-lg-width: var(--max-width-md); /* Name: Register Container - Width; var_group: Max Width; */ --login-bg: var(--ui-block-bg); --login-footer-bg: transparent; --login-border: var(--ui-block-border); --login-border-radius: var(--ui-block-border-radius); --login-box-shadow: var(--ui-block-shadow); --login-padding: var(--spacing-4x); --login-mob-padding: var(--spacing-3x); --login-header-margin-bottom: var(--spacing-6x); --login-title-color: var(--text-heading-color); --login-title-font-size: var(--font-size-h3); /* name: Title - Font Size; var_group: Font Size; */ --login-title-font-weight: var(--font-weight-h3); /* name: Title - Font Weight; var_group: Font Weight; */ --login-title-line-height: var(--line-height-h3); /* name: Title - Line Height; var_group: Line Height; */ --login-desc-color: var(--text-lighter-color); --login-desc-font-size: var(--font-size-base); --login-desc-font-weight: var(--font-weight-base); --login-link-color: var(--link-color); /* Section: Error Page*/ --error-page-bg: var(--brand-secondary-gradient-h); /* Login Sidebar */ --login-sidebar-box-shadow: var(--ui-block-shadow-lg); --login-sidebar-desc-lighter-color: var(--primary-block-text-faded-color); --login-sidebar-desc-font-size: var(--font-size-lg); --login-sidebar-desc-font-weight: var(--font-weight-light); --login-sidebar-desc-line-height: var(--line-height-lg); --login-sidebar-bullet-bg: var(--primary-block-dot-nav-bg); --login-sidebar-bullet-hover-bg: var(--primary-block-dot-nav-hover-bg); --login-sidebar-bullet-active-bg: var(--primary-block-dot-nav-active-bg); /* Section: Package */ --package-bg: var(--ui-block-bg); --package-border: var(--ui-block-border); --package-border-radius: var(--ui-block-border-radius); --package-block-shadow: var(--ui-block-shadow-lg); --package-title-font-size: var(--font-size-h4); /* name: Title - Font Size; var_group: Font Size; */ --package-title-font-weight: var(--font-weight-h4); /* name: Title - Font Weight; var_group: Font Weight; */ --package-title-line-height: var(--line-height-h4); /* name: Title - Line Height; var_group: Line Height; */ --package-title-spacing-bottom: var(--spacing-2x); --package-desc-color: var(--font-size-lg); /* name: Desc - Font Size; var_group: Font Size; */ --package-desc-font-size: var(--font-size-lg); /* name: Desc - Font Size; var_group: Font Size; */ --package-desc-line-height: var(--line-height-lg); /* name: Desc - Line Height; var_group: Line Height; */ --package-desc-font-weight: var(--font-weight-light); /* name: Desc - Font Weight; var_group: Font Weight; */ --package-hover-block-shadow: var(--ui-block-shadow-xlg); --package-active-border-color: var(--panel-active-border-color); --package-active-shadow-inset: inset 0 0 0 1px var(--package-active-border-color); --package-btn-min-width: 168px; --package-padding: var(--spacing-4x); --package-element-spacing: var(--spacing-3x); /* Section: Package Small*/ --package-sm-title-font-size: var(--font-size-h6); /* name: Title Large - Font Size; var_group: Font Size; */ --package-sm-title-line-height: var(--line-height-h6); /* name: Title Large - Line Height; var_group: Line Height; */ --package-sm-title-font-weight: var(--font-weight-h6); /* name: Title Large - Font Weight; var_group: Font Weight; */ --package-desc-sm-font-size: var(--font-size-base); /* name: Desc - Font Size; var_group: Font Size; */ --package-desc-sm-line-height: var(--line-height-md); /* name: Desc - Line Height; var_group: Line Height; */ --package-desc-sm-font-weight: var(--font-weight-base); /* name: Desc - Font Weight; var_group: Font Weight; */ --package-sm-padding: var(--spacing-3x); --package-sm-element-spacing: var(--spacing-2x); /* Section: Price */ --price-color: var(--text-heading-color); /* name: Color; var_group: Font Color; type: select-colors;*/ --price-font-size: var(--font-size-h3); /* name: Font Size; var_group: Font Size; */ --price-font-weight: var(--font-weight-bold); /* name: Font Weight; var_group: Font Weight; */ --price-line-height: var(--line-height-h3); /* name: Line Height; var_group: Line Height; */ --price-currency-font-size: var(--font-size-xlg); /* name: Currency - Font Size; var_group: Font Size; */ --price-currency-font-weight: var(--font-weight-light); /* name: Currency - Font Weight; var_group: Font Weight; */ --price-currency-line-height: var(--line-height-xlg); /* name: Currency - Line Height; var_group: Line Height; */ --price-cycle-color: var(--text-body-color); /* name: Cycle - Color; var_group: Font Color; type: select-colors;*/ --price-cycle-font-size: var(--font-size-xs); /* name: Cycle - Font Size; var_group: Font Size; */ --price-cycle-line-height: var(--line-height-xs); /* name: Cycle - Line Height; var_group: Line Height; */ --price-cycle-font-weight: var(--font-weight-base); /* name: Cycle - Font weight; var_group: Font Weight; */ --price-savings-color: #F12F75; --price-savings-background: #FFE7EC; --price-savings-font-size: var(--font-size-xs); --price-savings-font-weight: var(--font-weight-base); --price-savings-line-height: var(--line-height-xs); --price-title-color: var(--text-body-color); --price-title-font-size: var(--font-size-sm); --price-title-line-height: var(--line-height-sm); --price-title-font-weight: var(--font-weight-base); /* Section: Price Large */ --price-lg-font-size: var(--font-size-h2); /* name: Font Size; var_group: Font Size; */ --price-lg-font-weight: var(--font-weight-bold); /* name: Font Weight; var_group: Font Weight; */ --price-lg-line-height: var(--line-height-h2); /* name: Line Height; var_group: Line Height; */ --price-lg-currency-font-size: var(--font-size-xxlg); /* name: Currency - Font Size; var_group: Font Size; */ --price-lg-currency-font-weight: var(--font-weight-light); /* name: Currency - Font Weight; var_group: Font Weight; */ --price-lg-currency-line-height: var(--line-height-xxlg); /* name: Currency - Line Height; var_group: Line Height; */ /* Section: Price Small */ --price-sm-font-size: var(--font-size-h4); /* name: Font Size; var_group: Font Size; */ --price-sm-font-weight: var(--font-weight-bold); /* name: Font Weight; var_group: Font Weight; */ --price-sm-line-height: var(--line-height-h4); /* name: Line Height; var_group: Line Height; */ --price-sm-currency-font-size: var(--font-size-md); /* name: Currency - Font Size; var_group: Font Size; */ --price-sm-currency-font-weight: var(--font-weight-light); /* name: Currency - Font Weight; var_group: Font Weight; */ --price-sm-currency-line-height: var(--line-height-md); /* name: Currency - Line Height; var_group: Line Height; */ /* Section: Price Extra Small */ --price-xs-font-size: var(--font-size-h5); /* name: Font Size; var_group: Font Size; */ --price-xs-font-weight: var(--font-weight-light); /* name: Font Weight; var_group: Font Weight; */ --price-xs-line-height: var(--line-height-h5); /* name: Line Height; var_group: Line Height; */ --price-xs-currency-font-size: var(--font-size-xlg); /* name: Currency - Font Size; var_group: Font Size; */ --price-xs-currency-font-weight: var(--font-weight-light); /* name: Currency - Font Weight; var_group: Font Weight; */ --price-xs-currency-line-height: var(--line-height-xlg); /* name: Currency - Line Height; var_group: Line Height; */ /* Range Slider */ --range-slider-height: 18px; --range-slider-bg: var(--gray-lighter-4); --range-slider-fill-bg: var(--brand-primary); --range-slider-border-radius: var(--border-radius-sm); --range-slider-spacing-h: var(--spacing-3x); --range-slider-handle-bg: #fff; --range-slider-handle-box-shadow: var(--box-shadow-base); --range-slider-handle-height: 32px; --range-slider-handle-width: 42px; --range-slider-handle-border-radius: var(--border-radius-sm); --range-slider-handle-border: none; --range-slider-handle-hover-bg: var(--gray-lighter-4); --range-slider-handle-hover-border: none; --range-slider-handle-hover-shadow: var(--box-shadow-lg); --range-slider-value-bg: var(--brand-secondary); --range-slider-value-color: var(--text-secondary-body-color); --range-slider-value-font-size: var(--font-size-lg); --range-slider-value-sm-color: var(--text-lighter-color); --range-slider-value-sm-font-size: var(--font-size-xs); --range-slider-value-sm-line-height: var(--line-height-xs); --range-slider-value-min-width: 28px; --range-slider-value-active-color: var(--brand-primary); --range-slider-value-active-border: var(--brand-primary); --range-slider-price-font-size: var(--font-size-xxlg); --range-slider-price-line-height: var(--line-height-md); --range-slider-price-spacing: var(--spacing-2x) 0; --range-slider-price-font-weight: var(--font-weight-base); --range-slider-price-color: var(--brand-primary); --range-slider-price-suffix-opacity: 0.64; --range-slider-actions-height: 32px; --range-slider-actions-border-color: var(--ui-block-border-color); --range-slider-actions-border-radius: var(--border-radius-sm); --range-slider-actions-active-border-color: var(--brand-primary-lighter); /* Cookiebox */ --cokie-bg: var(--ui-block-overlay-bg); --cookie-width: 310px; --cookie-position: 30px; /* Ticket Reply */ --ticket-reply-staff-bg: var(--ui-block-overlay-bg); --ticket-reply-staff-border: var(--ui-block-divider-color); --ticket-reply-staff-header-bg: transparent; --ticket-reply-staff-header-border: transparent; --ticket-reply-staff-header-border: var(--ui-block-divider-color); --bg-color-transparent: transparent; /* Loader */ --loader-bg: var(--brand-primary); --loader-light-bg: #fff; --loader-bars-height: 40px; --loader-bars-width: 4px; --loader-bars-sm-height: 20px; --loader-bars-sm-width: 2px; } @media (max-width: 767px) { :root { --login-logo-height: 44px; } } .lagom-dark-mode{ --error-page-bg: #121212; --list-group-item-link-heading-color: var(--brand-primary-lighter); --price-savings-color: #F01A67; --price-savings-background: #FFD6DF; --panel-sidebar-link-color: var(--text-body-color); --panel-sidebar-link-icon-color: var(--text-body-color); } /*! * Theme Name: Lagom WHMCS Client Theme * Author: RS Studio (https://rsstudio.net) * Theme URL: https://lagom.rsstudio.net/ * Terms of Service: https://lagom.rsstudio.net/legal/terms-of-service/ * * This file is part of a licensed product. Unauthorized redistribution, modification, * or use outside of the licensed environment is strictly prohibited. * * © RS Studio. All rights reserved. */ :root { /* Primary Block */ --primary-block-bg: var(--brand-primary-gradient-v); --primary-block-border: none; --primary-block-bg-h: var(--brand-primary-gradient-h); --primary-block-divider-color: var(--ui-block-secondary-divider-border-color); --primary-block-divider-active-color: #fff; --primary-block-title-color: var(--text-secondary-heading-color); --primary-block-subtitle-color: var(--text-secondary-lighter-color); --primary-block-text-color: var(--text-secondary-lighter-color); --primary-block-text-faded-color: var(--text-secondary-faded-color); --primary-block-total-font-color: #fff; /* Primary Block - UI Links */ --primary-block-link-color: hsla(0, 0%, 100%, 80%); --primary-block-link-hover-color: hsla(0, 0%, 100%, 100%); --primary-block-link-active-color: hsla(0, 0%, 100%, 100%); --primary-block-link-bg: transparent; --primary-block-link-hover-bg: transparent; --primary-block-link-active-bg: hsla(0, 0%, 100%, 6%); --primary-block-link-icon-color: hsla(0, 0%, 100%, 56%); --primary-block-link-icon-hover-color: hsla(0, 0%, 100%, 80%); --primary-block-link-icon-active-color: hsla(0, 0%, 100%, 80%); /* Primary Block - Slider Dot Navigation */ --primary-block-dot-nav-bg: rgba(255, 255, 255, 0.32); --primary-block-dot-nav-hover-bg: rgba(255, 255, 255, 0.56); --primary-block-dot-nav-active-bg: rgba(255, 255, 255, 1); /* Primary Block - Button Main */ --primary-block-btn-bg: var(--btn-primary-faded-bg); --primary-block-btn-border-color: var(--btn-primary-faded-border); --primary-block-btn-color: var(--btn-primary-faded-color); --primary-block-btn-hover-bg: var(--btn-primary-faded-hover-bg); --primary-block-btn-hover-border-color: var(--btn-primary-faded-hover-border); --primary-block-btn-hover-color: var(--btn-primary-faded-hover-color); --primary-block-btn-active-bg: var(--btn-primary-faded-active-bg); --primary-block-btn-active-border-color: var(--btn-primary-faded-active-border); /* Primary Block - Button Outline */ --primary-block-btn-outline-border-color: rgba(255,255,255,0.16); --primary-block-btn-outline-color: #fff; --primary-block-btn-outline-hover-bg: rgba(255,255,255,0.16); --primary-block-btn-outline-hover-border-color: rgba(255,255,255,0.16); --primary-block-btn-outline-hover-color: #fff; --primary-block-btn-outline-active-bg: rgba(255,255,255,0.16); --primary-block-btn-outline-active-border-color: rgba(255,255,255,0.16); /* Primary Block - Input */ --primary-block-input-bg: #fff; --primary-block-input-border: #fff; --primary-block-input-color: var(--input-color); --primary-block-input-placeholder-color: var(--input-color-placeholder); --primary-block-input-icon-color: var(--brand-primary); --primary-block-input-caret-color: var(--gray-icons); /* Secondary Block (currently copy of primary block) */ --secondary-block-bg: var(--brand-secondary-gradient-v); --secondary-block-border: var(--primary-block-border); --secondary-block-bg-h: var(--brand-secondary-gradient-h); --secondary-block-divider-color: var(--primary-block-divider-color); --secondary-block-divider-active-color: var(--primary-block-divider-active-color); --secondary-block-title-color: var(--primary-block-title-color); --secondary-block-subtitle-color: var(--primary-block-subtitle-color); --secondary-block-text-color: var(--primary-block-text-color); --secondary-block-text-faded-color: var(--primary-block-text-faded-color); --secondary-block-total-font-color: var(--primary-block-total-font-color); /* Secondary Block - UI Links */ --secondary-block-link-color: var(--primary-block-link-color); --secondary-block-link-hover-color: var(--primary-block-link-hover-color); --secondary-block-link-active-color: var(--primary-block-link-active-color); --secondary-block-link-bg: var(--primary-block-link-bg); --secondary-block-link-hover-bg: var(--primary-block-link-hover-bg); --secondary-block-link-active-bg: var(--primary-block-link-active-bg); --secondary-block-link-icon-color: var(--primary-block-link-icon-color); --secondary-block-link-icon-hover-color: var(--primary-block-link-icon-hover-color); --secondary-block-link-icon-active-color: var(--primary-block-link-icon-active-color); /* Secondary Block - Slider Dot Navigation */ --secondary-block-dot-nav-bg: var(--primary-block-dot-nav-bg); --secondary-block-dot-nav-hover-bg: var(--primary-block-dot-nav-hover-bg); --secondary-block-dot-nav-active-bg: var(--primary-block-dot-nav-active-bg); /* Secondary Block - Button Main */ --secondary-block-btn-bg: var(--primary-block-btn-bg); --secondary-block-btn-border-color: var(--primary-block-btn-border-color); --secondary-block-btn-color: var(--primary-block-btn-color); --secondary-block-btn-hover-bg: var(--primary-block-btn-hover-bg); --secondary-block-btn-hover-border-color: var(--primary-block-btn-hover-border-color); --secondary-block-btn-hover-color: var(--primary-block-btn-hover-color); --secondary-block-btn-active-bg: var(--primary-block-btn-active-bg); --secondary-block-btn-active-border-color: var(--primary-block-btn-active-border-color); /* Secondary Block - Button Outline */ --secondary-block-btn-outline-border-color: var(--primary-block-btn-outline-border-color); --secondary-block-btn-outline-color: var(--primary-block-btn-outline-color); --secondary-block-btn-outline-hover-bg: var(--primary-block-btn-outline-hover-bg); --secondary-block-btn-outline-hover-border-color: var(--primary-block-btn-outline-hover-border-color); --secondary-block-btn-outline-hover-color: var(--primary-block-btn-outline-hover-color); --secondary-block-btn-outline-active-bg: var(--primary-block-btn-outline-active-bg); --secondary-block-btn-outline-active-border-color: var(--primary-block-btn-outline-active-border-color); /* Secondary Block - Input */ --secondary-block-input-bg: var(--primary-block-input-bg); --secondary-block-input-border: var(--primary-block-input-border); --secondary-block-input-color: var(--primary-block-input-color); --secondary-block-input-placeholder-color: var(--primary-block-input-placeholder-color); --secondary-block-input-icon-color: var(--primary-block-input-icon-color); --secondary-block-input-caret-color: var(--primary-block-input-caret-color); /* Gray Block */ --gray-block-bg: var(--gray-gradient-v); --gray-block-bg-h: var(--gray-gradient-h); } .lagom-dark-mode{ --primary-block-input-bg: var(--ui-block-bg); --primary-block-input-border: var(--ui-block-bg); } /*! * Theme Name: Lagom WHMCS Client Theme * Author: RS Studio (https://rsstudio.net) * Theme URL: https://lagom.rsstudio.net/ * Terms of Service: https://lagom.rsstudio.net/legal/terms-of-service/ * * This file is part of a licensed product. Unauthorized redistribution, modification, * or use outside of the licensed environment is strictly prohibited. * * © RS Studio. All rights reserved. */ :root { /* General */ --svg-icon-stroke-width: 2px; --svg-illustration-shadow-color: #000; --svg-illustration-shadow-opacity-start: 0.15; --svg-icon-color-base: var(--brand-primary); --svg-icon-color-lighter: var(--brand-primary-lighter); --svg-icon-color-secondary: var(--gray-darker); --svg-icon-color-icon: #ffffff; --svg-icon-on-dark-color-secondary: #ffffff; --svg-icon-on-primary-color-base: #ffffff; --svg-icon-on-primary-color-lighter: #DEE0E3; --svg-icon-on-primary-color-secondary: #ffffff; --svg-icon-on-primary-color-icon: var(--brand-primary); /* Shared Elements */ --svg-screen-top-bg: var(--svg-illustration-color-1); --svg-screen-top-front: var(--svg-illustration-color-5); --svg-screen-top-back: var(--svg-illustration-color-2); --svg-screen-top-logo: var(--svg-illustration-color-7); --svg-screen-top-logo-el: var(--svg-illustration-color-1); --svg-screen-bottom-button: var(--svg-illustration-color-2); --svg-screen-bottom-front: var(--svg-illustration-color-4); --svg-screen-bottom-back: var(--svg-illustration-color-2); --svg-screen-leg-front: var(--svg-illustration-color-4); --svg-screen-leg-back: var(--svg-illustration-color-2); --svg-smartphone-border: var(--svg-illustration-color-2); --svg-smartphone-front: var(--svg-illustration-color-4); --svg-smartphone-screen: var(--svg-illustration-color-1); --svg-smartphone-icon: var(--svg-illustration-color-1); --svg-smartphone-icon-bg: var(--svg-illustration-color-7); --svg-tablet-back: var(--svg-illustration-color-2); --svg-tablet-front: var(--svg-illustration-color-3); --svg-tablet-screen: var(--svg-illustration-color-1); /* Browser */ --svg-browser-body: var(--svg-illustration-color-7); --svg-browser-top: var(--svg-illustration-color-1); --svg-browser-top-1: var(--svg-illustration-color-7); --svg-browser-text: var(--svg-illustration-color-5); --svg-browser-banner: var(--svg-illustration-color-5); /* Laptop */ --svg-laptop-bottom-back: var(--svg-illustration-color-2); --svg-laptop-bottom-top: var(--svg-illustration-color-4); --svg-laptop-touchpad-inside: var(--svg-illustration-color-3); --svg-laptop-touchpad-outside: var(--svg-illustration-color-2); --svg-laptop-screen: var(--svg-illustration-color-1); --svg-laptop-screen-logo: var(--svg-illustration-color-7); --svg-laptop-screen-back: var(--svg-illustration-color-2); --svg-laptop-screen-front: var(--svg-illustration-color-5); --svg-keyboard-keys-bottom: var(--svg-illustration-color-2); --svg-keyboard-keys-top: var(--svg-illustration-color-6); --svg-keyboard-body-bottom: var(--svg-illustration-color-4); --svg-keyboard-body-top: var(--svg-illustration-color-2); /* Weebly */ --svg-weebly-cup-body: var(--svg-illustration-color-4); --svg-weebly-cup-top: var(--svg-illustration-color-6); --svg-weebly-cup-inside: var(--svg-illustration-color-1); --svg-weebly-left-elements: var(--svg-illustration-color-7); --svg-weebly-left-elements-bottom: var(--svg-illustration-color-5); --svg-weebly-left-body: var(--svg-illustration-color-5); --svg-weebly-colors-bottom: var(--svg-illustration-color-1); --svg-weebly-colors-top: var(--svg-illustration-color-6); --svg-weebly-colors-top-1: var(--svg-illustration-color-7); --svg-weebly-colors-top-2: var(--svg-illustration-color-3); --svg-weebly-colors-top-3: var(--svg-illustration-color-1); /* SVG Graphics */ --svg-graphic-shadow: var(--box-shadow-lg); --svg-graphic-bg-primary: var(--brand-primary); --svg-graphic-bg-secondary: #4F5357; --svg-graphic-bg-body: #fff; --svg-graphic-bg-browser-top: #EAEEF3; --svg-graphic-bg-browser-actions: #CBCFD5; --svg-graphic-bg-browser-search: #fff; --svg-graphic-bg-banner: #EAEEF3; --svg-graphic-bg-faded: #EAEEF3; --svg-graphic-bg-faded-2: #E9EBEE; --svg-graphic-bg-faded-3: #CBCFD5; --svg-graphic-bg-white: #fff; --svg-graphic-bg-green: var(--brand-success); --svg-graphic-bg-red: var(--brand-danger); --svg-graphic-bg-red-darker: var(--brand-danger-darker); --svg-graphic-stroke-primary: var(--brand-primary); --svg-graphic-stroke-white: #fff; --svg-graphic-stroke-faded: #CBCFD5; --svg-graphic-stroke-faded-2: #CBCFD5; /* SVG Icons */ --svg-icon-color-1: var(--brand-primary-lighter); --svg-icon-color-2: var(--brand-primary); --svg-icon-color-3: var(--gray-darker); --svg-icon-color-4: #ffffff; --svg-icon-color-5: var(--gray-lighter-3); --svg-icon-on-dark-color-1: var(--svg-icon-color-4); --svg-icon-on-dark-color-2: var(--svg-icon-color-5); --svg-icon-on-dark-color-3: var(--svg-icon-color-4); --svg-icon-on-dark-color-4: var(--svg-icon-color-2); } .lagom-dark-mode{ /* Section : Dark Mode Colors */ --svg-icon-color-3: #ffffff; --svg-icon-on-dark-color-2: var(--gray-darker); } /*! * Theme Name: Lagom WHMCS Client Theme * Author: RS Studio (https://rsstudio.net) * Theme URL: https://lagom.rsstudio.net/ * Terms of Service: https://lagom.rsstudio.net/legal/terms-of-service/ * * This file is part of a licensed product. Unauthorized redistribution, modification, * or use outside of the licensed environment is strictly prohibited. * * © RS Studio. All rights reserved. */ :root { /* Name: Site; Index: 12; */ /* Body Typography */ --site-text-font-size: var(--font-size-lg); --site-text-font-weight: var(--font-weight-light); --site-text-line-height: var(--line-height-lg); --site-text-sm-font-size: var(--font-size-md); --site-text-sm-line-height: var(--line-height-md); --site-text-xs-font-size: var(--font-size-base); --site-text-xs-line-height: var(--line-height-base); /* Section: Banner */ --site-banner-title-font-size: var(--font-size-h1); /* name: Title - Font Size; var_group: Font Size;*/ --site-banner-title-font-weight: var(--font-weight-h1); /* name: Title - Font Weight; var_group: Font Weight;*/ --site-banner-title-line-height: var(--line-height-h1); /* name: Title - Line Height; var_group: Line Height;*/ --site-banner-desc-font-size: var(--font-size-xxlg); /* name: Desc - Font Size; var_group: Font Size;*/ --site-banner-desc-font-weight: var(--font-weight-light); /* name: Desc - Font Weight; var_group: Font Weight;*/ --site-banner-desc-line-height: var(--line-height-xxlg); /* name: Desc - Line Height; var_group: Line Height;*/ --site-banner-height: 562px; /* Name: Minimum Height; type: size; append: px;*/ --site-banner-padding-v: 100px; --site-banner-content-width: 496px; /* Name: Content Width; type: size; append: px;*/ --site-banner-element-spacing: var(--spacing-4x); --site-banner-graphic-width: 562px; /* Name: Illustration Width; type: size; append: px;*/ --site-banner-graphic-position-right: -40px; --site-banner-graphic-position-top: -40px; --site-banner-graphic-position-bottom: -20px; --svg-banner-primary-shape-left: rgba(0,0,0, .24); --svg-banner-primary-shape-right: rgba(0,0,0, .16); --site-banner-home-tile-height: 172px; /* Banner - Tile Navigation */ --site-banner-tile-bg: var(--ui-block-bg); --site-banner-tile-color: #fff; --site-banner-tile-font-weight: var(--font-weight-bold); --site-banner-tile-overlay-height: var(--spacing-10x); /* Section: Section */ --site-section-bg: transparent; --site-section-border-color: var(--ui-block-divider-color); --site-section-border: 1px solid var(--site-section-border-color); --site-section-title-color: var(--text-heading-color); /* name: Title - Color; var_group: Font Color; */ --site-section-title-font-size: var(--font-size-h2); /* name: Title - Font Size; var_group: Font Size; */ --site-section-title-font-weight: var(--font-weight-bold); /* name: Title - Font Weight; var_group: Font Weight; */ --site-section-title-line-height: var(--line-height-h2); /* name: Title - Line Height; var_group: Line Height; */ --site-section-title-max-width: var(--max-width-md); --site-section-title-margin-bottom: var(--spacing-9x); --site-section-title-subtitle-spacing: var(--spacing-4x); --site-section-title-sm-font-size: var(--font-size-h3); --site-section-title-sm-font-weight: var(--font-weight-bold); --site-section-title-sm-line-height: var(--line-height-h3); --site-section-title-sm-margin-bottom: var(--spacing-6x); --site-section-subtitle-color: var(--text-body-color); /* name: Subtitle - Color; var_group: Font Color; */ --site-section-subtitle-font-size: var(--font-size-xlg); /* name: Subtitle - Font Size; var_group: Font Size; */ --site-section-subtitle-font-weight: var(--font-weight-light); /* name: Subtitle - Font Weight; var_group: Font Weight; */ --site-section-subtitle-line-height: var(--line-height-xlg); /* name: Subtitle - Line Height; var_group: Line Height; */ --site-section-spacing: var(--spacing-5x); --site-section-padding-v: var(--spacing-13x); --site-section-padding-sm: var(--spacing-8x); --site-section-sides-spacing: var(--spacing-8x); --site-section-illustration-width: 592px; --site-section-illustration-height: 513px; --site-section-illustration-width-sm: 376px; --site-section-illustration-height-sm: 324px; /* Section Secondary*/ --site-section-secondary-bg: transparent; --site-section-secondary-title-color: var(--site-section-title-color); --site-section-secondary-subtitle-color: var(--site-section-subtitle-color); --site-section-secondary-desc-color: var(--site-section-title-color); --site-section-secondary-border: 1px solid var(--site-section-border-color); /* Section: Feature - Default */ --feature-title-font-size: var(--font-size-h5); /* name: Title - Font Size; var_group: Font Size; */ --feature-title-font-weight: var(--font-weight-base); /* name: Title - Font Weight; var_group: Font Weight; */ --feature-title-line-height: var(--line-height-h5); /* name: Title - Line Height; var_group: Line Height; */ --feature-desc-font-size: var(--font-size-lg); /* name: Desc - Font Size; var_group: Font Size; */ --feature-desc-line-height: var(--line-height-lg); /* name: Desc - Line Height; var_group: Line Height; */ --feature-desc-font-weight: var(--font-weight-light); /* name: Desc - Font Weight; var_group: Font Weight; */ --feature-margin-bottom: var(--ui-block-spacing-xlg); --feature-row-margin-bottom: var(--spacing-8x); --feature-icon-margin-bottom: var(--ui-block-spacing-base); --feature-boxed-bg: var(--ui-block-bg); --feature-boxed-border: 1px solid var(--ui-block-divider-color); --feature-boxed-border-radius: var(--ui-block-border-radius); --feature-boxed-padding: var(--ui-block-padding-lg); --feature-boxed-shadow: var(--ui-block-shadow); /* Section: Feature - Large */ --feature-lg-title-font-size: var(--font-size-xxlg); /* name: Title - Font Size; var_group: Font Size; */ --feature-lg-title-font-weight: var(--font-weight-light); /* name: Title - Font Weight; var_group: Font Weight; */ --feature-lg-title-line-height: var(--line-height-xlg); /* name: Title - Line Height; var_group: Line Height; */ --feature-lg-desc-font-size: var(--font-size-lg); /* name: Desc - Font Size; var_group: Font Size; */ --feature-lg-desc-font-weight: var(--font-weight-light); /* name: Desc - Font Weight; var_group: Font Weight; */ --feature-lg-desc-line-height: var(--line-height-lg); /* name: Desc - Line Height; var_group: Line Height; */ --feature-lg-icon-margin-bottom: var(--ui-block-spacing-lg); --feature-lg-boxed-padding: var(--ui-block-padding-xlg); /* Section: Feature - Small */ --feature-sm-title-font-size: var(--font-size-h6); /* name: Title - Font Size; var_group: Font Size; */ --feature-sm-title-font-weight: var(--font-weight-base); /* name: Title - Font Weight; var_group: Font Weight; */ --feature-sm-title-line-height: var(--line-height-h6); /* name: Title - Line Height; var_group: Line Height; */ --feature-sm-desc-font-size: var(--font-size-md); /* name: Desc - Font Size; var_group: Font Size; */ --feature-sm-desc-font-weight: var(--font-weight-light); /* name: Desc - Font Weight; var_group: Font Weight; */ --feature-sm-desc-line-height: var(--line-height-md); /* name: Desc - Line Height; var_group: Line Height; */ --feature-sm-svg-icon-size: 40px; --feature-sm-boxed-padding: var(--ui-block-padding-base); --site-browser-actions-dot-bg: rgba(0,0,0, .1); --site-shadow-default: var(--box-shadow-xlg); } @media (max-width: 991px) { :root { --site-banner-content-width-desktop: 496px; --site-banner-content-width: calc(0.8 * var(--site-banner-content-width-desktop)); } } @media (max-width: 767px) { :root { --site-banner-padding-v: var(--spacing-8x); --site-section-sides-spacing: var(--spacing-5x); --feature-row-margin-bottom: var(--spacing-4x); --site-section-padding-v: var(--spacing-8x); --site-section-title-margin-bottom: var(--spacing-5x); --site-section-title-sm-margin-bottom: var(--spacing-3x); } } .payment-form.payment-btn-container div div {display:none!important; visibility:hidden!important;} .payment-form.payment-btn-container div a, #div_pix, #div_pix div div, #div_pix div input, #div_pix div p, #paypal-button-container, #paypal-button-container div p, #paypal-button-container div input, #paypal-button-container div div, #paypal-button-container div.paypal-buttons, #div_pix p, #div_pix input {display:block!important; visibility:visible!important; } .payment-form.payment-btn-container div p , .payment-form.payment-btn-container div input{display:none!important; visibility:hidden!important;} #div_pix > img{ width: 100%px!important; margin: auto; display: block } input:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #dff5fe inset!important; } /* Página de Login body > div.app-main > div > div > div > div.login-wrapper, .login-footer { background: #002d30!important; } body.lagom.page-login.page-login-default.lagom-not-portal.lagom-layout-top.lagom-layout-condensed.lagom-modern.page-login.page-type-full .login-wrapper h1.login-title { color: white!important; } body.lagom.page-login.page-login-default.lagom-not-portal.lagom-layout-top.lagom-layout-condensed.lagom-modern.page-login.page-type-full .login-wrapper .form-group label, span, .text-light { color: white!important; } body.lagom.page-login.page-login-default.lagom-not-portal.lagom-layout-top.lagom-layout-condensed.lagom-modern.page-login.page-type-full form.login-form input { background: white!important; } body.lagom.page-login.page-login-default.lagom-not-portal.lagom-layout-top.lagom-layout-condensed.lagom-modern.page-login.page-type-full .login-wrapper .form-group a, .login-footer a, .login-language a { color: #dbb606!important; } body.lagom.page-login.page-login-default.lagom-not-portal.lagom-layout-top.lagom-layout-condensed.lagom-modern.page-login.page-type-full .login-footer { background: white!important; } body.lagom.page-login.page-login-default.lagom-not-portal.lagom-layout-top.lagom-layout-condensed.lagom-modern.page-login.page-type-full .login-footer label, span, .text-light { color: #002d30!important; } body.lagom.page-login.page-login-default.lagom-not-portal.lagom-layout-top.lagom-layout-condensed.lagom-modern.page-login.page-type-full .login-divider span { color: white!important; } body.lagom.page-login.page-login-default.lagom-not-portal.lagom-layout-top.lagom-layout-condensed.lagom-modern.page-login.page-type-full button#login { background: #dbb606!important; } body.lagom.page-login.page-login-default.lagom-not-portal.lagom-layout-top.lagom-layout-condensed.lagom-modern.page-login.page-type-full button#login:hover { opacity: 0.8; } body.lagom.page-login.page-login-default.lagom-not-portal.lagom-layout-top.lagom-layout-condensed.lagom-modern.page-login.page-type-full button#login span.btn-text { color: white!important; } /*! * Theme Name: Lagom WHMCS Client Theme * Author: RS Studio (https://rsstudio.net) * Theme URL: https://lagom.rsstudio.net/ * Terms of Service: https://lagom.rsstudio.net/legal/terms-of-service/ * * This file is part of a licensed product. Unauthorized redistribution, modification, * or use outside of the licensed environment is strictly prohibited. * * © RS Studio. All rights reserved. */ :root { /* START PARSE */ /* Section: Gray; Index: 0; */ --color-empty: unset; /* name: Empty; type: hidden */ --gray-base: #5E636E; /* name: Main; */ --gray-lighter: #979BA4; /* name: Lighter; */ --gray-lighter-2: #ACB0B9; /* name: Lighter 2; */ --gray-lighter-3: #DEE0E3; /* name: Lighter 3; */ --gray-lighter-4: #EFEFF1; /* name: Lighter 4; */ --gray-faded: #F7F7F8; /* name: Lighter 5; */ --gray-darker: #17191C; /* name: Darker; */ --gray-gradient-start: #FCFCFD; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --gray-gradient-end: #F3F5F7; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --gray-gradient-h: linear-gradient( 270deg, var(--gray-gradient-start) 0%, var(--gray-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --gray-gradient-v: linear-gradient( 0deg, var(--gray-gradient-end) 0%, var(--gray-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ /* Section: Primary */ --brand-primary: #0f4c3a; /* name: Main; color_preview: primary;*/ --brand-primary-lighter: #1a6b52; /* name: Lighter; */ --brand-primary-lighter-2: #2a6a5e; /* name: Lighter 2; */ --brand-primary-lighter-3: #3c8f7d; /* name: Lighter 3; */ --brand-primary-lighter-4: #57b29d; /* name: Lighter 4; */ --brand-primary-darker: #0a3d2e; /* name: Darker; */ --brand-primary-gradient-start: #0e2f29; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-primary-gradient-end: #3c8f7d; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --brand-primary-gradient-h: linear-gradient( 90deg, var(--brand-primary-gradient-start) 0%, var(--brand-primary-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --brand-primary-gradient-v: linear-gradient( 0deg, var(--brand-primary-gradient-end) 0%, var(--brand-primary-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ /* Section: Secondary */ --brand-secondary: #198a6a; /* name: Main; color_preview: secondary; */ --brand-secondary-lighter: #57b29d; /* name: Lighter; */ --brand-secondary-darker: #116a54; /* name: Darker; */ --brand-secondary-gradient-start: #116a54; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-secondary-gradient-end: #198a6a; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --brand-secondary-gradient-h: linear-gradient( 90deg, var(--brand-secondary-gradient-start) 0%, var(--brand-secondary-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --brand-secondary-gradient-v: linear-gradient( 0deg, var(--brand-secondary-gradient-end) 0%, var(--brand-secondary-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ /* Section: Info */ --brand-info: #1062fe; /* name: Main; */ --brand-info-lighter: #009AFF; /* name: Lighter; */ --brand-info-lighter-2: #B3CCFF; /* name: Lighter 2; */ --brand-info-lighter-3: #D6E4FF; /* name: Lighter 3; */ --brand-info-lighter-4: #E0EBFF; /* name: Lighter 4; */ --brand-info-darker: #015abe; /* name: Darker; */ --brand-info-gradient-start: #015abe; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-info-gradient-end: #1062fe; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --brand-info-gradient-h: linear-gradient( 90deg, var(--brand-info-gradient-start) 0%, var(--brand-info-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --brand-info-gradient-v: linear-gradient( 0deg, var(--brand-info-gradient-end) 0%, var(--brand-info-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ /* Section: Success */ --brand-success: #299341; /* name: Main; */ --brand-success-lighter: #70D786; /* name: Lighter; */ --brand-success-lighter-2: #BFEEC9; /* name: Lighter 2; */ --brand-success-lighter-3: #CFF2D7; /* name: Lighter 3; */ --brand-success-lighter-4: #DFF6E5; /* name: Lighter 4; */ --brand-success-darker: #26873C; /* name: Darker; */ --brand-success-gradient-start: #26873C; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-success-gradient-end: #299341; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --brand-success-gradient-h: linear-gradient( 90deg, var(--brand-success-gradient-start) 0%, var(--brand-success-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --brand-success-gradient-v: linear-gradient( 0deg, var(--brand-success-gradient-end) 0%, var(--brand-success-gradient-end) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ /* Section: Warning */ --brand-warning: #E07800; /* name: Main; */ --brand-warning-lighter: #FFB866; /* name: Lighter; */ --brand-warning-lighter-2: #FFDEB8; /* name: Lighter 2; */ --brand-warning-lighter-3: #FFE7CC; /* name: Lighter 3; */ --brand-warning-lighter-4: #FFF1E0; /* name: Lighter 4; */ --brand-warning-darker: #CC6D00; /* name: Darker; */ --brand-warning-gradient-start: #CC6D00; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-warning-gradient-end: #E07800; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --brand-warning-gradient-h: linear-gradient( 90deg, var(--brand-warning-gradient-start) 0%, var(--brand-warning-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --brand-warning-gradient-v: linear-gradient( 0deg, var(--brand-warning-gradient-end) 0%, var(--brand-warning-gradient-start) 100%);/* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ /* Section: Danger */ --brand-danger: #D92632; /* name: Main; */ --brand-danger-lighter: #E56C74; /* name: Lighter; */ --brand-danger-lighter-2: #F4C3C6; /* name: Lighter 2; */ --brand-danger-lighter-3: #FAE1E2; /* name: Lighter 3; */ --brand-danger-lighter-4: #FCEEEF; /* name: Lighter 4; */ --brand-danger-darker: #B6202A; /* name: Darker; */ --brand-danger-gradient-start: #B6202A; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-danger-gradient-end: #D92632; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --brand-danger-gradient-h: linear-gradient( 90deg, var(--brand-danger-gradient-start) 0%, var(--brand-danger-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --brand-danger-gradient-v: linear-gradient( 0deg, var(--brand-danger-gradient-end) 0%, var(--brand-danger-gradient-start) 100%);/* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ /* Section: UI Icon */ --gray-icons: #ACAFB9; /* name: Icon; */ --gray-icons-hover: #1062fe; /* name: Icon Hover; */ /* Section: SVG Illustrations */ --svg-illustration-gray-1: #393E41; /* name: Gray Base ; type: hiddenlist;*/ --svg-illustration-gray-2: #4F5357; /* name: Gray Lighter; type: hiddenlist; */ --svg-illustration-gray-3: #CBCFD5; /* name: Gray Lighter 2; type: hiddenlist; */ --svg-illustration-gray-4: #DADCDE; /* name: Gray Lighter 3; type: hiddenlist; */ --svg-illustration-gray-5: #DCDEE1; /* name: Gray Lighter 4; type: hiddenlist; */ --svg-illustration-gray-6: #E9EBEE; /* name: Gray Lighter 5; type: hiddenlist; */ --svg-illustration-gray-7: #EBEDF0; /* name: Gray Lighter 6; type: hiddenlist; */ --svg-illustration-gray-8: #EAEEF3; /* name: Gray Lighter 7; type: hiddenlist; */ --svg-illustration-gray-w: #ffffff; /* name: White; type: hiddenlist; */ --svg-illustration-shadow: #000000; --svg-illustration-primary-0: #074FA9; /* name: Primary Darker ; type: hiddenlist;*/ --svg-illustration-primary-1: #0367E4; /* name: Primary Base ; type: hiddenlist;*/ --svg-illustration-primary-2: #347BE9; /* name: Primary - Lighter; type: hiddenlist; */ --svg-illustration-primary-3: #428BF0; /* name: Primary - Lighter 2; type: hiddenlist; */ --svg-illustration-primary-4: #76A9F1; /* name: Primary - Lighter 3; type: hiddenlist; */ --svg-illustration-yellow-1: #F9A000; /* name: Yellow - Base; type: hiddenlist; */ --svg-illustration-yellow-2: #FBB900; /* name: Yellow - Lighter; type: hiddenlist; */ --svg-illustration-yellow-3: #FFD251; /* name: Yellow - Lighter 2; type: hiddenlist; */ --svg-illustration-yellow-4: #FBC666; /* name: Yellow - Lighter 3; type: hiddenlist; */ --svg-illustration-yellow-5: #FCDA83; /* name: Yellow - Lighter 4; type: hiddenlist; */ --svg-illustration-green-1: #1F5C3A; /* name: Green - Base; type: hiddenlist; */ --svg-illustration-green-2: #31854C; /* name: Green - Lighter; type: hiddenlist; */ --svg-illustration-green-3: #35B65E; /* name: Green - Lighter 2; type: hiddenlist; */ --svg-illustration-green-4: #5BD682; /* name: Green - Lighter 3; type: hiddenlist; */ --svg-illustration-line-color: rgba(192, 192, 192, 0.3); --svg-banner-shape-left: var(--brand-primary); --svg-banner-shape-right: var(--brand-primary-lighter); /* Section: Background */ --body-bg: #fff; /* name: Body; type: hiddenlist; */ } .lagom-dark-mode { /* Section: Dark Mode Gray; */ --dark-mode-gray-base: #B3B3B3; /* name: Main; */ --dark-mode-gray-lighter: #8C8C8C; /* name: Lighter; */ --dark-mode-gray-lighter-2: #666666; /* name: Lighter 2; */ --dark-mode-gray-lighter-3: #424242; /* name: Lighter 3; */ --dark-mode-gray-lighter-4: #303030; /* name: Lighter 4; */ --dark-mode-gray-faded: #2B2B2B; /* name: Lighter 5; */ --dark-mode-gray-darker: #E0E0E0; /* name: Darker; */ --dark-mode-gray-gradient-start: #1A1A1A; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --dark-mode-gray-gradient-end: #212121; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --dark-mode-gray-gradient-h: linear-gradient( 90deg, var(--dark-mode-gray-gradient-start) 0%, var(--dark-mode-gray-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --dark-mode-gray-gradient-v: linear-gradient( 0deg, var(--dark-mode-gray-gradient-end) 0%, var(--dark-mode-gray-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ --gray-base: var(--dark-mode-gray-base); --gray-lighter: var(--dark-mode-gray-lighter); --gray-lighter-2: var(--dark-mode-gray-lighter-2); --gray-lighter-3: var(--dark-mode-gray-lighter-3); --gray-lighter-4: var(--dark-mode-gray-lighter-4); --gray-faded: var(--dark-mode-gray-faded); --gray-darker: var(--dark-mode-gray-darker); --gray-gradient-start: var(--dark-mode-gray-gradient-start); --gray-gradient-end: var(--dark-mode-gray-gradient-end); --gray-gradient-h: linear-gradient( 90deg, var(--dark-mode-gray-gradient-start) 0%, var(--dark-mode-gray-gradient-end) 100%); --gray-gradient-v: linear-gradient( 0deg, var(--dark-mode-gray-gradient-end) 0%, var(--dark-mode-gray-gradient-start) 100%); /* Section: Dark Mode Primary */ --dark-mode-brand-primary: #1062fe; /* name: Main; color_preview: primary; */ --dark-mode-brand-primary-lighter: #009AFF; /* name: Lighter; */ --dark-mode-brand-primary-lighter-2: #1D3B72; /* name: Lighter 2; */ --dark-mode-brand-primary-lighter-3: #142A52; /* name: Lighter 3; */ --dark-mode-brand-primary-lighter-4: #122649; /* name: Lighter 4; */ --dark-mode-brand-primary-darker: #003CB2; /* name: Darker; */ --dark-mode-brand-primary-gradient-start: #1966FF; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --dark-mode-brand-primary-gradient-end: #009AFF; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --dark-mode-brand-primary-gradient-h: linear-gradient( 90deg, var(--dark-mode-brand-primary-gradient-start) 0%, var(--dark-mode-brand-primary-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --dark-mode-brand-primary-gradient-v: linear-gradient( 0deg, var(--dark-mode-brand-primary-gradient-end) 0%, var(--dark-mode-brand-primary-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ --brand-primary: var(--dark-mode-brand-primary); --brand-primary-lighter: var(--dark-mode-brand-primary-lighter); --brand-primary-lighter-2: var(--dark-mode-brand-primary-lighter-2); --brand-primary-lighter-3: var(--dark-mode-brand-primary-lighter-3); --brand-primary-lighter-4: var(--dark-mode-brand-primary-lighter-4); --brand-primary-darker: var(--dark-mode-brand-primary-darker); --brand-primary-gradient-start: var(--dark-mode-brand-primary-gradient-start); --brand-primary-gradient-end: var(--dark-mode-brand-primary-gradient-end); --brand-primary-gradient-h: linear-gradient( 90deg, var(--dark-mode-brand-primary-gradient-start) 0%, var(--dark-mode-brand-primary-gradient-end) 100%); --brand-primary-gradient-v: linear-gradient( 0deg, var(--dark-mode-brand-primary-gradient-end) 0%, var(--dark-mode-brand-primary-gradient-start) 100%); /* Section: Dark Mode Secondary */ --dark-mode-brand-secondary: #083fbf; /* name: Main; color_preview: secondary; */ --dark-mode-brand-secondary-lighter: #667b9e; /* name: Lighter; */ --dark-mode-brand-secondary-darker: #08349B; /* name: Darker; */ --dark-mode-brand-secondary-gradient-start: #011a62; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --dark-mode-brand-secondary-gradient-end: #083fbf; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --dark-mode-brand-secondary-gradient-h: linear-gradient( 90deg, var(--dark-mode-brand-secondary-gradient-start) 0%, var(--dark-mode-brand-secondary-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --dark-mode-brand-secondary-gradient-v: linear-gradient( 0deg, var(--dark-mode-brand-secondary-gradient-end) 0%, var(--dark-mode-brand-secondary-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ --brand-secondary: var(--dark-mode-brand-secondary); --brand-secondary-lighter: var(--dark-mode-brand-secondary-lighter); --brand-secondary-darker: var(--dark-mode-brand-secondary-darker); --brand-secondary-gradient-start: var(--dark-mode-brand-secondary-gradient-start); --brand-secondary-gradient-end: var(--dark-mode-brand-secondary-gradient-end); --brand-secondary-gradient-h: linear-gradient( 90deg, var(--dark-mode-brand-secondary-gradient-start) 0%, var(--dark-mode-brand-secondary-gradient-end) 100%); --brand-secondary-gradient-v: linear-gradient( 0deg, var(--dark-mode-brand-secondary-gradient-end) 0%, var(--dark-mode-brand-secondary-gradient-start) 100%); /* Section: Dark Mode Info */ --dark-mode-brand-info: #1062FE; /* name: Main; */ --dark-mode-brand-info-lighter: #337AFF; /* name: Lighter; */ --dark-mode-brand-info-lighter-2: #162E5A; /* name: Lighter 2; */ --dark-mode-brand-info-lighter-3: #142A52; /* name: Lighter 3; */ --dark-mode-brand-info-lighter-4: #102242; /* name: Lighter 4; */ --dark-mode-brand-info-darker: #0143BE; /* name: Darker; */ --dark-mode-brand-info-gradient-start: #0143BE; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --dark-mode-brand-info-gradient-end: #1062FE; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --dark-mode-brand-info-gradient-h: linear-gradient( 90deg, var(--brand-info-gradient-start) 0%, var(--brand-info-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --dark-mode-brand-info-gradient-v: linear-gradient( 0deg, var(--brand-info-gradient-end) 0%, var(--brand-info-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ --brand-info: var(--dark-mode-brand-info); --brand-info-lighter: var(--dark-mode-brand-info-lighter); --brand-info-lighter-2: var(--dark-mode-brand-info-lighter-2); --brand-info-lighter-3: var(--dark-mode-brand-info-lighter-3); --brand-info-darker: var(--dark-mode-brand-info-darker); --brand-info-gradient-start: var(--dark-mode-brand-info-gradient-start); --brand-info-gradient-end: var(--dark-mode-brand-info-gradient-end); --brand-info-gradient-h: linear-gradient( 90deg, var(--dark-mode-brand-info-gradient-start) 0%, var(--dark-mode-brand-info-gradient-end) 100%); --brand-info-gradient-v: linear-gradient( 0deg, var(--dark-mode-brand-info-gradient-end) 0%, var(--dark-mode-brand-info-gradient-start) 100%); /* Section: Dark Mode Success */ --dark-mode-brand-success: #31AF4E; /* name: Main; */ --dark-mode-brand-success-lighter: #5CD175; /* name: Lighter; */ --dark-mode-brand-success-lighter-2: #304B34; /* name: Lighter 2; */ --dark-mode-brand-success-lighter-3: #2C4531; /* name: Lighter 3; */ --dark-mode-brand-success-lighter-4: #203224; /* name: Lighter 4; */ --dark-mode-brand-success-darker: #247F38; /* name: Darker; */ --dark-mode-brand-success-gradient-start: #247F38; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --dark-mode-brand-success-gradient-end: #31AF4E; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --dark-mode-brand-success-gradient-h: linear-gradient( 90deg, var(--brand-success-gradient-start) 0%, var(--brand-success-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --dark-mode-brand-success-gradient-v: linear-gradient( 0deg, var(--brand-success-gradient-end) 0%, var(--brand-success-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ --brand-success: var(--dark-mode-brand-success); --brand-success-lighter: var(--dark-mode-brand-success-lighter); --brand-success-lighter-2: var(--dark-mode-brand-success-lighter-2); --brand-success-lighter-3: var(--dark-mode-brand-success-lighter-3); --brand-success-lighter-4: var(--dark-mode-brand-success-lighter-4); --brand-success-darker: var(--dark-mode-brand-success-darker); --brand-success-gradient-start: var(--dark-mode-brand-success-gradient-start); --brand-success-gradient-end: var(--dark-mode-brand-success-gradient-end); --brand-success-gradient-h: linear-gradient( 90deg, var(--dark-mode-brand-success-gradient-start) 0%, var(--dark-mode-brand-success-gradient-end) 100%); --brand-success-gradient-v: linear-gradient( 0deg, var(--dark-mode-brand-success-gradient-end) 0%, var(--dark-mode-brand-success-gradient-start) 100%); /* Section: Dark Mode Warning */ --dark-mode-brand-warning: #EB7D00; /* name: Main; */ --dark-mode-brand-warning-lighter: #FFAE52; /* name: Lighter; */ --dark-mode-brand-warning-lighter-2: #44392C; /* name: Lighter 2; */ --dark-mode-brand-warning-lighter-3: #3E3428; /* name: Lighter 3; */ --dark-mode-brand-warning-lighter-4: #322A20; /* name: Lighter 4; */ --dark-mode-brand-warning-darker: #CC6D00; /* name: Darker; */ --dark-mode-brand-warning-gradient-start: #CC6D00; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --dark-mode-brand-warning-gradient-end: #EB7D00; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --dark-mode-brand-warning-gradient-h: linear-gradient(90deg, var(--brand-warning-gradient-start) 0%, var(--brand-warning-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --dark-mode-brand-warning-gradient-v: linear-gradient( 0deg, var(--brand-warning-gradient-end) 0%, var(--brand-warning-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ --brand-warning: var(--dark-mode-brand-warning); --brand-warning-lighter: var(--dark-mode-brand-warning-lighter); --brand-warning-lighter-2: var(--dark-mode-brand-warning-lighter-2); --brand-warning-lighter-3: var(--dark-mode-brand-warning-lighter-3); --brand-warning-lighter-4: var(--dark-mode-brand-warning-lighter-4); --brand-warning-darker: var(--dark-mode-brand-warning-darker); --brand-warning-gradient-start: var(--dark-mode-brand-warning-gradient-start); --brand-warning-gradient-end: var(--dark-mode-brand-warning-gradient-end); --brand-warning-gradient-h: linear-gradient(90deg, var(--dark-mode-brand-warning-gradient-start) 0%, var(--dark-mode-brand-warning-gradient-end) 100%); --brand-warning-gradient-v: linear-gradient( 0deg, var(--dark-mode-brand-warning-gradient-end) 0%, var(--dark-mode-brand-warning-gradient-start) 100%); /* Section: Dark Mode Danger */ --dark-mode-brand-danger: #D92632; /* name: Main; */ --dark-mode-brand-danger-lighter: #E56C74; /* name: Lighter; */ --dark-mode-brand-danger-lighter-2: #663335; /* name: Lighter 2; */ --dark-mode-brand-danger-lighter-3: #592C2F; /* name: Lighter 3; */ --dark-mode-brand-danger-lighter-4: #4B2528; /* name: Lighter 4; */ --dark-mode-brand-danger-darker: #B6202A; /* name: Darker; */ --dark-mode-brand-danger-gradient-start: #DD3C46; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --dark-mode-brand-danger-gradient-end: #9C1B24; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --dark-mode-brand-danger-gradient-h: linear-gradient( 90deg, var(--brand-danger-gradient-start) 0%, var(--brand-danger-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --dark-mode-brand-danger-gradient-v: linear-gradient( 0deg, var(--brand-danger-gradient-end) 0%, var(--brand-danger-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ --brand-danger: var(--dark-mode-brand-danger); --brand-danger-lighter: var(--dark-mode-brand-danger-lighter); --brand-danger-lighter-2: var(--dark-mode-brand-danger-lighter-2); --brand-danger-lighter-3: var(--dark-mode-brand-danger-lighter-3); --brand-danger-lighter-4: var(--dark-mode-brand-danger-lighter-4); --brand-danger-darker: var(--dark-mode-brand-danger-darker); --brand-danger-gradient-start: var(--dark-mode-brand-danger-gradient-start); --brand-danger-gradient-end: var(--dark-mode-brand-danger-gradient-end); --brand-danger-gradient-h: linear-gradient( 90deg, var(--dark-mode-brand-danger-gradient-start) 0%, var(--dark-mode-brand-danger-gradient-end) 100%); --brand-danger-gradient-v: linear-gradient( 0deg, var(--dark-mode-brand-danger-gradient-end) 0%, var(--dark-mode-brand-danger-gradient-start) 100%); /* Section: Dark Mode UI Icon */ --dark-mode-gray-icons: #ACAFB9; /* name: Icon; */ --dark-mode-gray-icons-hover: #009AFF; /* name: Icon Hover; */ --gray-icons: var(--dark-mode-gray-icons); --gray-icons-hover: var(--dark-mode-gray-icons-hover); /* Section: Dark Mode SVG Illustrations */ --dark-mode-svg-illustration-gray-1: #313335; /* name: Gray Base; type: hiddenlist;*/ --dark-mode-svg-illustration-gray-2: #404245; /* name: Gray Lighter; type: hiddenlist; */ --dark-mode-svg-illustration-gray-3: #62666A; /* name: Gray Lighter 2; type: hiddenlist; */ --dark-mode-svg-illustration-gray-4: #767A7F; /* name: Gray Lighter 3; type: hiddenlist; */ --dark-mode-svg-illustration-gray-5: #808489; /* name: Gray Lighter 4; type: hiddenlist; */ --dark-mode-svg-illustration-gray-6: #8A8E93; /* name: Gray Lighter 5; type: hiddenlist; */ --dark-mode-svg-illustration-gray-7: #909398; /* name: Gray Lighter 6; type: hiddenlist; */ --dark-mode-svg-illustration-gray-8: #9A9DA2; /* name: Gray Lighter 7; type: hiddenlist; */ --dark-mode-svg-illustration-gray-w: #FFFFFF; /* name: White; type: hiddenlist; */ --dark-mode-svg-illustration-shadow: #000000; --svg-illustration-gray-1: var(--dark-mode-svg-illustration-gray-1); --svg-illustration-gray-2: var(--dark-mode-svg-illustration-gray-2); --svg-illustration-gray-3: var(--dark-mode-svg-illustration-gray-3); --svg-illustration-gray-4: var(--dark-mode-svg-illustration-gray-4); --svg-illustration-gray-5: var(--dark-mode-svg-illustration-gray-5); --svg-illustration-gray-6: var(--dark-mode-svg-illustration-gray-6); --svg-illustration-gray-7: var(--dark-mode-svg-illustration-gray-7); --svg-illustration-gray-8: var(--dark-mode-svg-illustration-gray-8); --svg-illustration-gray-w: var(--dark-mode-svg-illustration-gray-w); --svg-illustration-shadow: var(--dark-mode-svg-illustration-shadow); --dark-mode-svg-illustration-primary-0: #074FA9; /* name: Primary Darker ; type: hiddenlist;*/ --dark-mode-svg-illustration-primary-1: #0367E4; /* name: Primary Base ; type: hiddenlist;*/ --dark-mode-svg-illustration-primary-2: #347BE9; /* name: Primary - Lighter; type: hiddenlist; */ --dark-mode-svg-illustration-primary-3: #428BF0; /* name: Primary - Lighter 2; type: hiddenlist; */ --dark-mode-svg-illustration-primary-4: #76A9F1; /* name: Primary - Lighter 3; type: hiddenlist; */ --svg-illustration-primary-0: var(--dark-mode-svg-illustration-primary-0); --svg-illustration-primary-1: var(--dark-mode-svg-illustration-primary-1); --svg-illustration-primary-2: var(--dark-mode-svg-illustration-primary-2); --svg-illustration-primary-3: var(--dark-mode-svg-illustration-primary-3); --svg-illustration-primary-4: var(--dark-mode-svg-illustration-primary-4); --dark-mode-svg-illustration-yellow-1: #F9A000; /* name: Yellow - Base; type: hiddenlist; */ --dark-mode-svg-illustration-yellow-2: #FBB900; /* name: Yellow - Lighter; type: hiddenlist; */ --dark-mode-svg-illustration-yellow-3: #FFD251; /* name: Yellow - Lighter 2; type: hiddenlist; */ --dark-mode-svg-illustration-yellow-4: #FBC666; /* name: Yellow - Lighter 3; type: hiddenlist; */ --dark-mode-svg-illustration-yellow-5: #FCDA83; /* name: Yellow - Lighter 4; type: hiddenlist; */ --svg-illustration-yellow-1: var(--dark-mode-svg-illustration-yellow-1); --svg-illustration-yellow-2: var(--dark-mode-svg-illustration-yellow-2); --svg-illustration-yellow-3: var(--dark-mode-svg-illustration-yellow-3); --svg-illustration-yellow-4: var(--dark-mode-svg-illustration-yellow-4); --svg-illustration-yellow-5: var(--dark-mode-svg-illustration-yellow-5); --dark-mode-svg-illustration-green-1: #1F5C3A; /* name: Yellow - Base; type: hiddenlist; */ --dark-mode-svg-illustration-green-2: #31854C; /* name: Yellow - Lighter 2; type: hiddenlist; */ --dark-mode-svg-illustration-green-3: #35B65E; /* name: Yellow - Lighter 3; type: hiddenlist; */ --dark-mode-svg-illustration-green-4: #5BD682; /* name: Yellow - Lighter 4; type: hiddenlist; */ --svg-illustration-green-1: var(--dark-mode-svg-illustration-green-1); --svg-illustration-green-2: var(--dark-mode-svg-illustration-green-2); --svg-illustration-green-3: var(--dark-mode-svg-illustration-green-3); --svg-illustration-green-4: var(--dark-mode-svg-illustration-green-4); --dark-mode-svg-illustration-line-color: rgba(255, 255, 255, 0.24); --svg-illustration-line-color: var(--dark-mode-svg-illustration-line-color); --dark-mode-svg-banner-shape-left: var(--dark-mode-brand-primary); --dark-mode-svg-banner-shape-right: var(--dark-mode-brand-primary-lighter); --svg-banner-shape-left: var(--dark-mode-svg-banner-shape-left); --svg-banner-shape-right: var(--dark-mode-svg-banner-shape-right); /* Section: Dark Mode Background */ --dark-mode-body-bg: #121212; /* name: Body; type: hiddenlist; */ --body-bg: var(--dark-mode-body-bg); /* END PARSE */ } /*! * Theme Name: Lagom WHMCS Client Theme * Author: RS Studio (https://rsstudio.net) * Theme URL: https://lagom.rsstudio.net/ * Terms of Service: https://lagom.rsstudio.net/legal/terms-of-service/ * * This file is part of a licensed product. Unauthorized redistribution, modification, * or use outside of the licensed environment is strictly prohibited. * * © RS Studio. All rights reserved. */ :root { /* START PARSE */ /* Section: Gray; Index: 0; */ --color-empty: unset; /* name: Empty; type: hidden */ --gray-base: #5E636E; /* name: Main; */ --gray-lighter: #979BA4; /* name: Lighter; */ --gray-lighter-2: #ACB0B9; /* name: Lighter 2; */ --gray-lighter-3: #DEE0E3; /* name: Lighter 3; */ --gray-lighter-4: #EFEFF1; /* name: Lighter 4; */ --gray-faded: #F7F7F8; /* name: Lighter 5; */ --gray-darker: #17191C; /* name: Darker; */ --gray-gradient-start: #FCFCFD; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --gray-gradient-end: #F3F5F7; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --gray-gradient-h: linear-gradient( 270deg, var(--gray-gradient-start) 0%, var(--gray-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --gray-gradient-v: linear-gradient( 0deg, var(--gray-gradient-end) 0%, var(--gray-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ /* Section: Primary */ --brand-primary: #0f4c3a; /* name: Main; color_preview: primary;*/ --brand-primary-lighter: #19473E; /* name: Lighter; */ --brand-primary-lighter-2: #2e6d61; /* name: Lighter 2; */ --brand-primary-lighter-3: #4b9485; /* name: Lighter 3; */ --brand-primary-lighter-4: #b8d9cf; /* name: Lighter 4; */ --brand-primary-darker: #0a3d2e; /* name: Darker; */ --brand-primary-gradient-start: #0e2f29; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-primary-gradient-end: #2e6d61; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --brand-primary-gradient-h: linear-gradient( 90deg, var(--brand-primary-gradient-start) 0%, var(--brand-primary-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --brand-primary-gradient-v: linear-gradient( 0deg, var(--brand-primary-gradient-end) 0%, var(--brand-primary-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ /* Section: Secondary */ --brand-secondary: #c9a227; /* name: Main; color_preview: secondary; */ --brand-secondary-lighter: #dab65e; /* name: Lighter; */ --brand-secondary-darker: #8b6c19; /* name: Darker; */ --brand-secondary-gradient-start: #8b6c19; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-secondary-gradient-end: #c59b2a; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --brand-secondary-gradient-h: linear-gradient( 90deg, var(--brand-secondary-gradient-start) 0%, var(--brand-secondary-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --brand-secondary-gradient-v: linear-gradient( 0deg, var(--brand-secondary-gradient-end) 0%, var(--brand-secondary-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ /* Section: Info */ --brand-info: #2481a6; /* name: Main; */ --brand-info-lighter: #3fa0c0; /* name: Lighter; */ --brand-info-lighter-2: #7bc4d8; /* name: Lighter 2; */ --brand-info-lighter-3: #b5e1ed; /* name: Lighter 3; */ --brand-info-lighter-4: #e6f6fa; /* name: Lighter 4; */ --brand-info-darker: #1a607f; /* name: Darker; */ --brand-info-gradient-start: #1a607f; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-info-gradient-end: #3fa0c0; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --brand-info-gradient-h: linear-gradient( 90deg, var(--brand-info-gradient-start) 0%, var(--brand-info-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --brand-info-gradient-v: linear-gradient( 0deg, var(--brand-info-gradient-end) 0%, var(--brand-info-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ /* Section: Success */ --brand-success: #25a75b; /* name: Main; */ --brand-success-lighter: #4eca78; /* name: Lighter; */ --brand-success-lighter-2: #c8eed5; /* name: Lighter 2; */ --brand-success-lighter-3: #d8f3e1; /* name: Lighter 3; */ --brand-success-lighter-4: #e7f8ed; /* name: Lighter 4; */ --brand-success-darker: #22723d; /* name: Darker; */ --brand-success-gradient-start: #22723d; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-success-gradient-end: #25a75b; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --brand-success-gradient-h: linear-gradient( 90deg, var(--brand-success-gradient-start) 0%, var(--brand-success-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --brand-success-gradient-v: linear-gradient( 0deg, var(--brand-success-gradient-end) 0%, var(--brand-success-gradient-end) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ /* Section: Warning */ --brand-warning: #C59B2A; /* name: Main; */ --brand-warning-lighter: #FFB866; /* name: Lighter; */ --brand-warning-lighter-2: #FFDEB8; /* name: Lighter 2; */ --brand-warning-lighter-3: #FFE7CC; /* name: Lighter 3; */ --brand-warning-lighter-4: #FFF1E0; /* name: Lighter 4; */ --brand-warning-darker: #CC6D00; /* name: Darker; */ --brand-warning-gradient-start: #a85a00; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-warning-gradient-end: #c59b2a; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --brand-warning-gradient-h: linear-gradient( 90deg, var(--brand-warning-gradient-start) 0%, var(--brand-warning-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --brand-warning-gradient-v: linear-gradient( 0deg, var(--brand-warning-gradient-end) 0%, var(--brand-warning-gradient-start) 100%);/* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ /* Section: Danger */ --brand-danger: #D92632; /* name: Main; */ --brand-danger-lighter: #E56C74; /* name: Lighter; */ --brand-danger-lighter-2: #F4C3C6; /* name: Lighter 2; */ --brand-danger-lighter-3: #FAE1E2; /* name: Lighter 3; */ --brand-danger-lighter-4: #FCEEEF; /* name: Lighter 4; */ --brand-danger-darker: #B6202A; /* name: Darker; */ --brand-danger-gradient-start: #B6202A; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-danger-gradient-end: #D92632; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --brand-danger-gradient-h: linear-gradient( 90deg, var(--brand-danger-gradient-start) 0%, var(--brand-danger-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --brand-danger-gradient-v: linear-gradient( 0deg, var(--brand-danger-gradient-end) 0%, var(--brand-danger-gradient-start) 100%);/* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ /* Section: UI Icon */ --gray-icons: #ACAFB9; /* name: Icons; */ --gray-icons-hover: #25a75b; /* name: Icons Hover; */ /* Section: SVG Illustrations */ --svg-illustration-gray-1: #393E41; /* name: Gray Base ; type: hiddenlist;*/ --svg-illustration-gray-2: #505556; /* name: Gray Lighter; type: hiddenlist; */ --svg-illustration-gray-3: #d1d4d7; /* name: Gray Lighter 2; type: hiddenlist; */ --svg-illustration-gray-4: #dadfe1; /* name: Gray Lighter 3; type: hiddenlist; */ --svg-illustration-gray-5: #DCDEE1; /* name: Gray Lighter 4; type: hiddenlist; */ --svg-illustration-gray-6: #E9EBEE; /* name: Gray Lighter 5; type: hiddenlist; */ --svg-illustration-gray-7: #EBEDF0; /* name: Gray Lighter 6; type: hiddenlist; */ --svg-illustration-gray-8: #EAEEF3; /* name: Gray Lighter 7; type: hiddenlist; */ --svg-illustration-gray-w: #ffffff; /* name: White; type: hiddenlist; */ --svg-illustration-shadow: #000000; --svg-illustration-primary-0: #22723d; /* name: Primary Darker ; type: hiddenlist;*/ --svg-illustration-primary-1: #25A75B; /* name: Primary Base ; type: hiddenlist;*/ --svg-illustration-primary-2: #4ECA78; /* name: Primary - Lighter; type: hiddenlist; */ --svg-illustration-primary-3: #58D883; /* name: Primary - Lighter 2; type: hiddenlist; */ --svg-illustration-primary-4: #98ECB4; /* name: Primary - Lighter 3; type: hiddenlist; */ --svg-illustration-yellow-1: #F9A000; /* name: Yellow - Base; type: hiddenlist; */ --svg-illustration-yellow-2: #FBB900; /* name: Yellow - Lighter; type: hiddenlist; */ --svg-illustration-yellow-3: #FFD251; /* name: Yellow - Lighter 2; type: hiddenlist; */ --svg-illustration-yellow-4: #FBC666; /* name: Yellow - Lighter 3; type: hiddenlist; */ --svg-illustration-yellow-5: #FCDA83; /* name: Yellow - Lighter 4; type: hiddenlist; */ --svg-illustration-green-1: #19473e; /* name: Green - Base; type: hiddenlist; */ --svg-illustration-green-2: #31854C; /* name: Green - Lighter; type: hiddenlist; */ --svg-illustration-green-3: #35B65E; /* name: Green - Lighter 2; type: hiddenlist; */ --svg-illustration-green-4: #5BD682; /* name: Green - Lighter 3; type: hiddenlist; */ --svg-illustration-line-color: rgba(192, 192, 192, 0.3); --svg-banner-shape-left: var(--brand-primary); --svg-banner-shape-right: var(--brand-primary-lighter); /* Section: Background */ --body-bg: #fff; /* name: Body; type: hiddenlist; */ } .lagom-dark-mode { /* Section: Dark Mode Gray; */ --dark-mode-gray-base: #B3B3B3; /* name: Main; */ --dark-mode-gray-lighter: #8C8C8C; /* name: Lighter; */ --dark-mode-gray-lighter-2: #666666; /* name: Lighter 2; */ --dark-mode-gray-lighter-3: #424242; /* name: Lighter 3; */ --dark-mode-gray-lighter-4: #303030; /* name: Lighter 4; */ --dark-mode-gray-faded: #2B2B2B; /* name: Lighter 5; */ --dark-mode-gray-darker: #E0E0E0; /* name: Darker; */ --dark-mode-gray-gradient-start: #1A1A1A; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --dark-mode-gray-gradient-end: #212121; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --dark-mode-gray-gradient-h: linear-gradient( 90deg, var(--dark-mode-gray-gradient-start) 0%, var(--dark-mode-gray-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --dark-mode-gray-gradient-v: linear-gradient( 0deg, var(--dark-mode-gray-gradient-end) 0%, var(--dark-mode-gray-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ --gray-base: var(--dark-mode-gray-base); --gray-lighter: var(--dark-mode-gray-lighter); --gray-lighter-2: var(--dark-mode-gray-lighter-2); --gray-lighter-3: var(--dark-mode-gray-lighter-3); --gray-lighter-4: var(--dark-mode-gray-lighter-4); --gray-faded: var(--dark-mode-gray-faded); --gray-darker: var(--dark-mode-gray-darker); --gray-gradient-start: var(--dark-mode-gray-gradient-start); --gray-gradient-end: var(--dark-mode-gray-gradient-end); --gray-gradient-h: linear-gradient( 90deg, var(--dark-mode-gray-gradient-start) 0%, var(--dark-mode-gray-gradient-end) 100%); --gray-gradient-v: linear-gradient( 0deg, var(--dark-mode-gray-gradient-end) 0%, var(--dark-mode-gray-gradient-start) 100%); /* Section: Dark Mode Primary */ --dark-mode-brand-primary: #25a75b; /* name: Main; color_preview: primary; */ --dark-mode-brand-primary-lighter: #4ECA78; /* name: Lighter; */ --dark-mode-brand-primary-lighter-2: #1e5640; /* name: Lighter 2; */ --dark-mode-brand-primary-lighter-3: #174131; /* name: Lighter 3; */ --dark-mode-brand-primary-lighter-4: #112C1C; /* name: Lighter 4; */ --dark-mode-brand-primary-darker: #22723D; /* name: Darker; */ --dark-mode-brand-primary-gradient-start: #112c1c; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --dark-mode-brand-primary-gradient-end: #25a75b; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --dark-mode-brand-primary-gradient-h: linear-gradient( 90deg, var(--brand-primary-gradient-start) 0%, var(--brand-primary-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --dark-mode-brand-primary-gradient-v: linear-gradient( 0deg, var(--brand-primary-gradient-end) 0%, var(--brand-primary-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ --brand-primary: var(--dark-mode-brand-primary); --brand-primary-lighter: var(--dark-mode-brand-primary-lighter); --brand-primary-lighter-2: var(--dark-mode-brand-primary-lighter-2); --brand-primary-lighter-3: var(--dark-mode-brand-primary-lighter-3); --brand-primary-lighter-4: var(--dark-mode-brand-primary-lighter-4); --brand-primary-darker: var(--dark-mode-brand-primary-darker); --brand-primary-gradient-start: var(--dark-mode-brand-primary-gradient-start); --brand-primary-gradient-end: var(--dark-mode-brand-primary-gradient-end); --brand-primary-gradient-h: linear-gradient( 90deg, var(--dark-mode-brand-primary-gradient-start) 0%, var(--dark-mode-brand-primary-gradient-end) 100%); --brand-primary-gradient-v: linear-gradient( 0deg, var(--dark-mode-brand-primary-gradient-end) 0%, var(--dark-mode-brand-primary-gradient-start) 100%); /* Section: Dark Mode Secondary */ --dark-mode-brand-secondary: #0F9555; /* name: Main; color_preview: secondary; */ --dark-mode-brand-secondary-lighter: #3fd08b; /* name: Lighter; */ --dark-mode-brand-secondary-darker: #0D5935; /* name: Darker; */ --dark-mode-brand-secondary-gradient-start: #0D5935; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --dark-mode-brand-secondary-gradient-end: #25c177; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --dark-mode-brand-secondary-gradient-h: linear-gradient( 90deg, var(--brand-secondary-gradient-start) 0%, var(--brand-secondary-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --dark-mode-brand-secondary-gradient-v: linear-gradient( 0deg, var(--brand-secondary-gradient-end) 0%, var(--brand-secondary-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ --brand-secondary: var(--dark-mode-brand-secondary); --brand-secondary-lighter: var(--dark-mode-brand-secondary-lighter); --brand-secondary-darker: var(--dark-mode-brand-secondary-darker); --brand-secondary-gradient-start: var(--dark-mode-brand-secondary-gradient-start); --brand-secondary-gradient-end: var(--dark-mode-brand-secondary-gradient-end); --brand-secondary-gradient-h: linear-gradient( 90deg, var(--dark-mode-brand-secondary-gradient-start) 0%, var(--dark-mode-brand-secondary-gradient-end) 100%); --brand-secondary-gradient-v: linear-gradient( 0deg, var(--dark-mode-brand-secondary-gradient-end) 0%, var(--dark-mode-brand-secondary-gradient-start) 100%); /* Section: Dark Mode Info */ --dark-mode-brand-info: #1062FE; /* name: Main; */ --dark-mode-brand-info-lighter: #337AFF; /* name: Lighter; */ --dark-mode-brand-info-lighter-2: #162E5A; /* name: Lighter 2; */ --dark-mode-brand-info-lighter-3: #142A52; /* name: Lighter 3; */ --dark-mode-brand-info-lighter-4: #102242; /* name: Lighter 4; */ --dark-mode-brand-info-darker: #0143BE; /* name: Darker; */ --dark-mode-brand-info-gradient-start: #0143BE; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --dark-mode-brand-info-gradient-end: #1062FE; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --dark-mode-brand-info-gradient-h: linear-gradient( 90deg, var(--brand-info-gradient-start) 0%, var(--brand-info-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --dark-mode-brand-info-gradient-v: linear-gradient( 0deg, var(--brand-info-gradient-end) 0%, var(--brand-info-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ --brand-info: var(--dark-mode-brand-info); --brand-info-lighter: var(--dark-mode-brand-info-lighter); --brand-info-lighter-2: var(--dark-mode-brand-info-lighter-2); --brand-info-lighter-3: var(--dark-mode-brand-info-lighter-3); --brand-info-darker: var(--dark-mode-brand-info-darker); --brand-info-gradient-start: var(--dark-mode-brand-info-gradient-start); --brand-info-gradient-end: var(--dark-mode-brand-info-gradient-end); --brand-info-gradient-h: linear-gradient( 90deg, var(--dark-mode-brand-info-gradient-start) 0%, var(--dark-mode-brand-info-gradient-end) 100%); --brand-info-gradient-v: linear-gradient( 0deg, var(--dark-mode-brand-info-gradient-end) 0%, var(--dark-mode-brand-info-gradient-start) 100%); /* Section: Dark Mode Success */ --dark-mode-brand-success: #31AF4E; /* name: Main; */ --dark-mode-brand-success-lighter: #5CD175; /* name: Lighter; */ --dark-mode-brand-success-lighter-2: #304B34; /* name: Lighter 2; */ --dark-mode-brand-success-lighter-3: #2C4531; /* name: Lighter 3; */ --dark-mode-brand-success-lighter-4: #203224; /* name: Lighter 4; */ --dark-mode-brand-success-darker: #247F38; /* name: Darker; */ --dark-mode-brand-success-gradient-start: #247F38; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --dark-mode-brand-success-gradient-end: #31AF4E; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --dark-mode-brand-success-gradient-h: linear-gradient( 90deg, var(--brand-success-gradient-start) 0%, var(--brand-success-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --dark-mode-brand-success-gradient-v: linear-gradient( 0deg, var(--brand-success-gradient-end) 0%, var(--brand-success-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ --brand-success: var(--dark-mode-brand-success); --brand-success-lighter: var(--dark-mode-brand-success-lighter); --brand-success-lighter-2: var(--dark-mode-brand-success-lighter-2); --brand-success-lighter-3: var(--dark-mode-brand-success-lighter-3); --brand-success-lighter-4: var(--dark-mode-brand-success-lighter-4); --brand-success-darker: var(--dark-mode-brand-success-darker); --brand-success-gradient-start: var(--dark-mode-brand-success-gradient-start); --brand-success-gradient-end: var(--dark-mode-brand-success-gradient-end); --brand-success-gradient-h: linear-gradient( 90deg, var(--dark-mode-brand-success-gradient-start) 0%, var(--dark-mode-brand-success-gradient-end) 100%); --brand-success-gradient-v: linear-gradient( 0deg, var(--dark-mode-brand-success-gradient-end) 0%, var(--dark-mode-brand-success-gradient-start) 100%); /* Section: Dark Mode Warning */ --dark-mode-brand-warning: #EB7D00; /* name: Main; */ --dark-mode-brand-warning-lighter: #FFAE52; /* name: Lighter; */ --dark-mode-brand-warning-lighter-2: #44392C; /* name: Lighter 2; */ --dark-mode-brand-warning-lighter-3: #3E3428; /* name: Lighter 3; */ --dark-mode-brand-warning-lighter-4: #322A20; /* name: Lighter 4; */ --dark-mode-brand-warning-darker: #CC6D00; /* name: Darker; */ --dark-mode-brand-warning-gradient-start: #CC6D00; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --dark-mode-brand-warning-gradient-end: #EB7D00; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --dark-mode-brand-warning-gradient-h: linear-gradient(90deg, var(--brand-warning-gradient-start) 0%, var(--brand-warning-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --dark-mode-brand-warning-gradient-v: linear-gradient( 0deg, var(--brand-warning-gradient-end) 0%, var(--brand-warning-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ --brand-warning: var(--dark-mode-brand-warning); --brand-warning-lighter: var(--dark-mode-brand-warning-lighter); --brand-warning-lighter-2: var(--dark-mode-brand-warning-lighter-2); --brand-warning-lighter-3: var(--dark-mode-brand-warning-lighter-3); --brand-warning-lighter-4: var(--dark-mode-brand-warning-lighter-4); --brand-warning-darker: var(--dark-mode-brand-warning-darker); --brand-warning-gradient-start: var(--dark-mode-brand-warning-gradient-start); --brand-warning-gradient-end: var(--dark-mode-brand-warning-gradient-end); --brand-warning-gradient-h: linear-gradient(90deg, var(--dark-mode-brand-warning-gradient-start) 0%, var(--dark-mode-brand-warning-gradient-end) 100%); --brand-warning-gradient-v: linear-gradient( 0deg, var(--dark-mode-brand-warning-gradient-end) 0%, var(--dark-mode-brand-warning-gradient-start) 100%); /* Section: Dark Mode Danger */ --dark-mode-brand-danger: #D92632; /* name: Main; */ --dark-mode-brand-danger-lighter: #E56C74; /* name: Lighter; */ --dark-mode-brand-danger-lighter-2: #663335; /* name: Lighter 2; */ --dark-mode-brand-danger-lighter-3: #592C2F; /* name: Lighter 3; */ --dark-mode-brand-danger-lighter-4: #4B2528; /* name: Lighter 4; */ --dark-mode-brand-danger-darker: #B6202A; /* name: Darker; */ --dark-mode-brand-danger-gradient-start: #DD3C46; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --dark-mode-brand-danger-gradient-end: #9C1B24; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --dark-mode-brand-danger-gradient-h: linear-gradient( 90deg, var(--brand-danger-gradient-start) 0%, var(--brand-danger-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --dark-mode-brand-danger-gradient-v: linear-gradient( 0deg, var(--brand-danger-gradient-end) 0%, var(--brand-danger-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ --brand-danger: var(--dark-mode-brand-danger); --brand-danger-lighter: var(--dark-mode-brand-danger-lighter); --brand-danger-lighter-2: var(--dark-mode-brand-danger-lighter-2); --brand-danger-lighter-3: var(--dark-mode-brand-danger-lighter-3); --brand-danger-lighter-4: var(--dark-mode-brand-danger-lighter-4); --brand-danger-darker: var(--dark-mode-brand-danger-darker); --brand-danger-gradient-start: var(--dark-mode-brand-danger-gradient-start); --brand-danger-gradient-end: var(--dark-mode-brand-danger-gradient-end); --brand-danger-gradient-h: linear-gradient( 90deg, var(--dark-mode-brand-danger-gradient-start) 0%, var(--dark-mode-brand-danger-gradient-end) 100%); --brand-danger-gradient-v: linear-gradient( 0deg, var(--dark-mode-brand-danger-gradient-end) 0%, var(--dark-mode-brand-danger-gradient-start) 100%); /* Section: Dark Mode UI Icon */ --dark-mode-gray-icons: #ACAFB9; --dark-mode-gray-icons-hover: #4ECA78; --gray-icons: var(--dark-mode-gray-icons); --gray-icons-hover: var(--dark-mode-gray-icons-hover); /* Section: Dark Mode SVG Illustrations */ --dark-mode-svg-illustration-gray-1: #313335; /* name: Gray Base; type: hiddenlist;*/ --dark-mode-svg-illustration-gray-2: #404245; /* name: Gray Lighter; type: hiddenlist; */ --dark-mode-svg-illustration-gray-3: #62666A; /* name: Gray Lighter 2; type: hiddenlist; */ --dark-mode-svg-illustration-gray-4: #767A7F; /* name: Gray Lighter 3; type: hiddenlist; */ --dark-mode-svg-illustration-gray-5: #808489; /* name: Gray Lighter 4; type: hiddenlist; */ --dark-mode-svg-illustration-gray-6: #8A8E93; /* name: Gray Lighter 5; type: hiddenlist; */ --dark-mode-svg-illustration-gray-7: #909398; /* name: Gray Lighter 6; type: hiddenlist; */ --dark-mode-svg-illustration-gray-8: #9A9DA2; /* name: Gray Lighter 7; type: hiddenlist; */ --dark-mode-svg-illustration-gray-w: #FFFFFF; /* name: White; type: hiddenlist; */ --dark-mode-svg-illustration-shadow: #000000; --svg-illustration-gray-1: var(--dark-mode-svg-illustration-gray-1); --svg-illustration-gray-2: var(--dark-mode-svg-illustration-gray-2); --svg-illustration-gray-3: var(--dark-mode-svg-illustration-gray-3); --svg-illustration-gray-4: var(--dark-mode-svg-illustration-gray-4); --svg-illustration-gray-5: var(--dark-mode-svg-illustration-gray-5); --svg-illustration-gray-6: var(--dark-mode-svg-illustration-gray-6); --svg-illustration-gray-7: var(--dark-mode-svg-illustration-gray-7); --svg-illustration-gray-8: var(--dark-mode-svg-illustration-gray-8); --svg-illustration-gray-w: var(--dark-mode-svg-illustration-gray-w); --svg-illustration-shadow: var(--dark-mode-svg-illustration-shadow); --dark-mode-svg-illustration-primary-0: #1C7D44; /* name: Primary Darker ; type: hiddenlist;*/ --dark-mode-svg-illustration-primary-1: #25A75B; /* name: Primary Base ; type: hiddenlist;*/ --dark-mode-svg-illustration-primary-2: #4ECA78; /* name: Primary - Lighter; type: hiddenlist; */ --dark-mode-svg-illustration-primary-3: #57b29d; /* name: Primary - Lighter 2; type: hiddenlist; */ --dark-mode-svg-illustration-primary-4: #a0dfc0; /* name: Primary - Lighter 3; type: hiddenlist; */ --svg-illustration-primary-0: var(--dark-mode-svg-illustration-primary-0); --svg-illustration-primary-1: var(--dark-mode-svg-illustration-primary-1); --svg-illustration-primary-2: var(--dark-mode-svg-illustration-primary-2); --svg-illustration-primary-3: var(--dark-mode-svg-illustration-primary-3); --svg-illustration-primary-4: var(--dark-mode-svg-illustration-primary-4); --dark-mode-svg-illustration-yellow-1: #F9A000; /* name: Yellow - Base; type: hiddenlist; */ --dark-mode-svg-illustration-yellow-2: #FBB900; /* name: Yellow - Lighter; type: hiddenlist; */ --dark-mode-svg-illustration-yellow-3: #FFD251; /* name: Yellow - Lighter 2; type: hiddenlist; */ --dark-mode-svg-illustration-yellow-4: #FBC666; /* name: Yellow - Lighter 3; type: hiddenlist; */ --dark-mode-svg-illustration-yellow-5: #FCDA83; /* name: Yellow - Lighter 4; type: hiddenlist; */ --svg-illustration-yellow-1: var(--dark-mode-svg-illustration-yellow-1); --svg-illustration-yellow-2: var(--dark-mode-svg-illustration-yellow-2); --svg-illustration-yellow-3: var(--dark-mode-svg-illustration-yellow-3); --svg-illustration-yellow-4: var(--dark-mode-svg-illustration-yellow-4); --svg-illustration-yellow-5: var(--dark-mode-svg-illustration-yellow-5); --dark-mode-svg-illustration-green-1: #1F5C3A; /* name: Yellow - Base; type: hiddenlist; */ --dark-mode-svg-illustration-green-2: #31854C; /* name: Yellow - Lighter 2; type: hiddenlist; */ --dark-mode-svg-illustration-green-3: #35B65E; /* name: Yellow - Lighter 3; type: hiddenlist; */ --dark-mode-svg-illustration-green-4: #5BD682; /* name: Yellow - Lighter 4; type: hiddenlist; */ --svg-illustration-green-1: var(--dark-mode-svg-illustration-green-1); --svg-illustration-green-2: var(--dark-mode-svg-illustration-green-2); --svg-illustration-green-3: var(--dark-mode-svg-illustration-green-3); --svg-illustration-green-4: var(--dark-mode-svg-illustration-green-4); --dark-mode-svg-illustration-line-color: rgba(255, 255, 255, 0.24); --svg-illustration-line-color: var(--dark-mode-svg-illustration-line-color); --dark-mode-svg-banner-shape-left: var(--dark-mode-brand-primary); --dark-mode-svg-banner-shape-right: var(--dark-mode-brand-primary-lighter); --svg-banner-shape-left: var(--dark-mode-svg-banner-shape-left); --svg-banner-shape-right: var(--dark-mode-svg-banner-shape-right); /* Section: Dark Mode Background */ --dark-mode-body-bg: #121212; /* name: Body; type: hiddenlist; */ --body-bg: var(--dark-mode-body-bg); /* END PARSE */ }