/*
* Core overrides
******************************************************************************/

@charset "UTF-8";
:root,
[data-bs-theme="light"] {
  --bs-bw-green: #2eac68;
  --bs-bw-blue: #0b5577;
  --bs-primary: #0b354a;
  --bs-secondary: #35728e;
  --bs-bw-green-rgb: 46, 172, 104;
  --bs-primary-rgb: 11, 53, 74;
  --bs-secondary-rgb: 53, 114, 142;
  --bs-primary-text-emphasis: #07354a;
  --bs-secondary-text-emphasis: #395d6e;
  --bs-link-color: #0b354a;
  --bs-link-color-rgb: 11, 53, 74;
  --bs-link-hover-color: #2eac68;
  --bs-link-hover-color-rgb: 46, 172, 104;
}

body {
  font-family:
    var(--bs-body-font-family), "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Heiti SC",
    "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
}

.tooltip {
  --bs-tooltip-zindex: 1101;
}

.offcanvas,
.offcanvas-xxl,
.offcanvas-xl,
.offcanvas-lg,
.offcanvas-md,
.offcanvas-sm {
  --bs-offcanvas-zindex: 1090;
  --bs-offcanvas-width: 400px;
}

.btn-secondary {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}
.btn-secondary:hover {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}
.btn-check:focus + .btn-secondary,
.btn-secondary:focus,
.btn-secondary.focus {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}
.btn-check:checked + .btn-secondary,
.btn-check:active + .btn-secondary,
.btn-secondary:active,
.btn-secondary.active,
.btn-secondary.show.dropdown-toggle,
.show > .btn-secondary.dropdown-toggle {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}
.btn-secondary.disabled,
.btn-secondary:disabled {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}

.btn-group .btn-secondary,
.input-group .btn-secondary {
  border-right: var(--bs-border-width) solid var(--bs-secondary);
  border-left: var(--bs-border-width) solid var(--bs-secondary);
}

.btn-group-vertical .btn-secondary {
  border-top-color: var(--bs-secondary);
  border-bottom-color: var(--bs-secondary);
}

.btn-outline-secondary {
  color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}
.btn-outline-secondary:hover {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}
.btn-check:focus + .btn-outline-secondary,
.btn-outline-secondary:focus {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}
.btn-check:checked + .btn-outline-secondary,
.btn-check:active + .btn-outline-secondary,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary.dropdown-toggle.show {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}
.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
  color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}

