html {
    --primary-background-color: #f0f0f0;
    --primary-light-background-color: #FFFFFF;
    --secondary-light-background-color: #f0f0f0;
    --secondary-dark-background-color: #dee3ea;
    --highlight-background-color: rgba(255, 193, 7, 0.23);
    --highlight-dark-background-color: rgba(255, 193, 7, 0.41);
    --header-bg: #FFFFFF;

    --primary-color: #da342a;
    --primary-color-hover: #2930ff;
    --secondary-color: #ffc200;
    --danger-color: #D50000;
    --primary-text-color: rgba(0, 0, 0, 0.65);
    --primary-text-color-muted: rgba(0, 0, 0, 0.45);
    --primary-text-color-muted-danger: rgb(218, 52, 42);
    --secondary-text-color: #0d0d0d;
    --secondary-muted-text-color: #727272;
    --contrast-text-color: #ffffff;
    --main-field-color: var(--primary-text-color);
    --main-field-weight: 700;
    --base-item-shadow: 0 6px 8px rgba(102, 119, 136, .03), 0 1px 2px rgba(102, 119, 136, .3);

    --table-row-bg: #FFFFFF;
    --table-row-bg-success: #f4fff2;
    --table-row-bg-failure: #fff1f0;
    --table-row-bg-highlight: #fffbe6;
    --table-border-color: var(--primary-background-color);

    --form-input-bg: #FFFFFF;
    --form-input-disabled-bg: #f6f6f6;
    --mask-bg: rgba(0, 0, 0, 0.65);

    --tab-active-bg: #FFFFFF;
    --tab-inactive-bg: #dee3ea;
}
html[data-theme="dark"] {
    --primary-background-color: #373943;
    --primary-light-background-color: #3c3e46;
    --secondary-light-background-color: #2a2d34;
    --secondary-dark-background-color: #2a2d34;
    --highlight-background-color: rgba(0, 0, 255, 0.23);
    --highlight-dark-background-color: rgba(0, 0, 255, 0.41);
    --header-bg: #1a1e27;

    --primary-color: #ffc200;
    --primary-color-hover: #ffd429;
    --secondary-color: #0000FF;
    --danger-color: #D50000;
    --primary-text-color: rgba(255, 255, 255, 1);
    --primary-text-color-muted: rgba(255, 255, 255, 0.45);
    --secondary-text-color: #f6f6f6;
    --secondary-muted-text-color: #727272;
    --contrast-text-color: #000000;
    --main-field-color: var(--primary-color);
    --main-field-weight: 500;
    --base-item-shadow: 0 6px 8px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(8, 8, 8, 0.3);

    --table-row-bg: #2a2d34;
    --table-row-bg-success: #60e44818;
    --table-row-bg-failure: #e68080;
    --table-border-color: var(--secondary-light-background-color);

    --form-input-bg: #2a2d34;
    --form-input-disabled-bg: #3c3e46;
    --mask-bg: rgba(0, 0, 0, 0.65);

    --tab-active-bg: #3c3e46;
    --tab-inactive-bg: #2a2d34;
}

$primary-background-color: var(--primary-background-color);
$primary-light-background-color: var(--primary-light-background-color);
$secondary-light-background-color: var(--secondary-light-background-color);
$secondary-dark-background-color: var(--secondary-dark-background-color);
$highlight-background-color: var(--highlight-background-color);
$highlight-dark-background-color: var(--highlight-dark-background-color);
$header-bg: var(--header-bg);

$primary-color: var(--primary-color);
$primary-color-hover: var(--primary-color-hover);
$secondary-color: var(--secondary-color);
$danger-color: var(--danger-color);
$primary-text-color: var(--primary-text-color);
$primary-text-color-muted: var(--primary-text-color-muted);
$primary-text-color-muted-danger: var(--primary-text-color-muted-danger);
$secondary-text-color: var(--secondary-text-color);
$secondary-muted-text-color: var(--secondary-muted-text-color);
$contrast-text-color: var(--contrast-text-color);
$main-field-color: var(--main-field-color);
$main-field-weight: var(--main-field-weight);
$base-item-shadow: var(--base-item-shadow);

$table-row-bg: var(--table-row-bg);
$table-row-bg-success: var(--table-row-bg-success);
$table-row-bg-failure: var(--table-row-bg-failure);
$table-row-bg-highlight: var(--table-row-bg-highlight);
$table-border-color: var(--table-border-color);
$table-main-field: var(--table-main-field);

$mask-bg: var(--mask-bg);

$form-input-bg: var(--form-input-bg);
$form-input-disabled-bg: var(--form-input-disabled-bg);

$tab-active-bg: var(--tab-active-bg);
$tab-inactive-bg: var(--tab-inactive-bg);

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
$screen-xxxs:                  375px !default;
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xxxs-min:              $screen-xxxs !default;
//** Deprecated `$screen-phone` as of v3.0.1
$screen-xxs-phone:               $screen-xxxs-min !default;

// Extra extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
$screen-xxs:                  425px !default;
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xxs-min:              $screen-xxs !default;
//** Deprecated `$screen-phone` as of v3.0.1
$screen-xs-phone:               $screen-xxs-min !default;

// Extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
$screen-xs:                  480px !default;
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min:              $screen-xs !default;
//** Deprecated `$screen-phone` as of v3.0.1
$screen-phone:               $screen-xs-min !default;

// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet:              $screen-sm-min !default;

// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop:             $screen-md-min !default;

// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-lg:                  1200px !default;
$screen-lg-min:              $screen-lg !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop:          $screen-lg-min !default;

// XLarge screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-xl:                  1440px !default;
$screen-xl-min:              $screen-xl !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-xl-desktop:          $screen-xl-min !default;

// XXLarge screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-xxl:                  1920px !default;
$screen-xxl-min:              $screen-xxl !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-xxl-desktop:          $screen-xxl-min !default;

// So media queries don't overlap when required, provide a maximum
$screen-xxxs-max:              ($screen-xxs-min - 1) !default;
$screen-xxs-max:              ($screen-xs-min - 1) !default;
$screen-xs-max:              ($screen-sm-min - 1) !default;
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;
$screen-lg-max:              ($screen-xl-min - 1) !default;
$screen-xl-max:              ($screen-xxl-min - 1) !default;