/*!
 * NONE
 */
/**
 * Design Tokens - Epic Theme
 * Based on Firmao Style Guide (Figma)
 *
 * UWAGA: Wartości kolorów są oszacowane wizualnie z Figma Style Guide.
 * Dla dokładnych wartości HEX, potrzebny jest dostęp do edycji w Figmie
 * lub eksport Variables/Styles.
 */

:root {
    /* === KOLORY PODSTAWOWE === */

    --menu-black: #141846;
    --menu-black-hover: #000030D9;

    /* Blue - Główny kolor brandowy */
    --color-blue: #1E4ED7;              /* Blue default - główny niebieski */
    --color-blue-darken-20: #183EAC;
    --color-blue-darken-50: #0F276C;
    --color-blue-80: #4B71DF;           /* Blue 80 - jaśniejszy */
    --color-blue-60: #7895E7;           /* Blue 60 */
    --color-blue-40: #A5B8EF;           /* Blue 40 - najjaśniejszy */

    --color-blue-menu-active: #1E4ED70F;

    /* Blue Dark - Ciemny niebieski (granatowy) */
    --color-blue-dark: #141846;         /* Blue dark - bardzo ciemny niebieski */

    --color-blue-dark2: #043896;

    /* Blue Light - Jasny niebieski */
    --color-blue-light: #F2F6FF;        /* Jasny niebieski - tła, akcenty */
    --color-blue-light-hover: #ecf1ff;
    --color-blue-light-hover-transparent: #ecf1ff50;

    /* Black & Grays - Skala szarości */
    --color-black: #121212;             /* Black - prawie czarny */
    --color-gray-80: #414141;           /* Gray 80 - ciemny szary */
    --color-gray-60: #717171;           /* Gray 60 - średni szary */
    --color-gray-40: #A0A0A0;           /* Gray 40 */
    --color-gray-20: #D0D0D0;           /* Gray 20 - jasny szary */
    --color-gray-10: #E7E7E7;           /* Gray 10 */
    --color-gray-05: #F3F3F3;           /* Gray 05 - bardzo jasny szary */

    --color-gray-fields: #F8FAFC;

    /* White */
    --color-white: #FFFFFF;             /* White */

    /* Gray Light - Jasny szary dla tła */
    --color-gray-light: #F9FAFC;        /* Gray Light - tła */

    /* Yellow - Żółty (ostrzeżenia, highlights) */
    --color-yellow: #FEC352;            /* Yellow default */
    --color-yellow-80: #FECF75;         /* Yellow 80 */
    --color-yellow-60: #FEDB97;         /* Yellow 60 */
    --color-yellow-40: #FFE7BA;         /* Yellow 40 */

    /* Red - Czerwony (błędy, usuwanie) */
    --color-red: #CC0000;               /* Red default */
    --color-red-light: #F15757;         /* Red light */

    /* Green - Zielony (sukces, potwierdzenia) */
    --color-green: #268300;             /* Green default */
    --color-green-light: #38BC03;       /* Green light */

    /* === KOLORY SEMANTYCZNE === */

    /* Primary - Główny kolor akcji */
    --color-primary: var(--color-blue);
    --color-primary-hover: var(--color-blue-dark);
    --color-primary-light: var(--color-blue-light);

    /* Text - Kolory tekstu */
    --color-text-primary: var(--color-black);
    --color-text-secondary: var(--color-gray-60);
    --color-text-disabled: var(--color-gray-40);
    --color-text-inverse: var(--color-white);

    /* Background - Kolory tła */
    --color-bg-primary: var(--color-white);
    --color-bg-secondary: var(--color-gray-05);
    --color-bg-tertiary: var(--color-gray-light);

    --uni-create-obj-floater-font-override: var(--color-gray-80);
    --uni-create-obj-bg-hover-color: #f2f6ff;

    /* Border - Kolory ramek */
    --color-border-primary: var(--color-gray-20);
    --color-border-secondary: var(--color-gray-10);
    --color-border-focus: var(--color-blue);

    /* States - Stany */
    --color-success: var(--color-green);
    --color-success-light: var(--color-green-light);
    --color-warning: var(--color-yellow);
    --color-warning-light: var(--color-yellow-40);
    --color-error: var(--color-red);
    --color-error-light: var(--color-red-light);
    --color-info: var(--color-blue);
    --color-info-light: var(--color-blue-light);

    --color-holiday-day: #FEEEEE;

    /* === TYPOGRAFIA === */

    /* Font Family */
    --font-family-primary: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Font Sizes */
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.3;
    --line-height-relaxed: 1.5;

    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* === SPACING === */

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-base: 16px;
    --spacing-lg: 20px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    --spacing-3xl: 40px;

    /* === BORDER RADIUS === */

    --radius-sm: 2px;
    --radius-base: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    /* === SHADOWS === */

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* === Z-INDEX === */

    --z-dropdown: 1000;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

}

* {
    background-repeat: no-repeat;
}

/**
 * Epic Theme - Modern Firmao Skin
 * Based on Firmao Style Guide (Figma)
 */

/* Import Design Tokens */

/* === GLOBAL STYLES === */

body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-tertiary);

    --v-fn-color-logo: var(--color-blue);
    --v-fn-color-menuicon-blue: var(--color-blue-light);
    --v-fn-color-menuicon-inv-blue: var(--color-blue);
    --v-fn-color-chaticon-blue: var(--color-blue);
    --v-fn-color-buttons: var(--color-blue);
}

#dashboard .x-btn.dashboard-date-filter-btn button,
#dashboard .dashboardFilterUser,
.x-btn button {
    color: var(--color-black);
    font-weight: 400;
}

.x-form-element .xx-item-gray, #organization-settings-panel .x-form-composite .x-form-display-field, .x-grid3-cell-selected .xg3ci, .xg3ci, body {
    color: var(--color-black);
}

