/* =========================================================
   NORDSCHWARZWALD TRIATHLON 2027 – ANMELDESEITE
   Modernes Design in den Farben von Datasport Schweiz:
     Rot #D6001D, Dunkelrot #A50016, Schwarz #141414,
     Hellgrau #F7F7F7 / #E4E6EB, Grau #525252
   Schriftart bleibt die von Datasport (Open Sans).
   ========================================================= */

:root {
  --rm-red: #d6001d;
  --rm-red-dark: #a50016;
  --rm-dark: #141414;
  --rm-dark-2: #3a3a3a;
  --rm-text: #141414;
  --rm-muted: #525252;
  --rm-line: #e4e6eb;
  --rm-bg-soft: #f7f7f7;
  --rm-radius: 16px;
}

/* ---------- Navigation ---------- */
nav {
  background: var(--rm-dark) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* ---------- Kopfbereich ---------- */
header img.logo1,
header img.logo2 {
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

h1 {
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

/* Desktop: Logo links – Titel mittig – Logo rechts, alles auf einer Hoehe */
@media screen and (min-width: 768px) {
  header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 26px 0 10px !important;
  }
  header img.logo1,
  header img.logo2 {
    float: none !important;
    flex: 0 0 auto;
    height: 130px !important;
    width: auto !important;
    max-width: 24%;
    object-fit: contain;
    margin: 0 !important;
    padding: 0 !important;
  }
  header img.logo1 { order: 1; }
  header h1 {
    order: 2;
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: clamp(1.6rem, 2.6vw, 2.6rem) !important;
    line-height: 1.2 !important;
  }
  header img.logo2 { order: 3; }
}

/* ---------- Kaesten: modern, runde Ecken, weicher Schatten ---------- */
.panibox,
.panibox2 {
  background: rgba(255, 255, 255, 0.97) !important;
  border: 0 !important;
  border-radius: var(--rm-radius) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
  overflow: hidden;
}

.ym-gbox.panibox {
  margin-bottom: 16px;
}

.panibox h6,
.ym-form legend {
  margin: 0;
  padding: 12px 18px !important;
  color: #fff;
  background: var(--rm-dark) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--rm-radius) var(--rm-radius) 0 0;
}

.panibox h6 a,
.panibox a h6 {
  color: #fff;
  text-decoration: none;
}

/* ---------- Wettbewerbsliste (Startseite) ---------- */
.panitermine {
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--rm-line) !important;
  transition: background 0.15s ease;
}

.panitermine:last-child {
  border-bottom: 0 !important;
}

/* dezenter Trennstrich zwischen den Wettbewerben (mit Abstand zum
   Rand). Als eigenes Element, weil Datasports ".border_10" sonst
   jeden Rahmen entfernt. */
.panibox .panitermine.einzelmeldung {
  position: relative;
}

.panibox .panitermine.einzelmeldung:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 1px;
  background: var(--rm-line);
}

.panitermine.einzelmeldung:hover {
  background: var(--rm-bg-soft);
}

.panitermine .titel {
  color: var(--rm-dark);
  font-weight: 700;
}

.panitermine .uhrzeit {
  color: var(--rm-muted);
}

.panitermine .strecke {
  color: var(--rm-red);
  font-weight: 700;
}

/* "mehr", "Teilnehmerliste", "Startplatzboerse" */
.panitermine a:not(:has(.ym-button)) {
  color: var(--rm-muted);
  border-bottom-color: var(--rm-line);
  transition: color 0.15s ease;
}

.panitermine a:not(:has(.ym-button)):hover {
  color: var(--rm-red);
}

/* Textlinks in allen Kaesten beim Darueberfahren: KEIN dunkler
   Hintergrund (Datasport setzt sonst .panibox a:hover auf #4f4f4f
   mit weisser Schrift), nur rote Schrift. Buttons ausgenommen. */
.panibox a:not(:has(.ym-button)):hover,
.panibox a:not(:has(.ym-button)):focus {
  background: transparent !important;
  color: var(--rm-red) !important;
  text-shadow: none;
}

/* ---------- Event-Informationen: moderne Linien-Symbole ----------
   Jeder Eintrag als Zeile mit rundem Hover-Hintergrund, Symbole
   einheitlich in Datasport-Rot. Erkennung ueber Link-Typ/Adresse. */
#fileTree {
  margin: 0 !important;
  padding: 8px !important;
}

#fileTree li.file {
  list-style: none;
  margin: 0 !important;
  padding: 4px 10px 4px 36px !important;
  border-radius: 8px;
  background-color: transparent;
  background-size: 17px 17px !important;
  background-position: 10px center !important;
  background-repeat: no-repeat !important;
  line-height: 1.35;
  transition: background-color 0.15s ease;
}

#fileTree li.file:hover {
  background-color: var(--rm-bg-soft) !important;
}

#fileTree a {
  color: var(--rm-text);
  border: 0 !important;
  text-decoration: none;
  transition: color 0.15s ease;
}

#fileTree a:hover {
  color: var(--rm-red);
}

