/* Background login */
/* Use native svg background to make your "filebrowser" load faster */
/* I love this website for generating svg backgrounds https://bgjar.com/ */
#login {
    background-image: url(/static/img/bg.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
 
/* Custom logo properties */
/* My logo size is 163×34 pixels, I just convert png logo to svg with inkscape. */
#login img {
    width: 20em;
    height: 6em;
    margin: 0 auto;
    display: block;
    user-select: none;
    /* Pointer block to logo */
    pointer-events: none;
}
 
header img {
    height: 2.5em;
    user-select: none;
    /* Pointer block to logo (At header)*/
    pointer-events: none;
}
 
/* Hide brand title on login page (Optional)  */
#login h1 {
	font-size: 16px;
/*    display: none; */
}
 
/* Fixed login form box */
#login form {
    position: fixed;
    top: 50%;
    left: 50%;
    padding-bottom: 1.5em;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 27em;
    max-height: 20em;
    width: 90%;
    height: 90%;
    /* Fix with Flex */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    /* From https://css.glass */
    background: rgba(0, 0, 0, 0.19);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}
 
/* Fixed login error warning on login page */
#login .wrong {
    background: var(--red);
    color: #fff;
    padding: .5em;
    width: 19.9em;
    text-align: center;
    -webkit-animation: opac .2s forwards;
    animation: opac .2s forwards;
}
 
/* Fixed user input box (Username & Password) */
.input--block {
    margin-bottom: .5em;
    display: block;
    max-width: 20em;
}
 
/* Fixed login button */
.button--block {
    margin: 0 0 .5em;
    display: block;
    max-width: 20em;
    width: 100%;
}
 
/* Fixed view for Samsung Galaxy Fold */
@media screen and (max-width: 280px) {
    #login form {
        height: 40%;
    }
 
    #login .wrong {
        width: 15.6em;
        font-size: 0.8em;
    }
 
    #login img {
        width: 13em;
    }
 
    .input--block {
        width: 80%;
        font-size: 0.9em;
    }
 
    .button--block {
        width: 80%;
        font-size: 0.9em;
    }
}
 
/* Theming */
/* changing the root color is my version of the easiest theme. how about you? lol */
:root {
/* The current color palette is Jellyfin's default theme */
    --background: #101010;
    --surfacePrimary: #202020;
    --surfaceSecondary: #292929;
    --blue: #1c4c5c;
    --dark-blue: #007ea8;
    --red: #ca0000;
    --icon: #007ea8;
}
 
/*
More properties (Just add it to :root to enable it, and change the color)

    --background: #141D24;
    --surfacePrimary: #20292F;
    --surfaceSecondary: #3A4147;
    --divider: rgba(255, 255, 255, 0.12);
    --icon: #ffffff;
    --textPrimary: rgba(255, 255, 255, 0.87);
    --textSecondary: rgba(255, 255, 255, 0.6);
     --icon-red: #da4453;	
    --blue: #2196f3;
    --dark-blue: #1e88e5;
    --red: #f44336;
    --dark-red: #d32f2f;
    --moon-grey: #f2f2f2;
    --icon-orange: #f47750;
    --icon-yellow: #fdbc4b;
    --icon-green: #2ecc71;
    --icon-blue: #1d99f3;
    --icon-violet: #9b59b6;
*/


@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

:root {
    --background: #1f2330;
    --surfacePrimary: #1f2330;
    --surfaceSecondary: #292d3e;
    --surfaceHover: #383d51;
    --surfaceSelect: #4c5374;
    --divider: #1f2330;
    --icon: #8eb2ff;
    --textPrimary: #dee0ee;
    --textSecondary: #929ac9;
    --radius: 0.7rem;
    --blue: #8eb2ff;
    --dark-blue: rgba(56, 71, 102, 0.5);
    --red: #ef5350;
    --dark-red: rgba(239, 83, 80, 0.15);
    --grey: #6c739a;
    --dark-grey: rgba(108, 115, 154, 0.15);
    --moon-grey: #f2f2f2;
}



/* Base styles from https://github.com/yurividal/filebrowserdarktheme */

.share__box__info {
    padding: 2em 3em;
    background-color: var(--surfaceSecondary);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.share__box__download {
    width: 100%;
    padding: 1em;
    cursor: pointer;
    background: #2c313c;
    color: white;
    font-size: 1.3em;
}

.share__box__title {
    word-wrap: break-word;
}

h1.share__box__title {
    font-size: 1.2em;
}

.card#share ul li input,
.card#share ul li select {
    padding: 0.2em;
    margin-right: 0.5em;
    border: 1px solid #21252b;
    background-color: var(--background);
    color: white;
}

.share__box {
    background: var(--background);
    -webkit-box-shadow: none;
    box-shadow: none;
}

