@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* -------------------------------------------------------
   ACPC 2026
   ------------------------------------------------------- */

:root {
  --cloud-color: #567D9C;
  --arrow-orange: #F9AE00;
  --header-background: #EFF3F7;
}


/* ----------- Global font settings ----------- */

html,
body,
.conf,
.conference-page,
#wrapper {
  font-family: "Roboto", Arial, sans-serif;
}


/* ----------- Conference wrapper ----------- */

.conf {
  width: 100%;
  border: none;
  margin: 0 auto;
}


/* ----------- Complete conference header ----------- */

.confheader {
  position: relative;
}


/* ----------- Conference title area ----------- */

.confTitleBox {
  color: #282828;

  min-height: 205px;

  border-top: none;
  border-bottom: 1px solid #d9e1e7;

  background: var(--header-background);
}


.confTitle {
  width: 970px;
  min-height: 205px;

  margin: 0 auto;

  padding: 25px 0 35px 0;

  box-sizing: border-box;

  background: var(--header-background);
}


/* Remove default heading spacing */

.confTitle h1 {
  margin: 0;
  padding: 0;

  font-size: inherit;
  line-height: inherit;
}


/* ----------- Logo + title row ----------- */

.conference-title-link {
  display: flex !important;

  align-items: center;
  justify-content: flex-start;

  gap: 35px;

  width: 100%;

  margin: 0;
  padding: 0;

  text-align: left;

  font-family: "Roboto", Arial, sans-serif;

  font-variant: normal;
  font-weight: 500;

  color: var(--cloud-color) !important;
}


.conference-title-link:hover,
.conference-title-link:link,
.conference-title-link:visited {
  color: var(--cloud-color) !important;
}


/* ----------- Logo ----------- */

.confLogoBox {
  position: static !important;

  float: none !important;

  flex: 0 0 180px;

  width: 180px;

  margin: 0;
  padding: 0;

  text-align: left;
}


.confLogoBox img {
  display: block;

  width: 180px;
  max-width: 180px;

  height: auto !important;
  max-height: none;

  object-fit: contain;
}


/* ----------- Event title text ----------- */

.conference-title-link span[itemprop="title"] {
  position: static !important;

  display: block;

  flex: 0 1 680px;

  max-width: 680px;

  margin: 0;
  padding: 0;

  font-family: "Roboto", Arial, sans-serif;

  font-size: 24pt;
  line-height: 1.1;

  font-weight: 500;
  font-variant: normal;

  text-align: left;

  color: var(--cloud-color) !important;
}


/* ----------- Subtitle / date line ----------- */

/*
The normal Indico subtitle block is moved visually
into the main header.

190px = logo width + gap:
180px logo + 35px gap, with a small adjustment
for the different container widths.
*/

.confSubTitleBox {
  position: absolute;

  top: 160px;
  left: 0;

  width: 100%;

  z-index: 2;

  background: transparent;

  border: none;

  padding: 0;
  margin: 0;
}


.confSubTitleContent {
  width: 970px;

  height: auto;
  min-height: 24px;

  margin: 0 auto;

  padding-left: 215px;

  box-sizing: border-box;

  font-family: "Roboto", Arial, sans-serif;

  font-size: 13pt;

  color: #444444;
}


/* Hide original Indico date/location text */

.datePlace {
  font-size: 0;

  font-weight: 700;

  color: #444444;
}


/* Custom subtitle */

.datePlace::before {
  content: "Hamburg, September 28-30, 2026";

  display: block;

  font-family: "Roboto", Arial, sans-serif;

  font-size: 13pt;
  line-height: 1.2;

  font-weight: 400;

  color: #444444;
}


.datePlace .timezone {
  display: none;
}


.confSubTitle a {
  font-size: 11pt;
}


/* ----------- Remove search bar completely ----------- */

.confSearchBox,
.confSearchBox .searchButton,
.confSearchBox .searchField {
  display: none !important;
}


.confSearchBox {
  float: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
}


/* ----------- Announcement ----------- */

.simpleTextAnnouncement {
  position: relative;

  background: #FFFEF8;

  border-top: 1px solid #eeeeea;
  border-bottom: 1px solid #eeeeea;

  font-family: "Roboto", Arial, sans-serif;

  font-weight: bold;
  font-size: 10pt;

  text-align: center;

  color: var(--arrow-orange);

  padding: 8px 0;
}


/* ----------- Main content ----------- */

#confSectionsBox {
  width: 950px;

  margin: 30px auto 0 auto;
}


/* ----------- Left menu ----------- */

.conf_leftMenu {
  float: left;

  width: 200px;
}


#outer {
  border: 1px solid #ccc;

  background: #f6f6f6;
}