.btn-outline-secondary .badge {
  background: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

.btn-outline-secondary:hover .badge,
.btn-outline-secondary:focus:hover .badge,
.btn-outline-secondary:active .badge,
.btn-outline-secondary.active .badge,
.show > .btn-outline-secondary.dropdown-toggle .badge {
  color: var(--bs-secondary);
}

.alert-secondary {
  color: var(--bs-secondary);
}
.alert-secondary .btn-close {
  background-image: url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%2335728e' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.5' fill='%2335728e' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.alert-secondary .alert-link {
  color: var(--bs-secondary);
}

.alert-secondary hr {
  color: var(--bs-secondary) !important;
}
.alert-secondary .alert-icon {
  background-color: var(--bs-secondary);
}

.list-group-item-secondary {
  border-color: var(--bs-secondary);
  color: var(--bs-secondary) !important;
}

a.list-group-item-secondary,
button.list-group-item-secondary {
  color: var(--bs-secondary);
}
a.list-group-item-secondary:hover,
a.list-group-item-secondary:focus,
button.list-group-item-secondary:hover,
button.list-group-item-secondary:focus {
  border-color: var(--bs-secondary);
  color: var(--bs-secondary);
}
a.list-group-item-secondary.active,
button.list-group-item-secondary.active {
  border-color: var(--bs-secondary) !important;
  background-color: var(--bs-secondary) !important;
}

.bg-secondary.toast .toast-header .btn-close,
.bg-secondary.bs-toast .toast-header .btn-close {
  background-color: var(--bs-secondary) !important;
}

.bg-label-secondary {
  color: var(--bs-secondary) !important;
}

@keyframes colorPhase {
  0% {
    box-shadow: 0 1px 20px 1px var(--bs-primary); /* Primary shadow */
  }
  50% {
    box-shadow: 0 1px 20px 1px var(--bs-bw-green); /* Secondary shadow */
  }
  100% {
    box-shadow: 0 1px 20px 1px var(--bs-primary); /* Primary shadow */
  }
}

.btn-close {
  background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
}

.text-muted {
  color: #8b9197 !important;
}

.buy-now .btn-buy-now {
  position: unset;
  box-shadow: 0 1px 20px 1px var(--bs-primary); /* Initial shadow */
  background-color: var(--bs-bw-green); /* Initial background color */
  color: #fff;
  animation: colorPhase 3s infinite; /* Apply the color phasing animation */
  transition:
    background-color 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out; /* Smooth transitions */
}

.buy-now .btn-buy-now:hover {
  background-color: var(
    --bs-bw-green
  ) !important; /* Keep the primary color on hover */
}

.btn-pro-now {
  background-color: var(--bs-bw-green); /* Initial background color */
  color: #fff;
}

.btn-pro-now:hover {
  background-color: var(
    --bs-bw-green
  ) !important; /* Keep the primary color on hover */
}

.avatar.avatar-offline:after {
  background-color: var(--bs-secondary);
}

.navbar.bg-secondary .search-input-wrapper .search-input,
.navbar.bg-secondary .search-input-wrapper .search-toggler {
  background-color: var(--bs-secondary) !important;
}

.toast-container {
  z-index: 1089;
}

/*
* Main overrides
******************************************************************************/

:root {
  --dt-row-selected: 230, 234, 237;
  --font-don-jose:
    "Don Jose", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  --font-courier-prime:
    "Courier Prime", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
}

.badge-dot {
  padding: 0.35rem;
  font-size: 0.6rem;
  animation: pulsate 1.7s infinite;
}

.badge-dot-text {
  font-size: 0.6rem;
  animation: pulsate 1.7s infinite;
}

@keyframes pulsate {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.w-30 {
  width: 30% !important;
}

.badge-center-sm {
  padding: 2.5px;
  line-height: 1.2;
  height: 1.25rem;
  width: 1.25rem;
  font-size: 0.7rem;
}

.badge-center-sm i {
  font-size: 0.8rem;
}

.bg-bw-green {
  background-color: var(--bs-bw-green);
}

/* .pro-icon {
  position: relative;
  width: 18px;
  height: 15.5px;
  overflow: hidden;
}

.pro-icon::before,
.pro-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: opacity 1.5s ease-in-out;
}

.pro-icon::before {
  background-image: url("../img/diamond.svg");
  opacity: 1;
  animation: fadeOut 1.5s infinite alternate;
}

.pro-icon::after {
  background-image: url("../img/diamond-blue.svg");
  opacity: 0;
  animation: fadeIn 1.5s infinite alternate;
} */

.btn-responsive {
  padding: 6px 14px;
  font-size: 90%;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .btn-responsive {
    padding: 2px 6px;
    font-size: 70%;
    line-height: 1;
  }

  /* .pro-icon {
    width: 9px;
    height: 7.75px;
  } */
}

@media (min-width: 769px) and (max-width: 992px) {
  .btn-responsive {
    padding: 4px 9px;
    font-size: 80%;
    line-height: 1.1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.min-vh-70 {
  min-height: 70vh !important;
}

.max-vh-60 {
  max-height: 60vh !important;
}

td.highlight {
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
}

.text-bw-green {
  color: var(--bs-bw-green) !important;
}

.btn-primary.active {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-primary:hover {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-bw-green {
  color: #fff;
  background-color: var(--bs-bw-green);
  border-color: var(--bs-bw-green);
}

.btn-outline-bw-green {
  color: var(--bs-bw-green);
  border-color: var(--bs-bw-green);
}

.btn-bw-green:hover,
.btn-outline-bw-green:hover {
  color: #fff;
  background-color: var(--bs-bw-green);
}

.btn-text-bw-green,
.btn-text-bw-green.disabled,
.btn-text-bw-green:hover {
  color: var(--bs-bw-green) !important;
  border: none;
}

.bg-label-bw-green {
  color: color-mix(in srgb, var(--bs-bw-green), black 10%);
  background-color: rgba(var(--bs-bw-green-rgb), 0.25);
}

.btn-text-secondary,
.btn-text-secondary.disabled,
.btn-text-secondary:hover {
  color: var(--bs-secondary) !important;
}

.btn-text-danger,
.btn-text-danger.disabled,
.btn-text-danger:hover {
  color: var(--bs-danger) !important;
  border: none;
}

.col.form-floating > .form-control-sm,
.col-auto.form-floating > .form-select.form-select-sm {
  height: calc(1.9em + 0.9rem + 1px);
  min-height: calc(1.9em + 0.9rem + 1px);
  font-size: 0.85rem;
  line-height: 1;
}

.form-floating > .form-control:focus ~ label {
  transform: scale(0.8) translateY(-0.7rem) translateX(0.15rem);
}

.col.form-floating > label,
.col-auto.form-floating > label {
  padding: 0.8rem 0.9375rem;
  font-size: 0.8rem;
}

.form-floating > .form-select:focus {
  padding-top: 1.2rem;
}

.col-auto.form-floating > .form-select.form-select-sm,
.col-auto.form-floating > .form-select.form-select-sm:focus {
  padding-top: calc(-2px + 1.2rem);
}

.form-floating > .form-control.form-control-sm:focus {
  padding-top: 1.1rem !important;
}

.shine {
  background-image: linear-gradient(
    120deg,
    rgba(46, 172, 104, 0) 0%,
    rgba(46, 172, 104, 0.8) 50%,
    rgba(46, 172, 104, 0) 100%
  );
  background-size: 40%;
  background-position: -100% center;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: shine 8s linear infinite;
  animation-fill-mode: forwards;
}

.shine-sm {
  animation: shineSm 5s linear infinite;
}

@keyframes shine {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes shineSm {
  0% {
    background-position: -200% center;
  }
  60% {
    background-position: 200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.text-primary.shine {
  color: rgba(var(--bs-primary-rgb), 0.1) !important;
  background-color: var(--bs-primary) !important;
}

.form-floating > :disabled ~ label::after,
.form-floating > .form-control:disabled ~ label::after {
  background-color: transparent;
}

.chevron-icon {
  padding-bottom: 0.125rem !important;
}

.chevron-rotate {
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}

.chevron-rotate-back {
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.multiple-container:not(:first-child) {
  border-top: 1px solid var(--bs-primary);
}

a.badge:hover {
  color: #fff;
}

.setting-checkbox-label {
  font-size: calc(var(--bs-body-font-size) * 0.85);
}

.sticky-card {
  position: sticky;
  background-color: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: saturate(200%) blur(6px);
  top: 85px;
  z-index: 1070;
}

#floating-modes-menu {
  bottom: 2.1rem !important;
  left: 1.5rem !important;
  z-index: 1080;
}

.setting-highlight {
  background-color: rgba(var(--bs-bw-green-rgb), 0.5);
  transition:
    background-color 2s ease,
    opacity 2s ease;
  opacity: 1;
}

.setting-highlight-fade {
  background-color: transparent;
  opacity: 1; /* You can set this to 0 if you want it to fade out */
}

.template-steps-container {
  --bs-breadcrumb-divider: url("../img/bxs-chevron-right.svg");
}

.template-steps-container .breadcrumb-item + .breadcrumb-item::before {
  padding: 0 1rem 0 1rem;
}

.h-vh-40 {
  height: 40vh;
}

/* Base styles for the ModSecurity mode */
.ace-modsecurity .ace_editor {
  font-family: monospace;
  font-size: 12px;
}

/* Comments */
.ace-modsecurity .ace_comment {
  color: #6a9955; /* Green color for comments */
  font-style: italic;
}

/* Strings */
.ace-modsecurity .ace_string {
  color: #ce9178; /* Orange color for strings */
}

/* Keywords */
.ace-modsecurity .ace_keyword {
  color: #569cd6; /* Blue color for keywords */
  font-weight: bold;
}

/* Constants (numbers, IP addresses) */
.ace-modsecurity .ace_constant {
  color: #b5cea8; /* Light green color for constants */
}

/* Variables */
.ace-modsecurity .ace_variable {
  color: #9cdcfe; /* Light blue color for variables */
}

/* Operators */
.ace-modsecurity .ace_keyword.ace_operator {
  color: #c586c0; /* Purple color for operators */
}

/* Functions (actions) */
.ace-modsecurity .ace_support.ace_function {
  color: #dcdcaa; /* Yellow color for functions */
  font-weight: bold;
}

/* Invalid or illegal syntax */
.ace-modsecurity .ace_invalid {
  color: #ffffff;
  background-color: #e51400; /* Red background for errors */
}

/* Text */
.ace-modsecurity .ace_text {
  color: #d4d4d4; /* Default text color */
}

/* Specific token styles based on the highlight rules */

/* ModSecurity directives */
.ace-modsecurity .ace_keyword\.headers\.modsecurity\.directive,
.ace-modsecurity .ace_keyword\.headers\.modsecurity\.directive\.marker {
  color: #569cd6;
  font-weight: bold;
}

/* ModSecurity variables */
.ace-modsecurity .ace_variable\.parameter\.modsecurity,
.ace-modsecurity .ace_keyword\.macro\.modsecurity {
  color: #9cdcfe;
}

/* ModSecurity actions */
.ace-modsecurity .ace_keyword\.operator\.modsecurity\.action,
.ace-modsecurity .ace_keyword\.operator\.modsecurity\.action\.ctl,
.ace-modsecurity .ace_keyword\.operator\.modsecurity\.action\.phase,
.ace-modsecurity .ace_keyword\.operator\.modsecurity\.action\.severity {
  color: #c586c0;
  font-weight: bold;
}

/* ModSecurity action parameters */
.ace-modsecurity .ace_string\.modsecurity\.action_parameter,
.ace-modsecurity .ace_constant\.numeric\.modsecurity\.action\.phase_name,
.ace-modsecurity .ace_constant\.numeric\.modsecurity\.action\.severity_name,
.ace-modsecurity .ace_constant\.numeric\.modsecurity\.action\.ctl\.parameter,
.ace-modsecurity .ace_constant\.numeric\.modsecurity\.action\.transform_name {
  color: #ce9178;
}

/* Disruptive actions */
.ace-modsecurity
  .ace_entity\.name\.function\.modsecurity\.action\.disruptive_pass {
  color: #d16969; /* Light red color for disruptive actions */
  font-weight: bold;
}

/* Regular expressions and strings */
.ace-modsecurity .ace_string\.regexp\.modsecurity,
.ace-modsecurity .ace_string\.unquoted\.modsecurity,
.ace-modsecurity .ace_string\.quoted\.modsecurity {
  color: #ce9178;
}

/* Operators */
.ace-modsecurity .ace_keyword\.control\.modsecurity {
  color: #c586c0;
}

/* IP addresses */
.ace-modsecurity .ace_constant\.other\.modsecurity\.ip {
  color: #b5cea8;
}

/* Numbers */
.ace-modsecurity .ace_constant\.numeric\.modsecurity {
  color: #b5cea8;
}

/* Invalid syntax */
.ace-modsecurity .ace_invalid\.illegal\.modsecurity {
  color: #ffffff;
  background-color: #e51400;
  font-weight: bold;
}

/* Punctuation */
.ace-modsecurity .ace_punctuation\.definition\.tag\.apacheconf,
.ace-modsecurity .ace_punctuation\.colon\.modsecurity,
.ace-modsecurity .ace_punctuation\.equals\.modsecurity {
  color: #d4d4d4;
}

/* Apache configuration tags */
.ace-modsecurity .ace_entity\.tag\.apacheconf {
  color: #569cd6;
  font-weight: bold;
}

/* Comments in Apache configuration */
.ace-modsecurity .ace_punctuation\.definition\.comment\.apacheconf,
.ace-modsecurity .ace_comment\.line\.hash\.ini {
  color: #6a9955;
  font-style: italic;
}

table.table.dataTable > tbody > tr.selected > * {
  color: initial !important;
}

table.table.dataTable > tbody > tr.selected a.btn-outline-secondary {
  color: var(--bs-secondary) !important;
}

table.table.dataTable > tbody > tr.selected a.btn-outline-primary {
  color: var(--bs-primary) !important;
}

table.table.dataTable > tbody > tr.selected a.btn-outline-secondary:hover {
  color: #fff !important;
}

table.table.dataTable > tbody > tr.selected a.btn-outline-primary:hover {
  color: #fff !important;
}

table.table.dataTable > tbody > tr.selected a.btn-primary {
  color: #fff !important;
}

.border-dashed {
  border-style: dashed !important;
}

.text-white-80 {
  --bs-text-opacity: 1;
  color: rgba(255, 255, 255, 0.8) !important;
}

a.text-white-80:hover {
  color: rgba(255, 255, 255, 1) !important;
  text-decoration: underline;
}

[role="button"].card:hover {
  color: var(--bs-secondary) !important;
}

[role="button"].card.text-color-hover-danger:hover {
  color: var(--bs-danger) !important;
}

.mt-0_5 {
  margin-top: 0.125rem !important;
}

.slide-out {
  transition: transform 0.7s ease-in-out !important;
  transform: translateX(-100%) !important;
}

#banner-text {
  transition: none;
  transform: translateX(100%); /* Start off-screen to the right */
}

#banner-text.slide-in {
  transition: transform 0.7s ease-in-out;
  transform: translateX(0);
}

.light-href:hover {
  color: var(--bs-primary) !important;
  text-decoration: underline;
}

.authentication-wrapper.authentication-basic .authentication-inner.w-100 {
  max-width: 90% !important;
}

.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown),
.form-floating > .form-control-plaintext:focus,
.form-floating > .form-control-plaintext:not(:placeholder-shown) {
  padding-top: 1.625rem !important;
  padding-bottom: 0.625rem !important;
}

.footer-container .footer-link:hover,
a.courier-prime:hover {
  font-style: italic;
  text-decoration: underline;
}

.w-70 {
  width: 70% !important;
}

.don-jose {
  font-family: var(--font-don-jose);
}

.courier-prime {
  font-family: var(--font-courier-prime);
}

.warning-tooltip {
  --bs-tooltip-bg: var(--bs-warning);
  --bs-tooltip-color: var(--bs-white);
}

.login-background {
  background-image: url("../img/login-background.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100vw;
  height: 100vh;
}

.text-orange {
  color: #ff7f50;
}

.text-amber {
  color: #ffbf00;
}

.text-emerald {
  color: #50c878;
}

.text-pink {
  color: #ff69b4;
}

.text-purple {
  color: #800080;
}

.text-sky {
  color: #87ceeb;
}

.text-turquoise {
  color: #40e0d0;
}

.text-violet {
  color: #ee82ee;
}

.text-rose {
  color: #ff007f;
}

.text-olive {
  color: #808000;
}

.text-lime {
  color: #00ff00;
}

.text-gold {
  color: #ffd700;
}

.text-cyan {
  color: #00ffff;
}

.text-aqua {
  color: #00ffff;
}

.text-indigo {
  color: #4b0082;
}

.text-maroon {
  color: #800000;
}

.text-teal {
  color: #20c997;
}

.blur-overlay {
  position: relative;
}

.blur-overlay .card-body,
.blur-overlay .card-header {
  filter: blur(3px);
  pointer-events: none;
}

.blur-overlay .blur-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bs-bw-green);
  color: #fff;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
  z-index: 1000;
}

.blur-overlay .blur-message a:hover {
  font-style: italic;
}

.layout-page::before {
  display: none;
}

table.table.dataTable > tbody > tr.selected > * {
  box-shadow: inset 0 0 0 9999px rgb(var(--bs-primary-rgb), 0.1) !important;
}

div.dtsp-panesContainer {
  width: 100%;
}

table.dataTable input.dt-select-checkbox {
  width: 14px;
  height: 14px;
  margin-bottom: 3.3px;
}

table.dataTable input.dt-select-checkbox:indeterminate:after {
  top: 4px;
  left: 4px;
}

table.dataTable input.dt-select-checkbox:checked:after {
  margin-top: -5px;
}

:not(.btn-group):not(.input-group)
  > .btn-group.dt-buttons
  > .btn:not([class*="btn-outline-"]):first-child.disabled {
  border-left-color: var(--bs-btn-disabled-border-color) !important;
}

.dtsp-searchPanes
  :not(.btn-group):not(.input-group)
  > .btn-group
  > .btn:not([class*="btn-outline-"]):last-of-type {
  border-left-color: rgb(206, 212, 218) !important;
  border-right-color: rgb(206, 212, 218) !important;
}

.dtsp-nameCont,
.dtsp-name {
  display: flex !important;
  align-items: center !important;
}

div.dtsp-panesContainer
  div.dtsp-searchPane
  div.dt-container
  div.dtsp-nameCont
  span.badge {
  margin-top: 0;
}

.dt-scroll-body {
  height: 150px !important;
  max-height: 150px !important;
}

#plugins-dropdown-menu .input-group-text,
#plugins-dropdown-menu .form-control,
#services-dropdown-menu .input-group-text,
#services-dropdown-menu .form-control,
#templates-dropdown-menu .input-group-text,
#templates-dropdown-menu .form-control {
  border-radius: 0;
}

#plugins-dropdown-menu .input-group:focus-within,
#services-dropdown-menu .input-group:focus-within,
#templates-dropdown-menu .input-group:focus-within {
  box-shadow: none;
}

@media (min-width: 992px) {
  .w-lg-70 {
    width: 70% !important;
  }
}

/* Align and style the modal content */
.modal-dialog {
  max-width: 600px; /* Restrict modal width */
}

@media (max-width: 768px) {
  .modal-dialog {
    max-width: 90%; /* Adjust modal width on smaller screens */
  }
}

#floating-settings-button {
  bottom: 2.1rem !important;
  right: 1.5rem !important;
  z-index: 1080;
}

/* Service field transition effects */
.service-field {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  transition: all 0.3s ease-in-out;
}

.service-field.show {
  max-height: 120px; /* Adjust based on content size */
  opacity: 1;
  margin-bottom: 1rem;
  padding-top: 0.5rem;
}

/* Make modal transitions smoother */
.modal.fade .modal-dialog {
  transition: transform 0.2s ease-out;
}

.modal-content {
  transition: all 0.2s ease;
}

.qr-code {
  background-color: #fff;
}

/* Template Steps Navigation Styles */
.step-navigation-list {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  border-radius: 0.375rem;
}

.step-navigation-item {
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
}

.step-navigation-item.active {
  border-left-color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.05);
  box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.1);
}

.step-navigation-item:hover:not(.active) {
  background-color: rgba(var(--bs-primary-rgb), 0.03);
  border-left-color: rgba(var(--bs-primary-rgb), 0.3);
}

.step-navigation-item .step-number {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}

.step-navigation-item:not(.active) .step-number:hover {
  opacity: 0.8;
}

.step-content-wrapper {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  padding-right: 0.5rem;
}

/* Ensure proper Bootstrap tab behavior */
.template-steps-content .tab-pane {
  display: none;
}

.template-steps-content .tab-pane.active {
  display: block;
}

.template-steps-content .tab-pane.show.active {
  display: block;
}

/* Always hide inactive tab panes regardless of fade classes */
.template-steps-content .tab-pane:not(.active) {
  display: none !important;
}

/* Step validation styles */
.step-navigation-item.has-validation-error {
  border-left-color: var(--bs-danger);
  background-color: rgba(var(--bs-danger-rgb), 0.05);
}

.step-navigation-item.has-validation-error .fw-bold {
  color: var(--bs-danger) !important;
}

.step-navigation-item.has-validation-error:hover {
  background-color: rgba(var(--bs-danger-rgb), 0.1);
}

.step-number.btn-danger {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
}

/* Subtle animation for validation errors */
@keyframes pulse-error {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0.2);
  }
  70% {
    box-shadow: 0 0 0 4px rgba(var(--bs-danger-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0);
  }
}

