/* 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 */
#CalendarWrapperDiv {
    margin: 1rem 0;
    width: 100%;
    max-width: 830px;
}

table.RadCalendar_RevenueNew {
    border: 1px solid var(--borderMediumGray);
}

table.RadCalendar_RevenueNew,
.RadCalendar_RevenueNew .rcTitlebar table,
.RadCalendar_RevenueNew table.rcMainTable {
    margin: 0px;
    padding: 0px;
    border-spacing: 0px;
    width: 100%
}

/*titlebar*/
.RadCalendar_RevenueNew .rcTitlebar {
    background: var(--backgroundDarkGray);
    border: 1px solid var(--borderMediumGray);
    border-bottom-color: var(--borderLightGray);
    color: var(--textColor);
    width: 100%;
    padding: .1875rem;
    margin: 0;
}

    .RadCalendar_RevenueNew .rcTitlebar table {
        width: 100%;
        vertical-align: middle;
        text-align: center;
    }

    .RadCalendar_RevenueNew .rcTitlebar td {
        font: var(--fontSizeSmall) var(--fontFamily);
        vertical-align: middle;
        text-align: center;
        margin: 0px;
        padding: 0px;
        font-weight: var(--fontWeightBold) !important;
    }

/*week numbers and days*/
.RadCalendar_RevenueNew .rcWeek th {
    background: var(--backgroundWhite);
    border-bottom: 1px solid var(--borderMediumGray);
    padding: .1875rem .375rem;
    text-align: center;
    color: var(--textColorLight);
    font-weight: var(--fontWeightNormal);
    font-size: var(--fontSizeSmall);
    text-transform: uppercase;
    vertical-align: middle;
    width: 14.28%;
}

/*date cells*/
.RadCalendar_RevenueNew td.DayPast,
.RadCalendar_RevenueNew td.DayOpen,
.RadCalendar_RevenueNew td.DayNoAvail,
.RadCalendar_RevenueNew td.DayMinLen,
.RadCalendar_RevenueNew td.DayNoArrive,
.RadCalendar_RevenueNew td.DayLeadDays,
.RadCalendar_RevenueNew td.DayCurrent,
.RadCalendar_RevenueNew td.DaySelected,
.RadCalendar_RevenueNew td.rcOtherMonth {
    font: var(--fontSizeSmall) var(--fontFamily);
    vertical-align: top;
    height: 100px;
    width: 14.28%;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--borderMediumGray);
    border-right: 1px solid var(--borderMediumGray);
    color: var(--textColorLighter);
}

.RadCalendar_RevenueNew .rcRow td:last-child {
    border-right: 0
}

.RadCalendar_RevenueNew .rcRow:last-child td {
    border-bottom: 0
}


.RadCalendar_RevenueNew td div.CellHeader {
    background: var(--backgroundMediumGray);
    border-bottom: 1px solid var(--borderLightGray);
    padding: .1875rem .375rem;
    vertical-align: middle;
    margin-bottom: .375rem;
    color: var(--textColorLighter);
}

.RadCalendar_RevenueNew .rcRow td a {
    color: inherit;
    text-decoration: underline;
}

.RadCalendar_RevenueNew td div.CellHeader::after {
    display: table;
    clear: both;
    content: ""
}

.RadCalendar_RevenueNew td div.CellHeader div.CellDate {
    float: left;
}

.RadCalendar_RevenueNew td div.CellHeader div.AlertDate,
.RadCalendar_RevenueNew td div.CellHeader div.EventDate {
    float: right;
}

.RadCalendar_RevenueNew td table.CellValueTable {
    clear: both;
    display: block;
}

    .RadCalendar_RevenueNew td table.CellValueTable td {
        font-size: var(--fontSizeSmall) !important;
        display: block;
        padding: .1875rem .375rem;
        width: auto !important;
    }

.RadCalendar_RevenueNew td div.FailureCauseValue {
    font-size: var(--fontSizeSmall) !important;
}

.RadCalendar_RevenueNew td div.StayControlLevelValue {
    margin-top: .75rem;
    font-size: var(--fontSizeSmall) !important;
}

.RadCalendar_RevenueNew td div.StayControlLevelValue {
    padding: .1875rem .375rem;
}

/* Legend */
[id*='CalLegendPanel'] > div.RevenueNewCalLegend {
    background: var(--backgroundWhite);
    border: 1px solid var(--borderLightGray);
    border-radius: var(--borderRadius);
    font-size: var(--fontSizeSmall);
    padding: .75rem 0 0 !important;
    text-align: left !important;
    margin-top: 1rem !important;
    max-width: 830px !important
}

.RevenueNewCalLegend .LegendItem {
    display: inline-block;
    margin: 0 .75rem .75rem;
    padding: 0 !important;
    white-space: nowrap;
}

    .RevenueNewCalLegend .LegendItem .LegendSquare {
        width: 20px !important;
        height: 20px !important;
        margin: 0 .375rem 0 0;
        vertical-align: middle;
        margin-top: -2px;
        display: inline-block;
    }

    .RevenueNewCalLegend .LegendItem img {
        margin: 0 .375rem 0 0;
        vertical-align: middle;
        margin-top: -2px;
        display: inline-block;
    }

    .RevenueNewCalLegend .LegendItem span {
        font-size: var(--fontSizeSmall);
        color: var(--textColor);
    }

/* special colors for statuses*/
.RadCalendar_RevenueNew td.DayOpen,
.RevenueNewCalLegend div.DayOpen {
    background: var(--dataGreenBackground);
    color: var(--dataGreenText);
}

.RadCalendar_RevenueNew td.DayNoAvail,
.RevenueNewCalLegend div.DayNoAvail {
    background: var(--dataRedBackground);
    color: var(--dataRedText);
}

.RadCalendar_RevenueNew td.DayMinLen,
.RevenueNewCalLegend div.DayMinLen {
    background: var(--dataBlueBackground);
    color: var(--dataBlueText);
}

.RadCalendar_RevenueNew td.DayNoArrive,
.RevenueNewCalLegend div.DayNoArrive {
    background: var(--dataYellowBackground);
    color: var(--dataYellowText);
}

.RadCalendar_RevenueNew td.DayLeadDays,
.RevenueNewCalLegend div.DayLeadDays {
    background: var(--dataOrangeBackground);
    color: var(--dataOrangeText);
}

.RadCalendar_RevenueNew td.DayCurrent,
.RevenueNewCalLegend div.DayCurrent {
    background: var(--backgroundDark1);
    color: var(--textColorDarkBg);
}

.RadCalendar_RevenueNew td.DaySelected,
.RevenueNewCalLegend div.DaySelected {
    background: var(--dataVioletBackground);
    color: var(--dataVioletText);
}