body {
    margin: 0;
    font-family: sans-serif;
    background: url('https://picsum.photos/1200/800') no-repeat center/cover;
    height: 100vh;
}

a {
    color: darkslategrey;
    font-weight: 400;
}

.container {
    max-width: 600px;
    margin: 50px auto;
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
}

#drop-area {
    border: 4px dashed #888;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    border-radius: 8px;
}

progress {
    width: 100%;
    display: none;
    margin-top: 10px;
}

#result {
    margin-top: 15px;
}

.file-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.file-icon-image-jpeg,
.file-icon-image-png,
.file-icon-image-gif {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWljb24gbHVjaWRlLWltYWdlIj48cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHg9IjMiIHk9IjMiIHJveD0iMiIvPjxjaXJjbGUgY3g9IjguNSIgY3k9IjguNSIgcj0iMS41Ii8+PHBvbHlsaW5lIHBvaW50cz0iMjEgMTUgMTYuNSAxOS41IDcgMTAuNSAzIDE1Ii8+PC9zdmc+');
}

.file-icon-application-pdf {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWljb24gbHVjaWRlLWZpbGUtcGRmIj48cGF0aCBkPSJNMTQgMi41VjZhMiAyIDAgMCAwIDIgMmg0LjVhMiAyIDAgMCAxIDIgMi41VjIxYTIgMiAwIDAgMS0yIDJINmEyIDIgMCAwIDEtMi0yVjRhMiAyIDAgMCAxIDItMmg4LjVhMiAyIDAgMCAxIDIgMi41WiIvPjxwYXRoIGQ9Ik0xMCA4aDQiLz48cGF0aCBkPSJNMTQgMTJoLTRhMiAyIDAgMCAwLTItMiIvPjxwYXRoIGQ9Ik0xMCAxNmg0Ii8+PC9zdmc+');
}

.file-icon-text-plain {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWljb24gbHVjaWRlLWZpbGUtdGV4dCI+PHBhdGggZD0iTTE1IDJoNGEyIDIgMCAwIDEgMiAydjE2YTIgMiAwIDAgMS0yIDJINmEyIDIgMCAwIDEtMi0yVjRhMiAyIDAgMCAxIDItMmg5eiIvPjxwYXRoIGQ9Ik0xMCAxMGg0Ii8+PHBhdGggZD0iTTEwIDE0aDQiLz48cGF0aCBkPSJNMTMgMThoLTQiLz48L3N2Zz4=');
}

/* Default icon for unknown types */
.file-icon-application-octet-stream,
.file-icon-default {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlcm50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1pY29uIGx1Y2lkZS1maWxlIj48cGF0aCBkPSJNMTUgMmgyYTIgMiAwIDAgMSAyIDJ2MTZhMiAyIDAgMCAxLTIgMkg3YTIgMiAwIDAgMS0yLTJWNGMyIDIgMCAwIDEgMi0yYzEuMyAwIDIgMCAyIDJ6Ii8+PC9zdmc+');
}

.delete-btn {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin-left: 10px;
    cursor: pointer;
    border-radius: 4px;
}

.delete-btn:hover {
    background-color: #d32f2f;
}

#file-list {
    list-style-type: none;
    /* Remove list item dots */
    padding: 0;
}

#file-list li {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

#file-list li a {
    flex-grow: 1;
    /* Allow the link to take up available space */
    margin-right: 10px;
    text-decoration: none;
}

.delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 20px;
    /* Adjust size for the icon */
    height: 20px;
    /* Adjust size for the icon */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmNDQzMzYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1pY29uIGx1Y2lkZS14Ij48cGF0aCBkPSJNMTggNmwtMTIgMTIiLz48cGF0aCBkPSJtNiA2bDEyIDEyIi8+PC9zdmc+');
    /* Red cross icon */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    /* Hide text */
}

.delete-btn:hover {
    opacity: 0.7;
}

/* Beautiful Papirus Icons for File Types */

/* PDF Files */
.file-icon-application-pdf {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmVyc2lvbj0iMSI+CiA8cGF0aCBzdHlsZT0ib3BhY2l0eTowLjIiIGQ9Ik0gMTAsNSBDIDguODkyLDUgOCw1Ljg5MiA4LDcgdiAzNiBjIDAsMS4xMDggMC44OTIsMiAyLDIgaCAyOCBjIDEuMTA4LDAgMiwtMC44OTIgMiwtMiBWIDE3IEwgMjksMTYgMjgsNSBaIi8+CiA8cGF0aCBzdHlsZT0iZmlsbDojYzAzNjMwIiBkPSJNIDEwLDQgQyA4Ljg5Miw0IDgsNC44OTIgOCw2IHYgMzYgYyAwLDEuMTA4IDAuODkyLDIgMiwyIGggMjggYyAxLjEwOCwwIDIsLTAuODkyIDIsLTIgViAxNiBMIDI5LDE1IDI4LDQgWiIvPgogPHBhdGggc3R5bGU9Im9wYWNpdHk6MC4xO2ZpbGw6I2ZmZmZmZiIgZD0iTSAxMCw0IEMgOC44OTIsNCA4LDQuODkyIDgsNiBWIDcgQyA4LDUuODkyIDguODkyLDUgMTAsNSBoIDE4IGwgMTEsMTEgaCAxIEwgMjgsNCBaIi8+CiA8cGF0aCBzdHlsZT0ib3BhY2l0eTowLjIiIGQ9Im0gMjgsNSB2IDEwIGMgMCwxLjEwNDYgMC44OTU0MywyIDIsMiBoIDEwIHoiLz4KIDxwYXRoIHN0eWxlPSJmaWxsOiNmMzY5NjEiIGQ9Im0gMjgsNCB2IDEwIGMgMCwxLjEwNDYgMC44OTU0MywyIDIsMiBoIDEwIHoiLz4KIDxwYXRoIHN0eWxlPSJvcGFjaXR5OjAuMiIgZD0ibSAyMi43OCwxOS4xNzk5MDUgYyAtMC40NjEyNiwwIC0wLjg5MjYxLDAuMjI1NzcgLTAuOTk2OTYsMC41OTg0MSAtMC4zODc1MiwxLjQyODYgMC4wNDYyLDMuNjM3OSAwLjc2OTU2LDYuMzkwNiBsIC0wLjIxODIxLDAuNTMyOTQgYyAtMC45NTg4LDIuNjc3MiAtMi4wNDg0LDUuOTc1NiAtMS40ODI2LDguOTUzMSAwLjE2MjA2LDAuNzU0OCAwLjg3NzUsMS4wNCAxLjQ4MjYsMC40NTQ5IDAuNTQ1MDQsLTAuNDA1MDIgMC42NDcxLC0wLjk1ODggMC42NDcxLC0xLjYzNzYgMCwtMC43NTQ4IC0wLjE1NDU2LC0xLjU2MjEgLTAuMDgyMDMsLTIuMzE3MiAwLjA3OTcsLTAuODI5NSAwLjMyNzU4LC0xLjYzNzYgMC43ODMwNywtMi4zMTcyIDAuMzI3NTgsLTAuNTQ3NSAwLjgyOTUsLTAuOTU4OCAxLjQ4MjYsLTAuNzU0OCAwLjgyOTUsMC4yNDc1NiAxLjEyOTYsMS4xMjk2IDEuMTI5NiwxLjkzNjkgMCwwLjgyOTUgLTAuMjI1MDYsMS42Mzc2IC0wLjMwNTEsMi40Njk3IC0wLjA3OTcsMC44Mjk1IC0wLjA3OTcsMS42Mzc2IDAuMDgyMDMsMi4zMTcyIDAuMTI0NiwwLjU0NzUgMC40NjIwNiwwLjk1ODggMC44MzcwNCwxLjEyOTYgMC40NTQ5LDAuMTc5NiAwLjk1ODgsLTAuMDc5NyAxLjI4MTQsLTAuNDU0OSAwLjQ1NDksLTAuNTQ3NSAwLjYyMjA2LC0xLjMzMjEgMC42MjIwNiwtMi4wMzY5IDAsLTAuODI5NSAtMC4xNjIwNiwtMS42Mzc2IC0wLjA4MjAzLC0yLjMxNzIgMC4wNzk3LC0wLjgyOTUgMC4zMjc1OCwtMS42Mzc2IDAuNzgzMDcsLTIuMzE3MiAwLjMyNzU4LC0wLjU0NzUgMC44Mjk1LC0wLjk1ODggMS40ODI2LC0wLjc1NDggMC44Mjk1LDAuMjQ3NTYgMS4xMjk2LDEuMTI5NiAxLjEyOTYsMS45MzY5IDAsMC44Mjk1IC0wLjIyNTA2LDEuNjM3NiAtMC4zMDUxLDIuNDY5NyB6Ii8+Cjwvc3ZnPgo=');
}

