.box {
		font-size: 13px;
		position: relative;
		padding: 10px;
		color:#a0a7af;
		text-align: center;
    	margin-bottom: 10px;
	}
	.box.has-advanced-upload {
		border: dashed 1px #78828e;
		border-radius: 2px;
	}
	.box.is-dragover{
		outline-offset: -20px;
		outline-color: #c8dadf;
		background-color: #fff;
	}
		.box__dragndrop,
		.box__icon
		{
			display: none;
		}
		.box.has-advanced-upload .box__dragndrop
		{
			display: inline;
		}
		.box.has-advanced-upload .box__icon
		{
			width: 100%;
			height: 80px;
			fill: #92b0b3;
			display: block;
			margin-bottom: 40px;
		}

		.box.is-uploading .box__input,
		.box.is-success .box__input,
		.box.is-error .box__input
		{
			visibility: hidden;
		}

		.box__uploading,
		.box__success,
		.box__error
		{
			display: none;
		}
		.box.is-uploading .box__uploading,
		.box.is-success .box__success,
		.box.is-error .box__error
		{
			display: block;
			position: absolute;
			top: 50%;
			right: 0;
			left: 0;

			-webkit-transform: translateY( -50% );
			transform: translateY( -50% );
		}
		.box__uploading
		{
			font-style: italic;
		}
		.box__success
		{
			-webkit-animation: appear-from-inside .25s ease-in-out;
			animation: appear-from-inside .25s ease-in-out;
		}
			@-webkit-keyframes appear-from-inside
			{
				from	{ -webkit-transform: translateY( -50% ) scale( 0 ); }
				75%		{ -webkit-transform: translateY( -50% ) scale( 1.1 ); }
				to		{ -webkit-transform: translateY( -50% ) scale( 1 ); }
			}
			@keyframes appear-from-inside
			{
				from	{ transform: translateY( -50% ) scale( 0 ); }
				75%		{ transform: translateY( -50% ) scale( 1.1 ); }
				to		{ transform: translateY( -50% ) scale( 1 ); }
			}

		.box__restart
		{
			font-weight: 700;
		}
		.box__restart:focus,
		.box__restart:hover
		{
			color: #39bfd3;
		}

		.js .box__file, .box__input .box__file{
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			opacity: 0;
			overflow: hidden;
			position: absolute;
			z-index: 1;
			cursor: pointer;
		}
		.js .box__file + label
		{
			max-width: 80%;
			text-overflow: ellipsis;
			white-space: nowrap;
			cursor: pointer;
			display: inline-block;
			overflow: hidden;
		}
		    .js .box__file + label .upload_info {
		    	color: #858990;
				font-size: 10px;
			}
		.js .box__file + label:hover strong,
		.box__file:focus + label strong,
		.box__file.has-focus + label strong
		{
			color: #39bfd3;
		}
		.js .box__file:focus + label,
		.js .box__file.has-focus + label
		{
			outline: 1px dotted #000;
			outline: -webkit-focus-ring-color auto 5px;
		}
			.js .box__file + label *
			{
				/* pointer-events: none; */ /* in case of FastClick lib use */
			}

		.no-js .box__file + label
		{
			display: none;
		}

		.no-js .box__button
		{
			display: block;
		}
		.box__button
		{
			font-weight: 700;
			color: #e5edf1;
			background-color: #39bfd3;
			display: none;
			padding: 8px 16px;
			margin: 40px auto 0;
		}
			.box__button:hover,
			.box__button:focus
			{
				background-color: #0f3c4b;
			}





.grid .grid-item img {
	max-width: 80px;
	padding: 0;
}

/* ---- grid ---- */

.grid {
  	max-width: 100%;
  	max-height: 300px;
	overflow:hidden;
	padding-bottom: 100px;
}
.img_info_box {
	position: absolute;
	background-color: rgba(108, 118, 130, 0.94);
	width: 100%;
	display: none;
}
	.img_info_box .info_content a {
		color:#FFF;
	}
	.img_info_box .close_info_box {
		position: absolute;
    	top: 0;
		right: 5px;
		cursor: pointer;
	}
	.img_info_box .info_arrow {
		background: transparent none repeat scroll 0 0;
	    border: 6px solid transparent;
	    top: -12px;
	    position: absolute;
	    border-bottom-color: #6c7682;
	}
	.img_info_box .inner {
		padding: 10px;
		text-overflow: ellipsis;
	    white-space: nowrap;
	    overflow: hidden;
	    max-width: 85%;
	    color:#b2b9c1;
	    font-size: 10px;
    	font-weight: 700;
	}
	.img_info_box .remove_image {
		position: absolute;
	    top: 7px;
	    right: 8px;
	    background-color: #768088;
	    border-radius: 2px;
	    color: #dcdcdc;
	    padding: 5px;
	    line-height: 0;
	    cursor: pointer;
	}
	.img_info_box .remove_image:hover {
		background-color: #8d99a2;
	}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}
/* ---- grid-item ---- */

.grid-item {
  float: left;
  background: #6c7682;
  line-height: 0;
  margin-bottom: 10px;
  cursor: pointer;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  min-height: 30px;
  display: flex;
  align-items: center;
}

	.grid-item .info_btn {
		position:absolute;
		bottom:5px;
		right:5px;
		display: none;
	}
		.grid-item .info_btn svg {
			opacity:.9;
		}
	.grid-item:hover .info_btn, .grid-item .info_btn.visible {
		display:block;
		background: #404040;
		padding: 0 1px;
	}



.grid-item.is-loading {
  background-color: #6c7682;
  height: 80px;
  width: 80px;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/loading.gif');
}
.grid-item.is-loading img,
.grid-item.is-broken img {
  opacity: 0;
}