/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

/* ============================================================
 * Dark Mode
 * ============================================================ */

html.dark-mode {
  color-scheme: dark;
}

html.dark-mode body {
  background-color: #232333;
  color: #a8b1c5;
  --bs-body-bg: #232333;
  --bs-body-color: #a8b1c5;
}

/* Sidebar */
html.dark-mode .bg-menu-theme {
  background-color: #2b2b40 !important;
  color: #a8b1c5;
}
html.dark-mode .bg-menu-theme .menu-link,
html.dark-mode .bg-menu-theme .menu-horizontal-prev,
html.dark-mode .bg-menu-theme .menu-horizontal-next {
  color: #a8b1c5;
}
html.dark-mode .bg-menu-theme .menu-link:hover,
html.dark-mode .bg-menu-theme .menu-link:focus {
  color: #cbcfe8;
}
html.dark-mode .bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) {
  background-color: rgba(105, 108, 255, 0.16);
  color: #696cff;
}
html.dark-mode .bg-menu-theme .menu-item.open:not(.menu-item-closing) > .menu-toggle,
html.dark-mode .bg-menu-theme .menu-item.active > .menu-link {
  color: #696cff;
}
html.dark-mode .bg-menu-theme .menu-text {
  color: #cbcfe8;
}
html.dark-mode .bg-menu-theme .menu-header {
  color: #7983a5;
}
html.dark-mode .bg-menu-theme .menu-inner-shadow {
  background: linear-gradient(#2b2b40 41%, rgba(43, 43, 64, 0.11) 95%, rgba(43, 43, 64, 0));
}
html.dark-mode .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner > .menu-item.active:before {
  background-color: #696cff;
}
html.dark-mode .app-brand-text {
  color: #cbcfe8;
}

html.dark-mode .avatar img {
  filter: brightness(0) invert(1);
}

/* Navbar */
html.dark-mode .bg-navbar-theme {
  background-color: #2b2b40 !important;
  color: #a8b1c5;
}
html.dark-mode .bg-navbar-theme .navbar-nav > .nav-link,
html.dark-mode .bg-navbar-theme .navbar-nav > .nav-item > .nav-link {
  color: #a8b1c5;
}
html.dark-mode .layout-navbar {
  background-color: rgba(43, 43, 64, 0.95) !important;
}
html.dark-mode .navbar-detached {
  box-shadow: 0 0 0.375rem 0.25rem rgba(0, 0, 0, 0.3);
}

/* Layout page & content */
html.dark-mode .layout-page,
html.dark-mode .content-wrapper,
html.dark-mode .content-wrapper > * {
  background-color: #232333;
}

/* Cards */
html.dark-mode .card {
  background-color: #2b2b40;
  border-color: #3a3a55;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
}
html.dark-mode .card-header,
html.dark-mode .card-footer {
  border-color: #3a3a55;
  background-color: #2b2b40;
}

/* Text */
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6,
html.dark-mode .h1, html.dark-mode .h2, html.dark-mode .h3,
html.dark-mode .h4, html.dark-mode .h5, html.dark-mode .h6 {
  color: #cbcfe8;
}
html.dark-mode .text-muted {
  color: #7983a5 !important;
}
html.dark-mode .fw-semibold {
  color: #cbcfe8;
}

/* Allow dropdowns to overflow table-responsive scroll containers */
.table-responsive:has(.dropdown-menu.show) {
  overflow: visible;
}

/* Tables */
html.dark-mode .table {
  color: #a8b1c5;
  --bs-table-bg: transparent;
  --bs-table-border-color: #3a3a55;
}
html.dark-mode .table-bordered > :not(caption) > * {
  border-color: #3a3a55;
}
html.dark-mode .table > :not(:last-child) > :last-child > * {
  border-bottom-color: #3a3a55;
}

/* Forms */
html.dark-mode .form-control,
html.dark-mode .form-select {
  background-color: #2b2b40;
  border-color: #3a3a55;
  color: #a8b1c5;
}
html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus {
  background-color: #2b2b40;
  color: #cbcfe8;
  border-color: #696cff;
}
html.dark-mode .form-control::placeholder {
  color: #7983a5;
}
html.dark-mode .input-group-text {
  background-color: #252537;
  border-color: #3a3a55;
  color: #a8b1c5;
}

/* Dropdowns */
html.dark-mode .dropdown-menu {
  background-color: #2b2b40;
  border-color: #3a3a55;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.4);
}
html.dark-mode .dropdown-item {
  color: #a8b1c5;
}
html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus {
  background-color: #363650;
  color: #cbcfe8;
}
html.dark-mode .dropdown-divider {
  border-color: #3a3a55;
}
html.dark-mode .dropdown-header {
  color: #7983a5;
}

/* Footer */
html.dark-mode .bg-footer-theme {
  background-color: #2b2b40 !important;
  color: #a8b1c5;
  border-top: 1px solid #3a3a55;
}
html.dark-mode .content-footer {
  background-color: #2b2b40 !important;
}

/* Borders & dividers */
html.dark-mode hr {
  border-color: #3a3a55;
}
html.dark-mode .border,
html.dark-mode .border-top,
html.dark-mode .border-bottom,
html.dark-mode .border-start,
html.dark-mode .border-end {
  border-color: #3a3a55 !important;
}

/* Modals */
html.dark-mode .modal-content {
  background-color: #2b2b40;
  border-color: #3a3a55;
}
html.dark-mode .modal-header,
html.dark-mode .modal-footer {
  border-color: #3a3a55;
}
html.dark-mode .modal-title {
  color: #cbcfe8;
}
html.dark-mode .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Toast */
html.dark-mode .toast {
  background-color: #2b2b40;
  border-color: #3a3a55;
}
html.dark-mode .toast-header {
  background-color: #363650;
  color: #cbcfe8;
  border-color: #3a3a55;
}
html.dark-mode .toast-body {
  color: #a8b1c5;
}

/* Badges */
html.dark-mode .badge.bg-label-primary {
  background-color: rgba(105, 108, 255, 0.2) !important;
  color: #696cff !important;
}
html.dark-mode .badge.bg-label-success {
  background-color: rgba(113, 221, 55, 0.2) !important;
  color: #71dd37 !important;
}
html.dark-mode .badge.bg-label-danger {
  background-color: rgba(255, 62, 29, 0.2) !important;
  color: #ff3e1d !important;
}
html.dark-mode .badge.bg-label-warning {
  background-color: rgba(255, 171, 0, 0.2) !important;
  color: #ffab00 !important;
}

/* Accordion */
html.dark-mode .accordion-button {
  background-color: #2b2b40;
  color: #cbcfe8;
}
html.dark-mode .accordion-button:not(.collapsed) {
  background-color: #2b2b40;
  color: #cbcfe8;
  box-shadow: inset 0 0 0 #3a3a55;
}
html.dark-mode .accordion-button::after,
html.dark-mode .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' d='m1.532 12 6.182-6-6.182-6L0 1.487 4.65 6 0 10.513z'/%3E%3C/defs%3E%3Cg transform='translate%282.571%29' fill='none' fill-rule='evenodd'%3E%3Cuse fill='%23cbcfe8' xlink:href='%23a'/%3E%3Cuse fill-opacity='.1' fill='%23a8b1c5' xlink:href='%23a'/%3E%3C/g%3E%3C/svg%3E%0A");
}
html.dark-mode .accordion-item {
  background-color: #2b2b40;
  border-color: #3a3a55;
}
html.dark-mode .accordion-item:not(:first-of-type) {
  border-top-color: #3a3a55;
}
html.dark-mode .accordion-body {
  background-color: #2b2b40;
  color: #a8b1c5;
}
html.dark-mode .accordion .accordion-item.active {
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.4);
}
html.dark-mode .card.accordion-item {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
}

/* Dark mode toggle button style */
#darkModeToggle {
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}
#darkModeToggle i {
  font-size: 1.25rem;
  line-height: 1;
  vertical-align: middle;
}
html.dark-mode #darkModeToggle i {
  color: #ffab00;
}

.menu .app-brand.demo {
  height: 64px;
  margin-top: 12px;
  justify-content: center;
}

.app-brand-logo.demo svg {
  width: 22px;
  height: 38px;
}

.app-brand-logo.demo img {
  width: auto;
  height: 50px;
  border-radius: 0;
}

html.light-style .authentication-wrapper .app-brand-logo.demo img,
html.light-style .menu .app-brand-logo.demo img {
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.60));
}

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

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

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

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

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

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

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

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

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

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/*
* Layout demo
******************************************************************************/

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