/* ================================================================
   activity.less -> activity.css

   Moderne opmaak voor de activiteitenpagina's, in dezelfde beeldtaal
   als de landingspagina, page.css en de enquêtes: Roboto Condensed,
   witte kaarten met een zachte schaduw op gebroken wit, rode accenten.

   Apart van activities.less omdat dat bestand fullcalendar.css uit
   bower importeert en dus de volledige gulp-build nodig heeft. Dit
   bestand importeert alleen main/lib, zodat de deploy-hook het met een
   kale lessc kan bouwen.

   Alles is gescoped op de body-classes. Dat is niet alleen netjes: het
   wint zo ook van de ongescopete regels in activities.less, die via
   Module::init eerder wordt ingeladen.
   ================================================================ */
/* Zachtere, koelere basis dan het vlakke @white: een grijs met een beetje
   navy erin leest als gekozen in plaats van als standaard. */
/* @gray (#a4a5a8) haalt op wit maar ~2,5:1 en was daardoor slecht leesbaar
   voor bijzaken als datums en labels. Dit grijs heeft navy erin en zit rond
   6:1, ruim boven de AA-drempel van 4,5:1, en blijft toch duidelijk bijzaak. */
/* ----------------------------------------------------------------
   Overzicht
---------------------------------------------------------------- */
body.module-activities.controller-activity.action-index {
  background-color: #f6f6f7;
  min-height: 100vh;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #3d3d3d;
  /* De kaartjes stonden als 25%-floats met een vaste hoogte naast
	   elkaar en waren op mobiel helemaal verborgen - dan bleef er op een
	   telefoon alleen het lijstje in de zijbalk over. Nu een grid dat
	   meeschaalt en overal zichtbaar is. */
  /* Lijst met eerstvolgende activiteiten */
  /* Grid in plaats van flex: zo kan de zijbalk met eerstvolgende
	   activiteiten naast de kaartjes ÉN naast de agenda staan, in plaats van
	   dat de agenda er als losse strook onder bungelt. De lijst plakt mee
	   tijdens het scrollen, dus je leest de agenda met de lijst ernaast. */
  /* De kalender blijft op een telefoon verborgen: een maandweergave is
	   daar onleesbaar. De kaartjes hierboven vangen dat nu op. */
}
body.module-activities.controller-activity.action-index #container {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 48px;
  line-height: inherit;
}
body.module-activities.controller-activity.action-index #container > header {
  -ms-flex: 1 1 100%;
  -webkit-flex: 1 1 100%;
  flex: 1 1 100%;
  margin: 36px 0 4px;
}
@media (max-width: 809px) {
  body.module-activities.controller-activity.action-index #container > header {
    margin: 20px 0 0;
  }
}
body.module-activities.controller-activity.action-index #container > header h1 {
  font-size: 2.4em;
  line-height: 1.05;
  text-transform: uppercase;
  float: none;
  display: block;
}
body.module-activities.controller-activity.action-index #container > header h1,
body.module-activities.controller-activity.action-index #container > header h1 a,
body.module-activities.controller-activity.action-index #container > header h1 a:visited {
  color: #1b1f34;
}
body.module-activities.controller-activity.action-index #container > header h1 a:hover {
  color: #a8080c;
}
@media (max-width: 599px) {
  body.module-activities.controller-activity.action-index #container > header h1 {
    font-size: 1.8em;
  }
}
body.module-activities.controller-activity.action-index #container > header h1:after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  margin: 14px 0 0;
  border-radius: 2px;
  background: #d9050d;
}
body.module-activities.controller-activity.action-index #container > header .actions {
  float: none;
  display: block;
  margin: 14px 0 0;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 1px;
}
body.module-activities.controller-activity.action-index #container > header .actions a {
  color: #5b5e6d;
}
body.module-activities.controller-activity.action-index #container > header .actions a:hover {
  color: #a8080c;
}
body.module-activities.controller-activity.action-index #container > header .actions a .icon {
  color: inherit;
}
body.module-activities.controller-activity.action-index #content,
body.module-activities.controller-activity.action-index aside {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body.module-activities.controller-activity.action-index #content {
  -ms-flex: 1 1 520px;
  -webkit-flex: 1 1 520px;
  flex: 1 1 520px;
  display: block;
  width: auto;
  margin: 0;
  background: none;
}
@media (max-width: 809px) {
  body.module-activities.controller-activity.action-index #content {
    -ms-flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
  }
}
body.module-activities.controller-activity.action-index aside {
  -ms-flex: 0 1 300px;
  -webkit-flex: 0 1 300px;
  flex: 0 1 300px;
  display: block;
  width: auto;
  margin: 0;
  background: transparent;
}
@media (max-width: 809px) {
  body.module-activities.controller-activity.action-index aside {
    -ms-flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
    margin: 0;
  }
}
body.module-activities.controller-activity.action-index aside .block {
  background: #fff;
  border: 1px solid rgba(27, 31, 52, 0.09);
  border-left: 3px solid #a8080c;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(27, 31, 52, 0.05), 0 8px 22px rgba(27, 31, 52, 0.06);
  padding: 22px 24px;
  margin: 0 0 20px;
}
body.module-activities.controller-activity.action-index > hr {
  display: none;
}
body.module-activities.controller-activity.action-index footer {
  padding: 40px 20px;
  border-top: 1px solid #dbdbdb;
}
body.module-activities.controller-activity.action-index .preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
}
@media (min-width: 600px) {
  body.module-activities.controller-activity.action-index .preview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  body.module-activities.controller-activity.action-index .preview {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
body.module-activities.controller-activity.action-index .preview:after {
  content: none;
}
body.module-activities.controller-activity.action-index .preview .item {
  float: none;
  width: auto;
  padding: 0;
  /* Exact de verhouding van de thumb_pos-afgeleide (158x223, zie
			   params.images in main.php). De server heeft al bijgesneden, dus
			   met dezelfde verhouding snijdt de browser er niets meer af. */
}
body.module-activities.controller-activity.action-index .preview .item > div {
  height: auto;
  background: #fff;
  border: 1px solid rgba(27, 31, 52, 0.09);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(27, 31, 52, 0.05), 0 8px 22px rgba(27, 31, 52, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
body.module-activities.controller-activity.action-index .preview .item > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(27, 31, 52, 0.06), 0 16px 34px rgba(27, 31, 52, 0.13);
}
@media (prefers-reduced-motion: reduce) {
  body.module-activities.controller-activity.action-index .preview .item > div {
    transition: none;
  }
  body.module-activities.controller-activity.action-index .preview .item > div:hover {
    transform: none;
  }
}
body.module-activities.controller-activity.action-index .preview .item > div > div.image {
  height: auto;
  aspect-ratio: 158 / 223;
  background: #e0e0e0;
  overflow: hidden;
  /* Activiteit zonder poster */
}
body.module-activities.controller-activity.action-index .preview .item > div > div.image a,
body.module-activities.controller-activity.action-index .preview .item > div > div.image img,
body.module-activities.controller-activity.action-index .preview .item > div > div.image .image-placeholder {
  display: block;
  width: 100%;
  height: 100%;
}
body.module-activities.controller-activity.action-index .preview .item > div > div.image img {
  border: none;
  object-fit: cover;
}
body.module-activities.controller-activity.action-index .preview .item > div > div.image .image-placeholder {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e0e0e0 0%, #dbdbdb 100%);
}
body.module-activities.controller-activity.action-index .preview .item > div > div.image .image-placeholder span {
  font-size: 2.6em;
  font-weight: bold;
  color: rgba(27, 31, 52, 0.35);
}
body.module-activities.controller-activity.action-index .preview .item > div > div.image.cancelled img {
  filter: grayscale(100%);
}
body.module-activities.controller-activity.action-index .preview .item > div > div.text {
  border-top: none;
  padding: 16px 18px 18px;
  /* Afgelast is een status, geen datum: geef het de vorm van een label */
}
body.module-activities.controller-activity.action-index .preview .item > div > div.text h2 {
  max-height: none;
  padding: 0;
  font-size: 1.05em;
  line-height: 1.3;
  font-weight: bold;
  text-transform: none;
  text-wrap: balance;
}
body.module-activities.controller-activity.action-index .preview .item > div > div.text h2 a,
body.module-activities.controller-activity.action-index .preview .item > div > div.text h2 a:visited {
  color: #1b1f34;
}
body.module-activities.controller-activity.action-index .preview .item > div > div.text h2 a:hover {
  color: #a8080c;
}
body.module-activities.controller-activity.action-index .preview .item > div > div.text h2 a.cancelled {
  text-decoration: line-through;
  color: #5b5e6d;
}
body.module-activities.controller-activity.action-index .preview .item > div > div.text p {
  margin-top: 8px;
  font-size: 0.85em;
  letter-spacing: 0.5px;
  color: #5b5e6d;
}
body.module-activities.controller-activity.action-index .preview .item > div > div.text p.cancelled {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(168, 8, 12, 0.1);
  color: #a8080c;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.75em;
}
body.module-activities.controller-activity.action-index #upcoming {
  /* activities.less verbergt alles vanaf de achtste met .mobile-only, maar
		   die regel telt maar één class en verloor het van de li hieronder (id +
		   drie classes). Daardoor stond op desktop de hele agenda in de zijbalk.
		   Hier opnieuw zetten mét de class, zodat de regel wél wint. */
}
body.module-activities.controller-activity.action-index #upcoming ul {
  list-style: none;
  margin: 0;
}
@media (min-width: 600px) {
  body.module-activities.controller-activity.action-index #upcoming li.mobile-only {
    display: none;
  }
}
body.module-activities.controller-activity.action-index #upcoming li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid #e0e0e0;
  background: none;
}
body.module-activities.controller-activity.action-index #upcoming li:last-child {
  border-bottom: none;
}
body.module-activities.controller-activity.action-index #upcoming li a {
  text-decoration: none;
  color: #1b1f34;
}
body.module-activities.controller-activity.action-index #upcoming li a:hover {
  color: #a8080c;
}
body.module-activities.controller-activity.action-index #upcoming li .time {
  position: static;
  right: auto;
  flex-shrink: 0;
  font-size: 0.85em;
  color: #5b5e6d;
  text-transform: uppercase;
}
body.module-activities.controller-activity.action-index #container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
}
body.module-activities.controller-activity.action-index #container > header {
  grid-column: 1 / -1;
}
body.module-activities.controller-activity.action-index #container #content {
  grid-column: 1;
}
body.module-activities.controller-activity.action-index #container #activity_line {
  grid-column: 1;
}
body.module-activities.controller-activity.action-index #container #calendar {
  grid-column: 1;
}
body.module-activities.controller-activity.action-index #container aside {
  grid-column: 2;
  grid-row: 2 / span 3;
  align-self: stretch;
}
body.module-activities.controller-activity.action-index #container aside .block {
  position: sticky;
  top: 20px;
}
@media (max-width: 809px) {
  body.module-activities.controller-activity.action-index #container {
    grid-template-columns: minmax(0, 1fr);
  }
  body.module-activities.controller-activity.action-index #container aside {
    grid-column: 1;
    grid-row: auto;
  }
  body.module-activities.controller-activity.action-index #container aside .block {
    position: static;
  }
}
body.module-activities.controller-activity.action-index #activity_line {
  border-bottom: none;
  margin: 0;
}
body.module-activities.controller-activity.action-index #calendar {
  background: #fff;
  border: 1px solid rgba(27, 31, 52, 0.09);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(27, 31, 52, 0.05), 0 8px 22px rgba(27, 31, 52, 0.06);
  padding: 20px 22px 22px;
  /* ------------------------------------------------------------
		   FullCalendar 2.9 bijwerken met alleen css. Een upgrade naar
		   FullCalendar 5/6 is een herschrijving (geen jQuery meer, ES
		   modules, andere optienamen) en staat niet op bower, dus dat
		   past niet in deze bower/requirejs-pipeline.
		------------------------------------------------------------ */
}
body.module-activities.controller-activity.action-index #calendar .fc-toolbar {
  margin-bottom: 16px;
}
body.module-activities.controller-activity.action-index #calendar .fc-toolbar h2 {
  font-size: 1.4em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #1b1f34;
}
body.module-activities.controller-activity.action-index #calendar .fc-button,
body.module-activities.controller-activity.action-index #calendar .fc-state-default {
  height: auto;
  padding: 7px 16px;
  border: 1px solid rgba(27, 31, 52, 0.09);
  border-radius: 999px;
  background: #fff;
  background-image: none;
  box-shadow: none;
  text-shadow: none;
  color: #3d3d3d;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 0.9em;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
