/*
    MLX Light Theme
*/

/*#region V1 Dark Header */

.mlx-Background-AccentPrimaryDark {
    border: solid 1px var(--bg-brand-strong);
    background: var(--bg-brand-strong);
}

/* rz-dropdown */
.rz-dropdown.rz-shade-darker-v1 {
    border: solid 1px var(--bg-brand-strong);
    background-color: var(--bg-brand-strong);
    color: var(--white);
    max-width: 180px;
}

    .rz-dropdown.rz-shade-darker-v1:not(.rz-state-disabled) .rz-placeholder {
        color: var(--white);
    }

    .rz-dropdown.rz-shade-darker-v1:not(.rz-state-disabled):focus {
        box-shadow: 0 0 0 1px var(--bg-brand-default);
        background-color: var(--bg-brand-strong);
    }

    .rz-dropdown.rz-shade-darker-v1:not(.rz-state-disabled):hover {
        border: solid 1px var(--bg-brand-default);
        border-radius: 8px;
        background-color: var(--bg-brand-default);
    }

    .rz-dropdown.rz-shade-darker-v1 .rz-helper-hidden-accessible {
        width: 0px;
    }

    .rz-dropdown.rz-shade-darker-v1.business-icon .rz-dropdown-label {
        padding-left: 26px;
    }

    .rz-dropdown.rz-shade-darker-v1.business-icon::before {
        font-family: 'Mlx Material Symbols Outlined';
        content: 'business';
        color: var(--icon-inverted-default);
        font-size: 20px;
        line-height: 1.0;
        width: 20px;
        display: block;
        height: 20px;
        position: absolute;
        pointer-events: none;
    }

/* rz-menu */

.rz-menu.rz-shade-darker-v1:not(.rz-profile-menu) {
    background-color: var(--bg-brand-strong);
}

    .rz-menu.rz-shade-darker-v1:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover {
        background-color: var(--bg-brand-default);
        border-radius: 8px;
    }

    .rz-menu.rz-shade-darker-v1:not(.rz-profile-menu) .rz-navigation-item .rz-navigation-item-wrapper .rz-navigation-item-link,
    .rz-menu.rz-shade-darker-v1:not(.rz-profile-menu) .rz-navigation-item .rz-navigation-item-wrapper .rz-navigation-item-link:hover {
        border-radius: 8px;
        color: var(--icon-inverted-weaker);
    }

.rz-menu:not(.rz-shade-darker-v1):not(.rz-profile-menu) .rz-navigation-item .rz-navigation-item-wrapper .rz-navigation-item-link,
.rz-menu:not(.rz-shade-darker-v1):not(.rz-profile-menu) .rz-navigation-item .rz-navigation-item-wrapper .rz-navigation-item-link:hover {
    border-radius: 8px;
    color: var(--text-default);
}

.rz-menu.rz-shade-darker-v1:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover {
    background-color: var(--neutral-neutral-50);
    border-radius: 8px;
}

.rz-menu.rz-shade-darker-v1:not(.rz-profile-menu) .rz-navigation-item .rz-navigation-item-wrapper .rz-navigation-item-link.active {
    background-color: var(--bg-brand-stronger);
}

.rz-menu.rz-shade-darker-v1:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:active,
.rz-menu:not(.rz-shade-darker-v1):not(.rz-profile-menu) .rz-navigation-item .rz-navigation-item-wrapper .rz-navigation-item-link.active {
    background-color: var(--bg-brand-weaker);
    border-radius: 8px;
    color: var(--bg-brand-stronger);
}

.rz-menu.rz-shade-darker-v1:not(.rz-profile-menu) .rz-navigation-item .rz-navigation-item-wrapper .rz-navigation-item-link:focus {
    box-shadow: 0 0 0 2px var(--bg-brand-default);
}

.rz-shade-darker-v1 .rz-navigation-item-icon {
    filter: none !important;
}

.rz-shade-darker-v1 .rz-button .rz-button-text {
    color: var(--bg-brand-stronger);
}

/* logout button */
.rz-menu:not(.rz-shade-darker-v1):not(.rz-profile-menu) .rz-navigation-item.logout_btn .rz-navigation-item-wrapper .rz-navigation-item-link {
    color: var(--bg-brand-default);
    font-weight: 600 !important;
}

/* rz-menu for module selection */
.rz-menu.rz-shade-darker-v1:not(.rz-profile-menu) .rz-navigation-item.modules .rz-navigation-item-wrapper .rz-navigation-item-link {
    background-color: var(--white);
    color: var(--neutral-neutral-800);
}

    .rz-menu.rz-shade-darker-v1:not(.rz-profile-menu) .rz-navigation-item.modules .rz-navigation-item-wrapper .rz-navigation-item-link:hover {
        background-color: var(--neutral-neutral-50);
        color: var(--neutral-neutral-800);
    }

    .rz-menu.rz-shade-darker-v1:not(.rz-profile-menu) .rz-navigation-item.modules .rz-navigation-item-wrapper .rz-navigation-item-link.active {
        background-color: var(--accent-primary-lighter);
        color: var(--neutral-neutral-800);
    }

/* rz-autocomplete */
.rz-shade-darker-v1 .rz-autocomplete {
    border: solid 1px var(--bg-brand-default);
    position: relative;
}

    .rz-shade-darker-v1 .rz-autocomplete .rz-autocomplete-input {
        background-color: var(--bg-brand-default);
        caret-color: var(--accent-primary-light);
    }

        .rz-shade-darker-v1 .rz-autocomplete .rz-autocomplete-input::placeholder {
            color: var(--accent-primary-light) !important;
        }

        .rz-shade-darker-v1 .rz-autocomplete .rz-autocomplete-input:focus-visible {
            border: solid 1px var(--bg-brand-default);
        }

        .rz-shade-darker-v1 .rz-autocomplete .rz-autocomplete-input:focus {
            border: solid 1px var(--white);
            border-radius: 8px;
        }

    .rz-shade-darker-v1 .rz-autocomplete .rz-autocomplete-input {
        color: var(--white) !important;
    }

    .rz-shade-darker-v1 .rz-autocomplete:hover:not(.rz-state-disabled) {
        border: solid 1px var(--bg-brand-default);
    }

    .rz-shade-darker-v1 .rz-autocomplete::before {
        font-family: 'Mlx Material Symbols Outlined';
        content: 'search';
        color: var(--accent-primary-light);
        font-size: 20px;
        line-height: 1.43;
        width: 20px;
        display: block;
        height: 20px;
        position: absolute;
        pointer-events: auto;
        margin: 5px 8px;
    }

.rz-shade-darker-v1 .rz-dropdown-items, .rz-autocomplete-items, .rz-multiselect-items {
    padding: 12px 8px;
}

    .rz-shade-darker-v1 .rz-autocomplete-list-item, .rz-autocomplete-items li {
        margin-bottom: 4px;
        padding: 4px 8px;
    }

        .rz-shade-darker-v1 .rz-state-highlight.rz-autocomplete-list-item:hover, .rz-autocomplete-items li:hover {
            border-radius: 8px;
            color: var(--neutral-neutral-800);
            background-color: var(--neutral-neutral-50);
        }

        .rz-shade-darker-v1 .rz-state-highlight.rz-autocomplete-list-item:active, .rz-autocomplete-items li:active {
            border-radius: 8px;
            color: var(--bg-brand-stronger);
            background-color: var(--bg-brand-weaker);
        }

        .rz-shade-darker-v1 .rz-state-highlight.rz-autocomplete-list-item, .rz-autocomplete-items li.rz-state-highlight {
            box-shadow: 0 0 0 1px var(--bg-brand-stronger);
            border-radius: 8px;
            color: var(--bg-brand-stronger);
            background-color: var(--bg-brand-weaker);
        }

            .rz-shade-darker-v1 .rz-state-highlight.rz-autocomplete-list-item:focus-visible, .rz-autocomplete-items li:focus-visible,
            .rz-state-highlight.rz-autocomplete-list-item:focus, .rz-autocomplete-items li:focus {
                box-shadow: 0 0 0 1px var(--bg-brand-stronger);
                border-radius: 8px;
                color: var(--bg-brand-stronger);
                background-color: var(--bg-brand-weaker);
            }

            .rz-shade-darker-v1 .rz-state-highlight.rz-autocomplete-list-item:disabled, .rz-autocomplete-items li:disabled {
                color: var(--neutral-neutral-500);
            }

/*#endregion V1 Dark Header */

/*#region Common Typogrphy */
.mlx-DisplayDefault {
    font-size: 40px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: -0.8px;
}



.mlx-HeadingsDefaultXL {
    font-size: 32px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.19;
    letter-spacing: -0.64px;
}



.mlx-HeadingsDefaultL {
    font-size: 28px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.29;
    letter-spacing: -0.56px;
}



.mlx-HeadingsDefaultM {
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: -0.48px;
}



.mlx-HeadingsDefaultS {
    font-size: 22px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: -0.4px;
}



.mlx-HeadingsDefaultXS {
    font-size: 18px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.11;
    letter-spacing: -0.36px;
}



.mlx-HeadingsDefaultXXS {
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.13;
    letter-spacing: -0.16px;
}



.mlx-BodyLargeEmphasis {
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: normal;
}



.mlx-BodyLargeItalic {
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: italic;
    line-height: 1.25;
    letter-spacing: normal;
    text-align: left;
}



.mlx-BodyLargeDefault {
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: normal;
}



.mlx-BodyMediumEmphasis {
    font-size: 14px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.29;
    letter-spacing: -0.14px;
}



