/**
 * @author Jan-Christoph Borchardt, http://jancborchardt.net
 * @copyright Copyright (c) 2015, ownCloud, Inc.
 * @license AGPL-3.0
 *
 * This code is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License, version 3,
 * as published by the Free Software Foundation.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License, version 3,
 * along with this program.  If not, see <http://www.gnu.org/licenses/>
 */
 @font-face {
    font-family: 'Roboto';
    src: url('../webfonts/Roboto-Regular.woff2') format('woff2'), url('../webfonts/Roboto-Regular.woff') format('woff');
    /* font-weight: 600; */
    /* font-style: normal; */
    font-display: swap;
    letter-spacing: 1px;
}
* {
    font-family: 'Roboto';
}
:root, [data-theme-light] {
    --color-primary: #007fff;
    --color-primary-element: #007fff;
    --color-secondary-element: white;
    --border-color-secondary-element: #007fff;
    --color-primary-element-light: #007fff;
    --color-error: #fb3845;
    --color-delete: #e9322d;
    --color-success: #3ad975;
    --color-main-background: #ffffff;
    --color-main-background-header: #ffffff;
    --color-main-background-translucent: #f2f2f2;
    --color-main-text: black;
    --color-background-hover: white;
    --color-text-maxcontrast: black;
    --color-border-dark: #e6e6e6;
    --color-border: #ebebeb;
    --icon-settings-dark-000: #000000;
    --icon-inactive-color: #808080;
    --icon-active-color: #007fff;
    --input-background-color: white;
    --menu-icon-color: #222;
    --color-dashboard-panels: #f2f2f2;
    --color-dashboard-background-plain: #d2d2d2;
    --color-sharing-icon-background: #767676;
    --logo: url("../img/logo@2x.svg");
    --notification-icon-invert: invert(0%);
    --active-icon-filter: brightness(0) saturate(100%) invert(38%) sepia(88%) saturate(4068%) hue-rotate(197deg) brightness(102%) contrast(106%);
    --inactive-icon-filter: brightness(0) saturate(100%) invert(50%) sepia(12%) saturate(0%) hue-rotate(187deg) brightness(98%) contrast(94%);
    --notification-icon: var(--original-icon-notifications-dark);
    --notification-icon-has-notification: var(--icon-has-notification-dark);
    --search-icon: var(--original-icon-search-dark);
    --body-container-radius: 0px;
    --app-icon-filter: brightness(0.5);
    --image-logoheader-custom:true  !important;
    --background-image-invert-if-bright:no !important;
    --image-background:none  !important;
}

/* Force a few variables to right values for dark theme */
body[data-themes="dark"] , body[data-themes="dark-highcontrast"]{
    --color-main-background-header: #272727;
    --input-background-color: #181818;
    --logo: url("../img/logo@2x-dark.svg");
    --notification-icon-invert: invert(100%);
    --notification-icon: var(--original-icon-notifications-white);
    --notification-icon-has-notification: var(--icon-has-notification-light);
    --search-icon: var(--original-icon-search-white);
    --app-icon-filter: brightness(1);
    --image-logoheader-custom:true;
    --background-image-invert-if-bright:no !important;
    --image-background:none !important;
}

body.theme--highcontrast {
    --icon-inactive-color: black;
}
@media(prefers-color-scheme: dark){
    :root {
        --color-main-background-header: #272727;
        --input-background-color: #181818;
        --logo: url("../img/logo@2x-dark.svg");
        --notification-icon-invert: invert(100%);
        --notification-icon: var(--original-icon-notifications-white);
        --notification-icon-has-notification: var(--icon-has-notification-light);
        --search-icon: var(--original-icon-search-white);
    }
}


body {
    background-color: var(--color-main-background);
    font-weight: normal;
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    font-family: var(--font-face);
    color: var(--color-main-text);
    background-image: unset;
}

#body-user #header,
#body-settings #header,
#body-public #header {
    background-color: var(--color-main-background-header) !important;
}

button:not(:disabled):hover,
.primary:not(:disabled):hover,
.button:hover,
button.toggle.has-tooltip:hover,
.primary:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.primary:active,
.button:active,
#new-contact-button:hover,
#new-user-button:hover,
#deleteaccount:hover,
#content-vue.app-tasks .action.icon-checkmark:hover,
.button.today:hover,
button.import-contact__button-main:hover,
button#notes_new_note:hover,
#oc-dialog-filepicker-content .actions.creatable .icon.icon-add:hover {
    opacity: 0.8;
}

/* primary action button, use sparingly */
button,
.button,
.primary,
input[type="submit"].primary,
input[type="button"].primary,
button.toggle.has-tooltip,
button.primary,
.button.primary,
.primary:active,
input[type="submit"].primary:active,
input[type="button"].primary:active,
button.primary:active,
.button.primary:active,
.actions a.button,
#new-contact-button,
#new-user-button,
#deleteaccount,
.mx-datepicker .mx-datepicker-footer .mx-btn,
#content-vue.app-tasks .action.icon-checkmark,
button.import-contact__button-main,
button#notes_new_note,
#content.app-news button.explore-subscribe,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

input.primary:not(:disabled):hover,
input.primary:not(:disabled):focus,
button.primary:not(:disabled):hover,
button.primary:not(:disabled):focus,
a.primary:not(:disabled):hover,
a.primary:not(:disabled):focus {
    background-image: none;
}

/* For buttons that are not primary or submit/reset/button inputs that are not primary */

button.primary + button:not(.primary),
button.primary + button:not(.primary):active,
.entity-picker__navigation button:not(.primary),
.oc-dialog-buttonrow.twobuttons button:not(.primary),
.oc-dialog-buttonrow.twobuttons button:not(.primary):active,
.status-buttons .status-buttons__select {
    background-color: var(--color-secondary-element);
    color: var(--color-primary);
    border-color: var(--border-color-secondary-element);
}

input[type="checkbox"].checkbox + label::before,
input[type="radio"].checkbox + label::before {
    border-color: var(--icon-inactive-color);
    background-color: white;
}

