/*********************************************************************************************
 *                                                                                           *
 * This is the css for the High Contrast 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;
}

/*********************************************************************************************
 * The top menu bar
 * ================================
 ********************************************************************************************/
body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct .x-btn button.x-btn-text,
body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct .x-btn.x-btn-over button.x-btn-text,
body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct .x-btn.x-btn-over.x-btn-click button.x-btn-text,
body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct #mainmenu-logintext {
	opacity: 1;
}

/*********************************************************************
 * 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: #cfd2dc !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: #cfd2dc;
}
/* 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: #c3c7d3 !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: #c3c7d3;
}

/*********************************************************************
 * 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 .x-grid3-row-selected .zarafa-grid-button-container,
.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: #b9dcf5 !important;
	border-color: #b9dcf5;
}

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

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

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

/* Buttons */
.x-btn .x-btn-small,
.x-btn .x-btn-medium,
.x-btn .x-btn-large,
/* Panels general in the mainview, not in the x-windows */
div.zarafa-mainview .x-panel .x-panel-header,
.zarafa-widgetpanel.x-panel .x-panel-header,
.zarafa-navigation.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,
/* 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: #cfd2dc;
}

/* 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: #cfd2dc !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(207, 210, 220, 0) 0%, #cfd2dc 50%, #cfd2dc 100%);
}

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

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

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

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

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

