/*!
 * Theme Name: Lagom WHMCS Client Theme
 * Author: RS Studio (https://rsstudio.net)
 * Theme URL: https://lagom.rsstudio.net/
 * Terms of Service: https://lagom.rsstudio.net/legal/terms-of-service/
 *
 * This file is part of a licensed product. Unauthorized redistribution, modification,
 * or use outside of the licensed environment is strictly prohibited.
 *
 * © RS Studio. All rights reserved.
 */

 :root {
    /* START PARSE */

    /* Section: Gray; Index: 0; */
    --color-empty:                                  unset; /* name: Empty; type: hidden */

    --gray-base:                                    #4B4F58; /* name: Main; */
    --gray-lighter:                                 #595E69; /* name: Lighter; */
    --gray-lighter-2:                               #6D7482; /* name: Lighter 2; */
    --gray-lighter-3:                               #DEE0E3; /* name: Lighter 3; */
    --gray-lighter-4:                               #EFEFF1; /* name: Lighter 4; */
    --gray-faded:                                   #F7F7F8; /* name: Lighter 5; */
    --gray-darker:                                  #17191C; /* name: Darker; */
    --gray-gradient-start:                          #FCFCFD; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --gray-gradient-end:                            #F3F5F7; /* name: Gradient End; type: gradientColor; gradientColor: end; */
    --gray-gradient-h:                              linear-gradient( 270deg, var(--gray-gradient-start) 0%, var(--gray-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */
    --gray-gradient-v:                              linear-gradient( 0deg, var(--gray-gradient-end) 0%, var(--gray-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */
 
    /* Section: Primary */

    --brand-primary:                                #065CFE; /* name: Main; color_preview: primary;*/
    --brand-primary-lighter:                        #25A9FF; /* name: Lighter; */
    --brand-primary-lighter-2:                      #C2D6FF; /* name: Lighter 2; */
    --brand-primary-lighter-3:                      #E5EFFF; /* name: Lighter 3; */
    --brand-primary-lighter-4:                      #F0F5FF; /* 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:                   #065CFE; /* 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:                      #4B78E2; /* name: Lighter; */
    --brand-secondary-lighter-2:                    #8596B2; /* name: Lighter 2; */
    --brand-secondary-lighter-3:                    #606979; /* name: Lighter 3; */
    --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 Vertical; type:hidden; gradient:true; gradientType: vertical; */

    /* Section: Info */
    
    --brand-info:                                   #0158FE; /* name: Main; */
    --brand-info-lighter:                           #009AFF; /* name: Lighter; */
    --brand-info-lighter-2:                         #B3CCFF; /* name: Lighter 2; */
    --brand-info-lighter-3:                         #E0EBFF; /* name: Lighter 3; */
    --brand-info-lighter-4:                         #E5EEFF; /* name: Lighter 4; */
    --brand-info-darker:                            #003CB2; /* name: Darker; */
    --brand-info-gradient-start:                    #003CB2; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --brand-info-gradient-end:                      #0158FE; /* 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:                                #1E7B32; /* name: Main; */
    --brand-success-lighter:                        #6BC780; /* name: Lighter; */
    --brand-success-lighter-2:                      #BAE8C5; /* name: Lighter 2; */
    --brand-success-lighter-3:                      #D7F4DE; /* name: Lighter 3; */
    --brand-success-lighter-4:                      #E8F7EC; /* name: Lighter 4; */
    --brand-success-darker:                         #19672A; /* name: Darker; */
    --brand-success-gradient-start:                 #19672A; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --brand-success-gradient-end:                   #1E7B32; /* 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:                                #B84B00; /* name: Main; */
    --brand-warning-lighter:                        #FFB866; /* name: Lighter; */
    --brand-warning-lighter-2:                      #FFDBB2; /* name: Lighter 2; */
    --brand-warning-lighter-3:                      #FFECD6; /* name: Lighter 3; */
    --brand-warning-lighter-4:                      #FFF3E5; /* name: Lighter 4; */
    --brand-warning-darker:                         #B64425; /* name: Darker; */
    --brand-warning-gradient-start:                 #B64425; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --brand-warning-gradient-end:                   #B84B00; /* 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:                                 #CA202C; /* name: Main; */
    --brand-danger-lighter:                         #E56C74; /* name: Lighter; */
    --brand-danger-lighter-2:                       #F7D4D4; /* 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:                    #CA202C; /* 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:                                 #CF0C52; /* name: Main; */
    --brand-saving-lighter:                         #F5578F; /* name: Lighter; */
    --brand-saving-lighter-2:                       #F9DCE7; /* name: Lighter 2; */
    --brand-saving-lighter-3:                       #FCE3EC; /* name: Lighter 3; */
    --brand-saving-lighter-4:                       #FDF2F6; /* name: Lighter 4; */
    --brand-saving-darker:                          #B4285A; /* name: Darker; */

    /* Section: UI Icon */

    --decoration-icons:                             #b3b3b3; /* name: Decoration Icons; */
    --gray-icons:                                   var(--gray-lighter-2); /* name: Icons; */
    --gray-icons-hover:                             var(--brand-primary); /* 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:                      #CBCFD5; /* name: Gray Lighter 2; type: hiddenlist; */
    --svg-illustration-gray-4:                      #DADCDE; /* name: Gray Lighter 3; type: hiddenlist; */
    --svg-illustration-gray-5:                      #DCDEE1; /* name: Gray Lighter 4; type: hiddenlist; */
    --svg-illustration-gray-6:                      #E9EBEE; /* name: Gray Lighter 5; type: hiddenlist; */
    --svg-illustration-gray-7:                      #EBEDF0; /* name: Gray Lighter 6; type: hiddenlist; */
    --svg-illustration-gray-8:                      #EAEEF3; /* name: Gray Lighter 7; type: hiddenlist; */
    --svg-illustration-gray-w:                      #ffffff; /* name: White; type: hiddenlist; */
    --svg-illustration-shadow:                      #000000;

    --svg-illustration-primary-0:                   #074FA9; /* name: Primary Darker ; type: hiddenlist;*/
    --svg-illustration-primary-1:                   #0367E4; /* name: Primary Base ; type: hiddenlist;*/
    --svg-illustration-primary-2:                   #347BE9; /* name: Primary - Lighter; type: hiddenlist; */
    --svg-illustration-primary-3:                   #428BF0; /* name: Primary - Lighter 2; type: hiddenlist; */
    --svg-illustration-primary-4:                   #76A9F1; /* name: Primary - Lighter 3; type: hiddenlist; */
      
    --svg-illustration-yellow-1:                    #F9A000; /* name: Yellow - Base; type: hiddenlist; */
    --svg-illustration-yellow-2:                    #FBB900; /* name: Yellow - Lighter; type: hiddenlist; */
    --svg-illustration-yellow-3:                    #FFD251; /* name: Yellow - Lighter 2; type: hiddenlist; */
    --svg-illustration-yellow-4:                    #FBC666; /* name: Yellow - Lighter 3; type: hiddenlist; */
    --svg-illustration-yellow-5:                    #FCDA83; /* name: Yellow - Lighter 4; type: hiddenlist; */
      
    --svg-illustration-green-1:                     #1F5C3A; /* name: Green - Base; type: hiddenlist; */
    --svg-illustration-green-2:                     #31854C; /* name: Green - Lighter; type: hiddenlist; */
    --svg-illustration-green-3:                     #35B65E; /* name: Green - Lighter 2; type: hiddenlist; */
    --svg-illustration-green-4:                     #5BD682; /* name: Green - Lighter 3; type: hiddenlist; */

    --svg-illustration-line-color:                  rgba(192, 192, 192, 0.3);

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

    /* Section: Background */

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

}

.lagom-dark-mode {
    
    --dark-mode-gray-base:                                      #D9D9D9; /* name: Main; */
    --dark-mode-gray-lighter:                                   #B3B3B3; /* name: Lighter; */
    --dark-mode-gray-lighter-2:                                 #8C8C8C; /* name: Lighter 2; */
    --dark-mode-gray-lighter-3:                                 #424242; /* name: Lighter 3; */
    --dark-mode-gray-lighter-4:                                 #303030; /* name: Lighter 4; */
    --dark-mode-gray-faded:                                     #2B2B2B; /* name: Lighter 5; */
    --dark-mode-gray-darker:                                    #E0E0E0; /* name: Darker; */
    --dark-mode-gray-gradient-start:                            #1A1A1A; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --dark-mode-gray-gradient-end:                              #212121; /* name: Gradient End; type: gradientColor; gradientColor: end; */
    --dark-mode-gray-gradient-h:                                linear-gradient( 90deg, var(--dark-mode-gray-gradient-start) 0%, var(--dark-mode-gray-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */
    --dark-mode-gray-gradient-v:                                linear-gradient( 0deg, var(--dark-mode-gray-gradient-end) 0%, var(--dark-mode-gray-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */
    
    --gray-base:                                                var(--dark-mode-gray-base);
    --gray-lighter:                                             var(--dark-mode-gray-lighter);
    --gray-lighter-2:                                           var(--dark-mode-gray-lighter-2);
    --gray-lighter-3:                                           var(--dark-mode-gray-lighter-3);
    --gray-lighter-4:                                           var(--dark-mode-gray-lighter-4);
    --gray-faded:                                               var(--dark-mode-gray-faded);
    --gray-darker:                                              var(--dark-mode-gray-darker);
    --gray-gradient-start:                                      var(--dark-mode-gray-gradient-start);
    --gray-gradient-end:                                        var(--dark-mode-gray-gradient-end);
    --gray-gradient-h:                                          linear-gradient( 90deg, var(--dark-mode-gray-gradient-start) 0%, var(--dark-mode-gray-gradient-end) 100%);
    --gray-gradient-v:                                          linear-gradient( 0deg, var(--dark-mode-gray-gradient-end) 0%, var(--dark-mode-gray-gradient-start) 100%);
 
    /* Section: Dark Mode Primary */
 
    --dark-mode-brand-primary:                                  #065CFE; /* name: Main; color_preview: primary; */
    --dark-mode-brand-primary-lighter:                          #1AA4FF; /* name: Lighter; */
    --dark-mode-brand-primary-lighter-2:                        #1B376A; /* name: Lighter 2; */
    --dark-mode-brand-primary-lighter-3:                        #162C55; /* name: Lighter 3; */
    --dark-mode-brand-primary-lighter-4:                        #12274A; /* name: Lighter 4; */
    --dark-mode-brand-primary-darker:                           #003CB2; /* name: Darker; */
    --dark-mode-brand-primary-gradient-start:                   #003CB2; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --dark-mode-brand-primary-gradient-end:                     #065CFE; /* name: Gradient End; type: gradientColor; gradientColor: end; */
    --dark-mode-brand-primary-gradient-h:                       linear-gradient( 90deg, var(--dark-mode-brand-primary-gradient-start) 0%, var(--dark-mode-brand-primary-gradient-end) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */
    --dark-mode-brand-primary-gradient-v:                       linear-gradient( 0deg, var(--dark-mode-brand-primary-gradient-end) 0%, var(--dark-mode-brand-primary-gradient-start) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */
 
    --brand-primary:                                            var(--dark-mode-brand-primary);
    --brand-primary-lighter:                                    var(--dark-mode-brand-primary-lighter);
    --brand-primary-lighter-2:                                  var(--dark-mode-brand-primary-lighter-2);
    --brand-primary-lighter-3:                                  var(--dark-mode-brand-primary-lighter-3);
    --brand-primary-lighter-4:                                  var(--dark-mode-brand-primary-lighter-4);
    --brand-primary-darker:                                     var(--dark-mode-brand-primary-darker);
    --brand-primary-gradient-start:                             var(--dark-mode-brand-primary-gradient-start);
    --brand-primary-gradient-end:                               var(--dark-mode-brand-primary-gradient-end);
    --brand-primary-gradient-h:                                 linear-gradient( 90deg, var(--dark-mode-brand-primary-gradient-start) 0%, var(--dark-mode-brand-primary-gradient-end) 100%);
    --brand-primary-gradient-v:                                 linear-gradient( 0deg, var(--dark-mode-brand-primary-gradient-end) 0%, var(--dark-mode-brand-primary-gradient-start) 100%);
    
    /* Section: Dark Mode Secondary */
    
    --dark-mode-brand-secondary:                                #083FBF; /* name: Main; color_preview: secondary; */
    --dark-mode-brand-secondary-lighter:                        #667B9E; /* name: Lighter; */
    --dark-mode-brand-secondary-lighter-2:                      #516380; /* name: Lighter 2; */
    --dark-mode-brand-secondary-lighter-3:                      #4F5A6D; /* name: Lighter 3; */
    --dark-mode-brand-secondary-darker:                         #08349B; /* name: Darker; */
    --dark-mode-brand-secondary-gradient-start:                 #08349B; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --dark-mode-brand-secondary-gradient-end:                   #083FBF; /* name: Gradient End; type: gradientColor; gradientColor: end; */

    --brand-secondary:                                          var(--dark-mode-brand-secondary);
    --brand-secondary-lighter:                                  var(--dark-mode-brand-secondary-lighter);
    --brand-secondary-lighter-2:                                var(--dark-mode-brand-secondary-lighter-2);
    --brand-secondary-lighter-3:                                var(--dark-mode-brand-secondary-lighter-3);
    --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:                                     #065CFE; /* name: Main; */
    --dark-mode-brand-info-lighter:                             #7AA8FF; /* name: Lighter; */
    --dark-mode-brand-info-lighter-2:                           #1A4593; /* name: Lighter 2; */
    --dark-mode-brand-info-lighter-3:                           #1A376B; /* name: Lighter 3; */
    --dark-mode-brand-info-lighter-4:                           #142C52; /* name: Lighter 4; */
    --dark-mode-brand-info-darker:                              #003CB2; /* name: Darker; */
    --dark-mode-brand-info-gradient-start:                      #003CB2; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --dark-mode-brand-info-gradient-end:                        #065CFE; /* 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:                                  #1F8034; /* name: Main; */
    --dark-mode-brand-success-lighter:                          #64C46A; /* name: Lighter; */
    --dark-mode-brand-success-lighter-2:                        #304B34; /* name: Lighter 2; */
    --dark-mode-brand-success-lighter-3:                        #2A412E; /* name: Lighter 3; */
    --dark-mode-brand-success-lighter-4:                        #203224; /* name: Lighter 4; */
    --dark-mode-brand-success-darker:                           #19672A; /* name: Darker; */
    --dark-mode-brand-success-gradient-start:                   #19672A; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --dark-mode-brand-success-gradient-end:                     #1F8034; /* 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:                                  #BD4D00; /* name: Main; */
    --dark-mode-brand-warning-lighter:                          #FFB866; /* name: Lighter; */
    --dark-mode-brand-warning-lighter-2:                        #4B3F30; /* name: Lighter 2; */
    --dark-mode-brand-warning-lighter-3:                        #3E3428; /* name: Lighter 3; */
    --dark-mode-brand-warning-lighter-4:                        #322A20; /* name: Lighter 4; */
    --dark-mode-brand-warning-darker:                           #B64425; /* name: Darker; */
    --dark-mode-brand-warning-gradient-start:                   #B64425; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --dark-mode-brand-warning-gradient-end:                     #BD4D00; /* 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:                                   #D5222E; /* name: Main; */
    --dark-mode-brand-danger-lighter:                           #FF6670; /* name: Lighter; */
    --dark-mode-brand-danger-lighter-2:                         #5F3031; /* name: Lighter 2; */
    --dark-mode-brand-danger-lighter-3:                         #4B2528; /* name: Lighter 3; */
    --dark-mode-brand-danger-lighter-4:                         #412023; /* name: Lighter 4; */
    --dark-mode-brand-danger-darker:                            #B6202A; /* name: Darker; */
    --dark-mode-brand-danger-gradient-start:                    #B6202A; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --dark-mode-brand-danger-gradient-end:                      #D5222E; /* 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:                                   #DB0D57; /* name: Main; */
    --dark-mode-brand-saving-lighter:                           #F783AC; /* name: Lighter; */
    --dark-mode-brand-saving-lighter-2:                         #683145; /* name: Lighter 2; */
    --dark-mode-brand-saving-lighter-3:                         #572939; /* name: Lighter 3; */
    --dark-mode-brand-saving-lighter-4:                         #4C2432; /* name: Lighter 4; */
    --dark-mode-brand-saving-darker:                            #B4285A; /* 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-decoration-icons:                               var(--gray-lighter-2); /* name: Icon; */
    --dark-mode-gray-icons:                                     var(--gray-lighter); /* name: Icon; */
    --dark-mode-gray-icons-hover:                               var(--brand-primary-lighter); /* name: Icon Hover; */

    --decoration-icons:                                         var(--dark-mode-decoration-icons);
    --gray-icons:                                               var(--dark-mode-gray-icons);
    --gray-icons-hover:                                         var(--dark-mode-gray-icons-hover);

    /* Section: Dark Mode SVG Illustrations */

    --dark-mode-svg-illustration-gray-1:                        #313335; /* name: Gray Base; type: hiddenlist;*/
    --dark-mode-svg-illustration-gray-2:                        #404245; /* name: Gray Lighter; type: hiddenlist; */
    --dark-mode-svg-illustration-gray-3:                        #62666A; /* name: Gray Lighter 2; type: hiddenlist; */
    --dark-mode-svg-illustration-gray-4:                        #767A7F; /* name: Gray Lighter 3; type: hiddenlist; */
    --dark-mode-svg-illustration-gray-5:                        #808489; /* name: Gray Lighter 4; type: hiddenlist; */
    --dark-mode-svg-illustration-gray-6:                        #8A8E93; /* name: Gray Lighter 5; type: hiddenlist; */
    --dark-mode-svg-illustration-gray-7:                        #909398; /* name: Gray Lighter 6; type: hiddenlist; */
    --dark-mode-svg-illustration-gray-8:                        #9A9DA2; /* name: Gray Lighter 7; type: hiddenlist; */
    --dark-mode-svg-illustration-gray-w:                        #FFFFFF; /* name: White; type: hiddenlist; */
    --dark-mode-svg-illustration-shadow:                        #000000;

    --svg-illustration-gray-1:                                  var(--dark-mode-svg-illustration-gray-1);
    --svg-illustration-gray-2:                                  var(--dark-mode-svg-illustration-gray-2);
    --svg-illustration-gray-3:                                  var(--dark-mode-svg-illustration-gray-3);
    --svg-illustration-gray-4:                                  var(--dark-mode-svg-illustration-gray-4);
    --svg-illustration-gray-5:                                  var(--dark-mode-svg-illustration-gray-5);
    --svg-illustration-gray-6:                                  var(--dark-mode-svg-illustration-gray-6);
    --svg-illustration-gray-7:                                  var(--dark-mode-svg-illustration-gray-7);
    --svg-illustration-gray-8:                                  var(--dark-mode-svg-illustration-gray-8);
    --svg-illustration-gray-w:                                  var(--dark-mode-svg-illustration-gray-w);
    --svg-illustration-shadow:                                  var(--dark-mode-svg-illustration-shadow);

    --dark-mode-svg-illustration-primary-0:                     #074FA9; /* name: Primary Darker ; type: hiddenlist;*/
    --dark-mode-svg-illustration-primary-1:                     #0367E4; /* name: Primary Base ; type: hiddenlist;*/
    --dark-mode-svg-illustration-primary-2:                     #347BE9; /* name: Primary - Lighter; type: hiddenlist; */
    --dark-mode-svg-illustration-primary-3:                     #428BF0; /* name: Primary - Lighter 2; type: hiddenlist; */
    --dark-mode-svg-illustration-primary-4:                     #76A9F1; /* name: Primary - Lighter 3; type: hiddenlist; */

    --svg-illustration-primary-0:                               var(--dark-mode-svg-illustration-primary-0);
    --svg-illustration-primary-1:                               var(--dark-mode-svg-illustration-primary-1);
    --svg-illustration-primary-2:                               var(--dark-mode-svg-illustration-primary-2);
    --svg-illustration-primary-3:                               var(--dark-mode-svg-illustration-primary-3);
    --svg-illustration-primary-4:                               var(--dark-mode-svg-illustration-primary-4);

    --dark-mode-svg-illustration-yellow-1:                      #F9A000; /* name: Yellow - Base; type: hiddenlist; */
    --dark-mode-svg-illustration-yellow-2:                      #FBB900; /* name: Yellow - Lighter; type: hiddenlist; */
    --dark-mode-svg-illustration-yellow-3:                      #FFD251; /* name: Yellow - Lighter 2; type: hiddenlist; */
    --dark-mode-svg-illustration-yellow-4:                      #FBC666; /* name: Yellow - Lighter 3; type: hiddenlist; */
    --dark-mode-svg-illustration-yellow-5:                      #FCDA83; /* name: Yellow - Lighter 4; type: hiddenlist; */

    --svg-illustration-yellow-1:                                var(--dark-mode-svg-illustration-yellow-1);
    --svg-illustration-yellow-2:                                var(--dark-mode-svg-illustration-yellow-2);
    --svg-illustration-yellow-3:                                var(--dark-mode-svg-illustration-yellow-3);
    --svg-illustration-yellow-4:                                var(--dark-mode-svg-illustration-yellow-4);
    --svg-illustration-yellow-5:                                var(--dark-mode-svg-illustration-yellow-5);

    --dark-mode-svg-illustration-green-1:                       #1F5C3A; /* name: Yellow - Base; type: hiddenlist; */
    --dark-mode-svg-illustration-green-2:                       #31854C; /* name: Yellow - Lighter 2; type: hiddenlist; */
    --dark-mode-svg-illustration-green-3:                       #35B65E; /* name: Yellow - Lighter 3; type: hiddenlist; */
    --dark-mode-svg-illustration-green-4:                       #5BD682; /* name: Yellow - Lighter 4; type: hiddenlist; */
    
    --svg-illustration-green-1:                                 var(--dark-mode-svg-illustration-green-1);
    --svg-illustration-green-2:                                 var(--dark-mode-svg-illustration-green-2);
    --svg-illustration-green-3:                                 var(--dark-mode-svg-illustration-green-3);
    --svg-illustration-green-4:                                 var(--dark-mode-svg-illustration-green-4);

    --dark-mode-svg-illustration-line-color:                    rgba(255, 255, 255, 0.24);
    --svg-illustration-line-color:                              var(--dark-mode-svg-illustration-line-color);

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

    --svg-banner-shape-left:                                    var(--dark-mode-svg-banner-shape-left);
    --svg-banner-shape-right:                                   var(--dark-mode-svg-banner-shape-right);

    /* Section: Dark Mode Background */
    
    --dark-mode-body-bg:                                        #121212; /* name: Body; type: hiddenlist; */
    --body-bg:                                                  var(--dark-mode-body-bg);             

    /* END PARSE */ 
}