/*
* 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;
}

.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 */
  }
}

.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: 1100;
}

/*
* 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;
}

.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: 1000;
}

#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;
}

.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;
}

@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;
}

.bg-light-subtle {
  overflow-x: hidden;
}

.bg-dark-subtle {
  overflow-x: hidden;
}

/*
* 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 .img-fluid.qr-code,
.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;
}