/* You can add global styles to this file, and also import other style files */
/* Hosted MF remote entry uses styles-hosted.css (no bundled @font-face); sync non-font rules there. */
@font-face {
    font-family: 'ProximaNova';
    font-weight: 400;
    src: local('Proxima Nova'), local('ProximaNova'), url('proximanova-regular-webfont.942d3edb2d3c85a55e93.woff') format('woff');
}
@font-face {
    font-family: 'Proxima Nova';
    font-weight: 400;
    src: local('Proxima Nova'), local('ProximaNova'), url('proximanova-regular-webfont.942d3edb2d3c85a55e93.woff') format('woff');
}
@font-face {
    font-family: 'ProximaNova';
    font-weight: 500;
    src: local('Proxima Nova'), local('ProximaNova'), url('proximanova-medium-webfont.ec58f0558bab031d7575.woff') format('woff');
}
@font-face {
    font-family: 'Proxima Nova';
    font-weight: 500;
    src: local('Proxima Nova'), local('ProximaNova'), url('proximanova-medium-webfont.ec58f0558bab031d7575.woff') format('woff');
}
@font-face {
    font-family: 'ProximaNova';
    font-weight: 600;
    src: local('Proxima Nova'), local('ProximaNova'), url('proximanova-semibold-webfont.f92cb73ad1815641e4ea.woff') format('woff');
}
@font-face {
    font-family: 'Proxima Nova';
    font-weight: 600;
    src: local('Proxima Nova'), local('ProximaNova'), url('proximanova-semibold-webfont.f92cb73ad1815641e4ea.woff') format('woff');
}
@font-face {
    font-family: 'ProximaNova';
    font-weight: 700;
    src: local('Proxima Nova'), local('ProximaNova'), url('proximanova-bold-webfont.f96e7968c1d663b95d09.woff') format('woff');
}
@font-face {
    font-family: 'Proxima Nova';
    font-weight: 700;
    src: local('Proxima Nova'), local('ProximaNova'), url('proximanova-bold-webfont.f96e7968c1d663b95d09.woff') format('woff');
}
html,
body,
#root {
    width: 100%;
    height: 100%;
    background: #f0f4fa;
    margin: 0;
    font: 400 14px/21px 'Proxima Nova', ProximaNova, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
        Arial, sans-serif;

    .selectMenuItem {
        &.MuiMenu-paper {
            max-height: 250px;
            margin-top: 8px;
            border-radius: 10px;
            box-shadow: 0px 10px 25px #121b4e1c;
        }
    }

    .datePickerSelectMenuItem {
        & .MuiMenu-paper {
            min-height: fit-content !important;
            min-width: fit-content !important;
            margin-top: 8px;
            border-radius: 10px;
            box-shadow: 0px 10px 25px #121b4e1c;
        }
    }

    .selectChannelsMenuItem {
        & .MuiMenu-paper {
            width: 180px;
            margin-top: 4px;
            border-radius: 8px;
            box-shadow: 0px 16px 24px 0px rgba(47, 61, 83, 0.11);

            .MuiMenu-list {
                padding: 12px;
                width: 156px;
            }
        }
    }

    .selectRuleMenuItem {
        &.MuiMenu-paper,
        & .MuiMenu-paper {
            max-height: 168px;
            width: 120px;
            border-radius: 8px;
            box-shadow: 0px 16px 24px 0px rgba(47, 61, 83, 0.11);
            font-family: 'Proxima Nova', ProximaNova, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
                Arial, sans-serif;

            .MuiMenu-list {
                padding: 12px 0 12px 8px;
                font-family: inherit;
            }
        }
    }

    .apiTokenTypeSelect__option .WMSelect-optionLabel {
        width: 100%;
    }
}
/*
 * @walkme/ui-styles injects GlobalFonts (body font-size: 16px) at runtime; ThemeProvider `theme`
 * does not override that string. !important wins over the non-!important injected rule.
 */
