@font-face {
  font-family: 'Cocogoose';
  src: url('../vendor/fonts/Cocogoose.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* remove bullet */
.menu-sub .menu-link::before { display: none !important; }

/* alinhar à esquerda e controlar espaçamento */
.menu-sub .menu-link {
  padding-left: 1.2rem !important;
  display: flex;
  align-items: center;
  gap: 0.5rem; 
}
/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.menu .app-brand.demo {
  height: 64px;
}

.app-brand-logo.demo svg {  
  height: 32px;
}

.app-brand-text.demo {
  font-size: 1.25rem;
  letter-spacing: 0.15px;
}

.authentication-wrapper .app-brand-text.demo {
  text-transform: capitalize;
}

/* ! For .layout-navbar-fixed added fix padding top to .layout-page */
/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1.25rem !important;
  margin-bottom: 0 !important;
}

/* Traceroute row update highlight (primary) */
@keyframes df-row-flash-primary {
  0% {
    background-color: rgba(var(--bs-primary-rgb), 0.25);
  }
  100% {
    background-color: transparent;
  }
}

.df-row-flash {
  animation: df-row-flash-primary 800ms ease-out;
}

/* DNS Analysis: prevent traceroute table column jitter while streaming updates */
#df-dns-traceroute-modal table {
  table-layout: fixed;
}

#df-dns-traceroute-modal th:nth-child(1),
#df-dns-traceroute-modal td:nth-child(1) {
  width: 52px;
}

/* Hop (flex column) */
#df-dns-traceroute-modal th:nth-child(2),
#df-dns-traceroute-modal td:nth-child(2) {
  width: auto;
}

#df-dns-traceroute-modal th:nth-child(3),
#df-dns-traceroute-modal td:nth-child(3),
#df-dns-traceroute-modal th:nth-child(4),
#df-dns-traceroute-modal td:nth-child(4),
#df-dns-traceroute-modal th:nth-child(5),
#df-dns-traceroute-modal td:nth-child(5),
#df-dns-traceroute-modal th:nth-child(6),
#df-dns-traceroute-modal td:nth-child(6),
#df-dns-traceroute-modal th:nth-child(7),
#df-dns-traceroute-modal td:nth-child(7),
#df-dns-traceroute-modal th:nth-child(8),
#df-dns-traceroute-modal td:nth-child(8) {
  width: 78px;
}

#df-dns-traceroute-modal td:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

/* Shared utility */
.cursor-pointer { cursor: pointer; }

/* Demo Files - Connections traffic bar */
.df-trafbar {
  width: 80px;
  height: 12px;
  border-radius: 4px;
  overflow: hidden;
  background: color-mix(in sRGB, var(--bs-paper-bg) 75%, var(--bs-border-color));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.df-trafbar-fill {
  height: 100%;
  border-radius: 6px;
  width: 100%;
  /* background: linear-gradient(90deg, rgb(255, 253, 125) 0%, rgb(255, 237, 43) 25%, rgb(255, 120, 17) 50%, rgb(247, 74, 0) 75%, rgb(172, 34, 0) 100%); */
  background: linear-gradient(90deg,rgba(255, 189, 89, 1) 0%, rgba(255, 0, 77, 1) 100%);
  opacity: 0.95;
}
html[data-bs-theme="dark"] .df-trafbar {
  background: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* RR label badges: improve contrast in dark theme */
html[data-bs-theme="dark"] .badge[class*="bg-label-"] {
  color: rgba(255, 255, 255, 0.92) !important;
  filter: saturate(1.15) brightness(1.15);
}

/* DataTables horizontal scrollbar (Connections table) */
#df-table .dt-scroll-body,
#df-table .dataTables_scrollBody {
  scrollbar-color: var(--bs-primary) rgba(0, 0, 0, 0.08);
  scrollbar-width: auto;
}
html[data-bs-theme="dark"] #df-table .dt-scroll-body,
html[data-bs-theme="dark"] #df-table .dataTables_scrollBody {
  scrollbar-color: var(--bs-primary) rgba(255, 255, 255, 0.12);
}
 
