/* body {
    margin:0;
    overflow: hidden;
} */
.pinch-zoom-container {
    height: 100vh;
    overflow: hidden;
}

.pinch-zoom-image {
    width: 100%;
    height: max-content;
}

#test {
    width:100%;
}

#map {
    overflow: hidden;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.frame {
    touch-action: pinch-zoom;
    overflow: scroll;
    width: 100%;
    height: 100%;
    position: relative;
    cursor: default;
    user-select: none;
}

.frame #def {
    width:100%;
    cursor: default;
}

#all-tools.all-hidden{
    display: none;
}


.tools {
    position: fixed;
    right: 3vw;
    bottom:45vh;
    z-index: 99;
    font-weight: 900;
}

.tools .zoom-in {
    width:40px;
    height: 40px;
    color:#D80027;
    background: #FFFFFF;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.45);
    border-radius: 100px;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
    font-size: 24px;
    margin-bottom: 10px;
    user-select: none;
}

.tools .zoom-out {
    width:40px;
    height: 40px;
    color:#D80027;
    background: #FFFFFF;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.45);
    border-radius: 100px;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
    font-size: 24px;
    user-select: none;
}

.tools-bot {
    position: fixed;
    right: 3vw;
    /* top:60vh; */
    bottom: 10vh;
    z-index: 99;
    font-weight: 900;
}

.tools-register {
    position: fixed;
    right: 3vw;
    /* top:60vh; */
    bottom: 20vh;
    z-index: 99;
    font-weight: 900;
}

.tools-register .round-flag {
    width: 140px;
    height: 125px;
    background: #FFFFFF;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15);
    border-radius: 30px;
    text-align: center;
    vertical-align: middle;
    user-select: none;

    padding: 20px;
}
.tools-register p{
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: #242424;

    margin-bottom: 12px;
}
.tools-register img{
    width: 50px;
    vertical-align: bottom;
}
.tools-register .num{
    font-family: 'Oswald', sans-serif;
    font-weight: normal;
    font-size: 24px;
    line-height: 36px;
    color: #242424;
    vertical-align: baseline;
    user-select: none;
}
.tools-register .num-red{
    /* font-family: 'Oswald', sans-serif;
    font-weight: normal;
    font-size: 36px;
    line-height: 53px; */
    color: #D80027;
    font-size: 36px;
    padding-left: 10px;
    /* vertical-align: bottom;
    user-select: none; */
}



.buttons {
    overflow: hidden;
    position: absolute;
    z-index: 97;
    top:0px;
    left:0px;
    width:100%;
    height: 100%;
    /* opacity: 50%;  */
}

#soviet {
    width: 23.2%;
    position: absolute;
    top: 32.7%;
    z-index: 98;
    left: 0px;
    display: none;
}

#town {
    width: 55.150%;
    position: absolute;
    top: 0;
    z-index: 98;
    left: 0px;
    display: none;
}

#horse {
    width: 41.75%;
    position: absolute;
    top: 0;
    z-index: 98;
    right: 0px;
    display: none;
}

#war {
    width: 40.65%;
    position: absolute;
    top: 47.2%;
    z-index: 98;
    right: 0px;
    display: none;
}

#ship {
    width: 43.65%;
    position: absolute;
    bottom: 0;
    z-index: 98;
    right: 0px;
    display: none;
}

#camp {
    width: 51.35%;
    position: absolute;
    bottom: 7.7%;
    z-index: 98;
    left: 0px;
    display: none;
}

#bussines {
    width: 24.55%;
    position: absolute;
    top: 42.3%;
    z-index: 98;
    left: 25.1%;
    display: none;
}

#general {
    width: 33.05%;
    position: absolute;
    top: 29%;
    z-index: 98;
    right: 21.5%;
    display: none;
}

#last {
    width: 100%;
    position: absolute;
    top: 0px;
    z-index: 98;
    left: 0%;
    display: none;
}

#btn-1 {
    width: 11.1%;
    height: 6.7%;
    position: absolute;
    top: 47.2%;
    opacity: 50%;
    left: 69.9%;
    /* background: black; */
    border-top-right-radius: 180%;
    border-top-left-radius: 56%;
    border-bottom-left-radius: 40%;
    cursor: default;
}

#btn-2 {
    width: 5%;
    height: 4.5%;
    position: absolute;
    top: 87.7%;
    opacity: 50%;
    left: 69.9%;
    /* background: black; */
    border-top-left-radius: 112%;
    border-bottom-right-radius: 81%;
    transform: rotate(2.7deg);
    cursor: default;
}

