/**************** COOKIES ****************/
.cookie-popup {
    position: fixed;
    bottom: -100%;
    width: 100%;
    padding: 20px;
    background-color: #3B3E4B;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    transition: bottom 0.5s;
    text-align: center;
    box-shadow: 0px -8px 10px rgba(0, 0, 0, 0.4);
}

.cookie-popup.active {
    bottom: 0;
}

.cookie-popup h3 {
    font-size: 1.3rem !important;
    text-transform: none !important; /* Ensure normal case for cookie popup title */
    color: #ffffff !important;
}

.cookie-popup button {
    background-color: #6F276D;
    color: #ffffff;
    font-weight: bold;
    font-size: 1rem;
    padding: 10px;
    border-radius: 6px 10px;
    border-width: 0;
}

/**************** VIDEO ****************/
.fr-video iframe {
    height: 600px; /* Default height for all screen sizes */
}

@media screen and (max-width: 768px) {
    .fr-video iframe {
        height: 300px; /* Set height to 300px for mobile */
    }
}
/**************** Header Font Styling ****************/
h1, h2, h3, h4, h5, h6 {
    font-family: 'ModernEra', sans-serif !important;
    text-transform: none !important; /* Ensure normal case */
    font-weight: 300 !important; /* Regular weight */
    line-height: 1 !important; /* Set line height to 1 */
}

h1 {
    font-size: 48px !important;
    text-transform: none !important; /* Ensure normal case for h1 */
}

h2 {
    font-size: 36px !important;
    text-transform: none !important; /* Ensure normal case for h2 */
}

/**************** FOOTER ****************/
footer {
    display: none;
}

.main-view.footer-padding,
.editor-home-page.footer-padding,
.main-react-view {
    padding-bottom: 0 !important;
}



/***************** NAV TEXT WHITE *************/
.business-nav-menu-btn.nav-menu-btn.custom-color.color-3.color-1-border.color-1-hover.color-1-selected:hover,
.business-nav-menu-btn.nav-menu-btn.custom-color.color-3.color-1-border.color-1-hover.color-1-selected:focus,
.business-nav-menu-btn.nav-menu-btn.custom-color.color-3.color-1-border.color-1-hover.color-1-selected.selected {
    color: #ffffff !important;
}


/**************** Text Alignment ****************/
.studios-btn-left > div > div > div.element-groups.Component-elementGroups-0-2-1 > div > div:has(button),
.studios-btn-left div:has( > a > div.btn) {
    text-align: left;
}

.studios-btn-centre > div > div > div.element-groups.Component-elementGroups-0-2-1 > div > div:has(button),
.studios-btn-centre div:has( > a > div.btn) {
    text-align: center;
}

.studios-btn-right > div > div > div.element-groups.Component-elementGroups-0-2-1 > div > div:has(button),
.studios-btn-right div:has( > a > div.btn) {
    text-align: right;
}


/**************** Responsive Adjustments ****************/
@media (max-width: 525px) {
    .studios-btn-left > div > div > div.element-groups.Component-elementGroups-0-2-1 > div > div:has(button),
    .studios-btn-right > div > div > div.element-groups.Component-elementGroups-0-2-1 > div > div:has(button),
    .studios-btn-left div:has( > a > div.btn),
    .studios-btn-right div:has( > a > div.btn) {
        text-align: center;
    }

    .custom-nav-reg-btn {
        margin-right: 60px;
    }

    .custom-nav-reg-btn button,
    .custom-nav-reg-btn > div > div > div.element-groups.Component-elementGroups-0-2-1 > div {
        padding-left: 12px;
        padding-right: 12px;
    }

    body > header > div.trade-template > nav > div > div.navbar-header.make-relative > span > div > img {
        min-width: 150px;
    }
}

/**************** Vertical Alignment ****************/
.studios-centre-vertical > div > div {
    height: 100%;
}

.studios-centre-vertical > div > div > div:nth-child(2) {
    display: flex;
    align-items: center;
    height: 100%;
}