.mlx-BodyMediumItalic {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: italic;
    line-height: 1.29;
    letter-spacing: normal;
    text-align: left;
}



.mlx-BodyMediumDefault {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.29;
    letter-spacing: normal;
}



.mlx-BodySmallEmphasis {
    font-size: 12px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
}



.mlx-BodySmallItalic {
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: italic;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: left;
}



.mlx-BodySmallDefault {
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
}



.mlx-BodyXSmallEmphasis {
    font-size: 10px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: normal;
}



.mlx-BodyXSmallItalic {
    font-size: 10px;
    font-weight: normal;
    font-stretch: normal;
    font-style: italic;
    line-height: 1.4;
    letter-spacing: normal;
    text-align: left;
}



.mlx-BodyXSmallDefault {
    font-size: 10px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: normal;
}

.mlx-bold {
    font-weight: bold;
}

/*#endregion */

/*#region Common Colors */

/* color variables */

:root {
    --secondary-secondary: #9bc418;
    --secondary-secondary-lighter: #f7faed;
    --secondary-secondary-light: #e4eec4;
    --secondary-secondary-dark: #303e05;
    --neutral-neutral-50: #f1f1f2;
    --neutral-neutral-100: #f2f2f2;
    --neutral-neutral-200: #ececec;
    --neutral-neutral-300: #e3e3e3;
    --white: #fff;
    --neutral-neutral-500: #afafb2;
    --neutral-neutral-400: #c9cacd;
    --neutral-neutral-900: #262526;
    --neutral-neutral-800: #454243;
    --neutral-neutral-700: #626262;
    --neutral-neutral-600: #74777a;
    --accent-primary-darker: #004755;
    --accent-primary-dark: #006174;
    --accent-primary-dark-filter: invert(22%) sepia(61%) saturate(1242%) hue-rotate(154deg) brightness(50%) contrast(101%);
    --accent-primary: #007991;
    --accent-primary-filter: brightness(0) saturate(100%) invert(21%) sepia(80%) saturate(5067%) hue-rotate(177deg) brightness(0%) contrast(102%);
    --accent-primary-light: #d4e9ed;
    --accent-primary-lighter: #e6f2f4;
    --special-info-info-lighter: #eff5ff;
    --special-info-info: #316ecd;
    --special-info-info-light: #d3dff1;
    --special-info-info-dark: #153566;
    --special-warning-warning-lighter: #fff7f3;
    --special-warning-warning-light: #f9e4cd;
    --special-danger-danger-lighter: #fdedec;
    --special-danger-danger: #c42b18;
    --special-danger-danger-light: #eec2bc;
    --special-danger-danger-dark: #6b1910;
    --special-warning-warning-dark: #8f3e13;
    --special-success-success: #048565;
    --special-success-success-dark: #025b33;
    --special-success-success-lighter: #eaf6f3;
    --special-success-success-light: #d2e5e1;
    --special-warning-warning: #ef6820;
    --special-success-intermediate-intermediate-lighter: #fef9ed;
    --special-success-intermediate-intermediate-light: #fbeacb;
    --special-success-intermediate-intermediate: #efaf33;
    --special-success-intermediate-intermediate-dark: #3d2a06;
    --special-intermediate-intermediate-lighter: #fef9ed;
    --special-intermediate-intermediate-light: #fbeacb;
    --special-intermediate-intermediate: #efaf33;
    --special-intermediate-intermediate-dark: #3d2a06;
}

/*color styles*/
.mlx-text {
    --mlx-text-color: inherit;
    color: var(--mlx-text-color);
}

/* Line-Height */
.mlx-text.mlx-line-height-2 {
    line-height: var(--font-line-height-2);
}

.mlx-Color-SecondarySecondary {
    color: var(--secondary-secondary);
}

.mlx-Color-SecondarySecondaryLighter {
    color: var(--secondary-secondary-lighter);
}

.mlx-Color-SecondarySecondaryLight {
    color: var(--secondary-secondary-light);
}

.mlx-Color-SecondarySecondaryDark {
    color: var(--secondary-secondary-dark);
}

.mlx-Color-NeutralNeutral50 {
    color: var(--neutral-neutral-50);
}

.mlx-Color-NeutralNeutral100 {
    color: var(--neutral-neutral-100);
}

.mlx-Color-NeutralNeutral200 {
    color: var(--neutral-neutral-200);
}

.mlx-Color-NeutralNeutral300 {
    color: var(--neutral-neutral-300);
}

.mlx-Color-NeutralNeutral500 {
    color: var(--neutral-neutral-500);
}

.mlx-Color-NeutralNeutral400 {
    color: var(--neutral-neutral-400);
}

.mlx-Color-NeutralNeutral900 {
    color: var(--neutral-neutral-900);
}

.mlx-Color-NeutralNeutral800 {
    color: var(--neutral-neutral-800);
}

.mlx-Color-NeutralNeutral700 {
    color: var(--neutral-neutral-700);
}

.mlx-Color-NeutralNeutral600 {
    color: var(--neutral-neutral-600);
}

.mlx-Color-AccentPrimaryDark {
    color: var(--bg-brand-strong);
}

.mlx-Color-AccentPrimary {
    color: var(--bg-brand-default);
}

.mlx-Color-AccentPrimaryLight {
    color: var(--accent-primary-light);
}

.mlx-Color-AccentPrimaryLighter {
    color: var(--accent-primary-lighter);
}

.mlx-Color-SpecialInfoInfoLighter {
    color: var(--special-info-info-lighter);
}

.mlx-Color-SpecialInfoInfo {
    color: var(--special-info-info);
}

.mlx-Color-SpecialInfoInfoLight {
    color: var(--special-info-info-light);
}

.mlx-Color-SpecialInfoInfoDark {
    color: var(--special-info-info-dark);
}

.mlx-Color-SpecialWarningWarningLighter {
    color: var(--special-warning-warning-lighter);
}

.mlx-Color-SpecialWarningWarningLight {
    color: var(--special-warning-warning-light);
}

.mlx-Color-SpecialDangerDangerLighter {
    color: var(--special-danger-danger-lighter);
}

.mlx-Color-SpecialDangerDanger {
    color: var(--special-danger-danger);
}

.mlx-Color-SpecialDangerDangerLight {
    color: var(--special-danger-danger-light);
}

.mlx-Color-SpecialDangerDangerDark {
    color: var(--special-danger-danger-dark);
}

.mlx-Color-SpecialWarningWarningDark {
    color: var(--special-warning-warning-dark);
}

.mlx-Color-SpecialSuccessSuccess {
    color: var(--special-success-success);
}

.mlx-Color-SpecialSuccessSuccessDark {
    color: var(--special-success-success-dark);
}

.mlx-Color-SpecialSuccessSuccessLighter {
    color: var(--special-success-success-lighter);
}

.mlx-Color-SpecialSuccessSuccessLight {
    color: var(--special-success-success-light);
}

.mlx-Color-SpecialWarningWarning {
    color: var(--special-warning-warning);
}

.mlx-Color-SpecialSuccessIntermediateIntermediateLighter {
    color: var(--special-success-intermediate-intermediate-lighter);
}

.mlx-Color-SpecialSuccessIntermediateIntermediateLight {
    color: var(--special-success-intermediate-intermediate-light);
}

.mlx-Color-SpecialSuccessIntermediateIntermediate {
    color: var(--special-success-intermediate-intermediate);
}

.mlx-Color-SpecialSuccessIntermediateIntermediateDark {
    color: var(--special-success-intermediate-intermediate-dark);
}

.mlx-Color-White {
    color: var(--white);
}

/*background color styles*/

.mlx-BackgroundColor-SpecialSuccessIntermediateIntermediate {
    background-color: var(--special-success-intermediate-intermediate-lighter);
}

.mlx-BackgroundColor-White {
    background-color: var(--white);
}

/*#endregion */
/*#region Common Spacing */
:root {
    --size-10: 1px;
    --size-25: 2px;
    --size-50: 4px;
    --size-100: 8px;
    --size-125: 10px;
    --size-150: 12px;
    --size-175: 14px;
    --size-200: 16px;
    --size-225: 18px;
    --size-250: 20px;
    --size-300: 24px;
    --size-350: 28px;
    --size-400: 32px;
    --size-500: 40px;
    --size-550: 44px;
    --size-600: 48px;
    --size-700: 56px;
    --size-800: 64px;
    --size-900: 80px;
    --xsm: 576px;
    --sm: 768px;
    --md: 1024px;
    --lg: 1280px;
    --xl: 1920px;
    --xxl: 2560px;
}

/* widths */
.mlx-w-auto {
    width: auto !important;
}

.mlx-w-100 {
    width: 100% !important;
}

.mlx-h-100 {
    height: 100% !important;
}

.mlx-min-width-0 {
    min-width: 0;
}
/* margins */

.mlx-m-50 {
    margin: var(--size-50);
}

.mlx-m-100 {
    margin: var(--size-100);
}

.mlx-m-200 {
    margin: var(--size-200);
}

.mlx-mt-100 {
    margin-top: var(--size-100);
}

.mlx-mt-200 {
    margin-top: var(--size-200);
}

.mlx-mt-300 {
    margin-top: var(--size-300);
}

.mlx-mt-350 {
    margin-top: var(--size-350);
}

.mlx-mt-400 {
    margin-top: var(--size-400);
}

.mlx-mb-100 {
    margin-bottom: var(--size-100);
}

.mlx-mb-200 {
    margin-bottom: var(--size-200);
}

.mlx-mb-300 {
    margin-bottom: var(--size-300);
}

.mlx-mb-350 {
    margin-bottom: var(--size-350);
}

