/* IMPORTANT NOTES
================================================== */
/*
1. For any of the following properites, use variables from CC/Content/Themes/HMSPMS/variables.fonts.css:
- All colors (text, buttons, links, backgrounds, borders, focus styles, etc).
- All font properties (family, size, line height, weight)
2. There are different sets of variables, do not mix variables from different sets as it could result in accesibility/contrast and styling issues in this theme or the white label themes.
3. Icon images should be either spark icons or svg image mask so the color can be customized for white labels unless it's a logo.
4. Margin and padding should use rem units, this allows to scale the size based on font size, which could be different on white label themes. Convertion of common px units to rem:
3px: .1875rem
6px: .375rem
12px: .75rem
16px: 1rem
24px: 1.5rem
32px: 2rem
*/
/* #end IMPORTANT NOTES */
.RadGrid_Custom {
    border: 0 !important;
    background: var(--backgroundWhite) !important;
    color: var(--textColor) !important;
}

    .RadGrid_Custom,
    .RadGrid_Custom .rgMasterTable,
    .RadGrid_Custom .rgDetailTable,
    .RadGrid_Custom .rgGroupPanel table,
    .RadGrid_Custom .rgCommandRow table,
    .RadGrid_Custom .rgEditForm table,
    .GridToolTip_Custom {
        font-size: var(--fontSize)/var(--lineHeight) var(--fontFamily) !important;
    }

        .RadGrid_Custom .rgMasterTable,
        .RadGrid_Custom .rgDetailTable {
            border-collapse: separate;
        }

        .RadGrid_Custom .rgRow,
        .RadGrid_Custom .rgAltRow,
        .RadGrid_Custom .rgHeader,
        .RadGrid_Custom .rgResizeCol,
        .RadGrid_Custom .rgPager,
        .RadGrid_Custom .rgGroupPanel,
        .RadGrid_Custom .rgGroupHeader {
            cursor: default;
        }

        .RadGrid_Custom input[type="image"] {
            cursor: pointer;
        }

        .RadGrid_Custom .rgRow td,
        .RadGrid_Custom .rgAltRow td,
        .RadGrid_Custom .rgEditRow td,
        .RadGrid_Custom .rgFooter td,
        .RadGrid_Custom .rgFilterRow td,
        .RadGrid_Custom .rgHeader,
        .RadGrid_Custom .rgResizeCol,
        .RadGrid_Custom .rgGroupHeader td {
            padding-left: .375rem !important;
            padding-right: .375rem !important;
        }

        .RadGrid_Custom .rgAdd,
        .RadGrid_Custom .rgRefresh,
        .RadGrid_Custom .rgEdit,
        .RadGrid_Custom .rgDel,
        .RadGrid_Custom .rgFilter,
        .RadGrid_Custom .rgPagePrev,
        .RadGrid_Custom .rgPageNext,
        .RadGrid_Custom .rgPageFirst,
        .RadGrid_Custom .rgPageLast,
        .RadGrid_Custom .rgExpand,
        .RadGrid_Custom .rgCollapse,
        .RadGrid_Custom .rgSortAsc,
        .RadGrid_Custom .rgSortDesc,
        .RadGrid_Custom .rgUpdate,
        .RadGrid_Custom .rgCancel,
        .RadGrid_Custom .rgUngroup {
            width: 16px;
            height: 16px;
            border: 0;
            margin: 0;
            padding: 0;
            background-color: transparent;
            background-image: url('Grid/Custom.gif');
            background-repeat: no-repeat;
            vertical-align: middle;
            font-size: 1px;
            cursor: pointer;
        }

        .RadGrid_Custom .rgGroupItem input,
        .RadGrid_Custom .rgCommandRow img,
        .RadGrid_Custom .rgHeader input,
        .RadGrid_Custom .rgFilterRow img,
        .RadGrid_Custom .rgFilterRow input,
        .RadGrid_Custom .rgPager img {
            vertical-align: middle;
        }

        /*header*/
        .RadGrid_Custom .rgHeaderDiv {
            background: var(--backgroundDark1) !important;
            color: var(--textColorDarkBg) !important;
        }

        .RadGrid_Custom .rgHeader,
        .RadGrid_Custom th.rgResizeCol {
            border: 0 !important;
            border-bottom: 1px solid var(--borderDark) !important;
            padding-top: .375rem !important;
            padding-bottom: .375rem !important;
            background: var(--backgroundDark1) !important;
            color: var(--textColorDarkBg) !important;
            text-align: left !important;
            font-weight: normal !important;
        }

        .RadGrid_Custom th.rgSorted {
            background: var(--backgroundLightGray) !important;
            border-bottom: 1px solid var(--borderMediumGray) !important;
            color: var(--textColor) !important;
        }

        .RadGrid_Custom .rgHeader,
        .RadGrid_Custom .rgHeader a {
            color: var(--textColorDarkBg) !important;
            font-weight: var(--fontWeightBold) !important;
            text-decoration: none;
        }

        .RadGrid_Custom .rgCheck {
            height: 15px;
            margin: 0;
            padding: 0;
        }

        /*rows*/
        .RadGrid_Custom .rgRow td,
        .RadGrid_Custom .rgAltRow td,
        .RadGrid_Custom .rgEditRow td,
        .RadGrid_Custom .rgFooter td {
            border: 0;
            border-bottom: 1px solid;
            padding-top: .1875rem;
            padding-bottom: .1875rem;
        }

        .RadGrid_Custom .rgRow td {
            border-color: var(--borderLightGray) !important;
        }

        .RadGrid_Custom .rgAltRow {
            background: var(--backgroundLightGray) !important
        }

            .RadGrid_Custom .rgAltRow td {
                border-color: var(--borderLightGray) !important;
            }

        .RadGrid_Custom .rgRow .rgSorted {
            background: var(--backgroundMediumGray) !important;
            border-color: var(--borderLightGray) !important;
        }

        .RadGrid_Custom .rgAltRow .rgSorted {
            background: var(--backgroundDarkGray) !important;
            border-color: var(--borderLightGray) !important;
        }

        .RadGrid_Custom .rgSelectedRow .rgSorted,
        .RadGrid_Custom .rgActiveRow .rgSorted,
        .RadGrid_Custom .rgHoveredRow .rgSorted,
        .RadGrid_Custom .rgEditRow .rgSorted {
            background-color: transparent !important;
        }

        .RadGrid_Custom .rgRow a,
        .RadGrid_Custom .rgAltRow a,
        .RadGrid_Custom .rgEditRow a,
        .RadGrid_Custom .rgFooter a,
        .RadGrid_Custom .rgEditForm a {
            color: inherit;
        }

        .RadGrid_Custom .rgSelectedRow {
            background: var(--backgroundInfo) !important;
            color: var(--backgroundInfoText) !important;
        }

            .RadGrid_Custom .rgSelectedRow a {
                color: inherit;
            }

        .RadGrid_Custom .rgActiveRow,
        .RadGrid_Custom .rgHoveredRow {
            background: var(--backgroundDarkGray) !important;
            color: var(--textColorLight) !important;
            border-color: var(--borderMediumGray) !important;
        }

        .RadGrid_Custom .rgEditRow {
            background: var(--backgroundWhite) !important;
        }

        .RadGrid_Custom .rgActiveRow td,
        .RadGrid_Custom .rgActiveRow td.rgSorted,
        .RadGrid_Custom .rgHoveredRow td,
        .RadGrid_Custom .rgHoveredRow td.rgSorted {
            border-color: var(--borderDarkGray) !important;
        }

        .RadGrid_Custom .rgSelectedRow td,
        .RadGrid_Custom .rgSelectedRow td.rgSorted {
            border-color: var(--borderDarkGray) !important;
        }

        /*footer*/
        .RadGrid_Custom .rgFooterDiv,
        .RadGrid_Custom .rgFooter {
            background: var(--backgroundDarkGray) !important;
        }

            .RadGrid_Custom .rgFooter td {
                border-top: 1px solid var(--borderLightGray) !important;
                border-bottom: 1px solid var(--backgroundWhite) !important;
            }

        /*status*/
        .RadGrid_Custom .rgPager .rgStatus {
            width: 35px;
            border: 1px solid;
            border-color: var(--borderDarkGray) var(--borderMediumGray) var(--borderLightGray) var(--borderMediumGray) !important;
            border-left: 0 !important;
            padding: .1875rem 0 .1875rem !important;
        }

        .RadGrid_Custom .rgStatus div {
            width: 24px;
            height: 24px;
            overflow: hidden;
            border: 0;
            margin: 0 auto;
            padding: 0;
            background: transparent center center no-repeat url('WebResource.axd?d=DSYMEgns9XE_6E3UCw-9ln0U_QvgTVjW-K9pyp1MTC2PX9gxQD5FuEP1wqkqevrXKXxFNiYI2LsGHXgTmoeSwg2&t=633746128680000000');
            text-indent: -2222px;
        }

        /*pager*/
        .RadGrid_Custom .rgPager {
            background: var(--backgroundLightGray);
        }

            .RadGrid_Custom .rgPager td {
                padding: 0;
            }

            .RadGrid_Custom .rgPager .rgPagerCell {
                border: 1px solid;
                border-color: var(--borderDarkGray) var(--borderLightGray) var(--borderLightGray);
                border-right: 0;
                padding: .1875rem 0 .1875rem;
            }

        .RadGrid_Custom .rgWrap {
            float: left;
            padding: 0 .75rem;
            line-height: var(--lineHeight);
            white-space: nowrap;
        }

        .RadGrid_Custom .rgArrPart1 {
            padding-right: 0;
            line-height: 22px;
        }

        .RadGrid_Custom .rgArrPart2 {
            padding-left: 0;
            line-height: 22px;
        }

        .RadGrid_Custom .rgInfoPart {
            float: right;
            color: #8a8a8a;
        }

            .RadGrid_Custom .rgInfoPart strong {
                font-weight: normal;
                color: #4c4e54;
            }

        .RadGrid_Custom .rgSEO .rgArrPart1,
        .RadGrid_Custom .rgSEO .rgArrPart2 {
            line-height: 24px;
        }

        .RadGrid_Custom .rgWrap a img {
            margin: 0 8px;
        }

        .RadGrid_Custom .rgPageFirst,
        .RadGrid_Custom .rgPagePrev,
        .RadGrid_Custom .rgPageNext,
        .RadGrid_Custom .rgPageLast {
            width: 22px;
            height: 24px;
        }

        .RadGrid_Custom .rgPageFirst {
            background-position: 0 -549px;
        }

            .RadGrid_Custom .rgPageFirst:hover {
                background-position: 0 -599px;
            }

        .RadGrid_Custom .rgPagePrev {
            background-position: 0 -699px;
        }

            .RadGrid_Custom .rgPagePrev:hover {
                background-position: 0 -749px;
            }

        .RadGrid_Custom .rgPageNext {
            background-position: 0 -849px;
        }

            .RadGrid_Custom .rgPageNext:hover {
                background-position: 0 -899px;
            }

        .RadGrid_Custom .rgPageLast {
            background-position: 0 -999px;
        }

            .RadGrid_Custom .rgPageLast:hover {
                background-position: 0 -1049px;
            }

        .RadGrid_Custom .rgPagerButton {
            height: 22px;
            border: 1px solid;
            border-color: #d0d0d0 #aeaeae #8b8b8b;
            margin: 0 14px 0 0;
            padding: 0 4px 2px;
            background: #e8e8e8 repeat-x 0 -1550px url('Grid/Custom.gif');
            color: #000;
            font: 12px/12px "segoe ui", arial, sans-serif;
            vertical-align: middle;
            cursor: pointer;
        }

        .RadGrid_Custom .rgNumPart {
            padding: 2px 0;
        }

        .RadGrid_Custom .NumericPages .rgNumPart {
            padding: 2px 10px;
        }

        .RadGrid_Custom .rgNumPart a:hover,
        .RadGrid_Custom .rgNumPart a:hover span,
        .RadGrid_Custom .rgNumPart a.rgCurrentPage,
        .RadGrid_Custom .rgNumPart a.rgCurrentPage span {
            background: no-repeat url('Grid/Custom.gif');
        }

        .RadGrid_Custom .rgNumPart a {
            float: left;
            line-height: 22px;
            margin: 0;
            padding: 0 5px 0 0;
            color: #000;
            text-decoration: none;
        }

        .RadGrid_Custom .rgNumPart span {
            float: left;
            padding: 0 0 0 5px;
        }

        .RadGrid_Custom .rgNumPart a:hover {
            background-position: 100% -1250px;
        }

            .RadGrid_Custom .rgNumPart a:hover span {
                background-position: 0 -1150px;
                cursor: pointer;
            }

        .RadGrid_Custom .rgNumPart a.rgCurrentPage,
        .RadGrid_Custom .rgNumPart a.rgCurrentPage:hover {
            background-position: 100% -1450px;
            cursor: default;
        }

            .RadGrid_Custom .rgNumPart a.rgCurrentPage span,
            .RadGrid_Custom .rgNumPart a.rgCurrentPage:hover span {
                background-position: 0 -1350px;
                cursor: default;
            }

        .RadGrid_Custom .NextPrevNumericAndAdvanced .rgAdvPart {
            float: none;
            text-align: center;
        }

        .RadGrid_Custom .rgPager .RadSlider {
            float: left;
            margin: 2px 10px 0 0;
        }

        .RadGrid_Custom .rgPagerLabel,
        .RadGrid_Custom .rgPager .RadComboBox,
        .RadGrid_Custom .rgPager .RadInput_Custom {
            margin: 0 4px 0 0;
            vertical-align: middle;
        }

        .RadGrid_Custom .rgPager .RadComboBox {
            margin-top: -1px;
        }

        * + html .RadGrid_Custom .rgPager .RadComboBox {
            margin-top: -2px;
        }

        * html .RadGrid_Custom .rgPager .RadComboBox {
            margin-top: -2px;
        }

        * html .RadGrid_Custom .rgPager .RadComboBox {
            padding: 1px 0;
        }

        .RadGrid_Custom .rgPagerTextBox {
            text-align: center;
        }

        /*sorting, reordering*/
        .RadGrid_Custom .rgHeader .rgSortAsc {
            background-position: 3px -248px;
            height: 10px;
        }

        .RadGrid_Custom .rgHeader .rgSortDesc {
            background-position: 3px -198px;
            height: 10px;
        }