/* Image Files */
.file-icon-image-jpeg,
.file-icon-image-jpg,
.file-icon-image-png,
.file-icon-image-gif,
.file-icon-image-bmp,
.file-icon-image-webp {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZlcnNpb249IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtNDQgNDF2LTMyYzAtMS4xMDgtMC44OTItMi0yLTJoLTM2Yy0xLjEwOCAwLTIgMC44OTItMiAydjMyYzAgMS4xMDggMC44OTIgMiAyIDJoMzZjMS4xMDggMCAyLTAuODkyIDItMnoiIHN0eWxlPSJvcGFjaXR5Oi4yIi8+CiA8cGF0aCBkPSJtNDQgNDB2LTMyYzAtMS4xMDgtMC44OTItMi0yLTJoLTM2Yy0xLjEwOCAwLTIgMC44OTItMiAydjMyYzAgMS4xMDggMC44OTIgMiAyIDJoMzZjMS4xMDggMCAyLTAuODkyIDItMnoiIHN0eWxlPSJmaWxsOiMzNmFjYTMiLz4KIDxwYXRoIGQ9Im02IDZjLTEuMTA4IDAtMiAwLjg5Mi0yIDJ2MWMwLTEuMTA4IDAuODkyLTIgMi0yaDM2YzEuMTA4IDAgMiAwLjg5MiAyIDJ2LTFjMC0xLjEwOC0wLjg5Mi0yLTItMnoiIHN0eWxlPSJmaWxsOiNmZmZmZmY7b3BhY2l0eTouMiIvPgogPHBhdGggZD0ibTE2LjUgMjAuNjkgOS45Mzc1IDExLjI1IDYuMzc1LTYuMTg3NSA2LjE4NzUgNi4xODc1djUuMDYyNWgtMzB2LTcuNXoiIHN0eWxlPSJvcGFjaXR5Oi4yIi8+CiA8cGF0aCBkPSJtMTYuNSAxOS42OSA5LjkzNzUgMTEuMjUgNi4zNzUtNi4xODc1IDYuMTg3NSA2LjE4NzV2NS4wNjI1aC0zMHYtNy41eiIgc3R5bGU9ImZpbGw6I2ZmZmZmZiIvPgo8L3N2Zz4K');
}

/* Text Files */
.file-icon-text-plain,
.file-icon-text-markdown,
.file-icon-text-csv {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmVyc2lvbj0iMSI+CiA8cGF0aCBzdHlsZT0ib3BhY2l0eTowLjIiIGQ9Ik0gMTAsNSBDIDguODkyLDUgOCw1Ljg5MiA4LDcgdiAzNiBjIDAsMS4xMDggMC44OTIsMiAyLDIgaCAyOCBjIDEuMTA4LDAgMiwtMC44OTIgMiwtMiBWIDE3IEwgMjksMTYgMjgsNSBaIi8+CiA8cGF0aCBmaWxsPSIjZTRlNGU0IiBkPSJtMTAgNGMtMS4xMDggMC0yIDAuODkyLTIgMnYzNmMwIDEuMTA4IDAuODkyIDIgMiAyaDI4YzEuMTA4IDAgMi0wLjg5MiAyLTJ2LTI2bC0xMS0xLTEtMTF6Ii8+CiA8cGF0aCBmaWxsPSIjZmZmIiBvcGFjaXR5PSIuMiIgZD0ibTEwIDRjLTEuMTA4IDAtMiAwLjg5Mi0yIDJ2MWMwLTEuMTA4IDAuODkyLTIgMi0yaDE4bDExIDExaDFsLTEyLTEyeiIvPgogPHBhdGggc3R5bGU9Im9wYWNpdHk6MC4yIiBkPSJtIDI4LDUgdiAxMCBjIDAsMS4xMDQ2IDAuODk1NDMsMiAyLDIgaCAxMCB6Ii8+CiA8cGF0aCBmaWxsPSIjZmFmYWZhIiBkPSJtMjggNHYxMGMwIDEuMTA0NiAwLjg5NTQzIDIgMiAyaDEwbC0xMi0xMnoiLz4KIDxwYXRoIHN0eWxlPSJvcGFjaXR5OjAuNSIgZD0ibSAxNSwzNyB2IC0yIGggMTEgdiAyIHogbSAwLC00IHYgLTIgaCAxOCB2IDIgeiBtIDAsLTQgdiAtMiBoIDE4IHYgMiB6IG0gMCwtNCB2IC0yIGggMTggdiAyIHoiLz4KPC9zdmc+Cg==');
}

/* Microsoft Office Documents */
.file-icon-application-vnd.openxmlformats-officedocument.wordprocessingml.document,
.file-icon-application-msword {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmVyc2lvbj0iMSI+CiA8cGF0aCBzdHlsZT0ib3BhY2l0eTowLjIiIGQ9Ik0gMTAsNSBDIDguODkyLDUgOCw1Ljg5MiA4LDcgdiAzNiBjIDAsMS4xMDggMC44OTIsMiAyLDIgaCAyOCBjIDEuMTA4LDAgMiwtMC44OTIgMiwtMiBWIDE3IEwgMjksMTYgMjgsNSBaIi8+CiA8cGF0aCBzdHlsZT0iZmlsbDojMWI4M2Q0IiBkPSJNIDEwLDQgQyA4Ljg5Miw0IDgsNC44OTIgOCw2IFYgNDIgQyA4LDQzLjEwOCA4Ljg5Miw0NCAxMCw0NCBIIDM4IEMgMzkuMTA4LDQ0IDQwLDQzLjEwOCA0MCw0MiBWIDE2IEwgMjksMTUgMjgsNCBaIi8+CiA8cGF0aCBmaWxsPSIjZmZmIiBvcGFjaXR5PSIuMSIgZD0ibTEwIDRjLTEuMTA4IDAtMiAwLjg5Mi0yIDJ2MWMwLTEuMTA4IDAuODkyLTIgMi0yaDE4bDExIDExaDFsLTEyLTEyeiIvPgogPHBhdGggc3R5bGU9Im9wYWNpdHk6MC4yIiBkPSJtIDI4LDUgdiAxMCBjIDAsMS4xMDQ2IDAuODk1NDMsMiAyLDIgaCAxMCB6Ii8+CiA8cGF0aCBzdHlsZT0iZmlsbDojM2I5Y2U2IiBkPSJNIDI4LDQgViAxNCBDIDI4LDE1LjEwNSAyOC44OTUsMTYgMzAsMTYgSCA0MCBaIi8+CiA8ZyBzdHlsZT0ib3BhY2l0eTowLjIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsNCkiPgogIDxyZWN0IHdpZHRoPSIxMSIgaGVpZ2h0PSI4IiB4PSIyNSIgeT0iMTgiIHJ4PSIxIiByeT0iMSIvPgogIDxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiB4PSIxMiIgeT0iMTgiIHJ4PSIxIiByeT0iMSIvPgogIDxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiB4PSIxMiIgeT0iMjEiIHJ4PSIxIiByeT0iMSIvPgogIDxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiB4PSIxMiIgeT0iMjQiIHJ4PSIxIiByeT0iMSIvPgogIDxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiB4PSIxMiIgeT0iMjciIHJ4PSIxIiByeT0iMSIvPgogIDxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiB4PSIxMiIgeT0iMzAiIHJ4PSIxIiByeT0iMSIvPgogIDxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiB4PSIxMiIgeT0iMzMiIHJ4PSIxIiByeT0iMSIvPgogIDxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiB4PSIxMiIgeT0iMzYiIHJ4PSIxIiByeT0iMSIvPgogPC9nPgogPGcgc3R5bGU9ImZpbGw6I2ZmZmZmZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwzKSI+CiAgPHJlY3Qgd2lkdGg9IjExIiBoZWlnaHQ9IjgiIHg9IjI1IiB5PSIxOCIgcng9IjEiIHJ5PSIxIi8+CiAgPHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjIiIHg9IjEyIiB5PSIxOCIgcng9IjEiIHJ5PSIxIi8+CiAgPHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjIiIHg9IjEyIiB5PSIyMSIgcng9IjEiIHJ5PSIxIi8+CiAgPHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjIiIHg9IjEyIiB5PSIyNCIgcng9IjEiIHJ5PSIxIi8+CiAgPHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjIiIHg9IjEyIiB5PSIyNyIgcng9IjEiIHJ5PSIxIi8+CiAgPHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjIiIHg9IjEyIiB5PSIzMCIgcng9IjEiIHJ5PSIxIi8+CiAgPHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjIiIHg9IjEyIiB5PSIzMyIgcng9IjEiIHJ5PSIxIi8+CiAgPHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjIiIHg9IjEyIiB5PSIzNiIgcng9IjEiIHJ5PSIxIi8+CiA8L2c+Cjwvc3ZnPgo=');
}

