/*!**********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./node_modules/primeicons/primeicons.css?ngGlobalStyle ***!
  \**********************************************************************************************************************************************************************************************************************************************/
@font-face {
    font-family: 'primeicons';
    font-display: block;
    src: url('primeicons.eot');
    src: url('primeicons.eot?#iefix') format('embedded-opentype'), url('primeicons.woff2') format('woff2'), url('primeicons.woff') format('woff'), url('primeicons.ttf') format('truetype'), url('primeicons.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;
}

@media (prefers-reduced-motion: reduce) {
  .pi-spin {
    animation-delay: -1ms;
    animation-duration: 1ms;
    animation-iteration-count: 1;
    transition-delay: 0s;
    transition-duration: 0s;
  }
}

@keyframes fa-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

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

.pi-receipt:before {
    content: "\ea06";
}

.pi-asterisk:before {
    content: "\ea07";
}

.pi-face-smile:before {
    content: "\ea08";
}

.pi-pinterest:before {
    content: "\ea09";
}

.pi-expand:before {
    content: "\ea0a";
}

.pi-pen-to-square:before {
    content: "\ea0b";
}

.pi-wave-pulse:before {
    content: "\ea0c";
}

.pi-turkish-lira:before {
    content: "\ea0d";
}

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

.pi-crown:before {
    content: "\ea0f";
}

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

.pi-warehouse:before {
    content: "\ea11";
}

.pi-objects-column:before {
    content: "\ea12";
}

.pi-clipboard:before {
    content: "\ea13";
}

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

.pi-venus:before {
    content: "\ea15";
}

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

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

.pi-microchip:before {
    content: "\ea18";
}

.pi-twitch:before {
    content: "\ea19";
}

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

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

.pi-microchip-ai:before {
    content: "\ea1c";
}

.pi-trophy:before {
    content: "\ea1d";
}

.pi-barcode:before {
    content: "\ea1e";
}

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

.pi-mars:before {
    content: "\ea20";
}

.pi-tiktok:before {
    content: "\ea21";
}

.pi-arrow-up-right-and-arrow-down-left-from-center:before {
    content: "\ea22";
}

.pi-ethereum:before {
    content: "\ea23";
}

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

.pi-thumbtack:before {
    content: "\ea25";
}

.pi-arrow-down-left-and-arrow-up-right-to-center:before {
    content: "\ea26";
}

.pi-equals:before {
    content: "\ea27";
}

.pi-lightbulb:before {
    content: "\ea28";
}

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

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

.pi-chart-scatter:before {
    content: "\ea2b";
}

.pi-indian-rupee:before {
    content: "\ea2c";
}

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

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

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

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

.pi-sparkles:before {
    content: "\ea31";
}

.pi-bullseye:before {
    content: "\ea32";
}

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

.pi-graduation-cap:before {
    content: "\ea34";
}

.pi-hammer:before {
    content: "\ea35";
}

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

.pi-gauge:before {
    content: "\ea37";
}

.pi-shop:before {
    content: "\ea38";
}

.pi-headphones:before {
    content: "\ea39";
}

.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";
}

/*!*************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./src/styles/primeflex-used.css?ngGlobalStyle ***!
  \*************************************************************************************************************************************************************************************************************************************/
/* Generated by helper-scripts/generate-primeflex-subset.js. */
/* Regenerate after adding new PrimeFlex utility classes. */
.grid {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.5rem;
  margin-left: -0.5rem;
  margin-top: -0.5rem;
}

.grid > .col,
.grid > [class*=col] {
  box-sizing: border-box;
}

.grid-nogutter {
  margin-right: 0;
  margin-left: 0;
  margin-top: 0;
}

.grid-nogutter > .col,
.grid-nogutter > [class*=col-] {
  padding: 0;
}

.col {
  flex-grow: 1;
  flex-basis: 0;
  padding: 0.5rem;
}

.col-fixed {
  flex: 0 0 auto;
  padding: 0.5rem;
}

.col-1 {
  flex: 0 0 auto;
  padding: 0.5rem;
  width: 8.3333%;
}

.col-2 {
  flex: 0 0 auto;
  padding: 0.5rem;
  width: 16.6667%;
}

.col-3 {
  flex: 0 0 auto;
  padding: 0.5rem;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  padding: 0.5rem;
  width: 33.3333%;
}

.col-5 {
  flex: 0 0 auto;
  padding: 0.5rem;
  width: 41.6667%;
}

.col-6 {
  flex: 0 0 auto;
  padding: 0.5rem;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  padding: 0.5rem;
  width: 58.3333%;
}

.col-8 {
  flex: 0 0 auto;
  padding: 0.5rem;
  width: 66.6667%;
}

.col-9 {
  flex: 0 0 auto;
  padding: 0.5rem;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  padding: 0.5rem;
  width: 83.3333%;
}

.col-11 {
  flex: 0 0 auto;
  padding: 0.5rem;
  width: 91.6667%;
}

.col-12 {
  flex: 0 0 auto;
  padding: 0.5rem;
  width: 100%;
}

@media screen and (min-width: 576px) {
  .sm\:col {
    flex-grow: 1;
    flex-basis: 0;
    padding: 0.5rem;
  }
  .sm\:col-fixed {
    flex: 0 0 auto;
    padding: 0.5rem;
  }
  .sm\:col-1 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 8.3333%;
  }
  .sm\:col-2 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 16.6667%;
  }
  .sm\:col-3 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 25%;
  }
  .sm\:col-4 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 33.3333%;
  }
  .sm\:col-5 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 41.6667%;
  }
  .sm\:col-6 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 50%;
  }
  .sm\:col-7 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 58.3333%;
  }
  .sm\:col-8 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 66.6667%;
  }
  .sm\:col-9 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 75%;
  }
  .sm\:col-10 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 83.3333%;
  }
  .sm\:col-11 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 91.6667%;
  }
  .sm\:col-12 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .md\:col {
    flex-grow: 1;
    flex-basis: 0;
    padding: 0.5rem;
  }
  .md\:col-fixed {
    flex: 0 0 auto;
    padding: 0.5rem;
  }
  .md\:col-1 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 8.3333%;
  }
  .md\:col-2 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 16.6667%;
  }
  .md\:col-3 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 25%;
  }
  .md\:col-4 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 33.3333%;
  }
  .md\:col-5 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 41.6667%;
  }
  .md\:col-6 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 50%;
  }
  .md\:col-7 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 58.3333%;
  }
  .md\:col-8 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 66.6667%;
  }
  .md\:col-9 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 75%;
  }
  .md\:col-10 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 83.3333%;
  }
  .md\:col-11 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 91.6667%;
  }
  .md\:col-12 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 100%;
  }
}
@media screen and (min-width: 992px) {
  .lg\:col {
    flex-grow: 1;
    flex-basis: 0;
    padding: 0.5rem;
  }
  .lg\:col-fixed {
    flex: 0 0 auto;
    padding: 0.5rem;
  }
  .lg\:col-1 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 8.3333%;
  }
  .lg\:col-2 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 16.6667%;
  }
  .lg\:col-3 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 25%;
  }
  .lg\:col-4 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 33.3333%;
  }
  .lg\:col-5 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 41.6667%;
  }
  .lg\:col-6 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 50%;
  }
  .lg\:col-7 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 58.3333%;
  }
  .lg\:col-8 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 66.6667%;
  }
  .lg\:col-9 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 75%;
  }
  .lg\:col-10 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 83.3333%;
  }
  .lg\:col-11 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 91.6667%;
  }
  .lg\:col-12 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  .xl\:col {
    flex-grow: 1;
    flex-basis: 0;
    padding: 0.5rem;
  }
  .xl\:col-fixed {
    flex: 0 0 auto;
    padding: 0.5rem;
  }
  .xl\:col-1 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 8.3333%;
  }
  .xl\:col-2 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 16.6667%;
  }
  .xl\:col-3 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 25%;
  }
  .xl\:col-4 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 33.3333%;
  }
  .xl\:col-5 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 41.6667%;
  }
  .xl\:col-6 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 50%;
  }
  .xl\:col-7 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 58.3333%;
  }
  .xl\:col-8 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 66.6667%;
  }
  .xl\:col-9 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 75%;
  }
  .xl\:col-10 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 83.3333%;
  }
  .xl\:col-11 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 91.6667%;
  }
  .xl\:col-12 {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 100%;
  }
}
.col-offset-0 {
  margin-left: 0 !important;
}

.col-offset-1 {
  margin-left: 8.3333% !important;
}

.col-offset-2 {
  margin-left: 16.6667% !important;
}

.col-offset-3 {
  margin-left: 25% !important;
}

.col-offset-4 {
  margin-left: 33.3333% !important;
}

.col-offset-5 {
  margin-left: 41.6667% !important;
}

.col-offset-6 {
  margin-left: 50% !important;
}

.col-offset-7 {
  margin-left: 58.3333% !important;
}

.col-offset-8 {
  margin-left: 66.6667% !important;
}

.col-offset-9 {
  margin-left: 75% !important;
}

.col-offset-10 {
  margin-left: 83.3333% !important;
}

.col-offset-11 {
  margin-left: 91.6667% !important;
}

.col-offset-12 {
  margin-left: 100% !important;
}

@media screen and (min-width: 576px) {
  .sm\:col-offset-0 {
    margin-left: 0 !important;
  }
  .sm\:col-offset-1 {
    margin-left: 8.3333% !important;
  }
  .sm\:col-offset-2 {
    margin-left: 16.6667% !important;
  }
  .sm\:col-offset-3 {
    margin-left: 25% !important;
  }
  .sm\:col-offset-4 {
    margin-left: 33.3333% !important;
  }
  .sm\:col-offset-5 {
    margin-left: 41.6667% !important;
  }
  .sm\:col-offset-6 {
    margin-left: 50% !important;
  }
  .sm\:col-offset-7 {
    margin-left: 58.3333% !important;
  }
  .sm\:col-offset-8 {
    margin-left: 66.6667% !important;
  }
  .sm\:col-offset-9 {
    margin-left: 75% !important;
  }
  .sm\:col-offset-10 {
    margin-left: 83.3333% !important;
  }
  .sm\:col-offset-11 {
    margin-left: 91.6667% !important;
  }
  .sm\:col-offset-12 {
    margin-left: 100% !important;
  }
}
@media screen and (min-width: 768px) {
  .md\:col-offset-0 {
    margin-left: 0 !important;
  }
  .md\:col-offset-1 {
    margin-left: 8.3333% !important;
  }
  .md\:col-offset-2 {
    margin-left: 16.6667% !important;
  }
  .md\:col-offset-3 {
    margin-left: 25% !important;
  }
  .md\:col-offset-4 {
    margin-left: 33.3333% !important;
  }
  .md\:col-offset-5 {
    margin-left: 41.6667% !important;
  }
  .md\:col-offset-6 {
    margin-left: 50% !important;
  }
  .md\:col-offset-7 {
    margin-left: 58.3333% !important;
  }
  .md\:col-offset-8 {
    margin-left: 66.6667% !important;
  }
  .md\:col-offset-9 {
    margin-left: 75% !important;
  }
  .md\:col-offset-10 {
    margin-left: 83.3333% !important;
  }
  .md\:col-offset-11 {
    margin-left: 91.6667% !important;
  }
  .md\:col-offset-12 {
    margin-left: 100% !important;
  }
}
@media screen and (min-width: 992px) {
  .lg\:col-offset-0 {
    margin-left: 0 !important;
  }
  .lg\:col-offset-1 {
    margin-left: 8.3333% !important;
  }
  .lg\:col-offset-2 {
    margin-left: 16.6667% !important;
  }
  .lg\:col-offset-3 {
    margin-left: 25% !important;
  }
  .lg\:col-offset-4 {
    margin-left: 33.3333% !important;
  }
  .lg\:col-offset-5 {
    margin-left: 41.6667% !important;
  }
  .lg\:col-offset-6 {
    margin-left: 50% !important;
  }
  .lg\:col-offset-7 {
    margin-left: 58.3333% !important;
  }
  .lg\:col-offset-8 {
    margin-left: 66.6667% !important;
  }
  .lg\:col-offset-9 {
    margin-left: 75% !important;
  }
  .lg\:col-offset-10 {
    margin-left: 83.3333% !important;
  }
  .lg\:col-offset-11 {
    margin-left: 91.6667% !important;
  }
  .lg\:col-offset-12 {
    margin-left: 100% !important;
  }
}
@media screen and (min-width: 1200px) {
  .xl\:col-offset-0 {
    margin-left: 0 !important;
  }
  .xl\:col-offset-1 {
    margin-left: 8.3333% !important;
  }
  .xl\:col-offset-2 {
    margin-left: 16.6667% !important;
  }
  .xl\:col-offset-3 {
    margin-left: 25% !important;
  }
  .xl\:col-offset-4 {
    margin-left: 33.3333% !important;
  }
  .xl\:col-offset-5 {
    margin-left: 41.6667% !important;
  }
  .xl\:col-offset-6 {
    margin-left: 50% !important;
  }
  .xl\:col-offset-7 {
    margin-left: 58.3333% !important;
  }
  .xl\:col-offset-8 {
    margin-left: 66.6667% !important;
  }
  .xl\:col-offset-9 {
    margin-left: 75% !important;
  }
  .xl\:col-offset-10 {
    margin-left: 83.3333% !important;
  }
  .xl\:col-offset-11 {
    margin-left: 91.6667% !important;
  }
  .xl\:col-offset-12 {
    margin-left: 100% !important;
  }
}

.text-500 {
  color: light-dark(var(--p-surface-500), var(--p-surface-300)) !important;
}

.text-600 {
  color: light-dark(var(--p-surface-600), var(--p-surface-200)) !important;
}

.text-700 {
  color: light-dark(var(--p-surface-700), var(--p-surface-100)) !important;
}

.text-800 {
  color: light-dark(var(--p-surface-800), var(--p-surface-50)) !important;
}

.text-900 {
  color: light-dark(var(--p-surface-900), var(--p-surface-0)) !important;
}

.surface-100 {
  background-color: light-dark(var(--p-surface-100), var(--p-surface-700)) !important;
}

.border-200 {
  border-color: light-dark(var(--p-surface-200), var(--p-surface-600)) !important;
}

.border-300 {
  border-color: light-dark(var(--p-surface-300), var(--p-surface-500)) !important;
}

.bg-transparent {
  background-color: transparent !important;
}
.text-blue-600 {
  color: var(--p-blue-600) !important;
}
.text-blue-700 {
  color: var(--p-blue-700) !important;
}
.text-yellow-600 {
  color: var(--p-yellow-600) !important;
}
.text-yellow-700 {
  color: var(--p-yellow-700) !important;
}
.text-orange-500 {
  color: var(--p-orange-500) !important;
}
.text-gray-500 {
  color: var(--p-gray-500) !important;
}
.text-gray-600 {
  color: var(--p-gray-600) !important;
}
.text-gray-700 {
  color: var(--p-gray-700) !important;
}
.text-red-500 {
  color: var(--p-red-500) !important;
}
.bg-green-200 {
  background-color: var(--p-green-200) !important;
}
.bg-yellow-200 {
  background-color: var(--p-yellow-200) !important;
}

.bg-gray-50 {
  background-color: var(--p-gray-50) !important;
}
.bg-red-200 {
  background-color: var(--p-red-200) !important;
}
.border-blue-200 {
  border-color: var(--p-blue-200) !important;
}
.border-yellow-200 {
  border-color: var(--p-yellow-200) !important;
}
.text-white-alpha-80 {
  color: rgba(255,255,255,0.8) !important;
}

.text-primary {
  color: var(--p-primary-color) !important;
}

.bg-white {
  background-color: #ffffff !important;
}

.text-white {
  color: #ffffff !important;
}

.text-color {
  color: var(--p-text-color) !important;
}

.surface-card {
  background-color: light-dark(var(--p-surface-0), var(--p-surface-900)) !important;
}

.surface-overlay {
  background-color: light-dark(var(--p-surface-0), var(--p-surface-900)) !important;
}

.surface-border {
  border-color: light-dark(var(--p-surface-200), var(--p-surface-700)) !important;
}
.field {
  margin-bottom: 1rem;
}

.field > label {
  display: inline-block;
  margin-bottom: 0.5rem;
}

.field.grid > label {
  display: flex;
  align-items: center;
}

.field > small {
  margin-top: 0.25rem;
}

.field.grid,
.formgrid.grid {
  margin-top: 0;
}

.field.grid .col-fixed,
.formgrid.grid .col-fixed,
.field.grid .col,
.formgrid.grid .col,
.field.grid .col-1,
.formgrid.grid .col-1,
.field.grid .col-2,
.formgrid.grid .col-2,
.field.grid .col-3,
.formgrid.grid .col-3,
.field.grid .col-4,
.formgrid.grid .col-4,
.field.grid .col-5,
.formgrid.grid .col-5,
.field.grid .col-6,
.formgrid.grid .col-6,
.field.grid .col-7,
.formgrid.grid .col-7,
.field.grid .col-8,
.formgrid.grid .col-8,
.field.grid .col-9,
.formgrid.grid .col-9,
.field.grid .col-10,
.formgrid.grid .col-10,
.field.grid .col-11,
.formgrid.grid .col-11,
.field.grid .col-12,
.formgrid.grid .col-12 {
  padding-top: 0;
  padding-bottom: 0;
}

.formgroup-inline .field,
.formgroup-inline .field-checkbox,
.formgroup-inline .field-radiobutton {
  margin-right: 1rem;
}

.formgroup-inline .field > label,
.formgroup-inline .field-checkbox > label,
.formgroup-inline .field-radiobutton > label {
  margin-right: 0.5rem;
  margin-bottom: 0;
}

.field-checkbox,
.field-radiobutton {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.field-checkbox > label,
.field-radiobutton > label {
  margin-left: 0.5rem;
  line-height: 1;
}

.hidden {
  display: none !important;
}

.block {
  display: block !important;
}

.inline {
  display: inline !important;
}

.inline-block {
  display: inline-block !important;
}

.flex {
  display: flex !important;
}

.inline-flex {
  display: inline-flex !important;
}
.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}
.underline {
  text-decoration: underline !important;
}

.lowercase {
  text-transform: lowercase !important;
}

.uppercase {
  text-transform: uppercase !important;
}

.font-medium {
  font-weight: 500 !important;
}

.font-semibold {
  font-weight: 600 !important;
}

.font-bold {
  font-weight: 700 !important;
}

.text-xs {
  font-size: 0.75rem !important;
}

.text-sm {
  font-size: 0.875rem !important;
}

.text-base {
  font-size: 1rem !important;
}

.text-lg {
  font-size: 1.125rem !important;
}

.text-xl {
  font-size: 1.25rem !important;
}

.text-2xl {
  font-size: 1.5rem !important;
}

.line-height-3 {
  line-height: 1.5 !important;
}

.flex-column {
  flex-direction: column !important;
}
.flex-wrap {
  flex-wrap: wrap !important;
}
.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

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

