body {
    FONT-SIZE: 10pt;
    color: black;
    FONT-FAMILY: arial, Tahoma, Helvetica, sans-serif;
    background: white;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

div.header {
    border-style: solid;
    border-color: white white #9CC0ED white;
    border-width: 1px;
    background-color: white;
    /*text-align: center;*/
    margin-bottom: 0px;
}

div.header table td {
    background-color: white;
    color: #0072BC;
    font-size: 220%;
    font-weight: bold;
}

table td#headerLeft {
    text-align: left;
}

table td#headerCenter {
    text-align: center;
}

table td#headerRight {
    text-align: right;
}

div#languageBar {
    font-size: 80%;
    float: right;
}

div.footer {
    text-align: center;
    background: #9CC0ED;
}

div.note {
    float: right;
    border: 1px solid #9CC0ED;
    padding: 10pt;
    margin: 25pt;
    width: 30%;
}

div.description {
    padding: 10pt;
    width: 50%;
}

div.indented {
    padding-left: 10pt;

}

div.notice{
    padding-left: 10pt;
    color: red;
    text-align: center;
    font-size: 150%;
    /*font-weight: bold;*/
}

div.copyright{
    padding-left: 10pt;
    font-size: 90%;
    /*font-style: italic*/;
    
}


div.NEWSImg_icon{
    float: center;
    text-align: center;
    /*border: 1px solid #7F7F7F;*/
    padding-bottom: 0; 
    margin-right: 10px;
    margin-top: 0px;
}

table.NEWS {
    border-width: 0px;
    text-align: left;
}

/************** MENU *****************/

table td.menu {
    vertical-align: top;
    padding: 1em 1em 230px 0.2cm;
    background-color: white;
    border-style: solid;
    border-color: white;
    border-width: 1px;
    font-size: 10pt;
    text-align: left;
    line-height: 1.5em;
}

div.menu {
    border-style: solid;
    border-width: 1px;
    border-color: #9CC0ED;
    background: white;
    padding-top: 0px;
    padding-bottom: 1px;
}

div.menuItem {
    background-color: #EEEEEE;
    margin-top: 1px;
    padding-top: 2px;
    padding-left: 5px;
    padding-bottom: 2px;
    padding-right: 2px;
}

div.menuItem a {
    text-decoration: underline;
    color: blue;
}

#selectedMenuItem {
    font-size: 10pt;
    font-weight: bold;
    background-color: #EEEEEE;
}

span#selectedMenuItem {
    font-size: 10pt;
    font-weight: bold;
    background-color: white;
}


div.menuItem:hover {
    background-color: #E5ECF9;
}

.hide {
    display: none;
}

.show {
    display: block;
    padding-left: 10pt;
}

/********************************/

div.menuTop {
    margin-top: 5px;
    margin-bottom: 10px;
    padding-left: 5px;
    text-align: left;
    border-bottom: solid 1px #FBBE40;
}

div.menuTop a:visited, div.menuTop a:link, div.menuTop a:hover {
    color: black;
    text-decoration: none;
}

div.menuTop span {
    font-size: 10pt;
    background-color: #EEE;
    margin-left: 1px;
    margin-right: 1px;
    padding-left: 10px;
    padding-right: 10px;

    border-style: solid;
    border-color: #9CC0ED #9CC0ED #EEE #9CC0ED;
    border-width: 1px;
}

div.menuTop span#selected {
    font-size: 11pt;
    background-color: #FFEAC0;
    font-weight: bold;
    border-style: solid;
    border-color: #FBBE40 #FBBE40 #FFEAC0 #FBBE40;
    border-width: 1px;
}

div.menuTop span#disabled {
    color: grey;
}


div.menuTop span:hover {
    background-color: #E5ECF9;
}

/********************************/

div#menuTopicsTitle, div#menuPeopleTitle {
    background-color: #FFEAC0;
    /*color: #F29F3E;*/
    font-size: 110%;
    font-weight: bold;
    padding-left: 5pt;
}

div#menuTopicsBody, div#menuPeopleBody {
    padding: 2pt 5pt 5pt 15pt;
}

