.multicollab_body_class {
	.suggestion-toggle {
		.components-base-control__field {
			margin-bottom: 12px;
		}
		.sg-notice {
			color: #f02849;
		}
	}
	.cf-unset-all{
		.cls-board-outer {
			opacity: 0.2;
			
			.board { 
				.shareCommentContainer,
				.commentContainer {
					.tooltip {
						display: none;
					}
				}
				.comment-actions  {
					.buttons-wrapper,
					.comment-resolve input,
					.suggestion-comment-accpt-meta {
						pointer-events: none;
					}
				}
			}
		}
	}
	.cf-unset-all{
		.cls-board-outer.focus,
  		.cls-board-outer.is-open  {
			opacity: 1;

			.board { 
				.shareCommentContainer,
				.commentContainer {
					.tooltip {
						display: block;
					}
				}
				.comment-actions  {
					.buttons-wrapper,
					.comment-resolve input,
					.suggestion-comment-accpt-meta {
						pointer-events: unset;
					}
				}
			}
		}
	}
	.cls-board-outer {
		position: relative;
		background: #fff;
		// filter: unset;
		width: 248px;
		-webkit-box-shadow: 0 3px 10px 0 rgb(0 0 0 / 5%);
		box-shadow: 0 3px 10px 0 rgb(0 0 0 / 5%);
		border-radius: 10px;
		margin-bottom: 50px;
		-webkit-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
		font-size: 13px;
		cursor: pointer;
		border: 1px solid #E2E4E7;
		left: auto;
		z-index: 1;
		margin-right: 0;
		&[style*="opacity: 0.2"] {
			.board { 
				.shareCommentContainer,
				.commentContainer {
					.tooltip {
						display: none;
					}
				}
				.comment-actions  {
					.buttons-wrapper,
					.comment-resolve input,
					.suggestion-comment-accpt-meta {
						pointer-events: none;
					}
				}
			}
		}
		
		@media screen and (max-width:1280px){
			width:260px;
		}
		@media screen and (max-width:375px) {
			left: 28px;
		}
		.cf-option-midlight-btn, .cf-option-dark-btn {
			display: none;
		}
		&:hover {
			.cf-option-light-btn,.cf-option-dark-btn {
				display: none;
			}
			.cf-option-midlight-btn {
				display: block;
			}
		}
		.comment-copied-tooltip {
			&:not(:empty) {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
			}
		}
		.cf-assign-to-inner {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			position: relative;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
		}
		.cf-assign-to {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
			width: 100%;
			margin: 5px 0 0;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;
			.assignMessage {
				color: #191E23;
				font-size: 10px;
				border-top: 1px solid #E2E4E7;
				padding-top: 10px;
				margin-top: 10px;
				line-height: 16px;
			}
			.cf-assign-to-inner {
				.dashicons-arrow-down-alt2 {
					margin-left: auto;
					font-size: 16px;
					line-height: 22px;
				}
			}
		}
		&.focus {
			.cf-share-comment {
				&:focus {
					cursor: text;
				}
			}
			.cf-board-assigned-to {
				.assigned-user-details {
					background-color: #007CBA;
					.user-info {
						span {
							&.badge {
								color: #fff;
								word-break: break-all;
							}
						}
						p {
							&.display-name {
								color: #fff;
								word-break: break-all;
							}
						}
					}
				}
			}
		}
		.comment-delete-overlay {
			background-color: rgb(0, 0, 0, 0.7);
			width: 100%;
			height: 100%;
			text-align: center;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			padding: 20px;
			display: none;
			&.show {
				display: block;
			}
			.comment-overlay-text {
				font-size: 14px;
				font-weight: 500;
				color: #fff;
				line-height: 17px;
				display: inline-block;
				margin-bottom: 4px;
			}
		}
		.shareCommentContainer,
		.cf-board-assigned-to {
			&.overlay-display-none {
				display: none;
			}
		}
		.shareCommentContainer {
			.btn-wrapper {
				display: none;
			}
			.btn-success {
				position: relative;
				.tooltip {
					-webkit-transform: translate(-14px, 7px);
					-ms-transform: translate(-14px, 7px);
					transform: translate(-14px, 7px);
				}
				&:hover {
					.tooltip {
						display: block;
						-webkit-transform: translate(-18px, 12px);
						-ms-transform: translate(-18px, 12px);
						transform: translate(-18px, 12px);
					}
				}
			}
			.suggestion-comment-accpt-meta {
				li {
					i {
						&.dashicons-share {
							&:hover {
								.tooltip {
									-webkit-transform: translate(-18px, 0);
									-ms-transform: translate(-18px, 0);
									transform: translate(-18px, 0);
									-moz-transform: translate(-18px, 0);
									-o-transform: translate(-18px, 0);
								}
							}
						}
						&:hover {
							.tooltip {
								-webkit-transform: translate(-85px, 0px);
								-ms-transform: translate(-85px, 0px);
								transform: translate(-85px, 0px);
								opacity: 1;
								visibility: visible;
							}
						}
					}
				}
			}
		}
		.commentContainer {
			.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, 12px);
				display: none;
				cursor: pointer;
				display: block;
				visibility: hidden;
				opacity: 0;
			}
			.commenter-name {
				.tooltip {
					left: auto;
					-webkit-transform: translate(40%, 4px);
					-ms-transform: translate(40%, 4px);
					transform: translate(40%, 4px);
				}
				&:hover {
					.tooltip {
						opacity: 1;
						visibility: visible;
					}
				}
			}
			button {
				&:hover {
					.tooltip {
						visibility: visible;
						opacity: 1;
					}
				}
			}
			.suggestion-comment-accpt-meta {
				li {
					i {
						&:hover {
							.tooltip {
								-webkit-transform: translate(-85px, 0px);
								-ms-transform: translate(-85px, 0px);
								transform: translate(-85px, 0px);
								opacity: 1;
								visibility: visible;
							}
						}
						&.dashicons-share {
							&:hover {
								.tooltip {
									-webkit-transform: translate(-18px, 0);
									-ms-transform: translate(-18px, 0);
									transform: translate(-18px, 0);
									-moz-transform: translate(-18px, 0);
									-o-transform: translate(-18px, 0);
								}
							}
						}
					}
				}
			}
		}
		.show-all-comments {
			color: #007CBA;
			font-size: 12px;
			text-align: center;
			border-top: 1px solid #E2E4E7;
			padding: 12px 0;
			cursor: pointer;
			&:hover {
				text-decoration: underline;
			}
		}
		input[type=checkbox]:checked {
			&::before {
				content: "";
				background-image: url(../images/check.svg);
				background-repeat: no-repeat;
				width: 16px;
				height: 16px;
				position: absolute;
				top: 2px;
				left: 3px;
				text-align: center;
				background-size: 9px;
				background-color: #007CBA;
				background-position: center;
				border-radius: 3px;
			}
		}
		.board {
			.cf-share-comment {
				width: 100%;
				height: auto;
				border: 2px solid #E2E4E7;
				padding: 8.5px 12px;
				cursor: text;
				display: block;
				background-color: #fff;
				color: #191E23;
				border-radius: 5px;
				word-break: break-word;
				user-select: text;
				line-height: normal;
				overflow: hidden;
				&:focus {
					border: 2px solid #007cba;
				}
				&[placeholder]:empty {
					&:before {
						content: attr(placeholder);
						color: #939393;
					}	
				}
			}
			.commentContainer {
				width: 100%;
				padding: 0 14px;
				position: relative;
				.commentInnerContainer {
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					padding: 16px 0 13px;
					border-top: 1px solid #E2E4E7;
					color: #191e23;
					.updated-time {
						font-size: 10px;
						color: #757575;
						line-height: 13px;
						margin-right: 5px;
						position: relative;
					}
				}
				button {
					&.js-cancel-comment {
						border-color: #E2E4E7;
						&:hover {
							span {
								&.tooltip {
									opacity: 1;
									visibility: visible;
									-webkit-transform: translate(0, 8px);
									-ms-transform: translate(0, 8px);
									transform: translate(0, 8px);
								}
							}
						}
					}
					&.save-btn {
						&.btn-disabled {
							background-color: transparent;
							color: #C3C4C7;
							border-color: #E2E4E7;
							cursor: default;
						}
						&:hover {
							span {
								&.tooltip {
									opacity: 1;
									visibility: visible;
									-webkit-transform: translate(-14px, 10px);
									-ms-transform: translate(-14px, 10px);
									transform: translate(-14px, 10px);
								}
							}
						}
					}
				}
				.comment-header {
					.comment-actions {
						-webkit-box-pack: end;
						-ms-flex-pack: end;
						justify-content: flex-end;
						-webkit-box-align: center;
						-ms-flex-align: center;
						align-items: center;
						.buttons-wrapper {
							position: relative;
							-webkit-box-align: center;
							-ms-flex-align: center;
							align-items: center;
							width: 8px;
							height: 16px;
							cursor: pointer;
							-webkit-box-pack: center;
							-ms-flex-pack: center;
							justify-content: center;
							margin-left: 12px;

							&:hover {
								.cf-option-light-btn,.cf-option-midlight-btn {
									display: none;
								}
								.cf-option-dark-btn {
									display: block;
								}
							}	

							.more-option-btn {
								position: relative;
								width: 4px;
								height: 16px;
								z-index: -1;
								text-align: center;

								span {
									&:first-child,
									&:last-child {
										width: 4px;
										height: 4px;
										background-color: #DBDBDB;
										border-radius: 30px;
										position: absolute;
										cursor: pointer;
										left: 0;
									}

									&:nth-child(2) {
										position: relative;
										width: 4px;
										height: 4px;
										top: 6px;
										background-color: #DBDBDB;
										border-radius: 30px;
										cursor: pointer;
										display: flex;			
									}
									&:first-child {
										top: 0;
									}
									&:last-child {
										bottom: 0;
									}
								}
							}
							&.active {
								.comment-more-option {
									display: block;
								}
								.tooltip {
									display: none;
								}
							}
							.comment-more-option {
								display: none;
								position: absolute;
								top: 22px;
								right: -11px;
								background-color: #fff;
								border: 1px solid #E2E4E7;
								border-radius: 10px;
								z-index: 9;
								overflow: hidden;
								width: max-content;
								.comment-more-option-list {
									padding: 4px 0;
									margin: 0;
									list-style: none;
									text-align: left;
								}
							}
							li {
								i {
									font-size: 18px;
									margin-left: 6px;
									color: #9e9e9e;
									font-style: normal;
									line-height: normal;
									margin-left: 0;
								}
								&:hover {
									i {
										color: #007CBA;
									}
								}
							}
							.comment-more-option-list {
								li {
                                    padding: 4.5px 9px;
									margin: 0;
									display: -webkit-box;
									display: -ms-flexbox;
									display: flex;
									-webkit-box-align: center;
									-ms-flex-align: center;
									align-items: center;

									span {
										&.more-option-meta {
											color: #191E23;
											font-size: 12px;
											margin-left: 4px;
											line-height: inherit;
										}
									}

									&:hover {
										background-color: #F1F3F4;
										cursor: pointer;

										.more-option-meta {
											color: #007CBA;
										}
									}
								}
							}
							&:hover {
								.tooltip {
									opacity: 1;
									visibility: visible;
								}
							}

							&:hover {
								.more-option-btn span{
									background-color: #666666;
								}
							}

							.tooltip {
								left: auto;
								right: -8px;
							}
						}
					}
					.commenter-name-time {
						.comment-time-wrapper {
							&:hover {
								span {
									&.tooltip {
										-webkit-transform: translate(0, 0px);
										-ms-transform: translate(0, 0px);
										transform: translate(0, 0px);
									}
								}
							}
						}
					}
				}
				.commentText {
					a {
						color: #007CBA;
						&.js-mentioned {
							color: #007CBA;
						}
					}
				}
				&:hover {
					.comment-header .comment-actions{
						.buttons-wrapper {
							.more-option-btn span{
								background-color: #949494;
							}
						}
					}
				}
			}
			.shareCommentContainer {
				display: none;
				padding: 12px 14px;
				border-top: 1px solid #E2E4E7;

				.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, 12px);
					display: none;
					cursor: pointer;
					display: block;
					visibility: hidden;
					opacity: 0;
				}
				.btn-upload {
					.tooltip {
						transform: translate(-20px, 12px);
					}
				}
				.btn {
					color: #007cba;
					letter-spacing: 0.5px;
					border-radius: 5px;
					padding: 6px 10px;
					outline: none;
					cursor: pointer;
					margin-top: 12px;
					font-weight: 500;
					border: 1px solid #007cba;
					background: #fff;
					font-size: 12px;
					min-width: auto;
					position: relative;
					&.btn-cancel {
						border-color: #E2E4E7;
						&:hover {
							.tooltip {
								display: block;
							}
						}
						.tooltip {
							-ms-transform: translate(-50%, 7px);
							transform: translate(-50%, 7px);
							-webkit-transform: translate(-50%, 7px);
							left: 50%;
						}
					}
					&.btn-success {
						&.btn-disabled {
							background-color: transparent;
							color: #C3C4C7;
							border-color: #E2E4E7;
							cursor: default;
						}
					}
				}
				button {
					&.btn {
						&.btn-success {
							background-color: #007CBA;
							border-color: #007CBA;
							color: #fff;
						}
					}
					&:hover {
						.tooltip {
							visibility: visible;
							opacity: 1;
						}
					}
				}
			}
			button {
				&.btn-attchment-del {
					span {
						&.tooltip {
							transform: translate(-50px, 12px);
							-webkit-transform: translate(-50px, 12px);
							-ms-transform: translate(-50px, 12px);
						}
					}
				}
			}
			span {
				&.tooltip {
					z-index: 9;
				}
			}
			span {
				&.attachment-text {
					> div {
						text-overflow: ellipsis;
						white-space: nowrap;
						max-width: 55%;
						overflow: hidden;
					}
					&:not(:empty) {
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						margin-top: 5px;
						position: relative;
						margin-bottom: 0;
						-webkit-box-align: center;
						-ms-flex-align: center;
						align-items: center;
					}
					&: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;
					}
					&:not(:empty):before {
						top: 0;
						position: relative;
						background-size: 7px;
						height: 14.44px;
						width: 10px;
						margin-right: 5px;
					}
				}
			}
			.attachment-text,
			#cf_thumb_file {
				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;
					}
				}
			}
			#cf_thumb_file {
				a {
					margin-top: 8px;
					max-width: 100%;
					margin-right: 2px;
					font-weight: 500;
				}
			}
			div#cf_thumb_file {
				display: flex;
				float: left;
				max-width: 55%;
			}
			.shareCommentContainer,
			.commentContainer {
				.btn-upload {
					position: relative;
					outline: none;
					border: none;
					width: 20px;
					height: 20px;
					line-height: 23px;
					background-color: transparent;
					border-radius: 3px;
					cursor: pointer;
					margin-left: 10px;
					line-height: 20px;
					&:hover,
					&:active {
						background-color: #F2F2F2;
						svg {
							path {
								fill: #666;
							}
						}
					}
				}
			}
			.commentContainer {
				.btn-upload {
					padding: 0;
					margin: 0;
				}
			}
			button {
				&.btn-attchment-del {
					position: relative;
					outline: none;
					border: none;
					width: 20px;
					height: 20px;
					line-height: 23px;
					background-color: transparent;
					border-radius: 3px;
					cursor: pointer;
					line-height: 26px;
					width: 22px;
					height: 22px;
					padding: 0;
					margin: 0;
					svg {
						path {
							fill: #EA1010;
						}
					}
					&:hover,
					&:active {
						background-color: #F2F2F2;
					}
				}
			}
			.comment-delete-overlay {
				button {
					margin-top: 4px;
					&.btn-delete {
						background-color: #CEE7F4;
						border: 1px solid #5E9FBF;
						padding: 5px 10px;
					}
				}
				.btn {
					&.btn-cancel {
						border: 1px solid #E2E4E7;
					}
				}
			}
			.commentContainer {
				&:first-child {
					position: initial;
					.commentInnerContainer {
						border-top: 0;
						.comment-delete-overlay {
							border-radius: 10px;
						}
					}
				}
			}
			&.fresh-board {
				.commentContainer {
					.commentInnerContainer {
						padding: 16px 0 14px;
						border-top: 0;
					}
					.comment-header {
						margin-bottom: 0;
					}
				}
			}
			.commentInnerContainer {
				.updated-time {
					&:hover {
						.tooltip {
							visibility: visible;
							display: block;
							opacity: 1;
						}
					}
				}
			}
		}
		&.sg-board {
			.board {
				.commentContainer {
					.commentText {
						em {
							color: #50575E;
							font-weight: 400;
						}
					}
					.comment-actions {
						position: relative;
						top: 0;
						right: 0;
						width: auto;
						margin: 0;
					}
				}
				.btn-comment {
					opacity: 1;
				}
				.comment-header {
					.comment-actions {
						.suggest-box-action {
							&.buttons-wrapper {
								i {
									.tooltip {
										font-size: 14px;
										background: #000;
										color: #fff;
										padding: 8px 10px;
										font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
										font-weight: 600;
										position: absolute;
										top: 100%;
										right: 0;
										min-width: -webkit-max-content;
										min-width: -moz-max-content;
										min-width: max-content;
										-webkit-transform: translate(40px, 5px);
										-ms-transform: translate(40px, 5px);
										transform: translate(40px, 5px);
										display: none;
										&:before {
											content: "\f142";
											display: inline-block;
											font-family: 'dashicons';
											position: absolute;
											right: 0;
											top: 0;
											-webkit-transform: translate(-40px, -16px);
											-ms-transform: translate(-40px, -16px);
											transform: translate(-40px, -16px);
											color: #000;
											font-size: 26px;
											line-height: 1;
										}
									}
									&.btn-remove-suggestion {
										.tooltip {
											-webkit-transform: translate(10px, 5px);
											-ms-transform: translate(10px, 5px);
											transform: translate(10px, 5px);
											&:before {
												-webkit-transform: translate(-10px, -16px);
												-ms-transform: translate(-10px, -16px);
												transform: translate(-10px, -16px);
											}
										}
									}
									&:hover {
										.tooltip {
											display: block;
										}
									}
								}
							}
						}
					}
				}
			}
		}
		.cf-commentboard-attach-wrap {
			display: flex;
			align-items: center;
		}
	}
	.editor-styles-wrapper {
		.suggestion-comment-accpt-meta {
			padding-left: 0;
			margin-left: 0;
			list-style: none;
			margin: 0;
		}
	}
	.suggestion-comment-accpt-meta {
		padding-left: 0;
		margin-left: 0;
		list-style: none;
		margin: 0;
		
		li {
			display: inline-block;
			margin-right: 10px;
			position: relative;
			margin-bottom: 0;
			@media screen and (max-width:1280px){
				margin-right:5px;
			}
			&:last-child {
				margin-right: 0;
			}
			i {
				font-size: 24px;
				cursor: pointer;
				color: rgb(0, 124, 186, 0.4);
				line-height: 18px;
				&.dashicons-share {
					font-size: 18px;
					line-height: 24px;
				}
				&:hover {
					color: #007CBA;
					.tooltip {
						display: block;
					}
				}
			}
		}
	}
	.js-activity-centre {
		.user-commented-icon {
			a {
				& > * {
					pointer-events: none;
				}
			}
		}
	}
	#cf-comment-board-wrapper {
		.comment-lock {
			svg {
				position: absolute;
				right: 0px;
				top: -7px;
			}
		}
		.cls-board-outer {
			&.focus {
				.show-all-comments {
					display: none !important;
				}
				.commentContainer {
					display: block !important;
				}
				.shareCommentContainer {
					display: block;
				}
			}
		}
	}
	.wc-block-mini-cart{
		display: block;
	}
}
.user-data-badge {
	display: none;
}