.mlx-mb-400 {
    margin-bottom: var(--size-400);
}

.mlx-ml-left-100 {
    margin-left: -8px !important;
}

.mlx-ml-100 {
    margin-left: var(--size-100);
}

.mlx-ml-200 {
    margin-left: var(--size-200);
}

.mlx-ml-300 {
    margin-left: var(--size-300);
}

.mlx-ml-350 {
    margin-left: var(--size-350);
}

.mlx-ml-400 {
    margin-left: var(--size-400);
}

.mlx-mr-100 {
    margin-right: var(--size-100);
}

.mlx-mr-200 {
    margin-right: var(--size-200);
}

.mlx-mr-300 {
    margin-right: var(--size-300);
}

.mlx-mr-350 {
    margin-right: var(--size-350);
}

.mlx-mr-400 {
    margin-right: var(--size-400);
}

/*#endregion */

/*#region Opacity */

.mlx-opacity-0 {
    opacity: 0;
}

.mlx-opacity-10 {
    opacity: 0.10;
}

.mlx-opacity-20 {
    opacity: 0.20;
}

.mlx-opacity-30 {
    opacity: 0.30;
}

.mlx-opacity-40 {
    opacity: 0.40;
}

.mlx-opacity-50 {
    opacity: 0.50;
}

.mlx-opacity-60 {
    opacity: 0.60;
}

.mlx-opacity-70 {
    opacity: 0.70;
}

.mlx-opacity-80 {
    opacity: 0.80;
}

.mlx-opacity-90 {
    opacity: 0.90;
}

.mlx-opacity-100 {
    opacity: 1.0;
}

/*#endregion */

/*#region Container Variants */

.mlx-container-variation-display {
    container-type: inline-size;
    container-name: mlxContainerVariationDisplay;
}

.mlx-container-variation-size {
    container-type: size !important;
}

.mlx-container-variation-minwidth-1280 {
    display: none;
}

.mlx-container-variation-minwidth-1024-maxwidth-1279-98 {
    display: none;
}

.mlx-container-variation-minwidth-1024 {
    display: none;
}

.mlx-container-variation-maxwidth-1023-98 {
    display: none;
}

.mlx-container-variation-maxwidth-768 {
    display: none;
}

.mlx-container-variation-minwidth-768 {
    display: none;
}

.mlx-container-variation-minwidth-481-maxwidth-1023-98 {
    display: none;
}

.mlx-container-variation-maxwidth-480-98 {
    display: none;
}

/* anything after 1280 is visible */
@container mlxContainerVariationDisplay (min-width: 1280px) {
    .mlx-container-variation-minwidth-1280 {
        display: block;
    }
}

/* anything between 1024px and 1279.98 is visible */
@container mlxContainerVariationDisplay (min-width: 1024px) and (max-width: 1279.98px) {
    .mlx-container-variation-minwidth-1024-maxwidth-1279-98 {
        display: block;
    }
}

/* anything after 1024 is visible */
@container mlxContainerVariationDisplay (min-width: 1024px) {
    .mlx-container-variation-minwidth-1024 {
        display: block;
    }
}

/* anything before 1023.98 is visible */
@container mlxContainerVariationDisplay (max-width: 1023.98px) {
    .mlx-container-variation-maxwidth-1023-98 {
        display: block;
    }
}

/* anything before 768 is visible */
@container mlxContainerVariationDisplay (max-width: 768px) {
    .mlx-container-variation-maxwidth-768 {
        display: block;
    }
}

/* anything after 768 is visible */
@container mlxContainerVariationDisplay (min-width: 768px) {
    .mlx-container-variation-minwidth-768 {
        display: block;
    }
}

/* anything between 481px and 1023.98 is visible */
@container mlxContainerVariationDisplay (min-width: 481px) and (max-width: 1023.98px) {
    .mlx-container-variation-minwidth-481-maxwidth-1023-98 {
        display: block;
    }
}

/* anything before 480.98 */
@container mlxContainerVariationDisplay (max-width: 480.98px) {
    .mlx-container-variation-maxwidth-480-98 {
        display: block;
    }
}



/*#endregion */

/*#region Grid-Template Layout */
:root {
    --mlx-layout-row-1: row;
    --mlx-layout-row-2: row 2;
    --mlx-layout-row-3: row 3;
    --mlx-layout-row-4: row 4;
    --mlx-layout-row-1-span-2: row / span 2;
    --mlx-layout-row-2-span-2: row 2 / span 2;
    --mlx-layout-row-1-span-3: row / span 3;
    --mlx-layout-col-1: col;
    --mlx-layout-col-12: col 12;
    --mlx-layout-col-1-span-2: col / span 2;
    --mlx-layout-col-1-span-10: col / span 10;
    --mlx-layout-col-2-span-10: col 2 / span 10;
    --mlx-layout-col-2-span-11: col 2 / span 11;
    --mlx-layout-col-2-span-12: col 2 / span 12;
    --mlx-layout-col-1-span-11: col / span 11;
    --mlx-layout-col-1-span-12: col / span 12;
    --mlx-layout-col-3-span-12: col 3 / span 12;
    --mlx-layout-col-11-span-2: col 11 / span 2;
}


/* Main Layout*/

.rz-layout {
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(11, [col] auto ) [col] min-content;
    grid-template-rows: [row] minmax(min-content, max-content) [row] auto [row] minmax(min-content, max-content);
    background-color: var(--bg-default);
    color: var(--text-default);
    grid-template-areas: initial;
}


.rz-layout .rz-header {
    grid-column: var(--mlx-layout-col-1-span-12);
    grid-row: var(--mlx-layout-row-1);
    min-height: auto;
    padding-left: var(--size-300);
    padding-right: var(--size-300);
    padding-top: var(--size-150);
    padding-bottom: var(--size-150);
    border-bottom: 1px solid var(--border-weak);
}

.rz-layout .rz-header.mlx-layout-header-primary {
    border-bottom: initial;
    padding-left: initial;
    padding-right: initial;
    padding-top: initial;
    padding-bottom: initial;
}

.rz-layout .rz-body {
    grid-column: var(--mlx-layout-col-1-span-12);
    grid-row: var(--mlx-layout-row-2);
    overflow: hidden;
    padding: initial;
}

.rz-layout .mlx-sidebar-mobile {
    width: 256px !important;
    grid-column: var(--mlx-layout-col-1-span-2);
    grid-row: var(--mlx-layout-row-1-span-3);
    z-index: 2;
}

.rz-layout .rz-right-sidebar {
    min-width: 335px !important;
    grid-column: var(--mlx-layout-col-12);
    grid-row: var(--mlx-layout-row-2);
    z-index: 1;
    overflow: hidden;
    padding: initial;
}

.rz-layout .rz-footer {
    grid-column: var(--mlx-layout-col-1-span-12);
    grid-row: var(--mlx-layout-row-3);
}

/* Body Layout*/

.mlx-layout-body {
    height: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(12, [col] auto );
    grid-template-rows: [row] minmax(min-content, max-content) [row] auto;
    background-color: var(--bg-weak);
    color: var(--neutral-neutral-800);
    grid-template-areas: initial;
}

    .mlx-layout-body .mlx-banner {
        width: 100%;
        grid-column: var(--mlx-layout-col-1-span-12);
        grid-row: var(--mlx-layout-row-1);
        z-index: 1;
    }

.mlx-layout-body .mlx-body {
    width: 100%;
    grid-column: var(--mlx-layout-col-1-span-12);
    grid-row: var(--mlx-layout-row-2);
    overflow: auto;
    padding: initial;
}

    .mlx-layout-body .mlx-body:has(.mlx-layout-stickyheader) {
        overflow: hidden;
    }

    .mlx-page-default-stack ~ .mlx-body-page-stack {
        height: auto;
    }

.mlx-page-default-h-100 ~ .mlx-body-page-stack {
    height: 100%;
}

/* Sticky Header Layout*/

.mlx-layout-stickyheader {
    height: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(12, [col] auto );
    grid-template-rows: [row] auto;
    background-color: var(--bg-weak);
    color: var(--neutral-neutral-800);
    grid-template-areas: initial;
    position: relative;
}

.mlx-layout-stickyheader .mlx-stickyheader-body {
    width: 100%;
    grid-column: var(--mlx-layout-col-1-span-12);
    grid-row: var(--mlx-layout-row-1);
    overflow: auto;
    padding: initial;
    z-index: 0;
}

.mlx-layout-stickyheader .mlx-stickyheader-body-banner {
    width: 100vw;
    z-index: 1;
    height: min-content;
    grid-column: var(--mlx-layout-col-1-span-12);
    grid-row: var(--mlx-layout-row-1);
    align-self: start;
    justify-self: start;
}

.mlx-layout-stickyheader .mlx-stickyheader-body-backtotop {
    z-index: 2;
    height: min-content;
    grid-column: var(--mlx-layout-col-1-span-12);
    grid-row: var(--mlx-layout-row-1);
    align-self: center;
    justify-self: end;
}

@keyframes stickyheader-slideDown {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes stickyheader-slideUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-100%);
    }
}
.mlx-layout-stickyheader .mlx-stickyheader-body-banner .mlx-slide-down {
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
    border-bottom: solid 1px var(--border-weak);
    animation: stickyheader-slideDown 0.2s ease-out forwards;
}

.mlx-layout-stickyheader .mlx-stickyheader-body-banner .mlx-slide-up {
    opacity: 0;
    transform: translateY(-100%);
    animation: stickyheader-slideUp 0.2s ease-out forwards;
}

