/*Add CSS styles here*/

/* Styles for the main map container */
#mapid {    
    height: 400px;    
    width: 100%;
    display: inline-block;
}

/* Styles for the side panel */
#panel {    
    width: 25%;    
    padding: 20px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    line-height: 42px;
}

/* Sequence control container - positioned at bottom left of map */
.sequence-control-container {  
    width: 350px;  
    /* Increased height to properly accommodate buttons and slider without squishing */
    height: 60px;  
    background-color: rgba(255,255,255,0.8);  
    padding: 10px;  
    /* Line height matches button height for proper vertical alignment */
    line-height: 40px;  
    text-align: center;  
    border: solid gray 1px;
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    /* Use flexbox for robust alignment */
    display: flex;
    /* Center items vertically */
    align-items: center;
    /* Distribute space between items */
    justify-content: space-between;
}

/* Styles for the range slider element */
.range-slider {  
    /* Allow slider to grow and fill space */
    flex-grow: 1;
    /* Order slider between the two buttons */
    order: 2;
    margin: 0 10px; /* Add some space around the slider */
}  

/* Styles for the step buttons (forward/reverse) */
.step {  
    /* Fixed width for consistent button sizing */
    width: 40px;
    /* Fixed height to maintain proper aspect ratio for icons */
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    /* Align buttons vertically with slider */
    vertical-align: middle;
    /* Display as inline-block to respect width/height and allow float */
    display: inline-block;
    /* Prevent image overflow to ensure full button area is clickable */
    overflow: hidden;
}  

/* Styles for the images within the step buttons */
.step img {  
    /* Full width of button container */
    width: 100%;
    /* Auto height maintains original icon aspect ratio - prevents squishing */
    height: auto;
    /* Ensure image aligns properly within button */
    vertical-align: middle;
}  

/* Flexbox order for the forward button */
#forward {  
    /* Remove float and use flexbox order */
    order: 3;
}  

/* Flexbox order for the reverse button */
#reverse {  
    /* Remove float and use flexbox order */
    order: 1;
}

/* Styles for the legend container */
.legend-control-container {
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    border: solid gray 1px;
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}

/* Styles for the legend title text */
.temporalLegend {
    text-align: center;
    margin-bottom: 5px;
}

/* Styles for the SVG legend graphic */
#attribute-legend {
    display: block;
    margin: 0 auto;
}

/* Styles for the paragraph elements within Leaflet popups */
.leaflet-popup-content p {
    margin: 0.2em 0;
}