:root {
  /* Primary Branding Colors */
  --color-primary: #fd1d3d;
  --color-secondary: #fd1d3d;
  --color-accent: #198754;

  /* Backgrounds */
  --bg-white: #FFFFFF;
  --bg-lightGray: #e3dddd;
  --bg-dark: #121212;
  --arrow-bg:rgba(0,0,0,0.6);

  /* Text Colors */
  --text-primary: #212529;
  --text-secondary: #777;
  --text-black:#000;
  --text-white:#fff;

  /* Text commun Color both themes */
  --text-com-primary: #212529;
  --text-com-secondary: #777;

  /* UI Elements */
  --color-border: rgba(0, 0, 0, 0.175);
  --modal-bg:rgb(255 255 255 / 85%);
  --ml-hover-color:#f39a3d;
}

.material-modal .modal-dialog {
  max-width: 1100px;
  max-height: calc(100vh - 40px);
  margin: 20px auto;
  overflow: hidden;
}

.material-modal.modal {
  overflow: hidden !important;
}

/* Lock page scroll while any Bootstrap modal is open */
html.modal-open,
body.modal-open {
  overflow: hidden !important;
  height: 100% !important;
  touch-action: none;
}
body.modal-open .wrapper {
  overflow: hidden !important;
}

.material-modal .modal-content {
  width: 100%;
  height: calc(100vh - 40px);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e8edf3;
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 4px 6px rgba(15, 23, 42, 0.04),
    0 24px 48px rgba(15, 23, 42, 0.12);
  position: relative;
  min-height: 420px;
}

.material-modal .modal-content.is-loading > :not(.spk-modal-loader) {
  visibility: hidden !important;
  pointer-events: none !important;
}

.spk-modal-loader {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  -webkit-user-select: none;
  user-select: none;
}

.spk-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  max-width: 92%;
}

.spk-logo-loader {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
}

.spk-logo-loader img {
  width: min(420px, 80vw);
  height: auto;
  object-fit: contain;
  display: block;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.spk-loader-countdown {
  font-size: 56px;
  font-weight: 800;
  color: #fd1d3d !important;
  background: transparent !important;
  line-height: 1;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  min-width: 1.2em;
  text-align: center;
  text-shadow: 0 0 18px rgba(253, 29, 61, 0.35);
  border: 0 !important;
  outline: 0 !important;
  padding: 0;
  margin: 0;
}

.spk-loader-countdown-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #64748b;
  margin-top: -18px;
  background: transparent !important;
}

/* Trending 4-dot orbit under logo */
.spk-dot-orbit {
  --spk-orbit-size: 72px;
  position: relative;
  width: var(--spk-orbit-size);
  height: var(--spk-orbit-size);
  margin-top: 4px;
  animation: spkDotOrbitSpin 1.15s linear infinite;
}

.spk-dot-orbit span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px;
  border-radius: 50%;
  background: #9ca3af;
  transform-origin: center;
}

.spk-dot-orbit span::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  box-shadow: inherit;
  animation: spkDotChase 1.15s ease-in-out infinite;
}

.spk-dot-orbit span:nth-child(1) {
  transform: rotate(0deg) translateY(calc(var(--spk-orbit-size) / -2));
  background: #fd1d3d;
  box-shadow: 0 0 10px rgba(253, 29, 61, 0.7);
}
.spk-dot-orbit span:nth-child(1)::after { animation-delay: 0s; }
.spk-dot-orbit span:nth-child(2) {
  transform: rotate(90deg) translateY(calc(var(--spk-orbit-size) / -2));
}
.spk-dot-orbit span:nth-child(2)::after { animation-delay: 0.15s; }
.spk-dot-orbit span:nth-child(3) {
  transform: rotate(180deg) translateY(calc(var(--spk-orbit-size) / -2));
  background: #fd1d3d;
  box-shadow: 0 0 8px rgba(253, 29, 61, 0.45);
}
.spk-dot-orbit span:nth-child(3)::after { animation-delay: 0.3s; }
.spk-dot-orbit span:nth-child(4) {
  transform: rotate(270deg) translateY(calc(var(--spk-orbit-size) / -2));
}
.spk-dot-orbit span:nth-child(4)::after { animation-delay: 0.45s; }