@keyframes backtotop-slideLeft {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes backtotop-slideRight {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}

.mlx-layout-stickyheader .mlx-stickyheader-body-backtotop > :first-child {
    margin-right: -8px;
    display:none;
}

.mlx-layout-stickyheader .mlx-stickyheader-body-backtotop > :first-child.mlx-slide-left {
    animation: backtotop-slideLeft 0.2s ease-out forwards;
}

.mlx-layout-stickyheader .mlx-stickyheader-body-backtotop > :first-child.mlx-slide-right {
    opacity: 0;
    transform: translateY(-100%);
    animation: backtotop-slideRight 0.2s ease-out forwards;
}

/* Master Detail Layout*/
.mlx-master-detail-layout-body {
    height: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: [col] min-content repeat(11, [col] auto );
    grid-template-rows: [row] auto;
    grid-template-areas: initial;
    z-index: 0;
}

.mlx-master-detail-layout-body .mlx-master-body {
    width: 240px;
    grid-column: var(--mlx-layout-col-1);
    grid-row: var(--mlx-layout-row-1);
    z-index: 5;
    overflow: auto;
}

.mlx-master-detail-layout-body .mlx-master-body.mlx-container-xxxsmall-1 {
    width: var(--container-xxxsmall-1);
}

.mlx-master-detail-layout-body .mlx-detail-body {
    grid-column: var(--mlx-layout-col-2-span-11);
    grid-row: var(--mlx-layout-row-1);
    overflow: auto;
    padding: 0px 0px 0px var(--size-300);
}

/* Master Detail Right-Slide-Out Layout*/

.mlx-master-detail-rslideout-layout-body {
    height: 100%;
    overflow: initial;
    display: grid;
    grid-template-columns: [col] min-content repeat(10, [col] auto ) [col] auto;
    grid-template-rows: [row] auto;
    grid-template-areas: initial;
    z-index: 0;
    position: relative;
}

.mlx-master-detail-rslideout-layout-body .mlx-master-body {
    width: 220px;
    grid-column: var(--mlx-layout-col-1);
    grid-row: var(--mlx-layout-row-1);
    z-index: 5;
    overflow: auto;
}

.mlx-master-detail-rslideout-layout-body .mlx-master-body.mlx-master-sm {
    width: var(--container-xxxsmall-4-lg);
}

.mlx-master-detail-rslideout-layout-body .mlx-detail-body {
    grid-column: var(--mlx-layout-col-2-span-11);
    grid-row: var(--mlx-layout-row-1);
    overflow: auto;
    padding: 0px 0px 0px var(--size-300);
}

.mlx-master-detail-rslideout-layout-body .mlx-rslideout-body {
    min-width: 680px !important;
    width: 40vw !important;
    grid-column: var(--mlx-layout-col-12) !important;
    grid-row: var(--mlx-layout-row-1) !important;
    z-index: 5 !important;
    overflow: auto !important;
    height: auto !important;
}

/* Master Detail with Detail Right Slide out*/

.mlx-master-detail-with-detail-rslide-layout-body {
    height: 100%;
    overflow: initial;
    display: grid;
    grid-template-columns: [col] min-content repeat(11, [col] auto );
    grid-template-rows: [row] auto;
    grid-template-areas: initial;
    z-index: 0;
}

.mlx-master-detail-with-detail-rslide-layout-body .mlx-master-layout-body {
    width: 15vw;
    max-width: 220px;
    grid-column: var(--mlx-layout-col-1);
    grid-row: var(--mlx-layout-row-1);
    z-index: 5;
    overflow: initial;
    position: sticky;
    top: 0;
    left: 0;
    align-self: start;
}

.mlx-master-detail-with-detail-rslide-layout-body .mlx-detail-layout-body {
    grid-column: var(--mlx-layout-col-2-span-11);
    grid-row: var(--mlx-layout-row-1);
    overflow: initial;
    padding: 0px 0px 0px var(--size-300);
}

/* Detail Right-Slide-Out With Banner Layout*/

.mlx-detail-rslideout-banner-layout-body {
    height: 100%;
    overflow: initial;
    display: grid;
    grid-template-columns: repeat(12, [col] auto );
    grid-template-rows: [row] minmax(min-content, max-content) [row] auto;
    grid-template-areas: initial;
    z-index: 0;
}

.mlx-detail-rslideout-banner-layout-body .mlx-banner {
    width: 100%;
    grid-column: var(--mlx-layout-col-1-span-12);
    grid-row: var(--mlx-layout-row-1);
}

.mlx-detail-rslideout-banner-layout-body .mlx-detail-banner-body {
    grid-column: var(--mlx-layout-col-1-span-12);
    grid-row: var(--mlx-layout-row-2);
    overflow: initial;
    padding: 0px 0px 0px 0px;
}

.mlx-detail-rslideout-banner-layout-body .mlx-rslideout-banner-body {
    width: 37vw;
    height: 100vh;
    grid-column: var(--mlx-layout-col-12);
    grid-row: var(--mlx-layout-row-2);
    z-index: 5;
    overflow: initial;
    position: sticky;
    top: 0;
    left: 0;
    align-self: start;
}

/*@media (min-width: 576px) {
  
}*/

/*@media (min-width: 768px) {

}*/

@media (min-width: 1280px) {

    .rz-layout .rz-body.body-shared-right {
        grid-column: var(--mlx-layout-col-1-span-11);
    }

    .mlx-master-detail-rslideout-layout-body .mlx-detail-body {
        grid-column: var(--mlx-layout-col-2-span-10);
    }

    .mlx-master-detail-rslideout-layout-body .mlx-detail-body:has(+ .mlx-rslideout-body.collapse) {
        grid-column: var(--mlx-layout-col-2-span-11);
    }

    .mlx-detail-rslideout-banner-layout-body .mlx-detail-banner-body:has(+ .mlx-rslideout-banner-body.show) {
        grid-column: var(--mlx-layout-col-1-span-11);
    }

   
}

@media (max-width: 1280px) {

    .mlx-rslideout-body {
        box-shadow: 0px 0 16px 0 rgba(0, 0, 0, .16);
    }
}

/*@media (max-width: 1024px) {

    .mlx-detail-rslideout-banner-layout-body .mlx-rslideout-banner-body {
        display: none;
    }
}*/

/*#endregion*/

/*#region Cursor Styling*/

.mlx-cursor-default {
    cursor: default;
}

.mlx-cursor-pointer {
    cursor: pointer;
}

.mlx-cursor-text {
    cursor: text;
}

/*#endregion */

/*#region Badge Styling*/

.mlx-badge.mlx-badge-small {
    min-width: 18px;
    min-height: 18px;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    padding: 1px 0px 0px 0px
}

.mlx-badge.mlx-badge-bullet {
    height: var(--size-150);
    padding: 4px 6px;
}

.mlx-badge.mlx-variant-outlined.mlx-badge-bullet {
    padding: 4px 5px;
}

.mlx-badge.mlx-badge-bullettall {
    height: 26px;
    padding: 4px 6px;
}

.mlx-badge.mlx-variant-outlined.mlx-badge-bullettall {
    padding: 4px 5px;
}

/* Info */

.mlx-badge.mlx-badge-style-info.mlx-variant-outlined.mlx-shade-lighter {
    border: solid 1px var(--special-info-info-light);
    box-shadow: initial;
    background-color: var(--special-info-info-lighter);
    color: var(--special-info-info-dark);
}

.mlx-badge.mlx-badge-style-info.mlx-variant-filled.mlx-shade-light {
    border: initial;
    background-color: var(--special-info-info-light);
    color: var(--special-info-info-dark);
}

.mlx-badge.mlx-badge-style-info.mlx-variant-filled.mlx-shade-default {
    border: initial;
    background-color: var(--special-info-info);
    color: var(--special-info-info-lighter);
}

.mlx-badge.mlx-badge-style-info.mlx-variant-filled.mlx-shade-dark {
    border: initial;
    background-color: var(--special-info-info-dark);
    color: var(--white);
}

/* Neutral */

.mlx-badge.mlx-badge-style-neutral.mlx-variant-outlined.mlx-shade-lightest {
    border: solid 1px var(--neutral-neutral-300);
    background-color: var(--white);
    box-shadow: initial;
    color: var(--neutral-neutral-800);
}

.mlx-badge.mlx-badge-style-neutral.mlx-variant-outlined.mlx-shade-lighter {
    border: solid 1px var(--neutral-neutral-300);
    background-color: var(--neutral-neutral-100);
    box-shadow: initial;
    color: var(--neutral-neutral-800);
}

.mlx-badge.mlx-badge-style-neutral.mlx-variant-filled.mlx-shade-light {
    border: initial;
    background-color: var(--neutral-neutral-300);
    color: var(--neutral-neutral-800);
}

.mlx-badge.mlx-badge-style-neutral.mlx-variant-filled.mlx-shade-default {
    border: initial;
    background-color: var(--neutral-neutral-700);
    color: var(--neutral-neutral-50);
}

.mlx-badge.mlx-badge-style-neutral.mlx-variant-filled.mlx-shade-dark {
    border: initial;
    background-color: var(--neutral-neutral-900);
    color: var(--white);
}

/* Success */

.mlx-badge.mlx-badge-style-success.mlx-variant-outlined.mlx-shade-lighter {
    border: solid 1px var(--special-success-success-light);
    box-shadow: initial;
    background-color: var(--special-success-success-lighter);
    color: var(--special-success-success-dark);
}

.mlx-badge.mlx-badge-style-success.mlx-variant-filled.mlx-shade-light {
    border: initial;
    background-color: var(--special-success-success-light);
    color: var(--special-success-success-dark);
}

.mlx-badge.mlx-badge-style-success.mlx-variant-filled.mlx-shade-default {
    border: initial;
    background-color: var(--special-success-success);
    color: var(--white);
}

.mlx-badge.mlx-badge-style-success.mlx-variant-filled.mlx-shade-dark {
    border: initial;
    background-color: var(--special-success-success-dark);
    color: var(--special-success-success-lighter);
}

/* Warning */

.mlx-badge.mlx-badge-style-warning.mlx-variant-outlined.mlx-shade-lighter {
    border: solid 1px var(--special-warning-warning-light);
    box-shadow: initial;
    background-color: var(--special-warning-warning-lighter);
    color: var(--special-warning-warning-dark);
}

.mlx-badge.mlx-badge-style-warning.mlx-variant-filled.mlx-shade-light {
    border: initial;
    background-color: var(--special-warning-warning-light);
    color: var(--special-warning-warning-dark);
}

.mlx-badge.mlx-badge-style-warning.mlx-variant-filled.mlx-shade-default {
    border: initial;
    background-color: var(--special-warning-warning);
    color: var(--white);
}

.mlx-badge.mlx-badge-style-warning.mlx-variant-filled.mlx-shade-dark {
    border: initial;
    background-color: var(--special-warning-warning-dark);
    color: var(--white);
}

/* Danger */

.mlx-badge.mlx-badge-style-danger.mlx-variant-outlined.mlx-shade-lighter {
    border: solid 1px var(--special-danger-danger-light);
    box-shadow: initial;
    background-color: var(--special-danger-danger-lighter);
    color: var(--special-danger-danger-dark);
}

.mlx-badge.mlx-badge-style-danger.mlx-variant-filled.mlx-shade-light {
    border: initial;
    background-color: var(--special-danger-danger-light);
    color: var(--special-danger-danger-dark);
}

.mlx-badge.mlx-badge-style-danger.mlx-variant-filled.mlx-shade-default {
    border: initial;
    background-color: var(--special-danger-danger);
    color: var(--special-danger-danger-lighter);
}

.mlx-badge.mlx-badge-style-danger.mlx-variant-filled.mlx-shade-dark {
    border: initial;
    background-color: var(--special-danger-danger-dark);
    color: var(--white);
}

/* Primary */

.mlx-badge.mlx-badge-style-primary.mlx-variant-outlined.mlx-shade-lighter {
    border: solid 1px var(--accent-primary-light);
    box-shadow: initial;
    background-color: var(--accent-primary-lighter);
    color: var(--bg-brand-strong);
}

.mlx-badge.mlx-badge-style-primary.mlx-variant-filled.mlx-shade-light {
    border: initial;
    background-color: var(--accent-primary-light);
    color: var(--bg-brand-strong);
}

.mlx-badge.mlx-badge-style-primary.mlx-variant-filled.mlx-shade-default {
    border: initial;
    background-color: var(--bg-brand-default);
    color: var(--accent-primary-lighter);
}

.mlx-badge.mlx-badge-style-primary.mlx-variant-filled.mlx-shade-dark {
    border: initial;
    background-color: var(--bg-brand-strong);
    color: var(--white);
}

/* Secondary */

.mlx-badge.mlx-badge-style-secondary.mlx-variant-outlined.mlx-shade-lighter {
    box-shadow: initial;
    border: solid 1px var(--secondary-secondary-light);
    background-color: var(--secondary-secondary-lighter);
    color: var(--secondary-secondary-dark);
}

.mlx-badge.mlx-badge-style-secondary.mlx-variant-filled.mlx-shade-light {
    border: initial;
    background-color: var(--secondary-secondary-light);
    color: var(--secondary-secondary-dark);
}

.mlx-badge.mlx-badge-style-secondary.mlx-variant-filled.mlx-shade-default {
    border: initial;
    background-color: var(--secondary-secondary);
    color: var(--secondary-secondary-dark);
}

.mlx-badge.mlx-badge-style-secondary.mlx-variant-filled.mlx-shade-dark {
    border: initial;
    background-color: var(--secondary-secondary-dark);
    color: var(--white);
}

/* Intermediate */

.mlx-badge.mlx-badge-style-intermediate.mlx-variant-outlined.mlx-shade-lighter {
    box-shadow: initial;
    border: solid 1px var(--special-intermediate-intermediate-light);
    background-color: var(--special-intermediate-intermediate-lighter);
    color: var(--special-intermediate-intermediate-dark);
}

.mlx-badge.mlx-badge-style-intermediate.mlx-variant-outlined.mlx-shade-light {
    border: solid 1px var(--special-intermediate-intermediate-lighter);
    background-color: var(--special-intermediate-intermediate-light);
    color: var(--special-intermediate-intermediate-dark);
}

.mlx-badge.mlx-badge-style-intermediate.mlx-variant-filled.mlx-shade-default {
    border: initial;
    background-color: var(--special-intermediate-intermediate);
    color: var(--special-intermediate-intermediate-dark);
}

.mlx-badge.mlx-badge-style-intermediate.mlx-variant-filled.mlx-shade-dark {
    border: initial;
    background-color: var(--special-intermediate-intermediate-dark);
    color: var(--white);
}

.mlx-badge-ellipse {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}


/* Pill Default */
.mlx-badge-pill-primary {
    border: solid 1px var(--special-success-success-light);
    background-color: var(--special-success-success-light);
    color: var(--special-success-success-dark);
}

.mlx-badge-pill-success {
    border: solid 1px var(--special-success-success-light);
    background-color: var(--special-success-success-lighter);
    color: var(--special-success-success-dark);
}

.mlx-badge-pill-secondary {
    border: solid 1px var(--neutral-neutral-300);
    background-color: var(--neutral-neutral-100);
    color: var(--neutral-neutral-800);
}

.mlx-badge-pill-warning {
    border: solid 1px var(--special-success-intermediate-intermediate-light);
    background-color: var(--special-warning-warning-light);
    color: var(--special-warning-warning-dark);
}

.mlx-badge-pill-light {
    border: solid 1px var(--special-warning-warning-light);
    background-color: var(--special-warning-warning-lighter);
    color: var(--special-warning-warning-dark);
}

.mlx-badge-pill-danger {
    border: solid 1px var(--special-danger-danger-light);
    background-color: var(--special-danger-danger-light);
    color: var(--special-danger-danger-dark);
}

.mlx-badge-pill-info {
    border: solid 1px var(--special-danger-danger-light);
    background-color: var(--special-danger-danger-lighter);
    color: var(--special-danger-danger-dark);
}

.rz-badge.mlx-badge-profile {
    color: #ffffff;
    display: inline-block;
    border-radius: 50%;
    padding: 3px 8px;
    text-align: center;
    text-transform: none;
    white-space: nowrap;
    height: fit-content;
    width: fit-content;
}

.mlx-badge-profile.rz-badge-primary.rz-variant-filled.rz-shade-default {
    border: initial;
    background-color: var(--secondary-secondary-lighter);
    color: var(--secondary-secondary-dark);
}

/* Badge Bullet default */
.rz-badge.mlx-badge-bullet {
    height: var(--size-150);
    padding: 4px 6px;
}

.rz-badge.rz-variant-outlined.mlx-badge-bullet {
    padding: 4px 5px;
}

.rz-badge.mlx-badge-bullet-tall-sm {
    height: 10px;
    width: 4px;
    padding: 1px 2px;
    border-radius: 2px;
}

.rz-badge.mlx-badge-bullet-tall {
    height: 26px;
    padding: 4px 4px;
}

.rz-badge.rz-variant-outlined.mlx-badge-bullet-tall {
    padding: 4px 5px;
}

.rz-badge.mlx-badge-icon-sm {
    min-width: 18px;
    min-height: 18px;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    padding: 1px 0px 0px 0px
}

.rz-badge.mlx-badge-small {
    border-radius: 7px;
    padding: 2px 6px;
}

/*#endregion */

/*#region NavBar Styling*/

.navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.2rem;
}

