/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

:root {
    --viewColor: #000;
    --viewBackground: #fff;
    --viewBorderColor: #d2d2d2;
    --viewHighlightBorderColor: #67acd8;
    --viewTodayBorderColor: #7fb9ee;
    --viewTodayColor: inherit;
    --viewTodayBackground: #e1f0fd;
    --viewTodayLabelColor: #616163;
    --viewTodayLabelBackground: #d2e3f3;
    --viewTodayLabelSelectedColor: #616163;
    --viewTodayLabelSelectedBackground: #d2e3f3;
    --viewTodayOffBackground: #d7e8f8;
    --viewTodayDayLabelBackground: #d2e3f3;
    --viewTodayWeekendBackground: #e1f0fd;
    --viewWeekendBackground: #f7ffe3;
    --viewHeaderSelectedBackground: #fffcd8;
    --viewDayBoxSelectedBackground: #fffcd8;
    --viewDayBoxOffSelectedBackground: #f2edb2;
    --viewDayBoxOtherSelectedBackground: #fffcd8;
    --viewMonthCurrentBackground: #f7f7f7;
    --viewMonthOtherBackground: #f3f3f3;
    --viewMonthDayBoxSelectedColor: #616163;
    --viewMonthDayBoxSelectedBackground: #f2edb2;
    --viewMonthDayBoxLabelColor: #616163;
    --viewMonthDayBoxLabelTexture: none;
    --viewMonthDayBoxWeekLabel: #aaaaaa;
    --viewMonthDayOtherBackground: #e8e8e8;
    --viewMonthDayOtherLabelBackground: #ddd;
    --viewMonthDayOffLabelBackground: #eaf7ca;
    --viewOffTimeBackground: #f0f0f0;
    --viewTimeBoxColor: #6a6969;
    --viewDayLabelSelectedColor: #000;
    --viewDayLabelSelectedBackground: #fffabc;
    --viewDragboxColor: -moz-dialogtext;
    --viewDragboxBackground: linear-gradient(#fe4b22, #feb822);
    --viewDropshadowBackground: #ffa47d;
}

:root[lwt-tree] {
    --viewColor: var(--sidebar-text-color);
    --viewBackground: var(--sidebar-background-color);
    --viewBorderColor: var(--sidebar-border-color);
    --viewTodayColor: var(--sidebar-highlight-text-color, HighlightText);
    --viewTodayBackground: var(--sidebar-highlight-background-color, Highlight);
    --viewTodayLabelColor: var(--sidebar-highlight-text-color, HighlightText);
    --viewTodayLabelBackground: var(--sidebar-highlight-background-color, Highlight);
    --viewTodayDayLabelBackground: var(--sidebar-highlight-background-color, Highlight);
    --viewMonthCurrentBackground: rgba(0, 0, 0, 0.1);
    --viewMonthDayOtherLabelBackground: rgba(0, 0, 0, 0.2);
    --viewMonthOtherBackground: rgba(0, 0, 0, 0.1);
    --viewMonthDayBoxLabelColor: var(--sidebar-text-color);
    --viewMonthDayBoxWeekLabel: var(--sidebar-text-color);
    --viewMonthDayOtherBackground: rgba(0, 0, 0, 0.2);
    --viewOffTimeBackground: rgba(0, 0, 0, 0.15);
    --viewTimeBoxColor: var(--sidebar-text-color);
}

:root[lwt-tree-brighttext] {
    --viewHighlightBorderColor: #9fa3d9;
    --viewTodayColor: var(--sidebar-highlight-text-color, #fff);
    --viewTodayBorderColor: var(--sidebar-highlight-text-color, #9fa3d9);
    --viewTodayBackground: var(--sidebar-highlight-background-color, #5358a4);
    --viewTodayLabelColor: var(--sidebar-highlight-text-color, #fff);
    --viewTodayLabelBackground: var(--sidebar-highlight-background-color, #3b3f77);
    --viewTodayDayLabelBackground: var(--sidebar-highlight-background-color, #393b66);
    --viewMonthCurrentBackground: rgba(255, 255, 255, 0.2);
    --viewMonthDayOtherLabelBackground: rgba(255, 255, 255, 0.3);
    --viewMonthOtherBackground: rgba(255, 255, 255, 0.3);
    --viewOffTimeBackground: rgba(255, 255, 255, 0.05);
    --viewTodayOffBackground: #5358a4;
    --viewTodayWeekendBackground: #5358a4;
    --viewTodayLabelSelectedColor: #e8e8f9;
    --viewTodayLabelSelectedBackground: #6d6d8e;
    --viewWeekendBackground: #646a56;
    --viewHeaderSelectedBackground: #8b8bbd;
    --viewDayBoxSelectedBackground: #8b8bbd;
    --viewDayBoxOffSelectedBackground: #676795;
    --viewDayBoxOtherSelectedBackground: #fffcd8;
    --viewMonthDayBoxSelectedColor: #d7d7ec;
    --viewMonthDayBoxSelectedBackground: #70709f;
    --viewMonthDayOtherBackground: rgba(255, 255, 255, 0.3);
    --viewMonthDayOffLabelBackground: #4f5935;
}

:root[systemcolors] {
    --viewColor: WindowText;
    --viewBackground: -moz-Field;
    --viewBorderColor: ThreeDShadow;
    --viewHighlightBorderColor: Highlight;
    --viewTodayColor: inherit;
    --viewTodayBorderColor: Highlight;
    --viewTodayBackground: -moz-Field;
    --viewTodayLabelColor: Highlight;
    --viewTodayLabelBackground: rgba(0, 0, 0, .2);
    --viewTodayLabelSelectedColor: HighlightText;
    --viewTodayLabelSelectedBackground: Highlight;
    --viewTodayOffBackground: ButtonFace;
    --viewTodayDayLabelBackground: ButtonFace;
    --viewTodayWeekendBackground: ButtonFace;
    --viewWeekendBackground: rgba(0, 0, 0, .1);
    --viewHeaderSelectedBackground: ButtonFace;
    --viewDayBoxSelectedBackground: -moz-Field;
    --viewDayBoxOffSelectedBackground: rgba(0, 0, 0, .2);
    --viewDayBoxOtherSelectedBackground: rgba(0, 0, 0, .2);
    --viewMonthCurrentBackground: -moz-Field;
    --viewMonthOtherBackground: ButtonFace;
    --viewMonthDayBoxSelectedColor: HighlightText;
    --viewMonthDayBoxSelectedBackground: Highlight;
    --viewMonthDayBoxLabelColor: WindowText;
    --viewMonthDayBoxLabelTexture: linear-gradient(rgba(0, 0, 0, .05), rgba(0, 0, 0, .05));
    --viewMonthDayBoxWeekLabel: GrayText;
    --viewMonthDayOtherBackground: ButtonFace;
    --viewMonthDayOtherLabelBackground: ButtonFace;
    --viewMonthDayOffLabelBackground: rgba(0, 0, 0, .1);
    --viewOffTimeBackground: rgba(0, 0, 0, .1);
    --viewTimeBoxColor: GrayText;
    --viewDayLabelSelectedColor: HighlightText;
    --viewDayLabelSelectedBackground: Highlight;
    --viewDragboxColor: GrayText;
    --viewDragboxBackground: Highlight;
    --viewDropshadowBackground: Highlight !important;
}

:root[lwt-tree] #calendar-nav-control {
    background-color: var(--lwt-accent-color);
    background-image: var(--lwt-header-image);
    color: var(--lwt-text-color);

    --calview-tabline-color: var(--tab-line-color, --calview-tabline-color);
    --calview-border-color: var(--sidebar-border-color);
    --calview-border-bottom-color: var(--sidebar-border-color);
}

/* Core */
calendar-category-box:not([categories]) {
    display: none;
}

calendar-category-box[categories] + hbox,
.multiday-view-main-box .calendar-event-box-container[categories] > .calendar-event-details {
    margin-inline-end: 8px;
}

.calendar-category-box-gradient {
    width: 7px;
    background-image: linear-gradient(rgba(255, 255, 255, 0.38), transparent) !important;
}

.calendar-item-image {
    margin-inline-end: 4px;
    -moz-context-properties: fill;
    fill: currentColor;
    display: none;
}

.multiday-view-main-box .calendar-item-image {
  margin-top: 4px;
}

.calendar-item-image[itemType="todo"] {
    list-style-image: url("chrome://calendar-common/skin/todo.svg");
    display: -moz-box;
}

.calendar-item-image[itemType="todo"][progress="completed"] {
    list-style-image: url("chrome://calendar-common/skin/todo-complete.svg");
}

.calendar-item-image[type="start"] {
    list-style-image: url("chrome://calendar-common/skin/event-start.svg");
    display: -moz-box;
}

.calendar-item-image[type="continue"] {
    list-style-image: url("chrome://calendar-common/skin/event-continue.svg");
    display: -moz-box;
}

.calendar-item-image[type="end"] {
    list-style-image: url("chrome://calendar-common/skin/event-end.svg");
    display: -moz-box;
}

.calendar-item-image[type]:-moz-locale-dir(ltr) {
  transform: rotate(-90deg);
}

.calendar-item-image[type]:-moz-locale-dir(rtl) {
  transform: rotate(90deg);
}

/* Multiday view */

/* Margin that allows event creation by click and drag when the time slot is
   full of events. On the right side in normal view ... */
.multiday-column-box-stack > .multiday-column-top-box[orient="horizontal"] {
    margin-inline-end: 5px;
}
/* ... and on bottom in rotate view. */
.multiday-column-box-stack > .multiday-column-top-box[orient="vertical"] {
    margin-bottom: 5px;
}

/* .. and on the right side in the header container in normal view */
calendar-header-container:not([rotated]) {
    padding-right: 6px;
    padding-left: 1px;
}
/* ... and on the bottom in rotated view. */
calendar-header-container[rotated] {
    padding-top: 1px;
    padding-bottom: 5px;
}

calendar-event-column {
    background-color: var(--viewBackground);
}

calendar-event-column[orient="horizontal"] {
    border-top: 1px solid var(--viewBorderColor);
}

calendar-event-column[orient="vertical"] {
    border-left: 1px solid var(--viewBorderColor);
}

calendar-event-column[orient="horizontal"][relation="today"] {
    border-top: 1px solid var(--viewHighlightBorderColor);
    border-bottom: 1px solid var(--viewHighlightBorderColor);
    margin-bottom: -1px;
    position: relative;
}

calendar-event-column[orient="vertical"][relation="today"] {
    border-left: 1px solid var(--viewHighlightBorderColor);
    border-right: 1px solid var(--viewHighlightBorderColor);
    margin-inline-end: -1px;
    position: relative;
}

calendar-header-container {
    background-color: var(--viewBackground);
    border-left: 1px solid var(--viewBorderColor);
}

calendar-header-container[rotated] {
    max-width: 150px;
}

calendar-header-container[weekend="true"],
.calendar-event-column-linebox[weekend="true"] {
    background-color: var(--viewWeekendBackground);
}

.calendar-event-column-linebox[off-time="true"] {
    background-color: var(--viewOffTimeBackground);
}

.calendar-event-column-linebox[off-time="true"][weekend="true"] {
    background-color: var(--viewMonthDayOffLabelBackground);
}

calendar-header-container[relation="today"],
.calendar-event-column-linebox[relation="today"],
calendar-day-label[orient][relation="today"] {
    background-color: var(--viewTodayBackground);
}

calendar-header-container[relation="today"] {
    border-left: 1px solid var(--viewTodayBorderColor);
    border-right: 1px solid var(--viewTodayBorderColor);
    margin-inline-end: -1px;
    position: relative;
}

calendar-header-container[relation="today"][rotated="true"] {
    border-top: 1px solid var(--viewTodayBorderColor);
    border-bottom: 1px solid var(--viewTodayBorderColor) !important;
    border-right: 1px solid var(--viewBorderColor);
    margin-top: -1px;
    position: relative;
}

calendar-header-container[selected="true"],
.calendar-event-column-linebox[selected="true"] {
    background-color: var(--viewHeaderSelectedBackground);
}

calendar-header-container[weekend="true"][relation="today"],
.calendar-event-column-linebox[weekend="true"][relation="today"] {
    background-color: var(--viewTodayWeekendBackground);
}

.calendar-event-column-linebox[off-time="true"][relation="today"] {
    background-color: var(--viewTodayOffBackground);
}

.multiday-view-header-day-box[orient="vertical"] .calendar-event-column-header {
    border-bottom: 1px solid var(--viewBorderColor);
    min-width: 100px;
}

calendar-header-container[weekend="true"][selected="true"],
.calendar-event-column-linebox[weekend="true"][selected="true"] {
    background-color: var(--viewHeaderSelectedBackground);
}

.calendar-event-column-linebox[off-time="true"][selected="true"] {
    background-color: var(--viewDayBoxOffSelectedBackground);
}

.calendar-event-column-linebox[orient="horizontal"] {
    border-right: 1px solid var(--viewBorderColor);
}

.calendar-event-column-linebox[orient="vertical"] {
    border-bottom: 1px solid var(--viewBorderColor);
}

.calendar-event-column-linebox[orient="horizontal"][relation="today"]:last-child {
    border-right: 1px solid var(--viewHighlightBorderColor);
}

.calendar-event-column-linebox[orient="vertical"][relation="today"]:last-child {
    border-bottom: 1px solid var(--viewHighlightBorderColor);
}

/* Make sure we extend the bold line separating scrollable and non-scrollable
   areas over the timebar. */
.multiday-view-header-time-spacer[orient="horizontal"] {
    border-bottom: 2px solid var(--viewBorderColor);
    border-right: 1px solid var(--viewBorderColor);
    margin-inline-end: 1px;
}

.multiday-view-header-time-spacer[orient="vertical"] {
    border-right: 2px solid var(--viewBorderColor);
}

.multiday-view-label-box[orient="horizontal"] > .multiday-view-label-time-spacer {
    border-right: 1px solid var(--viewBorderColor);
    margin-inline-end: 1px;
}

.multiday-view-header-day-box[orient="horizontal"] {
    border-right: 1px solid var(--viewBorderColor);
    border-bottom: 2px solid var(--viewBorderColor);
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 120px;
}

.multiday-view-header-day-box[orient="horizontal"][todaylastinview="true"] {
    border-right: 1px solid var(--viewHighlightBorderColor);
}

/* Make sure the box for day-labels appears to end before the scrollbar. */
.multiday-view-label-day-box[orient="horizontal"] {
    border-top: 1px solid var(--viewBorderColor);
    border-right: 1px solid var(--viewBorderColor);
}

.multiday-view-label-day-box[orient="vertical"] {
    border-top: 1px solid var(--viewBorderColor);
}

.multiday-view-header-day-box[orient="vertical"] {
    border-top: 1px solid var(--viewBorderColor);
    border-right: 2px solid var(--viewBorderColor);
}

/* Make sure to have a border between the edge of the views and the scrollbar. */
.multiday-view-day-box {
    border-right: 1px solid var(--viewBorderColor);
    border-bottom: 1px solid var(--viewBorderColor);
}

.fgdragbox {
    -moz-box-orient: inherit;
    display: none;
}

.fgdragbox[dragging="true"] {
    display: -moz-box;
    background: var(--viewDragboxBackground);
    border: 5px var(--viewBackground);
    opacity: 0.5;
    min-height: 2px;
    min-width: 2px;
}

.fgdragcontainer {
    -moz-box-orient: inherit;
    display: none;
}

.fgdragcontainer[dragging="true"] {
    display: -moz-box;
  /* This is a workaround for a stack bug and display: hidden in underlying
   * elements -- the display: hidden bits get misrendered as being on top.
   * Setting an opacity here forces a view to be created for this element, too.
   */
    opacity: 0.9999;
}

.fgdragbox-label {
    font-weight: bold;
    text-align: center;
    overflow: hidden;
    color: var(--viewDragboxColor);
}

.timeIndicator[orient="vertical"] {
    min-width: 1px;
    margin-inline-start: -1px;
    margin-inline-end: -1px;
    border-top: 2px solid red;
    opacity: 0.7;
}

.timeIndicator[orient="horizontal"] {
    min-height: 1px;
    margin-top: -1px;
    margin-bottom: -1px;
    border-left: 2px solid red;
    opacity: 0.7;
}

.timeIndicator-timeBar {
    background-color: red;
    position: absolute;
    border-radius: 2px;
}

.timeIndicator-timeBar[orient="vertical"] {
    margin-top: -1px;
    height: 4px;
    width: 8px;
    right: 0px;
}

.timeIndicator-timeBar[orient="horizontal"] {
    margin-left: -1px;
    height: 8px;
    width: 4px;
    bottom: 0px;
}

.calendar-event-box-container {
    padding: 0;
    overflow: hidden;
    margin: 1px;
}

.calendar-event-box-container[categories] {
    margin-inline-end: 0px;
}

.calendar-event-details {
    padding-inline-start: 2px;
    overflow: hidden;
}

.calendar-event-details-core {
    width: 0px;
    margin: 0px;
    overflow: hidden;
}

.calendar-event-name-textbox {
    background: transparent !important;
    color: inherit;
}

calendar-event-box {
    border: 1px solid transparent;
}

calendar-month-day-box-item[selected="true"] .calendar-color-box,
calendar-event-box[selected="true"] .calendar-color-box,
calendar-editable-item[selected="true"] .calendar-color-box {
    color: #000 !important;
    background-color: #FDF5A0 !important;
    box-shadow: 1px 2px 5px rgba(30, 20, 0, 0.6);
}


/* RTL styles for the main box and children */
.multiday-view-main-box {
    direction: ltr;
}

.multiday-view-label-day-box:-moz-locale-dir(rtl) {
    direction: rtl;
}

/* headers horizontal, times vertical */
.multiday-view-label-box[orient="horizontal"] {
    height: 10px;
}

.multiday-view-header-box[orient="horizontal"] {
    min-height: 30px;
}

.multiday-view-label-box[orient="horizontal"] > .multiday-view-label-time-spacer,
.multiday-view-header-box[orient="horizontal"] > .multiday-view-header-time-spacer,
calendar-time-bar[orient="vertical"] {
    width: 10ex; /* space for "11:00 AM" */
}

/* headers vertical, times horizontal */
.view-label-box[orient="vertical"] {
    width: 30px;
}

.view-header-box[orient="vertical"] {
    width: 40px;
}

.multiday-view-label-box[orient="vertical"] > .multiday-view-label-time-spacer,
.multiday-view-header-box[orient="vertical"] > .multiday-view-header-time-spacer {
    height: 40px;
}

calendar-time-bar[orient="horizontal"] {
    height: 40px;
}

/** Start time bar **/

.calendar-time-bar-label {
    font-size: 1em;
}

.calendar-time-bar-box-odd,
.calendar-time-bar-box-even {
    color: var(--viewTimeBoxColor);
    background-color: var(--viewBackground);
    text-align: right;
    overflow: hidden;
}

.calendar-time-bar-box-odd[off-time="true"] ,
.calendar-time-bar-box-even[off-time="true"] {
    background-color: var(--viewOffTimeBackground);
    border-right: 1px solid var(--viewBorderColor);
    margin-inline-end: 1px;
}

.calendar-time-bar-box-odd[orient="horizontal"],
.calendar-time-bar-box-even[orient="horizontal"] {
    border-right: 1px solid var(--viewBorderColor);
    border-top: 1px solid var(--viewBorderColor);
    height: 40px; /* the same as the calendar-time-bar element */
    margin-inline-end: 0;
}

.calendar-time-bar-box-odd[orient="vertical"],
.calendar-time-bar-box-even[orient="vertical"] {
    border-bottom: 1px  transparent !important;
    border-right: 1px solid var(--viewBorderColor);
    margin-inline-end: 1px;
    width: 10ex; /* the same as the calendar-time-bar element */
}

/** End time bar **/
.calendar-event-details-core.title-desc,
.calendar-event-details-core.location-desc {
    font-weight: normal;
}
.calendar-event-details-core.location-desc {
    opacity: 0.5;
    margin: 0;
    white-space: pre;
}
calendar-multiday-view {
    background-color: var(--viewBackground);
    padding: 0px;
}

calendar-multiday-view[hidden="true"] {
    display: none;
}

calendar-day-label {
    color: var(--viewColor);
    background-color: var(--viewBackground);
    background-image: linear-gradient(transparent, transparent 48%,
                                      rgba(0, 0, 0, 0.02) 52%, rgba(0, 0, 0, 0.1));
    border-left: 1px solid var(--viewBorderColor);
    border-bottom: 1px solid var(--viewBorderColor);
}

calendar-day-label[selected="true"] {
    color: var(--viewDayLabelSelectedColor);
    background-color: var(--viewDayLabelSelectedBackground) !important;
}

calendar-day-label[orient="vertical"] {
    background-image: none !important;
    min-width: 100px;
}

calendar-day-label[relation="today"],
calendar-day-label[relation="today1day"] {
    background-color: var(--viewTodayDayLabelBackground);
    border: 1px solid var(--viewHighlightBorderColor);
    color: var(--viewTodayColor);
    margin-inline-end: -1px;
    margin-top: -1px;
    position: relative;
}

.calendar-day-label-name {
    text-align: center;
}

.calendar-day-label-name[relation="today"],
.calendar-day-label-name[relation="today1day"] {
    font-weight: bold;
}

/* Month View */
calendar-month-view,
calendar-multiweek-view {
    padding: 0px 2px 2px;
}

.calendar-month-view-grid-column {
    min-width: 1px;
    width: 1px;
}

.calendar-month-view-grid-row {
    min-height: 1px;
    height: 1px;
    border-right: 1px solid var(--viewBorderColor);
}

calendar-month-day-box {
    border:none !important;
    border-left: 1px solid var(--viewBorderColor) !important;
    border-bottom: 1px solid var(--viewBorderColor) !important;
}

.calendar-month-day-box-items-box {
    overflow-y: auto;
    overflow-x: hidden;
}

.calendar-month-day-box-current-month {
    background-color: var(--viewBackground);
}

.calendar-month-day-box-current-month .calendar-month-day-box-date-label {
    background-color: var(--viewMonthCurrentBackground);
}

.calendar-month-day-box-day-off {
    background-color: var(--viewWeekendBackground);
}

.calendar-month-day-box-day-off .calendar-month-day-box-date-label {
    background-color: var(--viewMonthDayOffLabelBackground);
}

.calendar-month-day-box-other-month {
    background-color: var(--viewMonthOtherBackground);
}

.calendar-month-day-box-other-month .calendar-month-day-box-date-label {
    background-color: var(--viewMonthDayOtherBackground);
}

.calendar-month-day-box-other-month.calendar-month-day-box-day-off {
    background-color: var(--viewMonthDayOtherBackground);
}

.calendar-month-day-box-other-month.calendar-month-day-box-day-off .calendar-month-day-box-date-label {
    background-color: var(--viewMonthDayOtherLabelBackground);
}

.calendar-month-day-box-current-month[relation="today"],
.calendar-month-day-box-day-off[relation="today"],
.calendar-month-day-box-other-month[relation="today"] {
    background-color: var(--viewTodayBackground);
    border: 1px solid var(--viewTodayBorderColor) !important;
    margin-inline-end: -1px !important;
    margin-top: -1px !important;
    position: relative;
}

.calendar-month-day-box-date-label[relation="today"] {
    color: var(--viewTodayLabelColor);
    background-color: var(--viewTodayLabelBackground);
    font-weight: bold;
}

.calendar-month-day-box-current-month[selected="true"] {
    background-color: var(--viewDayBoxSelectedBackground);
}

.calendar-month-day-box-day-off[selected="true"] {
    background-color: var(--viewDayBoxSelectedBackground);
}

.calendar-month-day-box-other-month[selected="true"] {
    background-color: var(--viewDayBoxOtherSelectedBackground);
}

.calendar-month-day-box-date-label[selected="true"] {
    color: var(--viewMonthDayBoxSelectedColor);
    background-color: var(--viewMonthDayBoxSelectedBackground);
}

.calendar-month-day-box-date-label[relation="today"][selected="true"] {
    color: var(--viewTodayLabelSelectedColor);
    background-color: var(--viewTodayLabelSelectedBackground);
}

.calendar-month-day-box-other-month.calendar-month-day-box-day-off .calendar-month-day-box-date-label[selected="true"] {
    background-color: var(--viewMonthDayBoxSelectedBackground);
}

.calendar-month-day-box-date-label {
    color: var(--viewMonthDayBoxLabelColor);
    font-size: 0.9em;
    text-align: right;
    margin: 0px;
    padding-top: 1px;
    padding-inline-end: 2px;
    padding-bottom: 1px;
    background-image: var(--viewMonthDayBoxLabelTexture);
}

.calendar-month-day-box-week-label {
    text-align: left;
    padding-inline-start: 2px;
    font-weight: normal !important;
    color: var(--viewMonthDayBoxWeekLabel) !important;
}

calendar-month-day-box-item {
    margin: 1px;
    padding: 1px 1px;
}

.calendar-color-box {
    /* This rule should be adopted if the alarm image size is changed */
    min-height: 13px;
    background-image: linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.01) 50%, rgba(0, 0, 0, 0.05));
    border: 1px solid transparent;
    border-radius: 2px;
    background-color: var(--item-backcolor);
    color: var(--item-forecolor);
}

calendar-month-day-box calendar-month-day-box-item[allday="true"] .calendar-color-box {
    border-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset -1px -1px 0 rgba(255, 255, 255, 0.7), inset 1px 1px 0 rgba(255, 255, 255, 0.7);
}

.calendar-month-day-box-item-label {
    padding: 0px;
    margin: 0px;
}

.calendar-month-day-box-item-label[time="true"] {
    margin-inline-end: 4px;
}

.labeldaybox-container {
    border-right: 1px solid var(--viewBorderColor);
    border-top: 1px solid var(--viewBorderColor);
}

.dropshadow {
    height: 1.2em;
    margin: 1px;
    padding: 0px 1px;
    background-color: var(--viewDropshadowBackground);
    box-shadow: 1px 1px 3px rgba(68, 35, 0, 0.7) inset;
}

calendar-event-gripbar {
    -moz-box-align: center;
    -moz-box-pack: center;
    min-height: 4px;
    min-width: 4px;
    overflow: hidden;
}

calendar-event-gripbar[parentorient="vertical"][whichside="start"] {
    cursor: n-resize;
}

calendar-event-gripbar[parentorient="vertical"][whichside="end"] {
    cursor: s-resize;
}

calendar-event-gripbar[parentorient="horizontal"][whichside="start"] {
    cursor: w-resize;
}

calendar-event-gripbar[parentorient="horizontal"][whichside="end"] {
    cursor: e-resize;
}

calendar-event-box[orient="vertical"] .calendar-event-box-grippy-top image {
    list-style-image: url("chrome://calendar-common/skin/event-grippy-top.png");
    visibility: hidden;
}

calendar-event-box[orient="vertical"] .calendar-event-box-grippy-bottom image {
    list-style-image: url("chrome://calendar-common/skin/event-grippy-bottom.png");
    visibility: hidden;
}

calendar-event-box[orient="horizontal"] .calendar-event-box-grippy-top image {
    list-style-image: url("chrome://calendar-common/skin/event-grippy-left.png");
    visibility: hidden;
}

calendar-event-box[orient="horizontal"] .calendar-event-box-grippy-bottom image {
    list-style-image: url("chrome://calendar-common/skin/event-grippy-right.png");
    visibility: hidden;
}

calendar-event-box[gripBars="start"]:not([readonly="true"]):hover .calendar-event-box-grippy-top image,
calendar-event-box[gripBars="end"]:not([readonly="true"]):hover .calendar-event-box-grippy-bottom image,
calendar-event-box[gripBars="both"]:not([readonly="true"]):hover .calendar-event-box-grippy-top image,
calendar-event-box[gripBars="both"]:not([readonly="true"]):hover .calendar-event-box-grippy-bottom image {
    visibility: visible;
}

/* tooltips */
.tooltipBox {
    max-width: 40em;
}

.tooltipValueColumn {
    max-width: 35em; /* tooltipBox max-width minus space for label */
}

.tooltipHeaderLabel {
    font-weight: bold;
    text-align: right;
    margin-top: 0;
    margin-bottom: 0;
    margin-inline-start: 0;
    margin-inline-end: 1em; /* 1em space before value */
}

.tooltipHeaderDescription {
    font-weight: normal;
    text-align: left;
    margin: 0pt;
}

.tooltipBodySeparator {
    height: 1ex; /* 1ex space above body text, below last header. */
}

.tooltipBody {
    font-weight: normal;
    white-space: pre-wrap;
    margin: 0pt;
}

#conflicts-vbox .tooltipBody {
    overflow: auto;
    min-height: 250px;
}

#calendar-view-context-menu[type="event"] .todo-only,
#calendar-view-context-menu[type="todo"] .event-only,
#calendar-view-context-menu[type="mixed"] .event-only,
#calendar-view-context-menu[type="mixed"] .todo-only,
#calendar-item-context-menu[type="event"] .todo-only,
#calendar-item-context-menu[type="todo"] .event-only,
#calendar-item-context-menu[type="mixed"] .event-only,
#calendar-item-context-menu[type="mixed"] .todo-only {
    display: none;
}

.attendance-menu[itemType="single"] > menupopup > *[scope="all-occurrences"] {
    display: none;
}

.calendar-context-heading-label {
    font-weight: bold;
    color: menutext;
}

calendar-event-box,
calendar-editable-item,
calendar-month-day-box-item {
    opacity: 0.99;
    /* Do not change next line, since it would break item selection */
    -moz-user-focus: normal;
}

calendar-event-box[invitation-status="NEEDS-ACTION"],
calendar-editable-item[invitation-status="NEEDS-ACTION"],
calendar-month-day-box-item[invitation-status="NEEDS-ACTION"] {
    border: 2px dotted black;
    opacity: 0.6;
}

calendar-event-box[invitation-status="TENTATIVE"],
calendar-editable-item[invitation-status="TENTATIVE"],
calendar-month-day-box-item[invitation-status="TENTATIVE"],
calendar-event-box[status="TENTATIVE"],
calendar-editable-item[status="TENTATIVE"],
calendar-month-day-box-item[status="TENTATIVE"],
richlistitem[is="agenda-richlist-item"][status="TENTATIVE"] {
    opacity: 0.6;
}

calendar-event-box[invitation-status="DECLINED"],
calendar-editable-item[invitation-status="DECLINED"],
calendar-month-day-box-item[invitation-status="DECLINED"],
calendar-event-box[status="CANCELLED"],
calendar-editable-item[status="CANCELLED"],
calendar-month-day-box-item[status="CANCELLED"],
richlistitem[is="agenda-richlist-item"][status="CANCELLED"] {
    opacity: 0.5;
}

calendar-month-day-box-item[status="CANCELLED"] .calendar-color-box,
calendar-event-box[status="CANCELLED"] .calendar-color-box,
calendar-editable-item[status="CANCELLED"] .calendar-color-box,
richlistitem[is="agenda-richlist-item"][status="CANCELLED"] .agenda-container-box {
    text-decoration: line-through;
}

/* Navigation controls for the views */
#view-deck {
    border: solid ThreeDShadow;
}

:root[lwt-tree] #view-deck {
    background-color: var(--sidebar-background-color);
    border-color: var(--sidebar-border-color);
    scrollbar-color: rgba(128,128,128,.5) rgba(230,230,235,.5);
}

