body {background-color: #fdfdfd; color: rgb(54, 54, 54); margin: 0; font-size: 1em;}
h1, h2, h3, h4, h5 {text-align: center;}
h1 {margin-bottom: 24px; font-size: 2.2em;}
h2 {margin-top: 48px; font-weight: bold !important;}
h1, h2, h3, h4, h5, a, p, span, body {font-weight: normal; font-family: "Google Sans", sans-serif;}
.header {background-color: #fdfdfd; width: 100%; padding-top: 48px; padding-bottom: 8px;}
.header-menu {background-color: #efeff3; width: 100%; padding: 16px 0;}
.header-menu-content {max-width: 960px; margin: auto;}
.header-menu-item {display: inline-block; margin-left: 16px; margin-right: 16px; font-size: 1.2em;}
.links {width: 100%; margin: auto; text-align: center; padding-top: 8px;}
.links a {margin-left: 8px;}
.content {max-width: 960px; margin: auto; margin-top: 48px; margin-bottom: 64px;}
a, h2 {color: #D62727; text-decoration: none;}
a:hover {color: #fa6d6d;}
.nobreak {white-space: nowrap;}
.hr {width: 100%; height: 1px; margin: 48px 0; background-color: #d6dbdf;}
p {line-height: 1.4em; text-align: justify;}
.abstract {max-width: 600px; margin: auto;}
.math {font-family: "Computer Modern Sans", sans-serif; font-style: italic;}
sub, sup {line-height: 0;}
.figure {width: 100%; min-height: 120px; margin: 36px 0; background-repeat: no-repeat; background-position: center; background-size: contain;}
.figure-caption {margin: auto; max-width: 95%; margin-top: 24px; margin-bottom: 24px;}
.youtube-container {background-color: #000; margin-top: 32px;}
.youtube {display: block; margin: auto; width: 960px; padding-top: 20px; padding-bottom: 20px;}
.content-video {width: 100%; margin: 0; text-align: center;}
.content-video-container {width: 100%; max-width: 960px; margin: auto}
.content-video-frame {display: inline-block; width: 24.5%; text-align: center;}
.content-video-frame.medium {width: 30%;}
.content-video-frame.large {width: 36%;}
.content-video-frame.huge {width: 76%;}
.content-video-frame span {display: inline-block; margin-bottom: 12px; font-weight: bold; font-size: 1.2em;}
.hidden-content {display: none; background-color: #f3f3f6; border: 0; border-radius: 12px; margin-top: -18px; margin-bottom: 32px; padding-top: 50px; padding-bottom: 32px;}
.legend {display: inline-block; border: 1px solid #966565; padding: 8px; margin-top: 12px; text-align: center;}
.legend-item {display: inline-block; margin-left: 6px; margin-right: 6px; font-size: 12px;}
.legend-symbol {font-weight: bold; margin-right: 6px; font-size: 20px;}
.page {display: inline-block; width: 96px; height: 124px; border: 1px solid #bbb; margin: 2px; background-repeat: no-repeat; background-position: center; background-size: contain;}
table.authors {width: 100%; max-width: 700px; margin: auto; margin-bottom: 16px; text-align: center;}
table.authors a {padding: 6px 0; display: inline-block; font-weight: normal; font-size: 1.3em;}
table.authors .authors-affiliation {display: block; font-size: 1.2em;}
table.models {width: 100%; max-width: 800px; margin: auto; font-size: 1em; border-collapse: collapse;}
tr.models {background-color: #fff; border: 1px solid #eaeaea;}
tr.models td {padding: 6px 0; text-align: center;}
a.btn {display: inline-block; min-width: 70px; font-family: "Google Sans", sans-serif; background-color:  rgb(47, 47, 47); color: white; padding: 8px 18px; font-size: 1.1em; font-weight: normal; border-radius: 32px;}
a.btn:hover {background-color:  rgb(54, 54, 54);}
a.btn-disabled {background-color: rgb(174, 174, 174) !important; color: rgb(234, 234, 234) !important;}
a.btn-red {background-color: #D62727; color: white;}
a.btn-red:hover {background-color: #fa6d6d;}
.header-menu-item a.disabled {color: rgb(47, 47, 47) !important; pointer-events: none; text-decoration: underline;}
a.link-disabled {color: #ccc; pointer-events: none;}
.bibtexsection {padding: 4px 16px; font-family: "Courier", monospace; font-size: 15px; white-space: pre; background-color: #f4f4f4; text-align: left;}
.noselect {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.bold {font-weight: bold;}
.vbold {font-weight: bolder;}
.italic {font-style: italic;}
.underline {text-decoration: underline;}
.red {color: #D62727;}
.highlight {font-weight: bolder; font-style: italic; color: #D62727;}
.spotlight {color: #ff9900;}
.default-color {color: rgb(54, 54, 54) !important;}
footer {background-color: #efeff3; width: 100%; margin-top: 32px; padding-top: 16px; padding-bottom: 16px; text-align: center;}
/* General video styling */
.video-container video {
    height: auto;
    border-radius: 1rem;
}
.video-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px; /* Adjust the gap as needed */
}
.video-item {
    flex: 1 1 calc(50% - 16px); /* Adjust to leave space for gap */
    max-width: calc(50% - 16px); /* Ensure videos do not exceed 50% of container width */
    height: auto;
    border-radius: 1rem;
}/* PIA additions */
.content {padding: 0 16px;}
.figure-img {display: block; width: 100%; height: auto; margin: 24px auto 0; border-radius: 0.5rem;}
.figure-img.narrow {max-width: 640px;}
.caption {text-align: center; font-size: 0.95em;}
ul {line-height: 1.4em; padding-left: 1.4em;}
li {margin-bottom: 8px;}
.video-embed {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 10px;}
.video-embed iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;}
.video-placeholder {display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background-color: #efeff3; border-radius: 10px; color: rgb(120, 120, 120); font-size: 1.3em;}
.frames {display: grid; grid-template-columns: auto repeat(5, 1fr); gap: 4px; align-items: center; margin-top: 24px;}
.frames img {width: 100%; height: auto; display: block; border-radius: 4px;}
.frames-label {font-size: 0.9em; text-align: right; padding-right: 8px; line-height: 1.2em;}
.table-wrap {width: 100%; overflow-x: auto; margin: 24px 0 8px;}
table.models th {padding: 6px 4px; font-weight: bold; font-size: 0.9em;}
table.models caption {padding-bottom: 8px;}
.fig-row {display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap;}
.fig-row > * {flex: 1 1 360px; min-width: 0;}
.fig-row figure {margin: 24px 0 0;}
.fig-row figure img {width: 100%; height: auto;}
.traces {display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;}
.clips {display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px;}
.clips figure {margin: 0;}
.clips video, .figure-video {display: block; width: 100%; height: auto; border-radius: 0.5rem; background-color: #000;}
.figure-video {max-width: 720px; margin: 24px auto 0;}
figcaption {text-align: center; font-size: 0.95em; margin-top: 8px; line-height: 1.4em;}
.citation {padding-bottom: 64px; text-align: center;}
.bibtexsection {overflow-x: auto;}
@media (max-width: 600px) {
	h1 {font-size: 1.5em; padding: 0 16px;}
	h1 br {display: none;}
	p {text-align: left;}
	table.authors a {font-size: 1em;}
	.links a {margin: 4px;}
	.frames {grid-template-columns: repeat(5, 1fr);}
	.frames-label {grid-column: 1 / -1; text-align: left; padding: 8px 0 0;}
	.frames-label br {display: none;}
	.clips {grid-template-columns: 1fr;}
	.bibtexsection {font-size: 12px;}
}
