/**********************************************************
Tema minimal ExtJS kitto - Andrea Crico

TODO al 03/05/2023:
+ mod icone alert, info e warning
+ mod icona piccola error sulla status bar (es. login failed)
+ rm sprites <<, >>, ..., sostituirli con css pseudo-elements
+ rm frecce tabs, sostituirle con css pseudo-elements
+ rm icone in form (calendario, tendina, lente, ...) con css pseudo-elements
+ rm immagini calendario in form e correggerne i colori
+ incorporare i tiles qui anziché da TilePanel.css
+ modificare le icone delle operazioni base di kitto (magari modulandolo come opzione del tema nella config)
- creare altri set di colori oltre a purple e blue

**********************************************************/
/* maschera di loading */
.ext-el-mask-msg {
  border-color: var(--panelColor);
  background-image: none;
  background-color: var(--panelBodyColor);
}
.x-mask-loading div {
  background-color: var(--gridColor);
  color: var(--gridTextColor);
}
.ext-el-mask-msg div {
  border-color: var(--panelColor);
}

/* campi form */
.x-form-text, textarea.x-form-field {
  border: none;
  border-radius: 5px;
}

/* elenchi tendine */
.x-combo-list {
  border: none;
  background-color: var(--panelBodyColor);
}
.x-combo-list-item {
  border-color: var(--gridColor);
  background-color: var(--gridColor);
}
.x-combo-list .x-combo-selected {
  border-color: var(--gridSelectedBorderColor) !important;
  background-color: var(--gridSelectedColor);
}
.x-resizable-pinned .x-combo-list-inner {
  border: none;
}
.x-resizable-over .x-resizable-handle-southeast, .x-resizable-pinned .x-resizable-handle-southeast {
  background-image: none;
  background-color: inherit;
}
.x-resizable-over .x-resizable-handle-southeast, .x-resizable-pinned .x-resizable-handle-southeast:before {
  content: "";
  width: 4px;
  height: 2px;
  display: inline-block;
  background-color: var(--panelHeaderColor);
}
.x-resizable-over .x-resizable-handle-southeast, .x-resizable-pinned .x-resizable-handle-southeast:after {
  content: "";
  width: 2px;
  height: 6px;
  display: inline-block;
  background-color: var(--panelHeaderColor);
}

/* calendario pop-up in form */
.x-menu-floating {
  border: none;
  border-radius: 5px;
}
.x-date-menu .x-menu-list {
  border-radius: 5px;
}
.x-date-middle, .x-date-left, .x-date-right {
  background-image: none;
  background-color: var(--windowHeaderColor);
}
.x-date-middle .x-btn {
  border-radius: 5px;
}
.x-date-middle .x-btn .x-btn-text {
  color: var(--windowHeaderTextColor);
}
.x-date-middle .x-btn-over .x-btn-text {
  color: var(--toolsHoverTextColor);
}
.x-date-right a, .x-date-left a {
  background-image: none;
}
.x-date-right a:before, .x-date-left a:before {
  content: '';
  position: absolute;
  height: 0px;
  width: 0px;
  top: 7px;
  right: 2px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent;
  border-left-color: var(--windowHeaderTextColor);
}
.x-date-left a:before {
  left: 2px;
  border-left-color: transparent;
  border-right-color: var(--windowHeaderTextColor);
}
.x-date-middle .x-btn-mc em.x-btn-arrow {
  background-image: none;
}
.x-date-middle .x-btn-mc em.x-btn-arrow:after {
  content: '';
  position: absolute;
  height: 0px;
  width: 0px;
  margin-left: 3px;
  box-sizing: border-box;
  top: 12px;
  border-width: 4px;
  border-style: solid;
  border-color: transparent;
  border-top-color: var(--windowHeaderTextColor);
}
.x-date-middle .x-btn-over .x-btn-mc em.x-btn-arrow:after {
  border-top-color: var(--buttonsHoverTextColor);
}
.x-date-inner th {
  background-image: none;
  background-color: var(--gridHeaderColor);
  border-bottom-color: var(--gridHeaderBorderColor);
  color: var(--gridHeaderTextColor);
}
.x-date-inner .x-date-selected a {
  background-image: none;
  background-color: var(--gridSelectedColor);
  border-color: var(--gridSelectedBorderColor);
}
.x-date-inner .x-date-today a {
  border-color: var(--windowHeaderColor);
}
.x-date-inner a {
  color: var(--gridTextColor);
}
.x-date-inner a:hover,.x-date-inner .x-date-disabled a:hover {
  color: var(--gridTextColor);
  background-color: var(--gridHoverColor);
}
.x-date-bottom {
  background-image: none;
  border-top-color: var(--windowHeaderColor);
  background-color: var(--panelBodyColor);
}
.x-date-mp-ybtn a {
  background-image: none;
  border-radius: 4px;
}
.x-date-mp-ybtn a:hover {
  background-color: var(--gridSelectedColor);
}
.x-date-mp-ybtn a.x-date-mp-next:before,
.x-date-mp-ybtn a.x-date-mp-prev:before {
  content: '';
  position: absolute;
  height: 0px;
  width: 0px;
  top: 7px;
  margin-left: -2px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent;
  border-left-color: var(--windowHeaderColor);
}
.x-date-mp-ybtn a.x-date-mp-prev:before {
  border-left-color: transparent;
  border-right-color: var(--windowHeaderColor);
  margin-left: -9px;
}
td.x-date-mp-month a, td.x-date-mp-year a {
  color: var(--gridTextColor);
}
td.x-date-mp-month a:hover, td.x-date-mp-year a:hover {
  background-color: var(--gridHoverColor);
  color: var(--gridTextColor);
}
td.x-date-mp-sel a {
  background-image: none;
  background-color: var(--gridSelectedColor);
  border-color: var(--gridSelectedBorderColor);
}
td.x-date-mp-sep {
  border-right-color: var(--gridBorderColor);
}
.x-date-mp-btns {
  background-image: none;
  background-color: var(--panelBodyColor);
}
.x-date-mp-btns td {
  border-top-color: var(--windowHeaderColor);
}
.x-date-mp-btns button {
  background-color: var(--buttonsColor);
  color: var(--buttonsTextColor);
  border-color: var(--buttonsBorderColor);
}
.x-date-mp-btns button:hover {
  background-color: var(--buttonsHoverColor);
  color: var(--buttonsHoverTextColor);
  border-color: var(--buttonsHoverBorderColor);
  border-radius: 3px;
}

