.wil-library {
	position: fixed;
	background-color: #f1f1f1;
	width: 100%;
	height: 100%;
	top: 32px;
	left: 9px;
	visibility: hidden;
	transform: translateX(100%);
	transition: all 0.3s ease;
	z-index: 999999;
	
	* {
		box-sizing: border-box;
	}

	.dashicons {
		width: auto;
		height: auto;
		font-size: inherit;
	}

	.tb-cell {
		display: table-cell;
		vertical-align: middle;
		width: 100%;
		height: 100%;
	}

	&.active {
		transition-duration: 1s;
		transform: translateX(0);
		opacity: 1;
		visibility: visible;
	}
}

.wil-library__header {
	background-color: #212121;
	padding:30px 30px;
	position: relative;

	h2 {
		color: #fff;
		font-weight: 700;
		font-size: 30px;
		margin: 0;
	}
}

.wil-library__close {
	position: absolute;
	top: 50%;
	right: 30px;
	color: #fff;
	font-size: 30px;
	cursor: pointer;
	transform: translateY(-50%);
}

.wil-library__nav {
	padding: 16px 30px 10px 30px;
	margin: 0;
	background-color: #fff;
    box-shadow: 0 0 5px #b9b9b9;
    position: relative;

    li {
    	list-style: none;
		display: inline-block;
		margin-right: 10px;

    	a {
    		display: block;
    		text-decoration: none;
    		border: 1px solid #ddd;
    		border-radius: 3px;
    		padding: 3px 15px;
    		color: #444;
    		transition: all 0.3s ease;

			&:focus, &:active {
				outline-width: 0;
				box-shadow: none;
			}

    		&:hover {
    			color: #0073aa;
    			border-color: #0073aa;
    		}
    	}

    	&.active {
    		a {
    			color: #fff;
    			background-color: #0073aa;
    			border-color: #0073aa;
    		}
    	}
    }
}

.wil-library__content {
	overflow: hidden;
	position: relative;
	height: calc(100% - 135px);
}

.wil-library__panel {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	visibility: hidden;
	overflow-y: auto;
	overflow-x: hidden;
	transition: all 0.3s ease;

	&.active {
		opacity: 1;
		visibility: visible;
	}
}

.wil-library__list {
	padding: 30px 0 0 30px;
	margin: 0;
	overflow: hidden;

	li {
		float: left;
		margin-bottom: 30px;
		margin-right: 30px;
		width: 282.6px;
		list-style: none;
	}
}

.wil-library-item {
	background-color: #fff;
	box-shadow: 0 0 10px rgba(#b9b9b9, 0.3);
	transition: all 0.3s ease;

	&:hover {

		.wil-library__thumb {

			.wil-library__actions, &:before {
				opacity: 1;
				visibility: visible;
			}
		}
	}

	&.active {
		box-shadow: none;
		background-color: transparent;

		.wil-library__thumb, .wil-library__entry {
			opacity: 0;
			visibility: hidden;
		}
	}
}

.wil-library__thumb {
	position: relative;
	height: 170px;
	overflow: hidden;
	transition: all 0.3s ease;

	img {
		width: 100%;
	}

	.wil-library__actions, &:before {
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
	}

	&:before {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		content: '';
		z-index: 0;
		background-color: rgba(#212121, 0.5);
		
	}
}

.wil-library__entry {
	transition: all 0.3s ease;
}

.wil-library__actions {
	position: absolute;
	text-align: center;
	width: 100%;
	display: table;
	top: 0;
	left: 0;
	height: 100%;
	padding: 30px;
	z-index: 1;

	a {
		text-decoration: none;
		font-size: 18px;
		width: 40px;
		line-height: 38px;
		display: inline-block;
		border-radius: 50%;
		border: 1px solid #fff;
		color: #fff;
		margin: 0 5px;
		transition: all 0.3s ease;

		i {
			vertical-align: middle;
			position: relative;
			top: -2px;
		}

		&:hover { 
			background-color: #fff;
			color: #03a9f5;
		}
	}
}

.wil-library__meta {
	overflow: hidden;
	padding: 5px 7px;
	border-bottom: 1px solid #f1f1f1;

	span {
		font-size: 10px;
		text-transform: uppercase;

		a {
			color: inherit;
			text-decoration: none;
		}
	}

	.wil-library__install,
	.wil-library__noinstall {
		float: right;

		a {
			border-radius: 2px;
			color: #fff;
			padding: 1px 10px;
			background-color: #0073aa;
			display: block;
		}

		i {
			vertical-align: middle;
		}
	}

	.wil-library__noinstall {
		a {
			background-color: #ccc;
			pointer-events: none;
		}
	}

	.wil-library__free,
	.wil-library__premium {
		color: #fff;
		padding: 1px 10px;
		background-color: #03a9f5;
	}

	.wil-library__premium {
		background-color: #393056;
	}
}

.wil-library__name {
	margin: 0;
	padding: 10px 15px;
}

.wil-library__options {
	position: fixed;
	width: 350px;
	background-color: #fff;
    box-shadow: 0 0 10px #b9b9b9;
	left: 0;
	right: 0;
	top: 30%;
	margin: auto;
	z-index: 10;
	border-radius: 5px;
	padding: 10px 20px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-70%);
	transition: all 0.3s ease;

	&.active {
		transform: translateY(-50%);
		opacity: 1;
		visibility: visible;
	}
}

#wiloke-demo-importer {
	left: auto;
	right: 0;
	top: 20px;
	width: auto;
	z-index: 10;
	margin-right: 20px;
	position: relative;

	.wil-library__content,
	.wil-library__panel {
		height: auto;
		min-height: 100%;
		position: relative;
	}

	.wil-library__list li {
		width: 300px;
	}

	.wil-library-item {
		border-radius: 3px;
	}

	.wil-library__thumb {
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		height: 250px;
	}

	.wil-library__name {
		font-size: 1.2em;
		padding: 15px 20px;
		border-top: 1px solid #f1f1f1;
	}
}

.redux-notice, .woocommerce-message{
	display: none !important;
}

.as3cf-notice {
	display: none;
}