.x-dark-menu-style.darkLogo.x-leftMenuOnHover.x-left-menu-hover #menuContainer.xcollapsed-menu:before,
.x-leftMenuOnHover #menuContainer.xcollapsed-menu:hover,
.x-leftMenuOnHover.x-left-menu-floating #menuContainer.xcollapsed-menu,
.x-leftMenuOnHover.x-left-menu-lastobject #menuContainer.xcollapsed-menu {
    background-color: var(--menu-black-hover) !important;
}
.darkLogo.x-epic-style.x-menu-collapsed #logo-panel-container{
    overflow: visible;
    background-color: transparent !important;
}
.darkLogo.x-epic-style.x-menu-collapsed #logo-panel-container img{
    display: none;
}

div.x-change-organization label,
div.x-ilau.x-tip label,
div.x-ilau.x-tip .x-tip-header {
    margin-top: 2px;
}
div.x-ilau.x-tip input,  div.x-change-organization input{
    margin-top: 4px;
}

#menuContainer,
#menuContainer .x-panel-body{
    width: 248px !important;
}
#menuContainer-xsplit{
    user-select: none;
    pointer-events: none;
}

#menuContainer.xcollapsed-menu:before{
    top: -57px;
    height: 57px;
}

#menuContainer.xcollapsed-menu{
    border-top: 0px;
}

.x-dark-menu-style.darkLogo #menuContainer.xcollapsed-menu:before,
#menuContainer.x-epic-style.xcollapsed-menu:before,
.x-simple-style.x-epic-style .fnmenu .fnmenu-body,
.x-simple-style.x-epic-style .fnmenu .x-more-left-menu,
dark-menu-style.darkLogo #menuContainer.xcollapsed-menu:before,
.darkLogo.x-epic-style #logo-panel-container{
    background-color: var(--menu-black) !important;
    border-right: 0px solid transparent;
}

.white-header-style.x-epic-style #mainheader {
    background-color: var(--color-white);
}

#menuContainer, #contentContainer, #rightPanel {
    border-top: 0px solid transparent;
}

.x-epic-style .mainheader-button{
    background-position: 8px 8px !important;
    margin-left: 2px !important;
    margin-right: 2px !important;
}

#userLink,
.x-epic-style .mainheader-button:hover{
    filter: none;
}

.x-epic-style .mainheader-phone{
    background-image: url("images/topmenu/phone.svg") !important;
}
.x-epic-style .mainheader-chat{
    background-image: url("images/topmenu/chat.svg") !important;
}
.x-epic-style .mainheader-notifications{
    background-image: url("images/topmenu/notification.svg") !important;
}
.x-epic-style .mainheader-help{
    background-image: url("images/topmenu/help.svg") !important;
}

.x-epic-style .mainheader-phone:hover,
.x-epic-style .mainheader-chat:hover,
.x-epic-style .mainheader-notifications:hover,
.x-epic-style .mainheader-help:hover{
    filter: brightness(0.75) contrast(2) saturate(1.3);
}

#userLink{
    margin-left: 10px !important;
}

.x-epic-style .universal-create-object-button .icon{
    background-image: url("images/topmenu/add.svg");
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: 2px;
    filter: none;
    filter: none;
}

.x-epic-style .universal-create-object-button .active .icon{
    background-image: url("images/topmenu/cross.svg");
}


.universal-create-object-button .inner{
    border: 1px solid var(--color-blue-40);
}
.universal-create-object-button .inner:hover{
    border: 1px solid var(--color-blue-80);
}

#mainheader .search-field.x-form-field-wrap.x-trigger-wrap-focus .x-form-trigger.x-form-search-trigger-fn,
.white-header-style #mainheader .search-field.x-form-field-wrap .x-form-search-trigger-fn,
#mainheader .search-field.x-form-field-wrap .x-form-search-trigger-fn,
#mainheader .search-field.x-form-field-wrap #breadcrumbSearchField{
    background-color: transparent !important;
}

.white-header-style .x-form-field-wrap .x-form-search-trigger-fn{
    background-image: url("images/topmenu/search.svg") !important;
    top: 5px;
    right: 5px;
    height: 20px !important;
    background-position: 10px 6px !important;
    padding: 5px !important;
}

.white-header-style .x-filter-window  .x-form-field-wrap .x-form-search-trigger-fn {
    top: 3px;
    right: 35px;
}

#mainheader .search-field table{
    top: 6px !important
}

.search-field input{
    height: 36px !important;
}

.x-epic-style .search-field{
    border: 1px solid var(--color-gray-20);
    border-radius: 20px;
}
.x-epic-style #mainheader .search-field input{
    color: var(--color-gray-40);
    font-size: 14px !important;
    font-weight: 500;
}
.x-epic-style .search-field.x-trigger-wrap-focus{
    border: 1px solid var(--color-blue-40);
    box-shadow: 0px 2px 12px 0px #00000033;
}
.x-epic-style #mainheader .search-field.x-trigger-wrap-focus input{
    color: var(--color-gray-80);
}

.x-searchField-nothingFound{
    margin-top: auto;
    margin-bottom: auto;
}

.x-searchField-nothingFound-title{
    font-size: 24px;
    font-weight: 600;
}

.x-searchField-nothingFound-button{
    font-size: 14px;
    line-height: 1;
    color: var(--color-blue)
}

.x-btn {
    border-radius: 8px;
}

.x-search-menu{
    border-radius: 8px;
}

.x-combo-list, .x-menu-list{
    box-shadow: 0px 2px 12px 0px #00000033;
    border-radius: 6px;
}

.show-deleted-switch {
    background-position: 2px 2px !important;
    background-image: url(images/more-horizontal.svg);
    background-size: 16px;
    opacity: 0.3;
    height: 20px;
}

