/* ----- GENERATED FILE! Do NOT EDIT directly! -----
   Always edit and re-compile original {less}-file!
   ------------------------------------------------- 
   (c) Copyright FernUniversitaet in Hagen, ZDI
 */
.iconMenuPage {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9rem;
}
.iconMenuPage div {
  text-align: center;
  width: 12em;
  margin: 0.5em 0;
}
.iconMenuPage div > * {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5em 0.5em;
  border-radius: 0.5em;
}
.iconMenuPage div > * .label {
  max-width: 12em;
}
.iconMenuPage div:not(.appicon) img {
  height: 4em;
  max-width: 10em;
  padding-bottom: 0.5em;
}
@media (prefers-color-scheme: dark) {
  body.supportsDarkMode:not(.disableDarkMode) .iconMenuPage div:not(.appicon) img {
    background: none;
  }
}
.iconMenuPage div > a {
  text-decoration: none;
  transition: background-color 0.3s;
}
.iconMenuPage div > a:hover {
  background-color: rgba(220, 220, 220, 0.3);
  text-decoration: none;
}
.iconMenuPage div > a:hover .label {
  text-decoration: underline;
}
@media (prefers-color-scheme: dark) {
  body.supportsDarkMode:not(.disableDarkMode) .iconMenuPage div > a:hover {
    background-color: rgba(100, 100, 100, 0.2);
  }
}
.iconMenuPage div > a + a {
  display: block;
  border-top: 1px dotted silver;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding-top: 0.5em;
}
.iconMenuPage.inset {
  box-shadow: 0 0 0.5em #ccc inset;
  border-radius: 1em;
  background: linear-gradient(#fcfcfc, #f3f3f7);
  justify-content: space-around;
}
@media (prefers-color-scheme: dark) {
  body.supportsDarkMode:not(.disableDarkMode) .iconMenuPage.inset {
    box-shadow: 0 0 0.5em #000 inset;
    background: linear-gradient(#222, #111, #222);
  }
}
.iconMenuPage.simple-block {
  justify-content: space-evenly;
}
.iconMenuPage.simple-block div > a:hover {
  background: rgba(255, 255, 255, 0.4);
}
@media (prefers-color-scheme: dark) {
  body.supportsDarkMode:not(.disableDarkMode) .iconMenuPage.simple-block div > a:hover {
    background: rgba(0, 0, 0, 0.4);
  }
}
.iconMenuPage.horizontal div {
  width: 30em;
}
.iconMenuPage.horizontal div > * {
  flex-direction: row;
}
.iconMenuPage.horizontal div > * .label {
  max-width: unset;
  margin-left: 1em;
  margin-top: 0 !important;
}
.appicon {
  --iconsize: 4rem;
  --bg: white;
  --outline: #0f88ff;
}
@media (prefers-color-scheme: dark) {
  body.supportsDarkMode:not(.disableDarkMode) .appicon {
    --bg: black;
    --outline: white;
  }
}
.simple-block .appicon {
  --bg: #e4e4e4;
}
@media (prefers-color-scheme: dark) {
  body.supportsDarkMode:not(.disableDarkMode) .simple-block .appicon {
    --bg: #333;
  }
}
.text-block90 .appicon {
  --bg: #ccc;
}
@media (prefers-color-scheme: dark) {
  body.supportsDarkMode:not(.disableDarkMode) .text-block90 .appicon {
    --bg: #4d4d4d;
  }
}
.feuGreen .appicon {
  --bg: #336600;
  --outline: white;
}
.feuRed .appicon {
  --bg: #993333;
  --outline: white;
}
.appicon img {
  box-sizing: border-box;
  padding: 0.4rem;
  background-color: #004c97;
  height: var(--iconsize);
  width: var(--iconsize);
  border-radius: 0.7rem;
  position: relative;
  transition-property: background-color, border-color, box-shadow;
  transition-duration: 0.5s, 0.5s, 0.5s;
}
.appicon :is(img, .badgedIcon) + .label {
  margin-top: 0.5em;
}
.appicon a:focus {
  outline: none;
}
.appicon a:is(:hover, :active, :focus) img {
  background-color: #2f6daa;
  transition-duration: 0.05s, 0.05s;
}
.appicon a:focus img {
  box-shadow: 0 0 0 0.2rem var(--bg, white), 0 0 0 0.4rem var(--outline, #0f88ff);
}
.appicon a:active img {
  box-shadow: 0 0 0.5em black inset;
  transition-duration: 0s, 0s, 0s;
}
.appicon a:focus:active img {
  box-shadow: 0 0 0.5em black inset, 0 0 0 0.2rem var(--bg, white), 0 0 0 0.4rem var(--outline, #0f88ff);
}
.appicon.green img {
  background-color: #336600;
}
.appicon.green a:is(:hover, :active, :focus) img {
  background-color: #417f04;
}
.appicon.grey img {
  background-color: #666;
}
.appicon.grey a:is(:hover, :active, :focus) img {
  background-color: #777;
}
.appicon.orange img {
  background-color: #c84f0e;
}
.appicon.orange a:is(:hover, :active, :focus) img {
  background-color: #d06225;
}
.appicon.cyan img {
  background-color: #006666;
}
.appicon.cyan a:is(:hover, :active, :focus) img {
  background-color: #148181;
}
.appicon.red img {
  background-color: #993333;
}
.appicon.red a:is(:hover, :active, :focus) img {
  background-color: #b13b3b;
}
.appicon.purple img {
  background-color: #61307a;
}
.appicon.purple a:is(:hover, :active, :focus) img {
  background-color: #7c4b95;
}
.appicon.blue img {
  background-color: #004c97;
}
.appicon.blue a:is(:hover, :active, :focus) img {
  background-color: #2f6daa;
}
.appicon.white img {
  background-color: white;
  padding: 0;
}
@media (prefers-color-scheme: dark) {
  body.supportsDarkMode:not(.disableDarkMode) .appicon.white img {
    background-color: #cbcbcb;
  }
}
.appicon.white a:is(:hover, :active, :focus) img {
  background-color: white;
}
@media (prefers-color-scheme: dark) {
  body.supportsDarkMode:not(.disableDarkMode) .appicon.white a:is(:hover, :active, :focus) img {
    background-color: #e4e4e4;
  }
}
.appicon.transparent img {
  background: none;
  padding: 0;
}
.appicon.smaller img {
  margin: 0.2rem;
  --iconsize: 3.6rem;
}
.iconMenuPage.smaller .appicon img {
  --iconsize: 3rem;
}
.appicon .badgedIcon {
  position: relative;
  display: inline-flex;
}
.appicon .badgedIcon .badge {
  background-color: #c00;
  color: white;
  font-weight: 500;
  height: 1.5em;
  min-width: 1.5em;
  padding: 0 0.2em;
  box-sizing: border-box;
  border-radius: 1em;
  place-items: center;
  transition: background-color 0.5s, opacity 0.5s;
  display: grid;
  margin: 0;
  position: absolute;
  top: -0.6em;
  left: calc(var(--iconsize) - 0.9em);
  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.25);
}
.appicon .badgedIcon .badge.waiting {
  background-color: #444;
}
.appicon .badgedIcon .badge.hidden {
  opacity: 0;
}
.appicon .badgedIcon .badge :is(img, svg) {
  width: 1em;
  height: 1em;
}
.appicon .badgedIcon .badge img {
  background: none !important;
  box-shadow: none !important;
  position: relative;
  margin: 0;
  padding: 0;
  border-radius: 0;
}
.block-img {
  display: flex;
  justify-content: center;
}