/* sonstige Web-Links: Link-Symbol */
#fileTree li.file_web { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23d6001d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.5 1.5"/><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.5-1.5"/></svg>') !important; }
/* Veranstalter-Webseite (erster Eintrag): Globus */
#fileTree li.file_web:first-child { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23d6001d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15 15 0 0 1 0 20a15 15 0 0 1 0-20z"/></svg>') !important; }
/* PDFs (Ausschreibungen): Dokument */
#fileTree li.file_web:has(a[href$=".pdf" i]) { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23d6001d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M8 13h8"/><path d="M8 17h5"/></svg>') !important; }
/* Datenschutz / Teilnahmebedingungen: Schild */
#fileTree li.file_web:has(a[href*="datenschutz" i]),
#fileTree li.file_web:has(a[href*="teilnahmebedingungen" i]) { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23d6001d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l8 3v6c0 5-3.5 9.5-8 11c-4.5-1.5-8-6-8-11V5z"/><path d="M8.5 12l2.5 2.5l4.5-5"/></svg>') !important; }
/* Teilnehmerliste: Personen */
#fileTree li.file_web:has(a[href*="teilnehmer" i]) { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23d6001d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6"/><circle cx="17" cy="9" r="2.5"/><path d="M16 14.2c3 .2 5.5 2.3 5.5 5.3"/></svg>') !important; }
/* Social Media im gleichen Linien-Stil */
#fileTree li.file_ins { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23d6001d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.6" fill="%23d6001d"/></svg>') !important; }
#fileTree li.file_fb  { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23d6001d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h-2.5A4.5 4.5 0 0 0 8 7.5V10H5.5v3.5H8V21h3.5v-7.5H14l.5-3.5h-3V8a1 1 0 0 1 1-1H15z"/></svg>') !important; }
#fileTree li.file_yut { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23d6001d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="4"/><path d="M10 9l5 3-5 3z"/></svg>') !important; }

/* ---------- Karten / Boxen ---------- */
.panibox,
.panibox2 {
  background: #fff;
  padding: 0;
  position: relative;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
  border-radius: var(--rm-radius);
  overflow: hidden;
}

.panibox h6,
.ym-form legend {
  padding: 9px 14px;
  color: #fff;
  background: var(--rm-dark);
  border-top-left-radius: var(--rm-radius);
  border-top-right-radius: var(--rm-radius);
}

.border_10 {
  border-top: none !important;
  border-bottom: none !important;
}

.ym-gr   { border-top-right-radius: var(--rm-radius); }
.ym-grid { border-radius: var(--rm-radius); }

/* Wettbewerbs-Info */
.panitermine .titel {
  color: var(--rm-dark);
}

.panitermine .strecke {
  color: var(--rm-red);
}

/* ---------- Startplatzboerse-Uebersicht (.../boerse/) ---------- */

/* Distanz in der Box-Ueberschrift etwas dezenter */
#verstallinfo h6 .strecke {
  margin-left: 8px;
  color: #fff;
  opacity: 0.75;
  font-weight: 400;
}

/* Spaltenkoepfe der Zusatzleistungen (z.B. "Funktions-Shirt · Gravur") */
.startplatz-uebersicht {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.startplatz-uebersicht .leistungname + .leistungname::before {
  content: "·";
  margin-right: 14px;
  color: #bbb;
}

/* "Keine Startplaetze verfuegbar." - normale Schrift statt Versalien */
.startplatz-uebersicht:not(:has(.leistungname)) {
  font-size: 14px;
  color: #777;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0;
}

/* Jeder angebotene Startplatz als eigene Zeile */
.panitermine div:has(> .startplatz) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 0;
  border-top: 1px solid #e6e6e6;
}

.panitermine .startplatz {
  font-weight: 700;
  color: var(--rm-dark);
  margin-right: 4px;
}

.panitermine .leistung {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f1f1ef;
  border: 1px solid #e0e0e0;
  font-size: 13px;
  color: #444;
}

a.startplatz-auswaehlen {
  margin-left: auto;
  display: inline-block;
  padding: 8px 16px;
  border-radius: 9px;
  background: var(--rm-red);
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  border: 0 !important;
  white-space: nowrap;
  transition: background 0.2s ease;
}

a.startplatz-auswaehlen:hover {
  background: var(--rm-red-dark);
}

.panitermine .ym-g80:has(.startplatz-uebersicht) {
  width: 100% !important;
}

/* ---------- Reservierungs-Countdown ---------- */
.platzreservierung,
.warning.platzreservierung {
  background: #ffecec !important;
  color: var(--rm-dark) !important;
  border: 0 !important;
  border-left: 5px solid var(--rm-red) !important;
  border-radius: var(--rm-radius);
}

.platzreservierung span {
  color: var(--rm-red-dark);
  font-weight: bold;
}

/* ---------- Schritt-Leiste ---------- */
.ym-grid:has(> .schritt_aktiv) {
  border-radius: var(--rm-radius);
  overflow: hidden;
  /* grauen Unterrand aus dem Datasport-Grund-CSS entfernen,
     Abstand zur naechsten Box bleibt per margin erhalten */
  border-bottom: 0 !important;
  margin-bottom: 10px;
}

.schritt_aktiv,
.schritt_inaktiv {
  font-size: 0 !important;   /* "Schritt X" ausblenden */
}

.schritt_aktiv::after,
.schritt_inaktiv::after {
  font-size: 1rem;
}

.schritt_aktiv {
  background: var(--rm-red);
  color: #fff;
}

.schritt_inaktiv {
  background: var(--rm-dark-2);
  color: rgba(255, 255, 255, 0.75);
}