.breadcrumb-current-task,
#breadcrumbTask div ,
#breadcrumbTask{
    background-image: url(images/menu/chevron.svg);
    background-size: 8px;
    background-repeat: no-repeat;
    background-position: calc(100% - 7px) 8px;
    border-radius: 30px;
    background-color: var(--color-blue-light);
    padding: 0px;
    width: 160px !important;
    margin-top: -1px;
}
#mainheader .x-trigger-wrap-focus .x-form-text {
    border: none !important;
    width: calc(100% - 25px) !important;
    font-size: 12px !important;
}
.breadcrumb-current-task{
    background-image: none;
}
#mainheader .x-trigger-wrap-focus .x-form-trigger{
    background-image: none !important;
}
#breadcrumbTask .x-form-text{
    height: 14px;
    padding-bottom: 4px;
    margin-bottom: -4px;
}
#breadcrumbTask:hover{
    background-color: var(--color-blue-light-hover);
}
#breadcrumbTask div{
    font-size: 12px !important;
    font-weight: 600;
    color: var(--color-blue);
    padding: 5px 0px 3px 10px !important;
    border: none !important;
}
.breadcrumb-current-task div{
    padding: 2px 0px 1px 2px !important;
}
#breadcrumb.x-dont-show-current-description {
    margin-top: 8px;
}
#breadcrumb{
    margin-right: 15px !important;
}
.task-breadcrumb-priority{
    color: var(--color-gray-60);
}

#mainheader .x-link-with-buttons .button-pause-current-activity,
#mainheader .x-link-with-buttons .button-finish-current-activity,
#mainheader .x-link-with-buttons .button-resume-current-activity,
#mainheader .x-link-with-buttons .button-change-task,
#mainheader .x-link-with-buttons .button-change-task:hover,
#mainheader .button-edit-current-description,
#mainheader .button-edit-current-description:hover,
#mainheader .breadcrumb-empty .xx-form-field-editor,
#mainheader .currentDescriptionHover{
    background-image: url(images/pencil.svg);
    background-position: center !important;
    background-repeat: no-repeat;
    background-size: 14px;
    opacity: 0.3;
}

#mainheader .x-link-with-buttons .button-pause-current-activity{
    background-image: url(images/circle-pause.svg);
}

#mainheader .x-link-with-buttons .button-finish-current-activity{
    background-image: url(images/circle-stop.svg);
}
#mainheader .x-link-with-buttons .button-resume-current-activity{
    background-image: url(images/circle-play.svg);
}

#mainheader .x-link-with-buttons .button-pause-current-activity:hover,
#mainheader .x-link-with-buttons .button-finish-current-activity:hover,
#mainheader .x-link-with-buttons .button-resume-current-activity:hover,
#mainheader .x-link-with-buttons .button-change-task:hover,
#mainheader .button-edit-current-description:hover,
#mainheader .currentDescriptionHover {
    opacity: 1;
}

.x-toolbar #breadcrumb div.statusText{
    font-size: 10px !important;
    line-height: 11px !important;
    padding-left: 22px !important;
}
.breadcrumb-current-task div {
    padding: 1px 0px 3px 2px !important;
}
#breadcrumb .statusIcon {
    top: 4px;
}
#finishCurrentActivityButton1,
#resumeCurrentActivityButton,
#pauseCurrentActivityButton,
#editCurrentTask{
    top: 1px !important;
}
#finishCurrentActivityButton1{
    right: 2px !important;
}
#resumeCurrentActivityButton,
#pauseCurrentActivityButton{
    right: 18px !important;
}
#editCurrentTask{
    right: 34px !important;
}

.x-simple-style .x-form-field.x-form-focus,
.x-simple-style textarea.x-form-focus,
.x-simple-style .x-grid3 .x-grid-editor,
.x-simple-style .x-grid3 .x-grid-editor .x-form-field-wrap,
.x-simple-style .x-trigger-wrap-focus .x-form-trigger,
.x-simple-style .x-grid-editor .x-form-field-wrap .x-form-trigger{
    border-radius: 6px;
    background-repeat: no-repeat !important;
}

.x-ext-el-mask{
    background-color: var(--color-blue-light) !important;
}

.x-menu-list,
.x-menu-floating{
    border-radius: 4px;
}
a.x-menu-item{
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-gray-80);
}

.x-menu-list-item:not(.x-menu-list-item-indent):not(.x-fieldset-body):not(.x-menu-sep-li):not(.x-menu-header):hover,
.x-menu-item-active,
.x-user-menu .x-menu-item-active{
    background: var(--color-blue-light);
    border: 1px solid transparent;
}

.x-menu.x-user-menu .x-menu-list{
    padding: 4px !important;
}

.x-item-disabled .x-menu-item-icon{
    background-position: 0px 0px !important;
    opacity: 0.3;
}

.x-menu{
    background-color: white!important;
}

.icon-user {
    background-image: url(images/instruction.svg) !important;
}

.x-tool-minimize {
    background-image: url(images/minimize.svg) !important;
    background-size: auto !important;
    background-position: center !important;
}

.x-tool-maximize {
    background-image: url(images/maximize.svg) !important;
    background-size: 14px !important;
    background-position: center !important;
}
.x-tool-close {
    background-image: url(images/content/close-black.svg) !important;
    background-size: auto !important;
    background-position: center !important;
}
.x-tool-refresh {
    background-image: url(images/reload.svg) !important;
    background-size: 14px !important;
    background-position: center !important;
}
.x-tool-restore {
    background-image: url(images/restore.svg) !important;
    background-size: 12px !important;
    background-position: center !important;
}

#maillistwithhelp .x-layout-collapsed-south .x-tool{
    background-image: url(images/chevrons-up.svg) !important;
    background-size: 12px !important;
    background-position: center !important;
}
#maillistwithhelp .x-mail-list-view .x-tool-toggle{
    background-image: url(images/chevrons-down.svg) !important;
    background-size: 12px !important;
    background-position: center !important;
}

