@import url("RadControls/Calendar.Custom.css");
@import url("RadControls/Calendar.Revenue.css");
@import url("RadControls/Calendar.RevenueNew.css");
@import url("RadControls/Grid.Custom.css");
@import url("RadControls/Treeview.Default.css");
@import url("../../Content/font-awesome.css");

/* 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 */
/* #region Reset
================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: inherit;
    font: inherit;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
    border-style: none;
}

img {
    border: 0;
}

/* #endregion */
/* #region Typography
================================================== */
@font-face {
    font-family: 'spark-icon-line';
    font-style: normal;
    font-weight: normal;
    src: local('spark-icon-line'), url('../../Content/spark/fonts/spark/spark-icon-line.eot?#iefix') format('embedded-opentype'), url('../../Content/spark/fonts/spark/spark-icon-line.svg#spark-icon-line') format('svg'), url('../../Content/spark/fonts/spark/spark-icon-line.ttf') format('truetype'), url('../../Content/spark/fonts/spark/spark-icon-line.woff') format('woff'), url('../../Content/spark/fonts/spark/spark-icon-line.woff2') format('woff2');
}

@font-face {
    font-family: 'spark-icon-fill';
    font-style: normal;
    font-weight: normal;
    src: local('spark-icon-fill'), url('../../Content/spark/fonts/spark/spark-icon-fill.eot?#iefix') format('embedded-opentype'), url('../../Content/spark/fonts/spark/spark-icon-line.svg#spark-icon-line') format('svg'), url('../../Content/spark/fonts/spark/spark-icon-fill.ttf') format('truetype'), url('../../Content/spark/fonts/spark/spark-icon-fill.woff') format('woff'), url('../../Content/spark/fonts/spark/spark-icon-fill.woff2') format('woff2');
}

/* #endregion */
/* #region Basic Styles
----------------------------------------------------------*/
html {
    height: 100%;
    overflow: hidden;
    font-size: var(--fontSize);
}

body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: var(--backgroundMediumGray);
}

    body.popupmodal {
        background: var(--backgroundWhite);
    }

body, .bodyText {
    font-family: var(--fontFamily);
    font-weight: var(--fontWeightNormal);
    line-height: var(--lineHeight);
    color: var(--textColor);
}

a, a:visited {
    color: var(--textColorLink);
    text-decoration: underline;
    cursor: pointer;
    -webkit-transition: 1s ease;
    -moz-transition: 1s ease;
    -o-transition: 1s ease;
    transition: 1s ease;
}

    a:hover, .linkPopUp:hover {
        color: var(--textColorLinkHover);
    }

    a:active, .linkPopUp:active {
        color: var(--textColorLinkActive);
    }

.linkPopUp {
    font-weight: var(--fontWeightBold);
    font-size: var(--fontSizeSmall)
}

.label {
    font-weight: var(--fontWeightBold);
    font-size: var(--fontSizeSmall);
}

.FieldSizeLimit {
    color: var(--textColorLight);
    font-style: italic;
    font-size: var(--fontSizeSmall);
}

.SelectButton {
    padding: .1875rem .375rem;
    text-align: center;
    color: var(--textColorAction);
}

td.SelectButton {
    padding: .75rem 1rem
}

.nullSize {
    display: none;
}

.paddingRt10 {
    padding-right: .75rem;
}

.posRelative {
    position: relative;
}

.btnBar {
    width: auto;
    white-space: nowrap;
    vertical-align: middle;
    text-align: left;
}

.dtTextBox {
    width: 75px;
}

ul.NoBullets {
    display: list-item;
    list-style-type: none;
    padding: .1875rem 0 0 .1875rem;
    margin-left: .1875rem;
}

.refreshLabel {
    padding: .375rem 0 0;
    display: inline-block;
}

.clear {
    clear: both;
}

.emailed {
    color: var(--textColorBlue);
}

.events {
    color: var(--textColorViolet);
}

.queued {
    color: var(--textColorSuccess);
}

.delivered {
    color: var(--textColorBlue);
}

/* #endregion */
/* #region Forms
================================================== */
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
    background: var(--inputBackground);
    border: var(--inputBorder);
    color: var(--inputTexColor);
    border-radius: var(--inputBorderRadius);
    font-family: var(--inputFontFamily);
    font-size: var(--inputFontSize);
    font-weight: var(--inputFontWeight);
    max-width: 100%;
    min-width: calc(1.5rem + 50px);
    padding: .375rem .75rem;
    margin: .375rem .1875rem;
    vertical-align: middle;
    box-sizing: content-box;
    min-height: calc(var(--inputFontSize) + 0.75rem);
}

    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="email"]:focus,
    textarea:focus,
    select:focus {
        background: var(--inputBackgroundFocus);
        border: var(--inputBorderFocus);
        color: var(--inputTexColorFocus);
        outline: 0;
    }

option {
    padding: .375rem .1875rem;
}

    option:empty {
        display: none;
    }

input[type="checkbox"] {
    height: 20px !important;
    width: 20px !important;
    vertical-align: middle !important;
}

input[type="radio"] {
    height: 20px !important;
    width: 20px !important;
    vertical-align: middle !important;
}

.checkbox, .radio {
    margin-right: .1875rem;
}

/* #endregion */
/* #region Buttons
================================================== */
input[type="submit"],
input[type="reset"],
input[type="button"],
.button a {
    background: var(--buttonBackground);
    border: var(--buttonBorder);
    border-bottom-width: var(--buttonBorderBottomWidth);
    border-radius: var(--buttonBorderRadius);
    color: var(--buttonTextColor);
    font-size: var(--buttonFontSize);
    font-family: var(--buttonFontFamily);
    line-height: var(--buttonLineHeight);
    font-weight: var(--buttonFontWeight);
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    padding: .375rem .75rem;
    -webkit-transition: 1s ease;
    -moz-transition: 1s ease;
    -o-transition: 1s ease;
    transition: 1s ease;
    vertical-align: middle;
    cursor: pointer;
    margin: .375rem .1875rem;
}

    input[type="submit"]:hover,
    input[type="reset"]:hover,
    input[type="button"]:hover,
    .button a:hover {
        color: var(--buttonTextColorHover);
        background: var(--buttonBackgroundHover);
        border-color: var(--buttonBorderHoverColor);
    }

    input[type="submit"]:active,
    input[type="reset"]:active,
    input[type="button"]:active,
    .button a:active {
        color: var(--buttonTextColorActive);
        background: var(--buttonBackgroundActive);
        border-color: var(--buttonBorderActiveColor);
    }

    input[type="submit"]:focus,
    input[type="reset"]:focus,
    input[type="button"]:focus,
    .button a:focus {
        box-shadow: 0 0 0 2px var(--backgroundWhite), 0 0 0 6px var(--buttonFocusShadowColor);
        outline: 0;
    }

    input[type="submit"].ButtonHide {
        display: none;
    }

.disabled_submit {
    background: #eee !important;
    border-color: #eee !important;
    color: #898989 !important;
}

.ui-edit-button {
    font-family: 'spark-icon-line';
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    font-size: 20px;
    color: var(--iconColor);
    cursor: pointer;
    margin-left: .1875rem;
}

    .ui-edit-button::before {
        content: '\f14c';
    }


span[id*="AttributeMaskButton"],
span[id*="AttributeCloseButton"] {
    font-family: 'spark-icon-fill';
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    font-size: 20px;
    color: var(--iconColor);
    cursor: pointer;
    margin-left: .1875rem;
}

span[id*="AttributeCloseButton"] {
    font-size: 15px;
}

    span[id*="AttributeMaskButton"].fa-eye::before {
        content: '\f14b';
    }

    span[id*="AttributeMaskButton"].fa-eye-slash::before {
        content: '\f14a';
    }

    span[id*="AttributeCloseButton"]::before {
        content: '\f123';
    }

/* #endregion */
/* #region Content Container Styles
----------------------------------------------------------*/
#Container {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    background-color: var(--backgroundMediumGray);
}

#ContentContainer {
    width: auto !important;
    height: auto !important;
    overflow: auto;
    flex-grow: 1;
}

#ContentBuffer {
    background: var(--backgroundWhite);
    border: 1px solid var(--borderMediumGray);
    border-radius: var(--borderRadius);
    margin: 1rem 2% 2rem;
    padding: 1.5rem;
}

#LoadingPageDiv {
    margin: 0 2%;
    font-size: var(--fontSize) !important;
    font-weight: var(--fontWeightBold) !important;
    padding: 2rem 1rem;
}

    #LoadingPageDiv span {
        font-size: var(--fontSize) !important;
        font-weight: var(--fontWeightBold) !important;
        padding: 2rem 1rem;
    }

/* #endregion */
/* #region RadComboBox Styles
----------------------------------------------------------*/
.RadComboBox {
    width: 20em !important;
}

.RadComboBox .rcbInput {
    opacity: 1 !important;
    color: var(--inputTextColor) !important;
    font-weight: 400 !important;
    font-size: var(--inputFontSize) !important;
    font-family: var(--inputFontFamily) !important;
    font-style: normal !important;
}

.RadComboBox_Default .rcbReadOnly {
    background-color: transparent !important;
    background-image: none !important;
}

.RadComboBox_Default .rcbReadOnly.rcbFocused, .RadComboBox_Default .rcbReadOnly.rcbExpanded {
    color: var(--inputTexColorFocus) !important;
}

input[type="text"].rcbInput:focus {
    background: none !important;
    border: none !important;
    color: var(--inputTexColorFocus) !important;
    outline: none !important;
}

.rcbInner.rcbReadOnly, .RadComboBoxDropDown.RadComboBoxDropDown_Default {
    border: var(--inputBorder) !important;
}
/* #endregion */
/* #region Toolbar Styles
----------------------------------------------------------*/
#ToolBarContainer {
    flex-grow: 0;
}

#InfoPanelToolbarContainer, #PopupToolBarContainer {
    display: flex;
    flex-direction: column;
}

    #InfoPanelToolbarContainer div:first-child, #PopupToolBarContainer div:first-child {
        order: 2;
    }

    #InfoPanelToolbarContainer #PageHeadContainer, #PopupToolBarContainer #PageHeadContainer {
        margin-bottom: 0;
    }

#ToolBarAccentImg {
    display: none
}

ul#ToolBar, ul#InfoPanelToolBar, ul#PopupToolBar {
    list-style: none;
    padding: .375rem 0;
    margin: 0 2%;
    display: inline-block;
}

