/* Load Fonts */
@font-face {
    font-family: Helvetica;
    src: url(./Fonts/Helvetica.ttf);
}
@font-face {
    font-family: Helvetica-light;
    src: url(./Fonts/helvetica-light.ttf);
}

/* General */
html {
	padding:0px;
	margin:0px;
	font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif;
}
body {
	min-height:100%;
	/*padding:30px 5%;*/
	margin:0px;
	line-height:1.5rem;
	/*background-color: #f6f6fc;*/
	background-color: transparent;
	font-size: 0.9em;
}
a {
	text-decoration:none; 
	color:inherit;
}
}

h1, h2, h3, h4, h5, h6 {color:#333;}

main {
	display:inline-block;
	vertical-align:top;
	width: 80%;
	margin-right: 2%;
	border: 1px solid #444;
	box-sizing: border-box;
	border-radius: 0.5rem;
	height: fit-content;
}
section {
	overflow-x: scroll;
	box-shadow: 0 1px 1px rgba(0,0,0,.05);
	/*border: 1px solid #aaa;
	border: 1px solid #e3e3e3;
	width:100%;
	border-radius: 0.5rem;
	*/
	background-color: #f1f1f1;
}
section h3 {
	padding:10px; 
	background:#444; 
	color:#fff;
	margin:0px;
	text-align: center;
}

aside {
	display:inline-block;
	vertical-align:top;
	width:18%;
	overflow-y: auto;
	/*max-height: calc(100vh - 140px);*/
	max-height: calc(100vh - 15px);
	height: fit-content;
	overflow-x: hidden;
	border: 1px solid #444;
	border-radius: 0.5rem;
	box-sizing: border-box;
	/*border-bottom-right-radius: 0.5rem;
	border-bottom-left-radius: 0.5rem;
	border-bottom: 1px solid #e3e3e3;*/
	color: #111111;
}

#upcomingevents li {
  font-size: 0.8rem;
}

#botonlogout{ 
	float: right;
	background-color: #333;
	border-radius: 1rem;
	padding: 0.4rem 0.8rem;
	color: white;
	box-shadow: 0px 1px 1px #444;
	line-height: 1;
}
#botonlogout:hover {
  background-color: #444;
  font-size: 1.1rem;
}

@media screen and (max-width:50rem) {
	main {width: calc(100% - 32px);}
	aside {width: calc(100% - 32px);margin:20px 0px 0px 0px;}
}

/* Calendar */
section#calendar {
	background: #f0f0f0 !important;
}

section#calendar table {
	width:100%;padding:0px;
}
section#calendar table td {
	border:1px solid #aaa;
	position:relative;
	/*
	border:1px solid #ddd;
	border-radius: 0.3rem;
	padding:5px 5px 5px 28px; */
	margin:0px;
	display:inline-flex;
	flex-direction: column;
	/*width: calc(100% / 7 - 33px);*/
	width: calc(100% / 7);
	height: calc(100vh / 8);
	overflow-y: auto;
	line-height: 100%;
	padding: 5px 5px 3px 5px;
	/*font-weight: bold;*/
	box-sizing: border-box;
	background: #fff;
}
section#calendar table td span:first-child {
	position:absolute;
	/*
	right:5px;
	left:1px;
	height:100%;
	background:rgba(250,250,250,0.7);
	border-radius: 0 0.3rem;
	border: solid #eee 1px;
	*/
	top:0px;
	right:0px;
	color:rgba(0,0,0,0.6);
	background: #fcfcfc;
	width:1.5rem;
	text-align:
	center;
	z-index:1;
	line-height: 2;
	border-radius: 0 0 0 0.3rem;
	/*box-shadow: -1px 1px #bbb;
	background-image: linear-gradient(to right,#ddd, #fafafa);
	border-top-width: 0px;
	border-right-width: 0px;*/
	font-size: 0.9em;
}

.hoy {
	/*background: linear-gradient(to right,#666, #fafafa) !important;*/
	font-weight: bold !important;
	color: black !important;
	font-size: 1em !important;
}

section#calendar {
	border-radius: 0.5rem 0.5rem 0 0;
}

/*section#calendar table tbody tr:last-child td {
	border-bottom-width:0px;
}
section#calendar table tbody tr:first-child {
	display: flex;
}*/
section#calendar table tbody tr {
	display: flex;
}
section#calendar table th {
	padding:5px 10px 5px 10px; 
	margin:0px;
	border: 1px solid #aaa;
	/*border: 1px solid #ddd;
	border-radius: 0.3em;*/
	background: #f0f0f0;
	color: #111111;
	width: 100%;
}

section#calendar > h3 a {
	position: relative; 
	font-weight: bold; 
	/*float: right; 
	margin-left: 1rem;*/
	font-size: larger;
	text-shadow: 1px 0px 0px #fff;
}

section#calendar > h3 a span {
	display:none;
	position:absolute;
	top:130%;
	right:0px;
	background-color:#333;
	padding:10px;
	color:#fff;
	font-size:1rem;
	border-radius: 0.5rem;
	border-radius: 0.5rem;
	text-shadow: none;

}
section#calendar > h3 a:hover {
	/*font-size: 2.5rem;*/
	text-shadow: 2px 0px 0px #fff;
}
section#calendar > h3 a:hover span {display:block;z-index:1000;}