:root[lwt-tree-brighttext] #view-deck {
    scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3);
}

:root[systemcolors] #view-deck {
  background-color: -moz-Field;
}

.navigation-inner-box {
    border-bottom: 1px solid var(--calview-border-bottom-color);
}

.navigation-spacer-box {
    min-width: 15px;
    border-bottom: 1px solid var(--calview-border-bottom-color);
}

radiogroup#view-tabs{
    margin: 0;
}

radio.calview {
    -moz-appearance: none;
    min-width: unset;
    border-left: 1px solid var(--calview-border-color);
    border-right: 1px solid var(--calview-border-color);
    border-bottom: 1px solid var(--calview-border-bottom-color);
    margin: 0;
    padding: 3px 6px;
    -moz-user-focus: normal;
    background-color: transparent;
    color: inherit;
    font-size: 14px;
}

radio.calview > image {
    display: none;
}

radio.calview > hbox {
    margin: 2px;
}

radio.calview:not(:first-child) {
    margin-inline-start: -1px;
}


radio.calview[selected="true"] {
    background-image: linear-gradient(to bottom,
                      var(--calview-tabline-color) 2px, transparent 2px);
    border-bottom-width: 0;
    padding-bottom: 4px;
    color: ButtonText;
    font-weight: bold;
}