ul#InfoPanelToolBar, ul#PopupToolBar {
    order: 1;
}

    ul#ToolBar li, ul#InfoPanelToolBar li, ul#PopupToolBar li {
        display: inline-block;
        border-right: 1px solid var(--borderLightGray);
        padding: 0 .75rem;
        list-style: none;
    }

        ul#ToolBar li:last-child, ul#InfoPanelToolBar li:last-child, ul#PopupToolBar li:last-child {
            border-right: none;
            padding-right: 0
        }

.ToolBarItem, .ToolBarItemOver {
    display: inline-block;
    color: var(--iconColor, #4A5767);
    cursor: pointer;
    text-transform: uppercase;
}

    .ToolBarItem:focus {
        outline: 3px solid var(--iconColor);
        outline-offset: 2px;
    }

.ToolBarIcon {
    border: 0;
    vertical-align: text-bottom;
}

#HelpButtonContainer {
    position: relative;
    top: 0;
    right: 2%;
    float: right;
    padding: .375rem;
    color: var(--iconColor);
}

#PreferencesButtonContainer {
    position: relative;
    top: 0;
    right: 2%;
    float: right;
    padding: .375rem;
    color: var(--iconColor);
}

.InfoPanelToolBar, .PopupToolbar {
    margin: 0 2%;
    padding: 0.375rem 0;
    order: 3;
    text-align: right;
}

    .InfoPanelToolBar span, .PopupToolbar span {
        right: 0 !important;
        top: 0 !important;
        color: var(--textColor) !important;
    }

        .PopupToolbar span.fieldLabel, .PopupToolbar span.fieldLabel_50, .PopupToolbar span.fieldLabel_75,
        .PopupToolbar span.fieldLabel_100, .PopupToolbar span.fieldLabel_125, .PopupToolbar span.fieldLabel_150,
        .PopupToolbar span.fieldLabel_175, .PopupToolbar span.fieldLabel_200, .PopupToolbar span.fieldLabel_225 {
            display: inline;
            float: none;
        }

/* #endregion */
/* #region Page/Section Header Styles
----------------------------------------------------------*/
[id*='PageHeaderWrapperDiv'] {
    flex-grow: 0;
}

#PageHeadContainer {
    border-radius: var(--borderRadius);
    margin: 0 2% 1rem;
    padding: 1rem 0;
    width: auto !important;
}

.PageHeaderImage {
    display: none;
}

#PageBreadcrumb {
    font-size: var(--fontSizeSmall);
}

#PageHeadContainer #PageHeader {
    font-family: var(--fontFamilyHeadings);
    font-size: var(--fontSizeHeadingXLarge);
    line-height: var(--lineHeightHeading);
    color: var(--textColorHeading);
    font-weight: var(--fontWeightLight);
    margin: .1875rem 0 0;
    display: flex;
    justify-content: space-between;
}

#PageInstructions {
    color: var(--textColorLight);
    padding: .1875rem 0 0 0;
    font-weight: var(--fontWeightLight);
}

.SectionHeadContainer {
    cursor: pointer;
}

    .SectionHeadContainer td:first-child img {
        margin-right: .375rem;
    }

    .SectionHeadContainer td:last-child img {
        margin-left: .375rem;
    }

.SectionHeadCustomContainer {
    cursor: pointer;
    clear: both;
    padding: 0 0 .1875rem 1rem;
}

.SubSubSubSectionHeadContainer {
    cursor: pointer;
}

    .SectionHeadContainer img, .SubSubSubSectionHeadContainer img, .SectionHeadCustomContainer img {
        height: 20px !important;
        width: 20px !important;
        vertical-align: middle;
    }

    .SectionHeadContainer th:first-child img, .SubSubSubSectionHeadContainer th:first-child img,
    .SectionHeadContainer td:first-child img, .SubSubSubSectionHeadContainer th:first-child img,
    .SectionHeadCustomContainer td:first-child img, .SectionHeadCustomContainer th:first-child img {
        margin-right: .375rem;
    }

    .SectionHeadContainer th:last-child img, .SubSubSubSectionHeadContainer th:last-child img,
    .SectionHeadContainer td:last-child img, .SubSubSubSectionHeadContainer td:last-child img,
    .SectionHeadCustomContainer td:last-child img, .SectionHeadCustomContainer td:last-child img {
        margin-left: .375rem;
    }

.SectionHeader {
    font-family: var(--fontFamilyHeadings);
    font-size: var(--fontSizeLarge);
    line-height: var(--lineHeightHeading);
    font-weight: var(--fontWeightLight);
    color: var(--textColorHeading);
    padding: 0 0 0 .1875rem;
}

div.SectionHeader {
    margin: .375rem !important
}

.SubSectionHeader {
    font-family: var(--fontFamilyHeadings);
    font-size: var(--fontSizeHeading);
    font-weight: var(--fontWeightBold);
    color: var(--textColorHeading);
    line-height: var(--lineHeightHeading);
    vertical-align: middle;
    position: relative;
}

.SubSectionHeaderNoBorder {
    font-size: var(--fontSizeSmall);
    font-weight: var(--fontWeightBold);
    color: var(--textColorHeading);
    line-height: var(--lineHeightHeading);
    vertical-align: middle;
    margin-bottom: 1rem;
}

.SubSubSectionHeader {
    font-size: var(--fontSizeSmall);
    font-weight: var(--fontWeightBold);
    line-height: var(--lineHeightHeading);
}

.SubSubSubSectionHeader {
    font-size: var(--fontSizeSmall);
    font-weight: var(--fontWeightBold);
    line-height: var(--lineHeightHeading);
}

    .SubSubSubSectionHeader:hover {
        text-decoration: underline;
    }

.SectionInstructions, .SubSectionInstructions, .SubSubSectionInstructions, .SubSubSubSectionInstructions {
    color: var(--textColorLight);
    font-size: var(--fontSizeSmall);
}

    .SectionInstructions:empty, .SubSectionInstructions:empty, .SubSubSectionInstructions:empty, .SubSubSubSectionInstructions:empty {
        display: none;
    }

.AccessPointSectionClass {
    padding: .75rem .75rem .75rem 2rem
}

.SectionHeaderDiv {
    margin-left: 1.5rem;
}

.BottomBorderOnly {
    border-bottom: 1px solid var(--borderLightGray);
}

/* #endregion */
/* #region Popup Container Styles
----------------------------------------------------------*/
.ui-widget-content {
    z-index: 99991 !important
}

.ui-widget-overlay {
    z-index: 99990 !important;
}

.ui-dialog {
    padding: 0;
}

div.ui-dialog-content.ui-widget-content {
    height: auto !important;
    max-height: 80vh !important
}

    .no-close .ui-dialog-titlebar-close {
        display: none;
    }

.popupmodal > form {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
}

#PopupContentContainer, #InfoPanelContentContainer {
    overflow: auto;
    flex-grow: 1
}

#PopupContentBuffer, #InfoPanelContentBuffer {
    margin: 1px 2%;
}

/* Progress bar style from the Succes Floating Messages */
.ui-progressbar {
    background: var(--backgroundWhite);
    background-image: linear-gradient(to bottom, var(--backgroundWhite) 0%, var(--backgroundLightGray) 100%);
}

    .ui-progressbar .ui-progressbar-value {
        background: var(--backgroundSucess);
    }

/* #endregion */
/* #region Tab and Tree Styles
----------------------------------------------------------*/
div.tabDiv {
    position: relative;
    z-index: 2;
    margin-bottom: -1px;
    display: inline-block;
}

a.tabon, a.taboff {
    background: var(--backgroundLightGray);
    color: var(--textColorLight);
    border: 1px solid var(--borderLightGray);
    border-bottom: 1px solid var(--borderMediumGray);
    float: left;
    display: inline-block !important;
    padding: 0.75rem;
    text-align: center;
    text-decoration: none;
    vertical-align: bottom !important;
    margin: 2px 0 0;
    min-width: 10rem;
}

a.tabon {
    background: var(--backgroundWhite);
    color: var(--textColor);
    border: 1px solid var(--borderMediumGray) !important;
    border-bottom: 1px solid var(--backgroundWhite) !important;
    border-radius: var(--borderRadius) var(--borderRadius) 0 0;
    padding-top: calc(0.75rem + 2px);
    margin: 0;
}

.TabWithTreeviewContainer, .treeContainer {
    z-index: 1;
    border: 1px solid var(--borderMediumGray);
    height: auto;
    padding: 1rem;
    vertical-align: top;
    position: relative;
}

.TabWithTreeviewContainer {
    overflow: auto;
    clear: both;
}

.treeContainer {
    width: 275px;
}

#configurationTable .treeContainer {
    width: auto;
}

.RadTabStrip .rtsPrevArrow, .RadTabStrip .rtsNextArrow, .RadTabStrip .rtsPrevArrowDisabled, .RadTabStrip .rtsNextArrowDisabled, .RadTabStripVertical .rtsPrevArrow, .RadTabStripVertical .rtsNextArrow, .RadTabStripVertical .rtsPrevArrowDisabled, .RadTabStripVertical .rtsNextArrowDisabled {
    margin: .375rem 0 0 0 !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 1 !important;
}

.RadTabStrip .rtsLink, .RadTabStripVertical .rtsLink {
    padding-left: .75rem !important;
}

.RadTabStrip .rtsOut, .RadTabStripVertical .rtsOut {
    padding-right: .75rem !important;
}

.RadTabStrip .rtsIn, .RadTabStripVertical .rtsIn {
    padding: 0 .375rem !important;
}

.RadTabStrip .rtsLevel1 .rtsTxt, .RadTabStripVertical .rtsLevel1 .rtsTxt {
    padding: 0 .375rem !important;
}

.RadTabStrip a.rtsLink:focus, .RadTabStripVertical a.rtsLink:focus {
    outline: 2px solid currentColor !important;
}

    .RadTabStrip a.rtsLink:focus:after, .RadTabStripVertical a.rtsLink:focus:after {
        border: 2px solid currentColor !important;
    }

.RadTabStrip .rtsSeparator, .RadTabStripVertical .rtsSeparator,
.RadTabStrip .rtsScroll,
.RadTabStrip .rtsSeparator {
    height: 1.5rem !important;
}