@keyframes spkDotOrbitSpin {
  to { transform: rotate(360deg); }
}

@keyframes spkDotChase {
  0%, 100% { opacity: 0.35; transform: scale(0.75); }
  50% { opacity: 1; transform: scale(1.25); }
}

/* close button: sits on the header image, so a dark see-through disc with a
   white ✕ stays readable on any banner without hiding its logos */
.material-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  border-radius: 50%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.material-close:hover,
.material-close:focus-visible {
  background: var(--color-secondary);
  border-color: #fff;
  color: #fff;
  transform: scale(1.08);
  outline: none;
}

/* ===== HEADER ===== */
.modal-header-img {
  width: 100%;
  max-height: 120px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  background: #f8fafc;
  border-bottom: 1px solid #eef2f7;
}

/* ===== BODY ===== */
.material-modal .modal-body {
  padding: 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.material-modal #innerpopupvideo {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.material-modal .modal-body .row.h-100,
.material-modal .spk-modal-row {
  flex: 1 1 auto;
  height: 100% !important;
  min-height: 0;
  max-height: 100%;
  align-items: stretch !important;
}

.modal-body .row.h-100 {
  height: 100% !important;
  min-height: 0;
}

/* ===== COMMON BOX ===== */
.secBox {
  border-radius: 14px;
  box-shadow: none;
  border: 1px solid #e8edf3;
  overflow: hidden;
  background: #ffffff;
}

.secBox-heading {
  font-weight: 600;
  padding: 11px 14px;
  color: var(--text-white);
  background: var(--color-primary);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  flex-shrink: 0;
}
.secBox-heading h6 {
  color: var(--text-white);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .15px;
  line-height: 1.35;
}
.secBox-heading .material-symbols-rounded { font-size: 22px; cursor: pointer; color: #fff; }
.secBox-heading #swapBtn,
.secBox-heading .swap-icon,
.secBox-heading .fa-exchange-alt {
  color: #fff;
  font-size: 14px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.secBox-heading #swapBtn:hover,
.secBox-heading .swap-icon:hover,
.secBox-heading .fa-exchange-alt:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.28);
}
.session-content {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 44px;
  padding: 10px 36px 10px 14px;
  text-align: left;
  border-bottom: 1px solid #eef2f7;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
  line-height: 1.45;
}
.session-content .session-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 4px;
}

/* ===== LEFT + RIGHT equal height columns ===== */
.material-modal .secBoxVideo,
.material-modal .secBoxImageRight {
  display: flex !important;
  flex-direction: column;
  align-self: stretch;
  min-height: 0 !important;
  height: auto !important;
  max-height: 100%;
}

.secBoxVideo #secBoxVideo {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.secBoxVideo #secBoxVideo #videoSlider {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.secBoxVideo #secBoxVideo #videoSlider .carousel-inner,
.secBoxVideo #secBoxVideo #videoSlider .carousel-item {
  position: absolute;
  inset: 0;
  height: 100% !important;
  width: 100%;
}
.secBoxVideo #secBoxVideo video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0f172a;
}
.secBoxVideo .speakerInfo {
  flex: 0 0 auto;
  margin-top: 12px !important;
}

