/*
! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #111827;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: rgba(17, 24, 39, 0.5);
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: rgba(17, 24, 39, 0.5);
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

body {
  height: 100% !important;
  overflow-x: clip;
  #CanvasDiv {
    height: auto !important;
  }
  #CanvasDiv {
    width: 100% !important;
  }
  #CanvasDiv {
    .header-main {
      position: sticky;
    }
    .header-main {
      top: 0px;
    }
    .header-main {
      z-index: 1001;
    }
    .header-main {
      display: flex;
    }
    .header-main {
      width: 100%;
    }
    .header-main {
      align-items: center;
    }
    .header-main {
      border-bottom-width: 1px !important;
    }
    .header-main {
      --tw-border-opacity: 1 !important;
      border-bottom-color: rgb(180 200 253 / var(--tw-border-opacity)) !important;
    }
    .header-main {
      --tw-bg-opacity: 1;
      background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    }
    .header-main {
      font-weight: 700;
    }
    .header-main {
      --tw-text-opacity: 1;
      color: rgb(55 65 81 / var(--tw-text-opacity));
    }
    .header-main {
      .header-inner {
        display: flex;
      }
      .header-inner {
        height: 100%;
      }
      .header-inner {
        width: 100%;
      }
      .header-inner {
        flex-direction: column;
      }
      .header-inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
      .header-inner {
        padding-top: 1.5rem;
      }
      .header-inner {
        .profile-section {
          margin-bottom: 1rem;
        }
        .profile-section {
          display: flex;
        }
        .profile-section {
          flex-direction: column;
        }
        .profile-section {
          gap: 1rem;
        }
        .profile-section {
          font-weight: 400;
        }
        @media (min-width: 640px) {
          .profile-section {
            flex-direction: row;
          }
        }
        @media (min-width: 640px) {
          .profile-section {
            align-items: center;
          }
        }
        @media (min-width: 640px) {
          .profile-section {
            justify-content: space-between;
          }
        }
        .profile-section {
          .profile-section__block {
            z-index: 50 !important;
          }
          .profile-section__block {
            display: flex;
          }
          .profile-section__block {
            width: 100%;
          }
          .profile-section__block {
            justify-content: space-between;
          }
          @media (min-width: 640px) {
            .profile-section__block {
              width: -moz-fit-content;
              width: fit-content;
            }
          }
          @media (min-width: 640px) {
            .profile-section__block {
              align-items: center;
            }
          }
          @media (min-width: 640px) {
            .profile-section__block {
              gap: 2rem;
            }
          }
          .profile-section__block {
            .toggle-button {
              cursor: pointer;
            }
            .back-button {
              cursor: pointer;
            }
            .company-info {
              display: flex;
            }
            .company-info {
              justify-content: space-between;
            }
            .company-info {
              gap: 0.5rem;
            }
            .company-info {
              text-transform: capitalize;
            }
            @media (min-width: 640px) {
              .company-info {
                align-items: center;
              }
            }
            .open-button {
              border-style: none;
            }
            .open-button {
              font-size: 2.25rem;
              line-height: 2.5rem;
            }
            .open-button {
              --tw-shadow: 0 0 #0000;
              --tw-shadow-colored: 0 0 #0000;
              box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
            }
            .company-img {
              height: 2.5rem;
            }
            .company-img {
              width: 2.5rem;
            }
            .company-title {
              display: flex;
            }
            .select-box {
              height: 2.5rem;
            }
            .select-box {
              font-size: 1.25rem;
              line-height: 1.75rem;
            }
            .user-profile {
              display: flex;
            }
            .user-profile {
              align-items: center;
            }
            .user-profile-info {
              display: flex;
            }
            .user-profile-info {
              align-items: center;
            }
            .user-profile-info {
              justify-content: center;
            }
            .user-profile-info {
              font-weight: 700;
            }
            .user-profile-info {
              --tw-text-opacity: 1 !important;
              color: rgb(31 41 55 / var(--tw-text-opacity)) !important;
            }
            .user-profile-info {
              text-decoration-line: none !important;
            }
            .profile-img {
              height: 2.5rem;
            }
            .profile-img {
              width: 2.5rem;
            }
          }
          .responsive-menu {
            display: flex;
          }
          .responsive-menu {
            cursor: pointer;
          }
          .responsive-menu {
            align-items: center;
          }
          .responsive-menu {
            gap: 1rem;
          }
          .responsive-menu {
            font-size: 14px;
          }
          .responsive-menu {
            font-weight: 700;
          }
          .responsive-menu {
            --tw-text-opacity: 1;
            color: rgb(0 0 0 / var(--tw-text-opacity));
          }
          @media (min-width: 1280px) {
            .responsive-menu {
              display: none;
            }
          }
          .responsive-menu {
            .arrow-down-icon.rotate {
              --tw-rotate: 180deg;
              transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
            }
            .arrow-down-icon.rotate {
              transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
            }
          }
        }
        .nav-links-section {
          display: none;
        }
        @media (min-width: 1280px) {
          .nav-links-section {
            display: inline-block;
          }
        }
        .nav-links-section {
          .nav-list {
            position: absolute;
          }
          .nav-list {
            top: 0px;
          }
          .nav-list {
            z-index: 0;
          }
          .nav-list {
            margin-top: 1.75rem;
            margin-bottom: 1.75rem;
          }
          .nav-list {
            display: flex !important;
          }
          .nav-list {
            width: 100%;
          }
          .nav-list {
            flex-direction: row !important;
          }
          .nav-list {
            justify-content: center;
          }
          .nav-list {
            --tw-border-opacity: 1;
            border-color: rgb(209 213 219 / var(--tw-border-opacity));
          }
          .nav-list {
            text-align: center;
          }
          .nav-list {
            li {
              width: auto;
            }
            li {
              padding-left: 0px;
              padding-right: 0px;
            }
          }
          .nav-item {
            display: flex;
          }
          .nav-item {
            align-items: center;
          }
          .nav-item {
            justify-content: center;
          }
          .nav-item {
            border-bottom-width: 1px;
          }
          .nav-item {
            --tw-bg-opacity: 1;
            background-color: rgb(255 255 255 / var(--tw-bg-opacity));
          }
          .nav-item {
            padding-top: 1rem;
            padding-bottom: 1rem;
          }
          .nav-item {
            padding-left: 2.5rem;
            padding-right: 2.5rem;
          }
          .nav-item {
            padding-left: 1.75rem;
            padding-right: 1.75rem;
          }
          .nav-item {
            padding-top: 1.75rem;
          }
          .nav-item {
            padding-bottom: 32px;
          }
          .nav-item {
            font-weight: 400;
          }
          .nav-item {
            --tw-text-opacity: 1 !important;
            color: rgb(0 0 0 / var(--tw-text-opacity)) !important;
          }
          .nav-item {
            text-decoration-line: none !important;
          }
          .nav-item {
            &.active {
              font-weight: 700 !important;
            }
            &.active {
              --tw-text-opacity: 1 !important;
              color: rgb(74 111 165 / var(--tw-text-opacity)) !important;
            }
            &.active {
              --tw-shadow: 0 0 #0000;
              --tw-shadow-colored: 0 0 #0000;
              box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
            }
            @media (min-width: 1280px) {
              &.active {
                --tw-shadow: inset 0 -13px 0 -10px #4376FA;
                --tw-shadow-colored: inset 0 -13px 0 -10px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
              }
            }
          }
        }
        .nav-links-section.show {
          display: inline-block;
        }
        .nav-links-section.show {
          --tw-text-opacity: 1;
          color: rgb(0 0 0 / var(--tw-text-opacity));
        }
        .nav-links-section.show {
          .nav-list {
            position: fixed;
          }
          .nav-list {
            top: 9rem;
          }
          .nav-list {
            z-index: 60;
          }
          .nav-list {
            margin-top: 2rem;
          }
          .nav-list {
            display: flex !important;
          }
          .nav-list {
            display: flex;
          }
          .nav-list {
            width: 100%;
          }
          .nav-list {
            width: 200px;
          }
          .nav-list {
            flex-direction: column !important;
          }
          .nav-list {
            justify-content: center;
          }
          .nav-list {
            border-radius: 1.5rem;
          }
          .nav-list {
            --tw-bg-opacity: 1;
            background-color: rgb(255 255 255 / var(--tw-bg-opacity));
          }
          .nav-list {
            text-align: start;
          }
          .nav-list {
            --tw-shadow: 0px 3px 3px #E2ECF9;
            --tw-shadow-colored: 0px 3px 3px var(--tw-shadow-color);
            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
          }
          @media (min-width: 640px) {
            .nav-list {
              top: 60px;
            }
          }
          @media (min-width: 640px) {
            .nav-list {
              right: 18rem;
            }
          }
          .nav-list {
            li {
              width: 100%;
            }
            li {
              padding-left: 1.5rem;
              padding-right: 1.5rem;
            }
            li:last-of-type {
              margin-bottom: 2rem;
            }
          }
          .nav-item {
            display: flex;
          }
          .nav-item {
            align-items: center;
          }
          .nav-item {
            justify-content: flex-start;
          }
          .nav-item {
            border-bottom-width: 1px;
          }
          .nav-item {
            border-style: dashed;
          }
          .nav-item {
            --tw-border-opacity: 1;
            border-color: rgb(209 213 219 / var(--tw-border-opacity));
          }
          .nav-item {
            --tw-bg-opacity: 1;
            background-color: rgb(255 255 255 / var(--tw-bg-opacity));
          }
          .nav-item {
            padding-top: 1rem;
            padding-bottom: 1rem;
          }
          .nav-item {
            padding-left: 1.75rem;
            padding-right: 1.75rem;
          }
          .nav-item {
            padding-top: 1rem;
          }
          .nav-item {
            font-weight: 400;
          }
          .nav-item {
            --tw-text-opacity: 1 !important;
            color: rgb(0 0 0 / var(--tw-text-opacity)) !important;
          }
          .nav-item {
            text-decoration-line: none !important;
          }
          .nav-item {
            &.active {
              font-weight: 700 !important;
            }
            &.active {
              --tw-text-opacity: 1 !important;
              color: rgb(74 111 165 / var(--tw-text-opacity)) !important;
            }
            &.active {
              --tw-shadow: 0 0 #0000;
              --tw-shadow-colored: 0 0 #0000;
              box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
            }
          }
        }
      }
    }
    #BodyDiv {
      clear: right;
    }
    #BodyDiv {
      display: block;
    }
    #BodyDiv {
      height: auto;
    }
    #BodyDiv {
      min-height: 940px;
    }
    #BodyDiv {
      width: 100% !important;
    }
    #BodyDiv {
      overflow: hidden;
    }
    #BodyDiv {
      --tw-border-opacity: 1;
      border-bottom-color: rgb(227 227 227 / var(--tw-border-opacity));
    }
    #BodyDiv {
      --tw-bg-opacity: 1 !important;
      background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
    }
    #BodyDiv {
      --tw-bg-opacity: 1;
      background-color: rgb(241 241 241 / var(--tw-bg-opacity));
    }
    #BodyDiv {
      text-align: center;
    }
    #BodyDiv {
      font-family: Rubik, sans-serif;
    }
    #BodyDiv {
      --tw-text-opacity: 1;
      color: rgb(0 0 0 / var(--tw-text-opacity));
    }
    #BodyDiv {
      .page-content-wrapper {
        position: relative;
      }
      .page-content-wrapper {
        display: flex;
      }
      .page-content-wrapper {
        --tw-bg-opacity: 1 !important;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
      }
      .page-content-wrapper {
        padding: 0px;
      }
      .page-content-wrapper {
        transition-property: 0.5s;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
      }
      .page-content-wrapper {
        .side-bar-main {
          position: fixed;
        }
        .side-bar-main {
          z-index: 1000 !important;
        }
        .side-bar-main {
          height: 100%;
        }
        .side-bar-main {
          width: 220px;
        }
        .side-bar-main {
          min-width: 220px;
        }
        .side-bar-main {
          border-right-width: 1px;
        }
        .side-bar-main {
          --tw-border-opacity: 1 !important;
          border-right-color: rgb(180 200 253 / var(--tw-border-opacity)) !important;
        }
        .side-bar-main {
          --tw-bg-opacity: 1 !important;
          background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
        }
        @media (min-width: 640px) {
          .side-bar-main {
            display: block;
          }
        }
        .side-bar-main {
          #MainMenuDiv {
            position: sticky !important;
          }
          #MainMenuDiv {
            top: 0px;
          }
          #MainMenuDiv {
            margin-top: 0px !important;
          }
          #MainMenuDiv {
            height: calc(100vh - 54px);
          }
          #MainMenuDiv {
            overflow: auto !important;
          }
          #MainMenuDiv {
            --tw-bg-opacity: 1 !important;
            background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
          }
          #MainMenuDiv {
            text-align: start;
          }
          #MainMenuDiv {
            --tw-text-opacity: 1;
            color: rgb(255 255 255 / var(--tw-text-opacity));
          }
          #MainMenuDiv {
            transition-property: 0.5s;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 150ms;
          }
          #MainMenuDiv {
            &.collapsed {
              left: 0px !important;
            }
            .sidebar-menu {
              --tw-bg-opacity: 1;
              background-color: rgb(255 255 255 / var(--tw-bg-opacity));
            }
            .sidebar-menu {
              padding-top: 2rem;
              padding-bottom: 2rem;
            }
            .sidebar-menu {
              padding-left: 1.5rem;
              padding-right: 1.5rem;
            }
            .sidebar-menu {
              font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            }
            .sidebar-menu {
              font-weight: 100;
            }
            .sidebar-menu {
              li {
                &:hover > a,
                  .sidebar-menu > li > a.rotate {
                  --tw-bg-opacity: 1;
                  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
                }
                &:hover > a,
                  .sidebar-menu > li > a.rotate {
                  --tw-text-opacity: 1;
                  color: rgb(0 0 0 / var(--tw-text-opacity));
                }
                a.rotate {
                  --tw-bg-opacity: 1;
                  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
                }
                a.rotate {
                  font-weight: 700 !important;
                }
                a.rotate {
                  letter-spacing: -0.025em;
                }
                a.rotate {
                  --tw-text-opacity: 1 !important;
                  color: rgb(74 111 165 / var(--tw-text-opacity)) !important;
                }
                a.rotate > .list,
                  a.rotate > .list-child {
                  border-radius: 9999px;
                }
                a.rotate > .list,
                  a.rotate > .list-child {
                  --tw-bg-opacity: 1;
                  background-color: rgb(14 116 144 / var(--tw-bg-opacity));
                }
                &.sidebar-header {
                  --tw-bg-opacity: 1;
                  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
                }
                &.sidebar-header {
                  padding-top: 2.5rem;
                  padding-bottom: 2.5rem;
                }
                &.sidebar-header {
                  padding-left: 25px;
                  padding-right: 25px;
                }
                &.sidebar-header {
                  padding-left: 15px;
                }
                &.sidebar-header {
                  font-size: 0.875rem;
                  line-height: 1.25rem;
                }
                &.sidebar-header {
                  font-weight: 600;
                }
                &.sidebar-header {
                  --tw-text-opacity: 1;
                  color: rgb(55 65 81 / var(--tw-text-opacity));
                }
                > a > .fa-angle-left {
                  margin-right: 2.5rem;
                }
                > a > .fa-angle-left {
                  margin-top: 0.75rem;
                }
                > a > .fa-angle-left {
                  height: auto;
                }
                > a > .fa-angle-left {
                  width: auto;
                }
                > a > .fa-angle-left {
                  padding: 0px;
                }
                a.rotate > .fa-angle-left {
                  --tw-rotate: -90deg;
                  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
                }
                a.rotate > .fa-angle-left {
                  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
                }
                .rotate > .sidebar-submenu {
                  display: block;
                }
                .label,
                  .badge {
                  margin-top: 3px;
                }
                .label,
                  .badge {
                  margin-right: 5px;
                }
              }
              .sidebar-item {
                border-bottom-width: 1px;
              }
              .sidebar-item {
                border-style: dashed;
              }
              .sidebar-item {
                --tw-border-opacity: 1;
                border-color: rgb(209 213 219 / var(--tw-border-opacity));
              }
              .sidebar-item {
                text-decoration-line: underline;
              }
              .sidebar-item {
                .sidebar-item-no-border {
                  border-bottom-width: 0px !important;
                }
                a {
                  display: block !important;
                }
                a {
                  overflow: hidden !important;
                }
                a {
                  text-overflow: ellipsis !important;
                }
                a {
                  white-space: nowrap !important;
                }
                a {
                  background-color: transparent !important;
                }
                a {
                  background-image: none !important;
                }
                a {
                  padding-top: 1.25rem;
                  padding-bottom: 1.25rem;
                }
                a {
                  font-size: 14px !important;
                }
                a {
                  font-weight: 500;
                }
                a {
                  text-transform: none !important;
                }
                a {
                  line-height: 18px !important;
                }
                a {
                  letter-spacing: 0em;
                }
                a {
                  --tw-text-opacity: 1 !important;
                  color: rgb(0 0 0 / var(--tw-text-opacity)) !important;
                }
                a {
                  text-decoration-line: none !important;
                }
                a {
                  --tw-shadow: 0 0 #0000 !important;
                  --tw-shadow-colored: 0 0 #0000 !important;
                  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
                }
                a {
                  transition-property: 0.3s !important;
                  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
                  transition-duration: 150ms !important;
                }
                a:hover {
                  --tw-bg-opacity: 1 !important;
                  background-color: rgb(249 250 251 / var(--tw-bg-opacity)) !important;
                }
                .sidebar-link-parent.rotate {
                  z-index: 2;
                }
                .sidebar-link-parent.rotate {
                  display: block !important;
                }
                .sidebar-link-parent.rotate {
                  display: flex !important;
                }
                .sidebar-link-parent.rotate {
                  height: 43px !important;
                }
                .sidebar-link-parent.rotate {
                  gap: 1rem !important;
                }
                .sidebar-link-parent.rotate {
                  overflow: hidden !important;
                }
                .sidebar-link-parent.rotate {
                  text-overflow: ellipsis !important;
                }
                .sidebar-link-parent.rotate {
                  white-space: nowrap !important;
                }
                .sidebar-link-parent.rotate {
                  padding-top: 1.25rem;
                  padding-bottom: 1.25rem;
                }
                .sidebar-link-parent.rotate {
                  font-weight: 700 !important;
                }
                .sidebar-link-parent.rotate {
                  text-transform: none !important;
                }
                .sidebar-link-parent.rotate {
                  line-height: 18px !important;
                }
                .sidebar-link-parent.rotate {
                  letter-spacing: 0em;
                }
                .sidebar-link-parent.rotate {
                  --tw-text-opacity: 1 !important;
                  color: rgb(74 111 165 / var(--tw-text-opacity)) !important;
                }
                .sidebar-link-parent.rotate {
                  transition-property: 0.3s !important;
                  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
                  transition-duration: 150ms !important;
                }
                .sidebar-link-parent {
                  display: flex !important;
                }
                .sidebar-link-parent {
                  gap: 1rem !important;
                }
                .sidebar-link-parent {
                  font-weight: 400 !important;
                }
                .sidebar-link-child {
                  display: flex !important;
                }
                .sidebar-link-child {
                  align-items: center;
                }
                .sidebar-link-child {
                  gap: 1rem !important;
                }
                .sidebar-link-child {
                  padding-left: 1rem !important;
                  padding-right: 1rem !important;
                }
                .sidebar-link-child {
                  padding-top: 1.25rem;
                  padding-bottom: 1.25rem;
                }
                .sidebar-link-child {
                  font-size: 13px !important;
                }
                .sidebar-link-subChild {
                  display: flex !important;
                }
                .sidebar-link-subChild {
                  height: -moz-fit-content !important;
                  height: fit-content !important;
                }
                .sidebar-link-subChild {
                  align-items: center;
                }
                .sidebar-link-subChild {
                  gap: 1rem;
                }
                .sidebar-link-subChild {
                  padding-top: 0.75rem;
                  padding-bottom: 0.75rem;
                }
                .sidebar-link-subChild {
                  font-size: 12px !important;
                }
                .sidebar-link-subChild {
                  .subChild-text {
                    max-width: 220px;
                  }
                  .subChild-text {
                    white-space: pre-wrap;
                  }
                }
                .header-title {
                  width: 110px;
                }
                .header-title {
                  white-space: nowrap;
                }
                .image {
                  height: 20px;
                }
                .list {
                  height: 1rem;
                }
                .list-child {
                  height: 0.75rem;
                }
              }
              .sidebar-submenu {
                margin: 0.125rem;
              }
              .sidebar-submenu {
                display: none;
              }
              .sidebar-submenu {
                list-style-type: none;
              }
              .sidebar-submenu {
                --tw-bg-opacity: 1;
                background-color: rgb(255 255 255 / var(--tw-bg-opacity));
              }
              .sidebar-submenu {
                .sidebar-submenu {
                  padding-left: 20px;
                }
                > li > a {
                  display: block;
                }
                > li > a {
                  padding-left: 15px;
                  padding-right: 15px;
                }
                > li > a {
                  padding-top: 5px;
                  padding-bottom: 5px;
                }
                > li > a {
                  font-size: 0.875rem;
                  line-height: 1.25rem;
                }
                > li > a {
                  --tw-text-opacity: 1;
                  color: rgb(75 85 99 / var(--tw-text-opacity));
                }
                > li > a {
                  > .fa {
                    width: 20px;
                  }
                  > .fa-angle-left,
                    > .fa-angle-down {
                    width: auto;
                  }
                  > a.rotate,
                    > a:hover {
                    --tw-text-opacity: 1;
                    color: rgb(255 255 255 / var(--tw-text-opacity));
                  }
                }
              }
            }
          }
        }
      }
      #BodyWrapDiv {
        display: block;
      }
      #BodyWrapDiv {
        min-height: 940px;
      }
      #BodyWrapDiv {
        width: 100% !important;
      }
      #BodyWrapDiv {
        --tw-bg-opacity: 1 !important;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
      }
      @media (min-width: 768px) {
        #BodyWrapDiv {
          flex-direction: column;
        }
      }
      @media screen and (min-width: 320px) {
        #BodyWrapDiv {
          flex-direction: column;
        }
      }
      #BodyWrapDiv {
        #SubMenuDiv {
          display: flex;
        }
        #SubMenuDiv {
          flex-wrap: wrap;
        }
        #SubMenuDiv {
          .list-group-item {
            margin-bottom: 15px;
          }
          .list-group-item {
            .menu_group_headers {
              display: flex;
            }
            .menu_group_headers {
              align-items: center;
            }
            .menu_group_headers {
              justify-content: center;
            }
          }
          .card {
            &.left-align {
              margin-left: auto;
            }
          }
          .card {
            margin-bottom: 23px;
          }
          .card {
            flex-basis: calc(33.33% - 20px);
          }
          .card {
            padding: 0px;
          }
          .card {
            padding: 0px;
          }
          .card:nth-child(3n + 1) {
            margin-left: auto;
          }
          .card-header {
            display: flex;
          }
          .card-header {
            align-items: center;
          }
          .card-header {
            justify-content: center;
          }
          .card-header {
            border-top-left-radius: 0.75rem;
            border-top-right-radius: 0.75rem;
          }
          .card-header {
            --tw-bg-opacity: 1;
            background-color: rgb(74 111 165 / var(--tw-bg-opacity));
          }
          .card-header {
            padding: 7px;
          }
          .card-header {
            --tw-text-opacity: 1;
            color: rgb(255 255 255 / var(--tw-text-opacity));
          }
          .card-header {
            img {
              --tw-bg-opacity: 1;
              background-color: rgb(255 255 255 / var(--tw-bg-opacity));
            }
            span {
              margin-left: 7px;
            }
          }
          .card-body {
            ul li .menu-category::after{
              background: url("/css/WEBootstrap/images/arrow-down-fill.png") no-repeat;
            }
            ul li .menu-category {
              position: relative;
            }
            ul li .menu-category {
              margin-left: 11px;
              margin-right: 11px;
            }
            ul li .menu-category {
              margin-top: 9px;
            }
            ul li .menu-category {
              display: flex;
            }
            ul li .menu-category {
              cursor: pointer;
            }
            ul li .menu-category {
              align-items: center;
            }
            ul li .menu-category {
              border-bottom-width: 1px;
            }
            ul li .menu-category {
              border-style: dashed;
            }
            ul li .menu-category {
              --tw-border-opacity: 1;
              border-color: rgb(209 213 219 / var(--tw-border-opacity));
            }
            ul li .menu-category {
              padding-top: 0.625rem;
              padding-bottom: 0.625rem;
            }
            ul li .menu-category {
              text-decoration-line: underline;
            }
            ul.items {
              display: none;
            }
            ul.items {
              li {
                border-bottom-width: 1px;
              }
              li {
                border-style: dashed;
              }
              li {
                --tw-border-opacity: 1;
                border-color: rgb(209 213 219 / var(--tw-border-opacity));
              }
              li {
                --tw-text-opacity: 1;
                color: rgb(74 111 165 / var(--tw-text-opacity));
              }
            }
            ul li {
              margin-left: 11px;
              margin-right: 11px;
            }
            ul li {
              padding-top: 0.625rem;
              padding-bottom: 0.625rem;
            }
            ul li {
              text-align: left;
            }
            ul li {
              text-decoration-line: underline;
            }
            ul li{
              img {
                height: 25px;
              }
              span {
                margin-left: 11px;
              }
            }
          }
        }
        h2 {
          font-size: 1.5rem;
          line-height: 2rem;
        }
        h2 {
          font-weight: 600;
        }
        a {
          --tw-text-opacity: 1;
          color: rgb(74 111 165 / var(--tw-text-opacity));
        }
        .centre {
          img {
            display: inline;
          }
        }
        .dataTables_scroll {
          .dataTables_scrollHead {
            display: flex;
          }
          .dataTables_scrollHead {
            justify-content: center;
          }
          .dataTables_scrollHead {
            .dataTables_scrollHeadInner {
              width: auto !important;
            }
          }
          .dataTables_scrollBody {
            border-style: none;
          }
        }
        button {
          margin: 0.5rem;
        }
        button {
          border-radius: 0.75rem;
        }
        button {
          border-style: none;
        }
        button {
          --tw-bg-opacity: 1;
          background-color: rgb(235 242 255 / var(--tw-bg-opacity));
        }
        button {
          --tw-bg-opacity: 0.8;
        }
        button {
          padding-left: 1.25rem;
          padding-right: 1.25rem;
        }
        button {
          padding-top: 0.625rem;
          padding-bottom: 0.625rem;
        }
        button {
          font-size: 1.125rem;
          line-height: 1.75rem;
        }
        button {
          font-weight: 600;
        }
        button {
          letter-spacing: 0.025em;
        }
        button {
          --tw-text-opacity: 1;
          color: rgb(74 111 165 / var(--tw-text-opacity));
        }
        button {
          --tw-shadow: 0 0 #0000;
          --tw-shadow-colored: 0 0 #0000;
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        }
        button:hover {
          --tw-bg-opacity: 1;
          background-color: rgb(74 111 165 / var(--tw-bg-opacity));
        }
        button:hover {
          --tw-text-opacity: 1;
          color: rgb(255 255 255 / var(--tw-text-opacity));
        }
        input[type="submit"], input[type="button"] {
          margin: 0.5rem;
        }
        input[type="submit"], input[type="button"] {
          border-radius: 0.75rem;
        }
        input[type="submit"], input[type="button"] {
          border-style: none;
        }
        input[type="submit"], input[type="button"] {
          --tw-bg-opacity: 1;
          background-color: rgb(235 242 255 / var(--tw-bg-opacity));
        }
        input[type="submit"], input[type="button"] {
          --tw-bg-opacity: 0.8;
        }
        input[type="submit"], input[type="button"] {
          padding-left: 1.25rem;
          padding-right: 1.25rem;
        }
        input[type="submit"], input[type="button"] {
          padding-top: 0.625rem;
          padding-bottom: 0.625rem;
        }
        input[type="submit"], input[type="button"] {
          font-size: 1.25rem;
          line-height: 1.75rem;
        }
        input[type="submit"], input[type="button"] {
          font-weight: 600;
        }
        input[type="submit"], input[type="button"] {
          letter-spacing: 0.025em;
        }
        input[type="submit"], input[type="button"] {
          --tw-text-opacity: 1;
          color: rgb(74 111 165 / var(--tw-text-opacity));
        }
        input[type="submit"], input[type="button"] {
          --tw-shadow: 0 0 #0000;
          --tw-shadow-colored: 0 0 #0000;
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        }
        input[type="submit"]:hover, input[type="button"]:hover {
          --tw-bg-opacity: 1;
          background-color: rgb(74 111 165 / var(--tw-bg-opacity));
        }
        input[type="submit"]:hover, input[type="button"]:hover {
          --tw-text-opacity: 1;
          color: rgb(255 255 255 / var(--tw-text-opacity));
        }
        button.btnCollapse {
          float: right;
        }
        button.btnCollapse {
          margin: 0.5rem;
        }
        button.btnCollapse {
          --tw-rotate: 180deg;
          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        }
        button.btnCollapse {
          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        }
        button.btnCollapse {
          border-radius: 0.75rem;
        }
        button.btnCollapse {
          border-style: none;
        }
        button.btnCollapse {
          --tw-bg-opacity: 1;
          background-color: rgb(235 242 255 / var(--tw-bg-opacity));
        }
        button.btnCollapse {
          --tw-bg-opacity: 0.8;
        }
        button.btnCollapse {
          padding-left: 1.25rem;
          padding-right: 1.25rem;
        }
        button.btnCollapse {
          padding-top: 0.625rem;
          padding-bottom: 0.625rem;
        }
        button.btnCollapse {
          font-size: 1.125rem;
          line-height: 1.75rem;
        }
        button.btnCollapse {
          font-weight: 600;
        }
        button.btnCollapse {
          letter-spacing: 0.025em;
        }
        button.btnCollapse {
          --tw-text-opacity: 1;
          color: rgb(74 111 165 / var(--tw-text-opacity));
        }
        button.btnCollapse {
          --tw-shadow: 0 0 #0000;
          --tw-shadow-colored: 0 0 #0000;
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        }
        button.btnCollapse{
          &.show {
            --tw-rotate: 0deg;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
          }
          &.show {
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
          }
        }
        .grid-container {
          display: grid;
        }
        .grid-container {
          width: -moz-fit-content;
          width: fit-content;
        }
        .grid-container {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .grid-container {
          gap: 1rem;
        }
        .grid-container {
          border-width: 1px;
        }
        .grid-container {
          --tw-border-opacity: 1;
          border-color: rgb(209 213 219 / var(--tw-border-opacity));
        }
        .grid-container {
          padding: 0.5rem;
        }
        @media screen and (max-width: 1100px) {
          .grid-container {
            grid-template-columns: repeat(1, minmax(0, 1fr));
          }
        }
        @media screen and (max-width: 770px) {
          .grid-container {
            grid-template-columns: repeat(1, minmax(0, 1fr));
          }
        }
        .grid-container {
          .grid-item-span2 {
            grid-column: span 2 / span 2;
          }
          .grid-item-span2 {
            border-width: 1px;
          }
          .grid-item-span2 {
            --tw-border-opacity: 1;
            border-color: rgb(107 114 128 / var(--tw-border-opacity));
          }
          .grid-item-span2 {
            padding: 1rem;
          }
          .grid-item {
            border-width: 1px;
          }
          .grid-item {
            --tw-border-opacity: 1;
            border-color: rgb(107 114 128 / var(--tw-border-opacity));
          }
          .grid-item {
            padding: 1rem;
          }
        }
        .grid-container-3 {
          display: grid;
        }
        .grid-container-3 {
          width: -moz-fit-content;
          width: fit-content;
        }
        .grid-container-3 {
          gap: 1rem;
        }
        .grid-container-3 {
          border-width: 1px;
        }
        .grid-container-3 {
          --tw-border-opacity: 1;
          border-color: rgb(209 213 219 / var(--tw-border-opacity));
        }
        .grid-container-3 {
          padding: 0.5rem;
        }
        .grid-container-3 {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          .grid-item-span2 {
            grid-column: span 2 / span 2;
          }
          .grid-item-span2 {
            border-width: 1px;
          }
          .grid-item-span2 {
            --tw-border-opacity: 1;
            border-color: rgb(107 114 128 / var(--tw-border-opacity));
          }
          .grid-item-span2 {
            padding: 1rem;
          }
          .grid-item {
            border-width: 1px;
          }
          .grid-item {
            --tw-border-opacity: 1;
            border-color: rgb(107 114 128 / var(--tw-border-opacity));
          }
          .grid-item {
            padding: 1rem;
          }
        }
        input[type="search"], input:not([type]), input[type="date"], input[type="month"] {
          border-radius: 0.75rem !important;
        }
        input[type="search"], input:not([type]), input[type="date"], input[type="month"] {
          border-width: 1px !important;
        }
        input[type="search"], input:not([type]), input[type="date"], input[type="month"] {
          --tw-border-opacity: 1 !important;
          border-color: rgb(74 111 165 / var(--tw-border-opacity)) !important;
        }
        input[type="search"], input:not([type]), input[type="date"], input[type="month"] {
          padding: 0.375rem;
        }
        input[type="search"]:focus, input:not([type]):focus, input[type="date"]:focus, input[type="month"]:focus {
          outline: 2px solid transparent;
          outline-offset: 2px;
        }
        .paginate_button {
          font-weight: 600;
        }
        .paginate_button:hover {
          border-radius: 0.375rem;
        }
        .paginate_button:hover {
          border-width: 1px;
        }
        .paginate_button:hover {
          border-style: solid;
        }
        .paginate_button:hover {
          border-color: transparent;
        }
        .paginate_button:hover {
          background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
        }
        .paginate_button:hover {
          --tw-gradient-from: #4a6fa5 var(--tw-gradient-from-position);
          --tw-gradient-to: rgb(74 111 165 / 0) var(--tw-gradient-to-position);
          --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
        }
        .paginate_button:hover {
          --tw-gradient-to: #4a6fa5 var(--tw-gradient-to-position);
        }
        .paginate_button:hover {
          --tw-text-opacity: 1 !important;
          color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
        }
        .show-zero-qty-button.highlighted {
          border-radius: 0.375rem;
        }
        .show-zero-qty-button.highlighted {
          border-style: none;
        }
        .show-zero-qty-button.highlighted {
          background-image: linear-gradient(to bottom, var(--tw-gradient-stops)) !important;
        }
        .show-zero-qty-button.highlighted {
          --tw-gradient-from: #4a6fa5 var(--tw-gradient-from-position);
          --tw-gradient-to: rgb(74 111 165 / 0) var(--tw-gradient-to-position);
          --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
        }
        .show-zero-qty-button.highlighted {
          --tw-gradient-to: #4a6fa5 var(--tw-gradient-to-position);
        }
        .show-zero-qty-button.highlighted {
          --tw-text-opacity: 1 !important;
          color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
        }
        .paginate_button.disabled:hover {
          background-image: none !important;
        }
        .paginate_button.disabled:hover {
          --tw-text-opacity: 1 !important;
          color: rgb(102 102 102 / var(--tw-text-opacity)) !important;
        }
        .paginate_button.current {
          border-radius: 0.375rem;
        }
        .paginate_button.current {
          border-style: none;
        }
        .paginate_button.current {
          background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
        }
        .paginate_button.current {
          --tw-gradient-from: #4a6fa5 var(--tw-gradient-from-position);
          --tw-gradient-to: rgb(74 111 165 / 0) var(--tw-gradient-to-position);
          --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
        }
        .paginate_button.current {
          --tw-gradient-to: #4a6fa5 var(--tw-gradient-to-position);
        }
        .paginate_button.current {
          --tw-text-opacity: 1 !important;
          color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
        }
        .dataTables_info {
          font-weight: 600;
        }
        .dataTables_info {
          --tw-text-opacity: 1;
          color: rgb(17 24 39 / var(--tw-text-opacity));
        }
        .dataTables_info {
          --tw-text-opacity: 0.5;
        }
        select {
          max-width: 280px;
        }
        select {
          border-radius: 0.75rem;
        }
        select {
          border-width: 1px;
        }
        select {
          --tw-border-opacity: 1;
          border-color: rgb(74 111 165 / var(--tw-border-opacity));
        }
        select {
          padding: 0.375rem;
        }
        input[type=checkbox] {
          accent-color: #4a6fa5;
        }
        @supports (accent-color: #fff) {
          .info {
            display: none;
          }
        }
        table {
          margin-left: auto;
          margin-right: auto;
        }
        table {
          margin-bottom: 10px;
        }
        table {
          margin-top: 1px;
        }
        table {
          width: auto !important;
        }
        table {
          flex-direction: column;
        }
        table {
          overflow-x: auto;
        }
        table {
          border-width: 1px;
        }
        table {
          --tw-border-opacity: 1;
          border-color: rgb(217 228 254 / var(--tw-border-opacity));
        }
        table {
          font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        }
        table {
          font-family: Rubik, sans-serif !important;
        }
        table {
          font-weight: 500;
        }
        table {
          --tw-shadow: 0px 3px 3px #E2ECF9;
          --tw-shadow-colored: 0px 3px 3px var(--tw-shadow-color);
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        }
        table {
          thead tr {
            justify-content: space-between;
          }
          thead tr {
            border-bottom-width: 1px;
          }
          thead tr {
            text-align: left;
          }
          th {
            align-items: center;
          }
          th {
            gap: 1rem;
          }
          th {
            --tw-bg-opacity: 1;
            background-color: rgb(74 111 165 / var(--tw-bg-opacity));
          }
          th {
            padding-left: 18px;
            padding-right: 18px;
          }
          th {
            padding-top: 10px;
            padding-bottom: 10px;
          }
          th {
            text-align: left;
          }
          th {
            vertical-align: middle !important;
          }
          th {
            font-size: 14px;
          }
          th {
            --tw-text-opacity: 1;
            color: rgb(255 255 255 / var(--tw-text-opacity));
          }
          th:hover {
            outline: 2px solid transparent !important;
            outline-offset: 2px !important;
          }
          th {
            input[type="submit"] {
              border-radius: 0.75rem;
            }
            input[type="submit"] {
              border-style: none;
            }
            input[type="submit"] {
              --tw-bg-opacity: 1 !important;
              background-color: rgb(235 242 255 / var(--tw-bg-opacity)) !important;
            }
            input[type="submit"] {
              --tw-bg-opacity: 0.8;
            }
            input[type="submit"] {
              padding-left: 1.25rem;
              padding-right: 1.25rem;
            }
            input[type="submit"] {
              font-size: 1.125rem;
              line-height: 1.75rem;
            }
            input[type="submit"] {
              font-weight: 600;
            }
            input[type="submit"] {
              letter-spacing: 0.025em;
            }
            input[type="submit"] {
              --tw-text-opacity: 1;
              color: rgb(74 111 165 / var(--tw-text-opacity));
            }
            input[type="submit"] {
              --tw-shadow: 0 0 #0000;
              --tw-shadow-colored: 0 0 #0000;
              box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
            }
            input[type="submit"]:hover {
              --tw-bg-opacity: 1;
              background-color: rgb(235 242 255 / var(--tw-bg-opacity));
            }
            input[type="submit"]:hover {
              --tw-bg-opacity: 0.8;
            }
            input[type="submit"]:hover {
              --tw-text-opacity: 1;
              color: rgb(74 111 165 / var(--tw-text-opacity));
            }
            input {
              --tw-text-opacity: 1;
              color: rgb(87 87 87 / var(--tw-text-opacity));
            }
            select {
              border-radius: 0.75rem;
            }
            select {
              border-width: 1px;
            }
            select {
              --tw-border-opacity: 1;
              border-color: rgb(74 111 165 / var(--tw-border-opacity));
            }
            select {
              padding: 0.5rem;
            }
            select {
              --tw-text-opacity: 1;
              color: rgb(87 87 87 / var(--tw-text-opacity));
            }
          }
          &.dataTable thead .sorting {
            &.bg-valid-url {
              background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAMCAYAAACwXJejAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB6SURBVHgBrZChDYAwEEV7CQKJZAMkI4BEsgGzMQYOJA4cI1R2g/JPXHNAqepPXi+5vDSXT0bFe99jdGAlok32FBEkQaQf4SFSQpAsBR4LzoRkTbbwTQNmk3B2vukALSgjggOXVFBjTC+RhRkVOF2mFoPw+ZtFMIJK72+iGDJZeER+wgAAAABJRU5ErkJggg==");
            }
          }
          &.dataTable thead .sorting_asc {
            &.bg-valid-url {
              background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAMCAYAAACwXJejAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB0SURBVHgBrc6xDYAgEAXQu8TC0tINLF3D0g1cwREYRcexo3QMNjg/MZgTTyp+8gO5vBwQqYiIkzuOrCggJjTAGxZAytrAeXSj/3iqFsabE86hYI70pxFtDRDQk+MN23ocSwYj2Jk5cJpk8AGf3RGiM9rp+QWoyXpXmmeRZwAAAABJRU5ErkJggg==");
            }
          }
          &.dataTable thead .sorting_desc {
            &.bg-valid-url {
              background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAMCAYAAACwXJejAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABqSURBVHgBrc+7DYAwDATQnMQgjMAGsAGrwQTMQQcjMAFtOkYwFyTzCYmrnHSxFL3ChntFRDqOll0ArPqPBNDcEBnwgTCAZq74eHYzkHfFEnYaOHvDjOGyhj0knZ2tL5qBD9BE8A8iOMXgBIXockUbNPXEAAAAAElFTkSuQmCC");
            }
          }
          &.dataTable thead .sorting {
            &.bg-invalid-url {
              background-image: url("https://cdn.datatables.net/1.10.14/images/sort_both.png");
            }
          }
          &.dataTable thead .sorting_asc {
            &.bg-invalid-url {
              background-image: url("https://cdn.datatables.net/1.10.14/images/sort_asc.png");
            }
          }
          &.dataTable thead .sorting_desc {
            &.bg-invalid-url {
              background-image: url("https://cdn.datatables.net/1.10.14/images/sort_desc.png");
            }
          }
          &.dataTable thead span.dt-column-order{
            &::after, &::before {
              --tw-content: "" !important;
              content: var(--tw-content) !important;
            }
          }
          &.dataTable thead span.dt-column-order {
            top: 45%;
          }
          &.dataTable thead span.dt-column-order {
            right: 5px;
          }
          &.dataTable thead span.dt-column-order {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAMCAYAAACwXJejAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB6SURBVHgBrZChDYAwEEV7CQKJZAMkI4BEsgGzMQYOJA4cI1R2g/JPXHNAqepPXi+5vDSXT0bFe99jdGAlok32FBEkQaQf4SFSQpAsBR4LzoRkTbbwTQNmk3B2vukALSgjggOXVFBjTC+RhRkVOF2mFoPw+ZtFMIJK72+iGDJZeER+wgAAAABJRU5ErkJggg==");
          }
          &.dataTable thead span.dt-column-order {
            background-repeat: no-repeat;
          }
          &.dataTable thead .dt-ordering-asc span.dt-column-order {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAMCAYAAACwXJejAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB0SURBVHgBrc6xDYAgEAXQu8TC0tINLF3D0g1cwREYRcexo3QMNjg/MZgTTyp+8gO5vBwQqYiIkzuOrCggJjTAGxZAytrAeXSj/3iqFsabE86hYI70pxFtDRDQk+MN23ocSwYj2Jk5cJpk8AGf3RGiM9rp+QWoyXpXmmeRZwAAAABJRU5ErkJggg==");
          }
          &.dataTable thead .dt-ordering-asc span.dt-column-order {
            background-repeat: no-repeat;
          }
          &.dataTable thead .dt-ordering-desc span.dt-column-order {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAMCAYAAACwXJejAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABqSURBVHgBrc+7DYAwDATQnMQgjMAGsAGrwQTMQQcjMAFtOkYwFyTzCYmrnHSxFL3ChntFRDqOll0ArPqPBNDcEBnwgTCAZq74eHYzkHfFEnYaOHvDjOGyhj0knZ2tL5qBD9BE8A8iOMXgBIXockUbNPXEAAAAAElFTkSuQmCC");
          }
          &.dataTable thead .dt-ordering-desc span.dt-column-order {
            background-repeat: no-repeat;
          }
          td {
            padding: 1.25rem;
          }
          td {
            vertical-align: middle !important;
          }
          td {
            input[type="submit"] {
              margin: 0.5rem;
            }
            input[type="submit"] {
              border-radius: 0.75rem;
            }
            input[type="submit"] {
              border-style: none;
            }
            input[type="submit"] {
              --tw-bg-opacity: 1;
              background-color: rgb(235 242 255 / var(--tw-bg-opacity));
            }
            input[type="submit"] {
              --tw-bg-opacity: 0.8;
            }
            input[type="submit"] {
              padding-left: 1.25rem;
              padding-right: 1.25rem;
            }
            input[type="submit"] {
              padding-top: 0.625rem;
              padding-bottom: 0.625rem;
            }
            input[type="submit"] {
              font-size: 1.25rem;
              line-height: 1.75rem;
            }
            input[type="submit"] {
              font-weight: 600;
            }
            input[type="submit"] {
              letter-spacing: 0.025em;
            }
            input[type="submit"] {
              --tw-text-opacity: 1;
              color: rgb(74 111 165 / var(--tw-text-opacity));
            }
            input[type="submit"] {
              --tw-shadow: 0 0 #0000;
              --tw-shadow-colored: 0 0 #0000;
              box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
            }
            input[type="submit"]:hover {
              --tw-bg-opacity: 1;
              background-color: rgb(74 111 165 / var(--tw-bg-opacity));
            }
            input[type="submit"]:hover {
              --tw-text-opacity: 1;
              color: rgb(255 255 255 / var(--tw-text-opacity));
            }
            input[type="number"], input[type="tel"], input[type="text"] {
              border-radius: 0.75rem;
            }
            input[type="number"], input[type="tel"], input[type="text"] {
              border-width: 1px;
            }
            input[type="number"], input[type="tel"], input[type="text"] {
              --tw-border-opacity: 1;
              border-color: rgb(74 111 165 / var(--tw-border-opacity));
            }
            input[type="number"], input[type="tel"], input[type="text"] {
              padding-left: 0.5rem;
              padding-right: 0.5rem;
            }
            input[type="number"], input[type="tel"], input[type="text"] {
              padding-top: 0.25rem;
              padding-bottom: 0.25rem;
            }
            input[type="number"], input[type="tel"], input[type="text"] {
              --tw-text-opacity: 1;
              color: rgb(87 87 87 / var(--tw-text-opacity));
            }
            input[type="number"]:focus, input[type="tel"]:focus, input[type="text"]:focus {
              outline: 2px solid transparent;
              outline-offset: 2px;
            }
            select {
              border-radius: 0.75rem;
            }
            select {
              border-width: 1px;
            }
            select {
              --tw-border-opacity: 1;
              border-color: rgb(74 111 165 / var(--tw-border-opacity));
            }
            select {
              padding: 0.5rem;
            }
            select {
              --tw-text-opacity: 1;
              color: rgb(87 87 87 / var(--tw-text-opacity));
            }
            .dropzone {
              border-radius: 0.375rem;
            }
            .dropzone {
              border-style: dashed;
            }
            .dropzone {
              .dz-message{
                div {
                  display: flex;
                }
                div {
                  justify-content: center;
                }
                div {
                  padding-bottom: 19px;
                }
                div{
                  img {
                    height: 33px;
                  }
                }
              }
            }
          }
          td.select {
            --tw-bg-opacity: 1 !important;
            background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
          }
          td.label {
            display: flex;
          }
          td.label {
            font-size: 1.25rem;
            line-height: 1.75rem;
          }
          tbody tr:last-of-type {
            --tw-border-opacity: 1;
            border-bottom-color: rgb(209 213 219 / var(--tw-border-opacity));
          }
          &.dataTable {
            tr:nth-of-type(odd) {
              --tw-bg-opacity: 1 !important;
              background-color: rgb(247 248 253 / var(--tw-bg-opacity)) !important;
            }
            tr:nth-of-type(odd) {
              outline-color: #fafafa !important;
            }
          }
          .striped_row {
            border-bottom-width: 1px;
          }
          .striped_row {
            --tw-text-opacity: 1;
            color: rgb(17 24 39 / var(--tw-text-opacity));
          }
          tr:nth-of-type(even) {
            --tw-bg-opacity: 1;
            background-color: rgb(255 255 255 / var(--tw-bg-opacity));
          }
          tr:nth-of-type(even) {
            outline-style: solid;
          }
          tr:nth-of-type(even) {
            outline-width: 1px;
          }
          tr:nth-of-type(even) {
            outline-color: #D9E4FE !important;
          }
          tr:nth-of-type(even) {
            &.selected {
              --tw-bg-opacity: 1 !important;
              background-color: rgb(214 226 255 / var(--tw-bg-opacity)) !important;
            }
          }
          tr:nth-of-type(odd) {
            --tw-bg-opacity: 1;
            background-color: rgb(255 255 255 / var(--tw-bg-opacity));
          }
          tr:nth-of-type(odd) {
            outline-style: solid;
          }
          tr:nth-of-type(odd) {
            outline-width: 1px;
          }
          tr:nth-of-type(odd) {
            outline-color: #D9E4FE !important;
          }
          tr:nth-of-type(odd) {
            &.selected {
              --tw-bg-opacity: 1 !important;
              background-color: rgb(214 226 255 / var(--tw-bg-opacity)) !important;
            }
          }
          tbody > tr.selected > * {
            --tw-text-opacity: 1;
            color: rgb(87 87 87 / var(--tw-text-opacity));
          }
          tbody > tr.selected > * {
            --tw-shadow: 0 0 #0000 !important;
            --tw-shadow-colored: 0 0 #0000 !important;
            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
          }
          .descending .image {
            height: 1.5rem;
          }
          .descending .image {
            --tw-rotate: 180deg;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
          }
          .descending .image {
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
          }
          th.ascending {
            cursor: s-resize;
          }
          th.descending {
            cursor: n-resize;
          }
          .image {
            height: 1.5rem;
          }
        }
        .page-content__block {
          position: relative;
        }
        .page-content__block {
          display: flex;
        }
        .page-content__block {
          max-height: 100% !important;
        }
        .page-content__block {
          width: 100% !important;
        }
        .page-content__block {
          justify-content: center;
        }
        .grid-container {
          width: 100% !important;
        }
        .dataTables_wrapper .dataTables_processing {
          background-image: none !important;
        }
        .table-container {
          width: 100% !important;
        }
        .table-container {
          overflow-x: auto !important;
        }
        .table-container {
          overflow-y: hidden !important;
        }
        .container-info--main {
          display: flex;
        }
        .container-info--main {
          min-height: 940px;
        }
        .container-info--main {
          .container-info--left {
            margin: 1.5rem;
          }
          .container-info--left {
            --tw-bg-opacity: 1;
            background-color: rgb(255 255 255 / var(--tw-bg-opacity));
          }
          @media (min-width: 768px) {
            .container-info--left {
              width: 40%;
            }
          }
          @media (min-width: 1024px) {
            .container-info--left {
              width: 35%;
            }
          }
          @media (min-width: 1280px) {
            .container-info--left {
              width: 25%;
            }
          }
          .container-info--left {
            .container-block {
              margin-top: 1.5rem;
              margin-bottom: 1.5rem;
            }
            .container-block {
              display: grid;
            }
            .container-block {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .container-block {
              grid-template-rows: repeat(2, minmax(0, 1fr));
            }
            .container-block {
              gap: 1rem;
            }
            .container-block {
              .container-wrapper {
                border-radius: 8.5px;
              }
              .container-wrapper {
                --tw-bg-opacity: 1;
                background-color: rgb(255 255 255 / var(--tw-bg-opacity));
              }
              .container-wrapper {
                padding-left: 1.5rem;
                padding-right: 1.5rem;
              }
              .container-wrapper {
                padding-top: 1rem;
                padding-bottom: 1rem;
              }
              .container-wrapper {
                --tw-shadow: 1px 3px 19px 0px #E2ECF9;
                --tw-shadow-colored: 1px 3px 19px 0px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
              }
            }
            .container-card {
              margin-top: 1rem;
              margin-bottom: 1rem;
            }
            .container-card {
              border-radius: 8.5px;
            }
            .container-card {
              --tw-bg-opacity: 1;
              background-color: rgb(255 255 255 / var(--tw-bg-opacity));
            }
            .container-card {
              padding: 0.5rem;
            }
            .container-card {
              padding: 1.5rem;
            }
            .container-card {
              --tw-shadow: 1px 3px 19px 0px #E2ECF9;
              --tw-shadow-colored: 1px 3px 19px 0px var(--tw-shadow-color);
              box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
            }
            .container-card {
              .container-card-title {
                border-bottom-width: 2px;
              }
              .container-card-title {
                border-style: solid;
              }
              .container-card-title {
                --tw-border-opacity: 1;
                border-bottom-color: rgb(236 236 236 / var(--tw-border-opacity));
              }
              .container-card-title {
                padding-top: 1.5rem;
                padding-bottom: 1.5rem;
              }
              .container-card-title {
                text-align: start;
              }
              .container-card-title {
                font-size: 16px;
              }
              .container-card-title {
                font-weight: 600;
              }
              .container-card-subTitle {
                text-align: start;
              }
              .container-card-subTitle {
                font-size: 13px;
              }
              .container-card-subTitle {
                --tw-text-opacity: 1;
                color: rgb(176 176 176 / var(--tw-text-opacity));
              }
              .tsport-block {
                display: grid;
              }
              .tsport-block {
                grid-template-rows: repeat(2, minmax(0, 1fr));
              }
              .tsport-block {
                gap: 0.5rem;
              }
              .tsport-block {
                padding-top: 1rem;
              }
              @media (min-width: 768px) {
                .tsport-block {
                  grid-template-columns: repeat(3, minmax(0, 1fr));
                }
              }
              @media (min-width: 1024px) {
                .tsport-block {
                  grid-template-columns: repeat(3, minmax(0, 1fr));
                }
              }
              @media (min-width: 1280px) {
                .tsport-block {
                  grid-template-columns: repeat(4, minmax(0, 1fr));
                }
              }
              .tsport-block {
                .tsport-container {
                  margin-bottom: 1rem;
                }
                .tsport-container {
                  --tw-bg-opacity: 1;
                  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
                }
                .tsport-container {
                  padding: 0.5rem;
                }
              }
              .shipment-details--main {
                margin-top: 1.5rem;
              }
              .shipment-details--main {
                display: flex;
              }
              .shipment-details--main {
                width: 100%;
              }
              .shipment-details--main{
                .shipment-tracker{
                  .tracker-line {
                    display: flex;
                  }
                  .tracker-line {
                    height: 50px;
                  }
                  .tracker-line {
                    justify-content: center;
                  }
                }
                .shipment-details--block {
                  margin-left: 1rem;
                }
                .shipment-details--block {
                  width: 100%;
                }
                .shipment-details--block{
                  .shipment-details-wrapper {
                    margin-bottom: 0.5rem;
                  }
                  .shipment-details-wrapper{
                    .title {
                      text-align: start;
                    }
                    .title {
                      font-size: 15px;
                    }
                    .title {
                      font-weight: 600;
                    }
                    .shipment-details-container {
                      display: grid;
                    }
                    .shipment-details-container {
                      grid-template-columns: repeat(2, minmax(0, 1fr));
                    }
                    .shipment-details-container {
                      grid-template-rows: repeat(1, minmax(0, 1fr));
                    }
                    .shipment-details-container {
                      gap: 0.25rem;
                    }
                    .shipment-details-container {
                      padding-top: 1rem;
                      padding-bottom: 1rem;
                    }
                    .shipment-details-container {
                      text-align: start;
                    }
                    .shipment-details-container{
                      .details-block{
                        .shipment-detail-title {
                          white-space: nowrap;
                        }
                        .shipment-detail-title {
                          font-size: 12.33px;
                        }
                        .shipment-detail-title {
                          font-weight: 600;
                        }
                        .shipment-detail-title {
                          --tw-text-opacity: 1;
                          color: rgb(176 176 176 / var(--tw-text-opacity));
                        }
                        .shipment-detail-text {
                          font-size: 12px;
                        }
                        .shipment-detail-text {
                          font-weight: 600;
                        }
                        .shipment-detail-text {
                          --tw-text-opacity: 1;
                          color: rgb(74 111 165 / var(--tw-text-opacity));
                        }
                      }
                    }
                  }
                }
              }
            }
            .title {
              white-space: nowrap;
            }
            .title {
              text-align: start;
            }
            .title {
              font-size: 12.33px;
            }
            .title {
              font-weight: 600;
            }
            .text {
              text-align: start;
            }
            .text {
              font-size: 12px;
            }
            .text {
              font-weight: 600;
            }
            .text {
              --tw-text-opacity: 1;
              color: rgb(74 111 165 / var(--tw-text-opacity));
            }
          }
          .container-info--right {
            --tw-bg-opacity: 1;
            background-color: rgb(255 255 255 / var(--tw-bg-opacity));
          }
          @media (min-width: 768px) {
            .container-info--right {
              width: 60%;
            }
          }
          @media (min-width: 1024px) {
            .container-info--right {
              width: 65%;
            }
          }
          @media (min-width: 1280px) {
            .container-info--right {
              width: 75%;
            }
          }
          .container-info--right {
            iframe {
              height: 100%;
            }
            iframe {
              width: 100%;
            }
          }
        }
        .notification-icon {
          position: relative;
        }
        .notification-icon {
          float: right;
        }
        .notification-icon {
          cursor: pointer;
        }
        .notification-icon {
          padding-top: 1.5rem;
          padding-bottom: 1.5rem;
        }
        .notification-icon {
          padding-left: 0.5rem;
          padding-right: 0.5rem;
        }
        .notification-icon{
          img {
            height: 2rem;
          }
          img {
            width: 2rem;
          }
          img {
            cursor: pointer;
          }
          .notification-count {
            position: absolute;
          }
          .notification-count {
            top: 0px;
          }
          .notification-count {
            right: 0px;
          }
          .notification-count {
            border-radius: 50%;
          }
          .notification-count {
            --tw-bg-opacity: 1;
            background-color: rgb(255 0 0 / var(--tw-bg-opacity));
          }
          .notification-count {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
          }
          .notification-count {
            font-size: 1rem;
            line-height: 1.5rem;
          }
          .notification-count {
            --tw-text-opacity: 1;
            color: rgb(255 255 255 / var(--tw-text-opacity));
          }
        }
        .filter {
          position: relative;
        }
        .filter {
          float: right;
        }
        .filter {
          display: flex;
        }
        .filter {
          cursor: pointer;
        }
        .filter {
          align-items: center;
        }
        .filter {
          padding-top: 1.5rem;
          padding-bottom: 1.5rem;
        }
        .filter {
          padding-left: 0.5rem;
          padding-right: 0.5rem;
        }
        .filter{
          img {
            height: 28px;
          }
          img {
            width: 25px;
          }
          img {
            cursor: pointer;
          }
        }
        .filter-section {
          position: fixed;
        }
        .filter-section {
          right: 0px;
        }
        .filter-section {
          bottom: 0px;
        }
        .filter-section {
          top: 88px;
        }
        .filter-section {
          z-index: 1;
        }
        .filter-section {
          display: none;
        }
        .filter-section {
          height: auto;
        }
        .filter-section {
          width: 293px;
        }
        .filter-section {
          overflow-x: hidden;
        }
        .filter-section {
          --tw-bg-opacity: 1;
          background-color: rgb(255 255 255 / var(--tw-bg-opacity));
        }
        .filter-section {
          padding: 1.25rem;
        }
        .filter-section {
          --tw-shadow: -2px 0 5px rgba(0,0,0,0.1);
          --tw-shadow-colored: -2px 0 5px var(--tw-shadow-color);
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        }
        .filter-section {
          transition-property: 0.5s;
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-duration: 150ms;
        }
        .filter-section {
          .close-icon {
            position: absolute;
          }
          .close-icon {
            right: 0.625rem;
          }
          .close-icon {
            top: 3.13rem;
          }
          .close-icon {
            height: 13px;
          }
          .close-icon {
            width: 13px;
          }
          .close-icon {
            cursor: pointer;
          }
          .filter-inner {
            padding: 1.25rem;
          }
          .filter-inner {
            .title {
              white-space: nowrap;
            }
            .title {
              text-align: start;
            }
            .title {
              font-size: 16.5px;
            }
            .title {
              font-weight: 600;
            }
          }
          .filter-body {
            padding: 1.25rem;
          }
          .filter-body {
            .main-input {
              margin-bottom: 17px;
            }
            .main-input {
              width: 100%;
            }
            .main-input{
              .input-label {
                margin-bottom: 5px;
              }
              .input-label {
                text-align: start;
              }
              .element{
                input, select {
                  height: 34px;
                }
                input, select {
                  width: 100%;
                }
                input, select {
                  border-radius: 8.03px;
                }
                input, select {
                  --tw-border-opacity: 1 !important;
                  border-color: rgb(213 213 213 / var(--tw-border-opacity)) !important;
                }
                .choices {
                  height: auto;
                }
                .choices {
                  width: 100%;
                }
                .choices {
                  text-align: left;
                }
                .choices {
                  --tw-text-opacity: 1;
                  color: rgb(0 0 0 / var(--tw-text-opacity));
                }
                .choices{
                  .choices__inner {
                    min-height: 0px !important;
                  }
                  .choices__inner {
                    border-radius: 8.03px;
                  }
                  .choices__inner {
                    --tw-border-opacity: 1;
                    border-color: rgb(213 213 213 / var(--tw-border-opacity));
                  }
                  .choices__inner {
                    padding-left: 7.5px !important;
                    padding-right: 7.5px !important;
                  }
                  .choices__inner {
                    padding-top: 6.5px !important;
                  }
                  .choices__inner {
                    padding-bottom: 3.75px !important;
                  }
                  .choices__inner{
                    background: transparent;
                    .choices__list--single {
                      padding-top: 0.125rem;
                    }
                    .choices__list--single{
                      .choices__item {
                        --tw-text-opacity: 1;
                        color: rgb(74 111 165 / var(--tw-text-opacity));
                      }
                    }
                  }
                  .choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
                    --tw-bg-opacity: 1;
                    background-color: rgb(233 239 255 / var(--tw-bg-opacity));
                  }
                  .choices__list[aria-expanded] .choices__item--selectable.is-selected {
                    --tw-bg-opacity: 1;
                    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
                  }
                  .choices__list[aria-expanded] .choices__item--selectable.is-selected {
                    --tw-text-opacity: 1;
                    color: rgb(74 111 165 / var(--tw-text-opacity));
                  }
                  .choices__list--dropdown{
                    .choices__list {
                      max-height: 130px;
                    }
                  }
                  .choices__list--dropdown .choices__item--selectable::after, .choices__list[aria-expanded] .choices__item--selectable{
                    &::after {
                      --tw-content: "";
                      content: var(--tw-content);
                    }
                  }
                  .choices__list--dropdown {
                    margin-top: 0.25rem;
                  }
                }
              }
            }
            .separator {
              margin-bottom: 8px;
            }
            .separator {
              font-size: 13px;
            }
          }
        }
        .comment-section {
          position: fixed;
        }
        .comment-section {
          right: 0px;
        }
        .comment-section {
          bottom: 0px;
        }
        .comment-section {
          top: 66px;
        }
        .comment-section {
          z-index: 1;
        }
        .comment-section {
          display: none;
        }
        .comment-section {
          height: auto;
        }
        .comment-section {
          width: 293px;
        }
        .comment-section {
          overflow-x: hidden;
        }
        .comment-section {
          --tw-bg-opacity: 1;
          background-color: rgb(255 255 255 / var(--tw-bg-opacity));
        }
        .comment-section {
          padding: 1.25rem;
        }
        .comment-section {
          --tw-shadow: -2px 0 5px rgba(0,0,0,0.1);
          --tw-shadow-colored: -2px 0 5px var(--tw-shadow-color);
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        }
        .comment-section {
          transition-property: 0.5s;
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-duration: 150ms;
        }
        .comment-section {
          .comments-inner {
            padding: 1.25rem;
          }
          .comments-inner {
            .title {
              white-space: nowrap;
            }
            .title {
              text-align: start;
            }
            .title {
              font-size: 16.5px;
            }
            .title {
              font-weight: 600;
            }
            .comments-card {
              margin-top: 1rem;
              margin-bottom: 1rem;
            }
            .comments-card {
              border-radius: 8.5px;
            }
            .comments-card {
              --tw-bg-opacity: 1;
              background-color: rgb(255 255 255 / var(--tw-bg-opacity));
            }
            .comments-card {
              padding: 0.5rem;
            }
            .comments-card {
              padding: 1.5rem;
            }
            .comments-card {
              --tw-shadow: 1px 3px 19px 0px #E2ECF9;
              --tw-shadow-colored: 1px 3px 19px 0px var(--tw-shadow-color);
              box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
            }
            .comments-card {
              .comments-card-title {
                margin-bottom: 0.5rem;
              }
              .comments-card-title {
                display: flex;
              }
              .comments-card-title {
                justify-content: space-between;
              }
              .comments-card-title {
                white-space: nowrap;
              }
              .comments-card-title {
                text-align: start;
              }
              .comments-card-title {
                font-size: 13.36px;
              }
              .comments-card-title {
                font-weight: 600;
              }
              .comments-card-title {
                span.itemcode {
                  --tw-text-opacity: 1;
                  color: rgb(74 111 165 / var(--tw-text-opacity));
                }
              }
              .comments-content {
                text-align: start;
              }
              .comments-content {
                font-size: 12px;
              }
            }
          }
          .title {
            white-space: nowrap;
          }
          .title {
            text-align: start;
          }
          .title {
            font-size: 16.5px;
          }
          .title {
            font-weight: 600;
          }
        }
        .close-icon {
          position: absolute;
        }
        .close-icon {
          right: 0.625rem;
        }
        .close-icon {
          top: 1.5rem;
        }
        .close-icon {
          height: 13px;
        }
        .close-icon {
          width: 13px;
        }
        .close-icon {
          cursor: pointer;
        }
        .card {
          margin: auto;
        }
        .card {
          margin-top: 1rem;
          margin-bottom: 1rem;
        }
        .card {
          width: 90%;
        }
        .card {
          border-radius: 8.5px;
        }
        .card {
          --tw-bg-opacity: 1;
          background-color: rgb(255 255 255 / var(--tw-bg-opacity));
        }
        .card {
          padding: 0.5rem;
        }
        .card {
          padding: 1.5rem;
        }
        .card {
          padding: 2.5rem;
        }
        .card {
          --tw-shadow: 1px 3px 19px 0px #E2ECF9;
          --tw-shadow-colored: 1px 3px 19px 0px var(--tw-shadow-color);
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        }
        .card {
          .dropdown-section {
            margin-bottom: 2.5rem;
          }
          .dropdown-section {
            display: flex;
          }
          .dropdown-section {
            flex-direction: row;
          }
          .dropdown-section {
            justify-content: center;
          }
          .dropdown-section{
            .dropdownMenu {
              position: relative;
            }
            .dropdownMenu {
              padding-right: 75px;
            }
            .dropdownMenu:hover {
              --tw-text-opacity: 1;
              color: rgb(74 111 165 / var(--tw-text-opacity));
            }
            .dropdown-head::after {
              background: url("/css/WEBootstrap/images/arrow-down-fill.png") no-repeat;
            }
            .dropdown-head {
              position: relative;
            }
            .dropdown-head {
              display: flex;
            }
            .dropdown-head {
              cursor: pointer;
            }
            .dropdown-head {
              align-items: center;
            }
            .dropdown-head::after {
              content: var(--tw-content);
              position: absolute;
            }
            .dropdown-head::after {
              content: var(--tw-content);
              right: -1rem;
            }
            .dropdown-head::after {
              content: var(--tw-content);
              top: 37%;
            }
            .dropdown-head::after {
              content: var(--tw-content);
              height: 1.25rem;
            }
            .dropdown-head::after {
              content: var(--tw-content);
              width: 1.25rem;
            }
            .dropdown-head::after {
              --tw-content: "";
              content: var(--tw-content);
            }
            .dropdown-head{
              span {
                padding-left: 7px;
                padding-right: 7px;
              }
              span {
                padding-top: 0px;
                padding-bottom: 0px;
              }
            }
            .dropdown-body {
              position: absolute;
            }
            .dropdown-body {
              left: 0px;
            }
            .dropdown-body {
              top: 100%;
            }
            .dropdown-body {
              display: none;
            }
            .dropdown-body {
              border-radius: 0 0 11px 12px;
            }
            .dropdown-body {
              --tw-bg-opacity: 1;
              background-color: rgb(255 255 255 / var(--tw-bg-opacity));
            }
            .dropdown-body {
              padding: 0.5rem;
            }
            .dropdown-body {
              padding: 1.5rem;
            }
            .dropdown-body {
              text-align: left;
            }
            .dropdown-body {
              --tw-shadow: 1px 3px 19px 0px #E2ECF9;
              --tw-shadow-colored: 1px 3px 19px 0px var(--tw-shadow-color);
              box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
            }
            .dropdown-body {
              transition-property: display;
              transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
              transition-duration: 150ms;
            }
            .dropdown-body {
              transition-property: display;
              transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
              transition-duration: 150ms;
            }
            .dropdown-body {
              transition-duration: 0.5s;
            }
            .dropdown-body {
              transition-duration: 0.5s;
            }
            .dropdown-body {
              transition-timing-function: ease;
            }
            .dropdown-body {
              transition-timing-function: ease;
            }
            .dropdown-body:hover {
              display: block;
            }
            .dropdown-body:hover {
              display: block;
            }
            .dropdown-body {
              ul li {
                border-bottom-width: 1px;
              }
              ul li {
                border-style: dashed;
              }
              ul li {
                --tw-border-opacity: 1;
                border-color: rgb(209 213 219 / var(--tw-border-opacity));
              }
              ul li {
                line-height: 38px;
              }
              ul li {
                text-wrap: nowrap;
              }
              ul li {
                &:last-child {
                  border-style: none;
                }
              }
              a {
                --tw-text-opacity: 1;
                color: rgb(17 24 39 / var(--tw-text-opacity));
              }
            }
            .dropdownMenu:hover .dropdown-body {
              display: block;
            }
            .dropdownMenu:not(:hover) .dropdown-body {
              pointer-events: none;
            }
            .dropdownMenu:not(:hover) .dropdown-body {
              visibility: hidden;
            }
            .dropdownMenu:hover .dropdown-body {
              display: block;
            }
            .dropdownMenu:hover .dropdown-head::after {
              background: url("/css/WEBootstrap/images/arrow-up-fill.png") no-repeat;
            }
          }
          .item-details {
            margin: auto;
          }
          .item-details {
            margin-top: 30px;
          }
          .item-details {
            display: flex;
          }
          .item-details{
            .item-img {
              display: flex;
            }
            .item-img {
              min-width: 440px;
            }
            .item-img {
              align-items: center;
            }
            .item-img {
              justify-content: center;
            }
            .item-img {
              border-radius: 0.75rem;
            }
            .item-img {
              border-width: 1px;
            }
            .item-img {
              border-bottom-width: 1px;
            }
            .item-img {
              --tw-border-opacity: 1;
              border-color: rgb(209 213 219 / var(--tw-border-opacity));
            }
            .item-img {
              padding: 49px;
            }
            .item-img{
              img {
                max-height: 100%;
              }
              img {
                max-width: 100%;
              }
            }
            .item-desc {
              flex: 1 1 0%;
            }
            .item-desc {
              padding-left: 25px;
            }
            .item-desc{
              .item-title {
                padding-bottom: 18px;
              }
              .item-title {
                text-align: left;
              }
              .item-title {
                font-size: 2.25rem;
                line-height: 2.5rem;
              }
              .item-title {
                --tw-text-opacity: 1;
                color: rgb(74 111 165 / var(--tw-text-opacity));
              }
              .item-price {
                margin-bottom: 1.5rem;
              }
              .item-price {
                display: flex;
              }
              .item-price {
                align-items: center;
              }
              .item-price {
                gap: 15px;
              }
              .item-price {
                border-bottom-width: 1px;
              }
              .item-price {
                --tw-border-opacity: 1;
                border-color: rgb(209 213 219 / var(--tw-border-opacity));
              }
              .item-price {
                text-align: left;
              }
              .item-price {
                font-size: 21px;
              }
              .item-price {
                --tw-text-opacity: 1;
                color: rgb(243 45 45 / var(--tw-text-opacity));
              }
              .item-price{
                .item-border-margin {
                  margin-bottom: 13px;
                }
                .item-border-margin{
                  .cost {
                    border-radius: 3px;
                  }
                  .cost {
                    --tw-bg-opacity: 1;
                    background-color: rgb(239 211 61 / var(--tw-bg-opacity));
                  }
                  .cost {
                    padding-left: 15px;
                    padding-right: 15px;
                  }
                  .cost {
                    padding-top: 0px;
                    padding-bottom: 0px;
                  }
                  .cost {
                    font-size: 17px;
                  }
                  .cost {
                    --tw-text-opacity: 1;
                    color: rgb(0 0 0 / var(--tw-text-opacity));
                  }
                  .longdesc {
                    padding-left: 15px;
                    padding-right: 15px;
                  }
                  .longdesc {
                    font-size: 17px;
                  }
                  .longdesc {
                    --tw-text-opacity: 1;
                    color: rgb(0 0 0 / var(--tw-text-opacity));
                  }
                }
              }
              .item-keys {
                display: grid;
              }
              .item-keys {
                grid-template-columns: repeat(2, minmax(0, 1fr));
              }
              .item-keys {
                grid-template-rows: repeat(7, minmax(0, 1fr));
              }
              .item-keys {
                gap: 1rem;
              }
              .item-keys {
                text-align: start;
              }
              .item-keys{
                div {
                  padding-bottom: 13px;
                }
                div {
                  font-weight: 600;
                }
                div {
                  span {
                    font-weight: 500;
                  }
                  span {
                    color: rgba(17, 24, 39, 0.5);
                  }
                }
              }
            }
          }
        }
        .dots-icon {
          img {
            height: 19px;
          }
          img {
            width: 19px;
          }
          img {
            cursor: pointer;
          }
        }
        .po-items-accordion-content {
          display: none;
        }
        .po-items-accordion-content {
          .po-items--content-block {
            padding: 1rem;
          }
          .po-items--content-block{
            .comments-block {
              margin-bottom: 1rem;
            }
            .comments-block {
              display: flex;
            }
            .comments-block {
              flex-direction: column;
            }
            .comments-block{
              .title {
                white-space: nowrap;
              }
              .title {
                text-align: start;
              }
              .title {
                font-size: 14px;
              }
              .title {
                font-weight: 600;
              }
            }
          }
        }
        .dt-container {
          .dt-length {
            float: left !important;
          }
          .dt-length {
            margin-left: 17px;
          }
          .dt-length {
            label {
              padding-left: 0.5rem;
            }
          }
          .dt-search {
            float: right;
          }
          .dt-search {
            margin-right: 17px;
          }
          .dt-info {
            float: left;
          }
          .dt-info {
            clear: both;
          }
          .dt-info {
            padding-top: 0.755em;
          }
          .dt-paging {
            float: right;
          }
          .dt-paging {
            padding-top: 0.755em;
          }
          .dt-paging {
            text-align: right;
          }
          .dt-paging {
            .dt-paging-button {
              font-weight: 600;
            }
            .dt-paging-button:hover {
              border-width: 1px;
            }
            .dt-paging-button:hover {
              border-color: transparent;
            }
            .dt-paging-button:hover {
              background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
            }
            .dt-paging-button:hover {
              --tw-gradient-from: #4a6fa5 var(--tw-gradient-from-position);
              --tw-gradient-to: rgb(74 111 165 / 0) var(--tw-gradient-to-position);
              --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
            }
            .dt-paging-button:hover {
              --tw-gradient-to: #4a6fa5 var(--tw-gradient-to-position);
            }
            .dt-paging-button:hover {
              --tw-text-opacity: 1 !important;
              color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
            }
            .dt-paging-button.disabled {
              --tw-bg-opacity: 1;
              background-color: rgb(235 242 255 / var(--tw-bg-opacity));
            }
            .dt-paging-button.disabled {
              --tw-text-opacity: 1;
              color: rgb(235 242 255 / var(--tw-text-opacity));
            }
            .dt-paging-button.disabled {
              &:hover {
                background-image: none !important;
              }
              &:hover {
                color: rgba(0,0,0,0.5) !important;
              }
            }
            .dt-paging-button.current {
              border-style: none;
            }
            .dt-paging-button.current {
              background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
            }
            .dt-paging-button.current {
              --tw-gradient-from: #4a6fa5 var(--tw-gradient-from-position);
              --tw-gradient-to: rgb(74 111 165 / 0) var(--tw-gradient-to-position);
              --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
            }
            .dt-paging-button.current {
              --tw-gradient-to: #4a6fa5 var(--tw-gradient-to-position);
            }
            .dt-paging-button.current {
              --tw-text-opacity: 1 !important;
              color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
            }
          }
          button {
            background-image: none;
          }
          .dtsb-logicContainer {
            background-image: none;
          }
          .dt-scroll .dt-scroll-head .dt-scroll-headInner, .dt-scroll .dt-scroll-foot .dt-scroll-footInner {
            margin: auto;
          }
        }
        div.dt-buttons>.dt-button, div.dt-buttons>div.dt-button-split .dt-button {
          background-image: none;
        }
        .choices.milestone {
          height: auto;
        }
        .choices.milestone {
          width: 100%;
        }
        .choices.milestone {
          text-align: left;
        }
        .choices.milestone {
          --tw-text-opacity: 1;
          color: rgb(0 0 0 / var(--tw-text-opacity));
        }
        .choices.milestone{
          .choices__inner {
            display: table-caption;
          }
          .choices__inner {
            min-height: 0px !important;
          }
          .choices__inner {
            border-radius: 8.03px;
          }
          .choices__inner {
            --tw-border-opacity: 1;
            border-color: rgb(74 111 165 / var(--tw-border-opacity));
          }
          .choices__inner {
            padding-left: 7.5px !important;
            padding-right: 7.5px !important;
          }
          .choices__inner {
            padding-top: 6.5px !important;
          }
          .choices__inner {
            padding-bottom: 3.75px !important;
          }
          .choices__inner{
            background: transparent;
            .choices__list--multiple {
              padding-top: 0.125rem;
            }
            .choices__list--multiple{
              .choices__item {
                --tw-bg-opacity: 1;
                background-color: rgb(74 111 165 / var(--tw-bg-opacity));
              }
            }
            .choices__input {
              --tw-bg-opacity: 1;
              background-color: rgb(255 255 255 / var(--tw-bg-opacity));
            }
            button.choices__button {
              margin: 5px !important;
            }
            button.choices__button {
              padding-top: 0px !important;
              padding-bottom: 0px !important;
            }
            button.choices__button {
              padding-left: 16px !important;
            }
            button.choices__button {
              padding-right: 0px !important;
            }
          }
          .choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
            --tw-bg-opacity: 1;
            background-color: rgb(233 239 255 / var(--tw-bg-opacity));
          }
          .choices__list[aria-expanded] .choices__item--selectable.is-selected {
            --tw-bg-opacity: 1;
            background-color: rgb(255 255 255 / var(--tw-bg-opacity));
          }
          .choices__list[aria-expanded] .choices__item--selectable.is-selected {
            --tw-text-opacity: 1;
            color: rgb(74 111 165 / var(--tw-text-opacity));
          }
          .choices__list--dropdown {
            position: absolute !important;
          }
          .choices__list--dropdown {
            z-index: 9999 !important;
          }
          .choices__list--dropdown {
            width: 75%;
          }
          .choices__list--dropdown{
            .choices__list {
              max-height: 120px;
            }
          }
          .choices__list--dropdown .choices__item--selectable::after, .choices__list[aria-expanded] .choices__item--selectable{
            &::after {
              --tw-content: "";
              content: var(--tw-content);
            }
          }
          .choices__list--dropdown .choices__item--selectable::after, .choices__list[aria-expanded] .choices__item--selectable {
            padding-right: 0px;
          }
          .choices__list--dropdown {
            position: relative;
          }
          .choices__list--dropdown {
            margin-top: 0.25rem;
          }
        }
        .choices.debtorafilliatios{
          .choices__inner {
            border-radius: 8.03px;
          }
          .choices__inner {
            --tw-border-opacity: 1;
            border-color: rgb(74 111 165 / var(--tw-border-opacity));
          }
          .choices__inner{
            background: transparent;
            .choices__input {
              --tw-bg-opacity: 1;
              background-color: rgb(255 255 255 / var(--tw-bg-opacity));
            }
          }
          .choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
            --tw-bg-opacity: 1;
            background-color: rgb(233 239 255 / var(--tw-bg-opacity));
          }
        }
        .choices-default-style{
          input, select {
            height: 34px;
          }
          input, select {
            width: 100%;
          }
          input, select {
            border-radius: 8.03px;
          }
          input, select {
            --tw-border-opacity: 1 !important;
            border-color: rgb(213 213 213 / var(--tw-border-opacity)) !important;
          }
          .choices {
            height: auto;
          }
          .choices {
            width: 100%;
          }
          .choices {
            text-align: left;
          }
          .choices {
            --tw-text-opacity: 1;
            color: rgb(0 0 0 / var(--tw-text-opacity));
          }
          .choices{
            .choices__inner {
              min-height: 0px !important;
            }
            .choices__inner {
              border-radius: 8.03px;
            }
            .choices__inner {
              --tw-border-opacity: 1;
              border-color: rgb(213 213 213 / var(--tw-border-opacity));
            }
            .choices__inner {
              padding-left: 7.5px !important;
              padding-right: 7.5px !important;
            }
            .choices__inner {
              padding-top: 6.5px !important;
            }
            .choices__inner {
              padding-bottom: 3.75px !important;
            }
            .choices__inner{
              background: transparent;
              .choices__list--single {
                padding-top: 0.125rem;
              }
              .choices__list--single{
                .choices__item {
                  --tw-text-opacity: 1;
                  color: rgb(74 111 165 / var(--tw-text-opacity));
                }
              }
            }
            .choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
              --tw-bg-opacity: 1;
              background-color: rgb(233 239 255 / var(--tw-bg-opacity));
            }
            .choices__list[aria-expanded] .choices__item--selectable.is-selected {
              --tw-bg-opacity: 1;
              background-color: rgb(255 255 255 / var(--tw-bg-opacity));
            }
            .choices__list[aria-expanded] .choices__item--selectable.is-selected {
              --tw-text-opacity: 1;
              color: rgb(74 111 165 / var(--tw-text-opacity));
            }
            .choices__list--dropdown {
              z-index: 99 !important;
            }
            .choices__list--dropdown{
              .choices__list {
                max-height: 130px;
              }
            }
            .choices__list--dropdown .choices__item--selectable::after, .choices__list[aria-expanded] .choices__item--selectable{
              &::after {
                --tw-content: "";
                content: var(--tw-content);
              }
            }
            .choices__list--dropdown {
              margin-top: 0.25rem;
            }
            .choices__placeholder {
              opacity: 1 !important;
            }
          }
        }
      }
      .page_title_text {
        display: flex;
      }
      .page_title_text {
        align-items: center;
      }
      .page_title_text {
        justify-content: center;
      }
      .page_title_text {
        gap: 1rem;
      }
      .page_title_text {
        padding: 1.5rem;
      }
    }
  }
  .footer-main {
    width: 100%;
  }
  .footer-main {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
  }
  .footer-main {
    --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  }
  p {
    margin-left: 0px;
    margin-right: 0px;
  }
  p {
    margin-top: 0px;
  }
  p {
    margin-bottom: 0.625rem;
  }
  #FooterWrapDiv {
    margin-top: auto;
    margin-bottom: auto;
  }
  #FooterWrapDiv {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
  }
  #FooterWrapDiv {
    display: flex;
  }
  #FooterWrapDiv {
    height: 60px;
  }
  #FooterWrapDiv {
    flex-direction: column;
  }
  #FooterWrapDiv {
    align-items: flex-start;
  }
  #FooterWrapDiv {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
  @media (min-width: 768px) {
    #FooterWrapDiv {
      flex-direction: column;
    }
  }
  @media (min-width: 768px) {
    #FooterWrapDiv {
      justify-content: space-between;
    }
  }
  @media (min-width: 1024px) {
    #FooterWrapDiv {
      flex-direction: row;
    }
  }
  @media (min-width: 1024px) {
    #FooterWrapDiv {
      align-items: center;
    }
  }
  #FooterWrapDiv {
    font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  }
  #container {
    position: relative;
  }
  #container {
    display: flex;
  }
  #container {
    min-height: 100vh;
  }
  #container {
    width: 100%;
  }
  #container {
    flex-direction: row;
  }
  #container {
    justify-content: flex-start;
  }
  #container {
    overflow: hidden;
  }
  #container {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  }
  #container {
    text-align: left;
  }
  #container {
    font-family: Rubik, sans-serif;
  }
  #container {
    font-size: 3.125rem;
  }
  #container {
    letter-spacing: normal;
  }
  #container {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }
  @media (min-width: 1280px) {
    #container {
      gap: 6.375rem;
    }
  }
  @media (min-width: 1536px) {
    #container {
      gap: 12rem;
    }
  }
  @media screen and (max-width: 770px) {
    #container {
      align-items: center;
    }
  }
  @media screen and (max-width: 770px) {
    #container {
      justify-content: center;
    }
  }
  #container {
    .the-interior-has-a-armchair-on-parent {
      box-sizing: border-box;
    }
    .the-interior-has-a-armchair-on-parent {
      display: flex;
    }
    .the-interior-has-a-armchair-on-parent {
      height: auto;
    }
    .the-interior-has-a-armchair-on-parent {
      min-width: 43.625rem;
    }
    .the-interior-has-a-armchair-on-parent {
      max-width: 100%;
    }
    .the-interior-has-a-armchair-on-parent {
      flex-direction: row;
    }
    .the-interior-has-a-armchair-on-parent {
      align-items: flex-start;
    }
    .the-interior-has-a-armchair-on-parent {
      justify-content: flex-start;
    }
    .the-interior-has-a-armchair-on-parent {
      border-right-width: 3px;
    }
    .the-interior-has-a-armchair-on-parent {
      border-style: solid;
    }
    .the-interior-has-a-armchair-on-parent {
      --tw-border-opacity: 1;
      border-color: rgb(74 111 165 / var(--tw-border-opacity));
    }
    .the-interior-has-a-armchair-on-parent {
      padding-top: 0rem;
      padding-bottom: 0rem;
    }
    .the-interior-has-a-armchair-on-parent {
      padding-right: 0.438rem;
    }
    .the-interior-has-a-armchair-on-parent {
      padding-left: 0rem;
    }
    @media (min-width: 1024px) {
      .the-interior-has-a-armchair-on-parent {
        width: 50%;
      }
    }
    @media (min-width: 1024px) {
      .the-interior-has-a-armchair-on-parent {
        min-width: 0px;
      }
    }
    @media (min-width: 1280px) {
      .the-interior-has-a-armchair-on-parent {
        width: 43.625rem;
      }
    }
    @media (min-width: 1536px) {
      .the-interior-has-a-armchair-on-parent {
        width: 57.625rem;
      }
    }
    @media screen and (max-width: 770px) {
      .the-interior-has-a-armchair-on-parent {
        box-sizing: border-box;
      }
    }
    @media screen and (max-width: 770px) {
      .the-interior-has-a-armchair-on-parent {
        display: none;
      }
    }
    @media screen and (max-width: 770px) {
      .the-interior-has-a-armchair-on-parent {
        min-width: 100%;
      }
    }
    @media screen and (max-width: 770px) {
      .the-interior-has-a-armchair-on-parent {
        padding-right: 0rem;
      }
    }
    .the-interior-has-a-armchair-on-parent {
      .the-interior-has-a-armchair-on {
        position: relative;
      }
      .the-interior-has-a-armchair-on {
        box-sizing: border-box;
      }
      .the-interior-has-a-armchair-on {
        display: none;
      }
      .the-interior-has-a-armchair-on {
        width: 43.625rem;
      }
      .the-interior-has-a-armchair-on {
        max-width: 100%;
      }
      .the-interior-has-a-armchair-on {
        align-self: stretch;
      }
      .the-interior-has-a-armchair-on {
        border-right-width: 3px;
      }
      .the-interior-has-a-armchair-on {
        border-style: solid;
      }
      .the-interior-has-a-armchair-on {
        --tw-border-opacity: 1;
        border-color: rgb(74 111 165 / var(--tw-border-opacity));
      }
      .company-logo {
        z-index: 1;
      }
      .company-logo {
        box-sizing: border-box;
      }
      .company-logo {
        display: flex;
      }
      .company-logo {
        height: 100%;
      }
      .company-logo {
        max-width: 100%;
      }
      .company-logo {
        flex: 1 1 0%;
      }
      .company-logo {
        flex-direction: column;
      }
      .company-logo {
        align-items: flex-start;
      }
      .company-logo {
        align-items: center;
      }
      .company-logo {
        justify-content: center;
      }
      .company-logo {
        gap: 4.375rem;
      }
      .company-logo {
        align-self: stretch;
      }
      .company-logo {
        --tw-bg-opacity: 1;
        background-color: rgb(74 111 165 / var(--tw-bg-opacity));
      }
      .company-logo {
        padding-left: 2.875rem;
        padding-right: 2.875rem;
      }
      .company-logo {
        padding-top: 4.375rem;
      }
      .company-logo {
        padding-bottom: 4.563rem;
      }
      @media screen and (max-width: 770px) {
        .company-logo {
          box-sizing: border-box;
        }
      }
      @media screen and (max-width: 770px) {
        .company-logo {
          gap: 2.188rem 4.375rem;
        }
      }
      @media screen and (max-width: 770px) {
        .company-logo {
          padding-left: 1.438rem;
          padding-right: 1.438rem;
        }
      }
      @media screen and (max-width: 770px) {
        .company-logo {
          padding-top: 5.438rem;
        }
      }
      @media screen and (max-width: 770px) {
        .company-logo {
          padding-bottom: 4.25rem;
        }
      }
      @media screen and (max-width: 450px) {
        .company-logo {
          gap: 1.063rem 4.375rem;
        }
      }
      .company-logo{
        .the-interior-has-a-armchair-on1 {
          position: relative;
        }
        .the-interior-has-a-armchair-on1 {
          display: none;
        }
        .the-interior-has-a-armchair-on1 {
          height: 53.063rem;
        }
        .the-interior-has-a-armchair-on1 {
          width: 43rem;
        }
        .the-interior-has-a-armchair-on1 {
          max-width: 100%;
        }
        .the-interior-has-a-armchair-on1 {
          --tw-bg-opacity: 1;
          background-color: rgb(74 111 165 / var(--tw-bg-opacity));
        }
        .weberp {
          position: relative;
        }
        .weberp {
          z-index: 2;
        }
        .weberp {
          margin: 0px;
        }
        .weberp {
          display: inline-block;
        }
        .weberp {
          height: 3.688rem;
        }
        .weberp {
          font-weight: 600;
        }
        .weberp {
          color: inherit;
        }
        @media screen and (max-width: 1100px) {
          .weberp {
            font-size: 2.525rem;
          }
        }
        @media screen and (max-width: 770px) {
          .weberp {
            font-size: 2.5rem;
          }
        }
        @media screen and (max-width: 450px) {
          .weberp {
            font-size: 1.875rem;
          }
        }
        .weberp{
          .erp {
            --tw-text-opacity: 1;
            color: rgb(217 228 255 / var(--tw-text-opacity));
          }
          span {
            display: inline-block;
          }
          span {
            text-transform: uppercase;
          }
          span{
            &.sls {
              display: block;
            }
            &.sls {
              text-align: center;
            }
          }
        }
        .asset-1-1 {
          position: relative;
        }
        .asset-1-1 {
          z-index: 2;
        }
        .asset-1-1 {
          max-width: 100%;
        }
        .asset-1-1 {
          flex-shrink: 0;
        }
        .asset-1-1 {
          overflow: hidden;
        }
        .asset-1-1 {
          -o-object-fit: cover;
             object-fit: cover;
        }
      }
    }
    .login-inner {
      margin-left: 0px;
      margin-right: 0px;
    }
    .login-inner {
      margin-top: auto;
      margin-bottom: auto;
    }
    .login-inner {
      box-sizing: border-box;
    }
    .login-inner {
      display: flex;
    }
    .login-inner {
      height: 100%;
    }
    .login-inner {
      min-width: 33.688rem;
    }
    .login-inner {
      max-width: 100%;
    }
    .login-inner {
      align-items: flex-start;
    }
    .login-inner {
      justify-content: flex-start;
    }
    @media (min-width: 1024px) {
      .login-inner {
        width: 50%;
      }
    }
    @media (min-width: 1024px) {
      .login-inner {
        min-width: 0px;
      }
    }
    @media (min-width: 1024px) {
      .login-inner {
        align-items: center;
      }
    }
    @media (min-width: 1024px) {
      .login-inner {
        justify-content: center;
      }
    }
    @media (min-width: 1280px) {
      .login-inner {
        width: 33.688rem;
      }
    }
    @media (min-width: 1536px) {
      .login-inner {
        width: 37.688rem;
      }
    }
    @media screen and (max-width: 770px) {
      .login-inner {
        padding-top: 0px;
      }
    }
    .login-inner{
      .rectangle-parent {
        margin: 0px;
      }
      .rectangle-parent {
        box-sizing: border-box;
      }
      .rectangle-parent {
        display: flex;
      }
      .rectangle-parent {
        max-width: 100%;
      }
      .rectangle-parent {
        flex-direction: column;
      }
      .rectangle-parent {
        align-items: flex-start;
      }
      .rectangle-parent {
        justify-content: flex-start;
      }
      .rectangle-parent {
        gap: 2.813rem;
      }
      .rectangle-parent {
        align-self: stretch;
      }
      .rectangle-parent {
        border-radius: 40px;
      }
      .rectangle-parent {
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
      }
      .rectangle-parent {
        padding-left: 2.75rem;
        padding-right: 2.75rem;
      }
      .rectangle-parent {
        padding-top: 3.75rem;
      }
      .rectangle-parent {
        padding-bottom: 5.188rem;
      }
      .rectangle-parent {
        --tw-shadow: 0px 4px 35px rgba(0, 0, 0, 0.08);
        --tw-shadow-colored: 0px 4px 35px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
      }
      @media (min-width: 1024px) {
        .rectangle-parent {
          flex: none;
        }
      }
      @media (min-width: 1280px) {
        .rectangle-parent {
          flex: 1 1 0%;
        }
      }
      @media (min-width: 1536px) {
        .rectangle-parent {
          flex: 1 1 0%;
        }
      }
      .rectangle-parent{
        .frame-child {
          position: relative;
        }
        .frame-child {
          display: none;
        }
        .frame-child {
          height: 46.313rem;
        }
        .frame-child {
          width: 33.688rem;
        }
        .frame-child {
          max-width: 100%;
        }
        .frame-child {
          border-radius: 40px;
        }
        .frame-child {
          --tw-bg-opacity: 1;
          background-color: rgb(255 255 255 / var(--tw-bg-opacity));
        }
        .frame-child {
          --tw-shadow: 0px 4px 35px rgba(0, 0, 0, 0.08);
          --tw-shadow-colored: 0px 4px 35px var(--tw-shadow-color);
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        }
        .have-an-account-container {
          position: relative;
        }
        .have-an-account-container {
          display: none;
        }
        .have-an-account-container {
          width: 7.625rem;
        }
        .have-an-account-container {
          text-align: left;
        }
        .have-an-account-container {
          font-family: Poppins;
        }
        .have-an-account-container {
          font-size: 0.813rem;
        }
        .have-an-account-container{
          .have-an-account {
            margin: 0px;
          }
          .have-an-account {
            --tw-text-opacity: 1;
            color: rgb(141 141 141 / var(--tw-text-opacity));
          }
          .sign-in {
            margin: 0px;
          }
          .sign-in {
            --tw-text-opacity: 1;
            color: rgb(0 137 237 / var(--tw-text-opacity));
          }
        }
        .welcome-back-to-weberp-parent {
          display: flex;
        }
        .welcome-back-to-weberp-parent {
          width: 17.4rem;
        }
        .welcome-back-to-weberp-parent {
          flex-direction: column;
        }
        .welcome-back-to-weberp-parent {
          align-items: flex-start;
        }
        .welcome-back-to-weberp-parent {
          justify-content: flex-start;
        }
        .welcome-back-to-weberp-parent {
          gap: 0.5rem;
        }
        .welcome-back-to-weberp-parent{
          .welcome-back-to-container {
            position: relative;
          }
          .welcome-back-to-container {
            z-index: 1;
          }
          .welcome-back-to-container {
            display: flex;
          }
          .welcome-back-to-container {
            align-items: center;
          }
          .welcome-back-to-container {
            align-self: stretch;
          }
          .welcome-back-to-container {
            text-align: left;
          }
          .welcome-back-to-container {
            font-size: 1.313rem;
          }
          @media screen and (max-width: 450px) {
            .welcome-back-to-container {
              font-size: 1.063rem;
            }
          }
          .welcome-back-to-container{
            .welcome-back-to {
              font-family: Rubik, sans-serif;
            }
            .welcome-back-to {
              --tw-text-opacity: 1;
              color: rgb(17 24 39 / var(--tw-text-opacity));
            }
            .weberp1 {
              padding-left: 0.5rem;
            }
            .weberp1 {
              font-family: Rubik, sans-serif;
            }
            .weberp1 {
              font-weight: 600;
            }
            .weberp1 {
              --tw-text-opacity: 1;
              color: rgb(74 111 165 / var(--tw-text-opacity));
            }
            .span {
              font-family: Rubik, sans-serif;
            }
            .span {
              --tw-text-opacity: 1;
              color: rgb(17 24 39 / var(--tw-text-opacity));
            }
          }
          .sign-in1 {
            position: relative;
          }
          .sign-in1 {
            z-index: 1;
          }
          .sign-in1 {
            margin: 0px;
          }
          .sign-in1 {
            text-align: left;
          }
          .sign-in1 {
            font-family: Rubik, sans-serif;
          }
          .sign-in1 {
            font-size: 3.438rem;
          }
          .sign-in1 {
            font-weight: 500;
          }
          .sign-in1 {
            --tw-text-opacity: 1;
            color: rgb(17 24 39 / var(--tw-text-opacity));
          }
          @media screen and (max-width: 770px) {
            .sign-in1 {
              font-size: 2.75rem;
            }
          }
          @media screen and (max-width: 450px) {
            .sign-in1 {
              font-size: 2.063rem;
            }
          }
        }
        .frame-parent {
          box-sizing: border-box;
        }
        .frame-parent {
          display: flex;
        }
        .frame-parent {
          max-width: 100%;
        }
        .frame-parent {
          flex: 1 1 0%;
        }
        .frame-parent {
          flex-direction: column;
        }
        .frame-parent {
          align-items: flex-start;
        }
        .frame-parent {
          justify-content: flex-start;
        }
        .frame-parent {
          gap: 1.75rem;
        }
        .frame-parent {
          align-self: stretch;
        }
        .frame-parent {
          padding-left: 0rem;
          padding-right: 0rem;
        }
        .frame-parent {
          padding-top: 0rem;
        }
        .frame-parent {
          padding-bottom: 1.125rem;
        }
        .frame-parent{
          .company-parent {
            display: flex;
          }
          .company-parent {
            max-width: 100%;
          }
          .company-parent {
            flex: 1 1 0%;
          }
          .company-parent {
            flex-direction: column;
          }
          .company-parent {
            align-items: flex-start;
          }
          .company-parent {
            justify-content: flex-start;
          }
          .company-parent {
            gap: 1.063rem;
          }
          .company-parent {
            align-self: stretch;
          }
          .company-parent{
            .company {
              position: relative;
            }
            .company {
              display: inline-block;
            }
            .company {
              min-width: 4.875rem;
            }
            .company {
              text-align: left;
            }
            .company {
              font-family: Rubik, sans-serif;
            }
            .company {
              font-size: 1.063rem;
            }
            .company {
              font-weight: 500;
            }
            .company {
              color: rgba(17, 24, 39, 0.8);
            }
            .login-credentials {
              box-sizing: border-box;
            }
            .login-credentials {
              display: flex;
            }
            .login-credentials {
              max-width: 100%;
            }
            .login-credentials {
              flex: 1 1 0%;
            }
            .login-credentials {
              flex-direction: row;
            }
            .login-credentials {
              align-items: flex-start;
            }
            .login-credentials {
              justify-content: space-between;
            }
            .login-credentials {
              gap: 1.25rem;
            }
            .login-credentials {
              align-self: stretch;
            }
            .login-credentials {
              border-radius: 9px;
            }
            .login-credentials {
              border-width: 1.5px;
            }
            .login-credentials {
              border-style: solid;
            }
            .login-credentials {
              --tw-border-opacity: 1;
              border-color: rgb(74 111 165 / var(--tw-border-opacity));
            }
            .login-credentials {
              --tw-bg-opacity: 1;
              background-color: rgb(255 255 255 / var(--tw-bg-opacity));
            }
            .login-credentials {
              padding-top: 0.4rem;
              padding-bottom: 0.4rem;
            }
            .login-credentials{
              .login-credentials-child {
                position: relative;
              }
              .login-credentials-child {
                box-sizing: border-box;
              }
              .login-credentials-child {
                display: none;
              }
              .login-credentials-child {
                height: 3.563rem;
              }
              .login-credentials-child {
                width: 28.188rem;
              }
              .login-credentials-child {
                max-width: 100%;
              }
              .login-credentials-child {
                border-radius: 9px;
              }
              .login-credentials-child {
                border-width: 1.5px;
              }
              .login-credentials-child {
                border-style: solid;
              }
              .login-credentials-child {
                --tw-border-opacity: 1;
                border-color: rgb(74 111 165 / var(--tw-border-opacity));
              }
              .login-credentials-child {
                --tw-bg-opacity: 1;
                background-color: rgb(255 255 255 / var(--tw-bg-opacity));
              }
              .caloptix-logo {
                box-sizing: border-box;
              }
              .caloptix-logo {
                display: flex;
              }
              .caloptix-logo {
                width: 100%;
              }
              .caloptix-logo {
                flex-direction: column;
              }
              .caloptix-logo {
                align-items: flex-start;
              }
              .caloptix-logo {
                justify-content: flex-start;
              }
              .caloptix-logo {
                padding-left: 0rem;
                padding-right: 0rem;
              }
              .caloptix-logo {
                padding-top: 0.063rem;
              }
              .caloptix-logo {
                padding-bottom: 0rem;
              }
              .caloptix-logo{
                select:focus-visible {
                  outline: 2px solid transparent;
                  outline-offset: 2px;
                }
                .caloptix {
                  position: relative;
                }
                .caloptix {
                  z-index: 2;
                }
                .caloptix {
                  align-self: stretch;
                }
                .caloptix {
                  text-align: left;
                }
                .caloptix {
                  font-family: Rubik, sans-serif;
                }
                .caloptix {
                  font-size: 0.938rem;
                }
                .caloptix {
                  font-weight: 500;
                }
                .caloptix {
                  --tw-text-opacity: 1;
                  color: rgb(74 111 165 / var(--tw-text-opacity));
                }
                .choices {
                  width: 100%;
                }
                .choices {
                  --tw-text-opacity: 1;
                  color: rgb(0 0 0 / var(--tw-text-opacity));
                }
                .choices{
                  .choices__inner {
                    border-width: 0px;
                  }
                  .choices__inner{
                    background: transparent;
                    .choices__list--single{
                      .choices__item {
                        --tw-text-opacity: 1;
                        color: rgb(74 111 165 / var(--tw-text-opacity));
                      }
                    }
                  }
                  .choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
                    --tw-bg-opacity: 1;
                    background-color: rgb(233 239 255 / var(--tw-bg-opacity));
                  }
                  .choices__list[aria-expanded] .choices__item--selectable.is-selected {
                    --tw-bg-opacity: 1;
                    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
                  }
                  .choices__list[aria-expanded] .choices__item--selectable.is-selected {
                    --tw-text-opacity: 1;
                    color: rgb(74 111 165 / var(--tw-text-opacity));
                  }
                  .choices__list--dropdown{
                    .choices__list {
                      max-height: 130px;
                    }
                  }
                  .choices__list--dropdown .choices__item--selectable::after, .choices__list[aria-expanded] .choices__item--selectable{
                    &::after {
                      --tw-content: "";
                      content: var(--tw-content);
                    }
                  }
                  .choices__list--dropdown {
                    margin-top: 0.25rem;
                  }
                }
              }
              .line-arrow-down-icon {
                position: relative;
              }
              .line-arrow-down-icon {
                z-index: 2;
              }
              .line-arrow-down-icon {
                height: 1.25rem;
              }
              .line-arrow-down-icon {
                min-height: 1.25rem;
              }
              .line-arrow-down-icon {
                width: 1.25rem;
              }
            }
          }
          .user-name-parent {
            display: flex;
          }
          .user-name-parent {
            max-width: 100%;
          }
          .user-name-parent {
            flex-direction: column;
          }
          .user-name-parent {
            align-items: flex-start;
          }
          .user-name-parent {
            justify-content: flex-start;
          }
          .user-name-parent {
            gap: 1.063rem;
          }
          .user-name-parent {
            align-self: stretch;
          }
          .user-name-parent{
            .user-name {
              position: relative;
            }
            .user-name {
              display: inline-block;
            }
            .user-name {
              min-width: 5.563rem;
            }
            .user-name {
              text-align: left;
            }
            .user-name {
              font-family: Rubik, sans-serif;
            }
            .user-name {
              font-size: 1.063rem;
            }
            .user-name {
              font-weight: 500;
            }
            .user-name {
              color: rgba(17, 24, 39, 0.8);
            }
            .rectangle-group {
              box-sizing: border-box;
            }
            .rectangle-group {
              display: flex;
            }
            .rectangle-group {
              max-width: 100%;
            }
            .rectangle-group {
              flex-direction: row;
            }
            .rectangle-group {
              align-items: flex-start;
            }
            .rectangle-group {
              justify-content: flex-start;
            }
            .rectangle-group {
              align-self: stretch;
            }
            .rectangle-group {
              border-radius: 9px;
            }
            .rectangle-group {
              border-width: 1.5px;
            }
            .rectangle-group {
              border-style: solid;
            }
            .rectangle-group {
              --tw-border-opacity: 1;
              border-color: rgb(213 213 213 / var(--tw-border-opacity));
            }
            .rectangle-group {
              --tw-bg-opacity: 1;
              background-color: rgb(255 255 255 / var(--tw-bg-opacity));
            }
            .rectangle-group {
              padding: 1.25rem;
            }
            .rectangle-group{
              .frame-item {
                position: relative;
              }
              .frame-item {
                box-sizing: border-box;
              }
              .frame-item {
                display: none;
              }
              .frame-item {
                height: 3.563rem;
              }
              .frame-item {
                width: 28.188rem;
              }
              .frame-item {
                max-width: 100%;
              }
              .frame-item {
                border-radius: 9px;
              }
              .frame-item {
                border-width: 1.5px;
              }
              .frame-item {
                border-style: solid;
              }
              .frame-item {
                --tw-border-opacity: 1;
                border-color: rgb(213 213 213 / var(--tw-border-opacity));
              }
              .frame-item {
                --tw-bg-opacity: 1;
                background-color: rgb(255 255 255 / var(--tw-bg-opacity));
              }
              .username {
                position: relative;
              }
              .username {
                display: inline-block;
              }
              .username {
                height: 1.063rem;
              }
              .username {
                width: 18.875rem;
              }
              .username {
                border-style: none;
              }
              .username {
                background-color: transparent;
              }
              .username {
                padding: 0px;
              }
              .username {
                text-align: left;
              }
              .username {
                font-family: Rubik, sans-serif;
              }
              .username {
                font-size: 0.938rem;
              }
              .username {
                --tw-text-opacity: 1;
                color: rgb(0 0 0 / var(--tw-text-opacity));
              }
              .username {
                outline: 2px solid transparent;
                outline-offset: 2px;
              }
              input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
                -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
              }
            }
          }
          .password-parent {
            display: flex;
          }
          .password-parent {
            max-width: 100%;
          }
          .password-parent {
            flex-direction: column;
          }
          .password-parent {
            align-items: flex-start;
          }
          .password-parent {
            justify-content: flex-start;
          }
          .password-parent {
            gap: 1.063rem;
          }
          .password-parent {
            align-self: stretch;
          }
          .password-parent{
            #demo_text {
              font-size: 0.875rem;
              line-height: 1.25rem;
            }
            #demo_text {
              --tw-text-opacity: 1;
              color: rgb(0 0 0 / var(--tw-text-opacity));
            }
            .password {
              position: relative;
            }
            .password {
              display: inline-block;
            }
            .password {
              min-width: 5rem;
            }
            .password {
              text-align: left;
            }
            .password {
              font-family: Rubik, sans-serif;
            }
            .password {
              font-size: 1.063rem;
            }
            .password {
              font-weight: 500;
            }
            .password {
              color: rgba(17, 24, 39, 0.8);
            }
            .rectangle-container {
              box-sizing: border-box;
            }
            .rectangle-container {
              display: flex;
            }
            .rectangle-container {
              max-width: 100%;
            }
            .rectangle-container {
              flex-direction: row;
            }
            .rectangle-container {
              align-items: flex-start;
            }
            .rectangle-container {
              justify-content: flex-start;
            }
            .rectangle-container {
              align-self: stretch;
            }
            .rectangle-container {
              border-radius: 9px;
            }
            .rectangle-container {
              border-width: 1.5px;
            }
            .rectangle-container {
              border-style: solid;
            }
            .rectangle-container {
              --tw-border-opacity: 1;
              border-color: rgb(213 213 213 / var(--tw-border-opacity));
            }
            .rectangle-container {
              --tw-bg-opacity: 1;
              background-color: rgb(255 255 255 / var(--tw-bg-opacity));
            }
            .rectangle-container {
              padding: 1.25rem;
            }
            .rectangle-container{
              .frame-inner {
                position: relative;
              }
              .frame-inner {
                box-sizing: border-box;
              }
              .frame-inner {
                display: none;
              }
              .frame-inner {
                height: 3.563rem;
              }
              .frame-inner {
                width: 28.188rem;
              }
              .frame-inner {
                max-width: 100%;
              }
              .frame-inner {
                border-radius: 9px;
              }
              .frame-inner {
                border-width: 1.5px;
              }
              .frame-inner {
                border-style: solid;
              }
              .frame-inner {
                --tw-border-opacity: 1;
                border-color: rgb(213 213 213 / var(--tw-border-opacity));
              }
              .frame-inner {
                --tw-bg-opacity: 1;
                background-color: rgb(255 255 255 / var(--tw-bg-opacity));
              }
              .password1 {
                position: relative;
              }
              .password1 {
                display: inline-block;
              }
              .password1 {
                height: 1.063rem;
              }
              .password1 {
                width: 18.875rem;
              }
              .password1 {
                border-style: none;
              }
              .password1 {
                background-color: transparent;
              }
              .password1 {
                padding: 0px;
              }
              .password1 {
                text-align: left;
              }
              .password1 {
                font-family: Rubik, sans-serif;
              }
              .password1 {
                font-size: 0.938rem;
              }
              .password1 {
                --tw-text-opacity: 1;
                color: rgb(0 0 0 / var(--tw-text-opacity));
              }
              .password1 {
                outline: 2px solid transparent;
                outline-offset: 2px;
              }
            }
          }
        }
        .group-button {
          z-index: 1;
        }
        .group-button {
          box-sizing: border-box;
        }
        .group-button {
          display: flex;
        }
        .group-button {
          max-width: 100%;
        }
        .group-button {
          cursor: pointer;
        }
        .group-button {
          flex-direction: row;
        }
        .group-button {
          align-items: flex-start;
        }
        .group-button {
          justify-content: center;
        }
        .group-button {
          align-self: stretch;
        }
        .group-button {
          border-radius: 10px;
        }
        .group-button {
          border-style: none;
        }
        .group-button {
          --tw-bg-opacity: 1;
          background-color: rgb(74 111 165 / var(--tw-bg-opacity));
        }
        .group-button {
          padding-top: 1.063rem;
        }
        .group-button {
          padding-bottom: 1rem;
        }
        .group-button {
          padding-right: 1.25rem;
        }
        .group-button {
          padding-left: 1.313rem;
        }
        .group-button:hover {
          --tw-bg-opacity: 1;
          background-color: rgb(92 143 255 / var(--tw-bg-opacity));
        }
        .group-button{
          .rectangle-div {
            position: relative;
          }
          .rectangle-div {
            display: none;
          }
          .rectangle-div {
            height: 3.375rem;
          }
          .rectangle-div {
            width: 28.188rem;
          }
          .rectangle-div {
            max-width: 100%;
          }
          .rectangle-div {
            border-radius: 10px;
          }
          .rectangle-div {
            --tw-bg-opacity: 1;
            background-color: rgb(74 111 165 / var(--tw-bg-opacity));
          }
          .login1 {
            position: relative;
          }
          .login1 {
            z-index: 1;
          }
          .login1 {
            display: inline-block;
          }
          .login1 {
            min-width: 3.125rem;
          }
          .login1 {
            text-align: left;
          }
          .login1 {
            font-family: Rubik, sans-serif;
          }
          .login1 {
            font-size: 1.125rem;
          }
          .login1 {
            font-weight: 600;
          }
          .login1 {
            --tw-text-opacity: 1;
            color: rgb(255 255 255 / var(--tw-text-opacity));
          }
        }
      }
    }
  }
  .dtfh-floatingparent.dtfh-floatingparent-head{
    /* Was !tw-top-[89px] — the actual competing rule for fixedHeader's
         floating clone (the earlier fix elsewhere in this file targeted a
         DIFFERENT, lower-specificity copy of this selector, based on a
         wrong assumption that this one was dead code since it's nested
         under body, not #CanvasDiv — but the clone genuinely IS a
         descendant of body, so this one matches and its specificity
         (body + 2 classes) beats the other, unnested one. Confirmed via
         getComputedStyle() in the browser: computed top stayed 89px even
         though DataTables' own inline style correctly said 0px. 89px was
         clearance for the old .header-main, now removed. */
  }
  .dtfh-floatingparent.dtfh-floatingparent-head {
    top: 0px !important;
  }
  .dtfh-floatingparent.dtfh-floatingparent-head {
    width: 100%;
  }
  .dtfh-floatingparent.dtfh-floatingparent-head{
    div {
      margin: auto;
    }
    div {
      padding-right: 0px !important;
    }
    table {
      th:hover {
        outline: 2px solid transparent !important;
        outline-offset: 2px !important;
      }
      &.dataTable thead span.dt-column-order{
        &::after, &::before {
          --tw-content: "" !important;
          content: var(--tw-content) !important;
        }
      }
      &.dataTable thead span.dt-column-order {
        top: 45%;
      }
      &.dataTable thead span.dt-column-order {
        right: 5px;
      }
      &.dataTable thead span.dt-column-order {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAMCAYAAACwXJejAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB6SURBVHgBrZChDYAwEEV7CQKJZAMkI4BEsgGzMQYOJA4cI1R2g/JPXHNAqepPXi+5vDSXT0bFe99jdGAlok32FBEkQaQf4SFSQpAsBR4LzoRkTbbwTQNmk3B2vukALSgjggOXVFBjTC+RhRkVOF2mFoPw+ZtFMIJK72+iGDJZeER+wgAAAABJRU5ErkJggg==");
      }
      &.dataTable thead span.dt-column-order {
        background-repeat: no-repeat;
      }
      &.dataTable thead .dt-ordering-asc span.dt-column-order {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAMCAYAAACwXJejAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB0SURBVHgBrc6xDYAgEAXQu8TC0tINLF3D0g1cwREYRcexo3QMNjg/MZgTTyp+8gO5vBwQqYiIkzuOrCggJjTAGxZAytrAeXSj/3iqFsabE86hYI70pxFtDRDQk+MN23ocSwYj2Jk5cJpk8AGf3RGiM9rp+QWoyXpXmmeRZwAAAABJRU5ErkJggg==");
      }
      &.dataTable thead .dt-ordering-asc span.dt-column-order {
        background-repeat: no-repeat;
      }
      &.dataTable thead .dt-ordering-desc span.dt-column-order {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAMCAYAAACwXJejAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABqSURBVHgBrc+7DYAwDATQnMQgjMAGsAGrwQTMQQcjMAFtOkYwFyTzCYmrnHSxFL3ChntFRDqOll0ArPqPBNDcEBnwgTCAZq74eHYzkHfFEnYaOHvDjOGyhj0knZ2tL5qBD9BE8A8iOMXgBIXockUbNPXEAAAAAElFTkSuQmCC");
      }
      &.dataTable thead .dt-ordering-desc span.dt-column-order {
        background-repeat: no-repeat;
      }
      &.dataTable thead tr th {
        --tw-bg-opacity: 1;
        background-color: rgb(74 111 165 / var(--tw-bg-opacity));
      }
      &.dataTable thead tr th {
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity));
      }
    }
  }
  .dtcr-cloned thead tr th {
    --tw-bg-opacity: 1;
    background-color: rgb(74 111 165 / var(--tw-bg-opacity));
  }
  .dtcr-cloned thead tr th span {
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
  }
  .dtfh-floatingparent-head {
    z-index: 0 !important;
  }
}