.RadTabStrip_Vista {
    color: var(--textColor) !important;
    font: var(--fontSizeSmall) var(--fontFamily) !important;
    line-height: var(--lineHeight) !important;
}

    .RadTabStrip_Vista .rtsGhostTab {
        border-color: var(--borderMediumGray) !important;
        border-radius: var(--borderRadius) !important;
        color: var(--textColor) !important;
        background-color: var(--backgroundLightGray) !important
    }

    .RadTabStrip_Vista .rtsLI, .RadTabStrip_Vista .rtsLink {
        color: var(--textColor) !important;
        font: var(--fontSizeSmall)/var(--lineHeight) var(--fontFamily) !important;
    }

    .RadTabStrip_Vista .rtsDisabled {
        color: var(--textColorLighter) !important;
    }

    .RadTabStrip_Vista .rtsLevel .rtsLink,
    .RadTabStrip_Vista .rtsLevel .rtsLI .rtsLink {
        background: var(--backgroundLightGray) !important;
        color: var(--textColorLight) !important;
        border: 1px solid var(--borderLightGray) !important;
        border-bottom: 1px solid var(--borderMediumGray) !important;
        padding: 0.75rem !important;
        text-align: center !important;
        text-decoration: none !important;
        vertical-align: bottom !important;
        margin: 2px 0 0 !important;
    }

        .RadTabStrip_Vista .rtsLevel .rtsLink.rtsSelected,
        .RadTabStrip_Vista .rtsLevel .rtsSelected .rtsLink {
            background: var(--backgroundWhite) !important;
            color: var(--textColor) !important;
            border: 1px solid var(--borderMediumGray) !important;
            border-bottom: 1px solid var(--backgroundWhite) !important;
            border-radius: var(--borderRadius) var(--borderRadius) 0 0 !important;
            padding-top: calc(0.75rem + 2px) !important;
            margin: 0 !important;
        }

    .RadTabStrip_Vista .rtsLevel .rtsOut {
        background: transparent !important
    }

.RadMultiPage {
    border: 1px solid var(--borderMediumGray);
    margin-top: -1px;
    padding: 1rem 1.5rem;
    width: auto !important;
}

    .RadMultiPage::after {
        display: table;
        clear: both;
        content: "";
    }

/* #endregion */
/* #region Accessory Panel, Image Selector, Parms Table Styles
----------------------------------------------------------*/
.accPanel {
    background: var(--backgroundWhite);
    border: 1px solid var(--borderLightGray);
    text-align: left;
    margin-bottom: 1rem
}

table.accPanel th {
    vertical-align: top;
    padding: .375rem .75rem;
    background: var(--backgroundLightGray);
}

    table.accPanel th img {
        vertical-align: middle;
        margin-right: .1875rem;
    }

table.accPanel td {
    vertical-align: middle;
    text-align: left !important;
    padding: .375rem .75rem;
}

table.accPanel th.actionBtn {
    width: 100px;
    text-align: left;
}

/* #endregion */
/* #region Float Panel Style
----------------------------------------------------------*/
.FloatPanel {
    position: absolute;
    z-index: 3;
    border: 1px solid var(--borderMediumGray);
    background: var(--backgroundWhite);
    padding: 1rem;
}

.FloatPanelShadow {
    position: absolute;
    z-index: 2;
    background: var(--backgroundDark1);
    filter: alpha(opacity=25);
    -moz-opacity: .25;
    opacity: .25;
}

/* #endregion */
/* #region Rate Assignment Styles
----------------------------------------------------------*/
.TableSectionRow {
    background: var(--backgroundMediumGray);
    font-weight: var(--fontWeightBold);
    border: 1px solid var(--borderLightGray);
    border-top: 0;
}

    .TableSectionRow td {
        padding: .75rem 1rem;
    }

.DefaultLabel {
    font-weight: var(--fontWeightBold);
    font-style: italic;
}

/* #endregion */
/* #region Report Styles
----------------------------------------------------------*/
.ReportViewer {
    display: table !important;
}

.ReportSuscription .dataList_head td {
    white-space: nowrap;
}

.ReportSuscription span.fieldLabel {
    display: inline;
    float: none;
    line-height: normal;
}

.ReportSuscription input {
    margin: .1875rem 0 .1875rem 0;
}

/* #endregion */
/* #region GDS Load Styles
----------------------------------------------------------*/
.Container_15 {
    width: 100%;
    margin-bottom: 1rem;
    border: 0;
}

/* #endregion */
/* #region Shopping Cart Styles
----------------------------------------------------------*/
.ShoppingCartTableHeaderRow {
    background: var(--backgroundMediumGray);
}

.ShoppingCartTableHeaderCell {
    background: var(--backgroundMediumGray);
    font-weight: var(--fontWeightBold);
    font-size: var(--fontSizeSmall);
}

.ShoppingCartHeader {
    font-family: var(--fontFamily);
    font-size: var(--fontSizeSmall);
    font-weight: var(--fontWeightBold);
    color: var(--textColor);
    background: var(--backgroundWhite);
    border: 1px solid var(--backgroundMediumGray);
    border-width: 0 1px 1px 0;
    padding: .1875rem;
}

/* #endregion */
/* #region jQuery Message Styles
----------------------------------------------------------*/
.jquery-message {
    background: var(--backgroundDark1);
    border-radius: var(--borderRadius);
    position: absolute;
    top: 120px;
    left: 25%;
    width: 50%;
    text-align: center;
    display: none;
    opacity: 0;
    z-index: 100000;
}

    .jquery-message p {
        color: var(--textColorDarkBg);
        font-weight: var(--fontWeightBold);
        padding: .75rem 1rem;
        display: block;
    }

    .jquery-message a {
        display: none;
    }

/* #endregion */
/* #region general text styles
----------------------------------------------------------*/
.dataLabel {
    float: left;
}

.fieldLabel, .fieldLabel_50, .fieldLabel_75, .fieldLabel_100, .fieldLabel_125,
.fieldLabel_150, .fieldLabel_175, .fieldLabel_200, .fieldLabel_225 {
    padding: .375rem 0;
    vertical-align: text-bottom;
    text-align: left;
}

.fieldLabel {
    padding: .1875rem 0;
    vertical-align: middle;
}

span.fieldLabel, span.fieldLabel_50, span.fieldLabel_75, span.fieldLabel_100,
span.fieldLabel_125, span.fieldLabel_150, span.fieldLabel_175, span.fieldLabel_200,
span.fieldLabel_225 {
    display: block;
    float: left;
    text-wrap: wrap;
}

.fieldLabel_50 {
    width: 50px;
}

.fieldLabel_75 {
    width: 75px;
}

.fieldLabel_100 {
    width: 100px;
}

.fieldLabel_125 {
    width: 125px;
}

.fieldLabel_150 {
    width: 150px;
}

.fieldLabel_175 {
    width: 175px;
}

.fieldLabel_200 {
    width: 200px;
}

.fieldLabel_225 {
    width: 225px;
}

.fieldLabelValue {
    font-weight: normal;
}

.bodyText_italic {
    font-style: italic;
    vertical-align: top;
}

.bodyText_gray {
    color: var(--textColorLight);
}

.bodyText_darkGray {
    color: var(--textColorLighter);
}

.bodyText_red {
    color: var(--textColorError);
}

.empty-records {
    font-weight: var(--fontWeightBold);
    color: var(--textColorLighter);
}

.header, .header_bold, .header_col {
    font-family: var(--fontFamily);
    font-size: var(--fontSizeSmall);
    color: var(--textColor);
    font-weight: var(--fontWeightNormal);
}

.header_bold {
    padding-top: .375rem;
    font-weight: var(--fontWeightBold);
}

.userInfoLabel {
    font-size: 1rem;
    font-weight: var(--fontWeightBold);
    color: var(--textColorSuccess);
}

.DenyBg {
    background: var(--backgroundHighlightError);
}

.iCEWaterMark {
    background: #FFF url(../../images/iceportal.png);
    width: 16px;
    height: 16px;
    position: absolute;
    left: 47%;
    bottom: 6px;
}

.disabledButton {
    background: #eee !important;
    border: 1px solid #eee !important;
    color: #898989 !important;
    cursor: not-allowed !important;
}

th {
    text-align: left;
}
/* #endregion */
/* #region controls
----------------------------------------------------------*/
span.dataList_head, .dataList_head td, .dataList_head th, .dataList_Item th, .dataList_item th, .dataList_alternateItem th, .dataList_highlightItem th {
    background: var(--backgroundWhite);
    border: 1px solid var(--borderDark);
    font-size: var(--fontSizeSmall);
    font-weight: var(--fontWeightBold);
    padding: .375rem .15rem;
    text-transform: uppercase;
    border-width: 0px 0px 1px 0px;
    border-bottom-color: var(--borderLightGray) !important;
}

span.dataList_head .ToolBarItem, .dataList_head td .ToolBarItem, .dataList_head th .ToolBarItem, .dataList_Item th .ToolBarItem, .dataList_item th .ToolBarItem, .dataList_alternateItem th .ToolBarItem, .dataList_highlightItem th .ToolBarItem,
span.dataList_head .ToolBarItemOver, .dataList_head td .ToolBarItemOver, .dataList_head th .ToolBarItemOver, .dataList_Item th .ToolBarItemOver, .dataList_item th .ToolBarItemOver, .dataList_alternateItem th .ToolBarItemOver, .dataList_highlightItem th .ToolBarItemOver 
{
    color: var(--textColorDarkBg);
}

.dataList_head th {
    text-align: left;
}

.dataList_head .ToolBarItem, .dataList_head .ToolBarItemOver {
    color: var(--textColorDarkBg);
}

.dataList_head th a, .dataList_head td a {
    font-size: inherit;
    font-weight: var(--fontWeightBold);
    color: inherit;
}

.dataList_alternateItem th {
    background: var(--backgroundDark1);
    border: 1px solid var(--borderDark);
    color: var(--textColorDarkBg);
}

.dataList_highlightItem th {
    background: var(--backgroundLightGray);
}

.dataList_Item, .dataList_item, .dataList_alternateItem, .dataList_highlightItem {
    background: var(--backgroundWhite);
    border-bottom: 1px solid var(--borderLightGray);
    border-top: 0;
    text-align: left;
}

    div.dataList_Item, div.dataList_item, div.dataList_alternateItem, div.dataList_highlightItem, .dataList_Item td, .dataList_item td, .dataList_alternateItem td, .dataList_highlightItem td {
        padding: .375rem .75rem;
    }

.dataList_highlightItem, div.dataList_highlightItem {
    background: var(--backgroundHighlight);
}

.dataList_subTable th {
    color: var(--textColor);
    border-right: 1px solid var(--borderLightGray);
    border-collapse: collapse;
}

td.dataList_head span, td.dataList_Item span, td.dataList_item span, td.dataList_alternateItem span {
    display: inline-block;
}

.dataList_head table, .dataList_item table, .dataList_item table, .dataList_alternateItem table, .dataList_highlightItem table {
    width: 100%
}

div.gridRow {
    display: block;
    overflow: hidden;
    clear: both;
}

