/* =============================================================================
Custom Less for 5k
Adding custom styling over Bootstrap
This Less file needs to be compiled to custom-styles.css to be imported:
    lessc custom-style.less > custom-style.css
Filename: custom-style.less / custom-styles.css
Author: Morgane
Date: 05.02.2025
============================================================================= */
/* Less variables*/
/* HEADER
============================================================================= */
/* Hauptnavigation */
header .navbar {
  background-color: #ffffff !important;
}
header .navbar .navigation .navbar-nav {
  border-bottom: 1px solid #d3d3d3;
}
.region-content,
.navbar-dark,
.nav-item {
  /* Hyperlinks color */
  /* Disable bootsrap link colors */
  --bs-navbar-color: #1f51ff;
  --bs-navbar-hover-color: #1f51ff;
  --bs-navbar-disabled-color: #1f51ff;
  --bs-navbar-active-color: #1f51ff;
  --bs-navbar-brand-color: #1f51ff;
  --bs-navbar-brand-hover-color: #1f51ff;
  --bs-navbar-toggler-border-color: #1f51ff;
}
.region-content a,
.navbar-dark a,
.nav-item a,
.region-content a:link,
.navbar-dark a:link,
.nav-item a:link,
.region-content a.nav-link,
.navbar-dark a.nav-link,
.nav-item a.nav-link,
.region-content a.nav-link:visited,
.navbar-dark a.nav-link:visited,
.nav-item a.nav-link:visited {
  color: #1f51ff;
  text-decoration: none;
}
.region-content a.nav-link:hover,
.navbar-dark a.nav-link:hover,
.nav-item a.nav-link:hover,
.region-content a.nav-link:active,
.navbar-dark a.nav-link:active,
.nav-item a.nav-link:active {
  color: #404244 !important;
}
.page-civicrm {
  /* MAIN
============================================================================= */
}
.page-civicrm .region-content {
  max-width: 800px;
  margin: 1em auto;
}
.page-civicrm .region-content,
.page-civicrm .block-system-breadcrumb-block {
  margin: auto;
  max-width: 800px;
}
.page-civicrm .region-content a,
.page-civicrm .block-system-breadcrumb-block a,
.page-civicrm .region-content a:link,
.page-civicrm .block-system-breadcrumb-block a:link,
.page-civicrm .region-content a:visited,
.page-civicrm .block-system-breadcrumb-block a:visited {
  color: #1f51ff;
  text-decoration: none;
}
.page-civicrm .region-content a:hover,
.page-civicrm .block-system-breadcrumb-block a:hover,
.page-civicrm .region-content a:active,
.page-civicrm .block-system-breadcrumb-block a:active {
  color: #404244;
}
.page-civicrm .region-content td.label {
  min-width: 20em;
}
.page-civicrm .region-content p,
.page-civicrm .region-content label,
.page-civicrm .region-content div,
.page-civicrm .region-content td {
  hyphens: auto;
  -webkit-hyphens: auto;
  /* hyphens for Safari < 5.1 versions */
  -ms-hyphens: auto;
  /* hyphens for Edge < 88 versions */
  font: normal 1rem/1.5 "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}
.crm-event-info-form-block .event-info .crm-section.crm-socialnetwork.alert {
  margin-top: 3em !important;
}
#block-knot_bootstrap-page-title h1 {
  margin: 0.25em 0 1em 0;
  font: bold 1.5rem/1.5 "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}
/* Buttons */
#crm-container.crm-public {
  /* Overrides rules from civicrm stylesheet that makes labels left alligned */
}
#crm-container.crm-public .action-link.section.register_link-section.register_link-bottom,
#crm-container.crm-public .crm-submit-buttons,
#crm-container.crm-public #crm-submit-buttons {
  margin: 1.5em 0 2.5em 0;
  text-align: center;
}
#crm-container.crm-public .action-link.section.register_link-section.register_link-bottom a,
#crm-container.crm-public .crm-submit-buttons a,
#crm-container.crm-public #crm-submit-buttons a {
  /* color: #ffffff !important; */
}
#crm-container.crm-public .action-link.section.register_link-section.register_link-bottom .button,
#crm-container.crm-public .crm-submit-buttons .button,
#crm-container.crm-public #crm-submit-buttons .button,
#crm-container.crm-public .action-link.section.register_link-section.register_link-bottom .crm-button,
#crm-container.crm-public .crm-submit-buttons .crm-button,
#crm-container.crm-public #crm-submit-buttons .crm-button {
  margin: 0 0.5em;
  padding: 0.7em !important;
  background-color: #1f51ff;
  font-weight: bold;
  text-shadow: none;
  font-size: 1rem !important;
}
#crm-container.crm-public .action-link.section.register_link-section.register_link-bottom .button:hover,
#crm-container.crm-public .crm-submit-buttons .button:hover,
#crm-container.crm-public #crm-submit-buttons .button:hover,
#crm-container.crm-public .action-link.section.register_link-section.register_link-bottom .button:active,
#crm-container.crm-public .crm-submit-buttons .button:active,
#crm-container.crm-public #crm-submit-buttons .button:active,
#crm-container.crm-public .action-link.section.register_link-section.register_link-bottom .crm-button:hover,
#crm-container.crm-public .crm-submit-buttons .crm-button:hover,
#crm-container.crm-public #crm-submit-buttons .crm-button:hover,
#crm-container.crm-public .action-link.section.register_link-section.register_link-bottom .crm-button:active,
#crm-container.crm-public .crm-submit-buttons .crm-button:active,
#crm-container.crm-public #crm-submit-buttons .crm-button:active {
  background-color: #0f52ba;
}
#crm-container.crm-public .crm-section .label {
  float: unset;
  text-align: unset;
  width: unset;
}
/* ------------------------------------------------------------------------
Admin - Anmeldungsseite */
#user-login-form .form-text,
#user-pass .form-text {
  max-width: 24em;
}
/* ------------------------------------------------------------------------
Event */
.page-civicrm-event .crm-public img {
  max-width: 100%;
}
.page-civicrm-event #intro_text span {
  font: 1rem/1.5 "Lucida Grande", "Lucida Sans Unicode", sans-serif !important;
  /* Needs to be important, to override inline styles */
}
/* ------------------------------------------------------------------------
Veranstaltung - Veranstaltungsseite */
/* Hide top register button */
div.register_link-top {
  display: none;
}
/* Event summary */
div.crm-section.event_summary-section {
  margin: 0;
  font: bold 1rem/1.5 "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}
/* Event description */
div.crm-section.event_description-section.summary p,
div.event-info div.intro_text-section {
  margin: 1em 0;
  text-align: justify;
}
div.crm-section.event_description-section.summary p:first-of-type img:first-of-type {
  margin-left: auto;
  /* Align first image right */
}
div.crm-section.event_description-section.summary img,
div.event-info div.intro_text-section img {
  margin-right: 1.2rem;
  margin-bottom: 1.2rem;
  max-width: 100%;
  height: auto;
  display: block;
}
/* Separator */
.event-info div.clear {
  margin: 0.5rem 0;
  border: 1px solid #d3d3d3;
}
/* Event info section
Only for event main page */
#crm-container.crm-public .crm-event-info-form-block,
div.display-block {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#crm-container.crm-public .crm-event-info-form-block .crm-section.event_date_time-section,
div.display-block .crm-section.event_date_time-section,
#crm-container.crm-public .crm-event-info-form-block .crm-section.event_address-section,
div.display-block .crm-section.event_address-section,
#crm-container.crm-public .crm-event-info-form-block .crm-section.event_contact-section,
div.display-block .crm-section.event_contact-section {
  display: flex;
  align-items: flex-start;
}
#crm-container.crm-public .crm-event-info-form-block .crm-section.event_date_time-section tbody,
div.display-block .crm-section.event_date_time-section tbody,
#crm-container.crm-public .crm-event-info-form-block .crm-section.event_address-section tbody,
div.display-block .crm-section.event_address-section tbody,
#crm-container.crm-public .crm-event-info-form-block .crm-section.event_contact-section tbody,
div.display-block .crm-section.event_contact-section tbody {
  width: 100%;
}
#crm-container.crm-public .crm-event-info-form-block .crm-section.event_date_time-section div.content,
div.display-block .crm-section.event_date_time-section div.content,
#crm-container.crm-public .crm-event-info-form-block .crm-section.event_address-section div.content,
div.display-block .crm-section.event_address-section div.content,
#crm-container.crm-public .crm-event-info-form-block .crm-section.event_contact-section div.content,
div.display-block .crm-section.event_contact-section div.content {
  flex: 1 1 auto;
  /* Allows the content to take remaining space and wrap when needed */
  margin: 0.5em 0;
  white-space: normal;
  /* Allows internal wrapping of content lines */
  width: calc(100% - 7em);
  font: normal 1rem/1.5 "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}
#crm-container.crm-public .crm-event-info-form-block div.label,
div.display-block div.label {
  width: 7em;
  flex: 0 0 auto;
  /* Prevents the label from shrinking */
  margin: 0.5em 0;
  text-align: left;
  font: bold 1rem/1.5 "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}
/* ------------------------------------------------------------------------
Veranstaltung - Anmeldungsseite */
/* Remove link color from drop down form box */
div.crm-form-select a.select2-choice {
  color: #000000;
}
/* fieldset layout */
div#crm-profile-block,
fieldset.crm-profile {
  margin-top: 0;
  margin-bottom: 2em;
  border: 0;
  /* Removes misplaced separator between fieldsets */
  display: flex;
  flex-direction: column;
}
div#crm-profile-block legend,
fieldset.crm-profile legend {
  font: bold 1rem/1.5 "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}
/* fixed text input width: maximum size to fit on mobile
Making the width dynamic always created width differences for unknown reasons */
input[type="text"].crm-form-text {
  width: 20em !important;
}
/* Regular 1-column layout for forms */
div.crm-section.form-item,
div.crm-section.helprow-pre,
div.crm-section.helprow-post {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5em;
  align-items: start;
}
div.crm-section.form-item div.label,
div.crm-section.helprow-pre div.label,
div.crm-section.helprow-post div.label,
div.crm-section.form-item div.content,
div.crm-section.helprow-pre div.content,
div.crm-section.helprow-post div.content,
div.crm-section.form-item div.content.description,
div.crm-section.helprow-pre div.content.description,
div.crm-section.helprow-post div.content.description {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}
div.crm-section.form-item div.content,
div.crm-section.helprow-pre div.content,
div.crm-section.helprow-post div.content {
  grid-column: 1;
}
div.crm-section.form-item div.description,
div.crm-section.helprow-pre div.description,
div.crm-section.helprow-post div.description {
  display: inline !important;
}
/* 2 columns layout for text forms + Anrede */
div.crm-section.form-item:has(.label + .content + .clear),
div.crm-section.form-item:has(input#s2id_autogen1) {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 4fr 0;
  gap: 0.5em;
  /* single column layout for mobile */
}
div.crm-section.form-item:has(.label + .content + .clear) div.label,
div.crm-section.form-item:has(input#s2id_autogen1) div.label {
  margin-right: 0;
  grid-column: 1;
  width: 100%;
}
div.crm-section.form-item:has(.label + .content + .clear) div.content,
div.crm-section.form-item:has(input#s2id_autogen1) div.content,
div.crm-section.form-item:has(.label + .content + .clear) div.content.description,
div.crm-section.form-item:has(input#s2id_autogen1) div.content.description {
  margin-left: 0;
  grid-column: 2;
  width: 100%;
}
@media (max-width: 767px) {
  div.crm-section.form-item:has(.label + .content + .clear),
  div.crm-section.form-item:has(input#s2id_autogen1) {
    grid-template-columns: 1fr;
    /* Single-column layout */
  }
  div.crm-section.form-item:has(.label + .content + .clear) div.content,
  div.crm-section.form-item:has(input#s2id_autogen1) div.content,
  div.crm-section.form-item:has(.label + .content + .clear) div.content.description,
  div.crm-section.form-item:has(input#s2id_autogen1) div.content.description {
    grid-column: 1;
    /* move content div to first */
  }
}
div.crm-public-form-item.additional_participants-section {
  margin-bottom: 1em !important;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: max-content auto;
  gap: 0.5em;
  /* single column layout for mobile */
}
div.crm-public-form-item.additional_participants-section div.label {
  margin-right: 0;
  grid-column: 1;
  width: 22em;
}
div.crm-public-form-item.additional_participants-section div.content {
  margin-left: 0;
  grid-column: 2;
  width: 100%;
}
div.crm-public-form-item.additional_participants-section div.content #additionalParticipantsDescription {
  display: block !important;
  margin-left: 1.5em;
}
@media (max-width: 767px) {
  div.crm-public-form-item.additional_participants-section {
    grid-template-columns: 1fr;
    /* Single-column layout */
  }
  div.crm-public-form-item.additional_participants-section div.content,
  div.crm-public-form-item.additional_participants-section div.content.description {
    grid-column: 1;
    /* move content div to first */
  }
}
#crm-container.crm-public .crm-event-register-form-block #noOfparticipants {
  display: grid;
  grid-template-columns: auto auto;
}
#crm-container.crm-public .crm-event-register-form-block #noOfparticipants .content {
  display: grid;
  grid-template-columns: auto auto 1fr;
}
@media (max-width: 768px) {
  #crm-container.crm-public .crm-event-register-form-block #noOfparticipants {
    grid-template-columns: auto;
  }
  #crm-container.crm-public .crm-event-register-form-block #noOfparticipants .content {
    grid-template-columns: min-content auto;
  }
  #crm-container.crm-public .crm-event-register-form-block #noOfparticipants .content #additionalParticipantsDescription {
    grid-column: 1/3;
    margin-left: 0;
  }
}
#crm-container.crm-public .crm-event-register-form-block div.label,
#crm-container.crm-public .crm-event-register-form-block div.content {
  display: grid;
  grid-template-columns: auto auto 1fr;
  /* First column shrinks to fit content, second column takes remaining space */
  row-gap: 0;
  align-items: start;
  padding: 0 0 0 4px !important;
  text-align: justify !important;
}
#crm-container.crm-public .crm-event-register-form-block div.label label,
#crm-container.crm-public .crm-event-register-form-block div.content label,
#crm-container.crm-public .crm-event-register-form-block div.label input.crm-form-text,
#crm-container.crm-public .crm-event-register-form-block div.content input.crm-form-text,
#crm-container.crm-public .crm-event-register-form-block div.label a.crm-clear-link,
#crm-container.crm-public .crm-event-register-form-block div.content a.crm-clear-link {
  margin-left: 0 !important;
  /* Necessary to ensure first label line is aligned with the others (margin only applies to first line) */
  grid-column: 2;
  text-align: justify;
}
#crm-container.crm-public .crm-event-register-form-block div.label input[type="radio"],
#crm-container.crm-public .crm-event-register-form-block div.content input[type="radio"],
#crm-container.crm-public .crm-event-register-form-block div.label input[type="checkbox"],
#crm-container.crm-public .crm-event-register-form-block div.content input[type="checkbox"] {
  grid-column: 1;
}
#crm-container.crm-public .crm-event-register-form-block div.label label + a.crm-clear-link,
#crm-container.crm-public .crm-event-register-form-block div.content label + a.crm-clear-link {
  /* untick x for radio button */
  grid-column: auto;
  /* Ensures the link is right next to the label*/
  align-self: start;
  /* Align the x on top */
}
#crm-container.crm-public .crm-event-register-form-block div.label table,
#crm-container.crm-public .crm-event-register-form-block div.content table {
  padding-top: 0 !important;
  text-align: left !important;
}
#crm-container.crm-public .crm-event-register-form-block div.messages.help {
  margin: 0;
  padding: 0.5em;
  background-color: white;
  border-color: #d3d3d3;
  font: normal 0.9rem / 1.5 "Lucida Grande", "Lucida Sans Unicode", sans-serif;
  color: #696969;
}
.crm-event-register-form-block input[type="radio"],
.crm-event-register-form-block input[type="checkbox"] {
  margin: 0.35em 0.5em 0 0;
}
.crm-form-textarea {
  max-width: 34.3rem;
}
#crm-container.crm-public {
  /* Apply margin on top only if not directly after a helprow-post div */
}
#crm-container.crm-public div.crm-section.helprow-pre,
#crm-container.crm-public div.crm-section.helprow-post {
  margin: 0.5em 0;
}
#crm-container.crm-public div.crm-section.helprow-pre .content,
#crm-container.crm-public div.crm-section.helprow-post .content {
  text-align: justify;
  font: normal 0.9rem / 1.5 "Lucida Grande", "Lucida Sans Unicode", sans-serif !important;
}
@media (max-width: 767px) {
  #crm-container.crm-public div.crm-section.helprow-pre .content,
  #crm-container.crm-public div.crm-section.helprow-post .content {
    font: normal 1rem/1.5 "Lucida Grande", "Lucida Sans Unicode", sans-serif !important;
    /* increase font size on mobile for readability */
  }
}
#crm-container.crm-public div.crm-section:not(.helprow-post) + div.crm-section.helprow-pre {
  margin-top: 2em;
}
#crm-container.crm-public div.crm-section.helprow-post {
  margin-bottom: 2em;
}
/* Veranstaltung - Bestätigungsseite + Dankeschönseite
------------------------------------------------------------------------ */
/* Continue / confirmation message */
.crm-container .crm-block div.continue_message-section,
.crm-container .crm-block div.help {
  margin: 0;
  padding: 0.5em 0.8em;
  width: fit-content;
  background-color: #ffffff;
  border: 2px solid #1f51ff;
}
.crm-container .crm-block div.continue_message-section p,
.crm-container .crm-block div.help p {
  margin: 0;
}
/* Event info */
#crm-container.crm-public .crm-event-info-form-block,
div.display-block {
  margin: 2em 0 !important;
}
#crm-container.crm-public .crm-event-info-form-block table.form-layout,
div.display-block table.form-layout {
  display: flex;
  align-items: flex-start;
}
#crm-container.crm-public .crm-event-info-form-block table.form-layout tbody,
div.display-block table.form-layout tbody {
  width: 100%;
  /* Event title */
}
#crm-container.crm-public .crm-event-info-form-block table.form-layout tbody tr,
div.display-block table.form-layout tbody tr {
  display: grid;
  grid-template-columns: 1fr 3fr;
  column-gap: 1.5em;
}
#crm-container.crm-public .crm-event-info-form-block table.form-layout tbody tr td,
div.display-block table.form-layout tbody tr td {
  padding-left: 0;
  padding-right: 0;
}
#crm-container.crm-public .crm-event-info-form-block table.form-layout tbody tr td:first-of-type,
div.display-block table.form-layout tbody tr td:first-of-type {
  margin-right: 0.2em;
  font: bold 1rem/1.5 "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}
#crm-container.crm-public .crm-event-info-form-block table.form-layout tbody tr:first-of-type,
div.display-block table.form-layout tbody tr:first-of-type {
  margin-bottom: 1em;
  grid-template-columns: 1fr;
  /* Event title line on 1 column */
  font: bold 1.1rem/1.5 "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}
/* Hide Teilnehmer*innen group */
.crm-container .crm-group.participant_role-group {
  display: none;
}
/* Headers */
.crm-container .crm-group div.header-dark {
  margin: 1em 0 0 0;
  padding: 0;
  background-color: #ffffff;
  color: black;
  font: bold 1.3rem/1.5 "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}
/* Profile views */
#crm-container.crm-public {
  /* 2 columns layout for info recap */
}
#crm-container.crm-public .crm-group fieldset div.crm-profile-view-title {
  /* Profile view titles */
  margin: 1em 0;
  font: bold 1.1rem/1.5 "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}
#crm-container.crm-public .crm-group div.crm-public-form-item.crm-section,
#crm-container.crm-public .crm-event-info-form-block div.crm-public-form-item.crm-section,
#crm-container.crm-public div.display-block div.crm-public-form-item.crm-section {
  margin: 1em 0;
  display: grid;
  grid-template-columns: 1fr 3fr;
  row-gap: 0.23em;
  column-gap: 1.5em;
  /* single column layout for mobile */
}
#crm-container.crm-public .crm-group div.crm-public-form-item.crm-section .label,
#crm-container.crm-public .crm-event-info-form-block div.crm-public-form-item.crm-section .label,
#crm-container.crm-public div.display-block div.crm-public-form-item.crm-section .label {
  margin: 0;
  width: 100%;
  font: bold 1rem/1.5 "Lucida Grande", "Lucida Sans Unicode", sans-serif !important;
}
#crm-container.crm-public .crm-group div.crm-public-form-item.crm-section .content,
#crm-container.crm-public .crm-event-info-form-block div.crm-public-form-item.crm-section .content,
#crm-container.crm-public div.display-block div.crm-public-form-item.crm-section .content {
  margin: 0;
  text-align: justify;
  font: normal 1rem/1.5 "Lucida Grande", "Lucida Sans Unicode", sans-serif !important;
}
@media (max-width: 767px) {
  #crm-container.crm-public .crm-group div.crm-public-form-item.crm-section,
  #crm-container.crm-public .crm-event-info-form-block div.crm-public-form-item.crm-section,
  #crm-container.crm-public div.display-block div.crm-public-form-item.crm-section {
    grid-template-columns: 1fr;
    /* Single-column layout */
  }
  #crm-container.crm-public .crm-group div.crm-public-form-item.crm-section content,
  #crm-container.crm-public .crm-event-info-form-block div.crm-public-form-item.crm-section content,
  #crm-container.crm-public div.display-block div.crm-public-form-item.crm-section content {
    grid-column: 1;
    /* move content div to first */
  }
}
/* =============================================================================
   ============================================================================= */
/* FOOTER */
/* user account menu alignment */
footer #block-knot_bootstrap-account-menu {
  margin: auto;
  margin-bottom: 1em;
  width: 100%;
  max-width: 800px;
}
footer #block-knot_bootstrap-account-menu ul .nav-item .nav-link {
  padding: 0;
}
footer #block-knot_bootstrap-impressumfurdenfooter .text-formatted p {
  text-align: center;
  font: normal 0.9rem / 1.5 "Lucida Grande", "Lucida Sans Unicode", sans-serif !important;
}
footer #block-knot_bootstrap-impressumfurdenfooter .text-formatted p a {
  text-decoration: underline;
}