section#calendar table td a {
}
section#calendar table td a div {
	z-index: 100;
	position:fixed;
	background:#f5f5f5;
	color:#444;
	display:none;
	width:auto;
	border-radius: 0.5rem;
	max-width: 500px;
	margin: calc(100vh / 6) 0 0 40px;
	/*width: 63%;
	min-width:300px;
	bottom: 30px;
	left: 5%;*/
	/*transform: translate(-50%, -0%);*/
	white-space: normal;
	line-height: normal;
	/*font-size: initial;*/
	direction: initial;
	text-align: initial;
	overflow-x: scroll;
	box-shadow: 0 1px 1px rgba(0,0,0,0.1);
	border: 1px solid #ddd;
	max-height: 400px;
}
section#calendar table td a:hover div {display:block;z-index:1000;}
section#calendar table td a div h2 {font-size:1.1rem;}
section#calendar table td a div dl {padding:10px;}

section#calendar table td a div h3 {
	padding-left: 20px;
}
section#calendar table td a div ul {
	padding: 0 30px;
}

/* Sections in aside 
aside section {border:1px solid #555;}*/
aside section ul {margin:0px;padding:0px;}
aside section ul li {padding:0.4rem 1rem;border-bottom:1px dotted #aaa;list-style-type:none;}
aside section ul li:last-child {border-bottom-width:0px;}
aside section ul li:hover {background:#aaa;color:#fff;}
aside section ul li span {display:inline-block; vertical-align:middle;}
aside section ul li span:first-child {width:1rem;height:1rem;margin-right:0.5em;
	border-radius: 0.3rem;
}

/*  */
section#calendarlist {
	/*margin-top:20px;*/
	border-radius: 0 0 0.5rem 0.5rem;
	color: #111111;
}
section#calendarlist ul {
	display: flex;
	gap: 2em;
	flex-wrap: wrap;
}
section#calendarlist ul li{
list-style-type:none;
}
section#calendarlist ul li span {
	display:inline-block; 
	vertical-align:middle;
}
section#calendarlist ul li span:first-child {
	width:1rem;
	height:1rem;
	margin-right:0.5em;
	border-radius: 0.3rem;
}

.punto_prox_eventos {
	width: 1rem;
	height: 1rem;
	margin-right: 0.5em;
	border-radius: 0.3rem;
	display: inline-block;
	vertical-align: middle;
}


#logindiv {
	text-align: center;
	max-width: 1000px;
	margin: auto;
	font-size: calc(0.7vw + 0.5em);
}
#profile-img {
	width: 5em; 
	display: block; 
	margin: 1.5em auto 1em;
}
form input, button {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #555;
  margin-bottom: 10px;
}

.otromes {
	background-color: #f5f5f5 !important;
}

.nombresencalendario {
	color: #fff !important;
	position: relative !important;
	/*width: calc(100% - 0.6rem) !important;*/
	width: auto !important;
	font-size: calc(0.3vw + 0.5em);
	/*display: inline-block !important;
	direction: rtl;*/
	text-overflow: ellipsis;
	overflow-x: hidden;
	white-space: wrap;
	padding: 10px 0;
	cursor: default;
	line-height: 100%;
	border-radius: 0.3rem;
	max-width: calc(50vw - 48px);
	/*height: calc(100%/7);*/
	margin-bottom: 2px;
	text-align: center;
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	flex-grow: 1;
	min-height: 1rem;
	/*text-shadow: 0px 0px 1px #000;*/
	text-shadow: 0px 0px 2px #000;
}
.nombresencalendario:hover {
	font-size: calc(0.2vw + 0.7em);
	text-shadow: none;
}
.nombresencalendario li{
	padding-bottom: 5px;
}

/* -- Login page -- */

body.loginscreen {padding:10% 20% 5rem 20%;background-color:#333;width:60%;height:60%;min-height:auto;border-top-width:0px;}
@media screen and (max-width:50rem) { body.loginscreen {width:90%;padding:10% 5% 0px 5%;} }
div.logindiv {border: 1px solid #ddd;background-color:#fff;height:100%;min-height:auto;text-align:center;border-radius: 0.3rem;;position:relative;padding-bottom:1rem;}
p.errormsg {font-weight:bold;color:#f00;}
div.logindiv form input, div.logindiv form textarea {width:60%;padding:0.5rem;background-color:#eee;border:1px solid #ddd;}
div.logindiv form input:hover, div.logindiv form textarea:hover {background-color:#fff;}
div.logindiv form input[type="submit"] {width:60%;background-color:#fff;border:1px solid #ddd;margin:5px 0px 15px 0px;}
div.logindiv form input[type="submit"]:hover, div.logindiv form input[type="submit"]:hover {border-color:#aaa;background-color:#eee;}
div.logindiv a.loginrequest:hover, div.logindiv a.loginrequest:active, div.logindiv a.proginfo:hover, div.logindiv a.proginfo:active {background-color:#555;color:#fff;}
div.logindiv a.loginrequest, div.logindiv a.proginfo {position:absolute;bottom:-0.5rem;left:20px;border:1px solid #ddd;border-radius: 0.2rem;;background-color:#555;color:#fff;padding:4px 10px;}
div.logindiv a.proginfo {left:initial;right:20px;}