/* Import Plus Jakarta Sans font */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');


/* Body */
body.cyclinguk {
  font-family: "Plus Jakarta Sans", Arial, Helvetica, sans-serif;
  font-optical-sizing: auto;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
}

body.cyclinguk p,
body.cyclinguk .p,
body.cyclinguk .page_section p,
body.cyclinguk .section-diagonal-left p,
body.cyclinguk .section-diagonal-right p,
body.cyclinguk p.form-text span {
  font-family: "Plus Jakarta Sans", Arial, Helvetica, sans-serif;
  font-optical-sizing: auto;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
}



body.cyclinguk h1,
body.cyclinguk h2,
body.cyclinguk h3,
body.cyclinguk h4 {
  font-family: "Plus Jakarta Sans", Arial, Helvetica, sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  color: #365269;
}


/* Site title */
body.cyclinguk .cyclinguk-sitetitle {
  display: none;
}


/* Let's make our main page content work better */
#pageContent {
  max-width: 850px;
  margin: 30px auto 90px auto;
  padding: 15px;
}

/* Typography */
body.cyclinguk h1,
body.cyclinguk h2,
body.cyclinguk h3,
body.cyclinguk h4 {
  margin-top: 0;
}

/* Scaleable heading fonts to be mobile friendly */
body.cyclinguk h1 {font-size: clamp(1.8rem, 2vw + 1rem, 3.0rem); margin-bottom: 30px;}
body.cyclinguk h2 {font-size: clamp(1.3rem, 2vw + 1rem, 1.8rem); margin-bottom: 20px;}
body.cyclinguk h3 {font-size: clamp(1.1rem, 2vw + 1rem, 1.2rem); margin-bottom: 15px;}
body.cyclinguk h4 {font-size: clamp(1.0rem, 2vw + 1rem, 1.1rem); margin-bottom: 15px;}

body.cyclinguk h1 {
  text-align: center;
}


/* Globally hide the "tab-title" from all pages */
h2.tab-title {
  display: none;
}


/* Make FontAwesome brand icons thicker */
body.cyclinguk .fa-brands,
body.cyclinguk .fab {
  font-weight: 600;
}


/*
 * COMMON ELEMENTS
 */

/* Breadcrumbs */
ul.breadcrumb {
  margin: 0 0 20px 0;
  padding: 8px;
  background-color: #F2F4F6;
  font-size: 13px;
  border-radius: 5px;
}

body.cyclinguk #mainContent ul.breadcrumb a,
body.cyclinguk #mainContent ul.breadcrumb > .active {
  color: #667085;
}


/* Pages such as "Edit your event" now have a page (sub) title and event date to help
 * with the visual presentation of the page */
#section_title .page-title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #365269;
  margin-bottom: 15px;
}

#section_title h1 {
  margin-bottom: 15px;
}

#section_title .event-date {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #365269;
  margin-bottom: 30px;
}



#pageContent .panel {
  padding: 30px;
  margin-bottom: 30px;
  background-color: #ebeef0;
  border-radius: 10px;
}

@media screen and (max-width: 499px) {
  #pageContent .panel {
    padding: 20px 15px;
    margin-bottom: 20px;
  }
  #pageContent h2 {
    margin-bottom: 10px;
  }
}


.sectionBlockLayout .section {
  margin-bottom: 60px;
}


/* Hero images
 * These are seen on Delivery Partner profile pages
 */

#partnerContent #section_about {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

 /* Container: full width, fixed height */
.delivery-partner-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;;
  overflow: hidden;
  border-radius: 10px;
  margin-top: 10px;
}

/* Background image positioning */
.delivery-partner-image .background-image-blur {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

/* Use the background image as a background (!) and add blur */
.delivery-partner-image .background-image-blur img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(10px);
  transform: scale(1.1);        /* Stops blurred edges from showing */
}

/* Foreground container sits above background image and centres the image */
.delivery-partner-image .foreground-image-focus {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Foreground image always fully visible (no cropping) */
.delivery-partner-image .foreground-image-focus img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
}