div.topicTitle, div.peopleTitle {
    font-size: 130%;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 10px;
    padding-left: 2px;
    padding-top: 0px;
    border-top: 1px solid #9CC0ED;
    background-color: #E5ECF9;
}

div.topicContent {
    margin: 2px;
}

div.peopleSectBody {
    margin-left: 10pt;
}

div.peopleSectBody h4{
    font-size: 100%;
}

table td.menuTopics b, table td.menuPeople b {
    font-size: 10pt;
}

table td.section {
    vertical-align: top;
    font-size: 10pt;
    margin: 0px;
    padding: 10px 10px 10px 10px;
    background: white;
}

div.news {
    margin-bottom: 20pt; 
}

div.recentPublicationsBody li {
    line-height: normal;
    margin-bottom: 1ex;
    margin-right: 5pt;
    list-style: circle;
}

div.news li {
    margin-bottom: 1ex;
    list-style: normal;
    text-align: left;
}

table.indextable th {
    background: #FBBE40;/*#E5ECF9;*/
    font-size: 10pt;
    padding: 1ex;
    border: 1ex solid;
    border-color: white;
}

table.indextable td {
    padding: 0.5ex;
    font-size: 10pt;
    vertical-align: top;
    line-height: 1.5em;
}

div.sectTitle {
    font-size: 12pt;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 1px 1px 1px 2px;
    border-top: 1px solid #F29F3E;
    background-color: #FFEAC0;
}

div.subsectTitle {
    font-size: 12pt;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 3px;
    padding-left: 2px;
    border-top: 1px solid #F29F3E;
    background-color: #FFEAC0;
}

div.searchBar {
    text-align: right;
}

div.bibtex {
    font-family: monospace;
    margin: 10pt;
}

div.bibtex div.bibtexBody {
    margin-left: 10pt;
}

div.email {
    text-align: center;
    margin: 10pt;
}

div.project {
    padding-bottom: 20pt;
    line-height: 1.5em;
}

div.projectBody {
    margin-left: 1px;
}

div.project div.projectHeader {
    font-size: 110%;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 10px;
    padding-left: 2px;
    padding-top: 0px;
    border-top: 1px solid #9CC0ED;
    background-color: #E5ECF9;
}

div.project div.logoFrame {
    float: right;
    margin: 0pt 0pt 8pt 10pt;
}

div.project div.projectBodyElement ul {
    margin-top: 5px;
    margin-bottom: 0px;
}

div.projectsSection hr {
    background-color: white;
    height: 10pt;
}

div.projectsSection h4, div.activities h4 {
    background: #DDF8CC;
    border: 1px solid #80C65A;
    text-align: center;
    padding: 1pt;
    margin-top: 10pt;
    margin-bottom: 10pt;
}

div#publications {
    margin-left: 10pt;
    margin-right: 10pt;
}

div#publications li {
    margin-bottom: 10px;
    list-style: decimal;
}

div#publications ul {
    margin-bottom: 20px;
}

div.person {
    margin: 20pt 10pt 20pt 10pt;
    background-color: white;
    min-height: 175px;
}

div.person table.personHeader {
    border: 1px solid;
    border-color: white white #9CC0ED white;
    width: 100%;
}

table.personHeader td.personName {
    font-size: 110%;
    font-weight: bold;
}

table.personHeader td.personInfo {
    font-size: 90%;
    font-weight: normal;
    text-align: right;
}

div.person div.photoFrame {
    float: right;
    margin: 10pt 0pt 8pt 10pt;
}
/*
img.photo {
    width: 80pt;
}
*/
img.bordered {
    border: 1px solid;
}

div.person p {
    margin-left: 1pt;
}



div.seminar {
    margin: 20pt 10pt 20pt 10pt;
    background-color: white;
    min-height: 175px;
}

div.seminar table.seminarHeader {
    border: 1px solid;
    border-color: white white #9CC0ED white;
    width: 100%;
}

table.seminarHeader td.seminarTitle {
    font-size: 110%;
    font-weight: bold;
}

table.seminarHeader td.seminarInfo {
    font-size: 90%;
    font-weight: normal;
    text-align: right;
}


div.seminar s {
    margin-left: 1pt;
}




