.icon {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.icon-bs-white-medium {
    background-size: contain;
    background-repeat: no-repeat;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    margin-right: 0rem;
    position: relative;
    top: -1px;
    filter: invert(100%) brightness(115%) contrast(100%);
}

.icon-bs-white-small {
    background-size: contain;
    background-repeat: no-repeat;
    width: 1rem;
    height: 1rem;
    display: inline-block;
    margin-right: 0rem;
    position: relative;
    top: -1px;
    filter: invert(100%) brightness(115%) contrast(100%);
}

.icon-bs-white-xsmall {
    background-size: contain;
    background-repeat: no-repeat;
    width: 0.9rem;
    height: 0.9rem;
    display: inline-block;
    margin-right: 0rem;
    position: relative;
    top: -1px;
    filter: invert(100%) brightness(115%) contrast(100%);
}


.icon-bs-black-medium {
    background-size: contain;
    background-repeat: no-repeat;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
    margin-right: 0rem;
    position: relative;
    top: -1px;
}

.icon-bs-black-settings {
    background-size: contain;
    background-repeat: no-repeat;
    width: 1rem;
    height: 1rem;
    display: inline-block;
    margin-right: 0rem;
    position: relative;
    top: -1px;
    padding: 4px;
}

.icon-bs-black-large {
    background-size: contain;
    background-repeat: no-repeat;
    width: 2rem;
    height: 2rem;
    display: inline-block;
    margin-right: 0rem;
    position: relative;
    top: -1px;
}

.icon-bs-black-small {
    background-size: contain;
    background-repeat: no-repeat;
    width: 1rem;
    height: 1rem;
    display: inline-block;
    margin-right: 0rem;
    position: relative;
    top: -1px;
}

.icon-bs-black-xsmall {
    background-size: contain;
    background-repeat: no-repeat;
    width: 0.9rem;
    height: 0.9rem;
    display: inline-block;
    margin-right: 0rem;
    position: relative;
    top: -1px;
}

.icon-bs-primary-medium {
    background-size: contain;
    background-repeat: no-repeat;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
    margin-right: 0rem;
    position: relative;
    top: -1px;
    filter: var(--main-color-filter);
}

.icon-bs-primary-small {
    background-size: contain;
    background-repeat: no-repeat;
    width: 1rem;
    height: 1rem;
    display: inline-block;
    margin-right: 0rem;
    position: relative;
    top: -1px;
    filter: var(--main-color-filter);
}

.icon-bs-primary-xsmall {
    background-size: contain;
    background-repeat: no-repeat;
    width: 0.9rem;
    height: 0.9rem;
    display: inline-block;
    margin-right: 0rem;
    position: relative;
    top: -1px;
    filter: var(--main-color-filter);
}

.icon-bs-warning-exclamation-triangle-fill {
    width: 1rem;
    height: 1rem;
    display: inline-block;
    margin-right: 0rem;
    position: relative;
    top: -1px;
    background-color: var(--warning-color);
    -webkit-mask: url("/images/bootstrap-icons/exclamation-triangle-fill.svg") no-repeat center / contain;
    mask: url("/images/bootstrap-icons/exclamation-triangle-fill.svg") no-repeat center / contain;
}

/* Nie ma jej w Bootstrap Icons — własny plik, kontrolka silnika (check engine). */
.icon-bs-check-engine {
    background: url("/images/bootstrap-icons/check-engine.svg") no-repeat center/1.25rem transparent;
}

.icon-bs-navbar {
    background-size: contain;
    background-repeat: no-repeat;
    width: 1.1rem;
    height: 1.1rem;
    display: inline-block;
    margin-right: 0rem;
    position: relative;
    top: -1px;
}

.icon-bs-shortcuts {
    background-size: contain;
    background-repeat: no-repeat;
    width: 1rem;
    height: 1rem;
    display: inline-block;
    margin-right: 0rem;
    position: relative;
}

.icon-info {
    background-size: contain;
    background-repeat: no-repeat;
    width: 0.9rem;
    height: 0.9rem;
    display: inline-block;
    margin-right: 0rem;
    position: relative;
    filter: invert(35%) brightness(115%) contrast(100%);
}

.icon-log {
    position: relative;
    width: 1.2rem;
    height: 1.2rem;
    margin: auto auto;
    display: flex;
    background-size: cover;
}

/*nav*/

.sidebar .nav-item.active > a > span.dxbl-image:not(.oi) {
    filter: invert(99%) sepia(55%) saturate(147%) hue-rotate(229deg) brightness(118%) contrast(100%);
}

.sidebar .nav-item.active > a > span.oi {
    color: white;
}

.icon-house-solid-nav-menu {
    background: url("/images/bootstrap-icons/house-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-dolly-square-fill-nav-menu {
    background: url("/images/bootstrap-icons/dolly-solid.svg") no-repeat center/1.25rem transparent;
}

.icon-box-seam-fill-nav-menu {
    background: url("/images/bootstrap-icons/box-seam-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-currency-exchange-fill-nav-menu {
    background: url("/images/bootstrap-icons/currency-exchange.svg") no-repeat center/1.25rem transparent;
}

.icon-sliders-nav-menu {
    background: url("/images/bootstrap-icons/sliders2.svg") no-repeat center/1.25rem transparent;
}

.icon-building-fill-nav-menu {
    background: url("/images/bootstrap-icons/building-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-buildings-fill-nav-menu {
    background: url("/images/bootstrap-icons/buildings-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-gear-fill-nav-menu {
    background: url("/images/bootstrap-icons/gear-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-basket-fill-nav-menu {
    background: url("/images/bootstrap-icons/basket-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-people-fill-nav-menu {
    background: url("/images/bootstrap-icons/people-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-palette-fill-nav-menu {
    background: url("/images/bootstrap-icons/palette-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-printer-fill-nav-menu {
    background: url("/images/bootstrap-icons/printer-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-person-fill-check-nav-menu {
    background: url("/images/bootstrap-icons/person-fill-check.svg") no-repeat center/1.25rem transparent;
}

.icon-list-nav-menu {
    background: url("/images/bootstrap-icons/list.svg") no-repeat center/1.25rem transparent;
}

.icon-file-text-fill-nav-menu {
    background: url("/images/bootstrap-icons/file-text-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-person-circle-nav-menu {
    background: url("/images/bootstrap-icons/person-circle.svg") no-repeat center/1.25rem transparent;
}

.icon-database-fill-gear-nav-menu {
    background: url("/images/bootstrap-icons/database-fill-gear.svg") no-repeat center/1.25rem transparent;
}

.icon-house-gear-fill-nav-menu {
    background: url("/images/bootstrap-icons/house-gear-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-file-earmark-fill-nav-menu {
    background: url("/images/bootstrap-icons/file-earmark-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-file-earmark-plus-fill-nav-menu {
    background: url("/images/bootstrap-icons/file-earmark-plus-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-bookmark-plus-fill-nav-menu {
    background: url("/images/bootstrap-icons/bookmark-plus-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-file-bar-graph-fill-nav-menu {
    background: url("/images/bootstrap-icons/file-bar-graph-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-file-earmark-check-fill-nav-menu {
    background: url("/images/bootstrap-icons/file-earmark-check-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-file-spreadsheet-fill-nav-menu {
    background: url("/images/bootstrap-icons/file-spreadsheet-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-calendar-event-fill-nav-menu {
    background: url("/images/bootstrap-icons/calendar-event-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-calendar-range-fill-nav-menu {
    background: url("/images/bootstrap-icons/calendar-range-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-bus-front-fill-nav-menu {
    background: url("/images/bootstrap-icons/bus-front-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-house-door-fill-nav-menu {
    background: url("/images/bootstrap-icons/house-door-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-file-ruled-fill-nav-menu {
    background: url("/images/bootstrap-icons/file-ruled-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-person-workspace-nav-menu {
    background: url("/images/bootstrap-icons/person-workspace.svg") no-repeat center/1.25rem transparent;
}

.icon-person-rolodex-nav-menu {
    background: url("/images/bootstrap-icons/person-rolodex.svg") no-repeat center/1.25rem transparent;
}

.icon-person-vcard-fill-nav-menu {
    background: url("/images/bootstrap-icons/person-vcard-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-collection-fill-nav-menu {
    background: url("/images/bootstrap-icons/collection-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-file-richtext-fill-nav-menu {
    background: url("/images/bootstrap-icons/file-richtext-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-houses-fill-nav-menu {
    background: url("/images/bootstrap-icons/houses-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-p-circle-fill-nav-menu {
    background: url("/images/bootstrap-icons/p-circle.svg") no-repeat center/1.25rem transparent;
}

.icon-stack-nav-menu {
    background: url("/images/bootstrap-icons/stack.svg") no-repeat center/1.25rem transparent;
}

.icon-file-post-fill-nav-menu {
    background: url("/images/bootstrap-icons/file-post-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-cash-coin-nav-menu {
    background: url("/images/bootstrap-icons/cash-coin.svg") no-repeat center/1.25rem transparent;
}

.icon-clipboard-fill-nav-menu {
    background: url("/images/bootstrap-icons/clipboard-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-shield-fill-nav-menu {
    background: url("/images/bootstrap-icons/shield-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-filetype-html-nav-menu {
    background: url("/images/bootstrap-icons/filetype-html.svg") no-repeat center/1.25rem transparent;
}

.icon-envelope-fill-nav-menu {
    background: url("/images/bootstrap-icons/envelope-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-envelope-at-fill-nav-menu {
    background: url("/images/bootstrap-icons/envelope-at-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-chat-right-fill-nav-menu {
    background: url("/images/bootstrap-icons/chat-right-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-chat-right-text-fill-nav-menu {
    background: url("/images/bootstrap-icons/chat-right-text-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-chat-right-quote-fill-nav-menu {
    background: url("/images/bootstrap-icons/chat-right-quote-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-chat-right-dots-fill-nav-menu {
    background: url("/images/bootstrap-icons/chat-right-dots-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-bag-fill-nav-menu {
    background: url("/images/bootstrap-icons/bag-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-cart-fill-nav-menu {
    background: url("/images/bootstrap-icons/cart-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-list-columns-reverse-nav-menu {
    background: url("/images/bootstrap-icons/list-columns-reverse.svg") no-repeat center/1.25rem transparent;
}

.icon-folder-fill-nav-menu {
    background: url("/images/bootstrap-icons/folder-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-truck-nav-menu {
    background: url("/images/bootstrap-icons/truck.svg") no-repeat center/1.25rem transparent;
}

.icon-coins-fill-nav-menu {
    background: url("/images/bootstrap-icons/coins-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-person-gear-fill-log-mode {
    background: url("/images/bootstrap-icons/person-fill-gear.svg") no-repeat center/1.25rem transparent;
}

.icon-robot-nav-menu {
    background: url("/images/bootstrap-icons/robot.svg") no-repeat center/1.25rem transparent;
}

.icon-speedometer2-nav-menu {
    background: url("/images/bootstrap-icons/speedometer2.svg") no-repeat center/1.25rem transparent;
}

.icon-earmark-bar-graph-fill-nav-menu {
    background: url("/images/bootstrap-icons/file-earmark-bar-graph-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-grid-nav-menu {
    background: url("/images/bootstrap-icons/grid.svg") no-repeat center/1.25rem transparent;
}

.icon-send-fill-nav-menu {
    background: url("/images/bootstrap-icons/send-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-person-badge-fill-nav-menu {
    background: url("/images/bootstrap-icons/person-badge-fill.svg") no-repeat center/1.25rem transparent;
}

.icon-shop-nav-menu {
    background: url("/images/bootstrap-icons/shop.svg") no-repeat center/1.25rem transparent;
}

.icon-hammer-menu {
    background: url("/images/bootstrap-icons/hammer.svg") no-repeat center/1.25rem transparent;
}

.icon-shuffle-nav-mode {
    background: url("/images/bootstrap-icons/shuffle.svg") no-repeat center/1.25rem transparent;
}

.icon-box-arrow-in-right-menu {
    background: url("/images/box-arrow-in-right_custom.svg") no-repeat center/1.25rem;
}

.icon-link-45deg-menu {
    background: url("/images/bootstrap-icons/link-45deg.svg") no-repeat center/1.25rem;
}

.icon-list-check-menu {
    background: url("/images/bootstrap-icons/list-check.svg") no-repeat center/1.25rem;
}

/*log grid*/

.icon-gear-fill-log-mode {
    background: url("/images/bootstrap-icons/gear-fill.svg") no-repeat center/1.25rem transparent;
    display: flex;
    margin: auto auto;
}

.icon-person-fill-log-mode {
    background: url("/images/bootstrap-icons/person-fill.svg") no-repeat center/1.25rem transparent;
    display: flex;
    margin: auto auto;
}

.icon-cloud-fill-log-mode {
    background: url("/images/bootstrap-icons/cloud-fill.svg") no-repeat center/1.25rem transparent;
    display: flex;
    margin: auto auto;
}

/* Logotypy integracji maja rozne proporcje, wiec bez stalej wysokosci podkladka
   przyjmowala ksztalt kazdego pliku z osobna. Kwadrat + contain daje jednolity
   pasek niezaleznie od tego, czy logo jest szerokie czy wysokie. */
/* DevExpress renderuje ikone z IconUrl jako <img>, wiec o proporcje dba
   object-fit - samo background-size nie ma tu zastosowania. Reguly tla zostaja
   dla wariantow renderowanych jako element z background-image. */
.icon-toolbar-style {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--logo-plate-bg);
    background-origin: content-box;
    object-fit: contain;
    width: 36px;
    height: 36px;
    padding: 5px;
    border-radius: var(--logo-plate-radius);
    display: inline-block;
}

/*other*/
.icon-arrow-left-white {
    background: url("/images/arrow-left-white_custom.svg") no-repeat center/1.25rem transparent;
    display: flex;
    margin: auto auto;
}

.icon-basket3 {
    background: url("/images/bootstrap-icons/basket3-fill.svg") no-repeat center/3.25rem transparent;
}

.icon-lock {
    background: url("/images/bootstrap-icons/lock.svg") no-repeat center/1.25rem transparent;
}

.icon-question-circle-fill-nav-menu {
    background: url("/images/bootstrap-icons/question-circle-fill.svg") no-repeat center/1.25rem transparent;
}