/*#endregion */

/*#region SelectButton*/

.mlx-selectbutton {
    max-width: initial !important;
}

    .mlx-selectbutton .rz-button {
        width: 100% !important;
    }

.rz-button.mlx-button-icon-size-sm .rz-button-icon-left.rzi {
    width: var(--size-200);
    height: var(--size-200);
    margin: initial;
}

.rz-button.rz-info.mlx-button-justify-left.rz-shade-default:not(.rz-state-disabled):hover:not(:active) {
    text-decoration: initial;
}

.rz-button.mlx-button-justify-left {
    display: flex;
    justify-content: left;
}

    .rz-button.mlx-button-justify-left .rz-button-box {
        display: flex;
        justify-content: left;
    }

/*#endregion*/

/*#region Switch : Small Version not supported by Radzen - use mlx-switch-small */

.rz-switch.mlx-switch-small {
    height: var(--size-200);
    width: var(--size-350);
    min-width: var(--size-350);
}

    .rz-switch.mlx-switch-small .rz-switch-circle:before {
        background: var(--white);
        width: 11px;
        height: 11px;
        left: 2px;
        margin-top: -5px;
        border-radius: 50%;
        transition-duration: 0.2s;
        box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04);
    }

.rz-switch.rz-switch-checked.mlx-switch-small .rz-switch-circle:before {
    transform: translateX(13px);
}

.rz-switch.mlx-switch-small .rz-switch-circle.rz-disabled:before {
    background: var(--icon-disabled);
}

/*#endregion*/


/*#region text button */

.mlx-text-button {
    letter-spacing: 0;
    background: none;
    padding: 0;
    border: none;
    text-align: left;
}

/*#endregion  */

