:root {
	--ga-header-height: 88px;
	--ga-header-text-color: #ffffff;
}

.navbar {
	padding: 25px 25px 25px 25px;
	color: var(--ga-header-text-color);
	container-type: inline-size;
}

.navbar img {
	height: 30px;
}

.navbar .brand {
	font-size: 22px;
	margin-right: 15px;
	white-space: nowrap;
}

.navbar .page-name {
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	margin-right: 10px;
	padding-left: 15px;
	font-size: 22px;
	white-space: nowrap;
}

.btn.btn-outline-secondary {
	color: #999999;
}

.btn.btn-outline-secondary:hover {
	background-color: var(--ga-button1-bg-color);
	border-color: var(--ga-button1-border-color);
	color: var(--ga-button1-text-color);
}

.navbar .btn .badge {
	position: absolute;
	top: 14px;
}

/* ------------------------------------------------------------------------------------ */
/* responsive */

@media (width <= 1024px) {
	.navbar {
		padding-top: 15px;
		padding-left: 12px;
		padding-right: 12px;
		padding-bottom: 15px;
	}
	.navbar .brand-logo {
		padding: 0px 15px;
		border-right: 1px solid rgba(255, 255, 255, 0.2);
	}
	.navbar .page-name {
		font-size: 18px;
		overflow: hidden;
		text-overflow: ellipsis;
		border-left: 0;
	}
	.navbar .btn .badge {
		top: 10px;
	}
}

@media (width <= 560px) {
	:root {
		--ga-header-height: 78px;
	}
	.navbar {
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.navbar .page-name {
		width: calc(100dvw - 225px);
	}
}