.file-icon-application-vnd.openxmlformats-officedocument.spreadsheetml.sheet,
.file-icon-application-vnd.ms-excel {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmVyc2lvbj0iMSI+CiA8cGF0aCBzdHlsZT0ib3BhY2l0eTowLjIiIGQ9Ik0gMTAsNSBDIDguODkyLDUgOCw1Ljg5MiA4LDcgdiAzNiBjIDAsMS4xMDggMC44OTIsMiAyLDIgaCAyOCBjIDEuMTA4LDAgMiwtMC44OTIgMiwtMiBWIDE3IEwgMjksMTYgMjgsNSBaIi8+CiA8cGF0aCBzdHlsZT0iZmlsbDojNGJhZTRmIiBkPSJNIDEwLDQgQyA4Ljg5Miw0IDgsNC44OTIgOCw2IHYgMzYgYyAwLDEuMTA4IDAuODkyLDIgMiwyIGggMjggYyAxLjEwOCwwIDIsLTAuODkyIDIsLTIgViAxNiBMIDI5LDE1IDI4LDQgWiIvPgogPHBhdGggc3R5bGU9Im9wYWNpdHk6MC4xO2ZpbGw6I2ZmZmZmZiIgZD0iTSAxMCw0IEMgOC44OTIsNCA4LDQuODkyIDgsNiBWIDcgQyA4LDUuODkyIDguODkyLDUgMTAsNSBoIDE4IGwgMTEsMTEgaCAxIEwgMjgsNCBaIi8+CiA8cGF0aCBzdHlsZT0ib3BhY2l0eTowLjIiIGQ9Im0gMjgsNSB2IDEwIGMgMCwxLjEwNDYgMC44OTU0MywyIDIsMiBoIDEwIHoiLz4KIDxwYXRoIHN0eWxlPSJmaWxsOiM5NWNkOTciIGQ9Im0gMjgsNCB2IDEwIGMgMCwxLjEwNDYgMC44OTU0MywyIDIsMiBoIDEwIHoiLz4KIDxwYXRoIHN0eWxlPSJvcGFjaXR5OjAuMiIgZD0iTSAxNSwzOCBIIDMzIFYgMjQgSCAxNSBaIG0gMiwtMTIgaCA2IHYgMiBoIC02IHogbSA4LDAgaCA2IHYgMiBoIC02IHogbSAtOCw0IGggNiB2IDIgaCAtNiB6IG0gOCwwIGggNiB2IDIgaCAtNiB6IG0gLTgsNCBoIDYgdiAyIGggLTYgeiBtIDgsMCBoIDYgdiAyIGggLTYgeiIvPgogPHBhdGggc3R5bGU9ImZpbGw6I2ZmZmZmZiIgZD0iTSAxNSwzNyBIIDMzIFYgMjMgSCAxNSBaIG0gMiwtMTIgaCA2IHYgMiBoIC02IHogbSA4LDAgaCA2IHYgMiBoIC02IHogbSAtOCw0IGggNiB2IDIgaCAtNiB6IG0gOCwwIGggNiB2IDIgaCAtNiB6IG0gLTgsNCBoIDYgdiAyIGggLTYgeiBtIDgsMCBoIDYgdiAyIGggLTYgeiIvPgo8L3N2Zz4K');
}

.file-icon-application-vnd.openxmlformats-officedocument.presentationml.presentation,
.file-icon-application-vnd.ms-powerpoint {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmVyc2lvbj0iMSI+CiA8cGF0aCBzdHlsZT0ib3BhY2l0eTowLjIiIGQ9Ik0gMTAsNSBDIDguODkyLDUgOCw1Ljg5MiA4LDcgdiAzNiBjIDAsMS4xMDggMC44OTIsMiAyLDIgaCAyOCBjIDEuMTA4LDAgMiwtMC44OTIgMiwtMiBWIDE3IEwgMjksMTYgMjgsNSBaIi8+CiA8cGF0aCBmaWxsPSIjZmY1NzIyIiBkPSJtMTAgNGMtMS4xMDggMC0yIDAuODkyLTIgMnYzNmMwIDEuMTA4IDAuODkyIDIgMiAyaDI4YzEuMTA4IDAgMi0wLjg5MiAyLTJ2LTI2bC0xMS0xLTEtMTF6Ii8+CiA8cGF0aCBzdHlsZT0ib3BhY2l0eTowLjIiIGQ9Im0gMTgsMjYgYyAtMi4yMDkxLDAgLTQsMS43OTA5IC00LDQgMCwyLjIwOTEgMS43OTA5LDQgNCw0IDIuMjA5MSwwIDQsLTEuNzkwOSA0LC00IGggLTQgeiBtIDcsMCB2IDIgaCA5IHYgLTIgeiBtIDAsNSB2IDIgaCA5IHYgLTIgeiBtIC0xMSw1IHYgMiBoIDE2IHYgLTIgeiIvPgogPHBhdGggZmlsbD0iI2ZmZiIgZD0ibTE4IDI1Yy0yLjIwOTEgMC00IDEuNzkwOS00IDRzMS43OTA5IDQgNCA0IDQtMS43OTA5IDQtNGgtNHptNyAwdjJoOXYtMnptMCA1djJoOXYtMnptLTExIDV2MmgxNnYtMnoiLz4KIDxwYXRoIGZpbGw9IiNmZmYiIG9wYWNpdHk9Ii4xIiBkPSJtMTAgNGMtMS4xMDggMC0yIDAuODkyLTIgMnYxYzAtMS4xMDggMC44OTItMiAyLTJoMThsMTEgMTFoMWwtMTItMTJ6Ii8+CiA8cGF0aCBzdHlsZT0ib3BhY2l0eTowLjIiIGQ9Im0gMjgsNSB2IDEwIGMgMCwxLjEwNDYgMC44OTU0MywyIDIsMiBoIDEwIHoiLz4KIDxwYXRoIHN0eWxlPSJmaWxsOiNmZjg3NmIiIGQ9Im0yOCA0djEwYzAgMS4xMDQ2IDAuODk1NDMgMiAyIDJoMTBsLTEyLTEyeiIvPgo8L3N2Zz4K');
}

