/* CODEGUN  */

#centerViewPortId-body img.logo {
  margin-bottom: 13vh;
  margin-right: 2vw;
}

/* TOOLBAR MAIN ICON */
.topbar-circle-btn.x-btn {
  box-shadow: none;
  /* font-size: 24px; */
}

.topbar-toolbar,
.topbar-toolbar .x-box-inner,
.topbar-circle-btn,
.topbar-circle-btn .x-btn-wrap,
.topbar-circle-btn .x-btn-button,
.topbar-circle-btn .x-btn-inner,
.topbar-circle-btn .x-btn-icon-el,
.topbar-circle-btn .x-btn-icon-el::before,
.topbar-circle-btn .x-btn-icon-el .x-fa {
  overflow: visible !important;
}

.topbar-circle-btn .x-btn-icon-el {
  line-height: inherit;
  /* aiuta a centrare l'icona */
}

.topbar-toolbar {
  padding-top: 4px;
}

.topbar-circle-btn {
  position: relative;
}

.menu-logo {
  position: unset !important;
  margin: 0 auto !important;
  display: block;
}

.menu-logo-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
}

.menu-logo-user .user-text {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: unset !important;
}

img.menu-logo {
  position: unset !important;
}

.menu-logo-user .menu-logo {
  margin: unset !important;
  position: unset !important;
}

