.theme-light {
    --primary: white;
    --secondary: white;
    --light-gray: #ededed;
    --border-color: #8cd0ea;
    --border-color-bis: #ededed;
    --border-color-sdbx: #e3e3e3;
    --border-thumbnail: 1px solid #ededed;
    --nav1: #fafafa;
    --color-font: #616161;
    --color-font-bis: black;
    --nav-sdbx-font: #616161;
    --nav-sdbx-border: #e0e0e0;
    --nav-sdbx-shadow: 0 3px 5px .3px rgba(0, 0, 0, .24);
    --color-blue: #0082c9;
    --mask: white;
    --menu-context: white;
    --svg-color: invert(0%) sepia(3%) saturate(10%) hue-rotate(120deg) brightness(104%) contrast(100%);
    --opacity-actions: .5;
    --arrow_nav: white;
    --context-shadow: drop-shadow(0 1px 3px var(--color-box-shadow));
    --close-svg: invert(10%) sepia(21%) saturate(14%) hue-rotate(321deg) brightness(87%) contrast(85%);
    --search-border: #ececec;
    --search-border-activefocus: #e0e0e0;
    --shared-svg: invert(28%) sepia(0%) saturate(11%) hue-rotate(216deg) brightness(98%) contrast(89%);
    --yellow-svg: invert(86%) sepia(35%) saturate(2572%) hue-rotate(337deg) brightness(89%) contrast(97%);
    --black-svg: invert(0%) sepia(0%) saturate(7491%) hue-rotate(255deg) brightness(114%) contrast(100%);
    --box-nav-shadow: drop-shadow(0 1px 5px var(--color-box-shadow));
    --new-file-menu-border: none;
    --oc-dialog-shadow: 0 0 30px rgba(77, 77, 77, .5);
    --triangle-app: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld2JveD0iMCAwIDE2IDE2IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Ik00IDZsNCA0IDQtMy45OTR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+Cg==);
    --element-selected: #dbdbdb;
    --input-rename: white;
    --summary-opacity: .4;
    --input-new: white;
    --input-new-border: #dbdbdb;
    --shared-opacity: .2;
    --mobile-sdbx-menu: white;
    --border-appside: #ededed;
    --popover_shadow: drop-shadow(0 1px 10px var(--color-box-shadow));
}

.theme-dark {
    --primary: #1F1F1F;
    --secondary: #282828;
    --light-gray: #3e3e3e;
    --border-color: #282828;
    --border-color-bis: #282828;
    --border-color-sdbx: #1F1F1F;
    --border-thumbnail: none;
    --nav1: #1F1F1F;
    --color-font: #939392;
    --color-font-bis: #939392;
    --nav-sdbx-font: #939392;
    --nav-sdbx-border: #1F1F1F;
    --nav-sdbx-shadow: 0;
    --color-blue: #2B85B5;
    --mask: #1F1F1F;
    --menu-context: #1F1F1F;
    --svg-color: invert(72%) sepia(3%) saturate(75%) hue-rotate(22deg) brightness(80%) contrast(91%);
    --opacity-actions: 1;
    --arrow_nav: #3e3e3e;
    --context-shadow: none;
    --close-svg: invert(66%) sepia(2%) saturate(157%) hue-rotate(22deg) brightness(89%) contrast(87%);
    --search-border: #1F1F1F;
    --search-border-activefocus: #1F1F1F;
    --shared-svg: invert(72%) sepia(3%) saturate(75%) hue-rotate(22deg) brightness(80%) contrast(91%);
    --yellow-svg: invert(86%) sepia(35%) saturate(2572%) hue-rotate(337deg) brightness(89%) contrast(97%);
    --black-svg: invert(72%) sepia(3%) saturate(75%) hue-rotate(22deg) brightness(80%) contrast(91%);
    --box-nav-shadow: 0;
    --new-file-menu-border: 1px solid var(--primary);
    --oc-dialog-shadow: 0 0 0 rgba(77, 77, 77, .5);
    --triangle-app: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld2JveD0iMCAwIDE2IDE2IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Ik00IDZsNCA0IDQtMy45OTR6IiBmaWxsPSIjZmZmIi8+PC9zdmc+Cg==);
    --element-selected: #3e3e3e;
    --input-rename: #3e3e3e;
    --summary-opacity: .7;
    --input-new: #282828;
    --input-new-border: #282828;
    --shared-opacity: 1;
    --mobile-sdbx-menu: #3e3e3e;
    --border-appside: 0;
    --popover_shadow: 0
}
/* NC 20 */
.popover{
    filter: var(--popover_shadow) !important
}
.popover__wrapper > .popover__inner > div > div > ul > li:nth-child(1) > span:nth-child(1){
    margin-top: 0 !important
}
.popover__arrow{
    border-color: var(--primary) !important
}

.popover__wrapper > .popover__inner{
    background: var(--primary)
}
.popover__wrapper > .popover__inner > div > div > ul > li > button,
.popover__wrapper > .popover__inner > div > div > ul > li > span{
    color: var(--color-font) !important
}
#emptycontent > h2,
.app-sidebar-header__maintitle{
    color: var(--color-font)
}
#app-sidebar-vue{
    border-left: 1px solid var(--border-appside);
    background: var(--secondary)
}
#sharing > .sharing-entry,
#collection-list,
#sharing-inherited-shares{
    display: none;
}
#app-sidebar-vue{
    margin-top: 112px;
}
#header .header-right>div>.menu:after,
.header-menu__carret{
    border-bottom-color: var(--primary) !important;
}
.header-menu__wrapper{
    filter: var(--context-shadow) !important
}
.unified-search__result-line-one{
    color: var(--color-font) !important
}
#header .header-right>div>.menu.settings-menu>ul li a:hover,
.unified-search__result:hover{
    background: var(--light-gray) !important
}
.unified-search__result--focused{
    background: var(--secondary) !important;
}
.unified-search__form > input[type="search"]{
    background: var(--primary) !important;
    color: var(--color-font);
    border-color: var(--color-blue)
}
#header-menu-unified-search > .header-menu__content > .empty-content > h2{
    color: var(--color-font) !important
}


.unified-search__input-wrapper,
#header-menu-unified-search{
    background: var(--secondary) !important
}
#appmenu > li > a > span{
    font-weight: 500;
    letter-spacing: 0px;
}
.bubble li>.menuitem:hover{
    background-color: var(--light-gray) !important;
    /*background-color: transparent !important;*/
    color: var(--color-font);
}
#settings #expand:active #expandDisplayName, #settings #expand:active .avatardiv, #settings #expand:focus #expandDisplayName, #settings #expand:focus .avatardiv, #settings #expand:hover #expandDisplayName, #settings #expand:hover .avatardiv {
    border-color: var(--border-color-bis) !important;
}