.GridReorderTop_Custom,
.GridReorderBottom_Custom {
    width: 9px !important;
    height: 9px !important;
    margin-left: -5px;
    background: 0 0 no-repeat url('Grid/Custom.gif');
}

.GridReorderBottom_Custom {
    background-position: 0 -50px;
}

/*filtering*/
.RadGrid_Custom .rgFilterRow {
    background: #eee;
}

    .RadGrid_Custom .rgFilterRow td {
        border-bottom: 1px solid #828282;
        padding-top: 4px;
        padding-bottom: 7px;
    }

.RadGrid_Custom .rgFilter {
    width: 22px;
    height: 22px;
    margin: 0 0 0 2px;
    background-position: 0 -300px;
}

    .RadGrid_Custom .rgFilter:hover {
        background-position: 0 -350px;
    }

.RadGrid_Custom .rgFilterActive,
.RadGrid_Custom .rgFilterActive:hover {
    background-position: 0 -400px;
}

.RadGrid_Custom .rgFilterBox {
    border: 1px solid;
    border-color: #8e8e8e #c9c9c9 #c9c9c9 #8e8e8e;
    padding: 2px 1px 3px;
    font: 12px "segoe ui", arial, sans-serif;
    color: #333;
    vertical-align: middle;
}

/*grouping*/
.RadGrid_Custom .rgGroupPanel {
    height: 24px;
    border: 0;
    border-bottom: 1px solid #828282;
    background: #eee 0 -1900px repeat-x url('Grid/Custom.gif');
}

    .RadGrid_Custom .rgGroupPanel td {
        border: 0;
        padding: 3px 4px;
    }

        .RadGrid_Custom .rgGroupPanel td td {
            padding: 0;
        }

    .RadGrid_Custom .rgGroupPanel .rgSortAsc {
        background-position: 4px -144px;
    }

    .RadGrid_Custom .rgGroupPanel .rgSortDesc {
        background-position: 4px -94px;
    }

