.multicollab_body_class {
	.cf-show-more {
		display: inline-block;
		color: #0568C1;
		font-size: 12px;
		font-weight: 400;
		font-style: italic;
		text-decoration: none;
		&:focus {
			-webkit-box-shadow: none;
			box-shadow: none;
		}
	}
	.user-data-row {
		.show-all-comments {
			color: #007CBA;
			font-size: 12px;
			line-height: 18px;
			text-align: center;
			cursor: pointer;
			&:hover {
				text-decoration: underline;
			}
		}
		.user-data-box {
			&.user-reply {
				& + .show-all-comments {
					margin-top: -8px;
					margin-bottom: -10px;
					& + .user-data-box {
						&.cf-mark-as-resolved {
							margin-top: 18px;
						}
					}
				}
			}
		}
	}
	.cf-dashboard-panel__board-main {
		background-color: #fff;
		padding: 30px;
		h3 {
			&.cf-dashboard-panel__board-title {
				margin: 0;
				text-align: center;
				font-size: 24px;
				line-height: normal;
			}
		}
		a {
			&:focus {
				-webkit-box-shadow: none;
				box-shadow: none;
			}
		}
		.board-detail-head {
			h2 {
				text-align: center;
			}
			#activity-go-back {
				&:before {
					content: "\f340";
					font-family: dashicons;
					display: inline-block;
					vertical-align: bottom;
					margin-right: 10px;
					font-size: 16px;
				}
			}
		}
		p {
			font-weight: 400;
			text-align: center;
			color: #000;
		}
		.board-items-rows {
			position: relative;
			&:before {
				content: '';
				display: inline-block;
				position: absolute;
				left: 50%;
				width: 1px;
				height: 100%;
				background-color: #C3C4C7;
			}
		}
		h4 {
			&.cf-dashboard-panel__board-day  {
				text-align: center;
				font-size: 18px;
				margin: 0;
				padding: 20px 0;
				position: relative;
				background-color: #fff;
				color: #1d2327;
			}
			&.cf-dashboard-panel__row-title {
				margin: 0 0 20px;
				a {
					font-size: 16px;
					color: #0568C1;
				}
			}
		}
		.cf-dashboard-panel__row-inner {
			width: 50%;
			@media screen and (max-width:1024px) {
				max-width: 100%;
				width: 100%;
			}
		}
		.cf-dashboard-panel__row-wrap {
			max-width: 327px;
			@media screen and (max-width:1024px) {
				max-width: 100%;
			}
		}
		.user-data-row {
			border-top: 0;
			border: 1px solid #E2E4E7;
			padding: 20px;
			width: 100%;
			position: relative;
			border-radius: 6px;
			@media screen and (max-width:1024px) {
				margin: 0 0 30px;
			}
			.side-time {
				position: absolute;
				right: 100%;
				top: 0;
				color: #1D2327;
				font-size: 14px;
				min-width: 110px;
				padding: 0 20px;
				text-align: center;
				font-weight: 500;
				@media screen and (max-width:1024px) {
					top: 100%;
					right: 0;
					left: auto;
					min-width: auto;
					padding: 7px 5px 3px;
				}
			}
			.user-data-box {
				.user-display-name {
					width: 100%;
				}
				&:last-of-type {
					margin-bottom: 0;
				}
			}
			.user-action {
				a {
					margin-top: 0;
					color: #50575E;
					margin-left: 12px;
					position: relative;
					&:hover {
						color: #0568C1;
						.tooltip {
							display: block;
						}
					}
					.tooltip {
						font-size: 12px;
						line-height: 18px;
						border-radius: 4px;
						background: #1E1E1E;
						color: #fff;
						padding: 5.5px 10px;
						font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
						font-weight: 500;
						position: absolute;
						top: 100%;
						left: 0;
						min-width: -webkit-max-content;
						min-width: -moz-max-content;
						min-width: max-content;
						-webkit-transform: translate(0,12px);
						-ms-transform: translate(0,12px);
						transform: translate(0,5px);
						display: none;
						cursor: pointer;
						z-index: 9;
					}
				}
			}
			.user-commented-on {
				&.add {
					blockquote {
						border-left: 3px solid #188651;
					}
				}
				&.delete {
					blockquote {
						&.user-commented-icon {
							border-left: 3px solid #EA1010;
						}
					}
				}
			}
			.user-comment-attchment {
				position: relative;
				padding-left: 12px;
				margin-top: 5px;
				margin-bottom: 5px;
				display: flex;
				width: 100%;
				a {
					font-size: 10px;
					color: #007CBA;
					text-decoration: none;
					font-style: italic;
					font-weight: 500;
					line-height: 12px;
					text-overflow: ellipsis;
					white-space: nowrap;
					max-width: 55%;
					overflow: hidden;
					&:focus {
						box-shadow: none;
					}
				}
				&:not(:empty)::before {
					content: "";
					position: absolute;
					background-image: url(../images/attach.svg);
					background-repeat: no-repeat;
					height: 11.44px;
					width: 6px;
					background-position: center;
					text-align: center;
					top: 1px;
					left: 0;
				}
			}
			&:last-child {
				.user-data-box {
					&:not(.user-reply) {
						.user-comment-attchment {
							margin-left: 12px;
							margin-top: 5px;
						}
					}
				}
			}
		}
		.cf-dashboard-panel__board-row {
			position: relative;
			&:before {
				content: '';
				display: inline-block;
				position: absolute;
				left: 50%;
				top: 0;
				bottom: 0;
				width: 1px;
				height: 100%;
				background-color: #C3C4C7;
				@media screen and (max-width:1024px) {
					display: none;
				}
			}
			&.date_continued {
				&.post_continued {
					h4 {
						&.cf-dashboard-panel__row-title {
							display: none;
						}
					}
				}
			}
			&.cf-dashboard-panel__row-rhs {
				.cf-dashboard-panel__row-inner {
					padding: 0 0 0 120px;
					margin: 0 0 0 auto;
					@media screen and (max-width:1024px) {
						padding: 0;
						border: 0;
						margin: 0 auto;
					}
				}
				.cf-dashboard-panel__row-wrap {
					margin: 0 auto 0 0;
				}
				& + .cf-dashboard-panel__board-row {
					&.cf-dashboard-panel__row-rhs {
						.cf-dashboard-panel__row-inner {
							padding: 20px 0 0 120px;
							@media screen and (max-width:1024px) {
								padding: 20px 0 0 0;
							}
						}
					}
				}
			}
			&.cf-dashboard-panel__row-lhs {
				.cf-dashboard-panel__row-inner {
					padding: 0 120px 0 0;
					margin: 0 auto 0 0;
					@media screen and (max-width:1024px) {
						padding: 0;
						border: 0;
						margin: 0 auto;
					}
				}
				.cf-dashboard-panel__row-wrap {
					margin: 0 0 0 auto;
				}
				& + .cf-dashboard-panel__board-row {
					&.cf-dashboard-panel__row-lhs {
						.cf-dashboard-panel__row-inner {
							padding: 20px 110px 0 0;
							@media screen and (max-width:1024px) {
								padding: 20px 0 0 0;
							}
						}
					}
				}
				.user-data-row {
					.side-time {
						right: auto;
						left: 100%;
						@media screen and (max-width:1024px) {
							right: 0;
							left: auto;
						}
					}
				}
			}
		}
		&.cf-detail-view {
			h4 {
				&.cf-dashboard-panel__row-title {
					display: none;
				}
			}
		}
	}
	.cf-commentboard-attach-wrap {
		button {
			&.btn-attchment-del {
				top: 4px;
			}
		}
	}
	#cf-dashboard {
		.cf-activities {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			margin: 20px 0 10px;
			li {
				&:not(:last-child):after {
					content: '|';
					margin: 0 10px;
				}
				a {
					text-decoration: none;
					font-weight: 600;
					font-size: 15px;
					&:focus {
						outline: none;
						-webkit-box-shadow: none;
						box-shadow: none;
					}
				}
				&.active {
					a {
						color: #000;
					}
				}
			}
		}
		.user-data-row {
			.user-commented-on {
				&.show-less,
				&.show-all {
					margin-right: 10px;
				}
			}
			.show-all-comments {
				color: #007CBA;
				font-size: 12px;
				line-height: 18px;
				text-align: center;
				cursor: pointer;
				&:hover {
					text-decoration: underline;
				}
			}
			.user-data-box {
				&.user-reply {
					& + .show-all-comments {
						margin-top: -8px;
						margin-bottom: -10px;
						& + .user-data-box {
							&.cf-mark-as-resolved {
								margin-top: 18px;
							}
						}
					}
				}
			}
			.user-data-box {
				&.user-reply {
					& + .show-all-comments {
						margin-bottom: 5px;
					}
				}
			}
		}
		.tablenav{
			.view-switch{
				@media screen and (max-width:782px) {
					display: block;
					text-align: center;
					margin-bottom: 15px;
					float: none;
					padding: 0;
				}
				@media screen and (max-width:700px) {
					margin-bottom: 0;
				}
			}
			&.top{
				.actions{
					@media screen and (max-width:782px) {
						display: block;
						text-align: center;
						margin-bottom: 15px;
						float: none;
						padding: 0;
					}
					@media screen and (max-width:700px) {
						margin-bottom: 0;
					}
				}
			}
		}
	}
}

