@import 'https://fonts.googleapis.com/css?family=Raleway';

/* ---------- Estilo base ---------- */
.fab {
  width: 6rem;
  height: 6rem;
  font-size: 1.75rem;
  border-radius: 50%;
  border: 0.4rem solid #1e9d8b;
  background-color: #ffffff;
  color: #1e9d8b;
  cursor: pointer;
  opacity: 0;
  animation: fadeInOnly 0.5s ease forwards;
  align-items: center;   /* centra verticalmente */
  justify-content: center; /* centra horizontalmente */
  box-shadow: 0 0.5rem 1.25rem rgba(36, 37, 38, 0.08);
  -webkit-box-shadow: 0 0.5rem 1.25rem rgba(36, 37, 38, 0.08);
  -moz-box-shadow: 0 0.5rem 1.25rem rgba(36, 37, 38, 0.08);
}
.fab:hover {
  transition: transform 0.2s ease, background-color 0.2s ease;
  transform: scale(1.10);
}

/* ---------- FAB de retorno ao topo ---------- */
.fab-topo {
  position: fixed;
  display: none;
  cursor: pointer;
  bottom: 1rem;
  right: 1rem;
  z-index: 1000;
  border: none;
  color: #ffffff;
  background-color: #1e9d8b;
  transition: background-color .3s, opacity .5s, visibility .5s;
  opacity: 0;
  box-shadow: 0 0.5rem 1.25rem rgba(36, 37, 38, 0.08);
  -webkit-box-shadow: 0 0.5rem 1.25rem rgba(36, 37, 38, 0.08);
  -moz-box-shadow: 0 0.5rem 1.25rem rgba(36, 37, 38, 0.08);
}

/* ---------- Grupo de FABs ---------- */
.fab-grupo {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 10px;
  z-index: 999;
  transition:
    top 0.4s ease,
    right 0.4s ease,
    bottom 0.4s ease;
  pointer-events: auto;
}

/* Fade-in */
@keyframes fadeInOnly {
  from { opacity: 0; }
  to { opacity: 1; }
}







/* ////////////////////////////////// */
/* Definições GERAIS */

.floating-base, .floating-base-especiais {  
  z-index: 99;  
  display: none;
  position: fixed;
  padding-top: 0 px;
  text-align: center;
  background-color: #ffffff;
  border-radius: 5px;
  border: 1px solid #000000;
}


.floating-base h2 {
  margin-left: 15px;
  margin-bottom: 4px;
  text-align: left;
}

.floating-base h4{
  margin-left: 15px;
  text-align: left;
}


#btnTopo.show {
  visibility: visible;
  opacity: 1;
}



.floating-button-close {
  position: relative;
  padding: 1px 0px;
  cursor: pointer;
  top: 15px;
  right: 15px;
  background-color: transparent;
  border: none;
  float: right;
  color: #aaa;
  outline: none;
}


.alertas-marcha {
  display: inline;
  border: 0px solid #e6ebe4;
  border-radius: 4px;
  text-align: left;
  background-color: transparent;
}

.alertas-marcha:hover {
  border-radius: 4px;
  background-color: #e6ebe4;  
}

.alertas-marcha:focus {
  outline: none !important;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #e6ebe4;
}

.alertas-estado {
  font-size: 10px;
}


.alertas-minutos {
  margin-left: 0px; 
  margin-right: -1px;
  width: 20px;
  text-align: center;
  border:0;
  background-color: transparent;
  font-size: 13px;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.alertas-minutos:hover {
  border-radius: 4px;
  background-color: #e6ebe4;
}

.alertas-minutos:focus {
  outline: none !important;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #e6ebe4;
}


.alertas-menos, .alertas-mais {
  margin-left: 0px; 
  margin-right: 0px;
  color: #000;
  font-size: 10px;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.alertas-menos:hover, .alertas-mais:hover {
  color: #ccc;
  cursor: pointer;
}






.alertas-on {
 color: #67a367;
 text-align: center;
}

.alertas-on:hover {
 color: #85d485;
 cursor: pointer;
}


.alertas-off {
 color: #aaa;
 text-align: center;
}

.alertas-off:hover {
 color: #ccc;
 cursor: pointer;
}


.alertas-remove {
 /*color: #ff7070;*/
 color: #aaa;
}

.alertas-remove:hover {
 color: #ff0000;
 cursor: pointer;
}




.menubottom {
  margin-left: 2px;
  margin-right: 1px;
}


.menubaixo {
  text-align: center;
  margin-top: -12px;
  margin-left: 15px;
  margin-right: 15px;
}




.icon-stack {
      position: relative;
      display: inline-block;
      vertical-align: middle;
    }
.icon-stack-1x,
.icon-stack-2x,
.icon-stack-3x {
  position: absolute;
  width: 100%;
  text-align: right;
}





.dark {
  /* background-color: #f4f7f2;*/
  background-color: #e6ebe4;
}

.light {
  background-color: #ebf0e9;
}

.small {
  font-size: 7px;
}

.alertas-centro {
  text-align: center;
}



@media (hover: none) {
  
.alertas-marcha:hover {
  color: inherit;
}

.alertas-minutos:hover {
  color: inherit;
}

.alertas-menos:hover, .alertas-mais:hover {
  color: inherit;
}

.alertas-on:hover {
 color: inherit;
}

.alertas-off:hover {
 color: inherit;
}

.alertas-remove:hover {
 color: inherit;
 
}


}