*::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}

*::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(var(--bs-body-bg-rgb), 0.05);
}

*::-webkit-scrollbar-track:hover {
  background-color: rgba(var(--bs-body-bg-rgb), 0.5);
}

*::-webkit-scrollbar-track:active {
  background-color: rgba(var(--bs-body-bg-rgb), 0.5);
}

*::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: rgba(var(--bs-body-color-rgb), 0.25);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(var(--bs-body-color-rgb), 0.5);
}

*::-webkit-scrollbar-thumb:active {
  background-color: rgba(var(--bs-body-color-rgb), 0.75);
}

.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

.scrollbar-hidden {
  scrollbar-width: none;
}

.custom-nav-tabs {
  overflow-x: scroll;
  flex-wrap: nowrap !important;
  white-space: nowrap;
  user-select: none;
  scroll-behavior: smooth;
}

.custom-nav-tabs .nav-link:focus,
.custom-nav-tabs .nav-link:active {
  color: var(--bs-body-color) !important;
}

body {
  min-width: 20rem;
}

.fv-plugins-bootstrap5:not(.fv-plugins-bootstrap5-form-inline)
  label
  ~ .fv-plugins-icon {
  top: 1.5rem !important;
}

.fv-plugins-bootstrap5:not(.fv-plugins-bootstrap5-form-inline)
  .form-password-toggle
  label
  ~ .fv-plugins-icon {
  display: none;
}
.rich-text-content {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.rich-text-content p:last-child,
.rich-text-content ul:last-child,
.rich-text-content ol:last-child,
.rich-text-content blockquote:last-child {
  margin-bottom: 0;
}

.rich-text-editor .ql-editor {
  min-height: 10rem;
}
/*
 * Nuven Pay design system
 *
 * These overrides deliberately sit after the vendor theme so the existing
 * Plates views inherit the new visual language without changing their markup.
 */
:root {
  --nuven-cloud: #fcfcff;
  --nuven-surface: #ffffff;
  --nuven-ink: #17152e;
  --nuven-primary: #5b5fef;
  --nuven-primary-hover: #4b4fd9;
  --nuven-mint: #72dfc1;
  --nuven-lavender: #b9a8ff;
  --nuven-peach: #ffb38a;
  --nuven-mist: #f3f1fa;
  --nuven-border: #ded9ec;
  --nuven-muted: #625f76;
  --nuven-radius: 1rem;
  --bs-primary: var(--nuven-primary);
  --bs-primary-rgb: 91, 95, 239;
  --bs-link-color: var(--nuven-primary);
  --bs-link-hover-color: var(--nuven-primary-hover);
  --bs-body-font-family: 'Manrope', sans-serif;
  --bs-body-bg: var(--nuven-cloud);
  --bs-body-color: var(--nuven-ink);
}

body {
  background:
    radial-gradient(circle at 83% -12%, rgba(114, 223, 193, 0.22), transparent 24rem),
    radial-gradient(circle at 42% -20%, rgba(185, 168, 255, 0.16), transparent 28rem),
    var(--nuven-cloud) !important;
  color: var(--nuven-ink);
  font-family: 'Manrope', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.text-heading {
  color: var(--nuven-ink) !important;
  letter-spacing: -0.025em;
}

.text-muted,
.text-secondary {
  color: var(--nuven-muted) !important;
}

.nuven-brand-logo {
  display: block;
  height: auto;
  max-height: 1.875rem;
  width: 8.875rem;
}

.nuven-login-logo {
  display: block;
  width: 15rem;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

.layout-menu {
  background: #17152e !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 10px 0 28px rgba(23, 21, 46, 0.14);
}

.app-brand {
  min-height: 5.25rem;
  padding-inline: 1.5rem;
}

.layout-navbar {
  min-height: 4.5rem;
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(222, 217, 236, 0.8) !important;
  border-radius: var(--nuven-radius);
  box-shadow: 0 10px 28px rgba(23, 21, 46, 0.055) !important;
  backdrop-filter: blur(1rem);
}

.card,
.dropdown-menu,
.modal-content,
.offcanvas {
  border-color: var(--nuven-border) !important;
}

.card,
.modal-content {
  background: var(--nuven-surface) !important;
  border-radius: var(--nuven-radius);
}

.card {
  box-shadow: 0 12px 30px rgba(23, 21, 46, 0.055) !important;
}

.dropdown-menu {
  border-radius: 0.875rem;
  box-shadow: 0 1rem 2.5rem rgba(21, 20, 38, 0.12);
}

.form-control,
.form-select,
.input-group-text,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--nuven-surface);
  border-color: var(--nuven-border) !important;
  border-radius: 0.75rem;
  color: var(--nuven-ink);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--nuven-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(91, 95, 239, 0.12);
}

.table > :not(caption) > * > * {
  border-bottom-color: var(--nuven-border);
}

.table thead th {
  color: var(--nuven-muted);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.btn {
  border-radius: 0.75rem;
  font-weight: 700;
}

.btn-primary {
  box-shadow: 0 0.5rem 1.25rem rgba(91, 95, 239, 0.2);
}

html[class] .btn.btn-primary {
  background-color: var(--nuven-primary) !important;
  border-color: var(--nuven-primary) !important;
  color: #fff !important;
}

html[class] .btn.btn-primary:is(:hover, :focus, :active, .active, .show):not(:disabled):not(.disabled),
html[class] .btn-check:checked + .btn.btn-primary,
html[class] .btn-check:focus + .btn.btn-primary {
  background: var(--nuven-primary-hover) !important;
  border-color: var(--nuven-primary-hover) !important;
  color: #fff !important;
  box-shadow: 0 0.25rem 0.75rem rgba(91, 95, 239, 0.22) !important;
}

.btn-outline-primary {
  border-color: var(--nuven-primary) !important;
  color: var(--nuven-primary) !important;
}

html[class] .btn.btn-outline-primary:is(:hover, :focus, :active, .active, .show):not(:disabled):not(.disabled) {
  background: var(--nuven-primary) !important;
  border-color: var(--nuven-primary) !important;
  color: #fff !important;
}

.bg-menu-theme .menu-header {
  color: #aaa2c3;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.bg-menu-theme .menu-link {
  border-radius: 0.75rem;
  color: #c9c2dc;
  font-weight: 650;
  margin-inline: 0.625rem;
  padding-inline: 0.875rem;
}

.bg-menu-theme .menu-link:hover,
.bg-menu-theme .menu-link:focus,
.bg-menu-theme .menu-item.open > .menu-link {
  background-color: rgba(91, 95, 239, 0.15) !important;
  color: #ffffff !important;
}

.bg-menu-theme .menu-icon {
  color: currentColor !important;
}

.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle),
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle)::before {
  background-color: var(--nuven-primary) !important;
  color: #ffffff !important;
}

