/**
 * File: assets/css/ejs-profile.css
 * Description: Styles for user profile, login shortcode, media management, media list, media detail, and privacy settings.
 * @package EmulatorJS
 * @since 1.0.0
 */

/* My Account Page */
.edit-account fieldset {
	margin-top: 20px;
}

.woocommerce-account .entry-content {
	margin-top: 20px !important;
}

.edit-account fieldset legend {
	margin-bottom: 5px;
	padding: 3px;
	font-weight: bold;
}

.ejs_user_moto, .ejs_user_bio {
	font-weight: bold;
}

.ejs-account-details .woocommerce-form-row {
	margin: 0 !important;
}

.ejs-my-account-header {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px;
	background: #f7f8f9;
	padding: 20px;
	border-radius: 5px;
}

.ejs-my-account-avatar-wrapper {
	position: relative;
}

.ejs-my-account-avatar {
	width: 128px;
	height: 128px;
	border-radius: 10px;
	object-fit: cover;
}

.ejs-avatar-overlay {
    display: flex;
    position: absolute;
    left: 50%;
    bottom: -5px;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transform: translateX(-50%);
    background: #f7f8f9;
    padding: 5px;
}

.ejs-avatar-action {
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    width: 24px;
    height: 24px;
    padding: 1px 5px;
    background: #333;
    border-radius: 5px;
    transition: background 0.2s;
}

.ejs-avatar-remove {
    padding: 2px 6px;
	background: #dd2020;
}

.ejs-my-account-meta h2 {
	margin: 0;
	font-size: 24px;
}

.ejs-my-account-meta p {
	margin: 5px 0 0;
}

.ejs-logout-link {
	color: #c7254e;
	text-decoration: none;
}

.ejs-logout-link:hover {
	text-decoration: underline;
}

.ejs-my-account-nav {
	margin-bottom: 20px;
}

.ejs-my-account-tabs {
	list-style: none;
	display: flex;
	gap: 10px;
	padding: 0;
	margin: 0;
	border-bottom: 2px solid #ddd;
}

.ejs-my-account-tab a {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 10px 15px;
	text-decoration: none;
	color: #333;
	border-bottom: 2px solid transparent;
}

.ejs-my-account-tab a:hover,
.ejs-my-account-tab.woocommerce-MyAccount-navigation-link--is-active a {
	color: #c7254e;
	border-bottom-color: #c7254e;
}

.ejs-my-account-content {
	background: #f7f8f9;
	padding: 20px;
	border-radius: 5px;
	margin-bottom: 20px;
}

.woocommerce form .form-row .input-text {
	border: 1px solid #dcdcde !important;
}

.woocommerce-edit-account .woocommerce-Button {
	margin-top: 15px !important;
}

/* User Login Shortcode */
.ejs-user-login {
	display: flex;
	align-items: center;
	gap: 10px;
	float: right;
	margin-left: 10px;
	position: relative;
	font-size: 15px;
}

.ejs-user-avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: inline-block;
	object-fit: cover;
	vertical-align: middle;
}

.ejs-username {
	font-size: 14px;
	color: #333;
	cursor: pointer;
	padding: 5px 10px;
	background: #f7f8f9;
	border-radius: 5px;
}

.ejs-notification-anchor {
	position: relative;
	cursor: pointer;
	margin-right: 10px;
}

.ejs-notification-tooltip {
	display: none;
	position: absolute;
	top: calc(100% + 5px);
	left: 50%;
	transform: translateX(-50%);
	background: #333;
	color: #fff;
	padding: 5px 10px;
	border-radius: 5px;
	white-space: nowrap;
	font-size: 12px;
	z-index: 10001;
}

.ejs-notification-anchor:hover .ejs-notification-tooltip {
	display: block;
}

.dropdown {
	position: relative;
}

.dropdown-menu {
	display: none;
	position: absolute;
	top: calc(100% + 34px);
	padding: 5px 5px 10px 5px;
	right: 0;
	margin: 0;
	background-color: #fff;
	border-bottom: 4px solid #f0f0f0;
	border-left: 4px solid #f7f8f9;
	border-right: 1px solid #f7f8f9;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	min-width: 200px;
	max-width: 300px;
	z-index: 10000;
}

.dropdown-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #333;
	line-height: 1.4em;
	white-space: nowrap;
	text-align: left;
	padding: 4px 12px;
	text-decoration: none;
}

.dropdown-item:hover {
	color: #c7254e;
	background: #fff5f8;
	border-radius: 5px;
	font-weight: bold;
}

.dropdown-divider {
	border-bottom: 1px solid #ddd;
	margin: 2px 10px;
}

/* Profile Overview */
.ejs-profile-overview {
	display: flex;
	gap: 20px;
}

.ejs-profile-main {
	width: 70%;
}

.ejs-profile-sidebar {
	width: 30%;
}

.ejs-profile-data {
	display: flex;
	gap: 20px;
}

.ejs-profile-data-wrapper {
	display: flex;
	gap: 20px;
	width: 100%;
}

.ejs-profile-basic-info {
	width: 70%;
}

.ejs-profile-stats {
	width: 50%;
}

.ejs-profile-avatar {
	width: 128px;
	height: 128px;
	border-radius: 10px;
	vertical-align: top;
}

.ejs-profile-header {
	display: flex;
	align-items: center;
}

.ejs-profile-header-meta {
	flex: 1;
}

.ejs-profile-username {
	margin-bottom: 5px;
	font-size: 20px;
}