p.delivery-partner-description {
  max-width: 700px;
  margin: 15px auto 45px auto;
}


#pageContent .field-label {
  color: #365269;
  font-weight: 700;
  margin-right: 6px;
}

#section_title > div {
  margin-bottom: 30px;
}


#partnerContent #section_events h2 {
  text-align: center;
}

/* Adjust card spacing and sizing to display four in a row */
#partnerContent #section_events ul#eventsList {
  gap: 20px;
}

#partnerContent #section_events ul#eventsList li a {
  width: 300px;
}

/* Who knows what this container is for but it's just displaying a big white space */
#partnerContent #section_events .sectionBlockLayout {
  display: none !important;
}

#partnerContent #section_contact {
  text-align: center;
  max-width: 850px;
  margin: 0 auto 120px auto;
}

#partnerContent #section_contact .information-panel {
  align-items: center;
}



/* Hide action buttons
 * These are dropdown buttons at the end of each row of tables and often provide useful administrative tasks for that record.
 * Sometimes we don't want to display that button because.
 * This is achieved by adding the class "hideActionButtons" to the wrapping div.
 */ 

.hideActionButtons .dropdown.action {
  display: none;
}



/*
 * These buttons typically appear at the bottom of the page and include actions
 * such as Cancel and Preview.
 */
#additional-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-bottom: 90px;
}


/*
 * Information panels
 * These are used when we have lines of information, such as name, email address,
 * telephone number, Instagram address and so on. They are used to neatly position
 * and space out each line, the icon, field label and value.
 */

#mainContent .information-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  line-height: 1;
}

#mainContent .information-panel .panel-item.cost {
  line-height: 1.4;
}


#mainContent .information-panel .panel-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

#mainContent .information-panel .panel-item > span {
  display: block;
}

#mainContent .information-panel .icon {
  min-width: 30px;
  color: #365269;
}

#mainContent .information-panel .label {
  color: #365269;
  font-weight: 700;
  margin-right: 5px;
}

#mainContent .information-panel .panel-item a {
  font-weight: inherit;
}



/*
 * 'Update your event' button fudge
 * This button sits in a 6-col left-hand Bootstrap column
 * but we want to position it in the centre of the page.
 */

#main-form .form-custom-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#main-form .form-custom-actions > div {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}



/*
 * Custom tweaks for each section
 */

/* Section - At a glance */
#section_header .header-provider,
#section_header .header-type {
  font-size: clamp(1.0rem, 2vw + 1rem, 1.2rem);
  margin-bottom: 5px;
}

#section_header .header-type {
  /* margin-bottom: 20px; */
}


/* Section - How to take part */
#section_howtotakepart .takepart.how {
  margin-bottom: 15px;
}

#section_howtotakepart .information-panel {
  margin-bottom: 30px;
}


/* Section - Location */
#section_location .address {
  margin-bottom: 15px;
}

#mainContent #section_location a {
  font-weight: inherit;
}

@media screen and (max-width: 499px) {
  #mainContent .information-panel .panel-item.what3words {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}


/* Section - CTA */
#section_title .cta,
#section_cta {
  text-align: center;
}



/*
 * Event sign-up form 
 */

/*
 * Additional questions
 */

#pageContent table[data-name="additional_questions"] td {
  padding: 5px 0;
}


/*
 * Marketing consent form
 * Horrendous markup provided thanks to Microsoft...
 */

#pageContent table[data-name="marketing_consent"] td.checkbox-cell {
  flex-direction: inherit;
}

/* Scope to this specific Entity Form table */
#pageContent table[data-name="marketing_consent"] td.checkbox-cell {
  padding: 12px 0;
  vertical-align: top;

  /* display: grid; */
  /* grid-template-columns: 1fr 20px; /* .table-info | .control */
  /* grid-template-rows: auto auto auto; /* top desc | info+control | below desc */
  /* column-gap: 10px; */
  /* row-gap: 6px; */
  /* align-items: start; */
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

/* Row 2: table-info left, control right */
#pageContent table[data-name="marketing_consent"] td.checkbox-cell > .table-info {
  /* grid-column: 1; */
  /* grid-row: 2; */
  padding: 0;
}