.justify-content-between {
  justify-content: space-between !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-self-end {
  align-self: flex-end !important;
}
.flex-1 {
  flex: 1 1 0% !important;
}

.gap-1 {
  gap: 0.25rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: 1rem !important;
}

.gap-4 {
  gap: 1.5rem !important;
}

.gap-6 {
  gap: 3rem !important;
}
.p-0 {
  padding: 0rem !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.p-5 {
  padding: 2rem !important;
}

.p-6 {
  padding: 3rem !important;
}

.pt-0 {
  padding-top: 0rem !important;
}

.pt-3 {
  padding-top: 1rem !important;
}

.pt-4 {
  padding-top: 1.5rem !important;
}

.pr-0 {
  padding-right: 0rem !important;
}

.pr-3 {
  padding-right: 1rem !important;
}

.pr-4 {
  padding-right: 1.5rem !important;
}

.pl-0 {
  padding-left: 0rem !important;
}

.pl-2 {
  padding-left: 0.5rem !important;
}

.pl-3 {
  padding-left: 1rem !important;
}

.pl-8 {
  padding-left: 5rem !important;
}

.pb-0 {
  padding-bottom: 0rem !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.pb-5 {
  padding-bottom: 2rem !important;
}

.px-0 {
  padding-left: 0rem !important;
  padding-right: 0rem !important;
}

.px-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.px-3 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.px-4 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.px-8 {
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}

.py-0 {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.m-0 {
  margin: 0rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-0 {
  margin-top: 0rem !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 2rem !important;
}

.mt-6 {
  margin-top: 3rem !important;
}

.mt-8 {
  margin-top: 5rem !important;
}

.mt-auto {
  margin-top: auto !important;
}

.mr-1 {
  margin-right: 0.25rem !important;
}

.mr-2 {
  margin-right: 0.5rem !important;
}

.mr-3 {
  margin-right: 1rem !important;
}

.mr-4 {
  margin-right: 1.5rem !important;
}

.mr-5 {
  margin-right: 2rem !important;
}

.mr-8 {
  margin-right: 5rem !important;
}

.ml-1 {
  margin-left: 0.25rem !important;
}

.ml-2 {
  margin-left: 0.5rem !important;
}

.ml-3 {
  margin-left: 1rem !important;
}

.ml-4 {
  margin-left: 1.5rem !important;
}

.ml-5 {
  margin-left: 2rem !important;
}

.ml-auto {
  margin-left: auto !important;
}

.mb-0 {
  margin-bottom: 0rem !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 2rem !important;
}

.mb-7 {
  margin-bottom: 4rem !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.mx-3 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.my-0 {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}
@media screen and (min-width: 992px) {
  .lg\:mb-1 {
    margin-bottom: 0.25rem !important;
  }
}

.shadow-1 {
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05), 0px 1px 4px rgba(0, 0, 0, 0.08) !important;
}

.shadow-2 {
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.03), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 2px 6px rgba(0, 0, 0, 0.12) !important;
}

.shadow-3 {
  box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.08), 0px 3px 4px rgba(0, 0, 0, 0.1), 0px 1px 4px -1px rgba(0, 0, 0, 0.1) !important;
}

.border-1 {
  border-width: 1px !important;
  border-style: solid;
}

.border-2 {
  border-width: 2px !important;
  border-style: solid;
}

.border-top-1 {
  border-top-width: 1px !important;
  border-top-style: solid;
}

.border-bottom-1 {
  border-bottom-width: 1px !important;
  border-bottom-style: solid;
}
.border-solid {
  border-style: solid !important;
}

.border-dashed {
  border-style: dashed !important;
}

.border-round {
  border-radius: var(--p-content-border-radius) !important;
}

.border-round-lg {
  border-radius: 0.5rem !important;
}

.border-round-xl {
  border-radius: 0.75rem !important;
}

.border-circle {
  border-radius: 50% !important;
}

.border-round-top-xl {
  border-top-left-radius: 0.75rem !important;
  border-top-right-radius: 0.75rem !important;
}

.border-round-bottom-xl {
  border-bottom-left-radius: 0.75rem !important;
  border-bottom-right-radius: 0.75rem !important;
}
.w-full {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.w-1 {
  width: 8.3333% !important;
}

.w-2 {
  width: 16.6667% !important;
}

.w-3 {
  width: 25% !important;
}

.w-4 {
  width: 33.3333% !important;
}

.w-5 {
  width: 41.6667% !important;
}

.w-10 {
  width: 83.3333% !important;
}

.w-3rem {
  width: 3rem !important;
}

.w-4rem {
  width: 4rem !important;
}

.w-5rem {
  width: 5rem !important;
}

.w-6rem {
  width: 6rem !important;
}

.w-7rem {
  width: 7rem !important;
}

.w-8rem {
  width: 8rem !important;
}

.w-9rem {
  width: 9rem !important;
}

.w-10rem {
  width: 10rem !important;
}

.w-13rem {
  width: 13rem !important;
}

.w-14rem {
  width: 14rem !important;
}

.w-15rem {
  width: 15rem !important;
}

.w-17rem {
  width: 17rem !important;
}

.w-19rem {
  width: 19rem !important;
}

.w-20rem {
  width: 20rem !important;
}

.w-30rem {
  width: 30rem !important;
}

.h-4rem {
  height: 4rem !important;
}
.static {
  position: static !important;
}

.fixed {
  position: fixed !important;
}

.absolute {
  position: absolute !important;
}

.relative {
  position: relative !important;
}

.sticky {
  position: sticky !important;
}

.top-0 {
  top: 0px !important;
}

.right-0 {
  right: 0px !important;
}

.overflow-x-hidden {
  overflow-x: hidden !important;
}

.z-1 {
  z-index: 1 !important;
}

.appearance-none {
  appearance: none !important;
}

.outline-none {
  outline: none !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.reset {
  all: unset;
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@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);
  }
}
@keyframes slidedown {
  0% {
    max-height: 0;
  }
  100% {
    max-height: auto;
  }
}
@keyframes slideup {
  0% {
    max-height: 1000px;
  }
  100% {
    max-height: 0;
  }
}
@keyframes fadeinleft {
  0% {
    opacity: 0;
    transform: translateX(-100%);
    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: translateX(0%);
  }
}
@keyframes fadeoutleft {
  0% {
    opacity: 1;
    transform: translateX(0%);
    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}
@keyframes fadeinright {
  0% {
    opacity: 0;
    transform: translateX(100%);
    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: translateX(0%);
  }
}
@keyframes fadeoutright {
  0% {
    opacity: 1;
    transform: translateX(0%);
    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}
@keyframes fadeinup {
  0% {
    opacity: 0;
    transform: translateY(-100%);
    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: translateY(0%);
  }
}
@keyframes fadeoutup {
  0% {
    opacity: 1;
    transform: translateY(0%);
    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}
@keyframes fadeindown {
  0% {
    opacity: 0;
    transform: translateY(100%);
    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: translateY(0%);
  }
}
@keyframes fadeoutdown {
  0% {
    opacity: 1;
    transform: translateY(0%);
    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}
@keyframes animate-width {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes flip {
  from {
    transform: perspective(2000px) rotateX(-100deg);
  }
  to {
    transform: perspective(2000px) rotateX(0);
  }
}
@keyframes flipleft {
  from {
    transform: perspective(2000px) rotateY(-100deg);
    opacity: 0;
  }
  to {
    transform: perspective(2000px) rotateY(0);
    opacity: 1;
  }
}
@keyframes flipright {
  from {
    transform: perspective(2000px) rotateY(100deg);
    opacity: 0;
  }
  to {
    transform: perspective(2000px) rotateY(0);
    opacity: 1;
  }
}
@keyframes flipup {
  from {
    transform: perspective(2000px) rotateX(-100deg);
    opacity: 0;
  }
  to {
    transform: perspective(2000px) rotateX(0);
    opacity: 1;
  }
}
@keyframes zoomin {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomindown {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
  }
}
@keyframes zoominleft {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
  }
}
@keyframes zoominright {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
  }
}
@keyframes zoominup {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
  }
}


/*!************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./src/styles/brand-overrides.css ***!
  \************************************************************************************************************************************************************************************************************************/
/* =============================================================
   Stimes brand overrides for the PrimeNG 21 theme layer. Buttons, icons, focus
   rings, links, table highlights, etc. match the new shell on
   every content page.

   Loaded through styles.scss after the PrimeNG theme tokens so these rules
   override PrimeNG defaults without editing vendor CSS.
   Uses the `--brand-*` tokens declared in styles/_tokens.scss.
   ============================================================= */

/* ── Primary token + utilities ───────────────────────────────────
   Buttons / CTAs adopt the vivid `--brand-600` purple shown when a
   menu rail item is hovered / active — same color, different role. */
:root {
    --bs-primary: var(--brand-600);
    --bs-primary-rgb: 168, 85, 247;
    --bs-link-color: var(--brand-700);
    --bs-link-hover-color: var(--brand-800);
    /* PrimeNG primary palette (modern unstyled API) */
    --primary-color: var(--brand-600);
    --primary-color-text: #ffffff;
    --primary-50:  var(--brand-50);
    --primary-100: var(--brand-100);
    --primary-200: var(--brand-200);
    --primary-400: var(--brand-400);
    --primary-500: var(--brand-600);
    --primary-600: var(--brand-700);
    --primary-700: var(--brand-700);
    --primary-800: var(--brand-800);
    --highlight-bg: var(--brand-50);
    --highlight-text-color: var(--brand-700);
    --focus-ring-color: var(--brand-200);
    --p-primary-color: var(--brand-600);
    --p-primary-color-text: #ffffff;
}

/* ── Anchors / links ─────────────────────────────────────────────
   Scope this override to CONTENT pages only — don't touch the
   sidebar / popovers / topbar (the new shell components style their
   own anchors and we must not override their menu-hover semantics). */
html body a.app-link,
html body a.text-link,
html body p-fileupload a {
    color: var(--brand-700);
}
html body a.app-link:hover,
html body a.text-link:hover {
    color: var(--brand-800);
}

/* ── Bootstrap btn-primary / btn-info ────────────────────────── */
.btn-primary,
body .btn-primary,
body .btn-primary,
.bg-primary {
    background-color: var(--brand-600) !important;
    border-color: var(--brand-600) !important;
    color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
body .btn-primary:hover,
body .btn-primary:focus {
    background-color: var(--brand-700) !important;
    border-color: var(--brand-700) !important;
    color: #ffffff !important;
}
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--brand-700) !important;
    border-color: var(--brand-800) !important;
}
.btn-outline-primary,
body .btn-outline-primary {
    color: var(--brand-600) !important;
    border-color: var(--brand-600) !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
body .btn-outline-primary:hover {
    background-color: var(--brand-600) !important;
    color: #ffffff !important;
}
.text-primary {
    color: var(--brand-600) !important;
}
.border-primary {
    border-color: var(--brand-600) !important;
}

/* ── PrimeNG selected/highlight state ────────────────────────── */
body .p-highlight,
body .p-highlight,
body .p-component .p-highlight,
body .p-component .p-highlight {
    background-color: var(--brand-50) !important;
    color: var(--brand-700) !important;
    border-color: var(--brand-200) !important;
}
.p-highlight {
    background-color: var(--brand-50) !important;
    color: var(--brand-700) !important;
}
body .p-button.app-state-default,
body .p-button.p-button-text,
body .p-button-primary {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
    color: #ffffff;
}
body .p-button.app-state-default:hover,
body .p-button.app-state-default:focus,
body .p-button-primary:hover {
    background-color: var(--brand-700);
    border-color: var(--brand-700);
    color: #ffffff;
}
body a.app-link,
body .app-link {
    color: var(--brand-700);
}
body .p-tabs .p-tablist-tab-list li.p-highlight a,
body .p-tabs .p-tablist-tab-list li.p-tab-active a {
    color: var(--brand-700);
}
body .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
    background-color: var(--brand-600) !important;
    color: #ffffff !important;
    border-color: var(--brand-600) !important;
}

/* ── PrimeNG modern (.p-) components ─────────────────────────── */
.p-button,
.p-button.p-component,
.p-button:not(.p-button-text):not(.p-button-outlined):not(.p-button-secondary):not(.p-button-success):not(.p-button-info):not(.p-button-warning):not(.p-button-danger):not(.p-button-help) {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #ffffff;
}
.p-button:enabled:hover,
.p-button:not(:disabled):hover {
    background: var(--brand-700);
    border-color: var(--brand-700);
    color: #ffffff;
}
.p-button:enabled:focus,
.p-button:not(:disabled):focus,
.p-button:focus-visible {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--brand-200), 0 1px 2px rgba(31, 14, 61, 0.05);
    outline: 0;
}
.p-button.p-button-text {
    color: var(--brand-700);
    background: transparent;
    border-color: transparent;
}
.p-button.p-button-text:enabled:hover {
    background: var(--brand-50);
    color: var(--brand-700);
}
.p-button.p-button-outlined {
    color: var(--brand-600);
    border-color: var(--brand-600);
    background: transparent;
}
.p-button.p-button-outlined:enabled:hover {
    background: var(--brand-50);
    color: var(--brand-700);
}

/* ── Form controls ───────────────────────────────────────────── */
.p-inputtext:enabled:focus,
.p-inputnumber-input:enabled:focus,
.p-select:not(.p-disabled).p-focus,
.p-multiselect:not(.p-disabled).p-focus,
.p-treeselect:not(.p-disabled).p-focus,
.p-autocomplete:not(.p-disabled).p-focus,
.p-datepicker.p-focus > .p-inputtext,
.p-password.p-focus > .p-inputtext,
.p-select:not(.p-disabled).p-focus,
.p-select-focus {
    border-color: var(--brand-600) !important;
    box-shadow: 0 0 0 0.2rem var(--brand-100) !important;
}

/* ── Checkbox / radio / switch — selected state ────────────────
   PrimeNG v19 puts `.p-checkbox-checked` / `.p-radiobutton-checked`
   on the root (the host's rendered element), NOT `.p-highlight` on
   the inner box. We list both selectors so the rule survives older
   theme bundles too. !important guards against later unselected
   rules that share the same property surface. */
.p-checkbox.p-checkbox-checked .p-checkbox-box,
.p-checkbox-checked .p-checkbox-box,
.p-checkbox .p-checkbox-box.p-highlight,
.p-checkbox.p-highlight .p-checkbox-box,
body .p-checkbox.p-checkbox-checked .p-checkbox-box,
body .p-checkbox .p-checkbox-box.p-highlight {
    background: var(--brand-600) !important;
    border-color: var(--brand-600) !important;
}
/* Inner check icon (svg / .pi-check) stays white on brand fill */
.p-checkbox.p-checkbox-checked .p-checkbox-box .p-checkbox-icon,
.p-checkbox-checked .p-checkbox-box .p-checkbox-icon,
.p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon,
.p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon,
.p-checkbox.p-checkbox-checked .p-checkbox-box .pi,
.p-checkbox.p-checkbox-checked .p-checkbox-box svg,
.p-checkbox .p-checkbox-box.p-highlight .pi,
.p-checkbox .p-checkbox-box.p-highlight svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}
.p-checkbox.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box,
.p-checkbox:not(.p-disabled):not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover,
.p-checkbox.p-highlight .p-checkbox-box:hover {
    background: var(--brand-700) !important;
    border-color: var(--brand-700) !important;
}

.p-radiobutton.p-radiobutton-checked .p-radiobutton-box,
.p-radiobutton-checked .p-radiobutton-box,
.p-radiobutton .p-radiobutton-box.p-highlight,
.p-radiobutton.p-highlight .p-radiobutton-box,
body .p-radiobutton.p-radiobutton-checked .p-radiobutton-box,
body .p-radiobutton .p-radiobutton-box.p-highlight {
    background: #ffffff !important;
    border-color: var(--brand-600) !important;
}
/* The dot — v19 keeps it transparent until checked, then shows brand */
.p-radiobutton.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon,
.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon,
.p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon,
.p-radiobutton.p-highlight .p-radiobutton-icon {
    background: var(--brand-600) !important;
    background-color: var(--brand-600) !important;
}
.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider,
.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
    background: var(--brand-600);
}
.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider:before,
.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider:before {
    background: #ffffff;
}

/* ── Checkbox / radio — alignment with sibling label ───────────
   PrimeNG v19 defaults both `.p-checkbox` and `.p-radiobutton`
   to `vertical-align: bottom`, which sinks the box below the
   midline of the label text. Vertical-align tweaks alone aren't
   enough — when the host + label sit inside a generic wrapper
   like `<span class="d-inline-block">…</span>` the inline-flow
   alignment falls back to text baseline and the label appears
   below the radio's centerline.

   Robust fix: any wrapper that *contains* a checkbox/radio host
   becomes a flex centring container itself via `:has()`. That
   way the wrapper's `align-items: center` lines up the box and
   its label regardless of how the template assembled them, and
   we don't have to enumerate every wrapper class in the codebase
   (.field-checkbox, .p-field-checkbox, .d-inline-block, custom
   per-screen classes, etc.).

   `:has()` is supported in Chrome/Edge 105+, Safari 15.4+,
   Firefox 121+ — the browsers Stimes ships against. */
p-radiobutton,
p-radioButton,
.p-radiobutton {
    vertical-align: middle;
}
p-checkbox,
p-Checkbox,
.p-checkbox {
    vertical-align: middle;
}

/* Wrap-style centring — any inline/flex parent that holds a
   checkbox or radio host (with or without a sibling label)
   becomes an inline-flex centring container. */
.shell .main span:has(> p-checkbox, > p-Checkbox, > p-radiobutton, > p-radioButton, > p-radio-button),
.shell .main label:has(> p-checkbox, > p-Checkbox, > p-radiobutton, > p-radioButton, > p-radio-button),
.shell .main div:has(> p-checkbox + label, > p-Checkbox + label, > p-radiobutton + label, > p-radioButton + label, > p-radio-button + label),
.shell .main .d-inline-block:has(p-checkbox, p-Checkbox, p-radiobutton, p-radioButton, p-radio-button),
.shell .main .field-checkbox,
.shell .main .p-field-checkbox,
.shell .main .field-radiobutton,
.shell .main .p-field-radiobutton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
    line-height: 1.2;
}

/* Adjacent-sibling label — keep the inline-flex / vertical-align
   tweaks for cases where `:has()` isn't applicable (e.g. the
   parent is a flex row with align-items already set to its own
   value, or the wrapper is a fragment we shouldn't restyle). */
p-checkbox + label,
p-Checkbox + label,
.p-checkbox + label,
p-radiobutton + label,
p-radioButton + label,
p-radio-button + label,
.p-radiobutton + label,
.field-checkbox > label,
.p-field-checkbox > label,
.field-radiobutton > label,
.p-field-radiobutton > label {
    display: inline-flex;
    align-items: center;
    margin: 0 0 0 6px;
    line-height: 1.2;
    vertical-align: middle;
    cursor: pointer;
}

/* ── Dropdowns / multiselect — highlighted item ──────────────── */
.p-select-panel .p-select-items .p-select-item.p-highlight,
.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight,
.p-select-list .p-select-option.p-select-option-selected,
.p-select-overlay .p-select-list .p-select-option.p-select-option-selected,
.p-listbox .p-listbox-list .p-listbox-item.p-highlight {
    background: var(--brand-50);
    color: var(--brand-700);
}

/* ── Tabs ────────────────────────────────────────────────────── */
.p-tabs .p-tabs-nav .p-tabs-tab.p-tabs-tab-active,
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
    color: var(--brand-700);
    border-color: var(--brand-700);
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link:focus {
    box-shadow: inset 0 0 0 0.15rem var(--brand-200);
}

/* Tab panel breathing room for PrimeNG 21 tabs. */
.shell .main .p-tabs .p-tabpanels,
.shell .main .p-tabpanels,
.shell .main p-tabpanels {
    padding-top: 12px;
}
.shell .main .p-tabpanel,
.shell .main p-tabpanel {
    padding-top: 0;
}
/* If a tab panel's first child sets its own top margin, neutralise
   it so the 12px gap above is the only gap visible. */
.shell .main .p-tabpanel > *:first-child,
.shell .main p-tabpanel > *:first-child {
    margin-top: 0;
}

/* ── Date picker ─────────────────────────────────────────────── */
.p-datepicker table td > span.p-highlight,
.p-datepicker table td.p-datepicker-today > span.p-highlight {
    background: var(--brand-600);
    color: #ffffff;
}
.p-datepicker table td > span:not(.p-disabled):not(.p-highlight):hover {
    background: var(--brand-50);
    color: var(--brand-700);
}
.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover,
.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover {
    color: var(--brand-700);
}

/* ── Tables — selected row, sorted column ────────────────────── */
.p-datatable .p-datatable-tbody > tr.p-highlight,
.p-datatable .p-datatable-tbody > tr[aria-selected="true"] {
    background: var(--brand-50);
    color: var(--brand-700);
}
.p-datatable .p-sortable-column.p-highlight,
.p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
    color: var(--brand-700);
}
.p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
    background: var(--brand-600);
    color: #ffffff;
    border-color: var(--brand-600);
}