.step-number.btn-danger,
.step-number.btn-outline-danger {
  animation: pulse-error 1.5s 1;
}

.steps-nav-container {
  top: 95px;
}

/* Reset setting button styling */
.reset-setting {
  position: absolute !important;
  right: 2.5rem;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2;
  margin: 0 !important;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem !important;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease !important;
  border-radius: 0.25rem;
  color: #ff7f50 !important;
}

span.cursor-pointer ~ .reset-setting {
  right: 3rem !important;
}

/* Show reset button on parent container hover */
.form-floating:hover .reset-setting:not(.text-muted),
.form-check:hover .reset-setting:not(.text-muted) {
  opacity: 1;
  visibility: visible;
}

/* Adjust position when near validation feedback */
.is-invalid ~ .reset-setting:where(.invalid-feedback ~ *) {
  top: calc(50% - 10px) !important;
}

.reset-setting.text-muted {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0 !important;
  visibility: hidden !important;
}

.reset-setting:hover:not(.text-muted) {
  transform: translateY(-50%) scale(1.05) !important;
  color: #ff4500 !important;
}

/* Add more space for select arrows and reset button */
.form-select.plugin-setting,
.form-select.plugin-setting:focus {
  background-position: right 0.75rem center;
  padding-right: 4rem !important;
  transition: background-position 0.2s ease;
}