.x-tool-editChart{
    background-image: url(images/content/edit-window.svg) !important;
    background-size: 14px !important;
    background-position: center !important;
}

.x-tool-toggle{
    background-image: url(images/chevron-up.svg) !important;
    background-size: 14px !important;
    background-position: center !important;
}

.x-panel-collapsed .x-tool-toggle,
.x-portlet.x-panel-collapsed .x-tool-toggle{
    background-image: url(images/chevron-down.svg) !important;
}

.x-window .x-tool:hover {
    opacity: 0.8;
}

.x-tool-gear,
.org-settings-icon {
    background-image: url(images/settings.svg) !important;
    background-size: auto !important;
    background-position: center !important;
}
.icon-user-password,
.x-menu-item-icon.icon-user-password,
.x-epic-style .x-btn-text-icon .x-btn-icon-small-left .icon-user-password {
    background-image: url(images/password.svg) !important;
    background-size: 16px !important;
    background-position: 0px 0px !important;
}
.icon-login-as-user,
.x-menu-item-icon.icon-login-as-user,
.x-epic-style .x-btn-text-icon .x-btn-icon-small-left .icon-login-as-user {
    background-image: url(images/user.svg) !important;
    background-size: 16px !important;
    background-position: 0px 0px !important;
}
.x-menu-item-icon.gdpr-icon,
.x-epic-style .x-btn-text-icon .x-btn-icon-small-left .gdpr-icon {
    background-image: url(images/shield-minus.svg) !important;
    background-size: 16px !important;
    background-position: 0px 0px !important;
}
.chart-configuration-panel-header .x-tool-toggle{
    background-image: url(images/menu/chevronup-black.svg) !important;
    background-size: 10px !important;
    background-position: 0px 5px !important;
}
.x-panel-collapsed .chart-configuration-panel-header .x-tool-toggle{
    background-image: url(images/menu/chevron-black.svg) !important;
}

.x-btn-create .x-menu-item-icon{
    background-image: url(images/add-black.svg) !important;
}

.x-calendar-today-icon {
    background-image: url(images/calendar-today.svg) !important;
}

.x-menu-old-icons .x-menu-item-icon.org-company-icon,
.org-company-icon {
    background-image: url(images/company.svg) !important;
    background-size: 16px !important;
}
.org-licences-icon {
    background-image: url(images/payment.svg) !important;
}
.org-integrations-icon {
    background-image: url(images/marketplace.svg) !important;
}
.org-import-icon{
    background-image: url(images/import.svg) !important;
}
.org-privileges-icon{
    background-image: url(images/permissions.svg) !important;
}
.logout-icon{
    background-image: url(images/logout.svg) !important;
}
.x-menu.x-user-menu a.x-menu-item {
    padding-left: 30px;
}
.x-menu-old-icons .x-menu-item-icon{
    top: 6px !important;
    background-repeat: no-repeat;
}
.x-menu-old-icons.x-user-menu .x-menu-item-icon{
    top: 6px !important;
}

.x-menu-item-icon {
    top: 6px;
}
.x-menu-old-icons.x-menu div.x-form-display-field {
    font-size: 12px;
    margin-left: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-transform: uppercase;
    color: var(--color-gray-40) !important;
}

#menuContainer .x-panel-tbar{
    display: none;
}
#mainheader .menuHideButton{
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    left: 257px !important;
    top: 13px !important;
    z-index: 1000;
    background-image: url(images/menu/closemenu.svg);
    background-color: transparent !important;
    border: none;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.7;
}
.x-menu-collapsed #mainheader .menuHideButton{
    left: 52px !important;
    background-image: url(images/menu/openmenu.svg);
}

.menuHideButton:hover{
    opacity: 1;
    cursor: pointer;
}

#floatingFilterMenu img,
.x-tree-node-collapsed .x-tree-node-icon img,
.x-tree-node-expanded .x-tree-node-icon img,
.x-tree-node-leaf .x-tree-node-icon img,
.x-searchField-nothingFound-button,
.x-searchresult-icon,
.universal-create-object-button--floater--button--icon img{
    background-size: auto;
    background-repeat: no-repeat;
}

.x-searchresult-icon, .x-searchresult-mail-date {
    line-height: 16px;
    overflow: hidden;
}

#floatingFilterMenu img,
.x-tree-node-collapsed .x-tree-node-icon img,
.x-tree-node-expanded .x-tree-node-icon img,
.x-tree-node-leaf .x-tree-node-icon img{
    background-size: 18px;
}

.x-search-menu .x-menu-list-item img{
    background-size: auto !important;
}
@media (max-width: 1000px) {
    body:not(.x-isMobile) .x-search-menu .x-menu-list-item img {
        display: initial;
    }
    .x-menu-floating {
        width: 45px;
    }
}

.x-avant .timeline-phonecall,
.mainheader-help-skype-phone{
    background-image: url(images/phone.svg) !important;
}
.mainheader-help-skype-email{
    background-image: url(images/mail.svg) !important;
}
.mainheader-help-skype-manual{
    background-image: url(images/instruction.svg) !important;
}
.x-tool-suggester{
    background-image: url(images/opinion.svg) !important;
}
.mainheader-help-joinme-icon{
    background-image: url(images/remote.svg) !important;
}
.mainheader-help-support-chat{
    background-image: url(images/chat.svg) !important;
}

#floatingFilterMenu img,
.x-dark-menu-style .x-tree-node-collapsed .x-tree-node-icon,
.x-dark-menu-style .x-tree-node-leaf .x-tree-node-icon {
    filter: none;
}

.x-new-style .x-tree-node-collapsed .x-tree-node-icon,
.x-new-style .x-tree-node-expanded .x-tree-node-icon, .x-new-style .x-tree-node-leaf .x-tree-node-icon {
    margin-top: 5px;
}