.RadGrid_Custom .rgUngroup {
    background-position: 0 -6998px;
}

.RadGrid_Custom .rgGroupItem {
    border: 1px solid;
    border-color: #c4c4c4 #c4c4c4 #9e9e9e;
    padding: 0 2px 1px 3px;
    background: #c6c6c6 0 -6500px repeat-x url('Grid/Custom.gif');
    line-height: 20px;
    font-weight: normal;
    vertical-align: middle;
}

.RadGrid_Custom .rgMasterTable td.rgGroupCol,
.RadGrid_Custom .rgMasterTable td.rgExpandCol {
    border-color: #d9d9d9;
    background: #d9d9d9 none;
}

.RadGrid_Custom .rgGroupHeader {
    background: #d9d9d9;
    font-size: 1.1em;
    line-height: 21px;
    color: #000;
}

    .RadGrid_Custom .rgGroupHeader td {
        border-top: 1px solid #828282;
        border-bottom: 1px solid #d9d9d9;
        padding-top: 0;
        padding-bottom: 0;
    }

        .RadGrid_Custom .rgGroupHeader td.rgGroupCol {
            border-top-color: #828282;
        }

.RadGrid_Custom .rgExpand {
    background-position: 5px -496px;
}

.RadGrid_Custom .rgCollapse {
    background-position: 3px -444px;
}

