/*!
 * 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 { /* Name: General; Index: 2 */
    
    /* Spacing */

    --spacing-0x:                                   0px;                                              
    --spacing-1x:                                   8px;                                              
    --spacing-2x:                                   calc(2 * var(--spacing-1x));                      
    --spacing-3x:                                   calc(3 * var(--spacing-1x));                      
    --spacing-4x:                                   calc(4 * var(--spacing-1x));                      
    --spacing-5x:                                   calc(5 * var(--spacing-1x));                      
    --spacing-6x:                                   calc(6 * var(--spacing-1x));                      
    --spacing-7x:                                   calc(7 * var(--spacing-1x));                      
    --spacing-8x:                                   calc(8 * var(--spacing-1x));                      
    --spacing-9x:                                   calc(9 * var(--spacing-1x));                      
    --spacing-10x:                                  calc(10 * var(--spacing-1x));                     
    --spacing-11x:                                  calc(11 * var(--spacing-1x));                     
    --spacing-12x:                                  calc(12 * var(--spacing-1x));                     
    --spacing-13x:                                  calc(13 * var(--spacing-1x));                     
    --spacing-14x:                                  calc(14 * var(--spacing-1x));                     
    --spacing-15x:                                  calc(15 * var(--spacing-1x));                     

     /* Section: UI Border Radius;*/

     --border-radius-none:                          0px; /* name: None; group: Border Radius; type: size; type:hidden; */
     --border-radius-xs:                            3px; /* name: Extra Small; group: Border Radius; type: size; append: px; */
     --border-radius-sm:                            4px; /* name: Small; group: Border Radius; type: size; append: px; */
     --border-radius-base:                          6px; /* name: Base; group: Border Radius; type: size; append: px; */
     --border-radius-lg:                            8px; /* name: Large; group: Border Radius; type: size; append: px; */
     --border-radius-xlg:                           12px; /* name: Extra Large; group: Border Radius; type: size; append: px; */
     --border-width-base:                           1px;

    /* Section: UI Shadow;*/

    --box-shadow-none:                              none; /* name: None; group: Box Shadow; type:hidden; */
    --box-shadow-xs:                                0 1px 1px rgba(0,0,0,.05); /* name: Extra Small; group: Box Shadow; */
    --box-shadow-sm:                                0px 0px 1px rgba(0, 0, 0, 0.04), 0px 2px 16px rgba(0, 0, 0, 0.08); /* name: Small; group: Box Shadow; */
    --box-shadow-base:                              0px 0px 1px rgba(0, 0, 0, 0.04), 0px 2px 24px rgba(0, 0, 0, 0.08); /* name: Base; group: Box Shadow; */
    --box-shadow-lg:                                0px 0px 1px rgba(0, 0, 0, 0.04), 0px 8px 40px rgba(0, 0, 0, 0.08); /* name: Large; group: Box Shadow; */
    --box-shadow-xlg:                               0px 0px 1px rgba(0, 0, 0, 0.04), 0px 8px 56px rgba(0, 0, 0, 0.08); /* name: Extra Large; group: Box Shadow; */

    /* Section: UI Elements Height */

    --ui-height-xs:                                 30px; /* name: Extra Small; group: UI Height; type: size; append: px; */
    --ui-height-sm:                                 36px; /* name: Small; group: UI Height; type: size; append: px; */
    --ui-height-base:                               44px; /* name: Base; group: UI Height; type: size; append: px; */
    --ui-height-lg:                                 56px; /* name: Large; group: UI Heighte; type: size; append: px; */
    --ui-height-xlg:                                64px; /* name: Extra Large; group: UI Height; type: size; append: px; */
    
    /* UI Padding */

    --ui-padding-base-v:                            var(--spacing-1x);
    --ui-padding-base-h:                            var(--spacing-2x);
    --ui-padding-xs-v:                              2px;
    --ui-padding-xs-h:                              var(--spacing-1x);
    --ui-padding-sm-v:                              4px;
    --ui-padding-sm-h:                              var(--spacing-2x);
    --ui-padding-lg-v:                              var(--spacing-1x);
    --ui-padding-lg-h:                              var(--spacing-3x);
    --ui-padding-xlg-v:                             var(--spacing-1x);
    --ui-padding-xlg-h:                             var(--spacing-4x);

    /* UI Block */

    --ui-block-bg:                                  #fff;
    --ui-block-overlay-bg:                          rgba(255,255,255, .78);
    --ui-block-overlay-bg-2:                        #fff;
    --ui-block-bg-form:                             var(--ui-block-bg);
    --ui-block-border-color:                        transparent;                                    
    --ui-block-border-radius:                       var(--border-radius-lg);
    --ui-block-border-radius-lg:                    var(--border-radius-xlg);
    --ui-block-shadow:                              var(--box-shadow-base);
    --ui-block-shadow-lg:                           var(--box-shadow-lg);
    --ui-block-shadow-xlg:                          var(--box-shadow-xlg);
    --ui-block-border:                              none;
    --ui-block-header-height:                       56px;
    --ui-block-header-bg:                           transparent;
    --ui-block-secondary-divider-border-color:      hsla(0, 0%, 100%, 12%);
    --ui-block-divider-color:                       var(--gray-lighter-4);
    --ui-block-divider-border:                      1px solid var(--ui-block-divider-color);

    /* Links - Blocks (Tables, List Groups) */

    --ui-block-link-hover-bg:                       var(--brand-primary-lighter-4);
    --ui-block-link-active-bg:                      var(--brand-primary-lighter-4);
    --ui-block-link-disabled-color:                 var(--text-lighter-color);
    --ui-block-overlay-shadow:                      var(--box-shadow-lg);

    /* Links - horizontal navigations (Sidebars, Dropdowns, Vertical Navigation) */

    --ui-nav-link-bg:                               transparent;
    --ui-nav-link-border-radius:                    var(--border-radius-sm);
    --ui-nav-link-hover-bg:                         transparent;
    --ui-nav-link-active-bg:                        var(--brand-primary-lighter-4);
    --dropdown-link-disabled-color:                 #ACB0B9;
    --ui-nav-link-icon-size:                        18px;
    --ui-nav-link-icon-size-sm:                     12px;
    --ui-nav-link-icon-spacing:                     10px;
    --ui-nav-link-icon-spacing-lg:                  16px;
    --ui-nav-h-link-padding-h:                      var(--spacing-2x); 
    --ui-nav-v-link-padding-v:                      6px; 
    --ui-nav-v-link-padding-h:                      0px; 
    --ui-nav-v-link-hover-padding-h:                12px;   
    --ui-nav-v-link-active-padding-h:               12px; 

    /* UI Block - Spacing */

    --ui-block-padding-xs:                          var(--spacing-1x);
    --ui-block-padding-xs-v:                        calc(var(--spacing-1x) * 0.5);  
    --ui-block-padding-sm:                          var(--spacing-2x);
    --ui-block-padding-sm-v:                        calc(var(--spacing-1x) * 1.5);  
    --ui-block-padding-base:                        var(--spacing-3x);
    --ui-block-padding-base-v:                      calc(var(--spacing-1x) * 2.5);
    --ui-block-padding-lg:                          var(--spacing-4x);
    --ui-block-padding-lg-v:                        var(--spacing-3x);  
    --ui-block-padding-xlg:                         var(--spacing-6x);
    --ui-block-padding-xlg-v:                       var(--spacing-5x);
    
    --ui-block-spacing-xxs:                         calc(var(--spacing-1x) / 2);
    --ui-block-spacing-xs:                          var(--spacing-1x);
    --ui-block-spacing-sm:                          calc(var(--spacing-1x) * 1.5);
    --ui-block-spacing-base:                        var(--spacing-2x);
    --ui-block-spacing-lg:                          var(--spacing-3x);
    --ui-block-spacing-xlg:                         var(--spacing-4x);
    --ui-block-spacing-xxlg:                        var(--spacing-5x);
    --ui-block-spacing-xxxlg:                       var(--spacing-6x);
    
    /* Section: UI State;*/

    --state-default-bg:                             var(--gray-lighter-4); /* name: Primary - Background; type: select-colors */
    --state-default-bg-hover:                       var(--gray-lighter-3); /* name: Primary - Background Hover; type: select-colors */
    --state-default-text:                           var(--gray-base); /* name: Primary - Font Color; type: select-colors */
    --state-default-text-hover:                     var(--gray-darker); /* name: Primary - Font Color Hover; type: select-colors */
    --state-default-border:                         var(--gray-lighter-3); /* name: Primary - Border Color; type: select-colors */
    --state-default-border-active:                  var(--gray-lighter-2); /* name: Primary - Border Color Hover; type: select-colors */
    --state-default-divider:                        var(--gray-lighter-3); /* name: Primary - Divider Color; type: select-colors */

    --state-primary-bg:                             var(--brand-primary); /* name: Primary - Background; type: select-colors */
    --state-primary-bg-hover:                       var(--brand-primary-darker); /* name: Primary - Background Hover; type: select-colors */
    --state-primary-text:                           var(--text-white-color); /* name: Primary - Font Color; type: select-colors */
    --state-primary-text-hover:                     var(--text-white-color); /* name: Primary - Font Color Hover; type: select-colors */
    --state-primary-border:                         var(--brand-primary-darker); /* name: Primary - Border Color; type: select-colors */
    --state-primary-border-hover:                   var(--brand-primary-darker); /* name: Primary - Border Color Hover; type: select-colors */
    --state-primary-divider:                        var(--brand-lighter); /* name: Primary - Divider Color; type: select-colors */

    --state-primary-faded-bg:                       var(--brand-primary-lighter-3); /* name: Primary Faded - Background; type: select-colors */
    --state-primary-faded-bg-hover:                 var(--brand-primary-lighter-2); /* name: Primary Faded - Background Hover; type: select-colors */
    --state-primary-faded-text:                     var(--brand-primary); /* name: Primary Faded - Font Color; type: select-colors */
    --state-primary-faded-text-hover:               var(--brand-primary-darker); /* name: Primary Faded - Font Color Hover; type: select-colors */
    --state-primary-faded-border:                   var(--brand-primary-lighter-2); /* name: Primary Faded - Border Color; type: select-colors */
    --state-primary-faded-border-active:            var(--brand-primary); /* name: Primary Faded - Border Active Color; type: select-colors */
    --state-primary-faded-divider:                  var(--brand-primary-lighter-2); /* name: Primary Faded - Divider Color; type: select-colors */

    --state-info-bg:                                var(--brand-info-lighter-3); /* name: Info - Background; type: select-colors */
    --state-info-bg-hover:                          var(--brand-info-lighter-4); /* name: Info - Background Hover; type: select-colors */
    --state-info-text:                              var(--brand-info); /* name: Info - Font Color; type: select-colors */
    --state-info-text-hover:                        var(--brand-info-darker); /* name: Info - Font Color Hover; type: select-colors */
    --state-info-border:                            var(--brand-info-lighter-2); /* name: Info - Border Color; type: select-colors */
    --state-info-border-active:                     var(--brand-info); /* name: Info - Border Active Color; type: select-colors */
    --state-info-divider:                           var(--brand-info-lighter-2); /* name: Info - Divider Color; type: select-colors */

    --state-success-bg:                             var(--brand-success-lighter-3); /* name: Success - Background; type: select-colors */
    --state-success-bg-hover:                       var(--brand-success-lighter-4); /* name: Success - Background Hover; type: select-colors */
    --state-success-text:                           var(--brand-success); /* name: Success - Font Color; type: select-colors */
    --state-success-text-hover:                     var(--brand-success-darker); /* name: Success - Font Color Hover; type: select-colors */
    --state-success-border:                         var(--brand-success-lighter-2); /* name: Success - Border Color; type: select-colors */
    --state-success-border-active:                  var(--brand-success); /* name: Success - Border Active Color; type: select-colors */
    --state-success-divider:                        var(--brand-success-lighter-2); /* name: Success - Divider Color; type: select-colors */

    --state-warning-bg:                             var(--brand-warning-lighter-3); /* name: Warning - Background; type: select-colors */
    --state-warning-bg-hover:                       var(--brand-warning-lighter-4); /* name: Warning - Background Hover; type: select-colors */
    --state-warning-text:                           var(--brand-warning); /* name: Warning - Font Color; type: select-colors */
    --state-warning-text-hover:                     var(--brand-warning-darker); /* name: Warning - Font Color Hover; type: select-colors */
    --state-warning-border:                         var(--brand-warning-lighter-2); /* name: Warning - Border Color; type: select-colors */
    --state-warning-border-active:                  var(--brand-warning); /* name: Warning - Border Active Color; type: select-colors */
    --state-warning-divider:                        var(--brand-warning-lighter-2); /* name: Warning - Divider Color; type: select-colors */

    --state-danger-bg:                              var(--brand-danger-lighter-3); /* name: Danger - Background; type: select-colors */
    --state-danger-bg-hover:                        var(--brand-danger-lighter-4); /* name: Danger - Background Hover; type: select-colors */
    --state-danger-text:                            var(--brand-danger); /* name: Danger - Font Color; type: select-colors */
    --state-danger-text-hover:                      var(--brand-danger-darker); /* name: Danger - Font Color Hover; type: select-colors */
    --state-danger-border:                          var(--brand-danger-lighter-2); /* name: Danger - Border Color; type: select-colors */
    --state-danger-border-active:                   var(--brand-danger); /* name: Danger - Border Active Color; type: select-colors */
    --state-danger-divider:                         var(--brand-danger-lighter-2); /* name: Danger - Divider Color; type: select-colors */

    --state-saving-bg:                              var(--brand-saving-lighter-3); /* name: Saving - Background; type: select-colors */
    --state-saving-bg-hover:                        var(--brand-saving-lighter-4); /* name: Saving - Background Hover; type: select-colors */
    --state-saving-text:                            var(--brand-saving); /* name: Saving - Font Color; type: select-colors */
    --state-saving-text-hover:                      var(--brand-saving-darker); /* name: Saving - Font Color Hover; type: select-colors */
    --state-saving-border:                          var(--brand-saving-lighter-2); /* name: Saving - Border Color; type: select-colors */
    --state-saving-border-active:                   var(--brand-saving); /* name: Saving - Border Active Color; type: select-colors */
    --state-saving-divider:                         var(--brand-saving-lighter-2); /* name: Saving - Divider Color; type: select-colors */


    /* Section: Labels */

    --label-color:                 				    var(--text-white-color);
    --label-link-hover-color:      				    var(--text-white-color);
    --label-default-bg:            				    var(--state-default-bg); /* name: Label Default - Background; type: select-colors;*/
    --label-default-color:         				    var(--state-default-text); /* name: Label Default - Color; type: select-colors;*/
    --label-primary-bg:            				    var(--state-primary-bg); /* name: Label Primary - Background; type: select-colors;*/
    --label-primary-color:         				    var(--text-white-color); /* name: Label Primary - Color; type: select-colors;*/
    --label-primary-faded-bg:            		    var(--state-primary-faded-bg);
    --label-primary-faded-color:         		    var(--state-primary-faded-text);
    --label-secondary-bg:            				var(--brand-secondary); /* name: Label Secondary - Background; type: select-colors;*/
    --label-secondary-color:         			    var(--text-white-color); /* name: Label Secondary - Color; type: select-colors;*/
    --label-success-bg:            				    var(--state-success-bg); /* name: Label Success - Background; type: select-colors;*/
    --label-success-color:         				    var(--state-success-text); /* name: Label Success - Color; type: select-colors;*/
    --label-info-bg:               				    var(--state-info-bg); /* name: Label Info - Background; type: select-colors;*/
    --label-info-color:            				    var(--state-info-text);   /* name: Label Info - Color; type: select-colors;*/
    --label-warning-bg:            				    var(--state-warning-bg); /* name: Label Warning - Background; type: select-colors;*/
    --label-warning-color:         				    var(--state-warning-text); /* name: Label Warning - Color; type: select-colors;*/
    --label-danger-bg:            				    var(--state-danger-bg); /* name: Label Danger - Background; type: select-colors;*/
    --label-danger-color:         				    var(--state-danger-text); /* name: Label Danger - Color; type: select-colors;*/
    --label-purple-bg:            				    #b3a3de; /* name: Label Purple - Background; type: select-colors;*/
    --label-purple-color:         				    var(--text-white-color); /* name: Label Purple - Color; type: select-colors;*/
    --label-savings-bg:            				    var(--state-saving-bg); /* name: Label Savings - Background; type: select-colors;*/
    --label-savings-color:         				    var(--state-saving-text); /* name: Label Savings - Color; type: select-colors;*/
    --label-savings-border:                         #FCCFDF; /* name: Label Savings - Border Color; type: select-colors;*/


    --label-text-transform:                         uppercase;
    --label-margin-bottom:                          5px;
    --tickets-label-color:                          #fff;
    
    --label-xxs-font-size:                          11px;
    --label-xs-font-size:                           var(--font-size-xs);
    --label-sm-font-size:                           var(--font-size-xs);
    --label-font-size:                              var(--font-size-sm);
    --label-lg-font-size:                           var(--font-size-base);

    --label-xxs-line-height:                        var(--line-height-xxs);
    --label-xs-line-height:                         var(--line-height-xs);
    --label-sm-line-height:                         var(--line-height-xs);
    --label-line-height:                            var(--line-height-sm);
    --label-lg-line-height:                         var(--line-height-base);

    --label-xxs-padding:                            1px 6px;
    --label-xs-padding:                             1px 6px;
    --label-sm-padding:                             3px 6px;
    --label-padding:                                4px 6px;
    --label-lg-padding:                             6px 8px;
    
    --label-xxs-border-radius:                      var(--border-radius-xs);
    --label-xs-border-radius:                       var(--border-radius-xs);
    --label-sm-border-radius:                       var(--border-radius-sm);
    --label-border-radius:                          var(--border-radius-sm);
    --label-lg-border-radius:                       var(--border-radius-base);
    
    --label-icon-size:                              10px;

    /* WHMCS Status Colors */

    --status-pending-transfer:                      var(--brand-warning-darker);
    --status-pending:                               var(--brand-warning);
    --status-active:                                var(--state-success-text);
    --status-suspended:                             var(--brand-danger-lighter);
    --status-customer-reply:                        var(--brand-warning-darker);
    --status-fraud:                                 var(--gray-darker);
    --status-answered:                              #7b4f9d;
    --status-expired:                               #004258;
    --status-grace:                                 var(--brand-warning-darker);
    --status-terminated:                            var(--gray-lighter);
    --status-onhold:                                var(--state-info-text);
    --status-inprogress:                            var(--brand-danger-lighter);
    --status-closed:                                var(--state-default-text);
    --status-paid:                                  var(--state-success-text);
    --status-unpaid:                                var(--state-danger-text);
    --status-cancelled:                             var(--gray-lighter-2);
    --status-collections:                           #2c3e50;
    --status-refunded:                              var(--brand-warning);
    --status-payment-pending:                       var(--brand-info);
    --status-accepted:                              var(--brand-success);
    --status-delivered:                             var(--brand-warning);
    --status-lost:                                  var(--gray-darker);
    --status-default:                               var(--gray-base);
    --status-warning:                               var(--state-warning-text);

    --status-type-operator:                         var(--label-info-bg);
    --status-type-operator-text-color:              var(--label-info-color);
    --status-type-owner:                            var(--label-success-bg);
    --status-type-owner-text-color:                 var(--label-success-color);
    --status-type-authorizeduser:                   var(--label-default-bg);
    --status-type-authorizeduser-text-color:        var(--label-default-color);
    --status-type-registereduser:                   var(--label-default-bg);
    --status-type-registereduser-text-color:        var(--label-default-color);
    --status-type-guest:                            var(--label-default-bg);
    --status-type-guest-text-color:                 var(--label-default-color);
    --status-type-subacc:                           var(--label-default-bg);
    --status-type-subacc-text-color:               var(--label-default-color);

    /* Transition */

    --transition-base:                              .24s ease;
    --transition-fade:                              opacity .15s linear;
    --transition-collapse:                          height .35s ease;
   
    /* zindex */

    --zindex-navbar:                                1000;
    --zindex-dropdown:                              1000;
    --zindex-popover:                               1001;
    --zindex-tooltip:                               1001;
    --zindex-sticky:                                1020;
    --zindex-navbar-fixed:                          1030;
    --zindex-fixed:                                 1030;
    --zindex-modal-background:                      1040;
    --zindex-modal-backdrop:                        1040;
    --zindex-modal:                                 1050;
    --zindex-popover:                               1060;
    --zindex-tooltip:                               1070;

    /* Caret */

    --caret-width-base:                             4px;
    --caret-width-large:                            5px;
    --caret-width:                                  .3em;
    --caret-vertical-align:                         var(--caret-width) * .85;
    --caret-spacing:                                var(--caret-width) * .85;

    /* Other */

    --ui-icon-color:                                var(--gray-icons);
    --ui-icon-size-base:                            18px;
    --ui-icon-size-small:                           12px;

    --scrollbar-width:                              6px;
    --scrollbar-track-bg:                           var(--gray-lighter-4);
    --scrollbar-thumb-bg:                           var(--gray-lighter-3);
    --scrollbar-thumb-hover-bg:                     var(--gray-lighter-2);

    --scrollbar-secondary-track-bg:                 rgba(255,255,255, 0.1);
    --scrollbar-secondary-thumb-bg:                 rgba(255,255,255, 0.32);
    --scrollbar-secondary-thumb-hover-bg:           rgba(255,255,255, 0.48);    

    /* Section: UI Max Width */

    --max-width-xs:                                 380px; /* Name: Extra Small; group: Max Width; type: size; append: px; */
    --max-width-sm:                                 548px; /* Name: Small; group: Max Width; type: size; append: px; */
    --max-width-md:                                 768px; /* Name: Medium; group: Max Width; type: size; append: px; */
    --max-width-lg:                                 928px; /* Name: Large; group: Max Width; type: size; append: px; */

    --container-xl-max-width:                       1288px;
    --container-lg-max-width:                       960px;
    --container-md-max-width:                       720px;
    --container-sm-max-width:                       540px;

    --ui-gutter-base:                               var(--spacing-3x);
    --ui-gutter-sm:                                 var(--spacing-2x);
    --ui-gutter-lg:                                 var(--spacing-4x);
    --ui-gutter-xlg:                                var(--spacing-5x);
}

