:root {
    --Brand-Primary-Light: #4E6CA6;
    --Brand-Primary-Dark: #152846;
    --Brand-Accent-Light: #D0C776;
    --Brand-Accent-Dark: #565332;
    --Brand-DarkBlue: #2E4167;
    --Brand-Error: #E83F51;
    --Brand-Warning-Dark: #F79009;
    --Brand-Warning-Light: #FEC84B;
    --Brand-Success: #6FA26F;
    --Gray-25: #FCFCFD;
    --Gray-50: #F9FAFB;
    --Gray-100: #F2F4F7;
    --Gray-200: #EAECF0;
    --Gray-300: #D0D5DD;
    --Gray-400: #98A2B3;
    --Gray-500: #667085;
    --Gray-550: #7C7D7D; /* base unselected color */
    --Gray-575: #4B4B4C; /* base unselected hover color */
    --Gray-600: #475467;
    --Gray-700: #344054;
    --Gray-800: #182230;
    --Gray-900: #101828;
    --Gray-950: #0C111D;
    --Box-Shadow-XS: 0px 1px 2px 0px var(--Gray-100);
    --Box-Shadow-SM: 0px 1px 3px 0px var(--Gray-100);
    --Box-Shadow-MD: 0px 4px 8px -2px var(--Gray-100);
    --Box-Shadow-LG: 0px 12px 16px -4px var(--Gray-100);
    --Box-Shadow-XL: 0px 24px 48px -12px var(--Gray-100);
    --Box-Shadow-2XL: 0px 24px 48px -12px var(--Gray-100);
    --Box-Shadow-3XL: 0px 32px 64px -12px var(--Gray-100);
    --Spacing-xs: 4px;
    --Spacing-sm: 6px;
    --Spacing-md: 8px;
    --Spacing-lg: 10px;
    --Spacing-xl: 12px;
    --Spacing-2xl: 14px;
    --Spacing-3xl: 16px;
    --dxbl-menu-item-hover-color: var(--Brand-Primary-Dark) !important;
    --dxbl-menu-item-hover-bg: white !important;
    --dxbl-menu-item-selected-bg: white !important;
    --dxbl-menu-item-selected-color: var(--Brand-Primary-Dark) !important;
    --dxbl-menu-item-selected-hover-bg: white !important;
    --dxbl-menu-item-selected-hover-color: var(--Brand-Primary-Dark) !important;
    --dxbl-menu-top-right-border-radius: 0 !important;
    --dxbl-menu-bottom-right-border-radius: 0 !important;
    --dxbl-menu-top-left-border-radius: 0 !important;
    --dxbl-menu-bottom-left-border-radius: 0 !important;
}

html, body {
    font-family: 'Inter', sans-serif !important;
    font-optical-sizing: auto !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif !important;
    font-optical-sizing: auto !important;
    font-weight: 600 !important;
    font-style: normal !important;
}

main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}


.background-primary {
    background-color: var(--Brand-Primary-Dark);
    height: 18vh;
    width: 100vw;
}

.background-secondary {
    background-color: var(--Gray-200);
    height: 82vh !important;
    width: 100vw;
}

.brand-btn-base {
    --dxbl-btn-line-height: 24px !important;
    --dxbl-btn-padding-x: var(--Spacing-md) !important;
    --dxbl-btn-padding-y: var(--Spacing-sm) !important;
    --dxbl-btn-border-radius: 0 !important;
    --dxbl-btn-box-shadow: none !important;
    width: fit-content !important;
}

.brand-btn-small {
    height: 2rem;
}

/*Label*/
.brand-form-layout-item .dxbl-text {
    --dxbl-text-font-size: 0.8rem !important;
    --dxbl-text-line-height: 10px !important;
}

.brand-form-layout-item {
    --dxbl-row-item-spacing-y: 0.5rem !important;
    /*--dxbl-row-item-spacing-x: 0.5rem !important;*/
}

.brand-btn-base:not(.dxbl-disabled):not(:disabled):focus-visible {
    border-color: unset !important;
    background-color: var(--Brand-Primary-Dark) !important;
    color: #fff !important;
    outline: var(--Brand-Primary-Dark) solid 0.125rem !important;
    outline-offset: unset !important;
    box-shadow: var(--Box-Shadow-SM) !important;
}

.brand-btn-primary {
    --dxbl-btn-bg: var(--Brand-Primary-Light) !important;
    --dxbl-btn-disabled-bg: var(--Gray-100) !important;
    --dxbl-btn-border-color: var(--Brand-Primary-Light) !important;
    --dxbl-btn-disabled-border-color: var(--Gray-200) !important;
    --dxbl-btn-color: #fff !important;
    --dxbl-btn-disabled-opacity: 1 !important;
    --dxbl-btn-box-shadow: var(--Box-Shadow-XS) !important;
    --dxbl-btn-root-bg: #fff !important;
    --dxbl-btn-hover-color: #fff !important;
    --dxbl-btn-hover-bg: var(--Brand-Primary-Dark) !important;
    --dxbl-btn-hover-background: none !important;
    --dxbl-btn-active-color: #fff !important;
    --dxbl-btn-active-bg: transparent !important;
    --dxbl-btn-active-background: none !important;
    --dxbl-btn-disabled-color: var(--Gray-400) !important;
    --dxbl-btn-focus-shadow-color: var(--Gray-100) !important;
    --dxbl-btn-focus-shadow-spread: 0px !important;
    --dxbl-btn-focus-shadow-blur: 2px !important;
    --dxbl-btn-hover-border-color: var(--Gray-700) !important;
    --dxbl-btn-active-border-color: var(--Gray-700) !important;
}

