@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css');
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css');

html {
	font-size: 16px;
}

body {
	font-family: "Arial", "Helvetica", "sans-serif";
}

.container { width: 100%; border: 2px solid #ccc;}

.table td, .table th { vertical-align: middle; }

.font-bold {
	font-weight: bold;
}

.image-photo  {
	//width: 240px;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.banner-wrapper {
	max-width: 950px;
	margin: 10px auto 0 auto;
	width: 100%;
}
.banner-responsive {
	position: relative;
	width: 100%;
	padding-top: 20%; /* 190/950 = 20% aspect ratio */
	background: #eee;
	border-radius: 12px 12px 0px 0px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	overflow: hidden;
}
.banner-responsive img {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	object-fit: cover;
	border-radius: 12px 12px 0px 0px;
	z-index: 1;
}
/* CSS clickable areas over the banner */
.banner-link {
	position: absolute;
	top: 0;
	height: 100%;
	z-index: 2;
	/* Optional: for debugging, add background: rgba(255,0,0,0.2); */
}
.banner-link.area1 { left: 0; width: 82%; top: 0; height: 95%}		 /* Logo */
.banner-link.area4 { left: 87%;	width: 12%; top:  7%; height: 21% }  /* My APSIPA */
.banner-link.area5 { left: 87%;	width: 12%; top: 28%; height: 22% }  /* Join APSIPA */
.banner-link.area6 { left: 87%;	width: 12%; top: 50%; height: 22% }  /* Renew */
.banner-link.area7 { left: 87%;	width:  5%; top: 71%; height: 24% }  /* Facebook */
.banner-link.area8 { left: 92%;	width:  7%; top: 71%; height: 24% }  /* Linkedin */

.banner-link:focus,
.banner-link:hover {
	//outline: 2px solid #007bff;
	//background: rgba(0,123,255,0.08);
}
.login-container {
	max-width: 400px;
	margin: 40px auto;
	background: #fff;
	padding: 32px 24px;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.btn {
	//background: #4E6192;
}
.navbar {
	max-width: 950px;
	margin: 0 auto 0 auto;
	border-radius: 0 0 12px 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	color: #ffffff;
	background: #4E6192 !important;
}
.navbar-nav .nav-link {
	transition: background 0.2s, color 0.2s;
	color: #ffffff;
}		
.navbar-nav .dropdown-item {
	transition: background 0.2s, color 0.2s;
	color: #000000;
}
.navbar-nav .nav-link:hover,
.navbar-nav .dropdown-item:hover {
	background: #007bff;
	color: #fff !important;
}
/* Move hamburger icon to right */
.navbar-toggler {
	margin-left: auto;
}

.cookie-consent {
	display: none;
	position: fixed;
	bottom: 0;
	background-color: #5b69cf;
	color: white;
	width: 100%;
	text-align: center;
	padding: 10px;
}
.cookie-consent button {
	margin: 0 5px;
	padding: 5px 10px;
}
.photo-grid img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	margin-bottom: 16px;
	object-fit: cover;
}

.read-more-content {
	display: none;
}

footer {
	text-align: center; /* Center the text */
	margin-top: auto; /* Pushes footer to the bottom */
	//background-color: #f4f4f4;
	padding: 0px 0px 0px 0px;
	font-size: 0.8rem;
}

.card {
	//height: 160px;
	border: 0;
}
.card-photo {
	width: auto;
	height: 100px;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	object-fit: cover;
}
.card-title {
	text-align: left;
	font-size: 1.3rem;
	font-weight: bold;
	color: #cc3333;	
}
.card-name {
	font-weight: bold;
	text-align: left;
}
.card-affilate {
    font-style: italic;	
}
.card-name-1 {
	width: auto;
	//font-weight: bold;
	text-align: left;
	display: inline-block;
}
.card-affilate-1 {
    font-style: italic;	
	display: inline-block;
}

.display-inline {
	width: auto;
	display: inline-block;
}

.image-container {
	/* Define the fixed dimensions for the container */
	width: 190px;
	height: 240px;
	/* Optional: Add a border to visualize the container boundaries */
	//border: 1px solid #ccc;
	/* Optional: Center the image within its parent container for better presentation */
	display: flex;
	justify-content: center;
	align-items: center;
	/* Optional: Add margin for better display on the page */
	margin: 0px;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.408);
}
/* Optional: Add a hover effect */
.image-container img:hover {
	transform: scale(1.10);
	transition: transform 0.5s ease;
}