/*** generici di tutti i panel ***/
.x-panel-header {
  background-image: none;
  background-color: var(--panelHeaderColor);
  border-color: var(--panelBorderColor);
}
.x-panel-body-noborder {
  background-color: inherit;
}
.x-panel-body {
  border-color: var(--panelBodyColor);
  background-color: var(--panelBodyColor);
}
.x-panel-noborder .x-panel-header-noborder {
  border: none;
}
.x-panel-body-noheader,.x-panel-mc .x-panel-body {
  border-top: none;
}
.x-panel-tl, .x-panel-tr, .x-panel-bl, .x-panel-br,.x-panel-ml, .x-panel-mr, .x-panel-bc {
  background-image: none;
}
.x-panel-tc {
  background-image: none;
}
.x-panel-ml, .x-panel-mc, .x-panel-mr {
  background-color: inherit;
}
.x-panel-tl {
  border-top: solid 1px var(--panelBodyColor);
  border-bottom: solid 1px var(--panelBodyColor);
  background-color: var(--panelHeaderColor);
}
.x-panel-header-text {
  color: var(--panelHeaderTextColor);
}

/*** layout divisori e collassati ***/
.x-layout-split {
  background-color: var(--panelHeaderColor);
}
.x-layout-collapsed {
  border-color: var(--panelBorderColor);
  background-color: var(--panelHeaderColor);
}
.x-layout-collapsed-north, .x-layout-collapsed-south {
  border-left: none;
  border-right: none;
}
.x-layout-collapsed-east, .x-layout-collapsed-west {
  border-top: none;
  border-bottom: none;
}

/*** barra dei bottoni/tools e statusbar ***/
.x-toolbar {
  background-image: none;
  background-color: var(--tabHeaderColor);
  border: none;
}
.x-toolbar.x-statusbar {
  background-color: var(--statusbarColor);
  color: var(--statusbarTextColor);
}
.x-panel-noborder .x-panel-tbar-noborder .x-toolbar {
  border: none;
}
.x-panel-noborder .x-panel-bbar-noborder .x-toolbar {
  border: none;
}
.x-statusbar .x-status-error.xtb-text {
  color: var(--statusbarTextErrorColor);
}

/*** tab panel ***/
.x-tab-panel-body {
  background-color: inherit;
}
.x-tab-panel-noborder.x-tab-panel-header-noborder {
  border-bottom: none;
}
.x-tab-panel-header, .x-tab-panel-footer {
  background-color: var(--tabHeaderColor);
  border: none;
}
.x-tab-panel-body .x-panel-ml {
  background-color: var(--panelColor);
}
.x-tab-panel-body .x-panel-bwrap {
  background-color: inherit;
}
.x-tab-panel .x-panel.x-panel-noborder.x-form-label-right.x-border-panel {
  background-color: var(--panelColor);
}
.x-tab-panel .x-panel.x-panel-noborder.x-form-label-left.x-border-panel {
  background-color: var(--panelColor);
}
.x-tab-panel .x-panel.x-panel-noborder.x-form-label-top.x-border-panel {
  background-color: var(--panelColor);
}
.x-tab-panel .x-panel.x-panel-noborder.x-form-label-bottom.x-border-panel {
  background-color: var(--panelColor);
}

/*** tabs ***/
ul.x-tab-strip li {
  background-color: var(--tabBaseColor);
  border-radius: 5px;
  transition-duration: 0.2s;
}
ul.x-tab-strip li.x-tab-strip-over {
  background-color: var(--tabHoverColor);
}
ul.x-tab-strip li.x-tab-strip-active {
  background-color: var(--tabActiveColor);
}
ul.x-tab-strip-top {
  border-bottom: none;
  background-image: none;
  background-color: inherit;
}
.x-tab-strip span.x-tab-strip-text {
	font:normal 11px tahoma,arial,helvetica;
	color: var(--tabBaseTextColor);
}
.x-tab-strip-over span.x-tab-strip-text {
	color: var(--tabHoverTextColor);
}
.x-tab-strip-active span.x-tab-strip-text {
	color: var(--tabActiveTextColor);
	font-weight:bold;
}
.x-tab-strip-top .x-tab-right,.x-tab-strip-top .x-tab-left,.x-tab-strip-top .x-tab-strip-inner {
    background-image: none
}
.x-tab-strip-bottom .x-tab-right {
    background-image: none
}
.x-tab-strip-bottom .x-tab-left {
    background-image: none
}
.x-tab-strip-bottom .x-tab-strip-over .x-tab-right {
    background-image: none
}
.x-tab-strip-bottom .x-tab-strip-over .x-tab-left {
    background-image: none
}
.x-tab-strip-bottom .x-tab-strip-active .x-tab-right {
    background-image: none
}
.x-tab-strip-bottom .x-tab-strip-active .x-tab-left {
    background-image: none
}
.x-tab-strip .x-tab-strip-closable {
    background-image: none
}
.x-tab-strip .x-tab-strip-closable {
    background-image: none
}
.x-tab-strip .x-tab-strip-closable a.x-tab-strip-close {
  background-image: none;
  transition-duration: 0.2s;
}
.x-tab-strip .x-tab-strip-closable a.x-tab-strip-close:hover {
  background-image: none;
}
a.x-tab-strip-close:before, a.x-tab-strip-close:after {
  position: absolute;
  content: '';
  width: 80%;
  height: 2px; /* cross thickness */
  margin-top: 3px;
  margin-left: 2px;
  background-color: var(--tabBaseTextColor);
}
.x-tab-strip-active a.x-tab-strip-close:before, .x-tab-strip-active a.x-tab-strip-close:after {
  background-color: var(--tabActiveTextColor);
}
a.x-tab-strip-close:before{
  transform:rotate(45deg);
}
a.x-tab-strip-close:after{
  transform:rotate(-45deg);
}