.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
  font-weight: 800;
}

.menu-vertical .menu-sub .menu-link {
  font-size: 0.8125rem;
}

.bg-primary {
  background-color: var(--nuven-primary) !important;
}

html .bg-label-primary {
  background: rgba(91, 95, 239, 0.14) !important;
  color: var(--nuven-primary) !important;
}

html .text-primary,
html .link-primary {
  color: var(--nuven-primary) !important;
}

html .nuven-product-link {
  color: var(--nuven-primary);
}

html .nuven-product-link:hover,
html .nuven-product-link:focus-visible {
  color: var(--nuven-primary-hover);
  text-decoration: underline;
}

html.dark-style .nuven-product-link {
  color: var(--nuven-lavender);
}

html.dark-style .nuven-product-link:hover,
html.dark-style .nuven-product-link:focus-visible {
  color: var(--nuven-mint);
}

html .nuven-product-details a:not(.btn):not(.dropdown-item) {
  color: var(--nuven-primary);
}

html .nuven-product-details a:not(.btn):not(.dropdown-item):hover,
html .nuven-product-details a:not(.btn):not(.dropdown-item):focus-visible {
  color: var(--nuven-primary-hover);
  text-decoration: underline;
}

html.dark-style .nuven-product-details a:not(.btn):not(.dropdown-item) {
  color: var(--nuven-lavender);
}

html.dark-style .nuven-product-details a:not(.btn):not(.dropdown-item):hover,
html.dark-style .nuven-product-details a:not(.btn):not(.dropdown-item):focus-visible {
  color: var(--nuven-mint);
}