.schritt_aktiv:first-child,
.schritt_inaktiv:first-child {
  border-top-left-radius: var(--rm-radius);
  border-bottom-left-radius: var(--rm-radius);
}

.schritt_aktiv:last-child,
.schritt_inaktiv:last-child {
  border-top-right-radius: var(--rm-radius);
  border-bottom-right-radius: var(--rm-radius);
}

.schritt_aktiv:nth-child(1)::after,
.schritt_inaktiv:nth-child(1)::after { content: "Persönliche Daten"; }

.schritt_aktiv:nth-child(2)::after,
.schritt_inaktiv:nth-child(2)::after { content: "Zusatzleistungen"; }

.schritt_aktiv:nth-child(3)::after,
.schritt_inaktiv:nth-child(3)::after { content: "Zahlungsart"; }

.schritt_aktiv:nth-child(4)::after,
.schritt_inaktiv:nth-child(4)::after { content: "Zusammenfassung"; }

li.text-inaktiv {
  color: #a0a0a0;
}

/* ---------- Fehlermeldungen ---------- */
.error {
  border-radius: var(--rm-radius);
  border-left: 5px solid var(--rm-red-dark);
}

/* ---------- Formular ---------- */
form {
  max-width: 1122px;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

form label,
.ym-form label {
  font-weight: 600;
  color: var(--rm-text);
  margin-bottom: 0.3rem;
  display: block;
  text-align: left;
}

.ym-required {
  color: var(--rm-red);
}

/* :where(...) nimmt Checkboxen/Radio-Buttons aus, ohne die
   Gewichtung (Spezifitaet) der Regel zu veraendern */
form input:where(:not([type="checkbox"]):not([type="radio"])),
form select,
.ym-form input:where(:not([type="checkbox"]):not([type="radio"])),
.ym-form select {
  width: 100%;
  max-width: 100%;
  padding: 0.6rem 0.9rem;
  color: var(--rm-text);
  border: 1px solid #cfcfcf;
  border-radius: 0.5rem;
  font-size: 1rem;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Checkboxen / Radio-Buttons AUSSERHALB des Datasport-Standard-
   Containers (.ym-fbox-check) schmal halten - sonst steht das
   Haekchen mittig in einer eigenen Zeile und der Satz rutscht
   darunter (z.B. Haftungsausschluss in der Sammelanmeldung).
   Innerhalb von .ym-fbox-check (z.B. Zahlungsauswahl) bleibt alles
   im Datasport-Original, inkl. Einrueckung neben "Zahlungsart". */
form input[type="checkbox"]:not(.ym-fbox-check input),
form input[type="radio"]:not(.ym-fbox-check input) {
  width: auto !important;
  max-width: none !important;
  display: inline-block !important;
  vertical-align: middle;
  margin-right: 8px !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Text zur Checkbox in derselben Zeile wie das Haekchen */
form input[type="checkbox"]:not(.ym-fbox-check input) + label,
form input[type="radio"]:not(.ym-fbox-check input) + label,
form label:has(> input[type="checkbox"]):not(.ym-fbox-check label),
form label:has(> input[type="radio"]):not(.ym-fbox-check label) {
  display: inline !important;
}

form input:focus,
form select:focus {
  border-color: var(--rm-red);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.25);
}

/* Chosen-Dropdowns (Geschlecht, Nation, Land) */
.chzn-container-single .chzn-single {
  border-radius: 0.5rem;
  border-color: #cfcfcf;
  background: #fff;
  box-shadow: none;
}

.chzn-container-active .chzn-single,
.chzn-container-active .chzn-single-with-drop {
  border-color: var(--rm-red);
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.25);
}

.chzn-container .chzn-results .highlighted {
  background: var(--rm-red);
  color: #fff;
}

/* ---------- Buttons ---------- */
.ym-button,
.ym-form button,
.ym-form input[type="button"],
.ym-form input[type="reset"],
.ym-form input[type="submit"],
form button,
form input[type="submit"] {
  padding: 0.8rem 1.6rem;
  background: var(--rm-red);
  color: #fff;
  border: none;
  border-color: var(--rm-red);
  border-radius: 9px !important;
  box-shadow: none !important;
  font-weight: bold;
  font-size: 1rem;
  text-shadow: none;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

form button,
form input[type="submit"] {
  align-self: flex-start;
  margin-top: 1rem;
}

.ym-button:hover,
.ym-form button:hover,
.ym-form input[type="button"]:hover,
.ym-form input[type="reset"]:hover,
.ym-form input[type="submit"]:hover,
form button:hover {
  background: var(--rm-red-dark);
  color: #fff;
  border-color: var(--rm-red-dark);
  border-bottom: none !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}

/* Optional: ICE-Sektion */
.ice-section {
  padding: 1rem;
  background: var(--rm-bg-soft);
  border-left: 4px solid var(--rm-red);
  border-radius: 0.5rem;
}

/* ---------- Mobil ---------- */
@media screen and (max-width: 767px) {
  /* Schritt-Leiste: groessere Schrift, zweizeilig */
  .schritt_aktiv,
  .schritt_inaktiv {
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 40px;
    padding: 4px 2px !important;
    box-sizing: border-box;
    line-height: 1.15 !important;
  }

  .schritt_aktiv::after,
  .schritt_inaktiv::after {
    font-size: 12px;
    white-space: pre-line;
  }

  .schritt_aktiv:nth-child(1)::after,
  .schritt_inaktiv:nth-child(1)::after { content: "Persönliche\A Daten"; }

  .schritt_aktiv:nth-child(2)::after,
  .schritt_inaktiv:nth-child(2)::after { content: "Zusatz-\A leistungen"; }

  .schritt_aktiv:nth-child(4)::after,
  .schritt_inaktiv:nth-child(4)::after { content: "Zusammen-\A fassung"; }

  /* Event-Informationen auf dem Handy unter dem Formular anzeigen
     (Datasport blendet die rechte Spalte sonst per display:none aus) */
  #spalte_rechts {
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-top: 16px;
  }

  /* Wettbewerbsseite mit "Mein Konto" | "Direktanmeldung" +
     "Startplatzboerse": die zwei schwebenden Spalten (float) auf dem
     Handy untereinander stellen. Sonst wird die rechte Spalte
     (Event-Informationen) dazwischen auf wenige Pixel zusammengedrueckt. */
  #spalte_links {
    display: flow-root !important;
  }

  #spalte_links > .ym-g50,
  #spalte_links > .ym-g49 {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #spalte_links > .ym-g50 > .panibox,
  #spalte_links > .ym-g49 > .panibox {
    margin-top: 12px;
  }

  /* "Informationen zum Anmeldevorgang" auf dem Handy weglassen –
     die Schritt-Leiste zeigt das bereits */
  /* NUR die Box mit der Schritt-Liste (#schritt_1) - alle anderen
     Boxen rechts (z.B. "Du hast einen Startplatz" auf der Boerse-
     Seite) bleiben sichtbar */
  #spalte_rechts .panibox:has(#schritt_1) {
    display: none !important;
  }

  /* Links als kompakte Buttons nebeneinander */
  #fileTree {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px !important;
    margin: 0 !important;
  }

  #fileTree li.file {
    margin: 0 !important;
    padding: 7px 12px 7px 30px !important;
    border: 1px solid #e3e3e3;
    border-radius: 999px;
    background-position: 10px center !important;
    line-height: 1.2;
    font-size: 14px;
  }
}

