ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin: 0; padding: 0;}
a img,:link img,:visited img { border: none; }

a
{
  text-decoration: none;
}

a:hover
{
  text-decoration: underline;
}

body, td
{
  margin: 0;
  padding: 0;
  font-family: Arial, Verdana, sans-serif;
  font-size: 11px;
  background-color: #fff;
}

body
{
  padding: 20px;
}

.form_error
{
  padding-left: 85px;
  color: #d8732f;
}

#menu
{
	padding-bottom: 10px !important;
}

#menu li
{
 	background-color: #ffc !important;
	padding: 5px !important;
}

#auth
{
	right: 20px;
	top: 30px;
	position: absolute;
	list-style: none;
}

#auth li
{
 	background-color: rgb(204, 204, 255) !important;
	padding: 5px !important;
	margin-left: 3px !important;
	float: left !important;
}

#loginform{
	width: 250px;
	height: 110px;
	background-color: #ccf;
	display: block;
	padding: 10px;
	border: 1px solid #E75C58;
	top: 20px;
	position: relative;
}

#direct-url
{
	padding-bottom: 10px;
	right: 20px;
	top: 60px;
	position: absolute;
	list-style: none;
}

div#indicator
{
  position: absolute;
  width: 100px;
  height: 40px;
  left: 650px;
  top: 125px;
  z-index: 900;
  background: url(/images/indicator.gif) no-repeat 0 0;
}

.sortable
{
	width: 200px;
	margin: 3px !important;
	padding: 3px !important;
	list-style-type: none;
	background-color: rgb(255, 255, 204);
	cursor: move;
}

.notsortable
{
	width: 200px;
	margin: 3px !important;
	padding: 3px !important;
	list-style-type: none;
	background-color: #ccf;
	cursor: default;
}

#login
{
  margin-bottom: 10px;
}

#sf_admin_list_th_sf_actions
{
  //width: 40px;
}

#csv-link
{
  text-align: right;
  margin-right: 0px;
  margin-top: 10px;
  margin-bottom: 10px;
}

#rdf-link, #rdf-link-all
{
  text-align: right;
  margin-right: 0px;
  margin-top: 10px;
  margin-bottom: 10px;
}

#bibtex-link
{
  text-align: right;
  margin-right: 0px;
  margin-top: 10px;
  margin-bottom: 10px;
}

#bookmarklet-link
{
  text-align: right;
  margin-right: 0px;
  margin-top: 10px;
  margin-bottom: 10px;
}

#sf_admin_footer
{
	margin-right: 330px;
}

.sf_admin_action_rdf
{
  background: url(/images/small/rdf.gif) no-repeat 3px 2px;
  border-right: 4px solid #E75C58 !important;
}

.sf_admin_action_pdf
{
  background: url(/images/small/pdf.png) no-repeat 3px 2px;
  border-right: 4px solid #E75C58 !important;
}

.sf_admin_action_bibtex
{
  background: url(/images/small/bibtex.gif) no-repeat 3px 2px;
  border-right: 4px solid #E75C58 !important;
}

.sf_admin_action_abstract
{
  background: url(/images/small/abstract.gif) no-repeat 3px 2px;
  border-right: 4px solid #E75C58 !important;
}

.sf_admin_action_edit
{
  background: url(/sf/sf_admin/images/edit_icon.gif) no-repeat 3px 2px;
  border-right: 4px solid #E75C58 !important;
}

.sf_admin_action_changename
{
  background: url(/sf/sf_admin/images/save.gif) no-repeat 3px 2px;
  border-right: 4px solid #E75C58 !important;
}

.sf_admin_action_show
{
  background: url(/sf/sf_admin/images/default_icon.gif) no-repeat 3px 2px;
  border-right: 4px solid #E75C58 !important;
}


.dam-title {		
  display: inline;
  color: #003366;
  font-size: 14px;
}

.dam-author {
  font-style: italic;
}

ul.publication_actions
{
  text-align: left;
  margin-top: 5px !important;
  margin-bottom: 10px !important;
  list-style-type: none !important;
}

.publication_actions li
{
  list-style-type: none !important;
  display: inline !important;
}

ul.publication_show_actions
{
  text-align: right;
  margin-top: 5px !important;
}

ul.publication_show_actions li
{
  display: inline;
}

/* War "color:#fff; background:#fff" (weiss auf weiss, sollte die leeren
   Kopfzeilen bei Publications/Projects unsichtbar machen - die haben aber
   ohnehin gar keine <th>, der Effekt griff also ausschliesslich auf echten
   Tabellen wie Employee/Author/Team). Durch die bekannte Ladereihenfolge-
   Falle gewann dort aber das Framework-Lavendel (#ccf) gegen "background:
   #fff", waehrend "color:#fff" bestehen blieb - weisser Text auf hellem
   Lavendel, praktisch unlesbar. Betraf auch Desktop, nicht nur Mobile. */
.sf_admin_list th {
  color: #333;
  background: #eef0ff;
}
.sf_admin_list th a {
  color: #333;
}

.sf_admin_menu {
  margin-top: 8px;
  position: absolute;
  right: 20px;
  width: 330px;
}

#sf_admin_bar
{
  width: 330px !important;
}

#sf_admin_content
{
  margin-right: 340px !important;
}

div #createnew{
	background-color: rgb(255, 255, 204);
	width: 300px;
}

#sf_admin_content .content input
{
	width: 80%;
}

#sf_admin_content .content textarea
{
	width: 90%;
}

#sf_admin_content .content select
{
	width: 50%;
}

#publication_download_date
{
	width: 80px !important;
}

#project_start_date_on, #project_end_date_on
{
	width: 80px !important;
}

