.ariaOnly {
  position: absolute;
  clip-path: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px); // legacy browsers
}

:root {
    height: 100dvh; // workarounded chrome109-mobile's problem with sticky-bottom bar moving when scrolling
    --bg: #fff;
    --text: #555;
    --text-high-contrast: #111;
    --ghost-contrast: #8882;
    --ghost-contrast-alt: #eee;
    --faint-contrast: #ddd;
    --mild-contrast: #aaa;
    --good-contrast: #444;
    --button-bg: #6080aa;
    --button-text: #eaeaea;
    --focus-color: #468;
    --separator: " – "; // fallback
    --success: #8c8;
    --warning: #cc8;
    --error: #c88;
    @supports (content: "" / "") {
        --separator: " – " / ""; // skip for screen-reader
    }
    .highlightedText { color: #0006; text-shadow: 0 0 3px #0006; }
    .theme-dark {
        --bg: #000;
        --text: #999;
        --text-high-contrast: #eee;
        --ghost-contrast-alt: #181818;
        --faint-contrast: #2d2d2d;
        --good-contrast: #aaa;
        --button-bg: #345;
        --button-text: #999;
        --success: #272;
        --warning: #772;
        --error: #a22;

        color-scheme: dark;
        .highlightedText { color: #fff; text-shadow: 0 0 3px #fff; }
        a { color:#8ac; }
        .dialog-closer { background: #633 }
        .dialog-icon {
            color: #ccc;
            .icon { color: #aaa; }
        }
        .dialog-backdrop { background: #333b; }
        .error-msg { color: #b88; background-color: #623; }
        button.toggled, a.toggled { color: #eee;
            text-shadow: 0 0 3px #fff;
        }
    }
}
body {
    background-color: var(--bg);
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body, button, select, input { font-size: 12pt; }
.list-wrapper {
    max-width: 54em;
    margin: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body, input {
    color: var(--text);
}
code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}
input:not([type=checkbox],[type=range]), select, textarea {
    padding: 0.3em 0.4em;
    border-radius: 0.5em;
    background: var(--bg);
    border-color: var(--mild-contrast);
    color: var(--good-contrast);
    max-width: 100%; box-sizing: border-box; // avoid scrolling
    width: 100%;
}
input[type=range] {
    width: calc(100% - 1px); // chrome116 on android shows a scrollbar because of that 1px
}
input[type=checkbox] {
    transform: scale(1.7);
    accent-color: var(--button-bg);
}
textarea { font-size: 14pt }
label input[type=checkbox] {
    margin-right: .8em;
}
select { text-align: center; } // it is surely cooler on the options dialog

.hidden { display: none !important }

[class^="fa-"]:before, [class*=" fa-"]:before { /* don't need extra margin on fontello icons */
    margin: 0;
}
.icon {
    font-size: 1.2em;
    height: 1.2em; width: 1.4em; // give similar size to <img> icons

    display: inline-block; text-align: center; // same size for font icons
}
img.file-icon { height: 1em; }
.file-icon {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: text-bottom;
}

.icon.mirror:before { transform: scaleX(-1); }
a {
    text-decoration: none;
    color: var(--button-bg);
}
button {
    background-color: var(--button-bg);
    color: var(--button-text);
    padding: .5em;
    &:not(.before-sliding) { min-width: min-content; }
    &.small { padding: 0 0.4em; height: 30px; }
    .icon { position: relative; top: .05em; margin: -.2em 0; }
    border: transparent;
    text-decoration: none;
    border-radius: 0.3em;
    vertical-align: middle;
    cursor: pointer;
    &:hover { outline: 1px solid var(--mild-contrast); }
    transition: background-color .5s;
    &[disabled] {
        background-color: var(--faint-contrast);
    }
}
button.toggled {
    color: #fff;
    text-shadow: 0 0 3px #fff;
}
a.toggled {
    color: #223;
    text-shadow: 0 0 5px #223;
}
button, .breadcrumb { /* consistent focus color */
    &:focus-visible {
        outline: 3px solid var(--focus-color);
    }
}
a>button { width: 100%; height: 100%;  } /* link buttons, fill parent space */
input, select, ul a {
    &:focus-visible {
        border-radius: .3em;
        border-color: transparent;
        outline: 2px solid var(--focus-color);
    }
}

.icon-button {
    padding: .1em;
    font-size: 104%; height: 1.8em; // same height as text buttons (30px)
    width: 2em;
}

.error-msg {
    background-color: #faa;
    color: #833;
    padding: .5em 1em;
}
.hide-back {
    background-color: var(--bg);
}
header {
    @extend .hide-back;
    position: sticky;
    top: 0;
    padding: .2em .1em;
    z-index: 3; // necessary to not be covered by checkboxes
}

kbd {
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
    color: #333;
    display: inline-block;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;
    margin-right: .5em;
}

.before-sliding {
    width: 0 !important;
    flex: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transition: flex .5s;
}
.show-sliding {
    transition: flex .5s;
    overflow: clip;
    flex: 1;
    white-space: nowrap;
}

.ani-working { animation:1s blink infinite }

@keyframes blink {
    0% {opacity: 1}
    50% {opacity: 0.2}
}
@keyframes spin {
    100% { transform: rotate(360deg); }
}
@keyframes fade-in {
    0% {opacity: 0}
    100% {opacity: 1}
}

.spinner, .icon.spinner:before {
    animation: 1.5s spin infinite linear;
    display: inline-flex; justify-content: center; align-items: center; width: min-content;
}

.breadcrumb {
    padding: 0.1em 0.6em 0.2em;
    line-height: 1.8em;
    border-radius: 0.7em;
    background-color: var(--button-bg);
    color: var(--button-text);

    border-top: 1px solid #666;
    margin-right: -0.1em;
    &:nth-child(-n+3) .icon {
        padding: 0 0.2em;
    }
}
#folder-stats, #filter-bar>span {
    font-size: 90%;
}
#folder-stats {
    margin-left: .5em;
    line-height: 2em;
    float: right;
    .icon {
        margin-right: .3em;
    }
}
#filter {
    flex: 1;
    box-sizing: border-box;
}
#filter-bar {
    display: flex;
    align-items: center;
    gap: .8em;
    margin: 0.2em 0 0;
    padding: 2px 0 1px 3px;
    height: 1.8em; /* necessary to animate displaying */
    input[type=checkbox] { margin-top: .3em; }
    span:empty { display:none } /* avoid flex-gap */
}

ul.dir {
    padding: 0;
    margin: 0;
    clear: both;
    &>p { text-align: center; }
    li {
        display: block;
        list-style-type: none;
        padding: 0.3em 0.3em 0.4em;
        border-bottom: 1px solid var(--faint-contrast);
        &:nth-of-type(odd) { background-color: var(--ghost-contrast); }

        .container-folder { font-size: smaller }

        input[type=checkbox] {
            margin-right: 1em;
        }
        .link-wrapper {
            @media (hover: none) {
                .popup-menu-button { display: none }
            }
            @media (hover: hover) {
                &:not(:hover):not(:focus,:focus-within) .popup-menu-button { opacity: .001; } // use opacity, as jaws is not setting :focus
                &:hover { padding: 1em; margin: -1em; // add margin to avoid leaving the hover unintentionally. Using this on @media(hover:none) will result in some taps to be missed. It happened on a long folder with no spaces in the name to wrap.
                    .popup-menu-button { z-index: 1} // without this, attempting to hover from the name to the menu-button will easily lose the :hover if a comment is present
                }
            }
            a {
                &:last-of-type {
                    word-break: break-word;
                    padding-right: .5em;
                }
                .icon {
                    margin-right: .5em;
                    display: inline-block;
                    text-align: center;
                }
                img.icon, video.icon { // same alignment as font icons
                    vertical-align: bottom;
                    position: relative;
                    top: 1px;
                }
                &:hover {
                    text-decoration: underline;
                }
            }
        }
        .entry-panel {
            float: right;
            padding-top: 0.3em;
            display: flex;
            align-items: center;
            .icon-button {
                margin: -3px 0 -3px 0.4em;
                font-size: 0.7em;
                width: 2.4em;
            }
            .entry-details {
                font-size: 90%;
                margin-left: 4px;
                font-variant-numeric: tabular-nums; /* trick to get stuff aligned */

                .entry-size-unit {
                    margin-left: .3em;
                }
            }
        }

        &>div:last-of-type { clear:both }
        &.page-separator {
            margin-top: .7em;
            position: relative;
            &::before {
                content: attr(label);
                position: absolute;
                top: -1.5em;
                font-size: smaller;
                margin-left: calc(50% - 1em);
                opacity: .9;
            }
        }
    }
}
.entry-comment {
    display: inline;
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: .5em; // affecting only the layout of the current-folder-comment
    &::before, &::after {
        font-size: 1.5em;
        font-family: serif;
        line-height: 1px;
        position: relative;
    }
    &::before {
        content: "“";
        margin-right: 0.1em;
        top: 0.2em;
    }
    &::after {
        content: "„";
        top: -0.1em;
        margin-left: 0.1em;
    }
}

#menu-bar {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    &>* {
        flex: 1;
        margin: 0.1em; // using margin instead of gap because of the 0-width element that would produce extra gap
        &:first-child { margin-left: 0 }
        &:last-child { margin-right: 0 }
    }
    button {
        padding: min(1vh, 0.5em) 0; // avoid wasting too much vertical space, and no need for horizontal padding as we are using flex to grow
    }
}
#searched {
    margin: .2em;
}
#user-panel {
    display:flex;
    flex-direction: column;
    gap: 1em;
    a>button {
        width: 100%;
    }
}

