:root { /* General */ --svg-icon-stroke-width: 2px; --svg-illustration-shadow-color: #000; --svg-illustration-shadow-opacity-start: 0.15; --svg-icon-color-base: var(--svg-illustration-color-1); --svg-icon-color-lighter: var(--svg-illustration-color-2); --svg-icon-color-secondary: #ffffff; --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: #fff; --svg-graphic-bg-body: transparent; --svg-graphic-bg-browser-top: transparent; --svg-graphic-bg-browser-actions: rgba(255, 255, 255, 0.4); --svg-graphic-bg-browser-search: #fff; --svg-graphic-bg-banner: transparent; --svg-graphic-bg-faded: rgba(255, 255, 255, 0.08); --svg-graphic-bg-faded-2: rgba(255, 255, 255, 0.16); --svg-graphic-bg-faded-3: rgba(255, 255, 255, 0.32); --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: rgba(255, 255, 255, 0.08); --svg-graphic-stroke-faded-2: rgba(255, 255, 255, 0.16); /* SVG Icons */ --svg-icon-color-1: var(--brand-primary-lighter); --svg-icon-color-2: var(--brand-primary); --svg-icon-color-3: #ffffff; --svg-icon-color-4: #ffffff; --svg-icon-color-5: #DEE0E3; --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); } :root { /* General */ --svg-icon-stroke-width: 2px; --svg-illustration-shadow-color: #000; --svg-illustration-shadow-opacity-start: 0.15; --svg-icon-color-base: var(--svg-illustration-color-1); --svg-icon-color-lighter: var(--svg-illustration-color-2); --svg-icon-color-secondary: #ffffff; --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: #fff; --svg-graphic-bg-body: transparent; --svg-graphic-bg-browser-top: transparent; --svg-graphic-bg-browser-actions: rgba(255, 255, 255, 0.4); --svg-graphic-bg-browser-search: #fff; --svg-graphic-bg-banner: transparent; --svg-graphic-bg-faded: rgba(255, 255, 255, 0.08); --svg-graphic-bg-faded-2: rgba(255, 255, 255, 0.16); --svg-graphic-bg-faded-3: rgba(255, 255, 255, 0.32); --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: rgba(255, 255, 255, 0.08); --svg-graphic-stroke-faded-2: rgba(255, 255, 255, 0.16); /* SVG Icons */ --svg-icon-color-1: var(--brand-primary-lighter); --svg-icon-color-2: var(--brand-primary); --svg-icon-color-3: #ffffff; --svg-icon-color-4: #ffffff; --svg-icon-color-5: #DEE0E3; --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); } /*! * Theme Name: Lagom WHMCS Client Theme * Theme URL: https://lagom.rsstudio.net/ * * Terms of Service: https://lagom.rsstudio.net/docs/legal/terms-of-service.html * * Copyright (c) 2021 RS Studio */ :root { /* START PARSE */ /* Section: Gray; Index: 0; */ --color-empty: unset; /* name: Empty; type: hidden */ --gray-base: hsla(220, 100%, 90%, 92%); /* name: Main; */ --gray-lighter: hsla(220, 100%, 90%, 80%); /* name: Lighter;*/ --gray-lighter-2: hsla(220, 100%, 90%, 56%); /* name: Lighter 2; */ --gray-lighter-3: hsla(220, 100%, 90%, 24%); /* name: Lighter 3; */ --gray-lighter-4: hsla(220, 100%, 90%, 16%); /* name: Lighter 4; */ --gray-faded: hsla(220, 100%, 90%, 12%); /* name: Lighter 5;*/ --gray-darker: #fff; /* name: Darker; */ --gray-icons: hsla(220, 100%, 90%, 64%); /* name: Icons; */ --gray-icons-hover: hsla(220, 100%, 90%, 56%); /* name: Icons Hover; */ --gray-gradient-start: rgba(75, 120, 210, 0.08); /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --gray-gradient-end: rgba(75, 120, 210, 0.32); /* name: Gradient End; type: gradientColor; gradientColor: end; */ --gray-gradient-h: linear-gradient( 270deg, var(--gray-gradient-start) 0%, var(--gray-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --gray-gradient-v: linear-gradient( 0deg, var(--gray-gradient-end) 0%, var(--gray-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */ /* Section: Primary */ --brand-primary: #1062fe; /* name: Main; color_preview: primary;*/ --brand-primary-lighter: #009AFF; /* name: Lighter; */ --brand-primary-lighter-2: #B3CCFF; /* name: Lighter 2; */ --brand-primary-lighter-3: #D6E4FF; /* name: Lighter 3; */ --brand-primary-lighter-4: #F1F5FE; /* name: Lighter 4; */ --brand-primary-darker: #003CB2; /* name: Darker; */ --brand-primary-gradient-start: #003CB2; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-primary-gradient-end: #1062fe; /* 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 Horizontal; type:hidden; gradient:true; gradientType: vertical; */ /* Section: Secondary */ --brand-secondary: #083fbf; /* name: Main; color_preview: secondary; */ --brand-secondary-lighter: #667b9e; /* name: Lighter; */ --brand-secondary-darker: #08349B; /* name: Darker; */ --brand-secondary-gradient-start: #08349B; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-secondary-gradient-end: #083fbf; /* 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 Horizontal; type:hidden; gradient:true; gradientType: vertical; */ /* Section: Info */ --brand-info: #1062fe; /* name: Main; */ --brand-info-lighter: #6298fe; /* name: Lighter; */ --brand-info-lighter-2: #B3CCFF; /* name: Lighter 2; */ --brand-info-lighter-3: #D6E4FF; /* name: Lighter 3; */ --brand-info-darker: #015abe; /* name: Darker; */ --brand-info-gradient-start: #015abe; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-info-gradient-end: #1062fe; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --brand-info-gradient-h: linear-gradient( 90deg, var(--brand-info-gradient-start) 0%, var(--brand-info-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --brand-info-gradient-v: linear-gradient( 0deg, var(--brand-info-gradient-end) 0%, var(--brand-info-gradient-start) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: vertical; */ /* Section: Success */ --brand-success: #36C055; /* name: Main; */ --brand-success-lighter: #70d786; /* name: Lighter; */ --brand-success-lighter-2: #cff2d7; /* name: Lighter 2; */ --brand-success-lighter-3: #dbf5e1; /* name: Lighter 3; */ --brand-success-lighter-4: #e7f8eb; /* name: Lighter 4; */ --brand-success-darker: #2d9f46; /* name: Darker; */ --brand-success-gradient-start: #2d9f46; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-success-gradient-end: #36C055; /* 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-start) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: vertical; */ /* Section: Warning */ --brand-warning: #ffaa00; /* name: Main; */ --brand-warning-lighter: #ffc552; /* name: Lighter; */ --brand-warning-lighter-2: #ffeecc; /* name: Lighter 2; */ --brand-warning-lighter-3: #fff3db; /* name: Lighter 3; */ --brand-warning-lighter-4: #fff8eb; /* name: Lighter 4; */ --brand-warning-darker: #d68f00; /* name: Darker; */ --brand-warning-gradient-start: #d68f00; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-warning-gradient-end: #ffaa00; /* 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 Horizontal; type:hidden; gradient:true; gradientType: vertical; */ /* Section: Danger */ --brand-danger: #d92632; /* name: Main; */ --brand-danger-lighter: #e56c74; /* name: Lighter; */ --brand-danger-lighter-2: #f7d4d6; /* name: Lighter 2; */ --brand-danger-lighter-3: #fae1e2; /* name: Lighter 3; */ --brand-danger-lighter-4: #fceeef; /* name: Lighter 4; */ --brand-danger-darker: #b6202a; /* name: Darker; */ --brand-danger-gradient-start: #b6202a; /* name: Gradient Start; type: gradientColor; gradientColor: start; */ --brand-danger-gradient-end: #d92632; /* name: Gradient End; type: gradientColor; gradientColor: end; */ --brand-danger-gradient-h: linear-gradient( 90deg, var(--brand-danger-gradient-start) 0%, var(--brand-danger-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */ --brand-danger-gradient-v: linear-gradient( 0deg, var(--brand-danger-gradient-end) 0%, var(--brand-danger-gradient-start) 100%);/* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: vertical; */ /* Section: SVG Illustrations */ --svg-illustration-color-0: #0250E3; /* name: Darker ; type: hiddenlist;*/ --svg-illustration-color-1: #1062fe; /* name: Base ; type: hiddenlist;*/ --svg-illustration-color-2: #009AFF; /* name: Lighter; type: hiddenlist; */ --svg-illustration-color-3: #76c8fe; /* name: Lighter 2; type: hiddenlist; */ --svg-illustration-color-4: #8fd2fe; /* name: Lighter 3; type: hiddenlist; */ --svg-illustration-color-5: #a9dcff; /* name: Lighter 4; type: hiddenlist; */ --svg-illustration-color-6: #c2e6ff; /* name: Lighter 5; type: hiddenlist; */ --svg-illustration-color-7: #ffffff; /* name: Secondary; type: hiddenlist;*/ --svg-illustration-shadow: #000000; /* Section: Background */ --body-bg: #022268; /* name: Body; type: hiddenlist;*/ /* Advanced Colors */ --ui-block-bg: linear-gradient(180deg, rgba(75, 120, 210, 0.16) 0%, rgba(41, 82, 163, 0.16) 24%, rgba(41, 82, 163, 0.16) 100%); --ui-block-overlay-bg: linear-gradient(180deg, rgba(75, 120, 210, 0.65) 0%, rgba(41, 82, 163, 0.72) 24%, rgba(31, 61, 122, 0.72) 100%); --ui-block-overlay-bg-2: linear-gradient(180deg, rgb(34, 78, 174, 0.92) 0%, rgb(19, 58, 144, 0.92) 24%, rgb(6, 40, 111, 0.92) 100%); /* END PARSE */ } @-moz-document url-prefix() { :root{ --ui-block-overlay-bg: linear-gradient(180deg, rgba(75, 120, 210, 0.87) 0%, rgba(41, 82, 163, 0.94) 24%, rgba(31, 61, 122, 0.94) 100%); } }