html {
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    height: 100%;
    margin: 0;
    position: relative; /* Necessário para posicionar o pseudo-elemento */
  }
  
 
body {
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #8e44ad, #4B0082, #3F2A91, #1D3F72, #1E5A8E, #5A2E91, #8e44ad); /* Gradiente com tons de roxo escuro e azul */
    background-size: 200% 200%; /* Ajuste para um efeito mais fluido */
    animation: gradient-animation 15s ease infinite, shine 5s ease-in-out infinite; /* Acelerar a animação de gradiente e brilho */
    overflow: hidden; /* Evita scrolls */
    position: relative; /* Necessário para posicionar o pseudo-elemento */
}

/* Animação de gradiente */
@keyframes gradient-animation {
    0% {
        background-position: 0% 25%;
    }
    25% {
        background-position: 100% 50%; /* Mudança mais perceptível */
    }
    100% {
        background-position: 0% 60%;
    }
}

/* Animação de brilho suave */
@keyframes shine {
    0% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.8;
    }
}




.actions-bar {
    display: flex;
    gap: 10px; /* Espaçamento entre os botões */
   
    background-color: #f8f9fa; /* Fundo claro */
    padding: 10px 20px; /* Espaçamento interno */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    margin-bottom: 20px; /* Espaçamento abaixo da barra */
}

.actions-bar button {
    padding: 10px 20px; /* Tamanho dos botões */
    font-size: 1em; /* Tamanho da fonte */
    border: none; /* Remove a borda padrão */
    border-radius: 5px; /* Bordas arredondadas dos botões */
    cursor: pointer; /* Indicador de clique */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Animações suaves */
}

.actions-bar button.primary {
    background-color: #007bff; /* Cor de fundo azul para botões primários */
    color: #ffffff; /* Texto branco */
}

.actions-bar button.primary:hover {
    background-color: #0056b3; /* Fundo azul escuro ao passar o mouse */
    transform: translateY(-2px); /* Leve elevação ao passar o mouse */
}

.actions-bar button.critical {
    background-color: #dc3545; /* Cor de fundo vermelha para ações críticas */
    color: #ffffff; /* Texto branco */
}

.actions-bar button.critical:hover {
    background-color: #a71d2a; /* Fundo vermelho escuro ao passar o mouse */
    transform: translateY(-2px); /* Leve elevação ao passar o mouse */
}

.actions-bar button:disabled {
    background-color: #cccccc; /* Fundo cinza para botões desabilitados */
    color: #ffffff; /* Texto cinza escuro */
    cursor: not-allowed; /* Cursor indicando botão desabilitado */
    transform: none; /* Remove elevação ao passar o mouse */
}

