/* color definitions --------------- */
:root {
  --primary-theme-text-color: #66B689;
  --primary-theme-dark-text-color: #228C50;
  --primary-theme-background-color: #E2EDF5;
  --secondary-theme-background-color: #66b68926;
  --primary-theme-color: #004C83;
  --primary-theme-light-color: #0084e4;
  --primary-theme-hover-color: #003E6B;
  --info-theme-hover-color: #50916c;
  --secondary-theme-color: #303030;
  --warning-theme-color: #F29A2E;
  --danger-theme-color: #B50054;
  --info-theme-color: #66B689;

  --primary-theme-text-color-dark: #252525;
  --secondary-theme-color-dark: #000000;
}

/* main page styles ---------------- */
.container-fluid.full-width-page {
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
}

.screenshot-img {
  width: 100%;
  display: block;
  box-shadow: 0px 8px 8px 0px rgba(112,112,112,1);
}
.screenshot-img.connections {
  content: url('assets/connections.png');
}
.screenshot-img.sessions {
  content: url('assets/sessions.png');
}
.screenshot-img.spigraph {
  content: url('assets/spigraph.png');
}
.screenshot-img.spiview {
  content: url('assets/spiview.png');
}

div.demo > h1 {
  margin-top: 50px;
  margin-bottom: 1rem;
}
div.demo > h1.demo-small-screen {
  margin-top: -20px;
}

div.cont3xt-demo {
  top: -160px;
  position: relative;
  margin-bottom: -100px;
}
div.cont3xt-demo > h1 {
  margin-top: 50px;
  margin-bottom: 60px;
}

.arkime-brand {
  height: 12vh;
  min-height: 80px;
  width: auto;
  min-width: 300px;
  content: url('assets/Arkime_Logo_FullGradientBlack@2x.png');
}
.arkime-brand-sm {
  width: 20vw;
}

/* estimators page styles ---------- */
.estimators-content {
  padding-top: 80px;
  padding-bottom: 70px;
}

/* custom select styles (Bootstrap 5) */
.input-group .form-select {
  border-radius: 0 .25rem .25rem 0;
}

/* large labels */
.label-lg {
  font-size: 100%;
  padding: .25rem .5rem;
}

/* small inputs for numbers - scoped to estimators */
.estimators-content .input-group input[type="number"] {
  width: 100px;
  min-width: 100px;
}

/* fix input-group width for Bootstrap 5 - prevent full-width expansion */
.estimators-content .input-group {
  flex: 0 0 auto;
  width: auto;
}


/* downloads page styles ----------- */
.downloads-content {
  padding-top: 80px;
}

/* button to toggle more downloads */
.show-more-downloads {
  font-size : 90%;
  margin-top: 1rem;
}

/* version time display */
.time {
  margin-top: -6px;
}

/* transition latest commit visibility */
.latest-commit {
  max-height: 0px;
  transition: max-height 0.5s ease-in-out;
}

/* add solid background for downloads footer */
.solid-footer footer.footer {
  height: 28px;
  background-color: white;
}
.dark-theme .solid-footer footer.footer {
  background-color: black;
}


/* on page styles ------------------ */
.on-content > .angle-background {
  padding-top: 120px;
}

/* flex styles */
.d-flex {
  display: flex !important;
}
.flex-column {
  flex-direction: column !important;
}
.align-items-start {
  align-items: flex-start !important;
}
.justify-content-between {
  justify-content: space-between !important;
}

/* agenda styles */
.agenda-title {
  font-size: 1.125rem;
  font-weight: bold;
}
.agenda-title .more-info {
  font-size: 1rem;
  font-weight: lighter;
}

/* quote styles */
.quote {
  border-left: 5px solid;
  padding-left: 8px;
}
.quote-danger {
  border-left-color: #d9534f;
}
.quote-info {
  border-left-color: #5bc0de;
}
.quote-warning {
  border-left-color: #f0ad4e;
}


