:root {
  --padding-block-mobile: 1.5rem 1rem;
}

@media only screen and (max-width: 1320px) {
  .sidebar .block {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

@media only screen and (max-width: 992px) {
  #page > * {
    padding: 0;
  }

  #page #header {
    padding: 0 1rem;
  }

  .views-grid-cell-empty {
    display: none;
  }

  #header #navbar-main .region-header-form,
  #header .block-menu.menu--main .navbar-nav {
    flex-direction: column;
  }

  #header #navbar-main .region-header-form {
    align-items: flex-start;
  }

  #header #ethosce-main-menu {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  #block-pagetitle,
  body:not(.course-landing-page, .path-user, .node--type-page, .group-landing-page) #block-mainpagecontent,
  .path-user main#content > section,
  .node--type-page .layout .block,
  .group-landing-page .layout .block,
  .horizontal-tabs .horizontal-tabs-list,
  .horizontal-tabs-panes .horizontal-tabs-pane,
  .course-htabs .group-course-summary,
  #header .dropdown-menu,
  .course-landing-page .group-header,
  .sidebar .block,
  .field-group-htab {
    padding: var(--padding-block-mobile);
  }

  div[data-horizontal-tabs-panes] {
    display: flex;
    flex-direction: column;
  }

  .course-htabs .group-course-summary {
    order: -1;
  }

  .course-landing-page.course-image .group-header {
    padding: 1.25rem;
  }

  /* .course-landing-page .field--name-field-course-image {
    display: none;
  } */

  .course-landing-page .group-course-header-right {
    padding-top: 0 !important;
  }

  .navbar-brand {
    max-width: 60%;
  }

  #block-ethosceuserpictureblock {
    display: none;
  }

  .nav-tabs.primary .nav-link,
  .nav-tabs.secondary .nav-link {
    padding: 0.75rem 1rem;
  }

  header#header {
    position: sticky;
    top: 0;
    z-index: 9999;
  }

  #block-courseoutline {
    padding: 0;
  }

  .course-outline-list,
  .nav-tabs {
    display: flex;
    flex-direction: column;
    float: none;
  }

  /*.course-outline-list .course-outline-list-item,
  .nav-tabs li {
    display: none;
  }
*/
  .course-outline-list .course-outline-list-item.course-object-active,
  .nav-tabs li.active {
    order: -1;
  }

  .course-outline-list .course-outline-list-item.course-object-active,
  #block-courseoutline.mobile-open .course-outline-list .course-outline-list-item,
  .nav-tabs li.active,
  .nav-tabs.mobile-open li {
    /*display: flex;*/
  }

  .course-outline-list .course-outline-list-item.course-object-active::after,
  .nav-tabs li.active::after {
    font-family: var(--font-family-fa);
    content: var(--icon-fa-chevron-down);
  }

  .mobile-open .course-outline-list .course-outline-list-item.course-object-active::after,
  .nav-tabs.mobile-open li.active::after {
    content: var(--icon-fa-chevron-up);
  }

  .course-outline-list .course-outline-list-item.course-object-active a,
  .nav-tabs li.active a {
    pointer-events: none;
  }

  .nav-tabs li {
    justify-content: space-between;
    align-items: center;
  }

  .nav-tabs .nav-link {
    align-items: center;
  }

  .nav-tabs li.active::after {
    margin-right: 1rem;
  }

  .path-user nav.tabs {
    display: unset;
  }

  .nav-tabs.secondary {
    margin-bottom: var(--margin);
  }

  .field-group-htab {
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin: var(--margin-block);
  }

  .sticky-course-button .group-course-summary .course-take-course-link-wrapper,
  .mobile-course-register-link {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 2rem 2rem 2rem 1rem;
    z-index: 9999;
    display: block;
  }

  .course-tab-register .mobile-course-register-link {
    display: none;
  }

  .mobile-course-register-link button {
    width: 100%;
  }
}

@media only screen and (min-width: 769px) {
  /* Hidden tab breaks JS that calculates width so we do this. */
  #course-relationships-build-form .tableresponsive-toggle {
    display: none !important;
  }
}

@media only screen and (min-width: 992px) {
  #ethosce-header-navbar .block-menu.menu--main {
    display: none;
  }

  #header-inner #navbar-main .offcanvas-body {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  #header-inner #navbar-main .block-commerce-cart {
    order: unset;
  }

}