ul { padding-left: 2em }

button .icon + .label {
    cursor: inherit;
    margin-left: .4em;
}

.dialog-backdrop.working {
    font-size: 5em;
    animation: 1s fade-in;
}
.dialog-content {
    padding: .2em; /* give space for focus outline */
}
.dialog-alert .dialog-content {
    text-align: center;
    p { text-align: left; display: inline-block; }
    ul { text-align: left; } // bullet points should be aligned
}

.dialog {
    min-width: 11em;
    --color: var(--button-bg);
}
.dialog-icon .icon {
    margin-left: -1px; font-size:95%;
    margin-top: 0.4em; // useful for and affecting only img icons
    border-radius: 0.6em 0;
}

#paging {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: .1em;
    background-color: var(--bg);
    padding: 0 0.2em 0.2em;
    &>button { z-index: 1; }
    button { box-shadow: 0 0 .3em .3em #0003; }
    #paging-middle {
        padding: 0 0.5em;
        margin: 0 -0.3em;
        display: flex;
        gap: .5em;
        flex: 1;
        overflow-x: auto;
    }
    #paging-middle>button {
        flex: 1;
        min-width: unset;
        padding-top: 0; padding-bottom: 0; /* reduce vertically in case a horizontal scrolling bar is needed */
    }
    button {
        background: var(--button-bg);
        text-align: center;
        white-space: nowrap;
        padding: .5em; /* fit more buttons on screen */
    }
}