textarea:not(:disabled),
textarea:not(:disabled):active,
div[contenteditable="true"]:not(:disabled):active,
textarea:not(:disabled):hover,
div[contenteditable="true"]:not(:disabled):hover,
textarea:not(:disabled):focus,
div[contenteditable="true"]:not(:disabled):focus {
    background-color: var(--input-background-color) !important;
}

select,
textarea,
input[type="text"],
input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([type="file"]):not([type="image"]):not(.multiselect__input),
#content-vue.app-tasks .task-body__checkbox label.reactive.no-nav::before,
#content.app-files #commentsTabView .newCommentForm .message,
.multiselect .multiselect__content-wrapper .multiselect__content li > span.multiselect__option,
div.select2-container-multi .select2-choices,
div.select2-container-multi.select2-container-active .select2-choices {
    background-color: var(--input-background-color);
}

#settings #expanddiv,
#header .header-right > div > .notification-container.menu {
    background-color: var(--color-main-background);
}

#header .header-appname {
    color: var(--color-main-text);
}

#settings #expanddiv li a.active {
    background-color: var(--color-background-hover);
}
body.theme--dark #header .header-right > div > .notification-container.menu,
body.theme--dark #settings #expanddiv {
    background-color: var(--color-main-background);
}
.multiselect .multiselect__tags input.multiselect__single,
.multiselect .multiselect__tags span.multiselect__single,
.multiselect .multiselect__tags span.multiselect__placeholder,
.multiselect .multiselect__tags .multiselect__content,
.multiselect .multiselect__tags .multiselect__tags-wrap,
.multiselect .multiselect__input,
.multiselect .multiselect__content-wrapper .multiselect__content li.multiselect__element,
.multiselect .multiselect__content-wrapper .multiselect__content li.multiselect__element .multiselect__option,
#content.app-files #commentsTabView .newCommentForm .message:hover,
#app-dashboard .footer a:hover,
#app-content-systemtagsfilter .select2-container ul {
    background-color: var(--input-background-color) !important;
}
/* use logos from theme */
#header .logo,
#firstrunwizard .logo {
    background-image: var(--logo);
    width: 256px;
    height: 128px;
}
#header .logo-icon {
    width: 130px;
    height: 40px;
    top: 5px;
    bottom: 0;
    border-radius: 22px;
}

#header #nextcloud {
    padding-left: 150px;
}

#header .notifications .svg {
    height: 17px;
    width: 17px;
    filter: var(--notification-icon-invert);
}

/*
	For the overflow in search filter;
	It doesn't use specific ids so gave the rule a lot of specificity
  */
.popover > .popover__wrapper .open ul li p {
    white-space: normal;
}

#unified-search #header-menu-unified-search .header-menu__carret {
    right: 125px;
}

/* App Navigation rules */
#app-navigation:not(.vue) > ul > li.active,
#app-navigation:not(.vue) > ul > li a:active,
#app-navigation:not(.vue) > ul > li a.selected,
#app-navigation:not(.vue) > ul > li a.active,
#app-navigation:not(.vue) > ul > li.active > a,
#app-navigation:not(.vue) > ul > li a:active > a,
#app-navigation:not(.vue) > ul > li a.selected > a,
#app-navigation:not(.vue) > ul > li a.active > a {
    background-color: var(--color-main-background);
}

li.app-navigation-entry,
.conversations .acli_wrapper .acli {
    background-clip: content-box;
}

li.app-navigation-entry.active {
    background-color: var(--color-main-background) !important;
}

li.app-navigation-entry:not(.active):hover,
#content.app-deck li.app-navigation-entry.active {
    background-color: var(--color-background-hover) !important;
}

li.app-navigation-entry.app-navigation-entry--collapsible:hover {
    background-color: var(--color-main-background) !important;
}

li.app-navigation-entry.app-navigation-entry--collapsible > a:hover,
#content.app-passwords #app-navigation .active {
    background-color: var(--color-background-hover);
}

/* CSS TWEAKS TAKEN FROM THEMING APP (disabled now) */

.nc-theming-main-background {
    background-color: #999999;
}
.nc-theming-main-text {
    color: #fff;
}
.nc-theming-contrast {
    color: #fff;
}
#header .app-menu:not(.inverted) svg {
    filter: none;
}
#header .app-menu.inverted svg {
    filter: invert(1);
}

#header .app-menu .app-menu-entry img {
    filter: var(--inactive-icon-filter);
}

#header .app-menu .app-menu-entry.app-menu-entry__active img {
    filter: var(--active-icon-filter);
}

#header .app-menu .app-menu-entry[data-app-id^='external_index'] img,
#header .app-menu .app-menu-entry.app-menu-entry__active[data-app-id^='external_index'] img {
    filter: none;
}

body .icon-folder,
body .icon-filetype-folder {
    background-image: var(--icon-folder-007fff);
}
body .icon-filetype-text {
    background-image: var(--icon-text-007fff);
}
body .icon-filetype-folder-drag-accept {
    background-image: var(--icon-folder-drag-accept-007fff) !important;
}
#header .logo {
    background-image: var(--logo);
}
#body-user #header,
#body-settings #header,
#body-public #header {
    color: var(--color-main-text);
    background-image: none;
}

#body-user.dark--theme,
#body-settings.dark--theme {
    color: white !important;
}

#header .menu,
#header #launcher-menu,
#header .header--menu {
    opacity: 1;
}

#header .app-menu li .app-menu-entry--label {
    color: var(--color-main-text);
}

#header .logo {
    background-size: auto;
}

input.primary,
#alternative-logins li a {
    background-color: #999999;
    border: 1px solid #fff;
    color: #fff;
}
footer {
    height: 92px;
}

#header #notifications .notifications-button__icon {
    display: none;
}

#header #notifications .header-menu__trigger,
#header #unified-search .magnify-icon {
    opacity: 0.6;
}

#header #notifications .header-menu__trigger:hover,
#header #unified-search .magnify-icon:hover {
    opacity: 1;
}


#header #notifications[data-has-notifications="true"] .header-menu__trigger {
    background: var(--notification-icon-has-notification) no-repeat center;
    background-size: 17px;

}

#header #notifications .header-menu__trigger {
    background: var(--notification-icon) no-repeat center;
    background-size: 17px;
}


