@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');

html {
    height: 100%;
    font-size: 0;
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
    background: #131313;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

body {
    min-height: 100%;
    margin: 0;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--theme);
    z-index: 10;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100% - 32px);
    height: calc(100% - 36px);
    margin: 14px 10px 10px 10px;
    border: 6px dashed var(--theme);
    opacity: 0;
    z-index: 10;
    pointer-events: none;
    transition: opacity 250ms;
}

body.dragging::after {
    opacity: 1;
}

body.dragging > .global-actions {
    opacity: 0;
}

body.dragging > .files {
    opacity: 0.3;
}

body.ready:not(.has-file) > .first-upload {
    display: block;
}

body.ready.has-file > .global-actions > .form-files {
    display: inline-flex;
}

body.ready.has-clearable > .global-actions > .clear {
    display: inline-flex;
}

body.ready.has-availables > .global-actions > .archive-link {
    display: inline-flex;
}

body.ready.has-file > .files {
    display: flex;
}

.first-upload {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.first-upload > .indicator {
    display: block;
    width: 115px;
    height: 115px;
    margin: 0 auto 26px;
    background: var(--theme);
    border-radius: 50%;
    cursor: pointer;
    animation: float 1000ms infinite alternate;
}

.first-upload > .indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJdmlld0JveD0iMCAwIDEwMCAxMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwMCAxMDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KCTxnPgoJCTxnPgoJCQk8cGF0aCBzdHlsZT0iZmlsbDp3aGl0ZTsiIGQ9Ik01MC4wMDEsNy41bC0yNiwyNC4zOThoMTYuNVY1Ny41aDE5VjMxLjg5OGgxNi41TDUwLjAwMSw3LjV6IE05Ni42OTgsNjUuMjExTDgwLjc4LDU0LjVoLTkuODE2CgkJCQlsMTcuMDAyLDEzLjA0M0g3MC4yNDNjLTAuNTA4LDAtMC45NjksMC4yNTgtMS4xOTcsMC42NjRMNjQuOTYsNzkuMzgzSDM1LjAzOGwtNC4wODYtMTEuMTc2Yy0wLjIyNy0wLjQwNi0wLjY4OS0wLjY2NC0xLjE5Ny0wLjY2NAoJCQkJSDEyLjAzMkwyOS4wMzYsNTQuNWgtOS44MThMMy4zMDIsNjUuMjExYy0yLjM2OSwxLjQxNS0zLjc4NSw0LjY3Ni0zLjE1LDcuMjQ2bDIuODA3LDE1LjM2OWMwLjYzNiwyLjU3LDMuNDUyLDQuNjc0LDYuMjU3LDQuNjc0CgkJCQloODEuNTY4YzIuODA1LDAsNS42MjEtMi4xMDQsNi4yNTgtNC42NzRsMi44MDUtMTUuMzY5QzEwMC40ODUsNjkuODg3LDk5LjA2Nyw2Ni42MjYsOTYuNjk4LDY1LjIxMXoiLz4KCQkJPC9nPgoJCTwvZz4KCTwvc3ZnPg==);
    transform: translate(-50%, -50%);
}

.first-upload > .indication {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}

.global-actions {
    position: fixed;
    top: 4px;
    left: 0;
    padding: 8px;
    z-index: 1;
}

.global-actions > .action {
    display: none;
    vertical-align: middle;
}

.global-actions .action > .label {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    background: var(--theme);
    transition: opacity 125ms;
}

.global-actions > .action > .label {
    padding: 4px 12px;
}

.global-actions > .action > .label::before {
    content: '';
    width: 14px;
    height: 14px;
    margin-right: 8px;
}

.global-actions > .single > .label {
    border-radius: 3px;
}

.global-actions > .group > .label {
    border-radius: 3px 0 0 3px;
}

.global-actions > .group > .action > .label {
    margin-left: 1px;
    padding: 4px 10px;
}

.global-actions > .group > .action:last-child > .label {
    border-radius: 0 3px 3px 0;
}

