/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-duration: initial;
    }
  }
}
@layer theme {
  :root,
  :host {
    --tw-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --tw-color-blue-500: oklch(62.3% 0.214 259.815);
    --tw-color-gray-100: oklch(96.7% 0.003 264.542);
    --tw-color-gray-200: oklch(92.8% 0.006 264.531);
    --tw-color-gray-300: oklch(87.2% 0.01 258.338);
    --tw-color-gray-600: oklch(44.6% 0.03 256.802);
    --tw-color-gray-700: oklch(37.3% 0.034 259.733);
    --tw-color-gray-800: oklch(27.8% 0.033 256.848);
    --tw-color-gray-900: oklch(21% 0.034 264.665);
    --tw-color-black: #000;
    --tw-color-white: #fff;
    --tw-spacing: 0.25rem;
    --tw-text-sm: 0.875rem;
    --tw-text-sm--line-height: calc(1.25 / 0.875);
    --tw-text-base: 1rem;
    --tw-text-base--line-height: 1.5;
    --tw-text-xl: 1.25rem;
    --tw-text-xl--line-height: calc(1.75 / 1.25);
    --tw-font-weight-medium: 500;
    --tw-font-weight-semibold: 600;
    --tw-radius-md: 0.375rem;
    --tw-radius-3xl: 1.5rem;
    --tw-default-transition-duration: 0.15s;
    --tw-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}
@layer base,components;
@layer utilities {
  .tw\:absolute {
    position: absolute;
  }
  .tw\:relative {
    position: relative;
  }
  .tw\:right-0 {
    right: calc(var(--tw-spacing) * 0);
  }
  .tw\:mx-2 {
    margin-inline: calc(var(--tw-spacing) * 2);
  }
  .tw\:mt-2 {
    margin-top: calc(var(--tw-spacing) * 2);
  }
  .tw\:flex {
    display: flex;
  }
  .tw\:inline-block {
    display: inline-block;
  }
  .tw\:h-10 {
    height: calc(var(--tw-spacing) * 10);
  }
  .tw\:h-20 {
    height: calc(var(--tw-spacing) * 20);
  }
  .tw\:h-screen {
    height: 100vh;
  }
  .tw\:w-10 {
    width: calc(var(--tw-spacing) * 10);
  }
  .tw\:w-20 {
    width: calc(var(--tw-spacing) * 20);
  }
  .tw\:w-full {
    width: 100%;
  }
  .tw\:max-w-96 {
    max-width: calc(var(--tw-spacing) * 96);
  }
  .tw\:flex-1 {
    flex: 1;
  }
  .tw\:origin-top-right {
    transform-origin: 100% 0;
  }
  .tw\:cursor-pointer {
    cursor: pointer;
  }
  .tw\:flex-col {
    flex-direction: column;
  }
  .tw\:flex-row {
    flex-direction: row;
  }
  .tw\:items-center {
    align-items: center;
  }
  .tw\:justify-between {
    justify-content: space-between;
  }
  .tw\:justify-center {
    justify-content: center;
  }
  .tw\:justify-start {
    justify-content: flex-start;
  }
  .tw\:gap-0 {
    gap: calc(var(--tw-spacing) * 0);
  }
  .tw\:gap-1 {
    gap: calc(var(--tw-spacing) * 1);
  }
  .tw\:gap-4 {
    gap: calc(var(--tw-spacing) * 4);
  }
  .tw\:gap-8 {
    gap: calc(var(--tw-spacing) * 8);
  }
  .tw\:overflow-auto {
    overflow: auto;
  }
  .tw\:rounded-full {
    border-radius: 3.40282e38px;
  }
  .tw\:rounded-md {
    border-radius: var(--tw-radius-md);
  }
  .tw\:border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .tw\:border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .tw\:border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }
  .tw\:border-black\/20 {
    border-color: var(--tw-color-black);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .tw\:border-black\/20 {
      border-color: color-mix(in oklab, var(--tw-color-black) 20%, transparent);
    }
  }
  .tw\:border-gray-200 {
    border-color: var(--tw-color-gray-200);
  }
  .tw\:border-gray-300 {
    border-color: var(--tw-color-gray-300);
  }
  .tw\:bg-blue-500 {
    background-color: var(--tw-color-blue-500);
  }
  .tw\:bg-gray-900 {
    background-color: var(--tw-color-gray-900);
  }
  .tw\:bg-white {
    background-color: var(--tw-color-white);
  }
  .tw\:object-contain {
    object-fit: contain;
  }
  .tw\:p-3 {
    padding: calc(var(--tw-spacing) * 3);
  }
  .tw\:p-4 {
    padding: calc(var(--tw-spacing) * 4);
  }
  .tw\:p-6 {
    padding: calc(var(--tw-spacing) * 6);
  }
  .tw\:p-8 {
    padding: calc(var(--tw-spacing) * 8);
  }
  .tw\:pb-8 {
    padding-bottom: calc(var(--tw-spacing) * 8);
  }
  .tw\:font-sans {
    font-family: var(--tw-font-sans);
  }
  .tw\:text-sm {
    font-size: var(--tw-text-sm);
    line-height: var(--tw-leading, var(--tw-text-sm--line-height));
  }
  .tw\:text-xl {
    font-size: var(--tw-text-xl);
    line-height: var(--tw-leading, var(--tw-text-xl--line-height));
  }
  .tw\:font-small {
        --tw-font-weight: var(--tw-font-weight-medium);
    font-weight: var(--tw-font-weight-medium);
    font-size: 10px;
  }
  .tw\:font-medium {
    --tw-font-weight: var(--tw-font-weight-medium);
    font-weight: var(--tw-font-weight-medium);
  }
  .tw\:font-semibold {
    --tw-font-weight: var(--tw-font-weight-semibold);
    font-weight: var(--tw-font-weight-semibold);
  }
  .tw\:text-\[\#9FA8B9\] {
    color: #9fa8b9;
  }
  .tw\:text-gray-600 {
    color: var(--tw-color-gray-600);
  }
  .tw\:text-white {
    color: var(--tw-color-white);
  }
  .tw\:uppercase {
    text-transform: uppercase;
  }
  .tw\:shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a),
      0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .tw\:shadow-black\/35 {
    --tw-shadow-color: var(--tw-color-black);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .tw\:shadow-black\/35 {
      --tw-shadow-color: color-mix(
        in oklab,
        color-mix(in oklab, var(--tw-color-black) 35%, transparent)
          var(--tw-shadow-alpha),
        transparent
      );
    }
  }
  .tw\:transition-colors {
    transition-property: color, background-color, border-color, outline-color,
      text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via,
      --tw-gradient-to;
    transition-timing-function: var(
      --tw-ease,
      var(--tw-default-transition-timing-function)
    );
    transition-duration: var(
      --tw-duration,
      var(--tw-default-transition-duration)
    );
  }
  .tw\:duration-200 {
    --tw-duration: 0.2s;
    transition-duration: 0.2s;
  }
  @media (hover: hover) {
    .tw\:hover\:bg-gray-100:hover {
      background-color: var(--tw-color-gray-100);
    }
  }
}
.aside-black {
  height: 100vh;
  width: 72px;
  background-color: var(--tw-color-gray-800);
  padding: 12px;
  padding-top: calc(var(--tw-spacing) * 4);
  flex-direction: column;
  display: flex;
  position: relative;
  transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: visible;
}
.aside-black.opened {
  width: 260px;
  padding: 16px;
  padding-top: calc(var(--tw-spacing) * 4);
}
#opened-aside {
  top: 76px;
  right: -13px;
  margin: 0;
  cursor: pointer;
  border: none;
  padding: 0;
  background-color: transparent;
  border-radius: 9999px;
  width: 27px;
  height: 27px;
  position: absolute;
  rotate: 180deg;
  transition: rotate 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 10;
}
#opened-aside img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.opened #opened-aside {
  rotate: none;
}
.icon-menu-parent {
  height: 24px;
  width: 24px;
  min-width: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-menu-parent svg {
  width: 24px !important;
  height: 24px !important;
  display: block;
  flex-shrink: 0;
}
.text-menu-parent {
  font-size: 14px;
  /* font-size: var(--tw-text-base); */
  line-height: var(--tw-leading, var(--tw-text-base--line-height));
  --tw-font-weight: var(--tw-font-weight-medium);
  font-weight: var(--tw-font-weight-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase;
  flex: 1;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  transition: opacity 0.2s ease, max-width 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.textSubMenuChild {
  font-size: 13px;
  --tw-duration: 0.2s;
  transition-duration: 0.2s;
  overflow: hidden;
  line-height: 100%;
}
.opened .text-menu-parent {
  opacity: 1;
  max-width: 200px;
}

#menu-usuario{
  width: 38px !important;
  height: 38px !important;
}

.menuItemDark {
  margin-top: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0;
  border-radius: var(--tw-radius-md);
  padding: 8px;
  font-size: var(--tw-text-sm);
  line-height: var(--tw-leading, var(--tw-text-sm--line-height));
  display: flex;
  height: 40px;
  overflow: hidden;
  white-space: nowrap;
}
.opened .menuItemDark {
  justify-content: flex-start;
  gap: 12px;
  overflow: visible;
}
@media (hover: hover) {
  .menuItemDark:hover {
      border-radius: var(--tw-radius-3xl);
  background-color: var(--tw-color-white);
  color: #232a37 !important;
  }
}
.menuItemDark {
  color: #ebedf6;
}
.subMenuItemDark {
  margin-top: calc(var(--tw-spacing) * 1);
  margin-left: calc(var(--tw-spacing) * 4);
  cursor: pointer;
  align-items: center;
  column-gap: calc(var(--tw-spacing) * 4);
  border-radius: var(--tw-radius-md);
  padding: calc(var(--tw-spacing) * 2);
  padding-left: calc(var(--tw-spacing) * 9);
  font-size: var(--tw-text-sm);
  line-height: var(--tw-leading, var(--tw-text-sm--line-height));
  display: flex;
}
@media (hover: hover) {
  .subMenuItemDark:hover {
          border-radius: var(--tw-radius-3xl);
  background-color: var(--tw-color-white);
  color: #232a37 !important;
  }
}
.subMenuItemDark {
  color: #ebedf6;
}
.activeItemMenuDark {
  border-radius: var(--tw-radius-3xl);
  background-color: var(--tw-color-white);
  color: #232a37 !important;
}

.activeSubItemMenuDark {
  background-color: var(--tw-color-white);
  color: #232a37 !important;
  border-radius: var(--tw-radius-3xl);
}

.activeSubItemMenuDark:hover {
  background-color: var(--tw-color-white);
  color: #232a37 !important;
  border-radius: var(--tw-radius-3xl);
}

@media (hover: hover) {
  .activeItemMenuDark:hover {
    background-color: var(--tw-color-white);
  }
}
.subMenuIcon {
  height: calc(var(--tw-spacing) * 8);
  width: calc(var(--tw-spacing) * 8);
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  rotate: none;
  transition: opacity 0.2s ease, max-width 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), rotate 0.3s ease;
  display: block;
}
.opened .subMenuIcon {
  opacity: 1;
  max-width: 32px;
}
.openedSubMenu {
  rotate: 180deg;
}
.subMenuDark {
  max-height: 0;
  overflow: hidden;
  display: block;
  transition: max-height 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.openedSubMenuDark {
  max-height: 500px;
}
#navSideMenu {
  scrollbar-width: none;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  display: flex;
  overflow-y: auto;
}
.logoMenuDark {
  object-fit: contain;
  object-position: left;
  width: 100%;
  max-width: 157.75px;
  display: block;
  height: auto;
  max-height: 45px;
}
.logoMiniMenuDark {
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: auto;
  max-height: 45px;
}
#aContentLogoDark {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), max-width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
#aContentLogoMiniDark {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  max-width: 45px;
  overflow: hidden;
  transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), max-width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
