@font-face {
  font-family: 'segoe_uiregular';
  src: url('../fonts/segoeui-webfont.woff2') format('woff2'),
    url('../fonts/segoeui-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'segoe_uisemibold';
  src: url('../fonts/seguisb-webfont.woff2') format('woff2'),
    url('../fonts/seguisb-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'segoe_uibold';
  src: url('../fonts/segoeuib-webfont.woff2') format('woff2'),
    url('../fonts/segoeuib-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/*-- Variables  start here --*/
:root {
  /*-- font family  --*/
  --font-bold: 'segoe_uibold';
  --font-regular: 'segoe_uiregular';
  --font-semibold: 'segoe_uisemibold';
  /*-- font size and Line height  --*/
  --display-md: 2.125rem;
  --display-md-lh: 2.563rem;
  --display-sm: 1.5rem;
  --display-sm-lh: 2.063rem;
  --display-xs: 1.25rem;
  --display-xs-lh: 1.75rem;
  --text-lg: 1.125rem;
  --text-lg-lh: 1.75rem;
  --text-md: 0.875rem;
  --text-md-lh: 1.063rem;
  --text-md: 0.875rem;
  --text-md-lh: 1.063rem;
  /*-- primary color --*/
  --white-color: #ffffff;
  --primary-color: #6d71f9;
  --primary-hover: #4d51c0;
  --primary-color-10: #f0f1fe;
  --primary-color-20: #e2e3fe;
  --primary-color-30: #d3d4fd;
  --border-color: #d3d4fd;
  --icon-color: #6d71f9;
  --icon-muted-color: #52596d;
  --icon-text-color: #52596d;
  --todo-color: #00b0fe;
  --draft-color: #7c7c8d;
  /*-- job priority colors (shared: Job + Dashboard) --*/
  --job-priority-urgent: #e74c3c;
  --job-priority-high: #ffa000;
  --job-priority-low: var(--icon-muted-color);
  --job-priority-none: #e6d0f9;
  /*-- text color --*/
  --text-color: #272b4b;
  --text-color-700: #52596d;
  --text-color-800: #52596d;
  --main-text-color: #272b4b;
  --secondary-color: #52596d;
  --app-bg-color: #f1f1ff;
  /* Bootstrap focus ring follows primary instead of default blue */
  --bs-focus-ring-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
  --bs-primary-border-subtle: var(--primary-color);
  /* Branding: accordion focus/active use primary text, no blue shadow */
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-focus-border-color: var(--primary-color);
  --bs-accordion-active-color: var(--primary-color);
  --bs-accordion-active-bg: var(--app-bg-color);
  --bs-accordion-btn-color: var(--text-color);
  /* Bootstrap popovers / body typography follow brand fonts */
  --bs-body-font-family: var(--font-family-base, 'segoe_uiregular', Arial, sans-serif);
  --bs-body-color: var(--text-color-700);
  --bs-popover-font-family: var(--font-family-base, 'segoe_uiregular', Arial, sans-serif);
  --bs-popover-body-color: var(--text-color-700);
  --bs-popover-header-color: var(--text-color);
  /*-- typography tokens --*/
  --font-family-base: 'segoe_uiregular', Arial, sans-serif;
  --font-family-heading: 'segoe_uisemibold', Arial, sans-serif;
  --font-heading-semibold: 'segoe_uisemibold';
  --font-heading-bold: 'segoe_uibold';
  --base-font-size: 14px;
  /*-- border radius   --*/
  --radius-5: 5px;
  --radius-10: 10px;
}
.icon-holder {
  color: var(--icon-muted-color);
}
.icon-holder svg path {
  fill: currentColor;
}
.pw-icon-text {
  color: var(--icon-text-color);
}
.pw-icon-text svg path:not([fill='none']) {
  fill: currentColor;
}
.pw-icon-text svg path[stroke='currentColor'] {
  stroke: currentColor;
}
/*-- currentColor utility icons: set color on parents, not on <svg> root --*/
.pw-table-filter,
.pw-select-filter-btn,
.pw-icon-text,
.pw-dashbord-filter,
.pw-dashboard-filter,
.pw-job-header .pw-job-search,
.pw-select-filter-item-details,
.pw-dashboard .nav-pills .nav-link:not(.active) {
  color: var(--icon-text-color);
}
/* Root <svg fill="currentColor"> paints a solid block; unset root fill only */
svg[fill='currentColor'] {
  fill: none;
}
svg[fill='currentColor'] [fill='currentColor'],
svg[fill='currentColor'] path:not([fill]) {
  fill: currentColor;
}
.nav-link.active .icon-holder,
.nav-link:hover .icon-holder {
  color: var(--icon-color);
}
.dropdown-item:focus svg path,
.dropdown-item:hover svg path {
  fill: var(--icon-color);
}
.btn.btn-primary:not(.js-svg-original) svg path:not([fill='none']),
.custom-btn svg path:not([fill='none']),
.pw-table-filter svg path:not([fill='none']) {
  fill: currentColor;
}

/* Job Draft status icon stays draft grey, not heading/icon/primary color */
.pw-status-icon-draft,
span[title='Draft'],
span[title='draft'],
.display-content[title='Draft'],
.display-content[title='draft'] {
  color: var(--draft-color, #7c7c8d);
}

.pw-status-icon-draft path:not([fill='none']),
span[title='Draft'] svg path:not([fill='none']),
span[title='draft'] svg path:not([fill='none']),
.display-content[title='Draft'] svg path:not([fill='none']),
.display-content[title='draft'] svg path:not([fill='none']) {
  fill: var(--draft-color, #7c7c8d);
}

/* Shared job priority icon colors — Job list, Job edit, Dashboard */
.pw-job-priority,
.pw-job-priyority-list {
  gap: 5px;
}
.pw-job-priority.pw-job-priority-low,
.pw-job-priyority-list.pw-job-priyority-low {
  color: var(--job-priority-low);
}
.pw-job-priority.pw-job-priority-urgent,
.pw-job-priyority-list.pw-job-priyority-urgent {
  color: var(--job-priority-urgent);
}
.pw-job-priority.pw-job-priority-high,
.pw-job-priyority-list.pw-job-priyority-high {
  color: var(--job-priority-high);
}
.pw-job-priority.pw-job-priority-none,
.pw-job-priyority-list.pw-job-priyority-none {
  color: var(--job-priority-none);
}
.pw-job-priority svg path,
.pw-job-priyority-list svg path {
  fill: currentColor;
}
/* Priority dropdown: keep status colors (override global dropdown hover) */
.pw-job-priyority .dropdown-toggle[title='Urgent'] svg path,
.pw-job-priyority .dropdown-item[title='Urgent'] svg path,
.pw-job-priyority .dropdown-item[title='Urgent']:hover svg path,
.pw-job-priyority .dropdown-item[title='Urgent']:focus svg path {
  fill: var(--job-priority-urgent);
}
.pw-job-priyority .dropdown-toggle[title='High'] svg path,
.pw-job-priyority .dropdown-item[title='High'] svg path,
.pw-job-priyority .dropdown-item[title='High']:hover svg path,
.pw-job-priyority .dropdown-item[title='High']:focus svg path {
  fill: var(--job-priority-high);
}
.pw-job-priyority .dropdown-toggle[title='Low'] svg path,
.pw-job-priyority .dropdown-item[title='Low'] svg path,
.pw-job-priyority .dropdown-item[title='Low']:hover svg path,
.pw-job-priyority .dropdown-item[title='Low']:focus svg path {
  fill: var(--job-priority-low);
}
.pw-job-priyority .dropdown-toggle[title='None'] svg path,
.pw-job-priyority .dropdown-item[title='None'] svg path,
.pw-job-priyority .dropdown-item[title='None']:hover svg path,
.pw-job-priyority .dropdown-item[title='None']:focus svg path {
  fill: var(--job-priority-none);
}
/*-- variable end here --*/
section,
div,
span,
a,
aside,
p,
strong,
header,
footer,
main,
article,
audio,
video,
bdi,
body,
ul,
li,
ol,
dl,
form,
input,
select,
button,
label,
table,
tr,
td,
h1,
h2,
h3,
h4,
h5,
h6,
thead,
tbody {
  padding: 0;
  margin: 0;
  outline: none;
  border: none;
  text-decoration: none;
  list-style: none;
}
body {
  font-family: var(--font-family-base, 'segoe_uiregular', Arial, sans-serif);
  font-size: var(--base-font-size, 14px);
  color: var(--text-color-700);
  background: var(--app-bg-color, var(--app-bg-color));
}

/* Branding: all custom scrollbars match jobs/assets (primary thumb) */
html,
.app {
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) var(--border-color);
}
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
::-webkit-scrollbar-track {
  background-color: var(--border-color);
}
::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
}

/* Branding typography applies only inside pw-admin shell content, not libs/third-party UI */
.pw-inside-area {
  font-family: var(--font-family-base);
  font-size: var(--base-font-size);
}

/* Branding: accordion focus/active text is primary, remove Bootstrap blue shadow */
.accordion-button:focus,
.accordion-button:focus-visible,
.accordion-button:active {
  box-shadow: none !important;
  outline: none;
  color: var(--primary-color);
}
.accordion-button:not(.collapsed),
.accordion-button.active {
  color: var(--primary-color);
  box-shadow: none !important;
}

.pw-inside-area h1,
.pw-inside-area h2,
.pw-inside-area h3,
.pw-inside-area h4,
.pw-inside-area h5,
.pw-inside-area h6,
.pw-inside-area .pw-page-title,
.pw-inside-area .card-title {
  font-family: var(--font-heading-semibold, var(--font-semibold));
  font-weight: normal;
}

.fm-bold {
  font-family: var(--font-bold);
  font-weight: normal;
}

/* Branding: drag handles and three-dot action icons follow icon color */
.pw-drag-icon,
.pw-drag-icon-step,
.pw-action-dropdown,
.pw-action-dropdown button.btn {
  color: var(--icon-text-color, var(--text-color-700, #52596d));
}

.pw-answer-type-box,
.pw-short-answer-list {
  color: var(--icon-text-color, var(--text-color-700, #52596d));
}
.fm-semibold {
  font-family: var(--font-semibold);
  font-weight: normal;
}
.fm-regular {
  font-family: var(--font-regular);
}
/*-- font class start here --*/
.fs-display-md {
  font-size: var(--display-md);
  line-height: var(--display-md-lh);
}
.fs-display-xs {
  font-size: var(--display-xs);
  line-height: var(--display-xs-lh);
}
.fs-lg {
  font-size: var(--text-lg);
  line-height: var(--text-lg-lh);
}
.fs-md {
  font-size: var(--text-md);
  line-height: var(--text-md-lh);
}
/*-- font class end here --*/
/*-- color class start here --*/
.text-color {
  color: var(--text-color);
}
.text-color-700 {
  color: var(--text-color-700);
}
.text-color-800 {
  color: var(--text-color-800);
}
.bg-primary-10 {
  background-color: var(--primary-color-10);
}
.bg-primary {
  background-color: var(--primary-color) !important;
}
/*-- color class end here --*/
.bg-primary-gradient {
  /* Branding: gradient derives from primary tint and background color */
  background-image: linear-gradient(
    to top,
    #ffffff,
    var(--primary-color-10, #f5f4ff),
    var(--app-bg-color)
  );
}
.border {
  border: 1px solid var(--primary-color-30) !important;
}
.radius-5 {
  border-radius: var(--radius-5);
}
p {
  font-size: 14px;
  word-break: break-word;
}
.btn.btn-outline-primary {
  border-color: var(--primary-color-30);
  color: var(--primary-color);
}
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus {
  border-color: var(--primary-color-30);
  background-color: var(--primary-color-10);
  color: var(--primary-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-color);
  font-family: var(--font-heading-semibold, var(--font-semibold));
  font-weight: normal;
}
strong,
b {
  font-family: var(--font-bold);
  font-weight: normal;
}
.clear {
  clear: both;
}
#sidebar-toggle {
  display: none;
}
/* .pw-action-dropdown button {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  background: #ffffff;
  border-color: #fff;
  box-shadow: none !important;
}
.pw-action-dropdown button:hover, .pw-action-dropdown button:focus{
  background: #F1F1FF;
  border-color: #DADBFD;
}
.dropdown-item:focus svg path, .dropdown-item:hover svg path {
  fill: var(--primary-color);
}
.pw-action-dropdown .dropdown-toggle::after{
  display: none;
}
.dropdown-item {
  padding: 10px 25px;
  color: var(--icon-muted-color);
  display: flex;
  justify-content: stretch;
  align-items: center;
}
.dropdown-item svg{
  margin-right: 10px;
}
.dropdown-item:focus, .dropdown-item:hover{
  background: #F1F1FF;
  color: var(--primary-color);
}
a.dropdown-item.pw-logout {
  border-top: 1px solid #DADBFD;
} */
/*-- button css start here--*/
.btn.btn-primary {
  padding: 0;
  background: transparent;
  background-color: transparent !important;
  border: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-family: var(--font-bold);
  color: var(--primary-color);
  text-transform: uppercase;
}
.btn.btn-primary.btn-style-2 {
  font-family: var(--font-regular);
}
.btn.btn-primary:hover {
  color: var(--primary-hover);
}
.btn.btn-primary:not(.js-svg-original):hover svg path {
  fill: var(--primary-hover);
}
/* Standalone delete icon buttons stay red. Three-dot menu "Delete" text
   matches other action items (menus may render under body via container). */
a[title='Delete']:not(.dropdown-item),
a[title='Delete']:not(.dropdown-item):hover,
.pw-delete-btn,
.pw-delete-btn:hover,
.btn.btn-primary[title='Delete'],
.btn.btn-primary[title='Delete']:hover {
  color: #e74c3c;
}
.pw-delete-btn svg path:not([fill='none']),
.pw-delete-btn:hover svg path:not([fill='none']),
.btn.btn-primary[title='Delete'] svg path:not([fill='none']),
.btn.btn-primary[title='Delete']:hover svg path:not([fill='none']),
a[title='Delete']:not(.dropdown-item) svg path:not([fill='none']),
a[title='Delete']:not(.dropdown-item):hover svg path:not([fill='none']) {
  fill: #e74c3c;
}
a.dropdown-item[title='Delete'] {
  color: var(--icon-muted-color);
}
a.dropdown-item[title='Delete']:hover,
a.dropdown-item[title='Delete']:focus {
  color: var(--primary-color);
}
a.dropdown-item[title='Manage access'] {
  color: var(--icon-muted-color);
}
a.dropdown-item[title='Manage access']:hover,
a.dropdown-item[title='Manage access']:focus {
  color: var(--primary-color);
}
.btn.btn-primary:focus {
  box-shadow: none;
}
.btn.btn-primary.btn-light {
  color: var(--text-color-700);
}
.btn.btn-primary.btn-light:hover {
  color: var(--primary-color);
}
.btn.btn-primary.btn-light:hover svg path {
  fill: var(--primary-color);
}
.btn.btn-primary.btn-red {
  color: #e74c3c;
}
.btn.btn-primary.btn-red:hover {
  color: #c0392b;
}
.pw-upload-process .btn.btn-primary.btn-red {
  display: inline-flex;
}
.btn.btn-primary span {
  color: #e74c3c;
}
/*-- button css end here--*/
hr {
  margin: 25px 0;
}
/*-- card css end here--*/
.card {
  border-color: var(--primary-color-30);
}
.card.pw-noheader {
  padding: 30px;
}
/*-- card css start here--*/
.pw-inside-area.pw-machine {
  margin-top: 20px;
}
.popover-header {
  background: var(--app-bg-color, var(--app-bg-color));
  border-color: var(--primary-color-30);
  /* Branding: popover titles follow heading color + brand font */
  color: var(--text-color);
  font-family: var(--font-heading-semibold, var(--font-semibold));
  font-weight: normal;
}
.popover {
  border-color: var(--primary-color-30);
  /* Branding: info popovers (container=body) must use brand fonts */
  font-family: var(--font-family-base, 'segoe_uiregular', Arial, sans-serif);
  font-size: var(--base-font-size, 14px);
  color: var(--text-color-700);
  /* z-index: 7; */
}
.popover-body {
  color: var(--text-color-700);
  font-family: var(--font-family-base, 'segoe_uiregular', Arial, sans-serif);
  font-size: var(--base-font-size, 14px);
}
/* change by dev */
.js-job .popover {
  z-index: 7;
}

/*-- saved html start here --*/
.pw-saving span {
  color: var(--text-color-700);
  font-family: var(--font-semibold);
}
.pw-saving span.pw-saving {
  color: var(--primary-color);
}
.pw-rotate-animation {
  animation: animName 2s linear infinite;
}
@keyframes animName {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*-- saved html end here --*/
/*-- nodata css start here --*/
.pw-no-data-card {
  height: calc(100vh - 200px);
  width: 100%;
}
.pw-dashboard .pw-no-data-card {
  height: auto;
  padding: 50px 0;
}
.pw-no-data-details {
  text-align: center;
}
.pw-no-data-details {
  gap: 15px;
  text-align: center;
}
.pw-no-data-icon {
  background: var(--app-bg-color, var(--app-bg-color));
  height: 100px;
  width: 100px;
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 50%;
}
.pw-no-data-details h4 {
  font-size: 20px;
  /* Branding: empty-state heading uses bold theme font family */
  font-family: var(
    --font-heading-bold,
    var(--font-bold, var(--font-family-heading))
  );
  font-weight: normal;
  color: var(--text-color);
}
.pw-job-main .pw-no-data-card {
  height: auto;
  padding: 50px 0;
}
.pw-nodata {
  margin-top: 20px;
}
/*-- nodata css end here --*/
.alert.alert-danger svg {
  min-width: 24px;
}
.alert.alert-danger {
  background: #fce4e2;
  border-color: #f6b7b1;
  color: #e74c3c;
}
.alert {
  gap: 10px;
  padding: 10px;
}
.alert.alert-warning {
  border: 1px solid #fcd8b3;
  background: #feecd9;
  color: #f57c00;
}
.alert p {
  margin: 0;
}
.pw-excel-upload-area .alert {
  margin-top: 15px;
}
/*-- library file types preview end here --*/
.pw-dragdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(241, 241, 255, 0.95);
  border: 1px solid var(--primary-color-30);
  border-radius: 5px;
  z-index: 7;
  padding-top: 200px;
}
.pw-dragdrop-detail span {
  background: #ffff;
  border: 1px solid var(--primary-color-30);
  height: 65px;
  width: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
}
.pw-dragdrop-detail {
  gap: 15px;
}
.pw-dragdrop-detail h5 {
  font-size: 20px;
}
.pw-radio-btn {
  gap: 15px;
}
.pw-radio-btn .form-check {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}
.pw-radio-btn .form-check-input {
  height: 17px;
  width: 17px;
  border: none;
  background-color: var(--primary-color-30);
}
.pw-radio-btn .form-check label {
  color: var(--text-color);
  margin: 0;
}
.pw-radio-btn .form-check-input:checked {
  background-color: var(--primary-color);
  border: none;
}
.pw-radio-btn .form-check-input:focus {
  box-shadow: none;
}
.popover-info-conetnt p,
.popover-info-content p {
  word-break: break-word;
  /* Branding: info popup body text follows text color + brand font */
  color: var(--text-color-700);
  font-family: var(--font-family-base, 'segoe_uiregular', Arial, sans-serif);
  font-size: var(--base-font-size, 14px);
}
.popover-info-conetnt strong,
.popover-info-content strong,
.popover .popover-body strong {
  /* Branding: bold labels use bold font family (not font-weight) */
  color: var(--text-color);
  font-family: var(--font-heading-semibold, var(--font-semibold));
  font-weight: normal;
}
.popover.popOverInfo,
.popover.popOverInfo .popover-body {
  font-family: var(--font-family-base, 'segoe_uiregular', Arial, sans-serif);
  color: var(--text-color-700);
}
.pw-mobile-header {
  display: none;
}
.pw-mobile-header {
  background: #fff;
  border-bottom: 1px solid var(--primary-color-30);
  padding: 15px 20px;
  /* position: absolute;
  top: 0;
  left: 0;
  right: 0; */
  justify-content: space-between;
}
.pw-mobile-header h4 {
  margin-left: auto;
  margin-right: auto;
  font-size: 15px;
}