div#databases {
    margin: 10pt;
    color: #949694;    
}

div#databases li {
    margin-bottom: 1ex;
}

div.recognition {
    margin-top: 10pt;
    background: #DDF8CC;
    border: 1px solid #80C65A;
    text-align: center;
    padding: 2pt;
}

div.recognition li {
    margin-top: 2em;
    margin-bottom: 2em;
    list-style: none;
}

div.activities li {
    list-style: circle;
}

div.restricted {
    background: #FFAFAF;
    border: 1px solid red;
    padding: 15pt 15pt 40pt 15pt;
    margin-top: 2pt;
    margin-right: 10pt;
}

div.scaffold li {
    margin-top: 10pt;
}

div.topicsMenu {
    float: right;
}

div.menuPeople{
    float: right;
}

div#about {
    margin-top: 10px;
}

div#contact {
    margin-left: 1px;
    margin-bottom: 10px;
}

div.contactTitle {
    border-bottom: 1px solid #9CC0ED;
    font-size: 120%;
    font-weight: bold;
    margin-bottom: 5px;
}

div.contactElement {
    margin-left: 10px;
}

div#imgFloat {
    float: right;
    margin: 10px;
}

div#about {
    margin-bottom: 30px;
}

span.new {
    color: red;
}

/************************************/

/*a:visited, a:link {
    text-decoration: underline;
    color: #0072BC;
    background-color: transparent;
}*/a:visited {
    color: blue;
    text-decoration: underline;
}

table.menu td a:hover {
    background-color: #FBBE40;
}

a.selected, a:visited.selected, a:active.selected, a:link.selected, a:hover.selected {
    background-color: #FFCC66;	
}

a.noBack, a:visited.noBack, a:active.noBack, a:link.noBack, a:hover.noBack {
    background-color: transparent;	
}


img {
	border: none;
	vertical-align: middle;
}

p {
    margin: 0.5em 0em 1em 0em;
    text-align: justify;
    line-height: 1.5em;
}


p img {
    border: 0;
    margin: 0;
}


hr {
    clear: both;
    height: 1px;
    border: 0;
    background-color: #FBBE40;
}


/*h1, h2, h3 {
    clear: left;
    font: 100% Tahoma, Helvetica, Arial, sans-serif;
    margin: 0;
    margin-right: 15px;
    margin-bottom: 0.5em;
    border-top: 1px solid #F7931D;
    border-left: 1px solid #FFD16F;
    background-color: #FFD16F;
}*/

h1 {
    font-size: x-large;
}

h2 {
    font-size: 150%;
}

h3 {
    font-size: 130%;
}

h4, h5, h6 {
    /*color: #0066CC;*/
    font: 100% Tahoma, Helvetica, Arial, sans-serif;
    margin: 0;
    margin-bottom: 0.5em;
    padding-top: 0.5em;
}

h4 {
    font-size: 110%;
    font-weight: bold;
}

h5 {
    font-size: 100%;
    font-weight: bold;
}

h6 {
    font-size: 80%;
}

ul { 
    line-height: 1.5em;
    list-style-image: url("images/bullet.gif"); 
    margin-left: 2em;
    padding: 0;
}

ol {
    line-height: 1.5em;
    margin-left: 2em;
    padding:0;
}

/*
.highlighted {
    font-weight: bold;
    color: #0C2A67!important;
}


.citation {
     color: #ff0000!important;

}
.underline{
	color :#0000C0;
	font-weight:bold;
}
.present{
	color: #0913D9;
	font-style: italic;
}
.sourcecode {
    font-family: courier new !important;
    font-size: 10;
}

form {
    border: none;
    margin: 0;
}

textarea {
    border: 1px solid #0C2A67;  
    color: black;
    background-color: white;
    padding: 0.1em;
}

input {
    font: 100% Tahoma, Helvetica, Arial, sans-serif;
    border: 1px solid #0C2A67;  
    color: black;
    background-color: white;
    vertical-align: middle;
    padding: 0.1em;
}

select {
    font: 100% Tahoma, Helvetica, Arial, sans-serif;
    color: black;
    border: 1px solid #0C2A67;
    vertical-align: top;
}

.descLabel {
	color: #4B51CD!important;
}

*/

