@import 'tailwindcss';
@import 'tw-animate-css';

@theme {
	--color-primary: #7367f0;
	--color-primary-100: #e3e1fc;
	--color-primary-200: #c7c2f9;
	--color-primary-300: #aba4f6;
	--color-primary-400: #8f85f3;
	--color-primary-500: #7367f0;
	--color-primary-600: #685dd8;
	--color-primary-700: #6258cc;
	--color-primary-800: #5c52c0;
	--color-primary-900: #564db4;
	/*  */
	--color-secondary: #a8aaae;
	--color-secondary-100: #eeeeef;
	--color-secondary-200: #dcdddf;
	--color-secondary-300: #cbccce;
	--color-secondary-400: #b9bbbe;
	--color-secondary-500: #a8aaae;
	--color-secondary-600: #98999d;
	--color-secondary-700: #8f9194;
	--color-secondary-800: #86888b;
	--color-secondary-900: #7e7f82;
	/*  */
	--color-gray: #a5a3ae;
	--color-gray-100: #f6f6f7;
	--color-gray-200: #dbdade;
	--color-gray-300: #c9c7ce;
	--color-gray-400: #b7b5be;
	--color-gray-500: #a5a3ae;
	--color-gray-600: #93909d;
	--color-gray-700: #817d8d;
	--color-gray-800: #6f6b7d;
	--color-gray-900: #5d586c;
	/*  */
	--color-success: #28c76f;
	--color-success-100: #d4f4e2;
	--color-success-200: #a9e9c5;
	--color-success-300: #7edda9;
	--color-success-400: #53d28c;
	--color-success-500: #28c76f;
	--color-success-600: #24b364;
	--color-success-700: #22a95e;
	--color-success-800: #209f59;
	--color-success-900: #1e9553;
	/*  */
	--color-danger: #ea5455;
	--color-danger-100: #fbdddd;
	--color-danger-200: #f7bbbb;
	--color-danger-300: #f29899;
	--color-danger-400: #ee7677;
	--color-danger-500: #ea5455;
	--color-danger-600: #d34c4d;
	--color-danger-700: #c74748;
	--color-danger-800: #bb4344;
	--color-danger-900: #af3f40;
	/*  */
	--color-warning: #ff9f43;
	--color-warning-100: #ffecd9;
	--color-warning-200: #ffd9b4;
	--color-warning-300: #ffc58e;
	--color-warning-400: #ffb269;
	--color-warning-500: #ff9f43;
	--color-warning-600: #e68f3c;
	--color-warning-700: #d98739;
	--color-warning-800: #cc7f36;
	--color-warning-900: #bf7732;
	/*  */
	--color-info: #00cfe8;
	--color-info-100: #ccf5fa;
	--color-info-200: #99ecf6;
	--color-info-300: #66e2f1;
	--color-info-400: #33d9ed;
	--color-info-500: #00cfe8;
	--color-info-600: #00bbd1;
	--color-info-700: #00b0c5;
	--color-info-800: #00a6ba;
	--color-info-900: #009bae;
	/*  */
	--color-blue: #007bff;
	--color-indigo: #6610f2;
	--color-purple: #7367f0;
	--color-pink: #e83e8c;
	--color-red: #ea5455;
	--color-orange: #fd7e14;
	--color-yellow: #ff9f43;
	--color-green: #28c76f;
	--color-teal: #20c997;
	--color-cyan: #00cfe8;
	/*  */
	--color-tooltip: #2f3349;
	--color-divider: #dbdade;
	/*  */
	--color-background: #f8f7fa;
	/*  */
	/*  */
	/*  */
	--gradient-primary: 133deg, #7367f0 0%, rgba(115, 103, 240, 0.7) 100%;
	/*  */
	/*  */
	/*  */
	--shadow-primary-sm: 0 2px 3px 0 rgba(115, 103, 240, 0.3);
	--shadow-primary: 0 4px 16px 0 rgba(115, 103, 240, 0.45);
	--shadow-primary-lg: 0 10px 20px 0 rgba(115, 103, 240, 0.4);
	/*  */
	--shadow-sm: 0 2px 4px 0 rgba(165, 163, 174, 0.3);
	--shadow-md: 0 4px 16px 0 rgba(165, 163, 174, 0.45);
	--shadow-lg: 0 10px 20px 5px rgba(165, 163, 174, 0.4);
	/*  */
	--shadow-extra: 0 4px 18px 0 rgba(75, 70, 92, 0.1);
	/*  */
	/*  */
	/*  */
	--text-2xs: 9px;
	--text-xs: 11px;
	--text-sm: 13px;
	--text-base: 15px;
	--text-lg: 17px;
	--text-xl: 19px;
	--text-2xl: 22px;
	--text-3xl: 32px;
	--text-4xl: 38px;
	/*  */
	/*  */
	/*  */
	--default-transition-duration: 250ms;
	/*  */
	/*  */
	/*  */
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
	--breakpoint-2xl: 1440px;
}

@custom-variant dark (&:where(.dark, .dark *));

@media (prefers-color-scheme: dark) {
	@theme {
		/*  */
		--color-dark-gray: #8692d0;
		--color-dark-gray-100: #e7e9f6;
		--color-dark-gray-200: #cfd3ec;
		--color-dark-gray-300: #b6bee3;
		--color-dark-gray-400: #aab2de;
		--color-dark-gray-500: #8692d0;
		--color-dark-gray-600: #7984bc;
		--color-dark-gray-700: #5e6692;
		--color-dark-gray-800: #4a5072;
		--color-dark-gray-900: #2f3349;
		/*  */
		--color-dark-tooltip: #5d586c;
		--color-dark-divider: #434968;
		/*  */
		--color-dark-background: #25293c;
		/*  */
		/*  */
		/*  */
		--shadow-dark-sm: 0 2px 4px 0 rgba(15, 20, 34, 0.4);
		--shadow-dark-sm: 0 4px 16px 0 rgba(15, 20, 34, 0.45);
		--shadow-dark-lg: 0 10px 20px 0 rgba(15, 20, 34, 0.5);
		/*  */
		--shadow-dark-extra: 0 4px 20px 0 rgba(15, 20, 34, 0.4);
	}
}

html,
body {
	overflow-x: hidden;
}

a:hover,
button:hover {
	cursor: pointer;
}

a,
button {
	outline: none;
}

/*  */

.is-grid {
	background:
		linear-gradient(#bbb, transparent 1px),
		linear-gradient(90deg, #bbb, transparent 1px);
	background-size: 15px 15px;
	background-position: 0 0;
}

.is-edit .react-grid-item .echarts-for-react {
	pointer-events: none;
	opacity: 0.5;
}

.react-grid-item.react-draggable {
	cursor: move;
}
