/* COMPASS STYLING */

#compass:hover .icon,
#compass:active .icon {
    fill: var(--icon-rgb);
}



#compass {
    display: none;

    position: absolute;
    bottom: calc(var(--titleBar-height) + 2 * var(--titleBar-bottom));
    right: var(--titleBar-leftAndRight);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    pointer-events: none;
    background-color: var(--background-rgba);
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}



#compass .icon {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 40px;
    max-width: 40px;
    height: 40px;
}



#compass #compassNorth {
    position: absolute;
    left: 30px;
    top: 5px;
    width: 20px;
    height: 20px;
}