lasthourcloud/apps/ui/src/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	src: local(''), url('/poppins-v19-latin-ext_latin_devanagari-regular.woff2') format('woff2'),
		url('/poppins-v19-latin-ext_latin_devanagari-regular.woff') format('woff');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	src: local(''), url('/poppins-v19-latin-ext_latin_devanagari-500.woff2') format('woff2'),
		url('/poppins-v19-latin-ext_latin_devanagari-500.woff') format('woff');
}

html {
	@apply h-full min-h-full overflow-y-scroll;
}
body {
	@apply min-h-screen overflow-x-hidden bg-coolblack text-sm text-white scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200;
}

main,
.main {
	width: calc(100% - 4rem);
	margin-left: 4rem;
}

input {
	@apply h-12 w-96 rounded border border-transparent bg-transparent bg-coolgray-200 p-2 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-300 disabled:bg-transparent md:text-sm;
}
textarea {
	@apply min-w-[24rem] rounded border border-transparent bg-transparent bg-coolgray-200 p-2 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-300 disabled:bg-transparent md:text-sm;
}

#svelte .custom-select-wrapper .selectContainer.disabled input {
	@apply placeholder:text-stone-600;
}

#svelte .custom-select-wrapper .selectContainer input {
	@apply text-white;
}

#svelte .custom-select-wrapper .selectContainer {
	@apply h-12 w-96 rounded border border-coolgray-300 border-dashed  bg-coolgray-200 p-2 px-0 text-xs tracking-tight outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 md:text-sm;
}

#svelte .listContainer {
	@apply bg-coolgray-400 text-white scrollbar-w-2 scrollbar-thumb-green-500 scrollbar-track-coolgray-200;
}
#svelte .selectedItem {
	@apply pl-2;
}

#svelte .item.hover {
	@apply bg-coollabs text-white !important;
}
#svelte .item.active {
	@apply bg-coolgray-100 text-white;
}

select {
	@apply h-12 w-96 rounded bg-coolgray-200 p-2 text-xs font-bold tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:text-stone-600 md:text-sm;
}
.custom-select-wrapper{
	--background: rgb(32 32 32);
	--inputColor: white;
	--multiItemPadding: 0;
	--multiSelectPadding: 0 0.5rem 0 0.5rem;
	--border: none;
	--placeholderColor: rgb(87 83 78);
	--listBackground: rgb(32 32 32);
	--itemColor: white;
	--itemHoverBG: rgb(107 22 237);
	--multiItemBG: rgb(32 32 32);
	--multiClearHoverBG: transparent;
	--multiClearHoverFill: rgb(239 68 68);
	--multiItemActiveBG: transparent;
	--multiClearBG: transparent;
	--clearSelectFocusColor: white;
	--clearSelectHoverColor: rgb(239 68 68);
	--multiItemBorderRadius: 0.25rem;
	--listShadow: none;
}

label {
	@apply inline-block w-64 text-xs tracking-tight md:text-sm;
}
.btn {
	@apply text-white text-base;
}

a {
	@apply underline hover:text-white;
}

.content {
	@apply p-2 px-4;
}

.title {
	@apply mr-4 text-base tracking-tight md:text-2xl font-bold;
}
.nav-main {
	@apply fixed top-0 left-0 min-h-screen w-16 min-w-[4rem] overflow-auto border-r border-stone-800 bg-coolgray-200 scrollbar-w-1  scrollbar-thumb-coollabs scrollbar-track-coolgray-200 xl:overflow-visible;
}

.nav-side {
	@apply absolute right-0 top-0 z-50 m-5 flex flex-wrap items-center justify-end space-x-2 bg-coolblack/40 text-white;
}

.add-icon {
	@apply rounded p-1 transition duration-200;
}

.icons {
	@apply rounded p-2 transition duration-200 hover:bg-coolgray-500 disabled:bg-coolblack disabled:text-coolgray-500 !important;
}

.arrow-right-applications {
	@apply -ml-6 px-2 font-bold text-green-500;
}

.border-gradient {
	border-bottom: 2px solid transparent;
	-o-border-image: linear-gradient(
		0.25turn,
		rgba(255, 249, 34),
		rgba(255, 0, 128),
		rgba(56, 2, 155, 0)
	);
	border-image: linear-gradient(
		0.25turn,
		rgba(255, 249, 34),
		rgba(255, 0, 128),
		rgba(56, 2, 155, 0)
	);
	border-image-slice: 1;
}
.border-gradient-full {
	border: 4px solid transparent;
	-o-border-image: linear-gradient(
		0.25turn,
		rgba(255, 249, 34),
		rgba(255, 0, 128),
		rgba(56, 2, 155, 0)
	);
	border-image: linear-gradient(
		0.25turn,
		rgba(255, 249, 34),
		rgba(255, 0, 128),
		rgba(56, 2, 155, 0)
	);
	border-image-slice: 1;
}

.box-selection {
	@apply min-w-[16rem] max-w-[24rem] justify-center rounded border-transparent bg-coolgray-200 p-6 hover:border-transparent hover:bg-coolgray-400;
}

.lds-heart {
	animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
@keyframes lds-heart {
	0% {
		transform: scale(1);
	}
	5% {
		transform: scale(1.2);
	}
	39% {
		transform: scale(0.85);
	}
	45% {
		transform: scale(1);
	}
	60% {
		transform: scale(0.95);
	}
	100% {
		transform: scale(0.9);
	}
}

.sub-menu {
	@apply w-48 text-base font-bold hover:bg-coolgray-500 rounded p-2 hover:text-white text-stone-200 cursor-pointer;
}

.sub-menu-active {
	@apply  bg-coolgray-500  text-white;
}

.table tbody td,
.table tbody th,
.table thead th{
  background-color: transparent;
}
.table *{
  border: none;
}