@import url("/libs/bootstrap-icons-1.11.3/font/bootstrap-icons.min-5605c44f8b24ea5de37a959955b71eb6.css");
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 27.02.2014, 21:37:46
    Author     : mfenz
*/
.fg-color-black {
  color: #000000;
}
.bg-color-black {
  background-color: #000000;
}
.fg-color-white {
  color: #ffffff;
}
.fg-color-white a {
  color: white;
}
.bg-color-white {
  background-color: #ffffff;
}
.fg-color-midnight-blue {
  color: #2c3e50;
}
.bg-color-midnight-blue {
  background-color: #2c3e50;
}
.fg-color-nephritis-green {
  color: #27ae60;
}
.bg-color-nephritis-green {
  background-color: #27ae60;
}
.fg-color-emerald-green {
  color: #2ecc71;
}
.bg-color-emerald-green {
  background-color: #2ecc71;
}
.fg-color-pomegranate-red {
  color: #c0392b;
}
.bg-color-pomegranate-red {
  background-color: #c0392b;
}
.fg-color-wet-asphalt {
  color: #34495e;
}
.bg-color-wet-asphalt {
  background-color: #34495e;
}
.fg-color-asbestos-gray {
  color: #7f8c8d;
}
.bg-color-asbestos-gray {
  background-color: #7f8c8d;
}
.fg-color-silver-gray {
  color: #bdc3c7;
}
.bg-color-silver-gray {
  background-color: #bdc3c7;
}
.fg-color-concrete-gray {
  color: #95a5a6;
}
.bg-color-concrete-gray {
  background-color: #95a5a6;
}
.fg-color-cloud-white {
  color: #ecf0f1;
}
.bg-color-cloud-white {
  background-color: #ecf0f1;
}
.fg-color-green-see-turqoise {
  color: #16a085;
}
.bg-color-green-see-turqoise {
  background-color: #16a085;
}
.fg-color-light-gray {
  color: #e4e4e4;
}
.bg-color-light-gray {
  background-color: #e4e4e4;
}
.fg-color-alizarin-red {
  color: #e74c3c;
}
.bg-color-alizarin-red {
  background-color: #e74c3c;
}
.fg-color-belize-hole {
  color: #2980b9;
}
.bg-color-belize-hole {
  background-color: #2980b9;
}
.fg-color-peter-river-blue {
  color: #3498db;
}
.bg-color-peter-river-blue {
  background-color: #3498db;
}
.fg-color-wisteria-violet {
  color: #8e44ad;
}
.bg-color-wisteria-violet {
  background-color: #8e44ad;
}
.fg-color-amethyst-violet {
  color: #9b59b6;
}
.bg-color-amethyst-violet {
  background-color: #9b59b6;
}
.fg-color-blue-gray {
  color: #eaedf1;
}
.bg-color-blue-gray {
  background-color: #eaedf1;
}
.fg-color-mainly-blue {
  color: #0f495a;
}
.bg-color-mainly-blue {
  background-color: #0f495a;
}
.bg-color-lynx-white {
  background-color: #f7f7f7;
}
.bg-color-green {
  background-color: #00a300;
}
.bg-color-green-see-turquoise {
  background-color: #16a085;
}
/*
BOOTSTRAP OVERRIDES

.btn-light bekommt seine Gestaltung seit Design 2a aus theme.less
(zurückhaltende Ghost-Buttons); der alte Grau-Hintergrund ist entfernt.
 */
/* Leitfarben aus theme.less: blau = beantragt, grün = bestätigt, rot = abgelehnt */
.participation_number {
  color: black;
  padding: 2px;
  margin: 1px;
  border-radius: 3px;
}
.participation_number_bg_confirmed {
  color: #269e5f;
}
.participation_number_bg_applied {
  color: #1570d1;
}
.participation_number_bg_rejected {
  color: #e24947;
}
/* Schrift kommt aus theme.less (Bootstrap-Variablen), nicht mehr aus einer
   globalen `*`-Regel — die hätte auch Icon- und Monospace-Fonts überschrieben. */
