/*
    Main color: #222222
    Second color: #2F2F2F
    Border color: #bbbbbb
*/


/* Content */
.f-widget-content {
    border-color: #ddd;
    background-color: #fff;
    color: #444;
}

.f-widget-content a {
    color: #444;
}

/* Header */
.f-widget-header {
    border-color: #ddd;
    background-color: #fff;
    color: #444;
}

.f-widget-header a {
    color: #444;
}

/* States */
.f-state-default,
.f-widget-content .f-state-default,
.f-widget-header .f-state-default {
    border-color: #ddd;
    background-color: #ffffff;
    color: #444;
}



.f-state-default a,
.f-state-default a:link,
.f-state-default a:visited {
    color: #444;
}

.f-state-hover,
.f-widget-content .f-state-hover,
.f-widget-header .f-state-hover,
.f-state-focus,
.f-widget-content .f-state-focus,
.f-widget-header .f-state-focus {
    border-color: #bbbbbb;
    background-color: #fafafa;
    color: #222222;
}

.f-state-hover a,
.f-state-hover a:hover,
.f-state-hover a:link,
.f-state-hover a:visited,
.f-state-focus a,
.f-state-focus a:hover,
.f-state-focus a:link,
.f-state-focus a:visited {
    color: #222222;
}

.f-state-active,
.f-widget-content .f-state-active,
.f-widget-header .f-state-active {
    border-color: #bbb;
    background-color: #eee;
    color: #222222;
}

.f-state-active a,
.f-state-active a:link,
.f-state-active a:visited {
    color: #222222;
}


.f-state-highlight,
.f-widget-content .f-state-highlight,
.f-widget-header .f-state-highlight {
    border-color: #BF8A8A;
    background-color: #fff;
    color: #000;
}

.f-state-highlight a,
.f-widget-content .f-state-highlight a,
.f-widget-header .f-state-highlight a {
}

.f-state-error,
.f-widget-content .f-state-error,
.f-widget-header .f-state-error {
    border-color: #ffa8a8;
    background-color: #fff8f8;
    color: #000;
}

.f-state-error a,
.f-widget-content .f-state-error a,
.f-widget-header .f-state-error a {
}

.f-state-error-text,
.f-widget-content .f-state-error-text,
.f-widget-header .f-state-error-text {
    color: #000;
}

.f-state-disabled,
.f-widget-content .f-state-disabled,
.f-widget-header .f-state-disabled {
    opacity: .5;
    filter: alpha(opacity=50);
    background-image: none;
}

.f-state-disabled .f-icon {
    filter: alpha(opacity=50);
}

/* Icon font */
.f-icon,
.f-widget-content .f-icon {
    color: #444;
}

.f-widget-header .f-icon {
    color: #444;
}

.f-state-default .f-icon {
    color: #444;
}

.f-state-hover .f-icon,
.f-state-focus .f-icon {
    color: #222222;
}

.f-state-active .f-icon {
    color: #222222;
}

.f-state-highlight .f-icon {
    color: #888;
}

.f-state-error .f-icon,
.f-state-error-text .f-icon {
    color: #ff6c6c;
}


/* Round corner */
.f-corner-all,
.f-corner-top,
.f-corner-left,
.f-corner-tl {
    border-top-left-radius: 4px;
}

.f-corner-all,
.f-corner-top,
.f-corner-right,
.f-corner-tr {
    border-top-right-radius: 4px;
}

.f-corner-all,
.f-corner-bottom,
.f-corner-left,
.f-corner-bl {
    border-bottom-left-radius: 4px;
}

.f-corner-all,
.f-corner-bottom,
.f-corner-right,
.f-corner-br {
    border-bottom-right-radius: 4px;
}


/* Special - f-tabstrip-inkbar */
.f-tabstrip-header .f-tabstrip-header-inkbar {
    background-color: #222222;
}

.f-tabstrip-inkbar > .f-tabstrip-header .f-tab-header.f-state-active {
    background-color: #fafafa;
}



/* Special - f-widget-header */
/*
.f-widget-header {
    background-color: #fafafa;
}

    .f-widget-header .f-state-hover,
    .f-widget-header .f-state-focus {
        background-color: #eee;
    }
    */

/* CheckBox - RadioButton */
.f-checkbox.f-checked,
.f-checkbox.f-checkbox-indeterminate {
    background-color: #222222;
    border-color: #222222;
}
.f-radiobutton:after {
    background-color: #222222;
}
.f-radiobutton.f-checked {
    border-color: #222222;
}

