#div_citas{
  font-family: Calibri;
  font-size: 13pt;
}

#div_citas #div_derecho{
	display: flex;
	flex-direction: column;
}
#div_citas #div_derecho .contenedor{
	min-height: 350px;
	padding: 0 15px;
}

#div_citas #div_derecho .continuar{
	margin-top: auto;
	text-align: right;
	padding-right: 15px;
	/*box-shadow: 0 -2px 3px rgba(26,44,55,0.15);*/
}

#div_citas #div_izquierdo .cabecero-bloque{
	background-color: #FFF;
	margin-bottom: 6px;
	text-align: left;
	padding: 5px 10px;
	cursor: pointer;
}
#div_izquierdo .cabecero-bloque i{
	margin-right: 5px;
}
#div_izquierdo .cabecero-bloque i{
	margin-right: 5px;
	width:18px;
}
#div_citas h4{
	font-family: "Chalet-London";
	text-transform: uppercase;
}
#div_citas h4::after {
	width:100%;	
}
#div_citas .boton_relleno,
#div_citas .boton_negro{
	font-family: "Chalet-London";
	text-transform: uppercase;
}
#modificar_cita_btn{
	width: 80%;
	padding: 0;
}

#div_citas .boton_negro{
	background-color: #FFF;
	border-color: #7bc6c1;
	color: #000 !important;
	text-transform: uppercase;
}
#div_citas .boton_negro:hover{
	background-color: #fff6f0bf;
	border-color: #fff6f0bf;
}

#boton_nuevo_paciente,
#citas_volver,
#boton_olvido_password{
	padding: 10px 10px;
	line-height: 1;
	min-width: inherit;
	margin-left: 10px;
	margin-top: 0;
}

.boton_no_paciente{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	background: #efefef;
	padding: 5px 10px;
	font-size: 85%;
}

.botones_olvido{
	display: flex;
	flex-direction: column;
	align-items: center;
}

#boton_nuevo_paciente,
#boton_olvido_password{
	margin-top: 5px;
}

#div_izquierdo{
	display: flex;
	flex-direction: column;
}

.modificar_cita{
	margin-top: auto;
}

.botones_cambiar_anular{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding-left: 15px;
}
.boton_anular{
	background-color: #c67b7b;
	border-color: #c67b7b;
}

.boton_volver{
	background-color: #FFF;
	padding: 6px;
	border-radius: 5px;
	margin-right: 5px;
	cursor: pointer;
}

.nuevo_paciente .form-control{
	background-color: #FFF;
}


/*  CALENDAR */

.calendario{
	--calendario-width: 100%;
	--calendario-pt: 10px;
	--cl-color-disabled: rgba(232, 146, 124, 25%);
	--cl-color-available: rgba(107, 187, 174, 80%);
}

.calendario .air-datepicker-body--cells{
	gap: 12px;
}

.calendario .air-datepicker--content{
	padding: 15px;
}

.air-datepicker{
	width: var(--calendario-width);
}

.calendario .sin-citas{
	background-color: var(--cl-color-disabled) !important;
	cursor: not-allowed;
}

.calendario .con-citas,
.calendario .con-citas.-current-{
	background-color: var(--cl-color-available) !important;
	color: #000;
}
.calendario .con-citas.-selected-{
	background-color:#46807c !important;
	color: #fff;
}

.calendario .con-citas.-other-month-,
.calendario .sin-citas.-other-month-,
.calendario .con-citas.-other-month-:hover,
.calendario .sin-citas.-other-month-:hover{
	color: rgb(174, 174, 174);
}

.calendario .air-datepicker-nav--title{
	text-transform: uppercase;
}

.air-datepicker-body--day-name{
	color: #000;
}