.notifications-button.hasNotifications {
    opacity: 0.6 !important;
}
.notifications-button.hasNotifications:hover,
.notifications-button.hasNotifications:focus {
    opacity: 1 !important;
}
#header .notification-wrapper .dismiss-all .icon.icon-close {
    margin-top: 4px;
}
#content #app-navigation {
    color: var(--color-main-text);
    border-right: 1px solid var(--color-border);
}

body .icon-home,
#oc-dialog-filepicker-content .dirtree div:first-child a {
    background-image: var(--icon-home-808080);
}

#controls .icon-home,
#oc-dialog-filepicker-content .dirtree div:first-child a {
    background-size: 20px;
}

body .icon-mail {
    background-image: var(--icon-mail-808080);
}
body .icon-error {
    background-image: var(--icon-error-808080);
}

body .icon-details {
    background-image: var(--icon-details-808080);
}

body .icon-add,
.app-sidebar button .icon-add,
.action-item.icon-add,
button.action-item__menutoggle.icon-add,
#content.app-news .add-new button.icon-add,
.who-has-access .action-item.icon-add.addAdditionalAdmin,
#content-vue.app-tasks #app-navigation-vue .app-navigation-entry-icon.sprt-add::before {
    background-image: var(--icon-add-808080);
}

.notification-container .emptycontent .icon-notifications-dark {
    background-image: var(--icon-notifications-notifications-808080);
    background-size: 40px;
}

body .icon-rename,
.who-has-access .action-item--single.action-item.icon-rename,
.where-is-my-data .action-item--single.action-item.icon-rename {
    background-image: var(--icon-rename-808080);
}

body .icon-download {
    background-image: var(--icon-download-808080);
}
body .icon-template-add {
    background-image: var(--icon-template-add-808080);
}
body .icon-tasks,
.panel--header .icon-tasks,
.modal__content .icon-tasks {
    background-image: var(--icon-tasks-tasks-808080);
}
#tasks_panel .empty-content .icon-tasks {
    background-image: var(--icon-tasks-tasks-808080) !important;
}
body .icon-checkmark {
    background-image: var(--icon-checkmark-808080);
}
body .icon-group {
    background-image: var(--icon-group-808080);
}
body .icon-timezone {
    background-image: var(--icon-timezone-808080);
}
body .icon-edit {
    background-image: var(--icon-edit-808080);
}
body .icon-reminder {
    background-image: var(--icon-notifications-notifications-808080);
}
body .icon-gravatar {
    background-image: var(--icon-contacts-gravatar-808080);
}
#content-vue.app-calendar .app-sidebar-tabs__tab-icon.icon-reminder {
    background-size: 13px;
}
body .icon-clippy {
    background-image: var(--icon-clippy-808080);
}
body .icon-confirm {
    background-image: var(--icon-confirm-808080);
}

body .icon-user-admin {
    background-image: var(--icon-user-admin-808080);
}

body .icon-disabled-users {
    background-image: var(--icon-disabled-users-808080);
}

body .icon-notes,
body .icon-notes-trans {
    background-image: var(--icon-notes-notes-808080);
}
body .icon-projects {
    background-image: var(--icon-projects-808080);
}
body .icon-comment {
    background-image: var(--icon-comment-808080);
}
body .icon-activity {
    background-image: var(--icon-activity-activity-808080);
}
body .icon-link {
    background-image: var(--icon-public-808080);
}
button .icon-link {
    background-image: var(--icon-public-ffffff);
}

body .icon-recent {
    background-image: var(--icon-files-recent-808080);
}
.sharing-entry .avatar-shared.icon-more-white {
    background-image: var(--icon-more-fff);
}
body .icon-more,
body .icon-more-white {
    background-image: var(--icon-more-808080);
}

.avatar-shared.icon-more-white {
    background-image: var(--icon-more-fff);
}

#collection-list .avatar .icon-projects {
    background-image: var(--icon-projects-fff);
}

#sharing-inherited-shares .sharing-entry .avatar-shared.icon-more-white,
.sharing-entry.sharing-entry__internal .avatar-external.icon-external-white,
#collection-list .avatar {
    background-color: var(--color-sharing-icon-background);
}

body .icon-files,
.icon-category-files,
.icon-emptyfolder {
    background-image: var(--icon-files-app-808080);
}

#header .icon-notifications,
#header .icon-notifications-new {
    background-size: 17px;
}

body .icon-notifications-new {
    background-image: var(--icon-notifications-notifications-new-000000);
}

body .icon-notifications {
    background-image: var(--icon-notifications-notifications-000000);
}

body .icon-external,
body .icon-goto {
    background-image: var(--icon-external-808080);
}

.action.icon-checkmark {
    background-image: var(--icon-checkmark-ffffff);
}
body .icon-phone {
    background-image: var(--icon-phone-808080);
}

body .icon-password,
body .icon-category-security {
    background-image: var(--icon-password-808080);
}
body .icon-link {
    background-image: var(--icon-link-808080);
}
body .icon-toggle-filelist {
    background-image: var(--icon-toggle-filelist-808080);
}

button.icon-toggle-filelist {
    background-color: var(--color-main-background);
}

body .icon-toggle-pictures {
    background-image: var(--icon-toggle-pictures-808080);
}

.button .icon-add,
button .icon-add,
button.icon-add,
#new-contact-button.icon-add,
#content-vue.app-notes #notes_new_note.icon-add,
#oc-dialog-filepicker-content .actions.creatable .icon.icon-add,
#content.app-news .add-new .icon-add.add-new-folder-primary {
    background-image: var(--icon-add-ffffff);
}

.popover .action-button .action-button__icon.icon-add {
    background-image: var(--icon-add-808080);
}

button > span[class^="icon-"],
.button > span[class^="icon-"],
button > span[class*=" icon-"],
.button > span[class*=" icon-"] {
    opacity: 1;
}

body .icon-share,
body .icon-shared {
    background-image: var(--icon-share-808080);
}

body .icon-contacts-dark,
body .icon-contacts,
body .icon-category-social {
    background-image: var(--icon-contacts-app-808080);
}

#contactsmenu .icon-contacts {
    background-image: var(--icon-contacts-000);
}

body .icon-user,
body .icon-category-installed {
    background-image: var(--icon-user-808080);
}