#floatingFilterMenu img,
.x-dark-menu-style .x-tree-node-collapsed .x-tree-node-icon img,
.x-dark-menu-style .x-tree-node-leaf .x-tree-node-icon img{
    background-size: 22px !important;
    height: 24px;
    width: 24px;
    background-position: center !important;
}

div.x-tree-node-el{
    height: 38px;
    line-height: 38px;
}

.x-simple-style.x-epic-style #menuContainer .x-tree-selected .x-tree-node-icon{
    background-color: transparent !important;
    filter: none !important;
}

.x-simple-style .x-tree-node .x-tree-selected .x-tree-node-icon img{
    background-position: center !important;
}

#menuContainer .x-tree-node:hover .x-menu-add-button{
    border-radius: 20px;
    margin-top: 2px;
}
.x-menu-add-button span {
    margin: 10px;
    margin-right: 10px;
}

#floatingFilterMenu,
#floatingFilterMenu .x-menu-list,
.floating-filter-menu .x-menu-list,
.floating-filter-menu,
.floating-filter-menu .x-menu-list-item,
.floating-filter-menu .x-menu-list-item .x-menu-item-text,
.floating-filter-menu .x-menu-scroller,
.fnmenu-menu-last-object-menu-floating,
.fnmenu-menu-last-object-menu-floating .x-menu-list-item,
.fnmenu-menu-last-object-menu-floating .x-menu-list-item .x-menu-item-text,
.fnmenu-menu-last-object-menu-floating .x-menu-scroller {
    background-color: var(--menu-black) !important;
    border-color: var(--menu-black);
    color: var(--color-blue-light) !important;
    border-radius: 0px;
}
.floating-filter-menu .x-menu-list-item{
    padding: 2px;
}

.floating-filter-menu{
    border-color: transparent !important;
    border-left: 3px solid transparent;
    background-color: white !important;
    box-shadow: none !important;
}

.fnmenu,
#floatingFilterMenu{
    background-color: transparent !important;
}

.x-menu-floating .x-menu-list,
#floatingFilterMenu .x-menu-list{
    padding: 4px;
}

.fnmenu-menu-options-menu .x-menu-item-icon {
    top: 2px;
    background-size: 16px !important;
    background-position: center !important;
}

.fnmenu-menu-options-add {
    background-image: url(images/add-black.svg) !important;
}
.fnmenu-menu-options-add-list {
    background-image: url(images/list-plus.svg) !important;
}
.fnmenu-menu-options-edit {
    background-image: url(images/pencil.svg) !important;
}
.fnmenu-menu-options-rename {
    background-image: url(images/type.svg) !important;
}

.fnmenu-menu-options-menu .x-menu-check-item .x-menu-item-icon{
    background-image: url(images/star-off.svg) !important;
}

.fnmenu-menu-options-menu .x-menu-item-checked .x-menu-item-icon{
    background-image: url(images/star.svg) !important;
}

.fnmenu-menu-options-delete {
    background-image: url(images/delete.svg) !important;
}
.fnmenu-menu-options-copy-columns {
    background-image: url(images/clipboard-copy.svg) !important;
}
.fnmenu-menu-options-save-default {
    background-image: url(images/save.svg) !important;
}
.fnmenu-menu-options-copy-to-other-users {
    background-image: url(images/share-2.svg) !important;
}
.fnmenu-menu-options-hide {
    background-image: url(images/eye.svg) !important;
}
.fnmenu-menu-options-unhide {
    background-image: url(images/eye-off.svg) !important;
}
.fnmenu-menu-options-pin {
    background-image: url(images/pin.svg) !important;
}
.fnmenu-menu-options-unpin {
    background-image: url(images/pin-off.svg) !important;
}

.x-search-menu  a.x-menu-item {
    font-size: 14px;
}

.x-search-menu .x-menu-floating .x-menu-list{
    background-color: var(--color-gray-light) !important;
    border-color: var(--color-gray-light);
}

#menu-settings.x-tool{
    background-image: url(images/settings.svg) !important;
    background-size: auto;
    background-position: 0px 0px;
}
#menu-settings.x-tool:hover{
    filter: brightness(0) invert(1);
}

#menuContainer .x-more-button{
    background-image: none;
    background-color: var(--menu-black) !important;
    margin-left: 10px;
    margin-right: 20px;
    filter: none;
}
.x-dark-menu-style .x-menu-more-button button span{
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-blue-40);
    display: inline-flex;
    font-size: 13px;
    letter-spacing: 1px;
}
.x-dark-menu-style .x-menu-more-button:hover button span{
    filter: brightness(0) invert(1);
}
.x-dark-menu-style .x-menu-more-button button span:after{
    content: "";
    position: relative;
    display: inline-block;
    width: 20px;
    height: 15px;
    background-image: url(images/menu/chevron.svg);
    background-repeat: no-repeat;
    background-position: 6px 6px;
}
.x-dark-menu-style .x-menu-more-button .x-menu-less-button button span:after{
    background-image: url(images/menu/chevronup.svg);
}
.fnmenu-menu .x-more-button.x-btn:hover,
.x-dark-menu-style .x-menu-more-button .x-more-button{
    border: 0px;
    border-top: 1px solid #FFFFFF19;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    border-radius: 0px;
}

.x-menu-less-button button{
    background-color: transparent;
}

#fnmenu-menu .fnmenu-section-header-dragtool{
    filter: none;
}

.add-new-object-button .new-custom-icon,
.x-dark-menu-style .x-menu-add-button span{
    background-image: url(images/menu/add.svg) !important;
    background-position: 0px 0px !important;
}