.ejs-profile-header-meta .ejs-profile-username {
	font-size: 17px;
	font-weight: 700;
}

.ejs-profile-moto {
	font-style: italic;
	color: #666;
	margin: 0;
	font-size: .7rem;
	background: #f0f0f0;
	padding: 5px 10px;
	width: fit-content;
	border-radius: 5px;
}

.ejs-profile-level {
	margin: 0;
	width: auto;
	max-width: 250px;
}

.ejs-profile-level span {
	font-size: 14px;
}

.ejs-level-progress {
	width: 100%;
	height: 10px;
	background: #f0f0f0;
	border-radius: 5px;
	overflow: hidden;
	margin: 5px 0;
}

.ejs-progress-bar {
	height: 100%;
	background: #0073aa;
}

.ejs-profile-registered {
	color: #666;
	margin: 0;
	font-size: 13px;
}

.ejs-profile-basic-info,
.ejs-profile-about-me,
.ejs-profile-stats,
.ejs-wall-comments,
.ejs-profile-media-showcase,
.ejs-profile-activity,
.ejs-profile-friends,
.ejs-profile-achievements,
.ejs-post-comments {
	margin-bottom: 20px;
	background: #f7f8f9;
	padding: 20px;
	border-radius: 5px;
}

.ejs-profile-basic-info h3,
.ejs-profile-about-me h3,
.ejs-profile-stats h3,
.ejs-wall-comments h3,
.ejs-post-comments h3,
.ejs-media-header h3,
.ejs-profile-activity h3,
.ejs-profile-friends h3,
.ejs-profile-achievements h3,
.ejs-friends-section h2, .ejs-friend-requests-section h3,
.ejs-blocked-users-section h3,
.ejs-achievement-modal-content h3 {
	margin-top: 0;
	display: flex;
	align-items: center;
	font-size: 20px;
}

.ejs-stats-item .ejs-stat-icon {
	width: 15px;
}

.ejs-section-icon {
	vertical-align: middle;
	margin-right: 10px;
}

.ejs-stats-item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

.ejs-stats-item span {
	font-size: 14px;
}

.ejs-stat-icon {
	vertical-align: middle;
}

.ejs-account-details {
	margin-bottom: 15px;
	padding-bottom: 20px;
	border-bottom: 1px solid #eee;
	margin-top: 0 !important;
}

.ejs-account-details legend {
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 15px;
}

.ejs-avatar-preview {
	margin-bottom: 10px;
}

.ejs-avatar-image {
	max-width: 128px;
	border-radius: 10px;
}

.ejs-remove-avatar {
	display: block;
	margin-top: 10px;
}

/* Activity Timeline */
.no-found {
	margin-bottom: 0;
	padding: 10px;
	background: #f7f8f9;
	border-radius: 5px;
}

.ejs-profile-overview .no-found {
	padding: 0;
}

.ejs-activity-timeline, .ejs-notification-center {
	display: flex;
	flex-direction: column;
	background: #f7f8f9;
	border-radius: 5px;
}

.ejs-profile-activity .ejs-activity-day {
	padding: 0;
}

.ejs-profile-activity .ejs-activity-timeline {
	gap: 0;
}

.ejs-activity-day, .ejs-notification-day {
	padding: 20px;
}

.ejs-activity-date, .ejs-notification-date {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	margin-bottom: 10px;
}

.ejs-activity-item {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	padding: 10px;
	border-radius: 5px;
	margin-bottom: 5px;
}

.ejs-activity-icon {
	width: 32px;
	height: 32px;
	border-radius: 5px;
	object-fit: cover;
}

.ejs-activity-text {
	flex: 1;
	font-weight: bold;
	font-size: 14px;
}

.ejs-activity-time {
	font-style: italic;
	color: #666;
	font-size: 12px;
}

.ejs-activity-filter,
.ejs-media-filter, .ejs-notifications-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 30px;
	padding: 20px;
	background-color: #f7f8f9;
	border-radius: 5px;
}

.ejs-activity-filter .ejs-filter-right,
.ejs-media-filter .ejs-filter-right,
.ejs-notifications-filter .ejs-filter-right {
	align-self: flex-start;
}

.ejs-filter-left {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	flex: 1;
}

.ejs-filter-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ejs-activity-filter input[type="text"],
.ejs-activity-filter select,
.ejs-media-filter input[type="text"],
.ejs-media-filter select,
.ejs-notifications-filter input[type="text"],
.ejs-notifications-filter select {
	padding: 10px 24px 10px 12px;
	border: 1px solid #000;
	border-radius: 5px;
	font-size: 14px;
	background-color: #fff;
	color: #333;
	transition: border-color 0.2s;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23666" d="M6 8.5L2 4.5h8L6 8.5z"/></svg>');
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 10px;
}

.ejs-activity-filter input[type="text"],
.ejs-media-filter input[type="text"],
.ejs-notifications-filter input[type="text"] {
	width: 200px;
	max-width: 100%;
	background-image: none;
	padding-right: 12px;
}

.ejs-activity-filter input[type="text"]:focus,
.ejs-activity-filter select:focus,
.ejs-media-filter input[type="text"]:focus,
.ejs-media-filter select:focus,
.ejs-notifications-filter input[type="text"]:focus,
.ejs-notifications-filter select:focus, {
	border-color: var(--ejs-primary);
	outline: none;
}

/* Media Showcase and Media List */
.ejs-media-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.ejs-media-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 15px;
	margin-top: 15px;
}