.f-state-focus.f-checkbox,
.f-state-focus.f-radiobutton {
    border-color: #0D0D0D;
}
.f-state-focus.f-checkbox.f-checked {
    border-color: #0D0D0D;
    background-color: #0D0D0D;
}
.f-state-focus.f-radiobutton.f-checked {
    border-color: #0D0D0D;
}
.f-state-focus.f-radiobutton.f-checked:after {
    background-color: #0D0D0D;
}


.f-menu-item-icon.f-menu-radiobutton.f-checked {
    color: #222222;
}



.f-field-checkbox-switch.f-checked {
    background-color: #222222;
    border-color: #222222;
}
.f-state-focus.f-field-checkbox-switch.f-checked {
    background-color: #0D0D0D;
    border-color: #0D0D0D;
}
.f-state-focus.f-field-checkbox-switch {
    background-color: #bbb;
    border-color: #bbb;
}




/* Special - Remove border-color for hover state */
.f-tab-header.f-state-active,
.f-tab-header.f-state-hover,
.f-grid-colheader-trigger.f-state-hover,
.f-grid-colheader.f-state-hover {
    border-color: #ddd;
}

/* Special - TabStrip */
.f-tabstrip-plain > .f-panel-bodyct > .f-panel-body,
.f-tabstrip-plain > .f-panel-header,
.f-tabstrip-plain > .f-panel-header .f-panel-tools,
.f-tabstrip-bordercolor .f-tab-header {
    border-color: #ddd;
}

.f-tabstrip-plain > .f-panel-bodyct > .f-toolbar {
    border-left-color: #ddd;
    border-right-color: #ddd;
}

.f-tabstrip-plain.f-tabstrip-header-top > .f-panel-header .f-tabstrip-scroller,
.f-tabstrip-plain.f-tabstrip-header-right > .f-panel-header .f-tabstrip-scroller {
    border-bottom-color: #ddd;
}

.f-tabstrip-plain.f-tabstrip-header-bottom > .f-panel-header .f-tabstrip-scroller,
.f-tabstrip-plain.f-tabstrip-header-left > .f-panel-header .f-tabstrip-scroller {
    border-top-color: #ddd;
}


.f-tab-header.f-state-active {
    background-color: #fff;
}


/* Special - Grid selected cell */
.f-grid-selectedcell-border {
    border-color: #ddd !important;
}


/* Special - Grid selected row */
.f-grid-row.f-state-active {
}

.f-grid-row.f-state-active a,
.f-grid-row.f-state-active a:link,
.f-grid-row.f-state-active a:visited {
}

.f-grid-row.f-state-active .f-icon {
}


/* Special - Tree header style */
.f-tree-headerstyle .f-panel-body {
    background-color: #fff;
}

.f-tree-headerstyle .f-tree-node.f-tree-node-toplevel .f-tree-cell-inner,
.f-tree-minimode-item-inner {
    border-color: #ddd;
}

.f-toolbar-buttonplain,
.f-toolbar-buttonplain .f-buttongroup .f-btn:after {
    border-color: #ddd !important;
}

/* Special - Button pressed state */
.f-btn.f-state-active {
    background-color: #222222;
    color: #fff;
}

/* Special - Background color for bgpanel */
.bgpanel,
.mainpanel .f-widget-header.f-region-split,
.mainpanel .f-widget-header.f-region-cover {
    background-color: #333;
}

.bgpanel .f-widget-header,
.bgpanel .f-widget-content,
.bgpanel .f-tree-headerstyle .f-panel-body,
.bgpanel .f-tree-node.f-widget-header .f-tree-cell-inner,
.bgpanel .f-tree-minimode-item .f-tree-minimode-item-inner {
    background-color: transparent;
    border-color: transparent;
    background-image: none;
}

.bgpanel .f-state-hover,
.bgpanel .f-state-focus,
.bgpanel .f-state-active {
    background-color: rgba(255, 255, 255, 0.20);
}

.f-ie8 .bgpanel .f-state-hover,
.f-ie8 .bgpanel .f-state-focus,
.f-ie8 .bgpanel .f-state-active,
.f-ie8 .bgpanel tr.f-state-hover > td,
.f-ie8 .bgpanel tr.f-state-focus > td,
.f-ie8 .bgpanel tr.f-state-active > td {
    background-color: transparent;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
}

.bgpanel .f-widget-header,
.bgpanel .f-widget-content,
.bgpanel a, .bgpanel span,
.bgpanel .f-icon {
    color: rgba(255, 255, 255, 0.7);
}

