:root {
  /* Font */
  --font-family: Inter, Roboto, Segoe UI, Arial, tahoma, verdana, sans-serif;

  /* Colors - Base */
  --white: #FFFFFF;
  --black: #000000;
  
  /* Colors - Brand */
  --brand-default: #3258FF; /* Base/Brand/Default */
  --brand-hover: #5984FF; /* Base/Brand/Hover */
  --brand-pressed: #1B35F5; /* Base/Brand/Pressed */
  --brand-disabled: #93C5FD; /* Base/Brand/Disabled */
  --brand-light-hover: #DBE9FF; /* Base/Brand/Light Hover */
  --brand-light-pressed: #BFD9FF; /* Base/Brand/Light Pressed */
  --brand-light-selected: #EFF6FF; /* Base/Brand/Light Selected */
  
  /* Colors - Accent */
  --accent-default: #7C3AED; /* Base/Accent/Default */
  --accent-hover: #6D28D9; /* Base/Accent/Hover */
  --accent-pressed: #5B21B6; /* Base/Accent/Pressed */
  --accent-disabled: #C4B5FD; /* Base/Accent/Disabled */
  --accent-light-hover: #EDE9FE; /* Base/Accent/Light Hover */
  --accent-light-pressed: #DDD6FE; /* Base/Accent/Light Pressed */
  --accent-light-selected: #F5F3FF; /* Base/Accent/Light Selected */
  
  /* Colors - Neutral */
  --neutral-50: #F6F6F6; /* Base/Neutral/50 */
  --neutral-100: #E7E7E7; /* Base/Neutral/100 */
  --neutral-200: #D1D1D1; /* Base/Neutral/200 */
  --neutral-300: #B0B0B0; /* Base/Neutral/300 */
  --neutral-400: #888888; /* Base/Neutral/400 */
  --neutral-500: #6D6D6D; /* Base/Neutral/500 */
  --neutral-600: #5D5D5D; /* Base/Neutral/600 */
  --neutral-700: #4F4F4F; /* Base/Neutral/700 */
  --neutral-800: #454545; /* Base/Neutral/800 */
  --neutral-900: #3D3D3D; /* Base/Neutral/900 */
  --neutral-950: #1F1F1F; /* Base/Neutral/950 */
  
  /* Colors - Info */
  --info-default: #2563EB; /* Base/Info/Default */
  --info-hover: #1D4ED8; /* Base/Info/Hover */
  --info-pressed: #1E40AF; /* Base/Info/Pressed */
  --info-disabled: #93C5FD; /* Base/Info/Disabled */
  --info-light-hover: #DBE9FF; /* Base/Info/Light Hover */
  --info-light-pressed: #BFD9FF; /* Base/Info/Light Pressed */
  --info-light-selected: #EFF6FF; /* Base/Info/Light Selected */
  
  /* Colors - Success */
  --success-default: #16A34A; /* Base/Success/Default */
  --success-hover: #15803D; /* Base/Success/Hover */
  --success-pressed: #166534; /* Base/Success/Pressed */
  --success-disabled: #86EFAC; /* Base/Success/Disabled */
  --success-light-hover: #DCFCE7; /* Base/Success/Light Hover */
  --success-light-pressed: #BBF7D0; /* Base/Success/Light Pressed */
  --success-light-selected: #F0FDF4; /* Base/Success/Light Selected */
  
  /* Colors - Warning */
  --warning-default: #EA580C; /* Base/Warning/Default */
  --warning-hover: #C2410C; /* Base/Warning/Hover */
  --warning-pressed: #9A3412; /* Base/Warning/Pressed */
  --warning-disabled: #FDBA74; /* Base/Warning/Disabled */
  --warning-light-hover: #FFEDD5; /* Base/Warning/Light Hover */
  --warning-light-pressed: #FED7AA; /* Base/Warning/Light Pressed */
  --warning-light-selected: #FFF7ED; /* Base/Warning/Light Selected */
  
  /* Colors - Danger */
  --danger-default: #DC2626; /* Base/Danger/Default */
  --danger-hover: #B91C1C; /* Base/Danger/Hover */
  --danger-pressed: #991B1B; /* Base/Danger/Pressed */
  --danger-disabled: #FCA5A5; /* Base/Danger/Disabled */
  --danger-light-hover: #FEE2E2; /* Base/Danger/Light Hover */
  --danger-light-pressed: #FECACA; /* Base/Danger/Light Pressed */
  --danger-light-selected: #FEF2F2; /* Base/Danger/Light Selected */
  
  /* Text Colors */
  --text-primary: var(--neutral-950); /* Text/Primary Neutral */
  --text-secondary: var(--neutral-600); /* Text/Secondary Neutral */
  --text-hint: var(--neutral-400); /* Text/Hint Neutral */
  --text-disabled: var(--neutral-400); /* Text/Disabled Neutral */
  --text-white: var(--white); /* Text/White */
  --text-brand: var(--brand-default); /* Text/Brand */
  --text-link: var(--brand-default); /* Text/Link */
  --text-danger: var(--danger-default); /* Text/Danger */
  --text-warning: var(--warning-default); /* Text/Warning */
  --text-info: var(--info-default); /* Text/Info */
  --text-success: var(--success-default); /* Text/Success */
  --text-accent: var(--accent-default); /* Text/Accent */
  
  /* Background Colors */
  --bg-page: var(--neutral-100); /* BG/Page */
  --bg-white: var(--white); /* BG/White */
  --bg-brand: var(--brand-default); /* BG/Brand */
  --bg-success: var(--success-default); /* BG/Success */
  --bg-danger: var(--danger-default); /* BG/Danger */
  --bg-warning: var(--warning-default); /* BG/Warning */
  --bg-info: var(--info-default); /* BG/Info */
  --bg-black: var(--black); /* BG/Black */
  --bg-accent: var(--accent-default); /* BG/Accent */
  
  /* Icon Colors */
  --icon-neutral: var(--neutral-600); /* Icon/Neutral */
  --icon-brand: var(--brand-default); /* Icon/Brand */
  --icon-white: var(--white); /* Icon/White */
  --icon-success: var(--success-default); /* Icon/Success */
  --icon-warning: var(--warning-default); /* Icon/Warning */
  --icon-danger: var(--danger-default); /* Icon/Danger */
  --icon-info: var(--info-default); /* Icon/Info */
  --icon-accent: var(--accent-default); /* Icon/Accent */
  --icon-link: var(--brand-default); /* Icon/Link */
  --icon-neutral-disabled: var(--neutral-400); /* Icon/Neutral Disabled */
  
  /* Stroke/Border Colors */
  --stroke-neutral: var(--neutral-200); /* Stroke/Neutral */
  --stroke-brand: var(--brand-default); /* Stroke/Brand */
  --stroke-divider: var(--neutral-200); /* Stroke/Divider */
  --stroke-white: var(--white); /* Stroke/White */
  --stroke-success: var(--success-default); /* Stroke/Success */
  --stroke-danger: var(--danger-default); /* Stroke/Danger */
  --stroke-warning: var(--warning-default); /* Stroke/Warning */
  --stroke-info: var(--info-default); /* Stroke/Info */
  --stroke-accent: var(--accent-default); /* Stroke/Accent */
  
  /* Alpha White Colors */
  --alpha-white-950: rgba(255, 255, 255, 0.95);
  --alpha-white-900: rgba(255, 255, 255, 0.90);
  --alpha-white-800: rgba(255, 255, 255, 0.80);
  --alpha-white-700: rgba(255, 255, 255, 0.70);
  --alpha-white-600: rgba(255, 255, 255, 0.60);
  --alpha-white-500: rgba(255, 255, 255, 0.50);
  --alpha-white-400: rgba(255, 255, 255, 0.40);
  --alpha-white-300: rgba(255, 255, 255, 0.30);
  --alpha-white-200: rgba(255, 255, 255, 0.20);
  --alpha-white-100: rgba(255, 255, 255, 0.10);
  --alpha-white-50: rgba(255, 255, 255, 0.05);
  --alpha-white-0: rgba(255, 255, 255, 0);
  
  /* Alpha Black Colors */
  --alpha-black-950: rgba(0, 0, 0, 0.95);
  --alpha-black-900: rgba(0, 0, 0, 0.90);
  --alpha-black-800: rgba(0, 0, 0, 0.80);
  --alpha-black-700: rgba(0, 0, 0, 0.70);
  --alpha-black-600: rgba(0, 0, 0, 0.60);
  --alpha-black-500: rgba(0, 0, 0, 0.50);
  --alpha-black-400: rgba(0, 0, 0, 0.40);
  --alpha-black-300: rgba(0, 0, 0, 0.30);
  --alpha-black-200: rgba(0, 0, 0, 0.20);
  --alpha-black-100: rgba(0, 0, 0, 0.10);
  --alpha-black-50: rgba(0, 0, 0, 0.05);
  --alpha-black-0: rgba(0, 0, 0, 0);
  
  /* Typography */
  --font-family-primary: 'Inter', 'Roboto', 'Segoe UI', Arial, tahoma, verdana, sans-serif;
  
  /* Font Sizes */
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-lg: 14px;
  --font-size-xl: 16px;
  --font-size-2xl: 18px;
  --font-size-3xl: 20px;
  --font-size-4xl: 24px;
  --font-size-5xl: 30px;
  --font-size-6xl: 36px;
  --font-size-base: 14px; /* Default base font size */
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  
  /* Spacing */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  
  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Z-index */
  --z-index-0: 0;
  --z-index-10: 10;
  --z-index-20: 20;
  --z-index-30: 30;
  --z-index-40: 40;
  --z-index-50: 50;
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
}

:root {
    --sprite-icon: url("/Content/Images/Icon/sprite-icon.svg");

    /*==============================================
    Text
    ==============================================*/
    --text-color-default: var(--neutral-950);
    --text-color-muted: var(--neutral-500);
    --text-color-inverse: var(--white);
    --text-color-link: var(--brand-default);
    --text-color-link-hover: var(--brand-hover);
    --text-color-link-active: var(--brand-pressed);
    --font-size-caption: var(--font-size-sm);

    /*==============================================
    Input
    ==============================================*/
    --input-border-color: var(--neutral-200);
    --input-border-color--focus: var(--brand-default);
    --input-border-color--invalid: var(--danger-default);
    --input-padding: 4px 12px !important;
    --input-combo-padding: 4px 24px 4px 12px !important;
    --input-height: 32px;
    --input-border-radius: 8px;
    --input-line-height: 20px;
    --input-font-size: 14px;
    --input-label-color: var(--neutral-950);
    --input-label-font-size: 14px;
    --input-label-font-weight: 400;
    --input-label-line-height: 20px;
    --input-placeholder-color: var(--neutral-200);
    --input-bg-disabled: var(--neutral-100);
    --input-require-color: var(--danger-default);

    /*==============================================
    Button
    ==============================================*/
    --button-radius: 8px;
    --button-padding: 4px 12px;
    --button-text-padding: 8px;
    --button-icon-size: 16px;
    
    /* Base size values - easy to maintain */
    --button-base-size-small: 28px;
    --button-base-size-medium: 32px;
    --button-base-size-large: 40px;
    
    /* Computed size variables */
    --button-size--small: var(--button-base-size-small);
    --button-size--medium: var(--button-base-size-medium);
    --button-size--large: var(--button-base-size-large);
    --button-size: var(--button-size--medium); /* default size */
    
    /* Computed min-width variables */
    --button-min-width--small: calc(var(--button-base-size-small) * 2);      /* 56px */
    --button-min-width--medium: calc(var(--button-base-size-medium) * 2);    /* 64px */
    --button-min-width--large: calc(var(--button-base-size-large) * 1.8);    /* ~80px */
    --button-min-width: var(--button-min-width--medium); /* default min-width */
    --button-min-width-small: var(--button-min-width--small); /* legacy support */
    --button-min-width-large: var(--button-min-width--large); /* legacy support */
    
    --button-text-font-weight: 500;
    --button-text-font-size: 14px;
    --button-text-color--default: var(--white);
    /* primary */
    --button-text-color--primary: var(--brand-pressed);
    --button-bg--primary: var(--brand-default);
    --button-bg-hover--primary: var(--brand-hover);
    --button-bg-active--primary: var(--brand-pressed);
    --button-bg-disabled--primary: var(--brand-disabled);
    --button-text-bg--primary: var(--white);
    --button-text-bg-hover--primary: var(--brand-light-hover);
    --button-text-bg-active--primary: var(--brand-light-pressed);
    --button-text-bg-disabled--primary: var(--white);
    --button-text-disabled--primary: var(--brand-disabled);
    --button-outline-bg-hover--primary: var(--brand-light-hover);
    --button-outline-bg-active--primary: var(--brand-light-pressed);
    --button-outline-bg-disabled--primary: var(--white);
    --button-outline-disabled--primary: var(--brand-disabled);

    /* danger */
    --button-text-color--danger: var(--danger-default);
    --button-bg--danger: var(--danger-default);
    --button-bg-hover--danger: var(--danger-hover);
    --button-bg-active--danger: var(--danger-pressed);
    --button-bg-disabled--danger: var(--danger-disabled);
    --button-text-color--danger: var(--danger-default);
    --button-text-bg--danger: var(--white);
    --button-text-bg-hover--danger: var(--danger-light-hover);
    --button-text-bg-active--danger: var(--danger-light-pressed);
    --button-text-bg-disabled--danger: var(--white);
    --button-text-disabled--danger: var(--danger-disabled);
    --button-outline-bg-hover--danger: var(--danger-light-hover);
    --button-outline-bg-active--danger: var(--danger-light-pressed);
    --button-outline-bg-disabled--danger: var(--white);
    --button-outline-disabled--danger: var(--danger-disabled);

    /* neutral */
    --button-text-color--neutral: var(--neutral-950);
    --button-icon-color--neutral: var(---neutral-950);
    --button-bg--neutral: var(--neutral-950);
    --button-bg-hover--neutral: var(--neutral-800);
    --button-bg-active--neutral: var(--neutral-900);
    --button-bg-disabled--neutral: var(--neutral-400);
    --button-text-bg--neutral: var(--white);
    --button-text-bg-hover--neutral: var(--neutral-100);
    --button-text-bg-active--neutral: var(--neutral-200);
    --button-text-bg-disabled--neutral: var(--white);
    --button-text-disabled--neutral: var(--neutral-400);
    --button-outline-bg-hover--neutral: var(--neutral-100);
    --button-outline-border--neutral: var(--neutral-200);
    --button-outline-bg-active--neutral: var(--neutral-200);
    --button-outline-bg-disabled--neutral: var(--white);
    --button-outline-disabled--neutral: var(--neutral-400);

    /*==============================================
    Popup
    ==============================================*/
    --popup-header-font-weight: 600;
    --popup-header-line-height: 22px;
    --popup-header-font-size: 18px;
    --popup-header-bg-color: var(--white);
    --popup-header-border-bottom: 1px solid var(--neutral-200);
    --popup-header-padding: 16px;
    --popup-body-padding: 16px;
    --popup-body-bg-color: var(--white);
    --popup-footer-border-top: 1px solid var(--neutral-200);
    --popup-footer-padding: 12px 16px;
    --popup-footer-bg-color: var(--white);


    /*unchecked*/
    --checkbox-bg: var(--white);
    --checkbox-bg-hover: var(--white);
    --checkbox-bg-pressed: var(--white);
    --checkbox-bg-focus: var(--white);
    --checkbox-bg-disabled: var(--neutral-100);
    --checkbox-border-color: var(--neutral-200);
    --checkbox-border-color-hover: var(--brand-default);
    --checkbox-border-color-pressed: var(--brand-default);
    --checkbox-border-color-focus: var(--brand-default);
    --checkbox-border-color-disabled: var(--brand-default);
    /*checked*/
    --checkbox-bg--checked: var(--brand-default);
    --checkbox-bg-hover--checked: var(--brand-hover);
    --checkbox-bg-pressed--checked: var(--brand-pressed);
    --checkbox-bg-focus--checked: var(--brand-hover);
    --checkbox-bg-disabled--checked: var(--brand-disabled);
    --checkbox-border-color--checked: var(--brand-default);
    --checkbox-border-color-hover--checked: var(--brand-hover);
    --checkbox-border-color-pressed--checked: var(--brand-pressed);
    --checkbox-border-color-focus--checked: var(--brand-hover);
    --checkbox-border-color-disabled--checked: var(--brand-disabled);

    /*==============================================
    Dropdown
    ==============================================*/
    --dropdown-item-height: 32px;
    --dropdown-checkbox-width: 32px;
    --dropdown-item-padding-x: 8px;
    --dropdown-item-color: var(--text-color-default);
    --dropdown-item-color-hover: var(--text-color-default);
    --dropdown-item-color-focus: var(--text-color-default);
    --dropdown-item-color-selected: var(--brand-default);
    --dropdown-item-bg: var(--white);
    --dropdown-item-bg-hover: var(--brand-light-hover);
    --dropdown-item-bg-focus: var(--brand-light-pressed);
    --dropdown-item-bg-selected: var(--brand-light-selected);
    --dropdown-list-padding: 8px 0;
    --dropdown-list-border-radius: 8px;

    /*==============================================
    Scroll
    ==============================================*/
    --scroll-track-width--small: 4px;
    --scroll-track-width--medium: 6px;
    --scroll-track-width--large: 8px;
    --scroll-thumb-width--small: 4px;
    --scroll-thumb-width--medium: 6px;
    --scroll-thumb-width--large: 8px;
    --scroll-track-height--small: 4px;
    --scroll-track-height--medium: 6px;
    --scroll-track-height--large: 8px;
    --scroll-thumb-height--small: 4px;
    --scroll-thumb-height--medium: 6px;
    --scroll-thumb-height--large: 8px;
    --scroll-track-color: var(--neutral-50);
    --scroll-thumb-color: var(--neutral-200);

    /*==============================================
    Pagination
    ==============================================*/
    --pagination-height: 40px;
    --pagination-bg-color: var(--white);
    --pagination-border-color: var(--white);
    --pagination-item-color: var(--text-color-default);
    --pagination-item-color-hover: var(--text-color-default);
    --pagination-item-color-focus: var(--text-color-default);
    --pagination-item-color-selected: var(--brand-default);
    --pagination-item-bg: var(--white);
    --pagination-item-bg-hover: var(--brand-light-hover);
    --pagination-item-bg-focus: var(--brand-light-pressed);
    --pagination-item-bg-selected: var(--brand-light-selected);

    /*==============================================
    Pagination
    ==============================================*/
    --view-bg-color: var(--neutral-100);
    --view-padding: 6px;
    --view-header-size: 40px;
    --view-header-bg-color: var(--white);
    --view-header-border-radius: 8px;
    --view-splitter-size: 12px;
    --view-splitter-bg-color: transparent;
    --view-body-border-radius: 8px;

    /*==============================================
    Switch Toggle
    ==============================================*/
    --switch-width: 28px;
    --switch-height: 16px;
    --switch-padding: 2px;
    --switch-selector-size: 12px;
    --switch-border-radius: 9999px;
    --switch-transition: all 0.2s ease;

    /* Switch Colors - Off States */
    --switch-bg-off: var(--neutral-300);
    --switch-bg-off-disabled: var(--neutral-100);

    /* Switch Colors - On States */
    --switch-bg-on: var(--info-default);
    --switch-bg-on-disabled: var(--info-disabled);

    /* Switch Selector */
    --switch-selector-bg: var(--white);
    --switch-selector-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1), 0px 0px 2px 0px rgba(0, 0, 0, 0.1);

    /* Switch Text Colors */
    --switch-text-color: var(--text-primary);
    --switch-text-color-disabled: var(--text-disabled);

    /*==============================================
    Toolbar
    ==============================================*/
    --toolbar-bg-color: transparent;
    --toolbar-height: 32px;
    --toolbar-margin: 0 0 12px 0;
}


.x-btn-focus.x-btn-default-small .x-btn-wrap {
    outline: none;
}

.x-btn-disabled.x-btn-default-small .x-btn-inner,
.x-btn-disabled.x-btn-default-small .x-btn-icon-el,
.x-btn-disabled.x-btn-default-toolbar-small {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
    opacity: 1 !important;
}

.m-button {
    background-color: var(--button-bg--primary);
    background-image: none;
    border-radius: var(--button-radius);
    padding: var(--button-padding);
    border: none;
}

.m-button.x-btn-focus,
.m-button.x-btn-pressed.x-btn-default-small,
.m-button.x-btn-over {
    background-color: #3856da;
    background-image: none;
    border: none;
}

.m-button .x-btn-inner-default-small {
    color: rgba(255, 255, 255, 0.87);
    text-transform: uppercase;
    font-size: var(--button-text-font-size);
    line-height: 18px;
    padding-left: 8px;
}