.ejs-profile-overview .ejs-media-grid {
	grid-template-columns: repeat(2, 1fr);
}

.ejs-media-item {
	background: transparent;
	border-radius: 5px;
	overflow: hidden;
	transition: transform 0.2s ease, background-color 0.3s ease;
	position: relative;
	z-index: 1;
	pointer-events: auto;
}

.ejs-media-link {
	display: block;
	text-decoration: none;
	color: #333;
}

.ejs-media-manager .ejs-media-item:hover:not(.confirming-delete) {
	transform: translateY(-5px);
}

.ejs-media-item:hover .ejs-media-info {
	background: #2a2a2a;
}

.ejs-media-item:hover .ejs-media-media {
	border-radius: 0;
}

.ejs-media-item:hover .ejs-media-link {
	color: #fff;
}

.ejs-media-media {
	position: relative;
	width: 100%;
	aspect-ratio: 14 / 9;
	overflow: hidden;
	border-radius: 5px;
	display: flex;
	justify-content: center;
}

.ejs-media-thumbnail {
	object-fit: cover;
	display: block;
	aspect-ratio: 14 / 9;
	transition: opacity 0.2s ease;
	width: 100%;
}

.ejs-media-info {
	padding: 10px;
}

h3.ejs-media-title {
	font-size: 16px;
	font-weight: bold;
	margin: 0 0 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ejs-media-game {
	margin-bottom: 15px;
}

.ejs-media-item:hover .ejs-media-title {
	color: #fff;
}

.ejs-related-media-shortcode .ejs-badges {
	position: absolute;
	top: 3px;
	right: 3px;
	z-index: 2;
	margin: 0;
	pointer-events: none; /* badge không cản click */
}

.ejs-badges .ejs-media-badge-video {
	display: inline-block;
	padding: 2px 6px;
	margin-right: 5px;
	background: #e9e6ed;
	color: #333;
	font-size: 11px;
	border-radius: 3px;
}

.ejs-badges .ejs-media-badge-photo {
	display: inline-block;
	padding: 2px 6px;
	background: #ff6c00;
	color: #fff;
	font-size: 11px;
	border-radius: 3px;
}

.ejs-badges .ejs-media-badge-pinned {
	display: inline-block;
	padding: 2px 6px;
	background: #0073aa;
	color: #fff;
	font-size: 11px;
	border-radius: 3px;
}

.ejs-media-meta {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: #666;
	margin: 5px 0 0;
}

.ejs-media-item:hover .ejs-media-meta {
	color: #bbb;
}

.ejs-media-show-all {
	padding: 6px 12px !important;
	background: #0073aa;
	color: #fff;
	text-decoration: none;
	border-radius: 5px;
	font-size: 15px;
	height: 28px;
	line-height: 1;
}

.ejs-media-show-all:hover {
	background: #005a87;
}

/* Media Detail */
.ejs-media-detail-main {
	display: flex;
	flex-wrap: wrap;
}

.ejs-media-info-content, .ejs-media-comments {
	background: #f7f8f9;
	padding: 20px;
	border-radius: 5px;
	margin-bottom: 20px;
	flex: 1 1 100%;
	min-width: 0;
}

.ejs-media-player-content {
	margin-bottom: 20px;
	flex: 1 1 100%;
	min-width: 0;
}

.ejs-media-content {
	width: 100%;
	object-fit: contain;
	border-radius: 5px;
	vertical-align: top; /* Loại bỏ khoảng trống dưới img */
}

.ejs-media-author-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0;
}

.ejs-media-author-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
}

.ejs-media-author {
	font-weight: bold;
	font-size: 14px;
	color: #333;
}

.ejs-media-stats-meta {
	display: flex;
	gap: 15px;
	font-size: 13px;
	color: #666;
	margin: 10px 0;
}

.ejs-media-caption {
	font-size: 15px;
	color: #333;
	margin: 15px 0;
	line-height: 1.6;
	border-left: 3px solid #e02f35;
	padding-left: 10px;
}

.ejs-media-tags {
	margin: 10px 0;
}

.ejs-media-tag {
	display: inline-block;
	padding: 4px 8px;
	margin: 0 5px 5px 0;
	background: #f0f0f0;
	color: #666;
	font-size: 12px;
	border-radius: 3px;
	text-decoration: none;
}

.ejs-media-tag:hover {
	background: #e02f35;
	color: #fff;
}

.ejs-media-share {
	margin: 10px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ejs-share-button {
	padding: 8px 12px;
	color: #fff;
	text-decoration: none;
	border-radius: 5px;
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 5px;
}

.ejs-share-button:hover {
	color: #fff;
}

.ejs-share-x {
	background: #000000;
}

.ejs-share-facebook {
	background: #3b5998;
}

.ejs-share-instagram {
	background: #e1306c;
}

.ejs-share-reddit {
	background: #ff4500;
}

.ejs-related-media-column {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* Media Upload Form */
.ejs-media-upload-form {
	margin-bottom: 30px;
	padding: 20px;
	background: #f7f8f9;
	border-radius: 5px;
}

.ejs-media-upload-form.editing {
	border: 2px dashed #55555e;
}

#ejs-media-upload-button, #ejs-media-cancel-edit {
	margin-bottom: 10px !important;
}

#ejs-media-cancel-edit {
	background: #333 !important;
}

