/*NOTES FOR ON PAGE CODE*/
/*Try to remove all inline styles if possible, they will conflict with the classes*/
/*Try to remove all the "xs, xl, lg..." tags, as they will set width for items which also causes some issues (will tackle mobile styles more in depth once desktop is crisp)*/
/*If examples of class implementation are needed, refer to "Entity Management", "User Management" pages, they have the new classes implemented on them*/


/*DISCLAIMER*/
/*These classes are not PERFECT, there may be cases where new classes need to be made, if that's the case, please note those areas so that Josh can create styles for them*/
/*Also please do not edit these classes, if there is an issue please let note them as a comment, or send a teams message to Josh so that he may edit/adjust the classes*/

/*This makes sure that the content on the page takes up all remaining space, which allows the pagination to stay on the bottom at all times*/
html,body,#app,.outerContainer,.mainContainer,.mud-main-content, .containerDiv{
    height: 100%;
}

/*Style key quick search (Used for Ctrl + F to search for different style groups) */

/*Main Container Styles*/
/*Heading Styles*/
/*Button Styles*/
/*Input Styles*/
/*Table Styles*/
/*Drawer Styles*/
/*Pagination Styles*/

:root {
    --mud-palette-purple: #814481;
}

/*Page Main Container Styles*/
.containerDiv{
    display: flex;
    flex-direction: column;
}

.body-content{
    flex-grow: 0;
    display: flex;
    flex-direction: column;
}
/*End of Page Main Container Styles*/



/*Page Heading Styles*/

.hrpm__heading-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 48px 0;
}

    .hrpm__heading--main {
        color: #4F4F50;
    }

/*End of Page Heading Styles*/


/*Page Button Styles*/
.hrpm__btn {
    padding: 8px 10px 8px 14px;
    border-radius: 10px;
    line-height: 0 !important;
    box-shadow: none !important;
    margin-inline: 0 !important;
}

    .hrpm__btn--main{
        background-color: #0095D3;
    }

    .hrpm_btn--outline:hover {
        background-color: #0095D3 !important;
        color: #FFF !important;
    }

.hrpm__btn--clear {
    color: #4F4F50 !important;
    background-color: #AFAFB2 !important;
}

.hrpm__btn .mud-button-label {
    font-size: 0.875rem !important;
    text-transform: none !important;
    line-height: 20px !important;
    font-weight: 500;
    letter-spacing: 0;
}

    .hrpm__btn .mud-button-label .mud-button-icon-end{
        margin-right: 0 !important;
    }

.hrpm__btn--order-2{
    order: 2;
}

.hrpm__btn--order-3 {
    order: 3;
}

.hrpm__btn--order-4 {
    order: 4;
}

.hrpm__btn--order-5 {
    order: 5;
}

.hrpm__btn-icon {
    padding: 5px;
    margin: 0;
    color: #4F4F50;
    border-radius: 10px !important;
    box-shadow: none !important;
}

    .hrpm__btn-icon:hover {
        background-color: rgba(0, 149, 210, 0.15) !important
    }

.hrpm__btn-icon--filter {
    padding: 0 !important;
    color: #8D8E90 !important;
    margin-left: 3px !important;
    margin-right: -6px !important;
}

.hrpm__btn-icon--col-filter {
}

.hrpm__btn-icon--search, .hrpm__btn-icon--col-filter {
    padding: 8px !important;
    color: #FFF !important;
    border-radius: 10px;
}

.hrpm__btn-icon--filter:hover {
    background-color: transparent !important;
}
 /*for create user button on person page*/
/* Ensure hover always shows the outline border (for filled & outlined variants) */
.hrpm_btn--outline[class*="-secondary"]:hover,
.hrpm_btn--outline.mud-button-filled[class*="-secondary"]:hover {
    background-color: white !important;
    color: var(--mud-palette-secondary) !important;
    border: 1px solid var(--mud-palette-secondary) !important;
    box-shadow: none !important;
}
.hrpm_btn--outline[class*="-purple"]:hover,
.hrpm_btn--outline.mud-button-filled[class*="-purple"]:hover {
    background-color: white !important;
    color: var(--mud-palette-purple) !important;
    border: 1px solid var(--mud-palette-purple) !important;
    box-shadow: none !important;
}