header {
  /* for sticky scroll header — Fläche und Trennlinie kommen aus theme.less */
  width: 100%;
  position: sticky;
  top: 0;
  transition: all 300ms ease-out;
  z-index: 999999;
  /* damit Bild nicht header überlappt */
  margin-bottom: 1em;
}
header nav {
  /* Rollen-Chip vor dem Benutzernamen — kleines Badge in den Leitfarben. */
}
header nav .nav-link {
  white-space: nowrap;
  /* do not wrap text in navigation menu */
}
header nav .my-role-is-admin:before {
  content: 'ADMIN';
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 4px 7px 3px;
  border-radius: 5px;
  margin-right: 8px;
  vertical-align: 2px;
  color: var(--ee-bg);
  background-color: var(--ee-ink);
}
header nav .my-role-is-school-admin:before {
  content: 'SCHUL-ADMIN';
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 4px 7px 3px;
  border-radius: 5px;
  margin-right: 8px;
  vertical-align: 2px;
  color: var(--ee-bg);
  background-color: var(--ee-c3);
}
header nav .my-role-is-teacher:before {
  content: 'LEHRKRAFT';
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 4px 7px 3px;
  border-radius: 5px;
  margin-right: 8px;
  vertical-align: 2px;
  color: var(--ee-bg);
  background-color: var(--ee-c4);
}
.breadcrumb {
  /* Admin-Station im Pfad: dezenter Chip statt Farbfläche. */
}
.breadcrumb .li-breadcrumb-admin a {
  background-color: var(--ee-surface);
  border: 1px solid var(--ee-line-strong);
  color: var(--ee-ink);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 5px;
  text-decoration: none;
}
.breadcrumb .li-breadcrumb-admin a:hover {
  border-color: var(--ee-ink);
}
main {
  min-height: 50vh;
}
.avatar {
  object-fit: cover;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-position: top center;
  background-size: cover;
}
.headmaster-container {
  display: flex;
  align-items: center;
  /* vertical alignment */
  column-gap: 12px;
}
.headmaster-container .headmaster-container_date {
  flex-grow: 1;
}
.events-list-wrapper .event-wrapper {
  display: flex;
  border-radius: 10px;
  transition: background-color 120ms ease;
}
.events-list-wrapper .event-wrapper:hover {
  background-color: var(--ee-surface);
}
.events-list-wrapper .event-wrapper:hover .detail-link-right .bi {
  color: var(--ee-ink);
  transform: translateX(2px);
}
.events-list-wrapper .event-wrapper .detail-link-left {
  justify-content: flex-start;
  width: 10px;
  border-radius: 3px;
}
.events-list-wrapper .event-wrapper .info-wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px 10px;
}
.events-list-wrapper .event-wrapper .info-wrapper .more-info {
  display: flex;
  flex-direction: row;
}
.events-list-wrapper .event-wrapper .info-wrapper .more-info .left {
  flex: 1;
}
.events-list-wrapper .event-wrapper .info-wrapper .more-info .right {
  text-align: right;
}
.events-list-wrapper .event-wrapper .detail-link-right {
  justify-content: flex-end;
  display: flex;
  align-items: center;
  text-decoration: none;
  padding-right: 8px;
}
.events-list-wrapper .event-wrapper .detail-link-right img {
  filter: invert(88%) sepia(6%) saturate(213%) hue-rotate(161deg) brightness(89%) contrast(90%);
  width: 32px;
}
.events-list-wrapper .event-wrapper .detail-link-right .bi {
  font-size: 22px;
  color: var(--ee-faint);
  transition: color 120ms ease, transform 120ms ease;
}
.single-event-info-wrapper {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  margin-bottom: 10px;
}
.single-event-info-wrapper .icon-with-info-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.single-event-info-wrapper .icon-with-info-wrapper .icon img {
  width: 24px;
}
.single-event-info-wrapper .icon-with-info-wrapper .info {
  flex: 1;
  display: block;
  /* content should not overflow */
}
.single-event-info-wrapper .icon-with-info-wrapper .info > * {
  align-self: center;
}
.single-event-info-wrapper .icon-with-info-wrapper .participating-schools-wrapper {
  display: inline;
  width: 100%;
}
.event-participation-person-wrapper {
  display: inline-block;
  border-radius: 4px;
}
.event-participation-person-wrapper .person-hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
}
.event-participation-person-wrapper .person-hero .profile-img img {
  width: 48px;
}
.event-participation-person-wrapper .person-hero .profile-description-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}
#my-participation-chart {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 160px;
}
#my-participation-chart .label {
  position: absolute;
  font-weight: bold;
}
#my-participation-chart #myPointsChart {
  z-index: 1;
  /* popup should overflow points in center of chart  */
}
.my-points-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.profile-info-wrapper {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 10px;
  border-radius: 4px;
}
.profile-info-wrapper .profile-img {
  height: 140px;
  width: 140px;
}
.profile-info-wrapper .profile-img img,
.profile-info-wrapper .profile-img div {
  min-width: 140px;
  min-height: 140px;
  width: 140px;
  height: 140px;
}
.profile-info-wrapper .profile-img .avatar {
  /* fill the container, preserving aspect ratio, and cropping to fit */
  background-size: cover;
  /* center the image vertically and horizontally */
  background-position: top center;
  /* round the edges to a circle with border radius 1/2 container size */
  border-radius: 50%;
}
.profile-info-wrapper .profile-attributes-wrapper {
  flex: 1;
}
.profile-info-wrapper .profile-attributes-wrapper .profile-user-name-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}
.profile-info-wrapper .profile-attributes-wrapper .profile-user-name-wrapper > * {
  align-self: center;
  margin: 0;
}
.user-compact-profile-wrapper {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
}
.user-compact-profile-wrapper .profile-img-wrapper {
  width: 80px;
  height: 80px;
}
.user-compact-profile-wrapper .profile-img-wrapper img,
.user-compact-profile-wrapper .profile-img-wrapper div.avatar {
  width: 80px;
  height: 80px;
}
.user-compact-profile-wrapper .profile-attributes-wrapper {
  flex: 1;
}
.user-compact-profile-wrapper .profile-attributes-wrapper .profile-user-name {
  display: flex;
  gap: 20px;
}
.user-compact-profile-wrapper .profile-attributes-wrapper .profile-user-name > * {
  align-self: center;
}
.event-participant-row {
  display: flex;
  gap: 20px;
}
.event-participant-row .checkbox-area {
  align-self: center;
}
.schools-wrapper {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  column-gap: 20px;
  row-gap: 20px;
}
.schools-wrapper a {
  text-decoration: none;
  color: var(--ee-ink);
}
.schools-wrapper a:hover {
  text-decoration: underline;
}
.schools-wrapper .schools-wrapper_single-school_column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.schools-wrapper .schools-wrapper_single-school_column > * {
  margin: 0;
}
.schools-wrapper .schools-wrapper_single-school_right img {
  width: 24px;
  height: 24px;
}
.schools-wrapper .row-border {
  border-bottom: 1px solid #f2f2f2;
  grid-column: 1 / 5;
  /* this code makes the row stretch to entire width of the container */
}
.participation_history table {
  width: 100%;
}
.participation_history table tr {
  border-bottom: 1px solid #f2f2f2;
}
.participation_history table tr td {
  padding: 10px 10px 10px 0;
}
/* Fragment in profile */
.fragment_small-profile-img img,
.fragment_small-profile-img div.wrapper {
  object-fit: cover;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-position: top center;
  background-size: cover;
}
/*
FOOTER
 */
footer img {
  margin: 10px 2px;
}
/*
Legende für Farbgebung
 */
.fragment_color-legend {
  display: flex;
  align-items: center;
  gap: 5px;
}
.fragment_color-legend .color-rect {
  width: 14px;
  height: 14px;
}
.event_participant-count_color-legend {
  color: white;
  padding: 2px;
  border-radius: 4px;
}
/* ASDF */
.options-highlight-box {
  border: 1px solid #f2f2f2;
  border-radius: 4px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
/*   */
.compact-event-row .info {
  display: flex;
  flex-direction: column;
}
/*
INDEX
 */
.feature-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 0.75rem;
}
.icon-link {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  -webkit-text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 0.5));
  text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 0.5));
  text-underline-offset: 0.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.icon-link .bi {
  width: revert;
  height: revert;
}
/*
scroll stuff
https://www.youtube.com/watch?v=RYUuGgC_IY0&pp=ygUjc3RpY2t5IGhlYWRlciBzY3JvbGwgdXAgaHRtbCBjc3MganM%3D
*/
.scroll-down header {
  transform: translate3d(0, -100%, 0);
}
.scroll-up header {
  filter: drop-shadow(0 -10px 20px #aaaaaa);
}