.brand-btn-accent {
    --dxbl-btn-bg: var(--Brand-Accent-Light) !important;
    --dxbl-btn-disabled-bg: var(--Brand-Accent-Light) !important;
    --dxbl-btn-border-color: var(--Brand-Accent-Light) !important;
    --dxbl-btn-disabled-border-color: var(--Brand-Accent-Light) !important;
    --dxbl-btn-color: #fff !important;
    --dxbl-btn-disabled-opacity: 0.7 !important;
    --dxbl-btn-box-shadow: var(--Box-Shadow-XS) !important;
    --dxbl-btn-root-bg: #fff !important;
    --dxbl-btn-hover-color: #fff !important;
    --dxbl-btn-hover-bg: var(--Brand-Accent-Dark) !important;
    --dxbl-btn-hover-background: none !important;
    --dxbl-btn-active-color: #fff !important;
    --dxbl-btn-active-bg: transparent !important;
    --dxbl-btn-active-background: none !important;
    --dxbl-btn-disabled-color: var(--Brand-Accent-Dark) !important;
    --dxbl-btn-focus-shadow-color: var(--Gray-100) !important;
    --dxbl-btn-focus-shadow-spread: 0px !important;
    --dxbl-btn-focus-shadow-blur: 2px !important;
    --dxbl-btn-hover-border-color: var(--Brand-Accent-Light) !important;
    --dxbl-btn-active-border-color: var(--Brand-Accent-Light) !important;
}

.brand-btn-secondary {
    --dxbl-btn-bg: #fff !important;
    --dxbl-btn-disabled-bg: #fff !important;
    --dxbl-btn-border-color: var(--Gray-400) !important;
    --dxbl-btn-disabled-border-color: var(--Gray-200) !important;
    --dxbl-btn-color: var(--Gray-700) !important;
    --dxbl-btn-disabled-opacity: 1 !important;
    --dxbl-btn-box-shadow: var(--Box-Shadow-XS) !important;
    --dxbl-btn-root-bg: #fff !important;
    --dxbl-btn-hover-color: var(--Gray-700) !important;
    --dxbl-btn-hover-bg: var(--Gray-200) !important;
    --dxbl-btn-hover-background: none !important;
    --dxbl-btn-active-color: #fff !important;
    --dxbl-btn-active-bg: transparent !important;
    --dxbl-btn-active-background: none !important;
    --dxbl-btn-disabled-color: var(--Gray-400) !important;
    --dxbl-btn-focus-shadow-color: var(--Gray-100) !important;
    --dxbl-btn-focus-shadow-spread: 0px !important;
    --dxbl-btn-focus-shadow-blur: 2px !important;
    --dxbl-btn-hover-border-color: var(--Gray-400) !important;
    --dxbl-btn-active-border-color: var(--Gray-400) !important;
}

    .brand-btn-secondary:not(.dxbl-disabled):not(:disabled):focus-visible {
        border-color: var(--Gray-600) !important;
        background-color: var(--Gray-400) !important;
        color: var(--Gray-800) !important;
        outline: var(--Gray-500) solid 0rem !important;
        outline-offset: 0px !important;
    }

.brand-btn-tertiary-full {
    --dxbl-btn-bg: #fff !important;
    --dxbl-btn-disabled-bg: var(--Gray-200) !important;
    --dxbl-btn-border-color: #fff !important;
    --dxbl-btn-disabled-border-color: var(--Gray-200) !important;
    --dxbl-btn-color: var(--Gray-700) !important;
    --dxbl-btn-disabled-opacity: 1 !important;
    --dxbl-btn-box-shadow: var(--Box-Shadow-XS) !important;
    --dxbl-btn-root-bg: #fff !important;
    --dxbl-btn-hover-color: var(--Brand-Primary-Dark) !important;
    --dxbl-btn-hover-bg: var(--Gray-400) !important;
    --dxbl-btn-hover-background: none !important;
    --dxbl-btn-active-color: #fff !important;
    --dxbl-btn-active-bg: transparent !important;
    --dxbl-btn-active-background: none !important;
    --dxbl-btn-disabled-color: var(--Gray-400) !important;
    --dxbl-btn-focus-shadow-color: var(--Gray-100) !important;
    --dxbl-btn-focus-shadow-spread: 0px !important;
    --dxbl-btn-focus-shadow-blur: 2px !important;
    --dxbl-btn-hover-border-color: var(--Gray-400) !important;
    --dxbl-btn-active-border-color: var(--Gray-400) !important;
}