@media (max-width: 767px) {
    .studios-centre-vertical > div > div > div:nth-child(2) {
        flex-direction: column;
    }

    .studios-mob-col-swap > div > div > div.element-groups.Component-elementGroups-0-2-1 {
        display: flex;
        flex-direction: column-reverse;
    }
}

/**************** Modal ****************/
.modal.rsvp-modal.in {
    z-index: 99999;
}

/**************** Image Radius ****************/
.studios-img-radius-sm img {
    border-radius: 25px !important;
}

.studios-img-radius-lg img {
    border-radius: 300px !important;
}

/**************** Full Width Content ****************/
.studios-header-full .main-app-container {
    max-width: 90vw !important;
}

/**************** Title Case Titles ****************/
.studios-title-titlecase .attendees-faces > div > div > h2,
.studios-title-titlecase .venue-information > div > div > h2,
.studios-title-titlecase > div > div > div:nth-child(1) > h2 {
    text-transform: capitalize !important;
}

/**************** Agenda Button Colors ****************/
.session-control-buttons > button.back-to-agenda,
.speaker-share-button,
.speaker-back-button,
.speaker-view .speaker-container .speaker-profile .speaker-back-button .speaker-back-button-label {
    background-color: var(--a2it-color4) !important;
    color: var(--a2it-color1) !important;
}

.speaker-share-button > svg {
    fill: var(--a2it-color1) !important;
}

/**************** Font Settings ****************/
:root {
    --a2it-bold-font: 'ModernEra';
    --a2it-reg-font: 'modernEraMedium';
    --a2it-session-box-radius: 25px;
    --a2it-session-btn-radius: 8px;
    --a2it-session-extra-radius: 360px;
}

.agenda-search-container .search-session input,
.agenda-search-container .search-session input::placeholder,
.agenda-view #sessions-filter > span,
.agenda-view ul.bz-hoc-filter *:not(i),
.agenda-view .no-ticket-popover *,
.agenda-search-container button.day-elems,
.agenda-view div.login-buttons-container > button,
.session-container div.speaker-title,
.session-container div.speaker-company,
.session-container span.session-info-text-light,
.session-info-text .session-time,
.session-container div.session-description-inner,
.agenda-view .tab-buttons-container,
.agenda-view .session-list-container .no-sessions-container,
.agenda-view .session-page .session-info-container .session-dates,
.preview-window-container .agenda-view .session-page .session-info-container .session-dates,
.preview-window-container .agenda-view,
.agenda-view .session-page .session-info-container .session-actions .session-view-action,
.agenda-view .session-page .session-control-buttons .control-button.back-to-agenda,
.agenda-view .session-page .session-section-container,
.agenda-view .session-page.container,
.speaker-view .speaker-container .speaker-profile,
.speaker-view .speaker-container .speaker-profile .speaker-community-like-wrapper span,
.speaker-view .speaker-container .speaker-profile .speaker-share-button,
.speaker-view .speaker-container .speaker-profile .speaker-back-button,
.speaker-view .speaker-container .speaker-sessions-twitter-wrapper .speaker-sessions,
.session-actions-popover .popover-content .session-action-popup h3.short,
.session-actions-popover .popover-content .session-action-popup .positive-button,
.agenda-view .session-list-container .session-day-container .time-row .session-elem .session-container .broadcasting-container .join-broadcast-btn,
.agenda-live-banner .live-sessions-row .live-session-box .join-broadcast-btn,
.me-menu-sign-out,
.speaker-view .speaker-container .speaker-profile .speaker-back-button .speaker-back-button-label,
.agenda-view .session-list-container .session-day-container .time-row .session-elem .session-container .session-name a,
.agenda-view .session-list-container .session-day-container .time-row .session-elem .session-container .session-name span,
.agenda-view .session-list-container .session-day-container .time-row .session-elem .session-container .speakers-container .speakers-carousel .speaker-info .speaker-name,
.agenda-view .session-page .session-info-container .session-dates,
.agenda-view .session-page .session-info-container .session-title,
.agenda-view .session-page .session-section-title,
.agenda-view .session-page .session-speaker-container .speaker-info .speaker-name,
.speaker-view .speaker-container .speaker-profile .speaker-name-wrapper .speaker-name,
.speaker-view .speaker-container .speaker-sessions-twitter-wrapper .speaker-sessions,
.speaker-sessions-title.text-ellipsis.bz-bold.custom-font.margin-left-small.margin-right-small,
.speaker-view .speaker-container .speaker-sessions-twitter-wrapper .speaker-sessions .speaker-session .speaker-session-location,
.speaker-view .speaker-container .speaker-sessions-twitter-wrapper .speaker-sessions .speaker-session a .speaker-session-title,
.session-info-text .session-info-text-light,
.agenda-view .session-list-container .session-day-container .time-row .session-elem .session-container .session-info .session-location,
.agenda-view .session-page .session-info-container .session-location {
    font-family: var(--a2it-reg-font), 'Titillium Web' !important;
    color: var(--a2it-color3);
}