.gridRow_even {
    border-top: 1px solid var(--borderLightGray);
    border-bottom: 1px solid var(--borderLightGray);
}

#ImagesContainer td {
    vertical-align: top;
    text-align: left;
}

/* Room Allocation table */
.Rows {
    line-height: var(--lineHeight) !important;
    padding: .75rem .375rem;
}

.OddRow {
    background-color: var(--backgroundLightGray) !important;
}

.bodyText .TextLeft input {
    line-height: var(--lineHeight) !important;
    font-size: var(--fontSize) !important;
    padding: .375rem !important;
    margin-top: calc(-.375rem - 1px);
    margin-bottom: calc(-.375rem - 1px);
}

.bodyText .TextLeft input[type="button"] {
    padding: .1875rem .75rem !important
}

#RoomAllocationTable .fieldLabel,
#RoomAllocationTable .bodyText_bold {
    padding: .375rem !important;
    height: 3rem !important
}
/* #endregion */
/* #region sortable datalist
----------------------------------------------------------*/
table.dataList {
    box-shadow: 0 1px 12px 0 rgba(18, 19, 21, .08);
}
table.dataList_sortable {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

    table.dataList_sortable thead tr .header {
        cursor: pointer;
    }

    table.dataList_sortable thead tr th, table.dataList_sortable tfoot tr th {
        padding: .1875rem 30px .1875rem .75rem;
    }

    table.dataList_sortable thead tr .headerSortDown, table.dataList_sortable thead tr .headerSortUp {
        background-color: #dfdfdf;
        color: var(--textColor);
        position: relative;
        padding-right: 30px;
    }

        table.dataList_sortable thead tr .headerSortUp::after,
        table.dataList_sortable thead tr .headerSortDown::after {
            content: "";
            background: currentColor;
            width: 10px;
            height: 10px;
            vertical-align: middle;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 10px;
            mask-size: contain;
            -webkit-mask-size: contain;
            mask-repeat: no-repeat;
            -webkit-mask-repeat: no-repeat;
            display: block;
        }

        table.dataList_sortable thead tr .headerSortUp::after {
            mask-image: url(../../Images/icon_triangle_up.svg);
            -webkit-mask-image: url(../../Images/icon_triangle_up.svg);
        }

        table.dataList_sortable thead tr .headerSortDown::after {
            mask-image: url(../../Images/icon_triangle_down.svg);
            -webkit-mask-image: url(../../Images/icon_triangle_down.svg);
        }

    table.dataList_sortable tbody tr.dataList_item th a {
        font-weight: var(--fontWeightBold);
        color: inherit;
    }

    table.dataList_sortable tbody td {
        white-space: nowrap
    }

.pager {
    background: var(--backgroundWhite);
}

.pager td {
    padding: .75rem 1.5rem;
    text-align: left;
}



/* #endregion */
/* #region Revenue Management
----------------------------------------------------------*/
.RevenueHeader {
    margin: .375rem 0 .375rem 1.5rem;
    font-size: var(--fontSizeLarge);
    font-weight: var(--fontWeightBold);
    color: var(--textColorHeading);
    white-space: nowrap;
}

.RevenueLabel {
    font-size: var(--fontSizeSmall);
    font-weight: var(--fontWeightBold);
    color: var(--textColor);
    padding: 0 0 .75rem 0;
}

.RevenueWarning {
    clear: left;
    float: left;
    margin-top: 1rem;
    white-space: nowrap;
    color: var(--textColorError);
}

.RevenueTab {
    float: left;
    border: 1px solid var(--borderMediumGray);
    padding: 1rem;
    margin-top: -1px;
}

[id*='CalLegendPanel'] > div {
    margin: 0 !important;
    padding: 1rem 0 !important;
    max-width: 500px !important;
    width: 100% !important;
    text-align: center !important;
}

    [id*='CalLegendPanel'] > div > div {
        width: auto !important;
        padding: 0 0.75rem !important;
        float: none !important;
        display: inline-block;
    }

.LegendCurrentDay {
    background: var(--backgroundDarkGray) !important;
    float: none !important;
    display: inline-block;
}

.LegendSelectedDay {
    background: var(--dataBlueBackground) !important;
    float: none !important;
    display: inline-block;
}

.LegendEvent {
    background: var(--dataGreenBackground) !important;
    float: none !important;
    display: inline-block;
}

[id*='CalLegendPanel'] > div > div > img {
    float: none !important;
    display: inline-block;
}

.LegendLabel {
    font-size: var(--fontSizeSmall);
    color: var(--textColorLight);
    white-space: nowrap;
    padding-left: .375rem;
}

.Asterix {
    color: var(--textColorError);
}

table#CompDataTable tbody tr {
    border: 1px solid var(--borderLightGray);
    border-top: 0;
}

table#CompDataTable tbody td {
    padding: .1875rem .75rem
}

table#CompDataLegend {
    margin-top: .75rem !important
}

    table#CompDataLegend td, table#CompDataLegend td span {
        padding: .375rem !important;
    }

.priceLow {
    background: var(--dataBlueBackground);
    color: var(--dataBlueText);
}

.priceHigh {
    background: var(--dataOrangeBackground);
    color: var(--dataOrangeText);
}

.priceAlert {
    background: var(--dataRedBackground);
    color: var(--dataRedText);
}

/* #endregion */
/* #region Exceptions
----------------------------------------------------------*/
/*
 * Style used by the label output mode.
 * Applied to the error labels that get positioned after an input.
 */
label.error {
    color: var(--textColorError);
    margin-left: .1875rem;
    padding: .1875rem;
}

/*
 * Styles used by the modal output mode.
 * '.validity-modal-msg' is applied to the modal boxes
 * and '.validity-modal-msg:hover' is applied to suggest
 * to the user that the boxes are clickable.
 */
.validity-modal-msg {
    position: absolute;
    z-index: 2;
    background: var(--backgroundDark1);
    border: 1px solid var(--borderDark);
    color: var(--textColorDarkBg);
    padding: .1875rem;
    cursor: pointer;
}

    .validity-modal-msg:hover {
        background: var(--backgroundDarkGray);
        color: var(--textColor);
    }

/*
 * Styles used by the summary output mode.
 * '.validity-summary-container' is a container on the page that should contain a UL
 * which is the actual summary. The container can hold
 * an extra bit of text (or anything really) that explains what the summary is.
 * '.validity-erroneous' is applied to every input that fails.
 */
.validity-summary-container {
    display: none;
    width: 80%;
}

.validity-summary-output ul {
    padding-left: .75rem;
}

.validity-erroneous {
    border: 1px solid var(--textColorError) !important;
}

.ValidationControl,
div.ValidationControl li,
div.ValidationControl span {
    color: var(--textColorError) !important;
    font-family: var(--fontFamily);
    font-size: var(--fontSizeSmall);
}

.input-validation-error, div.input-validation-error, span.input-validation-error, input.input-validation-error, select.input-validation-error, select.input-validation-error + .ui-multiselect, textarea.input-validation-error {
    border: 1px solid var(--backgroundError);
}

    div.input-validation-error:focus, input.input-validation-error:focus, select.input-validation-error:focus, select.input-validation-error + .ui-multiselect.ui-state-active, textarea.input-validation-error:focus, .ui-widget input.input-validation-error:focus, .ui-spinner.input-validation-error.ui-state-active {
        border: 2px solid var(--textColorError);
    }

    span.input-validation-error input.input-validation-error:focus, div.input-validation-error input.input-validation-error:focus, tr.input-validation-error {
        border: none;
    }

ul.WarningList {
    margin-top: .1875rem;
    margin-bottom: .1875rem;
}

    ul.WarningList li {
        font-size: var(--fontSizeSmall);
    }

.warningTxt {
    font-family: var(--fontFamily);
    font-size: var(--fontSize);
    font-weight: var(--fontWeightLight);
    text-decoration: none;
    color: var(--textColorError);
    padding: .375rem 0;
}

    .warningTxt.important {
        color: var(--textColorError) !important;
    }

input.input-validation-error {
    border-color: var(--textColorError);
}

.validation-gotoerror {
    color: var(--textColorError) !important;
    display: inline-block;
    vertical-align: middle;
    margin-left: .375rem;
}

    .validation-gotoerror::before {
        content: "\f113";
        transform: rotate(90deg);
        font-family: spark-icon-fill;
        display: inline-block;
        width: 16px;
        height: 16px;
    }

.success {
    color: var(--textColorSuccess);
}

.failure, .errors {
    color: var(--textColorError);
    text-decoration: underline;
}

.alerts {
    color: var(--textColorError);
    text-decoration: underline;
}

[id*='WarningImage'], [id*='HotelStatusImage'] {
    color: var(--textColorWarning) !important;
}

[id*='WarningMessageLabel'], [id*='hotelStatus'] {
    color: var(--textColorWarning) !important;
    font-family: var(--fontFamily) !important;
    font-size: var(--fontSizeSmall) !important;
}

/* #endregion */
/* #region Hotel List
----------------------------------------------------------*/
.ChildItem {
    background: var(--backgroundWhite);
    font-style: italic;
}

.ParentItem {
    font-weight: var(--fontWeightBold);
    background: var(--backgroundLightGray);
    border: 1px solid var(--borderDarkGray);
    border-width: 1px 0;
}

.OrphanItem {
    background: var(--backgroundLightGray);
    border: 1px solid var(--borderDarkGray);
    border-width: 1px 0;
}

/* #endregion */
/* #region jquery.ui.ufd Styles
----------------------------------------------------------*/
/**
	ufd 0.5: http://code.google.com/p/ufd/
	This is only the structural base CSS, include 1+ skin CSS files also.
*/
/* master wrapper; emulate select positioning */
.ufd {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    margin: .375rem .1875rem !important;
}

    .ufd,
    .ufd input,
    .ufd button,
    #ufd-container div.list-scroll,
    #ufd-container div.list-wrapper,
    #ufd-container ul,
    #ufd-container li {
        border: 0;
        margin: 0;
        padding: 0;
    }

        .ufd,
        .ufd button,
        #ufd-container div.list-scroll,
        #ufd-container div.list-wrapper,
        #ufd-container ul,
        #ufd-container li {
            overflow: hidden;
        }

            .ufd select,
            #ufd-container .invisible,
            .ufd.invisible {
                display: none;
            }

            .ufd input,
            .ufd button {
                position: relative;
                float: left;
            }

                .ufd button.disabled {
                    cursor: default;
                }

                .ufd input.disabled {
                    background: #eee;
                    color: #898989;
                }

#ufd-container div.list-wrapper {
    position: absolute;
}

#ufd-container ul {
    list-style-type: none;
}

