/*********************************************************************************************
 *                                              *
 * This is the css for the Lime theme for the Kopano WebApp.                 *
 *                                              *
 * (c) 2019 Kopano                                    *
 *                                              *
 *********************************************************************************************/

/*********************************************************************************************
 * The Login screen and the Welcome screen
 * =======================================
 ********************************************************************************************/
/* Background image of the login screen */
body.login,
#loading-mask,
#bg,
/* Background image of the Welcome screen */
body.zarafa-welcome {
  background: url(../img/background.jpg) no-repeat center center;
  background-size: cover;
}

body.login.theme-lime:after,
body.theme-lime #loading-mask:after,
body.theme-lime #bg:after,
body.theme-lime zarafa-welcome:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  z-index: -1;
  background: url(../img/background_lime.svg) center/cover no-repeat;
}

/* The Sign in button of the login screen */
body.login #form-container #submitbutton,
#loading-mask #form-container #submitbutton {
  background: #6da208;
}
/* Hover state and active state of the Sign in button */
body.login #form-container #submitbutton:hover,
#loading-mask #form-container #submitbutton:hover,
body.login #form-container #submitbutton:active,
#loading-mask #form-container #submitbutton:active {
  background: #5d8907;
}
/* The top bar of the Welcome dialog */
.zarafa-welcome-body > .x-panel-bwrap > .x-panel-body div.zarafa-welcome-title {
  border-left: 1px solid #82ba00;
  border-right: 1px solid #82ba00;
  background: #82ba00;
}

/*********************************************************************************************
 * The top menu bar
 * ================================
 * We will define the background color of the bar and hover and active colors of the buttons
 * in the bar.
 ********************************************************************************************/
/* The border line under the top menu bar */
body #zarafa-mainmenu {
  border-color: #82ba00;
}
/* The background color of the top menu bar */
body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct {
  background-color: #82ba00;
}
/* Background color of the hover state of the buttons in the top menu bar */
body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct .x-btn.x-btn-over,
/* Background color of the active state of the buttons (i.e. when the buttons get clicked) */
body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct .x-btn.x-btn-over.x-btn-click,
/* Background color of the selected button */
body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct .zarafa-maintabbar-maintab-active,
/* Background color of the hover state of selected button */
body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct .zarafa-maintabbar-maintab-active.x-btn-over,
/* Background color of the active state of selected button */
body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct .zarafa-maintabbar-maintab-active.x-btn-over.x-btn-click {
  background-color: #6da208 !important;
}

/****************************************************************************
 * Action color
 * ===============
 * Some elements have a different color than the default color of these elements
 * to get extra attention, e.g. 'call-to-action' buttons, the current day
 * in the calendar, etc.
 ****************************************************************************/
/* normal state */
.x-btn.zarafa-action .x-btn-small,
.x-btn.zarafa-action .x-btn-medium,
.x-btn.zarafa-action .x-btn-large,
/* active state */
.x-btn.zarafa-action.x-btn-over.x-btn-click .x-btn-small,
.x-btn.zarafa-action.x-btn-over.x-btn-click .x-btn-medium,
.x-btn.zarafa-action.x-btn-over.x-btn-click .x-btn-large,
.x-btn.zarafa-action.x-btn-click .x-btn-small,
.x-btn.zarafa-action.x-btn-click .x-btn-medium,
.x-btn.zarafa-action.x-btn-click .x-btn-large,
/* Special case: Popup, Windows, or Messageboxes (first button is by default styled as the action button) */
.x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-small,
.x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-medium,
.x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-large,
.x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-small,
.x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-medium,
.x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-large,
.x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-small,
.x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-medium,
.x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-large,
.x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-small,
.x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-medium,
.x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-large,
.x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-small,
.x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-medium,
.x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-large,
.x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-small,
.x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-medium,
.x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-large,
.x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-small,
.x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-medium,
.x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-large,
.x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-small,
.x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-medium,
.x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-large,
.x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-small,
.x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-medium,
.x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-large,
.x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-small,
.x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-medium,
.x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-large,
.x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-small,
.x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-medium,
.x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-large,
.x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-small,
.x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-medium,
.x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-large,
/* action button in reminder popout */
.k-reminderpanel .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-small,
.k-reminderpanel .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-small,
.k-reminderpanel .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-small,
/* Current day in the calendar */
.zarafa-freebusy-panel .x-freebusy-timeline-container .x-freebusy-header .x-freebusy-header-body .x-freebusy-timeline-day.x-freebusy-timeline-day-current table tr.x-freebusy-timeline-day td,
/* The date pickers */
.x-date-picker .x-date-inner td.x-date-today a,
.x-date-picker .x-date-mp table td.x-date-mp-sel a,
.x-date-picker .x-date-mp table tr.x-date-mp-btns td button.x-date-mp-ok {
	background: #6da208 !important;
}

