.last_12_hours,  .last_24_hours, .last_5_days, .all_value{
    padding: 2px 12px;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    width: 5vw;
    min-width: 30px;
}

.last_hour, .day_value {
    width: 5vw;
    min-width: 30px;
}

.name, .location {
    text-align: left;
}

.class1 {
    background-color: rgb(156, 154, 154);
}

.class2 {
    background-color: rgb(34, 159, 212);
}

.class3 {
    background-color: rgb(21, 194, 21);
}

.class4 {
    background-color: rgb(228, 148, 35);
}

.class5 {
    background-color: rgb(221, 63, 63);
}

tbody>tr {
    cursor: pointer;
}

.table-container {
    margin: 2%;
    height: calc(100vh - 185px);
    width: 96%;
    margin-top: 0px;
}

.for_mobile {
    height: calc(100vh - 250px);
}

.map_adjust {
    margin: 2%;
    width: 96%;
}

#mapid {
    height: calc(100vh - 340px);
  }

.precip-legend {
    margin: 2%;
    width: 96%;
    margin-top: 0px;
    margin-bottom: 0px;
}

.find-name {
    margin: 2%;
    width: 60%;
    margin-top: 0px;
    margin-bottom: 0px;
}

#myInput {
  background-image: url('/static/template/images/searchicon.png');
  background-position: 10px 10px;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  width: 80%;
  padding: 12px 20px 12px 40px;
  border: none;
  border-bottom: 1px solid #ddd;
  margin-bottom: 5px;
}

input:focus, textarea:focus, select:focus{
    outline: none;
}

.fa-arrow-rotate-right, .fa-download {
    font-size: 30px;
    padding-top: 15px;
    color: rgb(34, 159, 212);
}


.table_point {
    height: auto;
    width: 200px;
    overflow: hidden;
    font-size: 11.5px;
}

.table_point td, .table_point th, .table_point tr {
    padding: 0px;
    margin: 0px;
    height: 20px;
    border: none;
}

.table_point thead tr {
    border-bottom: 2px solid #ddd;
}

.table_point tbody tr td {
    text-align: left;
    padding-left: 0px;
}

.leaflet-control {
    font-size: 11px;
}

.detai_babe {
    color: blue;
}