html .nuven-product-details .alert-primary {
  background: rgba(91, 95, 239, 0.14);
  border-color: rgba(91, 95, 239, 0.25);
  color: var(--nuven-primary);
}

html.dark-style .nuven-product-details .alert-primary {
  color: var(--nuven-lavender);
}

html .nuven-product-details .nav-tabs {
  background: var(--nuven-surface);
  border-color: var(--nuven-border);
}

html .nuven-product-details .nav-tabs .nav-link {
  color: var(--nuven-muted);
  background: transparent;
}

html .nuven-product-details .nav-tabs .nav-link:hover,
html .nuven-product-details .nav-tabs .nav-link:focus-visible {
  background: var(--nuven-mist);
  color: var(--nuven-ink);
}

html .nuven-product-details .nav-tabs .nav-link.active {
  background: var(--nuven-surface);
  color: var(--nuven-primary);
  box-shadow: inset 0 -2px 0 var(--nuven-primary);
}

html.dark-style .nuven-product-details .nav-tabs .nav-link.active {
  color: var(--nuven-lavender);
  box-shadow: inset 0 -2px 0 var(--nuven-lavender);
}

html .nuven-product-details .tab-content {
  background: var(--nuven-surface);
  box-shadow: none;
}

html .nuven-product-details .rockets {
  background-color: var(--nuven-mist) !important;
  background-image: linear-gradient(to right, var(--nuven-primary) calc(100% * var(--rockets)), transparent calc(100% * var(--rockets))) !important;
  background-size: 100% !important;
  background-position: 0 !important;
}

html .nuven-product-details .rockets > span {
  rotate: none;
  background: var(--nuven-surface) !important;
  border-color: var(--nuven-border) !important;
}

html[class] .nuven-product-details .nuven-copy-highlight {
  background: var(--nuven-mist) !important;
  border-color: var(--nuven-primary) !important;
}

/* Product creation: vendor stepper, switch and Quill colors are hard-coded. */
html #new-product-wizard {
  --nuven-form-accent: var(--nuven-primary);
  background: var(--nuven-surface);
  color: var(--nuven-ink);
  border: 1px solid var(--nuven-border);
}

html.dark-style #new-product-wizard {
  --nuven-form-accent: var(--nuven-lavender);
}

html #new-product-wizard .bs-stepper-header {
  background: var(--nuven-surface);
  border-color: var(--nuven-border);
}

html #new-product-wizard .bs-stepper-title,
html #new-product-wizard .form-label,
html #new-product-wizard .form-check-label,
html #new-product-wizard .switch-label {
  color: var(--nuven-ink);
}

html #new-product-wizard .bs-stepper-subtitle,
html #new-product-wizard .form-text,
html #new-product-wizard .line {
  color: var(--nuven-muted) !important;
}

html #new-product-wizard .bs-stepper-circle {
  background: var(--nuven-mist);
  color: var(--nuven-muted);
}

html #new-product-wizard .step.active .bs-stepper-circle {
  background: var(--nuven-primary) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(91, 95, 239, 0.22);
}

html #new-product-wizard .step.active .bs-stepper-label,
html #new-product-wizard .step.active .bs-stepper-title {
  color: var(--nuven-form-accent) !important;
}

html #new-product-wizard a:not(.btn) {
  color: var(--nuven-form-accent);
}

html #new-product-wizard a:not(.btn):hover {
  color: var(--nuven-primary-hover);
}

html.dark-style #new-product-wizard a:not(.btn):hover {
  color: var(--nuven-mint);
}

html #new-product-wizard .switch-input:checked ~ .switch-toggle-slider {
  background: var(--nuven-primary);
  border-color: var(--nuven-primary) !important;
}

html #new-product-wizard .switch-input:focus ~ .switch-toggle-slider,
html #new-product-wizard .form-check-input:focus,
html #new-product-wizard .form-control:not(.is-invalid):focus {
  border-color: var(--nuven-form-accent) !important;
  box-shadow: 0 0 0 0.2rem rgba(91, 95, 239, 0.18);
}

