.cx-vui-component.cx-vui-component--check-group {
	padding: 0;
	display: block;
	.cx-vui-checkgroup {
		max-width: 780px;
		column-width: 250px;
		font-size: 15px;
		line-height: 23px;
		.cx-vui-checkbox-wrap {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			.cx-vui-checkbox__label {
				text-overflow: ellipsis;
			}
		}
	}
}

.cbw-pluigns,
.cbw-select-plugins,
.cbw-install-plugins {
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
	.cbw-block {
		flex: 1 1 auto;
		justify-content: flex-start;
	}
}

.cbw-plugins-group {
	padding: 35px 40px 35px 40px;
	position: relative;
	border: 1px solid $color__border-in-panel;
	margin: 0 0 20px;
	background: #fff;
	&:first-child {
		margin-top: 28px;
	}
	&__heading {
		font-size: 15px;
		line-height: 23px;
		position: relative;
		cursor: pointer;
		&:before {
			content: "";
			position: absolute;
			@include start(0);
			top: 4px;
			width: 14px;
			height: 14px;
			background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDcgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEuMzI5MTEgLTUuODA5NzRlLTA4TDcgNkwxLjMyOTExIDEyTC02LjE0NjkxZS0wOCAxMC41OTM4TDQuMzQxNzcgNkwtNi4xNDY5MmUtMDggMS40MDYyNUwxLjMyOTExIC01LjgwOTc0ZS0wOFoiIGZpbGw9IiM3QjdFODEiLz48L3N2Zz4=);
			background-repeat: no-repeat;
			background-position: center center;

			@include rtl_inverse();
		}
		&--active {
			&:before {
				transform: rotate( 90deg );
			}
		}

		&-desc {
			padding: 6px 0 0 0;
			font-size: 15px;
			line-height: 140%;
		}
		&-title {
			font-weight: 500;
			font-size: 18px;
			line-height: 140%;
			color: $color__heading;
			@include padding( 0, 0, 0, 20px );
		}
	}
	&__body {
		padding: 15px 0 0 0;
	}
}

.cbw-plugin {
	border: 1px solid $color__border-in-panel;
	border-radius: 4px;
	margin: 0 0 10px;
	background: #fff;
	&--expanded {
		background: $color__bg-canvas;
		border-color: $color__bg-canvas;
	}
	&--success {
		color: $color__success;
	}
	&--error {
		color: $color__error;
	}
	&__heading {
		padding: 12px 15px;
		position: relative;
		display: flex;
		align-items: center;
		cursor: pointer;
		&-icon {
			font-size: 0;
			line-height: 0;
			@include margin(-1px, 10px, 0, 0);
			.spin-icon {
				animation: spin 1200ms infinite linear;
			}
		}
		&-label {
			font-weight: 500;
			font-size: 15px;
			line-height: 23px;
			color: $color__heading;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex: 1 1 auto;
			.cbw-plugin--success & {
				color: $color__success;
			}
			.cbw-plugin--error & {
				color: $color__error;
			}
			.cbw-plugin--expanded & {
				svg {
					transform: scale( 1, -1 );
				}
			}
		}
	}
	&__log {
		font-size: 15px;
		line-height: 23px;
		@include padding(5px, 30px, 22px, 41px);
		overflow: hidden;
		text-overflow: ellipsis;
		ul {
			li {
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

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

.cx-vui-panel {
	&.plugins-page:not(.install-step) {
		background-image: url( '../img/plugins-cover.png' );
	}
}