h1 {
    font-size: 1.5em;
    margin: 0.67em 0;
}

#listing .item .name {
    font-weight: 100;
}

.message {
    color: white;
}



/* ############### MAIN THEME ############### */

body {
    background: var(--background);
    color: var(--textPrimary);
}

/* Remove highlight when clicking on mobile */
#listing .item,
.action,
#search.active #result ul li a,
#search .boxes>div>div,
.button,
.file-list li,
.dashboard .card-content.full .small a,
#nav .wrapper a,
.breadcrumbs a,
i.material-icons {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.material-icons {
    color: var(--icon);
}

.overlay {
    background-color: rgba(0, 0, 0, 0.6);
}

/* Mosaic view style */
#listing.mosaic .item {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background-color: var(--surfaceSecondary);
    border-radius: var(--radius) !important;
}

#listing.mosaic .item:hover,
#listing.list .item:not(.header):hover {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background-color: var(--surfaceHover);
}

#listing .item[aria-selected="true"] {
    background: var(--surfaceSelect) !important;
    color: var(--textPrimary) !important;
}

#listing h2:nth-of-type(2) {
    padding-top: 0.5em;
}

/* List view style */
#listing.list .item.header {
    border-bottom: none;
}

#listing.list .item {
    border: none;
    border-radius: var(--radius);
}

#listing .item img {
    border-radius: var(--radius);
}

/* Breadcrumb style */
.breadcrumbs {
    border-bottom: none;
    margin-top: 1em;
}

.breadcrumbs span a {
    padding: 0.4em 0.6em;
}

.breadcrumbs a {
    padding: 0.1em 0.6em;
    border-radius: var(--radius);
}

.breadcrumbs a:hover,
.breadcrumbs span a:hover {
    background-color: var(--surfaceHover);
}


/* Header style */
header {
    border-bottom: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    padding: 0.5em 0 0.5em 0;
    margin: 0 1em 0 1em;
    width: -o-calc(100% - 2em);
    width: calc(100% - 2em);
}

#search #input {
    border-radius: var(--radius);
}

.action .counter {
    border-radius: 0.4rem;
    border-color: var(--blue);
    color: var(--textPrimary);
    background-color: var(--surfacePrimary);
}

@media (max-width: 736px) {
    #dropdown {
        -webkit-box-shadow: none;
        box-shadow: none;
        background-color: var(--surfacePrimary) !important;
        border-radius: var(--radius);
        padding: 1em;
    }

    header .overlay {
        background-color: rgba(0, 0, 0, 0.3);
    }

    #dropdown .action span:not(.counter) {
        padding: 0.5em 0.6em 0.4em 0;
    }
}


/* Sidebar style */
nav {
    height: 100%;
    padding: 1em;
}

nav .action:hover {
    background-color: var(--surfaceHover);
}

nav>div {
    border: none;
    margin-top: 1em;
}

@media (max-width: 1024px) {
    nav {
        width: 11em;
    }
}

@media (max-width: 736px) {
    nav {
        border-radius: var(--radius);
        -webkit-box-shadow: none;
        box-shadow: none;
        margin: 1em;
        height: calc(100% - 2em);
        width: 16em;
    }

    nav.active {
        margin: 1em;
        border-radius: var(--radius);
        height: calc(100% - 2em);
    }
}

nav .action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.credits {
    color: var(--textSecondary);
}


/* Card style */
.card {
    border-radius: var(--radius);
    background-color: var(--surfaceSecondary);
    -webkit-box-shadow: none;
    box-shadow: none;
}

.card li {
    margin-top: 0.5em;
}

.card .card-action.full .action {
    padding: 2em;
    border: none;
    margin: 0;
}

.card .card-action.full .action:hover {
    background-color: var(--surfaceHover);
}

.card>div:last-child {
    padding-bottom: 1em;
}

.card .card-action.full {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.card .card-action.full .action {
    -webkit-box-flex: auto;
    -ms-flex: auto;
    flex: auto;
}


/* Button style */
.button {
    background: transparent;
    -webkit-box-shadow: 0 0 0 2px var(--blue);
    box-shadow: 0 0 0 2px var(--blue);
    border: none;
    padding: 0.6em 1em 0.5em 1em;
    color: var(--textPrimary);
}

.button:hover {
    -webkit-box-shadow: 0 0 0 2px var(--blue);
    box-shadow: 0 0 0 2px var(--blue);
    background-color: var(--blue);
    color: var(--surfacePrimary);
}

.button--flat {
    color: var(--blue);
    -webkit-box-shadow: none;
    box-shadow: none;
}

.button--flat:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: var(--dark-blue);
    color: var(--blue);
}

.button--flat:disabled,
.button--flat[disabled] {
    color: var(--grey);
    background-color: transparent;
}

.button,
.button--flat {
    border-radius: var(--radius);
}