.m-button.x-btn.x-btn-disabled.x-btn-default-small {
    background-color: #89abd1;
    background-image: none;
    color: rgba(255, 255, 255, 0.87);
}

.m-button.x-btn .x-btn-wrap {
    outline: none;
}


/* ============================================
Button - Ext.NET Scale Override
============================================*/
/* Default button (Medium scale) */
.x-btn.x-btn-menu-active.x-btn-default-medium, 
.x-btn.x-btn-pressed.x-btn-default-medium,
.x-btn-default-medium,
.x-btn {
    background-image: none;
    border-radius: var(--button-radius);
    padding: 0 12px;
    min-width: var(--button-min-width--medium);
    height: var(--button-size--medium);
    font-weight: var(--button-text-font-weight);
    border: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

/* Small scale buttons */
.x-btn.x-btn-menu-active.x-btn-default-small, 
.x-btn.x-btn-pressed.x-btn-default-small,
.x-btn-default-small {
    height: var(--button-size--small) !important;
    min-width: var(--button-min-width--small) !important;
}

/* Large scale buttons */
.x-btn.x-btn-menu-active.x-btn-default-large, 
.x-btn.x-btn-pressed.x-btn-default-large,
.x-btn-default-large {
    height: var(--button-size--large) !important;
    min-width: var(--button-min-width--large) !important;
}

/* Icon-only buttons for all scales */
.x-btn.icon-only.x-btn-menu-active.x-btn-default-small, 
.x-btn.icon-only.x-btn-pressed.x-btn-default-small,
.x-btn.icon-only.x-btn-default-small {
    padding: var(--button-padding);
    width: var(--button-size--small) !important;
    min-width: var(--button-size--small) !important;
}

.x-btn.icon-only.x-btn-menu-active.x-btn-default-medium, 
.x-btn.icon-only.x-btn-pressed.x-btn-default-medium,
.x-btn.icon-only.x-btn-default-medium,
.x-btn.icon-only {
    padding: var(--button-padding);
    width: var(--button-size--medium) !important;
    min-width: var(--button-size--medium) !important;
}

.x-btn.icon-only.x-btn-menu-active.x-btn-default-large, 
.x-btn.icon-only.x-btn-pressed.x-btn-default-large,
.x-btn.icon-only.x-btn-default-large {
    padding: var(--button-padding);
    width: var(--button-size--large) !important;
    min-width: var(--button-size--large) !important;
}

/* Rounded buttons */
.x-btn.x-btn--rounded.x-btn-default-small {
    border-radius: var(--button-size--small);
}
.x-btn.x-btn--rounded.x-btn-default-medium,
.x-btn.x-btn--rounded {
    border-radius: var(--button-size--medium);
}
.x-btn.x-btn--rounded.x-btn-default-large {
    border-radius: var(--button-size--large);
}

.x-btn.x-btn-menu-active.x-btn--large, 
.x-btn.x-btn-pressed.x-btn--large,
.x-btn.x-btn--large {
    height: var(--button-size--large);
    min-width: var(--button-min-width-large);
}

.x-btn.x-btn--large.x-btn--rounded {
    border-radius: var(--button-size--large);
}

.x-btn .x-btn-icon-el {
    color: inherit !important;
}
.x-btn .x-btn-icon-el::before {
    color: currentColor;
}

.x-btn .x-btn-inner {
    padding: 0;
    color: inherit;
    font-family: var(--font-family) !important;
    font-size: var(--button-text-font-size) !important;
    font-weight: var(--button-text-font-weight) !important;
    font-style: normal;
}

.x-btn-text.x-btn-icon-left > .x-btn-icon-el-default-small {
    margin-right: 8px;
}

.x-btn .x-btn-inner + .x-btn-icon-el {
    padding-left: 8px;
}

.x-btn + .x-btn {
    margin-left: 8px;
}

.x-btn.icon-only.x-btn-menu-active, 
.x-btn.icon-only.x-btn-pressed,
.x-btn.icon-only {
    width: var(--button-size);
    min-width: var(--button-size);
}
.x-btn.icon-only.x-btn-menu-active.x-btn--small, 
.x-btn.icon-only.x-btn-pressed.x-btn--small,
.x-btn.icon-only.x-btn--small {
    width: var(--button-size--small);
    min-width: var(--button-size--small);
}
.x-btn.icon-only.x-btn-menu-active.x-btn--large, 
.x-btn.icon-only.x-btn-pressed.x-btn--large,
.x-btn.icon-only.x-btn--large {
    width: var(--button-size--large);
    min-width: var(--button-size--large);
}
.x-btn-text.x-btn-icon-left > .x-btn-icon-el-default-toolbar-small {
    margin-right: 8px;
}

.x-btn.x-btn-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Style chung cho cả btn và split btn */

/* BUTTON PRIMARY NORMAL */
.x-btn.primary {
    background: var(--button-bg--primary);
    color: var(--button-text-color--default);
    outline: var(--button-bg--primary);
}
.x-btn.primary:not(.x-btn-disabled):hover {
    background: var(--button-bg-hover--primary);
}
.x-btn.primary.x-btn-menu-active.x-btn-default-toolbar-small,
.x-btn.primary:not(.x-btn-disabled):active {
    background: var(--button-bg-active--primary);
}
.x-btn.primary.x-btn-disabled {
    background: var(--button-bg-disabled--primary);
}
.x-btn.primary.x-btn-disabled .x-btn-inner {
    color: var(--button-text-color--default);
}

/* BUTTON DANGER NORMAL */
.x-btn.danger {
    background: var(--button-bg--danger);
    color: var(--button-text-color--default);
}
.x-btn.danger:not(.x-btn-disabled):hover {
    background: var(--button-bg-hover--danger);
}
.x-btn.danger.x-btn-menu-active.x-btn-default-toolbar-small,
.x-btn.danger:not(.x-btn-disabled):active {
    background: var(--button-bg-active--danger);
}
.x-btn.danger.x-btn-disabled {
    background: var(--button-bg-disabled--danger);
}
.x-btn.danger.x-btn-disabled .x-btn-inner {
    color: var(--button-text-color--default);
}

/* BUTTON NEUTRAL NORMAL */
.x-btn.neutral {
    background: var(--button-bg--neutral);
    color: var(--button-text-color--default);
    outline: var(--button-bg--neutral);
}
.x-btn.neutral:not(.x-btn-disabled):hover {
    background: var(--button-bg-hover--neutral);
}
.x-btn.neutral.x-btn-menu-active.x-btn-default-toolbar-small,
.x-btn.neutral:not(.x-btn-disabled):active {
    background: var(--button-bg-active--neutral);
}
.x-btn.neutral.x-btn-disabled {
    background: var(--button-bg-disabled--neutral);
}
.x-btn.neutral.x-btn-disabled .x-btn-inner {
    color: var(--button-text-color--default);
}

/* ============================================
Button - Text Type
============================================*/

/* BUTTON PRIMARY TEXT */
.x-btn.text.primary {
    background: none;
    color: var(--button-text-color--primary);
}
.x-btn.text.primary:not(.x-btn-disabled):hover {
    background: var(--button-text-bg-hover--primary);
}
.x-btn.text.primary.x-btn-menu-active.x-btn-default-toolbar-small,
.x-btn.text.primary:not(.x-btn-disabled):active {
    background: var(--button-text-bg-active--primary);
}
.x-btn.text.primary.x-btn-disabled {
    background: var(--button-text-bg-disabled--primary);
    color: var(--button-text-disabled--primary);
}
.x-btn.text.primary.x-btn-disabled .x-btn-inner {
    color: var(--button-text-disabled--primary);
}

/* BUTTON DANGER TEXT */
.x-btn.text.danger {
    background: none;
    color: var(--button-text-color--danger);
}
.x-btn.text.danger:not(.x-btn-disabled):hover {
    background: var(--button-text-bg-hover--danger);
}
.x-btn.text.danger.x-btn-menu-active.x-btn-default-toolbar-small,
.x-btn.text.danger:not(.x-btn-disabled):active {
    background: var(--button-text-bg-active--danger);
}
.x-btn.text.danger.x-btn-disabled {
    background: var(--button-text-bg-disabled--danger);
    color: var(--button-text-disabled--danger);
}
.x-btn.text.danger.x-btn-disabled .x-btn-inner {
    color: var(--button-text-disabled--danger);
}

/* BUTTON NEUTRAL TEXT */
.x-btn.text.neutral {
    background: none;
    color: var(--button-text-color--neutral);
}
.x-btn.text.neutral:not(.x-btn-disabled):hover {
    background: var(--button-text-bg-hover--neutral);
}
.x-btn.text.neutral.x-btn-menu-active.x-btn-default-toolbar-small,
.x-btn.text.neutral:not(.x-btn-disabled):active {
    background: var(--button-text-bg-active--neutral);
}
.x-btn.text.neutral.x-btn-disabled {
    background: var(--button-text-bg-disabled--neutral);
    color: var(--button-text-disabled--neutral);
}
.x-btn.text.neutral.x-btn-disabled .x-btn-inner {
    color: var(--button-text-disabled--neutral);
}

/* ============================================
Button - Outline Type
============================================*/
.x-btn.outline {
    background-color: var(--white);
    border: 1px solid currentColor;
}
.x-btn.outline.x-btn-default-small {
    border: 1px solid currentColor;
}

/* BUTTON PRIMARY OUTLINE */
.x-btn.outline.primary {
    color: var(--button-text-color--primary);
}
.x-btn.outline.primary:not(.x-btn-disabled):hover {
    background: var(--button-outline-bg-hover--primary);
}
.x-btn.outline.primary.x-btn-menu-active.x-btn-default-toolbar-small,
.x-btn.outline.primary:not(.x-btn-disabled):active {
    background: var(--button-outline-bg-active--primary);
}
.x-btn.outline.primary.x-btn-disabled {
    background: var(--button-outline-bg-disabled--primary);
    color: var(--button-outline-disabled--primary);
}
.x-btn.outline.primary.x-btn-disabled .x-btn-inner {
    color: var(--button-outline-disabled--primary);
}

/* BUTTON DANGER OUTLINE */
.x-btn.outline.danger {
    color: var(--button-text-color--danger);
}
.x-btn.outline.danger:not(.x-btn-disabled):hover {
    background: var(--button-outline-bg-hover--danger);
}
.x-btn.outline.danger.x-btn-menu-active.x-btn-default-toolbar-small,
.x-btn.outline.danger:not(.x-btn-disabled):active {
    background: var(--button-outline-bg-active--danger);
}
.x-btn.outline.danger.x-btn-disabled {
    background: var(--button-outline-bg-disabled--danger);
    color: var(--button-outline-disabled--danger);
}
.x-btn.outline.danger.x-btn-disabled .x-btn-inner {
    color: var(--button-outline-disabled--danger);
}

/* BUTTON NEUTRAL OUTLINE */
.x-btn.outline.neutral {
    color: var(--button-text-color--neutral);
    border: 1px solid var(--button-outline-border--neutral);
}
.x-btn.outline.neutral:not(.x-btn-disabled):hover {
    background: var(--button-outline-bg-hover--neutral);
}
.x-btn.outline.neutral.x-btn-menu-active.x-btn-default-toolbar-small,
.x-btn.outline.neutral:not(.x-btn-disabled):active {
    background: var(--button-outline-bg-active--neutral);
}
.x-btn.outline.neutral.x-btn-disabled {
    background: var(--button-outline-bg-disabled--neutral);
    color: var(--button-outline-disabled--neutral);
}
.x-btn.outline.neutral.x-btn-disabled .x-btn-inner {
    color: var(--button-text-disabled--neutral);
}

/* ============================================
Split Button
============================================*/
.m-split-btn.x-btn.x-btn-pressed,
.m-split-btn.x-btn.x-btn-focus,
.m-split-btn.x-btn.x-btn-menu-active,
.m-split-btn {
    padding: 0 0 0 12px;
}
.m-split-btn.icon-only {
    padding: var(--button-padding);
}

.x-btn-wrap-default-toolbar-small.x-btn-split-right:after,
.x-btn-wrap-default-small.x-btn-split-right:after {
    content: "";
    background-color: currentColor;
    -webkit-mask-image: var(--sprite-icon);
    mask-image: var(--sprite-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: -720px -24px;
    mask-position: -720px -24px;
    /* -webkit-mask-size: contain;
    mask-size: contain; */
    width: 24px;
    height: 24px;
    scale: 0.8;
    margin: 4px;
    background-image: none;
}

.m-split-btn.x-btn-over > .x-btn-split.x-btn-split-right:after {
    background-image: none;
}

.x-btn-split .x-btn-inner {
    padding-right: 12px;
    border-right: 1px solid currentColor;
    height: 100%;
    line-height: var(--button-size--medium);
}

/* Split button line-height for different scales */
.x-btn-default-small .x-btn-split .x-btn-inner {
    line-height: var(--button-size--small);
}
.x-btn-default-medium .x-btn-split .x-btn-inner {
    line-height: var(--button-size--medium);
}
.x-btn-default-large .x-btn-split .x-btn-inner {
    line-height: var(--button-size--large);
}
/* SPLIT BUTTON DANGER OUTLINE */
.x-btn-split.outline.danger {
    border: 1px solid var(--button-text-color--danger);
}
/* SPLIT BUTTON NEUTRAL OUTLINE */
.m-split-btn.outline.neutral {
    border: 1px solid var(--button-outline-border--neutral);
}
.m-split-btn.outline.neutral .x-btn-inner {
    border-right-color: var(--button-outline-border--neutral);
}

/* FILE UPLOAD */
.x-field.m-fileuploadfield .x-btn {
    border: 1px solid var(--button-outline-border--neutral);
    background-color: var(--white);
    border-radius: var(--button-radius);
    color: var(--button-text-color--neutral);
    width: 100%;
}
.x-field.m-fileuploadfield .x-btn.x-btn-over{
    background-image: none;
    background-color: var(--button-outline-bg-hover--neutral);
}
.x-field.m-fileuploadfield .x-btn.x-btn-focus,
.x-field.m-fileuploadfield .x-btn.x-btn-pressed
{
    background: var(--button-outline-bg-active--neutral);
}
.x-field.m-fileuploadfield .x-btn .x-btn-icon-el::before {
    color: var(--icon-neutral);
}

/* [MISASwitchDate Style] */

.m-misa-switchdate-container .x-btn.m-dbo-switchbutton {
    background: none !important;
    background-image: none !important;
    height: var(--input-label-line-height);
}

.m-misa-switchdate-container .x-btn.m-dbo-switchbutton .x-btn-disabled {
    background: none !important;
    background-image: none !important;
}

:root {
    --checkbox-radius: 4px;
    --checkbox-size: 16px;
    --checkbox-border-size: 1px;
    --checkbox-label-space: 8px;
    --checkbox-outer-size: calc(
        var(--checkbox-size) + var(--checkbox-border-size) * 2
    );
}
.m-checkbox-editor .x-form-checkbox {
    background: none;
    width: 25px;
    height: 22px;
    margin: 0;
}

.m-checkbox-editor .x-form-checkbox:before {
    font-family: MISAIconFont !important;
    speak: none;
    font-weight: normal;
    font-style: normal;
    font-size: 16px !important;
    color: rgba(102, 102, 102, 0.9);
    background: transparent !important;
    line-height: 24px;
    padding-left: 2px;
    text-transform: none;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    content: "\E057";
    top: -1px;
    left: 5px;
    position: absolute;
}

.m-checkbox-editor.x-form-cb-checked .x-form-checkbox:before {
    font-family: MISAIconFont !important;
    speak: none;
    font-weight: normal;
    font-style: normal;
    font-size: 16px !important;
    color: rgba(102, 102, 102, 0.9);
    background: transparent !important;
    line-height: 24px;
    padding-left: 2px;
    text-transform: none;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    content: "\E056" !important;
    left: 5px;
    top: -1px;
    position: absolute;
}

.m-checkbox-editor.x-item-disabled
    input.x-form-checkbox
    + label.x-form-cb-label::before,
.m-checkbox-editor.x-item-disabled
    input.x-form-checkbox
    + label.m-checkboxgroup-boxlabel::before {
    color: #666 !important;
}

.m-checkbox-editor .x-form-checkbox:hover:before,
.m-checkbox-editor .x-form-checkbox-focus::before {
    color: #4262f0 !important;
}

.m-checkbox-configlayout-active {
    opacity: 1 !important;
}

.m-checkbox-configlayout-active .x-menu-item-checkbox {
    background-image: none !important;
}

.m-checkbox-configlayout-active .x-menu-item-checkbox::before {
    font-family: MISAIconFont !important;
    speak: none;
    font-weight: normal;
    font-style: normal;
    font-size: 16px !important;
    color: rgba(102, 102, 102, 0.9);
    background: transparent !important;
    line-height: 20px;
    text-transform: none;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    content: "\E056";
    position: absolute;
}

.m-checkbox-configlayout-active .x-menu-item-text-default {
    padding-left: 24px !important;
    cursor: default !important;
}

/*NTXUAN 11.01.2020 Bổ sung thêm trường hợp inactive*/
.m-checkbox-configlayout-inactive {
    opacity: 1 !important;
}

.m-checkbox-configlayout-inactive .x-menu-item-checkbox {
    background-image: none !important;
}

.m-checkbox-configlayout-inactive .x-menu-item-checkbox::before {
    font-family: MISAIconFont !important;
    speak: none;
    font-weight: normal;
    font-style: normal;
    font-size: 16px !important;
    color: rgba(102, 102, 102, 0.9);
    background: transparent !important;
    line-height: 20px;
    text-transform: none;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    content: "\E057";
    position: absolute;
}

.m-checkbox-configlayout-inactive .x-menu-item-text-default {
    padding-left: 24px !important;
    cursor: default !important;
}

.row-checkbox-custom .groupcontrol.m-checkboxgroup {
    margin-top: 30px;
}

.groupcontrol.m-checkboxgroup {
    display: flex;
    height: 20px !important;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.m-checkbox .x-form-cb-wrap-default,
.m-checkboxgroup .x-form-cb-wrap-default {
    height: auto;
    min-width: 28px;
}
.m-checkbox .x-form-checkbox {
    top: calc(50% - var(--checkbox-outer-size) / 2);
}

.m-checkbox .x-form-checkbox,
.m-checkboxgroup .x-form-checkbox {
    background: none;
    width: calc(var(--checkbox-size) + var(--checkbox-border-size) * 2);
    height: calc(var(--checkbox-size) + var(--checkbox-border-size) * 2);
    margin-top: 0;
    border: var(--checkbox-border-size) solid var(--checkbox-border-color);
    border-radius: var(--checkbox-radius);
    cursor: pointer;
}
.m-checkboxgroup .x-form-checkbox {
    left: 0;
}

.m-checkbox .x-form-checkbox:hover,
.m-checkboxgroup .x-form-checkbox:hover {
    border-color: var(--checkbox-border-color-hover);
    background: var(--checkbox-bg-hover);
}

.m-checkbox .x-form-checkbox.x-form-checkbox-focus,
.m-checkboxgroup .x-form-checkbox.x-form-checkbox-focus {
    outline: var(--checkbox-border-color-focus);
    background: var(--checkbox-bg-focus);
}

.m-checkbox.x-form-cb-checked .x-form-checkbox,
.m-checkboxgroup.x-form-cb-checked .x-form-checkbox {
    border-color: var(--checkbox-border-color--checked);
    background-color: var(--checkbox-bg--checked);
}

.x-mcombo-item-checked::before,
.m-checkbox.x-form-cb-checked .x-form-checkbox::before,
.m-checkboxgroup.x-form-cb-checked .x-form-checkbox::before {
    font-family: MISAIconFont !important;
    content: "\E056";
    speak: none;
    font-weight: normal;
    font-style: normal;
    color: var(--checkbox-bg--checked);
    background: white;
    line-height: var(--checkbox-size);
    text-transform: none;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    position: absolute;
    border-radius: 50%;
}
.m-checkbox.x-form-cb-checked .x-form-checkbox::before,
.m-checkboxgroup.x-form-cb-checked .x-form-checkbox::before {
    left: -1px;
    font-size: calc(
        var(--checkbox-size) + var(--checkbox-border-size) * 2
    ) !important;
}

.x-mcombo-item-checked::before {
    font-size: calc(
        var(--checkbox-size) + var(--checkbox-border-size) * 2 - 1px
    ) !important;
}

.m-checkbox.x-form-cb-checked .x-form-checkbox:hover,
.m-checkboxgroup.x-form-cb-checked .x-form-checkbox:hover {
    border-color: var(--checkbox-border-color-hover--checked);
    background-color: var(--checkbox-bg-hover--checked);
}
.m-checkbox.x-form-cb-checked .x-form-checkbox:hover::before,
.m-checkboxgroup.x-form-cb-checked .x-form-checkbox:hover::before {
    color: var(--checkbox-bg-hover--checked);
}

.m-checkbox.x-form-cb-checked .x-form-checkbox.x-form-checkbox-focus,
.m-checkboxgroup.x-form-cb-checked .x-form-checkbox.x-form-checkbox-focus {
    border-color: var(--checkbox-border-color-focus--checked);
    background-color: var(--checkbox-bg-focus--checked);
}
.m-checkbox.x-form-cb-checked .x-form-checkbox.x-form-checkbox-focus::before,
.m-checkboxgroup.x-form-cb-checked
    .x-form-checkbox.x-form-checkbox-focus::before {
    color: var(--checkbox-bg-focus--checked);
}

.m-checkbox .x-form-checkbox + .x-form-cb-label,
.m-checkboxgroup .x-form-checkbox + .x-form-cb-label {
    padding-left: calc(var(--checkbox-size) + var(--checkbox-label-space));
    font: unset;
    margin-top: unset;
}

/* Switch checkbox */
.m-checkbox.m-checkbox-switch .x-form-checkbox {
    background: var(--switch-bg-off);
    border: none;
    border-radius: var(--switch-border-radius);
    width: var(--switch-width);
    height: var(--switch-height);
    margin: 0;
    padding: var(--switch-padding);
    position: relative;
    transition: var(--switch-transition);
    cursor: pointer;
    display: inline-block;
}

/* Switch selector (thumb) - Off state */
.m-checkbox.m-checkbox-switch .x-form-checkbox::before {
    content: "";
    width: var(--switch-selector-size);
    height: var(--switch-selector-size);
    background: var(--switch-selector-bg);
    border-radius: 50%;
    box-shadow: var(--switch-selector-shadow);
    position: absolute;
    left: var(--switch-padding);
    top: var(--switch-padding);
    transition: var(--switch-transition);
    transform: translateX(0);
}

/* Switch - On state */
.m-checkbox.m-checkbox-switch.x-form-cb-checked .x-form-checkbox {
    background: var(--switch-bg-on);
}

.m-checkbox.m-checkbox-switch.x-form-cb-checked .x-form-checkbox::before {
    transform: translateX(
        calc(
            var(--switch-width) - var(--switch-selector-size) -
                var(--switch-padding) * 2
        )
    );
}

/* Switch - Disabled Off state */
.m-checkbox.m-checkbox-switch.x-item-disabled .x-form-checkbox {
    background: var(--switch-bg-off-disabled);
    cursor: not-allowed;
}

/* Switch - Disabled On state */
.m-checkbox.m-checkbox-switch.x-item-disabled.x-form-cb-checked
    .x-form-checkbox {
    background: var(--switch-bg-on-disabled);
}

/* Switch - Hover states (only when not disabled) */
.m-checkbox.m-checkbox-switch:not(.x-item-disabled) .x-form-checkbox:hover {
    opacity: 0.8;
}

/* Switch - Focus states */
.m-checkbox.m-checkbox-switch .x-form-checkbox:focus,
.m-checkbox.m-checkbox-switch .x-form-checkbox.x-form-checkbox-focus {
    outline: 2px solid var(--brand-light-hover);
    outline-offset: 2px;
}

/* Switch label styling */
.m-checkbox.m-checkbox-switch .x-form-cb-wrap-inner {
    display: flex;
    align-items: center;
}

.m-checkbox.m-checkbox-switch .x-form-cb-label {
    color: var(--switch-text-color);
    margin-top: 0;
    padding-left: 8px;
    font: unset;
}

/* .m-checkbox.m-checkbox-switch.x-item-disabled .x-form-cb-label {
    color: var(--switch-text-color-disabled);
} */

:root {
    /* Radio Variables */
    --radio-size: 16px;
    --radio-border-size: 1.5px;
    --radio-gap: 8px;
    --radio-border-radius: 50%;
    
    /* Unchecked states */
    --radio-bg: var(--white);
    --radio-bg-hover: var(--white);
    --radio-bg-pressed: var(--white);
    --radio-bg-focus: var(--white);
    --radio-bg-disabled: var(--neutral-100);
    --radio-border-color: var(--neutral-200);
    --radio-border-color-hover: var(--brand-default);
    --radio-border-color-pressed: var(--brand-pressed);
    --radio-border-color-focus: var(--brand-default);
    --radio-border-color-disabled: var(--neutral-200);
    
    /* Checked states */
    --radio-bg--checked: var(--white);
    --radio-bg-hover--checked: var(--white);
    --radio-bg-pressed--checked: var(--white);
    --radio-bg-focus--checked: var(--white);
    --radio-bg-disabled--checked: var(--neutral-100);
    --radio-border-color--checked: var(--brand-default);
    --radio-border-color-hover--checked: var(--brand-hover);
    --radio-border-color-pressed--checked: var(--brand-pressed);
    --radio-border-color-focus--checked: var(--brand-hover);
    --radio-border-color-disabled--checked: var(--brand-disabled);
    
    /* Inner dot */
    --radio-dot-size: 6px;
    --radio-dot-color: var(--brand-default);
    --radio-dot-color-hover: var(--brand-hover);
    --radio-dot-color-pressed: var(--brand-pressed);
    --radio-dot-color-focus: var(--brand-hover);
    --radio-dot-color-disabled: var(--brand-disabled);
    
    /* Label */
    --radio-label-color: var(--text-primary);
    --radio-label-color-disabled: var(--text-disabled);
    --radio-label-font-size: var(--font-size-base);
    --radio-label-line-height: var(--line-height-normal);
    --radio-label-font-weight: var(--font-weight-regular);
    
    /* Focus ring */
    --radio-focus-ring-size: 2px;
    --radio-focus-ring-color: var(--brand-light-hover);
    --radio-focus-ring-offset: 2px;
    
    /* Transitions */
    --radio-transition: all 0.2s ease;
}

.m-radiobuttongroup .x-form-cb-wrap-inner .x-form-cb-label-default.x-form-cb-label-after,
.m-radiogroup .x-form-cb-label-default.x-form-cb-label-after {
    padding-left: 0;
}

.x-form-item-body-default.x-form-checkboxgroup-body {
    padding: unset;
}

/* Base radio group styles */
.m-radiogroup {
    position: relative;
    display: flex;
    flex-direction: column;
}

.m-radiogroup .x-form-cb-label {
    margin-top: 0;
    margin-left: calc(var(--radio-size) + var(--radio-gap));
    font-family: var(--font-family);
    font-size: var(--radio-label-font-size);
    font-weight: var(--radio-label-font-weight);
    line-height: var(--radio-label-line-height);
    color: var(--radio-label-color);
    cursor: pointer;
    transition: var(--radio-transition);
    user-select: none;
}

/* Hide default radio input */
.m-radiogroup .x-form-radio-default {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

/* Custom radio button using ::before pseudo-element */
.m-radiogroup span.x-form-radio-default + label.x-form-cb-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--radio-size);
    height: var(--radio-size);
    border: var(--radio-border-size) solid var(--radio-border-color);
    border-radius: var(--radio-border-radius);
    background-color: var(--radio-bg);
    transition: var(--radio-transition);
    box-sizing: border-box;
}

/* Inner dot for checked state using ::after pseudo-element */
.m-radiogroup span.x-form-radio-default + label.x-form-cb-label::after {
    content: "";
    position: absolute;
    left: calc((var(--radio-size) - var(--radio-dot-size)) / 2);
    top: 50%;
    transform: translateY(-50%);
    width: var(--radio-dot-size);
    height: var(--radio-dot-size);
    border-radius: var(--radio-border-radius);
    background-color: var(--radio-dot-color);
    opacity: 0;
    scale: 0;
    transition: var(--radio-transition);
}

/* Checked state */
.m-radiogroup .x-form-cb-checked span.x-form-radio-default + label.x-form-cb-label::before {
    border-color: var(--radio-border-color--checked);
    background-color: var(--radio-bg--checked);
}

.m-radiogroup .x-form-cb-checked span.x-form-radio-default + label.x-form-cb-label::after {
    opacity: 1;
    scale: 1;
}

/* Hover states */
.m-radiogroup span.x-form-radio-default + label.x-form-cb-label:hover::before {
    border-color: var(--radio-border-color-hover);
    background-color: var(--radio-bg-hover);
}

.m-radiogroup .x-form-cb-checked span.x-form-radio-default + label.x-form-cb-label:hover::before {
    border-color: var(--radio-border-color-hover--checked);
    background-color: var(--radio-bg-hover--checked);
}

.m-radiogroup .x-form-cb-checked span.x-form-radio-default + label.x-form-cb-label:hover::after {
    background-color: var(--radio-dot-color-hover);
}

/* Focus states */
.m-radiogroup span.x-form-checkbox-focus + label.x-form-cb-label::before,
.m-radiogroup .x-form-cb-checked span.x-form-checkbox-focus + label.x-form-cb-label::before {
    border-color: var(--radio-border-color-focus);
    box-shadow: 0 0 0 var(--radio-focus-ring-offset) var(--radio-focus-ring-color);
}

.m-radiogroup .x-form-cb-checked span.x-form-checkbox-focus + label.x-form-cb-label::after {
    background-color: var(--radio-dot-color-focus);
}

/* Disabled states */
.m-radiogroup.x-item-disabled span.x-form-radio-default + label.x-form-cb-label {
    color: var(--radio-label-color-disabled);
    cursor: not-allowed;
}

.m-radiogroup.x-item-disabled span.x-form-radio-default + label.x-form-cb-label::before {
    border-color: var(--radio-border-color-disabled);
    background-color: var(--radio-bg-disabled);
}

.m-radiogroup.x-item-disabled.x-form-cb-checked span.x-form-radio-default + label.x-form-cb-label::before {
    border-color: var(--radio-border-color-disabled--checked);
    background-color: var(--radio-bg-disabled--checked);
}

.m-radiogroup.x-item-disabled.x-form-cb-checked span.x-form-radio-default + label.x-form-cb-label::after {
    background-color: var(--radio-dot-color-disabled);
}

/* Radio Button Group Styles */
.m-radiobuttongroup {
    position: relative;
}

.m-radiobuttongroup .x-form-checkboxgroup-body {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.m-radiobuttongroup .x-form-checkboxgroup-body > div {
    width: auto !important;
    height: auto !important;
    min-height: calc(var(--radio-size) + var(--space-1));
}

.m-radiobuttongroup .x-form-radio-default {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

.m-radiobuttongroup .x-form-radio-group {
    width: auto !important;
    position: relative;
}

/* Float layout for radio button groups */
.m-radiobuttongroup-float .x-form-radio-group {
    float: left;
    margin-right: var(--space-4);
}

.m-radiobuttongroup-float::after {
    content: "";
    display: table;
    clear: both;
}

/* Radio button group custom styles */
.m-radiobuttongroup span.x-form-radio-default + label.x-form-cb-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--radio-size);
    height: var(--radio-size);
    border: var(--radio-border-size) solid var(--radio-border-color);
    border-radius: var(--radio-border-radius);
    background-color: var(--radio-bg);
    transition: var(--radio-transition);
    box-sizing: border-box;
}

.m-radiobuttongroup span.x-form-radio-default + label.x-form-cb-label::after {
    content: "";
    position: absolute;
    left: calc((var(--radio-size) - var(--radio-dot-size)) / 2);
    top: 50%;
    transform: translateY(-50%);
    width: var(--radio-dot-size);
    height: var(--radio-dot-size);
    border-radius: var(--radio-border-radius);
    background-color: var(--radio-dot-color);
    opacity: 0;
    scale: 0;
    transition: var(--radio-transition);
}

.m-radiobuttongroup .x-form-cb-checked span.x-form-radio-default + label.x-form-cb-label::before {
    border-color: var(--radio-border-color--checked);
    background-color: var(--radio-bg--checked);
}

.m-radiobuttongroup .x-form-cb-checked span.x-form-radio-default + label.x-form-cb-label::after {
    opacity: 1;
    scale: 1;
}

.m-radiobuttongroup .x-box-inner {
    width: 100% !important;
    height: 100% !important;
}

.m-radiobuttongroup .x-box-target {
    width: 100% !important;
}

.m-radiobuttongroup .x-form-cb-label {
    margin-top: 0;
    margin-left: calc(var(--radio-size) + var(--radio-gap));
    font-family: var(--font-family);
    font-size: var(--radio-label-font-size);
    font-weight: var(--radio-label-font-weight);
    line-height: var(--radio-label-line-height);
    color: var(--radio-label-color);
    cursor: pointer;
    transition: var(--radio-transition);
    user-select: none;
    position: unset;
}

/* Radio button group hover states */
.m-radiobuttongroup span.x-form-radio-default + label.x-form-cb-label:hover::before {
    border-color: var(--radio-border-color-hover);
    background-color: var(--radio-bg-hover);
}

.m-radiobuttongroup .x-form-cb-checked span.x-form-radio-default + label.x-form-cb-label:hover::before {
    border-color: var(--radio-border-color-hover--checked);
    background-color: var(--radio-bg-hover--checked);
}

.m-radiobuttongroup .x-form-cb-checked span.x-form-radio-default + label.x-form-cb-label:hover::after {
    background-color: var(--radio-dot-color-hover);
}

/* Radio button group focus states */
.m-radiobuttongroup span.x-form-checkbox-focus + label.x-form-cb-label::before,
.m-radiobuttongroup .x-form-cb-checked span.x-form-checkbox-focus + label.x-form-cb-label::before {
    border-color: var(--radio-border-color-focus);
    box-shadow: 0 0 0 var(--radio-focus-ring-offset) var(--radio-focus-ring-color);
}

.m-radiobuttongroup .x-form-cb-checked span.x-form-checkbox-focus + label.x-form-cb-label::after {
    background-color: var(--radio-dot-color-focus);
}

/* Radio button group disabled states */
.m-radiobuttongroup.x-item-disabled span.x-form-radio-default + label.x-form-cb-label {
    color: var(--radio-label-color-disabled);
    cursor: not-allowed;
}

.m-radiobuttongroup.x-item-disabled span.x-form-radio-default + label.x-form-cb-label::before {
    border-color: var(--radio-border-color-disabled);
    background-color: var(--radio-bg-disabled);
}

.m-radiobuttongroup.x-item-disabled.x-form-cb-checked span.x-form-radio-default + label.x-form-cb-label::before {
    border-color: var(--radio-border-color-disabled--checked);
    background-color: var(--radio-bg-disabled--checked);
}

.m-radiobuttongroup.x-item-disabled.x-form-cb-checked span.x-form-radio-default + label.x-form-cb-label::after {
    background-color: var(--radio-dot-color-disabled);
}

:root {
    --spinner-size: 24px;
}

.x-form-text-default::placeholder {
    font-size: var(--input-font-size);
}
.x-field .x-form-text-wrap {
    height: var(--input-height);
}
.x-form-text-wrap-toolbar.x-form-text-wrap {
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    height: var(--input-height);
}

.x-form-text-wrap-toolbar.x-form-text-wrap-focus {
    border-color: var(--input-border-color--focus);
}

.x-form-text-wrap-toolbar .x-form-text-toolbar {
    background: var(--white);
    background-image: none;
    padding: var(--input-padding);
    font: unset;
}

.x-form-text-wrap .x-form-field.x-form-invalid-field {
    border-color: var(--input-border-color--invalid) !important;
}

.m-textbox .x-form-text-default {
    border: 1px solid var(--input-border-color);
    line-height: var(--input-line-height);
    height: 100%;
    padding: var(--input-padding);
    border-radius: var(--input-border-radius);
    background-image: none;
}

.m-textbox .x-form-text-wrap-default {
    border: 0 !important;
}

.m-textbox .x-form-item-label-default {
    padding-top: 8px;
    font-size: var(--input-font-size);
}

.m-textbox.x-field-focus .x-form-text-wrap-default {
    border-color: var(--input-border-color--focus);
}

.m-textarea .x-form-text-default {
    padding: 6px;
    background: #fff;
    background-image: none;
    border-radius: 3px;
    line-height: 18px;
}

.m-textarea .x-form-text-wrap-default {
    border-radius: 3px;
    border: 1px solid #9e9e9e;
}

.m-textarea .x-form-item-label-default {
    padding-top: 8px;
    font-size: var(--input-font-size);
}

.m-textarea.x-field-focus .x-form-text-wrap-default {
    border-color: #4262f0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.m-textarea.x-form-textarea-one-row .x-form-text-default {
    min-height: 30px;
    height: 30px;
}

.m-textarea.x-form-textarea-four-row .x-form-text-default {
    min-height: 70px;
    height: 70px;
}

.m-textarea.x-form-textarea-two-row .x-form-text-default {
    min-height: 46px;
    height: 46px;
}

.m-numberfield .x-form-text-default {
    padding: 6px;
    border-radius: 3px;
    background: #fff;
    background-image: none;
    height: 30px;
}

.m-numberfield .x-form-text-wrap.x-form-text-wrap-default {
    border-radius: 3px;
    border: 1px solid #9e9e9e;
}

.m-numberfield
    .x-form-text-wrap:has(+ .x-form-trigger:not([style="display:none;"]))
    .x-form-text-default {
    padding: var(--input-combo-padding);
}

.m-numberfield.x-field-focus .x-form-text-wrap-default {
    border-color: var(--input-border-color--focus);
}

.m-numberfield .x-form-trigger-default {
    background: #fff;
    border: 1px solid #9e9e9e;
}

.m-numberfield-spin .x-form-text-default {
    padding: 6px;
    background: #fff;
    background-image: none;
    border-radius: 0 0 3px 3px;
}

.m-numberfield-spin .x-form-item-label {
    vertical-align: middle;
    padding-top: unset;
}

.m-numberfield-spin .x-form-trigger-wrap {
    border-radius: var(--input-border-radius);
    border: 1px solid var(--input-border-color);
    overflow: hidden;
}

.m-numberfield-spin .x-form-text-wrap-default {
    border: none;
}

.m-numberfield-spin.x-field-focus .x-form-trigger-wrap {
    border-color: var(--input-border-color--focus);
}

.m-numberfield-spin
    .x-form-trigger:has(+ .x-form-trigger:not([style="display:none;"]))
    .x-form-text-default {
    padding: var(--input-combo-padding);
}

.m-numberfield-spin .x-form-trigger-default {
    background: #fff;
    border-radius: 0 3px 3px 0;
    border: none;
}

.m-numberfield-spin .x-form-trigger-wrap-toolbar {
    border: none;
}

.m-numberfield-spin .x-form-item-label-inner-toolbar {
    color: #fff;
    padding-top: 4px;
}

.m-numberfield-spin .x-form-text-wrap-toolbar {
    border: 1px solid #9e9e9e;
    border-right: none;
    border-radius: 3px 0 0 3px;
}

.m-numberfield-spin .x-form-trigger-spinner-toolbar {
    background: #fff;
    background-image: none;
    border: 1px solid #9e9e9e;
    border-left: none;
    border-radius: 0 3px 3px 0;
}

.m-numberfield-spin .x-form-spinner-toolbar {
}

.m-numberfield-spin .x-form-text-toolbar {
    font-size: var(--input-font-size);
    background: #fff;
    background-image: none;
    padding: 1px 6px;
}

/*#endregion */
.m-numberfield-spin .x-form-spinner-default {
    background-image: none;
    border: none;
    font-family: MISAIconFont !important;
    speak: none;
    background: transparent !important;
    line-height: 24px;
    padding-left: 2px;
    text-transform: none;
    letter-spacing: normal;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: "liga";
    content: "\E057";
    width: var(--spinner-size);
    height: 50%;
    position: relative;
}

.m-numberfield-spin .x-form-spinner-up-default.x-form-spinner-focus,
.m-numberfield-spin .x-form-spinner-down-default.x-form-spinner-focus {
    /*color: #3276c3 !important;*/
}

.m-numberfield-spin .x-form-spinner-up-toolbar.x-form-spinner-over,
.m-numberfield-spin .x-form-spinner-down-toolbar.x-form-spinner-over,
.m-numberfield-spin .x-form-spinner-up-default.x-form-spinner-over,
.m-numberfield-spin .x-form-spinner-down-default.x-form-spinner-over {
    color: var(--brand-default) !important;
}

.m-numberfield-spin .x-form-spinner::before {
    position: absolute;
    color: currentColor;
    width: var(--spinner-size);
    height: 100%;
}

.m-numberfield-spin .x-form-spinner-up-toolbar::before,
.m-numberfield-spin .x-form-spinner-up-default::before {
    content: "\E066";
    top: -1px;
    right: 0;
}

.m-numberfield-spin .x-form-spinner-down-toolbar::before,
.m-numberfield-spin .x-form-spinner-down-default::before {
    content: "\E065";
    bottom: 4px;
    right: 0;
}

.m-datefield .x-form-text-default {
    padding: 6px;
    height: 30px;
    line-height: 30px;
}

.m-datefield .x-form-text-wrap-default {
    border-radius: 3px;
    border: 1px solid #9e9e9e;
}

.m-datefield.x-field-focus .x-form-text-wrap-default {
    border-color: #4262f0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.m-datefield .x-form-item-label-default {
    padding-top: 8px;
    font-size: var(--font-size-base);
}

.m-datefield .x-form-date-trigger {
    font-family: MISAIconFont !important;
    speak: none;
    font-weight: normal;
    font-style: normal;
    font-size: 17px !important;
    color: rgba(0, 0, 0, 0.54) !important;
    background: transparent !important;
    line-height: 24px;
    text-transform: none;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    border: none;
    padding-left: 10px;
    padding-right: 2px;
    background-image: none;
}

.m-datefield .x-form-date-trigger::before {
    content: "\E004";
    position: relative;
    top: 4px;
    right: 1px;
}

.m-datefield.x-item-disabled .x-form-date-trigger::before {
    color: rgba(0, 0, 0, 0.26) !important;
}

.m-datefield .x-form-trigger-over::before {
    color: #4262f0;
}

.m-textbox-editor .x-form-text-default {
    padding-left: 6px;
    padding-right: 6px;
    background: #fff;
    background-image: none;
    height: 26px;
    line-height: 26px;
    border-radius: 3px;
}

.m-textbox-editor .x-form-text-wrap-default {
    border: 1px solid #9e9e9e;
    border-radius: 3px;
}

.m-textbox-editor.x-field-focus .x-form-text-wrap-default {
    border-color: #3892d3;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.m-numberfield-editor {
    background: #fff;
}

.m-numberfield-editor .x-form-text-default {
    padding: 6px;
    border-radius: 3px;
    background: #fff;
    background-image: none;
    height: 26px;
    text-align: right;
}

.m-numberfield-editor .x-form-text-wrap-default {
    border-radius: 3px;
    border: 1px solid #9e9e9e;
}

.m-numberfield-editor.x-field-focus .x-form-text-wrap-default {
    border-color: #3892d3;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.m-numberfield-editor .x-form-trigger-default {
    background: #fff;
    border: 1px solid #9e9e9e;
}

.m-fileuploadfield .x-form-text-field-body-default {
    max-width: none;
}

.m-textareagroup .x-form-text-default {
    line-height: 18px;
}

.m-textareagroup.x-form-textarea-one-row .x-form-text-default {
    min-height: 22px;
    height: 22px;
}

.m-textareagroup.x-form-textarea-four-row .x-form-text-default {
    min-height: 74px;
    height: 74px;
}

.m-textareagroup.x-form-textarea-two-row .x-form-text-default {
    min-height: 38px;
    height: 38px;
}

/* =================================================================
   MISA COMBOBOX STYLES
   =================================================================
   Organized by CSS specificity and functional groups for better 
   maintainability and proper style cascading.
   ================================================================= */

/* =================================================================
   BASE COMBOBOX STYLES (Lowest specificity)
   ================================================================= */

/* Base label styles */
.m-combobox .x-form-item-label {
    padding: 0;
}

.m-combobox .x-form-item-label-default {
    padding-top: 8px;
    font-size: var(--input-font-size);
}

.m-combobox .x-form-item-label.x-form-item-label-right {
    padding-right: 12px !important;
}

/* Base input field styles */
.m-combobox .x-form-text,
.m-combobox .x-form-text-default,
.m-combobox .x-form-text-toolbar {
    border: 1px solid var(--input-border-color);
    line-height: var(--input-line-height);
    height: 100%;
    padding: var(--input-padding);
    border-radius: var(--input-border-radius);
}

.m-combobox .x-form-text-wrap-default {
    border: none;
}
.m-combobox .x-form-trigger-wrap {
    position: relative;
}

/* Base trigger button styles */
.m-combobox .x-form-trigger,
.m-combobox .x-form-trigger-default,
.m-combobox .x-form-trigger-toolbar {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
}

/* Base arrow trigger styles */
.m-combobox .x-form-arrow-trigger {
    font-family: MISAIconFont !important;
    speak: none;
    font-weight: normal;
    font-style: normal;
    font-size: 16px !important;
    color: rgba(0, 0, 0, 0.54) !important;
    background: transparent !important;
    line-height: 24px;
    text-transform: none;
    letter-spacing: normal;
    border: none;
    transition: all 0.2s linear;
    /* Browser optimizations */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
}

.m-combobox .x-form-arrow-trigger::before {
    content: "";
    width: 16px;
    height: 16px;
    display: block;
    background-image: url("/Content/Images/Icon/ic_arrow_down_gray.svg") !important;
    position: relative;
    top: 0;
}

/* Advanced selector for combo padding */
.m-combobox [data-ref="inputWrap"]:has(+ .x-form-trigger) .x-form-text {
    padding: var(--input-combo-padding);
}

/* =================================================================
   TOOLBAR VARIANT STYLES
   ================================================================= */

.m-combobox .x-form-item-label-inner-toolbar {
    padding: 0;
    line-height: var(--input-height);
}

.m-combobox .x-form-text-wrap-toolbar {
    border: none;
}

.m-combobox .x-form-trigger-toolbar {
    border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
    background-image: none;
}

.m-combobox .x-form-text-toolbar {
    background: #fff;
    background-image: none;
    padding: 1px 6px 2px;
}

/* =================================================================
   EDITOR VARIANT STYLES
   ================================================================= */

.m-combobox-editor .x-form-text-default {
    padding-left: 6px;
    padding-right: 6px;
    font-size: var(--input-font-size);
    background-image: none;
    border-radius: 0 0 3px 3px;
}

.m-combobox-editor .x-form-text-wrap-default {
    border: 1px solid #9e9e9e;
    border-right: none;
    height: 26px;
    border-radius: 3px 0 0 3px;
}

.m-combobox-editor .x-form-trigger-default {
    width: 24px;
    background: none;
    border-width: 1px 1px 1px 0;
    border-color: #9e9e9e;
    border-style: solid;
    border-radius: 0 3px 3px 0;
}

.m-combobox-editor .x-form-arrow-trigger::before {
    font-family: MISAIconFont !important;
    speak: none;
    font-weight: normal;
    font-style: normal;
    font-size: 16px !important;
    color: rgba(0, 0, 0, 0.54) !important;
    background: transparent !important;
    line-height: 16px;
    text-transform: none;
    letter-spacing: normal;
    border: none;
    content: "\E065";
    position: relative;
    right: 0;
    top: 5px;
    /* Browser optimizations */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
}

/* =================================================================
   MULTI-SELECT COMBOBOX STYLES
   ================================================================= */

.x-mcombo-item-checked,
.x-mcombo-item-unchecked {
    background: none;
    padding-left: var(--dropdown-checkbox-width);
    height: var(--dropdown-item-height);
    line-height: var(--dropdown-item-height);
    color: var(--dropdown-item-color);
}

.x-mcombo-item-checked::before,
.x-mcombo-item-unchecked::before {
    border: var(--checkbox-border-size) solid var(--checkbox-border-color);
    border-radius: var(--checkbox-radius);
    top: calc((var(--dropdown-item-height) - var(--checkbox-size)) / 2);
    left: calc((var(--dropdown-checkbox-width) - var(--checkbox-size)) / 2);
    overflow: hidden;
    cursor: pointer;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    line-height: var(--checkbox-size);
}

.x-mcombo-item-unchecked::before {
    position: absolute;
    content: "";
    background-color: var(--checkbox-bg);
}

.x-boundlist-multicombobox .x-boundlist-item {
    border: 1px solid #fff;
    overflow: hidden; /* Khi độ dài vượt quá thì hidden - TVThang1 30.09.2019 */
}

/* =================================================================
   DROPDOWN LIST STYLES
   ================================================================= */

/* Base dropdown styles */
.x-boundlist {
    border-radius: var(--dropdown-list-border-radius);
    padding: var(--dropdown-list-padding);
}

.x-boundlist .x-boundlist-item {
    color: var(--dropdown-item-color);
    background-color: var(--dropdown-item-bg);
}

.x-boundlist-list-ct[data-ref="listWrap"] {
    max-height: 200px;
}

.ms-boundlist .x-boundlist-list-ct {
    overflow-x: hidden !important;
}

/* Dropdown item styles */
.cbo-item {
    height: var(--dropdown-item-height);
    line-height: var(--dropdown-item-height);
    overflow: hidden;
    word-break: break-all;
    padding-left: var(--dropdown-item-padding-x);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Header and footer styles */
.ms-cbo-hearder {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    font-weight: 500;
}

.ms-cbo-hearder span {
    padding: 2px 5px;
}

.cbo-header {
    border-style: solid;
    border-width: 1px 0 1px 0;
    position: absolute;
    top: 0;
    border-color: #c1c1c1;
    background-color: #e9e9e9;
}

.cbo-footer {
    height: 36px;
    width: 100%;
    border-style: solid;
    border-width: 1px 0 0 0;
    position: absolute;
    bottom: 0;
    border-color: #9e9e9e;
    background-color: #fff;
}

.cbo-footer .ms-cbo-footer {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0px 12px;
}

.cbo-footer .ms-cbo-footer .m-input-checkbox {
    height: 16px;
    width: 16px;
    margin: 0;
    margin-right: 8px;
}

/* Filter display styles */
.filter-display-all {
    border-style: solid;
    border-width: 1px 0 0 0;
    position: absolute;
    bottom: 0;
    border-color: #c1c1c1;
    background-color: #fff;
    width: 100%;
    padding: 2px 5px 2px 10px;
    overflow: hidden;
}

.filter-display-all input[type="checkbox"] {
    margin: 0px;
    padding: 0;
    position: absolute;
    top: 6px;
}

.filter-display-all label {
    margin-left: 20px;
}

/* =================================================================
   STATE MODIFIERS (Higher specificity)
   ================================================================= */

/* Hover and selection states */
.x-boundlist .x-boundlist-item.x-boundlist-item-over,
.x-boundlist .x-boundlist-item.x-multi-selected {
    color: var(--dropdown-item-color-hover);
    background-color: var(--dropdown-item-bg-hover);
}

.x-boundlist .x-boundlist-item.x-boundlist-selected {
    color: var(--dropdown-item-color-selected);
    background-color: var(--dropdown-item-bg-selected);
}

/* Inactive state */
.cbo-item.inactive {
    color: rgba(0, 0, 0, 0.5);
}

/* Focus states */
.m-combobox.x-field-focus .x-form-trigger-default,
.m-combobox.x-field-focus .x-form-text-wrap-default {
    border-color: var(--brand-default);
}

.m-combobox-editor.x-field-focus .x-form-item-body {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.m-combobox-editor.x-field-focus .x-form-trigger-default,
.m-combobox-editor.x-field-focus .x-form-text-wrap-default {
    border-color: #3892d3;
    background: #fff;
}

.m-combobox-editor.x-field-focus .x-form-arrow-trigger::before {
    color: #3892d3 !important;
}

/* Invalid states */
.m-combobox.x-form-invalid .x-form-trigger-default {
    border-color: var(--input-border-color--invalid) !important;
}

.m-combobox-editor.x-form-invalid .x-form-trigger-default {
    border-color: #d94e37 !important;
}

/* Disabled states (Highest specificity for state overrides) */
.m-combobox.x-item-disabled .x-form-arrow-trigger::before {
    color: rgba(0, 0, 0, 0.26) !important;
}

.m-combobox-editor.x-item-disabled .x-form-arrow-trigger::before {
    color: rgba(0, 0, 0, 0.26) !important;
}

:root {
    /*==============================================
    Date picker
    ==============================================*/
    --date-picker-bg: var(--white);
    --date-picker-width: 248px;
    --date-picker-border-color: var(--neutral-200);
    --date-picker-border-radius: 8px;
    --date-picker-header-bg: var(--white);
    --date-picker-cell-size: 32px;
    --date-picker-cell-radius: 8px;
    --date-picker-cell-color: var(--text-color-default);
    --date-picker-cell-color--hover: var(--brand-default);
    --date-picker-cell-bg: var(--white);
    --date-picker-cell-bg--hover: var(--brand-light-hover);
    --date-picker-cell-selected-bg: var(--brand-default);
    --date-picker-cell-selected-color: var(--white);
    --date-picker-cell-current-color: var(--brand-light-hover);
    --date-picker-cell-current-border: var(--brand-default);
    --date-picker-footer-bg: var(--white);
}

.x-datepicker {
    background-color: var(--date-picker-bg);
    width: var(--date-picker-width);
    border: none;
    border-radius: var(--date-picker-border-radius);
    box-shadow: 0px 2px 8px 0px var(--neutral-100, rgba(0, 0, 0, 0.10));
    overflow: hidden;
}

.x-datepicker .x-datepicker-header {
    background-image: none;
    background-color: var(--date-picker-header-bg);
    border-bottom: 1px solid var(--date-picker-border-color);
}

.x-monthpicker .x-monthpicker-years .x-monthpicker-yearnav .x-monthpicker-yearnav-prev,
.x-monthpicker .x-monthpicker-years .x-monthpicker-yearnav .x-monthpicker-yearnav-next,
.x-datepicker .x-datepicker-header .x-datepicker-prev,
.x-datepicker .x-datepicker-header .x-datepicker-next {
  background: none;
  width: 24px;
  height: 24px;
  margin-top: 2px;
}
.x-monthpicker .x-monthpicker-years .x-monthpicker-yearnav .x-monthpicker-yearnav-prev::after,
.x-monthpicker .x-monthpicker-years .x-monthpicker-yearnav .x-monthpicker-yearnav-next::after,
.x-datepicker .x-datepicker-header .x-datepicker-prev::after,
.x-datepicker .x-datepicker-header .x-datepicker-next::after {
    font-family: 'MISAIconFont' !important;
    speak: none;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    height: 1em;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    font-variant-ligatures: common-ligatures;
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
    color: var(--text-color-default);
}
.x-monthpicker .x-monthpicker-years .x-monthpicker-yearnav .x-monthpicker-yearnav-prev:hover::after,
.x-monthpicker .x-monthpicker-years .x-monthpicker-yearnav .x-monthpicker-yearnav-next:hover::after,
.x-datepicker .x-datepicker-header .x-datepicker-prev:hover::after,
.x-datepicker .x-datepicker-header .x-datepicker-next:hover::after {
    color: var(--brand-default);
    border-radius: 8px;
    background-color: var(--brand-light-hover);
}
.x-monthpicker .x-monthpicker-years .x-monthpicker-yearnav .x-monthpicker-yearnav-prev::after,
.x-datepicker .x-datepicker-header .x-datepicker-prev::after {
    content: "\E090";
}
.x-monthpicker .x-monthpicker-years .x-monthpicker-yearnav .x-monthpicker-yearnav-next::after,
.x-datepicker .x-datepicker-header .x-datepicker-next::after {
    content: "\E091";
}

.x-datepicker .x-datepicker-header .x-datepicker-month {

}

.x-datepicker .x-datepicker-header .x-datepicker-month .x-btn {
  padding: 2px 8px;
  color: var(--text-color-default);
}
.x-datepicker .x-datepicker-header .x-datepicker-month .x-btn:hover {
  /* background-color: var(--brand-light-hover); */
  color: var(--brand-default);
}

.x-datepicker .x-datepicker-header .x-datepicker-month .x-btn .x-btn-inner {
  border: none;
  padding: 0;
  color: inherit;
}

.x-datepicker .x-datepicker-header .x-datepicker-month .x-btn .x-btn-split::after {
  font-family: 'MISAIconFont' !important;
  content: "\E034";
  speak: none;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  font-variant-ligatures: common-ligatures;
  font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
  background-color: transparent;
  color: inherit;
  background: none;
  width: 24px;
  height: 24px;
  margin: 2px;
  padding: 0;
}

.x-datepicker .x-datepicker-inner {
    border: none;
    background: none;
    padding: 0 4px;
}

.x-datepicker .x-datepicker-inner .x-datepicker-column-header {
    background: none;
    border: none;
}
.x-datepicker .x-datepicker-inner .x-datepicker-column-header:last-child {
  color: var(--text-danger);
}

.x-datepicker .x-datepicker-inner .x-datepicker-column-header .x-datepicker-column-header-inner {
    width: var(--date-picker-cell-size);
    height: var(--date-picker-cell-size);
    padding: 0;
    text-align: center;
    line-height: var(--date-picker-cell-size);
}

.x-datepicker .x-datepicker-inner .x-datepicker-cell {
  width: var(--date-picker-cell-size);
  height: var(--date-picker-cell-size);
  line-height: var(--date-picker-cell-size);
  text-align: center;
  border-radius: var(--date-picker-cell-radius);
  color: var(--text-color-default);
  margin: 2px;
  position: relative;
  margin: 0;
  background-color: transparent;
  border: 1px solid transparent;
  overflow: hidden;
  transition: background-color 0.05s linear, color 0.05s linear;
}

.x-datepicker .x-datepicker-inner .x-datepicker-cell .x-datepicker-date {
  color: inherit !important;
  width: 100%;
  height: 100%;
  line-height: var(--date-picker-cell-size);
  text-align: center;
  margin: 0;
  padding: 0;
  background-color: transparent !important;
}

.x-datepicker .x-datepicker-inner .x-datepicker-cell:not(.x-datepicker-active) {
  color: var(--neutral-400);
}

.x-datepicker .x-datepicker-inner .x-datepicker-cell:hover {
  background: var(--date-picker-cell-bg--hover);
}

.x-datepicker .x-datepicker-inner .x-datepicker-cell.x-datepicker-today {
  border-color: var(--brand-default);
  color: var(--brand-default);
}

.x-datepicker .x-datepicker-inner .x-datepicker-cell.x-datepicker-selected {
  border-color: var(--brand-default);
  background-color: var(--brand-default);
  color: var(--date-picker-cell-selected-color);
}

.x-datepicker .x-datepicker-footer {
    background: none;
    background-color: var(--white);
    border-top: 1px solid var(--date-picker-border-color);
}

.x-datepicker .x-datepicker-footer .x-btn {
    background: none;
    background-color: transparent;
}

.x-datepicker .x-datepicker-footer .x-btn:hover {
    background-color: var(--brand-light-hover);
}

.x-monthpicker {
  border: none;
  display: flex;
}

.x-monthpicker .x-monthpicker-body {
  display: flex;
}

.x-monthpicker .x-monthpicker-months {
  border-color: var(--date-picker-border-color);
  width: 116px;
  padding-left: 4px;
}

.x-monthpicker .x-monthpicker-years {
  flex: 1;
  padding-left: 4px;
  padding-top: 4px;
}

.x-monthpicker .x-monthpicker-years .x-monthpicker-yearnav {
    display: flex;
    justify-content: space-between;
}

.x-monthpicker .x-monthpicker-years .x-monthpicker-item,
.x-monthpicker .x-monthpicker-months .x-monthpicker-item {
    width: fit-content;
    height: fit-content;
    background-color: transparent;
    overflow: hidden;
}
.x-monthpicker .x-monthpicker-months .x-monthpicker-item .x-monthpicker-item-inner,
.x-monthpicker .x-monthpicker-years .x-monthpicker-item .x-monthpicker-item-inner {
    padding: 6px 10px;
    line-height: 1;
    text-align: left;
    margin: 1px;
    background-color: transparent;
    border-radius: var(--date-picker-cell-radius);
    border: none;
    transition: background-color 0.05s linear, color 0.05s linear;
    color: var(--text-color-default);
}
.x-monthpicker .x-monthpicker-months .x-monthpicker-item .x-monthpicker-item-inner:hover,
.x-monthpicker .x-monthpicker-years .x-monthpicker-item .x-monthpicker-item-inner:hover {
    background: var(--brand-light-hover);
}
.x-monthpicker .x-monthpicker-months .x-monthpicker-item .x-monthpicker-item-inner.x-monthpicker-selected,
.x-monthpicker .x-monthpicker-years .x-monthpicker-item .x-monthpicker-item-inner.x-monthpicker-selected {
    background: var(--brand-default);
    color: var(--white);
}

.x-monthpicker .x-monthpicker-buttons {
    background: none;
    background-color: var(--date-picker-footer-bg);
    border-bottom: 1px solid var(--date-picker-border-color);
}

.x-monthpicker .x-monthpicker-buttons .x-btn {
    background: none;
}
.x-monthpicker .x-monthpicker-buttons .x-btn:hover {
    background: var(--brand-light-hover);
}

.m-daterange .m-daterange-outer-container .x-box-target {
    height: 100% !important;
}

.m-daterange .m-daterange-inner-container {
    top: 0 !important;
}

.m-daterange .from-date-label,
.m-daterange .to-date-label {
    line-height: 30px;
}

.m-daterange .from-date-label {
    left: 29% !important;
}

.m-daterange .to-date-label {
    left: 64% !important;
}

.m-daterange .period {
    width: 28% !important;
    background: #fff;
}

.m-daterange .to-date,
.m-daterange .from-date {
    height: 100% !important;
    width: 28% !important;
}

.m-daterange .from-date {
    left: 35% !important;
}

.m-daterange .to-date {
    right: 1px !important;
    left: 72% !important;
}
.m-yearrange .m-item-yearrange-label {
    line-height: 30px;
    padding: 0 8px;
}

.m-yearrange .m-item-yearrange.x-form-invalid .x-form-trigger-wrap {
    border-color: #de7c7c;
    z-index: 99 !important;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

:root {
    --form-col-space: 16px;
}

.misa-control-label-required .x-form-item-label-text::after {
    content: " *";
    color: var(--input-require-color);
    font-weight: bold;
}

.groupcontrol {
}

.groupcontrol.x-field-focus,
.groupcontrol.x-form-invalid {
    position: relative;
}

.groupcontrol.x-field-focus,
.groupcontrol.gc-focused {
    z-index: 100 !important;
}

.groupcontrol .qlcb-control-label,
.groupcontrol .qlcb-control-label .x-form-item-label-text {
    color: var(--input-label-color);
    font-size: var(--input-label-font-size);
    font-weight: var(--input-label-font-weight);
    line-height: var(--input-label-line-height);
}

.groupcontrol .qlcb-control-label .x-form-item-label-inner {
    padding-bottom: 8px;
}

.groupcontrol.x-item-disabled input {
    background-color: var(--input-bg-disabled);
}

.groupcontrol.x-item-disabled .x-mask {
    background-color: transparent !important;
}

.groupcontrol .x-form-type-text {
    background-color: transparent;
}

/*Style của Empty text (placeholder)*/
.groupcontrol ::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.38);
    font-weight: 400;
    font-size: var(--input-font-size) !important;
    text-align: left !important;
}

.groupcontrol :-moz-placeholder {
    color: rgba(0, 0, 0, 0.38);
    font-weight: 400;
    font-size: var(--input-font-size) !important;
    text-align: left !important;
}

.groupcontrol ::-moz-placeholder {
    color: rgba(0, 0, 0, 0.38);
    font-weight: 400;
    font-size: var(--input-font-size) !important;
    text-align: left !important;
}

.groupcontrol :-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.38);
    font-weight: 400;
    font-size: var(--input-font-size) !important;
    text-align: left !important;
}

.groupcontrol .x-tagfield-item-text {
    font-size: var(--input-font-size);
    line-height: 20px;
}

.groupcontrol .x-form-date-trigger {
    font-family: MISAIconFont !important;
    speak: none;
    font-weight: normal;
    font-style: normal;
    font-size: 17px !important;
    color: rgba(0, 0, 0, 0.54) !important;
    background: transparent !important;
    line-height: 24px;
    text-transform: none;
    letter-spacing: normal;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: "liga";
    border: none;
}

.groupcontrol .x-form-date-trigger::before {
    content: "";
    width: 16px;
    height: 16px;
    display: block;
    background-image: url("/Content/Images/Icon/ic_calendar.svg") !important;
    position: relative;
    right: 1px !important;
    top: 0;
}

.groupcontrol .x-form-date-trigger:hover {
    color: #3276c3 !important;
}

.groupcontrol.x-item-disabled .x-form-date-trigger::before {
    color: rgba(0, 0, 0, 0.26) !important;
}

.groupcontrol [data-ref="triggerWrap"] {
    position: relative;
}

.groupcontrol [data-ref="triggerWrap"] .x-form-trigger {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
}

.groupcontrol
    [data-ref="triggerWrap"]
    [data-ref="inputWrap"]:has(+ .x-form-trigger:not([style="display:none;"]))
    .x-form-text-default {
    padding: var(--input-combo-padding);
}

.groupcontrol [data-ref="triggerWrap"] .x-form-arrow-trigger {
    font-family: MISAIconFont !important;
    speak: none;
    font-weight: normal;
    font-style: normal;
    font-size: 16px !important;
    color: rgba(0, 0, 0, 0.54) !important;
    background: transparent !important;
    line-height: 24px;
    text-transform: none;
    letter-spacing: normal;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: "liga";
    border: none;
    transition: all 0.2s linear;
}

.groupcontrol
    [data-ref="triggerWrap"]
    .x-form-arrow-trigger.x-form-trigger-focus {
    /* transform: translateY(-50%) rotate(180deg); */
}

.groupcontrol.x-item-disabled .x-form-arrow-trigger::before {
    color: rgba(0, 0, 0, 0.26) !important;
}

.groupcontrol .x-form-arrow-trigger::before {
    content: "";
    width: 16px;
    height: 16px;
    display: block;
    background-image: url("/Content/Images/Icon/ic_arrow_down_gray.svg") !important;
    position: relative;
    top: 0;
}

.groupcontrol .x-form-text-wrap-default {
    border: 0 !important;
}

.groupcontrol .x-form-text-default {
    border: 1px solid var(--input-border-color);
    line-height: var(--input-line-height);
    height: 100%;
    padding: var(--input-padding);
    border-radius: var(--input-border-radius);
    /* background: no-repeat !important; */
}

.groupcontrol .x-form-text-default::placeholder {
    font-size: var(--input-font-size);
}

.groupcontrol.x-form-invalid .x-form-text-default {
    border-color: var(--input-border-color--invalid);
}

.x-pickerfield-open .x-form-field,
.groupcontrol:not(.x-form-invalid) .x-form-text-default:focus {
    border-color: var(--input-border-color--focus);
}

.groupcontrol .x-btn.x-btn-default-small-focus {
    background-color: transparent !important;
}

.groupcontrol .x-btn.x-btn-default-small-focus .cl-groupControlButton {
    color: #3276c3;
}

.groupcontrol .x-form-trigger-wrap-default {
    border: none !important;
}

.groupcontrol .text-uppercase-first-letter .x-form-text {
    text-transform: capitalize !important;
}

.groupcontrol .text-uppercase-all-letter .x-form-text {
    text-transform: uppercase !important;
}

.groupcontrol .text-uppercase-first-letter .x-form-empty-field {
    text-transform: none !important;
}

.groupcontrol .text-uppercase-all-letter .x-form-empty-field {
    text-transform: none !important;
}

.formreadonly .groupcontrol.gc-disabled {
    background-color: #ffffff !important;
}
/*nền của input*/
.formreadonly .groupcontrol.gc-disabled .x-item-disabled .x-form-text {
    background-color: #ffffff !important;
    background: no-repeat !important;
}
/*label*/
.formreadonly .groupcontrol.gc-disabled .qlcb-control-label {
    color: rgba(0, 0, 0, 0.54) !important;
}

/*text trong control*/
.formreadonly .groupcontrol .x-form-text-default {
    background: no-repeat !important;
    color: rgba(0, 0, 0, 0.87);
}

/*Empty Text*/
.formreadonly .groupcontrol ::-webkit-input-placeholder {
    color: #ffffff !important;
}

.formreadonly .groupcontrol :-moz-placeholder {
    color: #ffffff !important;
}

.formreadonly .groupcontrol ::-moz-placeholder {
    color: #ffffff !important;
}

.formreadonly .groupcontrol :-ms-input-placeholder {
    color: #ffffff !important;
}

.formreadonly .x-form-item-default.x-item-disabled {
    opacity: 1;
}

.groupcontrol .m-textfieldbuttongroup-container .x-box-inner {
    width: 100% !important;
    height: 100% !important;
}

.groupcontrol .m-textfieldbuttongroup-container .x-box-target {
    width: 100% !important;
}

.groupcontrol .m-textfieldbuttongroup-textarea {
    width: 100% !important;
    min-height: 24px !important;
    top: 23px !important;
    left: 0 !important;
    padding: 0 6px 0 6px !important;
    position: absolute !important;
}

.groupcontrol .m-textfieldbuttongroup-textarea .x-form-text {
    background: no-repeat !important;
}

.groupcontrol .m-textfieldbuttongroup-textarea .x-form-textarea {
    background: no-repeat !important;
    line-height: 19px !important;
    box-sizing: border-box;
    padding-top: 3px !important;
}

.groupcontrol .m-textfieldbuttongroup-container-container {
    top: 4px !important;
    left: 6px !important;
    position: absolute !important;
    height: 16px;
}

.groupcontrol .m-textfieldbuttongroup-label {
    position: relative !important;
    float: left;
}

.groupcontrol .m-textfieldbuttongroup-button {
    position: relative !important;
    top: -5px !important;
    left: 6px !important;
    border: none;
    background: transparent;
    padding: 0;
}

/*Control --------------------------------------------------------------------------------*/

.groupcontrol .x-form-cb-label-default.x-form-cb-label-after {
    padding-left: 18px;
}

/*Control MISATagFieldGroup----------------------------------------------------------------------*/
.groupcontrol .m-tagfieldgroup-container .x-tagfield-list {
    height: 41px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden;
}

.groupcontrol .m-tagfieldgroup-container .x-tagfield-item {
    min-height: 20px !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 1px 0 6px !important;
    margin: 0;
}

.groupcontrol.m-tagfieldgroup
    .x-field:not(.x-item-disabled)
    .x-tagfield-item.x-tagfield-item-selected {
    border: none !important;
}

.groupcontrol.m-tagfieldgroup .x-form-text-default {
    line-height: 20px;
}

.groupcontrol .m-tagfieldgroup-container .x-tagfield-input {
    width: 1px;
}

.groupcontrol .m-tagfieldgroup-container .x-tagfield-item-close {
    top: 0 !important;
}

.groupcontrol .m-tagfieldgroup-container .x-tagfield-item-text {
    padding-right: 20px !important;
    padding-top: 0 !important;
}

.groupcontrol .m-tagfieldgroup-container .x-box-inner {
    width: 100% !important;
    height: 100% !important;
}

.groupcontrol .m-tagfieldgroup-container .x-box-target {
    width: 100% !important;
}

.groupcontrol .m-tagfieldgroup-label {
    top: 4px !important;
    left: 6px !important;
    position: absolute !important;
}

.groupcontrol.m-tagfieldgroup .m-tagfieldgroup-tagfield {
    width: 100% !important;
    top: 26px !important;
    left: 0 !important;
    padding: 0 6px 0 0 !important;
    position: absolute !important;
    min-height: 34px;
}

.groupcontrol.m-tagfieldgroup .m-tagfieldgroup-tagfield-hidelabel {
    top: 0 !important;
}

.groupcontrol .x-tagfield-input-field {
    height: 19px;
    line-height: 19px !important;
    margin-left: 6px;
}

.groupcontrol .mtf-item-selected {
    color: red;
}

/*Control MISAComboBoxIntelliSenseGroup-------------------------------------------------------*/
.groupcontrol .m-comboboxintellisensegroup-container .x-box-inner {
    width: 100% !important;
    height: 100% !important;
}

.groupcontrol .m-comboboxintellisensegroup-container .x-box-target {
    width: 100% !important;
}

.groupcontrol .m-comboboxintellisensegroup-label {
    top: 4px !important;
    left: 6px !important;
    position: absolute !important;
}

.groupcontrol .m-comboboxintellisensegroup-combobox {
    width: 100% !important;
    top: 24px !important;
    left: 0 !important;
    padding: 0 6px 0 6px !important;
    position: absolute !important;
}

.groupcontrol .m-comboboxintellisensegroup-combobox-hidelabel {
    top: 4px !important;
}

.groupcontrol.m-comboboxintellisensegroup .x-form-arrow-trigger {
    display: none !important;
}

/*Control NumberFieldGroup--------------------------------------------------------------------------------*/
.groupcontrol .m-numberfieldgroup-container .x-box-inner {
    width: 100% !important;
    height: 100% !important;
}

.groupcontrol .m-numberfieldgroup-container .x-box-target {
    width: 100% !important;
}

.groupcontrol .m-numberfieldgroup-textfield {
    width: 100% !important;
    top: 24px !important;
    left: 0 !important;
    padding: 0 6px 0 6px !important;
    position: absolute !important;
}

.groupcontrol .m-numberfieldgroup-textfield-hidelabel {
    top: 4px !important;
}

.groupcontrol .m-numberfieldgroup-textfield .x-form-text {
    background: no-repeat !important;
}

.groupcontrol.m-numberfieldgroup .x-form-text-field-body-default {
    position: relative;
}

.groupcontrol.m-numberfieldgroup .x-form-trigger-default {
    background: none;
    border: none;
    width: 14px;
}

.groupcontrol.m-numberfieldgroup .x-form-trigger::before {
    content: none;
}

.groupcontrol.m-numberfieldgroup .x-form-spinner {
    background: none;
    display: block;
    width: 14px;
}

.groupcontrol.m-numberfieldgroup .x-form-spinner-up:before {
    font-family: MISAIconFont !important;
    speak: none;
    font-weight: normal;
    font-style: normal;
    font-size: 16px !important;
    color: rgba(0, 0, 0, 0.54);
    background: transparent !important;
    line-height: 24px;
    padding-left: 2px;
    text-transform: none;
    letter-spacing: normal;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: "liga";
    content: "\E066";
    top: -8px;
    right: 3px;
    position: absolute;
    height: 0;
}

.groupcontrol.m-numberfieldgroup .x-form-spinner-down:before {
    font-family: MISAIconFont !important;
    speak: none;
    font-weight: normal;
    font-style: normal;
    font-size: 16px !important;
    color: rgba(0, 0, 0, 0.54);
    background: transparent !important;
    line-height: 24px;
    padding-left: 2px;
    text-transform: none;
    letter-spacing: normal;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: "liga";
    content: "\E065";
    top: 4px;
    right: 3px;
    position: absolute;
    height: 0;
}

.groupcontrol.m-numberfieldgroup .x-form-text-default {
    text-align: right;
}

.groupcontrol.m-numberfieldgroup .x-form-spinner-over {
    background-color: transparent !important;
}

.groupcontrol.m-numberfieldgroup .x-form-spinner-over:before {
    color: #3276c3 !important;
}

/*region DateRangeGroup-------------------------------------------------------------------------------------*/

.groupcontrol.m-daterangegroup .m-daterangegroup-inner-container {
    top: 24px !important;
    left: 0 !important;
    padding: 0 6px 0 0 !important;
    position: absolute !important;
}

.groupcontrol.m-daterangegroup .from-date-label,
.groupcontrol.m-daterangegroup .to-date-label {
    margin: 2px 6px 0 4px;
}

.groupcontrol.m-daterangegroup.x-item-disabled .from-date-label,
.groupcontrol.m-daterangegroup.x-item-disabled .to-date-label {
    color: rgba(0, 0, 0, 0.54) !important;
}

.groupcontrol.m-daterangegroup .x-form-date-trigger {
    width: 22px;
}

.m-group-header {
    color: var(--text-color-default);
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    text-transform: none;
    display: block;
    padding: 0 0 16px 0;
    margin: 0;
}
.m-group-header:not(:first-child) {
    padding-top: 16px;
}

.m-group-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.m-group-content + .m-group-content {
    margin-top: 12px;
}

.m-group-content .m-row {
    padding-top: 0;
    gap: 20px;
}

.m-group-content .m-col {
    padding-left: 0;
    gap: 16px;
}

.x-form-item-default.x-item-disabled {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
}

.x-form-item-default .x-form-text-default {
    font-family: Roboto, Segoe UI, Arial, tahoma, verdana, sans-serif !important;
    font-size: var(--input-font-size);
    background-image: none !important;
}

.x-form-text-default .x-tagfield-item {
    border-radius: 3px;
}

.x-form-text-default .x-tagfield-item-close:hover {
    color: #ff6363;
}

/*#region Tagfield */
.x-form-text-default .x-tagfield-item {
    border-radius: 3px;
}

.x-form-text-default .x-tagfield-item-close:hover {
    color: #ff6363;
}


/*#region [HtmlEditorGroup Style] */
.groupcontrol .m-html-editor-group-editor .x-toolbar {
    background: none;
    padding: 0;
    z-index: 1;
}

.groupcontrol
    .m-html-editor-group-editor
    .x-toolbar
    .x-btn-plain-toolbar-small {
    padding: 0;
    margin: 0;
}

.groupcontrol .m-html-editor-group-container .x-box-target {
    width: 100% !important;
}

.groupcontrol .m-html-editor-group-container-container {
    top: 4px !important;
    left: 0px !important;
    position: absolute !important;
    height: 16px;
}

.groupcontrol .m-html-editor-group-label {
    position: relative !important;
    float: left;
}

.groupcontrol .m-html-editor-group-button {
    position: relative !important;
    top: -5px !important;
    left: 6px !important;
    border: none;
    background: transparent;
    padding: 0;
}

.groupcontrol .m-html-editor-group-editor {
    width: 100% !important;
    left: 0 !important;
    padding: 0 0px 0 0px !important;
    position: absolute !important;
}

.groupcontrol .m-html-editor-group-editor .x-btn-icon-el-plain-toolbar-small {
    background: none;
    font-family: MISAIconFont !important;
    speak: none;
    font-weight: normal;
    font-style: normal;
    font-size: 14px !important;
    color: rgba(0, 0, 0, 0.54) !important;
    background: transparent !important;
    line-height: 22px;
    text-transform: none;
    letter-spacing: normal;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: "liga";
    border: none;
    width: 18px;
}

.groupcontrol .m-html-editor-group-editor .x-btn-plain-toolbar-small,
.groupcontrol
    .m-html-editor-group-editor
    .x-btn-plain-toolbar-small.x-btn-pressed {
    border: none;
    background: none;
}

.groupcontrol
    .m-html-editor-group-editor
    .x-btn-plain-toolbar-small.x-btn-pressed
    .x-btn-icon-el-plain-toolbar-small::before {
    color: #3276c3;
}

/* background-color: #e1e1e1; */
.groupcontrol
    .m-html-editor-group-editor
    .x-html-editor-tb
    .x-edit-bold::before {
    content: "\E073";
}

.groupcontrol
    .m-html-editor-group-editor
    .x-html-editor-tb
    .x-edit-italic::before {
    content: "\E075";
}

.groupcontrol
    .m-html-editor-group-editor
    .x-html-editor-tb
    .x-edit-underline::before {
    content: "\E074";
}

.groupcontrol .x-html-editor-container {
    border: none;
}

.groupcontrol .m-html-editor-group-editor .x-html-editor-input.x-box-item {
    padding: 4px 12px 0 0;
}

.groupcontrol .m-html-editor-group-editor .x-htmleditor-iframe {
    margin: -3px;
}

.groupcontrol .m-html-editor-group-editor .x-form-text {
    background: no-repeat !important;
}

/*style cho body bên trong htmleditor*/
.m-html-editor-body-content {
    font-family: Roboto, "Segoe UI", Arial, tahoma, verdana, sans-serif !important;
    color: rgba(0, 0, 0, 0.87) !important;
    font-size: 13px !important;
    line-height: 20px;
}

:root {
    --menu-icon-size: 16px;
    --menu-item-padding-x: 12px;
    --menu-item-icon-spacing: 8px;
    --menu-item-height: 32px;
}

.m-menu-ctx {
    border: none;
}

.m-menu-ctx .x-menu-body-default {
    background: #fff;
    padding: 0;
}

.m-menu-ctx .x-menu-item-text-default {
    font-family: Roboto, Segoe UI, Arial, tahoma, verdana, sans-serif !important;
    font-size: var(--input-font-size);
    padding-bottom: 4px;
    padding-top: 4px;
    margin-left: 8px;
    position: relative;
}

.m-menu-ctx .x-menu-icon-separator-default {
    display: none;
}

.m-menu-ctx .x-menu-item-default:not([role="separator"]) {
    border: none;
    position: relative;
}

.m-menu-ctx.x-menu .x-menu-item-text-default {
    margin-left: 8px;
}

.m-menu-ctx .x-menu-item-default span.barge {
    top: 2px;
    background-color: #ff6f00;
    color: #fff;
    border-radius: 14px;
    padding: 1px 5px;
    font-size: 10px;
    display: inline-block;
    height: 16px;
    text-align: center;
    line-height: 16px;
    margin-left: 3px;
    position: absolute;
}

.m-menu-ctx .x-menu-item-default.x-menu-item-focus,
.m-menu-ctx .x-menu-item-default.x-menu-item-active {
    background: var(--dropdown-item-bg-hover);
    background-image: none;
    border-radius: 0;
    padding: 0;
}

.x-menu.x-menu-default {
    border: none;
    border-radius: var(--dropdown-list-border-radius);
}

.x-menu .x-menu-body-default {
    background: var(--white);
    padding: 0 !important;
}

.x-menu .x-menu-item:not([role="separator"]) {
    border: none;
    height: var(--menu-item-height);
    /* width: 100% !important; */
}

.x-menu .x-menu-item .x-menu-item-icon-default {
    top: calc(50% - var(--menu-icon-size) / 2);
    left: var(--menu-item-padding-x);
}

.x-menu .x-menu-item-link {
    line-height: var(--menu-item-height);
}

.x-menu .x-menu-item-text-default {
    font: unset;
    margin-right: 12px;
}

.x-menu .x-menu-item-default.x-menu-item-plain {
    padding: 0 var(--menu-item-padding-x);
    line-height: var(--menu-item-height);
}

.x-menu .x-menu-icon-separator {
    display: none;
}

.x-menu-item-checked .x-menu-item-icon-default.x-menu-group-icon {
    background-position-x: 4px;
    background-position-y: 4px;
}

.x-menu-item-default.x-menu-item-focus,
.x-menu-item-default.x-menu-item-active {
    background-image: none;
    border: none;
    background: var(--dropdown-item-bg-hover);
}


.x-message-box {
    padding: 0;
    box-shadow: 0 14px 45px 0 rgba(0, 0, 0, 0.24);
}

.x-message-box .x-window-header .x-box-inner .x-tool-after-title::before {
    width: 14px;
    height: 14px;
    content: "";
    display: block;
    background-image: url('../../Content/Images/Icon/ic_close-popup.svg');
    background-size: 14px;
}

.x-message-box .x-tool-img {
    display: none;
}

.x-message-box .x-window-body,
.x-message-box.x-window-default,
.x-message-box .x-window-header-default-top {
    background-color: #fff;
    border: none;
}

.x-message-box .x-window-body {
    padding: 16px !important;
}

.x-message-box .x-window-header-default-top {
    box-shadow: none;
    padding: 16px 16px 0 16px !important;
    color: var(--text-color-default);
}

.x-message-box .x-title-text-default {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    min-height: 22px;
    padding: 0;
}

.x-message-box .x-message-box-icon {
    display: none;
    width: 0 !important;
    height: 0 !important;
    background-image: none;
}

.x-message-box .m-messagebox-msg {
    font-size: 14px;
    color: var(--text-color-default);
}

.x-message-box .x-window-body .x-box-item {
    left: 0 !important;
    max-width: 560px !important;
}

.x-message-box .x-toolbar {
    padding: 0px 8px 16px 16px !important;
    background-image: none;
}

.x-message-box .x-toolbar .x-btn .x-btn-button .x-btn-icon-el {
    display: none;
}


.m-toolbar-popup {
    border-color: #e0e0e0;
    background-image: none;
    padding: 10px;
    border-top: none;
    border-bottom: none;
}

.m-popup {
    padding: 0;
    border: none;
    border-radius: 3px;
}

.m-popup.x-window-default {
    background-color: #4262f0;
    box-shadow: 0 14px 45px 0 rgba(0, 0, 0, 0.24),
        0 10px 18px 0 rgba(0, 0, 0, 0.22);
}

.m-popup .x-window-header-default-top {
    border: none;
    background-color: #4262f0;
    box-shadow: none;
    padding: 7px 10px;
}
/*nttam sửa lại chiều cao của dòng tilte để hiển thị được hết dấu*/
.m-popup .x-window-header-title-default {
    line-height: 20px !important;
}

.m-popup .x-window-header-title-default > .x-title-text-default {
    color: rgba(255, 255, 255, 0.87);
}

.m-popup .m-popup-body > .x-container > .x-panel > .x-panel-bodyWrap > .x-panel-body {
    background-color: var(--popup-body-bg-color);
    padding: var(--popup-body-padding);
    border: none;
    overflow: auto;
}

.m-popup .m-treegridpanel .x-panel-body,
.m-popup .m-gridpanel .x-panel-body {
    padding: 0;
}

/*Tạm ẩn window close button*/
.m-popup .x-tool-img {
    display: none;
}
/*#endregion */


.m-popup.x-window-default,
.m-popup {
    border-radius: 8px;
    background-color: white;
}

.m-popup > .x-header,
.m-popup > .x-header.x-window-header-default-top {
    background-color: var(--popup-header-bg-color);
    padding: var(--popup-header-padding);
    color: var(--neutral-950);
    border: none;
    border-bottom: var(--popup-header-border-bottom);
}
.m-popup > .x-header .x-window-header-title-default > .x-title-text-default,
.m-popup > .x-header.x-window-header-default-top .x-window-header-title-default > .x-title-text-default {
    color: var(--neutral-950);
    font-size: var(--popup-header-font-size);
    font-weight: var(--popup-header-font-weight);
    line-height: var(--popup-header-line-height);
    padding: 0;
}

.m-popup .m-popup-body {
    background-color: var(--popup-body-bg-color);
}

.m-popup .m-popup-body > .x-container  {
}

.m-popup .m-popup-body .x-panel-header {
    padding: 0;
    height: 0;
    box-shadow: none;
}

.m-popup .m-toolbar-popup {
    background-color: var(--popup-footer-bg-color);
    border-top: var(--popup-footer-border-top) !important;
    padding: var(--popup-footer-padding);
}

.m-popup .m-toolbar-popup [role="button"] {
    /* background-color: var(--popup-footer-bg-color); */
    border-radius: var(--button-radius);
    padding: var(--button-padding);
}

.m-popup .m-toolbar-popup .x-form-type-checkbox .x-form-item-body .x-form-cb-wrap-inner {
    display: flex;
    align-items: center;
}


::-webkit-scrollbar {
    width: var(--scroll-thumb-width--medium);
    height: var(--scroll-thumb-height--medium);
}

::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb-color);
    border-radius: var(--scroll-thumb-width--medium);
    border: 1px solid transparent;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scroll-thumb-color);
    cursor: pointer;
}