/* Swapped layout: video (+ name) on right, image on left */
.spk-modal-row.spk-swapped #secBoxImage {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.spk-modal-row.spk-swapped #secBoxImage > .secBox-heading {
  flex: 0 0 auto;
  border-radius: 14px 14px 0 0;
}
.spk-modal-row.spk-swapped #secBoxImage > #videoSlider {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.spk-modal-row.spk-swapped #secBoxImage > #videoSlider .carousel-inner,
.spk-modal-row.spk-swapped #secBoxImage > #videoSlider .carousel-item {
  position: absolute;
  inset: 0;
  height: 100% !important;
  width: 100%;
}
.spk-modal-row.spk-swapped #secBoxImage > #videoSlider video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0f172a;
}
.spk-modal-row.spk-swapped #secBoxVideo {
  display: flex !important;
  flex-direction: column !important;
}
.spk-modal-row.spk-swapped #secBoxVideo > #imageSlider {
  flex: 1 1 0;
  min-height: 0;
  height: 100% !important;
  position: relative;
  overflow: hidden;
}
.spk-modal-row.spk-swapped #secBoxVideo > #imageSlider .carousel-inner,
.spk-modal-row.spk-swapped #secBoxVideo > #imageSlider .carousel-item {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.spk-modal-row.spk-swapped #secBoxVideo > #imageSlider .modal-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* ===== RIGHT COLUMN — same total height as left ===== */
.secBoxImageRight {
  min-height: 0;
}
.secBoxImageRight > .secBox,
.secBoxImageRight > .fixed-slider-box {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  width: 100%;
  max-width: none;
  position: relative;
  overflow: hidden;
}
.session-text{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;   /* long text: 2 lines + ellipsis; the (i) icon then shows the full text */
  line-height: 1.45em;
  max-width: 100%;
  color: #334155;
  text-align: center;
}
.session-text strong{
  white-space: nowrap;
  font-weight: 600;
  color: #0f172a;
  margin-right: 4px;
}
.session-content:last-child {border-bottom: none;}
.info-icon-sup {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  cursor: pointer;
  font-size: 14px !important;
  z-index: 5;
  transition: color .15s ease;
}
.info-icon-sup:hover { color: var(--color-primary); }
.info-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  cursor: pointer;
  font-size: 14px !important;
  z-index: 5;
  flex-shrink: 0;
  transition: color .15s ease;
}
.info-icon:hover { color: var(--color-primary); }
.tooltip {
  z-index: 2000 !important;
}
.tooltip-inner {
  max-width: 500px !important;
  white-space: normal !important;
  padding: 10px 12px;
  font-size: 13px;
  background: #0f172a;
  border-radius: 8px;
}
.speaker {
  background: #fff5f6;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  border-left: 3px solid var(--color-secondary);
  justify-content: flex-start;
}
.speaker span{color:#0f172a;}
/* ===== VIDEO ===== */
.material-modal video {
  width: 100%;
  display: block;
  margin: 0;
  border-radius: 0;
  background: #0f172a;
}

/* ===== IMAGE SLIDER ===== */
.modal-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  background: #f1f5f9;
  display: block;
}

/* Right PPT/image must fill the full column — no top/bottom gaps */
.secBoxImageRight .fixed-slider-box,
.secBoxImageRight #secBoxImage {
  position: relative !important;
  overflow: hidden !important;
  background: #0f172a !important;
}
.secBoxImageRight .carousel,
.secBoxImageRight #imageSlider {
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.secBoxImageRight .carousel-inner,
.secBoxImageRight #imageSlider .carousel-inner {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}
.secBoxImageRight .carousel-item,
.secBoxImageRight #imageSlider .carousel-item {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  float: none !important;
  margin-right: 0 !important;
}
.secBoxImageRight .modal-img,
.secBoxImageRight #imageSlider .modal-img,
.fixed-slider-box .modal-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* ===== LEFT CARD ===== */
.speakerInfo {
  margin-top: 12px;
  font-size: 13px;
}
.speakerInfo > .secBox-heading {
  text-align: center !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text-white);
}

.session,
.designation {
  margin-bottom: 6px;
}

/* ===== CAROUSEL ARROWS ===== */
.material-modal .carousel-control-prev,
.material-modal .carousel-control-next {
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  transition: opacity .18s ease, background .15s ease, transform .15s ease;
}
.material-modal .carousel-control-prev { left: 10px; }
.material-modal .carousel-control-next { right: 10px; }
.material-modal .carousel:hover .carousel-control-prev,
.material-modal .carousel:hover .carousel-control-next { opacity: 1; }
.material-modal .carousel-control-prev:hover,
.material-modal .carousel-control-next:hover {
  background: #ffffff;
  transform: translateY(-50%) scale(1.05);
}
.material-modal .carousel-control-prev i,
.material-modal .carousel-control-next i {
  color: #0f172a;
  font-size: 15px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .material-modal .modal-body {
    overflow-y: auto;
  }
}