/* fixedHeader floatingparent is appended to body, outside #CanvasDiv,
   so the nested rule above never matches. This top-level rule keeps it
   below .header-main (z-index:1001) but above normal content. */

.dtfh-floatingparent-head {
  z-index: 100 !important;
}

/* ==========================================================================
   New single-click sidebar nav (Sidebar-Only Navigation mockup, approved).
   Renders inside the existing #MainMenuDiv (already position:fixed, width,
   height — untouched here) via includes/header.php's Step 3 change. Own
   class prefix (sbv2-) and own collapse class (.sbv2-collapsed, NOT the
   existing #MainMenuDiv.collapsed rule above, which does something
   different) so nothing here can collide with the old accordion sidebar's
   still-present-but-unreachable CSS.
   ========================================================================== */

#MainMenuDiv .sbv2 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#MainMenuDiv .sbv2-search {
  padding: 12px 12px 8px;
  flex: 0 0 auto;
}

#MainMenuDiv .sbv2-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #EEF2FC;
  border: 1px solid #E3E9F9;
  border-radius: 7px;
  padding: 0 10px;
  height: 32px;
  color: #9AA3BD;
  font-size: 12px;
}

#MainMenuDiv .sbv2-search-box input {
  border: 0;
  background: none;
  outline: 0;
  font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 12.5px;
  width: 100%;
  color: #1D2433;
}

