:root {
    --mud-palette-overlay-dark: rgba(33,33,33,0.6);
    --mud-palette-overlay-light: rgba(255,255,255,0.6);
    --mud-palette-overlay-dark-low: rgba(33,33,33,0.85);
    --mud-palette-overlay-light-low: rgba(255,255,255,0.85);
    --mud-palette-overlay-dark-hight: rgba(33,33,33,0.25);
    --mud-palette-overlay-light-hight: rgba(255,255,255,0.25);
    /**/
    --mud-palette-overlay: rgba(255,255,255,0.6);
    --mud-palette-overlay-low: rgba(255,255,255,0.85);
    --mud-palette-overlay-hight: rgba(255,255,255,0.25);
    --mud-palette-overlay-reverse: rgba(33,33,33,0.6);
    --mud-palette-overlay-low-reverse: rgba(33,33,33,0.85);
    --mud-palette-overlay-hight-reverse: rgba(33,33,33,0.25);
    /**/
    --color-primary-transparent: rgb(0 80 180 / 60%);
    --color-primary-transparent-low: rgb(0 80 180 / 85%);
    --color-primary-transparent-hight: rgb(0 113 255 / 20%);
    --color-success-transparent: #00c8534d;
    --color-error-transparent: #f64e6280;
    /**/
    --color: rgba(255,255,255);
    --color-reverse: rgba(10,10,10);
    --background-default: #f0f0f0;
    --background-input-filled: rgba(0,0,0,.06);
    --color-border: var(--mud-palette-primary);
    /*boostrap*/
    --bs-body-bg: var(--mud-palette-background);
}

.background-blur {
    backdrop-filter: blur(.15rem);
}
.background-blur-1 {
    backdrop-filter: blur(.25rem);
}
.background-blur-2 {
    backdrop-filter: blur(.5rem);
}
.background-blur-3 {
    backdrop-filter: blur(.75rem);
}
.background-blur-4 {
    backdrop-filter: blur(1rem);
}
.color-bg-success {
    background-color: var(--mud-palette-success) !important
}
.color-bg-primary {
    background-color: var(--mud-palette-primary) !important
}
.color-bg-success-transparent {
    background-color: var(--color-success-transparent) !important
}
.color-bg-warning-transparent {
    background-color: var(--mud-palette-warning-hover) !important
}
.color-bg-primary-transparent {
    background-color: var(--color-primary-transparent) !important
}
.color-bg-primary-transparent-hight {
    background-color: var(--color-primary-transparent-hight) !important
}
.color-bg-primary-transparent-low {
    background-color: var(--color-primary-transparent-low) !important
}
.color-bg-default-transparent {
    background-color: var(--mud-palette-action-default-hover) !important
}
.color-bg-error-transparent {
    background-color: var(--color-error-transparent) !important
}
.color-bg-dark-transparent {
    background-color: var(--mud-palette-overlay-dark) !important
}
.color-bg-light-transparent {
    background-color: var(--mud-palette-overlay-light) !important
}
.color-bg-dark-transparent-low {
    background-color: var(--mud-palette-overlay-dark-low) !important
}
.color-bg-light-transparent-low {
    background-color: var(--mud-palette-overlay-light-low) !important
}
.color-bg-dark-transparent-hight {
    background-color: var(--mud-palette-overlay-dark-hight) !important
}
.color-bg-light-transparent-hight {
    background-color: var(--mud-palette-overlay-light-hight) !important
}

