:root {
  --lernraum-background: #d7eca1;
  --lernraum-berlin-blau: #4286bc;
  --lernraum-gray: #f9f9f9;
  --lernraum-sidebar-active-background: #c7e5f0;
  --lernraum-sidebar-active-border: #56bae0;
  --lernarum-sidebar-color: #4d5258;
  --lernraum-sidebar-hover-color: #777777;
  --lernraum-heading-color: var(--lernraum-berlin-blau);
  --lernraum-text-secondary-color: #6c757d;
  --lernraum-rounded-radius: 1rem;
  --lernraum-link-color: var(--lernraum-berlin-blau);
  --lernraum-link-hover-color: #0056b3;
  --lernraum-button-secondary-color: #212529;

  --pf-v5-c-page__header-brand-link--c-brand--maxheight: 70px;
  --pf-v5-c-page__sidebar--Width: 380px;
}

/* Header */

.pf-v5-c-page__header {
  background-color: transparent;
}

._brand_1gmge_1 {
  height: 70px;
  max-height: none;
}

.pf-v5-c-page__header-brand-link .pf-v5-c-brand {
  max-height: none;
}

.pf-v5-c-page__header-brand-toggle,
.pf-v5-c-page__header-tools {
  display: none;
}

/* Sidebar */

.pf-v5-c-page__sidebar {
  background-color: var(--lernraum-gray);
}

.pf-v5-c-page__sidebar.pf-m-expanded {
  box-shadow: none;
}

/* Sidebar - Navigation */

.pf-v5-c-nav {
  --pf-v5-c-nav__link--PaddingTop: var(--pf-v5-global--spacer--xs);
  --pf-v5-c-nav__link--PaddingBottom: var(--pf-v5-global--spacer--xs);
  --pf-v5-c-nav__item--MarginTop: var(--pf-v5-global--spacer--sm);
}

.pf-v5-c-nav__item:first-child {
  margin-bottom: var(--pf-v5-global--spacer--lg);
  position: relative;
}

.pf-v5-c-nav__item:first-child:after {
  content: "";
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  bottom: -12px;
  left: 0;
}

.pf-v5-c-nav__item:last-child {
  margin-top: var(--pf-v5-global--spacer--lg);
  position: relative;
}

.pf-v5-c-nav__item:last-child:after {
  content: "";
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  top: -12px;
  left: 0;
}

.pf-v5-c-button.pf-m-link:hover {
  color: var(--lernraum-link-hover-color);
}

.pf-v5-c-nav__link {
  color: var(--lernarum-sidebar-color);
  font-size: var(--pf-v5-global--FontSize--sm);
  border: 1px solid transparent;
}

.pf-v5-c-nav__link:hover,
.pf-v5-c-nav__link.pf-m-hover,
.pf-v5-c-nav__link:focus {
  color: var(--lernraum-sidebar-hover-color);
  background-color: transparent;
  border: 1px solid transparent;
}

.pf-v5-c-nav__link:hover {
  border-right: 2px solid #aaa;
}

.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__link.pf-m-current:hover {
  color: var(--lernarum-sidebar-color);
  background-color: var(--lernraum-sidebar-active-background);
  font-weight: var(--pf-v5-global--FontWeight--bold);
  border-left: 1px solid var(--lernraum-sidebar-active-border);
  border-top: 1px solid var(--lernraum-sidebar-active-border);
  border-bottom: 1px solid var(--lernraum-sidebar-active-border);
  border-right: none;
}

.pf-v5-c-nav__link:after,
.pf-v5-c-nav__link:before {
  display: none;
}

/* Headlines */

.pf-v5-c-title {
  --pf-v5-c-title--m-2xl--FontSize: var(--pf-v5-global--FontSize--3xl);
  text-align: center;
}

.pf-v5-c-content p {
  font-size: var(--pf-v5-global--FontSize--lg);
  /* color: var(--lernraum-text-secondary-color); */
  /* font-style: italic; */
}

.pf-v5-c-content h1,
.pf-v5-c-content h2,
.pf-v5-c-content h3,
.pf-v5-c-content h5,
.pf-v5-c-content h6 {
  font-weight: var(--pf-v5-global--FontWeight--bold);
  color: var(--lernraum-heading-color);
}

.pf-v5-c-content h4,
.lernraum-card h4 {
  font-size: 1.5rem;
  font-weight: var(--pf-v5-global--FontWeight--bold);
}

.pf-v5-c-title {
  color: var(--lernraum-heading-color);
}

/* Links */

.pf-v5-c-button.pf-m-link {
  color: var(--lernraum-link-color);
}

/* Buttons */

.pf-v5-c-button {
  --pf-v5-c-button--BorderRadius: var(--lernraum-rounded-radius);
  --pf-v5-c-button--after--BorderRadius: var(--lernraum-rounded-radius);
  --pf-v5-c-button--after--BorderWidth: var(--pf-v5-global--BorderWidth--md);
}

.pf-v5-c-button.pf-m-link {
  color: var(--lernraum-button-secondary-color);
}

.pf-v5-c-button.pf-m-link:hover {
  color: var(--lernraum-berlin-blau);
}

.pf-v5-c-button.pf-m-primary {
  background-color: var(--lernraum-berlin-blau);
}