::-webkit-scrollbar-track {
    background-color: var(--scroll-track-color);
}
:root {
    /*==============================================
    Table
    ==============================================*/
    --table-radius: 8px;
    --table-bg-color: var(--white);
    --table-toolbar-bg-color: transparent;
    --table-header-height: 36px;
    --table-header-bg: var(--neutral-50);
    --table-header-border-color: var(--neutral-100);
    --table-header-padding: 8px 12px;
    --table-header-line-height: 20px;
    --table-filter-height: 36px;
    --table-filter-bg: var(--white);
    --table-filter-border-color: var(--neutral-200);
    --table-filter-border-color--focus: var(--brand-default);
    --table-filter-border-radius: 8px;
    --table-filter-inner-height: 28px;
    --table-filter-inner-padding: 0 8px;
    --table-row-height: 36px;
    --table-row-bg: var(--white);
    --table-row-bg--hover: var(--neutral-100);
    --table-row-bg--pressed: var(--neutral-300);
    --table-row-bg--focus: var(--white);
    --table-row-bg--disabled: var(--white);
    --table-row-bg-selected: #dbeafe;
    --table-row-bg-selected--hover: #bfdbfe;
    --table-row-bg-selected--pressed: #93c5fd;
    --table-row-bg-selected--focus: #dbeafe;
    --table-row-bg-selected--disabled: #dbeafe;
    --table-row-border-color: var(--neutral-200);
    --table-cell-padding: 6px 12px;
    --table-cell-line-height: 20px;

}

