@import url("https://fonts.googleapis.com/css?family=Nunito:400,600,700&display=swap");
	* {
	box-sizing:border-box;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
body {
	background-image:url(http://bz.6qmn.com/);
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-size:cover;
	font-family:'Nunito',sans-serif;
	color:#4f555f;
	display:flex;
	flex-direction:column;
	padding:20px;
	height:100vh;
	overflow:hidden;
}
.droppable {
	opacity:0.7;
	max-width:400px;
	width:100%;
	height:360px;
	background-color:#fff;
	margin:auto;
	display:flex;
	flex-wrap:wrap;
	position:relative;
	border-radius:12px;
	align-content:flex-start;
	overflow:hidden;
	box-shadow:0 10px 20px rgba(0,0,0,0.1);
	transition:.3s;
}
.droppable.is-dragging .list > * {
	pointer-events:none;
}
.list {
	overflow:auto;
	width:100%;
	height:100%;
	padding:10px 0;
	scroll-behavior:smooth;
}
.droppable.is-over {
	box-shadow:0px 10px 26px rgba(30,24,37,0.33),0 0 0px 15px rgba(53,40,66,0.07);
}
.item {
	padding:10px 20px;
	width:100%;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	overflow:hidden;
}
.item > * {
	opacity:0;
}
.item-img {
	width:60px;
	height:48px;
	border-radius:4px;
	overflow:hidden;
}
.loaded-image {
	position:absolute;
	top:0;
	-webkit-transform-origin:center;
	transform-origin:center;
	left:0;
	opacity:0;
	width:60px;
	height:48px;
	border-radius:4px;
	overflow:hidden;
	background-image:linear-gradient(120deg,#e0c3fc 0%,#8ec5fc 100%);
}
.loaded-image > img {
	opacity:0;
	-webkit-filter:blur(10px);
	filter:blur(10px);
}
.loaded-image > span {
	position:absolute;
	left:50%;
	opacity:0;
	width:32px;
	height:32px;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	-webkit-transform-origin:center;
	transform-origin:center;
	top:50%;
}
.loaded-image svg {
	width:32px;
	height:32px;
}
img {
	-o-object-fit:cover;
	object-fit:cover;
	-o-object-position:center;
	object-position:center;
	width:100%;
	height:100%;
}
img:before {
	position:absolute;
	content:"";
	height:100%;
	width:100%;
	background-image:linear-gradient(120deg,#e0c3fc 0%,#8ec5fc 100%);
}
.item-details {
	flex:1;
	padding-left:16px;
	overflow:hidden;
	padding-right:32px;
}
.item-name {
	font-size:15px;
	margin-bottom:4px;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
	font-weight:600;
}
.item-size {
	font-size:11px;
	letter-spacing:1px;
	color:#9699b3;
}
.item-delete {
	border:0;
	background-color:transparent;
	width:18px;
	height:18px;
	padding:0;
	margin-right:6px;
	color:transparent;
	white-space:nowrap;
	outline:0;
	cursor:pointer;
	position:relative;
}
.item-delete:before {
	content:"";
	position:absolute;
	left:0;
	transition:.3s;
	top:0;
	z-index:1;
	width:100%;
	height:100%;
	background-size:cover;
	background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg fill='%23bac1cb' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 438.5 438.5'%3e%3cpath d='M417.7 75.7A8.9 8.9 0 00411 73H323l-20-47.7c-2.8-7-8-13-15.4-18S272.5 0 264.9 0h-91.3C166 0 158.5 2.5 151 7.4c-7.4 5-12.5 11-15.4 18l-20 47.7H27.4a9 9 0 00-6.6 2.6 9 9 0 00-2.5 6.5v18.3c0 2.7.8 4.8 2.5 6.6a8.9 8.9 0 006.6 2.5h27.4v271.8c0 15.8 4.5 29.3 13.4 40.4a40.2 40.2 0 0032.3 16.7H338c12.6 0 23.4-5.7 32.3-17.2a64.8 64.8 0 0013.4-41V109.6h27.4c2.7 0 4.9-.8 6.6-2.5a8.9 8.9 0 002.6-6.6V82.2a9 9 0 00-2.6-6.5zm-248.4-36a8 8 0 014.9-3.2h90.5a8 8 0 014.8 3.2L283.2 73H155.3l14-33.4zm177.9 340.6a32.4 32.4 0 01-6.2 19.3c-1.4 1.6-2.4 2.4-3 2.4H100.5c-.6 0-1.6-.8-3-2.4a32.5 32.5 0 01-6.1-19.3V109.6h255.8v270.7z'/%3e%3cpath d='M137 347.2h18.3c2.7 0 4.9-.9 6.6-2.6a9 9 0 002.5-6.6V173.6a9 9 0 00-2.5-6.6 8.9 8.9 0 00-6.6-2.6H137c-2.6 0-4.8.9-6.5 2.6a8.9 8.9 0 00-2.6 6.6V338c0 2.7.9 4.9 2.6 6.6a8.9 8.9 0 006.5 2.6zM210.1 347.2h18.3a8.9 8.9 0 009.1-9.1V173.5c0-2.7-.8-4.9-2.5-6.6a8.9 8.9 0 00-6.6-2.6h-18.3a8.9 8.9 0 00-9.1 9.1V338a8.9 8.9 0 009.1 9.1zM283.2 347.2h18.3c2.7 0 4.8-.9 6.6-2.6a8.9 8.9 0 002.5-6.6V173.6c0-2.7-.8-4.9-2.5-6.6a8.9 8.9 0 00-6.6-2.6h-18.3a9 9 0 00-6.6 2.6 8.9 8.9 0 00-2.5 6.6V338a9 9 0 002.5 6.6 9 9 0 006.6 2.6z'/%3e%3c/svg%3e");
}
.item-delete:after {
	content:"";
	position:absolute;
	opacity:0;
	left:50%;
	top:50%;
	width:100%;
	height:100%;
	-webkit-transform:translate(-50%,-50%) scale(0);
	transform:translate(-50%,-50%) scale(0);
	background-color:#f3dbff;
	border-radius:50%;
	transition:.3s;
}
.item-delete:hover:after {
	-webkit-transform:translate(-50%,-50%) scale(2.2);
	transform:translate(-50%,-50%) scale(2.2);
	opacity:1;
}
.item-delete:hover:before {
	background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg fill='%234f555f' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 438.5 438.5'%3e%3cpath d='M417.7 75.7A8.9 8.9 0 00411 73H323l-20-47.7c-2.8-7-8-13-15.4-18S272.5 0 264.9 0h-91.3C166 0 158.5 2.5 151 7.4c-7.4 5-12.5 11-15.4 18l-20 47.7H27.4a9 9 0 00-6.6 2.6 9 9 0 00-2.5 6.5v18.3c0 2.7.8 4.8 2.5 6.6a8.9 8.9 0 006.6 2.5h27.4v271.8c0 15.8 4.5 29.3 13.4 40.4a40.2 40.2 0 0032.3 16.7H338c12.6 0 23.4-5.7 32.3-17.2a64.8 64.8 0 0013.4-41V109.6h27.4c2.7 0 4.9-.8 6.6-2.5a8.9 8.9 0 002.6-6.6V82.2a9 9 0 00-2.6-6.5zm-248.4-36a8 8 0 014.9-3.2h90.5a8 8 0 014.8 3.2L283.2 73H155.3l14-33.4zm177.9 340.6a32.4 32.4 0 01-6.2 19.3c-1.4 1.6-2.4 2.4-3 2.4H100.5c-.6 0-1.6-.8-3-2.4a32.5 32.5 0 01-6.1-19.3V109.6h255.8v270.7z'/%3e%3cpath d='M137 347.2h18.3c2.7 0 4.9-.9 6.6-2.6a9 9 0 002.5-6.6V173.6a9 9 0 00-2.5-6.6 8.9 8.9 0 00-6.6-2.6H137c-2.6 0-4.8.9-6.5 2.6a8.9 8.9 0 00-2.6 6.6V338c0 2.7.9 4.9 2.6 6.6a8.9 8.9 0 006.5 2.6zM210.1 347.2h18.3a8.9 8.9 0 009.1-9.1V173.5c0-2.7-.8-4.9-2.5-6.6a8.9 8.9 0 00-6.6-2.6h-18.3a8.9 8.9 0 00-9.1 9.1V338a8.9 8.9 0 009.1 9.1zM283.2 347.2h18.3c2.7 0 4.8-.9 6.6-2.6a8.9 8.9 0 002.5-6.6V173.6c0-2.7-.8-4.9-2.5-6.6a8.9 8.9 0 00-6.6-2.6h-18.3a9 9 0 00-6.6 2.6 8.9 8.9 0 00-2.5 6.6V338a9 9 0 002.5 6.6 9 9 0 006.6 2.6z'/%3e%3c/svg%3e");
}
.item-url:before {
	background-image:url("url.png");
	background-size:100%;
	margin-left:10px;
}
.item-url:hover:before {
	background-image:url("url.png");
}
.item-url:after {
	margin-left:10px;
}
.droppable.is-over .item {
	opacity:0.5;
	transition:.3s;
}
.info {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	pointer-events:none;
	opacity:0;
	transition:.4s;
}
.list:empty + .info {
	opacity:1;
}
.info-item {
	position:absolute;
	left:0;
	top:0;
	height:100%;
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	padding:20px;
}
.info-svg {
	width:80px;
	margin-bottom:20px;
}
.info-text {
	font-size:20px;
	font-weight:600;
}