.upload-toolbar {
    @extend .hide-back;
    position: sticky;
    top: -4px; padding-top: 1px; // workaround: without this, the scrolling list behind is visible above (vertically, not z-index)
    z-index: 3; // necessary to not be covered by icon-buttons
    box-shadow: 0 0 .3em .3em var(--bg);
}
.upload-progress::before { content: var(--separator); }
.entry-size::after { content: var(--separator) }

.upload-progress {
    min-width: 4em;
    display: inline-block;
    margin-left: 0.5em;
}
.upload-progress-bar {
    display: block;
    width: 100%;
}
.upload-list {
    margin-top: .5em;
    td:nth-child(1) { width: 0; }
    td:nth-child(2) { text-align: right; width: 0; white-space: nowrap; padding-left: 0.5em; }
    td:nth-child(3) { padding: .2em .5em; word-break: break-word; }
}
.nowrap { white-space: nowrap }

.login-dialog {
    form {
        display: flex;
        flex-direction: column;
        gap: 1.2em;
    }
    label {
        display: block;
        margin-bottom: .5em;
        margin-left: .1em;
    }
}

.miss-perm  { margin: 0 0.3em }

.popup-menu-button {
    font-size: .8em; padding: .2em .3em; position: absolute; opacity: .8; white-space: nowrap;
    &:hover,&:focus { opacity: 1 }
}