#app-navigation:not(.vue) .collapsible:before{
    display: none;
}
#body-settings #header,
#body-user #header{
    background-color: var(--secondary) !important
}
#app-navigation:not(.vue)>ul>li a.active,
#app-navigation>ul>li>a:hover{
    background-color: var(--light-gray) !important;
    /*background-color: transparent !important;*/
    box-shadow: inset 4px 0 var(--color-primary-element);
}
.unified-search__trigger > svg{
    fill: var(--color-font-bis)
}
/* END NC 20 */
.sharing-entry__desc > h5{
    color: #616161;
    color: var(--color-font);
}
#fileList>tr>.filesize {
    color: #616161!important;
    color: var(--color-font)!important
}

#controls>.breadcrumb>div>.icon-shared {
    opacity: .2;
    opacity: var(--shared-opacity)
}

.filenameform {
    border: 1px solid var(--input-new-border);
    background: var(--input-new)!important
}

.filenameform>input {
    border: 0
}

.oneline>input.shareWithField {
    border-color: #3e3e3e;
    border-color: var(--element-selected)
}

.shareWithField {
    cursor: text;
    background-color: #fff!important;
    background-color: var(--primary)!important;
    border-color: #8cd0ea;
    border-color: var(--element-selected)
}

#modified>span,
#app-sidebar>.detailFileInfoContainer>.mainFileInfoView>.thumbnailContainer>.thumbnail>pre {
    color: #000;
    color: var(--color-font-bis)
}

.summary {
    opacity: .4;
    opacity: var(--summary-opacity)
}

#editor>.editor__content>div>div>pre>code {
    color: #000;
    color: var(--color-font-bis)
}

#editor,
#editor-wrapper:not(.richEditor) .ProseMirror pre,
#editor>.editor__content>div>div {
    background: #fff!important;
    background: var(--secondary)!important
}

#fileList>tr>.filename>form>input {
    background: #fff;
    background: var(--input-rename);
    border-color: #8cd0ea;
    border-color: var(--border-color);
    color: #939392;
    color: var(--color-font)
}

.multiselect__content-wrapper,
.multiselect__tags {
    border-color: #fff!important;
    border-color: var(--element-selected)!important
}

#languageinput {
    background: linear-gradient(45deg, transparent 50%, #616161 50%), linear-gradient(135deg, #616161 50%, transparent 50%);
    background: linear-gradient(45deg, transparent 50%, var(--color-font) 50%), linear-gradient(135deg, var(--color-font) 50%, transparent 50%);
    background-position: calc(100% - 21px) calc(1em + 2px), calc(100% - 16px) calc(1em + 2px), 100% 0;
    background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
    background-repeat: no-repeat;
    border-color: #ededed;
    border-color: var(--border-color-bis);
    color: var(--color-font)
}

#avatarform>h3>label,
#displayname,
#displaynameform>h3>label,
#language>h3>label {
    background: #fff;
    background: var(--primary);
    color: #616161;
    color: var(--color-font)
}

.resource-list-details>li:hover {
    background-color: #ededed!important;
    background-color: var(--light-gray)!important
}

#oc-dialog-filepicker-content .filepicker_element_selected {
    background-color: #dbdbdb;
    background-color: var(--element-selected)
}

#new-user {
    background: #fff!important;
    background: var(--primary)!important
}

#app-content>.row>.groups>.multiselect,
#app-content>.row>form>input[type=email]:nth-child(1),
#app-content>.row>form>input[type=password]:nth-child(1),
#app-content>.row>form>input[type=text]:nth-child(1),
#app-sidebar,
#new-user>div>input[type=text] {
    background: #fff!important;
    background: var(--secondary)!important
}

#app-content>.row,
.apps-list-container>.section>div {
    border-color: #ededed!important;
    border-color: var(--border-color-bis)!important
}

#grid-header {
    background: #fff!important;
    background: var(--primary)!important
}

.action-item__menu>ul>li {
    background: #fff;
    background: var(--primary)
}

#security-warning,
.action-button__text,
.collection-item-name,
.inlineblock,
.option__title,
.resource-name,
[rel="noreferrer noopener"] {
    color: #616161;
    color: var(--color-font)!important
}

.apps-list-container>.section:hover,
.multiselect__option--highlight {
    background: #ededed!important;
    background: var(--light-gray)!important
}

.multiselect__content>.multiselect__element>span {
    background: #fff;
    background: var(--primary)
}

.multiselect__content {
    background: #fff;
    background: var(--primary)
}

#headerSelection>[for=select_all_files],
#headerSelection>[for=select_all_files]:before {
    visibility: hidden
}

#content > #app-content > #searchresults,
#content > #app-sidebar > div.app-sidebar-tabs__content > #sharing > #collection-list,
#content > #app-sidebar > div.app-sidebar-tabs__content > #sharing > li.sharing-entry__internal,
#content > #app-sidebar > div.app-sidebar-tabs__content > #sharing > #sharing-inherited-shares,
#content > #app-content > #app-content-files > #filelist-header,
#body-settings>#content>#app-navigation>ul>li:not(:first-child),
#filestable>tfoot>.summary>td:nth-child(2)>.info>.hiddeninfo {
    display: none
}

.oc-dialog {
    box-shadow: 0 0 30px rgba(77, 77, 77, .5)!important;
    box-shadow: var(--oc-dialog-shadow)!important
}

.icon-folder {
    background-image: var(--icon-folder-000)!important
}

#app-navigation:not(.vue) .collapsible:before {
    background-color: #fff;
    background-color: var(--secondary);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld2JveD0iMCAwIDE2IDE2IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Ik00IDZsNCA0IDQtMy45OTR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+Cg==);
    background-image: var(--triangle-app)
}

.nav-icon-shareoverview:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 14px;
    vertical-align: sub;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxNiIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxjaXJjbGUgY3g9IjMuNSIgY3k9IjgiIHI9IjIuNSIgZmlsbD0iIzAwMCIvPjxjaXJjbGUgY3k9IjEyLjUiIGN4PSIxMi41IiByPSIyLjUiIGZpbGw9IiMwMDAiLz48Y2lyY2xlIGN4PSIxMi41IiBjeT0iMy41IiByPSIyLjUiIGZpbGw9IiMwMDAiLz48cGF0aCBkPSJtMy41IDggOSA0LjVtLTktNC41IDktNC41IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIvPjwvc3ZnPgo=);
    filter: invert(0) sepia(0) saturate(7491%) hue-rotate(255deg) brightness(114%) contrast(100%);
    filter: var(--black-svg)
}