/* Hall Card */
.hall-card {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
}

/* Hall Header */
.hall-header {
  width: 100%;
  border: none;
  padding: 12px 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-left: 4px solid var(--color-secondary);
}

/* Session Card */
.session-card {
  border-left: 4px solid var(--color-accent);
  background: #f5f5f5;
  margin: 8px 12px;
  border-radius: 4px;
}

/* Session Header */
.session-header.active {
  font-weight: 600;
  border-bottom: 1px dashed var(--color-border);
}
.session-header {
  width: 100%;
  background: none;
  border: none;
  padding: 12px 14px;
  font-size: 16px;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Arrow */
.material-symbols-rounded {
  font-size: 20px;
  transition: transform 0.3s ease;
}

/* Rotate Arrow */
button[aria-expanded="true"] .arrow {
  transform: rotate(180deg);
}



.speaker-card {
  border-bottom: 1px dashed var(--color-border);
  padding: 12px;
  gap: 14px;
}
.speaker-card:hover{
  background: var(--bg-white);
  cursor: pointer;
}
.speaker-card:last-child{border-bottom: none;}

/* Avatar */
.avatar-box {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 4px;
}
.avatar-box img{border-radius: 4px;}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 6px;
  display: inline-block;
}

/* Text */
.speaker-heading {
  font-size: 16px;
  font-weight: 600;
}

.speaker-name {
  font-size: 14px;
  font-weight: 600;
  color: #212529;
}

.speaker-designation {
  font-size: 12px;
  color: var(--text-com-secondary);
}

/* Time */
.speaker-time {
  font-size: 12px;
  border: 1px solid var(--color-border);
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Divider */
.dashed-divider {
  border-top: 1px dashed var(--color-border);
  margin: 8px 0;
  opacity: 1;
}

/* Tags */
.speaker-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.speaker-tags span {
  font-size: 11px;
  border: 1px solid var(--color-border);
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--text-com-secondary);
}