.brand-btn-success {
    --Brand-Success-Hover: #5E8F5E;
    --Brand-Success-Active: #507650;
    --Brand-Success-Disabled: #E1F3E8;
    --Brand-Success-Disabled-Border: #BBE2CB;
    --Brand-Success-Disabled-Text: #4D5A4D;
    --dxbl-btn-bg: var(--Brand-Success) !important;
    --dxbl-btn-disabled-bg: var(--Brand-Success-Disabled) !important;
    --dxbl-btn-border-color: var(--Brand-Success) !important;
    --dxbl-btn-disabled-border-color: var(--Brand-Success-Disabled-Border) !important;
    --dxbl-btn-color: #fff !important;
    --dxbl-btn-disabled-opacity: 1 !important;
    --dxbl-btn-box-shadow: var(--Box-Shadow-XS) !important;
    --dxbl-btn-root-bg: #fff !important;
    --dxbl-btn-hover-color: #fff !important;
    --dxbl-btn-hover-bg: var(--Brand-Success-Hover) !important;
    --dxbl-btn-hover-background: none !important;
    --dxbl-btn-active-color: #fff !important;
    --dxbl-btn-active-bg: var(--Brand-Success-Active) !important;
    --dxbl-btn-active-background: none !important;
    --dxbl-btn-disabled-color: var(--Brand-Success-Disabled-Text) !important;
    --dxbl-btn-focus-shadow-color: rgba(111, 162, 111, 0.2) !important;
    --dxbl-btn-focus-shadow-spread: 0px !important;
    --dxbl-btn-focus-shadow-blur: 3px !important;
    --dxbl-btn-hover-border-color: var(--Brand-Success-Hover) !important;
    --dxbl-btn-active-border-color: var(--Brand-Success-Active) !important;
}

.brand-btn-error {
    --Brand-Error-Hover: #D63647;
    --Brand-Error-Active: #C22E3D;
    --Brand-Error-Disabled-bg: #FEE2E3;
    --Brand-Error-Disabled-Border: #FECAD0;
    --Brand-Error-Disabled-Text: #B4182B;
    --dxbl-btn-bg: var(--Brand-Error) !important;
    --dxbl-btn-disabled-bg: var(--Brand-Error-Disabled-bg) !important;
    --dxbl-btn-border-color: var(--Brand-Error) !important;
    --dxbl-btn-disabled-border-color: var(--Brand-Error-Disabled-Border) !important;
    --dxbl-btn-color: #fff !important;
    --dxbl-btn-disabled-opacity: 1 !important;
    --dxbl-btn-box-shadow: var(--Box-Shadow-XS) !important;
    --dxbl-btn-root-bg: #fff !important;
    --dxbl-btn-hover-color: #fff !important;
    --dxbl-btn-hover-bg: var(--Brand-Error-Hover) !important;
    --dxbl-btn-hover-background: none !important;
    --dxbl-btn-active-color: #fff !important;
    --dxbl-btn-active-bg: var(--Brand-Error-Active) !important;
    --dxbl-btn-active-background: none !important;
    --dxbl-btn-disabled-color: var(--Brand-Error-Disabled-Text) !important;
    --dxbl-btn-focus-shadow-color: rgba(232, 63, 81, 0.2) !important;
    --dxbl-btn-focus-shadow-spread: 0px !important;
    --dxbl-btn-focus-shadow-blur: 3px !important;
    --dxbl-btn-hover-border-color: var(--Brand-Error-Hover) !important;
    --dxbl-btn-active-border-color: var(--Brand-Error-Active) !important;
}

.brand-btn-warning {
    --Brand-Warning-Hover: #E58308;
    --Brand-Warning-Active: #D37707;
    --Brand-Warning-Disabled-bg: #FFE8CC;
    --Brand-Warning-Disabled-Border: #FFB877;
    --Brand-Warning-Disabled-Text: #D76A00;
    --dxbl-btn-bg: var(--Brand-Warning-Dark) !important;
    --dxbl-btn-disabled-bg: var(--Brand-Warning-Disabled-bg) !important;
    --dxbl-btn-border-color: var(--Brand-Warning-Dark) !important;
    --dxbl-btn-disabled-border-color: var(--Brand-Warning-Disabled-Border) !important;
    --dxbl-btn-color: #fff !important;
    --dxbl-btn-disabled-opacity: 1 !important;
    --dxbl-btn-box-shadow: var(--Box-Shadow-XS) !important;
    --dxbl-btn-root-bg: #fff !important;
    --dxbl-btn-hover-color: #fff !important;
    --dxbl-btn-hover-bg: var(--Brand-Warning-Hover) !important;
    --dxbl-btn-hover-background: none !important;
    --dxbl-btn-active-color: #fff !important;
    --dxbl-btn-active-bg: var(--Brand-Warning-Active) !important;
    --dxbl-btn-active-background: none !important;
    --dxbl-btn-disabled-color: var(--Brand-Warning-Disabled-Text) !important;
    --dxbl-btn-focus-shadow-color: rgba(247, 144, 9, 0.2) !important;
    --dxbl-btn-focus-shadow-spread: 0px !important;
    --dxbl-btn-focus-shadow-blur: 3px !important;
    --dxbl-btn-hover-border-color: var(--Brand-Warning-Hover) !important;
    --dxbl-btn-active-border-color: var(--Brand-Warning-Active) !important;
}