radio.calview:not([selected=true]):hover {
    background-color: rgba(0,0,0,.1);
}

:root[lwt-tree-brighttext] radio.calview:not([selected=true]):hover {
    background-color: rgba(249,249,250,.3);
}

:root[lwt-tree] #view-tabs > radio.calview[selected="true"] {
    background-color: var(--toolbar-bgcolor);
    color: var(--toolbar-color);
}

:root[lwt-tree] .navigation-bottombox {
    background-color: var(--toolbar-bgcolor) !important;
}

.view-header {
    font-weight: normal;
    font-size: 14px;
    color: inherit;
}

.view-header[type="end"] {
    text-align: right;
    margin-inline-end: 6px;
}

.navigation-inner-box {
    padding-inline-start: 6px;
    padding-inline-end: 6px;
    padding-bottom: 1px;
}

.navigation-bottombox {
    min-height: 4px;
    max-height: 4px;
}

.view-navigation-button {
    -moz-user-focus: normal;
    -moz-appearance: toolbarbutton;
    min-width: 22px;
}

.today-navigation-button {
    -moz-user-focus: normal;
    -moz-appearance: toolbarbutton;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    color: inherit;
    font-size: 14px;
}

:root[lwt-tree] .today-navigation-button {
  -moz-appearance: none;
  -moz-user-focus: normal;
  border: 1px solid transparent;
  border-radius: var(--toolbarbutton-border-radius);
}