/* focused action button */
.x-btn.zarafa-action.x-btn-focus .x-btn-small, .x-btn.zarafa-action.x-btn-focus .x-btn-medium, .x-btn.zarafa-action.x-btn-focus .x-btn-large {
 background: #6da208 !important;
}

/* hover state */
.x-btn.zarafa-action.x-btn-over .x-btn-small,
.x-btn.zarafa-action.x-btn-over .x-btn-medium,
.x-btn.zarafa-action.x-btn-over .x-btn-large,
/* Special case: Popup, Windows, or Messageboxes */
.x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-small,
.x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-medium,
.x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-large,
.x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-small,
.x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-medium,
.x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-large,
.x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-small,
.x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-medium,
.x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-large,
.x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-small,
.x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-medium,
.x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-large,
/* action button in reminder popout */
.k-reminderpanel .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-small,
/* The date pickers */
.x-date-picker .x-date-mp table tr.x-date-mp-btns td button.x-date-mp-ok:hover {
	background: #5d8907 !important;
}

/* The borders of the current day in the scheduling panel of metting requests */
.zarafa-freebusy-panel .x-freebusy-timeline-container .x-freebusy-header .x-freebusy-header-body .x-freebusy-timeline-day.x-freebusy-timeline-day-current table tr.x-freebusy-timeline-hour td:first-child,
.zarafa-freebusy-panel .x-freebusy-timeline-container .x-freebusy-body .x-freebusy-background .x-freebusy-timeline-day.x-freebusy-timeline-day-current td:first-child {
 border-left-color: #6da208;
}
.zarafa-freebusy-panel .x-freebusy-timeline-container .x-freebusy-body .x-freebusy-background .x-freebusy-timeline-day.x-freebusy-timeline-day-current {
 border-right-color: #6da208;
}

/* Counters in the hierarchy */
.zarafa-hierarchy-node-total-count span.zarafa-hierarchy-node-counter,
.zarafa-hierarchy-node-unread-count span.zarafa-hierarchy-node-counter,
/* Font color of the week numbers in the date pickers */
.x-date-picker .x-date-inner td.x-date-weeknumber a {
 color: #6da208;
}

/* Current day in the calendar */
.zarafa-freebusy-panel .x-freebusy-timeline-container .x-freebusy-header .x-freebusy-header-body .x-freebusy-timeline-day.x-freebusy-timeline-day-current,
/* border colors of the current day and month in the date pickers */
.x-date-picker .x-date-inner td.x-date-today a,
.x-date-picker .x-date-mp table td.x-date-mp-sel a {
 border-color: #6da208;
}

/*********************************************************************
 * Side panels
 * ================
 *********************************************************************/
#zarafa-navigationpanel .x-panel-header,
.zarafa-widgetpanel .x-panel-header {
	background-color: #c5e875;
	border-color: #c5e875;
}

/*********************************************************************
 * Tabs
 * ====
 * The background color of the inactive tabs of the main panel can be
 * changed to better suit the theme.
 *********************************************************************/
/* The border of an inactive tab */
#zarafa-mainpanel > .x-tab-panel-header > .x-tab-strip-wrap > ul.x-tab-strip li:not(.x-tab-strip-active) {
	border-color: #c5e875 !important;
}
/* The background of an inactive tab */
#zarafa-mainpanel > .x-tab-panel-header > .x-tab-strip-wrap > ul.x-tab-strip li:not(.x-tab-strip-active) .x-tab-right {
	background: #c5e875;
}
/* The hover state of the border of an inactive tab */
#zarafa-mainpanel > .x-tab-panel-header > .x-tab-strip-wrap > ul.x-tab-strip li:not(.x-tab-strip-active):hover {
	border-color: #b3e048 !important;
}
/* The hover state of the background of an inactive tab */
#zarafa-mainpanel > .x-tab-panel-header > .x-tab-strip-wrap > ul.x-tab-strip li:not(.x-tab-strip-active):hover .x-tab-right {
	background: #b3e048;
}

/*********************************************************************
 * Selected items in grids and trees
 * =================================
 * The background color of the selected items in grids and trees can
 * be changed to better suit the theme.
 *********************************************************************/
/* selected item in grids */
.x-grid3-row.x-grid3-row-selected,
.x-grid3 .x-grid3-row-selected .zarafa-grid-button-container,
/* selected item in tree hierarchies */
.x-tree-node .zarafa-hierarchy-node.x-tree-selected,
/* selected items in boxfields (e.g. the recipient fields) */
.x-zarafa-boxfield ul .x-zarafa-boxfield-item-focus,
.x-zarafa-boxfield ul .x-zarafa-boxfield-recipient-item.x-zarafa-boxfield-item-focus,
/* selected items in card view of Contacts context */
div.zarafa-contact-cardview-selected,
/* selected items in icon view of Notes context */
.zarafa-note-iconview-selected,
/* selected category in the Settings context */
#zarafa-mainpanel-contentpanel-settings .zarafa-settings-category-panel .zarafa-settings-category-tab-active,
/* selected date in date pickers */
.x-date-picker .x-date-inner td.x-date-selected:not(.x-date-today) a,
.x-date-picker .x-date-inner td.x-date-selected:not(.x-date-today) a:hover {
	background-color: #e1f5b2 !important;
	border-color: #e1f5b2;
}