html #new-product-wizard .form-control::file-selector-button {
  background: var(--nuven-mist);
  color: var(--nuven-ink);
  border-color: var(--nuven-border);
}

html #new-product-wizard .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background: var(--nuven-border);
}

html .ql-snow {
  --nuven-form-accent: var(--nuven-primary);
}

html.dark-style .ql-snow {
  --nuven-form-accent: var(--nuven-lavender);
}

html[class] .ql-toolbar,
html[class] .ql-container,
html[class] .ql-snow .ql-picker-options,
html[class] .ql-snow .ql-tooltip {
  background: var(--nuven-surface) !important;
  color: var(--nuven-ink) !important;
  border-color: var(--nuven-border) !important;
}

html[class] .ql-snow .ql-editor,
html[class] .ql-snow .ql-picker-label,
html[class] .ql-snow .ql-picker-item {
  color: var(--nuven-ink) !important;
}

html[class] .ql-snow .ql-editor,
html[class] .ql-snow .ql-tooltip input[type='text'] {
  background: var(--nuven-surface) !important;
  color: var(--nuven-ink) !important;
  border-color: var(--nuven-border) !important;
}

html[class] .ql-snow .ql-editor.ql-blank::before {
  color: var(--nuven-muted) !important;
}

html[class] .ql-snow .ql-stroke {
  stroke: var(--nuven-muted) !important;
}

html[class] .ql-snow .ql-fill {
  fill: var(--nuven-muted) !important;
}

html[class] .ql-snow.ql-toolbar button:is(:hover, :focus, .ql-active) .ql-stroke,
html[class] .ql-snow .ql-picker-label:is(:hover, .ql-active) .ql-stroke,
html[class] .ql-snow .ql-picker-item:is(:hover, .ql-selected) .ql-stroke {
  stroke: var(--nuven-form-accent) !important;
}

html[class] .ql-snow.ql-toolbar button:is(:hover, :focus, .ql-active) .ql-fill,
html[class] .ql-snow .ql-picker-label:is(:hover, .ql-active) .ql-fill,
html[class] .ql-snow .ql-picker-item:is(:hover, .ql-selected) .ql-fill {
  fill: var(--nuven-form-accent) !important;
}

html[class] .ql-snow .ql-picker-label:is(:hover, .ql-active),
html[class] .ql-snow .ql-picker-item:is(:hover, .ql-selected),
html[class] .ql-snow.ql-toolbar button:is(:hover, :focus, .ql-active) {
  color: var(--nuven-form-accent) !important;
}

html[class] .ql-snow .ql-editor a,
html[class] .ql-snow .ql-tooltip a {
  color: var(--nuven-form-accent) !important;
}

html[class] .ql-container.border-danger {
  border-color: var(--bs-danger) !important;
}

html [id^='modal-info-venda-'] a:not(.btn) {
  color: var(--nuven-primary);
}

html [id^='modal-info-venda-'] a:not(.btn):hover,
html [id^='modal-info-venda-'] a:not(.btn):focus-visible {
  color: var(--nuven-primary-hover);
  text-decoration: underline;
}

html.dark-style [id^='modal-info-venda-'] a:not(.btn) {
  color: var(--nuven-lavender);
}

html.dark-style [id^='modal-info-venda-'] a:not(.btn):hover,
html.dark-style [id^='modal-info-venda-'] a:not(.btn):focus-visible {
  color: var(--nuven-mint);
}

html [id^='modal-info-venda-'] .btn-label-primary {
  background: rgba(91, 95, 239, 0.14) !important;
  border-color: transparent !important;
  color: var(--nuven-primary) !important;
}

html.dark-style [id^='modal-info-venda-'] .btn-label-primary {
  color: var(--nuven-lavender) !important;
}

html [id^='modal-info-venda-'] .btn-label-primary:hover,
html [id^='modal-info-venda-'] .btn-label-primary:focus-visible,
html [id^='modal-info-venda-'] .btn-label-primary:active {
  background: var(--nuven-primary) !important;
  color: #fff !important;
}

.footer {
  background: transparent !important;
  color: var(--nuven-muted);
}

.footer .footer-link {
  font-weight: 700;
}

.authentication-wrapper a:not(.btn) {
  color: var(--nuven-primary) !important;
}

