/*
CALENDARIO DE EVENTOS
*/
.calendario {
	width:100%;
	margin-left:0%;
	border-collapse:collapse;
	background-color: white;
}

.calendario th {
	background-color: rgba(51,51,51,1.00);
	color:white;
	width:40px;
	border-collapse:collapse;
	border:1px solid rgba(163,163,163,1.00);
	width:14.285%;
	text-align: center;
}

.calendario td {
	text-align:center;
	vertical-align:top;
	height:80px;
	overflow: hidden;
	color:black;
	border-collapse:collapse;
	border:1px solid rgba(163,163,163,1.00);
	width:14.285%;
	position: relative;
}

.calendario td h4{
	/*float:right;*/
	text-align:right;
	margin:0px;
	margin-right:4px;
	padding:0px;
	font-weight:300;
	font-size:14px;
}

.calendario .hora{
	margin:0px;
	margin-bottom:2px;
	padding:0px;
	font-size:10px;
	font-weight:700;
}

.calendario .hoy {
	background:#FCF8E2;
}

.form_botones{
	display:inline-block;
	margin-left:15px;
	margin-right:15px;
}

.form_2 input[type="text"], .form_2 input[type="number"], .form_2 input[type="date"], .form_2 input[type="time"], .form_2 textarea {
	padding:5px;
	border-radius:5px;
}


/* Formulario de nueva cita */
.calendario td form{
	display: none;
	position: absolute;
	width: 100%;
	bottom: 0px;
	left:0px;
	background-color: whitesmoke;
}

.calendario td form div{
	overflow: hidden;
}

.calendario td form .div1{
	width: 75%;
	display: inline-block;
	height: 29px;
}

.calendario td form .div2{
	width: 20%;
	display: inline-block;
	height: 32px;
	padding: 1px;
	padding-top:3px;
  box-sizing: border-box;
}

.calendario td form .div3{
	width: 100%;
	display: inline-block;
	height: 29px;
}

.calendario td form input[type="text"]{
	width: 100%;
}

.calendario td input[type="image"]{
	height: 100%;
}

.calendario td:hover form{
	display: inline-block;
}


/* Div de citas */
/* Formulario de nueva cita */
.calendario .cita{
	border: 1px solid blue;
	border-radius: 0px;
	box-sizing: border-box;
	background-color: lightblue;
	margin: 1px;
	margin-bottom: 3px;
	box-shadow: 1px 1px 1px blue;
	font-size: 12px;
}

.calendario .cita div{
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}

.calendario .cita .div1{
	width: 100%;
	display: inline-block;
/*	height: 1.2em;*/
}

.calendario .cita .div2{
	display: none;
	width: 0%;
}

#citas .cita .div1{
	width: 75%;
	display: inline-block;
/*	height: 1.2em;*/
}

#citas .cita .div2{
	width: 20%;
	display: inline-block;
	height: 1.3em;
	padding: 1px;
  box-sizing: border-box;
	padding: 2px;
	padding-top: 3px;
}

.calendario .cita img{
	height: 90%;
	padding-top: 1px;
	cursor: hand;
	cursor: pointer;
	background-color: aliceblue;
	border-radius: 50%;
	border:1px solid red;
	box-shadow: 1px 1px 1px red;
}

.calendario .cita img:hover{
	background-color:aqua;
}


/* Boton de ver mas */
.calendario .vermas{
	display: none;
	position: absolute;
	top:2px;
	left:2px;
	width: 20px;
	height: 20px;
	overflow: hidden;
	background-color: coral;
	border-radius: 10px;
	padding-left: 0.4px;
	border: 1px solid green;
	box-shadow: 1px 1px 1px green;
}

.calendario .vermas:hover{
	background-color: orangered;
	box-shadow: 1px 1px 1px green;
}

.calendario .vermas img{
	width: 100%;
	cursor: hand;
	cursor: pointer;
}

.calendario td:hover .cita ~ .vermas{
	display: inline-block;
}

#citas td:hover .cita ~ .vermas{
	display: none;
}


/*
CABECERA DEL CALENDARIO
*/
.mes_calendario{
	display:inline-block;
	margin-top:6px;
	vertical-align:top;
	cursor:hand;
	cursor:pointer;
}

.mes_calendario:hover{
	color:#E37000;
	text-decoration: underline;
}

.img_calendario{
	cursor:hand;
	cursor:pointer;
}