.menu-logo-user div[role="presentation"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

/* BADGE */
.x-btn-badge-wrap {
  overflow: visible !important;
}

.topbar-circle-btn .badgeText,
.topbar-circle-btn .topbar-btn-badge {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  line-height: 20px;
  border-radius: 10px;
  background: #43b02a;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  z-index: 1000;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* COMBOBOX MAIN ICON */
.x-form-info-trigger {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='%237f8c9a' d='M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM288 224C288 206.3 302.3 192 320 192C337.7 192 352 206.3 352 224C352 241.7 337.7 256 320 256C302.3 256 288 241.7 288 224zM280 288L328 288C341.3 288 352 298.7 352 312L352 400L360 400C373.3 400 384 410.7 384 424C384 437.3 373.3 448 360 448L280 448C266.7 448 256 437.3 256 424C256 410.7 266.7 400 280 400L304 400L304 336L280 336C266.7 336 256 325.3 256 312C256 298.7 266.7 288 280 288z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 20px 20px !important;
}

.x-form-search-filter {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='%237f8c9a' d='M96 128C83.1 128 71.4 135.8 66.4 147.8C61.4 159.8 64.2 173.5 73.4 182.6L256 365.3L256 480C256 488.5 259.4 496.6 265.4 502.6L329.4 566.6C338.6 575.8 352.3 578.5 364.3 573.5C376.3 568.5 384 556.9 384 544L384 365.3L566.6 182.7C575.8 173.5 578.5 159.8 573.5 147.8C568.5 135.8 556.9 128 544 128L96 128z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 16px 16px !important;
}

.x-form-search-trigger {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='%237f8c9a' d='M416 272C416 351.5 351.5 416 272 416C192.5 416 128 351.5 128 272C128 192.5 192.5 128 272 128C351.5 128 416 192.5 416 272zM379.6 424.8C348.9 447.9 310.7 461.6 272 461.6C170.3 461.6 88 379.3 88 277.6C88 175.9 170.3 93.6 272 93.6C373.7 93.6 456 175.9 456 277.6C456 316.3 442.3 354.5 419.2 385.2L541.3 507.3C550.7 516.7 550.7 531.9 541.3 541.3C531.9 550.7 516.7 550.7 507.3 541.3L385.2 419.2z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 20px 20px !important;
}

.x-form-balance-scale-trigger {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='%237f8c9a' d='M304 96C304 87.2 311.2 80 320 80C328.8 80 336 87.2 336 96L336 112L456 112C464.8 112 472 119.2 472 128C472 136.8 464.8 144 456 144L336 144L336 432L392 432C405.3 432 416 442.7 416 456C416 469.3 405.3 480 392 480L248 480C234.7 480 224 469.3 224 456C224 442.7 234.7 432 248 432L304 432L304 144L184 144C175.2 144 168 136.8 168 128C168 119.2 175.2 112 184 112L304 112L304 96zM208 176C213.9 176 219.4 179.2 222.2 184.3L286.2 296.3C287.5 298.6 288.1 301.2 288.1 303.8C288.1 339.3 259.3 368.1 223.8 368.1L192.2 368.1C156.7 368.1 127.9 339.3 127.9 303.8C127.9 301.2 128.5 298.6 129.8 296.3L193.8 184.3C196.6 179.2 202.1 176 208 176zM432 176C437.9 176 443.4 179.2 446.2 184.3L510.2 296.3C511.5 298.6 512.1 301.2 512.1 303.8C512.1 339.3 483.3 368.1 447.8 368.1L416.2 368.1C380.7 368.1 351.9 339.3 351.9 303.8C351.9 301.2 352.5 298.6 353.8 296.3L417.8 184.3C420.6 179.2 426.1 176 432 176zM176.2 304C176.4 312.7 183.5 319.7 192.2 319.7L223.8 319.7C232.5 319.7 239.6 312.7 239.8 304L176.2 304zM400.2 304C400.4 312.7 407.5 319.7 416.2 319.7L447.8 319.7C456.5 319.7 463.6 312.7 463.8 304L400.2 304z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 20px 20px !important;
}

.x-form-calculator-trigger {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='2' width='16' height='20' rx='2' fill='none' stroke='%237f8c9a' stroke-width='2'/><rect x='7' y='5' width='10' height='4' rx='1' fill='%237f8c9a'/><path d='M8 13h2M14 13h2M8 17h2M14 17h2' fill='none' stroke='%237f8c9a' stroke-width='2' stroke-linecap='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 20px 20px !important;
}

/* FLOATING ICON */
.FloatingUsrImg {
  border-radius: 50%;
  /* Makes the toolbar circular */
  overflow: hidden;
  /* Ensures content fits within the circular shape */
  display: flex;
  /* Optional: for centering content inside the circle */
  justify-content: center;
  /* Center image horizontally */
  align-items: center;
  /* Center image vertically */
  z-index: 100;
  /* Ensures the image floats above other content */
}

.FloatingAppImg {
  border-radius: 25px;
  /* Adjust the radius as needed for more or less roundness */
  overflow: hidden;
  /* Optional: Ensures content respects the border-radius */
  background-color: white;
}

.FloatingAzImg {
  /*border: 2px solid #ccc;  Define border thickness and color */
  border-radius: 15px;
  /* Adjust the value to control roundness */
  padding: 5px;
  /* Optional: Add padding if necessary */
}

/* MENU */
.x-treelist {
  overflow: auto !important;
  min-width: 200px;
  /* CHS
  background-color: #ffffff !important;*/
}

/* CHS
.x-treelist-item-text {
  color: #6b6b6b !important;
  line-height: 1.8rem !important;
} */

/* Override for elements inside .x-grid-filterbar */
.x-grid-filterbar .x-form-trigger-wrap-default,
.x-grid-filterbar .x-form-trigger-default,
.x-grid-filterbar .x-form-text {
  border-radius: 0;
}

/* border radious a tab on top */
.x-tab-default-top {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* MENU COLOR LABEL */
/*RED*/
.fa-red {
  color: red !important;
}

.fa-red:hover {
  background-color: red !important;
}

.fa-red .x-treelist-item-text,
.fa-red .x-treelist-item-expander,
.fa-red .x-treelist-item-icon {
  color: red !important;
}

.fa-red:hover .x-treelist-item-text,
.fa-red:hover .x-treelist-item-expander,
.fa-red:hover .x-treelist-item-icon {
  color: white !important;
}

/*BLUE*/
.fa-blue {
  color: blue !important;
}

.fa-blue:hover {
  background-color: blue !important;
}

.fa-blue .x-treelist-item-text,
.fa-blue .x-treelist-item-expander,
.fa-blue .x-treelist-item-icon {
  color: blue !important;
}

.fa-blue:hover .x-treelist-item-text,
.fa-blue:hover .x-treelist-item-expander,
.fa-blue:hover .x-treelist-item-icon {
  color: white !important;
}

/*GREEN*/
.fa-green {
  color: green !important;
}

.fa-green:hover {
  background-color: green !important;
}

.fa-green .x-treelist-item-text,
.fa-green .x-treelist-item-expander,
.fa-green .x-treelist-item-icon {
  color: green !important;
}

.fa-green:hover .x-treelist-item-text,
.fa-green:hover .x-treelist-item-expander,
.fa-green:hover .x-treelist-item-icon {
  color: white !important;
}

/*VIOLET*/
.fa-violet {
  color: #d11d6b !important;
}

.fa-violet:hover {
  background-color: #d11d6b !important;
}

.fa-violet .x-treelist-item-text,
.fa-violet .x-treelist-item-expander,
.fa-violet .x-treelist-item-icon {
  color: #d11d6b !important;
}

.fa-violet:hover .x-treelist-item-text,
.fa-violet:hover .x-treelist-item-expander,
.fa-violet:hover .x-treelist-item-icon {
  color: white !important;
}

/*BLACK*/
.fa-black {
  color: black !important;
}

.fa-black:hover {
  background-color: black !important;
}

.fa-black .x-treelist-item-text,
.fa-black .x-treelist-item-expander,
.fa-black .x-treelist-item-icon {
  color: black !important;
}

.fa-black:hover .x-treelist-item-text,
.fa-black:hover .x-treelist-item-expander,
.fa-black:hover .x-treelist-item-icon {
  color: white !important;
}

/*GRAY*/
.fa-gray {
  color: gray !important;
}

.fa-gray:hover {
  background-color: gray !important;
}

.fa-gray .x-treelist-item-text,
.fa-gray .x-treelist-item-expander,
.fa-gray .x-treelist-item-icon {
  color: gray !important;
}

.fa-gray:hover .x-treelist-item-text,
.fa-gray:hover .x-treelist-item-expander,
.fa-gray:hover .x-treelist-item-icon {
  color: white !important;
}

/*ORANGE*/
.fa-orange {
  color: orange !important;
}

.fa-orange:hover {
  background-color: orange !important;
}

.fa-orange .x-treelist-item-text,
.fa-orange .x-treelist-item-expander,
.fa-orange .x-treelist-item-icon {
  color: orange !important;
}

.fa-orange:hover .x-treelist-item-text,
.fa-orange:hover .x-treelist-item-expander,
.fa-orange:hover .x-treelist-item-icon {
  color: white !important;
}

/*  HIGHLIGHT ICON   */
.red {
  color: red !important;
}

.green {
  color: green !important;
}

.blue {
  color: blue !important;
}

.yellow {
  color: yellow !important;
}

.orange {
  color: orange !important;
}

.purple {
  color: purple !important;
}

.brown {
  color: brown !important;
}

.black {
  color: black !important;
}

.pink {
  color: pink !important;
}

.cyan {
  color: cyan !important;
}

.magenta {
  color: magenta !important;
}

/*  HIGHLIGHT ROW GRID   */
.highlight-row {
  background-color: #fff6b9 !important;
}

.highlight-row-Yellow {
  background-color: #feffc4 !important;
}

.highlight-row-Red {
  background-color: #cd4444 !important;
}

.highlight-row-Green {
  background-color: #c1fccb !important;
}

.highlight-row-Blue {
  background-color: #bbddf2 !important;
}

.highlight-row-Grey {
  background-color: #d8d7d7 !important;
}

/*  LOGO APPLICATION   */
.FloatingAzImg {
  background-color: transparent !important;
}

.FloatingAppImg {
  background-color: white !important;
  border-radius: 8px !important;
}

/* ** Weather CSS ** */
.component__weather-box {
  width: auto;
  overflow: hidden;
}

.component__weather-content {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #e06b4f;
  height: 120px;
}

.weather-content__overview {
  width: 50%;
  text-align: center;
  display: inline-block;
  z-index: 2;
  position: relative;
}

.weather-content__temp {
  width: 50%;
  z-index: 2;
  text-align: center;
  float: left;
  font-size: 50px;
  text-align: center;
  margin-top: 0.5em;
  position: relative;
  vertical-align: middle;
}

.weather-content__temp .degrees {
  line-height: 40px;
}

.weather-content__temp .wi-degrees {
  margin-left: -10px;
  vertical-align: top !important;
}

.currentTemp .wi {
  margin-right: 20px;
  font-size: 40px;
  vertical-align: baseline;
}

.component__forecast-box {
  display: flex;
}

.forecast__item {
  flex: 1;
  text-align: center;
}

.forecast-item__heading {
  background: #e68872;
  border: 1px solid #d64826;
  border-left: none;
  text-transform: uppercase;
  color: #fff;
  font-weight: 800;
  padding: 10px;
  margin: 0 auto;
}

.forecast-item__info {
  background: #fff;
  color: #e06b4f;
  padding-bottom: 10px;
  border-right: 1px solid #d64826;
}

.forecast-item__info .wi {
  display: block;
  margin: 0 auto;
  font-size: 24px;
  padding: 15px 0;
}

.forecast-item__info .degrees {
  font-size: 20px;
  line-height: 20px;
}

.forecast-item__info .degrees .wi-degrees {
  display: inline;
}

/* ** ZOOM IMAGE **  */
.zoomA {
  width: 600px;
  height: auto;
  /* ease | ease-in | ease-out | linear */
  transition: transform ease-in-out 0.3s;
}

.zoomA:hover {
  transform: scale(2);
}

.imageZoomCls:hover {
  height: 300px;
  width: 300px;
}

/* ** */
.myGridGallery {
  width: auto;
  flex: 1;
  overflow: auto;
  margin: 10px;
}

.myGridGallery_selector {
  float: left;
  margin: 10px;
  background-color: #d0d0d0;
}

/* ** Report ** */
body {
  /*padding: 20px;*/
  margin: 0;
  font:
    16px/22px "Source Sans Pro",
    Helvetica,
    sans-serif;
  font-size-adjust: none;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  background: #f4f6ec;
  color: #333;
}

.nav-category {
  color: #777;
  font-weight: normal;
  margin-bottom: 0.75em;
}

h1,
h2,
h3 {
  margin: 0;
  padding: 0;
}

.report-output {
  background: white;
  border: 1px solid #ccc;
  height: 600px;
  /*height: 100%;*/
}

.edit-link {
  font-size: 120%;
  margin-bottom: 10px;
}

.jsr-report {
  font-size: 12pt;
}

/* ** codemirror ** */
.breakpoints {
  width: 0.8em;
}

.breakpoint {
  color: #822;
}

.lint-error {
  font-family: arial;
  font-size: 70%;
  background: #ffa;
  color: #a00;
  padding: 2px 5px 3px;
}

.lint-error-icon {
  color: white;
  background-color: red;
  font-weight: bold;
  border-radius: 50%;
  padding: 0 3px;
  margin-right: 7px;
}

.CodeEditor {
  border: 1px solid #aaa;
}

/* ** keypad ** */
.nmpd-grid {
  opacity: 0.9;
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 999999 !important;
  padding: 10px;
  width: initial;
  background-color: white;
  border: 1px solid black;
}

.nmpd-overlay {
  opacity: 0.5;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999998 !important;
  background-color: #000;
}

.nmpd-grid input {
  width: 98%;
  min-height: 40px;
  font-size: 25px;
}

.nmpd-grid button {
  width: 100%;
  min-width: 40px;
  min-height: 40px;
  font-size: 20px;
}

/* ** range wms ** */
.x-slider-range .x-slider-thumb,
.x-slider-range .x-slider-thumb.x-slider-thumb-over,
.x-slider-range .x-slider-thumb.x-slider-thumb-drag {
  cursor: pointer;
  height: 68px;
  width: 25px;
  background-position: 5px;
  background-image: url(/repositorycom/slider-thumb.png);
  z-index: 10000;
}

.x-masked .x-slider-range .x-slider-thumb {
  z-index: 1;
}

.x-slider-range .x-slider-horz,
.x-slider-range .x-slider-horz .x-slider-end,
.x-slider-range .x-slider-horz .x-slider-inner {
  height: 28px;

  background-image: none;
  background-color: #eee;
  text-align: center;
}

.x-slider-range .x-slider-thumb.x-item-disabled,
.x-slider-range .x-slider-thumb.x-slider-thumb-over.x-item-disabled,
.x-slider-range .x-slider-thumb.x-slider-thumb-drag.x-item-disabled {
  background-position: 8px -25px !important;
  /*background-size: 1px auto;*/
  /*background-image:url(slider-thumb-disabled.png);*/
  cursor: default;
}

.x-slider-range.x-item-disabled .x-slider.x-form-field {
  opacity: 1;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

.x-slider-range .x-slider-range-header-odd,
.x-slider-range .x-slider-range-header-even {
  position: absolute;
  height: 28px;
  line-height: 28px;
  background-color: #eee;
  text-align: center;
  font-weight: bold;
  margin-left: 9px;
  overflow: hidden;
  /*border: 1px red solid;*/
}

.x-slider-range .x-slider-range-header-even {
  background-color: #ccc;
}

/* <!-- ** pos ** --> */
.my_btn .x-btn-inner {
  color: red;
  font-size: 15px;
  font-weight: bold;
}

/* <!-- Gallery --> */
.x-dataview-item.x-item-selected>div {
  transform: scale(1.03);
  transition: ease-in-out 0.2s;
  border: 1px solid red;
}

/* ** ThemeEditor  */
.report-designer-container {
  height: 600px;
  border: 1px solid #aaa;
}

.themeeditor-bordered {
  border: solid 1px red;
}

/* =========================================================
   Pulsanti POS
   - wrap-button: pulsanti generati da DynamicComboButton
   - key-button: pulsanti xtype button e contenitori tastiera
   ========================================================= */
.x-btn.wrap-button,
.x-btn.key-button,
.key-button .x-btn:not(.wrap-button):not(.smarticon-btn):not(.x-btn-text-icon) {
  --key-button-top: #2b87df;
  --key-button-bottom: #1565c0;
  --key-button-border: #125ea8;
  --key-button-text: #fff;
  --key-button-font-size: 34px;
  --key-button-radius: 10px;
  box-sizing: border-box;
  overflow: hidden;
  background-color: var(--key-button-bottom) !important;
  background-image: linear-gradient(180deg,
      var(--key-button-top),
      var(--key-button-bottom)) !important;
  border: 1px solid var(--key-button-border) !important;
  border-radius: var(--key-button-radius);
  box-shadow: 0 3px 7px rgb(0 0 0 / 30%);
  transition:
    filter 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}

.x-btn.wrap-button .x-btn-wrap,
.x-btn.wrap-button .x-btn-button,
.x-btn.wrap-button .x-btn-inner,
.x-btn.key-button .x-btn-wrap,
.x-btn.key-button .x-btn-button,
.x-btn.key-button .x-btn-inner,
.key-button .x-btn:not(.wrap-button):not(.smarticon-btn):not(.x-btn-text-icon) .x-btn-wrap,
.key-button .x-btn:not(.wrap-button):not(.smarticon-btn):not(.x-btn-text-icon) .x-btn-button,
.key-button .x-btn:not(.wrap-button):not(.smarticon-btn):not(.x-btn-text-icon) .x-btn-inner {
  width: 100%;
  height: 100%;
  background: transparent !important;
  border: 0;
}

.x-btn.wrap-button .x-btn-button,
.x-btn.wrap-button .x-btn-inner,
.x-btn.key-button .x-btn-button,
.x-btn.key-button .x-btn-inner,
.key-button .x-btn:not(.wrap-button):not(.smarticon-btn):not(.x-btn-text-icon) .x-btn-button,
.key-button .x-btn:not(.wrap-button):not(.smarticon-btn):not(.x-btn-text-icon) .x-btn-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.x-btn.wrap-button .x-btn-inner,
.x-btn.key-button .x-btn-inner,
.key-button .x-btn:not(.wrap-button):not(.smarticon-btn):not(.x-btn-text-icon) .x-btn-inner {
  overflow: hidden;
  padding: 5px 10px;
  color: var(--key-button-text) !important;
  font-size: var(--key-button-font-size);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
}

.x-btn.wrap-button.x-btn-over,
.x-btn.key-button.x-btn-over,
.key-button .x-btn:not(.wrap-button):not(.smarticon-btn):not(.x-btn-text-icon).x-btn-over {
  filter: brightness(1.1);
  box-shadow: 0 5px 10px rgb(0 0 0 / 35%);
  transform: translateY(-1px);
}

.x-btn.wrap-button.x-btn-pressed,
.x-btn.key-button.x-btn-pressed,
.key-button .x-btn:not(.wrap-button):not(.smarticon-btn):not(.x-btn-text-icon).x-btn-pressed {
  filter: brightness(0.88);
  box-shadow: inset 0 3px 5px rgb(0 0 0 / 30%);
  transform: translateY(1px);
}

.x-btn.wrap-button.x-item-disabled,
.x-btn.key-button.x-item-disabled,
.key-button .x-btn:not(.wrap-button):not(.smarticon-btn):not(.x-btn-text-icon).x-item-disabled {
  filter: grayscale(0.35);
  opacity: 0.55;
  box-shadow: none;
  transform: none;
}

.x-btn.wrap-button.color-field-button {
  --key-button-font-size: 18px;
}

.x-btn.key-button,
.key-button .x-btn:not(.wrap-button):not(.smarticon-btn):not(.x-btn-text-icon) {
  --key-button-font-size: 18px;
  --key-button-radius: 6px;
}

.x-btn.color1-button {
  --key-button-top: #2b87df;
  --key-button-bottom: #1565c0;
  --key-button-border: #125ea8;
}

.x-btn.color2-button {
  --key-button-top: #ef5350;
  --key-button-bottom: #c62828;
  --key-button-border: #9f1f1f;
}

.x-btn.color3-button {
  --key-button-top: #43a047;
  --key-button-bottom: #237c28;
  --key-button-border: #1b631f;
}

.x-btn.color4-button {
  --key-button-top: #ffd740;
  --key-button-bottom: #dcae00;
  --key-button-border: #ad8900;
  --key-button-text: #222;
}

.x-btn.color5-button {
  --key-button-top: #424242;
  --key-button-bottom: #111;
  --key-button-border: #000;
}

.x-btn.color6-button {
  --key-button-top: #ffad33;
  --key-button-bottom: #e07800;
  --key-button-border: #b55f00;
  --key-button-text: #222;
}

.x-btn.color7-button {
  --key-button-top: #a5a52c;
  --key-button-bottom: #707000;
  --key-button-border: #565600;
}

.x-btn.color8-button {
  --key-button-top: #9c4dcc;
  --key-button-bottom: #6a1b9a;
  --key-button-border: #4f1375;
}

.x-btn.color9-button {
  --key-button-top: #a0522d;
  --key-button-bottom: #7a3815;
  --key-button-border: #5c290e;
}

/* FlowDesigner */

/*ROTATION*/
.rotate {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.rhombus-button {
  background-color: #007bff;
  /* Button background color */
  transform: rotate(45deg);
  /* Rotate the square button to make it a rhombus */
  border: none;
  color: white;
  /* Button text color */
}

.parallelogram-button {
  background-color: #007bff;
  /* Button background color */
  color: white;
  /* Button text color */
  border: none;
  transform: skewX(-20deg);
  /* Skew the button horizontally to create a parallelogram */
}

/* SPOTLight */
.x-spotlight {
  background-color: #ccc;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  -moz-opacity: 0.5;
  opacity: 0.5;
  filter: alpha(opacity=50);
  width: 0;
  height: 0;
  zoom: 1;
}

/* TESTO TITOLO — caso UI "default" */
.custom-window-content .x-window-header .x-window-header-title-default .x-title-text,
.custom-window-content .x-window-header .x-window-header-title-default .x-title-text-default {
  color: #fff !important;
}

/* TESTO TITOLO — copri anche le UI personalizzate (es. x-window-header-title-violet, …) */
.custom-window-content .x-window-header [class^="x-window-header-title-"] .x-title-text,
.custom-window-content .x-window-header [class^="x-window-header-title-"] .x-title-text-default {
  color: #fff !important;
}

/* =========================================================
   ICONS (interno del bottone)
   ========================================================= */

.smarticon-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 8px;
  box-sizing: border-box;
}

.smarticon-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.smarticon-inner>*:first-child {
  transform-origin: center center;
  transition: transform 0.2s ease-out;
}

.smarticon-label {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 500;
  font-family: sans-serif;
  color: #222;
  text-align: center;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.smarticon-wrapper>* {
  transform-origin: center center;
  transition: transform 0.2s ease-out;
}

/* ExtJS Fix */
.x-tree-icon-custom {
  background-image: none !important;
  display: inline-block !important;
}

/* Layout helper */
.device-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
}

#FloatingAppImg.FloatingAppImg {
  position: fixed;
  top: unset !important;
  right: 0 !important;
  left: unset !important;
  bottom: 0 !important;
}

#FloatingAppImg {
  background-color: white;
  box-shadow:
    rgba(64, 64, 64, 0.16) 3px 3px 6px,
    rgba(64, 64, 64, 0.23) 3px 3px 6px;
  border-radius: 5px;
}

#FloatingAppImg {
  box-shadow:
    rgba(64, 64, 64, 0.16) 3px 3px 6px,
    rgba(64, 64, 64, 0.23) 3px 3px 6px;
  border-radius: 2px;
}

body:has(#FloatingAppImg)>#ext-element-5 {
  display: none !important;
}

#FloatingAppImg.FloatingAppImg,
body:has(#FloatingAppImg)>#ext-element-5 {
  position: fixed;
  top: unset !important;
  right: 0 !important;
  left: unset !important;
  bottom: 0 !important;
}

.x-datepicker-timeTable {
  width: 100%;
  table-layout: fixed;
  margin: 6px 0 0 0;
}

.x-datepicker-timeCell {
  text-align: center;
  width: 48%;
}

.x-datepicker-timeSep {
  text-align: center;
  width: 10%;
}

.x-datepicker-timeCell .x-form-item,
.x-datepicker-timeCell .x-form-trigger-wrap {
  margin: 0 auto;
  width: 70px;
  /* o 60px se ti basta */
}

/* FIX JsReport Viewer */
.jsr-content-viewport,
.report-output.jsr-report.jsr-style-root {
  height: 100% !important;
}

.monaco-editor .button,
.monaco-editor .button.toggle {
  background: unset;
  box-shadow: unset;
}

/* LOGIN FORM */
/* Contenitore login in stile "material" */
.login-card {
  max-width: max(80vw, 700px);
  margin: 0 auto;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  background: #fff;
  border-radius: 12px !important;
}

/* Input più moderni */
.login-card .x-form-field,
.login-card .x-form-text,
.login-card .x-form-field input,
.login-card .x-form-textarea {
  border-radius: 12px !important;
  padding: 14px 12px !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}

/* Label compatta/material-like */
.login-card .x-form-item-label {
  font-weight: 600;
  color: #4a5568;
}

/* Bottoni principali */
.login-card .login-primary-btn .x-btn-inner {
  font-weight: 700;
}

/* Footer fisso (vedi sezione #2) */
.login-footer {
  position: sticky;
  /* fallback desktop/tablet */
  position: -webkit-sticky;
  /* iOS old */
  bottom: 0;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
  z-index: 9999;
  border-radius: 12px !important;
}

/* quando la tastiera è aperta, evitiamo che il form venga coperto */
.login-scroll {
  min-height: 100dvh;
  /* unità che rispetta la tastiera */
  overflow: auto;
  scroll-padding-bottom: 140px;
  /* spazio per i bottoni */
}

/* Touch targets */
.login-card .x-btn-default-large {
  min-height: 48px;
  border-radius: 12px;
}

.login-card .x-btn-default-large.x-btn-plain-primary,
.login-card .x-btn.x-btn-default-toolbar-small {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.login-card #LoginPanel-body {
  border: 0px !important;
}

.login-card .x-form-trigger-wrap.x-form-trigger-wrap-default {
  border-radius: 12px !important;
}

.login-card #login-lable .login-title {
  font-weight: 600 !important;
  text-align: center;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  /* margin: 8px 0 0; */
  font-weight: 800;
  font-size: clamp(20px, 4.5vw, 26px);
  letter-spacing: 0.2px;
}