/*** icone bottoni generici ***/
.x-tool {
  background-image: none;
  transition-duration: 0.2s;
}
.x-tool-collapse-west {
  width: 6px;
  height: 6px;
  position: absolute;
  right: 0px;
  top: 8px;
  border-style: solid;
  border-width: 0px 2px 2px 0px;
  border-color: transparent var(--panelHeaderTextColor) var(--panelHeaderTextColor) transparent;
  transform: rotate(135deg);
  overflow: visible;
  opacity: 0.8;
}
.x-tool-collapse-west-over {
  opacity: 1;
}
.x-tool-collapse-west:after {
  content: '';
  position: absolute;
  top: 3px;
  right: -5px;
  width: 6px;
  height: 6px;
  border-style: solid;
  border-width: 0px 2px 2px 0px;
  border-color: transparent var(--panelHeaderTextColor) var(--panelHeaderTextColor) transparent;
}
.x-tool-expand-west {
  width: 6px;
  height: 6px;
  position: absolute;
  top: 4px;
  border-style: solid;
  border-width: 0px 2px 2px 0px;
  border-color: transparent var(--panelHeaderTextColor) var(--panelHeaderTextColor) transparent;
  transform: rotate(-45deg);
  overflow: visible;
  opacity: 0.8;
}
.x-tool-expand-west-over {
  opacity: 1;
}
.x-tool-expand-west:after {
  content: '';
  position: absolute;
  top: 3px;
  right: -5px;
  width: 6px;
  height: 6px;
  border-style: solid;
  border-width: 0px 2px 2px 0px;
  border-color: transparent var(--panelHeaderTextColor) var(--panelHeaderTextColor) transparent;
}
.x-tool-collapse-east {
  width: 6px;
  height: 6px;
  position: absolute;
  right: 14px;
  top: 8px;
  border-style: solid;
  border-width: 0px 2px 2px 0px;
  border-color: transparent var(--panelHeaderTextColor) var(--panelHeaderTextColor) transparent;
  transform: rotate(-45deg);
  overflow: visible;
  opacity: 0.8;
}
.x-tool-collapse-east-over {
  opacity: 1;
}
.x-tool-collapse-east:after {
  content: '';
  position: absolute;
  top: 3px;
  right: -5px;
  width: 6px;
  height: 6px;
  border-style: solid;
  border-width: 0px 2px 2px 0px;
  border-color: transparent var(--panelHeaderTextColor) var(--panelHeaderTextColor) transparent;
}
.x-tool-expand-east {
  width: 6px;
  height: 6px;
  position: absolute;
  top: 4px;
  right: 0px;
  border-style: solid;
  border-width: 0px 2px 2px 0px;
  border-color: transparent var(--panelHeaderTextColor) var(--panelHeaderTextColor) transparent;
  transform: rotate(135deg);
  overflow: visible;
  opacity: 0.8;
}
.x-tool-expand-east-over {
  opacity: 1;
}
.x-tool-expand-east:after {
  content: '';
  position: absolute;
  top: 3px;
  right: -5px;
  width: 6px;
  height: 6px;
  border-style: solid;
  border-width: 0px 2px 2px 0px;
  border-color: transparent var(--panelHeaderTextColor) var(--panelHeaderTextColor) transparent;
}
.x-tool-collapse-north {
  width: 6px;
  height: 6px;
  position: absolute;
  right: 9px;
  top: 12px;
  border-style: solid;
  border-width: 0px 2px 2px 0px;
  border-color: transparent var(--panelHeaderTextColor) var(--panelHeaderTextColor) transparent;
  transform: rotate(-135deg);
  overflow: visible;
  opacity: 0.8;
}
.x-tool-collapse-north-over {
  opacity: 1;
}
.x-tool-collapse-north:after {
  content: '';
  position: absolute;
  top: 3px;
  right: -5px;
  width: 6px;
  height: 6px;
  border-style: solid;
  border-width: 0px 2px 2px 0px;
  border-color: transparent var(--panelHeaderTextColor) var(--panelHeaderTextColor) transparent;
}
.x-tool-expand-north {
  width: 6px;
  height: 6px;
  position: absolute;
  right: 4px;
  top: -1px;
  border-style: solid;
  border-width: 0px 2px 2px 0px;
  border-color: transparent var(--panelHeaderTextColor) var(--panelHeaderTextColor) transparent;
  transform: rotate(45deg);
  overflow: visible;
  opacity: 0.8;
}
.x-tool-expand-north-over {
  opacity: 1;
}
.x-tool-expand-north:after {
  content: '';
  position: absolute;
  top: 3px;
  right: -5px;
  width: 6px;
  height: 6px;
  border-style: solid;
  border-width: 0px 2px 2px 0px;
  border-color: transparent var(--panelHeaderTextColor) var(--panelHeaderTextColor) transparent;
}
.x-tool-collapse-south {
  width: 6px;
  height: 6px;
  position: absolute;
  right: 9px;
  top: 4px;
  border-style: solid;
  border-width: 0px 2px 2px 0px;
  border-color: transparent var(--panelHeaderTextColor) var(--panelHeaderTextColor) transparent;
  transform: rotate(45deg);
  overflow: visible;
  opacity: 0.8;
}
.x-tool-collapse-south-over {
  opacity: 1;
}
.x-tool-collapse-south:after {
  content: '';
  position: absolute;
  top: 3px;
  right: -5px;
  width: 6px;
  height: 6px;
  border-style: solid;
  border-width: 0px 2px 2px 0px;
  border-color: transparent var(--panelHeaderTextColor) var(--panelHeaderTextColor) transparent;
}
.x-tool-expand-south {
  width: 6px;
  height: 6px;
  position: absolute;
  right: 4px;
  top: 7px;
  border-style: solid;
  border-width: 0px 2px 2px 0px;
  border-color: transparent var(--panelHeaderTextColor) var(--panelHeaderTextColor) transparent;
  transform: rotate(-135deg);
  overflow: visible;
  opacity: 0.8;
}
.x-tool-expand-south-over {
  opacity: 1;
}
.x-tool-expand-south:after {
  content: '';
  position: absolute;
  top: 3px;
  right: -5px;
  width: 6px;
  height: 6px;
  border-style: solid;
  border-width: 0px 2px 2px 0px;
  border-color: transparent var(--panelHeaderTextColor) var(--panelHeaderTextColor) transparent;
}
.x-tool-close:before, .x-tool-close:after {
  position: absolute;
  display: block;
  content: '';
  top: 12px;
  width: 11px;
  height: 2px; /* cross thickness */
  margin-left: 2px;
  background-color: var(--panelHeaderTextColor);
  opacity: 0.8;
}
.x-tool-close-over:before, .x-tool-close-over:after {
  opacity: 1;
}
.x-tool-close:before {
  transform: rotate(45deg);
}
.x-tool-close:after {
  transform: rotate(-45deg);
}
.x-fieldset .x-tool-toggle {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 3px 6px 6px 6px;
  border-color: transparent transparent var(--fieldsetColor) transparent;
}
.x-fieldset.x-panel-collapsed .x-tool-toggle {
  border-width: 6px 6px 3px 6px;
  border-color: var(--fieldsetColor) transparent transparent transparent;
  margin-top: 3px;
}
.x-fieldset legend {
  color: var(--fieldsetColor);
}
.x-tab-scroller-left {
  position: absolute;
  width: 18px;
  height: 21px;
  background: var(--tabBaseColor);
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--tabHeaderColor);
}
.x-tab-scroller-left-over:not(.x-tab-scroller-left-disabled) {
  background: var(--tabHoverColor);
}
.x-tab-scroller-left:before {
  content: '';
  width: 6px;
  height: 6px;
  position: absolute;
  top: 6px;
  left: 6px;
  border-style: solid;
  border-width: 0px 2px 2px 0px;
  border-color: transparent var(--tabHeaderColor) var(--tabHeaderColor) transparent;
  transform: rotate(135deg);
}
.x-tab-scroller-right {
  position: absolute;
  width: 18px;
  height: 21px;
  background: var(--tabBaseColor);
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--tabHeaderColor);
}
.x-tab-scroller-right-over:not(.x-tab-scroller-right-disabled) {
  background: var(--tabHoverColor);
}
.x-tab-scroller-right:before {
  content: '';
  width: 6px;
  height: 6px;
  position: absolute;
  top: 6px;
  right: 6px;
  border-style: solid;
  border-width: 0px 2px 2px 0px;
  border-color: transparent var(--tabHeaderColor) var(--tabHeaderColor) transparent;
  transform: rotate(-45deg);
}

