#viewGrues.active{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.cranePlacementButtons{
    display: flex;
    justify-content: space-between;
    width: 15vw;
    height:15vw;
}

#viewGrues input{
    width: 30px;
    height: 30px;
}

.cranePlacementButtons svg, .magnetHeightButtons svg {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px ;
    height: 40px;
    cursor: pointer;
}

#viewGrues div svg:hover {
    color: #1582fd;
}

#viewGrues path {
    fill: none;
}

.leftPart{
    display: flex;
    justify-content: center;
    align-items: center;
}

.rightPart{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
}

.middlePart{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
}

.upperMiddlePart{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.lowerMiddlePart{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
}

#viewGrues input[type=text]{
    border: 1px solid #d1d0d0;
	border-radius: 5px;
	outline: none;
    text-align: center;
}

#viewGrues input[type=text]:focus{
    border-color: #1582fd;
}

.magnetHeightButtons{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 15vw;
    height:15vw;
}

.magnetButton {
    border-radius: 100%;
    background: none;
    border: 1px solid #d1d0d0;
    color: #d1d0d0;
    transition: 0.3s ease;
    cursor: pointer;
    height: 30px;
    width: 30px;
}

.magnetButton:hover {
    border: 1px solid #1581fd7a;
    color: #1581fd7a;
}

.magnetButton.active {
    border: 1px solid #1582fd;
    color: #1582fd;
}

#viewGrues .magnetButton svg{
    width: 20px;
    height: 20px;
}