/* Move arrow when reset button is visible (on hover) */
.form-floating:hover .form-select.plugin-setting:not(.text-muted) {
  background-position: right 3rem center;
}

.was-validated .form-select.plugin-setting:valid,
.form-select.plugin-setting.is-valid {
  background-position:
    right 0.75rem center,
    center right 1.5rem;
  padding-right: 4rem !important;
  transition: background-position 0.2s ease;
}

/* Move arrow and validation icon when reset button is visible (on hover) */
.form-floating:hover
  .was-validated
  .form-select.plugin-setting:valid:not(.text-muted),
.form-floating:hover .form-select.plugin-setting.is-valid:not(.text-muted) {
  background-position:
    right 3rem center,
    center right 4.5rem;
}

/* Adjust input text padding to avoid overlap with reset button */
.form-control.plugin-setting {
  padding-right: 3.5rem !important;
}

.form-check .form-check-label {
  padding-right: 3rem !important;
}

.was-validated .form-check-input:valid:checked,
.form-check-input.is-valid:checked {
  background-color: #0b354a;
}

#data-notifications-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
}
#notifications-toast-container {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.newsletter-signup {
  position: sticky;
  bottom: 0;
  z-index: 1;
}

/* Plugin navigation item styles */
.plugin-navigation-item {
  border-left: 3px solid transparent;
  transition: all 0.25s ease;
  margin-bottom: 0.5rem;
  border-radius: 0.375rem;
}

