:root {
    /*  Font Sizes  */
    --font-xxxs: 4px;
    --font-xxs: 8px;
    --font-xs: 12px;
    --font-sm: 14px;
    --font-md: 16px;
    --font-lg: 18px;
    --font-xl: 24px;
    --font-xxl: 36px;
    /*  Font Weights  */
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    /*  Spacing  */
    --spacing-xs: 2px;
    --spacing-sm: 4px;
    --spacing-md: 8px;
    --spacing-lg: 10px;
    --spacing-xl: 12px;
    --spacing-xxl: 16px;
    /*  Border Radius  */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 24px;
    --border-radius-xxl: 32px;
    /*  Main Colors  */
    --color-bg:  linear-gradient(143deg, #E0F0FE 1.06%, #EFF6FF 100%); ;
    --color-bg-nav: #FFFFFC;
    --color-bg-nav-hover: #F8FAFC;
    --color-icon: linear-gradient(270deg, #02BCE4 0%, #3BEBAA 100%);
    --color-basic-icon: #A4A7AE;
    --color-hover: linear-gradient(135deg, #E0F0FE 0%, #E0F0FE 100%);
    --color-header: #181D27;
    --color-divider: #CBD5E1;
    --color-button: #0E0B96;
    /*    --mud-palette-primary: #EBF1FF !important;*/
    --mud-palette-tertiary: #E0F0FE !important;
    --nav-header-text: linear-gradient(90deg, #00A668 0%, #00719A 100%);
    /*  Icon Chip Colors  */
    --color-primary: #2563EB;
    --color-secondary: #475569;
    --color-success: #16A34A;
    --color-warning: #D97706;
    --color-danger: #E11D48;
    --color-purple: #4F46E5;
    /*  Icon Chip Background Colors  */
    --color-bg-primary: #EFF6FF;
    --color-bg-secondary: #F1F5F9;
    --color-bg-success: #DCFCE7;
    --color-bg-warning: #FEF3C7;
    --color-bg-danger: #FFE4E6;
    --color-bg-tertiary: #E0F0FE;
    --color-bg-purple: #EEF2FF;
    /*  Text Colors  */
    --text-primary: #475569;
    --text-secondary: #64748B;
    --text-dark: #1E293B;
    --text-white: #FFFFFF;
    --text-blue: #1E3A8A;
    /*  Table Status Colors  */
    --color-bg-active: #22C55E;
    --color-bg-inactive: #F43F5E;
    --color-bg-Pending: #F59E0B;
    /*  Status Chip Colors  */
    --chip-text-primary: #3B82F6;
    --chip-bg-primary: #EFF6FF;
    --chip-text-mint: #0891B2;
    --chip-bg-mint: #F0FDFA;
    --chip-border-primary:;
    --chip-text-success: #22C55E;
    --chip-bg-success: #F0FDF4;
    --chip-border-success: #BBF7D0;
    --chip-text-warning: #F59E0B;
    --chip-bg-warning: #FFFBEB;
    --chip-border-warning: #FDE68A;
    --chip-text-danger: #F43F5E;
    --chip-bg-danger: #FFF1F2;
    --color-button-hover: #05045C;
}

.bg-primary {
    background: var(--color-bg-primary) !important;
}

.bg-success {
    background: var(--color-bg-success) !important;
}

.bg-secondary {
    background: var(--color-bg-secondary) !important;
}

.bg-warning {
    background: var(--color-bg-warning) !important;
}

.bg-purple {
    background: var(--color-bg-purple) !important;
}

.bg-tertiary {
    background:#E0F0FE !important;
}

.custom-mud-papper {
    gap: 16px;
    border-radius: 16px !important;
    padding: 16px;
    background-color: #FFFFFF;
    box-shadow: 0px 1px 2px 0px #1717170F;
    box-shadow: 0px 1px 3px 0px #1717171A;
}

.custom-mud-divider {
    height: 2px !important;
    background-color: #CBD5E1;
    margin: 0;
}
.custom-vertical-divider {
    width: 1.5px !important;
    background-color: #CBD5E1;
}
.mud-container   {
    margin : 0  !important;
    max-width : 100% !important;
    padding : 0 !important ; 
}

.card__button {
    height: 40px;
    padding: 10px 16px;
    border-radius: 1234px;
    gap: 8px;
}

.card__button--filled {
    background-color: var(--color-button);
    color: white;
}

.card__button--outlined {
    border: 1px solid var(--color-divider);
    background-color: white;
    color: var(--color-secondary);
}
.mud-input.mud-input-outlined .mud-input-outlined-border {
    display: flex;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0%;
    text-align: start;
    pointer-events: none;
    border-radius: var(--border-radius-lg) !important;
    border-color: var(--mud-palette-lines-inputs);
    border-width: 1px;
    border-style: solid;
    transition: border-width, border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mud-dialog {
    width: 100% !important;
    border-radius: var(--border-radius-xl) !important;
    border:none !important;
}


.mud-dialog .mud-dialog-title {
    display: none !important;
}
.mud-dialog .mud-dialog-content {

    padding: 8px 24px !important;
        }
.mud-expand-panel .mud-expand-panel-header.mud-expand-panel-header-gutters {
    padding-bottom: 0px !important;
    padding-top: 0px !important
}
.mud-badge {
    border-radius: 10px;
    font-size: 12px;
    height: 15px !important;
    letter-spacing: 0;
    min-width: 15px !important;
    padding: 4px 6px;
    margin-right: 8px;
    pointer-events: auto;
    line-height: 1;
    position: inherit;
    text-align: center;
    text-indent: 0;
    top: auto;
    transition: .3s cubic-bezier(0.25, 0.8, 0.5, 1);
    white-space: nowrap;
}