.form-files > .label::before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgZmlsbD0id2hpdGUiPjxwYXRoIGQ9Ik0gMTQuOTcwNzAzIDIuOTcyNjU2MiBBIDIuMDAwMiAyLjAwMDIgMCAwIDAgMTMgNSBMIDEzIDEzIEwgNSAxMyBBIDIuMDAwMiAyLjAwMDIgMCAxIDAgNSAxNyBMIDEzIDE3IEwgMTMgMjUgQSAyLjAwMDIgMi4wMDAyIDAgMSAwIDE3IDI1IEwgMTcgMTcgTCAyNSAxNyBBIDIuMDAwMiAyLjAwMDIgMCAxIDAgMjUgMTMgTCAxNyAxMyBMIDE3IDUgQSAyLjAwMDIgMi4wMDAyIDAgMCAwIDE0Ljk3MDcwMyAyLjk3MjY1NjIgeiI+PC9wYXRoPjwvc3ZnPg==);
}

.archive-link {
    margin-left: 8px;
}

.archive-link > .label::before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0id2hpdGUiPiAgICA8cGF0aCBkPSJNIDQgMiBDIDIuODk1IDIgMiAyLjg5NSAyIDQgTCAyIDE4IEwgNCAxOCBMIDQgNCBMIDE4IDQgTCAxOCAyIEwgNCAyIHogTSA4IDYgQyA2Ljg5NSA2IDYgNi44OTUgNiA4IEwgNiAyMCBDIDYgMjEuMTA1IDYuODk1IDIyIDggMjIgTCAyMCAyMiBDIDIxLjEwNSAyMiAyMiAyMS4xMDUgMjIgMjAgTCAyMiA4IEMgMjIgNi44OTUgMjEuMTA1IDYgMjAgNiBMIDggNiB6IE0gOCA4IEwgMjAgOCBMIDIwIDIwIEwgOCAyMCBMIDggOCB6Ij48L3BhdGg+PC9zdmc+);
}

.clear {
    margin-left: 8px;
}

.clear > .label::before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0id2hpdGUiPjxwYXRoIGQ9Ik0gMTAgMiBMIDkgMyBMIDQgMyBMIDQgNSBMIDUgNSBMIDUgMjAgQyA1IDIwLjUyMjIyMiA1LjE5MTMyODkgMjEuMDU0NjEgNS41NjgzNTk0IDIxLjQzMTY0MSBDIDUuOTQ1Mzg5OSAyMS44MDg2NzEgNi40Nzc3Nzc4IDIyIDcgMjIgTCAxNyAyMiBDIDE3LjUyMjIyMiAyMiAxOC4wNTQ2MSAyMS44MDg2NzEgMTguNDMxNjQxIDIxLjQzMTY0MSBDIDE4LjgwODY3MSAyMS4wNTQ2MSAxOSAyMC41MjIyMjIgMTkgMjAgTCAxOSA1IEwgMjAgNSBMIDIwIDMgTCAxNSAzIEwgMTQgMiBMIDEwIDIgeiBNIDcgNSBMIDE3IDUgTCAxNyAyMCBMIDcgMjAgTCA3IDUgeiBNIDkgNyBMIDkgMTggTCAxMSAxOCBMIDExIDcgTCA5IDcgeiBNIDEzIDcgTCAxMyAxOCBMIDE1IDE4IEwgMTUgNyBMIDEzIDcgeiI+PC9wYXRoPjwvc3ZnPg==);
}

.files {
    display: none;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 200px 0 80px;
    box-sizing: border-box;
    transition: opacity 125ms;
}

.files > .file {
    position: relative;
    width: 380px;
    margin: 0 14px 34px;
    padding: 14px 10px 10px;
    box-sizing: border-box;
    background: #101010;
    border: 1px solid var(--theme);
    border-radius: 6px;
    transition: border 1s linear;
}

.files > .file.expired {
    border-color: gray;
}

.files > .file.expired > .name::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: #131313;
    opacity: 0.5;
}

.files > .file.error {
    border-color: #ff5d24;
}

.files > .file > .name {
    position: absolute;
    top: -10px;
    left: 6px;
    max-width: calc(100% - 20px);
    padding: 0 4px;
    font-size: 16px;
    color: lightgrey;
    background: #131313;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
}