/* arkimeet us page styles --------- */
.arkimeetus-content .angle-background,
.v3-content .angle-background {
  margin-bottom: -200px;
  padding-bottom: 360px !important;
}

.arkimeetus-content .black-arkime,
.v3-content .black-arkime {
  top: -130px;
  position: relative;
  margin-bottom: -200px;
}
.arkimeetus-content .black-arkime > img,
.v3-content .black-arkime > img {
  height: 230px;
}

.arkimeetus-footer, .v3-footer {
  margin-top: 200px;
}

.audio-container {
  width: 300px;
}

/* api page styles ----------------- */
/* make sure columns are wide enough */
.api-container table th {
  min-width: 120px;
}

/* make tables look bootstrappy */
.api-container table {
  width: 100%;
  margin-bottom: 1rem;
  border: 1px solid #dee2e6;
  background-color: transparent;
}

.api-container thead td,
.api-container thead th,
.api-container tbody td,
.api-container tbody th {
  border: 1px solid #dee2e6;
}
.api-container thead td,
.api-container thead th {
  border-bottom: 2px solid #dee2e6;
}

.api-container td,
.api-container th {
  padding: .2rem;
}

/* table stripes */
.api-container table tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, .05);
}


/* parliament page styles ---------- */
.screenshot-img.parliament-dashboard {
  content: url('assets/parliament.png');
}
.screenshot-img.parliament-edit {
  content: url('assets/parliament-edit.png');
}
.screenshot-img.parliament-issues {
  content: url('assets/parliament-issues.png');
}
.screenshot-img.parliament-settings {
  content: url('assets/parliament-settings.png');
}
.screenshot-img.parliament-users {
  content: url('assets/parliament-users.png');
}

.screenshot-img.cont3xt {
  content: url('assets/cont3xt.png');
}

.screenshot-img.ja4 {
  content: url('assets/ja4.png');
}

.screenshot-img.multiviewer {
  content: url('assets/multiviewer.png');
}

.screenshot-img.auth {
  content: url('assets/auth.png');
}

.screenshot-img.session-detail {
  content: url('assets/session-detail.png');
}


/* all page styles ----------------- */
.arkime-logo {
  content: url('assets/Arkime_Logo_Mark_Black@2x.png');
}

/* white jumbotrons for custom backgrounds */
.jumbotron {
  background-color: #e9ecef;
  padding: 2rem 1rem;
  border-radius: 0.3rem;
}
.jumbotron-white {
  background-color: #FFFFFF;
}

/* custom button styles */
.btn-fw {
  width: 160px;
}

/* interactive button effects */
.btn-interactive {
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.8);
  transition: all 0.15s ease-in-out;
}
.btn-interactive:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.9);
}
.btn-interactive:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
}

/* special announcement link */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}
.special-link {
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0;
  transition: letter-spacing 0.3s ease;
  background: linear-gradient(
    90deg,
    var(--primary-theme-color) 0%,
    var(--info-theme-color) 25%,
    var(--primary-theme-color) 50%,
    var(--info-theme-color) 75%,
    var(--primary-theme-color) 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 8s linear infinite;
}
.special-link:hover {
  letter-spacing: 0.05em;
  animation-play-state: paused;
}

/* pulse animation for CTA buttons */
@keyframes pulse-shadow {
  0%, 100% {
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.8);
    transform: translate(0, 0);
  }
  50% {
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.9);
    transform: translate(-2px, -2px);
  }
}
.btn-pulse {
  animation: pulse-shadow 1.5s ease-in-out infinite;
}
.btn-pulse:hover {
  animation: none;
}

.btn-primary {
  color: #FFF;
  border-color: var(--primary-theme-color);
  background-color: var(--primary-theme-color);
}
.btn-primary:hover {
  color: #FFF;
  border-color: var(--primary-theme-hover-color);
  background-color: var(--primary-theme-hover-color);
}

.btn-info {
  color: #FFF;
  border-color: var(--info-theme-color);
  background-color: var(--info-theme-color);
}
.btn-info:hover {
  color: #FFF;
  border-color: var(--info-theme-hover-color);
  background-color: var(--info-theme-hover-color);
}

