html, body {
	margin: 0;
	padding: 0;
	background: #e6e6e6;
}

a, p {
	font-family: 'Play', sans-serif;
	margin: 0px;
	padding: 0px;
	color: #676767;
}

.wrapper {
    display: flex;
	flex-direction: column;
	width: 550px;
	min-height: calc(100vh - 50px);
	margin: 25px auto;
}

.preloader {
	display: none;
}

.reciever {
	margin: 5px 0;
	border: dashed 4px #676767;
	background: #e6e6e6;
	border-radius: 4px;
	text-align: center;
	cursor: pointer;
	transition: background, box-shadow;
	transition-duration: 200ms;
}

.reciever:hover .reciever__message {
	text-decoration: underline;
}

.reciever--dragging {
	background: #f0f0f0;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}

.reciever * {
	pointer-events: none;
}

.reciever__icon {
	display: inline-block;
	width: 64px;
	height: 64px;
	margin: 10px 0 0;
	fill: #676767;
}

.reciever__message {
	font-size: 18pt;
	padding: 7px 0;
}

.reciever__limit {
	font-size: 12pt;
	margin: 0 0 20px;
}

.cards {
	display: flex;
	flex-direction: column;
	margin: 10px 0;
}

.card {
	display: flex;
	padding: 20px 0px;
}

.card:not(:last-child) {
	border-bottom: 2px groove #ffffff;
}

.card__badge {
	flex: 1;
	text-align: center;
}

.card__badge-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto;
	fill: #676767;
}

.card__body {
	flex: 4;
	margin-right: 18px;
}

.card__title {
	display: flex;
	font-size: 18px;
    margin: 0px 0px 20px;
}

.card__file-name,
.card__file-size {
	white-space: nowrap;
}

.card__file-size {
	margin-left: auto;
}

.card__btn-stop {
    margin: 0 0 0 10px;
}

.card__footer {
	display: flex;
}

.card__progress-bar {
	width: 100%;
	height: 12px;
	margin: 7px 0 0;
	border-radius: 6px;
	overflow: hidden;
	background: #676767;
	box-shadow: inset 0px -6px 6px -6px #e6e6e6;
}

.card__progress-bar-inner {
	width: 0%;
	height: 100%;
	border-radius: 6px;
	background-color: #188aff;
	background-size: 30px 30px;
	background-image: linear-gradient(
		135deg,
		rgba(255, 255, 255, .15) 25%,
		transparent 25%, transparent 50%,
		rgba(255, 255, 255, .15) 50%,
		rgba(255, 255, 255, .15) 75%,
		transparent 75%, transparent
	);
	animation: progress-sliding 3s infinite linear;
	transition: width 300ms;
}

.card__progress-bar-inner--idle {
	width: 100%;
	background-color: #676767;
	transition: none;
}

.card__status {
	margin: 0 8px;
    line-height: 16px;
}

.card__status-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	fill: #1bc14e;
}

.card__status-icon--error {
	fill: #ea2121;
}

.card__btn-link {
	margin: 0 10px 0 auto;
}

.card__btn-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	fill: #676767;
}

.footer {
	margin-top: auto;
}

.footer .copyright {
	text-align: center;
	font-size: 12pt;
	margin-top: 2em;
}

@keyframes progress-sliding {
	0% {background-position: 0 0;}
	100% {background-position: 60px 0;}
}