.files > .file > .progress-bar {
    width: 0;
    height: 28px;
    background: #ffc61d;
    box-sizing: content-box;
    border-radius: 4px;
    transition: background-color linear 500ms, width ease-out 500ms;
}

.files > .file > .percent {
    position: absolute;
    top: 18px;
    right: 18px;
    font-weight: bold;
    font-size: 14px;
}

.files > .file > .link {
    position: relative;
    font-size: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.files > .file > .link::after {
    content: '';
    display: block;
    margin: 8px 0 12px 0;
    width: 100%;
    height: 1px;
    background: var(--theme);
}

.files > .file > .info {
    display: flex;
}

.files > .file > .info > .qrcode {
    position: relative;
    width: 120px;
    height: 120px;
    padding: 4px;
    margin-right: 12px;
    background: var(--theme);
    cursor: pointer;
}

.files > .file > .info > .qrcode > * {
    transition: filter ease-out 150ms;
}

.files > .file > .info > .qrcode.hidden > * {
    filter: blur(5px);
}

.files > .file > .info > .qrcode.hidden::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    opacity: 0.5;
    background-size: contain;
    background-image: url(data:image/png;base64,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);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.files > .file > .info > .right {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: calc(100% - 128px - 12px);
}

.files > .file > .info > .right > .details {
    flex: 1 1;
}

.files > .file > .info > .right > .details > .item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 14px;
    color: lightgray;
}

.files > .file > .info > .right > .details > .item > .label {
    white-space: nowrap;
}

.files > .file > .info > .right > .details > .item > .content {
    margin-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.files > .file > .info > .right > .bottom {
    text-align: right;
}

.files > .file > .info > .right > .bottom > .actions {
    position: relative;
    display: inline-flex;
    overflow: visible;
}

.files > .file > .info > .right > .bottom > .actions > .copy-short {
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 600;
    background: var(--theme);
    border-radius: 3px 0 0 3px;
    transition: opacity 125ms;
}

.files > .file > .info > .right > .bottom > .actions > .dropdown {
    margin-left: 1px;
    padding: 4px 12px;
    font-size: 14px;
    font-weight: bold;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAxNzIgMTcyIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtZGFzaGFycmF5PSIiIHN0cm9rZS1kYXNob2Zmc2V0PSIwIiBmb250LWZhbWlseT0ibm9uZSIgZm9udC13ZWlnaHQ9Im5vbmUiIGZvbnQtc2l6ZT0ibm9uZSIgdGV4dC1hbmNob3I9Im5vbmUiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTogbm9ybWFsIj48cGF0aCBkPSJNMCwxNzJ2LTE3MmgxNzJ2MTcyeiIgZmlsbD0ibm9uZSI+PC9wYXRoPjxnIGZpbGw9IiNGRkZGRkYiPjxwYXRoIGQ9Ik0xMzkuOTY4NTgsMzMuODIzMDhjLTIuMDk5ODMsLTIuMDk5ODMgLTUuNTAwNDIsLTIuMDk5ODMgLTcuNjAwMjUsMGwtNDYuMzY4MzMsNDYuMzY4MzNsLTQ2LjM2NDc1LC00Ni4zNjgzM2MtMi4wOTk4MywtMi4wOTk4MyAtNS41MDA0MiwtMi4wOTk4MyAtNy42MDAyNSwwbC0yMy4yOTE2NywyMy4yOTE2N2MtMi4wOTk4MywyLjA5OTgzIC0yLjA5OTgzLDUuNTAwNDIgMCw3LjYwMDI1bDczLjQ1ODMzLDczLjQ1ODMzYzEuMDQ2MzMsMS4wNTM1IDIuNDIyMzMsMS41NzY2NyAzLjc5ODMzLDEuNTc2NjdjMS4zNzYsMCAyLjc1MiwtMC41MjMxNyAzLjgwMTkyLC0xLjU3MzA4bDczLjQ1ODMzLC03My40NTgzM2MyLjA5OTgzLC0yLjA5OTgzIDIuMDk5ODMsLTUuNTAwNDIgMCwtNy42MDAyNXoiPjwvcGF0aD48L2c+PC9nPjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-size: 9px;
    background-position: center;
    background-color: var(--theme);
    border-radius: 0 3px 3px 0;
    transition: opacity 125ms;
}

.files > .file > .info > .right > .bottom > .actions > .menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 2px);
    left: calc(100% - 24px);
    margin-bottom: 10px;
    text-align: left;
    background: #303030;
    border: 1px solid #505050;
    border-radius: 3px;
    z-index: 1000;
}