/* Audio Files */
.file-icon-audio-mpeg,
.file-icon-audio-wav,
.file-icon-audio-ogg,
.file-icon-audio-mp3,
.file-icon-audio-flac {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmVyc2lvbj0iMSI+CiA8cGF0aCBzdHlsZT0ib3BhY2l0eTowLjIiIGQ9Ik0gMTAsNSBDIDguODkyLDUgOCw1Ljg5MiA4LDcgdiAzNiBjIDAsMS4xMDggMC44OTIsMiAyLDIgaCAyOCBjIDEuMTA4LDAgMiwtMC44OTIgMiwtMiBWIDE3IEwgMjksMTYgMjgsNSBaIi8+CiA8cGF0aCBzdHlsZT0iZmlsbDojZmU5NzAwIiBkPSJNIDEwLDQgQyA4Ljg5Miw0IDgsNC44OTIgOCw2IHYgMzYgYyAwLDEuMTA4IDAuODkyLDIgMiwyIGggMjggYyAxLjEwOCwwIDIsLTAuODkyIDIsLTIgViAxNiBMIDI5LDE1IDI4LDQgWiIvPgogPHBhdGggc3R5bGU9Im9wYWNpdHk6MC4yO2ZpbGw6I2ZmZmZmZiIgZD0iTSAxMCw0IEMgOC44OTIsNCA4LDQuODkyIDgsNiBWIDcgQyA4LDUuODkyIDguODkyLDUgMTAsNSBoIDE4IGwgMTEsMTEgaCAxIEwgMjgsNCBaIi8+CiA8cGF0aCBzdHlsZT0ib3BhY2l0eTowLjIiIGQ9Im0gMjgsNSB2IDEwIGMgMCwxLjEwNDYgMC44OTU0MywyIDIsMiBoIDEwIHoiLz4KIDxwYXRoIHN0eWxlPSJmaWxsOiNmZmJkNjMiIGQ9Im0gMjgsNCB2IDEwIGMgMCwxLjEwNDYgMC44OTU0MywyIDIsMiBoIDEwIHoiLz4KIDxwYXRoIHN0eWxlPSJvcGFjaXR5OjAuMiIgZD0ibSAyMC4wMjE0MjEsMjAuOTkyNzA1IGggLTAuMDE5MiBjIDAuMDM4MSw0LjE4NzQgLTcuM2UtNCw3LjM3NSAwLDExLjU2MiAtMS44NDM4LC0xLjE3MjUgLTQuNTMxNiwtMC40MTQ5NyAtNS41MTcyLDEuNTMwOSAtMS4xNDcyLDIuMDE5NCAtMC4yODk5Niw0Ljg1NDQgMS41MzA5LDUuNTE3MiAxLjc5ODgsMC41MjQ5IDMuODEzMywtMC4wODIwMyA0Ljg1NDQsLTEuNTMwOSAwLjYxMDMsLTAuODM3MDQgMC42MDI1NiwtMi4wMTk0IC0wLjAxOTIsLTIuODU0NSAtMC40NTQ5LC0wLjYxMDMgLTEuMjgxNCwtMC45NTg4IC0yLjAzNjksLTAuNjQ3MSAtMC43NTQ4LDAuMzA1MSAtMS4yODE0LDEuMTI5NiAtMS4yODE0LDEuOTM2OSAwLDAuODI5NSAwLjU0NTA0LDEuNjM3NiAxLjQ4MjYsMS42Mzc2IDAuODI5NSwwIDEuNDgyNiwtMC44Mjk1IDEuNDgyNiwtMS42Mzc2IDAsLTAuODI5NSAtMC41NDUwNCwtMS42Mzc2IC0xLjQ4MjYsLTEuNjM3NiAtMC44Mjk1LDAgLTEuNDgyNiwwLjgyOTUgLTEuNDgyNiwxLjYzNzYgeiIvPgo8L3N2Zz4K');
}

/* Code Files */
.file-icon-application-javascript,
.file-icon-text-javascript {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmVyc2lvbj0iMS4xIj4KIDxwYXRoIHN0eWxlPSJvcGFjaXR5OjAuMiIgZD0iTSAxMCw1IEMgOC44OTIsNSA4LDUuODkyIDgsNyB2IDM2IGMgMCwxLjEwOCAwLjg5MiwyIDIsMiBoIDI4IGMgMS4xMDgsMCAyLC0wLjg5MiAyLC0yIFYgMTcgTCAyOSwxNiAyOCw1IFoiLz4KIDxwYXRoIGZpbGw9IiNlNjdkNGEiIGQ9Im0xMCA0Yy0xLjEwOCAwLTIgMC44OTItMiAydjM2YzAgMS4xMDggMC44OTIgMiAyIDJoMjhjMS4xMDggMCAyLTAuODkyIDItMnYtMjZsLTExLTEtMS0xMXoiLz4KIDxwYXRoIGZpbGw9IiNmZmYiIG9wYWNpdHk9Ii4yIiBkPSJtMTAgNGMtMS4xMDggMC0yIDAuODkyLTIgMnYxYzAtMS4xMDggMC44OTItMiAyLTJoMThsMTEgMTFoMWwtMTItMTJ6Ii8+CiA8cGF0aCBzdHlsZT0ib3BhY2l0eTowLjIiIGQ9Im0gMjgsNSB2IDEwIGMgMCwxLjEwNDYgMC44OTU0MywyIDIsMiBoIDEwIHoiLz4KIDxwYXRoIHN0eWxlPSJmaWxsOiNlZDlhNzMiIGQ9Im0yOCA0djEwYzAgMS4xMDQ2IDAuODk1NDMgMiAyIDJoMTBsLTEyLTEyeiIvPgogPHBhdGggc3R5bGU9Im9wYWNpdHk6MC4yO2ZpbGwtcnVsZTpldmVub2RkIiBkPSJtIDE5LjA2NCwyMi40ODIgYSAxLjAwMDEsMS4wMDAxIDAgMCAwIC0wLjA5NTcsMC4wMDIgMS4wMDAxLDEuMDAwMSAwIDAgMCAtMC4yNjM2NywwLjA1NDY5IGMgMCwwIC0wLjYyNjMxLDAuMjA2MzQgLTEuMzUxNiwwLjU4Nzg5IC0wLjcyNTI1LDAuMzgxNTYgLTEuNjQwNiwwLjkzMzU5IC0yLjU3ODEsMS41NjQ1IC0wLjkzNzUsMC42MzA4OSAtMS45NDM0LDEuMzM0NCAtMi44NTc0LDIuMDk5NiAtMC45MTQxLDAuNzY1MTkgLTEuNzIyNywxLjYwMTYgLTIuMzEyNSwyLjUzOTEgLTAuNTg5OCwwLjkzNzQ5IC0wLjkzNzUsMS45NzA3IC0wLjkzNzUsMy4wOTM4IDAsMS4xMjMxIDAuMzQ3NywyLjE1NjMgMC45Mzc1LDMuMDkzOCAwLjU4OTgsMC45Mzc0OSAxLjM5ODQsMS43NzM5IDIuMzEyNSwyLjUzOTEgMC45MTQxLDAuNzY1MTkgMS45MTk5LDEuNDY4NyAyLjg1NzQsMi4wOTk2IDAuOTM3NSwwLjYzMDg5IDEuODUyOSwxLjE4MjkgMi41NzgxLDEuNTY0NSAwLjcyNTMsMC4zODE1NiAxLjM1MTYsMC41ODc4OSAxLjM1MTYsMC41ODc4OSBhIDEuMDAwMSwxLjAwMDEgMCAwIDAgMC4yNjM2NywwLjA1NDY5IDEuMDAwMSwxLjAwMDEgMCAwIDAgMC4wOTU3LDAuMDAyIDEuMDAwMSwxLjAwMDEgMCAwIDAgMC45Mzc1LC0wLjYzODY3IDEuMDAwMSwxLjAwMDEgMCAwIDAgMCwtMC43MjI2NiAxLjAwMDEsMS4wMDAxIDAgMCAwIC0wLjkzNzUsLTAuNjM4NjcgMS4wMDAxLDEuMDAwMSAwIDAgMCAtMC4yNjM2NywwLjA1NDY5IGMgMCwwIC0wLjYyNjMxLC0wLjIwNjM0IC0xLjM1MTYsLTAuNTg3ODkgLTAuNzI1MjUsLTAuMzgxNTYgLTEuNjQwNiwtMC45MzM1OSAtMi41NzgxLC0xLjU2NDUgLTAuOTM3NSwtMC42MzA4OSAtMS45NDM0LC0xLjMzNDQgLTIuODU3NCwtMi4wOTk2IC0wLjkxNDEsLTAuNzY1MTkgLTEuNzIyNywtMS42MDE2IC0yLjMxMjUsLTIuNTM5MSAtMC41ODk4LC0wLjkzNzQ5IC0wLjkzNzUsLTEuOTcwNyAtMC45Mzc1LC0zLjA5MzggMCwtMS4xMjMxIDAuMzQ3NywtMi4xNTYzIDAuOTM3NSwtMy4wOTM4IDAuNTg5OCwtMC45Mzc0OSAxLjM5ODQsLTEuNzczOSAyLjMxMjUsLTIuNTM5MSAwLjkxNDEsLTAuNzY1MTkgMS45MTk5LC0xLjQ2ODcgMi44NTc0LC0yLjA5OTYgMC45Mzc1LC0wLjYzMDg5IDEuODUyOSwtMS4xODI5IDIuNTc4MSwtMS41NjQ1IDAuNzI1MywtMC4zODE1NiAxLjM1MTYsLTAuNTg3ODkgMS4zNTE2LC0wLjU4Nzg5IGEgMS4wMDAxLDEuMDAwMSAwIDAgMCAwLjI2MzY3LC0wLjA1NDY5IDEuMDAwMSwxLjAwMDEgMCAwIDAgMC45Mzc1LDAuNjM4NjcgMS4wMDAxLDEuMDAwMSAwIDAgMCAwLDAuNzIyNjYgMS4wMDAxLDEuMDAwMSAwIDAgMCAtMC45Mzc1LDAuNjM4NjcgeiIvPgogPHBhdGggc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLXJ1bGU6ZXZlbm9kZCIgZD0ibSAxOS4wNjQsMjEuNDgyIGEgMS4wMDAxLDEuMDAwMSAwIDAgMCAtMC4wOTU3LDAuMDAyIDEuMDAwMSwxLjAwMDEgMCAwIDAgLTAuMjYzNjcsMC4wNTQ2OSBjIDAsMCAtMC42MjYzMSwwLjIwNjM0IC0xLjM1MTYsMC41ODc4OSAtMC43MjUyNSwwLjM4MTU2IC0xLjY0MDYsMC45MzM1OSAtMi41NzgxLDEuNTY0NSAtMC45Mzc1LDAuNjMwODkgLTEuOTQzNCwxLjMzNDQgLTIuODU3NCwyLjA5OTYgLTAuOTE0MSwwLjc2NTE5IC0xLjcyMjcsMS42MDE2IC0yLjMxMjUsMi41MzkxIC0wLjU4OTgsMC45Mzc0OSAtMC45Mzc1LDEuOTcwNyAtMC45Mzc1LDMuMDkzOCAwLDEuMTIzMSAwLjM0NzcsMi4xNTYzIDAuOTM3NSwzLjA5MzggMC41ODk4LDAuOTM3NDkgMS4zOTg0LDEuNzczOSAyLjMxMjUsMi41MzkxIDAuOTE0MSwwLjc2NTE5IDEuOTE5OSwxLjQ2ODcgMi44NTc0LDIuMDk5NiAwLjkzNzUsMC42MzA4OSAxLjg1MjksMS4xODI5IDIuNTc4MSwxLjU2NDUgMC43MjUzLDAuMzgxNTYgMS4zNTE2LDAuNTg3ODkgMS4zNTE2LDAuNTg3ODkgYSAxLjAwMDEsMS4wMDAxIDAgMCAwIDAuMjYzNjcsMC4wNTQ2OSAxLjAwMDEsMS4wMDAxIDAgMCAwIDAuMDk1NywwLjAwMiAxLjAwMDEsMS4wMDAxIDAgMCAwIDAuOTM3NSwtMC42Mzg2NyAxLjAwMDEsMS4wMDAxIDAgMCAwIDAsLTAuNzIyNjYgMS4wMDAxLDEuMDAwMSAwIDAgMCAtMC45Mzc1LC0wLjYzODY3IDEuMDAwMSwxLjAwMDEgMCAwIDAgLTAuMjYzNjcsMC4wNTQ2OSBjIDAsMCAtMC42MjYzMSwtMC4yMDYzNCAtMS4zNTE2LC0wLjU4Nzg5IC0wLjcyNTI1LC0wLjM4MTU2IC0xLjY0MDYsLTAuOTMzNTkgLTIuNTc4MSwtMS41NjQ1IC0wLjkzNzUsLTAuNjMwODkgLTEuOTQzNCwtMS4zMzQ0IC0yLjg1NzQsLTIuMDk5NiAtMC45MTQxLC0wLjc2NTE5IC0xLjcyMjcsLTEuNjAxNiAtMi4zMTI1LC0yLjUzOTEgLTAuNTg5OCwtMC45Mzc0OSAtMC45Mzc1LC0xLjk3MDcgLTAuOTM3NSwtMy4wOTM4IDAsLTEuMTIzMSAwLjM0NzcsLTIuMTU2MyAwLjkzNzUsLTMuMDkzOCAwLjU4OTgsLTAuOTM3NDkgMS4zOTg0LC0xLjc3MzkgMi4zMTI1LC0yLjUzOTEgMC45MTQxLC0wLjc2NTE5IDEuOTE5OSwtMS40Njg3IDIuODU3NCwtMi4wOTk2IDAuOTM3NSwtMC42MzA4OSAxLjg1MjksLTEuMTgyOSAyLjU3ODEsLTEuNTY0NSAwLjcyNTMsLTAuMzgxNTYgMS4zNTE2LC0wLjU4Nzg5IDEuMzUxNiwtMC41ODc4OSBhIDEuMDAwMSwxLjAwMDEgMCAwIDAgMC4yNjM2NywtMC4wNTQ2OSAxLjAwMDEsMS4wMDAxIDAgMCAwIDAuOTM3NSwwLjYzODY3IDEuMDAwMSwxLjAwMDEgMCAwIDAgMCwwLjcyMjY2IDEuMDAwMSwxLjAwMDEgMCAwIDAgLTAuOTM3NSwwLjYzODY3IHoiLz4KPC9zdmc+Cg==');
}