#MainMenuDiv .sbv2-search-box input::-moz-placeholder {
  color: #9AA3BD;
}

#MainMenuDiv .sbv2-search-box input::placeholder {
  color: #9AA3BD;
}

/* Quick-pin star for the current page, inline in the search box so it is
   visible on every screen without an extra row. */

#MainMenuDiv .sbv2-pin-current {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: #9AA3BD;
  cursor: pointer;
  padding: 2px;
  font-size: 13px;
  display: flex;
  align-items: center;
}

#MainMenuDiv .sbv2-pin-current:hover {
  color: #4A6FA5;
}

#MainMenuDiv .sbv2-pin-current .fa-star {
  color: #4A6FA5;
}

#CanvasDiv.sbv2-collapsed .sbv2-pin-current {
  display: none;
}

/* Results dropdown: position:fixed (not absolute) — positioned via JS from
   the search box's live bounding rect — so it isn't clipped by
   #MainMenuDiv's own overflow:auto once the sidebar itself is scrolled. */

.sbv2-search-results {
  display: none;
  position: fixed;
  z-index: 1003;
  background: #FFFFFF;
  border: 1px solid #E3E9F9;
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(29, 36, 51, 0.14);
  max-height: 60vh;
  overflow-y: auto;
  font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

.sbv2-search-results.show {
  display: block;
}

.sbv2-search-results .sbv2-sr-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #F1F3FA;
}

