/*!
 * 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; */


    --gray-base:                                    #7c8088; /* name: Main; */
    --gray-lighter:                                 #8c8f96; /* name: Lighter;*/
    --gray-lighter-2:                               #babec7; /* 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; */
 
    /* Section: Primary */

    --brand-primary:                                #25a75b; /* name: Main; color_preview: primary;*/
    --brand-primary-lighter:                        #4ECA78; /* name: Lighter; */
    --brand-primary-lighter-2:                      #C8EED5; /* name: Lighter 2; */
    --brand-primary-lighter-3:                      #D8F3E1; /* name: Lighter 3; */
    --brand-primary-lighter-4:                      #E7F8ED; /* name: Lighter 4; */
    --brand-primary-darker:                         #22723D; /* name: Darker; */
    --brand-primary-gradient-start:                 #25a75b; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --brand-primary-gradient-end:                   #4ECA78; /* 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:                              #0F9555; /* name: Main; color_preview: secondary; */
    --brand-secondary-lighter:                      #25C177; /* name: Lighter; */
    --brand-secondary-darker:                       #0D5935; /* name: Darker; */
    --brand-secondary-gradient-start:               #0D5935; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --brand-secondary-gradient-end:                 #0F9555; /* 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:                                   #2872fc; /* 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:                      #2872fc; /* 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:                         #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 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: Icons; */
    --gray-icons-hover:                             #25a75b; /* name: Icons Hover; */

    /* Section: SVG Illustrations */

    --svg-illustration-gray-1:                      #393E41; /* name: Gray Base ; type: hiddenlist;*/
    --svg-illustration-gray-2:                      #4F5357; /* name: Gray Lighter; type: hiddenlist; */
    --svg-illustration-gray-3:                      #CBCFD4; /* name: Gray Lighter 2; type: hiddenlist; */
    --svg-illustration-gray-4:                      #DADCDE; /* name: Gray Lighter 3; type: hiddenlist; */
    --svg-illustration-gray-5:                      #DCDEE1; /* name: Gray Lighter 4; type: hiddenlist; */
    --svg-illustration-gray-6:                      #E9EBEE; /* name: Gray Lighter 5; type: hiddenlist; */
    --svg-illustration-gray-7:                      #EBEDF0; /* name: Gray Lighter 6; type: hiddenlist; */
    --svg-illustration-gray-8:                      #EAEEF3; /* name: Gray Lighter 7; type: hiddenlist; */
    --svg-illustration-gray-w:                      #ffffff; /* name: White; type: hiddenlist; */

    --svg-illustration-primary-1:                   #25a75b; /* name: Primary - Base ; type: hiddenlist;*/
    --svg-illustration-primary-2:                   #4ECA78; /* name: Primary - Lighter; type: hiddenlist; */
    --svg-illustration-primary-3:                   #65e28e; /* name: Primary - Lighter 2; type: hiddenlist; */
    --svg-illustration-primary-4:                   #98ecb4; /* name: Primary - Lighter 3; type: hiddenlist; */
      
    --svg-illustration-yellow-1:                    #F9A000; /* name: Yellow - Base; type: hiddenlist; */
    --svg-illustration-yellow-2:                    #FBB900; /* name: Yellow - Lighter; type: hiddenlist; */
    --svg-illustration-yellow-3:                    #FFD251; /* name: Yellow - Lighter 2; type: hiddenlist; */
    --svg-illustration-yellow-4:                    #FBC666; /* name: Yellow - Lighter 3; type: hiddenlist; */
      
    --svg-illustration-green-1:                     #1F5C3A; /* name: Green - Base; type: hiddenlist; */
    --svg-illustration-green-2:                     #31854C; /* name: Green - Lighter; type: hiddenlist; */
    --svg-illustration-green-3:                     #35B65E; /* name: Green - Lighter 2; type: hiddenlist;*/
    --svg-illustration-green-4:                     #5BD682; /* name: Green - Lighter 3; type: hiddenlist; */

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

    /* Section: Background */

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

    /* END PARSE */
}