.hrpm_btn--outline[class*="-primary"]:hover,
.hrpm_btn--outline.mud-button-filled[class*="-primary"]:hover {
    background-color: white !important;
    color: var(--mud-palette-primary) !important;
    border: 1px solid var(--mud-palette-primary) !important;
    box-shadow: none !important;
}

.hrpm_btn--outline[class*="-error"]:hover,
.hrpm_btn--outline.mud-button-filled[class*="-error"]:hover {
    background-color: white !important;
    color: var(--mud-palette-error) !important;
    border: 1px solid var(--mud-palette-error) !important;
    box-shadow: none !important;
}

.hrpm_btn--outline[class*="-success"]:hover,
.hrpm_btn--outline.mud-button-filled[class*="-success"]:hover {
    background-color: white !important;
    color: var(--mud-palette-success) !important;
    border: 1px solid var(--mud-palette-success) !important;
    box-shadow: none !important;
}

/* Prevent icon-button layout shift: give stable size and reserve border (applies globally to table/action icon buttons) */
.hrpm__table-action-container .mud-icon-button,
.hrpm__table-action-container button,
.hrpm__btn-icon {
    box-sizing: border-box !important;
    width: 24px !important;
    height: 24px !important;
    padding: 4px !important; /* keep icon centered */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid transparent !important; /* reserve hover border space */
    transition: transform 120ms ease, border-color 150ms ease, background-color 150ms ease;
    line-height: normal !important; /* undo line-height:0 that collapses height */
}

    /* Remove explicit width/height change on hover to avoid reflow — use transform for feedback instead */
    .hrpm__table-action-container .mud-icon-button:hover,
    .hrpm__table-action-container button:hover {
        background: rgba(0, 149, 210, 0.15) !important;
        border-radius: 10px;
        /* DO NOT change width/height here (overrides earlier rule that caused jumps) */
        transform: scale(1.05);
        border-color: transparent !important;
    }

/* If you still want a 1px colored border on hover, change border-color only (no layout shift) */
.hrpm_btn--outline[class*="-primary"]:hover,
.hrpm_btn--outline.mud-button-filled[class*="-primary"]:hover {
    border-color: var(--mud-palette-primary) !important;
}

/* Reserve hover border space for all hrpm buttons to prevent dialog/page jump */
.hrpm__btn,
.hrpm__btn-icon,
.hrpm_btn--outline,
.hrpm_btn--outline.mud-button-filled,
.hrpm__table-actions button,
.hrpm__table-action-container button,
.hrpm__pagination-button-container button,
.hrpm__btn-container button {
    box-sizing: border-box !important;
    border: 1px solid transparent !important; /* reserve space so hover border doesn't change size */
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

/* Override earlier collapsing line-height for regular hrpm buttons */
.hrpm__btn {
    line-height: 20px !important;
}

/* Keep icon-only buttons visually stable */
.hrpm__btn-icon,
.hrpm__table-action-container .mud-icon-button {
    padding: 5px !important;
    border-radius: 10px !important;
}
.mud-icon-button[color*="primary"],
.mud-icon-button.mud-primary-text,
.mud-icon-button.mud-primary {
    color: var(--mud-palette-primary) !important;
    background-color: transparent !important;
}

/* Re-assert MudBlazor filled-primary icon button appearance without being global */
.mud-button-filled.mud-icon-button.mud-button-filled-primary {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    width: 32px !important;
    height: 32px !important;
}

/* Reset MudIconButton states - ensure they're visible */
.mud-icon-button {
    background-color: transparent !important;
    transition: background-color 150ms ease, color 150ms ease !important;
}

    /* For primary color icon buttons */
    .mud-icon-button.mud-icon-button-color-primary {
        color: var(--mud-palette-primary) !important;
    }

/* For filled variant primary */
.mud-button-filled.mud-button-filled-primary.mud-icon-button {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}

/* Hover states - WHITE background with BLUE icon */
.mud-icon-button:hover {
    background-color: white !important;
    color: var(--mud-palette-primary) !important;
}

/* Filled button hover - should become outline on hover */
.mud-button-filled.mud-button-filled-primary.mud-icon-button:hover {
    background-color: white !important;
    color: var(--mud-palette-primary) !important;
    border: 1px solid var(--mud-palette-primary) !important;
}

/* Reset active/focus/clicked states to match normal state */
.mud-icon-button:active,
.mud-icon-button:focus,
.mud-icon-button.mud-ripple-click,
.mud-icon-button.mud-activated {
    background-color: transparent !important;
    border: 1px solid transparent !important;
}

/* Reset for filled variant */
.mud-button-filled.mud-button-filled-primary.mud-icon-button:active,
.mud-button-filled.mud-button-filled-primary.mud-icon-button:focus,
.mud-button-filled.mud-button-filled-primary.mud-icon-button.mud-ripple-click,
.mud-button-filled.mud-button-filled-primary.mud-icon-button.mud-activated {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    border: 1px solid var(--mud-palette-primary) !important;
    opacity: 0.8 !important;
}

/* Specific override for outline button styling in your example */
.hrpm_btn--outline.hrpm__btn.mud-icon-button {
    background-color: transparent !important;
    border: 1px solid var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary) !important;
}