.nav-icon-shareoverview {
    background: 0;
    padding-left: 14px!important
}

.nav-icon-favorites:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 14px;
    vertical-align: sub;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE2IDE2IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Im04IDAuNSAyLjIgNS4zIDUuOCAwLjQ1LTQuNSAzLjc1IDEuNSA1LjUtNS0zLjEtNSAzLjEgMS41LTUuNS00LjUtMy43NSA1LjgtMC40NXoiIGZpbGw9IiMwMDAiLz48L3N2Zz4K);
    filter: invert(0) sepia(0) saturate(7491%) hue-rotate(255deg) brightness(114%) contrast(100%);
    filter: var(--black-svg)
}

.nav-icon-favorites {
    background: 0;
    padding-left: 14px!important
}

.nav-icon-files {
    background: 0;
    padding-left: 14px!important
}

.nav-icon-files:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 14px;
    vertical-align: sub;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiB2ZXJzaW9uPSIxLjEiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Im0xLjUgMmMtMC4yNSAwLTAuNSAwLjI1LTAuNSAwLjV2MTFjMCAwLjI2IDAuMjQgMC41IDAuNSAwLjVoMTNjMC4yNiAwIDAuNS0wLjI0MSAwLjUtMC41di05YzAtMC4yNS0wLjI1LTAuNS0wLjUtMC41aC02LjVsLTItMnoiIGZpbGw9IiMwMDAiLz48L3N2Zz4K);
    filter: invert(0) sepia(0) saturate(7491%) hue-rotate(255deg) brightness(114%) contrast(100%);
    filter: var(--black-svg)
}

::-webkit-input-placeholder {
    color: #616161!important;
    color: var(--color-font)!important
}

:-moz-placeholder {
    color: #616161!important;
    color: var(--color-font)!important;
    opacity: 1
}

::-moz-placeholder {
    color: #616161!important;
    color: var(--color-font)!important;
    opacity: 1
}

:-ms-input-placeholder {
    color: #616161!important;
    color: var(--color-font)!important
}

::-ms-input-placeholder {
    color: #616161!important;
    color: var(--color-font)!important
}

::placeholder {
    color: #616161!important;
    color: var(--color-font)!important
}

.new-share {
    border-color: #ededed!important;
    border-color: var(--border-color-bis)!important
}

.share-menu>.popovermenu>ul>li>a>span:nth-child(3),
.share-menu>.popovermenu>ul>li>span>label {
    color: #616161;
    color: var(--color-font)
}

.share-menu>.popovermenu {
    background: #fff;
    background: var(--primary)
}

#picker-filestable>tbody>tr>td {
    border-color: #ededed!important;
    border-color: var(--border-color-bis)!important
}

tbody tr:active,
tbody tr:focus,
tbody tr:hover {
    background-color: #ededed;
    background-color: var(--light-gray)
}

#picker-filestable,
#picker-filestable>thead>tr {
    background: #fff!important;
    background: var(--secondary)!important
}

.oc-dialog,
.oc-dialog-buttonrow,
.oc-dialog-title {
    background: #fff!important;
    background: var(--secondary)!important
}

.newFileMenu>ul {
    border-left: none;
    border-left: var(--new-file-menu-border);
    border-bottom: none;
    border-bottom: var(--new-file-menu-border);
    border-top: none;
    border-top: var(--new-file-menu-border)
}

.filename-parts,
.filesSelectMenu>ul>li a>span:nth-child(2) {
    color: #616161;
    color: var(--color-font)
}

#expanddiv>ul>li>a>img {
    filter: invert(0) sepia(0) saturate(7491%) hue-rotate(255deg) brightness(114%) contrast(100%);
    filter: var(--black-svg)
}

#expanddiv>ul>li>a {
    color: #616161!important;
    color: var(--color-font)!important
}

#header .header-left>nav>.menu,
#header .header-right>div>.menu {
    filter: drop-shadow(0 1px 5px var(--color-box-shadow));
    filter: var(--box-nav-shadow)
}

#header .header-left>nav>.menu:after,
.app-navigation-entry-menu.menu-left:after,
.bubble.menu-left:after,
.popovermenu.menu-left:after {
    border-bottom-color: #fff!important;
    border-bottom-color: var(--secondary)!important
}

#expanddiv {
    background-color: #fff!important;
    background-color: var(--secondary)!important;
    border-bottom: 1px solid var(--primary);
    border-left: 1px solid var(--primary);
    border-right: 1px solid var(--primary)
}

#menu_toggle_mobile_div_2>div {
    background: white;
    background: var(--mobile-sdbx-menu);
    border-color: #e3e3e3;
    border-color: var(--border-color-sdbx)
}

.multiselect--single {
    background-color: #fff!important;
    background-color: var(--secondary)!important
}

@media (max-width:766px) {
    #app-sidebar {
        height: calc(100vh - 105px)!important
    }
}

.icon-menu {
    filter: invert(0) sepia(0) saturate(7491%) hue-rotate(255deg) brightness(114%) contrast(100%);
    filter: var(--black-svg)
}

.fileActionsMenu>ul>li>a>span:nth-child(2) {
    color: #616161;
    color: var(--color-font)
}

.popovermenu:after {
    border-bottom-color: #fff;
    border-bottom-color: var(--secondary)
}

.app-navigation-entry-menu,
.bubble,
.popovermenu {
    background: #fff;
    background: var(--secondary)
}

#picker-view-toggle {
    display: none
}

#switch:hover {
    filter: invert(86%) sepia(35%) saturate(2572%) hue-rotate(337deg) brightness(89%) contrast(97%);
    filter: var(--yellow-svg)
}

.multiselect__input {
    background: #fff!important;
    background: var(--secondary)!important
}

#collection-select-container>.hint,
.shareWithList>li:nth-child(1)>.username {
    color: #616161;
    color: var(--color-font)
}

.app-navigation-caption,
.fileName>.ellipsis,
.oc-dialog-title {
    color: #616161;
    color: var(--color-font)
}

table tr[data-has-preview=true] .thumbnail {
    border: 1px solid #ededed;
    border: var(--border-thumbnail)
}

#app-content-favorites,
#app-content-shareoverview {
    margin-top: 160px
}

.crumb,
.crumbhome {
    filter: invert(28%) sepia(0) saturate(11%) hue-rotate(216deg) brightness(98%) contrast(89%);
    filter: var(--shared-svg)
}

