/* Z-index utilities. (done)
Border radius and width utilities.(done)
Shadow utilities for box and text.(done)
Overflow, position, and display utilities.(done)
Width, height, and max/min utilities.(done)
*/

/* Borders */
.border {
  border: 1px solid;
}
.border-2 {
  border: 2px solid;
}
.border-none {
  border: none;
}
.border-top {
  border-top: 1px solid;
}
.border-top {
  border-top: 1px solid;
}
.border-bottom {
  border-bottom: 1px solid;
}
.border-left {
  border-left: 1px solid;
}
.border-right {
  border-right: 1px solid;
}

/* Rounded --- */
.rounded-none {
  border-radius: var(--radius-none);
}
.rounded-4 {
  border-radius: var(--radius-4);
}
.rounded-8 {
  border-radius: var(--radius-8);
}
.rounded-12 {
  border-radius: var(--radius-8);
}
.rounded-16 {
  border-radius: var(--radius-16);
}
.rounded-24 {
  border-radius: 24px;
}
.rounded-32 {
  border-radius: var(--radius-32);
}
.rounded-full {
  border-radius: var(--radius-full);
}

.rounded-3-corner {
  border-radius: 16px 16px 0px 16px;
}
.rounded-lt-none {
  border-radius: 0px 8px 8px 8px;
}

.rounded-top {
  border-radius: 4px 4px 0px 0px;
}

.r-8-left-btm {
  border-radius: 0px 0px 0px 8px;
}

/* Shadows */
.shadow-1 {
  box-shadow: var(--shadow-1);
}
.shadow-2 {
  box-shadow: var(--shadow-2);
}
.shadow-3 {
  box-shadow: var(--shadow-3);
}
.shadow-4 {
  box-shadow: var(--shadow-4);
}
.shadow-5 {
  box-shadow: var(--shadow-5);
}
.shadow-md {
  box-shadow: var(--shadow-md);
}
.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-danger {
  box-shadow: 0px 0px 0px 0.5px rgba(217, 45, 32, 0.25);
}

/* Positioning */
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.top-0 {
  top: 0;
}
.left-0 {
  left: 0;
}
.right-0 {
  right: 0;
}
.bottom-0 {
  bottom: 0;
}

/* z-index */
.z-0 {
  z-index: var(--z-0);
}
.z-10 {
  z-index: var(--z-10);
}
.z-20 {
  z-index: var(--z-20);
}
.z-50 {
  z-index: var(--z-50);
}
.z-100 {
  z-index: var(--z-100);
}

/* Transitions */
.transition-fast {
  transition: var(--transition-fast);
}
.transition-normal {
  transition: var(--transition-normal);
}

/* -- others utils --*/
.pointer {
  cursor: pointer;
}

.hidden {
  display: none;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline-flex {
  display: inline-flex;
}
.inline {
  display: inline;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-auto {
  overflow: auto;
}

.m-none {
  display: block;
}
.d-none {
  display: none;
}

@media (max-width: 768px) {
  .hidden-md {
    display: none;
  }
  .m-none {
    display: none;
  }
  .d-none {
    display: block;
  }
}

@media (max-width: 576px) {
  .hidden-sm {
    display: none;
  }
  .m-none {
    display: none;
  }
  .d-none {
    display: block;
  }
}

/* extras */
.br-1234 {
  border-radius: 1234px;
}

/* Box shadows */
.bs-1 {
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
}

.under-line {
  text-decoration: underline;
}

.decor-none {
  text-decoration: none;
}

/* heights ------- Alters*/
.h-1 {
  height: calc(100vh - 113px);
}

.h-2 {
  height: calc(100vh - 182px);
}

.h-3 {
  height: calc(100vh - 65px);
}

.h-100 {
  height: 100vh;
}
.h-32 {
  height: 32px;
}
.mh-30vh {
  max-height: 30vh;
}

/* Width ------ Alters*/
.w-fit {
  width: fit-content;
}

.w-32 {
  width: 32px;
}
.w-24 {
  width: 24px;
}
.w-85p {
  width: 85%;
}
.w-100p {
  width: 100%;
}

.w-20p {
  width: 20%;
}

.w-40p {
  width: 40%;
}

.w-50p {
  width: 40%;
}

.w-72p {
  width: 72%;
}

.w-15p {
  width: 15%;
}
.w-22p {
  width: 22%;
}

.w-28p {
  width: 28%;
}

.w-50 {
  width: 50px;
}

/* PlaceHolder */
.input-1::placeholder {
  color: var(--neutral-1);
  font-size: var(--font-16);
  font-weight: 400;
}

.no-focus:focus {
  outline: none;
}

.ai-chat-input:focus {
  outline: none;
}

/* grid ----- alters  */
.grid1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* Sticky */
.sticky-top {
  position: sticky;
  top: 0;
}

.sticky-bottom {
  position: sticky;
  bottom: 0;
}

/* scroll */
.scroll-y {
  overflow-y: scroll;
}

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

/* List inside */
.list-inside {
  list-style-position: inside;
}

.list-s-none {
  list-style: none;
}

/* Custom scrollbar styles */
.custom-scroll::-webkit-scrollbar {
  width: 6px;
}

.custom-scroll::-webkit-scrollbar-track {
  background: var(--neutral-2);
  border-radius: 8px;
}

.custom-scroll::-webkit-scrollbar-thumb {
  background: var(--neutral-4);
  border-radius: 4px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--black); /* Hover effect */
}

/* Side bar collapse css ------------------ */
.dash-collapse {
  width: 5%;
}

.dash-collapse .logo-container {
  flex-direction: column;
}

.dash-collapse .full-logo {
  display: none;
}

.dash-collapse .collapse-logo {
  display: block;
}

.dash-collapse .dash-toggle-icon {
  padding: 12px;
  background-color: transparent;
  margin-top: 8px;
}

.dash-collapse .dash-items-container {
  align-items: center;
  border-top: 1px solid var(--neutral-3);
  margin-top: 0px;
  padding-top: 8px;
}

.dash-collapse .dash-item {
  justify-content: center;
}

.dash-collapse .dash-item p {
  display: none;
}
.dash-collapse .chevron {
  display: none;
}

.dash-collapse .light-dark-mode-cont {
  padding: 0px;
  border: none;
  justify-content: center;
}

.dash-collapse .light-mode-btn {
  flex: 0 0 100%;
  max-width: 48px;
  padding: 12px;
}

.dash-collapse .dark-mode-btn {
  display: none;
}