#df-table .dt-scroll-body::-webkit-scrollbar-track,
#df-table .dataTables_scrollBody::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
}
html[data-bs-theme="dark"] #df-table .dt-scroll-body::-webkit-scrollbar-track,
html[data-bs-theme="dark"] #df-table .dataTables_scrollBody::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.12);
}
#df-table .dt-scroll-body::-webkit-scrollbar-thumb,
#df-table .dataTables_scrollBody::-webkit-scrollbar-thumb {
  background: var(--bs-primary);
  border-radius: 999px;
}
#df-table .dt-scroll-body::-webkit-scrollbar-thumb:hover,
#df-table .dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--bs-primary) 85%, #000);
}
html[data-bs-theme="dark"] #df-table .dt-scroll-body::-webkit-scrollbar-thumb:hover,
html[data-bs-theme="dark"] #df-table .dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--bs-primary) 85%, #fff);
}

/* Star palettes (severity/minis) */
.star-rating, .star-small, .star-mini {
  cursor: pointer;
  opacity: 0.5;
  color: #ced4da;
}
.star-rating.active, .star-small.active, .star-mini.active { opacity: 1; }
.star-small { font-size: 1rem; }
.star-mini { font-size: 0.9rem; }
.star-rating.active.star-color-1,
.star-small.active.star-color-1,
.star-mini.active.star-color-1,
.fs-mini-stars i.active.fs-star-1,
.fs-severity-stars i.active.fs-star-1 { color: #EF9A9A; }
.star-rating.active.star-color-2,
.star-small.active.star-color-2,
.star-mini.active.star-color-2,
.fs-mini-stars i.active.fs-star-2,
.fs-severity-stars i.active.fs-star-2 { color: #EF5350; }
.star-rating.active.star-color-3,
.star-small.active.star-color-3,
.star-mini.active.star-color-3,
.fs-mini-stars i.active.fs-star-3,
.fs-severity-stars i.active.fs-star-3 { color: #F44336; }
.star-rating.active.star-color-4,
.star-small.active.star-color-4,
.star-mini.active.star-color-4,
.fs-mini-stars i.active.fs-star-4,
.fs-severity-stars i.active.fs-star-4 { color: #D32F2F; }
.star-rating.active.star-color-5,
.star-small.active.star-color-5,
.star-mini.active.star-color-5,
.fs-mini-stars i.active.fs-star-5,
.fs-severity-stars i.active.fs-star-5 { color: #B71C1C; }
.fs-mini-stars .fs-inactive,
.fs-severity-stars .fs-inactive { color: rgba(154, 155, 156, 0.2); }
.fs-mini-stars { font-size: 0.95rem; }
.fs-mini-stars i { font-size: inherit; }
.fs-severity-stars { font-size: 1.1rem; cursor: pointer; }
.fs-severity-stars i { color: #d1d5db; font-size: inherit; }

/* Tagify within input-group */
.tagify { width: 100%; }
.fs-tagify + .tagify { width: 100%; }


.tafs-rate-helper {
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  padding-left: 2.3rem; 
  font-size: 0.85rem;
  line-height: 1.1;
  color: var(--bs-secondary);
}

.ta-cond-helper {
  position: absolute;
  background-color: var(--bs-paper-bg);
  color: var(--bs-secondary);  
  left: 45%;
  min-width: 80px;
  max-width: 120px;
  padding: 0px;
  padding-left: 4px;
  padding-right: 4px;
  font-weight: 300;
  font-size: small;
  margin-top: 36px;
  z-index: 10;
  /* border: solid 1px red; */
}

.tafs-rate-helper {
  position: absolute;
  background-color: var(--bs-paper-bg);
  color: var(--bs-secondary);  
  left: 40%;
  min-width: 80px;
  max-width: 120px;
  padding: 0px;
  padding-left: 8px;
  padding-right: 8px;
  font-weight: 300;
  font-size: small;
}

/* Dark mode overrides (Sneat: html[data-bs-theme="dark"]) */
html[data-bs-theme="dark"] .fs-severity-stars i,
html[data-bs-theme="dark"] .star-rating,
html[data-bs-theme="dark"] .star-mini { color: #6b7280; }

html[data-bs-theme="dark"] .fs-severity-stars .fs-inactive,
html[data-bs-theme="dark"] .fs-mini-stars .fs-inactive { color: rgba(255, 255, 255, 0.25); }

html[data-bs-theme="dark"] .fs-severity-stars i.active.fs-star-1,
html[data-bs-theme="dark"] .fs-mini-stars i.active.fs-star-1,
html[data-bs-theme="dark"] .star-rating.active.star-color-1,
html[data-bs-theme="dark"] .star-mini.active.star-color-1 { color: #FFCDD2; }

html[data-bs-theme="dark"] .fs-severity-stars i.active.fs-star-2,
html[data-bs-theme="dark"] .fs-mini-stars i.active.fs-star-2,
html[data-bs-theme="dark"] .star-rating.active.star-color-2,
html[data-bs-theme="dark"] .star-mini.active.star-color-2 { color: #EF9A9A; }

html[data-bs-theme="dark"] .fs-severity-stars i.active.fs-star-3,
html[data-bs-theme="dark"] .fs-mini-stars i.active.fs-star-3,
html[data-bs-theme="dark"] .star-rating.active.star-color-3,
html[data-bs-theme="dark"] .star-mini.active.star-color-3 { color: #EF5350; }

html[data-bs-theme="dark"] .fs-severity-stars i.active.fs-star-4,
html[data-bs-theme="dark"] .fs-mini-stars i.active.fs-star-4,
html[data-bs-theme="dark"] .star-rating.active.star-color-4,
html[data-bs-theme="dark"] .star-mini.active.star-color-4 { color: #E53935; }

html[data-bs-theme="dark"] .fs-severity-stars i.active.fs-star-5,
html[data-bs-theme="dark"] .fs-mini-stars i.active.fs-star-5,
html[data-bs-theme="dark"] .star-rating.active.star-color-5,
html[data-bs-theme="dark"] .star-mini.active.star-color-5 { color: #C62828; }

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
  #dropdown-variation-demo .btn-group .text-truncate {
    width: 300px;
    position: relative;
  }
  #dropdown-variation-demo .btn-group .text-truncate::after {
    position: absolute;
    top: 45%;
    right: 0.65rem;
  }
}
/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1.25rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1.25rem;
}

/* ==========================================================================
   RR Flow label palettes (Bootstrap-like 100..900 scales)
   Usage: <span class="badge bg-label-blue-500 rounded-pill">...</span>
   ========================================================================== */

:root {
  --rr-blue-100: #a8cbfe;
  --rr-blue-200: #81b4fe;
  --rr-blue-300: #5a9cfe;
  --rr-blue-400: #3485fd;
  --rr-blue-500: #0d6efd;
  --rr-blue-600: #0b5cd5;
  --rr-blue-700: #094bac;
  --rr-blue-800: #073984;
  --rr-blue-900: #05285b;

  --rr-indigo-100: #c8a9fa;
  --rr-indigo-200: #af83f8;
  --rr-indigo-300: #975cf6;
  --rr-indigo-400: #7e36f4;
  --rr-indigo-500: #6610f2;
  --rr-indigo-600: #560dcb;
  --rr-indigo-700: #450ba5;
  --rr-indigo-800: #35087e;
  --rr-indigo-900: #250657;

  --rr-purple-100: #cbbbe9;
  --rr-purple-200: #b49ddf;
  --rr-purple-300: #9d7ed5;
  --rr-purple-400: #8660cb;
  --rr-purple-500: #6f42c1;
  --rr-purple-600: #5d37a2;
  --rr-purple-700: #4b2d83;
  --rr-purple-800: #3a2264;
  --rr-purple-900: #281845;

  --rr-pink-100: #f0b6d3;
  --rr-pink-200: #ea95bf;
  --rr-pink-300: #e374ab;
  --rr-pink-400: #dd5498;
  --rr-pink-500: #d63384;
  --rr-pink-600: #b42b6f;
  --rr-pink-700: #92235a;
  --rr-pink-800: #6f1b45;
  --rr-pink-900: #4d1230;

  --rr-red-100: #f2b6bc;
  --rr-red-200: #ed969e;
  --rr-red-300: #e77681;
  --rr-red-400: #e25563;
  --rr-red-500: #dc3545;
  --rr-red-600: #b92d3a;
  --rr-red-700: #96242f;
  --rr-red-800: #721c24;
  --rr-red-900: #4f1319;

  --rr-orange-100: #fed1aa;
  --rr-orange-200: #febc85;
  --rr-orange-300: #fea75f;
  --rr-orange-400: #fd933a;
  --rr-orange-500: #fd7e14;
  --rr-orange-600: #d56a11;
  --rr-orange-700: #ac560e;
  --rr-orange-800: #84420a;
  --rr-orange-900: #5b2d07;

  --rr-yellow-100: #ffe9a6;
  --rr-yellow-200: #ffdf7e;
  --rr-yellow-300: #ffd556;
  --rr-yellow-400: #ffcb2f;
  --rr-yellow-500: #ffc107;
  --rr-yellow-600: #d6a206;
  --rr-yellow-700: #ad8305;
  --rr-yellow-800: #856404;
  --rr-yellow-900: #5c4503;

  --rr-green-100: #b2dfbc;
  --rr-green-200: #8fd19e;
  --rr-green-300: #6dc381;
  --rr-green-400: #4ab563;
  --rr-green-500: #28a745;
  --rr-green-600: #228c3a;
  --rr-green-700: #1b722f;
  --rr-green-800: #155724;
  --rr-green-900: #0e3c19;

  --rr-teal-100: #afecda;
  --rr-teal-200: #8be3c9;
  --rr-teal-300: #67dab8;
  --rr-teal-400: #44d2a8;
  --rr-teal-500: #20c997;
  --rr-teal-600: #1ba97f;
  --rr-teal-700: #168967;
  --rr-teal-800: #11694f;
  --rr-teal-900: #0c4836;

  --rr-cyan-100: #abdee5;
  --rr-cyan-200: #86cfda;
  --rr-cyan-300: #61c0cf;
  --rr-cyan-400: #3cb1c3;
  --rr-cyan-500: #17a2b8;
  --rr-cyan-600: #13889b;
  --rr-cyan-700: #106e7d;
  --rr-cyan-800: #0c5460;
  --rr-cyan-900: #083a42;
}

.bg-label-blue-100 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-blue-100)) !important; color: var(--rr-blue-100) !important; }
.bg-label-blue-200 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-blue-200)) !important; color: var(--rr-blue-200) !important; }
.bg-label-blue-300 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-blue-300)) !important; color: var(--rr-blue-300) !important; }
.bg-label-blue-400 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-blue-400)) !important; color: var(--rr-blue-400) !important; }
.bg-label-blue-500 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-blue-500)) !important; color: var(--rr-blue-500) !important; }
.bg-label-blue-600 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-blue-600)) !important; color: var(--rr-blue-600) !important; }
.bg-label-blue-700 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-blue-700)) !important; color: var(--rr-blue-700) !important; }
.bg-label-blue-800 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-blue-800)) !important; color: var(--rr-blue-800) !important; }
.bg-label-blue-900 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-blue-900)) !important; color: var(--rr-blue-900) !important; }