body .icon-category-enabled {
    background-image: var(--icon-checkmark-808080);
}

body .icon-star,
body .icon-star-dark,
body .icon-starred:hover {
    background-image: var(--icon-star-808080);
}

body .icon-starred,
body .icon-star:hover,
body .icon-star-dark:hover,
#filestable .filename .favorite-mark .icon-starred {
    background-image: var(--icon-star-FFCC00);
}

body .icon-close,
#header-menu-unified-search .icon-close,
body .icon-category-disabled {
    background-image: var(--icon-close-808080);
}

#header #searchbox {
    color: var(--color-main-text);
    border-color: var(--icon-inactive-color) !important; /* !important used in source so needed to override */
}

#app-navigation,
#app-navigation-vue {
    border-right: 2px solid var(--color-border);
}

table th,
table td {
    border-bottom: 1px solid var(--color-border);
}

body .icon-files-dark {
    background-image: var(--icon-files-app-808080);
}

body .icon-fullscreen {
    background-image: var(--icon-fullscreen-808080);
}

body .icon-calendar-dark {
    background-image: var(--icon-calendar-calendar-808080);
}
body .icon-talk {
    background-image: var(--icon-spreed-app-808080);
}

#app-navigation li a,
#app-navigation:not(.vue) > ul > li > a,
#app-navigation:not(.vue) > ul > li > ul > li > a {
    opacity: 1;
}

/* Dashboard App */

#body-user[data-dashboard-background]:not(.theme--dark) #app-dashboard .statuses button:hover,
#body-user[data-dashboard-background]:not(.theme--dark) .edit-panels:hover {
    background-color: var(--color-background-hover) !important;
}

body.theme--highcontrast #app-dashboard .statuses button,
body.theme--highcontrast #app-dashboard .edit-panels {
    border: 1px solid var(--color-main-text);
}

#body-user[data-dashboard-background]:not(.theme--dark) #app-dashboard .panel,
#body-user[data-dashboard-background]:not(.theme--dark) #app-dashboard .statuses button,
#body-user[data-dashboard-background]:not(.theme--dark) #app-dashboard .footer a {
    background-color: var(--color-dashboard-panels);
    /* opacity: 0.9; */
}

#body-user[data-dashboard-background]:not(.theme--dark) #header {
    opacity: 0.95;
}
#body-user[data-dashboard-background].theme--highcontrast #header {
    background-color: var(--color-main-background) !important;
}

#app-dashboard .panel .panel--header > .icon-calendar-dark {
    background-position: 14px 10px;
}

#app-dashboard .panel .panel--header > .icon-files-dark {
    background-position: 14px 16px;
}

#app-dashboard .statuses button {
    color: var(--color-main-text);
}

#content.app-dashboard #app-dashboard,
body[data-dashboard-background]:not(.theme--dark) .background-selector .background.filepicker,
body[data-dashboard-background]:not(.theme--dark) .background-selector .background.default,
body[data-dashboard-background]:not(.theme--dark) .modal__content .background-selector .background.color {
    background-color: var(--color-dashboard-background-plain);
    color: var(--color-main-text);
}

body[data-dashboard-background="#0082c9"] #app-dashboard,
body[data-dashboard-background="default"] #app-dashboard {
    background-color: var(--color-dashboard-background-plain);
}

body[data-dashboard-background="default"] #app-dashboard {
    background-image: none !important;
}

body[data-dashboard-background="#0082c9"] #app-dashboard h2,
body[data-dashboard-background="default"] #app-dashboard h2 {
    color: var(--color-main-text);
}

/* Files App */

#filestable .thumbnail {
    background-repeat: no-repeat;
}

.breadcrumb .canDrop > a,
.files-filestable tbody tr.canDrop,
.files-filestable.view-grid:not(.hidden) .files-fileList tr:not(.hidden).selected .thumbnail-wrapper,
.files-filestable.view-grid:not(.hidden) .files-fileList tr:not(.hidden).selected .fileactions,
.files-filestable.view-grid:not(.hidden)  .files-fileList tr:not(.hidden).selected .nametext {
    background-color: var(--color-primary-light);
}

.actions .button.new:active {
    background-color: var(--color-primary);
}

#fileList td a a.action {
    opacity: 0.6;
}

#fileList td a a.action:hover {
    opacity: 0.8;
}

#content.app-files #filestable.view-grid thead tr,
#content.app-files #filestable.view-grid thead th {
    border-bottom: 0;
}

#content.app-files #controls .icon-shared {
    background-size: 14px;
}

#editor .menububble.is-active .menububble__button {
    background-color: var(--color-primary);
}

#editor .menububble.is-active .menububble__button:hover {
    background-color: var(--color-background-hover);
}

#editor .menububble__button:hover .menububble__buttontext {
    color: var(--color-primary);
}

#editor .menububble__button:hover .icon-link {
    background-image: var(--icon-public-007fff);
}

#editor .menububble__button:hover .icon-file {
    background-image: var(--icon-text-007fff);
}

#uploadprogressbar + button.icon-close,
#google-drive button .icon-close,
#google-photos button .icon-close {
    background-image: var(--icon-close-fff);
}

#google-rm-cred .icon-close {
    background-image: var(--icon-close-000);
    opacity: 1;
}

.breadcrumb div.crumb span.icon-shared,
.breadcrumb div.crumb span.icon-public,
.selectedActions a,
#commentsTabView .comment .action {
    opacity: 0.8;
}

#content.app-files #emptycontent .icon-share {
    background-image: var(--icon-files-share-808080);
}
#content {
    border-radius: unset;
}
#content #app-content-files #controls {
    background-color: var(--color-main-background);
}

#app-content-files button .icon-file,
#editor .menububble__button .icon-file {
    background-image: var(--icon-text-ffffff);
}

#editor .ProseMirror {
    background-color: var(--color-main-background) !important;
}

#fileList tr td.selection > .selectCheckBox + label::before,
#oc-dialog-filepicker-content .actions.creatable .icon.icon-add {
    opacity: 1;
}

#filestable .filesize,
#filestable .date .modified.live-relative-timestamp {
    color: var(--color-main-text) !important;
}
.nav-icon-files {
    background-image: var(--icon-files-app-808080);
}