#ufd-container li {
    cursor: pointer;
    display: block;
    white-space: nowrap;
}

.ufd.web20 input {
    background: var(--inputBackground);
    border: var(--inputBorder);
    color: var(--inputTexColor);
    border-radius: var(--inputBorderRadius);
    font-family: var(--inputFontFamily);
    font-size: var(--inputFontSize);
    font-weight: var(--inputFontWeight);
    width: 100% !important;
    padding: .375rem .75rem;
    margin: 0;
    box-sizing: border-box;
    height: auto;
}

    .ufd.web20 input:focus {
        background: var(--inputBackgroundFocus);
        border: var(--inputBorderFocus);
        color: var(--inputTexColorFocus);
        outline: 0;
    }

    .ufd.web20 input.disabled {
        background: #eee;
        color: #898989;
    }

.ufd.web20 button {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    background: var(--buttonBackground);
    border: var(--buttonBorder);
    border-bottom-width: var(--buttonBorderBottomWidth);
    border-radius: var(--buttonBorderRadius);
    color: var(--buttonTextColor);
    font-size: var(--buttonFontSize);
    font-family: var(--buttonFontFamily);
    line-height: var(--buttonLineHeight);
    font-weight: var(--buttonFontWeight);
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    padding: 0 .75rem;
    -webkit-transition: 1s ease;
    -moz-transition: 1s ease;
    -o-transition: 1s ease;
    transition: 1s ease;
    vertical-align: middle;
    cursor: pointer;
    margin: 0;
}

    .ufd.web20 button:hover {
        color: var(--buttonTextColorHover);
        background: var(--buttonBackgroundHover);
        border-color: var(--buttonBorderHoverColor);
    }

    .ufd.web20 button:active {
        color: var(--buttonTextColorActive);
        background: var(--buttonBackgroundActive);
        border-color: var(--buttonBorderActiveColor);
    }

    .ufd.web20 button:focus {
        box-shadow: 0 0 0 2px var(--backgroundWhite), 0 0 0 6px var(--buttonFocusShadowColor);
        outline: 0;
    }

.ufd.web20 .icon {
    font-family: 'spark-icon-fill';
    color: currentColor;
    display: inline-block;
    font-size: 10px;
    vertical-align: middle;
    line-height: 1;
}

    .ufd.web20 .icon::before {
        content: "\F116";
    }

.ufd.web20-focus .icon::before {
    content: "\F119";
}

#ufd-container .web20 div.list-scroll {
    border: 1px solid var(--borderMediumGray);
    border-top-width: 0;
    border-radius: 0 0 var(--borderRadius) var(--borderRadius);
    background: var(--backgroundWhite);
}

#ufd-container .web20 div.list-wrapper-up div.list-scroll {
    border-top-width: 1px;
    border-bottom-width: 0px;
    border-radius: var(--borderRadius) var(--borderRadius) 0 0;
}

#ufd-container .web20 li {
    font: var(--fontSizeSmall) var(--fontFamily);
    color: var(--textColorLight);
    background: var(--backgroundWhite);
    padding: .375rem.75rem;
    outline: none;
}

    #ufd-container .web20 li em {
        font-weight: var(--fontWeightBold);
        font-style: normal;
    }

    #ufd-container .web20 li.active {
        color: var(--textColorDarkBg);
        background: var(--backgroundDark1);
    }

/* #endregion */
/* #region Token Vars Mobile
----------------------------------------------------------*/
.TokenVars {
    height: 250px;
    width: 180px;
}

    .TokenVars ul {
        list-style-type: none;
    }

        .TokenVars ul li a, .TokenVars ul li a:visited, .TokenVars ul li a:focus {
            color: var(--textColorLink);
            text-decoration: underline;
        }

            .TokenVars ul li a:active {
                color: var(--textColorLinkActive);
            }

.fw_textbox {
    max-width: none;
}

/* #endregion */
/* #region Other
----------------------------------------------------------*/
.bGreen,
.bGreen b {
    font-weight: var(--fontWeightBold);
    color: var(--textColorSuccess);
}

img.greenImg {
    background: var(--backgroundSucess) !important;
    color: var(--backgroundSucessText) !important
}

.bOrange,
.bOrange b {
    font-weight: var(--fontWeightBold);
    color: var(--textColorWarning);
}

img.orangeImg {
    background: var(--backgroundWarning) !important;
    color: var(--backgroundWarningText) !important
}

.bRed,
.bRed b {
    font-weight: var(--fontWeightBold);
    color: var(--textColorError);
}

img.redImg {
    background: var(--backgroundError) !important;
    color: var(--backgroundErrorText) !important
}

.bBlue,
.bBlue b {
    font-weight: var(--fontWeightBold);
    color: var(--textColorInfo);
}

img.blueImg {
    background: var(--backgroundInfo) !important;
    color: var(--backgroundInfoText) !important
}

.MappingGrid {
    width: 638px;
    overflow: auto;
}

.TermsAndConditions {
    width: 100%;
    height: auto;
    overflow: auto;
}

/* #endregion */
/* #region Label Setup page
----------------------------------------------------------*/
.hotelTrans.fieldLabel,
.chainTrans.fieldLabel {
    margin-left: .75rem
}

.hotelTrans,
.chainTrans {
    border: 0 !important;
    padding: 0 !important
}

    .hotelTrans::before,
    .chainTrans::before {
        content: "";
        width: 20px;
        height: 20px;
        margin: 0 .375rem 0 0;
        padding: 0 !important;
        display: inline-block;
        border: 1px solid currentColor;
        vertical-align: middle;
    }

    .hotelTrans::before {
        background: var(--dataOrangeBackground);
    }

    .chainTrans::before {
        background: var(--dataVioletBackground);
    }

.defaultTrans {
    color: var(--textColor);
}

/* #endregion */
/* #region Data Import Sub grid
----------------------------------------------------------*/
.sub_grid_tbl {
    border-top: 1px solid var(--borderLightGray);
    border-left: 1px solid var(--borderLightGray);
}

.sub_grid_header {
    padding-left: .1875rem;
    background: var(--backgroundWhite);
}

    .sub_grid_header td {
        font-size: var(--fontSizeSmall);
        color: var(--textColor);
        font-weight: bold;
    }

        .sub_grid_header td span {
            font-size: var(--fontSizeSmall);
            color: var(--textColor);
            font-weight: var(--fontWeightBold);
        }

/* #endregion */
/* #region 2FA Spark
----------------------------------------------------------*/
/* Change font family and color */
.spark-panel__content input[type="text"], .spark-panel__content input[type="password"], .spark-panel__contentinput[type="email"], .spark-panel__content textarea, select {
    font-family: var(--inputFontFamily);
}

.col-xs-3 .spark-btn--secondary i {
    color: var(--textColorInfo) !important;
}

/* Change main button style (fix ovewitten HMS CC styles) */
.spark-btn, .spark-progress.spark-btn {
    background: var(--buttonBackground);
    border: var(--buttonBorder);
    border-bottom-width: var(--buttonBorderBottomWidth);
    border-radius: var(--buttonBorderRadius);
    color: var(--buttonTextColor);
    font-size: var(--buttonFontSize);
    font-family: var(--buttonFontFamily);
    line-height: var(--buttonLineHeight);
    font-weight: var(--buttonFontWeight);
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    padding: .375rem .75rem;
    -webkit-transition: 1s ease;
    -moz-transition: 1s ease;
    -o-transition: 1s ease;
    transition: 1s ease;
    vertical-align: middle;
    cursor: pointer;
}

    .spark-btn:hover, .spark-progress.spark-btn:hover {
        color: var(--buttonTextColorHover);
        background: var(--buttonBackgroundHover);
        border-color: var(--buttonBorderHoverColor);
    }

    .spark-btn:active, .spark-progress.spark-btn:active {
        color: var(--buttonTextColorActive);
        background: var(--buttonBackgroundActive);
        border-color: var(--buttonBorderActiveColor);
    }

    .spark-btn:focus, .spark-progress.spark-btn:focus {
        box-shadow: 0 0 0 2px var(--backgroundWhite), 0 0 0 6px var(--buttonFocusShadowColor);
        outline: 0;
    }

    /* Change secondary button style (fix ovewitten HMS CC styles) */
    .spark-btn--secondary, .spark-btn--secondary.hover, .spark-btn--secondary:hover, .spark-btn--secondary:active, .spark-progress.spark-btn.spark-btn--secondary {
        background: var(--buttonSecondaryBackground);
        border: var(--buttonSecondaryBorder);
        color: var(--buttonSecondaryColor);
    }

/* #endregion */
/* #region AJAX LOADING INDICATOR
----------------------------------------------------------*/
.ajax-loading-block-window {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 128px;
    height: 128px;
    overflow: hidden;
    z-index: 1105;
    margin-left: -64px;
    margin-top: -64px;
}

    .ajax-loading-block-window .loading-image {
        border-radius: 50%;
        background-color: var(--backgroundLightGray);
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        position: relative;
        top: 0;
        left: 0;
        width: 128px;
        height: 128px;
    }

        .ajax-loading-block-window .loading-image::before {
            background-color: var(--backgroundWhite);
            border: 1px solid var(--borderLightGray);
            border-radius: 50%;
            content: '';
            display: inline-block;
            height: 108px;
            left: 50%;
            position: absolute;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            -webkit-transition: background-color .1s ease-in-out;
            transition: background-color .1s ease-in-out;
            width: 108px;
            z-index: 5;
        }

        .ajax-loading-block-window .loading-image::after {
            -webkit-animation: spin .8s ease 0s infinite;
            animation: spin .8s ease 0s infinite;
            background-color: var(--backgroundInfo);
            border-radius: 100% 0 0 0;
            content: '';
            display: inline-block;
            height: 50%;
            left: 0;
            position: absolute;
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
            -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
            -webkit-transition: -webkit-transform .1s linear;
            transition: -webkit-transform .1s linear;
            transition: transform .1s linear;
            transition: transform .1s linear, -webkit-transform .1s linear;
            width: 50%;
        }

.background-overlay {
    background: rgba(255, 255, 255, 0.8);
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    z-index: 1004;
}

