/*************************************************************************
 *
 *  File: PDF_UI_menu.css for WebMail UI only
 *
 *      This file provides all settings for 
 *		 * the main menu left: large display
 *		 * hamburger menu right: large and small display
 *		 * the small main menu left: small display
 * 		 * the menues in e-mail table head: select and sort
 *
 ************************************************************************/



	
/*************************************************************************
 	begin -> the main menu left: large display 
*********************************************/	

/* search area for large display*/
#div_main_menu_search
{
	/*height: 20px;
	border-radius: 25px;*/
	padding: 0.5rem 0.3rem;
}

.main_menu_li_small
{
   height:2.5rem;
   height:40px;
   width:13rem;
}


.button#butt_main_menu_search
{
	max-width: 17.6px;
	max-width: 1.1rem;
	padding: 0;
	height: 30px;
	height: 1.875rem;
	display:none;
	
}



#input_main_menu_search
{
	border-radius:6px;
	float:left;
	height: 30px;
	width: 98%;
	font-size: 12px;
	
}

#folder_delete_icon
{
	/*max-width: 30px;
	max-height:30px;*/
	max-width: 90%;
	max-height:90%;
	margin-top:0.5rem;
	height: 20px;
}

.mailbox_count {
   /* float:                  right;*/
    padding-top: 0.2rem;
    text-align:right;
    min-width:25%;
    cursor:pointer;
}
.mailbox_count_customer
{
    float:                  right;
    padding-top: 0.2rem;
    min-width: 30%;
    cursor:pointer;
}

.customer_folder_link,.customer_folder_link_active
{
    /* float:                  left;*/
    min-width: 55%; 
 /*   padding: 0.7rem 0.4rem 0.7rem 0.4rem;*/
    padding: 0.5rem 0 0.4rem 0.2rem !important;
}
@media print, screen and (min-width: 60em) {
    .customer_folder_link,.customer_folder_link_active {
		min-width: 60%;
        } 
    .mailbox_count_customer
    {
    	min-width: 25%;
    }    
}

.normal_folder_link,.normal_folder_link_active
{
   /* float:                  left;*/
    min-width: 75%; 
    padding: 0.5rem 0 0.4rem 0.2rem !important;
}


.customer_folder_div,.customer_folder_div_active
{
	/*padding-right: 0.5rem;*/
	padding: 0 0.1rem 0 0.1rem;
	display:flex;
	height: 1.75rem;
	height: 28px;
	border-radius:			4px;
	border-radius:			0.25rem;
	width: 95%;
	margin: 0 0.2rem 0 0.2rem;
}
.normal_folder_div,.normal_folder_div_active
{
	padding: 0 0.1rem 0 0.1rem;
	display:flex;
	height: 1.875rem;
	height: 30px;
	border-radius:			4px;
	border-radius:			0.25rem;
	width: 95%;
	margin: 0 0.2rem 0 0.2rem;
}



.button_delete_folder,.button_delete_folder_active /*butt_main_menu_delete_folder*/
{
	/*margin-top:0.7rem;
	min-width: 1.1rem;*/
	cursor: pointer;
	text-align: center;
	padding: 0 0 0.7rem 0;
/*	height: 40px;*/
	width: 40px;
	/*float: right;
	font-weight: bold;*/
	
	position:relative; 	/* for safari*/
	z-index:0;			/* for safari*/
	border-radius:0px !important; /* if active: no border*/
}

.button_delete_folder
{
	background-color:white;
}

 
/*add folder for large and small display*/
/*large display : in main menu*/
/*small display : in div over main email table*/

#add_folder_div
{
	padding: 0.5rem 0.3rem;
	height: 40px; /*do never change! 2020 jpe*/
	
}


.add_folder_plus,.add_folder_plus_small
{
	position: absolute;
	right: 0.5rem;
	height: 40px;
	width: 1.875rem;
	width: 30px;
	/*width: 40px;*/
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	cursor:pointer;
	
}


#add_folder_toggler_cb,#add_folder_toggler_cb_small
{
	display: 	block;
	position: absolute;
	right: 0px;
	height: 40px;
	width: 40px;
	cursor:pointer;
	z-index: 2;
	opacity: 0;
}
#add_folder_name_input,#add_folder_name_input_small
{
	float: left;
	border-radius:6px;
	float:left;
	height: 30px;
	width: 78%;
	font-size: 12px;
	position: relative;
	z-index:2;
	padding: 0rem 0.5rem;
}