.icon-settings-white,
#app-navigation>ul>li>a>img,
#oc-dialog-filepicker-content .dirtree div:first-child a,
.action-item__menutoggle,
.icon-add,
.icon-checkmark,
.icon-clippy,
.icon-close,
.icon-confirm,
.icon-contacts-dark,
.icon-delete,
.icon-details,
.icon-download,
.icon-edit,
.icon-external,
.icon-folder,
.icon-goto,
.icon-home,
.icon-info,
.icon-public,
.icon-rename,
.icon-share,
.icon-shared,
.icon-upload,
.item-toggleSelectionMode,
.oc-dialog-close,
.sort-indicator {
    filter: invert(0) sepia(0) saturate(7491%) hue-rotate(255deg) brightness(114%) contrast(100%);
    filter: var(--black-svg)
}

.icon-more {
    filter: invert(10%) sepia(21%) saturate(14%) hue-rotate(321deg) brightness(87%) contrast(85%);
    filter: var(--close-svg)
}

#app-sidebar>.app-sidebar-tabs__content>#tab-partage>#collection-list>li>#collection-select-container>p {
    z-index: 2
}

.action-item>.action-item__menu>ul>li>button>p {
    color: #616161;
    color: var(--color-font);
    margin-left: 0
}

.action-item>.action-item__menu>ul>li:nth-child(3) {
    border-bottom: 1px solid #282828!important;
    border-bottom: 1px solid var(--border-color-bis)!important
}

.action-item>.action-item__menu>ul>li>span>label,
.action-button__text,
.app-sidebar-header__subtitle,
.app-sidebar-header__title,
#tab-partage {
    color: #616161;
    color: var(--color-font)
}

#tab-partage>li.sharing-entry {
    display: none
}

.icon-password,
.icon-calendar-dark,
#app-sidebar>.app-sidebar-tabs__content>#tab-partage>#sharing-inherited-shares>li>button {
    filter: invert(0%) sepia(0%) saturate(7491%) hue-rotate(255deg) brightness(114%) contrast(100%);
    filter: var(--black-svg)
}

#app-sidebar {
    background-color: #fff;
    background-color: var(--secondary);
    border-left-color: #ededed!important;
    border-left-color: var(--border-color-bis)!important
}

#searchresults>table>tbody>tr.result:nth-child(2)>td {
    border-top: 1px solid #ededed;
    border-top: 1px solid var(--border-color-bis)
}

#searchresults>table>tbody>.result td {
    border-bottom: 1px solid #ededed;
    border-bottom: 1px solid var(--border-color-bis)
}

#searchresults table {
    padding-left: 0
}

#searchresults>table>tbody>.result>.info>a {
    color: #616161;
    color: var(--color-font)
}

#searchresults>table>tbody>.result:hover {
    background: #ededed;
    background: var(--light-gray)
}

.searchbox input[type=search]:active,
.searchbox input[type=search]:focus,
.searchbox input[type=search]:valid {
    border-color: #ececec!important;
    border-color: var(--search-border)!important
}

.icon-search {
    filter: invert(10%) sepia(21%) saturate(14%) hue-rotate(321deg) brightness(87%) contrast(85%);
    filter: var(--close-svg)
}

.searchbox input[type=search]~.icon-close-white,
.searchbox input[type=search]~.icon-close-white:active,
.searchbox input[type=search]~.icon-close-white:focus,
.searchbox input[type=search]~.icon-close-white:hover {
    filter: invert(10%) sepia(21%) saturate(14%) hue-rotate(321deg) brightness(87%) contrast(85%);
    filter: var(--close-svg);
    right: 8px
}

#settings #expand:active #expandDisplayName,
#settings #expand:active .avatardiv,
#settings #expand:focus #expandDisplayName,
#settings #expand:focus .avatardiv,
#settings #expand:hover #expandDisplayName,
#settings #expand:hover .avatardiv {
    border-color: #fff
}

.fileactions>a>span:nth-child(2),
tr>.date>span {
    color: #616161!important;
    color: var(--color-font)!important
}

.app-navigation-entry-menu,
.bubble,
.popovermenu {
    filter: drop-shadow(0 1px 3px var(--color-box-shadow));
    filter: var(--context-shadow)
}

.newFileMenu>ul>li>a>span:nth-child(2),
.newFileMenu>ul>li>label>span:nth-child(2) {
    color: #616161;
    color: var(--color-font)
}

.newFileMenu>ul {
    background: #fff;
    background: var(--secondary)
}

.app-navigation-entry-menu.menu-left:after,
.bubble.menu-left:after,
.popovermenu.menu-left:after {
    border-bottom-color: #fff;
    border-bottom-color: var(--arrow_nav)
}

.selectedActions a {
    opacity: .5;
    opacity: var(--opacity-actions)
}

#headerName-container>a>span,
#headerSize>a>span,
#selectedActionsList>a span:nth-child(2) {
    color: #000;
    color: var(--color-font-bis)
}

#filestable>thead>tr>th {
    background: #fff;
    background: var(--primary)
}

#oc-dialog-filepicker-content>.actions {
    background: #ededed!important;
    background: var(--light-gray)!important;
    border-color: #ededed!important;
    border-color: var(--light-gray)!important
}

#controls>.actions>.button {
    background: #ededed;
    background: var(--light-gray);
    border-color: #ededed;
    border-color: var(--light-gray)
}

#app-navigation:not(.vue)>ul>li>a,
#app-navigation:not(.vue)>ul>li>ul>li>a {
    color: #616161;
    color: var(--color-font)
}

#switch {
    filter: invert(0) sepia(3%) saturate(10%) hue-rotate(120deg) brightness(104%) contrast(100%);
    filter: var(--svg-color)
}

.app-files #app-content {
    transition: none
}

#rightClickMenu>ul>li>a>span:nth-child(2) {
    color: #616161;
    color: var(--color-font)
}

#rightClickMenu {
    background-color: #fff;
    background-color: var(--secondary)
}

.mask {
    background: #fff;
    background: var(--mask)
}

tfoot {
    color: #616161;
    color: var(--color-font)
}

table>tbody>tr>td,
table>thead>tr>th {
    border-color: #ededed;
    border-color: var(--border-color-bis)
}

#filestable>thead {
    background: #fff;
    background: var(--primary)
}

#controls {
    background-color: #fff;
    background-color: var(--primary)
}

.innernametext {
    color: #000;
    color: var(--color-font-bis)
}

