/****************************************
 * Cecilienstift theme for Kopano-WebApp
 ****************************************/

/*********************************************************************************************
 * 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/Mutterhaus.jpg) no-repeat center center;
    background-size: cover;
}

/* The logo in the Login screen. Maximum size of the logo image is 220x60px. */
body.login #form-container #logo,
#loading-mask #form-container #logo {
/*	background: url(../img/logo_login.png) !important; */
	height: 73px !important;	
}

/* The Sign in button of the login screen */
body.login #form-container #submitbutton,
#loading-mask #form-container #submitbutton {
    background: #b81472;
}

/* The spinner of the login/loading screen */
body.login #form-container.loading .right,
#loading-mask #form-container.loading .right {
/*  background: url(../img/spinner.png) no-repeat center center; */
}

/* 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: #b81472;
    opacity: 0.9;
    box-shadow: 1px 1px 5px grey;
}

/* The top bar of the Welcome dialog */
.zarafa-welcome-body > .x-panel-bwrap > .x-panel-body div.zarafa-welcome-title {
    border-left: 1px solid #b81472;
    border-right: 1px solid #b81472;
    background: #b811472;
}

/*********************************************************************************************
 * The top menu bar of Kopano 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:  #009fe1;
    background-color: #009fe1;
}
/* The background color of the top menu bar */
body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct {
    background-color:  #009fe1;
}
/* 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: #b81472 !important;
}
/* Text color of the buttons in the top menu bar */
body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct .x-btn button.x-btn-text {
	color: #FFF;
	opacity: 0.7;

}
/* Text color of the selected button in the top menu bar */
body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct .zarafa-maintabbar-maintab-active button.x-btn-text,
body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct .zarafa-maintabbar-maintab-active.x-btn-over button.x-btn-text,
body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct .zarafa-maintabbar-maintab-active.x-btn-over.x-btn-click button.x-btn-text {
    color: #ffffff;
    opacity: 1;
}

/****************************************************************************
 * The logo (shown on the right below the top bar)
 * ===============================================
 * The maximum height of the image that can be shown is 45px.
 ****************************************************************************/
.zarafa-maintoolbar {
/*    background-image: url(../img/kopano-webapp-logo.png) !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.
 ****************************************************************************/
/* Buttons, normal state */
.x-btn.zarafa-action .x-btn-small,
.x-btn.zarafa-action .x-btn-medium,
.x-btn.zarafa-action .x-btn-large,
/* Buttons, 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,
/* For popup or windows, the first button is styled as action button */
.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,
/* 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,
.zarafa-freebusy-panel .x-freebusy-timeline-container .x-freebusy-header .x-freebusy-header-body .x-freebusy-timeline-day.x-freebusy-timeline-day-current table,
.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, 
/* For some reason buttons normal state again */
.x-btn.zarafa-action .x-btn-small, .x-btn.zarafa-action .x-btn-medium, .x-btn.zarafa-action .x-btn-large {
	background: #b81472 !important;
}

.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;
}

/* Buttons, 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,
/* For popup or windows, the first button is styled as action button */
.x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:first-child .x-btn:not(.zarafa-normal) button:hover,
/* 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: #b81472 !important;
	opacity: 0.9;
	box-shadow: 1px 1px 5px grey;
}

/* The borders of the current day in the scheduling panel of meeting 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: #b81472;
}
.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: #b81472;
}

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

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