/*!
 * 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:                          #FAFDFF; /* 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:                                #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-end) 0%, var(--brand-primary-gradient-start) 100%); /* name: Gradient Horizontal; type:hidden; gradient:true; gradientType: horizontal; */
    --brand-primary-gradient-v:                     linear-gradient( 180deg, var(--brand-primary-gradient-start) 0%, var(--brand-primary-gradient-end) 100%); /* name: Gradient Vertical; type:hidden; gradient:true; gradientType: vertical; */

    /* Section: Secondary */

    --brand-secondary:                              #0944CE; /* 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:                       #072A7E; /* name: Darker; */
    --brand-secondary-gradient-start:               #072A7E; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --brand-secondary-gradient-end:                 #0944CE; /* name: Gradient End; type: gradientColor; gradientColor: end; */
    --brand-secondary-gradient-h:                   linear-gradient( 270deg, 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:                    #0158FE; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --brand-info-gradient-end:                      #003CB2; /* 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:                 #1E7B32; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --brand-success-gradient-end:                   #19672A; /* 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:                        #FE8D0B; /* 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:                 #B84B00; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --brand-warning-gradient-end:                   #B64425; /* 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:                  #CA202C; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --brand-danger-gradient-end:                    #B6202A; /* 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-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-illustration-line-color:                 rgba(118, 200, 254, 0.24); 

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

    /* Section: Background */

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

}

.lagom-dark-mode{

    /* Section: Dark Mode Gray; */

    --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:                            #07203D3D; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --dark-mode-gray-gradient-end:                              #07203D; /* 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:                                #0944CE; /* 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:                         #072A7E; /* name: Darker; */
    --dark-mode-brand-secondary-gradient-start:                 #072A7E; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --dark-mode-brand-secondary-gradient-end:                   #0944CE; /* 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:                          #49CA52; /* 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:                          #FE8D0B; /* 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-color-0:                       #0250E3; /* name: Darker ; type: hiddenlist;*/
    --dark-mode-svg-illustration-color-1:                       #1062fe; /* name: Base ; type: hiddenlist;*/
    --dark-mode-svg-illustration-color-2:                       #009AFF; /* name: Lighter; type: hiddenlist; */
    --dark-mode-svg-illustration-color-3:                       #76c8fe; /* name: Lighter 2; type: hiddenlist; */
    --dark-mode-svg-illustration-color-4:                       #8fd2fe; /* name: Lighter 3; type: hiddenlist; */
    --dark-mode-svg-illustration-color-5:                       #a9dcff; /* name: Lighter 4; type: hiddenlist; */
    --dark-mode-svg-illustration-color-6:                       #c2e6ff; /* name: Lighter 5; type: hiddenlist; */
    --dark-mode-svg-illustration-color-7:                       #ffffff; /* name: Secondary;  type: hiddenlist;*/
    --dark-mode-svg-illustration-shadow:                        #000000;
    
    --dark-mode-svg-banner-shape-left:                          #031F65;
    --dark-mode-svg-banner-shape-right:                         #011854;

    --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:                                        #121212; /* name: Body; type: hiddenlist; */
    --body-bg:                                                  var(--dark-mode-body-bg);             

    /* END PARSE */ 
}