.file-icon-text-x-php,
.file-icon-application-x-php {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmVyc2lvbj0iMS4xIj4KIDxwYXRoIHN0eWxlPSJvcGFjaXR5OjAuMiIgZD0iTSAxMCw1IEMgOC44OTIsNSA4LDUuODkyIDgsNyB2IDM2IGMgMCwxLjEwOCAwLjg5MiwyIDIsMiBoIDI4IGMgMS4xMDgsMCAyLC0wLjg5MiAyLC0yIFYgMTcgTCAyOSwxNiAyOCw1IFoiLz4KIDxwYXRoIHN0eWxlPSJvcGFjaXR5OjAuMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEzNS42MSwtMjM3Ljc2KSIgZD0ibSAxNjMuMjIsMjQyLjQ1IHYgMTEgYyAwLDEuMTA0NiAwLjg5NTQzLDIgMiwyIGggMTAgbCAtMSwtMSAtMTAsLTkgeiIvPgogPHBhdGggc3R5bGU9ImZpbGw6Izg1NjFjMSIgZD0iTSAxMCw0IEMgOC44OTIsNCA4LDQuODkyIDgsNiB2IDM2IGMgMCwxLjEwOCAwLjg5MiwyIDIsMiBoIDI4IGMgMS4xMDgsMCAyLC0wLjg5MiAyLC0yIFYgMTYgTCAyOSwxNSAyOCw0IFoiLz4KIDxwYXRoIHN0eWxlPSJvcGFjaXR5OjAuMjtmaWxsOiNmZmZmZmYiIGQ9Ik0gMTAsNCBDIDguODkyLDQgOCw0Ljg5MiA4LDYgViA3IEMgOCw1Ljg5MiA4Ljg5Miw1IDEwLDUgaCAxOCBsIDExLDExIGggMSBMIDI4LDQgWiIvPgogPHBhdGggc3R5bGU9Im9wYWNpdHk6MC4yIiBkPSJtIDI4LDUgdiAxMCBjIDAsMS4xMDQ2IDAuODk1NDMsMiAyLDIgaCAxMCB6Ii8+CiA8cGF0aCBzdHlsZT0iZmlsbDojYWQ4MWYyIiBkPSJtIDI4LDQgdiAxMCBjIDAsMS4xMDQ2IDAuODk1NDMsMiAyLDIgaCAxMCB6Ii8+CiA8cGF0aCBzdHlsZT0ib3BhY2l0eTowLjIiIGQ9Ik0gMjMsMjUgViAzMCBIIDI1IFYgMjUgSCAzMCBWIDIzIEggMjUgViAxOCBIIDIzIFYgMjMgSCAxOCBWIDI1IFoiLz4KIDxwYXRoIHN0eWxlPSJmaWxsOiNmZmZmZmYiIGQ9Ik0gMjMsMjQgViAyOSBIIDI1IFYgMjQgSCAzMCBWIDIyIEggMjUgViAxNyBIIDIzIFYgMjIgSCAxOCBWIDI0IFoiLz4KIDxwYXRoIHN0eWxlPSJvcGFjaXR5OjAuMiIgZD0ibSAxMy4wOSwzMi4wOSBjIC0wLjUzOSwwIC0xLjA5LDAuNTM5IC0xLjA5LDEuMDkgMCwwLjUzOSAwLjUzOSwxLjA5IDEuMDksMS4wOSBoIDAuMSBjIDAuNTM5LDAgMS4wOSwtMC41MzkgMS4wOSwtMS4wOSAwLC0wLjUzOSAtMC41MzksLTEuMDkgLTEuMDksLTEuMDkgeiBtIDMuMTgsMCBjIC0wLjUzOSwwIC0xLjA5LDAuNTM5IC0xLjA5LDEuMDkgMCwwLjUzOSAwLjUzOSwxLjA5IDEuMDksMS4wOSBoIDAuMSBjIDAuNTM5LDAgMS4wOSwtMC41MzkgMS4wOSwtMS4wOSAwLC0wLjUzOSAtMC41MzksLTEuMDkgLTEuMDksLTEuMDkgeiBtIDMuMTgsMCBjIC0wLjUzOSwwIC0xLjA5LDAuNTM5IC0xLjA5LDEuMDkgMCwwLjUzOSAwLjUzOSwxLjA5IDEuMDksMS4wOSBoIDAuMSBjIDAuNTM5LDAgMS4wOSwtMC41MzkgMS4wOSwtMS4wOSAwLC0wLjUzOSAtMC41MzksLTEuMDkgLTEuMDksLTEuMDkgeiIvPgogPHBhdGggc3R5bGU9ImZpbGw6I2ZmZmZmZiIgZD0ibSAxMy4wOSwzMS4wOSBjIC0wLjUzOSwwIC0xLjA5LDAuNTM5IC0xLjA5LDEuMDkgMCwwLjUzOSAwLjUzOSwxLjA5IDEuMDksMS4wOSBoIDAuMSBjIDAuNTM5LDAgMS4wOSwtMC41MzkgMS4wOSwtMS4wOSAwLC0wLjUzOSAtMC41MzksLTEuMDkgLTEuMDksLTEuMDkgeiBtIDMuMTgsMCBjIC0wLjUzOSwwIC0xLjA5LDAuNTM5IC0xLjA5LDEuMDkgMCwwLjUzOSAwLjUzOSwxLjA5IDEuMDksMS4wOSBoIDAuMSBjIDAuNTM5LDAgMS4wOSwtMC41MzkgMS4wOSwtMS4wOSAwLC0wLjUzOSAtMC41MzksLTEuMDkgLTEuMDksLTEuMDkgeiBtIDMuMTgsMCBjIC0wLjUzOSwwIC0xLjA5LDAuNTM5IC0xLjA5LDEuMDkgMCwwLjUzOSAwLjUzOSwxLjA5IDEuMDksMS4wOSBoIDAuMSBjIDAuNTM5LDAgMS4wOSwtMC41MzkgMS4wOSwtMS4wOSAwLC0wLjUzOSAtMC41MzksLTEuMDkgLTEuMDksLTEuMDkgeiIvPgo8L3N2Zz4K');
}

