/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/ngx-toastr/toastr.css ***!
  \****************************************************************************************************************************************************************************************************************************/
/* based on angular-toastr css https://github.com/Foxandxss/angular-toastr/blob/cb508fe6801d6b288d3afc525bb40fee1b101650/dist/angular-toastr.css */

/* position */
.toast-center-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.toast-top-center {
  top: 0;
  right: 0;
  width: 100%;
}
.toast-bottom-center {
  bottom: 0;
  right: 0;
  width: 100%;
}
.toast-top-full-width {
  top: 0;
  right: 0;
  width: 100%;
}
.toast-bottom-full-width {
  bottom: 0;
  right: 0;
  width: 100%;
}
.toast-top-left {
  top: 12px;
  left: 12px;
}
.toast-top-right {
  top: 12px;
  right: 12px;
}
.toast-bottom-right {
  right: 12px;
  bottom: 12px;
}
.toast-bottom-left {
  bottom: 12px;
  left: 12px;
}

/* toast styles */
.toast-title {
  font-weight: bold;
}
.toast-message {
  word-wrap: break-word;
}
.toast-message a,
.toast-message label {
  color: #FFFFFF;
}
.toast-message a:hover {
  color: #CCCCCC;
  text-decoration: none;
}
.toast-close-button {
  position: relative;
  right: -0.3em;
  top: -0.3em;
  float: right;
  font-size: 20px;
  font-weight: bold;
  color: #FFFFFF;
  text-shadow: 0 1px 0 #ffffff;
  /* opacity: 0.8; */
}
.toast-close-button:hover,
.toast-close-button:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
}
/*Additional properties for button version
 iOS requires the button element instead of an anchor tag.
 If you want the anchor version, it requires `href="#"`.*/