#project_is_active, #partner_is_sponsor, #employee_is_external, #employee_is_author, #employee_is_admin,
#employee_createnew, #publication_link_to_pdf_remove, #partner_logo_remove, #project_logo_remove,
#publication_pdf_public, #publication_publish_pdf_anywhere, #publication_is_ifi,
#publication_nonewnumber, #publication_nonewpdf
{
	width: 14px !important;
}

#name, #surname, #distinction, #name_author, #surname_author, #distinction_author, #name_editor,
#surname_editor, #distinction_editor,
#name_head, #surname_head, #distinction_head,
#name_members, #surname_members, #distinction_members,
#name_publisher, #homepage_publisher
{
	width: 70% !important;
}

#button_create_add_author, #button_create_add_editor, #button_create_add_head, #button_create_add_members, #button_create_add_publisher
{
	width: 100px !important;
}

#button_create_author, #button_create_editor, #button_create_head, #button_create_members, #button_create_publisher
{
	width: 170px !important;
}

#button_create_cancel, #button_create_cancel_author, #button_create_cancel_editor, #button_create_cancel_head,
#button_create_cancel_members, #button_create_cancel_publisher
{
	width: 70px !important;
}

#author_button_add_existing, #button_add_existing_author, #editor_button_add_existing, #publisher_button_add_existing,
#project_button_add_existing, #head_button_add_existing, #members_button_add_existing,
#button_clear_author, #button_clear_editor, #button_clear_publisher,
#partner_button_add_existing,
#funding_button_add_existing
{
	width: 70px !important;
}

.form-row
{
	min-height: 10px !important;
	_height: 10px !important;	
}

#inline_add,
#inline_author, #author_inline_add,
#inline_editor, #editor_inline_add,
#inline_project, #project_inline_add,
#inline_head, #head_inline_add,
#inline_members, #members_inline_add,
#inline_partner, #partner_inline_add,
#inline_funding, #funding_inline_add,
#clear_ul_authors, #clear-area_authors,
#clear_ul_editors, #clear-area_editors,
#clear_ul_publisher, #clear-area_publisher,
#publisher_inline_add
{
  display: inline;
}

#notrecognized_authors, #notrecognized_editors, #notrecognized_publisher
{
	background-color: #ffff66 !important;
	padding: 2px;
	margin-top: 2px;
	margin-bottom: 5px;
	width: 80%;
}

#clear_area_authors
{
	display: inline;
}
#add_name_surname, #add_name_surname_author, #add_name_surname_editor, #add_name_surname_head
{
	display: inline;
	margin-bottom: 2px !important;
}

#filters\[authors\], #filters\[editors\], #filters\[projects\], #filters\[teams\], #filters\[publisher\], #filters\[year\],
#filters\[publication_type\], #filters\[yearfrom\], #filters\[yearto\], #filters\[bibtex_type\]
{
	width: 125px;
}

#storage2, #storage3, #storage4, #publication_id, #button_create_add,
#author_fullname, #author_publication_id, #button_create_add_author, #add_name_surname, #add_name_surname_author, #button_create_cancel, #button_create_cancel_author,
#editor_fullname, #editor_publication_id, #button_create_add_editor, #add_name_surname_editor, #button_create_cancel_editor,
#head_fullname, #head_project_id, #storage_head, #button_create_add_head, #button_create_cancel_head, #add_name_surname_head,
#members_fullname, #members_project_id, #storage_members, #button_create_add_members, #button_create_cancel_members, #add_name_surname_members,
#button_create_cancel_publisher, #button_create_add_publisher, #add_name_homepage_publisher,
#project_fullname,  #project_publication_id, #project_id, #storage_project,
#partner_fullname,  #partner_project_id, #partner_id, #storage_partner,
#funding_fullname,  #funding_project_id, #funding_id, #storage_funding,
#hidden_editor_publication_id, #hidden_author_publication_id, #hidden_publisher_publication_id,
#publisher_publication_id, #publisher_fullname,
#hidden_members_project_id, #hidden_head_project_id
{
	display: none;
}

#storage_create_author, #storage_create_editor, #storage_create_head, #storage_create_members
{
	color: #f33;
	margin-top: 5px;
}

.project-logo
{
	max-height: 75px !important;
	max-width: 75px !important;
	_width: 75px;
}

.partner-logo
{
	max-height: 75px !important;
	max-width: 75px !important;
	_width: 75px;
}

.sf_admin_checklist>li>input
{
	width: 14px !important;
}

.partnerrow
{
	border: 1px solid rgb(221, 221, 221) !important;
	height: 75px;
	display: table-row;
	border-width: 1px !important;
	border-color: #fff !important;
	border-style: solid !important;
}

.partnertext
{
	//border: 1px solid rgb(221, 221, 221) !important;
	display: table-cell;
	vertical-align: middle;
	border-width: 1px !important;
	border-color: #fff !important;
	border-style: solid !important;
}

.partnerlogo
{
	width: 100px;
	display: table-cell;
	vertical-align: middle;
	border-width: 1px !important;
	border-color: #fff !important;
	border-style: solid !important;
}

.partnerlogo > img
{
	max-height: 75px !important;
	max-width: 75px !important;
	_width: 75px;
}

#bibteximport{
	background-color: rgb(255, 255, 204);
	width: 100%;
	height: 400px;
}

.import{
	padding: 5px;
	display: block;
	border: 1px solid rgb(221, 221, 221) !important;
}

#bibtexurl{
	width: 80%;
}

#Menu1{
	position: absolute;
	right: 10px;
	top: 131px;
}

#sf_fieldset_technical_report{
	display: none;
}

#savepublication{
	width: 60px !important;
}

#print-title
{
	display: none;
}

.sf_admin_action_save:first-letter
{
	font-weight: bold;
}