/* Archive/Compressed Files */
.file-icon-application-zip,
.file-icon-application-x-zip-compressed,
.file-icon-application-x-7z-compressed,
.file-icon-application-x-rar-compressed,
.file-icon-application-gzip {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmVyc2lvbj0iMSI+CiA8cmVjdCBzdHlsZT0ib3BhY2l0eTowLjIiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgeD0iNCIgeT0iNSIgcng9IjQiIHJ5PSI0Ii8+CiA8cmVjdCBzdHlsZT0iZmlsbDojNGNhZjUwIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHg9IjQiIHk9IjQiIHJ4PSI0IiByeT0iNCIvPgogPHJlY3Qgc3R5bGU9Im9wYWNpdHk6MC4yIiB3aWR0aD0iOCIgaGVpZ2h0PSIxOSIgeD0iMjAiIHk9IjQiLz4KIDxwYXRoIHN0eWxlPSJvcGFjaXR5OjAuMjtmaWxsOiNmZmZmZmYiIGQ9Ik0gOCA0IEMgNS43ODQgNCA0IDUuNzg0IDQgOCBMIDQgOSBDIDQgNi43ODQgNS43ODQgNSA4IDUgTCA0MCA1IEMgNDIuMjE2IDUgNDQgNi43ODQgNDQgOSBMIDQ0IDggQyA0NCA1Ljc4NCA0Mi4yMTYgNCA0MCA0IEwgOCA0IHoiLz4KIDxyZWN0IHN0eWxlPSJmaWxsOiNmZmZmZmYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjIyIiB5PSIxOCIvPgogPHBhdGggc3R5bGU9ImZpbGw6IzRiNGI0YiIgZD0ibSAyNCwxOCBjIDMsMCAzLDQgNCw0IHYgNSBjIDAsMC41NTQgLTAuNDQ2LDEgLTEsMSBoIC02IGMgLTAuNTU0LDAgLTEsLTAuNDQ2IC0xLC0xIHYgLTUgYyAxLDAgMSwtNCA0LC00IHoiLz4KIDxyZWN0IHN0eWxlPSJmaWxsOiNmZmZmZmYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjI0IiB5PSIxNiIvPgogPHJlY3Qgc3R5bGU9ImZpbGw6I2ZmZmZmZiIgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iMjIiIHk9IjE0Ii8+CiA8cmVjdCBzdHlsZT0iZmlsbDojZmZmZmZmIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIyNCIgeT0iMTIiLz4KIDxyZWN0IHN0eWxlPSJmaWxsOiNmZmZmZmYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjIyIiB5PSIxMCIvPgogPHJlY3Qgc3R5bGU9ImZpbGw6I2ZmZmZmZiIgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iMjQiIHk9IjgiLz4KIDxyZWN0IHN0eWxlPSJmaWxsOiNmZmZmZmYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjIyIiB5PSI2Ii8+CiA8cmVjdCBzdHlsZT0iZmlsbDojZmZmZmZmIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIyNCIgeT0iNCIvPgogPHJlY3Qgc3R5bGU9ImZpbGw6I2ZmZmZmZiIgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iMjIiIHk9IjIiLz4KIDxyZWN0IHN0eWxlPSJmaWxsOiNmZmZmZmYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjI0IiB5PSIwIi8+CiA8cmVjdCBzdHlsZT0iZmlsbDojZmZmZmZmIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIyMiIgeT0iLTIiLz4KIDxyZWN0IHN0eWxlPSJmaWxsOiNmZmZmZmYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjI0IiB5PSItNCIvPgogPHJlY3Qgc3R5bGU9ImZpbGw6I2ZmZmZmZiIgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iMjIiIHk9Ii02Ii8+CiA8cmVjdCBzdHlsZT0iZmlsbDojZmZmZmZmIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIyNCIgeT0iLTgiLz4KIDxyZWN0IHN0eWxlPSJmaWxsOiNmZmZmZmYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjIyIiB5PSItMTAiLz4KIDxyZWN0IHN0eWxlPSJmaWxsOiNmZmZmZmYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjI0IiB5PSItMTIiLz4KIDxyZWN0IHN0eWxlPSJmaWxsOiNmZmZmZmYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjIyIiB5PSItMTQiLz4KIDxyZWN0IHN0eWxlPSJmaWxsOiNmZmZmZmYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjI0IiB5PSItMTYiLz4KIDxyZWN0IHN0eWxlPSJmaWxsOiNmZmZmZmYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjIyIiB5PSItMTgiLz4KIDxyZWN0IHN0eWxlPSJmaWxsOiNmZmZmZmYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjI0IiB5PSItMjAiLz4KPC9zdmc+Cg==');
}

