/*!
 * 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:                                    #5E636E; /* name: Main; */
    --gray-lighter:                                 #979ba4; /* name: Lighter;*/
    --gray-lighter-2:                               #ACB0B9; /* name: Lighter 2; */
    --gray-lighter-3:                               #DEE0E3; /* name: Lighter 3; */
    --gray-lighter-4:                               #E9EAEC; /* name: Lighter 4; */
    --gray-faded:                                   #F7F7F8; /* name: Lighter 5;*/
    --gray-darker:                                  #17191C; /* name: Darker; */
    --gray-gradient-start:                          #FFFFFF; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --gray-gradient-end:                            #E1F3FF; /* 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 */

    --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:                      #E1EFFF; /* name: Lighter 4; */
    --brand-primary-darker:                         #003CB2; /* name: Darker; */
    --brand-primary-gradient-start:                 #1966FF; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --brand-primary-gradient-end:                   #009AFF; /* name: Gradient End; type: gradientColor; gradientColor: end; */
    --brand-primary-gradient-h:                     linear-gradient( 90deg, var(--brand-primary-gradient-start) 0%, var(--brand-primary-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */
    --brand-primary-gradient-v:                     linear-gradient( 0deg, var(--brand-primary-gradient-end) 0%, var(--brand-primary-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */

    /* Section: Secondary */

    --brand-secondary:                              #083fbf; /* name: Main; color_preview: secondary; */
    --brand-secondary-lighter:                      #667b9e; /* name: Lighter; */
    --brand-secondary-darker:                       #08349B; /* name: Darker; */
    --brand-secondary-gradient-start:               #011a62; /* 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 Vertical; 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 Vertical; 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-end) 100%); /* name: Gradient Vertical; 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:                         #F08000; /* 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 Vertical; 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 Vertical; type:hidden; gradient:true; gradientType: vertical; */

    /* Section: UI Icon */

    --gray-icons:                                   #ACAFB9; /* name: Icon; */
    --gray-icons-hover:                             #1062fe; /* name: Icon Hover; */

    /* Section: SVG Illustrations */

    --svg-illustration-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;

    --svg-banner-shape-left:                        var(--brand-primary);
    --svg-banner-shape-right:                       var(--brand-primary-lighter);

    /* Section: Background */

    --body-bg:                                      #F7F7F8; /* name: Body; type: hiddenlist; */

    /* END PARSE */
}
