/******************************************************************/
/* PAGE LEVEL                                                     */
/******************************************************************/
html {
    font-size: var(--es-theme-font-size);
}

body {
    background-color: var(--es-page-bg-color, lightgrey);
    color: var(--es-content-text-color, #444444);
    font-size: 1rem;
    font-family: var(--es-text-font, Helvetica, Arial, sans-serif);
    background-image: var(--es-page-bg-image);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
}

/* Ensures all interactive elements show a visible black and white focus ring for accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex="0"]:focus-visible {
  outline: none; /* remove default outline */
  box-shadow:
    0 0 0 2px #000,   /* black inner ring */
    0 0 0 4px #fff !important;  /* white outer ring */
  border-radius: 4px !important;  /* match element shape */
}

/* Page Loading OVerlay
THIS IS DUPLICATE IN CSSBASE - please keep them in sync*/
.loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:var(--es-page-bg-color, #cccccc);
    opacity: 90%;
    color: var(--es-banner-and-button-color, #444444);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
}

.loadingOverlay .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #ccc;
    border-top-color: var(--es-banner-and-button-color, #444444);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Applying thepulse  animation to the icon */
.loadingOverlay .icon {
    display: inline-block; /* Ensures transform works */
    animation: spin 3s linear infinite;
    fill: var(--es-banner-and-button-color, #444444);
    height: 48px;
}

.loadingOverlay .svg-container {
    position: relative;
    width: 64px; /* Set the desired width for the container */
    height: 64px; /* Set the desired height for the container */
    display: inline-block; /* Ensures transform works */
    animation: pulse 1.5s ease-in-out infinite; /* Pulse with 1.5s duration, easing, and infinite loop */
  }

.loadingOverlay .icon1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Ensure both SVGs fit within the container */
    height: 100%; /* Ensure both SVGs fit within the container */
    fill: var(--es-banner-and-button-color, #444444);
}

.loadingOverlay .icon2 {
    position: absolute;
    top: 24px;
    left: 16px;
    width: 50%; /* Ensure both SVGs fit within the container */
    height: 50%; /* Ensure both SVGs fit within the container */
    display: inline-block; /* Ensures transform works */
    /* animation: pulse 1.5s ease-in-out infinite; Pulse with 1.5s duration, easing, and infinite loop */
    animation: spin 3s linear infinite;
    fill: var(--es-banner-and-button-color, #444444);
    /* height: 48px; */
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Keyframes for the pulse animation */
@keyframes pulse {
    0% {
      transform: scale(1); /* Initial size */
      opacity: 1; /* Fully visible */
    }
    50% {
      transform: scale(1.2); /* Scaled up */
      opacity: 0.7; /* Slightly transparent at the peak */
    }
    100% {
      transform: scale(1); /* Return to the initial size */
      opacity: 1; /* Fully visible again */
    }
  }

/*************************************************
Screen Reader Only Classes
*************************************************/
.es-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.es-sr-only-focusable:active, .es-sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/******************************************************************/
/* SITE WIDE BASE AND HELPER CLASSES                              */
/******************************************************************/
h1, h2, h3, h4, h5 {
    font-family: var(--es-heading-font);
    color: var(--es-content-heading-color);
}
h1 {
    font-size: 1.5rem;
}
h2 {
    font-size: 1.25rem;
}
h3 {
    font-size: 1.1rem;
}
h4 {
    font-size: 1.05rem;
}
h5 {
    font-size: 1.0rem;
}

.text-align-left {
    text-align: left;
}
.text-align-right {
    text-align: right;
}
.text-align-center {
    text-align: center;
}

.hidden {
    display: none;
}

a.commandlink{
    color: var(--es-banner-and-button-color, darkgrey);
    text-decoration: none;
}

a.commandlink:hover{
    color: var(--es-panel-heading-color, grey);
    text-decoration: none;
}

/* Override Bootstrap form control styles*/
.form-control {
    background-color: var(--es-input-field-bg-color) !important;
    color: var(--es-input-field-text-color) !important;
    border: 1px solid var(--es-input-field-border-color) !important;
}

.delegate-name {
    border-color: var(--es-primary-btn-active-color, var(--es-banner-and-button-color, darkgrey)) !important;
}


/* BUTTONS - currently for all areas,
TO DO: use Bootstrp styling hooks instead of class overrides
TO DO: Create new button styles for panel, wizard, menu bar
*/

/* .btn-primary {
    background-color: var(--es-banner-and-button-color, darkgrey) !important;
    border-color: var(--es-banner-and-button-color, darkgrey) !important;
    color: var(--es-title-color, #444444) !important;
}

.btn-primary:disabled, .btn-primary.disabled {
    background-color: grey !important;
    border-color: grey !important;
}

.btn-primary:not(:disabled):hover {
    background-color: var(--es-banner-and-button-color, darkgrey) !important;
    border-color: var(--es-banner-and-button-color, darkgrey) !important;
    color: var(--es-title-color, #444444) !important;
    opacity: 0.5;
}

.btn-outline-primary {
    border-color: var(--es-banner-and-button-color, darkgrey) !important;
    color:  var(--es-banner-and-button-color) !important;
}

.btn-outline-primary:not(:disabled):hover:active {
    background-color: var(--es-banner-and-button-color, darkgrey) !important;
    border-color: var(--es-banner-and-button-color, darkgrey) !important;
    color: var(--es-title-color, #444444) !important;
    opacity: 0.5;
}

.btn-outline-primary:active {
    background-color: var(--es-banner-and-button-color, darkgrey) !important;
    border-color: var(--es-banner-and-button-color, darkgrey) !important;
    color: var(--es-title-color, #444444) !important;
}

.btn-outline-primary:not(:disabled):hover {
    background-color: var(--es-banner-and-button-color, darkgrey) !important;
    border-color: var(--es-banner-and-button-color, darkgrey) !important;
    color: var(--es-title-color, #444444) !important;
    opacity: 0.5;
}

.btn-outline-primary:disabled, .btn-outline-primary.disabled {
    border-color: grey !important;
    color: var(--es-banner-and-button-color) !important;
} */

/* Since Enhanced Theme */
/* Primary Buttons */
.btn-primary {
    background-color: var(--es-primary-btn-active-color, var(--es-banner-and-button-color, darkgrey)) !important;
    border-color: var(--es-primary-btn-active-color, var(--es-banner-and-button-color, darkgrey)) !important;
    color: var(--es-primary-btn-active-text-color, var(--es-title-color, #444444)) !important;
    border-radius: var(--es-border-radius) !important;
    font-size: 1rem !important;
}

.btn-primary:disabled, 
.btn-primary.disabled {
    background-color: var(--es-primary-btn-inactive-color, grey) !important;
    border-color: var(--es-primary-btn-inactive-color, grey) !important;
    color: var(--es-primary-btn-inactive-text-color, var(--es-title-color, #444444)) !important;
    border-radius: var(--es-border-radius) !important;
}

.btn-primary:not(:disabled):hover {
    background-color: var(--es-primary-btn-hover-color, var(--es-banner-and-button-color, darkgrey)) !important;
    border-color: var(--es-primary-btn-hover-color, var(--es-banner-and-button-color, darkgrey)) !important;
    color: var(--es-primary-btn-hover-text-color, var(--es-title-color, #444444)) !important;
    border-radius: var(--es-border-radius) !important;
    opacity: var(--es-btn-hover-opacity);
}

/* Secondary/Outline Buttons */
.btn-outline-primary,
.btn-secondary {
    background-color: transparent !important;
    border-color: var(--es-secondary-btn-active-border-color, var(--es-banner-and-button-color, darkgrey)) !important;
    color: var(--es-secondary-btn-active-text-color, var(--es-banner-and-button-color)) !important;
    border-radius: var(--es-border-radius) !important;
    font-size: 1rem !important;
}

.btn-outline-primary:active,
.btn-secondary:active {
    background-color: transparent !important;
    border-color: var(--es-secondary-btn-active-border-color, var(--es-banner-and-button-color, darkgrey)) !important;
    color: var(--es-secondary-btn-active-text-color, var(--es-title-color, #444444)) !important;
    border-radius: var(--es-border-radius) !important;
}

.btn-outline-primary:not(:disabled):hover,
.btn-secondary:not(:disabled):hover {
    background-color: transparent !important;
    border-color: var(--es-secondary-btn-hover-border-color, var(--es-banner-and-button-color, darkgrey)) !important;
    color: var(--es-secondary-btn-hover-text-color, var(--es-title-color, #444444)) !important;
    border-radius: var(--es-border-radius) !important;
    opacity: var(--es-btn-hover-opacity);
}

.btn-outline-primary:not(:disabled):hover:active,
.btn-secondary:not(:disabled):hover:active {
    background-color: transparent !important;
    border-color: var(--es-secondary-btn-hover-border-color, var(--es-banner-and-button-color, darkgrey)) !important;
    color: var(--es-secondary-btn-hover-text-color, var(--es-title-color, #444444)) !important;
    border-radius: var(--es-border-radius) !important;
    opacity: var(--es-btn-hover-opacity);
}

.btn-outline-primary:disabled, 
.btn-outline-primary.disabled,
.btn-secondary:disabled,
.btn-secondary.disabled {
    background-color: transparent !important;
    border-color: var(--es-secondary-btn-inactive-border-color, grey) !important;
    color: var(--es-secondary-btn-inactive-text-color, var(--es-banner-and-button-color)) !important;
    border-radius: var(--es-border-radius) !important;
}

/* Panel Primary Buttons */
.panel .btn-primary,
.btn-panel-primary {
    background-color: var(--es-panel-primary-btn-active-color, var(--es-banner-and-button-color, darkgrey)) !important;
    border-color: var(--es-panel-primary-btn-active-color, var(--es-banner-and-button-color, darkgrey)) !important;
    color: var(--es-panel-primary-btn-active-text-color, var(--es-title-color, #444444)) !important;
    border-radius: var(--es-border-radius) !important;
    font-size: 1rem !important;
}

.panel .btn-primary:disabled,
.panel .btn-primary.disabled,
.btn-panel-primary:disabled,
.btn-panel-primary.disabled {
    background-color: var(--es-panel-primary-btn-inactive-color, grey) !important;
    border-color: var(--es-panel-primary-btn-inactive-color, grey) !important;
    color: var(--es-panel-primary-btn-inactive-text-color, var(--es-title-color, #444444)) !important;
    border-radius: var(--es-border-radius) !important;
}

.panel .btn-primary:not(:disabled):hover,
.btn-panel-primary:not(:disabled):hover {
    background-color: var(--es-panel-primary-btn-hover-color, var(--es-banner-and-button-color, darkgrey)) !important;
    border-color: var(--es-panel-primary-btn-hover-color, var(--es-banner-and-button-color, darkgrey)) !important;
    color: var(--es-panel-primary-btn-hover-text-color, var(--es-title-color, #444444)) !important;
    border-radius: var(--es-border-radius) !important;
    opacity: var(--es-btn-hover-opacity);
}

/* Panel Secondary Buttons */
.panel .btn-outline-primary,
.panel .btn-secondary,
.btn-panel-secondary {
    background-color: transparent !important;
    border-color: var(--es-panel-secondary-btn-active-border-color, var(--es-banner-and-button-color, darkgrey)) !important;
    color: var(--es-panel-secondary-btn-active-text-color, var(--es-banner-and-button-color)) !important;
    border-radius: var(--es-border-radius) !important;
    border-width: 1px;
    font-size: 1rem !important;
}

.panel .btn-outline-primary:active,
.panel .btn-secondary:active,
.btn-panel-secondary:active {
    background-color: transparent !important;
    border-color: var(--es-panel-secondary-btn-active-border-color, var(--es-banner-and-button-color, darkgrey)) !important;
    color: var(--es-panel-secondary-btn-active-text-color, var(--es-title-color, #444444)) !important;
    border-radius: var(--es-border-radius) !important;
}

.panel .btn-outline-primary:not(:disabled):hover,
.panel .btn-secondary:not(:disabled):hover,
.btn-panel-secondary:not(:disabled):hover {
    background-color: transparent !important;
    border-color: var(--es-panel-secondary-btn-hover-border-color, var(--es-banner-and-button-color, darkgrey)) !important;
    color: var(--es-panel-secondary-btn-hover-text-color, var(--es-title-color, #444444)) !important;
    border-radius: var(--es-border-radius) !important;
    opacity: var(--es-btn-hover-opacity);
}

.panel .btn-outline-primary:disabled,
.panel .btn-outline-primary.disabled,
.panel .btn-secondary:disabled,
.panel .btn-secondary.disabled,
.btn-panel-secondary:disabled,
.btn-panel-secondary.disabled {
    background-color: transparent !important;
    border-color: var(--es-panel-sec-btn-inactive-border-color, grey) !important;
    color: var(--es-panel-secondary-btn-inactive-text-color, var(--es-banner-and-button-color)) !important;
    border-radius: var(--es-border-radius) !important;
}

/* Action Links */
a.action-link,
.action-link {
    color: var(--es-action-link-active-color, var(--es-banner-and-button-color)) !important;
    text-decoration: none;
    cursor: pointer;
    font-size: 1rem !important;
}

a.action-link:visited {
    color: var(--es-action-link-active-color, var(--es-banner-and-button-color)) !important;
}

a.action-link:hover,
.action-link:hover {
    color: var(--es-action-link-hover-color, var(--es-banner-and-button-color)) !important;
}

a.action-link:disabled,
a.action-link.disabled,
.action-link:disabled,
.action-link.disabled {
    color: var(--es-action-link-inactive-color, grey) !important;
    cursor: not-allowed;
}

/* Panel Action Links */
.panel a.action-link,
.panel .action-link,
a.panel-action-link,
.panel-action-link {
    color: var(--es-panel-action-link-active-color, var(--es-banner-and-button-color)) !important;
    text-decoration: none;
    cursor: pointer;
    font-size: 1rem !important;
}

.panel a.action-link:visited,
a.panel-action-link:visited {
    color: var(--es-panel-action-link-active-colour, var(--es-banner-and-button-color)) !important;
}

.panel a.action-link:hover,
.panel .action-link:hover,
a.panel-action-link:hover,
.panel-action-link:hover {
    color: var(--es-panel-action-link-hover-color, var(--es-banner-and-button-color)) !important;
}

.panel a.action-link:disabled,
.panel a.action-link.disabled,
.panel .action-link:disabled,
.panel .action-link.disabled,
a.panel-action-link:disabled,
a.panel-action-link.disabled,
.panel-action-link:disabled,
.panel-action-link.disabled {
    color: var(--es-panel-action-link-inactive-color, grey) !important;
    cursor: not-allowed;
}
/* End */ 


/***** override Salesforce styles *****/
.sfdc_richtext {
}

.sfdc_richtext .ql-indent-1 {
    padding-left: 3em;
}
.sfdc_richtext .ql-indent-2 {
    padding-left: 6em;
}
.sfdc_richtext .ql-indent-3 {
    padding-left: 9em;
}

.sfdc_richtext img {
    max-width: 100%;
    height: auto;
}

.sfdc_richtext p {
    margin-bottom: 0px !important;
}

.regpanel .sfdc_richtext p {
    margin-bottom: 0px !important;
    font-size: 1rem !important;
}

.footer .sfdc_richtext p {
    margin-bottom: 0px !important;
    font-size: 1rem !important;
}

.apply-theme {
    font-family: var(--es-text-font) !important;
    font-size: 1rem !important;
}

.apply-theme p,
.apply-theme span,
.apply-theme b,
.apply-theme u,
.apply-theme strong,
.apply-theme em,
.apply-theme strike,
.apply-theme i {
    color: var(--es-content-text-color) !important;
    background-color: transparent !important;
    font-family: var(--es-text-font) !important;
}

/* Ensure embedded links display with the theme font*/
.apply-theme a {
    background-color: transparent !important;
    font-family: var(--es-text-font) !important;
    color: var(--es-action-link-active-color, var(--es-banner-and-button-color)) !important;
}

.apply-theme a:hover {
    color: var(--es-action-link-hover-color, var(--es-banner-and-button-color)) !important;
}

.regpanel .apply-theme p,
.regpanel .apply-theme span,
.regpanel .apply-theme b,
.regpanel .apply-theme u,
.regpanel .apply-theme strong,
.regpanel .apply-theme em,
.regpanel .apply-theme strike,
.regpanel .apply-theme i {
    color:var(--es-panel-text-color) !important;
    background-color: transparent !important;
    font-size: 1rem !important;
}

.footer .apply-theme p,
.footer .apply-theme span,
.footer .apply-theme b,
.footer .apply-theme u,
.footer .apply-theme strong,
.footer .apply-theme em,
.footer .apply-theme strike,
.footer .apply-theme i {
    color:var(--es-footer-text-color) !important;
    background-color: transparent !important;
    font-family: var(--es-text-font) !important;
}

.footer .apply-theme a {
    color: var(--es-footer-action-link-active-color, var(--es-footer-text-color)) !important;
}
.footer .apply-theme a:hover {
    color: var(--es-footer-action-link-hover-color, var(--es-footer-text-color)) !important;
    text-decoration: none !important;
}

/* 2025-01-08 DH: This is not explicitly used in our code - maybe something from the rich text fields in the past */
.htmlDetailElementTable {
    width: 100%;
    height: auto;
}

/* NAVIGATION BAR */
.logoimg {
    max-height: var(--es-theme-logo-size);
}

.nav-link {
    display: inline-grid;
    color: var(--es-menu-active-text-color, var(--es-action-link-active-color, var(--es-content-heading-color, #444444))) !important;
    background-color: transparent;
}

.nav-link:hover {
    color: var(--es-menu-hover-text-color, var(--es-action-link-hover-color)) !important;
}

.active .nav-link {
    border-bottom: 0.3em solid var(--es-menu-focus-bar-color, var(--es-primary-btn-active-color, var(--es-banner-and-button-color))) !important;
    color: var(--es-menu-focus-text-color, var(--es-primary-btn-active-color, var(--es-banner-and-button-color))) !important;
}

.active .nav-link:hover {
    border-bottom: 0.3em solid var(--es-menu-focus-bar-color, var(--es-primary-btn-active-color, var(--es-banner-and-button-color))) !important;
    color: var(--es-menu-focus-text-color, var(--es-primary-btn-active-color, var(--es-banner-and-button-color))) !important;
}

/* When Theme Microsite Type = Single Page with Tabs */
/* Base tab - button when NOT active */
.nav-item > button:not(.active) {
    color: var(--es-tab-active-text-color) !important;
}

/* Hover - button when NOT active */
.nav-item > button:not(.active):hover {
    color: var(--es-tab-hover-text-color) !important;
    border-color: var(--es-tab-line-color, #dee2e6 #dee2e6 #fff) !important;
}

/* Active state */
.nav-item > button.active,
.nav-item > button.active:hover {
    color: var(--es-tab-focus-text-color, var(--es-primary-btn-active-color, var(--es-banner-and-button-color))) !important;
    border-color: var(--es-tab-line-color, #dee2e6 #dee2e6 #fff) !important;
    background-color: var(--es-tab-focus-background-color, transparent) !important;
}

.nav-item > button:focus{
    outline: none !important;
    box-shadow: none !important;
}

.nav-item>button:focus-visible {
    outline: none !important;
    box-shadow:
        0 0 0 2px #000,
        0 0 0 4px #fff !important;
    border-radius: 4px !important;
}

/* End */

#mobileRegButtonWrapper {
    position: relative;
    z-index: 1020;
}


.already-registered {
    color: var(--es-banner-and-button-color);
    font-size: 0.7em;
}

/* BANNER */
.banner {
    position: relative;
    background-color:var(--es-banner-and-button-color);
    width: 100%;
    overflow: hidden;
}

/* Image drives the height */
.bannerimage {
    width: 100%;
    height: auto;          /* preserves natural ratio */
    display: block;
}

.banner-caption {
    color: var(--es-title-color);
    font-family: var(--es-title-font);
    background-color: var(--es-banner-and-button-color);
    font-size: 1rem;
    width: 100%;
    padding: 0px 8px;
}

/* Content floats over the image */
.banner-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;          /* cover full banner area */
    display: flex;         /* optional: center vertically */
    align-items: center;
    z-index: 1;            /* ensure above image */
    pointer-events: none;  /* Allow clicks to pass through */
}

.event-title {
    pointer-events: auto;
}

/* This is only used in the event00optout page
TODO: Conver that page to use banner from the template
*/
.bannerimage-optout {
    min-width: 100%;
    position: absolute;
}

.title {
    color: var(--es-title-color, white);
    font-family: var(--es-title-font);
    line-height: 1.0;
}

.venue {
    color: var(--es-title-color, white);
    font-family: var(--es-title-font);
}

.tagline {
    color: var(--es-title-color, white);
    font-family: var(--es-title-font);
}

.date {
    color: var(--es-title-color, white);
    font-family: var(--es-title-font);
}

/* PAGE CONTENT */
.content {
    background-color: var(--es-content-bg-color, white);
}

/* PAGE CONTENT - EVENT01 */
.venueLink {
    color: var(--es-content-text-color);
    text-decoration: underline;
}

.venueLinkDesc {
    color: var(--es-content-text-color);
    font-family: var(--es-text-font);
}

/* FOOTER */
.footer {
    min-height:20px;
    background-color:var(--es-footer-bg-color, darkgrey);
}

.social-icon {
    font-size: 2rem;
    color:var(--es-footer-text-color) !important;
    background-color: transparent !important;
}

.social-icon:hover{
    font-size: 2rem;
    opacity: 0.5;
    /* color:var(--es-banner-and-button-color) !important; */
}


/******************************************************************/
/* REGPANEL                                                       */
/******************************************************************/
.regpanel {
    background-color: var(--es-panel-bg-color, lightgrey);
    color:  var(--es-panel-text-color);
    border-color: lightgrey;
    border-width:1px;
    border-style:solid;
    padding:15px;
    border-radius:4px;
}

.repanel-nofloat {
    margin-top: 0px;
}

.regpanel h1, .regpanel h2, .regpanel h3, .regpanel h4, .regpanel h5 {
    font-family: var(--es-heading-font);
    color: var(--es-panel-heading-color);
}

/******************************************************************/
/* REGISTRATION FORM                                              */
/******************************************************************/
.form-label {
    /* font-size: 0.8rem; */
    margin-top: 2px;
    margin-bottom: 0px;
}

.form-section {
    font-size: 1rem;
    margin-top: 4px;
    margin-bottom: 0px;
}

.form-label .required.control-label:after {
    color: red;
    content: "*";
}

/******************************************************************/
/* AGENDA TAB STYLES                                              */
/******************************************************************/
.agenda {

}

.agenda .dayheading {
    background-color: var(--es-panel-bg-color);
    color: var(--es-panel-heading-color);

    padding: 0.5rem;
    border-radius: 4px;
}

.agenda .day-plus-minus {
    float: right;
}

.agenda .dayheading:hover {
    cursor: pointer;
    opacity: 70%;
}

.agenda .session {
    margin-bottom: 0.5rem;
    padding-top: 0.5rem;
    border-color: var(--es-panel-bg-color);
    border-width: 1px 0px 0px 0px;
    border-style: solid;
}

.agenda .location {
    color: var(--es-content-heading-color);
    text-transform: uppercase;
    font-size: 0.7rem;
}
.agenda .time {
    color: var(--es-content-heading-color);
    text-transform: uppercase;
    font-size: 0.7rem;
}

.agenda .date {
    color: var(--es-content-heading-color);
    text-transform: uppercase;
    font-size: 0.7rem;
}

.agenda .subject {
    color: var(--es-content-heading-color);
    font-weight: bold;
    font-size: 1.3rem;
    margin-bottom: 0px;
}

.agenda .session-state {
    position: relative;
    padding: .3rem 0.3rem;
    border-radius: .2rem;
    font-size: .875rem;
    display: inline-block;
    isolation: isolate;
    color: var(--es-page-bg-color);
}

.session-state::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--es-content-heading-color);
    opacity: 0.5;
    border-radius: .2rem;
    z-index: -1;
}

.agenda .speaker {
    color: var(--es-content-heading-color);
    margin-bottom: 1rem;
}

.agenda .overview {

}

.agenda .overview-truncated {
    max-height: 150px;            /* collapsed height */
    overflow: hidden;
    position: relative;
    transition: max-height 320ms ease;
}

/* gradient overlay at bottom to hint more content */
.overview-truncated::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4.0rem;
  pointer-events: none;
  background: linear-gradient( rgba(255,255,255,0), var(--es-content-bg-color) );
}

.agenda .session-time-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.agenda .session-start-time {
    color: var(--es-content-heading-color);
    font-weight: bold;
    font-size: 1.3rem;
    line-height: 1.2;
}

.agenda .session-to {
    color: var(--es-content-heading-color);
    font-weight: normal;
    font-size: 1.2rem;
    line-height: 0.5;
}

.agenda .session-end-time {
    color: var(--es-content-heading-color);
    font-weight: normal;
    font-size: 1.1rem;
}

.agenda .session-sub-heading {
    color: var(--es-content-heading-color);
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 0px;
    margin-top: 0.5rem;
}

.agenda .cal-dropdown-menu {
    min-width: 165px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
    margin: 0.125rem 0 0;
    position: absolute;
    z-index: 1;
}

.agenda .cal-dropdown-menu:hover {
    background-color: #f8f9fa;
}


.agenda .dropdown {
    align-self: center;
}

.agenda .add-to-calendar-link {
    font-size: 0.9rem; /* min 12px, scales, max 16px */
    align-self: auto;
    white-space: normal !important;
    line-height: 1.3;
}

.agenda .cal-dropdown-menu .dropdown-item {
    padding: 0.2rem 0.5rem !important;
}

/******************************************************************/
/* Mobile Navigation Panels and Overlays                          */
/******************************************************************/

/* ── Shared overlay backdrop ── */
.mob-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1040;
    background-color: rgba(0, 0, 0, 0.5);
}
.mob-overlay.show { display: block; }

/* ── Shared close button (replaces BS5 btn-close) ── */
.mob-close-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    color: #000;
    opacity: 0.6;
}
.mob-close-btn:hover { opacity: 1; }

/* ── Slide-Out Panel ── */
.mob-slideout-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 75vw;
    max-width: 300px;
    background: var(--es-page-bg-color, #fff);
    z-index: 1050;
    overflow-y: auto;
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0.3s ease;
}
/* Slides from the right (logo left or center) */
.mob-slideout-right {
    right: 0;
    left: auto;
    transform: translateX(100%);
}
/* Slides from the left (logo right-aligned) */
.mob-slideout-left {
    left: 0;
    right: auto;
    transform: translateX(-100%);
}
.mob-slideout-panel.show {
    transform: translateX(0);
    visibility: visible;
}

/* ── Curtain: drops from top ── */
.mob-curtain-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--es-page-bg-color, #fff);
    z-index: 1050;
    visibility: hidden;
    transform: translateY(-100%);
    transition: transform 0.35s ease, visibility 0.35s ease;
}
.mob-curtain-panel.show {
    transform: translateY(0);
    visibility: visible;
}

/* ── Full-Screen Overlay ── */
.mob-fullscreen-panel {
    position: fixed;
    inset: 0;
    background: var(--es-page-bg-color, #fff);
    z-index: 1050;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.mob-fullscreen-panel.show {
    opacity: 1;
    visibility: visible;
}

/* ── Billboard ── */
.mob-billboard-panel {
    position: fixed;
    inset: 0;
    background: var(--es-page-bg-color, #fff);
    z-index: 1050;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.mob-billboard-panel.show {
    opacity: 1;
    visibility: visible;
}
.mob-billboard-nav .nav-link {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    font-weight: 600;
    padding: 0.5rem 0;
    letter-spacing: -0.02em;
}

/******************************************************************/
/* End Mobile Navigation Panels and Overlays                      */
/******************************************************************/

/* Small screens: row layout */
@media (max-width: 767.98px) {
    .agenda .session-time-section {
        flex-direction: row ;
        justify-content: left ; /* center items horizontally */
        align-items: center;    /* center items vertically */
    }
    .agenda .session-time-section {

    }

    .agenda .session-start-time {
        font-weight: normal;
        font-size: 1.1rem;
        line-height: 1;
    }

    .agenda .session-to {
        font-weight: normal;
        font-size: 1.1rem;
        line-height: 1;
    }

    .agenda .session-end-time {
        font-weight: normal;
        font-size: 1.1rem;
        line-height: 1;
    }


    .agenda .dropdown {
        align-self: center;
        margin-left: 0.5rem;
    }

    /* .agenda .dropdown,
    .agenda .add-to-calendar-link {
        width: 100%;
    } */

    /* Mobile: full-width registration button */
    #mobileRegButtonWrapper .btn {
        width: 100%;
        display: block;
        position: relative;
        z-index: 1040;
    }

    /* Left: logo left, hamburger right — default navbar behaviour, nothing needed */

    /* Center: logo centered, hamburger absolute right */
    .logo-text-center {
        /* position: relative; */
        justify-content: center !important;
    }
    .logo-text-center .navbar-brand {
        margin: 0 auto;
    }
    .logo-text-center .navbar-toggler {
        position: absolute;
        right: 1rem;
    }

    /* Right: logo right, hamburger left — default navbar behaviour, nothing needed */
    .logo-text-right .navbar-brand {
        margin-left: auto;
    }

    #mobileRegButtonWrapper .btn-group {
        width: 50%;
    }
    #mobileRegButtonWrapper .dropdown-toggle {
        max-width: 12%;
    }
    #mobileRegButtonWrapper .dropdown-menu {
        left: -130px !important;
    }
}

/* Medium screens (tablets): stack times above dropdown */
@media (min-width: 768px) and (max-width: 1199.98px) {

    .agenda .dropdown,
    .agenda .add-to-calendar-link {
        width: auto;
    }
}



/******************************************************************/
/* REGISTATION MODAL                                              */
/******************************************************************/
.modal {
    background-color: transparent;
}
#regmodal .modal-content {
    background-color: var(--es-panel-bg-color);
    border-width:1px;
    border-style:solid;
    border-color:lightgrey;
}
#regmodal .modal-body {
    padding: 0px;
}
#regmodal .regpanel {
    border-width:0px;
    margin-top: 0 !important;
}
#regmodal .modal-header {
    border-bottom: 1px solid lightgrey;
}
#regmodal .modal-header h2 {
    color: var(--es-panel-heading-color);
    font-family: var(--es-heading-font);
    font-size: 1.5rem;
}
#regmodal .modal-header .close {
    color: var(--es-panel-heading-color);
}

/******************************************************************/
/* ALREADY REGISTERED MODAL                                       */
/******************************************************************/
#alreadymodal .modal-content {
    background-color: var(--es-panel-bg-color);
    border-width:1px;
    border-style:solid;
    border-color:lightgrey;
}
#alreadymodal .modal-body {
    padding: 0px;
}
#alreadymodal .regpanel {
    border-width:0px;
    /* Cancel the floating negative margin used for over-banner layout
       when the regpanel is shown inside the modal so content isn't
       pulled under the header/footer. */
    margin-top: 0 !important;
}
#alreadymodal .modal-header {
    border-bottom: 1px solid lightgrey;
}
#alreadymodal .modal-header h2 {
    color: var(--es-panel-heading-color);
    font-family: var(--es-heading-font);
    font-size: 1.5rem;
}
#alreadymodal .modal-header .close {
    color: var(--es-panel-heading-color);
}

/******************************************************************/
/* SPARK LINK                                                     */
/******************************************************************/
.spark-link {
    text-decoration: none;
    font-weight: bold;
    color:grey;
}
.spark-link:hover{
    text-decoration: none;
    font-weight: bold;
    color:var(--es-banner-and-button-color);
}

.spark-logo {
    max-height: 80px;
}

/******************************************************************/
/* Styling file upload component */
/******************************************************************/
.table-container {
    margin-top: 0px;
    margin-bottom: 5px;
}
.files-table {
    font-size: 12.8px;
    border-collapse: collapse;
    width: 100%;
}
.table-head, .table-column {
    text-align: left;
    padding: 8px;
}
.table-column {
    word-break:break-all;
}
.loader {
    display: none;
}
.table-title {
    margin-top: 10px;
    margin-left: 0px;
    font-size: 12.8px;
    font-weight: bold;
    margin-left: 7px;
    color: #fff
}
.file-upload-error-message {
    color: red
}


/******************************************************************/
/* CSS BELOW STILL TO BE REVIEWED AND MODIFIED FOR CSS PROPERTIES */

/* use in eventspark\staticresouces\eventspark\carousel.js */
.carousel-img {
    height: 400px;
}

/* Used in eventVideo.component */
.video-iframe {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.calendar-svg-icon {
    height: 32px;
    margin-right: 6px;
}

.modal-open .sticky-top-nomove {
    margin-right: auto !important;
    padding-right: 15px !important;
}

/* X-SM */
@media all and (max-width: 575px) {

    .banner-no-image {
        min-height: 144px;
    }

    .bannerimage-optout {
        min-height: 144px;
    }
    .spark-logo {
        max-height: 40px;
    }
    .regpanel {
        padding:5px;
        border-radius:4px;
        margin-top: 0px;
    }

    .date {
        font-size: 0.65rem;
        margin-bottom: 0px;
        text-transform: uppercase;
    }
    .title {
        font-size: 1.8rem;
        margin-bottom: 0.18rem;
        margin-top: 0.36rem;
    }
    .tagline {
        font-size: 0.75rem;
        margin-bottom: 0px;
    }

    .speakers .speaker {
        padding-left: 1rem;
        align-items: flex-start;
        display: block;
    }

    .speakers .image-container {
        margin-bottom: 0;
        margin-right: 10px;
        float: left;
    }

    .speakers .name,
    .speakers .jobtitle,
    .speakers .overview {
        margin-left: 0;
    }

    .speaker-modal .modal-body .speaker-image {
        display: block;
        margin-bottom: 10px !important;
        margin-right: 0 !important;
        height: auto;
        max-width: 100%;
        align-self: center;
    }


    .social-icon {
        padding: 0.4rem 0.4rem;
    }

    #mobileRegButtonWrapper .dropdown-menu {
        left: -112px !important;
    }
}

/* SM */
@media all and (min-width: 576px) and (max-width: 768px) {
    .banner-no-image  {
        min-height: 192px;
    }

    .bannerimage-optout {
        min-height: 192px;
    }
    .spark-logo {
        max-height: 40px;
    }
    .regpanel {
        padding:5px;
        border-radius:4px;
        margin-top: 0px;
    }

    .date {
        font-size: 0.65rem;
        margin-bottom: 0px;
        text-transform: uppercase;
    }
    .title {
        font-size: 1.8rem;
        margin-bottom: 0.18rem;
        margin-top: 0.36rem;
    }
    .tagline {
        font-size: 0.75rem;
        margin-bottom: 0px;
    }

    .speakers .speaker {
        padding-left: 1rem;
        align-items: flex-start;
        display: block;
    }

    .speakers .image-container {
        margin-bottom: 0;
        margin-right: 10px;
        float: left;
    }

    .speakers .name,
    .speakers .jobtitle,
    .speakers .overview {
        margin-left: 0;
    }

    .speaker-modal .modal-body .speaker-image {
        display: block;
        margin-bottom: 10px !important;
        margin-right: 0 !important;
        height: auto;
        max-width: 100%;
        align-self: center;
    }


    .social-icon {
        padding: 0.4rem 0.4rem;
    }
}

/* MD */
@media all and (min-width: 768px) and (max-width: 992px) {

    .banner-no-image {
        min-height: 248px;
    }
    .bannerimage-optout {
        min-height: 248px;
    }
    .spark-logo {
        max-height: 50px;
    }
    .regpanel {
        padding:10px;
        border-radius:4px;
        margin-top: 0px;
    }

    .date {
        font-size: 1rem;
        margin-bottom: 0px;
        text-transform: uppercase;
    }
    .title {
        font-size: 2.2rem;
        margin-bottom: 0.22rem;
        margin-top: 0.44rem;
    }
    .tagline {
        font-size: 1.15rem;
        margin-bottom: 0px;
    }

    /* Left: logo left, hamburger right — default navbar behaviour, nothing needed */

    /* Center: logo centered, hamburger absolute right */
    .logo-text-center {
        /* position: relative; */
        justify-content: center !important;
    }
    .logo-text-center .navbar-brand {
        margin: 0 auto;
    }
    .logo-text-center .navbar-toggler {
        position: absolute;
        right: 1rem;
    }

    /* Right: logo right, hamburger left — default navbar behaviour, nothing needed */
    .logo-text-right .navbar-brand {
        margin-left: auto;
    }

    #mobileRegButtonWrapper .btn-group {
        width: 50%;
    }
    #mobileRegButtonWrapper .dropdown-toggle {
        max-width: 12%;
    }
    #mobileRegButtonWrapper .dropdown-menu {
        left: -115px !important;
    }

}

/* LG */
@media all and (min-width: 992px) and (max-width: 1200px) {


    .already-registered {
        font-size: 0.85em;
    }
    .banner-no-image {
        min-height: 300px;
    }
    .bannerimage-optout {
        min-height: 300px;
    }
    .regpanel {
        padding:10px;
        border-radius:4px;
        margin-top: max(var(--es-template-regpanel-top-margin), -190px);
    }
    .spark-logo {
        max-height: 60px;
    }

    .date {
        font-size: 1.25rem;
        margin-bottom: 0px;
        text-transform: uppercase;
    }

    .title {
        font-size: 2.95rem;
        margin-bottom: 0.3rem;
        margin-top: 0.6rem;
    }
    .tagline {
        font-size: 1.5rem;
        margin-bottom: 0px;
    }

}

/* XL */
@media all and (min-width: 1200px) {

    .already-registered {
        font-size: 0.85em;
    }
    .banner-no-image {
        min-height: 380px;
    }
    .bannerimage-optout {
        min-height: 380px;
    }
    .regpanel {
        padding:15px;
        border-radius:4px;
        margin-top: max(var(--es-template-regpanel-top-margin), -220px);
    }
    .spark-logo {
        max-height: 70px;
    }


    .date {
        font-size: 1.55rem;
        margin-bottom: 0px;
        text-transform: uppercase;
    }

    .title {
        font-size: 3.5rem;
        margin-bottom: 0.35rem;
        margin-top: 0.7rem;
    }
    .tagline {
        font-size: 2.35rem;
        margin-bottom: 0px;
    }
}

.debugInfo {
    font-family:Verdana, Geneva, Tahoma, sans-serif !important;
    font-size: 16px !important;
    overflow: hidden;
    background-color: gold !important;
    color: purple !important;
    border: 2px purple dashed !important;
    padding: 4px;
}

/*
EXPIRIMENTAL CODE
This code is not yet in use and is still being tested.

By applying our own scope (es-scope) to our CSS we can make it more specific than the slds-scope CSS that currently
overrides some of our stylng in the embedded LWC's
*/
.es-scope .lwc-title {
    color: var(--es-title-color, white);
    font-family: var(--es-title-font);
    line-height: 1.0;
    font-size: 2rem;
}