.sbv2-search-results .sbv2-sr-row:last-child {
  border-bottom: none;
}

.sbv2-search-results .sbv2-sr-item {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  font-size: 12.5px;
  color: #1D2433;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sbv2-search-results .sbv2-sr-row:hover {
  background: #EEF2FC;
}

.sbv2-search-results .sbv2-sr-row:hover .sbv2-sr-item {
  color: #4A6FA5;
}

.sbv2-search-results .sbv2-sr-pin {
  flex: 0 0 auto;
  width: 30px;
  border: 0;
  background: none;
  color: #9AA3BD;
  cursor: pointer;
  font-size: 11px;
}

.sbv2-search-results .sbv2-sr-pin:hover {
  color: #4A6FA5;
}

.sbv2-search-results .sbv2-sr-empty {
  padding: 8px 12px;
  font-size: 12px;
  color: #9AA3BD;
}

.sbv2-search-results .sbv2-sr-heading {
  padding: 8px 12px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9AA3BD;
}

#MainMenuDiv .sbv2-items {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 8px;
}

#MainMenuDiv .sbv2-empty {
  font-size: 12.5px;
  color: #9AA3BD;
  padding: 12px 8px;
  margin: 0;
}

#MainMenuDiv .sbv2-item-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

#MainMenuDiv .sbv2-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  color: #4A6FA5;
  padding: 9px 8px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  margin-bottom: 2px;
  text-decoration: none !important;
  box-sizing: border-box;
}

