.cpb-pagebar {
	height           : 44px;
	display          : flex;
	flex-direction   : row;
	background-color : var(--color-pi-bar-bg);
	column-gap       : 5px;
	border-radius    : 5px;
	border           : 1px solid var(--color-pi-bar-bdr);
	margin           : 10px 10px 0;
	padding          : 0 5px;
}
.cpb-center {
	display          : flex;
	flex-direction   : row;
	justify-content  : space-between;
	column-gap       : 5px;
	overflow-x       : auto;
	overflow-y       : hidden;
	flex-grow        : 1;
	width            : 1vw;
}
.cpb-center::-webkit-scrollbar {
  width  : 0;
  height : 2px;
}
.cpb-center::-webkit-scrollbar-track {
  background : none;
}
.cpb-center::-webkit-scrollbar-thumb {
  background : var(--color-scroll-def);
}
.cpb-center::-webkit-scrollbar-thumb:hover {
  background : var(--color-scroll-hov);
}
.cpb-sleft, .cpb-left, .cpb-middle, .cpb-right, .cpb-sright {
	display         : flex;
	flex-direction  : row;
	align-items     : center;
	column-gap      : 5px;
}
.cpb-left, .cpb-middle, .cpb-right {
	flex-grow        : 1;
}
.cpb-sleft, .cpb-left {
	justify-content : flex-start;
}
.cpb-middle {
	justify-content : center;
}
.cpb-right, .cpb-sright {
	justify-content : flex-end;
}
.cpb-image img {
	filter : invert(var(--filter-invert-image));
}
.cpb-button {
	display          : flex;
	flex-direction   : row;
	align-items      : center;
	justify-content  : center;
	column-gap       : 5px;
	background-color : var(--color-pi-bar-btn-bg);
	color            : var(--color-pi-bar-btn-txt);
	border           : 1px solid var(--color-pi-bar-btn-bdr);
	border-radius    : 5px;
	height           : 32px;
	min-width        : 32px;
	padding          : 5px;
	cursor           : pointer;
	font-size        : 18px;
}
.cpb-button-label {
	font-size : 15px;
}
.cpb-button:hover {
	background-color : var(--color-pi-bar-btn-hvr-bg);
	color            : var(--color-pi-bar-btn-hvr-txt);
	border-color     : var(--color-pi-bar-btn-hvr-bdr);
}
.cpb-button-accent {
	background-color : var(--color-c7);
}
.cpb-button-accent:hover {
	background-color : var(--color-c7);
}
.cpb-dblicon-button {
	position : relative;
}
.cpb-dblicon-button > span {
	position  : absolute;
	font-size : 14px;
}
.cpb-button-list > button, .cpb-button-list li, .cpb-button-list a {
	display        : flex !important;
	flex-direction : row;
	column-gap     : 5px;
	align-items    : center;
	width          : 100%;
}
.cpb-state-icon {
	display          : flex;
	flex-direction   : row;
	align-items      : center;
	justify-content  : center;
	column-gap       : 5px;
	color            : white;
	border-radius    : 5px;
	height           : 32px;
	min-width        : 32px;
	padding          : 5px;
	font-size        : 18px;
}
.cpb-text {
	color       : var(--color-app-bar-btn-txt);
	font-size   : 16px;
	padding     : 0 5px;
	white-space : nowrap;
}
.cpb-text-bold {
	color       : var(--color-app-bar-btn-txt);
	font-size   : 16px;
	font-weight : 1000;
	padding     : 0 5px;
}
.cpb-label-splitter {
	color       : var(--color-app-bar-btn-txt);
	display     : flex;
	align-items : center;
	font-size   : 26px;
}
.cpb-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;
}
.cpb-icon.clickable {
	cursor : pointer;
}
.cpb-icon.clickable:hover {
	color : white;
}
.cpb-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;
}