#body-user #header, #body-settings #header, #body-public #header { font-family: 'Raleway'; font-weight: 600; } #header .logo { filter: unset !important; } #header:before { display: none !important; } #header.header-new { position: relative !important; height: 100% !important; margin: 0 5px 0 0 !important; background: #FFFFFF !important; box-shadow: 0px 2px 22px 0px #0000000D; display: inline-flex; top: 0; z-index: 3005; box-sizing: border-box; justify-content: space-between; flex-direction: column; width: 43px !important; border-radius: 8px; .user-control__header { position: relative; } /* Tooltip */ .header-menu__trigger:hover::after, .help-online__user a:hover::after, .notifications-button:hover::after { content: attr(aria-label); position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.9); color: white; padding: 6px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; white-space: nowrap; z-index: 9999; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); pointer-events: none; opacity: 0; animation: tooltipFade 0.2s ease-out forwards; margin-bottom: 6px; } @keyframes tooltipFade { to { opacity: 1; } } .tooltip-header { opacity: 0 !important; } .help-online__user:hover .tooltip-header, .notifications__wrapper:hover .tooltip-header, .unified-search__wrapper:hover .tooltip-header, #assistant:hover .tooltip-header{ opacity: 1 !important; pointer-events: auto; position: absolute; transform: translateX(-50%); background: #333; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; z-index: 9999; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); animation: tooltipFade 0.2s ease-out forwards; margin-bottom: 6px; } & .notifications__wrapper:hover .tooltip-header.tooltip-header--notifications { left: 99px; top: 67px; } & .help-online__user:hover .tooltip-header.tooltip-header--user { bottom: 37%; left: 106px; } & .unified-search__wrapper:hover .tooltip-header.tooltip-header--search { bottom: 18%; left: 76px; } & #assistant:hover .tooltip-header.tooltip-header--assistant { bottom: -4px; left: 89px; } /*----*/ & .notification-container { & .empty-content { & .empty-content__icon { margin: 0 auto 20px; } & .empty-content__name { font-weight: 500; font-size: 24px; line-height: 20px; } & .material-design-icon.bell-outline-icon svg { display:none; } & .material-design-icon.bell-outline-icon::before { opacity: 1; width: 77px; height: 77px; background-image: url("/themes/forbion/images/header/nof-not-icon.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; display: block; content: ""; } } & .notification-wrapper { & .notification { & .notification-actions { display:flex; } & .notification-message { padding-inline-start:12px !important; } } & .notification-time { font-weight: 500; font-size: 16px; line-height: 20px; color: #808080; } & .dismiss-all { & .button-vue__text { font-weight: 500; font-size: 16px; line-height: 20px; color: #808080; } & .material-design-icon.close-icon svg { display: none; } & .material-design-icon.close-icon::before { width: 16px; height: 16px; background-image: url("/themes/forbion/images/header/close-modal.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; content: ""; } } & .notification-subject { margin: 0px 16px 12px 16px !important; & .rich-text--wrapper>div { font-size:18px; font-weight:600; } } & .rich-text--wrapper { font-weight: 500; font-size: 14px; line-height: 20px; color: #000000; } & .notification-dismiss-button { & .material-design-icon.close-icon svg { display: none; } & .material-design-icon.close-icon::before { width: 16px; height: 16px; background-image: url("/themes/forbion/images/header/close-modal.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; content: ""; } } } } & .l-wrapper { width: 100% !important; height: 100%; position: relative; display: flex; flex-direction: column; align-items: center; & .is-header__burger { display: none; } & .logo__header { display: flex; align-items: center; position: relative !important; margin-top: 4px; } & .app-menu { position: relative; display: flex; flex-direction: column; width: 43px; margin-top: auto !important; & .app-menu-entry--more[title='Еще'] { cursor: pointer; display: flex; justify-content: center; align-items: center; margin-bottom: 4px; position: sticky; bottom: 0; flex-shrink: 0; .app-menu-entry__link-more { height: 35px !important; width: 35px !important; display: flex; justify-content: center; align-items: center; cursor: pointer; & .app-menu-entry__label { display: none !important; } & .app-menu-entry__icon { background: transparent; border-radius: 50%; height: 35px !important; width: 35px !important; display: flex; justify-content: center; align-items: center; } } } & .app-menu__list:has(.hidden-app-menu__list.is-active) { overflow-y: auto !important; } &>.app-menu__list { border-top: 2px solid transparent; padding-top: 4px; transition: border-color 0.2s ease, border-top-width 0.3s ease, padding-top 0.3s ease; } &>.app-menu__list:has(.hidden-app-menu__list.is-active) { border-top-color: #80808069 } & .app-menu__list { display: flex; flex-direction: column; gap: 12px; height: 100%; align-items: center; /*max-height: 63vh !important;*/ flex: 1 1 auto; overflow-y: hidden; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; margin-inline: 4px; &::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } & .tooltip-header-hide { opacity: 0; pointer-events: none; } & li.app-menu-entry { cursor: pointer; transition: hover .3s; height: 35px !important; width: 35px !important; transition: all 0.3s ease; flex-shrink: 0; & .app-menu-entry__label { display: none; color: transparent; } & a.app-menu-entry__link { height: 35px !important; width: 35px !important; display: block; & .app-menu-entry__icon { background: #E0E0E0; border-radius: 50%; height: 35px !important; width: 35px !important; display: flex !important; align-items: center; justify-content: center; pointer-events: none; & img { width: 35px; height: 35px; } } } } & li:hover { opacity: .95; } } & .hidden-app-menu__list { overflow: hidden; max-height: 0; opacity: 0; transform: translateY(20px); transition: max-height 0.4s cubic-bezier(.22, .9, .34, 1), opacity 0.3s ease, transform 0.35s cubic-bezier(.22, .9, .34, 1); display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; & li { transition: all 0.3s ease 0.1s; } & .setting-hidden-menu { display: none !important; position: sticky; bottom: 12px; margin-top: auto; align-self: flex-end; opacity: 0.6; transition: opacity 0.3s; cursor: pointer; &:hover { opacity: 1; transform: scale(1.1); } } } .hidden-app-menu__list.is-active { opacity: 1 !important; transform: translateY(0); max-height: 500px; } } & .user-control__header>div:hover, .user-control__header>a:hover, .user-control__header>nav:not(.header-menu--opened):hover { opacity: .95 } & .user-control__header { display: flex; align-items: center; flex-direction: column; gap: 12px; margin-bottom: 12px; & .header-menu.account-menu { &>button { padding: 0; } } & img { pointer-events: none; } &>nav .header-menu__wrapper { opacity: 1; } &>div:not(.name__user, .header-menu__wrapper) { background: #E0E0E0; border-radius: 50%; height: 35px; width: 35px; cursor: pointer; transition: hover .3s; & a { & img { width: 35px; height: 35px; } } } & .unified-search__wrapper { background-image: url("/themes/forbion/images/header/search-header-icon.svg") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 35px 35px !important; & .icon-vue svg { display: none; } } & .material-design-icon.magnify-icon.header-menu__trigger-icon svg { display: none; } & .notifications__wrapper { background-image: url("/themes/forbion/images/header/notification-header-icon.svg") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 35px 35px !important; & #header-menu-notifications { top: 106px !important; left: 43px !important; width: 350px; } & .header-menu__caret { border-bottom-color: transparent !important; } & .header-menu__trigger svg { position: relative; display: none; } & .header-menu__trigger svg.notifications-button__icon .notification__dot { fill: transparent !important; } & .header-menu__trigger .alert-icon { position: relative; margin-right: 20px; width: 10px; height: 10px; } & .header-menu__trigger .alert-icon::before { content: ''; position: absolute; /*right: -6px;*/ /*bottom: 16px;*/ left: 5px; top: -2px; display: block; background-image: url("/themes/forbion/images/alert-notification.svg"); width: 10px; height: 10px; background-size: cover; background-repeat: no-repeat; z-index: 1; } } & #user-menu { & #header-menu-user-menu { & .account-menu__list { li.list-item__wrapper:has(a#help.list-item__anchor) { display:none; } } } &>button { /* & .user-status-icon.avatardiv__user-status svg { display: none; } & .user-status-icon.avatardiv__user-status::before { content: ''; background-image: url("/themes/forbion/images/header/circle-green.svg"); width: 12px; height: 12px; background-size: cover; background-repeat: no-repeat; }*/ } } & #user-menu .header-menu__wrapper { top: 80px !important; left: 43px; max-width: 300px; & .user-status-icon.user-status-icon svg { display: none; } & .user-status-icon.user-status-icon::before { content: ''; background-image: url("/themes/forbion/images/header/circle-green.svg"); width: 20px; height: 20px; background-size: cover; background-repeat: no-repeat; } & .header-menu__content { width: 100% !important; & .account-menu__list { width: 90%; } } & .list-item__wrapper[data-v-a3ec46a7]:first-of-type { display: none; } & #firstrunwizard_about { display: none; } } } & .user-control__header:hover button { opacity: .75; } } } #header.header-new::before { display: none !important; } #assistant { & > a { height:100%; display:block; } } .modal-mask#unified-search { & .dialog__name { display: block !important; text-align: left; padding-top: 20px; margin-bottom: 5px; margin-top: 0; } } .modal-mask .unified-search-modal__content { & .empty-content { & .empty-content__icon { margin-bottom: 0 !important; width: 90px; height: 90px; position: relative; opacity: 1; background: #E0E0E0; border-radius: 50%; transform: unset !important; &:after { content: ''; position: absolute; top: 0; left: 0; width: 90px; height: 90px; background-image: url("/themes/forbion/images/search-modal.svg"); background-repeat: no-repeat; background-position: center; } & span { display: none; } } & .empty-content__name { margin-top: 25px !important; margin-bottom: 10px !important; text-align: center !important; font-weight: 700 !important; font-size: 20px !important; line-height: 30px !important; } } & .input-field__main-wrapper { position: relative; & input { padding: 8px 75px 8px 12px; box-shadow: unset; border-radius: 8px; color: #808080; border: 1px solid #E6E6E6 !important; } &:before { content: ''; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background-image: url("/themes/forbion/images/search-gray.svg"); background-repeat: no-repeat; } } & .unified-search-modal__filters { & > .action-item, > .v-popper{ flex: 1; display: flex; justify-content: center; } & > .action-item { & > .v-popper { width: 100%; & > button { width: 100%; } } } & > .v-popper { & > button { width: 100%; } } } & .unified-search-modal__filters { display: flex; justify-content: space-between; border-bottom: 2px solid #E6E6E6; margin: 20px 0 0; padding: 0 10px 8px; & .action-item { & button { background: unset !important; &:hover { background: unset !important; } & .button-vue__wrapper { display: flex; flex-direction: column; .button-vue__icon { width: 34px; height: 34px; & svg { fill: #000000; } } .button-vue__text { margin-top: -2px; color: #000000 !important; font-weight: normal; } } } } & .v-popper { & button { background: unset !important; &:hover { background: unset !important; } & .button-vue__wrapper { display: flex; flex-direction: column; .button-vue__icon { width: 34px; height: 34px; & svg { fill: #000000; } } .button-vue__text { margin-top: -2px; color: #000000 !important; font-weight: normal; } } } } } & .unified-search-modal__filters-applied { margin-top: 5px; & .chip { margin: 4px; background: #F0F1F4 !important; padding: 5px 20px 5px 14px; border-radius: 8px; position: relative; border: unset; &:after { content: ''; position: absolute; top: 0; right: 40px; width: 1px; height: 100%; background: #FFFFFF; } & .icon { width: 24px; height: 24px; margin-top: -2px; padding: 0; position: relative; display: none; } & .text { margin-left: 0; color: #000000; font-weight: normal; } & .close-icon { margin-left: 16px; position: relative; } } } } .v-popper__popper { & .v-popper__inner { padding: 4px 10px !important; & .filter-button__icon, .action-button__icon { display: none; } } & .searchable-list__wrapper { min-width: 350px; min-height: 350px; & .input-field__main-wrapper { height: auto !important; } & input { padding: 8px 75px 8px 12px; box-shadow: unset; border-radius: 8px; color: #808080; border: 1px solid #E6E6E6 !important; height: auto !important; } & .input-field__icon--leading { position: absolute; right: 5px; left: unset; } & .input-field__trailing-button { display: none; } } & .v-popper__inner { & li.action { & .action-button { & .action-button__text, & .action-button__longtext { margin-left: 0 !important; } & .action-button__icon:empty { width: 34px; } } } } } @media (min-height: 500px) and (max-height: 600px) { & .app-menu__list:has(.hidden-app-menu__list.is-active), .app-menu__list { max-height: 51vh !important; } } @media (min-height: 800px) and (max-height: 900px) { & .app-menu__list:has(.hidden-app-menu__list.is-active) { max-height: 63vh !important; } } @media (min-height: 900px) and (max-height: 1024px) { & .app-menu__list:has(.hidden-app-menu__list.is-active) { max-height: 68vh !important; } } @media (min-height: 1024px) and (max-height: 1080px) { & .app-menu__list:has(.hidden-app-menu__list.is-active) { max-height: 71vh !important; } } @media (min-height: 1080px) and (max-height: 1440px) { & .app-menu__list:has(.hidden-app-menu__list.is-active) { max-height: 73vh !important; } } @media (min-height: 1440px) { & .app-menu__list:has(.hidden-app-menu__list.is-active) { max-height: 80vh !important; } }