/*!
 * Lights Thing v1.0.0 (https://lightsthing.net)
 * Copyright 2020 The Lights Thing Authors
 * License MIT 
 */
.calendar{color:#4f4f4f;background-color:;
/*	background:linear-gradient(to right,#ffe472,#ff9f4c);*/
background:linear-gradient(to right,#ffffff,#4c53ff);
	padding:32px 16px;
	border-radius:8px;
	box-shadow:0px 2px 6px rgba(2,2,2,0.2);
	position:relative;
	width:100%;
	max-height: 60%;
	margin-top: 80px;
	}
	@media(max-width:560px){
		.calendar{
			margin-top: 0;
		}
		.content-header{
			max-height: 90%;
			margin-top: 0;
		}
	}
/* controla el cabezal con el mes y año	*/
.calendar .content .month{
	width:100%;text-align:center;font-weight:700;
	font-size:1rem;padding-bottom:0px;color:#222;
	text-transform:uppercase;display:flex;
	align-items:baseline;justify-content:space-around
}
.calendar .content .month .last{cursor:pointer;font-size:1.50rem}
.calendar .content .month .last:hover{color:white}
.calendar .content .month .next{cursor:pointer;font-size:1.50rem}
.calendar .content .month .next:hover{color:white}
.calendar .content .namesday{display:grid;
	grid-template-columns:repeat(7,1fr);
	width:100%;padding:10px 0;text-align:center
}
.calendar .content .namesday p{
	font-weight:600;
	font-size:1.125rem
 }
.calendar .content .days{
	display:grid;
	grid-template-columns:repeat(7,1fr);
	width:100%;text-align:center
}
.calendar .content .days .cdays{
	padding:10px 0;font-size:1.125rem;
	position:relative;cursor:pointer
}
.calendar .content .days .cdays:hover:before{
	background:rgba(255,255,255,0.2);
	width:100%;
	height:100%;
	position:absolute;top:0;left:0;content:"";transform:scale(0.8);z-index:0
}
.calendar .content .days .today{color:#fff}
.calendar .content .days .today:before{
	content:"";width:100%;height:100%;position:absolute;top:0;left:0;
	z-index:0;animation:"popIn" 200ms 1 forwards;background:rgba(255,255,255,0.2);
	transform:scale(0.8)
}
/*diseño para el modal de horarios*/
.calendar .modal{
	position:absolute;border-radius:4px;
	bottom:10px;right:10px;width:100%;
	max-height:100%;background:white;box-shadow:1px 1px 12px 3px rgba(2,2,2,0.16);
	z-index:2;visibility:hidden;display:none
}
@media only screen and (max-width:920px){
	.calendar .modal{
		width:100%;
		height:100%
	}
}
@media only screen and (max-width:560px){
	.calendar .modal{top:16px;right:-8px;width:108%;height:100%;overflow-y: auto;
	}
}
.calendar .modal.active{
	animation:popIn 200ms 1 forwards;display:block
}
.calendar .modal .date{
	margin:16px 16px;font-size:1.25rem;font-weight:800;color:#393939;display:block
}
.calendar .modal h5{
	font-size:1.20rem;text-align:center;text-transform:uppercase
}
.calendar .modal .exit{
	position:absolute;top:16px;right:20px;font-size:2rem;font-weight:800;color:#888888;cursor:pointer
}
.calendar .calendar-modal-active{animation:popIn 200ms 1 forwards;visibility:visible;display:block;width: inherit;height: inherit;}