/* VietCALL: tidier event page chrome.
   The header takes the brand navy and red line of the footer and login page (vietcall-footer.css).
   The top action bar becomes one slim strip on it, with the VietCALL brand on the left
   (moved there by js/vietcall-event-chrome.js) and light icon buttons.
   While a Login button is shown (nobody signed in), only the brand and that button stay.
   !important is needed throughout: the event theme CSS styles every .i-button with !important,
   and the repeated .i-button.i-button.i-button outranks its .i-button:not(...):not(...):not(...) selector. */

.page-header.page-header-dark.event-page-header {
  background: #323e69;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
html:root { --vcl-header-blue: #323e69; --conf-theme-header-bg: #323e69; } /* the theme's title band, Indico's .confheader */
.confTitleBox.confTitleBox { border-bottom: 4px solid #bb0400 !important; }
.event-page-header .main-action-bar {
  justify-content: flex-start !important;
  gap: 12px;
  min-height: 50px;
  padding: 0 16px;
}
.event-page-header .main-action-bar > .session-bar { margin-left: auto; }

.event-page-header .vc-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-right: 8px;
  color: #fff;
  text-decoration: none;
}
.event-page-header .vc-brand img {
  flex: none;
  width: auto;
  height: 28px;
}
.event-page-header .vc-brand span {
  overflow: hidden;
  color: #fff;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-page-header .vc-brand:hover span { text-decoration: underline; }
.event-page-header .main-action-bar .button-bar,
.event-page-header .main-action-bar .toolbar .group {
  align-items: center;
  gap: 2px;
}
.event-page-header .main-action-bar .i-button.i-button.i-button {
  height: 32px;
  min-width: 32px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  font-weight: 500 !important;
  line-height: 30px;
}
.event-page-header .main-action-bar .i-button.i-button.i-button::before,
.event-page-header .main-action-bar .i-button.i-button.i-button::after {
  color: #fff !important;
}
.event-page-header .main-action-bar .i-button.i-button.i-button:hover,
.event-page-header .main-action-bar .i-button.i-button.i-button:focus-visible,
.event-page-header .main-action-bar .i-button.i-button.i-button.open,
.event-page-header .main-action-bar .i-button.i-button.i-button.active {
  background: rgba(255, 255, 255, 0.14) !important;
}
/* Login: an outlined pill, the only control visitors see. */
.event-page-header .main-action-bar .toolbar a.i-button.i-button.i-button.icon-enter {
  padding: 0 16px;
  border-color: rgba(255, 255, 255, 0.6) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
.event-page-header .main-action-bar .toolbar a.i-button.i-button.i-button.icon-enter:hover,
.event-page-header .main-action-bar .toolbar a.i-button.i-button.i-button.icon-enter:focus-visible {
  border-color: #fff !important;
}

.event-page-header:has(.toolbar a.icon-enter) .main-action-bar > .button-bar,
.event-page-header:has(.toolbar a.icon-enter) #tz-selector-link,
.event-page-header:has(.toolbar a.icon-enter) #language-selector-link {
  display: none;
}
/* Indico's tooltip wrappers stretch to the bar's height and keep their link at the top, 9px above the other buttons. */
.event-page-header .main-action-bar .button-bar > ind-with-tooltip { align-items: center; }

/* Signed in, the buttons do not fit beside the logo below about 1100px: the logo keeps the navy bar and the buttons
   get a light strip of their own under it, navy on light. Nobody signed in, only the logo and Login are shown, which fit. */
@media (max-width: 1100px) {
  .event-page-header:not(:has(.toolbar a.icon-enter)) .main-action-bar {
    flex-wrap: wrap;
    gap: 0;
    height: auto;
    padding: 0;
  }
  .event-page-header:not(:has(.toolbar a.icon-enter)) .vc-brand {
    flex: 0 0 100%;
    box-sizing: border-box;
    min-height: 50px;
    margin: 0;
    padding: 0 16px;
  }
  .event-page-header:not(:has(.toolbar a.icon-enter)) .main-action-bar > .button-bar,
  .event-page-header:not(:has(.toolbar a.icon-enter)) .main-action-bar > .session-bar {
    flex: 1 1 auto;
    box-sizing: border-box;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 0 8px;
    background: #f5f6fa;
  }
  .event-page-header:not(:has(.toolbar a.icon-enter)) .main-action-bar .i-button.i-button.i-button,
  .event-page-header:not(:has(.toolbar a.icon-enter)) .main-action-bar .i-button.i-button.i-button::before,
  .event-page-header:not(:has(.toolbar a.icon-enter)) .main-action-bar .i-button.i-button.i-button::after {
    color: #323e69 !important;
  }
  .event-page-header:not(:has(.toolbar a.icon-enter)) .main-action-bar .i-button.i-button.i-button:hover,
  .event-page-header:not(:has(.toolbar a.icon-enter)) .main-action-bar .i-button.i-button.i-button:focus-visible,
  .event-page-header:not(:has(.toolbar a.icon-enter)) .main-action-bar .i-button.i-button.i-button.open,
  .event-page-header:not(:has(.toolbar a.icon-enter)) .main-action-bar .i-button.i-button.i-button.active {
    background: #dfe2ed !important;
  }
  .event-page-header:not(:has(.toolbar a.icon-enter)) .main-action-bar .separator { display: none; }
  .event-page-header:not(:has(.toolbar a.icon-enter)) { border-bottom: 1px solid #dfe2ed; }
}
/* Phones: one row of icons, spread across the width, and one row with timezone and account, cut short if need be. */
@media (max-width: 620px) {
  .event-page-header:not(:has(.toolbar a.icon-enter)) .main-action-bar > .button-bar,
  .event-page-header:not(:has(.toolbar a.icon-enter)) .main-action-bar > .session-bar {
    flex: 0 0 100%;
    padding: 0 6px;
  }
  .event-page-header:not(:has(.toolbar a.icon-enter)) .main-action-bar > .button-bar { justify-content: space-between; }
  .event-page-header:not(:has(.toolbar a.icon-enter)) .main-action-bar > .session-bar { border-top: 1px solid #dfe2ed; }
  .event-page-header:not(:has(.toolbar a.icon-enter)) .session-bar .toolbar,
  .event-page-header:not(:has(.toolbar a.icon-enter)) .session-bar .group {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }
  .event-page-header:not(:has(.toolbar a.icon-enter)) .session-bar .group { justify-content: space-between; }
  .event-page-header:not(:has(.toolbar a.icon-enter)) .main-action-bar .i-button.i-button.i-button {
    height: 40px;
    min-width: 40px;
    padding: 0 8px;
    line-height: 38px;
  }
  .event-page-header:not(:has(.toolbar a.icon-enter)) .session-bar .i-button.i-button.i-button {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* The Export popup is 358px wide and aligned to the right of its button, which cut it off on the left: here it takes the
     window's width, just under the strip. Its position comes from an inline style on the wrapper, hence the !important. */
  div:has(> .ui.popup[class*="ICSCalendarLink"]) {
    position: fixed !important;
    top: 102px !important;
    right: 8px !important;
    left: 8px !important;
    transform: none !important;
  }
  .ui.popup[class*="ICSCalendarLink"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .ui.popup[class*="ICSCalendarLink"]::before { display: none; }
}

/* Event menu: a horizontal bar above the page content, kept in view while scrolling,
   instead of the theme's floating side block (which also became a tall block on narrow screens).
   On phones it becomes a drop-down menu (see the narrow-screen block at the end).
   Paper Peer Reviewing pages keep the theme's side menu: js/vietcall-event-chrome.js marks them with
   html.vc-classic-menu, which every menu rule here excludes. */
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  z-index: 50 !important;
  overflow: visible !important; /* the theme's overflow: hidden cut the sub-menu drop-downs off */
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 0 20px !important;
  padding: 6px !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(38, 55, 70, 0.1) !important;
  transform: none !important;
}
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu nav,
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu #outer {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Wraps instead of scrolling, so the sub-menu drop-downs below are not clipped. */
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu #outer {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu #outer > li {
  position: relative;
  flex: none;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu #outer > li:not(.selected) { background: transparent !important; }
/* Sized so that all seven items of a signed-in user fit on one line of the 950px page. */
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu #outer > li > a {
  padding: 9px 10px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu #outer > li:not(.selected) > a:hover { background: #eef3f8 !important; }
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu #outer ul.inner:empty { display: none; }
/* Sub-menus (e.g. "My Conference" → "My Contributions" once signed in) drop down below their item. */
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu #outer > li:has(> ul.inner:not(:empty)) > a::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 3px 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu #outer > li > ul.inner:not(:empty) {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: none !important;
  width: max-content !important; /* Indico's .inner { width: 100% } kept it to the width of its menu item */
  min-width: 100%;
  margin: 0 !important;
  padding: 6px !important;
  border: 1px solid rgba(38, 55, 70, 0.12) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(38, 55, 70, 0.14) !important;
  list-style: none;
}
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu #outer > li:hover > ul.inner:not(:empty),
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu #outer > li:focus-within > ul.inner:not(:empty) { display: block !important; }
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu #outer ul.inner li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu #outer ul.inner li > a {
  display: block;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #263746 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu #outer ul.inner li > a:hover,
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu #outer ul.inner li.selected > a { background: #eef3f8 !important; }
/* The current section's sub-pages as a row under the bar (added by js/vietcall-event-chrome.js), e.g.
   Paper Peer Reviewing → Reviewing Area, Judging Area. Its drop-down is then not needed. */
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu .vc-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
  padding: 8px 4px 2px;
  border-top: 1px solid rgba(38, 55, 70, 0.1);
}
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu .vc-subnav a {
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: #eef3f8 !important;
  color: #323e69 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap;
}
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu .vc-subnav a:hover { background: #dfe2ed !important; }
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu .vc-subnav a[aria-current="page"] { background: #323e69 !important; color: #fff !important; }
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu #outer > li.vc-has-subnav > ul.inner:not(:empty),
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu #outer > li.vc-has-subnav:hover > ul.inner:not(:empty),
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu #outer > li.vc-has-subnav:focus-within > ul.inner:not(:empty) { display: none !important; }
html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu #outer > li.vc-has-subnav > a::after { display: none !important; }
html:not(.vc-classic-menu) #confSectionsBox > .confBodyBox { padding-left: 0 !important; }
/* Menu toggle (added by js/vietcall-event-chrome.js): only used by the phone layout below. */
.vc-menu-toggle { display: none; }
/* A reviewer's written answers, under "show ratings" on a paper page. Indico prints them as plain text, so their line
   breaks were lost on screen, and in whatever a judge copied from there into the comment for the author. */
.review-questions > li > div:last-child { white-space: pre-line; }
/* The registration form inside the Participation Registration page (js/vietcall-event-chrome.js).
   The height applies until the form reports its own, or if it never does (the frame then scrolls). */
.vc-form-embed {
  display: block;
  width: 100%;
  height: 1200px;
  border: 0;
}
/* A white card, as the form's own white column is narrower than the page. Clear of the sticky menu when scrolled to. */
.vc-form-card {
  margin-top: 16px;
  padding: 28px;
  border: 1px solid var(--vcl-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--vcl-shadow);
  scroll-margin-top: 90px;
}
@media (max-width: 600px) {
  .vc-form-card { padding: 16px 12px; }
}
/* The theme's page gradient sits on html and body, both one window tall, so it starts over every window height and
   leaves a visible line across long pages. Fixed, it is one gradient behind the whole page. */
html:root, html:root > body { background-attachment: fixed !important; }
/* Paper Peer Reviewing pages (theme side menu): the theme pads each sub-page, leaves its list white and colours every
   link in the selected section, so the sub-pages showed as red buttons in a white frame. Here they are a plain list. */
html.vc-classic-menu #confSectionsBox > .conf_leftMenu #outer > li:has(> ul.inner:not(:empty)) { padding: 0 !important; }
html.vc-classic-menu #confSectionsBox > .conf_leftMenu #outer > li:has(> ul.inner:not(:empty)) > a { padding: 14px 28px !important; }
html.vc-classic-menu #confSectionsBox > .conf_leftMenu #outer ul.inner:not(:empty) { padding: 4px 0 6px !important; }
html.vc-classic-menu #confSectionsBox > .conf_leftMenu #outer ul.inner li {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html.vc-classic-menu #confSectionsBox > .conf_leftMenu #outer ul.inner li > a {
  padding: 7px 28px 7px 42px !important;
  background: transparent !important;
  color: var(--vcl-text) !important;
  font-weight: 600 !important;
}
html.vc-classic-menu #confSectionsBox > .conf_leftMenu #outer ul.inner li > a:hover { background: var(--vcl-red-soft) !important; color: var(--vcl-red) !important; }
html.vc-classic-menu #confSectionsBox > .conf_leftMenu #outer ul.inner li.selected > a {
  background: var(--vcl-red-soft) !important;
  box-shadow: inset 3px 0 0 var(--vcl-red);
  color: var(--vcl-red) !important;
}
/* Paper Peer Reviewing pages (theme side menu): the theme floats the menu left of its 950px content column,
   which needs a window of 950 + 2 × (215 + 22) = 1424px; narrower windows cut it off on the left. Up to 1050px
   the theme already puts the menu above the content; do the same from there to 1423px, at the column's width. */
@media (min-width: 1051px) and (max-width: 1423px) {
  html.vc-classic-menu .confBodyBox { padding: 20px 18px 42px !important; }
  html.vc-classic-menu #confSectionsBox > .conf_leftMenu {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: var(--vcl-content-width, 950px) !important;
    margin: 0 auto 22px !important;
  }
}

/* The footer itself is css/vietcall-footer.css; Indico's share button there stays hidden. */
.footer ind-share-widget { display: none !important; }

/* Below the theme's 950px column (js/vietcall-event-chrome.js gives event pages the device width): the theme fixes the
   header, date line and content box at desktop widths, so let them shrink. */
@media (max-width: 960px) {
  div.confTitle.confTitle,
  div.confSubTitleContent.confSubTitleContent,
  div.confSubTitle.confSubTitle,
  .confSubTitle .datePlace,
  .confSubTitle .date,
  .confSubTitle .place,
  .confSubTitle .timezone,
  #confSectionsBox.clearfix {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  div.confTitle.confTitle { padding-left: 16px !important; padding-right: 16px !important; }
  div.confSubTitleContent.confSubTitleContent { padding-left: 16px !important; padding-right: 16px !important; }
  #confSectionsBox.clearfix { margin-left: 12px !important; margin-right: 12px !important; }
}

/* Phones: the header and date line stack as well. Indico places its pop-ups by script, a few of them slightly past the
   window's edge (Public, 3px); the page must not move sideways because of that. */
@media (max-width: 760px) {
  html:root { overflow-x: clip; }
  div.confTitle.confTitle { padding: 16px 16px 18px !important; }
  div.confTitle h1,
  div.confTitle .conference-title-link,
  div.confTitle .conference-title-link span {
    font-size: 22px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }
  div.confSubTitleContent.confSubTitleContent {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
    padding: 12px 16px !important;
  }
  div.confSubTitleContent > .search-box { width: 100% !important; }
  #confSectionsBox.clearfix { margin: 16px 12px 0 !important; }
  /* Overview text written by the organizers puts 300px boxes side by side: let them wrap. */
  .conferenceDetails .description [style*="display: flex"] { flex-wrap: wrap; gap: 16px; }
  /* Indico's own session timetable is drawn 710px wide: scroll it inside its box. */
  #session-timetable #timetable { max-width: 100%; overflow-x: auto; }
  /* The logo alone says VietCALL on a phone; the full name would crowd out Login. */
  .event-page-header .vc-brand span { display: none; }

  /* Event menu as a drop-down: one bar naming the current page, the full list when opened. */
  html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu .vc-menu-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0 14px;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #263746 !important;
    font: inherit;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: left;
    cursor: pointer;
  }
  /* Hamburger icon and chevron, drawn with CSS so nothing extra is loaded. */
  .vc-menu-toggle::before {
    content: '';
    flex: none;
    width: 18px;
    height: 12px;
    background: linear-gradient(currentColor, currentColor) top / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) bottom / 100% 2px no-repeat;
  }
  .vc-menu-toggle span { flex: 1; }
  .vc-menu-toggle::after {
    content: '';
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.15s;
  }
  .vc-menu-open .vc-menu-toggle::after { transform: translateY(2px) rotate(-135deg); }
  html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu #outer { display: none !important; }
  html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu.vc-menu-open #outer {
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(38, 55, 70, 0.1) !important;
  }
  html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu.vc-menu-open #outer { align-items: stretch; }
  html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu.vc-menu-open #outer > li > a { display: block; padding: 12px 14px !important; font-size: 15px !important; }
  /* Sub-menu items sit indented under their item instead of dropping down. */
  html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu.vc-menu-open #outer > li > ul.inner:not(:empty) {
    position: static;
    display: block !important;
    width: auto !important;
    padding: 0 0 4px 14px !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html:not(.vc-classic-menu) #confSectionsBox > .conf_leftMenu #outer > li:has(> ul.inner:not(:empty)) > a::after { display: none; }
}