#associated_team_publication_1, #associated_team_publication_2, #associated_team_publication_3,
#associated_team_publication_4, #associated_team_publication_5, #associated_team_publication_6,
#associated_team_publication_7, #associated_team_publication_8, #associated_team_publication_9,
#associated_team_publication_10, #associated_team_publication_11, #associated_team_publication_12,
#associated_team_publication_13, #associated_team_publication_14, #associated_team_publication_15 {
	width: 14px !important;
}

#associated_team_project_1, #associated_team_project_2, #associated_team_project_3,
#associated_team_project_4, #associated_team_project_5, #associated_team_project_6,
#associated_team_project_7, #associated_team_project_8, #associated_team_project_9,
#associated_team_project_10, #associated_team_project_11, #associated_team_project_12,
#associated_team_project_13, #associated_team_project_14, #associated_team_project_15 {
	width: 14px !important;
}

#associated_employee_team_1, #associated_employee_team_2, #associated_employee_team_3,
#associated_employee_team_4, #associated_employee_team_5, #associated_employee_team_6,
#associated_employee_team_7, #associated_employee_team_8, #associated_employee_team_9,
#associated_employee_team_10, #associated_employee_team_11, #associated_employee_team_12,
#associated_employee_team_13, #associated_employee_team_14, #associated_employee_team_15 {
	width: 14px !important;
}

#publication_1_description{
	
}

#sf_admin_container .form-row label{
	width: 12em !important;
}

#sf_admin_container .form-row .content
{
  padding-left: 13em;
}

/* ---- Mobile ----
   Ohne Viewport-Meta rendert das Handy vorher in Desktop-Breite und skaliert
   alles winzig herunter. Ab hier: echte, fluide Darstellung statt Verkleinerung.

   Zwei Schwellen: unter 480px greift die Mobile-Ansicht IMMER - das deckt so
   gut wie jedes Handy ab, unabhaengig davon, ob der Browser "pointer: coarse"
   zuverlaessig meldet (bei Remote-Debugging/Screen-Mirroring liefert das oft
   faelschlich "fine", wie eine Maus). Zwischen 480 und 768px nur bei
   bestaetigtem Touch - so bleibt ein schmal gezogenes Desktop-Browserfenster
   (Maus = "fine") unveraendert bei der Desktop-Ansicht. */