#outer li a {
  font-family: "Roboto", Arial, sans-serif;

  font-size: 10pt;
}


#outer li a:hover {
  background: #e0e0e0;
}


.menuConfTitle {
  text-align: left;
}


.menuConfTitle a {
  color: #282828;

  padding: 7px 12px;
}


/* ----------- Selected menu item ----------- */

.menuConfTitle.selected > a,
.menuConfMiddleCell.selected > a {
  color: var(--cloud-color);

  font-weight: bold;

  background: #dadada;

  border-bottom: 1px solid #d0d0d0;
  border-top: 1px solid #d0d0d0;
}


/* ----------- Submenu item ----------- */

li ul.inner li a {
  padding: 3px 12px 3px 30px;

  background:
    transparent
    url(/images/conf/left_menu_bullet.png)
    scroll
    no-repeat
    15px center;
}


/* ----------- Contact box ----------- */

.support_box {
  background: #f6f6f6;

  border: 1px solid #ccc;
}


.support_box > h3 {
  color: #ffffff;

  font-family: "Roboto", Arial, sans-serif;

  font-size: 15px;
  font-weight: bold;

  background: var(--cloud-color);
}


/* ----------- General links ----------- */

a,
.fake-link,
.ui-widget-content a {
  color: var(--cloud-color);
}


a:hover,
.fake-link:hover,
.ui-widget-content a:hover {
  color: var(--cloud-color);

  cursor: pointer;
}


a:link,
a:visited,
.fake-link:link,
.fake-link:visited,
.ui-widget-content a:link,
.ui-widget-content a:visited {
  text-decoration: none;
}


/* ----------- Page content ----------- */

.confBodyBox {
  background: #ffffff;

  margin-left: 230px;
}


/* ----------- Registration call box ----------- */

.action-box.highlight {
  border: 1px solid var(--cloud-color);

  background: #ffffff;

  color: #777;
}


.action-box.highlight
.section:not(.highlight):not(.warning):not(.danger):not(.disabled):not(.accept):not(.plain)
> .icon {
  color: #282828;
}


.action-box.highlight
.section:not(.highlight):not(.warning):not(.danger):not(.disabled):not(.accept):not(.plain)
.text
.label {
  color: #282828;
}


.action-box.highlight
.section:not(.highlight):not(.warning):not(.danger):not(.disabled):not(.accept):not(.plain)
> .sui-icon-wrapper {
  color: #282828;
}


/* ----------- Registration/action buttons ----------- */

.i-button.highlight:not(.label):not(.borderless):not(.text-color),
.i-selection input[type='checkbox']:checked
+ label:not(.label):not(.borderless):not(.text-color),
.i-selection input[type='radio']:checked
+ label:not(.label):not(.borderless):not(.text-color),
.categorynav
.category-list
.item
.button-wrapper
.action-button:not(.label):not(.borderless):not(.text-color),
.action-button:not(.label):not(.borderless):not(.text-color) {

  background: var(--cloud-color);

  border-color: var(--cloud-color);

  color: #ffffff;
}


.i-button.highlight:not(.label):not(.borderless):not(.text-color):hover,
.i-selection input[type='checkbox']:checked
+ label:not(.label):not(.borderless):not(.text-color):hover,
.i-selection input[type='radio']:checked
+ label:not(.label):not(.borderless):not(.text-color):hover,
.action-button:not(.label):not(.borderless):not(.text-color):hover {

  background: var(--cloud-color);

  border-color: var(--cloud-color);
}


/* ----------- Content headings ----------- */

.conference-page header h2 {
  color: var(--cloud-color);

  font-family: "Roboto", Arial, sans-serif;
}


.conference-page header h3 {
  color: var(--cloud-color);

  font-family: "Roboto", Arial, sans-serif;
}


/* ----------- Responsive layout ----------- */

@media (max-width: 1000px) {

  .confTitle,
  .confSubTitleContent,
  #confSectionsBox {
    width: calc(100% - 40px);
  }


  .conference-title-link span[itemprop="title"] {
    flex: 1;

    max-width: none;
  }

}


@media (max-width: 700px) {

  .confTitleBox {
    min-height: 300px;
  }


  .confTitle {
    min-height: 300px;

    padding: 20px 0 60px 0;
  }


  .conference-title-link {
    display: block !important;
  }


  .confLogoBox {
    width: 150px;

    margin-bottom: 15px;
  }


  .confLogoBox img {
    width: 150px;
    max-width: 150px;
  }


  .conference-title-link span[itemprop="title"] {
    width: 100%;

    max-width: none;

    padding: 0;

    font-size: 21pt;
    line-height: 1.15;
  }


  .confSubTitleBox {
    top: 245px;
  }


  .confSubTitleContent {
    padding-left: 0;
  }

}