.agenda-view div.tab-button-wrapper > div > button.tab-button > span,
.agenda-search-container button.day-elems.selected,
.session-day-container span.day-title > span,
.session-day-container div.time-elem > div,
.session-container div.sponsored-by,
.session-container div.speaker-name,
.session-container span.start-time,
.session-container span.end-time {
    font-family: var(--a2it-bold-font), 'Titillium Web' !important;
    color: var(--a2it-color3);
}

/**************** AGENDA STYLE ****************/
.session-list-view.list {
    margin-top: 235px !important;
    padding-top: 20px !important;
}

.agenda-view .join-broadcast-btn {
    border-radius: var(--a2it-session-btn-radius) !important;
}

.session-container {
    border-radius: var(--a2it-session-box-radius) !important;
    background: var(--a2it-color4) !important;
    border-color: var(--a2it-color1) !important;
}

.agenda-view div.ticket-select-holder,
#sessions-filter,
.agenda-view .agenda-search-container .agenda-search .search-row .select-ticket-section .ticket-select-holder,
.agenda-view .agenda-search-container .agenda-search .search-row .search-session .bz-autosuggest .form-control,
.agenda-search-container .search-session input,
.agenda-view div.login-buttons-container > button {
    background-color: var(--a2it-color4);
    border-radius: var(--a2it-session-extra-radius) !important;
}

/**************** AGENDA SPEAKER STYLE ****************/
.speaker-view {
    background-color: #EAEAEB !important;
    opacity: 100% !important;
    min-height: 100vh;
}

.speaker-view .speaker-container .speaker-profile,
.speaker-view .speaker-container .speaker-sessions-twitter-wrapper .speaker-sessions {
    border-color: var(--a2it-color4);
}

.speaker-view .speaker-container .speaker-profile {
    border-top-left-radius: 1px;
    border-top-right-radius: 1px;
    border-bottom-right-radius: var(--a2it-session-box-radius);
    border-bottom-left-radius: var(--a2it-session-box-radius);
}

.speaker-view .speaker-container .speaker-sessions-twitter-wrapper .speaker-sessions {
    border-radius: var(--a2it-session-box-radius);
}

.speaker-view .speaker-container .speaker-profile .speaker-image-wrapper .speaker-image-stub {
    border: 0;
    border-radius: 180px;
}

/**************** AGENDA SESSION STYLE ****************/
.session-page.container:not(.transparentContainer),
.agenda-view--session .session-page .session-section-container {
    border-color: var(--a2it-color4);
}

.session-page.container:not(.transparentContainer) {
    border-top-left-radius: 1px;
    border-top-right-radius: var(--a2it-session-box-radius);
    border-bottom-right-radius: var(--a2it-session-box-radius);
    border-bottom-left-radius: var(--a2it-session-box-radius);
}

.agenda-view--session .session-page .session-section-container {
    border-radius: var(--a2it-session-box-radius) !important;
}

.agenda-view .session-page .session-speaker-container .speaker-info .speaker-name {
    color: var(--a2it-color1);
}

.agenda-view .session-page .session-speaker-container .speaker-photo {
    border-radius: 80px;
}