.login-sep {
  border: 0;
  height: 1px;
  width: 75%;
  margin: auto;
  background: rgba(0, 0, 0, 0.08);
}

.login-card .btn-outline {
  background: transparent;
  border: 1px solid rgba(50, 121, 172, 0.8);
}

.login-card .btn-outline .x-btn-inner {
  font-weight: 600;
  color: rgb(50, 121, 172) !important;
}

#westViewPortId_header-title-textEl {
  font-weight: 600;
  padding-left: 1vw;
}

#MenuButton-innerCt a[role="button"] span.x-btn-button.x-btn-button-default-large.x-btn-text.x-btn-icon {
  justify-self: center;
  align-self: center;
}

.monaco-editor .overflowingContentWidgets,
.monaco-editor .overflowingWidgets,
.monaco-hover,
.overflowingContentWidgets [widgetid="editor.contrib.resizableContentHoverWidget"] {
  z-index: 99999 !important;
}

/* Gantt */
.sch-timelinepanel .x-grid-item-container>table.x-grid-item {
  width: 100% !important;
}

.sch-gantt-task-bar .sch-gantt-progress-bar {
  background-color: transparent !important;
}

.sch-ganttview,
.sch-item-canvas {
  background-color: #ffffff !important;
}

.dynamicgantt .x-grid-locking-body .x-grid-body,
.dynamicgantt .x-grid-locking-body .x-grid-body {
  background: transparent !important;
  background-color: transparent !important;
  border-width: 0 !important;
}

