@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0
    }

    to {
        background-position: 0 0
    }
}

@-o-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0
    }

    to {
        background-position: 0 0
    }
}

@keyframes progress-bar-stripes {
    from {
        background-position: 40px 0
    }

    to {
        background-position: 0 0
    }
}
@mixin buttonStyle {
	.button {
		background-color: #4a1bce;
		border: 2px solid #4a1bce;
		-webkit-box-shadow: none;
		box-shadow: none;
		text-shadow: none;
		height: auto;
		padding: 10px 15px;
		line-height: normal;
		font-size: 14px;
		border-radius: 6px;
		min-width: 175px;
		text-align: center;
		font-weight: 500;
		-webkit-transition: 0.2s all ease-in-out;
		-o-transition: 0.2s all ease-in-out;
		transition: 0.2s all ease-in-out;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		-ms-border-radius: 6px;
		-o-border-radius: 6px;
		font-size: 14px;
		min-width: 70px;
		padding: 10px 15px;
		&:hover {
			background-color: transparent;
			border-color: #4a1bce;
			color: #4a1bce;
			-webkit-box-shadow: none;
			box-shadow: none;
		}
		&:focus {
			background-color: transparent;
			border-color: #4a1bce;
			color: #4a1bce;
			-webkit-box-shadow: none;
			box-shadow: none;
		}
	}
}
.multicollab_body_class {
	.cf-dashboard-layout {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding-right: 20px;
		* , *::after, *::before{
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		
		.cf-success {
			margin: 0 0 20px;
			&.notices {
				background: #fff;
				border: 1px solid #c3c4c7;
				border-left-width: 4px;
				border-left-color: #00a32a;
				box-shadow: 0 1px 1px rgb(0, 0, 0, 0.04);
				padding: 1px 12px;
			}
		}
		.cf-error {
			margin: 0 0 20px;
			&.notices {
				background: #fff;
				border: 1px solid #c3c4c7;
				border-left-width: 4px;
				border-left-color: #d63638;
				box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
				padding: 1px 12px;
			}
		}
		h2 {
			font-size: 24px;
			line-height: normal;
			margin: 0 0 20px;
			@media screen and (max-width:1200px){
				font-size:22px;
			}
		}
		h3 {
			font-size: 20px;
			line-height: normal;
			margin: 0 0 20px;
			@media screen and (max-width:1200px){
				font-size:18px;
			}
		}
		p {
			color: #191E23;
			font-size: 14px;
			line-height: normal;
			font-weight: 400;
		}
		label {
			font-size: 14px;
			color: #000;
		}
		.cf-dashboard-layout__header {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			margin: 30px 0 0;
			padding: 10px 20px;
			background-color: #fff;
			border: 1px solid #ECEAFF;
			@media screen and (max-width:1024px) {
				width: 100%;
				padding: 10px;
			}
			@media screen and (max-width:767px) {
				display: block;
				padding: 0;
			}
			.cf-dashboard-layout__header-logo {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: start;
				-ms-flex-pack: start;
				justify-content: flex-start;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				text-transform: capitalize;
				color: #000;
				font-size: 18px;
				@media screen and (max-width:767px) {
					padding: 10px 15px;
				}
				a {
					&:not(.cf-dashboard-layout__header-plan-version) {
						color: #000;
						text-decoration: none;
						display: flex;
						align-items: center;
						margin-right: 15px;
						box-shadow: none;
						border-right: 1px solid #ECEAFF;
					}
				}
			}
			h1 {
				margin: 0;
				line-height: normal;
				font-size: 20px;
			}
			img {
				margin-right: 12px;
				max-width: 130px;
				@media screen and (max-width:860px) {
					margin-right: 5px;
				}
				@media screen and (max-width:767px) {
					max-width: 115px;
				}
			}
			.cf-plugin-version {
				span {
					font-size: 18px;
					color: #646970;
				}
				.cf-external-link-icon {
					width: 12px;
					margin-left: 5px;
					margin-right: 0;
				}
				@media screen and (max-width:767px) {
					padding: 10px 15px;
				}
			}
		}
		.cf-dashboard-layout__outer {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			.cf-inner {
				width: 100%;
			}
		}
		.cf-right {
			width: 380px;
			padding: 0 20px;
			@media screen and (max-width:1400px){
				width:320px;
				padding:0 10px;
			}
			@media screen and (max-width:1280px){
				width:290px;
			}
			@media screen and (max-width:1200px){
				width:30%;
			}
			@media screen and (max-width:1100px){
				width:32%;
			}
			@media screen and (max-width:1024px) {
				width: 100%;
				padding: 0;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
			}
			@media screen and (max-width:600px) {
				display: block;
			}
			.cf-card{
				&:first-child{
					@media screen and (max-width:1024px) {
						margin-right: 20px;
					}
					@media screen and (max-width:600px) {
						margin-right: 0;
					}
				}
			}
		}
		.cf-card {
			border: 7px solid #4a1bce;
			margin: 0 auto 30px;
			background-color: #fff;
			text-align: center;
			max-width: 340px;
			-webkit-box-shadow: -3px 2px 41px 0 rgba(0, 0, 0, 0.06);
			box-shadow: -3px 2px 41px 0 rgba(0, 0, 0, 0.06);
			@media screen and (max-width:1024px) {
				margin: 0 0 30px;
				width: 100%
			}
			.cf-card-header {
				padding: 15px 22px;
				@media screen and (max-width:1280px){
					padding:15px;
				}
			}
			.cf-card-body {
				padding: 0 22px 30px;
				@media screen and (max-width:1280px){
					padding:0 15px 20px;
				}
			}
			h3 {
				margin: 0;
				font-size: 28px;
				line-height: normal;
				color: #4a1bce;
				font-weight: 700;
				@media screen and (max-width:1400px){
					font-size:26px;
				}
				@media screen and (max-width:1200px){
					font-size:24px;
				}
			}
			p {
				margin: 0 0 20px;
				font-weight: 500;
				&:last-child {
					margin-bottom: 0;
				}
			}
			.cf-dev-img {
				margin: 15px 0;
				img {
					max-width: 230px;
					width: 90%;
				}
			}
		}
		.submit {
			margin: 20px 0 0;
			padding: 0;
			.button {
				background-color: #4a1bce;
				border: 2px solid #4a1bce;
				-webkit-box-shadow: none;
				box-shadow: none;
				text-shadow: none;
				height: auto;
				padding: 10px 15px;
				line-height: normal;
				font-size: 14px;
				border-radius: 6px;
				min-width: 175px;
				text-align: center;
				font-weight: 500;
				-webkit-transition: 0.2s all ease-in-out;
				-o-transition: 0.2s all ease-in-out;
				transition: 0.2s all ease-in-out;
				-webkit-border-radius: 6px;
				-moz-border-radius: 6px;
				-ms-border-radius: 6px;
				-o-border-radius: 6px;
				font-size: 14px;
				min-width: 70px;
				padding: 10px 15px;
				&:hover {
					background-color: transparent;
					border-color: #4a1bce;
					color: #4a1bce;
					-webkit-box-shadow: none;
					box-shadow: none;
				}
				&:focus {
					background-color: transparent;
					border-color: #4a1bce;
					color: #4a1bce;
					-webkit-box-shadow: none;
					box-shadow: none;
				}
			}
		}
		.cf-settings-row {
			margin: 0 0 20px;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			align-items: center;
			&:last-child {
				margin-bottom: 0;
			}
			input[type=checkbox] {
				margin: 0 0.25rem 0 0;
			}
		}
		.cf-button {
			background-color: #4a1bce;
			border: 2px solid #4a1bce;
			-webkit-box-shadow: none;
			box-shadow: none;
			text-shadow: none;
			height: auto;
			padding: 10px 15px;
			line-height: normal;
			font-size: 14px;
			border-radius: 6px;
			min-width: 175px;
			text-align: center;
			font-weight: 500;
			-webkit-transition: 0.2s all ease-in-out;
			-o-transition: 0.2s all ease-in-out;
			transition: 0.2s all ease-in-out;
			-webkit-border-radius: 6px;
			-moz-border-radius: 6px;
			-ms-border-radius: 6px;
			-o-border-radius: 6px;
			&:hover {
				background-color: transparent;
				border-color: #4a1bce;
				color: #4a1bce;
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			&:focus {
				background-color: transparent;
				border-color: #4a1bce;
				color: #4a1bce;
				-webkit-box-shadow: none;
				box-shadow: none;
			}
		}
		.cf-check-wrap {
			position: relative;
			width: 16px;
			height: 16px;
			display: inline-block;
			vertical-align: middle;
			margin: 0 10px 0 0;
			@media screen and (max-width:1280px){
				margin-top:3px;
			}
		}
		input[type=checkbox].cf-checkbox {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			opacity: 0;
			margin: 0;
		}
		.cf-check {
			border: 1px solid #8C8F94;
			width: 16px;
			height: 16px;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			border-radius: 3px;
			-webkit-border-radius: 4px;
			-moz-border-radius: 3px;
			-ms-border-radius: 3px;
			-o-border-radius: 3px;
		}
		.cf-checkbox {
			&:checked {
				& + .cf-check {
					&::before {
						content: "\f147";
						font-family: 'dashicons', sans-serif;
						color: #4a1bce;
						font-size: 14px;
					}
				}
			}
		}
		.cf-greetings {
			margin: 0 0 40px;
		}
		.cf-video {
			text-align: center;
			iframe {
				max-width: 100%;
				width: 100%;
			}
		}
		.cf-link-wrap {
			p {
				margin: 0;
			}
			.cf-link {
				color: #4a1bce;
				text-decoration: none;
				border-bottom: 2px solid #4a1bce;
				padding-bottom: 2px;
			}
		}
		input[type=checkbox]:checked {
			border: 1px solid #8C8F94;
			opacity: 1;
			&::before {
				content: "\f147";
				font-family: 'dashicons', sans-serif;
				color: #4a1bce;
				font-size: 14px;
				position: relative;
				top: 0px;
				left: 0px;
				@media screen and (max-width:782px) {
				    margin: -0.1875rem 0 0 -0.25rem;
					height: 1.3125rem;
					width: 1.3125rem;	
				}
			}
		}
		input[type=checkbox] {
			border-radius: 0;
			width: 16px;
			height: 16px;
			line-height: 20px;
			border: 1px solid #C3C4C7;
			border-radius: 3px;
		}
		input[type=checkbox]:focus {
			border-color: #8c8f94;
			box-shadow: none;
		}
	}
	.cf-dashboard-layout__header-plan-name {
		display: block !important;
		font-size: 16px;
		font-weight: 500;
		color: #fff !important;
		padding: 10px 11px;
		border-radius: 4px;
		text-transform: uppercase;
		background: linear-gradient(90deg, rgb(75 27 206 / 91%) 0, rgb(173 73 226 / 58%) 200%);

		@media screen and (max-width:991px) {
			display: flex !important;
		}

		@media screen and (max-width:767px) {
				font-size: 14px;
				padding: 6px 8px;
		}
		svg {
			margin-right: 2px;
		}
	}
	.cf-dashboard-layout__header-plan-version {
		font-size: 12px;
		color: #BABDC3;
		line-height: 16px;
		text-decoration: none;
		text-transform: lowercase;
		@media screen and (max-width:767px) {
			font-size: 12px;
			padding: 10px 15px;
		}
		
		&:hover {
			color: #BABDC3;
		}
	}
	.cf-plugin-version {
		color: #4b1bce;
		font-size: 18px;
		a {
			font-size: 16px !important;
			color: #4b1bce;
			text-decoration: none;
			padding-left: 5px;
			padding-right: 5px;
			outline: none;
			box-shadow: none;

			&:hover {
				text-decoration: underline;
			}

			@media screen and (max-width:991px) {
				font-size: 14px !important;
			}
			
			@media screen and (max-width:767px) {
				font-size: 12px !important;
				padding-left: 0;
				padding-right: 0;
				display: inline-block;
			}
			&:last-child {
				padding-right: 0;
			}
		}
		a.pricing-block-button__link {
			text-decoration: none;
		}
	}
	.cf-card {
		.cf-card-title {
			font-size: 20px;
			color: #4b1cce;
			margin-bottom: 20px;
			margin-top: 38px;
			strong {
				color: #4b1cce;
				font-size: 40px;
				font-weight: 700;
			}
		}
	}
	.cf-card-check-list {
		text-align: left;
		li {
			font-size: 18px;
			color: #2c2a31;
			line-height: 25px;
			position: relative;
			padding-left: 30px;
			&:before {
				content: "";
				position: absolute;
				left: 0;
				top: 6px;
				background-image: url(../images/right-check.svg);
				width: 18px;
				height: 13px;
				background-repeat: no-repeat;
			}
		}
	}
	.cf-dashboard-layout__tabs-wrap {
		.cf-dashboard-layout__tabs-wrap-inner {
			display: none;
			min-height: 720px;
			&.cf-tab-active {
				display: block;
			}
			.wrap {
				margin: 0;
				h2 {
					padding: 0;
				}
			}
			.tablenav {
				height: auto;
				padding: 0;
				margin: 21px 0;
				display: table;
				width: 100%;
				@media screen and (max-width:700px) {
					margin: 20px 0;
				}

				.tablenav-pages {
					margin: 0;
					@media screen and (max-width:700px) {
						margin-top: 5px;
					}
				}
			}
			.cf-settings-panel__repeater {
				background-color: #fff;
				border: 1px solid #ECEAFF;
				margin: 20px 0;
				position: relative;
			}
			.cf-settings-panel__repeater-header {
				padding: 20px;
				border-bottom: 1px solid #ECEAFF;
				h3 {
					margin: 0;
					font-size: 16px;
					font-weight: 500;
					color: #000;
					@media screen and (max-width:767px) {
						font-size: 14px;
						line-height: 20px;
					}
					svg {
						margin: 0 2px 0px 10px;
					}
				}
			}
			.cf-settings-panel__repeater-body {
				padding: 20px;
				& > .cf-settings-panel__repeater-body {
					padding: 0;
				}
				.cf-external-link-icon {
					width: 12px;
				}
			}
			.cf-content-language-box {
				.cf-settings-panel__repeater-body {
					p {
						font-size: 14px;
						margin-top: 0;
						@media screen and (max-width:1280px){
							line-height:24px;
						}
					}
				}
			}
			p {
				color: #191E23;
			}
			.cf-cnt-pro-migration-header {
				display: none;
			}
			.cf-cnt-pro-migration {
				display: none;
			}
			.cf-need-help-panel {
				margin: 20px 0;
				padding: 25px 20px;
				position: relative;
				background-color: #fff;
				border: 1px solid #e2e4e7;

				&__inner {
					display: flex;
					align-items: center;
					gap: 30px;

					@include buttonStyle();

					&-btnwrap {
						display: flex;
						align-items: center;
						gap: 15px;
						margin-top: 15px;
					}

					.cf-plugin-button-link {
						font-size: 14px;
						line-height: 22px;
						color: #4b1bce;
						text-decoration: none;

						svg {
							fill: currentColor;
							position: relative;
							top: 2px;
						}
					}

					&-right,
					&-left {
						flex: 1;
					}

					&-right video,
					&-right .cf-need-help-panel__video-fallback img {
						border: 1px solid #e2e4e7;
					}

					.cf-need-help-panel__video-link {
						margin-top: 12px;
						text-align: center;
					}

					h2 {
						font-size: 30px;
						margin: 20px 0px 20px;
						color: #4b1bce;
					}

					p {
						line-height: 24px;
						margin-bottom: 0;
					}

					@media screen and (max-width:991px){
						flex-direction: column-reverse;
					}
					
				}
			}
			.cf-video-links {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				margin: 30px 0 0;
				.cf-link-wrap {
					margin: 10px 30px 10px 0;
				}
			}
		}
		.cf-dashboard-layout__tabs-list {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: start;
			-ms-flex-pack: start;
			justify-content: flex-start;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			margin: 0;
			background-color: #fff;
			padding: 0 5px;
			border: 1px solid #E2E4E7;
			border-top: none;
			li {
				margin: 0 14px;
				@media screen and (max-width:1280px){
					margin:0 15px;
				}
				@media screen and (max-width:780px) {
					margin: 0 10px;
				}
				@media screen and (max-width:390px) {
					margin: 0 5px;
				}
				&.cf-dashboard-need-help-tab {
					margin-left: auto;

					@media screen and (max-width:767px) {
						margin: 0 5px;
					}
	
					.cf-tab-item {
						color: #4b1bce;
					}
				}
			}
			.cf-tab-item {
				padding: 17px 0 14px 0;
				cursor: pointer;
				text-decoration: none;
				display: inline-block;
				color: #23282d;
				border-bottom: 2px solid transparent;
				font-size: 14px;
				font-weight: 500;
				line-height: 17px;
				@media screen and (max-width:390px) {
					padding: 15px 0;
					font-weight: 500;
					line-height: 17px;
					font-size: 12px;
				}
				&:focus {
					-webkit-box-shadow: none;
					box-shadow: none;
				}
			}
			.cf-tab-active {
				.cf-tab-item {
					border-bottom-color: #4a1bce;
					color: #000;
				}
			}
		}
		.cf-dashboard-layout__tabs-content {
			.cf-video-links {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				margin: 30px 0 0;
				.cf-link-wrap {
					margin: 10px 30px 10px 0;
				}
			}
		}
	}
	#migration-progress-bar {
		background-color: #f5f5f5;
		color: #fff;
		border-radius: 20px;
		span {
			background-color: #00a699;
			display: inline-block;
			padding: 5px 15px;
			border-radius: 20px;
			font-size: 12px;
			font-weight: 600;
			min-width: 130px;
			text-align: right;
			width: 100%;
			-webkit-transition: 4s width;
			-o-transition: 4s width;
			transition: 4s width;
			background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
			-webkit-background-size: 40px 40px;
			background-size: 40px 40px;
			&:before {
				content: attr(data-percentage);
			}
		}
		&.active {
			span {
				-webkit-animation: progress-bar-stripes 0.8s linear infinite;
				-o-animation: progress-bar-stripes 0.8s linear infinite;
				animation: progress-bar-stripes 0.8s linear infinite;
			}
		}
	}
	#migration-progress-info {
		padding: 10px 0;
		p {
			font-size: 16px;
			margin: 0 0 10px;
		}
	}
	.cf-feedback-post-wrap__list {
		.cf-external-link-icon {
			margin-left: 5px;
			width: 12px;
		}
	}
}