/* Unpin: hidden until the row is hovered, so the list doesn't read as
   cluttered/deletable at rest — same "reveal affordance on hover" idea as
   the existing customize checkboxes, just for a single-click action. */

#MainMenuDiv .sbv2-unpin {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-bottom: 2px;
  border: 0;
  background: none;
  color: #9AA3BD;
  border-radius: 5px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

/* Confirmed live: this hover-reveal (a real display:none->flex reflow on
   a sibling, not just a color change) was making sidebar links need TWO
   taps on iOS Safari -- a well-documented quirk where Safari treats the
   first tap on a link as "activate :hover" when that hover changes a
   sibling's layout, and only the second tap actually fires the click/
   navigation. Gated to devices that genuinely have a mouse (hover:hover
   AND pointer:fine both hold on desktop, neither holds on a touchscreen)
   so it never triggers via touch at all. The unpin action still needs to
   exist on touch though -- there's no hover to reveal it with there, so
   it defaults to always-visible instead of hidden-until-hover on
   anything that doesn't match the desktop query. */

@media (hover: hover) and (pointer: fine) {
  #MainMenuDiv .sbv2-item-row:hover .sbv2-unpin {
    display: flex;
  }
}

@media (hover: none), (pointer: coarse) {
  #MainMenuDiv .sbv2-unpin {
    display: flex;
  }
}

