.watermarkLogo{
        bottom: 7%;
        margin-left:10px;
        position: absolute;
        width: 80px;
    }
    .scaletest {
        background: rgba(0,60,136,.3);
        border-radius: 4px;
        bottom: 7%;
        right: 5%;
        padding: 2px;
        position: absolute;
    }
    .custom-zoom{
        top: 5em;
        left: 0.75em;
        background-color: rgba(255,255,255,.6);
    }
    .custom-zoom button{
        background-color: rgba(40, 40, 40, .7);
        border-radius: 50%;
        outline: none;
    }
    .custom-zoom button:hover{
        background-color: rgb(40, 40, 40);

    }
    .custom-zoom button:focus{
        background-color: rgba(40, 40, 40, .7);

    }
    /*zoom slider CSS*/
    .ol-zoomslider {
        top:3%;
        left: 1%;
        background-color: rgba(255,255,255,.6);
        width: 200px;
        height: 15px;
        padding: 0;
        box-shadow: 0 0 5px rgb(255,255,255);
        border-radius: 20px;
    }
    .ol-touch .ol-zoomslider {
        top:4%;
    }
    .ol-zoomslider button{
        position: relative;
        height: 15px;
        background-color: rgba(40, 40, 40, .7);
        border-radius: 6px;
        margin-top: 0px;
        outline: none;
    }
    .controlstyle{
        position: absolute;
        left: 50%;
        top: 50%;
        width: 10px;
        height: 10px;
        padding:10px;
        color: #fff;
        fontSize:200%;
    }
    .btncontrolstyle{
        position: absolute;
        right: 5%;
        bottom: 10%;
        width: 60px;
        height: 60px;
        padding:10px;
        color: #fff;
        fontSize:200%;
        /*transform: rotate(6.88229rad);*/
    }
    .fullscreenbtncontrolstyle{
        position: absolute;
        right: 2%;
        top: 1%;
        width: 40px;
        height: 40px;
        padding:10px;
        color: #fff;
        fontSize:200%;

    }
    .LengthMeasurebtnstyle{
        position: absolute;
        right: 10%;
        top: 1%;
        width: 40px;
        height: 40px;
        padding:10px;
        color: #fff;
        fontSize:200%;

    }
    .ol-rotate {
        bottom:10%;
        right:8px;
        transition:opacity .25s linear,visibility 0s linear;
    }
    .ol-rotate.ol-hidden{
        opacity:0;
        visibility:hidden;
        transition:opacity .25s linear,visibility 0s linear .25s
    }
    .fullscreen {
        margin-bottom: 10px;
        width: 100%;
        height: 400px;
    }
    .tooltip {
        position: relative;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 4px;
        color: white;
        padding: 4px 8px;
        opacity: 0.7;
        white-space: nowrap;
    }
    .tooltip-measure {
        opacity: 1;
        font-weight: bold;
    }
    .tooltip-static {
        background-color: #ffcc33;
        color: black;
        border: 1px solid white;
    }
    .tooltip-measure:before,
    .tooltip-static:before {
        border-top: 6px solid rgba(0, 0, 0, 0.5);
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        content: "";
        position: absolute;
        bottom: -6px;
        margin-left: -7px;
        left: 50%;
    }
    .tooltip-static:before {
        border-top-color: #ffcc33;
    }