@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
	--color-primary: #767676;
	--color-secondary: #434343;
	--color-background: #1f1f1f;

	--color-text: #ffffff;
	--color-accent-fail: #ed4c4c;
	--color-accent-success: #339e4b;
}

*, ::before, ::after {
	--tw-scrollbar-track: var(--color-text);
	--tw-scrollbar-thumb: var(--color-background);
}

.scrollbar-track-primary {
	--tw-scrollbar-track: var(--color-primary);
}

.scrollbar-track-secondary {
	--tw-scrollbar-track: var(--color-secondary);
}

.scrollbar-track-background {
	--tw-scrollbar-track: var(--color-background);
}

.scrollbar-track-text {
	--tw-scrollbar-track: var(--color-text);
}

.scrollbar-track-accent-success {
	--tw-scrollbar-track: var(--color-accent-success);
}

.scrollbar-track-accent-fail {
	--tw-scrollbar-track: var(--color-accent-fail);
}

.scrollbar-thumb-primary {
	--tw-scrollbar-thumb: var(--color-primary);
}

.scrollbar-thumb-secondary {
	--tw-scrollbar-thumb: var(--color-secondary);
}

.scrollbar-thumb-background {
	--tw-scrollbar-thumb: var(--color-background);
}

.scrollbar-thumb-text {
	--tw-scrollbar-thumb: var(--color-text);
}

.scrollbar-thumb-accent-success {
	--tw-scrollbar-thumb: var(--color-accent-success);
}

.scrollbar-thumb-accent-fail {
	--tw-scrollbar-thumb: var(--color-accent-fail);
}

.scrollbar-none::-webkit-scrollbar {
	display: none;
	scrollbar-width: 0px;
	scrollbar-height: 0px;
}

/* Firefox */
.scrollbar-custom {
	scrollbar-width: thin;
	scrollbar-height: thin;
	scrollbar-color: var(--tw-scrollbar-track) var(--tw-scrollbar-thumb);
}

/* Chrome, Edge, and Safari */
.scrollbar-custom::-webkit-scrollbar {
	width: 0.75rem;
	height: 0.75rem;
}

.scrollbar-custom::-webkit-scrollbar-track {
	background: var(--tw-scrollbar-track)
}

.scrollbar-custom::-webkit-scrollbar-thumb {
	background-color: var(--tw-scrollbar-thumb);
	border-radius: 2rem;
	border: 3px solid var(--tw-scrollbar-track);
}

.scrollbar-rounded-xl::-webkit-scrollbar-track {
	border-radius: 0.5rem;
}

.font-montserrat {
	font-family: "Montserrat", sans-serif;
}

.text-primary {
	color: var(--color-primary);
}

.text-secondary {
	color: var(--color-secondary);
}

.text-background {
	color: var(--color-background);
}

.text-text {
	color: var(--color-text);
}

.text-accent-fail {
	color: var(--color-accent-fail);
}

.text-accent-success {
	color: var(--color-accent-success);
}

.bg-primary {
	background-color: var(--color-primary);
}

.bg-secondary {
	background-color: var(--color-secondary);
}

.bg-background {
	background-color: var(--color-background);
}

.bg-text {
	background-color: var(--color-text);
}

.bg-accent-fail {
	background-color: var(--color-accent-fail);
}

.bg-accent-success {
	background-color: var(--color-accent-success);
}

.border-primary {
	border-color: var(--color-primary);
}

.border-secondary {
	border-color: var(--color-secondary);
}

.border-background {
	border-color: var(--color-background);
}

.border-text {
	border-color: var(--color-text);
}

.border-accent-fail {
	border-color: var(--color-accent-fail);
}

.border-accent-success {
	border-color: var(--color-accent-success);
}

.hover\:border-accent-success {
	border-color: var(--color-accent-success);
}

.hover\:border-primary:hover {
	border-color: var(--color-primary);
}

.hover\:border-secondary:hover {
	border-color: var(--color-secondary);
}

.hover\:border-background:hover {
	border-color: var(--color-background);
}

.hover\:border-text:hover {
	border-color: var(--color-text);
}

.hover\:border-accent-fail:hover {
	border-color: var(--color-accent-fail);
}

.hover\:border-accent-success:hover {
	border-color: var(--color-accent-success);
}

.group-data-\[checked\=\'0\'\]\:bg-accent-success[data-checked="0"] {
	background-color: var(--color-accent-success);
}
.group-data-\[checked\=\'1\'\]\:bg-accent-fail[data-checked="1"] {
	background-color: var(--color-accent-fail);
}