.logo-card-header {
    padding: 11px 14px;
    text-align: center;
    font-weight: 600;
    border-bottom: none;
    font-size: 12px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-white);
    background: var(--color-primary);
    border-radius: 14px 14px 0 0;
    flex-shrink: 0;
}
.logo-card-body {
    padding: 16px 20px;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== AUDIO MODAL: left 50/50 cards + equal right height ===== */
.material-modal #innerpopupaudio {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.material-modal .audioLeftCol,
.material-modal .audioRightCol {
  display: flex !important;
  flex-direction: column;
  align-self: stretch !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100%;
}
.material-modal .audioLeftCol.has-logo-card {
  gap: 12px;
}
.material-modal .audioLeftCol.has-logo-card > .speakerInfo,
.material-modal .audioLeftCol.has-logo-card > .logo-card {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.material-modal .audioLeftCol.has-logo-card > .speakerInfo {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  flex: 0 1 auto !important;   /* content height; the logo card takes the rest */
}
.material-modal .audioLeftCol:not(.has-logo-card) > .speakerInfo {
  flex: 0 0 auto;   /* only as tall as its content — no empty box down to the bottom */
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.material-modal .audioLeftCol .speakerInfo .session-content,
.material-modal .audioLeftCol .speakerInfo .secBox-heading {
  flex-shrink: 0;
}
.material-modal .audioLeftCol .logo-card {
  overflow: hidden;
}
.material-modal .audioRightCol > .fixed-slider-box,
.material-modal .audioRightCol > .secBox {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  width: 100%;
  max-width: none;
}
#secBoxAudioImage,
#secBoxAudioImage #imageSlider1 {
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #0f172a !important;
}
#secBoxAudioImage #imageSlider1 .carousel-inner {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
#secBoxAudioImage #imageSlider1 .carousel-item {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  float: none !important;
  margin-right: 0 !important;
}
#secBoxAudioImage #imageSlider1 .modal-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
}
.logo-card-body .carousel,
.logo-card-body .carousel-inner {
    width: 100%;
    height: 100%;
}
.logo-card-body .carousel {
    height: 100%;
    min-height: 100px;
}
.logo-card-body .carousel-inner {
    position: relative;
    height: 100%;
    min-height: 100px;
}
.logo-card-body .carousel-item {
    min-height: 100px;
    height: 100%;
    text-align: center;
}
.logo-card-body .carousel-item.active,
.logo-card-body .carousel-item-next,
.logo-card-body .carousel-item-prev {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.logo-img {
    width: auto;
    max-width: 220px;
    height: 72px;
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
    display: block;
}
.youtubeImage .logo-img {
  max-width: 220px;
  height: 72px;
  object-fit: contain;
}

/* ===== YOUTUBE MODAL: equal columns, no empty bottom space ===== */
#youtubeVideo.material-modal .modal-content {
  height: auto !important;
  max-height: calc(100vh - 40px);
  min-height: 0;
}
#youtubeVideo.material-modal .modal-body {
  flex: 0 1 auto;
  overflow: auto;
}
#youtubeVideo .yt-modal-row {
  height: auto !important;
  flex: 0 1 auto !important;
  align-items: stretch !important;
  min-height: 0;
}
#youtubeVideo .yt-left-col,
#youtubeVideo .yt-right-col {
  display: flex !important;
  flex-direction: column;
  align-self: stretch !important;
  min-height: 0;
}
#youtubeVideo .yt-video-box {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
#youtubeVideo .yt-video-box .carousel,
#youtubeVideo .yt-video-box .carousel-inner,
#youtubeVideo .yt-video-box .carousel-item.active {
  flex: 1 1 auto;
  height: 100% !important;
  min-height: 0;
  display: flex !important;
  flex-direction: column;
}
#youtubeVideo .yt-video-frame {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 260px;
  background: #0f172a;
}
#youtubeVideo .yt-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
#youtubeVideo .yt-right-col {
  gap: 12px;
}
#youtubeVideo .yt-right-col > .speakerInfo,
#youtubeVideo .yt-right-col > .logo-card {
  flex: 0 0 auto;
  overflow: visible;
  margin: 0 !important;
  display: block;
}
#youtubeVideo .yt-right-col > .logo-card {
  display: flex;
  flex-direction: column;
}
#youtubeVideo .yt-right-col > .logo-card .logo-card-body {
  flex: 0 0 auto;
  min-height: 90px;
}


/* bottom overlay */
.progress-sec{
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  padding:12px 14px;
  background:rgba(255,255,255,.94);
  border-top:1px solid #eef2f7;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius:0 0 12px 12px;
  z-index:2;
}
.progress-sec audio {
  filter: none;
}
/* progress */
.ppt-progress{
  flex:1;
  height:4px;
  background:rgba(255,255,255,.35);
  border-radius:10px;
  position:relative;
  cursor:pointer;
}

.ppt-dot{
  position:absolute;
  top:50%;
  left:0%;
  transform:translate(-50%,-50%);
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.15);
}
.ppt-control span{color:#fff;}

.carousel-control-prev, .carousel-control-next {
  width: 38px !important;
  height: 38px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 50%;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}
.carousel-control-next {
    right: 10px !important;
}
.carousel-control-prev {
    left: 10px !important;
}
.carousel-control-prev i,
.carousel-control-next i {
  color: #0f172a !important;
}

.fixed-slider-box {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e8edf3;
  background: #0f172a;
}

.fixed-slider-box .carousel,
.fixed-slider-box .carousel-inner,
.fixed-slider-box .carousel-item {
  height: 100%;
  min-height: 0;
}

.fixed-slider-box .carousel-item {
  position: relative;
}

.fixed-slider-box .modal-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
}
/* PPT slides are shown whole (contain), never cropped; the spare space is white like a slide */
.modal .modal-img,
#innerpopupvideo .modal-img {
  object-fit: contain !important;
  object-position: center center !important;
  background: #fff !important;
}

/* ===== Tablets / phones (Safari): fit the popup to the VISIBLE screen =====
   100vh there includes the part behind the address / tab bar, so the popup was
   taller than the screen and its bottom (video controls) was cut off.
   100dvh is the visible height; older browsers keep the 100vh rules above. */