#MainMenuDiv .sbv2-unpin:hover {
  background: #FEE2E2;
  color: #DC2626;
}

#CanvasDiv.sbv2-collapsed .sbv2-unpin {
  display: none !important;
}

/* Drag handle: always visible at a fixed, generous size — NOT hover-reveal.
   A hover-only sliver (previously 16px, shown only on :hover) was too easy
   to miss by a couple pixels, landing the mousedown on the adjacent link
   instead; the drag code correctly refuses to start a drag from anywhere
   but the handle, so a near-miss silently did nothing. A bigger, stable
   target removes the precision problem instead of trying to special-case
   around it. Reorder itself is native HTML5 Drag and Drop
   (includes/header.php) — no jQuery UI dependency, unlike the old header's
   favorites dropdown further down. */

#MainMenuDiv .sbv2-drag-handle {
  flex: 0 0 auto;
  width: 24px;
  /* Stretches to the row's full height (not centered at a fixed height in
     a taller row) so there's no sliver of "row, but not handle" space at
     this same horizontal spot for a slightly-off click to land in instead —
     that gap was silently swallowing drag attempts aimed at the handle. */
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C7D2ED;
  font-size: 13px;
  cursor: grab;
  border-radius: 5px;
}

/* Same two-tap fix as .sbv2-unpin above -- gated to real hover/mouse
   devices only. This one's just a color change (no layout reflow), so it
   likely wasn't the actual trigger on its own, but gating it keeps both
   hover-reveal rules on the row consistent rather than only fixing one. */

@media (hover: hover) and (pointer: fine) {
  #MainMenuDiv .sbv2-item-row:hover .sbv2-drag-handle {
    color: #6B7690;
  }
}

#MainMenuDiv .sbv2-drag-handle:hover {
  color: #4A6FA5;
  background: #EEF2FC;
}

#MainMenuDiv .sbv2-drag-handle:active {
  cursor: grabbing;
}

#MainMenuDiv .sbv2-item-row.sbv2-dragging {
  opacity: 0.4;
}

#CanvasDiv.sbv2-collapsed .sbv2-drag-handle {
  display: none !important;
}

/* Native HTML5 Drag and Drop (the reorder mechanism here) has no touch
   support at all without a JS polyfill, which this doesn't use -- a
   permanently-visible grab-cursor handle on a touchscreen would be a
   dead, misleading affordance (looks draggable, does nothing on tap).
   Hidden on touch instead; the row's flex gap just tightens up without
   it, no layout compensation needed. */

@media (hover: none), (pointer: coarse) {
  #MainMenuDiv .sbv2-drag-handle {
    display: none !important;
  }
}

#MainMenuDiv a.sbv2-item:hover {
  background: #EEF2FC;
  color: #1D2433;
}

#MainMenuDiv .sbv2-ic {
  width: 18px;
  flex: 0 0 auto;
  text-align: center;
}

