:root {
  --parchment: #eafaef;
  --dark-blue: #282b27;
  --light-blue: #76a9ad;
  --turquoise: #fcfcfc;
  --light_red: #e0433d;
  --footer-height: 251px;
  --green: #27a8a2;
  --red: #d45f64;
  --blue: #d45f64; /* WTF, this is red. TODO: semantic color names */
  --gray: #888;
  --old_event_color: #d34c53;
  --mainfont: var(--bs-font-sans-serif);
  --titlefont: var(--bs-font-sans-serif);
  --headerfont: var(--titlefont);
  --logoMaxWidth: 500px; 
  --border-rad: 5px;
  
  --planet-background: #f2f7f7;
  --planet-menu-bg: #266375;
  --planet-line-section-1: #266375;
  --planet-line-section-2: #d45f64;
  --planet-line-section-3: #e58f01;
}

body
{
  background-color: var(--planet-background);
  color: var(--dark-blue);
  font-size: 12pt;
  margin: 0pt;
  padding: 0pt;
}
html {
  margin: 0pt;
  padding: 0pt;
}

table
{
  margin-bottom: 8px;
  border-collapse: separate;
  border-spacing: 5px 0px;;
}

a
{
  color: var(--blue);
}
a:hover
{
  color: var(--light_red);
}

#banner-outer
{
  width: 100%;
}
#banner-container
{
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
    position: relative;
}

#banner-container {
    max-width: 60rem;
}
#banner-container img
{
    position: absolute;
    top: 0px;
    left:0px;
  height: 100%;
  width: 100%;
  z-index: -1;
  /*
  min-width: 100%;
  min-height: 100%;
  */
  filter: brightness(85%);
  object-fit: cover;
}

#banner-container a {
    text-decoration: none;
}
#banner-container {
    min-height: clamp(150px, 100vw/2.35, 400px);

}

#banner-text {
    position: absolute;
    top: 0.2em;
    left: 1em;
    z-index: 10;
}


#banner-text h1,
#banner-text h2 {
    text-align: left;
    color: white;
    margin: 0.2em auto;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, .9);
}

#banner-text h1 {
    /*font-size: clamp(20pt, 7vw, 40pt);*/
    font-size: clamp(20pt, 4.5vw, 28pt);
}

#banner-text h2 {
    font-size: clamp(12pt, 2.5vw, 18pt);
}

/* navigation bar */

.nav {
    line-height: 1.0;
}

#nav-border
{
  background-color: var(--planet-menu-bg);
  max-width: 100%;
  border-top:1px solid #fcfcfc;
  border-radius: 0px 0px var(--border-rad) var(--border-rad);
  box-shadow: 0px .15rem .15rem rgba(0.5,0.5,0.5,0.3);
}

#nav-border #nav a
{
  font-family: var(--headerfont);
  font-size: 14pt;
  color: #f3f3f3;
}

/* https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/ */

#page-container
{
  position: relative;
  min-height: 100vh;
  max-width: 60rem;
  margin:auto;
}

#content-wrap
{
  padding-bottom: var(--footer-height);
}

#content
{
  margin-left: auto;
  margin-right: auto;
  max-width: 95%;
  margin:auto;
  margin-left:auto;
  margin-right:auto;
}
#simple-static
{
  padding-top: 1.0em;
}


h1 {
  font-size: 1.2em;
}

h1,h2,h3,h4
{
  font-family: var(--headerfont);
}
h1, h2
{
  text-align: center;
}

/*
#landingSectionsContainer div:nth-of-type(3n+1)
{
  background-color: var(--red);
  color: var(--parchment);
}

#landingSectionsContainer div:nth-of-type(3n+2)
{
  background-color: var(--green);
}

#landingSectionsContainer div:nth-of-type(3n+0)
{
  background-color: var(--dark-blue);
  color: var(--parchment);
}

#landingSectionsContainer div:last-of-type
{
  background-color: var(--parchment);
  color: var(--dark-blue);
}
*/

#content p,table
{
  margin-left: auto;
  margin-right: auto;
}


#simple-static
{
}

#simple-static p
{
  text-align: justify;
  text-justify: inter-word;
  text-align-last: left;
}

/*
div#footer
{
  position: absolute;
  bottom: 0;
  height: var(--footer-height);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-attachment: scroll; 
  background-image: url("/images/small_image.png") ;
  width: auto;
  min-width: 100%;
}

div#footer-text-container
{
  position: relative;
  height: 100%;
  width: 100%;
}
*/

