/*********************************************************************************************
 *                                                                                           *
 * This is the css for the Purple theme for the Zarafa WebApp.                               *
 *                                                                                           *
 * (c) 2016 Zarafa.com                                                                       *
 *                                                                                           *
 *********************************************************************************************/

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

/*********************************************************************************************
 * The top menu bar of Zarafa WebApp
 * ================================
 * 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: #490e67;
}
/* The background color of the top menu bar */
body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct {
    background-color: #490e67;
}
/* 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: #702277 !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: Messageboxes */
.x-window-dlg .x-toolbar-left .x-toolbar-cell:not(.x-hide-offsets) button,
.x-window-dlg .x-toolbar-left .x-toolbar-cell:not(.x-hide-offsets) button:active,
/* 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: #702277 !important;
}
/* For popup or windows, the first button is styled as active */
.x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:first-child .x-btn:not(.zarafa-normal) button,
.x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:first-child .x-btn:not(.zarafa-normal) button:active {
	background: #702277;
}
.x-window-dlg .x-toolbar-left .x-toolbar-cell:not(.x-hide-offsets) ~ .x-toolbar-cell:not(.x-hide-offsets) button {
	background-color: transparent !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: Messageboxes */
.x-window-dlg .x-toolbar-left .x-toolbar-cell:not(.x-hide-offsets) button:hover,
/* The date pickers */
.x-date-picker .x-date-mp table tr.x-date-mp-btns td button.x-date-mp-ok:hover {
	background: #541959 !important;
}
/* For popup or windows, the first button is styled as active */
.x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:first-child .x-btn:not(.zarafa-normal) button:hover {
	background: #541959;
}

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

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

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

/*********************************************************************
 * 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: #e2dfe3 !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: #e2dfe3;
}
/* 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: #d7d3d9 !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: #d7d3d9;
}

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

/*********************************************************************
 * 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,
.zarafa-appointmentcreatetab .zarafa-calendar-appointment-extrainfo div {
  background: #e2dfe3;
  color: #222222;
}
.preview-header-extrainfobox{
  border: 1px solid #490e67;
}

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

/*************************************************************************
 * Lines
 * =================================
 *************************************************************************/
/* Inputs of the login screen */
body.login #form-container input[type="text"],
body.login #form-container input[type="password"],
#loading-mask #form-container input[type="text"],
#loading-mask #form-container input[type="password"],
/* Welcome panel */
.zarafa-welcome-body > .x-panel-bwrap > .x-panel-body > div,
.zarafa-welcome-body > .x-panel-bwrap .x-panel-footer,
/* Side panels */
#zarafa-navigationpanel,
.zarafa-widgetpanel,
/* Panels general */
.x-panel,
.x-panel .x-panel-header,
.x-panel .x-panel-body,
/* Tab panels */
.x-tab-panel-body,
/* Mail panel with preview on the right */
#zarafa-mainpanel-contentpanel-mail.zarafa-preview-right .zarafa-context-mainpanel,
/* Mail preview panel on the right */
#zarafa-mainpanel-contentpanel-mail.zarafa-preview-right #zarafa-main-content-mail-preview,
/* Mail panel with preview on the bottom */
#zarafa-mainpanel-contentpanel-mail.zarafa-preview-bottom .zarafa-context-mainpanel,
/* Mail preview panel on the bottom */
#zarafa-mainpanel-contentpanel-mail.zarafa-preview-bottom #zarafa-main-content-mail-preview,
/* Preview header */
.preview-header,
/* Inputs and textareas */
.x-form-text, textarea.x-form-field,
/* Trigger buttons */
.x-form-field-trigger-wrap .x-form-trigger,
.x-form-field-trigger-wrap .x-form-spinner-trigger,
.x-form-field-wrap .x-form-trigger,
.x-form-field-wrap .x-form-spinner-trigger,
/* Fieldset */
.x-fieldset,
/* Grids */
.x-grid3-header,
.x-grid3-hd-row td .x-grid3-hd-inner .x-grid3-hd-btn,
.x-grid3-hd-row td.sort-desc .x-grid3-hd-inner,
.x-grid3-hd-row td.sort-asc .x-grid3-hd-inner,
.x-grid3-hd-row td.sort-desc .x-grid3-hd-inner .x-grid3-hd-btn,
.x-grid3-hd-row td.sort-asc .x-grid3-hd-inner .x-grid3-hd-btn,
.x-grid3-row,
.x-grid3-row-over,
.x-grid3-row.x-grid3-row-selected,
/* Toolbars */
.x-toolbar,
.x-panel-noborder .x-panel-tbar-noborder .x-toolbar,
.x-panel-bbar .x-toolbar, .x-panel-tbar .x-toolbar,
.x-toolbar .x-btn .x-btn-small .x-btn-split button.x-btn-text,
/* Menus */
.x-menu .x-menu-item-active,
/* Tab strip */
ul.x-tab-strip,
/* Hierarchy panel */
.zarafa-hierarchy-treepanel-bottombar,
/* Main panel */
#zarafa-mainpanel #zarafa-mainpanel-content > .x-panel,
#zarafa-mainpanel > .x-tab-panel-bwrap > .x-tab-panel-body > div > .x-panel,
#zarafa-mainpanel > .x-tab-panel-bwrap > .x-tab-panel-body > div > div#zarafa-mainpanel-contentpanel-mail > .x-panel-bwrap > .x-panel-body > .x-panel,
/* Boxfields */
.x-zarafa-boxfield ul .x-zarafa-boxfield-item,
/* Mail create panel */
.zarafa-mailcreatepanel > .x-panel-bwrap > .x-panel-body .zarafa-mailcreatepanel-field-subject,
/* Appointment create panel */
.zarafa-appointmentcreatetab .field-to,
.zarafa-appointmentcreatetab .subject-panel,
.zarafa-appointmentcreatetab .location-panel,
.zarafa-appointmentcreatetab .datetime-panel table tr:nth-child(2),
.zarafa-appointmentcreatetab .busystatus-panel,
.zarafa-appointmentcreatetab .label-panel,
.zarafa-appointmentcreatetab .attachments-panel,
/* Contact create panel */
.zarafa-contactcreatepanel .zarafa-contactgeneraltab .contact_photo_box,
/* Calendar tooltip */
.zarafa-canvas-quicktip,
/* Dialogs */
.x-window .x-window-bwrap .x-window-body > div > .x-panel > .x-panel-header,
.x-panel-ghost .x-window-bwrap .x-window-body > div > .x-panel > .x-panel-header,
/* Folder properties dialog */
.x-window .x-window-bwrap .x-window-body > div .zarafa-folderproperties.x-panel.tabpanel-container .tab-permissions .userlist-panel,
.x-panel-ghost .x-window-bwrap .x-window-body > div .zarafa-folderproperties.x-panel.tabpanel-container .tab-permissions .userlist-panel,
/* Scheduling panel */
.zarafa-freebusy-panel .x-freebusy-timeline-container .x-freebusy-header .x-freebusy-header-body div.x-freebusy-timeline-day,
.zarafa-freebusy-panel .x-freebusy-timeline-container .x-freebusy-header .x-freebusy-header-body div.x-freebusy-timeline-day table tr.x-freebusy-timeline-hour td,
.zarafa-freebusy-panel .x-freebusy-timeline-container .x-freebusy-header .x-freebusy-header-body .x-freebusy-timeline-day.x-freebusy-timeline-day-current table.x-freebusy-timeline-day-sum,
.zarafa-freebusy-panel .x-freebusy-timeline-container .x-freebusy-body .x-freebusy-background .x-freebusy-timeline-day,
.zarafa-freebusy-panel .x-freebusy-timeline-container .x-freebusy-body .x-freebusy-background .x-freebusy-timeline-day td,
.zarafa-freebusy-panel .x-panel.suggestionlist .x-btn.zarafa-freebusy-suggestionrow .x-btn-small,
/* Search toolbox */
.zarafa-search-toolbox,
/* Settings panel */
#zarafa-mainpanel-contentpanel-settings .zarafa-settings-category-panel,
#zarafa-mainpanel-contentpanel-settings .zarafa-settings-category-widget-panel .zarafa-settings-keyboard-shortcut-row,
.zarafa-settings-signatures .x-grid3-row,
/* Date picker */
.x-date-picker,
.x-date-picker .x-date-middle .x-btn-small em,
.x-date-picker .x-date-middle .x-btn-small em button,
.x-date-picker .x-date-inner th,
.x-date-picker .x-date-bottom,
.x-date-picker .x-date-mp table td.x-date-mp-sep,
.x-date-picker .x-date-mp table tr.x-date-mp-btns td,
#zarafa-navigationpanel .x-date-picker .x-date-inner th:first-child {
	border-color: #e2dfe3;
}