.color-bg-transparent {
    background-color: var(--mud-palette-overlay) !important
}
.color-bg-transparent-low {
    background-color: var(--mud-palette-overlay-low) !important
}
.color-bg-transparent-hight {
    background-color: var(--mud-palette-overlay-hight) !important
}
.color-bg-transparent-reverse {
    background-color: var(--mud-palette-overlay-reverse) !important
}
.color-bg-transparent-low-reverse {
    background-color: var(--mud-palette-overlay-low-reverse) !important
}
.color-bg-transparent-hight-reverse {
    background-color: var(--mud-palette-overlay-hight-reverse) !important
}
.color-bg-default-transparent-hight {
    background-color: var(--mud-palette-action-default-hover) !important
}
.color-bg-grey {
    background-color: var(--mud-palette-grey-default) !important
}
.color-bg-grey-hight {
    background-color: var(--mud-palette-grey-lighter) !important
}
.color-bg-grey-low {
    background-color: var(--mud-palette-grey-dark) !important
}
.color-bg-default {
    background-color: var(--background-default) !important;
}

.color-border-success {
    --color-border: var(--mud-palette-success)
}
.color-border-error {
    --color-border: var(--mud-palette-error)
}
.color-border-warning {
    --color-border: var(--mud-palette-warning)
}
.color-border-info {
    --color-border: var(--mud-palette-info)
}
.color-border-primary {
    --color-border: var(--mud-palette-primary)
}
.color-border-dark-lighten {
    --color-border: var(--mud-palette-dark-lighten)
}
.color-border-dark-transparent {
    --color-border: var(--mud-palette-dark-hover)
}

.color-border-transparent {
    --color-border: var(--mud-palette-overlay-reverse)
}
.color-border-transparent-low {
    --color-border: var(--mud-palette-overlay-low-reverse)
}
.color-border-transparent-hight {
    --color-border: var(--mud-palette-overlay-hight-reverse)
}

.color{
    color: var(--color) !important;
}
.color-reverse {
    color: var(--color-reverse) !important;
}
.color-white {
    color: var(--mud-palette-white) !important;
}
.color-black {
    color: var(--mud-palette-black) !important;
}
.color-primary {
    color: var(--mud-palette-primary) !important;
}
.color-success {
    color: var(--mud-palette-success) !important;
}
.color-warning {
    color: var(--mud-palette-warning) !important;
}
.color-error {
    color: var(--mud-palette-error) !important;
}
.color-bg {
    background-color: var(--mud-palette-background)
}

.color-primary-all *{
    color: var(--mud-palette-primary);
}
.color-success-all *{
    color: var(--mud-palette-success);
}
.color-warning-all *{
    color: var(--mud-palette-warning);
}
.color-error-all *{
    color: var(--mud-palette-error);
}

.color-text-primary {
    color: var(--mud-palette-primary-text);
}
.color-text-success {
    color: var(--mud-palette-success-text);
}
.color-text-warning {
    color: var(--mud-palette-warning-text);
}
.color-text-error {
    color: var(--mud-palette-error-text);
}
.color-bg-hover-primary:hover {
    background-color: var(--color-primary)
}
.color-bg-hover-primary-hight:hover {
    background-color: var(--color-primary-transparent-hight)
}
.color-bg-hover-primary-low:hover {
    background-color: var(--color-primary-transparent-low)
}