body {
    font-size: 14px !important;
    line-height: 21px !important;
}
/* WalkMe global scrollbars — 4px, #AFBFF7, 40px radius (scoped — no root-level *) */
html,
body,
#root,
html *,
body *,
#root * {
    scrollbar-width: thin;
    scrollbar-color: #afbff7 transparent;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#root::-webkit-scrollbar,
html *::-webkit-scrollbar,
body *::-webkit-scrollbar,
#root *::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
#root::-webkit-scrollbar-track,
html *::-webkit-scrollbar-track,
body *::-webkit-scrollbar-track,
#root *::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 40px;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
#root::-webkit-scrollbar-thumb,
html *::-webkit-scrollbar-thumb,
body *::-webkit-scrollbar-thumb,
#root *::-webkit-scrollbar-thumb {
    background-color: #afbff7;
    border-radius: 40px;
}
/* WalkMe TabsHeader (ui-core) — remove full-width tab row divider on .MuiTabs-flexContainer */
.MuiTabs-root .MuiTabs-flexContainer {
    border-bottom: none !important;
}
html body [class*='GridSkeleton__StyledRow'] [class*='Skeleton__StyledSkeleton'],
html body [class*='GridSkeleton__StyledRow'] [class*='Skeleton__StyledSkeleton'] .text,
html body [class*='GridSkeleton__StyledRow'] .MuiSkeleton-root,
html body [class*='GridSkeleton__StyledRow'] .MuiSkeleton-text,
html body .tableSkeleton [class*='Skeleton__StyledSkeleton'],
html body .tableSkeleton [class*='Skeleton__StyledSkeleton'] .text,
html body .tableSkeleton .MuiSkeleton-root,
html body .tableSkeleton .MuiSkeleton-text {
    min-height: 12px !important;
    flex-shrink: 0 !important;
    border-radius: 12px !important;
}
/*
.WMDateRange-dateRangePopover .WMDateRange-dateRangePopoverPaper {
    width: 364px;
}

.WMDateRange-dateRangePopoverPaper .WMDayPicker-wmDayPicker .DayPicker-Month {
    width: 100%;
}

.WMDateRange-dateRangePopoverPaper .WMDateRange-rangeOptionBtn {
    min-width: auto;
    padding: 0 16px;
}

.WMDateRange-dateRangePopoverPaper .WMDateRange-explicitButtons .MuiButton-label {
    font: normal normal 500 13px/20px Poppins;
}

.WMDateRange-dateRangePopoverPaper .WMDateRange-explicitButtons .WMDateRange-resetBtn .MuiButton-label,
.WMDateRange-dateRangePopoverPaper .WMDateRange-rangeOptionBtn {
    color: #737da3;
} */
/* The theme uses .ag-center-cols-clipper which doesn't exist in the AG Grid DOM;
   the correct class is .ag-center-cols-container. Without this fix the center rows
   fall back to the base rule (right-directed glow) and bleed into the pinned-left column. */
