.noti-container {
	padding: 0;
	margin: 0;
	/* border: 1px solid black; */
	/* border-radius: 16px; */
	list-style-type: none;
	height: calc(100vh - 200px );
	overflow: auto;
	width: 100%;
}

.noti-container > .noti-list {
	min-height: 80px;
	display: flex;
	/* border-bottom: 1px solid black; */
	padding: 5px 8px;
	align-items: center; /* Align items vertically center */
	justify-content: space-between; /* 항목들 사이의 공간을 균등하게 분배 */
}
.noti-container > .noti-list:nth-child(2n+1){
	background-color: rgb(255, 244, 252);
}

.noti-container > .noti-list:last-child {
	border-bottom: none;
}

.noti-container > .noti-list > .left,
.noti-container > .noti-list > .right {
	display: flex;
	align-items: flex-start; /* Align items at the start of the flex container */
}

.noti-container > .noti-list > .left {
	flex-grow: 1;
	gap: 10px;
	flex: 1; /* .left에 유동적인 공간 배분 */
	max-width: calc(
		100% - 100px
	); /* .right의 최대 너비를 고려한 .left의 최대 너비 설정 */
	align-items: center; /* 이 부분을 추가합니다 */
}
.noti-container > .noti-list > .right {
	display: flex;
	flex-direction: column; /* 항목을 세로로 정렬 */
	align-items: flex-end; /* 오른쪽 정렬 */
	flex-basis: 90px; /* .right의 기본 너비 설정, 실제 너비는 내용에 따라 조금씩 달라질 수 있음 */
	flex-shrink: 0; /* .right가 축소되지 않도록 설정 */
}
.noti-container > .noti-list > .left .name,
.noti-container > .noti-list .date,
.noti-container > .noti-list .count {
	margin: 0;
	padding: 0;
}
.noti-container > .noti-list > .left > div {
	display: flex;
	flex-direction: column;
	justify-content: space-around; /* 세로 중앙 정렬을 위해 추가 */
	min-height: 60px; /* name과 title의 합계 높이에 맞춰 조정 */
}

.noti-container > .noti-list > .left > .icon img {
	width: 50px; /* Fixed width for the icon */
	height: 50px; /* Fixed height for the icon */
	border-radius: 25px;
}
.noti-container > .noti-list > .left .name {
	font-size: 18px;
	font-weight: 500;
}
.noti-container > .noti-list > .left .title {
	width: 100%; /* Make sure the title can expand to full width */
	display: -webkit-box;
	-webkit-line-clamp: 2; /* Show ellipsis after 2 lines */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 12px;
}

.noti-container > .noti-list > .right .date {
	order: 1; /* 날짜를 위로 */
	padding-bottom: 5px; /* 날짜와 알림 사이의 간격 */
}

.noti-container > .noti-list > .right .count {
	order: 2; /* 알림을 아래로 */
	background-color: red;
	color: white;
	border-radius: 50%;
	padding: 0 5px;
	font-size: 15px;
}
.qrcode{
	display: block;
	width: 150px;
	height: 50px;
	background-color: purple;
	color: white;
	border-radius: 15px;
	border: none;
	margin: 0 auto;
	margin-bottom: 10px;
}
.qrcode::after{
	display: block;
	content: '';
	clear: both;
}