* {-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 }