/* ---------- TOP ---------- */

.eventsWelcome {
    background-image: url('https://coach2.appandweb.be/templates/commons//resources/events-hero-background.jpg');
    background-position: center center;
    background-size: cover;
    height: 500px;
}
.eventsWelcomeContent {
    height: calc(100% - 100px);
    position:absolute;
}
.eventsWelcomeTitle {
    font-size: 40px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600;
    letter-spacing: -1px;
}



/* ---------- PAGE  ---------- */

.eventsListContainer {
    background-image: url('https://coach2.appandweb.be/templates/commons//resources/bg-circle-top.png');
    background-position: center top;
    background-size: 100%;
    background-repeat: no-repeat;

}


/* ---------- FILTERS  ---------- */

.eventsListFilters {
    border-radius: 0px 0px 12px 12px;
}

.eventsListFilters label {color: #333 !important;}


label.labelFilter { margin-right: 11px; cursor: pointer;}
label.labelFilter span {font-size: 14px; padding-left: 6px;}

label.labelFilter > input[type="checkbox"] {
    display: none;
}

label.labelFilter  > input[type="checkbox"] + *::before {
    content: "";
    display: inline-block;
    vertical-align: bottom;
    width: 22px;
    height: 22px;
    /*border-radius: 60px;*/
    margin-right: 6px;
}

label.labelFilter > input[type="checkbox"]:checked + *::before {
    content: "\f00c";
    text-align: center;
    font-family: 'Font Awesome 5 Pro';
}


.selectEventMonth {
    margin-right: 16px;
    margin-left: 11px;
}

.selectEventMonth select {
    border-radius: 60px;
    padding: 6px 11px;
    width: calc(100% + 12px);
    font-size: 14px;
    padding-right: 20px;
    cursor: pointer;

}

.selectEventMonth .fa-angle-down {
    right: 0;
    top: 9px;
    margin: 0;
}




/* ---------- LIST  ---------- */

.eventsList {
    margin-top: 44px;
    margin-bottom: 44px;
}

.eventsListBloc {
    max-height: 360px;
    border-radius: 12px;
    margin-bottom: 33px;
}

.eventsListBloc .eventBanner {
    max-height: 105px;
    height: 100%; width: 100%;
    object-fit: cover;
    border-radius: 12px 12px 0px 0px;
    position: relative;
    top: 0;
}

.eventBannerInfosTop {
    z-index: 501;
}

.eventBannerInfosTop p {
    font-size: 11px;
    border-radius: 12px 0px 12px 0px;
    padding: 6px 11px;
    height: 28px;
    text-transform: uppercase;
}

.eventBannerInfosTop a.socialShare {
    width: 28px; height: 28px;
    border-radius: 0px 12px 0px 12px;
}

.eventBannerInfosBottom {
    width: 100%; max-height: 40px;
    padding: 6px 11px;
    justify-content: space-between;
}

.eventBannerInfosBottomReplay {
    width: 100%; max-height: 40px;
    padding: 6px 11px;
    justify-content: center;
    cursor: pointer;
}

.eventBannerInfosBottom p, .eventBannerInfosBottomReplay p {font-size: 12px;}

.eventBlocDetail {
    padding: 11px;
}

.eventBlocDetail h2 {
    font-size: 18px; font-weight: normal; line-height: 110%; color:#333 !important;height: 42px;
    /* ellipsis */
    display: block;
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;

}

.eventSpeakerPP {
    width:28px; height: 28px;
}

.participantsSubTitle {
    padding-bottom: 0px;
    margin-bottom: 0px;
    font-size: 10px;
}

.presentedBy {font-size: 13px;}
.presentedBy span {font-weight: 500;}


.eventBlocLinks {
    border-radius: 0px 0px 12px 12px;
}

.howManyParticipants {
    font-weight: 600;

}

.linkToEventDetail {
    height: 40px;
    width: 40px;
}

.linkToEventDetail:hover {
    margin-right: 6px;
    text-decoration: none !important;
}

/* ---------- DETAIL  ---------- */

.detailEventPage {
    background-image: url('https://coach2.appandweb.be/templates/commons//resources/bg-circle-top.png');
    background-position: center top;
    background-size: 100%;
    background-repeat: no-repeat;

}

.eventBannerBig {
    max-height: 450px;
    height: 100%; width: 100%;
    object-fit: cover;
    border-radius: 12px;
    top: 0;
    /*margin-top: 33px;*/
}

.eventBannerBigInfosContainer {
    display: flex;
    position: absolute;
    bottom: 0;
    padding-top: 100px;
    justify-content: space-between;
    border-radius: 0px 0px 12px 12px;
}

.eventBannerBigInfos {
    padding: 33px;
}
.eventBannerBigInfos h1 {
    font-size: 32px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 100%;
    margin-bottom: 2px;
    max-width: 1000px;
}

.eventBannerBigDate {
    border-radius: 12px 0px 12px 0px;
    padding: 11px;
}

.eventBannerBigDate h2 {
    font-size: 22px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600;
    /*min-width: 235px;*/
    text-align: right;
}

.howManyParticipantsGoing {
    font-size: 14px;
    opacity: 0.6;
}

.eventDetailContent {
    margin-top: 33px;
}

.eventDetailBigColumn, .eventDetailSmallColumn {
    border-radius: 12px;
    padding: 33px;
    margin-bottom: 33px;
}


.eventDetailTitle {
    font-size: 19px;
    font-family: 'Montserrat', sans-serif !important;
    width: 100%;
    font-weight: 500;
    padding-bottom: 11px;
    margin-bottom: 22px;
    /*margin-top: 11px;*/
}

.eventDetailBigColumn p {font-size: 14px;}

.eventDetailContent h4 {
    font-size: 16px;
    font-family: 'Montserrat', sans-serif !important;
    width: 100%;
    font-weight: 500;
    margin: 11px 0px;
}

.eventDetailInfos {
    border-radius: 10px;
}


.eventDetailInfosIcon {
    width: 84px;
    height: 84px;
    font-size: 32px;
}

.eventDetailInfosWhen .eventDetailInfosIcon {
    border-radius: 8px 0px 0px 8px;
}
.eventDetailInfosWhen:first-child {border-bottom-width: 0px !important;}
.eventDetailInfosWhen:last-child .eventDetailInfosIcon {border-radius: 0px;}

.eventDetailInfosText {
    margin-left: 11px;
    font-weight: 600;
    font-size: 16px !important;
}
.eventDetailInfosTextMedium {
    font-size: 14px !important;
}
.eventDetailInfosTextSmall {
    font-size: 13px !important;
    font-weight: 500;
}

.eventDetailInfosList {
    margin: 6px 0px 11px 11px;
}

.eventDetailInfosList li {
    font-size:  14px !important;
    font-weight: 400;
}

.eventDetailInfosWhenSeveral .eventDetailInfosIcon {
    border-radius: 8px 0px 0px 8px;
    /*padding-top: 14px;*/
}


.organiserLogo {
    border-radius: 60px;
    width: 124px; height: 124px;
    object-fit: cover;
    margin-right: 16px;
}

#subscribeToEventTrigger {flex-wrap: wrap; display: flex;}

.eventDetailContent h5 {
    font-size: 16px;
    font-family: 'Montserrat', sans-serif !important;
    width: 100%;
    font-weight: 600;
    margin: 11px 0px;
}


.eventCountdown {
    border-radius: 12px 12px 0px 0px;
    padding: 6px 11px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
}

.eventCountdown span {
    opacity: 0.6;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: normal;
}

.eventIsOver i {
    /*background: #f2f2f2;*/
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 60px;
    font-size: 30px;
    margin-bottom: 11px;
}

.eventIsOver p {
}

.reminderContainer {display: flex;}

.speakerDescription, .reminderDescription  {font-size: 14px; line-height: 130%}

.reminderDescription {padding-right: 11px;}

.iconReminder {
    min-width: 84px; min-height: 100px; height: 100%;
    background: #323E52;
    border-radius: 12px 0px 0px 12px;
}

.organiserInfos {
    align-items: flex-start;
    /*justify-content: space-between;*/
}

.organiserInfos h5 {margin: 0px;}
.organizerWebsite {font-size: 13px;}
.organizerWebsite:last-child {margin-left: 6px;}

.organizerLinks {justify-content: flex-end  }


.iconCoachLinkedin {
    font-size: 20px;
    width: 40px;
    max-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 60px;
    cursor: pointer;
}

.iconReminder {font-size: 30px;}

.speakerDescription, .speakerName, .reminderDescription, .organizerWebsite {margin-left: 11px;}
.organiserInfos .speakerName {margin-left: 0px; font-size: 14px !important;}

.speakerName {line-height: 125%; font-size: 15px; font-weight: 500;}

.speakersIcon {
    border-radius: 60px;
    width: 80px; height: 80px;
}

.speakersIcon i {font-size: 24px}

/* -------- POP UP ----------- */

.popupRegisterEvent .popupRegisterEventHeader {
}

.popupRegisterEvent {
    max-width: 536px;
    padding: 0px;
    /*height: auto !important;*/
    /*max-height: 740px !important;*/
    min-height: 650px;
    border-radius: 10px;
    overflow: scroll;
    margin: 0 auto;
    margin-top: 80px;
    height: fit-content;
    min-height: auto;
}

.popupRegisterEvent .popupRegisterEventHeader .popupRegisterEventHeaderInfos {
    bottom: 0;
    display: flex;
    flex-direction: column;
    padding-top: 50px;
}

.popupRegisterEventHeaderInfos p {
    padding: 0px 11px;
}

.popupRegisterEventHeaderInfosDate {
    border-radius: 6px 6px 0px 0px;
    margin: 0px;
    padding: 6px 10px;
    display: inline-block;
}


.popupRegisterEventHeaderBanner {
    width: 100%;
    max-height: 170px;
    object-fit: cover;
}

.popupRegisterEvent form label {
    font-size: 13px;
}


.popupRegisterEvent form input {
    border-radius: 4px;
}

.popupRegisterEvent .buttonSubmit {
    width: auto;
    margin-top: 22px;
    margin-bottom: 22px;
    padding: 0px 11px !important;
}

.popupRegisterEvent .errorMessage {
    top: 16px;
}

.popupRegisterEvent input {
    margin-top: 6px;
    padding: 10px 10px !important;
}

.popupRegisterEvent .editorInputBulleError input {
    padding: 10px 10px !important;
    margin-top: 12px;
}

.popupRegisterEvent .editorInputBulleError {

}

.popupRegisterEvent .iconOK, .popupRegisterEvent .iconError {
    top: 46px;
}



/* --------------------------------------- MEDIAQUERIES  --------------------------------------- */


@media only screen and (max-width: 1024px) {

    .eventBannerBigInfos {padding: 0px; width: 100%;}

    .eventsWelcome {height: auto;}
    .eventsWelcomeTitle {font-size: 28px; width: 85%;}
    .eventsWelcomeContent {height: auto; position: relative; margin-bottom: 20px;     margin-top: 20px;}
    .logoZone {margin-bottom: 11px;}
    .labelFilter { width: 100%; padding: 11px 0px;margin: 0px 0px 11px 0px;}
    .selectEventMonth {margin-top: 11px; width: 100%;}
    .eventBannerBigInfos h1 {font-size: 24px; text-align: center; margin-bottom: 6px}
    .eventBannerBigDate h2 {min-width: 100%; text-align: center;}
    .eventBannerBigDate {width: 100%; border-radius: 0px 0px 12px 12px;}
    .eventBannerBig {    max-height: 190px;}
    .eventBannerBigInfosContainer {        flex-wrap: wrap;}

    .howManyParticipantsGoing {text-align: center;}

    .eventDetailBigColumn, .eventDetailSmallColumn {padding: 22px; margin-bottom: 22px;}

    .organiserInfos {
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .organiserLogo {margin-bottom: 20px;}

    .organizerWebsite {
        /*margin: 0 auto;*/
        margin-bottom: 6px;
        /*display: table;*/
    }
    /*.speakerDescription, .speakerName, .organiserInfos .speakerName   {margin-left: 0px; text-align: center;}*/
    .eventDetailInfosText {display: flex; flex-direction: column;}

    .eventDetailInfosText .smallUTC {margin-left: 0px;}

    .organizerLinks {
        flex-direction: row;
        justify-content: center;}

    .organiserInfos .speakerName {margin-left: 0px;}


    .liveStreamAuth {
        background: red;
    }
    

}

@media only screen and (max-width: 768px) {


    .pageContainer {width: 100%; padding: 0px 11px;}

    /* CONTENT */

    /* masquer les infos dans l'image */
    .eventBannerBigInfosContainer {display: none;}

    /*.eventDetailContent .col-md-12 {padding: 0px;}*/

    .eventBannerBig {margin-top: 11px;}
    .eventDetailContent {margin-top: 16px;margin-left: 0px !important; margin-right: 0px !important;}
    .eventDetailContent .col-12 {padding: 0px}

    .eventDetailBigColumn, .eventDetailSmallColumn {
        border-radius: 12px;
        padding: 15px;
        margin-bottom: 22px;
        width: 100%;
    }

    .filtersLeft {flex-direction: column}

    .eventDetailTitle {margin-bottom: 16px;}


    /* presentation bloc */

    .eventDetailTitle {font-size: 15px !important; font-weight: 600;}
    .eventDetailInfos {flex-direction: column;}

    .eventDetailInfos .eventDetailInfosWhen, .eventDetailInfos .eventDetailInfosWhenSeveral, .eventDetailInfos .eventDetailInfosWhere {
        width: 100%;
    flex: 0 0 100%;
        max-width: 100%;

    }

    .eventDetailInfos .eventDetailInfosWhen {
        padding: 11px !important;
        padding-left: 0px !important;
    }

    .eventDetailInfos .eventDetailInfosWhere {
        padding: 11px !important;
        padding-left: 0px !important;
    }

    .eventDetailInfos .eventDetailInfosWhenSeveral {
        margin-left: -11px;
    }
        

    
    .eventDetailInfos .eventDetailInfosWhen:first-child {
        border-radius: 8px 8px 0px 0px;
        border-bottom-width: 1px !important;
    }

    .eventDetailInfos .eventDetailInfosWhen:first-child .eventDetailInfosIcon {border-radius: 8px 0px 0px 0px;}
    .eventDetailInfos .eventDetailInfosWhen:last-child {border-radius: 0px 0px 8px 8px;}
    .eventDetailInfos .eventDetailInfosWhen:last-child .eventDetailInfosIcon {border-radius: 0px 0px 0px 8px;}

    .eventDetailInfosWhereContainer {margin-top: 11px; }
    .eventDetailInfos .eventDetailInfosWhere .eventDetailInfosIcon {border-radius: 8px 0px 0px 8px !important;}


    .eventDetailInfos .eventDetailInfosIcon {
        width: 50px;
        height: 50px;
        min-height: 50px;
        min-width: 50px;
        font-size: 24px;
        display: none !important;
    }

    .eventDetailInfosText { font-size: 14px !important; line-height: 120% !important;}
    .eventDetailInfosWhereContainer .eventDetailInfosText {width: 100%;}
    .eventDetailInfosWhereContainer .eventDetailInfosText span {display: contents;}

    /* organisateur bloc */
    .organiserInfos .organiserLogo {margin-right: 0px; width: 84px; height: 84px;}
    .organiserInfos .speakerName {font-size: 15px !important; margin-bottom: 11px; margin-left: 0px; text-align: center;}

    .organiserInfosDetail p.customHtmlEditor, .organiserInfosDetail a.customHtmlEditor  {text-align: center;}
    .organiserInfosDetail ol.customHtmlEditor,  .organiserInfosDetail ul.customHtmlEditor {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .organiserInfos .organizerLinks {align-items: center !important; flex-direction: column}
   .organizerWebsite, .organizerWebsite:last-child {margin-left: 0px;}
   


    /* form bloc / mobile only */
   /*.subscribeToEventFormNoPopupContainer {background: red;}*/
    .eventSubscriptionMobile #registerEventPopup.containerPopup {
        display: block !important;
        position: relative;
        z-index: 5;
        background: none;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;

    }

    .eventSubscriptionMobile #registerEventPopup #registerEvent {
        max-width: 100%;
        min-width: 100%;
        width: 100%;
        background: none;
        position: relative !important;
        display: inline-block;
        margin-top: 0px;
        border-radius: 0px;
    }

    .eventSubscriptionMobile #registerEventPopup .popupRegisterEventHeader {display: none;}


    .eventSubscriptionMobile #subscribeToEventForm {padding: 0px !important; }
    .eventSubscriptionMobile #subscribeToEventForm label {font-size: 13px;}
    .eventSubscriptionMobile #subscribeToEventForm input {
        margin-bottom: 16px;
        outline: 0;
        box-shadow: none;
        padding: 8px 10px;
        font-size: 14px;}
    .eventSubscriptionMobile #subscribeToEventForm input:focus {
        outline: 0;
        box-shadow: none; }


    .eventSubscriptionMobile #subscribeToEventForm .buttonSubmit {
        width: 100%;
        margin-bottom: 0px;
        margin-top: 16px;
        font-size: 14px;
    }


    .eventSubscriptionMobile .popupConfirmationForm {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .eventSubscriptionMobile .popupConfirmationFormContent {
        height: auto !important;
    }

    .eventSubscriptionMobile .popupRegisterEvent .iconOK, .eventSubscriptionMobile .popupRegisterEvent .iconError {
        top: 46px;
    }


    .eventIsOver p {margin-bottom: 0px;}

    /* countdown */
    .eventCountdown {
        font-size: 14px !important;
        display: none;
    }

    .eventCountdown span {
        font-size: 14px !important;
    }


    /* rappels bloc */
    .iconReminder {
        width: 70px;
        height: 70px;
        min-height: 70px;
        min-width: 70px;
    }

    .reminderContainer {display: none;}

    .reminderDescription {line-height: 120% !important; }


    .soloSpeakerInfos .organiserLogo, .multiSpeakerInfos .organiserLogo {
        margin-right: 0px;
    }


    .soloSpeakerInfos .speakerDescription, .multiSpeakerInfos .speakerDescription {
        margin: 0px;
    }

    .soloSpeakerInfos .speakerName, .multiSpeakerInfos .speakerName {
        font-size: 14px !important;
    }


    /* pop up*/

    .popupRegisterEventHeaderInfos {display: none !important;}



    /**/

    .eventsList {margin-bottom: 0px; margin-top: 22px;}

    .eventsWelcomeTitle {
        font-size: 18px !important;
        letter-spacing: 0px;
    }

    .labelFilter {font-size: 13px; padding: 0px;}
    .labelFilter:first-child {margin-bottom: 11px }
    .labelFilter:last-child {margin-bottom: 0px;}
    .labelFilter span {font-size: 13px !important;}

    .filtersLeft {margin-top: 16px; width: 100%; align-items: flex-start !important; }
    .searchBarContainer {width: 100%}
    .searchBarContainer input {width: 100%}
    .searchBar {font-size: 13px;}
    .selectEventMonth {margin-left: 0px !important; margin-right: 0px !important;}
    .selectEventMonth select {width: 100%;font-size: 13px;}
    .selectEventMonth .fa-angle-down {right: 13px;}


    .eventBlocDetail h2 {height: auto;
        line-height: 120%;
        font-size: 14px !important;
        font-weight: 600;}

}