/* #endregion
/* #region Loading Images
----------------------------------------------------------*/
.LoadingImage {
    float: left;
    margin: 0 0 0 .75rem;
    border-radius: 50%;
    background-color: var(--backgroundLightGray);
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    width: 24px;
    height: 24px;
    position: relative
}

    .LoadingImage::before {
        background-color: var(--backgroundWhite);
        border: 1px solid var(--borderLightGray);
        border-radius: 50%;
        content: '';
        display: inline-block;
        left: 50%;
        position: absolute;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -webkit-transition: background-color .1s ease-in-out;
        transition: background-color .1s ease-in-out;
        width: 16px;
        height: 16px;
        z-index: 5;
    }

    .LoadingImage::after {
        -webkit-animation: spin .8s ease 0s infinite;
        animation: spin .8s ease 0s infinite;
        background-color: var(--backgroundInfo);
        border-radius: 100% 0 0 0;
        content: '';
        display: inline-block;
        height: 50%;
        left: 0;
        position: absolute;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transform-origin: bottom right;
        transform-origin: bottom right;
        -webkit-transition: -webkit-transform .1s linear;
        transition: -webkit-transform .1s linear;
        transition: transform .1s linear;
        transition: transform .1s linear, -webkit-transform .1s linear;
        width: 50%;
    }

/* #endregion */
/* #region Loading Spinner
----------------------------------------------------------*/
#LoadingMessageContainer {
    background: var(--backgroundWhite);
    border: 1px solid var(--borderLightGray);
    position: fixed;
    z-index: 10;
    top: 190px;
    left: 200px;
    width: 200px;
    height: 150px;
    text-align: center;
    vertical-align: middle;
}

    #LoadingMessageContainer div {
        position: relative;
        top: 20px;
    }

        #LoadingMessageContainer div img {
            width: 75px;
            height: 75px;
        }

#LoadingMessage {
    font-weight: var(--fontWeightBold);
    color: var(--textColorLight);
    vertical-align: middle;
}

#LoadingMessageContainerShadow {
    background: var(--backgroundDark2);
    position: fixed;
    z-index: 9;
    top: 195px;
    left: 205px;
    width: 200px;
    height: 150px;
    opacity: .25;
}

/* #endregion */
/* #region Spark Spinner CSS
----------------------------------------------------------*/
.datepickerdiv {
    margin: 0;
}

.ui-spinner, .ui-spinner-disabled, .ui-spinner-disabled:hover {
    width: 120px;
    height: 40px !important;
}

.ui-spinner {
    border: 1px solid var(--borderLightGray) !important;
    border-collapse: collapse;
}

    .ui-spinner:hover {
        cursor: pointer;
        border: 1px solid var(--borderMediumGray) !important;
    }

.ui-spinner-up, .ui-spinner-down,
.ui-spinner-up:visited, .ui-spinner-down:visited,
.ui-spinner-up:hover, .ui-spinner-down:hover {
    border: 1px solid var(--textColorAction) !important;
    box-shadow: inset 0 -2px 0 var(--textColorAction);
    color: var(--textColorAction);
    border-collapse: collapse;
    margin: .7em 0;
    padding: 5px 0;
    float: right;
    text-decoration: none;
}

    .ui-spinner-up::before, .ui-spinner-down::before {
        color: currentColor;
        font-family: 'spark-icon-fill';
        line-height: 1;
        font-size: 1rem;
    }

    .ui-spinner-up::before {
        content: '\f142';
    }

    .ui-spinner-down::before {
        content: '\f143';
    }

    .ui-spinner-up span, .ui-spinner-down span {
        display: none;
    }

.ui-spinner-up {
    border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
}

.ui-spinner-down {
    border-radius: var(--borderRadius) 0 0 var(--borderRadius);
}

input[type="text"].ui-spinner-input, input[type="number"].ui-spinner-input {
    margin-top: 0px !important;
    text-align: center !important;
    height: 100%;
    width: 37%;
    display: inline-block;
    float: left;
}

.ui-spinner-button {
    display: inline-block;
    position: relative;
    width: 20%;
    height: 40%;
    background-color: var(--backgroundWhite) !important;
}

/* #endregion
/* #region spark icons
----------------------------------------------------------*/
[class*="spark-icon"] {
    color: currentColor;
    font-family: 'spark-icon-line';
    display: inline-block;
}

.spark-icon-delete::before {
    content: "\f164";
}

.spark-icon-plus::before {
    content: "\f142";
}

.spark-icon-minus::before {
    content: "\f143";
}

.spark-icon-anim_loading::before {
    content: "\f1ac";
}

.spark-icon-basic-right-arrow::before {
    content: "\f10d";
}

.spark-icon-basic-left-arrow::before {
    content: "\f10c";
}

.spark-icon-basic-up-arrow::before {
    content: "\f10e";
}

.spark-icon-basic-down-arrow::before {
    content: "\f10b";
}

.spark-icon-triangle_down_arrow::before {
    content: "\f116";
}

.spark-icon-triangle_up_arrow::before {
    content: "\f119";
}

.spark-icon-traiangle_down_arrow::before {
    content: "\f116";
}

.spark-icon-traiangle_right_arrow ::before {
    content: "\f118";
}

.spark-icon-triangle_left_arrow ::before {
    content: "\f117";
}

.spark-icon-download::before {
    content: "\f130";
}

.spark-icon-upload::before {
    content: "\f131";
}

.spark-icon-circle_add::before {
    content: "\f1b1";
}

.spark-icon-user::before {
    content: "\f165";
}

.spark-icon-out::before {
    content: "\f170";
}

.spark-icon-subscribe::before {
    content: "\f176";
}

.spark-icon-date_range::before {
    content: "\f11e";
}

.spark-icon-food::before {
    content: "\f134";
}

.spark-icon-info::before {
    content: "\f188";
}

.spark-icon-note::before {
    content: "\f148";
}

.spark-icon-reset::before {
    content: "\f171";
}

.spark-icon-folder::before {
    content: "\f133";
}

.spark-icon-print::before {
    content: "\f152";
}

.spark-icon-copy_or_new::before {
    content: "\f17f";
}

.spark-icon-unlock::before {
    content: "\f140";
}

.spark-icon-warning::before {
    content: "\f104";
}

.spark-icon-help::before {
    content: "\f198";
}

.spark-icon-setup::before {
    content: "\f148";
}

.spark-icon-add::before {
    content: "\f142";
}

.spark-icon-fav ::before {
    content: "\f15d";
}

.spark-icon-hotels::before {
    content: "\f139";
}

.spark-icon-picture::before {
    content: "\f14f";
}

.spark-icon-season::before {
    content: "\f13b";
}

.spark-icon-close::before {
    content: "\f123";
}

.spark-icon-search::before {
    content: "\f155";
}

.spark-icon-track::before {
    content: "\f129";
}

.spark-icon-check_mark::before {
    content: "\f121";
}

.spark-icon-view::before {
    content: "\f116";
}