/* both not visible: .button#butt_main_menu_add_folder,.button#butt_main_menu_add_folder_small*/
.button#butt_main_menu_add_folder,.button#butt_main_menu_add_folder_small 
{
	background-color:		white;
	color:                  #2b6499;
	width: 					2.5rem;
	width: 					40px;
	height: 				2.5rem;
	height: 				40px;
	position: absolute;
	z-index:3;
	right: 0.5rem;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	cursor:pointer;
	padding: 0 0 0.7rem 0.4rem;
	display:none;
	
}



#add_folder_toggler_cb:checked ~ #add_folder_label 
{
	display: none;
}
#add_folder_toggler_cb:checked ~#butt_main_menu_add_folder
{
	display: block;
}
#add_folder_toggler_cb:checked ~ #add_folder_name_input 
{
	display: block;
}

#add_folder_toggler_cb_small:checked ~ #add_folder_label_small 
{
	display: none;
}

#add_folder_toggler_cb_small:checked ~ .button#butt_main_menu_add_folder_small
{
	display:block;
}

#add_folder_toggler_cb_small:checked ~ #add_folder_name_input_small 
{
	display: block;
}

#add_folder_label,#add_folder_label_small
{
	display: block;
	position: absolute;
	/*left: 3px;*/
	float: left;
	padding: 4px;
	/*z-index: 2;*/
	cursor:pointer;
}
#add_folder_name_input,#add_folder_name_input_small
{
	display: none;
}

/*************************************************************************
 	begin -> the main menu left: small display 
*********************************************/
/* begin hamburger_small_display */

*{
	
	list-style: none;
}
.hamburger_menu-wrap_small_display
{
	display:  block;
	width: 15px;
}

@media print, screen and (min-width: 60em) {
    .hamburger_menu-wrap_small_display {
	display:  none; /*default! only visible, if small display*/
        } }


.hamburger_menu_small_display
{
	overflow-y:scroll;
}

.hamburger_menu-wrap_small_display #toggler_small_display_cb
{
	position: 	absolute;
	top:		0;
	left:		0;
	cursor:		pointer;
	width:		40px;		/* for fingertouch in small windows: mind. 40px! */
	height:		40px;		/* for fingertouch in small windows: mind. 40px! */
	margin:		0;
	opacity:	0;
}

#toggler_small_display_cb
{
	z-index:	4; /*should be bigger than toggler_email_table_cb !!!*/ 
}


        
.hamburger_menu-wrap_small_display .hamburger_small_display
{
	position:			absolute;
	top:				0.8rem;
	left:				0.5rem;
	padding:			0 2.3rem 0 0;    /*small hamburger left in small display */
	
	/*top:				0;
	left:				0;
	padding:			0.8rem 1rem 0.3rem 0.2rem; */    /*big hamburger left in small display */
	z-index:			1;
	width:				40px;
	height:				40px;

	align-items: 		center;
	justify-content: 	center;
}

/*hamburger lines begin */
.hamburger_menu-wrap_small_display .hamburger_small_display > div
{
	position:			relative;
	width:				100%;
	height:				2.5px;
	left:				0;
	background-color:	black;
	display:			flex;
	align-items: 		center;
	justify-content: 	center;
	transition: all 0.4s ease;
	
}
.hamburger_menu-wrap_small_display .hamburger_small_display > div:before,
.hamburger_menu-wrap_small_display .hamburger_small_display > div:after
{
	content:			"";
	position:			absolute;
	left:				0;
	z-index:			1;
	top:				-7px;
	width:				100%;
	height:				2.5px;
	background:			inherit;
}

.hamburger_menu-wrap_small_display .hamburger_small_display > div:after{
	top:				7px;}
/*hamburger lines end */	
/*Toggler animation*/
.hamburger_menu-wrap_small_display #toggler_small_display_cb:checked + .hamburger_small_display > div{
	transform: rotate(135deg);	
}

/*Turn lines into X */
.hamburger_menu-wrap_small_display .toggler:checked + .hamburger_small_display > div:before,
.hamburger_menu-wrap_small_display .toggler:checked + .hamburger_small_display > div:after
{
	top: 0;
	right:0;
	transform: rotate(90deg);
}

