html {
	scroll-behavior: smooth;
	scroll-padding-top: 2em;
}

/* color-picker styling */

.clr-field {
	display: flex !important;
	display: hidden !important;
	color: transparent !important;
}

.clr-field button {
	display: none !important;
}

#clr-picker {
	margin-left: -3px !important;
}

.boxshadow-button {
	box-shadow: 5px 5px 0px 0px #000;
}

.boxshadow-img {
	box-shadow: 6px 6px 0px 0px #000000f8;
}

.boxshadow-button:active {
	box-shadow: 3px 3px 0px 0px #000;
}

.boxshadow-lg {
	box-shadow: 4px 4px 0px 0px #000;
}

.boxshadow-sm {
	box-shadow: 2px 2px 0px 0px #000;
}

input:checked+label {
	background-color: #fefe01;
	box-shadow: 2px 2px 0px 0px #000;
	transition: all;
	transition-duration: 75ms;
}

.boxshadow-inverted {
	box-shadow: 5px 5px 0px 0px #fefe01;
}

.fixed-element {
	position: fixed;
	z-index: 10;
	top: 0;
	right: 16px;
	padding: 2px;
}

.fixed-element.not-fixed {
	position: absolute;
}

.canvas-bg {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%237f7f7f' fill-opacity='0.1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
}

.divider-bg {
	background-color: #000000;
	background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffff00' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Firefox */
.decent-scrollbar-dark {
	scrollbar-width: auto;
	scrollbar-color: #454545 #00000050;
}

/* Chrome, Edge, and Safari */
.decent-scrollbar-dark::-webkit-scrollbar {
	width: 6px;
}

.decent-scrollbar-dark::-webkit-scrollbar-track {
	background: #00000050;
}

.decent-scrollbar-dark::-webkit-scrollbar-thumb {
	background-color: #454545;
	border-radius: 6px;
	border: 1px solid #1a1a1a;
}

/* Firefox */
.decent-scrollbar-light {
	scrollbar-width: auto;
	scrollbar-color: #c2c2c2 #ffffff50;
}

/* Chrome, Edge, and Safari */
.decent-scrollbar-light::-webkit-scrollbar {
	width: 6px;
}

.decent-scrollbar-light::-webkit-scrollbar-track {
	background: #ffffff50;
}

.decent-scrollbar-light::-webkit-scrollbar-thumb {
	background-color: #c2c2c2;
	border-radius: 6px;
	border: 1px solid #d1d1d1;
}