@supports (height: 100dvh) {
  .material-modal .modal-dialog { max-height: calc(100dvh - 24px); margin: 12px auto; }
  .material-modal .modal-content { height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); }
  #youtubeVideo.material-modal .modal-content { height: auto !important; max-height: calc(100dvh - 24px); }
}
/* short screens (tablet landscape): the info boxes scroll instead of being cut */
@media (max-height: 860px) {
  .material-modal .speakerInfo { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .material-modal .modal-header-img, .material-modal .modal-text-banner { max-height: 90px; }
  .material-modal .modal-text-banner { height: 90px; }
}

/* ===== Popups: same space above and below the content =====
   The row's vertical gutter (g-3: -16px on the row, +16px on the columns) with a
   100% height pushed the content up and left an extra 16px at the bottom. */
.material-modal .spk-modal-row { --bs-gutter-y: 0; margin-top: 0 !important; row-gap: 12px; }
.material-modal .spk-modal-row > * { margin-top: 0 !important; }
/* while the popup loads, the video's own control bar / subtitle chips stay hidden (they showed over the loader) */
.material-modal .modal-content.is-loading .vhc-bar,
.material-modal .modal-content.is-loading .vhc-sub,
.material-modal .modal-content.is-loading .vhc-auto,
.material-modal .modal-content.is-loading .vhc-auto-hint,
.material-modal .modal-content.is-loading .vhc-cc-wrap { display: none !important; }

/* ===== Popups: Full screen button =====
   Next to the ✕, same look. Hidden until the script finds the browser allows
   full screen for a page element (iPad Safari, desktop; not iPhone). */
.material-fs {
  position: absolute; top: 10px; right: 50px; z-index: 10;
  width: 32px; height: 32px; padding: 0; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: 13px; line-height: 1;
  display: none; justify-content: center; align-items: center;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25); cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.evx-fs-ok .material-fs { display: flex; }
.material-fs:hover, .material-fs:focus-visible { background: var(--color-secondary); border-color: #fff; transform: scale(1.08); outline: none; }
.material-modal .modal-content.is-loading .material-fs { display: none !important; }
/* the popup in full screen: the whole screen, same layout inside
   (kept as separate rules: an unknown selector would drop the whole rule) */
.material-modal .modal-content:fullscreen {
  width: 100vw !important; height: 100vh !important; max-width: none !important; max-height: none !important;
  border-radius: 0 !important; overflow-y: auto;
}
.material-modal .modal-content:-webkit-full-screen {
  width: 100vw !important; height: 100vh !important; max-width: none !important; max-height: none !important;
  border-radius: 0 !important; overflow-y: auto;
}
#youtubeVideo.material-modal .modal-content:fullscreen { height: 100vh !important; max-height: none !important; }
#youtubeVideo.material-modal .modal-content:-webkit-full-screen { height: 100vh !important; max-height: none !important; }

/* ===== Popups: the whole banner, full width, with space above it =====
   "cover" filled a fixed strip and cut the banner's top and bottom (logos, text).
   Now the banner takes the popup's full width and its height follows the image
   (nothing is cut), with 8px of white above and below. Only a very tall banner
   hits the cap and is then shown whole with white at the sides.
   Recommended upload: 2200 × 180 px (admin → event → Popup Banner). */
.material-modal .modal-header-img {
  width: 100%; height: auto; max-height: 196px; object-fit: contain; object-position: center;
  padding: 8px 0; background: #fff;
}
@media (max-height: 860px) {
  .material-modal .modal-header-img { max-height: 166px; }
}

/* ===== YouTube popup in full screen: use the whole screen =====
   Normally it is as tall as its content (height:auto above); in full screen the
   body, the row and both columns stretch, so the video grows and the speaker's
   card on the right fills the rest (kept as separate rules for each prefix). */
#youtubeVideo .modal-content:fullscreen .modal-body { flex: 1 1 auto !important; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#youtubeVideo .modal-content:fullscreen .yt-modal-row { flex: 1 1 auto !important; min-height: 0; }
#youtubeVideo .modal-content:fullscreen .yt-right-col { overflow-y: auto; }
#youtubeVideo .modal-content:-webkit-full-screen .modal-body { flex: 1 1 auto !important; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#youtubeVideo .modal-content:-webkit-full-screen .yt-modal-row { flex: 1 1 auto !important; min-height: 0; }
#youtubeVideo .modal-content:-webkit-full-screen .yt-right-col { overflow-y: auto; }

/* ===== Popups on phones: scroll, each part at its own size =====
   The popup is one screen tall and every part shared that height, so on a phone
   (columns under each other) or a phone on its side (very little height) the video /
   slides were squeezed to a strip and nothing could scroll. Here the popup's body
   scrolls, the video and the slides keep a 16:9 box and the info its full height. */
@media (max-width: 767.98px), (max-height: 520px) {
  .material-modal .modal-body { overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: block; }
  .material-modal .modal-body #innerpopupvideo, .material-modal .modal-body #innerpopupaudio { height: auto !important; display: block; }
  .material-modal .modal-body .row.h-100, .material-modal .spk-modal-row, #youtubeVideo .yt-modal-row { height: auto !important; max-height: none !important; flex: none !important; }
  .material-modal .secBoxVideo, .material-modal .secBoxImageRight, #youtubeVideo .yt-left-col, #youtubeVideo .yt-right-col { height: auto !important; max-height: none !important; }
  /* the boxes: natural height */
  .material-modal #secBoxVideo, .material-modal #secBoxImage, .material-modal #secBoxAudioImage,
  .secBoxImageRight > .secBox, .secBoxImageRight > .fixed-slider-box, #youtubeVideo .yt-video-box { flex: none !important; height: auto !important; min-height: 0 !important; }
  /* video / slides / YouTube: a 16:9 box (the video shown whole, not cropped) */
  .material-modal #videoSlider, .material-modal #imageSlider, #youtubeVideo .yt-video-frame { flex: none !important; height: auto !important; aspect-ratio: 16 / 9; min-height: 0 !important; }
  .material-modal #videoSlider video { object-fit: contain !important; }
  /* audio: the slide 16:9, the player under it (not over the slide); same weight as the audio rules */
  .material-modal .audioLeftCol, .material-modal .audioRightCol { height: auto !important; max-height: none !important; }
  #secBoxAudioImage, #secBoxAudioImage #imageSlider1 { height: auto !important; }
  #secBoxAudioImage #imageSlider1 { display: flex; flex-direction: column; }
  #secBoxAudioImage #imageSlider1 .carousel-inner { position: relative !important; inset: auto !important; height: auto !important; aspect-ratio: 16 / 9; flex: none; }
  #secBoxAudioImage #imageSlider1 .progress-sec { position: relative !important; order: 1; border-radius: 0; }
  #secBoxAudioImage #imageSlider1 .slide-points-badge { bottom: auto; top: 12px; }
  .material-modal .speakerInfo, .material-modal .yt-right-col > .speakerInfo { overflow: visible !important; max-height: none !important; }
  .material-modal .secBoxVideo .speakerInfo { margin-top: 12px !important; }
}

/* ===== Popups on a phone (one column): video, then the slides, then the info box =====
   The info box is inside the video's column, so it came between the video and the
   slides. Here that column's parts join the row itself and get their order. */
@media (max-width: 767.98px) {
  .material-modal .spk-modal-row > .secBoxVideo { display: contents !important; }
  .material-modal .spk-modal-row > .secBoxVideo > * {
    flex: 0 0 auto; width: calc(100% - var(--bs-gutter-x)); margin-left: calc(var(--bs-gutter-x) * .5); margin-right: calc(var(--bs-gutter-x) * .5);
  }
  .material-modal .spk-modal-row > .secBoxVideo > #secBoxVideo { order: 1; }
  .material-modal .spk-modal-row > .secBoxImageRight:not(.audioRightCol) { order: 2; }
  .material-modal .spk-modal-row > .secBoxVideo > .speakerInfo { order: 3; margin-top: 0 !important; }
  .material-modal .spk-modal-row > .secBoxVideo > :not(#secBoxVideo):not(.speakerInfo) { order: 4; }
  /* audio: the slides with the player first, then the info, then "About the speaker" */
  .material-modal .spk-modal-row > .audioRightCol { order: 1; }
  .material-modal .spk-modal-row > .audioLeftCol { order: 2; }
}
/* phones (also on their side): "About the speaker" at its own height — its text part took
   "the rest of the column" (flex 1 1 0), which is nothing when the column is only as tall as its content */
@media (max-width: 767.98px), (max-height: 520px) {
  .material-modal .modal-content { min-height: 0 !important; }   /* 420px was taller than a phone on its side: the top and ✕ were cut */
  .material-modal .spk-profile-card { flex: 0 0 auto !important; }
  .material-modal .spk-profile-card .spc-body { flex: 0 1 auto !important; max-height: 220px; }
}

/* ===== Player: the video box while the video's first picture is still coming =====
   (it was a blank box until then; the note goes as soon as the video can play) */
#videoSlider .carousel-item { position: relative; }
#videoSlider .evx-video-wait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: #fff; font-size: 14px; pointer-events: none; text-align: center; padding: 12px; }
#videoSlider .evx-video-wait .spinner-border { width: 34px; height: 34px; border-width: 3px; color: #fd1d3d; }
#videoSlider .evx-video-fail-text { display: none; }
#videoSlider .evx-vready .evx-video-wait { display: none; }
#videoSlider .evx-verror:not(.evx-vready) .spinner-border, #videoSlider .evx-verror:not(.evx-vready) .evx-video-wait-text { display: none; }
#videoSlider .evx-verror:not(.evx-vready) .evx-video-fail-text { display: block; }

/* ===== Popup's ✕ and full-screen buttons: a light see-through disc instead of a heavy one =====
   They sit on the event's banner; the dark, blurred disc hid the banner's words. The disc is now only as dark
   as the white sign needs to stay readable (on a dark banner and on a light one), without the blur, so the
   banner shows through it. On hover / focus the disc fills with the brand red as before. */
.material-close, .material-fs {
  background: rgba(15, 23, 42, .34);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .28);
  font-size: 16px;
}
.material-close i, .material-fs i { filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .9)); }
.material-fs { font-size: 15px; }
.material-close:hover i, .material-close:focus-visible i, .material-fs:hover i, .material-fs:focus-visible i { filter: none; }