.btn-outline-primary {
  color: var(--primary-theme-color);
  border-color: var(--primary-theme-color);
}
.btn-outline-primary:hover {
  color: #FFF;
  border-color: var(--primary-theme-color);
  background-color: var(--primary-theme-color);
}

.btn-outline-secondary {
  color: var(--secondary-theme-color);
  border-color: var(--secondary-theme-color);
}
.btn-outline-secondary:hover {
  color: #FFF;
  border-color: var(--secondary-theme-color);
  background-color: var(--secondary-theme-color);
}

.btn-outline-info {
  color: var(--info-theme-color);
  border-color: var(--info-theme-color);
}
.btn-outline-info:hover {
  color: #FFF;
  border-color: var(--info-theme-color);
  background-color: var(--info-theme-color);
}

.btn-outline-danger {
  color: var(--danger-theme-color);
  border-color: var(--danger-theme-color);
}
.btn-outline-danger:hover {
  color: #FFF;
  border-color: var(--danger-theme-color);
  background-color: var(--danger-theme-color);
}

.btn-outline-warning {
  color: var(--warning-theme-color);
  border-color: var(--warning-theme-color);
}
.btn-outline-warning:hover {
  color: #FFF;
  border-color: var(--warning-theme-color);
  background-color: var(--warning-theme-color);
}

.btn-link {
  cursor: pointer;
  font-weight: 300;
  color: #007bff !important;
  background-color: transparent;
}

.accordion-btn {
  background-color: transparent;
}
.accordion-btn:focus {
  box-shadow: 0 0 0 0 transparent;
}
.dark-theme .accordion-btn {
  color: #FFFFFF;
}

/* theme color dark navbar */
.bg-dark {
  background-color: var(--secondary-theme-color) !important;
}

/* padding for navbar */
.p-nav {
  padding-top: 80px;
}
.p-nav-lg {
  padding-top: 120px;
}

/* misc */
.no-float { float: none; }

.no-wrap { white-space: nowrap; }

.cursor-copy { cursor: copy; }
.cursor-pointer { cursor: pointer; }

.no-decoration { text-decoration: none !important; }

.text-thin { font-weight: 200; }
.text-thick { font-weight: 800; }

.lead-sm { font-size: 1rem; }
.lead-lg { font-size: 1.5rem; }
.lead-xl { font-size: 2.5rem; }

.hide {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
}

/* pretty angled backgrounds */
.angle-background {
  padding-bottom: 7rem;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}
.angle-background-long {
  padding-bottom: 9rem !important;
}
.top-angle-background {
  padding-top: 7rem;
  clip-path: polygon(50% 10%, 100% 0, 100% 100%, 0 100%, 0 0);
}
.double-angle-background {
  padding-top: 7rem;
  padding-bottom: 7rem;
  clip-path: polygon(50% 10%, 100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);
}

/* primary theme color background */
.primary-theme-background {
  background-color: var(--primary-theme-background-color);
}

/* primary theme color text */
.primary-theme-text { color: var(--primary-theme-text-color) !important; }
.dark-primary-theme-text { color: var(--primary-theme-dark-text-color) !important; }

/* danger theme color text */
.danger-theme-text { color: var(--danger-theme-color) !important; }
.dark-danger-theme-text { color: var(--danger-theme-color) !important; }

/* navbar owl image */
.nav-link > img,
.navbar-brand > img {
  top: 4px;
  left: 15px;
  height: 50px;
  position: absolute;
}

/* navbar outline buttons - more rounded */
.navbar .btn-outline-primary,
.navbar .btn-outline-secondary,
.navbar .btn-outline-info,
.navbar .btn-outline-danger,
.navbar .btn-outline-warning {
  border-radius: 0.6rem;
}

/* footer styles */
footer.footer {
  color: #aaa;
  padding: 8px 16px;
  border-top: 1px solid #E5E5E5;
}

