.cx-vui-notices {
	z-index: 1000;
}

.jet-dashboard-page {
	font-family: Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
	margin: 25px 15px 0 15px;

	&__header {
		position: relative;
		padding: 40px;
		background: linear-gradient(90deg, #5B77E7 0%, #49B5D2 53.65%, #26E8A8 100%);
		border-radius: 6px 6px 0px 0px;

		.header-title {
			color: white;
			font-size: 18px;
			font-weight: normal;
			margin: 0;
		}

		.header-bg {
			position: absolute;
			top: 0;
			right: 0;
		}
	}

	&__content {
		position: relative;
		font-family: Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
	}

	&__footer {}

	p {
		font-size: 12px;
		color: #7b7e81;
		margin: 0 0 10px 0;
	}

	.dashicons {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cx-vui-subtitle {
		font-size: 24px;
		font-weight: 500;
		margin-bottom: 40px;
		padding-bottom: 16px;
		border-bottom: 1px solid #DCDCDD;
	}

	.cx-vui-button {
		background-color: transparent;

		&:hover {
			background-color: transparent;
		}

		.cx-vui-button__content {
			> span {
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}

			.button-icon {
				margin-right: 5px;
			}
		}

		&.cx-vui-button--style-accent {
			color: #007cba;
			box-shadow: inset 0px 0px 0px 1px #007cba;

			.cx-vui-button__loader {
				svg, path {
					fill: #007cba;
				}
			}

			.button-icon, path {
				fill: #007cba;
			}
		}

		&.cx-vui-button--style-danger {
			color: #D6336C;
			box-shadow: inset 0px 0px 0px 1px #D6336C;

			.cx-vui-button__loader {
				svg, path {
					fill: #D6336C;
				}
			}

			.button-icon, path {
				fill: #D6336C;
			}
		}
	}

	.cx-vui-alert {
		width: 100%;
		box-sizing: border-box;
		padding: 10px 20px;
		margin-top: 20px;
		background-color: #F4F4F5;
		border-radius: 4px;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;

		.cx-vui-alert__icon {
			margin-top: 3px;
			margin-right: 10px;
		}

		.cx-vui-alert__message {
			flex: 1 1 auto;
			color: #7B7E81;
			font-size: 13px;
		}

		&.info-type {
			background-color: #EDF6FA;

			.cx-vui-alert__icon {
				svg {
					fill: #007CBA;
				}
			}

			.cx-vui-alert__message {
				color: #007CBA;
			}
		}

		&.success-type {
			background-color: #E9F6EA;

			.cx-vui-alert__icon {
				svg {
					fill: #46B450;
				}
			}

			.cx-vui-alert__message {
				color: #46B450;
			}
		}

		&.error-type {
			background-color: #FBF0F0;

			.cx-vui-alert__icon {
				svg {
					fill: #C92C2C;
				}
			}

			.cx-vui-alert__message {
				color: #C92C2C;
			}
		}
	}

	.cx-vui-popup {
		.cx-vui-popup__header {
			text-align: center;
			margin-bottom: 30px;
		}

		.cx-vui-popup__header-label {
			font-weight: 500;
			font-size: 24px;
			line-height: 36px;
			text-align: center;
			color: #23282D;
		}

		.cx-vui-popup__content {

		}

		&.license-manager-popup {

			.cx-vui-popup__body {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: stretch;
				overflow: hidden;
				max-height: calc( 100% - 100px );
			}

			.cx-vui-popup__header {
				padding-bottom: 15px;
				border-bottom: 1px solid #DCDCDD;

				.cx-vui-popup__header-inner {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}

			.cx-vui-popup__content {
				flex: 1 1 auto;
				overflow-y: auto;

				.license-manager {
					width: 100%;
					max-width: 1260px;

				}
			}
		}

		&.license-activation-popup {

			.cx-vui-popup__header {
				text-align: center;
			}

			.cx-vui-popup__body {

			}

			.popup-licence-control {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				flex-wrap: wrap;
				margin-top: 10px;

				p {
					width: 100%;
				}

				.popup-licence__key {
					flex: 1 1 auto;

					input {
						border-radius: 4px 0 0 4px;
					}
				}

				.popup-licence__action-button {
					border-radius: 0 4px 4px 0;
					box-shadow: none;
				}
			}
		}

		&.license-deactivation-popup {
			.cx-vui-popup__content {
				text-align: center;

				.show-license-manager {
					margin-top: 20px;
				}
			}
		}

		&.update-check-popup {

			.cx-vui-popup__content {
				text-align: center;

				svg {
					margin-bottom: 20px;
				}

				p {
					text-align: center;
					line-height: 30px;

					span {
						font-size: 20px;
						color: #23282d;
						display: block;
					}
				}

				.cx-vui-button {
					margin-top: 20px;
				}
			}
		}
	}
}

.jet-dashboard-license-page {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;

	.ready-for-use-plugins {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		padding: 40px;
	}

	.avaliable-plugins {
		margin-top: 50px;
	}

	.license-manager-button {
		align-self: flex-end;
	}

	.plugin-list--more-plugins {
		display: flex;
		justify-content: flex-start;
		align-items: stretch;
		flex-wrap: wrap;

		.plugin-item {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: stretch;
			flex-wrap: wrap;
			width: 19%;
			min-width: 200px;
			margin-right: 1%;
			margin-bottom: 30px;

			&__inner {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: stretch;

				.plugin-tumbnail {
					flex: 1 1 100%;

					img {
						width: auto;
						max-width: 100%;
					}
				}
			}
		}
	}

	.plugin-list {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;

		.plugin-item {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: stretch;
			width: 30%;
			min-width: 400px;
			margin-right: 2%;
			margin-bottom: 40px;

			&__inner {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
			}

			&.is-installed {}

			&.is-activated {}

			&.update-avaliable {
				.plugin-version {
					background-color: #D6336C;
				}
			}

			&--more {

				.plugin-item__inner {
					flex-direction: column;
					align-items: stretch;

					.plugin-tumbnail {
						margin: 0;

						img {
							width: auto;
						}
					}
				}
			}
		}

		.plugin-tumbnail {
			position: relative;
			margin-right: 20px;

			img {
				width: 100px;
			}
		}

		.plugin-info {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			flex: 1 1 auto;
		}

		.plugin-name {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 15px;
			color: #23282d;
			font-weight: 500;
		}

		.plugin-desc {
			margin: 10px 0 0 0;
		}

		.plugin-version {
			font-size: 12px;
			padding: 2px 6px;
			border-radius: 3px;
			background-color: #46B450;
			color: white;
			margin-left: 10px;
		}

		.plugin-actions {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 20px;

			.cx-vui-button {
				font-size: 13px;
				margin-left: 20px;

				&:first-child {
					margin-left: 0;
				}

			}

			.show-license-control {
				color: #46B450;
			}

			.deactivate-plugin-button {
				color: #D6336C;
			}
		}

		.plugin-update-label {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 10px;
			color: #7B7E81;
			font-size: 13px;

			.latest-version {
				color: #007DBA;
				font-weight: 500;
				margin: 0 3px;
			}

			.cx-vui-button {
				font-size: 13px;
				margin-left: 3px;
			}
		}
	}

	.add-new-license {
		display: flex;

		.cx-vui-button__content {
			> span {
				display: flex;
			}
			.dashicons {
				font-size: 16px;
			}
		}
	}

	.license-manager {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;

		.license-list {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: stretch;
			flex-wrap: wrap;

			.license-item {
				margin: 10px;
			}
		}
	}

	.license-item {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		width: 400px;

		&__label {
			font-weight: 500;
			font-size: 24px;
			line-height: 36px;
			text-align: center;
			color: #23282D;
			margin-bottom: 40px;
		}

		&__control {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: stretch;

			.license-item__activation-message {
				text-align: center;
				margin-bottom: 30px;
			}

			.license-item__key {
			}

			.license-item__action-button {
				margin-top: 10px;
			}
		}

		&__details {
			flex-direction: 1 1 auto;
		}

		&__deactivation {
			align-self: flex-start;
		}

		&.license-activated {
			.license-status {
				color: #46B450;
			}

			.license-item__deactivation {
				color: #D6336C;
				box-shadow: inset 0px 0px 0px 1px #D6336C;
			}
		}
	}

	.license-details {
		margin: 30px 0;

		&__label {
			color: #23282D;
			font-size: 15px;
			font-weight: 700;
			margin-bottom: 20px;
		}

		&__fields {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: stretch;
		}

		&__field {
			display: flex;
			justify-content: flex-start;
			align-items: stretch;
			margin-bottom: 10px;

			&:last-child {
				margin-bottom: 0;
			}

			.label {
				min-width: 120px;
				font-weight: 700;
				white-space: nowrap;
				color: #23282D;
			}

			.status-label {
				text-transform: capitalize;
				color: #46B450;
			}

			.license-type {
				display: flex;
				justify-content: center;
				align-items: center;

				svg {
					width: 110px;
					height: auto;
				}
			}

			.included-plugin-list {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				flex-wrap: wrap;
				flex: 1 1 auto;

				.included-plugin {
					width: 50%;
					margin-bottom: 10px;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					svg {
						margin-right: 5px;
					}
				}
			}

			&.license-status {
				color: #C92C2C;
				font-weight: 700;
				text-transform: capitalize;
			}

			&.license-type {
				text-transform: capitalize;
			}

			&.license-plugins {
				flex: 1 1 auto;
			}
		}

		&__actions {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20px;

			.show-license-manager {
				font-size: 13px;
			}

			.cx-vui-button {
				margin-left: 5px;

				&:first-child {
					margin-left: 0;
				}
			}
		}
	}
}

.popup-enter {
	opacity: 0;

	.cx-vui-popup__body {
		transform: translateY(10px);
	}
}
.popup-enter-active {
	transition: opacity .3s;

	.cx-vui-popup__body {
		transition: transform .3s;
	}
}
.popup-enter-to {
	opacity: 1;
	transform: translateY(0);

	.cx-vui-popup__body {
		transform: translateY(0px);
	}
}
.popup-leave {
	opacity: 1;
}
.popup-leave-leave {
	transition: opacity .1s;
}
.popup-leave-to {
	opacity: 0;
}
