.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(50, 50, 50, 0.7); /* Semi-transparent black */
	justify-content: center;
	align-items: center;
	z-index: 1000; /* Ensure it's on top of other content */
}

.overlay-content {
	background-color: white;
	padding: 20px;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	text-align: center;
}

.loadingSpinner {
	position: absolute; /* or absolute, depending on placement */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999; /* Ensure it's on top of other content */
	/* Add styles for your spinner animation */
}

/* Example for a simple CSS spinner */
.spinner-border {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	vertical-align: text-bottom;
	border: .25em solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: spinner-border .75s linear infinite;
}

@keyframes spinner-border {
	to { transform: rotate(360deg); }
}
.input-xxxsmall {
	width:30px;
}
.input-xxsmall {
	width:50px;
}
.input-xsmall {
	width:70px;
}
.input-small {
	width:90px;
}
.input-medium {
	width:120px;
}
.input-large {
	width:160px;
}
.input-xlarge {
	width:210px;
}
.input-xxlarge {
	width:270px;
}
.input-xxxlarge {
	width:350px;
}
.h-\[300px\] {
height: 300px;
}
.overflow-y-scroll {
overflow-y: scroll;
}
.pointer { cursor: pointer }
@layer components {
  .kt-input-group {
    & .kt-input:has(+ .kt-input) {
      border-start-end-radius: 0 !important;
      border-end-end-radius: 0 !important;
    }
  }
  .kt-input-group {
    .kt-input:not(:first-child), .kt-btn:not(:first-child) {
      border-start-start-radius: 0 !important;
      border-end-start-radius: 0 !important;
    }
  }
}
@layer utilities {
  .scrollbar::-webkit-scrollbar {
    width: 20px;
    height: 20px;
  }

  .scrollbar::-webkit-scrollbar-track {
    border-radius: 100vh;
    background: #f7f4ed;
  }

  .scrollbar::-webkit-scrollbar-thumb {
    background: #e0cbcb;
    border-radius: 100vh;
    border: 3px solid #f6f7ed;
  }

  .scrollbar::-webkit-scrollbar-thumb:hover {
    background: #c0a0b9;
  }
}
.ql-toolbar {
	border-radius: 0.5rem 0.5rem 0 0;
}
.ql-container {
	border-radius: 0 0 0.5rem 0.5rem;
}
.footer {
	align-items: center; /* Vertically centers all items */
  /* Optional: use justify-content to align horizontally */
  justify-content: center; 
}
.list-group {
	border-radius: calc(var(--radius) + 4px);
    color: var(--card-foreground);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-shadow-color: rgba(0,0,0,0.05);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, rgba(0,0,0,0.05) var(--tw-shadow-alpha), transparent);
    }
}
.list-group-item {
    flex-grow: 1;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--border);
    /*! padding-block: calc(var(--spacing) * 5); */
    &:last-child {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
  }

.autohide-container {
  position:relative;
  text-align:center;
}
.autohide {
  visibility: hidden; /* Initially hide the close button */
  /* Add other styling for your close button (positioning, size, etc.) */
  position: absolute; /* Example for positioning */
  top: 3px;
  right: 3px;
}
.autohide-container:hover .autohide {
  visibility: visible; /* Show the close button on hover of the parent container */
}