body.wiki-body footer.footer {
  background: white;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
body.wiki-body .footer-owl {
  position: absolute;
  bottom: 37px;
}

/* move the image up so the owl is sitting on the border */
img.footer-owl {
  position: relative;
  margin-bottom: -2px;
  left: calc(50% - 11px);
}

/* code styles */
pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  border-radius: 3px;
  background-color: #f6f8fa;
}

/* dark dropdown menu */
.dropdown-menu {
  border-color: #242426;
  background-color: #343a40;
}
.dropdown-menu a.dropdown-item {
  color: #FFF;
}
.dropdown-menu a.dropdown-item:hover,
.dropdown-menu a.dropdown-item:focus {
  color: #FFF;
  background-color: #323235;
}
.dropdown-menu li.active a,
.dropdown-menu > li.active > a,
.dropdown-menu div li.active a,
.dropdown-menu > .active > div a,
.dropdown-menu > .active > div:focus a {
  color: #FFF !important;
}

/* anchor offset for navbar */
a.anchor {
  top: -60px;
  display: block;
  position: relative;
  visibility: hidden;
}
a.anchor.anchor-offset-more {
  top: -260px;
}

/* zebra stripey list groups */
ul.list-group.list-group-striped > li.list-group-item:nth-of-type(even) {
  background-color: #f8f9fa;
}

/* secondary theme zebra stripey tables */
.table-striped.table-striped-secondary tbody tr:nth-of-type(odd) {
  background-color: var(--secondary-theme-background-color)
}

/* condensed list groups */
ul.list-group.list-group-sm > li.list-group-item {
  padding: 0.4rem 0.8rem;
}

/* full height body with scrollable nav and content */
body.full-height-body {
  height: 100%;
  overflow: hidden;
}

.full-height-container {
  right: 0;
  bottom: 0;
  left: 21rem;
  overflow-y: auto;
  position: absolute;
  width: calc(100% - 21rem);
  height: calc(100% - 56px);
  transition: all 1s ease;
}

.full-height-and-width-container {
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  position: absolute;
  height: calc(100% - 56px);
  transition: all 1s ease;
}

.left-nav {
  left: 0;
  bottom: 0;
  width: 20rem;
  overflow-y: auto;
  position: absolute;
  word-break: break-word;
  height: calc(100% - 56px);
  transition: width 1s ease;
}

.with-footer {
  top: 50px !important;
  bottom: 50px !important;
  height: calc(100% - 85px) !important;
}

/* collapsed toc */
.collapsed-toc .left-nav {
  width: 0px;
  height: 0px;
}
.collapsed-toc .collapse-btn {
  left: 0;
}
.collapsed-toc .full-height-container {
  left: 1rem;
  width: calc(100% - 1rem);
}
.collapsed-toc .collapse-btn > .fa {
  transform: rotate(180deg);
}

/* left nav collapse btn */
.collapse-btn {
  left: 20rem;
  bottom: 0;
  cursor: pointer;
  width: 1rem;
  position: absolute;
  height: calc(100% - 56px);
  background-color: #eee;
  transition: left 1s ease;
}
.collapse-btn:hover {
  background-color: #ddd;
}
.collapse-btn > .fa {
  top: 50%;
  left: 0.15rem;
  position: absolute;
  transition: all 1s ease;
}

@media (max-width: 575.98px) {
  .full-height-container {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    overflow-y: auto;
    position: absolute;
    height: calc(100% - 56px);
  }
}

.left-nav div.nav-pills.nav-pills-nested a.nav-link {
  width: 100%;
  overflow: hidden;
  word-break: break-word;
  padding: 4px 8px !important;
}
.left-nav div.nav-pills.nav-pills-nested a.nav-link.nested {
  line-height: 1.2;
  font-size: 0.85rem;
  padding: 4px 10px 4px 20px !important;
}
.left-nav div.nav-pills.nav-pills-nested a.nav-link.nested-more {
  padding: 4px 10px 4px 30px !important;
}
.left-nav div.nav-pills.nav-pills-nested a.nav-link:not(.nested) {
  font-weight: bold;
}