.RadGrid_Custom .rgGroupHeader td p {
    display: inline;
    margin: 0;
    padding: 0 10px;
}

.RadGrid_Custom .rgGroupHeader td div div {
    top: -0.8em;
    padding: 0 10px;
}

    .RadGrid_Custom .rgGroupHeader td div div div {
        top: 0;
        padding: 0;
        border: 0;
    }

/*editing*/
.RadGrid_Custom .rgEditForm {
    border-bottom: 1px solid #828282;
}

.RadGrid_Custom .rgUpdate {
    background-position: 0 -1800px;
}

.RadGrid_Custom .rgCancel {
    background-position: 2px -1848px;
}

/*hierarchy*/
.RadGrid_Custom .rgDetailTable {
    border: 1px solid #828282;
    border-right: 0;
}

/*command row*/
.RadGrid_Custom .rgCommandRow {
    background: #c5c5c5 0 -2099px repeat-x url('Grid/Custom.gif');
    color: #000;
}

    .RadGrid_Custom .rgCommandRow td {
        border: 1px solid;
        border-color: #999 #f2f2f2;
        border-top: 0;
        padding: 0;
    }

.RadGrid_Custom tfoot .rgCommandRow td {
    border-top: 1px solid;
    border-bottom: 0;
}

.RadGrid_Custom tr.rgCommandRow td td {
    border: 0;
    padding: 3px 7px 4px;
}

    .RadGrid_Custom tr.rgCommandRow td td td {
        padding: 1px;
    }