/* TOOLBAR  BAR RECORD FORM */
.fa-save::before {
  color: #218c1b !important;
}

.fa-trash::before {
  color: #a72c2c !important;
}

.fa-trash:hover {
  background-color: transparent !important;
  color: #e5ff00 !important;
  font-size: 19px !important;
}

.fa-circle:hover {
  background-color: transparent !important;
}

.fa-check-circle:hover {
  background-color: transparent !important;
}

.fa-check {
  color: #04b00d !important;
}

.fa-xmark {
  color: #c10b0b !important;
}

.fa-circle-xmark {
  color: #c10b0b !important;
}

.fa-check:hover {
  background-color: transparent !important;
}

/* =========================================================
   Smart Icon base
   ========================================================= */
.smarticon-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 8px;
  box-sizing: border-box;
}

.smarticon-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.smarticon-inner>*:first-child {
  transform-origin: center center;
  transition: transform 0.2s ease-out;
}

.smarticon-label {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 500;
  font-family: sans-serif;
  color: #222;
  text-align: center;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* =========================
  SHADOWS CHS
   ========================= */
.north-region,
#westViewPortId,
.x-window {
  box-shadow:
    rgba(64, 64, 64, 0.16) 3px 3px 6px,
    rgba(64, 64, 64, 0.23) 3px 3px 6px;
  z-index: 101;
}

/* =========================
  FIELD TONDI CHS
   ========================= */
:not(.x-grid-filterbar) .x-form-trigger-wrap-default {
  border-radius: 10px !important;
  color: #494848;
}

:not(.x-grid-filterbar) .x-form-trigger-default {
  border-radius: 10px !important;
  color: #39a1cf;
}

:not(.x-grid-filterbar) .x-form-text {
  border-radius: 10px !important;
  color: #050505;
}

.x-grid-filterbar input.x-form-text {
  border-radius: 0px !important;
}

.custom-menucombo-db {
  font-size: 27pt !important;
  right: 0px !important;
  color: #000000 !important;
  background-color: transparent !important;
  border-width: 4px !important;
  border-color: #ffffff !important;
}

/* così non gestisce il disabled
.fa-folder-open::before {
    color: #e6b93ef4 !important;
}
*/
.fa-asterisk::before {
  color: #4487c5 !important;
}

/* così non gestisce il disabled
.fa-clone::before {
    color: #ff9a0d !important;
}
*/
.fa-file-excel::before {
  color: #268551 !important;
}

.fa-file-pdf::before {
  color: #b91818 !important;
}

/* ** readonly ** */
.app-readonly-field {
  background-color: #f5f5f5 !important;
  color: #333 !important;
  font-weight: 400;
}

/* =========================
   DynamicComboButton mappa contatori CHS
   ========================= */
.x-btn.smarticon-btn {
  background: transparent;
  background-image: none;
  border: none;
  border-color: transparent;
  box-shadow: none;
  overflow: hidden;
  padding: 0;
}

.x-btn.smarticon-btn .x-btn-wrap,
.x-btn.smarticon-btn .x-btn-button,
.x-btn.smarticon-btn .x-btn-el,
.x-btn.smarticon-btn .x-btn-inner {
  background: transparent;
  background-image: none;
  border: 0;
  padding: 0;
}

.x-btn.smarticon-btn .x-btn-inner {
  line-height: 0;
}

.x-btn.smarticon-btn .x-btn-button,
.x-btn.smarticon-btn .x-btn-inner {
  width: 100%;
  height: 100%;
}

.x-btn.smarticon-btn .x-btn-inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

/* =========================
   CHS MENU ICONS
   ========================= */

.x-treelist-row .x-treelist-item-icon.x-icon-chs {
  background: url("/repositorycom/icon-CHS.svg") no-repeat center center;
  background-size: 30px 30px;
  width: 40px;
  height: 40px;
}

.x-treelist-row .x-treelist-item-icon.x-icon-cha {
  background: url("/repositorycom/icon-CHA.svg") no-repeat center center;
  background-size: 30px 30px;
  width: 40px;
  height: 40px;
}

.x-treelist-row .x-treelist-item-icon.x-icon-chc {
  background: url("/repositorycom/icon-CHC.svg") no-repeat center center;
  background-size: 30px 30px;
  width: 40px;
  height: 40px;
}

.x-treelist-row .x-treelist-item-icon.x-icon-chd {
  background: url("/repositorycom/icon-CHD.svg") no-repeat center center;
  background-size: 30px 30px;
  width: 40px;
  height: 40px;
}

.x-treelist-row .x-treelist-item-icon.x-icon-chp {
  background: url("/repositorycom/icon-CHP.svg") no-repeat center center;
  background-size: 30px 30px;
  width: 40px;
  height: 40px;
}

/* =========================
   Radiator
   ========================= */
.radiator {
  width: 220px;
  height: 80px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f3f5f7, #dfe4ea);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.6),
    inset 0 -2px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  position: relative;
}

.radiator .columns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  height: 80%;
}