.ejs-media-upload-fields {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.ejs-media-upload-file,
.ejs-media-upload-title,
.ejs-media-upload-game,
.ejs-media-upload-caption,
.ejs-media-upload-tags {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.ejs-media-upload-file input[type="file"],
.ejs-media-upload-title input[type="text"],
.ejs-media-upload-game input[type="text"],
.ejs-media-upload-tags input[type="text"],
.ejs-media-upload-caption textarea {
	padding: 8px;
	border: 1px solid #dcdcde;
	background: #fff;
	border-radius: 5px;
	font-size: 14px;
	width: 100%;
}

.ejs-media-upload-caption textarea {
	resize: vertical;
	min-height: 60px;
}

#ejs-media-upload-progress {
	width: 100%;
	height: 10px;
	margin-top: 5px;
	border-radius: 5px;
}

.ejs-autocomplete-suggestions {
	display: none;
	background: #fff;
	border-radius: 5px;
	max-height: 200px;
	overflow-y: auto;
	z-index: 1000;
	margin-top: 5px;
}

.ejs-media-comments .ejs-autocomplete-suggestions.visible,
.ejs-game-comments .ejs-autocomplete-suggestions.visible,
.ejs-wall-comments .ejs-autocomplete-suggestions.visible,
.ejs-post-comments .ejs-autocomplete-suggestions.visible {
    opacity: 1;
}

.ejs-autocomplete-suggestions:not(:empty) {
	display: block;
}

.ejs-autocomplete-suggestion {
	padding: 8px;
	cursor: pointer;
}

.ejs-media-comments .ejs-autocomplete-suggestions,
.ejs-game-comments .ejs-autocomplete-suggestions,
.ejs-wall-comments .ejs-autocomplete-suggestions,
.ejs-post-comments .ejs-autocomplete-suggestions {
    font-size: 15px;
    line-height: 1.4;
	border-radius: 18px;
    opacity: 0;
    transition: opacity 0.2s ease;
	margin-bottom: 8px;
}

.ejs-media-comments .ejs-autocomplete-suggestion,
.ejs-game-comments .ejs-autocomplete-suggestion,
.ejs-wall-comments .ejs-autocomplete-suggestion,
.ejs-post-comments .ejs-autocomplete-suggestion {
	padding: 0.75rem;
}

.ejs-autocomplete-suggestion:hover {
	background: #f0f0f0;
}

.ejs-placeholder {
	text-align: center;
	color: #666;
	padding: 20px;
	background: #fff;
	border-radius: 5px;
}

/* Disabled Pin Button */
.ejs-pin-btn:disabled {
	background-color: #ccc;
	color: #666;
	cursor: not-allowed;
	opacity: 0.6;
}

/* Privacy Settings */
.ejs-privacy-form {
	max-width: 800px;
}

.ejs-privacy-section {
	margin-bottom: 15px;
	padding: 20px;
	background: #f7f8f9;
	border-radius: 5px;
}

.ejs-privacy-label {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
	display: block;
}

.ejs-privacy-desc {
	font-size: 14px;
	color: #666;
	margin-bottom: 15px;
}

.ejs-privacy-options {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.ejs-privacy-options label {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
}

.ejs-privacy-options input[type="radio"] {
	width: 16px;
	height: 16px;
	accent-color: #0073aa;
}

.ejs-privacy-form button, #ejs-media-upload-button,
#ejs-media-cancel-edit {
	margin-bottom: 20px;
	padding: 10px 20px;
	background: #de282c;
	color: #fff;
	border: none;
	border-radius: 5px;
	font-size: 15px;
	cursor: pointer;
}

/* Message Notifications */
.ejs-message {
	padding: 10px 20px;
	margin-bottom: 20px;
	border-radius: 5px;
	font-size: 14px;
	position: relative;
}

.ejs-message.notice-success {
	background: #dff0d8;
	color: #3c763d;
	border: 1px solid #d6e9c6;
}

.ejs-message.notice-error {
	background: #f2dede;
	color: #a94442;
	border: 1px solid #ebccd1;
}

.ejs-message p {
	margin: 0;
}

/* Upload Button */
#ejs-media-upload-button.uploading {
	background: #ccc;
	color: #666;
	cursor: not-allowed;
}

/* Loading State */
.entry-content.loading, .ejs-friends-filter-wrapper.loading {
	opacity: 0.6;
	pointer-events: none;
}

.ejs-media-tabs, .ejs-message-tabs {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
	border: none;
	background: none;
}

.ejs-tab, .ejs-message-tab {
	padding: 7px 18px;
	border: none;
	border-radius: 5px;
	background: #f2f2f2;
	color: #212121;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	margin-bottom: 0;
	outline: none;
	width: 100%;
}

.ejs-tab.active,
.ejs-tab:focus-visible,
.ejs-message-tab.active,
.ejs-message-tab:focus-visible {
	background: #181818;
	color: #fff;
	font-weight: 600;
}

.ejs-tab:hover:not(.active), .ejs-message-tab:hover:not(.active) {
	background: #e0e0e0;
	color: #212121;
}

.ejs-tab-content, .ejs-message-tab-content {
	display: none;
}

.ejs-tab-content.active, .ejs-message-tab-content.active {
	display: block;
}

/* Media Management Actions */
.ejs-media-actions {
	display: flex;
	gap: 5px;
	padding: 10px;
	background: #f7f8f9;
	flex-wrap: nowrap;
}

.ejs-pin-btn, .ejs-edit-btn, .ejs-delete-btn,
.ejs-confirm-delete, .ejs-cancel-delete {
	flex: 1 1 0;
	min-width: 0;
	padding: 8px !important;
	border: 1px solid;
	border-radius: 5px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: all 0.2s ease;
}