.f-ie8 .bgpanel .f-widget-header,
.f-ie8 .bgpanel .f-widget-content,
.f-ie8 .bgpanel a, .f-ie8 .bgpanel span,
.f-ie8 .bgpanel .f-icon {
    color: #fff;
}


.bgpanel a:hover,
.bgpanel .f-state-hover,
.bgpanel .f-state-hover a,
.bgpanel .f-state-hover .f-icon,
.bgpanel .f-state-focus,
.bgpanel .f-state-focus a,
.bgpanel .f-state-focus .f-icon,
.bgpanel .f-state-active,
.bgpanel .f-state-active a,
.bgpanel .f-state-active .f-icon {
    color: #fff;
}

.bgpanel.f-mainheader,
.bgpanel .f-mainheader {
    background-color: #222;
}



/* Special - TabStrip style for center region */
.centerregion,
.leftregion {
    border-width: 0;
}

.mainpanel .sidebarregion .leftregion,
.mainpanel .bodyregion .centerregion {
    border-width: 0;
    border-top-width: 1px;
}

.mainpanel .bodyregion .centerregion,
.mainpanel .bodyregion .centerregion .f-tabstrip-header {
    border-color: #efefef;
}


/* Special - MessageBoxIcon */
.f-messagebox-icon.f-messageicon-information,
.f-messagebox-icon.f-messageicon-question {
    color: #222222;
}



/* Custom scrollbar */
/*
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-button {
    display: none;
}

::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
    background-color: #efefef;
}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .2);
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, .25);
    }

    ::-webkit-scrollbar-thumb:active {
        background-color: rgba(0, 0, 0, .3);
    }
*/


/* Special - progressbar */
.f-progressbar .f-progressbar-value {
    background-color: #222222;
}


.f-grid-row.f-grid-row-newadded > .f-grid-cell:first-child > .f-grid-cell-inner:after {
    color: #222222;
}


.f-grid-show-selected-cell .f-grid-cell-selected {
    background-color: #e5e5e5;
    color: #222222;
}

.f-grid-show-selected-cell .f-grid-cell-selected .f-icon {
    color: #222222;
}



.f-calendar-day.f-state-hover,
.f-calendar-day.f-state-active,
.f-calendar-float td a.f-state-hover,
.f-calendar-float td a.f-state-active {
    border-color: transparent;
    background-color: #f6f6f6;
}
.f-calendar-float td a.f-state-active {
    background-color: #eee;
}
.f-calendar-day.f-state-active {
    background-color: #222222;
    color: #fff;
}
.f-calendar-day.f-state-highlight {
    border-color: #bbb;
}

/* Special -focus/active/hover */
/* pagingtoolbar */
.f-pagingtoolbar .f-field-dropdownbox-wrap .f-state-focus,.f-pagingtoolbar .f-field-dropdownbox-wrap .f-widget-content .f-state-focus{
    color: #007465;
}

.f-pagingtoolbar .f-field-dropdownbox-wrap .f-state-focus .f-icon,.f-pagingtoolbar .f-field-dropdownbox-wrap .f-widget-content .f-state-focus .f-icon{
    color: #007465;
}

.f-widget-content.f-field-dropdownbox-pop .f-state-active .f-field-body-checkboxlabel{
    color: #007465;
}
.f-widget-content.f-field-dropdownbox-pop .f-state-hover .f-field-body-checkboxlabel{
    color: #007465;
}

/* Special - ApplicationItem */
.f-btn.f-state-default.box-hover-modal{
    color: var(--contentColor);
    background: var(--borderColor);
}

.f-btn.f-state-active.box-hover-modal{
    color: var(--contentColor);
    background: var(--pureColor,var(--strongColor));
}

/* Special - FIM */

.communication-menu-wrap{
    background-color: #28292c !important;
}
.communication-menu-item .menu-item-icon{
    color: #666666 !important;
}

.communication-menu-item.hover .menu-item-icon{
    color: #8E8E8E !important;
}

.communication-menu-item.active .menu-item-icon{
    filter:unset !important;
    color: #07C160 !important;
}


:root{
    --strongColor:#222222;
    --focusColor:#fafafa;
    --activeColor:#eee;
    --defaultColor:#ffffff;
    --hoverColor:#bbbbbb;
    --lighterColor:#f6f6f6;
    --containerColor:#f9f9f9;
    --contentColor:#ffffff;
    --darkerColor:#333;
    --pureColor:#222222;
    --borderColor:#bbbbbb;
}