:root {
	--primary-color: #0069d9;
}

html,body {
	margin   : 0;
	overflow : hidden;
	height   : 100%;
}

canvas {
	width    : 100%;
	height   : 100%;
	position : absolute;
	top      : 0;
	left     : 0;
}

.text-07 {
	font-size: 0.7rem;
}

.leftBar {
	position: fixed;
	cursor: default;
}


.tools button, .undoRedo button {
	width: 35px;
	height: 35px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: none;
	border-radius: 5px;
	margin-bottom: 0.5rem;
	cursor: default;
	transition: all 0.5s;
}

.tools button {
	background-color: #f0f0f0;
}

.tools button:last-child, .undoRedo button:last-child {
	margin-bottom: 0;
}

.tools button i, .undoRedo button i {
	font-size: 16px;
}

.tools button:hover, .undoRedo button:hover {
	background-color: #ddd;
}

.toolsButtonSelected {
	background-color: var(--primary-color) !important;
}

.toolsButtonSelected img {
	filter: invert(1) sepia(1) saturate(0) hue-rotate(0deg); /* change the color of the svg to white */
}





.rightBar {
	width: 180px;
	position: fixed !important;
	right: 0;
	top: 0;
	cursor: default;
}

/* Make the .layers div resizable */
.layers {
	resize: vertical; /* Allows vertical resizing */
	overflow: hidden; /* Prevents content overflow until it reaches the height limit */
	max-height: 80vh; /* Limits the maximum height to 80% of the viewport height */
}

/* Make the .layerRowsContainer scrollable */
.layerRowsContainer {
	overflow-y: auto; /* Enables vertical scrolling if content exceeds height */
	max-height: calc(100% - 4rem); /* Adjust this value based on header/footer heights */
}

.layerRow img {
	filter: brightness(0) saturate(100%) invert(66%) sepia(75%) saturate(8%) hue-rotate(333deg) brightness(81%) contrast(92%);
	height: 12px;
}

.layerRowHighlighted {
	background-color: rgba(0, 0, 0, 0.05) !important;
}

.svgColorLightGray {
	filter: brightness(0) saturate(100%) invert(66%) sepia(75%) saturate(8%) hue-rotate(333deg) brightness(81%) contrast(92%);
}

.svgColorDarkGray {
	filter: brightness(0) saturate(100%) invert(29%) sepia(2%) saturate(3%) hue-rotate(85deg) brightness(101%) contrast(97%);
}

.layerRow .eyeContainer, .layerRow .lockContainer {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.125rem;
	border-right: 1px solid rgba(0, 0, 0, .125); 
	min-width:21px;
}

.layerRow[data-isgrouplayer="false"] > .d-flex {
	min-height: 2.2rem;
}

.layerRow[data-isgrouplayer="false"] .downArrow {
	display: none;
}

.layerRow[data-isgrouplayer="true"] .colorStrip {
	display: none;
}

.layerRow:last-child {
	/*border-bottom: none !important;*/
}

.cursor-pointer {
	cursor: pointer;
}

.contextualBar {
	display: none;
}

.skeletonLayerRow {
	width: 100%;
	background-color: #e0e0e0;
	position: relative;
	overflow: hidden;
}

.skeletonLayerRow .colorStrip, .skeletonLayerRow .downArrow {
	display: none;
}

.skeletonLayerRow::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: -150px;
	height: 100%;
	width: 150px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0));
	animation: loading 2s infinite;
}
@keyframes loading {
	0% {
		left: -150px;
	}
	50% {
		left: 100%;
	}
	100% {
		left: 100%;
	}
}

.bgColor {
	border: 1px solid #fff;
}

.colorSelection {
	width: 10rem;
}

.colorSelection .btn {
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 0.9rem !important;
}

.no-select {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none; 
	-ms-user-select: none; 
}