/*Remove Session Description Fading*/
.agenda-view .session-list-container .session-day-container .time-row .session-elem .session-container .preview-session-description.faddedAway {
   -webkit-mask-image: none;
   mask: -moz-linear-gradient(linear, left top, left bottom, from(#000000), to(rgba(0, 0, 0, 0)));
}

@media screen and (min-width: 1024px) {
    .slick-track {
        width: 1200px !important;
    }
}


/**************** HIDE SECTIONS ****************/
.hide-desktop {
    display: none;
}

@media (max-width: 767px) {
    .hide-desktop {
        display: block;
    }
}

.hide-mobile {
    display: block;
}

@media (max-width: 767px) {
    .hide-mobile {
        display: none;
    }
}

/**************** PHOTO GALLERY ************/
.container {
    position: relative;
}

.mySlides {
    display: none;
}

.cursor {
    cursor: pointer;
}

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 40%;
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

.caption-container {
    text-align: center;
    background-color: #222;
    padding: 2px 16px;
    color: white;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.column {
    float: left;
    width: 16.66%;
}

.demo {
    opacity: 0.6;
}

.active,
.demo:hover {
    opacity: 1;
}
/**************** AGENDA PAGE BACKGROUND ****************/
.agenda-view.session-list-view.agenda-custom-css.sideBySide.row {
    background-color: #eaeaeb !important;
}

/**************** AGENDA ARROWS CANCELLATION FOR BG COLOR ****************/
.agenda-view .slick-next.transparent-arrow {
    display: none !important;
}
.agenda-view .slick-prev.transparent-arrow {
    display: none !important;
}
/*removing the heading in the custom element to reduce top spacing*/
/*donot use this if there is another H2 in the section*/
.remove-h2-section h2 {
    display: none !important;
}


/**************** B U T T O N S ****************/


/**************** REGISTER BUTTON ****************/

.btn.btn-success.btn-register.save-action.col-sm-offset-4.col-sm-4.col-xs-12.atom-button.color-1-background.color-1-hover-opacity.mark-v-lg.ladda-button {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  font-size: 20px !important;
  background-color: #6c2bff !important;
  color: #ffffff !important;
  border: 2px solid #6c2bff !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
  padding: 10px 20px !important; /* Optional: adjust for better spacing */
}

.btn.btn-success.btn-register.save-action.col-sm-offset-4.col-sm-4.col-xs-12.atom-button.color-1-background.color-1-hover-opacity.mark-v-lg.ladda-button:hover {
  background-color: #ffffff !important;
  color: #6c2bff !important;
  border: 2px solid #6c2bff !important;
}

/**************** WITH PAGE REPORTS BUTTON ****************/

.ev-link-with-title.btn.btn-md.btn-success.submit-entry-cta-home.margin-top-0 {
  background-color: #6c2bff !important;
  color: #ffffff !important;
  border: 2px solid #6c2bff !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
  font-size: 18px !important;
}

.ev-link-with-title.btn.btn-md.btn-success.submit-entry-cta-home.margin-top-0:hover {
  background-color: #ffffff !important;
  color: #6c2bff !important;
  border: 2px solid #6c2bff !important;
  font-size: 18px !important;
}

/**************** NAVIGATION CUSTOM BUTTON****************/
#custom-nav-button {
    position: fixed !important;
    top: 15px;
    right: 110px;
    z-index: 999999 !important;
    pointer-events: auto;
}

.nav-button {
    background-color: #6c2bff !important;
    color: #ffffff !important;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 16px;
    font-family: 'ModernEra', sans-serif !important;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: inline-block;
}

.nav-button:hover {
    background-color: #ffffff !important;
    color: #6c2bff !important;
}

.btn-register {
    text-align: left !important;
}

/***************** NORMAL BUTTON HOVER ANIMATION *************/

.atom-main.btn.btn-custom-element.padding-horizontal-medium.border-transparent {
    background-color: #6c2bff;
    color: #ffffff;
}
.atom-main.btn.btn-custom-element.padding-horizontal-medium.border-transparent:hover {
    background-color: #ffffff;
    color: #6c2bff;
}