.plugin-navigation-item.active {
  border-left-color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.08);
  box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.15);
}

.plugin-navigation-item:hover:not(.active) {
  background-color: rgba(var(--bs-primary-rgb), 0.05);
  border-left-color: rgba(var(--bs-primary-rgb), 0.4);
}

.plugin-navigation-item .step-number {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease-in-out;
}

.plugin-navigation-item.active .step-number {
  transform: scale(1.1);
}

.plugin-navigation-item:hover .step-number:not(.active) {
  transform: scale(1.05);
}

.plugin-navigation-item .step-details {
  transition: all 0.25s ease;
}

.plugin-navigation-item.active .step-details .fw-bold {
  color: var(--bs-primary) !important;
}

.plugin-navigation-item small.text-muted {
  transition: opacity 0.2s ease;
  opacity: 0.7;
}

.plugin-navigation-item:hover small.text-muted,
.plugin-navigation-item.active small.text-muted {
  opacity: 1;
}

/* Fade effect for plugin tab panes */
.plugin-tab-pane {
  opacity: 0;
  transition: opacity 0.2s;
  display: none;
}
.plugin-tab-pane.show {
  display: block;
}
.plugin-tab-pane.fade-in {
  opacity: 1;
}

/*
* Multiselect dropdown styling to match form-select
******************************************************************************/

.multiselect-toggle {
  text-align: left !important;
  position: relative;
  border: var(--bs-border-width) solid var(--bs-border-color);
  color: var(--bs-body-color);
  cursor: pointer;
}

