.mapView {
    position:   absolute;
    top:        65px;
    bottom:     0px;
    left:       0px;
    right:      0px;
    z-index:    10;
    overscroll-behavior: contain !important;
    touch-action: none !important;
}
.mapViewInvisible {
    position:   absolute;
    top:        -1024px;
    left:       -1024px;
    z-index:    0;
    width:      1024px;;
    height:     1024px;
}

#map {
    height: 100%;
    width:  100%;
    overscroll-behavior: contain !important;
    touch-action: none !important;
}
.headBtn{
    position:   relative;
    z-index:    100;
    outline:    0 !important;
}
.mapButton {
    position:      absolute;
    z-index:       100;
    width:         100px;
    height:        100px;
    padding:       10px 16px;
    font-size:     24px;
    line-height:   1.33;
    outline:       0;
}
.smallMapButton {
    position:      relative;
    width:         60px;
    height:        60px;
    font-size:     30px;
    border-radius: 45px;
    z-index:       100;
    opacity:       0.8;
    border:        none;
    outline:       0 !important;
    color:         #fff !important;
}
.smallMapButton:active {
    color:  #fff !important;
}
.smallMapButton:hover {
    color:  #fff !important;
}
.smallMapButton:focus {
    color:  #fff !important;
}

#mapObjectsTableBtn {
    top:  8px;
    left: 8px;
}

#mapTellimusedBtn {
    top:       8px;
    left:      117px;
    font-size: 19px;
}

#getPosition {
    top:            8px;
    left:           15px;
    height:         150px;
    width:          150px;
    opacity:        0.6;
    background:     #ededed;
    outline:        0;
}
#getPosition div {
    position:       absolute;
    width:          55%;
    height:         55%;
    border-radius:  50%;
    border:         1px solid #000;
    vertical-align: -20%;
    text-align:     center;
    bottom:         35%;
    left:           23%;
}
#getPosition div span {
    position:       absolute;
    top:            50%;
    transform:      translateY(-50%);
    right:          20%;
    background:     url(../img/myLocation.png) no-repeat !important;
    height:         50px;
    width:          50px;  
}
#getPosition p {
    position:       absolute;
    font-size:      16px;
    color:          #000;
    bottom:         18px;
    width:          80%;
    text-align:     center;
}
#mapMenu {
    top:            7px;
    margin-right:   5px;
    margin-left:    5px;
    width:          50px;
    height:         50px;
    background: transparent;
    padding:        6px;
    padding-top:    12px;
}
#mapMenu span{
    height:         3px;
    width:          35px;
    display:        block;
    background-color: #7cc242;
    margin-bottom:  7px;
}
#mapMenuLegend {
    margin-right: 2px;
    margin-left:  2px;
    top:          12px;
    width:        40px;
    height:       40px;
    background-color: #7cc242;
    color : #ffffff;
    outline:      0;
    padding:      4px;
    padding-top:  8px;
}
#mapMenuLegend span{

}
#stopEditBtn {
    top:          7px;
    width:        50px;
    height:       50px;
    background-color: transparent;
    float:        right;
}
#stopEditBtn span {
    position:     absolute;
    right:        15px;
    bottom:       15px;
    background:   url(../img/exit.png) no-repeat;
    height:       21px;
    width:        21px;
    outline:      0;
}
#refreshBtn {
    top: 7px;
    width: 50px;
    height: 50px;
    position: relative;
    background: transparent;
    outline: 0 !important;
}
#refreshBtn span {
    color: #7cc242;
    font-size: 25px;
}
#logOffBtn {
    top: 7px;
    width: 50px;
    height: 50px;
    position: relative;
    background: transparent;
    outline: 0 !important;
}
#helpBtn {
    top: 7px;
    width: 50px;
    height: 40px;
    position: relative;

    outline: 0 !important;
}
#helpBtn span {
    color: #7cc242;
    font-size: 25px;
    top:13px;
}
#menuBtn {
    top: 17px;
    margin-right: 10px;
    color: green;
    width: 50px;
    height: 50px;
    position: relative;
    background: transparent;
    outline: 0 !important;
}