/*#region Sidebar */

.mlx-sidebar-mobile {
    position: absolute !important;
    width: 280px !important;
    top: 0px !important;
    z-index: 3 !important;
    transition: initial !important;
    bottom: 0px !important;
}

.mlx-sidebar-desktop-none {
    position: static !important;
    width: 0px !important;
    top: 0px !important;
    z-index: 2 !important;
    transition: initial !important;
    padding: 0px !important;
}

.mlx-sidebar-desktop-large {
    position: static !important;
    width: 280px !important;
    top: 0px !important;
    z-index: 2 !important;
    transition: initial !important;
}

.mlx-sidebar-desktop-small {
    position: static !important;
    width: 72px !important;
    top: 0px !important;
    z-index: 2 !important;
    transition: initial !important;
}

/*#endregion  */

/*#region Calendar */

.calendar-container .rz-grid-table td, .calendar-container .rz-grid-table th {
    padding: 4px 4px;
}

.mlx-calendar {
}

.mlx-calendar-alert {
    padding: initial !important;
}

.mlx-calendar-row {
}

.mlx-calendar-item {
    padding: 4px 4px !important;
}

mlx-calendar.rz-datatable {
    position: relative;
    box-shadow: none;
    border: solid 1px var(--neutral-neutral-300);
    border-radius: 8px;
    background-color: var(--white);
}

.mlx-calendar .rz-grid-table thead th {
    border-right: solid 1px var(--neutral-neutral-300);
    background: var(--neutral-neutral-200);
    text-align: center;
    padding: var(--size-50) var(--size-50);
    height: initial;
    border-bottom: 1px solid var(--neutral-neutral-300);
}

.mlx-calendar .rz-grid-table td:not(:last-child), .rz-grid-table td.rz-composite-cell {
    border-right: 1px solid var(--neutral-neutral-300);
}

/*#endregion */
/*#region custom TIF chart popup styling*/
.tif-chart-popup-button-selected {
    background-color: var(--accent-primary-light) !important;
    color: var(--bg-brand-strong) !important;
}

.tif-chart-popup-button-single-visit,
.tif-chart-popup-button-neutral {
    height: 26px;
    flex-grow: 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 0.9;
    letter-spacing: normal;
    border: none;
    width: 100%;
}

.tif-chart-popup-btn-single-visit {
    height: 26px;
    flex-grow: 0;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    border: none;
    width: 100%;
}

    .tif-chart-popup-button-neutral {
        background-color: var(--neutral-neutral-50);
        color: var(--neutral-neutral-700);
    }

    .tif-chart-popup-button-neutral:hover {
        background-color: var(--neutral-neutral-200);
    }

    .tif-chart-popup-button-neutral:active {
        background-image: none !important;
        background-size: unset !important;
    }

.tif-chart-popup-button-selected:active {
    background-image: none !important;
    background-size: unset !important;
}

.tif-chart-popup-button-single-visit {
    background-color: var(--white);
    color: var(--neutral-neutral-700);
    padding: 0px;
    pointer-events: none;
}

.tif-chart-popup-btn-single-visit {
    color: var(--white);
    padding: 0px;
    width: 148px;
    height: 20px;
    align-self: stretch;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border-radius: 4px;
    background-color: var(--neutral-neutral-700);
    pointer-events: auto;
}


.tif-chart-popup-close-button {
    background: transparent;
    border: none;
    font-size: 21px;
    align-self: baseline;
    display: flex;
    margin-top: -5px;
}

.tooltip-close-icon {
    height: 16px;
    width: 16px;
}

    .tooltip-close-icon:hover {
    object-fit: contain;
    border-radius: 20px;
    background-color: var(--neutral-neutral-200);
}

.tooltip-close-btn-icon:hover {
    object-fit: contain;
    border-radius: 20px;
    background-color: var(--neutral-neutral-700);
    color: var(--neutral-neutral-900);
}

.tif-chart-popup-button-text-visit-type {
    font-weight: 500;
}

.tif-chart-popup-button-text-visit-date {
    font-weight: normal;
}

.highcharts-tooltip {
    pointer-events: auto !important;
}

.highcharts-point.tif-marker-roc.highcharts-point-select {
    filter: drop-shadow(0px 0px 2px var(--bg-brand-default)) drop-shadow(0px 0px 1px var(--bg-brand-default)) drop-shadow(0px 0px 1px var(--bg-brand-default));
    cursor: pointer;
}

.highcharts-point.tif-marker-roc.highcharts-point-hover {
    filter: drop-shadow(0px 0px 3px var(--bg-brand-default)) drop-shadow(0px 0px 2px var(--bg-brand-default)) drop-shadow(0px 0px 1px var(--bg-brand-default));
    cursor: pointer;
}

.highcharts-point.tif-marker-multiplevisits.highcharts-point-select {
    filter: drop-shadow(0px 0px 2px var(--bg-brand-default)) drop-shadow(0px 0px 1px var(--bg-brand-default)) drop-shadow(0px 0px 1px var(--bg-brand-default));
    cursor: pointer;
}

.highcharts-point.tif-marker-multiplevisits.highcharts-point-hover {
    filter: drop-shadow(0px 0px 3px var(--bg-brand-default)) drop-shadow(0px 0px 2px var(--bg-brand-default)) drop-shadow(0px 0px 1px var(--bg-brand-default));
    cursor: pointer;
}


.highcharts-point.tif-marker-skilled.highcharts-point-select {
    filter: drop-shadow(0px 0px 2px var(--bg-brand-default)) drop-shadow(0px 0px 1px var(--bg-brand-default)) drop-shadow(0px 0px 1px var(--bg-brand-default));
    cursor: pointer;
}

.highcharts-point.tif-marker-skilled.highcharts-point-hover {
    filter: drop-shadow(0px 0px 3px var(--bg-brand-default)) drop-shadow(0px 0px 2px var(--bg-brand-default)) drop-shadow(0px 0px 1px var(--bg-brand-default));
    cursor: pointer;
}

.highcharts-point.tif-marker-therapy.highcharts-point-select {
    filter: drop-shadow(0px 0px 2px var(--bg-brand-default)) drop-shadow(0px 0px 1px var(--bg-brand-default)) drop-shadow(0px 0px 1px var(--bg-brand-default));
    cursor: pointer;
}

.highcharts-point.tif-marker-therapy.highcharts-point-hover {
    filter: drop-shadow(0px 0px 3px var(--bg-brand-default)) drop-shadow(0px 0px 2px var(--bg-brand-default)) drop-shadow(0px 0px 1px var(--bg-brand-default));
    cursor: pointer;
}

.highcharts-legend-item.highcharts-line-series.tif-marker-skilled .highcharts-point {
    transform: translate(-8px, -8px);
    width: 16px;
    height: 16px;
}

.highcharts-legend-item.highcharts-line-series.tif-marker-therapy .highcharts-point {
    transform: translate(-8px, -8px);
    width: 16px;
    height: 16px;
}

.highcharts-legend-item.highcharts-line-series.tif-marker-roc .highcharts-point {
    transform: translate(-8px, -8px);
    width: 16px;
    height: 16px;
}

.highcharts-legend-item.highcharts-line-series.tif-marker-multiplevisits .highcharts-point {
    transform: translate(-8px, -8px);
    width: 16px;
    height: 16px;
}

.highcharts-legend-item.highcharts-line-series.tif-marker-skilled .highcharts-graph {
    transform: scale(1.2, 1.0) translate(-1px, 0px);
}

.highcharts-legend-item.highcharts-line-series.tif-marker-therapy .highcharts-graph {
    transform: scale(1.2, 1.0) translate(-1px, 0px);
}

.highcharts-legend-item.highcharts-line-series.tif-marker-roc .highcharts-graph {
    transform: scale(1.2, 1.0) translate(-1px, 0px);
}

.highcharts-legend-item.highcharts-line-series.tif-marker-multiplevisits .highcharts-graph {
    transform: scale(1.2, 1.0) translate(-1px, 0px);
}

.highcharts-legend-item.highcharts-line-series.tif-plotline-tif .highcharts-point {
    transform: translate(-8px, -8px);
    width: 16px;
    height: 16px;
}

.highcharts-legend-item.highcharts-line-series.tif-plotline-today .highcharts-point {
    transform: translate(-8px, -8px);
    width: 16px;
    height: 16px;
}

.highcharts-legend-item.highcharts-line-series.tif-plotline-periodstart .highcharts-point {
    transform: translate(-8px, -8px);
    width: 16px;
    height: 16px;
}

.highcharts-plot-band.tif-roc-x-band {
    fill: rgba(238, 194, 188, 0.5);
}

/*#endregion */

/*#region ProgressBar */

.rz-progressbar.rz-progressbar-indeterminate.rz-progressbar-primary.mlx-progressbar {
    margin-top: initial;
    margin-bottom: initial;
    min-width: 180px;
    max-width: 320px;
    height: 0.5rem;
}

/*#endregion*/

/*#region Table */

.mlx-frozen-cell-1 {
    position: sticky;
    z-index: 1;
}

.mlx-frozen-cell-2 {
    position: sticky;
    z-index: 2;
}

.mlx-frozen-cell-divider {
    box-shadow: inset -1px 0 0 var(--border-weak); 
}

.mlx-frozen-cell-shadow-divider {
    background: linear-gradient(to right, white calc(100% - 4px), transparent 100%);
    padding-right: 8px !important;
}

.mlx-frozen-cell-shadow-divider::after {
    content: "";
    position: absolute;
    right: 0px;
    top: 0;
    bottom: -1px;
    width: 4px;
    border-left: var(--border-weak);
    background: linear-gradient(to right, var(--border-weak) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, var(--shadow-opacity)) 0%, rgba(0, 0, 0, 0) 100%);
}