.m-treepanel,
.m-gridpanel,
.m-treegridpanel {
    background-color: var(--table-bg-color) !important;
    border-radius: var(--table-radius);
}

.m-treegridpanel > .x-panel-bodyWrap > .x-toolbar:not(.m-pagging-toolbar),
.m-gridpanel > .x-panel-bodyWrap > .x-toolbar:not(.m-pagging-toolbar) {
    padding: 12px;
    margin: 0;
}

.m-gridpanel > .x-panel-bodyWrap > .x-toolbar-docked-top {
    padding: 16px 16px 12px 16px;
    background-color: var(--table-toolbar-bg-color);
    margin: 0;
}

.m-treegridpanel > .x-panel-bodyWrap > .x-toolbar-docked-bottom {
    padding: 8px 12px 12px 12px;
    background: none;
    background-color: var(--table-toolbar-bg-color);
    margin: 0;
    border: none;
}

.m-gridpanel > .x-panel-bodyWrap > .x-toolbar-docked-top.m-toolbar-detail {
    margin-bottom: 12px;
    padding: 0 !important;
}

.x-grid-header-ct {
    border: none;
}

.x-grid-header-ct .x-column-header-trigger {
    display: none;
}

.m-treepanel .x-column-header,
.m-gridpanel .x-column-header,
.m-treegridpanel .x-column-header,
.m-treepanel .x-group-sub-header,
.m-gridpanel .x-group-sub-header,
.m-treegridpanel .x-group-sub-header {
    border: none;
    border-color: var(--table-header-border-color);
    border-top: none !important;
}