.button--flat.button--grey {
    color: var(--grey);
}

.button--flat.button--grey:hover {
    background-color: var(--dark-grey);
}

.button--flat.button--red {
    color: var(--red);
}

.button--flat.button--red:hover {
    background-color: var(--dark-red);
}


/* Action button style */
.action {
    border-radius: var(--radius) !important;
}

.action:hover {
    background-color: rgba(142, 178, 255, 0.15) !important;
}


/* Input style */
input,
.input {
    background-color: var(--surfaceHover);
    border: none;
    border-radius: var(--radius);
}

input:focus,
.input:focus {
    border-color: transparent;
    -webkit-box-shadow: 0 0 0 2px #5f6373;
    box-shadow: 0 0 0 2px #5f6373;
}

#search #input input:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.input--green {
    border-color: transparent;
    -webkit-box-shadow: 0 0 0 2px #147A41;
    box-shadow: 0 0 0 2px #147A41;
}

.input--green:focus {
    -webkit-box-shadow: 0 0 0 2px #84c77d;
    box-shadow: 0 0 0 2px #84c77d;
}


/* Multiple selection style */
#listing #multiple-selection {
    background-color: #2B354B;
    border-radius: var(--radius);
    margin: 0 1em 1em 1em;
    padding: 0.5em 0.7em 0.5em 1em;
    width: -o-calc(100% - 2em);
    width: calc(100% - 2em);
    bottom: -6em;
    height: auto;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#listing #multiple-selection p {
    color: var(--blue);
}


/* Shell style */
.shell {
    background-color: #30364c;
    border-radius: var(--radius);
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 0 1em 1em 1em;
    width: -o-calc(100% - 2em);
    width: calc(100% - 2em);
}

.shell__result {
    border-top: none;
    word-break: break-all;
}


/* File selection style */
@media (max-width: 736px) {
    #file-selection {
        -webkit-box-shadow: none;
        box-shadow: none;
        background-color: #30364C !important;
        border-radius: var(--radius);
        padding: 0.5em 1em;
        max-width: 22em;
    }

    #file-selection:empty {
        display: none;
    }
}


/* Move file menu style */
.file-list {
    padding: 0 1em 0 0;
}

.file-list li {
    border-radius: var(--radius);
    padding: 0.5em 1em;
}

.file-list li:hover {
    background: var(--surfaceHover) !important;
}

.file-list li:before {
    color: var(--icon);
}

.file-list li[aria-selected=true] {
    background: var(--surfaceSelect) !important;
}


/* File preview style */
#previewer {
    background-color: rgba(8, 9, 12, 0.9);
}

@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
    #previewer {
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        background-color: rgba(8, 9, 12, 0.8) !important;
    }
}

#previewer>button {
    background-color: rgba(142, 178, 255, 0.15);
    border-radius: var(--radius);
}

#previewer>button[aria-label="Previous"],
#previewer>button[aria-label="Anterior"] {
    margin-left: 0.5em;
}

#previewer>button[aria-label="Next"],
#previewer>button[aria-label="Siguiente"] {
    margin-right: 0.5em;
}

#previewer .preview .info .button:hover {
    background-color: rgba(142, 178, 255, 0.15);
}

#previewer .preview .info .title i {
    margin-bottom: 0.2em;
}

#previewer .preview .info div.title {
    color: var(--icon);
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

#previewer .preview .info div:last-child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

#previewer .preview .info .button {
    display: block;
    width: 50%;
}

@media (max-width: 736px) {
    #previewer .preview .info div:last-child {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    #previewer .preview .info .button {
        width: 100%;
    }
}

#previewer .preview .info div .button div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}


/* Search style */
#search .boxes {
    border-radius: var(--radius);
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 1em 0;
    padding: 1em;
}

#search .boxes>div>div {
    background-color: var(--surfaceSecondary);
    border-radius: var(--radius);
    width: 25%;
    padding: 1em;
    margin: 0;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    color: var(--textPrimary);
}

@media (max-width: 736px) {
    #search .boxes>div>div {
        width: 50%;
    }
}

#search .boxes>div>div:hover {
    background-color: var(--surfaceHover);
}

#search .boxes>div {
    margin: 0;
}

#search.active #input {
    border-bottom: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#search.active input {
    padding-left: 1em;
}

#result p:nth-child(1) {
    display: none;
}

#search #input,
#search.active #input,
#search.active input {
    border-radius: var(--radius);
}

#search #input>.action {
    margin-right: 1em;
}

#search.active #input {
    padding: 0 1em;
}

#search.active input {
    background-color: var(--surfaceSecondary);
    padding: 1em;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

#search.active input:focus {
    -webkit-box-shadow: 0 0 0 2px #5f6373 !important;
    box-shadow: 0 0 0 2px #5f6373 !important;
}

