body
{
    font-family: Arial, Helvetica, sans-serif;
}

#map
{
    z-index: 0;
}

#dropdown 
{
    width: 180px;
}

#crosshair
{
    width: 50px;
    height: 50px;
}

#latlng
{
    width: 250px;
    height: 45px;
    bottom: 5%;
    padding: 0 7px;
}

#lat, #lng
{
    height: 80%;
    width: 38%;
}

#flag 
{
    height: 30px;
    width: 50px;
    border: 1px solid black;
    margin-right: 10px;
}

#modal-body
{
    min-height: 175px;
}

#disconnected
{
    height: 175px;
}

#exchange-rate, #time-zone
{
    height: 125px;
}

#local-information-nav
{
    margin: 0 -17px;
}

#forecast
{
    min-height: 300px;
}

#forecast-graph
{
    max-height: 165px;
}

#address, #favourite-input
{
    font-size: 13px;
    width: 205px;
}

#economic-footer /*TODO: replace this with Bootstrap*/
{
    margin-left: 4px;
}

.news-title
{
    text-decoration: none;
}

.news-title:hover
{
    text-decoration: underline;
}

.forecast-button:hover, .forecast-button:active
{
    background-color: lightgray;
}

.forecast-selected
{
    background-color: lightgray;
    pointer-events: none;
}

.forecast-title, .forecast-max-temp, .forecast-min-temp
{
    font-size: 14px;
}

.pre-load 
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    overflow: hidden;
    background: #fff;
}
    
.pre-load:before 
{
    content: "";
    position: fixed;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    border: 6px solid #f2f2f2;
    border-top: 6px solid #000000;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    -webkit-animation: animate-preloader 1s linear infinite;
    animation: animate-preloader 1s linear infinite;
}

.pre-load-red:before 
{
    border-top: 6px solid #DC4C64;
}
    
@-webkit-keyframes animate-preloader 
{
    0% 
    {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% 
    {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes animate-preloader 
{
    0% 
    {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% 
    {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
    
.fade-out
{
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.5s, opacity 0.5s linear;
}

@media screen and (max-width: 390px) 
{

    #address, #favourite-input
    {
        width: 170px;
    }

    .forecast-title, .forecast-max-temp, .forecast-min-temp
    {
        font-size: 12px;
    }

}