/* Import montserrat font */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

.WaGadgetEvents DIV.registrationInfoContainer {
  display: none;
}

.widgetMode {
  /* The widget container */
  overflow-x: clip;

  Body,
  html.widgetMode {
    background-color: white;
  }

  /* The fonts styles for the widget */
  BODY,
  TD,
  P,
  p,
  H1,
  h1,
  H2,
  h2,
  H3,
  h3,
  H4,
  h4,
  H5,
  h5,
  H6,
  h6,
  .text {
    font-family: "Montserrat", serif;
    color: #1b2137;
    font-weight: 500;
    font-size: 16px;
  }

  /* The custom font paragraphs*/
  font {
    font-family: "Montserrat", serif;
    color: #1b2137;
    font-weight: 500;
  }

  /*H3 Section titles and Strong headings fonts */
  strong font,
  h3.sectionTitle {
    font-size: 24px;
    font-family: "Montserrat", serif;
    font-weight: 700;
  }

  /* The page body */
  .cnPrimaryContentContainer .d9PrimaryContentContainer,
  div#idPrimaryContentBlock1ContentHolder,
  .cnPrimaryContentContainer .d7PrimaryContentContainer,
  .cnPrimaryContentContainerBottomCorners.cornersContainer .bottomCorners .c1,
  .cnPrimaryContentContainerBottomCorners.cornersContainer {
    filter: none;
    background: white;
  }

  .WaGadgetEvents.WaGadgetEventsStateList .pageTitleOuterContainer,
  .WaGadgetEvents.gadgetEventsCalendar .pageTitleOuterContainer {
    float: left;
  }

  /* The top and bottom red line of the widget */
  .cnMainContainerTopCorners.cornersContainer,
  .cnMainContainerBottomCorners.cornersContainer {
    filter: none;
    background: red;
    /*width: 95vw*/
  }

  /* The links */
  .cnPrimaryContentBlock1Content A,
  .cnPrimaryContentBlock1Content A:link,
  .cnPrimaryContentBlock1Content A:active,
  .cnPrimaryContentBlock1Content A:visited {
    color: #1b2137;
  }

  /* Switch to calendar/list view link */
  a#FunctionalBlock1_ctl00_eventPageViewBase_ctl00_ctl00_eventListViewSwitcher_calendarModeLink,
  a#FunctionalBlock1_ctl00_eventPageViewBase_ctl00_ctl00_eventListViewSwitcher_listModeLink {
    color: red;
  }

  /* Past event list row */
  .pastEventsList tr {
    display: flex;
    flex-direction: column;
    padding: 24px;
    width: 80%;
    gap: 24px;
    margin-bottom: 24px;
    border: 1px solid #f0f0f0;
    border-radius: 2px;
    cursor: pointer;
    &:hover {
      background-color: #f0f0f0;
    }
  }

  /* Each past event list label (e.g: date) */
  .pastEventsList td.left {
    font-weight: 400;
  }

  /* The past eventtitle (date) */
  .pastEventsList a {
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
  }

  /* The event page title */
  h1.pageTitle,
  .cnPrimaryContentBlock1Content h1.pageTitle {
    font-family: "Montserrat", serif;
    color: red;
  }

  /* The event details page summary box container */
  .cnPrimaryContentContainer
    .block
    .WaGadgetEventsStateDetails
    .boxBodyInfoContainer
    .d9,
  .WaGadgetEventsStateDetails .boxBodyInfoContainer .d9 {
    padding: 7px 10px;
    background-color: red;
    border-radius: 8px;
  }

  /* The event details page summary box inner wrappers, top and bottom margin */
  .boxBodyInfoViewFill .cornersContainer .topCorners,
  .boxBodyInfoViewFill .cornersContainer .bottomCorners,
  .boxBodyInfoViewFill .boxBodyInfoContainer,
  .boxBodyInfoViewFill .boxBodyInfoContainer .d1 {
    filter: none;
    background: none;
  }

  /* The event details page summary labels */
  .WaGadgetEvents .boxInfoContainer UL.boxInfo LI LABEL,
  .boxBodyInfoViewFill .boxBodyInfoContainer {
    color: white;
    font-size: 14px;
    font-weight: 600;
  }

  /* The event details page summary status like registration closed */
  .inner .infoRegistrationIsClosed {
    font-weight: bold;
    color: white;
  }

  /* THE EVENT CALENDAR VIEWS */

  /* The event calendar header (month and week view)  */
  .EventListCalendarHeader {
    border-bottom: solid 1px #1b2137;
    background-color: red;
    color: #fff;
  }

  /* The event calendar header (year view) */
  A.yearViewHeader,
  A.yearViewHeader:link,
  A.yearViewHeader:active,
  A.yearViewHeader:visited {
    background-color: red;
    color: #fff !important;
    &:hover {
      background-color: #1b2137 !important;
    }
  }

  /* MEMBERSHIP Section*/
  .infoOuterContainer .infoContainer .d5 {
    filter: none;
    background: red !important;
    color: white;
    border-radius: 8px;
  }

  /* Membership details section*/
  .boxViewOutline .cornersContainer .topCorners,
  .infoOuterContainer .cornersContainer .topCorners,
  .captionOuterContainer .cornersContainer .topCorners,
  .boxViewOutline .cornersContainer .bottomCorners,
  .infoOuterContainer .cornersContainer .bottomCorners,
  .captionOuterContainer .cornersContainer .bottomCorners {
    filter: none;
    background: none;
  }

  /* Membership label for example (level) */
  .WaGadgetPublicWizard .infoContainer .infoTitle,
  .publicWizardNameContainer .infoContainer .infoTitle,
  .WaGadgetMembershipApplication .infoContainer .infoTitle,
  .WaGadgetDonationForm .infoContainer .infoTitle,
  .WaGadgetSubscriptionFormStateMain .infoContainer .infoTitle,
  .WaGadgetEventsStateRegistration .infoContainer .infoTitle {
    color: white;
    font-weight: 700;
  }

  /* UPCOMING EVENTS*/

  /* upcoming event header */
  .boxViewOutline .boxHeaderContainer .d2 {
    filter: none !important;
    background: red !important;
  }

  /* upcoming event right side */
  .boxViewOutline .boxBodyOuterContainer .d2 {
    filter: none;
    background: white;
  }

  /* border around upcoming event container */
  .boxBodyContainer .inner {
    border-width: 1px !important;
    border-style: none !important;
    border-color: transparent !important;
  }

  /* upcoming event labels */
  label.eventInfoBoxLabel {
    color: #2e2e2e !important;
    font-weight: 600 !important;
  }

  /* Presentation overview cutoff */
  .boxBodyContentOuterContainer {
    overflow: scroll;
  }

  /* register, apply for membership, next button for upcoming event */
  input#FunctionalBlock1_ctl00_eventPageViewBase_ctl00_ctl00_UpcomingEventsRepeater_ctl01_eventRegistrationActions_RegistrationLink_bt,
  input#FunctionalBlock1_ctl00_eventPageViewBase_ctl00_ctl00_stepTemplate_registrationTopMessage_suggestToApplyMessage_suggestToApplyButton,
  input#FunctionalBlock1_ctl00_eventPageViewBase_ctl00_ctl00_stepTemplate_next {
    background-color: red !important;
    border: none !important;
    color: white !important;
    padding: 12px 32px !important;
    border-radius: 4px !important;
  }

  /* back button for upcoming event */
  input#FunctionalBlock1_ctl00_eventPageViewBase_ctl00_ctl00_stepTemplate_prev {
    background-color: #2e2e2e !important;
    border: none !important;
    color: white !important;
    padding: 12px 32px !important;
    border-radius: 4px !important;
  }

  /* show details button in upcoming event container */
  .WaGadgetEvents .boxViewOutline .boxFooterOuterContainer .d2 {
    filter: none !important;
    background: red !important;
  }

  /* upcoming events registration sign in screen title */
  .cnPrimaryContentBlock1Content h1.pageTitle a,
  h1.pageTitle,
  .cnPrimaryContentBlock1Content h1.pageTitle a:link {
    font-family: Arial, Helvetica, sans-serif !important;
    color: red !important;
  }

  .confirmWindowInfo .cww3,
  .confirmWindowInfo .cww4,
  .confirmWindowInfo .cww-inner,
  .confirmWindowInfo .cww1,
  .confirmWindowInfo .cww2,
  .confirmWindowInfo .cww-inner {
    border-left-color: white !important;
    border-right-color: white !important;
    background-color: white !important;
  }

  /* show details part in the right bottom corner of upcoming event */
  .cnPrimaryContentContainer
    .block
    .innerContentBlock
    .WaGadgetEvents
    .boxViewOutline
    .boxFooterOuterContainer
    .inner {
    padding: 0px 0 0 10px;
    font-size: 13px;
  }

  @media screen and (max-width: 678px) {
    transform: scale(0.8);
    transform-origin: top left;

    .cnPrimaryContentContainer .boxBodyContainer .inner,
    .boxBodyContainer .inner {
      display: flex;
      flex-direction: column;
    }

    /* upcoming events container*/

    .cnPrimaryContentContainer
      .block
      .inner
      DIV.boxViewOutline
      DIV.boxBodyContainer
      .inner {
      display: flex;
      flex-direction: column;
    }

    /* past event lists */
    .pastEventsList tr {
      max-width: 300px;
    }

    /* seminar costs */
    .gadgetContentEditableArea {
      max-width: 300px;
      overflow-x: hidden;
      overflow-y: hidden;
    }

    /* upcoming event presentation overview */
    .inner.gadgetEventEditableArea {
      max-width: 300px;
    }
  }
}