.file-dialog .dialog { min-width: 13em; } /* more room for title */
.file-dialog-properties {
    word-break: break-word;
    line-height: 1.5em;
    margin: 0;
    dt { font-weight: bold; }
    dd { margin-left: 1.5em; }
}
.file-menu {
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px solid var(--faint-contrast);

    display: flex;
    flex-direction: column;
    gap: .7em 1em;
    a {
        display: flex;
        align-items: flex-start;
        label {
            cursor: pointer;
            margin-top: .1em;
            small { display: block }
        }
        .icon { margin-right: 0.5em; }
        &:hover { @extend .highlightedText }
    }
}

.unauthorized { text-align: center }

#clipBar {
    position: sticky; bottom: 0;
    background: var(--bg);
    box-shadow: 0 0 .3em .3em var(--bg);

    display: flex; align-items: center; gap: 0.5em;
    margin: 0 1px;
}
#clipboard-content {
    text-align: left;
    li:first-of-type { margin-top: .5em }
}

.tiles-mode {
    max-width: none;
    @media (min-width: 42em) {
        margin: 0 1em;
    }
    --tile-size: 5;
    --name-lines: 3;
    --name-height: calc(4.7em + var(--tile-size) * .4em + 1.2em * var(--name-lines));
    --tile-width: calc(5em + 1em * var(--tile-size));

    ul.dir {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--tile-width),1fr));
        grid-auto-rows: calc(var(--name-height) + 1.3em);
        gap: 0 20px;

        li {
            text-align: center;
            position: relative;
            display: flex;
            flex-direction: column;
            border-bottom: none;
            overflow-x: clip;
            padding: .5em 0 0;

            .link-wrapper {
                &:not(:hover) {
                    max-height: var(--name-height);
                    display: block;
                    display: -webkit-box;
                    overflow: hidden;
                    -webkit-line-clamp: calc(var(--name-lines) + 1); // + icon's line
                    -webkit-box-orient: vertical;
                }
                a {
                    &:last-of-type { padding: 0; }
                    span { display: block; }
                    .icon.icon { font-size: calc(1.2rem + .6rem * var(--tile-size)); }
                    img.icon, video.icon {
                        width: auto;
                        height: 1em;
                        padding: 0.1em 0;
                    }
                    .icon {
                        font-size: 4rem;
                        display: block;
                        margin: auto; // good for both font and img icons
                    }
                }

                &:hover {
                    overflow: visible;
                    display: block;
                    z-index: 1;
                    .icon::before { text-decoration: none; }
                }
            }
            .link-wrapper:hover {
                padding: 0; margin: 0;
            }
            &:nth-of-type(odd) {
                background-color: inherit; // to avoid checkerboard effect
            }
            .entry-panel {
                justify-content: center;
                font-size: 10pt;
            }
            .entry-details {
                font-size: 80%;
            }
            &.page-separator::before {
                content: '';
            }
            input[type=checkbox] {
                margin: 0;
                position: absolute;
                top: 0.3em;
                right: 1em;
            }

            .link-wrapper a { display:inline } // avoid overlapping name and details
            &:hover {
                --bg: var(--ghost-contrast-alt);
                background: var(--bg); // highlight whole tile
                .link-wrapper, .entry-panel {
                    z-index: 1; background: var(--bg); // cover underlying elements of other tiles, in case it's overflowing
                }
                input[type=checkbox] { z-index: 2; } // over link-wrapper, but not over header
                .entry-panel {
                    padding-bottom: 0.3em;
                }
            }
            .entry-comment {
                max-height: 1.2em;
                overflow: hidden;
                margin: 0;
                &:hover {
                    max-height: none;
                    overflow: auto;
                }
            }
        }
    }
    .entry-size::after {
        content: none;
    }
    .entry-ts { display: none; }
    .popup-menu-button {
        position: absolute;
        top: 0;
        left: 0;
    }
    #filter-bar {
        margin-bottom: 1em;
    }
    #paging { z-index: 1 } // avoid being covered by hovered elements

}

