.wrapper_square {

	width: 100%;
	margin: 0 auto;
	max-width: 800px;
	
	border: 10px solid black;
	box-sizing: border-box;
	padding: 5px;
	background-color: #DCDCDC;
}
span {
	font-size: 1.2em;
	font-weight: bold;
	padding: 5px;
}
.icon {
	margin: 3px;
	width: 60px;
	height: 60px;
	border: 1px solid blue !important;
}
.icon:hover {
	opacity: 0.6;
	border: 1px solid green !important;
	cursor: pointer;
}

.circle, .rectangle, .oval, .rhombus, .triangle,
 .polygon, .trapeze, .parallelogramm {
	padding: 5px;
	background-color: #C0C0C0;
	
}
.circle_icon, .rectangle_icon, .oval_icon,
 .polygon_icon, .parallelogramm_icon {
	margin: 5px;
	width: 100%;
	max-width: 150px;
}
.rhombus_icon, .triangle_icon, .trapeze_icon {
	margin: 5px;
	width: 95%;
	max-width: 140px;
}

.circle_icon:hover, .rectangle_icon:hover, .oval_icon:hover
, .rhombus_icon:hover, .triangle_icon:hover, .polygon_icon:hover, 
.trapeze_icon:hover, .parallelogramm_icon:hover   {
	border: 1px solid green !important;
	cursor: pointer;
}
.icon:checked {
	border: 1px solid red !important;
}
.btn-decide {
	margin: 10px !important;
}
output {
	font-size: 1.2em !important;
	color: blue !important;
}
@media (max-width: 600px) {
	.wrapper_square {
		padding: 5px !important;
		border: 5px solid black;
	}
	.input-group-addon {
		padding: 6px !important;
	}
}