body.module-activities.controller-activity.action-index #calendar .fc-button:hover,
body.module-activities.controller-activity.action-index #calendar .fc-state-default:hover,
body.module-activities.controller-activity.action-index #calendar .fc-button.fc-state-hover,
body.module-activities.controller-activity.action-index #calendar .fc-state-default.fc-state-hover {
  background: #f1f1f1;
  border-color: #a4a5a8;
  color: #1b1f34;
}
body.module-activities.controller-activity.action-index #calendar .fc-state-active,
body.module-activities.controller-activity.action-index #calendar .fc-state-down {
  background: #a8080c;
  border-color: #a8080c;
  color: #fff;
  box-shadow: none;
}
body.module-activities.controller-activity.action-index #calendar .fc-state-disabled {
  opacity: 0.35;
}
body.module-activities.controller-activity.action-index #calendar .fc-button-group .fc-button {
  margin-left: 5px;
  border-radius: 999px;
}
body.module-activities.controller-activity.action-index #calendar .fc-view-container {
  border: 1px solid rgba(27, 31, 52, 0.09);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
body.module-activities.controller-activity.action-index #calendar .fc-unthemed th,
body.module-activities.controller-activity.action-index #calendar .fc-unthemed td,
body.module-activities.controller-activity.action-index #calendar th,
body.module-activities.controller-activity.action-index #calendar td {
  border-color: rgba(27, 31, 52, 0.09);
}
body.module-activities.controller-activity.action-index #calendar th,
body.module-activities.controller-activity.action-index #calendar .fc-day-header {
  padding: 8px 4px;
  background: none;
  color: #5b5e6d;
  font-size: 0.8em;
  font-weight: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
}
body.module-activities.controller-activity.action-index #calendar .fc-day-number {
  padding: 6px 8px;
  font-size: 0.9em;
  color: #3d3d3d;
}
body.module-activities.controller-activity.action-index #calendar .fc-today,
body.module-activities.controller-activity.action-index #calendar .fc-state-highlight {
  background: rgba(168, 8, 12, 0.05);
}
body.module-activities.controller-activity.action-index #calendar td.fc-day-number.fc-today {
  color: #a8080c;
  font-weight: bold;
  box-shadow: inset 0 3px 0 #a8080c;
}
body.module-activities.controller-activity.action-index #calendar .fc-event,
body.module-activities.controller-activity.action-index #calendar .fc-day-grid-event {
  margin: 2px 5px;
  padding: 3px 8px;
  border: none;
  border-radius: 6px;
  font-size: 0.85em;
  line-height: 1.5;
}
/* ----------------------------------------------------------------
   Losse activiteit
---------------------------------------------------------------- */
body.module-activities.controller-activity.action-view {
  background-color: #f6f6f7;
  min-height: 100vh;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #3d3d3d;
  /* Aanwezig / niet aanwezig */
  /* Deelnemers in de zijbalk */
}
body.module-activities.controller-activity.action-view #container {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 48px;
  line-height: inherit;
}
body.module-activities.controller-activity.action-view #container > header {
  -ms-flex: 1 1 100%;
  -webkit-flex: 1 1 100%;
  flex: 1 1 100%;
  margin: 36px 0 4px;
}
@media (max-width: 809px) {
  body.module-activities.controller-activity.action-view #container > header {
    margin: 20px 0 0;
  }
}
body.module-activities.controller-activity.action-view #container > header h1 {
  font-size: 2.4em;
  line-height: 1.05;
  text-transform: uppercase;
  float: none;
  display: block;
}
body.module-activities.controller-activity.action-view #container > header h1,
body.module-activities.controller-activity.action-view #container > header h1 a,
body.module-activities.controller-activity.action-view #container > header h1 a:visited {
  color: #1b1f34;
}
body.module-activities.controller-activity.action-view #container > header h1 a:hover {
  color: #a8080c;
}
@media (max-width: 599px) {
  body.module-activities.controller-activity.action-view #container > header h1 {
    font-size: 1.8em;
  }
}
body.module-activities.controller-activity.action-view #container > header h1:after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  margin: 14px 0 0;
  border-radius: 2px;
  background: #d9050d;
}
body.module-activities.controller-activity.action-view #container > header .actions {
  float: none;
  display: block;
  margin: 14px 0 0;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 1px;
}
body.module-activities.controller-activity.action-view #container > header .actions a {
  color: #5b5e6d;
}
body.module-activities.controller-activity.action-view #container > header .actions a:hover {
  color: #a8080c;
}
body.module-activities.controller-activity.action-view #container > header .actions a .icon {
  color: inherit;
}
body.module-activities.controller-activity.action-view #content,
body.module-activities.controller-activity.action-view aside {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body.module-activities.controller-activity.action-view #content {
  -ms-flex: 1 1 520px;
  -webkit-flex: 1 1 520px;
  flex: 1 1 520px;
  display: block;
  width: auto;
  margin: 0;
  background: none;
}
@media (max-width: 809px) {
  body.module-activities.controller-activity.action-view #content {
    -ms-flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
  }
}
body.module-activities.controller-activity.action-view aside {
  -ms-flex: 0 1 300px;
  -webkit-flex: 0 1 300px;
  flex: 0 1 300px;
  display: block;
  width: auto;
  margin: 0;
  background: transparent;
}
@media (max-width: 809px) {
  body.module-activities.controller-activity.action-view aside {
    -ms-flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
    margin: 0;
  }
}
body.module-activities.controller-activity.action-view aside .block {
  background: #fff;
  border: 1px solid rgba(27, 31, 52, 0.09);
  border-left: 3px solid #a8080c;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(27, 31, 52, 0.05), 0 8px 22px rgba(27, 31, 52, 0.06);
  padding: 22px 24px;
  margin: 0 0 20px;
}
body.module-activities.controller-activity.action-view > hr {
  display: none;
}
body.module-activities.controller-activity.action-view footer {
  padding: 40px 20px;
  border-top: 1px solid #dbdbdb;
}
body.module-activities.controller-activity.action-view .activity_block {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px;
  background: #fff;
  border: 1px solid rgba(27, 31, 52, 0.09);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(27, 31, 52, 0.05), 0 8px 22px rgba(27, 31, 52, 0.06);
  padding: 30px 32px 32px;
  margin: 0 0 24px;
}
@media (max-width: 809px) {
  body.module-activities.controller-activity.action-view .activity_block {
    padding: 18px 16px 22px;
    gap: 18px;
  }
}
body.module-activities.controller-activity.action-view .activity_block:after {
  content: none;
}
body.module-activities.controller-activity.action-view .activity_block .image {
  -ms-flex: 0 1 240px;
  -webkit-flex: 0 1 240px;
  flex: 0 1 240px;
  float: none;
  width: auto;
  min-height: 0;
}
@media (max-width: 599px) {
  body.module-activities.controller-activity.action-view .activity_block .image {
    -ms-flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
  }
}
body.module-activities.controller-activity.action-view .activity_block .image img {
  display: block;
  width: 100%;
  height: auto;
  outline: none;
  border-radius: 8px;
}
body.module-activities.controller-activity.action-view .activity_block .content,
body.module-activities.controller-activity.action-view .activity_block .content.hasImage {
  -ms-flex: 1 1 340px;
  -webkit-flex: 1 1 340px;
  flex: 1 1 340px;
  float: none;
  width: auto;
  margin-left: 0;
  /* Stond absoluut in de hoek van het blok; in een flexkaart
			   hoort het gewoon onder de knoppen. */
}
@media (max-width: 599px) {
  body.module-activities.controller-activity.action-view .activity_block .content,
  body.module-activities.controller-activity.action-view .activity_block .content.hasImage {
    -ms-flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
  }
}
body.module-activities.controller-activity.action-view .activity_block .content h2,
body.module-activities.controller-activity.action-view .activity_block .content.hasImage h2 {
  font-size: 1.8em;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: #1b1f34;
}
body.module-activities.controller-activity.action-view .activity_block .content #meta_likes,
body.module-activities.controller-activity.action-view .activity_block .content.hasImage #meta_likes {
  position: static;
  bottom: auto;
  right: auto;
  left: auto;
  padding: 0;
  margin-top: 16px;
  text-align: left;
}
body.module-activities.controller-activity.action-view .activity_block .content .buttons,
body.module-activities.controller-activity.action-view .activity_block .content.hasImage .buttons {
  margin: 20px 0 0;
}
body.module-activities.controller-activity.action-view .activity_block table:not([class^=fc]) {
  width: 100%;
}
body.module-activities.controller-activity.action-view .activity_block table:not([class^=fc]) tr td {
  padding: 5px 0;
  vertical-align: top;
}
body.module-activities.controller-activity.action-view .activity_block table:not([class^=fc]) tr td:first-child {
  width: 34%;
  padding-right: 20px/2;
  color: #5b5e6d;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 0.85em;
  letter-spacing: 0.5px;
}
body.module-activities.controller-activity.action-view .buttons .button {
  display: inline-block;
  margin-right: 8px;
  padding: 11px 26px;
  border: 1px solid #a8080c;
  border-radius: 999px;
  background: #a8080c;
  background-image: none;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 0.95em;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  line-height: normal;
  /* "Niet aanwezig" is de rustige tegenhanger */
}
body.module-activities.controller-activity.action-view .buttons .button,
body.module-activities.controller-activity.action-view .buttons .button:visited {
  color: #fff;
}
body.module-activities.controller-activity.action-view .buttons .button:hover,
body.module-activities.controller-activity.action-view .buttons .button:focus {
  background: #8b070a;
  border-color: #8b070a;
  color: #fff;
}
body.module-activities.controller-activity.action-view .buttons .button.decline {
  background: #fff;
  border-color: #dbdbdb;
  color: #3d3d3d;
}
body.module-activities.controller-activity.action-view .buttons .button.decline:visited {
  color: #3d3d3d;
}
body.module-activities.controller-activity.action-view .buttons .button.decline:hover,
body.module-activities.controller-activity.action-view .buttons .button.decline:focus {
  border-color: #1b1f34;
  background: #fff;
  color: #1b1f34;
}
body.module-activities.controller-activity.action-view .buttons .button.disabled {
  opacity: 1;
  background: #e0e0e0;
  border-color: #e0e0e0;
  color: #5b5e6d;
  cursor: default;
}
body.module-activities.controller-activity.action-view .buttons .button.disabled:visited {
  color: #5b5e6d;
}
body.module-activities.controller-activity.action-view .buttons .button.disabled:hover {
  background: #e0e0e0;
  border-color: #e0e0e0;
  color: #5b5e6d;
}
body.module-activities.controller-activity.action-view aside .block {
  /* "Alle deelnemers bekijken" */
}
body.module-activities.controller-activity.action-view aside .block h1 {
  font-size: 1.2em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 14px;
  color: #1b1f34;
}
body.module-activities.controller-activity.action-view aside .block ul.persons {
  list-style: none;
  margin: 0;
}
body.module-activities.controller-activity.action-view aside .block ul.persons li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 8px 0;
  background: none;
  border-bottom: 1px solid rgba(27, 31, 52, 0.09);
  /* Vierkant, niet rond: de pasfoto's zijn al vierkant bijgesneden
				   (avatar/standard is 50x50), dus zo blijft het hele gezicht staan. */
}
body.module-activities.controller-activity.action-view aside .block ul.persons li:last-child {
  border-bottom: none;
}
body.module-activities.controller-activity.action-view aside .block ul.persons li img {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: cover;
  background: #e0e0e0;
}
body.module-activities.controller-activity.action-view aside .block ul.persons li a {
  text-decoration: none;
  font-size: 1.05em;
  line-height: 1.3;
  color: #1b1f34;
}
body.module-activities.controller-activity.action-view aside .block ul.persons li a:hover {
  color: #a8080c;
}
body.module-activities.controller-activity.action-view aside .block > a.red {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.95em;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: #a8080c;
}
body.module-activities.controller-activity.action-view aside .block > a.red:hover {
  text-decoration: underline;
}
body.module-activities.controller-activity.action-view .notification-activity-cancelled {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-left: 4px solid #a8080c;
  border-radius: 8px;
  background: rgba(168, 8, 12, 0.08);
  font-size: 1em;
  text-transform: none;
  color: #a8080c;
}
/* ----------------------------------------------------------------
   Archief
---------------------------------------------------------------- */
body.module-activities.controller-activity.action-archive {
  background-color: #f6f6f7;
  min-height: 100vh;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #3d3d3d;
}
body.module-activities.controller-activity.action-archive #container {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 48px;
  line-height: inherit;
}
body.module-activities.controller-activity.action-archive #container > header {
  -ms-flex: 1 1 100%;
  -webkit-flex: 1 1 100%;
  flex: 1 1 100%;
  margin: 36px 0 4px;
}
@media (max-width: 809px) {
  body.module-activities.controller-activity.action-archive #container > header {
    margin: 20px 0 0;
  }
}
body.module-activities.controller-activity.action-archive #container > header h1 {
  font-size: 2.4em;
  line-height: 1.05;
  text-transform: uppercase;
  float: none;
  display: block;
}
body.module-activities.controller-activity.action-archive #container > header h1,
body.module-activities.controller-activity.action-archive #container > header h1 a,
body.module-activities.controller-activity.action-archive #container > header h1 a:visited {
  color: #1b1f34;
}
body.module-activities.controller-activity.action-archive #container > header h1 a:hover {
  color: #a8080c;
}
@media (max-width: 599px) {
  body.module-activities.controller-activity.action-archive #container > header h1 {
    font-size: 1.8em;
  }
}
body.module-activities.controller-activity.action-archive #container > header h1:after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  margin: 14px 0 0;
  border-radius: 2px;
  background: #d9050d;
}
body.module-activities.controller-activity.action-archive #container > header .actions {
  float: none;
  display: block;
  margin: 14px 0 0;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 1px;
}
body.module-activities.controller-activity.action-archive #container > header .actions a {
  color: #5b5e6d;
}
body.module-activities.controller-activity.action-archive #container > header .actions a:hover {
  color: #a8080c;
}
body.module-activities.controller-activity.action-archive #container > header .actions a .icon {
  color: inherit;
}
body.module-activities.controller-activity.action-archive #content,
body.module-activities.controller-activity.action-archive aside {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body.module-activities.controller-activity.action-archive #content {
  -ms-flex: 1 1 520px;
  -webkit-flex: 1 1 520px;
  flex: 1 1 520px;
  display: block;
  width: auto;
  margin: 0;
  background: none;
}
@media (max-width: 809px) {
  body.module-activities.controller-activity.action-archive #content {
    -ms-flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
  }
}
body.module-activities.controller-activity.action-archive aside {
  -ms-flex: 0 1 300px;
  -webkit-flex: 0 1 300px;
  flex: 0 1 300px;
  display: block;
  width: auto;
  margin: 0;
  background: transparent;
}
@media (max-width: 809px) {
  body.module-activities.controller-activity.action-archive aside {
    -ms-flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
    margin: 0;
  }
}
body.module-activities.controller-activity.action-archive aside .block {
  background: #fff;
  border: 1px solid rgba(27, 31, 52, 0.09);
  border-left: 3px solid #a8080c;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(27, 31, 52, 0.05), 0 8px 22px rgba(27, 31, 52, 0.06);
  padding: 22px 24px;
  margin: 0 0 20px;
}
body.module-activities.controller-activity.action-archive > hr {
  display: none;
}
body.module-activities.controller-activity.action-archive footer {
  padding: 40px 20px;
  border-top: 1px solid #dbdbdb;
}
body.module-activities.controller-activity.action-archive #content {
  background: #fff;
  border: 1px solid rgba(27, 31, 52, 0.09);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(27, 31, 52, 0.05), 0 8px 22px rgba(27, 31, 52, 0.06);
  padding: 8px 0 12px;
}
body.module-activities.controller-activity.action-archive table {
  margin: 0;
}
body.module-activities.controller-activity.action-archive table tr {
  background: none;
  border-bottom: 1px solid #e0e0e0;
}
body.module-activities.controller-activity.action-archive table tr:last-child {
  border-bottom: none;
}
body.module-activities.controller-activity.action-archive table tbody tr:hover {
  background: rgba(168, 8, 12, 0.03);
}
body.module-activities.controller-activity.action-archive table th {
  background: none;
  color: #5b5e6d;
  border-bottom: 2px solid #e0e0e0;
  font-size: 0.8em;
  font-weight: normal;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 16px;
}
body.module-activities.controller-activity.action-archive table td {
  padding: 13px 16px;
  vertical-align: middle;
}
body.module-activities.controller-activity.action-archive table td a,
body.module-activities.controller-activity.action-archive table td a:visited {
  color: #1b1f34;
  text-decoration: none;
}
body.module-activities.controller-activity.action-archive table td a:hover {
  color: #a8080c;
}
body.module-activities.controller-activity.action-archive table td:last-child {
  color: #5b5e6d;
  font-size: 0.95em;
}
body.module-activities.controller-activity.action-archive .pagenumbers {
  list-style: none;
  margin: 18px 16px 0;
  padding: 0;
}
body.module-activities.controller-activity.action-archive .pagenumbers li {
  display: inline-block;
  margin-right: 6px;
}
body.module-activities.controller-activity.action-archive .pagenumbers li a,
body.module-activities.controller-activity.action-archive .pagenumbers li.selected {
  display: inline-block;
  min-width: 32px;
  padding: 4px 8px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
  color: #1b1f34;
}
body.module-activities.controller-activity.action-archive .pagenumbers li.selected {
  background: #a8080c;
  border-color: #a8080c;
  color: #fff;
}
body.module-activities.controller-activity.action-archive .pagenumbers li a:hover {
  border-color: #a8080c;
  color: #a8080c;
}