.brand-btn-tertiary-wire {
    --dxbl-btn-bg: transparent !important;
    --dxbl-btn-disabled-bg: transparent !important;
    --dxbl-btn-border-color: #fff !important;
    --dxbl-btn-disabled-border-color: var(--Brand-Primary-Light) !important;
    --dxbl-btn-color: #fff !important;
    --dxbl-btn-disabled-opacity: 1 !important;
    --dxbl-btn-box-shadow: var(--Box-Shadow-XS) !important;
    --dxbl-btn-root-bg: #fff !important;
    --dxbl-btn-hover-color: var(--Brand-Primary-Dark) !important;
    --dxbl-btn-hover-bg: #fff !important;
    --dxbl-btn-hover-background: none !important;
    --dxbl-btn-active-color: #fff !important;
    --dxbl-btn-active-bg: transparent !important;
    --dxbl-btn-active-background: none !important;
    --dxbl-btn-disabled-color: var(--Brand-Primary-Light) !important;
    --dxbl-btn-focus-shadow-color: var(--Gray-100) !important;
    --dxbl-btn-focus-shadow-spread: 0px !important;
    --dxbl-btn-focus-shadow-blur: 2px !important;
    --dxbl-btn-hover-border-color: #fff !important;
    --dxbl-btn-active-border-color: var(--Gray-400) !important;
}

.brand-menu-left {
    padding-top: 32px;
    padding-left: 8px;
    border-radius: 0 !important;
    background-color: transparent !important;
    --dxbl-menu-bg: var(--Brand-Primary-Dark);
    --dxbl-menu-color: var(--Brand-Primary-Dark);
    --dxbl-menu-separator-width: 1px;
    --dxbl-menu-separator-color: var(--Gray-800);
    --dxbl-menu-separator-style: solid;
    --dxbl-menu-top-left-border-radius: 0 !important;
    --dxbl-menu-top-right-border-radius: 0 !important;
    --dxbl-menu-bottom-left-border-radius: 0 !important;
    --dxbl-menu-bottom-right-border-radius: 0 !important;
    --dxbl-menu-border-width: 0;
    --dxbl-menu-border-color: unset;
    --dxbl-menu-border-style: unset;
    --dxbl-menu-title-font-weight: 500;
    --dxbl-menu-title-font-size: 1.25rem;
    --dxbl-menu-title-line-height: 1;
}

.brand-menu-item-left {
    --dxbl-menu-item-selected-bg: var(--Brand-Accent-Light);
    --dxbl-menu-item-selected-color: #fff;
    --dxbl-menu-item-selected-hover-bg: var(--Brand-Accent-Light);
    --dxbl-menu-item-selected-hover-color: #fff;
    --dxbl-menu-item-disabled-bg: var(--Brand-Accent-Light);
    --dxbl-menu-item-disabled-color: #fff;
    --dxbl-menu-item-disabled-opacity: 0.7;
    --dxbl-menu-item-image-size: 1rem;
}

    .brand-menu-item-left:hover, .brand-menu-item-left > .dxbl-menu-item > .dxbl-btn:hover::before {
        --dxbl-menu-item-hover-color: #fff !important;
        --dxbl-menu-item-hover-bg: var(--Brand-Accent-Light) !important;
        border-right: 8px solid var(--Brand-Primary-Dark);
        background-color: unset !important;
        left: unset !important;
        top: unset !important;
        right: unset !important;
        bottom: unset !important;
    }

li.dxbl-menu-list-item.dxbl-menu-item-pos-start.brand-menu-item-left > dxbl-menu-item > .dxbl-btn {
    padding-right: 6px !important;
}

.dxbl-menu-item-left-selected {
    color: #fff !important;
    border-right: 8px solid var(--Brand-Primary-Dark);
    background: var(--Brand-Accent-Light);
}

.brand-menu-top {
    padding: 0 !important;
    background-color: transparent !important;
    color: #fff !important;
    margin: 0 1rem 0 0;
    --dxbl-menu-bg: transparent !important;
    --dxbl-menu-color: #fff;
    --dxbl-menu-separator-width: 1px;
    --dxbl-menu-separator-color: var(--Gray-800);
    --dxbl-menu-separator-style: solid;
    --dxbl-menu-top-left-border-radius: 0 !important;
    --dxbl-menu-top-right-border-radius: 0 !important;
    --dxbl-menu-bottom-left-border-radius: 0 !important;
    --dxbl-menu-bottom-right-border-radius: 0 !important;
    --dxbl-menu-border-width: 0;
    --dxbl-menu-border-color: unset;
    --dxbl-menu-border-style: unset;
    --dxbl-menu-title-font-weight: 500;
    --dxbl-menu-title-font-size: 1.25rem;
    --dxbl-menu-title-line-height: 1;
}

.brand-menu-item-top {
    --dxbl-menu-item-selected-bg: #fff;
    --dxbl-menu-item-selected-color: var(--Brand-Primary-Dark);
    --dxbl-menu-item-selected-hover-bg: #fff;
    --dxbl-menu-item-selected-hover-color: var(--Brand-Primary-Dark);
    --dxbl-menu-item-disabled-bg: #fff;
    --dxbl-menu-item-disabled-color: var(--Brand-Primary-Dark);
    --dxbl-menu-item-disabled-opacity: 0.7;
    --dxbl-menu-item-image-size: 1rem;
}

    .brand-menu-item-top:hover, .brand-menu-item-top > .dxbl-menu-item > .dxbl-btn:hover::before {
        --dxbl-menu-item-hover-color: var(--Brand-Primary-Dark) !important;
        --dxbl-menu-item-hover-bg: #fff !important;
        background-color: unset !important;
        left: unset !important;
        top: unset !important;
        right: unset !important;
        bottom: unset !important;
    }