.radiator .col {
  width: 18px;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(180deg, #fafafa, #d4d8de);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.8),
    inset 0 -2px 2px rgba(0, 0, 0, 0.15);
}

.radiator .pipe {
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, #ccc, #999, #ccc);
}

.radiator .valve {
  position: absolute;
  top: 10px;
  right: -18px;
  width: 16px;
  height: 40px;
  border-radius: 4px;
  background: linear-gradient(90deg, #dcdfe2, #aeb5bb);
}

.radiator .ripartitore {
  position: absolute;
  left: 50%;
  top: 35%;
  width: 40px;
  height: 60px;
  transform: translate(-50%, -50%);
  background: #e9ecef;
  border-radius: 4px;
}

.radiator .ripartitore .display {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 25px;
  background: #111;
  color: #00ffcc;
  font-size: 10px;
  text-align: center;
  border-radius: 3px;
  font-family: monospace;
  line-height: 18px;
}

.radiator.active .col {
  background: linear-gradient(180deg, #ffe6d1, #ffb86c);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.6),
    inset 0 -2px 2px rgba(255, 128, 0, 0.4);
}

.radiator.active .ripartitore .display {
  background: #222;
  color: #ffbf00;
  text-shadow: 0 0 4px #ffbf00;
}

/* =========================
   Watermeter
   ========================= */
.watermeter {
  position: relative;
  width: 8em;
  height: 8em;
  font-size: 1em;
}

.watermeter .pipe-right {
  position: absolute;
  top: 50%;
  width: 1.5em;
  height: 1em;
  background: linear-gradient(90deg, #999, #ccc);
  border-radius: 0.4em;
  transform: translateY(-50%);
}

.watermeter .pipe-right {
  right: -1.5em;
  background: linear-gradient(90deg, #ccc, #999);
}

.watermeter .body {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #e0e0e0, #9e9e9e 70%, #757575);
  display: flex;
  align-items: center;
  justify-content: center;
}

.watermeter .glass {
  position: relative;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
      #ffffff 10%,
      #e3f2fd 60%,
      #90caf9 90%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.watermeter .counter {
  background: #111;
  border-radius: 0.3em;
  padding: 0.2em 0.4em;
  color: #fff;
  font-family: monospace;
  font-size: 0.9em;
  display: flex;
  justify-content: center;
}

.watermeter .counter span {
  margin: 0 0.05em;
}

.watermeter .indicators {
  width: 100%;
  height: 2em;
  margin-top: 0.3em;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.watermeter .dial {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  border: 0.2em solid #222;
  background: radial-gradient(circle at 30% 30%, #fff, #ccc);
  position: relative;
}

.watermeter .dial::after {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 50%;
  width: 0.15em;
  height: 0.7em;
  background: #000;
  transform-origin: bottom center;
  transition: transform 0.5s ease-out;
  transform: rotate(0deg);
}

.watermeter .dial.red {
  border-color: #c62828;
}

.watermeter .dial.blue {
  border-color: #1565c0;
}

.watermeter.active .dial.red::after {
  animation: rotate-dial-red 1.5s linear infinite;
}

.watermeter.active .dial.blue::after {
  animation: rotate-dial-blue 1.5s linear infinite;
}

/* =========================
   Extinguisher
   ========================= */
.extinguisher {
  position: relative;
  width: 2.5em;
  height: 5em;
  background: linear-gradient(180deg, #ff3b3b, #b30000);
  border-radius: 0.3em 0.3em 0.2em 0.2em;
  box-shadow:
    inset 0 0.1em 0.1em rgba(255, 255, 255, 0.5),
    0 0.25em 0.5em rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 0.6em;
  transition: box-shadow 0.3s ease;
  font-size: 1em;
}

.extinguisher::before {
  content: "";
  position: absolute;
  top: -0.6em;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5em;
  height: 0.3em;
  background: linear-gradient(90deg, #666, #aaa);
  border-radius: 0.15em;
}

.extinguisher::after {
  content: "";
  position: absolute;
  top: 12%;
  left: 100%;
  width: 0.4em;
  height: 1.5em;
  background: linear-gradient(180deg, #666, #999);
  border-radius: 0.2em;
  transform: rotate(20deg);
}

.extinguisher .label {
  width: 60%;
  height: 0.9em;
  background: #fff;
  color: #b30000;
  text-align: center;
  font-weight: bold;
  font-size: 0.55em;
  border-radius: 0.2em;
  line-height: 0.9em;
  margin-bottom: 0.4em;
}

.extinguisher .display {
  width: 60%;
  height: 1em;
  background: #111;
  color: #00ffcc;
  font-family: monospace;
  font-size: 0.6em;
  text-align: center;
  border-radius: 0.2em;
  line-height: 1em;
  margin-top: auto;
  margin-bottom: 0.4em;
}

.extinguisher.active {
  box-shadow: 0 0 0.5em 0.2em rgba(255, 0, 0, 0.6);
  animation: pulse-red 1s infinite alternate;
}

@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0.3em 0.1em rgba(255, 0, 0, 0.4);
  }

  100% {
    box-shadow: 0 0 0.6em 0.3em rgba(255, 0, 0, 0.8);
  }
}

/* =========================
   Switch
   ========================= */
.switch {
  width: 50px;
  height: 30px;
  border-radius: 15px;
  background: #ccc;
  display: flex;
  align-items: center;
  padding: 2px;
  transition: background 0.3s;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.5),
    inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

.switch .switch-knob {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s;
}

.switch.active {
  background: #4cd964;
}

.switch.active .switch-knob {
  transform: translateX(20px);
}

/* =========================
   Bulb
   ========================= */
.bulb {
  width: 50px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

.bulb-glass {
  width: 40px;
  height: 50px;
  background: radial-gradient(circle at 50% 40%, #f9f9f9, #dcdcdc 70%);
  border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
  position: relative;
  box-shadow: inset 0 -3px 8px rgba(0, 0, 0, 0.15);
  transition:
    background 0.3s,
    box-shadow 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bulb-glass .filament {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #cc8b00;
  position: relative;
}

.bulb-glass .filament::before,
.bulb-glass .filament::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 8px;
  background: #cc8b00;
  top: 100%;
}

.bulb-glass .filament::before {
  left: 3px;
}

.bulb-glass .filament::after {
  right: 3px;
}

.bulb-neck {
  width: 18px;
  height: 8px;
  background: linear-gradient(180deg, #999, #666);
  border-radius: 4px;
  margin-top: 2px;
}

.bulb-base {
  width: 24px;
  height: 12px;
  background: repeating-linear-gradient(90deg,
      #666 0px,
      #888 4px,
      #555 4px,
      #777 8px);
  border-radius: 3px;
  margin-top: 2px;
}

.bulb.active .bulb-glass {
  background: radial-gradient(circle at 50% 40%, #fffec0, #ffd700 70%);
  box-shadow: 0 0 20px 6px rgba(255, 240, 150, 0.8);
}

.bulb.active .filament {
  border-color: #ffae00;
  background: radial-gradient(circle, #ffcc00 40%, transparent 60%);
  box-shadow: 0 0 10px 2px rgba(255, 200, 0, 0.7);
}

/* =========================
   Button
   ========================= */
.button {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 50%;
  background: linear-gradient(180deg, #f5f5f5, #ccc);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.8),
    0 4px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.button .button-face {
  font-size: 0.8em;
  color: #222;
  font-weight: bold;
  text-transform: uppercase;
  font-family: sans-serif;
}

.button:active,
.button.active {
  background: linear-gradient(180deg, #ccc, #888);
  box-shadow:
    inset 0 3px 4px rgba(0, 0, 0, 0.3),
    0 1px 1px rgba(255, 255, 255, 0.6);
  transform: translateY(2px);
}

/* =========================
   Gas meter
   ========================= */
.gasmeter {
  width: 7em;
  height: 6em;
  font-size: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gasmeter .gas-body {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #e0e0e0, #bbb);
  border-radius: 0.5em;
  box-shadow:
    inset 0 0.2em 0.4em rgba(255, 255, 255, 0.5),
    inset 0 -0.2em 0.4em rgba(0, 0, 0, 0.1);
  padding: 0.5em;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.gasmeter .gas-display {
  background: #fff;
  color: #000;
  font-family: monospace;
  font-size: 1em;
  padding: 0.2em 0.4em;
  border-radius: 0.3em;
  box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
}

.gasmeter .gas-display span {
  margin: 0 0.05em;
}

.gasmeter .gas-label {
  margin-top: 0.4em;
  font-size: 0.7em;
  font-weight: bold;
  color: #444;
}

.gasmeter.active .gas-body {
  box-shadow: 0 0 0.6em 0.2em rgba(255, 165, 0, 0.5);
  background: linear-gradient(180deg, #fff1e0, #ffc180);
}

/* =========================
   Energy meter
   ========================= */
.energymeter {
  width: 7em;
  height: 5em;
  font-size: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f0f0f0, #c0c0c0);
  border-radius: 0.5em;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    inset 0 -2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 0.5em;
  box-sizing: border-box;
}

.energymeter .energy-display {
  background: #111;
  color: #0f0;
  font-family: monospace;
  font-size: 1.2em;
  padding: 0.3em 0.6em;
  border-radius: 0.3em;
  box-shadow: inset 0 0 0.3em rgba(0, 255, 0, 0.3);
  display: flex;
  align-items: baseline;
  gap: 0.3em;
}

.energymeter .energy-display .digits span {
  display: inline-block;
  margin: 0 1px;
}

.energymeter .energy-display .unit {
  font-size: 0.6em;
  color: #0f0;
  opacity: 0.8;
}

.energymeter .led-indicator {
  margin-top: 0.6em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #444;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.4);
  transition:
    background 0.3s,
    box-shadow 0.3s;
}

.energymeter.active .led-indicator {
  background: #00ff00;
  box-shadow: 0 0 6px 2px rgba(0, 255, 0, 0.6);
}

/* =========================
   Lifter
   ========================= */
.lifter {
  width: 60px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 1em;
}

.lift-shaft {
  width: 100%;
  height: 100%;
  border: 2px solid #555;
  border-radius: 6px;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
  background: linear-gradient(180deg, #dcdcdc, #b0b0b0);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 8px;
  box-sizing: border-box;
}

.lift-doors {
  position: relative;
  width: 80%;
  height: 60%;
  display: flex;
  justify-content: space-between;
}

.lift-doors .door {
  width: 48%;
  height: 100%;
  background: linear-gradient(180deg, #999, #666);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.5),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.5s ease;
}

.lift-doors .door.left {
  transform-origin: left;
}

.lift-doors .door.right {
  transform-origin: right;
}

.lifter.active .door.left {
  transform: translateX(-100%);
}

.lifter.active .door.right {
  transform: translateX(100%);
}

.lift-display {
  position: absolute;
  top: 6px;
  width: 70%;
  height: 16px;
  background: #111;
  color: #00ffcc;
  text-align: center;
  font-size: 0.8em;
  line-height: 16px;
  font-family: monospace;
  border-radius: 3px;
  box-shadow: inset 0 0 2px rgba(0, 255, 255, 0.3);
}

/* =========================
   Door opener
   ========================= */
.dooropener {
  width: 3em;
  height: 5em;
  font-size: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.door-frame {
  width: 100%;
  height: 100%;
  border: 0.2em solid #444;
  border-radius: 0.3em;
  box-sizing: border-box;
  position: relative;
  background: #ccc;
}

.door-leaf {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #a0522d, #8b4513);
  border-radius: 0.2em;
  transform-origin: left center;
  transition: transform 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dooropener.active .door-leaf {
  transform: rotateY(-70deg);
}

.door-label {
  color: #fffbe6;
  font-size: 0.7em;
  font-weight: bold;
  font-family: sans-serif;
  text-align: center;
  pointer-events: none;
  margin-top: 7%;
  align-self: self-start;
}

.handle {
  position: absolute;
  right: 0.4em;
  top: 50%;
  width: 0.4em;
  height: 0.4em;
  background: #eee;
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
}

/* =========================
   Lock
   ========================= */
.lock {
  width: 50px;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

.lock-body {
  width: 40px;
  height: 40px;
  background: linear-gradient(180deg, #e0e0e0, #999);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.7),
    inset 0 -1px 2px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.lock-shackle {
  position: absolute;
  top: 0;
  width: 30px;
  height: 24px;
  border: 4px solid #888;
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  background: transparent;
  transition: transform 0.4s ease;
}

.lock .keyhole {
  width: 6px;
  height: 10px;
  background: #222;
  border-radius: 3px 3px 50% 50%;
  position: relative;
}

.lock.active .lock-shackle {
  transform: rotate(-25deg) translateY(-5px);
}

.lock.active .lock-body {
  background: linear-gradient(180deg, #ffe0a3, #e6a200);
  box-shadow: 0 0 10px 3px rgba(255, 180, 0, 0.6);
}

/* =========================
   Plug
   ========================= */
.plug {
  width: 40px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}

.plug-body {
  width: 28px;
  height: 28px;
  background: linear-gradient(180deg, #bbb, #777);
  border-radius: 5px;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  position: relative;
  z-index: 2;
}

.plug .prong {
  width: 4px;
  height: 10px;
  background: #ccc;
  border-radius: 1px;
}

.plug .cable {
  width: 6px;
  height: 30px;
  background: linear-gradient(180deg, #444, #222);
  border-radius: 3px;
  margin-top: -3px;
  z-index: 1;
}

.plug.active .plug-body {
  background: linear-gradient(180deg, #90ee90, #3fa43f);
  box-shadow: 0 0 10px 4px rgba(80, 255, 80, 0.6);
}

.plug.active .cable {
  background: linear-gradient(180deg, #3fa43f, #0a740a);
}

/* =========================
   Fan
   ========================= */
.fan {
  width: 80px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

.fan-stand {
  width: 14px;
  height: 50px;
  background: linear-gradient(180deg, #999, #666);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.3);
}

.fan-body {
  position: absolute;
  top: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #f8f8f8, #b0b0b0 70%);
  box-shadow:
    inset 0 3px 6px rgba(255, 255, 255, 0.8),
    0 4px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fan-grill {
  position: relative;
  width: 88%;
  height: 88%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #ddd 20%, #aaa 100%);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fan-grill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-radial-gradient(circle,
      transparent 0px,
      transparent 6px,
      rgba(0, 0, 0, 0.05) 7px,
      rgba(0, 0, 0, 0.05) 8px);
  z-index: 2;
}

.fan-blades {
  position: absolute;
  width: 60%;
  height: 60%;
  transform: translate(-11%, -59%) rotate(0deg);
  transform-origin: center center;
}

.fan-blades .blade {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 28px;
  border-radius: 10px;
  background: linear-gradient(180deg, #d0d0d0, #999);
  transform-origin: center 90%;
  opacity: 0.95;
}

.fan-blades .blade:nth-child(1) {
  transform: rotate(0deg);
}

.fan-blades .blade:nth-child(2) {
  transform: rotate(90deg);
}

.fan-blades .blade:nth-child(3) {
  transform: rotate(180deg);
}

.fan-blades .blade:nth-child(4) {
  transform: rotate(270deg);
}

.fan-center {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #777 0%, #444 90%);
  z-index: 3;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

@keyframes spin-smooth {
  from {
    transform: translate(-11%, -59%) rotate(0deg);
  }

  to {
    transform: translate(-11%, -59%) rotate(360deg);
  }
}

.fan.active .fan-blades {
  animation: spin-smooth 0.5s linear infinite;
}

.fan.active .fan-body {
  box-shadow:
    0 0 18px 5px rgba(135, 206, 250, 0.6),
    inset 0 2px 4px rgba(255, 255, 255, 0.8);
  background: radial-gradient(circle at 50% 30%, #e0ffff, #a0e0ff 70%);
}

.fan.active .fan-center {
  background: radial-gradient(circle, #66ccff 0%, #004488 100%);
  box-shadow: 0 0 6px 3px rgba(135, 206, 250, 0.8);
}

/* =========================
   Air conditioner
   ========================= */
.airconditioner {
  width: 80px;
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}

.airconditioner .ac-body {
  width: 100%;
  height: 30px;
  border-radius: 6px;
  background: linear-gradient(180deg, #f0f0f0, #c8c8c8);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.7),
    inset 0 -2px 2px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 3px;
  box-sizing: border-box;
}

.airconditioner .ac-display {
  font-family: monospace;
  font-size: 0.7em;
  background: #222;
  color: #00ffcc;
  border-radius: 2px;
  padding: 1px 4px;
}

.airconditioner .ac-vents {
  display: flex;
  justify-content: space-between;
  width: 80%;
}

.airconditioner .ac-vents .vent {
  width: 20%;
  height: 3px;
  background: #777;
  border-radius: 2px;
}

.airconditioner .ac-airflow {
  display: none;
  position: relative;
  width: 100%;
  height: 20px;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
}

.airconditioner .ac-airflow span {
  width: 3px;
  height: 12px;
  background: rgba(173, 216, 230, 0.6);
  border-radius: 3px;
  opacity: 0;
  animation: air-flow 2s infinite;
}

.airconditioner .ac-airflow span:nth-child(1) {
  animation-delay: 0s;
}

.airconditioner .ac-airflow span:nth-child(2) {
  animation-delay: 0.4s;
}

.airconditioner .ac-airflow span:nth-child(3) {
  animation-delay: 0.8s;
}

@keyframes air-flow {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    transform: translateY(12px);
    opacity: 0;
  }
}

.airconditioner.active .ac-airflow {
  display: flex;
}

.airconditioner.active .ac-airflow span {
  background: rgba(135, 206, 250, 0.8);
}

.airconditioner.active .ac-body {
  background: linear-gradient(180deg, #e8ffff, #b0e0e6);
  box-shadow: 0 0 10px 3px rgba(135, 206, 250, 0.5);
}

.topbar-circle-btn .badgeText,
.topbar-circle-btn .topbar-btn-badge {
  pointer-events: none;
}

.introjs-fixParent {
  z-index: 99997 !important;
  opacity: 1 !important;
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  -o-transform: none !important;
  transform: none !important;
}

.dynamicgrid-trend-cell .x-grid-cell-inner {
  padding-top: 4px;
  padding-bottom: 4px;
  text-align: center;
}

.dynamicgrid-trend {
  display: inline-block;
  vertical-align: middle;
}

.dynamicgrid-trend-up {
  color: #2f8f46;
}

.dynamicgrid-trend-down {
  color: #c0392b;
}

.dynamicgrid-trend-flat {
  color: #666;
}

#options-toolbar {
  left: 100%;
}

/* Material login */
.material-login-window {
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow:
    0 18px 50px rgba(15, 23, 42, 0.22),
    0 6px 18px rgba(15, 23, 42, 0.12) !important;
}

.material-login-window .x-window-body,
.material-login-window {
  background:
    radial-gradient(circle at top right,
      rgba(63, 81, 181, 0.12),
      transparent 38%),
    linear-gradient(145deg, #ffffff 0%, #f7f8fc 100%) !important;
}

.material-login-card {
  background: transparent;
}

.material-login-card .x-panel-body {
  background: transparent;
}

.material-login-header {
  margin-bottom: 22px;
  text-align: center;
}

.material-login-logo {
  width: 72px;
  height: 72px;
  margin-bottom: 16px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3f51b5, #6573c3);
  box-shadow: 0 10px 24px rgba(63, 81, 181, 0.28);
  color: #fff;
  font-size: 30px;
}

.material-login-title {
  color: #202124;
  font-size: 27px;
  line-height: 34px;
  font-weight: 700;
}

.material-login-subtitle {
  margin-top: 4px;
  color: #6b7280;
  font-size: 14px;
}

.material-login-field {
  margin-bottom: 10px;
}

.material-login-field .x-form-item-label-text {
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
}

.material-login-field .x-form-trigger-wrap {
  min-height: 44px;
  border: 1px solid #d7dce3;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background-color 140ms ease;
}

.material-login-field .x-form-trigger-wrap-focus {
  border-color: #3f51b5;
  box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.14);
}

.material-login-field .x-form-text {
  min-height: 42px;
  padding: 0 13px;
  color: #202124;
  font-size: 15px;
  background: transparent;
}

.material-login-field .x-form-empty-field {
  color: #9ca3af;
}

.material-login-button {
  border: 0;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #3f51b5, #5264c7);
  box-shadow: 0 7px 18px rgba(63, 81, 181, 0.3);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    filter 120ms ease;
}

.material-login-button.x-btn-over {
  filter: brightness(1.05);
  box-shadow: 0 10px 22px rgba(63, 81, 181, 0.35);
}

.material-login-button.x-btn-pressed {
  transform: translateY(1px);
  box-shadow: 0 4px 10px rgba(63, 81, 181, 0.24);
}

.material-login-button .x-btn-inner,
.material-login-button .x-btn-icon-el {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.material-login-reset {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.material-login-reset .x-btn-inner {
  color: #3f51b5;
  font-size: 13px;
  font-weight: 600;
}

.material-login-reset.x-btn-over {
  background: rgba(63, 81, 181, 0.07);
  border-radius: 8px;
}

@media (max-width: 600px) {
  .material-login-window {
    border-radius: 0;
    box-shadow: none;
  }

  .material-login-card {
    padding-top: max(24px, env(safe-area-inset-top));
  }

  .material-login-logo {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    font-size: 27px;
  }

  .material-login-title {
    font-size: 24px;
  }
}

/* ============================================================================
 * FIX B — CSS ONLY (no JavaScript override at all)
 * Toolkit : Classic   |   Ext JS 8.0.0
 *
 * HOW TO TEST THIS FIX:
 *   Paste this into the fiddle's CSS tab and leave app.js as the ORIGINAL,
 *   UNMODIFIED customer code (use FIX-B-original-app.js). Do NOT combine
 *   this with Fix A — test them one at a time so we know which one worked.
 *
 * THEORY THIS FIX TESTS:
 *   Column layout renders its children as FLOATED elements inside an inner
 *   container (.x-column-layout-ct). A float wraps to the next line the
 *   moment the row's total width exceeds the container's content width by
 *   even a fraction of a pixel. The customer's outer row is two fieldsets at
 *   columnWidth 0.50 + 0.50 = exactly 1.0, i.e. zero slack. At fractional
 *   effective zoom (OS display scaling and/or browser zoom), sub-pixel
 *   rounding can push that row a fraction over the edge and the second
 *   fieldset drops below the first.
 *
 * WHAT THIS FIX DOES:
 *   Gives the float container a few extra pixels of room, so a row can never
 *   run out of space by a sub-pixel amount. It does NOT change any child
 *   widths, so the layout is visually identical apart from a few pixels of
 *   slack on the right edge.
 *
 * WHY THIS IS WORTH TESTING SEPARATELY FROM FIX A:
 *   It requires no framework override at all. One live possibility is that
 *   the JS override simply is not being applied in this environment (which
 *   would explain why the last attempt produced no visible change whatever).
 *   This fix cannot fail for that reason, so it isolates that variable.
 *
 * IMPORTANT CAVEAT (please report back on this):
 *   !important is required here because Ext sets sizing on this element
 *   inline at layout time. If Ext assigns an explicit inline pixel width to
 *   the inner container in 8.0.0, the calc() rule below is the one that will
 *   take effect; if it instead leaves the width auto, the negative-margin
 *   variant at the bottom is the gentler option. Try RULE 1 first.
 * ==========================================================================*/

/* ---------------------------------------------------------------------------
 * RULE 1 (try this first): widen the column layout's float container so a row
 * of floats always has a few px of headroom.
 * If 4px is not enough, raise it to 6px or 8px and retest — please tell us
 * the smallest value that works, it tells us how much sub-pixel drift the
 * browser is actually introducing at 175% scaling.
 * -------------------------------------------------------------------------*/
.x-column-layout-ct {
  width: calc(100% + 4px) !important;
}

/* ---------------------------------------------------------------------------
 * RULE 2: keep the extra width from ever producing a stray scrollbar or a
 * visible overhang on the containing panel/fieldset.
 * -------------------------------------------------------------------------*/
.x-panel-body,
.x-fieldset-body {
  overflow-x: hidden;
}

/* ---------------------------------------------------------------------------
 * ALTERNATIVE to RULE 1 — only try this if RULE 1 has no effect.
 * Comment out RULE 1 above and uncomment this instead. A negative right
 * margin widens a normal-flow block box without setting an explicit width,
 * which works in the case where Ext leaves the inner container width auto.
 * -------------------------------------------------------------------------*/
/*
.x-column-layout-ct {
    margin-right: -4px !important;
}
*/

/* ---------------------------------------------------------------------------
 * NOTE ON THE CUSTOMER'S EXISTING CSS
 * The reported stylesheet forces:
 *     .x-fieldset { position: relative !important; overflow: hidden; }
 * That is not the cause of this bug, but it does fight the framework's own
 * fieldset positioning and can confuse testing. Please run this fix ONCE
 * with that block removed, so we get a clean signal.
 * -------------------------------------------------------------------------*/