#pageContent table[data-name="marketing_consent"] td.checkbox-cell > .control {
  /* grid-column: 2; */
  /* grid-row: 2; */
  width: 20px;
  margin-right: 20px;
}

/* Row 1: top description (only when it's NOT the ".below" variant) */
#pageContent table[data-name="marketing_consent"] td.checkbox-cell > .description:not(.below) {
  /* grid-column: 1 / -1; */
  /* grid-row: 1; */
  margin: 0 0 2px 0;
}

/* Row 3: "description below" always at the bottom */
#pageContent table[data-name="marketing_consent"] td.checkbox-cell > .description.below {
  /* grid-column: 1 / -1; */
  /* grid-row: 3; */
  margin: 2px 0 0 0;
}

/* Tidy bits */
#pageContent table[data-name="marketing_consent"] td.checkbox-cell .field-label {
  display: block;
  line-height: 1.35;
  color: #000000;
  font-size: 16px !important;
}

#pageContent table[data-name="marketing_consent"] td.checkbox-cell > .control input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
}

#pageContent table[data-name="marketing_consent"] td.checkbox-cell .validators:empty {
  display: none;
}



/*
 * Delivery partner event edit page
 * This has the class "editEvent" to isolate its theming as data-name="DP/Event/Edit" is proving to be too generic
 */

.editEvent #pageContent div[data-name="DP/Event/Edit"] {
  padding: 15px;
}

.editEvent #pageContent table[role="presentation"] {
  background-color: #ebeef0;
  border-radius: 10px;
}


.editEvent #pageContent table[role="presentation"] > tbody > tr > td {
  padding: 20px 20px 0 20px;
}


/* Try and make the last <tr> in a section have a bottom paddding to even things off */
.editEvent #pageContent table[role="presentation"] > tbody > tr:last-of-type > td {
  padding: 20px 20px 20px 20px;
}

/* But this isn't always the case so... <sigh> */
/* .editEvent #pageContent td.checkbox-cell:has(#cuk_esadditionalquestion7_label), */
.editEvent #pageContent #cuk_eventdetailsparticipantinfo {
  margin-bottom: 20px;
  padding-bottom: 20px;
}

/* Fudge time. Add a thick border to the bottom of this table to give it padding (which you can't add to tables).
 * Unable to add it to the last <tr> element as this keeps changing depending on the select options chosen by the user.
 * Urgh. */
.editEvent #pageContent table[data-name="Event_Options"] {
  border-bottom: 20px solid #ebeef0;
}



.editEvent #pageContent table[role="presentation"] > tbody .cell {
  margin-bottom: 0;
}





/*
 * These rules were originally targeted very explicitly but going to try and
 * make them more generic
 *

.editEvent #pageContent div[data-name="DP/Event/Edit"] input,
.editEvent #pageContent div[data-name="DP/Event/Edit"] select,
.editEvent #pageContent div[data-name="DP/Event/Edit"] textarea {
  margin-bottom: 0;
}

.editEvent #pageContent div[data-name="DP/Event/Edit"],
.editEvent #pageContent div[data-name="DP/Event/Edit"] table,
.editEvent #pageContent div[data-name="DP/Event/Edit"] .field-label {
  font-size: 16px !important;
}

.editEvent #pageContent div[data-name="DP/Event/Edit"] h3 {
  font-size: 20px !important;
}

.editEvent #pageContent div[data-name="DP/Event/Edit"] .field-label {
  color: #365269;
  font-size: 18px !important;
  font-weight: 700;
  margin: 0 0 5px 0;
}
 */

#pageContent input,
#pageContent select,
#pageContent textarea {
  margin-bottom: 0;
}

#pageContent table,
#pageContent .field-label {
  font-size: 16px !important;
}

#pageContent h3 {
  font-size: 20px !important;
}

#pageContent .field-label {
  color: #365269;
  font-size: 18px !important;
  font-weight: 700;
  margin: 0 0 5px 0;
}

