html,
body,
#viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}

td {
    vertical-align: top;
}

#infoDiv {
    padding: 20px;
    z-index: 1;
    background-color: white;
    opacity: 0.9;
    font-family: Arial, Helvetica, sans-serif;
    min-width: 200px;
    max-height: 95vh;
    overflow-y: auto;
}

#infoDiv img{
    max-width: 100%;
    max-height: 100%;
}

.esri-widget__table img{
    max-width: 100%;
    max-height: 100%;
}

img.mdicon {
    margin: 1em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50px;
}

#timeSlider {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 20px;
}

#optionsDiv {
    position: absolute;
    bottom: 17px;
    width: 100%;
    padding: 20px 0;
    z-index: 1;
    text-align: center;
    background-color: white;
    opacity: 0.9;
    font-family: Arial, Helvetica, sans-serif;
}

#optionsDiv img {
    float: left;
    margin: 1em;
}

#flybutton {
    background-color: #F29469;
}

.warning-message {
    background-color: #ffcc00;
    padding: 5px;
    margin-bottom: 1em;
}


/* Base style for input fields */
#latitudeInput, #longitudeInput {
    border: 1px solid #ccc;
    outline: none;
}

/* CSS for the blinking highlight using outline */
@keyframes blinkRed {
    0%, 100% { outline: 2px solid transparent; }
    50% { outline: 2px solid red; }
}

.blink {
    animation: blinkRed 0.5s ease-in-out 3; /* Adjust duration and repeat count */
}
#loadingWheel-mapView {
    position: fixed;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 9999;
    display: block;
}

.spinner {
    display: inline-block;
    border: 16px solid lightgray;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 90px;
    height: 90px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}