/*CUSTOMIZER CSS*/
/*Only for demo purpose*/
:root {
  /*for customizer*/
  --indigo: #6366F1;
  --pink: #EC4899;
  --indigohover: #4F46E5;
  --red: #EF4444;
  --redhover: #DC2626;
  --purple: #8B5CF6;
  --purplehover: #7C3AED;
  --blue: #3B82F6;
  --bluehover: #2563EB;
  --yellowhover: #D97706;
  --greenhover: #059669;
  --pinkhover: #DB2777;
  --white: #ffffff;
  --darkgray: #141430;
  --lightgray: #98A5C0;
  --darkness: #0a0a18;
}

/*Sidebar light*/
.sidebar-dark {
  color: var(--lightgray);
  background-color: var(--darkgray);
}

.sidebar-dark li a {
  color: var(--lightgray);
}

.sidebar-dark li a:hover,
.sidebar-dark li a.text-indigo-500 {
  color: var(--white);
}

.sidebar-dark span.text-gray-700 {
  color: var(--white);
}

.sidebar-dark .bg-gray-300 {
  background-color: #1e1f48;
}

/*Background customizer*/
.bg-reset-500 {
  background: #1D4ED8;
}

/*Red*/
.theme-red .text-indigo-500,
.theme-red .text-indigo-700,
.theme-red .hover\:text-indigo-500:hover,
.theme-red .text-indigo-500,
.theme-red .sidebar-dark li a:hover,
.theme-red .sidebar-dark li a.text-gray-300 {
  color: var(--red);
}

.theme-red .bg-indigo-500,
.theme-red .bg-indigo-700,
.theme-red .code-toolbar>.toolbar a {
  background: var(--red);
}

.theme-red .border-indigo-500,
.theme-red pre[class*="language-"]>code,
.theme-red .border-indigo-700 {
  border-color: var(--red);
}

.theme-red .hover\:text-gray-100:hover,
.theme-red .hover\:text-white:hover {
  color: var(--white);
}

.theme-red .bg-indigo-500,
.theme-red .hover\:bg-indigo-600:hover,
.theme-red .code-toolbar>.toolbar a:hover,
.theme-red .focus\:bg-indigo-600:focus {
  background: var(--redhover)
}

.theme-red .hover\:border-indigo-600:hover,
.theme-red .focus\:border-indigo-600:focus {
  border-color: var(--redhover)
}

.theme-red pre[class*="language-"]>code {
  box-shadow: -1px 0px 0px 0px var(--redhover)
}

/*yellow*/
.theme-yellow .text-indigo-500,
.theme-yellow .text-indigo-700,
.theme-yellow .hover\:text-indigo-500:hover,
.theme-yellow .text-indigo-500,
.theme-yellow .sidebar-dark li a:hover,
.theme-yellow .sidebar-dark li a.text-gray-300 {
  color: var(--yellow);
}

.theme-yellow .bg-indigo-500,
.theme-yellow .bg-indigo-700,
.theme-yellow .code-toolbar>.toolbar a {
  background: var(--yellow);
}

.theme-yellow .border-indigo-500,
.theme-yellow pre[class*="language-"]>code,
.theme-yellow .border-indigo-700 {
  border-color: var(--yellow);
}

.theme-yellow .hover\:text-gray-100:hover,
.theme-yellow .hover\:text-white:hover {
  color: var(--white);
}

.theme-yellow .bg-indigo-500,
.theme-yellow .hover\:bg-indigo-600:hover,
.theme-yellow .code-toolbar>.toolbar a:hover,
.theme-yellow .focus\:bg-indigo-600:focus {
  background: var(--yellowhover)
}

.theme-yellow .hover\:border-indigo-600:hover,
.theme-yellow .focus\:border-indigo-600:focus {
  border-color: var(--yellowhover)
}

.theme-yellow pre[class*="language-"]>code {
  box-shadow: -1px 0px 0px 0px var(--yellowhover)
}

/*green*/
.theme-green .text-indigo-500,
.theme-green .text-indigo-700,
.theme-green .hover\:text-indigo-500:hover,
.theme-green .text-indigo-500,
.theme-green .sidebar-dark li a:hover,
.theme-green .sidebar-dark li a.text-gray-300 {
  color: var(--green);
}

.theme-green .bg-indigo-500,
.theme-green .bg-indigo-700,
.theme-green .code-toolbar>.toolbar a {
  background: var(--green);
}

.theme-green .border-indigo-500,
.theme-green pre[class*="language-"]>code,
.theme-green .border-indigo-700 {
  border-color: var(--green);
}

.theme-green .hover\:text-gray-100:hover,
.theme-green .hover\:text-white:hover {
  color: var(--white);
}

.theme-green .bg-indigo-500,
.theme-green .hover\:bg-indigo-600:hover,
.theme-green .code-toolbar>.toolbar a:hover,
.theme-green .focus\:bg-indigo-600:focus {
  background: var(--greenhover)
}

.theme-green .hover\:border-indigo-600:hover,
.theme-green .focus\:border-indigo-600:focus {
  border-color: var(--greenhover)
}

.theme-green pre[class*="language-"]>code {
  box-shadow: -1px 0px 0px 0px var(--greenhover)
}

/*blue*/
.theme-blue .text-indigo-500,
.theme-blue .text-indigo-700,
.theme-blue .hover\:text-indigo-500:hover,
.theme-blue .text-indigo-500,
.theme-blue .sidebar-dark li a:hover,
.theme-blue .sidebar-dark li a.text-gray-300 {
  color: var(--blue);
}