#root // heavier selector
.file-show {
    &>div {
        height: 100%;
        width: 100%;
        @media (max-width: 30em) { // portrait mobile
            flex-direction: column-reverse !important; // bar at the bottom, easier on the thumb
        }
    }

    .showing-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .meta-tags {
        position: relative;
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        &>div { position: absolute;
            margin: 1em;
        }
    }
    .showing {
        max-width: calc(100% - min(4vw, var(--nav-size)) * 2); // avoid overlapping of controls and nav buttons
        max-height: 100%;
    }
    .cover {
        position: absolute;
        width: 100%; height: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        z-index: -1; // otherwise firefox
        opacity: .3;
        transition: opacity 1s;
        &.none { opacity: 0; }
    }
    audio.showing { min-width: 60%; }
    audio.showing, // even on mobile, we need the whole thing to control it decently, and nav-s don't seem to be a problem
    img.showing { max-width: 100% } // we are ok with overlapping for simple images
    .main {
        flex: 1; position: relative; max-height: 100%;
        overflow: hidden; // without this <video> can make me go beyond the screen limit
    }
    .freeY, .fullWidth {
        .main { overflow-y: auto; }
        .showing { max-height: initial; margin: auto; }
        .showing-container { overflow: auto; align-items: flex-start; justify-content: flex-start; }
    }
    .fullWidth {
        .showing-container, .showing { width: 100%; }
    }
    --nav-size: 25vh;
    @supports (width: min(1px,2px)) {
        --nav-size: min(25vh, 25vw);
    }
    .nav {
        position: absolute;
        width: .5em; // closer to the edge
        font-size: var(--nav-size); // big
        cursor: pointer;
        opacity: .3;
        -webkit-text-stroke: 2px black;
        user-select: none;
        transition: opacity .3s;
        &:hover { opacity: .7; }
        &.nav-hidden:not(:hover) { opacity: 0 }
    }
    .bar {
        padding: .5em min(2vw, 1em);
        background: var(--bg);
        opacity: .8;
        flex-wrap: wrap;
        &,&>.controls {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: .5em;
        }

        .entry-details { font-size: smaller; margin-left: 1em; }
        .entry-ts { display: inherit; font-size: smaller; }
        .entry-size::after { display: none }
    }
}
.file-show-help {
    kbd { margin: .5em }
    kbd:first-of-type { margin-top: 1em; }
}

@media (min-width: 42em) {
    body {
        /* Works on Firefox */
        scrollbar-width: thin;
        scrollbar-color: var(--button-bg) var(--ghost-contrast);

        /* Works on Chrome, Edge, and Safari */
        &::-webkit-scrollbar {
            width: 12px;
        }
        &::-webkit-scrollbar-track {
            background: var(--ghost-contrast);
        }
        &::-webkit-scrollbar-thumb {
            background-color: var(--button-bg);
            border-radius: 20px;
            border: 1px solid var(--ghost-contrast)
        }
    }
    button { padding: .5em 1em; }
}
@media (max-width: 42em) {
    :root { --ghost-contrast: #8883; } /* phones have different curve */
    body, button, select { font-size: 14pt; }
    #menu-bar, #filter-bar, #clipBar {
        button .icon + .label { display: none } /* icons only */
    }
    #filter-bar {
        margin-top: 0.4em;
        button { // make it same size of top bar
            width: 17.6vw;
            height: 2.3em;
        }
    }
    .breadcrumb {
        word-break: break-all; // solves with very long names without spaces. 'break-word' is nicer but doesn't handle worst cases like /gear/mininova/x/LOOPMASTERS%204Gig%20Pack/LOOPMASTERS_2015/BASS_HOUSE_AND_GARAGE_2_DEMOS/SOUNDS_AND_FX/
        .icon {
            font-size:24px;
        }
    }
    #root>.tiles-mode {
        margin: 0;
    }
}

