td.details-control {
    background: url('../resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.details td.details-control {
    background: url('../resources/details_close.png') no-repeat center center;
}


.bolaVerde {
    border-radius: 50%;
    display: inline-block;
    margin-left: auto;
    height: 10px;
    width: 10px;
    background-color: #00e676;
}

@keyframes bolaVermelha {
     0% { opacity: 1; }
     50% { opacity: 0.5; }
     100% { opacity: 0; }
 }
 
.bolaVermelha {
    border-radius: 50%;
    display: inline-block;
    margin-left: auto;
    height: 10px;
    width: 10px;
    background-color: red;
    animation: animate 1.0s linear infinite;
    -webkit-animation: bolaVermelha 1.0s linear infinite;
   -moz-animation: bolaVermelha 1.0s linear infinite;
   -ms-animation: bolaVermelha 1.0s linear infinite;
   -o-animation: bolaVermelha 1.0s linear infinite;
   animation: bolaVermelha 1.0s linear infinite    


}

@keyframes bolaAmarela {
     0% { opacity: 1; }
     50% { opacity: 0.5; }
     100% { opacity: 0; }
 }
 
.bolaAmarela {
    border-radius: 50%;
    display: inline-block;
    margin-left: auto;
    height: 10px;
    width: 10px;
    background-color: yellow;
    -webkit-animation: bolaAmarela 1.5s linear infinite;
   -moz-animation: bolaAmarela 1.5s linear infinite;
   -ms-animation: bolaAmarela 1.5s linear infinite;
   -o-animation: bolaAmarela 1.5s linear infinite;
   animation: bolaAmarela 1.5s linear infinite;

}
.mapa {
  position: relative;
  padding-bottom: 56.25%; /* Proporção 16:9 para telas grandes */
  height: 0;
  overflow: hidden;
}

@media (max-width: 768px) {
  .mapa {
    padding-bottom: 80%; /* Aumentei a altura para 80% em telas pequenas */
  }
}