.RadGrid_Custom .rgCommandRow table {
    border: 0;
    border-top: 1px solid #fdfdfd;
    border-bottom: 1px solid #e7e7e7;
}

    .RadGrid_Custom .rgCommandRow table table {
        border: 0;
    }

.RadGrid_Custom .rgCommandRow a {
    color: #000;
    text-decoration: none;
}

.RadGrid_Custom .rgAdd {
    margin-right: 3px;
    background-position: 0 -1650px;
}

.RadGrid_Custom .rgRefresh {
    margin-right: 3px;
    background-position: 0 -1600px;
}

.RadGrid_Custom .rgEdit {
    background-position: 0 -1700px;
}

.RadGrid_Custom .rgDel {
    background-position: 0 -1750px;
}

/*multirow select*/
.GridRowSelector_Custom {
    background: #4c4e54;
}

/*row drag n drop*/
.GridItemDropIndicator_Custom {
    border-top: 1px dashed #666;
}

/*tooltip*/
.GridToolTip_Custom {
    border: 1px solid #828282;
    padding: 3px;
    background: #fff;
    color: #333;
}

/*rtl*/
.RadGridRTL_Custom .rgHeader,
.RadGridRTL_Custom .rgResizeCol {
    text-align: right;
}

.RadGridRTL_Custom .rgPager .rgStatus {
    border-right: 0;
    border-left-width: 1px;
}

.RadGridRTL_Custom .rgWrap {
    float: right;
}

.RadGridRTL_Custom .rgInfoPart {
    float: left;
}

.RadGridRTL_Custom .rgNumPart {
    width: 220px;
}

    .RadGridRTL_Custom .rgNumPart a {
        float: right;
    }

.RadGridRTL_Custom .rgDetailTable {
    border-right: 1px solid;
    border-left: 0;
}