/*!
 * 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:                               #EFEFF1; /* name: Lighter 4; */
    --gray-faded:                                   #F7F7F8; /* name: Lighter 5; */
    --gray-darker:                                  #17191C; /* name: Darker; */
    --gray-gradient-start:                          #FFFBFA; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --gray-gradient-end:                            #FFEFEB; /* 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:                                #D02D14; /* name: Main; color_preview: primary;*/
    --brand-primary-lighter:                        #FE583E; /* name: Lighter; */
    --brand-primary-lighter-2:                      #FCC3BA; /* name: Lighter 2; */
    --brand-primary-lighter-3:                      #FDD4CE; /* name: Lighter 3; */
    --brand-primary-lighter-4:                      #FEEAE6; /* name: Lighter 4; */
    --brand-primary-darker:                         #972d2d; /* name: Darker; */
    --brand-primary-gradient-start:                 #D02D14; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --brand-primary-gradient-end:                   #FE583E; /* 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:                              #BF2626; /* name: Main; color_preview: secondary; */
    --brand-secondary-lighter:                      #E44343; /* name: Lighter; */
    --brand-secondary-darker:                       #861A0A; /* name: Darker; */
    --brand-secondary-gradient-start:               #861A0A; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --brand-secondary-gradient-end:                 #BF2626; /* 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:                           #009AFF; /* name: Lighter; */
    --brand-info-lighter-2:                         #B3CCFF; /* name: Lighter 2; */
    --brand-info-lighter-3:                         #D6E4FF; /* name: Lighter 3; */
    --brand-info-lighter-4:                         #E0EBFF; /* name: Lighter 4; */
    --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:                                #299341; /* name: Main; */
    --brand-success-lighter:                        #70D786; /* name: Lighter; */
    --brand-success-lighter-2:                      #BFEEC9; /* name: Lighter 2; */
    --brand-success-lighter-3:                      #CFF2D7; /* name: Lighter 3; */
    --brand-success-lighter-4:                      #DFF6E5; /* name: Lighter 4; */
    --brand-success-darker:                         #26873C; /* name: Darker; */
    --brand-success-gradient-start:                 #26873C; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --brand-success-gradient-end:                   #299341; /* 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:                                #E07800; /* name: Main; */
    --brand-warning-lighter:                        #FFB866; /* name: Lighter; */
    --brand-warning-lighter-2:                      #FFDEB8; /* name: Lighter 2; */
    --brand-warning-lighter-3:                      #FFE7CC; /* name: Lighter 3; */
    --brand-warning-lighter-4:                      #FFF1E0; /* name: Lighter 4; */
    --brand-warning-darker:                         #CC6D00; /* name: Darker; */
    --brand-warning-gradient-start:                 #CC6D00; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --brand-warning-gradient-end:                   #E07800; /* 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:                       #F4C3C6; /* 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:                             #FE583E; /* name: Icons Hover; */

    /* Section: SVG Illustrations */

    --svg-illustration-color-0:                     #9D1F1F; /* name: Darker ; type: hiddenlist;*/
    --svg-illustration-color-1:                     #BF2626; /* name: Base ; type: hiddenlist;*/
    --svg-illustration-color-2:                     #EE4930; /* name: Lighter; type: hiddenlist; */
    --svg-illustration-color-3:                     #F49285; /* name: Lighter 2; type: hiddenlist; */
    --svg-illustration-color-4:                     #F8B5AA; /* name: Lighter 3; type: hiddenlist; */
    --svg-illustration-color-5:                     #FACDC7; /* name: Lighter 4; type: hiddenlist; */
    --svg-illustration-color-6:                     #FCDED9; /* name: Lighter 5; type: hiddenlist; */
    --svg-illustration-color-7:                     #ffffff; /* name: Secondary; type: hiddenlist; */
    --svg-illustration-shadow:                      #000000;

    --svg-illustration-line-color:                  rgba(248, 181, 170, 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:                                      #B3B3B3; /* name: Main; */
    --dark-mode-gray-lighter:                                   #8C8C8C; /* name: Lighter; */
    --dark-mode-gray-lighter-2:                                 #666666; /* 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:                                  #D02D14; /* name: Main; color_preview: primary; */
    --dark-mode-brand-primary-lighter:                          #E44343; /* name: Lighter; */
    --dark-mode-brand-primary-lighter-2:                        #5A312B; /* name: Lighter 2; */
    --dark-mode-brand-primary-lighter-3:                        #4C2A24; /* name: Lighter 3; */
    --dark-mode-brand-primary-lighter-4:                        #3E221E; /* name: Lighter 4; */
    --dark-mode-brand-primary-darker:                           #972d2d; /* name: Darker; */
    --dark-mode-brand-primary-gradient-start:                   #D02D14; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --dark-mode-brand-primary-gradient-end:                     #FE583E; /* name: Gradient End; type: gradientColor; gradientColor: end; */
    --dark-mode-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; */
    --dark-mode-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; */

    --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:                                #BF2626; /* name: Main; color_preview: secondary; */
    --dark-mode-brand-secondary-lighter:                        #E44343; /* name: Lighter; */
    --dark-mode-brand-secondary-darker:                         #861A0A; /* name: Darker; */
    --dark-mode-brand-secondary-gradient-start:                 #861A0A; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --dark-mode-brand-secondary-gradient-end:                   #BF2626; /* name: Gradient End; type: gradientColor; gradientColor: end; */
    --dark-mode-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; */
    --dark-mode-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; */

    --brand-secondary:                                          var(--dark-mode-brand-secondary);
    --brand-secondary-lighter:                                  var(--dark-mode-brand-secondary-lighter);
    --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:                                     #1062FE; /* name: Main; */
    --dark-mode-brand-info-lighter:                             #337AFF; /* name: Lighter; */
    --dark-mode-brand-info-lighter-2:                           #162E5A; /* name: Lighter 2; */
    --dark-mode-brand-info-lighter-3:                           #142A52; /* name: Lighter 3; */
    --dark-mode-brand-info-lighter-4:                           #102242; /* name: Lighter 4; */
    --dark-mode-brand-info-darker:                              #0143BE; /* name: Darker; */
    --dark-mode-brand-info-gradient-start:                      #0143BE; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --dark-mode-brand-info-gradient-end:                        #1062FE; /* 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-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:                                  #31AF4E; /* name: Main; */
    --dark-mode-brand-success-lighter:                          #5CD175; /* name: Lighter; */
    --dark-mode-brand-success-lighter-2:                        #304B34; /* name: Lighter 2; */
    --dark-mode-brand-success-lighter-3:                        #2C4531; /* name: Lighter 3; */
    --dark-mode-brand-success-lighter-4:                        #203224; /* name: Lighter 4; */
    --dark-mode-brand-success-darker:                           #247F38; /* name: Darker; */
    --dark-mode-brand-success-gradient-start:                   #247F38; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --dark-mode-brand-success-gradient-end:                     #31AF4E; /* 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:                                  #EB7D00; /* name: Main; */
    --dark-mode-brand-warning-lighter:                          #FFAE52; /* name: Lighter; */
    --dark-mode-brand-warning-lighter-2:                        #44392C; /* 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:                           #CC6D00; /* name: Darker; */
    --dark-mode-brand-warning-gradient-start:                   #CC6D00; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --dark-mode-brand-warning-gradient-end:                     #EB7D00; /* 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:                                   #D92632; /* name: Main; */
    --dark-mode-brand-danger-lighter:                           #E56C74; /* name: Lighter; */
    --dark-mode-brand-danger-lighter-2:                         #4B2529; /* name: Lighter 2; */
    --dark-mode-brand-danger-lighter-3:                         #442224; /* name: Lighter 3; */
    --dark-mode-brand-danger-lighter-4:                         #361B1D; /* name: Lighter 4; */
    --dark-mode-brand-danger-darker:                            #B6202A; /* name: Darker; */
    --dark-mode-brand-danger-gradient-start:                    #DD3C46; /* name: Gradient Start; type: gradientColor; gradientColor: start; */
    --dark-mode-brand-danger-gradient-end:                      #9C1B24; /* 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 UI Icon */

    --dark-mode-gray-icons:                                     #ACAFB9; /* name: Icon; */
    --dark-mode-gray-icons-hover:                               #d14c4c; /* name: Icon Hover; */

    --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:                       #9D1F1F; /* name: Darker ; type: hiddenlist;*/
    --dark-mode-svg-illustration-color-1:                       #BF2626; /* name: Base ; type: hiddenlist;*/
    --dark-mode-svg-illustration-color-2:                       #EE4930; /* name: Lighter; type: hiddenlist; */
    --dark-mode-svg-illustration-color-3:                       #F49285; /* name: Lighter 2; type: hiddenlist; */
    --dark-mode-svg-illustration-color-4:                       #F8B5AA; /* name: Lighter 3; type: hiddenlist; */
    --dark-mode-svg-illustration-color-5:                       #FACDC7; /* name: Lighter 4; type: hiddenlist; */
    --dark-mode-svg-illustration-color-6:                       #FCDED9; /* 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:                          var(--dark-mode-brand-primary);
    --dark-mode-svg-banner-shape-right:                         var(--dark-mode-brand-primary-lighter);

    --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 */ 
}