@media screen and (max-width: 500px) {
  .abstand_oben {
    flex-direction: column;
    margin-top: 0;
  }
  h1 {
    margin: 0 0 10px 0;
  }
  .headerauswahl .strecke,
  .headerauswahl .titel,
  .headerauswahl .info {
    position: inherit;
  }
  section.headerauswahl {
    gap: 12px;
    margin-top: 1.5em !important;
  }
  .headerauswahl a {
    width: 100%;
    max-width: 330px;
  }
  .headerauswahl .headerbutton {
    width: 100%;
    height: 130px;
  }
  .headerauswahl .headerbutton::before {
    font-size: 18px;
  }
}

/* ---------- Hinweistexte unter den Feldern lesbarer ----------
   (z.B. Schritt 2 Zusatzleistungen: Startpass, Shuttleservice,
   Gewinnspiel). Datasport setzt diese Texte auf 70 % (~10 px). */
.ym-form .text-danach,
.ym-form .text-danach-check,
.ym-form .text-danach-spez {
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: var(--rm-muted) !important;
  padding-top: 3px;
}

/* ---------- Auswahllisten (z.B. Schritt 2) wie in Schritt 1 ----------
   In Schritt 1 nutzt Datasport eigene "Chosen"-Listen, in Schritt 2
   normale Browser-Auswahllisten. Deren aufgeklappte Liste laesst sich
   nur in aktuellen Chrome-/Edge-Versionen gestalten (base-select).
   Andere Browser (Firefox, Safari) zeigen weiterhin ihre normale
   Liste - dort aendert sich nichts. */
@supports (appearance: base-select) {
  .ym-form select,
  .ym-form select::picker(select) {
    appearance: base-select;
  }

  .ym-form select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0.55rem 0.9rem !important;   /* Text nicht am linken Rand */
    background: #fff;
  }

  .ym-form select::picker-icon {
    color: var(--rm-muted);
    transition: rotate 0.2s ease;
  }

  .ym-form select:open::picker-icon {
    rotate: 180deg;
  }

  .ym-form select::picker(select) {
    /* nie breiter als das Auswahlfeld selbst - lange Optionen
       brechen stattdessen um */
    box-sizing: border-box;
    width: anchor-size(width);
    min-width: 0;
    max-width: anchor-size(width);
    margin-top: 4px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--rm-line);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  }

  /* Optionen: Fliesstext (kein Spaltenlayout), mit feiner Trennlinie
     dazwischen - so sind sie auch ohne Maus klar unterscheidbar */
  .ym-form select option {
    display: block !important;
    padding: 8px 12px;
    border-radius: 0;
    border-bottom: 1px solid var(--rm-line);
    color: var(--rm-text);
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.35;
  }

  .ym-form select option:last-of-type {
    border-bottom: 0;
  }

  /* Preise (z.B. "0,00 €") nie auseinanderreissen - Zahl und
     Euro-Zeichen bleiben immer zusammen */
  .ym-form select option > * {
    white-space: nowrap;
  }

  /* kein schwarzer Fokus-Rahmen um die markierte Option */
  .ym-form select option:focus-visible {
    outline: none;
  }

  .ym-form select option::checkmark {
    display: none;
  }

  /* Maus drueber / Tastatur: rot wie in Schritt 1 */
  .ym-form select option:hover,
  .ym-form select option:focus-visible {
    background: var(--rm-red);
    color: #fff;
    border-radius: 8px;
    border-bottom-color: transparent;
  }

  /* aktuell gewaehlte Option */
  .ym-form select option:checked {
    font-weight: 700;
  }

  .ym-form select option:checked:not(:hover) {
    background: var(--rm-bg-soft);
  }
}

