/*************************************************************************
 *
 *  File: WM_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 
*********************************************/	
/*#left_main_menu
{
	width:18%;
}*/

@media print, screen and (max-width: 60em) {
    #left_main_menu {
	display: none;
        }}


/*
       
@media print, screen and (min-width: 60em) {
    #left_main_menu {
	display: block;
        z-index:1;
        }}*/

/* search area for large display*/
#div_main_menu_search
{
    padding-top:1.2rem;
    padding-left:0.2rem;
}

.main_menu_li_small
{
    height:40px;
    height:2.5rem;
    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:4px;
    float:left;
    height: 30px;
    height: 1.875rem;
    font-size: 12px;
}

#folder_delete_icon
{
    max-width: 90%;
    max-height:90%;
    margin-top:0.6rem;
}

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

.customer_folder_link,.customer_folder_link_active
{
    min-width: 55%; 
    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%;
            padding: 0.5rem 0 0.4rem 0.2rem !important;
        } 
    .mailbox_count_customer
    {
    	min-width: 25%;
    }    
}

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


.customer_folder_div,.customer_folder_div_active
{
    /*padding-right: 0.5rem;*/
    padding:        0.4rem 0.1rem 0 0.1rem;
    display:        flex;
    height:         40px;
    height:         2.5rem;
    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.4rem 0.1rem 0 0.1rem;
    display:    flex;
    height:     40px;
    height:     2.5rem;

    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*/
{
	cursor: pointer;
	text-align: center;
        padding-bottom:0.4rem;
	
/*	height: 40px;*/
	width: 40px;
        width: 2.5rem;
	position:relative; 	
	z-index:0;			
	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: 1rem 0.1rem 0 0.1rem;
    display:flex;
    height: 40px;
    height: 2.5rem;

    border-radius:	4px;
    border-radius:	0.25rem;
    width: 95%;
    margin: 0 0.2rem 0 0.2rem;
  /*  padding: 0.9rem 0.1rem 0.2rem 0.4rem;*/
}

#add_folder_name_input,#add_folder_name_input_small
{
    display:none;
    border-radius:4px;
    border-radius:0.25rem;
    float:left;
    height: 30px;
    height: 1.875rem;
    font-size: 12px;
    font-size: 0.75rem;
    padding: 0rem 0.5rem;
    position: relative;
    z-index:2;
}

#add_folder_hide_button,#add_folder_hide_button_small
{
    background-color:       white;
    color:                  black;
    font-size:              24px;
    font-size:              1.5rem;
    font-weight:            bold;
    position:               absolute;
    display:                none;
    right:                  0.5rem;
    text-align:             center;
    
    cursor:                 pointer;
    padding:                0 0.3rem 0.7rem 0.3rem;
   
    z-index:                3;
    width:                  44px;
    width:                  2.75rem;
    height:                 44px;
    height:                 2.75rem;
    float:                  right;
    
}
#add_folder_label,#add_folder_label_small
{
    cursor:             pointer;
    background-color:	white;
    position:           absolute;
    display:            inline-block;
    color:              #2b6499;
    font-weight:        bold;
    font-size:          0.9rem;
    padding-left:       0.2rem;
    padding-right:      0.2rem;
    height:             44px;
    height:             2.75rem;
}

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

#add_folder_name_input_placeholder_label,#add_folder_name_input_placeholder_label_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;
        width:          0.938rem;
        margin-right:   0.1rem;
}

@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;
	left:		0;
	cursor:		pointer;
        width:		44px;/*for accessibility and for fingertouch in small windows: mind. 44px!*/
        width:		2.75rem;
	height:		44px;/*for accessibility and for fingertouch in small windows: mind. 44px!*/
        height:		2.75rem;
	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 */
	z-index:            1;
	width:              40px;/* Do not change: No fingertouch here only the three dots!!*/
        width:              2.5rem;
	height:             40px;		
        height:             2.5rem;

	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;
        height:                 0.165rem;
	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;
        top:			-0.438rem;
	width:			100%;
	height:			2.5px;
        height:                 0.165rem;
	background:		inherit;
}

.hamburger_menu-wrap_small_display .hamburger_small_display > div:after
{
        top:			7px;
        top:			0.438rem;
}
/*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:                144px;
	top:                9rem;
	left:               0;
	width :             272px;
	width :             17rem;
	visibility:         hidden;
	display:            flex;
	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;
        max-height: 43.75rem;
}


/* 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 0 0 0.4rem;
}
#butt_logout
{
	padding:  0.2rem 0.2rem 0 0.2rem;
	line-height:1.8;
        cursor:pointer;
}

#quota_label,#quota,#timeout,#butt_logout {
        font-size: 0.7rem;
     }
   
@media print, screen and (min-width: 30em) {
    #quota_label,#quota,#timeout,#butt_logout {
       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: 	44px;
	height:		2.75rem;
	cursor:		pointer;
        padding-right:  0.4rem;
        padding-left:   0.4rem;
        z-index:        0;
}	



.hbm_right_button:hover,#pwd_forgotten:hover,.hbm_footer_left:hover
{
	color: #000;
}

.hbm_left_button
{
	background: 	0;
	text-align: 	left;
	transition: 	color 0.4s; 
	font-size: 	0.9rem;
	height: 	44px;
	height:		2.75rem;
        width:          128px;
        width:          8rem;
	cursor:		pointer;
}	


.hbm_left_button: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:focus-within,.hamburger_menu-wrap_small_display:focus-within,.a11y_focus_li:focus-within 
{
  outline :2px solid black;
}

@media print, screen and (min-width: 60em) {/*large display*/
	.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:		44px;		/* for fingertouch in small windows: mind. 40px! */
        width:		2.75rem;
	height:		44px;		/* for fingertouch in small windows: mind. 40px! */
	height:		2.75rem;
	opacity:	0;
	
}


/*hamburger lines begin */
.hamburger_menu-wrap .hamburger > div
{
	position:		relative;
	width:			100%;
	height:			2px;
        height:			0.125rem;
	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;
        top:		-0.5rem;
	width:		100%;
	height:		2px;
        height:		0.125rem;
	background:	inherit;
}

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

@media print, screen and (min-width: 30em) {
    .hamburger_menu-wrap .hamburger > div
    {
        height:			2px;
         height:		0.125rem;
    }
}

/*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
{
     height:2rem;/*for accessibility border on login site*/
     width:3rem;/*for accessibility border on login site*/
}

.hamburger_menu-wrap .hamburger_menu
{
	position:           fixed;
        top:                144px;
	top:                9rem;
        right:              0px;
	right:              0rem;
        height:             288px;
        height:             18rem;
	width :             192px;
	width :             12rem;
	visibility:         hidden;
	display:            flex;
	justify-content:    center;
	background-color:   white;
	z-index:            3;
}

@media print, screen and (min-width: 110em) {/*for very big display*/
    .hamburger_menu-wrap .hamburger_menu
    {
        top:            160px;
	top:            12rem;
        right:		80px;
        right:		5rem;
        width :		224px;
	width :		14rem;
    }
}

.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:focus-within {
  outline :1px solid red;
  
}

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

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

#markExportMoveEmailTogglerButton,#sortEmailTogglerButton
{
    top: 0.2rem;
   /* left:           0;*/
    position:       absolute;
    height:         44px;
    height:         2.75rem;
    width:          44px;
    width:          2.75rem;
    cursor:         pointer;
    z-index:        2;
}
#mark_export_move_email_icon
{
    width:1rem;
    height:1rem;
    position:relative;
    z-index:0;
}