body {
  background: #e9ecf4;
}

#wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 2em 0.5em 0.5em 0.5em;
  background: none;
}

.clamp {
  max-width: 1024px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#header {
  margin: 0 0 1em 0;
}

#header .clamp {
  display: flex;
  justify-content: space-between;
}
#header .clamp:has(#language) {
  align-items: center;
}
#header h1 {
  margin: 0 0 0 0.5em;
}

#main-content {
  width: auto;
  flex: 2;
  padding: 0;
  margin: 0 10px 0 0;
}

#main-navigation {
  width: 100%;
  flex: 1;
  /* padding: 0;
  margin: 0 0 10px 0; */
}

.clamp:has(#main-navigation) {
  flex-direction: column;
}

#main-navigation ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;

  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease;
}

#main-navigation ul.open {
  display: flex;
  max-height: 300px;
}
#main-navigation ul.closed {
  /* display: none; */
}

.hamburger-menu {
  display: none;
  justify-content: center;
  padding: 0 0 0.5em 0;
  font-size: 1.3rem;
}
.hamburger-menu .hamburger-menu-icon {
  font-size: 2rem;
  padding: 0 0.2em 0 0;
  position: relative;
  top: -4px;
}
.hamburger-menu .hamburger-menu-icon .icon-close {
  display: none;
}

#sidebar {
  width: auto;
  flex: 1;
  padding: 0;
  margin: 0;
}

#footer {
  display: flex;
  color: #000;
  background: none;
}

#footer .clamp,
#footer .clamp span {
  display: flex;
  width: auto;
  justify-content: center;
}

#footer a {
  color: #000;
  line-height: inherit;
}

.box-full,
.box-medium,
.box-small {
  width: auto;
  margin: 0 0 10px 0;
  padding: 0;
}

#main-content form,
#full-content form {
  display: flex;
  flex-direction: column;
}

.buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0;
}

.buttons.left {
  align-items: flex-start;
}

.messages .message-text:has(.file-attachment) {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

/* Small tablets and larger mobile devices (481px - 768px) */
/* @media (481px <= width <= 768px) { */
@media (min-width: 482px) {
  #main-navigation ul {
    display: flex !important;
    max-height: none;
  }
}
@media (max-width: 481px) {
  body {
    font-size: 1rem;
  }

  #header .clamp {
    flex-direction: column;
    align-items: center;
  }
  #header h1 {
    margin: 0 0 10px 0;
  }
  #header #language {
    margin: 0;
  }

  #main-navigation {
    align-self: flex-start;
  }
  #main-navigation ul {
    flex-direction: column;
  }
  #main-navigation ul li {
    min-width: 100%;
  }

  .hamburger-menu {
    display: flex;
    cursor: pointer;
  }

  #show-forgot-password-button {
    text-align: center;
  }

  .lesson {
    margin: 0;
  }

  #footer .clamp {
    flex-direction: column;
  }

  #footer .clamp .footer-spacer {
    display: none;
  }

  #footer .clamp span {
    margin: 0 0 1em 0;
  }

  input[type="submit"],
  input[type="button"],
  button[type="submit"],
  .button-general,
  .button-submit {
    width: 100%;
    min-width: 150px;
    padding: 1em;
  }

  .messages .message-text:has(.file-attachment) {
    flex-direction: column;
    align-items: flex-start;
  }
  .file-attachment {
    text-align: left;
    max-width: 100%;
    margin: 0 0 1em 0 !important;
  }
}

/* Tablets and small laptops (769px - 1024px) */
/* @media (769px <= width <= 1024px) { */
@media (max-width: 769px) {
  .clamp:has(#main-content) {
    flex-direction: column;
  }

  .clamp.no-column-reverse:has(#main-content):has(#sidebar) {
    flex-direction: column;
  }
  .clamp:has(#main-content):has(#sidebar) {
    flex-direction: column-reverse;
  }

  #main-content {
    margin: 0 0 0 0;
  }
  .box-full,
  .box-medium,
  .box-small {
    margin: 0 0 10px 0;
  }

  #main-content .startpage img {
    width: auto;
    max-width: 100%;
    height: auto;
  }
  #main-navigation ul {
    justify-content: flex-start;
  }
  #main-navigation li {
    min-width: 33%;
  }

  #main-content #tabs ul {
    flex-direction: column;
  }
  #main-content #tabs ul li {
    width: 100%;
  }

  #sidebar {
    margin: 0;
  }

  #right-of-withdrawal-dialog .right-of-withdrawal-dialog-buttons,
  #exam-start-dialog .exam-start-dialog-buttons {
    flex-direction: column;
  }
  #right-of-withdrawal-dialog .button-general,
  #exam-start-dialog .button-general,
  #right-of-withdrawal-dialog .button-submit,
  #exam-start-dialog .button-submit {
    margin: 0 0 1em 0;
  }

  #tabs ul li a {
    border-radius: 6px;
    margin: 0 0 0.2em 0;
  }
}

/* Large desktops and high-resolution screens (1025px and up) */
/* @media (1025px <= width <= 1439px) { */
@media (max-width: 1025px) {
}

/* Extra-large screens (1440px and up) */
@media (min-width: 1440px) {
}

*,
*:before,
*:after {
  box-sizing: border-box;
}