/* ---------- "Informationen zum Anmeldevorgang" als Schritt-Verlauf ----------
   Die 4 Schritte als Timeline mit Punkten und Verbindungslinie:
   erledigte/aktuelle Schritte rot, kommende Schritte (Datasport-
   Klasse .text-inaktiv) grau mit leerem Punkt. */
.panibox:has(ul.no_liststyle) > .abstand {
  padding: 16px 20px 18px !important;
  font-size: 14px;
  line-height: 1.5;
  color: var(--rm-muted);
}

.panibox:has(ul.no_liststyle) > .abstand > br {
  display: none;
}

/* "Die Anmeldung erfolgt in 4 Schritten:" als kleine Zwischenueberschrift */
.panibox:has(ul.no_liststyle) > .abstand > b {
  display: block;
  margin: 14px 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rm-dark);
}

.panibox ul.no_liststyle {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.panibox ul.no_liststyle > li {
  position: relative;
  list-style: none !important;
  margin: 0 !important;
  padding: 7px 0 7px 32px !important;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--rm-dark);
}

/* Punkt */
.panibox ul.no_liststyle > li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--rm-red);
  border: 2px solid var(--rm-red);
  box-shadow: 0 0 0 4px rgba(214, 0, 29, 0.12);
  z-index: 1;
}

/* Verbindungslinie zum naechsten Schritt */
.panibox ul.no_liststyle > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 2px;
  height: 100%;
  background: #cfd3da;
}

/* Linie zwischen zwei erledigten Schritten rot */
.panibox ul.no_liststyle > li:not(.text-inaktiv):has(+ li:not(.text-inaktiv))::after {
  background: rgba(214, 0, 29, 0.45);
}

/* kommende Schritte */
.panibox ul.no_liststyle > li.text-inaktiv {
  color: #9a9a9a;
  font-weight: 400;
}

.panibox ul.no_liststyle > li.text-inaktiv::before {
  background: #fff;
  border-color: #c4c4c4;
  box-shadow: none;
}

.panibox ul.no_liststyle > li a {
  color: inherit;
  text-decoration: none;
  border: 0;
}

/* ---------- Hintergrundbild immer bildschirmfuellend ---------- */
body {
  background-size: cover !important;
}

/* ---------- Handy: Logos nebeneinander, Spalten untereinander ----------
   Datasport setzt Logos und Spalten hier per float nebeneinander und
   stellt sie auf dem Handy nicht um. */