/* ===== Players on a phone: closer set =====
   The headings, the Session / Topic / speaker lines and the spaces between the boxes kept their desktop sizes, so on
   a phone the video and the slides were pushed down and little of them fitted on the screen. Smaller paddings and
   letters here; nothing is hidden. The page's "+" (Add Event) is put away while a player is open: it lay on the
   speaker's lines. */
@media (max-width: 767.98px) {
  .material-modal .modal-body { padding: 10px; }
  .material-modal .spk-modal-row, #youtubeVideo .yt-modal-row { --bs-gutter-y: .6rem; --bs-gutter-x: .6rem; }
  .material-modal .modal-text-banner { height: 84px; }
  .material-modal .modal-text-banner .tb-name { font-size: 15px; }
  .material-modal .modal-text-banner .tb-meta { margin-top: 3px; }
  .material-modal .modal-header-img { max-height: 84px; }
  .material-modal .secBox { border-radius: 10px; }
  .material-modal .secBox-heading { padding: 6px 10px; }
  .material-modal .secBox-heading h6 { font-size: 13.5px; line-height: 1.3; }
  .material-modal .secBox-heading #swapBtn, .material-modal .secBox-heading .swap-icon, .material-modal .secBox-heading .fa-exchange-alt { font-size: 12px; padding: 4px 5px; border-radius: 6px; }
  .material-modal .speakerInfo > .secBox-heading { font-size: 12.5px; padding: 6px 10px; letter-spacing: .2px; }
  .material-modal .session-content { min-height: 0; padding: 5px 30px 5px 10px; font-size: 12.5px; line-height: 1.35; }
  .material-modal .session-content .session-text { line-height: 1.35em; }
  .material-modal .secBoxVideo .speakerInfo { margin-top: 0 !important; }
  .material-modal .evx-desk-note { padding: 6px 10px; font-size: 12.5px; }
  body.modal-open .add-event-btn { display: none !important; }
}