.m-treepanel .x-column-header .x-column-header-inner,
.m-gridpanel .x-column-header .x-column-header-inner,
.m-treegridpanel .x-column-header .x-column-header-inner {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: var(--table-header-color);
}

.m-treepanel .checkbox-column-border-bottom .x-column-header-inner,
.m-gridpanel .checkbox-column-border-bottom .x-column-header-inner,
.m-treegridpanel .checkbox-column-border-bottom .x-column-header-inner {
    border-bottom: 1px solid var(--table-header-border-color);
    height: 28px !important;
    left: 4px !important;
    top: 1px !important;
}

.m-treepanel .number-column-border-bottom .x-column-header-inner,
.m-gridpanel .number-column-border-bottom .x-column-header-inner,
.m-treegridpanel .number-column-border-bottom .x-column-header-inner {
    border-bottom: 1px solid var(--table-header-border-color);
    height: var(--table-header-height) !important;
    top: 1px !important;
}

.m-treepanel .x-grid-body,
.m-gridpanel .x-grid-body,
.m-treegridpanel .x-grid-body {
    border: none;
}

.m-gridpanel .x-grid-cell-inner {
    padding: 8px 4px;
    line-height: 16px;
}

.m-gridpanel .x-grid-cell-inner span.x-cell-number {
    line-height: 16px;
}