.toc-nested {
  margin-left: 12px;
}
.nav-link {
  font-weight: 500 !important;
}
.nav-link.nested {
  font-weight: 200 !important;
}
.nav-link.main-nav-link {
  font-weight: 900 !important;
  font-size: larger;
}

/* hide/show copy link for faq anchors */
h1[id] > span.copy-link,
h2[id] > span.copy-link,
h3[id] > span.copy-link,
h4[id] > span.copy-link,
td[id] > span.copy-link {
  visibility: hidden;
}
h1[id]:hover > span.copy-link,
h2[id]:hover > span.copy-link,
h3[id]:hover > span.copy-link,
h4[id]:hover > span.copy-link,
td[id]:hover > span.copy-link {
  visibility: visible;
}

/* wiki tocs */
.wiki-toc {
  padding-left: 10px;
}

.wiki-toc, .wiki-toc ul {
  list-style: none;
}

.wiki-toc > li > ul > li {
  margin-left: -40px;
}
.wiki-toc > li > ul > li > ul > li {
  margin-left: -25px;
}
.wiki-toc > li > ul > li,
.wiki-toc > li > ul > li > ul > li {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wiki-toc > li > a {
  font-weight: bold;
}

.wiki-toc a:hover {
  text-decoration: none;
}

/* Add to calendar override styles */
.add-to-calendar > .add-to-calendar-widget {
  display: inline !important;
  margin-left: 10px !important;
}
.add-to-calendar > .add-to-calendar-widget > .add-to-calendar-label {
  padding: 0 .5rem !important;
  font-size: .875rem !important;
  line-height: 1.5 !important;
  border-radius: 0 !important;
  color: var(--danger-theme-color) !important;
  border: 1px solid var(--danger-theme-color) !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}
.add-to-calendar > .add-to-calendar-widget > .add-to-calendar-label:hover {
  color: #FFF !important;
  border-color: var(--danger-theme-color) !important;
  background-color: var(--danger-theme-color) !important;
}
.add-to-calendar > .add-to-calendar-widget > .add-to-calendar-dropdown {
  width: 200px !important;
  padding: .5rem !important;
}

/* right justified button for copying code from galleries */
.btn.btn-copy-code {
  right: 20px;
  margin-top: 30px;
  position: absolute;
  cursor: copy !important;
}

/* gallery item visibility and transitions */
.gallery-item {
  opacity: 1;
  max-height: 9999px;
  visibility: visible;
  transition: all 0.5s linear;
}
.gallery-item.gallery-item-hidden {
  opacity: 0;
  max-height: 0px;
  visibility: hidden;
}

/* to offset the scroll position of hash links because of the navbar */
.hash-link-offset {
  margin-top: -56px;
  padding-top: 56px;
}

/* description lists horizontal styles */
dl.dl-horizontal dt {
  float: left;
  width: 275px;
  overflow: hidden;
  clear: left;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0;
}
dl.dl-horizontal dd {
  margin-left: 290px;
  margin-bottom: 0;
}

/* dark mode switch */
.switch-container {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  user-select: none;
  font-size: 10px;
  cursor: pointer;
  margin-right: 0.75rem;
}
.switch {
  display: block;
  position: relative;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: border-color .3s,background-color .3s;
  user-select: none;
  width: 95px;
  height: 26px;
  background-color: rgb(181, 181, 181);
  border-radius: 13px;
}
.dark-theme .switch {
  background-color: rgb(85, 85, 85);
}
.switch-btn {
  width: 20px;
  height: 20px;
  transition: transform 300ms ease 0s;
  background: rgb(255, 255, 255);
  border-radius: 10px;
  transform: translate3d(3px, 3px, 0px);
}
.dark-theme .switch-btn {
  transform: translate3d(72px, 3px, 0px);
  background: rgb(0, 0, 0);
}
.switch-label {
  transition: transform 300ms ease 0s;
  position: absolute;
  top: 0;
  font-weight: 600;
  color: #fff;
  z-index: 1;
  line-height: 26px;
  right: 10px;
}
.dark-theme .switch-label {
  left: 10px;
}

/* dark theme styles --------------- */
.dark-theme {
  color: #EEEEEE;
}

.dark-theme {
  background-color: #111111;
}

.dark-theme .arkime-logo {
  content: url('assets/Arkime_Logo_Mark_White@3x.png');
}

.dark-theme hr {
  border-top: 1px solid #666666;
}

.dark-theme .text-muted {
  color: #AAAAAA !important;
}

.dark-theme .bg-dark {
  background-color: var(--secondary-theme-color-dark) !important;
}

.dark-theme .arkime-brand {
  content: url('assets/Arkime_Logo_FullGradientWhite@3x.png');
}

.dark-theme .primary-theme-background {
  background-color: var(--primary-theme-text-color-dark);
}

.dark-theme .card,
.dark-theme .bg-white,
.dark-theme .jumbotron,
.dark-theme .jumbotron-white {
  background-color: #333333 !important;
}

.dark-theme .card-body {
  background-color: #3f3f3f;
}

.dark-theme input,
.dark-theme select,
.dark-theme textarea
.dark-theme .form-control:focus {
  border-color: #CED4DA;
  color: #FFFFFF !important;
  background-color: #000000 !important;
}
.dark-theme pre,
.dark-theme .input-group-text {
  color: #EEEEEE;
  background-color: #212121;
}

.dark-theme footer.footer {
  border-top: 1px solid #666666;
}
body.wiki-body.dark-theme footer.footer {
  background: var(--secondary-theme-color-dark);
}

.dark-theme .screenshot-img {
  box-shadow: none;
}
.dark-theme .screenshot-img.connections {
  content: url('assets/connections-dark.png');
}
.dark-theme .screenshot-img.sessions {
  content: url('assets/sessions-dark.png');
}
.dark-theme .screenshot-img.spigraph {
  content: url('assets/spigraph-dark.png');
}
.dark-theme .screenshot-img.spiview {
  content: url('assets/spiview-dark.png');
}

.dark-theme .screenshot-img.parliament-dashboard {
  content: url('assets/parliament-dark.png');
}
.dark-theme .screenshot-img.parliament-edit {
  content: url('assets/parliament-edit-dark.png');
}
.dark-theme .screenshot-img.parliament-issues {
  content: url('assets/parliament-issues-dark.png');
}
.dark-theme .screenshot-img.parliament-settings {
  content: url('assets/parliament-settings-dark.png');
}
.dark-theme .screenshot-img.parliament-users {
  content: url('assets/parliament-users-dark.png');
}

.dark-theme .screenshot-img.cont3xt {
  content: url('assets/cont3xt-dark.png');
}

.dark-theme .screenshot-img.ja4 {
  content: url('assets/ja4-dark.png');
}

.dark-theme .screenshot-img.multiviewer {
  content: url('assets/multiviewer-dark.png');
}

.dark-theme .screenshot-img.session-detail {
  content: url('assets/session-detail-dark.png');
}

.dark-theme .collapse-btn {
  background-color: #212121;
}
.dark-theme .collapse-btn:hover {
  background-color: #333333;
}

.dark-theme .list-group-item {
  background-color: #333333;
  border: 1px solid rgba(0,0,0,.5);
}
.dark-theme ul.list-group.list-group-striped > li.list-group-item:nth-of-type(even) {
  background-color: #1d1d1d;
}

.dark-theme .modal-content {
  color: #EEEEEE;
  background-color: #333333;
}
.dark-theme .close {
  color: #EEEEEE;
  opacity: 0.9;
}
.dark-theme .close:hover {
  color: #FFFFFF !important;
  opacity: 1;
}

.dark-theme .alert.alert-info {
  color: #d1ecf1;
  border-color: #03434e;
  background-color: #0c5460;
}
.dark-theme .alert.alert-secondary {
  color: #e2e3e5;
  border-color: #000000;
  background-color: #1d1d1d;
}
.dark-theme .alert.alert-danger {
  color: #e2e3e5;
  border-color: #570129;
  background-color: #680231;
}

/* loading animation */
.loading-downloads {
  height: 195px;
  transition: all 1s ease-out;
}
.loading-letter {
  opacity: 0;
  animation-name: fade;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  transition: font-size 1s ease-out;
}

.loading-letter:nth-child(2) {
  animation-delay: 0.05s;
}
.loading-letter:nth-child(3) {
  animation-delay: 0.1s;
}
.loading-letter:nth-child(4) {
  animation-delay: 0.15s;
}
.loading-letter:nth-child(5) {
  animation-delay: 0.2s;
}
.loading-letter:nth-child(6) {
  animation-delay: 0.25s;
}
.loading-letter:nth-child(7) {
  animation-delay: 0.3s;
}
.loading-letter:nth-child(8) {
  animation-delay: 0.35s;
}
.loading-letter:nth-child(9) {
  animation-delay: 0.4s;
}
.loading-letter:nth-child(10) {
  animation-delay: 0.45s;
}
.loading-letter:nth-child(11) {
  animation-delay: 0.5s;
}
.loading-letter:nth-child(12) {
  animation-delay: 0.55s;
}
.loading-letter:nth-child(13) {
  animation-delay: 0.6s;
}
.loading-letter:nth-child(14) {
  animation-delay: 0.65s;
}
.loading-letter:nth-child(15) {
  animation-delay: 0.7s;
}
.loading-letter:nth-child(16) {
  animation-delay: 0.75s;
}
.loading-letter:nth-child(17) {
  animation-delay: 0.8s;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80%,
  100% {
    opacity: 0;
  }
}

/* arkime pronunciation on index page */
.arkime-pronunciation {
  cursor: pointer;
  font-size: 1.5rem;
  vertical-align: sub;
}

/* settings page styles ------------ */
h1.section-header {
  color: white;
  padding: 15px;
  margin-top: 50px;
  margin-left: -10px;
  margin-right: -10px;
  border-radius: 10px;
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.5);
  background-color: var(--primary-theme-color);
}
h2.subsection-header {
  color: white;
  padding: 6px;
  margin-top: 40px;
  border-radius: 10px;
  box-shadow: 0px 1px 2px -1px rgba(0,0,0,0.5);
  background-color: var(--primary-theme-light-color);
}
h3.subsection {
  padding-top: 5px;
  border-top: 2px solid var(--primary-theme-color);
}
.table-primary, .table-primary > td, .table-primary > th {
  background-color: #d5e7fbc9;
}
.dark-theme .table-primary, .dark-theme .table-primary > td, .dark-theme .table-primary > th {
  background-color: #05192e;
}
.dark-theme .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgb(0 0 0 / 50%);
}
.dark-theme .table {
  --bs-table-bg: var(--dark-theme-background-color);
  --bs-table-color: #f8f9fa;
  --bs-table-border-color: #495057;
}

/* pretty list group styles --------- */
ul.list-group.angle-list > li.list-group-item {
  border: none;
  margin-top: 4px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-family: monospace;
  border-left: 2px solid var(--primary-theme-color);
  clip-path: polygon(99% 0, 100% 50%, 99% 100%, 0 100%, 0 0);
}

/* feature carousel styles ---------- */
.feature-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 4px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.feature-dot:hover {
  background-color: #999;
}
.feature-dot.active {
  background-color: var(--primary-theme-color);
}
.feature-item {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.feature-item.active {
  position: relative;
  opacity: 1;
}
#feature-carousel {
  position: relative;
  min-height: 2em;
}

/* owl easter egg */
@keyframes owl-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
#main-owl {
  cursor: pointer;
}
#main-owl.spinning {
  animation: owl-spin 0.5s ease-in-out;
}
.confetti {
  position: fixed;
  top: -20px;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 9999;
  animation: confetti-fall 3s ease-out forwards;
}

/* v6 release page styles */
.v6-content .lead strong {
  font-weight: 800;
}