/*** finestre ***/
.x-window {
  background-color: var(--windowBorderColor);
}
.x-window-tl, .x-window-tc, .x-window-tr, .x-window-bl, .x-window-bc, .x-window-br, .x-window-ml, .x-window-mc, .x-window-mr {
  background-image: none;
  background-color: inherit;
}
.x-window-plain .x-window-body, .x-window-bwrap {
  background-color: var(--windowColor) !important;
  border: none;
}
.x-window-maximized .x-window-tc {
  background-color: var(--windowHeaderColor);
}
.x-window-header-text {
  color: var(--windowHeaderTextColor);
}
.x-window-plain .x-window-mc {
  background-color: var(--windowColor);
  border: none;
}
.x-panel-ghost {
  background-color: var(--windowColor);
}
.x-panel-ghost ul {
  border-color: var(--windowColor);
}
.x-panel-ghost .x-window-tl {
  border-bottom-color: var(--windowBorderColor);
}

/*** griglie ***/
.x-grid3-header {
  background-color: var(--gridHeaderColor);
  color: var(--gridHeaderTextColor);
  background-image: none;
}

.x-grid3-hd-row td {
  border-right-color: var(--gridHeaderBorderColor);
  border-left-color: var(--gridHeaderColor);
}
.x-grid3-cell-inner, .x-grid3-hd-inner {
  color: inherit; /* disables forced theme colors */
}
.x-grid-with-col-lines .x-grid3-row td.x-grid3-cell {
  color: var(--gridTextColor);
}	
.x-grid3 {
  background-color: var(--gridColor);
}
.x-grid3-row {
  border-color: var(--gridBorderColor);
  border-left: 1px solid var(--gridBorderColor);
  border-right: none;
}
.x-grid3-row-alt {
  background-color: var(--gridSecondColor);
}
.x-grid3-row-selected {
  background-color: var(--gridSelectedColor) !important;
  border: 1px dotted;
}
.x-grid-with-col-lines .x-grid3-row-selected {
  border-top-color: var(--gridSelectedBorderColor);
  border-bottom-color: var(--gridSelectedBorderColor);
  border-left-color: var(--gridSelectedBorderColor);
  border-right-color: var(--gridSelectedBorderColor);
}
.x-grid3-row-over {
  background-color: var(--gridHoverColor);
  color: var(--gridHoverTextColor);
  border: 1px solid var(--gridHoverBorderColor);
  background-image: none;
}
.x-grid-with-col-lines .x-grid3-row-over {
  border-top-color: var(--gridHoverBorderColor);
}
td.x-grid3-hd-over .x-grid3-hd-inner, td.sort-desc .x-grid3-hd-inner, td.sort-asc .x-grid3-hd-inner, td.x-grid3-hd-menu-open .x-grid3-hd-inner {
  background-image: none;
  background-color: var(--gridHeaderSelHovColor);
}
.sort-desc .x-grid3-sort-icon {
  background-image: none;
  width: 0px;
  height: 0px;
  border-color: transparent;
  border-top-color: var(--gridHeaderTextColor);
  border-style: solid;
  border-width: 4px;
  margin-top: 4px;
}
.sort-asc .x-grid3-sort-icon {
  background-image: none;
  width: 0px;
  height: 0px;
  border-color: transparent;
  border-style: solid;
  border-width: 4px;
  border-bottom-color: var(--gridHeaderTextColor);
  margin-bottom: 4px;
}