/*Show menu */
.hamburger_menu-wrap_small_display #toggler_small_display_cb:checked ~ .hamburger_menu_small_display {
	visibility: visible;
}

.hamburger_menu-wrap_small_display #toggler_small_display_cb:checked ~ .hamburger_menu_small_display >div >div{
	opacity:1;
	/*transition: opacity 0,4s ease;*/
}

.hamburger_menu-wrap_small_display .hamburger_menu_small_display
{
	position: fixed;
	top:		128px;
	top:		8rem;
	left:		0;
	width :		250px;
	width :		16rem;
	/*height: 	100%;*/
	visibility: hidden;
	display:	flex;
	/*align-items: 		center;*/
	/*justify-content: 	center;*/
	background-color: white;
	z-index:3;
	max-height:22rem; /*for small display-> for scrollbar aktivation*/
}

.hamburger_menu-wrap_small_display .hamburger_menu_small_display >div >ul >li >ul
{
	top: 100%;
	left:0;
	width:100%;
	transition: 300ms all;
	max-height:0;
}
.hamburger_menu-wrap_small_display .hamburger_menu_small_display >div >ul >li:hover >ul
{
	max-height: 700px;
}


/* end main menu in table set_mails for small display*/
/*****************************************************************************************************************/


/*************************************************************************
 	begin -> hamburger menu right: large and small display 
***********************************************************/
.button#butt_compose
{
	width: 95%;	
}

/*************************************************************************
 *  second headline: RAM, quota, logout, timeout and hamburger and content hamburger: pwd change, language, help
 ************************************************************************/

#quota_label
{
	padding: 0.2rem 0rem 0 0.5rem;   
}

#quota
{
	padding: 0.2rem 0rem 0 0.3rem;  
}

#timeout
{
	padding: 0.2rem 1.5rem 0 0.4rem;
}
#butt_logout
{
    padding:  0.2rem 0.2rem 0 0.2rem;
    line-height:1.8;
    cursor:pointer;
}

#selfreg_label
{
   padding:  0.2rem 0.5rem 0 0;
    line-height:1.8; 
}

#quota_label,#quota,#timeout,#butt_logout,#selfreg_label
{
        font-size: 0.7rem;
}
   
@media print, screen and (min-width: 30em) {
    #quota_label,#quota,#timeout,#butt_logout,#selfreg_label {
       font-size: 0.85rem;
        } 
    #timeout {
       padding: 0.2rem 2rem 0 0.1rem;
        }
}

/* button in hamburger menu right(hbm) */
.hbm_right_button
{
	background: 	0;
	/*color: 		#2B6499;	-> central defined in webmail.css*/
	/*text-align: 	right;*/
	transition: 	color 0.4s; 
	font-size: 		0.9rem;
	height: 		40px;
	height:			2.5rem;
        padding:  0.7rem 0.4rem 0 0.4rem !important;
	/*overflow:		hidden;*/
	cursor:			pointer;
}	

.hbm_right_button:hover,#butt_logout:hover
{
	color: #000;
}

#select_language /* select box for language in header*/
{
	 /* select field for language in each window on top right */
	float: right;
	border-radius:4px;
	height: 2rem;
	width: 6rem;
	
}
/*************************************************************************
 	begin -> the main menu right hamburger in each display
*********************************************/

*{
	
	list-style: none;
}
.hamburger_menu-wrap
{
	/*position:	fixed;*/
	float: 		right;
/*	top:		112px;
	top:		7rem;*/
	right:		50px;
	right:		3.12rem;
	width :		20px;
	width :		1.25rem;
	height: 	100%;
        cursor:         pointer;
	z-index:	2;
}

.hamburger_menu-wrap .hamburger
{
	position:			absolute;
	top:				0;
	right:				0;
	padding:			0.8rem 1rem; /*big hamburger right in small display */
	z-index:			2;
	width:				50px;
	width:				3.125rem;
	height:				50px;
	height:				3.125rem;
	align-items: 		center;
	justify-content: 	center;
}

.hamburger_menu-wrap,.hamburger_menu
{
    height:2rem;
    width:3rem;
 /*	max-height:210px; /*for scrollbar aktivation*/
	/*max-height:13.125rem; for scrollbar aktivation*/
}



