#tool_pen_area {
    position: fixed; 
    top: 1%; 
    right : 56px;
    padding:5px 5px 5px 5px; 
    background-color:white; 
    border-radius: 4px;
    display:none;
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}
#paletContainer {
	display: grid;
	gap: 2px;
}

#colorPalet {
	grid-template-columns: 32px 32px 32px;
	grid-column-start: 1;
	grid-row-start: 1;
	padding:1px 1px 1px 1px; 
	display: grid;
	border: 1px solid gray;
	border-radius: 4px;
	align-content: baseline;
}
#colorPalet div {
	width: 32px;
	height: 32px;
	border: 2px solid white;
	border-radius: 4px;
	cursor: pointer;
}
#sizePalet {
	grid-template-columns: 32px 32px 32px;
	grid-column-start: 1;
	grid-row-start: 2;
	padding:1px 1px 1px 1px;
	display: grid;
	border: 1px solid gray;
	border-radius: 4px;
	align-content: baseline;
}

#typePalet {
	grid-template-columns: 32px 32px 32px;
	grid-column-start: 1;
	grid-row-start: 3;
	padding:1px 1px 1px 1px;
	display: grid;
	border: 1px solid gray;
	border-radius: 4px;
	align-content: baseline;
}

#typePalet div {
	width: 32px;
	height: 32px;
	border: 2px solid white;
	border-radius: 4px;
	cursor: pointer;
}

#utilPalet {
	grid-column-start: 1;
	grid-row-start: 4;
	grid-template-columns: 32px 32px;
	padding:1px 1px 1px 1px;
	display: grid;
	border: 1px solid gray;
	border-radius: 4px;
	justify-content: end;
}

#utilPalet div{
	width: 32px;
	height: 32px;
	border: 2px solid white;
	border-radius: 4px;
	display: flex;
}

#sizePalet div{
	width: 32px;
	height: 32px;
	border: 2px solid white;
	border-radius: 4px;
	display: flex;
}

#shapePalet {
	padding:2px 2px 2px 2px;
}

#high {
	background-color: #ffff99;
}

#black {
	background-color: #000000;
}

#blue {
	background-color: #0000ff;
}

#red {
	background-color: #ff0000;
}