.m-gridpanel .x-grid-cell.ms-edits-cls {
    border: 1px solid var(--brand-default);
}

.m-gridpanel .x-grid-row .x-grid-cell-selected,
.m-gridpanel .x-grid-row-over .x-grid-cell-selected {
    background-color: #b8cfee !important;
}

.m-gridpanel .x-grid-td {
    border: none;
    vertical-align: middle;
}

.m-gridpanel .x-grid-with-row-lines .x-grid-item:first-child {
    border-top: none;
}

.m-gridpanel .x-grid-cell-special {
    background: transparent;
}

.m-gridpanel.x-grid .column-readonly {
    background: #f2f2f2;
}

.m-gridpanel .x-grid-cell-row-checker .x-grid-cell-inner {
    padding: 4px 5px 3px 8px;
}

.m-gridpanel .x-col-nogroup .x-column-header-inner {
    padding-bottom: 24px;
}

.m-gridpanel .x-col-nogroup .x-column-header-text {
    padding-top: 10px;
}

.m-gridpanel .x-group-sub-header:last-child {
    border-right: none;
    padding-right: 0px;
}

.m-treepanel .x-group-sub-header .m-filter-container .x-field,
.m-gridpanel .x-group-sub-header .m-filter-container .x-field,
.m-gridtreepanel .x-group-sub-header .m-filter-container .x-field {
    padding-right: 4px;
}
.m-treepanel .x-group-sub-header .m-filter-container .x-field {
    padding: 0 8px 6px 5px;
}

.m-treepanel .x-column-header-inner .x-column-header-text-inner,
.m-treegridpanel .x-column-header-inner .x-column-header-text-inner,
.m-gridpanel .x-column-header-inner .x-column-header-text-inner {
    font-weight: var(--font-weight-semibold);
}

.m-treepanel .x-column-header-checkbox .x-column-header-inner,
.m-treegridpanel .x-column-header-checkbox .x-column-header-inner,
.m-gridpanel .x-column-header-checkbox .x-column-header-inner {
    padding: 0;
    cursor: pointer;
}

.x-column-header-checkbox .x-column-header-inner .x-column-header-text-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.m-treepanel .x-column-header-inner,
.m-gridpanel .x-column-header-inner,
.m-treegridpanel .x-column-header-inner {
    text-align: center;
    padding: var(--table-header-padding);
    background-color: var(--table-header-bg);
    background: none;
}

.m-treepanel .x-column-header-inner.x-column-header-over,
.m-gridpanel .x-column-header-inner.x-column-header-over,
.m-treegridpanel .x-column-header-inner.x-column-header-over {
    background-color: var(--table-header-bg);
    background: none;
}

.m-treepanel .x-column-header-text,
.m-gridpanel .x-column-header-text,
.m-treegridpanel .x-column-header-text {
    line-height: var(--table-header-line-height);
    white-space: nowrap;
    text-align: left;
    text-overflow: ellipsis;
}

.m-treepanel .m-column-hasfilter.x-column-header .x-column-header-inner,
.m-gridpanel .m-column-hasfilter.x-column-header .x-column-header-inner,
.m-treegridpanel .m-column-hasfilter.x-column-header .x-column-header-inner {
    border-bottom: 1px solid var(--table-header-border-color);
    border-top: none !important;
}


.m-treepanel .x-grid-item-selected .x-grid-cell-special,
.m-treegridpanel .x-grid-item-selected .x-grid-cell-special,
.m-gridpanel .x-grid-item-selected .x-grid-cell-special {
    background-image: none;
}

.x-grid-with-row-lines .x-grid-cell-checkcolumn .x-grid-cell-inner {
    padding-top: 8px;
}

.m-treepanel .x-grid-empty,
.m-gridpanel .x-grid-empty,
.m-treegridpanel .x-grid-empty {
    background-color: unset !important;
    font: unset;
    color: var(--text-hint);
}

/*Bỏ viền khi click vào grid*/
.m-treepanel .x-grid-item-focused .x-grid-cell-inner:before,
.m-gridpanel .x-grid-item-focused .x-grid-cell-inner:before,
.m-treegridpanel .x-grid-item-focused .x-grid-cell-inner:before {
    border: 0 !important;
    outline: none !important;
}

.m-gridpanel .row-imagecommand {
    width: 100%;
    height: 30px !important;
    line-height: 30px;
}

.m-treepanel .x-grid-with-row-lines .x-grid-item-selected + .x-grid-item,
.m-treegridpanel .x-grid-with-row-lines .x-grid-item-selected + .x-grid-item,
.m-gridpanel .x-grid-with-row-lines .x-grid-item-selected + .x-grid-item {
    border-top-style: solid;
    border-top-color: #ccc;
}

.m-treepanel .m-checkcolumn-editor,
.m-gridpanel .m-checkcolumn-editor {
    text-align: center;
}

.m-gridpanel .m-checkcolumn-editor .x-form-cb-default {
    margin-top: 3px;
}

.m-gridpanel > .x-panel-bodyWrap > .x-grid-header-ct {
    border: none;
}

.m-gridpanel > .x-panel-bodyWrap > .x-grid-header-ct > .x-box-inner {
    border-bottom: 1px solid var(--table-header-border-color);
}

.m-gridpanel > .x-panel-bodyWrap > .x-panel-body {
    
}

.m-gridpanel .x-column-header {
    background-color: var(--table-header-bg);
    background-image: none;
    border-right: 1px solid var(--table-header-border-color);
}

.m-gridpanel .x-column-header:last-child {
    border-right: none;
    /*padding-right: 6px;*/
}

.m-gridpanel .x-grid-item {
    background-color: var(--table-row-bg);
}

.m-gridpanel .x-grid-item.x-grid-item-over {
    background-color: var(--table-row-bg--hover);
}

.m-treepanel .x-grid-item.x-grid-item-selected,
.m-treegridpanel .x-grid-item.x-grid-item-selected,
.m-gridpanel .x-grid-item.x-grid-item-selected {
    background-color: var(--table-row-bg-selected);
}

/* .m-treepanel .x-grid-item.x-grid-item-selected.x-grid-item-over,
.m-treegridpanel .x-grid-item.x-grid-item-selected.x-grid-item-over,
.m-gridpanel .x-grid-item.x-grid-item-selected.x-grid-item-over {
    background-color: var(--table-row-bg-selected--hover);
} */

.m-treepanel .x-grid-cell-inner,
.m-treegridpanel .x-grid-cell-inner,
.m-gridpanel .x-grid-cell-inner {
    line-height: var(--table-cell-line-height) !important;
    padding: var(--table-cell-padding) !important;
}

.m-treepanel .x-grid-checkcolumn-cell-inner,
.m-treegridpanel .x-grid-checkcolumn-cell-inner,
.m-gridpanel .x-grid-checkcolumn-cell-inner {
    line-height: 0;
    padding: var(--table-cell-padding);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}


/*Checkbox column*/

.x-column-header-text-wrapper {
    display: table-cell;
    vertical-align: top;
}

.x-grid-cell-inner-row-numberer {
    text-align: right !important;
    padding-top: 11px !important;
}

.td-cell-inner .x-grid-cell-inner {
    padding-top: 11px !important;
}

/*#endregion */

/*#region [MISATreePanel Style] */

.m-treegridpanel .x-column-header,
.m-treegridpanel .x-group-sub-header {
    border: none;
    border-color: var(--table-header-border-color);
    border-top: none !important;
}

.m-treegridpanel .x-grid-item-over {
    background: var(--table-row-bg--hover);
    border-color: var(--table-row-bg--hover);
}

.m-treegridpanel .x-column-header {
    background-color: var(--table-header-bg);
    background-image: none;
    font-weight: var(--font-weight-semibold);
}

.m-treegridpanel .x-grid-cell-inner {
    padding: 8px 7px;
    line-height: 16px;
}

.m-treegridpanel .x-column-header:last-child {
    border-right: none;
}

.m-treegridpanel .x-column-header-inner.x-column-header-over {
    background: #d2d2d2;
}

.m-treegridpanel .x-column-header-text {
    line-height: 18px;
    white-space: normal;
    text-align: left;
    font-weight: 500;
}

/*.m-treegridpanel .x-grid-with-row-lines .x-grid-item,*/
.m-treegridpanel .x-grid-td {
    border-bottom: 1px solid #d0d7e5;
}

.m-tree-noborder .x-grid-td {
    border-bottom: none !important;
}

.treegridpanel .x-grid-cell-inner {
    padding: 7px 7px;
    line-height: 16px;
}

.m-tree-noborder .x-grid-cell-inner {
    padding: 4px 7px !important;
    line-height: 16px;
}

.m-treegridpanel .x-tree-expander {
    background: url("/Content/Images/Icon/squared-plus.png") 5px 8px no-repeat;
}

.m-treegridpanel .x-grid-tree-node-expanded .x-tree-expander {
    background: url("/Content/Images/Icon/squared-minus.png") 5px 8px no-repeat;
}

.m-treegridpanel .x-tree-elbow-img {
    width: 25px;
    margin-top: -5px;
    height: 29px;
}

.m-tree-noborder .x-tree-elbow-img {
    width: 25px;
    margin-top: -5px;
}

.m-treegridpanel .x-tree-elbow {
    background: url("/Content/Images/Icon/elbow.png") 11px 0px no-repeat !important;
}

.m-treegridpanel .x-tree-elbow-line {
    background: url("/Content/Images/Icon/elbow-line.png") 11px no-repeat !important;
}

.m-treegridpanel .x-tree-elbow-end {
    background: url("/Content/Images/Icon/elbow-end.png") 11px 0px no-repeat !important;
}

.tree-noicon .x-tree-icon-parent-expanded,
.tree-noicon .x-tree-icon-parent,
.tree-noicon .x-tree-icon-leaf {
    display: none;
}

/*style riêng cho treepanel không có dòng kẻ như treegridpanel*/
.m-treepanel {
}

.m-treepanel .x-grid-header-ct,
.m-treepanel .x-grid-body {
    border-top: none;
}

.m-treepanel .x-column-header,
.m-treepanel .x-group-sub-header {
    border: none;
    border-color: var(--table-header-border-color);
    border-top: none !important;
    border-bottom: 1px solid var(--table-header-border-color);
}

.m-treepanel .x-column-header {
    background-color: var(--table-header-bg);
    background-image: none;
}

.m-treepanel .x-grid-cell-inner {
    padding: 8px 7px;
    line-height: 16px;
}

.m-treepanel .x-column-header:last-child {
    border-right: none;
}

.m-treepanel .x-column-header-inner.x-column-header-over {
    background: #d2d2d2;
}

.m-treepanel .x-column-header-text {
    line-height: 18px;
    white-space: normal;
    text-align: left;
}

.m-treepanel .x-tree-expander {
    background: url("/Content/Images/Icon/squared-plus.png") 5px 6px no-repeat;
}