/* Remove the remaining RedRocket campaign artwork from the authentication flow. */
.authentication-cover .auth-cover-bg {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 35%, rgba(185, 168, 255, 0.4), transparent 30%),
    radial-gradient(circle at 37% 64%, rgba(114, 223, 193, 0.22), transparent 34%),
    radial-gradient(circle at 90% 90%, rgba(255, 179, 138, 0.18), transparent 35%),
    linear-gradient(145deg, #100e25 4%, #211e3b 54%, #17152e 100%) !important;
}

.authentication-cover .auth-cover-bg::before,
.authentication-cover .auth-cover-bg::after {
  border: 1px solid rgba(114, 223, 193, 0.2);
  border-radius: 50%;
  content: '';
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.authentication-cover .auth-cover-bg::before {
  height: 34rem;
  right: -12rem;
  top: -9rem;
  width: 34rem;
}

.authentication-cover .auth-cover-bg::after {
  bottom: -15rem;
  height: 38rem;
  left: -15rem;
  width: 38rem;
}

.authentication-cover .auth-cover-bg .auth-illustration-full {
  opacity: 0;
}

.authentication-cover .authentication-bg {
  background: #17152e !important;
}

.authentication-cover .card {
  background: #211e3b !important;
  border: 1px solid rgba(114, 223, 193, 0.12) !important;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.32) !important;
}

.authentication-cover .card h1,
.authentication-cover .card h2,
.authentication-cover .card h3,
.authentication-cover .card h4,
.authentication-cover .card h5,
.authentication-cover .card h6,
.authentication-cover .card .form-label,
.authentication-cover .card p {
  color: #fcfcff !important;
}

.authentication-cover .card .text-muted {
  color: #c9c2dc !important;
}

.authentication-cover .card .form-control,
.authentication-cover .card .input-group-text {
  background: #17152e !important;
  border-color: #3c3556 !important;
  color: #fcfcff !important;
}

.authentication-cover .card .form-control::placeholder {
  color: #aaa2c3;
}

/* Components with colors baked into the legacy vendor theme. */
.nav-pills .nav-link.active,
.page-item.active .page-link,
.dropdown-item.active,
.form-check-input:checked {
  background-color: var(--nuven-primary) !important;
  border-color: var(--nuven-primary) !important;
  color: #ffffff !important;
}

.border-primary {
  color: var(--nuven-primary) !important;
}

html[class] .btn.btn-label-primary {
  background: rgba(91, 95, 239, 0.14) !important;
  border-color: transparent !important;
  color: var(--nuven-primary) !important;
}

html.dark-style .btn.btn-label-primary {
  color: var(--nuven-lavender) !important;
}

html[class] .btn.btn-label-primary:is(:hover, :focus, :active, .active, .show):not(:disabled):not(.disabled) {
  background: var(--nuven-primary) !important;
  color: #fff !important;
}

html[class] .btn-primary.waves-effect .waves-ripple,
html[class] .btn-label-primary.waves-effect .waves-ripple,
html[class] .btn-outline-primary.waves-effect .waves-ripple {
  background: rgba(185, 168, 255, 0.25) !important;
}

html[class] .custom-nav-tabs {
  background: var(--nuven-surface);
  border-color: var(--nuven-border);
}

html[class] .custom-nav-tabs .nav-link {
  color: var(--nuven-muted);
  background: transparent;
}

html[class] .custom-nav-tabs .nav-link:is(:hover, :focus, :active) {
  background: var(--nuven-mist);
  color: var(--nuven-primary) !important;
}

html[class] .custom-nav-tabs .nav-link.active {
  background: var(--nuven-surface);
  color: var(--nuven-primary) !important;
  box-shadow: inset 0 -2px 0 var(--nuven-primary) !important;
}

html.dark-style .custom-nav-tabs .nav-link:is(:hover, :focus, :active, .active) {
  color: var(--nuven-lavender) !important;
}

html[class] #update-product .switch-input:checked ~ .switch-toggle-slider {
  background: var(--nuven-primary);
  border-color: var(--nuven-primary) !important;
}

html[class] #update-product .switch-input:focus ~ .switch-toggle-slider {
  border-color: var(--nuven-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(91, 95, 239, 0.18);
}