:root[lwt-tree] .today-navigation-button:not([disabled="true"]):hover {
  background: var(--toolbarbutton-hover-background);
  border-color: var(--toolbarbutton-hover-bordercolor);
  box-shadow: var(--toolbarbutton-hover-boxshadow);
  color: inherit;
}

:root[lwt-tree-brighttext] .today-navigation-button:not([disabled="true"]):hover {
  background: rgba(255, 255, 255, .25);
  border-color: rgba(255, 255, 255, .5);
}

:root[lwt-tree] .today-navigation-button:not([disabled="true"]):hover:active {
  background: var(--toolbarbutton-active-background);
  border-color: var(--toolbarbutton-active-bordercolor);
  box-shadow: var(--toolbarbutton-active-boxshadow);
  transition-duration: 10ms;
}

:root[lwt-tree-brighttext] .today-navigation-button:not([disabled="true"]):hover:active {
  background: rgba(255, 255, 255, .4);
  border-color: rgba(255, 255, 255, .7);
  box-shadow: 0 0 rgba(255, 255, 255, .4) inset;
}

.view-navigation-button > .toolbarbutton-text {
    display: none;
}

.today-navigation-button > .toolbarbutton-icon {
    display: none;
}

.item-classification-box {
    width: 11px;
    height: 11px;
    display: none;
    -moz-context-properties: fill;
    fill: currentColor;
}

.item-classification-box[classification="PUBLIC"] {
    display: none;
}

.item-classification-box[classification="PRIVATE"] {
    list-style-image: url(chrome://calendar-common/skin/icons/private.svg);
    display: -moz-box;
}

.item-classification-box[classification="CONFIDENTIAL"] {
    list-style-image: url(chrome://calendar-common/skin/icons/confidential.svg);
    display: -moz-box;
}

@media (-moz-overlay-scrollbars) {
    .multiday-headerscrollbarspacer,
    .multiday-labelscrollbarspacer {
        display: none;
    }
}