.pf-v5-c-button.pf-m-primary:hover {
  background-color: var(--pf-v5-global--palette--blue-400);
}

.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--after--BorderColor: var(--lernraum-berlin-blau);
  color: var(--lernraum-berlin-blau);
}

.pf-v5-c-button.pf-m-secondary:hover {
  --pf-v5-c-button--after--BorderColor: var(--lernraum-berlin-blau);
  color: var(--lernraum-berlin-blau);
}

.pf-v5-c-button {
  font-size: var(--pf-v5-global--FontSize--lg);
  --pf-v5-c-button--PaddingTop: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-button--PaddingBottom: var(--pf-v5-global--spacer--sm);
}

/* Forms */

@media screen and (width>=768px) {
  .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group {
    display: block;
  }
}

.pf-v5-c-form__label-text {
  font-weight: var(--pf-v5-global--FontWeight--normal);
}

.pf-v5-c-input-group {
  display: block;
}

.pf-v5-c-form-control {
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.pf-v5-c-form-control:after,
.pf-v5-c-form-control:before,
.pf-v5-c-form__group-control .pf-v5-c-menu-toggle:before,
.pf-v5-c-form__group-control .pf-v5-c-menu-toggle:after {
  display: none;
}

.pf-v5-c-form-control > :is(input, select, textarea):focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  border-radius: 0.25rem;
}

.pf-v5-c-form__group-control .pf-v5-c-menu-toggle {
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.pf-v5-c-form__group-control .pf-v5-c-menu-toggle.pf-m-expanded,
.pf-v5-c-form__group-control .pf-v5-c-menu-toggle:focus,
.pf-v5-c-form__group-control .pf-v5-c-menu-toggle:focus-within {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  border-radius: 0.25rem;
}

/* CUSTOM */

.lernarum-content-wrapper {
  max-width: 1140px;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

body,
#app {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  min-height: 100%;
}

.lernraum-main {
  max-width: 1140px;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  flex-grow: 1;
  display: flex;
}

@media screen and (width <= 992px) {
  .lernraum-main {
    display: block;
  }

  .lernraum-sidebar,
  .lernraum-content,
  .pf-v5-c-page__sidebar {
    width: 100%;
    display: block;
  }
}

.lernraum-sidebar {
  padding-top: var(--pf-v5-global--spacer--lg);
  flex: 0 0 33.333333%;
  background-color: var(--lernraum-gray);
}

.lernraum-content {
  flex: 0 0 66.333333%;
}

.lernraum-inner-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lernraum-footer-wrapper {
  flex-shrink: 0;
  background-color: var(--lernraum-background);
  padding: var(--pf-v5-global--spacer--md);
}

.lernraum-footer {
  padding-inline-start: var(--pf-v5-c-page__header-brand--PaddingLeft);
  padding-inline-end: var(--pf-v5-c-page__header-brand--xl--PaddingRight);
}

.lernraum-footer a {
  color: var(--lernraum-berlin-blau);
  margin-left: var(--pf-v5-global--spacer--md);
}

.lernraum-footer a:first-child {
  margin-left: 0;
}

.lernraum-header-wrapper {
  flex-shrink: 0;
  background-color: var(--lernraum-background);
}

.lernraum-logo2 {
  height: 54px;
}

.schulportal-name {
  border-radius: 4px;
  background-color: rgb(243 243 243);
  border: 1px solid #dedede;
  padding: var(--pf-v5-global--spacer--xs);
}

.lernraum-card {
  min-height: 100px;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}

.lernraum-card-title a {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: var(--lernraum-berlin-blau);
}

.lernraum-card-description {
  background-color: var(--lernraum-gray);
  padding: var(--pf-v5-global--spacer--xs);
}

.bg-moodle-verbund-1 {
  background-color: #c2dade;
}

.bg-moodle-verbund-2 {
  background-color: #f6eae2;
}

.bg-moodle-verbund-3 {
  background-color: #f8f5da;
}

.bg-moodle-verbund-4 {
  background-color: #dae9e2;
}

.bg-moodle-osz {
  background-color: #e8dbd2;
}

.bg-moodle-portal {
  background-color: #e5d2e8;
}

.bg-moodle-verbund:hover {
  filter: brightness(85%);
}

.personal-info-form .pf-v5-l-grid .pf-m-4-col-on-md {
  display: none;
}

@media screen and (min-width: 768px) {
  .personal-info-form .pf-v5-l-grid > .pf-m-8-col-on-md {
    --pf-v5-l-grid__item--GridColumnEnd: span 12;
  }
}

.lernraum-password-change {
  margin-top: var(--pf-v5-global--spacer--lg);
}

.lernraum-password-change ul {
  margin-top: var(--pf-v5-global--spacer--md);
}

.lernraum-password-change ul span {
  color: var(--lernraum-berlin-blau);
}

#lernraum-totp .pf-v5-c-data-list__item-row {
  padding-inline-start: 0;
  padding-inline-end: 0;
}

#lernraum-totp .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
  order: unset;
}

#lernraum-top-create {
  margin-top: var(--pf-v5-global--spacer--md);
}

@media screen and (width <= 768px) {
  #lernraum-totp .pf-v5-c-data-list__item-action {
    padding-block-start: 0;
    margin-inline-start: 0;
  }
}