html[class] .flatpickr-calendar,
html[class] .flatpickr-calendar .flatpickr-month,
html[class] .flatpickr-calendar .flatpickr-weekdays,
html[class] .flatpickr-calendar .flatpickr-weekday,
html[class] .flatpickr-calendar .flatpickr-innerContainer,
html[class] .flatpickr-calendar .flatpickr-rContainer,
html[class] .flatpickr-calendar .flatpickr-days,
html[class] .flatpickr-calendar .dayContainer,
html[class] .flatpickr-calendar .flatpickr-time {
  background: var(--nuven-surface) !important;
  color: var(--nuven-ink) !important;
  border-color: var(--nuven-border) !important;
}

html[class] .flatpickr-calendar {
  box-shadow: 0 0.5rem 1.5rem rgba(23, 21, 46, 0.2);
}

html[class] .flatpickr-calendar::before,
html[class] .flatpickr-calendar::after {
  border-bottom-color: var(--nuven-surface);
  border-top-color: var(--nuven-surface);
}

html[class] .flatpickr-calendar .flatpickr-current-month input,
html[class] .flatpickr-calendar .flatpickr-monthDropdown-months,
html[class] .flatpickr-calendar .flatpickr-time input,
html[class] .flatpickr-calendar .flatpickr-time .flatpickr-am-pm {
  background: var(--nuven-surface);
  color: var(--nuven-ink);
}

html[class] .flatpickr-calendar span.flatpickr-weekday,
html[class] .flatpickr-calendar .flatpickr-day {
  color: var(--nuven-ink);
}

html[class] .flatpickr-calendar .flatpickr-day:is(.prevMonthDay, .nextMonthDay, .flatpickr-disabled) {
  color: var(--nuven-muted);
  opacity: 0.5;
}

html[class] .flatpickr-calendar .flatpickr-day:not(.flatpickr-disabled):is(:hover, :focus) {
  background: var(--nuven-mist);
  border-color: var(--nuven-border);
  color: var(--nuven-ink);
}

html[class] .flatpickr-calendar .flatpickr-day.today {
  border-color: var(--nuven-primary);
}

html[class] .flatpickr-calendar .flatpickr-day.inRange {
  background: var(--nuven-mist) !important;
  border-color: var(--nuven-mist) !important;
  color: var(--nuven-ink) !important;
  box-shadow: -5px 0 0 var(--nuven-mist), 5px 0 0 var(--nuven-mist) !important;
}

