/*  ------------------------------------------------------------------
Stylesheet: Galaxy memoirs - inferring their past from their present
Design: David Maltby (June 2024)

Includes: 
jQuery v1.7.1 from http://jquery.org/
Nivo Slider v2.7.1 by Gilbert Pellegrom - http://nivo.dev7studios.com/
--------------------------------------------------------------------*/

*{box-sizing: border-box; border:0; margin:0; padding:0; vertical-align:baseline; font:inherit; font-size:100%}

/* HTML elements: general definitions ------------------------------*/
body{background-color: #f2f2f2; line-height:1.6em; font-family: 'Droid Sans', Tahoma, Arial, sans-serif; font-size:15px;}
a{color: #005588; text-decoration: none;}
a:hover{color: #333; text-decoration: none;}
a img{border: none;}
h1,h2,h3,h4{clear:left; color: #5a5b5c; font-weight: 400; margin: 0.7em 0; font-family: 'Droid Sans', Tahoma, Arial, sans-serif;}
h1{font-size: 3.6em; padding-bottom:-20px;}
h2{font-size: 1.5em;}
h3{font-size: 1.0em;}
h4{font-size: 1.0em;}
p,ul,label{margin: 0 0 20px 0; font-size: 17px; color:#5a5b5c;}
i,em {font-style: italic;}
b,strong {font-weight: 700;}
sup {font-size: xx-small; vertical-align: super;}
small {font-size: small}
small_h1 {font-size: 20px;}


/* Main wrappers ---------------------------------------------------*/
#wrapper1260{background-color: #f2f2f2; margin: 35px auto; width: 1260px;}


/* Header layout ---------------------------------------------------*/
#header{position: relative;}
#UoNlogo{position: relative; width: 15%;}
#GM25logo{position: relative; width: 15%;}
#sitetitle{width: 70%; float: left; text-align: center;}
#sitetitle h1{font-family: 'Droid Sans', Tahoma, Arial, sans-serif; font-size: 65px; color: #005588; padding: 00px 00px 00px 00px; margin: 50px 00px 00px 00px;}
#sitetitle h2{font-family: 'Droid Sans', Tahoma, Arial, sans-serif; font-size: 27px; color: #005588; padding: 00px 00px 00px 00px; margin: 30px 00px 00px 00px;}
#sitetitle h3{font-family: 'Droid Sans', Tahoma, Arial, sans-serif; font-size: 18px; color: #5a5b5c; padding: 00px 00px 00px 00px; margin: 10px 00px 00px 00px;}
#sitetitle h4{font-family: 'Droid Sans', Tahoma, Arial, sans-serif; font-size: 18px; color: #5a5b5c; padding: 00px 00px 00px 00px; margin: 20px 00px 30px 00px;}
/*------------------------------------------------------------------*/


/* Main navigation menu : topnav -----------------------------------*/
#nav{font-family: 'Droid Sans', Tahoma, Arial, sans-serif; text-align: left; padding: 00px 00px 00px 00px; margin: 00px 00px 00px 00px; border-radius: 10px 10px 0px 0px;
     background-color: #005588; z-index: 10;}
#nav ul{list-style: none; margin: 00px 00px 00px 00px;}
#nav ul li{display: inline-block; text-align: center; height: auto; line-height: 25px; padding: 10px 0px 0px 0px; margin: 00px 00px 00px 00px; position: relative;}
#nav ul li{background: #005588; border: 0px; border-style: solid; border-radius: 25px; border-color:#005588}
#nav ul li a{font-size: 15px; font-weight: 900; text-transform: uppercase; padding: 10px 40px 10px 40px;}
#nav ul li a{color: #f2f2f2;}
#nav ul li a:hover{color: #ffbf00;}
#nav ul li a.current{color: #ffbf00;}
.sticky {position: fixed; top: 0; width: 1260px;}
.sticky + .content {padding-top: 45px;}
/*------------------------------------------------------------------*/


/* Main navigation menu : dropdown ---------------------------------*/
.dropbtn {background-color: #005588; padding: 0px 0px 10px 0px; margin: 00px 00px 00px 00px;}
.dropbtn a{font-family: 'Droid Sans', Tahoma, Arial, sans-serif; text-align: left; color: #f2f2f2; font-size: 15px; font-weight: 900; text-transform: uppercase; padding: 10px 25px 10px 30px;}
.dropbtn a.current{color: #ffbf00;}
.dropdown{position: relative; display: inline-block;}
.dropdown:hover .dropbtn a{background-color: #005588; color: #ffbf00; transition: color 500ms ease-in-out;}
.dropdown:hover .dropdown-content{display: block; z-index: 10; visibility: visible; opacity: 1; transition: opacity 500ms ease-in-out;}
.dropdown-content {position: absolute; padding: 00px 0px 00px 0px; background-color: #f2f2f2; min-width: 200px; box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2); border-radius: 0px 0px 10px 10px;}
.dropdown-content {visibility: hidden; opacity: 0 ;}
.dropdown-content a {color: #005588; padding: 10px 20px 10px 20px; text-decoration: none; display: block;}
.dropdown-content a:hover {background-color: #f2f2f2; color: #ffbf00; border-radius: 0px 0px 10px 10px; transition: color 250ms ease-in-out;}
/*------------------------------------------------------------------*/


/* Main navigation menu : search -----------------------------------*/
.search-container {float: right;}
.search-container input[type=text] {float:left; padding: 3px 0px 3px 15px; margin-top: 8px; font-size: 15px; border: none; border-radius: 10px 0px 0px 10px; 
                                    visibility: visible; opacity: 0; background: #f2f2f2;}
.search-container button {float: right; padding: 3px 10px 3px 10px; margin-top: 8px; margin-right: 16px; font-size: 15px; border: none; border-radius: 0px 10px 10px 0px; 
                          background: #005588; cursor: pointer;}
.search-container:hover button {background: #cccccc; transition: background 500ms ease-in-out;}
.search-container:hover input {opacity: 1; transition: opacity 500ms ease-in-out;}
/*------------------------------------------------------------------*/


/* Quicklinks ------------------------------------------------------*/
.quicklinks {width:100px; height:100px; border: 4px solid #005588; border-radius: 100px; margin: auto}
.quicklinks:hover {box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);}
/*------------------------------------------------------------------*/


/* General classes -------------------------------------------------*/
.clear{clear: both;}
.left{float: left;}
.right{float: right;}
/*------------------------------------------------------------------*/


/* General layouts -------------------------------------------------*/
.content{width: 100%; padding: 0px; margin: 0px}
.container-top{background-color: #ffffff; width: 100%; margin-top: 00px; padding: 20px; border-width: 0px 3px 3px 3px; border-style: solid; border-radius: 0px 0px 10px 10px; 
	       border-color:#005588; box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);}
.container{background-color: #ffffff; width: 100%; margin-top: 20px; padding: 20px; border-width: 3px 3px 3px 3px; border-style: solid; border-radius: 10px 10px 10px 10px;
	   border-color:#005588; box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);}
.main{width: 100%; float: left; padding: 20px}

.left-main{width: 66%; float: left; padding: 20px}
.left-main2{width:80%; float: left; padding-right: 20px}
.left-main3{width:60%; float: left; padding: 20px}
.right-main{width: 66%; float: right; padding: 20px}
.right-main2{width: 73.5%; float: right; padding-right: 20px}
.right-main3{width: 60%; float: right; padding: 20px}

.left-sidebar{width: 33%; float: left; padding: 20px}
.left-sidebar2{width: 26.5%; float: left; padding-right: 20px}
.left-sidebar3{width: 40%; float: left; padding: 20px}
.right-sidebar{width: 33%; float: right; padding: 20px}
.right-sidebar2{width: 20%; float: right; padding-right: 20px}
.right-sidebar3{width: 40%; float: right; padding: 20px}

.twocol{width: 50%; float: left; padding: 20px}
.threecol{width: 33%; float: left; padding: 20px}
.fourcol{width: 25%; float: left; padding: 2px}

.threecol2{width: 33%; float: left;}
.threecol2 p {font-size: 15px;}
.sixcol{width: 16.5%; float: left;}
.sixcol p {font-size: 15px;}

/*------------------------------------------------------------------*/


/* Bullet lists ----------------------------------------------------*/
.list-indent{padding-left: 20px;}
.list-indent li::marker{color: #005588; font-size: 25px;}
/*------------------------------------------------------------------*/


/* Table layouts ---------------------------------------------------*/
table.timeline {font-family: 'Droid Sans', Tahoma, Arial, sans-serif; font-size: 17px; color: #5a5b5c; border-collapse: collapse; width: 100%; margin: 10px 0px 0px 0px;}
table.timeline th {border: none; text-align: left; vertical-align: top; padding: 10px 5px 5px 5px;}
table.timeline td {border: none; text-align: left; vertical-align: top; padding: 10px 0px 0px 5px;}

table.programme {font-family: 'Droid Sans', Tahoma, arial, sans-serif; font-size: 15px; color: #5a5b5c; border-collapse: collapse; width: 100%; margin: 0px 0px 20px 0px;}
table.programme td {border: 2px solid #dddddd; text-align: left; vertical-align: top; padding: 5px 5px 5px 5px;}

table.participants {font-family: 'Droid Sans', Tahoma, arial, sans-serif; font-size: 15px; color: #5a5b5c; border-collapse: collapse; width: 100%; margin: 10px 0px 0px 0px;}
table.participants th {border: 2px solid #dddddd; text-align: left; vertical-align: top; padding: 5px 5px 5px 5px; background-color: #005588; color: #ffffff}
table.participants td {border: 2px solid #dddddd; text-align: left; vertical-align: top; padding: 0px 0px 0px 5px;}
table.participants tr:nth-child(even) {background-color: #dddddd;}

table.posters {font-family: 'Droid Sans', Tahoma, arial, sans-serif; font-size: 15px; color: #5a5b5c; border-collapse: collapse; width: 100%; margin: 10px 0px 0px 0px;}
table.posters th {border: 2px solid #dddddd; text-align: left; vertical-align: top; padding: 5px 5px 5px 5px; background-color: #005588; color: #ffffff}
table.posters td {border: 2px solid #dddddd; text-align: left; vertical-align: top; padding: 5px 5px 5px 5px;}
table.posters tr:nth-child(even) {background-color: #dddddd;}
/*------------------------------------------------------------------*/








.hr-lines:before {content:" "; display: block; height: 1px; width: 30%; background: #5a5b5c; position: absolute; top: 40%; left: 0;}
.hr-lines {position: relative; text-align: center;}
.hr-lines:after {content:" "; display: block; height: 1px; width: 30%; background: #5a5b5c; position: absolute; top: 40%; right: 0;}

.hr-lines2:before {content:" "; display: block; height: 1px; width: 25%; background: #5a5b5c; position: absolute; top: 40%; left: 0;}
.hr-lines2 {position: relative; text-align: center;}
.hr-lines2:after {content:" "; display: block; height: 1px; width: 25%; background: #5a5b5c; position: absolute; top: 40%; right: 0;}





/* Footer ----------------------------------------------------------*/
#footer{clear: both; background-color: #005588; padding: 15px; width: 100%}
#footer p{text-align: center; color:#797777; font-size: 15px; margin: 0; color: #f2f2f2;}





img.p {color: #fff;}





.content h1{font-family:'Droid Sans', Tahoma; font-size:025px; color:#005588; margin:00px 00px 00px 00px; padding-bottom:10px; font-weight:1000}
.content h2{font-family:'Droid Sans', Tahoma; font-size:020px; color:#005588; margin:00px 00px 00px 00px; padding-bottom:10px; font-weight:1000}
.content h3{font-family:'Droid Sans', Tahoma; font-size:015px; color:#005588; margin:00px 00px 00px 00px; padding-bottom:10px; font-weight:1000}



















/* Image alignment */
img.alignleft,img.aligncenter,img.alignright{background:#fff;padding:0px;margin-bottom:0px;border:0px solid #ddd;}
.alignleft{float:left;margin-right:30px;}
.alignright{float:right;margin-left:30px;}
.aligncenter{text-align:center}

/* Image caption (DTM) */
div.wrapper{
	float:left; /* important */
	position:relative; /* important (so we can absolutely position the description) */
	padding-bottom:0px;
}
div.description{
	position:absolute; /* absolute position (so we can position it where we want) */
	bottom:6px; /* position will be on the bottom */
	left:0px;
	width:100%;
	/* styling below */
	font-family:'Droid Sans',Helvetica,Arial,sans-serif;
	background:rgba(0, 0, 0, 0.2);
	font-size:13px;
	color: #fff;
	opacity:0.4; /* transparency */
	filter:alpha(opacity=60); /* IE transparency */
}
p.description_content{
	padding:5px;
	text-align:center;display:block;clear:both;margin:0px auto;
	text-shadow:0 0 4px #111;
}




/* Clearing fix */
.clearfix:after{clear:both; content:"."; display:block; height:0; visibility:hidden;}
* html .clearfix{height:1%;}
*:first-child+html .clearfix{min-height:1%;}


button {font-size: 15px; color:#5a5b5c; border-radius: 5px; padding: 2px; border: 2px solid #005588; cursor: pointer}

button.active {background-color: #fff}

button.abstract {font-size: 15px; background-color: transparent; padding-left: 5px; border: 0px; cursor: pointer}

.form {padding: 20px}
.form input[type=text] {font-size: 15px; border: none; border-radius: 5px; padding: 3px 0px 3px 15px; margin-top: 8px;}
.form input[type=email] {font-size: 15px; border: none; border-radius: 5px; padding: 3px 0px 3px 15px; margin-top: 8px;}
.form input[type=checkbox] {width: 20px; height: 20px; position: relative; bottom: -4px;}
.form select {font-size: 15px; border: none; border-radius: 5px; padding: 3px 15px 3px 15px; margin-top: 8px; background: #ffffff}
.form button.clear {font-size: 15px; color: #5a5b5c; border-radius: 5px; padding: 2px; border: 2px solid #005588; cursor: pointer; width: 160px; float: left; background-color: #f2f2f2}
.form button.clear:hover {background-color: #005588; color: #ffbf00; transition: background-color, color 250ms ease-in-out; box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);}
.form button.submission {font-size: 15px; color: #5a5b5c; border-radius: 5px; padding: 2px; border: 2px solid #005588; cursor: pointer; width: 160px; float: right; background-color: #f2f2f2}
.form button.submission:hover {background-color: #005588; color: #ffbf00; transition: background-color, color 250ms ease-in-out; box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);}
.form textarea[type=text] {font-size: 15px; border: none; border-radius: 5px; padding: 3px 0px 3px 15px; margin-top: 8px;}

/* Slider Control ---------------------------------------------------------------------------------------------------------------------*/
/*
 jQuery Nivo Slider v2.7.1
 http://nivo.dev7studios.com
 Copyright 2011, Gilbert Pellegrom
 Free to use and abuse under the MIT license.
 http://www.opensource.org/licenses/mit-license.php
 */
.nivoSlider{position:relative;}
.nivoSlider img{position:absolute;top:0;left:0;}
.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;}
.nivo-slice{display:block;position:absolute;z-index:5;height:100%;}
.nivo-box{display:block;position:absolute;z-index:5;}
.nivo-caption{position:absolute;left:0;bottom:0;background:#000;color:#fff; opacity:0.8;width:100%;z-index:8;}
.nivo-caption p{padding:5px;margin:0;}
.nivo-caption a{display:inline!important;}
.nivo-html-caption{display:none;}
.nivo-directionNav a{position:absolute;top:45%;z-index:9;cursor:pointer;}
.nivo-prevNav{left:0;}
.nivo-nextNav{right:0;}
.nivo-controlNav a{position:relative;z-index:9;cursor:pointer;}
.nivo-controlNav a.active{font-weight:700;}
/*
Skin Name: Nivo Slider Default Theme (modified)
Skin URI: http://nivo.dev7studios.com
Skin Type: flexible
Description: The default skin for the Nivo Slider, modified to work with the Inland One template.
Version: 1.2
Author: Gilbert Pellegrom (modified by Andreas Viklund)
Author URI: http://dev7studios.com
*/
.slider-wrapper .nivoSlider{position:relative;height:300px;background:#fafafa url(images/loading.gif) no-repeat 50% 50%;margin-bottom:45px;}
.slider-wrapper .nivoSlider img{position:absolute;top:0;left:0;display:none;}
.slider-wrapper .nivoSlider a{border:0;display:block;}
.slider-wrapper .nivo-controlNav{position:absolute;left:50%;bottom:-41px;margin-left:-60px;/* Tweak this to center bullets */}
.slider-wrapper .nivo-controlNav a{display:block;width:22px;height:22px;background:url(images/bullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left;}
.slider-wrapper .nivo-controlNav a.active{background-position:0 -22px;}
.slider-wrapper .nivo-directionNav a{display:block;width:30px;height:30px;background:url(images/arrows.png) no-repeat;text-indent:-9999px;border:0;}
.slider-wrapper a.nivo-nextNav{background-position:-30px 0;right:15px;}
.slider-wrapper a.nivo-prevNav{left:15px;}
.slider-wrapper .nivo-caption{font-family:'Droid Sans',Helvetica,Arial,sans-serif;background:rgba(0, 0, 0, 0.5);text-align:center;text-shadow:0 0 4px #111;}
.slider-wrapper .nivo-caption a{color:#fff;border-bottom:0px dotted #fff;}
.slider-wrapper .nivo-caption a:hover{color:#fff;}
.slider-wrapper p {color:#fff;}

/*-------------------------------------------------------------------------------------------------------------------------------------*/




.scroll-left {
 height: 50px;	
 overflow: hidden;
 position: relative;
 background: yellow;
 color: orange;
 border: 1px solid orange;
}
.scroll-left p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 transform:translateX(100%);
 /* Apply animation to this element */
 animation: scroll-left 15s linear infinite;
}
/* Move it (define the animation) */
@keyframes scroll-left {
 0%   {
 transform: translateX(100%); 		
 }
 100% {
 transform: translateX(-100%); 
 }
}

.active {
  display: block;
}

.programme-content{padding: 0px; margin: 40px 0px 0px 0px; max-height: 0px; overflow: hidden; transition: max-height 1s ease-out};







/* Tree layout -----------------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Roboto);
*{margin: 0; padding: 0; box-sizing: border-box;}
.tree {font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 17px;}
div .node .subitems {position: relative;}
.tree, .tree ul, .tree li {position: relative;}
.tree {display: inline-block; user-select: none;}
.tree, .tree .subitems {margin: 0 0 0 18px; color: #1a73e8;}
.tree .subitems {margin-left: 9px; display:none; overflow: hidden;}
.tree .extended {display:none; overflow: hidden;}
.main p {margin: 0}

#ancestors.tree .subitems{left: -73px}
#ancestors.tree:before {content: ""; display: block; width: 0; position: absolute; top: 0; bottom: 0; left: 0; border-left: 2px solid;}
#ancestors.tree .node {padding: 0 24px; line-height: 32px;}
#ancestors.tree li {margin: 0px 0px 24px 22px; line-height: 32px; background: #fff;}
#ancestors.tree .node:before {content: ""; width: 16px; height: 0; border-top: 2px solid; margin-top: -1px; position: absolute; top: 16px; left: 0;}
#ancestors.tree:before {background: #fff; height: auto; top: 16px; bottom: 0;}

#descendants.PhD {border-left: 2px solid;}
#descendants.PostDoc {border-left: 0px solid;}
#descendants.PhD:before {content: ""; display: block; width: 0; position: absolute; top: 0; bottom: 0; left: 0; border-left: 0px solid;}
#descendants.PostDoc:before {content: ""; display: block; width: 0; position: absolute; top: 0; bottom: 0; left: 0; border-left: 2px solid;}
#descendants.tree .node {padding: 0 24px; line-height: 32px}
#descendants.tree li {padding: 0 24px; line-height: 32px;}
#descendants.tree .node:before {content: ""; width: 16px; height: 0; border-top: 2px solid; margin-top: -1px; position: absolute; top: 16px; left: 0;}
#descendants.tree .node:last-child:before {background: #fff; height: auto; top: 16px; bottom: 0;}
#descendants.tree .subitems:before {content: ""; display: block; width: 0; position: absolute; top: 0; bottom: 0; left: 0; border-left: 2px solid;}
#descendants.tree .subitems li:before {content: ""; width: 16px; height: 0; border-top: 2px solid; margin-top: -1px; position: absolute; top: 16px; left: 0; border-color: #1a73e8;}
#descendants.tree .subitems li:last-child:before {background: #fff; height: auto; top: 16px; bottom: 0; padding-bottom:40px}

.tree .node .display, .tree .node .display > div {display: inline-block; vertical-align: middle; margin-right: 4px;}
.tree .node .display {white-space: nowrap;}
.tree .node .display .icon {line-height: 0;}
.tree .node .display .icon svg {width: 20px; height: 20px;}
.tree .node .display .icon.toggler {cursor: pointer;}
.tree .node .subitems .display .icon.toggler2 {cursor: pointer;}

.subitems ul {color: #000; list-style-type: none;}


#more1 {display: none;}
#more2 {display: none;}


h1{ position:relative; }
h1 a{ position:absolute; top:-85px;}
h1 a.external{position:relative; top:0px;}


button.bio {font-size: 15px; color: #5a5b5c; border-radius: 5px; padding: 2px; border: 2px solid #005588; cursor: pointer; width: 100px; float: right; background-color: #f2f2f2}
button.bio:hover {background-color: #005588; color: #ffbf00; transition: background-color, color 250ms ease-in-out; box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);}

button.fin {font-size: 15px; color: #5a5b5c; border-radius: 5px; padding: 2px; border: 2px solid #005588; cursor: pointer; width: 100px; float: right; background-color: #f2f2f2}
button.fin:hover {background-color: #005588; color: #ffbf00; transition: background-color, color 250ms ease-in-out; box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);}

/* Tooltip ---------------------------------------------------------*/
.tooltip {position: relative; display: inline-block; cursor: help;}
.tooltip .tooltiptext {visibility: hidden; width: 160px; background-color: #fffdd0; color: #5a5b5c; text-align: center; border-radius: 10px; padding: 5px 0; position: absolute;
                       z-index: 1; margin-left: 10px; margin-top: 20px; opacity: 0; border: 1px solid #005588;}
.tooltip:hover .tooltiptext {visibility: visible; opacity: 1; transition: opacity 500ms ease-in-out;}


.tooltip2 {position: relative; display: inline-block; cursor: help;}
.tooltip2 .tooltiptext {visibility: hidden; width: 160px; background-color: #fffdd0; color: #5a5b5c; text-align: center; border-radius: 10px; padding: 5px 0; position: absolute;
                       z-index: 1; margin-left: -90px; margin-top: 30px; opacity: 0; border: 1px solid #005588;}
.tooltip2:hover .tooltiptext {visibility: visible; opacity: 1; transition: opacity 500ms ease-in-out;}

.tooltip3 {position: relative; display: inline-block; cursor: help;}
.tooltip3 .tooltiptext {visibility: hidden; width: 260px; background-color: #fffdd0; color: #5a5b5c; text-align: center; border-radius: 10px; padding: 5px 0; position: absolute;
                       z-index: 1; margin-left: -190px; margin-top: 30px; opacity: 0; border: 1px solid #005588;}
.tooltip3:hover .tooltiptext {visibility: visible; opacity: 1; transition: opacity 500ms ease-in-out;}

/*------------------------------------------------------------------*/


/* Collapsible sections --------------------------------------------*/
button.collapsible {font-size: 15px; color: #5a5b5c; border-radius: 5px; padding: 2px; border: 2px solid #005588; cursor: pointer; width: 160px; float: right; background-color: #f2f2f2}
button.collapsible.active {background-color: #f2f2f2}
button.collapsible:hover {background-color: #005588; color: #ffbf00; transition: background-color, color 250ms ease-in-out; box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);}
button.collapsible:before {content: "Expand ";}
button.collapsible.active:before {content: "Collapse ";}

button.search {font-size: 15px; color: #5a5b5c; border-radius: 5px; padding: 2px; border: 2px solid #005588; cursor: pointer; width: 160px; float: right; background-color: #f2f2f2}
button.search.active {background-color: #f2f2f2}
button.search:hover {background-color: #005588; color: #ffbf00; transition: background-color, color 250ms ease-in-out; box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);}

button.link {font-size: 15px; color: #5a5b5c; border-radius: 5px; padding: 2px; border: 2px solid #005588; cursor: pointer; width: 160px; float: right; background-color: #f2f2f2}
button.link.active {background-color: #f2f2f2}
button.link:hover {background-color: #005588; color: #ffbf00; transition: background-color, color 250ms ease-in-out; box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);}

.table-content {padding: 0px; margin: 40px 0px 0px 0px; max-height: 200px; overflow: hidden; transition: max-height 1s ease-out};



.thumbnail {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

.thumbnail:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}




/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  border-radius: 40px;
  width: 70%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {color: white; float: right; font-size: 28px; font-weight: bold; padding-right:10px; padding-top:5px}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {padding: 2px 16px; background-color: #005588; color: white; border-top-left-radius: 20px; border-top-right-radius: 20px;}

.modal-body {padding: 2px 16px;}

.modal-footer {padding: 2px 16px; background-color: #005588; color: white; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;}

-webkit-appearance: none;

.modal-gallery {display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; justify-content: center; padding-top: 30px}

.modal-gallery img {
  width: calc(33.333% - 10px);
  max-width: 450px;
  max-height: 275px;
  border-radius: 8px;
  object-fit: contain;
}