@media (max-width: 767px) {
    :root {
        --ui-gutter-base:                           var(--spacing-2x);
        --ui-gutter-sm:                             var(--spacing-1x);
        --ui-gutter-lg:                             var(--spacing-3x);
        --ui-gutter-xlg:                            var(--spacing-4x);

        --ui-block-spacing-xxs:                     calc(var(--spacing-1x) / 4);
        --ui-block-spacing-xs:                      calc(var(--spacing-1x) / 2);
        --ui-block-spacing-sm:                      var(--spacing-1x);
        --ui-block-spacing-base:                    calc(var(--spacing-1x) * 1.5);
        --ui-block-spacing-lg:                      calc(var(--spacing-1x) * 2.5);
        --ui-block-spacing-xlg:                     var(--spacing-3x);
        --ui-block-spacing-xxlg:                    var(--spacing-4x);
        --ui-block-spacing-xxxlg:                   var(--spacing-5x);

        --ui-block-padding-xs:                      calc(var(--spacing-1x) * 0.5);
        --ui-block-padding-xs-v:                    calc(var(--spacing-1x) * 0.25);
        --ui-block-padding-sm:                      calc(var(--spacing-1x) * 1.5);
        --ui-block-padding-sm-v:                    var(--spacing-1x);  
        --ui-block-padding-base:                    calc(var(--spacing-1x) * 2.5);
        --ui-block-padding-base-v:                  var(--spacing-2x);
        --ui-block-padding-lg:                      var(--spacing-3x);
        --ui-block-padding-lg-v:                    calc(var(--spacing-1x) * 2.5);  
        --ui-block-padding-xlg:                     var(--spacing-5x);
        --ui-block-padding-xlg-v:                   var(--spacing-4x);    
    }
}