#filestable tbody .name:focus,
#filestable tbody tr.highlighted,
#filestable tbody tr.highlighted .name:focus,
#filestable tbody tr.searchresult,
#filestable tbody tr.selected,
#filestable tbody tr:active,
#filestable tbody tr:focus,
#filestable tbody tr:hover,
#filestable tbody tr:hover .filename form,
table tr.mouseOver td {
    background-color: #ededed;
    background-color: var(--light-gray)
}

#app-content {
    background: #fff!important;
    background: var(--primary)!important;
    transition: 0
}

#appmenu li a:focus span,
#appmenu li a:focus+span,
#appmenu li:focus span,
#appmenu li:hover a+span,
#appmenu li:hover span {
    background-color: #0082c9;
    background-color: var(--color-blue)
}

#app-navigation {
    border-color: #ededed!important;
    border-color: var(--border-color-bis)!important;
    background-color: #fff!important;
    background-color: var(--secondary)!important
}

#switch {
    cursor: pointer
}

#body-public #header,
#body-settings #header,
#body-user #header {
    background-color: #fff;
    background-color: var(--secondary);
    border-bottom: 1px solid #e0e0e0;
    border-bottom: 1px solid var(--nav-sdbx-border)
}

.button.primary,
.button.primary:active,
.primary,
.primary:active,
button.primary,
button.primary:active,
input[type=button].primary,
input[type=button].primary:active,
input[type=submit].primary,
input[type=submit].primary:active {
    border-color: #745bca;
    background-color: #947bea
}

.button.primary:focus,
.button.primary:hover,
.primary:focus,
.primary:hover,
button.primary:focus,
button.primary:hover,
input[type=button].primary:focus,
input[type=button].primary:hover,
input[type=submit].primary:focus,
input[type=submit].primary:hover {
    background-color: #8b75e4
}

.button.primary:active,
.button.primary:disabled,
.button.primary:disabled:focus,
.button.primary:disabled:hover,
.primary:active,
.primary:disabled,
.primary:disabled:focus,
.primary:disabled:hover,
button.primary:active,
button.primary:disabled,
button.primary:disabled:focus,
button.primary:disabled:hover,
input[type=button].primary:active,
input[type=button].primary:disabled,
input[type=button].primary:disabled:focus,
input[type=button].primary:disabled:hover,
input[type=submit].primary:active,
input[type=submit].primary:disabled,
input[type=submit].primary:disabled:focus,
input[type=submit].primary:disabled:hover {
    background-color: #745bca
}

#firstrunwizard .logo,
#header .logo {
    background-image: url(../img/logo.svg);
    width: 256px;
    height: 128px
}

#header .logo-icon {
    width: 62px;
    height: 34px
}

#app-content>#security>div,
#app-navigation>ul>[data-id=extstoragemounts],
#app-navigation>ul>[data-id=recent],
#app-settings,
#appmenu li a.active::before,
#appmenu li a:focus::before,
#appmenu li:hover a.active::before,
#appmenu li:hover a::before,
#appmenu>[data-id=activity],
#appmenu>[data-id=gallery],
#emailform,
#lost-password,
#nextcloud,
#quota,
#security-password,
#two-factor-auth,
#view-toggle,
.header-right>.notifications {
    display: none!important
}

@media all and (min-width:1024px) {
    #body-settings>#content>.app-settings-content,
    #body-settings>.app-settings[role=main]>#app-content {
        margin-top: 112px
    }
}

#app-sidebar {
    max-height: 100vh;
    height: calc(100vh - 162px);
    margin-top: 112px
}

#app-sidebar,
.nav--is-open,
.navigation--main,
.visually-hidden {
    overflow: hidden
}

#body-settings>#content>.user-list-grid {
    margin-top: 125px
}

#addressform,
#app-navigation>ul>li:nth-child(3)>a[href="/index.php/settings/user/sharing"],
#app-password-form,
#body-public>footer>p:last-child,
#locale,
#phoneform,
#twitterform,
#websiteform,
.federation-menu,
.hide,
.personal-settings-group-box,
[href="https://www.transifex.com/nextcloud/nextcloud/"] {
    display: none
}

#body-settings>#content>#app-content>#bruteforcesettings {
    margin-top: -10px
}

#body-settings>#content>#app-content>#nextcloud_announcements {
    margin-top: -20px
}

#body-settings>#content>#app-content>.community-support {
    height: 360px
}

#body-settings>#content>#app-content>#activity_notifications,
#body-settings>#content>#app-content>#encryptionAPI,
#body-settings>#content>#app-content>#fileSharingSettings,
#body-settings>#content>#app-content>#mail_general_settings,
#body-settings>#content>#app-content>#ncShareByMailSettings,
#body-settings>#content>#app-content>#ocFederationSettings,
#body-settings>#content>#app-content>#password-policy,
#body-settings>#content>#app-content>#subscription-key-section,
#body-settings>#content>#app-content>#version {
    margin-top: -20px
}

#app-navigation>ul>.app-navigation-caption,
#body-public>#header {
    margin: 0!important
}

#body-public>#header>.header-left>#nextcloud>.logo-icon {
    width: 115px!important;
    height: auto!important
}

#pdframe {
    margin-top: 13px
}

.nametext {
    z-index: 0!important
}

#displayname {
    border: none
}

#app-navigation {
    z-index: 1!important
}

.summary {
    height: 70px
}

#app-settings-content {
    margin-top: -200px
}

#menu_mob {
    position: fixed;
    right: 32px
}

#content-wrapper {
    position: fixed;
    margin-top: 63px
}

.col_menu:link,
.col_menu:visited {
    color: #616161!important
}

.col_menu:active,
.col_menu:hover {
    color: #43b3d8!important
}

.app_nav_mob {
    position: fixed;
    top: 154px
}

.header_move {
    position: fixed!important;
    top: 57px!important
}

.more_mob {
    text-align: center!important;
    width: 100%!important
}

.material-icons-extended-pseudo:after {
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga" 1;
    -webkit-font-feature-settings: "liga" 1;
    -moz-font-feature-settings: "liga" 1;
    -ms-font-feature-settings: "liga" 1;
    -o-font-feature-settings: "liga" 1
}

#header .logo,
#header .logo-icon {
    background-image: url(../img/logo.png)!important
}

.header,
.page--full {
    padding-left: 16px;
    padding-right: 16px
}

@media all and (max-width:480px) {
    #expanddiv {
        margin-top: 55px!important
    }
}

@media all and (min-width:767px) {
    .header,
    .page--full {
        padding-left: 30px;
        padding-right: 30px
    }
}

