/*
*
*
*	Header
*
*
*/
#header {
	position: fixed;
	z-index: 200;
	background: var(--color-bg-white);
	top: 0px;
	left: 0px;
	height: 78px;
	max-height:78px;
	min-height: 78px;
	justify-content: space-between;
}
/*all icon*/
/*--------*/
#all-icons {display: none;}

/* header logo */
/*-------------*/
#logo-container {width: 150px; cursor: pointer;}

.logo-bubi {fill: var(--color-accent);}
.logo-bubi, .logo-dots, .logo-text {fill-rule: evenodd;}
.logo-dots {fill: white;}
.logo-text {fill: currentColor;}
.cls-3 {fill: currentColor;}

/* hamburger icon */
/* #theBurger {width: 80px; height: 50px; opacity:0;} */
#theBurger {width: 48px; height: 30px; opacity:0;}
#burger {fill: none; stroke:var(--color-text-dark);}

/* refresh button */
/*----------------*/
#refresh-window {height: 100%;width: 20px; margin-top: -5px;}

/* autocomplete items */
/*--------------------*/
.w-autocomplete-items {position: absolute; top:100%; background: var(--color-bg-white); box-shadow: var(--box-shadow); width: 100%}
.w-autocomplete-items div {padding: var(--xs-space) 0px; border-bottom: 1px solid var(--color-bottom-border); padding: var(--xs-space) var(--s-space); width: 100%;}
.w-autocomplete-items div:hover {background: var(--color-hover-light); cursor: pointer;}

/* demonstrate only */
#autocomplete:hover #calltoAutoautocomplete-list {display: block !important;}

/* Server Date and Time */
/*----------------------*/
#server_date, #server-time { min-width: 62px; }

/* Search and Call form input */
#calltoAuto {width: 450px;}

/* send sms */
/*----------*/
#send-sms-wrap {position: absolute; top:100%; background: var(--color-bg-white); box-shadow: var(--input-focus-shadow); width: 100%; padding: var(--m-space) var(--s-space) var(--s-space) var(--s-space);}
#send-sms-wrap textarea {width: 100%; max-width: 100%;}

/* window compress expand */


/* adress book wrap*/
/*-----------------*/
#adress-book-wrap {position: absolute; top:80px; left: 50%; transform: translateX(-50%); width: 100vw; max-width: 1023px; background: var(--color-bg-white); box-shadow: var(--box-shadow); padding: var(--m-space); z-index:100;}

#adress-header-row {
	width: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

#search-contact-input {min-width: 300px;}

/* Contact list */
/*--------------*/

.contact-list-row {
	display: inline-grid;
	grid-template-columns: max(50px) minmax(100px, 1fr) max( 150px) repeat(2, 1fr);
	justify-items: start;
	align-items: start;
}

.w-contact-list-header {width: 100%; font-weight: 600; padding: 5px 0px; border-bottom: 1px solid var(--color-text-dark);}

.w-contact-list-item {width: 100%; height: 100%; padding: var(--xs-space) 0px; border-bottom: 1px solid var(--color-bottom-border);}
.w-contact-list-item:hover {background: var(--color-hover-light);}

.w-contac-icon-wrap {position: absolute; top: 50%; right: 0; transform: translateY(-50%); opacity: 0;}
.w-contact-list-item:hover .w-contac-icon-wrap {opacity: 1;}

.contacttel>span, .contact-mail {color: var(--color-accent); cursor:pointer;}
.contacttel>span:hover, .contact-mail:hover {color: var(--color-red);}

/* Edit Contact */
/*--------------*/

#contact-edit-datas {column-gap: var(--m-space); row-gap: var(--s-space);}

#prename_new {max-width: 300px;}


/*
*
*
* footer
*
*
*/

#footer {padding: var(--s-space) var(--s-space) var(--m-space) calc(52px + var(--s-space));}

#footer-wrap {justify-content: space-between;}

/*
*
*
*	Main menu
*
*
*/

#main-menu {
	display: flex; 
	flex-direction: column;
	flex-wrap: nowrap; 
	justify-content: space-between;
	overflow: hidden;
	font-size: 16px;
	padding: 16px 0px;
	position: fixed;
	top: 78px;
	bottom: 0px;
	left: 0px;
	width: 100%;
	max-width: 250px;
	background-color: #282a39;
	height: calc(100vh - 78px);
}
body.small #main-menu {font-size: 13px;}


.night #main-menu {background: #2f3243;}
#main-menu-menu {display: flex; flex-direction: column; flex-wrap: nowrap;}
.w-main-menu-item { width: 100%; flex-wrap: nowrap; color: rgba(255, 255, 255, 0.7); justify-content: left; padding: 8px 17px;}
.w-main-menu-item:hover {color: var(--color-accent); background: rgba(0, 0, 0, 0.2);}
.w-main-menu-item > div {margin-right: 20px;}
.w-main-menu-item div {white-space: nowrap;}


/* MAX WIDTH 1023 */
/*----------------*/
@media screen and (max-width: 1023px) {

	#header {height: 50px; max-height: 50px; min-height: 50px;}
	#main-menu {top: 50px; height: calc(100vh - 50px);}
	#adress-book-wrap {top: 52px;}

	/* Burger icon */
	#theBurger {width: 36px; height: 22.5px; opacity:0;}

	/* Search and Call form input */
	#calltoAuto {width: 100%; padding: 12px 12px;}

	#callButton > svg, #sendButton > svg, #phonebookimg >svg, #header-expand-icon > svg {width: 22px; height: 22px;}

	#footer {padding: var(--s-space) var(--s-space) var(--m-space) var(--s-space);}

}

/* MAX WIDTH 640 */
/*---------------*/
@media screen and (max-width: 640px) {

	#logo-container {max-width: 40px; overflow: hidden;}
	#logo-container > svg {width: 150px;}
	#logo-text { display: none;}

	#header-center:active {}

}