:root{
  --spinner-color:green;
}
.bg-custom{
  background-image: url('../img/fondo\ de\ alimento\ suelto.jpeg');
  background-position: center   center;
  background-repeat: repeat-x;
  background-size: auto;
  
}
.footer{
  height: 150px;
  width: 100vw;
}
.form-container {
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 150px auto;
  padding: 20px;
  border-radius: 5px;
  border: 1px solid #898383;
  position: relative;
}
.form-container::before {
  content: "";
  display: block;
  background-image: url("../img/iconos/perro.ico");
  background-position: center center;
  background-size: cover;
  height: 100px;
  width: 100px;
  position: absolute;
  top: -100px;
}
.contenedor-spinner {
  height: 100px;
  width: 100px;
  margin: 20px auto;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}

.bg-progress {
  background: linear-gradient(to right, #ff0000, #ffff00, #00ff00);
}
.form-step {
  display: none;
}
.form-step:active {
  display: block;
  animation: fadeIn 0.5s;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#spinner-container {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  gap: 20px;
  position: absolute;
  top: 200px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 2;
}
.mini-imagen {
  height: 100px;
  width: 100px;
}
#check {
  display: none;
}
#spinner {
  height: 100px;
  width: 100px;
  border-radius: 100%;
  border: 3px solid var(--spinner-color);
  align-items: center;
  justify-content: center;
  animation: llenar 1s ease-in-out;
  display: "none";

}

#simbolo{
  display: none;
  margin:0 auto ;
}
@keyframes llenar {
  0%{border-top: none;border-right: none;border-bottom: none; border-left: none;}
    25%{border-top:3px solid var(--spinner-color); border-radius: 50%;}
    50%{border-right: 3px solid var(--spinner-color); border-radius: 50%;}
    75%{border-bottom: 3px solid var(--spinner-color); border-radius: 50%;}
    100%{border-left: 3px solid var(--spinner-color);border-radius: 100%;}
}
.img-admin{
  height: 250px;
  width:250px;
  margin: auto auto;
  padding: 10px;
  object-fit: cover;

}
.img-navbar{
  height: 75px;
  width: 75px;
  border-radius: 100%;
  padding: 10px;
}