.hrpm_btn--outline.hrpm__btn.mud-button-filled.mud-button-filled-primary.mud-icon-button {
    background-color: var(--mud-palette-primary) !important;
    color: white !important;
    border: 1px solid var(--mud-palette-primary) !important;
}

/* Hover state for outline button - WHITE background with BLUE icon */
.hrpm_btn--outline.hrpm__btn.mud-icon-button:hover {
    background-color: white !important;
    color: var(--mud-palette-primary) !important;
    border: 1px solid var(--mud-palette-primary) !important;
}

/* Hover for filled outline variant - should also be white with blue icon */
.hrpm_btn--outline.hrpm__btn.mud-button-filled.mud-button-filled-primary.mud-icon-button:hover {
    background-color: white !important;
    color: var(--mud-palette-primary) !important;
    border: 1px solid var(--mud-palette-primary) !important;
}

/* Reset active/clicked state for outline button */
.hrpm_btn--outline.hrpm__btn.mud-icon-button:active,
.hrpm_btn--outline.hrpm__btn.mud-icon-button:focus,
.hrpm_btn--outline.hrpm__btn.mud-icon-button.mud-ripple-click {
    background-color: transparent !important;
    color: var(--mud-palette-primary) !important;
    border: 1px solid var(--mud-palette-primary) !important;
}

/* For filled outline variant */
.hrpm_btn--outline.hrpm__btn.mud-button-filled.mud-button-filled-primary.mud-icon-button:active,
.hrpm_btn--outline.hrpm__btn.mud-button-filled.mud-button-filled-primary.mud-icon-button:focus,
.hrpm_btn--outline.hrpm__btn.mud-button-filled.mud-button-filled-primary.mud-icon-button.mud-ripple-click {
    background-color: var(--mud-palette-primary) !important;
    color: white !important;
    border: 1px solid var(--mud-palette-primary) !important;
}
/*End of Page Button Styles*/


/*Page Input Styles*/
.personmanagement__action-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px !important; 
    margin-right: -12px !important;
    margin-bottom: 8px;
}

    .personmanagement__action-container > * {
        display: inline-flex; 
        align-items: start;
    }

        .personmanagement__action-container > *:not(:first-child) {
            margin-left: 8px !important;
        }

    .personmanagement__action-container .hrpm__btn--order-5 {
        display: flex;
        align-items: center;
        gap: 8px !important;
    }

    .personmanagement__action-container .hrpm__btn-icon {
        margin-bottom: 0 !important; 
    }

    .personmanagement__action-container .hrpm__switch-item {
        margin: 0 !important;
    }