#dropdown .action:hover {
    background-color: var(--surfaceHover);
}

#search.active #result {
    padding: 1em;
}

#search.active #result ul li a {
    border-radius: var(--radius);
    padding: 1em;
}

#search.active #result ul li a:hover {
    background-color: var(--surfaceHover);
}

#search.active #result ul li a span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}


/* Editor style */
.ace_gutter-cell {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding-left: 19px;
    padding-right: 6px;
    background-color: var(--surfacePrimary);
    background-repeat: no-repeat;
}


/* Settings style */
.dashboard #nav ul li {
    border-radius: var(--radius);
    border-bottom: none;
}

.dashboard #nav ul li:hover {
    background-color: rgba(146, 154, 201, 0.1);
}

.dashboard #nav ul li.active {
    border-color: transparent;
    color: var(--textPrimary);
    background-color: var(--surfaceSelect);
    border-radius: var(--radius);
}

.dashboard #nav ul li.active:before {
    content: inherit;
}

.dashboard #nav .wrapper {
    border-bottom: none;
}

.card .collapsible {
    width: auto;
    margin: 0;
    border-radius: var(--radius);
}

.card .collapsible:hover {
    background-color: rgba(142, 178, 255, 0.15) !important;
}

.collapsible {
    border-top: none;
}

.rules input {
    background-color: var(--surfacePrimary);
    border: none !important;
    border-radius: var(--radius);
    padding: 0.4rem !important;
}

table tr {
    border-bottom: none;
}

.message {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.message span {
    color: var(--icon);
}

.dashboard .card-content.full .small a i {
    padding: 0.5em;
    border-radius: var(--radius);
}

.dashboard .card-content.full .small a i:hover {
    background: var(--dark-blue);
}

.card .card-content.full {
    padding-bottom: 0.5em;
}


/* Notification style */
.noty_theme__mint.noty_type__success,
.noty_theme__mint.noty_type__error {
    border-radius: var(--radius);
}


/* Placeholder style */
::-webkit-input-placeholder {
    color: var(--grey);
}

::-moz-placeholder {
    color: var(--grey);
}

:-ms-input-placeholder {
    color: var(--grey);
}

::-ms-input-placeholder {
    color: var(--grey);
}

::placeholder {
    color: var(--grey);
}
/* ############### END MAIN THEME ############### */



/* ############### EDITOR THEME ############### */

/* Default twilight replaced with modified one-dark */
/* https://github.com/ajaxorg/ace/blob/master/lib/ace/theme/one_dark.css */
:root {
    --editor-white: #fff;
    --editor-darkwhite: #e8e8e8;
    /* Darker background */
    --editor-black: #171a24;
    --editor-brown: #747369;
    --editor-grey-1: #abb2bf;
    --editor-grey-2: #6a6f7a;
    --editor-grey-3: #5c6370;
    --editor-grey-4: #3d4350;
    --editor-grey-5: rgba(76, 87, 103, .19);
    --editor-grey-6: #282c34;
    --editor-grey-7: #272b33;
    --editor-nordgrey: rgba(67, 76, 94, 0.7);
    --editor-lightred: #f2777a;
    --editor-red: #e06c75;
    --editor-lightorange: #e5c07b;
    --editor-orange: #d19a66;
    --editor-darkorange: #d27b53;
    --editor-yellow: #c6dbae;
    --editor-green: #98c379;
    --editor-lightblue: #61afef;
    --editor-blue: #528bff;
    --editor-teal: #56b6c2;
    --editor-lightpink: #ffc0cb;
    --editor-pink: #c678dd;
}

.ace-twilight .ace_gutter {
    background: var(--editor-grey-6);
    color: var(--editor-grey-2);
}

.ace-twilight .ace_print-margin {
    width: 1px;
    background: var(--editor-darkwhite);
}

.ace-twilight {
    background-color: var(--editor-black);
    color: var(--editor-grey-1);
}

.ace-twilight .ace_cursor {
    color: var(--editor-blue);
}

.ace-twilight .ace_marker-layer .ace_selection {
    background: var(--editor-grey-4);
}

.ace-twilight.ace_multiselect .ace_selection.ace_start {
    -webkit-box-shadow: 0 0 3px 0 var(--editor-grey-6);
    box-shadow: 0 0 3px 0 var(--editor-grey-6);
    border-radius: 2px;
}

.ace-twilight .ace_marker-layer .ace_step {
    background: var(--editor-yellow);
}

.ace-twilight .ace_marker-layer .ace_bracket {
    margin: -1px 0 0 -1px;
    border: 1px solid var(--editor-brown);
}

.ace-twilight .ace_marker-layer .ace_active-line {
    background: var(--editor-grey-5);
}

.ace-twilight .ace_gutter-active-line {
    background-color: var(--editor-grey-5);
}

.ace-twilight .ace_marker-layer .ace_selected-word {
    border: 1px solid var(--editor-grey-4);
}

.ace-twilight .ace_fold {
    background-color: var(--editor-lightblue);
    border-color: var(--editor-grey-1);
}

.ace-twilight .ace_keyword {
    color: var(--editor-pink);
}

.ace-twilight .ace_keyword.ace_operator {
    color: var(--editor-pink);
}

.ace-twilight .ace_keyword.ace_other.ace_unit {
    color: var(--editor-orange);
}

.ace-twilight .ace_constant.ace_language {
    color: var(--editor-orange);
}

.ace-twilight .ace_constant.ace_numeric {
    color: var(--editor-orange);
}

.ace-twilight .ace_constant.ace_character {
    color: var(--editor-teal);
}

.ace-twilight .ace_constant.ace_other {
    color: var(--editor-teal);
}

.ace-twilight .ace_support.ace_function {
    color: var(--editor-lightblue);
}

.ace-twilight .ace_support.ace_constant {
    color: var(--editor-orange);
}

.ace-twilight .ace_support.ace_class {
    color: var(--editor-lightorange);
}

.ace-twilight .ace_support.ace_type {
    color: var(--editor-lightorange);
}

.ace-twilight .ace_storage {
    color: var(--editor-pink);
}

.ace-twilight .ace_storage.ace_type {
    color: var(--editor-pink);
}

.ace-twilight .ace_invalid {
    color: var(--editor-white);
    background-color: var(--editor-lightred);
}

.ace-twilight .ace_invalid.ace_deprecated {
    color: var(--editor-grey-7);
    background-color: var(--editor-darkorange);
}

.ace-twilight .ace_string {
    color: var(--editor-green);
}

.ace-twilight .ace_string.ace_regexp {
    color: var(--editor-red);
}

.ace-twilight .ace_comment {
    font-style: italic;
    color: var(--editor-grey-3);
}

.ace-twilight .ace_variable {
    color: var(--editor-red);
}

.ace-twilight .ace_variable.ace_parameter {
    color: var(--editor-orange);
}

.ace-twilight .ace_meta.ace_tag {
    color: var(--editor-red);
}

.ace-twilight .ace_entity.ace_other.ace_attribute-name {
    color: var(--editor-red);
}

.ace-twilight .ace_entity.ace_name.ace_function {
    color: var(--editor-lightblue);
}

.ace-twilight .ace_entity.ace_name.ace_tag {
    color: var(--editor-red);
}

.ace-twilight .ace_markup.ace_heading {
    color: var(--editor-green);
}

.ace-twilight .ace_indent-guide {
    background: none;
    -webkit-box-shadow: inset -1px 0 0 0 var(--editor-nordgrey);
    box-shadow: inset -1px 0 0 0 var(--editor-nordgrey);
}

/* ############### END EDITOR THEME ############### */



/* ############### ICON THEME ############### */

/* Header/File-Selection icon style */
/* Disable old icons */
header button i.material-icons:not(button[aria-label="Save"] i),
header button i.material-icons:not(button[aria-label="Guardar"] i),
#file-selection button i.material-icons,
#input i.material-icons,
#dropdown i.material-icons {
    color: transparent !important;
}