[class*='ag-theme-wm-ui'] .ag-row.ag-row-hover::after,
[class*='ag-theme-wm-ui'] .ag-row.grid-action-row-hover::after,
[class*='ag-theme-wm-ui'] .ag-row.ag-row-selected::after,
[class*='ag-theme-wm-ui'] .ag-row.ag-row-focus::after {
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    max-height: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
}
[class*='ag-theme-wm-ui'] .ag-center-cols-container .ag-row.ag-row-hover::after,
[class*='ag-theme-wm-ui'] .ag-center-cols-container .ag-row.grid-action-row-hover::after {
    box-shadow: inset 0 1px 0 0 rgb(245, 246, 248), inset 0 -1px 0 0 rgb(245, 246, 248), rgba(212, 223, 245, 0.5) 0px 0px 15px;
}
[class*='ag-theme-wm-ui'] .ag-pinned-left-cols-container .ag-row.ag-row-hover::after,
[class*='ag-theme-wm-ui'] .ag-pinned-left-cols-container .ag-row.grid-action-row-hover::after {
    box-shadow: inset 0 1px 0 0 rgb(245, 246, 248), inset 0 -1px 0 0 rgb(245, 246, 248);
}
[class*='ag-theme-wm-ui'] .ag-pinned-right-cols-container .ag-row::after {
    box-shadow: none;
}
[class*='ag-theme-wm-ui'] .ag-pinned-right-cols-container .ag-row.ag-row-hover::after,
[class*='ag-theme-wm-ui'] .ag-pinned-right-cols-container .ag-row.grid-action-row-hover::after {
    box-shadow: inset 0 1px 0 0 rgb(245, 246, 248), inset 0 -1px 0 0 rgb(245, 246, 248), rgba(212, 223, 245, 0.5) 0 -10px 15px -12px,
        rgba(212, 223, 245, 0.5) 0 10px 15px -12px, rgba(212, 223, 245, 0.5) 10px 0 15px -12px;
}
[class*='ag-theme-wm-ui'] .ag-cell-first-right-pinned,
[class*='ag-theme-wm-ui'] .ag-header-cell-first-right-pinned {
    border-left: none !important;
    box-shadow: none !important;
}
[class*='ag-theme-wm-ui'] .ag-cell-first-right-pinned .WMButton-wmButton:hover {
    background-color: #3b61eb0d !important;
    color: #385feb !important;
}
[class*='ag-theme-wm-ui'],
.ag-popup-child {
    --ag-header-height: 40px;
}
[class*='ag-theme-wm-ui'] .ag-header-row,
[class*='ag-theme-wm-ui'] .ag-header-cell {
    min-height: 40px;
    height: 40px;
}
[class*='ag-theme-wm-ui'] .ag-header-cell {
    background-color: #f5f7fe !important;
}
[class*='ag-theme-wm-ui'] .ag-header-cell,
[class*='ag-theme-wm-ui'] .ag-header-cell-text,
[class*='ag-theme-wm-ui'] .ag-header-cell-label,
[class*='ag-theme-wm-ui'] .ag-header-cell-comp-wrapper,
[class*='ag-theme-wm-ui'] [class*='DataGridColumnHeader'] {
    font-family: 'Proxima Nova', ProximaNova, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
        sans-serif !important;
}
/* AG Grid set column filter (checkbox select popup) — WalkMe / Proxima Nova */
.ag-popup-child .ag-set-filter,
.ag-popup-child .ag-set-filter-list,
.ag-popup-child .ag-set-filter-item,
.ag-popup-child .ag-set-filter-item-value,
.ag-popup-child .ag-filter-virtual-list-item,
.ag-popup-child .ag-mini-filter,
.ag-popup-child .ag-mini-filter input {
    font-family: 'Proxima Nova', ProximaNova, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
        sans-serif !important;
    font-size: 14px;
    line-height: 21px;
    color: #2f426c;
}
/* Body-mounted column filters (e.g. partner detail grid) — match in-grid filter chrome */
.ag-popup-child.ag-theme-wm-ui,
.ag-popup-child .ag-menu,
.ag-popup-child .ag-filter,
.ag-popup-child .ag-filter-wrapper,
.ag-popup-child .ag-filter-body-wrapper,
.ag-popup-child .ag-picker-field-wrapper {
    background-color: #ffffff !important;
    color: #2f426c;
}
.ag-popup-child.ag-theme-wm-ui {
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(41, 69, 172, 0.12);
    border: 1px solid #e3e9fc;
}
.ag-popup-child .ag-menu {
    z-index: 10000;
    overflow: visible !important;
}
.ag-popup-child .ag-filter-body-wrapper,
.ag-popup-child .ag-set-filter-list {
    max-height: min(280px, 50vh);
    overflow-y: auto;
}