button.toast-close-button {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.toast-container {
  pointer-events: none;
  position: fixed;
  z-index: 999999;
}
.toast-container * {
  box-sizing: border-box;
}
.toast-container .ngx-toastr {
  position: relative;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 15px 15px 15px 50px;
  width: 300px;
  border-radius: 3px 3px 3px 3px;
  background-position: 15px center;
  background-repeat: no-repeat;
  background-size: 24px;
  box-shadow: 0 0 12px #999999;
  color: #FFFFFF;
}
.toast-container .ngx-toastr:hover {
  box-shadow: 0 0 12px #000000;
  opacity: 1;
  cursor: pointer;
}
/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/info-circle.svg */
.toast-info {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTI1NiA4QzExOS4wNDMgOCA4IDExOS4wODMgOCAyNTZjMCAxMzYuOTk3IDExMS4wNDMgMjQ4IDI0OCAyNDhzMjQ4LTExMS4wMDMgMjQ4LTI0OEM1MDQgMTE5LjA4MyAzOTIuOTU3IDggMjU2IDh6bTAgMTEwYzIzLjE5NiAwIDQyIDE4LjgwNCA0MiA0MnMtMTguODA0IDQyLTQyIDQyLTQyLTE4LjgwNC00Mi00MiAxOC44MDQtNDIgNDItNDJ6bTU2IDI1NGMwIDYuNjI3LTUuMzczIDEyLTEyIDEyaC04OGMtNi42MjcgMC0xMi01LjM3My0xMi0xMnYtMjRjMC02LjYyNyA1LjM3My0xMiAxMi0xMmgxMnYtNjRoLTEyYy02LjYyNyAwLTEyLTUuMzczLTEyLTEydi0yNGMwLTYuNjI3IDUuMzczLTEyIDEyLTEyaDY0YzYuNjI3IDAgMTIgNS4zNzMgMTIgMTJ2MTAwaDEyYzYuNjI3IDAgMTIgNS4zNzMgMTIgMTJ2MjR6Jy8+PC9zdmc+");
}
/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/times-circle.svg */
.toast-error {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTI1NiA4QzExOSA4IDggMTE5IDggMjU2czExMSAyNDggMjQ4IDI0OCAyNDgtMTExIDI0OC0yNDhTMzkzIDggMjU2IDh6bTEyMS42IDMxMy4xYzQuNyA0LjcgNC43IDEyLjMgMCAxN0wzMzggMzc3LjZjLTQuNyA0LjctMTIuMyA0LjctMTcgMEwyNTYgMzEybC02NS4xIDY1LjZjLTQuNyA0LjctMTIuMyA0LjctMTcgMEwxMzQuNCAzMzhjLTQuNy00LjctNC43LTEyLjMgMC0xN2w2NS42LTY1LTY1LjYtNjUuMWMtNC43LTQuNy00LjctMTIuMyAwLTE3bDM5LjYtMzkuNmM0LjctNC43IDEyLjMtNC43IDE3IDBsNjUgNjUuNyA2NS4xLTY1LjZjNC43LTQuNyAxMi4zLTQuNyAxNyAwbDM5LjYgMzkuNmM0LjcgNC43IDQuNyAxMi4zIDAgMTdMMzEyIDI1Nmw2NS42IDY1LjF6Jy8+PC9zdmc+");
}
/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/check.svg */
.toast-success {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTE3My44OTggNDM5LjQwNGwtMTY2LjQtMTY2LjRjLTkuOTk3LTkuOTk3LTkuOTk3LTI2LjIwNiAwLTM2LjIwNGwzNi4yMDMtMzYuMjA0YzkuOTk3LTkuOTk4IDI2LjIwNy05Ljk5OCAzNi4yMDQgMEwxOTIgMzEyLjY5IDQzMi4wOTUgNzIuNTk2YzkuOTk3LTkuOTk3IDI2LjIwNy05Ljk5NyAzNi4yMDQgMGwzNi4yMDMgMzYuMjA0YzkuOTk3IDkuOTk3IDkuOTk3IDI2LjIwNiAwIDM2LjIwNGwtMjk0LjQgMjk0LjQwMWMtOS45OTggOS45OTctMjYuMjA3IDkuOTk3LTM2LjIwNC0uMDAxeicvPjwvc3ZnPg==");
}
/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/exclamation-triangle.svg */
.toast-warning {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1NzYgNTEyJyB3aWR0aD0nNTc2JyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTU2OS41MTcgNDQwLjAxM0M1ODcuOTc1IDQ3Mi4wMDcgNTY0LjgwNiA1MTIgNTI3Ljk0IDUxMkg0OC4wNTRjLTM2LjkzNyAwLTU5Ljk5OS00MC4wNTUtNDEuNTc3LTcxLjk4N0wyNDYuNDIzIDIzLjk4NWMxOC40NjctMzIuMDA5IDY0LjcyLTMxLjk1MSA4My4xNTQgMGwyMzkuOTQgNDE2LjAyOHpNMjg4IDM1NGMtMjUuNDA1IDAtNDYgMjAuNTk1LTQ2IDQ2czIwLjU5NSA0NiA0NiA0NiA0Ni0yMC41OTUgNDYtNDYtMjAuNTk1LTQ2LTQ2LTQ2em0tNDMuNjczLTE2NS4zNDZsNy40MTggMTM2Yy4zNDcgNi4zNjQgNS42MDkgMTEuMzQ2IDExLjk4MiAxMS4zNDZoNDguNTQ2YzYuMzczIDAgMTEuNjM1LTQuOTgyIDExLjk4Mi0xMS4zNDZsNy40MTgtMTM2Yy4zNzUtNi44NzQtNS4wOTgtMTIuNjU0LTExLjk4Mi0xMi42NTRoLTYzLjM4M2MtNi44ODQgMC0xMi4zNTYgNS43OC0xMS45ODEgMTIuNjU0eicvPjwvc3ZnPg==");
}
.toast-container.toast-top-center .ngx-toastr,
.toast-container.toast-bottom-center .ngx-toastr {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}
.toast-container.toast-top-full-width .ngx-toastr,
.toast-container.toast-bottom-full-width .ngx-toastr {
  width: 96%;
  margin-left: auto;
  margin-right: auto;
}
.ngx-toastr {
  background-color: #030303;
  pointer-events: auto;
}
.toast-success {
  background-color: #51A351;
}
.toast-error {
  background-color: #BD362F;
}
.toast-info {
  background-color: #2F96B4;
}
.toast-warning {
  background-color: #F89406;
}
.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background-color: #000000;
  opacity: 0.4;
}
/* Responsive Design */
@media all and (max-width: 240px) {
  .toast-container .ngx-toastr.div {
    padding: 8px 8px 8px 50px;
    width: 11em;
  }
  .toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
}
@media all and (min-width: 241px) and (max-width: 480px) {
  .toast-container .ngx-toastr.div {
    padding: 8px 8px 8px 50px;
    width: 18em;
  }
  .toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
}
@media all and (min-width: 481px) and (max-width: 768px) {
  .toast-container .ngx-toastr.div {
    padding: 15px 15px 15px 50px;
    width: 25em;
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./apps/prox-ui/src/assets/css/codeeffects/codeeffects.common.css ***!
  \********************************************************************************************************************************************************************************************************************************************************/
/* Code Effects Software © 2020 | https://CodeEffects.com | Version: 5.0.8.8 | August 03, 2020 */

span.ceFlow,span.ceClause,span.ceOperator,span.ceParenthesis,span.ceNewLine,span.ceBrace,span.ceAction,span.ceMethod,span.ceField,span.ceEmpty,span.ceValue,span.ceFieldInput,span.ceTab,span.ceWarn,span.ceCurrent,
input[type="text"].ceValue,table.ceTime input,table.ceTime select,span.ceSaveButton,span.ceDeleteButton,span.ceRulesButton,table.ceCal table td,table.ceHeader table td,div.ceMenu div{font-family:Tahoma,Arial,sans-serif;font-size:13px}
table.ceHeader,td.ceDays,div.ceHelp{font-family:Tahoma,Geneva,sans-serif}
div.ceHelp{font-size:11px;padding:3px 8px;margin-bottom:6px;white-space:nowrap}
td.ceDays{font-size:9px}
span.ceFlow,span.ceAction,span.ceMethod,span.ceField,span.ceValue,span.ceFieldInput,table.ceHeader,span.ceSaveButton,span.ceDeleteButton,span.ceRulesButton,span.ceBrace{font-weight:bolder}
span.ceFlow,span.ceClause,span.ceOperator,span.ceParenthesis,span.ceNewLine,span.ceBrace,span.ceAction,span.ceMethod,span.ceField,span.ceEmpty,span.ceValue,span.ceFieldInput,span.ceTab,span.ceNewLine,span.ceWarn,span.ceCurrent{-webkit-user-select:none;user-select:none}
div.ceRule{padding:10px}
table.ceCal{padding:1px}
td.ceDay,td.ceToday,td.ceRollover,td.ceDays,td.ceSelected{padding:2px 4px}
span.ceFlow,span.ceClause,span.ceOperator,span.ceParenthesis,span.ceNewLine,span.ceBrace,span.ceAction,span.ceMethod,span.ceField,span.ceEmpty,span.ceValue,span.ceFieldInput,span.ceTab,span.ceNewLine,span.ceWarn,span.ceCurrent,input[type="text"].ceValue{margin-bottom:1px;margin-right:1px}
div.ceToolBar{margin-bottom:6px;padding:8px 10px;white-space:nowrap}
input.ceDescriptionBox,input.ceDescriptionBoxDefault{width:100%;margin-left:4px}
dev.ceMenu div,div.ceRule span,table.ceCal table,table.ceCal table td,table.ceTime table,table.ceTime table td{border:0}
span.ceFlow,span.ceField,span.ceAction,span.ceMethod,span.ceValue,span.ceFieldInput,span.ceClause,span.ceOperator,span.ceParenthesis,span.ceTab,span.ceNewLine,span.ceBrace,span.ceCurrent,table.ceHeader,td.ceToday,td.ceRollover,td.ceSelected{border-radius:3px}
div.ceRule,div.ceToolBar,table.ceCal,table.ceTime,div.ceMenu,div.ceHelp{border-radius:5px}
td.ceDay,td.ceToday,td.ceRollover,td.ceDays,td.ceSelected,div.ceHelp{text-align:center}
table.ceCal table td,table.ceTime table td{vertical-align:middle}
input.ceNameBox,input.ceNameBoxDefault{width:98%}
span:hover.ceSaveButton,span:hover.ceDeleteButton,span.ceRulesButton{cursor:pointer}
td.ceDay,td.ceToday,td.ceRollover,td.ceDays,td.ceSelected,div.ceToolBar,span.ceFlow,span.ceField,span.ceAction,span.ceMethod,span.ceClause,span.ceOperator,span.ceParenthesis,span.ceTab,span.ceNewLine,span.ceValue,span.ceFieldInput,div.ceHelp,span.ceBrace{cursor:default}
input[type="text"].ceValue{margin-top:0;margin-bottom:0;padding:0;border:0;outline:0;background:transparent}
input[type="text"].ceValue::-ms-clear{display:none}
div.ceMenu div{padding:3px 8px;cursor:default;white-space:nowrap;max-width:500px;overflow:hidden;text-overflow:ellipsis}
div.ceMenu div.ceMenuItemSymbol,div.ceMenu div.ceMenuItemName{float:left;padding-left:3px;padding-right:3px}
div.ceMenu div.ceMenuItemSymbol{font-weight:bold}
div.ceMenu div.ceMenuItemClear{clear:both}
input.ceDescriptionBox,input.ceDescriptionBoxDefault,input.ceNameBox,input.ceNameBoxDefault{text-align:center}
div.ceToolBar div.ceContainer{display:flex;justify-content:space-between;align-items:center}
div.ceToolBar div.ceContainer div.ceRulesMenu{flex:0 0 auto;margin-right:30px}
div.ceToolBar div.ceContainer div.ceControls{flex:1 1 auto;display:flex;justify-content:flex-end}
div.ceToolBar div.ceContainer div.ceControls div.ceInputName,div.ceToolBar div.ceContainer div.ceControls div.ceInputDesc{margin-left:5px;flex:1 1 auto;width:1px}
div.ceToolBar div.ceContainer div.ceControls div.ceSave{margin-left:14px}
div.ceToolBar div.ceContainer div.ceControls div.ceDelete{margin-left:6px}
input.ceDescriptionBox::placeholder,input.ceDescriptionBoxDefault::placeholder,input.ceNameBox::placeholder,input.ceNameBoxDefault::placeholder{color:#aaa;opacity:0.6}
input.ceDescriptionBox::-moz-placeholder,input.ceDescriptionBoxDefault::-moz-placeholder,input.ceNameBox::-moz-placeholder,input.ceNameBoxDefault::-moz-placeholder{color:#aaa;opacity:0.6}
input.ceDescriptionBox:-ms-input-placeholder,input.ceDescriptionBoxDefault:-ms-input-placeholder,input.ceNameBox:-ms-input-placeholder,input.ceNameBoxDefault:-ms-input-placeholder{color:#aaa;opacity:0.6}
input.ceDescriptionBox::-ms-input-placeholder,input.ceDescriptionBoxDefault::-ms-input-placeholder,input.ceNameBox::-ms-input-placeholder,input.ceNameBoxDefault::-ms-input-placeholder{color:#aaa;opacity: 0.6}
div.ceRule{-webkit-user-select: none;-webkit-touch-callout: none;}
/*!*******************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./apps/prox-ui/src/assets/css/codeeffects/codeeffects.white.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************/
/* Code Effects Software © 2020 | https://CodeEffects.com | Version: 5.0.8.8 | August 03, 2020 */

span.ceFlow, div.ceToolBar, span.ceClause, span.ceOperator, span.ceParenthesis, span.ceNewLine, span.ceBrace, span.ceSaveButton, span:hover.ceDeleteButton { color: #000 }
span.ceAction,span.ceMethod, span.ceField { color: #176CCF }
span.ceValue,span.ceFieldInput { color: #17A100 }
span.ceEmpty, span:hover.ceSaveButton, span.ceDeleteButton, span:hover.ceRulesButton,div.ceHelp { color: #8a8a8a }
td.ceDays { color: #B4B4B4 }
table.ceHeader, td.ceRollover, td.ceSelected, td.ceToday, span.ceWarn { color: #000 }
input[type="text"].ceValue { color: #E30000 }
div.ceError, input.ceError, div.ceValueWarn { color: #C00 }
div.ceRule, div.ceToolBar, table.ceCal, table.ceTime, div.ceMenu, table.ceHeader { background-color: #FFF }
span.ceCurrent { background-color: #C5C7C1 }
div.ceHelp { background-color: #ebebeb }
span.ceHighlight { background-color: #FFF34D }
span.ceWarn { background-color: #F00 }
td.ceToday { background-color: #B5D0E8 }
td.ceSelected, span.ceSelected { background-color: #56C22B;color:#fff }
td.ceRollover { background-color: #3a3a3a; color: #fff }
div.ceRule, div.ceToolBar, table.ceCal, table.ceTime, div.ceMenu { border: solid 1px #bababa }
table.ceCal, table.ceTime, div.ceMenu { box-shadow: 2px 2px 4px #ADADAD }
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./apps/prox-ui/src/styles.scss?ngGlobalStyle ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Proximity Global Styles
 * =======================
 *
 * This file contains only imports. All application styles live in the
 * QuickBooks-themed stylesheets in assets/css/.
 *
 * Structure:
 * - External dependencies (icons, toastr, gantt, codeeffects)
 * - Tailwind CSS utilities
 * - Layout template styles
 * - QuickBooks-themed component styles (AG Grid, Submenu)
 * - forms-quickbooks.scss LAST (shared with Uniformax, highest priority)
 *
 * NOTE: @use rules must come before @import rules in SASS.
 */
/* =============================================================================
   @USE RULES (must be first)
   ============================================================================= */
/* =============================================================================
   @IMPORT RULES (must come after @use)
   ============================================================================= */
/* Toastr notifications */
/* Rule Engine (codeeffects) */
@font-face {
  font-family: "primeicons";
  font-display: block;
  src: url('primeicons.ffecb2549ad1765a.eot');
  src: url('primeicons.ffecb2549ad1765a.eot?#iefix') format("embedded-opentype"), url('primeicons.ba3f916dfb64be8c.woff2') format("woff2"), url('primeicons.f8b9e8a4e401b603.woff') format("woff"), url('primeicons.0112589c5695a9ed.ttf') format("truetype"), url('primeicons.943ab24c43224d29.svg?#primeicons') format("svg");
  font-weight: normal;
  font-style: normal;
}
.pi {
  font-family: "primeicons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pi:before {
  --webkit-backface-visibility:hidden;
  backface-visibility: hidden;
}

.pi-fw {
  width: 1.28571429em;
  text-align: center;
}

.pi-spin {
  animation: fa-spin 2s infinite linear;
}
@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
.pi-eraser:before {
  content: "\ea04";
}

.pi-stopwatch:before {
  content: "\ea01";
}

.pi-verified:before {
  content: "\ea02";
}

.pi-delete-left:before {
  content: "\ea03";
}

.pi-hourglass:before {
  content: "\e9fe";
}

.pi-truck:before {
  content: "\ea00";
}

.pi-wrench:before {
  content: "\e9ff";
}

.pi-microphone:before {
  content: "\e9fa";
}

.pi-megaphone:before {
  content: "\e9fb";
}

.pi-arrow-right-arrow-left:before {
  content: "\e9fc";
}

.pi-bitcoin:before {
  content: "\e9fd";
}

.pi-file-edit:before {
  content: "\e9f6";
}

.pi-language:before {
  content: "\e9f7";
}

.pi-file-export:before {
  content: "\e9f8";
}

.pi-file-import:before {
  content: "\e9f9";
}

.pi-file-word:before {
  content: "\e9f1";
}

.pi-gift:before {
  content: "\e9f2";
}

.pi-cart-plus:before {
  content: "\e9f3";
}

.pi-thumbs-down-fill:before {
  content: "\e9f4";
}

.pi-thumbs-up-fill:before {
  content: "\e9f5";
}

.pi-arrows-alt:before {
  content: "\e9f0";
}

.pi-calculator:before {
  content: "\e9ef";
}

.pi-sort-alt-slash:before {
  content: "\e9ee";
}

.pi-arrows-h:before {
  content: "\e9ec";
}

.pi-arrows-v:before {
  content: "\e9ed";
}

.pi-pound:before {
  content: "\e9eb";
}

.pi-prime:before {
  content: "\e9ea";
}

.pi-chart-pie:before {
  content: "\e9e9";
}

.pi-reddit:before {
  content: "\e9e8";
}

.pi-code:before {
  content: "\e9e7";
}

.pi-sync:before {
  content: "\e9e6";
}

.pi-shopping-bag:before {
  content: "\e9e5";
}

.pi-server:before {
  content: "\e9e4";
}

.pi-database:before {
  content: "\e9e3";
}

.pi-hashtag:before {
  content: "\e9e2";
}

.pi-bookmark-fill:before {
  content: "\e9df";
}

.pi-filter-fill:before {
  content: "\e9e0";
}

.pi-heart-fill:before {
  content: "\e9e1";
}

.pi-flag-fill:before {
  content: "\e9de";
}

.pi-circle:before {
  content: "\e9dc";
}

.pi-circle-fill:before {
  content: "\e9dd";
}

.pi-bolt:before {
  content: "\e9db";
}

.pi-history:before {
  content: "\e9da";
}

.pi-box:before {
  content: "\e9d9";
}

.pi-at:before {
  content: "\e9d8";
}

.pi-arrow-up-right:before {
  content: "\e9d4";
}

.pi-arrow-up-left:before {
  content: "\e9d5";
}

.pi-arrow-down-left:before {
  content: "\e9d6";
}

.pi-arrow-down-right:before {
  content: "\e9d7";
}

.pi-telegram:before {
  content: "\e9d3";
}

.pi-stop-circle:before {
  content: "\e9d2";
}

.pi-stop:before {
  content: "\e9d1";
}

.pi-whatsapp:before {
  content: "\e9d0";
}

.pi-building:before {
  content: "\e9cf";
}

.pi-qrcode:before {
  content: "\e9ce";
}

.pi-car:before {
  content: "\e9cd";
}

.pi-instagram:before {
  content: "\e9cc";
}

.pi-linkedin:before {
  content: "\e9cb";
}

.pi-send:before {
  content: "\e9ca";
}

.pi-slack:before {
  content: "\e9c9";
}

.pi-sun:before {
  content: "\e9c8";
}

.pi-moon:before {
  content: "\e9c7";
}

.pi-vimeo:before {
  content: "\e9c6";
}

.pi-youtube:before {
  content: "\e9c5";
}

.pi-flag:before {
  content: "\e9c4";
}

.pi-wallet:before {
  content: "\e9c3";
}

.pi-map:before {
  content: "\e9c2";
}

.pi-link:before {
  content: "\e9c1";
}

.pi-credit-card:before {
  content: "\e9bf";
}

.pi-discord:before {
  content: "\e9c0";
}

.pi-percentage:before {
  content: "\e9be";
}

.pi-euro:before {
  content: "\e9bd";
}

.pi-book:before {
  content: "\e9ba";
}

.pi-shield:before {
  content: "\e9b9";
}

.pi-paypal:before {
  content: "\e9bb";
}

.pi-amazon:before {
  content: "\e9bc";
}

.pi-phone:before {
  content: "\e9b8";
}

.pi-filter-slash:before {
  content: "\e9b7";
}

.pi-facebook:before {
  content: "\e9b4";
}

.pi-github:before {
  content: "\e9b5";
}

.pi-twitter:before {
  content: "\e9b6";
}

.pi-step-backward-alt:before {
  content: "\e9ac";
}

.pi-step-forward-alt:before {
  content: "\e9ad";
}

.pi-forward:before {
  content: "\e9ae";
}

.pi-backward:before {
  content: "\e9af";
}

.pi-fast-backward:before {
  content: "\e9b0";
}

.pi-fast-forward:before {
  content: "\e9b1";
}

.pi-pause:before {
  content: "\e9b2";
}

.pi-play:before {
  content: "\e9b3";
}

.pi-compass:before {
  content: "\e9ab";
}

.pi-id-card:before {
  content: "\e9aa";
}

.pi-ticket:before {
  content: "\e9a9";
}

.pi-file-o:before {
  content: "\e9a8";
}

.pi-reply:before {
  content: "\e9a7";
}

.pi-directions-alt:before {
  content: "\e9a5";
}

.pi-directions:before {
  content: "\e9a6";
}

.pi-thumbs-up:before {
  content: "\e9a3";
}

.pi-thumbs-down:before {
  content: "\e9a4";
}

.pi-sort-numeric-down-alt:before {
  content: "\e996";
}

.pi-sort-numeric-up-alt:before {
  content: "\e997";
}

.pi-sort-alpha-down-alt:before {
  content: "\e998";
}

.pi-sort-alpha-up-alt:before {
  content: "\e999";
}

.pi-sort-numeric-down:before {
  content: "\e99a";
}

.pi-sort-numeric-up:before {
  content: "\e99b";
}

.pi-sort-alpha-down:before {
  content: "\e99c";
}

.pi-sort-alpha-up:before {
  content: "\e99d";
}

.pi-sort-alt:before {
  content: "\e99e";
}

.pi-sort-amount-up:before {
  content: "\e99f";
}

.pi-sort-amount-down:before {
  content: "\e9a0";
}

.pi-sort-amount-down-alt:before {
  content: "\e9a1";
}

.pi-sort-amount-up-alt:before {
  content: "\e9a2";
}

.pi-palette:before {
  content: "\e995";
}

.pi-undo:before {
  content: "\e994";
}

.pi-desktop:before {
  content: "\e993";
}

.pi-sliders-v:before {
  content: "\e991";
}

.pi-sliders-h:before {
  content: "\e992";
}

.pi-search-plus:before {
  content: "\e98f";
}

.pi-search-minus:before {
  content: "\e990";
}

.pi-file-excel:before {
  content: "\e98e";
}

.pi-file-pdf:before {
  content: "\e98d";
}

.pi-check-square:before {
  content: "\e98c";
}

.pi-chart-line:before {
  content: "\e98b";
}

.pi-user-edit:before {
  content: "\e98a";
}

.pi-exclamation-circle:before {
  content: "\e989";
}

.pi-android:before {
  content: "\e985";
}

.pi-google:before {
  content: "\e986";
}

.pi-apple:before {
  content: "\e987";
}

.pi-microsoft:before {
  content: "\e988";
}

.pi-heart:before {
  content: "\e984";
}

.pi-mobile:before {
  content: "\e982";
}

.pi-tablet:before {
  content: "\e983";
}

.pi-key:before {
  content: "\e981";
}

.pi-shopping-cart:before {
  content: "\e980";
}

.pi-comments:before {
  content: "\e97e";
}

.pi-comment:before {
  content: "\e97f";
}

.pi-briefcase:before {
  content: "\e97d";
}

.pi-bell:before {
  content: "\e97c";
}

.pi-paperclip:before {
  content: "\e97b";
}

.pi-share-alt:before {
  content: "\e97a";
}

.pi-envelope:before {
  content: "\e979";
}

.pi-volume-down:before {
  content: "\e976";
}

.pi-volume-up:before {
  content: "\e977";
}

.pi-volume-off:before {
  content: "\e978";
}

.pi-eject:before {
  content: "\e975";
}

.pi-money-bill:before {
  content: "\e974";
}

.pi-images:before {
  content: "\e973";
}

.pi-image:before {
  content: "\e972";
}

.pi-sign-in:before {
  content: "\e970";
}

.pi-sign-out:before {
  content: "\e971";
}

.pi-wifi:before {
  content: "\e96f";
}

.pi-sitemap:before {
  content: "\e96e";
}

.pi-chart-bar:before {
  content: "\e96d";
}

.pi-camera:before {
  content: "\e96c";
}

.pi-dollar:before {
  content: "\e96b";
}

.pi-lock-open:before {
  content: "\e96a";
}

.pi-table:before {
  content: "\e969";
}

.pi-map-marker:before {
  content: "\e968";
}

.pi-list:before {
  content: "\e967";
}

.pi-eye-slash:before {
  content: "\e965";
}

.pi-eye:before {
  content: "\e966";
}

.pi-folder-open:before {
  content: "\e964";
}

.pi-folder:before {
  content: "\e963";
}

.pi-video:before {
  content: "\e962";
}

.pi-inbox:before {
  content: "\e961";
}

.pi-lock:before {
  content: "\e95f";
}

.pi-unlock:before {
  content: "\e960";
}

.pi-tags:before {
  content: "\e95d";
}

.pi-tag:before {
  content: "\e95e";
}

.pi-power-off:before {
  content: "\e95c";
}

.pi-save:before {
  content: "\e95b";
}

.pi-question-circle:before {
  content: "\e959";
}

.pi-question:before {
  content: "\e95a";
}

.pi-copy:before {
  content: "\e957";
}

.pi-file:before {
  content: "\e958";
}

.pi-clone:before {
  content: "\e955";
}

.pi-calendar-times:before {
  content: "\e952";
}

.pi-calendar-minus:before {
  content: "\e953";
}

.pi-calendar-plus:before {
  content: "\e954";
}

.pi-ellipsis-v:before {
  content: "\e950";
}

.pi-ellipsis-h:before {
  content: "\e951";
}

.pi-bookmark:before {
  content: "\e94e";
}

.pi-globe:before {
  content: "\e94f";
}

.pi-replay:before {
  content: "\e94d";
}

.pi-filter:before {
  content: "\e94c";
}

.pi-print:before {
  content: "\e94b";
}

.pi-align-right:before {
  content: "\e946";
}

.pi-align-left:before {
  content: "\e947";
}

.pi-align-center:before {
  content: "\e948";
}

.pi-align-justify:before {
  content: "\e949";
}

.pi-cog:before {
  content: "\e94a";
}

.pi-cloud-download:before {
  content: "\e943";
}

.pi-cloud-upload:before {
  content: "\e944";
}

.pi-cloud:before {
  content: "\e945";
}

.pi-pencil:before {
  content: "\e942";
}

.pi-users:before {
  content: "\e941";
}

.pi-clock:before {
  content: "\e940";
}

.pi-user-minus:before {
  content: "\e93e";
}

.pi-user-plus:before {
  content: "\e93f";
}

.pi-trash:before {
  content: "\e93d";
}

.pi-external-link:before {
  content: "\e93c";
}

.pi-window-maximize:before {
  content: "\e93b";
}

.pi-window-minimize:before {
  content: "\e93a";
}

.pi-refresh:before {
  content: "\e938";
}

.pi-user:before {
  content: "\e939";
}

.pi-exclamation-triangle:before {
  content: "\e922";
}

.pi-calendar:before {
  content: "\e927";
}

.pi-chevron-circle-left:before {
  content: "\e928";
}

.pi-chevron-circle-down:before {
  content: "\e929";
}

.pi-chevron-circle-right:before {
  content: "\e92a";
}

.pi-chevron-circle-up:before {
  content: "\e92b";
}

.pi-angle-double-down:before {
  content: "\e92c";
}

.pi-angle-double-left:before {
  content: "\e92d";
}

.pi-angle-double-right:before {
  content: "\e92e";
}

.pi-angle-double-up:before {
  content: "\e92f";
}

.pi-angle-down:before {
  content: "\e930";
}

.pi-angle-left:before {
  content: "\e931";
}

.pi-angle-right:before {
  content: "\e932";
}

.pi-angle-up:before {
  content: "\e933";
}

.pi-upload:before {
  content: "\e934";
}

.pi-download:before {
  content: "\e956";
}

.pi-ban:before {
  content: "\e935";
}

.pi-star-fill:before {
  content: "\e936";
}

.pi-star:before {
  content: "\e937";
}

.pi-chevron-left:before {
  content: "\e900";
}

.pi-chevron-right:before {
  content: "\e901";
}

.pi-chevron-down:before {
  content: "\e902";
}

.pi-chevron-up:before {
  content: "\e903";
}

.pi-caret-left:before {
  content: "\e904";
}

.pi-caret-right:before {
  content: "\e905";
}

.pi-caret-down:before {
  content: "\e906";
}

.pi-caret-up:before {
  content: "\e907";
}

.pi-search:before {
  content: "\e908";
}

.pi-check:before {
  content: "\e909";
}

.pi-check-circle:before {
  content: "\e90a";
}

.pi-times:before {
  content: "\e90b";
}

.pi-times-circle:before {
  content: "\e90c";
}

.pi-plus:before {
  content: "\e90d";
}

.pi-plus-circle:before {
  content: "\e90e";
}

.pi-minus:before {
  content: "\e90f";
}

.pi-minus-circle:before {
  content: "\e910";
}

.pi-circle-on:before {
  content: "\e911";
}

.pi-circle-off:before {
  content: "\e912";
}

.pi-sort-down:before {
  content: "\e913";
}

.pi-sort-up:before {
  content: "\e914";
}

.pi-sort:before {
  content: "\e915";
}

.pi-step-backward:before {
  content: "\e916";
}

.pi-step-forward:before {
  content: "\e917";
}

.pi-th-large:before {
  content: "\e918";
}

.pi-arrow-down:before {
  content: "\e919";
}

.pi-arrow-left:before {
  content: "\e91a";
}

.pi-arrow-right:before {
  content: "\e91b";
}

.pi-arrow-up:before {
  content: "\e91c";
}

.pi-bars:before {
  content: "\e91d";
}

.pi-arrow-circle-down:before {
  content: "\e91e";
}

.pi-arrow-circle-left:before {
  content: "\e91f";
}

.pi-arrow-circle-right:before {
  content: "\e920";
}

.pi-arrow-circle-up:before {
  content: "\e921";
}

.pi-info:before {
  content: "\e923";
}

.pi-info-circle:before {
  content: "\e924";
}

.pi-home:before {
  content: "\e925";
}

.pi-spinner:before {
  content: "\e926";
}

.gantt {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  color: #333;
  opacity: 0;
}
.gantt svg {
  overflow: visible !important;
}
.gantt .gantt-side {
  border-right: 1px solid #eee;
  position: relative;
  z-index: 3;
  box-shadow: 12px 0 16px -10px rgba(0, 0, 0, 0.15);
}
.gantt .gantt-side .gantt-side-header {
  box-sizing: border-box;
}
.gantt .gantt-side .gantt-side-container {
  height: 100%;
  background-color: #fff;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.gantt .gantt-side .gantt-side-container .gantt-table {
  height: 100%;
  flex: 1;
  display: flex;
}
.gantt .gantt-side .gantt-side-container::-webkit-scrollbar {
  display: none;
}
.gantt .gantt-container {
  flex: 1;
  position: relative;
  display: flex;
  overflow: hidden;
  background-color: #fafafa;
}
.gantt .gantt-scrollbar {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 3;
  display: flex;
}
.gantt .gantt-scrollbar.gantt-scrollbar-bg {
  background-color: #fafafa;
}
.gantt .gantt-scrollbar.gantt-scrollbar-bg .gantt-table-scrollbar.with-scrollbar {
  border-right: 1px solid #eee;
  z-index: 3;
  box-shadow: 10px 0px 10px -3px rgba(0, 0, 0, 0.15);
}
.gantt .gantt-scrollbar .gantt-table-scrollbar.with-scrollbar {
  overflow-x: scroll;
}
.gantt .gantt-scrollbar .gantt-main-scrollbar {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
}
.gantt .gantt-main-container {
  width: 100%;
  height: calc(100% - var(--gantt-header-height));
  flex: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}
.gantt .gantt-main-container .gantt-main-groups,
.gantt .gantt-main-container .gantt-main-items {
  overflow: hidden;
  min-height: 100%;
}
.gantt .gantt-main-container .gantt-group {
  background: rgba(243, 243, 243, 0.5);
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}
.gantt .gantt-main-container .gantt-item {
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
  position: relative;
}
.gantt .gantt-main-container .gantt-item.gantt-main-item-active {
  background-color: rgba(102, 152, 255, 0.1);
}
.gantt .gantt-main-container .gantt-quick-time-focus-container {
  position: absolute;
  left: 0;
  top: 0;
}
.gantt .gantt-main-container .gantt-quick-time-focus-container .gantt-quick-time-focus {
  position: sticky;
  left: 0;
  width: 0px;
  z-index: 3;
  pointer-events: none;
}
.gantt .gantt-main-container .gantt-quick-time-focus-container .gantt-quick-time-focus-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gantt .gantt-main-container .gantt-quick-time-focus-container .gantt-quick-time-focus-item span {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2px;
  pointer-events: all;
}
.gantt .gantt-main-container .gantt-quick-time-focus-container .gantt-quick-time-focus-item span:hover .gantt-quick-time-focus-item-arrow {
  border: 1px solid #6698ff;
}
.gantt .gantt-main-container .gantt-quick-time-focus-container .gantt-quick-time-focus-item-arrow {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  box-shadow: 0 4px 7px 1px rgba(0, 0, 0, 0.05);
}
.gantt .gantt-main-container .gantt-quick-time-focus-container .gantt-quick-time-focus-item-arrow .gantt-icon {
  display: inline-block;
}
.gantt .gantt-main-container .gantt-quick-time-focus-container .gantt-quick-time-focus-item-arrow .gantt-icon svg {
  width: 14px;
  height: 14px;
}
.gantt .gantt-normal-viewport {
  display: flex;
}
.gantt .gantt-virtual-scroll-viewport {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  overflow: auto;
}
.gantt .gantt-virtual-scroll-viewport.with-footer .gantt-table-body {
  padding-bottom: 44px;
}
.gantt .gantt-virtual-scroll-viewport.with-footer .gantt-main-groups,
.gantt .gantt-virtual-scroll-viewport.with-footer .gantt-main-items {
  padding-bottom: 44px;
}
.gantt .gantt-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper {
  width: 100%;
  min-width: unset;
  display: flex;
  min-height: 100%;
}
.gantt .gantt-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .gantt-container .gantt-main-container {
  height: 100%;
  top: 0;
  overflow-y: hidden;
}
.gantt .gantt-virtual-scroll-viewport.gantt-scroll-container .gantt-container .gantt-main-container::-webkit-scrollbar {
  position: static;
}
.gantt .gantt-virtual-scroll-viewport.gantt-normal-viewport .cdk-virtual-scroll-content-wrapper {
  height: 100%;
}
.gantt .gantt-virtual-scroll-viewport.gantt-normal-viewport .cdk-virtual-scroll-spacer {
  display: none;
}
.gantt .gantt-virtual-scroll-viewport.gantt-normal-viewport .gantt-container .gantt-main-container {
  overflow-y: auto;
}

.gantt-header {
  display: flex;
  overflow: hidden;
  height: 100%;
}
.gantt-header .gantt-container-header {
  flex: 1;
  overflow: hidden;
  background-color: #fafafa;
}

.gantt-footer {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background-color: white;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  overflow: hidden;
}
.gantt-footer .gantt-table-footer {
  height: 44px;
  border-right: 1px solid #eee;
  box-shadow: 16px 0 14px -10px rgba(0, 0, 0, 0.15);
  overflow-x: auto;
  overflow-y: hidden;
}
.gantt-footer .gantt-table-footer::-webkit-scrollbar {
  display: none;
}
.gantt-footer .gantt-container-footer {
  height: 44px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
}
.gantt-footer .gantt-container-footer::-webkit-scrollbar {
  display: none;
}

.gantt-table-header {
  text-align: center;
  background: #fff;
  box-shadow: 12px 0 16px -10px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 3;
  border-right: 1px solid #eee;
  display: flex;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.gantt-table-header .gantt-table-header-container {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.gantt-table-header .gantt-table-header-container::-webkit-scrollbar {
  display: none;
}
.gantt-table-header .gantt-table-column {
  overflow: hidden;
  border-right: 1px solid #eee;
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0;
}
.gantt-table-header .gantt-table-column:nth-last-child(2) {
  border-right: none;
}
.gantt-table-header .gantt-table-column.gantt-table-column-placeholder {
  padding: 0;
  border: 1px solid #eee;
  border-right: none;
}
.gantt-table-header-first-level-group {
  background: rgba(243, 243, 243, 0.5);
}
.gantt-table-header-with-group .gantt-table-column:first-child {
  padding: 0 15px 0 32px;
}
.gantt-table-header .gantt-table-column {
  display: flex;
  padding: 0 15px;
}
.gantt-table-header .gantt-table-column-content {
  flex: 1;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gantt-table-header:hover {
  background-color: #fafafa;
}
.gantt-table-header-active {
  background-color: rgba(102, 152, 255, 0.1);
}
.gantt-table-header-active:hover {
  background-color: rgba(102, 152, 255, 0.1);
}
.gantt-table-header .gantt-table-column {
  display: flex;
  padding: 0 15px;
}
.gantt-table-header .gantt-table-column:nth-last-child(2) {
  border-right: none;
}
.gantt-table-header .gantt-table-column.gantt-table-column-placeholder {
  padding: 0;
  border: 1px solid #eee;
  border-right: none;
}
.gantt-table-header .gantt-table-column-content {
  flex: 1;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gantt-table-header .gantt-expand-icon {
  display: inline-block;
  width: 20px;
  color: #aaa;
}
.gantt-table-header .gantt-drag-handle {
  width: 1rem;
  padding: 0 5px 0 0;
  display: flex;
  align-items: center;
  margin-left: -10px;
}
.gantt-table-header:hover {
  background-color: #fafafa;
}
.gantt-table-header-active {
  background-color: rgba(102, 152, 255, 0.1);
}
.gantt-table-header-active:hover {
  background-color: rgba(102, 152, 255, 0.1);
}
.gantt-table-header .gantt-table-column {
  font-weight: 400;
  z-index: 1;
}

.gantt-table-body {
  display: block;
  flex: 1;
}
.gantt-table-body .gantt-table-group {
  display: flex;
  background: rgba(243, 243, 243, 0.5);
  padding: 0 10px;
  align-items: center;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
  position: relative;
}
.gantt-table-body .gantt-table-group .gantt-table-group-title {
  cursor: pointer;
}
.gantt-table-body .gantt-table-group .gantt-table-group-title .expand-icon {
  color: #aaa;
  margin-right: 6px;
}
.gantt-table-body .gantt-table-item {
  display: flex;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.gantt-table-body .gantt-table-item .gantt-table-column {
  overflow: hidden;
  border-right: 1px solid #eee;
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0;
}
.gantt-table-body .gantt-table-item .gantt-table-column:nth-last-child(2) {
  border-right: none;
}
.gantt-table-body .gantt-table-item .gantt-table-column.gantt-table-column-placeholder {
  padding: 0;
  border: 1px solid #eee;
  border-right: none;
}
.gantt-table-body .gantt-table-item-first-level-group {
  background: rgba(243, 243, 243, 0.5);
}
.gantt-table-body .gantt-table-item-with-group .gantt-table-column:first-child {
  padding: 0 15px 0 32px;
}
.gantt-table-body .gantt-table-item .gantt-table-column {
  display: flex;
  padding: 0 15px;
}
.gantt-table-body .gantt-table-item .gantt-table-column-content {
  flex: 1;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gantt-table-body .gantt-table-item:hover {
  background-color: #fafafa;
}
.gantt-table-body .gantt-table-item-active {
  background-color: rgba(102, 152, 255, 0.1);
}
.gantt-table-body .gantt-table-item-active:hover {
  background-color: rgba(102, 152, 255, 0.1);
}
.gantt-table-body .gantt-table-item .gantt-table-column {
  display: flex;
  padding: 0 15px;
}
.gantt-table-body .gantt-table-item .gantt-table-column:nth-last-child(2) {
  border-right: none;
}
.gantt-table-body .gantt-table-item .gantt-table-column.gantt-table-column-placeholder {
  padding: 0;
  border: 1px solid #eee;
  border-right: none;
}
.gantt-table-body .gantt-table-item .gantt-table-column-content {
  flex: 1;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gantt-table-body .gantt-table-item .gantt-expand-icon {
  display: inline-block;
  width: 20px;
  color: #aaa;
}
.gantt-table-body .gantt-table-item .gantt-drag-handle {
  width: 1rem;
  padding: 0 5px 0 0;
  display: flex;
  align-items: center;
  margin-left: -10px;
}
.gantt-table-body .gantt-table-item:hover {
  background-color: #fafafa;
}
.gantt-table-body .gantt-table-item-active {
  background-color: rgba(102, 152, 255, 0.1);
}
.gantt-table-body .gantt-table-item-active:hover {
  background-color: rgba(102, 152, 255, 0.1);
}
.gantt-table-body .gantt-expand-icon {
  display: inline-block;
  width: 20px;
  color: #aaa;
}

.gantt-table-empty {
  height: 100%;
  position: relative;
}
.gantt-table-empty .gantt-table-body-container {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 22px;
}
.gantt-table-empty .gantt-table-body-container .empty-icon svg {
  height: 78px;
  width: 78px;
}
.gantt-table-empty .gantt-table-body-container .empty-text {
  color: #cacaca;
}

.table-resize-handle,
.column-resize-handle {
  width: 3px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  cursor: ew-resize;
  height: 5000px;
  z-index: 2;
}
.table-resize-handle:hover,
.column-resize-handle:hover {
  background: #6698ff;
}

.column-resize-handle {
  height: unset;
  z-index: 2;
}

.table-resize-auxiliary-line {
  width: 3px;
  background: #6698ff;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 100;
  display: none;
  height: 5000px;
}

.cdk-drag-preview.gantt-table-item {
  box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.08);
  opacity: 0.9;
  display: flex;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.cdk-drag-preview.gantt-table-item .gantt-table-column {
  overflow: hidden;
  border-right: 1px solid #eee;
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0;
}
.cdk-drag-preview.gantt-table-item .gantt-table-column:nth-last-child(2) {
  border-right: none;
}
.cdk-drag-preview.gantt-table-item .gantt-table-column.gantt-table-column-placeholder {
  padding: 0;
  border: 1px solid #eee;
  border-right: none;
}
.cdk-drag-preview.gantt-table-item-first-level-group {
  background: rgba(243, 243, 243, 0.5);
}
.cdk-drag-preview.gantt-table-item-with-group .gantt-table-column:first-child {
  padding: 0 15px 0 32px;
}
.cdk-drag-preview.gantt-table-item .gantt-table-column {
  display: flex;
  padding: 0 15px;
}
.cdk-drag-preview.gantt-table-item .gantt-table-column-content {
  flex: 1;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cdk-drag-preview.gantt-table-item:hover {
  background-color: #fafafa;
}
.cdk-drag-preview.gantt-table-item-active {
  background-color: rgba(102, 152, 255, 0.1);
}
.cdk-drag-preview.gantt-table-item-active:hover {
  background-color: rgba(102, 152, 255, 0.1);
}
.cdk-drag-preview.gantt-table-item .gantt-table-column {
  display: flex;
  padding: 0 15px;
}
.cdk-drag-preview.gantt-table-item .gantt-table-column:nth-last-child(2) {
  border-right: none;
}
.cdk-drag-preview.gantt-table-item .gantt-table-column.gantt-table-column-placeholder {
  padding: 0;
  border: 1px solid #eee;
  border-right: none;
}
.cdk-drag-preview.gantt-table-item .gantt-table-column-content {
  flex: 1;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cdk-drag-preview.gantt-table-item .gantt-expand-icon {
  display: inline-block;
  width: 20px;
  color: #aaa;
}
.cdk-drag-preview.gantt-table-item .gantt-drag-handle {
  width: 1rem;
  padding: 0 5px 0 0;
  display: flex;
  align-items: center;
  margin-left: -10px;
}
.cdk-drag-preview.gantt-table-item:hover {
  background-color: #fafafa;
}
.cdk-drag-preview.gantt-table-item-active {
  background-color: rgba(102, 152, 255, 0.1);
}
.cdk-drag-preview.gantt-table-item-active:hover {
  background-color: rgba(102, 152, 255, 0.1);
}

.gantt-table-body.gantt-table-draggable .cdk-drag-placeholder {
  display: none !important;
}
.gantt-table-body.gantt-table-draggable .cdk-drag-placeholder + .cdk-drop-list {
  display: none !important;
}
.gantt-table-body.gantt-table-draggable .cdk-drag-disabled.gantt-table-item .gantt-drag-handle svg {
  display: none;
}
.gantt-table-body.gantt-table-draggable.gantt-table-dragging .gantt-table-item:hover {
  background: unset;
}
.gantt-table-body.gantt-table-draggable.gantt-table-dragging .gantt-table-item:hover .gantt-drag-handle {
  visibility: hidden !important;
}
.gantt-table-body.gantt-table-draggable .drag-item-hide {
  display: none !important;
}
.gantt-table-body.gantt-table-draggable .drop-position-inside .gantt-table-column {
  height: 100%;
  border-top: 2px dashed #6698ff !important;
  border-bottom: 2px dashed #6698ff !important;
}
.gantt-table-body.gantt-table-draggable .drop-position-inside .gantt-table-column:first-child {
  border-left: 2px dashed #6698ff !important;
}
.gantt-table-body.gantt-table-draggable .drop-position-inside .gantt-table-column:last-child {
  border-right: 2px dashed #6698ff !important;
}
.gantt-table-body.gantt-table-draggable .drop-position-before {
  background: #f5f5f5 !important;
  border-top: 2px solid #6698ff !important;
}
.gantt-table-body.gantt-table-draggable .drop-position-after {
  background: #f5f5f5 !important;
  border-bottom: 2px solid #6698ff !important;
}

.gantt-calendar {
  display: block;
  height: 100%;
  overflow: hidden;
}
.gantt-calendar svg {
  position: relative;
  background-color: #fff;
}
.gantt-calendar line {
  shape-rendering: crispEdges;
}
.gantt-calendar .primary-line {
  stroke: #ddd;
}
.gantt-calendar .gantt-calendar-today-overlay {
  position: relative;
  z-index: 1;
}
.gantt-calendar .gantt-calendar-today-overlay .today-rect {
  width: 35px;
  height: 24px;
  position: absolute;
  background: #ff9f73;
  color: #fff;
  text-align: center;
  border-radius: 4px;
}
.gantt-calendar .gantt-calendar-today-overlay .today-line {
  position: absolute;
  width: 3px;
  background: #ff9f73;
  transform: scaleX(0.5);
  transform-origin: 100% 0;
  margin-left: -2px;
}

.gantt-calendar-header {
  position: relative;
  z-index: 2;
}
.gantt-calendar-header .gantt-calendar-today-overlay {
  z-index: 2;
}
.gantt-calendar-header .header-line {
  stroke: #eee;
}
.gantt-calendar-header .primary-text {
  fill: #888;
  font-size: 14px;
}
.gantt-calendar-header .secondary-text {
  fill: #333;
  font-size: 14px;
}
.gantt-calendar-header .secondary-text-weekend {
  fill: #aaa;
}
.gantt-calendar-header .primary-text,
.gantt-calendar-header .secondary-text {
  text-anchor: middle;
}

.gantt-calendar-grid {
  position: absolute;
  width: 100%;
}
.gantt-calendar-grid svg {
  background-color: transparent;
}
.gantt-calendar-grid .gantt-calendar-grid-fill {
  position: absolute;
  top: 0;
}
.gantt-calendar-grid .gantt-calendar-grid-main {
  z-index: 2;
}
.gantt-calendar-grid .secondary-line {
  stroke-dasharray: 2px 5px;
  stroke: #cacaca;
}
.gantt-calendar-grid .secondary-backdrop {
  fill: rgba(243, 243, 243, 0.5);
}

.gantt-drag-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: none;
  overflow: hidden;
}

.gantt-drag-mask {
  position: absolute;
  z-index: 1;
  height: 100%;
  display: none;
  background: rgba(102, 152, 255, 0.05);
}
.gantt-drag-mask .date-range {
  width: 100%;
  min-width: 120px;
  top: -23px;
  background: #6698ff;
  line-height: 23px;
  border-radius: 4px;
  color: #fff;
  position: absolute;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
}

.gantt-link-drag-container {
  width: 100%;
  height: 1px;
  overflow: visible !important;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}
.gantt-link-drag-container .link-dragging-line {
  stroke: #6698ff;
  stroke-width: 2px;
}

.gantt-bar {
  position: absolute;
  border-radius: 4px;
  z-index: 2;
  background: #fff;
}
.gantt-bar .gantt-bar-layer {
  width: calc(100% + 32px);
  height: calc(100% + 42px);
  position: absolute;
  border-radius: 4px;
  left: -16px;
  top: -21px;
  display: none;
}
.gantt-bar .gantt-bar-layer .drag-handles {
  background: #fff;
  width: 100%;
  height: calc(100% - 16px * 2);
  position: absolute;
  border-radius: 4px;
  top: 16px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
}
.gantt-bar .gantt-bar-layer .drag-handles .handle {
  width: 15px;
  height: 100%;
  position: absolute;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gantt-bar .gantt-bar-layer .drag-handles .handle:before, .gantt-bar .gantt-bar-layer .drag-handles .handle:after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  background: #cacaca;
}
.gantt-bar .gantt-bar-layer .drag-handles .handle::before {
  margin-right: 2px;
}
.gantt-bar .gantt-bar-layer .drag-handles .handle:first-child {
  left: 0;
}
.gantt-bar .gantt-bar-layer .drag-handles .handle:last-child {
  right: 0;
}
.gantt-bar .gantt-bar-layer .link-handles .handle {
  position: absolute;
  display: inline-block;
  cursor: pointer;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}
.gantt-bar .gantt-bar-layer .link-handles .handle:first-child {
  left: 0;
  top: 0;
}
.gantt-bar .gantt-bar-layer .link-handles .handle:last-child {
  right: 0;
  bottom: 0;
}
.gantt-bar .gantt-bar-layer .link-handles .handle .point {
  color: #6698ff;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6698ff;
  transition: 0.3 ease;
}
.gantt-bar .gantt-bar-layer .link-handles .handle .point:hover {
  width: 12px;
  height: 12px;
}
.gantt-bar .gantt-bar-border {
  width: calc(100% + 5px * 2);
  height: calc(100% + 5px * 2);
  position: absolute;
  border-radius: 4px;
  left: -5px;
  top: -5px;
  display: none;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.gantt-bar .gantt-bar-content {
  width: 100%;
  height: 100%;
  position: absolute;
  cursor: pointer;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: #6698ff;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.gantt-bar .gantt-bar-content .gantt-bar-content-progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}
.gantt-bar-active {
  z-index: 1000;
}
.gantt-bar-active .gantt-bar-layer {
  display: block;
  z-index: 1;
}
.gantt-bar-active .gantt-bar-content {
  z-index: 1;
  box-shadow: none;
}
.gantt-bar-active .cdk-drag {
  transition: none;
}
.gantt-bar-single-drop-active .gantt-bar-border {
  display: block;
}
.gantt-bar-single-drop-active .gantt-bar-content {
  box-shadow: none;
}
.gantt-bar-draggable-drag {
  z-index: 1001;
}
.gantt-bar-drop-active {
  z-index: 1000;
}
.gantt-bar-drop-active .gantt-bar-layer {
  display: block;
  z-index: 1;
}
.gantt-bar-drop-active .gantt-bar-content {
  z-index: 1;
  box-shadow: none;
}
.gantt-bar-drop-active .cdk-drag {
  transition: none;
}
.gantt-bar-drop-active .gantt-bar-layer .link-handles .handle {
  width: 26px;
  height: 100%;
}
.gantt-bar-drop-active .gantt-bar-layer .link-handles .handle:first-child {
  left: -21px;
}
.gantt-bar-drop-active .gantt-bar-layer .link-handles .handle:last-child {
  right: -21px;
}
.gantt-bar-drop-active .gantt-bar-layer .link-handles .handle:hover .point {
  width: 12px;
  height: 12px;
}

.gantt-range {
  position: absolute;
  z-index: 2;
}
.gantt-range .gantt-range-main {
  height: 10px;
  background: #dfdfdf;
  border: 1px solid #888;
  border-radius: 4px 4px 0 0;
  box-sizing: border-box;
  position: relative;
}
.gantt-range .gantt-range-main .gantt-range-main-progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #888;
}
.gantt-range .gantt-range-triangle {
  width: 0;
  height: 0;
  border-top: 7px solid #888;
  position: absolute;
  top: 10px;
}
.gantt-range .gantt-range-triangle.left {
  border-right: 6px solid transparent;
  left: 0;
}
.gantt-range .gantt-range-triangle.right {
  border-left: 6px solid transparent;
  right: 0;
}

.gantt-icon {
  font-size: 1rem;
  line-height: 0;
}
.gantt-icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
  background-repeat: no-repeat;
}

.gantt-links-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.gantt-links-overlay svg {
  overflow: visible;
  z-index: 2;
  position: absolute;
}

.link-dragging-container {
  width: 100%;
  height: 1px;
  overflow: visible !important;
  position: absolute;
  left: 0;
  z-index: 2000;
}
.link-dragging-container .link-dragging-line {
  stroke: #6698ff;
  stroke-width: 2px;
}

.gantt-baseline {
  position: absolute;
  z-index: 2;
}
.gantt-baseline .baseline-content {
  height: 8px;
  border-radius: 2px;
  background-color: #cacaca;
}

.gantt-toolbar {
  position: absolute;
  top: 60px;
  right: 20px;
  z-index: 1000;
}
.gantt-toolbar .toolbar-views {
  display: inline-flex;
}
.gantt-toolbar .toolbar-views .toolbar-view {
  padding: 0 15px;
  cursor: pointer;
  flex: 0 1 auto;
  border: 1px solid #ddd;
  margin-left: -1px;
  position: relative;
  background-color: #ffffff;
}
.gantt-toolbar .toolbar-views .toolbar-view.active {
  color: #6698ff;
  border-color: #6698ff;
  z-index: 1;
}
.gantt-toolbar .toolbar-views .toolbar-view:first-child {
  border-radius: 4px 0 0 4px;
}
.gantt-toolbar .toolbar-views .toolbar-view:last-child {
  border-radius: 0 4px 4px 0;
}

.gantt-loader-overlay {
  position: absolute;
  width: 100%;
  height: calc(100% - 40px);
  top: 40px;
  left: 0;
  background: rgba(255, 255, 255, 0.6);
  z-index: 1001;
}
.gantt-loader-wrapper {
  position: absolute;
  padding-top: 20px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.gantt-loader-loading {
  display: inline-block;
  position: relative;
  height: 8px;
  border-radius: 4px;
  transform: translateX(-18px);
}
.gantt-loader-loading:before, .gantt-loader-loading:after {
  content: "";
  display: block;
  position: absolute;
  height: 8px;
  width: 8px;
  border-radius: 4px;
}
.gantt-loader-loading:before {
  animation: gantt-loader-loading-ellipsis-b 1s ease-in-out infinite;
  background: #6698ff;
  opacity: 0.4;
}
.gantt-loader-loading:after {
  animation: gantt-loader-loading-ellipsis-a 1s ease-in-out infinite;
  background: #6698ff;
  opacity: 0.8;
}
.gantt-loader-loading-spot {
  position: absolute;
  left: 13px;
  height: 8px;
  width: 8px;
  background: #6698ff;
  border-radius: 4px;
}

@keyframes gantt-loader-loading-ellipsis-b {
  0% {
    left: 0;
    transform: scale(1.1);
  }
  50% {
    left: 25px;
    transform: scale(1);
  }
  100% {
    left: 0;
    transform: scale(1.1);
  }
}
@keyframes gantt-loader-loading-ellipsis-a {
  0% {
    left: 25px;
    transform: scale(1.1);
  }
  50% {
    left: 0;
    transform: scale(1);
  }
  100% {
    left: 25px;
    transform: scale(1.1);
  }
}
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
 */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.\!container{
  width: 100% !important;
}
.container{
  width: 100%;
}
@media (min-width: 576px){
  .\!container{
    max-width: 576px !important;
  }
  .container{
    max-width: 576px;
  }
}
@media (min-width: 768px){
  .\!container{
    max-width: 768px !important;
  }
  .container{
    max-width: 768px;
  }
}
@media (min-width: 992px){
  .\!container{
    max-width: 992px !important;
  }
  .container{
    max-width: 992px;
  }
}
@media (min-width: 1200px){
  .\!container{
    max-width: 1200px !important;
  }
  .container{
    max-width: 1200px;
  }
}
@media (min-width: 1920px){
  .\!container{
    max-width: 1920px !important;
  }
  .container{
    max-width: 1920px;
  }
}
.title-h7{
  text-align: center;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--p-surface-950) calc(100% * var(--tw-text-opacity, 1)), transparent);
}
.title-h7:where([class*="app-dark"], [class*="app-dark"] *){
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--p-surface-0) calc(100% * var(--tw-text-opacity, 1)), transparent);
}
.title-h7 {
    font-family: "InterDisplay", sans-serif;
    font-feature-settings: "cv09" on, "cv03" on, "cv02" on, "dlig" on, "cv01" on, "liga" off, "calt" off;
  }
.body-small{
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--p-surface-500) calc(100% * var(--tw-text-opacity, 1)), transparent);
    font-family: "InterDisplay", sans-serif;
    font-feature-settings: "cv09" on, "cv03" on, "cv02" on, "dlig" on, "cv01" on, "liga" off, "calt" off;
}
.label-large{
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--p-surface-950) calc(100% * var(--tw-text-opacity, 1)), transparent);
}
.label-large:where([class*="app-dark"], [class*="app-dark"] *){
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--p-surface-0) calc(100% * var(--tw-text-opacity, 1)), transparent);
}
.label-large {
    font-family: "InterDisplay", sans-serif;
    font-feature-settings: "cv01" on, "cv02" on, "cv05" on, "cv04" on, "cv03" on, "cv07" on, "cv09" on, "cv10" on, "cv11" on;
  }
.label-small{
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--p-surface-500) calc(100% * var(--tw-text-opacity, 1)), transparent);
    font-family: "InterDisplay", sans-serif;
    font-feature-settings: "cv11" on, "cv10" on, "cv09" on, "cv07" on, "cv05" on, "cv04" on, "cv03" on, "cv02" on, "cv01" on;
}
.badge{
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  color: color-mix(in srgb, var(--p-surface-500) calc(100% * var(--tw-text-opacity, 1)), transparent);
    font-family: "InterDisplay", sans-serif;
    font-feature-settings: "cv09" on, "cv03" on, "cv02" on, "dlig" on, "cv01" on, "liga" off, "calt" off;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    border-radius: 9999px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--p-surface-200) calc(100% * var(--tw-border-opacity, 1)), transparent);
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    line-height: 1.5;
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--p-surface-950) calc(100% * var(--tw-text-opacity, 1)), transparent);
}
.badge:where([class*="app-dark"], [class*="app-dark"] *){
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--p-surface-800) calc(100% * var(--tw-border-opacity, 1)), transparent);
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--p-surface-0) calc(100% * var(--tw-text-opacity, 1)), transparent);
}
.visible{
  visibility: visible;
}
.invisible{
  visibility: hidden;
}
.collapse{
  visibility: collapse;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.inset-0{
  inset: 0px;
}
.right-0{
  right: 0px;
}
.top-0{
  top: 0px;
}
.top-auto{
  top: auto;
}
.isolate{
  isolation: isolate;
}
.z-50{
  z-index: 50;
}
.z-\[999\]{
  z-index: 999;
}
.col-span-1{
  grid-column: span 1 / span 1;
}
.col-span-12{
  grid-column: span 12 / span 12;
}
.col-span-2{
  grid-column: span 2 / span 2;
}
.col-span-3{
  grid-column: span 3 / span 3;
}
.col-span-4{
  grid-column: span 4 / span 4;
}
.col-span-5{
  grid-column: span 5 / span 5;
}
.col-span-6{
  grid-column: span 6 / span 6;
}
.m-0{
  margin: 0px;
}
.m-1{
  margin: 0.25rem;
}
.m-4{
  margin: 1rem;
}
.\!my-10{
  margin-top: 2.5rem !important;
  margin-bottom: 2.5rem !important;
}
.-my-1{
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
}
.mx-2{
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-4{
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.my-1{
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-2{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-3{
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.-mr-2{
  margin-right: -0.5rem;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.mb-10{
  margin-bottom: 2.5rem;
}
.mb-2{
  margin-bottom: 0.5rem;
}
.mb-3{
  margin-bottom: 0.75rem;
}
.mb-4{
  margin-bottom: 1rem;
}
.mb-5{
  margin-bottom: 1.25rem;
}
.mb-6{
  margin-bottom: 1.5rem;
}
.mb-8{
  margin-bottom: 2rem;
}
.mb-auto{
  margin-bottom: auto;
}
.ml-1{
  margin-left: 0.25rem;
}
.ml-2{
  margin-left: 0.5rem;
}
.ml-3{
  margin-left: 0.75rem;
}
.ml-4{
  margin-left: 1rem;
}
.ml-5{
  margin-left: 1.25rem;
}
.ml-6{
  margin-left: 1.5rem;
}
.ml-auto{
  margin-left: auto;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-2{
  margin-right: 0.5rem;
}
.mr-3{
  margin-right: 0.75rem;
}
.mr-4{
  margin-right: 1rem;
}
.mr-5{
  margin-right: 1.25rem;
}
.mr-6{
  margin-right: 1.5rem;
}
.mt-0\.5{
  margin-top: 0.125rem;
}
.mt-1{
  margin-top: 0.25rem;
}
.mt-10{
  margin-top: 2.5rem;
}
.mt-11{
  margin-top: 2.75rem;
}
.mt-2{
  margin-top: 0.5rem;
}
.mt-3{
  margin-top: 0.75rem;
}
.mt-4{
  margin-top: 1rem;
}
.mt-5{
  margin-top: 1.25rem;
}
.mt-6{
  margin-top: 1.5rem;
}
.mt-7{
  margin-top: 1.75rem;
}
.mt-8{
  margin-top: 2rem;
}
.mt-9{
  margin-top: 2.25rem;
}
.mt-auto{
  margin-top: auto;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.table{
  display: table;
}
.grid{
  display: grid;
}
.contents{
  display: contents;
}
.hidden{
  display: none;
}
.h-1\/4{
  height: 25%;
}
.h-12{
  height: 3rem;
}
.h-14{
  height: 3.5rem;
}
.h-2\.5{
  height: 0.625rem;
}
.h-20{
  height: 5rem;
}
.h-24{
  height: 6rem;
}
.h-3{
  height: 0.75rem;
}
.h-3\/4{
  height: 75%;
}
.h-5{
  height: 1.25rem;
}
.h-6{
  height: 1.5rem;
}
.h-96{
  height: 24rem;
}
.h-auto{
  height: auto;
}
.h-fit{
  height: fit-content;
}
.h-full{
  height: 100%;
}
.h-screen{
  height: 100vh;
}
.max-h-60{
  max-height: 15rem;
}
.max-h-full{
  max-height: 100%;
}
.min-h-0{
  min-height: 0px;
}
.min-h-14{
  min-height: 3.5rem;
}
.\!w-full{
  width: 100% !important;
}
.w-1\/12{
  width: 8.333333%;
}
.w-1\/2{
  width: 50%;
}
.w-1\/3{
  width: 33.333333%;
}
.w-1\/4{
  width: 25%;
}
.w-1\/5{
  width: 20%;
}
.w-1\/6{
  width: 16.666667%;
}
.w-12{
  width: 3rem;
}
.w-14{
  width: 3.5rem;
}
.w-2\/3{
  width: 66.666667%;
}
.w-2\/5{
  width: 40%;
}
.w-28{
  width: 7rem;
}
.w-3{
  width: 0.75rem;
}
.w-3\/12{
  width: 25%;
}
.w-3\/4{
  width: 75%;
}
.w-3\/5{
  width: 60%;
}
.w-36{
  width: 9rem;
}
.w-40{
  width: 10rem;
}
.w-48{
  width: 12rem;
}
.w-5{
  width: 1.25rem;
}
.w-5\/12{
  width: 41.666667%;
}
.w-5\/6{
  width: 83.333333%;
}
.w-52{
  width: 13rem;
}
.w-56{
  width: 14rem;
}
.w-6{
  width: 1.5rem;
}
.w-6\/12{
  width: 50%;
}
.w-64{
  width: 16rem;
}
.w-7\/12{
  width: 58.333333%;
}
.w-72{
  width: 18rem;
}
.w-80{
  width: 20rem;
}
.w-9\/12{
  width: 75%;
}
.w-96{
  width: 24rem;
}
.w-auto{
  width: auto;
}
.w-fit{
  width: fit-content;
}
.w-full{
  width: 100%;
}
.w-px{
  width: 1px;
}
.min-w-0{
  min-width: 0px;
}
.min-w-48{
  min-width: 12rem;
}
.min-w-64{
  min-width: 16rem;
}
.max-w-2xl{
  max-width: 42rem;
}
.max-w-3xl{
  max-width: 48rem;
}
.max-w-\[100px\]{
  max-width: 100px;
}
.max-w-\[320px\]{
  max-width: 320px;
}
.max-w-\[400px\]{
  max-width: 400px;
}
.max-w-full{
  max-width: 100%;
}
.max-w-md{
  max-width: 28rem;
}
.max-w-sm{
  max-width: 24rem;
}
.max-w-xs{
  max-width: 20rem;
}
.flex-1{
  flex: 1 1 0%;
}
.flex-auto{
  flex: 1 1 auto;
}
.flex-shrink{
  flex-shrink: 1;
}
.flex-shrink-0{
  flex-shrink: 0;
}
.shrink-0{
  flex-shrink: 0;
}
.flex-grow{
  flex-grow: 1;
}
.grow{
  flex-grow: 1;
}
.border-collapse{
  border-collapse: collapse;
}
.border-separate{
  border-collapse: separate;
}
.border-spacing-y-1{
  --tw-border-spacing-y: 0.25rem;
  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}
.origin-top{
  transform-origin: top;
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes fadein{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
.animate-fadein{
  animation: fadein 0.15s linear;
}
@keyframes fadeout{
  0%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}
.animate-fadeout{
  animation: fadeout 0.15s linear;
}
@keyframes scalein{
  0%{
    opacity: 0;
    transform: scaleY(0.8);
    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
  }
  100%{
    opacity: 1;
    transform: scaleY(1);
  }
}
.animate-scalein{
  animation: scalein 0.15s linear;
}
.cursor-move{
  cursor: move;
}
.cursor-pointer{
  cursor: pointer;
}
.resize-none{
  resize: none;
}
.resize{
  resize: both;
}
.list-disc{
  list-style-type: disc;
}
.list-none{
  list-style-type: none;
}
.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12{
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-5{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-7{
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-\[auto_1fr\]{
  grid-template-columns: auto 1fr;
}
.flex-row{
  flex-direction: row;
}
.flex-col{
  flex-direction: column;
}
.flex-wrap{
  flex-wrap: wrap;
}
.items-start{
  align-items: flex-start;
}
.items-end{
  align-items: flex-end;
}
.items-center{
  align-items: center;
}
.items-baseline{
  align-items: baseline;
}
.justify-start{
  justify-content: flex-start;
}
.justify-end{
  justify-content: flex-end;
}
.justify-center{
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.gap-0{
  gap: 0px;
}
.gap-1{
  gap: 0.25rem;
}
.gap-10{
  gap: 2.5rem;
}
.gap-2{
  gap: 0.5rem;
}
.gap-3{
  gap: 0.75rem;
}
.gap-3\.5{
  gap: 0.875rem;
}
.gap-4{
  gap: 1rem;
}
.gap-5{
  gap: 1.25rem;
}
.gap-6{
  gap: 1.5rem;
}
.gap-8{
  gap: 2rem;
}
.gap-x-3{
  column-gap: 0.75rem;
}
.gap-x-4{
  column-gap: 1rem;
}
.gap-y-1{
  row-gap: 0.25rem;
}
.gap-y-2{
  row-gap: 0.5rem;
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.overflow-auto{
  overflow: auto;
}
.overflow-hidden{
  overflow: hidden;
}
.overflow-y-auto{
  overflow-y: auto;
}
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap{
  white-space: nowrap;
}
.whitespace-pre-wrap{
  white-space: pre-wrap;
}
.break-all{
  word-break: break-all;
}
.rounded{
  border-radius: 0.25rem;
}
.rounded-2xl{
  border-radius: 1rem;
}
.rounded-full{
  border-radius: 9999px;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.rounded-md{
  border-radius: 0.375rem;
}
.rounded-xl{
  border-radius: 0.75rem;
}
.border{
  border-width: 1px;
}
.border-0{
  border-width: 0px;
}
.border-2{
  border-width: 2px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-l{
  border-left-width: 1px;
}
.border-r{
  border-right-width: 1px;
}
.border-t{
  border-top-width: 1px;
}
.border-none{
  border-style: none;
}
.\!border-red-600{
  --tw-border-opacity: 1 !important;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1)) !important;
}
.border-amber-200{
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-blue-200{
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-blue-400{
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.border-gray-200{
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-green-200{
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}
.border-primary-500{
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--p-primary-500) calc(100% * var(--tw-border-opacity, 1)), transparent);
}
.border-purple-200{
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}
.border-red-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-300{
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.border-red-400{
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.border-surface-200{
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--p-surface-200) calc(100% * var(--tw-border-opacity, 1)), transparent);
}
.border-surface-300{
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--p-surface-300) calc(100% * var(--tw-border-opacity, 1)), transparent);
}
.border-surface-700{
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--p-surface-700) calc(100% * var(--tw-border-opacity, 1)), transparent);
}
.border-transparent{
  border-color: transparent;
}
.\!bg-red-600{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)) !important;
}
.bg-\[var\(--surface-border\)\]{
  background-color: var(--surface-border);
}
.bg-amber-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-blue-100{
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-50{
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-500{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-400{
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.bg-gray-50{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-green-100{
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-50{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-green-500{
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-primary-100{
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--p-primary-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
}
.bg-primary-50{
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--p-primary-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
}
.bg-purple-50{
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}
.bg-red-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-400{
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}
.bg-red-50{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-surface-0{
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--p-surface-0) calc(100% * var(--tw-bg-opacity, 1)), transparent);
}
.bg-surface-100{
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--p-surface-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
}
.bg-surface-50{
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--p-surface-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
}
.bg-transparent{
  background-color: transparent;
}
.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-yellow-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.bg-cover{
  background-size: cover;
}
.object-contain{
  object-fit: contain;
}
.object-cover{
  object-fit: cover;
}
.p-0{
  padding: 0px;
}
.p-0\.5{
  padding: 0.125rem;
}
.p-1{
  padding: 0.25rem;
}
.p-2{
  padding: 0.5rem;
}
.p-3{
  padding: 0.75rem;
}
.p-4{
  padding: 1rem;
}
.p-6{
  padding: 1.5rem;
}
.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-12{
  padding-left: 3rem;
  padding-right: 3rem;
}
.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-0{
  padding-bottom: 0px;
}
.pb-1{
  padding-bottom: 0.25rem;
}
.pb-2{
  padding-bottom: 0.5rem;
}
.pb-3{
  padding-bottom: 0.75rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pb-7{
  padding-bottom: 1.75rem;
}
.pl-1{
  padding-left: 0.25rem;
}
.pl-2{
  padding-left: 0.5rem;
}
.pl-3{
  padding-left: 0.75rem;
}
.pl-4{
  padding-left: 1rem;
}
.pl-5{
  padding-left: 1.25rem;
}
.pl-6{
  padding-left: 1.5rem;
}
.pl-8{
  padding-left: 2rem;
}
.pr-1{
  padding-right: 0.25rem;
}
.pr-2{
  padding-right: 0.5rem;
}
.pr-3{
  padding-right: 0.75rem;
}
.pr-4{
  padding-right: 1rem;
}
.pt-1{
  padding-top: 0.25rem;
}
.pt-2{
  padding-top: 0.5rem;
}
.pt-3{
  padding-top: 0.75rem;
}
.pt-4{
  padding-top: 1rem;
}
.pt-5{
  padding-top: 1.25rem;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}
.font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.\!text-2xl{
  font-size: 1.5rem !important;
  line-height: 2rem !important;
}
.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl{
  font-size: 3rem;
  line-height: 1;
}
.text-6xl{
  font-size: 3.75rem;
  line-height: 1;
}
.text-7xl{
  font-size: 4.5rem;
  line-height: 1;
}
.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold{
  font-weight: 700;
}
.font-medium{
  font-weight: 500;
}
.font-normal{
  font-weight: 400;
}
.font-semibold{
  font-weight: 600;
}
.uppercase{
  text-transform: uppercase;
}
.lowercase{
  text-transform: lowercase;
}
.italic{
  font-style: italic;
}
.leading-relaxed{
  line-height: 1.625;
}
.tracking-wide{
  letter-spacing: 0.025em;
}
.tracking-wider{
  letter-spacing: 0.05em;
}
.text-amber-700{
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-800{
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-amber-900{
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.text-blue-500{
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-blue-600{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700{
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-800{
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-blue-900{
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.text-emerald-500{
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-gray-300{
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-green-400{
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-green-500{
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-green-600{
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-700{
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-green-800{
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-orange-500{
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.text-orange-600{
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-primary{
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--p-primary-color) calc(100% * var(--tw-text-opacity, 1)), transparent);
}
.text-primary-500{
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--p-primary-500) calc(100% * var(--tw-text-opacity, 1)), transparent);
}
.text-primary-600{
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--p-primary-600) calc(100% * var(--tw-text-opacity, 1)), transparent);
}
.text-primary-700{
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--p-primary-700) calc(100% * var(--tw-text-opacity, 1)), transparent);
}
.text-purple-500{
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}
.text-purple-800{
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}
.text-red-500{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800{
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-red-900{
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}
.text-surface-500{
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--p-surface-500) calc(100% * var(--tw-text-opacity, 1)), transparent);
}
.text-surface-700{
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--p-surface-700) calc(100% * var(--tw-text-opacity, 1)), transparent);
}
.text-surface-900{
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--p-surface-900) calc(100% * var(--tw-text-opacity, 1)), transparent);
}
.text-surface-950{
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--p-surface-950) calc(100% * var(--tw-text-opacity, 1)), transparent);
}
.text-violet-600{
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-yellow-600{
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.underline{
  text-decoration-line: underline;
}
.line-through{
  text-decoration-line: line-through;
}
.opacity-0{
  opacity: 0;
}
.opacity-30{
  opacity: 0.3;
}
.opacity-40{
  opacity: 0.4;
}
.opacity-50{
  opacity: 0.5;
}
.shadow-\[0px_1px_2px_0px_rgba\(18\2c 18\2c 23\2c 0\.05\)\;\]{
  --tw-shadow: 0px 1px 2px 0px rgba(18,18,23,0.05);;
  --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0px_56px_16px_0px_rgba\(0\2c 0\2c 0\2c 0\.00\)\2c 0px_36px_14px_0px_rgba\(0\2c 0\2c 0\2c 0\.01\)\2c 0px_20px_12px_0px_rgba\(0\2c 0\2c 0\2c 0\.02\)\2c 0px_9px_9px_0px_rgba\(0\2c 0\2c 0\2c 0\.03\)\2c 0px_2px_5px_0px_rgba\(0\2c 0\2c 0\2c 0\.04\)\]{
  --tw-shadow: 0px 56px 16px 0px rgba(0,0,0,0.00),0px 36px 14px 0px rgba(0,0,0,0.01),0px 20px 12px 0px rgba(0,0,0,0.02),0px 9px 9px 0px rgba(0,0,0,0.03),0px 2px 5px 0px rgba(0,0,0,0.04);
  --tw-shadow-colored: 0px 56px 16px 0px var(--tw-shadow-color), 0px 36px 14px 0px var(--tw-shadow-color), 0px 20px 12px 0px var(--tw-shadow-color), 0px 9px 9px 0px var(--tw-shadow-color), 0px 2px 5px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-150{
  transition-duration: 150ms;
}
.border-surface{
  border-color: var(--p-content-border-color);
}
.text-color{
  color: var(--p-text-color);
}
.text-muted-color{
  color: var(--p-text-muted-color);
}
@keyframes enter{
  from{
    opacity: var(--p-enter-opacity, 1);
    transform: translate3d(var(--p-enter-translate-x, 0), var(--p-enter-translate-y, 0), 0) scale3d(var(--p-enter-scale, 1), var(--p-enter-scale, 1), var(--p-enter-scale, 1)) rotate(var(--p-enter-rotate, 0));
  }
}
@keyframes leave{
  to{
    opacity: var(--p-leave-opacity, 1);
    transform: translate3d(var(--p-leave-translate-x, 0), var(--p-leave-translate-y, 0), 0) scale3d(var(--p-leave-scale, 1), var(--p-leave-scale, 1), var(--p-leave-scale, 1)) rotate(var(--p-leave-rotate, 0));
  }
}
:root {
  --primary-color: var(--p-primary-color);
  --primary-contrast-color: var(--p-primary-contrast-color);
  --text-color: var(--p-text-color);
  --text-muted-color: var(--p-text-muted-color);
  --surface-border: var(--p-content-border-color);
  --surface-card: var(--p-content-background);
  --surface-hover: var(--p-content-hover-background);
  --surface-overlay: var(--p-overlay-popover-background);
  --transition-duration: var(--p-transition-duration);
  --border-radius: var(--p-content-border-radius);
  --focus-ring-shadow: var(--p-focus-ring-shadow);
  --surface-ground: #ffffff;
  --surface-card: var(--p-surface-50);
  --popover-background: #ffffff;
  --popover-border-color: var(--surface-border);
  --popover-item-active-background-color: var(--p-surface-100);
  --popover-item-hover-background-color: var(--p-content-hover-background);
  --popover-item-text-color: var(--p-surface-500);
  --popover-item-active-text-color: var(--p-surface-950);
  --menu-bg-color: var(--p-primary-700);
  --menu-bg-color-alt: var(--p-primary-900);
}

:root[class*=app-dark] {
  --surface-ground: var(--p-surface-950);
  --surface-card: var(--p-surface-900);
  --popover-background: var(--p-surface-900);
  --popover-border-color: var(--surface-border);
  --popover-item-active-background-color: var(--p-surface-800);
  --popover-item-hover-background-color: var(--p-content-hover-background);
  --popover-item-text-color: var(--p-surface-400);
  --popover-item-active-text-color: var(--p-surface-0);
  --menu-bg-color: color-mix(in srgb, var(--p-primary-500), transparent 95%);
  --menu-bg-color-alt: var(--p-surface-950);
}

@font-face {
  font-family: "InterDisplay";
  src: url('InterDisplay-Black.450d71a708c6292e.otf') format("opentype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "InterDisplay";
  src: url('InterDisplay-BlackItalic.02d98853570b8769.otf') format("opentype");
  font-weight: 900;
  font-style: italic;
}
@font-face {
  font-family: "InterDisplay";
  src: url('InterDisplay-Bold.ad84946c8a02407e.otf') format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "InterDisplay";
  src: url('InterDisplay-BoldItalic.345d29c941acfa03.otf') format("opentype");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "InterDisplay";
  src: url('InterDisplay-ExtraBold.8f6ee3ad0e3f168d.otf') format("opentype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "InterDisplay";
  src: url('InterDisplay-ExtraBoldItalic.614f4bbc9343a13a.otf') format("opentype");
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: "InterDisplay";
  src: url('InterDisplay-ExtraLight.a1bc688db0e9badb.otf') format("opentype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "InterDisplay";
  src: url('InterDisplay-ExtraLightItalic.40c35aed32124bf6.otf') format("opentype");
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: "InterDisplay";
  src: url('InterDisplay-Italic.7170d3c23b36f42f.otf') format("opentype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "InterDisplay";
  src: url('InterDisplay-Light.5e84b21b9eefdf29.otf') format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "InterDisplay";
  src: url('InterDisplay-LightItalic.9374cec6b94c82e7.otf') format("opentype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "InterDisplay";
  src: url('InterDisplay-Medium.e83cf515dd3f812e.otf') format("opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "InterDisplay";
  src: url('InterDisplay-MediumItalic.34bdbf04d25e676c.otf') format("opentype");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "InterDisplay";
  src: url('InterDisplay-Regular.58f48e71467c5dbc.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "InterDisplay";
  src: url('InterDisplay-SemiBold.d837c77f4f828c0a.otf') format("opentype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "InterDisplay";
  src: url('InterDisplay-SemiBoldItalic.08ebed5d08a84821.otf') format("opentype");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "InterDisplay";
  src: url('InterDisplay-Thin.ed5183c8ffdca6b0.otf') format("opentype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "InterDisplay";
  src: url('InterDisplay-ThinItalic.54f38febff665c2e.otf') format("opentype");
  font-weight: 100;
  font-style: italic;
}
.card {
  background: var(--surface-card);
  padding: 1.5rem;
  border: 1px solid var(--surface-border);
  margin-bottom: 2rem;
  border-radius: 1rem;
}
.card:last-child {
  margin-bottom: 0;
}

.p-toast.p-toast-top-right, .p-toast.p-toast-top-left, .p-toast.p-toast-top-center {
  top: 70px;
}

html {
  height: 100%;
  font-size: 14px;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  line-height: 1.2;
}

body {
  font-family: "InterDisplay", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: var(--text-color);
  background-color: var(--surface-ground);
  padding: 0;
  margin: 0;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
}

img {
  max-width: none !important;
}

.layout-topbar {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--surface-border);
  position: static;
  width: calc(100% - 4rem);
  margin: 0 auto;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-color);
  transition: transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
}
.layout-topbar .topbar-left {
  display: flex;
  align-items: center;
}
.layout-topbar .topbar-left .horizontal-logo {
  display: none;
}
.layout-topbar .menu-button {
  width: 2.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  color: var(--text-color);
  overflow: hidden;
  border-radius: var(--border-radius);
  background: transparent;
  transition: background-color var(--transition-duration), box-shadow var(--transition-duration);
  display: block;
  cursor: pointer;
  outline: 0 none;
}
.layout-topbar .menu-button:hover {
  background: var(--surface-hover);
}
.layout-topbar .menu-button:focus {
  box-shadow: var(--focus-ring-shadow);
}
.layout-topbar .menu-button i {
  line-height: inherit;
  font-size: 1.125rem;
}
.layout-topbar .topbar-separator {
  display: block;
  width: 1px;
  border-left: 1px solid var(--surface-border);
  align-self: stretch;
  margin: 0 1rem;
}
.layout-topbar .mobile-logo {
  display: none;
}
.layout-topbar .viewname {
  font-weight: 600;
  font-size: 1.25rem;
}
.layout-topbar .topbar-menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  align-items: center;
}
.layout-topbar .topbar-menu > li {
  margin-left: 1rem;
  position: relative;
}
.layout-topbar .topbar-menu > li:first {
  margin-left: 0;
}
.layout-topbar .topbar-menu > li.profile-item > a {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 600;
}
.layout-topbar .topbar-menu > li.profile-item .profile-image {
  width: 2.5rem;
  height: 2.5rem;
}
.layout-topbar .topbar-menu > li > a {
  width: 2.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  color: var(--text-color);
  overflow: hidden;
  border-radius: var(--border-radius);
  transition: background-color var(--transition-duration), box-shadow var(--transition-duration);
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  outline: 0 none;
}
.layout-topbar .topbar-menu > li > a:hover {
  background: var(--surface-hover);
}
.layout-topbar .topbar-menu > li > a:focus {
  box-shadow: var(--focus-ring-shadow);
}
.layout-topbar .topbar-menu > li > a i {
  line-height: inherit;
  font-size: 1.125rem;
}
.layout-topbar .topbar-menu > li > a .topbar-badge {
  position: absolute;
  display: block;
  right: 0;
  top: 0;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.714rem;
  border-radius: 50%;
  font-weight: 600;
  background: var(--primary-color);
  color: var(--primary-contrast-color);
}

.search-container {
  background: var(--surface-overlay);
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  padding: 2rem;
  border-radius: var(--border-radius);
  position: relative;
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  border: var(--surface-border);
  backface-visibility: hidden;
  pointer-events: all;
}
.search-container input {
  appearance: none;
  font-size: 1.5rem;
  text-indent: 2.5rem;
  padding: 0.5rem;
  width: 100%;
}
.search-container i {
  color: var(--text-muted-color);
  width: 2rem;
  font-size: 1.5rem;
  position: absolute;
  top: 50%;
  margin-top: -0.75rem;
  margin-left: 1rem;
}

.layout-sidebar {
  margin-left: 0;
  width: 17rem;
  height: 100%;
  border-radius: 0 1.5rem 1.5rem 0;
  overflow: hidden;
  box-shadow: 0px 1px 2px 0px rgba(18, 18, 23, 0.05);
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
          user-select: none;
  transition: margin 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99), transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
}
.layout-sidebar .logo {
  text-align: center;
  display: flex;
  outline: 0 none;
  padding: 1rem 1rem;
  transition: background-color var(--transition-duration), box-shadow var(--transition-duration);
}
.layout-sidebar .logo-image {
  width: 2rem;
  height: 2rem;
  vertical-align: middle;
  margin-right: 0.5rem;
}
.layout-sidebar .app-name {
  vertical-align: middle;
  font-size: 1.5rem;
  letter-spacing: 0.2px;
}

.layout-menu-container {
  overflow: auto;
  flex: 1;
  padding: 1rem;
}

.layout-content .layout-breadcrumb {
  display: none;
}

.layout-menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.layout-menu .menu-separator {
  margin: 0.25rem 0;
}
.layout-menu .layout-root-menuitem > .layout-menuitem-root-text {
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.05rem;
  padding: 0rem 0 0.5rem 0;
}
.layout-menu .layout-root-menuitem > a {
  display: none;
}
.layout-menu .layout-root-menuitem .layout-menu-tooltip {
  display: none;
}
.layout-menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.layout-menu ul a {
  display: flex;
  align-items: center;
  position: relative;
  font-weight: 500 !important;
  padding: 0.45rem 0.75rem;
  border-radius: var(--border-radius);
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color var(--transition-duration), box-shadow var(--transition-duration);
}
.layout-menu ul a .layout-menuitem-icon {
  margin-right: 0.5rem;
}
.layout-menu ul a .layout-submenu-toggler {
  font-size: 75%;
  margin-left: auto;
  transition: transform var(--transition-duration);
}
.layout-menu ul li.active-menuitem {
  border-radius: var(--border-radius);
}
.layout-menu ul li.active-menuitem > a .layout-submenu-toggler {
  transform: rotate(-180deg);
}
.layout-menu ul li.active-menuitem > ul {
  max-height: 1000px;
  transition: max-height 1s ease-in-out;
}
.layout-menu ul ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
  border-radius: var(--border-radius);
}
.layout-menu ul ul li a {
  padding-left: 1.5rem;
}
.layout-menu ul ul li li a {
  padding-left: 2.5rem;
}
.layout-menu ul ul li li li a {
  padding-left: 3.5rem;
}
.layout-menu ul ul li li li li a {
  padding-left: 4.5rem;
}
.layout-menu ul ul li li li li li a {
  padding-left: 5.5rem;
}
.layout-menu ul ul li li li li li li a {
  padding-left: 6.5rem;
}

@media screen and (min-width: 992px) {
  .layout-slim .layout-topbar .topbar-left .horizontal-logo {
    display: none;
  }
  .layout-slim .layout-topbar .topbar-left .menu-button {
    display: none;
  }
  .layout-slim .layout-topbar .topbar-left .topbar-separator {
    display: none;
  }
  .layout-slim .layout-sidebar {
    width: 7rem;
    overflow: visible;
    z-index: 999;
  }
  .layout-slim .layout-sidebar .logo {
    justify-content: center;
    padding-right: 2rem;
  }
  .layout-slim .layout-sidebar .logo-image {
    margin-right: 0;
  }
  .layout-slim .layout-sidebar .app-name {
    display: none;
  }
  .layout-slim .layout-sidebar .layout-menu-container {
    overflow: auto;
    padding: 0.75rem;
  }
  .layout-slim .layout-sidebar .layout-menu-container::-webkit-scrollbar {
    display: none;
  }
  .layout-slim .layout-menu .menu-separator {
    display: none;
  }
  .layout-slim .layout-menu ul {
    display: none;
  }
  .layout-slim .layout-menu li.active-menuitem > ul {
    display: block;
  }
  .layout-slim .layout-menu .layout-root-menuitem {
    border-radius: var(--border-radius);
  }
  .layout-slim .layout-menu .layout-root-menuitem > .layout-menuitem-root-text {
    display: none;
  }
  .layout-slim .layout-menu .layout-root-menuitem > a {
    display: block;
    text-align: center;
    border-radius: var(--border-radius);
    padding: 0.5rem 0;
    cursor: pointer;
    outline: none;
    transition: background-color var(--transition-duration);
  }
  .layout-slim .layout-menu .layout-root-menuitem > a .layout-submenu-toggler {
    display: none;
  }
  .layout-slim .layout-menu .layout-root-menuitem > a .layout-menuitem-icon {
    font-size: 1.25rem;
  }
  .layout-slim .layout-menu .layout-root-menuitem > a .layout-menuitem-text {
    font-size: 0.875rem;
    display: block;
    margin-top: 0.25rem;
  }
  .layout-slim .layout-menu .layout-root-menuitem > ul {
    position: absolute;
    left: 7.5rem;
    top: 0;
    min-width: 15rem;
    background: var(--popover-background);
    border: 1px solid var(--popover-border-color);
    box-shadow: 0px 56px 16px 0px rgba(0, 0, 0, 0), 0px 36px 14px 0px rgba(0, 0, 0, 0.01), 0px 20px 12px 0px rgba(0, 0, 0, 0.02), 0px 9px 9px 0px rgba(0, 0, 0, 0.03), 0px 2px 5px 0px rgba(0, 0, 0, 0.04);
    border-radius: 1rem;
    padding: 0.5rem;
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.05, 0.74, 0.2, 0.99);
    max-height: 20rem;
    overflow: auto;
  }
  .layout-slim .layout-menu .layout-root-menuitem > ul .active-menuitem {
    background-color: transparent;
  }
  .layout-slim .layout-menu .layout-root-menuitem > ul .active-menuitem > a {
    color: var(--popover-item-active-text-color);
    background-color: var(--popover-item-active-background-color);
  }
  .layout-slim .layout-menu .layout-root-menuitem > ul a {
    color: var(--popover-item-text-color);
    border-radius: 0.5rem;
    margin: 0.25rem 0;
  }
  .layout-slim .layout-menu .layout-root-menuitem > ul a:hover {
    background-color: var(--popover-item-hover-background-color);
  }
  .layout-reveal .topbar-left .horizontal-logo {
    display: none;
  }
  .layout-reveal .topbar-left .menu-button {
    display: none;
  }
  .layout-reveal .topbar-left .topbar-separator {
    display: none;
  }
  .layout-reveal .layout-sidebar {
    height: 100%;
    top: 0;
    transition: margin 0.3s cubic-bezier(0, 0, 0.2, 1);
    margin-left: -12rem;
    z-index: 999;
  }
  .layout-reveal .layout-sidebar .sidebar-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0.5rem;
  }
  .layout-reveal .layout-sidebar .sidebar-header .logo {
    width: 100%;
    border: none;
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding-right: 0.5rem;
  }
  .layout-reveal .layout-sidebar .sidebar-header .logo .app-name {
    display: none;
  }
  .layout-reveal .layout-sidebar .sidebar-header .layout-sidebar-anchor {
    display: none;
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    border: var(--d-menu-separator-border);
    border-width: 2px;
    background-color: transparent;
    outline: none;
    transition: background-color var(--transition-duration), transform 0.3s;
  }
  .layout-reveal .layout-sidebar .layout-menu-container {
    overflow: hidden;
  }
  .layout-reveal .layout-sidebar .layout-menu .menu-separator {
    display: none;
  }
  .layout-reveal .layout-sidebar .layout-menu .layout-root-menuitem > .layout-menuitem-root-text {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 500;
    padding: 0.5rem 0 0.5rem 0;
    opacity: 0;
  }
  .layout-reveal .layout-sidebar .layout-menu .layout-root-menuitem > .layout-menuitem-root-text > span {
    margin-right: auto;
  }
  .layout-reveal .layout-sidebar .layout-menu .layout-root-menuitem > .layout-menuitem-root-text > .layout-menuitem-root-icon {
    display: block;
    margin-right: 0.125rem;
  }
  .layout-reveal .layout-sidebar .layout-menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  .layout-reveal .layout-sidebar .layout-menu ul a .layout-menuitem-text {
    order: 1;
    margin-right: auto;
  }
  .layout-reveal .layout-sidebar .layout-menu ul a .layout-submenu-toggler {
    order: 2;
    display: none;
    margin-right: 0.5rem;
  }
  .layout-reveal .layout-sidebar .layout-menu ul a .layout-menuitem-icon {
    order: 3;
    margin-right: 0;
    font-size: 1.25rem;
    width: auto;
  }
  .layout-reveal.layout-sidebar-active .layout-sidebar {
    margin-left: 0;
  }
  .layout-reveal.layout-sidebar-active .layout-sidebar .layout-menu-container {
    overflow: auto;
  }
  .layout-reveal.layout-sidebar-active .layout-sidebar .sidebar-header {
    justify-content: space-between;
    padding: 1rem;
  }
  .layout-reveal.layout-sidebar-active .layout-sidebar .sidebar-header .logo {
    width: 100%;
    border: none;
    justify-content: flex-start;
  }
  .layout-reveal.layout-sidebar-active .layout-sidebar .sidebar-header .logo .app-name {
    display: inline-block;
  }
  .layout-reveal.layout-sidebar-active .layout-sidebar .sidebar-header .layout-sidebar-anchor {
    display: flex;
    flex-shrink: 0;
  }
  .layout-reveal.layout-sidebar-active .layout-sidebar .layout-menu .menu-separator {
    display: block;
  }
  .layout-reveal.layout-sidebar-active .layout-sidebar .layout-menu .layout-root-menuitem > .layout-menuitem-root-text {
    opacity: 1;
  }
  .layout-reveal.layout-sidebar-active .layout-sidebar .layout-menu .layout-root-menuitem > .layout-menuitem-root-text > .layout-menuitem-root-icon {
    display: none;
  }
  .layout-reveal.layout-sidebar-active .layout-sidebar .layout-menu ul a {
    padding: 0.45rem 0.75rem;
  }
  .layout-reveal.layout-sidebar-active .layout-sidebar .layout-menu ul a .layout-submenu-toggler {
    display: block;
  }
  .layout-reveal.layout-sidebar-active .layout-sidebar .layout-menu ul ul {
    overflow: hidden;
    border-radius: var(--border-radius);
  }
  .layout-reveal.layout-sidebar-active .layout-sidebar .layout-menu ul ul li a {
    padding-left: 2.5rem;
  }
  .layout-reveal.layout-sidebar-active .layout-sidebar .layout-menu ul ul li li a {
    padding-left: 3rem;
  }
  .layout-reveal.layout-sidebar-active .layout-sidebar .layout-menu ul ul li li li a {
    padding-left: 3.5rem;
  }
  .layout-reveal.layout-sidebar-active .layout-sidebar .layout-menu ul ul li li li li a {
    padding-left: 4rem;
  }
  .layout-reveal.layout-sidebar-active .layout-sidebar .layout-menu ul ul li li li li li a {
    padding-left: 5.5rem;
  }
  .layout-reveal.layout-sidebar-active .layout-sidebar .layout-menu ul ul li li li li li li a {
    padding-left: 5rem;
  }
  .layout-reveal.layout-sidebar-anchored .sidebar-header .layout-sidebar-anchor {
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
  }
  .layout-drawer .layout-topbar .topbar-left .horizontal-logo {
    display: none;
  }
  .layout-drawer .layout-topbar .topbar-left .menu-button {
    display: none;
  }
  .layout-drawer .layout-topbar .topbar-left .topbar-separator {
    display: none;
  }
  .layout-drawer .layout-sidebar {
    height: 100%;
    top: 0;
    transition: width 0.3s cubic-bezier(0, 0, 0.2, 1);
    width: 4.5rem;
    z-index: 999;
  }
  .layout-drawer .layout-sidebar .sidebar-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0.5rem;
  }
  .layout-drawer .layout-sidebar .sidebar-header .logo {
    width: 100%;
    border: none;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    margin: 0;
    transition: all 0.15s;
  }
  .layout-drawer .layout-sidebar .sidebar-header .logo .logo-image {
    margin-right: 0.75rem;
  }
  .layout-drawer .layout-sidebar .sidebar-header .logo .app-name {
    opacity: 0;
    width: 0;
    transition: all 0.15s;
  }
  .layout-drawer .layout-sidebar .sidebar-header .layout-sidebar-anchor {
    display: none;
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    border: var(--d-menu-separator-border);
    border-width: 2px;
    background-color: transparent;
    outline: none;
    transition: background-color var(--transition-duration), transform 0.3s;
  }
  .layout-drawer .layout-sidebar .layout-menu-container {
    overflow: hidden;
  }
  .layout-drawer .layout-sidebar .layout-menu {
    transition: all 0.4s;
  }
  .layout-drawer .layout-sidebar .layout-menu .layout-root-menuitem > .layout-menuitem-root-text {
    opacity: 0;
    white-space: nowrap;
    transition: all 0.1s;
    min-height: 2.2rem;
  }
  .layout-drawer .layout-sidebar .layout-menu .layout-root-menuitem > .layout-menuitem-root-text > span {
    margin-right: auto;
  }
  .layout-drawer .layout-sidebar .layout-menu .layout-root-menuitem > .layout-menuitem-root-text > .layout-menuitem-root-icon {
    display: block;
    margin-right: 0.125rem;
    font-size: 1.25rem;
  }
  .layout-drawer .layout-sidebar .layout-menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  .layout-drawer .layout-sidebar .layout-menu ul a span {
    opacity: 0;
    white-space: nowrap;
    transition: all 0.1s;
  }
  .layout-drawer .layout-sidebar .layout-menu ul a .layout-menuitem-icon {
    font-size: 1.25rem;
    width: auto;
  }
  .layout-drawer.layout-sidebar-active .layout-sidebar {
    width: 16rem;
  }
  .layout-drawer.layout-sidebar-active .layout-sidebar .layout-menu-container {
    overflow: auto;
  }
  .layout-drawer.layout-sidebar-active .layout-sidebar .sidebar-header {
    justify-content: space-between;
    padding: 1rem;
  }
  .layout-drawer.layout-sidebar-active .layout-sidebar .sidebar-header .logo {
    width: 100%;
    border: none;
    justify-content: flex-start;
  }
  .layout-drawer.layout-sidebar-active .layout-sidebar .sidebar-header .logo .app-name {
    display: inline-block;
    opacity: 1;
    width: auto;
    transition: all 0.15s;
  }
  .layout-drawer.layout-sidebar-active .layout-sidebar .sidebar-header .layout-sidebar-anchor {
    display: flex;
    flex-shrink: 0;
  }
  .layout-drawer.layout-sidebar-active .layout-sidebar .layout-menu .layout-root-menuitem > .layout-menuitem-root-text {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 500;
    padding: 0.5rem 0 0.5rem 0;
    opacity: 1;
    transition: all 0.3s;
  }
  .layout-drawer.layout-sidebar-active .layout-sidebar .layout-menu .layout-root-menuitem > .layout-menuitem-root-text > .layout-menuitem-root-icon {
    display: none;
  }
  .layout-drawer.layout-sidebar-active .layout-sidebar .layout-menu ul a {
    padding: 0.45rem 0.75rem;
  }
  .layout-drawer.layout-sidebar-active .layout-sidebar .layout-menu ul a .layout-submenu-toggler {
    display: block;
  }
  .layout-drawer.layout-sidebar-active .layout-sidebar .layout-menu ul a span {
    opacity: 1;
    transition: all 0.3s;
  }
  .layout-drawer.layout-sidebar-active .layout-sidebar .layout-menu ul ul {
    overflow: hidden;
    border-radius: var(--border-radius);
  }
  .layout-drawer.layout-sidebar-active .layout-sidebar .layout-menu ul ul li a {
    padding-left: 2.5rem;
  }
  .layout-drawer.layout-sidebar-active .layout-sidebar .layout-menu ul ul li li a {
    padding-left: 3rem;
  }
  .layout-drawer.layout-sidebar-active .layout-sidebar .layout-menu ul ul li li li a {
    padding-left: 3.5rem;
  }
  .layout-drawer.layout-sidebar-active .layout-sidebar .layout-menu ul ul li li li li a {
    padding-left: 4rem;
  }
  .layout-drawer.layout-sidebar-active .layout-sidebar .layout-menu ul ul li li li li li a {
    padding-left: 5.5rem;
  }
  .layout-drawer.layout-sidebar-active .layout-sidebar .layout-menu ul ul li li li li li li a {
    padding-left: 5rem;
  }
  .layout-drawer.layout-sidebar-anchored .sidebar-header .layout-sidebar-anchor {
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
  }
  .layout-drawer.layout-sidebar-dark.layout-sidebar-anchored .sidebar-header .layout-sidebar-anchor {
    background-color: var(--text-color);
    border: 2px solid var(--text-color);
  }
  .layout-horizontal {
    flex-direction: column;
    width: 100%;
  }
  .layout-horizontal .layout-content .layout-breadcrumb {
    display: flex;
    margin-bottom: var(--qb-breadcrumb-margin-bottom); /* Uses QB variable */
  }
  .layout-horizontal .layout-topbar {
    width: auto;
    background: transparent;
    border: none;
    padding: 1rem;
  }
  .layout-horizontal .layout-topbar .topbar-left {
    display: none;
  }
  .layout-horizontal .layout-topbar .topbar-left .horizontal-logo {
    display: block;
    height: 2rem;
    cursor: pointer;
  }
  .layout-horizontal .layout-topbar .topbar-left .menu-button {
    display: none;
  }
  .layout-horizontal .layout-topbar .topbar-left .viewname {
    display: none;
  }
  .layout-horizontal .layout-topbar .topbar-left .topbar-separator {
    display: block;
  }
  .layout-horizontal .layout-topbar .topbar-left .layout-breadcrumb {
    display: none;
  }
  .layout-horizontal .layout-topbar .topbar-right {
    display: flex;
    justify-content: flex-end;
  }
  .layout-horizontal .layout-topbar .topbar-right .topbar-menu .profile-item > a {
    padding: 0;
  }
  .layout-horizontal .layout-topbar .topbar-right .topbar-menu .profile-item > a img {
    margin: 0;
  }
  .layout-horizontal .layout-topbar .topbar-right .topbar-menu .profile-item .profile-name {
    display: none;
  }
  .layout-horizontal .layout-content-wrapper .layout-topbar {
    display: none;
  }
  .layout-horizontal .layout-sidebar {
    width: 100%;
    height: auto;
    overflow: visible;
    flex-direction: row;
    align-items: center;
    position: relative;
    box-shadow: none;
    border: 0 none;
    transition: none;
    padding: 0 1rem;
    border-radius: 0 0 1.5rem 1.5rem;
    border-right: none;
    border-bottom: var(--d-sidebar-border);
  }
  .layout-horizontal .layout-sidebar .layout-menu-container {
    overflow: auto;
    flex: 1;
  }
  .layout-horizontal .layout-sidebar .layout-menu-container::-webkit-scrollbar {
    display: none;
  }
  .layout-horizontal .layout-content-wrapper .viewname {
    padding-bottom: 1.5rem;
    display: block;
    font-weight: 600;
  }
  .layout-horizontal .layout-menu {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: fit-content;
    height: 100%;
  }
  .layout-horizontal .layout-menu ul {
    display: none;
  }
  .layout-horizontal .layout-menu li.active-menuitem > ul {
    display: block;
  }
  .layout-horizontal .layout-menu li.active-menuitem > a .layout-submenu-toggler {
    transform: rotate(-180deg);
  }
  .layout-horizontal .layout-menu .layout-root-menuitem {
    border-radius: var(--border-radius);
  }
  .layout-horizontal .layout-menu .layout-root-menuitem > .layout-menuitem-root-text {
    display: none;
  }
  .layout-horizontal .layout-menu .layout-root-menuitem > a {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    outline: none;
    transition: background-color var(--transition-duration);
  }
  .layout-horizontal .layout-menu .layout-root-menuitem > a .layout-submenu-toggler {
    display: block;
    margin-left: auto;
    transition: transform 0.2s;
  }
  .layout-horizontal .layout-menu .layout-root-menuitem > a .layout-menuitem-icon {
    font-size: 1.25rem;
  }
  .layout-horizontal .layout-menu .layout-root-menuitem > a .layout-menuitem-text {
    font-size: 0.875rem;
    display: block;
    margin-left: 0.75rem;
    margin-right: 0.75rem;
    white-space: nowrap;
  }
  .layout-horizontal .layout-menu .layout-root-menuitem > ul {
    position: absolute;
    top: calc(100% + 0.25rem);
    min-width: 15rem;
    background: var(--popover-background) !important;
    border: 1px solid var(--popover-border-color);
    box-shadow: 0px 56px 16px 0px rgba(0, 0, 0, 0), 0px 36px 14px 0px rgba(0, 0, 0, 0.01), 0px 20px 12px 0px rgba(0, 0, 0, 0.02), 0px 9px 9px 0px rgba(0, 0, 0, 0.03), 0px 2px 5px 0px rgba(0, 0, 0, 0.04);
    border-radius: 1rem;
    padding: 0.5rem;
    overflow: auto;
    max-height: 20rem;
  }
  .layout-horizontal .layout-menu .layout-root-menuitem > ul .active-menuitem {
    background-color: transparent;
  }
  .layout-horizontal .layout-menu .layout-root-menuitem > ul .active-menuitem > a {
    color: var(--popover-item-active-text-color);
    background-color: var(--popover-item-active-background-color);
  }
  .layout-horizontal .layout-menu .layout-root-menuitem > ul a {
    color: var(--popover-item-text-color);
    border-radius: 0.5rem;
    margin: 0.25rem 0;
  }
  .layout-horizontal .layout-menu .layout-root-menuitem > ul a:hover {
    background-color: var(--popover-item-hover-background-color);
  }
  .layout-sidebar-primary.layout-horizontal .layout-topbar .topbar-right .topbar-menu .app-config-button {
    color: var(--p-surface-0);
  }
  .layout-sidebar-primary.layout-horizontal .layout-topbar .topbar-right .topbar-menu .app-config-button::after, .layout-sidebar-primary.layout-horizontal .layout-topbar .topbar-right .topbar-menu .app-config-button::before {
    border-color: var(--p-surface-0);
  }
  .layout-sidebar-dark.layout-horizontal .layout-topbar .topbar-right .topbar-menu .app-config-button {
    color: var(--p-surface-0);
  }
  .layout-sidebar-dark.layout-horizontal .layout-topbar .topbar-right .topbar-menu .app-config-button::after, .layout-sidebar-dark.layout-horizontal .layout-topbar .topbar-right .topbar-menu .app-config-button::before {
    border-color: var(--p-surface-0);
  }
  .layout-compact .layout-topbar .topbar-left .horizontal-logo {
    display: none;
  }
  .layout-compact .layout-topbar .topbar-left .menu-button {
    display: none;
  }
  .layout-compact .layout-topbar .topbar-left .topbar-separator {
    display: none;
  }
  .layout-compact .layout-sidebar {
    width: 5rem;
    overflow: visible;
    z-index: 999;
  }
  .layout-compact .layout-sidebar .logo {
    margin: 0;
    justify-content: center;
  }
  .layout-compact .layout-sidebar .logo-image {
    margin-right: 0;
  }
  .layout-compact .layout-sidebar .app-name {
    display: none;
  }
  .layout-compact .layout-sidebar .layout-menu-container {
    overflow: auto;
  }
  .layout-compact .layout-sidebar .layout-menu-container::-webkit-scrollbar {
    display: none;
  }
  .layout-compact .layout-menu .menu-separator {
    display: none;
  }
  .layout-compact .layout-menu ul {
    display: none;
  }
  .layout-compact .layout-menu li.active-menuitem > ul {
    display: block;
  }
  .layout-compact .layout-menu .layout-root-menuitem {
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
  }
  .layout-compact .layout-menu .layout-root-menuitem > .layout-menuitem-root-text {
    display: none;
  }
  .layout-compact .layout-menu .layout-root-menuitem > a {
    display: block;
    text-align: center;
    border-radius: var(--border-radius);
    padding: 0.5rem 0;
    cursor: pointer;
    outline: none;
    transition: background-color var(--transition-duration);
  }
  .layout-compact .layout-menu .layout-root-menuitem > a .layout-submenu-toggler {
    display: none;
  }
  .layout-compact .layout-menu .layout-root-menuitem > a .layout-menuitem-icon {
    font-size: 1.25rem;
    margin-top: 4px;
  }
  .layout-compact .layout-menu .layout-root-menuitem > a .layout-menuitem-text {
    display: none;
  }
  .layout-compact .layout-menu .layout-root-menuitem > ul {
    position: absolute;
    left: 5.5rem;
    top: 0;
    min-width: 15rem;
    background: var(--popover-background);
    border: 1px solid var(--popover-border-color);
    box-shadow: 0px 56px 16px 0px rgba(0, 0, 0, 0), 0px 36px 14px 0px rgba(0, 0, 0, 0.01), 0px 20px 12px 0px rgba(0, 0, 0, 0.02), 0px 9px 9px 0px rgba(0, 0, 0, 0.03), 0px 2px 5px 0px rgba(0, 0, 0, 0.04);
    border-radius: 1rem;
    padding: 0.5rem;
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.05, 0.74, 0.2, 0.99);
    max-height: 20rem;
    overflow: auto;
  }
  .layout-compact .layout-menu .layout-root-menuitem > ul .active-menuitem {
    background-color: transparent;
  }
  .layout-compact .layout-menu .layout-root-menuitem > ul .active-menuitem > a {
    color: var(--popover-item-active-text-color);
    background-color: var(--popover-item-active-background-color);
  }
  .layout-compact .layout-menu .layout-root-menuitem > ul a {
    color: var(--popover-item-text-color);
    border-radius: 0.5rem;
    margin: 0.25rem 0;
  }
  .layout-compact .layout-menu .layout-root-menuitem > ul a:hover {
    background-color: var(--popover-item-hover-background-color);
  }
}
.layout-sidebar {
  border-right: var(--d-sidebar-border);
  background: var(--d-sidebar-bg-color);
  background-image: linear-gradient(135deg, var(--d-sidebar-bg-color), var(--d-sidebar-bg-color-alt));
  height: 100%;
  z-index: 10;
}
.layout-sidebar .sidebar-header .layout-sidebar-anchor {
  display: none;
}
.layout-sidebar .app-name {
  color: var(--d-app-name-color);
}
.layout-sidebar .layout-menu .menu-separator {
  height: 1px;
  width: 100%;
  background: rgba(255, 255, 255, 0.25);
}
.layout-sidebar .layout-menu li.active-menuitem > a {
  color: var(--d-menuitem-active-text-color);
}
.layout-sidebar .layout-menu li a {
  color: var(--d-menuitem-text-color);
}
.layout-sidebar .layout-menu li a:hover {
  background: var(--d-menuitem-hover-bg);
}
.layout-sidebar .layout-menu .layout-root-menuitem .layout-menuitem-root-text {
  color: var(--d-menuitem-root-text-color);
}
.layout-sidebar .layout-menu .layout-root-menuitem > ul {
  z-index: 1;
}
.layout-sidebar .layout-menu .layout-root-menuitem > ul > li.active-menuitem {
  background: var(--d-menuitem-active-bg);
}

.app-dark .layout-sidebar-primary::before {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  background-image: radial-gradient(circle at top left, color-mix(in srgb, var(--p-primary-950) 60%, transparent 40%) 0%, transparent 50%);
  width: 60rem;
  height: 100%;
  z-index: 9;
  pointer-events: none;
}

@media screen and (min-width: 992px) {
  .layout-horizontal .layout-topbar {
    background: var(--d-sidebar-bg-color);
    color: var(--d-menuitem-text-color);
  }
  .layout-horizontal .layout-topbar .topbar-separator {
    border-left: var(--d-menu-separator-border);
  }
  .layout-horizontal .layout-topbar .topbar-menu > li.right-sidebar-item > a {
    background: transparent;
    color: var(--d-menuitem-text-color);
  }
  .layout-horizontal .layout-topbar .topbar-menu > li.right-sidebar-item > a:hover {
    background: var(--d-menuitem-hover-bg);
  }
  .layout-horizontal .layout-topbar .topbar-menu > li.right-sidebar-item > a:focus {
    box-shadow: var(--d-menuitem-focus-shadow);
  }
  .layout-horizontal .layout-topbar .topbar-menu > li > a {
    color: var(--d-menuitem-text-color);
  }
  .layout-horizontal .layout-topbar .topbar-menu > li > a:hover {
    background: var(--d-menuitem-hover-bg);
  }
  .layout-horizontal .layout-topbar .topbar-menu > li > a:focus {
    box-shadow: var(--d-menuitem-focus-shadow);
  }
  .layout-horizontal .layout-topbar .topbar-menu > li > a .topbar-badge {
    background: var(--primary-color);
    color: var(--primary-contrast-color);
  }
  .layout-horizontal .layout-topbar .topbar-menu > li > ul.notifications-menu .notification-detail {
    color: var(--d-menuitem-root-text-color);
  }
  .layout-horizontal .layout-sidebar {
    background-image: none;
  }
  .layout-horizontal .layout-sidebar .layout-menu .layout-root-menuitem > ul {
    background: var(--d-sidebar-bg-color);
    background-image: linear-gradient(180deg, var(--d-sidebar-bg-color) 10%, var(--d-sidebar-bg-color-alt) 100%);
  }
  .layout-horizontal .layout-sidebar .layout-menu ul a.active-route {
    background: var(--d-menuitem-active-bg);
  }
  .app-dark .layout-sidebar-primary .layout-sidebar {
    background: transparent;
    background-image: none;
    border: none;
  }
}
@media screen and (max-width: 991px) {
  .layout-sidebar .layout-menu .layout-root-menuitem.active-menuitem {
    background: transparent;
  }
}
.layout-sidebar-primary {
  --d-sidebar-bg-color: var(--menu-bg-color);
  --d-sidebar-bg-color-alt: var(--menu-bg-color-alt);
  --d-sidebar-border: 1px solid var(--surface-border);
  --d-app-name-color: var(--p-surface-0);
  --d-menu-separator-border: 1px solid rgba(255, 255, 255, 0.2);
  --d-menuitem-root-text-color: rgba(255, 255, 255, 0.6);
  --d-menuitem-text-color: rgba(255, 255, 255, 0.64);
  --d-menuitem-hover-bg: rgba(255, 255, 255, 0.1);
  --d-menuitem-active-bg: rgba(255, 255, 255, 0.1);
  --d-menuitem-active-text-color: #ffffff;
  --d-menuitem-focus-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.1);
  --d-sidebar-border: 1px solid transparent;
}

:root[class*=app-dark] .layout-sidebar-primary {
  --d-sidebar-bg-color: var(--p-surface-950);
  --d-sidebar-bg-color-alt: var(--p-surface-950);
  --d-sidebar-border: 1px solid var(--p-surface-700);
}

.layout-sidebar-light {
  --d-sidebar-bg-color: #ffffff;
  --d-sidebar-bg-color-alt: #ffffff;
  --d-sidebar-border: 1px solid var(--surface-border);
  --d-app-name-color: var(--p-surface-950);
  --d-menu-separator-border: 1px solid var(--surface-border);
  --d-menuitem-root-text-color: var(--p-surface-500);
  --d-menuitem-text-color: var(--p-surface-500);
  --d-menuitem-hover-bg: var(--surface-hover);
  --d-menuitem-active-bg: var(--p-surface-50);
  --d-menuitem-active-text-color: var(--p-surface-950);
  --d-menuitem-focus-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.1);
}

.layout-sidebar-dark {
  --d-sidebar-bg-color: var(--p-surface-950);
  --d-sidebar-bg-color-alt: var(--p-surface-950);
  --d-sidebar-border: 1px solid var(--p-surface-700);
  --d-app-name-color: var(--p-surface-0);
  --d-menu-separator-border: 1px solid var(--p-surface-700);
  --d-menuitem-root-text-color: var(--p-surface-500);
  --d-menuitem-text-color: var(--p-surface-400);
  --d-menuitem-hover-bg: rgba(255, 255, 255, 0.05);
  --d-menuitem-active-bg: rgba(255, 255, 255, 0.08);
  --d-menuitem-active-text-color: var(--p-surface-0);
  --d-menuitem-focus-shadow: 0 0 0 1px var(--p-primary-50);
}

.layout-wrapper {
  height: 100dvh; /* Use dynamic viewport height for better mobile/tablet support */
  height: 100vh; /* Fallback for browsers that don't support dvh */
  display: flex;
  transition: all 0.2s ease;
}

@supports (height: 100dvh) {
  .layout-wrapper {
    height: 100dvh;
  }
}
.layout-content-wrapper {
  flex: 1;
  min-height: 0; /* Allow flex child to shrink */
  /* overflow: hidden; need to scroll if content is bigger than window */
  transition: all 0.2s ease;
}

.layout-content-wrapper-inside {
  max-width: 1540px;
  height: 100%;
  min-height: 0; /* Allow flex child to shrink */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.layout-content {
  padding: var(--qb-content-padding-top) 2rem 2rem 2rem; /* Top uses QB variable */
  flex: 1 1 auto;
  min-height: 0; /* Allow flex child to shrink */
  position: relative;
  display: flex;
  flex-direction: column;
}

.layout-breadcrumb ol {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 1rem;
}
.layout-breadcrumb ol li {
  white-space: nowrap;
}

.content-breadcrumb {
  margin-bottom: 2rem;
  padding: 0 0.5rem;
}

.layout-mask {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: -998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease-in-out;
}

.layout-footer {
  height: 4rem;
  padding: 2rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.layout-footer .footer-logo-container {
  display: flex;
  align-items: center;
}
.layout-footer .footer-logo-container img {
  width: 1.5rem;
  height: 1.5rem;
}
.layout-footer .footer-logo-container .footer-app-name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin-left: 0.5rem;
}
.layout-footer .footer-copyright {
  font-size: 0.875rem;
  color: var(--text-muted-color);
}

.layout-config-button {
  display: block;
  position: fixed;
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  background: var(--primary-color);
  color: var(--primary-contrast-color);
  text-align: center;
  top: 50%;
  right: 0;
  margin-top: -1.5rem;
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  transition: background-color var(--transition-duration);
  overflow: hidden;
  cursor: pointer;
  z-index: 999;
  box-shadow: -0.25rem 0 1rem rgba(0, 0, 0, 0.15);
}
.layout-config-button.config-link {
  font-size: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  border: none;
}
.layout-config-button .config-link:focus {
  outline: 0 none;
  outline-offset: 0;
  box-shadow: 0 0 0 1px var(--focus-ring-shadow);
}
.layout-config-button i {
  font-size: 2rem;
  line-height: inherit;
  transform: rotate(0deg);
  transition: transform 1s;
}
.layout-config-button:hover {
  background: var(--p-primary-400);
}

.app-config-button {
  border: 1px solid var(--border-color);
  background-color: var(--card-background);
  position: relative;
  z-index: 0;
  border-radius: 0px;
  width: 2.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
}
.app-config-button i {
  line-height: inherit;
  font-size: 1.125rem;
}
.app-config-button::before, .app-config-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--p-primary-color);
  transition: all 0.5s;
  animation: clippath 3s infinite linear;
  border-radius: 4px;
  opacity: 1;
}
.app-config-button::after {
  animation: clippath 3s infinite -1.5s linear;
}

@keyframes clippath {
  0%, 100% {
    clip-path: inset(0 0 90% 0);
  }
  25% {
    clip-path: inset(0 90% 0 0);
  }
  50% {
    clip-path: inset(90% 0 0 0);
  }
  75% {
    clip-path: inset(0 0 0 90%);
  }
}
@media screen and (min-width: 992px) {
  .layout-static-inactive .layout-sidebar {
    margin-left: -17rem;
  }
  .layout-static-inactive .layout-topbar .menu-button i:before {
    content: "\e901";
  }
  .layout-overlay .layout-topbar .menu-button i:before {
    content: "\e901";
  }
  .layout-overlay .layout-sidebar {
    position: absolute;
    left: 0;
    transform: translateX(-100%);
    background-color: var(--d-sidebar-bg-color);
    z-index: 99999;
  }
  .layout-overlay.layout-overlay-active .layout-mask {
    opacity: 1;
    z-index: 998;
    visibility: visible;
  }
  .layout-overlay.layout-overlay-active .layout-sidebar {
    border-right: var(--d-sidebar-border);
    position: absolute;
    transform: translateX(0);
    box-shadow: 0px 1px 2px 0px rgba(18, 18, 23, 0.05);
    background-color: var(--d-sidebar-bg-color);
  }
}
@media screen and (max-width: 991px) {
  .blocked-scroll {
    overflow: hidden;
  }
  .layout-topbar {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
  }
  .layout-topbar .topbar-left {
    width: 100%;
    padding: 0.75rem 2rem;
    justify-content: space-between;
    border-bottom: 1px solid var(--surface-border);
  }
  .layout-topbar .topbar-left .horizontal-logo {
    display: none;
  }
  .layout-topbar .topbar-left .topbar-separator {
    display: none;
  }
  .layout-topbar .topbar-right {
    width: 100%;
    padding: 0.75rem 2rem;
  }
  .layout-topbar .menu-button i:before {
    content: "\e91d";
  }
  .layout-topbar .mobile-logo {
    display: block;
    width: 2rem;
    height: 2rem;
  }
  .layout-topbar .viewname {
    font-size: 1rem;
  }
  .layout-topbar .topbar-menu {
    justify-content: space-between;
    gap: 1rem;
  }
  .layout-topbar .topbar-menu > li {
    margin-left: 0;
  }
  .layout-topbar .topbar-menu > li:first-child {
    margin-right: auto;
    margin-left: 0;
  }
  .layout-topbar .topbar-menu > li.profile-item {
    border-left: 0;
    border-right: 0;
    padding: 0;
  }
  .layout-topbar .topbar-menu > li.profile-item > a {
    padding: 0;
  }
  .layout-topbar .topbar-menu > li.profile-item .profile-image {
    width: 2rem;
    height: 2rem;
    margin: 0;
  }
  .layout-topbar .topbar-menu > li.profile-item .profile-name {
    display: none;
  }
  .layout-sidebar {
    position: absolute;
    z-index: 999;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
    left: 0;
    transform: translateX(-100%);
  }
  .layout-sidebar .layout-topbar {
    display: none;
  }
  .layout-mobile-active .layout-sidebar {
    transform: translateX(0);
  }
  .layout-mobile-active .layout-mask {
    opacity: 1;
    z-index: 998;
    visibility: visible;
  }
  .layout-search .search-container {
    width: 75vw;
  }
}
.card {
  padding: 1.5rem;
  border: 1px solid var(--surface-border);
  margin-bottom: 2rem;
  border-radius: 1rem;
}
.card:last-child {
  margin-bottom: 0;
}

.layout-card-filled .card {
  background: var(--surface-card);
}

.layout-card-transparent .card {
  background: transparent;
}

/* QuickBooks-themed application styles */
/**
 * AG-Grid QuickBooks Online Styling
 * ==================================
 *
 * PARITY NOTICE: This file MUST be kept in sync with its paired file:
 *   -> c:\GitHub\Uniformax\client\src\assets\css\ag-grid-quickbooks.scss
 * Any changes made here MUST also be applied to the Uniformax version.
 *
 * Universal styling that works with all three Proximity themes (Aura, Lara, Nora)
 * with built-in support for theme-specific customizations.
 *
 * KEY FEATURE: Selection and hover colors automatically match the
 * PrimeNG primary color set in the theme configuration.
 *
 * Architecture:
 * 1. CSS Custom Properties (variables) define the design tokens
 * 2. Uses PrimeNG's --p-primary-* variables for dynamic theming
 * 3. Base styles use these variables
 * 4. Theme-specific overrides at the bottom
 */
/* =============================================================================
   DESIGN TOKENS - QuickBooks-inspired defaults with PrimeNG primary integration
   ============================================================================= */
:root {
  /* --------------------------------------------------
     Base Colors (QuickBooks Online inspired)
     -------------------------------------------------- */
  --qb-grid-bg: #ffffff;
  --qb-grid-border: #d4d5d9;
  --qb-grid-border-light: #e8e9eb;
  /* Header */
  --qb-header-bg: #f4f5f7;
  --qb-header-text: #393a3d;
  --qb-header-border: #d4d5d9;
  --qb-header-hover-bg: #ebeced;
  /* Rows */
  --qb-row-bg: #ffffff;
  --qb-row-bg-alt: #fafbfc;
  --qb-row-text: #393a3d;
  --qb-row-text-secondary: #6b6c72;
  --qb-row-border: #e8e9eb;
  /* --------------------------------------------------
     Selection & Hover - Uses PrimeNG Primary Color
     These will automatically match the theme's primary color!
     -------------------------------------------------- */
  /* Hover: Very light tint of primary (using primary-50 or fallback) */
  --qb-row-hover-bg: var(--p-primary-50, #f0f7ff);
  /* Selection: Light tint of primary (using primary-100 or fallback) */
  --qb-selection-bg: var(--p-primary-100, #e5f3ff);
  /* Selection border: Primary color (using primary-500 or fallback) */
  --qb-selection-border: var(--p-primary-500, #0077c5);
  /* Selection text: Keep readable */
  --qb-selection-text: #393a3d;
  /* Focus: Uses primary color */
  --qb-focus-outline: var(--p-primary-500, #0077c5);
  --qb-focus-shadow: color-mix(in srgb, var(--p-primary-500, #0077c5) 25%, transparent);
  /* Actions/Links: Uses primary color */
  --qb-link-color: var(--p-primary-500, #0077c5);
  --qb-link-hover: var(--p-primary-700, #005a94);
  /* Status Colors */
  --qb-success: #108000;
  --qb-warning: #ff6a00;
  --qb-error: #d52b1e;
  /* Sizing */
  --qb-row-height: 38px;
  --qb-header-height: 48px;
  --qb-cell-padding-x: 16px;
  --qb-cell-padding-y: 10px;
  --qb-border-radius: 4px;
  --qb-font-size: 14px;
  --qb-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
}

/* =============================================================================
   DARK MODE TOKENS
   ============================================================================= */
.app-dark {
  --qb-grid-bg: #1e1e1e;
  --qb-grid-border: #3d3d3d;
  --qb-grid-border-light: #2d2d2d;
  --qb-header-bg: #252525;
  --qb-header-text: #e0e0e0;
  --qb-header-border: #3d3d3d;
  --qb-header-hover-bg: #2d2d2d;
  --qb-row-bg: #1e1e1e;
  --qb-row-bg-alt: #242424;
  --qb-row-text: #e0e0e0;
  --qb-row-text-secondary: #a0a0a0;
  --qb-row-border: #2d2d2d;
  /* Dark mode: Use darker shades of primary for selection/hover */
  --qb-row-hover-bg: color-mix(in srgb, var(--p-primary-500, #0077c5) 15%, #1e1e1e);
  --qb-selection-bg: color-mix(in srgb, var(--p-primary-500, #0077c5) 25%, #1e1e1e);
  --qb-selection-border: var(--p-primary-400, #4da6ff);
  --qb-selection-text: #ffffff;
  --qb-focus-outline: var(--p-primary-400, #4da6ff);
  --qb-focus-shadow: color-mix(in srgb, var(--p-primary-400, #4da6ff) 30%, transparent);
  --qb-link-color: var(--p-primary-400, #4da6ff);
  --qb-link-hover: var(--p-primary-300, #80c0ff);
}

/* =============================================================================
   BASE AG-GRID STYLES
   Applied to all AG-Grid themes (balham, alpine, etc.)
   ============================================================================= */
/* Grid Container */
.ag-theme-balham,
.ag-theme-balham-dark,
.ag-theme-alpine,
.ag-theme-alpine-dark {
  --ag-font-family: var(--qb-font-family);
  --ag-font-size: var(--qb-font-size);
  --ag-background-color: var(--qb-grid-bg);
  --ag-foreground-color: var(--qb-row-text);
  --ag-border-color: var(--qb-grid-border);
  --ag-secondary-border-color: var(--qb-grid-border-light);
  /* Header */
  --ag-header-background-color: var(--qb-header-bg);
  --ag-header-foreground-color: var(--qb-header-text);
  --ag-header-height: var(--qb-header-height);
  /* Rows */
  --ag-row-height: var(--qb-row-height);
  --ag-odd-row-background-color: var(--qb-row-bg);
  --ag-row-hover-color: var(--qb-row-hover-bg);
  /* Selection */
  --ag-selected-row-background-color: var(--qb-selection-bg);
  --ag-range-selection-border-color: var(--qb-selection-border);
  /* Cell */
  --ag-cell-horizontal-padding: var(--qb-cell-padding-x);
}

/* -----------------------------------------------------------------------------
   Header Styles
   ----------------------------------------------------------------------------- */
.ag-theme-balham .ag-header,
.ag-theme-balham-dark .ag-header,
.ag-theme-alpine .ag-header,
.ag-theme-alpine-dark .ag-header {
  background-color: var(--qb-header-bg);
  border-bottom: 1px solid var(--qb-header-border);
  font-weight: 300;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}

.ag-theme-balham .ag-header-cell,
.ag-theme-balham-dark .ag-header-cell,
.ag-theme-alpine .ag-header-cell,
.ag-theme-alpine-dark .ag-header-cell {
  padding-left: var(--qb-cell-padding-x);
  padding-right: var(--qb-cell-padding-x);
  border-right: 1px solid var(--qb-grid-border-light);
}

.ag-theme-balham .ag-header-cell:hover,
.ag-theme-balham-dark .ag-header-cell:hover,
.ag-theme-alpine .ag-header-cell:hover,
.ag-theme-alpine-dark .ag-header-cell:hover {
  background-color: var(--qb-header-hover-bg);
}

.ag-theme-balham .ag-header-cell-label,
.ag-theme-balham-dark .ag-header-cell-label,
.ag-theme-alpine .ag-header-cell-label,
.ag-theme-alpine-dark .ag-header-cell-label {
  color: var(--qb-header-text);
  /* Limit height to allow only 3 lines of text (one wrap) */
  max-height: 4.5em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
}

/* Sort icons - uses primary color */
.ag-theme-balham .ag-sort-indicator-icon,
.ag-theme-balham-dark .ag-sort-indicator-icon,
.ag-theme-alpine .ag-sort-indicator-icon,
.ag-theme-alpine-dark .ag-sort-indicator-icon {
  color: var(--qb-link-color);
}

/* -----------------------------------------------------------------------------
   Row Styles
   ----------------------------------------------------------------------------- */
.ag-theme-balham .ag-row,
.ag-theme-balham-dark .ag-row,
.ag-theme-alpine .ag-row,
.ag-theme-alpine-dark .ag-row {
  background-color: var(--qb-row-bg);
  border-bottom: 1px solid var(--qb-row-border);
  transition: background-color 0.15s ease;
}

/* Alternating rows (optional - uncomment if desired) */
/*
.ag-theme-balham .ag-row-odd,
.ag-theme-balham-dark .ag-row-odd,
.ag-theme-alpine .ag-row-odd,
.ag-theme-alpine-dark .ag-row-odd {
  background-color: var(--qb-row-bg-alt);
}
*/
/* Row hover - uses primary color tint */
.ag-theme-balham .ag-row:hover,
.ag-theme-balham-dark .ag-row:hover,
.ag-theme-alpine .ag-row:hover,
.ag-theme-alpine-dark .ag-row:hover {
  background-color: var(--qb-row-hover-bg);
}

/* Selected row - uses primary color */
.ag-theme-balham .ag-row-selected,
.ag-theme-balham-dark .ag-row-selected,
.ag-theme-alpine .ag-row-selected,
.ag-theme-alpine-dark .ag-row-selected {
  background-color: var(--qb-selection-bg) !important;
  border-left: 3px solid var(--qb-selection-border);
}

/* Selected row hover - slightly different shade */
.ag-theme-balham .ag-row-selected:hover,
.ag-theme-balham-dark .ag-row-selected:hover,
.ag-theme-alpine .ag-row-selected:hover,
.ag-theme-alpine-dark .ag-row-selected:hover {
  background-color: var(--qb-selection-bg) !important;
}

/* -----------------------------------------------------------------------------
   Cell Styles
   ----------------------------------------------------------------------------- */
.ag-theme-balham .ag-cell,
.ag-theme-balham-dark .ag-cell,
.ag-theme-alpine .ag-cell,
.ag-theme-alpine-dark .ag-cell {
  padding-left: var(--qb-cell-padding-x);
  padding-right: var(--qb-cell-padding-x);
  line-height: var(--qb-row-height);
  display: flex;
  align-items: center;
  color: var(--qb-row-text);
  border-right: none;
}

/* Cell focus - uses primary color */
.ag-theme-balham .ag-cell-focus,
.ag-theme-balham-dark .ag-cell-focus,
.ag-theme-alpine .ag-cell-focus,
.ag-theme-alpine-dark .ag-cell-focus {
  border: 1px solid var(--qb-focus-outline) !important;
  outline: none;
}

/* Cell range selection - uses primary color tint */
.ag-theme-balham .ag-cell-range-selected:not(.ag-cell-focus),
.ag-theme-balham-dark .ag-cell-range-selected:not(.ag-cell-focus),
.ag-theme-alpine .ag-cell-range-selected:not(.ag-cell-focus),
.ag-theme-alpine-dark .ag-cell-range-selected:not(.ag-cell-focus) {
  background-color: var(--qb-selection-bg) !important;
}

/* Single cell range selection (clicked cell) */
.ag-theme-balham .ag-cell-range-single-cell,
.ag-theme-balham-dark .ag-cell-range-single-cell,
.ag-theme-alpine .ag-cell-range-single-cell,
.ag-theme-alpine-dark .ag-cell-range-single-cell {
  background-color: var(--qb-selection-bg) !important;
  border: 1px solid var(--qb-selection-border) !important;
}

/* Editable cells - dotted border indicator (no background to avoid confusion with row selection) */
.ag-theme-balham .ag-cell.cell-editable,
.ag-theme-balham-dark .ag-cell.cell-editable,
.ag-theme-alpine .ag-cell.cell-editable,
.ag-theme-alpine-dark .ag-cell.cell-editable {
  border: 1px dashed var(--p-primary-400, #60a5fa) !important;
  background-color: transparent !important;
}

/* -----------------------------------------------------------------------------
   Links and Buttons in Grid
   ----------------------------------------------------------------------------- */
.ag-theme-balham .ag-cell a,
.ag-theme-balham-dark .ag-cell a,
.ag-theme-alpine .ag-cell a,
.ag-theme-alpine-dark .ag-cell a {
  color: var(--qb-link-color);
  text-decoration: none;
  font-weight: 500;
}

.ag-theme-balham .ag-cell a:hover,
.ag-theme-balham-dark .ag-cell a:hover,
.ag-theme-alpine .ag-cell a:hover,
.ag-theme-alpine-dark .ag-cell a:hover {
  color: var(--qb-link-hover);
  text-decoration: underline;
}

/* PrimeNG buttons in grid cells */
.ag-theme-balham .ag-cell .p-button,
.ag-theme-balham-dark .ag-cell .p-button,
.ag-theme-alpine .ag-cell .p-button,
.ag-theme-alpine-dark .ag-cell .p-button {
  font-size: 13px;
  padding: 4px 12px;
}

.ag-theme-balham .ag-cell .p-button-link,
.ag-theme-balham-dark .ag-cell .p-button-link,
.ag-theme-alpine .ag-cell .p-button-link,
.ag-theme-alpine-dark .ag-cell .p-button-link {
  color: var(--qb-link-color);
}

.ag-theme-balham .ag-cell .p-button-link:hover,
.ag-theme-balham-dark .ag-cell .p-button-link:hover,
.ag-theme-alpine .ag-cell .p-button-link:hover,
.ag-theme-alpine-dark .ag-cell .p-button-link:hover {
  color: var(--qb-link-hover);
  background: transparent;
}

/* -----------------------------------------------------------------------------
   Pagination
   ----------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   Pagination
   ----------------------------------------------------------------------------- */
.ag-theme-balham .ag-paging-panel,
.ag-theme-balham-dark .ag-paging-panel,
.ag-theme-alpine .ag-paging-panel,
.ag-theme-alpine-dark .ag-paging-panel {
  background-color: var(--qb-header-bg);
  border-top: 1px solid var(--qb-grid-border);
  padding: 8px 16px;
  color: var(--qb-row-text-secondary);
  font-size: 13px;
}

/* Pagination buttons (arrows) */
.ag-theme-balham .ag-paging-button,
.ag-theme-balham-dark .ag-paging-button,
.ag-theme-alpine .ag-paging-button,
.ag-theme-alpine-dark .ag-paging-button {
  color: var(--qb-link-color);
}

.ag-theme-balham .ag-paging-button:hover,
.ag-theme-balham-dark .ag-paging-button:hover,
.ag-theme-alpine .ag-paging-button:hover,
.ag-theme-alpine-dark .ag-paging-button:hover {
  color: var(--qb-link-hover);
}

/* Page size dropdown */
.ag-theme-balham .ag-paging-page-size .ag-picker-field-wrapper,
.ag-theme-balham-dark .ag-paging-page-size .ag-picker-field-wrapper,
.ag-theme-alpine .ag-paging-page-size .ag-picker-field-wrapper,
.ag-theme-alpine-dark .ag-paging-page-size .ag-picker-field-wrapper {
  color: var(--qb-link-color);
}

/* Page number display and description text */
.ag-theme-balham .ag-paging-description,
.ag-theme-balham-dark .ag-paging-description,
.ag-theme-alpine .ag-paging-description,
.ag-theme-alpine-dark .ag-paging-description {
  color: var(--qb-link-color);
}

/* -----------------------------------------------------------------------------
   Grid Footer (Custom Proximity Footer)
   ----------------------------------------------------------------------------- */
.grid-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  height: 42px; /* Match AG Grid pagination row height */
  font-size: 13px;
  cursor: default;
  background-color: transparent; /* Transparent to let pagination bg show through */
  color: #6b6c72;
  z-index: 1; /* Above AG Grid but below dropdowns */
  pointer-events: none; /* Let clicks pass through to pagination */
}

.grid-footer a {
  pointer-events: auto; /* Re-enable clicks on links */
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.grid-footer a:hover {
  text-decoration: underline;
}

/* Light mode - explicit targeting */
body:not(.app-dark) .grid-footer a {
  color: var(--p-primary-500, var(--p-primary-color, #0077c5));
}

body:not(.app-dark) .grid-footer a:hover {
  color: var(--p-primary-700, var(--p-primary-color, #005a94));
}

/* Dark mode */
.app-dark .grid-footer {
  background-color: transparent;
  color: #a0a0a0;
}

.app-dark .grid-footer a {
  color: var(--p-primary-400, #4da6ff);
}

.app-dark .grid-footer a:hover {
  color: var(--p-primary-300, #80c0ff);
}

/* Minimal footer - just a bottom border for grids without pagination/buttons */
.grid-footer-minimal {
  height: 4px;
  background-color: #f4f5f7;
  border-bottom-left-radius: var(--qb-border-radius);
  border-bottom-right-radius: var(--qb-border-radius);
}

.app-dark .grid-footer-minimal {
  background-color: #252525;
}

/* -----------------------------------------------------------------------------
   Checkbox Styles - uses primary color
   ----------------------------------------------------------------------------- */
.ag-theme-balham .ag-checkbox-input-wrapper,
.ag-theme-balham-dark .ag-checkbox-input-wrapper,
.ag-theme-alpine .ag-checkbox-input-wrapper,
.ag-theme-alpine-dark .ag-checkbox-input-wrapper {
  border-radius: var(--qb-border-radius);
}

.ag-theme-balham .ag-checkbox-input-wrapper.ag-checked,
.ag-theme-balham-dark .ag-checkbox-input-wrapper.ag-checked,
.ag-theme-alpine .ag-checkbox-input-wrapper.ag-checked,
.ag-theme-alpine-dark .ag-checkbox-input-wrapper.ag-checked {
  background-color: var(--qb-link-color);
  border-color: var(--qb-link-color);
}

/* Checkmark color - use PrimeNG's contrast color which adapts to primary color luminance */
.ag-theme-balham .ag-checkbox-input-wrapper.ag-checked::after,
.ag-theme-balham-dark .ag-checkbox-input-wrapper.ag-checked::after,
.ag-theme-alpine .ag-checkbox-input-wrapper.ag-checked::after,
.ag-theme-alpine-dark .ag-checkbox-input-wrapper.ag-checked::after {
  color: var(--p-primary-contrast-color);
}

/* -----------------------------------------------------------------------------
   Filter Styles
   ----------------------------------------------------------------------------- */
.ag-theme-balham .ag-filter,
.ag-theme-balham-dark .ag-filter,
.ag-theme-alpine .ag-filter,
.ag-theme-alpine-dark .ag-filter {
  background-color: var(--qb-grid-bg);
}

.ag-theme-balham .ag-filter-toolpanel-header,
.ag-theme-balham-dark .ag-filter-toolpanel-header,
.ag-theme-alpine .ag-filter-toolpanel-header,
.ag-theme-alpine-dark .ag-filter-toolpanel-header {
  background-color: var(--qb-header-bg);
}

/* -----------------------------------------------------------------------------
   Menu Styles
   ----------------------------------------------------------------------------- */
.ag-theme-balham .ag-menu,
.ag-theme-balham-dark .ag-menu,
.ag-theme-alpine .ag-menu,
.ag-theme-alpine-dark .ag-menu {
  background-color: var(--qb-grid-bg);
  border: 1px solid var(--qb-grid-border);
  border-radius: var(--qb-border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ag-theme-balham .ag-menu-option-active,
.ag-theme-balham-dark .ag-menu-option-active,
.ag-theme-alpine .ag-menu-option-active,
.ag-theme-alpine-dark .ag-menu-option-active {
  background-color: var(--qb-row-hover-bg);
}

/* -----------------------------------------------------------------------------
   Loading Overlay
   ----------------------------------------------------------------------------- */
.ag-theme-balham .ag-overlay-loading-center,
.ag-theme-balham-dark .ag-overlay-loading-center,
.ag-theme-alpine .ag-overlay-loading-center,
.ag-theme-alpine-dark .ag-overlay-loading-center {
  background-color: var(--qb-grid-bg);
  border: 1px solid var(--qb-grid-border);
  border-radius: var(--qb-border-radius);
  padding: 16px 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* -----------------------------------------------------------------------------
   Status Bar
   ----------------------------------------------------------------------------- */
.ag-theme-balham .ag-status-bar,
.ag-theme-balham-dark .ag-status-bar,
.ag-theme-alpine .ag-status-bar,
.ag-theme-alpine-dark .ag-status-bar {
  background-color: var(--qb-header-bg);
  border-top: 1px solid var(--qb-grid-border);
  padding: 8px 16px;
  font-size: 13px;
}

/* =============================================================================
   THEME-SPECIFIC OVERRIDES
   Customize each Proximity theme here
   ============================================================================= */
/* -----------------------------------------------------------------------------
   LARA THEME (uses ag-theme-alpine)
   More rounded, softer appearance
   ----------------------------------------------------------------------------- */
/* Lara Light */
body:not(.app-dark) .ag-theme-alpine {
  /* Lara-specific customizations go here */
  /* Example: slightly warmer colors */
  /* --qb-header-bg: #f8f9fa; */
}

/* Lara Dark */
body.app-dark .ag-theme-alpine-dark {
  /* Lara dark-specific customizations */
}

/* -----------------------------------------------------------------------------
   AURA THEME (uses ag-theme-balham)
   Modern, clean appearance
   ----------------------------------------------------------------------------- */
/* Aura Light */
body:not(.app-dark) .ag-theme-balham {
  /* Aura-specific customizations go here */
}

/* Aura Dark */
body.app-dark .ag-theme-balham-dark {
  /* Aura dark-specific customizations */
}

/* -----------------------------------------------------------------------------
   NORA THEME (uses ag-theme-balham)
   If Nora needs different styling from Aura, add a body class
   ----------------------------------------------------------------------------- */
/* 
   Note: To differentiate Nora from Aura, add a body class when Nora is active.
   Example:

   body.theme-nora .ag-theme-balham {
     --qb-header-bg: #f0f0f0;
   }
*/
/* =============================================================================
   CELL UTILITY CLASSES
   Classes for cell alignment, styling, and special states
   ============================================================================= */
/* Cell flex alignment - ensures cell content is vertically centered */
.ag-theme-balham .ag-row .ag-cell,
.ag-theme-balham-dark .ag-row .ag-cell,
.ag-theme-alpine .ag-row .ag-cell,
.ag-theme-alpine-dark .ag-row .ag-cell {
  display: flex;
  align-items: center;
}

/* Right-aligned cells */
.cell-numeric,
.cell-right-justify {
  justify-content: flex-end;
}

/* Right-aligned header */
.ag-right-aligned-header .ag-header-cell-label {
  flex-direction: row-reverse;
  text-align: right;
}

/* Centered header and cells */
.ag-header-cell.ag-header-center .ag-header-cell-comp-wrapper {
  justify-content: center;
}

.ag-header-cell.ag-header-center .ag-header-cell-label {
  justify-content: center;
}

.ag-cell.ag-cell-center {
  justify-content: center !important;
}

.center-cell .ag-cell-wrapper {
  justify-content: center;
  display: flex;
}

/* Center button renderer components in cells */
.ag-theme-balham .ag-cell.button-cell-center,
.ag-theme-balham-dark .ag-cell.button-cell-center,
.ag-theme-alpine .ag-cell.button-cell-center,
.ag-theme-alpine-dark .ag-cell.button-cell-center {
  text-align: center !important;
}

.ag-theme-balham .ag-cell.button-cell-center .ag-cell-wrapper,
.ag-theme-balham-dark .ag-cell.button-cell-center .ag-cell-wrapper,
.ag-theme-alpine .ag-cell.button-cell-center .ag-cell-wrapper,
.ag-theme-alpine-dark .ag-cell.button-cell-center .ag-cell-wrapper {
  justify-content: center !important;
  width: 100% !important;
}

.ag-theme-balham .ag-cell.button-cell-center prox-button-renderer,
.ag-theme-balham-dark .ag-cell.button-cell-center prox-button-renderer,
.ag-theme-alpine .ag-cell.button-cell-center prox-button-renderer,
.ag-theme-alpine-dark .ag-cell.button-cell-center prox-button-renderer {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

.ag-theme-balham .ag-cell.button-cell-center p-button,
.ag-theme-balham-dark .ag-cell.button-cell-center p-button,
.ag-theme-alpine .ag-cell.button-cell-center p-button,
.ag-theme-alpine-dark .ag-cell.button-cell-center p-button {
  display: flex !important;
  justify-content: center !important;
}

.ag-theme-balham .ag-cell.button-cell-center .p-button,
.ag-theme-balham-dark .ag-cell.button-cell-center .p-button,
.ag-theme-alpine .ag-cell.button-cell-center .p-button,
.ag-theme-alpine-dark .ag-cell.button-cell-center .p-button {
  margin: 0 auto !important;
}

/* Cell error state */
.cell-error {
  border: solid 2px;
  border-color: red;
  border-right: 2px solid red !important;
}

/* Detail row padding */
.ag-theme-balham .ag-details-row,
.ag-theme-balham-dark .ag-details-row,
.ag-theme-alpine .ag-details-row,
.ag-theme-alpine-dark .ag-details-row {
  padding: 10px;
}

/* Row violation/warning state */
.row-in-violation {
  background-color: yellow !important;
}

/* Row excluded state */
.row-excluded {
  background-color: darkorange;
}

/* AG Grid scrollbar hiding - fix for double scrollbars */
.ag-body-viewport::-webkit-scrollbar,
.ag-center-cols-viewport::-webkit-scrollbar {
  display: none !important;
}

/* Rich select dropdown - theme-aware */
.ag-theme-balham .ag-rich-select-list,
.ag-theme-alpine .ag-rich-select-list {
  background-color: var(--qb-grid-bg, #ffffff);
  color: var(--qb-row-text, #393a3d);
}

.ag-theme-balham-dark .ag-rich-select-list,
.ag-theme-alpine-dark .ag-rich-select-list {
  background-color: var(--qb-grid-bg, #1e1e1e);
  color: var(--qb-row-text, #e0e0e0);
}

/* Rich select row items */
.ag-theme-balham .ag-rich-select-row,
.ag-theme-alpine .ag-rich-select-row {
  color: var(--qb-row-text, #393a3d);
}

.ag-theme-balham-dark .ag-rich-select-row,
.ag-theme-alpine-dark .ag-rich-select-row {
  color: var(--qb-row-text, #e0e0e0);
}

/* Rich select hover */
.ag-theme-balham .ag-rich-select-row-selected,
.ag-theme-alpine .ag-rich-select-row-selected,
.ag-theme-balham-dark .ag-rich-select-row-selected,
.ag-theme-alpine-dark .ag-rich-select-row-selected {
  background-color: var(--qb-selection-bg) !important;
  color: var(--qb-selection-text, #393a3d) !important;
}

/* =============================================================================
   DATE STATUS CELL COLORS
   Theme-aware colors for date-based status indicators (past due, on time, etc.)
   ============================================================================= */
/* Past due / overdue - red background */
.ag-theme-balham .cell-past-due,
.ag-theme-balham-dark .cell-past-due,
.ag-theme-alpine .cell-past-due,
.ag-theme-alpine-dark .cell-past-due {
  background-color: #ffcccc !important;
  color: #1a1a1a !important;
}

/* On time / upcoming - green background */
.ag-theme-balham .cell-on-time,
.ag-theme-balham-dark .cell-on-time,
.ag-theme-alpine .cell-on-time,
.ag-theme-alpine-dark .cell-on-time {
  background-color: #90ee90 !important;
  color: #1a1a1a !important;
}

/* =============================================================================
   EDITABLE CELL STYLING
   Theme-aware styling for editable cells
   ============================================================================= */
/* Editable cell - dotted border indicator (no background to avoid confusion with row selection) */
.ag-theme-balham .cell-editable,
.ag-theme-balham-dark .cell-editable,
.ag-theme-alpine .cell-editable,
.ag-theme-alpine-dark .cell-editable {
  border: 1px dashed var(--p-primary-400, #60a5fa) !important;
  background-color: transparent !important;
}

/* Link cell - clickable navigation links in grid cells */
.ag-theme-balham .cell-link,
.ag-theme-balham-dark .cell-link,
.ag-theme-alpine .cell-link,
.ag-theme-alpine-dark .cell-link {
  color: var(--qb-link-color) !important;
  cursor: pointer !important;
}

.ag-theme-balham .cell-link:hover,
.ag-theme-balham-dark .cell-link:hover,
.ag-theme-alpine .cell-link:hover,
.ag-theme-alpine-dark .cell-link:hover {
  color: var(--qb-link-hover) !important;
  text-decoration: underline;
}

/* Cell editor input - when actively editing a cell */
.ag-theme-balham .ag-cell-editor,
.ag-theme-balham-dark .ag-cell-editor,
.ag-theme-alpine .ag-cell-editor,
.ag-theme-alpine-dark .ag-cell-editor {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
}

.ag-theme-balham .ag-cell-editor input,
.ag-theme-balham-dark .ag-cell-editor input,
.ag-theme-alpine .ag-cell-editor input,
.ag-theme-alpine-dark .ag-cell-editor input,
.ag-theme-balham .ag-input-field-input,
.ag-theme-balham-dark .ag-input-field-input,
.ag-theme-alpine .ag-input-field-input,
.ag-theme-alpine-dark .ag-input-field-input {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
}

/* Text cell editor wrapper */
.ag-theme-balham .ag-text-field-input,
.ag-theme-balham-dark .ag-text-field-input,
.ag-theme-alpine .ag-text-field-input,
.ag-theme-alpine-dark .ag-text-field-input {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
}

/* =============================================================================
   UTILITY CLASSES
   Optional classes for special cases
   ============================================================================= */
/* Compact grid variant */
.ag-grid-compact {
  --qb-row-height: 40px;
  --qb-cell-padding-x: 12px;
  --qb-font-size: 13px;
}

/* Dense grid variant */
.ag-grid-dense {
  --qb-row-height: 32px;
  --qb-cell-padding-x: 8px;
  --qb-font-size: 12px;
}

/* No borders variant */
.ag-grid-borderless .ag-row {
  border-bottom: none;
}

.ag-grid-borderless .ag-header-cell {
  border-right: none;
}

/* Striped rows variant */
.ag-grid-striped .ag-row-odd {
  background-color: var(--qb-row-bg-alt);
}

/* =============================================================================
   GRID ACTION PANEL
   Side panel for action buttons next to a grid
   ============================================================================= */
.qb-grid-action-panel {
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  gap: 0.75rem;
  width: 12rem;
  flex: 1;
  background-color: var(--p-surface-50, #f8f9fa);
  border: 1px solid var(--p-surface-200, #e9ecef);
  border-radius: 0.5rem;
}

/* Dark mode support */
:root[class*=app-dark] .qb-grid-action-panel {
  background-color: var(--p-surface-900, #121212);
  border-color: var(--p-surface-600, #4a4a4a);
}

/* =============================================================================
   AG GRID HOST ELEMENT STYLES
   ============================================================================= */
/* prox-ag-grid host element */
prox-ag-grid {
  display: block;
  position: relative;
  height: 100%;
  min-height: 0; /* Allows shrinking in flex containers */
  width: 100%;
}

.qb-ag-grid-list {
  height: 100%;
  min-height: 0; /* Allows shrinking in flex containers */
  width: 100%;
  display: block;
}

/* Grid without footer - add bottom border for visual closure */
.qb-ag-grid-list.no-footer {
  border-bottom: 6px solid #c0c2c5;
}

/* =============================================================================
   RESPONSIVE GRID SIZING
   On smaller screens (< xl breakpoint), reduce row height and font size to fit more content
   ============================================================================= */
@media (max-width: 1199px) {
  /* Compact grid sizing for screens below xl breakpoint (1200px) */
  .ag-theme-balham,
  .ag-theme-balham-dark,
  .ag-theme-alpine,
  .ag-theme-alpine-dark,
  .ag-theme-quartz,
  .ag-theme-quartz-dark {
    --ag-row-height: 32px !important;
    --ag-header-height: 38px !important;
    --ag-font-size: 11px !important;
    --ag-cell-horizontal-padding: 10px !important;
  }
  /* Force row height via direct styling as fallback */
  .ag-theme-balham .ag-row,
  .ag-theme-balham-dark .ag-row,
  .ag-theme-alpine .ag-row,
  .ag-theme-alpine-dark .ag-row,
  .ag-theme-quartz .ag-row,
  .ag-theme-quartz-dark .ag-row {
    /* height: 32px here ruins child grids */
    min-height: 32px !important;
    font-size: 11px !important;
  }
  /* Force header row height (not the entire .ag-header container, to preserve floating filters) */
  .ag-theme-balham .ag-header-row,
  .ag-theme-balham-dark .ag-header-row,
  .ag-theme-alpine .ag-header-row,
  .ag-theme-alpine-dark .ag-header-row,
  .ag-theme-quartz .ag-header-row,
  .ag-theme-quartz-dark .ag-header-row {
    font-size: 10px !important;
  }
  /* Force cell line-height to match row height */
  .ag-theme-balham .ag-cell,
  .ag-theme-balham-dark .ag-cell,
  .ag-theme-alpine .ag-cell,
  .ag-theme-alpine-dark .ag-cell,
  .ag-theme-quartz .ag-cell,
  .ag-theme-quartz-dark .ag-cell {
    line-height: 32px !important;
    font-size: 11px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  /* Reduce pagination and footer sizing */
  .ag-theme-balham .ag-paging-panel,
  .ag-theme-balham-dark .ag-paging-panel,
  .ag-theme-alpine .ag-paging-panel,
  .ag-theme-alpine-dark .ag-paging-panel,
  .ag-theme-quartz .ag-paging-panel,
  .ag-theme-quartz-dark .ag-paging-panel {
    padding: 4px 10px !important;
    font-size: 11px !important;
    height: 32px !important;
    min-height: 32px !important;
  }
  .grid-footer {
    height: 32px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
  }
}
/* =============================================================================
   AG GRID TOOLTIP STYLES
   Custom tooltip styling for validation errors and info tooltips
   ============================================================================= */
.ag-val-error-tooltip-title {
  font-size: 12pt;
  margin: auto;
  text-align: center;
  color: white;
  background-color: red;
  padding: 5px;
}

.ag-val-error-tooltip-body {
  padding: 5px;
  font-size: 10pt;
  background-color: black;
  color: white;
}

.ag-info-tooltip-title {
  font-size: 12pt;
  margin: auto;
  text-align: center;
  padding: 5px;
}

.ag-info-tooltip-body {
  padding: 5px;
  font-size: 10pt;
  background-color: black;
  color: white;
}

/* =============================================================================
   AG GRID CELL BUTTON SIZING
   Compact button styling inside grid cells
   ============================================================================= */
.ag-cell .p-button {
  padding: 5px !important;
  font-size: 12px !important;
}

/**
 * Submenu QuickBooks Online Styling
 * ==================================
 * Consistent styling for p-menu submenus used in manager components
 * (account-manager, global-manager, supplier-manager, etc.)
 *
 * Uses PrimeNG primary color variables for dynamic theming.
 * Background uses a light tint of the primary color.
 */
/* =============================================================================
   DESIGN TOKENS
   ============================================================================= */
:root {
  /* Submenu sizing */
  --qb-submenu-width: 240px;
  --qb-submenu-padding: 0;
  --qb-submenu-border-radius: 8px;
  /* Submenu colors - light mode */
  /* Background uses light tint of primary color */
  --qb-submenu-bg: var(--p-primary-50, #eff6ff);
  --qb-submenu-border: var(--p-primary-200, #bfdbfe);
  --qb-submenu-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  /* Group header - slightly darker tint */
  --qb-submenu-header-bg: var(--p-primary-100, #dbeafe);
  --qb-submenu-header-text: var(--p-primary-900, #1e3a5f);
  --qb-submenu-header-border: var(--p-primary-200, #bfdbfe);
  /* Menu items */
  --qb-submenu-item-padding: 6px 16px;
  --qb-submenu-item-text: var(--p-primary-900, #1e3a5f);
  --qb-submenu-item-icon: var(--p-primary-600, #2563eb);
  /* Hover state - medium tint */
  --qb-submenu-item-hover-bg: var(--p-primary-100, #dbeafe);
  --qb-submenu-item-hover-text: var(--p-primary-900, #1e3a5f);
  --qb-submenu-item-hover-icon: var(--p-primary-700, #1d4ed8);
  /* Active/Selected state - stronger tint */
  --qb-submenu-item-active-bg: var(--p-primary-200, #bfdbfe);
  --qb-submenu-item-active-text: var(--p-primary-900, #1e3a5f);
  --qb-submenu-item-active-border: var(--p-primary-500, #3b82f6);
}

/* Dark mode */
.app-dark {
  /* Background uses dark tint of primary */
  --qb-submenu-bg: color-mix(in srgb, var(--p-primary-500, #3b82f6) 15%, var(--p-surface-900, #111827));
  --qb-submenu-border: color-mix(in srgb, var(--p-primary-500, #3b82f6) 30%, var(--p-surface-700, #374151));
  --qb-submenu-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  /* Group header */
  --qb-submenu-header-bg: color-mix(in srgb, var(--p-primary-500, #3b82f6) 25%, var(--p-surface-900, #111827));
  --qb-submenu-header-text: var(--p-primary-200, #bfdbfe);
  --qb-submenu-header-border: color-mix(in srgb, var(--p-primary-500, #3b82f6) 30%, var(--p-surface-700, #374151));
  /* Menu items */
  --qb-submenu-item-text: var(--p-primary-100, #dbeafe);
  --qb-submenu-item-icon: var(--p-primary-300, #93c5fd);
  /* Hover */
  --qb-submenu-item-hover-bg: color-mix(in srgb, var(--p-primary-500, #3b82f6) 30%, var(--p-surface-900, #111827));
  --qb-submenu-item-hover-text: var(--p-primary-100, #dbeafe);
  --qb-submenu-item-hover-icon: var(--p-primary-200, #bfdbfe);
  /* Active */
  --qb-submenu-item-active-bg: color-mix(in srgb, var(--p-primary-500, #3b82f6) 40%, var(--p-surface-900, #111827));
  --qb-submenu-item-active-text: var(--p-primary-50, #eff6ff);
  --qb-submenu-item-active-border: var(--p-primary-400, #60a5fa);
}

/* =============================================================================
   LAYOUT SUBMENU STYLES
   Applied to p-menu with styleClass="layout-submenu"
   ============================================================================= */
.layout-submenu.p-menu {
  width: var(--qb-submenu-width);
  min-width: var(--qb-submenu-width);
  background: var(--qb-submenu-bg);
  border: 1px solid var(--qb-submenu-border);
  border-radius: var(--qb-submenu-border-radius);
  box-shadow: var(--qb-submenu-shadow);
  padding: var(--qb-submenu-padding);
  overflow: hidden;
}

/* Menu list container */
.layout-submenu.p-menu .p-menu-list {
  padding: 0;
  margin: 0;
}

/* -----------------------------------------------------------------------------
   Submenu Group Headers (Administration, Organization, etc.)
   ----------------------------------------------------------------------------- */
.layout-submenu.p-menu .p-menu-item-content:has(.p-submenu-header),
.layout-submenu.p-menu .p-submenu-header,
.layout-submenu.p-menu .p-menu-submenu-label {
  background: var(--qb-submenu-header-bg);
  color: var(--qb-submenu-header-text);
  padding: 12px 16px;
  margin: 0;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--qb-submenu-header-border);
}

/* First group header - no top border needed */
.layout-submenu.p-menu .p-menu-list > .p-menu-item:first-child .p-submenu-header,
.layout-submenu.p-menu .p-menu-list > .p-menu-item:first-child .p-menu-submenu-label {
  border-top: none;
  border-radius: var(--qb-submenu-border-radius) var(--qb-submenu-border-radius) 0 0;
}

/* Separator between groups */
.layout-submenu.p-menu .p-menu-list > .p-menu-item:not(:first-child) .p-submenu-header,
.layout-submenu.p-menu .p-menu-list > .p-menu-item:not(:first-child) .p-menu-submenu-label {
  border-top: 1px solid var(--qb-submenu-header-border);
  margin-top: 4px;
}

/* -----------------------------------------------------------------------------
   Menu Items
   ----------------------------------------------------------------------------- */
.layout-submenu.p-menu .p-menu-item {
  margin: 0;
}

.layout-submenu.p-menu .p-menu-item > .p-menu-item-content {
  padding: 0;
  border-radius: 0;
  background: transparent;
  transition: all 0.15s ease;
}

.layout-submenu.p-menu .p-menu-item > .p-menu-item-content > .p-menu-item-link {
  padding: var(--qb-submenu-item-padding);
  color: var(--qb-submenu-item-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.15s ease;
  border-left: 2px solid transparent;
  background: transparent;
}

/* Menu item icon */
.layout-submenu.p-menu .p-menu-item-icon {
  color: var(--qb-submenu-item-icon);
  font-size: 16px;
  width: 14px;
  min-width: 14px;
  text-align: center;
  transition: color 0.15s ease;
}

/* Menu item text */
.layout-submenu.p-menu .p-menu-item-text {
  font-size: 14px;
  font-weight: 500;
}

/* -----------------------------------------------------------------------------
   Hover State
   ----------------------------------------------------------------------------- */
.layout-submenu.p-menu .p-menu-item > .p-menu-item-content:hover {
  background: var(--qb-submenu-item-hover-bg);
}

.layout-submenu.p-menu .p-menu-item > .p-menu-item-content:hover > .p-menu-item-link {
  color: var(--qb-submenu-item-hover-text);
  border-left-color: var(--qb-submenu-item-hover-icon);
}

.layout-submenu.p-menu .p-menu-item > .p-menu-item-content:hover .p-menu-item-icon {
  color: var(--qb-submenu-item-hover-icon);
}

/* -----------------------------------------------------------------------------
   Active/Selected State (for router links)
   ----------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   Active/Selected State (for router links)
   ----------------------------------------------------------------------------- */
.layout-submenu.p-menu .p-menu-item.p-menu-item-active > .p-menu-item-content,
.layout-submenu.p-menu .p-menu-item > .p-menu-item-content:has(.p-menu-item-link-active) {
  background: var(--qb-submenu-item-active-bg);
}

.layout-submenu.p-menu .p-menu-item.p-menu-item-active > .p-menu-item-content > .p-menu-item-link,
.layout-submenu.p-menu .p-menu-item > .p-menu-item-content > .p-menu-item-link-active {
  color: var(--qb-submenu-item-active-text);
  border: 2px solid var(--qb-submenu-item-active-border);
  border-radius: 4px;
}

.layout-submenu.p-menu .p-menu-item.p-menu-item-active .p-menu-item-icon,
.layout-submenu.p-menu .p-menu-item-link-active .p-menu-item-icon {
  color: var(--qb-submenu-item-active-border);
  animation: icon-blink 1.5s ease-in-out infinite;
}

/* -----------------------------------------------------------------------------
   Focus State (keyboard navigation)
   ----------------------------------------------------------------------------- */
.layout-submenu.p-menu .p-menu-item > .p-menu-item-content:focus-visible {
  outline: 2px solid var(--p-primary-500);
  outline-offset: -2px;
}

/* -----------------------------------------------------------------------------
   Nested Submenu Items (if any)
   ----------------------------------------------------------------------------- */
.layout-submenu.p-menu .p-submenu-list {
  padding: 0;
  margin: 0;
  background: transparent;
}

.layout-submenu.p-menu .p-submenu-list .p-menu-item > .p-menu-item-content > .p-menu-item-link {
  padding-left: 44px; /* Indent nested items */
}

/* =============================================================================
   UTILITY CLASSES FOR MANAGER COMPONENTS
   ============================================================================= */
/* Compact variant */
.layout-submenu-compact.p-menu {
  --qb-submenu-width: 200px;
  --qb-submenu-item-padding: 10px 14px;
}

.layout-submenu-compact.p-menu .p-menu-item-text {
  font-size: 13px;
}

/* Icon blink animation */
@keyframes icon-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
/* =============================================================================
   PANEL MENU STYLES (Collapsible Headers)
   Applied to p-panelMenu with styleClass="layout-submenu"
   ============================================================================= */
.layout-submenu.p-panelmenu {
  width: var(--qb-submenu-width);
  min-width: var(--qb-submenu-width);
  background: var(--qb-submenu-bg);
  border: 1px solid var(--qb-submenu-border);
  border-radius: var(--qb-submenu-border-radius);
  box-shadow: var(--qb-submenu-shadow);
  overflow: hidden;
}

/* Panel header (collapsible group headers) */
.layout-submenu.p-panelmenu .p-panelmenu-header {
  background: var(--qb-submenu-header-bg);
  border: none;
  border-bottom: 1px solid var(--qb-submenu-header-border);
  border-radius: 0;
  margin: 0;
}

.layout-submenu.p-panelmenu .p-panelmenu-header-content {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.layout-submenu.p-panelmenu .p-panelmenu-header-link {
  padding: 12px 16px;
  color: var(--qb-submenu-header-text);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: transparent;
  border: none;
  border-radius: 0;
  gap: 8px;
}

.layout-submenu.p-panelmenu .p-panelmenu-header-link:hover {
  background: var(--qb-submenu-item-hover-bg);
}

/* Expand/collapse icon */
.layout-submenu.p-panelmenu .p-panelmenu-header-link .p-submenu-icon {
  color: var(--qb-submenu-header-text);
  font-size: 12px;
}

/* First panel - rounded top corners */
.layout-submenu.p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header {
  border-radius: var(--qb-submenu-border-radius) var(--qb-submenu-border-radius) 0 0;
}

/* Panel content (submenu items container) */
.layout-submenu.p-panelmenu .p-panelmenu-content {
  background: transparent;
  border: none;
  padding: 0;
}

/* Menu items in panel */
.layout-submenu.p-panelmenu .p-panelmenu-root-list {
  padding: 0;
}

.layout-submenu.p-panelmenu .p-menuitem {
  margin: 0;
}

.layout-submenu.p-panelmenu .p-menuitem-content {
  background: transparent;
  border-radius: 0;
  padding: 0;
  transition: all 0.15s ease;
}

.layout-submenu.p-panelmenu .p-menuitem-link {
  padding: var(--qb-submenu-item-padding);
  color: var(--qb-submenu-item-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.15s ease;
  border-left: 2px solid transparent;
  background: transparent;
}

/* Menu item icon */
.layout-submenu.p-panelmenu .p-menuitem-icon {
  color: var(--qb-submenu-item-icon);
  font-size: 16px;
  width: 14px;
  min-width: 14px;
  text-align: center;
  transition: color 0.15s ease;
}

/* Menu item text */
.layout-submenu.p-panelmenu .p-menuitem-text {
  font-size: 14px;
  font-weight: 500;
}

/* Hover state */
.layout-submenu.p-panelmenu .p-menuitem-content:hover {
  background: var(--qb-submenu-item-hover-bg);
}

.layout-submenu.p-panelmenu .p-menuitem-content:hover .p-menuitem-link {
  color: var(--qb-submenu-item-hover-text);
  border-left-color: var(--qb-submenu-item-hover-icon);
}

.layout-submenu.p-panelmenu .p-menuitem-content:hover .p-menuitem-icon {
  color: var(--qb-submenu-item-hover-icon);
}

/* Active/Selected state */
.layout-submenu.p-panelmenu .p-menuitem-content:has(.p-menuitem-link-active) {
  background: var(--qb-submenu-item-active-bg);
}

.layout-submenu.p-panelmenu .p-menuitem-link-active {
  color: var(--qb-submenu-item-active-text);
  border: 2px solid var(--qb-submenu-item-active-border);
  border-radius: 4px;
}

.layout-submenu.p-panelmenu .p-menuitem-link-active .p-menuitem-icon {
  color: var(--qb-submenu-item-active-border);
  animation: icon-blink 1.5s ease-in-out infinite;
}

/* Back to list item - styled distinctly as a navigation link */
.layout-submenu.p-panelmenu .back-to-list-item {
  border-bottom: 1px solid var(--qb-submenu-header-border);
  margin-bottom: 4px;
  padding-bottom: 4px;
}

.layout-submenu.p-panelmenu .back-to-list-item .p-menuitem-link {
  font-style: italic;
}

.layout-submenu.p-panelmenu .back-to-list-item .p-menuitem-text {
  font-size: 13px;
}

.layout-submenu.p-panelmenu .back-to-list-item .p-menuitem-icon {
  font-size: 14px;
}

/* =============================================================================
   COLLAPSIBLE SIDEBAR
   Wrapper contains toggle button (always visible) and container (can collapse)
   ============================================================================= */
.sidebar-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
}

.sidebar-container {
  display: flex;
  flex-direction: column;
  transition: width 0.8s ease-in-out, min-width 0.8s ease-in-out, opacity 0.6s ease-in-out;
  overflow: hidden;
}

/* Toggle button - positioned relative to wrapper so it's always visible */
.sidebar-toggle {
  position: absolute;
  top: 8px;
  right: -12px;
  z-index: 10;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--qb-submenu-header-bg);
  border: 1px solid var(--qb-submenu-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sidebar-toggle:hover {
  background: var(--qb-submenu-item-hover-bg);
  transform: scale(1.1);
}

.sidebar-toggle i {
  color: var(--qb-submenu-header-text);
  font-size: 14px;
  font-weight: bold;
}

/* Collapsed state - applied to wrapper */
.sidebar-wrapper.collapsed .sidebar-container {
  width: 0;
  min-width: 0;
  opacity: 0;
}

.sidebar-wrapper.collapsed .layout-submenu.p-panelmenu {
  width: 0;
  min-width: 0;
  border: none;
  padding: 0;
}

.sidebar-wrapper.collapsed .sidebar-toggle {
  right: -22px;
  background: var(--p-primary-500);
  border-color: var(--p-primary-600);
}

.sidebar-wrapper.collapsed .sidebar-toggle i {
  color: white;
}

.sidebar-wrapper.collapsed .sidebar-toggle:hover {
  background: var(--p-primary-600);
}

/* Add spacing for collapsed state so content isn't obscured by toggle button */
.sidebar-wrapper + div {
  transition: margin-left 0.8s ease-in-out;
}

.sidebar-wrapper.collapsed + div {
  margin-left: 32px !important;
}

/* =============================================================================
   RESPONSIVE MENU - Compact styling for smaller screens
   Reduces padding and font sizes to fit more items without scrolling
   ============================================================================= */
@media (max-width: 1535px) {
  /* Compact design tokens for smaller screens */
  :root {
    --qb-submenu-width-compact: 210px;
    --qb-submenu-item-padding-compact: 2px 10px;
    --qb-submenu-header-padding-compact: 6px 10px;
  }
  /* Narrower menu */
  .layout-submenu.p-panelmenu {
    width: var(--qb-submenu-width-compact);
    min-width: var(--qb-submenu-width-compact);
  }
  /* Compact panel headers */
  .layout-submenu.p-panelmenu .p-panelmenu-header-link {
    padding: var(--qb-submenu-header-padding-compact);
    font-size: 11px;
  }
  /* Compact menu items */
  .layout-submenu.p-panelmenu .p-menuitem-link {
    padding: var(--qb-submenu-item-padding-compact);
    gap: 8px;
  }
  .layout-submenu.p-panelmenu .p-menuitem-text {
    font-size: 12px;
  }
  .layout-submenu.p-panelmenu .p-menuitem-icon {
    font-size: 14px;
    width: 12px;
    min-width: 12px;
  }
  /* Reduce spacing between groups */
  .layout-submenu.p-menu .p-menu-list > .p-menu-item:not(:first-child) .p-submenu-header,
  .layout-submenu.p-menu .p-menu-list > .p-menu-item:not(:first-child) .p-menu-submenu-label {
    margin-top: 2px;
  }
  /* Compact p-menu as well */
  .layout-submenu.p-menu {
    width: var(--qb-submenu-width-compact);
    min-width: var(--qb-submenu-width-compact);
  }
  .layout-submenu.p-menu .p-menu-item-content:has(.p-submenu-header),
  .layout-submenu.p-menu .p-submenu-header,
  .layout-submenu.p-menu .p-menu-submenu-label {
    padding: var(--qb-submenu-header-padding-compact);
    font-size: 11px;
  }
  .layout-submenu.p-menu .p-menu-item > .p-menu-item-content > .p-menu-item-link {
    padding: var(--qb-submenu-item-padding-compact);
    gap: 8px;
  }
  .layout-submenu.p-menu .p-menu-item-text {
    font-size: 12px;
  }
  .layout-submenu.p-menu .p-menu-item-icon {
    font-size: 14px;
    width: 12px;
    min-width: 12px;
  }
}
/* Documentation markdown rendering (tables, code blocks, headings) */
/**
 * Documentation Markdown Styles
 * =============================
 *
 * Styles for ngx-markdown rendered content in the Technical Documentation pages.
 * Applied via the .doc-markdown wrapper class on the markdown container.
 *
 * Covers: tables, code blocks, blockquotes, headings, horizontal rules, lists.
 */
.doc-markdown {
  /* ── Tables ── */
  /* ── Code blocks ── */
  /* Inline code (not inside pre) */
  /* ── Blockquotes ── */
  /* ── Headings ── */
  /* ── Horizontal rules ── */
  /* ── Lists ── */
  /* Nested list spacing */
  /* ── Paragraphs ── */
  /* ── Strong/Bold ── */
  /* ── Links ── */
  /* ── Dark mode overrides ── */
}
.doc-markdown table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: 0.875rem;
  line-height: 1.5;
}
.doc-markdown th {
  background-color: var(--p-primary-50);
  color: var(--p-primary-700);
  font-weight: 600;
  text-align: left;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--p-primary-200);
  white-space: nowrap;
}
.doc-markdown td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--p-surface-200);
  vertical-align: top;
}
.doc-markdown tr:nth-child(even) {
  background-color: var(--p-surface-50);
}
.doc-markdown tr:hover {
  background-color: var(--p-primary-50);
}
.doc-markdown pre {
  background-color: var(--p-surface-800);
  color: var(--p-surface-50);
  border-radius: 0.375rem;
  padding: 1rem;
  margin: 1rem 0;
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.6;
}
.doc-markdown code {
  font-family: "Cascadia Code", "Fira Code", "Consolas", monospace;
  font-size: 0.8125rem;
}
.doc-markdown :not(pre) > code {
  background-color: var(--p-surface-100);
  color: var(--p-primary-700);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
}
.doc-markdown blockquote {
  border-left: 4px solid var(--p-primary-300);
  background-color: var(--p-primary-50);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  color: var(--p-surface-700);
  font-style: italic;
}
.doc-markdown blockquote p {
  margin: 0;
}
.doc-markdown h1 {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--p-primary-700);
  margin-top: 0;
  margin-bottom: 0.75rem;
  padding-bottom: 0.375rem;
  border-bottom: 2px solid var(--p-primary-100);
}
.doc-markdown h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--p-primary-700);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.375rem;
  border-bottom: 2px solid var(--p-primary-100);
}
.doc-markdown h1:first-child,
.doc-markdown h2:first-child {
  margin-top: 0;
}
.doc-markdown h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--p-surface-800);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.doc-markdown h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--p-surface-700);
  margin-top: 1.25rem;
  margin-bottom: 0.375rem;
}
.doc-markdown hr {
  border: none;
  border-top: 1px solid var(--p-surface-200);
  margin: 1.5rem 0;
}
.doc-markdown ul, .doc-markdown ol {
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}
.doc-markdown li {
  margin-bottom: 0.25rem;
  line-height: 1.6;
}
.doc-markdown li > ul, .doc-markdown li > ol {
  margin-top: 0.25rem;
}
.doc-markdown p {
  margin: 0.5rem 0;
  line-height: 1.6;
}
.doc-markdown strong {
  font-weight: 600;
  color: var(--p-surface-900);
}
.doc-markdown a {
  color: var(--p-primary-500);
  text-decoration: none;
}
.doc-markdown a:hover {
  color: var(--p-primary-700);
  text-decoration: underline;
}
.app-dark .doc-markdown th {
  background-color: var(--p-primary-900);
  color: var(--p-primary-100);
  border-color: var(--p-primary-700);
}
.app-dark .doc-markdown td {
  border-color: var(--p-surface-700);
}
.app-dark .doc-markdown tr:nth-child(even) {
  background-color: var(--p-surface-800);
}
.app-dark .doc-markdown tr:hover {
  background-color: var(--p-surface-700);
}
.app-dark .doc-markdown pre {
  background-color: var(--p-surface-900);
}
.app-dark .doc-markdown :not(pre) > code {
  background-color: var(--p-surface-700);
  color: var(--p-primary-200);
}
.app-dark .doc-markdown blockquote {
  border-left-color: var(--p-primary-600);
  background-color: var(--p-surface-800);
  color: var(--p-surface-300);
}
.app-dark .doc-markdown h1,
.app-dark .doc-markdown h2 {
  color: var(--p-primary-300);
  border-bottom-color: var(--p-surface-700);
}
.app-dark .doc-markdown h3 {
  color: var(--p-surface-200);
}
.app-dark .doc-markdown h4 {
  color: var(--p-surface-300);
}

/* forms-quickbooks.scss loads LAST for highest priority (shared with Uniformax) */
/**
 * Forms QuickBooks Online Styling
 * ================================
 *
 * PARITY NOTICE: This file MUST be kept in sync with its paired file:
 *   -> c:\GitHub\Uniformax\client\src\assets\css\forms-quickbooks.scss
 * Any changes made here MUST also be applied to the Uniformax version.
 *
 * Clean, professional form styling inspired by QuickBooks Online.
 *
 * Key characteristics:
 * - Labels above inputs
 * - Generous whitespace
 * - Subtle borders with rounded corners
 * - Clear focus states using primary color
 * - Section grouping with cards
 * - Consistent spacing
 */
/* =============================================================================
   DESIGN TOKENS
   ============================================================================= */
:root {
  /* Form field sizing */
  --qb-input-height: 36px;
  --qb-input-padding-x: 14px;
  --qb-input-padding-y: 5px;
  --qb-input-font-size: 14px;
  --qb-input-border-radius: 6px;
  /* Label styling */
  --qb-label-font-size: 13px;
  --qb-label-font-weight: 400;
  --qb-label-margin-bottom: 6px;
  --qb-label-color: var(--p-text-muted-color);
  /* Input colors - light mode */
  --qb-input-bg: var(--p-surface-0, #ffffff);
  --qb-input-border: var(--p-surface-300, #d4d5d9);
  --qb-input-border-hover: var(--p-surface-400, #a0a0a0);
  --qb-input-text: var(--p-text-color, #393a3d);
  --qb-input-placeholder: var(--p-text-muted-color, #6b6c72);
  /* Focus state - uses primary color */
  --qb-input-focus-border: var(--p-primary-500, #0077c5);
  --qb-input-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--p-primary-500, #0077c5) 20%, transparent);
  /* Disabled state */
  --qb-input-disabled-bg: var(--p-surface-100, #f4f5f7);
  --qb-input-disabled-text: var(--p-text-muted-color, #6b6c72);
  /* Error state */
  --qb-input-error-border: #d52b1e;
  --qb-input-error-bg: #fef2f2;
  --qb-input-error-text: #d52b1e;
  /* Field spacing */
  --qb-field-gap: 5px;
  --qb-section-gap: 32px;
  /* Child grid action button spacing */
  --qb-child-actions-margin: 0.75rem;
  /* Status message styling */
  --qb-status-message-color: #dc2626; /* red-600 */
  --qb-status-message-margin-left: 10px;
  /* Card/Section styling */
  --qb-card-bg: var(--p-surface-0, #ffffff);
  --qb-card-border: var(--p-surface-200, #e8e9eb);
  --qb-card-border-radius: 8px;
  --qb-card-padding: 24px;
  --qb-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  /* Header styling */
  --qb-header-font-size: 18px;
  --qb-header-font-weight: 500;
  --qb-header-color: var(--p-text-color, #393a3d);
  --qb-header-margin-bottom: 14px;
  /* Page layout spacing */
  --qb-content-padding: 11px;
  --qb-content-padding-top: 1.5rem; /* Space above breadcrumb */
  --qb-breadcrumb-margin-bottom: 0.75rem; /* Space below breadcrumb */
  --qb-submenu-content-gap: 16px; /* Gap between submenu and content in manager pages */
  /* Action bar and footer spacing (single source of truth for vertical rhythm) */
  --qb-action-bar-margin-top: 12px; /* Space above action buttons */
  --qb-action-bar-margin-bottom: 8px; /* Space below action buttons (before grid) */
  --qb-content-margin-top: 8px; /* Space between action bar and content (grid/splitter) */
  --qb-footer-margin-top: 12px; /* Space above footer buttons */
  --qb-footer-margin-bottom: 16px; /* Space below footer buttons (page bottom) */
  /* Activation checklist styling */
  --qb-activation-header-color: #dc2626; /* red-600, same as status message */
  --qb-activation-bg: #f97316; /* orange-500 */
  --qb-activation-height: 15rem;
}

/* Dark mode */
.app-dark {
  --qb-input-bg: var(--p-surface-800, #1e1e1e);
  --qb-input-border: var(--p-surface-600, #3d3d3d);
  --qb-input-border-hover: var(--p-surface-500, #555555);
  --qb-input-text: var(--p-text-color, #e0e0e0);
  --qb-input-placeholder: var(--p-text-muted-color, #a0a0a0);
  --qb-input-disabled-bg: var(--p-surface-900, #111111);
  --qb-input-disabled-text: var(--p-text-muted-color, #808080);
  --qb-input-error-bg: rgba(213, 43, 30, 0.15);
  --qb-card-bg: var(--p-surface-800, #1e1e1e);
  --qb-card-border: var(--p-surface-700, #2d2d2d);
  --qb-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  /* Activation checklist - darker orange for dark mode */
  --qb-activation-bg: #ea580c; /* orange-600 for better contrast in dark mode */
}

/* =============================================================================
   PROX-FIELD COMPONENT STYLING
   ============================================================================= */
.p-field,
prox-field .p-field {
  margin-bottom: var(--qb-field-gap);
}

.p-field label,
prox-field .p-field label {
  font-size: var(--qb-label-font-size);
  font-weight: var(--qb-label-font-weight);
  color: var(--qb-label-color);
  margin-bottom: var(--qb-label-margin-bottom);
  line-height: 1.4;
}

/* Required indicator */
.p-field label .required,
prox-field .p-field label::after {
  color: #d52b1e;
  margin-left: 2px;
}

/* Hint text */
.p-field .text-gray-500,
prox-field .p-field .text-gray-500 {
  font-size: 12px;
  font-weight: 400;
  color: var(--qb-input-placeholder);
}

/* =============================================================================
   TEXT INPUTS (pInputText)
   ============================================================================= */
input[pInputText],
input.p-inputtext,
.p-inputtext {
  width: 100%;
  height: var(--qb-input-height);
  padding: var(--qb-input-padding-y) var(--qb-input-padding-x);
  font-size: var(--qb-input-font-size);
  font-family: inherit;
  color: var(--qb-input-text);
  background-color: var(--qb-input-bg);
  border: 1px solid var(--qb-input-border);
  border-radius: var(--qb-input-border-radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}

input[pInputText]:hover:not(:disabled):not(:focus),
input.p-inputtext:hover:not(:disabled):not(:focus),
.p-inputtext:hover:not(:disabled):not(:focus) {
  border-color: var(--qb-input-border-hover);
}

input[pInputText]:focus,
input.p-inputtext:focus,
.p-inputtext:focus {
  border-color: var(--qb-input-focus-border);
  box-shadow: var(--qb-input-focus-shadow);
}

input[pInputText]:disabled,
input.p-inputtext:disabled,
.p-inputtext:disabled {
  background-color: var(--qb-input-disabled-bg);
  color: var(--qb-input-disabled-text);
  cursor: not-allowed;
}

input[pInputText]::placeholder,
input.p-inputtext::placeholder,
.p-inputtext::placeholder {
  color: var(--qb-input-placeholder);
}

/* =============================================================================
   TEXTAREA
   ============================================================================= */
textarea.p-inputtextarea,
.p-inputtextarea {
  width: 100%;
  min-height: 100px;
  padding: var(--qb-input-padding-y) var(--qb-input-padding-x);
  font-size: var(--qb-input-font-size);
  font-family: inherit;
  color: var(--qb-input-text);
  background-color: var(--qb-input-bg);
  border: 1px solid var(--qb-input-border);
  border-radius: var(--qb-input-border-radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
  resize: vertical;
}

textarea.p-inputtextarea:hover:not(:disabled):not(:focus),
.p-inputtextarea:hover:not(:disabled):not(:focus) {
  border-color: var(--qb-input-border-hover);
}

textarea.p-inputtextarea:focus,
.p-inputtextarea:focus {
  border-color: var(--qb-input-focus-border);
  box-shadow: var(--qb-input-focus-shadow);
}

textarea.p-inputtextarea::placeholder,
.p-inputtextarea::placeholder,
textarea[pTextarea]::placeholder {
  color: var(--qb-input-placeholder);
}

/* =============================================================================
   DROPDOWNS (p-dropdown)
   ============================================================================= */
.p-dropdown {
  width: 100%;
  height: var(--qb-input-height);
  background-color: var(--qb-input-bg);
  border: 1px solid var(--qb-input-border);
  border-radius: var(--qb-input-border-radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.p-dropdown:not(.p-disabled):hover {
  border-color: var(--qb-input-border-hover);
}

.p-dropdown:not(.p-disabled).p-focus,
.p-dropdown:not(.p-disabled):focus {
  border-color: var(--qb-input-focus-border);
  box-shadow: var(--qb-input-focus-shadow);
}

.p-dropdown .p-dropdown-label {
  padding: var(--qb-input-padding-y) var(--qb-input-padding-x);
  font-size: var(--qb-input-font-size);
  color: var(--qb-input-text);
}

.p-dropdown .p-dropdown-label.p-placeholder {
  color: var(--qb-input-placeholder);
}

.p-dropdown .p-dropdown-trigger {
  width: 40px;
  color: var(--qb-input-placeholder);
}

/* Dropdown panel */
.p-dropdown-panel {
  background-color: var(--qb-input-bg);
  border: 1px solid var(--qb-input-border);
  border-radius: var(--qb-input-border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.p-dropdown-panel .p-dropdown-items .p-dropdown-item {
  padding: 10px 14px;
  font-size: var(--qb-input-font-size);
  color: var(--qb-input-text);
  transition: background-color 0.15s ease;
}

.p-dropdown-panel .p-dropdown-items .p-dropdown-item:hover {
  background-color: var(--p-primary-50, #f0f7ff);
}

.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
  background-color: var(--p-primary-100, #e5f3ff);
  color: var(--p-primary-700, #005a94);
}

/* =============================================================================
   DATE PICKER (p-datepicker / p-calendar)
   ============================================================================= */
.p-datepicker,
.p-calendar {
  width: 100%;
}

.p-datepicker .p-inputtext,
.p-calendar .p-inputtext {
  height: var(--qb-input-height);
  padding: var(--qb-input-padding-y) var(--qb-input-padding-x);
  font-size: var(--qb-input-font-size);
  border-radius: var(--qb-input-border-radius);
}

/* Datepicker inside floatlabel needs more height for the floating label */
p-floatlabel p-datepicker .p-inputtext,
p-floatlabel p-calendar .p-inputtext,
p-floatlabel .p-datepicker .p-inputtext,
p-floatlabel .p-calendar .p-inputtext,
.p-floatlabel p-datepicker .p-inputtext,
.p-floatlabel p-calendar .p-inputtext,
.p-floatlabel .p-datepicker .p-inputtext,
.p-floatlabel .p-calendar .p-inputtext {
  height: 50px !important;
  padding-top: 22px !important;
}

/* =============================================================================
   INPUT NUMBER (p-inputNumber)
   ============================================================================= */
.p-inputnumber {
  width: 100%;
}

.p-inputnumber .p-inputtext {
  height: var(--qb-input-height);
  padding: var(--qb-input-padding-y) var(--qb-input-padding-x);
  font-size: var(--qb-input-font-size);
  border-radius: var(--qb-input-border-radius);
}

.p-inputnumber-buttons-stacked .p-inputnumber-input {
  border-radius: var(--qb-input-border-radius) 0 0 var(--qb-input-border-radius);
}

/* =============================================================================
   CHECKBOX & RADIO
   ============================================================================= */
.p-checkbox .p-checkbox-box,
.p-radiobutton .p-radiobutton-box {
  width: 20px;
  height: 20px;
  border: 2px solid var(--qb-input-border);
  background-color: var(--qb-input-bg);
  transition: all 0.15s ease;
}

.p-checkbox .p-checkbox-box {
  border-radius: 4px;
}

.p-radiobutton .p-radiobutton-box {
  border-radius: 50%;
}

.p-checkbox:not(.p-disabled) .p-checkbox-box:hover,
.p-radiobutton:not(.p-disabled) .p-radiobutton-box:hover {
  border-color: var(--qb-input-border-hover);
}

.p-checkbox .p-checkbox-box.p-highlight,
.p-radiobutton .p-radiobutton-box.p-highlight {
  background-color: var(--p-primary-500, #0077c5);
  border-color: var(--p-primary-500, #0077c5);
}

/* Checkmark/radio dot color - let PrimeNG handle contrast automatically */
.p-checkbox:not(.p-disabled) .p-checkbox-box.p-focus,
.p-radiobutton:not(.p-disabled) .p-radiobutton-box.p-focus {
  box-shadow: var(--qb-input-focus-shadow);
  border-color: var(--qb-input-focus-border);
}

/* Checkbox/Radio labels */
.p-checkbox-label,
.p-radiobutton-label {
  margin-left: 8px;
  font-size: var(--qb-input-font-size);
  color: var(--qb-input-text);
  cursor: pointer;
}

/* =============================================================================
   BUTTONS IN FORMS
   ============================================================================= */
/* Primary button */
.p-button {
  height: var(--qb-input-height);
  padding: 0 20px;
  font-size: var(--qb-input-font-size);
  font-weight: 600;
  border-radius: var(--qb-input-border-radius);
  transition: all 0.15s ease;
}

.p-button.p-button-primary,
.p-button:not(.p-button-secondary):not(.p-button-text):not(.p-button-outlined):not(.p-button-link) {
  background-color: var(--p-primary-500, #0077c5);
  border-color: var(--p-primary-500, #0077c5);
}

.p-button.p-button-primary:hover,
.p-button:not(.p-button-secondary):not(.p-button-text):not(.p-button-outlined):not(.p-button-link):hover {
  background-color: var(--p-primary-600, #005a94);
  border-color: var(--p-primary-600, #005a94);
}

/* Secondary/Outlined button */
.p-button.p-button-secondary,
.p-button.p-button-outlined {
  background-color: var(--qb-input-bg);
  border: 1px solid var(--qb-input-border);
  color: var(--qb-input-text);
}

.p-button.p-button-secondary:hover,
.p-button.p-button-outlined:hover {
  background-color: var(--p-surface-100, #f4f5f7);
  border-color: var(--qb-input-border-hover);
}

/* Text/Link button */
.p-button.p-button-text,
.p-button.p-button-link {
  color: var(--p-primary-500, #0077c5);
}

.p-button.p-button-text:hover,
.p-button.p-button-link:hover {
  color: var(--p-primary-600, #005a94);
  background-color: var(--p-primary-50, #f0f7ff);
}

/* Small button */
.p-button.p-button-sm {
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

/* =============================================================================
   FORM VALIDATION / ERROR STATES
   ============================================================================= */
/* Error message */
.p-error,
small.p-error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--qb-input-error-text);
}

/* Input with error */
.ng-invalid.ng-dirty input[pInputText],
.ng-invalid.ng-dirty .p-inputtext,
.ng-invalid.ng-dirty .p-dropdown,
input[pInputText].ng-invalid.ng-dirty,
.p-inputtext.ng-invalid.ng-dirty {
  border-color: var(--qb-input-error-border);
  background-color: var(--qb-input-error-bg);
}

.ng-invalid.ng-dirty input[pInputText]:focus,
.ng-invalid.ng-dirty .p-inputtext:focus,
.ng-invalid.ng-dirty .p-dropdown.p-focus {
  box-shadow: 0 0 0 3px rgba(213, 43, 30, 0.2);
}

/* =============================================================================
   FORM LAYOUT HELPERS
   ============================================================================= */
/* Form section/card */
.qb-form-section,
.card-body {
  background-color: var(--qb-card-bg);
  border: 1px solid var(--qb-card-border);
  border-radius: var(--qb-card-border-radius);
  padding: var(--qb-card-padding);
  box-shadow: var(--qb-card-shadow);
  margin-bottom: var(--qb-section-gap);
}

/* Form header */
.card-header,
h5.card-header {
  font-size: var(--qb-header-font-size);
  font-weight: var(--qb-header-font-weight);
  color: var(--qb-header-color);
  margin-bottom: var(--qb-header-margin-bottom);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--qb-card-border);
}

/* List actions - action buttons above a list/grid */
.qb-list-actions {
  display: flex;
  gap: 8px;
  margin-top: var(--qb-action-bar-margin-top);
  margin-bottom: var(--qb-action-bar-margin-bottom);
}

/* Styled bullet list for explanatory notes - smaller, italic text with disc markers */
.qb-note-list {
  list-style-type: disc;
  font-size: 0.875rem;
  font-style: italic;
  padding-left: 1.25rem;
  margin: 0.25rem 0;
}
.qb-note-list li {
  margin-bottom: 0.25rem;
}

/* =============================================================================
   LAYOUT HOST ELEMENTS
   ============================================================================= */
/* prox-main host element - flex container for page layout */
prox-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0; /* Critical: allows flex child to shrink */
}

/* Page content container - replaces inline styles on prox-main's top-level div */
.qb-page-content {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Note: Left/right padding is controlled by .layout-content in the LAYOUT OVERRIDES section below */
}

/* Page body - the main content area (fieldset wrapper) */
.qb-page-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0; /* Critical: allows flex child to shrink below content size */
  overflow: visible;
  border-width: 0;
}

/* Page footer - consistent spacing for Go Back / Save/Cancel buttons */
.qb-page-footer {
  margin-top: var(--qb-footer-margin-top);
  margin-bottom: var(--qb-footer-margin-bottom);
}

/* Manager content area - gap between submenu and content (single source of truth) */
.qb-manager-content {
  margin-left: var(--qb-submenu-content-gap);
  padding-left: 0.75rem; /* pl-3 - indent content to clear sidebar toggle button */
}

/* Layout: Grid - full-height grid layout */
.qb-layout-grid {
  flex-grow: 1;
  min-height: 0; /* Critical: allows flex child to shrink below content size */
  margin-top: var(--qb-content-margin-top);
}

/* Responsive grid widths - GLOBAL OVERRIDE for Tailwind fractional widths
   On smaller screens (Surface Pro, laptops, tablets), expand fractional width
   containers to full width to better utilize available space.

   This avoids having to add responsive classes to each component individually.

   Breakpoints:
   - Below 1536px (2xl): full width
   - 1536px and above: use Tailwind's defined fractional widths
*/
@media (max-width: 1535px) {
  /* Override Tailwind's fractional width classes to full width on smaller screens */
  .w-1\/2,
  .w-1\/3,
  .w-2\/3,
  .w-1\/4,
  .w-2\/4,
  .w-3\/4,
  .w-1\/5,
  .w-2\/5,
  .w-3\/5,
  .w-4\/5 {
    width: 100% !important;
  }
}
/* Legacy responsive grid width classes (can still be used explicitly if needed) */
.qb-grid-responsive-3\/4 {
  width: 100%;
}
@media (min-width: 1536px) {
  .qb-grid-responsive-3\/4 {
    width: 75%;
  }
}

.qb-grid-responsive-2\/3 {
  width: 100%;
}
@media (min-width: 1536px) {
  .qb-grid-responsive-2\/3 {
    width: 66.666667%;
  }
}

.qb-grid-responsive-1\/2 {
  width: 100%;
}
@media (min-width: 1536px) {
  .qb-grid-responsive-1\/2 {
    width: 50%;
  }
}

/* Layout: Manager - sidebar + content layout
   Structure:
   - Breadcrumb at top
   - Sidebar menu (p-menu) on left
   - Content area with qb-content-card containing:
     - Title/header (h5.card-header)
     - qb-detail-card (main form, use w-1/2 or similar)
     - qb-info-cards (status cards, use w-1/5 or similar)
   - Footer with save/cancel buttons
*/
.qb-layout-manager {
  display: flex;
  gap: 8px;
  flex-grow: 1;
  height: 100%;
  margin-top: 12px;
}

/* Main content area - right of sidebar */
.qb-main-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin-left: 16px;
  height: 100%;
  overflow: hidden;
}

/* Detail card - main form area
   Use with Tailwind width classes (w-1/2, w-2/3, etc.)
   Add h-fit if card should not stretch to match sibling height */
.qb-detail-card {
  background-color: var(--qb-card-bg);
  border: 1px solid var(--qb-card-border);
  border-radius: var(--qb-card-border-radius);
  padding: var(--qb-card-padding);
  box-shadow: var(--qb-card-shadow);
}

/* Detail card with primary color tint */
.qb-detail-card.qb-primary-tint {
  background-color: var(--p-primary-50);
  border-color: var(--p-primary-200);
}

/* Dark mode: use darker tinted background so light text is visible */
.app-dark .qb-detail-card.qb-primary-tint {
  background-color: color-mix(in srgb, var(--p-primary-500) 15%, var(--p-surface-800));
  border-color: color-mix(in srgb, var(--p-primary-500) 30%, var(--p-surface-700));
}

/* Neutralize nested card-body styles when inside qb-detail-card */
.qb-detail-card .card-body {
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  margin-bottom: 0 !important;
}

/* Info cards - status cards column */
.qb-info-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Content card - wrapper for form content with subtle background */
.qb-content-card {
  background-color: var(--p-surface-50, #fafafa);
  padding: 16px;
  border-radius: var(--qb-card-border-radius);
  flex-grow: 1;
}

.app-dark .qb-content-card {
  background-color: var(--p-surface-800, #1e1e1e);
}

/* Form row - horizontal field group */
.qb-form-row {
  display: flex;
  gap: var(--qb-field-gap);
  margin-bottom: var(--qb-field-gap);
}

.qb-form-row > * {
  flex: 1;
}

/* Status card (like the Current Status card in account-frm) */
.p-card {
  background-color: var(--qb-card-bg);
  border: 1px solid var(--qb-card-border);
  border-radius: var(--qb-card-border-radius);
  box-shadow: var(--qb-card-shadow);
}

.p-card .p-card-header {
  padding: 16px 20px;
  font-weight: 600;
  font-size: 14px;
  background-color: var(--p-primary-50, #f0f7ff);
  border-bottom: 1px solid var(--qb-card-border);
  border-radius: var(--qb-card-border-radius) var(--qb-card-border-radius) 0 0;
}

.p-card .p-card-body {
  padding: 20px;
}

.p-card .p-card-content {
  padding: 0;
}

/* =============================================================================
   FIELDSET STYLING
   ============================================================================= */
fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

fieldset:disabled {
  opacity: 0.7;
}

fieldset:disabled input,
fieldset:disabled .p-dropdown,
fieldset:disabled .p-button {
  cursor: not-allowed;
}

/* =============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================= */
@media (max-width: 768px) {
  :root {
    --qb-card-padding: 16px;
    --qb-field-gap: 16px;
    --qb-section-gap: 24px;
  }
  .qb-form-row {
    flex-direction: column;
  }
}
/* =============================================================================
   SAVE/CANCEL BAR
   ============================================================================= */
prox-save-cancel {
  display: contents; /* Remove wrapper box - let inner .qb-page-footer be the only box */
}

prox-save-cancel .p-button {
  margin-right: 12px;
}

/* =============================================================================
   STATUS/CALLOUT CARDS
   ============================================================================= */
/* Status card - colored background for info/status cards */
p-card.status-card .p-card {
  background: var(--p-primary-50);
  border: 1px solid var(--p-primary-200);
}

.app-dark p-card.status-card .p-card {
  background: color-mix(in srgb, var(--p-primary-500) 20%, var(--p-surface-900));
  border-color: color-mix(in srgb, var(--p-primary-500) 40%, var(--p-surface-700));
}

/* =============================================================================
   MASTER-DETAIL LAYOUT HELPERS
   ============================================================================= */
/* Child grid actions - button container in child/detail panels of splitters or tabs */
.qb-child-actions {
  display: flex;
  margin-top: var(--qb-child-actions-margin);
  margin-bottom: var(--qb-child-actions-margin);
}

/* Status message - inline validation/status text (typically red, small caps)
   Designed to sit next to a button and be vertically centered with it */
.qb-status-message {
  margin-left: var(--qb-status-message-margin-left);
  font-size: small;
  font-variant: small-caps;
  color: var(--qb-status-message-color);
  display: inline-flex;
  align-items: center;
}

/* Splitter panel content container - standard flex column layout for multi-grid pages.
   Use inside <ng-template pTemplate> of p-splitter panels. */
.qb-splitter-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* Splitter that follows an action bar - adds top margin to match Template 1's grid spacing.
   Apply to the outer p-splitter that appears after .qb-list-actions. */
p-splitter.qb-splitter-after-actions {
  margin-top: var(--qb-content-margin-top);
}

/* Grid container within splitter panel - grows to fill available space.
   Wrap <prox-ag-grid> in this class within a .qb-splitter-panel. */
.qb-splitter-grid {
  flex-grow: 1;
  min-height: 0; /* Required for proper flex shrinking in nested layouts */
}

/* =============================================================================
   ACTIVATION CHECKLIST
   ============================================================================= */
/* Activation checklist header - used for "ACCOUNT ACTIVATION MODE" etc. */
.qb-activation-header {
  font-size: var(--qb-input-font-size);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--qb-activation-header-color);
}

/* Activation checklist container - orange background to stand out */
.qb-activation-container {
  background-color: var(--qb-activation-bg);
  height: var(--qb-activation-height);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* Activation checklist grid - fills the container height */
.qb-activation-container prox-ag-grid {
  height: 100%;
}

/* =============================================================================
   TABVIEW STYLING
   ============================================================================= */
/* Tab view for forms - use on p-tabView for proper panel layout */
p-tabview.qb-tabview {
  /* Add top spacing when tabview is in a splitter panel (below the divider) */
  padding-top: 12px;
  /* Spacing between tab headers and tab panel content */
}
p-tabview.qb-tabview > div.p-tabpanels {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--surface-card);
  padding: 0;
}
p-tabview.qb-tabview p-tabpanel {
  display: contents;
}
p-tabview.qb-tabview .p-tabview-panels {
  flex-grow: 1;
  padding: 0;
}
p-tabview.qb-tabview .p-tabview-panel {
  height: 100%;
  padding: 0;
}
p-tabview.qb-tabview .p-tabpanel-content,
p-tabview.qb-tabview [data-pc-section=content] {
  padding: 12px 0 0 0;
}

/* =============================================================================
   SPLITTER PANEL TITLES
   Title text for grids/content within splitter panels
   ============================================================================= */
.qb-panel-title {
  font-size: 1rem;
  font-weight: 600; /* font-semibold */
  color: var(--p-primary-700); /* primary color - darker shade */
  margin-left: 0.5rem; /* ml-2 - slight indent */
  margin-bottom: 0.5rem; /* mb-2 */
}

.qb-panel-title .qb-panel-subtitle {
  font-weight: 400; /* font-normal */
  color: var(--p-text-muted-color, #6b7280); /* text-gray-500 */
}

/* =============================================================================
   DIALOG HEADER STYLING
   Match the page title styling (.viewname) for consistency
   ============================================================================= */
p-dynamicdialog .p-dialog-title,
p-confirmdialog .p-dialog-title,
p-dialog .p-dialog-title {
  font-weight: 600 !important;
  font-size: 1.5rem !important;
}

/* =============================================================================
   RESPONSIVE DIALOG WIDTH
   On smaller screens (Surface Pro, laptops, tablets), make dialogs wider
   to better utilize the available screen space.

   Uses width overrides to make dialogs take up more horizontal space.
   ============================================================================= */
@media (max-width: 1535px) {
  /* Make dialogs wider on smaller screens by overriding PrimeNG's inline width.
     We use min-width to ensure dialogs are at least 85% of viewport width,
     while max-width prevents them from exceeding the screen.

     Dialogs must OPT-IN by adding styleClass="p-dialog-responsive" to expand.
     Without this class, dialogs keep their designed width on all screen sizes. */
  .p-dialog.p-dialog-responsive {
    min-width: 85vw !important;
    max-width: 95vw !important;
  }
  /* Expand the dialog content container to fill the wider dialog.
     Target the entity-finder-container class and other containers. */
  .p-dialog.p-dialog-responsive .p-dialog-content > div,
  .p-dialog.p-dialog-responsive .p-dialog-content > div > div,
  .p-dialog.p-dialog-responsive .p-dialog-content .entity-finder-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Ensure AG Grid in dialogs fills the expanded container.
     AG Grid needs explicit width to render columns properly after container resize. */
  .p-dialog.p-dialog-responsive .p-dialog-content .qb-ag-grid-list,
  .p-dialog.p-dialog-responsive .p-dialog-content ag-grid-angular {
    width: 100% !important;
  }
}
/* =============================================================================
   INFO TABLE & STACKED FIELD
   For read-only data display in dialogs and detail cards
   ============================================================================= */
/* Info table - styled table for read-only data display
   Use instead of disabled inputs for cleaner read-only forms */
.qb-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--qb-input-font-size);
  /* Label column - left side */
  /* Value column - right side */
  /* Last row has no border */
  /* Editable field within table */
}
.qb-info-table td {
  padding: 8px 12px;
  vertical-align: top;
  border-bottom: 1px solid var(--qb-card-border);
}
.qb-info-table td.label {
  width: 140px;
  font-weight: 500;
  color: var(--qb-label-color);
  white-space: nowrap;
}
.qb-info-table td.value {
  color: var(--qb-input-text);
}
.qb-info-table tr:last-child td {
  border-bottom: none;
}
.qb-info-table td.editable {
  padding: 4px 8px;
}
.qb-info-table td.editable input {
  width: 100%;
}

/* Compact variant - less padding */
.qb-info-table.compact td {
  padding: 6px 10px;
}

/* Flush variant - no left padding, aligns content with card title */
.qb-info-table.flush td {
  padding-left: 0;
}
.qb-info-table.flush td.label {
  padding-right: 8px;
}

/* Tight variant - for header panels with larger font and proper spacing */
.qb-info-table.tight {
  width: auto;
  font-size: 15px;
}
.qb-info-table.tight td {
  padding: 6px 16px 6px 0;
  border-bottom: none;
}
.qb-info-table.tight td.label {
  font-weight: 600;
  padding-right: 12px;
}
.qb-info-table.tight td.value {
  padding-right: 0;
}

/* Stacked field - label on top, value below (for read-only display) */
.qb-stacked-field .label {
  font-size: var(--qb-label-font-size);
  font-weight: 500;
  color: var(--qb-label-color);
  margin-bottom: 2px;
}
.qb-stacked-field .value {
  font-size: var(--qb-input-font-size);
  color: var(--qb-input-text);
}

/* Section label - for small section headers */
.qb-section-label {
  color: var(--qb-label-color);
}

/* =============================================================================
   GRID DETAIL PANEL
   Detail panel below a grid (in splitter layout) showing selected row info
   ============================================================================= */
/* Container - force content to left margin */
.qb-grid-detail-panel {
  height: 100%;
  width: 100%;
  overflow: auto;
}

/* Force splitter panel to align content left */
.qb-grid-detail-panel-splitter .p-splitter-panel {
  justify-content: flex-start !important;
}

/* Content wrapper */
.qb-grid-detail-panel-content {
  display: flex;
  padding: 12px 16px;
}

/* Section container */
.qb-grid-detail-panel-section {
  padding-right: 24px;
}

/* Vertical divider between sections */
.qb-grid-detail-panel-divider {
  border-left: 1px solid var(--p-surface-300, #d4d5d9);
  margin: 0 16px;
}

.app-dark .qb-grid-detail-panel-divider {
  border-left-color: var(--p-surface-600, #3d3d3d);
}

/* Section header */
.qb-grid-detail-panel-header {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--p-text-color, #1f2937);
  margin-bottom: 12px;
}

/* Table within section */
.qb-grid-detail-panel-table {
  border-collapse: collapse;
}

/* Table row label (left column) */
.qb-grid-detail-panel-label {
  padding: 6px 24px 6px 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--p-text-muted-color, #6b7280);
  vertical-align: top;
}

/* Table row value (right column) */
.qb-grid-detail-panel-value {
  padding: 6px 0;
  font-size: 1rem;
  color: var(--p-text-color, #111827);
}

/* Value emphasis - for primary values like names */
.qb-grid-detail-panel-value.emphasis {
  font-weight: 600;
}

/* Value monospace - for currency/numbers */
.qb-grid-detail-panel-value.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-align: right;
}

/* Value bold - for totals/summaries */
.qb-grid-detail-panel-value.bold {
  font-weight: 700;
}

/* Value negative - for negative amounts */
.qb-grid-detail-panel-value.negative {
  color: #dc2626;
}

/* Summary row - with top border for totals */
.qb-grid-detail-panel-summary-row td {
  border-top: 1px solid var(--p-surface-300, #d4d5d9);
  padding-top: 8px;
}

.app-dark .qb-grid-detail-panel-summary-row td {
  border-top-color: var(--p-surface-600, #3d3d3d);
}

/* Label in summary row */
.qb-grid-detail-panel-summary-row .qb-grid-detail-panel-label {
  font-weight: 600;
  color: var(--p-text-color, #374151);
}

/* Empty state message */
.qb-grid-detail-panel-empty {
  padding: 12px 16px;
  font-style: italic;
  color: var(--p-text-muted-color, #6b7280);
}

/* "... and X more" text for truncated lists */
.qb-grid-detail-panel-more {
  font-style: italic;
  color: var(--p-text-muted-color, #6b7280);
}

/* =============================================================================
   INSIGHTS BUTTON
   Distinctive amber/gold button for context-sensitive help and guidance.
   Used throughout Proximity to provide strategic tips and best practices.
   ============================================================================= */
.qb-insights-button {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  color: #78350f !important;
  border: none !important;
  /* Icon styling */
}
.qb-insights-button:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}
.qb-insights-button:focus {
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.4) !important;
}
.qb-insights-button .p-button-icon {
  color: #78350f !important;
}

/* Dark mode support */
.app-dark .qb-insights-button {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  color: #78350f !important;
}
.app-dark .qb-insights-button:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

/* Column header for multi-column tables (like issuance details) */
.qb-grid-detail-panel-col-header {
  padding: 6px 12px 6px 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--p-text-muted-color, #6b7280);
  text-align: left;
  border-bottom: 1px solid var(--p-surface-300, #d4d5d9);
}

.qb-grid-detail-panel-col-header.text-right {
  text-align: right;
  padding-right: 0;
  padding-left: 16px;
}

.app-dark .qb-grid-detail-panel-col-header {
  border-bottom-color: var(--p-surface-600, #3d3d3d);
}

/* =============================================================================
   RESPONSIVE FORM LAYOUT - Detail Card + Info Cards Split
   On Surface Pro (< 1536px), use 2/3 + 1/3 split for form + status cards
   instead of the global 100% width override.
   Apply .qb-responsive-split to the parent flex container to enable.
   ============================================================================= */
@media (max-width: 1535px) {
  .qb-responsive-split .qb-detail-card {
    width: 66.667% !important; /* 2/3 */
  }
  .qb-responsive-split .qb-info-cards {
    width: 33.333% !important; /* 1/3 */
  }
}
/* =============================================================================
   RESPONSIVE FORM SIZING
   On smaller screens (< 1536px), reduce input heights and font sizes
   to fit more content on Surface Pro and similar devices.
   ============================================================================= */
@media (max-width: 1535px) {
  :root {
    /* Compact input sizing for smaller screens */
    --qb-input-height: 32px;
    --qb-input-padding-x: 10px;
    --qb-input-padding-y: 4px;
    --qb-input-font-size: 13px;
    /* Compact label styling */
    --qb-label-font-size: 12px;
    --qb-label-margin-bottom: 4px;
    /* Compact header styling */
    --qb-header-font-size: 16px;
    --qb-header-margin-bottom: 10px;
    /* Tighter spacing */
    --qb-field-gap: 4px;
    --qb-card-padding: 16px;
  }
  /* Smaller buttons on compact screens */
  .p-button {
    height: 32px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }
  /* Small button stays proportionally smaller */
  .p-button.p-button-sm {
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
  /* Form field labels compact sizing */
  .p-field label,
  prox-field .p-field label,
  qb-field .p-field label {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }
  /* Text inputs need explicit height and font override */
  input[pInputText],
  input.p-inputtext,
  .p-inputtext {
    height: 32px !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
  }
  /* Dropdown/Select - don't force height on float label variants */
  .p-dropdown:not(:has(.p-floatlabel)),
  .p-select:not(:has(.p-floatlabel)) {
    min-height: 32px !important;
  }
  .p-dropdown .p-dropdown-label,
  .p-select .p-select-label {
    font-size: 13px !important;
  }
  .p-dropdown .p-dropdown-trigger,
  .p-select .p-select-dropdown {
    width: 32px !important;
  }
  /* p-select with float label (variant="in") needs special handling */
  p-floatlabel p-select,
  p-floatlabel .p-select {
    min-height: 44px !important;
  }
  p-floatlabel p-select .p-select-label,
  p-floatlabel .p-select .p-select-label {
    padding-top: 20px !important;
    padding-bottom: 4px !important;
  }
  /* Datepicker/calendar compact sizing */
  .p-datepicker .p-inputtext,
  .p-calendar .p-inputtext {
    height: 32px !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
  }
  /* Datepicker inside floatlabel - adjust for compact sizing */
  p-floatlabel p-datepicker .p-inputtext,
  p-floatlabel p-calendar .p-inputtext,
  p-floatlabel .p-datepicker .p-inputtext,
  p-floatlabel .p-calendar .p-inputtext,
  .p-floatlabel p-datepicker .p-inputtext,
  .p-floatlabel p-calendar .p-inputtext,
  .p-floatlabel .p-datepicker .p-inputtext,
  .p-floatlabel .p-calendar .p-inputtext {
    height: 44px !important;
    padding-top: 18px !important;
  }
  /* Input number compact sizing */
  .p-inputnumber .p-inputtext {
    height: 32px !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
  }
  /* Checkbox/radio compact sizing */
  .p-checkbox .p-checkbox-box,
  .p-radiobutton .p-radiobutton-box {
    width: 18px !important;
    height: 18px !important;
  }
  .p-checkbox-label,
  .p-radiobutton-label {
    font-size: 13px !important;
  }
  /* Card header compact sizing */
  .card-header,
  h5.card-header {
    font-size: 16px !important;
    padding-bottom: 12px !important;
  }
  /* Splitter panel title compact sizing */
  .qb-panel-title {
    font-size: 0.9rem !important;
    margin-bottom: 0.375rem !important;
  }
  /* Dialog title compact sizing */
  p-dynamicdialog .p-dialog-title,
  p-confirmdialog .p-dialog-title,
  p-dialog .p-dialog-title {
    font-size: 1.25rem !important;
  }
  /* Info table compact sizing */
  .qb-info-table {
    font-size: 13px !important;
  }
  .qb-info-table td {
    padding: 6px 10px !important;
  }
  .qb-info-table td.label {
    width: 130px !important;
  }
  .qb-info-table.tight {
    font-size: 13px !important;
  }
  .qb-info-table.tight td {
    padding: 4px 12px 4px 0 !important;
  }
  /* Stacked field compact sizing */
  .qb-stacked-field .label {
    font-size: 12px !important;
  }
  .qb-stacked-field .value {
    font-size: 13px !important;
  }
  /* Grid detail panel compact sizing */
  .qb-grid-detail-panel-header {
    font-size: 0.9rem !important;
    margin-bottom: 8px !important;
  }
  .qb-grid-detail-panel-label,
  .qb-grid-detail-panel-value {
    padding: 4px 16px 4px 0 !important;
    font-size: 0.9rem !important;
  }
  .qb-grid-detail-panel-content {
    padding: 8px 12px !important;
  }
}
/* =============================================================================
   PROGRAM NARRATIVE DIALOG - Professional QuickBooks-Style Design
   ============================================================================= */
/* Main container */
.narrative-container {
  padding: 0 8px;
}

/* Hero header section */
.narrative-hero {
  background: linear-gradient(135deg, var(--p-primary-100, #dcfce7) 0%, var(--p-primary-50, #f0fdf4) 100%);
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 24px;
  border: 1px solid var(--p-primary-200, #bbf7d0);
}

.app-dark .narrative-hero {
  background: linear-gradient(135deg, rgba(var(--p-primary-500-rgb, 34, 197, 94), 0.15) 0%, var(--p-surface-800, #1f1f1f) 100%);
  border-color: var(--p-primary-700, #15803d);
}

.narrative-hero-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--p-primary-700, #15803d);
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.app-dark .narrative-hero-title {
  color: var(--p-primary-300, #86efac);
}

.narrative-hero-subtitle {
  font-size: 0.95rem;
  color: var(--p-text-muted-color, #6b7280);
  margin: 0;
  line-height: 1.5;
}

/* Status badge in hero */
.narrative-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 12px;
}

.narrative-status-badge.status-active {
  background-color: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.narrative-status-badge.status-hold {
  background-color: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

.narrative-status-badge.status-phaseout {
  background-color: #fed7aa;
  color: #9a3412;
  border: 1px solid #fdba74;
}

.narrative-status-badge.status-inactive {
  background-color: #f3f4f6;
  color: #6b7280;
  border: 1px solid #d1d5db;
}

.app-dark .narrative-status-badge.status-active {
  background-color: rgba(34, 197, 94, 0.2);
  color: #86efac;
  border-color: #22c55e;
}

.app-dark .narrative-status-badge.status-hold {
  background-color: rgba(234, 179, 8, 0.2);
  color: #fde047;
  border-color: #eab308;
}

.app-dark .narrative-status-badge.status-phaseout {
  background-color: rgba(249, 115, 22, 0.2);
  color: #fdba74;
  border-color: #f97316;
}

.app-dark .narrative-status-badge.status-inactive {
  background-color: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
  border-color: #6b7280;
}

/* Section card */
.narrative-section {
  background: var(--p-surface-0, #ffffff);
  border: 1px solid var(--p-surface-200, #e5e7eb);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.app-dark .narrative-section {
  background: var(--p-surface-800, #1f1f1f);
  border-color: var(--p-surface-600, #3d3d3d);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Section header with icon */
.narrative-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--p-surface-200, #e5e7eb);
}

.app-dark .narrative-section-header {
  border-bottom-color: var(--p-surface-600, #3d3d3d);
}

.narrative-section-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.narrative-section-icon i {
  font-size: 1.1rem;
}

.narrative-section-icon.icon-summary {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1d4ed8;
}

.narrative-section-icon.icon-status {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #16a34a;
}

.narrative-section-icon.icon-term {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #d97706;
}

.narrative-section-icon.icon-parameters {
  background: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%);
  color: #7c3aed;
}

.narrative-section-icon.icon-users {
  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
  color: #db2777;
}

.app-dark .narrative-section-icon.icon-summary {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(59, 130, 246, 0.15) 100%);
  color: #93c5fd;
}

.app-dark .narrative-section-icon.icon-status {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3) 0%, rgba(34, 197, 94, 0.15) 100%);
  color: #86efac;
}

.app-dark .narrative-section-icon.icon-term {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.3) 0%, rgba(234, 179, 8, 0.15) 100%);
  color: #fde047;
}

.app-dark .narrative-section-icon.icon-parameters {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(139, 92, 246, 0.15) 100%);
  color: #c4b5fd;
}

.app-dark .narrative-section-icon.icon-users {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.3) 0%, rgba(236, 72, 153, 0.15) 100%);
  color: #f9a8d4;
}

.narrative-section-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--p-text-color, #111827);
  margin: 0;
}

/* Section content text */
.narrative-section-content {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--p-text-color, #374151);
}

.narrative-section-content p {
  margin: 0 0 12px 0;
}

.narrative-section-content p:last-child {
  margin-bottom: 0;
}

/* Sub-section cards (for allowances/issuances) */
.narrative-subsection {
  background: var(--p-surface-50, #f9fafb);
  border: 1px solid var(--p-surface-200, #e5e7eb);
  border-radius: 8px;
  padding: 16px 20px;
  margin-top: 14px;
}

.app-dark .narrative-subsection {
  background: var(--p-surface-900, #171717);
  border-color: var(--p-surface-600, #3d3d3d);
}

.narrative-subsection-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--p-primary-600, #16a34a);
  margin-bottom: 10px;
}

.app-dark .narrative-subsection-header {
  color: var(--p-primary-400, #4ade80);
}

.narrative-subsection-header i {
  font-size: 0.85rem;
}

.narrative-subsection-content {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--p-text-color, #4b5563);
}

/* User groups table styling */
.narrative-table-container {
  margin-top: 12px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--p-surface-200, #e5e7eb);
}

.app-dark .narrative-table-container {
  border-color: var(--p-surface-600, #3d3d3d);
}

/* Highlight text */
.narrative-highlight {
  font-weight: 600;
  color: var(--p-primary-600, #16a34a);
}

.app-dark .narrative-highlight {
  color: var(--p-primary-400, #4ade80);
}

/* Info callout box */
.narrative-callout {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  border-radius: 0 8px 8px 0;
  margin: 14px 0;
}

.app-dark .narrative-callout {
  background: rgba(59, 130, 246, 0.15);
  border-left-color: #60a5fa;
}

.narrative-callout i {
  color: #3b82f6;
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.app-dark .narrative-callout i {
  color: #60a5fa;
}

.narrative-callout-content {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #1e40af;
}

.app-dark .narrative-callout-content {
  color: #93c5fd;
}

/* Warning callout */
.narrative-callout.callout-warning {
  background: #fef3c7;
  border-left-color: #f59e0b;
}

.app-dark .narrative-callout.callout-warning {
  background: rgba(245, 158, 11, 0.15);
  border-left-color: #fbbf24;
}

.narrative-callout.callout-warning i {
  color: #d97706;
}

.app-dark .narrative-callout.callout-warning i {
  color: #fbbf24;
}

.narrative-callout.callout-warning .narrative-callout-content {
  color: #92400e;
}

.app-dark .narrative-callout.callout-warning .narrative-callout-content {
  color: #fde68a;
}

/* Footer buttons area */
.narrative-footer {
  padding-top: 16px;
  border-top: 1px solid var(--p-surface-200, #e5e7eb);
  margin-top: 8px;
}

.app-dark .narrative-footer {
  border-top-color: var(--p-surface-600, #3d3d3d);
}

/* Key-value info pairs */
.narrative-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.narrative-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.narrative-info-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--p-text-muted-color, #6b7280);
}

.narrative-info-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--p-text-color, #111827);
}

/* =============================================================================
   BASE ELEMENT STYLES
   Tailwind resets heading styles; these restore sensible defaults
   ============================================================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 1.5rem 0 0.5rem 0;
  font-family: inherit;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  margin-top: 0;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

/* Make routed components fill their container */
router-outlet + * {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
}

/* =============================================================================
   LAYOUT OVERRIDES
   Adjustments to the Diamond layout template
   ============================================================================= */
/* Don't limit width of main layout */
.layout-content-wrapper-inside {
  max-width: unset;
}

/* Reduce padding on layout container and make fixed height */
.layout-content {
  height: 100vh;
  padding: 0.25rem 1rem 1rem 1rem;
}

/* Make topbar take up less room */
.layout-topbar {
  height: 2rem;
  width: calc(100% - 2rem);
  padding: 0.5rem 0 0 0;
  border-bottom: 0;
  margin-top: 10px;
}
.layout-topbar .topbar-separator {
  border-left: 0;
}

/* Sidebar submenu label styling */
.layout-submenu .p-menu-list .p-menu-submenu-label {
  background-color: var(--d-sidebar-bg-color);
  color: var(--d-menuitem-text-color);
  border-radius: 4px;
}

/* Footer z-index for grids */
app-layout .layout-footer,
prox-ag-grid .layout-footer {
  position: relative;
  z-index: -1;
}

/* =============================================================================
   PRIMENG COMPONENT OVERRIDES
   Customizations for PrimeNG components
   ============================================================================= */
/* -----------------------------------------------------------------------------
   Block UI & Progress Spinner
   ----------------------------------------------------------------------------- */
.p-blockui-mask {
  background-color: rgba(0, 0, 0, 0.2) !important;
  z-index: 999 !important;
}

.p-blockui,
.p-blockui-mask,
.progress-spinner,
.p-progress-spinner {
  cursor: wait;
}

.progress-spinner {
  position: fixed;
  z-index: 999 !important;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.progress-spinner:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent !important;
}

.p-error {
  color: #dd0000;
}

/* -----------------------------------------------------------------------------
   Stepper (missing styles in PrimeNG v7.0 themes)
   ----------------------------------------------------------------------------- */
.p-stepper .p-stepper-nav {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow-x: auto;
}

.p-stepper-vertical .p-stepper-nav {
  flex-direction: column;
}

.p-stepper-header {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
}

.p-stepper-header:last-of-type {
  flex: initial;
}

.p-stepper-header .p-stepper-action {
  border: 0 none;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}

.p-stepper-header .p-stepper-action:focus-visible {
  outline: 0 none;
  outline-offset: 0;
  box-shadow: 0 0 0 0.2rem #c0d0e0;
}

.p-stepper.p-stepper-readonly .p-stepper-header {
  cursor: auto;
}

.p-stepper-header.p-highlight .p-stepper-action {
  cursor: default;
}

.p-stepper-title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.p-stepper-number {
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-stepper-separator {
  flex: 1 1 0;
}

.p-stepper .p-stepper-header {
  padding: 0.5rem;
}

.p-stepper .p-stepper-header .p-stepper-action {
  transition: none;
  border-radius: 4px;
  background: #ffffff;
  outline-color: transparent;
}

.p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
  color: #4c566a;
  border: 1px solid #ffffff;
  border-width: 2px;
  background: #ffffff;
  min-width: 2rem;
  height: 2rem;
  line-height: 2rem;
  font-size: 1.143rem;
  border-radius: 50%;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
  margin-left: 0.5rem;
  color: #81a1c1;
  font-weight: 600;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
  outline: 0 none;
  outline-offset: 0;
  box-shadow: 0 0 0 0.2rem #c0d0e0;
}

.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
  background: #d8dee9;
  color: #2e3440;
}

.p-stepper .p-stepper-header.p-highlight .p-stepper-title {
  color: #4c566a;
}

.p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
  outline: 0 none;
  outline-offset: 0;
  box-shadow: 0 0 0 0.2rem #c0d0e0;
}

.p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
  background-color: #5e81ac;
}

.p-stepper .p-stepper-panels {
  background: #ffffff;
  padding: 1rem;
  color: #4c566a;
}

.p-stepper .p-stepper-separator {
  background-color: #e5e9f0;
  width: 100%;
  height: 2px;
  margin-inline-start: 1rem;
  transition: none;
}

.p-stepper.p-stepper-vertical {
  display: flex;
  flex-direction: column;
}

.p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
  display: flex;
  flex: 1 1 auto;
  background: #ffffff;
  color: #4c566a;
}

.p-stepper.p-stepper-vertical .p-stepper-panel {
  display: flex;
  flex-direction: column;
  flex: initial;
}

.p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
  flex: 1 1 auto;
}

.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
  flex: initial;
}

.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
  width: 100%;
  padding-left: 1rem;
}

.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
  flex: 0 0 auto;
  width: 2px;
  height: auto;
  margin-inline-start: calc(1.75rem + 2px);
}

.p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
  background-color: #5e81ac;
}

.p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
  padding-left: 3rem;
}

/* -----------------------------------------------------------------------------
   Picklist
   ----------------------------------------------------------------------------- */
.p-picklist .p-picklist-filter-container {
  padding: 0;
}
.p-picklist .p-picklist-header {
  padding: 0.5rem;
}
.p-picklist .p-picklist-list {
  min-height: 5rem;
}

/* -----------------------------------------------------------------------------
   Dialog (Confirm & Dynamic)
   ----------------------------------------------------------------------------- */
p-confirmdialog,
p-dynamicdialog {
  white-space: pre-line;
}
p-confirmdialog textarea,
p-dynamicdialog textarea {
  border: 2px solid lightgray;
  padding: 3px;
}
p-confirmdialog .p-dialog.red-header .p-dialog-header,
p-dynamicdialog .p-dialog.red-header .p-dialog-header {
  background-color: #d30000;
  color: white;
  padding-bottom: 11px;
}
p-confirmdialog .p-dialog.red-header .p-dialog-content,
p-dynamicdialog .p-dialog.red-header .p-dialog-content {
  padding-top: 10px;
}
p-confirmdialog .p-dialog.yellow-header .p-dialog-header,
p-dynamicdialog .p-dialog.yellow-header .p-dialog-header {
  background-color: var(--p-primary-500);
  color: var(--p-primary-contrast-color);
  padding-bottom: 11px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  margin: -1px -1px 0 -1px;
  padding-left: calc(1rem + 1px);
  padding-right: calc(1rem + 1px);
  padding-top: calc(1rem + 1px);
}
p-confirmdialog .p-dialog.yellow-header .p-dialog-header button,
p-dynamicdialog .p-dialog.yellow-header .p-dialog-header button {
  color: var(--p-primary-contrast-color) !important;
}
p-confirmdialog .p-dialog.yellow-header .p-dialog-header button:hover,
p-dynamicdialog .p-dialog.yellow-header .p-dialog-header button:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}
p-confirmdialog .p-dialog.yellow-header .p-dialog-header button svg,
p-confirmdialog .p-dialog.yellow-header .p-dialog-header button .p-icon,
p-dynamicdialog .p-dialog.yellow-header .p-dialog-header button svg,
p-dynamicdialog .p-dialog.yellow-header .p-dialog-header button .p-icon {
  color: var(--p-primary-contrast-color) !important;
  fill: currentColor !important;
}
p-confirmdialog .p-dialog.yellow-header .p-dialog-content,
p-dynamicdialog .p-dialog.yellow-header .p-dialog-content {
  padding-top: 10px;
}
p-confirmdialog .p-dialog.goldenrod .p-dialog-header,
p-dynamicdialog .p-dialog.goldenrod .p-dialog-header {
  background-color: #ffffde;
  padding-bottom: 11px;
}
p-confirmdialog .p-dialog.goldenrod .p-dialog-content,
p-dynamicdialog .p-dialog.goldenrod .p-dialog-content {
  background-color: #ffffde;
}
p-confirmdialog a,
p-dynamicdialog a {
  color: #0044ff;
  text-decoration: underline;
  cursor: pointer;
}

.p-confirm-dialog-message {
  white-space: pre-line;
}

/* -----------------------------------------------------------------------------
   Galleria
   ----------------------------------------------------------------------------- */
div.p-galleria div.p-galleria-caption {
  padding-bottom: 0.5rem;
}

.p-galleria {
  border-style: none !important;
}

/* -----------------------------------------------------------------------------
   Menu
   ----------------------------------------------------------------------------- */
.p-menu .p-menu-item-link.p-menu-item-link-active {
  background-color: #d8e4f0;
  border: 2px solid gray;
}

/* -----------------------------------------------------------------------------
   Splitter
   ----------------------------------------------------------------------------- */
.p-splitter {
  border: none !important;
  background: var(--surface-card) !important;
}

.p-tablist-tab-list {
  background: none !important;
}

/* -----------------------------------------------------------------------------
   Fluid Layout
   ----------------------------------------------------------------------------- */
.p-fluid .p-inputtext,
.p-fluid .p-textarea,
.p-fluid .p-dropdown {
  width: 100%;
  margin: 0;
}

/* -----------------------------------------------------------------------------
   Divider (bug fix for PrimeNG)
   https://github.com/primefaces/primevue/issues/690
   ----------------------------------------------------------------------------- */
.p-divider-solid.p-divider-horizontal:before {
  border-top-style: solid !important;
}

.p-divider-dashed.p-divider-horizontal:before {
  border-top-style: dashed !important;
}

.p-divider-solid.p-divider-vertical:before {
  border-left-style: solid !important;
  border-left-color: lightgray;
}

/* -----------------------------------------------------------------------------
   Input Icon (fix for password eye icon)
   ----------------------------------------------------------------------------- */
.p-input-icon-right > .p-icon-wrapper {
  right: 0.75rem;
}

/* -----------------------------------------------------------------------------
   Breadcrumb
   ----------------------------------------------------------------------------- */
.p-breadcrumb {
  padding-left: 10 !important;
}

/* =============================================================================
   TIPTAP / HTML EDITOR STYLES
   ============================================================================= */
.html-editor-menu-bar button {
  border: none;
  padding: 0.5rem 0.75rem;
}
.html-editor-menu-bar button:hover, .html-editor-menu-bar button.is-active {
  color: white;
  background-color: rgb(158, 158, 158);
}

.tiptap,
.notification {
  /* Table styling - matches server-rendered notifications */
  /* Table editing in tiptap */
}
.tiptap span[data-type=mention],
.notification span[data-type=mention] {
  color: purple;
}
.tiptap table,
.notification table {
  border-collapse: collapse;
  margin: 0;
  overflow: hidden;
  table-layout: fixed;
  width: 100%;
}
.tiptap table td,
.tiptap table th,
.notification table td,
.notification table th {
  border: 1px solid #bbbbbb;
  min-width: 1em;
  padding: 6px 8px;
  position: relative;
  vertical-align: top;
  margin-bottom: 0;
}
.tiptap table th,
.notification table th {
  background-color: #dddddd;
  font-weight: bold;
  text-align: left;
}
.tiptap td p,
.tiptap th p,
.notification td p,
.notification th p {
  margin: 0;
}
.tiptap table .selectedCell:after,
.notification table .selectedCell:after {
  background: lightgray;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}
.tiptap table .column-resize-handle,
.notification table .column-resize-handle {
  background-color: purple;
  bottom: -2px;
  pointer-events: none;
  position: absolute;
  right: -2px;
  top: 0;
  width: 4px;
}
.tiptap .tableWrapper,
.notification .tableWrapper {
  margin: 1.5rem 0;
  overflow-x: auto;
}
.tiptap.resize-cursor,
.notification.resize-cursor {
  cursor: ew-resize;
  cursor: col-resize;
}

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */
.loading {
  cursor: wait;
}

.loading-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
}

.bluelink {
  color: #0044ff;
  text-decoration: underline;
  cursor: pointer;
}

.red_pointer {
  color: red;
  cursor: help;
}

.green_pointer {
  color: mediumseagreen;
  cursor: help;
}

.small-dropdown .p-dropdown-label {
  font-size: 12px !important;
  padding: 3px;
}

/* =============================================================================
   UTILITY STYLES
   ============================================================================= */
.qb-group-label {
  font-size: 1.5rem;
  margin-bottom: 5px;
  font-variant: small-caps;
}

.qb-label-data {
  font-size: larger;
}

.qb-label-data-emphasis {
  font-size: larger;
  color: red;
}

.qb-fade {
  opacity: 0.6;
}

.qb-mini-icon {
  border-radius: 50%;
  height: 1.5rem;
  width: 1.5rem;
  display: flex;
  justify-content: center;
}
.qb-mini-icon i {
  color: white;
  padding-top: 0.25rem;
  font-size: 0.8rem;
}

.qb-insight-box {
  box-shadow: 1px 1px 5px black;
  background-color: var(--p-primary-50);
  padding: 6px;
  border-radius: 20px;
  border-width: 0px;
}

.qb-error-row {
  background-color: lightyellow;
}

/* Form styles */
form .p-field {
  margin-bottom: 0 !important;
}
form .ui-message.ui-widget.ui-corner-all.ui-message-error.ui-messages-error.ng-star-inserted {
  color: red;
  font-size: 12px;
  padding-top: 1px;
  margin-bottom: 5px;
}
form .ui-message.ui-widget.ui-corner-all.ui-message-error.ui-messages-error.ng-star-inserted:before {
  content: "°";
  margin-right: 6px;
  padding-top: 1px;
  margin-bottom: 5px;
}
form .group-lead {
  font-size: larger;
  font-weight: 400;
  margin-bottom: 20px;
}

.job-order-product-card {
  gap: 1.5rem;
  padding-top: 0.5rem;
  margin-top: 1rem;
  cursor: pointer;
}
.job-order-product-card:hover {
  background-color: azure;
}

/* Product Search filter panel */
.product-search__muted-label {
  color: var(--p-text-muted-color, rgba(0, 0, 0, 0.6));
}

.product-search__criteria-divider {
  border-top: 1px solid var(--p-surface-200, #e5e7eb);
}

.product-search__criteria-chip {
  background-color: var(--p-primary-50, #f0f7ff);
  color: var(--p-primary-700, #004a7c);
  border: 1px solid var(--p-primary-200, #b3d9ff);
}

.product-search__narrow-col {
  width: 280px;
  min-width: 280px;
}

.product-search__choices-col {
  width: 200px;
  min-width: 200px;
}

@media (min-width: 768px){
  .md\:label-small{
    text-align: center;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--p-surface-500) calc(100% * var(--tw-text-opacity, 1)), transparent);
    font-family: "InterDisplay", sans-serif;
    font-feature-settings: "cv11" on, "cv10" on, "cv09" on, "cv07" on, "cv05" on, "cv04" on, "cv03" on, "cv02" on, "cv01" on;
  }
}

.hover\:border-primary:hover{
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--p-primary-color) calc(100% * var(--tw-border-opacity, 1)), transparent);
}

.hover\:border-primary-400:hover{
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--p-primary-400) calc(100% * var(--tw-border-opacity, 1)), transparent);
}

.hover\:bg-gray-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-200:hover{
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--p-primary-200) calc(100% * var(--tw-bg-opacity, 1)), transparent);
}

.hover\:bg-surface-50:hover{
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--p-surface-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
}

.hover\:text-gray-700:hover{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.hover\:text-primary:hover{
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--p-primary-color) calc(100% * var(--tw-text-opacity, 1)), transparent);
}

.hover\:text-red-500:hover{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover{
  text-decoration-line: underline;
}

.hover\:opacity-100:hover{
  opacity: 1;
}

.hover\:shadow-lg:hover{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:bg-emphasis:hover{
  background: var(--p-content-hover-background);
  color: var(--p-content-hover-color);
}

.focus\:border-none:focus{
  border-style: none;
}

.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-primary-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: color-mix(in srgb, var(--p-primary-500) calc(100% * var(--tw-ring-opacity, 1)), transparent);
}

.group:hover .group-hover\:opacity-100{
  opacity: 1;
}

@media (min-width: 576px){
  .sm\:relative{
    position: relative;
  }
  .sm\:\!w-\[36rem\]{
    width: 36rem !important;
  }
  .sm\:flex-row{
    flex-direction: row;
  }
  .sm\:items-center{
    align-items: center;
  }
}

@media (min-width: 768px){
  .md\:w-40{
    width: 10rem;
  }
  .md\:flex-row{
    flex-direction: row;
  }
  .md\:flex-col{
    flex-direction: column;
  }
  .md\:items-end{
    align-items: flex-end;
  }
  .md\:items-center{
    align-items: center;
  }
}

@media (min-width: 992px){
  .lg\:col-span-1{
    grid-column: span 1 / span 1;
  }
  .lg\:col-span-2{
    grid-column: span 2 / span 2;
  }
  .lg\:col-span-3{
    grid-column: span 3 / span 3;
  }
  .lg\:col-span-4{
    grid-column: span 4 / span 4;
  }
  .lg\:col-span-5{
    grid-column: span 5 / span 5;
  }
  .lg\:col-span-6{
    grid-column: span 6 / span 6;
  }
  .lg\:flex{
    display: flex;
  }
  .lg\:w-1\/3{
    width: 33.333333%;
  }
  .lg\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px){
  .xl\:flex{
    display: flex;
  }
}

@media (min-width: 1920px){
  .\32xl\:mt-0{
    margin-top: 0px;
  }
  .\32xl\:block{
    display: block;
  }
  .\32xl\:hidden{
    display: none;
  }
  .\32xl\:w-1\/2{
    width: 50%;
  }
  .\32xl\:pr-0{
    padding-right: 0px;
  }
  .\32xl\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

.dark\:border-surface-700:where([class*="app-dark"], [class*="app-dark"] *){
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--p-surface-700) calc(100% * var(--tw-border-opacity, 1)), transparent);
}

.dark\:bg-gray-600:where([class*="app-dark"], [class*="app-dark"] *){
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

.dark\:bg-surface-800:where([class*="app-dark"], [class*="app-dark"] *){
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--p-surface-800) calc(100% * var(--tw-bg-opacity, 1)), transparent);
}

.dark\:bg-surface-900:where([class*="app-dark"], [class*="app-dark"] *){
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--p-surface-900) calc(100% * var(--tw-bg-opacity, 1)), transparent);
}

.dark\:text-surface-0:where([class*="app-dark"], [class*="app-dark"] *){
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--p-surface-0) calc(100% * var(--tw-text-opacity, 1)), transparent);
}

.dark\:text-surface-400:where([class*="app-dark"], [class*="app-dark"] *){
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--p-surface-400) calc(100% * var(--tw-text-opacity, 1)), transparent);
}

.dark\:hover\:bg-gray-800:hover:where([class*="app-dark"], [class*="app-dark"] *){
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-surface-700:hover:where([class*="app-dark"], [class*="app-dark"] *){
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--p-surface-700) calc(100% * var(--tw-bg-opacity, 1)), transparent);
}

/*# sourceMappingURL=styles.ec414bc5505aa497.css.map*/