.cropped-image {
	/* Ensure the image takes up the full width and height of its parent container */
	width: 100%;
	height: 100%;
	/* The key property: 'cover' scales the image to cover the entire container, cropping the excess */
	object-fit: cover;
	/* Optional: Center the image within the container if the container has extra space (which it won't here as the image takes 100% of the space) */
	object-position: center;
}
.chair-image-container {
	/* Define the fixed dimensions for the container */
	width: 190px;
	height: 240px;
	/* Optional: Add a border to visualize the container boundaries */
	border: 0px solid #ccc;
	/* Optional: Center the image within its parent container for better presentation */
	display: flex;
	justify-content: center;
	align-items: center;
	/* Optional: Add margin for better display on the page */
	margin: 0px;
	float: left;
	overflow: hidden; 
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.408);
}

.chair-cropped-image {
	/* Ensure the image takes up the full width and height of its parent container */
	width: 100%;
	height: 100%;
	/* The key property: 'cover' scales the image to cover the entire container, cropping the excess */
	object-fit: cover;
	/* Optional: Center the image within the container if the container has extra space (which it won't here as the image takes 100% of the space) */
	object-position: center;
	//border: 10px solid #ccc;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);	
}

.news-block {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	padding: 32px 24px;
	margin-bottom: 32px;
	text-align: justify;
}
.carousel-block {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	padding: 32px 24px;
	margin-bottom: 32px;
}
.twocol-block {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	padding: 32px 24px;
	margin-bottom: 32px;
}
.threecol-block {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	padding: 32px 24px;
	margin-bottom: 32px;
}
.news-headline {
	font-weight: bold;
	font-size: 1.15rem;
}
.news-date {
	color: #888;
	font-size: 0.95rem;
}
.news-content {
	margin-left: 30px;
	margin-bottom: 10px;
}
.justified-list li {
    //text-align: justify;
}

.table-container {
	display: table;
	width: 100%;
	border-collapse: collapse;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	overflow: hidden; /* Ensures the border-radius applies to all corners */
}

.table-row {
	display: table-row;
}

.table-header {
	display: table-cell;
	background-color: #007bff; /* Modern primary color */
	color: white;
	padding: 12px 15px;
	text-align: left;
	font-weight: bold;
	border-right: 1px solid #ffffff; /* Subtle white border between headers */
}

.table-header:last-child {
	border-right: none;
}

.table-cell {
	display: table-cell;
	padding: 8px 10px;
	border: 1px solid #ddd; /* Divider line for rows */
	background-color: #f9f9f9; /* Light background for data cells */
	vertical-align: middle;
}

.table-cell3 {
	display: table-cell3;
	white-space: nowrap;
	padding: 8px 30px;
	border: 1px solid #ddd; /* Divider line for rows */
	background-color: #f9f9f9; /* Light background for data cells */
	vertical-align: middle;
}

/* Zebra striping for better readability */
.table-row:nth-of-type(even) .table-cell3 {
	background-color: #ffffff;
}

.table-row:last-of-type .table-cell3 {
	border-bottom: none; /* No bottom border on the last row */
}

/* Zebra striping for better readability */
.table-row:nth-of-type(even) .table-cell {
	background-color: #ffffff;
}

.table-row:last-of-type .table-cell {
	border-bottom: none; /* No bottom border on the last row */
}