@media (-webkit-min-device-pixel-ratio:1.5),
(min-resolution:144dpi) {
    .lockup-logo {
        background-image: url(../img/2x/googlelogo_color_84x28dp.png)
    }
    .lockup-logo.lockup-dark {
        background-image: url(../img/2x/googlelogo_dark_color_84x28dp.png)
    }
    .lockup-text {
        font-size: 24px;
        left: -7px
    }
}

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    width: 1px
}

@media all and (max-width:767px) {
    #app-sidebar {
        margin-top: 55px
    }
    .hidden--m {
        display: none
    }
}

.show--m {
    display: block
}

#body-settings>#content>#app-content>.section {
    display: none
}

@media all and (max-width:580px) {
    .show--m {
        display: none
    }
}

body {
    background-color: #fff;
    background-color: var(--primary);
    font-family: Roboto, arial, sans-serif;
    color: #545454
}

/*
body:after {
    content: 'xsmall'
}
*/

/*
@media all and (min-width:580px) {
    body:after {
        content: 'small'
    }
}
*/

/*
@media all and (min-width:1023px) {
    body:after {
        content: 'large'
    }
}
*/

.lockup {
    height: 40px
}

.lockup .lockup--logo {
    height: 100%
}

[dir=rtl] .header--logo .lockup {
    direction: ltr;
    margin-top: -10px;
    position: absolute;
    right: 0
}

.header {
    background-color: #fafafa;
    background-color: var(--nav1);
    height: 56px;
    position: fixed;
    top: 0;
    transform: translateZ(0);
    width: 100%;
    z-index: 9
}

.header .header--wrap {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    left: 15%
}

@media all and (min-width:767px) {
    .hidden--l,
    .navigation--mobile-toggle {
        display: none
    }
    /*
    body:after {
        content: 'medium'
    }
    */
    .header {
        border-bottom: 1px solid #e0e0e0;
        border-bottom: 1px solid var(--nav-sdbx-border);
        height: 63px
    }
}

.navigation--main {
    margin-top: 0;
    height: 100%;
    left: 100%;
    position: fixed;
    top: 0;
    width: calc(100% - 44px);
    will-change: width, box-shadow;
    z-index: 10100000000000000000
}

.navigation--main .glue-zippy {
    border: 0
}

.navigation--main .glue-zippy .glue-zippy-btn {
    color: inherit
}

.navigation--mobile {
    height: 56px;
    padding: 0 24px;
    position: relative
}

.navigation--mobile-toggle {
    background-color: #4285f4;
    bottom: 0;
    color: #fff;
    position: absolute;
    right: 0;
    top: 0;
    width: 56px
}

.navigation--mobile-toggle:focus,
.navigation--mobile-toggle:hover {
    color: #fff
}

.navigation--mobile-toggle-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 50%;
    margin-left: -12px
}

.navigation--mobile-lockup {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    height: 21px;
    white-space: nowrap
}

.navigation--mobile-lockup-logo {
    height: 100%
}

.navigation--mobile-lockup-text {
    top: 0
}

.navigation--main.is-mobile {
    transition: left .2s cubic-bezier(.4, 0, .2, 1)
}

.navigation--main.is-mobile .navigation--tier-one {
    border-bottom: 1px solid #f5f5f5
}

.navigation--item {
    color: #616161;
    color: var(--nav-sdbx-font);
    cursor: pointer;
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    margin-bottom: 0;
    padding: 20px;
    position: relative;
    width: 100%
}

.navigation--item:active,
.navigation--item:focus,
.navigation--item:hover {
    color: #616161
}

.navigation--item.icon--24 {
    height: auto;
    padding: 20px 75px
}

.navigation--item.icon--24:before {
    margin-left: 40px
}

.navigation--item.is-active {
    background: #f5f5f5
}

.navigation--category-cta.is-active,
.navigation--item.is-active.navigation--item-secondary {
    background: 0 0;
    font-weight: 500
}

@media all and (max-width:766px) {
    .navigation--main-wrapper {
        height: 100%;
        overflow-y: scroll;
        padding-bottom: 180px
    }
}

@media all and (max-width:767px) {
    #app-content-shareoverview,
    #app-content-favorites {
        margin-top: -9px!important
    }
    #app-navigation {
        margin-top: 50px!important
    }
    #app-navigation-toggle {
        margin-top: 60px!important
    }
    #controls {
        margin-top: -165px!important
    }
}