/*#endregion*/

/*#region Context Menu */

/* Context Menu Primary*/

.rz-context-menu .rz-menu:not(.rz-profile-menu).mlx-contextmenu-primary {
    border-radius: 8px;
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
    border: solid 1px var(--neutral-neutral-300);
    background-color: var(--white);
    padding: 8px;
}

    .rz-context-menu .rz-menu:not(.rz-profile-menu).mlx-contextmenu-primary .rz-navigation-item-wrapper {
        background-color: var(--white);
    }


        .rz-context-menu .rz-menu:not(.rz-profile-menu).mlx-contextmenu-primary .rz-navigation-item-wrapper .rz-navigation-item-link {
            color: var(--bg-brand-default);
        }

    .rz-context-menu .rz-menu:not(.rz-profile-menu).mlx-contextmenu-primary .rz-navigation-item.mlx-Color-SpecialDangerDanger .rz-navigation-item-wrapper .rz-navigation-item-link {
        color: var(--special-danger-danger);
    }

    .rz-context-menu .rz-menu:not(.rz-profile-menu).mlx-contextmenu-primary .rz-navigation-item-wrapper:hover {
        background-color: var(--neutral-neutral-100);
        border-radius: 4px;
        cursor: pointer;
    }

        .rz-context-menu .rz-menu:not(.rz-profile-menu).mlx-contextmenu-primary .rz-navigation-item-wrapper:hover .rz-navigation-item-link {
            color: var(--neutral-neutral-900);
        }

    .rz-context-menu .rz-menu:not(.rz-profile-menu).mlx-contextmenu-primary .rz-navigation-item-link {
        cursor: inherit;
    }

/* Context Menu Secondary*/

.rz-context-menu .rz-menu:not(.rz-profile-menu).mlx-contextmenu-secondary {
    border-radius: 8px;
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
    border: solid 1px var(--neutral-neutral-300);
    background-color: var(--white);
    padding: 4px;
}

    .rz-context-menu .rz-menu:not(.rz-profile-menu).mlx-contextmenu-secondary .rz-navigation-item-wrapper {
        background-color: var(--white);
    }

        .rz-context-menu .rz-menu:not(.rz-profile-menu).mlx-contextmenu-secondary .rz-navigation-item-wrapper .rz-navigation-item-link {
            color: var(--neutral-neutral-900);
        }

        .rz-context-menu .rz-menu:not(.rz-profile-menu).mlx-contextmenu-secondary .rz-navigation-item-wrapper:hover {
            background-color: var(--neutral-neutral-100);
            border-radius: 4px;
            cursor: pointer;
        }

            .rz-context-menu .rz-menu:not(.rz-profile-menu).mlx-contextmenu-secondary .rz-navigation-item-wrapper:hover .rz-navigation-item-link {
                color: var(--neutral-neutral-900);
            }

    .rz-context-menu .rz-menu:not(.rz-profile-menu).mlx-contextmenu-secondary .rz-navigation-item-link {
        cursor: inherit;
    }

.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover {
    background-color: var(--neutral-neutral-50);
    border-radius: 4px;
}

.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover {
    background-color: var(--neutral-neutral-50);
    border-radius: 8px;
}

.rz-menu:not(.rz-profile-menu) .rz-navigation-item.mlx-menuitem-sm .rz-navigation-item-wrapper:hover {
    border-radius: var(--corner-base);
}

.rz-menu:not(.rz-profile-menu) .rz-navigation-item-link {
    font-size: 14px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.29;
    letter-spacing: normal;
    text-align: left;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: flex-end;
    padding: 1px 4px;
    color: var(--neutral-neutral-800);
    white-space: nowrap;
}

.rz-menu:not(.rz-profile-menu) .rz-navigation-item .rz-navigation-item-wrapper .rz-navigation-item-link {
    padding: var(--spacing-xsmall-medium) var(--spacing-xsmall-medium);
    border-radius: var(--size-50);
    color: var(--neutral-neutral-800);
    cursor: pointer;
}

.rz-menu:not(.rz-profile-menu) .rz-navigation-item.mlx-menuitem-sm .rz-navigation-item-wrapper .rz-navigation-item-link {
    padding: var(--spacing-xsmall) var(--spacing-xsmall);
    border-radius: var(--corner-base);
}

.rz-menu:not(.rz-profile-menu) .rz-navigation-item .rz-navigation-item-wrapper:hover .rz-navigation-item-link {
    color: var(--neutral-neutral-800);
}

.profile-drop-down-container .rz-navigation-item-link {
    font-weight: normal !important;
}

.rz-navigation-item-text {
    padding-left: 5px;
}

.rz-navigation-item.mlx-menuitem-sm .rz-navigation-item-text {
    padding-left: 0px;
}

.mlx-menuitem-icononly .rz-navigation-item-text {
    padding-left: 0px;
}

.rz-menu:not(.rz-profile-menu) .rz-navigation-menu {
    list-style: none;
    overflow: hidden;
    position: absolute;
    padding: 0;
    margin: 0;
    min-width: 100%;
    z-index: 2;
    background-color: #ffffff;
    box-shadow: 0 1px 6px 1px rgba(216,216,216,0.5);
    border-radius: 12px;
    right: 0;
}

.profile-drop-down-container .rz-navigation-menu {
    min-width: 284px !important;
    background-color: initial !important;
    box-shadow: initial !important;
    overflow: visible !important;
}

.rz-navigation-item.mlx-menuitem-size-md .rz-navigation-item-icon {
    width: var(--size-250);
    height: var(--size-250);
}

/* Mlx Menu Shade Dark */

.rz-menu:not(.rz-profile-menu).mlx-shade-dark {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    background-color: initial;
    transition: initial;
}

    .rz-menu:not(.rz-profile-menu).mlx-shade-dark .rz-navigation-item .rz-navigation-item-wrapper .rz-navigation-item-link {
        color: var(--icon-inverted-weaker);
        cursor: pointer;
        border-radius: var(--size-100);
    }

    .rz-menu:not(.rz-profile-menu).mlx-shade-dark .rz-navigation-item .rz-navigation-item-wrapper .rz-navigation-item-link:hover {
        color: var(--icon-inverted-weaker);
    }

    .rz-menu:not(.rz-profile-menu).mlx-shade-dark .rz-navigation-item-wrapper:hover {
        background-color: var(--bg-brand-default);
        border-radius: var(--size-100);
    }

    .rz-menu:not(.rz-profile-menu).mlx-shade-dark .rz-navigation-item .rz-navigation-item-wrapper .rz-navigation-item-link.active {
        background: var(--bg-brand-stronger);
        color: var(--icon-inverted-weaker);
        cursor: default;
    }

    .rz-menu:not(.rz-profile-menu).mlx-shade-dark .rz-navigation-item.active .rz-navigation-item-wrapper .rz-navigation-item-link {
        background: var(--bg-brand-strong);
        color: var(--icon-inverted-weaker);
        cursor: default;
    }

/* Header Menus */

.rz-navigation-item-link.active .rz-navigation-item-icon {
    filter: var(--accent-primary-dark-filter);
}

.rz-autocomplete-input {
    height: 38px;
}

.mlx-navbar-large .form-control, .mlx-navbar-medium .form-control {
    background: var(--bg-brand-default)
}

.mlx-navbar-large .form-control::placeholder, .mlx-navbar-medium .form-control::placeholder {
    color: var(--white);
}

/*#endregion */

/*#region Banner */

.mlx-Banner {
    background: var(--white);
}

/*#endregion*/

/*#region Divider*/

.mlx-Divider {
    --mlx-divider-size: 1px;
    border: none;
    border-top: 2px solid var(--bg-brand-default);
    color: var(--bg-brand-default);
    overflow: visible;
    text-align: center;
    height: var(--mlx-divider-size);
    width: 100%;
    opacity: 1.0;
    margin: auto;
}

.mlx-VDivider {
    --mlx-vdivider-size: 1px;
    border: none;
    border-left: 2px solid var(--bg-brand-default);
    color: var(--bg-brand-default);
    overflow: visible;
    text-align: center;
    width: var(--mlx-vdivider-size);
    opacity: 1.0;
}

.mlx-divider-size-large {
    --mlx-divider-size: 2px;
    --mlx-vdivider-size : 2px;
}

.mlx-divider-size-xlarge {
    --mlx-divider-size: 4px;
    --mlx-vdivider-size: 4px;
}

.mlx-VDivider-component-small {
    height: var(--component-xxxsmall);
}
@media print {
    .mlx-Divider {
        border-width: 0px;
        height: 1px;
        content: linear-gradient( var(--bg-weak), var(--bg-weak) );
    }
}

.mlx-Divider.mlx-Divider-Primary {
    border-top: var(--mlx-divider-size) solid var(--bg-brand-default);
    color: var(--bg-brand-default);
}

.mlx-VDivider.mlx-VDivider-Primary {
    border-left: var(--mlx-vdivider-size) solid var(--bg-brand-default);
    color: var(--bg-brand-default);
}

.mlx-Divider.mlx-Divider-Primary.mlx-shade-light {
    border-top: var(--mlx-divider-size) solid var(--border-brand-weak);
    color: var(--border-brand-weak);
}

.mlx-VDivider.mlx-VDivider-Primary.mlx-shade-light {
    border-left: var(--mlx-vdivider-size) solid var(--border-brand-weak);
    color: var(--border-brand-weak);
}