.mySlides {
    display: none
}

/* Slideshow container */
.slideshow-container {
    max-height: 500px;
    max-width: 500px;
    position: relative;
    margin: auto;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Caption text */
.text {
    color: #3f3f3f;
    font-size: 15px;
    padding: 0px 0px;
    position: absolute;
    bottom: 15 px;
    width: 100%;
    text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active {
    background-color: #717171;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    } to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    } to {
        opacity: 1
    }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .text {
        font-size: 11px
    }
}

/* popUp */
.popup {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    display: none;
}
.popup-content {
    border-radius: 10px;
    background-color: white;
    margin: 10% auto;
    padding: 20px;
    border: 3px solid #888888;
    width: 20%;
    font-weight: bolder;
}

.popup-content input {
    display: block;
    margin: 0 auto;
}

.popup-content h2 {
    text-align: center;
}

.popup-content button {
    display: block;
    margin: 0 auto;
}
.show {
    display: block;
}

/* End popup */

.link {
    cursor: pointer;
}

.message_wrong {
    color: red;
    text-align: center;
}

.message_right {
    color: green;
    text-align: center;
}

/* tabs */
/* funcionamiento básico del sistema de pestañas */
.tab-content {
    display: none;
}

.tab:target .tab-content, .tab:last-of-type .tab-content {
    display: block;
}

.tab:target ~ .tab:last-of-type .tab-content {
    display: none;
}
/* parámetros para configurar las pestañas */
:root {
    --tabs-border-color: #FBBE40;
    --tabs-border-size: 3px;
    --tabs-text-color: black;
    --tabs-dark-color: #0072BC;
    --tabs-lite-color: white;
    --tabs-width: 185px;
    --tabs-height: 40px;
}
/* aspecto básico */
body {
    FONT-SIZE: 10pt;
    color: black;
    FONT-FAMILY: arial, Tahoma, Helvetica, sans-serif;
    background: white;
    margin: 0;
    padding: 0;
}
.tabs h2, p {
    margin: 0;
}
.tabs a {
    color: inherit;
    text-decoration: none;
    font-weight: bold;
}
.tabs * {
box-sizing: border-box;
}
.tab-container {
position: relative;
padding-top: var(--tabs-height); /* en esta zona colocaremos las pestañas */
} 
#tab1>a { --tabs-position: 0; }
#tab2>a { --tabs-position: 1; }
#tab3>a { --tabs-position: 2; }
#tab4>a { --tabs-position: 3; }
#tab5>a { --tabs-position: 4; }
#tab6>a { --tabs-position: 5; }
#tab7>a { --tabs-position: 6; }
#tab8>a { --tabs-position: 7; }
#tab9>a { --tabs-position: 8; }
.tab>a {
text-align: center;
position: absolute;
width: calc(var(--tabs-width));
height: calc(var(--tabs-height) + var(--tabs-border-size)); 
top: 0;
left: calc(var(--tabs-width) * var(--tabs-position)); /* posición de cada pestaña */
}

/* más aspecto */
.tabs { 
padding: 10px;
color: var(--tabs-text-color);
}
.tab-content {
background-color: var(--tabs-lite-color); 
padding: 20px;
border: var(--tabs-border-size) solid var(--tabs-border-color);
border-radius: 0 0 10px 10px;
position: relative;
z-index: 100;
}
.tab>a {
background-color: var(--tabs-dark-color); 
padding: 10px;
border: var(--tabs-border-size) solid var(--tabs-border-color);
border-radius: 10px 10px 0 0;
border-bottom: 0;
}
.tab:target>a, .tab:last-of-type>a {
background-color: var(--tabs-lite-color); 
z-index: 200;
}
.tab:target ~ .tab:last-of-type>a {
background-color: var(--tabs-dark-color); 
z-index: 0; 
}

/* form */

/* message */
.message {
    border: var(--tabs-border-size) solid var(--tabs-border-color);
    border-radius: 10px;
    margin: 5px;
    padding: 10px;
}

/* footer */

footer {
    min-height: 50px;
}