@media all and (min-width:767px) {
    .navigation--has-secondary.is-active>--item.navigation,
    .navigation--has-secondary:focus>--item.navigation,
    .navigation--has-secondary:hover>--item.navigation,
    .navigation--tier-one>--item.navigation.is-active,
    .navigation--tier-one>--item.navigation:focus,
    .navigation--tier-one>--item.navigation:hover {
        background-color: transparent;
        margin: 0
    }
    .navigation--item:active,
    .navigation--item:focus,
    .navigation--item:hover {
        color: auto
    }
    .navigation--item.is-active,
    .navigation--item.is-active.navigation--item-secondary {
        font-weight: 400
    }
    .navigation--main {
        box-shadow: 0 3px 5px .3px rgba(0, 0, 0, .24);
        box-shadow: var(--nav-sdbx-shadow);
        height: 48px;
        left: auto;
        overflow: visible;
        top: 64px;
        transition: none;
        width: 100%;
        z-index: 9;
        text-align: center
    }
    .navigation--main-wrapper {
        padding-left: 30px;
        padding-right: 30px;
        position: relative;
        display: inline-block
    }
    .navigation--tier-one {
        float: left;
        margin-right: 20px
    }
    .navigation--tier-one:last-child {
        margin-right: 0
    }
    .navigation--tier-one>.navigation--item {
        padding: 0;
        height: 48px;
        font-weight: 400;
        line-height: 48px
    }
    .navigation--tier-one>.navigation--item:focus,
    .navigation--tier-one>.navigation--item:hover {
        color: #43b3d8
    }
    .navigation--tier-one>.navigation--item.is-active {
        background: 0 0;
        border-bottom: 2px solid #4285f4;
        color: #000
    }
    .navigation--has-secondary {
        position: relative
    }
    .navigation--has-secondary.is-active>.navigation--item,
    .navigation--has-secondary:focus>.navigation--item,
    .navigation--has-secondary:hover>.navigation--item {
        color: #43b3d8
    }
    .navigation--has-secondary.is-active>.navigation--item:after,
    .navigation--has-secondary:focus>.navigation--item:after,
    .navigation--has-secondary:hover>.navigation--item:after {
        transform: rotate(180deg)
    }
    .navigation--has-secondary.is-active>.navigation--tier-two,
    .navigation--has-secondary:focus>.navigation--tier-two,
    .navigation--has-secondary:hover>.navigation--tier-two {
        max-height: 1000px;
        opacity: 1;
        overflow: visible
    }
    .navigation--has-secondary>.navigation--item:after {
        color: #545454;
        content: 'arrow_drop_down';
        display: inline-block;
        margin-top: -2px;
        vertical-align: middle
    }
    .navigation--tier-two {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: opacity .3s cubic-bezier(.4, 0, .2, 1), max-height .3s cubic-bezier(.4, 0, .2, 1);
        min-width: 230px
    }
    .navigation--tier-two-inner {
        background: #fff;
        box-shadow: 0 3px 5px .3px rgba(0, 0, 0, .24), 0 1px 7px .14px rgba(0, 0, 0, .16)
    }
    .navigation--products-categories,
    .navigation--subnav {
        overflow: hidden;
        padding-bottom: 20px;
        padding-top: 20px;
        position: relative;
        transition: width .2s ease-in-out, padding .2s ease-in-out;
        width: 230px
    }
    .navigation--products-categories::after,
    .navigation--subnav::after {
        background: #fff;
        bottom: 100%;
        box-shadow: 0 3px 5px .3px rgba(0, 0, 0, .24);
        content: '';
        height: 25px;
        left: -2px;
        position: absolute;
        right: -2px
    }
    .navigation--category.is-active,
    .navigation--category:focus,
    .navigation--category:hover,
    .navigation--tier-two-inner .navigation--item.is-active,
    .navigation--tier-two-inner .navigation--item:focus,
    .navigation--tier-two-inner .navigation--item:hover {
        background-color: #f5f5f5
    }
    .navigation--products-categories.desktop-nav--is-open,
    .navigation--subnav.desktop-nav--is-open {
        padding-bottom: 110px;
        width: 460px
    }
    .navigation--tier-two-inner .navigation--item {
        color: #545454;
        display: block;
        font-size: 14px;
        font-weight: 400;
        overflow: hidden;
        padding: 15px 25px;
        white-space: normal;
        width: 100%
    }
    .navigation--tier-two-inner .navigation--item.icon--24 {
        height: auto;
        padding-left: 58px
    }
    .navigation--tier-two-inner .navigation--item.icon--24.is-active,
    .navigation--tier-two-inner .navigation--item.icon--24:hover {
        background: #e0e0e0
    }
    .navigation--tier-two-inner .navigation--item.icon--24:before {
        margin-left: 25px
    }
    .navigation--products-categories {
        -webkit-flex: 1 0 auto;
        -ms-flex: 1 0 auto;
        flex: 1 0 auto
    }
    .navigation--products-categories .navigation--tier-two-item {
        padding-left: 48px
    }
    .navigation--products-categories .navigation--tier-two-item:before {
        margin-left: 24px
    }
    .navigation--products-categories .navigation--tier-two-item.product-suite {
        padding-left: 24px
    }
    .navigation--products-categories:first-child .products--navigation-item {
        white-space: nowrap
    }
    .navigation--category-cta.is-active {
        background: #f5f5f5
    }
    .navigation--category-cta::before {
        font-family: 'Material Icons Extended';
        text-rendering: optimizeLegibility;
        font-feature-settings: "liga" 1;
        -webkit-font-feature-settings: "liga" 1;
        -moz-font-feature-settings: "liga" 1;
        -ms-font-feature-settings: "liga" 1;
        -o-font-feature-settings: "liga" 1;
        font-style: normal;
        line-height: 1;
        text-transform: none;
        content: 'keyboard_arrow_right';
        font-size: 18px;
        position: absolute;
        right: 20px
    }
    .navigation--category {
        max-width: 230px;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: box;
        display: flex;
        overflow: hidden
    }
    .navigation--category:hover .navigation--products {
        transform: translateX(0);
        visibility: visible
    }
    .navigation--category:hover .navigation--products-item:hover {
        background: #e0e0e0
    }
    .navigation--products {
        background: #f5f5f5;
        bottom: 0;
        left: 230px;
        overflow: hidden;
        padding: 20px 0;
        position: absolute;
        top: 0;
        transform: translateX(0);
        transition: transform .5s ease;
        visibility: hidden;
        width: 230px
    }
}

.bootstrap article,
.bootstrap aside,
.bootstrap figcaption,
.bootstrap figure,
.bootstrap footer,
.bootstrap header,
.bootstrap main,
.bootstrap nav,
.bootstrap section {
    display: block
}

@media (min-width:764px) and (max-width:1023px) {
    .personal-settings-container {
        margin-top: 130px
    }
}

.personal-settings-container {
    display: block
}

@media all and (min-width:1023px) {
    .navigation--tier-one {
        margin-right: 140px
    }
    .navigation--tier-one-one {
        margin-right: 100px
    }
}

[dir=rtl] .nav--is-open .navigation--main {
    right: 44px
}

[dir=rtl] .navigation--main {
    left: 0;
    right: 100%
}

[dir=rtl] .navigation--main.is-mobile {
    transition: right .2s cubic-bezier(.4, 0, .2, 1)
}

[dir=rtl] .navigation--main .glue-zippy.navigation--tier-one .navigation--tier-two-inner .glue-zippy>.glue-zippy-btn::before,
[dir=rtl] .navigation--main .glue-zippy.navigation--tier-one>.glue-zippy-btn::before,
[dir=rtl] .navigation--main .navigation--tier-two-inner .glue-zippy>.glue-zippy-btn::before {
    left: 20px;
    right: auto
}

[dir=rtl] .navigation--mobile-toggle {
    left: 0;
    right: auto
}

[dir=rtl] .navigation--item.icon--24 {
    padding-right: 75px
}

[dir=rtl] .navigation--item.icon--24::before {
    margin-right: 40px
}

@media all and (min-width:767px) {
    [dir=rtl] .navigation--main {
        right: 0
    }
    [dir=rtl] .navigation--tier-one {
        float: right;
        margin-left: 35px;
        margin-right: 0
    }
    [dir=rtl] .navigation--tier-one:last-child {
        margin-left: 0
    }
    [dir=rtl] .navigation--products {
        left: auto;
        right: 230px
    }
    [dir=rtl] .navigation--category-cta::before {
        left: 20px;
        right: auto;
        transform: rotate(180deg)
    }
}