@media screen and (max-width: 767px) {
  header {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 0;
  }
  header img.logo1,
  header img.logo2 {
    float: none !important;
    width: calc(50% - 6px) !important;
    max-width: 200px;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  header h1 {
    flex: 0 0 100%;
    margin: 4px 0 8px !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 125% !important;
  }
  section.abstand_oben {
    display: block !important;
  }
  section.abstand_oben > .ym-g65,
  section.abstand_oben > .ym-g33,
  section.abstand_oben > .ym-gl,
  section.abstand_oben > .ym-gr {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
}
/* ---------- Zahlungsart: bekannte Symbole vor den Auswahlknoepfen ----------
   Erkennung ueber die Datasport-Kuerzel im Auswahlknopf:
     SEPA14 = Lastschrift SEPA, PPE = PayPal, KRE = Kreditkarte,
     GUT = Gutschein, RE... = Rechnung
   Steht eine Zahlungsart nicht zur Auswahl, gibt es kein Symbol. */
.ym-form input[type="radio"][value^="SEPA" i] + label::before,
.ym-form input[type="radio"][id^="radio_SEPA" i] + label::before,
.ym-form input[type="radio"][value^="LS" i] + label::before,
.ym-form input[type="radio"][id^="radio_LS" i] + label::before,
.ym-form input[type="radio"][value^="ELV" i] + label::before,
.ym-form input[type="radio"][id^="radio_ELV" i] + label::before,
.ym-form input[type="radio"][value*="sepa" i] + label::before,
.ym-form input[type="radio"][id*="sepa" i] + label::before,
.ym-form input[type="radio"][value*="lastschrift" i] + label::before,
.ym-form input[type="radio"][id*="lastschrift" i] + label::before,
.ym-form input[type="radio"][value^="PP" i] + label::before,
.ym-form input[type="radio"][id^="radio_PP" i] + label::before,
.ym-form input[type="radio"][value*="paypal" i] + label::before,
.ym-form input[type="radio"][id*="paypal" i] + label::before,
.ym-form input[type="radio"][value^="KRE" i] + label::before,
.ym-form input[type="radio"][id^="radio_KRE" i] + label::before,
.ym-form input[type="radio"][value^="KK" i] + label::before,
.ym-form input[type="radio"][id^="radio_KK" i] + label::before,
.ym-form input[type="radio"][value^="CC" i] + label::before,
.ym-form input[type="radio"][id^="radio_CC" i] + label::before,
.ym-form input[type="radio"][value*="kredit" i] + label::before,
.ym-form input[type="radio"][id*="kredit" i] + label::before,
.ym-form input[type="radio"][value*="credit" i] + label::before,
.ym-form input[type="radio"][id*="credit" i] + label::before,
.ym-form input[type="radio"][value^="RE" i] + label::before,
.ym-form input[type="radio"][id^="radio_RE" i] + label::before,
.ym-form input[type="radio"][value*="rechnung" i] + label::before,
.ym-form input[type="radio"][id*="rechnung" i] + label::before,
.ym-form input[type="radio"][value*="invoice" i] + label::before,
.ym-form input[type="radio"][id*="invoice" i] + label::before,
.ym-form input[type="radio"][value^="GUT" i] + label::before,
.ym-form input[type="radio"][id^="radio_GUT" i] + label::before,
.ym-form input[type="radio"][value^="GS" i] + label::before,
.ym-form input[type="radio"][id^="radio_GS" i] + label::before,
.ym-form input[type="radio"][value*="gutschein" i] + label::before,
.ym-form input[type="radio"][id*="gutschein" i] + label::before,
.ym-form input[type="radio"][value*="voucher" i] + label::before,
.ym-form input[type="radio"][id*="voucher" i] + label::before {
  content: "";
  display: inline-block;
  width: 44px;
  height: 28px;
  margin: 0 10px 0 2px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Lastschrift / SEPA */
.ym-form input[type="radio"][value^="SEPA" i] + label::before,
.ym-form input[type="radio"][id^="radio_SEPA" i] + label::before,
.ym-form input[type="radio"][value^="LS" i] + label::before,
.ym-form input[type="radio"][id^="radio_LS" i] + label::before,
.ym-form input[type="radio"][value^="ELV" i] + label::before,
.ym-form input[type="radio"][id^="radio_ELV" i] + label::before,
.ym-form input[type="radio"][value*="sepa" i] + label::before,
.ym-form input[type="radio"][id*="sepa" i] + label::before,
.ym-form input[type="radio"][value*="lastschrift" i] + label::before,
.ym-form input[type="radio"][id*="lastschrift" i] + label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 28%22%3E%3Crect x=%220.5%22 y=%220.5%22 width=%2243%22 height=%2227%22 rx=%225%22 fill=%22%23fff%22 stroke=%22%23d0d4dc%22/%3E%3Ctext x=%2222%22 y=%2217.5%22 text-anchor=%22middle%22 font-family=%22Arial,Helvetica,sans-serif%22 font-size=%2210.5%22 font-weight=%22700%22 fill=%22%2310298e%22%3ESEPA%3C/text%3E%3Cpath d=%22M8 21.5 Q22 25 36 21.5%22 fill=%22none%22 stroke=%22%23ffcc00%22 stroke-width=%221.6%22/%3E%3C/svg%3E");
}

/* PayPal */
.ym-form input[type="radio"][value^="PP" i] + label::before,
.ym-form input[type="radio"][id^="radio_PP" i] + label::before,
.ym-form input[type="radio"][value*="paypal" i] + label::before,
.ym-form input[type="radio"][id*="paypal" i] + label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 28%22%3E%3Crect x=%220.5%22 y=%220.5%22 width=%2243%22 height=%2227%22 rx=%225%22 fill=%22%23fff%22 stroke=%22%23d0d4dc%22/%3E%3Ctext x=%2222%22 y=%2217.5%22 text-anchor=%22middle%22 font-family=%22Arial,Helvetica,sans-serif%22 font-size=%229.5%22 font-weight=%22700%22 font-style=%22italic%22%3E%3Ctspan fill=%22%23003087%22%3EPay%3C/tspan%3E%3Ctspan fill=%22%23009cde%22%3EPal%3C/tspan%3E%3C/text%3E%3C/svg%3E");
}

/* Kreditkarte */
.ym-form input[type="radio"][value^="KRE" i] + label::before,
.ym-form input[type="radio"][id^="radio_KRE" i] + label::before,
.ym-form input[type="radio"][value^="KK" i] + label::before,
.ym-form input[type="radio"][id^="radio_KK" i] + label::before,
.ym-form input[type="radio"][value^="CC" i] + label::before,
.ym-form input[type="radio"][id^="radio_CC" i] + label::before,
.ym-form input[type="radio"][value*="kredit" i] + label::before,
.ym-form input[type="radio"][id*="kredit" i] + label::before,
.ym-form input[type="radio"][value*="credit" i] + label::before,
.ym-form input[type="radio"][id*="credit" i] + label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 28%22%3E%3Crect x=%220.5%22 y=%220.5%22 width=%2243%22 height=%2227%22 rx=%225%22 fill=%22%23fff%22 stroke=%22%23d0d4dc%22/%3E%3Ctext x=%2213%22 y=%2217.2%22 text-anchor=%22middle%22 font-family=%22Arial,Helvetica,sans-serif%22 font-size=%228%22 font-weight=%22900%22 font-style=%22italic%22 fill=%22%231a1f71%22%3EVISA%3C/text%3E%3Ccircle cx=%2229%22 cy=%2214%22 r=%225.5%22 fill=%22%23eb001b%22/%3E%3Ccircle cx=%2235%22 cy=%2214%22 r=%225.5%22 fill=%22%23f79e1b%22/%3E%3Cpath d=%22M32 9.4a5.5 5.5 0 0 1 0 9.2a5.5 5.5 0 0 1 0-9.2z%22 fill=%22%23ff5f00%22/%3E%3C/svg%3E");
}