/* Position new icons */
header button i:after,
#file-selection button i:after,
#input i:after,
#dropdown button i:after {
    position: absolute;
    display: block;
    top: 0.4em;
}

/* Close in mosaic/list/search view */
header button[aria-label="Close"] i:after,
header button[aria-label="Cerrar"] i:after,
#search #input button[aria-label="Close"] i:after,
#search #input button[aria-label="Cerrar"] i:after {
    top: 0.4em;
    left: 0.38em;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg>');
}

/* Hamburger in mobile mosaic/list view */
header button[aria-label="Toggle sidebar"] i:after,
header button[aria-label="Mostrar/Ocultar menú"] i:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="4" y1="12" x2="20" y2="12"></line> <line x1="4" y1="6" x2="20" y2="6"></line> <line x1="4" y1="18" x2="20" y2="18"></line> </svg>');
}

/* Search in mobile mosaic/list view */
header button[aria-label="Search"] i:after,
header button[aria-label="Buscar"] i:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="11" cy="11" r="8"></circle> <line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg>');
}

header button[aria-label="Share"] i:after,
header button[aria-label="Compartir"] i:after,
#file-selection button[aria-label="Share"] i:after,
#file-selection button[aria-label="Compartir"] i:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="18" cy="5" r="3"></circle> <circle cx="6" cy="12" r="3"></circle> <circle cx="18" cy="19" r="3"></circle> <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line> <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line> </svg>');
}