/* ── Progress, sliders, badges ───────────────────────────────── */
.p-progressbar .p-progressbar-value {
    background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
}
.p-slider .p-slider-range,
.p-slider-range {
    background: var(--brand-600);
}
.p-slider .p-slider-handle {
    border-color: var(--brand-600);
    background: #ffffff;
}
.p-badge.p-badge-info,
.p-badge.p-badge-primary {
    background: var(--brand-600);
    color: #ffffff;
}
.p-tag.p-tag-info,
.p-tag.p-tag-primary {
    background: var(--brand-100);
    color: var(--brand-700);
}

/* ── Accordion / panel headers ───────────────────────────────── */
.p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link,
.p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
    background: var(--brand-50);
    color: var(--brand-700);
    border-color: var(--brand-200);
}

/* ── Steps / breadcrumb / chips ──────────────────────────────── */
.p-steps .p-steps-item.p-highlight .p-steps-number,
.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
    background: var(--brand-600);
    color: #ffffff;
}
.p-steps .p-steps-item.p-highlight .p-steps-title,
.p-stepper .p-stepper-header.p-highlight .p-stepper-title {
    color: var(--brand-700);
    font-weight: 600;
}
.p-chip.p-chip-primary {
    background: var(--brand-100);
    color: var(--brand-700);
}

/* ── Generic icon-button / clickMe focus ring ────────────────── */
.clickMe a:focus-visible,
button:focus-visible,
.p-button:focus-visible {
    outline-color: var(--brand-600) !important;
}

/* ── Highlight color literals that leak through styles.css ───── */
.raw-timesheet,
body .raw-timesheet {
    background-color: var(--brand-600) !important;
}

/* ── Custom `.primary-btn` and similar in legacy templates ───── */
/* `<p-button class="primary-btn">` renders its visible `<button>` as a child;
   target both the wrapper and any descendant `.p-button` so the inner button
   actually picks up the brand color. */
.primary-btn,
button.primary-btn,
.primary-btn .p-button,
.primary-btn button.p-button,
.primary-btn .p-button-text {
    background-color: var(--brand-600) !important;
    background: var(--brand-600) !important;
    border-color: var(--brand-600) !important;
    color: #ffffff !important;
}
.primary-btn:hover,
button.primary-btn:hover,
.primary-btn .p-button:enabled:hover,
.primary-btn button.p-button:enabled:hover {
    background-color: var(--brand-700) !important;
    background: var(--brand-700) !important;
    border-color: var(--brand-700) !important;
}
.primary-btn .p-button:enabled:focus,
.primary-btn .p-button:focus-visible {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--brand-200), 0 1px 2px rgba(31, 14, 61, 0.05) !important;
}

/* ── Theme-aware: dark-mode flip uses brand-500 (lighter) for
     buttons/links so contrast stays readable on a dark canvas.
     The new shell sets `data-theme="dark"` on `<html>`.        ── */
html[data-theme="dark"] {
    --bs-primary: var(--brand-600);
    --bs-link-color: var(--brand-400);
    --bs-link-hover-color: var(--brand-600);
    --primary-color: var(--brand-600);
    --p-primary-color: var(--brand-600);
    --highlight-bg: rgba(168, 85, 247, 0.18);
    --highlight-text-color: var(--brand-100);
}
html[data-theme="dark"] body a:not(.btn):not(.p-button):not(.lp-btn) {
    color: var(--brand-400);
}
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] body .btn-primary {
    background-color: var(--brand-600) !important;
    border-color: var(--brand-600) !important;
}
html[data-theme="dark"] .btn-primary:hover {
    background-color: var(--brand-700) !important;
    border-color: var(--brand-700) !important;
}

/* ============================================================
   Content-page hardening — neutralize legacy chrome that breaks
   under the new shell. The shell takes care of margins/padding
   around the content area; these rules patch component-level
   chrome that the legacy theme baked in (cyan accents, fixed
   topbar offsets, oversized card paddings, etc.).
   ============================================================ */

/* Sticky page-header was offset 60px (legacy topbar height). New
   topbar is 56px; align so sticky cards / toolbars sit flush. */