.bg-label-indigo-100 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-indigo-100)) !important; color: var(--rr-indigo-100) !important; }
.bg-label-indigo-200 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-indigo-200)) !important; color: var(--rr-indigo-200) !important; }
.bg-label-indigo-300 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-indigo-300)) !important; color: var(--rr-indigo-300) !important; }
.bg-label-indigo-400 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-indigo-400)) !important; color: var(--rr-indigo-400) !important; }
.bg-label-indigo-500 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-indigo-500)) !important; color: var(--rr-indigo-500) !important; }
.bg-label-indigo-600 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-indigo-600)) !important; color: var(--rr-indigo-600) !important; }
.bg-label-indigo-700 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-indigo-700)) !important; color: var(--rr-indigo-700) !important; }
.bg-label-indigo-800 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-indigo-800)) !important; color: var(--rr-indigo-800) !important; }
.bg-label-indigo-900 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-indigo-900)) !important; color: var(--rr-indigo-900) !important; }

.bg-label-purple-100 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-purple-100)) !important; color: var(--rr-purple-100) !important; }
.bg-label-purple-200 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-purple-200)) !important; color: var(--rr-purple-200) !important; }
.bg-label-purple-300 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-purple-300)) !important; color: var(--rr-purple-300) !important; }
.bg-label-purple-400 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-purple-400)) !important; color: var(--rr-purple-400) !important; }
.bg-label-purple-500 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-purple-500)) !important; color: var(--rr-purple-500) !important; }
.bg-label-purple-600 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-purple-600)) !important; color: var(--rr-purple-600) !important; }
.bg-label-purple-700 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-purple-700)) !important; color: var(--rr-purple-700) !important; }
.bg-label-purple-800 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-purple-800)) !important; color: var(--rr-purple-800) !important; }
.bg-label-purple-900 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-purple-900)) !important; color: var(--rr-purple-900) !important; }