.gotop {
	padding-right: 20px;
	padding-bottom: 10px;
	text-align: right;
	font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
	font-size: 12px;
}

.no-bullets {
  list-style-type: none; /* Removes the bullets */
  margin: 0;            /* Optional: Removes default margin */
  padding: 0;           /* Optional: Removes default padding/indentation */
}

/* Accordion */
.accordion-container {
  max-width: 800px;
  margin: 0rem auto;
  font-family: "Arial", "Helvetica";
}

.accordion-content {
	margin: 30px;
}

summary {
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 0px;
  font-weight: 600;
  cursor: pointer;
  list-style: none; /* Hides default arrow in some browsers */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Custom arrow indicator */
summary::after {
  content: '→';
  transition: transform 0.3s ease;
}

details {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 0.3rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

details[open] {
  border-color: #3b82f6; /* Modern blue highlight */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

details[open] summary::after {
  transform: rotate(90deg);
}

/* Styles applied ONLY when the panel is open */
details[open] summary {
  background-color: #dfe6ef; /* Light blue highlight */
  color: #1e40af;            /* Darker blue text */
  border-bottom: 1px solid #bfdbfe;
  font-weight: 700;
}

/* Optional: change the indicator color when open */
details[open] summary::after {
  color: #1e40af;
  transform: rotate(90deg);
}
/* Accordion */

/* Paper Listing */		
.topic {
  width: 100%;
  text-align: left;
}

div.paper {
  width: 100%; 
  font-size: 13px;
  font-weight: bold;
  text-align: justify;
  margin: 10px 10px 0px 2px;
  text-indent: 0em;

}
div.author {
  width: 100%;
  font-size: 13px;
  font-style: italic;
  text-align: left;
  margin: 2px 10px 0px 30px;
  text-indent: 0px;
}
div.doi {
  font-size: 13px;
  text-align: left;
  margin: 2px 10px 0px 30px;
  text-indent: 0px;
}
div.date {
  font-size: 13px;
  text-align: left;
  margin: 2px 10px 0px 30px;
  text-indent: 0px;
}
/* Paper Listing */


/* Photo Archive */
.thumblock { display: flex; justify-content: center; align-items: center; }
.thumbcell { padding: 10px; height: 105px; }
.thumb-pages {}
/* Photo Archive */

@media (max-width: 950px) {
	html { 
		//font-size: 30px !important; 
	}
	.image-photo {
//		width: 35vw;
	}	
	
	.body {
		//font-size: 2.5em;	
	}
	.banner-wrapper {
		margin: 0px auto 0 auto;
	}
	.banner-wrapper, .navbar {
		max-width: 100%;
	}
	.navbar-nav .nav-link, .navbar-nav .dropdown-item  {
		//font-size: 2.5em;
		
		// font-size: 2.4rem; /* Increased font size for mobile */
	}
	.navbar-toggler {			
		padding: 0.5rem; /* Adjust padding */
	}
	.navbar-toggler-icon {
		//width: 50px; /* Increased width */
		//height: 50px; /* Increased height */
	}
	
	.twocol-block .row  {
		margin-bottom: 24px;
	}
	.chair-cropped-image {
		/* Ensure the image takes up the full width and height of its parent container */
		width: 100%;
		height: 100%;
		/* The key property: 'cover' scales the image to cover the entire container, cropping the excess */
		object-fit: cover;
		/* Optional: Center the image within the container if the container has extra space (which it won't here as the image takes 100% of the space) */
		object-position: left;
	}	
}

@media (max-width: 575.98px) {
  .my-custom-element {
    font-size: 14px;
    padding: 10px;
  }
}

/* Custom CSS for screens larger than 576px (small - typical mobile landscape/tablet) */
@media (min-width: 576px) {
  .my-custom-element {
    font-size: 24px;
    padding: 20px;
  }
}