/*********************************************************************************************
 *                                                                                           *
 * This is the css for the Orange theme for the Kopano WebApp.                               *
 *                                                                                           *
 * (c) 2018 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-orange:after,
body.theme-orange #loading-mask:after,
body.theme-orange #bg:after,
body.theme-orange 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_orange.svg);
    background-size: cover;
}

/* The Sign in button of the login screen */
body.login #form-container #submitbutton,
#loading-mask #form-container #submitbutton {
    background: #dc7100;
}
/* 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: #d06c00;
}
/* The top bar of the Welcome dialog */
.zarafa-welcome-body > .x-panel-bwrap > .x-panel-body div.zarafa-welcome-title {
    border-left: 1px solid #ec8354;
    border-right: 1px solid #ec8354;
    background: #ec8354;
}

/*********************************************************************************************
 * 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: #ec8354;
}
/* The background color of the top menu bar */
body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct {
    background-color: #ec8354;
}
/* 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: #dc7100 !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,
/* Current day in the calendar */
.zarafa-calendar-container-header .zarafa-canvas-header-background .zarafa-styling-element-active,
.zarafa-calendar-container-header .zarafa-canvas-header-background .zarafa-styling-element-current-day,
/* 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: #dc7100 !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: #dc7100 !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,
/* The date pickers */
.x-date-picker .x-date-mp table tr.x-date-mp-btns td button.x-date-mp-ok:hover {
	background: #d06c00 !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: #dc7100;
}
.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: #dc7100;
}

/* 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: #dc7100;
}

/* 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: #dc7100;
}

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

/*********************************************************************
 * 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: #facfac !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: #facfac;
}
/* 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: #f8c49a !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: #f8c49a;
}

/*********************************************************************
 * 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: #fce8ce !important;
	border-color: #fce8ce;
}

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

/*********************************************************************
 * 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: #fce8ce !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: #ec8354;
}
#zarafa-mainpanel-contentpanel-settings .zarafa-settings-category-widget-panel .zarafa-settings-about-text a:hover {
	background-color: #dc7100;
}

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

/*********************************************************************
 * 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: #dc7100 !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 #dc7100 !important;
}

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

input:focus {
	border-color: #dc7100;
}

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

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

input.x-form-text.x-form-field.x-form-focus {
	border-color: #dc7100 !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: #dc7100 !important;
}

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

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