.x-dark-menu-style .x-menu-pin-button span,
.x-dark-menu-style .x-menu-filter-pin-button span{
    background-image: url(images/menu/pin.svg) !important;
}
.x-dark-menu-style .x-menu-unpin-button span,
.x-dark-menu-style .x-menu-filter-unpin-button span{
    background-image: url(images/menu/unpin.svg) !important;
}

.x-dark-menu-style .x-menu-add-button{
    margin-right: 12px;
}
.floating-filter-menu .x-menu-add-button{
    margin-right: 0px;
}

#fnmenu-menu .x-tool-draggable {
    background-image: url(images/menu/draganddrop.svg);
}
#fnmenu-menu .x-tool-close{
    background-image: url(images/menu/unpin.svg);
}

.x-dark-menu-style .x-menu-pin-button span, .x-dark-menu-style .x-menu-filter-pin-button span,
.x-fnmenu-panel-more .x-tool-close{
    background-image: url(images/menu/pin.svg);
}
.x-dark-menu-style .fnmenu-menu-item-over .fnmenu-menu-options,
.x-dark-menu-style .fnmenu-menu-item-over .fnmenu-menu-options:hover,
.x-dark-menu-style .fnmenu-menu-item-options-expanded .fnmenu-menu-options{
    background-image: url(images/more-blue.svg);
    background-size: 16px;
    background-position: 13px 2px !important;
}
.x-dark-menu-style .fnmenu-menu-item-over .fnmenu-menu-options:hover{
    filter: brightness(0) invert(1);
}
.x-tool-close,
.x-tool-draggable{
    background-size: auto !important;
}

.x-menu-add-button:hover span,
#fnmenu-menu .x-tool-close:hover,
#fnmenu-menu .x-tool-draggable:hover{
    filter: brightness(0) invert(1);
}

.x-menu-item-arrow {
    background-image: url(images/arrow-black.svg);
    margin-right: 5px !important;
}
.floating-filter-menu .x-menu-item-arrow{
    background-image: url(images/menu/right.svg);
}

.fnmenu .x-menu-item-icon,
#floatingFilterMenu .x-menu-item-icon {
    background-image: url(images/menu/list.svg) !important;
    background-size: 20px !important;
    top: 4px;
    left: 2px;
}
#floatingFilterMenu .x-menu-item-icon {
    top: 2px;
}

#floatingFilterMenu .x-tree-selected{
    font-weight: 400;
}
.fnmenu .x-tree-selected .x-menu-item-icon,
#floatingFilterMenu .x-tree-selected .x-menu-item-icon{
    filter: brightness(0) invert(1);
}

#floatingFilterMenu .filter-floating-icon {
    background-image: url(images/menu/filter.svg) !important;
}

.floating-filter-menu .x-tree-selected{
    color: white;
}

.x-filter-title{
    font-size: 12px;
    color: var(--color-blue-40);
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 2px;
    margin-left: 4px;
}