.header-sticky,
body .header-sticky {
    top: 56px !important;
    background: var(--surface, #fff);
    z-index: 5;
}

/* Bootstrap card — soften legacy hard-edge look so it sits
   well on the new brand-bg page surface. */
.card,
body .card {
    border: 1px solid var(--border, #e7e2ee);
    border-radius: var(--r-3, 10px);
    box-shadow: var(--sh-1, 0 1px 2px rgba(31, 14, 61, 0.06));
    background: var(--surface, #fff);
}
.card-header,
body .card-header {
    background: var(--surface, #fff);
    border-bottom: 1px solid var(--divider, #efebf5);
    padding: 12px 16px;
    color: var(--text, #1f0e3d);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #1f0e3d);
}
.card-body,
body .card-body {
    padding: 14px 16px;
}

/* PrimeNG TabView — switch active accent + remove old cyan
   underline; keep the underline but make it brand. */
body .p-tabs .p-tablist-tab-list,
body .p-tabs .p-tab {
    border-color: var(--divider, #efebf5);
}
body .p-tabs .p-tablist-tab-list li,
body .p-tabs .p-tablist-tab-list li a {
    color: var(--text-secondary, #4b5563);
}
body .p-tabs .p-tablist-tab-list li.p-highlight,
body .p-tabs .p-tablist-tab-list li.p-tab-active,
body .p-tabs .p-tablist-tab-list li.p-highlight a,
body .p-tabs .p-tablist-tab-list li.p-tab-active a {
    background: transparent !important;
    color: var(--brand-700) !important;
    border-bottom: 2px solid var(--brand-600) !important;
    font-weight: 600;
}
body .p-tabs .p-tablist-tab-list li:not(.p-highlight):not(.p-disabled):hover {
    background: var(--brand-50) !important;
    color: var(--brand-700) !important;
}

/* Modern p-tabs / p-tabmenu */
.p-tabs .p-tabs-nav,
.p-tabmenu .p-tabmenu-nav {
    border-bottom-color: var(--divider, #efebf5);
}
.p-tabs .p-tabs-tab,
.p-tabmenu .p-menuitem-link {
    color: var(--text-secondary, #4b5563);
}
.p-tabs .p-tabs-tab:not(.p-tabs-tab-active):hover {
    background: var(--brand-50, #f5f0fb);
    color: var(--brand-700, #4c1d95);
}

/* Panel headers — same accent shift */
body .p-panel .p-panel-header,
body .p-panel-header {
    background: var(--surface, #fff);
    border: 1px solid var(--divider, #efebf5);
    border-bottom: 0;
    color: var(--text, #1f0e3d);
    padding: 10px 14px;
    font-weight: 600;
}
body .p-panel .p-panel-content,
body .p-panel-content {
    border: 1px solid var(--divider, #efebf5);
    padding: 12px 14px;
}

/* Table headers — neutralize legacy cyan */
body .p-datatable .p-datatable-thead > tr > th,
body .p-datatable thead th,
body .p-datatable-scrollable-header th,
body table.p-datatable thead th {
    background: var(--surface-alt, #faf8fc);
    color: var(--text, #1f0e3d);
    border-color: var(--divider, #efebf5);
    font-weight: 600;
    padding: 8px 10px;
}
body .p-datatable .p-sortable-column.p-highlight,
body .p-datatable .p-sortable-column.p-highlight a {
    color: var(--brand-700, #4c1d95) !important;
    background: var(--surface-alt, #faf8fc) !important;
}

/* Modern p-table — same treatment */
.p-datatable .p-datatable-thead > tr > th {
    background: var(--surface-alt, #faf8fc);
    color: var(--text, #1f0e3d);
    border-color: var(--divider, #efebf5);
    font-weight: 600;
}
.p-datatable .p-datatable-tbody > tr > td {
    border-color: var(--divider, #efebf5);
}
.p-datatable .p-datatable-tbody > tr:hover {
    background: var(--brand-50, #f5f0fb);
}

/* Form fields — fold the legacy input look into brand colors */
body .p-inputtext,
body .p-inputtext,
body input.form-control,
body select.form-control,
body textarea.form-control {
    border: 1px solid var(--border, #e7e2ee);
    border-radius: var(--r-2, 6px);
    color: var(--text, #1f0e3d);
}
body .p-inputtext:focus,
body .p-inputtext:focus,
body input.form-control:focus,
body select.form-control:focus,
body textarea.form-control:focus {
    border-color: var(--brand-400, #8b5cf6);
    box-shadow: 0 0 0 3px var(--brand-100, #ebddf7);
    outline: 0;
}

/* Bootstrap form-group label tightening */
.form-group label,
body .form-group label {
    margin-bottom: 4px;
    font-weight: 500;
    color: var(--text-secondary, #4b5563);
    font-size: 12.5px;
}

/* Legacy fieldset legends used cyan; switch to brand */
body .p-fieldset .p-fieldset-legend,
body .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover,
body .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:focus {
    background-color: var(--brand-50, #f5f0fb) !important;
    border-color: var(--brand-200, #d2b5f0) !important;
    color: var(--brand-700, #4c1d95) !important;
    outline-color: var(--brand-200, #d2b5f0) !important;
}
body .p-fieldset .p-fieldset-legend .p-fieldset-legend-text,
body .p-fieldset .p-fieldset-legend .p-fieldset-toggle-button {
    color: var(--brand-700, #4c1d95) !important;
}

/* Modals / dialogs — header / footer chrome */
body .p-dialog .p-dialog-header,
body .p-dialog-header {
    background: var(--surface-alt, #faf8fc);
    border-bottom: 1px solid var(--divider, #efebf5);
    color: var(--text, #1f0e3d);
    padding: 12px 16px;
}
body .p-dialog .p-dialog-content,
body .p-dialog-content {
    padding: 14px 16px;
}
body .p-dialog .p-dialog-footer,
body .p-dialog-footer {
    border-top: 1px solid var(--divider, #efebf5);
    padding: 10px 16px;
    background: var(--surface-alt, #faf8fc);
}

/* PrimeNG modern p-dialog */
.p-dialog .p-dialog-header {
    background: var(--surface-alt, #faf8fc);
    border-bottom: 1px solid var(--divider, #efebf5);
    color: var(--text, #1f0e3d);
}
.p-dialog .p-dialog-footer {
    border-top: 1px solid var(--divider, #efebf5);
    background: var(--surface-alt, #faf8fc);
}

/* Tooltip readability */
body .p-tooltip .p-tooltip-text,
.p-tooltip .p-tooltip-text {
    background: var(--text, #1f0e3d);
    color: #fff;
}

/* Quick-view / side-panel cards used by HR / Sales / Payroll detail
   pages. These were mostly OK but needed the brand background. */
.quick-view-card,
.detail-pane,
body .quick-view-card,
body .detail-pane {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e7e2ee);
    border-radius: var(--r-3, 10px);
    padding: 14px 16px;
}

/* Anti-overflow — inner content area kept getting clipped because
   the legacy global body overflow was hidden. Let the scroll happen
   inside the new shell's main grid cell. */
.shell .main {
    overflow: auto;
}

/* Section toolbars (search bar + Add button) used to use raw flex
   without spacing. Pad them so they breathe inside cards. */
.toolbar-row,
.search-toolbar,
body .toolbar-row,
body .search-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface-alt, #faf8fc);
    border-bottom: 1px solid var(--divider, #efebf5);
}

/* ============================================================
   Unstyled input states — PrimeNG radio/checkbox unselected
   borders default to neutral-blue. Brand-tint them so they match
   the rest of the form chrome.
   ============================================================ */

/* Radio buttons — unselected border + hover. Scoped to :not(.p-highlight)
   so the brand-600 border on the checked state isn't wiped. */
.p-radiobutton .p-radiobutton-box:not(.p-highlight),
body .p-radiobutton .p-radiobutton-box:not(.p-highlight) {
    border-color: var(--border, #e7e2ee);
    background: var(--surface, #ffffff);
    transition: border-color var(--d-fast, 120ms), box-shadow var(--d-fast, 120ms);
}
.p-radiobutton:not(.p-disabled) .p-radiobutton-box:not(.p-highlight):hover,
body .p-radiobutton:not(.p-disabled) .p-radiobutton-box:not(.p-highlight):hover {
    border-color: var(--brand-400, #8b5cf6);
}
.p-radiobutton .p-radiobutton-box:not(.p-highlight).p-focus,
.p-radiobutton:not(.p-disabled) .p-radiobutton-box:not(.p-highlight):focus,
body .p-radiobutton .p-radiobutton-box:not(.p-highlight).p-focus {
    border-color: var(--brand-500, #a855f7);
    box-shadow: 0 0 0 3px var(--brand-100, #ebddf7);
    outline: 0;
}

/* Checkboxes — unselected border + hover. Scope to :not(.p-highlight)
   so this rule never wipes the checked state's brand-600 background. */
.p-checkbox .p-checkbox-box:not(.p-highlight),
body .p-checkbox .p-checkbox-box:not(.p-highlight) {
    border-color: var(--border, #e7e2ee);
    background: var(--surface, #ffffff);
    transition: border-color var(--d-fast, 120ms), box-shadow var(--d-fast, 120ms);
}
.p-checkbox:not(.p-disabled) .p-checkbox-box:not(.p-highlight):hover,
body .p-checkbox:not(.p-disabled) .p-checkbox-box:not(.p-highlight):hover {
    border-color: var(--brand-400, #8b5cf6);
}
.p-checkbox .p-checkbox-box:not(.p-highlight).p-focus,
.p-checkbox:not(.p-disabled) .p-checkbox-box:not(.p-highlight):focus,
body .p-checkbox .p-checkbox-box:not(.p-highlight).p-focus {
    border-color: var(--brand-500, #a855f7);
    box-shadow: 0 0 0 3px var(--brand-100, #ebddf7);
    outline: 0;
}

/* Legacy (.ui-) radio + checkbox — same treatment */
body .p-radiobutton .p-radiobutton-box,
body .p-checkbox .p-checkbox-box {
    border-color: var(--border, #e7e2ee);
    background: var(--surface, #ffffff);
}
body .p-radiobutton .p-radiobutton-box:not(.p-highlight):hover,
body .p-checkbox .p-checkbox-box:not(.p-highlight):hover {
    border-color: var(--brand-400, #8b5cf6);
}
body .p-radiobutton .p-radiobutton-box.p-highlight,
body .p-checkbox .p-checkbox-box.p-highlight {
    background: var(--brand-600, #6d28d9) !important;
    border-color: var(--brand-600, #6d28d9) !important;
    color: #fff !important;
}

/* Counter badges (e.g. "Total no. of Candidates: 0") */
.brand-counter,
.count-badge,
body .brand-counter {
    background: var(--brand-50, #f5f0fb);
    color: var(--brand-700, #4c1d95);
    border: 1px solid var(--brand-200, #d2b5f0);
    padding: 4px 10px;
    border-radius: var(--r-pill, 9999px);
    font-size: 12px;
    font-weight: 600;
}

/* Sortable column header arrows — make them brand on active */
.p-datatable .p-sortable-column-icon,
body .p-sortable-column-icon {
    color: var(--text-muted, #6b7280);
}
.p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon,
body .p-sortable-column.p-highlight .p-sortable-column-icon {
    color: var(--brand-700, #4c1d95) !important;
}

/* MultiSelect "x items selected" pill */
.p-multiselect .p-multiselect-label,
body .p-multiselect .p-multiselect-label {
    color: var(--text, #1f0e3d);
}
.p-multiselect:not(.p-disabled).p-focus,
body .p-multiselect.p-focus {
    border-color: var(--brand-500, #a855f7) !important;
    box-shadow: 0 0 0 3px var(--brand-100, #ebddf7) !important;
}

/* ============================================================
   Form validation states + secondary buttons + toasts/messages
   Final pattern layer surfaced from the tabs/dialog/forms walk.
   ============================================================ */

/* Required asterisk on field labels — universal red, not brand */
.form-group label .text-danger,
.form-group label .required,
label .required-marker,
label > .text-danger {
    color: var(--error, #b91c1c);
    margin-left: 2px;
    font-weight: 600;
}

/* Angular reactive forms invalid-and-touched fields — red border */
.ng-invalid.ng-touched.form-control,
input.ng-invalid.ng-touched,
select.ng-invalid.ng-touched,
textarea.ng-invalid.ng-touched,
.ng-invalid.ng-touched .p-inputtext,
.ng-invalid.ng-touched .p-select,
.ng-invalid.ng-touched .p-multiselect,
.ng-invalid.ng-touched > .p-inputtext,
.ng-invalid.ng-dirty.form-control {
    border-color: var(--error, #b91c1c) !important;
}
.ng-invalid.ng-touched.form-control:focus,
input.ng-invalid.ng-touched:focus,
.ng-invalid.ng-touched .p-inputtext:focus {
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.18) !important;
}
.invalid-feedback,
.field-error,
small.p-error {
    color: var(--error, #b91c1c);
    font-size: 11.5px;
    margin-top: 2px;
}

/* PrimeNG p-button-secondary — neutral surface so Cancel /
   Close / Discard can de-emphasize without losing the brand
   focus ring. */
.p-button.p-button-secondary,
body .p-button.p-button-secondary {
    background: var(--surface-alt, #faf8fc) !important;
    border-color: var(--border, #e7e2ee) !important;
    color: var(--text-secondary, #4b5563) !important;
}
.p-button.p-button-secondary:enabled:hover,
body .p-button.p-button-secondary:enabled:hover {
    background: var(--surface, #ffffff) !important;
    border-color: var(--brand-200, #d2b5f0) !important;
    color: var(--brand-700, #4c1d95) !important;
}
.p-button.p-button-danger,
body .p-button.p-button-danger {
    background: var(--error, #b91c1c) !important;
    border-color: var(--error, #b91c1c) !important;
}
.p-button.p-button-danger:enabled:hover {
    background: #991b1b !important;
    border-color: #991b1b !important;
}
.p-button.p-button-success {
    background: var(--success, #15803d) !important;
    border-color: var(--success, #15803d) !important;
}
.p-button.p-button-success:enabled:hover {
    background: #166534 !important;
    border-color: #166534 !important;
}
.p-button.p-button-warning {
    background: var(--warning, #b45309) !important;
    border-color: var(--warning, #b45309) !important;
}

/* PrimeNG Toast — brand message colors */
.p-toast-message-success .p-toast-message-content,
body .p-toast-message.p-toast-message-success {
    background: #ecfdf5;
    border-left: 4px solid var(--success, #15803d);
    color: #064e3b;
}
.p-toast-message-info .p-toast-message-content,
body .p-toast-message.p-toast-message-info {
    background: var(--brand-50, #f5f0fb);
    border-left: 4px solid var(--brand-600, #6d28d9);
    color: var(--brand-800, #1f0e3d);
}
.p-toast-message-warn .p-toast-message-content,
body .p-toast-message.p-toast-message-warn {
    background: #fff7ed;
    border-left: 4px solid var(--warning, #b45309);
    color: #7c2d12;
}
.p-toast-message-error .p-toast-message-content,
body .p-toast-message.p-toast-message-error {
    background: #fef2f2;
    border-left: 4px solid var(--error, #b91c1c);
    color: #7f1d1d;
}
.p-toast-message-icon,
body .p-toast-icon {
    color: inherit;
}

/* PrimeNG p-message — same color family as toasts */
.p-message.p-message-success {
    background: #ecfdf5;
    border-left: 3px solid var(--success, #15803d);
    color: #064e3b;
}
.p-message.p-message-info {
    background: var(--brand-50, #f5f0fb);
    border-left: 3px solid var(--brand-600, #6d28d9);
    color: var(--brand-800, #1f0e3d);
}
.p-message.p-message-warn {
    background: #fff7ed;
    border-left: 3px solid var(--warning, #b45309);
    color: #7c2d12;
}
.p-message.p-message-error {
    background: #fef2f2;
    border-left: 3px solid var(--error, #b91c1c);
    color: #7f1d1d;
}

/* Confirm dialog accept/reject buttons */
.p-confirm-dialog .p-confirm-dialog-accept,
body .p-confirmdialog .p-confirmdialog-accept-button {
    background: var(--brand-600, #6d28d9) !important;
    border-color: var(--brand-600, #6d28d9) !important;
    color: #ffffff !important;
}
.p-confirm-dialog .p-confirm-dialog-reject,
body .p-confirmdialog .p-confirmdialog-reject-button {
    background: var(--surface-alt, #faf8fc) !important;
    border-color: var(--border, #e7e2ee) !important;
    color: var(--text-secondary, #4b5563) !important;
}

/* Dropdown / multiselect placeholders — make muted */
.p-select .p-select-label.p-placeholder,
.p-multiselect .p-multiselect-label.p-placeholder,
body .p-select-label.p-placeholder,
body .p-multiselect-label.p-placeholder {
    color: var(--text-disabled, #9ca3af);
    font-style: normal;
}

/* Disabled states — neutral background, muted text */
.p-disabled,
.p-component:disabled,
body .p-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================================
   Inline mega-table responsiveness — many CRUD forms (petty-cash,
   payroll-generator, settlement, supplier-quotation) have an
   editable detail table with 10+ columns. When the dialog is
   narrower than the table needs, columns collapse and inputs
   visually overlap. Force the table wrapper to scroll horizontally
   instead, and give input controls a min-width so they stay
   readable.
   ============================================================ */

.p-datatable-wrapper,
body .p-datatable-wrapper,
.p-datatable-scrollable-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.p-datatable .p-datatable-thead > tr > th,
.p-datatable .p-datatable-tbody > tr > td,
body .p-datatable .p-datatable-thead > tr > th,
body .p-datatable .p-datatable-tbody > tr > td {
    min-width: 90px;
}

/* Editable cells (input / dropdown / file upload inside a row) need
   a slightly more generous floor — anything narrower runs into the
   placeholder collisions seen on Petty Cash. */
.p-datatable td .p-inputtext,
.p-datatable td .p-select,
.p-datatable td .p-multiselect,
.p-datatable td input.form-control,
.p-datatable td select.form-control,
body .p-datatable td .p-inputtext,
body .p-datatable td .p-select {
    min-width: 100px;
    width: 100%;
}

/* File-upload widget inside a table cell — keep it compact but
   readable. The "Browse, drag document, or take a photo" copy
   needs ~140px to stay on a single line. */
.p-datatable td .p-fileupload-content,
.p-datatable td p-fileupload,
body .p-datatable td .p-fileupload {
    min-width: 140px;
}

/* Numeric / amount cells that should stay tight (No, Date, Amount) */
.p-datatable td.numeric,
.p-datatable th.numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Sticky first column on really wide tables (timesheet style) */
.timesheet-table th:first-child,
.timesheet-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--surface, #ffffff);
    z-index: 2;
}
.timesheet-table th:first-child {
    background: var(--surface-alt, #faf8fc);
}

/* Dashboard stat tiles — keep the legacy blue/green tone but soften
   the icon background so it sits well on the new bg surface */
.dashboard-stat-tile,
.stat-card,
body .stat-card {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #e7e2ee);
    border-radius: var(--r-3, 10px);
    box-shadow: var(--sh-1, 0 1px 2px rgba(31, 14, 61, 0.06));
    padding: 12px 14px;
}

/* ============================================================
   Structural hygiene — neutralize pre-existing per-page disorder
   that was already there before the shell redesign. These rules
   target the most common Bootstrap + custom-template patterns
   that cause cramped, overflowing or misaligned components.
   ============================================================ */

/* Bootstrap row/col vertical rhythm — most legacy templates use
   `.row` without consistent gutters or row-gap, causing fields
   to butt against each other. Give every form-row a comfortable
   vertical spacing. */
.shell .main .row + .row,
.shell .main .form-row + .form-row {
    margin-top: 8px;
}
.shell .main .row > [class*="col-"] {
    margin-bottom: 10px;
}
.shell .main .row > [class*="col-"]:has(.form-group) {
    margin-bottom: 0; /* form-group already has its own margin */
}

/* Form group spacing — many legacy forms use bare divs without
   .form-group; standardize anyway by adding sane defaults to any
   label-input pair sitting in a column. */
.shell .main .form-group {
    margin-bottom: 12px;
}
.shell .main .form-group:last-child {
    margin-bottom: 0;
}
/* Plain inputs and legacy block elements stack below the label. */
.shell .main label + input,
.shell .main label + select,
.shell .main label + textarea,
.shell .main label + .p-inputtext,
.shell .main label + p-datepicker,
.shell .main label + p-datepicker {
    display: block;
    margin-top: 4px;
}

/* PrimeNG v19 host elements (p-multiselect, p-select, p-select,
   p-autocomplete, p-treeselect) ARE the rendered flex container —
   their children (label-container + dropdown chevron) sit
   horizontally inside an `inline-flex` parent. The previous rule
   forced these hosts to `display: block`, which flipped the
   children to a vertical stack and dropped the chevron onto the
   next line (matches issues #6535/#6536 and the Site/Designation
   regression on Client Timesheet, Client Invoice, and any other
   form using `<p-multiSelect>` adjacent to a `<label>`).

   Apply unconditionally inside `.shell .main` (not gated by an
   adjacent-sibling combinator) so it survives template variants
   where the host isn't the literal next element after the label
   (e.g. an *ngIf-toggled extra label / hint span sits between).
   Using !important guarantees it beats both the runtime-injected
   theme rule `.p-multiselect { display: inline-flex }` and the
   stale `display: block` legacy rules in styles.css.

   We keep `display: flex` (block-level) so each control occupies
   its own row in form columns, while its inner children
   (label-container + chevron dropdown) lay out horizontally. */
.shell .main p-select,
.shell .main p-select,
.shell .main p-multiselect,
.shell .main p-multiSelect,
.shell .main p-autocomplete,
.shell .main p-autoComplete,
.shell .main p-treeselect,
.shell .main p-treeSelect {
    display: flex !important;
    width: 100%;
}
.shell .main label + p-select,
.shell .main label + p-select,
.shell .main label + p-multiselect,
.shell .main label + p-multiSelect,
.shell .main label + p-autocomplete,
.shell .main label + p-autoComplete,
.shell .main label + p-treeselect,
.shell .main label + p-treeSelect,
.shell .main label + .p-select,
.shell .main label + .p-multiselect,
.shell .main label + .p-select,
.shell .main label + .p-autocomplete,
.shell .main label + .p-treeselect {
    margin-top: 4px;
}

/* Card layout — ensure cards inside the main content always have
   a consistent gap from each other and from the page edge. */
.shell .main .card + .card {
    margin-top: 12px;
}
.shell .main > .card,
.shell .main > div > .card {
    margin: 0 0 12px 0;
}

/* Card-header should always be flex-aligned (title on left, action
   buttons on right). Many legacy templates have raw HTML inside
   .card-header without this; force it. */
.shell .main .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.shell .main .card-header > h1,
.shell .main .card-header > h2,
.shell .main .card-header > h3,
.shell .main .card-header > h4,
.shell .main .card-header > h5,
.shell .main .card-header > h6,
.shell .main .card-header > .card-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.shell .main .card-header > .ml-auto,
.shell .main .card-header > .ms-auto,
.shell .main .card-header > button,
.shell .main .card-header > p-button {
    flex: 0 0 auto;
}

/* Toolbar / button group spacing — stop adjacent buttons from
   collapsing into a single rectangle. */
.shell .main .button-group > * + *,
.shell .main .btn-group > * + *,
.shell .main .toolbar > * + *,
.shell .main .toolbar-row > * + * {
    margin-left: 6px;
}
.shell .main .card-header > p-button + p-button,
.shell .main .card-header > button + button,
.shell .main .card-header > .p-button + .p-button {
    margin-left: 8px;
}

/* Overflow safety — any oversized table inside the main area
   should be horizontally scrollable instead of pushing the layout. */
.shell .main .table-responsive,
.shell .main .scroll-x,
.shell .main .data-table-wrapper {
    overflow-x: auto;
}
.shell .main table:not(.no-resize) {
    max-width: 100%;
}

/* Input field consistency — height + line-height parity so
   .form-control, .p-inputtext, .p-select, .p-select, .p-multiselect,
   .p-autocomplete and .p-treeselect all line up when sitting in
   the same row. PrimeNG v19 renamed `p-select` → `p-select`
   (the new `.p-select` class doesn't match the old `.p-select`
   selector), so it must be listed explicitly here — otherwise
   p-select renders shorter than its row siblings and the form
   row looks staggered. */
.shell .main .form-control,
.shell .main .p-inputtext,
.shell .main .p-select,
.shell .main .p-select,
.shell .main .p-multiselect,
.shell .main .p-treeselect,
.shell .main .p-autocomplete,
.shell .main .p-datepicker > .p-inputtext,
.shell .main .p-password > .p-inputtext,
.shell .main p-select .p-select,
.shell .main p-select .p-select,
.shell .main p-datepicker .p-inputtext {
    height: 34px;
    min-height: 34px;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 1.4;
}
.shell .main textarea.form-control,
.shell .main .p-inputtextarea {
    height: auto;
    min-height: 80px;
}

/* Required asterisk consistency — some templates use `*` in plain
   text, others use a span. Color any literal asterisk inside a
   label red so required fields are obvious. */
.shell .main label::after {
    /* This won't fire unless the template explicitly adds an
       attribute we hook on, so it's a safe no-op. Documented as a
       hint that requires per-template opt-in. */
}

/* Quick-view / detail-pane key-value rows — many pages render
   these as bare divs without alignment. Force grid layout. */
.shell .main .detail-row,
.shell .main .quick-view-row,
.shell .main .info-row {
    display: grid;
    grid-template-columns: minmax(110px, 35%) 1fr;
    gap: 8px;
    padding: 4px 0;
    align-items: baseline;
    font-size: 13px;
}
.shell .main .detail-row > .label,
.shell .main .quick-view-row > .label,
.shell .main .info-row > .label,
.shell .main .detail-row > .key,
.shell .main .quick-view-row > .key,
.shell .main .info-row > .key {
    color: var(--text-muted, #6b7280);
    font-size: 12px;
    font-weight: 500;
}

/* Inline action buttons (edit pencil + delete trash inside table
   rows) get a consistent gap so they don't merge visually. */
.shell .main .action-buttons,
.shell .main .row-actions,
.shell .main td .action-icon + .action-icon {
    gap: 6px;
}
.shell .main td button.action-icon,
.shell .main td a.action-icon,
.shell .main td .clickMe a {
    margin-left: 4px;
}

/* Dialog body — give every modal its own internal padding floor
   so embedded forms don't sit flush against the edge. */
.p-dialog .p-dialog-content,
body .p-dialog-content {
    padding: 16px 18px;
}

/* Datepicker input + calendar trigger button parity — they
   should sit at the same height. */
.shell .main p-datepicker .p-inputtext,
.shell .main p-datepicker .p-button,
.shell .main p-datepicker .p-inputtext,
.shell .main p-datepicker .p-button {
    height: 34px;
}

/* Dropdown trigger arrow alignment — center vertically inside
   the trigger box. */
.p-select .p-select-trigger,
.p-multiselect .p-multiselect-trigger,
body .p-select-dropdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Make page sections breathe — every card / section in the main
   area gets a soft bottom margin if it isn't the last child. */
.shell .main section + section,
.shell .main .page-section + .page-section {
    margin-top: 12px;
}

/* Ensure form sections (legends + grouped fields) keep some
   internal spacing. */
.shell .main fieldset {
    padding: 12px 14px;
}

/* Remove the hard-coded full-screen heights some legacy templates
   used (`height: 100vh`); the new shell already manages height
   via grid. Override only when nested inside .main so we don't
   break login screens. */
.shell .main [style*="height: 100vh"],
.shell .main [style*="height:100vh"] {
    height: auto !important;
    min-height: 0 !important;
}

/* Final catch-all: any element flagged with `overflow: hidden`
   inline that lives inside .main should at least be allowed to
   scroll horizontally so its content stays accessible. */
.shell .main [style*="overflow: hidden"]:not(button):not(input):not(select):not(textarea) {
    overflow-x: auto !important;
}

/* ============================================================
   p-datatable cohesion — make the search/header/filter/paginator
   stack render as ONE unified grid widget instead of 4 floating
   pieces. Targets every list view that uses <p-table> (most of
   the application's CRUD lists).
   ============================================================ */

/* Wrap the whole p-datatable in a single brand-bordered card */
.shell .main p-table .p-datatable,
.shell .main .p-datatable {
    border: 1px solid var(--border, #e7e2ee);
    border-radius: var(--r-3, 10px);
    overflow: hidden;
    background: var(--surface, #ffffff);
    box-shadow: var(--sh-1, 0 1px 2px rgba(31, 14, 61, 0.06));
}

/* Caption (search bar row) — flush at the top */
.shell .main .p-datatable .p-datatable-header,
.shell .main .p-datatable .p-datatable-caption,
body .p-datatable .p-datatable-header {
    background: var(--surface-alt, #faf8fc);
    border: 0;
    border-bottom: 1px solid var(--divider, #efebf5);
    padding: 10px 14px;
    border-radius: 0;
}
.shell .main .p-datatable .p-datatable-header .p-inputtext,
.shell .main .p-datatable .p-datatable-caption .p-inputtext,
.shell .main .p-datatable .p-datatable-header input[pInputText],
.shell .main .p-datatable .p-datatable-caption input[pInputText] {
    width: 100% !important;
    height: 30px;
    border: 1px solid var(--border, #e7e2ee);
    border-radius: var(--r-2, 6px);
    padding-left: 30px;
    background-color: var(--surface, #ffffff);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    background-repeat: no-repeat;
    background-position: 10px center;
    font-size: 13px;
}
/* Hide the inline pi-search icon when the input has its own */
.shell .main .p-datatable .p-datatable-header > .pi-search,
.shell .main .p-datatable .p-datatable-caption > .pi-search,
.shell .main .p-datatable .p-datatable-header > div > .pi-search,
.shell .main .p-datatable .p-datatable-caption > div > .pi-search {
    display: none;
}
/* If template wraps in a div with text-align:right, neutralize so
   the search input fills the row */
.shell .main .p-datatable .p-datatable-header > div[style*="text-align"],
.shell .main .p-datatable .p-datatable-caption > div[style*="text-align"] {
    text-align: left !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Header row — clean header cells, brand-tinted background, no
   double border between header and filter row */
.shell .main .p-datatable .p-datatable-thead > tr > th,
body .p-datatable .p-datatable-thead > tr > th {
    background: var(--surface-alt, #faf8fc);
    color: var(--text, #1f0e3d);
    font-weight: 600;
    font-size: 12.5px;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid var(--divider, #efebf5);
    text-align: left;
}
/* Vertical separators between header columns */
.shell .main .p-datatable .p-datatable-thead > tr > th + th,
body .p-datatable .p-datatable-thead > tr > th + th {
    border-left: 1px solid var(--divider, #efebf5);
}

/* Filter input row (the second tr in pTemplate="header") — make
   inputs fill their cell and have a consistent height. Empty
   filter cells get a subtle background so they don't look broken. */
.shell .main .p-datatable .p-datatable-thead > tr:nth-child(2) > th,
body .p-datatable .p-datatable-thead > tr:nth-child(2) > th {
    padding: 6px 8px;
    background: var(--surface, #ffffff);
    border-bottom: 1px solid var(--divider, #efebf5);
}
.shell .main .p-datatable .p-datatable-thead > tr:nth-child(2) > th input,
.shell .main .p-datatable .p-datatable-thead > tr:nth-child(2) > th .p-inputtext,
.shell .main .p-datatable .p-datatable-thead > tr:nth-child(2) > th .p-select,
.shell .main .p-datatable .p-datatable-thead > tr:nth-child(2) > th p-datepicker,
body .p-datatable .p-datatable-thead > tr:nth-child(2) > th input {
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    font-size: 12.5px;
}
.shell .main .p-datatable .p-datatable-thead > tr:nth-child(2) > th:empty,
body .p-datatable .p-datatable-thead > tr:nth-child(2) > th:empty {
    background: var(--surface-alt, #faf8fc);
}

/* Body rows — subtle striping + clean dividers, brand hover */
.shell .main .p-datatable .p-datatable-tbody > tr,
body .p-datatable .p-datatable-tbody > tr {
    background: var(--surface, #ffffff);
}
.shell .main .p-datatable .p-datatable-tbody > tr:nth-child(even),
body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
    background: var(--surface-alt, #faf8fc);
}
.shell .main .p-datatable .p-datatable-tbody > tr > td,
body .p-datatable .p-datatable-tbody > tr > td {
    padding: 7px 10px;
    border: 0;
    border-bottom: 1px solid var(--divider, #efebf5);
    font-size: 13px;
    vertical-align: middle;
}
.shell .main .p-datatable .p-datatable-tbody > tr > td + td,
body .p-datatable .p-datatable-tbody > tr > td + td {
    border-left: 1px solid var(--divider, #efebf5);
}
.shell .main .p-datatable .p-datatable-tbody > tr:hover {
    background: var(--brand-50, #f5f0fb) !important;
}
.shell .main .p-datatable .p-datatable-tbody > tr:last-child > td {
    border-bottom: 0;
}

/* Empty body — center "No records found" text */
.shell .main .p-datatable .p-datatable-tbody > tr.p-datatable-emptymessage > td,
body .p-datatable .p-datatable-tbody > tr.p-component-content:only-child > td {
    text-align: center;
    color: var(--text-muted, #6b7280);
    font-size: 12.5px;
    padding: 20px 10px;
    background: var(--surface, #ffffff);
}

/* Paginator — flush at the bottom */
.shell .main .p-datatable .p-paginator,
.shell .main .p-paginator,
body .p-datatable .p-paginator {
    background: var(--surface-alt, #faf8fc);
    border: 0;
    border-top: 1px solid var(--divider, #efebf5);
    padding: 6px 10px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.p-paginator .p-paginator-first,
.p-paginator .p-paginator-prev,
.p-paginator .p-paginator-next,
.p-paginator .p-paginator-last,
.p-paginator .p-paginator-page {
    min-width: 28px;
    height: 28px;
    border-radius: var(--r-1, 4px);
    color: var(--text-secondary, #4b5563);
    border: 0;
    background: transparent;
}
.p-paginator .p-paginator-page:not(.p-highlight):hover,
.p-paginator .p-paginator-first:not(.p-disabled):hover,
.p-paginator .p-paginator-prev:not(.p-disabled):hover,
.p-paginator .p-paginator-next:not(.p-disabled):hover,
.p-paginator .p-paginator-last:not(.p-disabled):hover {
    background: var(--brand-50, #f5f0fb);
    color: var(--brand-700, #4c1d95);
}

/* Gridlines styleClass — keep the unified card border but allow
   internal vertical lines on demand */
.shell .main .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th,
.shell .main .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
    border-color: var(--divider, #efebf5);
}

/* Wrapper — kill the previous `border-radius: 0` cascade so the
   internal scrollable wrapper inherits the parent's rounded shape */
.shell .main .p-datatable .p-datatable-wrapper,
.shell .main .p-datatable .p-datatable-scrollable-wrapper,
.shell .main .p-datatable .p-datatable-scrollable-body {
    border-radius: 0;
    background: transparent;
}

/* ============================================================
   Form-control sizing - left to PrimeNG 21's @primeuix/themes,
   which already provides correct flex layout for p-multiselect /
   p-select / p-treeselect / p-autocomplete and proper sizing for
   p-checkbox / p-radiobutton.

   Earlier attempts here re-stamped chrome and absolute-positioned
   a .p-multiselect-trigger / .p-select-trigger that doesn't
   exist in v19 (the rendered class is .p-multiselect-dropdown /
   .p-select-dropdown), which caused the chevron to drop below
   the input. Brand colors for checked / focused / hover states
   are handled in the "Form controls" and "Checkbox / radio"
   sections above, which now use v19's `-checked` root class.
   ============================================================ */

/* Counteract a stale rule in styles.css line 1170 that forces
   .p-multiselect-label-container { width: 100% }. v19 already
   gives the container `flex: 1 1 auto` inside an inline-flex
   parent, and `width: 100%` makes it claim full row width which
   pushes the dropdown chevron onto a wrapped line. Reset it to
   auto so flex distribution handles the row. */
.p-multiselect-label-container {
    width: auto !important;
}

/* ============================================================
   Topbar — push the right-side cluster (bell / help / user-menu)
   to the right edge at every viewport width. The .cmd search bar
   keeps its 720 px cap so it doesn't grow into a vast unreadable
   strip on a 27"/4K canvas; whatever space is left after .cmd is
   absorbed by the auto margin so the user-menu sits flush right.
   ============================================================ */
.shell .topbar > .topbar__right,
.shell .topbar .topbar__right {
    margin-left: auto;
}

@media (min-width: 1920px) {
    /* On 27" / 4K — extra right-edge breathing room so the user-menu
       doesn't hug the bezel. */
    .shell .topbar { padding-right: var(--s-6, 24px); }
}

/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./src/styles/rtl-overrides.css ***!
  \**********************************************************************************************************************************************************************************************************************/
/* =============================================================
   RTL overrides for Arabic / right-to-left rendering.

   Loaded after primeflex-used.css and brand-overrides.css so the
   selectors below take precedence under `[dir="rtl"]` only.

   Strategy:
     - Utility-class flips (.ml-*, .pl-*, .text-left, .float-*) so
       templates using PrimeFlex / Bootstrap utility classes flip
       without touching markup.
     - Global "text-align: left → right" and "float: left → right"
       fallbacks so component-local CSS that hardcodes physical
       directions still produces a usable Arabic layout.
     - PrimeNG component patches for the small set where the
       framework still ships physical-direction icons or padding.
     - Global shell layout (.shell, app-topbar, app-update-banner)
       fixes so the chrome lines up at the trailing edge.

   When new utility classes appear in PrimeFlex / brand-overrides,
   add them below. Component-local CSS should prefer CSS logical
   properties (margin-inline-start etc.) for new code.
   ============================================================= */

/* ---------- Margin utility classes (ml-*, mr-*, ms-*, me-*) ---------- */
[dir="rtl"] .ml-0  { margin-left: revert !important; margin-right: 0 !important; }
[dir="rtl"] .ml-1  { margin-left: 0 !important; margin-right: 0.25rem !important; }
[dir="rtl"] .ml-2  { margin-left: 0 !important; margin-right: 0.5rem !important; }
[dir="rtl"] .ml-3  { margin-left: 0 !important; margin-right: 1rem !important; }
[dir="rtl"] .ml-4  { margin-left: 0 !important; margin-right: 1.5rem !important; }
[dir="rtl"] .ml-5  { margin-left: 0 !important; margin-right: 2rem !important; }
[dir="rtl"] .ml-6  { margin-left: 0 !important; margin-right: 3rem !important; }
[dir="rtl"] .ml-7  { margin-left: 0 !important; margin-right: 4rem !important; }
[dir="rtl"] .ml-8  { margin-left: 0 !important; margin-right: 5rem !important; }
[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }

[dir="rtl"] .mr-0  { margin-right: revert !important; margin-left: 0 !important; }
[dir="rtl"] .mr-1  { margin-right: 0 !important; margin-left: 0.25rem !important; }
[dir="rtl"] .mr-2  { margin-right: 0 !important; margin-left: 0.5rem !important; }
[dir="rtl"] .mr-3  { margin-right: 0 !important; margin-left: 1rem !important; }
[dir="rtl"] .mr-4  { margin-right: 0 !important; margin-left: 1.5rem !important; }
[dir="rtl"] .mr-5  { margin-right: 0 !important; margin-left: 2rem !important; }
[dir="rtl"] .mr-6  { margin-right: 0 !important; margin-left: 3rem !important; }
[dir="rtl"] .mr-7  { margin-right: 0 !important; margin-left: 4rem !important; }
[dir="rtl"] .mr-8  { margin-right: 0 !important; margin-left: 5rem !important; }
[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }

/* Bootstrap-style ms-* / me-* */
[dir="rtl"] .ms-0  { margin-left: 0 !important; }
[dir="rtl"] .ms-1  { margin-left: 0 !important; margin-right: 0.25rem !important; }
[dir="rtl"] .ms-2  { margin-left: 0 !important; margin-right: 0.5rem !important; }
[dir="rtl"] .ms-3  { margin-left: 0 !important; margin-right: 1rem !important; }
[dir="rtl"] .ms-4  { margin-left: 0 !important; margin-right: 1.5rem !important; }
[dir="rtl"] .ms-5  { margin-left: 0 !important; margin-right: 3rem !important; }
[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .me-0  { margin-right: 0 !important; }
[dir="rtl"] .me-1  { margin-right: 0 !important; margin-left: 0.25rem !important; }
[dir="rtl"] .me-2  { margin-right: 0 !important; margin-left: 0.5rem !important; }
[dir="rtl"] .me-3  { margin-right: 0 !important; margin-left: 1rem !important; }
[dir="rtl"] .me-4  { margin-right: 0 !important; margin-left: 1.5rem !important; }
[dir="rtl"] .me-5  { margin-right: 0 !important; margin-left: 3rem !important; }
[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }

/* ---------- Padding utility classes (pl-*, pr-*, ps-*, pe-*) ---------- */
[dir="rtl"] .pl-0  { padding-left: revert !important; padding-right: 0 !important; }
[dir="rtl"] .pl-1  { padding-left: 0 !important; padding-right: 0.25rem !important; }
[dir="rtl"] .pl-2  { padding-left: 0 !important; padding-right: 0.5rem !important; }
[dir="rtl"] .pl-3  { padding-left: 0 !important; padding-right: 1rem !important; }
[dir="rtl"] .pl-4  { padding-left: 0 !important; padding-right: 1.5rem !important; }
[dir="rtl"] .pl-5  { padding-left: 0 !important; padding-right: 2rem !important; }
[dir="rtl"] .pl-6  { padding-left: 0 !important; padding-right: 3rem !important; }
[dir="rtl"] .pl-7  { padding-left: 0 !important; padding-right: 4rem !important; }
[dir="rtl"] .pl-8  { padding-left: 0 !important; padding-right: 5rem !important; }

[dir="rtl"] .pr-0  { padding-right: revert !important; padding-left: 0 !important; }
[dir="rtl"] .pr-1  { padding-right: 0 !important; padding-left: 0.25rem !important; }
[dir="rtl"] .pr-2  { padding-right: 0 !important; padding-left: 0.5rem !important; }
[dir="rtl"] .pr-3  { padding-right: 0 !important; padding-left: 1rem !important; }
[dir="rtl"] .pr-4  { padding-right: 0 !important; padding-left: 1.5rem !important; }
[dir="rtl"] .pr-5  { padding-right: 0 !important; padding-left: 2rem !important; }
[dir="rtl"] .pr-6  { padding-right: 0 !important; padding-left: 3rem !important; }
[dir="rtl"] .pr-7  { padding-right: 0 !important; padding-left: 4rem !important; }
[dir="rtl"] .pr-8  { padding-right: 0 !important; padding-left: 5rem !important; }

[dir="rtl"] .ps-0  { padding-left: 0 !important; }
[dir="rtl"] .ps-1  { padding-left: 0 !important; padding-right: 0.25rem !important; }
[dir="rtl"] .ps-2  { padding-left: 0 !important; padding-right: 0.5rem !important; }
[dir="rtl"] .ps-3  { padding-left: 0 !important; padding-right: 1rem !important; }
[dir="rtl"] .ps-4  { padding-left: 0 !important; padding-right: 1.5rem !important; }
[dir="rtl"] .ps-5  { padding-left: 0 !important; padding-right: 3rem !important; }
[dir="rtl"] .pe-0  { padding-right: 0 !important; }
[dir="rtl"] .pe-1  { padding-right: 0 !important; padding-left: 0.25rem !important; }
[dir="rtl"] .pe-2  { padding-right: 0 !important; padding-left: 0.5rem !important; }
[dir="rtl"] .pe-3  { padding-right: 0 !important; padding-left: 1rem !important; }
[dir="rtl"] .pe-4  { padding-right: 0 !important; padding-left: 1.5rem !important; }
[dir="rtl"] .pe-5  { padding-right: 0 !important; padding-left: 3rem !important; }

/* ---------- Text alignment ---------- */
[dir="rtl"] .text-left     { text-align: right !important; }
[dir="rtl"] .text-right    { text-align: left !important; }
[dir="rtl"] .text-start    { text-align: right !important; }
[dir="rtl"] .text-end      { text-align: left !important; }
/* generic content default: most pages render English-left-aligned tables; flip for AR */
[dir="rtl"] .p-datatable .p-datatable-tbody > tr > td:not([class*="text-"]):not([style*="text-align"]),
[dir="rtl"] .p-datatable .p-datatable-thead > tr > th:not([class*="text-"]):not([style*="text-align"]) {
    text-align: right;
}

/* ---------- Float ---------- */
[dir="rtl"] .float-left  { float: right !important; }
[dir="rtl"] .float-right { float: left !important; }
[dir="rtl"] .float-start { float: right !important; }
[dir="rtl"] .float-end   { float: left !important; }

/* ---------- Flexbox direction helpers ---------- */
[dir="rtl"] .justify-content-start { justify-content: flex-end !important; }
[dir="rtl"] .justify-content-end   { justify-content: flex-start !important; }
[dir="rtl"] .align-items-start     { /* main axis only; cross axis stays */ }
/* row-reverse for layouts that visually depend on order */
[dir="rtl"] .flex-row-reverse-rtl { flex-direction: row-reverse !important; }

/* ---------- Positional helpers ---------- */
[dir="rtl"] .left-0  { left: auto !important; right: 0 !important; }
[dir="rtl"] .right-0 { right: auto !important; left: 0 !important; }
[dir="rtl"] .left-50 { left: auto !important; right: 50% !important; }
[dir="rtl"] .right-50 { right: auto !important; left: 50% !important; }

/* ---------- Borders ---------- */
[dir="rtl"] .border-left  { border-left: 0 !important; border-right: 1px solid !important; }
[dir="rtl"] .border-right { border-right: 0 !important; border-left: 1px solid !important; }

/* ---------- Rounded corners (Bootstrap-style) ---------- */
[dir="rtl"] .rounded-start { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-top-right-radius: 0.375rem !important; border-bottom-right-radius: 0.375rem !important; }
[dir="rtl"] .rounded-end   { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-top-left-radius: 0.375rem !important; border-bottom-left-radius: 0.375rem !important; }

/* =============================================================
   PrimeNG 21 component patches
   ============================================================= */

/* Dropdown / Select clear & toggle icons — sit on the trailing edge */
[dir="rtl"] .p-select .p-select-clear,
[dir="rtl"] .p-multiselect .p-multiselect-clear-icon {
    right: auto !important;
    left: 2.5rem !important;
}
[dir="rtl"] .p-dropdown .p-dropdown-clear-icon {
    right: auto !important;
    left: 2.5rem !important;
}

/* Calendar / DatePicker prev/next chevrons */
[dir="rtl"] .p-datepicker .p-datepicker-prev-icon::before { content: "\e90c"; }
[dir="rtl"] .p-datepicker .p-datepicker-next-icon::before { content: "\e90b"; }

/* Paginator chevrons mirror */
[dir="rtl"] .p-paginator .p-paginator-prev .p-icon-wrapper,
[dir="rtl"] .p-paginator .p-paginator-next .p-icon-wrapper,
[dir="rtl"] .p-paginator .p-paginator-first .p-icon-wrapper,
[dir="rtl"] .p-paginator .p-paginator-last .p-icon-wrapper {
    transform: scaleX(-1);
}

/* p-table sort icon trails the header text */
[dir="rtl"] .p-datatable .p-sortable-column .p-sortable-column-icon {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

/* p-button label/icon spacing */
[dir="rtl"] .p-button-icon-left,
[dir="rtl"] .p-button .p-button-icon-left {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}
[dir="rtl"] .p-button-icon-right,
[dir="rtl"] .p-button .p-button-icon-right {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

/* Dialog close icon — sit on the leading (left) edge in RTL */
[dir="rtl"] .p-dialog-header-icons {
    margin-left: 0 !important;
    margin-right: auto !important;
}
[dir="rtl"] .p-dialog-title {
    text-align: right !important;
}

/* Tabs — first tab on the right */
[dir="rtl"] .p-tabview .p-tabview-nav,
[dir="rtl"] .p-tabs .p-tabs-nav {
    direction: rtl;
}

/* Menubar / Megamenu — submenu opens leading-side */
[dir="rtl"] .p-menubar .p-menubar-submenu-icon,
[dir="rtl"] .p-megamenu .p-megamenu-submenu-icon {
    transform: scaleX(-1);
}

/* Tree / TreeTable expand chevrons */
[dir="rtl"] .p-tree .p-tree-toggler-icon,
[dir="rtl"] .p-treetable .p-treetable-toggler-icon {
    transform: scaleX(-1);
}

/* InputGroup: prefix/suffix swap edges */
[dir="rtl"] .p-inputgroup > .p-inputgroup-addon:first-child,
[dir="rtl"] .p-inputgroup > button:first-child,
[dir="rtl"] .p-inputgroup > input:first-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}
[dir="rtl"] .p-inputgroup > .p-inputgroup-addon:last-child,
[dir="rtl"] .p-inputgroup > button:last-child,
[dir="rtl"] .p-inputgroup > input:last-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}

/* Checkbox / Radio: label trails on the left in RTL */
[dir="rtl"] .p-checkbox + label,
[dir="rtl"] .p-radiobutton + label {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

/* Toast close X — sit on the leading edge */
[dir="rtl"] .p-toast-icon-close {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* OverlayPanel arrow — flip side */
[dir="rtl"] .p-overlaypanel:after,
[dir="rtl"] .p-overlaypanel:before {
    left: auto !important;
    right: 1.25em;
}

/* p-confirm-popup arrow */
[dir="rtl"] .p-confirmpopup:after,
[dir="rtl"] .p-confirmpopup:before {
    left: auto !important;
    right: 1.25em;
}

/* p-breadcrumb already follows dir; ensure separators behave */
[dir="rtl"] .p-breadcrumb .p-breadcrumb-chevron {
    transform: scaleX(-1);
}

/* Accordion header chevron */
[dir="rtl"] .p-accordion .p-accordion-toggle-icon {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
    transform: scaleX(-1);
}

/* Stepper arrow */
[dir="rtl"] .p-steps .p-steps-item .p-menuitem-link {
    flex-direction: row-reverse;
}

/* =============================================================
   Global shell layout
   ============================================================= */

html[dir="rtl"] .shell .brand__words,
html[dir="rtl"] .shell .chip-stacked .chip__lines,
html[dir="rtl"] .shell .cmd .placeholder,
html[dir="rtl"] .shell .nav-pane__brand-foot .info {
    text-align: right;
}

html[dir="rtl"] .shell-popover__item .check {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] .shell [class*="__item"][style*="text-align"] {
    text-align: right;
}

html[dir="rtl"] app-update-banner .ms-auto,
html[dir="rtl"] app-update-banner [style*="margin-left"] {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] ul.recentMenu a svg {
    margin-right: 0;
    margin-left: 5px;
}

/* Topbar — search input, user popover trailing edge */
html[dir="rtl"] app-topbar .layout-topbar-search input,
html[dir="rtl"] app-topbar .layout-topbar-search .pi-search {
    direction: rtl;
}
html[dir="rtl"] app-topbar .layout-topbar-menu {
    margin-left: 0;
    margin-right: auto;
}
html[dir="rtl"] app-topbar .layout-topbar-button .layout-topbar-button-icon {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Sidebar / Menu — chevrons flip */
html[dir="rtl"] .layout-menu .pi-chevron-right,
html[dir="rtl"] .layout-menu .pi-angle-right {
    transform: scaleX(-1);
}

html[dir="rtl"] .layout-menu li ul {
    padding-left: 0;
    padding-right: 1.25rem;
}

/* Form labels and helper text */
html[dir="rtl"] .app-form-grid label,
html[dir="rtl"] .form-label,
html[dir="rtl"] .field label,
html[dir="rtl"] .p-field label {
    text-align: right;
}

/* Required asterisk — sits on trailing (left) edge in RTL */
html[dir="rtl"] .required-asterisk {
    margin-left: 0;
    margin-right: 0.25rem;
}

/* Card / Panel headers */
html[dir="rtl"] .card-header,
html[dir="rtl"] .panel-header,
html[dir="rtl"] .p-card-title,
html[dir="rtl"] .p-panel-title {
    text-align: right;
}

/* Action rows — buttons cluster on trailing edge */
html[dir="rtl"] .app-action-row {
    flex-direction: row-reverse;
}

/* Login page specific — keep brand on the leading edge */
html[dir="rtl"] .login-body .login-panel,
html[dir="rtl"] .login-body .login-form {
    text-align: right;
}
html[dir="rtl"] .login-body .login-input-wrapper i {
    left: auto;
    right: 0.5rem;
}
html[dir="rtl"] .login-body input[type="text"],
html[dir="rtl"] .login-body input[type="password"] {
    padding-left: 0.75rem;
    padding-right: 2.5rem;
}

/* Toolbar / button group */
html[dir="rtl"] .p-toolbar .p-toolbar-group-start { margin-right: 0; margin-left: auto; }
html[dir="rtl"] .p-toolbar .p-toolbar-group-end   { margin-left: 0; margin-right: auto; }

/* Generic catch-all: keep numbers / currency / dates LTR even under RTL */
[dir="rtl"] .ltr-numbers,
[dir="rtl"] [data-direction="ltr"] {
    direction: ltr;
    text-align: right;
    unicode-bidi: embed;
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* You can add global styles to this file, and also import other style files */
/* RTL overrides flip the physical-direction utility classes
   (.ml-*, .mr-*, .pl-*, .pr-*, .text-left/right, .float-*, etc.)
   under [dir="rtl"]. Loaded after brand-overrides so its selectors
   win against the default LTR rules. */
:root {
  --brand-50: #f5f0fb;
  --brand-100: #ebddf7;
  --brand-200: #d2b5f0;
  --brand-400: #8b5cf6;
  --brand-500: #a855f7;
  --brand-600: #6d28d9;
  --brand-700: #4c1d95;
  --brand-800: #1f0e3d;
  --bg: #f5f3f9;
  --surface: #ffffff;
  --surface-alt: #faf8fc;
  --surface-rail: #1f0e3d;
  --border: #e7e2ee;
  --divider: #efebf5;
  --text: #1f0e3d;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --text-disabled: #9ca3af;
  --on-brand: #ffffff;
  --success: #15803d;
  --warning: #b45309;
  --error: #b91c1c;
  --info: #0369a1;
  --critical: #dc2626;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 10px;
  --r-pill: 9999px;
  --sh-1: 0 1px 2px rgba(31,14,61,0.06);
  --sh-2: 0 4px 12px rgba(31,14,61,0.08);
  --sh-3: 0 16px 40px rgba(31,14,61,0.18);
  --d-fast: 120ms;
  --d-default: 220ms;
  --d-slow: 380ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --z-header: 1000;
  --z-sidebar: 1100;
  --z-popover: 1200;
  --z-overlay: 1300;
  --z-toast: 1400;
  --topbar-h: 56px;
  --nav-rail-w: 60px;
  --nav-pane-w: 232px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
html {
  font-size: 14px;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Stimes shell base — applied globally so the login splash, setup wizard
   and the new shell all share the same palette + Roboto family. */
html body {
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Default anchor inherits the surrounding text color so the sidebar /
   popovers / nav-pane items keep the menu-hover semantics defined by
   their own component CSS. Buttons / primary CTAs are styled by
   styles/brand-overrides.css. */
html body a {
  color: inherit;
}

html[dir=rtl] body {
  direction: rtl;
}

body.app-rtl {
  text-align: right;
}

body.app-rtl .p-component,
body.app-rtl input,
body.app-rtl textarea,
body.app-rtl .p-datepicker,
body.app-rtl .p-select {
  direction: rtl;
}

/* You can add global styles to this file, and also import other style files */
/*!*********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./src/styles/bootstrap-utilities-used.css ***!
  \*********************************************************************************************************************************************************************************************************************************/
/* Generated by helper-scripts/generate-bootstrap-utilities-subset.js. */
/* Regenerate after adding new Bootstrap utility classes. */
/*!
 * Bootstrap Utilities v5.0.0-alpha1 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */.align-middle{vertical-align:middle!important}.float-left{float:left!important}.float-right{float:right!important}.overflow-hidden{overflow:hidden!important}.d-none{display:none!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}.border{border:1px solid #dee2e6!important}.border-right{border-right:1px solid #dee2e6!important}.border-bottom{border-bottom:1px solid #dee2e6!important}.border-left{border-left:1px solid #dee2e6!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.w-auto{width:auto!important}.h-100{height:100%!important}.min-vh-100{min-height:100vh!important}.flex-fill{flex:1 1 auto!important}.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-grow-0{flex-grow:0!important}.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-self-end{align-self:flex-end!important}.m-0{margin:0!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-3{margin-right:1rem!important;margin-left:1rem!important}.mx-auto{margin-right:auto!important;margin-left:auto!important}.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.mt-auto{margin-top:auto!important}.mr-0{margin-right:0!important}.mr-1{margin-right:.25rem!important}.mr-2{margin-right:.5rem!important}.mr-3{margin-right:1rem!important}.mr-4{margin-right:1.5rem!important}.mr-5{margin-right:3rem!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}.mb-auto{margin-bottom:auto!important}.ml-0{margin-left:0!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.ml-3{margin-left:1rem!important}.ml-4{margin-left:1.5rem!important}.ml-5{margin-left:3rem!important}.ml-auto{margin-left:auto!important}.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}.px-0{padding-right:0!important;padding-left:0!important}.px-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-3{padding-right:1rem!important;padding-left:1rem!important}.px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.py-0{padding-top:0!important;padding-bottom:0!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.pt-0{padding-top:0!important}.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.5rem!important}.pt-5{padding-top:3rem!important}.pr-0{padding-right:0!important}.pr-1{padding-right:.25rem!important}.pr-3{padding-right:1rem!important}.pr-4{padding-right:1.5rem!important}.pr-5{padding-right:3rem!important}.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}.pb-5{padding-bottom:3rem!important}.pl-0{padding-left:0!important}.pl-1{padding-left:.25rem!important}.pl-2{padding-left:.5rem!important}.pl-3{padding-left:1rem!important}.font-weight-bold{font-weight:700!important}.text-uppercase{text-transform:uppercase!important}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-primary{color:#0d6efd!important}.text-secondary{color:#6c757d!important}.text-success{color:#28a745!important}.text-info{color:#17a2b8!important}.text-warning{color:#ffc107!important}.text-danger{color:#dc3545!important}.text-dark{color:#343a40!important}.text-white{color:#fff!important}.text-muted{color:#6c757d!important}.text-black-50{color:rgba(0,0,0,.5)!important}.bg-primary{background-color:#0d6efd!important}.bg-secondary{background-color:#6c757d!important}.bg-success{background-color:#28a745!important}.bg-danger{background-color:#dc3545!important}.bg-light{background-color:#f8f9fa!important}.bg-dark{background-color:#343a40!important}.bg-white{background-color:#fff!important}.bg-transparent{background-color:transparent!important}.font-italic{font-style:italic!important}.rounded{border-radius:.25rem!important}.rounded-lg{border-radius:.3rem!important}.rounded-pill{border-radius:50rem!important}.visible{visibility:visible!important}@media (min-width:576px){.d-sm-none{display:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:flex!important}.d-sm-inline-flex{display:inline-flex!important}.flex-sm-fill{flex:1 1 auto!important}.flex-sm-row{flex-direction:row!important}.flex-sm-column{flex-direction:column!important}.flex-sm-row-reverse{flex-direction:row-reverse!important}.flex-sm-column-reverse{flex-direction:column-reverse!important}.flex-sm-grow-0{flex-grow:0!important}.flex-sm-grow-1{flex-grow:1!important}.flex-sm-shrink-0{flex-shrink:0!important}.flex-sm-shrink-1{flex-shrink:1!important}.flex-sm-wrap{flex-wrap:wrap!important}.flex-sm-nowrap{flex-wrap:nowrap!important}.flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}}@media (min-width:768px){.d-md-none{display:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:flex!important}.d-md-inline-flex{display:inline-flex!important}.flex-md-fill{flex:1 1 auto!important}.flex-md-row{flex-direction:row!important}.flex-md-column{flex-direction:column!important}.flex-md-row-reverse{flex-direction:row-reverse!important}.flex-md-column-reverse{flex-direction:column-reverse!important}.flex-md-grow-0{flex-grow:0!important}.flex-md-grow-1{flex-grow:1!important}.flex-md-shrink-0{flex-shrink:0!important}.flex-md-shrink-1{flex-shrink:1!important}.flex-md-wrap{flex-wrap:wrap!important}.flex-md-nowrap{flex-wrap:nowrap!important}.flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.pt-md-3{padding-top:1rem!important}}@media (min-width:992px){.d-lg-none{display:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:flex!important}.d-lg-inline-flex{display:inline-flex!important}.flex-lg-fill{flex:1 1 auto!important}.flex-lg-row{flex-direction:row!important}.flex-lg-column{flex-direction:column!important}.flex-lg-row-reverse{flex-direction:row-reverse!important}.flex-lg-column-reverse{flex-direction:column-reverse!important}.flex-lg-grow-0{flex-grow:0!important}.flex-lg-grow-1{flex-grow:1!important}.flex-lg-shrink-0{flex-shrink:0!important}.flex-lg-shrink-1{flex-shrink:1!important}.flex-lg-wrap{flex-wrap:wrap!important}.flex-lg-nowrap{flex-wrap:nowrap!important}.flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.mr-lg-5{margin-right:3rem!important}.ml-lg-2{margin-left:.5rem!important}.p-lg-4{padding:1.5rem!important}.pt-lg-4{padding-top:1.5rem!important}.pb-lg-3{padding-bottom:1rem!important}}@media (min-width:1200px){.d-xl-none{display:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:flex!important}.d-xl-inline-flex{display:inline-flex!important}.flex-xl-fill{flex:1 1 auto!important}.flex-xl-row{flex-direction:row!important}.flex-xl-column{flex-direction:column!important}.flex-xl-row-reverse{flex-direction:row-reverse!important}.flex-xl-column-reverse{flex-direction:column-reverse!important}.flex-xl-grow-0{flex-grow:0!important}.flex-xl-grow-1{flex-grow:1!important}.flex-xl-shrink-0{flex-shrink:0!important}.flex-xl-shrink-1{flex-shrink:1!important}.flex-xl-wrap{flex-wrap:wrap!important}.flex-xl-nowrap{flex-wrap:nowrap!important}.flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}}@media (min-width:1400px){.d-xxl-none{display:none!important}.d-xxl-inline{display:inline!important}.d-xxl-inline-block{display:inline-block!important}.d-xxl-block{display:block!important}.d-xxl-table{display:table!important}.d-xxl-table-row{display:table-row!important}.d-xxl-table-cell{display:table-cell!important}.d-xxl-flex{display:flex!important}.d-xxl-inline-flex{display:inline-flex!important}.flex-xxl-fill{flex:1 1 auto!important}.flex-xxl-row{flex-direction:row!important}.flex-xxl-column{flex-direction:column!important}.flex-xxl-row-reverse{flex-direction:row-reverse!important}.flex-xxl-column-reverse{flex-direction:column-reverse!important}.flex-xxl-grow-0{flex-grow:0!important}.flex-xxl-grow-1{flex-grow:1!important}.flex-xxl-shrink-0{flex-shrink:0!important}.flex-xxl-shrink-1{flex-shrink:1!important}.flex-xxl-wrap{flex-wrap:wrap!important}.flex-xxl-nowrap{flex-wrap:nowrap!important}.flex-xxl-wrap-reverse{flex-wrap:wrap-reverse!important}}@media print{.d-print-none{display:none!important}.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:flex!important}.d-print-inline-flex{display:inline-flex!important}}


/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./src/styles.css?ngGlobalStyle ***!
  \**********************************************************************************************************************************************************************************************************************/
/* You can add global styles to this file, and also import other style files */


.authenticating-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    font-size: 1rem;
    background: #fff;
    opacity: 0.8;
    animation: pulsate 0.4s infinite alternate linear;
}
.dots::after {
    content: "";
    animation: dotsAnimation 1.5s infinite;
  }
@keyframes dotsAnimation {
    0% { content: "."; }
    33% { content: ".."; }
    66% { content: "..."; }
}

.clickMe {
    cursor: pointer !important;
}

.clickMe a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
    border-radius: 4px;
}

.clickMe a:focus-visible {
    outline: 2px solid var(--brand-500, #a855f7);
    outline-offset: 2px;
    background: rgba(168, 85, 247, 0.12);
}



/* --------------------- loader section start -------------------- */
.loader-wrapper {
    width: 400px;
    /* margin: 300px auto; */
    position: fixed;
    left: 40%;
    top: 43%;
    text-align: center;
}
.loader-container {
    position: relative;
    height: 40px;
    margin-bottom: 20px;
}
.loader-logo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 1;
    animation: logofadeAndMoveLeft 2s ease-in-out forwards;
}

.loader-container p {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: #444;
    font-family: "Inter", sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    opacity: 0;
    transform: translateX(100%);
    animation: textfadeAndMoveRight 2s ease-in-out forwards;
    animation-delay: 0.5s;
    margin: 0;
    text-align: center;
}
@keyframes logofadeAndMoveLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-30%);
    }
}

@keyframes textfadeAndMoveRight {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.progress-bar {
    width: 100%;
    height: 7px;
    background: #C4B4D0;
    border-radius: 11px;
    overflow: hidden;
    position: relative;
    animation: changeBackground 4s linear infinite;
}

.progress-bar .progress {
    height: 3.2px;
    border-radius: 50px;
    background: #7B2E80;
    position: absolute;
    animation:
        bounce 2s ease-in-out infinite,
        changeDotColor 4s linear infinite;
}

@keyframes bounce {
    0%, 100% {
        left: 0;
        right: 95%;
        width: 12%;
    }
    50% {
        left: 90%;
        right: 0;
        width: 12%;
    }
}

@keyframes changeBackground {
    0%, 100% {
        background: #C4B4D0; 
    }
    50% {
        background: #7B2E80;
    }
}

@keyframes changeDotColor {
    0%, 100% {
        background: #7B2E80; 
    }
    50% {
        background: #FFFFFF;
    }
}
/* --------------------- loader section end ---------------------- */




/* #installer {
  position: absolute;
  opacity: 0;
  top: 0;
  right: 0;
  text-align: center;
  transition: opacity 300ms ease-in-out;
}

#installer.available {
  opacity: 1;
}

#installer .button {
  border: white 1px solid;
  margin:10px;
  padding: 10px;
  color: white;
  background-color: transparent;
} */

:is(th, td).p-1,
:is(th, td).p-2,
:is(th, td).p-3,
:is(th, td).p-4,
:is(th, td).p-5,
:is(th, td).p-6,
:is(th, td).p-7,
:is(th, td).p-8 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.card-header {
    padding: 10px 15px;
    border-bottom: solid 1px #f1f1f1;
}

.card-body {
    padding: 15px;
}

.hidePanel {
    display: none;
}

.sup-floting-btn {
    display: block;
    position: fixed;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background-color: rgba(232, 62, 140, 0.25);
    text-align: center;
    color: #771340;
    top: 226px;
    right: 0;
    overflow: hidden;
    cursor: pointer;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    transition: background-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
        0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 12px 17px 2px rgba(0, 0, 0, 0.14);
    z-index: 9;
}

/* .supplier-view-card
{
    position: absolute;
    top: 0;
    transform: translateX(500px);
    transition: 0.8s;

}

.clicked-supplier-view-card {
    transform: translateX(0);
    transition: 0.8s;
} */

.form-group label {
    margin-bottom: 5px;
    display: inline-block;
    font-weight: 600;
}

.form-group p {
    margin: 0;
}

body .p-fieldset .p-fieldset-legend {
    color: #034592;
    background-color: #dcecff;
    margin-left: 0.714em;
    border: 1px solid #ddecfe;
}

body .p-fieldset .p-fieldset-legend .p-fieldset-legend-text {
    color: #034592;
    font-weight: 600;
}

body .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover,
body .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:focus {
    background-color: #c8e2ff;
    border-color: #9fcafb;
    outline-color: #9fcafb !important;
}

body .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus {
    outline-color: #9fcafb !important;
}

body .p-fieldset .p-fieldset-legend .p-fieldset-toggle-button {
    color: #034592;
}

/*scroll-bar-style*/

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

  ::-webkit-scrollbar-track {
  background: transparent;


  }
  ::-webkit-scrollbar-thumb {
     background: #ccc;
     border-radius: 10px;
  }

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

  ::-webkit-scrollbar-button {
    width: 32px;
    height: 32px;
  }
   */

/*scroll-bar-style-end*/

/*scroll-bar-style*/

::-webkit-scrollbar {
    width: 8px;
    background: transparent;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-button {
    width: 32px;
    height: 32px;
}

::-webkit-scrollbar-button:decrement {
    background: transparent;
}

::-webkit-scrollbar-button:increment {
    background: transparent;
}

/*scroll-bar-style-end*/

body .app-form-grid .p-button-icon-only {
    width: 2.143em;
    height: 2.143em;
}

.card-header {
    display: flex;
    align-items: center;
}

.py5 {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.header-sticky {
    position: sticky;
    top: 60px;
    background: #fff;
    z-index: 10;
}

.card-header .primary-btn {
    width: auto;
}

.btn-round {
    border-radius: 25px !important;
}

.p-l-5 {
    padding-left: 10px !important;
}

.mydialog .p-dialog-content {
    min-height: 300px !important;
}
/* style required depends on theme world star*/
.p-highlight {
    background-color: var(--brand-500, #a855f7) !important;
    color: #ffffff;
}
.swap-logo-no-world-star {
    display: none;
}
/*end style required depends on theme world star*/

/* style required depends on theme other*/
/* .p-highlight {
    background-color: #f19cc3 !important;
}
.hide-logo-no-worldstar {
    display: none !important;
}
.swap-logo-world-star,
.login-company-logo {
    display: none !important;
} */

/* style required depends on theme other*/

.small-dialog .p-dialog-content {
    min-height: 150px !important;
}

.warn-text {
    color: rgb(207, 96, 31);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.status-pill .pi {
    font-size: 0.78rem;
}

.status-pill--success {
    background: #e8f7ee;
    color: #1f7a43;
}

.status-pill--warning {
    background: #fff4e6;
    color: #ad6800;
}

.status-pill--muted {
    background: #f1f3f5;
    color: #495057;
}

/* body .p-inputtext {
    background: transparent;
} */

.p-select .p-select-label {
    margin-bottom: 0;
}

.required-asterisk {
    color: red;
    font-weight: bold;
    margin-left: 3px;
    font-size: 1em;
}

.p-inputtext:disabled {
    background-color: #eeeeee !important;
}

@media print {
    #invoice-content {
        height: 100%;
    }
    .print-min-width {
        min-width: 700px !important;
    }
    .invoice-wrapper-hr {
        margin: 0px 0px !important;
    }
    .liwa-logo-bg {
        background-color: #cccccc !important;
        /* -webkit-print-color-adjust: exact; */
    }
    .print-hide-button {
        display: none;
    }
}

.print-min-width {
    min-width: auto;
}

.invoice-price {
    text-align: center;
    margin-right: 4em;
}

.case-upper {
    text-transform: uppercase;
}

.m-r-10 {
    margin-right: 10px;
}

.field-set-validation {
    border: none;
    background-color: transparent;
    padding: 0px;
}

.field-set-validation .p-component:disabled {
    background-color: transparent;
}

.m-0 {
    margin: 0px;
}

:focus {
    outline: none;
}

.trainingDialogue .p-dialog-content {
    min-height: 400px !important;
}

.p-0-c {
    padding: 0px !important;
}

/* .parent-li a:hover { background-color: white !important;} */

.parent-anchor:hover {
    background-color: white !important;
}

.child-anchor:hover {
    background-color: #f4f4f4 !important;
}

.p-t-0 {
    padding-top: 0px;
}

body
    .p-carousel
    .p-carousel-indicator-list
    .p-carousel-indicator.p-highlight {
    background: transparent !important;
}

.liwa-logo-bg {
    background-color: #cccccc;
}

.input-desabled {
    background-color: #eeeeee !important;
}

.p-select .p-select-label {
    background: #fff !important;
}

.mt-17 {
    margin-top: 17px;
}

.menu-search input {
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol";
    font-size: 0.9rem;
    color: #495057;
    background: #ffffff;
    padding: 0.5rem 0.5rem;
    border: 1px solid #ced4da;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s,
        box-shadow 0.2s;
    appearance: none;
    border-radius: 3px;
    padding-left: 2em !important;
    padding: 3%;
}
.p-input-icon-left.menu-search .pi-search {
    top: .7rem !important;
    
}

.menu-search {
    position: relative;
    display: block;
    padding: 10px;
    padding-top: 0;
}

.menu-search .pi-search {
    position: absolute;
    left: 16px;
    top: 10px;
    color: #6c757d;
    font-size: 16px;
}

.mt-10 {
    margin-top: 10px !important;
}

.company-logo {
    width: 135px;
    padding-left: 15px;
    float: right;
}

@media (max-width: 359px) {
    .company-logo {
        width: 105px !important;
    }
}

@media (max-width: 576px) {
    .layout-wrapper .topbar .topbar-left {
        width: 165px;
    }
    .layout-wrapper .topbar .topbar-right #menu-button {
        left: 150px;
    }
    .company-logo {
        width: 130px;
        padding-left: 25px;
        float: none;
        margin-right: 0px !important;
    }
}

@media (max-width: 1024px) {
    .company-logo {
        margin-right: 50px;
    }
}
/* logo loader design start */
.sk-three-strings {
    display: none !important;
}

.ngx-foreground-spinner {
    /* background-image: url("./assets/layout/client/company-loading.gif"); */
    /* background-image: url("./assets/layout/client/company-loading.gif"); */
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100px !important;
    height: 100px !important;
}

.ngx-overlay {
    background-color: #ffffff94 !important;
}
/* logo loader design end */

/* Global API loading overlay — brand-mark loader from the wait-for-auth page,
   sized down for use during page navigation / API calls. Keeps a soft brand-tinted
   wash over the page so the user sees the system is busy without a heavy backdrop. */
.global-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(31, 14, 61, 0.08);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9999;
  display: grid;
  place-items: center;
  pointer-events: all;
}

.global-loading-overlay--passive {
  pointer-events: none;
}

.global-loading-mark {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #1f0e3d 0%, #4c1d95 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto', 'Helvetica Neue', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0;
  position: relative;
  box-shadow: 0 12px 32px rgba(76, 29, 149, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
/* Pulsing brand-purple dot in the corner — same identity as the loading page */
.global-loading-mark::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #a855f7;
  top: -3px;
  right: -3px;
  box-shadow: 0 0 0 3px #ffffff, 0 0 14px #8b5cf6;
  animation: global-loader-pulse 2s ease-in-out infinite;
}
/* Spinning ring around the mark */
.global-loading-mark::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 2px solid transparent;
  border-top-color: #8b5cf6;
  border-right-color: #8b5cf6;
  border-radius: 18px;
  animation: global-loader-spin 1.4s linear infinite;
}

@keyframes global-loader-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.2); }
}
@keyframes global-loader-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .global-loading-mark::before,
  .global-loading-mark::after { animation-duration: 0.01ms !important; }
}
/* Global API loading overlay end */

.modal-min-height {
    min-height: 700px !important;
}

.tree-node .pi-chevron-down {
    display: none !important;
}

.unselect-row > .p-highlight {
    pointer-events: none !important;
}

.selected-tree-node {
    background-color: #96eaf3 !important;
    color: #ffffff;
}
.autocomplete .p-autocomplete-list li {
    color: #000;
}
.autocomplete .p-autocomplete-list li:hover {
    color: #fff;
}
::-webkit-scrollbar {
    height: 8px !important;
}
.seperation-border {
    margin-top: 5px;
    border-bottom: solid 1px #ccc;
    padding-top: 5px;
}

.disabled-date {
    color: #ffffff !important;
    background-color: #fb2f2f !important;
}

.holiday-date {
    background-color: #fbff00 !important;
}

.demobilized-date {
    background-color: #00fff3 !important;
}

.weekend-date {
    background-color: #e5e5e5 !important;
}
.absent-data {
    color: #ffffff !important;
    background-color: #fb2f2f !important;
}

.indicate-box {
    float: left;
    height: 20px;
    width: 20px;
    margin-right: 5px;
    border: 1px solid black;
    clear: both;
    border-radius: 20%;
}

.overflow-timesheet {
    overflow-x: auto !important;
}

.raw-box {
    position: absolute;
    bottom: 0;
    right: 0;
    float: right;
    height: 10px;
    width: 10px;
    clear: both;
}

.raw-timesheet {
    background-color: var(--brand-500, #a855f7) !important;
}

.official-timesheet {
    background-color: #28a745 !important;
}

.missing-timesheet {
    background-color: #6c757d !important;
}
.discrepancy-timesheet {
    background-color: #343a40 !important;
}
/* .topbar-calender {
    width: 1.8em !important;
} */
/*
.timesheetTable
    .p-datatable-frozen-view
    .p-datatable-scrollable-table
    thead
    th:first-child,
.timesheetTable
    .p-datatable-frozen-view
    .p-datatable-tbody
    tbody
    td:first-child,
.timesheetTable
    .p-datatable-frozen-view
    .p-datatable-scrollable-table
    thead
    th:nth-child(2),
.timesheetTable
    .p-datatable-frozen-view
    .p-datatable-tbody
    tbody
    td:nth-child(2) {
    width: 50px !important;
}

.timesheetTable
    .p-datatable-frozen-view
    .p-datatable-scrollable-table
    thead
    th:nth-child(3),
.timesheetTable
    .p-datatable-frozen-view
    .p-datatable-tbody
    tbody
    td:nth-child(3),
.timesheetTable
    .p-datatable-frozen-view
    .p-datatable-scrollable-table
    thead
    th:nth-child(4),
.timesheetTable
    .p-datatable-frozen-view
    .p-datatable-tbody
    tbody
    td:nth-child(5),
.timesheetTable
    .p-datatable-frozen-view
    .p-datatable-scrollable-table
    thead
    th:nth-child(5),
.timesheetTable
    .p-datatable-frozen-view
    .p-datatable-tbody
    tbody
    td:nth-child(4) {
    width: 100px !important;
}

.timesheetTable
    .p-datatable-frozen-view
    .p-datatable-scrollable-table
    thead
    th:nth-child(6),
.timesheetTable
    .p-datatable-frozen-view
    .p-datatable-tbody
    tbody
    td:nth-child(6) {
    width: 125px !important;
}

.timesheetTable
    .p-datatable-frozen-view
    .p-datatable-scrollable-table
    thead
    th:nth-child(7),
.timesheetTable
    .p-datatable-frozen-view
    .p-datatable-tbody
    tbody
    td:nth-child(7),
.timesheetTable
    .p-datatable-frozen-view
    .p-datatable-scrollable-table
    thead
    th:nth-child(8),
.timesheetTable
    .p-datatable-frozen-view
    .p-datatable-tbody
    tbody
    td:nth-child(8) {
    width: 90px !important;
} */

.timesheetTable .p-highlight {
    background-color: #ffa5a5 !important;
}
/*
.timesheetTable .p-datatable-frozen-view .p-datatable-scrollable-table thead th,
.timesheetTable .p-datatable-frozen-view .p-datatable-tbody tbody td {
    width: 125px !important;
} */

.timesheetTable .p-datatable-unfrozen-view .p-datatable-scrollable-table thead th,
.timesheetTable .p-datatable-unfrozen-view .p-datatable-scrollable-table tbody td {
    width: 55px !important;
}

.invoiceTable .p-datatable-scrollable-table thead th,
.invoiceTable .p-datatable-scrollable-table tbody td {
    width: 100px !important;
    font-size: 11px;
}

.invoiceReportTable .p-datatable-scrollable-table thead th,
.invoiceReportTable .p-datatable-scrollable-table tbody td {
    width: 100px !important;
    font-size: 11px;
}

.invoiceReportTable .p-datatable-scrollable-footer tfoot td {
    width: 100px;
    font-size: 11px;
}

.custom-footer td:first-child {
    width: 700px;
    text-align: right;
}

.custom-footer td:not(:first-child) {
    width: 100px;
}

/* .invoiceTable .p-datatable-scrollable-table {
    overflow-x: scroll;
} */

.custom-frozen-footer td:first-child {
    width: 715px;
    text-align: right;
}

.custom-frozen-footer td:nth-child(2) {
    width: 80px;
}

.custom-scroll-footer td {
    width: 100%;
    height: 30px;
}
body .p-datepicker .p-datepicker-header .p-datepicker-next-button {
    width: 1.8em !important;
}
body .p-datepicker .p-datepicker-header .p-datepicker-prev-button {
    width: 1.8em !important;
}
.top-bar-calender {
    position: relative;
}

.custom-toggle > .p-togglebutton.p-highlight,
.custom-toggle > .p-togglebutton.p-highlight.p-focus {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

.custom-toggle > .p-button-icon p-button-icon-left::after {
    content: "\e909";
}

.fullwidth-date .ng-pristine {
    width: 100% !important;
}

.disabled-form {
    pointer-events: none !important;
}

.table-center-text {
    text-align: center;
}

.fullwidth-fileupload .box-container,
.fullwidth-fileupload .box {
    width: 100% !important;
}

.outlineButton button {
    background-color: transparent;
    color: #2196f3;
    border: 1px solid;
}

.rateInputGroup input {
    border-bottom-left-radius: 0;
    height: 35px;
    border-top-left-radius: 0;
}
.table-height .p-datatable-tbody {
    min-height: 500px !important;
}
.supplier-table-height .p-datatable-tbody {
    min-height: 350px !important;
}

.total-count {
    padding: 10px;
    border-radius: 5px;
    background: #cde0fd;
    color: #1a50a2;
}

@media (max-width: 1024px) {
    .timesheet-cardbody {
        overflow-x: auto;
    }
    .timesheet-cardbody .p-datatable-unfrozen-view {
        width: auto !important;
    }
}
.email-text .p-button-label {
    padding-left: 40px !important;
}

.emp-mob-ptable .p-datatable-tbody {
    min-height: 250px !important;
}

.mob-date-issue {
    background: #0522efb5 !important;
    color: #ffffff !important;
}
.eq-card-outer {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    position: relative;
    width: 100%;
    padding: 0.5em;
}
.eq-card-list {
    display: flex;
    flex-wrap: wrap;
}
.over-flow-hidden {
    overflow: hidden;
}
.d-s-table table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

.d-s-table th,
.d-s-table td {
    text-align: left;
    padding: 10px;
}
.d-s-table table thead th {
    background: #f2f2f2;
}
.d-s-table table tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}
/* .d-s-table table tbody tr{
      cursor: pointer;
  } */
.back-link {
    font-size: 14px;
    color: #1235bd;
    cursor: pointer;
}
.overlow-unset-popup .p-dialog-content {
    overflow: unset !important;
}

.erp-dash-table .p-datatable .p-datatable-thead > tr > th,
.erp-dash-table .p-datatable .p-datatable-tfoot > tr > td {
    border: 0;
}
.erp-dash-table .d-s-table table {
    border: 0;
}
.erp-dash-table .d-s-table table thead th {
    background: #e5defd;
    color: #382a69;
}
.erp-dash-table .p-datatable .p-datatable-tbody > tr > td {
    border: 0;
}
.erp-dash-table .p-datatable-scrollable-footer {
    border: 0;
}

.svg-icon {
    filter: invert(48%) sepia(0%) saturate(1563%) hue-rotate(173deg)
        brightness(95%) contrast(87%);
}
.ripplelink:hover .svg-icon {
    filter: invert(13%) sepia(47%) saturate(2328%) hue-rotate(206deg)
        brightness(95%) contrast(105%);
}
@media print {
    @page {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    #invoice-content {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
}

.customer-evaluation-questionnaire-dialogue .p-dialog-content {
    min-height: 60vh !important;
}

.reportDiv .p-multiselect-overlay {
    min-width: 50vw !important;
}
.NgxEditor {
    min-height: 240px !important;
}

/* faizal */

.p-datatable .p-datatable-thead > tr > th {
    font-size: 13px;
    padding: 0.5rem;
    text-align: center;
}
.p-datatable .p-datatable-tbody > tr > td {
    font-size: 13px;
    padding: 0.5rem;
}
.p-inputtext {
    width: 100%;
    padding: 0.5rem;
}
.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a {
    padding: 0.5rem;
    font-size: 13px;
}
.p-button {
    padding: 0.5rem;
    font-size: 0.75rem;
}
.p-tab {
    padding: 0.8rem;
}
.p-input-icon-left > i:first-of-type {
    left: 1.2rem;
    top: 1.23rem;
}

body .p-inputtext,
.p-multiselect {
    width: 100%;
}

.p-datepicker,
.p-autocomplete {
    width: 100%;
}
.p-select{
     width: 100% !important;


}
.p-select .p-select-label.p-placeholder {
    padding: 0.35rem;
}
.p-element .p-inputtext,
.p-multiselect .p-multiselect-label {
    padding: 0.35rem;
    font-size: 13px;
}
.p-datepicker {
    height: 34px;
}
.p-multiselect-label-container {
    width: 100%;
}
.p-dialog {
    max-width: 100%;
}
.p-checkbox .p-checkbox-box .p-checkbox-icon {
    font-size: 10px !important;
}

/* PrimeNG checkbox alignment baseline */
.field-checkbox,
.p-field-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

p-checkbox,
.p-checkbox {
    vertical-align: middle;
}

p-checkbox + label,
.p-checkbox + label,
.field-checkbox > label,
.p-field-checkbox > label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
    line-height: 1.2;
}

/* afrid */
.checkbox-round {
  position: relative;
}

.checkbox-round label {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    width: 2rem;
    height: 2rem;
    top: -13px;
}

.checkbox-round label:after {
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  content: "";
  height: 6px;
  left: 8px;
  opacity: 0;
  position: absolute;
  top: 10px;
  transform: rotate(-45deg);
  width: 12px;
}

.checkbox-round input[type="checkbox"] {
  visibility: hidden;
}

.checkbox-round input[type="checkbox"]:checked + label {
  background-color: #66bb6a;
  border-color: #66bb6a;
}

.checkbox-round input[type="checkbox"]:checked + label:after {
  opacity: 1;
}

/* faizal */
.p-button.p-button-icon-only.p-button-rounded {
    width: 2rem;
    height: 2rem;
}
.p-button.p-button-icon-only {
    width: 2rem;
    height: 2.1rem;
}
.p-button.p-component {
    font-family: Arial, Helvetica, sans-serif;
}

.p-paginator .p-select .p-select-label {
    /* line-height: 33px; */

}

#LegalDocuments .p-tabs-scrollable {
    width: calc(100% - 280px);
}

/* Abhirag */

label {
    font-size: 14px;
}

.p-component {
    font-size: 13px;
}
.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
    padding: 3px;
}
.p-autocomplete
    .p-autocomplete-multiple-container
    .p-autocomplete-input-token
    input {
    font-size: 14px !important;
}
body.white .layout-wrapper .topbar .topbar-left {
    padding: 15px;
    height: 60px;
    width: 235px;
    float: left;
    background-color: white;
    box-shadow: none;
    background-image: none;
}
body.white .layout-wrapper .topbar .topbar-right {
    background-color: white;
    box-shadow: none;
    background-image: none;
}

body.white .layout-wrapper .topbar-items > li .topbar-icon,
body.white .layout-wrapper .topbar .topbar-right #topbar-menu-button {
    color: #117490;
}
.p-select-panel .p-select-items .p-select-item {
    font-size: 13px;
    white-space: inherit;
}

.p-datatable-scrollable-table > .p-datatable-thead {
    z-index: 3 !important;
    position: static ;
}
.p-datatable-scrollable-table > .p-datatable-tfoot {
    z-index: 3 !important;
}
.p-dialog-content.p-component-content:has(.p-confirmdialog-message) {
    overflow: scroll !important;
}

.phoneCodeClass .p-select .p-select-trigger {
    width: 2rem !important;
}

.phoneCodeClass .p-select .p-select-label {
    font-size: 15px;
}
.p-datatable {
    table-layout: auto;
}
.p-datatable-table {
        border-spacing: 2px !important;
    table-layout: fixed;
    border-bottom: 1px solid #dcdcdc !important;
}
.table-lo .p-datatable-table {
    table-layout: auto !important;
}

#tableAddTimeSheet .p-datatable .p-datatable-tbody tr td {
    background: #fff;
}
body.dark-mode #tableAddTimeSheet .p-datatable .p-datatable-tbody tr td {
    background: #141c26;
}
#tableAddTimeSheet .p-datatable .p-datatable-thead > tr > th:first-child,
#tableAddTimeSheet .p-datatable .p-datatable-tbody > tr > td:first-child,
#tableAddTimeSheet .p-datatable-tfoot > tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
}

#tableAddTimeSheet .p-datatable .p-datatable-thead > tr > th:nth-child(2),
#tableAddTimeSheet .p-datatable .p-datatable-tbody > tr > td:nth-child(2) {
    position: sticky;
    left: 50px;
    z-index: 1;
}

#tableAddTimeSheet .p-datatable .p-datatable-thead > tr > th:nth-child(3),
#tableAddTimeSheet .p-datatable .p-datatable-tbody > tr > td:nth-child(3) {
    position: sticky;
    left: 100px;
    z-index: 1;
}

#tableAddTimeSheet .p-datatable .p-datatable-thead > tr > th:nth-child(4),
#tableAddTimeSheet .p-datatable .p-datatable-tbody > tr > td:nth-child(4) {
    position: sticky;
    left: 190px;
    z-index: 1;
}

#tableAddTimeSheet .p-datatable .p-datatable-thead > tr > th:nth-child(5),
#tableAddTimeSheet .p-datatable .p-datatable-tbody > tr > td:nth-child(5) {
    position: sticky;
    left: 270px;
    z-index: 1;
}

#tableAddTimeSheet .p-datatable .p-datatable-thead > tr > th:nth-child(6),
#tableAddTimeSheet .p-datatable .p-datatable-tbody > tr > td:nth-child(6) {
    position: sticky;
    left: 360px;
    z-index: 1;
}

#tableAddTimeSheet .p-datatable .p-datatable-thead > tr > th:nth-child(7),
#tableAddTimeSheet .p-datatable .p-datatable-tbody > tr > td:nth-child(7) {
    position: sticky;
    left: 510px;
    z-index: 1;
}

#tableAddTimeSheet .p-datatable .p-datatable-thead > tr > th:nth-child(8),
#tableAddTimeSheet .p-datatable .p-datatable-tbody > tr > td:nth-child(8) {
    position: sticky;
    left: 610px;
    z-index: 1;
}

#tableAddTimeSheet .p-datatable .p-datatable-thead > tr > th:nth-child(9),
#tableAddTimeSheet .p-datatable .p-datatable-tbody > tr > td:nth-child(9) {
    position: sticky;
    left: 690px;
    z-index: 1;
}

#tableAddTimeSheet .p-datatable .p-datatable-thead > tr > th:nth-child(10),
#tableAddTimeSheet .p-datatable .p-datatable-tbody > tr > td:nth-child(10) {
    position: sticky;
    left: 765px;
    z-index: 1;
}

#tableAddTimeSheet .p-datatable .p-datatable-thead > tr > th:nth-child(11) {
    position: sticky;
    left: 890px;
    z-index: 4;
}
#tableAddTimeSheet .p-datatable .p-datatable-tbody > tr > td:nth-child(11),
#tableAddTimeSheet .p-datatable-tfoot > tr > td:nth-child(2) {
    position: sticky;
    left: 890px;
    z-index: 1;
}

#manualTimeSheet tr td {
    background: #fff;
}
#detailedTimeSheet tr td {
    background: #fff;
}
body.dark-mode #manualTimeSheet tr td {
    background: #141c26;
}
#manualTimeSheet .p-datatable-tfoot > tr > td:nth-child(2) {
    position: sticky;
    left: 591px !important;
    z-index: 2 !important;
}

body.theme-dark #tableAddTimeSheet1 tr td {
    background: #141c26 !important;
}
.p-dialog .p-dialog-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.p-dialog-header{
    font-weight: 700;
    font-size: 1.25rem;

}
.p-tabs .p-tabpanels {
    padding: 1.25rem 0px !important;
}

.p-datepicker:not(.p-datepicker-inline) {
    /* width: 300px;
    min-width: 300px !important; */
    width: 100%;
}
.p-datepicker table td {
    padding: 0px !important;
}
.p-datepicker .p-datepicker-header {
    padding: 0px;
}
.p-datepicker table td > span {
    width: 2rem;
    height: 2rem;
}
.p-datepicker table {
    font-size: 0.8rem;
}
.p-datepicker table th {
    font-weight: 500;
    padding: 0px;
}
#EmployeeStrength .p-button .p-button-label {
    font-size: 0.7rem;
}
.light-line {
    border: none;
    height: 1px;
    background-color: #ccc;
}
.p-datepicker table th {
    font-weight: 500;
    padding: 0px;
}
#subscriptionId .p-password {
    width: 100% !important;
}
.p-card .p-card-title {
    font-size: 1.2rem !important;
}

#transport .p-datatable .p-datatable-tbody tr td {
    background: #fff;
}
body.dark-mode #transport .p-datatable .p-datatable-tbody tr td {
    background: #141c26;
}
#transport .p-datatable .p-datatable-thead > tr > th:first-child,
#transport .p-datatable .p-datatable-tbody > tr > td:first-child,
#transport .p-datatable-tfoot > tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
}

#transport .p-datatable .p-datatable-thead > tr > th:nth-child(2),
#transport .p-datatable .p-datatable-tbody > tr > td:nth-child(2) {
    position: sticky;
    left: 50px;
    z-index: 1;
}

#transport .p-datatable .p-datatable-thead > tr > th:nth-child(3),
#transport .p-datatable .p-datatable-tbody > tr > td:nth-child(3) {
    position: sticky;
    left: 100px;
    z-index: 1;
}

#transport .p-datatable .p-datatable-thead > tr > th:nth-child(4),
#transport .p-datatable .p-datatable-tbody > tr > td:nth-child(4) {
    position: sticky;
    left: 190px;
    z-index: 1;
}

#transport .p-datatable .p-datatable-thead > tr > th:nth-child(5),
#transport .p-datatable .p-datatable-tbody > tr > td:nth-child(5) {
    position: sticky;
    left: 270px;
    z-index: 1;
}

#transport .p-datatable .p-datatable-thead > tr > th:nth-child(6),
#transport .p-datatable .p-datatable-tbody > tr > td:nth-child(6) {
    position: sticky;
    left: 450px;
    z-index: 1;
}

#transport .p-datatable .p-datatable-thead > tr > th:nth-child(7),
#transport .p-datatable .p-datatable-tbody > tr > td:nth-child(7) {
    position: sticky;
    left: 630px;
    z-index: 1;
}

#transport .p-datatable .p-datatable-thead > tr > th:nth-child(8),
#transport .p-datatable .p-datatable-tbody > tr > td:nth-child(8) {
    position: sticky;
    left: 705px;
    z-index: 1;
}

#transport .p-datatable .p-datatable-thead > tr > th:nth-child(9),
#transport .p-datatable .p-datatable-tbody > tr > td:nth-child(9) {
    position: sticky;
    left: 780px;
    z-index: 1;
}

#transport .p-datatable .p-datatable-thead > tr > th:nth-child(10),
#transport .p-datatable .p-datatable-tbody > tr > td:nth-child(10) {
    position: sticky;
    left: 850px;
    z-index: 1;
}

#transport .p-datatable-tfoot > tr > td:nth-child(2) {
    position: sticky;
    left: 985px;
    z-index: 1;
}
.p-treetable .p-treetable-tbody > tr > td {
    text-align: left;
    border: 1px solid #dee2e6;
    border-width: 0 0 1px 0;
    padding: 0;
}
.p-treetable .p-treetable-tfoot > tr > td {
    text-align: left;
    padding: 0.5em 0.5rem;
    border: 1px solid #dee2e6;
    border-width: 0 0 1px 0;
    font-weight: 700;
    color: #343a40;
    background: #f8f9fa;
}
.p-treetable .p-treetable-thead > tr > th {
    text-align: left;
    padding: 0.5rem 0.5rem;
    border: 1px solid #dee2e6;
    border-width: 0 0 1px 0;
    font-weight: 700;
    color: #343a40;
    background: #f8f9fa;
    transition: box-shadow 0.2s;
}
#chatbot .p-menubar {
    padding: 0.2rem !important;
}

#chatbot .p-button {
    padding: 0.4rem !important;
}

.small-input-switch .p-toggleswitch {
    height: 1.2rem;
    width: 2.4rem;
}

.small-input-switch .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider::before {
    transform: translateX(1rem);
}

.small-input-switch .p-toggleswitch .p-toggleswitch-slider::before {
    width: 0.9rem;
    height: 0.9rem;
    margin-top: -0.46rem;
}

#pDroppableArea .p-input-icon-left > .p-inputtext {
    padding-left: 2.5rem;
}
.cText p{ margin: 0px; padding: 0px;}


/* .maximizable{ height: calc(100vh - 275px); } */
.p-dialog-maximized .p-datatable-wrapper{ max-height:calc(100vh - 205px) !important}

.app-card-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-left: auto;
}

.app-action-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.app-form-grid .grid.form-group {
    row-gap: 0.5rem;
}

.app-form-grid .p-inputtext,
.app-form-grid .p-inputtext,
.app-form-grid .p-inputtextarea,
.app-form-grid .p-autocomplete,
.app-form-grid .p-datepicker,
.app-form-grid .p-select,
.app-form-grid .p-select,
.app-form-grid .p-inputnumber,
.app-form-grid .p-inputnumber-input {
    width: 100%;
}

.app-form-grid p-autocomplete,
.app-form-grid p-datepicker {
    display: flex;
    width: 100%;
}

/* PrimeNG v19+ p-select / p-select host element IS the flex container
   for label + clear icon + chevron. Forcing display:block stacks the
   chevron onto a second row (issues #6535, #6536). */
.app-form-grid p-select,
.app-form-grid p-select {
    display: flex;
    width: 100%;
}

.app-form-grid .p-autocomplete .p-inputtext,
.app-form-grid .p-datepicker .p-inputtext {
    width: 100%;
}

.app-min-field-125 {
    width: 100%;
    min-width: 125px;
}

.app-data-table .p-datatable-thead > tr > th,
.app-data-table .p-datatable-tbody > tr > td {
    vertical-align: middle;
}

.app-data-table .p-datatable-thead .p-inputtext,
.app-data-table .p-datatable-thead .p-inputtext,
.app-data-table .p-datatable-thead .p-datepicker,
.app-data-table .p-datatable-thead .p-select,
.app-data-table .p-datatable-thead .p-select {
    width: 100%;
}

.app-data-table .p-datatable-thead p-datepicker {
    display: flex;
    width: 100%;
}

.app-data-table .p-datatable-thead p-select,
.app-data-table .p-datatable-thead p-select {
    display: flex;
    width: 100%;
}

.app-table-caption {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.app-table-caption .app-table-search-input {
    width: min(100%, 28rem);
}

.p-textarea {
    width: 100%;
}



/*infinite scroll custom state*/
/* ===== ng-select global fixes ===== */

/* ===== Scoped ng-select fixes (dialog only) ===== */

 body.ng-select-fix-active .ng-dropdown-panel {
  z-index: 3000 !important;
  max-height: 260px !important;
  overflow-y: auto;
}

.p-hidden{
    display: none !important;
}

/* table header scroll */



/* ===== TIMESHEET STICKY HEADER (SCOPED) ===== */

.ts-sticky-grid
  .p-datatable-scrollable-table
  > .p-datatable-thead {
  position: sticky !important;
  top: 0;
  z-index: 50;
  background: #ffffff;
}

/* Filter / second header row */
.ts-sticky-grid
  .p-datatable-thead
  > tr:nth-child(2) {
  position: sticky;
  top: 45px;
  z-index: 49;
  background: #ffffff;
}

/* Frozen column headers */
.ts-sticky-grid
  .p-datatable-thead
  .p-frozen-column {
  z-index: 60 !important;
  background: #ffffff;
}

/* ===== Migrated form-control alignment baseline =====
   PrimeNG 21 renders p-datepicker, p-select, p-multiselect, p-autocomplete,
   p-inputnumber and p-password as flex host controls. Legacy migration CSS
   still treated some of those hosts as blocks, which made date icons, trigger
   buttons and textboxes wrap or render with mismatched heights in module
   forms and dialogs. Keep this final layer after the old global rules. */
:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) {
    --app-form-control-height: 34px;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(.form-group, .field, .p-field),
:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(.grid, .app-form-grid, .app-form-grid),
:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) [class*="col-"] {
    min-width: 0;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(.form-group, .field, .p-field) {
    margin-bottom: 12px;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(.form-group, .field, .p-field) > label,
:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) [class*="col-"] > label {
    display: inline-block;
    margin-bottom: 4px;
    line-height: 1.25;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) label.d-block {
    display: block;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) label:has(> input),
:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) label:has(> p-checkbox),
:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) label:has(> p-radiobutton),
:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) label:has(> .p-checkbox),
:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) label:has(> .p-radiobutton) {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) label:has(> input) input {
    flex: 0 0 auto;
    width: auto;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    input.form-control,
    select.form-control,
    textarea.form-control,
    input[pInputText],
    textarea[pInputTextarea],
    textarea[pTextarea],
    .p-inputtext,
    .p-inputtext,
    .p-inputtext,
    p-datepicker,
    p-datePicker,
    .p-datepicker,
    p-select,
    p-select,
    .p-select,
    .p-select,
    p-multiselect,
    p-multiSelect,
    .p-multiselect,
    p-treeselect,
    p-treeSelect,
    .p-treeselect,
    p-autocomplete,
    p-autoComplete,
    .p-autocomplete,
    p-inputnumber,
    .p-inputnumber,
    p-password,
    .p-password
) {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    p-datepicker,
    p-datePicker,
    .p-datepicker,
    p-select,
    p-select,
    .p-select,
    .p-select,
    p-multiselect,
    p-multiSelect,
    .p-multiselect,
    p-treeselect,
    p-treeSelect,
    .p-treeselect,
    p-autocomplete,
    p-autoComplete,
    .p-autocomplete,
    p-inputnumber,
    .p-inputnumber,
    p-password,
    .p-password
) {
    display: flex !important;
    align-items: stretch;
    min-width: 0;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    input.form-control,
    select.form-control,
    input[pInputText],
    .p-inputtext,
    .p-inputtext,
    .p-inputtext,
    .p-select,
    .p-select,
    .p-multiselect,
    .p-treeselect,
    .p-autocomplete,
    .p-datepicker,
    .p-inputnumber,
    .p-password
) {
    min-height: var(--app-form-control-height);
    height: var(--app-form-control-height);
    line-height: 1.4;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    textarea,
    textarea.form-control,
    textarea[pInputTextarea],
    textarea[pTextarea],
    textarea.p-inputtext,
    textarea.p-inputtext,
    textarea.p-inputtext,
    .p-inputtextarea
) {
    min-height: 80px;
    height: auto;
    line-height: 1.4;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    .p-datepicker-input,
    .p-datepicker .p-inputtext,
    .p-autocomplete-input,
    .p-autocomplete .p-inputtext,
    .p-inputnumber-input,
    .p-password .p-inputtext
) {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    height: 100%;
    min-height: var(--app-form-control-height);
    box-sizing: border-box;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(.p-select-label, .p-multiselect-label) {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 100%;
    line-height: 1.4;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) .p-multiselect-label-container {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    .p-datepicker-dropdown,
    .p-select-dropdown,
    .p-multiselect-dropdown,
    .p-treeselect-dropdown
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--app-form-control-height);
    width: var(--app-form-control-height);
    min-width: var(--app-form-control-height);
    height: var(--app-form-control-height);
    min-height: var(--app-form-control-height);
    padding: 0;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    p-checkbox,
    .p-checkbox,
    p-radiobutton,
    .p-radiobutton
) {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    flex: 0 0 auto;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    p-checkbox + label,
    .p-checkbox + label,
    p-radiobutton + label,
    .p-radiobutton + label,
    .field-checkbox > label,
    .p-field-checkbox > label,
    .field-radiobutton > label,
    .p-field-radiobutton > label
) {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
    line-height: 1.25;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    .field-checkbox,
    .p-field-checkbox,
    .field-radiobutton,
    .p-field-radiobutton
) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--app-form-control-height);
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) .p-datatable .p-datatable-thead > tr:nth-child(2) > th {
    --app-form-control-height: 30px;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) .p-datatable .p-datatable-thead > tr:nth-child(2) > th :is(
    input,
    .p-inputtext,
    .p-select,
    .p-select,
    .p-multiselect,
    .p-datepicker,
    p-datepicker
) {
    min-height: var(--app-form-control-height);
    height: var(--app-form-control-height);
    font-size: 12.5px;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(.alert.alert-danger, .invalid-feedback, .field-error, small.p-error) {
    display: block;
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 1.25;
}

/* ===== PrimeNG 21 shared control hardening =====
   This second pass targets the current PrimeNG 21 DOM classes after
   dependency alignment. It keeps host components, inner inputs, trigger
   buttons, clear icons and placeholder labels on the same vertical rhythm
   across migrated module forms, dialogs and dense table cells. */
:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) {
    --app-form-control-border: #d7dce4;
    --app-form-control-border-hover: #b9c1ce;
    --app-form-control-radius: 4px;
    --app-form-control-font-size: 13px;
    --app-form-control-padding-x: 0.55rem;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    input.form-control,
    select.form-control,
    textarea.form-control,
    input[pInputText],
    textarea[pTextarea],
    textarea[pInputTextarea],
    .p-inputtext,
    .p-textarea,
    .p-select,
    .p-select,
    .p-multiselect,
    .p-treeselect,
    .p-autocomplete,
    .p-datepicker,
    .p-inputnumber,
    .p-password,
    .p-inputtext,
    .p-inputtext
) {
    border-radius: var(--app-form-control-radius);
    font-size: var(--app-form-control-font-size);
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    input.form-control,
    select.form-control,
    input[pInputText],
    .p-inputtext,
    .p-autocomplete-input,
    .p-datepicker-input,
    .p-inputnumber-input,
    .p-password-input,
    .p-inputtext,
    .p-inputtext
) {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--app-form-control-padding-x);
    padding-right: var(--app-form-control-padding-x);
    display: inline-flex;
    align-items: center;
    border-color: var(--app-form-control-border);
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    .p-select,
    .p-select,
    .p-multiselect,
    .p-treeselect,
    .p-autocomplete,
    .p-datepicker,
    .p-inputnumber,
    .p-password
):not(.p-disabled):hover {
    border-color: var(--app-form-control-border-hover);
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    .p-select-label,
    .p-multiselect-label,
    .p-treeselect-label,
    .p-autocomplete-multiple-container,
    .p-placeholder
) {
    font-size: var(--app-form-control-font-size);
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    .p-datepicker-dropdown,
    .p-autocomplete-dropdown,
    .p-select-dropdown,
    .p-select-trigger,
    .p-multiselect-dropdown,
    .p-treeselect-dropdown,
    .p-inputnumber-button,
    .p-password-toggle-mask-icon
) {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--app-form-control-height);
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    .p-password-toggle-mask-icon
) {
    margin-top: 0;
    transform: translateY(-50%);
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    .p-select-clear-icon,
    .p-multiselect-clear-icon,
    .p-treeselect-clear-icon
) {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    min-height: 0;
    margin: 0;
    position: static !important;
    inset-inline-end: auto !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    .p-autocomplete-clear-icon,
    .p-datepicker-clear-icon
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    min-height: 0;
    transform: none !important;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    .p-inputnumber-stacked .p-inputnumber-button-group,
    .p-inputnumber-button-group
) {
    height: var(--app-form-control-height);
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    .p-inputnumber-stacked .p-inputnumber-button,
    .p-inputnumber-horizontal .p-inputnumber-button,
    .p-inputnumber-vertical .p-inputnumber-button
) {
    min-height: 0;
    height: auto;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    .p-disabled,
    .p-component:disabled,
    input:disabled,
    select:disabled,
    textarea:disabled,
    input[readonly],
    textarea[readonly]
) {
    opacity: 1;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    input:disabled,
    select:disabled,
    textarea:disabled,
    input[readonly],
    textarea[readonly],
    .p-disabled,
    .p-select.p-disabled,
    .p-multiselect.p-disabled,
    .p-datepicker.p-disabled,
    .p-autocomplete.p-disabled,
    .p-inputnumber.p-disabled
) {
    background-color: #f8fafc;
    color: #64748b;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    .ng-invalid.ng-dirty:not(form),
    .ng-invalid.ng-touched:not(form),
    .p-invalid,
    .is-invalid
) {
    border-color: #dc3545;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) .p-datatable :is(
    .p-inputtext,
    .p-select,
    .p-select,
    .p-multiselect,
    .p-datepicker,
    .p-autocomplete,
    .p-inputnumber
) {
    --app-form-control-height: 30px;
    --app-form-control-font-size: 12.5px;
}

/* ===== PrimeNG 21 form/table/overlay normalization =====
   PrimeNG 21 controls are styled by @primeuix/themes. This layer keeps
   modern controls aligned inside app-owned grids, editable tables and dialogs. */
:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    input.form-control,
    input[pInputText],
    input.p-inputtext,
    .p-datepicker-input,
    .p-autocomplete-input,
    .p-inputnumber-input,
    .p-password-input,
    .p-inputtext:not(textarea),
    .p-inputtext:not(textarea)
) {
    display: block;
    line-height: calc(var(--app-form-control-height) - 2px);
    text-align: inherit;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    textarea.form-control,
    textarea[pTextarea],
    textarea[pInputTextarea],
    textarea.p-inputtext,
    textarea.p-textarea,
    textarea.p-inputtext,
    textarea.p-inputtext
) {
    display: block;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    line-height: 1.35;
    resize: vertical;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(.app-form-grid, .app-form-grid, .app-form-grid) :is(
    p-select,
    p-multiselect,
    p-autocomplete,
    p-datepicker,
    p-inputnumber,
    p-password,
    .p-select,
    .p-select,
    .p-multiselect,
    .p-autocomplete,
    .p-datepicker,
    .p-inputnumber,
    .p-password
) {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    .p-select-label,
    .p-select-label,
    .p-multiselect-label,
    .p-treeselect-label
) {
    padding-left: var(--app-form-control-padding-x);
    padding-right: var(--app-form-control-padding-x);
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    .p-multiselect-label,
    .p-autocomplete-multiple-container
) {
    min-height: calc(var(--app-form-control-height) - 2px);
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) .p-autocomplete-multiple-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    .p-autocomplete-chip,
    .p-multiselect-chip,
    .p-chip
) {
    max-width: 100%;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    p-toggleswitch,
    .p-toggleswitch,
    p-togglebutton,
    .p-togglebutton
) {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    vertical-align: middle;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    p-togglebutton,
    .p-togglebutton
) {
    width: auto;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) :is(
    p-toggleswitch,
    .p-toggleswitch
) {
    min-height: var(--app-form-control-height);
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) .p-datatable {
    --app-table-control-height: 30px;
    --app-table-control-font-size: 12.5px;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) .p-datatable :is(
    .p-datatable-thead > tr > th,
    .p-datatable-tbody > tr > td,
    .p-datatable-tfoot > tr > td
) {
    vertical-align: middle;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) .p-datatable :is(
    .p-column-filter,
    .p-column-filter-element,
    p-celleditor,
    .p-cell-editor,
    .p-cell-editing
) {
    width: 100%;
    min-width: 0;
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) .p-datatable :is(
    .p-column-filter input,
    .p-column-filter .p-inputtext,
    .p-column-filter .p-select,
    .p-column-filter .p-select,
    .p-column-filter .p-multiselect,
    .p-column-filter .p-datepicker,
    .p-column-filter .p-autocomplete,
    .p-cell-editing input,
    .p-cell-editing .p-inputtext,
    .p-cell-editing .p-select,
    .p-cell-editing .p-select,
    .p-cell-editing .p-multiselect,
    .p-cell-editing .p-datepicker,
    .p-cell-editing .p-autocomplete,
    p-celleditor input,
    p-celleditor .p-inputtext,
    p-celleditor .p-select,
    p-celleditor .p-select,
    p-celleditor .p-multiselect,
    p-celleditor .p-datepicker,
    p-celleditor .p-autocomplete
) {
    --app-form-control-height: var(--app-table-control-height);
    --app-form-control-font-size: var(--app-table-control-font-size);
    height: var(--app-table-control-height);
    min-height: var(--app-table-control-height);
    font-size: var(--app-table-control-font-size);
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) .p-datatable :is(
    .p-column-filter .p-button,
    .p-column-filter .p-datepicker-dropdown,
    .p-column-filter .p-select-dropdown,
    .p-column-filter .p-multiselect-dropdown,
    .p-cell-editing .p-datepicker-dropdown,
    .p-cell-editing .p-select-dropdown,
    .p-cell-editing .p-multiselect-dropdown,
    p-celleditor .p-datepicker-dropdown,
    p-celleditor .p-select-dropdown,
    p-celleditor .p-multiselect-dropdown
) {
    width: var(--app-table-control-height);
    min-width: var(--app-table-control-height);
    height: var(--app-table-control-height);
    min-height: var(--app-table-control-height);
}

:is(.shell .main, .p-dialog .p-dialog-content, .p-dialog-content) .p-datatable :is(
    .p-column-filter-menu-button,
    .p-column-filter-clear-button,
    .p-sortable-column-icon,
    .p-datatable-reorderable-column-handle
) {
    flex: 0 0 auto;
}

.p-dialog-mask {
    padding: 1rem;
}

.p-dialog {
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
}

.p-dialog .p-dialog-header {
    align-items: center;
    gap: 0.75rem;
}

.p-dialog .p-dialog-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-dialog-title {
    flex: 1 1 auto;
    min-width: 0;
}

.app-dialog-titlebar-action {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.p-dialog .p-dialog-content {
    min-width: 0;
    overflow-x: hidden;
}

.p-dialog .p-dialog-footer,
.app-action-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.p-dialog .p-dialog-footer :is(.p-button, button),
.app-action-row :is(.p-button, button) {
    min-height: 32px;
}

:is(
    .p-select-overlay,
    .p-select-panel,
    .p-multiselect-overlay,
    .p-autocomplete-overlay,
    .p-datepicker-panel,
    .p-popover,
    .p-overlaypanel,
    .p-tooltip,
    .p-toast
) {
    font-size: var(--app-form-control-font-size, 13px);
}

:is(.p-select-overlay, .p-select-panel, .p-multiselect-overlay, .p-autocomplete-overlay) :is(
    .p-select-option,
    .p-select-item,
    .p-multiselect-option,
    .p-autocomplete-option
) {
    min-height: 32px;
    line-height: 1.25;
}

:is(.p-select-overlay, .p-multiselect-overlay, .p-autocomplete-overlay) {
    z-index: 9999 !important;
    max-width: min(400px, calc(100vw - 2rem)) !important;
    transform-origin: center top !important;
    margin-top: calc(var(--p-anchor-gutter, 0px)) !important;
}

.p-tooltip .p-tooltip-text {
    line-height: 1.35;
}

.p-toast .p-toast-message-content {
    align-items: flex-start;
}

@media (max-width: 767.98px) {
    .p-dialog-mask {
        padding: 0.5rem;
    }

    .p-dialog {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem);
    }

    .p-dialog .p-dialog-footer,
    .app-action-row {
        justify-content: stretch;
    }

    .p-dialog .p-dialog-footer :is(.p-button, button),
    .app-action-row :is(.p-button, button) {
        flex: 1 1 auto;
    }
}