/* Pin Button - Pinned State */
.ejs-pin-btn.pinned {
	background: #ffffff;
	border-color: #e0e0e0;
	color: #dd2020;
}

.ejs-pin-btn.pinned:hover {
	background: #E3F2FD;
	border-color: #1976D2;
	color: #1976D2;
	transform: translateY(-1px);
}

/* Pin Button - Unpinned State */
.ejs-pin-btn.unpinned {
	background: #ffffff;
	border-color: #e0e0e0;
	color: #666666;
}

.ejs-pin-btn.unpinned:hover {
	background: #E3F2FD;
	border-color: #1976D2;
	color: #1976D2;
	transform: translateY(-1px);
}

/* Edit Button */
.ejs-edit-btn {
	background: #ffffff;
	border-color: #e0e0e0;
	color: #666666;
}

.ejs-edit-btn:hover {
	background: #E8F5E8;
	border-color: #4CAF50;
	color: #2E7D32;
	transform: translateY(-1px);
}

/* Delete Button */
.ejs-delete-btn, .ejs-confirm-delete {
	background: #ffffff;
	border-color: #e0e0e0;
	color: #666666;
}

.ejs-confirm-delete, .ejs-cancel-delete {
	line-height: 14.5px;
}

.ejs-delete-btn:hover, .ejs-confirm-delete:hover {
	background: #FFEBEE;
	border-color: #F44336;
	color: #C62828;
	transform: translateY(-1px);
}

/* Icon Styles */
.pin-icon,
.edit-icon,
.delete-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	vertical-align: middle;
	display: inline-block;
	margin-top: -1px; /* Fine-tune vertical alignment */
}

/* Focus States for Accessibility */
.ejs-pin-btn:focus,
.ejs-edit-btn:focus,
.ejs-delete-btn:focus {
	outline: 2px solid #2196F3;
	outline-offset: 2px;
}

/* Loading State */
.ejs-pin-btn.loading,
.ejs-edit-btn.loading,
.ejs-delete-btn.loading {
	opacity: 0.6;
	pointer-events: none;
}

.ejs-pin-btn.loading .pin-icon,
.ejs-edit-btn.loading .edit-icon,
.ejs-delete-btn.loading .delete-icon {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.ejs-edit-form {
	background: #f7f8f9;
	margin-bottom: 5px;
}

.ejs-edit-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 10px;
}

.ejs-edit-field label {
	font-weight: bold;
}

.ejs-edit-field input,
.ejs-edit-field textarea {
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 5px;
	width: 100%;
}

.ejs-edit-field textarea {
	resize: vertical;
	min-height: 60px;
}

.ejs-edit-form button {
	padding: 8px 12px !important;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 12px;
}

.ejs-edit-form button[type="submit"] {
	background: #5cb85c;
	color: #fff;
}

.ejs-cancel-edit {
	background: #666;
	color: #fff;
}

.ejs-media-section-header {
	display: flex;
	align-items: center;
	width: 100%;
	margin-bottom: 20px;
}

.ejs-media-section-title {
	font-size: 22px;
	color: #333;
	display: flex;
	align-items: center;
	background: #fff;
	position: relative;
	z-index: 1;
}

.ejs-media-section-header::after {
	content: "";
	flex: 1;
	height: 3px;
	margin-left: 12px;
	background: linear-gradient(90deg, #f0f0f0 20%, #fff 80%);
	border-radius: 2px;
	display: block;
}

.ejs-media-actions .ejs-confirm-delete:disabled {
	opacity: 0.7;
	pointer-events: none;
}

.ejs-like-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px;
    border-radius: 5px;
    background: linear-gradient(135deg, #e0e0e0, #d0d0d0); /* Màu mặc định khi chưa like */
    color: #666;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
    user-select: none;
    position: relative;
    overflow: hidden;
    margin-left: 5px;
    height: 20px;
    min-width: 30px;
}

.ejs-like-btn.liked {
    background: linear-gradient(135deg, #ff4757, #ff3742); /* Màu khi đã like */
    color: #fff;
}

/* Icon styling */
.ejs-like-btn i,
.ejs-like-btn svg {
    font-size: 12px;
    transition: transform 0.2s ease;
    position: relative;
    top: 1px;
}

.ejs-like-btn.liked i,
.ejs-like-btn.liked svg {
    animation: heartbeat 0.6s ease-in-out;
}

/* Xóa like-count trong nút */
.ejs-like-btn .like-count {
    display: none;
}

/* Heartbeat animation */
@keyframes heartbeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1.1); }
    75% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* Ripple effect */
.ejs-like-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.ejs-like-btn:active::before {
    width: 60px;
    height: 60px;
}

/* Styling cho phần hiển thị Likes */
.ejs-like-count {
    font-size: 13px;
    color: #333;
}

/* Reset và base styles */
.ejs-comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ejs-comment-item {
	position: relative;
	margin: 0;
	padding: 0;
}

/* Comment component cơ bản */
.ejs-comment {
	--size: 2rem;
	position: relative;
	display: flex;
	gap: 0.75rem;
	padding: 0.5rem 0;
}

.ejs-comment-avatar {
	flex: 0 0 var(--size);
	position: relative;
	z-index: 10;
}

.ejs-comment-avatar .avatar {
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	background-color: #e0e0e0;
	display: block;
}

.ejs-comment-body {
	flex: 1;
	min-width: 0;
}

