#page-title-bar {
	width: 100%;
	margin:20px auto 0px auto;
}

.fs-18m {
	font-size: 18px;
}

#page-title-word {
	display:flex;
	font-size:22px;
	font-weight:600;
	font-stretch:100%;
	font-family:poppins-semibold, poppins, sans-serif;
	letter-spacing:1.1px;
	text-align:left;
	position:relative;
	height:50px;
	line-height:50px;
}

#page-title-word:after {
	content:"";
	position:absolute;
	top:23px;
	background:rgba(90,90,90,255);
	height:1px;
	width:770px;
	left:130px;
}

#banner-card {
	width: 100%;
	margin:0 auto;
	display:inline-flex;
}

.site-banner-card {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .28s ease, transform .28s ease;
}

.site-banner-card--loading,
.site-banner-card--ready {
	opacity: 1;
	transform: none;
}

#banner-card-main {
	border-radius:5px 0 0 5px;
	position:relative;
	width:300px;
	height:190px;
	background:rgb(28, 28, 28);
	font-family:helvetica;
	font-size:12px;
	color:rgb(232, 230, 230);
}

#banner-cover {
	border-radius:0 5px 5px 0;
	width: calc(100% - 300px);
	height:190px;
	background: rgb(20,20,20);
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.site-banner-avatar-image {
	display: block;
	border-radius: 50%;
	box-shadow: rgb(0 0 0) 0px 3px 25px 0px;
}

@keyframes siteBannerSkeletonShimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

.site-banner-card--loading #banner-cover,
.site-banner-card--loading #banner-avatar-wrap,
.site-banner-card--loading #banner-user-name,
.site-banner-card--loading #banner-user-tag {
	background: linear-gradient(100deg, rgb(34, 34, 34) 20%, rgb(54, 54, 54) 50%, rgb(34, 34, 34) 80%);
	background-size: 200% 100%;
	animation: siteBannerSkeletonShimmer 1.2s linear infinite;
}

.site-banner-card--loading #banner-cover {
	background-color: rgb(24, 24, 24);
	background-image: linear-gradient(100deg, rgb(24, 24, 24) 20%, rgb(45, 45, 45) 50%, rgb(24, 24, 24) 80%);
}

.site-banner-card--loading #banner-avatar-wrap {
	border-radius: 50%;
	overflow: hidden;
}

.site-banner-card--loading #banner-avatar-img,
.site-banner-card--loading #banner-stats {
	opacity: 0;
}

.site-banner-card--loading #banner-user-name,
.site-banner-card--loading #banner-user-tag {
	color: transparent;
	border-radius: 999px;
}

.site-banner-card--loading #banner-user-name {
	width: 180px;
	min-height: 24px;
}

.site-banner-card--loading #banner-user-tag {
	width: 120px;
	min-height: 18px;
	margin-top: 8px;
}

.site-banner-logoff-card {
	overflow: hidden;
	height: 190px;
	border-radius: 5px;
}

.site-banner-logoff-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.site-banner-default-image {
	display: block;
	width: 100%;
	height: auto;
}

#banner-stats {
position: absolute;
    bottom: 10;
    left: 15px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
	max-width: 270px;
    min-width: 215px;
}

#banner-stats svg{
	vertical-align:bottom;
}

#banner-stats span{
	vertical-align:middle;
}

#banner-avatar-wrap {
	position:absolute;
	z-index:10;
	left:210px;
	top:20px;
}

#banner-user-name {
	max-width: 220px;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
}

#noti-toolbar {
	width: 100%;
	margin: 20px auto;
	display: flex;
	align-items: center;
}

.noti-tab-btn {
	background-color: rgb(88,88,88);
	padding: 4px 10px 3px 10px;
	border-radius: 15px;
	font-weight: 500;
	font-size: 12px;
	font-family: helvetica, sans-serif;
	color: rgb(230,230,230);
	margin-right: 10px;
	cursor: pointer;
	transition-duration: .2s;
}

.noti-tab-btn:hover {
	background-color: rgb(108,108,108);
}