/* Rechnung */
.ym-form input[type="radio"][value^="RE" i] + label::before,
.ym-form input[type="radio"][id^="radio_RE" i] + label::before,
.ym-form input[type="radio"][value*="rechnung" i] + label::before,
.ym-form input[type="radio"][id*="rechnung" i] + label::before,
.ym-form input[type="radio"][value*="invoice" i] + label::before,
.ym-form input[type="radio"][id*="invoice" i] + label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 28%22%3E%3Crect x=%220.5%22 y=%220.5%22 width=%2243%22 height=%2227%22 rx=%225%22 fill=%22%23fff%22 stroke=%22%23d0d4dc%22/%3E%3Cg fill=%22none%22 stroke=%22%23525252%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M17 5h7l4 4v14H17z%22/%3E%3Cpath d=%22M24 5v4h4%22/%3E%3Cpath d=%22M19.5 13h6M19.5 16.5h6M19.5 20h4%22/%3E%3C/g%3E%3C/svg%3E");
}

/* Gutschein */
.ym-form input[type="radio"][value^="GUT" i] + label::before,
.ym-form input[type="radio"][id^="radio_GUT" i] + label::before,
.ym-form input[type="radio"][value^="GS" i] + label::before,
.ym-form input[type="radio"][id^="radio_GS" i] + label::before,
.ym-form input[type="radio"][value*="gutschein" i] + label::before,
.ym-form input[type="radio"][id*="gutschein" i] + label::before,
.ym-form input[type="radio"][value*="voucher" i] + label::before,
.ym-form input[type="radio"][id*="voucher" i] + label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 28%22%3E%3Crect x=%220.5%22 y=%220.5%22 width=%2243%22 height=%2227%22 rx=%225%22 fill=%22%23fff%22 stroke=%22%23d0d4dc%22/%3E%3Cg fill=%22none%22 stroke=%22%23d6001d%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%2214%22 y=%2211%22 width=%2216%22 height=%2211%22 rx=%221.5%22/%3E%3Cpath d=%22M13 8h18v3H13zM22 8v14%22/%3E%3Cpath d=%22M22 8c-1.5-3-5-3-5-.8C17 8 22 8 22 8zM22 8c1.5-3 5-3 5-.8C27 8 22 8 22 8z%22/%3E%3C/g%3E%3C/svg%3E");
}

/* Auswahlknopf und Symbol mittig auf einer Linie */
.ym-form input[type="radio"] {
  vertical-align: middle;
}

/* ---------- Startseite: "Zahlungsarten fuer dieses Event" mit Symbolen ----------
   Datasport liefert diese Liste als reinen Text ohne Kennung - die
   Symbole werden daher nach der POSITION zugeordnet:
     1. PayPal  2. Gutschein  3. Kreditkarte  4. Lastschrift SEPA
   Aendert der Veranstalter die Zahlungsarten oder deren Reihenfolge,
   muessen die nth-child-Zeilen unten angepasst werden. */
.ym-g33 .panibox .abstand > ul:not(.no_liststyle) {
  margin: 0 !important;
  padding: 4px 0 !important;
  list-style: none !important;
}

.ym-g33 .panibox .abstand > ul:not(.no_liststyle) > li {
  list-style: none !important;
  display: flex;
  align-items: center;
  min-height: 34px;
  margin: 0 0 4px !important;
  padding: 0 0 0 54px !important;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 44px 28px;
}

/* 1. PayPal */
.ym-g33 .panibox .abstand > ul:not(.no_liststyle) > li:nth-child(1) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 28%22%3E%3Crect x=%220.5%22 y=%220.5%22 width=%2243%22 height=%2227%22 rx=%225%22 fill=%22%23fff%22 stroke=%22%23d0d4dc%22/%3E%3Ctext x=%2222%22 y=%2217.5%22 text-anchor=%22middle%22 font-family=%22Arial,Helvetica,sans-serif%22 font-size=%229.5%22 font-weight=%22700%22 font-style=%22italic%22%3E%3Ctspan fill=%22%23003087%22%3EPay%3C/tspan%3E%3Ctspan fill=%22%23009cde%22%3EPal%3C/tspan%3E%3C/text%3E%3C/svg%3E");
}

/* 2. Gutschein */
.ym-g33 .panibox .abstand > ul:not(.no_liststyle) > li:nth-child(2) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 28%22%3E%3Crect x=%220.5%22 y=%220.5%22 width=%2243%22 height=%2227%22 rx=%225%22 fill=%22%23fff%22 stroke=%22%23d0d4dc%22/%3E%3Cg fill=%22none%22 stroke=%22%23d6001d%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%2214%22 y=%2211%22 width=%2216%22 height=%2211%22 rx=%221.5%22/%3E%3Cpath d=%22M13 8h18v3H13zM22 8v14%22/%3E%3Cpath d=%22M22 8c-1.5-3-5-3-5-.8C17 8 22 8 22 8zM22 8c1.5-3 5-3 5-.8C27 8 22 8 22 8z%22/%3E%3C/g%3E%3C/svg%3E");
}