.m-treepanel .x-grid-tree-node-expanded .x-tree-expander {
    background: url("/Content/Images/Icon/squared-minus.png") 5px 6px no-repeat;
}

.m-treepanel .x-tree-elbow-img {
    width: 25px;
    margin-top: -4px;
}

.m-treegridpanel .x-grid-tree-node-expanded .x-tree-checkbox,
.m-treegridpanel .x-grid-tree-node-leaf .x-tree-checkbox,
.m-treegridpanel .x-grid-row .x-tree-checkbox {
    top: 2px;
    background: none;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    margin-top: 0;
    border: var(--checkbox-border-size) solid var(--checkbox-border-color);
    border-radius: var(--checkbox-radius);
    cursor: pointer;    
    overflow: hidden;
}

.m-treegridpanel .x-grid-tree-node-disabled .x-tree-checkbox {
    cursor: default;
}

.m-treegridpanel .x-tree-checkbox.x-tree-checkbox-checked {
    border: none;
}

.m-treegridpanel .x-tree-checkbox.x-tree-checkbox-checked::before  {
    position: absolute;
    font-family: MISAIconFont !important;
    content: "\E056";
    speak: none;
    font-weight: normal;
    font-style: normal;
    color: var(--checkbox-bg--checked);
    background: white;
    line-height: var(--checkbox-size);
    text-transform: none;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    border-radius: var(--checkbox-radius);
    font-size: var(--checkbox-size) !important;
    left: 0;
    top: 0;
}

.m-treegridpanel .x-grid-tree-node-disabled .x-tree-checkbox {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=54)" !important;
    opacity: 0.54 !important;
}

/*}*/


.x-grid-group-hd {
    background: #f5f5f5;
    padding: 9px 7px;
    border-color: #c1c1c1;
    border-width: 0 0 1px 0;
}

.x-group-hd-container {
    position: relative;
}

.x-grid-group-title {
    font-family: Roboto, Segoe UI, Arial, tahoma, verdana, sans-serif !important;
    font-size: var(--font-size-base);
    color: rgba(0, 0, 0, 0.87);
    font-weight: 500;
}

.x-grid-group-hd-collapsed .x-grid-group-title,
.x-grid-group-hd-collapsible .x-grid-group-title {
    background-image: none;
    padding: 0 0 0 20px;
}

.x-grid-group-hd-collapsed,
.x-grid-group-hd-collapsible,
.m-grid-locked .x-grid-group-hd-collapsed .x-grid-group-title,
.m-grid-locked .x-grid-group-hd-collapsible .x-grid-group-title {
    font-family: "MISAIconFont" !important;
    font-size: 18px;
}

.x-grid-group-hd-collapsible::before {
    content: "\E066";
    position: absolute;
    top: 8px;
    color: #6b6b6b;
}

.x-grid-group-hd-collapsed .x-grid-group-hd-collapsible::before {
    content: "\E065" !important;
    position: absolute;
    top: 8px;
    color: #6b6b6b;
}

.m-grid-locked {
}

.m-grid-locked .x-grid-group-hd-collapsible .x-grid-group-title {
    padding: 0 0 0 18px;
}

.m-grid-locked .x-grid-group-hd-collapsed .x-grid-group-hd-collapsible::before,
.m-grid-locked .x-grid-group-hd-collapsible::before {
    content: "" !important;
}

.m-grid-locked .x-grid-group-hd-collapsible .x-grid-group-title::before {
    content: "\E066";
    position: absolute;
    top: 2px;
    left: 0;
    color: #6b6b6b;
}

.m-grid-locked
    .x-grid-group-hd-collapsed
    .x-grid-group-hd-collapsible
    .x-grid-group-title::before {
    content: "\E065" !important;
    position: absolute;
    top: 2px;
    color: #6b6b6b;
}

.m-grid-locked .x-grid-group-hd-collapsible .x-grid-group-title span {
    padding: 0 0 0 24px;
}

.m-numbercolumn .x-column-header-text {
    text-align: right;
    margin-right: 0;
}

.m-numbercolumn.m-column-hasfilter-button .x-column-header-text {
    padding-right: 20px;
}

.m-treegridpanel .tree-column-checkbox-header .x-column-header-checkbox {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 4px;
    margin-left: 6px;
}

.m-treegridpanel .tree-column-checkbox-header .x-column-header-checkbox {
    background: url(/Content/Images/Icon/checkbox-unchecked.png) 0 0 no-repeat;
    content: " ";
    width: 16px;
    height: 16px;
}

.m-treegridpanel .x-treepanel-hd-checker-on .x-column-header-checkbox {
    background: url(/Content/Images/Icon/checkbox-checked.png) 0 0 no-repeat !important;
}

.m-treegridpanel .tree-column-checkbox-header .x-column-header-text {
    line-height: 18px;
    white-space: normal;
    text-align: left;
    font-weight: 500;
    margin-left: 25px;
}


.m-grid-border .x-column-header {
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6 !important;
}

.m-grid-border .x-column-header.x-column-header-last {
    border-right: none;
}

.m-grid-border .x-column-header .x-group-sub-header {
    border-right: 1px solid #e6e6e6;
    border-bottom: none;
    border-top: none !important;
}

.m-grid-border .x-column-header .x-group-sub-header.x-column-header-last {
    border-right: none;
}

.m-grid-border .x-grid-with-row-lines .x-grid-item {
    border-bottom: 1px solid #e6e6e6;
    border-top: none;
}

.m-grid-border .x-grid-with-row-lines .x-grid-item-selected + .x-grid-item {
    border-top: none;
}

.m-grid-border .x-docked-summary .x-grid-item {
    border-bottom: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
}

.m-grid-border .x-grid-td {
    border-right: 1px solid #e6e6e6;
}

.m-grid-border .x-grid-td:last-child {
    border-right: none;
}

.m-grid-border .x-column-header.m-column-hasfilter .x-column-header-inner {
    border-bottom: 1px solid #e6e6e6;
}

.m-grid-border .x-group-header.m-column-hasfilter .x-column-header-inner {
    border-bottom: none;
}

.m-grid-border .x-group-header > .x-column-header-inner {
    border-bottom: 1px solid #e6e6e6 !important;
}

.m-grid-border .x-column-header-text {
    text-align: center;
}


/* ============================================
Grid
============================================*/

.m-gridpanel > .x-panel-bodyWrap > .x-grid-header-ct {
    border: none;
}

.m-gridpanel > .x-panel-bodyWrap > .x-grid-header-ct > .x-box-inner {
    border-bottom: 1px solid var(--table-header-border-color);
}

.m-gridpanel > .x-panel-bodyWrap > .x-panel-body {
    
}

.m-gridpanel > .x-panel-bodyWrap > .m-pagging-toolbar {
}

.m-gridpanel .x-column-header {
    background-color: var(--table-header-bg);
    background-image: none;
}

.m-gridpanel .x-column-header:last-child {
    border-right: none;
    /*padding-right: 6px;*/
}

.m-gridpanel .x-grid-item {
    background-color: var(--table-row-bg);
}

.m-gridpanel .x-grid-item.x-grid-item-over {
    background-color: var(--table-row-bg--hover);
}

.m-gridpanel .x-grid-item.x-grid-item-selected {
    background-color: var(--table-row-bg-selected);
}

.m-gridpanel .x-grid-cell-inner {
    line-height: var(--table-cell-line-height) !important;
    padding: var(--table-cell-padding) !important;
}

.m-gridpanel .x-grid-checkcolumn-cell-inner {
    line-height: 0;
    padding: var(--table-cell-padding);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.m-gridpanel .x-column-header-inner .x-column-header-text-inner {
    font-weight: var(--font-weight-semibold);
}

.m-gridpanel .x-column-header-checkbox .x-column-header-inner {
    padding: 0;
    cursor: pointer;
}

.m-gridpanel
    .x-column-header-checkbox
    .x-column-header-inner
    .x-column-header-text-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.m-gridpanel .x-column-header-inner {
    text-align: center;
    padding: var(--table-header-padding);
}

.m-gridpanel .x-column-header-inner,
.m-gridpanel .x-column-header-inner.x-column-header-over {
    background-color: var(--table-header-bg);
    background: none;
}

.m-gridpanel .x-column-header-text {
    line-height: var(--table-header-line-height);
    white-space: nowrap;
    text-align: left;
    text-overflow: ellipsis;
}

.m-gridpanel .m-column-hasfilter.x-column-header .x-column-header-inner {
    border-bottom: 1px solid var(--table-header-border-color);
    border-top: none !important;
}

.x-grid-checkcolumn,
.x-column-header-checkbox .x-column-header-checkbox {
    background: none;
    border: var(--checkbox-border-size) solid var(--checkbox-border-color);
    background-color: var(--checkbox-bg);
    border-radius: var(--checkbox-radius);
    overflow: hidden;
    cursor: pointer;
    line-height: 0;
    min-width: fit-content;
    display: flex;
}

.x-grid-checkcolumn::after,
.x-column-header-checkbox .x-column-header-checkbox:after {
    position: relative;
    width: calc(var(--checkbox-size) - var(--checkbox-border-size));
    height: calc(var(--checkbox-size) - var(--checkbox-border-size));
    line-height: calc(var(--checkbox-size) - var(--checkbox-border-size));
    content: "";
    background-image: none;
}

.x-grid-item .x-grid-checkcolumn.x-grid-checkcolumn-checked,
.x-column-header-checkbox.x-grid-hd-checker-on .x-column-header-checkbox {
    border-color: var(--checkbox-border-color--checked);
    background-color: var(--checkbox-bg--checked);
    border: none;
}
.m-gridpanel .x-grid-item-selected .x-selmodel-column .x-grid-checkcolumn:after,
.m-gridpanel .x-grid-checkcolumn.x-grid-checkcolumn-checked:after,
.m-treegridpanel .x-grid-checkcolumn.x-grid-checkcolumn-checked:after,
.x-column-header-checkbox.x-grid-hd-checker-on .x-column-header-checkbox::after {
    font-family: MISAIconFont !important;
    content: "\E056";
    speak: none;
    font-weight: normal;
    font-style: normal;
    color: var(--checkbox-bg--checked);
    background: white;
    line-height: var(--checkbox-size);
    text-transform: none;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    font-size: 16px !important;
    border-radius: var(--checkbox-radius);
    overflow: hidden;
}
.x-column-header-checkbox.x-grid-hd-checker-on .x-column-header-checkbox::after {
    left: 0;
    top: 0;
}

/*#region [MISAFilterHeader Style] */

.m-filter-container .x-field .x-form-text-wrap {
    height: var(--table-filter-inner-height);
}

.m-filter-container .x-form-text-default {
    background: none;
    background-color: var(--table-filter-bg);
    padding: var(--table-filter-inner-padding);
}

.m-filter-container .x-form-text-wrap {
    border: 1px solid var(--table-filter-border-color);
    border-radius: var(--table-filter-border-radius);
}

.m-filter-container .x-field-focus .x-form-text-wrap,
.m-filter-container .x-field-focus .x-form-trigger-default {
    border-color: var(--table-filter-border-color--focus);
}

.m-filter-container .x-field-focus .x-form-arrow-trigger {
    color: var(--table-filter-arrow-color--focus) !important;
}

.m-filter-container .m-enumfilterfield .x-form-trigger-default,
.m-filter-container .m-datetimefilterfield .x-form-trigger-default {
    width: 24px;
    background: var(--white);
    background-image: none;
    border-width: 1px 1px 1px 0;
    border-color: var(--table-filter-border-color);
    border-style: solid;
    border-radius: 0 var(--table-filter-border-radius)
        var(--table-filter-border-radius) 0;
}
.m-filter-container .m-enumfilterfield .x-form-trigger-focus,
.m-filter-container .m-datetimefilterfield .x-form-trigger-focus {
    border-color: var(--table-filter-border-color--focus);

}

.m-filter-container .m-enumfilterfield .x-form-text-wrap,
.m-filter-container .m-datetimefilterfield .x-form-text-wrap {
    border-right: none;
    border-radius: var(--table-filter-border-radius) 0 0
        var(--table-filter-border-radius);
}

.m-filter-container .m-enumfilterfield .x-form-arrow-trigger::before,
.m-filter-container .m-datetimefilterfield .x-form-trigger-default::before {
    font-family: MISAIconFont !important;
    speak: none;
    font-weight: normal;
    font-style: normal;
    font-size: 16px !important;
    color: rgba(0, 0, 0, 0.54) !important;
    background: transparent !important;
    line-height: 16px;
    text-transform: none;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    border: none;
    position: relative;
}
.m-filter-container .m-enumfilterfield .x-form-arrow-trigger::before {
    content: "\E065";
    right: 0;
    top: 8px;
}
.m-filter-container .m-datetimefilterfield .x-form-trigger-default::before {
    content: "\E004";
    right: 3px;
    top: 7px;
}

.m-checkboxfilterfield {
}

.m-textfilterfield {
}

.m-filter-container .m-filtercyclebutton {
    border: none !important;
    border-radius: 0 !important;
    background: none;
    background-color: transparent !important;
    padding: 0 !important;
}

.m-filter-container .m-filtercyclebutton .x-btn-wrap {
    width: 12px;
}
.m-filter-container .m-filtercyclebutton .x-btn-wrap::after {
    padding: 0;
    margin: 0;
    background: none;
}

.m-filter-container .m-filtercyclebutton .x-btn-wrap .x-btn-button {
    flex: none;
    padding: 0;
}

.m-filter-container .m-filtercyclebutton .ic-filter4::before {
    color: rgba(0, 0, 0, 0.62);
}

.misaIcon.ic-filter4 {
    opacity: 0.62;
}

/*#region [Paging Style] */

.m-pagging-toolbar {
    padding: 0;
    border-color: var(--pagination-bg-color);
    background: var(--pagination-bg-color);
    font-weight: var(--font-weight-regular);
}

.m-pagging-toolbar > .x-box-inner {
    padding-right: 16px;
}

.m-pagging-toolbar .x-toolbar-text-default {
    font: inherit;
    font-weight: var(--font-weight-regular);
}

.m-pagging-toolbar .x-btn:not(.x-item-disabled):hover {
    background-color: var(--brand-light-hover);
}

.m-pagging-toolbar .x-btn.x-item-disabled .x-btn-icon-el {
    opacity: 0.5;
}

.m-pagging-toolbar .m-combobox .x-form-item-label-inner-toolbar {
    padding-top: 4px;
}

.m-pagging-toolbar .cbopagesize .x-form-item-label-text {
    color: var(--text-color-default);
}

.m-pagging-toolbar .m-numberfield .x-form-text-default {
    padding: 0 6px;
    height: 24px;
}

.m-pagging-toolbar .tbar-page-number .x-form-text-wrap-default {
    border-radius: 3px;
}

.m-pagging-toolbar .tbar-page-number .x-form-text-default {
    text-align: center;
}

.m-pagging-toolbar .x-tbar-page-first,
.m-pagging-toolbar .x-tbar-page-prev,
.m-pagging-toolbar .x-tbar-page-next,
.m-pagging-toolbar .x-tbar-page-last {
    background-image: none;
    font-family: MISAIconFont !important;
    speak: none;
    font-weight: normal;
    font-style: normal;
    font-size: 16px !important;
    color: rgba(0, 0, 0, 0.54) !important;
    background: transparent !important;
    /* padding-left: 3px; */
    text-transform: none;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    border: none;
}

.m-pagging-toolbar .x-tbar-page-first::before {
    content: "\E098";
}

.m-pagging-toolbar .x-tbar-page-prev::before {
    content: "\E096";
}

.m-pagging-toolbar .x-tbar-page-next::before {
    content: "\E097";
}

.m-pagging-toolbar .x-tbar-page-last::before {
    content: "\E099";
}

.m-pagging-toolbar .x-btn.x-btn-disabled.x-btn-default-toolbar-small {
    border: none;
}

.m-pagging-toolbar .x-btn-over.x-btn-default-toolbar-small,
.m-pagging-toolbar .x-btn-focus.x-btn-default-toolbar-small {
    background: none;
    background-color: var(--button-text-bg-hover--neutral);
}

.m-pagging-toolbar .x-btn.x-btn-default-toolbar-small {
    min-width: unset;
    /* padding: 0 4px; */
}

/*#endregion */

.x-grid-item-focused .x-grid-cell-inner:before {
    border: none;
}

.m-treegridpanel.bg-toolbar-white .x-toolbar-footer {
    background-color: #fff;
}

/*Style row thêm dòng trống*/
.x-grid-item-insert-row {
    padding: 5px 6px;
    background: #ffffef;
    font-style: italic;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
}

.x-grid-header-ct + .x-grid-body {
    border-radius: 0 !important;
}

.m-tab-panel .x-tab-focus.x-tab-default .x-tab-button::before {
    outline: none;
}

.m-tab-panel .x-tab-button-default {
}

.m-tab-panel .x-tab.x-tab-active.x-tab-default .x-tab-inner-default,
.m-tab-panel .x-tab-default .x-tab-inner {
    font-size: 14px;
    text-transform: uppercase;
    padding: 8px 15px;
    color: rgba(0, 0, 0, 0.7);
    font-weight: 700;
    position: relative;
}

.m-tab-panel .x-tab.x-tab-active.x-tab-default .x-tab-inner-default {
    color: rgba(0, 0, 0, 0.87);
}

.m-tab-panel .x-tab-default-top {
    padding: 0;
    margin: 0;
}

.m-tab-panel .x-tab-default-top:first-child {
    margin-left: 10px;
}

.m-tab-panel .x-tab-bar-default-top,
.m-tab-panel .x-tab.x-tab-focus.x-tab-over.x-tab-default,
.m-tab-panel .x-tab.x-tab-active.x-tab-default-top,
.m-tab-panel .x-tab.x-tab-active.x-tab-default-left,
.m-tab-panel .x-tab.x-tab-active.x-tab-default-right {
    background-image: none;
    background-color: transparent;
}

.m-tab-panel .x-tab-default {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-image: none;
    background-color: transparent;
    border-bottom: 1px solid #ccc;
    padding-bottom: 2px;
}

.m-tab-panel .x-tab-bar-top > .x-tab-bar-body-default {
    border-radius: 0;
    border: none;
    background-image: none;
    background-color: #f5f5f5;
}

.m-tab-panel .x-tab.x-tab-active {
    border: none;
    box-shadow: none;
    border-bottom: 3px solid #4262f0;
    padding-bottom: 0;
}

.m-tab-panel .x-tab-bar-top > .x-tab-bar-strip-default {
    display: none;
}

.m-tab-panel > .x-panel-bodyWrap > div.x-panel-body-default {
    border-top-width: 0;
}

.m-tab-panel .barge {
    position: absolute;
    right: 0;
    top: 5px;
    background-color: #ff6f00;
    color: #fff;
    border-radius: 11px;
    padding: 1px 5px;
    font-size: 10px;
}

.m-tab-panel .x-tab-bar-default-top .x-box-scroller-right,
.m-tab-panel .x-tab-bar-default-top .x-box-scroller-left {
    /*display: none;*/
}

.m-tab-panel-detail .x-tab-default-top:first-child {
    margin-left: 0;
    border-left: none;
}

.m-tab-panel-detail .x-tab.x-tab-active.x-tab-default .x-tab-inner-default,
.m-tab-panel-detail .x-tab-default .x-tab-inner {
    padding: 8px 15px !important;
}

.m-tab-panel.m-tab-panel-flex .x-tab-default {
    position: relative !important;
    float: left;
    left: 0 !important;
    height: 29px !important;
}

.m-tab-panel.m-tab-panel-flex .x-box-scroller {
    display: none;
    width: 0;
}

.m-tab-panel.m-tab-panel-flex
    .x-tab-bar-default-scroller
    .x-box-scroller-body-horizontal {
    margin-left: 0;
}

.m-tab-panel.m-tab-panel-flex .x-tab-bar-default-top {
    border-left: none;
}


.m-tab-panel {
    border: none;
    background-color: transparent;
}

.m-tab-panel .x-panel-bodyWrap {
}

.m-tab-panel .x-panel-bodyWrap > .x-toolbar {
}

.m-tab-panel .x-panel-bodyWrap > .x-panel-body > .x-panel-header {
    border: none;
    border-radius: var(--view-header-border-radius);
}

.m-tab-panel
    .x-panel-bodyWrap
    > .x-panel-body
    > .x-panel-header.x-panel-header-default-vertical {
    /* width: var(--view-header-size); */
    background: none;
    background-color: var(--view-header-bg-color);
    padding: 8px 12px;
}

.m-tab-panel .x-panel-bodyWrap > .x-panel-body > .x-splitter {
}

.m-tab-panel
    .x-panel-bodyWrap
    > .x-panel-body
    > .x-splitter.x-splitter-vertical {
    /* width: var(--view-splitter-size) !important; */
    background: none;
    background-color: var(--view-splitter-bg-color);
}

/* Splitter */
.x-splitter .x-layout-split-left, 
.x-splitter .x-layout-split-right {
    height: 56px;
    background: url(/Content/Images/Icon/collapse-vertical.svg) 0 0 no-repeat;
    width: 8px;
    left: -4px;
    z-index: 10;
    transform: rotate(180deg);
}

.x-splitter.x-splitter-collapsed .x-layout-split-right,
.x-splitter:not(.x-splitter-collapsed) .x-layout-split-left {
    transform: unset;
}

.m-treepanel > .x-panel-bodyWrap > .x-panel-body.x-panel-body-default { 
    background-color: var(--white);
}

.m-tab-panel .x-panel-bodyWrap > .x-panel-body > .x-panel:not(.x-panel-header) {
}

.x-panel-body .x-panel-body {
    border-radius: var(--view-body-border-radius);
    border: none;
}

.m-tab-panel-detail {
    background-color: var(--white);
    border-radius: var(--view-body-border-radius);
}

.x-panel-body {
    background-color: var(--white);
}

/*#region [Toolbar Style] */

.m-toolbar {
    border: none;
    border-radius: 0;
    background-color: var(--toolbar-bg-color);
    background-image: none;
    margin: var(--toolbar-margin);
}

/*#endregion */

.x-panel-body-default {
    background: none;
    border: none;
}


.x-taglabel ul.x-taglabel-list {
    height: auto;
    min-height: 20px;
    cursor: text;
    padding: 0px;
    overflow: hidden;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

.x-taglabel input {
    border: 0px;
    background: none;
    margin: 0px;
    padding: 0px;
}

.x-taglabel-input,
.x-taglabel-item {
    float: left;
    display: inline-block;
    position: relative;
    zoom: 1;
}

.x-ie7m .x-taglabel-input,
.x-ie7m .x-taglabel-item {
    float: left;
    display: inline;
    zoom: 1;
}

.x-ie7m .x-taglabel {
    margin-top: 0px;
    margin-bottom: 0px;
}

.x-taglabel-item {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #8fafe0;
    padding: 0px 1px 0px 5px;
    margin: 1px 2px 1px 1px;
    background-color: #dfe8f6;
    cursor: default;
    float: left;
}

.x-ie6 .x-taglabel-item-disabled {
    filter: none;
}

.x-taglabel-item-disabled {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
    opacity: 0.3;
}

.x-taglabel-item-icon {
    padding-left: 25px;
    background-position: 5px 0px;
}

.x-taglabel-item.x-taglabel-item-selected {
    background-color: #6892d4;
    color: white;
    border: 1px solid #0557be !important;
}

.x-taglabel-item.x-taglabel-item-over {
    background-color: #b7cbeb;
    border: 1px solid #6892d4;
}

.x-taglabel-stacked .x-taglabel-item,
.x-taglabel-stacked .x-taglabel-input {
    display: block;
    float: none;
}

.x-taglabel-stacked ul.x-taglabel-list {
    overflow-x: hidden;
    overflow-y: auto;
}

.x-taglabel-item-text {
    line-height: 16px;
    padding-right: 5px;
    font-size: 12px;
}

.x-taglabel-closable .x-taglabel-item-text {
    padding-right: 16px;
}

.x-taglabel-empty {
    color: gray;
    float: left;
    padding: 0px 1px 0px 2px;
    margin: 2px 1px 1px 0;
}

.x-taglabel-item .x-taglabel-close-btn {
    display: block;
    cursor: pointer;
    position: absolute;
    font-size: 0;
    line-height: 0;
    background: no-repeat;
    width: 11px;
    height: 11px;
    top: 3px;
    right: 3px;
    background-image: url(../../Content/Css/Images/Icon/close-groupbar.png);
}

.x-taglabel-item-disabled .x-taglabel-close-btn {
    cursor: default;
}

.x-taglabel-item .x-taglabel-close-btn-over {
    background-position: 0px -22px;
}

.x-tagcombo .x-form-trigger {
    margin-top: 0px;
}

.x-tagcombo .x-form-field {
    padding: 0px;
}

.x-ie7m .x-taglabel {
    margin-top: -1px;
    margin-bottom: 0px;
}

.x-ie7m .x-taglabel input {
    margin-top: 0px;
    margin-bottom: 0px;
}

.x-tagcombo.x-item-disabled .x-form-field,
.x-tagcombo.x-item-disabled .x-form-trigger {
    filter: inherit;
    opacity: inherit;
}

.x-tagcombo.x-item-disabled .x-form-trigger-wrap {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
    opacity: 0.3;
}

.x-tagcombo-stacked .x-field-toolbar-body .x-trigger-cell {
    border-bottom: none;
}

.x-hide-selection .x-boundlist-selected {
    display: none;
}

.x-taglabel-item {
    padding: 3px 1px 2px 5px;
}

.x-tagcombo .x-taglabel-item {
    padding: 0px 1px 0px 5px;
}

.x-taglabel-item.x-taglabel-closable {
    padding: 3px 3px 2px 5px;
}

.x-tagcombo .x-taglabel-item.x-taglabel-closable {
    padding: 0px 1px 0px 5px;
}

.x-tagcombo .x-taglabel-item.x-taglabel-closable.x-taglabel-item-icon {
    padding: 0px 1px 0px 25px;
}

.x-taglabel-item .x-taglabel-close-btn {
    top: 5px;
}

.x-tagcombo .x-taglabel-item .x-taglabel-close-btn {
    top: 3px;
}

.x-taglabel-item-icon {
    padding-left: 25px;
    background-position: 5px center;
}

.x-theme-neptune .x-taglabel ul.x-taglabel-list,
.x-theme-neptunetouch .x-taglabel ul.x-taglabel-list,
.x-theme-gray .x-form-text-wrap-toolbar .x-taglabel-list,
.x-theme-blue .x-form-text-wrap-toolbar .x-taglabel-list {
    background-color: white;
}

.x-btn-wrap-default-toolbar-small.x-btn-arrow-right:after {
    width: 8px;
    background-image: url(/Content/Images/Icon/dropdown-white-line16.png);
    padding-right: 14px;
}

.m-toolbar-detail {
    border: none;
    background-image: none;
    padding: 0;
    margin: 0;
    background-color: #fff;
}

.m-toolbar-detail .x-btn.x-btn-disabled {
    border-color: currentColor;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=54)" !important;
    opacity: 0.54 !important;
}

.m-toolbar-detail
    .x-btn.x-btn-disabled.x-btn-default-toolbar-small
    .x-btn-inner {
    /*color: #5146fa;*/
}

.x-menu .x-toolbar-default {
    border: none;
    background: var(--white);
    padding: 12px 12px 0 12px;
    background-image: none;
}
:root {
  /* Dark */
  --tooltip-bg-color--dark: var(--neutral-950);
  --tooltip-text-color--dark: var(--white);

  /* Light */
  --tooltip-bg-color--light: var(--white);
  --tooltip-text-color--light: var(--text-color-default);

  /* Primary */
  --tooltip-bg-color--primary: var(--brand-default);
  --tooltip-text-color--default: var(--white);

  /* Error */
  --tooltip-bg-color--error: var(--danger-default);
  --tooltip-text-color--error: var(--white);

  /* Default */
  --tooltip-bg-color--default: var(--tooltip-bg-color--light);
  --tooltip-text-color--default: var(--tooltip-text-color--light);

  --tooltip-padding: 8px 12px;
}

.x-tip {
  padding: var(--tooltip-padding);
  box-shadow: 0px 0px 12px 0px var(--neutral-100, rgba(0, 0, 0, 0.10));
  background-color: var(--tooltip-bg-color--default);
  color: var(--tooltip-text-color--default);
  border: none;
  border-radius: 8px;
}

.x-tip .x-tip-bodyWrap {

}

.x-tip .x-tip-bodyWrap .x-tip-body {
  
}

.x-tip .x-tip-bodyWrap .x-tip-body {
  
}
.x-tip .x-tip-bodyWrap .x-tip-body.x-tip-body-form-invalid {
  margin: 0;
  background-position-y: 6px;
}

.x-tip .x-tip-bodyWrap .x-tip-body.x-tip-body-form-invalid li {
  margin: 0;
}

.x-tip .x-tip-bodyWrap .x-tip-body .x-list-plain {
  color: inherit;
}

.x-tip .x-tip-anchor {
  color: var(--tooltip-bg-color--default);
}
.x-tip .x-tip-anchor::after{
  border-color: transparent;
}

.x-tip .x-tip-anchor.x-tip-anchor-bottom {
  border-top-color: currentColor !important;
}
.x-tip .x-tip-anchor.x-tip-anchor-top {
  border-bottom-color: currentColor !important;
}
.x-tip .x-tip-anchor.x-tip-anchor-left {
  border-right-color: currentColor !important;
}
.x-tip .x-tip-anchor.x-tip-anchor-right {
  border-left-color: currentColor !important;
}

.x-tip.x-tip--error {
  background-color: var(--tooltip-bg-color--error);
}
.x-tip.x-tip--error * {
  color: var(--tooltip-text-color--error);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-caption);
}
.x-tip.x-tip--error .x-tip-body {
  background: none;
  padding: 0;
}
.x-tip.x-tip--error .x-tip-body li {
  margin: 0;
}
.x-tip.x-tip--error .x-tip-anchor {
  color: var(--tooltip-bg-color--error);
}