#menuContainer img.menu-icon-dashboard{
    background-image: url(images/menu/dashboard.svg) !important;
}
#menuContainer img.menu-icon-userlist{
    background-image: url(images/menu/user.svg) !important;
}
#menuContainer img.menu-icon-changelogview{
    background-image: url(images/menu/changelog.svg) !important;
}
#menuContainer img.menu-icon-timelineview{
    background-image: url(images/menu/timeline.svg) !important;
}
#menuContainer img.menu-icon-informationboardpanel{
    background-image: url(images/menu/informatioboard.svg) !important;
}
#menuContainer img.menu-icon-reminderlist{
    background-image: url(images/menu/reminder.svg) !important;
}
#menuContainer img.menu-icon-documentlist{
    background-image: url(images/menu/files.svg) !important;
}
#menuContainer img.menu-icon-maillist{
    background-image: url(images/menu/mail.svg) !important;
}
#menuContainer img.menu-icon-smslist{
    background-image: url(images/menu/message-square-more.svg) !important;
}
#menuContainer img.menu-icon-letterlist{
    background-image: url(images/menu/letter.svg) !important;
}
#floatingFilterMenu  img.menu-icon-mailaccountlist{
    background-image: url(images/menu/mailaccount.svg) !important;
}
#floatingFilterMenu img.menu-icon-mailtemplatelist {
    background-image: url(images/menu/file-stack.svg) !important;
}
#floatingFilterMenu  img.menu-icon-linkstatisticslist{
    background-image: url(images/menu/options.svg) !important;
}
#menuContainer img.menu-icon-textfragmentlist{
    background-image: url(images/menu/textfragment.svg) !important;
}
#menuContainer img.menu-icon-survey{
    background-image: url(images/menu/survey.svg) !important;
}
#menuContainer img.menu-icon-phonecalllist{
    background-image: url(images/menu/phone.svg) !important;
}
#menuContainer img.menu-icon-customerlist{
    background-image: url(images/menu/customer.svg) !important;
}
#menuContainer img.menu-icon-customergrouplist{
    background-image: url(images/menu/customergroup.svg) !important;
}
#menuContainer img.menu-icon-contactlist{
    background-image: url(images/menu/contact.svg) !important;
}
#menuContainer img.menu-icon-salesnotelist{
    background-image: url(images/menu/salesnote.svg) !important;
}
#menuContainer img.menu-icon-workflowlist{
    background-image: url(images/menu/emailsequence.svg) !important;
}
#menuContainer img.menu-icon-actionlist{
    background-image: url(images/menu/automatisation.svg) !important;
}
#menuContainer img.menu-icon-transferlist{
    background-image: url(images/menu/payment.svg) !important;
}
#menuContainer img.menu-icon-salesopportunitykanban,
#menuContainer img.menu-icon-salesopportunitylist{
    background-image: url(images/menu/salesopportunity.svg) !important;
}
#menuContainer img.menu-icon-offerlist{
    background-image: url(images/menu/offer.svg) !important;
}
#menuContainer img.menu-icon-orderlist{
    background-image: url(images/menu/order.svg) !important;
}
#menuContainer img.menu-icon-transactionlist{
    background-image: url(images/menu/invoice.svg) !important;
}
#floatingFilterMenu img.menu-icon-transactionentrylist{
    background-image: url(images/menu/transactionentry.svg) !important;
}
#floatingFilterMenu img.menu-icon-ocrinvoicelist{
    background-image: url(images/menu/ocr.svg) !important;
}
#menuContainer img.menu-icon-productlist{
    background-image: url(images/menu/product.svg) !important;
}
#menuContainer img.menu-icon-projectlist{
    background-image: url(images/menu/project.svg) !important;
}
#menuContainer img.menu-icon-localizationlist{
    background-image: url(images/menu/localization.svg) !important;
}
#menuContainer img.menu-icon-parcellist {
    background-image: url(images/menu/package-open.svg) !important;
}
#menuContainer img.menu-icon-storagedoclist{
    background-image: url(images/menu/storagedoc.svg) !important;
}
#floatingFilterMenu img.menu-icon-warehousestatehistorylist{
    background-image: url(images/menu/warehousestatehistory.svg) !important;
}
#menuContainer img.menu-icon-cashdoclist{
    background-image: url(images/menu/wallet.svg) !important;
}
#menuContainer img.menu-icon-agreementlist{
    background-image: url(images/menu/agreement.svg) !important;
}
#menuContainer img.menu-icon-tasklist{
    background-image: url(images/menu/task.svg) !important;
}
#floatingFilterMenu img.menu-icon-tasktemplatelist{
    background-image: url(images/menu/tasktemplate.svg) !important;
}
#menuContainer img.menu-icon-timeentrylist{
    background-image: url(images/menu/timeentry.svg) !important;
}
#menuContainer img.menu-icon-tasks-tree{
    background-image: url(images/menu/tasktree.svg) !important;
}
#menuContainer img.menu-icon-gantt{
    background-image: url(images/menu/gantt.svg) !important;
}
#menuContainer img.menu-icon-calendar{
    background-image: url(images/menu/calendar.svg) !important;
}
#menuContainer img.menu-icon-regulation{
    background-image: url(images/menu/regulation.svg) !important;
}
#menuContainer img.menu-icon-regulations-acceptance{
    background-image: url(images/menu/regulations-acceptance.svg) !important;
}
#menuContainer img.menu-icon-chatconversationlist{
    background-image: url(images/menu/chatconversation.svg) !important;
}
#floatingFilterMenu img.menu-icon-schedulinglist{
    background-image: url(images/menu/scheduling.svg) !important;
}
#menuContainer img.menu-icon-resourcelist{
    background-image: url(images/menu/resource.svg) !important;
}
#menuContainer img.menu-icon-resourceclasslist{
    background-image: url(images/menu/resourceclass.svg) !important;
}
#menuContainer img.menu-icon-positionlist{
    background-image: url(images/menu/position.svg) !important;
}
#menuContainer img.menu-icon-employeelist{
    background-image: url(images/menu/employee.svg) !important;
}
#menuContainer img.menu-icon-contractlist{
    background-image: url(images/menu/contract.svg) !important;
}
#menuContainer img.menu-icon-paymentlistlist{
    background-image: url(images/menu/payment.svg) !important;
}
#menuContainer img.menu-icon-inabilitydaylist{
    background-image: url(images/menu/inabilityday.svg) !important;
}
#menuContainer img.menu-icon-leavelist{
    background-image: url(images/menu/leave.svg) !important;
}
#menuContainer img.menu-icon-vatregistryreport,
#menuContainer img.menu-icon-ledgerreport,
#menuContainer img.menu-icon-dues,
#menuContainer img.menu-icon-physicalinventorylist,
#menuContainer img.menu-icon-documents-ac,
#menuContainer img.menu-icon-jpkvatlist,
img.menu-icon-jpkvatlist,
img.menu-icon-jpkmaglist,
img.menu-icon-jpkfalist,
img.menu-icon-jpkpkpirlist,
#menuContainer img.menu-icon-documents{
    background-image: url(images/menu/accounting.svg) !important;
}
#menuContainer img.menu-icon-accountingoperationlist{
    background-image: url(images/menu/accountingoperation.svg) !important;
}

.fieldLabelInfo{
    background-image: url(images/info.svg) !important;
    opacity: 0.5;
    height: 18px;
}
.fieldLabelInfo:hover{
    opacity: 1;
}

.fnmenu .x-panel-header .x-panel-header-text{
    font-weight: 600;
    font-size: 14px !important;
    text-transform: uppercase;
    color: var(--color-blue-40);
    margin-top: 5px;
    margin-bottom: 3px;
    letter-spacing: 1px;
}

#dashboard .x-panel-header .x-panel-header-text{
    color: var(--color-gray-80);
    font-size: 13px !important;
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: 400;
}
.x-chart-panel-summary-value {
    font-size: 30px;
}
.x-chart-panel-summary div.x-chart-panel-summary-text{
    font-size: 13px;
}

.x-simple-style.x-split-details.x-epic-style .x-portlet .x-grid3-header,
.x-simple-style.x-split-details.x-epic-style .x-portlet .x-grid3-hd-inner{
    background-color: white !important;
    font-weight: 400;
}

.x-simple-style.x-avant .x-portlet{
    border-radius: 8px !important;
}
.x-simple-style.x-avant .x-portlet > .x-panel-header {
    border-radius: 8px 8px 0px 0px !important;
    padding-left: 10px;
    padding-top: 12px;
    padding-bottom: 4px;
}
.x-simple-style.x-avant .x-portlet.x-panel-collapsed > .x-panel-header {
    border-radius: 8px !important;
}

.x-simpleLook.x-split-details .x-portlet {
    margin: 0px 0px 10px 10px;
}