.hrpm__action-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px !important;
    margin-right: -12px !important;
    margin-bottom: 8px;
}

.hrpm__search-item{
    padding-left: 10px !important;
    width: 270px !important;
}

.hrpm__search-item--sized{
    max-width: 270px;
    margin-left: auto;
}

.hrpm__search-item svg {
    fill: #C9CACD !important;
}

.hrpm__switch-item .mud-switch {
    margin-right: 0 !important;
}

.hrpm__switch-item.hrpm__switch-item.hrpm__switch-item .mud-switch-base:hover {
    background-color: transparent !important;
}
.mud-switch .mud-switch-base,
.mud-switch .mud-switch-base:hover,
.mud-switch:hover .mud-switch-base,
.mud-switch.mud-checked .mud-switch-base,
.mud-switch.mud-checked .mud-switch-base:hover,
.hrpm__switch-item .mud-switch-base,
.hrpm__switch-item .mud-switch-base:hover {
    background-color: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
    transition: none !important;
}

.mud-switch .mud-thumb,
.mud-switch .mud-thumb:hover,
.mud-switch .mud-thumb:active,
.mud-switch .mud-thumb:focus,
.mud-switch.mud-checked .mud-thumb,
.mud-switch .mud-icon-button,
.mud-switch .mud-icon-button:hover {
    background-color: transparent !important;
    box-shadow: none !important;
    transition: none !important;
}

    .mud-switch:focus,
    .mud-switch:focus-within,
    .mud-switch .mud-thumb:focus {
        outline: none !important;
        box-shadow: none !important;
    }

.hrpm__input.hrpm__input.hrpm__input .mud-input {
    background-color: white !important;
    line-height: normal;
    border: 1px solid #E0E1E4 !important;
    transition: border-color 200ms ease;
    color: #4F4F50;
    border-radius: 10px !important; /* Changed from 4px to 10px */
    margin-top: 22px !important;
}

.hrpm__input--no-heading.hrpm__input--no-heading.hrpm__input--no-heading .mud-input {
    margin-top: 0 !important;
}

.hrpm__input.hrpm__input.hrpm__input .mud-input:hover {
    border-color: #0095D3 !important;
}

.hrpm__input.hrpm__input.hrpm__input .mud-input:focus-within {
    border-color: #0095D3 !important;
    border-width: 1px !important;
}

.hrpm__input .mud-input-adornment {
    font-size: 1.80em;
}

    .hrpm__input .mud-input-adornment button {
        font-size: 0.875em;
        padding: 5px;
        background-color: transparent !important;
        margin: 0;
    }

        .hrpm__input .mud-input-adornment button svg {
            font-size: 1em;
        }

.hrpm__input label {
    font-size: 18.5px !important;
    transform: translate(0, 1.5px) scale(0.75) !important;
    line-height: 20px !important;
}

.hrpm__input.hrpm__input.hrpm__input input, .hrpm__input.hrpm__input.hrpm__input textarea {
    border-radius: 4px !important;
    height: auto !important;
    padding: 8px !important;
    font-size: 14px !important;
    margin: 0 !important;
}

.hrpm__input.hrpm__input.hrpm__input .mud-input.mud-input-error {
    border-color: #d32f2f !important;
}


.mud-popover {
    margin-top: 5px !important;
    border-radius: 10px !important;
}

.hrpm__input-container {
    padding-top: 12px !important;
}

.hrpm__input-container--reduce-padding > div {
    gap: 6px !important;
}

.hrpm__input-wrapper {
    display: flex;
    align-items: flex-end;
}

/*End of Page Input Styles*/


/*Page Table Styles*/

.hrpm__table-container {
    border: 1px solid #E0E1E4;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15);
}

    /* Remove border from table container when isMostRecent is true */
    .hrpm__table-container.no-header-border {
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 0 10px 10px !important;
        box-shadow: none !important;
        /* Optionally, remove background if needed */
    }

