* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

.vi {
	position: relative;
	display: inline-block;
	text-transform: uppercase
}

.vi.vi-file {
	background: -o-radial-gradient(top left, circle, var(--iconColor), var(--iconColorOp));
	background: radial-gradient(circle at top left, var(--iconColor), var(--iconColorOp));
	border-radius: 2px;
	width: 35px;
	height: 50px
}

.vi.vi-file::before {
	content: '';
	position: absolute;
	border-width: 6px;
	border-style: solid;
	border-bottom-left-radius: 2px;
	border-color: #fff #fff var(--iconColorOp2) var(--iconColorOp2);
	top: 0;
	right: 0
}

.vi.vi-file::after {
	position: absolute;
	content: attr(data-type);
	font-size: 10px;
	color: #fff;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.vi.vi-file.vi-sm.vi-file {
	width: 28px;
	height: 40px;
	border-radius: 2px;
}

.vi.vi-file.vi-sm::before {
	border-width: 4px;
	border-bottom-left-radius: 2px
}

.vi.vi-file.vi-sm::after {
	font-size: 8px
}

.vi.vi-file.vi-lg.vi-file {
	width: 49px;
	height: 70px;
	border-radius: 3px
}

.vi.vi-file.vi-lg::before {
	border-width: 8px;
	border-bottom-left-radius: 3px
}

.vi.vi-file.vi-lg::after {
	font-size: 14px
}

.vi.vi-file.vi-2x.vi-file {
	width: 70px;
	height: 100px;
	border-radius: 4px;
}

.vi.vi-file.vi-2x::before {
	border-width: 12px;
	border-bottom-left-radius: 4px
}

.vi.vi-file.vi-2x::after {
	font-size: 18px
}

.vi.vi-file.vi-3x.vi-file {
	width: 105px;
	height: 150px;
	border-radius: 6px
}

.vi.vi-file.vi-3x::before {
	border-width: 18px;
	border-bottom-left-radius: 6px
}

.vi.vi-file.vi-3x::after {
	font-size: 22px
}

.vi.vi-file.vi-4x.vi-file {
	width: 140px;
	height: 200px;
	border-radius: 8px
}

.vi.vi-file.vi-4x::before {
	border-width: 24px;
	border-bottom-left-radius: 8px
}

.vi.vi-file.vi-4x::after {
	font-size: 26px
}

.vi.vi-file.vi-5x.vi-file {
	width: 175px;
	height: 250px;
	border-radius: 10px
}

.vi.vi-file.vi-5x::before {
	border-width: 30px;
	border-bottom-left-radius: 10px
}

.vi.vi-file.vi-5x::after {
	font-size: 30px
}

.vi.vi-folder {
	width: 50px;
	height: 40px;
	margin-top: 4px;
	border-radius: 3%;
	background-color: var(--iconColor)
}

.vi.vi-folder .file {
	position: absolute;
	width: 90%;
	height: 90%;
	background: #fff;
	-webkit-transform: skew(5deg);
	-ms-transform: skew(5deg);
	transform: skew(5deg);
	top: 10%;
	left: 5%
}

.vi.vi-folder::before {
	content: '';
	position: absolute;
	width: 40%;
	border-bottom-width: 10px;
	border-bottom-style: solid;
	border-bottom-color: var(--iconColor);
	border-right: .15em solid transparent;
	top: -5%;
	left: 10%
}

.vi.vi-folder::after {
	content: '';
	width: 100%;
	height: 100%;
	border-radius: 4%;
	-webkit-box-shadow: 0 0 .02em 0 rgba(0, 0, 0, .2);
	box-shadow: 0 0 .02em 0 rgba(0, 0, 0, .2);
	background: -o-radial-gradient(top left, circle, var(--iconColorOp) 80%, var(--folderColor) 81%);
	background: radial-gradient(circle at top left, var(--iconColorOp) 80%, var(--folderColor) 81%);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2
}

.vi.vi-folder:not(:empty) {
	margin-left: 5px
}

.vi.vi-folder:not(:empty)::after {
	-webkit-transform: skew(10deg) scaleY(.8);
	-ms-transform: skew(10deg) scaleY(.8);
	transform: skew(10deg) scaleY(.8);
	top: 10.4%;
	left: -5.4%
}

.vi.vi-folder.vi-sm {
	margin-top: 2px;
	width: 40px;
	height: 32px
}

.vi.vi-folder.vi-sm:not(:empty) {
	margin-left: 4px
}

.vi.vi-folder.vi-lg {
	width: 70px;
	height: 56px
}

.vi.vi-folder.vi-lg:not(:empty) {
	margin-left: 7px
}

.vi.vi-folder.vi-2x {
	width: 100px;
	height: 80px
}

.vi.vi-folder.vi-2x:not(:empty) {
	margin-left: 11px
}

.vi.vi-folder.vi-3x {
	margin-top: 7px;
	width: 150px;
	height: 120px
}

.vi.vi-folder.vi-3x:not(:empty) {
	margin-left: 17px
}

.vi.vi-folder.vi-3x::before {
	border-bottom-width: 15px;
	border-right: .2em solid transparent
}

.vi.vi-folder.vi-4x {
	margin-top: 10px;
	width: 200px;
	height: 160px
}

.vi.vi-folder.vi-4x:not(:empty) {
	margin-left: 22px
}

.vi.vi-folder.vi-4x::before {
	border-bottom-width: 20px;
	border-right: .28em solid transparent
}

.vi.vi-folder.vi-5x {
	margin-top: 12px;
	width: 250px;
	height: 200px
}

.vi.vi-folder.vi-5x:not(:empty) {
	margin-left: 26px
}

.vi.vi-folder.vi-5x::before {
	border-bottom-width: 25px;
	border-right: .36em solid transparent
}