html[class] .flatpickr-calendar .flatpickr-day:is(.selected, .startRange, .endRange) {
  background: var(--nuven-primary) !important;
  border-color: var(--nuven-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
  opacity: 1;
}

html[class] .flatpickr-calendar :is(.flatpickr-prev-month, .flatpickr-next-month) svg {
  fill: var(--nuven-muted);
}

html[class] .flatpickr-calendar :is(.flatpickr-prev-month, .flatpickr-next-month) {
  background: var(--nuven-mist);
  color: var(--nuven-ink);
}

html[class] .flatpickr-calendar :is(.flatpickr-prev-month, .flatpickr-next-month):hover {
  background: var(--nuven-border);
}

html[class] .flatpickr-calendar :is(.flatpickr-prev-month, .flatpickr-next-month):hover svg {
  fill: var(--nuven-primary);
}

/* The template switches modes through dark-style, not data-theme. */
html.dark-style {
  --nuven-cloud: #17152e;
  --nuven-surface: #211e3b;
  --nuven-ink: #fcfcff;
  --nuven-mist: #2a2547;
  --nuven-border: #3c3556;
  --nuven-muted: #c9c2dc;
  --bs-body-bg: var(--nuven-cloud);
  --bs-body-bg-rgb: 23, 21, 46;
  --bs-body-color: var(--nuven-ink);
  --bs-body-color-rgb: 252, 252, 255;
  --bs-heading-color: var(--nuven-ink);
  --bs-border-color: var(--nuven-border);
  --bs-secondary-color: var(--nuven-muted);
  --bs-link-color: #b9a8ff;
  --bs-link-hover-color: #72dfc1;
}

html.dark-style body {
  background: radial-gradient(circle at 80% 0, rgba(91, 95, 239, 0.06), transparent 30rem), var(--nuven-cloud) !important;
  color: var(--nuven-ink);
}

html.dark-style .layout-navbar {
  background: rgba(33, 30, 59, 0.94) !important;
  border-color: var(--nuven-border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

html.dark-style .layout-menu.bg-menu-theme {
  background: #100e25 !important;
  border-right-color: var(--nuven-border);
}

html.dark-style .bg-label-primary,
html.dark-style #template-customizer .bg-label-primary {
  color: var(--nuven-lavender) !important;
}

html .text-muted,
html .text-secondary {
  color: var(--nuven-muted) !important;
}

html.dark-style .layout-page::before {
  background: var(--nuven-cloud) !important;
}

html.dark-style .dropdown-menu,
html.dark-style .offcanvas,
html.dark-style .select2-dropdown,
html.dark-style .flatpickr-calendar,
html.dark-style .list-group-item {
  background: var(--nuven-surface) !important;
  color: var(--nuven-ink);
  border-color: var(--nuven-border) !important;
}

html.dark-style .card {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16) !important;
}

html.dark-style .form-control,
html.dark-style .form-select,
html.dark-style .input-group-text,
html.dark-style .select2-selection {
  background-color: #17152e !important;
  color: var(--nuven-ink) !important;
  border-color: var(--nuven-border) !important;
}

html.dark-style .form-control::placeholder {
  color: #aaa2c3;
}

html.dark-style .authentication-wrapper a:not(.btn),
html.dark-style .text-primary,
html.dark-style .link-primary,
html.dark-style .btn-outline-primary {
  color: var(--nuven-lavender) !important;
}

html.light-style .layout-menu.bg-menu-theme .menu-link:hover,
html.light-style .layout-menu.bg-menu-theme .menu-item.open > .menu-toggle {
  color: var(--nuven-primary) !important;
}

html.dark-style .form-control:disabled,
html.dark-style .form-select:disabled {
  background: var(--nuven-mist) !important;
  color: var(--nuven-muted) !important;
}

html.dark-style .table {
  --bs-table-color: var(--nuven-ink);
  --bs-table-striped-bg: rgba(114, 223, 193, 0.035);
  --bs-table-striped-color: var(--nuven-ink);
  --bs-table-hover-bg: rgba(114, 223, 193, 0.065);
  --bs-table-hover-color: var(--nuven-ink);
}

html.dark-style .dropdown-item,
html.dark-style .form-label,
html.dark-style .nav-link:not(.active),
html.dark-style .page-link {
  color: var(--nuven-ink);
}

html.dark-style .page-link {
  background: var(--nuven-surface);
}

html.dark-style .dropdown-item:hover,
html.dark-style .dropdown-item:focus {
  background: var(--nuven-mist);
}

/* Bootstrap Select renders a button and a second dropdown surface. */
html[class] .bootstrap-select > .dropdown-toggle,
html[class] .bootstrap-select > .dropdown-toggle:hover,
html[class] .bootstrap-select > .dropdown-toggle:focus,
html[class] .bootstrap-select > .dropdown-toggle.show {
  background: var(--nuven-surface) !important;
  border: 1px solid var(--nuven-border) !important;
  color: var(--nuven-ink) !important;
}

html[class] .bootstrap-select > .dropdown-toggle:focus-visible {
  border-color: var(--nuven-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(91, 95, 239, 0.2) !important;
}

html[class] .bootstrap-select .dropdown-menu,
html[class] .bootstrap-select .dropdown-menu.inner {
  background: var(--nuven-surface) !important;
  border-color: var(--nuven-border) !important;
  color: var(--nuven-ink) !important;
}

html[class] .bootstrap-select .dropdown-menu .dropdown-item {
  color: var(--nuven-ink) !important;
}

html[class] .bootstrap-select .dropdown-menu .dropdown-item:hover,
html[class] .bootstrap-select .dropdown-menu .dropdown-item:focus,
html[class] .bootstrap-select .dropdown-menu a:not([href]):not(.active):not(:active):not(.selected):hover {
  background: var(--nuven-mist) !important;
  color: var(--nuven-ink) !important;
}

html[class] .bootstrap-select .dropdown-menu .dropdown-item.active,
html[class] .bootstrap-select .dropdown-menu .dropdown-item.selected,
html[class] .bootstrap-select .dropdown-menu .dropdown-item.active:hover,
html[class] .bootstrap-select .dropdown-menu .dropdown-item.selected:hover {
  background: var(--nuven-primary) !important;
  color: #fff !important;
}

html[class] .bootstrap-select .dropdown-menu .disabled .dropdown-item,
html[class] .bootstrap-select .dropdown-menu .dropdown-item.disabled {
  background: transparent !important;
  color: var(--nuven-muted) !important;
}

.nuven-popularity-symbol {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nuven-popularity-symbol-dark {
  display: none;
}

html.dark-style .nuven-popularity-symbol-light {
  display: none;
}

html.dark-style .nuven-popularity-symbol-dark {
  display: block;
}

/* The customizer injects its own CSS and inherits vendor root tokens. */
html.light-style,
html.dark-style {
  --bs-primary: #5b5fef;
  --bs-primary-rgb: 91, 95, 239;
}

html #template-customizer .template-customizer-open-btn,
html.dark-style #template-customizer .template-customizer-open-btn {
  background: #5b5fef !important;
  box-shadow: 0 4px 16px rgba(91, 95, 239, 0.2);
  color: #fff !important;
}

html.dark-style #template-customizer {
  background: var(--nuven-surface) !important;
  color: var(--nuven-ink);
  border-left: 1px solid var(--nuven-border);
}

html.dark-style #template-customizer .custom-option-content {
  background: var(--nuven-surface);
  border-color: var(--nuven-border);
}