@-moz-document url-prefix() {
    :root{
        --ui-block-overlay-bg:                      rgba(255,255,255, .87);
    }
}
.lagom-dark-mode{

    /* Section : Dark Mode Colors */

    --ui-block-bg:                                  #242424;


    --ui-block-link-hover-bg:                       var(--gray-faded);
    --ui-block-link-active-bg:                      var(--gray-faded);
    --ui-block-divider-color:                       #2E2E2E;

    --dropdown-link-disabled-color:                 #666666;

    --status-answered:                              #9871B7;
    --status-expired:                               #3FA1B8;
    --status-onhold:                                var(--brand-info-ligher);
    --status-collections:                           #6185A8;
    --status-payment-pending:                       var(--brand-info-lighter);
    --status-pending:                               var(--brand-warning-lighter);

    --box-shadow-base:                              0px 0px 1px rgba(0, 0, 0, 0.16), 0px 2px 24px rgba(0, 0, 0, 0.24);
    --box-shadow-lg:                                0px 0px 1px rgba(0, 0, 0, 0.16), 0px 8px 40px rgba(0, 0, 0, 0.24);
    --box-shadow-xlg:                               0px 0px 1px rgba(0, 0, 0, 0.16), 0px 8px 56px rgba(0, 0, 0, 0.24);

    --state-default-bg:                       var(--dark-mode-gray-lighter-4); 
    --state-default-bg-hover:                 var(--dark-mode-gray-lighter-3);
    --state-default-text:                     var(--dark-mode-gray-base);
    --state-default-text-hover:               var(--dark-mode-color-white);
    --state-default-border:                   var(--dark-mode-gray-lighter-3);
    --state-default-border-active:            var(--dark-mode-gray-lighter-2);
    --state-default-divider:                  var(--dark-mode-gray-lighter-3);

    --state-primary-bg:                       var(--dark-mode-brand-primary);
    --state-primary-bg-hover:                 var(--dark-mode-brand-primary-darker);
    --state-primary-text:                     var(--dark-mode-color-white);
    --state-primary-text-hover:               var(--dark-mode-color-white);
    --state-primary-border:                   var(--dark-mode-brand-lighter);
    --state-primary-border-hover:             var(--dark-mode-brand-lighter);
    --state-primary-divider:                  var(--dark-mode-brand-lighter);

    --state-info-bg:                          var(--dark-mode-brand-info-lighter-3);
    --state-info-bg-hover:                    var(--dark-mode-brand-info-lighter-4);
    --state-info-text:                        var(--dark-mode-brand-info-lighter);
    --state-info-text-hover:                  var(--dark-mode-brand-info-lighter);
    --state-info-border:                      var(--dark-mode-brand-info-lighter-2);
    --state-info-border-active:               var(--dark-mode-brand-info-lighter);
    --state-info-divider:                     var(--dark-mode-brand-info-lighter-2);

    --state-primary-faded-bg:                 var(--dark-mode-brand-primary-lighter-3);
    --state-primary-faded-bg-hover:           var(--dark-mode-brand-primary-lighter-2);
    --state-primary-faded-text:               var(--dark-mode-brand-primary-lighter);
    --state-primary-faded-text-hover:         var(--dark-mode-brand-primary-lighter);
    --state-primary-faded-border:             var(--dark-mode-brand-primary-lighter-2);
    --state-primary-faded-border-active:      var(--dark-mode-brand-primary-lighter);
    --state-primary-faded-divider:            var(--dark-mode-brand-primary-lighter-2);

    --state-success-bg:                       var(--dark-mode-brand-success-lighter-3);
    --state-success-bg-hover:                 var(--dark-mode-brand-success-lighter-4);
    --state-success-text:                     var(--dark-mode-brand-success-lighter);
    --state-success-text-hover:               var(--dark-mode-brand-success-lighter);
    --state-success-border:                   var(--dark-mode-brand-success-lighter-2);
    --state-success-border-active:            var(--dark-mode-brand-success-lighter);
    --state-success-divider:                  var(--dark-mode-brand-success-lighter-2);

    --state-warning-bg:                       var(--dark-mode-brand-warning-lighter-3);
    --state-warning-bg-hover:                 var(--dark-mode-brand-warning-lighter-4);
    --state-warning-text:                     var(--dark-mode-brand-warning-lighter);
    --state-warning-text-hover:               var(--dark-mode-brand-warning-lighter);
    --state-warning-border:                   var(--dark-mode-brand-warning-lighter-2);
    --state-warning-border-active:            var(--dark-mode-brand-warning-lighter);
    --state-warning-divider:                  var(--dark-mode-brand-warning-lighter-2);

    --state-danger-bg:                        var(--dark-mode-brand-danger-lighter-3);
    --state-danger-bg-hover:                  var(--dark-mode-brand-danger-lighter-4);
    --state-danger-text:                      var(--dark-mode-brand-danger-lighter);
    --state-danger-text-hover:                var(--dark-mode-brand-danger-lighter);
    --state-danger-border:                    var(--dark-mode-brand-danger-lighter-2);
    --state-danger-border-active:             var(--dark-mode-brand-danger-lighter);
    --state-danger-divider:                   var(--dark-mode-brand-danger-lighter-2);

    --state-saving-bg:                        var(--dark-mode-brand-saving-lighter-3);
    --state-saving-bg-hover:                  var(--dark-mode-brand-saving-lighter-4);
    --state-saving-text:                      var(--dark-mode-brand-saving-lighter);
    --state-saving-text-hover:                var(--dark-mode-brand-saving-lighter);
    --state-saving-border:                    var(--dark-mode-brand-saving-lighter-2);
    --state-saving-border-active:             var(--dark-mode-brand-saving-lighter);
    --state-saving-divider:                   var(--dark-mode-brand-saving-lighter-2);



}