.cab-appbar {
	height           : 60px;
	display          : flex;
	flex-direction   : row;
	background-color : var(--color-app-bar-bg);
	column-gap       : 5px;
}
.cab-center {
	display          : flex;
	flex-direction   : row;
	justify-content  : space-between;
	column-gap       : 5px;
	overflow-x       : auto;
	overflow-y       : hidden;
	flex-grow        : 1;
}
.cab-center::-webkit-scrollbar {
  width  : 0;
  height : 2px;
}
.cab-center::-webkit-scrollbar-track {
  background : none;
}
.cab-center::-webkit-scrollbar-thumb {
  background : var(--color-scroll-def);
}
.cab-center::-webkit-scrollbar-thumb:hover {
  background : var(--color-scroll-hov);
}
.cab-sleft, .cab-left, .cab-middle, .cab-right, .cab-sright {
	display         : flex;
	flex-direction  : row;
	align-items     : center;
	column-gap      : 5px;
}
.cab-left, .cab-middle, .cab-right {
	flex-grow        : 1;
}
.cab-sleft, .cab-left {
	justify-content : flex-start;
}
.cab-middle {
	justify-content : center;
}
.cab-right, .cab-sright {
	justify-content : flex-end;
}
.cab-appmenu {
	display         : flex;
	flex-direction  : row;
	align-items     : center;
	justify-content : center;
	width           : 70px;
	font-size       : 32px;
	cursor          : pointer;
	color           : var(--color-app-bar-menu);
}
.cab-appmenu:hover {
	color : var(--color-app-bar-menu-h);
}
.cab-logo {
	padding : 10px;
}
.cab-logo img {
	filter : invert(var(--filter-invert-logo));
}
.cab-image img {
	filter : invert(var(--filter-invert-image));
}
.cab-button {
	display          : flex;
	flex-direction   : row;
	align-items      : center;
	justify-content  : center;
	column-gap       : 5px;
	background-color : var(--color-app-bar-btn-bg);
	color            : var(--color-app-bar-btn-txt);
	border           : 1px solid var(--color-app-bar-btn-bdr);
	border-radius    : 5px;
	height           : 38px;
	min-width        : 38px;
	padding          : 5px;
	cursor           : pointer;
	font-size        : 20px;
}
.cab-button:hover {
	background-color : var(--color-app-bar-btn-hvr-bg);
	color            : var(--color-app-bar-btn-hvr-txt);
	border-color     : var(--color-app-bar-btn-hvr-bdr);
}
.cab-tools {
	display          : flex;
	flex-direction   : row;
	align-items      : center;
	justify-content  : center;
	column-gap       : 5px;
	background-color : var(--color-app-bar-btn-bg);
	color            : var(--color-app-bar-btn-txt);
	border           : 1px solid var(--color-app-bar-btn-bdr);
	border-radius    : 50%;
	height           : 38px;
	min-width        : 38px;
	cursor           : pointer;
	font-size        : 32px;
	margin           : 0 15px;
}
.cab-tools:hover {
	background-color : var(--color-app-bar-btn-hvr-bg);
	color            : var(--color-app-bar-btn-hvr-txt);
	border-color     : var(--color-app-bar-btn-hvr-bdr);
}
.cab-icon {
	display          : flex;
	flex-direction   : row;
	align-items      : center;
	justify-content  : center;
	color            : var(--color-app-bar-btn-txt);
	min-width        : 38px;
	font-size        : 20px;
	position         : relative;
}
.cab-icon.clickable {
	cursor : pointer;
}
.cab-icon.clickable:hover {
	color : var(--color-app-bar-btn-hvr-txt);
}
.cab-icon-badge {
	transform: translate(50%, 0%);
	position: absolute;
	bottom: 50%;
	right: 30%;
	background-color: purple;
	font-weight: bold;
	border-radius: 50%;
	padding: 0 2px;
	line-height: 19px;
	font-size: 14px;
	min-width: 18px;
	text-align: center;
}


.test-dblicon-button {
	position : relative;
}