@media (max-width: 768px) {
    .actions-bar {
        flex-wrap: wrap; /* Permite que os botões quebrem linha em telas menores */
        justify-content: center; /* Centraliza os botões em telas menores */
    }

    .actions-bar button {
        width: 100%;
        margin-bottom: 10px; /* Espaçamento entre botões empilhados */
    }
}





















  
  /* Pseudo-elemento para criar o efeito de brilho */
  body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none; /* Permite que os eventos de clique passem através do brilho */
    mix-blend-mode: overlay; /* Faz o brilho misturar suavemente com o fundo */
    animation: glow-animation 60s linear infinite, move-glow 30s linear infinite;
  }
  
  @keyframes glow-animation {
    0% {
        opacity: 0.2;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.05);
    }
    100% {
        opacity: 0.2;
        transform: scale(1);
    }
  }
  
  @keyframes move-glow {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(100%, 100%);
    }
  }
  
    article,
    aside,
    footer,
    header,
    nav,
    section {
      display: block;
    }
    h1 {
      font-size: 2em;
      margin: 0.67em 0;
    }
    figcaption,
    figure,
    main {
      display: block;
    }
    figure {
      margin: 1em 40px;
    }
    hr {
      box-sizing: content-box;
      height: 0;
      overflow: visible;
    }
    pre {
      font-family: monospace, monospace;
      font-size: 1em;
    }
    a {
      background-color: transparent;
      -webkit-text-decoration-skip: objects;
    }
    abbr[title] {
      border-bottom: none;
      text-decoration: underline;
      text-decoration: underline dotted;
    }
    b,
    strong {
      font-weight: inherit;
    }
    b,
    strong {
      font-weight: bolder;
    }
    code,
    kbd,
    samp {
      font-family: monospace, monospace;
      font-size: 1em;
    }
    dfn {
      font-style: italic;
    }
    mark {
      background-color: #ff0;
      color: #000;
    }
    small {
      font-size: 80%;
    }
    sub,
    sup {
      font-size: 75%;
      line-height: 0;
      position: relative;
      vertical-align: baseline;
    }
    sub {
      bottom: -0.25em;
    }
    sup {
      top: -0.5em;
    }
    audio,
    video {
      display: inline-block;
    }
    audio:not([controls]) {
      display: none;
      height: 0;
    }
    img {
      border-style: none;
    }
    svg:not(:root) {
      overflow: hidden;
    }
    button,
    input,
    optgroup,
    select,
    textarea {
      font-family: sans-serif;
      font-size: 100%;
      line-height: 1.15;
      margin: 0;
    }
    button,
    input {
      overflow: visible;
    }
    button,
    select {
      text-transform: none;
    }
    button,
    html [type="button"],
    [type="reset"],
    [type="submit"] {
      -webkit-appearance: button;
    }
    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
      border-style: none;
      padding: 0;
    }
    button:-moz-focusring,
    [type="button"]:-moz-focusring,
    [type="reset"]:-moz-focusring,
    [type="submit"]:-moz-focusring {
      outline: 1px dotted ButtonText;
    }
    fieldset {
      padding: 0.35em 0.75em 0.625em;
    }
    legend {
      box-sizing: border-box;
      color: inherit;
      display: table;
      max-width: 100%;
      padding: 0;
      white-space: normal;
    }
    progress {
      display: inline-block;
      vertical-align: baseline;
    }
    textarea {
      overflow: auto;
    }
    [type="checkbox"],
    [type="radio"] {
      box-sizing: border-box;
      padding: 0;
    }
    [type="number"]::-webkit-inner-spin-button,
    [type="number"]::-webkit-outer-spin-button {
      height: auto;
    }
    [type="search"] {
      -webkit-appearance: textfield;
      outline-offset: -2px;
    }
    [type="search"]::-webkit-search-cancel-button,
    [type="search"]::-webkit-search-decoration {
      -webkit-appearance: none;
    }
    ::-webkit-file-upload-button {
      -webkit-appearance: button;
      font: inherit;
    }
    details,
    menu {
      display: block;
    }
    summary {
      display: list-item;
    }
    canvas {
      display: inline-block;
    }
    template {
      display: none;
    }
    [hidden] {
      display: none;
    }
    .CodeMirror {
      font-family: monospace;
      height: 300px;
      color: #000;
      direction: ltr;
    }
    .CodeMirror-lines {
      padding: 4px 0;
    }
    .CodeMirror pre.CodeMirror-line,
    .CodeMirror pre.CodeMirror-line-like {
      padding: 0 4px;
    }
    .CodeMirror-scrollbar-filler,
    .CodeMirror-gutter-filler {
      background-color: #fff;
    }
    .CodeMirror-gutters {
      border-right: 1px solid #ddd;
      background-color: #f7f7f7;
      white-space: nowrap;
    }
    .CodeMirror-linenumber {
      padding: 0 3px 0 5px;
      min-width: 20px;
      text-align: right;
      color: #999;
      white-space: nowrap;
    }
    .CodeMirror-guttermarker {
      color: #000;
    }
    .CodeMirror-guttermarker-subtle {
      color: #999;
    }
    .CodeMirror-cursor {
      border-left: 1px solid black;
      border-right: none;
      width: 0;
    }
    .CodeMirror div.CodeMirror-secondarycursor {
      border-left: 1px solid silver;
    }
    .cm-fat-cursor .CodeMirror-cursor {
      width: auto;
      border: 0 !important;
      background: #7e7;
    }
    .cm-fat-cursor div.CodeMirror-cursors {
      z-index: 1;
    }
    .cm-fat-cursor .CodeMirror-line::selection,
    .cm-fat-cursor .CodeMirror-line > span::selection,
    .cm-fat-cursor .CodeMirror-line > span > span::selection {
      background: transparent;
    }
    .cm-fat-cursor .CodeMirror-line::-moz-selection,
    .cm-fat-cursor .CodeMirror-line > span::-moz-selection,
    .cm-fat-cursor .CodeMirror-line > span > span::-moz-selection {
      background: transparent;
    }
    .cm-fat-cursor {
      caret-color: transparent;
    }
    @-moz-keyframes blink {
      50% {
        background-color: transparent;
      }
    }
    @-webkit-keyframes blink {
      50% {
        background-color: transparent;
      }
    }
    @keyframes blink {
      50% {
        background-color: transparent;
      }
    }
    .cm-tab {
      display: inline-block;
      text-decoration: inherit;
    }
    .CodeMirror-rulers {
      position: absolute;
      inset: -50px 0 0;
      overflow: hidden;
    }
    .CodeMirror-ruler {
      border-left: 1px solid #ccc;
      top: 0;
      bottom: 0;
      position: absolute;
    }
    .cm-s-default .cm-header {
      color: #00f;
    }
    .cm-s-default .cm-quote {
      color: #090;
    }
    .cm-negative {
      color: #d44;
    }
    .cm-positive {
      color: #292;
    }
    .cm-header,
    .cm-strong {
      font-weight: 700;
    }
    .cm-em {
      font-style: italic;
    }
    .cm-link {
      text-decoration: underline;
    }
    .cm-strikethrough {
      text-decoration: line-through;
    }
    .cm-s-default .cm-keyword {
      color: #708;
    }
    .cm-s-default .cm-atom {
      color: #219;
    }
    .cm-s-default .cm-number {
      color: #164;
    }
    .cm-s-default .cm-def {
      color: #00f;
    }
    .cm-s-default .cm-variable-2 {
      color: #05a;
    }
    .cm-s-default .cm-variable-3,
    .cm-s-default .cm-type {
      color: #085;
    }
    .cm-s-default .cm-comment {
      color: #a50;
    }
    .cm-s-default .cm-string {
      color: #a11;
    }
    .cm-s-default .cm-string-2 {
      color: #f50;
    }
    .cm-s-default .cm-meta,
    .cm-s-default .cm-qualifier {
      color: #555;
    }
    .cm-s-default .cm-builtin {
      color: #30a;
    }
    .cm-s-default .cm-bracket {
      color: #997;
    }
    .cm-s-default .cm-tag {
      color: #170;
    }
    .cm-s-default .cm-attribute {
      color: #00c;
    }
    .cm-s-default .cm-hr {
      color: #999;
    }
    .cm-s-default .cm-link {
      color: #00c;
    }
    .cm-s-default .cm-error,
    .cm-invalidchar {
      color: red;
    }
    .CodeMirror-composing {
      border-bottom: 2px solid;
    }
    div.CodeMirror span.CodeMirror-matchingbracket {
      color: #0b0;
    }
    div.CodeMirror span.CodeMirror-nonmatchingbracket {
      color: #a22;
    }
    .CodeMirror-matchingtag {
      background: #ff96004d;
    }
    .CodeMirror-activeline-background {
      background: #e8f2ff;
    }
    .CodeMirror {
      position: relative;
      overflow: hidden;
      background: #fff;
    }
    .CodeMirror-scroll {
      overflow: scroll !important;
      margin-bottom: -50px;
      margin-right: -50px;
      padding-bottom: 50px;
      height: 100%;
      outline: none;
      position: relative;
      z-index: 0;
    }
    .CodeMirror-sizer {
      position: relative;
      border-right: 50px solid transparent;
    }
    .CodeMirror-vscrollbar,
    .CodeMirror-hscrollbar,
    .CodeMirror-scrollbar-filler,
    .CodeMirror-gutter-filler {
      position: absolute;
      z-index: 6;
      display: none;
      outline: none;
    }
    .CodeMirror-vscrollbar {
      right: 0;
      top: 0;
      overflow-x: hidden;
      overflow-y: scroll;
    }
    .CodeMirror-hscrollbar {
      bottom: 0;
      left: 0;
      overflow-y: hidden;
      overflow-x: scroll;
    }
    .CodeMirror-scrollbar-filler {
      right: 0;
      bottom: 0;
    }
    .CodeMirror-gutter-filler {
      left: 0;
      bottom: 0;
    }
    .CodeMirror-gutters {
      position: absolute;
      left: 0;
      top: 0;
      min-height: 100%;
      z-index: 3;
    }
    .CodeMirror-gutter {
      white-space: normal;
      height: 100%;
      display: inline-block;
      vertical-align: top;
      margin-bottom: -50px;
    }
    .CodeMirror-gutter-wrapper {
      position: absolute;
      z-index: 4;
      background: none !important;
      border: none !important;
    }
    .CodeMirror-gutter-background {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 4;
    }
    .CodeMirror-gutter-elt {
      position: absolute;
      cursor: default;
      z-index: 4;
    }
    .CodeMirror-gutter-wrapper ::selection {
      background-color: transparent;
    }
    .CodeMirror-gutter-wrapper ::-moz-selection {
      background-color: transparent;
    }
    .CodeMirror-lines {
      cursor: text;
      min-height: 1px;
    }
    .CodeMirror pre.CodeMirror-line,
    .CodeMirror pre.CodeMirror-line-like {
      -moz-border-radius: 0;
      -webkit-border-radius: 0;
      border-radius: 0;
      border-width: 0;
      background: transparent;
      font-family: inherit;
      font-size: inherit;
      margin: 0;
      white-space: pre;
      word-wrap: normal;
      line-height: inherit;
      color: inherit;
      z-index: 2;
      position: relative;
      overflow: visible;
      -webkit-tap-highlight-color: transparent;
      -webkit-font-variant-ligatures: contextual;
      font-variant-ligatures: contextual;
    }
    .CodeMirror-wrap pre.CodeMirror-line,
    .CodeMirror-wrap pre.CodeMirror-line-like {
      word-wrap: break-word;
      white-space: pre-wrap;
      word-break: normal;
    }
    .CodeMirror-linebackground {
      position: absolute;
      inset: 0;
      z-index: 0;
    }
    .CodeMirror-linewidget {
      position: relative;
      z-index: 2;
      padding: 0.1px;
    }
    .CodeMirror-rtl pre {
      direction: rtl;
    }
    .CodeMirror-code {
      outline: none;
    }
    .CodeMirror-scroll,
    .CodeMirror-sizer,
    .CodeMirror-gutter,
    .CodeMirror-gutters,
    .CodeMirror-linenumber {
      -moz-box-sizing: content-box;
      box-sizing: content-box;
    }
    .CodeMirror-measure {
      position: absolute;
      width: 100%;
      height: 0;
      overflow: hidden;
      visibility: hidden;
    }
    .CodeMirror-cursor {
      position: absolute;
      pointer-events: none;
    }
    .CodeMirror-measure pre {
      position: static;
    }
    div.CodeMirror-cursors {
      visibility: hidden;
      position: relative;
      z-index: 3;
    }
    div.CodeMirror-dragcursors,
    .CodeMirror-focused div.CodeMirror-cursors {
      visibility: visible;
    }
    .CodeMirror-selected {
      background: #d9d9d9;
    }
    .CodeMirror-focused .CodeMirror-selected {
      background: #d7d4f0;
    }
    .CodeMirror-crosshair {
      cursor: crosshair;
    }
    .CodeMirror-line::selection,
    .CodeMirror-line > span::selection,
    .CodeMirror-line > span > span::selection {
      background: #d7d4f0;
    }
    .CodeMirror-line::-moz-selection,
    .CodeMirror-line > span::-moz-selection,
    .CodeMirror-line > span > span::-moz-selection {
      background: #d7d4f0;
    }
    .cm-searching {
      background-color: #ffa;
      background-color: #ff06;
    }
    .cm-force-border {
      padding-right: 0.1px;
    }
    @media print {
      .CodeMirror div.CodeMirror-cursors {
        visibility: hidden;
      }
    }
    .cm-tab-wrap-hack:after {
      content: "";
    }
    span.CodeMirror-selectedtext {
      background: none;
    }
    :root {
      --base-font-size: 13px;
      --base-line-height: 16px;
      --color1: #ffffff; /* Branco para o fundo de elementos */
      --color2: #cce4f6; /* Azul claro para detalhes */
      --color3: #0099ff; /* Azul brilhante para fundos */
      --color4: #003d66; /* Azul escuro para texto */
      --color5: #002233; /* Azul muito escuro para texto */
      --fade: 0.2s;
      --disabled: #666;
      --status-red: 0 80% 80%;
      --status-green: 125 80% 80%;
      --status-gray: 58 3% 80%;
      --status-yellow: 46 79% 80%;
    }
    body,
    input,
    button,
    select,
    option,
    textarea {
      outline-color: var(--color4);
      font-family: sans-serif;
      color: var(--color5);
    }
    a {
      color: var(--color4);
      cursor: pointer;
      transition: background-color var(--fade), color var(--fade);
    }
    a:visited {
      color: var(--color4);
    }
    a:hover {
      color: #fff;
      background-color: var(--color4);
    }
    a span {
      text-decoration: inherit;
    }
    strong,
    b {
      font-weight: 700;
    }
    i {
      font-style: italic;
    }
    @keyframes pending-blink {
      0% {
        background-color: hsl(var(--status-green) / 0.9);
      }
      to {
        background-color: transparent;
      }
    }
    body {
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
   #content-wrapper {
  flex-grow: 1;
  display: flex;
  overflow-x: hidden; /* Oculta a rolagem horizontal */
  overflow-y: auto;   /* Permite a rolagem vertical */
}
    /*////////////////////////////////////// */
