Template in EJ2 JavaScript Uploader control
15 May 202324 minutes to read
You can customize the default appearance of uploader using a template along with buttons.
File list template
The template property is used to customize the default appearance of each file in the list. It can be represented as the HTML element or string. The selected or dropped files are displayed as per the template layout provided. The remove and progress bar action is handled using the corresponding events when the template is defined.
For example, you can display file type icon along with default UI elements.
ej.base.enableRipple(true);
var dropElement = document.querySelector('.control_wrapper');
var filesDetails = [];
var filesList = [];
var uploadObj = new ej.inputs.Uploader({
asyncSettings: {
saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
}, dropArea: dropElement, selected: onFileSelect, progress: onFileUpload, success: onUploadSuccess,
failure: onUploadFailed, removing: onFileRemove,
});
uploadObj.appendTo('#fileupload');
document.getElementById('browse').onclick = function () {
document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();
return false;
};
document.getElementById('clearbtn').onclick = function () {
uploadObj.element.value = '';
ej.base.detach(document.getElementById('dropArea').querySelector('.upload-list-root'));
filesDetails = [];
filesList = [];
};
var parentElement;
var proxy;
var progressbarContainer;
function onFileSelect(args) {
if (ej.base.isNullOrUndefined(document.getElementById('dropArea').querySelector('.upload-list-root'))) {
parentElement = ej.base.createElement('div', { className: 'upload-list-root' });
parentElement.appendChild(ej.base.createElement('ul', { className: 'ul-element' }));
document.getElementById('dropArea').appendChild(parentElement);
}
for (var i = 0; i < args.filesData.length; i++) {
formSelectedData(args.filesData[i], this);
}
filesDetails = filesDetails.concat(args.filesData);
this.upload(args.filesData, true);
args.cancel = true;
}
function formSelectedData(selectedFiles, proxy) {
var liEle = ej.base.createElement('li', { className: 'file-lists', attrs: { 'data-file-name': selectedFiles.name } });
liEle.appendChild(ej.base.createElement('span', { className: 'file-name ', innerHTML: selectedFiles.name }));
liEle.appendChild(ej.base.createElement('span', { className: 'file-size ', innerHTML: proxy.bytesToSize(selectedFiles.size) }));
if (selectedFiles.statusCode === '1') {
progressbarContainer = ej.base.createElement('span', { className: 'progress-bar-container' });
progressbarContainer.appendChild(ej.base.createElement('progress', { className: 'progress', attrs: { value: '0', max: '100' } }));
liEle.appendChild(progressbarContainer);
}
else {
liEle.querySelector('.file-name').classList.add('upload-fails');
}
var closeIconContainer = ej.base.createElement('span', { className: 'e-icons close-icon-container' });
ej.base.EventHandler.add(closeIconContainer, 'click', removeFiles, proxy);
liEle.appendChild(closeIconContainer);
document.querySelector('.ul-element').appendChild(liEle);
filesList.push(liEle);
}
function onFileUpload(args) {
var li = document.getElementById('dropArea').querySelector('[data-file-name="' + args.file.name + '"]');
ej.base.EventHandler.remove(li.querySelector('.close-icon-container'), 'click', removeFiles);
var progressValue = Math.round((args.e.loaded / args.e.total) * 100);
if (!isNaN(progressValue)) {
li.getElementsByTagName('progress')[0].value = progressValue;
}
}
function onUploadSuccess(args) {
var li = document.getElementById('dropArea').querySelector('[data-file-name="' + args.file.name + '"]');
if (!ej.base.isNullOrUndefined(li.querySelector('.progress-bar-container'))) {
ej.base.detach(li.querySelector('.progress-bar-container'));
}
if (args.operation === 'upload') {
li.querySelector('.file-name').classList.add('upload-success');
li.querySelector('.close-icon-container').classList.add('delete-icon');
}
if (args.operation === 'remove') {
filesList.splice(this.fileList.indexOf(li), 1);
filesDetails.splice(this.fileList.indexOf(li), 1);
}
ej.base.EventHandler.add(li.querySelector('.close-icon-container'), 'click', removeFiles, this);
}
function onUploadFailed(args) {
var li = document.getElementById('dropArea').querySelector('[data-file-name="' + args.file.name + '"]');
ej.base.EventHandler.add(li.querySelector('.close-icon-container'), 'click', removeFiles, this);
li.querySelector('.file-name ').classList.add('upload-fails');
if (args.operation === 'upload') {
ej.base.detach(li.querySelector('.progress-bar-container'));
}
}
function removeFiles(args) {
if (!ej.base.isNullOrUndefined(args.currentTarget)) {
if (filesDetails[filesList.indexOf(args.currentTarget.parentElement)].statusCode === '2') {
this.remove(filesDetails[filesList.indexOf(args.currentTarget.parentElement)]);
filesDetails.splice(filesList.indexOf(args.currentTarget.parentElement), 1);
}
else {
onFileRemove(args);
}
}
}
function onFileRemove(args) {
if (!ej.base.isNullOrUndefined(args.currentTarget)) {
if (filesDetails[filesList.indexOf(args.currentTarget.parentElement)].statusCode !== '2') {
ej.base.detach(args.currentTarget.parentElement);
filesList.splice(filesList.indexOf(args.currentTarget.parentElement), 1);
}
}
}<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Uploader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential JS 2 Uploader Component">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="dropArea">
<span id="drop" class="droparea"> Drop files here or <a href="" id="browse"><u>Browse</u></a> </span>
<input type="file" id="fileupload">
</div>
<div style="margin-left: 50px; padding-top:25px;">
<button class="e-btn e-css" id="clearbtn">Clear All</button>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>#container {
visibility: hidden;
margin: 0 auto;
width: 400px;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.control_wrapper {
max-width: 500px;
margin: auto;
}
.e-upload {
width: 100%;
}
.e-file-select-wrap {
display: none;
}
.e-upload {
border: none;
margin-top: 15px;
}
#drop {
padding-left: 30%;
font-size: 14px;
font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif"
}
#dropArea {
min-height: 18px;
border: 1px dashed #c3c3cc;
padding: 15px 0;
margin: 0 auto;
width: 440px;
}
.wrapper{
padding: 0 10px;
}
.e-upload-success, .e-upload-failed {
display: none;
}
.sf-icon-bmp:before { content: "\e700"; }
.sf-icon-xlsx:before, .sf-icon-XLSX:before { content: "\e701"; }
.sf-icon-avi:before, .sf-icon-AVI:before { content: "\e702"; }
.sf-icon-doc:before, .sf-icon-DOC:before { content: "\e703"; }
.sf-icon-exe:before { content: "\e704"; }
.sf-icon-mp4:before { content: "\e705"; }
.sf-icon-zip:before, .sf-icon-ZIP:before { content: "\e706"; }
.sf-icon-tar:before { content: "\e707"; }
.sf-icon-docx:before { content: "\e708"; }
.sf-icon-jpg:before { content: "\e709"; }
.sf-icon-png:before { content: "\e70a"; }
.sf-icon-gif:before { content: "\e70b"; }
.sf-icon-pdf:before { content: "\e70c"; }
.sf-icon-txt:before { content: "\e70d"; }
.sf-icon-jpeg:before { content: "\e70e"; }
.sf-icon-xls:before { content: "\e70f"; }
.sf-icon-mp3:before { content: "\e710"; }
#dropArea .e-upload .e-upload-files .e-file-delete-btn,
#dropArea .e-upload .e-upload-files .e-file-remove-btn {
top: 35%;
}
span.file-icon{
width: 25px;
height: 25px;
display: inline-flex;
background-size: contain;
margin: 7px;
}
img.file-icon {
width: 20px;
height: 20px;
}
.file-name {
color: #e1e1e1;
font-size: 14px;
padding: 3px 10px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
width: 50%;
white-space: nowrap;
position: relative;
top: 5px;
}
.file-size {
font-size: 12px;
padding: 3px 10px;
overflow: hidden;
display: inline-block;
position: relative;
top: 6px;
}
.progressbar{
height: 5px;
width: 70%;
margin-left: 14px;
}
.upload-success{
background-color: green
}
.upload-failed{
background-color: red;
}
#dropArea .e-upload .e-upload-files .e-upload-file-list {
min-height: 63px;
}
#dropArea .e-upload {
border-width: 0 1px;
}
/* csslint ignore:start */
@font-face {
font-family: 'FileType_Font';
src:
url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="sf-icon-"], [class*=" sf-icon-"] {
font-family: 'FileType_Font' !important;
speak: none;
font-size: 35px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
top: 8px;
}
/* csslint ignore:end */Custom template
You can design the own template by preventing the default file list including buttons. The showFileList property used to display whether the default file list or own file list When you use custom template to upload or remove the files, pass the custom UI argument as true to call upload/remove public method as follows:
Refer to the following code sample.
ej.base.enableRipple(true);
var dropElement = document.querySelector('.control_wrapper');
var filesDetails = [];
var filesList = [];
var uploadObj = new ej.inputs.Uploader({
asyncSettings: {
saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
}, dropArea: dropElement, selected: onFileSelect, progress: onFileUpload, success: onUploadSuccess,
failure: onUploadFailed, removing: onFileRemove,
});
uploadObj.appendTo('#fileupload');
document.getElementById('browse').onclick = function () {
document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();
return false;
};
document.getElementById('clearbtn').onclick = function () {
uploadObj.element.value = '';
ej.base.detach(document.getElementById('dropArea').querySelector('.upload-list-root'));
filesDetails = [];
filesList = [];
};
var parentElement;
var proxy;
var progressbarContainer;
function onFileSelect(args) {
if (ej.base.isNullOrUndefined(document.getElementById('dropArea').querySelector('.upload-list-root'))) {
parentElement = ej.base.createElement('div', { className: 'upload-list-root' });
parentElement.appendChild(ej.base.createElement('ul', { className: 'ul-element' }));
document.getElementById('dropArea').appendChild(parentElement);
}
for (var i = 0; i < args.filesData.length; i++) {
formSelectedData(args.filesData[i], this);
}
filesDetails = filesDetails.concat(args.filesData);
this.upload(args.filesData, true);
args.cancel = true;
}
function formSelectedData(selectedFiles, proxy) {
var liEle = ej.base.createElement('li', { className: 'file-lists', attrs: { 'data-file-name': selectedFiles.name } });
liEle.appendChild(ej.base.createElement('span', { className: 'file-name ', innerHTML: selectedFiles.name }));
liEle.appendChild(ej.base.createElement('span', { className: 'file-size ', innerHTML: proxy.bytesToSize(selectedFiles.size) }));
if (selectedFiles.statusCode === '1') {
progressbarContainer = ej.base.createElement('span', { className: 'progress-bar-container' });
progressbarContainer.appendChild(ej.base.createElement('progress', { className: 'progress', attrs: { value: '0', max: '100' } }));
liEle.appendChild(progressbarContainer);
}
else {
liEle.querySelector('.file-name').classList.add('upload-fails');
}
var closeIconContainer = ej.base.createElement('span', { className: 'e-icons close-icon-container' });
ej.base.EventHandler.add(closeIconContainer, 'click', removeFiles, proxy);
liEle.appendChild(closeIconContainer);
document.querySelector('.ul-element').appendChild(liEle);
filesList.push(liEle);
}
function onFileUpload(args) {
var li = document.getElementById('dropArea').querySelector('[data-file-name="' + args.file.name + '"]');
ej.base.EventHandler.remove(li.querySelector('.close-icon-container'), 'click', removeFiles);
var progressValue = Math.round((args.e.loaded / args.e.total) * 100);
if (!isNaN(progressValue)) {
li.getElementsByTagName('progress')[0].value = progressValue;
}
}
function onUploadSuccess(args) {
var li = document.getElementById('dropArea').querySelector('[data-file-name="' + args.file.name + '"]');
if (!ej.base.isNullOrUndefined(li.querySelector('.progress-bar-container'))) {
ej.base.detach(li.querySelector('.progress-bar-container'));
}
if (args.operation === 'upload') {
li.querySelector('.file-name').classList.add('upload-success');
li.querySelector('.close-icon-container').classList.add('delete-icon');
}
if (args.operation === 'remove') {
filesList.splice(this.fileList.indexOf(li), 1);
filesDetails.splice(this.fileList.indexOf(li), 1);
}
ej.base.EventHandler.add(li.querySelector('.close-icon-container'), 'click', removeFiles, this);
}
function onUploadFailed(args) {
var li = document.getElementById('dropArea').querySelector('[data-file-name="' + args.file.name + '"]');
ej.base.EventHandler.add(li.querySelector('.close-icon-container'), 'click', removeFiles, this);
li.querySelector('.file-name ').classList.add('upload-fails');
if (args.operation === 'upload') {
ej.base.detach(li.querySelector('.progress-bar-container'));
}
}
function removeFiles(args) {
if (!ej.base.isNullOrUndefined(args.currentTarget)) {
if (filesDetails[filesList.indexOf(args.currentTarget.parentElement)].statusCode === '2') {
this.remove(filesDetails[filesList.indexOf(args.currentTarget.parentElement)]);
filesDetails.splice(filesList.indexOf(args.currentTarget.parentElement), 1);
}
else {
onFileRemove(args);
}
}
}
function onFileRemove(args) {
if (!ej.base.isNullOrUndefined(args.currentTarget)) {
if (filesDetails[filesList.indexOf(args.currentTarget.parentElement)].statusCode !== '2') {
ej.base.detach(args.currentTarget.parentElement);
filesList.splice(filesList.indexOf(args.currentTarget.parentElement), 1);
}
}
}<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Uploader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential JS 2 Uploader Component">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="dropArea">
<span id="drop" class="droparea"> Drop files here or <a href="" id="browse"><u>Browse</u></a> </span>
<input type="file" id="fileupload">
</div>
<div style="margin-left: 50px; padding-top:25px;">
<button class="e-btn e-css" id="clearbtn">Clear All</button>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>#container {
visibility: hidden;
margin: 0 auto;
width: 400px;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.control_wrapper {
max-width: 500px;
margin: auto;
}
.e-upload {
width: 100%;
}
.e-file-select-wrap {
display: none;
}
.e-upload {
border: none;
margin-top: 15px;
}
#drop {
padding-left: 30%;
font-size: 14px;
font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif"
}
#dropArea {
min-height: 18px;
border: 1px dashed #c3c3cc;
padding: 15px 0;
margin: 0 auto;
width: 440px;
}
.wrapper{
padding: 0 10px;
}
.e-upload-success, .e-upload-failed {
display: none;
}
.sf-icon-bmp:before { content: "\e700"; }
.sf-icon-xlsx:before, .sf-icon-XLSX:before { content: "\e701"; }
.sf-icon-avi:before, .sf-icon-AVI:before { content: "\e702"; }
.sf-icon-doc:before, .sf-icon-DOC:before { content: "\e703"; }
.sf-icon-exe:before { content: "\e704"; }
.sf-icon-mp4:before { content: "\e705"; }
.sf-icon-zip:before, .sf-icon-ZIP:before { content: "\e706"; }
.sf-icon-tar:before { content: "\e707"; }
.sf-icon-docx:before { content: "\e708"; }
.sf-icon-jpg:before { content: "\e709"; }
.sf-icon-png:before { content: "\e70a"; }
.sf-icon-gif:before { content: "\e70b"; }
.sf-icon-pdf:before { content: "\e70c"; }
.sf-icon-txt:before { content: "\e70d"; }
.sf-icon-jpeg:before { content: "\e70e"; }
.sf-icon-xls:before { content: "\e70f"; }
.sf-icon-mp3:before { content: "\e710"; }
#dropArea .e-upload .e-upload-files .e-file-delete-btn,
#dropArea .e-upload .e-upload-files .e-file-remove-btn {
top: 35%;
}
span.file-icon{
width: 25px;
height: 25px;
display: inline-flex;
background-size: contain;
margin: 7px;
}
img.file-icon {
width: 20px;
height: 20px;
}
.file-name {
color: #e1e1e1;
font-size: 14px;
padding: 3px 10px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
width: 50%;
white-space: nowrap;
position: relative;
top: 5px;
}
.file-size {
font-size: 12px;
padding: 3px 10px;
overflow: hidden;
display: inline-block;
position: relative;
top: 6px;
}
.progressbar{
height: 5px;
width: 70%;
margin-left: 14px;
}
.upload-success{
background-color: green
}
.upload-failed{
background-color: red;
}
#dropArea .e-upload .e-upload-files .e-upload-file-list {
min-height: 63px;
}
#dropArea .e-upload {
border-width: 0 1px;
}
/* csslint ignore:start */
@font-face {
font-family: 'FileType_Font';
src:
url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tSgIAAAEoAAAAVmNtYXDnYOfNAAAByAAAAFZnbHlmBIukdgAAAkgAAB78aGVhZA/Zy4MAAADQAAAANmhoZWEH1AQTAAAArAAAACRobXR4SAAAAAAAAYAAAABIbG9jYUgKP2YAAAIgAAAAJm1heHABKQFJAAABCAAAACBuYW1lPdPGuQAAIUQAAAJtcG9zdGQHrBsAACO0AAAAkAABAAAEAAAAAFwEAAAAAAADdwABAAAAAAAAAAAAAAAAAAAAEgABAAAAAQAAvWuGjl8PPPUACwQAAAAAANaiQ0kAAAAA1qJDSQAAAAADdwP0AAAACAACAAAAAAAAAAEAAAASAT0ADQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnEAQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABABCAAAABAAEAAEAAOcQ//8AAOcA//8AAAABAAQAAAABAAIAAwAEAAUABgAHAAgACQAKAAsADAANAA4ADwAQABEAAAAAAAABCgHaAswDrAQ4BNQFsAZiB8wIsAlKCsgMAAyEDbgOrg9+AAAACAAAAAADdwP0ABIAJQA4AFgAZwCRANIA3QAAATM/Bj0BLwYjJTM/Bj0BLwUrAQU7AT8GLwcjJRczHwsVDwsjFSM1Ixc3MxUjNTcHIycXFSM1IzMfChUPBh8HDwojNQMRFR8NMyEzPw01ESsBLwg9ASEjDw0FHwczJwEjJQcGBgUDAwICAgMEBgYHJwGOJwgHBgUEAwICAwQFBgcHKP5yIAgGBQUEAwEBAQEDAwUFBwggAbUHCA0GBgUFBAQDAwIBAQEBAgMDBAQFBQYMDy4hvTc2KiEDNxc4BCFmCAcNCwoDBAMCAgEBAgIDBAQGBgcGBgQEAwEBAQIBAwMDBAUKDA5MegICAwQFBQYHBwgICQkJCgIyCgkJCQgIBwcGBQUEAwIC+gYHBgsKCAcFAQH+qAoJCQkICAcHBgUFBAMCAgH0AQEDBAUFBgbb+gE/AQEDAwQFBgYHBgUEAwMBAQsBAQMDBQUHBwcGBgUEAwI0AgIDBAQFBgcFBQMDAgEBGgEDAwIEBAQEBQYFBgYHDQYFBgQFBAMDAwQCRryQkLw+U5GRUz68AQIEBgMEBAUFBQwGBgYFBQQEAwMDBQUGBgcIBwsFBQUEBAMFBAK8AbX81AoJCQkICAcHBgUFBAMCAgICAwQFBQYHBwgICQkJCgJSAQEFBwgKCwYHBvoCAgMEBQUGBwcICAkJCYcGBgUFBAICAfoAAAYAAAAAA3cD9AAZADMATQBZAGQApQAAATMfAx0BDwMjISMvAz0BPwMzJTMfAx0BDwMrAi8DPQE/AzM3Mx8DHQEPAysCLwM9AT8DMycXNzMHFyMnByM3JwEfBzMnBREVHw0zITM/DTURKwEvCD0BIQ8OAuoDAwUEAQEEBQMD/iwEAwQEAQEEBAMEAdQDAwUEAQEEBQMD2gQDBAQBAQQEAwTaAwMFBAEBBAUDA9oEAwQEAQEEBAME1SssJ0BCJy4tKENBAWoBAQMEBQUGBtv6/gwCAgMEBQUGBwcICAkJCQoCMgoJCQkICAcHBgUFBAMCAvoGBwYLCggHBQEB/qgKCQkJCAgHBwYFBQQDAgIBBgEEBQMDAwMFAwEBAwUDAwMDBQQBfQEEBQMDAwMFAwEBAwUDAwMDBQQBfQEEBQMDAwMFAwEBAwUDAwMDBQQBCUREXF9GRl9cARAGBgUFBAMBAfpe/NQKCQkJCAgHBwYFBQQDAgICAgMEBQUGBwcICAkJCQoCUgEBBQcICgsGBwb6AQECAwQFBQcGBwgICQkJAAAABQAAAAADdwP0AAIAQwCEAI8A0AAAAQc1BxUfDz8OPQEvDg8OBQcVDw4vDz8PHw4DHwczJwURFR8NMyEzPw01ESsBLwg9ASEPDgJefX0BAgQGBwkKCwwNDw8PERESERERDw8PDQwLCgkHBgQDAwQGBwkKCwwNDw8PEREREhERDw8PDQwLCgkHBgQCAXYBAwUHCQoMDQ4QERETFBQUFRQUEhIREA4NDAoJBgUDAgIDBQYJCgwNDhAREhIUFBUUFBQTEREQDg0MCgkHBQNdAQEDBAUFBgbb+v4MAgIDBAUFBgcHCAgJCQkKAjIKCQkJCAgHBwYFBQQDAgL6BgcGCwoIBwUBAf6oCgkJCQgIBwcGBQUEAwICAXNOnU8JCBEREA8ODQwLCgkHBgQDAQEDBAYHCQoLDA0ODxARERESERAQDw4ODAsKCAgFBQIBAQIFBQgICgsMDg4PEBAREgoKFRMTEREQDg0MCgkHBQMBAQMFBwkKDA0OEBERExMVFBUUFBISEQ8PDQwKCAcFAwEBAwUHCAoMDQ8PERISFBQBkQYGBQUEAwEB+l781AoJCQkICAcHBgUFBAMCAgICAwQFBQYHBwgICQkJCgJSAQEFBwgKCwYHBvoBAQIDBAUFBwYHCAgJCQkAAAYAAAAAA3cD9AAZADMATQBmAHEAsgAAATMfAx0BDwMjISMvAz0BPwMzJTMfAx0BDwMrAi8EPwQzNzMfAx0BDwMrAi8EPwQzJR8CMz8CMx8BMz8BMwcjLwIxDwEjJyUfBzMnBREVHw0zITM/DTURKwEvCD0BIQ8OAwoDAwUDAQEDBQMD/gwEAwQEAQEEBAMEAfQDAwUDAQEDBQMDvAMDBQMBAQEBAwUDA7wDAwUDAQEDBQMDvAMDBQMBAQEBAwUDA/7AJwECAQEDKxsnAwEBKR04HycCAQIsHjkBjgEBAwQFBQYG2/r+DAICAwQFBQYHBwgICQkJCgIyCgkJCQgIBwcGBQUEAwIC+gYHBgsKCAcFAQH+qAoJCQkICAcHBgUFBAMCAgElAQMFAwMEAgUEAQEEBQIEAwMFAwF9AQMFAwMEAgUEAQEEBQIEAwMFAwF9AQMFAwMEAgUEAQEEBQIEAwMFAwEBhgMNCAmFhhAHj7J/CAkHibL5BgYFBQQDAQH6XvzUCgkJCQgIBwcGBQUEAwICAgIDBAUFBgcHCAgJCQkKAlIBAQUHCAoLBgcG+gEBAgMEBQUHBgcICAkJCQAAAAAFAAAAAAN3A/QACwAXACMALgBvAAABFSMVMxUjFTMVIzUjFzczBxcjJwcjNycjFSMVMxUjFTMVIzUBHwczJwURFR8NMyEzPw01ESsBLwg9ASEPDgLYWU1NWnuOKCcmOTomKCkmOzkPWU1NWnsBWwEBAwQFBQYG2/r+DAICAwQFBQYHBwgICQkJCgIyCgkJCQgIBwcGBQUEAwIC+gYHBgsKCAcFAQH+qAoJCQkICAcHBgUFBAMCAgHhGzMaOhq8RERdX0VFX10bMxo6GrwBOAYGBQUEAwEB+l781AoJCQkICAcHBgUFBAMCAgICAwQFBQYHBwgICQkJCgJSAQEFBwgKCwYHBvoBAQIDBAUFBwYHCAgJCQkAAAAACAAAAAADdwP0AAQACAAMABEAFQAxADwAfQAAARUzNSMFMzUjFzM1IzMVMzUjBTM1IzUVMzUzFTM1MxUzNTMRIzUjFSM1IxUjNSMVIxElHwczJwURFR8NMyEzPw01ESsBLwg9ASEPDgJ9Pj7+xz8/Xry82z4+/sc/Pz8fvB8/Hx8/H7wfPx8BWAEBAwQFBQYG2/r+DAICAwQFBQYHBwgICQkJCgIyCgkJCQgIBwcGBQUEAwIC+gYHBgsKCAcFAQH+qAoJCQkICAcHBgUFBAMCAgElH15eXj+cPl5eXj4fHz4+Hx/+qCAgPz8gIAFY+gYGBQUEAwEB+l781AoJCQkICAcHBgUFBAMCAgICAwQFBQYHBwgICQkJCgJSAQEFBwgKCwYHBvoBAQIDBAUFBwYHCAgJCQkAAAAABwAAAAADdwP0AAMABwAjAEcAaACpALQAACUzNSM3FSM1NxUjFTMVIxUzFSMVMxUjNSM1MzUjNTM1IzUzNScRHwYzITM/BhEvByEPBiUfBxEPBiEvBhE/BgMRFR8NMyEzPw01ESsBLwg9ASEjDw0FHwczJwHhPj5dfX0+Pj4+Pj4+Pz8/Pz8/2wEBAgIDAwQEAY4EBAMDAgIBAQEBAgIDAwQE/nIEBAMDAgIBAaEFCgkIBwYEAgIEBgcICQr+aAoJCAcGBAICBAYHCAkKqwICAwQFBQYHBwgICQkJCgIyCgkJCQgIBwcGBQUEAwIC+gYHBgsKCAcFAQH+qAoJCQkICAcHBgUFBAMCAgH0AQEDBAUFBgbb+ucfH11d+h8fIB8fHyAgHx8gHx8fDP5yBAQDAwMBAgIBAwMDBAQBjgQDBAMCAgEBAQECAgMEAy8BAgMGBwgJCv5oCgkJBwUEAgIEBQcJCQoBmAoJCAcGBAIBOPzUCgkJCQgIBwcGBQUEAwICAgIDBAUFBgcHCAgJCQkKAlIBAQUHCAoLBgcG+gICAwQFBQYHBwgICQkJhwYGBQUEAgIB+gAAAAAHAAAAAAN3A/QAAgAVADMAOwBDAE4AjwAAATMnFzsBPwU9AS8FKwE3HwwPBxcVIycjFSM1IxcjJyMHIzcjFSMVIzUjNQEfBzMnBREVHw0zITM/DTURKwEvCD0BIQ8OAdw2G4whCAcGBQQDAgICBAUGBwgiIQgODQUFBQQEAwICAgEBAQMEBQYHCCsjJiQhXEciD0kPIkc/OyA6AWgBAQMEBQUGBtv6/gwCAgMEBQUGBwcICAkJCQoCMgoJCQkICAcHBgUFBAMCAvoGBwYLCggHBQEB/qgKCQkJCAgHBwYFBQQDAgIBa04xAgIEBAYGBwcGBQUDAwIbAQEEAwMDBAQFBQUGDQkICAcGBQQETgJISLy8LCy8G6GhGwE4BgYFBQQDAQH6XvzUCgkJCQgIBwcGBQUEAwICAgIDBAUFBgcHCAgJCQkKAlIBAQUHCAoLBgcG+gEBAgMEBQUHBgcICAkJCQAAAAgAAAAAA3cD9AAVADgARABfALYA5gDxATIAABMzPwg1LwgjFw8EHwc/CC8IDwIlFzczBxcjJwcjNychHwsPCyM1BR8GIy8HIw8GFR8HMz8GMw8NIy8KNT8KMx8EJx8GHQEPCSsBLwk9AT8JOwEfARMfBzMnBREVHw0zITM/DTURKwEvCD0BIQ8O5RUMCwUEBAcFAwIBBAUGBAQFBQsdsgIFAwEBAgMEBggECQoKCQQDBwUEAgEBAgQFBwMECQsKCAgBTicoJTg6JikoJjo5/jYMCwsKCQgHBgQDAgEBAQQEBgcICgoLCw02AdwEBAQDAgIDIQEDAwUFBggIBgkIBwYEAwIBAgMFBggICgkIBgYEBAICIQMCAgMEBAUFBQYGBwcPCwoKCQgHBgUEAwIBAQIDBAUGBwkJCgoLDw4GBQa6CAgGBQUDAgIDBAYGBwkJCgoLCwsKCQgIBgUFAwICAwQGBggICQoKCwwKCqUBAQMEBQUGBtv6/gwCAgMEBQUGBwcICAkJCQoCMgoJCQkICAcHBgUFBAMCAvoGBwYLCggHBQEB/qgKCQkJCAgHBwYFBQQDAgIBPwEDAgMECAkMDRkOCwoIAwMCAgIOBQoLDhoNDAoJBgIEAQEDAwMHCQsNDxgNCwoHAwIDAQEDBSJERF1fRUVfXQECBAQHBwgKCgwMDRYMCwsJCQcGBQMCAbwPBAUFBgYHDgkIBwUEAwEBAgQGCAkMDRgODAsJBwUDAQIDBAUGCAkOBgYGBQUFBAMDAgIBAQIEBAYHCAkLCwsNEQ0MDAoKCAcGBQQCAQMCAwQCBgcJCQsMDA4XDQwKCgkHBgUEAgIEBQYHCQoKDAwNGAwMCwoICAYFAwMDAwE8BgYFBQQDAQH6XvzUCgkJCQgIBwcGBQUEAwICAgIDBAUFBgcHCAgJCQkKAlIBAQUHCAoLBgcG+gEBAgMEBQUHBgcICAkJCQAGAAAAAAN3A/QABAAkAEcAbAB3ALgAAAEjNxc/ARUPBi8GPQE/Bh8GJREfByE/BxEvBiMhIw8EJRczHwYRDwchLwcRPwclHwczJwURFR8NMyEzPw01ESsBLwg9ASEPDgJ9+ipTU0kCAwQFBQYGBgYGBAQDAgIDBAQGBgYGBgUFBAMC/qgBAQECAwIDBAF1BAMDAgIBAQEBAQECAgMDBP6LBAMCBQEBAYUFBQkIBwYCBAIBAwQGBwQICv6GCgkIBwYCBAIBAwQGBwQJCQEtAQEDBAUFBgbb+v4MAgIDBAUFBgcHCAgJCQkKAjIKCQkJCAgHBwYFBQQDAgL6BgcGCwoIBwUBAf6oCgkJCQgIBwcGBQUEAwICAQZ1TnU/BwUGBAQDAgEBAgMEBAYFBwYGBQUEAwEBAQEDBAUFBkf+qgQDAgMCAQEBAQEBAgMCAwQBVgMEAgMCAQEBAQUDAy0BAwQGBwQJCf6lCgkIBwYCBAIBAwQGBwQJCQFbCgkIBwYCBAG8BgYFBQQDAQH6XvzUCgkJCQgIBwcGBQUEAwICAgIDBAUFBgcHCAgJCQkKAlIBAQUHCAoLBgcG+gEBAgMEBQUHBgcICAkJCQAHAAAAAAN3A/QAAwAHAAsADwAzAD4AfwAAATM1IzsBNSMHMzUjOwE1IycVMzUzFTM1MxUjFTMVIxUzFSM1IxUjNSMVIzUzNSM1MzUjNSUfBzMnBREVHw0zITM/DTURKwEvCD0BIQ8OAeE+Pj4/P30/Pz8+Pj8/Pj8+Pj4+Pj4/Pj8+Pj4+PgEZAQEDBAUFBgbb+v4MAgIDBAUFBgcHCAgJCQkKAjIKCQkJCAgHBwYFBQQDAgL6BgcGCwoIBwUBAf6oCgkJCQgIBwcGBQUEAwICASU/Pj4+Pz4+Pj4+Pj8+Pz4+Pj4+Pj8+Pz76BgYFBQQDAQH6XvzUCgkJCQgIBwcGBQUEAwICAgIDBAUFBgcHCAgJCQkKAlIBAQUHCAoLBgcG+gEBAgMEBQUHBgcICAkJCQAAAA0AAAAAA3cD9AARACMANgBJAFMAVwCnALkAywDdAPAA+wE8AAAlDwc1PwcHFS8HNx8GJQ8IJz8HIR8IBy8HJRUjFTMVIxUjNSMVIzUHHwQjLwYrAQ8GFR8HMz8CNSM1MxUPBy8LNT8OHwIFIy8HNx8GJQ8HIz8HJQcvBzUfBicjDwcnPwgfBzMnBREVHw0zITM/DTURKwEvCD0BIQ8OAqYQEBITFBQVFRISEhARDw8NoBUVFBQTEhAQFA4PDxAREhIBGwEBBAYHCQoMDRULCgkIBgUEAv5GAQEEBQYICQoLFQ0MCgkHBgQCAaJOREQdJB01AwQGBAIcAgIDBAUGBgcFCQcHBQQCAgECBAUGBwkKCgkHBSI/BQUHCAgJCQoLCQkJBwcGBQQDAQEBAgICAwQEBQUGBgcHBwgNDAsBPB4CAwUGCAkKCxUNDAoJBwYE/mILCgkIBgUEAh0CBAYHCQoMDQFhFQ0PDxAREhISFRUUFBMSEKUJCRISERAPDw0VEBASExQUFRWMAQEDBAUFBgbb+v4MAgIDBAUFBgcHCAgJCQkKAjIKCQkJCAgHBwYFBQQDAgL6BgcGCwoIBwUBAf6oCgkJCQgIBwcGBQUEAwICyA0MCgkHBgQCHgIDBQYICQoLNx0CBAYHCQoMDRUMCggIBgUEzAsKFRQUExIQEBUNDw8QERISEgkJEhIREA8PDRUQEBITFBQVFU8XMhdHp6eoDAQECQsMBwYFBQMCAgIDBQgICwwTDQsKCAcFAgECAwUhFkEFBQQEAgIBAQECAwQFBwcICgoKDBYJCAgHBwYFBQUDAwMBAQEBAwQsEhISEBEPDw0VEBERExQUFW0NDw8REBISEhUVFBQTEREQFRULCgkIBgUDAx0CBAYHCQoMFAIDBQYICQoLFQ0MCgkHBgQCnAYGBQUEAwEB+l781AoJCQkICAcHBgUFBAMCAgICAwQFBQYHBwgICQkJCgJSAQEFBwgKCwYHBvoBAQIDBAUFBwYHCAgJCQkAAAAABwAAAAADdwP0ABUALAA3AE0AuQDEAQUAAAEPBhUfBj8GHwQ7AT8FNS8GBycPAT8DLwQxDwQdAR8CPwI1LwUfAhUPAh8DPwIfCh0BDwsjLwUPDC8JPw4vBT8JMx8GNx8HMycFERUfDTMhMz8NNRErAS8IPQEhDw4BgQsVDgYEAwECAQMDAwQDBAQDBQca5AkUCAkEBAUFBQQCAgEBAwMEBhEKEZsNDxoZGRgQEBAPHAUFBAIBAw8OCAMBAQICAgcHMgIBAQISFRYXGBYVFgsLDQoIBwUDAwEBAQIDAwMEBQUFBgUGBgkICAcNMDIfICERHAcFBQYHCAgIBwcHBgUFAwMBAQIFBwgJCQlGCwoKCAgHFhUEAgMBAQMFAwQFBQYFBwoICAgHBwUEeQEBAwQFBQYG2/r+DAICAwQFBQYHBwgICQkJCgIyCgkJCQgIBwcGBQUEAwIC+gYHBgsKCAcFAQH+qAoJCQkICAcHBgUFBAMCAgElBAgIBAQFBQMFAwMDAgEBAQEBBAouPAcTBwUCAgMEBQQFBQMEAgICAgEBPiQiCAYGBRESEhOZAgIEBAUFBQkZFR8MDAYFBAMDBAIGCQgJCQhDGxoZGAQDAQEBAgQFBQYFBgYGBgUGBgUFBQUEBAMCAgEBAgMECiwJCAkLHzELBQQEAwIBAQEDBAQGBgcKCgkJCQcHBgUEGxcXGBgXGSEhCgUKCwoKCQUEAwQDAgEBAgMFBQYHvQYGBQUEAwEB+l781AoJCQkICAcHBgUFBAMCAgICAwQFBQYHBwgICQkJCgJSAQEFBwgKCwYHBvoBAQIDBAUFBwYHCAgJCQkABQAAAAADdwP0AAcAEwAbACYAZwAAARUjFSM1IzUjFzczBxcjJwcjNycjFSMVIzUjNQEfBzMnBREVHw0zITM/DhErAS8JNSEjDw0C8DogOoEoJyY5OiYoKSY6OAw7IDoBaAEBAwQFBQYG2/r+DAICAwQFBQYHBwgICQkJCgIyCgkJCQgIBwYHBQUEAwIBAfoGBwYLCggHBQEBAf6pCgkJCQgIBwcGBQUEAwICAeEboaEbRERdX0VFX10boaEbATgGBgUFBAMBAfpe/NQKCQkJCAgHBwYFBQQDAgICAgMEBQUGBwcICAkJCQoCUgEBBQcICgsGBwb6AgIDBAUFBgcHCAgJCQkAAAAABwAAAAADdwP0ABIAHgA+AGcAuwDGAQcAAAEzPwY9AS8FKwElFSMVMxUjFTMVIzUjFzMfCxUPCyMVIzUjFQ8KLwkzFR8FOwE/BT0BBR8FIy8GKwEPBh0BHwczPwI1IzUzFQ8GKwEvCjU/DTsBHwMDHwczJwURFR8NMyEzPw01ESsBLwg9ASEjDw0BdycJBwYFBAMCAgMEBQYHCCgBAllNTVp7YQgHDgYFBgQFAwQCAgIBAQICAgMEBAUFBg0OLyAlAQICAgMDBAkLCw4NDQoFCAMDAgMBIQEDAwQFBgYHBQUEBAICAf0EBAQDBAMgAgIEBAYGBwgGCQkHBQUCAgMEBQcEBQkLDAkIBydHBgYICAkKCwsLCwoKCAgGBgQDAgEBAgIDAwUEBgYGBwcICAkIDgwGBYwBAQMEBQUGBtv6/gwCAgMEBQUGBwcICAkJCQoCMgoJCQkICAcHBgUFBAMCAvoGBwYLCggHBQEB/qgKCQkJCAgHBwYFBQQDAgIBhQEBAwMFBQcHBwYGBQQDAhsbMxo6GrwBAwMDAwQEBAUGBQYGDgYGBgUEBQQDBAIEAka8hAYMBgUFBAUGBQMBAQIFAwcFBAULDQcGBgQDAgICAwMFBgYHhA0EBQUFDA4IBwYFAwMCAgQGCAoLDhUPDAsJCAMCAwEDAwUlGEcHBQUEAwIBAgQEBgcJCQoLDA0ZCgkJCAcHBgYFBAMDAgECBAIEAUIGBgUFBAMBAfpe/NQKCQkJCAgHBwYFBQQDAgICAgMEBQUGBwcICAkJCQoCUgEBBQcICgsGBwb6AgIDBAUFBgcHCAgJCQkAAAUAAAAAA3cD9AAFABEAggCNAM4AAAEVMxUjNSMXNzMHFyMnByM3JwUfBhUjLwYrAQ8FHQEfDRUPCiMvCjMVHwU7AT8GLw89AT8JMx8BAx8HMycFERUfDTMhMz8NNRErAS8IPQEhDw4B6lV2jignJjk6JigpJjs5AaMHBwYEBAMCIAECAgUFBgcIBwcGBQQCAgIDBA0mCAgGBQUDAwIBAQECAwMEBAoLDQ8JCgkJCAcGBQUDAQEhAgQEBgcICQgHBgUEAgIBAQICBAMJKAgIBgUEBAMCAQEBAgMDCAoLDQ4KCQg0AQEDBAUFBgbb+v4MAgIDBAUFBgcHCAgJCQkKAjIKCQkJCAgHBwYFBQQDAgL6BgcGCwoIBwUBAf6oCgkJCQgIBwcGBQUEAwICAeGiGrxERF1fRUVfXQUEBQUGBwgHCAcGBQUEAgIBAwIEBQUFBQUEBAcNBAQEBQUFBgYGBwsFBQUEBAMHBAIBAgIDBAUGBgcHCAkIBgYFBAICAQIDBAQFBgUGBAQBBQ4EBAUEBQUFBgYGBgUFBQUECAYFAgECAgE6BgYFBQQDAQH6XvzUCgkJCQgIBwcGBQUEAwICAgIDBAUFBgcHCAgJCQkKAlIBAQUHCAoLBgcG+gEBAgMEBQUHBgcICAkJCQAAAAQAAAAAA3cD9AADAGIAbQCuAAABFTc1Nx8CFREVDwkjLwk9AT8KOwEXNQcVDwkrAS8IPQE/CjsBFz0BPwU7ARcnHwczJwURFR8NMyEzPw01ESsBLwg9ASEPDgGvxx8DAgICAwQICQsMCAkICQkJCAcHBgQEAgECAQMDCAkLDAgJCAkICcMCAwQICQsMCAkICQkJCAcHBgQEAgECAgIEBwkLDAgJCAkJCAEEBQMD6wQDBxUBAQMEBQUGBtv6/gwCAgMEBQUGBwcICAkJCQoCMgoJCQkICAcHBgUFBAMCAvoGBwYLCggHBQEB/qgKCQkJCAgHBwYFBQQDAgIB7CQoJCYDBAUE/tIICQgICwkHBwMCAgEBAwQFBgYIBQcGBgYHBgYKCQgGAwMBAp0n1QkJCQoJCAYDAgICAwQFBQcHBgYHBgYGBwYKCQgGAwICAvgEAwYFAgEvAt0GBgUFBAMBAfpe/NQKCQkJCAgHBwYFBQQDAgICAgMEBQUGBwcICAkJCQoCUgEBBQcICgsGBwb6AQECAwQFBQcGBwgICQkJAAAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQANAAEAAQAAAAAAAgAHAA4AAQAAAAAAAwANABUAAQAAAAAABAANACIAAQAAAAAABQALAC8AAQAAAAAABgANADoAAQAAAAAACgAsAEcAAQAAAAAACwASAHMAAwABBAkAAAACAIUAAwABBAkAAQAaAIcAAwABBAkAAgAOAKEAAwABBAkAAwAaAK8AAwABBAkABAAaAMkAAwABBAkABQAWAOMAAwABBAkABgAaAPkAAwABBAkACgBYARMAAwABBAkACwAkAWsgRmlsZVR5cGVfRm9udFJlZ3VsYXJGaWxlVHlwZV9Gb250RmlsZVR5cGVfRm9udFZlcnNpb24gMS4wRmlsZVR5cGVfRm9udEZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAARgBpAGwAZQBUAHkAcABlAF8ARgBvAG4AdABSAGUAZwB1AGwAYQByAEYAaQBsAGUAVAB5AHAAZQBfAEYAbwBuAHQARgBpAGwAZQBUAHkAcABlAF8ARgBvAG4AdABWAGUAcgBzAGkAbwBuACAAMQAuADAARgBpAGwAZQBUAHkAcABlAF8ARgBvAG4AdABGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAASAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgETAANCTVAEWExTWANBVkkDRE9DA0VYRQNNUDQDWklQA1RBUgRET0NYA0pQRwNQTkcDR0lGA1BERgNUWFQESlBFRwNYTFMDTVAzAAA=) format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="sf-icon-"], [class*=" sf-icon-"] {
font-family: 'FileType_Font' !important;
speak: none;
font-size: 35px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
top: 8px;
}
/* csslint ignore:end */You can also explore JavaScript File Upload feature tour page for its groundbreaking features. You can also explore our JavaScript File Upload example to understand how to browse the files which you want to upload to the server.