#pageContent .form-control {
  color: #101920;
  border: 1px solid #adb5bd !important;
  border-radius: 10px;
  padding: 6px 12px !important;
}

#pageContent .control > a {
  display: block;
  margin: 0 0 5px 0;
}

#pageContent .description.below label {
  display: block;
  float: inherit;
  margin-top: 30px;
}

#pageContent .description.below br {
  display: none;
}

#pageContent .description.below i {
  font-style: normal; /* Remove supplied ikcy italic font */
  display: block;
}





/* Hacky, hacky, hacky...  :(  */
.editEvent #pageContent div[data-name="DP/Event/Edit"] label#cuk_estempupdateforcdo_label {
  margin: 15px 0 5px 0;
}


.editEvent #pageContent div[data-name="DP/Event/Edit"] .form-control {
  color: #101920;
  border: 1px solid #adb5bd !important;
  border-radius: 10px;
  padding: 6px 12px !important;
}

.editEvent #pageContent tr[role="group"] {
  display: block;
  margin-bottom: 10px;
}

.editEvent #pageContent .description.above {
  margin-top: 0;
  margin-bottom: 10px;
}

/*
 * There's a field called "Extra questions for participants" that is embedded as a table row
 * along with "Entry limit" as another row, with both of them wrapped up in another table,
 * which is in turn wrapped up within the table for that section. Complete and utter embedded
 * chaos, with all sorts of floats, br and inline shenanigans going on.
 */
.editEvent #pageContent .description.below label {
  display: block;
  float: inherit;
  margin-top: 30px;
}

.editEvent #pageContent .description.below br {
  display: none;
}

.editEvent #pageContent .description.below i {
  font-style: normal; /* Remove supplied ikcy italic font */
  display: block;
}



/*
 * Even more custom tweaks for random HTML on the edit event page
 */

/* Add spacing for the message "People should enter by contacting me directly" */
.editEvent #pageContent td:has(#cuk_espreregistrationstatus_label) .description.below {
  margin: 10px 0;
}

/* Checkbox labels are in the wrong font */
.editEvent #pageContent div[data-name="DP/Event/Edit"] label#cuk_esadditionalquestion1_label,
.editEvent #pageContent div[data-name="DP/Event/Edit"] label#cuk_esadditionalquestion2_label,
.editEvent #pageContent div[data-name="DP/Event/Edit"] label#cuk_esadditionalquestion3_label,
.editEvent #pageContent div[data-name="DP/Event/Edit"] label#cuk_esadditionalquestion4_label,
.editEvent #pageContent div[data-name="DP/Event/Edit"] label#cuk_esadditionalquestion5_label,
.editEvent #pageContent div[data-name="DP/Event/Edit"] label#cuk_esadditionalquestion6_label,
.editEvent #pageContent div[data-name="DP/Event/Edit"] label#cuk_esadditionalquestion7_label,
.editEvent #pageContent div[data-name="DP/Event/Edit"] label#cuk_esadditionalquestion8_label {
  color: #101920;
  font-size: 16px !important;
  font-weight: 400;
}

/* And the spacing is too big from other default rules */
.editEvent #pageContent div[data-name="DP/Event/Edit"] td:has(#cuk_esadditionalquestion1_label),
.editEvent #pageContent div[data-name="DP/Event/Edit"] td:has(#cuk_esadditionalquestion2_label),
.editEvent #pageContent div[data-name="DP/Event/Edit"] td:has(#cuk_esadditionalquestion3_label),
.editEvent #pageContent div[data-name="DP/Event/Edit"] td:has(#cuk_esadditionalquestion4_label),
.editEvent #pageContent div[data-name="DP/Event/Edit"] td:has(#cuk_esadditionalquestion5_label),
.editEvent #pageContent div[data-name="DP/Event/Edit"] td:has(#cuk_esadditionalquestion6_label),
.editEvent #pageContent div[data-name="DP/Event/Edit"] td:has(#cuk_esadditionalquestion7_label),
.editEvent #pageContent div[data-name="DP/Event/Edit"] td:has(#cuk_esadditionalquestion8_label) {
  padding: 3px 20px 0 20px;
}



