.userCalendar{
  width: 100%;
  min-height: 250px;
  padding: 12px;
  font-size: 0.7em;
}
@media (max-width: 500px) {
  .userCalendar {
    min-height: 200px;
  }
}
.citasCard{
  margin: 10%;
  background-color: rgba(26, 22, 1, 0.712);
}
.card-text{
  font-size: 0.9em;
  color: var(--primary-1);
} 

/* .form-group label{
  position: absolute;
  left: 50px;
  top: 65px;
  background: #fff;
  padding: 0px 5px;
  transition: transform 0.3s ease, color 0.3s ease;
}
input:focus+label{
  transform: translateY(-25px);
  color: brown;
}
input:focus{
  border-color: brown;
} */
/*ANIMACION FORMULARIO*/
.form-control {
  background-color: #fff0;
  color: #fff;
}
.form-control:disabled, .form-control[readonly] {
  background-color: #fff0;
  color: #fff;
}
.form-control:focus {
  color: #fff;
  background-color: #ffffff2e;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
}
input{
  border-bottom: 1px solid #e18207;
  background-color: #ffffff17;
}
.form-control::placeholder{
color:var(--secondary-light);
}
input:focus {
  content: none;
  box-shadow: -3px 3px 0px 0px #8056086e;
  top: 48%;
  left: 51%;
}
select {
  padding: 5px;
  color:var(--secondary-light);
  font-size: 12px;
  background: transparent;
  -webkit-appearance: none;
}
select:focus {
  padding: 5px;
  color: #fff;
  font-size: 12px;
  background: transparent;
  -webkit-appearance: none;
}
select option{
background-color: #ce9f073d;
color:var(--secondary-light);
}


.invalid-feedback{
  color: var(--secondary-2);
}
/*BOTON AGENDAR*/
.btnCita{
      text-align: center;
  } 
.btnCita a:hover{
  color: var(--secondary-2);
  text-decoration: none;  
}
.btnCita button{
  background: linear-gradient(rgb(13, 14, 13), rgb(85, 77, 1));
  cursor: pointer;
  border: none;
  padding: 5px 15px;
  color: white;
  font-weight: bold;
  position: relative;
  border-radius: 12px;
}
.btnCita button::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, var(--secondary-1), var(--primary-8), var(--secondary-2), var(--secondary-4), var(--secondary-3));
  background-size: 800%;
  border-radius: 10px;
  filter: blur(8px);
  animation: glowing 20s linear infinite;
}
@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}
/*LOADER*/
.loader{
	background: transparent url(/imagenes/animados/send.gif) no-repeat scroll center;
	position: fixed;
	top: 0;
	left: 0;
	border: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: #241b0e;
	border-style: none;
	opacity: 0.9;
	filter:alpha(opacity=60);
  z-index: 2000;
  display: none;
}