header button[aria-label="Rename"] i:after,
header button[aria-label="Renombrar"] i:after,
#file-selection button[aria-label="Rename"] i:after,
#file-selection button[aria-label="Renombrar"] i:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="2" x2="22" y2="6"></line> <path d="M7.5 20.5L19 9l-4-4L3.5 16.5 2 22z"></path> </svg>');
}

header button[aria-label="Copiar archivo"] i:after,
header button[aria-label="Copy file"] i:after,
#file-selection button[aria-label="Copy file"] i:after,
#file-selection button[aria-label="Copiar archivo"] i:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path> </svg>');
}

header button[aria-label="Move file"] i:after,
header button[aria-label="Mover archivo"] i:after,
#file-selection button[aria-label="Move file"] i:after,
#file-selection button[aria-label="Mover archivo"] i:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 22h14a2 2 0 002-2V7.5L14.5 2H6a2 2 0 00-2 2v4"></path> <path d="M14 2v6h6"></path> <path d="M2 15h10"></path> <path d="M9 18l3-3-3-3"></path> </svg>');
}

header button[aria-label="Delete"] i:after,
header button[aria-label="Borrar"] i:after,
#file-selection button[aria-label="Delete"] i:after,
#file-selection button[aria-label="Borrar"] i:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="3 6 5 6 21 6"></polyline> <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"></path> </svg>');
}

/* Kebab in mobile mosaic/list view */
header button[aria-label="More"] i:after,
header button[aria-label="Más"] i:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="1"></circle> <circle cx="12" cy="5" r="1"></circle> <circle cx="12" cy="19" r="1"></circle> </svg>');
}

#dropdown button[aria-label="Toggle shell"] i:after,
#dropdown button[aria-label="Presiona Enter para buscar..."] i:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="16 18 22 12 16 6"></polyline> <polyline points="8 6 2 12 8 18"></polyline> </svg>');
}

#dropdown button[aria-label="Switch view"] i:after,
#dropdown button[aria-label="Cambiar vista"] i:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect> <line x1="3" y1="9" x2="21" y2="9"></line> <line x1="3" y1="15" x2="21" y2="15"></line> <line x1="12" y1="3" x2="12" y2="21"></line> </svg>');
}

#dropdown button[aria-label="Download"] i:after,
#dropdown button[aria-label="Descargar"] i:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"></path> <polyline points="7 10 12 15 17 10"></polyline> <line x1="12" y1="15" x2="12" y2="3"></line> </svg>');
}

#dropdown button[aria-label="Upload"] i:after,
#dropdown button[aria-label="Subir"] i:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"></path> <polyline points="17 8 12 3 7 8"></polyline> <line x1="12" y1="3" x2="12" y2="15"></line> </svg>');
}

#dropdown button[aria-label="Info"] i:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="16" x2="12" y2="12"></line> <line x1="12" y1="8" x2="12.01" y2="8"></line> </svg>');
}

#dropdown button[aria-label="Select multiple"] i:after,
#dropdown button[aria-label="Selección múltiple"] i:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path> <path d="M9 12l2 2 4-4"></path> </svg>');
}

/* Search in mosaic/list view */
#search #input i:after {
    top: 0.5em;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="11" cy="11" r="8"></circle> <line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg>');
}


/* Sidebar icon style */
/* Disable old icons */
nav button i.material-icons {
    color: transparent !important;
}

/* Position new icons */
nav button i:after {
    position: absolute;
    display: block;
    top: 0.75em;
}

nav button[aria-label="My files"] i:after,
nav button[aria-label="Mis archivos"] i:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"></path> </svg>');
}

nav button[aria-label="New folder"] i:after,
nav button[aria-label="Nueva carpeta"] i:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"></path> <line x1="12" y1="11" x2="12" y2="17"></line> <line x1="9" y1="14" x2="15" y2="14"></line> </svg>');
}

nav button[aria-label="New file"] i:after,
nav button[aria-label="Nuevo archivo"] i:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M14.5 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V7.5L14.5 2z"></path> <polyline points="14 2 14 8 20 8"></polyline> <line x1="12" y1="18" x2="12" y2="12"></line> <line x1="9" y1="15" x2="15" y2="15"></line> </svg>');
}

nav button[aria-label="Settings"] i:after,
nav button[aria-label="Ajustes"] i:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12.22 2h-.44a2 2 0 00-2 2v.18a2 2 0 01-1 1.73l-.43.25a2 2 0 01-2 0l-.15-.08a2 2 0 00-2.73.73l-.22.38a2 2 0 00.73 2.73l.15.1a2 2 0 011 1.72v.51a2 2 0 01-1 1.74l-.15.09a2 2 0 00-.73 2.73l.22.38a2 2 0 002.73.73l.15-.08a2 2 0 012 0l.43.25a2 2 0 011 1.73V20a2 2 0 002 2h.44a2 2 0 002-2v-.18a2 2 0 011-1.73l.43-.25a2 2 0 012 0l.15.08a2 2 0 002.73-.73l.22-.39a2 2 0 00-.73-2.73l-.15-.08a2 2 0 01-1-1.74v-.5a2 2 0 011-1.74l.15-.09a2 2 0 00.73-2.73l-.22-.38a2 2 0 00-2.73-.73l-.15.08a2 2 0 01-2 0l-.43-.25a2 2 0 01-1-1.73V4a2 2 0 00-2-2z"></path> <circle cx="12" cy="12" r="3"></circle> </svg>');
}

