/* %%%%%%%%%%%%%%%%%%%%%%%%%%%% 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: #fff;
    border-radius: 10px;
}
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-color: #B2A087 !important;
}
body.login, #loading-mask, #bg, body.zarafa-welcome {
    background-image: url(../img/hintergruende/laerbusch-logo2020.png);
    background-size: 100%;
    position: relative;
#    background-position: 10% 38%;    
#    background-repeat: repeat;
}

/* 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/laerlogo_gold.png) no-repeat right center;
    margin-top: -15%;
    height: 291px;
    background-size: 100%;
    position: relative;
    margin-left: -18px;
    width: 264px;
}

body.login #form-container h2 {
    display: none !important;
}

/* The Sign in button of the login screen */
body.login #form-container #submitbutton,
#loading-mask #form-container #submitbutton {
    /*background: #0067B2;*/
	background: #B2A087;
}
/* Sign in button:hover of login screen */
body.login > #form-container #submitbutton:hover {
    /*background-color: #114b7496;*/
	background-color: #ff0000;
}

/* 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-color: #e8e8e8;
}
/* Selected Mail item in grid 3 row */
.x-grid3-row-selected{
    background: #9c8463 !important;
}
/* Hover state of selected item in kopano menu */
.x-tree-node .zarafa-hierarchy-node.x-tree-selected {
    /*background-color: #e4a024;*/
    /*background-color:#8db2e3;*/
     /* background-color: #a6a6a6;*/
	background-color: #b2a087;	
}


/* Hover state of zarafa main panel */
#zarafa-mainpanel-contentpanel-settings .zarafa-settings-category-panel .zarafa-settings-category-tab-active {
   /* background-color: #e4a024; */
   /*background-color: #8db2e3;*/ /* etwas heller */
       background-color: #a6a6a6;	
}

/* 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:  #114b7496;*/
	color: #da0b1c;
}


/* The spinner of the login/loading screen */
body.login #form-container.loading .right,
#loading-mask #form-container.loading .right {
  background: url(../img/spinner3.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 #3c4875;
    border-right: 1px solid #3c4875;
    background:linear-gradient(to bottom,  #f2f2f2 0%,#e8e8e8 100%);
    color: #000000;
}

/*********************************************************************************************
 * 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;*/
	border-bottom: 1px solid #e6e6e6;
}
/* The background color of the top menu bar */
body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct {
    /*background-color: #114a74;*/
	background-color: #b2a087;
}
/* 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 {
	color: #ffffff;
	background-color: #8c775a !important;
}
/* 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: #114a74 !important;*/
   background-color: #9c8463 !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;
    background-color:
    /*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/laerlogo_gold.png);
    background-size: 150px;
    padding-bottom: 15px;
}

/* Anpassungen "Hover-Over" Ticket #84238 */

.x-grid3-row-over {
    background: #b2a087;
}


/* New mail button */
.x-btn.zarafa-action .x-btn-small, .x-btn.zarafa-action .x-btn-medium, .x-btn.zarafa-action .x-btn-large{
	background: #b2a087 !important;
}

/* New mail hovered and clicked */
.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,
.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,
.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 {
	background: #9c8463 !important;
}