.ejs-comment-header {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 0.25rem;
	flex-wrap: wrap;
}

.ejs-comment-author-name {
	font-weight: bold;
	color: #333;
	font-size: 14px;
}

.ejs-comment-time {
	color: #666;
	font-size: 13px;
}

.ejs-comment-content {
	background-color: #f0f2f5;
	padding: 0.75rem;
	border-radius: 1rem;
	margin-bottom: 0.5rem;
	line-height: 1.4;
	font-size: 15px;
}

.ejs-comment-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.ejs-vote-btn, .ejs-reply-btn, .ejs-comment-delete-btn, .ejs-comment-edit-btn,
.ejs-cmt-user-action, .ejs-back-action-btn {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	background: none;
	border: none;
	color: #666;
	height: 29px;
	font-size: 0.875rem;
	cursor: pointer;
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	transition: background-color 0.2s;
}

.ejs-vote-btn:hover {
	background-color: #2dcd76;
}

.ejs-vote-btn[data-vote-type="downvote"]:hover, .ejs-vote-btn[data-vote-type="downvote"].voted:hover {
	background-color: #ff4757;
	color: #fff;
}

.ejs-vote-btn[data-vote-type="downvote"].voted {
	color: #ff4757;
}

.ejs-vote-btn.voted {
	color: #2dcd76;
}

.ejs-vote-btn.voted:hover {
	background-color: #2dcd76;
	color: #fff;
}

.comment-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.comment-count {
	font-size: 1.1em;
	font-weight: bold;
	color: #555;
}

#ejs-media-comment-form, #ejs-game-comment-form, #ejs-wall-comment-form,
#ejs-post-comment-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 15px;
}

#ejs-media-comment-form textarea {
	background: #fff;
	padding: 8px;
	border: 1px solid #dcdcde;
	border-radius: 5px;
	font-size: 14px;
	resize: vertical;
	min-height: 60px;
}

.ejs-toggle-replies-item {
	list-style: none;
}

.ejs-toggle-replies {
	display: block;
	background: none !important;
	border: none;
	color: #0073aa !important;
	cursor: pointer;
	font-size: 14px;
	text-decoration: none;
	outline: none !important;
}

.ejs-toggle-replies:hover {
	text-decoration: underline;
}

/* New styles for contenteditable and mention block */
.ejs-reply-input, .ejs-edit-input {
	background-color: #fff;
	padding: 0.75rem;
	border-radius: 1rem;
	line-height: 1.4;
	font-size: 15px;
	margin-bottom: 0.5rem;
}

.ejs-comment-input:empty:before, .ejs-reply-input:empty:before, .ejs-edit-input:empty:before {
	content: attr(data-placeholder);
	color: #999;
	pointer-events: none;
}

.mention-block {
	background: #e4e6eb;
	color: #1877f2;
	border-radius: 5px;
	padding: 2px 4px;
	font-weight: 500;
	cursor: pointer;
	display: inline-block;
	user-select: all;
}

.ejs-no-results {
	padding: 8px;
	color: #666;
	cursor: default;
}