.nav-icon-files.active {
    background-image: var(--icon-files-app-007fff);
}

.nav-icon-recent {
    background-image: var(--icon-files-recent-808080);
}

.nav-icon-recent.active {
    background-image: var(--icon-files-recent-007fff);
}

.nav-icon-favorites {
    background-image: var(--icon-star-outline-808080);
}
.nav-icon-favorites.active {
    background-image: var(--icon-star-outline-007fff);
}

.nav-icon-deletedshares {
    background-image: var(--icon-files-unshare-808080);
}
.nav-icon-deletedshares.active {
    background-image: var(--icon-files-unshare-007fff);
}

.nav-icon-shareoverview,
.nav-icon-sharingout,
.nav-icon-sharingin,
.nav-icon-pendingshares,
#content.app-files .icon-share,
#content.app-files .icon-shared {
    background-image: var(--icon-files-share-808080);
}
.nav-icon-shareoverview.active,
.nav-icon-sharingout.active,
.nav-icon-sharingin.active,
.nav-icon-pendingshares.active {
    background-image: var(--icon-files-share-007fff);
}
.nav-icon-sharinglinks {
    background-image: var(--icon-public-808080);
}
.nav-icon-sharinglinks.active {
    background-image: var(--icon-public-007fff);
}
.nav-icon-trashbin {
    background-image: var(--icon-files-delete-808080);
}

.nav-icon-trashbin.active {
    background-image: var(--icon-files-delete-007fff);
}

.nav-icon-systemtagsfilter {
    background-image: var(--icon-tag-808080);
}

.nav-icon-systemtagsfilter.active {
    background-image: var(--icon-tag-007fff);
}

body .icon-quota {
    background-image: var(--icon-quota-808080);
}
.app-sidebar-header__star.icon-star,
.app-sidebar-header__star.icon-starred,
.app-sidebar-header__star.icon-star:hover,
.app-sidebar-header__star.icon-starred:hover,
#view-toggle {
    background-size: 16px;
}

#collection-list .multiselect .multiselect__tags .multiselect__input {
    background-color: transparent !important;
}
#collection-list .multiselect.multiselect--active .multiselect__tags .multiselect__input {
    background-color: var(--input-background-color) !important;
}
#app-sidebar-vue #sharing .sharing-entry .avatar-external,
#app-sidebar-vue #sharing .sharing-entry .avatar-shared {
    background-color: var(--color-primary);
}
#app-sidebar-vue #sharing .sharing-entry .avatar-shared.icon-more-white {
    background-image: var(--icon-more-fff);
}

#app-sidebar-vue #sharing .sharing-entry .avatardiv.icon-public-white {
    background-color: var(--color-primary) !important;
}

body.theme--highcontrast #header .header-right .magnify-icon {
    background: var( --search-icon) no-repeat center;
}

#header .header-right .magnify-icon {
    background: var( --search-icon) no-repeat center;
    background-size: 15px;
    width: inherit;
    height: inherit;
}

#content.app-files #filestable span,
#content.app-files #filestable td {
    color: var(--color-main-text) !important;
}

/* Contacts App */

#content-vue.app-contacts .multiselect.property__label .multiselect__tags span.multiselect__single,
#content-vue.app-contacts .multiselect.property__label .multiselect__tags .multiselect__input {
    background-color: var(--color-main-background) !important;
}

#contacts-list {
    margin-top: 44px;
}

li.app-navigation-entry.active .icon-user {
    background-image: var(--icon-user-007fff);
}

li.app-navigation-entry.active .icon-contacts-dark,
li.app-navigation-entry.active .icon-group {
    background-image: var(--icon-contacts-app-007fff);
}
li.app-navigation-entry.active .icon-address-book {
    background-image: var(--icon-contacts-address-book-007fff);
}
li.app-navigation-entry.active .icon-recent-actors {
    background-image: var(--icon-contacts-recent-actors-007fff);
}

#content-vue.app-contacts .multiselect .multiselect__tags .multiselect__input,
#content-vue.app-contacts .multiselect > .multiselect__tags > .multiselect__single {
    background-color: var(--color-main-background) !important;
}

#content-vue.app-contacts ~ .popover .action.active,
#content-vue.app-contacts ~ .popover .action.active .action-input:hover,
#content-vue.app-contacts ~ .popover .action.active .action-input:focus-within {
    opacity: 1;
}

#content-vue.app-contacts ~ .popover .action.active .action-input {
    opacity: .7;
}

#content-vue.app-contacts .empty-content__icon {
    height: 80px;
}

#content-vue.app-contacts #addressbook-list .addressbook-shares .multiselect__content {
    background-color: var(--color-secondary-element);
}

#content-vue.app-contacts .empty-content__title {
    text-align: center;
}
#content-vue.app-contacts .app-content > .empty-content {
    margin: 20vh;
}
body .icon-address-book {
    background-image: var(--icon-contacts-address-book-808080);
}

#content-vue.app-contacts .app-navigation-caption__title {
    color: var(--color-main-text);
}

#content-vue.app-contacts .contact-header__infos input {
    background-color: var(--color-main-background);
}

.property .icon-contacts {
    background-image: var(--icon-contacts-app-808080);
}
#content-vue.app-contacts .icon-phone {
    background-image: var(--icon-contacts-phone-808080);
}

button .icon-upload,
#uploadavatarbutton.icon-upload,
.button.primary .icon-upload,
button.primary .icon-upload,
#content-vue.app-calendar .settings-fieldset-interior-item .icon-upload,
#content-vue.app-bookmarks #app-settings-content button .icon-upload,
button.import-contact__button-main .icon-upload,
.attachments-drag-zone button.icon-upload {
    background-image: var(--icon-upload-000);
}
#uploadavatarbutton.icon-upload {
    background-image: var(--icon-upload-ffffff);
}
.action-button .icon-upload,
.menuitem .icon-upload,
button.import-contact__button--local:disabled .import-contact__button-icon.icon-upload {
    background-image: var(--icon-upload-808080);
}

button .icon-download,
.button .icon-download,
.import-export .button.icon-download {
    background-image: var(--icon-download-ffffff);
}
.action-button .icon-download {
    background-image: var(--icon-download-808080);
}