/* bottoni standard (ok, cancel, save, ...) */
.x-btn-tl, .x-btn-tr, .x-btn-tc, .x-btn-ml, .x-btn-mr, .x-btn-bl, .x-btn-br, .x-btn-bc {
  background-image: none;
  background-color: var(--buttonsBorderColor);
}
.x-btn-tl {
  background-image: linear-gradient(to top left, var(--buttonsBorderInnerColor) 0%, var(--buttonsBorderInnerColor) 35%,
    var(--buttonsBorderColor) 35%, var(--buttonsBorderColor) 57%,
	var(--panelBodyColor) 57%, var(--panelBodyColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-btn-tr {
  background-image: linear-gradient(to top right, var(--buttonsBorderInnerColor) 0%, var(--buttonsBorderInnerColor) 35%,
    var(--buttonsBorderColor) 35%, var(--buttonsBorderColor) 57%,
	var(--panelBodyColor) 57%, var(--panelBodyColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-btn-tc {
  background-image: linear-gradient(to top, var(--buttonsBorderInnerColor) 0%, var(--buttonsBorderInnerColor) 70%, var(--buttonsBorderColor) 70%, var(--buttonsBorderColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-btn-ml {
  background-image: linear-gradient(to left, var(--buttonsBorderInnerColor) 0%, var(--buttonsBorderInnerColor) 70%, var(--buttonsBorderColor) 70%, var(--buttonsBorderColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-btn-mr {
  background-image: linear-gradient(to right, var(--buttonsBorderInnerColor) 0%, var(--buttonsBorderInnerColor) 70%, var(--buttonsBorderColor) 70%, var(--buttonsBorderColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-btn-bl {
  background-image: linear-gradient(to bottom left, var(--buttonsBorderInnerColor) 0%, var(--buttonsBorderInnerColor) 35%,
    var(--buttonsBorderColor) 35%, var(--buttonsBorderColor) 57%,
	var(--panelBodyColor) 57%, var(--panelBodyColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-btn-br {
  background-image: linear-gradient(to bottom right, var(--buttonsBorderInnerColor) 0%, var(--buttonsBorderInnerColor) 35%,
    var(--buttonsBorderColor) 35%, var(--buttonsBorderColor) 57%,
	var(--panelBodyColor) 57%, var(--panelBodyColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-btn-bc {
  background-image: linear-gradient(to bottom, var(--buttonsBorderInnerColor) 0%, var(--buttonsBorderInnerColor) 70%, var(--buttonsBorderColor) 70%, var(--buttonsBorderColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-btn-mc {
  background-image: none;
  background-color: var(--buttonsColor);
  transition-duration: 0.2s;
}
.x-btn-over .x-btn-tl {
  background-image: linear-gradient(to top left, var(--buttonsHoverBorderInnerColor) 0%, var(--buttonsHoverBorderInnerColor) 35%,
    var(--buttonsHoverBorderColor) 35%, var(--buttonsHoverBorderColor) 57%,
	var(--panelBodyColor) 57%, var(--panelBodyColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-btn-over .x-btn-tr {
  background-image: linear-gradient(to top right, var(--buttonsHoverBorderInnerColor) 0%, var(--buttonsHoverBorderInnerColor) 35%,
    var(--buttonsHoverBorderColor) 35%, var(--buttonsHoverBorderColor) 57%,
	var(--panelBodyColor) 57%, var(--panelBodyColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-btn-over .x-btn-tc {
  background-image: linear-gradient(to top, var(--buttonsHoverBorderInnerColor) 0%, var(--buttonsHoverBorderInnerColor) 70%, var(--buttonsHoverBorderColor) 70%, var(--buttonsHoverBorderColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-btn-over .x-btn-ml {
  background-image: linear-gradient(to left, var(--buttonsHoverBorderInnerColor) 0%, var(--buttonsHoverBorderInnerColor) 70%, var(--buttonsHoverBorderColor) 70%, var(--buttonsHoverBorderColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-btn-over .x-btn-mr {
  background-image: linear-gradient(to right, var(--buttonsHoverBorderInnerColor) 0%, var(--buttonsHoverBorderInnerColor) 70%, var(--buttonsHoverBorderColor) 70%, var(--buttonsHoverBorderColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-btn-over .x-btn-bl {
  background-image: linear-gradient(to bottom left, var(--buttonsHoverBorderInnerColor) 0%, var(--buttonsHoverBorderInnerColor) 35%,
    var(--buttonsHoverBorderColor) 35%, var(--buttonsHoverBorderColor) 57%,
	var(--panelBodyColor) 57%, var(--panelBodyColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-btn-over .x-btn-br {
  background-image: linear-gradient(to bottom right, var(--buttonsHoverBorderInnerColor) 0%, var(--buttonsHoverBorderInnerColor) 35%,
    var(--buttonsHoverBorderColor) 35%, var(--buttonsHoverBorderColor) 57%,
	var(--panelBodyColor) 57%, var(--panelBodyColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-btn-over .x-btn-bc {
  background-image: linear-gradient(to bottom, var(--buttonsHoverBorderInnerColor) 0%, var(--buttonsHoverBorderInnerColor) 70%, var(--buttonsHoverBorderColor) 70%, var(--buttonsHoverBorderColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-btn-over .x-btn-mc {
  background-color: var(--buttonsHoverColor);
}
.x-btn button {
  color: var(--buttonsTextColor);
}
.x-btn-over button {
  color: var(--buttonsHoverTextColor);
}

/* bottoni griglia (add, edit, refresh, ..., tools) */
.x-toolbar .x-btn-over .x-btn-tl {
  background-image: linear-gradient(to top left, var(--toolsHoverBorderInnerColor) 0%, var(--toolsHoverBorderInnerColor) 35%,
    var(--toolsHoverBorderColor) 35%, var(--toolsHoverBorderColor) 57%,
	var(--panelBodyColor) 57%, var(--panelBodyColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-toolbar .x-btn-over .x-btn-tr {
  background-image: linear-gradient(to top right, var(--toolsHoverBorderInnerColor) 0%, var(--toolsHoverBorderInnerColor) 35%,
    var(--toolsHoverBorderColor) 35%, var(--toolsHoverBorderColor) 57%,
	var(--panelBodyColor) 57%, var(--panelBodyColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-toolbar .x-btn-over .x-btn-tc {
  background-image: linear-gradient(to top, var(--toolsHoverBorderInnerColor) 0%, var(--toolsHoverBorderInnerColor) 70%, var(--toolsHoverBorderColor) 70%, var(--toolsHoverBorderColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-toolbar .x-btn-over .x-btn-ml {
  background-image: linear-gradient(to left, var(--toolsHoverBorderInnerColor) 0%, var(--toolsHoverBorderInnerColor) 70%, var(--toolsHoverBorderColor) 70%, var(--toolsHoverBorderColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-toolbar .x-btn-over .x-btn-mr {
  background-image: linear-gradient(to right, var(--toolsHoverBorderInnerColor) 0%, var(--toolsHoverBorderInnerColor) 70%, var(--toolsHoverBorderColor) 70%, var(--toolsHoverBorderColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-toolbar .x-btn-over .x-btn-bl {
  background-image: linear-gradient(to bottom left, var(--toolsHoverBorderInnerColor) 0%, var(--toolsHoverBorderInnerColor) 35%,
    var(--toolsHoverBorderColor) 35%, var(--toolsHoverBorderColor) 57%,
	var(--panelBodyColor) 57%, var(--panelBodyColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-toolbar .x-btn-over .x-btn-br {
  background-image: linear-gradient(to bottom right, var(--toolsHoverBorderInnerColor) 0%, var(--toolsHoverBorderInnerColor) 35%,
    var(--toolsHoverBorderColor) 35%, var(--toolsHoverBorderColor) 57%,
	var(--panelBodyColor) 57%, var(--panelBodyColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-toolbar .x-btn-over .x-btn-bc {
  background-image: linear-gradient(to bottom, var(--toolsHoverBorderInnerColor) 0%, var(--toolsHoverBorderInnerColor) 70%, var(--toolsHoverBorderColor) 70%, var(--toolsHoverBorderColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-btn-over {
  background-color: var(--toolsHoverColor);
  transition-duration: 0.2s;
}
.x-toolbar .x-btn button {
  color: var(--toolsTextColor);
}
.x-toolbar .x-btn-over button {
  color: var(--toolsHoverTextColor);
}
.x-toolbar .x-btn-tl, .x-toolbar .x-btn-tr, .x-toolbar .x-btn-tc, .x-toolbar .x-btn-ml, .x-toolbar .x-btn-mr, .x-toolbar .x-btn-mc, .x-toolbar .x-btn-bl, .x-toolbar .x-btn-br, .x-toolbar .x-btn-bc {
  background-color: inherit;
  background-image: none;
  transition-duration: 0s;
}

/* bottoni su toolbar (login, cambio password, ...) */
.x-panel-noborder .x-panel-bbar-noborder .x-toolbar .x-btn-over .x-btn-tl {
  background-image: linear-gradient(to top left, var(--buttonsHoverBorderInnerColor) 0%, var(--buttonsHoverBorderInnerColor) 35%,
    var(--buttonsHoverBorderColor) 35%, var(--buttonsHoverBorderColor) 57%,
	var(--statusbarColor) 57%, var(--statusbarColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-panel-noborder .x-panel-bbar-noborder .x-toolbar .x-btn-over .x-btn-tr {
  background-image: linear-gradient(to top right, var(--buttonsHoverBorderInnerColor) 0%, var(--buttonsHoverBorderInnerColor) 35%,
    var(--buttonsHoverBorderColor) 35%, var(--buttonsHoverBorderColor) 57%,
	var(--statusbarColor) 57%, var(--statusbarColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-panel-noborder .x-panel-bbar-noborder .x-toolbar .x-btn-over .x-btn-bl {
  background-image: linear-gradient(to bottom left, var(--buttonsHoverBorderInnerColor) 0%, var(--buttonsHoverBorderInnerColor) 35%,
    var(--buttonsHoverBorderColor) 35%, var(--buttonsHoverBorderColor) 57%,
	var(--statusbarColor) 57%, var(--statusbarColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-panel-noborder .x-panel-bbar-noborder .x-toolbar .x-btn-over .x-btn-br {
  background-image: linear-gradient(to bottom right, var(--buttonsHoverBorderInnerColor) 0%, var(--buttonsHoverBorderInnerColor) 35%,
    var(--buttonsHoverBorderColor) 35%, var(--buttonsHoverBorderColor) 57%,
	var(--statusbarColor) 57%, var(--statusbarColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-panel-noborder .x-panel-bbar-noborder .x-toolbar .x-btn button {
  color: var(--statusbarTextColor);
}
.x-panel-noborder .x-panel-bbar-noborder .x-toolbar .x-btn-over button {
  color: var(--buttonsHoverTextColor);
}

/* bottoni barra paginazione griglia */
.x-panel-noborder .x-panel-bbar-noborder .x-toolbar.k-bbar .x-btn-over .x-btn-tl {
  background-image: linear-gradient(to top left, var(--toolsHoverBorderInnerColor) 0%, var(--toolsHoverBorderInnerColor) 35%,
    var(--toolsHoverBorderColor) 35%, var(--toolsHoverBorderColor) 57%,
	var(--panelBodyColor) 57%, var(--panelBodyColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-panel-noborder .x-panel-bbar-noborder .x-toolbar.k-bbar .x-btn-over .x-btn-tr {
  background-image: linear-gradient(to top right, var(--toolsHoverBorderInnerColor) 0%, var(--toolsHoverBorderInnerColor) 35%,
    var(--toolsHoverBorderColor) 35%, var(--toolsHoverBorderColor) 57%,
	var(--panelBodyColor) 57%, var(--panelBodyColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-panel-noborder .x-panel-bbar-noborder .x-toolbar.k-bbar .x-btn-over .x-btn-tc {
  background-image: linear-gradient(to top, var(--toolsHoverBorderInnerColor) 0%, var(--toolsHoverBorderInnerColor) 70%, var(--toolsHoverBorderColor) 70%, var(--toolsHoverBorderColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-panel-noborder .x-panel-bbar-noborder .x-toolbar.k-bbar .x-btn-over .x-btn-ml {
  background-image: linear-gradient(to left, var(--toolsHoverBorderInnerColor) 0%, var(--toolsHoverBorderInnerColor) 70%, var(--toolsHoverBorderColor) 70%, var(--toolsHoverBorderColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-panel-noborder .x-panel-bbar-noborder .x-toolbar.k-bbar .x-btn-over .x-btn-mr {
  background-image: linear-gradient(to right, var(--toolsHoverBorderInnerColor) 0%, var(--toolsHoverBorderInnerColor) 70%, var(--toolsHoverBorderColor) 70%, var(--toolsHoverBorderColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-panel-noborder .x-panel-bbar-noborder .x-toolbar.k-bbar .x-btn-over .x-btn-bl {
  background-image: linear-gradient(to bottom left, var(--toolsHoverBorderInnerColor) 0%, var(--toolsHoverBorderInnerColor) 35%,
    var(--toolsHoverBorderColor) 35%, var(--toolsHoverBorderColor) 57%,
	var(--panelBodyColor) 57%, var(--panelBodyColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-panel-noborder .x-panel-bbar-noborder .x-toolbar.k-bbar .x-btn-over .x-btn-br {
  background-image: linear-gradient(to bottom right, var(--toolsHoverBorderInnerColor) 0%, var(--toolsHoverBorderInnerColor) 35%,
    var(--toolsHoverBorderColor) 35%, var(--toolsHoverBorderColor) 57%,
	var(--panelBodyColor) 57%, var(--panelBodyColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-panel-noborder .x-panel-bbar-noborder .x-toolbar.k-bbar .x-btn-over .x-btn-bc {
  background-image: linear-gradient(to bottom, var(--toolsHoverBorderInnerColor) 0%, var(--toolsHoverBorderInnerColor) 70%, var(--toolsHoverBorderColor) 70%, var(--toolsHoverBorderColor) 100%);
  background-repeat: repeat;
  background-position: initial;
}
.x-panel-noborder .x-panel-bbar-noborder .x-toolbar.k-bbar {
  color: var(--toolsTextColor);
}
.x-panel-noborder .x-panel-bbar-noborder .x-toolbar.k-bbar .x-btn-tl, .x-toolbar.k-bbar .x-btn-tr, .x-toolbar.k-bbar .x-btn-tc, .x-toolbar.k-bbar .x-btn-ml, .x-toolbar.k-bbar .x-btn-mr, .x-toolbar.k-bbar .x-btn-mc, .x-toolbar.k-bbar .x-btn-bl, .x-toolbar.k-bbar .x-btn-br, .x-toolbar.k-bbar .x-btn-bc {
  background-color: inherit;
  background-image: none;
  transition-duration: 0s;
}

/* generico per tutti i bottoni */
.x-btn {
  transition-duration: 0.2s;
}

/* icone in form (tendine, calendario, etc) */
@supports not (-moz-appearance:none) { /* questa enclosure serve a escludere firefox che non ha il selector :has */
  .x-form-field-wrap .x-form-trigger {
    background-image: none;
    border: none;
    background-color: var(--panelHeaderColor);
    border-radius: 5px;
    height: 20px;
    transition-duration: 0.2s;
  }
  .x-form-field-wrap .x-form-trigger-over {
    background-color: var(--panelColor);
  }
  .x-form-field-trigger-wrap:after, .x-form-field-trigger-wrap:before {
    content: '';
    border: 1px solid var(--panelHeaderTextColor);
    position: absolute;
    height: 4px;
    right: 9px;
    transform: rotate(-45deg);
    top: 7px;
    z-index: 1;
    pointer-events: none;
  }
  .x-form-field-trigger-wrap:after {
    transform: rotate(45deg);
    right: 6px;
  }
  .x-form-field-trigger-wrap:has(> img.x-form-date-trigger):after,
  .x-form-field-trigger-wrap:has(> img.x-form-date-trigger):before {
    transform: rotate(0deg);
    border-radius: 3px;
    transition-duration: 0.2s;
  }
  .x-form-field-trigger-wrap:has(> img.x-form-date-trigger):before {
    border: none;
    top: 7px;
    right: 2px;
    height: 11px;
    width: 13px;
    border-top-left-radius: 0;
    background-color: var(--windowHeaderTextColor);
    border-top-right-radius: 0;
  }
  .x-form-field-trigger-wrap:has(> img.x-form-date-trigger):after {
    border: 1px solid var(--panelHeaderColor);
    height: 3px;
    width: 3px;
    top: 8px;
    right: 3px;
    background-color: var(--panelHeaderTextColor);
    border-radius: 0px;
  }
  .x-form-field-trigger-wrap:has(> img.x-form-date-trigger.x-form-trigger-over):after {
    background-color: var(--panelColor);
    border-color: var(--panelColor);
  }
  .x-form-field-trigger-wrap:has(> span.x-form-twin-triggers):before,
  .x-form-field-trigger-wrap:has(> span.x-form-twin-triggers):after {
    height: 8px; 
    top: 5px;
    right: 8px;
  }
  .x-form-field-wrap .x-form-twin-triggers .x-form-trigger {
    border-right: 1px solid var(--panelHeaderColor);
  }
  .x-form-field-wrap .x-form-twin-triggers .x-form-trigger-over {
    border-right: 1px solid var(--panelColor);
  }
  .x-form-twin-triggers:before {
    content: '';
    top: 14px;
    right: 29px;
    border: 1px solid var(--panelHeaderTextColor);
    width: 0px;
    height: 0px;
    transform: rotate(-45deg);
    position: absolute;
    border-left: 4px solid var(--panelHeaderTextColor);
    pointer-events: none;
  }
  .x-form-twin-triggers:after {
    content: '';
    width: 8px;
    top: 2px;
    right: 20px;
    height: 8px;
    border: 2px solid var(--panelHeaderTextColor);
    position: absolute;
    border-radius: 100%;
    pointer-events: none;
  }
}

/* spunte in griglia */
.x-grid3-check-col, .x-grid3-check-col-on {
  width: 9px;
  height: 9px;
  border: 2px solid var(--panelHeaderColor);
  border-radius: 3px;
  align-self: center;
  background-image: none;
}
.x-grid3-cell-inner:has(> div.x-grid3-check-col) {
  display: flex;
  flex-direction: column;
}
.x-grid3-cell-inner:has(> div.x-grid3-check-col-on) {
  display: flex;
  flex-direction: column;
}
.x-grid3-check-col-on:before {
  content: '';
  display: block;
  box-sizing: border-box;
  position: relative;
  top: -5px;
  width: 5px;
  height: 10px;
  border-width: 0 2px 2px 0;
  border-style: solid;
  border-color: var(--gridTextColor);
  transform-origin: bottom left;
  transform: rotate(45deg);
}

/* bottoni navigazione griglie paginate */
.x-tbar-page-first, .x-tbar-page-prev, .x-tbar-page-next, .x-tbar-page-last {
  background-image: none !important;
}
.x-item-disabled .x-tbar-page-first, .x-item-disabled .x-tbar-page-prev, .x-item-disabled .x-tbar-page-next, .x-item-disabled .x-tbar-page-last {
  background-image: none !important;
}
.x-tbar-page-first:before, .x-tbar-page-prev:before, .x-tbar-page-next:before, .x-tbar-page-last:before {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 6px;
  border-color: transparent;
  border-left-color: var(--tabBaseColor);
  width: 0px;
  height: 0px;
  margin-left: -2px;
}
.x-tbar-page-first:before, .x-tbar-page-prev:before {
  border-left-color: transparent;
  border-right-color: var(--tabBaseColor);
  margin-left: -7px;
}
.x-tbar-page-first:after, .x-tbar-page-last:after {
  content: '';
  position: absolute;
  border-left-style: solid;
  border-left-width: 2px;
  border-left-color: var(--tabBaseColor);
  width: 0px;
  height: 12px;
  margin-left: -7px;
}
.x-tbar-page-last:after {
  margin-left: 2px;
}

/* tiles (bottoni menu) */
.k-tile-box {
  margin-top: 10px;
  margin-left: 11px;
}
.k-tile-title-row {
  font-size: 130%;
  font-weight: bold;
}
.k-tile {
  color: var(--tileTextColor);
  font-size: 90%;
  font-weight: bold;
  float: left;
  border-radius: 5px;
  background-color: var(--tileColor);
  margin-right: 10px;
  margin-bottom: 10px;
  width: 100px;
  height: 40px;
  background-position: 10px 10px;
  transition-duration: 0.2s;
}
.k-tile-inner {
  height: 97%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
}
.k-tile:hover {
  background-color: var(--tileHoverColor);
  color: var(--tileHoverTextColor);
}

/* icone messaggi (conferma, warning e error) */
.x-window-dlg .x-dlg-icon .ext-mb-content {
  margin-left: 32px;
}
.x-window-dlg .ext-mb-question {
  background-image: none;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  border: solid 6px var(--windowHeaderColor);
  border-left-color: transparent;
  transform: rotate(-45deg);
  margin-top: 3px;
  margin-bottom: 5px;
}
.x-window-dlg .ext-mb-question:before {
  content: '';
  position: absolute;
  border-radius: 100%;
  height: 6px;
  width: 6px;
  bottom: -5px;
  left: -5px;
  background-color: var(--windowHeaderColor);
  transform: rotate(45deg);
}
.x-window-dlg .ext-mb-question:after {
  content: '';
  position: absolute;
  border-radius: 100%;
  width: 7px;
  background-color: var(--windowHeaderColor);
  height: 7px;
  bottom: -11px;
  left: -11px;
}
.x-window-dlg .ext-mb-warning {
  background-image: none;
  margin-top: 3px;
  margin-bottom: 5px;
}
.x-window-dlg .ext-mb-warning:before {
  content: '';
  position: absolute;
  width: 7px;
  height: 21px;
  border-radius: 5px;
  background-color: var(--windowHeaderColor);
  left: 32px;
}
.x-window-dlg .ext-mb-warning:after {
  content: '';
  position: absolute;
  border-radius: 100%;
  height: 7px;
  width: 7px;
  top: 31px;
  left: 32px;
  background-color: var(--windowHeaderColor);
}
.x-window-dlg .ext-mb-error {
  background-image: none;
  background-color: var(--errorColor);
  width: 26px;
  height: 26px;
  border-radius: 100%;
  margin-top: 3px;
  margin-bottom: 5px;
  margin-left: -5px;
}
.x-window-dlg .ext-mb-error:before {
  content: '';
  position: absolute;
  width: 4px;
  height: 20px;
  border-radius: 5px;
  background-color: var(--errorXColor);
  left: 22px;
  top: 11px;
  transform: rotate(45deg);
}
.x-window-dlg .ext-mb-error:after {
  content: '';
  position: absolute;
  width: 4px;
  height: 20px;
  border-radius: 5px;
  background-color: var(--errorXColor);
  left: 22px;
  top: 11px;
  transform: rotate(-45deg);
}

/* grouping */
.x-grid-group-hd {
  border-bottom-color: var(--panelHeaderColor);
}
.x-grid-group-hd div.x-grid-group-title {
  background-image: none;
  color: var(--panelHeaderColor);
}
.x-grid-group-hd div.x-grid-group-title:before {
  content: "";
  background-color: var(--panelHeaderColor);
  display: inline-block;
  position: relative;
  right: 10px;
  bottom: 3px;
  width: 8px;
  height: 2px;
}
.x-grid-group-collapsed .x-grid-group-hd div.x-grid-group-title {
  background-image: none;
}
.x-grid-group-collapsed .x-grid-group-hd div.x-grid-group-title:after {
  content: "";
  background-color: var(--panelHeaderColor);
  display: inline-block;
  position: absolute;
  left: 10px;
  margin-top: 3px;
  width: 2px;
  height: 8px;
}

/* tooltips */
.x-tip .x-tip-tc, .x-tip .x-tip-tl, .x-tip .x-tip-tr, .x-tip .x-tip-bc, .x-tip .x-tip-bl, .x-tip .x-tip-br, .x-tip .x-tip-ml, .x-tip .x-tip-mr {
  background-image: none;
  background-color: var(--panelBodyColor);
}
.x-tip {
  /*border: solid 1px var(--panelHeaderColor);*/
  border: none;
}

/* html memo */
.x-html-editor-wrap {
  border: none;
}

/* background campo vuoto */
.x-form-invalid, textarea.x-form-invalid {
  background-image: none;
}

:root {
  --tabHeaderColor: #E9ECEF;
  --tabActiveColor: white;
  --tabBaseColor: #2D2F32;
  --tabHoverColor: #6c757d;
  --tabActiveTextColor: #2D2F32;
  --tabBaseTextColor: white;
  --tabHoverTextColor: white;
  --windowHeaderColor: #2D2F32;
  --windowBorderColor: #2D2F32;
  --windowColor: #E9ECEF;
  --windowHeaderTextColor: white;
  --panelHeaderColor: #2D2F32;  
  --panelHeaderTextColor: white;
  --panelColor: #DEE2E6;
  --panelBodyColor: #E9ECEF;
  --panelBorderColor: #E9ECEF;
  --gridHeaderColor: #DEE2E6;
  --gridHeaderTextColor: #000;
  --gridHeaderBorderColor: #EDEDED;
  --gridHeaderSelHovColor: #777777;
  --gridColor: #f8f9fa;
  --gridSecondColor: #f8f9fa;
  --gridTextColor: #000;
  --gridBorderColor: #EDEDED;
  --gridSelectedColor: #DEE2E6;
  --gridSelectedTextColor: #000;
  --gridSelectedBorderColor: #CCC;
  --gridHoverColor: #EFEFEF;
  --gridHoverTextColor: #000;
  --gridHoverBorderColor: #DDD;
  --statusbarColor: #2D2F32;
  --statusbarTextColor: white;
  --statusbarTextErrorColor: #C33;
  --buttonsBorderColor: #CCC;
  --buttonsBorderInnerColor: #EEE;
  --buttonsTextColor: #000;
  --buttonsColor: white;
  --buttonsHoverBorderColor: grey;
  --buttonsHoverBorderInnerColor: #DDD;
  --buttonsHoverTextColor: #000;  
  --buttonsHoverColor: white;
  --toolsTextColor: #000;
  --toolsHoverBorderColor: grey;
  --toolsHoverBorderInnerColor: #EEE;
  --toolsHoverColor: white;
  --toolsHoverTextColor: #000;
  --fieldsetColor: #000;
  --tileColor: #000;
  --tileTextColor: white;
  --tileHoverColor: #777;
  --tileHoverTextColor: white;
  --errorColor: red; /* override this only when the colorset is red-ish */
  --errorXColor: white; /* override this only when the colorset is red-ish */
}