#header {
    position: relative;
    overflow: visible;
    height: 80px; /* Ajuste a altura conforme necessário */
    background: linear-gradient(135deg, #8e44ad, #4B0082, #3F2A91, #1D3F72, #1E5A8E, #5A2E91, #8e44ad); /* Gradiente de roxo escuro para azul marinho */
    background-size: 200% 200%; /* Ajuste para um efeito mais fluido */
    animation: gradient-animation 15s ease infinite, shine 5s ease-in-out infinite; /* Animação de gradiente e brilho suave */
    border-bottom: 1px solid var(--color1); /* Borda inferior */
}

/* Animação de gradiente */
@keyframes gradient-animation {
    0% {
        background-position: 0% 25%;
    }
    25% {
        background-position: 100% 50%; /* Mudança mais perceptível */
    }
    100% {
        background-position: 0% 60%;
    }
}

/* Animação de brilho suave */
@keyframes shine {
    0% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.8;
    }
}

    
    /* Pseudo-elemento para criar o efeito de brilho no header */
    #header::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
        pointer-events: none; /* Permite que os eventos de clique passem através do brilho */
        mix-blend-mode: overlay; /* Faz o brilho misturar suavemente com o fundo */
        animation: glow-animation-header 60s linear infinite, move-glow-header 30s linear infinite;
    }
    
    /* Animação do brilho (glow) */
    @keyframes glow-animation-header {
        0% {
            opacity: 0.2;
            transform: scale(1);
        }
        50% {
            opacity: 0.5;
            transform: scale(1.05);
        }
        100% {
            opacity: 0.2;
            transform: scale(1);
        }
    }
    
    /* Animação do movimento do brilho */
    @keyframes move-glow-header {
        0% {
            transform: translate(0, 0);
        }
        100% {
            transform: translate(100%, 100%);
        }
    }
    
  
  #header > .drawer-wrapper {
      position: fixed;
      z-index: 10;
      width: 720px;
      margin-left: -360px;
      top: 0;
      left: 50%;
  }
  
  
      /*////////////////////////////////////// */
    #header > .drawer-wrapper > .drawer {
      background-color: #ffffffe6;
      border-bottom-left-radius: 6px;
      border-bottom-right-radius: 6px;
      border-bottom: 1px solid var(--color1);
      border-left: 1px solid var(--color1);
      border-right: 1px solid var(--color1);
      margin-top: -1px;
      box-shadow: 0 0 10px #ccc;
      overflow: hidden;
      transition: height var(--fade), opacity var(--fade);
    }
    #header > .drawer-wrapper > .drawer > div {
      padding: 0.3em;
    }
    #header > .drawer-wrapper > .drawer > .status {
      display: flex;
    }
    #header > .drawer-wrapper > .drawer > .status > span {
      margin-right: 1em;
      padding-left: 0.2em;
      padding-right: 0.2em;
      border-radius: 0.4em;
    }
    #header > .drawer-wrapper > .drawer > .status > .pending.active.active {
      animation: 0.5s linear 0s infinite alternate pending-blink;
    }
    #header > .drawer-wrapper > .drawer > .status > .stale.active {
      background-color: hsl(var(--status-gray) / 0.9);
    }
    #header > .drawer-wrapper > .drawer > .status > .fault.active {
      background-color: hsl(var(--status-red) / 0.9);
    }
    #header > .drawer-wrapper > .drawer > .status > .queued.active {
      font-weight: 700;
    }
    #header > .drawer-wrapper > .drawer > .status > .actions {
      flex-grow: 1;
      text-align: right;
    }
    #header > .drawer-wrapper > .drawer > .staging .parameter {
      font-style: italic;
      max-width: 500px;
      text-overflow: ellipsis;
      display: inline-block;
      overflow: hidden;
      vertical-align: text-bottom;
    }
    #header > .drawer-wrapper > .drawer > .staging input {
      width: 100%;
      box-sizing: border-box;
      padding: 0.3em;
      margin-top: 0.3em;
      margin-bottom: 0.3em;
    }
    #header > .drawer-wrapper > .drawer > .staging .actions {
      text-align: right;
    }
    #header > .drawer-wrapper > .drawer > .queue {
      max-height: 400px;
      overflow-y: auto;
    }
    #header > .drawer-wrapper > .drawer > .queue > .pending {
      animation: 0.5s linear 0s infinite alternate pending-blink;
      border-radius: 0.4em;
    }
    #header > .drawer-wrapper > .drawer > .queue > .stale {
      background-color: hsl(var(--status-gray) / 0.9);
      border-radius: 0.4em;
    }
    #header > .drawer-wrapper > .drawer > .queue > .fault {
      background-color: hsl(var(--status-red) / 0.9);
      border-radius: 0.4em;
    }
    #header > .drawer-wrapper > .drawer > .queue .parameter {
      font-style: italic;
      max-width: 400px;
      text-overflow: ellipsis;
      display: inline-block;
      overflow: hidden;
      vertical-align: text-bottom;
    }
    #header > .drawer-wrapper > .drawer > .queue .value {
      max-width: 200px;
      text-overflow: ellipsis;
      display: inline-block;
      overflow: hidden;
      vertical-align: text-bottom;
      white-space: nowrap;
    }
    #header > .drawer-wrapper > .drawer > .queue > div {
      display: flex;
    }
    #header > .drawer-wrapper > .drawer > .queue > div > .actions {
      flex-grow: 1;
      text-align: right;
    }
    #header > .drawer-wrapper > .notifications-wrapper > .notification {
      padding: 0.3em;
      left: 0;
      right: 0;
      background-color: #ffffffe6;
      border: 1px solid var(--color1);
      border-radius: 6px;
      box-shadow: 0 0 10px #ccc;
      transition: opacity var(--fade), top var(--fade);
    }
    #header > .drawer-wrapper > .notifications-wrapper > .notification.error {
      background-color: hsl(var(--status-red) / 0.9);
      border: 1px solid hsl(var(--status-red));
    }
    #header > .drawer-wrapper > .notifications-wrapper > .notification.success {
      background-color: hsl(var(--status-green) / 0.9);
      border: 1px solid hsl(var(--status-green));
    }
    #header > .drawer-wrapper > .notifications-wrapper > .notification.warning {
      background-color: hsl(var(--status-yellow) / 0.9);
      border: 1px solid hsl(var(--status-yellow));
    }
    #header > nav {
      display: inline-block;
      overflow: visible;
      position: absolute;
      bottom: -1px;
    }
    #header > nav > ul {
      font-weight: 700;
      display: inline-block;
      margin: 0 10px;
      padding: 0;
    }
    #header > nav > ul > li {
      margin: 0 2px;
      background-color: var(--color1);
      display: inline-block;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      border-top: 1px solid var(--color1);
      border-left: 1px solid var(--color1);
      border-right: 1px solid var(--color1);
      transition: background-color var(--fade);
    }
    #header > nav > ul > li:is(.active, :hover) {
      background-color: #fff;
    }
    #header > nav > ul > li > :is(a, a:visited, a:hover) {
      display: inline-block;
      min-width: 140px;
      color: var(--color4);
      text-decoration: none;
      background: none;
      padding: 8px;
    }
    #header > .logo {
      display: inline-block;
      position: relative;
    }
    #header > .logo > img {
      margin: 10px;
      height: 56px;
      vertical-align: top;
    }
    #header > .logo > .version {
      
      bottom: 5px;
      right: 10px;
      font-family: monospace;
      font-size: 10px;
      color: #666;
    }
    #header > .user-menu {
      float: right;
      margin: 5px;
    }
    #side-menu {
      width: 200px;
      min-width: 200px;
    }
    #side-menu > ul {
      padding: 0;
      list-style: none;
    }
    #side-menu > ul > li > a {
      display: block;
      text-decoration: none;
      margin: 5px 0;
      padding: 8px;
      border-bottom-right-radius: 6px;
      border-top-right-radius: 6px;
      background-color: var(--color3);
    }
    #side-menu > ul > li > a:hover {
      background-color: var(--color4);
      color: var(--color3);
    }
    #side-menu > ul > li.active {
      font-weight: 700;
    }
    #content {
      flex-grow: 1;
      margin: 10px;
      min-height: 250px;
     width: 90%;
    }
