.ruler * {
    box-sizing: border-box;
}

.ruler {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 2000;
    cursor: move;
    height: 43.5px;
    width: 500px;
}

.ruler-img {
    height: 43.5px;
    width: 500px;
    display: block;
}

.ruler-rotate {
    touch-action: none;
    -ms-touch-action: none;
    background: url(/bundles/concertopanel/files/rotate-icon.png) no-repeat 50%;
    width: 19px;
    height: 65px;
    cursor: move;
    position: absolute;
    bottom: -11px;
    margin-left: -28px;
    background-size: 16px 59px;
    z-index: 2005;
}

.ruler-wrapper {
    position: absolute;
}

.ruler-rotate:hover {
    background-size: 19px 65px;
}

@media only screen and (max-width: 600px) {
    .ruler, .ruler-img {
        width: 350px;
        height: 30.5px;
    }
}