@charset "windows-1251";
/* CSS Document */
canvas {
	display: block;
	border: 1px solid #000000;
	width: 100%;
	height: 100%;
}
.canvas-contaner {
	display: flex;
	justify-content: center; /* Выравнивание содержимого по центру по горизонтали */
	align-items: center; /* Выравнивание содержимого по центру по вертикали */
}
.color-swatch-stroke {	/* Переключатель обводки */
	display: flex;
	justify-content: center; /* Выравнивание содержимого по центру по горизонтали */
	align-items: center; /* Выравнивание содержимого по центру по вертикали */
	width: 32px;
	height: 22px;
	margin: 5px;
	cursor: pointer;
	border-radius:5px;
}
.color-swatch-stroke:hover {	/* Переключатель обводки при наведении */
	background:#CCCCCC;
}
.color-swatch-stroke_act {	/* Переключатель обводки выделенный */
	display: flex;
	justify-content: center; /* Выравнивание содержимого по центру по горизонтали */
	align-items: center; /* Выравнивание содержимого по центру по вертикали */
	width: 32px;
	height: 22px;
	margin: 5px;
	cursor: pointer;
	border-radius:5px;
	background:#CCCCCC;
}

.color-swatch-fill, .brush-width {
	display: flex;
	justify-content: center; /* Выравнивание содержимого по центру по горизонтали */
	align-items: center; /* Выравнивание содержимого по центру по вертикали */
	width: 40px;
	height: 30px;
	margin: 5px;
	cursor: pointer;
	border: 1px solid #AAAAAA; /* Граница элемента */
	border-radius:5px;
}
.color-swatch-fill:hover {
	border: 5px solid #000000;
	width: 32px;
	height: 22px;
}
.brush-width:hover {
	background:#CCCCCC;
}
.brush-width_act {
	display: flex;
	justify-content: center; /* Выравнивание содержимого по центру по горизонтали */
	align-items: center; /* Выравнивание содержимого по центру по вертикали */
	width: 40px;
	height: 30px;
	margin: 5px;
	cursor: pointer;
	border: 1px solid #AAAAAA; /* Граница элемента */
	border-radius:5px;
	background:#CCCCCC;
}
.color-swatch-fill_act {
	display: flex;
	justify-content: center; /* Выравнивание содержимого по центру по горизонтали */
	align-items: center; /* Выравнивание содержимого по центру по вертикали */
	width: 32px;
	height: 22px;
	margin: 5px;
	cursor: pointer;
	border: 5px solid #000000; /* Граница элемента */
	border-radius:5px;
}

.drawing-mode {
	cursor: crosshair;
}
.container {
	display: flex;
	justify-content: center; /* Выравнивание по центру по горизонтали */
	align-items: center; /* Выравнивание по центру по вертикали */
}

.item-board {
	display: flex;
	justify-content: center; /* Выравнивание содержимого по центру по горизонтали */
	align-items: center; /* Выравнивание содержимого по центру по вертикали */
	width: 40px; /* Ширина элемента */
	height: 30px; /* Высота элемента */
	margin: 5px; /* Отступы между элементами */
	border: 1px solid #AAAAAA; /* Граница элемента */
	background-color: #FFFFFF; /* Фон элемента */
	border-radius:5px;
}
.item-board:hover{
	background:#CCCCCC;
	cursor:pointer;
}
.item-board_ac {
	display: flex;
	justify-content: center; /* Выравнивание содержимого по центру по горизонтали */
	align-items: center; /* Выравнивание содержимого по центру по вертикали */
	width: 40px; /* Ширина элемента */
	height: 30px; /* Высота элемента */
	margin: 5px; /* Отступы между элементами */
	border: 1px solid #AAAAAA; /* Граница элемента */
	background-color: #CCCCCC; /* Фон элемента */
	border-radius:5px;
}