.files > .file > .info > .right > .bottom > .actions > .menu.opened {
    display: flex;
}

.files > .file > .info > .right > .bottom > .actions > .menu .item {
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.files > .file > .info > .right > .bottom > .actions > .menu .item:hover {
    background: #404040;
}

.files > .file > .info > .right > .bottom > .actions > .menu .item.warning {
    color: #ffc61d;
}

.files > .file > .info > .right > .bottom > .actions > .menu .item.destructive {
    color: #ff5d24;
}

.files > .file > .info > .right > .bottom > .actions > .menu .sub-menu {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.files > .file > .info > .right > .bottom > .actions > .menu .sub-menu::after {
    content: '';
    right: 6px;
    width: 9px;
    height: 9px;
    margin-left: 4px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0id2hpdGUiPjxwYXRoIGQ9Ik0gMTguMTM2NzE5IDMgQyAxNy44NzUgMy4wMDM5MDYgMTcuNjI4OTA2IDMuMTA1NDY5IDE3LjQ0MTQwNiAzLjI4OTA2MyBMIDExLjQxNzk2OSA5LjI2NTYyNSBDIDExLjAyNzM0NCA5LjY1NjI1IDExLjAyMzQzOCAxMC4yODkwNjMgMTEuNDEwMTU2IDEwLjY3OTY4OCBMIDI1LjY0NDUzMSAyNS4wMzEyNSBMIDExLjI5Njg3NSAzOS4yNjU2MjUgQyAxMC45MDIzNDQgMzkuNjU2MjUgMTAuODk4NDM4IDQwLjI4OTA2MyAxMS4yODkwNjMgNDAuNjc5Njg4IEwgMTcuMjY1NjI1IDQ2LjcwMzEyNSBDIDE3LjY1NjI1IDQ3LjA5NzY1NiAxOC4yODkwNjMgNDcuMTAxNTYzIDE4LjY3OTY4OCA0Ni43MTA5MzggTCAzOS43NjU2MjUgMjUuNzk2ODc1IEMgNDAuMTU2MjUgMjUuNDA2MjUgNDAuMTYwMTU2IDI0Ljc3MzQzOCAzOS43Njk1MzEgMjQuMzc4OTA2IEwgMTguODU5Mzc1IDMuMjk2ODc1IEMgMTguNjY3OTY5IDMuMTAxNTYzIDE4LjQwNjI1IDIuOTk2MDk0IDE4LjEzNjcxOSAzIFoiPjwvcGF0aD48L3N2Zz4=);
    transform: translateX(5px);
}

.files > .file > .info > .right > .bottom > .actions > .menu .sub-menu > .menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 70px;
    text-align: left;
    background: #303030;
    border: 1px solid #505050;
    border-radius: 0 3px 3px 3px;
}

.files > .file > .info > .right > .bottom > .actions > .menu .sub-menu:hover > .menu {
    display: flex;
}

.files > .file > .info > .right > .bottom > .actions > .menu .sub-menu > .menu.opened {
    display: flex;
}

.files > .file > .info > .right > .bottom > .actions > .menu .separator {
    height: 2px;
    background: #505050;
}

@media only screen and (max-width: 1100px) {
    .files > .file > .info > .right > .bottom > .actions > .menu {
        left: initial;
        right: 0;
    }

    .files > .file > .info > .right > .bottom > .actions > .menu .sub-menu > .menu {
        left: 0;
        transform: translateX(-100%);
    }
}

.files > .file > .expired {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.files > .file > .expired::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    background: black;
    opacity: 0.5;
}

.files > .file > .expired > .label {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 43px;
    color: lightgray;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1;
    transform: translate(-50%, -50%) rotate(-30deg);
}