/* #endregion
/* #region spark svg  icons
----------------------------------------------------------*/
img[class^="sparkSvg"],
.accordianIconOpen, .accordianIconClosed,
img[src*="blank_expand_on"], img[src*="blank_expand_off"] {
    background: currentColor;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    position: relative;
    top: -2px;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.sparkSvg_add {
    mask-image: url(../../Images/icon_add.svg);
    -webkit-mask-image: url(../../Images/icon_add.svg);
}

.sparkSvg_arrow_down {
    mask-image: url(../../Images/icon_arrow_down.svg);
    -webkit-mask-image: url(../../Images/icon_arrow_down.svg);
}

.sparkSvg_arrow_left {
    mask-image: url(../../Images/icon_arrow_left.svg);
    -webkit-mask-image: url(../../Images/icon_arrow_left.svg);
}

.sparkSvg_arrow_right {
    mask-image: url(../../Images/icon_arrow_right.svg);
    -webkit-mask-image: url(../../Images/icon_arrow_right.svg);
}

.sparkSvg_arrow_up {
    mask-image: url(../../Images/icon_arrow_up.svg);
    -webkit-mask-image: url(../../Images/icon_arrow_up.svg);
}

.sparkSvg_bar_chart {
    mask-image: url(../../Images/icon_bar_chart.svg);
    -webkit-mask-image: url(../../Images/icon_bar_chart.svg);
}

.sparkSvg_calendar {
    mask-image: url(../../Images/icon_calendar.svg);
    -webkit-mask-image: url(../../Images/icon_calendar.svg);
}

.sparkSvg_cancel {
    mask-image: url(../../Images/icon_close_cancel.svg);
    -webkit-mask-image: url(../../Images/icon_close_cancel.svg);
}

.sparkSvg_check {
    mask-image: url(../../Images/icon_check.svg);
    -webkit-mask-image: url(../../Images/icon_check.svg);
}

.sparkSvg_chevron_down, .accordianIconClosed {
    mask-image: url(../../Images/icon_chevron_down.svg);
    -webkit-mask-image: url(../../Images/icon_chevron_down.svg);
}

.sparkSvg_chevron_left {
    mask-image: url(../../Images/icon_chevron_left.svg);
    -webkit-mask-image: url(../../Images/icon_chevron_left.svg);
}

.sparkSvg_chevron_right {
    mask-image: url(../../Images/icon_chevron_right.svg);
    -webkit-mask-image: url(../../Images/icon_chevron_right.svg);
}

.sparkSvg_chevron_up, .accordianIconOpen {
    mask-image: url(../../Images/icon_chevron_up.svg);
    -webkit-mask-image: url(../../Images/icon_chevron_up.svg);
}

.sparkSvg_expand, img[src*="blank_expand_off"] {
    mask-image: url(../../Images/icon_expand.svg);
    -webkit-mask-image: url(../../Images/icon_expand.svg);
}

.sparkSvg_collapse, img[src*="blank_expand_on"] {
    mask-image: url(../../Images/icon_collapse.svg);
    -webkit-mask-image: url(../../Images/icon_collapse.svg);
}

.sparkSvg_close {
    mask-image: url(../../Images/icon_close_cancel.svg);
    -webkit-mask-image: url(../../Images/icon_close_cancel.svg);
}

.sparkSvg_copy {
    mask-image: url(../../Images/icon_copy.svg);
    -webkit-mask-image: url(../../Images/icon_copy.svg);
}

.sparkSvg_delete {
    mask-image: url(../../Images/icon_delete.svg);
    -webkit-mask-image: url(../../Images/icon_delete.svg);
}

.sparkSvg_distribute {
    mask-image: url(../../Images/icon_distribute.svg);
    -webkit-mask-image: url(../../Images/icon_distribute.svg);
}

.sparkSvg_download {
    mask-image: url(../../Images/icon_download.svg);
    -webkit-mask-image: url(../../Images/icon_download.svg);
}

.sparkSvg_export {
    mask-image: url(../../Images/icon_export.svg);
    -webkit-mask-image: url(../../Images/icon_export.svg);
}

.sparkSvg_favorites {
    mask-image: url(../../Images/icon_favorites.svg);
    -webkit-mask-image: url(../../Images/icon_favorites.svg);
}

.sparkSvg_favorites_add {
    mask-image: url(../../Images/icon_favorites_add.svg);
    -webkit-mask-image: url(../../Images/icon_favorites_add.svg);
}

.sparkSvg_favorites_organize {
    mask-image: url(../../Images/icon_favorites_organize.svg);
    -webkit-mask-image: url(../../Images/icon_favorites_organize.svg);
}

.sparkSvg_folder {
    mask-image: url(../../Images/icon_folder.svg);
    -webkit-mask-image: url(../../Images/icon_folder.svg);
}

.sparkSvg_food {
    mask-image: url(../../Images/icon_food.svg);
    -webkit-mask-image: url(../../Images/icon_food.svg);
}

.sparkSvg_go {
    mask-image: url(../../Images/icon_go.svg);
    -webkit-mask-image: url(../../Images/icon_go.svg);
}

.sparkSvg_help {
    mask-image: url(../../Images/icon_help.svg);
    -webkit-mask-image: url(../../Images/icon_help.svg);
}

.sparkSvg_hotels {
    mask-image: url(../../Images/icon_hotel.svg);
    -webkit-mask-image: url(../../Images/icon_hotel.svg);
}

.sparkSvg_image_library {
    mask-image: url(../../Images/icon_image_library.svg);
    -webkit-mask-image: url(../../Images/icon_image_library.svg);
}

.sparkSvg_info {
    mask-image: url(../../Images/icon_info.svg);
    -webkit-mask-image: url(../../Images/icon_info.svg);
}

.sparkSvg_loading {
    mask-image: url(../../Images/icon_loading.svg);
    -webkit-mask-image: url(../../Images/icon_loading.svg);
    animation-name: spinSvg;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.sparkSvg_login {
    mask-image: url(../../Images/icon_login.svg);
    -webkit-mask-image: url(../../Images/icon_login.svg);
}

.sparkSvg_logout {
    mask-image: url(../../Images/icon_logout.svg);
    -webkit-mask-image: url(../../Images/icon_logout.svg);
}

.sparkSvg_minus {
    mask-image: url(../../Images/icon_minus.svg);
    -webkit-mask-image: url(../../Images/icon_minus.svg);
}

.sparkSvg_new {
    mask-image: url(../../Images/icon_new.svg);
    -webkit-mask-image: url(../../Images/icon_new.svg);
}

.sparkSvg_note {
    mask-image: url(../../Images/icon_note.svg);
    -webkit-mask-image: url(../../Images/icon_note.svg);
}

.sparkSvg_note_important {
    mask-image: url(../../Images/icon_note_important.svg);
    -webkit-mask-image: url(../../Images/icon_note_important.svg);
}

.sparkSvg_picture {
    mask-image: url(../../Images/icon_picture.svg);
    -webkit-mask-image: url(../../Images/icon_picture.svg);
}

.sparkSvg_plus {
    mask-image: url(../../Images/icon_plus.svg);
    -webkit-mask-image: url(../../Images/icon_plus.svg);
}

.sparkSvg_pointer {
    mask-image: url(../../Images/icon_pointer.svg);
    -webkit-mask-image: url(../../Images/icon_pointer.svg);
}

.sparkSvg_print {
    mask-image: url(../../Images/icon_print.svg);
    -webkit-mask-image: url(../../Images/icon_print.svg);
}

.sparkSvg_reset {
    mask-image: url(../../Images/icon_reset.svg);
    -webkit-mask-image: url(../../Images/icon_reset.svg);
}

.sparkSvg_save {
    mask-image: url(../../Images/icon_save.svg);
    -webkit-mask-image: url(../../Images/icon_save.svg);
}

.sparkSvg_save_close {
    mask-image: url(../../Images/icon_save_close.svg);
    -webkit-mask-image: url(../../Images/icon_save_close.svg);
}

.sparkSvg_search {
    mask-image: url(../../Images/icon_search.svg);
    -webkit-mask-image: url(../../Images/icon_search.svg);
}

.sparkSvg_season {
    mask-image: url(../../Images/icon_season.svg);
    -webkit-mask-image: url(../../Images/icon_season.svg);
}

.sparkSvg_season_add {
    mask-image: url(../../Images/icon_season_add.svg);
    -webkit-mask-image: url(../../Images/icon_season_add.svg);
}

.sparkSvg_setup {
    mask-image: url(../../Images/icon_setup.svg);
    -webkit-mask-image: url(../../Images/icon_setup.svg);
}

.sparkSvg_sitemap {
    mask-image: url(../../Images/icon_sitemap.svg);
    -webkit-mask-image: url(../../Images/icon_sitemap.svg);
}

.sparkSvg_sort {
    mask-image: url(../../Images/icon_sort.svg);
    -webkit-mask-image: url(../../Images/icon_sort.svg);
}

.sparkSvg_start {
    mask-image: url(../../Images/icon_start.svg);
    -webkit-mask-image: url(../../Images/icon_start.svg);
}

.sparkSvg_subscribe {
    mask-image: url(../../Images/icon_subscribe.svg);
    -webkit-mask-image: url(../../Images/icon_subscribe.svg);
}

.sparkSvg_translate {
    mask-image: url(../../Images/icon_translate.svg);
    -webkit-mask-image: url(../../Images/icon_translate.svg);
}

.sparkSvg_triangle_down {
    mask-image: url(../../Images/icon_triangle_down.svg);
    -webkit-mask-image: url(../../Images/icon_triangle_down.svg);
}

.sparkSvg_triangle_left {
    mask-image: url(../../Images/icon_triangle_left.svg);
    -webkit-mask-image: url(../../Images/icon_triangle_left.svg);
}

.sparkSvg_triangle_right {
    mask-image: url(../../Images/icon_triangle_right.svg);
    -webkit-mask-image: url(../../Images/icon_triangle_right.svg);
}

.sparkSvg_triangle_up {
    mask-image: url(../../Images/icon_triangle_up.svg);
    -webkit-mask-image: url(../../Images/icon_triangle_up.svg);
}

.sparkSvg_unlock {
    mask-image: url(../../Images/icon_unlock.svg);
    -webkit-mask-image: url(../../Images/icon_unlock.svg);
}

.sparkSvg_upload {
    mask-image: url(../../Images/icon_upload.svg);
    -webkit-mask-image: url(../../Images/icon_upload.svg);
}

.sparkSvg_user {
    mask-image: url(../../Images/icon_user.svg);
    -webkit-mask-image: url(../../Images/icon_user.svg);
}

.sparkSvg_user_add {
    mask-image: url(../../Images/icon_user_add.svg);
    -webkit-mask-image: url(../../Images/icon_user_add.svg);
}

.sparkSvg_warning {
    mask-image: url(../../Images/icon_warning.svg);
    -webkit-mask-image: url(../../Images/icon_warning.svg);
}

/* #endregion
/* #region Spark Accordian
----------------------------------------------------------*/
.collapsible-heading {
    background: var(--backgroundWhite);
    border: 1px solid var(--borderLightGray);
    margin: -1px 0 0;
    padding: 1rem 1.5rem;
}

    .collapsible-content, .collapsible-heading + *:not(input) {
        border: 1px solid var(--borderLightGray);
        border-top-width: 0px;
        box-shadow: inset 0 7px 10px -7px var(--borderLightGray), inset 0 -7px 10px -7px var(--borderLightGray);
        padding: 1rem 1.5rem;
        margin: 0 !important;
        float: none !important;
        width: auto !important;
        position: relative !important;
        overflow: auto;
    }

        .collapsible-content::after, .collapsible-heading + *:not(input)::after {
            clear: both;
            display: table;
            content: "";
        }

    .collapsible-heading + table, table#SelectorsDiv {
        border: 0;
        box-shadow: none;
        margin: 1rem 1.5rem !important;
        padding: 0;
        position: relative;
        width: calc(100% - 3rem) !important;
    }

        .collapsible-heading + table tbody, .collapsible-heading + table tr, .collapsible-heading + table th, .collapsible-heading + table td,
        table#SelectorsDiv tbody, table#SelectorsDiv tr, table#SelectorsDiv th, table#SelectorsDiv td {
            position: relative;
            z-index: 2;
        }

        .collapsible-heading + table::before, table#SelectorsDiv::before {
            border: 1px solid var(--borderLightGray);
            border-top-width: 0px;
            box-shadow: inset 0 7px 10px -7px var(--borderLightGray), inset 0 -7px 10px -7px var(--borderLightGray);
            position: absolute;
            content: "";
            top: -1rem;
            left: -1.5rem;
            right: -1.5rem;
            bottom: -1rem;
            z-index: 1
        }

    .collapsible-heading + span {
        display: block;
    }

    .collapsible-heading + *:not(input) > .btnBar {
        top: 1rem !important;
    }


    #printDateDiv .btnBar.resSearchButton {
        left: 550px !important;
        top: 25px !important;
    }

/* #endregion
/* #region Calendars
----------------------------------------------------------*/
/* Calendar View */
#CriteriaContainer > table {
    float: none !important;
}

.CalendarContainer {
    margin: 1rem 0;
    width: 100%;
    max-width: 830px;
}

.BECalLegend {
    background: var(--backgroundWhite);
    border: 1px solid var(--borderLightGray);
    border-radius: var(--borderRadius);
    color: var(--textColor);
    font-size: var(--fontSizeSmall);
    padding: .375rem 1.125rem .375rem .375rem;
    text-align: left;
    margin-bottom: .75rem;
}

    .BECalLegend td {
        font-weight: var(--fontWeightBold) !important;
    }

.DayCellDate {
    font-size: var(--fontSizeLarge);
    padding: 0 !important;
    margin: 0 0 0.75rem;
}

.DayCellValue {
    font-size: var(--fontSizeSmall);
}