nav button[aria-label="Logout"] i:after,
nav button[aria-label="Cerrar sesión"] i:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"></path> <polyline points="16 17 21 12 16 7"></polyline> <line x1="21" y1="12" x2="9" y2="12"></line> </svg>');
}


/* Breadcrumb icon style */
/* Disable old icons */
.breadcrumbs i.material-icons {
    color: transparent !important;
}

/* Position old icons */
.breadcrumbs a,
.breadcrumbs span,
.breadcrumbs span span {
    position: relative;
}

/* Position new icons */
.breadcrumbs span span i:after,
.breadcrumbs span i:after,
.breadcrumbs i:after {
    position: absolute;
    display: block;
}

/* Home in mosaic/list view */
.breadcrumbs a[aria-label="Home"] i:after,
.breadcrumbs a[aria-label="Inicio"] i:after {
    top: 0.15em;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"></path> <polyline points="9 22 9 12 15 12 15 22"></polyline> </svg>');
}

/* Home in editor view */
.breadcrumbs span[aria-label="Home"] i:after,
.breadcrumbs span[aria-label="Inicio"] i:after {
    top: 0.15em;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"></path> <polyline points="9 22 9 12 15 12 15 22"></polyline> </svg>') !important;
}

/* Chevron in mosaic/list view */
.breadcrumbs span i:after {
    top: -0.15em;
    left: 0.15em;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="9 18 15 12 9 6"></polyline> </svg>');
}

/* Chevron in editor view */
#editor-container .breadcrumbs span i:after {
    top: 0;
    left: 0;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="9 18 15 12 9 6"></polyline> </svg>');
}


/* Folder/File/Shell icon style */
/* Disable old icons */
#listing.mosaic i.material-icons:not(div[aria-label="Clear"] i),
#listing.list i.material-icons:not(.item.header i):not(div[aria-label="Clear"] i),
.shell .shell__prompt i.material-icons,
.card .card-action .action i.material-icons,
main div .message i.material-icons,
#previewer button i.material-icons,
#previewer .info .title i.material-icons,
#previewer .preview .info div .button i.material-icons {
    color: transparent !important;
    position: relative;
}

/* Position new icons */
#listing.mosaic div i:not(div[aria-label="Clear"] i):after,
#listing.list div i:not(.item.header i):not(div[aria-label="Clear"] i):after,
.shell .shell__prompt i:after,
.card .card-action .action i:after,
#previewer button i:after,
#previewer .info .title i:after,
#previewer .preview .info div .button i:after {
    position: absolute;
    display: block;
}

main div .message i:after {
    display: block;
}


/* Folders in mosaic view */
#listing.mosaic div[data-dir="true"]:not(#multiple-selection) i:after {
    top: -2px;
    left: 4px;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/> </svg>');
}

/* Folders in list view */
#listing.list div[data-dir="true"]:not(#multiple-selection) i:after {
    top: 0;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/> </svg>') !important;
}

/* Folders in "Move to" menu */
.file-list li:before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/> </svg>');
}

/* Files in mosaic view */
#listing.mosaic div i:not(div[aria-label="Clear"] i):after {
    width: 97%;
    top: -2px;
    left: 4px;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <path d="M14.5 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V7.5L14.5 2z"></path> <polyline points="14 2 14 8 20 8"></polyline> </svg>');
}

/* Files in list view */
#listing.list div i:not(.item.header i):not(div[aria-label="Clear"] i):after {
    top: 0;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M14.5 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V7.5L14.5 2z"></path> <polyline points="14 2 14 8 20 8"></polyline> </svg>');
}

/* File in "Upload" menu */
.card .card-action .action:nth-child(1) i:after {
    top: -2px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <path d="M14.5 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V7.5L14.5 2z"></path> <polyline points="14 2 14 8 20 8"></polyline> </svg>');
}

/* Folder in "Upload" menu */
.card .card-action .action:nth-child(2) i:after {
    top: -2px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/> </svg>');
}

/* Chevron in shell */
.shell .shell__prompt i:after {
    top: 2px;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="9 18 15 12 9 6"></polyline> </svg>');
}

/* Left chevron in file preview */
#previewer button[aria-label="Previous"] i:after,
#previewer button[aria-label="Anterior"] i:after {
    top: 0.4em;
    left: 0.38em;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="15 18 9 12 15 6"></polyline> </svg>');
}