/*
 * Another layout hack due to the stupid way Power Pages build everything in tables with random
 * blank <tr> elements. Honestly... who thought this was a good idea?! Anyway, this bug/feature
 * occurs when editing a draft event and the date of the event is changed. A extra bit of table
 * appears at the bottom of the page which you wouldn't easily see, and the padding there is
 * wrong because of all the extra blank <tr> also appearing.
 */

.editEvent #pageContent div[data-name="DP/Event/Edit"] td:has(#cuk_estempupdateforcdo) {
  padding: 3px 20px 20px 20px;
}



/*
 * Include a link to let participants cancel their booking
 * This has a default indentation which we need to remove
 */
#pageContent td:has(label#cuk_estempincludecancellationbutton_label) {
  padding: 5px 0px;
}



/*
 * Links toolbar button
 * Appears for Delivery Partners when managing an event. I think.
 */


#links-toolbar .container > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  /* gap: 30px; */
  margin: 0 auto 30px;
}

#links-toolbar h2 {
  width: 100%;
  text-align: center;
}

#links-toolbar a.btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background-color: #ebeef0;
  color: #365269 !important;
  border-radius: 10px;
  padding: 10px;
  margin: 0 5px 10px 5px;
  width: 110px;
  height: 110px;
  font-size: 14px !important;
  text-decoration: inherit !important;
}

#links-toolbar a.btn:hover {
  background-color: #adb5bd;
  color: #365269;
}

#links-toolbar i {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 15px;
}

#links-toolbar  span {
  line-height: 1.2;
}

@media screen and (max-width: 767px) {
  #links-toolbar .container > div {
    flex-direction: column;
    flex-wrap: inherit;
    justify-content: inherit;
    /* gap: 10px; */
  }

  #links-toolbar h2 {
    text-align: left;
  }

  #links-toolbar a.btn {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    padding: 10px;
    width: 100%;
    height: inherit;
  }

  #links-toolbar i {
    font-size: 16px;
    line-height: 1;
    margin: 0;
    width: 24px;
  }
}

.email-participant,
.dont-cancel-button {
  text-align: center;
}

/* QR codes */
#sectionQR {
  text-align: center;
}

img#QRCode {
  margin: 30px auto 60px auto;
  width: 100%;
  max-width: 400px;
  height: auto;
}



table#event-on-the-day {
  width: 100%;
  margin-top: 30px;
}




/*
 * Test code to place a wallpaper on the page
 * Needs more work to make it browser and mobile friendly
 * 

body.cyclinguk[data-sitemap-state*="Events"] {
  background-image: url("/bbr-wallpaper-01.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

body.cyclinguk[data-sitemap-state*="Events"] .cyclinguk-main-nav ul li a {
  color: #ffffff;
}

body.cyclinguk[data-sitemap-state*="Events"] #mobileTable {
  background-color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(5px);
  box-shadow: 0px 0px 15px 6px rgba(0,0,0,0.3);
  border-radius: 10px;
}

body.cyclinguk[data-sitemap-state*="Events"] #mobileTable .entitylist,
body.cyclinguk[data-sitemap-state*="Events"] #mobileTable .card,
body.cyclinguk[data-sitemap-state*="Events"] #mobileTable .card-body {
  background-color: rgba(0,0,0,0);
}

*/


/* Copied over from Dynamics - STARTS */

/* Target ONLY the location map container */
#section_location #locationMapContainer {
  height: 320px;
  margin-top: 0px; /* Aligns with address text */
}

/* Better alignment for the flex container */
#section_location .panel > div {
  align-items: flex-start; /* Align items to top */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #section_location .panel > div {
    flex-direction: column;
  }

  #section_location .panel > div > div {
    min-width: 100%;
    width: 100%;
  }

  #section_location #locationMapContainer {
    height: 280px;
    margin-top: 20px;
  }
}
/* Copied over from Dynamics - ENDS */


/* Copied over from Dynamics - STARTS */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 3px solid #ccc;
  border-top: 3px solid #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
/* Copied over from Dynamics - ENDS */