.theme-blue .bg-indigo-500,
.theme-blue .bg-indigo-700,
.theme-blue .code-toolbar>.toolbar a {
  background: var(--blue);
}

.theme-blue .border-indigo-500,
.theme-blue pre[class*="language-"]>code,
.theme-blue .border-indigo-700 {
  border-color: var(--blue);
}

.theme-blue .hover\:text-gray-100:hover,
.theme-blue .hover\:text-white:hover {
  color: var(--white);
}

.theme-blue .bg-indigo-500,
.theme-blue .hover\:bg-indigo-600:hover,
.theme-blue .code-toolbar>.toolbar a:hover,
.theme-blue .focus\:bg-indigo-600:focus {
  background: var(--bluehover)
}

.theme-blue .hover\:border-indigo-600:hover,
.theme-blue .focus\:border-indigo-600:focus {
  border-color: var(--bluehover)
}

.theme-blue pre[class*="language-"]>code {
  box-shadow: -1px 0px 0px 0px var(--bluehover)
}

/*purple*/
.theme-purple .text-indigo-500,
.theme-purple .text-indigo-700,
.theme-purple .hover\:text-indigo-500:hover,
.theme-purple .text-indigo-500,
.theme-purple .sidebar-dark li a:hover,
.theme-purple .sidebar-dark li a.text-gray-300 {
  color: var(--purple);
}

.theme-purple .bg-indigo-500,
.theme-purple .bg-indigo-700,
.theme-purple .code-toolbar>.toolbar a {
  background: var(--purple);
}

.theme-purple .border-indigo-500,
.theme-purple pre[class*="language-"]>code,
.theme-purple .border-indigo-700 {
  border-color: var(--purple);
}

.theme-purple .hover\:text-gray-100:hover,
.theme-purple .hover\:text-white:hover {
  color: var(--white);
}

.theme-purple .bg-indigo-500,
.theme-purple .hover\:bg-indigo-600:hover,
.theme-purple .code-toolbar>.toolbar a:hover,
.theme-purple .focus\:bg-indigo-600:focus {
  background: var(--purplehover)
}

.theme-purple .hover\:border-indigo-600:hover,
.theme-purple .focus\:border-indigo-600:focus {
  border-color: var(--purplehover)
}

.theme-purple pre[class*="language-"]>code {
  box-shadow: -1px 0px 0px 0px var(--purplehover)
}

/*pink*/
.theme-pink .text-indigo-500,
.theme-pink .text-indigo-700,
.theme-pink .hover\:text-indigo-500:hover,
.theme-pink .text-indigo-500,
.theme-pink .sidebar-dark li a:hover,
.theme-pink .sidebar-dark li a.text-gray-300 {
  color: var(--pink);
}

.theme-pink .bg-indigo-500,
.theme-pink .bg-indigo-700,
.theme-pink .code-toolbar>.toolbar a {
  background: var(--pink);
}

.theme-pink .border-indigo-500,
.theme-pink pre[class*="language-"]>code,
.theme-pink .border-indigo-700 {
  border-color: var(--pink);
}

.theme-pink .hover\:text-gray-100:hover,
.theme-pink .hover\:text-white:hover {
  color: var(--white);
}

.theme-pink .bg-indigo-500,
.theme-pink .hover\:bg-indigo-600:hover,
.theme-pink .code-toolbar>.toolbar a:hover,
.theme-pink .focus\:bg-indigo-600:focus {
  background: var(--pinkhover)
}

.theme-pink .hover\:border-indigo-600:hover,
.theme-pink .focus\:border-indigo-600:focus {
  border-color: var(--pinkhover)
}

.theme-pink pre[class*="language-"]>code {
  box-shadow: -1px 0px 0px 0px var(--pinkhover)
}

@media (min-width: 768px) {
  .sidebar-compact {
    z-index: 60;
  }

  .sidebar-compact .logo-compact {
    display: inline-block;
  }

  .sidebar-compact:hover .logo-compact {
    display: none !important;
  }

  .sidebar-compact .hidden-compact,
  .sidebar-compact:hover .logo-compact {
    visibility: hidden;
    height: 0;
    width: 0;
    opacity: 0;
    transition: visibility 0s, opacity 1.5s linear;
  }

  .sidebar-compact:hover .hidden-compact,
  .sidebar-compact .logo-compact {
    visibility: visible;
    height: auto;
    width: auto;
    opacity: 1;
  }

  .sidebar-compact a span,
  .sidebar-compact ul li ul,
  .sidebar-compact .box-banner {
    display: none;
  }

  .sidebar-compact:hover a span {
    display: inline-block;
  }

  .sidebar-compact:hover ul li ul,
  .sidebar-compact:hover .box-banner {
    display: block;
  }

  .sidebar-compact:hover {
    width: 16rem;
  }
}

.dark :not(pre)>code[class*="language-"],
.dark pre[class*="language-"] {
  background: var(--darkness);
}


@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

.checkbox-item {
  animation: fadeOut 4400s ease forwards;


}

.wizard-container {
  width: 910px;
  /* Set your desired width */
  height: 100px;
  /* Set your desired height */
}

::-webkit-scrollbar {
  width: 6px;
  /* Adjust scrollbar width */
}

::-webkit-scrollbar-track {
  background: #f0f0f0;
  /* Track background color */
}

::-webkit-scrollbar-thumb {
  background-color: #a0a0a0;
  /* Scrollbar thumb color */
  border-radius: 10px;
}