@media (max-width: 480px), (max-width: 768px) and (pointer: coarse) {
  body { padding: 0; font-size: 15px; }
  #sf_admin_container { padding: 0 8px; }
  /* War versehentlich "#login" statt "#loginbox" - das traf das <input
     id="login"> direkt (gleicher Name wie das Login-Feld) und verschob es
     um 8px nach rechts, ohne das zugehoerige <label> mitzuverschieben. */
  #loginbox, #sf_admin_footer { margin-left: 8px; margin-right: 8px; }

  /* Kopfzeile: Wortmarke links, Hamburger rechts - EINE Zeile statt vier
     gestapelter Bloecke. Das Logo-Rasterbild (nativ nur 489px breit) wird
     bei voller Breite unscharf; als Ersatz eine echte, immer scharfe
     Text-Wortmarke. Der lange Untertitel ist Dekoration und kostet auf
     Mobile nur Platz - wird hier weggelassen (bleibt im <title> fuer SEO/Tab). */
  #header {
    text-align: left;
    margin: 0;
    padding: 10px 8px;
    background: #4646b5;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #header h1 { margin: 0; line-height: 1; }
  #header br { display: none; }
  #header img { display: none; }
  #header h1 a {
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: .5px;
    color: #fff;
  }
  /* Der Link enthaelt nur das (jetzt versteckte) Logo-Bild, keinen Text. */
  #header h1 a::before {
    content: "PAX";
  }

  #sr-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Hamburger-Toggle, wird per JS injiziert (layout.php) und steuert die
     Klasse .sr-nav-open auf #sr-nav. Ohne JS/ausserhalb des Breakpoints
     bleiben Menue und Auth-Links wie gehabt permanent sichtbar. */
  #sr-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 6px;
    color: #fff;
    font-size: 20px;
    line-height: 1;
  }

  /* Login-Icon in der Kopfzeile (per JS aus dem Menue hierher verschoben,
     siehe layout.php) - die einzige Aktion verdient einen festen Platz
     neben dem Hamburger statt zwischen Navigationspunkten zu verschwinden. */
  .sr-header-login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 6px;
    color: #fff;
  }

  /* RDFa-Umschalter in der Kopfzeile (per JS verschoben, siehe layout.php) -
     kurzes Label statt des langen Original-Linktexts, damit er neben
     Login-Icon und Hamburger noch Platz hat. */
  .sr-header-rdfa-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
  }

  #sr-nav {
    display: none;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-top: none;
    margin: 0 0 10px;
  }
  #sr-nav.sr-nav-open { display: flex; }

  #menu, #auth {
    display: contents;
  }
  #menu li, #auth li {
    display: block !important;
    float: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #f0f0f0;
  }
  /* Alle vier Punkte einheitlich als gleichwertige Navigationsziele -
     Publications/Projects/about fuehren irgendwohin, das ist alles
     "Navigation". Einzige Ausnahme: Login (unten) ist keine Navigation,
     sondern eine AKTION - dafuer eigens abgesetzt statt textlich gleich. */
  #menu a, #auth a {
    display: block;
    padding: 12px 14px;
    color: #333;
    font-size: 15px;
  }

  /* Fallback fuer den seltenen Fall, dass JS nicht laeuft: Login bleibt dann
     hier in der Liste (statt als Icon in der Kopfzeile, siehe layout.php)
     und ist wenigstens als Button erkennbar statt als reiner Textlink. */
  #sr-login-item a {
    display: inline-block;
    padding: 8px 20px;
    background: #eef0ff;
    border: 1px solid #ccf;
    border-radius: 6px;
    color: #4646b5;
    font-weight: bold;
  }

  /* Sign-out ist wie Login eine AKTION, keine Navigation - gleiche
     Button-Optik, aber warnfarben statt Marken-Lila (man verlaesst etwas). */
  #auth li#sr-signout-item {
    padding: 10px 14px !important;
  }
  #sr-signout-item a {
    display: inline-block;
    padding: 8px 20px;
    background: #fdeeee;
    border: 1px solid #f0caca;
    border-radius: 6px;
    color: #b54646;
    font-weight: bold;
  }

  img { max-width: 100%; height: auto; }

  input, select, textarea {
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px; /* verhindert Auto-Zoom von iOS beim Fokussieren */
    padding: 4px 6px;
  }

  /* Label und Feld nebeneinander statt gestapelt - spart pro Zeile eine
     ganze Texthoehe. Feste Label-Breite reicht fuer alle Beschriftungen
     ("Authors/Editors:" ist die laengste), Feld nimmt den Rest der Breite. */
  #sf_admin_container .form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  #sf_admin_container .form-row label {
    width: 118px !important;
    flex: 0 0 118px;
    display: block;
    float: none !important;
    text-align: right;
    color: #666;
    font-size: 13px;
    font-weight: normal !important;
    margin-bottom: 0;
    padding-right: 8px;
    box-sizing: border-box;
  }
  #sf_admin_container .form-row .content {
    /* flex-basis:0 statt auto - sonst zieht der Browser die "natuerliche"
       Breite des enthaltenen <input> heran (u.a. von der alten
       Desktop-Regel "width:80%"), die zusammen mit dem Label breiter als
       die Zeile ist und alles per flex-wrap auf eine neue Zeile zwingt. */
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0 !important;
  }
  #sf_admin_container .form-row .content input,
  #sf_admin_container .form-row .content select {
    width: 100% !important;
  }

  /* Sonderfall Jahr-Zeile: "Year:"+"from:" sind hier ZWEI Labels vor dem
     Content-Feld, und darin folgen "to:" + ein zweites Feld verschachtelt -
     die generische Label/Content-Logik oben passt hier nicht 1:1. Das
     ueberfluessige "Year:"-Label weg, "from"-Input und "to:"+Input klein und
     nebeneinander statt auf volle Breite gezogen (ein Jahr hat 4 Ziffern). */
  #sf_admin_bar .form-row label:not([for]) {
    display: none;
  }
  #sf_admin_bar .form-row .content input[name="filters[yearfrom]"],
  #sf_admin_bar .form-row .content input[name="filters[yearto]"] {
    width: 64px !important;
    display: inline-block !important;
  }
  #sf_admin_bar .form-row label[for="filters[yearto]"] {
    width: auto !important;
    flex: none !important;
    display: inline-block !important;
    padding: 0 6px !important;
  }
  /* Inline-Block-Fluss brach hier unerklaert um (vermutlich durch die
     eingestreuten <script>-Tags der Autocompleter) - stattdessen Flexbox
     erzwingen. flex-wrap:nowrap statt wrap, weil selbst mit reichlich Platz
     (209px Container, ~156px benoetigt) trotz Flex noch umgebrochen wurde -
     nowrap erzwingt zuverlaessig eine Zeile, egal was die Ursache war. */
  #sf_admin_bar .form-row:has(input[name="filters[yearfrom]"]) .content {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2px;
  }

  /* Filter-Panel an die neue, flache Designsprache angleichen: die alten
     lauten Lila-Balken ("search"/"filters") und blockigen Boxen passten
     nicht mehr zu Karten/Kopfzeile/Paginierung. Jetzt: dezente Akzentfarbe
     statt Vollton-Hintergrund, gleiche Abstufungen wie ueberall sonst.
     Zusaetzlich deutlich kompakter - jede Zeile kostete vorher durch
     grosszuegige Innenabstaende unnoetig viel Scroll-Strecke. */
  #sf_admin_bar fieldset,
  #sf_admin_bar > div {
    border: none !important;
    margin: 0;
    padding: 0;
  }
  /* "search"/"filters"/"output formats" sind reine Struktur-Ueberschriften
     ohne echten Zusatznutzen - die Felder darunter sind selbsterklaerend. */
  #sf_admin_bar fieldset h2 {
    display: none !important;
  }
  #sf_admin_bar .form-row {
    padding: 2px 4px !important;
    margin: 0;
    border-bottom: none !important;
  }
  #sf_admin_bar .sf_admin_actions {
    padding: 12px 4px;
    margin: 0;
    text-align: left;
  }
  /* "Neues Projekt/Neue Publikation anlegen"-Buttons stehen in einem <ul>
     direkt vor der Suchbox, nur sichtbar mit employee-Credential. Ohne
     Berechtigung bleibt das <ul> leer, behaelt aber Padding/Margin und
     erzeugt eine Phantom-Luecke oben. :has(li) statt :empty, weil das <ul>
     Whitespace-Textknoten enthaelt und :empty damit nie zutrifft. */
  #sf_admin_bar > ul.sf_admin_actions:not(:has(li)) {
    display: none;
  }
  /* ALLE Framework-Standard-Buttons (Filter/Reset, aber auch die
     Formular-Aktionen auf jeder Edit/Create-Seite: Neu anlegen, Speichern,
     Loeschen, Abbrechen, Zur Liste) an die flache Designsprache angleichen -
     vorher durchgehend gelbe Pillen mit farbigen Icon-Hintergruenden und
     bunten Seitenrahmen aus dem Framework-CSS (add.gif/save.gif/delete.gif/
     etc., je mit border-right:4px !important). "html body"-Praefix erhoeht
     die Spezifitaet zuverlaessig ueber die des Frameworks hinaus (siehe
     wiederholte Ladereihenfolge-Falle oben). Icon-Hintergrund wird ersetzt,
     nicht nur uebermalt - die alte 20px linke Polsterung dafuer entfaellt. */
  html body #sf_admin_container .sf_admin_actions input,
  html body #sf_admin_container .sf_admin_actions a,
  html body #sf_admin_container ul.sf_admin_actions input,
  html body #sf_admin_container ul.sf_admin_actions a {
    background: #eef0ff !important;
    border: 1px solid #ccf !important;
    border-right: 1px solid #ccf !important;
    color: #4646b5 !important;
    font-size: 14px !important;
    font-weight: bold;
    padding: 0 18px !important;
    min-height: 40px;
    line-height: 40px;
    border-radius: 6px;
    display: inline-block;
  }
  /* Primaere, vorwaerts fuehrende Aktionen - gefuellt statt outline. */
  html body #sf_admin_container .sf_admin_action_filter,
  html body #sf_admin_container .sf_admin_action_create,
  html body #sf_admin_container .sf_admin_action_save,
  html body #sf_admin_container .sf_admin_action_save_and_add {
    background: #4646b5 !important;
    border-color: #4646b5 !important;
    color: #fff !important;
  }
  /* Destruktive Aktion - Warnfarbe statt Marken-Lila (analog "sign out"). */
  html body #sf_admin_container .sf_admin_action_delete {
    background: #fdeeee !important;
    border-color: #f0caca !important;
    color: #b54646 !important;
  }

  /* Zeilen-Aktionen in echten Tabellen (Employee/Author/Team/Publisher/
     Partner-Listen) haengen NICHT in <ul class="sf_admin_actions"> wie bei
     Publications/Projects, sondern in <ul class="sf_admin_td_actions"> -
     eine komplett andere, vom Admin-Generator direkt erzeugte Klasse. Blieb
     deshalb von der Buttons-Ueberarbeitung oben unberuehrt: winzige
     16x16px-Icons ohne jede Formatierung. Gleiches Muster wie bei den
     Publikations-Aktionen - Icon ausblenden, lesbarer Text-Badge statt. */
  .sf_admin_td_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    margin: 0;
  }
  .sf_admin_td_actions li {
    display: inline-block;
    margin: 0;
  }
  .sf_admin_td_actions img {
    display: none;
  }
  .sf_admin_td_actions a {
    display: inline-block;
    padding: 6px 10px;
    background: #eef0ff;
    border: 1px solid #ccf;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #4646b5;
    min-height: 30px;
    line-height: 18px;
  }
  .sf_admin_td_actions a[href*="/edit"]::after {
    content: "Edit";
  }
  .sf_admin_td_actions a[href*="/delete"]::after {
    content: "Delete";
  }
  .sf_admin_td_actions a[href*="/delete"] {
    background: #fdeeee;
    border-color: #f0caca;
    color: #b54646;
  }
  .sf_admin_td_actions a[href*="/rdf"] {
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    background: #fff url('/images/small/rdf-2026.png') no-repeat center / 22px auto;
  }
  .sf_admin_td_actions a[href*="/csv"] {
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    background: #fff url('/images/small/csv-2026.png') no-repeat center / 22px auto;
  }

  /* Duenner Rahmen um die ganze Suche/Filter-Box, damit sie sich wie Karten
     und Paginierung als klar abgegrenzter Block ins restliche Layout
     einfuegt statt frei zu schweben. */
  #sf_admin_bar {
    border: 1px solid #e6e6e6 !important;
    border-radius: 8px;
    overflow: hidden;
  }

  /* Alle vier Export-Optionen einheitlich als Liste: gleiche Zeilenhoehe,
     Icon+Text gleich ausgerichtet, dezente Trennlinie zwischen den Zeilen -
     wie die Reset/Filter-Buttons sollen sie sich nicht mehr wie lose
     Textlinks anfuehlen, sondern wie eine saubere Optionsliste. */
  #sr-exports #bibtex-link, #sr-exports #rdf-link, #sr-exports #rdf-link-all,
  #sr-exports #csv-link, #sr-exports #bookmarklet-link {
    border-bottom: 1px solid #f2f2f2 !important;
    border-right: none !important;
    padding: 0;
    margin: 0;
  }
  #sr-exports #bookmarklet-link:last-child {
    border-bottom: none !important;
  }
  #sr-exports #bookmarklet-link br {
    display: none;
  }
  #sr-exports a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 8px;
    color: #333;
    font-size: 13px;
  }
  /* Weder die 16x16px-Rasterbilder (unscharf bei Vergroesserung) noch die
     "big"-Varianten (RDF-Logo mit feinem Text, BibTeX im falschen
     Breitbild-Format - siehe Publikationsliste weiter oben, gleiches
     Problem) taugen hier. Stattdessen saubere Vektor-Icons, die bei jeder
     Groesse scharf bleiben und ein passendes Symbol pro Zeilentyp zeigen. */
  #sr-exports a img {
    display: none;
  }
  #sr-exports a::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
  }
  /* 2026-08: echte BibTeX-/RDF-Icons statt selbstgebauter SVG-Platzhalter -
     lokal gehostet (siehe .publication_actions weiter oben fuer Details). */
  #sr-exports #bibtex-link a::before {
    background-image: url('/images/small/bibtex-2026.png');
  }
  #sr-exports #rdf-link a::before,
  #sr-exports #rdf-link-all a::before {
    background-image: url('/images/small/rdf-2026.png');
  }
  #sr-exports #csv-link a::before {
    background-image: url('/images/small/csv-2026.png');
  }
  #sr-exports #bookmarklet-link a::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234646b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/><path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/></svg>");
  }
  #sr-exports .form-row {
    display: block !important;
    padding: 0 !important;
  }
  /* Die urspruengliche "output formats"-Ueberschrift aus dem Fieldset wird
     durch den Toggle-Button "Export" ersetzt (siehe #sr-exports-toggle). */
  #sr-exports fieldset h2 {
    display: none !important;
  }
  #sr-exports fieldset {
    border: none !important;
    margin: 0;
    padding: 0;
  }

  /* Export-Bereich (BibTeX/RDF/CSV) wird per JS aus der Suche/Filter-Box
     herausgehoben und bekommt eine eigene, ausklappbare Box im selben Stil
     wie die Suche/Filter-Box daneben - siehe layout.php. */
  #sr-exports-toggle {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    margin: 6px 0;
    background: #eef0ff;
    border: 1px solid #ccf;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
  }
  #sr-exports-toggle .sr-filter-toggle-icon {
    transition: transform .15s ease;
  }
  #sr-exports-toggle.sr-open .sr-filter-toggle-icon {
    transform: rotate(180deg);
  }
  #sr-exports {
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 0 10px;
  }
  #sr-exports.sr-collapsed {
    display: none;
  }

  /* Login-Box an die restliche Designsprache angleichen - vorher ein
     festbreites 250x110px-Kaestchen mit lila Hintergrund und rotem Rahmen
     aus uraltem Desktop-CSS (#loginform). Jetzt: gleiche Karten-Optik wie
     Suche/Filter und Export, Label ueber Feld wie im Filter-Panel, Buttons
     im gleichen Stil wie Reset/Filter (login = primaer, cancel = outline). */
  #loginbox {
    margin: 10px 0;
  }
  #loginform {
    width: auto !important;
    height: auto !important;
    background: #fff !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 8px;
    padding: 16px;
    top: 0;
    box-sizing: border-box;
  }
  #loginform label {
    display: block;
    color: #666;
    font-size: 13px;
    margin: 0 0 4px;
  }
  #loginform input[type="text"],
  #loginform input[type="password"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    padding: 8px;
    margin-bottom: 14px;
  }
  #loginform .sr-login-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
  }
  /* "cancel" ist ein <input type="button">, kein <button> - die Regel traf
     es bisher nie, weshalb es im nackten Browser-Default-Look (grauer 3D-
     Rahmen) haengen blieb, waehrend "login" schon gestylt war. */
  html body #loginform input[type="submit"],
  html body #loginform input[type="button"] {
    background: #4646b5 !important;
    border: 1px solid #4646b5 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: bold;
    padding: 0 18px !important;
    min-height: 40px;
    border-radius: 6px;
  }
  html body #loginform input[type="button"] {
    background: #eef0ff !important;
    border-color: #ccf !important;
    color: #4646b5 !important;
  }
  #loginform a {
    font-size: 13px;
  }

  /* RDFa-Hinweisbanner - erklaert kurz, warum diese Seite maschinenlesbare
     Daten enthaelt, statt den Link kommentarlos irgendwo zu verstecken.
     Bewusst NICHT einklappbar (anders als Suche/Export) - es ist ein
     Hinweis, kein Werkzeug, das man oeffnen/schliessen muss. */
  #sr-rdfa-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #f5f5fb;
    border: 1px solid #e0e0f0;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 10px 0;
  }
  #sr-rdfa-banner svg {
    flex-shrink: 0;
    color: #4646b5;
    margin-top: 2px;
  }
  #sr-rdfa-banner p {
    margin: 0 0 6px;
    font-size: 13px;
    color: #444;
    line-height: 1.4;
  }
  #sr-rdfa-banner .sr-rdfa-links {
    font-size: 13px;
  }
  #sr-rdfa-banner .sr-rdfa-links a {
    color: #4646b5;
    font-weight: bold;
  }
  #sr-rdfa-dismiss {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #888;
    font-size: 20px;
    line-height: 1;
    margin: -4px -4px 0 0;
  }

  /* Admin-Formulartabellen (Bearbeiten-Ansichten) sind fuer Desktop-Breiten
     gebaut - auf schmalem Viewport lieber horizontal scrollen lassen als
     jede Spalte zu quetschen. Die Publikationsliste (.sf_admin_list) ist
     dagegen im Kern eine Ein-Spalten-Liste mit langen Titeln - dort soll der
     Text ganz normal umbrechen, nicht abgeschnitten werden. */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    max-width: 100%;
  }
  .sf_admin_list {
    display: block;
    white-space: normal;
    max-width: 100%;
    overflow-x: auto;
  }
  /* Publikations-/Projektlisten sind pro Zeile EIN <td colspan="..."> (eine
     Karte). Employee-/Author-/Team-Listen sind dagegen echte Tabellen mit
     mehreren eigenstaendigen Spalten pro Zeile (kein colspan) - fuer die
     waere "display:block" auf jeder Zelle fatal: das Gitter faellt komplett
     auseinander, jede Spalte landet unbeschriftet untereinander. [colspan]
     als zuverlaessiges Unterscheidungsmerkmal: nur Karten-Zeilen umstellen,
     echte Tabellen behalten ihr Zeilen/Spalten-Layout und scrollen
     stattdessen horizontal (siehe .sf_admin_list { overflow-x:auto } oben). */
  .sf_admin_list tr:has(td[colspan]) {
    display: block;
  }
  .sf_admin_list td[colspan] {
    display: block;
    white-space: normal;
    width: auto !important;
  }

  /* Die Suche/Filter-Box (.sf_admin_menu) ist auf Desktop absolut rechts
     positioniert (330px breit), waehrend #sf_admin_content per margin-right
     Platz dafuer freihaelt. Auf 375px Breite blieben dem Inhalt so nur noch
     ~35px - daher das Wortsalat-Layout und die Ueberlappung. Auf Mobile
     stattdessen normal im Textfluss UNTER dem Inhalt anzeigen. */
  .sf_admin_menu {
    position: static !important;
    width: auto !important;
    margin: 15px 0 !important;
  }
  #sf_admin_content {
    margin-right: 0 !important;
  }
  #sf_admin_bar {
    position: static !important;
    right: auto !important;
    width: auto !important;
  }
  #sf_admin_footer {
    margin-right: 0 !important;
  }
  #sf_admin_content .content input {
    width: auto !important;
  }

  /* Sortier-/Anzeigezeile als kompakte Toolbar statt loser Inline-Elemente.
     [id$="perpage"] deckt zusaetzlich die vom Admin-Generator automatisch
     benannten Formulare anderer Module ab (z.B. #authorperpage,
     #employeeperpage) - nur die Publikationsliste hat mit
     "publicationselectmenu" einen eigenen, abweichenden Namen. */
  #publicationselectmenu,
  [id$="perpage"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    background: #f7f7fb;
    border: 1px solid #e4e4f0;
    border-radius: 6px;
    padding: 8px;
    margin: 8px 0 18px;
    font-size: 12px;
  }
  #publicationselectmenu select,
  [id$="perpage"] select {
    font-size: 16px;
    padding: 2px;
    flex-shrink: 1;
    min-width: 0;
  }
  #publicationselectmenu input[type="submit"],
  [id$="perpage"] input[type="submit"] {
    padding: 4px 8px;
    font-size: 12px;
    flex-shrink: 0;
  }

  /* Jahres-Abschnitte als klare Trenner statt nackter Fettschrift. Mehr
     Abstand nach oben, damit die Trennlinie nicht mit der abgerundeten
     Toolbar-Box direkt darueber zu einem "Doppelrahmen" verschmilzt. */
  #sf_admin_content h1 {
    font-size: 19px;
    margin: 6px 0 8px;
    padding-bottom: 3px;
    border-bottom: 2px solid #ccf;
    color: #4a4a4a;
  }

  /* Fliesstext (z.B. About-Seite) erbte bisher die winzige 11px-Basisgroesse
     der Desktop-Aera. Ausserdem hatten Zwischentitel (h3) keinerlei
     Hervorhebung - gleiche Groesse/Gewicht wie der Text darunter, dadurch
     kaum als Gliederung erkennbar. */
  #sf_admin_content {
    font-size: 15px;
    line-height: 1.55;
  }
  /* :not(.dam-title) - sonst greift das auch auf die Publikationstitel in
     den Listenkarten (auch <h3>), die schon ihre eigene Kartentypografie
     haben (siehe .sf_admin_list h3.dam-title weiter unten). */
  #sf_admin_content h3:not(.dam-title) {
    color: #4646b5;
    font-size: 17px;
    font-weight: bold;
    margin: 26px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #eef0ff;
  }

  /* Publikationen als Karten: mehr Weissraum, klare Trennung, groessere
     Tap-Targets fuer die Aktions-Icons statt randloser 16px-Streifen.
     Der eigene Kartenrahmen ersetzt die Tabellenrahmen der Admin-Liste
     (sonst zwei ineinander verschachtelte Rahmen - #sf_admin_container
     .sf_admin_list/td setzen border !important im Framework-CSS). */
  /* html-Praefix erhoeht die Spezifitaet ueber die des Framework-Selektors
     hinaus - bei exakt gleicher Spezifitaet UND !important auf beiden Seiten
     entscheidet sonst die Ladereihenfolge, und main.css laedt (durch
     Symfonys automatische Style-Injektion vor "</head>") faktisch VOR statt
     nach dem Framework-CSS, egal wo der eigene <link>-Tag im Template steht. */
  html body #sf_admin_container .sf_admin_list,
  html body #sf_admin_container .sf_admin_list td {
    border: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
  }
  .sf_admin_list td > div {
    display: block;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    padding: 12px;
    margin: 8px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }
  .sf_admin_list h3.dam-title {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 2px;
    /* Lange Titel auf 2 Zeilen kappen statt die Karte zu sprengen. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .sf_admin_list span[rel="rdf:type"] {
    color: #4646b5;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .3px;
  }
  /* "body, td { font-size:11px }" (Desktop-Aera-Basisregel) trifft jede
     <td> direkt und schlaegt damit die von #sf_admin_content vererbte 15px -
     eine direkte Deklaration gewinnt immer gegen Vererbung, unabhaengig von
     Spezifitaet. Betraf den unformatierten Text in Publikations- UND
     Projekt-Karten (Autoren/Journal bzw. Projektbeschreibung), der dadurch
     winzig blieb, waehrend Titel/Badges (eigene Regeln) normal aussahen. */
  .sf_admin_list td {
    font-size: 15px;
  }
  /* Lange Projektbeschreibungen sprengten sonst die Karte (bis zu 15+
     Zeilen Fliesstext) - wie bei Publikationstiteln auf eine sinnvolle
     Laenge kappen statt endlos scrollen zu lassen. */
  .sr-project-desc {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Projekte ohne Beschreibung/Homepage hatten trotzdem die dekorativen
     doppelten <br/> vor "Duration:" im Markup (siehe _list_rdfa.php) - ohne
     ausfuellenden Text blieb davon nur eine grosse Leerflaeche uebrig. Wie
     schon auf der About-Seite: nur das ZWEITE von zwei aufeinanderfolgenden
     <br/> ausblenden, einzelne <br/> bleiben unangetastet. */
  .sf_admin_list td > div br + br {
    display: none;
  }
  /* Flexbox mit "gap" statt margin-right auf den <li> - margin erzeugt beim
     Umbrechen auf mehrere Zeilen (4-5 Buttons passen selten in eine Zeile)
     ungleichmaessige Abstaende (rechts ja, untereinander nein). gap wirkt
     in beide Richtungen gleich. */
  .sf_admin_list ul.publication_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 0;
    padding: 0;
  }
  .sf_admin_list ul.publication_actions li {
    display: inline-block;
    margin: 0;
  }
  /* 2026-08: echte, gut aufgeloeste RDF-/BibTeX-Icons gefunden (420x474 bzw.
     429x466px, jeweils mit eingebautem Schriftzug) - ersetzen die bisherigen
     Text-Badges. Lokal gehostet statt verlinkt (siehe Kommentar unten bei
     #sr-exports), damit die Seite nicht von einer fremden Domain abhaengt. */
  .sf_admin_list ul.publication_actions img {
    display: none;
  }
  .sf_admin_list ul.publication_actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 34px;
    height: 34px;
    padding: 0;
    background: #eef0ff;
    border: 1px solid #ccf;
    border-radius: 5px;
  }
  .sf_admin_list ul.publication_actions a[href*="/rdf/"] {
    background: #fff url('/images/small/rdf-2026.png') no-repeat center / 22px auto;
  }
  .sf_admin_list ul.publication_actions a[href*="/bibtex/"] {
    background: #fff url('/images/small/bibtex-2026.png') no-repeat center / 22px auto;
  }
  /* Nur fuer eingeloggte Mitarbeiter/Admins sichtbar (_iconslist.php):
     Bearbeiten/Loeschen-Icons hatten noch keinen Text-Ersatz und blieben
     als leere Pillen stehen, seit Icons in dieser Liste generell ausgeblendet
     werden. "error on import" nutzt zufaellig dieselbe /edit-URL wie der
     normale Bearbeiten-Link. Beide zeigten deshalb "Edit" und wirkten wie
     ein Duplikat - der Fehler-Link bekam in _iconslist.php zusaetzlich die
     Klasse "sr-action-import-error", damit er sich eindeutig beschriften
     laesst (Regel steht bewusst NACH [href*="/edit"], um bei gleicher
     Spezifitaet per Ladereihenfolge zu gewinnen). */
  /* Edit/Delete/Import-Fehler bleiben Text-Badges (kein Icon geliefert) -
     brauchen deshalb wieder variable Breite + Innenabstand statt der festen
     34x34px-Icon-Groesse von RDF/BibTeX oben. */
  .sf_admin_list ul.publication_actions a[href*="/edit"],
  .sf_admin_list ul.publication_actions a.sr-action-import-error,
  .sf_admin_list ul.publication_actions a[href*="/delete"] {
    width: auto;
    height: 34px;
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 12px;
    font-weight: bold;
    color: #4646b5;
  }
  .sf_admin_list ul.publication_actions a[href*="/edit"]::after {
    content: "Edit";
  }
  .sf_admin_list ul.publication_actions a.sr-action-import-error::after {
    content: "Fix import issue";
  }
  .sf_admin_list ul.publication_actions a.sr-action-import-error {
    background: #fff4e5;
    border-color: #f0d9b5;
    color: #a15c00;
  }
  .sf_admin_list ul.publication_actions a[href*="/delete"]::after {
    content: "Delete";
  }
  .sf_admin_list ul.publication_actions a[href*="/delete"] {
    background: #fdeeee;
    border-color: #f0caca;
    color: #b54646;
  }

  /* Paginierung (tfoot der Admin-Liste): war ein float:right-Haufen aus
     16px-Pfeil-Icons ohne Abstand. Als zentrierte, umbrechende Button-Reihe
     mit ausreichend grossen Tap-Targets (min. 36px) neu aufgebaut. */
  .sf_admin_list tfoot,
  .sf_admin_list tfoot tr,
  .sf_admin_list tfoot th {
    display: block;
    border: none !important;
    padding: 0 !important;
  }
  .sf_admin_list tfoot th {
    padding-top: 10px !important;
    text-align: center;
    background: transparent !important;
  }
  .sf_admin_list tfoot .float-right {
    float: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }
  /* Einheitliche Mindestbreite fuer alle Elemente (Pfeile, Seitenzahlen,
     aktuelle Seite) - vorher wirkten schmale Icon-Buttons neben breiten
     Zahlen-Buttons unausgewogen und der Umbruch zerriss zusammengehoerige
     Gruppen (Erste/Zurueck vs. Weiter/Letzte) auf verschiedene Zeilen. */
  .sf_admin_list tfoot a,
  .sf_admin_list tfoot .sr-page-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    box-sizing: border-box;
    padding: 4px 10px;
    background: #eef0ff;
    border: 1px solid #ccf;
    border-radius: 6px;
    font-size: 14px;
  }
  /* Aktuelle Seite deutlich als "aktiv" hervorheben statt nackter Text. */
  .sf_admin_list tfoot .sr-page-current {
    background: #4646b5;
    border-color: #4646b5;
    color: #fff;
    font-weight: bold;
  }
  .sf_admin_list tfoot img {
    width: 16px;
    height: 16px;
  }

  /* Suche/Filter-Toggle-Button, wird per JS vor #sf_admin_bar eingefuegt
     (siehe layout.php) und steuert die Klasse .sr-collapsed. Ohne JS bleibt
     der Button unsichtbar und die Filter einfach dauerhaft sichtbar - kein
     Funktionsverlust, nur kein Einklappen. */
  #sr-filter-toggle {
    display: none;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    margin: 6px 0;
    background: #eef0ff;
    border: 1px solid #ccf;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
  }
  #sr-filter-toggle .sr-filter-toggle-icon {
    transition: transform .15s ease;
  }
  #sr-filter-toggle.sr-open .sr-filter-toggle-icon {
    transform: rotate(180deg);
  }
  #sf_admin_bar.sr-collapsed {
    display: none;
  }
}