/*********************************************************************
 * Buttons
 * =================================
 *********************************************************************/
/* Selected x-menu */
.x-menu-item-selected {
 background-color: #e1f5b2;
}

/*********************************************************************
 * Extra information about items
 * =================================
 * Sometimes extra information is shown in opened items. (e.g. 'You replied
 * to this message etc'). This can be styled with the following rules.
 *********************************************************************/
.preview-header-extrainfobox,
.preview-header-extrainfobox-item,
.k-appointmentcreatetab .zarafa-calendar-appointment-extrainfo div,
.k-taskgeneraltab .zarafa-calendar-appointment-extrainfo div,
.zarafa-mailcreatepanel > .x-panel-bwrap > .x-panel-body .zarafa-mailcreatepanel-extrainfo div {
 background: #e1f5b2 !important;
 color: #222222;
}

/*********************************************************************
 * Settings
 * =================================
 *********************************************************************/
/* Links in the About text in Settings */
#zarafa-mainpanel-contentpanel-settings .zarafa-settings-category-widget-panel .zarafa-settings-about-text a {
	background-color: #82ba00;
}
#zarafa-mainpanel-contentpanel-settings .zarafa-settings-category-widget-panel .zarafa-settings-about-text a:hover {
	background-color: #6da208;
}

/* Active calendar tab stroke */
.zarafa-calendar-tabarea-stroke.zarafa-calendar-tab-selected {
  border-top-color: #6da208 ;
}

/*********************************************************************
 * Focused items
 * =================================
 *********************************************************************/
 /* Action button */
 .x-btn.zarafa-action.x-btn-focus .x-btn-small, .x-btn.zarafa-action.x-btn-focus .x-btn-medium, .x-btn.zarafa-action.x-btn-focus .x-btn-large {
 background: #6da208 !important;
}

/* Normal button */
.x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) ~ .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-focus:not(.zarafa-action):not(.x-btn-over):not(.x-btn-click) .x-btn-small,
.x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) ~ .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-focus:not(.zarafa-action):not(.x-btn-over):not(.x-btn-click) .x-btn-small,
.x-btn.x-btn-focus:not(.zarafa-action):not(.x-btn-click) .x-btn-small,
.x-btn.x-btn-focus:not(.zarafa-action):not(.x-btn-click) .x-btn-medium,
.x-btn.x-btn-focus:not(.zarafa-action):not(.x-btn-click) .x-btn-large,
.x-toolbar .x-btn.x-btn-focus:not(.zarafa-action):not(.x-btn-noicon) .x-btn-small {
 border: 1px solid #6da208 !important;
}

/* Login */
body.login #form-container input:focus,
#loading-mask #form-container input:focus {
 border-color: #6da208;
}

input:focus {
	border-color: #6da208;
}

/* Form elements */
.x-form-text.x-form-focus:not(.x-trigger-noedit) {
	border-color: #6da208 !important;
}

.x-form-field-wrap.x-trigger-wrap-focus:not(.x-freebusy-userlist-container) {
	border-color: #6da208;
}

input.x-form-text.x-form-field.x-form-focus {
	border-color: #6da208 !important;
}

.x-form-field-wrap.x-trigger-wrap-focus:not(.x-freebusy-userlist-container) input.x-form-text.x-form-field.x-form-focus {
 border-color: #6da208 !important;
}

/*
 * Contact filter
 */
.contact-characterstrip .x-btn-pressed .x-btn-small {
 background-color: #e1f5b2;
 border-color: #e1f5b2;
}

.k-selection {
  background-color: #e1f5b2 !important;
}

/*****************************
 * Unread items border styling
 *****************************/

/* Unread items */
.theme-lime.k-unreadborders .x-grid3-row.x-grid3-row-collapsed.mail_unread > table,
.theme-lime.k-unreadborders .x-grid3-row.x-grid3-row-expanded.mail_unread > table {
	border-left: 4px solid #6da208 !important;
}

/* Selected mail item */
.theme-lime .x-grid3-row.x-grid3-row-expanded.mail_read.x-grid3-row-selected > table {
	border-left: 4px solid #e1f5b2 !important;
}

/* Hover selected item */
.theme-lime .x-grid3-row.x-grid3-row-expanded.mail_read.x-grid3-row-selected.x-grid3-row-over > table,
.theme-lime .x-grid3-row.x-grid3-row-collapsed.mail_read.x-grid3-row-selected > table {
	border-left: 4px solid #e1f5b2 !important;
}

/* Counters for conversation in the mail grid */
.x-grid3-row .k-conversation-count {
	color: #6da208;
}

.preview-header-sender-initial {
 color: #82ba00;
}