.hrpm__table-container--square-top{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0 !important;
}

    .hrpm__table-container--square-top .mud-table-row{
        border-top: 0 !important;
    }

    .hrpm__table-header {
        background-color: #C9CACD;
        padding: 10px 16px;
        padding-right: 0;
        display: flex;
        align-items: center;
        color: #4F4F50 !important;
    }

.hrpm__table-heading--inner {
    display: flex;
    align-items: center;
}

.hrpm__table-heading {
    text-align: left;
}

.hrpm__table-heading--center {
    text-align: center;
}

.hrpm__table-heading--right {
    text-align: right;
}

.hrpm__table-container tr:has(.hrpm__table-heading){
    height: auto !important;
    line-height: 1.43 !important;
}

.hrpm__table-container th {
    background-color: #C9CACD !important;
    padding: 10px 16px !important;
    padding-right: 0;
    color: #4F4F50 !important;
    height: auto !important;
    line-height: 1.465 !important;
}

.hrpm__table-container .myTable{
    margin: 0 !important;
}

.hrpm__table-header p, .hrpm__table-heading p {
    font-weight: 600 !important;
}

    .hrpm__action-heading {
        text-align: center;
    }

.hrpm__button-container {
    margin-left: 10px;
}

.hrpm__table-header .hrpm__button-sort, .hrpm__table-header--no-flex .hrpm__button-sort, .hrpm__table-heading--inner .hrpm__button-sort {
    height: 10px;
    width: 10px;
}

.hrpm__table-header--no-flex .hrpm__button-container{
    transform: translateY(-3px);
}

.hrpm__table-row > div:first-child:hover {
    color: #0095D3;
    background: rgba(0, 149, 210, 0.1);
}

.hrpm__table-row > div, .hrpm__table .mud-table-row {
    border: 1px solid #E0E1E4;
    padding: 8px 16px 6px !important;
    padding-right: 0 !important;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    position: relative;
}

.hrpm__table-row .mud-treeview-item-arrow:is(:empty) {
    display: none;
}

.hrpm__table-row > div:hover > .mud-treeview-item-arrow button {
    color: #0095D3 !important;
}

.hrpm__table-row .mud-treeview-item-arrow button {
    padding: 0;
    transition: none !important;
}

    .hrpm__table-row .mud-treeview-item-arrow button:hover {
        background: rgba(0, 149, 210, 0.15) !important;
    }

    .hrpm__table-list > .hrpm__table-row > div > .mud-treeview-item-arrow:is(:not(:empty)) {
        position: absolute;
    }

    .hrpm__table-list > .hrpm__table-row > div > .mud-treeview-item-arrow:is(:not(:empty)) + div > div > p{
        position: relative;
        left: 45px;
    }

    .hrpm__table-row > .mud-collapse-container {
        padding: 0 !important;
        border: 0 !important;
    }

.hrpm__table-row .mud-button-root {
    color: #4F4F50 !important;
}

.hrpm__table-item{
    align-items: center;
}

.hrpm__table-container tr:has(.hrpm__table-cell){
    height: auto !important;
}

.hrpm__table-cell {
    height: auto !important;
    border: 1px solid #E0E1E4;
    padding: 9px 16px 9px !important;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    text-align: left !important;
}

.hrpm__table-cell--center {
    text-align: center !important;
}

.hrpm__table-cell--right {
    text-align: right !important;
}

    .hrpm__table-actions {
        text-align: center;
    }

.hrpm__table-actions button {
    padding: 0 !important;
    color: #4F4F50 !important;
    margin-inline: 4px !important;
}

    .hrpm__table-actions button:hover {
        background: rgba(0, 149, 210, 0.15) !important;
    }

.hrpm__table-action-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .hrpm__table-action-container .mud-icon-button:hover,
    .hrpm__table-action-container button:hover {
        background: rgba(0, 149, 210, 0.15) !important;
        border-radius: 10px;
        width: 24px;
        height: 24px;
    }

        .hrpm__table-action-container button{
            padding: 0 !important;
        }

        .hrpm__table-list {
            border-radius: 0;
            border: 0;
            box-shadow: none;
        }

