/*! * AlgoVPS Premium Design System * Custom style for Lagom WHMCS Client Theme * Inspired by ultra-clean tech aesthetic */ :root { /* START PARSE */ /* Section: Gray; Index: 0; */ --color-empty: unset; /* name: Empty; type: hidden */ --gray-base: #94a3b8; /* name: Main; */ --gray-lighter: #cbd5e1; /* name: Lighter; */ --gray-lighter-2: #e2e8f0; /* name: Lighter 2; */ --gray-lighter-3: #1e293b; /* name: Lighter 3; */ --gray-lighter-4: #0f172a; /* name: Lighter 4; */ --gray-faded: #0a0a0a; /* name: Lighter 5; */ --gray-darker: #fafafa; /* name: Darker; */ --gray-gradient-start: #050505; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --gray-gradient-end: #0a0a0a; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --gray-gradient-h: linear-gradient( 90deg, 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 - Electric Blue */ --brand-primary: #0ea5e9; /* name: Main; color_preview: primary;*/ --brand-primary-lighter: #38bdf8; /* name: Lighter; */ --brand-primary-lighter-2: #1e3a5f; /* name: Lighter 2; */ --brand-primary-lighter-3: #162c55; /* name: Lighter 3; */ --brand-primary-lighter-4: #0f1f3d; /* name: Lighter 4; */ --brand-primary-darker: #0284c7; /* name: Darker; */ --brand-primary-gradient-start: #0ea5e9; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-primary-gradient-end: #a855f7; /* 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 - Purple */ --brand-secondary: #a855f7; /* name: Main; color_preview: secondary; */ --brand-secondary-lighter: #c084fc; /* name: Lighter; */ --brand-secondary-lighter-2: #4c1d95; /* name: Lighter 2; */ --brand-secondary-lighter-3: #3b0764; /* name: Lighter 3; */ --brand-secondary-darker: #7c3aed; /* name: Darker; */ --brand-secondary-gradient-start: #7c3aed; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-secondary-gradient-end: #a855f7; /* 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: #0ea5e9; /* name: Main; */ --brand-info-lighter: #38bdf8; /* name: Lighter; */ --brand-info-lighter-2: #1e3a5f; /* name: Lighter 2; */ --brand-info-lighter-3: #162c55; /* name: Lighter 3; */ --brand-info-lighter-4: #0f1f3d; /* name: Lighter 4; */ --brand-info-darker: #0284c7; /* name: Darker; */ --brand-info-gradient-start: #0284c7; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-info-gradient-end: #0ea5e9; /* 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: #22c55e; /* name: Main; */ --brand-success-lighter: #4ade80; /* name: Lighter; */ --brand-success-lighter-2: #14532d; /* name: Lighter 2; */ --brand-success-lighter-3: #052e16; /* name: Lighter 3; */ --brand-success-lighter-4: #022c22; /* name: Lighter 4; */ --brand-success-darker: #16a34a; /* name: Darker; */ --brand-success-gradient-start: #16a34a; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-success-gradient-end: #22c55e; /* 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 - Yellow */ --brand-warning: #facc15; /* name: Main; */ --brand-warning-lighter: #fde047; /* name: Lighter; */ --brand-warning-lighter-2: #713f12; /* name: Lighter 2; */ --brand-warning-lighter-3: #422006; /* name: Lighter 3; */ --brand-warning-lighter-4: #1c0a00; /* name: Lighter 4; */ --brand-warning-darker: #eab308; /* name: Darker; */ --brand-warning-gradient-start: #eab308; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-warning-gradient-end: #facc15; /* 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 - Soft Pink */ --brand-danger: #f72585; /* name: Main; */ --brand-danger-lighter: #fb6f92; /* name: Lighter; */ --brand-danger-lighter-2: #4a0d3a; /* name: Lighter 2; */ --brand-danger-lighter-3: #3d082e; /* name: Lighter 3; */ --brand-danger-lighter-4: #2d0520; /* name: Lighter 4; */ --brand-danger-darker: #e01171; /* name: Darker; */ --brand-danger-gradient-start: #e01171; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-danger-gradient-end: #f72585; /* 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: Saving */ --brand-saving: #f72585; /* name: Main; */ --brand-saving-lighter: #fb6f92; /* name: Lighter; */ --brand-saving-lighter-2: #4a0d3a; /* name: Lighter 2; */ --brand-saving-lighter-3: #3d082e; /* name: Lighter 3; */ --brand-saving-lighter-4: #2d0520; /* name: Lighter 4; */ --brand-saving-darker: #e01171; /* name: Darker; */ /* Section: UI Icon */ --gray-icons: var(--gray-lighter-2); /* name: Icons; */ --gray-icons-hover: var(--brand-primary); /* name: Icons Hover; */ /* Section: SVG Illustrations */ --svg-illustration-color-0: #0284c7; /* name: Darker ; type: hiddenlist;*/ --svg-illustration-color-1: #0ea5e9; /* name: Base ; type: hiddenlist;*/ --svg-illustration-color-2: #38bdf8; /* name: Lighter; type: hiddenlist; */ --svg-illustration-color-3: #7dd3fc; /* name: Lighter 2; type: hiddenlist; */ --svg-illustration-color-4: #a855f7; /* name: Lighter 3; type: hiddenlist; */ --svg-illustration-color-5: #c084fc; /* name: Lighter 4; type: hiddenlist; */ --svg-illustration-color-6: #e0e7ff; /* name: Lighter 5; type: hiddenlist; */ --svg-illustration-color-7: #fafafa; /* name: Secondary; type: hiddenlist;*/ --svg-illustration-shadow: #000000; --svg-illustration-line-color: rgba(14, 165, 233, 0.24); --svg-banner-shape-left: var(--brand-primary); --svg-banner-shape-right: var(--brand-secondary); /* Section: Background */ --body-bg: #050505; /* name: Body; type: hiddenlist; */ } .lagom-dark-mode{ /* Section: Dark Mode Gray; */ --dark-mode-gray-base: #94a3b8; /* name: Main; */ --dark-mode-gray-lighter: #cbd5e1; /* name: Lighter; */ --dark-mode-gray-lighter-2: #64748b; /* name: Lighter 2; */ --dark-mode-gray-lighter-3: #262626; /* name: Lighter 3; */ --dark-mode-gray-lighter-4: #171717; /* name: Lighter 4; */ --dark-mode-gray-faded: #0a0a0a; /* name: Lighter 5; */ --dark-mode-gray-darker: #fafafa; /* name: Darker; */ --dark-mode-gray-gradient-start: #050505; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --dark-mode-gray-gradient-end: #0a0a0a; /* 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 - Electric Blue */ --dark-mode-brand-primary: #0ea5e9; /* name: Main; color_preview: primary; */ --dark-mode-brand-primary-lighter: #38bdf8; /* name: Lighter; */ --dark-mode-brand-primary-lighter-2: #1e3a5f; /* name: Lighter 2; */ --dark-mode-brand-primary-lighter-3: #162c55; /* name: Lighter 3; */ --dark-mode-brand-primary-lighter-4: #0f1f3d; /* name: Lighter 4; */ --dark-mode-brand-primary-darker: #0284c7; /* name: Darker; */ --dark-mode-brand-primary-gradient-start: #0ea5e9; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --dark-mode-brand-primary-gradient-end: #a855f7; /* 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 - Purple */ --dark-mode-brand-secondary: #a855f7; /* name: Main; color_preview: secondary; */ --dark-mode-brand-secondary-lighter: #c084fc; /* name: Lighter; */ --dark-mode-brand-secondary-lighter-2: #4c1d95; /* name: Lighter 2; */ --dark-mode-brand-secondary-lighter-3: #3b0764; /* name: Lighter 3; */ --dark-mode-brand-secondary-darker: #7c3aed; /* name: Darker; */ --dark-mode-brand-secondary-gradient-start: #7c3aed; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --dark-mode-brand-secondary-gradient-end: #a855f7; /* 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: #0ea5e9; /* name: Main; */ --dark-mode-brand-info-lighter: #38bdf8; /* name: Lighter; */ --dark-mode-brand-info-lighter-2: #1e3a5f; /* name: Lighter 2; */ --dark-mode-brand-info-lighter-3: #162c55; /* name: Lighter 3; */ --dark-mode-brand-info-lighter-4: #0f1f3d; /* name: Lighter 4; */ --dark-mode-brand-info-darker: #0284c7; /* name: Darker; */ --dark-mode-brand-info-gradient-start: #0284c7; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --dark-mode-brand-info-gradient-end: #0ea5e9; /* 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-lighter-4: var(--dark-mode-brand-info-lighter-4); --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: #22c55e; /* name: Main; */ --dark-mode-brand-success-lighter: #4ade80; /* name: Lighter; */ --dark-mode-brand-success-lighter-2: #14532d; /* name: Lighter 2; */ --dark-mode-brand-success-lighter-3: #052e16; /* name: Lighter 3; */ --dark-mode-brand-success-lighter-4: #022c22; /* name: Lighter 4; */ --dark-mode-brand-success-darker: #16a34a; /* name: Darker; */ --dark-mode-brand-success-gradient-start: #16a34a; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --dark-mode-brand-success-gradient-end: #22c55e; /* 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: #facc15; /* name: Main; */ --dark-mode-brand-warning-lighter: #fde047; /* name: Lighter; */ --dark-mode-brand-warning-lighter-2: #713f12; /* name: Lighter 2; */ --dark-mode-brand-warning-lighter-3: #422006; /* name: Lighter 3; */ --dark-mode-brand-warning-lighter-4: #1c0a00; /* name: Lighter 4; */ --dark-mode-brand-warning-darker: #eab308; /* name: Darker; */ --dark-mode-brand-warning-gradient-start: #eab308; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --dark-mode-brand-warning-gradient-end: #facc15; /* 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: #f72585; /* name: Main; */ --dark-mode-brand-danger-lighter: #fb6f92; /* name: Lighter; */ --dark-mode-brand-danger-lighter-2: #4a0d3a; /* name: Lighter 2; */ --dark-mode-brand-danger-lighter-3: #3d082e; /* name: Lighter 3; */ --dark-mode-brand-danger-lighter-4: #2d0520; /* name: Lighter 4; */ --dark-mode-brand-danger-darker: #e01171; /* name: Darker; */ --dark-mode-brand-danger-gradient-start: #e01171; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --dark-mode-brand-danger-gradient-end: #f72585; /* 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 Saving */ --dark-mode-brand-saving: #f72585; /* name: Main; */ --dark-mode-brand-saving-lighter: #fb6f92; /* name: Lighter; */ --dark-mode-brand-saving-lighter-2: #4a0d3a; /* name: Lighter 2; */ --dark-mode-brand-saving-lighter-3: #3d082e; /* name: Lighter 3; */ --dark-mode-brand-saving-lighter-4: #2d0520; /* name: Lighter 4; */ --dark-mode-brand-saving-darker: #e01171; /* name: Darker; */ --brand-saving: var(--dark-mode-brand-saving); --brand-saving-lighter: var(--dark-mode-brand-saving-lighter); --brand-saving-lighter-2: var(--dark-mode-brand-saving-lighter-2); --brand-saving-lighter-3: var(--dark-mode-brand-saving-lighter-3); --brand-saving-lighter-4: var(--dark-mode-brand-saving-lighter-4); --brand-saving-darker: var(--dark-mode-brand-saving-darker); /* Section: Dark Mode UI Icon */ --dark-mode-gray-icons: var(--gray-lighter); /* name: Icon; */ --dark-mode-gray-icons-hover: var(--brand-primary-lighter); /* 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-color-0: #0284c7; /* name: Darker ; type: hiddenlist;*/ --dark-mode-svg-illustration-color-1: #0ea5e9; /* name: Base ; type: hiddenlist;*/ --dark-mode-svg-illustration-color-2: #38bdf8; /* name: Lighter; type: hiddenlist; */ --dark-mode-svg-illustration-color-3: #7dd3fc; /* name: Lighter 2; type: hiddenlist; */ --dark-mode-svg-illustration-color-4: #a855f7; /* name: Lighter 3; type: hiddenlist; */ --dark-mode-svg-illustration-color-5: #c084fc; /* name: Lighter 4; type: hiddenlist; */ --dark-mode-svg-illustration-color-6: #e0e7ff; /* name: Lighter 5; type: hiddenlist; */ --dark-mode-svg-illustration-color-7: #fafafa; /* name: Secondary; type: hiddenlist;*/ --dark-mode-svg-illustration-shadow: #000000; --dark-mode-svg-banner-shape-left: #0ea5e9; --dark-mode-svg-banner-shape-right: #a855f7; --svg-illustration-color-0: var(--dark-mode-svg-illustration-color-0); --svg-illustration-color-1: var(--dark-mode-svg-illustration-color-1); --svg-illustration-color-2: var(--dark-mode-svg-illustration-color-2); --svg-illustration-color-3: var(--dark-mode-svg-illustration-color-3); --svg-illustration-color-4: var(--dark-mode-svg-illustration-color-4); --svg-illustration-color-5: var(--dark-mode-svg-illustration-color-5); --svg-illustration-color-6: var(--dark-mode-svg-illustration-color-6); --svg-illustration-color-7: var(--dark-mode-svg-illustration-color-7); --svg-illustration-shadow: var(--dark-mode-svg-illustration-color-shadow); --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: #050505; /* 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 { /* Name: Typography; Index: 1 */ /* Section: Font Family */ --font-family-base: Inter, system-ui, -apple-system, sans-serif; /* name: Use Google Font Face; type: font; */ --font-family-custom: unset; /*name: Use Custom Font Face; type: custom-font; overwrite: --font-family-base;*/ --font-family-monospace: 'JetBrains Mono', Consolas, Menlo, Monaco, "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; */ --text-white-color: #fff; /* name: White; 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-xxs: 11px; /* name: Extra Extra Small; group: Font Size; type: size; append: px;*/ --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-h9: 12px; /* name: Heading "h9"; group_name: H9; group: Font Size; type: size; append: px;*/ --font-size-h8: 14px; /* name: Heading "h8"; group_name: H8; group: Font Size; type: size; append: px;*/ --font-size-h7: 16px; /* name: Heading "h7"; group_name: H7; 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-xxs: 16px; /* name: Extra Extra Small; group: Line Height; type: size; append: px;*/ --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-h9: 16px; /* name: Heading "h9"; group_name: H9; group: Line Height; type: size; append: px;*/ --line-height-h8: 18px; /* name: Heading "h8"; group_name: H8; group: Line Height; type: size; append: px;*/ --line-height-h7: 22px; /* name: Heading "h7"; group_name: H7; 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-h8: var(--font-weight-base); /* name: Heading "h8"; var_group: Font Weight; group: Font Weight;*/ --font-weight-h7: var(--font-weight-base); /* name: Heading "h7"; var_group: Font Weight; group: Font Weight;*/ --font-weight-h6: var(--font-weight-medium); /* name: Heading "h6"; var_group: Font Weight; group: Font Weight;*/ --font-weight-h5: var(--font-weight-light); /* 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-black); /* 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-2x); --article-h1-margin-bottom: var(--spacing-2x); --article-h2-margin-top: 12px; --article-h2-margin-bottom: 12px; --article-h3-margin-top: 10px; --article-h3-margin-bottom: 10px; --article-h4-margin-top: 8px; --article-h4-margin-bottom: 8px; --article-h5-margin-top: 6px; --article-h5-margin-bottom: 6px; --article-h6-margin-top: 6px; --article-h6-margin-bottom: 6px; --markdown-font-color: var(--text-body-color); --markdown-font-size-base: var(--font-size-lg); --markdown-font-weight-base: var(--font-weight-base); --markdown-line-height-base: var(--line-height-lg); --markdown-paragraph-padding-bottom: 12px; --markdown-h1-padding-top: var(--spacing-2x); --markdown-h1-padding-bottom: var(--spacing-2x); --markdown-h2-padding-top: 12px; --markdown-h2-padding-bottom: 12px; --markdown-h3-padding-top: 10px; --markdown-h3-padding-bottom: 10px; --markdown-h4-padding-top: 8px; --markdown-h4-padding-bottom: 8px; --markdown-h5-padding-top: 6px; --markdown-h5-padding-bottom: 6px; --markdown-h6-padding-top: 6px; --markdown-h6-padding-bottom: 6px; --markdown-blockquote-padding-bottom: 12px; --markdown-code-padding-bottom: 12px; } @media (max-width: 767px) { :root { --font-size-xs: 11px; --font-size-sm: 12px; --font-size-base: 14px; --font-size-md: 14px; --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: 16px; --line-height-sm: 18px; --line-height-base: 24px; --line-height-md: 24px; --line-height-lg: 26px; --line-height-xlg: 30px; --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; --text-danger-color: var(--brand-danger-lighter); --text-success-color: var(--brand-success-lighter); --text-warning-color: var(--brand-warning-lighter); --text-info-color: var(--brand-info-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: 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 - AlgoVPS Dark Theme */ --ui-block-bg: rgba(255, 255, 255, 0.02); --ui-block-overlay-bg: rgba(255, 255, 255, 0.05); --ui-block-overlay-bg-2: rgba(255, 255, 255, 0.03); --ui-block-bg-form: rgba(255, 255, 255, 0.03); --ui-block-border-color: rgba(255, 255, 255, 0.05); --ui-block-border-radius: 12px; --ui-block-border-radius-lg: 16px; --ui-block-shadow: 0 8px 32px hsl(199 89% 48% / 0.1); --ui-block-shadow-lg: 0 12px 40px hsl(199 89% 48% / 0.15); --ui-block-shadow-xlg: 0 20px 60px hsl(199 89% 48% / 0.2); --ui-block-border: 1px solid rgba(255, 255, 255, 0.05); --ui-block-header-height: 56px; --ui-block-header-bg: rgba(255, 255, 255, 0.03); --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-xs: var(--spacing-1x); --ui-block-padding-xs-v: calc(var(--spacing-1x) * 0.5); --ui-block-padding-sm: var(--spacing-2x); --ui-block-padding-sm-v: calc(var(--spacing-1x) * 1.5); --ui-block-padding-base: var(--spacing-3x); --ui-block-padding-base-v: calc(var(--spacing-1x) * 2.5); --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-5x); --ui-block-spacing-xxs: calc(var(--spacing-1x) / 2); --ui-block-spacing-xs: var(--spacing-1x); --ui-block-spacing-sm: calc(var(--spacing-1x) * 1.5); --ui-block-spacing-base: var(--spacing-2x); --ui-block-spacing-lg: var(--spacing-3x); --ui-block-spacing-xlg: var(--spacing-4x); --ui-block-spacing-xxlg: var(--spacing-5x); /* Section: UI State;*/ --state-default-bg: var(--gray-lighter-4); /* name: Primary - Background; type: select-colors */ --state-default-bg-hover: var(--gray-lighter-3); /* name: Primary - Background Hover; type: select-colors */ --state-default-text: var(--gray-base); /* name: Primary - Font Color; type: select-colors */ --state-default-text-hover: var(--gray-darker); /* name: Primary - Font Color Hover; type: select-colors */ --state-default-border: var(--gray-lighter-3); /* name: Primary - Border Color; type: select-colors */ --state-default-border-active: var(--gray-lighter-2); /* name: Primary - Border Color Hover; type: select-colors */ --state-default-divider: var(--gray-lighter-3); /* name: Primary - Divider Color; type: select-colors */ --state-primary-bg: var(--brand-primary); /* name: Primary - Background; type: select-colors */ --state-primary-bg-hover: var(--brand-primary-darker); /* name: Primary - Background Hover; type: select-colors */ --state-primary-text: var(--text-white-color); /* name: Primary - Font Color; type: select-colors */ --state-primary-text-hover: var(--text-white-color); /* name: Primary - Font Color Hover; type: select-colors */ --state-primary-border: var(--brand-primary-darker); /* name: Primary - Border Color; type: select-colors */ --state-primary-border-hover: var(--brand-primary-darker); /* name: Primary - Border Color Hover; type: select-colors */ --state-primary-divider: var(--brand-lighter); /* name: Primary - Divider Color; type: select-colors */ --state-primary-faded-bg: var(--brand-primary-lighter-3); /* name: Primary Faded - Background; type: select-colors */ --state-primary-faded-bg-hover: var(--brand-primary-lighter-2); /* name: Primary Faded - Background Hover; type: select-colors */ --state-primary-faded-text: var(--brand-primary); /* name: Primary Faded - Font Color; type: select-colors */ --state-primary-faded-text-hover: var(--brand-primary-darker); /* name: Primary Faded - Font Color Hover; type: select-colors */ --state-primary-faded-border: var(--brand-primary-lighter-2); /* name: Primary Faded - Border Color; type: select-colors */ --state-primary-faded-border-active: var(--brand-primary); /* name: Primary Faded - Border Active Color; type: select-colors */ --state-primary-faded-divider: var(--brand-primary-lighter-2); /* name: Primary Faded - Divider Color; type: select-colors */ --state-info-bg: var(--brand-info-lighter-3); /* name: Info - Background; type: select-colors */ --state-info-bg-hover: var(--brand-info-lighter-4); /* name: Info - Background Hover; type: select-colors */ --state-info-text: var(--brand-info); /* name: Info - Font Color; type: select-colors */ --state-info-text-hover: var(--brand-info-darker); /* name: Info - Font Color Hover; type: select-colors */ --state-info-border: var(--brand-info-lighter-2); /* name: Info - Border Color; type: select-colors */ --state-info-border-active: var(--brand-info); /* name: Info - Border Active Color; type: select-colors */ --state-info-divider: var(--brand-info-lighter-2); /* name: Info - Divider Color; type: select-colors */ --state-success-bg: var(--brand-success-lighter-3); /* name: Success - Background; type: select-colors */ --state-success-bg-hover: var(--brand-success-lighter-4); /* name: Success - Background Hover; type: select-colors */ --state-success-text: var(--brand-success); /* name: Success - Font Color; type: select-colors */ --state-success-text-hover: var(--brand-success-darker); /* name: Success - Font Color Hover; type: select-colors */ --state-success-border: var(--brand-success-lighter-2); /* name: Success - Border Color; type: select-colors */ --state-success-border-active: var(--brand-success); /* name: Success - Border Active Color; type: select-colors */ --state-success-divider: var(--brand-success-lighter-2); /* name: Success - Divider Color; type: select-colors */ --state-warning-bg: var(--brand-warning-lighter-3); /* name: Warning - Background; type: select-colors */ --state-warning-bg-hover: var(--brand-warning-lighter-4); /* name: Warning - Background Hover; type: select-colors */ --state-warning-text: var(--brand-warning); /* name: Warning - Font Color; type: select-colors */ --state-warning-text-hover: var(--brand-warning-darker); /* name: Warning - Font Color Hover; type: select-colors */ --state-warning-border: var(--brand-warning-lighter-2); /* name: Warning - Border Color; type: select-colors */ --state-warning-border-active: var(--brand-warning); /* name: Warning - Border Active Color; type: select-colors */ --state-warning-divider: var(--brand-warning-lighter-2); /* name: Warning - Divider Color; type: select-colors */ --state-danger-bg: var(--brand-danger-lighter-3); /* name: Danger - Background; type: select-colors */ --state-danger-bg-hover: var(--brand-danger-lighter-4); /* name: Danger - Background Hover; type: select-colors */ --state-danger-text: var(--brand-danger); /* name: Danger - Font Color; type: select-colors */ --state-danger-text-hover: var(--brand-danger-darker); /* name: Danger - Font Color Hover; type: select-colors */ --state-danger-border: var(--brand-danger-lighter-2); /* name: Danger - Border Color; type: select-colors */ --state-danger-border-active: var(--brand-danger); /* name: Danger - Border Active Color; type: select-colors */ --state-danger-divider: var(--brand-danger-lighter-2); /* name: Danger - Divider Color; type: select-colors */ --state-saving-bg: var(--brand-saving-lighter-3); /* name: Saving - Background; type: select-colors */ --state-saving-bg-hover: var(--brand-saving-lighter-4); /* name: Saving - Background Hover; type: select-colors */ --state-saving-text: var(--brand-saving); /* name: Saving - Font Color; type: select-colors */ --state-saving-text-hover: var(--brand-saving-darker); /* name: Saving - Font Color Hover; type: select-colors */ --state-saving-border: var(--brand-saving-lighter-2); /* name: Saving - Border Color; type: select-colors */ --state-saving-border-active: var(--brand-saving); /* name: Saving - Border Active Color; type: select-colors */ --state-saving-divider: var(--brand-saving-lighter-2); /* name: Saving - Divider Color; type: select-colors */ /* Section: Labels */ --label-color: var(--text-white-color); --label-link-hover-color: var(--text-white-color); --label-default-bg: var(--state-default-bg); /* name: Label Default - Background; type: select-colors;*/ --label-default-color: var(--state-default-text); /* name: Label Default - Color; type: select-colors;*/ --label-primary-bg: var(--state-primary-bg); /* name: Label Primary - Background; type: select-colors;*/ --label-primary-color: var(--text-white-color); /* name: Label Primary - Color; type: select-colors;*/ --label-primary-faded-bg: var(--state-primary-faded-bg); --label-primary-faded-color: var(--state-primary-faded-text); --label-secondary-bg: var(--brand-secondary); /* name: Label Secondary - Background; type: select-colors;*/ --label-secondary-color: var(--text-white-color); /* name: Label Secondary - Color; type: select-colors;*/ --label-success-bg: var(--state-success-bg); /* name: Label Success - Background; type: select-colors;*/ --label-success-color: var(--state-success-text); /* name: Label Success - Color; type: select-colors;*/ --label-info-bg: var(--state-info-bg); /* name: Label Info - Background; type: select-colors;*/ --label-info-color: var(--state-info-text); /* name: Label Info - Color; type: select-colors;*/ --label-warning-bg: var(--state-warning-bg); /* name: Label Warning - Background; type: select-colors;*/ --label-warning-color: var(--state-warning-text); /* name: Label Warning - Color; type: select-colors;*/ --label-danger-bg: var(--state-danger-bg); /* name: Label Danger - Background; type: select-colors;*/ --label-danger-color: var(--state-danger-text); /* name: Label Danger - Color; type: select-colors;*/ --label-purple-bg: #b3a3de; /* name: Label Purple - Background; type: select-colors;*/ --label-purple-color: var(--text-white-color); /* name: Label Purple - Color; type: select-colors;*/ --label-savings-bg: var(--state-saving-bg); /* name: Label Savings - Background; type: select-colors;*/ --label-savings-color: var(--state-saving-text); /* name: Label Savings - Color; type: select-colors;*/ --label-savings-border: #FCCFDF; /* name: Label Savings - Border Color; type: select-colors;*/ --label-text-transform: uppercase; --label-margin-bottom: 5px; --tickets-label-color: #fff; --label-xxs-font-size: 11px; --label-xs-font-size: var(--font-size-xs); --label-sm-font-size: var(--font-size-xs); --label-font-size: var(--font-size-xs); --label-lg-font-size: var(--font-size-sm); --label-xxs-line-height: var(--line-height-xxs); --label-xs-line-height: var(--line-height-xs); --label-sm-line-height: var(--line-height-xs); --label-line-height: var(--line-height-xs); --label-lg-line-height: var(--line-height-sm); --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-xs); --label-border-radius: var(--border-radius-sm); --label-lg-border-radius: var(--border-radius-sm); --label-icon-size: 10px; /* WHMCS Status Colors */ --status-pending-transfer: var(--brand-warning-darker); --status-pending: var(--brand-warning-darker); --status-active: var(--state-success-text); --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(--state-info-text); --status-inprogress: var(--brand-danger-lighter); --status-closed: var(--state-default-text); --status-paid: var(--state-success-text); --status-unpaid: var(--state-danger-text); --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-warning: var(--state-warning-text); --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-default-bg); --status-type-registereduser-text-color: var(--label-default-color); --status-type-guest: var(--label-default-bg); --status-type-guest-text-color: var(--label-default-color); --status-type-subacc: var(--label-default-bg); --status-type-subacc-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-xxs: calc(var(--spacing-1x) / 4); --ui-block-spacing-xs: calc(var(--spacing-1x) / 2); --ui-block-spacing-sm: var(--spacing-1x); --ui-block-spacing-base: calc(var(--spacing-1x) * 1.5); --ui-block-spacing-lg: calc(var(--spacing-1x) * 2.5); --ui-block-spacing-xlg: var(--spacing-3x); --ui-block-spacing-xxlg: var(--spacing-4x); --ui-block-padding-xs: calc(var(--spacing-1x) * 0.5); --ui-block-padding-xs-v: calc(var(--spacing-1x) * 0.25); --ui-block-padding-sm: calc(var(--spacing-1x) * 1.5); --ui-block-padding-sm-v: var(--spacing-1x); --ui-block-padding-base: calc(var(--spacing-1x) * 2.5); --ui-block-padding-base-v: var(--spacing-2x); --ui-block-padding-lg: var(--spacing-3x); --ui-block-padding-lg-v: calc(var(--spacing-1x) * 2.5); --ui-block-padding-xlg: var(--spacing-5x); --ui-block-padding-xlg-v: var(--spacing-4x); } } @-moz-document url-prefix() { :root{ --ui-block-overlay-bg: rgba(255,255,255, .87); } } .lagom-dark-mode{ /* Section : Dark Mode Colors */ --ui-block-bg: #242424; --ui-block-link-hover-bg: var(--gray-faded); --ui-block-link-active-bg: var(--gray-faded); --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-default-bg: var(--dark-mode-gray-lighter-4); --state-default-bg-hover: var(--dark-mode-gray-lighter-3); --state-default-text: var(--dark-mode-gray-base); --state-default-text-hover: var(--dark-mode-color-white); --state-default-border: var(--dark-mode-gray-lighter-3); --state-default-border-active: var(--dark-mode-gray-lighter-2); --state-default-divider: var(--dark-mode-gray-lighter-3); --state-primary-bg: var(--dark-mode-brand-primary); --state-primary-bg-hover: var(--dark-mode-brand-primary-darker); --state-primary-text: var(--dark-mode-color-white); --state-primary-text-hover: var(--dark-mode-color-white); --state-primary-border: var(--dark-mode-brand-lighter); --state-primary-border-hover: var(--dark-mode-brand-lighter); --state-primary-divider: var(--dark-mode-brand-lighter); --state-info-bg: var(--dark-mode-brand-info-lighter-3); --state-info-bg-hover: var(--dark-mode-brand-info-lighter-4); --state-info-text: var(--dark-mode-brand-info-lighter); --state-info-text-hover: var(--dark-mode-brand-info-lighter); --state-info-border: var(--dark-mode-brand-info-lighter-2); --state-info-border-active: var(--dark-mode-brand-info-lighter); --state-info-divider: var(--dark-mode-brand-info-lighter-2); --state-primary-faded-bg: var(--dark-mode-brand-primary-lighter-3); --state-primary-faded-bg-hover: var(--dark-mode-brand-primary-lighter-2); --state-primary-faded-text: var(--dark-mode-brand-primary-lighter); --state-primary-faded-text-hover: var(--dark-mode-brand-primary-lighter); --state-primary-faded-border: var(--dark-mode-brand-primary-lighter-2); --state-primary-faded-border-active: var(--dark-mode-brand-primary-lighter); --state-primary-faded-divider: var(--dark-mode-brand-primary-lighter-2); --state-success-bg: var(--dark-mode-brand-success-lighter-3); --state-success-bg-hover: var(--dark-mode-brand-success-lighter-4); --state-success-text: var(--dark-mode-brand-success-lighter); --state-success-text-hover: var(--dark-mode-brand-success-lighter); --state-success-border: var(--dark-mode-brand-success-lighter-2); --state-success-border-active: var(--dark-mode-brand-success-lighter); --state-success-divider: var(--dark-mode-brand-success-lighter-2); --state-warning-bg: var(--dark-mode-brand-warning-lighter-3); --state-warning-bg-hover: var(--dark-mode-brand-warning-lighter-4); --state-warning-text: var(--dark-mode-brand-warning-lighter); --state-warning-text-hover: var(--dark-mode-brand-warning-lighter); --state-warning-border: var(--dark-mode-brand-warning-lighter-2); --state-warning-border-active: var(--dark-mode-brand-warning-lighter); --state-warning-divider: var(--dark-mode-brand-warning-lighter-2); --state-danger-bg: var(--dark-mode-brand-danger-lighter-3); --state-danger-bg-hover: var(--dark-mode-brand-danger-lighter-4); --state-danger-text: var(--dark-mode-brand-danger-lighter); --state-danger-text-hover: var(--dark-mode-brand-danger-lighter); --state-danger-border: var(--dark-mode-brand-danger-lighter-2); --state-danger-border-active: var(--dark-mode-brand-danger-lighter); --state-danger-divider: var(--dark-mode-brand-danger-lighter-2); --state-saving-bg: var(--dark-mode-brand-saving-lighter-3); --state-saving-bg-hover: var(--dark-mode-brand-saving-lighter-4); --state-saving-text: var(--dark-mode-brand-saving-lighter); --state-saving-text-hover: var(--dark-mode-brand-saving-lighter); --state-saving-border: var(--dark-mode-brand-saving-lighter-2); --state-saving-border-active: var(--dark-mode-brand-saving-lighter); --state-saving-divider: var(--dark-mode-brand-saving-lighter-2); } /*! * AlgoVPS Premium Custom Styles * Glass morphism, animations, and premium effects */ /* Premium CSS Variables */ :root { /* Premium Gradients */ --gradient-primary: linear-gradient(135deg, hsl(199, 89%, 48%), hsl(262, 83%, 58%)); --gradient-hero: linear-gradient(180deg, hsl(0, 0%, 2%), hsl(0, 0%, 4%)); --gradient-mesh: radial-gradient(circle at 20% 80%, hsl(199 89% 48% / 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, hsl(262 83% 58% / 0.1) 0%, transparent 50%); /* Premium Shadows */ --shadow-glass: 0 8px 32px hsl(199 89% 48% / 0.1); --shadow-card: 0 4px 20px hsl(0 0% 0% / 0.3); --shadow-glow: 0 0 40px hsl(199 89% 48% / 0.3); --shadow-glow-purple: 0 0 40px hsl(262 83% 58% / 0.3); /* Transitions */ --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Border Radius */ --radius-xl: 1.5rem; --radius-2xl: 2rem; } /* Premium Glass Morphism Components */ .glass, .lagom-algovps .card, .lagom-algovps .panel, .lagom-algovps .modal-content { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; box-shadow: var(--shadow-glass); } .lagom-algovps .glass-card, .lagom-algovps .panel-default, .lagom-algovps .card-body { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(255, 255, 255, 0.02); border-radius: var(--radius-2xl); padding: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: var(--shadow-glass); transition: var(--transition-smooth); } .lagom-algovps .glass-card:hover, .lagom-algovps .panel-default:hover { background: rgba(255, 255, 255, 0.04); transform: translateY(-2px); box-shadow: 0 12px 40px hsl(199 89% 48% / 0.15); } /* Premium Button Variants */ .lagom-algovps .btn-primary, .lagom-algovps .btn-premium { background: var(--brand-primary); color: white; padding: 0.75rem 1.5rem; border-radius: var(--radius-xl); font-weight: 500; border: none; box-shadow: var(--shadow-glow); transition: var(--transition-smooth); position: relative; overflow: hidden; } .lagom-algovps .btn-primary:hover, .lagom-algovps .btn-premium:hover { background: var(--brand-primary-lighter); transform: scale(0.98); box-shadow: 0 0 50px hsl(199 89% 48% / 0.4); } .lagom-algovps .btn-primary:active, .lagom-algovps .btn-premium:active { transform: scale(0.96); } .lagom-algovps .btn-secondary { background: var(--brand-secondary); color: white; padding: 0.75rem 1.5rem; border-radius: var(--radius-xl); font-weight: 500; border: none; box-shadow: var(--shadow-glow-purple); transition: var(--transition-smooth); } .lagom-algovps .btn-secondary:hover { background: var(--brand-secondary-lighter); transform: scale(0.98); box-shadow: 0 0 50px hsl(262 83% 58% / 0.4); } .lagom-algovps .btn-ghost, .lagom-algovps .btn-outline { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(255, 255, 255, 0.02); color: var(--gray-darker); padding: 0.75rem 1.5rem; border-radius: var(--radius-xl); font-weight: 500; border: 1px solid rgba(255, 255, 255, 0.1); transition: var(--transition-smooth); } .lagom-algovps .btn-ghost:hover, .lagom-algovps .btn-outline:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--brand-primary); transform: scale(0.98); } /* Premium Text Gradients */ .lagom-algovps .text-gradient-primary, .lagom-algovps h1.gradient, .lagom-algovps .hero-title { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Animated Background Mesh */ .lagom-algovps body, .lagom-algovps .bg-mesh { background: var(--gradient-hero); position: relative; } .lagom-algovps body::before, .lagom-algovps .bg-mesh::before { content: ''; position: absolute; inset: 0; opacity: 0.3; background: var(--gradient-mesh); animation: meshFlow 20s ease-in-out infinite alternate; pointer-events: none; } /* Premium Animations */ @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes pulseSoft { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.02); } } @keyframes meshFlow { 0% { transform: rotate(0deg) scale(1); } 100% { transform: rotate(180deg) scale(1.1); } } @keyframes glowPulse { 0%, 100% { box-shadow: 0 0 20px hsl(199 89% 48% / 0.2); } 50% { box-shadow: 0 0 40px hsl(199 89% 48% / 0.4); } } .lagom-algovps .animate-fade-up { animation: fadeUp 0.6s ease-out forwards; opacity: 0; transform: translateY(20px); } .lagom-algovps .animate-pulse-soft { animation: pulseSoft 2s ease-in-out infinite; } .lagom-algovps .hover-lift { transition: var(--transition-smooth); } .lagom-algovps .hover-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); } /* Premium Form Elements */ .lagom-algovps input[type="text"], .lagom-algovps input[type="email"], .lagom-algovps input[type="password"], .lagom-algovps input[type="number"], .lagom-algovps textarea, .lagom-algovps select, .lagom-algovps .form-control:not(.StripeElement) { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.75rem; color: var(--input-color); padding: 0.75rem 1rem; transition: var(--transition-smooth); } .lagom-algovps input:focus, .lagom-algovps textarea:focus, .lagom-algovps select:focus, .lagom-algovps .form-control:focus:not(.StripeElement) { background: rgba(255, 255, 255, 0.05); border-color: var(--brand-primary); outline: none; box-shadow: 0 0 0 3px hsl(199 89% 48% / 0.1); color: var(--input-focus-color); } /* Stripe Elements - ensure they remain interactive and styled */ .lagom-algovps .StripeElement { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 0.75rem; padding: 0.75rem 1rem; pointer-events: auto !important; cursor: text !important; position: relative !important; z-index: 1; min-height: 48px; } .lagom-algovps .StripeElement * { pointer-events: auto !important; } .lagom-algovps .StripeElement iframe { pointer-events: auto !important; width: 100% !important; height: 100% !important; border: none !important; position: relative !important; z-index: 2; } .lagom-algovps .StripeElement--focus { background: rgba(255, 255, 255, 0.05) !important; border-color: var(--brand-primary) !important; box-shadow: 0 0 0 3px hsl(199 89% 48% / 0.1); pointer-events: auto !important; cursor: text !important; } .lagom-algovps .StripeElement--focus * { pointer-events: auto !important; } .lagom-algovps .StripeElement--focus iframe { pointer-events: auto !important; } /* Premium Cards and Panels */ .lagom-algovps .pricing-card, .lagom-algovps .product-card, .lagom-algovps .service-card { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--radius-2xl); padding: 2rem; transition: var(--transition-smooth); position: relative; overflow: hidden; } .lagom-algovps .pricing-card:hover, .lagom-algovps .product-card:hover, .lagom-algovps .service-card:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--brand-primary); transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 60px hsl(199 89% 48% / 0.2); } .lagom-algovps .pricing-card::before, .lagom-algovps .product-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-primary); opacity: 0; transition: var(--transition-smooth); } .lagom-algovps .pricing-card:hover::before, .lagom-algovps .product-card:hover::before { opacity: 1; } /* Premium Navigation */ .lagom-algovps .navbar, .lagom-algovps .navigation { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(5, 5, 5, 0.8); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .lagom-algovps .nav-link, .lagom-algovps .menu-item { transition: var(--transition-smooth); position: relative; } .lagom-algovps .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--gradient-primary); transform: scaleX(0); transition: var(--transition-smooth); } .lagom-algovps .nav-link:hover::after, .lagom-algovps .nav-link.active::after { transform: scaleX(1); } /* Premium Tables */ .lagom-algovps table, .lagom-algovps .table { background: transparent; } .lagom-algovps table thead, .lagom-algovps .table thead { background: rgba(255, 255, 255, 0.02); border-bottom: 2px solid rgba(14, 165, 233, 0.3); } .lagom-algovps table tbody tr, .lagom-algovps .table tbody tr { border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: var(--transition-smooth); } .lagom-algovps table tbody tr:hover, .lagom-algovps .table tbody tr:hover { background: rgba(255, 255, 255, 0.02); } /* Premium Badges and Labels */ .lagom-algovps .badge, .lagom-algovps .label { padding: 0.35rem 0.75rem; border-radius: 0.5rem; font-weight: 500; font-size: 0.875rem; } .lagom-algovps .badge-primary, .lagom-algovps .label-primary { background: var(--brand-primary); color: white; box-shadow: 0 2px 10px hsl(199 89% 48% / 0.3); } .lagom-algovps .badge-secondary, .lagom-algovps .label-secondary { background: var(--brand-secondary); color: white; box-shadow: 0 2px 10px hsl(262 83% 58% / 0.3); } /* Premium Alerts */ .lagom-algovps .alert { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--radius-xl); border-left: 4px solid; padding: 1rem 1.5rem; } .lagom-algovps .alert-info { background: rgba(14, 165, 233, 0.1); border-left-color: var(--brand-primary); color: var(--brand-primary-lighter); } .lagom-algovps .alert-success { background: rgba(34, 197, 94, 0.1); border-left-color: var(--brand-success); color: var(--brand-success-lighter); } .lagom-algovps .alert-warning { background: rgba(250, 204, 21, 0.1); border-left-color: var(--brand-warning); color: var(--brand-warning); } .lagom-algovps .alert-danger { background: rgba(247, 37, 133, 0.1); border-left-color: var(--brand-danger); color: var(--brand-danger-lighter); } /* Scroll Reveal Animation */ .lagom-algovps .scroll-reveal { opacity: 0; transform: translateY(32px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .lagom-algovps .scroll-reveal.visible { opacity: 1; transform: translateY(0); } /* Premium Loading States */ .lagom-algovps .loading-spinner { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Premium Tooltips */ .lagom-algovps .tooltip { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(5, 5, 5, 0.9); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; } /* Premium Modals */ .lagom-algovps .modal-backdrop { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(0, 0, 0, 0.6); } .lagom-algovps .modal-dialog { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* Smooth Scrolling */ .lagom-algovps html { scroll-behavior: smooth; } /* Custom Scrollbar */ .lagom-algovps ::-webkit-scrollbar { width: 10px; height: 10px; } .lagom-algovps ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); } .lagom-algovps ::-webkit-scrollbar-thumb { background: var(--brand-primary); border-radius: 5px; } .lagom-algovps ::-webkit-scrollbar-thumb:hover { background: var(--brand-primary-lighter); } /* Button Premium Overrides */ .lagom-algovps .btn-primary, .lagom-algovps button.btn-primary, .lagom-algovps a.btn-primary { box-shadow: 0 0 40px hsl(199 89% 48% / 0.3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-family: Inter, system-ui, -apple-system, sans-serif; } .lagom-algovps .btn-primary:hover, .lagom-algovps button.btn-primary:hover, .lagom-algovps a.btn-primary:hover { box-shadow: 0 0 50px hsl(199 89% 48% / 0.4); transform: translateY(-1px); } .lagom-algovps .btn-primary:active, .lagom-algovps button.btn-primary:active, .lagom-algovps a.btn-primary:active { transform: scale(0.98); } .lagom-algovps .btn-default, .lagom-algovps button.btn-default, .lagom-algovps a.btn-default, .lagom-algovps .btn-secondary, .lagom-algovps button.btn-secondary, .lagom-algovps a.btn-secondary { backdrop-filter: blur(16px); background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-family: Inter, system-ui, -apple-system, sans-serif; } .lagom-algovps .btn-default:hover, .lagom-algovps button.btn-default:hover, .lagom-algovps a.btn-default:hover, .lagom-algovps .btn-secondary:hover, .lagom-algovps button.btn-secondary:hover, .lagom-algovps a.btn-secondary:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-1px); } .lagom-algovps .btn-default:active, .lagom-algovps button.btn-default:active, .lagom-algovps a.btn-default:active, .lagom-algovps .btn-secondary:active, .lagom-algovps button.btn-secondary:active, .lagom-algovps a.btn-secondary:active { transform: scale(0.98); } /* Ensure all buttons use Inter font */ .lagom-algovps button, .lagom-algovps .btn, .lagom-algovps a.btn { font-family: Inter, system-ui, -apple-system, sans-serif; font-weight: 500; } /* Override Login Sidebar - Tone Down Gradient */ .lagom-algovps { --primary-block-bg: var(--gradient-hero); --primary-block-bg-h: var(--gradient-hero); --error-page-bg: var(--body-bg); --main-header-banner-bg: var(--gradient-hero); } /* Login Sidebar - Subtle Dark Aesthetic */ .lagom-algovps .login-sidebar, .lagom-algovps .login-container-fluid, .lagom-algovps .auth-container-graphic { background: var(--body-bg); } .lagom-algovps .primary-content-block, .lagom-algovps [class*="primary-block"] { background: var(--gradient-hero); } /* Form inputs on login page */ .lagom-algovps .login-container input, .lagom-algovps .auth-container input { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); color: #fafafa; } .lagom-algovps .login-container input::placeholder, .lagom-algovps .auth-container input::placeholder { color: rgba(255, 255, 255, 0.4); } /* Fix Secondary/Default Button Consistency */ .lagom-algovps .btn-secondary, .lagom-algovps button.btn-secondary, .lagom-algovps a.btn-secondary, .lagom-algovps .btn-default, .lagom-algovps button.btn-default, .lagom-algovps a.btn-default { background: rgba(14, 165, 233, 0.15) !important; border: 1px solid rgba(14, 165, 233, 0.3) !important; color: #0ea5e9 !important; } .lagom-algovps .btn-secondary:hover, .lagom-algovps button.btn-secondary:hover, .lagom-algovps a.btn-secondary:hover, .lagom-algovps .btn-default:hover, .lagom-algovps button.btn-default:hover, .lagom-algovps a.btn-default:hover { background: rgba(14, 165, 233, 0.25) !important; border: 1px solid rgba(14, 165, 233, 0.4) !important; } /* Fix Input Icons Overlapping Text */ .lagom-algovps .input-group-prepend, .lagom-algovps .input-group-append { opacity: 0.4; } .lagom-algovps .input-group .form-control, .lagom-algovps .input-group input { padding-left: 48px !important; } .lagom-algovps .input-icon-left + input, .lagom-algovps .has-icon-left input, .lagom-algovps input[type="search"], .lagom-algovps input.search, .lagom-algovps .search-input, .lagom-algovps [class*="search"] input { padding-left: 48px !important; } /* Fix icon color in inputs */ .lagom-algovps .input-group-text, .lagom-algovps .input-icon { color: rgba(255, 255, 255, 0.4) !important; background: transparent !important; border: none !important; } /* Promo code inputs specifically */ .lagom-algovps [class*="promo"] input, .lagom-algovps [class*="promotion"] input, .lagom-algovps input[name*="promo"], .lagom-algovps input[placeholder*="promo"], .lagom-algovps input[placeholder*="code"] { padding-left: 48px !important; } /* ========================================== SolusVM Module Overrides - Dark Theme ========================================== */ /* SolusVM Tile Buttons - Override White Backgrounds */ .lagom-algovps .lu-tile, .lagom-algovps .lu-tile--btn, .lagom-algovps a.lu-tile { background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 12px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .lagom-algovps .lu-tile:hover, .lagom-algovps .lu-tile--btn:hover, .lagom-algovps a.lu-tile:hover { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(14, 165, 233, 0.3) !important; transform: translateY(-2px) !important; } /* SolusVM Tile Title Text */ .lagom-algovps .lu-tile__title { color: rgba(255, 255, 255, 0.9) !important; } /* SolusVM Widget Containers */ .lagom-algovps .lu-widget, .lagom-algovps .lu-widget__body, .lagom-algovps .lu-widget__header { background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 12px !important; } /* SolusVM Widget Title */ .lagom-algovps .lu-widget__top, .lagom-algovps .lu-top__title { color: rgba(255, 255, 255, 0.9) !important; } /* SolusVM Table Container */ .lagom-algovps .lu-t-c, .lagom-algovps .dataTables_wrapper { background: transparent !important; } /* SolusVM Table */ .lagom-algovps .lu-table, .lagom-algovps table.dataTable { background: transparent !important; color: rgba(255, 255, 255, 0.9) !important; } .lagom-algovps .lu-table thead th, .lagom-algovps table.dataTable thead th { background: rgba(255, 255, 255, 0.03) !important; color: rgba(255, 255, 255, 0.7) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } .lagom-algovps .lu-table tbody td { border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; color: rgba(255, 255, 255, 0.9) !important; } /* SolusVM Search Input - ID Selector to Beat Module CSS */ #layers2 .lu-form-control, #layers2 .lu-input-group, #layers2 input.lu-form-control, #layers2 .lu-input-group__form-control, #layers2 .lu-table-search, .lagom-algovps input[class*="lu-form-control"], .lagom-algovps input[class*="lu-table-search"], .lagom-algovps input[placeholder="Search..."], .lagom-algovps .lu-input-group input[class], .lagom-algovps .lu-top__search input[class], .lagom-algovps div[class*="lu-input-group"] input[class*="lu-form-control"], .lagom-algovps .lu-form-control, .lagom-algovps .lu-input-group__form-control, .lagom-algovps .lu-table-search, .lagom-algovps input.lu-form-control, .lagom-algovps .lu-input-group input, .lagom-algovps .lu-top__search input, .lagom-algovps input.lu-input-group__form-control.lu-table-search, .lagom-algovps div.lu-input-group input.lu-form-control { background: rgba(255, 255, 255, 0.03) !important; background-color: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: rgba(255, 255, 255, 0.9) !important; padding-left: 48px !important; } /* Input Group Container - No Border Changes */ #layers2 .lu-input-group, #layers2 .lu-input-group:hover, #layers2 .lu-input-group:focus, #layers2 .lu-input-group:active { border: none !important; box-shadow: none !important; } /* Only the input field itself should have hover/focus borders */ #layers2 .lu-form-control:hover { border-color: rgba(255, 255, 255, 0.2) !important; } #layers2 .lu-form-control:focus, #layers2 .lu-form-control:active { border-color: #0ea5e9 !important; box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.1) !important; } #layers2 .lu-form-control::placeholder, #layers2 input::placeholder, .lagom-algovps input[class*="lu-form-control"]::placeholder, .lagom-algovps input[placeholder="Search..."]::placeholder, .lagom-algovps .lu-form-control::placeholder, .lagom-algovps .lu-input-group__form-control::placeholder, .lagom-algovps input::placeholder { color: rgba(255, 255, 255, 0.4) !important; } /* SolusVM Primary Button - Match Electric Blue */ .lagom-algovps .lu-btn--primary, .lagom-algovps button.lu-btn--primary { background: #0ea5e9 !important; border-color: #0ea5e9 !important; color: #fafafa !important; box-shadow: 0 0 40px hsl(199 89% 48% / 0.3) !important; } .lagom-algovps .lu-btn--primary:hover, .lagom-algovps button.lu-btn--primary:hover { background: hsl(199, 89%, 42%) !important; border-color: hsl(199, 89%, 42%) !important; box-shadow: 0 0 50px hsl(199 89% 48% / 0.4) !important; } /* SolusVM No Records */ .lagom-algovps .lu-t-c div[style*="border-top"], .lagom-algovps div[style*="text-align: center"] { background: transparent !important; border-top-color: rgba(255, 255, 255, 0.1) !important; color: rgba(255, 255, 255, 0.6) !important; } /* SolusVM Loading/Skeleton States */ .lagom-algovps .datatableLoader, .lagom-algovps .lu-preloader-container, .lagom-algovps .lu-skeleton, .lagom-algovps [class*="skeleton"], .lagom-algovps [class*="loading"] { background: rgba(255, 255, 255, 0.02) !important; } /* SolusVM Preloader Overlay */ .lagom-algovps .lu-preloader-container--overlay { background: rgba(0, 0, 0, 0.7) !important; } /* SolusVM Spinner/Loader */ .lagom-algovps .lu-preloader { border-color: rgba(255, 255, 255, 0.1) !important; border-top-color: #0ea5e9 !important; } /* Service Action Cards - Override White Backgrounds */ .lagom-algovps .service-action, .lagom-algovps .service-action-card, .lagom-algovps [class*="service-action"] > div, .lagom-algovps .panel-action > div { background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 12px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .lagom-algovps .service-action:hover, .lagom-algovps .service-action-card:hover, .lagom-algovps [class*="service-action"] > div:hover { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(14, 165, 233, 0.3) !important; transform: translateY(-2px); } /* Service Management Section */ .lagom-algovps .service-management, .lagom-algovps [class*="service-management"], .lagom-algovps .module-section { margin-top: 32px; } .lagom-algovps .service-management > div, .lagom-algovps [class*="management-card"], .lagom-algovps .module-card { background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 12px !important; } /* Information Panel */ .lagom-algovps [class*="information"], .lagom-algovps .info-panel, .lagom-algovps .module-info, .lagom-algovps div[class*="Information"] { background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 12px !important; padding: 20px !important; color: rgba(255, 255, 255, 0.9) !important; } /* Fix Status Badges - Tone Down Green */ .lagom-algovps .badge-success, .lagom-algovps .label-success, .lagom-algovps .status-active, .lagom-algovps [class*="badge"].badge-success { background: rgba(34, 197, 94, 0.15) !important; color: #22c55e !important; border: 1px solid rgba(34, 197, 94, 0.3); } /* Fix Icon Colors - Consistent with Theme */ .lagom-algovps .shortcuts a, .lagom-algovps .shortcuts .icon, .lagom-algovps [class*="icon-"], .lagom-algovps .fa, .lagom-algovps svg { color: rgba(255, 255, 255, 0.6) !important; } .lagom-algovps .shortcuts a:hover, .lagom-algovps .shortcuts a:hover .icon { color: #0ea5e9 !important; } /* Fix Alert/Info Boxes */ .lagom-algovps .alert-info, .lagom-algovps [class*="info-box"], .lagom-algovps [class*="affiliate"] { background: rgba(14, 165, 233, 0.1) !important; border: 1px solid rgba(14, 165, 233, 0.2) !important; } /* Fix Danger/Warning Links */ .lagom-algovps a.text-danger, .lagom-algovps .text-danger, .lagom-algovps a[class*="danger"] { color: #f72585 !important; } .lagom-algovps a.text-warning, .lagom-algovps .text-warning { color: #facc15 !important; } /* Fix Empty State Icons */ .lagom-algovps .empty-state svg, .lagom-algovps .no-results svg, .lagom-algovps [class*="empty"] svg { opacity: 0.3; } /* Sidebar Buttons - Tone Down */ .lagom-algovps .sidebar .btn, .lagom-algovps aside .btn, .lagom-algovps [class*="sidebar"] .btn { background: rgba(14, 165, 233, 0.1) !important; border: 1px solid rgba(14, 165, 233, 0.25) !important; color: #0ea5e9 !important; } .lagom-algovps .sidebar .btn:hover, .lagom-algovps aside .btn:hover, .lagom-algovps [class*="sidebar"] .btn:hover { background: rgba(14, 165, 233, 0.2) !important; border: 1px solid rgba(14, 165, 233, 0.35) !important; } /* Links in Sidebar - Subdued Colors */ .lagom-algovps .sidebar a, .lagom-algovps aside a, .lagom-algovps [class*="sidebar"] a, .lagom-algovps .shortcuts a { color: rgba(255, 255, 255, 0.7) !important; } .lagom-algovps .sidebar a:hover, .lagom-algovps aside a:hover, .lagom-algovps [class*="sidebar"] a:hover, .lagom-algovps .shortcuts a:hover { color: #0ea5e9 !important; } /* Product Header Card - Remove Gradient */ .lagom-algovps .product-header, .lagom-algovps .product-details-header, .lagom-algovps [class*="product-header"] { background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; } /* Service Action Cards - Dark Theme */ .lagom-algovps .service-action, .lagom-algovps .service-action-card, .lagom-algovps [class*="action-card"], .lagom-algovps .panel-action { background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } .lagom-algovps .service-action:hover, .lagom-algovps .service-action-card:hover, .lagom-algovps [class*="action-card"]:hover { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(14, 165, 233, 0.3) !important; } /* Charts - Dark Background */ .lagom-algovps canvas, .lagom-algovps .chart-container, .lagom-algovps [class*="chart"], .lagom-algovps .graph-container { background: rgba(255, 255, 255, 0.02) !important; border-radius: 12px; } /* Tab Content - Dark Background */ .lagom-algovps .tab-content, .lagom-algovps .tab-pane, .lagom-algovps [class*="tab-content"] { background: rgba(255, 255, 255, 0.02) !important; } /* Panel/Card Backgrounds - Consistent Dark */ .lagom-algovps .panel, .lagom-algovps .panel-body, .lagom-algovps .card, .lagom-algovps .card-body { background: rgba(255, 255, 255, 0.02) !important; } /* Dropdown Menus - Dark Glass */ .lagom-algovps .dropdown-menu, .lagom-algovps .dropdown-content, .lagom-algovps [class*="dropdown"] ul, .lagom-algovps .navbar-dropdown { background: rgba(10, 10, 10, 0.95) !important; backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important; } .lagom-algovps .dropdown-menu li, .lagom-algovps .dropdown-item, .lagom-algovps .dropdown-menu a { background: transparent !important; color: rgba(255, 255, 255, 0.9) !important; } .lagom-algovps .dropdown-menu li:hover, .lagom-algovps .dropdown-item:hover, .lagom-algovps .dropdown-menu a:hover { background: rgba(14, 165, 233, 0.15) !important; color: #0ea5e9 !important; } .lagom-algovps .dropdown-divider, .lagom-algovps .dropdown-menu hr { border-color: rgba(255, 255, 255, 0.1) !important; } /* Hide Dropdown Menu Sidebar Graphic */ .lagom-algovps .dropdown-menu-sidebar, .lagom-algovps .dropdown-menu-sidebar-content, .lagom-algovps .dropdown-menu-sidebar-graphic, .lagom-algovps .dropdown-menu-sidebar-desc { display: none !important; } /* Fix Icon Spacing - Add Padding */ .lagom-algovps .shortcuts a, .lagom-algovps .shortcuts li, .lagom-algovps [class*="shortcut"] a { padding-left: 16px !important; } .lagom-algovps .shortcuts .icon, .lagom-algovps .shortcuts [class*="icon"], .lagom-algovps .shortcuts i, .lagom-algovps .shortcuts svg { margin-right: 12px !important; } /* Contacts Section Icon Spacing */ .lagom-algovps [class*="contacts"] .icon, .lagom-algovps [class*="contacts"] i, .lagom-algovps [class*="contacts"] svg, .lagom-algovps .empty-state .icon { margin-right: 12px !important; margin-left: 4px !important; } /* Shortcuts - Style Like Action Boxes */ .lagom-algovps .shortcuts { display: flex; flex-direction: column; gap: 12px; } .lagom-algovps .shortcuts a, .lagom-algovps .shortcuts li a { display: flex; align-items: center; padding: 16px 20px !important; background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 12px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; } .lagom-algovps .shortcuts a:hover, .lagom-algovps .shortcuts li a:hover { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(14, 165, 233, 0.3) !important; transform: translateY(-2px); } .lagom-algovps .shortcuts .icon, .lagom-algovps .shortcuts i, .lagom-algovps .shortcuts svg { margin-right: 16px !important; font-size: 20px; } /*! * 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: rgba(255, 255, 255, 0.03); /* name: Background; type: select-colors;*/ --input-border-color: rgba(255, 255, 255, 0.08); /* 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: rgba(255, 255, 255, 0.05); /* name: Hover - Background; type: select-colors;*/ --input-hover-border-color: rgba(255, 255, 255, 0.12); /* 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: rgba(255, 255, 255, 0.05); /* 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: rgba(255, 255, 255, 0.03); /* 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: rgba(255, 255, 255, 0.08); /* name: Border Color; type: select-colors*/ --icheck-hover-bg: rgba(255, 255, 255, 0.05); /* 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: rgba(255, 255, 255, 0.03); } .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 { /* Name: Navigation; Index: 3 */ /* Section: Navigation Logo */ --app-nav-logo-height: 64px; /* name: Height; type: size; append: px;*/ --app-nav-logo-width: auto; --app-nav-header-height: calc(var(--app-nav-logo-height) + var(--spacing-4x)); /* Section: Top Layout Navigation*/ --app-nav-top-bg: rgba(255, 255, 255, 0.02); --app-nav-navbar-bg: var(--app-nav-top-bg); --app-nav-top-box-shadow: 0 4px 16px hsl(199 89% 48% / 0.05); /* name: Shadow; var_group: Box Shadow; */ --app-nav-top-border-bottom: 1px solid rgba(255, 255, 255, 0.05); --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: rgba(255, 255, 255, 0.02); --app-nav-left-box-shadow: 0 8px 32px hsl(199 89% 48% / 0.1); /* 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: rgba(255, 255, 255, 0.02); --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: rgba(255, 255, 255, 0.02); --mob-app-nav-header-border-bottom: var(--ui-block-border); --mob-app-nav-header-box-shadow: 0 8px 32px hsl(199 89% 48% / 0.1); --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; --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: 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: unset; --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{ --tile-bg-color: var(--body-bg); --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); --tile-border-color-hover: 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: 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: transparent; --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); } }/*! * 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: rgba(255, 255, 255, 0.02); --main-top-border-bottom: 1px solid rgba(255, 255, 255, 0.05); --main-top-box-shadow: 0 4px 16px hsl(199 89% 48% / 0.05); --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: rgba(255, 255, 255, 0.02); /* 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-faded); --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: rgba(255, 255, 255, 0.02); --main-footer-border-top: 1px solid rgba(255, 255, 255, 0.05); --main-footer-box-shadow: 0 -4px 16px hsl(199 89% 48% / 0.05); --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-header-margin-bottom: var(--spacing-2x); --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: 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-sm); /* 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-base); /* 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: 12px; /* 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: 12px; /* 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-lg); /* 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-2); /* 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: #fafafa; /* name: Font Color; type: select-colors;*/ --btn-primary-hover-bg: hsl(199, 89%, 42%); /* name: Hover - Background; type: select-colors;*/ --btn-primary-hover-border: hsl(199, 89%, 42%); /* name: Hover - Border Color; type: select-colors;*/ --btn-primary-hover-color: #fafafa; /* name: Hover - Font Color; type: select-colors;*/ --btn-primary-active-bg: hsl(199, 89%, 42%); /* name: Active - Background; type: select-colors;*/ --btn-primary-active-border: hsl(199, 89%, 42%); /* 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-darker); /* 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: var(--text-white-color); /* name: Font Color; type: select-colors;*/ --btn-secondary-hover-bg: var(--brand-secondary-darker); /* name: Hover - Background; type: select-colors;*/ --btn-secondary-hover-border: var(--brand-secondary-darker); /* name: Hover - Border Color; type: select-colors;*/ --btn-secondary-hover-color: var(--text-white-color); /* 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); /* name: Background; type: select-colors;*/ --btn-success-border: var(--brand-success); /* name: Border Color; type: select-colors;*/ --btn-success-color: var(--text-white-color); /* name: Font Color; type: select-colors;*/ --btn-success-hover-bg: var(--brand-success-darker); /* name: Hover - Background; type: select-colors;*/ --btn-success-hover-border: var(--brand-success-darker); /* name: Hover - Border Color; type: select-colors;*/ --btn-success-hover-color: var(--text-white-color); /* name: Hover - Font Color; type: select-colors;*/ --btn-success-active-bg: var(--brand-success-darker); /* name: Active - Background; type: select-colors;*/ --btn-success-active-border: var(--brand-success-darker); /* name: Active - Border Color; type: select-colors;*/ /* Section: Info */ --btn-info-bg: var(--brand-info); /* name: Background; type: select-colors;*/ --btn-info-border: var(--brand-info); /* name: Border Color; type: select-colors;*/ --btn-info-color: var(--text-white-color); /* name: Font Color; type: select-colors;*/ --btn-info-hover-bg: var(--brand-info-darker); /* name: Hover - Background; type: select-colors;*/ --btn-info-hover-border: var(--brand-info-darker); /* name: Hover - Border Color; type: select-colors;*/ --btn-info-hover-color: var(--text-white-color); /* name: Hover - Font Color; type: select-colors;*/ --btn-info-active-bg: var(--brand-info-darker); /* name: Active - Background; type: select-colors;*/ --btn-info-active-border: var(--brand-info-darker); /* name: Active - Border Color; type: select-colors;*/ /* Section: Warning */ --btn-warning-bg: var(--brand-warning); /* name: Background; type: select-colors;*/ --btn-warning-border: var(--brand-warning); /* name: Border Color; type: select-colors;*/ --btn-warning-color: var(--text-white-color); /* name: Font Color; type: select-colors;*/ --btn-warning-hover-bg: var(--brand-warning-darker); /* name: Hover - Background; type: select-colors;*/ --btn-warning-hover-border: var(--brand-warning-darker); /* name: Hover - Border Color; type: select-colors;*/ --btn-warning-hover-color: var(--text-white-color); /* name: Hover - Font Color; type: select-colors;*/ --btn-warning-active-bg: var(--brand-warning-darker); /* name: Active - Background; type: select-colors;*/ --btn-warning-active-border: var(--brand-warning-darker); /* name: Active - Border Color; type: select-colors;*/ /* Section: Danger */ --btn-danger-bg: var(--brand-danger); /* name: Background; type: select-colors;*/ --btn-danger-border: var(--brand-danger); /* name: Border Color; type: select-colors;*/ --btn-danger-color: var(--text-white-color); /* name: Font Color; type: select-colors;*/ --btn-danger-hover-bg: var(--brand-danger-darker); /* name: Hover - Background; type: select-colors;*/ --btn-danger-hover-border: var(--brand-danger-darker); /* name: Hover - Border Color; type: select-colors;*/ --btn-danger-hover-color: var(--text-white-color); /* name: Hover - Font Color; type: select-colors;*/ --btn-danger-active-bg: var(--brand-danger-darker); /* name: Active - Background; type: select-colors;*/ --btn-danger-active-border: var(--brand-danger-darker); /* 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-lighter-4); --btn-disabled-border: transparent; --btn-link-disabled-color: var(--gray-lighter); --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: var(--text-white-color); --btn-primary-faded-hover-bg: var(--gray-faded); --btn-primary-faded-hover-border: transparent; --btn-primary-faded-hover-color: var(--text-white-color); --btn-primary-faded-active-bg: var(--gray-faded); --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 { /* 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-sm) 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: transparent; --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: rgba(255, 255, 255, 0.02); --dropdown-border: var(--ui-block-border); --dropdown-border-radius: var(--ui-block-border-radius); --dropdown-box-shadow: 0 8px 32px hsl(199 89% 48% / 0.1); --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(--text-heading-color); --nav-tabs-link-icon-color: var(--gray-icons); --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(--text-primary-color); --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: rgba(255, 255, 255, 0.02); --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: 0 8px 32px hsl(199 89% 48% / 0.1); /* Popover */ --popover-bg: rgba(255, 255, 255, 0.02); --popover-max-width: 288px; --popover-border-color: rgba(255, 255, 255, 0.05); --popover-title-bg: rgba(255, 255, 255, 0.03); --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-saving-bg: var(--state-saving-bg); --alert-saving-text: var(--state-saving-text); --alert-saving-border: var(--state-saving-border); --alert-gray-bg: var(--state-default-bg); --alert-gray-text: var(--state-default-text); --alert-gray-border: var(--state-default-border); --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-h5); --panel-title-font-weight: var(--font-weight-h5); --panel-title-line-height: var(--line-height-h5); --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) - 1px); --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-xxs); --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(--state-default-bg); --badge-default-color: var(--state-default-text); --badge-primary-bg: var(--state-primary-bg); --badge-primary-hover-bg: var(--state-primary-bg-hover); --badge-primary-color: var(--text-white-color); --badge-primary-faded-bg: var(--state-primary-faded-bg); --badge-primary-faded-hover-bg: var(--state-primary-faded-bg-hover); --badge-primary-faded-color: var(--state-primary-faded-text); --badge-success-bg: var(--state-success-bg); --badge-success-hover-bg: var(--state-success-bg-hover); --badge-success-color: var(--state-success-text); --badge-info-bg: var(--state-info-bg); --badge-info-hover-bg: var(--state-info-bg-hover); --badge-info-color: var(--state-info-text); --badge-warning-bg: var(--state-warning-bg); --badge-warning-hover-bg: var(--state-warning-bg-hover); --badge-warning-color: var(--state-warning-text); --badge-danger-bg: var(--state-danger-bg); --badge-danger-hover-bg: var(--state-danger-bg-hover); --badge-danger-color: var(--state-danger-text); --badge-saving-bg: var(--state-saving-bg); --badge-saving-color: var(--state-saving-text); --badge-savings-hover-bg: var(--state-saving-bg-hover); --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: rgba(255, 255, 255, 0.02); --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: 12px; --code-line-height: 20px; --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 */ --panel-bg: var(--body-bg); --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); }/*! * 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 { /* 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: rgba(255, 255, 255, 0.08); --primary-block-input-border: rgba(255, 255, 255, 0.12); --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); }