.mlx-Divider.mlx-Divider-Secondary {
    border-top: var(--mlx-divider-size) solid var(--bg-brand-contrast-default);
    color: var(--bg-brand-contrast-default);
}

.mlx-VDivider.mlx-VDivider-Secondary {
    border-left: var(--mlx-vdivider-size) solid var(--bg-brand-contrast-default);
    color: var(--bg-brand-contrast-default);
}

.mlx-Divider.mlx-Divider-Light {
    border-top: var(--mlx-divider-size) solid var(--bg-neutral-default);
    color: var(--bg-neutral-default);
}

.mlx-Divider.mlx-Divider-Light.mlx-shade-dark {
    border-top: var(--mlx-divider-size) solid var(--bg-neutral-strong);
    color: var(--bg-neutral-strong);
}

.mlx-VDivider.mlx-VDivider-Light.mlx-shade-dark {
    border-left: var(--mlx-vdivider-size) solid var(--bg-neutral-strong);
    color: var(--bg-neutral-strong);
}

.mlx-VDivider.mlx-VDivider-Light {
    border-left: var(--mlx-vdivider-size) solid var(--border-weak);
    color: var(--border-weak);
}

.mlx-Divider.mlx-Divider-Dark {
    border-top: var(--mlx-divider-size) solid var(--border-intermediate-default);
    color: var(--border-intermediate-default);
}

.mlx-VDivider.mlx-VDivider-Dark {
    border-left: var(--mlx-vdivider-size) solid var(--border-intermediate-default);
    color: var(--border-intermediate-default);
}

.mlx-Divider.mlx-Divider-Success {
    border-top: var(--mlx-divider-size) solid var(--border-success-default);
    color: var(--border-success-default);
}

.mlx-VDivider.mlx-VDivider-Success {
    border-left: var(--mlx-vdivider-size) solid var(--border-success-default);
    color: var(--border-success-default);
}

.mlx-Divider.mlx-Divider-Danger {
    border-top: var(--mlx-divider-size) solid var(--border-danger-default);
    color: var(--border-danger-default);
}

.mlx-VDivider.mlx-VDivider-Danger {
    border-left: var(--mlx-vdivider-size) solid var(--border-danger-default);
    color: var(--border-danger-default);
}

.mlx-Divider.mlx-Divider-Warning {
    border-top: var(--mlx-divider-size) solid var(--border-warning-default);
    color: var(--border-warning-default);
}

.mlx-VDivider.mlx-VDivider-Warning {
    border-left: var(--mlx-vdivider-size) solid var(--border-warning-default);
    color: var(--border-warning-default);
}

.mlx-Divider.mlx-Divider-Info {
    border-top: var(--mlx-divider-size) solid var(--border-accent-default);
    color: var(--border-accent-default);
}

.mlx-VDivider.mlx-VDivider-Info {
    border-left: var(--mlx-vdivider-size) solid var(--border-accent-default);
    color: var(--border-accent-default);
}

/*#endregion*/

/*#region WatchList Right Sidebar */

.mlx-watchlist-header {
    background-color: #f7f7f7;
    padding: 1rem;
}

.mlx-watchlist-body {
    background-color: #f2f2f2;
    padding: 1rem;
}

/*#endregion*/

/*#region mlxLayoutShrinkGrow */

.mlx-LayoutShrinkGrow {
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.mlx-LayoutShrinkGrowHeader {
    flex-shrink: 0;
    width: 100%;
    text-align: center;
}

.mlx-LayoutShrinkGrowBody {
    flex-grow: 1;
    width: 100%;
    text-align: center;
    overflow: auto;
}

.mlx-LayoutShrinkGrowFooter {
    flex-shrink: 0;
    width: 100%;
    text-align: center;
}
/*#endregion*/

/*#region mlx-layout-v1 */

.mlx-layout-v1 .admin-user-audit-datagrid {
    width: 100%;
}

.mlx-layout-v1 .admin-user-datagrid {
    width: 100%;
}
/*#endregion*/

/*#region mlx landing */

.mlx-landing .svg-landing-icon {
    height: 51px;
    width: 51px;
    margin-left: auto;
    margin-top: -14px;
}

.mlx-landing .landingcard {
    min-height: 256px;
    gap: 16px;
}

/*#endregion*/

/*#region mlx Text */

.mlx-break-all {
    word-break: break-all; /* Ensures breaking at the character level */
}

.mlx-underline {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.mlx-text-singleline-trim {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mlx-text-clamping-ellipsis-1 {
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.mlx-text-clamping-ellipsis-2 {
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    text-align: justify;
}

.mlx-text-clamping-ellipsis-3 {
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.mlx-ellipse {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mlx-ellipse-100 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.mlx-nowrap {
    white-space: nowrap;
}

/*#endregion*/

/*#region Text Area */

.rz-textarea-readonly.rz-variant-filled {
    border: initial;
    border-radius: initial;
    box-shadow: initial;
    padding: initial;
}

    .rz-textarea-readonly.rz-variant-filled:not(:disabled):not(.rz-state-disabled):hover {
        border: initial;
        border-radius: initial;
        box-shadow: initial;
        padding: initial;
    }

    .rz-textarea-readonly.rz-variant-filled:not(:disabled):not(.rz-state-disabled):focus {
        border: initial;
        border-radius: initial;
        box-shadow: initial;
        padding: initial;
    }

/*#endregion */

/*# positions */

.mlx-position-absolute-bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
}

.mlx-position-absolute-vert-left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.mlx-position-relative {
    position: relative;
}

/*#endregion*/

/*#region Carrots */

/* The parent must be position:relative */

.mlx-top-middle-carrot {
    position: relative;
    margin-top: 16px;
    box-shadow: 0 1px 6px 1px rgba(216,216,216,0.5);
    border-radius: 12px;
}

    .mlx-top-middle-carrot:after {
        content: ' ';
        position: absolute;
        width: 16px;
        height: 16px;
        top: -16px;
        left: 50%;
        background-color: var(--white);
        transform-origin: center;
        transform: translate(0%, 8px) rotate(45deg);
        border-top: var(--neutral-neutral-200);
        border-left: var(--neutral-neutral-200);
        border-bottom: var(--white);
        border-right: var(--white);
        border-width: 1px;
        border-style: solid;
    }

.mlx-top-right-carrot {
    position: relative;
    margin-top: 16px;
    margin-right: 4px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.06);
}

    .mlx-top-right-carrot:after {
        content: ' ';
        position: absolute;
        width: 16px;
        height: 16px;
        top: -16px;
        left: 85%;
        background-color: var(--white);
        transform-origin: center;
        transform: translate(0%, 8px) rotate(45deg);
        border-top: var(--neutral-neutral-200);
        border-left: var(--neutral-neutral-200);
        border-bottom: var(--white);
        border-right: var(--white);
        border-width: 1px;
        border-style: solid;
    }

/*#endregion*/

/*#region ToolTip */

.mlx-tooltip-xs {
    max-width: 104px;
}

.mlx-tooltip-sm {
    max-width: 144px;
}

.mlx-tooltip-md {
    max-width: 200px;
}

.mlx-tooltip-lg {
    max-width: 264px;
}

.mlx-tooltip-wrap .rz-tooltip-content {
    white-space: initial;
}

.mlx-tooltip-delay-short {
    --hide-delay: 0ms;
    --show-delay: 150ms;
}

.mlx-tooltip-delay-long {
    --hide-delay: 0ms;
    --show-delay: 700ms;
}
/*#endregion */

/*#region Skelelton */

.mlx-skeleton {
    animation: mlx-skeleton-loading 0.7s linear infinite alternate;
}

.mlx-skeleton-dark {
    animation: mlx-skeleton-dark-loading 0.7s linear infinite alternate;
}

@keyframes mlx-skeleton-loading {
    0% {
        background-color: var(--neutral-neutral-50);
    }

    100% {
        opacity: 0.5;
        background-color: var(--neutral-neutral-50);
    }
}

@keyframes mlx-skeleton-dark-loading {
    0% {
        background-color: var(--neutral-neutral-200);
    }

    100% {
        opacity: 0.5;
        background-color: var(--neutral-neutral-200);
    }
}

.mlx-skeleton-text {
    width: 100%;
    height: 28px;
    border-radius: 12px;
}

/*#endregion */

/*#region Flex Wrap Toggles */

@media(max-width:1024px) {

    .mlx-flex-flexwrap-1024-on {
        flex-wrap: wrap !important;
    }

    .mlx-flex-flexwrap-reverse-1024-on {
        flex-wrap: wrap-reverse !important;
    }
}

@media(max-width:768px) {

    .mlx-flex-flexwrap-768-on {
        flex-wrap: wrap !important;
    }

    .mlx-flex-flexwrap-reverse-768-on {
        flex-wrap: wrap-reverse !important;
    }
}


/*#endregion */

/*#region Charts */

:root {
    --mlx-chart-width-md: 190px;
    --mlx-chart-height-md: 85px;
}

.mlx-chart-size-md {
    width: var(--mlx-chart-width-md);
    height: var(--mlx-chart-height-md);
}
/*#endregion */

/*#region Pastel*/
.rz-scheme-pastel.mlx-chart-primary .rz-series-item-0 {
    fill: var(--special-success-success-light);
    stroke: var(--special-success-success-light);
}

.rz-scheme-pastel.mlx-chart-primary .rz-series-item-1 {
    fill: var(--special-success-success);
    stroke: var(--special-success-success);
}
/*#endregion */

/*#region badges bar */
.mlx-badgebar-mask {
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1)12%);
}

.mlx-element-overflow-hidden {
    overflow: hidden
}
/*#endregion */