.color-bg-gradient {
    background: linear-gradient(-45deg, #0050b4, #8a00ff, #e8099e, #ff3c3c);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
}
.color-bg-gradient-primary {
    background: linear-gradient(-45deg, #0050b4, #7000c9);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
}

.color-bg-gradient-hover :hover {
    background: linear-gradient(-45deg, #0050b4, #8a00ff, #e8099e, #ff3c3c);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
/*

    --mud-palette-black: #272c34ff;
    --mud-palette-white: #ffffffff;
    --mud-palette-primary: #594ae2ff;
    --mud-palette-primary-rgb: 89,74,226;
    --mud-palette-primary-text: #ffffffff;
    --mud-palette-primary-darken: rgb(62,44,221);
    --mud-palette-primary-lighten: rgb(118,106,231);
    --mud-palette-primary-hover: rgba(89,74,226,0.058823529411764705);
    --mud-palette-secondary: #ff4081ff;
    --mud-palette-secondary-rgb: 255,64,129;
    --mud-palette-secondary-text: #ffffffff;
    --mud-palette-secondary-darken: rgb(255,31,105);
    --mud-palette-secondary-lighten: rgb(255,102,153);
    --mud-palette-secondary-hover: rgba(255,64,129,0.058823529411764705);
    --mud-palette-tertiary: #1ec8a5ff;
    --mud-palette-tertiary-rgb: 30,200,165;
    --mud-palette-tertiary-text: #ffffffff;
    --mud-palette-tertiary-darken: rgb(25,169,140);
    --mud-palette-tertiary-lighten: rgb(42,223,187);
    --mud-palette-tertiary-hover: rgba(30,200,165,0.058823529411764705);
    --mud-palette-info: #2196f3ff;
    --mud-palette-info-rgb: 33,150,243;
    --mud-palette-info-text: #ffffffff;
    --mud-palette-info-darken: rgb(12,128,223);
    --mud-palette-info-lighten: rgb(71,167,245);
    --mud-palette-info-hover: rgba(33,150,243,0.058823529411764705);
    --mud-palette-success: #00c853ff;
    --mud-palette-success-rgb: 0,200,83;
    --mud-palette-success-text: #ffffffff;
    --mud-palette-success-darken: rgb(0,163,68);
    --mud-palette-success-lighten: rgb(0,235,98);
    --mud-palette-success-hover: rgba(0,200,83,0.058823529411764705);
    --mud-palette-warning: #ff9800ff;
    --mud-palette-warning-rgb: 255,152,0;
    --mud-palette-warning-text: #ffffffff;
    --mud-palette-warning-darken: rgb(214,129,0);
    --mud-palette-warning-lighten: rgb(255,167,36);
    --mud-palette-warning-hover: rgba(255,152,0,0.058823529411764705);
    --mud-palette-error: #f44336ff;
    --mud-palette-error-rgb: 244,67,54;
    --mud-palette-error-text: #ffffffff;
    --mud-palette-error-darken: rgb(242,28,13);
    --mud-palette-error-lighten: rgb(246,96,85);
    --mud-palette-error-hover: rgba(244,67,54,0.058823529411764705);
    --mud-palette-dark: #424242ff;
    --mud-palette-dark-rgb: 66,66,66;
    --mud-palette-dark-text: #ffffffff;
    --mud-palette-dark-darken: rgb(46,46,46);
    --mud-palette-dark-lighten: rgb(87,87,87);
    --mud-palette-dark-hover: rgba(66,66,66,0.058823529411764705);
    --mud-palette-text-primary: #424242ff;
    --mud-palette-text-secondary: #00000089;
    --mud-palette-text-disabled: #00000060;
    --mud-palette-action-default: #00000089;
    --mud-palette-action-default-hover: rgba(0,0,0,0.058823529411764705);
    --mud-palette-action-disabled: #00000042;
    --mud-palette-action-disabled-background: #0000001e;
    --mud-palette-surface: #ffffffff;
    --mud-palette-background: #ffffffff;
    --mud-palette-background-grey: #f5f5f5ff;
    --mud-palette-drawer-background: #ffffffff;
    --mud-palette-drawer-text: #424242ff;
    --mud-palette-drawer-icon: #616161ff;
    --mud-palette-appbar-background: #594ae2ff;
    --mud-palette-appbar-text: #ffffffff;
    --mud-palette-lines-default: #0000001e;
    --mud-palette-lines-inputs: #bdbdbdff;
    --mud-palette-table-lines: #e0e0e0ff;
    --mud-palette-table-striped: #00000005;
    --mud-palette-table-hover: #0000000a;
    --mud-palette-divider: #e0e0e0ff;
    --mud-palette-divider-light: #000000cc;
    --mud-palette-grey-default: #9E9E9E;
    --mud-palette-grey-light: #BDBDBD;
    --mud-palette-grey-lighter: #E0E0E0;
    --mud-palette-grey-dark: #757575;
    --mud-palette-grey-darker: #616161;


*/