body{
    font-family:Arial, Helvetica, sans-serif;
    margin:0px;
    font-size:16px;
}
#header{
    text-align:center;
}
#mapid {
    height:88%;
    width:100%;
    position:absolute;
    z-index:1;
    margin-left:0px;
}
.thumbnail{
    width:175px;
    /* height:130px; */
    border:1px solid black;
    margin:5px;

}
.anchorthumb{
    height:120px;
}
#photogrid{
    height:calc(99% - 38px);
    display:flex;
    flex-direction: row;
    flex-wrap:  wrap;
    justify-content: space-evenly;
    overflow-y:auto;
    overflow-x:hidden;
    align-content: flex-start
}
.error{
    margin-top:20px;
    /* font-size:15px; */
    font-weight:bold;
    color:rgb(175, 0, 0);
}
#animalgraph{
    color:rgb(112, 183, 112)
}
.station-text{
    width:100px !important;
    margin-left:-50px !important;
    text-align: center !important;
    /* transform:translate(-50%, -50%); */
    /* margin: -5px; */
    /* width:225px; */
    font-size:11px;
}
/* .leaflet-div-icon{
    display:inline-block;
  padding: 3px;
  border: 1px solid #666;
  border-radius: 3px;
  background:#fff;
  transform:translate(-50%, -50%);
} */
#animal,#stations,#mode,#daynight{
    /* -webkit-appearance: none; */
    padding: 1px 4px;
    font-size:16px;
    border-radius:5px;
    background-color:rgba(0,0,0,0);
    border:1px solid lightgray;
    border-bottom:1px solid black;
    margin:1px;
    
}
/* select::after {
    content: "\25BC"; /* Unicode for down-pointing triangle or arrow */
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none; /* Ensure the arrow doesn't interfere with clicking the select */
  } */
#photosbutton,#graphbutton{
    border:.5px solid rgb(98, 98, 98);
    font-size:10px;
}
#sidetab{
    /* display:none; */
    position:absolute;
    right:0px;
    background-color:rgb(253, 253, 253);
    width:50%;
    height:88%;
    text-align:center;
    overflow-y:hidden;
}
#closebutton{
    background-color:rgba(0,0,0,0);
    border:0px;
    font-size:13px;
    color:rgb(81, 81, 81)
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background-color: #ffffffef
  }

  #instructions{
    display:block;
    position:absolute;
    width:50%;
    z-index:3000;
    top:100px;
    left:22%;
    background-color:rgba(200,200,200,.9);
    text-align:center;
    border-radius:10px;
    padding:25px;
}
.closebutton {
    font-size:25px;
    /* padding:10px; */
    border: 0px;
    background-color:rgba(0,0,0,0)
}

@media screen and (max-width: 700px) {
   
}
  @media screen and (max-width: 440px) {
    #instructions{
        width:90%;
        left:5%;
        top:20px;
        box-sizing: border-box;
    }
    #sidetab{
        /* display:none; */
        position:absolute;
        bottom:0px;
        background-color:rgb(253, 253, 253);
        width:100%;
        height:45%;
        text-align:center;
        overflow-y:hidden;
    }
  }