/* still not perfectly hugging the bottom... */
footer p
{
  margin: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: var(--parchment);
  width: 100%;
  position: absolute;
  bottom: 0;
  font-size: 0.7em;
}


.keynote-name
{
  font-weight: bold;
  font-size: 1.0em;
}
.keynote-affiliation
{
  font-style: italic;
  font-size: 0.9em;
}

.keynote-container
{
  overflow: hidden;
}

.keynote-container h3
{
  text-align: left;
}

.keynote-title:before
{
  content: "“";
}
.keynote-title:after
{
  content: "”";
}

.keynote-bio
{
  font-style: italic;
}


img.keynote-portrait
{
  float: left;
  min-width: 100px;
  width: 30%;
  max-width: 500px;
  shape-outside: circle(50%);
  padding: 10px;
  border-radius: 50%;
}

.keynote-text-container
{
  padding-left: 100px;
}

#simple-static .keynote-text-container p
{
  text-align: left;
  text-align-last: left;
}

.embedded-video
{
  float: left;
  width: 256px;
  height: 155px;
  margin: 20px;
  border-radius: 20px;
}

.keynote-embedded-video
{
  float: right;
  width: 256px;
  height: 155px;
  margin: 20px;
  border-radius: 20px;
}

img.graduate-school-teaser
{
  float: left;
  min-width: 200px;
  width: 40%;
  max-width: 400px;
  margin: 20px;
  border-radius: 20px;
}

table.fixed-table td
{
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 2px;
  padding-top: 2px;
  vertical-align: top;
}

td.sponsor-category
{
  font-size: 1.2em;
  font-style: italic;
  font-weight: bold;
  text-align: right;
  vertical-align: middle;
}

tr:nth-of-type(3n+2) td.sponsor-category
{
  border-right: 6px solid var(--red);
}
tr:nth-of-type(3n+1) td.sponsor-category
{
  border-right: 6px solid var(--green);
}
tr:nth-of-type(3n+0) td.sponsor-category
{
  border-right: 6px solid var(--blue);
}


ul#platinum-sponsor-list
{
  font-size: 2em;
  padding: 0;
  margin: 0;
}

ul#gold-sponsor-list
{
  font-size: 1.4em;
  padding: 0;
  margin: 0;
}

ul#silver-sponsor-list
{
  font-size: 1.0em;
  padding: 0;
  margin: 0;
}

ul#bronze-sponsor-list
{
  font-size: 0.6em;
  padding: 0;
  margin: 0;
}

ul#institutional-sponsor-list
{
  font-size: 1.0em;
  padding: 0;
  margin: 0;
}

li
{
  list-style-type: none;
}

#content-wrap h2:nth-of-type(3n+1)
{
  border-bottom: 6px solid var(--planet-line-section-1);
}
#content-wrap h2:nth-of-type(3n+2)
{
  border-bottom: 6px solid var(--planet-line-section-2);
}
#content-wrap h2:nth-of-type(3n+0)
{
  border-bottom: 6px solid var(--planet-line-section-3);
}

div#events
{
  background-color: #76a9ad;
  color: #f3f3f3;
  font-family: var(--headerfont);
  font-size: 14pt;
  text-align: center;
  text-align-last: center;
  padding: .2em;
  border-radius: 0px 0px var(--border-rad) var(--border-rad);
  box-shadow: 0px .15rem .15rem rgba(0.5,0.5,0.5,0.3);
  /*line-height: 90%;*/
}
div#events p
{
  padding-top: 5px;
  padding-bottom: 5px;
}

p#about
{
  text-align: justify;
  hyphens: auto;
  text-justify: inter-word;
  text-align-last: center;
}


.important-date-name
{
  font-style: italic;
  text-align: right;
}

.important-date-date
{
}

#simple-static p.single-line
{
  font-style: italic;
  text-align: center;
  text-justify: inter-word;
  text-align-last: center;
}

.sgp-past-year {
    display:inline-block;
    min-width:2.7em;
}
ul.past-sgps
{
  width: 100%;
  column-width: 12.5em;
}
ul.committee-list
{
  min-width: 200px;
  column-width: 25em;
  margin:auto;
  display: block;
}

