html, body, #app-home {
    height: 100%;
    margin: 0;
}

#app-home {
    padding-top: 25px;
}

body {
    background-image: url("/images/Tracker_Background.jpg?v=20250325");
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.masthead-container {
    text-align: center;
}

.masthead-container > .masthead-img {
    width: 75%;
}

.progress-container {
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #555;
    top: -50px;
    position: relative;
    z-index: 400;
    font-size: 12px;
}

.tabs-container {
    text-align: center;
}

.tabs-container > .tabs-img {
    width: 0;
}

.tabs-container > .stack-img {
    width: 90%;
}

.d-desktop {
    display: none;
}

.d-mobile {
    display: block;
}

.leaflet-container {
    height: 48%;
    width: 90%;
    max-width: 100%;
    max-height: 100%;
    margin-left: auto;
    margin-right: auto;
    border: 10px solid #fff;
    box-shadow: 0px 0px 24px 12px rgba(0, 0, 0, 0.2);
}

@media (min-width: 390px) and (min-height: 844px) and (orientation: portrait) {
    .leaflet-container {
        height: 65%;
    }
}

@media (min-width: 768px) and (min-height: 1024px) and (orientation: portrait) {
    .progress-container {
        font-size: 16px;
    }

    .leaflet-container {
        height: 48%;
    }
}

@media (min-width: 992px) {
    #app-home {
        padding-top: 50px;
    }

    .masthead-container > .masthead-img {
        width: 35%;
    }

    .progress-container {
        font-size: 16px;
    }

    .leaflet-container {
        height: 50%;
        width: 70%;
        border-width: 20px;
    }

    .tabs-container > .tabs-img {
        width: 72%;
    }

    .tabs-container > .stack-img {
        width: 0;
    }

    .d-desktop {
        display: block;
    }

    .d-mobile {
        display: none;
    }
}