/* HTML/CSS Files */
.file-icon-text-html,
.file-icon-text-css,
.file-icon-application-json,
.file-icon-application-xml,
.file-icon-text-xml {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmVyc2lvbj0iMSI+CiA8cGF0aCBzdHlsZT0ib3BhY2l0eTowLjIiIGQ9Ik0gMTAsNSBDIDguODkyLDUgOCw1Ljg5MiA4LDcgdiAzNiBjIDAsMS4xMDggMC44OTIsMiAyLDIgaCAyOCBjIDEuMTA4LDAgMiwtMC44OTIgMiwtMiBWIDE3IEwgMjksMTYgMjgsNSBaIi8+CiA8cGF0aCBmaWxsPSIjZTRlNGU0IiBkPSJtMTAgNGMtMS4xMDggMC0yIDAuODkyLTIgMnYzNmMwIDEuMTA4IDAuODkyIDIgMiAyaDI4YzEuMTA4IDAgMi0wLjg5MiAyLTJ2LTI2bC0xMS0xLTEtMTF6Ii8+CiA8cGF0aCBmaWxsPSIjZmZmIiBvcGFjaXR5PSIuMiIgZD0ibTEwIDRjLTEuMTA4IDAtMiAwLjg5Mi0yIDJ2MWMwLTEuMTA4IDAuODkyLTIgMi0yaDE4bDExIDExaDFsLTEyLTEyeiIvPgogPHBhdGggc3R5bGU9Im9wYWNpdHk6MC4yIiBkPSJtIDI4LDUgdiAxMCBjIDAsMS4xMDQ2IDAuODk1NDMsMiAyLDIgaCAxMCB6Ii8+CiA8cGF0aCBmaWxsPSIjZmFmYWZhIiBkPSJtMjggNHYxMGMwIDEuMTA0NiAwLjg5NTQzIDIgMiAyaDEwbC0xMi0xMnoiLz4KIDxwYXRoIHN0eWxlPSJvcGFjaXR5OjAuNSIgZD0ibSAxNSwzNyB2IC0yIGggMTEgdiAyIHogbSAwLC00IHYgLTIgaCAxOCB2IDIgeiBtIDAsLTQgdiAtMiBoIDE4IHYgMiB6IG0gMCwtNCB2IC0yIGggMTggdiAyIHoiLz4KPC9zdmc+Cg==');
}

/* Generic fallback icon */
.file-icon-application-octet-stream,
.file-icon-default {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmVyc2lvbj0iMSI+CiA8cGF0aCBzdHlsZT0ib3BhY2l0eTowLjIiIGQ9Ik0gMTAsNSBDIDguODkyLDUgOCw1Ljg5MiA4LDcgdiAzNiBjIDAsMS4xMDggMC44OTIsMiAyLDIgaCAyOCBjIDEuMTA4LDAgMiwtMC44OTIgMiwtMiBWIDE3IEwgMjksMTYgMjgsNSBaIi8+CiA8cGF0aCBmaWxsPSIjZTRlNGU0IiBkPSJtMTAgNGMtMS4xMDggMC0yIDAuODkyLTIgMnYzNmMwIDEuMTA4IDAuODkyIDIgMiAyaDI4YzEuMTA4IDAgMi0wLjg5MiAyLTJ2LTI2bC0xMS0xLTEtMTF6Ii8+CiA8cGF0aCBmaWxsPSIjZmZmIiBvcGFjaXR5PSIuMiIgZD0ibTEwIDRjLTEuMTA4IDAtMiAwLjg5Mi0yIDJ2MWMwLTEuMTA4IDAuODkyLTIgMi0yaDE4bDExIDExaDFsLTEyLTEyeiIvPgogPHBhdGggc3R5bGU9Im9wYWNpdHk6MC4yIiBkPSJtIDI4LDUgdiAxMCBjIDAsMS4xMDQ2IDAuODk1NDMsMiAyLDIgaCAxMCB6Ii8+CiA <cGF0aCBmaWxsPSIjZmFmYWZhIiBkPSJtMjggNHYxMGMwIDEuMTA0NiAwLjg5NTQzIDIgMiAyaDEwbC0xMi0xMnoiLz4KPC9zdmc+Cg==');
}

/* Beautiful UI Icons from Papirus */

/* Base icon styles */
.icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

/* Icon-specific styles */
.icon-upload {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' version='1.1'%3E%3Cpath style='fill:%23ffffff' d='M 11,2 7,7 h 3 v 7 h 2 V 7 h 3 z'/%3E%3C/svg%3E");
}

.icon-download {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' version='1.1'%3E%3Cpath style='fill:%23ffffff' d='M 11,2 7,7 h 3 v 7 h 2 V 7 h 3 z' transform='rotate(180 11 11)'/%3E%3C/svg%3E");
}

.icon-delete {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' version='1.1'%3E%3Cpath style='fill:%23ffffff' d='m 8,5 3,3 3,-3 2,2 -3,3 3,3 -2,2 -3,-3 -3,3 -2,-2 3,-3 -3,-3 z'/%3E%3C/svg%3E");
}

.icon-language {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' version='1.1'%3E%3Cpath style='fill:%23ffffff' d='m 11,2 c -4.97,0 -9,4.03 -9,9 0,4.97 4.03,9 9,9 4.97,0 9,-4.03 9,-9 0,-4.97 -4.03,-9 -9,-9 z m -1,2 h 2 v 5 h -2 z m 2,6 4,4 -2,2 -4,-4 z m -4,0 -4,4 -2,-2 4,-4 z'/%3E%3C/svg%3E");
}

.icon-folder {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' version='1'%3E%3Cpath style='fill:%235294e2' d='m 2,3 v 16 h 18 V 5 H 11 L 9,3 Z'/%3E%3C/svg%3E");
}

.icon-image {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiIgdmlld0JveD0iMCAwIDIyIDIyIj48cGF0aCBmaWxsPSIjNGFhZWY1IiBkPSJNIDIgMiBWIDIwIEggMjAgViAyIEggMiBaIE0gNCAxMCBWIDQgSCAxMCBWIDYgSCA4IFYgOCBIIDYgViAxMCBIIDQgWiBNIDEyIDQgSCAxOCBWIDEwIEggMTYgViA2IEggMTQgViA4IEggMTIgViA0IFogTSA0IDEyIEggMTAgViAxOCBIIDQgViAxMiBaIE0gMTIgMTIgSCAxOCBWIDE4IEggMTIgViAxMiBaIi8+PHBhdGggZmlsbD0iIzMzODZkMyIgZD0iTSA2IDEyIFYgMTQgSCA4IFYgMTYgSCAxMCBWIDEyIEggNiBaIE0gMTQgMTQgSCAxNiBWIDEyIEggMTQgViAxNCBaIE0gMTIgMTYgSCAxNCBWIDE0IEggMTIgViAxNiBaIEggMTYgViAxNCBIIDE4IFYgMTYgSCAxNiBaIE0gMTQgMTggSCAxNiBWIDE2IEggMTQgViAxOCBaIE0gMTIgMTYgSCAxNCBWIDE0IEggMTIgViAxNiBaIi8+PC9zdmc+');
}

.icon-paint-brush {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiIgdmlld0JveD0iMCAwIDIyIDIyIj48cGF0aCBmaWxsPSIjZmY2YzJiIiBkPSJNIDMgMiBWIDEyIEggNCBWIDMgSCA1IFYgNCBIIDYgViA1IEggNyBWIDYgSCA4IFYgNyBIIDkgViA4IEggMTAgViA5IEggMTEgViAxMCBIIDEyIFYgMTEgSCAxMyBWIDEyIEggMTQgViAxMyBIIDE1IFYgMTQgSCAxNiBWIDE1IEggMTcgViAxNiBIIDE4IFYgMTcgSCAxOSBWIDE4IEggMjAgViAyMCBIIDEyIFYgMTkgSCAxMSBWIDE4IEggMTAgViAxNyBIIDkgViAxNiBIIDggViAxNSBIIDcgViAxNCBIIDYgViAxMyBIIDUgViAxMiBIIDQgViAxMSBIIDMgViAyIFoiLz48cGF0aCBmaWxsPSIjZmY4MjAwIiBkPSJNIDQgMyBWIDEyIEggNSBWIDExIEggNiBWIDEwIEggNyBWIDkgSCA4IFYgOCBIIDkgViA3IEggMTAgViA2IEggMTEgViA1IEggMTIgViA0IEggMTMgViA1IEggMTQgViA2IEggMTUgViA3IEggMTYgViA4IEggMTcgViA5IEggMTggViAxMCBIIDE5IFYgMTEgSCAyMCBWIDEyIEggMTkgViAxMSBIIDE4IFYgMTAgSCAxNyBWIDkgSCAxNiBWIDggSCAxNSBWIDcgSCAxNCBWIDYgSCAxMyBWIDUgSCAxMiBWIDQgSCAxMSBWIDUgSCAxMCBWIDYgSCA5IFYgNyBIIDggViA4IEggNyBWIDkgSCA2IFYgMTAgSCA1IFYgMTEgSCA0IFYgMyBaIi8+PC9zdmc+');
}