dxbl-memo-editor.brand-text-edit {
    height: auto !important;
    --dxbl-text-edit-line-height: 16px !important; /*20px*/
}

.brand-menu-item-top-selected {
    color: var(--Brand-Primary-Dark) !important;
    background: #fff !important;
}

.brand-form-layout-item .brand-text-edit {
    height: 32px !important; /*Works better then line-height otherwise dropdown inputs are bigger*/
}

.brand-form-layout-item .brand-text-edit.dxbl-memo-edit {
    height: auto !important;
}

.brand-form-layout-item .brand-text-edit.dxbl-tag-box {
    height: auto !important;
}

.brand-form-layout-item .dxbl-btn-primary {
    height: 32px !important;
}

.brand-form-layout-item .dxbl-text-edit-template div {
    align-self: center;
}

.brand-text-edit {
    --dxbl-text-edit-font-size: 0.875rem !important;
    --dxbl-text-edit-line-height: 24px !important;
    --dxbl-text-edit-bg: var(--Gray-25) !important;
    --dxbl-text-edit-color: var(--Gray-800) !important;
    --dxbl-text-edit-padding-x: var(--Spacing-md) !important;
    --dxbl-text-edit-padding-y: var(--Spacing-sm) !important;
    --dxbl-text-edit-border-color: var(--Gray-300) !important;
    --dxbl-text-edit-border-style: solid !important;
    --dxbl-text-edit-border-width: 1px !important;
    --dxbl-text-edit-border-radius: 0 !important;
    --dxbl-text-edit-box-shadow: var(--Box-Shadow-SM) !important;
    --dxbl-text-edit-readonly-bg: var(--Gray-100) !important;
    --dxbl-text-edit-readonly-color: var(--Gray-500) !important;
    --dxbl-text-edit-disabled-bg: var(--Gray-100) !important;
    --dxbl-text-edit-disabled-color: var(--Gray-500) !important;
    --dxbl-text-edit-disabled-opacity: 1 !important;
    --dxbl-text-edit-btn-bg: var(--Gray-25) !important;
    --dxbl-text-edit-btn-color: var(--Gray-800) !important;
    --dxbl-text-edit-btn-image-color: unset !important;
    --dxbl-text-edit-btn-hover-bg: unset !important;
    --dxbl-text-edit-btn-hover-color: var(--Gray-800) !important;
    --dxbl-text-edit-btn-hover-image-color: unset !important;
    --dxbl-text-edit-btn-disabled-bg: unset !important;
    --dxbl-text-edit-btn-disabled-color: var(--Gray-800) !important;
    --dxbl-text-edit-btn-disabled-image-color: unset !important;
    --dxbl-text-edit-btn-padding-x: var(--Spacing-md) !important;
    --dxbl-text-edit-btn-padding-y: var(--Spacing-sm) !important;
    --dxbl-text-edit-clear-btn-bg: unset !important;
    --dxbl-text-edit-clear-btn-color: unset !important;
    --dxbl-text-edit-clear-btn-hover-bg: unset !important;
    --dxbl-text-edit-clear-btn-hover-color: unset !important;
    --dxbl-text-edit-validation-valid-color: var(--Brand-Success) !important;
    --dxbl-text-edit-validation-invalid-color: var(--Brand-Error) !important;
    --dxbl-text-edit-validation-status-padding-x: 0.375rem !important;
    --dxbl-text-edit-validation-status-padding-y: 0.25rem !important;
    --dxbl-text-edit-validation-status-spacing: 0.125rem !important;
}

    .brand-text-edit:focus, .brand-text-edit:focus-within {
        --dxbl-text-edit-focus-shadow-color: var(--Gray-300) !important;
        --dxbl-text-edit-focus-shadow-spread: 2px !important;
        --dxbl-text-edit-focus-shadow-blur: 2px !important;
        --dxbl-text-edit-focus-border-color: var(--Gray-300);
    }