.multiselect-toggle:hover:not([disabled]):not([focus]) {
  border-color: var(--bs-primary);
}

.multiselect-toggle:focus {
  border-color: var(--bs-primary) !important;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.multiselect-toggle:disabled {
  background-color: var(--bs-secondary-bg);
  opacity: var(--bs-btn-disabled-opacity);
  cursor: not-allowed;
}

.multiselect-toggle::after {
  display: none; /* Hide the default dropdown arrow */
}

/* Remove default dropdown arrow for multiselect */
.multiselect-toggle.dropdown-toggle::before {
  display: none;
}

/* Ensure text doesn't overlap with arrow */
.multiselect-text {
  padding-right: 2rem;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dark mode styles for multiselect */
.dark-style .multiselect-toggle {
  background-color: #0c283a;
  border-color: #384551;
  color: #fff;
}

.dark-style .multiselect-toggle:hover:not([disabled]):not([focus]) {
  border-color: #fff;
}

.dark-style .multiselect-toggle:focus {
  border-color: #fff !important;
}

.dark-style .multiselect-toggle:disabled {
  background-color: #133044;
}

/* Multivalue setting styles */
.multivalue-container {
  width: 100%;
}

.multivalue-inputs {
  width: 100%;
}

.multivalue-input-group {
  width: 100%;
  margin-bottom: 0.5rem;
}

.multivalue-input-group:last-child {
  margin-bottom: 0;
}

.multivalue-input-group .form-control {
  flex: 1;
  border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
}

.multivalue-input-group .btn {
  border-left: 0;
  min-width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0;
}

.multivalue-input-group .btn:last-child {
  border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
}

.multivalue-input-group .btn:only-of-type {
  border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
}

.multivalue-input-group .btn i {
  font-size: 16px;
}

.multivalue-input-group .btn-outline-success {
  color: var(--bs-success);
  border-color: var(--bs-border-color);
}

.multivalue-input-group .btn-outline-success:hover {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
  color: white;
}

.multivalue-input-group .btn-outline-danger {
  color: var(--bs-danger);
  border-color: var(--bs-border-color);
}

.multivalue-input-group .btn-outline-danger:hover {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
  color: white;
}

/* Focus styles for multivalue inputs */
.multivalue-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
  z-index: 3;
}

.multivalue-input-group:focus-within .btn {
  border-color: var(--bs-primary);
}

/* Animation for adding/removing multivalue items */
.multivalue-input-group {
  animation: fadeInUp 0.3s ease-in-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Disabled state for multivalue containers */
.multivalue-container .multivalue-input:disabled {
  background-color: var(--bs-secondary-bg);
  opacity: 0.65;
}

.multivalue-container .btn:disabled {
  opacity: 0.65;
  pointer-events: none;
}

/* Help text styling */
.multivalue-container .text-muted {
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.multivalue-container .text-muted code {
  background-color: var(--bs-gray-100);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.8em;
}

/* Responsive design for multivalue buttons */
@media (max-width: 576px) {
  .multivalue-input-group .btn {
    min-width: 34px;
    padding: 0.375rem 0.375rem;
  }

  .multivalue-input-group .btn i {
    font-size: 14px;
  }
}

/* Multivalue toggle button */
.multivalue-toggle {
  text-align: center;
}

.multivalue-toggle-btn {
  transition: all 0.2s ease;
  border-radius: 0.375rem;
}

.multivalue-toggle-btn:hover {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
  color: white;
}

.multivalue-toggle-btn .bx {
  transition: transform 0.2s ease-in-out !important;
}

.advanced-settings-toggle {
  cursor: pointer;
}

.advanced-settings-toggle i {
  transition: transform 0.3s ease;
}

.multivalue-toggle-btn.expanded .bx {
  transform: rotate(180deg);
}

/* Hide overflow when collapsed */
.multivalue-inputs {
  position: relative;
}

.pro-alert {
  background: none;
  border: linear-gradient(135deg, #0b354a, var(--bs-bw-blue));
  border-radius: 0.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.pro-alert .alert-link {
  font-weight: bold !important;
  text-decoration: underline !important;
}

.pro-card {
  background: linear-gradient(135deg, #0b354a, var(--bs-bw-blue));
  border-radius: 0.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.pro-card h6,
.pro-card .list-group-item {
  color: #fff;
}

/*
* Dark mode overrides
******************************************************************************/

.dark-style body {
  color: #fff;
  background-color: #0d2f45;
  color-scheme: dark;
}

.dark-style,
[data-bs-theme="dark"] {
  --bs-primary: #fff;
  --bs-primary-rgb: 255, 255, 255;
  --bs-primary-text-emphasis: #fff;
  --bs-link-color: #fff;
  --bs-link-color-rgb: 255, 255, 255;
  --bs-breadcrumb-divider-color: #fff;
  --bs-body-color-rgb: 255, 255, 255;
  --dt-row-selected: 31, 31, 31;
  --bs-breadcrumb-item-active-color: #fff;
}

.dark-style .list-group {
  --bs-list-group-color: #fff;
}

.dark-style .btn {
  --bs-btn-color: #fff;
}

.dark-style .btn:hover {
  --bs-btn-hover-color: #fff;
}

.dark-style .card {
  --bs-card-title-color: #fff;
}

.dark-style .dropdown-menu {
  --bs-dropdown-bg: #0c283a;
}

.dark-style .offcanvas,
.dark-style .offcanvas-xxl,
.dark-style .offcanvas-xl,
.dark-style .offcanvas-lg,
.dark-style .offcanvas-md,
.dark-style .offcanvas-sm {
  --bs-offcanvas-bg: #0d2f45;
}

.dark-style .nav-link,
.dark-style .breadcrumb-item.active,
.dark-style .card .card-header,
.dark-style .card .card-body,
.dark-style .form-label,
.dark-style .form-control,
.dark-style .form-select,
.dark-style .input-group-text {
  color: #fff !important;
}

.dark-style .breadcrumb-item,
.dark-style .breadcrumb-item a {
  color: #9caeb7;
}

.dark-style .breadcrumb-item:hover,
.dark-style .breadcrumb-item:focus,
.dark-style .breadcrumb-item a:hover,
.dark-style .breadcrumb-item a:focus {
  color: #fff;
}

.dark-style .nav-pills .nav-link.active,
.dark-style .nav-pills .nav-link.active:hover,
.dark-style .nav-pills .nav-link.active:focus {
  background-color: #0a4b69;
}

.dark-style .breadcrumb-item + .breadcrumb-item::before {
  color: #9caeb7;
}

.dark-style .btn-primary:hover {
  color: #07354a !important;
}

.dark-style .btn-light {
  background-color: #fff;
  border-color: #fff;
  box-shadow: none;
  color: #000;
}

.dark-style .card {
  background-color: #0c283a;
  border-color: #0c283a;
  color: #fff;
}

.dark-style .modal {
  --bs-modal-color: #fff;
  --bs-modal-bg: #0c283a;
}

.dark-style .input-group:focus-within .form-control,
.dark-style .input-group:focus-within .input-group-text {
  border-color: #fff !important;
}

.dark-style .text-body {
  color: #fff !important;
}

.dark-style .bg-footer-theme .footer-link {
  color: #cdd7db;
}

.dark-style h6,
.dark-style .h6,
.dark-style h5,
.dark-style .h5,
.dark-style h4,
.dark-style .h4,
.dark-style h3,
.dark-style .h3,
.dark-style h2,
.dark-style .h2,
.dark-style h1,
.dark-style .h1 {
  color: #fff;
}

.dark-style .x-logo {
  filter: brightness(0) invert(1);
}

.dark-style .text-primary {
  color: var(--bs-primary) !important;
}

.dark-style .text-primary.shine {
  color: rgba(var(--bs-primary-rgb), 0.1) !important;
  background-color: var(--bs-primary) !important;
}

.dark-style .text-muted {
  color: #9caeb7 !important;
}

.dark-style .sticky-card {
  background-color: rgba(12, 40, 58, 0.95) !important;
}

.dark-style .layout-navbar,
.dark-style .layout-menu {
  background-color: #0c283a !important;
  color: #fff !important;
}

.dark-style .bg-menu-theme .menu-link,
.dark-style .bg-menu-theme .menu-horizontal-prev,
.dark-style .bg-menu-theme .menu-horizontal-next {
  color: #fff;
}

.dark-style .bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
  color: #07354a !important;
  background-color: #fff !important;
}

.dark-style .bg-menu-theme .menu-inner > .menu-item.active:before {
  background-color: #fff !important;
}

.dark-style .btn-outline-primary {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}

html:not([dir="rtl"]).dark-style .border-primary,
html[dir="rtl"].dark-style .border-primary {
  border-color: var(--bs-primary) !important;
}

.dark-style .form-floating > .form-control:focus ~ label,
.dark-style
  .form-floating
  > .form-control:focus:not(:placeholder-shown)
  ~ label,
.dark-style .form-floating > .form-select:focus ~ label,
.dark-style
  .form-floating
  > .form-select:focus:not(:placeholder-shown)
  ~ label {
  color: #fff;
}

.dark-style .form-select {
  --bs-form-select-bg-img: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 22" fill="none"%3e%3cpath d="M10.9999 12.0743L15.5374 7.53676L16.8336 8.83292L10.9999 14.6666L5.16626 8.83292L6.46243 7.53676L10.9999 12.0743Z" fill="%23ffffff" fill-opacity="0.9"/%3e%3c/svg%3e');
  background-color: #0c283a;
}

.dark-style .dropdown-item {
  color: #fff;
}

.dark-style .dropdown-item:not(.disabled).active,
.dark-style .dropdown-item:not(.disabled):active {
  color: #fff !important;
  background-color: #0a4b69;
}

.dark-style .bg-secondary {
  color: #fff;
}

.dark-style .table th {
  color: #fff;
}

.dark-style .table > :not(caption) > * > * {
  color: #fff;
}

.dark-style .form-control:focus,
.dark-style .form-select:focus {
  border-color: #fff !important;
}

.dark-style .btn-outline-primary.disabled,
.dark-style .btn-outline-primary:disabled {
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.dark-style .form-check-label {
  color: #fff;
}

.dark-style a {
  color: #cdd7db;
}

.dark-style a:hover {
  color: #fff;
}

.dark-style .bg-label-secondary {
  color: #000 !important;
}

.dark-style .bg-bw-green {
  background-color: var(--bs-bw-green);
}

.dark-style .apexcharts-text {
  fill: #fff;
}
.dark-style .apexcharts-tooltip,
.dark-style .apexcharts-tooltip-title {
  background-color: #333;
  color: #fff;
  border: 1px solid #555;
}
.dark-style .apexcharts-legend-text {
  color: #fff;
  border: 1px solid #555;
}

.dark-style .btn-check:checked + .btn-primary,
.dark-style .btn-check:active + .btn-primary,
.dark-style .btn-primary:active,
.dark-style .btn-primary.active,
.dark-style .btn-primary.show.dropdown-toggle,
.dark-style .show > .btn-primary.dropdown-toggle {
  color: #07354a !important;
}

.dark-style .leaflet-container {
  background: #000;
}

.dark-style .leaflet-layer,
.dark-style .leaflet-control-zoom-in,
.dark-style .leaflet-control-zoom-out {
  filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

.dark-style .was-validated .input-group .form-control:invalid:focus,
.input-group .form-control.is-invalid:focus {
  border-color: var(--bs-form-invalid-color) !important;
}

.dark-style
  .was-validated
  .input-group
  .form-control:invalid:focus
  ~ .input-group-text,
.dark-style .input-group .form-control.is-invalid:focus ~ .input-group-text {
  border-color: var(--bs-form-invalid-color) !important;
}

.dark-style .was-validated .input-group .form-control:valid:focus,
.dark-style .input-group .form-control.is-valid:focus {
  border-color: var(--bs-form-valid-color) !important;
}

.dark-style div.dts div.dt-scroll-body table,
.dark-style div.dts div.dataTables_scrollBody table {
  background-color: #0c283a;
}

.dark-style .form-floating > :disabled ~ label,
.dark-style .form-floating > .form-control:disabled ~ label {
  color: #9caeb7;
}

.dark-style .form-switch .form-check-input {
  background-color: #484d50;
}

.dark-style .form-check-input:checked {
  background-color: #186285;
}

@keyframes darkColorPhase {
  0% {
    box-shadow: 0 1px 20px 1px var(--bs-secondary); /* Primary shadow */
  }
  50% {
    box-shadow: 0 1px 20px 1px var(--bs-bw-green); /* Secondary shadow */
  }
  100% {
    box-shadow: 0 1px 20px 1px var(--bs-secondary); /* Primary shadow */
  }
}

.dark-style .buy-now .btn-buy-now {
  animation: darkColorPhase 3s infinite; /* Apply the color phasing animation */
}

html:not(.layout-menu-collapsed).dark-style
  .bg-menu-theme
  .menu-inner
  .menu-item.open
  > .menu-link,
.layout-menu-hover.layout-menu-collapsed.dark-style
  .bg-menu-theme
  .menu-inner
  .menu-item.open
  > .menu-link,
html:not(.layout-menu-collapsed).dark-style
  .bg-menu-theme
  .menu-inner
  .menu-item
  .menu-link:not(.active):hover,
.layout-menu-hover.layout-menu-collapsed.dark-style
  .bg-menu-theme
  .menu-inner
  .menu-item
  .menu-link:not(.active):hover {
  background-color: #0b394e;
}

html.dark-style div.dts div.dt-scroll-body table,
html.dark-style div.dts div.dataTables_scrollBody table {
  background-color: #0c283a;
}

.dark-style table.table.dataTable > tbody > tr.selected > * {
  color: #fff !important;
}

.dark-style table.table.dataTable > tbody > tr.selected a {
  color: #fff !important;
}

.dark-style table.table.dataTable > tbody > tr.selected a.btn-primary {
  color: #0b354a !important;
}

.dark-style .pagination {
  --bs-pagination-color: #fff;
  --bs-pagination-bg: rgba(34, 48, 62, 0.06);
  --bs-pagination-border-color: #ced1d5;
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: rgba(145, 155, 165, 0.06);
  --bs-pagination-hover-border-color: #ced1d5;
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: rgba(145, 155, 165, 0.06);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #696cff;
  --bs-pagination-active-border-color: #696cff;
  --bs-pagination-disabled-color: #384551;
  --bs-pagination-disabled-bg: rgba(34, 48, 62, 0.06);
  --bs-pagination-disabled-border-color: #ced1d5;
}

.dark-style thead,
.dark-style tbody,
.dark-style tfoot,
.dark-style tr,
.dark-style td,
.dark-style th {
  border-color: #384551;
}

.dark-style .btn-primary {
  background-color: #fff;
  border-color: #fff;
  color: #000;
}

.dark-style div.dt-processing > div:last-child > div {
  background-color: #fff;
}

.dark-style .form-control:disabled {
  background-color: #133044;
}

/* Ban modal scrollability improvements */
#modal-ban-ips .modal-body {
  max-height: 60vh;
  overflow-y: auto;
}

#bans-container {
  overflow-y: visible;
  padding-bottom: 10px;
}

@media (max-height: 768px) {
  #modal-ban-ips .modal-body {
    max-height: 50vh;
  }
}

@media (max-height: 576px) {
  #modal-ban-ips .modal-body {
    max-height: 40vh;
  }
}

/* Keep the header and buttons visible when scrolling */
#modal-ban-ips .modal-header {
  position: sticky;
  top: 0;
  background-color: inherit;
  z-index: 5;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

#modal-ban-ips .modal-footer {
  position: sticky;
  bottom: 0;
  background-color: inherit;
  z-index: 5;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* Ensure the ban items have proper spacing */
#bans-container .ban-item {
  margin-bottom: 8px;
}

/* Adjust dark mode styles for validation */
.dark-style .step-navigation-item.has-validation-error {
  background-color: rgba(var(--bs-danger-rgb), 0.15);
}

.dark-style .step-navigation-item.has-validation-error:hover {
  background-color: rgba(var(--bs-danger-rgb), 0.2);
}

.dark-style .list-group-item.active,
.dark-style .list-group-item.active:hover,
.dark-style .list-group-item.active:focus {
  background-color: #0a4b69 !important;
  color: #fff !important;
}

/* Dark mode reset button styling */
.dark-style .reset-setting {
  color: #ff7f50 !important;
}

.dark-style .reset-setting:hover:not(.text-muted) {
  color: #ff4500 !important;
}

/* Dark mode styles for multivalue */
.dark-style .multivalue-container .text-muted code {
  background-color: var(--bs-gray-800);
}

.dark-style .multivalue-input-group .btn-outline-success {
  color: var(--bs-success);
  border-color: var(--bs-border-color);
}

.dark-style .multivalue-input-group .btn-outline-danger {
  color: var(--bs-danger);
  border-color: var(--bs-border-color);
}

.dark-style .pro-alert .alert-link {
  color: #cdd7db;
}

.dark-style .pro-alert .alert-link:hover {
  color: var(--bs-bw-green) !important;
}