.bg-label-pink-100 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-pink-100)) !important; color: var(--rr-pink-100) !important; }
.bg-label-pink-200 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-pink-200)) !important; color: var(--rr-pink-200) !important; }
.bg-label-pink-300 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-pink-300)) !important; color: var(--rr-pink-300) !important; }
.bg-label-pink-400 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-pink-400)) !important; color: var(--rr-pink-400) !important; }
.bg-label-pink-500 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-pink-500)) !important; color: var(--rr-pink-500) !important; }
.bg-label-pink-600 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-pink-600)) !important; color: var(--rr-pink-600) !important; }
.bg-label-pink-700 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-pink-700)) !important; color: var(--rr-pink-700) !important; }
.bg-label-pink-800 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-pink-800)) !important; color: var(--rr-pink-800) !important; }
.bg-label-pink-900 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-pink-900)) !important; color: var(--rr-pink-900) !important; }

.bg-label-red-100 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-red-100)) !important; color: var(--rr-red-100) !important; }
.bg-label-red-200 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-red-200)) !important; color: var(--rr-red-200) !important; }
.bg-label-red-300 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-red-300)) !important; color: var(--rr-red-300) !important; }
.bg-label-red-400 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-red-400)) !important; color: var(--rr-red-400) !important; }
.bg-label-red-500 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-red-500)) !important; color: var(--rr-red-500) !important; }
.bg-label-red-600 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-red-600)) !important; color: var(--rr-red-600) !important; }
.bg-label-red-700 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-red-700)) !important; color: var(--rr-red-700) !important; }
.bg-label-red-800 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-red-800)) !important; color: var(--rr-red-800) !important; }
.bg-label-red-900 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-red-900)) !important; color: var(--rr-red-900) !important; }

