body {
    text-align: right;
    direction: rtl;
    font-size: 13px;
    font-family: IRANSans;
    background-color: azure !important;
}

.leaflet-control-attribution a {
    text-decoration: none;
    display: none;
}

.leaflet-control-opencage-geocoding-form {
    display: none;
}

#map {
    position: absolute;
    width: 97.5%;
    height: 825%;
    z-index: 100;
}

#bottun_Map {
    padding-top: 15%;
}

@media screen and (max-width: 900px) and (min-width: 740px) {
    #map {
        width: 95.5%;
        height: 195px;
    }

    #bottun_Map {
        padding-top: 20%;
    }
}

@media screen and (max-width: 740px) and (min-width: 575px) {
    #map {
        width: 95.5%;
        height: 195px;
    }

    #bottun_Map {
        padding-top: 25%;
    }
}

@media screen and (max-width: 575px) and (min-width: 500px) {
    #map {
        width: 95.5%;
        height: 195px;
    }

    #bottun_Map {
        padding-top: 40%;
    }
}

@media screen and (max-width: 500px) and (min-width: 448px) {
    #map {
        width: 95.5%;
        height: 195px;
    }

    #bottun_Map {
        padding-top: 47%;
    }
}

@media screen and (max-width: 448px) and (min-width: 400px) {
    #map {
        width: 92.5%;
        height: 240px;
    }

    #bottun_Map {
        padding-top: 64%;
    }
}

@media screen and (max-width: 400px) and (min-width: 350px) {
    #map {
        width: 88.5%;
        height: 240px;
    }

    #bottun_Map {
        padding-top: 75%;
    }
}

@media screen and (max-width: 350px) and (min-width: 300px) {
    #map {
        width: 88.5%;
        height: 240px;
    }

    #bottun_Map {
        padding-top: 90%;
    }
}

@media screen and (max-width: 300px) and (min-width: 270px) {
    #map {
        width: 88.5%;
        height: 240px;
    }

    #bottun_Map {
        padding-top: 100%;
    }
}