@media all and (max-width:766px) {
    .navigation--main .cta--header {
        box-shadow: 0 -2px 6px .24px rgba(0, 0, 0, .24)
    }
    .navigation--main .cta {
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0
    }
    .navigation--main .cta .button {
        border: 0;
        border-radius: 0;
        display: block;
        margin-left: 0;
        min-height: 56px;
        padding-bottom: 20px;
        padding-top: 20px
    }
    .navigation--main .cta .button.button--secondary-cta {
        background-color: #f5f5f5
    }
}

#menu_toggle_mobile_div,
.navigation--mobile {
    box-shadow: 0 3px 5px .3px rgba(0, 0, 0, .24)
}

#menu_toggle_mobile_div {
    width: 100%;
    display: none;
    background-color: #fff;
    position: fixed;
    z-index: 9998!important;
    margin-top: 57px;
    height: 280px
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@-webkit-keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown
}

@-webkit-keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@-webkit-keyframes slideOutUp {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

@keyframes slideOutUp {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

.slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp
}

#mob_menu_mob6_all {
    background: #fff
}

#mob_menu_mob1_not,
#mob_menu_mob3_log,
#mob_menu_mob4_log,
#mob_menu_mob5_all,
#mob_menu_mob6_all {
    border-bottom: 1px solid #e3e3e3
}

#gallery-button {
    display: none
}

.link_nav,
a.navigation--item {
    transition: color .2s ease-out
}

.header--logo {
    margin-left: 5.3%!important;
    top: -100px!important
}

#logo_sdbx {
    margin-top: -10px
}

@media all and (min-width:767px) {
    .header .header--wrap {
        left: 8.6%!important
    }
}

table#filestable>thead {
    z-index: 1!important
}

#nav1 {
    z-index: 9999
}

input#searchbox:focus,
input#searchbox:hover {
    border: 1px solid #e0e0e0!important;
    border: 1px solid var(--search-border-activefocus)!important
}

.searchbox input[type=search]:active,
.searchbox input[type=search]:focus,
.searchbox input[type=search]:valid {
    border: 1px solid #e0e0e0;
    border: 1px solid var(--nav-sdbx-border);
    color: #6e6e6e
}

@media(width:767px) {
    #app-navigation-toggle {
        margin-top: 110px
    }
}

@media(width:768px) {
    #app-navigation-toggle {
        margin-top: 110px
    }
}

.link_nav {
    color: #616161;
    font-size: 14px;
    font-weight: 400;
    font-family: Roboto
}

.ho {
    color: #616161!important
}

.ho:hover {
    color: #448aff
}

.link_nav,
.no-underline:hover {
    text-decoration: none
}

#app-settings,
#nav1_mobile,
#quota,
#settings>#expand:before,
[data-id=trashbin] {
    display: none!important
}

.material-icons-extended,
.material-icons-extended-pseudo:after {
    font-family: 'Material Icons Extended';
    font-size: 24px;
    font-style: normal;
    line-height: 1;
    text-transform: none
}

@font-face {
    font-family: Roboto;
    src: url(Roboto-Regular.ttf)
}

@font-face {
    font-family: 'Material Icons Extended';
    font-style: normal;
    font-weight: 400;
    src: url(material.woff2) format('woff2')
}

#viewer-content,
#app-content-extstoragemounts,
.app-settings>#app-content>#app-content {
    margin-top: 112px
}

.material-icons-extended {
    font-weight: 400;
    letter-spacing: normal;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased
}

.more_mob,
.navigation--main {
    display: block!important
}

#header {
    z-index: 2000!important
}

#nav2 {
    background-color: #fff;
    background-color: var(--primary);
    min-width: 100%!important;
    width: 100%!important;
    z-index: 9999!important
}

#filestable {
    margin-top: 9px;
    max-height: 20px
}

@media(max-width:345px) {
    #fourth_elem_nav2_mobile,
    #second_elem_nav2_mobile,
    #third_elem_nav2_mobile {
        margin-left: 6%!important
    }
}

@media (max-width:766px) {
    #nav1 {
        z-index: 9999;
        box-shadow: 0 3px 5px .3px rgba(0, 0, 0, .24)
    }
    #header {
        border-top: 1px solid #e0e0e0;
        margin-top: 55px!important
    }
    #filestable {
        top: 0!important
    }
    #app-content-files>#controls {
        left: 250px!important;
        top: 1px!important
    }
    #app-content-files {
        margin-top: -42px
    }
    #content-wrapper {
        z-index: 10!important;
        margin-top: 0!important
    }
    #app-navigation-toggle {
        background-color: rgba(0, 0, 0, 0);
        position: relative!important;
        top: 0
    }
}

#app-content-files,
#app-navigation,
#app-navigation-toggle,
#header {
    margin-top: 112px
}

.icon-settings-white {
    background: url(../img/settings.svg?v=1) center no-repeat
}

.searchbox input[type=search] {
    margin-right: 10px;
    padding-right: 5px;
    background: url(../img/search-white.svg?v=1) 6px center no-repeat;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid #ececec;
    border: 1px solid var(--search-border);
    width: 0;
    font-size: 1.2em
}

#header {
    background-color: #fff;
    background-color: var(--secondary);
    background-image: none!important
}

input#searchbox {
    background-color: #fff!important;
    background-color: var(--primary)!important
}

.app_gestionnaire_ {
    font-size: 14px;
    color: #616161;
    color: var(--color-font);
    margin-left: 27px
}

#oc-dialog-filepicker-content>.actions>.popovermenu:after {
    border-bottom-color: white!important;
    border-bottom-color: var(--primary)!important
}

#oc-dialog-filepicker-content>.actions>.popovermenu {
    background: white;
    background: var(--primary)
}

#header>.header-left>#appmenu>[data-id="photos"] {
    display: none
}

/*login*/
#body-login>.wrapper>.v-align>main>form[name=login]>fieldset>#submit-wrapper>#submit {
    background-color: #947bea!important;
    border-color: #745bca!important
}

#body-login>.wrapper>.v-align>main>form[name=login]>fieldset>#submit-wrapper>#submit:hover {
    background-color: #8b75e4!important;
    transition: .15s
}

#body-login>footer[role=contentinfo] {
    height: auto
}

#body-login>.wrapper>.v-align>[role=banner]>#header {
    border: none;
    margin-top: 91px
}

#body-login {
    background-color: #745bca !important;
    background: url('../img/background.png?v=2'), linear-gradient(40deg, #745BCA 0%, #745bca 100%) no-repeat !important;
}

#body-login > .wrapper > .v-align > main > div > div > form > fieldset > #submit-wrapper > input {
    border: 0;
}

#body-login > .wrapper > .v-align > header > #header {
    background: 0
}