@media print, screen and (min-width: 60em) {
    .hamburger_menu-wrap,.hamburger_menu
    {
    /*	max-height:400px;  for scrollbar deaktivation in middle and large*/
    /*	max-height:25rem; /*for scrollbar deaktivation in middle and large*/
    }   
}

.hamburger_menu-wrap .toggler
{
	position: 	absolute;
	float: 		right;
	top:		0;
	right:		0;
	z-index:	3;
	cursor:		pointer;
	width:		40px;		/* for fingertouch in small windows: mind. 40px! */
	height:		40px;		/* for fingertouch in small windows: mind. 40px! */
	width:		2.5rem;
	height:		2.5rem;
	opacity:	0;
	
}




/*hamburger lines begin */
.hamburger_menu-wrap .hamburger > div
{
	position:		relative;
	width:			100%;
	height:			2px;
	right:			0;
	background-color:	#000000;
	display:		flex;
	align-items: 		center;
	justify-content: 	center;
	transition: all 0.4s ease;
	
}
.hamburger_menu-wrap .hamburger > div:before,
.hamburger_menu-wrap .hamburger > div:after
{
	content:			"";
	position:			absolute;
	right:				0;
	z-index:			1;
	top:				-8px;
	width:				100%;
	height:				2px;
	background:			inherit;
}

.hamburger_menu-wrap .hamburger > div:after{
	top:				8px;
}

@media print, screen and (min-width: 30em) {
    .hamburger_menu-wrap .hamburger {
     /* large display
        top:				0;
        right:				0;
     	width:				50px;
		height:				50px;
		padding:			1rem; */ 
        } 
    .hamburger_menu-wrap .hamburger > div
    {
        height:				2px;
    }
        
        }

/*hamburger lines end */	
/*Toggler animation*/
.hamburger_menu-wrap .toggler:checked + .hamburger > div{
	transform: rotate(135deg);	
}

/*Turn lines into X */
.hamburger_menu-wrap .toggler:checked + .hamburger > div:before,
.hamburger_menu-wrap .toggler:checked + .hamburger > div:after
{
	top: 0;
	right:0;
	transform: rotate(90deg);
}

/*Show menu */
.hamburger_menu-wrap .toggler:checked ~ .hamburger_menu {
	visibility: visible;
}

.hamburger_menu-wrap .toggler:checked ~ .hamburger_menu >div >div{
	opacity:1;
	/*transition: opacity 0,4s ease;*/
}


.hamburger_menu-wrap .hamburger_menu
{
	position: fixed;
	top:		160px;
	top:		10rem;
        height:     12rem;
	right:		0px;
	right:		0rem;
	width :		176px;
	width :		11rem;
	visibility: hidden;
	/*overflow:	hidden;*/
	display:	flex;
	align-items: 		center;
	justify-content: 	center;
	background-color: white;
	z-index:3;
        

}

@media print, screen and (min-width: 30em) {
    .hamburger_menu-wrap .hamburger_menu
    {

            right:		64px;
            right:		4rem;
            width :		176px;
            width :		11rem;
    }
}	



.hamburger_menu-wrap .hamburger_menu >div >ul >li >ul
{
/*	overflow: hidden;*/
    /*position: absolute;*/
    top: 100%;
    left:0;
    width:100%;
    transition: 300ms all;
    max-height:0;
	
    overflow-y:             auto;
    overflow-x:             hidden;
    max-height:240px;  /*for scrollbar aktivation languages small display*/
    max-height:15rem;/*for scrollbar aktivation*/

}

@media print, screen and (min-width: 30em) {
    .hamburger_menu-wrap .hamburger_menu >div >ul >li >ul
    {
            max-height:288px;  /*for scrollbar aktivation large display*/
            max-height:18rem;	/*for scrollbar aktivation*/
    }
}
/*.hamburger_menu-wrap .hamburger_menu >div >ul >li:hover >ul
{
	max-height: 700px;
}*/
/*
.hamburger_menu-wrap .hamburger_menu >div >ul >li >ul >li:hover 
{
	background: #ffffff;
}*/

/*end  second headline: RAM, quota, logout, timeout and hamburger */

/*Now some general settings */
[type="submit"],[type="button"]
{
	border-radius:4px;
	margin: 0rem 0.2rem;
}

.menu_max_width
{
    width:100%;
}

.menu_min_width
{
    min-width: 13%;
}

.hide_nav_menu
{
    display:none;
}

.show_nav_menu
{
    display:block;
}