.x-tip.x-tip-form-invalid {
  background-color: var(--tooltip-bg-color--error);
  box-shadow: none;
  -webkit-box-shadow: none;
}

.x-tip.x-tip-form-invalid .x-tip-body {
  padding: unset;
  background: none;
  color: var(--tooltip-text-color--error);
}
.x-panel.x-border-item .x-panel-header.x-collapsed-left {
    background: none;
    border: none;
    background-color: var(--view-header-bg-color);
    border-radius: var(--view-header-border-radius);
    padding: 8px 12px;
}

:root {
    --card-padding: 12px;
}

#unlicensed {
    z-index: -1;
    top: -99999px !important;
    position: absolute !important;
    display: none !important;
}

.x-border-box,
.x-border-box * {
    outline: none !important;
}

.x-item-disabled .x-form-text-default,
.x-item-disabled .x-form-trigger-default {
    background-color: #f5f5f5 !important;
    background-image: none;
    color: rgba(0, 0, 0, 0.54);
}

.x-item-disabled .x-form-item-label-default,
.x-item-disabled .x-form-cb-label-default {
    color: rgba(0, 0, 0, 0.54);
}

.x-form-item-label-toolbar,
.x-column-header,
.x-toolbar-text-default,
.x-grid-item {
    color: rgba(0, 0, 0, 0.87);
}

.x-form-invalid-field-default {
    background-image: none;
}

.x-tip-default {
    background-color: white;
}
/*#endregion */


/*#region [Button Split Style] */
body > .x-mask {
    background-color: rgba(0, 0, 0, 0.54);
}

.col-finish {
    padding-right: 6px;
}

.m-rownumberercolumn .x-column-header-text {
    text-align: right;
    padding-right: 0px;
    margin-right: 3px;
}

.notifyCheckbox .m-checkbox .x-form-cb-label {
    position: absolute;
    left: 15px;
    font-family: Roboto, Segoe UI, Arial, tahoma, verdana, sans-serif !important;
    font-size: 13px;
}

.x-notification .x-tool-tool-el {
    color: #666;
    opacity: 0.9;
}

.x-notification .x-window-header-default .x-tool-img::before {
    content: "\E080";
}

.hide-paging-bar .x-toolbar {
    display: none;
}

.multi-column {
    /*width: auto !important;*/
    padding-top: 25px;
}

.ms-cbo-table-template {
    border-spacing: 0;
}

.cbo-content {
    max-height: 190px;
    /*overflow: auto;*/
}

/*luôn padding column cuối cùng 17px để xử lý scroll*/
.bl-node:last-child .cbo-item {
    padding-right: 17px;
}

.cbo-html {
    font-size: 16px;
    margin-left: 8px;
    z-index: 99;
    background-color: #dedede;
    background-image: -moz-linear-gradient(center top, #fcfcfc, #dedede);
    background-image: -webkit-gradient(
        linear,
        50% 0%,
        50% 100%,
        color-stop(0%, #fcfcfc),
        color-stop(50%, #dedede),
        color-stop(51%, #e8e8e8),
        color-stop(100%, #f5f5f5)
    );
    background-image: -webkit-linear-gradient(top, #fcfcfc, #dedede);
    background-image: -o-linear-gradient(top, #fcfcfc, #dedede);
    background-image: linear-gradient(top, #fcfcfc, #dedede);
}

.cbo-html a {
    text-decoration: none;
}

.cbo-html a span {
    font-size: 21px;
    color: #000;
}

.cbo-html .dropdown {
    border: 1px solid #ccc;
    font-size: 21px;
    padding: 6px 8px 2px 12px;
    background-color: white;
}

.cbo-html ul li {
    border-bottom: solid 1px #ddd;
    padding: 0;
}

.cbo-html .fa.fa-angle-down.v-top {
    padding-left: 4px;
}

/*#endregion */
/*#endregion */

/*textbox nhập liệu trên dropdown của combobox*/
.m-boundlist-searchcontainer {
    width: 100%;
    padding: 4px;
    border: none;
}

.m-boundlist-searchfield {
    width: 100%;
    height: 25px;
    border-radius: var(--input-border-radius);
    border: 1px solid var(--input-border-color);
    padding: 0 8px;
}

.row-disabled {
    background: rgba(0, 0, 0, 0.1);
}

/*Control MISAItemSearchAdvance-------------------------------------------------------*/
.m-itemsearchadvance {
    margin-bottom: 8px;
}

.item-itemsearchadvance {
    margin-right: 10px !important;
}

/*Control MISAItemSearchAdvance-------------------------------------------------------*/

.m-itemsearchadvance {
    /*background-color:cadetblue;
    height: 50px;*/
}

.m-itemsearchadvance .cls-hidden {
    display: none;
}

.m-itemsearchadvance .m-line-condition {
    border-top: solid 1px #cccccc;
    margin: 5px 0px 2px !important;
    width: calc(100% - 65px);
    top: 0px !important;
}

.m-itemsearchadvance .m-combobox.no-border .x-form-text-wrap-default {
    border: none;
    background-color: transparent;
    height: 24px;
}

.m-itemsearchadvance .m-combobox.no-border .x-form-trigger-default {
    border: none !important;
    background-color: transparent !important;
    color: #3276c3;
}

.m-itemsearchadvance .m-combobox.no-border .x-form-text-default {
    background-color: transparent;
    color: #3276c3;
}

.m-itemsearchadvance .m-combobox.no-border.x-field-focus .x-form-item-body {
    box-shadow: none !important;
}

.cls-or .m-itemsearchadvance .m-condition {
    top: -6px !important;
}

.m-itemsearchadvance .m-combobox.no-border .x-form-arrow-trigger::before {
    color: #3276c3 !important;
}

.m-itemsearchadvance .m-searchadvance-datefield .x-form-trigger-default {
    width: 24px;
    background: #fff;
    background-image: none;
    border-width: 1px 1px 1px 0;
    border-color: #c1c1c1;
    border-style: solid;
}

.m-itemsearchadvance
    .m-searchadvance-datefield
    .x-form-trigger-default::before {
    font-family: MISAIconFont !important;
    speak: none;
    font-weight: normal;
    font-style: normal;
    font-size: 16px !important;
    color: rgba(0, 0, 0, 0.54) !important;
    background: transparent !important;
    line-height: 16px;
    text-transform: none;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    border: none;
    content: "\E004";
    position: relative;
    right: 0;
    top: 8px;
}

.Text-right-icon {
    padding-top: 7px !important;
    text-align: right;
}

.Text-right-icon .x-border-box {
    outline: none !important;
    border: none;
    background: whitesmoke !important;
}

.Text-Center {
    line-height: 40px;
    font-weight: bold;
}

.Text-right-icon .cl-blue {
    background: whitesmoke;
}

.text-font-size .x-btn-inner-default-small {
    font-size: 13px;
    font-weight: bold;
}

.Text-right-icon .cl-gray {
    background: whitesmoke;
}

/*#region Tagfield */
.EmployeeStatusCombo tr.x-boundlist-item.ms-cbo-item:first-child td {
    padding-left: 0 !important;
}

.EmployeeStatusCombo tr.x-boundlist-item.ms-cbo-item td {
    padding-left: 15px;
}

.EmployeeStatusCombo tr.x-boundlist-item.ms-cbo-item:last-child td {
    padding-left: 0 !important;
}

.d-none {
    display: none;
}

.cus-multi-combo-search {
    padding: 0px 6px 0 6px;
    /*height:15px!important;*/
    /* line-height:15px!important;*/
    border-radius: 4px;
}

.cus-multi-combo-search
    .misa-control-label-required
    .x-form-item-label-text::after {
    content: "";
}

.cus-multi-combo-search div#misaitemsearchadvance_1089_txtValue-triggerWrap {
    width: 378px;
    padding-left: 5px;
}

/*#endregion */

/* #region MISADateFieldCustom */
.m-itemdatefieldcustom .m-number-datefieldCustom {
    display: flex;
}

.m-itemdatefieldcustom .m-number-datefieldCustom .x-form-item-label {
    order: 2;
    padding: 5px 0 5px 2px;
}

.m-itemdatefieldcustom .m-number-datefieldCustom .x-form-text-field-body {
    min-width: unset;
    order: 1;
}

.m-tagfieldsearch .x-tagfield-input-field {
    width: 0;
}

.m-tagfieldsearch .x-form-text-default.x-tagfield {
    position: relative;
    overflow: hidden;
    height: 100% !important;
}

.m-tagfieldsearch .x-tagfield .x-tagfield-list {
    padding-right: 44px;
}

.m-tagfieldsearch .tag-remain-wrap {
    position: absolute;
    right: 0;
    top: 0px;
}

.m-tagfieldsearch .tag-count {
    background: #3276c3;
    color: #fff;
    width: 24px;
    height: 24px;
    line-height: 24px;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    margin-left: 4px;
}

.ms-search-boundlist {
    padding-top: 0 !important;
    background: #fff !important;
    padding: 12px 12px 0 12px;
}

.ms-search-boundlist .ms-cbo-hearder span {
    padding: 2px 5px 2px 4px;
}

.ms-search-boundlist ul.x-list-plain {
    overflow: hidden;
}

.ms-search-boundlist .cbo-header {
    top: 40px !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    background: #fff !important;
    padding: 4px 0 12px 0;
}

.ms-search-boundlist .cbo-header .ms-cbo-table-template {
    border-bottom: 1px solid #ddd;
}

.ms-search-boundlist .cbo-content {
    margin-top: 40px;
    overflow: auto;
}

.ms-search-boundlist .x-toolbar {
    display: block !important;
}

.ms-search-boundlist .x-tag-header-checkbox {
    cursor: pointer;
}

.ms-search-boundlist .x-tag-header-checkbox,
.ms-search-boundlist .x-tag-item-unchecked,
.ms-search-boundlist .x-tag-item-checked {
    background-position: left 5px center;
    padding-left: 22px !important;
    background-size: 16px !important;
    background-repeat: no-repeat !important;
}

.ms-search-boundlist .x-tag-header-checkbox.checked,
.ms-search-boundlist .x-tag-item-checked {
    background-image: url("../../Content/Css/images/icon/ic_cb_checked.svg") !important;
}

.ms-search-boundlist .x-tag-header-checkbox,
.ms-search-boundlist .x-tag-item-unchecked {
    background-image: url("../../Content/Css/images/icon/ic_cb_unchecked.svg");
}

.ms-search-boundlist .x-boundlist-selected {
    background: #fff !important;
}

.ms-search-boundlist .x-boundlist-item:hover td:not(.x-tag-check) {
    background-color: #cce8ff !important;
}

.ms-search-boundlist .x-boundlist-item:hover .bl-node:nth-child(2) {
    background-color: #cce8ff !important;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.ms-search-boundlist .x-boundlist-item:hover .bl-node:last-child {
    background-color: #cce8ff !important;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.ms-search-boundlist .x-boundlist-item-over {
    background-color: #fff;
}

.ms-search-boundlist .search-boundlist-input input {
    background: url(../../Content/Css/images/icon/Ic_seerch.png) left center no-repeat;
    padding-left: 30px;
}

.ms-search-boundlist .x-boundlist-item td.bl-node {
    padding-left: 2px;
    padding-right: 0px;
}

.ms-search-boundlist .x-boundlist-item td.bl-node.x-tag-check {
    padding-right: 1px;
}

.ms-search-boundlist .x-boundlist-item .bl-node.x-tag-check .cbo-item {
    width: 9px !important;
}