/* end Calendar View */
/* Calendar Package Inventory */
.RadCalendar_Packages {
    margin: 1rem 0;
    width: 100% !important;
    max-width: 830px;
}

    .RadCalendar_Packages .rcTitlebar {
        background: var(--backgroundMediumGray);
        color: var(--textColor);
        width: 100%;
        border: 0 !important;
        padding: .375rem !important
    }

        .RadCalendar_Packages .rcTitlebar .rcPrev,
        .RadCalendar_Packages .rcTitlebar .rcNext,
        .RadCalendar_Packages .rcTitlebar .rcFastPrev,
        .RadCalendar_Packages .rcTitlebar .rcFastNext {
            color: var(--textColor);
            display: block;
            width: 16px;
            height: 16px;
            font-size: 16px;
            overflow: hidden;
            margin: 0 .375rem;
            text-decoration: none;
            font-family: 'spark-icon-fill';
            text-indent: -9999em;
            line-height: 1
        }

            .RadCalendar_Packages .rcTitlebar .rcFastPrev::before,
            .RadCalendar_Packages .rcTitlebar .rcFastNext::before,
            .RadCalendar_Packages .rcTitlebar .rcPrev::before,
            .RadCalendar_Packages .rcTitlebar .rcNext::before {
                text-indent: 0;
                display: block;
            }

            .RadCalendar_Packages .rcTitlebar .rcFastPrev::before {
                content: "\F16A";
            }

            .RadCalendar_Packages .rcTitlebar .rcPrev::before {
                content: "\F117";
            }

            .RadCalendar_Packages .rcTitlebar .rcNext::before {
                content: "\F118";
            }

            .RadCalendar_Packages .rcTitlebar .rcFastNext::before {
                content: "\F167";
            }

    .RadCalendar_Packages .rcMain {
        border: 0 !important;
        padding-top: 0.75rem !important;
    }

    .RadCalendar_Packages .rcWeek th {
        background: var(--backgroundLightGray);
        border-bottom: 2px solid var(--backgroundWhite) !important;
        color: var(--textColorLight);
        text-align: center !important;
        width: 14.28%;
    }

        .RadCalendar_Packages .rcWeek th:first-child {
            border-left: 2px solid var(--backgroundWhite) !important;
        }

        .RadCalendar_Packages .rcWeek th:last-child {
            border-right: 2px solid var(--backgroundWhite) !important;
        }

    .RadCalendar_Packages .rcRow > td {
        border: 2px solid var(--backgroundWhite) !important;
        background: var(--backgroundLightGray);
        vertical-align: top !important;
        width: 14.28% !important;
        text-align: center !important;
        padding: .75rem !important;
        box-sizing: border-box;
        color: var(--textColorLighter);
    }

    .RadCalendar_Packages .rcRow .otherMonth {
        display: none
    }

    .RadCalendar_Packages .rcRow .rcOtherMonth {
        background: var(--backgroundWhite);
    }

    .RadCalendar_Packages .rcMain .rcRow a, .RadCalendar_Packages .rcMain .rcRow span {
        padding: 0 !important;
    }

    .RadCalendar_Packages .PkgDayCellDate {
        padding: 0 !important;
    }

#DayInventoryPanel table, #TimeInventoryPanel table {
    margin: 0 auto !important
}

    #DayInventoryPanel table td, #TimeInventoryPanel table td {
        font-size: var(--fontSizeSmall);
        border: 0 !important;
        vertical-align: top;
        padding: .1875rem !important
    }

        #DayInventoryPanel table td:first-child, #TimeInventoryPanel table td:first-child {
            text-align: left
        }

div.pkgInvInd {
    border: 1px solid var(--borderDark);
    width: 20px !important;
    height: 20px !important;
    margin: 0 0.375rem 0 0.75rem;
    vertical-align: middle;
    margin-top: -2px;
    display: inline-block;
}

div.pkgInvIndLabel {
    display: inline-block;
}

/* end Calendar Package Inventory */
/* Calendar Popup */
.calendar {
    background: var(--backgroundWhite);
    width: 100%;
    border: 0 !important;
    font-size: var(--fontSizeSmall) !important
}

    .calendar a {
        color: var(--textColor) !important;
        text-decoration: none;
        display: block;
    }

        .calendar a:focus {
            outline: 2px solid currentColor;
            outline-offset: 2px;
        }

    .calendar .calendar__month__title {
        background: var(--backgroundWhite);
        font-weight: var(--fontWeightBold);
        color: var(--textColorHeading);
        font-size: 1rem !important;
        border: none !important;
    }

        .calendar .calendar__month__title tr {
            border-bottom: 1px solid var(--borderLightGray);
        }

        .calendar .calendar__month__title td {
            padding: .1875rem
        }

    .calendar .calendar__next__previous {
        text-align: center;
        -webkit-transition: opacity 150ms;
        transition: opacity 150ms;
    }

        .calendar .calendar__next__previous:nth-child(1) a:before {
            content: '\f110';
            font-family: 'spark-icon-line';
            font-size: 16px;
        }

        .calendar .calendar__next__previous:nth-child(3) a:before {
            content: '\f111';
            font-family: 'spark-icon-line';
            font-size: 16px;
        }

    .calendar tr th.calendar__dayheader {
        border-right: 1px solid var(--backgroundWhite);
        border-bottom: 1px solid var(--borderLightGray);
        border-top: none;
        padding: .1875rem;
        text-align: center;
        font-weight: var(--fontWeightBold);
        color: var(--textColorLight);
    }

    .calendar tr td.calendar__othermonthday {
        background: var(--backgroundLightGray);
        border-bottom: 1px solid var(--borderLightGray);
        border-right: 1px solid var(--borderLightGray);
        text-decoration: none;
        padding: .1875rem;
    }

        .calendar tr td.calendar__othermonthday a {
            color: var(--textColorLighter) !important;
        }

    .calendar tr td.calendar__day, .calendar tr td.calendar__daytoday {
        border-bottom: 1px solid var(--borderLightGray);
        border-right: 1px solid var(--borderLightGray);
        padding: .1875rem;
    }

        .calendar tr th.calendar__dayheader:last-child,
        .calendar tr td.calendar__othermonthday:last-child,
        .calendar tr td.calendar__day:last-child,
        .calendar tr td.calendar__daytoday:last-child {
            border-radius: 0
        }

    .calendar td.calendar__dayselected {
        background-color: var(--backgroundInfo) !important;
        color: var(--backgroundInfoText) !important;
    }

        .calendar td.calendar__dayselected a {
            background-color: var(--backgroundInfo);
            border: 1px solid var(--backgroundInfo);
            color: var(--backgroundInfoText) !important;
            z-index: 7;
        }

    .calendar .calendar__daytoday a {
        display: block;
        border: 1px solid var(--borderDark);
        border-radius: 50%;
    }

a.calendar-icon {
    color: var(--textColorLight);
}

    a.calendar-icon::before {
        content: "\f11e";
        line-height: 2rem;
        font-family: 'spark-icon-line';
    }

/* end of Calendar control */
/* #endregion
/* #region Print Media Styles
----------------------------------------------------------*/
@media print {
    * {
        font-size: 10pt;
    }

    #ContentContainer {
        position: static;
        top: auto;
        left: auto;
        overflow: visible;
        padding-bottom: 0;
        width: 100% !important;
    }

    body {
        overflow: visible;
        height: auto;
        width: auto;
        margin: 0;
        padding: 0;
    }

    #PageHeadContainer {
        display: none;
    }

    #HelpButtonContainer {
        display: none;
    }

    .pageBreak {
        display: block;
        page-break-after: always;
    }

    .gridRow_even {
        padding: 0;
    }

    .SectionInstructions {
        margin-bottom: 0;
        padding-bottom: 10px;
    }

    .SectionHeadContainer {
        margin: 15px 0 0 0;
    }

    td {
        padding: 1px;
        margin: 1px;
    }

    .SectionHeader, .SubSectionHeader {
        font-size: 12pt;
    }

    #ToolBarAccentImg, #ToolBar {
        display: none;
    }
}

/* #endregion */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spinSvg {
    from {
        transform: rotate(-360deg);
    }

    to {
        transform: rotate(0);
    }
}
#CustomRoleHistoryContainer{
    margin-left: 2vw;
    margin-top: 1vh;
    width: 96vw;
}
    #CustomRoleHistoryContainer tr td {
        border: 1px solid #CCC;
        text-align: center;
    }
#reportParms tr {
    border-bottom: 5px transparent solid;
}

.warning-summary {
    background: var(--backgroundWhite);
    border: 1px solid var(--borderLightGray);
    border-radius: var(--borderRadius);
    padding: 1rem 1.5rem;
}

.warning-summary h4 {
    color: var(--textColorWarning);
    font-size: var(--fontSizeLarge);
    font-weight: var(--fontWeightBold);
    padding: .375rem 0 0 48px;
    margin: 0;
    position: relative;
}
.warning-summary h4 span {
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    display: block;
    padding: 9px;
    text-align: center;
    background-color: var(--backgroundWarning);
}
.warning-summary h4 span::before {
    color: var(--backgroundWarningText);
    content: '\f104';
}
.warning-summary h4 span::before {
    font-family: 'spark-icon-line';
    display: block;
    vertical-align: middle;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    text-transform: none;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 20px;
    line-height: 24px;
}
.warning-summary ul {
    list-style: disc;
    margin: 0;
    margin-left: calc(48px + 1rem);
}
.container {
    position: relative;
    min-width: 960px;
    max-width: 96%;
    padding: 0;
    margin: 0 1% 0 2%;
}

.footer-parent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    color: var(--menuTopText);
    font-size: var(--fontSize);
    padding: .75rem 1.5rem;
    position: relative;
    background: var(--menuTopBackground, #fcfbf8);
}

.footer-1 {
    display: inline-block;
    background-image: url(../../Content/Themes/HMSPMS/images/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 50px;
    width: 100px;
    vertical-align: middle;
    margin-right: 5px;
}
.footer-2 {
    display: flex;
    gap: 1rem;
}
    .footer-2 > a {
        color: var(--menuTopText);
        text-decoration: none;
    }

html, body {
    height: 100%;
    margin: 0;
}

.login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.login-content {
    flex: 1; /* pushes footer to bottom */

}

.education-cap::before {
    content: '\f222';
    font-family: 'spark-icon-fill';
    font-size: 1.5rem;
    margin-right: 4px;
}

.service-bell::before {
    content: "\f212";
    font-family: 'spark-icon-fill';
    font-size: 1.5rem;
    margin-right: 4px;
}

#shuLink, #ssoCommunityLink {
    align-content: center;
}

@media (max-width: 1170px) {
    .footer-link-name {
        display: none;
    }
}

/* region Modal responsiveness for CC pages */
/* Dialog width (max-width) scaling automatically */
/* Horizontal position controlled */

/* For CC modals with CC content */
.simplemodal-container {
    max-width: clamp(500px, 80vw, 1500px) !important;
    left: 50% !important;
    transform: translate(-50%);
    z-index: 100;
}

.simplemodal-container iframe {
    max-width: clamp(470px, calc(80vw - 30px), 1470px) !important;
}

/* For CC modals with HMS content */
.ui-dialog {
    max-width: clamp(500px, 80vw, 1500px) !important;
    left: 50% !important;
    transform: translate(-50%);
    z-index: 100;
}

.ui-dialog iframe {
    max-width: clamp(470px, calc(80vw - 30px), 1470px) !important;
}

/* endregion Modal responsiveness for CC pages */