// Module upgrade CTA
.cf-upgrade-container {
    background: #f0ebff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    border-radius: 4px;

	.cf-upgrade-main {
    display: flex;
    align-items: center;
    gap: 30px;
    width: 100%;
    max-width: 960px;
    padding: 30px;
}

.cf-upgrade-icon {
    min-width: 85px;
    min-height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4b1bce;
    border-radius: 50%;
}

.cf-upgrade-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cf-upgrade-title {
    font-size: 1.6rem !important;
    margin: 0 0 15px 0;
}

.cf-upgrade-desc {
    font-size: 16px !important;
    margin-bottom: 18px;
    margin-top: 0;
    line-height: 28px !important;
}

.cf-upgrade-btn {
    margin-top: 2px;
    background: #4b1bce;
    color: #fff;
    border: 2px solid #4b1bce;
    border-radius: 4px;
    padding: 10px 30px;
    font-size: 16px;
	font-weight: 500;
    cursor: pointer;
    transition: background 0.16s;
    box-shadow: 0 4px 16px rgba(82,63,251,0.09);
    width: fit-content;

	&:hover {
		background: transparent;
		color: #4b1bce;
	}
}


/* Responsive Styles */
@media (max-width: 768px) {
  .cf-upgrade-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px 5vw;
  }
  .cf-upgrade-icon {
    min-width: 66px;
    min-height: 66px;
  }
  .cf-upgrade-title {
    font-size: 1.24rem;
  }
  .cf-upgrade-desc {
    font-size: 1rem;
  }
  .cf-upgrade-btn {
    font-size: 1rem;
    padding: 10px 26px;
  }
}
}