.files > .file > .expired > .label::after {
    content: 'Click to dismiss';
    display: block;
    font-weight: normal;
    text-transform: none;
    text-align: center;
    text-decoration: underline;
    font-size: 14px;
}

.files > .file > .error-message {
    font-size: 22px;
}

.files > .file > .remove {
    float: right;
    width: 28px;
    height: 28px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAxNzIgMTcyIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtZGFzaGFycmF5PSIiIHN0cm9rZS1kYXNob2Zmc2V0PSIwIiBmb250LWZhbWlseT0ibm9uZSIgZm9udC13ZWlnaHQ9Im5vbmUiIGZvbnQtc2l6ZT0ibm9uZSIgdGV4dC1hbmNob3I9Im5vbmUiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTogbm9ybWFsIj48cGF0aCBkPSJNMCwxNzJ2LTE3MmgxNzJ2MTcyeiIgZmlsbD0ibm9uZSI+PC9wYXRoPjxnIGZpbGw9IiNmZmZmZmYiPjxwYXRoIGQ9Ik0xNDMuNzgxMjUsMTI5LjkzMDI5bC0xMy44NzY4LDEzLjg1MDk2Yy0yLjUzMjQ2LDIuNTU4MjkgLTYuNjY3MDcsMi41NTgyOSAtOS4yMjUzNiwwbC0zNC42NzkwOSwtMzQuNjUzMjRsLTM0LjY1MzI0LDM0LjY1MzI0Yy0yLjU1ODI5LDIuNTU4MjkgLTYuNzE4NzUsMi41NTgyOSAtOS4yNTEyMSwwbC0xMy44NzY4LC0xMy44NTA5NmMtMi41NTgyOSwtMi41NTgyOSAtMi41NTgyOSwtNi42OTI5MSAwLC05LjI1MTJsMzQuNjUzMjQsLTM0LjY3OTA5bC0zNC42NTMyNCwtMzQuNjUzMjRjLTIuNTMyNDUsLTIuNTg0MTMgLTIuNTMyNDUsLTYuNzQ0NTkgMCwtOS4yNTEyMWwxMy44NzY4LC0xMy44NzY4YzIuNTMyNDYsLTIuNTU4MjkgNi42OTI5MSwtMi41NTgyOSA5LjI1MTIxLDBsMzQuNjUzMjQsMzQuNjc5MDlsMzQuNjc5MDksLTM0LjY3OTA5YzIuNTU4MjksLTIuNTU4MjkgNi43MTg3NSwtMi41NTgyOSA5LjIyNTM2LDBsMTMuODc2OCwxMy44NTA5NmMyLjU1ODI5LDIuNTU4MjkgMi41NTgyOSw2LjcxODc1IDAuMDI1ODQsOS4yNzcwNGwtMzQuNjc5MDgsMzQuNjUzMjRsMzQuNjUzMjQsMzQuNjc5MDljMi41NTgyOSwyLjU1ODI5IDIuNTU4MjksNi42OTI5IDAsOS4yNTEyeiI+PC9wYXRoPjwvZz48L2c+PC9zdmc+);
    background-size: 20px 20px;
    background-position: center;
    background-repeat: no-repeat;
}

.clickable {
    cursor: pointer;
}

.clickable:hover {
    opacity: 0.9;
}

.clickable:active {
    opacity: 0.8;
}

.selectable {
    -webkit-user-select: all;
    -moz-user-select: all;
    user-select: all;
}

input[type=file] {
    display: none;
}


@media only screen and (max-width: 768px) {
    .global-actions {
        position: static;
        margin-bottom: 12px;
        padding: 14px;
        background-color: #131313;
    }

    .global-actions > .action {
        width: 100%;
        margin: 8px 0;
        text-align: center;
        font-size: 16px;
    }

    .global-actions > .action.visible {
        display: flex;
    }

    .global-actions > .action > * {
        flex: 1;
    }

    .global-actions .action > .label {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        font-size: 18px;
    }

    .global-actions > .action > .label::before {
        width: 18px;
        height: 18px;
    }

    .files {
        padding: 0;
    }

    .files > .file {
        flex: 1 0 55%;
    }
}

@keyframes float {
    100% {
        transform: translateY(-8px);
    }
}