#btn-3 {
    width: 9.4%;
    height: 9.7%;
    position: absolute;
    top: 4.4%;
    opacity: 50%;
    left: 60.9%;
    /* background: black; */
    border-top-right-radius: 100%;
    border-bottom-left-radius: 94%;
    cursor: default;
}

#btn-4-1 {
    width: 2.2%;
    height: 2.7%;
    position: absolute;
    top: 33.8%;
    opacity: 50%;
    left: 56.2%;
    /* background: black; */
    border-radius: 100%;
    cursor: default;
}

#btn-4-2 {
    width: 2.7%;
    height: 1.7%;
    position: absolute;
    top: 36.2%;
    opacity: 50%;
    left: 67.3%;
    /* background: black; */
    border-radius: 100%;
    cursor: default;
}

#btn-5 {
    width: 11.1%;
    height: 6.7%;
    position: absolute;
    top: 46.5%;
    opacity: 50%;
    left: 32.4%;
    /* background: black; */
    border-bottom-right-radius: 30%;
    border-bottom-left-radius: 80%;
    transform: rotate(28deg);
    cursor: default;
}

#btn-6 {
    width: 3.5%;
    height: 2.4%;
    position: absolute;
    top: 46.6%;
    opacity: 50%;
    left: 18.4%;
    /* background: black; */
    transform: rotate(29deg);
    cursor: default;
}

#btn-7 {
    width: 7.4%;
    height: 6.7%;
    position: absolute;
    top: 12.4%;
    opacity: 50%;
    left: 28.9%;
    /* background: black; */
    border-top-right-radius: 100%;
    border-bottom-left-radius: 40%;
    cursor: default;
}

#btn-8-1 {
    width: 8.4%;
    height: 3.7%;
    position: absolute;
    top: 57.4%;
    opacity: 50%;
    left: 1.9%;
    /* background: black; */
    border-top-left-radius: 77%;
    border-bottom-right-radius: 60%;
    transform: rotate(-32deg);
    cursor: default;
}

#btn-8-2 {
    width: 5.4%;
    height: 3.7%;
    position: absolute;
    top: 58.4%;
    opacity: 50%;
    left: 8.9%;
    /* background: black; */
    border-top-left-radius: 64%;
    border-bottom-right-radius: 60%;
    transform: rotate(-26deg);
    cursor: default;
}

#flag-town {
    width: 7.7%;
    height: 7.3%;
    position: absolute;
    top: 12.3%;
    left: 29.1%;
    background: none;
    z-index: 99;
    display: none;
}

#flag-horse {
    width: 8.3%;
    height: 8.7%;
    position: absolute;
    top: 5.5%;
    left: 61.6%;
    background: none;
    z-index: 99;
    display: none;
}

#flag-general {
    width: 13.7%;
    height: 3.1%;
    position: absolute;
    top: 34.6%;
    left: 56.3%;
    background: none;
    z-index: 99;
    display: none;
}

#flag-soviet {
    width: 3.7%;
    height: 3.5%;
    position: absolute;
    top: 46.2%;
    left: 18.3%;
    background: none;
    z-index: 99;
    display: none;
}

#flag-bussines {
    width: 10%;
    height: 11.7%;
    position: absolute;
    top: 44.5%;
    left: 34.3%;
    background: none;
    z-index: 99;
    display: none;
}

#flag-war {
    width: 10.4%;
    height: 6.5%;
    position: absolute;
    top: 47.2%;
    left: 69.9%;
    background: none;
    z-index: 99;
    display: none;
}

#flag-camp {
    width: 9.2%;
    height: 7.2%;
    position: absolute;
    top: 56%;
    left: 3.9%;
    background: none;
    z-index: 99;
    display: none;
}

#flag-ship {
    width: 4.8%;
    height: 4.8%;
    position: absolute;
    top: 87.8%;
    left: 70%;
    background: none;
    z-index: 99;
    display: none;
}

@media (orientation: portrait) {

    .pinch-zoom-container {
        height: calc(var(--vh, 1vh) * 100);
    }
    
    .frame {
        overflow: auto;
    }

    .frame #def{
        height: 100%;
        width: auto !important;
        overflow: auto !important;
    }
    
    #map {
        width: max-content;
        overflow: auto;
        height: 100%;
    }
}