:root {
    --white:    #FFFFFF;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --black:    #000;
    
    --text-color: #333333;
    --text-muted: rgba(51, 51, 51, 0.5);
    --text-muted-2: rgba(51, 51, 51, 0.7);
    --text-muted-dm: rgba(255, 255, 255, 0.5);
    --text-muted-dm-2: rgba(255, 255, 255, 0.7);
    
    --red-color:  #9b111e;
    --red-color-rgb: 155, 17, 30;
    --red-color-light: #c91627;

    --blue-color: #235789;
    --blue-color-rgb: 61, 80, 255;

    --indigo-color: #111E9B;
    --indigo-color-rgb: 17, 30, 155;
    
    --purple-color: #49119B;
    --purple-color-rgb: 73, 17, 155;

    --pink-color:   #F6A9D6;
    --pink-color-rgb: 246, 169, 214;

    --orange-color: #F4A24D;
    --orange-color-rgb: 244, 162, 77;

    --yellow-color: #ffa319;
    --yellow-color-rgb: 255, 163, 25;

    --green-color:  #639020;
    --green-color-rgb: 99, 144, 32;
    
    --teal-color:   #119B8E;
    --teal-color-rgb: 17, 155, 142;
    
    --cyan-color:   #2E9FAC;
    --cyan-color-rgb: 46, 159, 172;

    --bs-blue:      var(--blue-color);
    --bs-indigo:    var(--indigo-color);
    --bs-purple:    var(--purple-color);
    --bs-pink:      var(--pink-color);
    --bs-red:       var(--red-color);
    --bs-orange:    var(--orange-color);
    --bs-yellow:    var(--yellow-color);
    --bs-green:     var(--green-color);
    --bs-teal:      var(--teal-color);
    --bs-cyan:      var(--cyan-color);

    --bs-white: var(--white);

    --bs-gray: var(--gray-600);
    --bs-gray-light: var(--gray-400);
    --bs-gray-dark: var(--gray-800);

    --bs-primary: var(--red-color);
    --bs-primary-hover: var(--red-color-light);
    --bs-secondary: var(--gray-800);
    --bs-success: var(--bs-green);
    --bs-info: var(--bs-blue);
    --bs-warning: var(--bs-yellow);
    --bs-danger: var(--bs-red);
    --bs-light: var(--gray-100);
    --bs-dark: var(--gray-800);
    --bs-black: var(--black);

    --bs-gradient: linear-gradient(135deg, var(--red-color), var(--red-color-light));

    --lm-base-text-color: var(--text-color);
    --dm-base-text-color: var(--white);
    --lm-sidebar-text-color: #380b0b;
    --dm-sidebar-text-color: #ebebeb;

    --lm-body-backgroud-color: #f6f6f6;
    --lm-body-backgroud-gradient: linear-gradient(315deg, #e9e9e9 0%, #f6f6f6 100%);
    --dm-body-backgroud-color: #0b0f14;
    --dm-body-backgroud-gradient: linear-gradient(315deg, #0b0f14 0%, #0e161e 100%);

    --border-radius: .25rem;
    --btn-border-radius: 3px;

    --sidebar-width-sm-and-down: 75%;
    --sidebar-width-md-and-down: 60%;
    --sidebar-width-lg: 22rem;
    --sidebar-width-xl: 22rem;
    --sidebar-width-xxl: 22rem;

    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Roboto', sans-serif;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* BTN */
    --btn-padding: 0.375rem 0.75rem;
    --btn-base-font-size: 1rem;
    --btn-disabled-opacity: 0.5;

    /* General BTN Styles */
    --btn-lm-background: transparent;
    --btn-dm-background: transparent;
    --btn-lm-background-hover: var(--gray-200);
    --btn-dm-background-hover: rgb(62 62 62 / 50%);

    --btn-lm-text-color: var(--lm-base-text-color);
    --btn-lm-text-color-hover: var(--lm-base-text-color);
    --btn-dm-text-color: var(--dm-base-text-color);
    --btn-dm-text-color-hover: var(--dm-base-text-color);
    
    --btn-lm-border-color: var(--lm-base-text-color);
    --btn-lm-border-color-hover: var(--lm-base-text-color);
    --btn-dm-border-color: var(--dm-base-text-color);
    --btn-dm-border-color-hover: var(--dm-base-text-color);

    --btn-lm-focus: 0 0 0 0.25rem rgba(33, 33, 33, 0.5);
    --btn-dm-focus: 0 0 0 0.25rem rgba(33, 33, 33, 1);

    /* Primary BTN Styles */
    --btn-primary-lm-background: transparent;
    --btn-primary-dm-background: transparent;
    --btn-primary-lm-background-hover: rgba(var(--red-color-rgb), 1);
    --btn-primary-dm-background-hover: rgba(var(--red-color-rgb), 1);

    --btn-primary-lm-text-color: var(--bs-primary);
    --btn-primary-dm-text-color: var(--bs-white);
    --btn-primary-lm-text-color-hover: var(--bs-white);
    --btn-primary-dm-text-color-hover: var(--bs-white);
    
    --btn-primary-lm-border-color: var(--bs-primary);
    --btn-primary-dm-border-color: var(--bs-primary);
    --btn-primary-lm-border-color-hover: var(--bs-primary);
    --btn-primary-dm-border-color-hover: var(--bs-primary);

    --btn-primary-lm-focus: 0 0 0 0.25rem rgba(var(--red-color-rgb), .5);
    --btn-primary-dm-focus: 0 0 0 0.25rem rgba(var(--red-color-rgb), .8);

    /* Secondary BTN Styles */
    --btn-secondary-lm-background: var(--bs-gray-dark);
    --btn-secondary-dm-background: var(--bs-gray);
    --btn-secondary-lm-background-hover: var(--bs-gray);
    --btn-secondary-dm-background-hover: var(--bs-gray-dark);

    --btn-secondary-lm-text-color: var(--bs-white);
    --btn-secondary-dm-text-color: var(--bs-white);
    --btn-secondary-lm-text-color-hover: var(--bs-white);
    --btn-secondary-dm-text-color-hover: var(--bs-white);
    
    --btn-secondary-lm-border-color: var(--bs-gray-dark);
    --btn-secondary-dm-border-color: var(--bs-gray);
    --btn-secondary-lm-border-color-hover: var(--bs-gray-dark);
    --btn-secondary-dm-border-color-hover: var(--bs-gray);

    --btn-secondary-lm-focus: 0 0 0 0.25rem rgba(108, 117, 125, .5);
    --btn-secondary-dm-focus: 0 0 0 0.25rem rgba(108, 117, 125, .8);

    /* Success BTN Styles */
    --btn-success-lm-background: var(--bs-success);
    --btn-success-dm-background: var(--bs-success);
    --btn-success-lm-background-hover: rgba(var(--green-color-rgb), .7);
    --btn-success-dm-background-hover: rgba(var(--green-color-rgb), .7);

    --btn-success-lm-text-color: var(--bs-white);
    --btn-success-dm-text-color: var(--bs-white);
    --btn-success-lm-text-color-hover: var(--bs-white);
    --btn-success-dm-text-color-hover: var(--bs-white);
    
    --btn-success-lm-border-color: var(--bs-success);
    --btn-success-dm-border-color: var(--bs-success);
    --btn-success-lm-border-color-hover: var(--bs-success);
    --btn-success-dm-border-color-hover: var(--bs-success);

    --btn-success-lm-focus: 0 0 0 0.25rem rgba(var(--green-color-rgb), .5);
    --btn-success-dm-focus: 0 0 0 0.25rem rgba(var(--green-color-rgb), .8);

    /* Info BTN Styles */
    --btn-info-lm-background: var(--bs-info);
    --btn-info-dm-background: transparent;
    --btn-info-lm-background-hover: rgba(var(--blue-color-rgb), .7);
    --btn-info-dm-background-hover: rgba(var(--blue-color-rgb), .3);

    --btn-info-lm-text-color: var(--bs-white);
    --btn-info-dm-text-color: var(--bs-white);
    --btn-info-lm-text-color-hover: var(--bs-white);
    --btn-info-dm-text-color-hover: var(--bs-white);
    
    --btn-info-lm-border-color: var(--bs-info);
    --btn-info-dm-border-color: var(--bs-info);
    --btn-info-lm-border-color-hover: var(--bs-info);
    --btn-info-dm-border-color-hover: var(--bs-info);

    --btn-info-lm-focus: 0 0 0 0.25rem rgba(var(--blue-color-rgb), .5);
    --btn-info-dm-focus: 0 0 0 0.25rem rgba(var(--blue-color-rgb), .8);

    /* Warning BTN Styles */
    --btn-warning-lm-background: var(--bs-warning);
    --btn-warning-dm-background: var(--bs-warning);
    --btn-warning-lm-background-hover: rgba(var(--yellow-color-rgb), .7);
    --btn-warning-dm-background-hover: rgba(var(--yellow-color-rgb), .7);

    --btn-warning-lm-text-color: var(--bs-white);
    --btn-warning-dm-text-color: var(--bs-white);
    --btn-warning-lm-text-color-hover: var(--bs-white);
    --btn-warning-dm-text-color-hover: var(--bs-white);
    
    --btn-warning-lm-border-color: var(--bs-warning);
    --btn-warning-dm-border-color: var(--bs-warning);
    --btn-warning-lm-border-color-hover: var(--bs-warning);
    --btn-warning-dm-border-color-hover: var(--bs-warning);

    --btn-warning-lm-focus: 0 0 0 0.25rem rgba(var(--yellow-color-rgb), .5);
    --btn-warning-dm-focus: 0 0 0 0.25rem rgba(var(--yellow-color-rgb), .8);

    /* Danger BTN Styles */
    --btn-danger-lm-background: var(--bs-danger);
    --btn-danger-dm-background: var(--bs-danger);
    --btn-danger-lm-background-hover: rgba(var(--red-color-rgb), .7);
    --btn-danger-dm-background-hover: rgba(var(--red-color-rgb), .7);

    --btn-danger-lm-text-color: var(--bs-white);
    --btn-danger-dm-text-color: var(--bs-white);
    --btn-danger-lm-text-color-hover: var(--bs-white);
    --btn-danger-dm-text-color-hover: var(--bs-white);
    
    --btn-danger-lm-border-color: var(--bs-danger);
    --btn-danger-dm-border-color: var(--bs-danger);
    --btn-danger-lm-border-color-hover: var(--bs-danger);
    --btn-danger-dm-border-color-hover: var(--bs-danger);

    --btn-danger-lm-focus: 0 0 0 0.25rem rgba(var(--red-color-rgb), .5);
    --btn-danger-dm-focus: 0 0 0 0.25rem rgba(var(--red-color-rgb), .8);

    /* Light BTN Styles */
    --btn-light-lm-background: var(--bs-light);
    --btn-light-dm-background: var(--bs-light);
    --btn-light-lm-background-hover: var(--gray-200);
    --btn-light-dm-background-hover: var(--gray-300);

    --btn-light-lm-text-color: var(--text-color);
    --btn-light-dm-text-color: var(--text-color);
    --btn-light-lm-text-color-hover: var(--text-color);
    --btn-light-dm-text-color-hover: var(--text-color);
    
    --btn-light-lm-border-color: var(--bs-light);
    --btn-light-dm-border-color: var(--bs-light);
    --btn-light-lm-border-color-hover: var(--bs-light);
    --btn-light-dm-border-color-hover: var(--bs-light);

    --btn-light-lm-focus: 0 0 0 0.25rem rgba(108, 117, 125, .5);
    --btn-light-dm-focus: 0 0 0 0.25rem rgba(108, 117, 125, .8);

    /* Dark BTN Styles */
    --btn-dark-lm-background: var(--bs-dark);
    --btn-dark-dm-background: var(--bs-dark);
    --btn-dark-lm-background-hover: var(--gray-700);
    --btn-dark-dm-background-hover: var(--gray-700);

    --btn-dark-lm-text-color: var(--bs-white);
    --btn-dark-dm-text-color: var(--bs-white);
    --btn-dark-lm-text-color-hover: var(--bs-white);
    --btn-dark-dm-text-color-hover: var(--bs-white);
    
    --btn-dark-lm-border-color: var(--bs-dark);
    --btn-dark-dm-border-color: var(--bs-dark);
    --btn-dark-lm-border-color-hover: var(--bs-dark);
    --btn-dark-dm-border-color-hover: var(--bs-dark);

    --btn-dark-lm-focus: 0 0 0 0.25rem rgba(108, 117, 125, .5);
    --btn-dark-dm-focus: 0 0 0 0.25rem rgba(108, 117, 125, .8);

    /* Link BTN Styles */
    --btn-link-lm-background: transparent;
    --btn-link-dm-background: transparent;
    --btn-link-lm-background-hover: transparent;
    --btn-link-dm-background-hover: transparent;

    --btn-link-lm-text-color: var(--bs-primary);
    --btn-link-dm-text-color: var(--bs-white);
    --btn-link-lm-text-color-hover: var(--red-color-light);
    --btn-link-dm-text-color-hover: var(--gray-300);
    
    --btn-link-lm-border-color: transparent;
    --btn-link-dm-border-color: transparent;
    --btn-link-lm-border-color-hover: transparent;
    --btn-link-dm-border-color-hover: transparent;

    --btn-link-lm-focus: 0 0 0 0.25rem rgba(108, 117, 125, .5);
    --btn-link-dm-focus: 0 0 0 0.25rem rgba(108, 117, 125, .8);
}