#logOffBtn span {
    color: #7cc242;
    font-size: 25px;
    top:13px;
}
/*------Header Buttons-----------*/
#backBtn {
    top:            7px;
    width:          25px;
    height:         50px;
    background: transparent;
}
#backBtn span{
    position:       absolute;
    right:          4px;
    bottom:         9px;
    background:     url(../img/back.png) no-repeat;
    height:         32px;
    width:          18px;
}
#centerObjBtn {
    top:            8px;
    margin-left:    3px;
    margin-right:   3px;
    height:         50px;
    width:          50px;
    border-radius:  50%;
    border:         2px solid #7cc242;
    background:     transparent;
}
#centerObjBtn span {
    position:       absolute;
    height:         30px;
    width:          30px;
    background:     url(../img/myLocationHeader.png) no-repeat;
    top:            50%;
    transform: translateY(-50%);
    right:          8px; 
}
#filterBtn {
    top:            12px;
    width:          105px;
    height:         39px;
    border-radius:  5px;
    margin-right:   5px;
    margin-left:    5px;
}
#filterBtn span {
    color:          #fff;
    font-size:      16px;
    font-weight:    bold;
}

#archiveWorkOrders {
    top:            12px;
    width:          105px;
    height:         39px;
    border-radius:  5px;
    margin-right:   5px;
    margin-left:    5px;
}
#archiveWorkOrders span {
    color:          #fff;
    font-size:      16px;
    font-weight:    bold;
}

#saatelehedBtn {
    top:            12px;
    width:          140px;
    height:         39px;
    border-radius:  5px;
    margin-right:   5px;
    margin-left:    5px;
}
#saatelehedBtn span {
    color:          #fff;
    font-size:      16px;
    font-weight:    bold;
}

/*-------------Zoom buttons-----------*/

.zoomArea{
    min-height:   260px;
    width:        65px;
    position:     absolute;
    top:          30%;
    left:         1.5%;
}
#btnZoom1 {
    position:     absolute;
    top:          0%;
}
#btnZoom2 {
    position:     absolute;
    top:          25%;
}
#btnZoom3 {
    position:     absolute;
    top:          50%;
}
#btnZoom4 {
    position:     absolute;
    top:          75%;
}

@media only screen and (max-height: 605px){
.zoomArea{
    height:       65px;
    width:        260px;
    position:     absolute;
    top:          auto;
    bottom:       75px;
    left:         10px;
}
#btnZoom1 {
    position:     absolute;
    left:         0%;
    top:          100%;
}
#btnZoom2 {
    position:     absolute;
    left:         25%;
    top:          100%;
}
#btnZoom3 {
    position:     absolute;
    left:         50%;
    top:          100%;
}
#btnZoom4 {
    position:     absolute;
    left:         75%;
    top:          100%;
}
}
/*----------------------------*/

#layersSelector{
    right: 0;
    height: 100%;
    bottom: 0;
    width: 250px;
    border-radius: 50px;
    opacity:      0.8;
    text-align:    center;
    position:absolute;


}
.mapShift {
    left: -250px;
    position: absolute;

}
.toggleShift {
    right : 250px !important;

}

#toggleLayers {
    bottom:       40%;
    height:       80px;
    width:        80px;
    right:        1.5%;
    border-radius: 50px;
    opacity:      0.8;
}
#toggleLayers span {
    position:     absolute;
    right:        22px;
    bottom:       22px;
    background:   url(../img/layer.png) no-repeat;
    height:       35px;
    width:        35px;
    outline:      0;
}
@media only screen and (max-width: 998px){
    .centerText {
        padding-top: 20px;
        font-size: 18px;
    }
}


#searchResults {
    bottom:       20%;
    height:       80px;
    width:        80px;
    right:        1.5%;
    border-radius: 50px;
    background-color: #7cc242;
    opacity:      0.8;
}
#searchResults span{
    position:     absolute;
    right:        22px;
    bottom:       22px;
    background:   url(../img/menuOtsi.png) no-repeat;
    height:       35px;
    width:        35px;
    outline:      0;
}