#content h1{
      display: none;
    }

    div#content form {
      display: grid;
      justify-content: center;
  
    }
  
  
    
  /* Estilos do contêiner de login */
  .page-login {
    background: rgba(255, 255, 255, 0.9); /* Fundo branco com leve transparência */
    border-radius: 12px; /* Bordas mais arredondadas para um visual mais moderno */
    padding: 30px; /* Padding aumentado para mais espaço */
    width: 320px; /* Largura maior para o contêiner de login */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Sombra mais profunda */
    text-align: center; /* Centraliza o texto */
    backdrop-filter: blur(10px); /* Adiciona um efeito de desfoque ao fundo */
  }
  
  /* Estilos do formulário */
  form p {
    margin: 15px 0;
  }
  
  form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px; /* Tamanho da fonte menor para labels */
    color: #333; /* Cor mais escura para contraste */
  }
  
  form input {
    width: 100%;
    padding: 12px; /* Padding aumentado para inputs */
    border: 1px solid #ccc;
    border-radius: 8px; /* Bordas mais arredondadas */
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transição suave */
  }
  
  form input:focus {
    border-color: #007cf0; /* Cor da borda ao focar */
    box-shadow: 0 0 8px rgba(0, 124, 240, 0.3); /* Sombra ao focar */
  }
  
  /* Estilos do botão */
  form button.primary {
    background: linear-gradient(135deg, #007cf0, #00bfff); /* Gradiente moderno */
    color: white;
    border: none;
    padding: 12px 20px; /* Padding aumentado */
    border-radius: 8px; /* Bordas arredondadas para um visual moderno */
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    transition: background 0.3s ease, transform 0.3s ease; /* Transições suaves */
  }
  
  form button.primary:hover {
    background: linear-gradient(135deg, #0052d4, #00aaff); /* Gradiente escurecido ao passar o mouse */
    transform: scale(1.05); /* Efeito de leve ampliação */
  }
  
  /* Estilos do link de alteração de senha */
  .page-login a {
    color: #007cf0;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    display: block;
    margin-top: 10px; /* Espaçamento superior */
  }
  
  .page-login a:hover {
    text-decoration: underline;
    color: #0052d4; /* Cor ao passar o mouse */
  }
  
  
  
  
  
    #content:after {
      content: "";
      display: flex;
      justify-content: center;
      padding-bottom: 1px;
      align-items: center;
  
    }

    
    table.table {
        border-spacing: 0;
        width: 100%;
        max-width: 100%;
        margin: 20px 0;
        border-collapse: collapse;
        background-color: #ffffff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        font-family: 'Arial', sans-serif;
    }
    
    table.table th {
        white-space: nowrap;
        color: #333333;
        font-weight: 700;
        background-color: #f5f5f5;
        padding: 12px 15px;
        text-align: left;
        border-bottom: 2px solid #dddddd;
    }
    
    table.table td {
        padding: 12px 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #555555;
        border-bottom: 1px solid #eeeeee;
        transition: background-color 0.3s ease;
        font-size: 10px;
    }
    
    table.table tbody > tr:hover {
        background-color: #f0f8ff;
    }
    
    table.table td button {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
    }
    
    table.table td button:hover svg {
        fill: #007bff;
    }
    
    table.table td .icon-edit {
        width: 16px;
        height: 16px;
        fill: #888888;
        transition: fill 0.3s ease;
    }
    
    /* Responsividade */
    @media (max-width: 768px) {
        table.table th,
        table.table td {
            font-size: 14px;
            padding: 10px;
        }
    }
    
    h1, h2, h3 {
        font-family: 'Arial', sans-serif;
        font-weight: 700;
    }
    
    h1 {
        color: #333333;
        font-size: 24px;
        margin-bottom: 20px;
    }
    
    h2 {
        color: #242222;
        font-size: 20px;
        margin-bottom: 15px;
        background-color: #fff;
        height: 30px;
        padding: 5px;
        border-radius: 5px;
    }






    h3 {
        color: #777777;
        font-size: 18px;
        margin-bottom: 10px;
    }
    



    p.error {
      color: #a00;
    }
    input::-moz-focus-inner {
      border: 0;
      padding: 0;
    }
    input[type="button"],
    button {
      background: transparent;
      border: 0;
      color: var(--color4);
      border-radius: 4px;
      transition: background-color var(--fade), color var(--fade);
      display: inline-block;
      vertical-align: middle;
    }
    :is(input[type="button"], button).primary {
      border: 1px solid var(--color1);
      background-color: var(--color3);
    }
    :is(input[type="button"], button).critical {
      border: 1px solid var(--color1);
      background-color: #58387a;
      color: #f5f5f5;
    }
    :is(input[type="button"], button):hover:enabled {
      background-color: var(--color4);
      color: var(--color3);
    }
    :is(input[type="button"], button):disabled {
      
      cursor: not-allowed;
    }
    .CodeMirror,
    textarea,
    select,
    input {
      display: block;
      border: 1px solid var(--color1);
      background-color: var(--color3);
      border-radius: 4px;
      transition: border-color var(--fade), background-color var(--fade);
    }
    :is(.CodeMirror, textarea, select, input).error {
      background-color: #efcbcf;
      border-color: #e6b2b7;
    }
    :is(.CodeMirror, textarea, select, input):is(:focus, :hover) {
      border-color: var(--color4);
    }
    .filter {
      margin-bottom: 0.5em;
    }
    .filter > input {
      font-size: 90%;
      width: 35em;
      margin: 2px;
      padding: 2px;
    }
    .page-overview > h1 {
      text-align: center;
    }
    .overview-chart-group {
      display: flex;
      justify-content: center;
    }
    .overview-chart-group h2 {
      text-align: center;
    }
   







    table.parameter-list {
        width: 100%;
        border-collapse: collapse;
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        margin: 20px 0;
        font-family: 'Arial', sans-serif;
        height: 20px;
    }
    
    table.parameter-list th, 
    table.parameter-list td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid #eeeeee;
        color: #555555;
    }
    
    table.parameter-list th {
        background-color: #f5f5f5;
        color: #333333;
        font-weight: 700;
        width: 200px;
    }
    
    table.parameter-list td {
        display: flex;
        align-items: center;
    }
    
    table.parameter-list td .inform {
        display: flex;
        align-items: center;
        gap: 10px; /* Espaço entre os itens */
    }
    
    table.parameter-list td .overview-dot {
        display: flex;
        align-items: center;
        font-size: 0.9em;
        color: #31a354; /* Cor do texto "Online now" */
    }
    
    table.parameter-list td button.primary {
        background-color: #58387a;
        color: #ffffff;
        border: none;
        border-radius: 4px;
        padding: 5px 10px;
        cursor: pointer;
        font-size: 0.9em;
        margin-left: auto;
        transition: background-color 0.3s ease;
    }
    
    table.parameter-list td button.primary:hover {
        background-color: #0056b3;
    }
    
    table.parameter-list tr:last-child th, 
    table.parameter-list tr:last-child td {
        border-bottom: none; /* Remove a borda da última linha */
    }
    
    /* Responsividade */
    @media (max-width: 768px) {
        table.parameter-list th, 
        table.parameter-list td {
            font-size: 14px;
            padding: 10px;
        }
        
        table.parameter-list td button.primary {
            font-size: 0.8em;
            padding: 4px 8px;
        }
    }
    


















    table.table.highlight {
        width: 100%;
        border-collapse: collapse;
        background-color: #ffffff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin: 20px 0;
        font-family: 'Arial', sans-serif;
font-size: 8.5px;
    }
    
    table.table.highlight thead th {
        background-color: #6e3ba5;
        color: #ffffff;
        padding: 10px;
        text-align: left;
        font-weight: bold;
        border-bottom: 3px solid #0056b3;
    }
    
    table.table.highlight tbody tr {
        border-bottom: 1px solid #dddddd;
        transition: background-color 0.2s ease-in-out;
    }
    
    table.table.highlight tbody tr:hover {
        background-color: #f1f1f1;
    }
    
    table.table.highlight tbody td {
        padding: 10px;
        color: #333333;
    }
    
    table.table.highlight tbody td a {
        color: #007bff;
        text-decoration: none;
        font-weight: 600;
    }
    
    table.table.highlight tbody td a:hover {
        text-decoration: underline;
    }
    
    table.table.highlight tbody td .parameter-value {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    
    table.table.highlight tfoot td {
        padding: 10px;
        text-align: right;
        font-weight: bold;
        background-color: #f5f5f5;
    }
    
    table.table.highlight tfoot td a.download-csv {
      background: linear-gradient(135deg, #4B0082, #1D3F72);
        color: #ffffff;
        padding: 5px 10px;
        text-decoration: none;
        border-radius: 4px;
        transition: background-color 0.3s ease;
    }
    
    table.table.highlight tfoot td a.download-csv:hover {
        background-color: #0056b3;
    }
    
    /* Responsividade */
    @media (max-width: 768px) {
        table.table.highlight thead th,
        table.table.highlight tbody td,
        table.table.highlight tfoot td {
            padding: 8px;
            font-size: 14px;
        }
    
        table.table.highlight tfoot td a.download-csv {
            font-size: 0.9em;
            padding: 4px 8px;
        }
    }
    










    .tags > .tag {
        margin-right: 0.5em;
        width: 85px;
        height: 20px;
        color: #007bff;
    }
    .tags {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px; /* Espaçamento entre as tags */
        padding: 8px;
        background-color: #f1f3f5; /* Fundo claro para a área de tags */
        border-radius: 8px; /* Bordas arredondadas */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
    }
    
    .tag {
        display: flex;
        align-items: center;
        background-color: #007bff; /* Cor de fundo azul */
        color: #fff; /* Texto branco */
        padding: 4px 10px;
        border-radius: 16px; /* Bordas arredondadas das tags */
        font-size: 0.85em; /* Tamanho do texto ajustado */
        font-weight: 500; /* Peso da fonte */
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); /* Sombra suave */
        transition: background-color 0.3s ease, transform 0.3s ease; /* Transições suaves */
    }
    
    .tag.writable {
        background-color: #ffffff; /* Cor de fundo verde para tags editáveis */
        cursor: pointer; /* Cursor indicando que pode ser clicado */
    }
    
    .tag.writable:hover {
        background-color: #cdcdcd; /* Verde mais escuro no hover */
        transform: scale(1.03); /* Leve aumento de escala no hover */
    }
    
    .tag button {
        background: none; /* Remove o fundo do botão */
        border: none; /* Remove a borda do botão */
        cursor: pointer; /* Cursor indicando que pode ser clicado */
        margin-left: 6px; /* Espaço entre a tag e o botão */
        display: flex; /* Centraliza o ícone dentro do botão */
        align-items: center;
        justify-content: center;
    }
    
    .tag button svg.icon-add {
        fill: #fff; /* Cor do ícone branco */
        width: 0.9em; /* Tamanho menor do ícone */
        height: 0.9em;
        transition: fill 0.3s ease; /* Transição suave da cor do ícone */
    }
    
    .tag button:hover svg.icon-add {
        fill: #e9ecef; /* Cor do ícone ao passar o mouse */
    }
    span.tag {
        display: flex;
        background-color: #ffffff; /* Cor de fundo branca */
       mask-size: cover;
    }
    
































    .container-full-width {
        background-color: #f1f3f5; /* Fundo cinza claro */
        border-radius: 10px; /* Bordas arredondadas */
        padding: 20px; /* Espaçamento interno */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra suave */
        margin: 30px auto; /* Centraliza o container */
        max-width: 100%; /* Limita a largura */
    }
    
    .container-full-width h3 {
        font-size: 1.5em;
        color: #343a40; /* Texto escuro */
        margin-bottom: 20px; /* Espaçamento abaixo do título */
        border-bottom: 2px solid #007bff; /* Linha inferior azul */
        padding-bottom: 10px;
    }
    
    .all-parameters {
        
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    
    .all-parameters input[type="text"] {
        width: 80%; /* Ocupa toda a largura disponível */
        padding: 10px 15px;
        font-size: 1em;
        border: 2px solid #007bff;
        border-radius: 5px;
        outline: none;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    
    .all-parameters input[type="text"]:focus {
        border-color: #0056b3;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    }
    
    .all-parameters a.download-csv {
        background-color: #58387a;
        color: #fff;
        padding: 8px 12px;
        border-radius: 5px;
        text-decoration: none;
        font-weight: 600;
        transition: background-color 0.3s ease;
        margin-left: 20px; /* Espaço entre o botão e o campo de busca */
    }
    
    .all-parameters a.download-csv:hover {
        background-color: #0056b3; /* Azul mais escuro no hover */
    }
    
    .parameter-list {
        background-color: #fff;
        border-radius: 10px;
        padding: 15px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    .parameter-list table {
        width: 100%;
        border-spacing: 0;
    }
    
    .parameter-list td {
        padding: 10px;
        border-bottom: 1px solid #e9ecef; /* Linha de separação */
    }
    
    .parameter-list td.left {
        text-align: left;
        font-weight: 500;
        color: #495057;
    }
    
    .parameter-list td.right {
        text-align: right;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    
    .parameter-list button {
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 5px;
        transition: transform 0.2s ease;
    }
    
    .parameter-list button:hover {
        transform: scale(1.1);
    }
    
    .parameter-list svg.icon-refresh {
        fill: #007bff;
        width: 1.2em;
        height: 1.2em;
    }
    
    .parameter-list m {
        display: block;
        margin-top: 10px;
        color: #868e96; /* Texto cinza claro */
        font-size: 0.9em;
    }
    
























    .filter {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 10px auto; /* Centraliza e adiciona mais espaçamento */
        padding: 15px; /* Aumenta o padding para um visual mais espaçoso */
       /* Fundo claro */
      
    }
    
    .filter:hover {
        transform: scale(1.02); /* Leve aumento ao passar o mouse */
    }
    
    .filter b {
        font-size: 1.4em; /* Aumenta o tamanho do texto */
        color: #f8f9fa;
        margin-bottom: 15px; /* Mais espaço abaixo do título */
        letter-spacing: 1px; /* Espaçamento entre letras para um toque moderno */
    }
    
    
    .filter input[type="text"] {
        width: 80%;
        padding: 15px 20px; /* Padding maior para um visual mais clean */
        font-size: 1.1em; /* Tamanho da fonte maior */
        border: 2px solid #007bff; /* Borda azul */
        border-radius: 10px; /* Bordas mais arredondadas */
        outline: none; /* Remove a borda ao focar */
        background-color: #f8f9fa; 
        transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transições suaves */
    }
    
    .filter input[type="text"]:focus {
        border-color: #0056b3; /* Cor da borda ao focar */
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); /* Leve brilho ao focar */
    }
    
    @media (max-width: 600px) {
        .filter {
            max-width: 95%; /* Ajusta a largura em telas menores */
            padding: 20px; /* Padding adaptado */
        }
        
        .filter b {
            font-size: 1.2em;
        }
        
        .filter input[type="text"] {
            font-size: 1em;
        }
    }
    
















    .overview-dot > svg {
      margin-bottom: -0.125em;
      margin-left: 0.2em;
      margin-right: 0.2em;
    }
    .overview-dot > svg > circle {
      stroke: var(--color5);
      stroke-width: 0.08em;
    }
    span.inform > * {
      margin-right: 0.5em;
    }
    .pie-chart {
      margin: 20px;
      text-align: center;
    }
    .pie-chart > svg > path {
      stroke: var(--color1);
      stroke-width: 1px;
    }
    .pie-chart > svg > a {
      transition: opacity var(--fade);
      opacity: 0;
    }
    .pie-chart > svg > a > text {
      font-weight: 700;
      opacity: 0.4;
    }
    .pie-chart > svg > a > path {
      stroke: var(--color4);
    }
    .pie-chart > svg > a:hover {
      opacity: 1;
    }
    .pie-chart > .legend {
      text-align: left;
      margin: 15px;
    }
    .pie-chart > .legend > .legend-line > .color {
      height: 12px;
      width: 12px;
      margin-right: 5px;
      border: 1px solid var(--color1);
      display: inline-block;
    }
    span.na {
     color: #ffffff;
    }
    .all-parameters > input {
      font-family: monospace;
      font-size: 14px;
      margin-bottom: 2px;
      padding: 4px;
      width: 700px;
    }
    .all-parameters > .parameter-list {
      font-family: monospace;
      font-size: 14px;
      overflow-y: scroll;
      height: 200px;
    }
    .all-parameters > .parameter-list button {
      font-size: 16px;
    }
    .all-parameters > .parameter-list > table {
      width: 100%;
      table-layout: fixed;
      border-spacing: 0;
    }
    .all-parameters > .parameter-list > table > tbody > tr {
      transition: background-color var(--fade);
    }
    .all-parameters > .parameter-list > table > tbody > tr > td {
      overflow: hidden;
      white-space: nowrap;
      border-bottom: 1px dotted var(--color1);
    }
    .all-parameters > .parameter-list > table > tbody > tr:hover {
      background-color: var(--color3);
    }
    .all-parameters > .parameter-list > table > tbody > tr > td.left > * {
      max-width: 100%;
    }
    .all-parameters > .parameter-list > table > tbody > tr > td.right {
      text-align: right;
      padding-right: 0.5em;
    }
    .container-right {
      float: right;
      clear: right;
    }
    .container-full-width {
      clear: both;
    }
    .actions-bar {
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .actions-bar > button {
      margin-right: 10px;
    }
    span.tag {
      display: inline-block;
      background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="190" height="16"><path d="M6.59 15.42l-6-6a2 2 0 0 1 0-2.83l6-6A2 2 0 0 1 8 0h180a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H8a2 2 0 0 1-1.41-.58zM4.35 6.59A2 2 0 1 0 7.17 9.4 2 2 0 0 0 4.35 6.6z" fill="%23e8d5b2"></path></svg>');
      background-size: cover;
      background-repeat: no-repeat;
      border-radius: 0.2em;
      padding-left: 1em;
      padding-right: 0.2em;
    }
    .tags > .tag {
      margin-right: 0.5em;
    }
    .overlay-wrapper {
      position: fixed;
      inset: 0;
      background-color: #0003;
      z-index: 100;
      transition: opacity var(--fade), top var(--fade);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .overlay-wrapper > .overlay {
      max-width: 90vw;
      max-height: 90vh;
      background-color: #fff;
      border: 1px solid var(--color1);
      border-radius: 10px;
      padding: 10px;
      box-shadow: 0 0 15px #aaa;
      overflow: auto;
    }
    .overlay > .put-form {
      min-width: 700px;
    }
    .autocomplete {
      box-shadow: 0 0 10px #ccc;
      background-color: #ffffffe6;
      border: 1px solid var(--color1);
      border-radius: 4px;
      max-height: 300px;
      overflow-y: auto;
      transition: opacity var(--fade);
    }
    .autocomplete > .suggestion {
      padding: 5px;
    }
    .autocomplete > .suggestion:is(.selected, :hover) {
      background-color: var(--color3);
    }
    span.long-text {
      display: inline-block;
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
      vertical-align: top;
    }
    span.long-text-overflowed {
      cursor: pointer;
    }
    span.long-text-overflowed:hover {
      text-decoration: underline;
      text-decoration-style: dotted;
    }
    textarea.long-text {
      font-family: monospace;
      font-size: 14px;
      min-width: 10vw;
      min-height: 10vh;
    }
    span.parameter-value > span:empty:before {
      content: "blank";
      color: #aaa;
    }
    .wizard-dialog {
      max-width: 720px;
      margin: 10px auto;
      padding: 10px;
      border-radius: 6px;
      border: 1px solid var(--color1);
      box-shadow: 0 0 10px #ccc;
    }
    .icon {
      display: block;
      width: 1em;
      height: 1em;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .icon.icon-unsorted {
      opacity: 0.3;
    }
    .loading {
      opacity: 0.6;
    }
    @keyframes spin {
      0% {
        transform: rotate(0);
      }
      to {
        transform: rotate(360deg);
      }
    }
    .loading-overlay {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .loading-overlay:after {
      background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+PHBhdGggZD0iTTEwIDUwYTQwIDQwIDAgMDA4MCAwIDQwIDQyIDAgMDEtODAgMCIgZmlsbD0iI2IxMmQ1YyIgLz48L3N2Zz4=);
      content: "";
      width: 48px;
      height: 48px;
      animation: spin 1s linear infinite;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .progress {
      background-color: #eee;
      overflow: hidden;
      height: 3px;
    }
    .progress > .progress-bar {
      height: 100%;
      background-color: #b12d5c;
    }
    td,
    th {
      line-height: normal;
    }
  












































    

/* Estilo base para o campo de busca com a classe .all-parameters */
.all-parameters input[type="text"] {
  width: 100%; /* Ocupa toda a largura disponível */
  max-width: 1100px; /* Define uma largura máxima para não ficar muito largo */
  padding: 10px 15px; /* Espaçamento interno */
  border-radius: 8px; /* Bordas arredondadas */
  border: 1px solid #cccccc; /* Borda cinza clara */
  background: #ffffff; /* Fundo branco */
  color: #333333; /* Cor do texto */
  font-size: 16px; /* Tamanho da fonte */
  font-family: 'Arial', sans-serif; /* Fonte moderna e limpa */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
  transition: all 0.3s ease; /* Transição suave para todos os estados */
}

/* Estilo para o placeholder dentro da classe .all-parameters */
.all-parameters input[type="text"]::placeholder {
  color: #999999; /* Cor do texto do placeholder */
  opacity: 1; /* Garante que a opacidade do placeholder é total */
}

/* Efeito de foco no campo de busca dentro da classe .all-parameters */
.all-parameters input[type="text"]:focus {
  border-color: #007cf0; /* Cor da borda ao focar */
  outline: none; /* Remove o contorno padrão do navegador */
  box-shadow: 0 0 8px rgba(0, 124, 240, 0.5); /* Sombra de destaque azul */
  background: #f0f8ff; /* Fundo claro azul ao focar */
}

/* Efeito de hover no campo de busca dentro da classe .all-parameters */
.all-parameters input[type="text"]:hover {
  border-color: #00bfff; /* Cor da borda ao passar o mouse */
  background: #f9f9f9; /* Fundo ligeiramente alterado ao passar o mouse */
}




/* Estilização geral do conteúdo */
#content.page-presets {
  padding: 20px;
  background-color: #f4f7f6; /* Cinza claro */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.page-presets h1 {
  color: #333; /* Cor do texto */
  font-size: 24px;
  margin-bottom: 20px;
}

/* Estilo para o campo de filtro */


/* Estilização da tabela */
.page-presets .table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff; /* Fundo branco para a tabela */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-presets .table th, 
.page-presets .table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e1e5eb; /* Cor da borda da tabela */
}

.page-presets .table th {
  background-color: #ffffff; /* Fundo branco para cabeçalhos */
  color: #333; /* Cor do texto */
}

.page-presets .table tr:nth-child(even) {
  background-color: #f9f9f9; /* Fundo cinza claro para linhas pares */
}

.page-presets .table tr:hover {
  background-color: #f1f1f1; /* Fundo cinza mais claro para hover */
}

/* Estilo para botões */
.page-presets .actions-bar .primary {
  background-color: #007cf0; /* Azul vibrante para botões */
  color: #ffffff; /* Texto branco para botões */
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.page-presets .actions-bar .primary:hover {
  background-color: #005bb5; /* Azul mais escuro para hover em botões */
}

.page-presets .actions-bar .primary:disabled {
  background-color: #e1e5eb; /* Cor de fundo para botões desativados */
  color: #999; /* Cor do texto para botões desativados */
  cursor: not-allowed;
}

/* Estilo para links na tabela */
.page-presets .table-row-links a {
  color: #007cf0; /* Azul vibrante para links */
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.page-presets .table-row-links a:hover {
  color: #005bb5; /* Azul mais escuro para hover em links */
}

/* Estilo para o botão de download */
.page-presets .download-csv {
  display: inline-block;
  padding: 10px 15px;
  border-radius: 8px;
  background-color: #007cf0; /* Azul vibrante */
  color: #ffffff; /* Texto branco */
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.page-presets .download-csv:hover {
  background-color: #005bb5; /* Azul mais escuro para hover no botão de download */
}


/* Estilização geral do conteúdo */
#content.page-provisions {
  padding: 20px;
  background-color: #f4f7f6; /* Cinza claro */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.page-provisions h1 {
  color: #333; /* Cor do texto */
  font-size: 24px;
  margin-bottom: 20px;
}

/* Estilo para o campo de filtro */


/* Estilização da tabela */
.page-provisions .table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff; /* Fundo branco para a tabela */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-provisions .table th, 
.page-provisions .table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e1e5eb; /* Cor da borda da tabela */
}

.page-provisions .table th {
  background-color: #ffffff; /* Fundo branco para cabeçalhos */
  color: #333; /* Cor do texto */
}

.page-provisions .table tr:nth-child(even) {
  background-color: #f9f9f9; /* Fundo cinza claro para linhas pares */
}

.page-provisions .table tr:hover {
  background-color: #f1f1f1; /* Fundo cinza mais claro para hover */
}

/* Estilo para botões */
.page-provisions .actions-bar .primary {
  background-color: #007cf0; /* Azul vibrante para botões */
  color: #ffffff; /* Texto branco para botões */
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.page-provisions .actions-bar .primary:hover {
  background-color: #005bb5; /* Azul mais escuro para hover em botões */
}

.page-provisions .actions-bar .primary:disabled {
  background-color: #e1e5eb; /* Cor de fundo para botões desativados */
  color: #999; /* Cor do texto para botões desativados */
  cursor: not-allowed;
}

/* Estilo para links na tabela */
.page-provisions .table-row-links a {
  color: #007cf0; /* Azul vibrante para links */
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.page-provisions .table-row-links a:hover {
  color: #005bb5; /* Azul mais escuro para hover em links */
}

/* Estilo para o botão de download */
.page-provisions .download-csv {
  display: inline-block;
  padding: 10px 15px;
  border-radius: 8px;
  background-color: #007cf0; /* Azul vibrante */
  color: #ffffff; /* Texto branco */
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.page-provisions .download-csv:hover {
  background-color: #005bb5; /* Azul mais escuro para hover no botão de download */
}



/* Estilização geral do conteúdo */
#content.page-virtualParameters {
  padding: 20px;
  background-color: #f4f7f6; /* Cinza claro */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.page-virtualParameters h1 {
  color: #333; /* Cor do texto */
  font-size: 24px;
  margin-bottom: 20px;
}

/* Estilo para o campo de filtro */

/* Estilização da tabela */
.page-virtualParameters .table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff; /* Fundo branco para a tabela */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-virtualParameters .table th, 
.page-virtualParameters .table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e1e5eb; /* Cor da borda da tabela */
}

.page-virtualParameters .table th {
  background-color: #ffffff; /* Fundo branco para cabeçalhos */
  color: #333; /* Cor do texto */
}

.page-virtualParameters .table tr:nth-child(even) {
  background-color: #f9f9f9; /* Fundo cinza claro para linhas pares */
}

.page-virtualParameters .table tr:hover {
  background-color: #f1f1f1; /* Fundo cinza mais claro para hover */
}

/* Estilo para células de tabelas vazias */
.page-virtualParameters .table .empty {
  text-align: center;
  color: #999; /* Cor do texto para células vazias */
  font-style: italic;
}

/* Estilo para botões */
.page-virtualParameters .actions-bar .primary {
  background-color: #007cf0; /* Azul vibrante para botões */
  color: #ffffff; /* Texto branco para botões */
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.page-virtualParameters .actions-bar .primary:hover {
  background-color: #005bb5; /* Azul mais escuro para hover em botões */
}

.page-virtualParameters .actions-bar .primary:disabled {
  background-color: #e1e5eb; /* Cor de fundo para botões desativados */
  color: #999; /* Cor do texto para botões desativados */
  cursor: not-allowed;
}

/* Estilo para links na tabela */
.page-virtualParameters .table-row-links a {
  color: #007cf0; /* Azul vibrante para links */
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.page-virtualParameters .table-row-links a:hover {
  color: #005bb5; /* Azul mais escuro para hover em links */
}

/* Estilo para o botão de download */
.page-virtualParameters .download-csv {
  display: inline-block;
  padding: 10px 15px;
  border-radius: 8px;
  background-color: #007cf0; /* Azul vibrante */
  color: #ffffff; /* Texto branco */
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.page-virtualParameters .download-csv:hover {
  background-color: #005bb5; /* Azul mais escuro para hover no botão de download */
}


/* Estilização geral do conteúdo */
#content.page-files {
  padding: 20px;
  background-color: #f4f7f6; /* Cinza claro */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.page-files h1 {
  color: #333; /* Cor do texto */
  font-size: 24px;
  margin-bottom: 20px;
}

/* Estilo para o campo de filtro */


/* Estilização da tabela */
.page-files .table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff; /* Fundo branco para a tabela */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-files .table th, 
.page-files .table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e1e5eb; /* Cor da borda da tabela */
}

.page-files .table th {
  background-color: #ffffff; /* Fundo branco para cabeçalhos */
  color: #333; /* Cor do texto */
}

.page-files .table tr:nth-child(even) {
  background-color: #f9f9f9; /* Fundo cinza claro para linhas pares */
}

.page-files .table tr:hover {
  background-color: #f1f1f1; /* Fundo cinza mais claro para hover */
}

/* Estilo para células de tabelas vazias */
.page-files .table .empty {
  text-align: center;
  color: #999; /* Cor do texto para células vazias */
  font-style: italic;
}

/* Estilo para botões */
.page-files .actions-bar .primary {
  background-color: #007cf0; /* Azul vibrante para botões */
  color: #ffffff; /* Texto branco para botões */
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.page-files .actions-bar .primary:hover {
  background-color: #005bb5; /* Azul mais escuro para hover em botões */
}

.page-files .actions-bar .primary:disabled {
  background-color: #e1e5eb; /* Cor de fundo para botões desativados */
  color: #999; /* Cor do texto para botões desativados */
  cursor: not-allowed;
}

/* Estilo para links na tabela */
.page-files .table-row-links a {
  color: #007cf0; /* Azul vibrante para links */
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.page-files .table-row-links a:hover {
  color: #005bb5; /* Azul mais escuro para hover em links */
}

/* Estilo para o botão de download */
.page-files .download-csv {
  display: inline-block;
  padding: 10px 15px;
  border-radius: 8px;
  background-color: #007cf0; /* Azul vibrante */
  color: #ffffff; /* Texto branco */
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.page-files .download-csv:hover {
  background-color: #005bb5; /* Azul mais escuro para hover no botão de download */
}


/* Estilização geral do conteúdo */
#content.page-permissions {
  padding: 20px;
  background-color: #f4f7f6; /* Cinza claro */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.page-permissions h1 {
  color: #333; /* Cor do texto */
  font-size: 24px;
  margin-bottom: 20px;
}

/* Estilo para o campo de filtro */


/* Estilização da tabela */
.page-permissions .table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff; /* Fundo branco para a tabela */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-permissions .table th, 
.page-permissions .table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e1e5eb; /* Cor da borda da tabela */
}

.page-permissions .table th {
  background-color: #ffffff; /* Fundo branco para cabeçalhos */
  color: #333; /* Cor do texto */
}

.page-permissions .table tr:nth-child(even) {
  background-color: #f9f9f9; /* Fundo cinza claro para linhas pares */
}

.page-permissions .table tr:hover {
  background-color: #f1f1f1; /* Fundo cinza mais claro para hover */
}

/* Estilo para células de tabelas vazias */
.page-permissions .table .empty {
  text-align: center;
  color: #999; /* Cor do texto para células vazias */
  font-style: italic;
}

/* Estilo para botões */
.page-permissions .actions-bar .primary {
  background-color: #007cf0; /* Azul vibrante para botões */
  color: #ffffff; /* Texto branco para botões */
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.page-permissions .actions-bar .primary:hover {
  background-color: #005bb5; /* Azul mais escuro para hover em botões */
}

.page-permissions .actions-bar .primary:disabled {
  background-color: #e1e5eb; /* Cor de fundo para botões desativados */
  color: #999; /* Cor do texto para botões desativados */
  cursor: not-allowed;
}

/* Estilo para links na tabela */
.page-permissions .table-row-links a {
  color: #007cf0; /* Azul vibrante para links */
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.page-permissions .table-row-links a:hover {
  color: #005bb5; /* Azul mais escuro para hover em links */
}

/* Estilo para o botão de download */
.page-permissions .download-csv {
  display: inline-block;
  padding: 10px 15px;
  border-radius: 8px;
  background-color: #007cf0; /* Azul vibrante */
  color: #ffffff; /* Texto branco */
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.page-permissions .download-csv:hover {
  background-color: #005bb5; /* Azul mais escuro para hover no botão de download */
}


/* Estilização geral do conteúdo */
#content.page-users {
  padding: 20px;
  background-color: #f4f7f6; /* Cinza claro */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.page-users h1 {
  color: #333; /* Cor do texto */
  font-size: 24px;
  margin-bottom: 20px;
}



/* Estilização da tabela */
.page-users .table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff; /* Fundo branco para a tabela */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-users .table th, 
.page-users .table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e1e5eb; /* Cor da borda da tabela */
}

.page-users .table th {
  background-color: #ffffff; /* Fundo branco para cabeçalhos */
  color: #333; /* Cor do texto */
}

.page-users .table tr:nth-child(even) {
  background-color: #f9f9f9; /* Fundo cinza claro para linhas pares */
}

.page-users .table tr:hover {
  background-color: #f1f1f1; /* Fundo cinza mais claro para hover */
}

/* Estilo para células de tabelas vazias */
.page-users .table .empty {
  text-align: center;
  color: #999; /* Cor do texto para células vazias */
  font-style: italic;
}

/* Estilo para botões */
.page-users .actions-bar .primary {
  background-color: #007cf0; /* Azul vibrante para botões */
  color: #ffffff; /* Texto branco para botões */
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.page-users .actions-bar .primary:hover {
  background-color: #005bb5; /* Azul mais escuro para hover em botões */
}

.page-users .actions-bar .primary:disabled {
  background-color: #e1e5eb; /* Cor de fundo para botões desativados */
  color: #999; /* Cor do texto para botões desativados */
  cursor: not-allowed;
}

/* Estilo para links na tabela */
.page-users .table-row-links a {
  color: #007cf0; /* Azul vibrante para links */
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.page-users .table-row-links a:hover {
  color: #005bb5; /* Azul mais escuro para hover em links */
}

/* Estilo para o botão de download */
.page-users .download-csv {
  display: inline-block;
  padding: 10px 15px;
  border-radius: 8px;
  background-color: #007cf0; /* Azul vibrante */
  color: #ffffff; /* Texto branco */
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.page-users .download-csv:hover {
  background-color: #005bb5; /* Azul mais escuro para hover no botão de download */
}


/* Estilo geral da página */
#content.page-faults {
  padding: 20px;
  background-color: #f9f9f9; /* Fundo claro para a área de conteúdo */
  font-family: 'Arial', sans-serif;
}

#content.page-faults h1 {
  color: #333; /* Cor do título */
  font-size: 24px;
  margin-bottom: 20px;
}


.table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff; /* Fundo branco para a tabela */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra para destacar a tabela */
}

.table th,
.table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #e1e5eb;
}

.table th {
  background-color: #f4f4f4;
  font-weight: bold;
  color: #666;
}

.table thead th button {
  background: none;
  border: none;
  cursor: pointer;
}

.table thead th button svg {
  fill: #007cf0; /* Cor do ícone de ordenação */
  width: 16px;
  height: 16px;
  transition: fill 0.3s ease;
}

.table thead th button:hover svg {
  fill: #005bb5; /* Cor do ícone de ordenação ao passar o mouse */
}

.table tbody tr:hover {
  background-color: #f9f9f9; /* Cor de fundo para linhas ao passar o mouse */
}

.table tbody tr.empty td {
  text-align: center;
  color: #999;
}

.table tfoot {
  background-color: #f4f4f4;
}

.table tfoot td {
  padding: 12px;
  text-align: left;
  border-top: 1px solid #e1e5eb;
}

.actions-bar {
  margin-top: 20px;
}

.actions-bar button.primary {
  background-color: #007cf0;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.actions-bar button.primary:disabled {
  background-color: #b3b3b3;
  cursor: not-allowed;
}

.actions-bar button.primary:hover:not(:disabled) {
  background-color: #005bb5;
}

.download-csv {
  color: #007cf0;
  text-decoration: none;
  padding: 8px;
  border: 1px solid #007cf0;
  border-radius: 4px;
  font-size: 14px;
  display: inline-block;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.download-csv:hover {
  background-color: #007cf0;
  color: #fff;
}





















/* Estilos gerais para a lista de parâmetros */
.parameter-list {
  height: 500px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.95); /* Fundo branco com leve transparência */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 5px;
  margin: 20px auto;
}

/* Estilos para a tabela */
.parameter-list table {
  width: 100%;
  border-collapse: collapse;
}

.parameter-list th, .parameter-list td {
  padding: 4px 4px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.parameter-list th {
  background-color: var(--color3-start); /* Cor de fundo para o cabeçalho */
  color: #ffffff;
  font-size: 1rem;
}

.parameter-list td {
  font-size: 0.875rem;
}

.parameter-list tr:hover {
  background-color: #f5f5f5; /* Cor de fundo ao passar o mouse */
}

/* Estilos para as células da tabela */
.parameter-list .left {
  color: var(--color5); /* Cor do texto da coluna esquerda */
}

.parameter-list .right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.parameter-list .right span {
  margin-right: 10px;
  color: var(--color4);
}

.parameter-list .right button {
  background-color: var(--color3-start); /* Cor do botão */
  border: none;
  border-radius: 4px;
  color: #ffffff;
  cursor: pointer;
  padding: 8px 12px;
  margin-left: 5px;
  transition: background-color 0.3s, transform 0.2s;
}

.parameter-list .right button:hover {
  background-color: #007acc; /* Cor do botão ao passar o mouse */
  transform: translateY(-2px); /* Efeito de elevação ao passar o mouse */
}

.parameter-list .right svg {
  fill: #ffffff;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

/* Estilos para o texto longo */
.long-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px; /* Ajuste o tamanho máximo conforme necessário */
  font-weight: bold;
  color: var(--color4);
}












/* Estilos para o menu do usuário */
/* Estilos para o menu do usuário */
.user-menu {
  display: flex;
  align-items: center;
  background: #ffffff; /* Fundo branco */
  color: #58387a; /* Texto em azul escuro para contraste */
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
  font-family: 'Arial', sans-serif; /* Fonte moderna e limpa */
  position: relative;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.user-menu:hover {
  background-color: #f1f1f1; /* Fundo claro ao passar o mouse */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Sombra mais intensa ao passar o mouse */
}

.user-menu .username {
  font-weight: bold;
  font-size: 1rem;
  color: #00cfff; /* Cor do texto em azul escuro */
  margin-right: auto; /* Empurra o botão para a direita */
}

.user-menu button {
  background: linear-gradient(135deg, #4B0082, #1D3F72 ); /* Cor vibrante para o botão de logout */
  border: none;
  border-radius: 5px;
  color: #ffffff; /* Texto do botão em branco */
  padding: 8px 12px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  margin-left: 25px;
}

.user-menu button:hover {
  background-color: #e03e4b; /* Cor mais escura para o botão ao passar o mouse */
  transform: scale(1.05); /* Efeito de escala ao passar o mouse */
}
/* Garantir que o botão não herde estilos indesejados */
.user-menu button:focus,
.user-menu button:active {
  outline: none; /* Remove o contorno padrão do botão */
  background-color: #e03e4b !important; /* Garantir a cor correta no foco e ativação */
}


/* Estilo geral do menu lateral */
#side-menu {
  width: 250px;
  background: #ffffff; /* Fundo branco para o menu lateral */
  padding: 20px;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1); /* Sombra sutil ao redor do menu lateral */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fonte moderna e limpa */
}

#side-menu > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#side-menu > ul > li {
  margin: 0;
}

#side-menu > ul > li > a {
  display: block;
  text-decoration: none;
  color: #007cf0; /* Cor do texto do menu */
  padding: 12px 16px; /* Espaçamento mais generoso */
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
  background: linear-gradient(135deg, #ffffff, #e6f0ff); /* Gradiente branco puxado para o azul */
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; /* Transições suaves para hover */
}

#side-menu > ul > li > a:hover {
  background: linear-gradient(135deg, #e6f0ff, #cce0ff); /* Gradiente invertido ao passar o mouse */
  color: #004b9e; /* Cor do texto ao passar o mouse */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Sombra mais pronunciada ao passar o mouse */
  transform: translateX(5px); /* Pequeno deslocamento para a direita ao passar o mouse */
}

/* Adiciona um efeito adicional para o item ativo */
#side-menu > ul > li.active > a {
  background: linear-gradient(135deg, #cce0ff, #99c2ff); /* Gradiente para o item ativo */
  color: #003a75; /* Cor do texto do item ativo */
  font-weight: bold; /* Deixa o texto em negrito */
}

#header > .logo > img {
    margin-top: -30px;
    height: 150px;
    vertical-align: top;
    width: 90px;
}