/* Tab strip */
ul.x-tab-strip li,
ul.x-tab-strip li.x-tab-strip-active,
/* Tiny MCE */
.mce-panel {
	border-color: #e2dfe3 !important;
}

/* Date picker */
.x-date-picker .x-date-inner td.x-date-weeknumber {
	border-right-color: #e2dfe3;
}

/* Buttons */
.x-btn .x-btn-small, 
.x-btn .x-btn-medium, 
.x-btn .x-btn-large,
/* Panels general */
.x-panel .x-panel-header,
/* Menus */
.x-menu .x-menu-scroller.x-menu-item-active:active,
.x-menu .x-menu-list li.x-menu-list-item.x-menu-item-active:active a,
.x-menu .x-menu-list li.x-menu-sep-li .x-menu-sep,
/* Tab strip */
ul.x-tab-strip li .x-tab-right,
/* Dialogs */
.x-window .x-window-tl,
.x-panel-ghost .x-window-tl,
/* Scheduling panel */
.zarafa-freebusy-panel .x-freebusy-timeline-container .x-freebusy-header .x-freebusy-header-body div.x-freebusy-timeline-day table tr.x-freebusy-timeline-day td,
/* Date picker */
.x-date-picker .x-date-mp table tr.x-date-mp-btns td button {
  background-color: #e2dfe3;
}
/* Buttons */
.x-btn.x-btn-over.x-btn-click .x-btn-small, 
.x-btn.x-btn-over.x-btn-click .x-btn-medium, 
.x-btn.x-btn-over.x-btn-click .x-btn-large, 
.x-btn.x-btn-click .x-btn-small, 
.x-btn.x-btn-click .x-btn-medium, 
.x-btn.x-btn-click .x-btn-large {
  background-color: #e2dfe3 !important;
}
/* Fade block in titlebar of dialog header */
.x-window .x-window-tl .x-window-tr .x-window-tc .x-window-header .fade,
.x-panel-ghost .x-window-tl .x-window-tr .x-window-tc .x-window-header .fade {
  background: linear-gradient(to right, rgba(226, 223, 227, 0) 0%, #e2dfe3 50%, #e2dfe3 100%);
}