#dashboard .x-panel-dd-spacer-half, #dashboard .x-summary-portlet {
    width: calc(50% - 10px) !important;
}

#floatingFilterMenu, .floating-filter-menu a.x-menu-item,
.x-dark-menu-style .fnmenu-menu-body .x-tree-node span.link{
    font-weight: 400;
    font-size: 14px !important;
}

.universal-create-object-button--floater{
    padding: 2px !important;
    border-radius: 4px;
    box-shadow: 0px 2px 12px 0px #00000033;
}


a, .linkNew, .floatingLinkNew {
    color: var(--color-blue-darken-20);
}

.x-epic-style #themeWindow .x-form-check-group:not(.x-theme-style-group) .x-form-item {
    opacity: 0.1;
    pointer-events: none;
}

.x-tip{
    border-radius: 8px;
}
.x-tip, .x-showOnHover {
    background-color: var(--color-gray-light) !important;
    border: 1px solid var(--color-gray-light);
}
.x-tip-ml{
    background-color: var(--color-gray-light) !important;
}

#login-form-index .fnmenu-menu-body .x-tree-node a span,
#login-form-index .link,
#login-form-index .x-form-label-top .x-form-item label.x-form-item-label,
#login-form-index .x-form-label-top .x-form-item label.x-form-cb-label{
    font-weight: 300;
}

#mainHeaderFill a {
    background-color: var(--color-yellow);
    border-radius: 20px;
    color: var(--color-gray-80) !important;
    font-size: 12px;
    line-height: 12px !important;
    font-weight: 600;
    padding: 2px 8px 2px 8px;
    margin-top: 5px;
}
#mainHeaderFill a:hover {
    background-color: var(--color-yellow);
    filter: brightness(0.95);
}

.v-big-option-group__option{
    margin-top: 10px;
    background-color: var(--color-white);
    border-radius: 8px;
    border-width: 1px;
}

.v-big-option-group__option.v-big-option-group__option--selected{
    background-color: var(--color-blue-light);
}

.x-date-menu,
.dashboard-period-filter-wrap,
.date-range-menu{
    border-radius: 8px;
}

.x-btn-datepickerok,
.x-date-mp-ok {
    background-color: var(--color-blue) !important;
    border: 1px solid var(--color-blue) !important;
    color: var(--color-white) !important;
    border-radius: 20px;
}
.x-btn-datepickerok:hover,
.x-date-mp-ok:hover {
    background-color: var(--color-blue-darken-20) !important;
    border: 1px solid var(--color-blue-darken-20) !important;
}
body .x-btn-colorcancel,
body .x-btn-datepickertoday {
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-blue-40);
    border-radius: 20px;
    padding-left: 8px;
    padding-right: 8px;
}
body .x-btn-colorcancel:hover,
body .x-btn-datepickertoday:hover {
    background-color: var(--color-blue-light) !important;
    border: 1px solid var(--color-blue-60);
}
.x-date-mp-ybtn a,
.x-date-left a,
.x-date-mp-ybtn a.x-date-mp-next,
.x-date-right a {
    background-position: center;
    border: 1px solid var(--color-gray-20);
    border-radius: 20px;
    padding: 3px;
    opacity: 0.6;
}
.x-date-mp-ybtn a, .x-date-left a {
    background-image: url(images/content/back.svg) !important;
}
.x-date-mp-ybtn a.x-date-mp-next, .x-date-right a {
    background-image: url(images/content/forward.svg) !important;
}
.holiday-body {
    background-color: var(--color-holiday-day);
}
td.x-date-mp-sel a,
.x-date-inner .x-date-selected a{
    background-color: var(--color-blue-40) !important;
    border-color: var(--color-blue-40) !important;
}
td.x-date-mp-month a,
td.x-date-mp-year a{
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid transparent;
    border-radius: 20px;
}
.timeField .x-form-field-wrap .x-form-trigger{
    background-position: 0px -5px !important;
    border: none !important;
    border-radius: 8px;
}
.timeField .x-form-field-wrap .x-form-spinner-splitter {
    top: 14px !important;
}
.x-date-menu .x-form-field-trigger-wrap{
    border:1px solid var(--color-gray-10);
    border-radius: 8px;
}
.x-date-menu .x-form-field-trigger-wrap input{
    height: 28px;
}
.x-date-menu .x-form-field-trigger-wrap.x-trigger-wrap-focus{
    border-color: var(--color-blue-40);
}
.x-date-menu .x-form-field-trigger-wrap input{
    border: none !important;
    padding-left: 6px;
    border-radius: 8px;
    font-size: 14px !important;
}
.dashboard-period-filter-calendar .x-btn {
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    margin-left: auto;
}
.dashboard-period-filter-wrap .dateFromField,
.dashboard-period-filter-wrap .dateToField{
    width: 75px !important;
    font-size: 14px !important;
    color: var(--color-gray-60) !important;
}
.x-date-inner .x-date-today a {
    border-color: var(--color-blue-60);
}
.x-date-middle .x-btn .x-btn-text{
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gray-80);
}
.x-date-picker .x-btn-mc em.x-btn-arrow {
    padding-right: 20px;
    background-image: url(images/content/expand.svg) !important;
    background-size: 14px;
    background-position: right 3px;
}
.x-date-mp-ybtn a.x-date-mp-next,
.x-date-mp-ybtn a.x-date-mp-prev{
    background-position: center !important;
}

.x-date-mp-btns button {
    border-radius: 20px;
    background-color: var(--color-white);
    border-color: var(--color-blue-40);
    color: var(--color-gray-80);
}

.dashboard-period-filter-wrap .x-form-button-date-clear{
    mask-image: none !important;
    background-image: url(images/content/close.svg) !important;
    background-position: center !important;
    height: 27px;
    background-color: white !important;
    border: 1px solid white !important;
    opacity: 0.5;
}