@media (max-height: 600px) {
    .file-dialog {
        .dialog-content {
            display: flex;
            gap: 3em;
            margin: 1em;
            .file-menu { // move divisor to left
                margin-top: 0;
                padding-top: 0;
                border-top: none;
                margin-left: 2em;
                padding-left: 2em;
                border-left: 1px solid var(--faint-contrast);
            }
        }
    }
}

@media (pointer: coarse) {
    #root>.tiles-mode .file-menu-button { font-size: 1em; margin-top: 0.3em; } // easier to tap
}

@font-face {
  font-family: 'fontello';
  src: url('fontello.woff2?39711601') format('woff2');
  font-weight: normal;
  font-style: normal;
}
[class^="fa-"]:before, [class*=" fa-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.fa-cog:before { content: '\e800'; } /* '' */
.fa-audio:before { content: '\e801'; } /* '' */
.fa-doc:before { content: '\e802'; } /* '' */
.fa-stop:before { content: '\e803'; } /* '' */
.fa-play:before { content: '\e804'; } /* '' */
.fa-music:before { content: '\e805'; } /* '' */
.fa-cancel:before { content: '\e806'; } /* '' */
.fa-edit:before { content: '\e807'; } /* '' */
.fa-check:before { content: '\e808'; } /* '' */
.fa-folder:before { content: '\e809'; } /* '' */
.fa-user:before { content: '\e80a'; } /* '' */
.fa-home:before { content: '\e80b'; } /* '' */
.fa-key:before { content: '\e80c'; } /* '' */
.fa-trash:before { content: '\e80d'; } /* '' */
.fa-to_start:before { content: '\e80e'; } /* '' */
.fa-pause:before { content: '\e80f'; } /* '' */
.fa-to_end:before { content: '\e810'; } /* '' */
.fa-image:before { content: '\e811'; } /* '' */
.fa-camera:before { content: '\e812'; } /* '' */
.fa-search:before { content: '\e813'; } /* '' */
.fa-logout:before { content: '\e814'; } /* '' */
.fa-video:before { content: '\e815'; } /* '' */
.fa-left:before { content: '\e816'; } /* '' */
.fa-lock:before { content: '\e817'; } /* '' */
.fa-reload:before { content: '\e818'; } /* '' */
.fa-cut:before { content: '\e819'; } /* '' */
.fa-shuffle:before { content: '\e81a'; } /* '' */
.fa-spin6:before { content: '\e839'; } /* '' */
.fa-crown:before { content: '\e844'; } /* '' */
.fa-download:before { content: '\f02e'; } /* '' */
.fa-upload:before { content: '\f02f'; } /* '' */
.fa-link:before { content: '\f08e'; } /* '' */
.fa-filter:before { content: '\f0b0'; } /* '' */
.fa-zoom:before { content: '\f0b2'; } /* '' */
.fa-copy:before { content: '\f0c5'; } /* '' */
.fa-menu:before { content: '\f0c9'; } /* '' */
.fa-comment:before { content: '\f0e5'; } /* '' */
.fa-paste:before { content: '\f0ea'; } /* '' */
.fa-fullscreen:before { content: '\f108'; } /* '' */
.fa-quote:before { content: '\f10d'; } /* '' */
.fa-unlink:before { content: '\f127'; } /* '' */
.fa-archive:before { content: '\f1c6'; } /* '' */