.map-outer-container {
    position: relative;
    width: 100%;
    padding-top: 50%; 
    height: 0;
}

.map-inner-container {
    position:  absolute; 
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
}

#gdt-q1-2019-i1 {
    height: 100%;
}

#mapScale {
    width: 8px;
    height: 140px;
    max-height: 50%;
    background: linear-gradient(to bottom, #0b4334 0%,#ffffff 50%,#640e2f 100%);
    position: absolute;
    bottom: 20px;
    left: 20px;
}

#mapScaleInner {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #0b4334 0%,#ffffff 50%,#640e2f 100%);
    position: relative;
    top: 100;
    left: 100;
}

#mapScaleTop {
    font-size: 11px;
    position: absolute;
    top: 0;
    left: calc( 100% + 6px );
}

#mapScaleMiddle {
    font-size: 11px;
    position: absolute;
    top: calc( 50% - 6px );
    left: calc( 100% + 6px );
}

#mapScaleBottom {
    font-size: 11px;
    position: absolute;
    bottom: 0;
    left: calc( 100% + 6px );
}

#mapScaleTitle {
    font-size: 11px;
    position: absolute;
    top: -16px;
    left: 0;
    white-space: nowrap;
}

@media screen and (max-width: 720px) {
    #mapScaleTitle {
     
    }
    #mapScale {
        height: 120px;
    }
}

@media screen and (max-width: 680px) {
    #mapScaleTitle {
      white-space: normal;
      width: 64px;
      top: -30px;
      background-color: white;
    }
    #mapScale {
        height: 100px;
    }
}

@media screen and (max-width: 634px) {
    #mapScaleTitle {

    }
    #mapScale {
        height: 70px;
    }
}

@media screen and (max-width: 460px) {
    #mapScaleTitle {
        width: 26px;
        top: -42px;
    }
    #mapScale {
        height: 60px;
    }
}