/* Was a single line, ellipsis-truncated -- long catalog item names (and
   custom-pinned screen titles) got cut off illegibly, with no way to read
   the rest. Clamped to 2 lines instead of unlimited wrap so rows stay a
   bounded, predictable height rather than one long label blowing out the
   whole list -- true tooltip-on-hover isn't a full substitute on its own
   since there's no hover on a touchscreen at all, so this needs to work
   without it regardless. A label still long enough to need a 3rd line
   ellipsizes at the end of line 2 (standard line-clamp behavior) -- rare
   in practice once wrapping is allowed. EASY TO REVERT: this is the only
   changed rule for this attempt; reverting just means restoring
   text-overflow:ellipsis + white-space:nowrap here. */

#MainMenuDiv .sbv2-lbl {
  flex: 1 1 auto;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

/* A prior attempt switched .sbv2-lbl to single-line ellipsis specifically
   on hover, meant to keep row height constant while the unpin button
   reveals and narrows the label's available width. In practice that
   display-mode switch (-webkit-box -> block, line-clamp -> nowrap) was
   itself a visible glitch on hover -- exactly the "change layout on
   hover" pattern that reads as janky, on top of whatever reflow it was
   trying to prevent. Removed: the label now stays in its normal 2-line-
   clamp state through hover too, so hovering a row only ever does two
   things -- reveals the unpin X (.sbv2-unpin above) and highlights the
   row (#MainMenuDiv a.sbv2-item:hover below). The label's word-wrap
   points can still shift slightly as the unpin button narrows its
   available width, but that is a small in-place rewrap within a fixed-
   height 2-line box, not a mode or height change -- much less
   noticeable than what this replaced. */

#MainMenuDiv .sbv2-count {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  background: #EEF2FC;
  color: #4A6FA5;
  padding: 1px 7px;
  border-radius: 20px;
  flex: 0 0 auto;
}

#MainMenuDiv .sbv2-customize {
  margin: 4px 8px 8px;
  padding: 8px;
  border-radius: 7px;
  border: 1px dashed #B4C8FD;
  background: none;
  color: #6B7690;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

#MainMenuDiv .sbv2-customize:hover {
  border-color: #4A6FA5;
  color: #4A6FA5;
}

#MainMenuDiv .sbv2-current-company {
  margin: 4px 12px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #6B7690;
  font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

#MainMenuDiv .sbv2-current-company i {
  color: #9AA3BD;
  font-size: 12px;
  flex: 0 0 auto;
}

#MainMenuDiv .sbv2-current-company span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#CanvasDiv.sbv2-collapsed .sbv2-current-company span {
  display: none;
}

#CanvasDiv.sbv2-collapsed .sbv2-current-company {
  justify-content: center;
  margin: 4px 0 8px;
}

#MainMenuDiv .sbv2-company {
  margin: 0 8px 8px;
}

#MainMenuDiv .sbv2-company-select {
  width: 100%;
  background: #EEF2FC;
  border: 1px solid #E3E9F9;
  border-radius: 7px;
  padding: 6px 8px;
  height: 32px;
  color: #1D2433;
  font-size: 12px;
  font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
}

/* Collapsed: same icon-rail treatment as the rest of the sidebar — hidden
   rather than squeezed, same as .sbv2-search. */

#CanvasDiv.sbv2-collapsed .sbv2-company {
  display: none;
}

#MainMenuDiv .sbv2-bottom {
  flex: 0 0 auto;
  border-top: 1px solid #E3E9F9;
  padding: 8px;
}

#MainMenuDiv .sbv2-bottom .sbv2-item.sbv2-pinned {
  color: #6B7690;
  cursor: default;
}

#MainMenuDiv a.sbv2-item.sbv2-pinned {
  cursor: pointer;
}

#MainMenuDiv .sbv2-collapse-toggle {
  width: 100%;
  border: 0;
  background: none;
  color: #9AA3BD;
  padding: 8px;
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

#MainMenuDiv .sbv2-collapse-toggle:hover {
  background: #EEF2FC;
  color: #1D2433;
}

#MainMenuDiv .sbv2-collapse-toggle i {
  transition: transform 0.18s ease;
}

/* Collapsed: icon-only rail. Single source of truth is .sbv2-collapsed on
   #CanvasDiv (JS-toggled) — not a class on #MainMenuDiv itself, and NOT
   the pre-existing #MainMenuDiv.collapsed rule above (different intent —
   that one just repositions, this narrows to an icon rail). The actual
   width-narrowing rules live further down, alongside the #BodyDiv margin
   logic, so both respond to the same single class in one place. */

#CanvasDiv.sbv2-collapsed .sbv2-search,
#CanvasDiv.sbv2-collapsed .sbv2-lbl,
#CanvasDiv.sbv2-collapsed .sbv2-count,
#CanvasDiv.sbv2-collapsed .sbv2-customize span,
#CanvasDiv.sbv2-collapsed .sbv2-collapse-toggle span {
  display: none;
}

#CanvasDiv.sbv2-collapsed .sbv2-item,
#CanvasDiv.sbv2-collapsed .sbv2-customize,
#CanvasDiv.sbv2-collapsed .sbv2-collapse-toggle {
  justify-content: center;
}

#CanvasDiv.sbv2-collapsed .sbv2-collapse-toggle i {
  transform: rotate(180deg);
}

/* Customize panel (overlay) */

#MainMenuDiv .sbv2-cz-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20,24,34,0.35);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

#MainMenuDiv .sbv2-cz-overlay.show {
  display: flex;
}

#MainMenuDiv .sbv2-cz-panel {
  width: 340px;
  max-height: 70vh;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#MainMenuDiv .sbv2-cz-head {
  padding: 14px 16px;
  border-bottom: 1px solid #E3E9F9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

#MainMenuDiv .sbv2-cz-head b {
  font-size: 14px;
  color: #1D2433;
}

#MainMenuDiv .sbv2-cz-head button {
  border: 0;
  background: none;
  cursor: pointer;
  color: #9AA3BD;
  font-size: 20px;
  line-height: 1;
}

#MainMenuDiv .sbv2-cz-body {
  padding: 8px;
  overflow-y: auto;
}

#MainMenuDiv .sbv2-cz-more {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-top: 1px solid #E3E9F9;
  font-size: 12.5px;
  font-weight: 600;
  color: #4A6FA5;
  text-decoration: none;
  flex: 0 0 auto;
}

#MainMenuDiv .sbv2-cz-more:hover {
  background: #EEF2FC;
}

#MainMenuDiv .sbv2-cz-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border-radius: 7px;
  font-size: 13px;
  color: #1D2433;
  cursor: pointer;
  font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

#MainMenuDiv .sbv2-cz-row:hover {
  background: #EEF2FC;
}

#MainMenuDiv .sbv2-cz-row input[type="checkbox"] {
  accent-color: #4A6FA5;
  width: 16px;
  height: 16px;
}

#MainMenuDiv .sbv2-cz-row i {
  width: 16px;
  text-align: center;
  color: #6B7690;
}

/* ==========================================================================
   Migrated from inline <style> blocks in includes/header.php (2026-08-27).
   Kept as plain unlayered CSS, at the same position in source order the
   inline blocks previously occupied (after the compiled bundle link), so
   cascade behavior is unchanged.
   ========================================================================== */

.select2-container--classic .select2-selection--single,
.select2-container--default .select2-selection--single {
  height: 34px;
  padding: 3px;
  white-space: nowrap;
}

.select2-container--classic .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 32px;
}

.select2-dropdown {
  z-index: 9999;
}

/* DataTables fixedHeader is appended to body (outside #CanvasDiv) so
   the theme rules nested under #CanvasDiv never match. These top-level
   rules keep it above normal content.
   top was hardcoded to 89px to sit right below the old sticky .header-main
   (that height, so the floating cloned header wouldn't overlap it) — with
   .header-main now display:none (Step 4, see the #BodyDiv/.side-bar-main
   section further down), there's nothing left above it to clear, so this
   is 0. Leaving it at 89px was the cause of fixedHeader's table clone
   sitting 89px too low, with scroll-trigger timing thrown off by the same
   amount (SelectProduct.php, SelectCustomer.php, and any other screen
   using fixedHeader). */

.dtfh-floatingparent.dtfh-floatingparent-head {
  z-index: 100 !important;
  top: 0 !important;
}

/* Page help text toggle — was a conditionally-echoed <style> block keyed off
   $_SESSION['ShowPageHelp']; header.php now toggles a body class instead. */

body.page-help-hidden .page_help_text {
  display: none;
}

a.nav-item {
  border: none;
}

#CanvasDiv .header-main {
  overflow: visible !important;
}

.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}

.dropdown.menu-filter-dropdown #myInput {
  box-sizing: border-box;
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 14px;
  padding: 5px 10px;
  border: none;
  border-bottom: 1px solid #ddd;
  font-weight: normal;
  width: 210px;
}

.search-filter-menu-ul li.submenu-item {
  font-size: 12px;
  font-weight: normal;
  text-align: left;
  margin-bottom: 15px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  width: 210px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 9999;
  height: 400px;
}

span.menu-heading-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  gap: 10px;
  border-bottom: 1px solid #b9b9b9;
  padding: 5px;
  border-top: 1px solid #b9b9b9;
  background-color: #efefef;
}

span.menu-sub-heading-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  gap: 10px;
  padding: 10px 10px;
}

ul.submenu-item-list-ul {
  padding: 0px 10px;
}

.dropdown-content img.image {
  width: 20px;
}

.submenu-item-list-ul li:first-child a {
  border-top: 1px solid #d3d3d3;
}

.submenu-item-list-ul li:last-child a {
  border-top: none;
}

.submenu-item a {
  color: black;
  padding: 5px;
  text-decoration: none;
  display: block;
  border-bottom: 1px dashed #d3d3d3;
}

.dropdown a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}

.dropdown.menu-filter-dropdown {
  position: relative;
  display: inline-block;
  padding-top: 0.6rem;
}

.profile-section-left-block {
  z-index: 9;
}

.profile-section {
  position: relative !important;
  z-index: 2 !important;
}

.nav-links-section .nav-list {
  pointer-events: none !important;
}

.nav-links-section .nav-list > li {
  pointer-events: auto !important;
}

.menu-new-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 3px;
  background: #f47b20;
  color: #fff;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Favourite star button */

.fav-page-toggle {
  position: absolute;
  right: 15px;
  top: 8px;
  z-index: 5;
}

.fav-star-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
  font-size: 20px;
  color: #999;
  padding: 4px 8px;
  transition: color 0.2s, transform 0.2s;
  outline: none;
}

.fav-star-btn:focus,
.fav-star-btn:active {
  background: transparent;
  box-shadow: none;
  outline: none;
}

.fav-star-btn:hover {
  color: #f5a623;
  transform: scale(1.15);
}

.fav-star-btn .fa-star.fav-active {
  color: #f5a623;
}

.fav-star-btn .fa-star-o {
  color: #999;
}

.fav-star-btn:hover .fa-star-o {
  color: #f5a623;
}

#BodyWrapDiv {
  position: relative;
}

/* Favourites nav dropdown */

.nav-favourites-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-favourites-toggle {
  cursor: pointer;
}

.nav-favourites-toggle .fa-star {
  color: #f5a623;
}

.fav-star-btn.nav-fav-star {
  font-size: 16px;
  padding: 0 4px 0 8px;
  line-height: 1;
  vertical-align: middle;
  transform: translateY(-7px);
}

.nav-list .nav-favourites-wrapper .nav-favourites-toggle.nav-item {
  padding-left: 0.5rem !important;
}

.nav-favourites-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 250px;
  max-width: 350px;
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
  padding: 0;
}

.nav-favourites-dropdown.show {
  display: block;
}

.nav-favourites-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-favourites-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
}

.nav-favourites-list li:last-child {
  border-bottom: none;
}

.nav-favourites-list li a {
  flex: 1;
  padding: 8px 12px;
  color: #333;
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-favourites-list li a:hover {
  background: #f5f5f5;
}

.nav-fav-remove {
  padding: 8px 10px;
  cursor: pointer;
  color: #ccc;
  font-size: 12px;
  transition: color 0.2s;
}

.nav-fav-remove:hover {
  color: #e74c3c;
}

.nav-fav-handle {
  padding: 8px 6px 8px 10px;
  cursor: grab;
  color: #ccc;
  font-size: 12px;
}

.nav-fav-handle:hover {
  color: #888;
}

.nav-favourites-list li.fav-dragging {
  opacity: 0.6;
}

.nav-favourites-list li.fav-sorting {
  background: #fafafa;
}

.nav-fav-placeholder {
  height: 34px;
  border: 1px dashed #bbb;
  background: #f5f7ff;
}

.nav-fav-rename {
  padding: 8px 6px;
  cursor: pointer;
  color: #ccc;
  font-size: 12px;
  transition: color 0.2s;
}

.nav-fav-rename:hover {
  color: #4361ee;
}

.nav-favourites-empty {
  padding: 15px;
  color: #999;
  font-size: 13px;
  text-align: center;
  margin: 0;
}

/* Help widget (next to favorites star) — hidden until library is live */

.help-widget-toggle {
  display: none;
  /* Set to inline-block to enable */
  position: absolute;
  right: 48px;
  top: 8px;
  z-index: 5;
}

.help-widget-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: #999;
  padding: 4px 8px;
  transition: color 0.2s, transform 0.2s;
  outline: none;
}

.help-widget-btn:hover {
  color: #4a90d9;
  transform: scale(1.15);
}

.help-widget-btn.has-videos {
  color: #4a90d9;
}

.help-widget-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  min-width: 300px;
  max-width: 380px;
  max-height: 420px;
  overflow-y: auto;
  z-index: 1001;
  padding: 0;
}

.help-widget-dropdown.show {
  display: block;
}

.help-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f0;
  background: #f7f8fa;
  border-radius: 6px 6px 0 0;
}

.help-widget-header span {
  font-weight: 600;
  font-size: 13px;
  color: #333;
}

.help-widget-header a {
  font-size: 12px;
  color: #4a90d9;
  text-decoration: none;
}

.help-widget-header a:hover {
  text-decoration: underline;
}

.help-widget-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.help-widget-list li {
  border-bottom: 1px solid #f0f0f0;
}

.help-widget-list li:last-child {
  border-bottom: none;
}

.help-widget-list li a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: #333;
  transition: background 0.15s;
}

.help-widget-list li a:hover {
  background: #f5f7fa;
}

.help-widget-list .hw-play-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: #e9ecf0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4a90d9;
  font-size: 12px;
  margin-top: 2px;
}

.help-widget-list .hw-info h5 {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.help-widget-list .hw-info p {
  margin: 0;
  font-size: 11px;
  color: #888;
  line-height: 1.3;
}

.help-widget-empty {
  padding: 20px 14px;
  text-align: center;
  color: #999;
  font-size: 13px;
}

/* Mobile header: keep only sidebar toggle, menu dropdowns, and company switcher on one line */

@media (max-width: 640px) {
  #CanvasDiv .header-main .header-inner {
    padding: 0.5rem 0.75rem !important;
  }

  #CanvasDiv .header-main .header-inner .profile-section {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    margin-bottom: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  #CanvasDiv .header-main .header-inner .profile-section .profile-section-left-block,
    #CanvasDiv .header-main .header-inner .profile-section .profile-section__block {
    width: auto !important;
    flex: 0 0 auto !important;
    gap: 0.5rem !important;
    justify-content: flex-start !important;
  }

  /* Hide non-essentials on mobile */

  #CanvasDiv .header-main .back-button,
    #CanvasDiv .header-main .company-info,
    #CanvasDiv .header-main .company-title,
    #CanvasDiv .header-main .user-profile {
    display: none !important;
  }

  /* Tighten the menu-filter search input so the row stays compact */

  #CanvasDiv .header-main .dropdown.menu-filter-dropdown {
    padding-top: 0 !important;
  }

  #CanvasDiv .header-main .dropdown.menu-filter-dropdown #myInput {
    width: 110px !important;
    padding: 4px 8px !important;
  }

  /* Compact company switcher */

  #CanvasDiv .header-main #company-switch.select-box {
    font-size: 13px !important;
    height: 32px !important;
    max-width: 140px !important;
  }

  /* The "Menu" trigger label */

  #CanvasDiv .header-main .responsive-menu {
    font-size: 13px !important;
    gap: 0.25rem !important;
  }

  /* Sidebar toggle icon stays tappable */

  #CanvasDiv .header-main .toggle-button img.list-child {
    width: 28px;
    height: 28px;
  }
}

/* Staging environment corner ribbon — HTML/script still emitted conditionally
   from header.php via genus_is_staging(); only the CSS lives here now. */

.genus-staging-ribbon {
  position: fixed;
  top: 0;
  right: 0;
  width: 160px;
  height: 160px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2147483647;
}

.genus-staging-ribbon span {
  position: absolute;
  display: block;
  width: 240px;
  padding: 6px 0;
  background: repeating-linear-gradient(45deg,#fef3c7,#fef3c7 10px,#fde68a 10px,#fde68a 20px);
  color: #78350f;
  text-align: center;
  font-family: sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  transform: rotate(45deg);
  top: 38px;
  right: -66px;
  border-top: 1px solid #b45309;
  border-bottom: 1px solid #b45309;
}

/* ==========================================================================
   DataTables toolbar restyle (search box + export buttons) — the one part
   of the earlier table-style pass confirmed to look good. The row/cell
   hairline redesign from that pass (table.styled-table thead/tbody rules)
   is deliberately NOT carried over — starting fresh on that separately.
   GENUS's own primary-color blue (#4a6fa5/#B4C8FD), not isl's navy — that
   was tried and reverted on the prior branch. Plus Jakarta Sans loaded via
   Google Fonts in header.php.

   Search box selector was originally .dataTables_filter input — that's the
   DataTables 1.x class name. This app runs DataTables 2.x (confirmed via
   the vendor css/datatables.min.css, which generates div.dt-container
   .dt-search input), so that selector never matched anything; only the
   button restyle below (dt-buttons is a real DT2 class) was ever taking
   effect. Fixed to .dt-search input. */

.dt-search input {
  border: 1px solid #E3E9F9 !important;
  border-radius: 7px !important;
  background: #EEF2FC;
  padding: 6px 10px !important;
  font-size: 13px;
  font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

.dt-search input:focus {
  outline: none;
  border-color: #4A6FA5 !important;
}

div.dt-buttons > .dt-button, div.dt-buttons > div.dt-button-split .dt-button {
  border: 1px solid #B4C8FD !important;
  border-radius: 7px !important;
  color: #1D2433 !important;
  font-size: 12px !important;
  padding: 7px 12px !important;
  margin-right: 4px;
  font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

div.dt-buttons > .dt-button:hover, div.dt-buttons > div.dt-button-split .dt-button:hover {
  background: #EEF2FC !important;
  border-color: #4A6FA5 !important;
}

/* ==========================================================================
   Header removed (Step 4) — the top .header-main row (company info, top
   search, nav-list, company switch, profile, sign out) is hidden; the
   sidebar is now the only nav. header.php itself is untouched — its PHP
   (session/security/menu data) still runs, only this HTML stops rendering
   visibly. .header-main is position:sticky (occupies normal-flow space),
   so display:none here lets #BodyDiv naturally shift up to fill that
   space — no extra top-margin/padding adjustment needed for that part.

   #MainMenuDiv's height was calc(100vh - 54px), sized to leave room for
   the header below it — now wrong with no header there; overridden to
   100vh. (The elseif nesting above nested it under #BodyDiv > .page-
   content-wrapper > .side-bar-main > #MainMenuDiv — that original rule is
   NOT deleted, just outranked by this flat/unlayered one later in the
   cascade, same pattern used throughout this file.) */

/* Every rule in this block (through #BodyWrapDiv's container-query root
   below) is gated behind body:not(.nav-classic) — feature/classic-nav-toggle.
   Confirmed via the ORIGINAL Tailwind-generated .side-bar-main rule (top of
   this file) plus toggleNav()/applySidebarState() (still present, further
   down): classic mode's fixed 220px sidebar never had content-area margin
   reserved for it at all — toggleNav() only ever fully hid or fully showed
   it (display:none/block on .page-content-wrapper), with the sidebar simply
   overlapping the content edge when visible. So classic mode gets NONE of
   this block — not a subset with different values — restoring that original,
   unmodified behavior exactly. Sidebar mode (body without .nav-classic, the
   default — existing users see zero change) keeps every one of these exactly
   as before; only the selector gained a body:not(.nav-classic) prefix. */

body:not(.nav-classic) .header-main {
  display: none !important;
}

body:not(.nav-classic) #MainMenuDiv {
  height: 100vh !important;
}

/* Content area never had explicit margin-left for the fixed sidebar before
   (confirmed by inspecting the compiled output — #BodyDiv/#BodyWrapDiv had
   none) — the app previously only ever fully hid or fully showed the
   sidebar (toggleNav(), display:none/block on .page-content-wrapper), never
   a "coexist at reduced width" state. Adding it explicitly now, tied to
   .sbv2-collapsed on #CanvasDiv (JS-toggled, single source of truth read
   by both the sidebar's own width rules above and this). calc() width
   alongside margin-left, not margin-left alone — #BodyDiv has width:100%
   !important elsewhere, which would overflow its container by the margin
   amount (masked by #BodyDiv's own overflow:hidden — invisible clipping,
   not a visible bug, but still wrong) without also reducing the width. */

/* .side-bar-main is position:fixed with no explicit left — it was never
   set because it didn't need to be: with no ancestor margin, a fixed
   element's "static position" (used when left/right are both auto) already
   resolved to the viewport's left edge. #BodyDiv's margin-left below
   changes that static-position basis for anything nested inside it,
   INCLUDING this fixed sidebar (#BodyDiv > .page-content-wrapper >
   .side-bar-main) — so without pinning left explicitly, the sidebar drifts
   right by the same 220/60px as the margin, instead of staying flush at
   the viewport edge. This was the cause of the "x alignment is screwed up"
   gray-gutter bug. */

body:not(.nav-classic) .side-bar-main {
  left: 0 !important;
}

/* #BodyDiv already carried Tailwind's tw-overflow-hidden, harmlessly, back
   when #BodyDiv was always full page width — content essentially never
   exceeded it. Now that it's ~220/60px narrower, any screen whose content
   (a wide table, a multi-column report, a fixed-width layout) doesn't
   reflow to the new width overflows the box and that overflow:hidden
   silently clips it — invisible, not scrollable, reads as "content pushed
   off screen". overflow-x:auto turns that into a local horizontal scroll
   inside the content pane instead of a silent clip. (This is a stopgap,
   not a fix for individual screens' own layouts not being width-aware —
   that's the bigger page-by-page pass.) */

/* Real bug, confirmed via getBoundingClientRect() in the browser: #BodyDiv
   rendered at the SAME width as its parent #CanvasDiv — the "-220px" never
   applied, only margin-left did, so the box extended 220px past its own
   parent (and the viewport) with nothing visibly wrong in the source.
   Root cause is SPECIFICITY, not layering (an earlier fix attempt here
   assumed a Cascade Layers issue — checked the actual compiled dist CSS
   and there are no real @layer boundaries left in it; Tailwind's build
   fully resolves @layer at compile time). What the compiled CSS actually
   contains is body { #CanvasDiv { #BodyDiv { width: 100% !important } } }
   — genuine CSS nesting, which counts the ancestor chain toward
   specificity. That makes the real competing selector
   "body #CanvasDiv #BodyDiv" (2 IDs + 1 element), while this rule was a
   bare "#BodyDiv" (1 ID) — lower specificity always loses, regardless of
   !important or source order. Matching that exact ancestor chain here
   ties the specificity, and this rule being later in source order wins
   the tie. */

body:not(.nav-classic) #BodyDiv {
  margin-left: 220px !important;
  overflow-x: auto !important;
  transition: margin-left 0.18s ease, width 0.18s ease;
}

body:not(.nav-classic) #CanvasDiv #BodyDiv {
  width: calc(100% - 220px) !important;
}