#deleteaccount:not([disabled]) .icon-delete,
button .icon-delete,
.button .icon-delete,
#removeavatar.icon-delete {
    background-image: var(--icon-delete-ffffff);
}

button.menuitem .icon-delete,
.app-navigation-entry-menu button .icon-delete {
    background-image: var(--icon-delete-808080);
}

.menu-icon svg path {
    fill: var(--menu-icon-color);
}
body .icon-recent-actors {
    background-image: var(--icon-contacts-recent-actors-808080);
}

.popover .action-input__input + .action-input__label {
    background-color: var(--color-primary);
}
.popover .action-input__input + .action-input__label > .arrow-right-icon path {
    fill: white;
}

#content-vue.app-contacts .dots-horizontal-icon svg path {
    fill: var(--icon-inactive-color);
}

.mx-icon-calendar svg path {
    fill: var(--icon-inactive-color);
}

#content-vue.app-contacts ~ .popover .action-input .action-input__label::before {
    content: unset;
}

/* Photos App */

#content-vue.app-photos #app-navigation-vue .app-navigation-entry.active {
    background-color: var(--color-main-background) !important;
}

#content-vue.app-photos .icon-folder {
    background-image: var(--icon-folder-007fff);
}
#content-vue.app-photos .folder-name__icon {
    opacity: 0.8;
}

li.active .icon-yourphotos {
    background-image: var(--icon-photos-app-007fff);
}
body .icon-yourphotos {
    background-image: var(--icon-photos-app-808080);
}

li.active .icon-video {
    background-image: var(--icon-video-007fff);
}

body .icon-video {
    background-image: var(--icon-video-808080);
}

li.active .icon-favorite {
    background-image: var(--icon-star-outline-007fff);
}
body .icon-favorite {
    background-image: var(--icon-star-outline-808080);
}

li.active .icon-tag {
    background-image: var(--icon-tag-007fff);
}
body .icon-tag,
body .icon-systemtags {
    background-image: var(--icon-tag-808080);
}

li.active .icon-files-dark {
    background-image: var(--icon-files-app-007fff);
}
li.active .icon-address {
    background-image: var(--icon-address-007fff);
}

body .icon-address {
    background-image: var(--icon-address-808080);
}

li.active .icon-share {
    background-image: var(--icon-share-007fff);
}

#app-navigation-vue #app-settings #app-settings-header .settings-button,
#app-navigation #app-settings #app-settings-header .settings-button::before,
body .icon-category-tools {
    background-image: var(--icon-settings-808080);
}

#header #header-menu-unified-search .unified-search__form-input {
    color: var(--color-main-text);
}
#header #header-menu-unified-search .unified-search__form-input,
#header #header-menu-unified-search .unified-search__input-wrapper {
    background-color: var(--color-main-background);
}

body .icon-delete,
button.action-button .icon-delete {
    background-image: var(--icon-files-delete-808080);
}

.menuitem:hover .icon-delete,
.menu-option:hover .icon-delete,
button.action-button:hover .icon-delete,
button.menuitem:hover .icon-delete,
.app-navigation-entry-menu button:hover .icon-delete,
#removeavatar.icon-delete:hover {
    background-image: var(--icon-delete-e9322d);
}

#header .app-menu li a .app-menu-entry--label {
    color: transparent;
}

#header .app-menu li:hover a .app-menu-entry--label {
    color: var(--icon-inactive-color);
}

body.theme--highcontrast #header .app-menu li:hover a .app-menu-entry--label {
    color: var(--color-main-text);
}

#header .app-menu li:hover a img {
    color: var(--color-main-text);
    transform: translateY(-7px);
}

#header .app-menu:hover li img,
#header .app-menu:hover li .icon-more,
#header .app-menu:hover li .icon-more-white,
#header .app-menu:hover li .icon-loading-small,
#header .app-menu:hover li .icon-loading-small-dark {
    transform: none;
}

#header .app-menu-main:hover img,
#header .app-menu-main:focus-within img,
#header .app-menu-main .app-menu-entry:hover img,
#header .app-menu-main .app-menu-entry:focus img {
    margin-top: 0px;
}

/* Settings app */

#pass2 + input[name="newpassword-clone"] {
    width: 100%;
}

/* Personal Info */

#selectavatar.icon-folder {
    background-image: var(--icon-folder-ffffff);
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* Mobile & Desktop */

.button.icon-clippy {
    background-image: var(--icon-clippy-808080);
}

/* Sharing */

button.social-facebook {
    padding-left: 30px;
    background-image: var(--icon-federatedfilesharing-social-facebook-000);
}

button.social-twitter {
    padding-left: 30px;
    background-image: var(--icon-federatedfilesharing-social-twitter-000);
}

button.social-diaspora {
    padding-left: 30px;
    background-image: var(--icon-federatedfilesharing-social-diaspora-000);
}

/* Flow */

#workflowengine .actions__item.colored {
    background-color: var(--color-primary) !important;
}
#workflowengine .actions__item.colored button {
    background-color: white;
    color: var(--color-primary);
}

/* Calendar App*/

.datepicker-button-section button.button {
    background-color: var(--color-main-background);
    color: var(--color-main-text);
    border: none;
    max-width: 100px;
    margin: auto;
}
.mx-datepicker .mx-calendar td {
    border: 0;
}

body .icon-eye {
    background-image: var(--icon-calendar-eye-808080);
}

body .icon-briefcase {
    background-image: var(--icon-calendar-briefcase-808080);
}

body .icon-color-picker {
    background-image: var(--icon-calendar-color-picker-808080);
}
body .icon-menu {
    background-image: var(--icon-menu-808080);
}
.mx-datepicker .mx-input-wrapper {
    background-color: var(--input-background-color);
}

.mx-datepicker-main .mx-datepicker-footer .mx-btn:hover,
.mx-datepicker-main .mx-datepicker-footer .mx-btn:focus {
    background-color: var(--color-primary);
    color: white;
}

.mx-datepicker .mx-input {
    border: none;
    margin-top: 0;
    margin-bottom: 0;
}

.datepicker-button-section.icon-leftarrow {
    background-image: var(--icon-arrow-left-808080);
}