/* Right chevron in file preview */
#previewer button[aria-label="Next"] i:after,
#previewer button[aria-label="Siguiente"] i:after {
    top: 0.4em;
    left: 0.42em;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="9 18 15 12 9 6"></polyline> </svg>');
}

/* Contemplated for unreachable buttons without title, for example HD in file preview */
#previewer button:not([title]) i.material-icons {
    color: var(--icon) !important;
}
/* Warning in file preview */
#previewer .info .title i:after {
    top: 0px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="8" x2="12" y2="12"></line> <line x1="12" y1="16" x2="12.01" y2="16"></line> </svg>');
}

/* Download in file preview */
#previewer .preview .info div .button:first-child i:after {
    top: 0px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"></path> <polyline points="7 10 12 15 17 10"></polyline> <line x1="12" y1="15" x2="12" y2="3"></line> </svg>');
}

/* Open in file preview */
#previewer .preview .info div .button:last-child i:after {
    top: 0px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path> <polyline points="15 3 21 3 21 9"></polyline> <line x1="10" y1="14" x2="21" y2="3"></line> </svg>');
}

/* Emote in empty folders */
main div .message i:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <path d="M16 16s-1.5-2-4-2-4 2-4 2"></path> <line x1="9" y1="9" x2="9.01" y2="9"></line> <line x1="15" y1="9" x2="15.01" y2="9"></line> </svg>');
}


/* Search icon style */
/* Disable old icons */
#search #result .boxes div i.material-icons,
#search #result div li i.material-icons {
    color: transparent !important;
}

/* Position old icons */
#search #result div li a {
    position: relative;
}

/* Position new icons */
#search #result .boxes div i:after,
#search #result div li i.material-icons:after {
    position: absolute;
    display: block;
}

/* Folder icon in search list */
#search #result div li a[href$="/"] i:after {
    top: 0.65em;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"></path> </svg>') !important;
}

/* File icon in search list */
#search #result div li a i:after {
    top: 0.65em;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M14.5 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V7.5L14.5 2z"></path> <polyline points="14 2 14 8 20 8"></polyline> </svg>');
}

#search #result .boxes div[aria-label="Images"] i:after {
    top: 0.27em;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect> <circle cx="8.5" cy="8.5" r="1.5"></circle> <polyline points="21 15 16 10 5 21"></polyline> </svg>');
}

#search #result .boxes div[aria-label="Music"] i:after,
#search #result .boxes div[aria-label="Música"] i:after {
    top: 0.27em;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <path d="M9 18V5l12-2v13"></path> <circle cx="6" cy="18" r="3"></circle> <circle cx="18" cy="16" r="3"></circle> </svg>');
}

#search #result .boxes div[aria-label="Video"] i:after,
#search #result .boxes div[aria-label="Vídeo"] i:after {
    top: 0.27em;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect> <line x1="7" y1="2" x2="7" y2="22"></line> <line x1="17" y1="2" x2="17" y2="22"></line> <line x1="2" y1="12" x2="22" y2="12"></line> <line x1="2" y1="7" x2="7" y2="7"></line> <line x1="2" y1="17" x2="7" y2="17"></line> <line x1="17" y1="17" x2="22" y2="17"></line> <line x1="17" y1="7" x2="22" y2="7"></line> </svg>');
}

#search #result .boxes div[aria-label="PDF"] i:after {
    top: 0.27em;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <path d="M14.5 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V7.5L14.5 2z"></path> <polyline points="14 2 14 8 20 8"></polyline> <line x1="16" y1="13" x2="8" y2="13"></line> <line x1="16" y1="17" x2="8" y2="17"></line> <line x1="10" y1="9" x2="8" y2="9"></line> </svg>');
}


/* Settings icon style */
/* Disable old icons */
.dashboard .card-content.full .small a i.material-icons,
.dashboard .card .message i.material-icons {
    color: transparent !important;
}

/* Position old icons */
.dashboard .card-content.full .small a,
.dashboard .card .message {
    position: relative;
}

/* Position new icons */
.dashboard .card-content.full .small a i:after,
.dashboard .card .message i:after {
    position: absolute;
    display: block;
    top: 0em;
}

.dashboard .card-content.full .small a i:after {
    top: -0.5em;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="2" x2="22" y2="6"></line> <path d="M7.5 20.5L19 9l-4-4L3.5 16.5 2 22z"></path> </svg>');
}

.dashboard .card .message i:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="%238eb2ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <path d="M16 16s-1.5-2-4-2-4 2-4 2"></path> <line x1="9" y1="9" x2="9.01" y2="9"></line> <line x1="15" y1="9" x2="15.01" y2="9"></line> </svg>');
}

/* ############### END ICON THEME ############### */