ul.committee-list li
{
    /*
  webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
  padding-left: 24px;
  text-indent: -24px;
  margin-left: 0;
  margin-right: 0;
  */
  text-align: left;
  max-width: 24em;
  display: list-item;
}

ul.committee-list li table
{
  margin: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}
ul.committee-list li table td
{
  vertical-align: top;
}
blockquote ul
{
  width: 100%;
  column-width: auto;
}
blockquote ul li
{
  padding-bottom: 10px;
  list-style-type: square;
}

table.fixed-table
{
  width: 100%;
  table-layout: fixed;
  margin-left: auto;
  margin-right: auto;
}
table.chairs-table td
{
  padding-bottom: 20px;
}

.submit-now
{
  margin-top: 20px;
  font-weight: bold;
  text-align: center;
  text-justify: inter-word;
  text-align-last: center;
}

/* encourage line break */
.line {
  white-space:normal;
}

td.chairs-name{
  text-align: right;
  font-weight: bold;
  font-style: italic;
  vertical-align: top;
}
td.chairs-items ul
{
  padding: 0;
  margin: 0;
}
td.chairs-items ul li
{
  padding: 0;
  margin: 0;
}

div.poster-container
{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
img.poster
{
  max-width: 300px;
}

div.twitter-container
{
  text-align: center;
}

img.logo_institutional
{
  width: 50%;
  max-width: calc(0.5 * var(--logoMaxWidth));
  padding-bottom: 10px;
}

img.logo_bronze
{
  width: calc(max(10em, 25%));
  max-width: calc(0.5 * var(--logoMaxWidth));
  padding-bottom: 10px;
}

img.logo_silver
{
  width: calc(max(10em, 50%));
  max-width: calc(0.5 * var(--logoMaxWidth));
  padding-bottom: 10px;
}

img.logo_gold
{
  width: calc(max(10em, 75%));
  max-width: calc(0.75 * var(--logoMaxWidth));
  padding-bottom: 10px;
}

img.logo_platinum
{
  width: 100%;
  max-width: calc(1.00 * var(--logoMaxWidth));
  padding-bottom: 10px;
}

img[src$='#logo_award']
{
  width: 200px;
}

.logoDisclaimer
{
  font-size: 0.3em;
  font-style: italic;
  padding-bottom: 10px;
}

#languageBanner
{
  background-color: var(--dark-blue);
  text-align: center;
  color: var(--turquoise);
  font-style: italic;
  font-size: 0.9em;
}

#languageBanner a
{
  color: var(--turquoise);
}

#languageBanner a:hover
{
  color: var(--blue);
}

.graduate-school-container h3
{
  text-align: left;
}

ul.graduate-school-speakers
{
  column-width: auto;
  column-count: auto;
}

button
{
  color: inherit;
  background-color: inherit;
  border: none;
  font-family: var(--headerfont);
  font-size: 14pt;
  color: var(--dark-blue);
}
div.graduate-school-text-container
{
  overflow: auto;
}

#simple-static p.code-of-conduct
{
  margin-top: 20px;
  text-align: center;
  text-justify: inter-word;
  text-align-last: center;
}

.schedule
{
  border: none;
  border-radius: 10px;
  padding:       10px;
  background-color: #fff;
  width: 100%;
  min-height: 950px;
  min-width: 430px;
  margin-left: auto;
  margin-right: auto;
}

div.sessionContainer
{
  overflow: auto;
}
div.paperListContainer
{
  max-width: 800px;
  display: inline-block;
}
ul.paperList
{
  column-width: auto;
  column-count: auto;
  padding-left: 0;
}

ul.paperList li
{
  padding-top: 4px;
  padding-bottom: 4px;
}
ul.paperList li:first-of-type
{
  padding-top: 0px;
}

ul.paperList li:before
{
}

h3.sessionName
{
  text-align: left;
}
img.session-teaser
{
  width: 100%;
  border-radius: 20px;
}

table.paperTable tr td
{
  padding-bottom: 8px;
  padding-top: 8px;
}

td.teaserColumn
{
  vertical-align: top;
  width: 20%;
  min-width: 80px;
  max-width: 100px;
  padding: 0px;
  margin: 0px;
  padding-right: 20px;
}


.paper-title
{
  font-size: 1.1em;
}
.paper-title:before
{
  content: "“";
}
.paper-title:after
{
  content: "”";
}
.paper-note
{
  color: var(--gray);
}
.authorList
{
  overflow: auto;
}
.paper-author
{
  float: left;
  padding-right: 1em;
  column-width: auto;
  column-count: auto;
  font-style: italic;
  font-size: 0.9em;
}
.paper-author-affiliation
{
  color: var(--gray);
}

#program-banner
{
  background-color: var(--light-blue);
  max-width: 100%;
  border-radius: 0px 0px var(--border-rad) var(--border-rad);
}

#program-banner #program-nav a
{
  font-family: var(--headerfont);
  font-size: 1.1em;
  color: var(--turquoise);
}

#program-banner #program-nav a:after
{
  content: "↓";
}
#program-banner #program-nav a:before
{
  content: "↓";
}

.sessionChair
{
  font-size: 0.6em;
  color: var(--blue);
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.text_img_right_container {
  display: flex;
  flex-direction: row; /* Default layout: side-by-side */
  width: 100%; /* Adjust the width as necessary */
}

/* Responsive adjustments */
@media (max-width: 1100px) { /* Adjust this breakpoint as needed */
  .text_img_right_container {
    flex-direction: column; /* Stack the items on smaller screens */
  }

  .text-part, .image-part {
    flex: none; /* Override the flex settings for mobile */
    width: 100%; /* Take full width on smaller screens */
  }

  .image-part figcaption {
    text-align: center; /* Optionally adjust alignment for smaller screens */
    margin-right: 0; /* Adjust as needed for mobile */
  }
}

.text-part {
  flex: 1;  /* 2; 2/3 of the container */
  padding-right: 20px;
}

.image-part {
  flex: 1; /* 1/3 of the container */
  display: flex;
  justify-content: center; /* Center the image within the div */
  align-items: center; /* This is optional, depending on how you want to align the image vertically */
  border-radius: 10px;
  overflow: hidden;
}

.image-part img {
  width: 100%; /* Make the image fit the div. Adjust as necessary. */
  height: auto; /* Adjust the height automatically */
  border-radius: 10px;
}

.image-part figure {
  margin: 0; /* Remove margin from figure */
  width: 100%; /* Ensure figure fills the container */
}

.image-part figcaption {
  text-align: right; /* Align caption text to the right */
  margin-right: 20px; /* Adjust space on the right if needed */
}


.text_img_bottom_container {
  display: flex;
  flex-direction: column;
}

/* Text row styling */
.text-row {
  margin-bottom: 0px; 
  padding: 20px;
}

/* Images row styling */
.images-row {
  display: flex;
  justify-content: space-between; /* Adjust as needed */
}

.image-container {
  width: 50%; /* Adjust as needed */
  padding: 0 10px; /* Adjust spacing between images */
  border-radius: 10px;
}

.image-container img {
  width: 100%; /* Make the image fit the container */
  height: auto; /* Maintain aspect ratio */
  border-radius: 10px;
  margin-bottom: 20px; 
}

.responsive-image {
    max-width: 100%;
    height: auto;
}

span.event-id {
    /*font-style: italic;*/
}


a {
    background-position: left;
    background-size: 1.2em;
    background-repeat: no-repeat;
}

.past-sgps a {
    background-image: none !important;
    padding-left: 0px !important;
}

a[href^="http"] {
    background-image: url('/icons/link.svg');
    padding-left: 1.4em;

}

a[href^="tel:"] {
    background-image: url('/icons/phone-call.svg');
    padding-left: 1.4em;

}

a[href^="mailto:"] {
    background-image: url('/icons/envelope.svg');
    padding-left: 1.4em;

}
a[href$='.zip'], 
a[href$='.tar.gz'], 
a[href$='.tar.bz2'], 
a[href$='.tar.zst']
{
    background-image: url('/icons/package.svg');
    padding-left: 1.4em;
}
a[href$='.ppt'],
a[href$='.key']
{
    background-image: url('/icons/slides.svg');
    padding-left: 1.4em;
}
a.bibtex-link {
    background-image: url('/icons/file-text.svg');
    padding-left: 1.4em;
}
a.abstract-link {
    background-image: url('/icons/file-text.svg');
    padding-left: 1.4em;
}
a[href$='.pdf'] {
    background-image: url('/icons/file-pdf.svg');
    padding-left: 1.4em;
}
a.a-project-page {
    background-image: url('/icons/info.svg');
    padding-left: 1.4em;
}