/* %%%%%%%%%%%%%%%%%%%%%%%%%%%% Template %%%%%%%%%%%%%%%%%%%%%%%% */

/*********************************************************************************************
 *
 * This file contains the extra styling for the Example Theme of the Kopano WebApp. It can be
 * used as a base for writing a new theme. The most common elements to style have been given
 * a new style in this file. Styles rules can be removed or more style rules can be added if
 * a theme designer wants to.
 *
 ********************************************************************************************/

/*********************************************************************************************
 * The Login screen and the Welcome screen
 * =======================================
 ********************************************************************************************/
 body.login #form-container #content, #loading-mask #form-container #content {
    background: #fcfcfc;
}
body.login #form-container, #loading-mask #form-container {
    visibility: unset;
}


 /* Background image of the login screen */
body.login,
#loading-mask,
#bg,
/* Background image of the Welcome screen */
body.zarafa-welcome {
    background: url(../img/bg-schue.jpg);
    /*background-size: cover;
    background-color: #f7f7f7*/;
}
/* 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/schue-logo-neu.png) no-repeat right center;
    margin-top: -15%;
    height: 291px;
    background-size: 100%;
    position: relative;
    margin-left: -18px;
    width: 264px;
}
/* The Sign in button of the login screen */
body.login #form-container #submitbutton,
#loading-mask #form-container #submitbutton {
    background: #404040; 
}
/* Sign in button:hover of login screen */
body.login > #form-container #submitbutton:hover {
    background-color: #00b5cc
}

/* Hover state and active state of the Sign in button */
body.login #form-container #submitbutton:hovsmaller,
#loading-mask #form-container #submitbutton:hover,
body.login #form-container #submitbutton:active,
#loading-mask #form-container #submitbutton:active {
    background: url(../img/menu-li-active.png) 0 0% repeat-x transparent;
}
/* Selected Mail item in grid 3 row */
.x-grid3-row-selected{
    background: #00b5cc33 !important;

}
/* Hover state of selected item in kopano menu */
.x-tree-node .zarafa-hierarchy-node.x-tree-selected {
    /*background-color: #e4a024;*/
    background-color:rgba(0, 181, 204, 0.4) /* etwas heller */ 
}

/* Hover state of zarafa main panel */
#zarafa-mainpanel-contentpanel-settings .zarafa-settings-category-panel .zarafa-settings-category-tab-active {
   /* background-color: #e4a024; */
   background-color: rgba(0, 181, 204, 0.4) /* etwas heller */ 
}

/* New messages counter next to folders */
.zarafa-hierarchy-node-total-count span.zarafa-hierarchy-node-counter, .zarafa-hierarchy-node-unread-count span.zarafa-hierarchy-node-counter {
    color: #00000080;
}


/* 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;
}
/* The top bar of the Welcome dialog */
.zarafa-welcome-body > .x-panel-bwrap > .x-panel-body div.zarafa-welcome-title {
    border-left: 1px solid #a30015;
    border-right: 1px solid #a30015;
    background:linear-gradient(to bottom,  #ffffff 0%,#e8e8e8 100%);
}

/*********************************************************************************************
 * 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: rgb(58, 58, 58);*/
    border-bottom: 1px solid #dedede;
}
/* The background color of the top menu bar */
body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct {
    background-color: #00B5CC;
}
/* 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: url(../img/menu-li-active.png) 0 0% repeat-x transparent;*/
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.4) !important;
}
/* Text color of top menu bar in general */
body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct {
    color: #fefefe;
}
/* 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: #fefefe;
}
/* 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: #fff;
    /*opacity: 1;*/
}
/* Text color of button:hover and clicked button in top menu bar */

body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct .x-btn button.x-btn-text:hover {
    color: #fff;
}

/****************************************************************************
 * 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/logo-schue.png);
    background-size: 270px;
    padding-bottom: 15px;
}