@charset "UTF-8";@font-face {
  font-family: 'Hubot Sans';
  src: url('/assets/hubotsans-DVOGjEo-.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  font-smooth: always;
}

@font-face {
  font-family: 'Host Grotesk';
  src: url('/assets/hostgrotesk-c3nXu1KX.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

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

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

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

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

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

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

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family: Hubot Sans, Host Grotesk, Arial, Helvetica, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

button,
select {
  text-transform: none;
}

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

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

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

:-moz-focusring {
  outline: auto;
}

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

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

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

summary {
  display: list-item;
}

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

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

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

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

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

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

:disabled {
  cursor: default;
}

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

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

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

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

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

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

* {
    border-color: var(--border);
    outline-color: color-mix(in srgb, var(--ring) 50%, transparent);
  }

body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: Inter, system-ui, sans-serif;
  }

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

::-webkit-scrollbar-track {
    background: var(--background);
  }

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
  }

::-webkit-scrollbar-thumb:hover {
    background: var(--muted-foreground);
  }
.\!container {
  width: 100% !important;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-0\.5 {
  bottom: -0.125rem;
}
.-bottom-2 {
  bottom: -0.5rem;
}
.-bottom-\[6px\] {
  bottom: -6px;
}
.-left-2 {
  left: -0.5rem;
}
.-left-\[3px\] {
  left: -3px;
}
.-left-\[6px\] {
  left: -6px;
}
.-right-0\.5 {
  right: -0.125rem;
}
.-right-1 {
  right: -0.25rem;
}
.-right-2 {
  right: -0.5rem;
}
.-right-\[6px\] {
  right: -6px;
}
.-top-0\.5 {
  top: -0.125rem;
}
.-top-1 {
  top: -0.25rem;
}
.-top-2 {
  top: -0.5rem;
}
.-top-\[6px\] {
  top: -6px;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-0\.5 {
  bottom: 0.125rem;
}
.bottom-4 {
  bottom: 1rem;
}
.bottom-48 {
  bottom: 12rem;
}
.bottom-6 {
  bottom: 1.5rem;
}
.bottom-7 {
  bottom: 1.75rem;
}
.bottom-\[21px\] {
  bottom: 21px;
}
.left-0 {
  left: 0px;
}
.left-0\.5 {
  left: 0.125rem;
}
.left-1 {
  left: 0.25rem;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.left-\[10px\] {
  left: 10px;
}
.left-\[305px\] {
  left: 305px;
}
.right-0 {
  right: 0px;
}
.right-0\.5 {
  right: 0.125rem;
}
.right-1 {
  right: 0.25rem;
}
.right-1\.5 {
  right: 0.375rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.right-5 {
  right: 1.25rem;
}
.right-6 {
  right: 1.5rem;
}
.right-\[160px\] {
  right: 160px;
}
.top-0 {
  top: 0px;
}
.top-1 {
  top: 0.25rem;
}
.top-1\/2 {
  top: 50%;
}
.top-3 {
  top: 0.75rem;
}
.top-32 {
  top: 8rem;
}
.top-4 {
  top: 1rem;
}
.top-\[36px\] {
  top: 36px;
}
.top-\[3px\] {
  top: 3px;
}
.top-full {
  top: 100%;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[10000\] {
  z-index: 10000;
}
.z-\[15\] {
  z-index: 15;
}
.z-\[60\] {
  z-index: 60;
}
.z-\[9900\] {
  z-index: 9900;
}
.z-\[9998\] {
  z-index: 9998;
}
.z-\[9999\] {
  z-index: 9999;
}
.order-2 {
  order: 2;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-4 {
  grid-column: span 4 / span 4;
}
.m-0 {
  margin: 0px;
}
.m-1\.5 {
  margin: 0.375rem;
}
.m-2 {
  margin: 0.5rem;
}
.m-2\.5 {
  margin: 0.625rem;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-mx-2 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
.mx-0 {
  margin-left: 0px;
  margin-right: 0px;
}
.mx-0\.5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-1\.5 {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.-mb-\[2px\] {
  margin-bottom: -2px;
}
.-mr-10 {
  margin-right: -2.5rem;
}
.-mt-1 {
  margin-top: -0.25rem;
}
.-mt-10 {
  margin-top: -2.5rem;
}
.-mt-3 {
  margin-top: -0.75rem;
}
.-mt-8 {
  margin-top: -2rem;
}
.mb-0 {
  margin-bottom: 0px;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-2\.5 {
  margin-bottom: 0.625rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-\[-2px\] {
  margin-bottom: -2px;
}
.mb-\[2px\] {
  margin-bottom: 2px;
}
.mb-\[3px\] {
  margin-bottom: 3px;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-12 {
  margin-left: 3rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-5 {
  margin-left: 1.25rem;
}
.ml-6 {
  margin-left: 1.5rem;
}
.ml-\[1px\] {
  margin-left: 1px;
}
.ml-auto {
  margin-left: auto;
}
.mr-0 {
  margin-right: 0px;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mr-4 {
  margin-right: 1rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-20 {
  margin-top: 5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-\[150px\] {
  margin-top: 150px;
}
.mt-\[1px\] {
  margin-top: 1px;
}
.mt-auto {
  margin-top: auto;
}
.box-content {
  box-sizing: content-box;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.\!h-5 {
  height: 1.25rem !important;
}
.h-0 {
  height: 0px;
}
.h-0\.5 {
  height: 0.125rem;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-20 {
  height: 5rem;
}
.h-24 {
  height: 6rem;
}
.h-28 {
  height: 7rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-4\/5 {
  height: 80%;
}
.h-44 {
  height: 11rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-52 {
  height: 13rem;
}
.h-6 {
  height: 1.5rem;
}
.h-60 {
  height: 15rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-80 {
  height: 20rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[150px\] {
  height: 150px;
}
.h-\[20px\] {
  height: 20px;
}
.h-\[240px\] {
  height: 240px;
}
.h-\[260px\] {
  height: 260px;
}
.h-\[28px\] {
  height: 28px;
}
.h-\[350px\] {
  height: 350px;
}
.h-\[38px\] {
  height: 38px;
}
.h-\[520px\] {
  height: 520px;
}
.h-\[65px\] {
  height: 65px;
}
.h-\[70vh\] {
  height: 70vh;
}
.h-\[75px\] {
  height: 75px;
}
.h-\[80px\] {
  height: 80px;
}
.h-\[90vh\] {
  height: 90vh;
}
.h-\[95vh\] {
  height: 95vh;
}
.h-\[calc\(100\%-3rem\)\] {
  height: calc(100% - 3rem);
}
.h-\[calc\(100\%-7rem\)\] {
  height: calc(100% - 7rem);
}
.h-\[calc\(100dvh-35px\)\] {
  height: calc(100dvh - 35px);
}
.h-\[calc\(100vh-120px\)\] {
  height: calc(100vh - 120px);
}
.h-\[calc\(100vh-180px\)\] {
  height: calc(100vh - 180px);
}
.h-\[calc\(100vh-54px\)\] {
  height: calc(100vh - 54px);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-screen {
  height: 100vh;
}
.max-h-48 {
  max-height: 12rem;
}
.max-h-5 {
  max-height: 1.25rem;
}
.max-h-60 {
  max-height: 15rem;
}
.max-h-\[220px\] {
  max-height: 220px;
}
.max-h-\[650px\] {
  max-height: 650px;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.max-h-\[8\%\] {
  max-height: 8%;
}
.max-h-\[80\%\] {
  max-height: 80%;
}
.max-h-\[80vh\] {
  max-height: 80vh;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-\[95px\] {
  max-height: 95px;
}
.max-h-\[95vh\] {
  max-height: 95vh;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-\[150px\] {
  min-height: 150px;
}
.min-h-\[210px\] {
  min-height: 210px;
}
.min-h-\[260px\] {
  min-height: 260px;
}
.min-h-\[32px\] {
  min-height: 32px;
}
.min-h-\[350px\] {
  min-height: 350px;
}
.min-h-\[46px\] {
  min-height: 46px;
}
.min-h-\[500px\] {
  min-height: 500px;
}
.min-h-\[56px\] {
  min-height: 56px;
}
.min-h-\[70vh\] {
  min-height: 70vh;
}
.min-h-\[72px\] {
  min-height: 72px;
}
.min-h-\[calc\(100vh-100px\)\] {
  min-height: calc(100vh - 100px);
}
.min-h-\[calc\(100vh-120px\)\] {
  min-height: calc(100vh - 120px);
}
.min-h-\[calc\(100vh-38px\)\] {
  min-height: calc(100vh - 38px);
}
.min-h-full {
  min-height: 100%;
}
.min-h-screen {
  min-height: 100vh;
}
.\!w-full {
  width: 100% !important;
}
.w-0 {
  width: 0px;
}
.w-0\.5 {
  width: 0.125rem;
}
.w-1 {
  width: 0.25rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/2 {
  width: 50%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-44 {
  width: 11rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-52 {
  width: 13rem;
}
.w-6 {
  width: 1.5rem;
}
.w-60 {
  width: 15rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[110px\] {
  width: 110px;
}
.w-\[120px\] {
  width: 120px;
}
.w-\[140px\] {
  width: 140px;
}
.w-\[14px\] {
  width: 14px;
}
.w-\[150px\] {
  width: 150px;
}
.w-\[200px\] {
  width: 200px;
}
.w-\[20px\] {
  width: 20px;
}
.w-\[220px\] {
  width: 220px;
}
.w-\[260px\] {
  width: 260px;
}
.w-\[28px\] {
  width: 28px;
}
.w-\[300px\] {
  width: 300px;
}
.w-\[340px\] {
  width: 340px;
}
.w-\[3px\] {
  width: 3px;
}
.w-\[520px\] {
  width: 520px;
}
.w-\[65px\] {
  width: 65px;
}
.w-\[75px\] {
  width: 75px;
}
.w-\[80\%\] {
  width: 80%;
}
.w-\[80px\] {
  width: 80px;
}
.w-\[90vw\] {
  width: 90vw;
}
.w-\[95px\] {
  width: 95px;
}
.w-auto {
  width: auto;
}
.w-fit {
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: max-content;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[120px\] {
  min-width: 120px;
}
.min-w-\[140px\] {
  min-width: 140px;
}
.min-w-\[16px\] {
  min-width: 16px;
}
.min-w-\[170px\] {
  min-width: 170px;
}
.min-w-\[180px\] {
  min-width: 180px;
}
.min-w-\[185px\] {
  min-width: 185px;
}
.min-w-\[200px\] {
  min-width: 200px;
}
.min-w-\[20px\] {
  min-width: 20px;
}
.min-w-\[220px\] {
  min-width: 220px;
}
.min-w-\[230px\] {
  min-width: 230px;
}
.min-w-\[260px\] {
  min-width: 260px;
}
.min-w-\[280px\] {
  min-width: 280px;
}
.min-w-\[300px\] {
  min-width: 300px;
}
.min-w-\[36px\] {
  min-width: 36px;
}
.min-w-\[38px\] {
  min-width: 38px;
}
.min-w-\[480px\] {
  min-width: 480px;
}
.min-w-\[50px\] {
  min-width: 50px;
}
.min-w-\[64px\] {
  min-width: 64px;
}
.min-w-\[700px\] {
  min-width: 700px;
}
.min-w-\[72px\] {
  min-width: 72px;
}
.min-w-\[800px\] {
  min-width: 800px;
}
.min-w-fit {
  min-width: fit-content;
}
.min-w-full {
  min-width: 100%;
}
.min-w-max {
  min-width: max-content;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-\[100px\] {
  max-width: 100px;
}
.max-w-\[110px\] {
  max-width: 110px;
}
.max-w-\[120px\] {
  max-width: 120px;
}
.max-w-\[150px\] {
  max-width: 150px;
}
.max-w-\[160px\] {
  max-width: 160px;
}
.max-w-\[200px\] {
  max-width: 200px;
}
.max-w-\[220px\] {
  max-width: 220px;
}
.max-w-\[240px\] {
  max-width: 240px;
}
.max-w-\[250px\] {
  max-width: 250px;
}
.max-w-\[280px\] {
  max-width: 280px;
}
.max-w-\[320px\] {
  max-width: 320px;
}
.max-w-\[350px\] {
  max-width: 350px;
}
.max-w-\[40px\] {
  max-width: 40px;
}
.max-w-\[42rem\] {
  max-width: 42rem;
}
.max-w-\[67vw\] {
  max-width: 67vw;
}
.max-w-\[800px\] {
  max-width: 800px;
}
.max-w-\[85px\] {
  max-width: 85px;
}
.max-w-\[90vw\] {
  max-width: 90vw;
}
.max-w-\[95\%\] {
  max-width: 95%;
}
.max-w-full {
  max-width: 100%;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-\[1\.35\] {
  flex: 1.35;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.flex-grow {
  flex-grow: 1;
}
.grow {
  flex-grow: 1;
}
.table-fixed {
  table-layout: fixed;
}
.border-collapse {
  border-collapse: collapse;
}
.border-separate {
  border-collapse: separate;
}
.border-spacing-0 {
  --tw-border-spacing-x: 0px;
  --tw-border-spacing-y: 0px;
  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  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));
}
.-translate-y-0\.5 {
  --tw-translate-y: -0.125rem;
  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));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  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));
}
.-translate-y-5 {
  --tw-translate-y: -1.25rem;
  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));
}
.-translate-y-px {
  --tw-translate-y: -1px;
  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));
}
.translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  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));
}
.translate-x-1 {
  --tw-translate-x: 0.25rem;
  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));
}
.translate-x-11 {
  --tw-translate-x: 2.75rem;
  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));
}
.translate-x-4 {
  --tw-translate-x: 1rem;
  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));
}
.translate-x-5 {
  --tw-translate-x: 1.25rem;
  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));
}
.translate-x-6 {
  --tw-translate-x: 1.5rem;
  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));
}
.translate-x-7 {
  --tw-translate-x: 1.75rem;
  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));
}
.translate-y-0 {
  --tw-translate-y: 0px;
  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));
}
.translate-y-4 {
  --tw-translate-y: 1rem;
  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-90 {
  --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));
}
.rotate-180 {
  --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));
}
.rotate-90 {
  --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));
}
.rotate-y-0 {
  --tw-rotate: rotateY(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));
}
.rotate-y-180 {
  --tw-rotate: rotateY(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));
}
.rotate-y-\[-180deg\] {
  --tw-rotate: rotateY(-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));
}
.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  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));
}
.scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  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));
}
.scale-125 {
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
  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));
}
.scale-95 {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  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));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-col-resize {
  cursor: col-resize;
}
.cursor-default {
  cursor: default;
}
.cursor-grab {
  cursor: grab;
}
.cursor-move {
  cursor: move;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-manipulation {
  touch-action: manipulation;
}
.select-none {
  -webkit-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize {
  resize: both;
}
.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}
.snap-start {
  scroll-snap-align: start;
}
.scroll-pt-\[60px\] {
  scroll-padding-top: 60px;
}
.list-none {
  list-style-type: none;
}
.appearance-none {
  appearance: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-\[60px_1fr\] {
  grid-template-columns: 60px 1fr;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-evenly {
  justify-content: space-evenly;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-3\.5 {
  gap: 0.875rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-\[5px\] {
  gap: 5px;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1));
}
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-divide-opacity, 1));
}
.self-center {
  align-self: center;
}
.self-stretch {
  align-self: stretch;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-y-hidden {
  overflow-y: hidden;
}
.overscroll-contain {
  overscroll-behavior: contain;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis {
  text-overflow: ellipsis;
}
.whitespace-normal {
  white-space: normal;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.text-balance {
  text-wrap: balance;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.\!rounded-lg {
  border-radius: calc(var(--radius) + 4px) !important;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-\[20px\] {
  border-radius: 20px;
}
.rounded-\[5px\] {
  border-radius: 5px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: calc(var(--radius) + 4px);
}
.rounded-md {
  border-radius: var(--radius);
}
.rounded-none {
  border-radius: 0px;
}
.rounded-sm {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-xl {
  border-radius: calc(var(--radius) + 8px);
}
.rounded-l-lg {
  border-top-left-radius: calc(var(--radius) + 4px);
  border-bottom-left-radius: calc(var(--radius) + 4px);
}
.rounded-r-lg {
  border-top-right-radius: calc(var(--radius) + 4px);
  border-bottom-right-radius: calc(var(--radius) + 4px);
}
.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.rounded-t-full {
  border-top-left-radius: 9999px;
  border-top-right-radius: 9999px;
}
.rounded-t-lg {
  border-top-left-radius: calc(var(--radius) + 4px);
  border-top-right-radius: calc(var(--radius) + 4px);
}
.rounded-t-md {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.rounded-t-xl {
  border-top-left-radius: calc(var(--radius) + 8px);
  border-top-right-radius: calc(var(--radius) + 8px);
}
.\!border {
  border-width: 1px !important;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-4 {
  border-width: 4px;
}
.border-\[3px\] {
  border-width: 3px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.\!border-r-0 {
  border-right-width: 0px !important;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-0 {
  border-bottom-width: 0px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-b-4 {
  border-bottom-width: 4px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-r {
  border-right-width: 1px;
}
.border-r-2 {
  border-right-width: 2px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-2 {
  border-top-width: 2px;
}
.border-dashed {
  border-style: dashed;
}
.border-none {
  border-style: none;
}
.\!border-\[var\(--danger\)\] {
  border-color: var(--danger) !important;
}
.\!border-gray-300 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)) !important;
}
.border-\[\#0065b2\] {
  --tw-border-opacity: 1;
  border-color: rgb(0 101 178 / var(--tw-border-opacity, 1));
}
.border-\[\#2563eb\] {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.border-\[\#2b6cf6\] {
  --tw-border-opacity: 1;
  border-color: rgb(43 108 246 / var(--tw-border-opacity, 1));
}
.border-\[\#333\] {
  --tw-border-opacity: 1;
  border-color: rgb(51 51 51 / var(--tw-border-opacity, 1));
}
.border-\[\#33cc41\] {
  --tw-border-opacity: 1;
  border-color: rgb(51 204 65 / var(--tw-border-opacity, 1));
}
.border-\[\#3d3d3d\] {
  --tw-border-opacity: 1;
  border-color: rgb(61 61 61 / var(--tw-border-opacity, 1));
}
.border-\[\#4d4d4d\] {
  --tw-border-opacity: 1;
  border-color: rgb(77 77 77 / var(--tw-border-opacity, 1));
}
.border-\[\#5a5a5a\] {
  --tw-border-opacity: 1;
  border-color: rgb(90 90 90 / var(--tw-border-opacity, 1));
}
.border-\[\#c0c0c0\] {
  --tw-border-opacity: 1;
  border-color: rgb(192 192 192 / var(--tw-border-opacity, 1));
}
.border-\[\#c0ff00\] {
  --tw-border-opacity: 1;
  border-color: rgb(192 255 0 / var(--tw-border-opacity, 1));
}
.border-\[\#eee\] {
  --tw-border-opacity: 1;
  border-color: rgb(238 238 238 / var(--tw-border-opacity, 1));
}
.border-\[\#eeeeee\] {
  --tw-border-opacity: 1;
  border-color: rgb(238 238 238 / var(--tw-border-opacity, 1));
}
.border-\[var\(--border\)\] {
  border-color: var(--border);
}
.border-\[var\(--danger\)\] {
  border-color: var(--danger);
}
.border-\[var\(--primary-detail\)\] {
  border-color: var(--primary-detail);
}
.border-\[var\(--primary-light\)\] {
  border-color: var(--primary-light);
}
.border-\[var\(--secondary-light\)\] {
  border-color: var(--secondary-light);
}
.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.border-amber-500 {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}
.border-background {
  border-color: var(--background);
}
.border-black {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}
.border-black\/10 {
  border-color: rgb(0 0 0 / 0.1);
}
.border-black\/20 {
  border-color: rgb(0 0 0 / 0.2);
}
.border-black\/5 {
  border-color: rgb(0 0 0 / 0.05);
}
.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-blue-300 {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.border-blue-400 {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.border-border {
  border-color: var(--border);
}
.border-emerald-200 {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-emerald-200\/50 {
  border-color: rgb(167 243 208 / 0.5);
}
.border-emerald-300 {
  --tw-border-opacity: 1;
  border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}
.border-emerald-500 {
  --tw-border-opacity: 1;
  border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.border-emerald-600 {
  --tw-border-opacity: 1;
  border-color: rgb(5 150 105 / var(--tw-border-opacity, 1));
}
.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-200\/30 {
  border-color: rgb(229 231 235 / 0.3);
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-gray-400 {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}
.border-gray-50 {
  --tw-border-opacity: 1;
  border-color: rgb(249 250 251 / var(--tw-border-opacity, 1));
}
.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.border-gray-800 {
  --tw-border-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
}
.border-gray-900 {
  --tw-border-opacity: 1;
  border-color: rgb(17 24 39 / var(--tw-border-opacity, 1));
}
.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}
.border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}
.border-green-600 {
  --tw-border-opacity: 1;
  border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
}
.border-indigo-200\/50 {
  border-color: rgb(199 210 254 / 0.5);
}
.border-indigo-300 {
  --tw-border-opacity: 1;
  border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}
.border-lime-400 {
  --tw-border-opacity: 1;
  border-color: rgb(163 230 53 / var(--tw-border-opacity, 1));
}
.border-primary {
  border-color: var(--primary);
}
.border-primary-dark\/25 {
  border-color: rgb(0 0 0 / 0.25);
}
.border-primary-detail {
  --tw-border-opacity: 1;
  border-color: rgb(192 255 0 / var(--tw-border-opacity, 1));
}
.border-primary-detail-hover {
  --tw-border-opacity: 1;
  border-color: rgb(185 232 104 / var(--tw-border-opacity, 1));
}
.border-primary-detail\/30 {
  border-color: rgb(192 255 0 / 0.3);
}
.border-primary-detail\/50 {
  border-color: rgb(192 255 0 / 0.5);
}
.border-primary-light {
  --tw-border-opacity: 1;
  border-color: rgb(192 192 192 / var(--tw-border-opacity, 1));
}
.border-purple-200 {
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}
.border-purple-500 {
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}
.border-red-100 {
  --tw-border-opacity: 1;
  border-color: rgb(254 226 226 / var(--tw-border-opacity, 1));
}
.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-400 {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-red-600 {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.border-rose-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
}
.border-slate-100 {
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}
.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}
.border-slate-300 {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.border-slate-400 {
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}
.border-slate-50 {
  --tw-border-opacity: 1;
  border-color: rgb(248 250 252 / var(--tw-border-opacity, 1));
}
.border-slate-600 {
  --tw-border-opacity: 1;
  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
.border-transparent {
  border-color: transparent;
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-yellow-300 {
  --tw-border-opacity: 1;
  border-color: rgb(253 224 71 / var(--tw-border-opacity, 1));
}
.border-yellow-400 {
  --tw-border-opacity: 1;
  border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
}
.border-zinc-300 {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 216 / var(--tw-border-opacity, 1));
}
.border-l-blue-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-l-gray-600 {
  --tw-border-opacity: 1;
  border-left-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.border-l-green-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}
.border-l-primary-detail {
  --tw-border-opacity: 1;
  border-left-color: rgb(192 255 0 / var(--tw-border-opacity, 1));
}
.border-l-red-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-l-yellow-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
}
.border-t-primary-dark {
  --tw-border-opacity: 1;
  border-top-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-\[\#00508c\] {
  --tw-bg-opacity: 1;
  background-color: rgb(0 80 140 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0065b2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(0 101 178 / var(--tw-bg-opacity, 1));
}
.bg-\[\#01579b\] {
  --tw-bg-opacity: 1;
  background-color: rgb(1 87 155 / var(--tw-bg-opacity, 1));
}
.bg-\[\#141414\] {
  --tw-bg-opacity: 1;
  background-color: rgb(20 20 20 / var(--tw-bg-opacity, 1));
}
.bg-\[\#16a34a\] {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1976d2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(25 118 210 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1a1a1a\] {
  --tw-bg-opacity: 1;
  background-color: rgb(26 26 26 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1e1e1e\] {
  --tw-bg-opacity: 1;
  background-color: rgb(30 30 30 / var(--tw-bg-opacity, 1));
}
.bg-\[\#2b3047\] {
  --tw-bg-opacity: 1;
  background-color: rgb(43 48 71 / var(--tw-bg-opacity, 1));
}
.bg-\[\#2d2d2d\] {
  --tw-bg-opacity: 1;
  background-color: rgb(45 45 45 / var(--tw-bg-opacity, 1));
}
.bg-\[\#333333\] {
  --tw-bg-opacity: 1;
  background-color: rgb(51 51 51 / var(--tw-bg-opacity, 1));
}
.bg-\[\#33cc41\] {
  --tw-bg-opacity: 1;
  background-color: rgb(51 204 65 / var(--tw-bg-opacity, 1));
}
.bg-\[\#33cc80\] {
  --tw-bg-opacity: 1;
  background-color: rgb(51 204 128 / var(--tw-bg-opacity, 1));
}
.bg-\[\#3b82f6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-\[\#3d3d3d\] {
  --tw-bg-opacity: 1;
  background-color: rgb(61 61 61 / var(--tw-bg-opacity, 1));
}
.bg-\[\#43a047\] {
  --tw-bg-opacity: 1;
  background-color: rgb(67 160 71 / var(--tw-bg-opacity, 1));
}
.bg-\[\#5a5a5a\] {
  --tw-bg-opacity: 1;
  background-color: rgb(90 90 90 / var(--tw-bg-opacity, 1));
}
.bg-\[\#5cb85c\] {
  --tw-bg-opacity: 1;
  background-color: rgb(92 184 92 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E3B3A5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(227 179 165 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFF7E1\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 225 / var(--tw-bg-opacity, 1));
}
.bg-\[\#a0a0a0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(160 160 160 / var(--tw-bg-opacity, 1));
}
.bg-\[\#adadad\] {
  --tw-bg-opacity: 1;
  background-color: rgb(173 173 173 / var(--tw-bg-opacity, 1));
}
.bg-\[\#b9e868\] {
  --tw-bg-opacity: 1;
  background-color: rgb(185 232 104 / var(--tw-bg-opacity, 1));
}
.bg-\[\#c0c0c0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(192 192 192 / var(--tw-bg-opacity, 1));
}
.bg-\[\#c0ff00\] {
  --tw-bg-opacity: 1;
  background-color: rgb(192 255 0 / var(--tw-bg-opacity, 1));
}
.bg-\[\#c0ff00\]\/5 {
  background-color: rgb(192 255 0 / 0.05);
}
.bg-\[\#e3e3e3\] {
  --tw-bg-opacity: 1;
  background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
}
.bg-\[\#eee\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f5f7fa\] {
  --tw-bg-opacity: 1;
  background-color: rgb(245 247 250 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f5f8fc\] {
  --tw-bg-opacity: 1;
  background-color: rgb(245 248 252 / var(--tw-bg-opacity, 1));
}
.bg-\[rgb\(5\2c 132\2c 32\)\] {
  --tw-bg-opacity: 1;
  background-color: rgb(5 132 32 / var(--tw-bg-opacity, 1));
}
.bg-\[rgb\(61\2c 61\2c 61\)\] {
  --tw-bg-opacity: 1;
  background-color: rgb(61 61 61 / var(--tw-bg-opacity, 1));
}
.bg-\[var\(--chart-achieved\)\] {
  background-color: var(--chart-achieved);
}
.bg-\[var\(--chart-target\)\] {
  background-color: var(--chart-target);
}
.bg-\[var\(--danger\)\] {
  background-color: var(--danger);
}
.bg-\[var\(--muted-foreground\)\] {
  background-color: var(--muted-foreground);
}
.bg-\[var\(--primary-dark\)\] {
  background-color: var(--primary-dark);
}
.bg-\[var\(--primary-detail\)\] {
  background-color: var(--primary-detail);
}
.bg-\[var\(--primary-light\)\] {
  background-color: var(--primary-light);
}
.bg-\[var\(--secondary-detail\)\] {
  background-color: var(--secondary-detail);
}
.bg-\[var\(--secondary-light\)\] {
  background-color: var(--secondary-light);
}
.bg-\[var\(--success\)\] {
  background-color: var(--success);
}
.bg-\[var\(--white\)\] {
  background-color: var(--white);
}
.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
}
.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-50\/30 {
  background-color: rgb(255 251 235 / 0.3);
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-background {
  background-color: var(--background);
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/10 {
  background-color: rgb(0 0 0 / 0.1);
}
.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/5 {
  background-color: rgb(0 0 0 / 0.05);
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}
.bg-black\/\[0\.03\] {
  background-color: rgb(0 0 0 / 0.03);
}
.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}
.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-blue-500\/10 {
  background-color: rgb(59 130 246 / 0.1);
}
.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-blue-900\/20 {
  background-color: rgb(30 58 138 / 0.2);
}
.bg-blue-900\/30 {
  background-color: rgb(30 58 138 / 0.3);
}
.bg-blue-900\/40 {
  background-color: rgb(30 58 138 / 0.4);
}
.bg-border {
  background-color: var(--border);
}
.bg-card {
  background-color: var(--card);
}
.bg-chart-success {
  background-color: var(--chart-success);
}
.bg-destructive {
  background-color: var(--destructive);
}
.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-emerald-100\/20 {
  background-color: rgb(209 250 229 / 0.2);
}
.bg-emerald-100\/50 {
  background-color: rgb(209 250 229 / 0.5);
}
.bg-emerald-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));
}
.bg-emerald-200\/20 {
  background-color: rgb(167 243 208 / 0.2);
}
.bg-emerald-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50\/30 {
  background-color: rgb(236 253 245 / 0.3);
}
.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-emerald-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.bg-gray-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(134 239 172 / var(--tw-bg-opacity, 1));
}
.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-green-50\/50 {
  background-color: rgb(240 253 244 / 0.5);
}
.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-indigo-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.bg-indigo-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(199 210 254 / var(--tw-bg-opacity, 1));
}
.bg-indigo-200\/20 {
  background-color: rgb(199 210 254 / 0.2);
}
.bg-indigo-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-indigo-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.bg-lime-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(163 230 53 / var(--tw-bg-opacity, 1));
}
.bg-muted {
  background-color: var(--muted);
}
.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}
.bg-popover {
  background-color: var(--popover);
}
.bg-primary {
  background-color: var(--primary);
}
.bg-primary-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-primary-detail {
  --tw-bg-opacity: 1;
  background-color: rgb(192 255 0 / var(--tw-bg-opacity, 1));
}
.bg-primary-detail\/50 {
  background-color: rgb(192 255 0 / 0.5);
}
.bg-primary-foreground {
  background-color: var(--primary-foreground);
}
.bg-primary-light {
  --tw-bg-opacity: 1;
  background-color: rgb(192 192 192 / var(--tw-bg-opacity, 1));
}
.bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-50\/50 {
  background-color: rgb(254 242 242 / 0.5);
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-rose-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}
.bg-rose-100\/20 {
  background-color: rgb(255 228 230 / 0.2);
}
.bg-rose-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 113 133 / var(--tw-bg-opacity, 1));
}
.bg-rose-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
.bg-rose-50\/30 {
  background-color: rgb(255 241 242 / 0.3);
}
.bg-secondary {
  background-color: var(--secondary);
}
.bg-secondary-light {
  --tw-bg-opacity: 1;
  background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));
}
.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.bg-slate-100\/30 {
  background-color: rgb(241 245 249 / 0.3);
}
.bg-slate-100\/60 {
  background-color: rgb(241 245 249 / 0.6);
}
.bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.bg-slate-200\/50 {
  background-color: rgb(226 232 240 / 0.5);
}
.bg-slate-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}
.bg-slate-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}
.bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.bg-slate-50\/30 {
  background-color: rgb(248 250 252 / 0.3);
}
.bg-slate-50\/40 {
  background-color: rgb(248 250 252 / 0.4);
}
.bg-slate-50\/60 {
  background-color: rgb(248 250 252 / 0.6);
}
.bg-slate-50\/95 {
  background-color: rgb(248 250 252 / 0.95);
}
.bg-slate-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}
.bg-slate-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.bg-slate-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.bg-slate-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.bg-slate-900\/60 {
  background-color: rgb(15 23 42 / 0.6);
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/40 {
  background-color: rgb(255 255 255 / 0.4);
}
.bg-white\/60 {
  background-color: rgb(255 255 255 / 0.6);
}
.bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8);
}
.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.bg-zinc-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
}
.bg-zinc-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.bg-zinc-50\/30 {
  background-color: rgb(250 250 250 / 0.3);
}
.bg-zinc-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1));
}
.bg-opacity-30 {
  --tw-bg-opacity: 0.3;
}
.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}
.bg-opacity-80 {
  --tw-bg-opacity: 0.8;
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-\[\#2b6cf6\]\/10 {
  --tw-gradient-from: rgb(43 108 246 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(43 108 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/80 {
  --tw-gradient-from: rgb(0 0 0 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-500 {
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-50 {
  --tw-gradient-from: #ecfdf5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(236 253 245 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-700 {
  --tw-gradient-from: #374151 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(55 65 81 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-50 {
  --tw-gradient-from: #eef2ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary {
  --tw-gradient-from: var(--primary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-500 {
  --tw-gradient-from: #ef4444 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white {
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-black\/65 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.65) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#2b3047\]\/10 {
  --tw-gradient-to: rgb(43 48 71 / 0.1) var(--tw-gradient-to-position);
}
.to-\[\#eeeeee\] {
  --tw-gradient-to: #eeeeee var(--tw-gradient-to-position);
}
.to-black\/45 {
  --tw-gradient-to: rgb(0 0 0 / 0.45) var(--tw-gradient-to-position);
}
.to-blue-600 {
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}
.to-blue-700 {
  --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
}
.to-emerald-100\/50 {
  --tw-gradient-to: rgb(209 250 229 / 0.5) var(--tw-gradient-to-position);
}
.to-gray-800 {
  --tw-gradient-to: #1f2937 var(--tw-gradient-to-position);
}
.to-indigo-100\/50 {
  --tw-gradient-to: rgb(224 231 255 / 0.5) var(--tw-gradient-to-position);
}
.to-primary {
  --tw-gradient-to: var(--primary) var(--tw-gradient-to-position);
}
.to-red-600 {
  --tw-gradient-to: #dc2626 var(--tw-gradient-to-position);
}
.stroke-gray-200 {
  stroke: #e5e7eb;
}
.object-contain {
  object-fit: contain;
}
.object-cover {
  object-fit: cover;
}
.object-center {
  object-position: center;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-12 {
  padding: 3rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[2px\] {
  padding: 2px;
}
.\!py-3 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}
.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}
.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-\[2px\] {
  padding-top: 2px;
  padding-bottom: 2px;
}
.\!pl-10 {
  padding-left: 2.5rem !important;
}
.\!pr-4 {
  padding-right: 1rem !important;
}
.pb-0 {
  padding-bottom: 0px;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-12 {
  padding-left: 3rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pl-7 {
  padding-left: 1.75rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-12 {
  padding-right: 3rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-6 {
  padding-right: 1.5rem;
}
.pr-7 {
  padding-right: 1.75rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-top {
  vertical-align: top;
}
.align-middle {
  vertical-align: middle;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
  font-family: Hubot Sans, Host Grotesk, Arial, Helvetica, sans-serif;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
.text-\[0\.65rem\] {
  font-size: 0.65rem;
}
.text-\[0\.6rem\] {
  font-size: 0.6rem;
}
.text-\[0\.75rem\] {
  font-size: 0.75rem;
}
.text-\[0\.7rem\] {
  font-size: 0.7rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[16px\] {
  font-size: 16px;
}
.text-\[2\.5rem\] {
  font-size: 2.5rem;
}
.text-\[7px\] {
  font-size: 7px;
}
.text-\[8px\] {
  font-size: 8px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.capitalize {
  text-transform: capitalize;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-10 {
  line-height: 2.5rem;
}
.leading-\[13px\] {
  line-height: 13px;
}
.leading-\[14px\] {
  line-height: 14px;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-tighter {
  letter-spacing: -0.05em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.\!text-\[\#c0ff00\] {
  --tw-text-opacity: 1 !important;
  color: rgb(192 255 0 / var(--tw-text-opacity, 1)) !important;
}
.\!text-\[\#eee\] {
  --tw-text-opacity: 1 !important;
  color: rgb(238 238 238 / var(--tw-text-opacity, 1)) !important;
}
.\!text-\[var\(--danger\)\] {
  color: var(--danger) !important;
}
.text-\[\#000000\] {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-\[\#16425b\] {
  --tw-text-opacity: 1;
  color: rgb(22 66 91 / var(--tw-text-opacity, 1));
}
.text-\[\#1976d2\] {
  --tw-text-opacity: 1;
  color: rgb(25 118 210 / var(--tw-text-opacity, 1));
}
.text-\[\#2b3047\] {
  --tw-text-opacity: 1;
  color: rgb(43 48 71 / var(--tw-text-opacity, 1));
}
.text-\[\#2b3047\]\/60 {
  color: rgb(43 48 71 / 0.6);
}
.text-\[\#2b6cf6\] {
  --tw-text-opacity: 1;
  color: rgb(43 108 246 / var(--tw-text-opacity, 1));
}
.text-\[\#2d9cdb\] {
  --tw-text-opacity: 1;
  color: rgb(45 156 219 / var(--tw-text-opacity, 1));
}
.text-\[\#3a7ca5\] {
  --tw-text-opacity: 1;
  color: rgb(58 124 165 / var(--tw-text-opacity, 1));
}
.text-\[\#43a047\] {
  --tw-text-opacity: 1;
  color: rgb(67 160 71 / var(--tw-text-opacity, 1));
}
.text-\[\#666666\] {
  --tw-text-opacity: 1;
  color: rgb(102 102 102 / var(--tw-text-opacity, 1));
}
.text-\[\#888\] {
  --tw-text-opacity: 1;
  color: rgb(136 136 136 / var(--tw-text-opacity, 1));
}
.text-\[\#999999\] {
  --tw-text-opacity: 1;
  color: rgb(153 153 153 / var(--tw-text-opacity, 1));
}
.text-\[\#999\] {
  --tw-text-opacity: 1;
  color: rgb(153 153 153 / var(--tw-text-opacity, 1));
}
.text-\[\#aaaaaa\] {
  --tw-text-opacity: 1;
  color: rgb(170 170 170 / var(--tw-text-opacity, 1));
}
.text-\[\#c0c0c0\] {
  --tw-text-opacity: 1;
  color: rgb(192 192 192 / var(--tw-text-opacity, 1));
}
.text-\[\#c0ff00\] {
  --tw-text-opacity: 1;
  color: rgb(192 255 0 / var(--tw-text-opacity, 1));
}
.text-\[\#d32f2f\] {
  --tw-text-opacity: 1;
  color: rgb(211 47 47 / var(--tw-text-opacity, 1));
}
.text-\[\#e0e0e0\] {
  --tw-text-opacity: 1;
  color: rgb(224 224 224 / var(--tw-text-opacity, 1));
}
.text-\[\#e53935\] {
  --tw-text-opacity: 1;
  color: rgb(229 57 53 / var(--tw-text-opacity, 1));
}
.text-\[\#eee\] {
  --tw-text-opacity: 1;
  color: rgb(238 238 238 / var(--tw-text-opacity, 1));
}
.text-\[\#f39c12\] {
  --tw-text-opacity: 1;
  color: rgb(243 156 18 / var(--tw-text-opacity, 1));
}
.text-\[\#f4b942\] {
  --tw-text-opacity: 1;
  color: rgb(244 185 66 / var(--tw-text-opacity, 1));
}
.text-\[var\(--chart-danger\)\] {
  color: var(--chart-danger);
}
.text-\[var\(--chart-success\)\] {
  color: var(--chart-success);
}
.text-\[var\(--chart-warning\)\] {
  color: var(--chart-warning);
}
.text-\[var\(--danger\)\] {
  color: var(--danger);
}
.text-\[var\(--foreground\)\] {
  color: var(--foreground);
}
.text-\[var\(--primary-dark\)\] {
  color: var(--primary-dark);
}
.text-\[var\(--primary-detail\)\] {
  color: var(--primary-detail);
}
.text-\[var\(--primary-light\)\] {
  color: var(--primary-light);
}
.text-\[var\(--primary-white\)\] {
  color: var(--primary-white);
}
.text-\[var\(--secondary-detail\)\] {
  color: var(--secondary-detail);
}
.text-\[var\(--white\)\] {
  color: var(--white);
}
.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-black\/30 {
  color: rgb(0 0 0 / 0.3);
}
.text-black\/40 {
  color: rgb(0 0 0 / 0.4);
}
.text-black\/50 {
  color: rgb(0 0 0 / 0.5);
}
.text-black\/60 {
  color: rgb(0 0 0 / 0.6);
}
.text-black\/70 {
  color: rgb(0 0 0 / 0.7);
}
.text-black\/80 {
  color: rgb(0 0 0 / 0.8);
}
.text-black\/90 {
  color: rgb(0 0 0 / 0.9);
}
.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-blue-900 {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.text-card-foreground {
  color: var(--card-foreground);
}
.text-chart-success {
  color: var(--chart-success);
}
.text-current {
  color: currentColor;
}
.text-danger {
  --tw-text-opacity: 1;
  color: rgb(244 67 54 / var(--tw-text-opacity, 1));
}
.text-destructive {
  color: var(--destructive);
}
.text-destructive-foreground {
  color: var(--destructive-foreground);
}
.text-emerald-400 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.text-emerald-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-emerald-800 {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.text-emerald-900 {
  --tw-text-opacity: 1;
  color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}
.text-foreground {
  color: var(--foreground);
}
.text-gray-100 {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-400\/80 {
  color: rgb(156 163 175 / 0.8);
}
.text-gray-50 {
  --tw-text-opacity: 1;
  color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-green-900 {
  --tw-text-opacity: 1;
  color: rgb(20 83 45 / var(--tw-text-opacity, 1));
}
.text-indigo-400 {
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.text-indigo-600 {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-indigo-700 {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.text-indigo-800 {
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}
.text-indigo-900 {
  --tw-text-opacity: 1;
  color: rgb(49 46 129 / var(--tw-text-opacity, 1));
}
.text-muted-foreground {
  color: var(--muted-foreground);
}
.text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-primary {
  color: var(--primary);
}
.text-primary-dark {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-primary-detail {
  --tw-text-opacity: 1;
  color: rgb(192 255 0 / var(--tw-text-opacity, 1));
}
.text-primary-foreground {
  color: var(--primary-foreground);
}
.text-purple-400 {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.text-purple-700 {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-red-900 {
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}
.text-rose-400 {
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.text-rose-500 {
  --tw-text-opacity: 1;
  color: rgb(244 63 94 / var(--tw-text-opacity, 1));
}
.text-rose-600 {
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.text-rose-700 {
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}
.text-secondary-foreground {
  color: var(--secondary-foreground);
}
.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.text-slate-800 {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.text-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}
.text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.text-yellow-700 {
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}
.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.text-yellow-900 {
  --tw-text-opacity: 1;
  color: rgb(113 63 18 / var(--tw-text-opacity, 1));
}
.text-zinc-500 {
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}
.text-zinc-600 {
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}
.text-zinc-700 {
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / var(--tw-text-opacity, 1));
}
.text-zinc-900 {
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.placeholder-\[\#888\]::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(136 136 136 / var(--tw-placeholder-opacity, 1));
}
.placeholder-\[\#999\]::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(153 153 153 / var(--tw-placeholder-opacity, 1));
}
.placeholder-gray-400::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}
.placeholder-gray-500::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-80 {
  opacity: 0.8;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[-2px_0_5px_-2px_rgba\(0\2c 0\2c 0\2c 0\.05\)\] {
  --tw-shadow: -2px 0 5px -2px rgba(0,0,0,0.05);
  --tw-shadow-colored: -2px 0 5px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[-3px_0_8px_-3px_rgba\(0\2c 0\2c 0\2c 0\.1\)\] {
  --tw-shadow: -3px 0 8px -3px rgba(0,0,0,0.1);
  --tw-shadow-colored: -3px 0 8px -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);
}
.shadow-\[0_-4px_10px_rgba\(0\2c 0\2c 0\2c 0\.03\)\] {
  --tw-shadow: 0 -4px 10px rgba(0,0,0,0.03);
  --tw-shadow-colored: 0 -4px 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);
}
.shadow-\[0_0_50px_rgba\(0\2c 0\2c 0\2c 0\.8\)\] {
  --tw-shadow: 0 0 50px rgba(0,0,0,0.8);
  --tw-shadow-colored: 0 0 50px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_1px_0_\#eee\] {
  --tw-shadow: 0 1px 0 #eee;
  --tw-shadow-colored: 0 1px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_1px_2px_rgba\(0\2c 0\2c 0\2c 0\.03\)\] {
  --tw-shadow: 0 1px 2px rgba(0,0,0,0.03);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[2px_0_5px_-2px_rgba\(0\2c 0\2c 0\2c 0\.05\)\] {
  --tw-shadow: 2px 0 5px -2px rgba(0,0,0,0.05);
  --tw-shadow-colored: 2px 0 5px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[3px_0_8px_-3px_rgba\(0\2c 0\2c 0\2c 0\.1\)\] {
  --tw-shadow: 3px 0 8px -3px rgba(0,0,0,0.1);
  --tw-shadow-colored: 3px 0 8px -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);
}
.shadow-\[3px_3px_3px_1px_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
  --tw-shadow: 3px 3px 3px 1px rgba(0,0,0,0.2);
  --tw-shadow-colored: 3px 3px 3px 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-blue-100 {
  --tw-shadow-color: #dbeafe;
  --tw-shadow: var(--tw-shadow-colored);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-inset {
  --tw-ring-inset: inset;
}
.ring-\[\#3d3d3d\] {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(61 61 61 / var(--tw-ring-opacity, 1));
}
.ring-\[\#c0c0c0\]\/40 {
  --tw-ring-color: rgb(192 192 192 / 0.4);
}
.ring-\[var\(--danger\)\] {
  --tw-ring-color: var(--danger);
}
.ring-\[var\(--primary-detail\)\] {
  --tw-ring-color: var(--primary-detail);
}
.ring-\[var\(--primary-light\)\] {
  --tw-ring-color: var(--primary-light);
}
.ring-amber-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(253 230 138 / var(--tw-ring-opacity, 1));
}
.ring-black\/10 {
  --tw-ring-color: rgb(0 0 0 / 0.1);
}
.ring-black\/5 {
  --tw-ring-color: rgb(0 0 0 / 0.05);
}
.ring-blue-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity, 1));
}
.ring-blue-400 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1));
}
.ring-blue-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.ring-emerald-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(167 243 208 / var(--tw-ring-opacity, 1));
}
.ring-gray-900\/10 {
  --tw-ring-color: rgb(17 24 39 / 0.1);
}
.ring-green-600\/20 {
  --tw-ring-color: rgb(22 163 74 / 0.2);
}
.ring-indigo-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity, 1));
}
.ring-indigo-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(165 180 252 / var(--tw-ring-opacity, 1));
}
.ring-red-600\/20 {
  --tw-ring-color: rgb(220 38 38 / 0.2);
}
.ring-opacity-30 {
  --tw-ring-opacity: 0.3;
}
.ring-offset-0 {
  --tw-ring-offset-width: 0px;
}
.ring-offset-1 {
  --tw-ring-offset-width: 1px;
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  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);
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.\!filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-1000 {
  transition-duration: 1000ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.preserve-3d {
  transform-style: preserve-3d;
}
.backface-hidden {
  backface-visibility: hidden;
}
.rotate-y-0 {
  transform: rotateY(0deg);
}
.rotate-y-180 {
  transform: rotateY(180deg);
}
.rotate-y-\[-180deg\] {
  transform: rotateY(-180deg);
}

/* Scrollbar personalizado */
.scrollbar-thin::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: #f7fafc;
  border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

/* Scrollbar personalizado */
.scrollbar-thin::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: #f7fafc;
  border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

/* ─── Design Tokens ──────────────────────────────────────────── */
/*
 * Dark theme uses brand palette: #c0ff00 (lime) on #000000 (black).
 * Light theme keeps original blue-slate design.
 */
:root {
  /* Light theme */
  --background: #f5f7fa;
  --foreground: #111827;
  --card: #ffffff;
  --card-foreground: #111827;
  --popover: #ffffff;
  --popover-foreground: #111827;
  --primary: #2563eb;
  --primary-foreground: #ffffff;
  --secondary: #f1f5f9;
  --secondary-foreground: #475569;
  --muted: #f1f5f9;
  --muted-foreground: #94a3b8;
  --accent: #eff6ff;
  --accent-foreground: #1d4ed8;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #e2e8f0;
  --input: #f1f5f9;
  --ring: #2563eb;
  --radius: 0.5rem;
  /* Chart colors */
  --chart-achieved: #2563eb;
  --chart-target: #bfdbfe;
  --chart-success: #15803d;
  --chart-warning: #d97706;
  --chart-danger: #dc2626;
  --chart-purple: #7c3aed;
  /* KPI colors */
  --kpi-blue: #2563eb;
  --kpi-green: #15803d;
  --kpi-amber: #d97706;
  --kpi-red: #dc2626;
  /* Sidebar */
  --sidebar: #1e3a5f;
  --sidebar-foreground: #e0eeff;
  --sidebar-primary: #60a5fa;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #1e4a7a;
  --sidebar-accent-foreground: #e0eeff;
  --sidebar-border: #1a3356;
  --sidebar-ring: #60a5fa;
    
    /* Variables for tailwind components */
    --primary-dark: #000;
    --primary-light: #c0c0c0;
    --secondary-light: #eee;
    --primary-detail: #c0ff00;
    --white: #fff;
    --danger: #f44336;
}

.dark {
  /*
     * Dark theme — Brand native: #c0ff00 (lime) on black
     *
     * Elevation ladder (replaces drop-shadows on dark surfaces):
     *   Level 0 — page background : #0a0a0a  ← darkest
     *   Level 1 — sidebar/header  : #161616  ← +1 step
     *   Level 2 — cards / panels  : #1e1e1e  ← +2 steps
     *   Level 3 — popovers        : #262626  ← +3 steps
     *
     * Borders at layer seams are kept visible (#303030) so the
     * separation is readable even on uncalibrated monitors.
     */
  --background: #0a0a0a;
  /* level 0 — page canvas              */
  --foreground: #eeeeee;
  --card: #1e1e1e;
  /* level 2 — elevated panels / cards  */
  --card-foreground: #eeeeee;
  --popover: #262626;
  /* level 3 — dropdowns, tooltips      */
  --popover-foreground: #eeeeee;
  --primary: #c0ff00;
  /* brand lime                         */
  --primary-foreground: #000000;
  /* black text on lime                 */
  --secondary: #1e1e1e;
  --secondary-foreground: #aaaaaa;
  --muted: #161616;
  --muted-foreground: #777777;
  --accent: #1e2b00;
  /* dark lime tint                     */
  --accent-foreground: #c0ff00;
  --destructive: #ff4444;
  --destructive-foreground: #000000;
  --border: #303030;
  /* visible seam between elevation layers */
  --input: #1e1e1e;
  --ring: #c0ff00;
  /* Chart colors */
  --chart-achieved: #c0ff00;
  --chart-target: #1c2b00;
  --chart-success: #22c55e;
  --chart-warning: #fbbf24;
  --chart-danger: #f87171;
  --chart-purple: #c084fc;
  /* KPI colors */
  --kpi-blue: #c0ff00;
  --kpi-green: #22c55e;
  --kpi-amber: #fbbf24;
  --kpi-red: #f87171;
  /*
     * Sidebar — level 1: #161616, clearly above the page (#0a0a0a)
     * but below cards (#1e1e1e). Border-right (#303030) draws the seam.
     */
  --sidebar: #161616;
  --sidebar-foreground: #c0c0c0;
  --sidebar-primary: #c0ff00;
  --sidebar-primary-foreground: #000000;
  --sidebar-accent: #1e1e1e;
  --sidebar-accent-foreground: #eeeeee;
  --sidebar-border: #303030;
  /* visible right-border of sidebar    */
  --sidebar-ring: #c0ff00;
}

/* ─── Base layer ─────────────────────────────────────────────── */

.placeholder\:text-\[var\(--primary-light\)\]::placeholder {
  color: var(--primary-light);
}

.placeholder\:text-black\/40::placeholder {
  color: rgb(0 0 0 / 0.4);
}

.placeholder\:text-gray-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.placeholder\:text-gray-500::placeholder {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.placeholder\:text-muted-foreground::placeholder {
  color: var(--muted-foreground);
}

.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}

.after\:start-\[2px\]::after {
  content: var(--tw-content);
  inset-inline-start: 2px;
}

.after\:top-\[2px\]::after {
  content: var(--tw-content);
  top: 2px;
}

.after\:h-5::after {
  content: var(--tw-content);
  height: 1.25rem;
}

.after\:w-5::after {
  content: var(--tw-content);
  width: 1.25rem;
}

.after\:rounded-full::after {
  content: var(--tw-content);
  border-radius: 9999px;
}

.after\:border::after {
  content: var(--tw-content);
  border-width: 1px;
}

.after\:border-primary-dark::after {
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}

.after\:border-white::after {
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.after\:bg-primary-dark::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.after\:bg-white::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.after\:transition-all::after {
  content: var(--tw-content);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content);
}

.last\:border-0:last-child {
  border-width: 0px;
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.last\:border-r-0:last-child {
  border-right-width: 0px;
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  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));
}

.hover\:scale-110:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  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));
}

.hover\:scale-\[1\.01\]:hover {
  --tw-scale-x: 1.01;
  --tw-scale-y: 1.01;
  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));
}

.hover\:scale-\[1\.02\]:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  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));
}

.hover\:border-\[\#4d4d4d\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(77 77 77 / var(--tw-border-opacity, 1));
}

.hover\:border-\[var\(--primary-detail\)\]:hover {
  border-color: var(--primary-detail);
}

.hover\:border-\[var\(--primary-light\)\]:hover {
  border-color: var(--primary-light);
}

.hover\:border-blue-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}

.hover\:border-border:hover {
  border-color: var(--border);
}

.hover\:border-gray-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.hover\:border-gray-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.hover\:border-primary-detail:hover {
  --tw-border-opacity: 1;
  border-color: rgb(192 255 0 / var(--tw-border-opacity, 1));
}

.hover\:border-rose-600:hover {
  --tw-border-opacity: 1;
  border-color: rgb(225 29 72 / var(--tw-border-opacity, 1));
}

.hover\:border-slate-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}

.hover\:border-zinc-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(113 113 122 / var(--tw-border-opacity, 1));
}

.hover\:bg-\[\#01467f\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(1 70 127 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#2a2a2a\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(42 42 42 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#2d2d2d\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(45 45 45 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#3d3d3d\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(61 61 61 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#4a4a4a\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(74 74 74 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#4cae4f\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(76 174 79 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#4d4d4d\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(77 77 77 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#b9e868\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 232 104 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#c0c0c0\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(192 192 192 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#c0c0c0\]\/5:hover {
  background-color: rgb(192 192 192 / 0.05);
}

.hover\:bg-\[\#fff\]\/20:hover {
  background-color: rgb(255 255 255 / 0.2);
}

.hover\:bg-\[rgb\(5\2c 152\2c 32\)\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(5 152 32 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[rgb\(71\2c 71\2c 71\)\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(71 71 71 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[var\(--primary-dark\)\]:hover {
  background-color: var(--primary-dark);
}

.hover\:bg-\[var\(--primary-detail\)\]:hover {
  background-color: var(--primary-detail);
}

.hover\:bg-\[var\(--primary-light\)\]:hover {
  background-color: var(--primary-light);
}

.hover\:bg-\[var\(--secondary-light\)\]:hover {
  background-color: var(--secondary-light);
}

.hover\:bg-amber-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
}

.hover\:bg-black\/5:hover {
  background-color: rgb(0 0 0 / 0.05);
}

.hover\:bg-black\/\[0\.02\]:hover {
  background-color: rgb(0 0 0 / 0.02);
}

.hover\:bg-blue-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-900\/50:hover {
  background-color: rgb(30 58 138 / 0.5);
}

.hover\:bg-emerald-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}

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

.hover\:bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

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

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

.hover\:bg-gray-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-900:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-900\/90:hover {
  background-color: rgb(17 24 39 / 0.9);
}

.hover\:bg-green-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}

.hover\:bg-indigo-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-indigo-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1));
}

.hover\:bg-muted:hover {
  background-color: var(--muted);
}

.hover\:bg-primary-detail-hover:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 232 104 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-detail\/20:hover {
  background-color: rgb(192 255 0 / 0.2);
}

.hover\:bg-primary-light:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(192 192 192 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-light\/30:hover {
  background-color: rgb(192 192 192 / 0.3);
}

.hover\:bg-red-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-500\/10:hover {
  background-color: rgb(239 68 68 / 0.1);
}

.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-900\/40:hover {
  background-color: rgb(127 29 29 / 0.4);
}

.hover\:bg-rose-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
}

.hover\:bg-secondary:hover {
  background-color: var(--secondary);
}

.hover\:bg-slate-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-100\/50:hover {
  background-color: rgb(241 245 249 / 0.5);
}

.hover\:bg-slate-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-300\/50:hover {
  background-color: rgb(203 213 225 / 0.5);
}

.hover\:bg-slate-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

.hover\:bg-transparent:hover {
  background-color: transparent;
}

.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}

.hover\:bg-white\/30:hover {
  background-color: rgb(255 255 255 / 0.3);
}

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

.hover\:bg-zinc-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(82 82 91 / var(--tw-bg-opacity, 1));
}

.hover\:bg-zinc-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
}

.hover\:bg-opacity-50:hover {
  --tw-bg-opacity: 0.5;
}

.hover\:text-\[\#000000\]:hover {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.hover\:text-\[\#125ea2\]:hover {
  --tw-text-opacity: 1;
  color: rgb(18 94 162 / var(--tw-text-opacity, 1));
}

.hover\:text-\[\#c0ff00\]:hover {
  --tw-text-opacity: 1;
  color: rgb(192 255 0 / var(--tw-text-opacity, 1));
}

.hover\:text-\[var\(--primary-dark\)\]:hover {
  color: var(--primary-dark);
}

.hover\:text-\[var\(--white\)\]:hover {
  color: var(--white);
}

.hover\:text-black:hover {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-700:hover {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.hover\:text-foreground:hover {
  color: var(--foreground);
}

.hover\:text-gray-200:hover {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-300:hover {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

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

.hover\:text-gray-800:hover {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-900:hover {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.hover\:text-indigo-800:hover {
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}

.hover\:text-red-300:hover {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.hover\:text-red-400:hover {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

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

.hover\:text-red-700:hover {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.hover\:text-red-800:hover {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-600:hover {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-700:hover {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-900:hover {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:text-zinc-700:hover {
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / var(--tw-text-opacity, 1));
}

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

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

.hover\:opacity-70:hover {
  opacity: 0.7;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.hover\:opacity-90:hover {
  opacity: 0.9;
}

.hover\:shadow:hover {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_2px_6px_rgba\(0\2c 0\2c 0\2c 0\.06\)\]:hover {
  --tw-shadow: 0 2px 6px rgba(0,0,0,0.06);
  --tw-shadow-colored: 0 2px 6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

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

.hover\:shadow-sm:hover {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-xl:hover {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:ring-black\/10:hover {
  --tw-ring-color: rgb(0 0 0 / 0.1);
}

.focus\:border-b:focus {
  border-bottom-width: 1px;
}

.focus\:border-b-2:focus {
  border-bottom-width: 2px;
}

.focus\:\!border-\[var\(--danger\)\]:focus {
  border-color: var(--danger) !important;
}

.focus\:\!border-transparent:focus {
  border-color: transparent !important;
}

.focus\:border-\[\#c0ff00\]:focus {
  --tw-border-opacity: 1;
  border-color: rgb(192 255 0 / var(--tw-border-opacity, 1));
}

.focus\:border-\[var\(--primary-detail\)\]:focus {
  border-color: var(--primary-detail);
}

.focus\:border-\[var\(--primary-light\)\]:focus {
  border-color: var(--primary-light);
}

.focus\:border-\[var\(--secondary-detail\)\]:focus {
  border-color: var(--secondary-detail);
}

.focus\:border-blue-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.focus\:border-blue-600:focus {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}

.focus\:border-gray-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
}

.focus\:border-primary:focus {
  border-color: var(--primary);
}

.focus\:border-secondary-detail:focus {
  --tw-border-opacity: 1;
  border-color: rgb(1 87 155 / var(--tw-border-opacity, 1));
}

.focus\:border-transparent:focus {
  border-color: transparent;
}

.focus\:bg-transparent:focus {
  background-color: transparent;
}

.focus\:shadow-\[0_1px_0_0_\#c0ff00\]:focus {
  --tw-shadow: 0 1px 0 0 #c0ff00;
  --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:shadow-none:focus {
  --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);
}

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

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

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

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

.focus\:\!ring-blue-500:focus {
  --tw-ring-opacity: 1 !important;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)) !important;
}

.focus\:ring-\[var\(--danger\)\]:focus {
  --tw-ring-color: var(--danger);
}

.focus\:ring-\[var\(--primary\)\]:focus {
  --tw-ring-color: var(--primary);
}

.focus\:ring-\[var\(--primary-detail\)\]:focus {
  --tw-ring-color: var(--primary-detail);
}

.focus\:ring-\[var\(--secondary-detail\)\]:focus {
  --tw-ring-color: var(--secondary-detail);
}

.focus\:ring-blue-200:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity, 1));
}

.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.focus\:ring-blue-600:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity, 1));
}

.focus\:ring-gray-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity, 1));
}

.focus\:ring-indigo-500\/20:focus {
  --tw-ring-color: rgb(99 102 241 / 0.2);
}

.focus\:ring-primary:focus {
  --tw-ring-color: var(--primary);
}

.focus\:ring-primary-detail:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(192 255 0 / var(--tw-ring-opacity, 1));
}

.focus\:ring-zinc-500\/20:focus {
  --tw-ring-color: rgb(113 113 122 / 0.2);
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:bg-transparent:focus-visible {
  background-color: transparent;
}

.focus-visible\:text-\[\#000000\]:focus-visible {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

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

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

.focus-visible\:ring-blue-500:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-gray-400:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-primary:focus-visible {
  --tw-ring-color: var(--primary);
}

.focus-visible\:ring-white:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:ring-offset-black:focus-visible {
  --tw-ring-offset-color: #000;
}

.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  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));
}

.active\:scale-\[0\.97\]:active {
  --tw-scale-x: 0.97;
  --tw-scale-y: 0.97;
  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));
}

.active\:scale-\[0\.98\]:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}

.active\:cursor-grabbing:active {
  cursor: grabbing;
}

.active\:border-primary-detail:active {
  --tw-border-opacity: 1;
  border-color: rgb(192 255 0 / var(--tw-border-opacity, 1));
}

.active\:bg-slate-100:active {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.active\:bg-slate-50:active {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.active\:bg-transparent:active {
  background-color: transparent;
}

.active\:shadow-none: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);
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:bg-primary-light:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(192 192 192 / var(--tw-bg-opacity, 1));
}

.disabled\:opacity-30:disabled {
  opacity: 0.3;
}

.disabled\:opacity-40:disabled {
  opacity: 0.4;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.disabled\:opacity-70:disabled {
  opacity: 0.7;
}

.disabled\:hover\:bg-\[\#2d2d2d\]:hover:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(45 45 45 / var(--tw-bg-opacity, 1));
}

.disabled\:hover\:bg-emerald-600:hover:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}

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

.disabled\:hover\:bg-primary:hover:disabled {
  background-color: var(--primary);
}

.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  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));
}

.group:hover .group-hover\:scale-125 {
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
  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));
}

.group:hover .group-hover\:bg-blue-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-primary-detail {
  --tw-bg-opacity: 1;
  background-color: rgb(192 255 0 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-slate-100\/50 {
  background-color: rgb(241 245 249 / 0.5);
}

.group:hover .group-hover\:bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

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

.group:hover .group-hover\:opacity-40 {
  opacity: 0.4;
}

.peer:checked ~ .peer-checked\:bg-primary-detail {
  --tw-bg-opacity: 1;
  background-color: rgb(192 255 0 / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:after\:translate-x-full::after {
  content: var(--tw-content);
  --tw-translate-x: 100%;
  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));
}

.peer:checked ~ .peer-checked\:after\:border-white::after {
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

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

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

.peer:focus ~ .peer-focus\:ring-primary-detail {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(192 255 0 / var(--tw-ring-opacity, 1));
}

.dark\:border-\[\#3d3d3d\]:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(61 61 61 / var(--tw-border-opacity, 1));
}

.dark\:border-amber-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(180 83 9 / var(--tw-border-opacity, 1));
}

.dark\:border-emerald-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(4 120 87 / var(--tw-border-opacity, 1));
}

.dark\:border-emerald-900\/60:is(.dark *) {
  border-color: rgb(6 78 59 / 0.6);
}

.dark\:border-gray-100:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}

.dark\:border-gray-500:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
}

.dark\:border-gray-600:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}

.dark\:border-gray-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.dark\:border-gray-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
}

.dark\:border-red-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
}

.dark\:border-white:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.dark\:bg-amber-600:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}

.dark\:bg-amber-950\/30:is(.dark *) {
  background-color: rgb(69 26 3 / 0.3);
}

.dark\:bg-black:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.dark\:bg-black\/70:is(.dark *) {
  background-color: rgb(0 0 0 / 0.7);
}

.dark\:bg-blue-900\/20:is(.dark *) {
  background-color: rgb(30 58 138 / 0.2);
}

.dark\:bg-blue-900\/40:is(.dark *) {
  background-color: rgb(30 58 138 / 0.4);
}

.dark\:bg-emerald-200:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));
}

.dark\:bg-emerald-400:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}

.dark\:bg-emerald-500:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}

.dark\:bg-emerald-950\/30:is(.dark *) {
  background-color: rgb(2 44 34 / 0.3);
}

.dark\:bg-emerald-950\/40:is(.dark *) {
  background-color: rgb(2 44 34 / 0.4);
}

.dark\:bg-emerald-950\/60:is(.dark *) {
  background-color: rgb(2 44 34 / 0.6);
}

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

.dark\:bg-gray-300:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

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

.dark\:bg-gray-700:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.dark\:bg-gray-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.dark\:bg-gray-800\/30:is(.dark *) {
  background-color: rgb(31 41 55 / 0.3);
}

.dark\:bg-gray-800\/40:is(.dark *) {
  background-color: rgb(31 41 55 / 0.4);
}

.dark\:bg-gray-800\/60:is(.dark *) {
  background-color: rgb(31 41 55 / 0.6);
}

.dark\:bg-gray-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}

.dark\:bg-gray-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(3 7 18 / var(--tw-bg-opacity, 1));
}

.dark\:bg-green-900\/20:is(.dark *) {
  background-color: rgb(20 83 45 / 0.2);
}

.dark\:bg-red-200:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}

.dark\:bg-red-800\/40:is(.dark *) {
  background-color: rgb(153 27 27 / 0.4);
}

.dark\:bg-red-900\/20:is(.dark *) {
  background-color: rgb(127 29 29 / 0.2);
}

.dark\:bg-red-900\/30:is(.dark *) {
  background-color: rgb(127 29 29 / 0.3);
}

.dark\:bg-red-950\/60:is(.dark *) {
  background-color: rgb(69 10 10 / 0.6);
}

.dark\:bg-slate-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}

.dark\:bg-slate-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}

.dark\:bg-yellow-900\/20:is(.dark *) {
  background-color: rgb(113 63 18 / 0.2);
}

.dark\:stroke-gray-700:is(.dark *) {
  stroke: #374151;
}

.dark\:text-\[var\(--primary-dark\)\]:is(.dark *) {
  color: var(--primary-dark);
}

.dark\:text-amber-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-500:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-500:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-800:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}

.dark\:text-foreground:is(.dark *) {
  color: var(--foreground);
}

.dark\:text-gray-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-50:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-800:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-900:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.dark\:text-green-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.dark\:text-red-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.dark\:text-red-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.dark\:text-red-700:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.dark\:text-white:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.dark\:ring-white\/20:is(.dark *) {
  --tw-ring-color: rgb(255 255 255 / 0.2);
}

.dark\:hover\:border-gray-500:hover:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
}

.dark\:hover\:bg-\[\#4a4a4a\]:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(74 74 74 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-amber-900\/30:hover:is(.dark *) {
  background-color: rgb(120 53 15 / 0.3);
}

.dark\:hover\:bg-emerald-600:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-gray-50\/90:hover:is(.dark *) {
  background-color: rgb(249 250 251 / 0.9);
}

.dark\:hover\:bg-gray-600:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-gray-700:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-gray-800:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-gray-800\/40:hover:is(.dark *) {
  background-color: rgb(31 41 55 / 0.4);
}

.dark\:hover\:bg-red-800\/60:hover:is(.dark *) {
  background-color: rgb(153 27 27 / 0.6);
}

.dark\:hover\:bg-red-900\/20:hover:is(.dark *) {
  background-color: rgb(127 29 29 / 0.2);
}

.dark\:hover\:bg-slate-900:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}

.dark\:focus\:ring-gray-500:focus:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity, 1));
}

.dark\:disabled\:hover\:bg-emerald-500:hover:disabled:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}

@media (min-width: 640px) {

  .sm\:sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:m-\[10px\] {
    margin: 10px;
  }

  .sm\:-mx-2 {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }

  .sm\:-mx-4 {
    margin-left: -1rem;
    margin-right: -1rem;
  }

  .sm\:mx-2\.5 {
    margin-left: 0.625rem;
    margin-right: 0.625rem;
  }

  .sm\:my-2\.5 {
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
  }

  .sm\:-mt-2 {
    margin-top: -0.5rem;
  }

  .sm\:-mt-4 {
    margin-top: -1rem;
  }

  .sm\:mb-0 {
    margin-bottom: 0px;
  }

  .sm\:mb-2 {
    margin-bottom: 0.5rem;
  }

  .sm\:mb-3 {
    margin-bottom: 0.75rem;
  }

  .sm\:mb-4 {
    margin-bottom: 1rem;
  }

  .sm\:mb-5 {
    margin-bottom: 1.25rem;
  }

  .sm\:ml-2 {
    margin-left: 0.5rem;
  }

  .sm\:mr-2\.5 {
    margin-right: 0.625rem;
  }

  .sm\:mr-5 {
    margin-right: 1.25rem;
  }

  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:mt-2 {
    margin-top: 0.5rem;
  }

  .sm\:mt-3 {
    margin-top: 0.75rem;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:table-cell {
    display: table-cell;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:h-12 {
    height: 3rem;
  }

  .sm\:h-14 {
    height: 3.5rem;
  }

  .sm\:h-16 {
    height: 4rem;
  }

  .sm\:h-3\.5 {
    height: 0.875rem;
  }

  .sm\:h-32 {
    height: 8rem;
  }

  .sm\:h-4 {
    height: 1rem;
  }

  .sm\:h-40 {
    height: 10rem;
  }

  .sm\:h-48 {
    height: 12rem;
  }

  .sm\:h-5 {
    height: 1.25rem;
  }

  .sm\:h-56 {
    height: 14rem;
  }

  .sm\:h-64 {
    height: 16rem;
  }

  .sm\:h-72 {
    height: 18rem;
  }

  .sm\:h-9 {
    height: 2.25rem;
  }

  .sm\:h-96 {
    height: 24rem;
  }

  .sm\:h-\[170px\] {
    height: 170px;
  }

  .sm\:h-\[25px\] {
    height: 25px;
  }

  .sm\:h-\[280px\] {
    height: 280px;
  }

  .sm\:h-\[500px\] {
    height: 500px;
  }

  .sm\:h-\[60px\] {
    height: 60px;
  }

  .sm\:h-auto {
    height: auto;
  }

  .sm\:max-h-\[90\%\] {
    max-height: 90%;
  }

  .sm\:max-h-\[90vh\] {
    max-height: 90vh;
  }

  .sm\:min-h-\[450px\] {
    min-height: 450px;
  }

  .sm\:min-h-\[calc\(100vh-110px\)\] {
    min-height: calc(100vh - 110px);
  }

  .sm\:w-1\/2 {
    width: 50%;
  }

  .sm\:w-12 {
    width: 3rem;
  }

  .sm\:w-14 {
    width: 3.5rem;
  }

  .sm\:w-16 {
    width: 4rem;
  }

  .sm\:w-24 {
    width: 6rem;
  }

  .sm\:w-3\.5 {
    width: 0.875rem;
  }

  .sm\:w-32 {
    width: 8rem;
  }

  .sm\:w-4 {
    width: 1rem;
  }

  .sm\:w-40 {
    width: 10rem;
  }

  .sm\:w-48 {
    width: 12rem;
  }

  .sm\:w-5 {
    width: 1.25rem;
  }

  .sm\:w-9 {
    width: 2.25rem;
  }

  .sm\:w-\[150px\] {
    width: 150px;
  }

  .sm\:w-\[170px\] {
    width: 170px;
  }

  .sm\:w-\[85\%\] {
    width: 85%;
  }

  .sm\:w-\[95vw\] {
    width: 95vw;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:w-full {
    width: 100%;
  }

  .sm\:min-w-\[350px\] {
    min-width: 350px;
  }

  .sm\:max-w-\[110px\] {
    max-width: 110px;
  }

  .sm\:max-w-\[280px\] {
    max-width: 280px;
  }

  .sm\:max-w-\[420px\] {
    max-width: 420px;
  }

  .sm\:max-w-\[600px\] {
    max-width: 600px;
  }

  .sm\:flex-1 {
    flex: 1 1 0%;
  }

  .sm\:flex-none {
    flex: none;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[120px_120px_120px_100px_30px\] {
    grid-template-columns: 120px 120px 120px 100px 30px;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-col {
    flex-direction: column;
  }

  .sm\:flex-wrap {
    flex-wrap: wrap;
  }

  .sm\:items-start {
    align-items: flex-start;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:justify-center {
    justify-content: center;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-0 {
    gap: 0px;
  }

  .sm\:gap-1 {
    gap: 0.25rem;
  }

  .sm\:gap-2 {
    gap: 0.5rem;
  }

  .sm\:gap-2\.5 {
    gap: 0.625rem;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-5 {
    gap: 1.25rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:gap-x-2 {
    column-gap: 0.5rem;
  }

  .sm\:gap-y-1 {
    row-gap: 0.25rem;
  }

  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
  }

  .sm\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
  }

  .sm\:rounded-2xl {
    border-radius: 1rem;
  }

  .sm\:rounded-\[25px\] {
    border-radius: 25px;
  }

  .sm\:rounded-xl {
    border-radius: calc(var(--radius) + 8px);
  }

  .sm\:border {
    border-width: 1px;
  }

  .sm\:border-0 {
    border-width: 0px;
  }

  .sm\:p-1 {
    padding: 0.25rem;
  }

  .sm\:p-2 {
    padding: 0.5rem;
  }

  .sm\:p-2\.5 {
    padding: 0.625rem;
  }

  .sm\:p-3 {
    padding: 0.75rem;
  }

  .sm\:p-4 {
    padding: 1rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:p-\[5px\] {
    padding: 5px;
  }

  .sm\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .sm\:px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }

  .sm\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .sm\:py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }

  .sm\:py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .sm\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .sm\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .sm\:py-\[5px\] {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .sm\:pb-0 {
    padding-bottom: 0px;
  }

  .sm\:pb-3 {
    padding-bottom: 0.75rem;
  }

  .sm\:pl-0 {
    padding-left: 0px;
  }

  .sm\:pl-4 {
    padding-left: 1rem;
  }

  .sm\:pt-3 {
    padding-top: 0.75rem;
  }

  .sm\:text-left {
    text-align: left;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-\[0\.65rem\] {
    font-size: 0.65rem;
  }

  .sm\:text-\[0\.7rem\] {
    font-size: 0.7rem;
  }

  .sm\:text-\[0\.85rem\] {
    font-size: 0.85rem;
  }

  .sm\:text-\[0\.8rem\] {
    font-size: 0.8rem;
  }

  .sm\:text-\[10px\] {
    font-size: 10px;
  }

  .sm\:text-\[13px\] {
    font-size: 13px;
  }

  .sm\:text-\[14px\] {
    font-size: 14px;
  }

  .sm\:text-\[15px\] {
    font-size: 15px;
  }

  .sm\:text-\[18px\] {
    font-size: 18px;
  }

  .sm\:text-\[8px\] {
    font-size: 8px;
  }

  .sm\:text-\[9px\] {
    font-size: 9px;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .sm\:leading-4 {
    line-height: 1rem;
  }

  .sm\:leading-5 {
    line-height: 1.25rem;
  }
}

@media (min-width: 768px) {

  .md\:bottom-\[16px\] {
    bottom: 16px;
  }

  .md\:order-1 {
    order: 1;
  }

  .md\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .md\:mb-2 {
    margin-bottom: 0.5rem;
  }

  .md\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .md\:mt-0 {
    margin-top: 0px;
  }

  .md\:mt-3 {
    margin-top: 0.75rem;
  }

  .md\:block {
    display: block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-16 {
    height: 4rem;
  }

  .md\:h-2 {
    height: 0.5rem;
  }

  .md\:h-3 {
    height: 0.75rem;
  }

  .md\:h-\[190px\] {
    height: 190px;
  }

  .md\:h-\[30px\] {
    height: 30px;
  }

  .md\:h-full {
    height: 100%;
  }

  .md\:max-h-\[280px\] {
    max-height: 280px;
  }

  .md\:\!w-64 {
    width: 16rem !important;
  }

  .md\:w-10 {
    width: 2.5rem;
  }

  .md\:w-12 {
    width: 3rem;
  }

  .md\:w-16 {
    width: 4rem;
  }

  .md\:w-3 {
    width: 0.75rem;
  }

  .md\:w-60 {
    width: 15rem;
  }

  .md\:w-64 {
    width: 16rem;
  }

  .md\:w-\[190px\] {
    width: 190px;
  }

  .md\:w-\[352px\] {
    width: 352px;
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:min-w-0 {
    min-width: 0px;
  }

  .md\:max-w-\[150px\] {
    max-width: 150px;
  }

  .md\:max-w-\[520px\] {
    max-width: 520px;
  }

  .md\:flex-none {
    flex: none;
  }

  .md\:flex-shrink-0 {
    flex-shrink: 0;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:grid-cols-\[120px_120px_120px_100px\] {
    grid-template-columns: 120px 120px 120px 100px;
  }

  .md\:grid-cols-\[120px_120px_120px_120px_100px\] {
    grid-template-columns: 120px 120px 120px 120px 100px;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:flex-col {
    flex-direction: column;
  }

  .md\:items-end {
    align-items: flex-end;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:justify-end {
    justify-content: flex-end;
  }

  .md\:justify-center {
    justify-content: center;
  }

  .md\:gap-1 {
    gap: 0.25rem;
  }

  .md\:gap-2 {
    gap: 0.5rem;
  }

  .md\:gap-3 {
    gap: 0.75rem;
  }

  .md\:gap-4 {
    gap: 1rem;
  }

  .md\:gap-6 {
    gap: 1.5rem;
  }

  .md\:whitespace-nowrap {
    white-space: nowrap;
  }

  .md\:rounded-xl {
    border-radius: calc(var(--radius) + 8px);
  }

  .md\:border-0 {
    border-width: 0px;
  }

  .md\:bg-card {
    background-color: var(--card);
  }

  .md\:bg-transparent {
    background-color: transparent;
  }

  .md\:bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  .md\:bg-none {
    background-image: none;
  }

  .md\:from-transparent {
    --tw-gradient-from: transparent var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }

  .md\:to-transparent {
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
  }

  .md\:p-1 {
    padding: 0.25rem;
  }

  .md\:p-3 {
    padding: 0.75rem;
  }

  .md\:p-4 {
    padding: 1rem;
  }

  .md\:p-6 {
    padding: 1.5rem;
  }

  .md\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }

  .md\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .md\:py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .md\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .md\:pb-0 {
    padding-bottom: 0px;
  }

  .md\:pl-0 {
    padding-left: 0px;
  }

  .md\:pt-0 {
    padding-top: 0px;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-\[11px\] {
    font-size: 11px;
  }

  .md\:text-\[9px\] {
    font-size: 9px;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .md\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}

@media (min-width: 1024px) {

  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:block {
    display: block;
  }

  .lg\:inline {
    display: inline;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:w-2\/5 {
    width: 40%;
  }

  .lg\:w-3\/5 {
    width: 60%;
  }

  .lg\:w-\[150px\] {
    width: 150px;
  }

  .lg\:w-\[45\%\] {
    width: 45%;
  }

  .lg\:w-\[55\%\] {
    width: 55%;
  }

  .lg\:max-w-7xl {
    max-width: 80rem;
  }

  .lg\:max-w-\[560px\] {
    max-width: 560px;
  }

  .lg\:max-w-\[800px\] {
    max-width: 800px;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1fr_440px\] {
    grid-template-columns: 1fr 440px;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:items-start {
    align-items: flex-start;
  }

  .lg\:gap-5 {
    gap: 1.25rem;
  }

  .lg\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

@media (min-width: 1280px) {

  .xl\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .xl\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .xl\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .xl\:mb-0 {
    margin-bottom: 0px;
  }

  .xl\:h-\[500px\] {
    height: 500px;
  }

  .xl\:h-full {
    height: 100%;
  }

  .xl\:w-auto {
    width: auto;
  }

  .xl\:flex-1 {
    flex: 1 1 0%;
  }

  .xl\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .xl\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .xl\:grid-cols-\[3fr_2fr\] {
    grid-template-columns: 3fr 2fr;
  }

  .xl\:grid-cols-\[4fr_2fr\] {
    grid-template-columns: 4fr 2fr;
  }

  .xl\:flex-row-reverse {
    flex-direction: row-reverse;
  }

  .xl\:items-start {
    align-items: flex-start;
  }

  .xl\:items-stretch {
    align-items: stretch;
  }

  .xl\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

.peer:checked ~ .rtl\:peer-checked\:after\:-translate-x-full:where([dir="rtl"], [dir="rtl"] *)::after {
  content: var(--tw-content);
  --tw-translate-x: -100%;
  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));
}

@media print {

  .print\:flex {
    display: flex;
  }
}

.\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-full::-webkit-scrollbar-thumb {
  border-radius: 9999px;
}

.\[\&\:\:-webkit-scrollbar-thumb\]\:bg-black\/20::-webkit-scrollbar-thumb {
  background-color: rgb(0 0 0 / 0.2);
}

.\[\&\:\:-webkit-scrollbar-thumb\]\:bg-gray-700\/50::-webkit-scrollbar-thumb {
  background-color: rgb(55 65 81 / 0.5);
}

.\[\&\:\:-webkit-scrollbar-thumb\]\:hover\:bg-gray-600\/70:hover::-webkit-scrollbar-thumb {
  background-color: rgb(75 85 99 / 0.7);
}

.\[\&\:\:-webkit-scrollbar-track\]\:bg-transparent::-webkit-scrollbar-track {
  background-color: transparent;
}

.\[\&\:\:-webkit-scrollbar\]\:h-1::-webkit-scrollbar {
  height: 0.25rem;
}

.\[\&\:\:-webkit-scrollbar\]\:w-1::-webkit-scrollbar {
  width: 0.25rem;
}

.\[\&\>svg\]\:h-full>svg {
  height: 100%;
}

.\[\&\>svg\]\:w-full>svg {
  width: 100%;
}

.\[\&_i\:hover\]\:opacity-50 i:hover {
  opacity: 0.5;
}

.\[\&_i\]\:cursor-pointer i {
  cursor: pointer;
}* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: "Hubot Sans", "Host Grotesk", Arial, Helvetica, sans-serif;
  background: #eee;
  color: #000;
}
body .modules-page {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 80px);
}
body b,
body strong {
  font-weight: 600 !important;
}
body {
  /* Estilo customizado para scrollbar horizontal - mais fino */
}
body .overflow-x-auto::-webkit-scrollbar {
  height: 6px;
}
body .overflow-x-auto::-webkit-scrollbar-track {
  background: #f1f5f9;
}
body .overflow-x-auto::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
body .overflow-x-auto::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
body .swal2-container {
  z-index: 10100 !important;
}
@media (max-width: 650px) {
  body #gridPortfolioRegion td {
    font-size: 0.7rem !important;
    padding: 6px !important;
    white-space: break-spaces !important;
  }
  body #gridPortfolioRegion .dx-datagrid-search-text {
    font-size: 0.75rem !important;
  }
  body #gridPortfolioRegion .dx-texteditor-input {
    font-size: 0.75rem !important;
  }
}

.dx-popup-wrapper {
  z-index: 1500 !important;
}

.dx-dropdowneditor-overlay,
.dx-selectbox-popup-wrapper {
  z-index: 2100 !important;
}

.row {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}
.row::after {
  content: "";
  display: table;
  clear: both;
}

.col {
  float: left;
  box-sizing: border-box;
  padding: 0 0.75rem;
  min-height: 1px;
}

.col.s1 {
  width: 8.3333333333%;
}

.col.s2 {
  width: 16.6666666667%;
}

.col.s3 {
  width: 25%;
}

.col.s4 {
  width: 33.3333333333%;
}

.col.s5 {
  width: 41.6666666667%;
}

.col.s6 {
  width: 50%;
}

.col.s7 {
  width: 58.3333333333%;
}

.col.s8 {
  width: 66.6666666667%;
}

.col.s9 {
  width: 75%;
}

.col.s10 {
  width: 83.3333333333%;
}

.col.s11 {
  width: 91.6666666667%;
}

.col.s12 {
  width: 100%;
}

@media only screen and (min-width: 601px) {
  .col.m1 {
    width: 8.3333333333%;
  }
  .col.m2 {
    width: 16.6666666667%;
  }
  .col.m3 {
    width: 25%;
  }
  .col.m4 {
    width: 33.3333333333%;
  }
  .col.m5 {
    width: 41.6666666667%;
  }
  .col.m6 {
    width: 50%;
  }
  .col.m7 {
    width: 58.3333333333%;
  }
  .col.m8 {
    width: 66.6666666667%;
  }
  .col.m9 {
    width: 75%;
  }
  .col.m10 {
    width: 83.3333333333%;
  }
  .col.m11 {
    width: 91.6666666667%;
  }
  .col.m12 {
    width: 100%;
  }
}
@media only screen and (min-width: 993px) {
  .col.l1 {
    width: 8.3333333333%;
  }
  .col.l2 {
    width: 16.6666666667%;
  }
  .col.l3 {
    width: 25%;
  }
  .col.l4 {
    width: 33.3333333333%;
  }
  .col.l5 {
    width: 41.6666666667%;
  }
  .col.l6 {
    width: 50%;
  }
  .col.l7 {
    width: 58.3333333333%;
  }
  .col.l8 {
    width: 66.6666666667%;
  }
  .col.l9 {
    width: 75%;
  }
  .col.l10 {
    width: 83.3333333333%;
  }
  .col.l11 {
    width: 91.6666666667%;
  }
  .col.l12 {
    width: 100%;
  }
}
@media only screen and (min-width: 1201px) {
  .col.xl1 {
    width: 8.3333333333%;
  }
  .col.xl2 {
    width: 16.6666666667%;
  }
  .col.xl3 {
    width: 25%;
  }
  .col.xl4 {
    width: 33.3333333333%;
  }
  .col.xl5 {
    width: 41.6666666667%;
  }
  .col.xl6 {
    width: 50%;
  }
  .col.xl7 {
    width: 58.3333333333%;
  }
  .col.xl8 {
    width: 66.6666666667%;
  }
  .col.xl9 {
    width: 75%;
  }
  .col.xl10 {
    width: 83.3333333333%;
  }
  .col.xl11 {
    width: 91.6666666667%;
  }
  .col.xl12 {
    width: 100%;
  }
}
.col.offset-s1 {
  margin-left: 8.3333333333%;
}

.col.offset-s2 {
  margin-left: 16.6666666667%;
}

.col.offset-s3 {
  margin-left: 25%;
}

.col.offset-s4 {
  margin-left: 33.3333333333%;
}

.col.offset-s5 {
  margin-left: 41.6666666667%;
}

.col.offset-s6 {
  margin-left: 50%;
}

.col.offset-s7 {
  margin-left: 58.3333333333%;
}

.col.offset-s8 {
  margin-left: 66.6666666667%;
}

.col.offset-s9 {
  margin-left: 75%;
}

.col.offset-s10 {
  margin-left: 83.3333333333%;
}

.col.offset-s11 {
  margin-left: 91.6666666667%;
}

.col.offset-s12 {
  margin-left: 100%;
}

@media only screen and (min-width: 601px) {
  .col.offset-m1 {
    margin-left: 8.3333333333%;
  }
  .col.offset-m2 {
    margin-left: 16.6666666667%;
  }
  .col.offset-m3 {
    margin-left: 25%;
  }
  .col.offset-m4 {
    margin-left: 33.3333333333%;
  }
  .col.offset-m5 {
    margin-left: 41.6666666667%;
  }
  .col.offset-m6 {
    margin-left: 50%;
  }
  .col.offset-m7 {
    margin-left: 58.3333333333%;
  }
  .col.offset-m8 {
    margin-left: 66.6666666667%;
  }
  .col.offset-m9 {
    margin-left: 75%;
  }
  .col.offset-m10 {
    margin-left: 83.3333333333%;
  }
  .col.offset-m11 {
    margin-left: 91.6666666667%;
  }
  .col.offset-m12 {
    margin-left: 100%;
  }
}
@media only screen and (min-width: 993px) {
  .col.offset-l1 {
    margin-left: 8.3333333333%;
  }
  .col.offset-l2 {
    margin-left: 16.6666666667%;
  }
  .col.offset-l3 {
    margin-left: 25%;
  }
  .col.offset-l4 {
    margin-left: 33.3333333333%;
  }
  .col.offset-l5 {
    margin-left: 41.6666666667%;
  }
  .col.offset-l6 {
    margin-left: 50%;
  }
  .col.offset-l7 {
    margin-left: 58.3333333333%;
  }
  .col.offset-l8 {
    margin-left: 66.6666666667%;
  }
  .col.offset-l9 {
    margin-left: 75%;
  }
  .col.offset-l10 {
    margin-left: 83.3333333333%;
  }
  .col.offset-l11 {
    margin-left: 91.6666666667%;
  }
  .col.offset-l12 {
    margin-left: 100%;
  }
}.group-nav {
  transition: transform 0.15s ease;
}

.group-nav:hover {
  transform: scale(1.02);
}.nav-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.75rem;
  width: 100%;
}
@media (max-width: 600px) {
  .nav-card-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .nav-card-grid > * {
    width: 100%;
    max-width: 360px;
  }
}.page-home {
  padding: 10px;
}

.page-home .row .col {
  padding: 0;
}

.page-home .box-item {
  background: #fff;
  display: flex;
  align-items: center;
  margin: 5px;
  text-align: center;
  height: 75px;
  border-left: 10px solid #c0ff00;
  padding-left: 30px;
  border-radius: 3px;
  font-size: 18px;
  color: #000;
}

.page-home .box-item:hover {
  border: 3px solid #c0ff00;
  border-left: 10px solid #c0ff00;
}

.page-home .box-item .title {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}

.page-home .box-item .title > span {
  color: #000;
}

.page-home .box-item .div-hidden {
  display: none !important;
}
.page-home .box-item .notification-icon {
  border-radius: 100%;
  width: 1.5em;
  height: 1.5em;
  background-color: red;
  color: white;
  margin-bottom: 3.3em;
  margin-right: -5px !important;
}.ErrorMessage {
  color: #eee;
  background-color: #f44336;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3em;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  padding: 0 1rem;
  text-align: center;
}
.ErrorMessage span {
  font-size: 0.9rem;
}
@media (min-width: 768px) {
  .ErrorMessage span {
    font-size: 1rem;
  }
}

.margin-icon {
  margin-right: 0.5em;
  font-size: 18px;
  flex-shrink: 0;
}#modal-loading {
  width: 150px;
  height: 150px;
  margin-top: 25vh;
  border-radius: 75px;
  background-color: transparent;
  box-shadow: none;
  z-index: 9999 !important;
}

.fundo {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAHjSURBVHja7N0rS0NhAIDh92zzAopMFMwWi+APELSuWARB0CBis/kHbApiGd7B6l8waDHZ7KLFbDCZvB7DZnX75sa5vW8b7OM7O8+57ZzBojiOsfRUchUIYoIIYoIIYoIIYoIIYoKYIIKYIIKYIIKYIIKYICaIICaIICaIICaIICaICSKICSKIda9KUhNfEV0DM8BnmxtOBGwD5wHTDALLwBIw3Xz93WJMGXiqEc8WCgSYBCYCx4wFvncfWO9g2eLC7SHAewdjvgIwzpp7Rid9eA7pXlXg4B8YntS72AhwDKx4lZUOjNMsY+QJZBQ4yTpGXkCqwCGw6hfD5BsG6nnBSBok6gLGEbCWp6uSUsbmjvKMkTTIYwdjXmnc/qj3GKNURJA94CFwzBSwA2z0eNkGklopSd46uQUWgVpzq//rtkjcPFwtAHOB89wDF8BbmxtgGXgpIsjvyroPeP84MB84xx2w6zkkPRtQP9AniAkiiAkiiAkiiAligghigghixQYpC5KuYkHS1Q2NB02he1WUlQ9YyRjIJbAFbNJ4WNXqKeMQ8Ez7P9JOvMh/2PGQZYIIYoIIYoIIYoIIYoKYIIKYIIKYIIKYIIKYICaIICaIICaIICaIICaICSKICSKICZLbfgYAKYo1LxeWk20AAAAASUVORK5CYII=);
  width: 100px;
  height: 100px;
  animation: 2ms linear infinite;
}

.container-model {
  width: 100%;
  display: flex;
  justify-content: center;
  position: fixed;
  align-items: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5999 !important;
  background-color: rgba(0, 0, 0, 0.5);
}

.loader {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAArVSURBVHja7J17jBXVHcc/dxcX0V1FJRq3SBdpVIqsIPJoBW/LP761GKvEgg9stCbtHzVpGsVoqtbUpGrSmIgmvlFpacXWF/2jmrW2QHcFgapgXF0tSk2qrFlA5syZ8+sfc9C7d+fMvXfu3bv3Md/kZpeZ4e6587m/15mZ38mICKlqRy3pKUiBpEqBpEBSpUAaQ+NqeXBCgBC0Cno66FMN/gxBTxX8LsGfZFDHCP54QXUYlBLUXoM3aFB7BW/I4A0YvAHB+7cJX+8YvEDwMDkvGfa7yvmp8n76CApBI/gImjMZrOhnztRg2psBZgnBOUKwWNDzQXcYewLCE+Hbk+TnnTDP/h59sg3ekOBtMnivGLz1Bu9NwZOkMASfhexrWCDTgOXAMiGYFlqHBjQVghH1736Dt9rgPSmo/lJhCAGLONBQQMYBlwM3AN8FMtZNVQNGrpsSg7dBUA8Y1BpB6WJgCJqz0A0BpA24CviltYzcmFFtGPluqt+g7hbU4wZfxcEQArJU9vxVO8tqAVYA/cBDNQgDg5omqIcMfr+gVgi6xQVjVAJoFS3kDOBB4HRHNhUH44DgbxLUNoN6W1DvG7xPDWpI8AYN3j6DJ4LXbvAmGrwOg3ec4E01eDMMXrfBmyd4ExIE8M2Cvl7w+6JgVNpCqgHkEOBO4MaoNDsGxhuC/5JBvSr4GwR1oEzLONTgLTB4iwV1nsGbU0IA10Jwn6BXCoGfO/56AzIV+D0wN6bOyIXxkaCfFvzHBX/HKLupUwzqKkFdYVBTigngQtAHXAZ8UI9AfgA8CkwsAsZ2g3+XoP8g+KbKMaNFUJcZ/JsE1R0XwK0GgWuA50YDyGgE9QxwO/BsETC2g77Y4J8m6DVjAANBGYO/RlCzBH2x4G8rEMAnAuvsZ8zUelBvBR4BriwwHbJX0LeB/p3B12OUTblixjjB/5kQ3C7o9gLZ1BPAiiwS1CKQNmANsKQAjOcFfQPoj8cwtS2m6PuGEDwAXFjgc68DlmYRVUsuqxV4pgCMA0Jwg6AvqgMYCMHHwEV2FiFufmQJ8EwPmdZasZCMNd1lMTB2CcESQfeNcdFXLIyoGupZ4ISY87AauDJLeSe0EhZyZwEYW4Rgfh3DAOgDFgCbY87DMuCusbaQH9o6I+OA8boQXCDoL+oYRq6OAF4EFjq/f3B5Flk7FkCmA/8C2mNgnC3o/Q0C46AOA/4aA2UvMC+LvFNNIOMtjG4HjO1CsKiBLCNfRwJ/B2Y69m+zULxqxZA7YmDsEoLzGhgGwBfAecAux/5uG1urYiFzgE021c2HoYQgK+iNDQwjVwuAHluD5SsAFmSRvtG0kBZglQMGQrCyiWAAbARujqnNVvWQaRlNICtsTh4F4wVB39NEMA7qXuD5GG+yYrRc1gTgPaAzAsYeQZ8K+pMmg0EWoYfM8cBbwFERh3wCfCuLfFlpC/mJAwaCXtmMMHKg7AZWOnZ32umXilpIGzAAHB8BYyvoOQY/aFIYANi5rDeA0yIO2w10FTMBWayFLHXAAPStzQojD0wA3OTYfbw9hxVzWT91wNhm8J9vdhg5UF62JUHsOSwXSPfBa+IR18DvErSkMIbpN47tc3vIdFcCyHIHjAFBr01hjNBfbLx1nstygGSASx236jzcxnEmhTHCbRngYdfseA+ZTDlAuoWgKwKGCP5qIIXhvlgVlb5+05GFFQdECM513MTWO57JA+ExKYwIKxmws+FROqccIIsdt3e+8PUxKQyHXnRsX5wIiEG1CnqBY25qfc5xKYxorXfNEMfdENHitg59suPJpX2Cv2W4haQwIrTFXj3MV4e92lqqy9KzHHNTvYdzqv7aQlIYjjiigd6Y2q5Ul+VPd1TgW/NcWwrDrW2O7TOSuKwTHUXfO8OPS2HEyHWjQ1cCIP4UR9E3MNxCUhgxclXsU5IAOdZR9P0nH0gKwynXTRDHJkl7j3YUfZ+5XFYKY4T+59h+dBILOdRR9O2PclkpjEjtd2wfnwCIao8q+iZxyVCpMaRJYZBFhhy7OpK4LBVV9P2Xx9pKiSHNCiOp4ixkyFH0dRQbQ5odRg8ZlyXsTWAh3pCj6GsvJoaklgGEN2ZH6UASlzXkKPqOKBRDUhhfaZJj++cJXJb3uSNgd8bFkBTGME12bP80ict63xGwu9xTJymMIqdI+pMA2ekI2NOjXVYKI0KuafYdSVzWTkfA7h7pslIYJU6zv5vIQhwxZO5OrhmXkx6nMKJT3nE4erwkshCD967B2xPhttoN3uyRFpLCyNNsop+/3JPIQk7gF4Hg9Tjc1jnDLSSFEaGzHdtfi2vFEXvXie3eGZXanp9Tr6QwonW+Y/vfEk2d5AKJSG3nbeV7XSMtJIVh40cXMN+x+9VygLwteB9GpLYZg1o23EJSGDn6EdHNFD4kfNIqGZCTWCUGb60jtb22j+6WFMYI62gBfuzYvbZQL5SCd7/bJsNR2VSXoC5NYYzQhTEV+upC/7kgkBn8aZvB63VkUysFlUlhDJPrKareLLK1bCA2cN/vyKa6BX1BCuMrd3VuTDC/v5j3KAqIbb+92xHA7xB0awoj04q7PdNuwm57lQEym38qg/qtI4CfJvjXNbmbwgbyWY599xTbArDoxgG9nDLB4L8nqM6ImLFH0DOEYHezURizxgFz2fGloG5zBPCjhOBBRqFtah24qgxh/5ejHIfcViyMkoCEwV0/ErYAjwzgFxK2E2823UjYLDNKmwnb5hatktsz/YOJZwj+RrsUUX7MUMBZuJ/VbjTNB15jDNszcSaDfUJwryOAtwF/xH0tuZE02X7WNsf+e0uFkQiIdV23CEFvzEBfImyD16g6krAl02RnDgS3JHnjxE0w7YzmFhz93YHXCa8J7G8wGIcRPj+4yLF/EDg9i3yQ5M0T9+21j/6uAOfyAAsJu3c2kqUcYT/TIqfzgGuTwigLiIWyDrg75pCFhPP/nQ0Ao9N+loUxx9ydRZ4t549UorP1zcBTsYV+mHXNqWMYc4ANRCzXlKOncPdfrCoQIVxxbV2BjOR14Po6hHG9HfuUmGPWAVeV2/e9UkAO5txLC0A51Fa0z9WJC+u0Y11lxx4HY2ml1hCp5Ao7inB9picKHHcxsBP4ObW5Fu84O7YddqxxehK4rFJrh1QaCIAGribsfB1nvu2E7VU322mHWpgDy9ixvGHH1lHg+Dusm6roUp+jsQaVALcCl9icPE4zgT/bemYpY7OceAvh8q9b7FgKdX0bJFzE5dYCX7pk34pyF3Tpif9yxy6bF6GPCK87P0nM7ZYV0imEa34sLxCwc1X7y+b1FPY2hwC/ThAzeoGXbe6/AfDK/Kzjge8A3wfOLeFLctAV30fYm7e2F5bsKd79n0G4/u3sBH/mS8KGYG8CbxN2SNgFfEb4vN6+nGmNDuAYm2p3Ad8mvJI3j7A7d6naAlxnrSOqOK5bIAf99dXAr6j9GeGPbZx4DDAxsxUVD2jVlCG8YDPNFlzv1yCID+zYTrRjNdXOMMZCyrqvk21Q3TAaGUuJ2mDHcpIdmxqLQVTbZcVpmp2CuYKcddZHWf3A08DjxDz3F6d6jyHFFmizCLt3Lia8TNpRofceIpzofIXwmsab5VpmMwDJVyvhw5MzCTuxddnXJJtNTQAOt8fusxnZZ4SdeAbs6y1gO2FDsYreOFaPC9ynqoOgnioFkgJJlQJJgaSqsP4/AC69Rl1uKhQ+AAAAAElFTkSuQmCC);
  width: 100px;
  height: 100px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes fundo {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}/* Login styles are defined directly with Tailwind classes in Login.jsx */.progressbar {
  background-color: #eee;
  margin: 0;
  height: 5px;
}

.progressbar .indeterminate {
  background-color: #c0c0c0;
}

.invisible {
  display: none;
  height: 0px;
}.form-new-contact #modal-new-contact #modal-contact-new {
  width: 75%;
  max-width: 650px;
  height: 90%;
  top: 5% !important;
  max-height: 505px;
}
.form-new-contact #modal-new-contact #modal-contact-new.modal-contact-new-inside-modal {
  width: 100%;
  max-width: 650px;
  top: 0 !important;
  height: 100%;
  max-height: 505px;
}
.form-new-contact #modal-new-contact #modal-contact-new .col {
  padding: 0;
}
.form-new-contact #modal-new-contact #modal-contact-new .form-new-contact {
  padding: 15px 25px 5px 25px;
}
.form-new-contact #modal-new-contact #modal-contact-new .box-button {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly !important;
}
.form-new-contact .btn-add-mean {
  width: 100%;
  height: 30px;
  font-size: 10px !important;
  margin-top: 0;
  background-color: #c0c0c0 !important;
}
.form-new-contact #modal-new-contact #modal-contact-new .btn-add-mean:hover {
  width: 100%;
  background-color: #eee;
}
.form-new-contact #modal-new-contact #modal-contact-new .form-new-contact .div-input-field-text {
  margin-top: 15px;
}
.form-new-contact #modal-new-contact #modal-contact-new .box-button .btn-save {
  flex: 1;
  margin: 0 10px 10px 10px;
}
.form-new-contact #modal-new-contact #modal-contact-new .box-button .btn-save-continue {
  flex: 2;
  margin: 0 10px 10px 0;
}
.form-new-contact .box-mean-of-contact {
  width: 100%;
}
.form-new-contact #modal-new-contact #modal-contact-new .box-mean-of-contact .icon-remove-contact {
  margin-left: 5px;
  font-size: 1.2rem;
  color: #000;
  cursor: pointer;
}
.form-new-contact #modal-new-contact #modal-contact-new .box-mean-of-contact .icon-remove-contact:hover {
  color: #f44336;
}
.form-new-contact .add-mean-of-contact {
  cursor: pointer;
  font-weight: bold;
  color: #000;
  display: flex;
  justify-content: center;
  height: 30px;
  align-items: center;
}
.form-new-contact .add-mean-of-contact:hover {
  text-decoration: underline;
}
.form-new-contact #modal-new-contact #modal-contact-new .meanContactValueField {
  margin-top: 1.46em;
}
.form-new-contact #modal-new-contact #modal-contact-new #modal-new-contact #modal-contact-new .btn-save {
  width: 98%;
  margin-right: 2%;
  background-color: #c0ff00;
}
.form-new-contact #modal-new-contact #modal-contact-new .btn-save:hover {
  background-color: #b9e868;
}
.form-new-contact #modal-new-contact #modal-contact-new .btn-save-continue {
  width: 98%;
  margin-left: 2%;
  background-color: #c0ff00;
}
.form-new-contact #modal-new-contact #modal-contact-new .btn-save-continue:hover {
  background-color: #b9e868;
}
.form-new-contact #modal-new-contact .open-modal {
  background-color: #c0ff00;
}
.form-new-contact #modal-new-contact .open-modal:hover {
  background-color: #b9e868;
}
.form-new-contact #modal-new-contact .display-none {
  display: none;
}
.form-new-contact #modal-new-contact #icon-add {
  font-size: 1.6rem;
  margin-top: 15px;
}
.form-new-contact #modal-new-contact #icon-add-modal {
  font-size: 1.8rem;
  margin-top: 8px;
  cursor: pointer;
}
.form-new-contact #modal-new-contact #icon-add-modal:hover {
  color: #c0ff00;
}

.row-buttons-save-contact {
  display: flex;
  margin-top: 25px;
  gap: 20px;
  justify-content: end;
}

@media (max-width: 650px) {
  #modal-new-contact #modal-contact-new {
    width: 90%;
    max-width: 650px;
    height: 90%;
    max-height: 550px;
  }
  #modal-new-contact #modal-contact-new.modal-contact-new-inside-modal {
    width: 90%;
    max-width: 750px;
    top: 0 !important;
    height: 100%;
    max-height: 540px;
  }
  #modal-new-contact #modal-contact-new {
    font-size: 0.75rem;
  }
  #modal-new-contact #modal-contact-new input {
    font-size: 0.75rem;
  }
  #modal-new-contact #modal-contact-new .form-new-contact {
    padding: 10px 10px 5px 10px;
  }
  #modal-new-contact #modal-contact-new .btn-save {
    width: 100%;
    margin-right: 0;
  }
  #modal-new-contact #modal-contact-new .btn-save-continue {
    width: 100%;
    margin-left: 0;
  }
}.custom-breadcrumb {
  margin-top: 1px;
  padding-left: 10px;
  line-height: 20px;
  height: 20px;
  overflow: hidden;
}

.breadcrumb i {
  margin: 0 !important;
  line-height: 20px !important;
  height: 20px !important;
  font-size: 14px !important;
}

.breadcrumb::before {
  font-size: 0.9rem;
  color: #000;
}

.breadcrumb,
.breadcrumb:last-child {
  font-size: 0.8rem;
  color: #c0c0c0;
}

.breadcrumb:hover,
.breadcrumb:last-child:hover {
  color: #000;
}

@media (max-width: 650px) {
  .custom-breadcrumb {
    display: none;
  }
}#detail-icon {
  margin-left: 5px;
  font-size: 1.2rem;
  cursor: pointer;
  color: #000;
}

#detail-icon:hover {
  color: #c0ff00;
}#card-contact {
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: #eee;
  background: #eee;
  background: linear-gradient(to left, #fff, #eee);
  font-size: 1rem;
  display: flex;
  padding: 5px 0;
  margin-bottom: 5px;
}

#card-contact .image-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
}

#card-contact .image-item img {
  height: 50px;
  width: 50px;
  border-radius: 5px;
}

#card-contact .center-item {
  display: flex;
  flex: 1;
  align-items: center;
}

#card-contact .center-item .row {
  width: 100%;
  margin-bottom: 0;
}

#card-contact .center-item .font-small {
  font-size: 0.85rem;
}

#card-contact .center-item .contact-name {
  font-weight: bold;
}

#card-contact .detail-icon svg {
  font-size: 2rem;
  padding: 0 10px 0 0;
}

@media (max-width: 650px) {
  #card-contact {
    font-size: 0.75rem;
  }
  #card-contact .image-item img {
    height: 23px;
    width: 23px;
    margin: 2px;
  }
  #card-contact .center-item .font-small {
    font-size: 0.7rem;
  }
  #card-contact .detail-icon i {
    font-size: 1.25rem;
  }
}.page-list-contact {
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 10px;
  padding: 10px;
}
.page-list-contact .absolute {
  position: absolute;
  display: flex;
  right: 25px;
  bottom: 10px;
}
.page-list-contact .absolute .btn-floating {
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-list-contact .row-filter {
  margin-bottom: 0;
  width: 100%;
}

.page-list-contact .no-filter-results {
  margin-top: 20px;
  font-style: italic;
  opacity: 0.5;
}

@media (max-width: 650px) {
  .page-list-contact {
    font-size: 0.75rem;
  }
}#textbox-default-dev {
  width: 100% !important;
  margin: 0 0 0 0;
}
#textbox-default-dev .input-field input:focus {
  border-bottom: 1px solid #c0ff00 !important;
  box-shadow: 0 1px 0 0 #c0ff00 !important;
}
#textbox-default-dev input:-webkit-autofill,
#textbox-default-dev input:-webkit-autofill:focus {
  box-shadow: 0 0 0 30px #eee inset !important;
}
#textbox-default-dev .input-field label {
  color: #c0c0c0 !important;
}
#textbox-default-dev .input-field {
  margin: 0;
}
#textbox-default-dev #msg-erro {
  color: #f44336;
  font-size: 0.9rem;
  margin-left: 0;
  margin-top: 0px;
}#textbox-default-dev {
  width: 100% !important;
  margin: 0 0 0 0;
}
#textbox-default-dev .input-field input:focus {
  border-bottom: 1px solid #c0ff00 !important;
  box-shadow: 0 1px 0 0 #c0ff00 !important;
}
#textbox-default-dev input:-webkit-autofill,
#textbox-default-dev input:-webkit-autofill:focus {
  box-shadow: 0 0 0 30px #eee inset !important;
}
#textbox-default-dev .input-field label {
  color: #c0c0c0 !important;
}
#textbox-default-dev .input-field {
  margin: 0;
}
#textbox-default-dev #msg-erro {
  color: #f44336;
  font-size: 0.9rem;
  margin-left: 0;
  margin-top: 0px;
}#selectbox-default-dev {
  width: 100%;
}
#selectbox-default-dev #msg-erro {
  color: #f44336;
  font-size: 0.9rem;
  margin-left: 0;
  margin-top: 0px;
}.btn-select-customer,
.btn-select-customer:hover {
  height: 20px;
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #c0c0c0 !important;
}

#grid-business-customer .btn-customer {
  display: flex;
  justify-content: center;
  align-items: center;
}
#grid-business-customer .header-filter-customer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#grid-business-customer .header-filter-customer svg:hover {
  cursor: pointer;
  scale: 1.1;
  color: #EF4444;
}.image-employee-default {
  height: 40px;
  width: 40px;
  border-radius: 20px;
  border: 1px solid #c0c0c0;
}.group-item {
  position: relative;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  background-color: #fff;
  margin-top: 10px;
}
.group-item .group-item-caption {
  position: absolute;
  top: -10px;
  left: 20px;
  padding: 0 5px;
  background-color: #fff;
  font-weight: bold;
  border-radius: 4px;
  z-index: 1;
}
.group-item .column {
  display: flex;
  flex-direction: column;
}
.group-item .group-item-content {
  display: flex;
  margin-bottom: 0;
  gap: 5px;
}
.group-item .group-item-content:last-child {
  margin-bottom: 0;
}
.group-item #selectbox-default-dev {
  width: 100%;
}
@media (max-width: 650px) {
  .group-item .group-item-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    margin-bottom: 0;
  }
}.container-form-pre-registration-customer {
  gap: 10px;
  flex-direction: column;
  display: flex;
}
.container-form-pre-registration-customer .form-adress-pre-customer:hover {
  text-decoration: underline;
}
.container-form-pre-registration-customer .form-adress-pre-customer {
  margin: 10px 0 10px 0;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
.container-form-pre-registration-customer .row-testing {
  display: flex;
  width: 100%;
  gap: 10px;
}

@media (max-width: 650px) {
  .container-form-pre-registration-customer {
    padding: 10px;
  }
  .row-pre-customer {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    display: grid !important;
    grid-gap: 10px;
    gap: 0px !important;
  }
  .row-testing {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    display: grid !important;
    grid-gap: 10px;
  }
}#textbox-default-dev {
  width: 100% !important;
  margin: 0 0 0 0;
}
#textbox-default-dev .input-field input:focus {
  border-bottom: 1px solid #c0ff00 !important;
  box-shadow: 0 1px 0 0 #c0ff00 !important;
}
#textbox-default-dev input:-webkit-autofill,
#textbox-default-dev input:-webkit-autofill:focus {
  box-shadow: 0 0 0 30px #eee inset !important;
}
#textbox-default-dev .input-field label {
  color: #c0c0c0 !important;
}
#textbox-default-dev .input-field {
  margin: 0;
}
#textbox-default-dev #msg-erro {
  color: #f44336;
  font-size: 0.9rem;
  margin-left: 0;
  margin-top: 0px;
}.container-form-new-business {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
}

.row-buttons-save-new-business {
  display: flex;
  gap: 15px;
  margin-top: 10px;
  justify-content: end;
  align-items: flex-end;
}

.add-new-pre-customer:hover {
  text-decoration: underline;
  cursor: pointer;
}

.application-checkbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.application-checkbox .teste {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.user-notice {
  font-weight: bold;
}.chip .close-icon {
  cursor: pointer;
  float: right;
  font-size: 15px;
  line-height: 15px;
  margin-left: 2px;
}

.chip-tag {
  height: 20px;
  padding: 2px 5px 0 8px;
  font-size: 0.7rem;
  line-height: 15px !important;
  background-color: #eee;
}

@media (max-width: 650px) {
  .chip-tag {
    font-size: 0.6rem;
  }
}.data-grid-cities .btn {
  max-width: 70px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}#options-filter-business .header-filter-business {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#options-filter-business .header-filter-business svg:hover {
  cursor: pointer;
  scale: 1.1;
  color: #EF4444;
}
#options-filter-business .row-negotiated {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}
#options-filter-business .row-negotiated .btn-negotiated {
  width: 100%;
  background-color: #fff !important;
  border: 2px solid #22C45E !important;
  opacity: 0.5;
}
#options-filter-business .row-negotiated .btn-negotiated span,
#options-filter-business .row-negotiated .btn-negotiated svg {
  color: #4caf50;
  font-weight: bold;
}
#options-filter-business .row-negotiated .btn-negotiated:hover {
  background-color: #22C45E !important;
  opacity: 1;
}
#options-filter-business .row-negotiated .btn-negotiated:hover span,
#options-filter-business .row-negotiated .btn-negotiated:hover svg {
  color: #fff;
  font-weight: bold;
}
#options-filter-business .row-negotiated .btn-negotiated-selected {
  width: 100%;
  background-color: #22C45E !important;
}
#options-filter-business .row-negotiated .btn-negotiated-selected span,
#options-filter-business .row-negotiated .btn-negotiated-selected svg {
  color: #fff;
  font-weight: bold;
  background-color: #22C45E !important;
}
#options-filter-business .row-negotiated .btn-losed {
  width: 100%;
  background-color: #fff !important;
  border: 2px solid #EF4444 !important;
  opacity: 0.5;
}
#options-filter-business .row-negotiated .btn-losed span,
#options-filter-business .row-negotiated .btn-losed svg {
  color: #EF4444;
  font-weight: bold;
}
#options-filter-business .row-negotiated .btn-losed:hover {
  background-color: #EF4444 !important;
  opacity: 1;
}
#options-filter-business .row-negotiated .btn-losed:hover span,
#options-filter-business .row-negotiated .btn-losed:hover svg {
  color: #fff;
  font-weight: bold;
}
#options-filter-business .row-negotiated .btn-losed-selected {
  width: 100%;
  background-color: #EF4444 !important;
}
#options-filter-business .row-negotiated .btn-losed-selected span,
#options-filter-business .row-negotiated .btn-losed-selected svg {
  color: #fff;
  font-weight: bold;
  background-color: #EF4444 !important;
}
#options-filter-business .row-buttons-apply {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  margin-right: 1px;
}

.row-tags {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.row-tags .tag-wrapper {
  width: 100%;
}

.checkboxs-date {
  display: grid;
  grid-template-columns: 0.5fr 0.5fr;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}

.date-range-filter-business {
  margin-top: 20px !important;
}

#modal-filter-business {
  position: fixed;
  max-height: 100%;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 450px;
  bottom: 0;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 20px;
}

.overlay-filter-business {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  z-index: 999;
}

@media (max-width: 650px) {
  .row-filters-salesfunnel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    margin: 0px !important;
    gap: 5px !important;
  }
}#card-business {
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: #eee;
  background: #eee;
  background: linear-gradient(to left, #fff, #eee);
  font-size: 1rem;
}

#card-business.row {
  margin-bottom: 5px;
  padding: 10px 0;
}

#card-business.row .col.s12 {
  padding: 0 0.25rem;
}

#card-business .font-small {
  font-size: 0.85rem;
}

#card-business .business-title {
  font-weight: bold;
}

#card-business .business-title .detail-icon svg {
  font-size: 1.4rem;
}

#card-business .business-title .negotiated-icon svg {
  margin: 4px;
  font-size: 1.5rem;
}

#card-business .business-title .negotiated-icon svg.negotiated {
  color: #4caf50;
}

#card-business .business-title .negotiated-icon svg.not-negotiated {
  color: #f44336;
}

@media (max-width: 650px) {
  #card-business {
    font-size: 0.75rem;
  }
  #card-business .font-small {
    font-size: 0.7rem;
  }
  #card-business .business-title .detail-icon i {
    font-size: 1.25rem;
  }
  #card-business .business-title .negotiated-icon i {
    margin: 2px;
    font-size: 1rem;
  }
}.page-list-business {
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 10px;
  padding: 10px;
}

.page-list-business .row-filter {
  margin-bottom: 0;
  width: 100%;
}

.page-list-business .row-filter .detail-text-filter {
  margin: 0 0 2vh 2.5vw;
  font-weight: bold;
  font-size: 0.75rem;
}

.page-list-business .no-filter-results {
  margin-top: 20px;
  font-style: italic;
  opacity: 0.5;
}

.page-list-business .icon-sales-funnel {
  margin: 0.5em 0.5em 0 0;
  text-decoration: none;
  color: #000;
  font-size: 1.8rem;
}

.page-list-business .icon-sales-funnel:hover {
  opacity: 0.5;
}

@media (max-width: 650px) {
  .page-list-business {
    font-size: 0.75rem;
  }
  .page-list-business .row-filter .detail-text-filter {
    margin: 0 0 2vh 5vw;
    font-size: 0.5rem;
  }
}#card-customer {
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: #eee;
  background: #eee;
  background: linear-gradient(to left, #fff, #eee);
  font-size: 1rem;
}

#card-customer.row {
  margin-bottom: 5px;
  padding: 10px 0;
}

#card-customer.row .col.s12 {
  padding: 0 0.25rem;
}

#card-customer .font-small {
  font-size: 0.85rem;
}

#card-customer .customer-name {
  font-weight: bold;
}

#card-customer .customer-name .detail-icon i {
  font-size: 2rem;
}

@media (max-width: 650px) {
  #card-customer {
    font-size: 0.75rem;
  }
  #card-customer .font-small {
    font-size: 0.7rem;
  }
  #card-customer .customer-name .detail-icon i {
    font-size: 1.25rem;
  }
}.container-input-editable span:hover {
  cursor: pointer;
  text-decoration: underline;
}.page-list-customer {
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 10px;
  padding: 10px;
}

.page-list-customer .row-filter {
  margin-bottom: 0;
  width: 100%;
}

.page-list-customer .no-filter-results {
  margin-top: 20px;
  font-style: italic;
  opacity: 0.5;
}

@media (max-width: 650px) {
  .page-list-customer {
    font-size: 0.75rem;
  }
}.filter-popover .dx-popup-content {
  padding: 0 !important;
}
.filter-popover .dx-overlay-content {
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

.component-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}
.component-buttons .filter-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.component-buttons .applied-filters {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.component-buttons .applied-filters .employee-name-tag {
  display: flex;
  justify-content: center;
  align-items: center;
}
.component-buttons #btn-filter-activity {
  background-color: #eee !important;
  width: 30px;
  height: 30px;
}
.component-buttons #btn-filter-activity:hover {
  background-color: #c0c0c0 !important;
}
.component-buttons .pending-tag {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  background-color: #eee !important;
  font-size: 10px;
  font-weight: bold;
  width: 70px;
}
.component-buttons .pending-tag:hover {
  background-color: #c0c0c0 !important;
}
.component-buttons .all-active-tag {
  background-color: rgba(255, 152, 0, 0.4) !important;
}
.component-buttons .done-active-tag {
  background-color: rgba(76, 175, 80, 0.4) !important;
}
.component-buttons .pending-active-tag {
  background-color: rgba(244, 67, 54, 0.4) !important;
}
.component-buttons .toggle-view-btn {
  background-color: #eee !important;
  width: 30px;
  height: 30px;
}
.component-buttons .toggle-view-btn:hover {
  background-color: #c0c0c0 !important;
}

.show-pending-activities {
  display: flex;
  justify-content: center;
  align-items: center;
}
.show-pending-activities .pending-switch {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.show-employee-activities {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.show-employee-activities .employee-switch {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.show-employee-activities .email-switch {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.activities-filter {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.activities-filter .filter-buttons {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.activities-filter .filter-buttons .confirm-filter {
  width: 70%;
}
.activities-filter .filter-buttons .clear-filter {
  width: 20%;
}

@media (max-width: 650px) {
  .component-buttons {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .applied-filters {
    flex-direction: column;
  }
  .container-popover-filter-activities {
    padding: 10px !important;
  }
}#textbox-default-dev {
  width: 100% !important;
  margin: 0 0 0 0;
}
#textbox-default-dev .input-field input:focus {
  border-bottom: 1px solid #c0ff00 !important;
  box-shadow: 0 1px 0 0 #c0ff00 !important;
}
#textbox-default-dev input:-webkit-autofill,
#textbox-default-dev input:-webkit-autofill:focus {
  box-shadow: 0 0 0 30px #eee inset !important;
}
#textbox-default-dev .input-field label {
  color: #c0c0c0 !important;
}
#textbox-default-dev .input-field {
  margin: 0;
}
#textbox-default-dev #msg-erro {
  color: #f44336;
  font-size: 0.9rem;
  margin-left: 0;
  margin-top: 0px;
}.container-logs-activity {
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.container-logs-activity .body-log-activity {
  padding: 5px;
  border: 1px solid #c0c0c0;
  background-color: white;
  border-radius: 10px;
}
.container-logs-activity .body-log-activity .altered-info {
  font-weight: bold;
  color: #01579b;
}
.container-logs-activity .activity-done {
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  color: #4caf50;
}

.created-per {
  text-align: center;
  margin-bottom: 5px;
}.fixed-floating-add-btn {
  display: flex;
  position: fixed;
  bottom: 20px;
  right: 100px;
  z-index: 1000;
}
.fixed-floating-add-btn .floating-btn {
  background-color: #c0ff00;
  border-radius: 50%;
  width: 60px;
  height: 60px;
}
.fixed-floating-add-btn .floating-btn:hover {
  background-color: #b9e868;
}

.logs-activity {
  height: 450px;
}

.activity-popup-wrapper {
  padding: 10px;
}
.activity-popup-wrapper .check-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.activity-popup-wrapper .check-btn .recurring_days {
  width: 100% !important;
  float: left;
  background-color: red;
}
.activity-popup-wrapper .updated-switchs {
  display: flex;
  padding: 5px;
  gap: 20px;
  width: 50%;
}
.activity-popup-wrapper .update-btns {
  display: flex;
  gap: 10px;
  width: 50%;
  justify-content: flex-end;
  align-items: center;
}
.activity-popup-wrapper .public-switch {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.activity-popup-wrapper .public-switch span {
  font-weight: bold;
}
.activity-popup-wrapper .done-switch {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.activity-popup-wrapper .done-switch span {
  font-weight: bold;
}
.activity-popup-wrapper .activity-save-button {
  width: 100px;
}
.activity-popup-wrapper .activity-cancel-button {
  background-color: #c0c0c0 !important;
}
.activity-popup-wrapper .activity-delete-button {
  width: 100px;
  background-color: #f44336 !important;
}
.activity-popup-wrapper .business-area {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
}
.activity-popup-wrapper .business-area #btn-go-business {
  width: 15px;
  height: 100%;
  background-color: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
}
.activity-popup-wrapper .business-area #btn-go-business .only-icon {
  margin-top: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.row-render-employee-select {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 10px;
}

.confirmation-popup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.confirmation-popup h6 {
  text-align: center;
  font-weight: 500;
}
.confirmation-popup .delete-cancel-button {
  background-color: #c0c0c0 !important;
}

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.row-logs-activity {
  gap: 5px;
}
.row-logs-activity .row-info-log-activity {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.row-logs-activity .bold {
  font-weight: bold;
}

.group-item-activity {
  margin-top: 10px;
}

@media (max-width: 650px) {
  .confirmation-popup {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .confirmation-popup .delete-confirm-button {
    width: 75%;
    font-weight: bold;
  }
  .confirmation-popup .delete-cancel-button {
    width: 75%;
    font-weight: bold;
  }
  .update-btns {
    width: 100% !important;
    margin-top: 20px;
    gap: 20px;
    display: flex;
    flex-direction: column;
  }
  .update-btns .activity-cancel-button {
    width: 100%;
    font-weight: bold;
  }
  .update-btns .activity-delete-button {
    width: 100%;
    font-weight: bold;
  }
  .update-btns .activity-save-button {
    width: 100%;
    font-weight: bold;
  }
  .check-btn {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .check-btn .updated-switchs {
    width: 100% !important;
    gap: 20px !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .public-switch {
    width: 100%;
  }
}.btn-save-activity-recurrence {
  float: right !important;
  margin-top: 10px;
  margin-bottom: 10px;
}

#info-activity {
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
}.custom-datagrid .dx-datagrid {
  border: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.custom-datagrid .dx-datagrid-headers {
  background-color: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
}
.custom-datagrid .dx-datagrid-headers .dx-header-row {
  background-color: #f9fafb !important;
}
.custom-datagrid .dx-datagrid-headers .dx-header-row td {
  background-color: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 12px 16px !important;
}
.custom-datagrid .dx-datagrid-rowsview .dx-row {
  border-bottom: 1px solid #f3f4f6 !important;
  transition: background-color 0.15s ease;
}
.custom-datagrid .dx-datagrid-rowsview .dx-row:hover {
  background-color: #f9fafb !important;
}
.custom-datagrid .dx-datagrid-rowsview .dx-row td {
  padding: 12px 16px !important;
  border: none !important;
}
.custom-datagrid .dx-datagrid-rowsview .dx-selection {
  background-color: #eff6ff !important;
}
.custom-datagrid .dx-checkbox-checked .dx-checkbox-icon {
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
}
.custom-datagrid .dx-datagrid-content .dx-datagrid-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#list-activity-container .activities-filters {
  margin-bottom: 5px;
}
#list-activity-container .activities-list {
  display: flex;
  gap: 1rem;
  height: 80vh;
  justify-content: center;
  padding: 1rem;
  overflow: hidden;
  box-sizing: border-box;
}
#list-activity-container .activities-list .activities-columns {
  flex: 1;
  max-width: 200px;
  min-width: 120px;
  height: 100%;
  background-color: #eee;
  border-radius: 8px;
  overflow-y: auto;
}
#list-activity-container .activities-list .activities-columns .activity-type-title {
  width: 100%;
  height: 100%;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .column-title {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  background-color: #c0c0c0;
  padding: 0.5rem;
  border-radius: 8px 8px 0 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 10;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column {
  background-color: #eee;
  width: 100%;
  display: block;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card-base, #list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card,
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .pre-activity-card {
  position: relative;
  padding: 1rem;
  margin: 0.5rem;
  cursor: pointer;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #dfdcdc;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card-base .activity-responsible, #list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card .activity-responsible,
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .pre-activity-card .activity-responsible {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 10px;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card-base .activity-responsible .activity-responsible-name, #list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card .activity-responsible .activity-responsible-name,
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .pre-activity-card .activity-responsible .activity-responsible-name {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card-base p, #list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card p,
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .pre-activity-card p {
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card-base:hover, #list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card:hover,
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .pre-activity-card:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card-base .finish-activity-button, #list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card .finish-activity-button,
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .pre-activity-card .finish-activity-button {
  height: 15px;
  width: 100%;
  font-size: 0.75rem;
  font-weight: bold;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card-base .finish-activity-button .btn-wrapper-content, #list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card .finish-activity-button .btn-wrapper-content,
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .pre-activity-card .finish-activity-button .btn-wrapper-content {
  height: 15px !important;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card-base .activity-information .row-activity-information, #list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card .activity-information .row-activity-information,
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .pre-activity-card .activity-information .row-activity-information {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card-base .expand-information, #list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card .expand-information,
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .pre-activity-card .expand-information {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  border-radius: 25%;
  background-color: #fff;
  transition: transform 0.1s ease-in-out;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card-base .expand-information:hover, #list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card .expand-information:hover,
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .pre-activity-card .expand-information:hover {
  background-color: #eee;
  transform: scale(1.25);
}
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card-base .activity-options, #list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card .activity-options,
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .pre-activity-card .activity-options {
  display: flex;
  gap: 5px;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card-base .activity-options .open-activity-details, #list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card .activity-options .open-activity-details,
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .pre-activity-card .activity-options .open-activity-details {
  display: flex;
  justify-content: center;
  align-items: center;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card-base span, #list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card span,
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .pre-activity-card span {
  width: 100%;
  font-size: smaller;
  align-items: center;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card-base p, #list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .activity-card p,
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-column .pre-activity-card p {
  width: 100%;
  font-weight: bold;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .expand-info {
  display: flex;
  justify-content: center;
  align-items: center;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-description {
  min-height: 50px;
  font-size: 0.85rem;
  font-weight: bold;
  background-color: #fff;
  padding: 0.5rem;
  border-radius: 5px;
  text-overflow: ellipsis;
  border: 1px solid black;
  overflow: hidden;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .desktop-card-status-date {
  width: 100%;
  padding: 1px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  display: flex;
  gap: 10px;
  border-radius: 30px;
  background-color: #E3B3A5;
  justify-content: center;
  align-items: center;
  height: 80%;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .concluded {
  background-color: #4caf50;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .late {
  background-color: #f44336;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .in-progress {
  background-color: #ff9800;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .recurrence {
  background-color: #01579b;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-type-status {
  background-color: #fff;
  color: black;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .desktop-pre-card-status-date {
  border-radius: 100%;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .pre-in-progress {
  color: #ff9800;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .pre-late {
  color: #f44336;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .pre-concluded {
  color: #4caf50;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .pre-in-progress {
  color: #ff9800;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .pre-recurrence {
  color: #01579b;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-status,
#list-activity-container .activities-list .activities-columns .activity-type-title .pre-activity-status {
  position: absolute;
  top: 15px;
  bottom: 10px;
  left: 1px;
  width: 12px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  max-height: 300px;
  height: 75%;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-status span,
#list-activity-container .activities-list .activities-columns .activity-type-title .pre-activity-status span {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  writing-mode: vertical-lr;
  font-size: 12px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  line-height: 100%;
  color: #000;
  letter-spacing: 1px;
}
#list-activity-container .activities-list .activities-columns .activity-type-title .activity-status .recurrency-icon,
#list-activity-container .activities-list .activities-columns .activity-type-title .pre-activity-status .recurrency-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #01579b;
  border-radius: 100%;
  color: #fff;
  height: 12.5px;
}
#list-activity-container .activities-list .activities-columns .pre-activity-card:not(.activity-card) {
  max-height: 200px;
}
#list-activity-container .activities-list .activities-columns .pre-activity-card:not(.activity-card) .activity-description {
  height: 50px;
}
#list-activity-container .activities-list .activities-columns .empty-card {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  margin: 0.5rem;
  background-color: #eee;
  border-radius: 4px;
  border: 1px solid #c0c0c0;
  text-align: center;
  height: 183px;
}

.img-employee-activity {
  background-color: red !important;
  height: auto;
}

#table-activities .business-link {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
#table-activities .business-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
  color: black;
}
#table-activities .business-icon {
  font-size: 10px;
  color: #000;
}
#table-activities .activity-late {
  background-color: rgba(244, 67, 54, 0.4);
}
#table-activities .finished-activity {
  background-color: #b9e868;
}
#table-activities .today-activity {
  background-color: rgba(255, 152, 0, 0.4);
}

#table-activities #header-activities th {
  padding-left: 10px;
  font-size: 12px;
}

#table-activities #header-activities th > svg {
  opacity: 0.5;
  cursor: pointer;
  margin-left: 10px;
}

#table-activities #header-activities th > svg:hover {
  opacity: 1;
}

#table-activities #content-activities tr td {
  padding: 0 1px;
}

#table-activities #content-activities .list-activity-item {
  border: 1px solid #eee;
  background: transparent;
  font-size: 0.8rem;
  cursor: pointer;
}

#table-activities #content-activities .list-activity-item:hover {
  background: #eee;
}

#table-activities #content-activities .list-activity-item + #content-activities .list-activity-item {
  margin-top: -1px;
}

#table-activities #content-activities .list-activity-item .detailed {
  font-weight: bold;
  padding-right: 5px;
}

#table-activities #content-activities .list-activity-item .icon-done {
  font-size: 20px;
  opacity: 0.5;
  cursor: pointer;
  margin: 3px 5px 0;
}

#table-activities #content-activities .list-activity-item .icon-done:hover {
  opacity: 1;
  padding: 3px;
  background: #4caf50;
  color: #c0c0c0;
  border-radius: 50%;
}

#table-activities #content-activities .list-activity-item .icon-done.done {
  color: #4caf50;
  opacity: 1;
  cursor: default;
}

#table-activities #content-activities .list-activity-item .icon-delete {
  font-size: 20px;
  color: #c0c0c0;
  opacity: 0.5;
  padding-right: 10px;
  cursor: pointer;
}

#table-activities #content-activities .list-activity-item .icon-delete:hover {
  color: #f44336;
  opacity: 1;
}

.delete-icon:hover {
  color: #f44336;
  cursor: pointer;
}

#list-activities-mobile {
  display: none;
}

#list-activities-mobile ul li {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  border: 1px solid #eee;
  border-radius: 5px;
  background: #eee;
  background: linear-gradient(to left, #fff, #eee);
}

#list-activities-mobile ul li + li {
  margin-top: 5px;
}

.header-activity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-weight: bold;
}

.item-activity {
  display: flex;
  align-items: center;
  gap: 5px;
}
.item-activity span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#list-activities-mobile ul li .detail-item-description {
  font-size: 12px;
  display: flex;
  align-items: flex-start;
  height: 40px;
}
#list-activities-mobile ul li .detail-item-description span {
  width: 100%;
  height: 40px;
}

#list-activities-mobile ul li .detail-item > svg {
  font-size: 20px;
  margin: 0 5px;
  color: #c0c0c0;
}

#list-activities-mobile ul li .detail-item-description > svg {
  font-size: 20px;
  margin: 0 5px;
  color: #c0c0c0;
}

#icon-message-activity-done {
  font-size: 60px;
  text-align: center;
  color: #4caf50;
}

#icon-message-activity-delete {
  font-size: 60px;
  text-align: center;
  color: #f44336;
}

.btn-alert-done {
  font-size: 1rem;
  background-color: #4caf50 !important;
}

.btn-alert-done:hover {
  opacity: 0.7;
}

.btn-alert-delete {
  font-size: 1rem;
  background-color: #f44336 !important;
}

.btn-alert-delete:hover {
  opacity: 0.7;
}

.btn-alert-cancel {
  font-size: 1rem;
  background-color: #c0c0c0 !important;
  color: #000;
}

.btn-alert-cancel:hover {
  opacity: 0.7;
}

#content-card-activity {
  margin-top: 20px;
  justify-content: space-between;
  display: flex;
  gap: 10px;
  flex-direction: column;
  background-color: #FFF7E1;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  border-radius: 5px;
  padding: 10px;
}
#content-card-activity #description-activity {
  font-size: 12px;
  font-weight: bold;
  background-color: #fff;
  padding: 5px;
  border-radius: 5px;
}
#content-card-activity #infos-activity {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 100%;
}
#content-card-activity #infos-activity .row-infos-activity {
  align-items: center;
  display: flex;
  gap: 5px;
  width: 100%;
}
#content-card-activity #infos-activity .row-infos-activity span {
  width: 100%;
  font-size: 12px;
  font-style: italic;
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis !important;
}
#content-card-activity .container-card-status-date {
  padding: 5px;
  color: #fff;
  font-size: 8px;
  font-weight: bold;
  display: flex;
  gap: 10px;
  border-radius: 30px;
  background-color: #E3B3A5;
  width: fit-content;
}
#content-card-activity .concluded {
  background-color: #4caf50;
}
#content-card-activity .late {
  background-color: #f44336;
}
#content-card-activity .in-progress {
  background-color: #ff9800;
}
#content-card-activity .recurrence {
  background-color: #01579b;
}
#content-card-activity .activity-type-status {
  background-color: #fff;
  color: black;
}
#content-card-activity .cards {
  display: flex;
  gap: 10px;
}
#content-card-activity .header-images {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#content-card-activity .header-images #span-to {
  font-weight: bold;
}
#content-card-activity .header-images .row-images-header {
  display: flex;
  align-items: center;
  gap: 5px;
}
#content-card-activity .header-images .row-images-header span {
  font-size: 10px;
}
#content-card-activity #row-buttons {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-weight: bold;
}
#content-card-activity #row-buttons .btn-concluded {
  background-color: #4caf50;
  color: #fff;
  font-weight: bold;
  font-size: 15px !important;
}

.finish-popup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.finish-popup .confirm-finish-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.finish-popup .cancel-finish-btn {
  background-color: red !important;
}

.dx-sortable-dragging {
  background-color: #c0c0c0;
  position: relative;
  padding: 1rem;
  margin: 0.5rem;
  cursor: pointer;
  border-radius: 4px;
  border: 1px dotted #fff;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  min-width: 100px;
}
.dx-sortable-dragging .activity-responsible {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 10.5px;
}
.dx-sortable-dragging .activity-responsible .activity-responsible-name {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
}
.dx-sortable-dragging p {
  background-color: #c0c0c0 !important;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
}
.dx-sortable-dragging:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.dx-sortable-dragging .finish-activity-button {
  height: 15px;
  width: 100%;
  font-size: 0.75rem;
  font-weight: bold;
}
.dx-sortable-dragging .finish-activity-button .btn-wrapper-content {
  height: 15px !important;
}
.dx-sortable-dragging .activity-information .row-activity-information {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.dx-sortable-dragging .expand-information {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  border-radius: 25%;
  background-color: #c0c0c0;
  transition: transform 0.1s ease-in-out;
}
.dx-sortable-dragging .expand-information:hover {
  background-color: #eee;
  transform: scale(1.25);
}
.dx-sortable-dragging .activity-options {
  display: flex;
  gap: 5px;
}
.dx-sortable-dragging .activity-options .open-activity-details {
  display: flex;
  justify-content: center;
  align-items: center;
}
.dx-sortable-dragging span {
  width: 100%;
  font-size: smaller;
  align-items: center;
}
.dx-sortable-dragging p {
  width: 100%;
  font-weight: bold;
}
.dx-sortable-dragging .activity-status,
.dx-sortable-dragging .pre-activity-status {
  position: absolute;
  top: 15px;
  bottom: 10px;
  left: 1px;
  width: 12px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  max-height: 300px;
  height: 75%;
}
.dx-sortable-dragging .activity-status span,
.dx-sortable-dragging .pre-activity-status span {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  writing-mode: vertical-lr;
  font-size: 12px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  line-height: 100%;
  color: #000;
  letter-spacing: 1px;
}
.dx-sortable-dragging .activity-status .recurrency-icon,
.dx-sortable-dragging .pre-activity-status .recurrency-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #01579b;
  border-radius: 100%;
  color: #fff;
  height: 12.5px;
}
.dx-sortable-dragging .concluded {
  background-color: #4caf50;
}
.dx-sortable-dragging .late {
  background-color: #f44336;
}
.dx-sortable-dragging .in-progress {
  background-color: #ff9800;
}
.dx-sortable-dragging .recurrence {
  background-color: #01579b;
}
.dx-sortable-dragging .activity-type-status {
  background-color: #fff;
  color: black;
}
.dx-sortable-dragging .desktop-pre-card-status-date {
  border-radius: 100%;
}
.dx-sortable-dragging .pre-in-progress {
  color: #ff9800;
}
.dx-sortable-dragging .pre-late {
  color: #f44336;
}
.dx-sortable-dragging .pre-concluded {
  color: #4caf50;
}
.dx-sortable-dragging .pre-in-progress {
  color: #ff9800;
}
.dx-sortable-dragging .pre-recurrence {
  color: #01579b;
}
.dx-sortable-dragging .activity-description {
  height: 50px;
  font-size: 0.85rem;
  font-weight: bold;
  padding: 0.5rem;
  border-radius: 5px;
  text-overflow: ellipsis;
  border: 1px solid black;
  overflow: hidden;
}

.employee-picture-activities {
  display: flex;
  justify-content: space-around;
  gap: 5px;
  align-items: center;
  height: 15px;
  margin: 3px 0 3px;
}
.employee-picture-activities img {
  height: auto;
}#page-list-activity {
  border-radius: 5px;
  background-color: #fff;
  margin: 10px;
  padding-top: 5px;
  font-size: 1rem;
  padding: 10px;
}

#page-list-activity .row-filter {
  background-color: transparent;
  display: flex;
  flex: 1;
  margin-right: 5px;
}

#page-list-activity .row-filter .types #types-dropdown {
  display: none;
}

#page-list-activity .row-filter .types #types-dropdown #open-types-dropdown {
  display: flex;
  align-items: center;
  padding: 5px;
  font-size: 10px;
  border-radius: 5px;
  margin-left: 10px;
  min-width: 100px;
}

#page-list-activity .row-filter .types #types-dropdown #open-types-dropdown:hover {
  background: #c0c0c0;
  color: #fff;
}

#page-list-activity .row-filter .types #types-dropdown #open-types-dropdown svg {
  margin-right: 5px;
  font-size: 14px;
}

#page-list-activity .row-filter .types #types-dropdown #dropdown-list-types {
  width: 150px !important;
  padding: 10px;
}

#page-list-activity .row-filter .types #types-dropdown #dropdown-list-types li {
  min-height: auto;
  margin-bottom: 5px;
}

#page-list-activity .row-filter .types #types-dropdown #container-picker-type {
  position: relative;
  z-index: auto;
}

#page-list-activity .row-filter .types #types-dropdown #container-picker-type #picker-type {
  position: absolute;
  left: 30px;
  top: -5px;
  background-color: #fff;
  border: 1px solid #c0ff00;
  z-index: 9998;
}

#page-list-activity .row-filter .types #types-items {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}

#page-list-activity .row-filter .types #tag-filter-all-types {
  display: flex;
  align-items: center;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: transparent;
  color: #000;
  cursor: pointer;
}

#page-list-activity .row-filter .types #tag-filter-all-types.active {
  background: #000;
  color: #c0ff00;
}

#page-list-activity .row-filter .types #tag-filter-all-types > span {
  font-size: 0.65rem;
  font-weight: bold;
}

#page-list-activity .row-filter .types #tag-filter-all-types:hover {
  background: #c0c0c0;
  color: #c0ff00;
}

#page-list-activity .row-filter .dates {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  min-width: 200px;
}

#page-list-activity .row-filter .dates #container-picker-period {
  position: relative;
  z-index: auto;
}

#page-list-activity .row-filter .dates #container-picker-period #picker-period {
  position: absolute;
  padding: 5px;
  right: 0;
  top: 10px;
  background-color: #fff;
  border: 1px solid #c0ff00;
  z-index: 9999;
}

#page-list-activity .row-filter .dates #container-picker-period #picker-period .picker-period-buttons {
  display: flex;
}

#page-list-activity .row-filter .dates #container-picker-period #picker-period .picker-period-buttons > .button {
  width: 98%;
  margin: 0 1% 0 1%;
}

#page-list-activity .row-filter .dates #container-picker-period #picker-period .picker-period-buttons > .button.cancel {
  background-color: #c0c0c0 !important;
}

#page-list-activity .row-filter .dates #container-picker-period #picker-period .picker-period-buttons > .button.cancel:hover {
  background-color: #eee !important;
}

#page-list-activity #total-activities-and-toogle-mines {
  display: flex;
  flex: 1;
}

#page-list-activity #total-activities-and-toogle-mines span {
  margin: 0 5px 5px 0;
  font-weight: bold;
}

#page-list-activity #total-activities-and-toogle-mines #total-activities {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  margin: 10px 0 10px 5px;
  font-size: 12px;
  color: #000;
}

#page-list-activity #total-activities-and-toogle-mines #filter-employee {
  margin: 10px 10px 15px 5px;
  font-size: 12px;
  font-weight: normal !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#page-list-activity #show-only-mine {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 10px 5px 10px 10px;
  font-size: 12px;
  font-weight: bold;
  gap: 10px;
}

#page-list-activity #list-activity-content {
  flex: 1;
  margin: 0 10px 10px 10px;
}

.new-activity-btn {
  background-color: #c0ff00;
}

.new-activity-btn:hover {
  background-color: #b9e868;
}

.new-activity-btn #icon-add {
  font-size: 1.6rem;
  margin-top: 15px;
}

@media (max-width: 950px) {
  #page-list-activity .row-filter .types #types-dropdown {
    display: block;
  }
  #page-list-activity .row-filter .types #types-items {
    display: none;
  }
}
@media (max-width: 650px) {
  #page-list-activity .row-filter .types #tag-filter-all-types > span {
    font-size: 0.8rem;
    padding: 5px;
  }
}td i {
  cursor: pointer;
}

td i:hover {
  opacity: 0.5;
}

td {
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis !important;
}.container-form-info-contact {
  display: flex;
  flex-direction: column;
}
.container-form-info-contact .msg-erro {
  color: #f44336;
  margin-top: 0;
}

#icon-modal-contact-info:hover {
  cursor: pointer;
  color: #b9e868;
}

@media (max-width: 600px) {
  #modal-contact-info .form-edit-contact-info {
    font-size: 0.75rem;
  }
  #modal-contact-info .form-edit-contact-info input {
    font-size: 0.75rem;
  }
  #modal-contact-info .form-edit-contact-info .msg-erro {
    font-size: 0.6rem;
  }
  #modal-contact-info .form-edit-contact-info .name {
    margin-top: 0;
    padding-left: 0;
  }
  #modal-contact-info .form-edit-contact-info .birthdate {
    padding-left: 0;
    margin-top: 15px;
  }
}.input-field input:focus {
  border-bottom: 1px solid #c0ff00 !important;
  box-shadow: 0 1px 0 0 #c0ff00 !important;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
  box-shadow: 0 0 0 30px #eee inset !important;
}

.input-field label {
  color: #c0c0c0 !important;
}

.input-field {
  margin: 0;
}

.input-field .no-padding {
  padding: 0;
}

.autocomplete-div ul {
  list-style-type: none;
  text-align: left;
  padding: 0;
  margin: 0;
  border: 2px solid #eee;
}

.autocomplete-div .no-results {
  font-style: italic;
  opacity: 0.5;
}

.autocomplete-div ul::before {
  content: "";
}

.autocomplete-div li {
  font-size: 0.8rem;
  padding: 10px 5px;
  cursor: pointer;
}

.autocomplete-div li:hover {
  background-color: #eee;
}.form-edit-contact-customers {
  padding: 5px 5px 5px 5px;
}
.form-edit-contact-customers .btn-save {
  width: 100%;
  margin-top: 10px;
}
.form-edit-contact-customers .form-edit-contact-customers .row {
  padding: 0;
  margin: 10px 0;
}
.form-edit-contact-customers .form-edit-contact-customers input {
  font-size: 1rem;
}

.form-edit-contact-customers .icon-remove-contact {
  margin-left: 5px;
  font-size: 1.2rem;
  color: #000;
  cursor: pointer;
}

.form-edit-contact-customers .icon-remove-contact:hover {
  color: #f44336;
}

#icon-modal-contact-customers {
  font-size: 1.4rem;
  cursor: pointer;
}

#icon-modal-contact-customers:hover {
  color: #c0ff00;
}

@media (max-width: 650px) {
  .form-edit-contact-customers {
    font-size: 0.75rem;
  }
  .form-edit-contact-customers input {
    font-size: 0.75rem;
  }
}.btn-select-customer,
.btn-select-customer:hover {
  height: 20px;
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #c0c0c0 !important;
}

#grid-business-customer .btn-customer {
  display: flex;
  justify-content: center;
  align-items: center;
}.form-edit-contact-business {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#modal-contact-business .form-edit-contact-business {
  padding: 15px 15px 5px 15px;
}

#modal-contact-business .form-edit-contact-business .row {
  padding: 0;
  margin: 10px 0;
}

#modal-contact-business .form-edit-contact-business input {
  font-size: 1rem;
}

#modal-contact-business .form-edit-contact-business .btn-save {
  width: 100%;
}

#modal-contact-business .form-edit-contact-customers .icon-remove-contact {
  margin-left: 5px;
  font-size: 1.2rem;
  color: #000;
  cursor: pointer;
}

#modal-contact-business .form-edit-contact-customers .icon-remove-contact:hover {
  color: #f44336;
}

#icon-modal-contact-business {
  font-size: 1.4rem;
  cursor: pointer;
}

#icon-modal-contact-business:hover {
  color: #c0ff00;
}

@media (max-width: 650px) {
  #modal-contact-business .form-edit-contact-business {
    font-size: 0.75rem;
  }
  #modal-contact-business .form-edit-contact-business input {
    font-size: 0.75rem;
  }
}.form-edit-contact-means-of-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#modal-contact-mean-of-contact .form-edit-contact-means-of-contact {
  padding: 15px 15px 5px 15px;
}

#modal-contact-mean-of-contact .form-edit-contact-means-of-contact .row {
  padding: 0;
  margin: 10px 0;
}

#modal-contact-mean-of-contact .form-edit-contact-means-of-contact input {
  font-size: 1rem;
}

#modal-contact-mean-of-contact .form-edit-contact-means-of-contact .btn-save {
  width: 100%;
}

#icon-modal-contact-mean-of-contact {
  font-size: 1.4rem;
  cursor: pointer;
}

#icon-modal-contact-mean-of-contact:hover {
  color: #c0ff00;
}

@media (max-width: 650px) {
  #modal-contact-mean-of-contact .form-edit-contact-means-of-contact {
    font-size: 0.75rem;
  }
  #modal-contact-mean-of-contact .form-edit-contact-means-of-contact input {
    font-size: 0.75rem;
  }
}.modal-header {
  display: flex;
  justify-content: space-between;
  background-color: #eee;
  height: 30px;
  padding-left: 10px;
}

.modal-header svg {
  cursor: pointer;
  font-size: 24px;
  color: #c0c0c0;
  margin-right: 5px;
}

.modal-header-title {
  text-align: center;
  color: #c0c0c0;
  font-size: 1.2rem !important;
  padding: 0 0 20px 0;
  font-weight: normal;
}#input-select-div span {
  color: #000 !important;
  font-size: 0.8rem;
}
#input-select-div .select-dropdown {
  font-size: 0.8rem;
}
#input-select-div .input-field {
  margin-top: 5px;
}
#input-select-div .input-field .col {
  width: 100%;
}
#input-select-div .input-field #msg-erro {
  position: absolute;
}#modal-edit-contact-mean-of-contact .form-edit-contact-means-of-contact {
  padding: 15px 15px 5px 15px;
}

#modal-edit-contact-mean-of-contact .form-edit-contact-means-of-contact .row {
  padding: 0;
  margin: 10px 0;
}

#modal-edit-contact-mean-of-contact .form-edit-contact-means-of-contact input {
  font-size: 1rem;
}

#modal-edit-contact-mean-of-contact .form-edit-contact-means-of-contact .btn-save {
  width: 100%;
}

@media (max-width: 650px) {
  #modal-edit-contact-mean-of-contact .form-edit-contact-means-of-contact {
    font-size: 0.75rem;
  }
  #modal-edit-contact-mean-of-contact .form-edit-contact-means-of-contact input {
    font-size: 0.75rem;
  }
}.input-field input:focus {
  border-bottom: 1px solid #c0ff00 !important;
  box-shadow: 0 1px 0 0 #c0ff00 !important;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
  box-shadow: 0 0 0 30px #eee inset !important;
}

.input-field label {
  color: #c0c0c0 !important;
}

.input-field {
  margin: 0;
}

.autocomplete-div-form ul {
  list-style-type: none;
  text-align: left;
  padding: 0;
  margin: 0;
  border: 2px solid #eee;
}

.autocomplete-div-form .no-results {
  font-style: italic;
  opacity: 0.5;
}

.autocomplete-div-form ul::before {
  content: "";
}

.autocomplete-div-form li {
  font-size: 0.8rem;
  padding: 10px 5px;
  cursor: pointer;
}

.autocomplete-div-form li:hover {
  background-color: #eee;
}

@media (max-width: 650px) {
  .autocomplete-div-form li {
    font-size: 0.6rem;
    padding: 5px;
    cursor: pointer;
  }
}#modal-business-salesfunnel-step-responsible .form-edit-salesfunnel-step-responsible {
  padding: 15px 15px 5px 15px;
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-edit-salesfunnel-step-responsible .btn-save {
  float: right;
  margin-top: 10px;
}

#modal-business-salesfunnel-step-responsible .form-edit-salesfunnel-step-responsible .marged-field {
  margin-top: 20px;
}

#modal-business-salesfunnel-step-responsible .form-edit-salesfunnel-step-responsible .row {
  margin: 0;
}

#modal-business-salesfunnel-step-responsible .form-edit-salesfunnel-step-responsible .space-around {
  padding: 0 10px;
}

#modal-business-salesfunnel-step-responsible .form-edit-salesfunnel-step-responsible .last-field {
  margin-bottom: 35px;
}

#modal-business-salesfunnel-step-responsible .form-edit-salesfunnel-step-responsible .title-steps {
  font-weight: bold;
}

#modal-business-salesfunnel-step-responsible .form-edit-salesfunnel-step-responsible input {
  font-size: 1rem;
}

#modal-business-salesfunnel-step-responsible .form-edit-salesfunnel-step-responsible .btn-save {
  width: 100%;
  background-color: #c0ff00;
}
#modal-business-salesfunnel-step-responsible .form-edit-salesfunnel-step-responsible .btn-save:hover {
  background-color: #b9e868;
}

#modal-business-salesfunnel-step-responsible .form-edit-salesfunnel-step-responsible .label-radio {
  margin-top: 3px;
  display: flex;
  flex: 1;
  font-size: 0.5rem !important;
}

#modal-business-salesfunnel-step-responsible .form-edit-salesfunnel-step-responsible .label-radio span {
  font-size: 0.85rem;
  color: #000;
}

#modal-business-salesfunnel-step-responsible .form-edit-salesfunnel-step-responsible [type=radio]:checked + span:after {
  background-color: #c0ff00;
  border-color: #c0ff00;
}

#modal-business-salesfunnel-step-responsible .form-edit-salesfunnel-step-responsible .msg-erro {
  color: #f44336;
  font-size: 0.8rem;
  margin-left: 0.75em;
  margin-top: -0.5em;
}

#icon-change-step {
  margin-left: 5px;
  font-size: 0.9rem;
}

#icon-change-step:hover {
  cursor: pointer;
  color: #c0ff00;
}

@media (max-width: 650px) {
  #modal-business-salesfunnel-step-responsible .form-edit-salesfunnel-step-responsible {
    font-size: 0.75rem;
  }
  #modal-business-salesfunnel-step-responsible .form-edit-salesfunnel-step-responsible input {
    font-size: 0.75rem;
  }
  #modal-business-salesfunnel-step-responsible .form-edit-salesfunnel-step-responsible .msg-erro {
    font-size: 0.6rem;
  }
  #modal-business-salesfunnel-step-responsible .form-edit-salesfunnel-step-responsible .label-radio span {
    font-size: 0.65rem;
  }
}#modal-business-negotiated .form-edit-business-status-negotiated {
  padding: 15px 15px 5px 15px;
}

#modal-business-negotiated .form-edit-business-status-negotiated input {
  font-size: 1rem;
}

#modal-business-negotiated .form-edit-business-status-negotiated .btn-save {
  width: 100%;
  background-color: #c0ff00;
}
#modal-business-negotiated .form-edit-business-status-negotiated .btn-save:hover {
  background-color: #b9e868;
}

#change-status-negotiated {
  text-align: center;
  font-size: 12px;
  color: #4caf50;
  margin-right: 8px;
}

#change-status-negotiated svg {
  font-size: 36px;
}

.disabled {
  display: none;
}

#icon-message-negotiated {
  font-size: 48px;
  text-align: center;
  color: #4caf50;
}

@media (max-width: 650px) {
  #modal-business-negotiated .form-edit-business-status-negotiated {
    font-size: 0.75rem;
  }
  #modal-business-negotiated .form-edit-business-status-negotiated input {
    font-size: 0.75rem;
  }
}#modal-business-not-negotiated .form-edit-business-not-negotiated {
  padding: 15px 15px 5px 15px;
}

#modal-business-not-negotiated .form-edit-business-not-negotiated input {
  font-size: 1rem;
}

#modal-business-not-negotiated .form-edit-business-not-negotiated .description-justification {
  padding-top: 25px !important;
}

#modal-business-not-negotiated .form-edit-business-not-negotiated .btn-save {
  width: 100%;
  background-color: #c0ff00;
}
#modal-business-not-negotiated .form-edit-business-not-negotiated .btn-save:hover {
  background-color: #b9e868;
}

.content-justification .btn-save {
  float: right;
  margin-top: 10px;
}

.btn-alert-remove-justification {
  background-color: red !important;
}

#change-status-not-negotiated {
  text-align: center;
  font-size: 12px;
  color: #f44336;
  cursor: pointer;
  margin-right: 8px;
}

#change-status-not-negotiated svg {
  font-size: 36px;
}

#change-status-not-negotiated:hover {
  opacity: 0.5;
}

.disabled {
  display: none;
}

#icon-message-not-negotiated {
  font-size: 48px;
  text-align: center;
  color: #f44336;
}

@media (max-width: 650px) {
  #modal-business-not-negotiated .form-edit-business-not-negotiated {
    font-size: 0.75rem;
  }
  #modal-business-not-negotiated .form-edit-business-not-negotiated input {
    font-size: 0.75rem;
  }
}#change-status-followers {
  font-size: 12px;
  min-width: 100px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#change-status-followers svg {
  font-size: 36px;
  text-align: center;
}

#change-status-followers:hover {
  opacity: 0.5;
}

.widget-container {
  display: flex;
  gap: 24px;
  padding-top: 10px;
}

.widget-container > div {
  flex: 1;
}

.btn-save {
  text-align: right;
  margin-top: 20px;
}#business-block-display {
  display: flex !important;
  flex-direction: row;
}

#business-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 0 15px;
}
#business-info .loading-business {
  font-weight: 600;
}

#business-info-steps {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: center;
  padding: 0 15px;
}

#business-info .business-info-details {
  padding: 0 0 5px 0px;
}

#business-info .business-title {
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 10px;
}

#business-info .customer-box {
  display: flex;
  align-items: center;
}

#business-info .business-info-budget-box {
  font-weight: bold;
  color: rgb(86, 129, 216);
}

#business-info .business-info-budget-box svg {
  font-size: 0.9rem;
  color: #000;
  margin-right: 5px;
}

#business-info .field-edit-sales-funnel {
  padding: 0 10px;
}

#icons-business-steps-main {
  display: flex;
  flex-direction: row;
  height: 35px;
}

#icons-business-steps-start {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAjCAYAAACU9ioYAAAKN2lDQ1BzUkdCIElFQzYxOTY2LTIuMQAAeJydlndUU9kWh8+9N71QkhCKlNBraFICSA29SJEuKjEJEErAkAAiNkRUcERRkaYIMijggKNDkbEiioUBUbHrBBlE1HFwFBuWSWStGd+8ee/Nm98f935rn73P3Wfvfda6AJD8gwXCTFgJgAyhWBTh58WIjYtnYAcBDPAAA2wA4HCzs0IW+EYCmQJ82IxsmRP4F726DiD5+yrTP4zBAP+flLlZIjEAUJiM5/L42VwZF8k4PVecJbdPyZi2NE3OMErOIlmCMlaTc/IsW3z2mWUPOfMyhDwZy3PO4mXw5Nwn4405Er6MkWAZF+cI+LkyviZjg3RJhkDGb+SxGXxONgAoktwu5nNTZGwtY5IoMoIt43kA4EjJX/DSL1jMzxPLD8XOzFouEiSniBkmXFOGjZMTi+HPz03ni8XMMA43jSPiMdiZGVkc4XIAZs/8WRR5bRmyIjvYODk4MG0tbb4o1H9d/JuS93aWXoR/7hlEH/jD9ld+mQ0AsKZltdn6h21pFQBd6wFQu/2HzWAvAIqyvnUOfXEeunxeUsTiLGcrq9zcXEsBn2spL+jv+p8Of0NffM9Svt3v5WF485M4knQxQ143bmZ6pkTEyM7icPkM5p+H+B8H/nUeFhH8JL6IL5RFRMumTCBMlrVbyBOIBZlChkD4n5r4D8P+pNm5lona+BHQllgCpSEaQH4eACgqESAJe2Qr0O99C8ZHA/nNi9GZmJ37z4L+fVe4TP7IFiR/jmNHRDK4ElHO7Jr8WgI0IABFQAPqQBvoAxPABLbAEbgAD+ADAkEoiARxYDHgghSQAUQgFxSAtaAYlIKtYCeoBnWgETSDNnAYdIFj4DQ4By6By2AE3AFSMA6egCnwCsxAEISFyBAVUod0IEPIHLKFWJAb5AMFQxFQHJQIJUNCSAIVQOugUqgcqobqoWboW+godBq6AA1Dt6BRaBL6FXoHIzAJpsFasBFsBbNgTzgIjoQXwcnwMjgfLoK3wJVwA3wQ7oRPw5fgEVgKP4GnEYAQETqiizARFsJGQpF4JAkRIauQEqQCaUDakB6kH7mKSJGnyFsUBkVFMVBMlAvKHxWF4qKWoVahNqOqUQdQnag+1FXUKGoK9RFNRmuizdHO6AB0LDoZnYsuRlegm9Ad6LPoEfQ4+hUGg6FjjDGOGH9MHCYVswKzGbMb0445hRnGjGGmsVisOtYc64oNxXKwYmwxtgp7EHsSewU7jn2DI+J0cLY4X1w8TogrxFXgWnAncFdwE7gZvBLeEO+MD8Xz8MvxZfhGfA9+CD+OnyEoE4wJroRIQiphLaGS0EY4S7hLeEEkEvWITsRwooC4hlhJPEQ8TxwlviVRSGYkNimBJCFtIe0nnSLdIr0gk8lGZA9yPFlM3kJuJp8h3ye/UaAqWCoEKPAUVivUKHQqXFF4pohXNFT0VFysmK9YoXhEcUjxqRJeyUiJrcRRWqVUo3RU6YbStDJV2UY5VDlDebNyi/IF5UcULMWI4kPhUYoo+yhnKGNUhKpPZVO51HXURupZ6jgNQzOmBdBSaaW0b2iDtCkVioqdSrRKnkqNynEVKR2hG9ED6On0Mvph+nX6O1UtVU9Vvuom1TbVK6qv1eaoeajx1UrU2tVG1N6pM9R91NPUt6l3qd/TQGmYaYRr5Grs0Tir8XQObY7LHO6ckjmH59zWhDXNNCM0V2ju0xzQnNbS1vLTytKq0jqj9VSbru2hnaq9Q/uE9qQOVcdNR6CzQ+ekzmOGCsOTkc6oZPQxpnQ1df11Jbr1uoO6M3rGelF6hXrtevf0Cfos/ST9Hfq9+lMGOgYhBgUGrQa3DfGGLMMUw12G/YavjYyNYow2GHUZPTJWMw4wzjduNb5rQjZxN1lm0mByzRRjyjJNM91tetkMNrM3SzGrMRsyh80dzAXmu82HLdAWThZCiwaLG0wS05OZw2xljlrSLYMtCy27LJ9ZGVjFW22z6rf6aG1vnW7daH3HhmITaFNo02Pzq62ZLde2xvbaXPJc37mr53bPfW5nbse322N3055qH2K/wb7X/oODo4PIoc1h0tHAMdGx1vEGi8YKY21mnXdCO3k5rXY65vTW2cFZ7HzY+RcXpkuaS4vLo3nG8/jzGueNueq5clzrXaVuDLdEt71uUnddd457g/sDD30PnkeTx4SnqWeq50HPZ17WXiKvDq/XbGf2SvYpb8Tbz7vEe9CH4hPlU+1z31fPN9m31XfKz95vhd8pf7R/kP82/xsBWgHcgOaAqUDHwJWBfUGkoAVB1UEPgs2CRcE9IXBIYMj2kLvzDecL53eFgtCA0O2h98KMw5aFfR+OCQ8Lrwl/GGETURDRv4C6YMmClgWvIr0iyyLvRJlESaJ6oxWjE6Kbo1/HeMeUx0hjrWJXxl6K04gTxHXHY+Oj45vipxf6LNy5cDzBPqE44foi40V5iy4s1licvvj4EsUlnCVHEtGJMYktie85oZwGzvTSgKW1S6e4bO4u7hOeB28Hb5Lvyi/nTyS5JpUnPUp2Td6ePJninlKR8lTAFlQLnqf6p9alvk4LTduf9ik9Jr09A5eRmHFUSBGmCfsytTPzMoezzLOKs6TLnJftXDYlChI1ZUPZi7K7xTTZz9SAxESyXjKa45ZTk/MmNzr3SJ5ynjBvYLnZ8k3LJ/J9879egVrBXdFboFuwtmB0pefK+lXQqqWrelfrry5aPb7Gb82BtYS1aWt/KLQuLC98uS5mXU+RVtGaorH1futbixWKRcU3NrhsqNuI2ijYOLhp7qaqTR9LeCUXS61LK0rfb+ZuvviVzVeVX33akrRlsMyhbM9WzFbh1uvb3LcdKFcuzy8f2x6yvXMHY0fJjpc7l+y8UGFXUbeLsEuyS1oZXNldZVC1tep9dUr1SI1XTXutZu2m2te7ebuv7PHY01anVVda926vYO/Ner/6zgajhop9mH05+x42Rjf2f836urlJo6m06cN+4X7pgYgDfc2Ozc0tmi1lrXCrpHXyYMLBy994f9Pdxmyrb6e3lx4ChySHHn+b+O31w0GHe4+wjrR9Z/hdbQe1o6QT6lzeOdWV0iXtjusePhp4tLfHpafje8vv9x/TPVZzXOV42QnCiaITn07mn5w+lXXq6enk02O9S3rvnIk9c60vvG/wbNDZ8+d8z53p9+w/ed71/LELzheOXmRd7LrkcKlzwH6g4wf7HzoGHQY7hxyHui87Xe4Znjd84or7ldNXva+euxZw7dLI/JHh61HXb95IuCG9ybv56Fb6ree3c27P3FlzF3235J7SvYr7mvcbfjT9sV3qID0+6j068GDBgztj3LEnP2X/9H686CH5YcWEzkTzI9tHxyZ9Jy8/Xvh4/EnWk5mnxT8r/1z7zOTZd794/DIwFTs1/lz0/NOvm1+ov9j/0u5l73TY9P1XGa9mXpe8UX9z4C3rbf+7mHcTM7nvse8rP5h+6PkY9PHup4xPn34D94Tz+49wZioAAAAJcEhZcwAALiMAAC4jAXilP3YAAABGSURBVHic7daxDQAgDANBI2UvZmcyIIiGGktQ/BcpTy4TfaZdU9Ft4YIO0Fk41y3QqgECAgICAgICPgar+ufvXJ5cmTmWDtqWCs+i0XJhAAAAAElFTkSuQmCC");
  width: 20px;
  height: 35px;
}

#icons-business-steps-text-concluded {
  background-color: #c0ff00;
  text-align: center;
  padding-top: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

#icons-business-steps-text-concluded-mobile {
  background-color: #c0ff00;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  padding-top: 8px;
}

#icons-business-steps-text-notconcluded {
  background-color: rgb(227, 227, 227);
  text-align: center;
  padding-top: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

#icons-business-steps-middle {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAjCAYAAACU9ioYAAAKN2lDQ1BzUkdCIElFQzYxOTY2LTIuMQAAeJydlndUU9kWh8+9N71QkhCKlNBraFICSA29SJEuKjEJEErAkAAiNkRUcERRkaYIMijggKNDkbEiioUBUbHrBBlE1HFwFBuWSWStGd+8ee/Nm98f935rn73P3Wfvfda6AJD8gwXCTFgJgAyhWBTh58WIjYtnYAcBDPAAA2wA4HCzs0IW+EYCmQJ82IxsmRP4F726DiD5+yrTP4zBAP+flLlZIjEAUJiM5/L42VwZF8k4PVecJbdPyZi2NE3OMErOIlmCMlaTc/IsW3z2mWUPOfMyhDwZy3PO4mXw5Nwn4405Er6MkWAZF+cI+LkyviZjg3RJhkDGb+SxGXxONgAoktwu5nNTZGwtY5IoMoIt43kA4EjJX/DSL1jMzxPLD8XOzFouEiSniBkmXFOGjZMTi+HPz03ni8XMMA43jSPiMdiZGVkc4XIAZs/8WRR5bRmyIjvYODk4MG0tbb4o1H9d/JuS93aWXoR/7hlEH/jD9ld+mQ0AsKZltdn6h21pFQBd6wFQu/2HzWAvAIqyvnUOfXEeunxeUsTiLGcrq9zcXEsBn2spL+jv+p8Of0NffM9Svt3v5WF485M4knQxQ143bmZ6pkTEyM7icPkM5p+H+B8H/nUeFhH8JL6IL5RFRMumTCBMlrVbyBOIBZlChkD4n5r4D8P+pNm5lona+BHQllgCpSEaQH4eACgqESAJe2Qr0O99C8ZHA/nNi9GZmJ37z4L+fVe4TP7IFiR/jmNHRDK4ElHO7Jr8WgI0IABFQAPqQBvoAxPABLbAEbgAD+ADAkEoiARxYDHgghSQAUQgFxSAtaAYlIKtYCeoBnWgETSDNnAYdIFj4DQ4By6By2AE3AFSMA6egCnwCsxAEISFyBAVUod0IEPIHLKFWJAb5AMFQxFQHJQIJUNCSAIVQOugUqgcqobqoWboW+godBq6AA1Dt6BRaBL6FXoHIzAJpsFasBFsBbNgTzgIjoQXwcnwMjgfLoK3wJVwA3wQ7oRPw5fgEVgKP4GnEYAQETqiizARFsJGQpF4JAkRIauQEqQCaUDakB6kH7mKSJGnyFsUBkVFMVBMlAvKHxWF4qKWoVahNqOqUQdQnag+1FXUKGoK9RFNRmuizdHO6AB0LDoZnYsuRlegm9Ad6LPoEfQ4+hUGg6FjjDGOGH9MHCYVswKzGbMb0445hRnGjGGmsVisOtYc64oNxXKwYmwxtgp7EHsSewU7jn2DI+J0cLY4X1w8TogrxFXgWnAncFdwE7gZvBLeEO+MD8Xz8MvxZfhGfA9+CD+OnyEoE4wJroRIQiphLaGS0EY4S7hLeEEkEvWITsRwooC4hlhJPEQ8TxwlviVRSGYkNimBJCFtIe0nnSLdIr0gk8lGZA9yPFlM3kJuJp8h3ye/UaAqWCoEKPAUVivUKHQqXFF4pohXNFT0VFysmK9YoXhEcUjxqRJeyUiJrcRRWqVUo3RU6YbStDJV2UY5VDlDebNyi/IF5UcULMWI4kPhUYoo+yhnKGNUhKpPZVO51HXURupZ6jgNQzOmBdBSaaW0b2iDtCkVioqdSrRKnkqNynEVKR2hG9ED6On0Mvph+nX6O1UtVU9Vvuom1TbVK6qv1eaoeajx1UrU2tVG1N6pM9R91NPUt6l3qd/TQGmYaYRr5Grs0Tir8XQObY7LHO6ckjmH59zWhDXNNCM0V2ju0xzQnNbS1vLTytKq0jqj9VSbru2hnaq9Q/uE9qQOVcdNR6CzQ+ekzmOGCsOTkc6oZPQxpnQ1df11Jbr1uoO6M3rGelF6hXrtevf0Cfos/ST9Hfq9+lMGOgYhBgUGrQa3DfGGLMMUw12G/YavjYyNYow2GHUZPTJWMw4wzjduNb5rQjZxN1lm0mByzRRjyjJNM91tetkMNrM3SzGrMRsyh80dzAXmu82HLdAWThZCiwaLG0wS05OZw2xljlrSLYMtCy27LJ9ZGVjFW22z6rf6aG1vnW7daH3HhmITaFNo02Pzq62ZLde2xvbaXPJc37mr53bPfW5nbse322N3055qH2K/wb7X/oODo4PIoc1h0tHAMdGx1vEGi8YKY21mnXdCO3k5rXY65vTW2cFZ7HzY+RcXpkuaS4vLo3nG8/jzGueNueq5clzrXaVuDLdEt71uUnddd457g/sDD30PnkeTx4SnqWeq50HPZ17WXiKvDq/XbGf2SvYpb8Tbz7vEe9CH4hPlU+1z31fPN9m31XfKz95vhd8pf7R/kP82/xsBWgHcgOaAqUDHwJWBfUGkoAVB1UEPgs2CRcE9IXBIYMj2kLvzDecL53eFgtCA0O2h98KMw5aFfR+OCQ8Lrwl/GGETURDRv4C6YMmClgWvIr0iyyLvRJlESaJ6oxWjE6Kbo1/HeMeUx0hjrWJXxl6K04gTxHXHY+Oj45vipxf6LNy5cDzBPqE44foi40V5iy4s1licvvj4EsUlnCVHEtGJMYktie85oZwGzvTSgKW1S6e4bO4u7hOeB28Hb5Lvyi/nTyS5JpUnPUp2Td6ePJninlKR8lTAFlQLnqf6p9alvk4LTduf9ik9Jr09A5eRmHFUSBGmCfsytTPzMoezzLOKs6TLnJftXDYlChI1ZUPZi7K7xTTZz9SAxESyXjKa45ZTk/MmNzr3SJ5ynjBvYLnZ8k3LJ/J9879egVrBXdFboFuwtmB0pefK+lXQqqWrelfrry5aPb7Gb82BtYS1aWt/KLQuLC98uS5mXU+RVtGaorH1futbixWKRcU3NrhsqNuI2ijYOLhp7qaqTR9LeCUXS61LK0rfb+ZuvviVzVeVX33akrRlsMyhbM9WzFbh1uvb3LcdKFcuzy8f2x6yvXMHY0fJjpc7l+y8UGFXUbeLsEuyS1oZXNldZVC1tep9dUr1SI1XTXutZu2m2te7ebuv7PHY01anVVda926vYO/Ner/6zgajhop9mH05+x42Rjf2f836urlJo6m06cN+4X7pgYgDfc2Ozc0tmi1lrXCrpHXyYMLBy994f9Pdxmyrb6e3lx4ChySHHn+b+O31w0GHe4+wjrR9Z/hdbQe1o6QT6lzeOdWV0iXtjusePhp4tLfHpafje8vv9x/TPVZzXOV42QnCiaITn07mn5w+lXXq6enk02O9S3rvnIk9c60vvG/wbNDZ8+d8z53p9+w/ed71/LELzheOXmRd7LrkcKlzwH6g4wf7HzoGHQY7hxyHui87Xe4Znjd84or7ldNXva+euxZw7dLI/JHh61HXb95IuCG9ybv56Fb6ree3c27P3FlzF3235J7SvYr7mvcbfjT9sV3qID0+6j068GDBgztj3LEnP2X/9H686CH5YcWEzkTzI9tHxyZ9Jy8/Xvh4/EnWk5mnxT8r/1z7zOTZd794/DIwFTs1/lz0/NOvm1+ov9j/0u5l73TY9P1XGa9mXpe8UX9z4C3rbf+7mHcTM7nvse8rP5h+6PkY9PHup4xPn34D94Tz+49wZioAAAAJcEhZcwAALiMAAC4jAXilP3YAAACJSURBVHiczdYxCoAwEARAi7xBsPD//1JQ4ieULbQIyd0Fld1tkkKWSeNdWrZ8Dk7maXzu636Y3yavrDehQqhuJU5LyREiUSVPiESUXCHiKflCxFJqCH8pbD1bR4jUlFpCpFS+Liz/5lpPrs0aHWFrEuoIPy20Bj9f6K0lXGFkaeIJoysdR0hdOC9tREyJAp/ysAAAAABJRU5ErkJggg==");
  width: 20px;
  height: 35px;
}

#icons-business-steps-middle-left {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAjCAYAAACU9ioYAAAKN2lDQ1BzUkdCIElFQzYxOTY2LTIuMQAAeJydlndUU9kWh8+9N71QkhCKlNBraFICSA29SJEuKjEJEErAkAAiNkRUcERRkaYIMijggKNDkbEiioUBUbHrBBlE1HFwFBuWSWStGd+8ee/Nm98f935rn73P3Wfvfda6AJD8gwXCTFgJgAyhWBTh58WIjYtnYAcBDPAAA2wA4HCzs0IW+EYCmQJ82IxsmRP4F726DiD5+yrTP4zBAP+flLlZIjEAUJiM5/L42VwZF8k4PVecJbdPyZi2NE3OMErOIlmCMlaTc/IsW3z2mWUPOfMyhDwZy3PO4mXw5Nwn4405Er6MkWAZF+cI+LkyviZjg3RJhkDGb+SxGXxONgAoktwu5nNTZGwtY5IoMoIt43kA4EjJX/DSL1jMzxPLD8XOzFouEiSniBkmXFOGjZMTi+HPz03ni8XMMA43jSPiMdiZGVkc4XIAZs/8WRR5bRmyIjvYODk4MG0tbb4o1H9d/JuS93aWXoR/7hlEH/jD9ld+mQ0AsKZltdn6h21pFQBd6wFQu/2HzWAvAIqyvnUOfXEeunxeUsTiLGcrq9zcXEsBn2spL+jv+p8Of0NffM9Svt3v5WF485M4knQxQ143bmZ6pkTEyM7icPkM5p+H+B8H/nUeFhH8JL6IL5RFRMumTCBMlrVbyBOIBZlChkD4n5r4D8P+pNm5lona+BHQllgCpSEaQH4eACgqESAJe2Qr0O99C8ZHA/nNi9GZmJ37z4L+fVe4TP7IFiR/jmNHRDK4ElHO7Jr8WgI0IABFQAPqQBvoAxPABLbAEbgAD+ADAkEoiARxYDHgghSQAUQgFxSAtaAYlIKtYCeoBnWgETSDNnAYdIFj4DQ4By6By2AE3AFSMA6egCnwCsxAEISFyBAVUod0IEPIHLKFWJAb5AMFQxFQHJQIJUNCSAIVQOugUqgcqobqoWboW+godBq6AA1Dt6BRaBL6FXoHIzAJpsFasBFsBbNgTzgIjoQXwcnwMjgfLoK3wJVwA3wQ7oRPw5fgEVgKP4GnEYAQETqiizARFsJGQpF4JAkRIauQEqQCaUDakB6kH7mKSJGnyFsUBkVFMVBMlAvKHxWF4qKWoVahNqOqUQdQnag+1FXUKGoK9RFNRmuizdHO6AB0LDoZnYsuRlegm9Ad6LPoEfQ4+hUGg6FjjDGOGH9MHCYVswKzGbMb0445hRnGjGGmsVisOtYc64oNxXKwYmwxtgp7EHsSewU7jn2DI+J0cLY4X1w8TogrxFXgWnAncFdwE7gZvBLeEO+MD8Xz8MvxZfhGfA9+CD+OnyEoE4wJroRIQiphLaGS0EY4S7hLeEEkEvWITsRwooC4hlhJPEQ8TxwlviVRSGYkNimBJCFtIe0nnSLdIr0gk8lGZA9yPFlM3kJuJp8h3ye/UaAqWCoEKPAUVivUKHQqXFF4pohXNFT0VFysmK9YoXhEcUjxqRJeyUiJrcRRWqVUo3RU6YbStDJV2UY5VDlDebNyi/IF5UcULMWI4kPhUYoo+yhnKGNUhKpPZVO51HXURupZ6jgNQzOmBdBSaaW0b2iDtCkVioqdSrRKnkqNynEVKR2hG9ED6On0Mvph+nX6O1UtVU9Vvuom1TbVK6qv1eaoeajx1UrU2tVG1N6pM9R91NPUt6l3qd/TQGmYaYRr5Grs0Tir8XQObY7LHO6ckjmH59zWhDXNNCM0V2ju0xzQnNbS1vLTytKq0jqj9VSbru2hnaq9Q/uE9qQOVcdNR6CzQ+ekzmOGCsOTkc6oZPQxpnQ1df11Jbr1uoO6M3rGelF6hXrtevf0Cfos/ST9Hfq9+lMGOgYhBgUGrQa3DfGGLMMUw12G/YavjYyNYow2GHUZPTJWMw4wzjduNb5rQjZxN1lm0mByzRRjyjJNM91tetkMNrM3SzGrMRsyh80dzAXmu82HLdAWThZCiwaLG0wS05OZw2xljlrSLYMtCy27LJ9ZGVjFW22z6rf6aG1vnW7daH3HhmITaFNo02Pzq62ZLde2xvbaXPJc37mr53bPfW5nbse322N3055qH2K/wb7X/oODo4PIoc1h0tHAMdGx1vEGi8YKY21mnXdCO3k5rXY65vTW2cFZ7HzY+RcXpkuaS4vLo3nG8/jzGueNueq5clzrXaVuDLdEt71uUnddd457g/sDD30PnkeTx4SnqWeq50HPZ17WXiKvDq/XbGf2SvYpb8Tbz7vEe9CH4hPlU+1z31fPN9m31XfKz95vhd8pf7R/kP82/xsBWgHcgOaAqUDHwJWBfUGkoAVB1UEPgs2CRcE9IXBIYMj2kLvzDecL53eFgtCA0O2h98KMw5aFfR+OCQ8Lrwl/GGETURDRv4C6YMmClgWvIr0iyyLvRJlESaJ6oxWjE6Kbo1/HeMeUx0hjrWJXxl6K04gTxHXHY+Oj45vipxf6LNy5cDzBPqE44foi40V5iy4s1licvvj4EsUlnCVHEtGJMYktie85oZwGzvTSgKW1S6e4bO4u7hOeB28Hb5Lvyi/nTyS5JpUnPUp2Td6ePJninlKR8lTAFlQLnqf6p9alvk4LTduf9ik9Jr09A5eRmHFUSBGmCfsytTPzMoezzLOKs6TLnJftXDYlChI1ZUPZi7K7xTTZz9SAxESyXjKa45ZTk/MmNzr3SJ5ynjBvYLnZ8k3LJ/J9879egVrBXdFboFuwtmB0pefK+lXQqqWrelfrry5aPb7Gb82BtYS1aWt/KLQuLC98uS5mXU+RVtGaorH1futbixWKRcU3NrhsqNuI2ijYOLhp7qaqTR9LeCUXS61LK0rfb+ZuvviVzVeVX33akrRlsMyhbM9WzFbh1uvb3LcdKFcuzy8f2x6yvXMHY0fJjpc7l+y8UGFXUbeLsEuyS1oZXNldZVC1tep9dUr1SI1XTXutZu2m2te7ebuv7PHY01anVVda926vYO/Ner/6zgajhop9mH05+x42Rjf2f836urlJo6m06cN+4X7pgYgDfc2Ozc0tmi1lrXCrpHXyYMLBy994f9Pdxmyrb6e3lx4ChySHHn+b+O31w0GHe4+wjrR9Z/hdbQe1o6QT6lzeOdWV0iXtjusePhp4tLfHpafje8vv9x/TPVZzXOV42QnCiaITn07mn5w+lXXq6enk02O9S3rvnIk9c60vvG/wbNDZ8+d8z53p9+w/ed71/LELzheOXmRd7LrkcKlzwH6g4wf7HzoGHQY7hxyHui87Xe4Znjd84or7ldNXva+euxZw7dLI/JHh61HXb95IuCG9ybv56Fb6ree3c27P3FlzF3235J7SvYr7mvcbfjT9sV3qID0+6j068GDBgztj3LEnP2X/9H686CH5YcWEzkTzI9tHxyZ9Jy8/Xvh4/EnWk5mnxT8r/1z7zOTZd794/DIwFTs1/lz0/NOvm1+ov9j/0u5l73TY9P1XGa9mXpe8UX9z4C3rbf+7mHcTM7nvse8rP5h+6PkY9PHup4xPn34D94Tz+49wZioAAAAJcEhZcwAALiMAAC4jAXilP3YAAACKSURBVHiczdZBCoAwDATACH2D4MG3+HV9iwfBT1T2UqS0SURls+eyTC5N0poli5Hl9mQ/TvVtssqexlW4yVCU8zSqSo4Q8Sp5QsSj5AoRS8kXIpoyhvCXwt7YcYRISxlLiNTK14X1bx5r5NauiSPsbcI4wk8LtcXPF1pnCVfoOZp4Qu9JxxFSD84LzMVMGdFJl+MAAAAASUVORK5CYII=");
  width: 20px;
  height: 35px;
  align-items: center;
  align-content: center;
}

#icons-business-steps-middle-rigth {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAjCAYAAACU9ioYAAAKN2lDQ1BzUkdCIElFQzYxOTY2LTIuMQAAeJydlndUU9kWh8+9N71QkhCKlNBraFICSA29SJEuKjEJEErAkAAiNkRUcERRkaYIMijggKNDkbEiioUBUbHrBBlE1HFwFBuWSWStGd+8ee/Nm98f935rn73P3Wfvfda6AJD8gwXCTFgJgAyhWBTh58WIjYtnYAcBDPAAA2wA4HCzs0IW+EYCmQJ82IxsmRP4F726DiD5+yrTP4zBAP+flLlZIjEAUJiM5/L42VwZF8k4PVecJbdPyZi2NE3OMErOIlmCMlaTc/IsW3z2mWUPOfMyhDwZy3PO4mXw5Nwn4405Er6MkWAZF+cI+LkyviZjg3RJhkDGb+SxGXxONgAoktwu5nNTZGwtY5IoMoIt43kA4EjJX/DSL1jMzxPLD8XOzFouEiSniBkmXFOGjZMTi+HPz03ni8XMMA43jSPiMdiZGVkc4XIAZs/8WRR5bRmyIjvYODk4MG0tbb4o1H9d/JuS93aWXoR/7hlEH/jD9ld+mQ0AsKZltdn6h21pFQBd6wFQu/2HzWAvAIqyvnUOfXEeunxeUsTiLGcrq9zcXEsBn2spL+jv+p8Of0NffM9Svt3v5WF485M4knQxQ143bmZ6pkTEyM7icPkM5p+H+B8H/nUeFhH8JL6IL5RFRMumTCBMlrVbyBOIBZlChkD4n5r4D8P+pNm5lona+BHQllgCpSEaQH4eACgqESAJe2Qr0O99C8ZHA/nNi9GZmJ37z4L+fVe4TP7IFiR/jmNHRDK4ElHO7Jr8WgI0IABFQAPqQBvoAxPABLbAEbgAD+ADAkEoiARxYDHgghSQAUQgFxSAtaAYlIKtYCeoBnWgETSDNnAYdIFj4DQ4By6By2AE3AFSMA6egCnwCsxAEISFyBAVUod0IEPIHLKFWJAb5AMFQxFQHJQIJUNCSAIVQOugUqgcqobqoWboW+godBq6AA1Dt6BRaBL6FXoHIzAJpsFasBFsBbNgTzgIjoQXwcnwMjgfLoK3wJVwA3wQ7oRPw5fgEVgKP4GnEYAQETqiizARFsJGQpF4JAkRIauQEqQCaUDakB6kH7mKSJGnyFsUBkVFMVBMlAvKHxWF4qKWoVahNqOqUQdQnag+1FXUKGoK9RFNRmuizdHO6AB0LDoZnYsuRlegm9Ad6LPoEfQ4+hUGg6FjjDGOGH9MHCYVswKzGbMb0445hRnGjGGmsVisOtYc64oNxXKwYmwxtgp7EHsSewU7jn2DI+J0cLY4X1w8TogrxFXgWnAncFdwE7gZvBLeEO+MD8Xz8MvxZfhGfA9+CD+OnyEoE4wJroRIQiphLaGS0EY4S7hLeEEkEvWITsRwooC4hlhJPEQ8TxwlviVRSGYkNimBJCFtIe0nnSLdIr0gk8lGZA9yPFlM3kJuJp8h3ye/UaAqWCoEKPAUVivUKHQqXFF4pohXNFT0VFysmK9YoXhEcUjxqRJeyUiJrcRRWqVUo3RU6YbStDJV2UY5VDlDebNyi/IF5UcULMWI4kPhUYoo+yhnKGNUhKpPZVO51HXURupZ6jgNQzOmBdBSaaW0b2iDtCkVioqdSrRKnkqNynEVKR2hG9ED6On0Mvph+nX6O1UtVU9Vvuom1TbVK6qv1eaoeajx1UrU2tVG1N6pM9R91NPUt6l3qd/TQGmYaYRr5Grs0Tir8XQObY7LHO6ckjmH59zWhDXNNCM0V2ju0xzQnNbS1vLTytKq0jqj9VSbru2hnaq9Q/uE9qQOVcdNR6CzQ+ekzmOGCsOTkc6oZPQxpnQ1df11Jbr1uoO6M3rGelF6hXrtevf0Cfos/ST9Hfq9+lMGOgYhBgUGrQa3DfGGLMMUw12G/YavjYyNYow2GHUZPTJWMw4wzjduNb5rQjZxN1lm0mByzRRjyjJNM91tetkMNrM3SzGrMRsyh80dzAXmu82HLdAWThZCiwaLG0wS05OZw2xljlrSLYMtCy27LJ9ZGVjFW22z6rf6aG1vnW7daH3HhmITaFNo02Pzq62ZLde2xvbaXPJc37mr53bPfW5nbse322N3055qH2K/wb7X/oODo4PIoc1h0tHAMdGx1vEGi8YKY21mnXdCO3k5rXY65vTW2cFZ7HzY+RcXpkuaS4vLo3nG8/jzGueNueq5clzrXaVuDLdEt71uUnddd457g/sDD30PnkeTx4SnqWeq50HPZ17WXiKvDq/XbGf2SvYpb8Tbz7vEe9CH4hPlU+1z31fPN9m31XfKz95vhd8pf7R/kP82/xsBWgHcgOaAqUDHwJWBfUGkoAVB1UEPgs2CRcE9IXBIYMj2kLvzDecL53eFgtCA0O2h98KMw5aFfR+OCQ8Lrwl/GGETURDRv4C6YMmClgWvIr0iyyLvRJlESaJ6oxWjE6Kbo1/HeMeUx0hjrWJXxl6K04gTxHXHY+Oj45vipxf6LNy5cDzBPqE44foi40V5iy4s1licvvj4EsUlnCVHEtGJMYktie85oZwGzvTSgKW1S6e4bO4u7hOeB28Hb5Lvyi/nTyS5JpUnPUp2Td6ePJninlKR8lTAFlQLnqf6p9alvk4LTduf9ik9Jr09A5eRmHFUSBGmCfsytTPzMoezzLOKs6TLnJftXDYlChI1ZUPZi7K7xTTZz9SAxESyXjKa45ZTk/MmNzr3SJ5ynjBvYLnZ8k3LJ/J9879egVrBXdFboFuwtmB0pefK+lXQqqWrelfrry5aPb7Gb82BtYS1aWt/KLQuLC98uS5mXU+RVtGaorH1futbixWKRcU3NrhsqNuI2ijYOLhp7qaqTR9LeCUXS61LK0rfb+ZuvviVzVeVX33akrRlsMyhbM9WzFbh1uvb3LcdKFcuzy8f2x6yvXMHY0fJjpc7l+y8UGFXUbeLsEuyS1oZXNldZVC1tep9dUr1SI1XTXutZu2m2te7ebuv7PHY01anVVda926vYO/Ner/6zgajhop9mH05+x42Rjf2f836urlJo6m06cN+4X7pgYgDfc2Ozc0tmi1lrXCrpHXyYMLBy994f9Pdxmyrb6e3lx4ChySHHn+b+O31w0GHe4+wjrR9Z/hdbQe1o6QT6lzeOdWV0iXtjusePhp4tLfHpafje8vv9x/TPVZzXOV42QnCiaITn07mn5w+lXXq6enk02O9S3rvnIk9c60vvG/wbNDZ8+d8z53p9+w/ed71/LELzheOXmRd7LrkcKlzwH6g4wf7HzoGHQY7hxyHui87Xe4Znjd84or7ldNXva+euxZw7dLI/JHh61HXb95IuCG9ybv56Fb6ree3c27P3FlzF3235J7SvYr7mvcbfjT9sV3qID0+6j068GDBgztj3LEnP2X/9H686CH5YcWEzkTzI9tHxyZ9Jy8/Xvh4/EnWk5mnxT8r/1z7zOTZd794/DIwFTs1/lz0/NOvm1+ov9j/0u5l73TY9P1XGa9mXpe8UX9z4C3rbf+7mHcTM7nvse8rP5h+6PkY9PHup4xPn34D94Tz+49wZioAAAAJcEhZcwAALiMAAC4jAXilP3YAAACBSURBVHiczdbBCsAgDAPQDvwvf337MiWHwRBtO+ZIcvEi4XmxLWezZkHq48plh3u3RGVvkyqE6lbi9JQcIZJV8oRIRskVIpGSL0Q8pYbwl8LVs3WEyEypJURG5efC8TfXevJs1ugIV5NQR7i10Bv8fGG0lnCFmaWJJ8yudBwhdeHsMsg0if8rkxYAAAAASUVORK5CYII=");
  width: 20px;
  height: 35px;
}

#icons-business-steps-middle-end {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAjCAYAAACU9ioYAAAKN2lDQ1BzUkdCIElFQzYxOTY2LTIuMQAAeJydlndUU9kWh8+9N71QkhCKlNBraFICSA29SJEuKjEJEErAkAAiNkRUcERRkaYIMijggKNDkbEiioUBUbHrBBlE1HFwFBuWSWStGd+8ee/Nm98f935rn73P3Wfvfda6AJD8gwXCTFgJgAyhWBTh58WIjYtnYAcBDPAAA2wA4HCzs0IW+EYCmQJ82IxsmRP4F726DiD5+yrTP4zBAP+flLlZIjEAUJiM5/L42VwZF8k4PVecJbdPyZi2NE3OMErOIlmCMlaTc/IsW3z2mWUPOfMyhDwZy3PO4mXw5Nwn4405Er6MkWAZF+cI+LkyviZjg3RJhkDGb+SxGXxONgAoktwu5nNTZGwtY5IoMoIt43kA4EjJX/DSL1jMzxPLD8XOzFouEiSniBkmXFOGjZMTi+HPz03ni8XMMA43jSPiMdiZGVkc4XIAZs/8WRR5bRmyIjvYODk4MG0tbb4o1H9d/JuS93aWXoR/7hlEH/jD9ld+mQ0AsKZltdn6h21pFQBd6wFQu/2HzWAvAIqyvnUOfXEeunxeUsTiLGcrq9zcXEsBn2spL+jv+p8Of0NffM9Svt3v5WF485M4knQxQ143bmZ6pkTEyM7icPkM5p+H+B8H/nUeFhH8JL6IL5RFRMumTCBMlrVbyBOIBZlChkD4n5r4D8P+pNm5lona+BHQllgCpSEaQH4eACgqESAJe2Qr0O99C8ZHA/nNi9GZmJ37z4L+fVe4TP7IFiR/jmNHRDK4ElHO7Jr8WgI0IABFQAPqQBvoAxPABLbAEbgAD+ADAkEoiARxYDHgghSQAUQgFxSAtaAYlIKtYCeoBnWgETSDNnAYdIFj4DQ4By6By2AE3AFSMA6egCnwCsxAEISFyBAVUod0IEPIHLKFWJAb5AMFQxFQHJQIJUNCSAIVQOugUqgcqobqoWboW+godBq6AA1Dt6BRaBL6FXoHIzAJpsFasBFsBbNgTzgIjoQXwcnwMjgfLoK3wJVwA3wQ7oRPw5fgEVgKP4GnEYAQETqiizARFsJGQpF4JAkRIauQEqQCaUDakB6kH7mKSJGnyFsUBkVFMVBMlAvKHxWF4qKWoVahNqOqUQdQnag+1FXUKGoK9RFNRmuizdHO6AB0LDoZnYsuRlegm9Ad6LPoEfQ4+hUGg6FjjDGOGH9MHCYVswKzGbMb0445hRnGjGGmsVisOtYc64oNxXKwYmwxtgp7EHsSewU7jn2DI+J0cLY4X1w8TogrxFXgWnAncFdwE7gZvBLeEO+MD8Xz8MvxZfhGfA9+CD+OnyEoE4wJroRIQiphLaGS0EY4S7hLeEEkEvWITsRwooC4hlhJPEQ8TxwlviVRSGYkNimBJCFtIe0nnSLdIr0gk8lGZA9yPFlM3kJuJp8h3ye/UaAqWCoEKPAUVivUKHQqXFF4pohXNFT0VFysmK9YoXhEcUjxqRJeyUiJrcRRWqVUo3RU6YbStDJV2UY5VDlDebNyi/IF5UcULMWI4kPhUYoo+yhnKGNUhKpPZVO51HXURupZ6jgNQzOmBdBSaaW0b2iDtCkVioqdSrRKnkqNynEVKR2hG9ED6On0Mvph+nX6O1UtVU9Vvuom1TbVK6qv1eaoeajx1UrU2tVG1N6pM9R91NPUt6l3qd/TQGmYaYRr5Grs0Tir8XQObY7LHO6ckjmH59zWhDXNNCM0V2ju0xzQnNbS1vLTytKq0jqj9VSbru2hnaq9Q/uE9qQOVcdNR6CzQ+ekzmOGCsOTkc6oZPQxpnQ1df11Jbr1uoO6M3rGelF6hXrtevf0Cfos/ST9Hfq9+lMGOgYhBgUGrQa3DfGGLMMUw12G/YavjYyNYow2GHUZPTJWMw4wzjduNb5rQjZxN1lm0mByzRRjyjJNM91tetkMNrM3SzGrMRsyh80dzAXmu82HLdAWThZCiwaLG0wS05OZw2xljlrSLYMtCy27LJ9ZGVjFW22z6rf6aG1vnW7daH3HhmITaFNo02Pzq62ZLde2xvbaXPJc37mr53bPfW5nbse322N3055qH2K/wb7X/oODo4PIoc1h0tHAMdGx1vEGi8YKY21mnXdCO3k5rXY65vTW2cFZ7HzY+RcXpkuaS4vLo3nG8/jzGueNueq5clzrXaVuDLdEt71uUnddd457g/sDD30PnkeTx4SnqWeq50HPZ17WXiKvDq/XbGf2SvYpb8Tbz7vEe9CH4hPlU+1z31fPN9m31XfKz95vhd8pf7R/kP82/xsBWgHcgOaAqUDHwJWBfUGkoAVB1UEPgs2CRcE9IXBIYMj2kLvzDecL53eFgtCA0O2h98KMw5aFfR+OCQ8Lrwl/GGETURDRv4C6YMmClgWvIr0iyyLvRJlESaJ6oxWjE6Kbo1/HeMeUx0hjrWJXxl6K04gTxHXHY+Oj45vipxf6LNy5cDzBPqE44foi40V5iy4s1licvvj4EsUlnCVHEtGJMYktie85oZwGzvTSgKW1S6e4bO4u7hOeB28Hb5Lvyi/nTyS5JpUnPUp2Td6ePJninlKR8lTAFlQLnqf6p9alvk4LTduf9ik9Jr09A5eRmHFUSBGmCfsytTPzMoezzLOKs6TLnJftXDYlChI1ZUPZi7K7xTTZz9SAxESyXjKa45ZTk/MmNzr3SJ5ynjBvYLnZ8k3LJ/J9879egVrBXdFboFuwtmB0pefK+lXQqqWrelfrry5aPb7Gb82BtYS1aWt/KLQuLC98uS5mXU+RVtGaorH1futbixWKRcU3NrhsqNuI2ijYOLhp7qaqTR9LeCUXS61LK0rfb+ZuvviVzVeVX33akrRlsMyhbM9WzFbh1uvb3LcdKFcuzy8f2x6yvXMHY0fJjpc7l+y8UGFXUbeLsEuyS1oZXNldZVC1tep9dUr1SI1XTXutZu2m2te7ebuv7PHY01anVVda926vYO/Ner/6zgajhop9mH05+x42Rjf2f836urlJo6m06cN+4X7pgYgDfc2Ozc0tmi1lrXCrpHXyYMLBy994f9Pdxmyrb6e3lx4ChySHHn+b+O31w0GHe4+wjrR9Z/hdbQe1o6QT6lzeOdWV0iXtjusePhp4tLfHpafje8vv9x/TPVZzXOV42QnCiaITn07mn5w+lXXq6enk02O9S3rvnIk9c60vvG/wbNDZ8+d8z53p9+w/ed71/LELzheOXmRd7LrkcKlzwH6g4wf7HzoGHQY7hxyHui87Xe4Znjd84or7ldNXva+euxZw7dLI/JHh61HXb95IuCG9ybv56Fb6ree3c27P3FlzF3235J7SvYr7mvcbfjT9sV3qID0+6j068GDBgztj3LEnP2X/9H686CH5YcWEzkTzI9tHxyZ9Jy8/Xvh4/EnWk5mnxT8r/1z7zOTZd794/DIwFTs1/lz0/NOvm1+ov9j/0u5l73TY9P1XGa9mXpe8UX9z4C3rbf+7mHcTM7nvse8rP5h+6PkY9PHup4xPn34D94Tz+49wZioAAAAJcEhZcwAALiMAAC4jAXilP3YAAABsSURBVHic5ZZBCoAwDAQj9F/9ur6sspceRE1AZQecc1gm0CZp64gRCT0vmbRy5ZuBWyxlS4+hqFr6DEXF0msoMku/obizZBh+EnjVNsdQnFmyDMXR8nEgu2X2s/nZX2YPWPaSYi969rFkPTh33vMeeTgap3wAAAAASUVORK5CYII=");
  width: 20px;
  height: 35px;
}

#icons-business-steps-middle-end-notconcluded {
  background: url("/assets/etapa_final_nao_atingida-Dk9CCRFh.png");
  width: 20px;
  height: 35px;
}

#icons-edit-negotiated {
  display: flex;
  align-items: center;
  padding-right: 8px;
}

@media (max-width: 650px) {
  #business-info .business-title {
    font-size: 1rem;
    margin-bottom: 5px;
  }
  #business-block-display {
    flex-direction: column;
  }
  #icons-edit-negotiated {
    margin: 10px 0 10px 0;
  }
}.container-customer-modal-default .add-contact {
  font-weight: bold;
}
.container-customer-modal-default .add-contact:hover {
  cursor: pointer;
  text-decoration: underline;
}

.btn-select-customer,
.btn-select-customer:hover {
  height: 20px;
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #c0c0c0 !important;
}

#grid-business-customer .btn-customer {
  display: flex;
  justify-content: center;
  align-items: center;
}#business-contact hr {
  opacity: 0.3;
}

#business-contact #title-box {
  padding: 3px;
  display: flex;
  align-items: center;
}

#business-contact #title-box > span {
  flex: 1;
  font-size: 14px;
  color: #000;
  opacity: 0.8;
  font-weight: bold;
}

#business-contact #content-box .list-contact {
  font-size: 0.7rem;
}
#business-contact #content-box .list-contact .row-delete-contact {
  align-items: center;
  display: flex;
}
#business-contact #content-box .list-contact .icon-exclude-contact {
  cursor: pointer;
  font-size: 15px;
}
#business-contact #content-box .list-contact .icon-exclude-contact:hover {
  color: #f44336;
}

#business-contact #content-box .list-contact a {
  text-decoration: none;
  color: #000;
  display: flex;
  flex: 1;
  cursor: pointer;
  border-radius: 3px;
  transition: background-color 0.2s;
}

#business-contact #content-box .list-contact a:hover {
  background-color: #eee;
}

#business-contact #content-box .list-contact li span {
  flex: 1;
  padding: 4px 8px;
}

#business-contact #content-box .no-data {
  display: flex;
  justify-content: center;
  font-size: 0.8rem;
  padding: 4px 8px;
}.container-input-editable .text-decoration span:hover {
  cursor: pointer;
  text-decoration: underline;
}.container-edit-origin {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}#business-detail hr {
  opacity: 0.3;
}

#business-detail #title-box {
  padding: 3px;
  display: flex;
  align-items: center;
}

#business-detail #title-box span {
  flex: 1;
  font-size: 14px;
  color: #000;
  opacity: 0.8;
  font-weight: bold;
}

#business-detail #content-box {
  margin: 5px;
  font-size: 0.8rem;
}

#business-detail #content-box .title-in-box {
  padding-top: 5px;
}

#business-detail #content-box .title-in-box span {
  font-size: 14px;
  color: #000;
  opacity: 0.8;
  font-weight: bold;
}

#business-detail #content-box .content-in-box {
  margin: 0 10px;
}

.content-in-box span:hover {
  cursor: pointer;
  text-decoration: underline;
}

#business-detail #content-box .content-in-box .add-value {
  color: #000 !important;
  opacity: 0.5;
}

#business-detail #content-box .content-in-box .add-value:hover {
  opacity: 1;
}#business-customer hr {
  opacity: 0.3;
}

#business-customer #title-box {
  padding: 3px;
  display: flex;
  align-items: center;
}

#business-customer #title-box svg {
  color: #000;
  margin: 3px 0 0 5px;
  font-size: 1.25rem;
}

#business-customer #title-box svg:hover {
  color: #c0ff00;
}

#business-customer #title-box span {
  flex: 1;
  font-size: 14px;
  color: #000;
  opacity: 0.8;
  font-weight: bold;
}

#business-customer #content-box {
  margin: 5px;
  font-size: 0.8rem;
}

#business-customer #content-box .title-in-box {
  padding-top: 5px;
}

#business-customer #content-box .title-in-box span {
  font-size: 14px;
  color: #000;
  opacity: 0.8;
  font-weight: bold;
}

#business-customer #content-box .content-in-box {
  margin: 0 10px;
}.container-item-budget .add-more-budgets {
  margin-bottom: 10px;
  font-weight: 400;
}
.container-item-budget .add-more-budgets:hover {
  cursor: pointer;
  text-decoration: underline;
}
.container-item-budget .icon-remove-add-budget:hover {
  cursor: pointer;
}

#business-budget td i {
  cursor: default !important;
  opacity: 1;
}

#business-budget .table_reduced {
  font-size: 0.75rem;
}

#business-budget .table_reduced td {
  padding: 5px;
}

#business-budget .table_reduced td svg {
  font-size: 14px;
}

#business-budget .change-add-to-business {
  cursor: pointer;
}

#business-budget .change-add-to-business:hover {
  background-color: #c0c0c0;
}

#business-budget .change-add-to-business > svg.add {
  color: #4caf50;
}

#business-budget .change-add-to-business > svg.no-add {
  color: #f44336;
}

#business-budget .change-add-to-business:hover > svg {
  color: #000;
}

#business-budget > #no-data {
  display: flex;
  justify-content: center;
  font-size: 0.8rem;
  padding: 4px 8px;
}

@media (max-width: 650px) {
  #business-budget .table_reduced {
    font-size: 0.6rem;
  }
}#btn-save-note-business {
  margin-top: 10px;
  display: flex;
  justify-content: end;
}

#business-note #new-note-business {
  flex: 1;
  resize: vertical;
  padding: 10px;
  border: 0;
  border-radius: 3px;
}

#business-note #new-note-business:disabled {
  cursor: not-allowed;
}

#business-note #new-note-business:focus {
  border: 1px solid #eee;
  border-bottom: 1px solid #c0ff00;
  box-shadow: 0 1px 0 0 #c0ff00;
}

#business-note #icon-save-business {
  margin: 10px 0 0 15px;
  font-size: 24px;
  cursor: pointer;
}

#business-note #icon-save-business:hover {
  color: #c0ff00;
}#business-activity {
  display: flex;
  font-size: 1rem;
}
#business-activity #business-activity-fields {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#business-activity .btn-save-activity-business {
  width: 120px;
  float: right;
  margin-top: 10px;
}

#business-activity #business-activity-fields {
  flex: 1;
}

#business-activity #business-activity-fields #field-public-activity {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

#business-activity #business-activity-fields #field-public-activity label {
  margin: 5px 10px 0 0;
}

#business-activity #business-activity-fields #field-public-activity span {
  font-size: 0.9rem;
  opacity: 0.7;
}

#business-activity #business-activity-fields #activity-type {
  border: 0;
  border-bottom: 1px solid #eee;
}

#business-activity #business-activity-fields #activity-type.select-placeholder {
  opacity: 0.4;
}

#business-activity #business-activity-fields #activity-type:focus {
  border-bottom: 2px solid #c0ff00 !important;
}

#activity-date {
  width: calc(100% - 10px) !important;
  border-bottom: 1px solid #eee;
  margin-top: 10px;
}

#business-activity #business-activity-fields #activity-date:focus {
  border-bottom: 1px solid #c0ff00 !important;
  box-shadow: 0 1px 0 0 #c0ff00 !important;
}

#business-activity #business-activity-fields .activity-employee {
  border-bottom: 1px solid #eee;
  padding: 0 0 0 10px;
  width: calc(100% - 10px) !important;
}

#business-activity #business-activity-fields #activity-description {
  flex: 1;
  resize: vertical;
  min-height: 50px;
  padding: 10px;
  border: 0;
  border-radius: 3px;
  border-bottom: 1px solid #eee;
}

#business-activity #business-activity-fields #activity-description:disabled {
  cursor: not-allowed;
}

#business-activity #business-activity-fields #activity-description:focus {
  border: 1px solid #eee;
  border-bottom: 1px solid #c0ff00;
  box-shadow: 0 1px 0 0 #c0ff00;
}

#business-activity #business-activity-fields .error-message {
  font-size: 0.75rem;
  color: #f44336;
}

#business-activity #icon-save-business {
  margin: 10px 0 0 15px;
  font-size: 24px;
  cursor: pointer;
}

#business-activity #icon-save-business:hover {
  color: #c0ff00;
}

@media (max-width: 650px) {
  #business-activity {
    font-size: 0.75rem;
  }
  #business-activity #business-activity-fields #activity-date {
    font-size: 0.75rem;
  }
  #business-activity #business-activity-fields .activity-employee {
    font-size: 0.75rem;
  }
}.timeline-activity #icon-message-confirmation-activity-done {
  color: #4caf50;
  font-size: 48px;
  text-align: center;
}

.timeline-activity #icon-message-confirmation-activity-delete {
  color: #f44336;
  font-size: 48px;
  text-align: center;
}

.timeline-activity .btn-message {
  font-size: 1rem;
}

.timeline-activity .btn-message:hover {
  opacity: 0.8;
}

.timeline-activity .btn-message.success {
  background-color: #4caf50;
  color: #fff;
}

.timeline-activity .btn-message.cancel {
  background-color: #c0c0c0 !important;
  color: #000;
}

.timeline-activity .btn-message.delete {
  background-color: #f44336;
}

.timeline-activity .timeline-activity-content {
  padding: 5px 5px 5px 10px;
}

.timeline-activity .timeline-activity-header {
  background-color: #fff;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 1px 0 #c0c0c0;
}

.timeline-activity .timeline-activity-header .timeline-activity-header-title {
  display: flex;
  align-items: center;
}

.timeline-activity .timeline-activity-header .icon-header-type {
  margin-right: 10px;
  font-size: 16px;
  color: #c0c0c0;
}

.timeline-activity .timeline-activity-header div + svg {
  margin-left: auto;
}

.timeline-activity .timeline-activity-header svg + svg {
  margin-left: 15px;
}

.timeline-activity .timeline-activity-header svg:last-child {
  margin-right: 5px;
}

.timeline-activity .timeline-activity-header .icon-header-done {
  font-size: 20px;
  color: #c0c0c0;
  cursor: pointer;
}

.timeline-activity .timeline-activity-header .icon-header-done:hover {
  color: #4caf50;
}

.timeline-activity .timeline-activity-header .icon-header-delete {
  font-size: 20px;
  color: #c0c0c0;
  cursor: pointer;
}

.timeline-activity .timeline-activity-header .icon-header-delete:hover {
  color: #f44336;
}

.timeline-activity .timeline-activity-header .icon-header-type.done {
  color: #4caf50;
}

.timeline-activity .timeline-activity-header .icon-header-type.late {
  color: #ff9800;
}

.timeline-activity .timeline-activity-header .icon-header-edit {
  font-size: 20px;
  color: #c0c0c0;
  cursor: pointer;
}

.timeline-activity .timeline-activity-header .icon-header-edit:hover {
  color: #c0ff00;
}

.timeline-activity .timeline-activity-header .timeline-activity-type {
  font-size: 1.2rem;
  line-height: 2rem;
  color: #000;
}

.timeline-activity .timeline-activity-header .timeline-activity-header-date {
  display: flex;
  align-items: center;
  gap: 20px;
}

.timeline-activity .timeline-activity-header .timeline-activity-header-date > :first-child {
  margin-right: 10px;
}

.timeline-activity .timeline-activity-header .timeline-activity-header-date .description-header-activity {
  font-weight: bold;
  font-size: 0.8rem;
  color: #000;
  opacity: 0.6;
}

.timeline-activity textarea {
  flex: 1;
  resize: vertical;
  min-height: 50px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 3px;
}

.timeline-activity textarea:focus {
  border-bottom: 1px solid #c0ff00;
  box-shadow: 0 1px 0 0 #c0ff00;
}

.timeline-activity select {
  border: 0;
  border-bottom: 1px solid #eee;
}

.timeline-activity select:focus {
  border-bottom: 2px solid #c0ff00 !important;
}

@media (max-width: 650px) {
  .timeline-activity .btn-message {
    font-size: 0.75rem;
  }
  .timeline-activity .timeline-activity-header .icon-header-type {
    font-size: 12px;
  }
  .timeline-activity .timeline-activity-header .timeline-activity-type {
    font-size: 1rem;
  }
  .timeline-activity .timeline-activity-header .timeline-activity-header-date .description-header-activity {
    font-size: 0.65rem;
  }
  .timeline-activity .timeline-activity-header .icon-header-done {
    opacity: 0.4;
  }
  .timeline-activity .timeline-activity-header .icon-header-delete {
    opacity: 0.4;
  }
  .timeline-activity .timeline-activity-header .icon-header-edit {
    opacity: 0.4;
  }
}.container-input-editable span:hover {
  cursor: pointer;
  text-decoration: underline;
}.timeline-note-content {
  padding: 5px 5px 5px 10px;
}

.timeline-note-content .timeline-note-content-date {
  padding-bottom: 10px;
  font-weight: bold;
  color: #000;
  opacity: 0.6;
}

.timeline-note-content textarea {
  flex: 1;
  resize: vertical;
  min-height: 50px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 3px;
}

.timeline-note-content textarea:focus {
  border-bottom: 1px solid #c0ff00;
  box-shadow: 0 1px 0 0 #c0ff00;
}#business-timeline .show-hide-list {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  margin-bottom: 10px;
  opacity: 0.7;
}

#business-timeline .show-hide-list:hover {
  text-decoration: underline;
  opacity: 1;
}

#business-timeline .show-hide-list svg {
  margin-right: 8px;
  font-size: 1.2rem;
}

#business-timeline .vertical-timeline {
  padding: 10px 0;
}

#business-timeline .timeline-item {
  margin: 0;
  margin-bottom: 1em;
  min-height: 10px;
}

#business-timeline .timeline-item-content {
  padding: 0;
  border: 1px solid #c0c0c0;
  background: #fff8e1;
  color: #000;
}

#business-timeline .vertical-timeline-element-content p {
  margin: 0;
  font-size: 0.8rem;
}

#business-timeline .timeline-icon {
  background: #eee;
  color: #c0c0c0;
}

#business-timeline .vertical-timeline-element-date {
  display: none;
}

#business-timeline .detail-status {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#business-timeline .detail-status p {
  background-color: #c0c0c0;
  width: 100px;
  color: #eee;
  font-size: 10px;
  text-align: center;
  border-radius: 8px;
}

#business-timeline .detail-status .detail-status-options {
  display: flex;
  flex: 1;
  width: 100%;
  margin-top: 10px;
}

#business-timeline .detail-status .detail-status-options span {
  color: #c0c0c0;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  margin-left: 20px;
  border-bottom: 2px solid #c0c0c0;
}

#business-timeline .detail-status .detail-status-options span:first-child {
  margin-left: 80px;
}

#business-timeline .detail-status .detail-status-options span:hover {
  color: #000;
  border-bottom: 2px solid #c0ff00;
  opacity: 0.7;
}

#business-timeline .detail-status .detail-status-options .detail-status-options-selected {
  color: #000;
  border-bottom: 2px solid #c0ff00;
}

@media (max-width: 650px) {
  #business-timeline .vertical-timeline-element-content p {
    font-size: 0.65rem;
  }
  #business-timeline .detail-status .detail-status-options span {
    font-size: 0.65rem;
  }
  #business-timeline .detail-status p {
    font-size: 0.65rem;
  }
}#container-horintal-list-image {
  background-color: rgba(0, 0, 0, 0.7);
  gap: 20px;
  display: flex;
  padding: 20px;
  margin: 10px;
}
#container-horintal-list-image:hover {
  opacity: 1;
}
#container-horintal-list-image img:hover {
  cursor: pointer;
  border: 3px solid #c0ff00;
}
#container-horintal-list-image .selected-img {
  border: 3px solid #c0ff00;
}
#container-horintal-list-image .arrow-left-horizontal-images {
  width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}/* Modal Overlay */
.modal-overlay-pinch-image {
  position: fixed !important;
  padding: 10px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  z-index: 10000 !important;
}
.modal-overlay-pinch-image .content-image-pinch {
  overflow: visible !important;
}
.modal-overlay-pinch-image #content-image {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.modal-overlay-pinch-image .image-wrapper-header-container {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  padding: 0.5rem;
  z-index: 20000;
  background-color: #666;
  opacity: 0.7;
  gap: 10px;
  border-radius: 5px;
}
.modal-overlay-pinch-image .image-wrapper-header-container .header-button {
  color: white;
  border-radius: 3px;
  border: none;
  padding: 3px;
  background-color: #666;
  cursor: pointer;
}
.modal-overlay-pinch-image .image-wrapper-header-container .close-view {
  background-color: #555555;
}
.modal-overlay-pinch-image .image-wrapper-header-container :hover,
.modal-overlay-pinch-image .image-wrapper-header-container :active {
  color: #000;
  background-color: #9e9e9e;
}
.modal-overlay-pinch-image .image-wrapper-header-container svg {
  font-size: 18px;
}
.modal-overlay-pinch-image .no-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #adadad;
}
.modal-overlay-pinch-image .visible-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #adadad;
  animation: spinLoad 1.5s linear infinite;
}
@keyframes spinLoad {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.modal-overlay-pinch-image .hidden-loader {
  display: none !important;
}
@media (max-width: 650px) {
  .modal-overlay-pinch-image .image-wrapper-header-container {
    border-radius: 0px;
    position: absolute;
    width: 100%;
    top: 0;
    right: 0;
    justify-content: flex-end;
    display: flex;
    flex: 1;
    gap: 15px;
  }
}.container-spinner {
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  align-items: center;
}
.container-spinner span {
  font-weight: 400;
  font-size: 0.8rem;
}
.container-spinner .spinner {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 3px solid;
  border-color: #000000;
  border-right-color: #c0ff00;
  animation: spinner-d3wgkg 1s infinite linear;
}
@keyframes spinner-d3wgkg {
  to {
    transform: rotate(1turn);
  }
}#pdf-viewer-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 5px;
  overflow: hidden;
  background-color: #eee;
}
#pdf-viewer-wrapper div.document-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  margin: 5px 0;
}
#pdf-viewer-wrapper div.document-header div.document-header-content {
  display: flex;
  align-items: center;
  flex: 1;
}
#pdf-viewer-wrapper div.document-header div.document-header-content div.page-actions {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding-left: 50px;
}
#pdf-viewer-wrapper div.document-header div.document-header-content svg {
  font-size: 1.75rem;
  color: #c0c0c0;
  margin: 5px 20px;
}
#pdf-viewer-wrapper div.document-header div.document-header-content svg:hover {
  color: #000;
  cursor: pointer;
}
#pdf-viewer-wrapper div.scroll-document-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}
#pdf-viewer-wrapper div.message-file {
  margin-top: 15vh;
  text-align: center;
}
#pdf-viewer-wrapper div.message-file span {
  font-size: 1rem;
  color: #c0c0c0;
}
#pdf-viewer-wrapper .page-document {
  margin-bottom: 5px;
}

@media (max-width: 650px) {
  #pdf-viewer-wrapper div.message-file {
    margin-top: 20vh;
  }
}.container-business-files {
  padding: 10px;
}
.container-business-files span {
  display: inline;
}
.container-business-files .other-files-title {
  font-weight: bold;
}
.container-business-files .text-file {
  font-size: 13px;
  font-weight: bold;
}
.container-business-files .row-file {
  margin-bottom: 5px;
  display: flex;
  padding: 5px;
  gap: 5px;
  align-items: center;
  justify-content: space-between;
  border: solid 1px #c0c0c0;
  border-radius: 5px;
}
.container-business-files .row-file:hover {
  box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.5);
}
.container-business-files .row-file span:hover {
  cursor: pointer;
  text-decoration: underline;
}
.container-business-files .row-file svg:hover {
  cursor: pointer;
}
.container-business-files .row-file .row-info-file {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.container-business-files .row-file .file-content {
  display: inline-grid;
}
.container-business-files .row-file .text-size-file {
  font-size: 10px;
}
.container-business-files .row-file .options {
  display: flex;
  gap: 5px;
}
.container-business-files .row-file .options .icon {
  padding: 5px;
}
.container-business-files .row-file .options .icon:hover {
  background-color: #eee;
  border-radius: 5px;
}
.container-business-files .text-download-file {
  margin-left: 5px;
  font-size: 12px;
  font-style: italic;
  color: #000;
}
.container-business-files .content-files {
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
  border: solid 1px black;
}
.container-business-files .carousel-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 10px;
  overflow-x: auto;
  white-space: nowrap;
  scroll-behavior: smooth;
  margin-bottom: 15px;
  scrollbar-width: thin;
}
.container-business-files .container-business-photos {
  padding: 10px;
}
.container-business-files .text-photos {
  font-weight: bold;
  margin-bottom: 10px;
}
.container-business-files .no-photos {
  color: #f44336;
}
.container-business-files .has-photos {
  color: #4caf50;
}
.container-business-files .carousel-container-wraper {
  flex-wrap: wrap;
}
.container-business-files .carousel-item {
  position: relative;
  max-width: 125px;
}
.container-business-files .carousel-item p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.container-business-files .carousel-item img {
  width: 125px;
  height: 80px;
  object-fit: cover;
  border: solid 1px black;
}
.container-business-files .carousel-item img:hover {
  cursor: pointer;
  opacity: 0.5;
}
.container-business-files .delete-image-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: red;
}
.container-business-files .delete-image-btn:hover {
  color: darkred;
}
.container-business-files #dropzone-external {
  width: 200px;
  height: 200px;
  background-color: rgba(183, 183, 183, 0.1);
  border-width: 2px;
  border-style: dashed;
  padding: 10px;
  border-radius: 10px;
  border-color: rgba(0, 0, 0, 0.062745098);
  transition: transform 0.3s ease;
}
.container-business-files #dropzone-external:hover {
  background-color: #c0c0c0;
  border-color: #c0c0c0;
  transform: scale(1.05);
  cursor: pointer;
}
.container-business-files #dropzone-external:hover span {
  color: #000;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.container-business-files #dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 100%;
  background-color: rgba(183, 183, 183, 0.1);
  border-width: 2px;
  border-style: dashed;
  padding: 10px;
  border-radius: 10px;
  border-color: rgba(0, 0, 0, 0.062745098);
  transition: transform 0.3s ease;
}
.container-business-files #dropzone span {
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  white-space: normal;
}
.container-business-files #dropzone:hover {
  border-color: #c0c0c0;
  cursor: pointer;
}
.container-business-files #dropzone-text {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container-business-files #dropzone-text > span {
  font-weight: 100;
  opacity: 0.5;
}
.container-business-files #upload-progress {
  display: flex;
  margin-top: 10px;
}
.container-business-files .uploaded-image {
  position: absolute;
}
.container-business-files .uploaded-image:hover {
  transform: scale(1.05);
}#business-page > .row {
  margin-bottom: 0;
}

#business-page > .row .col {
  padding: 0;
}

#business-page .btn-back {
  display: flex;
  align-items: center;
  margin: 0 10px;
  opacity: 0.5;
  text-decoration: none;
  color: #000;
  width: 55px;
}

#business-page .btn-back:hover {
  cursor: pointer;
  color: #ff9800;
  opacity: 1;
}

#business-page .btn-back span:hover {
  text-decoration: underline;
}

#business-page .btn-alert {
  font-size: 1rem;
}

#business-page .btn-alert-remove {
  background-color: #ff9800;
}

#business-page .btn-alert-cancel {
  background-color: #c0c0c0 !important;
  color: #000;
}

#business-page .box-content {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
}

#business-page .box-content.box-content-info {
  margin-top: 0 !important;
}

#business-page .box-content .content-box {
  padding: 10px;
}

#business-page .box-content .title-box .title {
  font-size: 14px;
  font-weight: bold;
  color: #000;
  opacity: 0.8;
  margin: 0 10px;
  flex: 1;
}

#business-page .business-data {
  display: flex;
  flex-direction: row;
}

#business-page .business-data .business-customer-contact-details {
  flex: 2;
  min-height: 50px;
  max-width: 500px;
}

#business-page .business-data .business-notes-activities-budget {
  flex: 3;
  min-height: 50px;
}

#business-page .edit-field-business-detail-customer.modal.open {
  background-color: aqua !important;
  width: 87% !important;
  height: 87% !important;
}

@media (max-width: 650px) {
  #business-page {
    font-size: 0.75rem;
  }
  #business-page .box-content {
    margin: 5px 10px;
    padding: 5px;
  }
  #business-page .box-content .title-box .title {
    font-size: 1rem;
    margin: 0 5px;
  }
  #business-page .btn-alert {
    font-size: 0.75rem;
  }
  #business-page .business-data {
    display: flex;
    flex-direction: column-reverse;
  }
  #business-page .business-data .business-notes-activities-budget {
    flex: 1;
    min-height: 50px;
  }
  #business-page .tab-item .budget .li {
    background-color: aqua;
    color: bisque;
  }
}.card-container-business {
  background-color: #fff;
  border: 1px solid #dfdcdc;
  padding: 5px;
  margin-bottom: 3px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.card-container-business > .container-business {
  display: flex;
  flex-direction: column;
  font-size: 0.6rem;
  overflow: hidden;
}

.card-container-business > .container-business a {
  color: #000;
}

.card-container-business.dragging-business {
  font-weight: bold;
  background-color: #c0c0c0;
  border: 1px dotted #eee;
}

.card-container-business.dragging-business.negotiated {
  font-weight: bold;
  background-color: #4caf50;
}

.card-container-business.dragging-business.not-negotiated {
  font-weight: bold;
  background-color: #f44336;
}

.card-container-business.expired {
  background: #f44336;
}

.card-container-business.expiring {
  background: #ff9800;
}

.card-container-business.dragging-business.expired {
  background: #fff8e1;
}

.card-container-business.dragging-business.expiring {
  background: #fff8e1;
}

.card-container-business.dragging-business a {
  color: #eee !important;
}

.card-container-business > .container-business .dragging {
  opacity: 0.3;
}

.card-container-business.negotiated a {
  color: #4caf50;
  background: url("data:image/svg+xml,%3c?xml%20version='1.0'%20?%3e%3csvg%20fill='none'%20height='24'%20stroke='%23a5d6a7'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='2'%20viewBox='0%200%2024%2024'%20width='24'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M14%209V5a3%203%200%200%200-3-3l-4%209v11h11.28a2%202%200%200%200%202-1.7l1.38-9a2%202%200%200%200-2-2.3zM7%2022H4a2%202%200%200%201-2-2v-7a2%202%200%200%201%202-2h3'/%3e%3c/svg%3e") no-repeat bottom right;
}

.card-container-business.not-negotiated a {
  color: #f44336;
  background: url("data:image/svg+xml,%3c?xml%20version='1.0'%20?%3e%3csvg%20fill='none'%20height='24'%20stroke='%23ef9a9a'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='2'%20viewBox='0%200%2024%2024'%20width='24'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M10%2015v4a3%203%200%200%200%203%203l4-9V2H5.72a2%202%200%200%200-2%201.7l-1.38%209a2%202%200%200%200%202%202.3zm7-13h2.67A2.31%202.31%200%200%201%2022%204v7a2.31%202.31%200%200%201-2.33%202H17'/%3e%3c/svg%3e") no-repeat bottom right;
}

.card-container-business.expired a,
.card-container-business.expiring a {
  color: #fff;
}

.card-container-business > .container-business .text-wrapped {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-container-business > .container-business .title {
  font-weight: bold;
  font-size: 0.7rem;
  margin-bottom: 5px;
}

.card-container-business > .container-business .customer {
  font-size: 0.6rem;
}

.card-container-business > .container-business .location {
  font-size: 0.55rem;
}

.card-container-business > .container-business .owner {
  margin-top: 5px;
  opacity: 0.8;
  font-size: 0.6rem;
}

.card-container-business > .container-business .budget {
  font-size: 0.6rem;
  font-weight: bold;
}

@media (max-width: 1300px) {
  .card-container-business > .container-business {
    font-size: 0.5rem;
  }
  .card-container-business > .container-business .location {
    font-size: 0.45rem;
  }
  .card-container-business > .container-business .owner {
    font-size: 0.45rem;
  }
}.open-modal {
  background-color: #c0ff00;
  color: black;
}

.open-modal:hover {
  background-color: #b9e868;
  border-color: black;
  border-width: 1px;
}

.container-step {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  margin: 0.1em;
  border-radius: 5px;
  background-color: #eee;
  min-width: 120px;
}

.header-step {
  background-color: #d3d3d3;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.title-step {
  text-align: center;
  font-size: 0.8rem;
  font-weight: bold;
  color: #000;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.business-step {
  text-align: center;
  font-size: 0.7rem;
  color: #000;
  opacity: 0.8;
  margin-bottom: -4px;
  margin-top: 2px;
}

.business-step-coin {
  margin-bottom: -4px;
  margin-top: 2px;
}

.business-step-total-bold {
  font-weight: bold;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
}

.budget-step {
  text-align: center;
  font-size: 0.75rem;
  color: #000;
  opacity: 0.8;
}

.list-steps {
  padding: 8px;
  transition: background-color 0.5s ease;
  flex-grow: 1;
}

.dragging-over-step {
  background-color: #c0c0c0;
}

@media (max-width: 1400px) {
  .title-step {
    font-size: 0.65rem;
  }
  .business-step {
    font-size: 0.55rem;
  }
  .budget-step {
    font-size: 0.6rem;
  }
}.text-info-rules {
  margin-bottom: 25px;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
}

.error-cnpj-popup-activity {
  color: red;
  font-weight: bold;
}

.btn-save-required-url {
  margin: 15px 0px 15px 0px;
  float: right;
}

.container-div-form {
  position: relative;
  border: 1px solid rgba(87, 83, 83, 0.3);
  border-radius: 5px;
  margin-top: 10px;
}
.container-div-form .title {
  position: absolute;
  top: -10px;
  left: 5%;
  padding: 0 5px;
  background: white;
  font-weight: 500;
  font-size: 12px;
  color: black;
}
.container-div-form .content {
  padding: 10px;
}.container-div-form .container-more-receivers {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  gap: 5px;
  margin-top: 15px;
}
.container-div-form .container-more-receivers .content-email {
  padding: 5px;
  background-color: #c0c0c0;
  font-weight: bold;
  font-size: 10px;
  border-radius: 5px;
  display: flex;
  gap: 5px;
}
.container-div-form .container-more-receivers .delete-email {
  color: red;
  font-weight: bold;
}
.container-div-form .container-more-receivers .delete-email:hover {
  cursor: pointer;
}#popupteste {
  z-index: 15400 !important;
}

.no-permission-business {
  display: flex;
  margin-top: 15px;
  justify-content: center;
}

.page-sales-funnel {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 10px;
}
.page-sales-funnel input:not([type]) {
  border-bottom: 0 !important;
  margin: 0 !important;
}
.page-sales-funnel input[type=text] {
  border-bottom: 0 !important;
  margin: 0 !important;
}
.page-sales-funnel .row-filters-salesfunnel {
  align-items: center;
  display: flex;
  gap: 15px;
}
.page-sales-funnel .input-field {
  display: flex;
  flex: 1;
  align-items: center;
}
.page-sales-funnel .input-field svg:hover {
  cursor: pointer;
  opacity: 0.3;
}
.page-sales-funnel .icon-filter-business {
  margin: 0;
  font-size: 24px;
}
.page-sales-funnel .options-sales-funnel {
  max-width: 750px;
  display: flex;
  gap: 15px;
}
.page-sales-funnel .icons-sales-funnel {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-sales-funnel .row {
  margin-bottom: 0;
}

.page-sales-funnel .row .col {
  padding: 0;
}

.page-sales-funnel .container-sales-funnel {
  display: flex;
}

.page-sales-funnel .row-filter {
  margin-bottom: 0;
  width: 100%;
}

.page-sales-funnel .row-filter .text-input-search {
  margin-top: 0.5em;
  padding-left: 0.5em;
}

.page-sales-funnel .row-filter .icon-search {
  margin-top: 1em;
  cursor: pointer;
}

.page-sales-funnel .row-filter .icon-search:hover {
  opacity: 0.5;
}

.page-sales-funnel .icons-sales-funnel > svg:hover {
  cursor: pointer;
  opacity: 0.5;
}

.page-sales-funnel .select-type-sales-funnel {
  position: relative;
  cursor: pointer;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #c0c0c0;
  outline: none;
  height: 3rem;
  line-height: 3rem;
  font-size: 16px;
  margin: 0.5em 0 8px 0;
  padding: 0;
  display: block;
  flex: 1;
}

.page-sales-funnel .select-type-sales-funnel .option-type-sales-funnel {
  color: #000;
  background-color: #eee;
}

.page-sales-funnel .select-type-sales-funnel .option-type-sales-funnel:disabled {
  color: #c0c0c0;
}

@media (max-width: 800px) {
  .page-sales-funnel {
    font-size: 0.75rem;
  }
  .page-sales-funnel .row-filter .text-input-search input {
    font-size: 0.75rem;
  }
  .page-sales-funnel .row-filter .text-input-search label {
    font-size: 0.75rem;
  }
  .page-sales-funnel .select-type-sales-funnel {
    font-size: 0.75rem;
    margin: 0 0 8px 0;
  }
  .row-filters-salesfunnel {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  .icons-sales-funnel {
    justify-content: end;
    display: flex;
    align-items: center;
  }
}#customer-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 0 15px;
}

#customer-info > #customer-information {
  padding: 5px 0 0 20px;
}

#customer-info .customer-name {
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 10px;
}

#customer-info .customer-pre-registration {
  opacity: 0.3;
  right: 20px;
  position: absolute;
}

#customer-info #textarea-observation {
  flex: 1;
  resize: vertical;
  min-height: 50px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 3px;
}

#customer-info .add-value {
  color: #000 !important;
  opacity: 0.5;
  font-size: 0.9rem;
}

#customer-info .add-value:hover {
  opacity: 1;
}

@media (max-width: 650px) {
  #customer-info .customer-name {
    font-size: 1rem;
    margin-bottom: 5px;
  }
}#customer-address {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

#customer-address #information {
  padding: 5px 0 10px 20px;
}

#customer-address > #title-box {
  display: flex;
  flex-direction: row;
  align-items: center;
}

#customer-address > #title-box > p {
  margin: 0 10px;
  flex: 1;
  font-size: 14px;
  color: #000;
  opacity: 0.8;
  font-weight: bold;
}

#customer-address #field-city-ex {
  margin-top: 10px;
  margin-left: 30px;
  width: 97%;
}

#btn-edit-adress-customer {
  cursor: pointer;
}

#btn-edit-adress-customer:hover {
  color: #b9e868;
}

#customer-address .add-value {
  color: #000 !important;
  opacity: 0.5;
  font-size: 0.9rem;
}

#customer-address .add-value:hover {
  opacity: 1;
}

#customer-address #row-location {
  display: flex;
  align-items: center;
}

#edit-field-customer-location-lat-lon > .custom-body-map {
  margin-bottom: 45px;
}

#select-location-map {
  position: relative;
  height: 340px;
  flex: 1;
}

@media (max-width: 650px) {
  #customer-address .customer-name {
    font-size: 1rem;
    margin-bottom: 5px;
  }
  #edit-field-customer-location-lat-lon > .custom-body-map {
    margin-bottom: 35px;
  }
}#modal-customer-contact .form-edit-contact-customer {
  padding: 15px 15px 5px 15px;
}

#modal-customer-contact .form-edit-contact-customer .row {
  padding: 0;
  margin: 20px 10px 0 10px;
}

#modal-customer-contact .form-edit-contact-customer input {
  font-size: 1rem;
}

.form-edit-contact-customer .btn-save {
  width: 100%;
  margin-top: 10px !important;
}

#modal-customer-contact .form-edit-contact-customer .icon-remove-contact {
  margin-left: 5px;
  font-size: 1.2rem;
  color: #000;
  cursor: pointer;
}

#modal-customer-contact .form-edit-contact-customer .icon-remove-contact:hover {
  color: #f44336;
}

#icon-modal-customer-contact {
  margin-left: 5px;
  font-size: 1.2rem;
  color: #000;
  cursor: pointer;
}

#icon-modal-customer-contact:hover {
  color: #c0ff00;
}

@media (max-width: 650px) {
  #modal-customer-contact .form-edit-contact-customer {
    font-size: 0.75rem;
  }
  #modal-customer-contact .form-edit-contact-customer input {
    font-size: 0.75rem;
  }
}#customer-contact {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

#customer-contact #information {
  padding: 10px;
}

#customer-contact > #title-box {
  display: flex;
  flex-direction: row;
  align-items: center;
}

#customer-contact > #title-box > p {
  margin: 0 10px;
  flex: 1;
  font-size: 14px;
  color: #000;
  opacity: 0.8;
  font-weight: bold;
}

@media (max-width: 650px) {
  #customer-contact > #title-box > p {
    font-size: 1.2rem;
    margin: 0 10px;
    flex: 1;
  }
}.customer-page .row {
  margin-bottom: 0;
}

.customer-page .row .col {
  padding: 0;
}

.customer-page .box-content {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
}

.customer-page .box-content.top0 {
  margin-top: 0;
}

.customer-page .box-content span {
  color: #000;
}

.customer-page .box-content hr {
  opacity: 0.3;
}

.customer-page .btn-back {
  display: flex;
  align-items: center;
  margin: 0 10px;
  opacity: 0.5;
  text-decoration: none;
  color: #000;
}

.customer-page .btn-back:hover {
  cursor: pointer;
  opacity: 1;
}

.customer-page .btn-back span:hover {
  text-decoration: underline;
}

.customer-page .btn-alert {
  font-size: 1rem;
}

.customer-page .btn-alert-remove {
  background-color: #ff9800;
}

.customer-page .btn-alert-cancel {
  background-color: #c0c0c0 !important;
  color: #000;
}

@media (max-width: 650px) {
  .customer-page {
    font-size: 0.75rem;
  }
  .customer-page .box-content {
    margin: 5px 10px;
    padding: 5px;
  }
  .customer-page .btn-alert {
    font-size: 0.75rem;
  }
}#datagrid-monthly-sales .dx-texteditor-input {
  margin: 0 0 0 30px !important;
  height: 35px !important;
}
#datagrid-monthly-sales .dx-datagrid-header-panel {
  padding-right: 0 !important;
}

#tooltip-popup-monthly-sales {
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: flex-start;
  font-size: 14px;
}
#tooltip-popup-monthly-sales svg {
  font-size: 16px;
  color: rgb(0, 143, 0);
}

#show-tooltip-monthly-sales svg {
  margin: 0 5px 0 0;
  font-size: 18px !important;
  color: rgb(0, 143, 0);
}

@media (max-width: 480px) {
  .mobile-template-list-monthly-sale {
    display: flex;
    flex-direction: column;
    padding: 10px;
  }
  .mobile-template-list-monthly-sale .text-header {
    font-size: 18px;
    justify-content: center;
    align-items: center;
  }
}#tooltip-popup-budget-gain {
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: flex-start;
  font-size: 14px;
}
#tooltip-popup-budget-gain svg {
  font-size: 16px;
  color: rgb(0, 143, 0);
}

#show-tooltip-budget-gain svg {
  margin: 0 5px 0 0;
  font-size: 18px !important;
  color: rgb(0, 143, 0);
}

@media (max-width: 480px) {
  .mobile-template-list-budget-gain {
    display: flex;
    flex-direction: column;
    padding: 10px;
  }
  .mobile-template-list-budget-gain .text-header {
    font-size: 18px;
    justify-content: center;
    align-items: center;
  }
}body {
  overflow: hidden !important;
}

#crm-analyze-business {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-left: 15px !important;
}
#crm-analyze-business .label-charts-number {
  font-weight: 400;
}
#crm-analyze-business .body-summary {
  min-width: 15vw;
  margin-left: 10px;
  margin-right: 15px;
}
#crm-analyze-business .title-header {
  margin: 0;
  padding: 10px;
  display: flex;
  justify-content: center;
}
#crm-analyze-business .row-target-charts {
  display: flex;
  flex-direction: row;
}
#crm-analyze-business .row-group-chart {
  display: flex;
  flex-direction: row;
}
#crm-analyze-business .row-line-chart {
  display: flex;
  flex-direction: row;
}
#crm-analyze-business .values-column {
  display: flex;
  flex-direction: column;
}
#crm-analyze-business .values-column .values-row {
  display: flex;
  flex-direction: row;
}

.datagrid-dashboard-business-budget {
  font-weight: 500;
  color: #a0a0a0;
}

@media (max-width: 480px) {
  #crm-analyze-business {
    flex-direction: column;
    padding-left: 10px !important;
  }
  #crm-analyze-business .row-target-charts {
    flex-direction: column;
  }
  #crm-analyze-business .label-charts-number {
    display: none !important;
  }
  #crm-analyze-business .body-summary {
    margin-top: 0 !important;
    width: 84vw;
  }
  #crm-analyze-business .body-summary .row-summary {
    margin-top: 30px;
  }
  #crm-analyze-business .row-line-chart {
    flex-direction: column;
  }
  #crm-analyze-business .row-line-chart #summary-budget-aux {
    display: flex;
    flex-direction: row;
  }
}.drawer {
  height: 100dvh !important;
}
.drawer .header-drawer {
  display: flex;
  flex-direction: row;
  gap: 5px;
  padding: 10px;
  align-items: center;
  border-bottom: 1px solid rgb(231, 231, 231);
  box-shadow: 0 8px 6px -8px rgba(0, 0, 0, 0.2);
}
.drawer .header-drawer svg {
  display: flex;
  justify-content: center;
  align-items: center;
}
.drawer .header-drawer .title-drawer {
  max-width: 310px;
  height: 25px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer .header-drawer .close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px;
  cursor: pointer;
}
.drawer .header-drawer .close-button:hover {
  transform: scale(1.3);
  background-color: rgb(240, 240, 240);
}
@media (max-width: 650px) {
  .drawer .close-button {
    width: 2em;
    height: 2em;
  }
  .drawer .close-button svg {
    font-size: 1.3em;
  }
  .drawer .close-button:active {
    transform: scale(1.2);
    background-color: rgb(240, 240, 240);
  }
}#page-crm {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
}

@media (max-width: 650px) {
  #page-crm .tab-item-link {
    font-size: 0.75rem;
  }
}.htmlEditorEmail {
  border: 2px solid #c0c0c0;
  text-align: start !important;
}

.container-item-email {
  flex-direction: "row";
  display: flex;
  padding: 5px 10px 5px 10px;
  background-color: #f7f4f4;
  border-radius: 10px;
}
.container-item-email .img-employee-email {
  margin-right: 10px;
  max-width: 40px;
  max-height: 40px;
  border-radius: 25px;
}
.container-item-email .without-image {
  background-color: #4caf50;
  font-size: 18px;
  margin-right: 10px;
  font-weight: bold;
  width: 40px;
  height: 40px;
  border-radius: 25px;
  align-items: center;
  display: flex;
  color: whiteleo;
  justify-content: center;
}
.container-item-email .email {
  font-style: italic;
}

#container-emails {
  background-color: white;
  padding: 10px;
}
#container-emails #msg-erro {
  color: #f44336;
  font-size: 0.9rem;
  margin-left: 0;
  margin-top: 0px;
}
#container-emails .container-list-email-selected {
  display: flex;
  flex-direction: row;
  gap: 5px;
  flex-wrap: wrap !important;
}
#container-emails .container-list-email-selected .item-list-email-selected {
  justify-content: center;
  align-items: center;
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
  background-color: #c0c0c0;
  gap: 10px;
  display: flex;
  flex-direction: row;
}
#container-emails .container-list-email-selected .delete-email {
  font-size: 16px;
  font-weight: bold;
  margin-right: 5px;
  right: 10px;
}
#container-emails .container-list-email-selected .delete-email:hover {
  cursor: pointer;
}
#container-emails .inputs {
  margin-bottom: 10px;
}
#container-emails .label-receivers {
  font-family: "Helvetica Neue", "Segoe UI", helvetica, verdana, sans-serif;
  color: #c0c0c0;
  font-size: 14px;
  text-align: left;
}
#container-emails .container-variables {
  margin-top: 15px;
  margin-bottom: 15px;
}
#container-emails .variables {
  cursor: pointer;
  padding: 10px;
  background-color: #c0c0c0;
  margin-right: 10px;
  margin-top: 10px;
  border-radius: 5px;
}
#container-emails .variables:hover {
  opacity: 0.6;
}
#container-emails .label-variables {
  margin-bottom: 10px;
  color: #c0c0c0;
}.container-step3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.container-step3 .content-step3 {
  width: 100%;
  padding: 10px;
  max-width: 720px;
}
.container-step3 .content-step3 #title-config-step3 {
  text-align: center;
}
.container-step3 .content-step3 .row-step {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  justify-content: center;
}
.container-step3 .content-step3 .container-div-form {
  position: relative;
  border: 1px solid rgba(87, 83, 83, 0.3);
  border-radius: 5px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 5px 20px 5px;
}
.container-step3 .content-step3 .container-div-form .title {
  position: absolute;
  top: -10px;
  left: 5%;
  padding: 0 5px;
  background: #eee;
  font-weight: 500;
  font-size: 12px;
  color: black;
}
.container-step3 .content-step3 .btn-save {
  width: 120px;
  float: right;
  margin-top: 10px;
}
@media (max-width: 650px) {
  .container-step3 .content-step3 .btn-save {
    width: 100% !important;
  }
}.container-sales-with-steps {
  padding: 10px;
  align-items: center;
  text-align: center;
  display: flex;
  gap: 30px;
  justify-content: center;
}
.container-sales-with-steps .row-step {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  align-items: center;
}
.container-sales-with-steps .row-step:first-child {
  margin: 0;
}
.container-sales-with-steps .arrow-step {
  margin: 10px 0 10px 0;
}

@media (max-width: 650px) {
  .container-sales-with-steps {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}.hover-icon-classification:hover {
  scale: 1.1;
  cursor: pointer;
}

.a-icon {
  color: green;
}

.b-icon {
  color: #ff9800;
}

.c-icon {
  color: #f44336;
}

.classification-popover-title {
  font-size: 1rem;
  text-align: center;
  margin-bottom: 10px;
  font-weight: 500;
}

.classification-popover-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

.classification-popover-icons {
  display: flex;
  gap: 10px;
  justify-content: center;
}.customer-flex-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.customer-text {
  margin: 0;
  font-size: 0.8rem;
}#container-more-options-contact-portfolio {
  padding: 5px;
}
#container-more-options-contact-portfolio .popover-more-options-header {
  text-align: center;
  font-weight: 500;
  padding: 5px;
}
#container-more-options-contact-portfolio .buttons-more-options {
  display: flex;
  flex-direction: column;
  gap: 5px;
}.portfolio-business-popover-content h6 {
  text-align: center;
  font-weight: bold;
}
.portfolio-business-popover-content .popover-business-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.portfolio-business-popover-content .popover-business-table th,
.portfolio-business-popover-content .popover-business-table td {
  padding: 4px 8px;
  text-align: left;
  font-size: 13px;
  white-space: normal;
  word-break: break-word;
}
.portfolio-business-popover-content .popover-business-table th {
  background: #f5f7fa;
  font-weight: 600;
}
.portfolio-business-popover-content .popover-business-table tr:nth-child(even) {
  background: #eee;
}
.portfolio-business-popover-content .popover-business-table tr:nth-child(odd) {
  background: #fff;
}
.portfolio-business-popover-content .popover-business-table .popover-business-link {
  color: #1976d2;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.portfolio-business-popover-content .popover-business-table .popover-business-link:hover {
  color: #125ea2;
}.portfolio-business-popover-content h6 {
  text-align: center;
  font-weight: bold;
}
.portfolio-business-popover-content .popover-business-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.portfolio-business-popover-content .popover-business-table th,
.portfolio-business-popover-content .popover-business-table td {
  padding: 4px 8px;
  text-align: left;
  font-size: 13px;
  white-space: normal;
  word-break: break-word;
}
.portfolio-business-popover-content .popover-business-table th {
  background: #f5f7fa;
  font-weight: 600;
}
.portfolio-business-popover-content .popover-business-table tr:nth-child(even) {
  background: #eee;
}
.portfolio-business-popover-content .popover-business-table tr:nth-child(odd) {
  background: #fff;
}
.portfolio-business-popover-content .popover-business-table .popover-business-link {
  color: #1976d2;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.portfolio-business-popover-content .popover-business-table .popover-business-link:hover {
  color: #125ea2;
}.contact-container {
  display: flex;
  gap: 8px;
  align-items: center;
}
.contact-container .contact-name {
  margin: 0;
}
.contact-container .icon-badge-wrapper {
  position: relative;
  margin-right: 3px;
  display: inline-flex;
  align-items: center;
}
.contact-container .icon-business {
  font-size: 16px;
  margin-right: 5px;
}
.contact-container .icon-activity {
  font-size: 16px;
  margin-right: 5px;
}
.contact-container .badge-icon {
  position: absolute;
  top: -8px;
  right: -5px;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  padding: 0 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.contact-container .badge-business {
  background: #1976d2;
}
.contact-container .badge-activity {
  background: #43a047;
}
.contact-container svg {
  cursor: pointer;
}

.contact-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.contact-name {
  flex: 1 1 0;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  font-weight: 500;
}

.contact-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}#title-new-seller {
  text-align: center;
  font-weight: 500;
  font-size: 0.8rem;
  margin-bottom: 5px;
}

.collumn-seller-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}.seller-flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.seller-flex-row .row-options {
  display: flex;
  gap: 8px;
}#gridPortfolioRegion .title-maps-production {
  font-size: 1rem;
}#container-popup-exclusion-seller-portfolio {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
#container-popup-exclusion-seller-portfolio .text-content #title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 5px;
}
#container-popup-exclusion-seller-portfolio .text-content #subtitle {
  font-style: italic;
}
#container-popup-exclusion-seller-portfolio .popup-actions {
  display: flex;
  flex: 1;
  justify-content: space-evenly;
}.collumn-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}#container-popup-delete-contact {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
#container-popup-delete-contact .text-content #title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 5px;
}
#container-popup-delete-contact .text-content #subtitle {
  font-style: italic;
}
#container-popup-delete-contact .popup-actions {
  display: flex;
  flex: 1;
  justify-content: space-evenly;
}.container-activity-history {
  padding: 10px;
}

.container-card {
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.container-card .description {
  max-width: 85%;
  word-wrap: break-word;
}
.container-card .activity-name {
  word-wrap: break-word;
  max-width: 80%;
}
.container-card .card-status {
  border-radius: 20px;
  padding: 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: white;
}
.container-card .card-pending {
  background-color: #ff9800;
}
.container-card .card-done {
  background-color: #4caf50;
}
.container-card .date {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 0.8rem;
  color: #c0c0c0;
}

.activity-type {
  background-color: #fff;
  border-radius: 5px;
  font-weight: 600;
  border: 1px solid black;
  padding: 0.3rem;
  width: max-content;
  text-align: center;
}

.done {
  border-color: #4caf50;
}

.in-progress {
  border-color: #ff9800;
}

.grid-template {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.3rem;
}

.flex-space-between {
  display: flex;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  gap: 5px;
  align-items: center;
}

@media screen and (max-width: 640px) {
  .grid-template {
    grid-template-columns: repeat(1, 275px);
  }
}.region-page {
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 10px;
  padding: 10px;
  justify-content: flex-start;
  align-items: center;
}

@media (max-width: 650px) {
  .region-page {
    padding: 5px;
  }
  .region-page #gridPortfolioRegion td {
    font-size: 0.8rem;
    padding: 8px;
    white-space: break-spaces;
  }
}.popup-exclusion-action {
  text-align: center;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.popup-exclusion-action .warning-icon {
  font-size: 60px;
  color: orange;
}
.popup-exclusion-action .message {
  margin-top: 10px;
  font-size: 1rem;
}
.popup-exclusion-action .button-group {
  margin-top: 20px;
}.regions-page {
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0 10px;
  padding: 10px;
  justify-content: flex-start;
  align-items: center;
}#gridContainerPortfolios .title {
  font-size: 1.2rem;
}#container-new-portifolio {
  padding: 10px;
}
#container-new-portifolio .form-new-portifolio .button-group-portifolio {
  display: flex;
  margin-top: 10px;
  gap: 5px;
  justify-content: flex-end;
  width: 100%;
}#container-portifolio {
  padding: 10px;
  background-color: #fff;
  height: calc(100vh - 90px);
}.bagde-notification-item {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #f44336;
  color: #fff;
  border-radius: 50%;
  height: 18px;
  min-width: 18px;
  padding: 2px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  z-index: 1;
}#page-employee-portal {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-employee-portal > .row .col {
  padding: 0;
}
#page-employee-portal div.box-item {
  background: #fff;
  display: flex;
  align-items: center;
  margin: 5px;
  text-align: center;
  height: 75px;
  border: 3px solid #fff;
  border-left: 10px solid #c0ff00;
  padding: 0 5px 0 10px;
  border-radius: 3px;
  font-size: 16px;
  color: #000;
}
#page-employee-portal div.box-item svg {
  margin-right: 10px;
  font-size: 2rem;
  color: #c0c0c0;
}
#page-employee-portal div.box-item:hover {
  border: 3px solid #c0ff00;
  border-left: 10px solid #c0ff00;
}
#page-employee-portal div.box-item .title {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}
#page-employee-portal div.box-item .title > span {
  color: #000;
}

.icon-message svg {
  height: 4rem;
  width: 8rem;
  color: red;
}

.swal-dialog {
  margin-top: 10px;
}

@media (max-width: 650px) {
  #page-employee-portal .tab-item-link {
    font-size: 0.75rem;
  }
}div.payroll-health-plan-item-appointment {
  background-color: #fff;
  display: flex;
  flex: 1;
  padding-left: 10px;
}
div.payroll-health-plan-item-appointment > span {
  display: flex;
  flex: 1;
  padding-right: 3px;
}
div.payroll-health-plan-item-appointment > span.provider-name {
  flex: 1;
}
div.payroll-health-plan-item-appointment > span.appointment-date {
  max-width: 60px;
  display: flex;
  justify-content: center;
}
div.payroll-health-plan-item-appointment > span.value {
  display: flex;
  justify-content: flex-end;
  max-width: 50px;
  font-weight: bold;
  overflow: hidden;
}div.payroll-health-plan-detail {
  display: flex;
  flex-direction: column;
  background-color: #eee;
  border-radius: 3px;
  margin: 3px 3px 3px 0px;
}
div.payroll-health-plan-detail div.user {
  padding: 0 5px;
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #c0c0c0;
}
div.payroll-health-plan-detail div.user:hover {
  background-color: #c0c0c0;
  cursor: pointer;
}
div.payroll-health-plan-detail ul {
  border: 1px solid #eee;
}@media print {
  @page {
    size: landscape;
  }

  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  table {
    page-break-inside: auto;
  }

  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
}
#payroll {
  display: flex;
  flex: 1;
  flex-direction: column;
  max-width: 800px;
  border: 2px solid #c0c0c0;
  font-size: 0.75rem;
  margin-top: 15px;
}
#payroll:first-child {
  margin-top: 0;
}
#payroll span.dark-background {
  background-color: #c0c0c0;
}
#payroll span.bold {
  font-weight: bold;
}
#payroll > div.payroll-header-company {
  display: flex;
  flex: 1;
}
#payroll > div.payroll-header-company span {
  padding-left: 0.5rem;
}
#payroll > div.payroll-header-company > div {
  display: flex;
  flex-direction: column;
  flex: 1;
}
#payroll > div.payroll-header-company > div > div {
  border: 1px solid #eee;
}
#payroll > div.payroll-header-company > div > div span:last-child {
  margin-left: 1rem;
}
#payroll > div.payroll-header-employee {
  display: flex;
  flex: 1;
}
#payroll > div.payroll-header-employee span {
  padding-left: 0.5rem;
}
#payroll > div.payroll-header-employee > div {
  display: flex;
  flex-direction: column;
  flex: 1;
  border: 1px solid #eee;
}
#payroll > div.payroll-header-employee > div:first-child {
  max-width: 150px;
}
#payroll > div.payroll-header-employee > div > div {
  display: flex;
  flex: 1;
  flex-direction: row;
}
#payroll > div.payroll-header-employee > div > div > div {
  border-left: 1px solid #eee;
  margin-right: 0.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
}
#payroll > div.payroll-header-employee > div > div > div:first-child {
  border-left: none;
}
#payroll > div.payroll-events table {
  border: 1px solid #eee;
  border-collapse: separate;
}
#payroll > div.payroll-events table thead tr > th {
  border: 1px solid #eee;
  padding-top: 1rem;
  font-size: 0.75rem;
}
#payroll > div.payroll-events table thead tr > th.header-event {
  width: 55px;
}
#payroll > div.payroll-events table thead tr > th.header-reference, #payroll > div.payroll-events table thead tr > th.header-earning, #payroll > div.payroll-events table thead tr > th.header-discount {
  width: 120px;
  text-align: right;
  padding-right: 1rem;
}
#payroll > div.payroll-events table tbody tr {
  border-bottom: none;
  font-size: 0.75rem;
}
#payroll > div.payroll-events table tbody tr > td {
  border-right: 1px solid #eee;
  line-height: 1rem !important;
  padding: 0.15rem 0;
}
#payroll > div.payroll-events table tbody tr > td.column-event, #payroll > div.payroll-events table tbody tr > td.column-reference, #payroll > div.payroll-events table tbody tr > td.column-earning, #payroll > div.payroll-events table tbody tr > td.column-discount {
  text-align: right;
  padding-right: 0.5rem;
}
#payroll > div.payroll-events table tbody tr > td.column-event.detail-health-plan, #payroll > div.payroll-events table tbody tr > td.column-reference.detail-health-plan, #payroll > div.payroll-events table tbody tr > td.column-earning.detail-health-plan, #payroll > div.payroll-events table tbody tr > td.column-discount.detail-health-plan {
  vertical-align: text-top;
}
#payroll > div.payroll-events table tbody tr > td.column-event-descripton {
  padding-left: 0.5rem;
}
#payroll > div.payroll-events table tbody tr > td.column-event-descripton > div.column-event-health-plan {
  display: flex;
  flex-direction: column;
}
#payroll > div.payroll-events table tbody tr > td.column-event-descripton > div.column-event-health-plan > div.column-event-health-plan-line {
  display: flex;
}
#payroll > div.payroll-events table tbody tr > td.column-event-descripton > div.column-event-health-plan svg {
  background-color: #eee;
  border-radius: 3px;
  margin: 0 5px;
  font-size: 16px;
}
#payroll > div.payroll-events table tbody tr > td.column-event-descripton > div.column-event-health-plan svg:hover {
  cursor: pointer;
  background-color: #c0c0c0;
}
#payroll > div.payroll-totalizers {
  border: 1px solid #eee;
  padding-left: 0.5rem;
}
#payroll > div.payroll-totalizers > div.payroll-totalizers-line {
  display: flex;
  flex-direction: row;
  flex: 1;
}
#payroll > div.payroll-totalizers > div.payroll-totalizers-line > div {
  font-weight: bold;
  width: 120px;
  text-align: right;
  line-height: 2.5rem;
  border: 1px solid #eee;
}
#payroll > div.payroll-totalizers > div.payroll-totalizers-line > div span {
  padding-right: 0.5rem;
}
#payroll > div.payroll-totalizers > div.payroll-totalizers-line > div.payroll-totalizers-description {
  flex: 1;
  text-align: left;
  font-weight: normal;
  border: none;
  border-right: 1px solid #eee;
}
#payroll > div.payroll-calculation-basis {
  display: flex;
  flex: 1;
  flex-direction: row;
  border: 1px solid #eee;
}
#payroll > div.payroll-calculation-basis > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: 1px solid #eee;
  text-align: right;
  padding-right: 0.5rem;
}
#payroll > div.payroll-calculation-basis > div > span {
  font-size: 0.75rem;
}
#payroll > div.payroll-calculation-basis > div > span.bold {
  font-weight: bold;
}
#payroll > div.payroll-calculation-basis > div.fixed-size {
  max-width: 120px;
}
#payroll > div.payroll-calculation-basis > div.irrf-details {
  display: flex;
  flex: 1;
  flex-direction: row;
}
#payroll > div.payroll-calculation-basis > div.irrf-details > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: 0.75rem;
}
#payroll > div.payroll-calculation-basis > div.irrf-details > div:last-child {
  max-width: 40px;
}
#payroll > div.payroll-payment-date {
  padding-top: 15px;
}
#payroll > div.payroll-payment-date span {
  margin: 0 10px;
}
#payroll > div.payroll-payment-date span:last-child {
  margin-left: 50px;
}

#payroll-on-mobile {
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: 0.8rem;
  margin-bottom: 5px;
}
#payroll-on-mobile > div.payroll-header {
  color: #c0c0c0;
  background-color: #eee;
  display: flex;
  flex: 1;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  font-size: 1rem;
  border: 1px solid #fff;
  padding: 5px;
}
#payroll-on-mobile > div.payroll-header span:last-child {
  font-size: 1.75rem;
  margin-right: 10px;
}
#payroll-on-mobile > div.expansive-item {
  border: 1px solid #fff;
  background-color: #eee;
  min-height: 50px;
  display: flex;
  align-items: center;
  flex-direction: row;
  padding: 5px;
}
#payroll-on-mobile > div.expansive-item > div {
  display: flex;
  flex: 1;
}
#payroll-on-mobile > div.expansive-item > div span {
  flex: 1;
}
#payroll-on-mobile > div.expansive-item > div span.title {
  color: #c0c0c0;
  font-weight: bold;
  font-size: 1rem;
}
#payroll-on-mobile > div.expansive-item > div span.detail {
  color: #c0c0c0;
  font-weight: bold;
  font-size: 1.2rem;
  text-align: right;
}
#payroll-on-mobile > div.expansive-item svg {
  font-size: 1.8rem;
  color: #c0c0c0;
  margin-left: 10px;
}
#payroll-on-mobile > div.detail-item {
  display: none;
  background-color: #eee;
}
#payroll-on-mobile > div.detail-item.visible {
  display: block;
}
#payroll-on-mobile > div.detail-item > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: #fff;
  border-radius: 0 0 5px 5px;
  padding: 5px 10px;
  margin: 0 5px;
}
#payroll-on-mobile > div.detail-item > div ul {
  display: flex;
  flex-direction: column;
  flex: 1;
}
#payroll-on-mobile > div.detail-item > div ul li {
  display: flex;
  flex-direction: row;
  flex: 1;
}
#payroll-on-mobile > div.detail-item > div ul li > span:first-child {
  display: flex;
  flex: 2;
}
#payroll-on-mobile > div.detail-item > div ul li:last-child {
  display: flex;
  flex: 1;
  justify-content: flex-end;
}
#payroll-on-mobile > div.detail-item > div div.column-event-health-plan {
  display: flex;
  flex-direction: column;
}
#payroll-on-mobile > div.detail-item > div div.column-event-health-plan > div.column-event-health-plan-line {
  display: flex;
}
#payroll-on-mobile > div.detail-item > div div.column-event-health-plan payroll-events svg {
  background-color: #eee;
  border-radius: 3px;
  margin: 0 5px;
  font-size: 16px;
}
#payroll-on-mobile > div.detail-item:last-child {
  border-bottom: 5px solid #eee;
}
#payroll-on-mobile > div.payroll-company {
  border-radius: 5px 5px 0 0;
}
#payroll-on-mobile > div.payroll-company.expansive-item span.title {
  font-size: 0.8rem;
  font-weight: bold;
  color: #000;
}
#payroll-on-mobile > div.payroll-employee.expansive-item span.title {
  font-size: 0.8rem;
  font-weight: bold;
  color: #000;
}
#payroll-on-mobile > div.payroll-earnings.expansive-item span.title {
  margin: auto 0;
}
#payroll-on-mobile > div.payroll-earnings.expansive-item span.detail {
  color: #01579b;
}
#payroll-on-mobile > div.payroll-discounts.expansive-item span.title {
  margin: auto 0;
}
#payroll-on-mobile > div.payroll-discounts.expansive-item span.detail {
  color: #f44336;
}
#payroll-on-mobile > div.payroll-total.expansive-item span.title {
  margin: auto 0;
}
#payroll-on-mobile > div.payroll-total.expansive-item span.detail {
  color: #4caf50;
}.last-month-unsigned-message {
  max-width: 450px !important;
  width: 90% !important;
}
.last-month-unsigned-message .btn-ok {
  margin-top: 10px;
  background-color: #f59e0b !important;
  box-shadow: none !important;
  color: white !important;
  font-weight: bold;
  padding: 8px 20px;
  border-radius: 4px;
}
.last-month-unsigned-message .btn-ok:hover {
  background-color: #d97706 !important;
}

@media print {
  @page {
    size: auto;
  }
  body {
    margin: 10mm 12mm;
  }
  body span {
    font-size: 0.65rem !important;
  }
  body td {
    font-size: 0.65rem;
  }
}#vacation {
  display: flex;
  flex: 1;
  flex-direction: column;
  max-width: 800px;
  /* border: 2px solid $primaryLight; */
  font-size: 0.75rem;
  margin-top: 15px;
  /* font-family: Aeonik-Regular,Aeonik-bold,Neue-Machina,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif; */
}
#vacation:first-child {
  margin-top: 0;
}
#vacation span.dark-background {
  background-color: #c0c0c0;
}
#vacation span.bold {
  font-weight: bold;
}
#vacation > div.vacation-header-company {
  display: flex;
  flex: 1;
}
#vacation > div.vacation-header-company span {
  padding-left: 0.5rem;
}
#vacation > div.vacation-header-company > div {
  display: flex;
  flex-direction: column;
  flex: 1;
}
#vacation > div.vacation-header-company > div > div {
  border: 1px solid #eee;
}
#vacation > div.vacation-header-company > div > div span:last-child {
  margin-left: 1rem;
}
#vacation > div.vacation-header-employee {
  display: flex;
  flex: 1;
  font-size: larger;
  color: #ffffff;
  background-color: #ffffff;
  background: #ffffff;
  padding-top: 20px;
  padding-bottom: 20px;
  align-items: left;
  justify-content: left;
  min-width: none;
}
#vacation > div.vacation-header-employee > div.logo {
  align-items: center;
  justify-content: center;
  min-width: 250px;
  max-width: 20px;
}
#vacation > div.vacation-header-employee > div.logo > img {
  min-width: 250px;
  min-height: 20px;
  max-width: 250px;
  max-height: 20px;
}
#vacation > div.vacation-header-employee > div {
  display: flex;
  flex-direction: column;
  flex: 1;
}
#vacation > div.vacation-header-employee > div:first-child {
  max-width: 150px;
}
#vacation > div.vacation-header-employee > div > div {
  display: flex;
  flex: 1;
  flex-direction: row;
}
#vacation > div.vacation-header-employee > div > div > div {
  border-left: 1px solid #eee;
  margin-right: 0.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
}
#vacation > div.vacation-header-employee > div > div > div:first-child {
  border-left: none;
}
#vacation > div.vacation-events table {
  border: 1px solid #eee;
  border-collapse: separate;
}
#vacation > div.vacation-events table thead tr > th {
  border: 1px solid #eee;
  padding-top: 1rem;
  font-size: 0.75rem;
}
#vacation > div.vacation-events table thead tr > th.header-event {
  width: 55px;
}
#vacation > div.vacation-events table thead tr > th.header-reference, #vacation > div.vacation-events table thead tr > th.header-earning, #vacation > div.vacation-events table thead tr > th.header-discount {
  width: 120px;
  text-align: right;
  padding-right: 1rem;
}
#vacation > div.vacation-events table tbody tr {
  border-bottom: none;
  font-size: 0.75rem;
}
#vacation > div.vacation-events table tbody tr > td {
  border-right: 1px solid #eee;
  line-height: 1rem !important;
  padding: 0.15rem 0;
}
#vacation > div.vacation-events table tbody tr > td.column-event, #vacation > div.vacation-events table tbody tr > td.column-reference, #vacation > div.vacation-events table tbody tr > td.column-earning, #vacation > div.vacation-events table tbody tr > td.column-discount {
  text-align: right;
  padding-right: 0.5rem;
}
#vacation > div.vacation-events table tbody tr > td.column-event.detail-health-plan, #vacation > div.vacation-events table tbody tr > td.column-reference.detail-health-plan, #vacation > div.vacation-events table tbody tr > td.column-earning.detail-health-plan, #vacation > div.vacation-events table tbody tr > td.column-discount.detail-health-plan {
  vertical-align: text-top;
}
#vacation > div.vacation-events table tbody tr > td.column-event-descripton {
  padding-left: 0.5rem;
}
#vacation > div.vacation-events table tbody tr > td.column-event-descripton > div.column-event-health-plan {
  display: flex;
  flex-direction: column;
}
#vacation > div.vacation-events table tbody tr > td.column-event-descripton > div.column-event-health-plan > div.column-event-health-plan-line {
  display: flex;
}
#vacation > div.vacation-events table tbody tr > td.column-event-descripton > div.column-event-health-plan svg {
  background-color: #eee;
  border-radius: 3px;
  margin: 0 5px;
  font-size: 16px;
}
#vacation > div.vacation-events table tbody tr > td.column-event-descripton > div.column-event-health-plan svg:hover {
  cursor: pointer;
  background-color: #c0c0c0;
}
#vacation > div.vacation-totalizers {
  border: 1px solid #eee;
  padding-left: 0.5rem;
}
#vacation > div.vacation-totalizers > div.vacation-totalizers-line {
  display: flex;
  flex-direction: row;
  flex: 1;
}
#vacation > div.vacation-totalizers > div.vacation-totalizers-line > div {
  font-weight: bold;
  width: 120px;
  text-align: right;
  line-height: 2.5rem;
  border: 1px solid #eee;
}
#vacation > div.vacation-totalizers > div.vacation-totalizers-line > div span {
  padding-right: 0.5rem;
}
#vacation > div.vacation-totalizers > div.vacation-totalizers-line > div.vacation-totalizers-description {
  flex: 1;
  text-align: left;
  font-weight: normal;
  border: none;
  border-right: 1px solid #eee;
}
#vacation > div.vacation-calculation-basis {
  display: flex;
  flex: 1;
  flex-direction: row;
  border: 1px solid #eee;
}
#vacation > div.vacation-calculation-basis > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: 1px solid #eee;
  text-align: right;
  padding-right: 0.5rem;
}
#vacation > div.vacation-calculation-basis > div > span {
  font-size: 0.75rem;
}
#vacation > div.vacation-calculation-basis > div > span.bold {
  font-weight: bold;
}
#vacation > div.vacation-calculation-basis > div.fixed-size {
  max-width: 120px;
}
#vacation > div.vacation-calculation-basis > div.irrf-details {
  display: flex;
  flex: 1;
  flex-direction: row;
}
#vacation > div.vacation-calculation-basis > div.irrf-details > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: 0.75rem;
}
#vacation > div.vacation-calculation-basis > div.irrf-details > div:last-child {
  max-width: 40px;
}
#vacation > div.vacation-payment-date {
  padding-top: 15px;
}
#vacation > div.vacation-payment-date span {
  margin: 0 10px;
}
#vacation > div.vacation-payment-date span:last-child {
  margin-left: 50px;
}
#vacation > div.vacation-footer-employee {
  display: flex;
  flex: 1;
  flex-direction: flex-end;
  /* background-color: #8d7e7e;
  background: #383535; 
  min-width: 100px;
  min-height: 60px; */
  padding-top: 25px;
  padding-bottom: 25px;
  /* padding-right: 35px; 
  align-items: right;
  justify-content: right; */
}
#vacation > div.vacation-footer-employee > div.vacation-footer-employee-logo > img {
  min-width: 50px;
  min-height: 50px;
  max-width: 50px;
  max-height: 50px;
}

#vacation-on-mobile {
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: 0.8rem;
  margin-bottom: 5px;
}
#vacation-on-mobile > div.vacation-header {
  color: #c0c0c0;
  background-color: #eee;
  display: flex;
  flex: 1;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  font-size: 1rem;
  border: 1px solid #fff;
  padding: 5px;
}
#vacation-on-mobile > div.vacation-header span:last-child {
  font-size: 1.75rem;
  margin-right: 10px;
}
#vacation-on-mobile > div.expansive-item {
  border: 1px solid #fff;
  background-color: #eee;
  min-height: 50px;
  display: flex;
  align-items: center;
  flex-direction: row;
  padding: 5px;
}
#vacation-on-mobile > div.expansive-item > div {
  display: flex;
  flex: 1;
}
#vacation-on-mobile > div.expansive-item > div span {
  flex: 1;
}
#vacation-on-mobile > div.expansive-item > div span.title {
  color: #c0c0c0;
  font-weight: bold;
  font-size: 1rem;
}
#vacation-on-mobile > div.expansive-item > div span.detail {
  color: #c0c0c0;
  font-weight: bold;
  font-size: 1.2rem;
  text-align: right;
}
#vacation-on-mobile > div.expansive-item svg {
  font-size: 1.8rem;
  color: #c0c0c0;
  margin-left: 10px;
}
#vacation-on-mobile > div.detail-item {
  display: none;
  background-color: #eee;
}
#vacation-on-mobile > div.detail-item.visible {
  display: block;
}
#vacation-on-mobile > div.detail-item > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: #fff;
  border-radius: 0 0 5px 5px;
  padding: 5px 10px;
  margin: 0 5px;
}
#vacation-on-mobile > div.detail-item > div ul {
  display: flex;
  flex-direction: column;
  flex: 1;
}
#vacation-on-mobile > div.detail-item > div ul li {
  display: flex;
  flex-direction: row;
  flex: 1;
}
#vacation-on-mobile > div.detail-item > div ul li > span:first-child {
  display: flex;
  flex: 2;
}
#vacation-on-mobile > div.detail-item > div ul li:last-child {
  display: flex;
  flex: 1;
  justify-content: flex-end;
}
#vacation-on-mobile > div.detail-item > div div.column-event-health-plan {
  display: flex;
  flex-direction: column;
}
#vacation-on-mobile > div.detail-item > div div.column-event-health-plan > div.column-event-health-plan-line {
  display: flex;
}
#vacation-on-mobile > div.detail-item > div div.column-event-health-plan svg {
  background-color: #eee;
  border-radius: 3px;
  margin: 0 5px;
  font-size: 16px;
}
#vacation-on-mobile > div.detail-item:last-child {
  border-bottom: 5px solid #eee;
}
#vacation-on-mobile > div.vacation-company {
  border-radius: 5px 5px 0 0;
}
#vacation-on-mobile > div.vacation-company.expansive-item span.title {
  font-size: 0.8rem;
  font-weight: bold;
  color: #000;
}
#vacation-on-mobile > div.vacation-employee.expansive-item span.title {
  font-size: 0.8rem;
  font-weight: bold;
  color: #000;
}
#vacation-on-mobile > div.vacation-earnings.expansive-item span.title {
  margin: auto 0;
}
#vacation-on-mobile > div.vacation-earnings.expansive-item span.detail {
  color: #01579b;
}
#vacation-on-mobile > div.vacation-discounts.expansive-item span.title {
  margin: auto 0;
}
#vacation-on-mobile > div.vacation-discounts.expansive-item span.detail {
  color: #f44336;
}
#vacation-on-mobile > div.vacation-total.expansive-item span.title {
  margin: auto 0;
}
#vacation-on-mobile > div.vacation-total.expansive-item span.detail {
  color: #4caf50;
}

div.vacation-footer-employee-right {
  font-family: Neue-Machina;
  position: relative;
  float: left;
  width: 33.3333333333%;
}

div.vacation-footer-employee-left {
  font-family: Neue-Machina;
  position: relative;
  float: left;
  width: 33.3333333333%;
}

div.vacation-footer-employee-center {
  font-family: Neue-Machina;
  position: relative;
  float: center;
  width: 33.3333333333%;
}

div.vacation-line-break-1 {
  display: flex;
  flex: 1;
  flex-direction: flex-end;
  min-width: 8px;
  min-height: 8px;
  align-items: right;
  justify-content: right;
}

div.vacation-line-break-5 {
  display: flex;
  flex: 1;
  flex-direction: flex-end;
  min-width: 4px;
  min-height: 40px;
  align-items: right;
  justify-content: right;
}

div.vacation-line-break-10 {
  display: flex;
  flex: 1;
  flex-direction: flex-end;
  min-width: 8px;
  min-height: 80px;
  align-items: right;
  justify-content: right;
}

div.container-vacation-fotter {
  display: grid;
  /* (1) a grid container */
  grid-auto-flow: column;
  /* (2) column layout    */
  justify-content: space-between;
  /* (3) align the columns*/
  /* background-color: lightyellow; */
}

div.container-vacation-fotter > div {
  font-family: Neue-Machina;
  /*  height: 100px;
  width: 33.33%;
  width: calc(100% / 3); 
  border: 2px dashed rgb(26, 218, 51); */
}

div.vacation-title-center {
  text-align: center;
  font-family: Aeonik-Regular, Aeonik-bold, Neue-Machina, Segoe UI, Helvetica Neue, Arial, Noto Sans, sans-serif;
  font-size: 24px;
  font-weight: bold;
}

div.vacation-notification-body-text {
  padding-left: 30px;
  padding-right: 30px;
  font-family: Aeonik-Regular, Aeonik-bold, Neue-Machina, Segoe UI, Helvetica Neue, Arial, Noto Sans, sans-serif;
  font-size: 15px;
  text-align: justify;
  text-justify: inter-word;
}#page-demonstrative-payroll {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-demonstrative-payroll span.text-bold {
  font-weight: bold;
}
#page-demonstrative-payroll .last-month-unsigned-message {
  font-size: 0.9rem;
}
#page-demonstrative-payroll .last-month-unsigned-message p {
  margin-top: 10px;
}
#page-demonstrative-payroll .last-month-unsigned-message .btn-ok {
  margin-top: 10px;
  background-color: #ff9800 !important;
  box-shadow: none !important;
  color: #fff;
  font-weight: bold;
}
#page-demonstrative-payroll .last-month-unsigned-message .icon-message {
  font-size: 48px;
  text-align: center;
  color: #ff9800;
}
#page-demonstrative-payroll > div.fields-period {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 5px 15px;
  margin-bottom: 20px;
}
#page-demonstrative-payroll > div.fields-period > span {
  margin-right: 20px;
}
#page-demonstrative-payroll > div.fields-period > select {
  padding: 5px;
  margin: 10px;
  width: 150px;
  border: none;
  border-bottom: 1px solid #c0c0c0;
}
#page-demonstrative-payroll > div.fields-period > select:focus {
  outline: none;
  border-bottom: 3px solid #c0ff00 !important;
  box-shadow: 0 0px 0 0 #c0ff00 !important;
}
#page-demonstrative-payroll > div.fields-period > select option {
  color: #000;
  background-color: #eee;
}
#page-demonstrative-payroll > div.fields-period > select option:hover {
  background-color: red;
  box-shadow: 0 0 10px 100px red inset;
}
#page-demonstrative-payroll > div.field-custom-card-number {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
#page-demonstrative-payroll > div.field-custom-card-number > label {
  margin-right: 10px;
}
#page-demonstrative-payroll > div.field-custom-card-number > input {
  max-width: 150px;
}
#page-demonstrative-payroll > div.field-custom-card-number > input:focus {
  border-bottom: 1px solid #c0ff00 !important;
  box-shadow: 0 1px 0 0 #c0ff00 !important;
}
#page-demonstrative-payroll > div.panel-payroll {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#page-demonstrative-payroll > div.panel-payroll > div {
  min-width: 800px;
}
#page-demonstrative-payroll > div.panel-payroll div.payroll-message span {
  color: #c0c0c0;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#page-demonstrative-payroll > div.panel-payroll div.demonstrative-footer {
  display: flex;
  flex-direction: row;
  max-width: 800px;
  height: 60px;
  margin-top: 5px;
  align-items: flex-start;
}
#page-demonstrative-payroll > div.panel-payroll div.demonstrative-footer .btn-sign {
  display: flex;
  align-items: center;
  flex: 1;
  visibility: visible;
  transition: visibility 1.5s;
}
#page-demonstrative-payroll > div.panel-payroll div.demonstrative-footer .btn-sign.invisible {
  margin-top: 12px;
  visibility: hidden;
}
#page-demonstrative-payroll > div.panel-payroll div.demonstrative-footer .btn-sign span {
  margin-left: 5px;
  font-size: 0.85rem;
  font-weight: bold;
  margin-bottom: 5px;
}
#page-demonstrative-payroll > div.panel-payroll div.demonstrative-footer .btn-print {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent !important;
  border: none;
  color: #c0c0c0;
  width: 100px;
}
#page-demonstrative-payroll > div.panel-payroll div.demonstrative-footer .btn-print svg {
  font-size: 1.8rem;
  margin-right: 10px;
}
#page-demonstrative-payroll > div.panel-payroll div.demonstrative-footer .btn-print:hover {
  cursor: pointer;
  color: #000;
}
#page-demonstrative-payroll > div.panel-payroll-to-print {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#page-demonstrative-payroll > div.panel-payroll-to-print.invisible {
  display: none;
}
#page-demonstrative-payroll > div.panel-payroll-to-print > div {
  min-width: 800px;
}
#page-demonstrative-payroll > div.panel-payroll-to-print div.payroll-message span {
  color: #c0c0c0;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (max-width: 1080px) {
  #page-demonstrative-payroll {
    border-radius: 5px;
    margin: 5px;
    padding: 5px;
  }
  #page-demonstrative-payroll > div.fields-period > span {
    font-size: 0.8rem;
  }
  #page-demonstrative-payroll > div.fields-period > select {
    width: 120px;
  }
  #page-demonstrative-payroll > div.panel-payroll > div {
    min-width: 600px;
  }
  #page-demonstrative-payroll > div.panel-payroll div.demonstrative-footer {
    max-width: 600px;
  }
}
@media (max-width: 650px) {
  #page-demonstrative-payroll {
    min-height: calc(100vh - 100px);
  }
  #page-demonstrative-payroll > div.fields-period {
    flex-direction: column;
  }
  #page-demonstrative-payroll > div.fields-period > span {
    margin-right: 0px;
    font-size: 0.75rem;
  }
  #page-demonstrative-payroll > div.fields-period li {
    font-size: 0.75rem;
    height: 20px;
  }
  #page-demonstrative-payroll > div.fields-period > select {
    width: 100%;
  }
  #page-demonstrative-payroll > div.fields-period > select input {
    font-size: 0.75rem;
    height: 25px;
  }
  #page-demonstrative-payroll > div.panel-payroll div.payroll-message span {
    font-size: 0.75rem;
  }
  #page-demonstrative-payroll > div.panel-payroll > div {
    min-width: 100%;
  }
  #page-demonstrative-payroll > div.panel-payroll div.demonstrative-footer {
    height: 80px;
  }
  #page-demonstrative-payroll > div.panel-payroll div.demonstrative-footer .btn-sign {
    padding-left: 5px;
  }
  #page-demonstrative-payroll > div.panel-payroll div.demonstrative-footer .btn-sign span {
    font-size: 0.65rem;
  }
}
@media print {
  @page {
    size: auto;
  }
  body {
    margin: 10mm 12mm;
  }
  body span {
    font-size: 0.65rem !important;
  }
  body td {
    font-size: 0.65rem;
  }
}div.payroll-health-plan-detail {
  display: flex;
  flex-direction: column;
  background-color: #eee;
  border-radius: 3px;
  margin: 3px 3px 3px 0px;
}
div.payroll-health-plan-detail div.user {
  padding: 0 5px;
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #c0c0c0;
}
div.payroll-health-plan-detail div.user:hover {
  background-color: #c0c0c0;
  cursor: pointer;
}
div.payroll-health-plan-detail ul {
  border: 1px solid #eee;
}#vacation {
  display: flex;
  flex: 1;
  flex-direction: column;
  max-width: 800px;
  /* border: 2px solid $primaryLight; */
  font-size: 0.75rem;
  margin-top: 15px;
  /* font-family: Aeonik-Regular,Aeonik-bold,Neue-Machina,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif; */
}
#vacation:first-child {
  margin-top: 0;
}
#vacation span.dark-background {
  background-color: #c0c0c0;
}
#vacation span.bold {
  font-weight: bold;
}
#vacation > div.vacation-header-company {
  display: flex;
  flex: 1;
}
#vacation > div.vacation-header-company span {
  padding-left: 0.5rem;
}
#vacation > div.vacation-header-company > div {
  display: flex;
  flex-direction: column;
  flex: 1;
}
#vacation > div.vacation-header-company > div > div {
  border: 1px solid #eee;
}
#vacation > div.vacation-header-company > div > div span:last-child {
  margin-left: 1rem;
}
#vacation > div.vacation-header-employee {
  display: flex;
  flex: 1;
  font-size: larger;
  color: #ffffff;
  background-color: #ffffff;
  background: #ffffff;
  padding-top: 20px;
  padding-bottom: 20px;
  align-items: left;
  justify-content: left;
  min-width: none;
}
#vacation > div.vacation-header-employee > div.logo {
  align-items: center;
  justify-content: center;
  min-width: 250px;
  max-width: 20px;
}
#vacation > div.vacation-header-employee > div.logo > img {
  min-width: 250px;
  min-height: 20px;
  max-width: 250px;
  max-height: 20px;
}
#vacation > div.vacation-header-employee > div {
  display: flex;
  flex-direction: column;
  flex: 1;
}
#vacation > div.vacation-header-employee > div:first-child {
  max-width: 150px;
}
#vacation > div.vacation-header-employee > div > div {
  display: flex;
  flex: 1;
  flex-direction: row;
}
#vacation > div.vacation-header-employee > div > div > div {
  border-left: 1px solid #eee;
  margin-right: 0.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
}
#vacation > div.vacation-header-employee > div > div > div:first-child {
  border-left: none;
}
#vacation > div.vacation-events table {
  border: 1px solid #eee;
  border-collapse: separate;
}
#vacation > div.vacation-events table thead tr > th {
  border: 1px solid #eee;
  padding-top: 1rem;
  font-size: 0.75rem;
}
#vacation > div.vacation-events table thead tr > th.header-event {
  width: 55px;
}
#vacation > div.vacation-events table thead tr > th.header-reference, #vacation > div.vacation-events table thead tr > th.header-earning, #vacation > div.vacation-events table thead tr > th.header-discount {
  width: 120px;
  text-align: right;
  padding-right: 1rem;
}
#vacation > div.vacation-events table tbody tr {
  border-bottom: none;
  font-size: 0.75rem;
}
#vacation > div.vacation-events table tbody tr > td {
  border-right: 1px solid #eee;
  line-height: 1rem !important;
  padding: 0.15rem 0;
}
#vacation > div.vacation-events table tbody tr > td.column-event, #vacation > div.vacation-events table tbody tr > td.column-reference, #vacation > div.vacation-events table tbody tr > td.column-earning, #vacation > div.vacation-events table tbody tr > td.column-discount {
  text-align: right;
  padding-right: 0.5rem;
}
#vacation > div.vacation-events table tbody tr > td.column-event.detail-health-plan, #vacation > div.vacation-events table tbody tr > td.column-reference.detail-health-plan, #vacation > div.vacation-events table tbody tr > td.column-earning.detail-health-plan, #vacation > div.vacation-events table tbody tr > td.column-discount.detail-health-plan {
  vertical-align: text-top;
}
#vacation > div.vacation-events table tbody tr > td.column-event-descripton {
  padding-left: 0.5rem;
}
#vacation > div.vacation-events table tbody tr > td.column-event-descripton > div.column-event-health-plan {
  display: flex;
  flex-direction: column;
}
#vacation > div.vacation-events table tbody tr > td.column-event-descripton > div.column-event-health-plan > div.column-event-health-plan-line {
  display: flex;
}
#vacation > div.vacation-events table tbody tr > td.column-event-descripton > div.column-event-health-plan svg {
  background-color: #eee;
  border-radius: 3px;
  margin: 0 5px;
  font-size: 16px;
}
#vacation > div.vacation-events table tbody tr > td.column-event-descripton > div.column-event-health-plan svg:hover {
  cursor: pointer;
  background-color: #c0c0c0;
}
#vacation > div.vacation-totalizers {
  border: 1px solid #eee;
  padding-left: 0.5rem;
}
#vacation > div.vacation-totalizers > div.vacation-totalizers-line {
  display: flex;
  flex-direction: row;
  flex: 1;
}
#vacation > div.vacation-totalizers > div.vacation-totalizers-line > div {
  font-weight: bold;
  width: 120px;
  text-align: right;
  line-height: 2.5rem;
  border: 1px solid #eee;
}
#vacation > div.vacation-totalizers > div.vacation-totalizers-line > div span {
  padding-right: 0.5rem;
}
#vacation > div.vacation-totalizers > div.vacation-totalizers-line > div.vacation-totalizers-description {
  flex: 1;
  text-align: left;
  font-weight: normal;
  border: none;
  border-right: 1px solid #eee;
}
#vacation > div.vacation-calculation-basis {
  display: flex;
  flex: 1;
  flex-direction: row;
  border: 1px solid #eee;
}
#vacation > div.vacation-calculation-basis > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: 1px solid #eee;
  text-align: right;
  padding-right: 0.5rem;
}
#vacation > div.vacation-calculation-basis > div > span {
  font-size: 0.75rem;
}
#vacation > div.vacation-calculation-basis > div > span.bold {
  font-weight: bold;
}
#vacation > div.vacation-calculation-basis > div.fixed-size {
  max-width: 120px;
}
#vacation > div.vacation-calculation-basis > div.irrf-details {
  display: flex;
  flex: 1;
  flex-direction: row;
}
#vacation > div.vacation-calculation-basis > div.irrf-details > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: 0.75rem;
}
#vacation > div.vacation-calculation-basis > div.irrf-details > div:last-child {
  max-width: 40px;
}
#vacation > div.vacation-payment-date {
  padding-top: 15px;
}
#vacation > div.vacation-payment-date span {
  margin: 0 10px;
}
#vacation > div.vacation-payment-date span:last-child {
  margin-left: 50px;
}
#vacation > div.vacation-footer-employee {
  display: flex;
  flex: 1;
  flex-direction: flex-end;
  /* background-color: #8d7e7e;
  background: #383535; 
  min-width: 100px;
  min-height: 60px; */
  padding-top: 25px;
  padding-bottom: 25px;
  /* padding-right: 35px; 
  align-items: right;
  justify-content: right; */
}
#vacation > div.vacation-footer-employee > div.vacation-footer-employee-logo > img {
  min-width: 50px;
  min-height: 50px;
  max-width: 50px;
  max-height: 50px;
}

#vacation-on-mobile {
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: 0.8rem;
  margin-bottom: 5px;
}
#vacation-on-mobile > div.vacation-header {
  color: #c0c0c0;
  background-color: #eee;
  display: flex;
  flex: 1;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  font-size: 1rem;
  border: 1px solid #fff;
  padding: 5px;
}
#vacation-on-mobile > div.vacation-header span:last-child {
  font-size: 1.75rem;
  margin-right: 10px;
}
#vacation-on-mobile > div.expansive-item {
  border: 1px solid #fff;
  background-color: #eee;
  min-height: 50px;
  display: flex;
  align-items: center;
  flex-direction: row;
  padding: 5px;
}
#vacation-on-mobile > div.expansive-item > div {
  display: flex;
  flex: 1;
}
#vacation-on-mobile > div.expansive-item > div span {
  flex: 1;
}
#vacation-on-mobile > div.expansive-item > div span.title {
  color: #c0c0c0;
  font-weight: bold;
  font-size: 1rem;
}
#vacation-on-mobile > div.expansive-item > div span.detail {
  color: #c0c0c0;
  font-weight: bold;
  font-size: 1.2rem;
  text-align: right;
}
#vacation-on-mobile > div.expansive-item svg {
  font-size: 1.8rem;
  color: #c0c0c0;
  margin-left: 10px;
}
#vacation-on-mobile > div.detail-item {
  display: none;
  background-color: #eee;
}
#vacation-on-mobile > div.detail-item.visible {
  display: block;
}
#vacation-on-mobile > div.detail-item > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: #fff;
  border-radius: 0 0 5px 5px;
  padding: 5px 10px;
  margin: 0 5px;
}
#vacation-on-mobile > div.detail-item > div ul {
  display: flex;
  flex-direction: column;
  flex: 1;
}
#vacation-on-mobile > div.detail-item > div ul li {
  display: flex;
  flex-direction: row;
  flex: 1;
}
#vacation-on-mobile > div.detail-item > div ul li > span:first-child {
  display: flex;
  flex: 2;
}
#vacation-on-mobile > div.detail-item > div ul li:last-child {
  display: flex;
  flex: 1;
  justify-content: flex-end;
}
#vacation-on-mobile > div.detail-item > div div.column-event-health-plan {
  display: flex;
  flex-direction: column;
}
#vacation-on-mobile > div.detail-item > div div.column-event-health-plan > div.column-event-health-plan-line {
  display: flex;
}
#vacation-on-mobile > div.detail-item > div div.column-event-health-plan svg {
  background-color: #eee;
  border-radius: 3px;
  margin: 0 5px;
  font-size: 16px;
}
#vacation-on-mobile > div.detail-item:last-child {
  border-bottom: 5px solid #eee;
}
#vacation-on-mobile > div.vacation-company {
  border-radius: 5px 5px 0 0;
}
#vacation-on-mobile > div.vacation-company.expansive-item span.title {
  font-size: 0.8rem;
  font-weight: bold;
  color: #000;
}
#vacation-on-mobile > div.vacation-employee.expansive-item span.title {
  font-size: 0.8rem;
  font-weight: bold;
  color: #000;
}
#vacation-on-mobile > div.vacation-earnings.expansive-item span.title {
  margin: auto 0;
}
#vacation-on-mobile > div.vacation-earnings.expansive-item span.detail {
  color: #01579b;
}
#vacation-on-mobile > div.vacation-discounts.expansive-item span.title {
  margin: auto 0;
}
#vacation-on-mobile > div.vacation-discounts.expansive-item span.detail {
  color: #f44336;
}
#vacation-on-mobile > div.vacation-total.expansive-item span.title {
  margin: auto 0;
}
#vacation-on-mobile > div.vacation-total.expansive-item span.detail {
  color: #4caf50;
}

div.vacation-footer-employee-right {
  font-family: Neue-Machina;
  position: relative;
  float: left;
  width: 33.3333333333%;
}

div.vacation-footer-employee-left {
  font-family: Neue-Machina;
  position: relative;
  float: left;
  width: 33.3333333333%;
}

div.vacation-footer-employee-center {
  font-family: Neue-Machina;
  position: relative;
  float: center;
  width: 33.3333333333%;
}

div.vacation-line-break-1 {
  display: flex;
  flex: 1;
  flex-direction: flex-end;
  min-width: 8px;
  min-height: 8px;
  align-items: right;
  justify-content: right;
}

div.vacation-line-break-5 {
  display: flex;
  flex: 1;
  flex-direction: flex-end;
  min-width: 4px;
  min-height: 40px;
  align-items: right;
  justify-content: right;
}

div.vacation-line-break-10 {
  display: flex;
  flex: 1;
  flex-direction: flex-end;
  min-width: 8px;
  min-height: 80px;
  align-items: right;
  justify-content: right;
}

div.container-vacation-fotter {
  display: grid;
  /* (1) a grid container */
  grid-auto-flow: column;
  /* (2) column layout    */
  justify-content: space-between;
  /* (3) align the columns*/
  /* border: 1px solid #000000;
  background-color: lightyellow; */
}

div.container-auto-text {
  display: grid;
  /* (1) a grid container */
  grid-auto-flow: column;
  /* (2) column layout    */
  justify-content: space-between;
  /* (3) align the columns*/
  /* border: 1px solid #000000;
  background-color: lightyellow; */
}

div.container-vacation-fotter > div {
  font-family: Neue-Machina;
  /*  height: 100px;
  width: 33.33%;
  width: calc(100% / 3); 
  border: 2px dashed rgb(26, 218, 51); */
}

div.container-vacation-fotter > div.div100px {
  font-family: Neue-Machina;
  height: 20px;
  width: 20px;
  /* border: 1px solid #000000; */
}

div.vacation-title-center {
  text-align: center;
  font-family: Aeonik-Regular, Aeonik-bold, Neue-Machina, Segoe UI, Helvetica Neue, Arial, Noto Sans, sans-serif;
  font-size: 18px;
  font-weight: bold;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
  background-color: #cccccc;
}

div.vacation-sub-title-center {
  text-align: center;
  font-family: Aeonik-Regular, Aeonik-bold, Neue-Machina, Segoe UI, Helvetica Neue, Arial, Noto Sans, sans-serif;
  font-size: 18px;
  font-weight: bold;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
  background-color: #cccccc;
}

div.vacation-body-text {
  padding-left: 30px;
  padding-right: 30px;
  font-family: Aeonik-Regular, Aeonik-bold, Neue-Machina, Segoe UI, Helvetica Neue, Arial, Noto Sans, sans-serif;
  font-size: 15px;
  text-align: justify;
  text-justify: inter-word;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
  border-top: 0px;
  background-color: #ffffff;
}

div.vacation-sub-title-descriptions {
  text-align: left;
  font-family: Aeonik-Regular, Aeonik-bold, Neue-Machina, Segoe UI, Helvetica Neue, Arial, Noto Sans, sans-serif;
  font-size: 14px;
  border-color: #000000;
  border-width: 1px;
  border-style: solid;
}

div.vacation-sub-text-descriptions {
  text-align: left;
  font-family: Aeonik-Regular, Aeonik-bold, Neue-Machina, Segoe UI, Helvetica Neue, Arial, Noto Sans, sans-serif;
  font-size: 18px;
  border-color: #cccccc;
  border-width: 1px;
  border-style: solid;
}

div.vacation-sub-text-descriptions-300px {
  text-align: left;
  font-family: Aeonik-Regular, Aeonik-bold, Neue-Machina, Segoe UI, Helvetica Neue, Arial, Noto Sans, sans-serif;
  font-size: 18px;
  border-color: #cccccc;
  border-width: 1px;
  border-style: solid;
  min-width: 300px;
}

div.container-vacation-text {
  display: grid;
  /* (1) a grid container */
  grid-auto-flow: column;
  /* (2) column layout    */
  justify-content: space-between;
  /* (3) align the columns*/
  /* border: 1px solid #000000;
  background-color: lightyellow; */
}

div.container-vacation-text > div.percent10 {
  width: 10%;
}

div.container-vacation-text > div.percent33 {
  width: 33.3333333333;
}

div.container-vacation-text > div.percent50 {
  width: 50%;
}

div.container-vacation-text > div.percent100 {
  width: 100%;
}#page-demonstrative-payroll {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-demonstrative-payroll span.text-bold {
  font-weight: bold;
}
#page-demonstrative-payroll .last-month-unsigned-message {
  font-size: 0.9rem;
}
#page-demonstrative-payroll .last-month-unsigned-message p {
  margin-top: 10px;
}
#page-demonstrative-payroll .last-month-unsigned-message .btn-ok {
  margin-top: 10px;
  background-color: #ff9800 !important;
  box-shadow: none !important;
  color: #fff;
  font-weight: bold;
}
#page-demonstrative-payroll .last-month-unsigned-message .icon-message {
  font-size: 48px;
  text-align: center;
  color: #ff9800;
}
#page-demonstrative-payroll > div.fields-period {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 5px 15px;
  margin-bottom: 20px;
}
#page-demonstrative-payroll > div.fields-period > span {
  margin-right: 20px;
}
#page-demonstrative-payroll > div.fields-period > select {
  padding: 5px;
  margin: 10px;
  width: 150px;
  border: none;
  border-bottom: 1px solid #c0c0c0;
}
#page-demonstrative-payroll > div.fields-period > select:focus {
  outline: none;
  border-bottom: 3px solid #c0ff00 !important;
  box-shadow: 0 0px 0 0 #c0ff00 !important;
}
#page-demonstrative-payroll > div.fields-period > select option {
  color: #000;
  background-color: #eee;
}
#page-demonstrative-payroll > div.fields-period > select option:hover {
  background-color: red;
  box-shadow: 0 0 10px 100px red inset;
}
#page-demonstrative-payroll > div.field-custom-card-number {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
#page-demonstrative-payroll > div.field-custom-card-number > label {
  margin-right: 10px;
}
#page-demonstrative-payroll > div.field-custom-card-number > input {
  max-width: 150px;
}
#page-demonstrative-payroll > div.field-custom-card-number > input:focus {
  border-bottom: 1px solid #c0ff00 !important;
  box-shadow: 0 1px 0 0 #c0ff00 !important;
}
#page-demonstrative-payroll > div.panel-payroll {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#page-demonstrative-payroll > div.panel-payroll > div {
  min-width: 800px;
}
#page-demonstrative-payroll > div.panel-payroll div.payroll-message span {
  color: #c0c0c0;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#page-demonstrative-payroll > div.panel-payroll div.demonstrative-footer {
  display: flex;
  flex-direction: row;
  max-width: 800px;
  height: 60px;
  margin-top: 5px;
  align-items: flex-start;
}
#page-demonstrative-payroll > div.panel-payroll div.demonstrative-footer .btn-sign {
  display: flex;
  align-items: center;
  flex: 1;
  visibility: visible;
  transition: visibility 1.5s;
}
#page-demonstrative-payroll > div.panel-payroll div.demonstrative-footer .btn-sign.invisible {
  margin-top: 12px;
  visibility: hidden;
}
#page-demonstrative-payroll > div.panel-payroll div.demonstrative-footer .btn-sign span {
  margin-left: 5px;
  font-size: 0.85rem;
  font-weight: bold;
  margin-bottom: 5px;
}
#page-demonstrative-payroll > div.panel-payroll div.demonstrative-footer .btn-print {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent !important;
  border: none;
  color: #c0c0c0;
  width: 100px;
}
#page-demonstrative-payroll > div.panel-payroll div.demonstrative-footer .btn-print svg {
  font-size: 1.8rem;
  margin-right: 10px;
}
#page-demonstrative-payroll > div.panel-payroll div.demonstrative-footer .btn-print:hover {
  cursor: pointer;
  color: #000;
}
#page-demonstrative-payroll > div.panel-payroll-to-print {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#page-demonstrative-payroll > div.panel-payroll-to-print.invisible {
  display: none;
}
#page-demonstrative-payroll > div.panel-payroll-to-print > div {
  min-width: 800px;
}
#page-demonstrative-payroll > div.panel-payroll-to-print div.payroll-message span {
  color: #c0c0c0;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (max-width: 1080px) {
  #page-demonstrative-payroll {
    border-radius: 5px;
    margin: 5px;
    padding: 5px;
  }
  #page-demonstrative-payroll > div.fields-period > span {
    font-size: 0.8rem;
  }
  #page-demonstrative-payroll > div.fields-period > select {
    width: 120px;
  }
  #page-demonstrative-payroll > div.panel-payroll > div {
    min-width: 600px;
  }
  #page-demonstrative-payroll > div.panel-payroll div.demonstrative-footer {
    max-width: 600px;
  }
}
@media (max-width: 650px) {
  #page-demonstrative-payroll {
    min-height: calc(100vh - 100px);
  }
  #page-demonstrative-payroll > div.fields-period {
    flex-direction: column;
  }
  #page-demonstrative-payroll > div.fields-period > span {
    margin-right: 0px;
    font-size: 0.75rem;
  }
  #page-demonstrative-payroll > div.fields-period li {
    font-size: 0.75rem;
    height: 20px;
  }
  #page-demonstrative-payroll > div.fields-period > select {
    width: 100%;
  }
  #page-demonstrative-payroll > div.fields-period > select input {
    font-size: 0.75rem;
    height: 25px;
  }
  #page-demonstrative-payroll > div.panel-payroll div.payroll-message span {
    font-size: 0.75rem;
  }
  #page-demonstrative-payroll > div.panel-payroll > div {
    min-width: 100%;
  }
  #page-demonstrative-payroll > div.panel-payroll div.demonstrative-footer {
    height: 80px;
  }
  #page-demonstrative-payroll > div.panel-payroll div.demonstrative-footer .btn-sign {
    padding-left: 5px;
  }
  #page-demonstrative-payroll > div.panel-payroll div.demonstrative-footer .btn-sign span {
    font-size: 0.65rem;
  }
}
@media print {
  @page {
    size: auto;
  }
  body {
    margin: 10mm 12mm;
  }
  body span {
    font-size: 0.65rem !important;
  }
  body td {
    font-size: 0.65rem;
  }
}#modal-identity-validation .dx-overlay-content {
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
#modal-identity-validation .dx-popup-content {
  padding: 0 !important;
}
#modal-identity-validation .dx-popup-title {
  display: none;
}

.modal-identity-content {
  padding: 24px;
  min-height: 200px;
}

.modal-header {
  margin-bottom: 16px;
}
.modal-header h6 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 6px 0;
  line-height: 1.3;
}
.modal-header .text-modal {
  font-size: 0.875rem;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

.question-section {
  margin-bottom: 16px;
}
.question-section .question {
  font-size: 0.9rem;
  color: #333;
  margin: 0;
  display: block;
  font-weight: 600;
  line-height: 1.5;
}

.answer-section {
  margin-bottom: 20px;
}
.answer-section .answer-input {
  width: 100%;
  margin-bottom: 6px;
}
.answer-section .answer-input .input-response {
  width: 100%;
  padding: 8px 12px;
  font-size: 0.875rem;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.2s ease;
  background-color: #fff;
  font-family: inherit;
}
.answer-section .answer-input .input-response:focus {
  border-color: #999;
}
.answer-section .answer-input .input-response::placeholder {
  color: #aaa;
  font-size: 0.875rem;
}
.answer-section .answer-input .input-response::-webkit-inner-spin-button, .answer-section .answer-input .input-response::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.answer-section .answer-input .input-response {
  appearance: textfield;
}
.answer-section .error-container {
  min-height: 18px;
}
.answer-section .error-container .error-message {
  font-size: 0.75rem;
  color: #d32f2f;
  font-weight: 400;
  display: block;
}

.buttons-group-validate {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

@media (max-width: 768px) {
  .modal-identity-content {
    padding: 20px;
  }
  .modal-header {
    margin-bottom: 14px;
  }
  .modal-header h6 {
    font-size: 1.05rem;
  }
  .modal-header .text-modal {
    font-size: 0.85rem;
  }
  .question-section {
    margin-bottom: 14px;
  }
  .question-section .question {
    font-size: 0.875rem;
  }
  .answer-section {
    margin-bottom: 18px;
  }
  .answer-section .answer-input .input-response {
    padding: 9px 12px;
    font-size: 0.875rem;
  }
  .buttons-group-validate {
    gap: 10px;
  }
}
@media (max-width: 480px) {
  .modal-identity-content {
    padding: 18px 16px;
  }
  .modal-header {
    margin-bottom: 12px;
  }
  .modal-header h6 {
    font-size: 1rem;
  }
  .modal-header .text-modal {
    font-size: 0.8125rem;
  }
  .question-section {
    margin-bottom: 12px;
  }
  .question-section .question {
    font-size: 0.8125rem;
  }
  .answer-section {
    margin-bottom: 16px;
  }
  .answer-section .answer-input .input-response {
    padding: 8px 10px;
    font-size: 0.8125rem;
  }
  .answer-section .error-container .error-message {
    font-size: 0.7rem;
  }
}
@media (max-width: 360px) {
  .modal-identity-content {
    padding: 16px 14px;
  }
}#term-of-liability {
  margin: 10px 20px;
}
#term-of-liability p.title {
  font-weight: bold;
}
#term-of-liability p.title.main {
  text-align: center;
  font-size: 14px;
  margin-bottom: 20px;
}
#term-of-liability p.title.secondary {
  font-size: 12px;
  margin: 20px 0 10px 0;
}
#term-of-liability p.content {
  font-size: 12px;
  text-align: justify;
  padding-left: 10px;
}
#term-of-liability p.content span.enumerator {
  padding: 0 10px;
}

@media (max-width: 650px) {
  #term-of-liability p.title.main {
    font-size: 12px;
  }
  #term-of-liability p.title.secondary {
    font-size: 10px;
  }
  #term-of-liability p.content {
    font-size: 10px;
  }
}#modal-term-of-liability {
  width: 60vw;
  height: 70vh;
}
#modal-term-of-liability .modal-content {
  padding: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
}
#modal-term-of-liability .modal-content .scrollbar {
  flex: 1;
  min-height: calc(70vh - 90px);
}
#modal-term-of-liability .modal-content .btn-accept {
  width: 90%;
  margin: 10px 5%;
  font-size: 12px;
}

@media (max-width: 650px) {
  #modal-term-of-liability {
    width: 90vw;
  }
  #modal-term-of-liability .modal-content .btn-accept {
    font-size: 7px;
  }
}#page-employee-portal {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-employee-portal > .row .col {
  padding: 0;
}
#page-employee-portal div.box-item {
  background: #fff;
  display: flex;
  align-items: center;
  margin: 5px;
  text-align: center;
  height: 75px;
  border: 3px solid #fff;
  border-left: 10px solid #c0ff00;
  padding: 0 5px 0 10px;
  border-radius: 3px;
  font-size: 16px;
  color: #000;
}
#page-employee-portal div.box-item svg {
  margin-right: 10px;
  font-size: 2rem;
  color: #c0c0c0;
}
#page-employee-portal div.box-item:hover {
  border: 3px solid #c0ff00;
  border-left: 10px solid #c0ff00;
}
#page-employee-portal div.box-item .title {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}
#page-employee-portal div.box-item .title > span {
  color: #000;
}

@media (max-width: 650px) {
  #page-employee-portal .tab-item-link {
    font-size: 0.75rem;
  }
}#page-lgpd {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-lgpd > span.title {
  font-size: 1.75rem;
  color: #c0c0c0;
  margin-left: 10px;
}
#page-lgpd > .row .col {
  padding: 0;
}
#page-lgpd div.box-item {
  background: #fff;
  display: flex;
  align-items: center;
  margin: 5px;
  text-align: center;
  height: 75px;
  border: 3px solid #fff;
  border-left: 10px solid #c0ff00;
  padding: 0 5px 0 10px;
  border-radius: 3px;
  font-size: 16px;
  color: #000;
}
#page-lgpd div.box-item svg {
  margin-right: 10px;
  font-size: 2rem;
  color: #c0c0c0;
}
#page-lgpd div.box-item:hover {
  border: 3px solid #c0ff00;
  border-left: 10px solid #c0ff00;
}
#page-lgpd div.box-item .title {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}
#page-lgpd div.box-item .title > span {
  color: #000;
}

@media (max-width: 650px) {
  #page-lgpd {
    min-height: calc(100vh - 100px);
  }
  #page-lgpd > span.title {
    font-size: 1.25rem;
    margin-left: 5px;
  }
  #page-lgpd .tab-item-link {
    font-size: 0.75rem;
  }
}#page-privacy-policy {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: calc(100vh - 110px);
}
#page-privacy-policy > header {
  display: flex;
  align-items: center;
}
#page-privacy-policy > header span.title {
  font-size: 1.75rem;
  color: #c0c0c0;
  margin-left: 10px;
}
#page-privacy-policy > header > svg {
  font-size: 1.75rem;
  margin: 0 15px;
  color: #c0c0c0;
}
#page-privacy-policy > header > svg:hover {
  color: #000;
  cursor: pointer;
}
#page-privacy-policy section.document {
  background-color: #eee;
  border-radius: 5px;
  display: flex;
  flex: 1;
}

@media (max-width: 650px) {
  #page-privacy-policy {
    min-height: calc(100vh - 100px);
  }
  #page-privacy-policy > header span.title {
    font-size: 1.25rem;
    margin-left: 5px;
  }
}#page-privacy-policy-primer {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: calc(100vh - 110px);
}
#page-privacy-policy-primer > header {
  display: flex;
  align-items: center;
}
#page-privacy-policy-primer > header span.title {
  font-size: 1.75rem;
  color: #c0c0c0;
  margin-left: 10px;
}
#page-privacy-policy-primer > header > svg {
  font-size: 1.75rem;
  margin: 0 15px;
  color: #c0c0c0;
}
#page-privacy-policy-primer > header > svg:hover {
  color: #000;
  cursor: pointer;
}
#page-privacy-policy-primer section.document {
  background-color: #eee;
  border-radius: 5px;
  display: flex;
  flex: 1;
}

@media (max-width: 650px) {
  #page-privacy-policy-primer {
    min-height: calc(100vh - 100px);
  }
  #page-privacy-policy-primer > header span.title {
    font-size: 1.25rem;
    margin-left: 5px;
  }
}#page-user-manual {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: calc(100vh - 110px);
}
#page-user-manual > header {
  display: flex;
  align-items: center;
}
#page-user-manual > header span.title {
  font-size: 1.75rem;
  color: #c0c0c0;
  margin-left: 10px;
}
#page-user-manual > header > svg {
  font-size: 1.75rem;
  margin: 0 15px;
  color: #c0c0c0;
}
#page-user-manual > header > svg:hover {
  color: #000;
  cursor: pointer;
}
#page-user-manual section.document {
  background-color: #eee;
  border-radius: 5px;
  display: flex;
  flex: 1;
}

@media (max-width: 650px) {
  #page-user-manual {
    min-height: calc(100vh - 100px);
  }
  #page-user-manual > header span.title {
    font-size: 1.25rem;
    margin-left: 5px;
  }
}#page-user-manual {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: calc(100vh - 110px);
}
#page-user-manual > header {
  display: flex;
  align-items: center;
}
#page-user-manual > header span.title {
  font-size: 1.75rem;
  color: #c0c0c0;
  margin-left: 10px;
}
#page-user-manual > header > svg {
  font-size: 1.75rem;
  margin: 0 15px;
  color: #c0c0c0;
}
#page-user-manual > header > svg:hover {
  color: #000;
  cursor: pointer;
}
#page-user-manual section.document {
  background-color: #eee;
  border-radius: 5px;
  display: flex;
  flex: 1;
}

@media (max-width: 650px) {
  #page-user-manual {
    min-height: calc(100vh - 100px);
  }
  #page-user-manual > header span.title {
    font-size: 1.25rem;
    margin-left: 5px;
  }
}#page-employee-portal {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-employee-portal > .row .col {
  padding: 0;
}
#page-employee-portal div.box-item {
  background: #fff;
  display: flex;
  align-items: center;
  margin: 5px;
  text-align: center;
  height: 75px;
  border: 3px solid #fff;
  border-left: 10px solid #c0ff00;
  padding: 0 5px 0 10px;
  border-radius: 3px;
  font-size: 16px;
  color: #000;
}
#page-employee-portal div.box-item svg {
  margin-right: 10px;
  font-size: 2rem;
  color: #c0c0c0;
}
#page-employee-portal .divPopupOpen {
  cursor: pointer;
}
#page-employee-portal div.box-item:hover {
  border: 3px solid #c0ff00;
  border-left: 10px solid #c0ff00;
}
#page-employee-portal div.box-item .title {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}
#page-employee-portal div.box-item .title > span {
  color: #000;
}

#popup div.box-item {
  background: #fff;
  display: flex;
  align-items: center;
  margin: 5px;
  text-align: center;
  height: 75px;
  border: 3px solid #fff;
  border-left: 10px solid #c0ff00;
  padding: 0 5px 0 10px;
  border-radius: 3px;
  font-size: 16px;
  color: #000;
}
#popup div.box-item svg {
  margin-right: 10px;
  font-size: 2rem;
  color: #c0c0c0;
}
#popup div.box-item:hover {
  border: 3px solid #c0ff00;
  border-left: 10px solid #c0ff00;
}
#popup div.box-item .title {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}
#popup div.box-item .title > span {
  color: #000;
}

@media (max-width: 650px) {
  #page-employee-portal .tab-item-link {
    font-size: 0.75rem;
  }
}html {
  overflow-y: auto;
  overflow-x: hidden;
}

#page-employee-portal {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px 5px 50px 5px;
  min-height: calc(100vh - 110px);
  overflow: "scroll";
}
#page-employee-portal > .row .col {
  padding: 0;
}
#page-employee-portal #divFilters {
  display: flex;
  flex-direction: row;
  padding-left: 10px;
  flex-wrap: wrap;
}
#page-employee-portal #tickets-created-filters .row {
  flex-direction: row;
  display: flex;
  margin-right: 15px;
}
#page-employee-portal #tickets-created-filters .row p {
  font-weight: bold;
  width: 40px;
}
#page-employee-portal .accordion-info-ticket p {
  margin-bottom: 3px;
}
#page-employee-portal #rb {
  margin: 0px 10px 0px 20px;
}
#page-employee-portal #treeview {
  min-width: 200px;
  max-width: 300px;
}
#page-employee-portal #btnAtt {
  margin-left: 15px;
  margin-bottom: 25px;
}
#page-employee-portal div.box-item {
  background: #fff;
  display: flex;
  align-items: center;
  margin: 5px;
  text-align: center;
  height: 75px;
  border: 3px solid #fff;
  border-left: 10px solid #c0ff00;
  padding: 0 5px 0 10px;
  border-radius: 3px;
  font-size: 16px;
  color: #000;
}
#page-employee-portal div.box-item svg {
  margin-right: 10px;
  font-size: 2rem;
  color: #c0c0c0;
}
#page-employee-portal div.box-item:hover {
  border: 3px solid #c0ff00;
  border-left: 10px solid #c0ff00;
}
#page-employee-portal div.box-item .title {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}
#page-employee-portal div.box-item .title > span {
  color: #000;
}
#page-employee-portal div.viewCards {
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;
  margin: 0px;
  padding: 0px;
}
#page-employee-portal div.view-cards-none {
  display: none;
}
#page-employee-portal div.leftCard {
  height: 100%;
  border-radius: 10px 0px 0px 10px;
  padding: 5px;
  min-width: 25%;
}
#page-employee-portal div.leftCard p {
  font-size: 0.75rem;
  text-justify: space-evenly;
  font-weight: bold;
  margin-bottom: 4px;
}
#page-employee-portal div.leftCard p > span {
  font-weight: 100;
}
#page-employee-portal div.rigthCard {
  width: 75%;
  padding: 5px;
}
#page-employee-portal div.rigthCard span {
  font-weight: bold;
}
#page-employee-portal div.rigthCard p {
  margin-bottom: 5px;
  font-size: 0.85rem;
}
#page-employee-portal #statusTicket {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 3px;
}

div.btn-close-modal {
  background-color: #fff;
  display: flex;
  justify-content: end;
  padding: 10px;
}

#modalInfoTicket {
  background-color: #fff;
  padding: 10px;
  align-items: center;
  justify-content: space-evenly;
  min-height: 350px;
}
#modalInfoTicket div.row {
  margin: 0;
  flex-direction: row;
  display: flex;
}
#modalInfoTicket div.row span {
  margin-right: 15px;
}
#modalInfoTicket p {
  font-weight: bold;
  margin-bottom: 10px;
}
#modalInfoTicket p > span {
  font-weight: 100;
}

@media (max-width: 650px) {
  #page-employee-portal .tab-item-link {
    font-size: 0.75rem;
  }
  #tickets-created-filters .row {
    flex-direction: column !important;
    margin-right: 15px;
  }
  .filters,
  #divFilters {
    flex-direction: column;
    flex-flow: column wrap;
    justify-content: flex-start;
    width: 100%;
  }
  #btnAtt {
    margin-top: 10px;
    margin-left: 0px;
    margin-bottom: 15px;
  }
}#page-employee-portal {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-employee-portal > .row .col {
  padding: 0;
}
#page-employee-portal .visible {
  visibility: hidden;
}
#page-employee-portal div.button-new-ticket {
  text-align: left !important;
}

#modal-immobilized .col,
#modal-employees .col {
  cursor: pointer;
}
@media (max-width: 650px) {
  #modal-immobilized .dx-button-text,
  #modal-employees .dx-button-text {
    font-size: 0.7rem;
  }
  #page-employee-portal .tab-item-link {
    font-size: 0.75rem;
  }
}#page-employee-portal {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-employee-portal .modal-overlay {
  z-index: 0;
}
#page-employee-portal > .row .col {
  padding: 0;
}
#page-employee-portal .row-all-tickets,
#page-employee-portal .row-all-tickets-status {
  display: flex;
  flex-direction: row;
}
#page-employee-portal .info-accordion-hours > p {
  font-size: 12px;
  font-weight: lighter;
  margin: 0;
}
#page-employee-portal div.custom-title-accordion-hours > p {
  font-weight: lighter;
}
#page-employee-portal .driftSelected {
  background-color: #c0c0c0 !important;
}
#page-employee-portal .teste {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}
#page-employee-portal .teste span {
  margin-left: 15px;
  color: #c0c0c0;
  font-weight: bold;
}
#page-employee-portal .teste svg {
  font-size: 2.5rem;
  color: #c0c0c0;
}
#page-employee-portal div.box-item {
  background: #fff;
  display: flex;
  align-items: center;
  margin: 5px;
  text-align: center;
  height: 75px;
  border: 3px solid #fff;
  border-left: 10px solid #c0ff00;
  padding: 0 5px 0 10px;
  border-radius: 3px;
  font-size: 16px;
  color: #000;
}
#page-employee-portal div.box-item svg {
  margin-right: 10px;
  font-size: 2rem;
  color: #c0c0c0;
}
#page-employee-portal .divPopupOpen {
  cursor: pointer;
}
#page-employee-portal div.box-item:hover {
  border: 3px solid #c0ff00;
  border-left: 10px solid #c0ff00;
}
#page-employee-portal div.box-item .title {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}
#page-employee-portal div.box-item .title > span {
  color: #000;
}
#page-employee-portal .btn-form {
  margin-right: 15px;
}
#page-employee-portal .hidden {
  visibility: hidden;
}
#page-employee-portal div.btn-close-modal #btn-close-modal {
  background-color: #ff9800 !important;
}
#page-employee-portal .btns-form-hours .btn-submit-hours {
  margin-right: 20px;
}
#page-employee-portal div.navbar-order-hours {
  background-color: #c0c0c0;
  flex-direction: row;
  display: flex;
  margin-bottom: 0px !important;
}
#page-employee-portal div.navbar-order-hours div.item-navbar-order-hours {
  padding: 15px;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: 500;
}
#page-employee-portal div.navbar-order-hours .active {
  background-color: #fff !important;
}
#page-employee-portal div.navbar-order-hours :hover {
  background-color: #fff;
  cursor: pointer;
  color: #000;
}
#page-employee-portal #modalInfoTicket div.hours-total > p {
  padding-top: 10px;
}
#page-employee-portal #modalInfoTicket .actions-buttons {
  flex-wrap: wrap;
}
#page-employee-portal #modalInfoTicket .button-column {
  margin-right: 8px;
  max-width: 125px;
  height: 45px;
  margin-bottom: 15px;
  box-shadow: 0 2px 2px 0 RGB(0 0 0/14%), 0 3px 1px -2px RGB(0 0 0/12%), 0 1px 5px 0 RGB(0 0 0/20%);
}
#page-employee-portal #modalInfoTicket .button-column p {
  font-size: 8px;
}
#page-employee-portal #modalInfoTicket .btn-column :hover {
  background-color: #b9e868 !important;
}
#page-employee-portal #modalInfoTicket .btn-urgency-active {
  background-color: #f44336 !important;
}
#page-employee-portal #modalInfoTicket .btn-wrapper .btn-wrapper-content svg {
  margin-right: 10px;
}
#page-employee-portal #modalInfoTicket .modal {
  top: 5% !important;
}
#page-employee-portal #modalInfoTicket .fast-actions {
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}
#page-employee-portal #modalInfoTicket div.section {
  padding-top: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid black;
  flex-direction: column;
}
#page-employee-portal #modalInfoTicket .title-hours {
  text-align: center;
  font-size: 1rem;
}
#page-employee-portal #modalInfoTicket .btn-add-new-hour {
  margin-bottom: 10px;
}
#page-employee-portal #modalInfoTicket .btn-submit-hours {
  margin-right: 4px;
  margin-top: 10px;
}
#page-employee-portal #modalInfoTicket #form-tab-hours {
  margin-top: 5px;
}

@media (max-width: 650px) {
  #page-employee-portal .input-search {
    padding-right: 25px !important;
    max-width: 270px;
  }
  #page-employee-portal .tab-item-link {
    font-size: 0.75rem;
  }
  #page-employee-portal div.modal {
    width: 95% !important;
    justify-content: space-evenly;
  }
  #page-employee-portal .row-all-tickets-status {
    flex-direction: column;
    display: flex;
  }
  .btn-wrapper-content,
  .btn-column,
  .btn-wrapper,
  .button-column {
    padding-right: 8px;
    padding-left: 8px;
  }
}#page-employee-portal {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-employee-portal > .row .col {
  padding: 0;
}
#page-employee-portal div.box-item {
  background: #fff;
  display: flex;
  align-items: center;
  margin: 5px;
  text-align: center;
  height: 75px;
  border: 3px solid #fff;
  border-left: 10px solid #c0ff00;
  padding: 0 5px 0 10px;
  border-radius: 3px;
  font-size: 16px;
  color: #000;
}
#page-employee-portal div.box-item svg {
  margin-right: 10px;
  font-size: 2rem;
  color: #c0c0c0;
}
#page-employee-portal .divPopupOpen {
  cursor: pointer;
}
#page-employee-portal div.box-item:hover {
  border: 3px solid #c0ff00;
  border-left: 10px solid #c0ff00;
}
#page-employee-portal div.box-item .title {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}
#page-employee-portal div.box-item .title > span {
  color: #000;
}

#popup div.box-item {
  background: #fff;
  display: flex;
  align-items: center;
  margin: 5px;
  text-align: center;
  height: 75px;
  border: 3px solid #fff;
  border-left: 10px solid #c0ff00;
  padding: 0 5px 0 10px;
  border-radius: 3px;
  font-size: 16px;
  color: #000;
}
#popup div.box-item svg {
  margin-right: 10px;
  font-size: 2rem;
  color: #c0c0c0;
}
#popup div.box-item:hover {
  border: 3px solid #c0ff00;
  border-left: 10px solid #c0ff00;
}
#popup div.box-item .title {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}
#popup div.box-item .title > span {
  color: #000;
}

@media (max-width: 650px) {
  #page-employee-portal .tab-item-link {
    font-size: 0.75rem;
  }
}#row-partner-managerial {
  margin-top: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-left: 20px;
}

#partners-input {
  width: 350px;
}

#icons-row {
  display: flex;
  justify-content: space-around;
  font-size: 20px;
}

#scrollview-partners {
  margin: 10px;
  margin-bottom: 45px !important;
}

.icon-partners-managerial {
  font-size: 18px;
  margin: 6px;
}

.icon-partners-managerial:hover {
  font-size: 22px;
  margin: 6px;
}

.btn-wrapper-partner {
  font-size: 0.85rem;
  width: 350px;
  background-color: #c0ff00 !important;
  margin-top: 15px;
  border-radius: 1px;
  box-shadow: -1px 1px 2px #c0c0c0;
}

.btn-wrapper-partner:hover {
  background-color: #b9e868 !important;
  color: #666;
}

.btn-wrapper-partner .btn-wrapper-content {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
}

.btn-wrapper-partner .btn-wrapper-content svg {
  margin-right: 10px;
}

.trash-icon-partners {
  color: #f44336 !important;
}

.trash-icon-partners:hover {
  font-size: 1.1em;
}

.edit-icon-partners:hover {
  font-size: 1.1em;
}

.pdf-icon-partners:hover {
  font-size: 1.1em;
}

#btn-cancel-modal {
  background-color: #c0c0c0 !important;
}

#btn-cancel-modal:hover {
  background-color: rgb(153, 152, 152) !important;
}

.datagrid-partners-managerial {
  overflow: auto !important;
}

.buttons-partners-managerial {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#page-managerial-partners {
  align-items: center;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  min-height: calc(100vh - 110px);
}
#page-managerial-partners .input-partners {
  width: 350px !important;
  height: 45px !important;
  margin-right: 15px !important;
  padding-left: 4px !important;
  margin-bottom: 0px !important;
  flex-wrap: wrap;
}
#page-managerial-partners .file-uploader {
  max-width: 350px !important;
  align-items: center;
  margin-left: -10px;
}
#page-managerial-partners .row-partners {
  margin: 30px;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: wrap !important;
}

#pdf-document {
  margin-top: 10px;
}

label.cameraButtoon {
  padding: 0.5em;
  border: 3px solid #666;
  border-color: #EEE #CCC #CCC #EEE;
  background-color: #DDD;
}

label.cameraButtoon input[accept*=pdf] {
  display: none;
}

label.cameraButtoon:active {
  border-color: #CCC #EEE #EEE #CCC;
}

@media (max-width: 650px) {
  #page-employee-portal .tab-item-link {
    font-size: 0.75rem;
  }
  #modal-confirm-text {
    margin-top: 10px !important;
  }
  .file-partner-managerial {
    margin-left: 50px;
  }
  .btn-wrapper {
    font-size: 0.7rem;
  }
  #pdf-document {
    margin-left: 50px;
    width: 250px;
  }
  .popup-remove-partner {
    padding: 5px;
  }
  .cameraButtoon {
    background-color: #c0c0c0;
    color: #c0c0c0;
  }
  #page-managerial-partners {
    align-items: center;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    min-height: calc(100vh - 110px);
    overflow: hidden;
  }
  #page-managerial-partners .input-partners {
    width: 250px !important;
    height: 45px !important;
    margin-left: 50px;
    font-size: 0.7rem;
    border-bottom: 0px !important;
  }
  #page-managerial-partners #pdf-view-partners {
    overflow: scroll !important;
  }
  #page-managerial-partners .row-partners {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    font-size: 0.7rem;
  }
  #page-managerial-partners .file-uploader {
    max-width: 280px !important;
    align-items: center;
    margin-left: 40px;
  }
  #page-managerial-partners .btn-wrapper-partner {
    width: 250px;
    font-size: 0.85rem;
  }
  #page-managerial-partners .buttons-partners-managerial {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}#page-employee-portal {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-employee-portal > .row .col {
  padding: 0;
}

#card-partners {
  width: 23em;
  background-color: #fff;
  border-radius: 5px;
  margin: 6px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  border: 2px solid #fff;
  border-left: 5px solid #b9e868;
  font-size: 0.85rem;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.03), 0 0px 10px rgba(0, 0, 0, 0.03);
}

#card-partners:hover {
  border-color: #c0ff00;
}

.h6-title-list-partners {
  font-weight: lighter;
  font-style: italic;
  text-align: center;
  display: block;
}

.partners-searchbox {
  margin-left: 27px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.text-list-partners {
  color: #000;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

#btn-partner-show {
  font-size: 28px;
}

#btn-partner-show:hover {
  font-size: 30px;
}

#partners-list-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-left: 20px;
  padding-top: 10px;
}

@media (max-width: 540px) {
  #card-partners {
    width: 95% !important;
    font-size: 0.75rem;
    max-width: 380px;
  }
  #partners-list-row {
    padding-left: 22px;
    justify-content: center;
  }
  .partners-searchbox {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 22px;
    margin-right: 32px;
    margin-bottom: 10px;
  }
}
@media (max-width: 650px) {
  #partners-list-row {
    padding-right: 32px;
    justify-content: center;
  }
  #page-employee-portal .tab-item-link {
    font-size: 0.75rem;
  }
  #card-partners {
    font-size: 0.75rem;
    width: 95% !important;
    max-width: 380px;
  }
}#page-employee-portal {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-employee-portal > .row .col {
  padding: 0;
}
#page-employee-portal #page-user-manual {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: calc(100vh - 110px);
}
#page-employee-portal div.box-item svg {
  margin-right: 10px;
  font-size: 2rem;
  color: #c0c0c0;
}
#page-employee-portal div.box-item:hover {
  border: 3px solid #c0ff00;
  border-left: 10px solid #c0ff00;
}
#page-employee-portal div.box-item .title {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}
#page-employee-portal div.box-item .title > span {
  color: #000;
}

#card-web-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-left: 20px;
}

.card-web-evaluation {
  background-color: white;
  font-size: 14px;
  border-radius: 5px;
  margin: 6px;
  padding: 12px;
  width: 25em;
  display: flex;
  flex-direction: column;
  justify-content: space-between !important;
}

.card-web-evaluation:hover {
  padding: 2px solid #c0ff00;
}

#divider {
  margin-top: 6px;
  margin-bottom: 6px;
}

#icons-evaluation-web {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#header-web-evaluation {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#header-card-mobile {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 0.9em;
}

#content-card {
  display: flex;
  justify-content: space-between;
}

#card-icons {
  display: flex;
  flex-direction: row;
  font-size: 2em;
  justify-content: space-between;
}

#card-icons-mobile {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 2em;
  margin-right: 3px;
}

#icon-like {
  margin-left: 8px;
}

#btn-pdf-mobile {
  margin-left: 20px;
  margin-top: 16px;
  font-size: 2em;
}

#btn-pdf-web {
  display: flex;
  margin-top: 6px;
  font-size: 2em;
}

#modal-confirm {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 2px;
  margin-bottom: 2px;
}

.btn-dislike-red {
  color: #f44336;
}

.btn-like-green {
  color: #c0ff00;
}

#btn-cancel-modal {
  background-color: #c0c0c0 !important;
  margin: 12px;
}

#btn-cancel-modal:hover {
  background-color: rgb(153, 152, 152) !important;
}

#btn-confirm-modal {
  margin: 12px;
}

#modal-confirm-text {
  text-align: center;
}

.pointer {
  cursor: pointer;
}

section.document {
  background-color: #eee;
  border-radius: 5px;
  display: flex;
  flex: 1;
}

@media (max-width: 650px) {
  #page-employee-portal .tab-item-link {
    font-size: 0.75rem;
  }
}#page-employee-portal {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-employee-portal > .row .col {
  padding: 0;
}
#page-employee-portal div.box-item {
  background: #fff;
  display: flex;
  align-items: center;
  margin: 5px;
  text-align: center;
  height: 75px;
  border: 3px solid #fff;
  border-left: 10px solid #c0ff00;
  padding: 0 5px 0 10px;
  border-radius: 3px;
  font-size: 16px;
  color: #000;
}
#page-employee-portal div.box-item svg {
  margin-right: 10px;
  font-size: 2rem;
  color: #c0c0c0;
}
#page-employee-portal .divPopupOpen {
  cursor: pointer;
}
#page-employee-portal div.box-item:hover {
  border: 3px solid #c0ff00;
  border-left: 10px solid #c0ff00;
}
#page-employee-portal div.box-item .title {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}
#page-employee-portal div.box-item .title > span {
  color: #000;
}

#popup div.box-item {
  background: #fff;
  display: flex;
  align-items: center;
  margin: 5px;
  text-align: center;
  height: 75px;
  border: 3px solid #fff;
  border-left: 10px solid #c0ff00;
  padding: 0 5px 0 10px;
  border-radius: 3px;
  font-size: 16px;
  color: #000;
}
#popup div.box-item svg {
  margin-right: 10px;
  font-size: 2rem;
  color: #c0c0c0;
}
#popup div.box-item:hover {
  border: 3px solid #c0ff00;
  border-left: 10px solid #c0ff00;
}
#popup div.box-item .title {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}
#popup div.box-item .title > span {
  color: #000;
}

@media (max-width: 650px) {
  #page-employee-portal .tab-item-link {
    font-size: 0.75rem;
  }
}#page-employee-portal {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}

@media (max-width: 650px) {
  #page-employee-portal .tab-item-link {
    font-size: 0.75rem;
  }
  #page-user-manual .btn-sign .label-term {
    font-size: 0.8rem;
  }
}
#page-user-manual .btn-sign {
  margin: 15px 10px;
  padding-top: 3px;
}
#page-user-manual .btn-sign .label-term {
  margin-left: 10px;
}#page-employee-portal {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}

@media (max-width: 650px) {
  #page-employee-portal .tab-item-link {
    font-size: 0.75rem;
  }
}#page-employee-portal {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}

@media (max-width: 650px) {
  #page-employee-portal .tab-item-link {
    font-size: 0.75rem;
  }
}#page-employee-portal {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}

@media (max-width: 650px) {
  #page-employee-portal .tab-item-link {
    font-size: 0.75rem;
  }
}.container-card-trainings {
  gap: 15px;
}

.card-training {
  box-shadow: -2px 6px 39px 0px rgba(0, 0, 0, 0.75);
  background-color: blue;
  padding: 10px;
  min-width: 220px;
  height: auto;
  margin-bottom: 20px;
}#page-employee-portal {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}

@media (max-width: 650px) {
  #page-employee-portal .tab-item-link {
    font-size: 0.75rem;
  }
}#page-privacy-policy-primer {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: calc(100vh - 110px);
}
#page-privacy-policy-primer > header {
  display: flex;
  align-items: center;
}
#page-privacy-policy-primer > header span.title {
  font-size: 1.75rem;
  color: #c0c0c0;
  margin-left: 10px;
}
#page-privacy-policy-primer > header > svg {
  font-size: 1.75rem;
  margin: 0 15px;
  color: #c0c0c0;
}
#page-privacy-policy-primer > header > svg:hover {
  color: #000;
  cursor: pointer;
}
#page-privacy-policy-primer section.document {
  background-color: #eee;
  border-radius: 5px;
  display: flex;
  flex: 1;
}

@media (max-width: 650px) {
  #page-privacy-policy-primer {
    min-height: calc(100vh - 100px);
  }
  #page-privacy-policy-primer > header span.title {
    font-size: 1.25rem;
    margin-left: 5px;
  }
}#page-managerial {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-managerial > .row .col {
  padding: 0;
}
#page-managerial div.box-item {
  background: #fff;
  display: flex;
  align-items: center;
  margin: 5px;
  text-align: center;
  height: 75px;
  border: 3px solid #fff;
  border-left: 10px solid #c0ff00;
  padding: 0 5px 0 10px;
  border-radius: 3px;
  font-size: 16px;
  color: #000;
}
#page-managerial div.box-item svg {
  margin-right: 10px;
  font-size: 2rem;
  color: #c0c0c0;
}
#page-managerial div.box-item:hover {
  border: 3px solid #c0ff00;
  border-left: 10px solid #c0ff00;
}
#page-managerial div.box-item .title {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}
#page-managerial div.box-item .title > span {
  color: #000;
}

@media (max-width: 650px) {
  #page-managerial .tab-item-link {
    font-size: 0.75rem;
  }
}#page-economic-and-finances {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-economic-and-finances > .row .col {
  padding: 0;
}
#page-economic-and-finances div.box-item {
  background: #fff;
  display: flex;
  align-items: center;
  margin: 5px;
  text-align: center;
  height: 75px;
  border: 3px solid #fff;
  border-left: 10px solid #c0ff00;
  padding: 0 5px 0 10px;
  border-radius: 3px;
  font-size: 16px;
  color: #000;
}
#page-economic-and-finances div.box-item svg {
  margin-right: 10px;
  font-size: 2rem;
  color: #c0c0c0;
}
#page-economic-and-finances div.box-item:hover {
  border: 3px solid #c0ff00;
  border-left: 10px solid #c0ff00;
}
#page-economic-and-finances div.box-item .title {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}
#page-economic-and-finances div.box-item .title > span {
  color: #000;
}
#page-economic-and-finances div.title-section {
  border-bottom: 2px solid #eee;
  margin: 0 0 10px 10px;
}
#page-economic-and-finances div.title-section > span {
  margin: 10px 0 10px 0;
  color: #c0c0c0;
  font-size: 16px;
}

@media (max-width: 650px) {
  #page-economic-and-finances .tab-item-link {
    font-size: 0.75rem;
  }
}#updated-at-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  opacity: 0.5;
}
#updated-at-label span {
  color: #000;
  font-size: 0.75rem;
  font-style: italic;
  font-weight: bold;
}
#updated-at-label svg {
  font-size: 1rem;
  color: #000;
  margin: 0 3px 1px 0;
}

@media (max-width: 650px) {
  #updated-at-label span {
    font-size: 0.55rem;
  }
  #updated-at-label svg {
    font-size: 0.75rem;
  }
}#chart-total-net-income {
  border-radius: 5px;
  margin: 5px;
  max-height: 90%;
  width: 100%;
  padding: 15px;
}
#chart-total-net-income div.without-permission,
#chart-total-net-income div.without-data {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}
#chart-total-net-income div.without-permission span,
#chart-total-net-income div.without-data span {
  margin-left: 15px;
  color: #c0c0c0;
  font-weight: bold;
}
#chart-total-net-income div.without-permission svg,
#chart-total-net-income div.without-data svg {
  font-size: 2.5rem;
  color: #c0c0c0;
}
#chart-total-net-income section.summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}
#chart-total-net-income section.summary div.totalizers {
  display: flex;
  flex: 1;
  flex-direction: row;
  font-weight: bold;
}
#chart-total-net-income section.summary div.totalizers span {
  margin: 0 10px;
  font-size: 0.8rem;
}
#chart-total-net-income section.summary div.totalizers span.planned {
  color: #ff9800;
}
#chart-total-net-income section.summary div.totalizers span.reached {
  color: #01579b;
}
#chart-total-net-income section.summary div.legend {
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#chart-total-net-income section.summary div.legend span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 1px 10px 0 10px;
}
#chart-total-net-income section.summary div.legend span.planned {
  margin-right: 15px;
}
#chart-total-net-income section.summary div.legend span.planned::before {
  background: #ff9800;
}
#chart-total-net-income section.summary div.legend span.reached {
  margin-right: 15px;
}
#chart-total-net-income section.summary div.legend span.reached::before {
  background: #01579b;
}

@media (max-width: 650px) {
  #chart-total-net-income {
    max-height: 80%;
  }
  #chart-total-net-income section.summary {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
  }
  #chart-total-net-income section.summary div.totalizers span {
    font-size: 0.7rem;
    margin: 0 5px;
  }
  #chart-total-net-income section.summary div.legend span {
    margin: 0 5px;
  }
}#page-total-net-income {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  height: calc(100vh - 130px);
}
#page-total-net-income header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
#page-total-net-income header > div:first-child {
  display: flex;
  align-items: center;
  flex-direction: row;
}
#page-total-net-income header > div:first-child > svg {
  font-size: 1.75rem;
  margin: 0 15px;
  color: #c0c0c0;
}
#page-total-net-income header > div:first-child > svg:hover {
  color: #000;
  cursor: pointer;
}
#page-total-net-income header span {
  color: #c0c0c0;
  font-size: 1.75rem;
  margin: 0 10px;
}
#page-total-net-income header .field-select {
  margin: 0 10px;
}
#page-total-net-income header .field-select input:focus {
  border-bottom: 1px solid #c0ff00 !important;
  box-shadow: 0 1px 0 0 #c0ff00 !important;
}
#page-total-net-income header .field-select input:-webkit-autofill,
#page-total-net-income header .field-select input:-webkit-autofill:focus {
  box-shadow: 0 0 0 30px #eee inset !important;
}
#page-total-net-income header .dropdown-content li {
  min-height: 4px !important;
}
#page-total-net-income header .dropdown-content li > span {
  padding: 5px 14px;
  color: #000;
  font-size: 1rem;
}
#page-total-net-income header .dropdown-content li > span:hover {
  background-color: #eee;
}
#page-total-net-income header .dropdown-content li.selected {
  background-color: #fff;
}
#page-total-net-income div.total-net-income {
  display: flex;
  flex: 1;
  max-height: calc(100vh - 200px);
}

@media (max-width: 650px) {
  #page-total-net-income {
    min-height: calc(100vh - 90px);
  }
  #page-total-net-income header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #page-total-net-income header > div:first-child {
    flex: 1;
    margin-right: auto;
  }
  #page-total-net-income header span {
    color: #c0c0c0;
    font-size: 1.25rem;
  }
}#table-operational-expenses {
  display: flex;
  flex-direction: row;
}
#table-operational-expenses div.content {
  display: flex;
  align-items: flex-end;
}
#table-operational-expenses div ul {
  width: 180px;
}
#table-operational-expenses div ul.only-on-mobile {
  display: none;
}
#table-operational-expenses div ul:first-child {
  width: 220px;
}
#table-operational-expenses div ul:first-child li {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-end;
  border-radius: 3px 0 0 3px;
}
#table-operational-expenses div ul:last-child li {
  border-radius: 0 3px 3px 0;
}
#table-operational-expenses div ul > li:last-child span {
  font-weight: bold;
  margin-top: 5px;
}
#table-operational-expenses div ul li {
  display: flex;
  font-size: 0.85rem;
  padding: 0 12px;
  background-color: #fff;
  line-height: 1.75rem;
}
#table-operational-expenses div ul li:nth-child(even) {
  filter: brightness(0.97);
}
#table-operational-expenses div ul li span {
  color: #000;
}
#table-operational-expenses div ul li span.value {
  flex: 1;
}
#table-operational-expenses div ul li span.title {
  margin-bottom: 5px;
  font-weight: bold;
}
#table-operational-expenses div ul li span.title.planned {
  color: #ff9800;
}
#table-operational-expenses div ul li span.title.reached {
  color: #01579b;
}

#without-permission {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  margin: 20px;
}
#without-permission span {
  margin-left: 15px;
  color: #c0c0c0;
  font-weight: bold;
}
#without-permission svg {
  font-size: 2.5rem;
  color: #c0c0c0;
}

@media (max-width: 650px) {
  #table-operational-expenses {
    display: flex;
    flex-direction: column;
  }
  #table-operational-expenses div.content:first-child {
    margin-bottom: 10px;
  }
  #table-operational-expenses div ul {
    width: 140px;
  }
  #table-operational-expenses div ul.only-on-mobile {
    display: block;
  }
  #table-operational-expenses div ul:first-child {
    width: 170px;
  }
  #table-operational-expenses div ul li {
    font-size: 0.7rem;
    padding: 0 8px;
    line-height: 1.25rem;
  }
}#chart-operational-expenses {
  border-radius: 5px;
  margin: 5px;
  width: 98%;
  height: 350px;
  padding: 15px;
  padding-bottom: 25px;
}
#chart-operational-expenses div.without-permission,
#chart-operational-expenses div.without-data {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}
#chart-operational-expenses div.without-permission span,
#chart-operational-expenses div.without-data span {
  margin-left: 15px;
  color: #c0c0c0;
  font-weight: bold;
}
#chart-operational-expenses div.without-permission svg,
#chart-operational-expenses div.without-data svg {
  font-size: 2.5rem;
  color: #c0c0c0;
}
#chart-operational-expenses section.summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 5px;
}
#chart-operational-expenses section.summary div.totalizers {
  display: flex;
  flex: 1;
  flex-direction: row;
  font-weight: bold;
}
#chart-operational-expenses section.summary div.totalizers span {
  margin: 0 10px;
  font-size: 0.7rem;
}
#chart-operational-expenses section.summary div.totalizers span.planned {
  color: #ff9800;
}
#chart-operational-expenses section.summary div.totalizers span.reached {
  color: #01579b;
}
#chart-operational-expenses section.summary div.legend {
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#chart-operational-expenses section.summary div.legend span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 1px 10px 0 10px;
}
#chart-operational-expenses section.summary div.legend span.planned {
  margin-right: 15px;
}
#chart-operational-expenses section.summary div.legend span.planned::before {
  background: #ff9800;
}
#chart-operational-expenses section.summary div.legend span.reached {
  margin-right: 15px;
}
#chart-operational-expenses section.summary div.legend span.reached::before {
  background: #01579b;
}

@media (max-height: 700px) {
  #chart-operational-expenses {
    height: 250px;
  }
}
@media (max-width: 650px) {
  #chart-operational-expenses {
    height: 200px;
  }
  #chart-operational-expenses section.summary {
    display: flex;
    flex-direction: column;
  }
  #chart-operational-expenses section.summary div.totalizers span {
    font-size: 0.5rem;
    margin: 0 5px;
  }
  #chart-operational-expenses section.summary div.legend span {
    font-size: 0.5rem;
    margin: 0 5px;
  }
}#page-operational-expenses {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  height: calc(100vh - 50px);
}
#page-operational-expenses header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
#page-operational-expenses header > div:first-child {
  display: flex;
  align-items: center;
  flex-direction: row;
}
#page-operational-expenses header > div:first-child > svg {
  font-size: 1.75rem;
  margin: 0 15px;
  color: #c0c0c0;
}
#page-operational-expenses header > div:first-child > svg:hover {
  color: #000;
  cursor: pointer;
}
#page-operational-expenses header span {
  color: #c0c0c0;
  font-size: 1.75rem;
  margin: 0 10px;
}
#page-operational-expenses header .field-select {
  margin: 0 10px;
}
#page-operational-expenses header .field-select input:focus {
  border-bottom: 1px solid #c0ff00 !important;
  box-shadow: 0 1px 0 0 #c0ff00 !important;
}
#page-operational-expenses header .field-select input:-webkit-autofill,
#page-operational-expenses header .field-select input:-webkit-autofill:focus {
  box-shadow: 0 0 0 30px #eee inset !important;
}
#page-operational-expenses header .dropdown-content li {
  min-height: 4px !important;
}
#page-operational-expenses header .dropdown-content li > span {
  padding: 5px 14px;
  color: #000;
  font-size: 1rem;
}
#page-operational-expenses header .dropdown-content li > span:hover {
  background-color: #eee;
}
#page-operational-expenses header .dropdown-content li.selected {
  background-color: #fff;
}
#page-operational-expenses main {
  display: flex;
  flex: 1;
  flex-direction: column;
}
#page-operational-expenses main .table {
  display: flex;
  flex: 1;
  justify-content: center;
  max-height: 220px;
}
#page-operational-expenses main .chart {
  display: flex;
  flex: 1;
}

@media (max-width: 650px) {
  #page-operational-expenses {
    min-height: calc(100vh - 90px);
  }
  #page-operational-expenses header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #page-operational-expenses header > div:first-child {
    flex: 1;
    margin-right: auto;
  }
  #page-operational-expenses header span {
    color: #c0c0c0;
    font-size: 1.25rem;
  }
  #page-operational-expenses main {
    display: flex;
    flex: 1;
    flex-direction: column;
  }
  #page-operational-expenses main .table {
    display: flex;
    flex: 1;
    justify-content: center;
    max-height: 330px;
  }
  #page-operational-expenses main .chart {
    display: flex;
  }
}#chart-comparative-total-net-income {
  border-radius: 5px;
  margin: 5px;
  max-height: 90%;
  width: 100%;
  padding: 15px;
}
#chart-comparative-total-net-income div.without-permission,
#chart-comparative-total-net-income div.without-data {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}
#chart-comparative-total-net-income div.without-permission span,
#chart-comparative-total-net-income div.without-data span {
  margin-left: 15px;
  color: #c0c0c0;
  font-weight: bold;
}
#chart-comparative-total-net-income div.without-permission svg,
#chart-comparative-total-net-income div.without-data svg {
  font-size: 2.5rem;
  color: #c0c0c0;
}
#chart-comparative-total-net-income section.summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}
#chart-comparative-total-net-income section.summary div.totalizers {
  display: flex;
  flex: 1;
  flex-direction: row;
  font-weight: bold;
}
#chart-comparative-total-net-income section.summary div.totalizers span {
  margin: 0 10px;
  font-size: 0.8rem;
}
#chart-comparative-total-net-income section.summary div.totalizers span.current-year {
  color: #01579b;
}
#chart-comparative-total-net-income section.summary div.totalizers span.last-year {
  color: #ff9800;
}
#chart-comparative-total-net-income section.summary div.totalizers span.year-before {
  color: #c0c0c0;
}
#chart-comparative-total-net-income section.summary div.legend {
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#chart-comparative-total-net-income section.summary div.legend span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 1px 10px 0 10px;
}
#chart-comparative-total-net-income section.summary div.legend span.current-year {
  margin-right: 15px;
}
#chart-comparative-total-net-income section.summary div.legend span.current-year::before {
  background: #01579b;
}
#chart-comparative-total-net-income section.summary div.legend span.last-year {
  margin-right: 15px;
}
#chart-comparative-total-net-income section.summary div.legend span.last-year::before {
  background: #ff9800;
}
#chart-comparative-total-net-income section.summary div.legend span.year-before {
  margin-right: 15px;
}
#chart-comparative-total-net-income section.summary div.legend span.year-before::before {
  background: #c0c0c0;
}

@media (max-width: 650px) {
  #chart-comparative-total-net-income {
    max-height: 80%;
  }
  #chart-comparative-total-net-income section.summary {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
  }
  #chart-comparative-total-net-income section.summary div.totalizers span {
    text-align: center;
    font-size: 0.7rem;
    margin: 0 5px;
  }
  #chart-comparative-total-net-income section.summary div.legend span {
    margin: 0 5px;
  }
}#page-comparative-total-net-income {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  height: calc(100vh - 130px);
}
#page-comparative-total-net-income header {
  display: flex;
  align-items: center;
  flex-direction: row;
}
#page-comparative-total-net-income header > svg {
  font-size: 1.75rem;
  margin: 0 15px;
  color: #c0c0c0;
}
#page-comparative-total-net-income header > svg:hover {
  color: #000;
  cursor: pointer;
}
#page-comparative-total-net-income header span {
  color: #c0c0c0;
  font-size: 1.75rem;
  margin: 0 10px;
}
#page-comparative-total-net-income header .field-select {
  margin: 0 10px;
}
#page-comparative-total-net-income header .field-select input:focus {
  border-bottom: 1px solid #c0ff00 !important;
  box-shadow: 0 1px 0 0 #c0ff00 !important;
}
#page-comparative-total-net-income header .field-select input:-webkit-autofill,
#page-comparative-total-net-income header .field-select input:-webkit-autofill:focus {
  box-shadow: 0 0 0 30px #eee inset !important;
}
#page-comparative-total-net-income header .dropdown-content li {
  min-height: 4px !important;
}
#page-comparative-total-net-income header .dropdown-content li > span {
  padding: 5px 14px;
  color: #000;
  font-size: 1rem;
}
#page-comparative-total-net-income header .dropdown-content li > span:hover {
  background-color: #eee;
}
#page-comparative-total-net-income header .dropdown-content li.selected {
  background-color: #fff;
}
#page-comparative-total-net-income div.link-compare {
  align-self: flex-end;
  display: flex;
  justify-content: center;
  padding-right: 20px;
  color: #c0c0c0;
}
#page-comparative-total-net-income div.link-compare:hover {
  color: #000;
  cursor: pointer;
}
#page-comparative-total-net-income div.link-compare > svg {
  font-size: 1.5rem;
  margin: 0 5px;
}
#page-comparative-total-net-income div.total-net-income {
  display: flex;
  flex: 1;
  max-height: calc(100vh - 200px);
}

@media (max-width: 650px) {
  #page-comparative-total-net-income {
    min-height: calc(100vh - 90px);
  }
  #page-comparative-total-net-income header span {
    color: #c0c0c0;
    font-size: 1.25rem;
  }
  #page-comparative-total-net-income div.link-compare {
    align-self: center;
    padding-top: 10px;
    padding-right: 0;
  }
}#chart-comparative-turnover-total-net-reached {
  border-radius: 5px;
  margin: 5px;
  max-height: 90%;
  width: 100%;
  padding: 15px;
}
#chart-comparative-turnover-total-net-reached div.without-permission,
#chart-comparative-turnover-total-net-reached div.without-data {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}
#chart-comparative-turnover-total-net-reached div.without-permission span,
#chart-comparative-turnover-total-net-reached div.without-data span {
  margin-left: 15px;
  color: #c0c0c0;
  font-weight: bold;
}
#chart-comparative-turnover-total-net-reached div.without-permission svg,
#chart-comparative-turnover-total-net-reached div.without-data svg {
  font-size: 2.5rem;
  color: #c0c0c0;
}
#chart-comparative-turnover-total-net-reached section.summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}
#chart-comparative-turnover-total-net-reached section.summary div.legend {
  font-size: 0.8rem;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
}
#chart-comparative-turnover-total-net-reached section.summary div.legend span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 1px 10px 0 10px;
}
#chart-comparative-turnover-total-net-reached section.summary div.legend span.turnover {
  margin-right: 15px;
}
#chart-comparative-turnover-total-net-reached section.summary div.legend span.turnover::before {
  background: #01579b;
}
#chart-comparative-turnover-total-net-reached section.summary div.legend span.total-net {
  margin-right: 15px;
}
#chart-comparative-turnover-total-net-reached section.summary div.legend span.total-net::before {
  background: #ff9800;
}

@media (max-width: 650px) {
  #chart-comparative-turnover-total-net-reached {
    max-height: 80%;
  }
  #chart-comparative-turnover-total-net-reached section.summary {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
  }
  #chart-comparative-turnover-total-net-reached section.summary div.legend span {
    margin: 0 5px;
  }
}#page-comparative-turnover-total-net {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  height: calc(100vh - 130px);
}
#page-comparative-turnover-total-net header {
  display: flex;
  align-items: center;
  flex-direction: row;
}
#page-comparative-turnover-total-net header > svg {
  font-size: 1.75rem;
  margin: 0 15px;
  color: #c0c0c0;
}
#page-comparative-turnover-total-net header > svg:hover {
  color: #000;
  cursor: pointer;
}
#page-comparative-turnover-total-net header span {
  color: #c0c0c0;
  font-size: 1.75rem;
  margin: 0 10px;
}
#page-comparative-turnover-total-net header .field-select {
  margin: 0 10px;
}
#page-comparative-turnover-total-net header .field-select input:focus {
  border-bottom: 1px solid #c0ff00 !important;
  box-shadow: 0 1px 0 0 #c0ff00 !important;
}
#page-comparative-turnover-total-net header .field-select input:-webkit-autofill,
#page-comparative-turnover-total-net header .field-select input:-webkit-autofill:focus {
  box-shadow: 0 0 0 30px #eee inset !important;
}
#page-comparative-turnover-total-net header .dropdown-content li {
  min-height: 4px !important;
}
#page-comparative-turnover-total-net header .dropdown-content li > span {
  padding: 5px 14px;
  color: #000;
  font-size: 1rem;
}
#page-comparative-turnover-total-net header .dropdown-content li > span:hover {
  background-color: #eee;
}
#page-comparative-turnover-total-net header .dropdown-content li.selected {
  background-color: #fff;
}
#page-comparative-turnover-total-net div.comparative {
  display: flex;
  flex: 1;
  max-height: calc(100vh - 175px);
}

@media (max-width: 650px) {
  #page-comparative-turnover-total-net {
    min-height: calc(100vh - 90px);
  }
  #page-comparative-turnover-total-net header span {
    color: #c0c0c0;
    font-size: 1.25rem;
  }
}
/* ChartTurnover — styling handled via Tailwind utility classes.
   This file is intentionally minimal. */
/* Ensure Recharts tooltip renders above other layered elements */
.recharts-tooltip-wrapper {
  z-index: 50 !important;
}

/* legacy selector kept in case old DOM nodes survive HMR */
#chart-turnover {
  width: 100%;
}
#chart-turnover div.without-permission,
#chart-turnover div.without-data {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
/* Turnover page — layout and header handled via Tailwind utility classes */#chart-comparative-turnover {
  border-radius: 5px;
  margin: 5px;
  max-height: 90%;
  width: 100%;
  padding: 15px;
}
#chart-comparative-turnover div.without-permission,
#chart-comparative-turnover div.without-data {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}
#chart-comparative-turnover div.without-permission span,
#chart-comparative-turnover div.without-data span {
  margin-left: 15px;
  color: #c0c0c0;
  font-weight: bold;
}
#chart-comparative-turnover div.without-permission svg,
#chart-comparative-turnover div.without-data svg {
  font-size: 2.5rem;
  color: #c0c0c0;
}
#chart-comparative-turnover section.summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}
#chart-comparative-turnover section.summary div.totalizers {
  display: flex;
  flex: 1;
  flex-direction: row;
  font-weight: bold;
}
#chart-comparative-turnover section.summary div.totalizers span {
  margin: 0 10px;
  font-size: 0.8rem;
}
#chart-comparative-turnover section.summary div.totalizers span.current-year {
  color: #01579b;
}
#chart-comparative-turnover section.summary div.totalizers span.last-year {
  color: #ff9800;
}
#chart-comparative-turnover section.summary div.totalizers span.year-before {
  color: #c0c0c0;
}
#chart-comparative-turnover section.summary div.totalizers span.year-before3 {
  color: #01579b;
}
#chart-comparative-turnover section.summary div.totalizers span.year-before2 {
  color: #f44336;
}
#chart-comparative-turnover section.summary div.totalizers span.year-before1 {
  color: #4caf50;
}
#chart-comparative-turnover section.summary div.legend {
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#chart-comparative-turnover section.summary div.legend span::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 1px 10px 0 10px;
}
#chart-comparative-turnover section.summary div.legend span.current-year {
  margin-right: 15px;
}
#chart-comparative-turnover section.summary div.legend span.current-year::before {
  background: #000;
}
#chart-comparative-turnover section.summary div.legend span.last-year {
  margin-right: 15px;
}
#chart-comparative-turnover section.summary div.legend span.last-year::before {
  background: #ff9800;
}
#chart-comparative-turnover section.summary div.legend span.year-before {
  margin-right: 15px;
}
#chart-comparative-turnover section.summary div.legend span.year-before::before {
  background: #c0c0c0;
}
#chart-comparative-turnover section.summary div.legend span.year-before3 {
  margin-right: 15px;
}
#chart-comparative-turnover section.summary div.legend span.year-before3::before {
  background: #01579b;
}
#chart-comparative-turnover section.summary div.legend span.year-before2 {
  margin-right: 15px;
}
#chart-comparative-turnover section.summary div.legend span.year-before2::before {
  background: #f44336;
}
#chart-comparative-turnover section.summary div.legend span.year-before1 {
  margin-right: 15px;
}
#chart-comparative-turnover section.summary div.legend span.year-before1::before {
  background: #4caf50;
}

@media (max-width: 650px) {
  #chart-comparative-turnover {
    max-height: 80%;
  }
  #chart-comparative-turnover section.summary {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
  }
  #chart-comparative-turnover section.summary div.totalizers span {
    text-align: center;
    font-size: 0.7rem;
    margin: 0 5px;
  }
  #chart-comparative-turnover section.summary div.legend span {
    margin: 0 5px;
  }
}#page-comparative-turnover {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  height: calc(100vh - 130px);
}
#page-comparative-turnover header {
  display: flex;
  align-items: center;
  flex-direction: row;
}
#page-comparative-turnover header > svg {
  font-size: 1.75rem;
  margin: 0 15px;
  color: #c0c0c0;
}
#page-comparative-turnover header > svg:hover {
  color: #000;
  cursor: pointer;
}
#page-comparative-turnover header span {
  color: #c0c0c0;
  font-size: 1.75rem;
  margin: 0 10px;
}
#page-comparative-turnover header .field-select {
  margin: 0 10px;
}
#page-comparative-turnover header .field-select input:focus {
  border-bottom: 1px solid #c0ff00 !important;
  box-shadow: 0 1px 0 0 #c0ff00 !important;
}
#page-comparative-turnover header .field-select input:-webkit-autofill,
#page-comparative-turnover header .field-select input:-webkit-autofill:focus {
  box-shadow: 0 0 0 30px #eee inset !important;
}
#page-comparative-turnover header .dropdown-content li {
  min-height: 4px !important;
}
#page-comparative-turnover header .dropdown-content li > span {
  padding: 5px 14px;
  color: #000;
  font-size: 1rem;
}
#page-comparative-turnover header .dropdown-content li > span:hover {
  background-color: #eee;
}
#page-comparative-turnover header .dropdown-content li.selected {
  background-color: #fff;
}
#page-comparative-turnover div.link-compare {
  align-self: flex-end;
  display: flex;
  justify-content: center;
  padding-right: 20px;
  color: #c0c0c0;
}
#page-comparative-turnover div.link-compare:hover {
  color: #000;
  cursor: pointer;
}
#page-comparative-turnover div.link-compare > svg {
  font-size: 1.5rem;
  margin: 0 5px;
}
#page-comparative-turnover div.turnover {
  display: flex;
  flex: 1;
  max-height: calc(100vh - 200px);
}

@media (max-width: 650px) {
  #page-comparative-turnover {
    min-height: calc(100vh - 90px);
  }
  #page-comparative-turnover header span {
    color: #c0c0c0;
    font-size: 1.25rem;
  }
  #page-comparative-turnover div.link-compare {
    align-self: center;
    padding-top: 10px;
    padding-right: 0;
  }
}#page-costs {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: calc(100vh - 130px);
}
#page-costs header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
#page-costs header > div:first-child {
  display: flex;
  align-items: center;
  flex-direction: row;
}
#page-costs header > div:first-child > svg {
  font-size: 1.75rem;
  margin: 0 15px;
  color: #c0c0c0;
}
#page-costs header > div:first-child > svg:hover {
  color: #000;
  cursor: pointer;
}
#page-costs header > div:first-child > span {
  font-size: 1.25rem;
  font-weight: bold;
  color: #000;
}
#page-costs header .field-select select {
  padding: 8px 12px;
  border: 1px solid #c0c0c0;
  border-radius: 4px;
  font-size: 14px;
  background-color: #fff;
  cursor: pointer;
}
#page-costs header .field-select select:focus {
  outline: none;
  border-color: #000;
}
#page-costs .costs-content {
  display: flex;
  flex: 1;
  flex-direction: column;
}#page-commercial {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-commercial > .row .col {
  padding: 0;
}
#page-commercial div.box-item {
  background: #fff;
  display: flex;
  align-items: center;
  margin: 5px;
  text-align: center;
  height: 75px;
  border: 3px solid #fff;
  border-left: 10px solid #c0ff00;
  padding: 0 5px 0 10px;
  border-radius: 3px;
  font-size: 16px;
  color: #000;
}
#page-commercial div.box-item svg {
  margin-right: 10px;
  font-size: 2rem;
  color: #c0c0c0;
}
#page-commercial div.box-item:hover {
  border: 3px solid #c0ff00;
  border-left: 10px solid #c0ff00;
}
#page-commercial div.box-item .title {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}
#page-commercial div.box-item .title > span {
  color: #000;
}
#page-commercial div.title-section {
  border-bottom: 2px solid #eee;
  margin: 0 0 10px 10px;
}
#page-commercial div.title-section > span {
  margin: 10px 0 10px 0;
  color: #c0c0c0;
  font-size: 16px;
}

@media (max-width: 650px) {
  #page-commercial .tab-item-link {
    font-size: 0.75rem;
  }
}#chart-annual-sales {
  border-radius: 5px;
  margin: 5px;
  max-height: 85%;
  width: 100%;
  padding: 15px;
}
#chart-annual-sales div.without-permission,
#chart-annual-sales div.without-data {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}
#chart-annual-sales div.without-permission span,
#chart-annual-sales div.without-data span {
  margin-left: 15px;
  color: #c0c0c0;
  font-weight: bold;
}
#chart-annual-sales div.without-permission svg,
#chart-annual-sales div.without-data svg {
  font-size: 2.5rem;
  color: #c0c0c0;
}
#chart-annual-sales section.summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}
#chart-annual-sales section.summary div.totalizers {
  display: flex;
  flex: 1;
  flex-direction: row;
  font-weight: bold;
}
#chart-annual-sales section.summary div.totalizers span {
  margin: 0 10px;
  font-size: 0.8rem;
}
#chart-annual-sales section.summary div.totalizers span.planned {
  color: #ff9800;
}
#chart-annual-sales section.summary div.totalizers span.reached {
  color: #01579b;
}
#chart-annual-sales section.summary div.legend {
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#chart-annual-sales section.summary div.legend span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 1px 10px 0 10px;
}
#chart-annual-sales section.summary div.legend span.planned {
  margin-right: 15px;
}
#chart-annual-sales section.summary div.legend span.planned::before {
  background: #ff9800;
}
#chart-annual-sales section.summary div.legend span.reached {
  margin-right: 15px;
}
#chart-annual-sales section.summary div.legend span.reached::before {
  background: #01579b;
}

@media (max-width: 650px) {
  #chart-annual-sales {
    max-height: 80%;
  }
  #chart-annual-sales section.summary {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
  }
  #chart-annual-sales section.summary div.totalizers span {
    font-size: 0.7rem;
    margin: 0 5px;
  }
  #chart-annual-sales section.summary div.legend span {
    margin: 0 5px;
  }
}#page-annual-sales {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  height: calc(100vh - 130px);
}
#page-annual-sales header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
#page-annual-sales header > div:first-child {
  display: flex;
  align-items: center;
  flex-direction: row;
}
#page-annual-sales header > div:first-child > svg {
  font-size: 1.75rem;
  margin: 0 15px;
  color: #c0c0c0;
}
#page-annual-sales header > div:first-child > svg:hover {
  color: #000;
  cursor: pointer;
}
#page-annual-sales header span {
  color: #c0c0c0;
  font-size: 1.75rem;
  margin: 0 10px;
}
#page-annual-sales header .field-select {
  margin: 0 10px;
}
#page-annual-sales header .field-select input:focus {
  border-bottom: 1px solid #c0ff00 !important;
  box-shadow: 0 1px 0 0 #c0ff00 !important;
}
#page-annual-sales header .field-select input:-webkit-autofill,
#page-annual-sales header .field-select input:-webkit-autofill:focus {
  box-shadow: 0 0 0 30px #eee inset !important;
}
#page-annual-sales header .dropdown-content li {
  min-height: 4px !important;
}
#page-annual-sales header .dropdown-content li > span {
  padding: 5px 14px;
  color: #000;
  font-size: 1rem;
}
#page-annual-sales header .dropdown-content li > span:hover {
  background-color: #eee;
}
#page-annual-sales header .dropdown-content li.selected {
  background-color: #fff;
}
#page-annual-sales span.message-period {
  color: #c0c0c0;
  font-size: 14px;
  font-weight: bold;
  text-align: right;
  margin-right: 20px;
  margin-top: 0;
}
#page-annual-sales div.chart {
  display: flex;
  flex: 1;
  max-height: calc(100vh - 175px);
}

@media (max-width: 650px) {
  #page-annual-sales {
    min-height: calc(100vh - 90px);
  }
  #page-annual-sales header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #page-annual-sales header > div:first-child {
    flex: 1;
    margin-right: auto;
  }
  #page-annual-sales header span {
    color: #c0c0c0;
    font-size: 1.25rem;
  }
  #page-annual-sales span.message-period {
    font-size: 12px;
    text-align: center;
    margin-right: 0;
    margin-top: 10px;
  }
}#page-materials-management {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-materials-management > .row .col {
  padding: 0;
}
#page-materials-management div.box-item {
  background: #fff;
  display: flex;
  align-items: center;
  margin: 5px;
  text-align: center;
  height: 75px;
  border: 3px solid #fff;
  border-left: 10px solid #c0ff00;
  padding: 0 5px 0 10px;
  border-radius: 3px;
  font-size: 16px;
  color: #000;
}
#page-materials-management div.box-item svg {
  margin-right: 10px;
  font-size: 2rem;
  color: #c0c0c0;
}
#page-materials-management div.box-item:hover {
  border: 3px solid #c0ff00;
  border-left: 10px solid #c0ff00;
}
#page-materials-management div.box-item .title {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}
#page-materials-management div.box-item .title > span {
  color: #000;
}
#page-materials-management div.title-section {
  border-bottom: 2px solid #eee;
  margin: 0 0 10px 10px;
}
#page-materials-management div.title-section > span {
  margin: 10px 0 10px 0;
  color: #c0c0c0;
  font-size: 16px;
}

@media (max-width: 650px) {
  #page-materials-management .tab-item-link {
    font-size: 0.75rem;
  }
}#chart-total-inventory {
  border-radius: 5px;
  margin: 5px;
  max-height: 95%;
  width: 100%;
  padding: 15px;
}
#chart-total-inventory div.without-permission,
#chart-total-inventory div.without-data {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}
#chart-total-inventory div.without-permission span,
#chart-total-inventory div.without-data span {
  margin-left: 15px;
  color: #c0c0c0;
  font-weight: bold;
}
#chart-total-inventory div.without-permission svg,
#chart-total-inventory div.without-data svg {
  font-size: 2.5rem;
  color: #c0c0c0;
}#page-total-inventory {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  height: calc(100vh - 130px);
}
#page-total-inventory header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
#page-total-inventory header > div:first-child {
  display: flex;
  align-items: center;
  flex-direction: row;
}
#page-total-inventory header > div:first-child > svg {
  font-size: 1.75rem;
  margin: 0 15px;
  color: #c0c0c0;
}
#page-total-inventory header > div:first-child > svg:hover {
  color: #000;
  cursor: pointer;
}
#page-total-inventory header span {
  color: #c0c0c0;
  font-size: 1.75rem;
  margin: 0 10px;
}
#page-total-inventory div.chart {
  display: flex;
  flex: 1;
}

@media (max-width: 650px) {
  #page-total-inventory {
    min-height: calc(100vh - 90px);
  }
  #page-total-inventory header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #page-total-inventory header > div:first-child {
    flex: 1;
    margin-right: auto;
  }
  #page-total-inventory header span {
    color: #c0c0c0;
    font-size: 1.25rem;
  }
}#chart-total-inventory-warehouse {
  border-radius: 5px;
  margin: 5px;
  max-height: 100%;
  width: 100%;
  padding: 15px;
}
#chart-total-inventory-warehouse div.without-permission,
#chart-total-inventory-warehouse div.without-data {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}
#chart-total-inventory-warehouse div.without-permission span,
#chart-total-inventory-warehouse div.without-data span {
  margin-left: 15px;
  color: #c0c0c0;
  font-weight: bold;
}
#chart-total-inventory-warehouse div.without-permission svg,
#chart-total-inventory-warehouse div.without-data svg {
  font-size: 2.5rem;
  color: #c0c0c0;
}#chart-inventory-by-warehouse {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
#chart-inventory-by-warehouse div.without-permission,
#chart-inventory-by-warehouse div.without-data {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}
#chart-inventory-by-warehouse div.without-permission span,
#chart-inventory-by-warehouse div.without-data span {
  margin-left: 15px;
  color: #c0c0c0;
  font-weight: bold;
}
#chart-inventory-by-warehouse div.without-permission svg,
#chart-inventory-by-warehouse div.without-data svg {
  font-size: 2.5rem;
  color: #c0c0c0;
}#page-inventory-by-warehouse {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  height: calc(100vh - 110px);
}
#page-inventory-by-warehouse header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
#page-inventory-by-warehouse header > div:first-child {
  display: flex;
  align-items: center;
  flex-direction: row;
}
#page-inventory-by-warehouse header > div:first-child > svg {
  font-size: 1.75rem;
  margin: 0 15px;
  color: #c0c0c0;
}
#page-inventory-by-warehouse header > div:first-child > svg:hover {
  color: #000;
  cursor: pointer;
}
#page-inventory-by-warehouse header span {
  color: #c0c0c0;
  font-size: 1.75rem;
  margin: 0 10px;
}
#page-inventory-by-warehouse div.charts {
  display: flex;
  flex-direction: row;
  flex: 1;
}
#page-inventory-by-warehouse div.charts div.main-chart {
  display: flex;
  flex: 1;
  max-height: calc(100vh - 200px);
}
#page-inventory-by-warehouse div.charts div.detailed-chart-area {
  display: flex;
  flex-direction: column;
  flex: 1;
}
#page-inventory-by-warehouse div.charts div.detailed-chart-area .select-div {
  display: flex;
  align-items: center;
}
#page-inventory-by-warehouse div.charts div.detailed-chart-area .select-div.invisible {
  display: none;
}
#page-inventory-by-warehouse div.charts div.detailed-chart-area .select-div select {
  border-radius: 5px;
  margin-bottom: 5px;
  font-size: 12px;
}
#page-inventory-by-warehouse div.charts div.detailed-chart-area .select-div select:focus {
  outline-color: #c0ff00;
}
#page-inventory-by-warehouse div.charts div.detailed-chart-area .select-div label {
  width: 100px;
  text-align: right;
  padding-right: 5px;
}
#page-inventory-by-warehouse div.charts div.detailed-chart-area div.detailed-chart {
  display: flex;
  flex: 1;
}

@media (max-width: 650px) {
  #page-inventory-by-warehouse {
    min-height: calc(100vh - 90px);
  }
  #page-inventory-by-warehouse header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #page-inventory-by-warehouse header > div:first-child {
    flex: 1;
    margin-right: auto;
  }
  #page-inventory-by-warehouse header span {
    color: #c0c0c0;
    font-size: 1.25rem;
  }
  #page-inventory-by-warehouse div.charts {
    flex-direction: column;
  }
  #page-inventory-by-warehouse div.charts div.main-chart {
    display: block;
    flex: 1;
    max-height: 200px;
  }
  #page-inventory-by-warehouse div.charts div.detailed-chart-area .select-div select {
    font-size: 12px;
    margin: 1px;
    height: 2rem;
  }
}#chart-total-inventory-in-progress {
  border-radius: 5px;
  margin: 5px;
  max-height: 100%;
  width: 100%;
  padding: 15px;
}
#chart-total-inventory-in-progress div.without-permission,
#chart-total-inventory-in-progress div.without-data {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}
#chart-total-inventory-in-progress div.without-permission span,
#chart-total-inventory-in-progress div.without-data span {
  margin-left: 15px;
  color: #c0c0c0;
  font-weight: bold;
}
#chart-total-inventory-in-progress div.without-permission svg,
#chart-total-inventory-in-progress div.without-data svg {
  font-size: 2.5rem;
  color: #c0c0c0;
}#chart-inventory-in-progress {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
#chart-inventory-in-progress div.without-permission,
#chart-inventory-in-progress div.without-data {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}
#chart-inventory-in-progress div.without-permission span,
#chart-inventory-in-progress div.without-data span {
  margin-left: 15px;
  color: #c0c0c0;
  font-weight: bold;
}
#chart-inventory-in-progress div.without-permission svg,
#chart-inventory-in-progress div.without-data svg {
  font-size: 2.5rem;
  color: #c0c0c0;
}

@media (max-width: 650px) {
  #chart-inventory-in-progress {
    padding: 10px;
  }
}#page-inventory-in-progress {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  height: calc(100vh - 110px);
}
#page-inventory-in-progress header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
#page-inventory-in-progress header > div:first-child {
  display: flex;
  align-items: center;
  flex-direction: row;
}
#page-inventory-in-progress header > div:first-child > svg {
  font-size: 1.75rem;
  margin: 0 15px;
  color: #c0c0c0;
}
#page-inventory-in-progress header > div:first-child > svg:hover {
  color: #000;
  cursor: pointer;
}
#page-inventory-in-progress header span {
  color: #c0c0c0;
  font-size: 1.75rem;
  margin: 0 10px;
}
#page-inventory-in-progress div.charts {
  display: flex;
  flex-direction: row;
  flex: 1;
}
#page-inventory-in-progress div.charts div.main-chart {
  display: flex;
  flex: 1;
  max-height: calc(100vh - 200px);
}
#page-inventory-in-progress div.charts div.detailed-chart-area {
  display: flex;
  flex-direction: column;
  flex: 1;
}
#page-inventory-in-progress div.charts div.detailed-chart-area div.detailed-chart {
  display: flex;
  flex: 1;
}

@media (max-width: 650px) {
  #page-inventory-in-progress {
    min-height: calc(100vh - 90px);
  }
  #page-inventory-in-progress header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #page-inventory-in-progress header > div:first-child {
    flex: 1;
    margin-right: auto;
  }
  #page-inventory-in-progress header span {
    color: #c0c0c0;
    font-size: 1.25rem;
  }
  #page-inventory-in-progress div.charts {
    flex-direction: column;
  }
  #page-inventory-in-progress div.charts div.main-chart {
    display: block;
    flex: 1;
    max-height: 200px;
  }
}#page-production {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-production > .row .col {
  padding: 0;
}
#page-production div.box-item {
  background: #fff;
  display: flex;
  align-items: center;
  margin: 5px;
  text-align: center;
  height: 75px;
  border: 3px solid #fff;
  border-left: 10px solid #c0ff00;
  padding: 0 5px 0 10px;
  border-radius: 3px;
  font-size: 16px;
  color: #000;
}
#page-production div.box-item svg {
  margin-right: 10px;
  font-size: 2rem;
  color: #c0c0c0;
}
#page-production div.box-item:hover {
  border: 3px solid #c0ff00;
  border-left: 10px solid #c0ff00;
}
#page-production div.box-item .title {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}
#page-production div.box-item .title > span {
  color: #000;
}
#page-production div.title-section {
  border-bottom: 2px solid #eee;
  margin: 0 0 10px 10px;
}
#page-production div.title-section > span {
  margin: 10px 0 10px 0;
  color: #c0c0c0;
  font-size: 16px;
}

@media (max-width: 650px) {
  #page-production .tab-item-link {
    font-size: 0.75rem;
  }
}#page-engineering {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-engineering > .row .col {
  padding: 0;
}
#page-engineering div.box-item {
  background: #fff;
  display: flex;
  align-items: center;
  margin: 5px;
  text-align: center;
  height: 75px;
  border: 3px solid #fff;
  border-left: 10px solid #c0ff00;
  padding: 0 5px 0 10px;
  border-radius: 3px;
  font-size: 16px;
  color: #000;
}
#page-engineering div.box-item svg {
  margin-right: 10px;
  font-size: 2rem;
  color: #c0c0c0;
}
#page-engineering div.box-item:hover {
  border: 3px solid #c0ff00;
  border-left: 10px solid #c0ff00;
}
#page-engineering div.box-item .title {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}
#page-engineering div.box-item .title > span {
  color: #000;
}
#page-engineering div.title-section {
  border-bottom: 2px solid #eee;
  margin: 0 0 10px 10px;
}
#page-engineering div.title-section > span {
  margin: 10px 0 10px 0;
  color: #c0c0c0;
  font-size: 16px;
}

@media (max-width: 650px) {
  #page-engineering .tab-item-link {
    font-size: 0.75rem;
  }
}#table-engineering-projection {
  display: flex;
  flex: 1;
  flex-direction: row;
  min-height: calc(100vh - 140px);
}
#table-engineering-projection ul {
  max-width: 600px;
  margin: 0 auto;
}
#table-engineering-projection ul li {
  flex-direction: row;
  display: flex;
  flex: 1;
}
#table-engineering-projection ul li.current-month {
  border: 2px solid #c0ff00;
}
#table-engineering-projection ul li:nth-child(even) {
  background-color: #eee;
}
#table-engineering-projection ul li > div.column {
  padding: 5px;
  display: flex;
  flex: 1;
}
#table-engineering-projection ul li > div.column.total {
  background-color: #c0c0c0;
}
#table-engineering-projection ul li > div.column.total span {
  font-weight: bold;
  text-align: center;
}
#table-engineering-projection ul li > div.column.title > span {
  font-weight: bold;
}
#table-engineering-projection ul li > div.column:first-child {
  justify-content: center;
}
#table-engineering-projection ul li > div.column:first-child > span {
  font-weight: bold;
}
#table-engineering-projection ul li > div.column.updated-at {
  justify-content: flex-end;
}
#table-engineering-projection ul li > div.column span {
  font-size: 12px;
}

#without-permission {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  margin: 20px;
}
#without-permission span {
  margin-left: 15px;
  color: #c0c0c0;
  font-weight: bold;
}
#without-permission svg {
  font-size: 2.5rem;
  color: #c0c0c0;
}

@media (max-width: 650px) {
  #table-engineering-projection {
    height: calc(100vh - 130px);
  }
  #table-engineering-projection ul {
    max-width: 300px;
    margin-top: 20px;
  }
  #table-engineering-projection ul li > div.column {
    align-items: flex-end;
  }
  #table-engineering-projection ul li > div.column span {
    font-size: 10px;
  }
}#page-engineering-projection {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  height: calc(100vh - 110px);
}
#page-engineering-projection header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
#page-engineering-projection header > :first-child {
  display: flex;
  align-items: center;
  flex-direction: row;
}
#page-engineering-projection header > :first-child > svg {
  font-size: 1.75rem;
  margin: 0 15px;
  color: #c0c0c0;
}
#page-engineering-projection header > :first-child > svg:hover {
  color: #000;
  cursor: pointer;
}
#page-engineering-projection header span {
  color: #c0c0c0;
  font-size: 1.75rem;
  margin: 0 10px;
}
#page-engineering-projection div.engineering-projection {
  display: flex;
  flex: 1;
  max-height: calc(100vh - 200px);
}

@media (max-width: 650px) {
  #page-engineering-projection {
    min-height: calc(100vh - 90px);
  }
  #page-engineering-projection header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }
  #page-engineering-projection header > div:first-child {
    flex: 1;
    margin-right: auto;
  }
  #page-engineering-projection header span {
    color: #c0c0c0;
    font-size: 1.25rem;
  }
}#chart-comparative-produced-projected {
  border-radius: 5px;
  margin: 5px;
  max-height: 90%;
  width: 100%;
  padding: 15px;
}
#chart-comparative-produced-projected div.without-permission,
#chart-comparative-produced-projected div.without-data {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}
#chart-comparative-produced-projected div.without-permission span,
#chart-comparative-produced-projected div.without-data span {
  margin-left: 15px;
  color: #c0c0c0;
  font-weight: bold;
}
#chart-comparative-produced-projected div.without-permission svg,
#chart-comparative-produced-projected div.without-data svg {
  font-size: 2.5rem;
  color: #c0c0c0;
}
#chart-comparative-produced-projected section.summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}
#chart-comparative-produced-projected section.summary div.totalizers {
  display: flex;
  flex: 1;
  flex-direction: row;
  font-weight: bold;
}
#chart-comparative-produced-projected section.summary div.totalizers span {
  margin: 0 10px;
  font-size: 0.8rem;
}
#chart-comparative-produced-projected section.summary div.totalizers span.planned {
  color: #ff9800;
}
#chart-comparative-produced-projected section.summary div.totalizers span.reached {
  color: #01579b;
}
#chart-comparative-produced-projected section.summary div.legend {
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#chart-comparative-produced-projected section.summary div.legend span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 1px 10px 0 10px;
}
#chart-comparative-produced-projected section.summary div.legend span.planned {
  margin-right: 15px;
}
#chart-comparative-produced-projected section.summary div.legend span.planned::before {
  background: #ff9800;
}
#chart-comparative-produced-projected section.summary div.legend span.reached {
  margin-right: 15px;
}
#chart-comparative-produced-projected section.summary div.legend span.reached::before {
  background: #01579b;
}

@media (max-width: 650px) {
  #chart-comparative-produced-projected {
    max-height: 80%;
  }
  #chart-comparative-produced-projected section.summary {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
  }
  #chart-comparative-produced-projected section.summary div.totalizers span {
    font-size: 0.7rem;
    margin: 0 5px;
  }
  #chart-comparative-produced-projected section.summary div.legend span {
    margin: 0 5px;
  }
}#page-engineering-comparative-produced-projected {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  height: calc(100vh - 110px);
}
#page-engineering-comparative-produced-projected header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
#page-engineering-comparative-produced-projected header > div:first-child {
  display: flex;
  align-items: center;
  flex-direction: row;
}
#page-engineering-comparative-produced-projected header > div:first-child > svg {
  font-size: 1.75rem;
  margin: 0 15px;
  color: #c0c0c0;
}
#page-engineering-comparative-produced-projected header > div:first-child > svg:hover {
  color: #000;
  cursor: pointer;
}
#page-engineering-comparative-produced-projected header span {
  color: #c0c0c0;
  font-size: 1.75rem;
  margin: 0 10px;
}
#page-engineering-comparative-produced-projected header .field-select {
  margin: 0 10px;
}
#page-engineering-comparative-produced-projected header .field-select input:focus {
  border-bottom: 1px solid #c0ff00 !important;
  box-shadow: 0 1px 0 0 #c0ff00 !important;
}
#page-engineering-comparative-produced-projected header .field-select input:-webkit-autofill,
#page-engineering-comparative-produced-projected header .field-select input:-webkit-autofill:focus {
  box-shadow: 0 0 0 30px #eee inset !important;
}
#page-engineering-comparative-produced-projected header .dropdown-content li {
  min-height: 4px !important;
}
#page-engineering-comparative-produced-projected header .dropdown-content li > span {
  padding: 5px 14px;
  color: #000;
  font-size: 1rem;
}
#page-engineering-comparative-produced-projected header .dropdown-content li > span:hover {
  background-color: #eee;
}
#page-engineering-comparative-produced-projected header .dropdown-content li.selected {
  background-color: #fff;
}
#page-engineering-comparative-produced-projected div.produced-income {
  display: flex;
  flex: 1;
  max-height: calc(100vh - 200px);
}

@media (max-width: 650px) {
  #page-engineering-comparative-produced-projected {
    min-height: calc(100vh - 90px);
  }
  #page-engineering-comparative-produced-projected header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #page-engineering-comparative-produced-projected header > div:first-child {
    flex: 1;
    margin-right: auto;
  }
  #page-engineering-comparative-produced-projected header span {
    color: #c0c0c0;
    font-size: 1.25rem;
  }
}#table-wallet-balance {
  display: flex;
  flex: 1;
  flex-direction: row;
  min-height: calc(100vh - 140px);
}
#table-wallet-balance ul {
  max-width: 600px;
  margin: 0 auto;
}
#table-wallet-balance ul li {
  flex-direction: row;
  display: flex;
  flex: 1;
}
#table-wallet-balance ul li.current-month {
  border: 2px solid #c0ff00;
}
#table-wallet-balance ul li:nth-child(even) {
  background-color: #eee;
}
#table-wallet-balance ul li > div.column {
  padding: 5px;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}
#table-wallet-balance ul li > div.column.total {
  margin-top: 10px;
  background-color: #c0c0c0;
}
#table-wallet-balance ul li > div.column.total > span {
  font-weight: bold;
}
#table-wallet-balance ul li > div.column.title > span {
  font-weight: bold;
}
#table-wallet-balance ul li > div.column:first-child {
  justify-content: flex-end;
  width: 500px;
}
#table-wallet-balance ul li > div.column:first-child > span {
  font-weight: bold;
  text-align: right;
}
#table-wallet-balance ul li > div.column.updated-at {
  justify-content: flex-end;
}
#table-wallet-balance ul li > div.column span {
  font-size: 12px;
}

#without-permission {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  margin: 20px;
}
#without-permission span {
  margin-left: 15px;
  color: #c0c0c0;
  font-weight: bold;
}
#without-permission svg {
  font-size: 2.5rem;
  color: #c0c0c0;
}

@media (max-width: 650px) {
  #table-wallet-balance {
    height: calc(100vh - 130px);
  }
  #table-wallet-balance ul {
    max-width: 300px;
    margin-top: 20px;
  }
  #table-wallet-balance ul li > div.column {
    align-items: center;
    justify-content: center;
  }
  #table-wallet-balance ul li > div.column span {
    font-size: 10px;
    text-align: center;
  }
}#page-wallet-balance {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  height: calc(100vh - 110px);
}
#page-wallet-balance header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
#page-wallet-balance header > :first-child {
  display: flex;
  align-items: center;
  flex-direction: row;
}
#page-wallet-balance header > :first-child > svg {
  font-size: 1.75rem;
  margin: 0 15px;
  color: #c0c0c0;
}
#page-wallet-balance header > :first-child > svg:hover {
  color: #000;
  cursor: pointer;
}
#page-wallet-balance header span {
  color: #c0c0c0;
  font-size: 1.75rem;
  margin: 0 10px;
}
#page-wallet-balance div.wallet-balance {
  display: flex;
  flex: 1;
}

@media (max-width: 650px) {
  #page-wallet-balance {
    min-height: calc(100vh - 90px);
  }
  #page-wallet-balance header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }
  #page-wallet-balance header > div:first-child {
    flex: 1;
    margin-right: auto;
  }
  #page-wallet-balance header span {
    color: #c0c0c0;
    font-size: 1.25rem;
  }
}#page-production-comparative-produced-projected {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  height: calc(100vh - 110px);
}
#page-production-comparative-produced-projected header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
#page-production-comparative-produced-projected header > div:first-child {
  display: flex;
  align-items: center;
  flex-direction: row;
}
#page-production-comparative-produced-projected header > div:first-child > svg {
  font-size: 1.75rem;
  margin: 0 15px;
  color: #c0c0c0;
}
#page-production-comparative-produced-projected header > div:first-child > svg:hover {
  color: #000;
  cursor: pointer;
}
#page-production-comparative-produced-projected header span {
  color: #c0c0c0;
  font-size: 1.75rem;
  margin: 0 10px;
}
#page-production-comparative-produced-projected header .field-select {
  margin: 0 10px;
}
#page-production-comparative-produced-projected header .field-select input:focus {
  border-bottom: 1px solid #c0ff00 !important;
  box-shadow: 0 1px 0 0 #c0ff00 !important;
}
#page-production-comparative-produced-projected header .field-select input:-webkit-autofill,
#page-production-comparative-produced-projected header .field-select input:-webkit-autofill:focus {
  box-shadow: 0 0 0 30px #eee inset !important;
}
#page-production-comparative-produced-projected header .dropdown-content li {
  min-height: 4px !important;
}
#page-production-comparative-produced-projected header .dropdown-content li > span {
  padding: 5px 14px;
  color: #000;
  font-size: 1rem;
}
#page-production-comparative-produced-projected header .dropdown-content li > span:hover {
  background-color: #eee;
}
#page-production-comparative-produced-projected header .dropdown-content li.selected {
  background-color: #fff;
}
#page-production-comparative-produced-projected div.produced-income {
  display: flex;
  flex: 1;
  max-height: calc(100vh - 200px);
}

@media (max-width: 650px) {
  #page-production-comparative-produced-projected {
    min-height: calc(100vh - 90px);
  }
  #page-production-comparative-produced-projected header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #page-production-comparative-produced-projected header > div:first-child {
    flex: 1;
    margin-right: auto;
  }
  #page-production-comparative-produced-projected header span {
    color: #c0c0c0;
    font-size: 1.25rem;
  }
}.container-header-integrated-cost {
  margin-bottom: 10px;
}
.container-header-integrated-cost .container-selections {
  display: flex;
  padding: 5px;
  gap: 10px;
  align-items: center;
  background-color: white;
  border-radius: 8px;
}
.container-header-integrated-cost .page-title {
  font-size: 1rem;
  padding-top: 10px;
  font-weight: bold;
  text-align: center;
  color: #333;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.container-header-integrated-cost .page-title span {
  border-radius: 5px;
  padding: 2px;
  background-color: #eee;
}

.container-render-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 550px) {
  .container-selections {
    flex-direction: column;
    gap: 5px;
  }
}.chart-container-total-cost-per-script {
  height: 78vh;
  background-color: white;
}

.dxc-arg-elements {
  max-width: 120px !important;
}.chart-container-cost-month-per-cc {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  min-width: 0;
  background-color: #fff;
}
.chart-container-cost-month-per-cc .chart {
  flex: 1;
  width: 100%;
  height: 100%;
}
.chart-container-cost-month-per-cc tspan {
  font-size: 18px;
}
@media (max-width: 768px) {
  .chart-container-cost-month-per-cc tspan {
    font-size: 14px;
  }
}.container-cost-month-per-cc {
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: 100%;
}
.container-cost-month-per-cc .data-grid-container {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}
@media (max-width: 768px) {
  .container-cost-month-per-cc {
    flex-direction: column;
  }
}.container-integrated-cost {
  padding: 10px;
}
.container-integrated-cost .chart-cost-per-cc {
  padding: 10px;
  background-color: white;
  width: 100%;
}

#data-grid-cost-month-per-cc td {
  padding: 5px !important;
}.progress-bar-cell-wrapper {
  display: flex;
  gap: 5px;
  align-items: center;
}

.progress-bar-cell {
  width: 100%;
  height: 18px;
  background: #d1d1d1;
  border-radius: 4px;
  position: relative;
  display: flex;
  align-items: center;
}

.progress-bar-cell__bar {
  height: 100%;
  background: #4caf50;
  border-radius: 4px;
  transition: width 0.3s;
}

.progress-bar-cell__label {
  position: absolute;
  font-weight: 600;
  left: 8px;
  top: 0;
  height: 100%;
  line-height: 18px;
  font-size: 12px;
  color: black;
}#container-production-chart-maps .title-maps-production {
  font-size: 1rem;
}.mobile-maps-list-card {
  border: 1px solid #eee;
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.0666666667);
}
.mobile-maps-list-card .mobile-maps-list-card-title {
  font-weight: 700;
  font-size: 0.8rem;
  margin-bottom: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile-maps-list-card .mobile-maps-list-card-desc {
  font-size: 0.7rem;
  color: #444;
}
.mobile-maps-list-card .mobile-maps-list-card-section {
  margin-bottom: 12px;
}
.mobile-maps-list-card .mobile-maps-list-card-section:last-child {
  margin-bottom: 0;
}
.mobile-maps-list-card .mobile-maps-list-card-details {
  margin-top: 8px;
  font-size: 13px;
  color: #333;
  background: #f8f8f8;
  border-radius: 6px;
  padding: 8px;
  border: 1px solid #eee;
}#container-filter-production-maps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}
#container-filter-production-maps #title-filters-production-maps {
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
}.mobile-maps-list-selected-filters-row {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  margin-bottom: 5px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mobile-maps-list-selected-filters-row::-webkit-scrollbar {
  display: none;
}
.mobile-maps-list-selected-filters-row .filter-chip {
  background: #f1f1f1;
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 13px;
  white-space: nowrap;
  border: 1px solid #e0e0e0;
}

#filtering-by {
  font-size: 12px;
  color: #666;
}.mobile-maps-list-root {
  max-width: 95vw;
  margin: 0 auto;
  padding: 8px;
}
.mobile-maps-list-root .group-item-custom {
  margin: 0px !important;
  gap: 3px !important;
  padding: 5px !important;
}
.mobile-maps-list-root .group-item-custom:last-child {
  margin: 0 !important;
  gap: 0 !important;
}
.mobile-maps-list-root #title {
  font-size: 1rem;
  font-weight: bold;
  text-align: left;
}
.mobile-maps-list-root #mobile-maps-list-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}
.mobile-maps-list-root .mobile-maps-list-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.mobile-maps-list-root .mobile-maps-list-search {
  width: 100%;
  margin-bottom: 8px;
}
.mobile-maps-list-root .mobile-maps-list-cards {
  max-height: calc(100dvh - 330px);
  overflow-y: auto;
  margin-bottom: 8px;
}
.mobile-maps-list-root .mobile-maps-list-pagination-outer {
  width: 100%;
  max-width: 340px;
  overflow-x: auto;
  margin: 12px 0 0 0;
}
.mobile-maps-list-root .mobile-maps-list-pagination-inner {
  display: inline-flex;
  justify-content: flex-end;
  gap: 4px;
  min-width: 100%;
  white-space: nowrap;
  padding-bottom: 2px;
}
.mobile-maps-list-root .btn-pagination-selected {
  background-color: #c0c0c0 !important;
  color: white !important;
}
.mobile-maps-list-root .mobile-maps-list-order {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.mobile-maps-list-root .mobile-maps-list-applied-filters-row::-webkit-scrollbar {
  height: 3px;
}
.mobile-maps-list-root .mobile-maps-list-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}#container-production-chart-maps {
  margin: 5px;
  background-color: #fff;
}#page-costs {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-costs > .row .col {
  padding: 0;
}
#page-costs div.box-item {
  background: #fff;
  display: flex;
  align-items: center;
  margin: 5px;
  text-align: center;
  height: 75px;
  border: 3px solid #fff;
  border-left: 10px solid #c0ff00;
  padding: 0 5px 0 10px;
  border-radius: 3px;
  font-size: 16px;
  color: #000;
}
#page-costs div.box-item svg {
  margin-right: 10px;
  font-size: 2rem;
  color: #c0c0c0;
}
#page-costs div.box-item:hover {
  border: 3px solid #c0ff00;
  border-left: 10px solid #c0ff00;
}
#page-costs div.box-item .title {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}
#page-costs div.box-item .title > span {
  color: #000;
}
#page-costs div.title-section {
  border-bottom: 2px solid #eee;
  margin: 0 0 10px 10px;
}
#page-costs div.title-section > span {
  margin: 10px 0 10px 0;
  color: #c0c0c0;
  font-size: 16px;
}

@media (max-width: 650px) {
  #page-costs .tab-item-link {
    font-size: 0.75rem;
  }
}.buffer-chart-container {
  max-width: 100%;
  height: calc(100dvh - 110px);
  padding: 10px;
}#page-employee-portal {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-employee-portal > .row .col {
  padding: 0;
}
#page-employee-portal div.box-item {
  background: #fff;
  display: flex;
  align-items: center;
  margin: 5px;
  text-align: center;
  height: 75px;
  border: 3px solid #fff;
  border-left: 10px solid #c0ff00;
  padding: 0 5px 0 10px;
  border-radius: 3px;
  font-size: 16px;
  color: #000;
}
#page-employee-portal div.box-item svg {
  margin-right: 10px;
  font-size: 2rem;
  color: #c0c0c0;
}
#page-employee-portal div.box-item:hover {
  border: 3px solid #c0ff00;
  border-left: 10px solid #c0ff00;
}
#page-employee-portal div.box-item .title {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}
#page-employee-portal div.box-item .title > span {
  color: #000;
}

@media (max-width: 650px) {
  #page-employee-portal .tab-item-link {
    font-size: 0.75rem;
  }
}#zoomable-img-container {
  height: 100% !important;
}
#zoomable-img-container .transform-component-module_wrapper__SPB86 {
  height: 75vh;
  width: 100%;
}

.zoomable-image-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #eeeeee;
}
.zoomable-image-container .view-image-container {
  position: relative;
  height: 75vh !important;
  -webkit-user-select: none !important;
          user-select: none !important;
  -webkit-tap-highlight-color: transparent;
}
.zoomable-image-container .view-image-container .buttons-zoom-container {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  display: flex;
  z-index: 2;
  background-color: #666;
  opacity: 0.6;
  gap: 10px;
  border-radius: 5px;
}
.zoomable-image-container .view-image-container .buttons-zoom-container .zoom-button {
  color: white;
  border-radius: 50%;
}
.zoomable-image-container .view-image-container .buttons-zoom-container :hover {
  color: rgb(172, 172, 172) !important;
}
.zoomable-image-container .view-image-container .buttons-zoom-container svg {
  color: white;
  font-size: 20px;
}
.zoomable-image-container .view-image-container .buttons-zoom-container :active svg {
  color: #666;
  border-radius: 5px;
  background-color: black;
}
.zoomable-image-container .view-image-container .text-loading {
  position: absolute;
  top: 50%;
  right: 50%;
  color: #adadad;
}
.zoomable-image-container .view-image-container .hidden-text-loading {
  display: none !important;
}
.zoomable-image-container .view-image-container span {
  font-size: 18px;
  white-space: nowrap;
}
.zoomable-image-container .view-image-container .zoomable-image {
  max-width: 100%;
  max-height: 100%;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
  -webkit-user-select: none;
          user-select: none;
}

.max-w-header {
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis !important;
  padding: 0 5px;
}

.zoom-button {
  margin: 0.5rem;
  outline: none;
  /* Remove o contorno de foco */
}

div.document-header-image {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  padding: 5px 0;
  background-color: #eeeeee;
}
div.document-header-image div.document-header-content-image {
  display: flex;
  align-items: center;
  flex: 1;
  margin: 5px 0;
}
div.document-header-image div.document-header-content-image div.page-actions-image {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding-left: 50px;
}
div.document-header-image div.document-header-content-image svg {
  font-size: 1.75rem;
  color: #c0c0c0;
  margin: 5px 20px;
}
div.document-header-image div.document-header-content-image svg:hover {
  color: #000;
  cursor: pointer;
}

.zoom-button {
  margin: 0.5rem;
  outline: none;
  /* Remove o contorno de foco */
}.loadindicator-main-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9999 !important;
}
.loadindicator-main-container .body-loadindicator {
  opacity: 1 !important;
  display: flex;
  gap: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-radius: 5px;
  padding: 15px;
}
.loadindicator-main-container .body-loadindicator .row-loadindicator {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
}.image-container-loading {
  position: relative;
}

.without-image svg {
  font-size: 25px;
  color: rgb(139, 139, 139);
}

.spinner-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spinImg 1s linear infinite;
}

@keyframes spinImg {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, opacity 0.3s ease;
  overflow-y: auto;
  z-index: 1560;
  opacity: 0;
  transform: translateX(100%);
  pointer-events: none;
}
.drawer .body-drawer {
  padding: 10px;
}
.drawer .empty-drawer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  color: gray;
  opacity: 0.7;
}
.drawer .empty-drawer svg {
  font-size: 25px;
}

.drawer-right {
  right: 0;
  transform: translateX(100%);
}

.drawer-left {
  left: 0;
  transform: translateX(-100%);
}

.drawer-open.drawer-right {
  transform: translateX(0);
  opacity: 1;
  pointer-events: all;
}

.drawer-open.drawer-left {
  transform: translateX(0);
  opacity: 1;
  pointer-events: all;
}

.drawer-closed {
  opacity: 0;
  pointer-events: none;
}

.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1520;
  transition: opacity 0.5s ease;
  opacity: 1;
  pointer-events: all;
}

.drawer-closed + .drawer-overlay {
  opacity: 0;
  pointer-events: none;
}#loadpanel-z-index-test {
  z-index: 9999 !important;
}

.list-dropdown-input-expense {
  font-size: 11px !important;
}

.scroll-form-expenses {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  padding-bottom: 15px;
}

::-webkit-scrollbar {
  width: 5px;
}

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

::-webkit-scrollbar-track {
  background: #ededed;
}

#form-expenses {
  padding: 5px 0 5px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#form-expenses .loader-compress-image {
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
@keyframes rotate {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0);
  }
}
#form-expenses .loader-compress-image .loading-compress-process svg {
  font-size: 30px;
  animation: rotate 2s linear infinite;
  transform-origin: center;
}
#form-expenses #row-input-file-add-expense .preview-fileuploader-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0.6;
  padding: 0 10px;
  width: 100%;
  height: 10dvh;
}
#form-expenses #row-input-file-add-expense .preview-fileuploader-image svg {
  font-size: 30px;
  opacity: 0.4;
}
#form-expenses .file-preview {
  width: 100%;
  height: calc(100% - 25px);
}
#form-expenses .file-preview .image-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
#form-expenses .file-preview .image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
#form-expenses .file-preview .heder-file-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(214, 214, 214);
  padding: 5px;
}
#form-expenses .file-preview .heder-file-preview span {
  max-width: 190px;
  height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#form-expenses .file-preview .pdf-file-preview {
  display: flex;
  flex-direction: column;
  padding: 10px;
  width: 100%;
  height: 130px;
  justify-content: center;
  align-items: center;
}
#form-expenses .file-preview .pdf-file-preview svg {
  font-size: 45px;
}
#form-expenses .file-preview .pdf-file-preview:active {
  transform: scale(1.1);
}
#form-expenses .document-expense-valdation {
  display: flex;
  flex-direction: row;
  gap: 3px;
}
#form-expenses .tabpanel-submit-expenses {
  margin: 5px 0;
}
#form-expenses .container-add-expense {
  display: flex;
  justify-content: center !important;
  align-items: center !important;
  height: 250px !important;
}
#form-expenses .form-add-expensive {
  gap: 5px;
  display: flex;
}
#form-expenses .form-add-expensive .input-form-expense {
  height: 35px;
  margin-right: 5px;
  width: 250px;
  flex-wrap: wrap;
}
#form-expenses .form-add-expensive .row-input-travels {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
#form-expenses .form-add-expensive .icon-info-input {
  cursor: pointer;
}
#form-expenses #row-input-file-add-expense {
  align-items: center;
}
#form-expenses .btn-submit-form {
  width: 90px;
  margin: 0 2px 0 0;
}
#form-expenses .button-new-ticket {
  box-shadow: -1px 2px 2px #c0c0c0;
  border: 1px solid #c0ff00;
}
#form-expenses .button-new-ticket:hover {
  box-shadow: -1px 1px 3px #c0c0c0;
  border: 1px solid #b9e868;
  background-color: #b9e868;
}
#form-expenses .btn-open-image-expense {
  margin-bottom: 15px;
  width: 250px;
}
#form-expenses .btn-new-ticket-row {
  max-width: 250px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
}
#form-expenses .popup-image-attachment {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  background-color: #eeeeee;
}
#form-expenses .header-add-expense-travels {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  gap: 8px;
}

.header-add-expense-travels {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  gap: 8px;
}
.header-add-expense-travels .money-form-expense-label {
  display: flex;
  gap: 5px;
  font-size: 1rem;
  justify-content: space-between;
  max-width: 250px;
}
.header-add-expense-travels .money-form-expense-label span {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-add-expense-travels .money-form-expense-label .item-label {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.header-add-expense-travels .money-form-expense-label .item-label .money-row-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis !important;
  gap: 5px;
}

.popup-image-attachment {
  width: 100%;
  justify-content: center !important;
  align-items: center !important;
  height: 80vh;
  object-fit: contain;
  display: flex !important;
  background-color: #eeeeee;
}

#btn-reset-form-expenses {
  margin: 0;
  font-size: 12px;
}

#btn-reset-form-expenses:hover {
  box-shadow: -1px 1px 3px #eee;
}

#h6-title-open-travel {
  margin-right: 18px;
}

.cameraButton {
  background-color: #c0ff00 !important;
  color: #666;
}

#h6-title-add-expense-travel {
  font-weight: lighter;
  font-style: italic;
  margin-bottom: 25px;
  vertical-align: middle;
}

.form-add-expensive {
  justify-content: center;
  flex-direction: column;
  margin: 0 5px 0 15px !important;
}
.form-add-expensive .input-form-employee-rh {
  margin: 10px 5px 0 0 !important;
}
.form-add-expensive .row-input-travels {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 275px;
}
.form-add-expensive .icon-info-input {
  cursor: pointer;
}

.input-form-employee-rh {
  height: 35px;
  margin-right: 15px;
  width: 250px;
  padding-left: 4px !important;
  flex-wrap: wrap;
}

.row-not-travel {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.container-add-expense {
  display: flex;
  justify-content: center;
  height: 250px;
}

.btn-submit-form {
  width: 90px;
  margin: 0 2px 0 0;
}

.button-new-ticket {
  box-shadow: -1px 2px 2px #c0c0c0;
  border: 1px solid #c0ff00;
}

.button-new-ticket:hover {
  box-shadow: -1px 1px 3px #c0c0c0;
  border: 1px solid #b9e868;
  background-color: #b9e868;
}

.btn-open-image-expense {
  margin-bottom: 15px;
  width: 250px;
}

.document-name {
  margin-left: 10px;
  font-size: 0.75rem;
  word-wrap: break-word;
  max-width: 130px;
}

.image-neutra {
  height: 300px;
}

#pop-up-image-expense {
  max-width: 300px;
  max-height: 225px;
  width: auto;
  height: auto;
  opacity: 1;
  transform: translate(0px, 22.23px) scale(1.59, 1.59);
}

.modal {
  position: "fixed";
  z-index: 1;
  left: 0;
  top: 0;
  width: "100vw";
  height: "100vh";
  overflow: "auto";
  background-color: "rgba(0, 0, 0, 0.8)";
}

.close {
  position: "absolute";
  top: 15;
  right: 35;
  color: "#f1f1f1";
  font-size: 40;
  font-weight: "bold";
  cursor: "pointer";
}

.tttt {
  height: 500px;
}

.modalContent {
  display: "flex";
  align-items: "center";
  width: "85%";
  height: "100%";
  margin: "auto";
}

@media (max-width: 650px) {
  #form-expenses {
    padding: 8px 0 5px 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #form-expenses .container-add-expense {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    height: 250px !important;
  }
  #form-expenses .form-add-expensive {
    padding: 0 0 10px 0;
  }
  #form-expenses .form-add-expensive .row-input-travels {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  #form-expenses .form-add-expensive .icon-info-input {
    cursor: pointer;
  }
  #form-expenses .btn-submit-form {
    width: 90px;
    margin: 0 2px 0 0;
  }
  #form-expenses .button-new-ticket {
    box-shadow: -1px 2px 2px #c0c0c0;
    border: 1px solid #c0ff00;
  }
  #form-expenses .button-new-ticket:hover {
    box-shadow: -1px 1px 3px #c0c0c0;
    border: 1px solid #b9e868;
    background-color: #b9e868;
  }
  #form-expenses .btn-open-image-expense {
    margin-bottom: 15px;
    width: 250px;
  }
  #form-expenses .btn-new-ticket-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  #form-expenses .popup-image-attachment {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    background-color: #eeeeee;
  }
  #form-expenses .header-add-expense-travels {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    gap: 8px;
  }
}#notification-tooltip-expenses .label-without-notification {
  margin: 10px;
  font-weight: bold;
  color: #7a7a7a;
}
#notification-tooltip-expenses .tooltip-card {
  height: 60px;
  display: flex;
  font-size: 12px;
  margin: 5px 8px;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05), 0 0px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid rgb(204, 204, 204);
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
#notification-tooltip-expenses .tooltip-card:active {
  background-color: rgb(187, 187, 187);
}
#notification-tooltip-expenses .tooltip-card .badge-tooltip-recuse {
  font-size: 25px;
  background-color: #f44336;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  opacity: 0.8;
}
#notification-tooltip-expenses .tooltip-card .tooltip-row {
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 5px;
}
#notification-tooltip-expenses .tooltip-card .tooltip-column {
  display: flex;
  flex-direction: column;
  max-width: 240px;
}.swal2-popup.custom-toast-warning {
  background-color: orange !important;
  color: white !important;
}

.swal2-popup.custom-toast-error {
  background-color: #f44336 !important;
  color: white !important;
}

.swal2-popup.custom-toast-success {
  background-color: #28a745 !important;
  color: white !important;
}#without-travels-section {
  display: flex;
  justify-content: center;
  align-items: center;
}
#without-travels-section .label-without-notification {
  margin: 10px;
  font-weight: bold;
  color: #7a7a7a;
}

.header-bar-popup-edit-expense {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  cursor: default;
  height: 30px !important;
  align-items: center;
  font-size: 15px;
}
.header-bar-popup-edit-expense .header-title {
  display: flex;
  gap: 5px;
  align-items: center;
}
.header-bar-popup-edit-expense .header-title svg {
  font-size: 18px;
}

#travel-list {
  height: 80dvh;
}
#travel-list .origin-destination-travel-card {
  position: relative;
  width: 25px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#travel-list .origin-destination-travel-card .line-travel-card {
  position: absolute;
  width: 1px;
  height: calc(100% - 14px);
  background-color: black;
}
#travel-list .origin-destination-travel-card .point-travel-card {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: black;
}
#travel-list .origin-destination-travel-card .point-travel-card.top-travel-card {
  top: 0;
}
#travel-list .origin-destination-travel-card .point-travel-card.bottom-travel-card {
  bottom: 0;
}
#travel-list .origin-destination-travel-card .plane-icon-travel-card {
  position: absolute;
  background: white;
  padding: 4px;
  font-size: 1.6rem;
  color: black;
  transform: rotate(180deg);
}
#travel-list .notification-button {
  position: relative;
}
#travel-list .without-travels-section {
  color: gray;
  height: 75dvh;
}
#travel-list .without-travels-section .without-travels-svg {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.3;
}
#travel-list .without-travels-section .without-travels-svg svg {
  font-size: 60px;
}
#travel-list .notification-bell-background {
  position: absolute;
  top: -12px;
  right: -13px;
  padding: 3px;
  animation: zoomInOut 1.5s infinite;
  transform-origin: center;
}
#travel-list .notification-bell {
  position: relative;
  width: 25px;
  height: 25px;
}
#travel-list .notification-bell .notification-label {
  font-size: 10px;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  color: white;
  background-color: #f44336;
}
#travel-list .notification-bell .notification-label span {
  position: absolute;
  top: 6px;
  right: 4px;
}
#travel-list .notification-bell svg {
  font-size: 25px;
}
@keyframes zoomInOut {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}
#travel-list .glass-effect {
  height: 55px;
  padding: 8px 5px;
  margin: 3px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(9.6px);
  -webkit-backdrop-filter: blur(9.6px);
}
#travel-list .header-travels-list {
  display: flex;
  flex-direction: column;
}
#travel-list .header-travels-list .text-header {
  display: flex;
  justify-content: center;
  padding: 3px 0;
}
#travel-list .header-travels-list .list {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin: 3px 15px;
  align-items: center;
  color: #2e2e2e;
}
#travel-list .header-travels-list .list svg {
  font-size: 20px;
  color: #888888;
}
#travel-list .header-travels-list .list-search {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}
#travel-list .header-travels-list .list-search .row-buttons-test {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
}
#travel-list .header-travels-list .list-search .row-buttons-test .buttons-travel-head {
  border-radius: 8px;
}
#travel-list .header-travels-list .list-search svg {
  font-size: 20px;
}
#travel-list .header-travels-list .row-travels-list {
  flex-direction: row;
}
#travel-list .header-travels-list .row-travels-list .primary {
  background-color: #d3d3d3;
}
#travel-list .header-travels-list .row-travels-list .primary:active {
  background-color: #c0C0C0;
}
#travel-list .header-travels-list .row-travels-list .secondary {
  background-color: #c0C0C0;
}
#travel-list .header-travels-list .row-travels-list .button {
  -webkit-tap-highlight-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20%;
  cursor: pointer;
  border: 0;
  width: 40px;
  height: 40px;
  margin-left: 5px;
}
#travel-list .header-travels-list .row-travels-list .text-alt {
  font-size: 12px;
}
#travel-list .header-travels-list .main-text {
  display: flex;
  justify-content: center !important;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}

#h6-title-open-travel {
  text-transform: uppercase;
  font-size: 13px;
  font-style: normal !important;
  font-weight: bold !important;
  text-align: center;
}

.id-travel {
  margin-bottom: 15px;
  display: flex;
  padding: 0 5px;
  align-items: flex-end;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid #cfcfcf;
}

.swal-travel-finish {
  word-wrap: break-word;
  justify-content: flex-start;
  display: flex;
  font-size: 15px;
}

.card-travel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1rem;
  padding: 15px !important;
}
.card-travel .card-travel-item {
  border-radius: 8px !important;
  width: 100%;
  cursor: pointer;
  padding: 15px;
  background-color: #fff;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  box-shadow: rgba(102, 102, 102, 0.15) 0px 15px 25px, rgba(255, 255, 255, 0.05) 0px 5px 10px;
  transition: all 0.1s ease-in-out;
  min-height: 215px;
  overflow: hidden;
}
.card-travel .card-travel-item .flex-start {
  justify-content: flex-start;
  align-items: flex-start;
}
.card-travel .card-travel-item .flex-end {
  justify-content: flex-end;
  align-items: flex-end;
}
.card-travel .card-travel-item .space-between {
  justify-content: space-between;
  width: 100% !important;
}
.card-travel .card-travel-item .center {
  align-items: center;
}
.card-travel .card-travel-item .svg-lg svg {
  font-size: 20px;
}
.card-travel .card-travel-item .row-alignment {
  display: flex;
  flex-direction: row;
  gap: 5px;
  width: 100% !important;
}
.card-travel .card-travel-item .col-alignment {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.card-travel .card-travel-item:active {
  box-shadow: rgba(102, 102, 102, 0.25) 0px 5px 5px, rgba(255, 255, 255, 0.05) 0px 5px 10px;
}
.card-travel .card-travel-item .refund-status {
  font-size: 17px;
  margin: 0 0 5px 0;
  font-weight: 500;
  padding: 0;
  border-bottom: 1px solid #01579b !important;
}
.card-travel .card-travel-item .refund-status .header-card-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.card-travel .card-travel-item .refund-status .header-card-label svg {
  font-size: 20px;
  opacity: 0.7;
}
.card-travel .card-travel-item .travel-status {
  font-size: 17px;
  margin: 0 0 5px 0;
  font-weight: 500;
  padding: 0;
  border-bottom: 1px solid #c0ff00 !important;
}
.card-travel .card-travel-item .travel-status .header-card-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.card-travel .card-travel-item .travel-status .header-card-label svg {
  font-size: 20px;
  opacity: 0.7;
}
.card-travel .card-travel-item .card-render-values .row-main-values {
  display: flex;
  flex-direction: row;
  gap: 5px;
}
.card-travel .card-travel-item .card-render-values .row-main-values .total-expenses-value {
  font-size: 17px;
  font-weight: 600;
}
.card-travel .card-travel-item .card-render-values .row-main-values .last-inserted-value-label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 17px;
  font-weight: 500;
}
.card-travel .card-travel-item .card-render-values .row-render-values {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
}
.card-travel .card-travel-item .card-render-values .row-render-values .row-label-alignment {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.card-travel .card-travel-item .div-hidden {
  display: none !important;
}
.card-travel .notification-pill-background {
  position: absolute;
  top: 10px;
  right: 15px;
  color: #fff;
  background-color: #f44336;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
}
.card-travel .btn-travel-enter {
  border: 0;
  margin: 0 -5px;
  background-color: #fff;
  width: 15px;
  height: 140px;
  border-radius: 5px;
}

.text-card-travel {
  margin-top: 5px;
  padding-bottom: 2px;
  margin: 0 0 5px 0;
  font-size: 15px;
  display: flex;
  justify-content: center !important;
}

.card-travel .children-card-travel {
  width: 100% !important;
}
.card-travel .children-card-travel .card-travel-from-to {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
}
.card-travel .children-card-travel .card-travel-from-to svg {
  font-size: 22px;
}
.card-travel .children-card-travel .row-card-text {
  font-size: 1rem !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis !important;
}
.card-travel .children-card-travel .row-btn-expenses {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}
.card-travel .children-card-travel .row-btn-expenses .right-group {
  display: flex;
  gap: 10px;
}
.card-travel .children-card-travel .row-btn-expenses svg {
  font-size: 2rem;
}
.card-travel .children-card-travel .row-btn-expenses .btn-add-expense {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #01579b;
}
.card-travel .children-card-travel .row-btn-expenses .btn-add-expense:active {
  background-color: #257cff;
  transform: scale(1.07);
}
.card-travel .children-card-travel .row-btn-expenses .btn-add-expense svg {
  font-size: 2rem;
  background-color: transparent;
  color: white;
}
.card-travel .children-card-travel .row-btn-expenses .btn-travel-options:not([disabled]) {
  border-radius: 10px;
  border: 0px;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.card-travel .children-card-travel .row-btn-expenses .btn-travel-options:not([disabled]) svg {
  font-size: 25px;
  background-color: transparent;
}
.card-travel .children-card-travel .row-btn-expenses .btn-travel-options:not([disabled]):active {
  background-color: #888888;
}
.card-travel .children-card-travel .row-btn-expenses .btn-travel-options[disabled] {
  border: 0px;
  width: 40px;
  height: 40px;
  opacity: 0;
  cursor: not-allowed;
}
.card-travel .children-card-travel .row-btn-expenses .btn-travel-options[disabled] i,
.card-travel .children-card-travel .row-btn-expenses .btn-travel-options[disabled] svg {
  opacity: 0.4 !important;
}
.card-travel .children-card-travel .row-btn-expenses .btn-travel-options[disabled] :active {
  opacity: 0;
  cursor: not-allowed;
}

.travel-recall-alignment {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.expanded-travel {
  max-height: 300px !important;
  overflow: hidden;
  border: 1px solid #01579b;
}

.collapsed-travel {
  max-height: 215px;
  overflow: hidden;
  border: none;
}

@media (max-width: 650px) {
  .card-travel {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    grid-gap: 1rem;
    padding: 15px !important;
  }
  .card-travel .card-travel-item {
    margin: 0 0px !important;
  }
  .header-bar-popup-edit-expense {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    cursor: default;
    height: 40px !important;
    align-items: center;
    font-size: 15px;
  }
  .header-bar-popup-edit-expense .header-title {
    display: flex;
    gap: 5px;
    align-items: center;
  }
  .header-bar-popup-edit-expense .header-title svg {
    font-size: 18px;
  }
  #travel-list .text-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  #travel-list .origin-destination-travel-card {
    position: relative;
    width: 25px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #travel-list .origin-destination-travel-card .line-travel-card {
    position: absolute;
    width: 1px;
    height: calc(100% - 14px);
    background-color: black;
  }
  #travel-list .origin-destination-travel-card .point-travel-card {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: black;
  }
  #travel-list .origin-destination-travel-card .point-travel-card.top-travel-card {
    top: 0;
  }
  #travel-list .origin-destination-travel-card .point-travel-card.bottom-travel-card {
    bottom: 0;
  }
  #travel-list .origin-destination-travel-card .plane-icon-travel-card {
    position: absolute;
    background: white;
    padding: 4px;
    font-size: 1.6rem;
    color: black;
    transform: rotate(180deg);
  }
  #travel-list .btn-travel-options:not([disabled]) {
    border: 0px;
    width: 3.7rem;
    height: 3.7rem;
    cursor: pointer;
  }
  #travel-list .btn-travel-options:not([disabled]):active {
    background-color: #eee !important;
    transform: scale(1.07);
  }
  #travel-list .btn-travel-options[disabled] {
    border-radius: 50%;
    border: 0px;
    width: 3.7rem;
    height: 3.7rem;
    opacity: 0;
    cursor: not-allowed;
  }
  #travel-list .btn-travel-options[disabled] :active {
    opacity: 0;
    cursor: not-allowed;
  }
}#page-employee-portal {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
  font-size: 0.9rem;
}
#page-employee-portal > .row .col {
  padding: 0;
}#page-employee-portal {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-employee-portal > .row .col {
  padding: 0;
}

#h6-title-open-travel {
  font-weight: lighter;
  font-style: italic;
  text-align: center;
  margin-bottom: 25px;
}

.rescuse-expense-body {
  flex-direction: column;
  width: 100% !important;
  padding: 10px;
}

.input-rescuse-expense {
  padding-left: 5px;
  height: 35px !important;
  position: relative;
  margin: 10px !important;
}

.id-travel {
  margin-bottom: 15px;
  text-align: center;
  font-weight: bold;
}

.open-travel {
  border-bottom: 3px solid #01579b;
}

.closed {
  border-bottom: 3px solid #c0ff00;
}

.error {
  border-bottom: 3px solid #f44336;
}

.btn-save-descart-expense {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 20px;
}
.btn-save-descart-expense #btn-save-descart-expense {
  width: 100px;
  height: 35px;
}

#text-area-descart-expense {
  margin: 10px !important;
  height: 80px;
}

@media (max-width: 650px) {
  div.dx-popup-content {
    padding: 0px !important;
  }
}
.card-travel-costs {
  cursor: auto !important;
  margin-right: 8px !important;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0 0 0 5px;
  -webkit-user-select: none !important;
          user-select: none !important;
  -webkit-tap-highlight-color: transparent;
}

.disabled-card-expenses {
  pointer-events: none !important;
  opacity: 0.3;
}

.children-card-travel-costs {
  width: 260px;
  border-radius: 8px;
  margin: 0px 0px 8px 8px;
  padding: 10px;
  background-color: #fff;
  cursor: pointer;
  height: 115px;
  -webkit-user-select: none !important;
          user-select: none !important;
  transition: all 0.3s ease;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05), 0 0px 5px rgba(0, 0, 0, 0.1);
}
.children-card-travel-costs:active {
  transform: scale(1.02);
}
.children-card-travel-costs svg {
  width: 30px !important;
}
.children-card-travel-costs .row-btn-expenses {
  display: flex;
  justify-content: center;
}
.children-card-travel-costs .row-btn-expenses :active {
  background-color: #b3b3b3;
}
.children-card-travel-costs .expense-delete svg {
  color: rgb(255, 66, 66) !important;
}
.children-card-travel-costs .btn-expenses:not([disabled]) {
  border-radius: 10px;
  border: 0px;
  width: 45px;
  height: 45px;
  margin: 10px 5px;
}
.children-card-travel-costs .btn-expenses:not([disabled]) svg {
  font-size: 18px;
}
.children-card-travel-costs .btn-recuse-animation:not([disabled]) {
  border-radius: 50%;
  width: calc(21px + 42px);
  height: calc(21px + 42px);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.children-card-travel-costs .btn-recuse-animation:not([disabled]):before, .children-card-travel-costs .btn-recuse-animation:not([disabled]):after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(219, 52, 52, 0.7);
  border-radius: 50%;
  transform: scale(0);
  opacity: 0.5;
  animation: arc-expand-retract 3s none infinite ease;
}
.children-card-travel-costs .btn-recuse-animation:not([disabled]):after {
  animation-delay: 1.5s;
}
@keyframes arc-expand-retract {
  0%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.8);
    opacity: 0;
  }
}
.children-card-travel-costs .btn-recuse-animation:not([disabled]) .btn-recuse[disabled] {
  cursor: not-allowed;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.children-card-travel-costs .btn-recuse-animation:not([disabled]) .btn-recuse[disabled]:before, .children-card-travel-costs .btn-recuse-animation:not([disabled]) .btn-recuse[disabled]:after {
  animation: none;
}
.children-card-travel-costs .btn-recuse-animation:not([disabled]) .btn-recuse:not([disabled]) {
  background-color: #f44336;
  position: relative;
  overflow: hidden;
  z-index: 1;
  /* Colocar o botão na frente da animação */
}
.children-card-travel-costs .btn-recuse-animation:not([disabled]) .btn-recuse:not([disabled]) svg {
  color: white;
  -webkit-tap-highlight-color: transparent;
}
.children-card-travel-costs .btn-recuse-animation:not([disabled]) .btn-recuse:not([disabled]) svg:active {
  background-color: transparent;
}
.children-card-travel-costs .btn-recuse-animation:not([disabled]) .btn-recuse:not([disabled]):active {
  background-color: #f44336;
}
.children-card-travel-costs .btn-recuse-animation[disabled]:active {
  opacity: 0;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent !important;
}
.children-card-travel-costs .btn-expense-recall {
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.children-card-travel-costs .expense-recall-alignment {
  display: flex;
  justify-content: center;
  height: 27px;
}
.children-card-travel-costs .expense-recall-alignment :active {
  background-color: #bbbbbb;
}
.children-card-travel-costs .expense-recall-alignment svg {
  background-color: transparent !important;
}
.children-card-travel-costs .expanded-expense {
  display: flex;
  flex-direction: column;
}
.children-card-travel-costs .expanded-expense .expanded-hr {
  opacity: 0.5;
  margin: 5px 0;
}
.children-card-travel-costs .expanded-expense {
  justify-content: space-between !important;
}

.card-expense-alignment {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.expense-expanded {
  transition: all 0.2s ease-out;
  transform: scale(1.02);
  border: 1px solid #01579b;
  height: 230px;
  overflow: hidden;
}

.collapsed-expense {
  transition: all 0.2s ease-out;
  transform: scale(1);
  height: 115px;
  overflow: hidden;
}

.column-cards-costs {
  display: flex;
  flex-direction: column;
  padding: 0px 0 30px 0;
}

.list-travel-costs {
  opacity: 0;
  /* Inicia com opacidade zero */
  transition: opacity 0.6s ease, transform 0.6s ease;
  transform: translateY(20px);
  position: relative;
  padding: 3px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
}
.list-travel-costs .item-expense-test {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid #fff;
  background-color: rgb(235, 235, 235);
  justify-content: center;
  align-items: center;
  display: flex;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 5px rgba(255, 255, 255, 0.6);
}
.list-travel-costs .item-expense-test svg {
  font-size: 22px;
  color: rgb(107, 107, 107);
}

.list-travel-costs::before {
  content: "";
  position: absolute;
  margin-left: 18px;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: #fff;
  /* Cor da linha vertical */
  transform: translateX(-50%);
  /* Centralizando a partir do meio */
  z-index: -1;
  /* Colocar atrás do conteúdo */
  overflow: hidden;
}

.list-travel-costs.visible {
  opacity: 1;
  transform: translateY(0);
}

.header-title-travels {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid 1px #dfdfdf;
  margin: 0 0 5px 0;
  padding: 5px;
}
.header-title-travels svg {
  cursor: pointer;
  background-color: #dfdfdf;
  width: 20px;
  height: 20px;
  padding: 2px;
  border-radius: 10px;
  color: #585858;
}

.p-children-card-travel {
  font-size: 0.75rem !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis !important;
  max-width: 150px;
}

.p-expanded-text {
  display: flex;
  flex-direction: row;
  font-size: 10px;
  justify-content: flex-start;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis !important;
}
.p-expanded-text svg {
  font-size: 18px !important;
}
.p-expanded-text .text-row {
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis !important;
}

.card-value-format {
  padding-left: 10px !important;
  overflow: hidden;
  text-overflow: ellipsis !important;
  max-width: 90px;
  white-space: nowrap;
}

.expense-flex {
  display: flex;
  flex-direction: column;
}

.discount-value {
  font-size: 12px !important;
}

.value-card-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.value-card-row svg {
  font-size: 20px;
}

#without-expenses .empty-travel {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0.5;
  gap: 10px;
}
#without-expenses .empty-travel svg {
  font-size: 3em;
  opacity: 0.4;
}

@media (max-width: 650px) {
  .card-travel-costs {
    padding: 0 20px 20px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .card-travel-costs .p-expanded-text .text-row {
    max-width: 45vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis !important;
  }
  .children-card-travel-costs {
    justify-content: center !important;
    width: 80dvw;
    max-width: 25rem !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.05), 0 0px 5px rgba(0, 0, 0, 0.1);
  }
  .children-card-travel-costs:active {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.05), 0 0px 15px rgba(0, 0, 0, 0.18);
  }
  .card-value-format {
    font-size: calc(13px + 0.4vw);
  }
}#without-expenses {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.body-filter-expenses .btn-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 10px;
  align-items: flex-end;
  padding: 10px;
}
.body-filter-expenses .btn-row .btn-clear {
  border: 0;
  border-radius: 10px;
  width: 35px;
  height: 35px;
}
.body-filter-expenses .btn-row .btn-clear:active {
  background-color: #666;
}
.body-filter-expenses .btn-row svg {
  font-size: 20px;
}
.body-filter-expenses .section-filter {
  gap: 5px;
  padding: 10px;
}
.body-filter-expenses .section-filter .header-section {
  margin: 5px 0;
  padding: 0 0 5px 0;
  border-bottom: 1px solid #d4d4d4;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

#container-consult-expenes .glass-effect {
  height: 55px;
  margin: 3px;
  padding: 8px 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(9.6px);
  -webkit-backdrop-filter: blur(9.6px);
}
#container-consult-expenes .button-travel-globe {
  border-radius: 8px;
}
#container-consult-expenes .buttons-travel-head {
  border-radius: 8px;
}
#container-consult-expenes .header-expenses-list {
  display: flex;
  flex-direction: column;
}
#container-consult-expenes .header-expenses-list .title-header-expenses {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0;
}
#container-consult-expenes .header-expenses-list .list {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin: 3px 15px;
  align-items: center;
  color: #2e2e2e;
}
#container-consult-expenes .header-expenses-list .list svg {
  font-size: 20px;
  color: #888888;
}
#container-consult-expenes .header-expenses-list .list-search {
  display: flex;
  flex-direction: row;
  justify-content: space-between !important;
  gap: 5px;
  align-items: center;
}
#container-consult-expenes .header-expenses-list .list-search .row-buttons-test {
  display: flex;
  flex-direction: row;
  gap: 5px;
  justify-content: center;
  align-items: center;
}
#container-consult-expenes .header-expenses-list .list-search svg {
  font-size: 20px;
}
#container-consult-expenes .header-expenses-list .row-expenses-list {
  flex-direction: row;
  display: flex;
  gap: 5px;
}
#container-consult-expenes .header-expenses-list .row-expenses-list .primary {
  background-color: #d3d3d3;
}
#container-consult-expenes .header-expenses-list .row-expenses-list .primary:active {
  background-color: #c0C0C0;
}
#container-consult-expenes .header-expenses-list .row-expenses-list .secondary {
  background-color: #d6d6d6;
}
#container-consult-expenes .header-expenses-list .row-expenses-list .button {
  -webkit-tap-highlight-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20%;
  cursor: pointer;
  border: 0;
  width: 40px;
  height: 40px;
}
#container-consult-expenes .header-expenses-list .row-expenses-list .text-alt {
  font-size: 12px;
}
#container-consult-expenes .header-expenses-list .main-text {
  display: flex;
  justify-content: center !important;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}

.h6-title-travel-costs {
  font-weight: bold;
  font-size: 13px;
  text-align: left;
  padding: 10px 5px;
}

.btn-finished-expenses:hover {
  background-color: #666 !important;
}

.btn-finished-expenses {
  background-color: #dfdfdf !important;
}

#text-popup-travel {
  font-weight: lighter;
  font-style: italic;
  text-align: center;
  padding: 5px;
}

.btn-body-consult {
  margin: 22px 0 22px 22px;
}

.btn-add-expense {
  margin-right: 5px;
  margin-left: 5px;
}

.btn-modal-confirm {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.icon-tooltip-travels {
  width: 20px !important;
  min-width: 20px !important;
}

.id-travel {
  margin-bottom: 15px;
  text-align: center;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.open-travel {
  border-bottom: 3px solid #01579b !important;
}

.closed-travel {
  border-bottom: 3px solid #c0ff00 !important;
}

.partial-aproved {
  border-bottom: 3px solid #ff9800 !important;
}

.error-travel {
  border-bottom: 3px solid #f44336 !important;
}

.moved-travel-expense {
  border-bottom: 3px solid gray !important;
}

.legend-expenses {
  padding: 5px;
  background-color: #fff;
  flex-direction: column;
  max-width: 210px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis !important;
}
.legend-expenses .header-legend {
  border-bottom: 1px solid #dddddd;
  padding: 5px;
  font-weight: bold;
}
.legend-expenses .row-legend {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}

.children-legend-partial {
  width: 10px;
  height: 10px;
  margin-bottom: 3px;
  background-color: #ff9800;
}

.children-legend-moved {
  width: 10px;
  height: 10px;
  margin-bottom: 3px;
  background-color: gray;
}

.children-legend-not-analised {
  width: 10px;
  height: 10px;
  background-color: #01579b;
}

.children-legend-closed {
  width: 10px;
  height: 10px;
  background-color: #c0ff00;
}

.children-legend-warning {
  width: 10px;
  height: 10px;
  background-color: #f44336;
}

.disabled {
  pointer-events: none !important;
  background-color: #c0c0c0;
}

.btn-tooltip-edit {
  pointer-events: none !important;
  background-color: #c0c0c0;
}

.children-option-tooltip-travel {
  width: 10em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.floating-button-travel {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 20px;
  right: 20px;
  background-color: #01579b;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.floating-button-travel:hover {
  background-color: #C0C0C0;
}

.dropdown {
  position: fixed;
  bottom: 90px;
  right: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.dropdown-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.dropdown-item {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}
.dropdown-item svg {
  width: 20px;
  height: auto;
  margin: 0 0 0 5px;
}

.dropdown-icon {
  margin-right: 10px;
}

.searchbox-expenses {
  margin: 10px 0 10px 5px;
}

.searchbox-consult-expenses {
  margin-top: 0 !important;
}

.header-bar-popup-edit-expense {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  cursor: default;
}
.header-bar-popup-edit-expense .btn-close-expense {
  display: flex;
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  align-items: center;
  justify-content: center;
}
.header-bar-popup-edit-expense .btn-close-expense svg {
  font-size: 18px;
}
.header-bar-popup-edit-expense .btn-close-expense:hover {
  background-color: rgb(209, 209, 209);
}

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

@media (max-width: 650px) {
  .legend {
    max-width: 200px;
  }
  #without-expenses {
    max-width: 250px;
  }
  #chart-consult-expenses {
    display: none;
  }
  #without-expenses {
    max-width: none;
  }
}#expenses-detailed-travel {
  font-size: 12px !important;
}
#expenses-detailed-travel .button-legend {
  border: 0;
  width: 100px;
  gap: 3px;
  display: flex;
  justify-content: flex-start;
  padding: 0 0 0 5px;
  align-items: center;
  font-size: 11px;
  height: 20px;
  border-radius: 5px;
}
#expenses-detailed-travel .button-legend svg {
  font-size: 17px;
}
#expenses-detailed-travel .recused {
  background-color: #f44336 !important;
}
#expenses-detailed-travel .approved {
  background-color: rgb(90, 160, 77) !important;
}
#expenses-detailed-travel .approved-part {
  background-color: #ff9800 !important;
}
#expenses-detailed-travel .buttons-action-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
#expenses-detailed-travel .buttons-action-row .button-action {
  border: 0;
  border-radius: 5px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  width: 30px;
  height: 20px;
  padding: 2px;
  gap: 5px;
  margin: 0px 3px;
  cursor: pointer;
}
#expenses-detailed-travel .buttons-action-row .delete {
  color: rgb(255, 79, 79);
}
#expenses-detailed-travel .buttons-action-row .delete:hover {
  background-color: #f44336;
  color: white;
}
#expenses-detailed-travel .buttons-action-row .edit {
  background-color: rgb(216, 216, 216);
}
#expenses-detailed-travel .buttons-action-row .edit:hover {
  background-color: rgb(161, 161, 161);
}
#expenses-detailed-travel .buttons-action-row .realocate:hover {
  background-color: rgb(184, 184, 184);
}#divider-items {
  height: 2px;
  background-color: #eee;
  width: 100%;
  margin: 10px 0 5px;
}

.datagrid-all-expenses {
  margin: 5px;
  font-size: 12px !important;
}
.datagrid-all-expenses td {
  padding: 3px !important;
}
.datagrid-all-expenses .button-legend {
  border: 0;
  width: 80px;
  gap: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  height: 18px;
  border-radius: 5px;
}
.datagrid-all-expenses .button-legend svg {
  font-size: 17px;
}
.datagrid-all-expenses .open {
  background-color: 5px solid #01579b !important;
}
.datagrid-all-expenses .recused {
  background-color: #f44336 !important;
}
.datagrid-all-expenses .approved {
  background-color: rgb(90, 160, 77) !important;
}
.datagrid-all-expenses .approved-part {
  background-color: #ff9800 !important;
}
.datagrid-all-expenses .buttons-action-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.datagrid-all-expenses .buttons-action-row .button-action {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: 5px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  width: 25px;
  height: 18px;
  margin: 0px 2px;
  cursor: pointer;
}
.datagrid-all-expenses .buttons-action-row .button-action[disabled] {
  cursor: default;
  background-color: rgb(216, 216, 216) !important;
}
.datagrid-all-expenses .buttons-action-row .button-action svg {
  font-size: 14px;
}
.datagrid-all-expenses .buttons-action-row .delete {
  color: rgb(255, 79, 79);
}
.datagrid-all-expenses .buttons-action-row .delete:hover {
  background-color: #f44336;
  color: white;
}
.datagrid-all-expenses .buttons-action-row .edit {
  background-color: rgb(216, 216, 216);
}
.datagrid-all-expenses .buttons-action-row .edit:hover {
  background-color: rgb(161, 161, 161);
}
.datagrid-all-expenses .buttons-action-row .realocate:hover {
  background-color: rgb(184, 184, 184);
}

.accordion-all-costs {
  margin: 20px;
}
.accordion-all-costs .header-accordion-all-expenses {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.accordion-all-costs .header-accordion-all-expenses .column-accordion {
  display: flex;
  flex-direction: column !important;
  justify-content: center;
  align-items: flex-start;
}
.accordion-all-costs .header-accordion-all-expenses .column-accordion .row-money {
  display: flex;
  justify-content: center;
  align-items: ceter;
  gap: 5px;
  font-size: 12px;
}
.accordion-all-costs .header-accordion-all-expenses .column-accordion .row-money svg {
  font-size: 13px;
}
.accordion-all-costs .header-accordion-all-expenses .column-accordion .date-item {
  font-size: 11px;
  margin: 2px;
}
.accordion-all-costs .header-accordion-all-expenses .button-legend {
  border: 0;
  width: 100px;
  gap: 3px;
  display: flex;
  justify-content: flex-start;
  padding: 0 0 0 5px;
  align-items: center;
  font-size: 11px;
  height: 25px;
  border-radius: 5px;
}
.accordion-all-costs .header-accordion-all-expenses .button-legend svg {
  font-size: 17px;
}
.accordion-all-costs .header-accordion-all-expenses .open {
  background-color: 5px solid #01579b !important;
}
.accordion-all-costs .header-accordion-all-expenses .recused {
  background-color: #f44336 !important;
}
.accordion-all-costs .header-accordion-all-expenses .approved {
  background-color: rgb(90, 160, 77) !important;
}
.accordion-all-costs .header-accordion-all-expenses .approved-part {
  background-color: #ff9800 !important;
}
.accordion-all-costs .body-accordion-all-expenses {
  font-size: 13px;
}
.accordion-all-costs .body-accordion-all-expenses .buttons-action-row {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin: 0 15px;
}
.accordion-all-costs .body-accordion-all-expenses .buttons-action-row .button-action {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 7px;
}
.accordion-all-costs .body-accordion-all-expenses .buttons-action-row .button-action svg {
  font-size: 18px;
}
.accordion-all-costs .body-accordion-all-expenses .buttons-action-row .button-action[disabled] {
  cursor: default;
  background-color: rgb(216, 216, 216) !important;
}
.accordion-all-costs .body-accordion-all-expenses .buttons-action-row .button-action svg {
  font-size: 14px;
}
.accordion-all-costs .body-accordion-all-expenses .buttons-action-row .delete {
  color: rgb(255, 79, 79);
}
.accordion-all-costs .body-accordion-all-expenses .buttons-action-row .delete:hover {
  background-color: #f44336;
  color: white;
}
.accordion-all-costs .body-accordion-all-expenses .buttons-action-row .edit {
  background-color: rgb(216, 216, 216);
}
.accordion-all-costs .body-accordion-all-expenses .buttons-action-row .edit:hover {
  background-color: rgb(161, 161, 161);
}
.accordion-all-costs .body-accordion-all-expenses .buttons-action-row .realocate:hover {
  background-color: rgb(184, 184, 184);
}#h6-label-closed-travel {
  height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.relatory-popup-row {
  padding: 15px;
  position: fixed;
  right: 0;
  bottom: 0;
}

.grid-detail-travel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.grid-detail-travel td {
  padding: 3px !important;
}
.grid-detail-travel .button-legend {
  border: 0;
  width: 80px;
  gap: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  height: 18px;
  border-radius: 5px;
}
.grid-detail-travel .open {
  background-color: #01579b;
}
.grid-detail-travel .recused {
  background-color: #f44336;
}
.grid-detail-travel .approved {
  background-color: rgb(90, 160, 77);
}
.grid-detail-travel .approved-part {
  background-color: #ff9800;
}
.grid-detail-travel .footer-details-relatory .relatory-details-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.grid-detail-travel .footer-details-relatory .relatory-details-row .relatory-details-column {
  display: flex;
  flex-direction: column;
}
.grid-detail-travel .footer-details-relatory .relatory-details-row .button-relatory {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.popup-filter {
  gap: 10px;
  display: flex;
  flex-direction: column;
}
.popup-filter .btn-filter-search button {
  margin: 7px 0 0 0;
  border: 0;
  padding: 3px;
  width: 35px;
  height: 35px;
  border-radius: 7px;
  background-color: #c0ff00;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.popup-filter .btn-filter-search :hover {
  background-color: #b9e868;
  cursor: pointer;
}
.popup-filter .date-box-travel {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}

.container-datagrid-closed {
  position: relative;
  z-index: 1;
  padding: 0 !important;
  margin: 0 !important;
}
.container-datagrid-closed #datagrid-travel-closed {
  margin: 5px;
}
.container-datagrid-closed .filter-icon {
  background-color: white;
  border: 1px solid rgb(219, 219, 219);
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  position: absolute;
  top: 1px;
  right: 225px;
  z-index: 2;
  cursor: pointer;
}
.container-datagrid-closed .filter-icon svg {
  color: #333333;
}
.container-datagrid-closed .filter-icon:hover {
  background-color: rgb(238, 238, 238);
}
.container-datagrid-closed .filter-label {
  position: absolute;
  top: 10px;
  right: 270px;
  z-index: 2;
  font-size: 12px;
}

.consult-icon-accordion-tclosed {
  background-color: #eee !important;
}

.relatory-icon {
  background-color: #c0ff00 !important;
  height: 23px !important;
  padding: 3px 4px 5px 15px !important;
}

.relatory-popup-column .input-datagrid-relatory {
  margin: 0 !important;
  height: 35px !important;
  width: 12rem !important;
  padding: 0 !important;
}

.checkbox-popup-filter {
  margin: 0px 20px 0px 0px;
}

.radiogroup-filter {
  margin-bottom: 0.2em;
}

@media (max-width: 650px) {
  .header-accordion-open {
    font-size: 0.85rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .body-accordion-open {
    font-size: 0.9rem;
  }
  #popup-filter-closed-travels .popup-filter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #popup-filter-closed-travels .input-travels-search {
    height: 35px !important;
    margin-right: 15px !important;
    margin-bottom: 0px !important;
    flex-wrap: wrap;
  }
  .checkbox-popup-filter {
    margin-left: 25px !important;
    margin-top: 10px !important;
    margin-bottom: 10px;
  }
  .radiogroup-filter {
    margin-left: 25px !important;
  }
  .btn-filter-search {
    margin-left: 10px !important;
  }
  .button-consult-accordion {
    display: flex;
    gap: 5px !important;
    margin-top: 15px;
    justify-content: flex-end;
  }
}.main-realocate-expenses .header-realocate-expenses {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  height: 100px;
}
.main-realocate-expenses .header-realocate-expenses .arrow-realocate {
  padding: 40px 0 0;
}
.main-realocate-expenses .header-realocate-expenses .arrow-realocate svg {
  font-size: 30px;
  color: gray;
}
.main-realocate-expenses .container-realocate-expenses {
  display: flex;
  flex-direction: row;
  gap: 5px;
  height: 24em;
}
.main-realocate-expenses .container-realocate-expenses .list-realocate-expenses {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 19em;
  gap: 3px;
  margin: 20px 0;
  padding: 15px 0;
  border: 1px solid #eeeeee;
  border-radius: 5px;
  overflow-y: auto !important;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  box-sizing: content-box;
}
.main-realocate-expenses .container-realocate-expenses .list-realocate-expenses:focus {
  border: 1px solid rgb(199, 199, 199);
}
.main-realocate-expenses .container-realocate-expenses .list-realocate-expenses .card-expense-reallocate {
  width: 260px;
  height: 95px;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s ease;
  -webkit-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.main-realocate-expenses .container-realocate-expenses .list-realocate-expenses .card-expense-reallocate p {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main-realocate-expenses .container-realocate-expenses .list-realocate-expenses .card-expense-reallocate .open {
  border-bottom: 2px solid #01579b;
}
.main-realocate-expenses .container-realocate-expenses .list-realocate-expenses .card-expense-reallocate .recused {
  border-bottom: 2px solid #f44336;
}
.main-realocate-expenses .container-realocate-expenses .list-realocate-expenses .card-expense-reallocate .approved {
  border-bottom: 2px solid rgb(90, 160, 77);
}
.main-realocate-expenses .container-realocate-expenses .list-realocate-expenses .card-expense-reallocate .approved-part {
  border-bottom: 2px solid #ff9800;
}
.main-realocate-expenses .container-realocate-expenses .list-realocate-expenses .card-expense-reallocate .p-space-between {
  display: flex;
  justify-content: space-between;
}
.main-realocate-expenses .container-realocate-expenses .list-realocate-expenses .card-expense-reallocate:hover {
  background-color: #f8f8f8;
}
.main-realocate-expenses .container-realocate-expenses .list-realocate-expenses .card-expense-reallocate:active {
  background-color: #e9e9e9;
  opacity: 1;
  transform: scale(1.05);
}
.main-realocate-expenses .container-realocate-expenses .list-realocate-expenses .empty-list-realocate {
  display: flex;
  justify-content: center;
  gap: 5px;
  align-items: center;
  opacity: 0.5;
  -webkit-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.main-realocate-expenses .container-realocate-expenses .list-realocate-expenses .empty-list-realocate svg {
  font-size: 18px;
}
.main-realocate-expenses .footer-realocate-expenses {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 10px;
}

#open-travels {
  padding: 10px;
}
#open-travels td {
  padding: 3px !important;
}
#open-travels {
  background-color: #fff;
}
#open-travels .header-expenses-view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 30px;
}
#open-travels .header-expenses-view .first-position {
  flex: 0 0 auto;
}
#open-travels .header-expenses-view .second-position {
  flex: 1 0 auto;
  text-align: center;
}
#open-travels .header-expenses-view .h-header {
  font-weight: 500;
  text-transform: uppercase;
  margin-left: -106px;
}
#open-travels .switch {
  width: 70px;
  margin: 0 15px;
}
#open-travels .datagrid-open-travels {
  font-size: 12px !important;
  margin: 10px 15px;
}
#open-travels .icon-message-svg {
  font-size: 50px;
  text-align: center;
  color: #ff9800 !important;
}
#open-travels .btn-confirm-expense {
  background-color: #8f8f8f;
}
#open-travels .btn-confirm-expense:hover {
  background-color: #777777;
}
#open-travels .row-btn-travels {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
#open-travels .row-btn-travels .primary {
  background-color: #c4c4c4 !important;
}
#open-travels .row-btn-travels .button-travels {
  border: 0;
  border-radius: 5px;
  background-color: #e6e6e6;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  width: 25px;
  height: 20px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
#open-travels .row-btn-travels .button-travels:hover:not(:disabled) {
  color: rgb(97, 97, 97);
  opacity: 0.9;
  background-color: #d4d4d4;
}
#open-travels .row-btn-travels .button-travels:disabled:hover {
  opacity: 0.4;
}
#open-travels .row-btn-travels .button-travels:disabled {
  opacity: 0.4;
  color: gray;
  cursor: default;
}
#open-travels .row-btn-travels .button-travels svg {
  font-size: 12px;
}
#open-travels .accordion-open-travels {
  margin: 20px 15px;
}
#open-travels .accordion-open-travels .header-accordion-open svg {
  margin: 0 0 -5px 5px;
  font-size: 16px;
  color: #79c479;
}
#open-travels .accordion-open-travels .footer-accordion-open {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin: 10px 5px 0 0;
}.btn-cnpj-consult {
  border: 1px solid rgb(221, 221, 221);
  background-color: #fff;
  padding: 5px 12px;
  font-size: 13px;
  border-radius: 3px;
  cursor: pointer;
  height: 35px;
}
.btn-cnpj-consult:hover {
  background-color: rgb(240, 240, 240);
}

.row-cnpj-consult {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
}
.row-cnpj-consult span {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}
.skeleton-loader {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 1em;
}

.skeleton {
  background: linear-gradient(90deg, #e0e0e0 0%, #f0f0f0 50%, #e0e0e0 100%);
  background-size: 300% 100%;
  /* Aumenta o tamanho do gradiente para criar o efeito de movimento */
  border-radius: 4px;
  animation: shimmer 1.5s ease-in-out infinite;
  /* Ajusta a duração e suavidade da animação */
}

.skeleton-title {
  width: 60%;
  height: 2.5em;
}

.skeleton-line {
  width: 100%;
  height: 2em;
}

.skeleton-image {
  width: 100%;
  height: 6em;
}

@keyframes shimmer {
  0% {
    background-position: -150% 0;
    /* Gradiente começa fora do elemento */
  }
  50% {
    background-position: 50% 0;
    /* Gradiente passa pelo centro */
  }
  100% {
    background-position: 150% 0;
    /* Gradiente termina fora do elemento */
  }
}.recuse-button-default-style {
  background-color: #f44336 !important;
}.button-approve-partly {
  background-color: #ff9800 !important;
}

.spinner-approve-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 1em;
}

.spinner-approve-image {
  border: 6px solid rgba(0, 0, 0, 0.1);
  border-top: 6px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spinImg-approve 1s linear infinite;
}

@keyframes spinImg-approve {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}.btn-disabled {
  opacity: 0.2 !important;
  pointer-events: none !important;
}

.popup-analyze-expense {
  width: 100% !important;
  height: 100% !important;
  display: flex;
  flex-direction: column !important;
  align-items: center;
  justify-content: space-between;
}

.header-grid-expenses-calendar svg {
  font-size: 15px;
}

.header-grid-expenses-recuse svg {
  font-size: 15px;
  color: #f44336;
}

.header-grid-expenses-check svg {
  background-color: #3CB371;
  color: white;
  padding: 2px;
  border-radius: 3px;
  font-size: 13px;
}

.datafield-return-icon svg {
  background-color: #3CB371;
  color: white;
  padding: 2px;
  border-radius: 3px;
  font-size: 16px;
}

.popup-editing-expenses .btn-new-ticket-row {
  margin: 0 17px 0 0 !important;
}

.container-datagrid-expenses {
  background-color: #fff;
  padding: 5px;
  border: 1px solid rgb(221, 221, 221);
}
.container-datagrid-expenses .cnpj-cell-custom {
  display: flex;
  justify-content: flex-start;
  position: relative;
  align-items: center;
  color: rgb(156, 156, 156);
}
.container-datagrid-expenses .cnpj-cell-custom svg {
  position: absolute;
  top: -1px;
  right: -3px;
  font-size: 20px;
  padding: 3px;
  border-radius: 3px;
  color: #ff9800;
}
.container-datagrid-expenses .header-expenses-view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 30px;
}
.container-datagrid-expenses .header-expenses-view .first-position {
  flex: 0 0 auto;
}
.container-datagrid-expenses .header-expenses-view .second-position {
  flex: 1 0 auto;
  text-align: center;
}
.container-datagrid-expenses .header-expenses-view .h-header {
  font-weight: 500;
  text-transform: uppercase;
  margin-left: -106px;
}
.container-datagrid-expenses .switch {
  width: 70px;
  margin: 0 20px;
}
.container-datagrid-expenses .datagrid-travel-open {
  margin: 5px;
}
.container-datagrid-expenses .datagrid-travel-open td {
  padding: 3px !important;
}

div.document-header-image {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  padding: 5px 0;
  background-color: #eeeeee;
}
div.document-header-image div.document-header-content-image {
  display: flex;
  align-items: center;
  flex: 1;
  margin: 5px 0;
}
div.document-header-image div.document-header-content-image div.page-actions-image {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding-left: 50px;
}
div.document-header-image div.document-header-content-image svg {
  font-size: 1.75rem;
  color: #c0c0c0;
  margin: 5px 20px;
}
div.document-header-image div.document-header-content-image svg:hover {
  color: #000;
  cursor: pointer;
}

.zoomable-image-container {
  height: 77dvh;
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #eeeeee;
}
.zoomable-image-container .view-image-container {
  position: relative;
}
.zoomable-image-container .view-image-container .text-loading {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adadad;
  width: 0;
}
.zoomable-image-container .view-image-container span {
  font-size: 18px;
  white-space: nowrap;
}
.zoomable-image-container .view-image-container .zoomable-image {
  max-width: 100%;
  max-height: 100%;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
  -webkit-user-select: none;
          user-select: none;
}

.popover-f100-editing {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 10px;
}

.zoom-button {
  margin: 0.5rem;
  outline: none;
  /* Remove o contorno de foco */
}

.popup-analyze-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 15px;
  justify-content: space-between;
  border-top: 1px solid rgb(201, 201, 201);
}
.popup-analyze-row .btn-add-supplier-expense {
  box-shadow: 0 0 0 30px #eee inset !important;
  padding: 0 5px 0 3px;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup-analyze-row .btn-add-supplier-expense:disabled {
  opacity: 0;
  cursor: default !important;
}
.popup-analyze-row .cnpj-cell-custom {
  display: flex;
  flex-direction: row;
  align-items: center !important;
  color: rgb(156, 156, 156);
  gap: 5px;
}
.popup-analyze-row .cnpj-cell-custom svg {
  font-size: 15px;
  border-radius: 3px;
  color: #ff9800;
}

.popup-analyze-expense .pdf-analyze-expense {
  height: 100vh;
  width: 100%;
}
.popup-analyze-expense .pdf-analyze-expense #pdf-viewer-wrapper {
  height: 64vh !important;
}

.analyze-expense-column {
  display: flex;
  flex-direction: row;
}

.analyze-expense-row {
  display: flex;
  flex-direction: row !important;
  justify-content: flex-end;
  align-items: flex-end;
}

#expense-observation-tooltip {
  width: 220px !important;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#expense-observation-tooltip .header-tooltip-recuse {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#expense-observation-tooltip .expense-observation-text {
  white-space: pre-line;
  overflow: hidden;
  background-color: rgb(238, 238, 238);
  padding: 3px;
  border-radius: 3px;
}

.popup-analyze-expense-text {
  padding: 10px;
  margin: 5px 0 0 0;
  white-space: nowrap;
  overflow: hidden;
  max-width: 550px;
  width: 100%;
  font-size: 13px;
  box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2);
}
.popup-analyze-expense-text .display-flex-space-between {
  display: flex;
  justify-content: space-between;
  font-size: 17px;
}
.popup-analyze-expense-text .display-flex-space-between .group-buttons-analyze-expenses {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: flex-end;
}
.popup-analyze-expense-text .display-flex-space-between .group-buttons-analyze-expenses #btn-travel-rescuse {
  color: #f44336;
}
.popup-analyze-expense-text button {
  background-color: #fafafa;
  border: none;
  cursor: pointer;
}
.popup-analyze-expense-text button svg {
  font-size: 15px;
}
.popup-analyze-expense-text button:hover {
  color: rgb(128, 128, 128);
}

.btn-edit-cost {
  padding: 0px 5px;
  margin-left: 15px;
  margin-right: 30px;
}

.serie-input-travel {
  margin-top: 0px !important;
}

.realocate-expense {
  background-color: white !important;
  height: 23px !important;
  padding: 3px 4px 5px 15px !important;
  margin-left: 5px !important;
  width: 40px;
}

.realocate-expense:hover {
  background-color: #CCC !important;
}

.popup-realocate-expense {
  display: flex;
  flex-direction: column;
  justify-content: space-between !important;
}

.btn-realocate-expense {
  margin-top: 15px;
  margin-right: 5px !important;
}

.checkbox-travel-expense {
  margin: 0 10px 5px 0;
}

.consult-icon-accordion-tclosed {
  background-color: #eee !important;
}

.consult-icon {
  border: 0;
  border-radius: 5px;
  background-color: #eee !important;
  height: 20px !important;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  width: 40px;
}

.consult-icon:hover {
  background-color: #c0c0c0 !important;
}

.btn-edit-cost {
  padding: 0px 5px;
}

.btn-accept-cost {
  padding: 0px 5px;
  margin-left: 7px;
}
.btn-accept-cost i {
  font-size: 13px !important;
  margin: 0 3px 0 0 !important;
}

.btn-recuse-cost {
  background-color: #f44336 !important;
  padding: 0 5px;
}
.btn-recuse-cost i {
  font-size: 13px !important;
  margin: 0 3px 0 0 !important;
}

.disabled-btn {
  opacity: 0.2;
  pointer-events: none;
}

.btn-partly-cost {
  background-color: #ff9800 !important;
  padding: 0 5px;
  margin-left: 5px;
  font-size: 10px !important;
}
.btn-partly-cost i {
  font-size: 13px !important;
  margin: 0 3px 0 0 !important;
}
.btn-partly-cost:hover {
  background-color: rgb(202, 131, 0) !important;
}

.btn-recuse-cost:hover {
  background-color: rgb(146, 54, 54) !important;
}

.btn-recuse-return {
  background-color: #c0c0c0 !important;
  padding: 0px;
  padding-left: 10px;
  margin-left: 5px;
}

.btn-recuse-return:hover {
  background-color: gray !important;
}

.datafield-recuse-icon {
  font-size: 15px !important;
  display: flex;
  justify-content: center;
  color: red;
}

.popover-partly-accepted {
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.popover-partly-accepted svg {
  margin-top: 8px;
}

.popover-partly-accepted > svg:hover {
  cursor: pointer;
}

@media (max-width: 650px) {
  .popover-f100-editing {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    padding: 10px;
  }
  #expense-observation-tooltip {
    padding: 10px;
  }
  .popup-analyze-expense {
    padding: 0 0 10px 0;
  }
  .popup-analyze-expense .pdf-analyze-expense {
    height: 55vh;
    width: 100%;
  }
  .popup-analyze-expense .pdf-analyze-expense #pdf-viewer-wrapper {
    height: 55vh !important;
  }
  .popup-analyze-expense .zoomable-image-container {
    height: 55vh;
    width: 100%;
    overflow: hidden;
    position: relative;
    background-color: #eeeeee;
  }
  .popup-analyze-expense .popup-analyze-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .popup-analyze-expense .analyze-expense-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5;
  }
  .popup-analyze-expense .analyze-expense-row .checkbox-travel-expense {
    padding: 0;
    margin: 0;
  }
  .container-datagrid-expenses .header-expenses-view .h-header {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 11px;
  }
  .analyze-expense-row {
    display: flex;
    flex-direction: row !important;
    margin-bottom: 5px;
    justify-content: space-between;
  }
  .accordion-open-costs {
    margin: 20px;
  }
  .accordion-open-costs .header-accordion-all-expenses {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 15px;
  }
  .accordion-open-costs .header-accordion-all-expenses .column-accordion {
    display: flex;
    flex-direction: column !important;
    justify-content: center;
    align-items: flex-start;
  }
  .accordion-open-costs .header-accordion-all-expenses .column-accordion .row-money {
    display: flex;
    justify-content: center;
    align-items: ceter;
    gap: 5px;
    font-size: 12px;
  }
  .accordion-open-costs .header-accordion-all-expenses .column-accordion .row-money svg {
    font-size: 13px;
  }
  .accordion-open-costs .header-accordion-all-expenses .column-accordion .date-item {
    font-size: 11px;
    margin: 2px;
  }
  .accordion-open-costs .body-accordion-open .icons-accordion-open {
    background-color: #eee !important;
    width: 100%;
    height: 2px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 5px;
  }
  .accordion-open-costs .body-accordion-open .icons-accordion-open .consult-icon {
    border: 0;
    border-radius: 5px;
    background-color: #eee !important;
    height: 30px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    width: 35px;
  }
  .header-accordion-open {
    font-size: 0.85rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .body-accordion-open {
    font-size: 13px;
  }
  .consult-icon {
    margin-top: 5px;
    width: 100px;
    height: 30px;
    padding-bottom: 5px !important;
  }
  .popup-analyze-expense-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis !important;
    font-size: 12px;
  }
  .popup-analyze-expense-text .display-flex-space-between {
    display: flex;
    justify-content: space-between;
    width: 100% !important;
  }
  .checkbox-travel-expense {
    font-size: 15px;
    margin-right: 5px;
    padding-bottom: 10px;
    margin-left: 15px;
    margin-bottom: 10px;
  }
  .btn-edit-cost {
    padding: 0px 5px;
    margin-right: 45px;
    background-color: #eee !important;
  }
  .btn-accept-cost {
    margin-right: 10px !important;
  }
  .analyze-expense-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}
@media (max-width: 480px) {
  .btn-edit-cost,
  .btn-recuse-cost,
  .btn-partly-cost,
  .btn-accept-cost {
    margin-right: 5px !important;
    font-size: 10px !important;
  }
  .btn-edit-cost svg,
  .btn-recuse-cost svg,
  .btn-partly-cost svg,
  .btn-accept-cost svg {
    display: none !important;
  }
  .analyze-expense-row {
    display: flex;
    justify-content: center !important;
  }
}
.image-recused-expense-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 15rem;
  overflow: hidden;
  margin: 0 0 5px 0;
}
.image-recused-expense-container svg {
  font-size: 50px;
  opacity: 0.6;
}
.image-recused-expense-container img {
  max-width: 100%;
  height: auto;
  flex-shrink: 1;
}

.recuse-expense-container {
  height: 100%;
}

#recused-expense {
  padding: 10px;
  display: flex;
  background-color: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#recused-expense .datagrid-recused-expenses td {
  padding: 3px !important;
}
#recused-expense .recused-expenses-title {
  padding: 18px 0 10px 0;
  font-weight: 500;
  text-transform: uppercase;
}

.recuse-expense-chat .icon-chat {
  margin-top: 15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #a15757;
}
.recuse-expense-chat .icon-chat svg {
  color: #dddddd;
  padding: 5px;
  width: 30px;
  height: 30px;
}
.recuse-expense-chat .icon-response-chat {
  margin-top: 15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #dddddd;
}
.recuse-expense-chat .icon-response-chat svg {
  padding: 5px;
  width: 30px;
  height: 30px;
}
.recuse-expense-chat .response-chat-outer {
  display: flex;
  flex-direction: column;
}
.recuse-expense-chat .response-chat-outer b {
  font-size: 10px;
}
.recuse-expense-chat {
  position: relative;
  padding: 3px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
}
.recuse-expense-chat .recuse-chat-body {
  width: 300px !important;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid rgb(212, 212, 212);
}
.recuse-expense-chat .recuse-chat-message {
  padding-top: 5px;
}
.recuse-expense-chat .message-item-chat {
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin: 8px 10px;
  padding: 10px;
}
.recuse-expense-chat .message-item-chat span {
  display: flex;
  font-size: 12px;
}
.recuse-expense-chat .message-item-chat span b {
  font-size: 10px;
}
.recuse-expense-chat .recuse-motive {
  background-color: rgb(245, 245, 245);
  width: 320px !important;
}
.recuse-expense-chat .recuse-response {
  background-color: rgb(236, 236, 236);
  width: 320px !important;
}

.recuse-expense-chat::before {
  content: "";
  position: absolute;
  margin-left: 15px;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #f5f5f5;
  /* Cor da linha vertical */
  transform: translateX(-50%);
  /* Centralizando a partir do meio */
  z-index: -1;
  /* Colocar atrás do conteúdo */
  overflow: hidden;
}

@media (max-width: 650px) {
  .container-recused-expenses-m {
    display: flex;
    flex-direction: column;
  }
  .recuse-expense-chat .recuse-chat-body {
    width: 260px !important;
  }
  .recuse-expense-chat .recuse-motive {
    width: 280px !important;
  }
  .recuse-expense-chat .recuse-response {
    width: 280px !important;
  }
}.container-travel-analyze {
  margin: 7px 10px;
}
.container-travel-analyze .tab-teste {
  border-radius: 8px;
  padding: 3px 0 0 3px;
}

#analyze-travels .header-analyze {
  display: flex;
  justify-content: center;
  align-items: center;
}
#analyze-travels div.children {
  background-color: #f7f7f7;
  text-align: center;
  flex-grow: 1;
  padding: 10px;
  border-bottom: 3px solid black;
}
#analyze-travels div.children:hover {
  background-color: #eee;
  cursor: pointer;
}
#analyze-travels .navbar-active {
  border-bottom: 4px solid #c0ff00 !important;
  background-color: #c0c0c0 !important;
}#page-employee-portal {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}

@media (max-width: 650px) {
  #page-employee-portal .tab-item-link {
    font-size: 0.75rem;
  }
  #page-user-manual .btn-sign .label-term {
    font-size: 0.8rem;
  }
}
#page-user-manual .btn-sign {
  margin: 15px 10px;
  padding-top: 3px;
}
#page-user-manual .btn-sign .label-term {
  margin-left: 10px;
}#page-employee-portal {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}

@media (max-width: 650px) {
  #page-employee-portal .tab-item-link {
    font-size: 0.75rem;
  }
}.page-not-found {
  text-align: center;
}

.page-not-found .icon-warning {
  font-size: 8rem;
  margin-top: 10vh;
  color: #ff9800;
}

.page-not-found .text-not-found {
  font-size: 2.5rem;
  margin-bottom: 50px;
}

@media (max-width: 650px) {
  .page-not-found .icon-warning {
    font-size: 6rem;
  }
  .page-not-found .text-not-found {
    font-size: 1.5rem;
  }
}.page-permitted {
  text-align: center;
}
.page-permitted .icon-block {
  font-size: 8rem;
  margin-top: 10vh;
  color: #f44336;
}
.page-permitted .text-not-permitted {
  font-size: 2.5rem;
  margin-bottom: 50px;
}
.page-permitted .text-not-permitted-detail {
  font-size: 1rem;
  margin-bottom: 50px;
}

@media (max-width: 650px) {
  .page-permitted .icon-block {
    font-size: 6rem;
  }
  .page-permitted .text-not-permitted {
    font-size: 1.5rem;
  }
}#page-rh {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-rh > .row .col {
  padding: 0;
}
#page-rh div.box-item {
  background: #fff;
  display: flex;
  align-items: center;
  margin: 5px;
  text-align: center;
  height: 75px;
  border: 3px solid #fff;
  border-left: 10px solid #c0ff00;
  padding: 0 5px 0 10px;
  border-radius: 3px;
  font-size: 16px;
  color: #000;
}
#page-rh div.box-item svg {
  margin-right: 10px;
  font-size: 2rem;
  color: #c0c0c0;
}
#page-rh div.box-item:hover {
  border: 3px solid #c0ff00;
  border-left: 10px solid #c0ff00;
}
#page-rh div.box-item .title {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}
#page-rh div.box-item .title > span {
  color: #000;
}

@media (max-width: 650px) {
  #page-rh .tab-item-link {
    font-size: 0.75rem;
  }
}#detail-icon {
  margin-left: 5px;
  font-size: 1.2rem;
  cursor: pointer;
  color: #000;
}

#detail-icon:hover {
  color: #c0ff00;
}#page-employee {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-employee > .row .col {
  padding: 0;
}
#page-employee div.pai {
  display: flex;
  justify-content: space-between;
}
#page-employee div.filho {
  background-color: #f7f7f7;
  text-align: center;
  flex-grow: 1;
  padding: 10px;
  border-bottom: 3px solid black;
}
#page-employee div.filho:hover {
  background-color: #eee;
  cursor: pointer;
}
#page-employee .navbar-active {
  border-bottom: 4px solid #c0ff00 !important;
  background-color: #c0c0c0 !important;
}
#page-employee div.item-navbar-order-hours > span {
  text-align: center !important;
  height: 50px;
}
#page-employee div.item-navbar-order-hours :hover {
  background-color: red;
}
#page-employee div.img-rh {
  width: 250px;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
#page-employee .file-uploader {
  max-width: 275px;
}
#page-employee .container-evaluations {
  padding: 10px;
  max-width: 515px;
  border: #c0c0c0 solid 2px;
  max-height: 70vh;
  min-height: 25vh;
  min-width: 515px;
  overflow: scroll;
  overflow-x: hidden;
}
#page-employee .children-evaluation {
  margin-bottom: 10px;
  border-bottom: #eee solid 4px;
  padding-bottom: 10px;
}
#page-employee .btn-add-new-evaluation {
  margin-bottom: 10px;
  margin-right: 5px;
}
#page-employee .btn-edit-evaluation {
  float: right;
  margin-right: 2px;
}
#page-employee .form-evaluation {
  margin-top: 20px;
}
#page-employee #container-form-employee-rh {
  display: flex;
  justify-content: center;
  align-items: center;
}
#page-employee #image-employee {
  height: 150px !important;
  width: 150px !important;
  border: 1px solid black;
  border-radius: 150px;
}
#page-employee #image-employee:hover {
  cursor: pointer;
}
#page-employee #id-teste {
  width: 350px;
  height: 350px;
  background-color: rgba(183, 183, 183, 0.1);
  border-width: 2px;
  border-style: dashed;
  padding: 10px;
}
#page-employee .file-uploader {
  max-width: 180px !important;
}
#page-employee #form-employee-rh {
  padding: 0 50px 0 50px;
  justify-content: center;
  align-items: center;
}
#page-employee #form-employee-rh .row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin: 0;
}
#page-employee #form-employee-rh .input-form-employee-rh {
  height: 35px;
  margin-right: 15px;
  width: 250px;
  padding-left: 4px !important;
  flex-wrap: wrap;
}
#page-employee #form-employee-rh .input-form-employee-rh-text-area {
  height: 100px;
  margin-right: 15px;
  width: 515px;
  padding-left: 4px;
}
#page-employee #form-employee-rh .input-form-employee-rh-long {
  padding-left: 4px;
  height: 35px;
  width: 515px;
  margin-right: 15px;
}
#page-employee #form-employee-rh .btn-submit-employee-rh {
  margin-right: 10px;
  margin-top: 10px;
  font-size: 1rem;
  background-color: #c0ff00 !important;
}
#page-employee #form-employee-rh .btn-submit-evaluation {
  margin-right: 10px;
  margin-top: 10px;
  font-size: 1rem;
  margin-bottom: 10px;
  background-color: #c0ff00 !important;
}
#page-employee #form-employee-rh .btn-submit-employee-rh :hover {
  background-color: #b9e868 !important;
}

.row-btn-confirm-delete-evaluation {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

div.confirm-delete-evaluation {
  display: flex;
  height: 80%;
  text-align: center;
  flex-direction: column;
  justify-content: space-between !important;
}

@media (max-width: 650px) {
  .container-evaluations {
    min-height: 25vh;
    min-width: 250px !important;
  }
  #form-employee-rh .row {
    justify-content: center;
    align-items: center;
    flex-direction: column !important;
  }
  #form-employee-rh .input-form-employee-rh-long {
    width: 250px !important;
  }
  #form-employee-rh .input-form-employee-rh-text-area {
    width: 250px !important;
  }
  .container-evaluations {
    max-width: 250px !important;
  }
  .children-evaluation > p > span {
    font-size: 0.85rem;
  }
}
@media (max-width: 375px) {
  .row {
    flex-direction: column;
  }
}div.row-times {
  display: flex;
  flex-direction: row;
}

#popup-teste {
  background-color: red;
}.row-logs {
  margin-bottom: 10px;
  padding: 2 px;
  border: 1px solid #c0c0c0;
  border-radius: 5px;
}

.btn-refresh {
  margin-bottom: 10px;
}

.row-logs > h6 {
  margin: 3px;
}

div.no-data {
  text-align: center;
}

@media (max-width: 375px) {
  .row-logs > h6 {
    font-size: 0.75rem;
  }
}#container {
  background-color: #f7f7f7;
  margin-bottom: 20px;
}

div.itens-menu-hambuguer {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.btn-hambuguer {
  background-color: transparent;
  border: none;
}#word-document {
  margin-top: 10px;
}

label.cameraButtoon {
  padding: 0.5em;
  border: 2px solid #666;
  border-color: #EEE #CCC #CCC #EEE;
  background-color: #DDD;
}

label.cameraButtoon input[accept*=pdf] {
  display: none;
}

label.cameraButtoon:active {
  border-color: #CCC #EEE #EEE #CCC;
}

/* This is the part that actually hides the 'Choose file' text box for camera inputs */#page-employee {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  min-height: calc(100vh - 110px);
}
#page-employee > .row .col {
  padding: 0;
}
#page-employee .btn-new-employee {
  margin-bottom: 20px;
}
#page-employee .file-uploader {
  max-width: 275px;
}
#page-employee .btn-filter-employee {
  margin-left: 10px;
}
#page-employee .row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
#page-employee #rb-company {
  margin-right: 20px;
}
#page-employee #teste {
  display: flex;
  justify-content: center;
  align-items: center;
}
#page-employee #image-employee {
  height: 250px;
  width: 250px;
  border: 1px solid black;
}
#page-employee #form-employee-rh {
  padding: 0 50px 0 50px;
  justify-content: center;
  align-items: center;
}
#page-employee #form-employee-rh .row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
#page-employee #form-employee-rh .input-form-employee-rh {
  height: 35px;
  margin-right: 15px;
  width: 250px;
  padding-left: 4px !important;
  margin-bottom: 0px !important;
  flex-wrap: wrap;
}
#page-employee #form-employee-rh .input-form-employee-rh-text-area {
  height: 100px;
  margin-right: 15px;
  width: 515px;
  padding-left: 4px;
}
#page-employee #form-employee-rh .input-form-employee-rh-long {
  padding-left: 4px;
  height: 35px;
  width: 515px;
  margin-right: 15px;
}

@media (max-width: 650px) {
  #form-employee-rh .row {
    justify-content: center;
    align-items: center;
    flex-direction: column !important;
  }
  #form-employee-rh .input-form-employee-rh-long {
    width: 250px !important;
  }
  #form-employee-rh .input-form-employee-rh-text-area {
    width: 250px !important;
  }
}
@media (max-width: 375px) {
  #data-grid-consult-employee .panel-consult-employee {
    width: 75px !important;
  }
  .btn-filter-employee {
    height: 30px;
    margin-left: 5px;
  }
  .row {
    flex-direction: column;
  }
}.title-confirmation-exclusion-demonstrative {
  width: 100%;
  font-weight: bold;
  text-align: justify;
}

.div-btns-confirm-exclusion-demonstrative {
  height: 75%;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
}

.btn-exclusion-demonstrative {
  background-color: red !important;
}.icon-exclusion-demonstrative {
  cursor: pointer;
}

.icon-exclusion-demonstrative:hover {
  color: red;
}.container-vacations {
  text-align: center;
  padding: 20px;
}
.container-vacations #title-page-vacations {
  font-size: large;
  font-weight: bold;
}

.view-btn-att-demonstratives {
  width: 100%;
  display: flex;
  margin-bottom: 10px;
  align-items: flex-start;
  justify-content: flex-start;
}.tree-item__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
}
.tree-item__content:hover {
  background-color: #e3f2fd !important;
}
.tree-item:nth-child(odd) .tree-item__content {
  background-color: #ffffff;
}
.tree-item:nth-child(even) .tree-item__content {
  background-color: #f8f9fa;
}
.tree-item__children {
  border-left: 1px solid #e0e0e0;
  margin-left: 10px;
}
.tree-item__children .tree-item:nth-child(odd) .tree-item__content {
  background-color: #f8f9fa;
}
.tree-item__children .tree-item:nth-child(even) .tree-item__content {
  background-color: #ffffff;
}
.tree-item__children .tree-item__children .tree-item:nth-child(odd) .tree-item__content {
  background-color: #ffffff;
}
.tree-item__children .tree-item__children .tree-item:nth-child(even) .tree-item__content {
  background-color: #f8f9fa;
}
.tree-item__left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.tree-item__toggle {
  width: 16px;
  display: flex;
  justify-content: center;
  color: #666;
}
.tree-item__icon {
  display: flex;
  align-items: center;
}
.tree-item__name {
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tree-item__actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}
.tree-item__content:hover .tree-item__actions {
  opacity: 1;
}.books-container {
  padding: 16px;
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
}

.books-header {
  margin-bottom: 16px;
}
.books-header__mobile {
  display: flex;
  align-items: center;
  padding: 0 0 5px 0;
  gap: 8px;
}
.books-header__toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.books-header__toolbar h6 {
  margin: 0;
  flex: 1;
  text-align: center;
}

.books-search {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  min-width: 200px;
}
.books-search:focus {
  outline: none;
  border-color: #007acc;
}

.books-tree {
  flex: 1;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: white;
  padding: 8px;
}.container-books {
  background-color: white;
  margin: 10px;
  border-radius: 5px;
}
.container-books #grid-books-files {
  border: 1px solid rgb(235, 235, 235);
}
.container-books #grid-books-files .options-download-books-files {
  display: flex;
  justify-content: center;
}
.container-books #grid-books-files .options-download-books-files .download-book-file-icon:hover {
  cursor: pointer;
}

.div-icon-att-books {
  position: absolute;
  top: 95px;
  z-index: 2;
  left: 20px;
}
.div-icon-att-books .icon-att-books {
  vertical-align: middle !important;
  padding: 0;
  width: 50px;
  background-color: #eee !important;
}
.div-icon-att-books .icon-att-books svg {
  margin: 0;
}.popup-appointment-title-render {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.popup-appointment-title-render span {
  font-weight: 500;
  font-size: 15px;
  max-width: 80%;
  text-overflow: ellipsis;
  overflow: hidden;
}
.popup-appointment-title-render .buttons-group {
  display: flex;
  gap: 10px;
}

.datagrid-appointments {
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: relative;
}
.datagrid-appointments .header-appointment {
  position: absolute;
  top: 8px;
  z-index: 2;
  left: 120px;
  display: flex;
  gap: 10px;
}
.datagrid-appointments .card-image-installation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.datagrid-appointments .card-image-installation p {
  border-bottom: solid 1px #e4e4e4;
  margin: 0 5px;
}
.datagrid-appointments .card-image-installation {
  background-color: #fff;
  margin: 15px;
  padding: 10px;
  border-left: solid 5px rgb(221, 221, 221);
}
.datagrid-appointments .card-image-installation:hover {
  opacity: 0.9;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05), 0 0px 15px rgba(160, 160, 160, 0.18);
}
.datagrid-appointments .preview-image-engineering {
  margin: 5px 0 0 10px;
  width: 30em !important;
  padding: 0 10px;
  border: 1px solid rgb(209, 209, 209);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.datagrid-appointments .preview-image-engineering .header-preview-image {
  padding: 10px;
  font-size: 0.75em;
  display: flex;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis !important;
  color: rgb(112, 112, 112);
}
.datagrid-appointments .preview-image-engineering img {
  width: 100%;
  cursor: pointer;
  overflow: hidden !important;
  z-index: 0;
  transform: scale(2.5);
}
.datagrid-appointments .preview-image-engineering img:hover, .datagrid-appointments .preview-image-engineering img:focus-within {
  transition-delay: 1s;
  transition: transform 1s cubic-bezier(1, 0, 0, 1);
  transform: scale(2);
}
.datagrid-appointments td {
  font-family: Roboto, sans-serif;
  padding: 3px !important;
  vertical-align: middle !important;
}
.datagrid-appointments .row-appointment-status-render {
  display: flex;
  flex-direction: row;
  font-weight: normal;
  cursor: pointer;
  border-radius: 3px;
  color: rgb(65, 65, 65);
  font-weight: 500;
}
.datagrid-appointments .row-appointment-status-render .header-group-status-render {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis !important;
}
.datagrid-appointments .row-appointment-status-render .appointment-status-btn {
  margin-left: 25px;
  color: #fff;
  border-radius: 3px;
  padding: 2px 5px;
  gap: 5px;
  display: flex;
  align-items: center;
  font-size: 12px !important;
}
.datagrid-appointments .row-appointment-status-render .color-1 {
  background-color: #01579b;
}
.datagrid-appointments .row-appointment-status-render .color-2 {
  background-color: rgb(163, 163, 163);
}
.datagrid-appointments .row-appointment-status-render .color-3 {
  background-color: rgb(231, 231, 231);
  color: rgb(146, 146, 146);
}
.datagrid-appointments .row-appointment-status-render .color-4 {
  background-color: #3cb371;
}
.datagrid-appointments .row-appointment-status-render .color-5 {
  background-color: #ff9800;
}#list-appointments-steps {
  margin: 0 20px;
}

.action-sheet-appointment-render {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgb(228, 228, 228);
  font-size: 11px;
  color: rgb(70, 70, 70);
}
.action-sheet-appointment-render:active {
  background-color: rgb(187, 187, 187);
}
.action-sheet-appointment-render svg {
  margin: 0 3px;
  font-size: 14px;
}

#appointment-popup-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  align-items: center;
  position: relative;
}
#appointment-popup-container .header-list-appointments {
  position: absolute;
  top: 10px;
  left: 10px;
}
#appointment-popup-container ::-webkit-scrollbar {
  height: 8px;
}
#appointment-popup-container ::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #c0c0c0;
}
#appointment-popup-container ::-webkit-scrollbar-track {
  background: #ededed;
}
#appointment-popup-container .img-carroussel-container {
  display: flex;
  justify-content: flex-start;
  /* Alterado de 'center' para 'flex-start' para evitar centralizar os itens */
  flex-direction: row;
  align-items: center;
  overflow-y: hidden;
  overflow-x: auto;
  gap: 5px;
  width: 90vw;
  padding: 5px 0;
  scroll-snap-type: x mandatory;
  /* Adicionado para configurar o scroll horizontal */
  scroll-behavior: smooth;
  /* Adicionado para criar o efeito de bounce */
}
#appointment-popup-container .img-carroussel-container .carroussel-img-item {
  display: flex;
  flex-direction: row;
  gap: 5px;
  scroll-snap-align: start;
  /* Adicionado para garantir que os itens se alinhem durante o scroll */
}
#appointment-popup-container .img-carroussel-container .carroussel-img-item img {
  width: 110px;
  height: 60px;
}
#appointment-popup-container .img-carroussel-container .carroussel-img-item {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05), 0 0px 15px rgba(160, 160, 160, 0.18);
}
#appointment-popup-container .row-appointment-phases {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  gap: 10px;
  height: 40px;
  white-space: pre-line;
  align-items: center;
}
#appointment-popup-container .row-appointment-phases svg {
  font-size: 16px;
}
#appointment-popup-container .row-appointment-phases .color-1 {
  background-color: #01579b;
}
#appointment-popup-container .row-appointment-phases .color-2 {
  background-color: rgb(163, 163, 163);
}
#appointment-popup-container .row-appointment-phases .color-3 {
  background-color: rgb(231, 231, 231);
  color: rgb(146, 146, 146);
}
#appointment-popup-container .row-appointment-phases .color-4 {
  background-color: #3cb371;
}
#appointment-popup-container .row-appointment-phases .color-5 {
  background-color: #ff9800;
}
#appointment-popup-container .row-appointment-phases .mobile-status-appointments {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35px !important;
  width: 35px !important;
  border-radius: 5px;
  color: white;
}
#appointment-popup-container .row-appointment-phases .mobile-status-appointments span {
  display: flex;
  justify-content: center;
  align-items: center;
}
#appointment-popup-container .container-image-appointment {
  overflow: hidden;
  position: relative;
  max-width: 100%;
  width: 100%;
  height: 145px;
  justify-content: center;
  align-items: center;
  display: flex;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05), 0 0px 15px rgba(160, 160, 160, 0.18);
  border-radius: 10px;
}
#appointment-popup-container .container-image-appointment img {
  min-width: 60px;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease-in-out;
  transform: scale(0.8);
}
#appointment-popup-container .row-appointment-status-render {
  display: flex;
  flex-direction: row;
  font-weight: normal;
  font-size: 18px;
  cursor: pointer;
  border-radius: 3px;
  color: rgb(65, 65, 65);
}
#appointment-popup-container .row-appointment-status-render .header-group-status-render {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis !important;
}
#appointment-popup-container .row-appointment-status-render .appointment-status-btn {
  margin-left: 25px;
  color: #fff;
  border-radius: 3px;
  padding: 2px 5px;
  gap: 5px;
  display: flex;
  align-items: center;
  font-size: 12px !important;
}
#appointment-popup-container .row-appointment-status-render .color-1 {
  background-color: #01579b;
}
#appointment-popup-container .row-appointment-status-render .color-2 {
  background-color: rgb(163, 163, 163);
}
#appointment-popup-container .row-appointment-status-render .color-3 {
  background-color: rgb(231, 231, 231);
  color: rgb(146, 146, 146);
}
#appointment-popup-container .row-appointment-status-render .color-4 {
  background-color: #3cb371;
}
#appointment-popup-container .row-appointment-status-render .color-5 {
  background-color: #ff9800;
}.loading-rework {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-rework-list {
  display: flex;
  width: 100%;
  justify-content: center;
  position: relative;
}
.container-rework-list .rework-timeline {
  position: relative;
  flex: 0 0 30px;
  display: flex;
  justify-content: center;
}
.container-rework-list .rework-timeline::before {
  content: "";
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: 50%;
  width: 2px;
  background-color: #e2e2e2;
  transform: translateX(-50%);
}
.container-rework-list .rework-timeline::after {
  content: "";
  position: absolute;
  top: 55%;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: #e2e2e2;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.item-rework-popover {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 15px 10px;
  color: rgb(63, 63, 63);
  font-size: 12px;
  gap: 10px;
  border-bottom: 1px solid rgb(218, 218, 218);
}
.item-rework-popover svg {
  font-size: 15px;
}
.item-rework-popover:active {
  background-color: rgb(212, 212, 212);
}

.item-rework-popover:hover {
  cursor: pointer;
  background-color: #eee;
}

.disabled-row-rework-popover {
  opacity: 0.7;
  background-color: rgb(221, 221, 221);
  pointer-events: none;
}

#rework-container {
  margin: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#rework-container .view-list-cc {
  height: 40vh;
}
#rework-container .container-rework-cc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 0 30px 0;
}
#rework-container .container-rework-cc .empty-disciplines-rework {
  color: gray;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  opacity: 0.5;
}
#rework-container .container-rework-cc .empty-disciplines-rework svg {
  font-size: 20px;
}

#rework-popup-container .card-add-rework {
  margin: 10px 0;
  width: 100%;
  height: 50px;
  cursor: pointer;
  background-color: rgb(248, 248, 248);
  border: solid 1px rgb(212, 212, 212);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  -webkit-user-select: none;
          user-select: none;
}
#rework-popup-container .card-add-rework svg {
  font-size: 15px;
}
#rework-popup-container .card-add-rework .rework-add-label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
#rework-popup-container .card-add-rework:active {
  background-color: rgb(204, 204, 204);
}
#rework-popup-container .card-add-rework:disabled {
  background-color: rgb(248, 248, 248);
  -webkit-user-select: none;
          user-select: none;
  opacity: 0.4;
  cursor: default;
}
#rework-popup-container .card-add-rework:active :not(:disabled) {
  -webkit-user-select: none;
          user-select: none;
}
#rework-popup-container .card-render-rework {
  background-color: rgb(248, 248, 248);
  border-radius: 5px;
  padding: 10px;
  margin: 5px 0;
}
#rework-popup-container .card-render-rework:active {
  opacity: 0.9;
  background-color: rgb(243, 243, 243);
}
#rework-popup-container .card-render-rework .header-card-rework {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#rework-popup-container .card-render-rework .header-card-rework .close-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  border-radius: 3px;
}
#rework-popup-container .card-render-rework .header-card-rework .close-button:active,
#rework-popup-container .card-render-rework .header-card-rework .close-button :hover {
  background-color: rgb(172, 172, 172);
}
#rework-popup-container .card-render-rework .header-card-rework .title-card-rework {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
}
#rework-popup-container .card-render-rework .header-card-rework svg {
  font-size: 15px;
}
#rework-popup-container .card-rework-appointment {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
#rework-popup-container .body-rework-list {
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
  -webkit-user-select: none;
          user-select: none;
  width: 350px !important;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  border-radius: 5px;
  padding: 10px;
  white-space: pre-line;
  overflow: hidden;
  text-overflow: ellipsis !important;
}
#rework-popup-container .body-rework-list:hover {
  background-color: #fafafa;
  color: black;
}
#rework-popup-container .body-rework-list:active {
  background-color: #fafafa !important;
  color: black;
}
#rework-popup-container .body-rework-list .header-rework-list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
#rework-popup-container .body-rework-list .header-rework-list .icons-alignment {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  align-items: center !important;
}
#rework-popup-container .body-rework-list .header-rework-list .icons-alignment span {
  font-size: 13px;
}
#rework-popup-container .body-rework-list .header-rework-list svg {
  font-size: 12px;
}
#rework-popup-container .body-rework-list .render-list-cc {
  border-top: 1px solid rgb(226, 226, 226);
  padding: 10px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#rework-popup-container .body-rework-list .render-list-cc .cc-list-item {
  border: 1px solid rgb(238, 238, 238);
  background-color: rgb(243, 243, 243);
  padding: 5px;
  border-radius: 5px;
  width: 100%;
  font-size: 10px;
}
#rework-popup-container .body-rework-list .render-list-cc .cc-list-item .row-cc-item {
  justify-content: space-between;
  display: flex;
  align-items: center !important;
}
#rework-popup-container .body-rework-list .render-list-cc .cc-list-item .row-cc-item svg {
  font-size: 12px;
}
#rework-popup-container .body-rework-list .render-list-cc .cc-list-item .row-cc-item span {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}
#rework-popup-container .mb-2 {
  margin: 10px 0;
}
#rework-popup-container #list-rework {
  margin: 0 20px;
}
#rework-popup-container .new-rework-register {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  height: 0;
  transition: height 0.5s ease;
}
#rework-popup-container .new-rework-register .header-new-rework {
  padding: 10px 0 0 0;
}
#rework-popup-container .open {
  height: 100%;
}
#rework-popup-container .flex-end {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
#rework-popup-container .rework-col {
  margin: 0 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#rework-popup-container .rework-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
#rework-popup-container .header-rework {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#rework-popup-container .header-rework .list-header-rework {
  display: flex;
  flex-direction: column;
}
#rework-popup-container .header-rework .list-header-rework span {
  margin: 0 0 0 10px;
}
#rework-popup-container .header-rework .list-header-rework h6 {
  font-size: 14px;
  margin: 20px 20px 10px 20px;
}
#rework-popup-container .footer-rework {
  background-color: white;
  position: absolute;
  bottom: 20px !important;
  right: 25px;
  display: flex;
  width: 100%;
  justify-content: flex-end;
  gap: 10px;
  padding: 5px 0 0 0;
}
#rework-popup-container ::-webkit-scrollbar {
  height: 8px;
}
#rework-popup-container ::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #c0c0c0;
}
#rework-popup-container ::-webkit-scrollbar-track {
  background: #ededed;
}
@media (max-width: 650px) {
  #rework-popup-container .body-rework-list {
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
    -webkit-user-select: none;
            user-select: none;
    width: 70vw !important;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 13px;
    border-radius: 5px;
    padding: 10px;
    white-space: pre-line;
    overflow: hidden;
    text-overflow: ellipsis !important;
  }
  #rework-popup-container .body-rework-list .header-rework-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  #rework-popup-container .body-rework-list .header-rework-list .icons-alignment {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    align-items: center !important;
  }
  #rework-popup-container .body-rework-list .header-rework-list .icons-alignment span {
    font-size: 12px;
  }
  #rework-popup-container .body-rework-list .header-rework-list svg {
    font-size: 12px;
  }
  #rework-popup-container .body-rework-list .render-list-cc {
    border-top: 1px solid rgb(226, 226, 226);
    padding: 10px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  #rework-popup-container .body-rework-list .render-list-cc .cc-list-item {
    border: 1px solid rgb(238, 238, 238);
    background-color: rgb(243, 243, 243);
    padding: 5px;
    border-radius: 5px;
    width: 100%;
    font-size: 10px;
  }
  #rework-popup-container .body-rework-list .render-list-cc .cc-list-item .row-cc-item {
    justify-content: space-between;
    display: flex;
    align-items: center !important;
  }
  #rework-popup-container .body-rework-list .render-list-cc .cc-list-item .row-cc-item svg {
    font-size: 11px;
  }
  #rework-popup-container .body-rework-list .render-list-cc .cc-list-item .row-cc-item span {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 5px;
  }
}.list-helper-chain {
  margin: 15px;
}

.body-item-helper-chain {
  display: flex;
  flex-direction: column;
  white-space: pre-line;
  overflow: hidden;
}
.body-item-helper-chain .helper-phone-number {
  font-size: 15px;
  font-weight: 500;
}
.body-item-helper-chain .row-helper-chain {
  display: flex;
  flex-direction: row;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis !important;
  align-items: center;
  justify-content: space-between;
}
.body-item-helper-chain .row-helper-chain .buttons-helper-chain {
  display: flex;
  gap: 10px;
}
.dx-button.button-export-excel {
  background-color: #1D6F42 !important;
  border-color: #1D6F42 !important;
}
.dx-button.button-export-excel:hover {
  background-color: #155230 !important;
  border-color: #155230 !important;
}
.dx-button.button-export-excel .dx-icon,
.dx-button.button-export-excel svg {
  color: white !important;
}

.volume-view-mobile-button strong {
  font-size: 12px;
}
.volume-view-mobile-button svg {
  font-size: 15px;
}

#render-volume-image-drawer .footer-image-volume-preview {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  border: 1px solid rgb(207, 207, 207);
  margin: 10px 0 10px 0;
  padding: 10px;
  height: max-content;
}
#render-volume-image-drawer .footer-image-volume-preview label {
  font-weight: bold;
}

#gallery-volume-images img {
  cursor: pointer;
}

.header-appointments-text {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}
.header-appointments-text h4 {
  top: 30px;
  font-size: 15px;
  max-width: 35%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  left: 40%;
  max-width: 330px;
  transform: translateX(-50%);
  z-index: 2;
}

.container-installation-plan {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 10px 10px 0 10px;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
}
.container-installation-plan .grid-container-installation-plan {
  width: 100% !important;
  position: relative;
  transition: width 0.3s ease;
}
.container-installation-plan .grid-container-installation-plan.expanded {
  width: calc(100% - 70px) !important;
}
.container-installation-plan .grid-container-installation-plan .header-installation-plan-items {
  display: flex;
  padding-bottom: 10px;
  flex-direction: row;
  gap: 5px;
  position: absolute;
  top: 7px;
  right: 170px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: calc(100vw - 200px);
  scrollbar-width: thin;
  scrollbar-color: #cbd5e0 transparent;
}
.container-installation-plan .grid-container-installation-plan .header-installation-plan-items::-webkit-scrollbar {
  height: 6px;
}
.container-installation-plan .grid-container-installation-plan .header-installation-plan-items::-webkit-scrollbar-track {
  background: transparent;
}
.container-installation-plan .grid-container-installation-plan .header-installation-plan-items::-webkit-scrollbar-thumb {
  background-color: #cbd5e0;
  border-radius: 3px;
}
.container-installation-plan .grid-container-installation-plan .header-installation-plan-items .button-rework {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.container-installation-plan .datagrid-appointments .dx-datagrid-search-panel .dx-texteditor-input-container {
  height: 37px;
}
.container-installation-plan .datagrid-appointments .dx-datagrid-search-panel .dx-texteditor-input {
  height: 37px;
  min-height: 37px;
  padding-top: 0;
  padding-bottom: 0;
}
.container-installation-plan .row-appointment-status-render-main-page {
  display: flex;
  flex-direction: row;
  font-weight: 500;
  cursor: pointer;
  border-radius: 3px;
  color: rgb(65, 65, 65);
}
.container-installation-plan .row-appointment-status-render-main-page .header-group-status-render {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis !important;
}
.container-installation-plan td {
  vertical-align: middle !important;
  font-family: Roboto, sans-serif;
}
.container-installation-plan .row-render-dependency {
  margin: 5px 0 0 0;
  color: gray;
}
.container-installation-plan .status-btn-render {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  color: #eeeeee;
  border-radius: 5px;
  font-size: 12px;
  padding: 4px 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1), 0 0px 5px rgba(160, 160, 160, 0.15);
}
.container-installation-plan .color-1 {
  background-color: #01579b;
}
.container-installation-plan .color-2 {
  background-color: rgb(185, 185, 185);
}
.container-installation-plan .color-3 {
  background-color: rgb(231, 231, 231);
  color: rgb(146, 146, 146);
}
.container-installation-plan .color-4 {
  background-color: #3cb371;
}
.container-installation-plan .color-5 {
  background-color: #ff9800;
}
.container-installation-plan .color-6 {
  background-color: rgb(250, 73, 73);
}
.container-installation-plan td {
  padding: 3px 5px !important;
}
.container-installation-plan .img-scrollbar-installation {
  overflow-y: scroll;
  overflow-x: hidden;
  width: 300px;
}
.container-installation-plan ::-webkit-scrollbar {
  width: 5px;
}
.container-installation-plan ::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #c0c0c0;
}
.container-installation-plan ::-webkit-scrollbar-track {
  background: #ededed;
}
.container-installation-plan .card-image-installation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.container-installation-plan .card-image-installation p {
  border-bottom: solid 1px #e4e4e4;
  margin: 0 5px;
}
.container-installation-plan .card-image-installation {
  background-color: #fff;
  padding: 10px;
  border-left: solid 5px rgb(221, 221, 221);
}
.container-installation-plan .card-image-installation:hover {
  opacity: 0.9;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05), 0 0px 15px rgba(160, 160, 160, 0.18);
}
.container-installation-plan .appointment-btn-render {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 1px;
  background-color: #929292;
  border-radius: 3px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05), 0 0px 5px rgba(0, 0, 0, 0.18);
  height: 20px;
  cursor: pointer;
}
.container-installation-plan .appointment-btn-render svg {
  color: #fff;
}
.container-installation-plan .appointment-btn-render:hover {
  opacity: 0.8;
  color: #b9e868;
}
.container-installation-plan .disabled {
  opacity: 0.4;
}
.container-installation-plan .preview-image-engineering {
  margin: 0px 10px 0 10px;
  width: 350px !important;
  background-color: rgb(248, 248, 248);
  padding: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}
.container-installation-plan .preview-image-engineering.collapsed {
  width: 50px !important;
  padding: 10px 5px;
  margin: 0 5px;
}
.container-installation-plan .preview-image-engineering.collapsed .preview-content-wrapper span {
  display: none;
}
.container-installation-plan .preview-image-engineering.collapsed .preview-content-wrapper .card-image-installation,
.container-installation-plan .preview-image-engineering.collapsed .preview-content-wrapper .img-scrollbar-installation {
  display: none;
}
.container-installation-plan .preview-image-engineering.collapsed .header-preview-image {
  justify-content: center;
  margin: 0 0 10px 0;
}
.container-installation-plan .preview-image-engineering .preview-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
}
.container-installation-plan .preview-image-engineering .toggle-preview-button {
  flex-shrink: 0;
  background-color: transparent;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  box-shadow: none;
  cursor: pointer;
}
.container-installation-plan .preview-image-engineering .toggle-preview-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.container-installation-plan .preview-image-engineering .toggle-preview-button .dx-icon {
  font-size: 16px;
}
.container-installation-plan .preview-image-engineering .buttons-group {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.container-installation-plan .preview-image-engineering .button-rework {
  display: flex;
  margin: 10px 0 0 0;
}
.container-installation-plan .preview-image-engineering .header-preview-image {
  width: 300px;
  padding: 5px 10px;
  font-size: 0.75em;
  margin: 0 0 10px 0;
  background-color: rgb(218, 218, 218);
  color: rgb(112, 112, 112);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}
.container-installation-plan .preview-image-engineering .header-preview-image span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.container-installation-plan .preview-image-engineering .card-image-installation {
  width: 100%;
  max-width: 300px;
  height: auto;
  max-height: 200px;
  overflow: hidden;
}
.container-installation-plan .preview-image-engineering .card-image-installation img {
  width: 100%;
  max-width: 280px;
  height: auto;
  max-height: 180px !important;
  object-fit: contain;
  cursor: pointer;
}
@media (max-width: 850px) {
  .container-installation-plan .list-appointment-items {
    margin: 5px !important;
  }
  .container-installation-plan .header-appointments-mobile {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 5px;
    gap: 10px;
    flex-direction: column;
  }
  .container-installation-plan .header-appointments-mobile .header-appointments-row {
    border-top: 1px solid rgb(223, 223, 223);
    border-bottom: 1px solid rgb(223, 223, 223);
    padding: 10px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    overflow: hidden;
  }
  .container-installation-plan .header-appointments-mobile .header-appointments-row > button {
    flex-shrink: 0;
  }
  .container-installation-plan .header-appointments-mobile .header-appointments-row .buttons-header-appointments-group {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 transparent;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-width: 0;
  }
  .container-installation-plan .header-appointments-mobile .header-appointments-row .buttons-header-appointments-group::-webkit-scrollbar {
    height: 4px;
  }
  .container-installation-plan .header-appointments-mobile .header-appointments-row .buttons-header-appointments-group::-webkit-scrollbar-track {
    background: transparent;
  }
  .container-installation-plan .header-appointments-mobile .header-appointments-row .buttons-header-appointments-group::-webkit-scrollbar-thumb {
    background-color: #cbd5e0;
    border-radius: 2px;
  }
  .container-installation-plan .header-appointments-mobile .header-appointments-row .buttons-header-appointments-group > * {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .container-installation-plan .header-appointments-mobile .header-appointments-row .buttons-header-appointments-group .button-with-badge {
    display: inline-block;
    flex-shrink: 0;
    position: relative;
  }
  .container-installation-plan .header-appointments-mobile .header-appointments-row .buttons-header-appointments-group .button-with-badge .badge-button-item {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: rgb(173, 173, 173);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
  }
  .container-installation-plan .preview-image-engineering {
    margin: 3px;
    width: 170px;
    background-color: rgb(248, 248, 248);
    padding: 3px;
    border-radius: 10px;
  }
  .container-installation-plan .focused-item-appointment {
    background-color: rgb(223, 223, 223);
  }
  .container-installation-plan .containter-mobile-appointments {
    padding: 10px;
    position: relative;
  }
  .container-installation-plan .containter-mobile-appointments .date-mobile-appointments {
    position: absolute;
    top: 5px;
    right: 10px;
  }
  .container-installation-plan .containter-mobile-appointments .body-mobile-template-appointments {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .container-installation-plan .containter-mobile-appointments .body-mobile-template-appointments span {
    white-space: pre-line;
    overflow: hidden;
  }
  .container-installation-plan .containter-mobile-appointments .body-mobile-template-appointments .mobile-image-container {
    overflow: hidden;
    /* Garante que a imagem não ultrapasse os limites do contêiner */
    position: relative;
    min-width: 65px !important;
    max-width: 65px !important;
    height: 75px;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    display: flex;
  }
  .container-installation-plan .containter-mobile-appointments .body-mobile-template-appointments .mobile-image-container img {
    min-width: 60px;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease-in-out;
    transform: scale(1.8);
  }
  .container-installation-plan .containter-mobile-appointments .body-mobile-template-appointments .mobile-template-appointments {
    display: flex;
    flex-direction: column;
    padding: 10px;
    max-width: 100%;
    word-wrap: break-word !important;
  }
  .container-installation-plan .containter-mobile-appointments .body-mobile-template-appointments .mobile-template-appointments .text-header {
    font-size: 18px;
    justify-content: center;
    align-items: center;
  }
  .container-installation-plan .status-btn-render {
    display: flex;
    justify-content: center;
    width: 130px;
    height: 20px !important;
    border-radius: 5px;
  }
}

@media (max-width: 350px) {
  .header-appointments-mobile {
    max-width: 95vw !important;
  }
  .header-appointments-mobile span {
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;
  }
  .header-appointments-mobile #title-mobile {
    font-size: 12px;
  }
}.container-charts-installation {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}
.container-charts-installation .charts-rework-alignment {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.container-charts-installation .charts-rework-alignment .container-bar-chart-installation {
  padding: 10px;
  border: 2px solid rgb(235, 235, 235);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1), 0 0px 5px rgba(160, 160, 160, 0.15);
  border-radius: 5px;
}
.container-charts-installation .charts-rework-alignment .container-bar-chart-installation:hover {
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15), 0 0px 10px rgba(160, 160, 160, 0.15);
}
.container-charts-installation .charts-rework-alignment .container-bar-chart-installation .header-bar-chart-rework {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 40px;
  justify-content: flex-start;
  gap: 5px;
}
.container-charts-installation .charts-rework-alignment .container-bar-chart-installation .header-bar-chart-rework .header-title-rework {
  font-size: 16px;
  display: flex;
  width: 100%;
  padding-bottom: 3px;
  border-bottom: 1px solid rgb(230, 230, 230);
}.row-helpers-grid-font {
  font-size: 11px;
}

.container-installation-plan-list {
  padding: 10px;
}

.body-installation-p {
  position: relative;
  margin: 10px;
  border-radius: 5px;
  background-color: white;
  padding: 10px;
}
.body-installation-p .rework-render-hour {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  padding: 0 !important;
}
.body-installation-p .grid-ip-options-render {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.body-installation-p .container-list-plans-mobile {
  padding: 10px;
}
.body-installation-p .render-installation-progress {
  height: 20px;
}
.body-installation-p .footer-installation-plan {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 5px !important;
  border: 1px solid rgb(224, 224, 224);
}
.body-installation-p .footer-installation-plan b {
  font-size: 14px !important;
}
.body-installation-p .footer-installation-plan small {
  font-size: 9px;
}
.body-installation-p .footer-installation-plan .column-footer-installation {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.body-installation-p .footer-installation-plan .group-footer-installation {
  display: flex;
  flex-direction: row;
  gap: 7px;
}
.body-installation-p .footer-installation-plan .row-footer-installation {
  display: flex;
  flex-direction: column;
  font-weight: 500;
  justify-content: flex-end;
}
.body-installation-p .footer-installation-plan .row-footer-installation small {
  font-size: 9px;
}
.body-installation-p .footer-installation-plan .row-footer-installation b {
  font-size: 11px;
  width: 10px;
}
.body-installation-p .footer-installation-plan .row-footer-installation .bullet-total-installation-chart {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 140px;
}
.body-installation-p .focused-installation-plan {
  background-color: rgb(233, 233, 233);
}
.body-installation-p .mob-installation-plan {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
}
.body-installation-p .mob-installation-plan svg {
  margin: 0 3px;
}
.body-installation-p .mob-installation-plan span {
  font-size: 12px;
}
.body-installation-p .mob-installation-plan .mob-installation-plan-header b {
  font-size: 15px;
}
.body-installation-p .mob-installation-plan .mob-installation-plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center !important;
}
.body-installation-p .mob-installation-plan .mob-installation-plan-header .mob-bullet-chart {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  font-size: 13px;
}
.body-installation-p .datagrid-appointments td {
  font-size: 13px;
  cursor: pointer;
  -webkit-user-select: none !important;
          user-select: none !important;
}
.body-installation-p .datagrid-appointments small {
  font-size: 12px;
  padding: 0 5px;
}
.body-installation-p .datagrid-appointments td {
  padding: 3px 5px !important;
  font-family: Roboto, sans-serif;
}
.body-installation-p .title-installation-plan {
  z-index: 1;
  position: absolute;
  text-align: center;
  font-size: 1.2em;
  font-weight: 500;
  margin: 10px 0 0 0;
  left: 50%;
  transform: translateX(-50%);
}
.body-installation-p .btn-filter-installation-plan {
  cursor: pointer;
  position: absolute;
  z-index: 1;
  right: 180px;
  top: 11px;
  width: 35px;
  height: 35px;
  border: none;
  border-radius: 4px;
  border: 1px solid rgb(211, 211, 211);
  background-color: white;
}
.body-installation-p .btn-filter-installation-plan svg {
  color: gray;
}
.body-installation-p .btn-filter-installation-plan:hover {
  background-color: rgb(224, 224, 224);
}.header-tileview-volumes {
  background-color: white;
  padding: 5px 10px 5px 5px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-tileview-volumes .row-header-volumes {
  display: flex;
  gap: 5px;
  justify-content: flex-start;
}

.container-tileview-volumes {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-gap: 1.5rem;
  background-color: white;
}
.container-tileview-volumes .image-volume-tileview {
  justify-content: center;
  min-height: 90px;
  min-width: 90px;
  border: 1px solid #e4e4e4;
  max-width: 100%;
  max-height: 350px;
  display: flex;
  cursor: pointer;
}
.container-tileview-volumes .image-volume-tileview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
}
.container-tileview-volumes .image-volume-tileview:hover {
  border: 1px solid #c0ff00;
  transform: scale(1.01);
}

.container-installation-volume .header-installation-volume {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding: 0 10px;
  gap: 10px;
  text-overflow: clip;
}
.container-installation-volume .header-installation-volume span {
  font-size: 13px;
}
.container-installation-volume .header-installation-volume .header-installation-volume-items {
  padding: 10px;
  max-width: 65%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis !important;
  display: flex;
  flex-direction: column;
}
.container-installation-volume .glass-effect {
  margin: 3px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(9.6px);
  -webkit-backdrop-filter: blur(9.6px);
}
.container-installation-volume .glass-effect-min-size {
  height: 55px;
  transition: all 0.3s ease;
  overflow: hidden;
}
.container-installation-volume .glass-effect-max-size {
  transition: all 0.3s ease;
  height: 180px;
  overflow: hidden;
}
.container-installation-volume .header-items-list {
  display: flex;
  flex-direction: column;
}
.container-installation-volume .header-items-list .list {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin: 3px 15px;
  align-items: center;
  color: #2e2e2e;
}
.container-installation-volume .header-items-list .list svg {
  font-size: 20px;
  color: #888888;
}
.container-installation-volume .header-items-list .list-search {
  display: flex;
  flex-direction: row;
  justify-content: center !important;
  gap: 5px;
  align-items: center;
}
.container-installation-volume .header-items-list .list-search svg {
  font-size: 20px;
}
.container-installation-volume .header-items-list .row-items-list {
  flex-direction: row;
}
.container-installation-volume .header-items-list .row-items-list .primary {
  background-color: #d3d3d3;
}
.container-installation-volume .header-items-list .row-items-list .primary:active {
  background-color: #c0C0C0;
}
.container-installation-volume .header-items-list .row-items-list .secondary {
  background-color: #c0C0C0;
}
.container-installation-volume .header-items-list .row-items-list .button {
  -webkit-tap-highlight-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20%;
  cursor: pointer;
  border: 0;
  width: 35px;
  height: 35px;
  margin-left: 5px;
}
.container-installation-volume .header-items-list .row-items-list .text-alt {
  font-size: 12px;
}
.container-installation-volume .header-items-list .main-text {
  display: flex;
  justify-content: center !important;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}
.container-installation-volume .cards-list {
  padding: 15px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-gap: 1rem;
  background-color: white;
  margin: 10px;
  border-radius: 5px;
}
.container-installation-volume .cards-list .card-item {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.05), 0 0px 15px rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  padding: 5px;
}
.container-installation-volume .cards-list .card-item:hover {
  cursor: pointer;
  box-shadow: 0 0 320px rgba(0, 0, 0, 0.05), 0 0px 30px rgba(0, 0, 0, 0.18);
  background-color: rgb(233, 233, 233);
}
.container-installation-volume .cards-list .card-item .header-card {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: white;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  overflow: hidden;
}
.container-installation-volume .cards-list .card-item .header-card img {
  max-width: 100%;
  max-height: 125px;
  padding-bottom: 5px;
  transform: scale(1.2);
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
.container-installation-volume .cards-list .card-item .body-card {
  max-height: 100px;
  padding: 5px;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis !important;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

@media (max-width: 650px) {
  .container-installation-volume .header-installation-volume {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 10px;
    text-overflow: clip;
    background-color: rgb(231, 231, 231);
    border-radius: 5px;
  }
  .container-installation-volume .header-installation-volume .header-installation-volume-items {
    padding: 10px;
    max-width: 65%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis !important;
    display: flex;
    flex-direction: column;
  }
  .container-tileview-volumes {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-gap: 1rem;
    padding: 10px;
  }
  .image-volume-tileview {
    min-height: 80px;
    min-width: 80px;
  }
}.popup-installation-rework .row {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 5px;
}

.popup-installation-rework-mobile {
  padding: 10px;
}
.popup-installation-rework-mobile .row {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 5px;
}

.container-installation-rework {
  padding: 10px;
}

.container-mobile-rework .label-total-rework {
  padding: 5px 5px 0 5px;
  border-radius: 3px;
  align-items: center;
  justify-content: space-between;
  display: flex;
  margin: 5px 0;
  font-size: 17px;
  opacity: 0.7;
}
.container-mobile-rework .label-total-rework svg {
  opacity: 0.7;
  font-size: 25px;
}
.container-mobile-rework #accordion-rework {
  margin: 10px 0;
}
.container-mobile-rework .render-card-rework {
  font-size: 15px !important;
  padding: 0 30px 0 0;
}
.container-mobile-rework .render-card-rework p {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  opacity: 0.6;
  padding: 3px 0 0 0;
}
.container-mobile-rework .render-card-rework p svg {
  opacity: 0.6;
  font-size: 20px;
}
.container-mobile-rework .grid-installation-rework-mobile .title-child-item-rework {
  font-size: 14px;
}
.container-mobile-rework .grid-installation-rework-mobile td {
  padding: 8px 2px !important;
  font-size: 11px !important;
}

.installation-rework-container td {
  padding: 3px 5px !important;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}.container-charts-rework {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}
.container-charts-rework .dropdown-rework-chart {
  padding: 10px;
}
.container-charts-rework .charts-rework-alignment {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.container-charts-rework .charts-rework-alignment .container-pie-chart-rework,
.container-charts-rework .charts-rework-alignment .container-bar-chart-rework {
  padding: 10px;
  border: 2px solid rgb(235, 235, 235);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1), 0 0px 5px rgba(160, 160, 160, 0.15);
  border-radius: 5px;
}
.container-charts-rework .charts-rework-alignment .container-pie-chart-rework:hover,
.container-charts-rework .charts-rework-alignment .container-bar-chart-rework:hover {
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15), 0 0px 10px rgba(160, 160, 160, 0.15);
}
.container-charts-rework .charts-rework-alignment .container-pie-chart-rework .header-bar-chart-rework,
.container-charts-rework .charts-rework-alignment .container-bar-chart-rework .header-bar-chart-rework {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 40px;
  justify-content: flex-start;
  gap: 5px;
}
.container-charts-rework .charts-rework-alignment .container-pie-chart-rework .header-bar-chart-rework .header-title-rework,
.container-charts-rework .charts-rework-alignment .container-bar-chart-rework .header-bar-chart-rework .header-title-rework {
  font-size: 16px;
  display: flex;
  width: 100%;
  padding-bottom: 3px;
  border-bottom: 1px solid rgb(230, 230, 230);
}.installation-rework-container {
  margin: 10px;
}
.installation-rework-container .rework-body {
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.installation-rework-container .title-mobile-rework {
  font-size: 14px;
  font-weight: bold;
}.rdo-carousel-scroll::-webkit-scrollbar {
  height: 3px;
}
.rdo-carousel-scroll::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 2px;
}
.rdo-carousel-scroll::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 2px;
}
.rdo-carousel-scroll::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}.container-books {
  padding: 10px;
}
.container-books #grid-books-files .options-download-books-files {
  display: flex;
  justify-content: center;
}
.container-books #grid-books-files .options-download-books-files .download-book-file-icon:hover {
  cursor: pointer;
}

.div-icon-att-books {
  position: absolute;
  top: 95px;
  z-index: 2;
  left: 20px;
}
.div-icon-att-books .icon-att-books {
  vertical-align: middle !important;
  padding: 0;
  width: 50px;
  background-color: #eee !important;
}
.div-icon-att-books .icon-att-books svg {
  margin: 0;
}
.tabelaPrint table {
  margin-top: 0px;
  border-collapse: collapse;
}

.tabelaPrint table img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  border-collapse: collapse;
}

.linha_10px {
  display: inline;
  padding: 10px;
}

.btn-validar-checklist {
  margin-left: 0px !important;
  padding: 1px !important;
}

.tabelaPrint th, td {
  padding: 2px;
}

.tabelaPrint th {
  text-align: center !important; /* Centraliza o texto do cabeçalho */
  font-size: 10px;
}

.tabelaPrint td {
  height: 10px !important;
  text-align: center !important; /* Alinha o texto das células à direita */
}

.tabelaPrintTDcentralizado {
  height: 6px !important;
  text-align: center !important; /* Alinha o texto das células à direita */
}

.tabelaPrint {
  border-style: none;
  border-color: #000301 !important;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
}

.cabecalhoDeImagens {
  text-align: center !important;
}

div#cabecalhoPrincipalTabela {
  border-style: dashed;
  font-weight: 900;
  text-align: left;
}

img#itemImageSelected {
  margin-left: 10px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(209, 209, 209);
  width: 100%;
  height: 100%;
}

.buttonOfNewCheckList {
  margin-top: 7px;
  margin-right: 5px;
}

.buttonOfSomeTables {
  margin-top: 2px !important;
  margin-right: 2px !important;
}

.headOfTable {
  border-color: rgb(187, 187, 187) !important;
  border-style: solid;
  border-width: 1px;
  border-bottom-width: 0px;
  margin: 5px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  height: 30px;
}

.marginItemBox {
  margin: 5px;
  font-size: 10px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

.centerall {
  font-size: 12px;
  margin-left: 0px;
  margin-top: 12px;
  text-align: left;
  display: table-cell;
  vertical-align: middle;
}

.row-helpers-grid-font {
  font-size: 11px;
}

.small_serialized_products_simulations {
  color: rgb(67, 181, 216);
  font-size: 1.2em;
  font-weight: bold;
  margin: 10px 0 0 0;
}

.small_serialized_products_simulations_sended {
  color: rgb(27, 183, 45);
  font-size: 1.2em;
  font-weight: bold;
  margin: 10px 0 0 0;
}

#main-installation-plan > div > div > div > div.dx-datagrid-header-panel > div > div > div.dx-toolbar-after > div > div > div > div > div.dx-texteditor-input-container > input {
  padding-left: 28px;
}

#body-serializedProduct-simulation > div > div.dx-box-flex.dx-box.dx-widget.dx-collection {
  padding-top: 8px;
  padding: 8px;
  background-color: white;
}

.body-serializedProduct-simulation {
  position: relative;
  margin: 10px;
  border-radius: 10px;
  background-color: white;
  padding: 10px;
}
.body-serializedProduct-simulation .footer-installation-plan {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  border: 1px solid rgb(224, 224, 224);
}
.body-serializedProduct-simulation .footer-installation-plan b {
  font-size: 14px !important;
}
.body-serializedProduct-simulation .footer-installation-plan small {
  font-size: 9px;
}
.body-serializedProduct-simulation .footer-installation-plan .column-footer-installation {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.body-serializedProduct-simulation .footer-installation-plan .group-footer-installation {
  display: flex;
  flex-direction: row;
  gap: 30px;
}
.body-serializedProduct-simulation .footer-installation-plan .group-footer-installation .dx-progressbar-container {
  height: 15px;
}
.body-serializedProduct-simulation .footer-installation-plan .row-footer-installation {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 500;
  justify-content: flex-end;
}
.body-serializedProduct-simulation .footer-installation-plan .row-footer-installation small {
  font-size: 9px;
}
.body-serializedProduct-simulation .footer-installation-plan .row-footer-installation b {
  font-size: 11px;
  width: 10px;
}
.body-serializedProduct-simulation .footer-installation-plan .row-footer-installation .bullet-total-installation-chart {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 160px;
}
.body-serializedProduct-simulation .footer-installation-plan .row-footer-installation .bullet-total-installation-chart .bg-progress-bar .dx-progressbar-range {
  background-color: #3cb371 !important;
  border: 1px solid #3cb371;
}
.body-serializedProduct-simulation .dx-texteditor-container {
  height: 34px;
}
.body-serializedProduct-simulation .dx-texteditor-input {
  padding-left: 4px !important;
  text-align: left !important;
  margin-bottom: 0px !important;
  height: 25px !important;
}
.body-serializedProduct-simulation .btn-filter-installation-plan {
  cursor: pointer;
  position: absolute;
  z-index: 1;
  right: 180px;
  top: 11px;
  width: 35px;
  height: 35px;
  border: none;
  border-radius: 4px;
  border: 1px solid rgb(211, 211, 211);
  background-color: white;
}
.body-serializedProduct-simulation .btn-filter-installation-plan svg {
  color: gray;
}
.body-serializedProduct-simulation .btn-filter-installation-plan:hover {
  background-color: rgb(224, 224, 224);
}
.tabelaPrint table {
  margin-top: 0px;
  border-collapse: collapse;
}

.tabelaPrint table img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  border-collapse: collapse;
}

.tabelaPrint th, td {
  padding: 2px;
}

.tabelaPrint th {
  text-align: center !important; /* Centraliza o texto do cabeçalho */
  font-size: 10px;
}

.tabelaPrint td {
  height: 10px !important;
  text-align: center !important; /* Alinha o texto das células à direita */
}

.tabelaPrintTDcentralizado {
  height: 6px !important;
  text-align: center !important; /* Alinha o texto das células à direita */
}

.tabelaPrint {
  border-style: none;
  border-color: #000301 !important;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
}

.cabecalhoDeImagens {
  text-align: center !important;
}

div#cabecalhoPrincipalTabela {
  border-style: dashed;
  font-weight: 900;
  text-align: left;
}

img#itemImageSelected {
  margin-left: 10px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(209, 209, 209);
  width: 100%;
  height: 100%;
}

.buttonOfNewCheckList {
  margin-top: 7px;
  margin-right: 5px;
}

.headOfTable {
  border-color: rgb(187, 187, 187) !important;
  border-style: solid;
  border-width: 1px;
  border-bottom-width: 0px;
  margin: 5px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  height: 30px;
}

.marginItemBox {
  margin: 5px;
  font-size: 10px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

.centerall {
  font-size: 12px;
  margin-left: 0px;
  margin-top: 12px;
  text-align: left;
  display: table-cell;
  vertical-align: middle;
}

.row-helpers-grid-font {
  font-size: 11px;
}

.small_serialized_products_simulations {
  color: rgb(67, 181, 216);
  font-size: 1.2em;
  font-weight: bold;
  margin: 10px 0 0 0;
}

.small_serialized_products_simulations_sended {
  color: rgb(27, 183, 45);
  font-size: 1.2em;
  font-weight: bold;
  margin: 10px 0 0 0;
}

.body-vpn-client {
  position: relative;
  margin: 10px;
  border-radius: 10px;
  background-color: white;
  padding: 10px;
}
.body-vpn-client .footer-installation-plan {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  border: 1px solid rgb(224, 224, 224);
}
.body-vpn-client .footer-installation-plan b {
  font-size: 14px !important;
}
.body-vpn-client .footer-installation-plan small {
  font-size: 9px;
}
.body-vpn-client .footer-installation-plan .column-footer-installation {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.body-vpn-client .footer-installation-plan .group-footer-installation {
  display: flex;
  flex-direction: row;
  gap: 30px;
}
.body-vpn-client .footer-installation-plan .group-footer-installation .dx-progressbar-container {
  height: 15px;
}
.body-vpn-client .footer-installation-plan .row-footer-installation {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 500;
  justify-content: flex-end;
}
.body-vpn-client .footer-installation-plan .row-footer-installation small {
  font-size: 9px;
}
.body-vpn-client .footer-installation-plan .row-footer-installation b {
  font-size: 11px;
  width: 10px;
}
.body-vpn-client .footer-installation-plan .row-footer-installation .bullet-total-installation-chart {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 160px;
}
.body-vpn-client .footer-installation-plan .row-footer-installation .bullet-total-installation-chart .bg-progress-bar .dx-progressbar-range {
  background-color: #3cb371 !important;
  border: 1px solid #3cb371;
}
.body-vpn-client .dx-texteditor-container {
  height: 34px;
}
.body-vpn-client .dx-texteditor-input {
  padding-left: 30px !important;
  text-align: left !important;
  margin-bottom: 0px !important;
  height: 25px !important;
}
.body-vpn-client .btn-filter-installation-plan {
  cursor: pointer;
  position: absolute;
  z-index: 1;
  right: 180px;
  top: 11px;
  width: 35px;
  height: 35px;
  border: none;
  border-radius: 4px;
  border: 1px solid rgb(211, 211, 211);
  background-color: white;
}
.body-vpn-client .btn-filter-installation-plan svg {
  color: gray;
}
.body-vpn-client .btn-filter-installation-plan:hover {
  background-color: rgb(224, 224, 224);
}
.tabelaPrint table {
  margin-top: 0px;
  border-collapse: collapse;
}

.tabelaPrint table img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  border-collapse: collapse;
}

.tabelaPrint th, td {
  padding: 2px;
}

.tabelaPrint th {
  text-align: center !important; /* Centraliza o texto do cabeçalho */
  font-size: 10px;
}

.tabelaPrint td {
  height: 10px !important;
  text-align: center !important; /* Alinha o texto das células à direita */
}

.tabelaPrintTDcentralizado {
  height: 6px !important;
  text-align: center !important; /* Alinha o texto das células à direita */
}

.tabelaPrint {
  border-style: none;
  border-color: #000301 !important;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
}

.cabecalhoDeImagens {
  text-align: center !important;
}

div#cabecalhoPrincipalTabela {
  border-style: dashed;
  font-weight: 900;
  text-align: left;
}

img#itemImageSelected {
  margin-left: 10px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(209, 209, 209);
  width: 100%;
  height: 100%;
}

.buttonOfNewCheckList {
  margin-top: 7px;
  margin-right: 5px;
}

.headOfTable {
  border-color: rgb(187, 187, 187) !important;
  border-style: solid;
  border-width: 1px;
  border-bottom-width: 0px;
  margin: 5px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  height: 30px;
}

.marginItemBox {
  margin: 5px;
  font-size: 10px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

.centerall {
  font-size: 12px;
  margin-left: 0px;
  margin-top: 12px;
  text-align: left;
  display: table-cell;
  vertical-align: middle;
}

.row-helpers-grid-font {
  font-size: 11px;
}

.small_serialized_products_simulations {
  color: rgb(67, 181, 216);
  font-size: 1.2em;
  font-weight: bold;
  margin: 10px 0 0 0;
}

.small_serialized_products_simulations_sended {
  color: rgb(27, 183, 45);
  font-size: 1.2em;
  font-weight: bold;
  margin: 10px 0 0 0;
}

.body-vpn-client {
  position: relative;
  margin: 10px;
  border-radius: 10px;
  background-color: white;
  padding: 10px;
}
.body-vpn-client .footer-installation-plan {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  border: 1px solid rgb(224, 224, 224);
}
.body-vpn-client .footer-installation-plan b {
  font-size: 14px !important;
}
.body-vpn-client .footer-installation-plan small {
  font-size: 9px;
}
.body-vpn-client .footer-installation-plan .column-footer-installation {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.body-vpn-client .footer-installation-plan .group-footer-installation {
  display: flex;
  flex-direction: row;
  gap: 30px;
}
.body-vpn-client .footer-installation-plan .row-footer-installation {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 500;
  justify-content: flex-end;
}
.body-vpn-client .footer-installation-plan .row-footer-installation small {
  font-size: 9px;
}
.body-vpn-client .footer-installation-plan .row-footer-installation b {
  font-size: 11px;
  width: 10px;
}
.body-vpn-client .footer-installation-plan .row-footer-installation .bullet-total-installation-chart {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 160px;
}
.body-vpn-client .btn-filter-installation-plan {
  cursor: pointer;
  position: absolute;
  z-index: 1;
  right: 180px;
  top: 11px;
  width: 35px;
  height: 35px;
  border: none;
  border-radius: 4px;
  border: 1px solid rgb(211, 211, 211);
  background-color: white;
}
.body-vpn-client .btn-filter-installation-plan svg {
  color: gray;
}
.body-vpn-client .btn-filter-installation-plan:hover {
  background-color: rgb(224, 224, 224);
}/* Custom scrollbar for sidebar */
.scrollbar-custom::-webkit-scrollbar {
  width: 8px;
}

.scrollbar-custom::-webkit-scrollbar-track {
  background: #eee;
}

.scrollbar-custom::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border-radius: 4px;
}

.scrollbar-custom::-webkit-scrollbar-thumb:hover {
  background: #c0ff00;
}

/* Firefox */
.scrollbar-custom {
  scrollbar-width: thin;
  scrollbar-color: #c0c0c0 #eee;
}

/* Dark mode scrollbar */
.scrollbar-custom-dark::-webkit-scrollbar {
  width: 8px;
}

.scrollbar-custom-dark::-webkit-scrollbar-track {
  background: #000;
}

.scrollbar-custom-dark::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border-radius: 4px;
}

.scrollbar-custom-dark::-webkit-scrollbar-thumb:hover {
  background: #c0ff00;
}

/* Firefox */
.scrollbar-custom-dark {
  scrollbar-width: thin;
  scrollbar-color: #c0c0c0 #000;
}
/*
 * Poc.css — Dark-mode colour overrides for Poc.jsx
 *
 * The component was built with hardcoded Tailwind slate/white utilities that
 * don't respond to Tailwind's `dark:` variant on their own.
 * These rules use a 3-class selector (.dark .poc-root .<utility>) which has
 * higher specificity (0-3-0) than a single Tailwind utility (0-1-0), so no
 * !important is required.
 *
 * Token reference (index.css .dark):
 *   --background : #0a0a0a  (page canvas)
 *   --muted      : #161616  (sidebar / slight elevation)
 *   --card       : #1e1e1e  (cards / panels)
 *   --popover    : #262626  (dropdowns / popovers)
 *   --border     : #303030
 *   --foreground : #eeeeee
 *   --muted-foreground: #777777
 *   --primary    : #6366f1  (indigo-500 — main accent)
 */

/* ══════════════════════════════════════════════════════════════
   ROOT
   ══════════════════════════════════════════════════════════════ */
.dark .poc-root {
    background-color: var(--background);
    border-color: var(--border);
    color: var(--foreground);
}

/* ══════════════════════════════════════════════════════════════
   BACKGROUNDS
   ══════════════════════════════════════════════════════════════ */
.dark .poc-root .bg-white,
.dark .poc-root [class*="md\:bg-white"] {
    background-color: var(--card);
}

.dark .poc-root .bg-slate-50 {
    background-color: var(--muted);
}

.dark .poc-root .bg-slate-100 {
    background-color: var(--card);
}

.dark .poc-root .bg-slate-200 {
    background-color: #2a2a2a;
}

/* opacity variants */
.dark .poc-root [class*="bg-white\/"] {
    background-color: rgba(30, 30, 30, 0.8);
}

.dark .poc-root [class*="bg-slate-50\/"] {
    background-color: rgba(22, 22, 22, 0.6);
}

.dark .poc-root [class*="bg-slate-100\/"] {
    background-color: rgba(30, 30, 30, 0.7);
}

/* ── Chart / KPI wrappers ── */
.dark .poc-root [class*="bg-white"][class*="rounded"] {
    background-color: var(--card);
}

/* ══════════════════════════════════════════════════════════════
   BORDERS
   ══════════════════════════════════════════════════════════════ */
.dark .poc-root .border-slate-200,
.dark .poc-root .border-slate-300,
.dark .poc-root [class*="border-t-2"][class*="border-slate-"] {
    border-color: var(--border);
}

.dark .poc-root .divide-slate-100>*+* {
    border-color: var(--border);
}

/* table inner row separators */
.dark .poc-root [class*="border-b"][class*="border-slate-200"],
.dark .poc-root [class*="border-b"][class*="border-slate-100"] {
    border-bottom-color: var(--border);
}

/* ══════════════════════════════════════════════════════════════
   TEXT
   ══════════════════════════════════════════════════════════════ */
.dark .poc-root .text-slate-900,
.dark .poc-root .text-slate-800 {
    color: var(--foreground);
}

.dark .poc-root .text-slate-700,
.dark .poc-root .text-slate-600 {
    color: #aaaaaa;
}

.dark .poc-root .text-slate-500,
.dark .poc-root .text-slate-400 {
    color: var(--muted-foreground);
}

.dark .poc-root .text-slate-300 {
    color: #555555;
}

/* ── Primary accent text (indigo) ── */
.dark .poc-root .text-indigo-600,
.dark .poc-root .text-indigo-700 {
    color: #818cf8;
}

.dark .poc-root .text-indigo-800 {
    color: #a5b4fc;
}

/* ── Semantic colours: keep emerald/rose legible but soften on dark ── */
.dark .poc-root .text-emerald-800 {
    color: #6ee7b7;
}

/* ══════════════════════════════════════════════════════════════
   BADGES  (bg-emerald-100 / bg-red-100 / bg-rose-100 pill badges)
   ══════════════════════════════════════════════════════════════ */
.dark .poc-root .bg-emerald-100 {
    background-color: rgba(16, 185, 129, 0.15);
}

.dark .poc-root .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.15);
}

.dark .poc-root .bg-rose-100 {
    background-color: rgba(244, 63, 94, 0.15);
}

/* KPI badge inline background set via JS style prop → override via .KpiBadge span */
/* (handled by the rgba inline style — no override needed here) */

/* ══════════════════════════════════════════════════════════════
   VALUE-CELL TINTED BACKGROUNDS
   (bg-green-50/50 = realizado > planejado, bg-red-50/50 = under)
   ══════════════════════════════════════════════════════════════ */
.dark .poc-root [class*="bg-green-50"] {
    background-color: rgba(16, 185, 129, 0.06);
}

.dark .poc-root [class*="bg-red-50"] {
    background-color: rgba(239, 68, 68, 0.06);
}

/* ══════════════════════════════════════════════════════════════
   TREELIST — ROWS & STICKY COLUMNS
   ══════════════════════════════════════════════════════════════ */

/* ── CostCenterRow / SegmentRow: sticky left column ── */
.dark .poc-root .sticky.left-0.bg-white,
.dark .poc-root .sticky.left-0.bg-slate-50 {
    background-color: var(--card);
}

/* ── BusinessUnitRow sticky left: bg-slate-50 ── */
/* (covered by .bg-slate-50 above) */

/* ── Sticky right (total) column ── */
.dark .poc-root .sticky.right-0.bg-white,
.dark .poc-root .sticky.right-0.bg-slate-50 {
    background-color: var(--card);
}

/* ── Row hover: group-hover target on sticky columns ── */
.dark .poc-root .group:hover .group-hover\:bg-slate-50,
.dark .poc-root .group:hover .group-hover\:bg-slate-100\/50 {
    background-color: #252525;
}

/* ── Row-level hover ── */
.dark .poc-root .hover\:bg-slate-50:hover,
.dark .poc-root .hover\:bg-slate-100:hover,
.dark .poc-root .hover\:bg-slate-100\/50:hover {
    background-color: #252525;
}

.dark .poc-root .hover\:bg-slate-200:hover {
    background-color: #2e2e2e;
}

/* ── Expanded / selected row tint ── */
.dark .poc-root [class*="bg-slate-100\/30"],
.dark .poc-root [class*="bg-slate-50\/30"] {
    background-color: rgba(37, 37, 37, 0.6);
}

/* ── PlanRealTagsCell: text badges inside it ── */
/* emerald/blue/zinc tags already have semantic colour; lighten slightly for dark */
.dark .poc-root .text-blue-700 {
    color: #93c5fd;
}

.dark .poc-root .text-zinc-700 {
    color: #a1a1aa;
}

/* ══════════════════════════════════════════════════════════════
   HOVER & FOCUS STATES
   ══════════════════════════════════════════════════════════════ */
.dark .poc-root .hover\:border-slate-300:hover {
    border-color: #505050;
}

.dark .poc-root .hover\:text-slate-800:hover {
    color: var(--foreground);
}

.dark .poc-root .hover\:text-slate-700:hover {
    color: #cccccc;
}

.dark .poc-root .focus\:ring-zinc-500\/20:focus {
    --tw-ring-color: rgba(100, 100, 100, 0.2);
}

/* ══════════════════════════════════════════════════════════════
   INPUTS
   ══════════════════════════════════════════════════════════════ */
.dark .poc-root input[type="text"],
.dark .poc-root input[type="search"],
.dark .poc-root input {
    background-color: var(--input);
    border-color: var(--border);
    color: var(--foreground);
}

.dark .poc-root input::placeholder {
    color: var(--muted-foreground);
}

/* ══════════════════════════════════════════════════════════════
   DIVIDERS / SEPARATORS
   ══════════════════════════════════════════════════════════════ */
.dark .poc-root .bg-slate-200.w-px {
    background-color: var(--border);
}

/* ══════════════════════════════════════════════════════════════
   RECHARTS — DESKTOP & MOBILE CHARTS
   ══════════════════════════════════════════════════════════════ */

/* Grid lines (CartesianGrid stroke prop → SVG attribute, overridable without !important) */
.dark .poc-root .recharts-cartesian-grid-horizontal line,
.dark .poc-root .recharts-cartesian-grid-vertical line {
    stroke: #2a2a2a;
}

/* Axis tick text (inline fill attribute → needs !important) */
.dark .poc-root .recharts-cartesian-axis-tick-value {
    fill: var(--muted-foreground) !important;
}

/* Legend text */
.dark .poc-root .recharts-legend-item-text {
    color: #aaaaaa !important;
}

/* Bar fills — primary accent for Planejado bar */
/* (colours are passed as props; override via SVG class selectors) */
.dark .poc-root .recharts-bar-rectangle path[name="Planejado"] {
    /* keep indigo-400 on dark instead of light indigo-300 */
    fill: #818cf8;
}

.dark .poc-root .recharts-bar-rectangle path[name="Realizado"] {
    fill: #34d399;
}

/* Area chart strokes & fills already use hex — remain vivid in dark; no override needed */

/* Chart tooltip (rendered via ChartTooltip component with bg-white) */
.dark .poc-root .recharts-tooltip-wrapper>div {
    background-color: var(--popover) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}

.dark .poc-root .recharts-tooltip-wrapper .text-slate-700 {
    color: var(--foreground);
}

/* KPI progress-bar track */
.dark .poc-root .recharts-reference-line-label {
    color: var(--muted-foreground);
}

/* ══════════════════════════════════════════════════════════════
   KPI PROGRESS BAR TRACK  (bg-slate-200 inside KpiProgressBar)
   ══════════════════════════════════════════════════════════════ */
.dark .poc-root .bg-slate-200 {
    background-color: #2a2a2a;
}

/* ══════════════════════════════════════════════════════════════
   MONTHLY BREAKDOWN TABLE (DesktopChartTab)
   ══════════════════════════════════════════════════════════════ */

/* Table header row */
.dark .poc-root thead tr.border-b,
.dark .poc-root thead .bg-slate-50 {
    background-color: var(--muted);
    border-color: var(--border);
}

/* Table body rows */
.dark .poc-root tbody tr.border-b {
    border-color: var(--border);
}

.dark .poc-root tbody tr.hover\:bg-slate-50:hover {
    background-color: #252525;
}

/* Table footer */
.dark .poc-root tfoot tr {
    background-color: #252525;
    border-top-color: var(--border);
}

.dark .poc-root tfoot .text-indigo-800 {
    color: #a5b4fc;
}

.dark .poc-root tfoot .text-emerald-800 {
    color: #6ee7b7;
}

.dark .poc-root tfoot .text-slate-800 {
    color: var(--foreground);
}

/* ══════════════════════════════════════════════════════════════
   GRAND TOTAL / STICKY BOTTOM ROW
   ══════════════════════════════════════════════════════════════ */
.dark .poc-root [class*="bg-slate-50\/80"],
.dark .poc-root [class*="bg-slate-50\/60"],
.dark .poc-root [class*="bg-slate-50\/30"],
.dark .poc-root [class*="bg-slate-50\/40"] {
    background-color: rgba(22, 22, 22, 0.7);
}

/* ══════════════════════════════════════════════════════════════
   FIXED-POSITION DROPDOWNS  (portalled via createPortal)
   ══════════════════════════════════════════════════════════════ */
.dark .fixed.bg-white {
    background-color: var(--popover);
    border-color: var(--border);
    color: var(--foreground);
}

.dark .fixed.bg-white .text-slate-900,
.dark .fixed.bg-white .text-slate-800 {
    color: var(--foreground);
}

.dark .fixed.bg-white .text-slate-700,
.dark .fixed.bg-white .text-slate-600 {
    color: #aaaaaa;
}

.dark .fixed.bg-white .hover\:bg-slate-100:hover {
    background-color: var(--card);
}

.dark .fixed.bg-white .border-slate-300 {
    border-color: var(--border);
}

/* ══════════════════════════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════════════════════════ */
.dark .poc-root ::-webkit-scrollbar-track {
    background: var(--background);
}

.dark .poc-root ::-webkit-scrollbar-thumb {
    background: var(--border);
}

/* ══════════════════════════════════════════════════════════════
   ACTIVE TAB — primary underline kept vivid
   ══════════════════════════════════════════════════════════════ */
/* border-indigo-600 active tab border stays as-is (already vivid in dark) */

/* ══════════════════════════════════════════════════════════════
   HEADER & TOOLBAR BACKGROUNDS
   ══════════════════════════════════════════════════════════════ */

/* Main header bar */
.dark .poc-root header {
    background-color: var(--card);
    border-bottom-color: var(--border);
}

/* Desktop filter toolbar strip */
.dark .poc-root .hidden.md\:flex.items-center.gap-3.border-b {
    background-color: var(--muted);
    border-bottom-color: var(--border);
}

/* Desktop tab bar */
.dark .poc-root .hidden.md\:flex.items-center.gap-1.px-4.border-b {
    background-color: var(--card);
    border-bottom-color: var(--border);
}

/* Month nav capsule bg-slate-100 */
.dark .poc-root .bg-slate-100.rounded-md {
    background-color: #232323;
}

/* ══════════════════════════════════════════════════════════════
   TABS — INACTIVE & ACTIVE TEXT
   ══════════════════════════════════════════════════════════════ */

/* Active tab: text-indigo-600 border-indigo-600 — boost to primary */
.dark .poc-root .border-indigo-600.text-indigo-600 {
    color: #818cf8;
    border-color: #818cf8;
}

/* Inactive tab hover */
.dark .poc-root .border-transparent.text-slate-500:hover {
    color: #cccccc;
}

/* ══════════════════════════════════════════════════════════════
   TOOLBAR BUTTONS & PILLS
   ══════════════════════════════════════════════════════════════ */

/* Business unit filter pills — inactive */
.dark .poc-root .bg-slate-200.text-slate-700 {
    background-color: #2a2a2a;
    color: #cccccc;
}

.dark .poc-root .hover\:bg-slate-300:hover {
    background-color: #383838;
}

/* Clear-filter button (bg-slate-200/50) */
.dark .poc-root [class*="bg-slate-200\/50"] {
    background-color: rgba(42, 42, 42, 0.7);
}

.dark .poc-root [class*="hover\:bg-slate-300\/50"]:hover {
    background-color: rgba(56, 56, 56, 0.7);
}

/* Scroll navigation arrow buttons (bg-white/80) */
.dark .poc-root [class*="bg-white\/80"] {
    background-color: rgba(30, 30, 30, 0.9);
}

/* ══════════════════════════════════════════════════════════════
   TREELIST — HEADER & FOOTER STICKY ROWS
   ══════════════════════════════════════════════════════════════ */

/* Column header row (sticky top) */
.dark .poc-root .sticky.top-0.z-30.flex.border-b {
    background-color: rgba(22, 22, 22, 0.97);
    border-bottom-color: var(--border);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}

/* Sticky left header cell — bg-slate-50 */
.dark .poc-root .sticky.left-0.z-40.bg-slate-50 {
    background-color: var(--muted);
    border-right-color: var(--border);
}

/* Header DataCell total — bg-slate-100 */
.dark .poc-root .sticky.right-0.z-\[60\].bg-slate-100,
.dark .poc-root .sticky.right-0.z-50.bg-slate-100,
.dark .poc-root .sticky.right-0.z-40.bg-slate-100 {
    background-color: var(--card);
    border-left-color: var(--border);
}

/* Footer sticky row */
.dark .poc-root .sticky.bottom-0.z-30.flex.bg-slate-50 {
    background-color: var(--muted);
    border-top-color: var(--border);
}

/* Footer left sticky — bg-slate-100 */
.dark .poc-root .sticky.left-0.z-50.bg-slate-100 {
    background-color: var(--card);
    border-right-color: var(--border);
}

/* PlanRealTagsCell fixed width strip */
.dark .poc-root .w-\[80px\].bg-slate-50.border-r {
    background-color: var(--muted);
    border-right-color: var(--border);
}

/* ══════════════════════════════════════════════════════════════
   TREELIST — TEXT IN TREE ROWS
   ══════════════════════════════════════════════════════════════ */

/* Planned value label in ValueCell (text-zinc-900) */
.dark .poc-root .text-zinc-900 {
    color: var(--foreground);
}

/* Footer total values */
.dark .poc-root .text-emerald-900 {
    color: #6ee7b7;
}

.dark .poc-root .text-indigo-900 {
    color: #a5b4fc;
}

/* Row dot indicator (bg-slate-300 dot in CostCenterRow) */
.dark .poc-root .bg-slate-300.rounded-full {
    background-color: #444444;
}

/* ══════════════════════════════════════════════════════════════
   KPI CARD INNER BORDER (border-t border-slate-100)
   ══════════════════════════════════════════════════════════════ */
.dark .poc-root .border-t.border-slate-100 {
    border-top-color: var(--border);
}

/* ══════════════════════════════════════════════════════════════
   RECHARTS TOOLTIP — custom ChartTooltip div
   ══════════════════════════════════════════════════════════════ */
.dark .poc-root .recharts-tooltip-wrapper>div,
.dark .poc-root .recharts-default-tooltip {
    background-color: var(--popover) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}

/* ══════════════════════════════════════════════════════════════
   ZINC OVERRIDES (dropdowns, zinc-50/100/200)
   ══════════════════════════════════════════════════════════════ */
.dark .poc-root .bg-zinc-50,
.dark .poc-root [class*="bg-zinc-50\/"] {
    background-color: rgba(30, 30, 30, 0.8);
}

.dark .poc-root .bg-zinc-100 {
    background-color: #2a2a2a;
}

.dark .poc-root .border-zinc-200 {
    border-color: var(--border);
}

.dark .poc-root .border-zinc-300 {
    border-color: var(--border);
}

.dark .poc-root .text-zinc-900 {
    color: var(--foreground);
}

.dark .poc-root .text-zinc-800 {
    color: #dddddd;
}

.dark .poc-root .hover\:bg-zinc-100:hover {
    background-color: #2a2a2a;
}

/* ══════════════════════════════════════════════════════════════
   FIXED DROPDOWN — zinc variants (portalled)
   ══════════════════════════════════════════════════════════════ */
.dark .fixed.bg-white .bg-zinc-50,
.dark .fixed.bg-white [class*="bg-zinc-50"] {
    background-color: rgba(30, 30, 30, 0.8);
}

.dark .fixed.bg-white .text-zinc-700 {
    color: #aaaaaa;
}

.dark .fixed.bg-white .hover\:bg-zinc-100:hover {
    background-color: #2a2a2a;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE FILTER DRAWER — dark mode flat overrides
   Target: .dark .fixed.bg-white  (the bottom-sheet motion.div)
   Goal: neutralise amber/emerald/rose/primary accents → flat slate
   ══════════════════════════════════════════════════════════════ */

/* ── Backdrop overlay ── */
.dark .fixed.bg-black\/30 {
    background-color: rgba(0, 0, 0, 0.55);
}

/* ── Drawer container & header ── */
.dark .fixed.bg-white.rounded-t-2xl {
    background-color: var(--card);
}

.dark .fixed.bg-white .rounded-t-xl.bg-white {
    background-color: var(--card);
    border-bottom-color: var(--border);
}

/* ── "Limpar filtro" button: rose → neutral slate ── */
.dark .fixed.bg-white .text-rose-700 {
    color: #aaaaaa;
}

.dark .fixed.bg-white .bg-rose-50 {
    background-color: #2a2a2a;
}

.dark .fixed.bg-white .border-rose-200 {
    border-color: var(--border);
}

.dark .fixed.bg-white .hover\:text-white:hover {
    color: var(--foreground);
}

.dark .fixed.bg-white .hover\:bg-rose-600:hover {
    background-color: #383838;
}

.dark .fixed.bg-white .hover\:border-rose-600:hover {
    border-color: #505050;
}

/* ── Search input ── */
.dark .fixed.bg-white .bg-slate-50.border-slate-200 {
    background-color: #1a1a1a;
    border-color: var(--border);
    color: var(--foreground);
}

/* ── Section containers (Período / Agrupamento / BUs / Segmentos) ── */

/* Remove colored top borders and tinted backgrounds */
.dark .fixed.bg-white [class*="border-t-2"] {
    background-color: rgba(30, 30, 30, 0.6);
    border-top-color: var(--border) !important;
}

/* ── Section icon wrappers ── */
.dark .fixed.bg-white .bg-slate-100.rounded-md,
.dark .fixed.bg-white .bg-zinc-100.rounded-md,
.dark .fixed.bg-white .bg-amber-100.rounded-md,
.dark .fixed.bg-white .bg-emerald-100.rounded-md {
    background-color: #2a2a2a;
}

/* ── Section icon colors ── */
.dark .fixed.bg-white .text-amber-700,
.dark .fixed.bg-white .text-emerald-700,
.dark .fixed.bg-white .text-zinc-700 {
    color: #aaaaaa;
}

/* ── Section title colors ── */
.dark .fixed.bg-white .text-amber-900,
.dark .fixed.bg-white .text-emerald-900,
.dark .fixed.bg-white .text-zinc-900 {
    color: var(--foreground);
}

/* ── "Filtro" badge pill (amber / emerald) ── */
.dark .fixed.bg-white .bg-amber-200,
.dark .fixed.bg-white .bg-emerald-200 {
    background-color: #2a2a2a;
}

.dark .fixed.bg-white .text-amber-800,
.dark .fixed.bg-white .text-emerald-800 {
    color: #aaaaaa;
}

.dark .fixed.bg-white .border-amber-300,
.dark .fixed.bg-white .border-emerald-300,
.dark .fixed.bg-white .border-amber-200,
.dark .fixed.bg-white .border-emerald-200 {
    border-color: var(--border);
}

/* ── Inactive row items ── */
.dark .fixed.bg-white .bg-slate-50.border-slate-200 {
    background-color: #1e1e1e;
    border-color: var(--border);
}

.dark .fixed.bg-white .hover\:bg-slate-100:hover {
    background-color: #2a2a2a;
}

/* ── Active row items: primary tint → flat slate ── */
.dark .fixed.bg-white [class*="bg-primary\/10"] {
    background-color: #2a2a2a;
}

.dark .fixed.bg-white [class*="border-primary\/30"] {
    border-color: #505050;
}

/* ── Checkbox: active bg-primary → keep subtle accent ── */
/* (already bg-primary so it inherits the CSS variable — no override needed) */

/* ── Label text of active items: text-primary → light foreground ── */
.dark .fixed.bg-white .text-primary {
    color: var(--foreground);
}

/* ── Year pill: active stays bg-primary, inactive neutral ── */
.dark .fixed.bg-white .bg-slate-100.text-slate-700 {
    background-color: #2a2a2a;
    color: #cccccc;
}

.dark .fixed.bg-white .hover\:bg-slate-200:hover {
    background-color: #383838;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — MÊS ATUAL: ring-offset no carrossel de meses
   ring-offset-1 usa branco por padrão; ajustar para combinar com
   o fundo escuro do container sticky (--card = #1e1e1e)
   ══════════════════════════════════════════════════════════════ */
.dark .poc-root [class*="ring-offset-1"],
.dark .poc-root [class*="ring-offset-2"] {
    --tw-ring-offset-color: var(--card);
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — CARDS PLANEJADO × REALIZADO
   Substituir gradiente claro por superfície tintada escura
   ══════════════════════════════════════════════════════════════ */

/* Card Planejado (from-indigo-50 to-indigo-100/50) */
.dark .poc-root [class*="from-indigo-50"] {
    background-image: none;
    background-color: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.22);
}

/* Card Realizado (from-emerald-50 to-emerald-100/50) */
.dark .poc-root [class*="from-emerald-50"] {
    background-image: none;
    background-color: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.2);
}

/* Círculo decorativo interno dos cards */
.dark .poc-root [class*="bg-indigo-200\/20"] {
    background-color: rgba(99, 102, 241, 0.06);
}

.dark .poc-root [class*="bg-emerald-200\/20"] {
    background-color: rgba(16, 185, 129, 0.05);
}

/* Label e valor do card Realizado */
.dark .poc-root .text-emerald-700 {
    color: #34d399;
}

/* Badge de variação dentro do card Realizado (bg-emerald-100/50) */
.dark .poc-root [class*="bg-emerald-100\/"] {
    background-color: rgba(16, 185, 129, 0.12);
}

/* ══════════════════════════════════════════════════════════════
   MOBILE TREELIST — MobileItemCard
   ══════════════════════════════════════════════════════════════ */

/* Active/press state no header da linha ao tocar */
.dark .poc-root .active\:bg-slate-50:active {
    background-color: #252525;
}

/* Badge "Realizado" (bg-emerald-50 text-emerald-600) */
.dark .poc-root .bg-emerald-50 {
    background-color: rgba(16, 185, 129, 0.1);
}

.dark .poc-root .text-emerald-600 {
    color: #34d399;
}

/* Badge "abaixo do planejado" (bg-rose-50 text-rose-600) */
.dark .poc-root .bg-rose-50 {
    background-color: rgba(244, 63, 94, 0.1);
}

.dark .poc-root .text-rose-600 {
    color: #fb7185;
}

/* Badge CC inline (bg-emerald-50 rounded-lg) — nível costCenter */
.dark .poc-root .bg-emerald-50.rounded-lg {
    background-color: rgba(16, 185, 129, 0.1);
}