/* BOX */
.toolbarbox_wrapper {
	display: flex;
/*	margin: 10px;*/
	height: max-content;
/*	max-width: var(--rw, 900px);*/
	max-width: var(--rw, 400px);
	width: min(100%, var(--rw, 400px));
}
.toolbarbox_wrapper_margin {
	margin: 10px;
}
.flex-column {
	flex-direction: column;
}

.rw {
/*	width: min(100%, var(--rw));*/
}

.toolbarbox {
	position: relative;
	border: 6px solid hsl(0 100% 100% / 100%);
	outline: 1px solid hsl(0 0% 70%);
	box-shadow: 0px 0px 10px 0px hsl(0 0% 0% / 20%);
	border-radius: 10px;
	width: 100%;

	--hue: 120; /* default green */

	--header-bg: hsl(var(--hue) 50% 50%);
	--header-bg-gradiant0: hsl(var(--hue) 50% 50%);
	--header-bg-gradiant1: hsl(var(--hue) 50% 40%);
	--header-text: hsl(var(--hue) 50% 100%);
	--content-bg: hsl(var(--hue) 30% 90%);
	--icon-bg: hsl(calc(var(--hue) + 20) 20% 90%);
	--icon-outline: hsl(var(--hue) 0% 75%);
	--icon-shadow: hsl(var(--hue) 50% 20%);
	--icon-hover: hsl(calc(var(--hue) + 20) 20% 100%);
	--icon-editing-bg: hsl(var(--hue) 60% 80%);
	--icon-editing-outline: hsl(var(--hue) 60% 65%);
	--icon-editing-hover-bg: hsl(var(--hue) 60% 90%);
	--icon-editing-hover-outline: hsl(var(--hue) 60% 75%);
}
div.toolbarbox_vcenter {
	margin-left: auto;
	margin-right: auto;
}
div.toolbarbox_hcenter {
	margin-top: auto;
	margin-bottom: auto;
}


/* HEADER */
.toolbarbox_header {
	padding: 10px;
	border-radius: 5px 5px 0 0;
	display: flex;
	align-items: center;
/*	background-color: var(--header-bg);*/
	background-image: linear-gradient(to bottom, var(--header-bg-gradiant0) , var(--header-bg-gradiant1));

	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.toolbarbox_name {
	margin: 0;
	font-size: 18px;
	font-weight: bold;
	overflow-wrap: anywhere;
	color: var(--header-text);

	--h: var(--hue, 0);
	--sa: 1.0;
	--ss: 50%;
	--sl: 40%;
	text-shadow: 0px 1px hsl(var(--h) var(--ss) var(--sl) / var(--sa)), 1px 1px hsl(var(--h) var(--ss) var(--sl) / var(--sa)), 1px 0px hsl(var(--h) var(--ss) var(--sl) / var(--sa)), 1px -1px hsl(var(--h) var(--ss) var(--sl) / var(--sa)), 0px -1px hsl(var(--h) var(--ss) var(--sl) / var(--sa)), -1px -1px hsl(var(--h) var(--ss) var(--sl) / var(--sa)), -1px 0px hsl(var(--h) var(--ss) var(--sl) / var(--sa)), -1px 1px hsl(var(--h) var(--ss) var(--sl) / var(--sa));
}
.toolbarbox_name_center {
	text-align: center;
}

.toolbarbox_header_buttons_wrapper {
	display: flex;
	flex: 1;
	justify-content: flex-end;
}


.toolbarbox_warning {
	color: hsl(0 80% 50%);
	font-weight: bold;
	font-size: 18px;
	padding: 10px;
}

div.top_panel {
	margin: 0 0 0 10px;
	padding: 0;
	border: 0;
	vertical-align: bottom;
}
div.top_panel .background-image {
	width: 32px;
	height: 32px;
	border-radius: 2px;
	background-color: var(--icon-bg);
	outline: 2px solid var(--icon-outline);
	box-shadow: 0 0 0 3px var(--icon-shadow);
}
div.top_panel .background-image:hover {
	background-color: var(--icon-hover);
}
div.top_panel .background-image.edit {
	background-image: url(https://resources.maxsana.com/img/icon_edit.png);
}
div.top_panel .background-image.save {
	background-image: url(https://resources.maxsana.com/img/icon_save.png);
}
div.top_panel .background-image.delete {
	background-image: url(https://resources.maxsana.com/img/icon_delete.png);
}
div.top_panel .background-image.addContact {
	background-image: url(https://resources.maxsana.com/img/icon_addContact.png);
}
div.top_panel .background-image.mail {
	background-image: url(https://resources.maxsana.com/img/icon_mail.png);
}
div.top_panel .background-image.clone {
	background-image: url(https://resources.maxsana.com/img/icon_clone.png);
}
div.top_panel .background-image.testmail {
	background-image: url(https://resources.maxsana.com/img/icon_testmail.png);
}
div.top_panel:hover {
	cursor: pointer;
}

div.top_panel .background-image.editing {
	background-color: var(--icon-editing-bg) !important;
	outline: 2px solid var(--icon-editing-outline) !important;
}	
div.top_panel .background-image.editing:hover {
	background-color: var(--icon-editing-hover-bg) !important;
	outline: 2px solid var(--icon-editing-hover-outline) !important;
}



@media (max-width: 600px) {
	.toolbarbox_content {
	}

}


/* CONTENT */
div.toolbarbox .toolbarbox_content::before {
/*	content:"";
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	
	background: repeating-linear-gradient( 45deg, rgba(255,255,255,0.05) 0px, rgba(0,0,0,0.05) 4px, transparent 4px ), repeating-linear-gradient( -45deg, rgba(255,255,255,0.05) 0px, rgba(0,0,0,0.05) 4px, transparent 4px );
	mix-blend-mode: overlay;*/
}
div.toolbarbox .toolbarbox_content {
	box-sizing: border-box;
	margin: auto;
	border-radius: 0 0 5px 5px;
	background-color: var(--content-bg);

/*	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFklEQVQYV2NkYGD4z0AEYBxVSFUBAAD3AAH35S40AAAAAElFTkSuQmCC");
	background-repeat: repeat;
	background-size: 10px 10px;*/
/*	background-image: repeating-linear-gradient(
		45deg,
		hsl(var(--hue) 30% 92%) 0,
		hsl(var(--hue) 30% 92%) 1px,
		hsl(var(--hue) 30% 90%) 2px
	);*/

/*	background: repeating-linear-gradient( 45deg, rgba(255,255,255,0.05) 0px, rgba(0,0,0,0.05) 4px, transparent 4px ), repeating-linear-gradient( -45deg, rgba(255,255,255,0.05) 0px, rgba(0,0,0,0.05) 4px, transparent 4px );*/
/*	mix-blend-mode: overlay;*/

/*	background-size: 20px 20px;*/
}

p.canEdit {
	font-style: italic !important;
	color: hsl(0 60% 60%) !important;
	cursor: pointer !important;
}