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

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

	.more-plugins {
		margin-top: 20px;
	}

	.add-new-license {
		display: flex;

		.cx-vui-button__content {
			> span {
				display: flex;
			}
			.dashicons {
				font-size: 16px;
				@include margin(0, 4px, 0, -5px);
			}
		}
	}

	.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 {}

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

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

			.license-item__deactivation {
				color: #D6336C;
				box-shadow: inset 0 0 0 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: 110px;
				font-weight: 700;

				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 {
						@include margin-end(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 {
				@include margin-start(5px);

				&:first-child {
					@include margin-start(0);
				}
			}
		}
	}
}