/* 3. Kreditkarte */
.ym-g33 .panibox .abstand > ul:not(.no_liststyle) > li:nth-child(3) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 28%22%3E%3Crect x=%220.5%22 y=%220.5%22 width=%2243%22 height=%2227%22 rx=%225%22 fill=%22%23fff%22 stroke=%22%23d0d4dc%22/%3E%3Ctext x=%2213%22 y=%2217.2%22 text-anchor=%22middle%22 font-family=%22Arial,Helvetica,sans-serif%22 font-size=%228%22 font-weight=%22900%22 font-style=%22italic%22 fill=%22%231a1f71%22%3EVISA%3C/text%3E%3Ccircle cx=%2229%22 cy=%2214%22 r=%225.5%22 fill=%22%23eb001b%22/%3E%3Ccircle cx=%2235%22 cy=%2214%22 r=%225.5%22 fill=%22%23f79e1b%22/%3E%3Cpath d=%22M32 9.4a5.5 5.5 0 0 1 0 9.2a5.5 5.5 0 0 1 0-9.2z%22 fill=%22%23ff5f00%22/%3E%3C/svg%3E");
}

/* 4. Lastschrift SEPA */
.ym-g33 .panibox .abstand > ul:not(.no_liststyle) > li:nth-child(4) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 28%22%3E%3Crect x=%220.5%22 y=%220.5%22 width=%2243%22 height=%2227%22 rx=%225%22 fill=%22%23fff%22 stroke=%22%23d0d4dc%22/%3E%3Ctext x=%2222%22 y=%2217.5%22 text-anchor=%22middle%22 font-family=%22Arial,Helvetica,sans-serif%22 font-size=%2210.5%22 font-weight=%22700%22 fill=%22%2310298e%22%3ESEPA%3C/text%3E%3Cpath d=%22M8 21.5 Q22 25 36 21.5%22 fill=%22none%22 stroke=%22%23ffcc00%22 stroke-width=%221.6%22/%3E%3C/svg%3E");
}

/* ===== ENDE ANMELDESEITE ===== */

/* =========================================================
   ERGEBNISLISTE (bisheriger Stil, Farbe auf Datasport-Rot)
   ========================================================= */

table.divDetailsParent div.divDetailsInner > div > div:first-child {
    background: #d6001d !important;
    text-align: center !important;
    font-size: 13px !important;
}
.RRPublish > div.Tiles > div > div {
    color: #ffffff !important;
    background: #d6001d  !important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    font-weight: bold !important;
}

.RRPublish > div.SelectorParent > div.SelectorMenu > div > div:nth-child(1) {
    background: #d6001d !important;
    color: #ffffff !important;
  
}

.RRPublish > div.SelectorParent > div.SelectorMenu > div.selectorResult > div:nth-child(1) {
    background: #d6001d !important;
    color: #ffffff !important;
}
.RRPublish > div.SelectorParent > div.SelectorMenu > div > div:nth-child(1) {
    background: #d6001d !important;
    color: #ffffff !important;
}

.RRPublish > div.SelectorParent > div.SelectorMenu > div.selectorResult > div:nth-child(1) {
    background: #d6001d !important;
    color: #ffffff !important;
}
.RRPublish > div.Tiles > div {
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
}
@media only screen and (max-width: 600px) {
    .RRPublish > div.Tiles > div {
        margin-bottom: 16px !important;
    }
.RRPublish > div.Tiles > div {
    border: none !important;
}
}
@media only screen and (max-width: 640px) {
    .RRPublish a.aShowAll {
        background: #d6001d !important;
        color: #ffffff !important;
    }
}
.RRPublish a.aShowAll {
    font-size: 1em !important;
    font-style: italic;
    color: #ffffff !important;
    cursor: pointer;
    line-height: 200%;
    margin-right: 3px;
    background: #d6001d;
    border-radius: 4px;
}
.RRPublish > div.ListControl > div.ListControlSearch > button.btnSearch:disabled {
    background: #d6001d !important;
    border: 1px solid #ffffff !important;
    cursor: default;
}
.RRPublish > div.ListControl > div.ListControlSearch > button.btnClearSearch {
    background: #d6001d !important;
    border: 1px solid #ffffff !important;
    padding: 5px;
    height: 27px;
    cursor: pointer;
    width: 10%;
    border-radius: 0 4px 4px 0;
    border-left: 0;
}
p {
    font-size: 1.5em;
    line-height: 1.5em;
    margin: 0.2em 0 0;
    background: #d6001d;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
}
@media screen and (max-width: 500px) {
    h1 {
        font-size: 150%;
        color: #ffffff;
        padding: 9px;
    }
}

table.divDetailsParent div.divDetailsSocial > div:nth-child(2) {
    display: none !important;
}
table.divDetailsParent div.divDetailsSocial {
    display: none !important;
}
table.divDetailsParent div.divDetailsCertificates > div:nth-child(2) {
    text-align: center;
}
table.divDetailsParent div.divDetailsLinks > div {
    padding: 4px;
    text-align: center;
}
table.divDetailsParent div.divDetailsLinks > div:nth-child(2) img {
    max-height: 160px;
    max-width: 250px;
    border-radius: 5px;
}
.RRPublish > div.Tiles > div > table > tbody > tr > td {
    padding: 3px 3px 3px 8px;
    font-size: 0.95em;
    cursor: pointer;
    text-align: left;
    font-weight: bold !important;
}