.icon-github {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiIgdmlld0JveD0iMCAwIDIyIDIyIj48cGF0aCBmaWxsPSIjMjEyMTIxIiBkPSJNIDExIDIgQSA5IDkgMCAwIDAgMiAxMSBBIDkgOSAwIDAgMCAyLjcgMTMuNSBBIDkgOSAwIDAgMCA0LjkgMTYuNyBBIDkgOSAwIDAgMCA3LjEgMTguOSBBIDkgOSAwIDAgMCAxMC41IDE5LjMgQSA5IDkgMCAwIDAgMTMgMjAgQSA5IDkgMCAwIDAgMjAgMTEgQSA5IDkgMCAwIDAgMTEgMiBaIE0gMTEgNCBBIDcgNyAwIDAgMSAxOCAxMSBBIDcgNyAwIDAgMSAxMy44IDE3LjYgQyAxMy44IDE3IDE0IDE2LjMgMTQgMTUuNSBDIDE0IDE0LjcgMTMuOCAxMy45IDEzLjYgMTMuMiBDIDE0LjMgMTMuMSAxNC45IDEyLjcgMTUuNCAxMi4xIEMgMTYgMTEuNSAxNi4zIDEwLjcgMTYuMyA5LjggQyAxNi4zIDguOSAxNiA4LjEgMTUuNCA3LjUgQyAxNS42IDYuOSAxNS42IDYuMiAxNS40IDUuNSBDIDE0LjcgNS4zIDEzLjkgNS42IDEzLjIgNiBDIDEyLjUgNS44IDExLjggNS43IDExIDUuNyBDIDEwLjIgNS43IDkuNSA1LjggOC44IDYgQyA4LjEgNS42IDcuMyA1LjMgNi42IDUuNSBDIDYuNCA2LjIgNi40IDYuOSA2LjYgNy41IEMgNiA4LjEgNS43IDguOSA1LjcgOS44IEMgNS43IDEwLjcgNiAxMS41IDYuNiAxMi4xIEMgNy4xIDEyLjcgNy43IDEzLjEgOC40IDEzLjIgQyA4LjIgMTMuOSA4IDE0LjcgOCAxNS41IEMgOCAxNi4zIDguMiAxNyA4LjIgMTcuNiBBIDcgNyAwIDAgMSA0IDE1LjYgQSA3IDcgMCAwIDEgNCAxMSBBIDcgNyAwIDAgMSAxMSA0IFoiLz48L3N2Zz4=');
}

/* Button styles with icons */
.btn-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    background: #4CAF50;
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-with-icon:hover {
    background: #45a049;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.btn-with-icon:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Icon-only buttons */
.btn-icon-only {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: rgba(255,255,255,0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-icon-only:hover {
    background: rgba(255,255,255,0.2);
    transform: scale(1.1);
}

/* Language Selector */
#language-selector {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

#language-select {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #4CAF50;
    border-radius: 8px;
    padding: 8px 12px 8px 35px; /* Add padding for the flag */
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 20px 15px;
}

#language-select:hover {
    background: rgba(255, 255, 255, 1);
    border-color: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#language-select:focus {
    outline: none;
    border-color: #45a049;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
}

/* Language selector with flags */
.language-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.language-option .flag-icon {
    width: 20px;
    height: 15px;
    background-size: cover;
    border-radius: 2px;
}

.flag-icon-fr { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjxwYXRoIGZpbGw9IiNFRDI5M0IiIGQ9Ik0wIDBoM3YySDB6Ii8+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTIgMGgxdjJIMnoiLz48cGF0aCBmaWxsPSIjMDAyMzk1IiBkPSJNMCAwaDF2MkgweiIvPjwvc3ZnPg=='); }
.flag-icon-en { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDMiPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0wIDBoNXYzSDB6Ii8+PHBhdGggc3Ryb2tlPSIjQzgzNzM4IiBzdHJva2Utd2lkdGg9IjEiIGQ9Ik0wIDEuNWg1TTIuNSAwdiI+PC9wYXRoPjxwYXRoIHN0cm9rZT0iIzAwMjQ3RCIgc3Ryb2tlLXdpZHRoPSIuNSIgZD0iTTIuNSAwdiI+PC9wYXRoPjxwYXRoIHN0cm9rZT0iI0M4MzczOCIgc3Ryb2tlLXdpZHRoPSIuNSIgZD0iTTAgMS41aCI+PC9wYXRoPjxwYXRoIGZpbGw9IiMwMDI0N0QiIGQ9Ik0wIDBoMnYxSDB6Ii8+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTEgMGgxLjc1djFoLTEuNzV6Ii8+PHBhdGggZmlsbD0iI0M4MzczOCIgZD0iTTEuMjUgMGgxLjV2MWgtMS41eiIvPjwvc3ZnPg=='); }
.flag-icon-es { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjxwYXRoIGZpbGw9IiNDNjBCODQiIGQ9Ik0wIDBoM3YySDB6Ii8+PHBhdGggZmlsbD0iI0ZGQzQ0RCIgZD0iTTAgMC41aDN2MUgweiIvPjwvc3ZnPg=='); }
.flag-icon-de { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDMiPjxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik0wIDBoNXYzSDB6Ii8+PHBhdGggZmlsbD0iI0ZGMDAwMCIgZD0iTTAgMWg1djJoLTV6Ii8+PHBhdGggZmlsbD0iI0ZGQ0YwMCIgZD0iTTAgMmg1djFoLTV6Ii8+PC9zdmc+'); }
.flag-icon-it { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjxwYXRoIGZpbGw9IiMwMDkyNDYiIGQ9Ik0wIDBoM3YySDB6Ii8+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTEgMGgxdjJIMXoiLz48cGF0aCBmaWxsPSIjQ0UzNzNGIiBkPSJNMCAwaDF2MkgweiIvPjwvc3ZnPg=='); }
.flag-icon-pt { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjxwYXRoIGZpbGw9IiMwMDYyMzMiIGQ9Ik0wIDBoM3YySDB6Ii8+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTIgMGgxdjJIMnoiLz48cGF0aCBmaWxsPSIjRkYwMDAwIiBkPSJNMCAwaDF2MkgweiIvPjwvc3ZnPg=='); }
.flag-icon-ar { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjxwYXRoIGZpbGw9IiMwMDY3NDciIGQ9Ik0wIDBoM3YySDB6Ii8+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTAgMC42NmgzVjEuMzRIMHoiLz48L3N2Zz4='); }
.flag-icon-zh { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjxwYXRoIGZpbGw9IiNFRTEwMjEiIGQ9Ik0wIDBoM3YySDB6Ii8+PHBhdGggZmlsbD0iI0ZGRkYwMCIgZD0iTTAuNiAwLjRsMC4xODIgMC41NjFINy4wNmwwLjE4Mi0wLjU2MWgtMC40NDdsLTAuMTgyIDAuNTYxaC0wLjQ0N3YtMC41NjF6bS0wLjYgMC40aDAuMnYwLjJoLTAuMnptLTAuMiAwLjJoMC4ydi0wLjJoLTAuMnptMC4yIDAuMmgwLjJ2LTAuMmgtMC4yem0wLjIgMC4yaDAuMnYtMC4yaC0wLjJ6Ii8+PC9zdmc+'); }

/* Improved File Select Button */
#fileSelect {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

#fileSelect:hover {
    background: linear-gradient(135deg, #45a049, #3d8b40);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(76, 175, 80, 0.4);
}

#fileSelect:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

/* Footer Links */
.footer-links {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    z-index: 0;
}

.footer-left,
.footer-right {
    display: flex;
    gap: 10px;
}

.footer-link {
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.footer-link:hover {
    background: rgba(255, 255, 255, 1);
    color: #4CAF50;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Error page styles */
.error-container {
    text-align: center;
    padding: 40px 20px;
}

.error-title {
    font-size: 8rem;
    font-weight: bold;
    color: #666;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.error-container h2 {
    font-size: 2rem;
    color: #333;
    margin: 20px 0;
}

.error-message {
    font-size: 1.1rem;
    color: #666;
    margin: 30px 0;
    line-height: 1.6;
}

.error-actions {
    margin-top: 40px;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #4CAF50;
    color: white;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.btn-primary:hover {
    background: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
    color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    #language-selector {
        top: 10px;
        right: 10px;
    }
    
    #language-select {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .footer-links {
        padding: 15px;
    }
    
    .footer-link {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .container {
        margin: 20px auto;
        padding: 15px;
    }
    
    #fileSelect {
        padding: 10px 20px;
        font-size: 14px;
    }
}