.div_horas{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	margin-top: 10px;
	flex-wrap: wrap;
}
.div_horas .hora{
	padding: 10px;
	background-color: #7bc6c1;
	text-align: center;
	font-size: 15px;
	border-radius: .25rem !important;
	width: 19%;
	color: #FFF;
}
.div_horas .hora:hover,
.div_horas .hora.selected{
	background-color: #46807c;
	cursor: pointer;
}

.resumen_servicio,
.resumen_fecha,
.resumen_identificacion
{
	text-align: left;
}
.resumen_servicio p,
.resumen_fecha p,
.resumen_identificacion p{
	margin: 0;
	margin-bottom: 10px;
}

#div_derecho.cita_confirmada{
	max-width: 100%;
	border-radius: 25px;
	flex: 100%;
}


.formulario_citas .password-eye{
	position: relative;
}
.formulario_citas .password-eye #eye{
	position: absolute;	
	cursor: pointer;	
	top: calc(50% - 9px);
	right: 15px;
	width: 18px;
	height: 18px;
}
.resumen_cita .bloque_cita strong{
	display:inline-block;
	width: 110px;
}

#password-strength-status {
    padding: 5px 10px;
    border-radius: 4px;
    margin-top: 10px;
	font-size: 14px;
}

.medium-password {
    background-color: #fd0;
}

.weak-password {
    background-color: #FBE1E1;
}

.strong-password {
    background-color: #D5F9D5;
}

.recuperar_password .form-control.is-invalid, 
.recuperar_password .was-validated .form-control:invalid{
	background-image: none;
}

.boton_continuar_secundario{
	text-align: center;
	margin-bottom: 1rem;
}

#div_citas{
	position: relative;
}
#div_citas .informacion_citacion{
	position: absolute;
	top: 20px;
	right: 15px;
	cursor: pointer;
}
.modal-backdrop{
	background-color: rgba(0, 0, 0, 0.6);
}

#modal_citacion .modal-body,
#modal_citacion_aviso .modal-body{
	max-height: calc(100vh - 200px);
	overflow: scroll;
	overflow-x: hidden;
}

@media screen and (max-width: 1400px) {
	#div_citas{
		width: 80%;
	}
}

@media screen and (max-width: 1280px) {
	#modificar_cita_btn{
		min-width: inherit;
		width: 100%;
	}
}
@media screen and (max-width: 1200px) {
	#div_citas{
		width: 90%;
	}
}
@media screen and (max-width: 1050px) {
	#div_citas{
		width: 100%;
		margin-top: 95px;
	}
	
	.boton_relleno,
	.boton_negro{
		padding: 0;
	}
	
}

@media screen and (max-width: 801px) {
	#div_citas{
		border-radius: 0;
		border: none;
	}
	
	/*border: 2px solid #7bc6c1;*/
	
	#div_izquierdo{
		padding: 0 15px;
		border-right: none;
	}
	.boton_relleno,
	.boton_negro{
		line-height: 1;
		padding: 8px 15px;
	}
	
	#div_izquierdo{
		border-radius: 0;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	#div_derecho{
		border-radius: 0;
		border: 2px solid #7bc6c1;
		border-top: none;
		
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;			
	}
	
	#div_citas #div_derecho .continuar{
		padding-left: 15px;
	}
	
	#boton_continuar{
		width: 100%;
		min-width: inherit;
	}
	
	#div_citas #div_derecho .contenedor{
		min-height: inherit;
		padding-bottom: 15px;
	}
	
	#modificar_cita_btn{
		padding: 8px 15px;
	}
	
	#div_citas .informacion_citacion {
		top: -2px;
		right: -5px;
		font-size: 15pt;
	}
	
	.boton_no_paciente{
		flex-direction: column;
	}
	#div_citas {
		width: 100%;
		margin-top: 45px;
	}
	
	.botones_cambiar_anular{
		flex-direction: column;
		padding: 0;
	}
	.botones_cambiar_anular .boton_relleno,
	.botones_cambiar_anular .boton_negro{
		width: 100%;
	}
}