body:not(.nav-classic) #CanvasDiv.sbv2-collapsed #BodyDiv {
  margin-left: 60px !important;
  width: calc(100% - 60px) !important;
}

body:not(.nav-classic) #CanvasDiv.sbv2-collapsed .side-bar-main,
body:not(.nav-classic) #CanvasDiv.sbv2-collapsed #MainMenuDiv {
  width: 60px !important;
  /* .side-bar-main also carries Tailwind's tw-min-w-[220px] — min-width is
     a distinct property from width and isn't overridden just by beating
     width's cascade; without clamping it too, the box can't shrink below
     220px no matter what width says. */
  min-width: 60px !important;
}

/* Container-query root for page content, so a screen's own responsive rules
   can react to the ACTUAL space they have, not the full browser window.
   @media only ever sees viewport width — with a permanent 220/60px sidebar
   now eating into that, a screen can sit well past its own "should be 2
   columns, not 4" threshold while @media still thinks there's room,
   because the viewport itself never shrank. (MainDashboard.php's KPI/
   insights/alert grids ended up using fluid auto-fill/auto-fit
   grid-template-columns instead of @container breakpoints — no discrete
   threshold to get wrong — but this container root is still here for any
   screen that genuinely needs a breakpoint-style @container query rather
   than a fluid grid.) #BodyWrapDiv (not #BodyDiv) is the root:
   #BodyDiv is an ANCESTOR of the fixed sidebar too (#BodyDiv > .page-
   content-wrapper > .side-bar-main), and container-type implies layout
   containment, which makes a containing block for position:fixed
   descendants — putting this there would make .side-bar-main position
   itself relative to #BodyDiv's box instead of the viewport, reintroducing
   the earlier x-alignment bug. #BodyWrapDiv is a sibling of that wrapper,
   not an ancestor of the sidebar, so it's safe. */

body:not(.nav-classic) #BodyWrapDiv {
  container-type: inline-size;
  container-name: genus-content;
}

/* ==========================================================================
   Mobile: off-canvas drawer instead of a permanently fixed sidebar
   (feature/mobile-sidebar-nav). Below 768px there was no breakpoint at all
   before this — a permanently fixed 220/60px sidebar eats over half a
   phone screen with no way to hide it. Standard fix for exactly this shape
   of fixed sidebar: hidden off-screen by default via transform (not
   width/display, so the slide is animatable), revealed as a full-height
   overlay ON TOP of content through a new hamburger toggle + backdrop
   (#sbv2MobileToggle / #sbv2MobileBackdrop, includes/header.php) instead of
   sharing width with #BodyDiv the way desktop's margin-left reservation
   above does.

   New state class .sbv2-mobile-open on #CanvasDiv, kept deliberately
   separate from desktop's .sbv2-collapsed: collapsing to a narrow icon rail
   and an off-canvas drawer are different interactions, and reusing one
   class for both would mean .sbv2-collapsed's remembered desktop
   preference (localStorage sbv2Collapsed) leaking into mobile's always-
   starts-closed default, or vice versa. Mobile intentionally does NOT
   persist open/closed across page loads — every fresh page should start
   with the drawer closed, unlike desktop's remembered collapse state.

   Every selector below is prefixed body:not(.nav-classic) (feature/
   classic-nav-toggle merge) — .side-bar-main is the SAME physical wrapper
   div in both nav modes (classic mode's restored old accordion renders
   inside it too, see includes/header.php), and includes/header.php only
   renders #sbv2MobileToggle/#sbv2MobileBackdrop when $NavStyle isn't
   'classic'. Without this gate, classic mode's sidebar would still get
   transform: translateX(-100%)'d off-screen below 768px by this block,
   with no hamburger rendered to bring it back — the drawer would just
   look like the whole nav vanished on a classic-mode phone. Classic mode
   keeps its own pre-existing (untouched) mobile behavior instead, same as
   every other new-sidebar-only rule scoped this way elsewhere in this
   file. */

body:not(.nav-classic) .sbv2-mobile-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  /* 44x44 minimum touch target (mobile push, Phase 0) — was 40px, under the
     standard 44px accessibility guideline for tap targets. This is one of
     two regressions the mobile-friendliness audit found in our OWN new
     work (the other being the classic-mode header hamburger at 28px,
     styles.scss's .responsive-menu-icon rule — left as-is since classic
     mode is explicitly out of scope for this mobile push). */
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: #4A6FA5;
  color: #fff;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  font-size: 18px;
  cursor: pointer;
  z-index: 1700;
}

body:not(.nav-classic) .sbv2-mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.45);
  z-index: 1550;
}

@media (max-width: 768px) {
  body:not(.nav-classic) .side-bar-main {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 85vw !important;
    left: 0 !important;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  /* THE ACTUAL BUG, confirmed by getComputedStyle() in the browser AND by
     reading the compiled dist CSS: the two previous z-index fixes here
     still lost, because both only matched PART of the original rule's
     ancestor chain. The full compiled selector for the original Tailwind
     rule is nested four levels deep — body { #CanvasDiv { #BodyDiv {
     .page-content-wrapper { .side-bar-main { z-index: 1000 !important } } } } }
     — which resolves to "body #CanvasDiv #BodyDiv .page-content-wrapper
     .side-bar-main": TWO IDs plus two classes plus one element. My prior
     attempt only matched ".page-content-wrapper .side-bar-main" (zero
     IDs) — an ID always outweighs any number of classes, !important or
     not, so that rule could never have won regardless of z-index value or
     source order. This is the exact "body #CanvasDiv #BodyDiv" chain
     already used for the #BodyDiv width fix above (search "SPECIFICITY,
     not layering") — the precedent was right there and I still didn't
     walk the chain all the way up the first two times. Matching the FULL
     chain here actually ties the specificity; being later in source order
     then wins the tie. (body:not(.nav-classic) prefix doesn't change this
     math — :not() with a single class still counts as one class toward
     specificity, same as .nav-classic itself would, so the two IDs here
     still decide it.) */

  body:not(.nav-classic) #CanvasDiv #BodyDiv .page-content-wrapper .side-bar-main {
    z-index: 1600 !important;
  }

  body:not(.nav-classic) #CanvasDiv.sbv2-mobile-open .side-bar-main {
    transform: translateX(0);
  }

  body:not(.nav-classic) #MainMenuDiv {
    width: 100% !important;
  }

  /* Confirmed live on a real iPhone (2026-09-07): tapping the hamburger
     opened the drawer at the desktop COLLAPSED icon-rail width (60px),
     not the intended 280px, whenever localStorage's remembered desktop
     collapse preference (sbv2Collapsed) was '1' on that device -- a
     leftover from earlier desktop testing on the same phone/browser.
     Root cause: the desktop collapsed-width rule below (search
     "#CanvasDiv.sbv2-collapsed .side-bar-main") is NOT scoped to desktop
     viewports at all, and its selector carries an ID (#CanvasDiv) the
     ".side-bar-main"/"#MainMenuDiv" rules just above don't -- so it wins
     on specificity regardless of this @media block, exactly like every
     other ID-vs-class fight already documented in this file. Matching
     its exact selector here (same ID count) ties the specificity; being
     later in source order then wins the tie -- the same fix already
     applied to #BodyDiv below for the identical leak. */

  body:not(.nav-classic) #CanvasDiv.sbv2-collapsed .side-bar-main {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 85vw !important;
  }

  body:not(.nav-classic) #CanvasDiv.sbv2-collapsed #MainMenuDiv {
    width: 100% !important;
  }

  /* Content is full-width here — the drawer overlays it, it never shares
     width the way desktop's margin-left reservation does. Same selectors/
     specificity as the desktop block above (this is later in source order,
     so it wins the tie at equal specificity — same pattern used throughout
     this file), covering both the collapsed and non-collapsed desktop
     states since either can be the last-applied class when the viewport
     crosses this breakpoint. */

  body:not(.nav-classic) #BodyDiv,
  body:not(.nav-classic) #CanvasDiv.sbv2-collapsed #BodyDiv {
    margin-left: 0 !important;
  }

  body:not(.nav-classic) #CanvasDiv #BodyDiv,
  body:not(.nav-classic) #CanvasDiv.sbv2-collapsed #BodyDiv {
    width: 100% !important;
  }

  /* Desktop's icon-rail collapse toggle doesn't apply to an off-canvas
     drawer — there's no "narrow but still visible" state here. */

  body:not(.nav-classic) #MainMenuDiv .sbv2-collapse-toggle {
    display: none !important;
  }

  body:not(.nav-classic) .sbv2-mobile-toggle {
    display: flex;
  }

  /* Stays fixed at top-left even once the drawer is open, physically
     sitting on top of (and swallowing taps meant for) whatever's in that
     same corner of the open drawer's own content, since it's a HIGHER
     z-index (1700) than the drawer (1600) so it remains visible/tappable
     to close from outside the drawer too. Hidden while open instead —
     the backdrop's tap-to-close already covers closing it, no need for
     the button to stay there overlapping. */

  body:not(.nav-classic) #CanvasDiv.sbv2-mobile-open .sbv2-mobile-toggle {
    display: none;
  }

  body:not(.nav-classic) #CanvasDiv.sbv2-mobile-open .sbv2-mobile-backdrop {
    display: block;
  }
}

/* ==========================================================================
   Mobile push, Phase 0 (foundation) — global jQuery UI dialog override.
   Confirmed via a repo-wide grep for ".dialog(" (5 files: BatchPackOut.php,
   SalesOrdersBatchAllocate.php, SalesOrderManagement.php,
   AllocationChange.php, OrderRouting.php — two of which, BatchPackOut and
   SalesOrdersBatchAllocate, are on the mobile-target screen list) — every
   one hardcodes a fixed pixel width (400-700px) as a jQuery `.dialog({width:
   N})` option, which jQuery UI applies as an INLINE style on the generated
   .ui-dialog wrapper. A 700px inline width alone would force horizontal
   scroll of the whole page on a ~375-414px phone. Not gated behind
   body:not(.nav-classic) — dialog content isn't part of the nav chrome, it
   should work the same regardless of which nav mode surrounds it.

   !important is required here (not just specificity) because we're
   overriding an INLINE style, which nothing but !important can beat
   regardless of selector specificity. left/top are also forced, not just
   width — jQuery UI centers the dialog using its ORIGINAL width at
   position-calculation time, so leaving its computed left/top in place
   after we shrink the width would leave it off-center (or partly
   off-screen) rather than actually centered on the new, narrower box. */

@media (max-width: 768px) {
  .ui-dialog {
    width: 92vw !important;
    max-width: 92vw !important;
    left: 4vw !important;
    top: 5vh !important;
    max-height: 90vh !important;
    box-sizing: border-box !important;
  }

  .ui-dialog .ui-dialog-content {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   Mobile push, Phase 2: shared "form row" convention. The audit backing
   this whole mobile push found no shared form component anywhere in the
   app (see the note directly below this block) — every screen's label+
   input layout is its own bespoke <table><td>Label:</td><td><input></td>
   </table> (StockAdjustments.php-style), which is exactly the pattern the
   Phase 3 target screens need converted, over and over, with no shared
   CSS to lean on. Written once here instead of per-screen.

   Markup:
     <div class="form-row">
       <label class="form-row-label" for="SomeField">Label:</label>
       <div class="form-row-field"><input id="SomeField" ...></div>
     </div>
   Wrap a set of rows in <div class="form-row-group"> for consistent
   spacing between them — optional, not required by the row itself.

   Side-by-side on desktop (a fixed label column, like the tables it
   replaces); stacks to label-above-field under 600px, matching the
   phone-viewport breakpoint already established for the sidebar/dashboard
   mobile work. This is deliberately NOT gated behind body:not(.nav-classic)
   — a form row is page content, not nav chrome, so it works the same in
   both nav modes. */

.form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.form-row-label {
  flex: 0 0 160px;
  text-align: right;
  color: #6B7690;
  font-size: 13px;
}

.form-row-field {
  flex: 1 1 auto;
  min-width: 0;
}

.form-row-field input,
.form-row-field select,
.form-row-field textarea {
  width: 100%;
  box-sizing: border-box;
}

.form-row-group > .form-row:last-child {
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .form-row-label {
    flex: none;
    text-align: left;
  }
}

/* ==========================================================================
   Global generic-element theme layer — Track A of the reskin scope (see
   the published "Reskin & Reflow Scope" plan). Confirmed via codebase
   research: there is no shared button/table/form component system outside
   .styled-table (48 screens) and the DataTables toolbar restyle above —
   182 screens carry their own inline <style> blocks. What EVERY screen
   still shares, whether or not it has bespoke styling, is the app's
   decades-old baseline in css/WEBootstrap/default.css: light-blue outset
   buttons (#34a7e8), gray-bordered inputs, a black centered
   .page_title_text, a plain white table.selection with a drop shadow.
   Retheming those generic/default rules with the sidebar's palette is the
   highest-leverage, lowest-risk move available — it reaches every screen
   that has NOT already overridden them with its own <style> block, with
   zero per-screen edits. A screen with its own hardcoded button/table
   colors will still win here (same as it already wins over default.css)
   — those are genuinely Track B, one screen at a time.

   default.css's own rules use no !important and low specificity, so these
   only need mild !important to win reliably — confirmed there's already
   an existing button style nested under #BodyWrapDiv (line ~313,
   tw-bg-btn-bg-color / tw-text-primary-color, a light-fill "secondary"
   look), non-important, so !important here safely wins over it too
   without needing to match its long ancestor-chain specificity — same
   "both sides using !important" trap as the #BodyDiv bug from earlier
   does NOT apply here since that existing rule isn't !important. */

/* :not([class]):not([style]) on every one of these — deliberately
   conservative. Confirmed real risk: several screens (MainDashboard.php
   among them) have bare <button> elements with their OWN inline colors
   (e.g. style="background:#475569;...") that don't use !important —
   this rule's !important would otherwise silently override those non-
   important inline styles, repainting a deliberately gray/neutral button
   GENUS blue. Requiring NO class and NO inline style means this only ever
   touches genuinely plain, unstyled elements — the exact "hasn't been
   customized at all" case Track A is meant to catch — never a button or
   field any screen already opted into styling itself, whether via a
   custom class (even a non-!important one) or a bare style attribute. */

input[type='submit']:not([class]):not([style]),
input[type='button']:not([class]):not([style]),
button:not([class]):not([style]) {
  background: #4A6FA5 !important;
  border: 1px solid #4A6FA5 !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
  padding: 7px 18px !important;
  box-shadow: none !important;
  font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

input[type='submit']:not([class]):not([style]):hover,
input[type='button']:not([class]):not([style]):hover,
button:not([class]):not([style]):hover {
  background: #3d5c87 !important;
  border-color: #3d5c87 !important;
}

input[type='text']:not([class]):not([style]), input[type='tel']:not([class]):not([style]),
input[type='password']:not([class]):not([style]), input[type='email']:not([class]):not([style]),
input[type='number']:not([class]):not([style]), input[type='search']:not([class]):not([style]),
input[type='date']:not([class]):not([style]), select:not([class]):not([style]), textarea:not([class]):not([style]) {
  border: 1px solid #E3E9F9 !important;
  border-radius: 7px !important;
}

input[type='text']:not([class]):not([style]):focus, input[type='tel']:not([class]):not([style]):focus,
input[type='password']:not([class]):not([style]):focus, input[type='email']:not([class]):not([style]):focus,
input[type='number']:not([class]):not([style]):focus, input[type='search']:not([class]):not([style]):focus,
input[type='date']:not([class]):not([style]):focus, textarea:not([class]):not([style]):focus,
select:not([class]):not([style]):focus, button:not([class]):not([style]):focus {
  outline: none !important;
  border-color: #4A6FA5 !important;
  box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.15) !important;
}

table.selection {
  background: #fff !important;
  border: 1px solid #E3E9F9 !important;
  border-radius: 9px !important;
  box-shadow: 0 1px 2px rgba(29, 36, 51, .04), 0 8px 24px rgba(29, 36, 51, .06) !important;
}

table.selection th {
  background: #EEF2FC !important;
  color: #1D2433 !important;
  border-bottom: 1px solid #E3E9F9 !important;
  font-weight: 600 !important;
}

.page_title_text {
  color: #1D2433 !important;
  font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700 !important;
}

/* #FooterDiv (includes/footer.php) is rendered as a SIBLING of #CanvasDiv,
   not nested inside it — footer.php explicitly closes #CanvasDiv before
   opening the footer. So it was never touched by #BodyDiv's sidebar-aware
   margin/width fix above, and its own width:100% (Tailwind, non-important)
   spans the full viewport with no idea the fixed sidebar exists, putting
   #FooterLogoDiv (the leftmost element in it) directly under the sidebar
   rail. Same fix as #BodyDiv, just needs the general sibling combinator
   (~) since #FooterDiv isn't a descendant of #CanvasDiv, so the
   .sbv2-collapsed class toggled on #CanvasDiv can't be reached with a
   descendant selector here the way it is elsewhere. */

#FooterDiv {
  margin-left: 220px !important;
  width: calc(100% - 220px) !important;
  transition: margin-left 0.18s ease, width 0.18s ease;
}

#CanvasDiv.sbv2-collapsed ~ #FooterDiv {
  margin-left: 60px !important;
  width: calc(100% - 60px) !important;
}

/* Mobile push: this whole #FooterDiv sidebar-offset fix above isn't gated
   behind body:not(.nav-classic) (it applies regardless of nav mode
   already, matching how it was written before this pass), so this mobile
   override matches that same scope rather than introducing a new
   inconsistency. Below 768px the sidebar is off-canvas, not reserving any
   horizontal space, so the margin-left/width compensation is not just
   unneeded but actively wrong -- it pushes the footer's content 220px (or
   60px collapsed) to the right on a screen that's often only ~375-414px
   wide to begin with, and #FooterDiv/#FooterWrapDiv's own overflow:hidden
   (default.css) then CLIPS whatever doesn't fit rather than wrapping it,
   same "clips instead of scrolls" class of bug already found and fixed
   twice elsewhere in this file. default.css's own float-based layout
   (#FooterLogoDiv float:right, #FooterVersionDiv float:left,
   #FooterTimeDiv clear:left) also has no room to breathe at that width --
   stacked and centered instead. */

@media (max-width: 768px) {
  #FooterDiv,
  #CanvasDiv.sbv2-collapsed ~ #FooterDiv {
    margin-left: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  #FooterWrapDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
  }

  #FooterLogoDiv,
  #FooterVersionDiv,
  #FooterTimeDiv {
    float: none;
    clear: none;
    margin: 0;
  }
}