.brand-checkbox {
    --dxbl-checkbox-font-family: inherit !important;
    --dxbl-checkbox-font-size: 0.875rem !important;
    --dxbl-checkbox-line-height: 24px !important;
    --dxbl-checkbox-border-width: 1px !important;
    --dxbl-checkbox-border-style: solid !important;
    --dxbl-checkbox-border-color: transparent !important;
    --dxbl-checkbox-spacing: 0.5rem !important;
    --dxbl-checkbox-disabled-opacity: 0.7 !important;
    --dxbl-checkbox-check-element-size: 1.25rem !important;
    --dxbl-checkbox-check-element-checked-color: #fff !important;
    --dxbl-checkbox-check-element-checked-bg: var(--Brand-Primary-Light) !important;
    --dxbl-checkbox-indeterminate-element-disabled-bg: #fff !important;
    --dxbl-checkbox-check-element-disabled-color: #fff !important;
    --dxbl-checkbox-check-element-disabled-bg: unset !important;
    --dxbl-checkbox-check-element-unchecked-bg: #fff !important;
    --dxbl-checkbox-check-element-unchecked-hover-bg: #fff !important;
    --dxbl-checkbox-check-element-unchecked-border-color: unset !important;
    --dxbl-checkbox-check-element-unchecked-hover-border-color: unset !important;
    --dxbl-checkbox-check-element-unchecked-border-width: 2px;
    --dxbl-checkbox-switch-checked-bg: var(--Brand-Primary-Light) !important;
    --dxbl-checkbox-switch-checked-hover-bg: var(--Brand-Primary-Dark) !important;
    --dxbl-checkbox-switch-unchecked-bg: var(--Gray-550) !important;
    --dxbl-checkbox-switch-unchecked-hover-bg: var(--Gray-575) !important;
    --dxbl-checkbox-switch-element-bg: #fff !important;
    --dxbl-checkbox-switch-element-unchecked-bg: #fff !important;
    --dxbl-checkbox-switch-element-disabled-bg: #fff !important;
    --dxbl-checkbox-switch-width: 2.125rem !important;
    --dxbl-checkbox-switch-height: 1rem !important;
    --dxbl-checkbox-radio-bg: #fff !important;
    --dxbl-checkbox-radio-hover-bg: #fff !important;
    --dxbl-checkbox-radio-border-width: 2px !important;
    --dxbl-checkbox-radio-checked-border-color: var(--Brand-Primary-Light) !important;
    --dxbl-checkbox-radio-unchecked-border-color: unset !important;
    --dxbl-checkbox-radio-unchecked-hover-border-color: unset !important;
    --dxbl-checkbox-radio-unchecked-check-bg: #fff !important;
    --dxbl-checkbox-radio-size: 1.25rem !important;
    --dxbl-checkbox-radio-check-bg: var(--Brand-Primary-Light) !important;
    --dxbl-checkbox-radio-check-size: 0.625rem !important;
    --dxbl-checkbox-radio-check-readonly-bg: #fff !important;
    --dxbl-checkbox-radio-readonly-alhpa: 0.6 !important;
    --dxbl-checkbox-validation-valid-color: var(--Brand-Primary-Light) !important;
    --dxbl-checkbox-validation-invalid-color: var(--Brand-Error) !important;
    --dxbl-checkbox-check-element-readonly-bg: #fff !important;
    --dxbl-checkbox-check-element-readonly-border-color: unset !important;
    --dxbl-checkbox-check-element-readonly-border-width: 2px !important;
    --dxbl-checkbox-check-element-checked-hover-bg: var(--Brand-Primary-Dark) !important;
    --dxbl-checkbox-radio-checked-hover-bg: var(--Brand-Primary-Dark) !important;
    --dxbl-checkbox-radio-checked-hover-border-color: var(--Brand-Primary-Dark) !important;
    --dxbl-checkbox-checked-focus-shadow-color: var(--Gray-300) !important;
    --dxbl-checkbox-checked-focus-shadow-spread: 0px !important;
    --dxbl-checkbox-checked-focus-shadow-blur: 2px !important;
    --dxbl-checkbox-unchecked-focus-shadow-color: var(--Gray-300) !important;
    --dxbl-checkbox-unchecked-focus-shadow-spread: 0px !important;
    --dxbl-checkbox-unchecked-focus-shadow-blur: 2px !important;
}

    .brand-checkbox.valid.modified:not([type=checkbox]) {
        --dxbl-checkbox-check-element-checked-bg: var(--Brand-Primary-Light) !important;
        --dxbl-checkbox-check-element-unchecked-border-color: unset !important;
        --dxbl-checkbox-check-element-unchecked-hover-border-color: unset !important;
        --dxbl-checkbox-switch-checked-bg: var(--Brand-Primary-Light) !important;
        --dxbl-checkbox-switch-checked-hover-bg: var(--Brand-Primary-Dark) !important;
        --dxbl-checkbox-switch-unchecked-bg: var(--Gray-550) !important;
        --dxbl-checkbox-switch-unchecked-hover-bg: var(--Gray-575) !important;
        --dxbl-checkbox-radio-unchecked-hover-border-color: unset !important;
        --dxbl-checkbox-radio-unchecked-border-color: unset !important;
        --dxbl-checkbox-checked-focus-shadow-color: var(--Brand-Primary-Light) !important;
        --dxbl-checkbox-checked-focus-shadow-spread: 0px !important;
        --dxbl-checkbox-checked-focus-shadow-blur: 2px !important;
        --dxbl-checkbox-unchecked-focus-shadow-color: var(--Brand-Primary-Light) !important;
        --dxbl-checkbox-unchecked-focus-shadow-spread: 0px !important;
        --dxbl-checkbox-unchecked-focus-shadow-blur: 2px !important;
        --dxbl-checkbox-check-element-checked-hover-bg: var(--Brand-Primary-Light) !important;
        --dxbl-checkbox-switch-checked-hover-bg: var(--Brand-Primary-Light) !important;
        --dxbl-checkbox-radio-checked-hover-bg: var(--Brand-Primary-Light) !important;
        outline: 0 !important;
    }

.dxbl-list-box .dxbl-list-box-highlighted-text, .dxbl-list-box-render-container .dxbl-list-box-highlighted-text {
    --dxbl-list-box-highlighted-text-color: #000 !important;
}