#sidebar-black.opened #aContentLogoDark {
  opacity: 1;
  max-width: 160px;
}
#sidebar-black.opened #aContentLogoMiniDark {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
}
#contentLogoDark {
  height: 60px;
  margin-bottom: calc(var(--tw-spacing) * 6);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}
.lineHorizontalSeparator {
  margin-block: calc(var(--tw-spacing) * 4);
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  border-color: var(--tw-color-gray-700);
}
#navSideMenu ul {
  margin: calc(var(--tw-spacing) * 0);
  padding: calc(var(--tw-spacing) * 0);
}
.headerDark {
  background-color: var(--tw-color-white);
  padding-inline: calc(var(--tw-spacing) * 6);
  padding-block: calc(var(--tw-spacing) * 4);
  color: #2E3A4E;
  justify-content: space-between;
  align-items: center;
  display: flex !important;
}
.buttonHeaderDark {
  cursor: pointer;
  border-style: var(--tw-border-style);
  padding: calc(var(--tw-spacing) * 1);
  transition-property: color, background-color, border-color, outline-color,
    text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via,
    --tw-gradient-to;
  transition-timing-function: var(
    --tw-ease,
    var(--tw-default-transition-timing-function)
  );
  transition-duration: var(
    --tw-duration,
    var(--tw-default-transition-duration)
  );
  --tw-duration: 0.2s;
  background-color: #0000;
  border-width: 0;
  border-radius: 3.40282e38px;
  transition-duration: 0.2s;
  color: #2E3A4E;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  display: flex;
}
@media (hover: hover) {
  .buttonHeaderDark:hover {
    background-color: var(--tw-color-gray-100);
  }
}
.buttonHeaderDark:active {
  background-color: var(--tw-color-gray-200);
}

.hiddenHeaderDark {
  display: none;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}


#keysModal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 999999999999; /* Sit on top */
  padding: 2%; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

#keys-content {
  background-color: #fefefe;
  margin: auto;
  border: 1px solid #888;
  width: 85%;
  height: 90%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

.close {
  color: #000000;
  font-size: 40px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

#dashboard-link{
	text-decoration: none;
}

.text-header-size{
  font-size: 14px !important;
}