.datepicker-button-section.icon-rightarrow {
    background-image: var(--icon-arrow-right-808080);
}

.button.datepicker-button-section__next,
.button.datepicker-button-section__previous {
    border: none;
    margin: auto;
}

.new-event-today-view-section .button {
    border-radius: 8px;
}

body .icon-new-calendar {
    background-image: var(--icon-calendar-calendar-808080);
}

body .icon-new-calendar-with-task-list {
    background-image: var(--icon-calendar-new-calendar-with-task-list-808080);
}

body .icon-public {
    background-image: var(--icon-public-808080);
}

#content-vue.app-calendar #app-navigation-vue .action-item.icon-share,
#content-vue.app-calendar #app-navigation-vue .action-item.icon-shared,
#content-vue.app-contacts #addressbook-list .icon-shared {
    background-size: 12px;
}

#content-vue.app-calendar .fc-dayGridMonth-view table {
    font-size: 1em;
}

body .icon-view-week {
    background-image: var(--icon-calendar-view-week-808080);
}

body .icon-view-day {
    background-image: var(--icon-calendar-view-day-808080);
}

body .icon-view-module {
    background-image: var(--icon-calendar-view-module-808080);
}

body .icon-view-list {
    background-image: var(--icon-calendar-view-list-808080);
}

#content-vue.app-calendar .app-sidebar-tabs__tab a.active {
    color: var(--color-text-light);
}

/* Notes App*/

#content-vue.app-notes li.app-navigation-entry.active,
#content-vue.app-talk li.acli_wrapper.active {
    background-color: var(--color-background-hover) !important;
}
#content-vue.app-notes .welcome-content .icon-files-dark {
    background-size: 18px;
}

#content-vue.app-notes button.icon-confirm::before,
#content.app-dashboard ~ .popover .action-input__form .action-input__label::before {
    content: var(--icon-confirm-fff);
}

#content-vue.app-notes .welcome-content .icon-phone {
    background-size: 11px;
}

#content-vue.app-notes #app-settings__header .settings-button__icon .material-design-icon__svg,
#content-vue.app-calendar #app-settings .settings-button__icon .material-design-icon__svg,
#content-vue.app-calendar ~ .popover div[class^="property-"] .material-design-icon__svg,
#content-vue.app-calendar div[class^="property-"] .material-design-icon__svg,
#content-vue.app-calendar .app-sidebar .app-sidebar__close .material-design-icon__svg,
#content-vue.app-calendar .app-sidebar-tabs__tab a {
    color: var(--icon-inactive-color);
}

.CodeMirror .CodeMirror-line::selection,
.CodeMirror .CodeMirror-line > span::selection,
.CodeMirror .CodeMirror-line > span > span::selection {
    background: var(--color-primary);
}
input[type="text"] + .icon-confirm,
input[type="password"] + .icon-confirm,
input[type="email"] + .icon-confirm {
    background-color: var(--color-primary) !important;
    background-image: var(--icon-confirm-fff) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

input[type="text"] + .icon-confirm::before,
input[type="password"] + .icon-confirm::before,
input[type="email"] + .icon-confirm::before {
    content: unset !important;
}

input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:active,
input[type="password"]:not(:active):not(:hover):not(:focus) + .icon-confirm:active,
input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:active,
input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover,
input[type="password"]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover,
input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover,
input[type="text"]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus,
input[type="password"]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus,
input[type="email"]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus {
    border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
    border-left-color: transparent !important;
}

#app-sidebar-vue .note-category .category input.icon-confirm:hover {
    border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
}
#app-sidebar-vue.app-sidebar .app-sidebar-header__desc .app-sidebar-header__menu {
    background-color: var(--color-main-background);
}

#content-vue.app-bookmarks .icon.action-item__menutoggle--primary.action-item__menutoggle--default-icon::before {
    content: var(--icon-more-fff);
}

#note-container .CodeMirror-code[contenteditable="true"]:hover,
#note-container .CodeMirror-code[contenteditable="true"]:focus,
#note-container .CodeMirror-code[contenteditable="true"]:active {
    background-color: var(--color-main-background) !important;
}
/* Tasks app*/

.action-item:not(.priority--high) .material-design-icon,
#app-settings .collection .material-design-icon,
.material-design-icon.emoticon-outline-icon {
    color: var(--icon-inactive-color);
}

.action.active .material-design-icon.delete-icon,
.action-item:hover .material-design-icon.delete-icon {
    color: var(--color-delete);
}

#content-vue.app-tasks .app-sidebar-tabs .property__item--clearable {
    color: var(--icon-active-color) !important;
}

#content-vue.app-tasks .app-sidebar-tabs .multiselect-picker-option.active {
    color: var(--icon-active-color);
}
/* Settings Apps categories icons */

body .icon-category-app-bundles {
    background-image: var(--icon-bundles-808080);
}
body .icon-category-dashboard {
    background-image: var(--icon-dashboard-dashboard-808080);
}
body .icon-category-customization {
    background-image: var(--icon-customization-808080);
}
body .icon-category-games {
    background-image: var(--icon-games-808080);
}
body .icon-category-integration {
    background-image: var(--icon-integration-808080);
}
body .icon-category-monitoring {
    background-image: var(--icon-monitoring-808080);
}
body .icon-category-multimedia {
    background-image: var(--icon-multimedia-808080);
}
body .icon-category-office {
    background-image: var(--icon-office-808080);
}
body .icon-category-organization {
    background-image: var(--icon-organization-808080);
}
body .icon-category-search {
    background-image: var(--icon-search-808080);
}

body .icon-category-workflow {
    background-image: var(--icon-workflow-808080);
}

/* Bookmarks app */

.popover .action-button__icon.icon-link {
    background-image: var(--icon-public-808080);
}

.controls svg path,
.material-design-icon.earth-icon svg path {
    fill: var(--icon-inactive-color);
}

.app-navigation-entry-icon .material-design-icon,
.action .material-design-icon {
    color: var(--icon-inactive-color);
}

.app-navigation-entry.active .app-navigation-entry-icon .material-design-icon,
.action.active .material-design-icon,
.action.selected .material-design-icon {
    color: var(--icon-active-color);
}