/*Not possible to manipulate css classes of listbox in combobox, so we need to overwrite this class*/
.dxbl-list-box, .dxbl-list-box-render-container {
    --dxbl-list-box-font-family: inherit !important;
    --dxbl-list-box-font-size: 0.875rem !important;
    --dxbl-list-box-line-height: 24px !important;
    --dxbl-list-box-bg: var(--Gray-100) !important;
    --dxbl-list-box-border-width: 1px !important;
    --dxbl-list-box-border-style: solid !important;
    --dxbl-list-box-border-color: var(--Gray-300) !important;
    --dxbl-list-box-border-radius: 0 rem !important;
    --dxbl-list-box-readonly-bg: unset !important;
    --dxbl-list-box-readonly-color: unset !important;
    --dxbl-list-box-disabled-bg: unset !important;
    --dxbl-list-box-disabled-color: unset !important;
    --dxbl-list-box-disabled-opacity: 0.7 !important;
    --dxbl-list-box-item-border-color: transparent !important;
    --dxbl-list-box-item-border-style: solid !important;
    --dxbl-list-box-item-border-width: 1px !important;
    --dxbl-list-box-item-selected-bg: var(--Gray-400) !important;
    --dxbl-list-box-item-multi-selected-bg: unset !important;
    --dxbl-list-box-item-multi-selected-color: inherit !important;
    --dxbl-list-box-item-active-bg: unset !important;
    --dxbl-list-box-item-active-color: inherit !important;
    --dxbl-list-box-item-hover-bg: var(--Gray-700) !important;
    --dxbl-list-box-item-hover-color: #fff !important;
    --dxbl-list-box-item-selected-hover-bg: unset !important;
    --dxbl-list-box-item-selected-hover-color: #fff !important;
    --dxbl-list-box-item-selected-focused-bg-alpha: 20% !important;
    --dxbl-list-box-item-selected-focused-color: unset !important;
    --dxbl-list-box-item-multi-selected-hover-bg: unset !important;
    --dxbl-list-box-item-multi-selected-hover-color: inherit !important;
    --dxbl-list-box-item-disabled-bg: unset !important;
    --dxbl-list-box-item-disabled-color: inherit !important;
    --dxbl-list-box-item-padding-x: 0.375rem !important;
    --dxbl-list-box-item-padding-y: 0.25rem !important;
    --dxbl-list-box-empty-item-padding-x: 1rem !important;
    --dxbl-list-box-empty-item-padding-y: 1rem !important;
    --dxbl-list-box-column-header-bg: unset !important;
    --dxbl-list-box-column-header-color: inherit !important;
    --dxbl-list-box-column-header-font-weight: 600 !important;
    --dxbl-list-box-validation-valid-color: var(--Brand-Success) !important;
    --dxbl-list-box-validation-invalid-color: var(--Brand-Warning) !important;
    --dxbl-list-box-empty-data-icon-width: 48px !important;
    --dxbl-list-box-empty-data-icon-height: 48px !important;
    --dxbl-list-box-empty-data-icon-color: #888888 !important;
    --dxbl-list-box-empty-data-font-weight: 400 !important;
    --dxbl-list-box-empty-data-text-color: #888888 !important;
    --dxbl-list-box-check-element-padding-right: 0.5rem !important;
    --dxbl-list-box-highlighted-text-bg: yellow !important;
    --dxbl-list-box-highlighted-text-color: unset !important;
    --dxbl-list-box-focus-bg: unset !important;
    --dxbl-list-box-focus-color: #fff !important;
    /* --dxbl-list-box-focus-frame-color:#5f368d; */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    font-family: var(--dxbl-list-box-font-family);
    font-size: var(--dxbl-list-box-font-size);
    line-height: var(--dxbl-list-box-line-height);
    background-color: var(--dxbl-list-box-bg);
    border: var(--dxbl-list-box-border-width) var(--dxbl-list-box-border-style) var(--dxbl-list-box-border-color);
    border-radius: var(--dxbl-list-box-border-radius);
    color: var(--dxbl-list-box-color)
}

    .dxbl-list-box-render-container:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly):not(.dxbl-list-box-multi-select)[data-dx-focus-hidden] > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > :not(.dxbl-list-box-empty-data-container) > li:not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]).dxbl-list-box-item-selected:hover::before, .dxbl-list-box:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly):not(.dxbl-list-box-multi-select)[data-dx-focus-hidden] > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > :not(.dxbl-list-box-empty-data-container) > li:not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]).dxbl-list-box-item-selected:hover::before {
        background-color: var(--Gray-700) !important;
    }

.dxbl-checkbox.valid.modified:not([type=checkbox]):not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio).dxbl-checkbox-unchecked .dxbl-checkbox-check-element::before {
    background-color: #fff !important;
    border-color: var(--Brand-Primary-Light) !important;
}