.bg-label-orange-100 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-orange-100)) !important; color: var(--rr-orange-100) !important; }
.bg-label-orange-200 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-orange-200)) !important; color: var(--rr-orange-200) !important; }
.bg-label-orange-300 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-orange-300)) !important; color: var(--rr-orange-300) !important; }
.bg-label-orange-400 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-orange-400)) !important; color: var(--rr-orange-400) !important; }
.bg-label-orange-500 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-orange-500)) !important; color: var(--rr-orange-500) !important; }
.bg-label-orange-600 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-orange-600)) !important; color: var(--rr-orange-600) !important; }
.bg-label-orange-700 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-orange-700)) !important; color: var(--rr-orange-700) !important; }
.bg-label-orange-800 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-orange-800)) !important; color: var(--rr-orange-800) !important; }
.bg-label-orange-900 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-orange-900)) !important; color: var(--rr-orange-900) !important; }

.bg-label-yellow-100 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-yellow-100)) !important; color: var(--rr-yellow-100) !important; }
.bg-label-yellow-200 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-yellow-200)) !important; color: var(--rr-yellow-200) !important; }
.bg-label-yellow-300 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-yellow-300)) !important; color: var(--rr-yellow-300) !important; }
.bg-label-yellow-400 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-yellow-400)) !important; color: var(--rr-yellow-400) !important; }
.bg-label-yellow-500 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-yellow-500)) !important; color: var(--rr-yellow-500) !important; }
.bg-label-yellow-600 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-yellow-600)) !important; color: var(--rr-yellow-600) !important; }
.bg-label-yellow-700 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-yellow-700)) !important; color: var(--rr-yellow-700) !important; }
.bg-label-yellow-800 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-yellow-800)) !important; color: var(--rr-yellow-800) !important; }
.bg-label-yellow-900 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-yellow-900)) !important; color: var(--rr-yellow-900) !important; }

