.telo-klouby {
	position: relative;
}

.telo-klouby .boxes {
	position: absolute;
	left: 0px;
	top: 0px;
}

.telo-klouby.editable .box {
	cursor: pointer;
}

.telo-klouby.editable .box.clicked:hover .joint {
    background: transparent;
    box-shadow: none;
}

.telo-klouby.editable .box:hover .joint {
	background: transparent;
}

.telo-klouby .box.active .joint,
.telo-klouby .box.active:hover .joint {
    background: red;
}

.telo-klouby .box.active .joint,
.telo-klouby.editable .box:hover .joint {
    box-shadow: 0 0 11px rgb(255 0 0), 0 0 9px rgb(255 0 0), 0 0 7px rgb(255 0 0), 0 0 5px rgb(255 0 0), 0 0 3px rgb(255 0 0);
}

.telo-klouby .box {
	position: absolute;
	width: 71px;
}

.telo-klouby .box.left {
	left: 0px;	
}
.telo-klouby .box.right {
	left: 72px;	
}

.telo-klouby .box.elbow {
	top: 64px;
	height: 80px;
}

.telo-klouby .box.knee {
	top: 145px;
	height: 80px;
}

.telo-klouby .box.ankle {
	top: 226px;
	height: 55px;
}

.telo-klouby.editable .box .joint {
	border: 1px red solid;
}

.telo-klouby .box .joint {
	position: absolute;
	width: 6px;
    height: 6px;
    border-radius: 4px;
}

.telo-klouby .box.elbow.left .joint {
	top: 27px;
	left: 32px;
}

.telo-klouby .box.elbow.right .joint {
	top: 27px;
	left: 27px;
}

.telo-klouby .box.knee.left .joint {
	top: 42px;
	left: 57px;
}

.telo-klouby .box.knee.right .joint {
	top: 42px;
	left: 3px;
}

.telo-klouby .box.ankle.left .joint {
	top: 24px;
	left: 61px;
}

.telo-klouby .box.ankle.right .joint {
	top: 24px;
	left: -1px;
}

.telo-klouby .box.active .joint label,
.telo-klouby.editable .box:hover .joint label {
	color: rgba(255,0,0,.5);
}

.telo-klouby.editable .box .joint label {
	cursor: pointer;
}

.telo-klouby .box .joint label {
	position: absolute;
	color: #ced4da;
	white-space: nowrap;
	
}
	
.telo-klouby .box.left .joint label {
	top: -10px;
	right: 22px;
}

.telo-klouby .box.right .joint label {
	top: -10px;
	left: 22px;
}