.app-navigation-entry .app-navigation-entry__inline-input-container form button.icon-confirm::before {
    content: unset;
}
.app-navigation-entry.active .icon-home {
    background-image: var(--icon-home-007fff);
}

#content-vue.app-bookmarks .app-navigation-entry-icon svg path {
    fill: var(--icon-inactive-color);
}
#content-vue.app-bookmarks .app-navigation-entry.active svg path {
    fill: var(--icon-active-color);
}

/* News App */

#content-vue.app-bookmarks .empty-content {
    text-align: center;
}

#app-navigation .icon-unpinned {
    background-image: var(--icon-news-unpinned-808080);
}

#app-navigation .icon-pinned {
    background-image: var(--icon-news-pinned-808080);
}
#app-navigation .icon-full-text-disabled {
    background-image: var(--icon-news-nonfulltext-808080);
}
#app-navigation .icon-full-text-enabled {
    background-image: var(--icon-news-fulltext-808080);
}

/* Passwords App */

.searchbox .icon-search-force-white {
    background-image: var(--icon-search-000);
}

.searchbox {
    opacity: 1 !important;
}

#content.app-passwords #app-navigation .icon.fa::before {
    content: unset;
}

/* Talk App */

#content-vue.app-talk .acli_wrapper .acli.active {
    background-color: transparent;
}

#content-vue.app-talk #app-sidebar .username-form button.icon-rename,
button.edit-output-dir span.icon-rename {
    background-image: var(--icon-rename-000);
}

/* Google integration */

#google_prefs #google-content button.google-oauth {
    background-color: var(--color-primary);
}

#google-import-contacts .icon-contacts-dark {
    background-image: var(--icon-contacts-000);
}

#google-calendars button .icon-calendar-dark {
    background-image: var(--icon-calendar-000);
}

#google-import-files .icon-files-dark {
    background-image: var(--icon-files-000);
}

#google-import-photos .icon-picture {
    background-image: var(--icon-picture-000);
}

/* remove opacity */
button.edit-output-dir span.icon-rename,
#google-rm-cred .icon-close,
#google-import-photos .icon-picture,
#google-import-contacts .icon-contacts-dark,
#google-calendars button .icon-calendar-dark,
#google-import-files .icon-files-dark {
    opacity: 1;
}
/** */
#header .header-right .magnify-icon > svg {
    display: none;
}
#appmenu li:hover a,
#appmenu li a:focus {
    font-size: 12px;
    font-family: 'Roboto';
    letter-spacing: 1px;
}
#filestable thead {
    background-color: var(--color-main-background-header) !important;
}
#recommendations {
    height: 100px !important;
}
.recommendation {
    border: 1px solid #E6E8E9;
    padding: 10px !important;
    margin-bottom: 5px;
    border-radius: 6px !important;
}
progress {
    border-radius: 10px 10px !important;
    height: 12px !important;
}
#header .app-menu li a:focus .icon-more,
#header .app-menu li a:focus .icon-more-white {
    transform: none !important;
}
#more-apps:hover span,
#more-apps:focus span,
#more-apps a:focus span {
    display: none !important;
}


@media only screen and(max-width: 640px) {
    #launcher-menu {
        width: 300px !important;
        left: 10% !important;
    }
}
@media only screen and(max-width: 640px) {
    #launcher-menu {
        left: 5% !important;
    }
}
.text-color-active {
    color: var(--icon-active-color);
}
.margin-top-10 {
    margin-top: 10px;
}
body.theme--highcontrast span.material-design-icon.dots-horizontal-icon,
body.theme--highcontrast svg.material-design-icon__svg {
    color: #fff;
}
/* used for help text in the search  */
#search-help-text {
    padding: 10px;
    text-align: center;
    font-size: 12px;
    color: var(--color-text-lighter);
}
body.theme--dark #header .app-menu li a,
#header .app-menu-main .app-menu-entry {
    opacity: 1;
}

body.theme--light.theme--highcontrast #header .app-menu li a {
    opacity: 1;
    filter: invert(0);
}

body.theme--highcontrast #header .app-menu li a {
    opacity: 1;
    filter: invert(1);
}

#header .app-menu li a {
    opacity: 0.6;
}

#header .app-menu li:hover a,
#header .app-menu li.app-menu-entry__active a {
    opacity: 1;
}

body.theme--highcontrast #header .app-menu li.app-menu-entry__active a {
    filter: invert(0);
}
body.theme--highcontrast #header .app-menu li .icon-more-white {
    background-image: var(--icon-more-000);
}
body.theme--dark.theme--highcontrast #header .header-menu.unified-search a.header-menu__trigger,
body.theme--highcontrast #header .notifications-button.hasNotifications,
body.theme--highcontrast #unified-search .header-menu__trigger {
    opacity: 1 !important;
}
body.theme--dark.theme--highcontrast #header .app-menu li:hover a,
body.theme--dark.theme--highcontrast #header .app-menu li:focus a {
    color: #000;
}
/* Files App */
#content.app-files #filestable {
    padding-top: 20px;
}

.comments .comment__editor .rich-contenteditable__input {
    min-height: 70px;
}

#header-menu-user-menu .user-menu__nav .menu-entry img {
    filter: var(--inactive-icon-filter);
    opacity: 1;
}
input:not([type=range],
.input-field__input,
[type=submit],
[type=button],
[type=reset],
.multiselect__input,
.select2-input,
.action-input__input,
[class^=vs__]),
select,
div[contenteditable=true],
textarea {
    border: 1px solid var(--color-border-dark);
    border-radius: var(--border-radius);
}
#app-content-files .icon-onlyoffice-new-docx {
    background-image: url(../img/filetypes/x-office-document.svg);
}
#app-content-files .icon-onlyoffice-new-xlsx {
    background-image: url(../img/filetypes/x-office-spreadsheet.svg);
}
#app-content-files .icon-onlyoffice-new-pptx {
    background-image: url(../img/filetypes/x-office-presentation.svg);
}
.unified-search__result .unified-search__result-icon,.unified-search__result .unified-search__result-icon img,.v-popper__popper .icon-filter {
    filter :var(--inactive-icon-filter);

}