.bg-label-green-100 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-green-100)) !important; color: var(--rr-green-100) !important; }
.bg-label-green-200 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-green-200)) !important; color: var(--rr-green-200) !important; }
.bg-label-green-300 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-green-300)) !important; color: var(--rr-green-300) !important; }
.bg-label-green-400 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-green-400)) !important; color: var(--rr-green-400) !important; }
.bg-label-green-500 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-green-500)) !important; color: var(--rr-green-500) !important; }
.bg-label-green-600 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-green-600)) !important; color: var(--rr-green-600) !important; }
.bg-label-green-700 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-green-700)) !important; color: var(--rr-green-700) !important; }
.bg-label-green-800 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-green-800)) !important; color: var(--rr-green-800) !important; }
.bg-label-green-900 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-green-900)) !important; color: var(--rr-green-900) !important; }

.bg-label-teal-100 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-teal-100)) !important; color: var(--rr-teal-100) !important; }
.bg-label-teal-200 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-teal-200)) !important; color: var(--rr-teal-200) !important; }
.bg-label-teal-300 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-teal-300)) !important; color: var(--rr-teal-300) !important; }
.bg-label-teal-400 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-teal-400)) !important; color: var(--rr-teal-400) !important; }
.bg-label-teal-500 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-teal-500)) !important; color: var(--rr-teal-500) !important; }
.bg-label-teal-600 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-teal-600)) !important; color: var(--rr-teal-600) !important; }
.bg-label-teal-700 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-teal-700)) !important; color: var(--rr-teal-700) !important; }
.bg-label-teal-800 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-teal-800)) !important; color: var(--rr-teal-800) !important; }
.bg-label-teal-900 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-teal-900)) !important; color: var(--rr-teal-900) !important; }

.bg-label-cyan-100 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-cyan-100)) !important; color: var(--rr-cyan-100) !important; }
.bg-label-cyan-200 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-cyan-200)) !important; color: var(--rr-cyan-200) !important; }
.bg-label-cyan-300 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-cyan-300)) !important; color: var(--rr-cyan-300) !important; }
.bg-label-cyan-400 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-cyan-400)) !important; color: var(--rr-cyan-400) !important; }
.bg-label-cyan-500 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-cyan-500)) !important; color: var(--rr-cyan-500) !important; }
.bg-label-cyan-600 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-cyan-600)) !important; color: var(--rr-cyan-600) !important; }
.bg-label-cyan-700 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-cyan-700)) !important; color: var(--rr-cyan-700) !important; }
.bg-label-cyan-800 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-cyan-800)) !important; color: var(--rr-cyan-800) !important; }
.bg-label-cyan-900 { background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--rr-cyan-900)) !important; color: var(--rr-cyan-900) !important; }

/* Dahs adv analysis: Connections table row selection */
#df-connections-table tbody tr {
  cursor: pointer;
}
#df-connections-table tbody tr.df-row-selected > * {
  background-color: rgba(var(--bs-primary-rgb), 0.12) !important;
}
#df-connections-table tbody tr.df-row-selected:hover > * {
  background-color: rgba(var(--bs-primary-rgb), 0.18) !important;
}

/* Theme: Template Customizer is hidden on <=1200px by default; keep it available on mobile too. */
@media (max-width: 1200px) {
  #template-customizer {
    display: flex !important;
    visibility: visible !important;
    inline-size: min(400px, 100vw);
  }
}

/*
Select das interfaces - /admin/traffic-analysis
*/
.ta-custom-select-wrap.form-floating > .bootstrap-select ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.ta-custom-select-wrap.form-floating.form-floating-outline > .bootstrap-select > .dropdown-toggle {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}