/* Reddit-style Comment Form CSS */
.ejs-reply-form {
	background: #ffffff;
	border: 1px solid #dcdcde;
	border-radius: 1rem;
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ejs-reply-input {
	min-height: 40px;
	padding: 8px;
	border: none;
	font-size: 15px;
	line-height: 1.4;
	background: transparent;
	display: block;
	width: 100%;
	box-sizing: border-box;
	resize: none;
	font-family: inherit;
}

.ejs-reply-input:empty:before {
	content: attr(data-placeholder);
	color: #999;
	pointer-events: none;
}

/* Style for delete confirmation buttons */
.ejs-confirm-delete-btn,
.ejs-cancel-delete-btn,
.ejs-reply-placeholder .ejs-submit-reply,
.ejs-reply-placeholder .ejs-cancel-reply, .ejs-edit-form .ejs-submit-edit, .ejs-edit-form .ejs-cancel-edit {
	align-items: center;
	gap: 0.25rem;
	background: transparent !important;
	border: none;
	color: #333;
	height: 29px;
	font-size: 0.875rem;
	cursor: pointer;
	padding: 0.25rem 0.5rem !important;
	border-radius: 0.25rem;
}

.ejs-confirm-delete-btn:hover, .ejs-cancel-delete-btn:hover {
	color: #333;
}

/* Nested Comments Styling */
.ejs-comment-list[data-depth="1"] {
	padding-left: 2.5rem;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ejs-comment-list[data-depth="1"].visible,
.ejs-comment-list[data-depth="1"]:has(.ejs-reply-placeholder) {
    height: auto;
    opacity: 1;
	overflow: visible;
}

.ejs-comment-list[data-depth="1"] .ejs-comment {
	--size: 1.5rem;
}

.ejs-comment-list[data-depth="2"] {
	padding-left: 2.5rem;
}

.ejs-comment-list[data-depth="2"] .ejs-comment {
	--size: 1.5rem;
}

.ejs-comment-list[data-depth="0"] .ejs-comment-item.has-replies > .ejs-comment::before {
	content: "";
	position: absolute;
	left: 1rem;
	top: calc(2rem + 12px);
	height: calc(100% - 30px);
	width: 1px;
	background: #d0d0d0;
	z-index: 1;
}

.ejs-comment-list[data-depth="1"] .ejs-comment-item::after {
	content: "";
	position: absolute;
	left: -24px;
	top: 10px;
	width: 20px;
	height: 0.75rem;
	border-left: 1px solid #d0d0d0;
	border-bottom: 1px solid #d0d0d0;
	border-bottom-left-radius: 0.5rem;
	z-index: 2;
}

.ejs-comment-list[data-depth="1"] .ejs-comment-item:not(:last-child)::before {
	content: "";
	position: absolute;
	left: -24px;
	top: calc(1.5rem - 10px);
	height: 100%;
	width: 1px;
	background: #d0d0d0;
	z-index: 1;
}

.ejs-comment-list[data-depth="1"] .ejs-comment-item.has-replies > .ejs-comment::before {
	content: "";
	position: absolute;
	left: 0.75rem;
	top: calc(2rem + 4px);
	height: calc(100% - 20px);
	width: 1px;
	background: #d0d0d0;
	z-index: 1;
}

.ejs-comment-list[data-depth="2"] .ejs-comment-item::after {
	content: "";
	position: absolute;
	left: -28px;
	top: 10px;
	width: 24px;
	height: 0.75rem;
	border-left: 1px solid #d0d0d0;
	border-bottom: 1px solid #d0d0d0;
	border-bottom-left-radius: 0.5rem;
	z-index: 2;
}

.ejs-comment-list[data-depth="2"] .ejs-comment-item:not(:last-child)::before {
	content: "";
	position: absolute;
	left: -28px;
	top: calc(1.5rem - 10px);
	height: 100%;
	width: 1px;
	background: #d0d0d0;
	z-index: 1;
}

/* Style for reply placeholder */
.ejs-reply-placeholder .ejs-comment {
	display: flex;
	align-items: flex-start;
	position: relative;
	padding: 8px 0;
}

.ejs-reply-placeholder .ejs-comment-avatar {
	flex-shrink: 0;
}

.ejs-reply-placeholder .ejs-comment-avatar img {
	width: var(--size, 32px);
	height: var(--size, 32px);
	border-radius: 50%;
}

.ejs-reply-placeholder .ejs-comment-body {
	flex-grow: 1;
	background: transparent;
	padding: 0;
	border-radius: 0;
}

.ejs-reply-placeholder .ejs-comment-header {
	margin-bottom: 4px;
}

.ejs-reply-placeholder .ejs-comment-author-name {
	font-weight: 600;
	color: #050505;
}

.ejs-reply-placeholder .ejs-comment-content {
	margin-bottom: 4px;
}

.ejs-reply-placeholder .ejs-reply-input {
	background: #fff;
	border-radius: 1rem;
	padding: 0.75rem;
}

.ejs-reply-placeholder .ejs-comment-actions {
	display: flex;
	gap: 8px;
}

/* Đường line dọc cho reply placeholder (do JS xử lý) */
.ejs-comment-list[data-depth="1"] .ejs-reply-placeholder::before,
.ejs-comment-list[data-depth="2"] .ejs-reply-placeholder::before {
	content: none; /* Xóa ::before cũ */
}

.ejs-comment-list[data-depth="1"] .ejs-reply-line {
	position: absolute;
	left: -24px;
	top: auto;
	bottom: calc(100% - 10px);
	width: 1px;
	min-height: 10px; /* Đảm bảo tối thiểu */
	background: #d0d0d0;
	z-index: 1;
	transition: height 0.1s ease, opacity 0.1s ease; /* Thêm hiệu ứng mượt */
	will-change: height; /* Tối ưu render */
	opacity: 1;
}

.ejs-comment-list[data-depth="2"] .ejs-reply-line {
	position: absolute;
	left: -28px;
	top: auto;
	bottom: calc(100% - 10px);
	width: 1px;
	min-height: 10px; /* Đảm bảo tối thiểu */
	background: #d0d0d0;
	z-index: 1;
	transition: height 0.1s ease, opacity 0.1s ease; /* Thêm hiệu ứng mượt */
	will-change: height; /* Tối ưu render */
	opacity: 1;
}

.ejs-reply-line[style*="display: none"] {
	opacity: 0; /* Ẩn mượt hơn */
}

/* View replies button */
.ejs-view-replies {
    cursor: pointer;
    color: #0073aa;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 0;
    position: relative;
    margin-left: 2.5rem; /* Lùi như depth=1 */
    display: inline-block;
}

.ejs-view-replies:hover .ejs-view-replies-text {
    color: #005177;
    text-decoration: underline;
}

/* Đảm bảo khung reply luôn hiển thị */
.ejs-comment-list[data-depth="1"] .ejs-reply-placeholder {
    display: block !important;
}

.ejs-view-replies-line {
    position: absolute;
    left: -24px;
    top: 10px;
    width: 20px;
    height: 0.75rem;
    border-left: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    border-bottom-left-radius: 0.5rem;
    z-index: 2;
}

.ejs-reply-line[style*="display: none"] {
    opacity: 0;
}

.ejs-comment-input-wrapper {
    position: relative;
    background: #fff;
    border-radius: 1rem;
    min-height: 40px;
    transition: min-height 0.3s ease;
    overflow: hidden;
}

.ejs-comment-input-wrapper.expanded {
    min-height: 120px;
}

.ejs-comment-input {
    position: relative;
    background: transparent;
    border: none;
    padding: 12px;
    width: 100%;
    min-height: 40px;
    outline: none;
    font-size: 14px;
    resize: none;
}

.ejs-comment-input:empty:before {
    content: attr(data-placeholder);
    color: #999;
    pointer-events: none;
}

.ejs-comment-input-wrapper .ejs-comment-actions {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: none;
    gap: 8px;
}

.ejs-comment-input-wrapper.expanded .ejs-comment-actions {
    display: flex;
}

.ejs-submit-comment, .ejs-cancel-comment {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 1rem;
}

.ejs-submit-comment {
    background: #df282c;
    color: #fff;
}

.ejs-cancel-comment {
    background: #f0f2f5;
    color: #333;
}

#ejs-comment-sort {
    border: none;
    outline: none;
    padding: 0;
	font-size: 15px;
}

.ejs-game-comments h3, .ejs-media-comments h3, .ejs-friends-page h3 {
    font-size: var(--ejs-font-size-xl);
    margin-bottom: 20px;
    color: var(--ejs-text-dark);
}

/* Blog Post Changes*/
.comments-area {
	padding: 20px !important;
}

.separate-containers .inside-article>.featured-image img {
	border-radius: 5px;
}

/* CSS for photo group view and badges in EmulatorJS plugin. */
.ejs-photo-group-view {
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

.ejs-photo-group-image {
    user-select: none;
    cursor: pointer; /* Indicate clickable image */
    width: 100%;
    object-fit: contain;
    border-radius: 5px;
    vertical-align: top;
}

.ejs-photo-group-nav {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.ejs-photo-prev,
.ejs-photo-next {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    user-select: none;
    background: rgba(0, 0, 0, 0.5);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.ejs-photo-prev {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.ejs-photo-next {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.ejs-photo-prev:hover,
.ejs-photo-next:hover {
    color: white;
    background: rgba(0, 0, 0, 0.7);
}

.ejs-photo-prev::before {
    content: "\f104"; /* fa-angle-left */
}

.ejs-photo-next::before {
    content: "\f105"; /* fa-angle-right */
}

.ejs-photo-group-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.5);
    padding: 8px 4px;
	height: 32px;
}

.ejs-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ejs-dot:hover {
    background: rgba(255, 255, 255, 0.7);
}

.ejs-dot.active {
    background: rgba(255, 255, 255, 1);
}

.ejs-media-badge-private {
    background: #dc3232;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.ejs-media-badge-private::before {
    content: "\f023";
}

.ejs-media-badge-photo {
    background: #0073aa;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

.ejs-media-preview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 10px;
}

.ejs-media-preview-item {
    position: relative;
    width: 100%;
    height: 100px;
    min-width: 0; /* Đảm bảo item có thể shrink */
}

.ejs-media-preview-item img,
.ejs-media-preview-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.ejs-remove-preview {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #dc3232;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 17px;
    cursor: pointer;
}

.ejs-media-upload-privacy {
    margin-top: 10px;
}

/* CSS - Sửa lại để disable toàn bộ form */
#ejs-media-upload-form.ejs-upload-disabled {
    opacity: 0.5 !important;
    pointer-events: none !important;
    position: relative !important;
}

#ejs-media-upload-form.ejs-upload-disabled::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.3);
    z-index: 999 !important;
    cursor: not-allowed;
}

/* Media Management Responsive */
@media (min-width: 768px) {
	.ejs-media-manager .ejs-media-grid, .ejs-profile-overview .ejs-media-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.ejs-related-media-shortcode .ejs-media-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.ejs-media-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 1023px) {
	.ejs-profile-overview {
		flex-direction: column;
	}
	.ejs-profile-main, .ejs-profile-sidebar {
		width: 100%;
	}
	.ejs-user-login {
		float: none;
		justify-content: center;
	}
	.dropdown-menu {
		left: 0;
		right: auto;
	}
	.ejs-profile-basic-info, .ejs-profile-stats {
		width: 100%;
	}
	.ejs-profile-header {
		flex-direction: row;
	}
	.ejs-profile-avatar {
		max-width: calc(100% - 25vw);
		height: auto;
		margin-bottom: 0;
	}
}

@media (max-width: 768px) {
	.ejs-profile-avatar {
		max-width: 30vw;
		height: auto;
		margin-bottom: 0;
	}
	.ejs-my-account-tabs {
		flex-direction: column;
	}
	.ejs-my-account-tab a {
		justify-content: flex-start;
	}
	.ejs-activity-filter input[type="text"],
	.ejs-activity-filter select,
	.ejs-media-filter input[type="text"],
	.ejs-media-filter select,
	.ejs-notifications-filter input[type="text"],
	.ejs-notifications-filter select {
		width: 100%;
	}
	.ejs-privacy-options {
		flex-direction: column;
		gap: 10px;
	}
	.ejs-media-upload-form {
		max-width: 100%;
	}
	.ejs-media-show-all {
		align-self: flex-start;
	}
	.ejs-modal h2 {
		font-size: 16px;
	}
	.ejs-edit-form button,
	.ejs-delete-media-form button {
		padding: 8px;
		font-size: 12px;
	}
}

@media (max-width: 640px) {
	.ejs-profile-data-wrapper {
		flex-direction: column;
	}
	.ejs-cmt-btn-hide {
		display: none;
	}
}

@media (max-width: 374px) {
	.ejs-user-login {
		font-size: 13px
	}
	.ejs-profile-overview .ejs-media-grid {
		grid-template-columns: repeat(1, 1fr);
	}
	.ejs-profile-avatar {
		width: 100%;
		margin-right: 0;
		max-width: 100%;
	}
	.ejs-profile-header {
		flex-direction: column;
		align-items: normal;
	}
}