.brand-form-layout-group {
    --dxbl-fl-group-border-radius: 0px !important;
    --dxbl-fl-group-color: #000 !important;
    --dxbl-fl-group-bg: var(--Gray-50) !important;
    --dxbl-fl-group-font-size: 0.875rem !important;
    --dxbl-fl-group-line-height: 24px !important;
    --dxbl-fl-group-spacing-y: 1.5rem;
    --dxbl-fl-group-header-bg: unset;
    --dxbl-fl-group-header-color: inherit;
    --dxbl-fl-group-header-padding-x: 0.75rem;
    --dxbl-fl-group-header-padding-y: 0.3125rem;
    --dxbl-fl-group-header-border-radius: 5px;
    --dxbl-fl-group-header-font-size: 1.14286em;
    --dxbl-fl-group-header-line-height: 1.25;
    --dxbl-fl-group-header-font-weight: 400;
    --dxbl-fl-group-header-image-spacing: 0.5rem;
    --dxbl-fl-group-header-btn-bg: transparent;
    --dxbl-fl-group-header-btn-color: unset;
    --dxbl-fl-group-header-btn-hover-bg: unset;
    --dxbl-fl-group-header-btn-hover-color: unset;
    --dxbl-fl-group-header-spacing: 0.625rem;
    --dxbl-fl-group-content-padding-x: 0.75rem;
    --dxbl-fl-group-content-padding-y: 0.75rem;
}

.dxbl-menu-item {
    --dxbl-menu-item-line-height: 24px !important;
    --dxbl-menu-item-padding-y: 8px !important;
}
 
.dxbl-grid .dxbl-grid-table {
    border-collapse: collapse !important;
}


    .dxbl-grid .dxbl-grid-table > tbody > tr, .dxbl-grid .dxbl-grid-table > tfoot > tr, .dxbl-grid .dxbl-grid-table > thead > tr {
        border: none !important;
        border-bottom: 1px solid var(--Gray-200) !important;
    }

dxbl-grid {
    --dxbl-grid-text-cell-padding-x: 12px !important;
    --dxbl-grid-text-cell-padding-y: 4px !important; /*Before: 8px*/
    --dxbl-grid-header-bg: var(--Gray-200) !important;
    --dxbl-grid-border-radius: 0 !important;
}

.dxbl-pager {
    --dxbl-pager-active-page-btn-bg: var(--Brand-Primary-Light) !important;
}

    .dxbl-pager > .dxbl-btn.dxbl-btn-outline-secondary.dxbl-pager-active-page-btn {
        --dxbl-pager-page-btn-hover-bg: var(--Brand-Primary-Light) !important;
    }

td > dxbl-check {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.flex-report-viewer {
    flex: 1 1;
}

html:not(.dxSafari) .dxbl-list-box-render-container:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly):not(.dxbl-list-box-multi-select)[data-dx-focus-hidden] > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > :not(.dxbl-list-box-empty-data-container) > tbody > tr:not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]).dxbl-list-box-item-selected:hover > td, html:not(.dxSafari) .dxbl-list-box:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly):not(.dxbl-list-box-multi-select)[data-dx-focus-hidden] > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > :not(.dxbl-list-box-empty-data-container) > tbody > tr:not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]).dxbl-list-box-item-selected:hover > td {
    background-color: var(--Gray-700) !important;
}

.dxbl-btn.dxbl-btn-link, .dxbl-btn.dxbl-btn-outline-link, .dxbl-btn.dxbl-btn-text-link {
    --dxbl-btn-hover-color: var(--Brand-Primary-Light) !important;
}

.dxbl-grid {
    --dxbl-grid-focus-frame-color: var(--Brand-Primary-Light) !important;
}

.dxbl-text-edit.dxbl-focused, .dxbl-text-edit:focus-within {
    border-color: var(--Brand-Primary-Light) !important;
}

.dxbl-text-edit {
    --dxbl-text-edit-focus-shadow-color: var(--Gray-300) !important;
}

.dxbl-checkbox {
    --dxbl-checkbox-check-element-checked-bg: var(--Brand-Primary-Light) !important;
    --dxbl-checkbox-check-element-checked-hover-bg: var(--Brand-Primary-Light) !important;
    --dxbl-checkbox-unchecked-focus-shadow-color: var(--Gray-400) !important;
    --dxbl-checkbox-checked-focus-shadow-color: var(--Gray-400) !important;
}

.dxbl-calendar:not(.dxbl-disabled):not(:disabled) .dxbl-calendar-content > table > tbody > tr:not(.dxbl-calendar-days-of-week) td:not(.dxbl-calendar-disabled-item):not(.dxbl-calendar-week-number).dxbl-calendar-selected-range::before {
    background-color: var(--Brand-Primary-Light) !important;
}

.dxbl-calendar {
    --dxbl-calendar-item-selected-bg: var(--Gray-300) !important;
}

    .dxbl-calendar .dxbl-calendar-content .dxbl-calendar-day.dxbl-calendar-today {
        border-color: var(--Brand-Primary-Light) !important;
    }

.dxbl-window {
    --dxbl-window-focus-outline-color: transparent !important;
}

.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-edit-row.dxbl-grid-editor-inplace-container > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell)::before, .dxbl-grid .dxbl-grid-table > tfoot > tr.dxbl-grid-edit-row.dxbl-grid-editor-inplace-container > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell)::before, .dxbl-grid .dxbl-grid-table > thead > tr.dxbl-grid-edit-row.dxbl-grid-editor-inplace-container > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell)::before {
    background-color: var(--Brand-Primary-Light) !important;
}