/*End of Page Table Styles*/


/*Page Drawer Styles*/
.mud-drawer {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden !important;
    box-shadow:inherit;
}
.hrpm__drawer-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: white;
    border-top: 10px solid #0095d3;
    background: transparent;
    align-items: center;
    padding-right: 21px;
    padding-top: 45px;
    padding-bottom: 5px;
}

.hrpm__drawer-heading {
    padding-left: 60px;
    text-transform: capitalize;
    line-height: 20px;
    font-style: normal;
    font-family: Poppins;
    color: #0095d3;
    font-weight: 600;
    font-size: 28px;
}

.hrpm__drawer-content {
    padding-inline: 41px;
    box-shadow: none !important;
    flex: 1 1 auto;
    padding-bottom: 12px;
}

    .hrpm__drawer-content .mud-card-content {
        padding: 0 !important;
    }
    hrpm__heading-container
    .hrpm__input .mud-input::before, .hrpm__input .mud-input:before, .hrpm__input .mud-input::after, .hrpm__input .mud-input:after {
        display: none;
    }

.hrpm__drawer-wrapper{
    width: 100%;
}
.hrpm__sticky-component {
    padding: 4px 0px;
    max-height: calc(100vh - 260px);
    overflow-y: auto;
    overflow-x: hidden;
    margin-right: -41px; 
    padding-right: 41px; 
    scrollbar-gutter: stable; 
    -webkit-overflow-scrolling: touch;
}
.hrpm__mudselect .mud-input {
    min-height: 40px !important;
    height: 40px !important;
    font-size: 14px !important;
    padding-left:10px !important;
    text-align:left !important;
}
.mud-popover .mud-list-item:hover,
.mud-popover .mud-list-item.mud-list-item-active {
    background-color: #a3d8f4 !important;
    color: #0095D3 !important;
}



/*End of Page Drawer Styles*/

.hrpm__btn-container {
    gap: 45px !important;
    margin-top: 24px;
    padding-top: 0 !important;
}

.hrpm__close-icon {
    position: absolute;
    top: 18px;      /* Adjust as needed for vertical alignment */
    right: 6px;    /* Adjust as needed for horizontal alignment */
    color: #0095d3;
    padding: 2px;
    z-index: 2;
}

    .hrpm__close-icon:hover {
        background-color: rgba(0, 149, 210, 0.15) !important
    }

.hrpm__tab-header > .mud-tabs-tabbar {
    margin-bottom: 20px !important;
    margin-inline: -60px !important;
}

/*Page Pagination Styles*/

.hrpm__pagination-container {
    position: relative;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    padding-bottom: 34px;
    padding-top: 34px;
    margin-top: auto;
}

.hrpm__pagination-button-container{
    text-align: center;
}

    .hrpm__pagination-button-container button{
        border-radius: 10px;
        border: 2px solid #0095D3;
        color: #0095D3;
        padding: 5px;
        min-width: 0 !important;
    }

        .hrpm__pagination-button-container button:disabled {
            background-color: #E0E1E4 !important;
            border: 2px solid #E0E1E4 !important;
            color: #8D8E90 !important;
        }

        .hrpm__pagination-button-container button:hover {
            background-color: #E0E1E4 !important;
        }

        .hrpm__notification {
            background-color: #0095D3 !important;
            margin: 0 !important;
            color: #FFF;
            font-weight: 600;
            padding: 10px 16px;
            border-radius: 10px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            font-size: 14px;
        }

.hrpm__pagination-result.hrpm__pagination-result.hrpm__pagination-result {
    border: 2px solid #0095D3;
    color: #0095D3 !important;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 16px;
    line-height: normal;
    height: 100%;
    text-transform: none !important;
}

/*End of Page Pagination Styles*/

.hrpm__notification p {
    font-weight: 600 !important;
}

div:has(> div > .hrpm__filter-container){
    border-radius: 10px !important;
}
.tight-popover {
    margin-top: -15px !important; /* reduce space between input and options */
    padding-top: 0 !important;
}