html #template-customizer .bg-label-primary {
  background: rgba(91, 95, 239, 0.14) !important;
  color: #5b5fef !important;
}

html #template-customizer .template-customizer-reset-btn .badge-dot {
  background: #5b5fef !important;
}

@media (max-width: 1199.98px) {
  .layout-navbar {
    border-radius: 0;
    border-inline: 0 !important;
  }
}

/* Override the vendor shorthand too: it contains the old red gradient. */
html .layout-menu.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle),
html .layout-menu.bg-menu-theme .menu-item.active > .menu-link.menu-toggle {
  background: #5b5fef !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

html .layout-menu.bg-menu-theme .menu-inner > .menu-item.active::before {
  background: #5b5fef !important;
  box-shadow: none !important;
}

html.light-style .layout-menu.bg-menu-theme {
  background: #fff !important;
  border-right-color: #ded9ec;
}

html.light-style .layout-menu.bg-menu-theme .menu-link {
  color: #514d66;
}

html .layout-menu.bg-menu-theme .menu-item.open > .menu-toggle,
html .layout-menu.bg-menu-theme .menu-link:hover {
  background: rgba(91, 95, 239, 0.12) !important;
  box-shadow: none !important;
  color: #b9a8ff !important;
}

.nuven-menu-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nuven-menu-brand img {
  object-fit: contain;
  height: auto;
}

.nuven-menu-brand .nuven-wordmark {
  width: 11rem;
  max-height: none;
}

.nuven-menu-brand .nuven-symbol {
  width: 2.75rem;
  height: 2.75rem;
  display: none;
}

html .nuven-menu-brand .nuven-on-dark {
  display: none;
}

html.dark-style .nuven-menu-brand .nuven-on-light {
  display: none;
}

html.dark-style .nuven-menu-brand .nuven-wordmark.nuven-on-dark {
  display: block;
}

@media (min-width: 1200px) {
  html.layout-menu-collapsed:not(.layout-menu-hover) .nuven-menu-brand .nuven-wordmark {
    display: none;
  }

  html.layout-menu-collapsed:not(.layout-menu-hover) .nuven-menu-brand .nuven-symbol.nuven-on-light {
    display: block;
  }

  html.dark-style.layout-menu-collapsed:not(.layout-menu-hover) .nuven-menu-brand .nuven-symbol.nuven-on-light {
    display: none;
  }

  html.dark-style.layout-menu-collapsed:not(.layout-menu-hover) .nuven-menu-brand .nuven-symbol.nuven-on-dark {
    display: block;
  }
}