Merge branch 'MDL-68299-master' of git://github.com/bmbrands/moodle

diff --combined theme/boost/scss/preset/default.scss
index 1bd52f1,f4bceca..cb03953
--- 1/theme/boost/scss/preset/default.scss
--- 2/theme/boost/scss/preset/default.scss
+++ b/theme/boost/scss/preset/default.scss
@@@ -34,12 -34,14 +34,14 @@@ $warning-outline: #a6670e
  
  // Options
  $enable-rounded: false !default;
+ $enable-responsive-font-sizes: true !default;
  
  // Body
  $body-color:    $gray-800 !default;
  
  // Fonts
  $font-size-base: 0.9375rem !default;
+ $rfs-base-font-size: 0.9rem !default;
  $headings-font-weight:   300 !default;
  
  // Navbar
@@@ -91,7 -93,6 +93,7 @@@ $theme-colors: map-merge(
  
  body {
      -webkit-font-smoothing: antialiased;
 +    -moz-osx-font-smoothing: grayscale;
  }
  
  .navbar {

diff --combined theme/boost/style/moodle.css
index a71a92b,bd6ceae..689e041
--- 1/theme/boost/style/moodle.css
--- 2/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@@ -2385,6 -2385,9 +2385,9 @@@ body 
    color: #343a40;
    text-align: left;
    background-color: #fff; }
+   @media (max-width: 1200px) {
+     body {
+       font-size: calc(0.90375rem + 0.045vw) ; } }
  
  [tabindex="-1"]:focus {
    outline: 0 !important; }
@@@ -2592,6 -2595,9 +2595,9 @@@ legend 
    line-height: inherit;
    color: inherit;
    white-space: normal; }
+   @media (max-width: 1200px) {
+     legend {
+       font-size: calc(0.96rem + 0.72vw) ; } }
  
  progress {
    vertical-align: baseline; }
@@@ -2632,45 -2638,78 +2638,78 @@@ h1, h2, h3, h4, h5, h6
  
  h1, .h1 {
    font-size: 2.34375rem; }
+   @media (max-width: 1200px) {
+     h1, .h1 {
+       font-size: calc(1.044375rem + 1.7325vw) ; } }
  
  h2, .h2 {
    font-size: 1.875rem; }
+   @media (max-width: 1200px) {
+     h2, .h2 {
+       font-size: calc(0.9975rem + 1.17vw) ; } }
  
  h3, .h3 {
    font-size: 1.640625rem; }
+   @media (max-width: 1200px) {
+     h3, .h3 {
+       font-size: calc(0.9740625rem + 0.88875vw) ; } }
  
  h4, .h4 {
    font-size: 1.40625rem; }
+   @media (max-width: 1200px) {
+     h4, .h4 {
+       font-size: calc(0.950625rem + 0.6075vw) ; } }
  
  h5, .h5 {
    font-size: 1.171875rem; }
+   @media (max-width: 1200px) {
+     h5, .h5 {
+       font-size: calc(0.9271875rem + 0.32625vw) ; } }
  
  h6, .h6 {
    font-size: 0.9375rem; }
+   @media (max-width: 1200px) {
+     h6, .h6 {
+       font-size: calc(0.90375rem + 0.045vw) ; } }
  
  .lead {
    font-size: 1.171875rem;
    font-weight: 300; }
+   @media (max-width: 1200px) {
+     .lead {
+       font-size: calc(0.9271875rem + 0.32625vw) ; } }
  
  .display-1 {
    font-size: 6rem;
    font-weight: 300;
    line-height: 1.2; }
+   @media (max-width: 1200px) {
+     .display-1 {
+       font-size: calc(1.41rem + 6.12vw) ; } }
  
  .display-2 {
    font-size: 5.5rem;
    font-weight: 300;
    line-height: 1.2; }
+   @media (max-width: 1200px) {
+     .display-2 {
+       font-size: calc(1.36rem + 5.52vw) ; } }
  
  .display-3 {
    font-size: 4.5rem;
    font-weight: 300;
    line-height: 1.2; }
+   @media (max-width: 1200px) {
+     .display-3 {
+       font-size: calc(1.26rem + 4.32vw) ; } }
  
  .display-4 {
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 1.2; }
+   @media (max-width: 1200px) {
+     .display-4 {
+       font-size: calc(1.16rem + 3.12vw) ; } }
  
  hr {
    margin-top: 1rem;
@@@ -2708,6 -2747,9 +2747,9 @@@ mark
  .blockquote {
    margin-bottom: 1rem;
    font-size: 1.171875rem; }
+   @media (max-width: 1200px) {
+     .blockquote {
+       font-size: calc(0.9271875rem + 0.32625vw) ; } }
  
  .blockquote-footer {
    display: block;
@@@ -3626,6 -3668,9 +3668,9 @@@ pre 
    border: 1px solid #ced4da;
    border-radius: 0;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
+   @media (max-width: 1200px) {
+     .form-control {
+       font-size: calc(0.90375rem + 0.045vw) ; } }
    @media (prefers-reduced-motion: reduce) {
      .form-control {
        transition: none; } }
@@@ -3666,6 -3711,9 +3711,9 @@@ select.form-control:focus::-ms-value 
    padding-bottom: calc(0.5rem + 1px);
    font-size: 1.171875rem;
    line-height: 1.5; }
+   @media (max-width: 1200px) {
+     .col-form-label-lg {
+       font-size: calc(0.9271875rem + 0.32625vw) ; } }
  
  .col-form-label-sm {
    padding-top: calc(0.25rem + 1px);
@@@ -3699,6 -3747,9 +3747,9 @@@
    padding: 0.5rem 1rem;
    font-size: 1.171875rem;
    line-height: 1.5; }
+   @media (max-width: 1200px) {
+     .form-control-lg {
+       font-size: calc(0.9271875rem + 0.32625vw) ; } }
  
  select.form-control[size], select.form-control[multiple] {
    height: auto; }
@@@ -4000,6 -4051,9 +4051,9 @@@ textarea.form-control 
    line-height: 1.5;
    border-radius: 0;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
+   @media (max-width: 1200px) {
+     .btn {
+       font-size: calc(0.90375rem + 0.045vw) ; } }
    @media (prefers-reduced-motion: reduce) {
      .btn {
        transition: none; } }
@@@ -4387,6 -4441,9 +4441,9 @@@ fieldset:disabled a.btn 
    font-size: 1.171875rem;
    line-height: 1.5;
    border-radius: 0; }
+   @media (max-width: 1200px) {
+     .btn-lg, .btn-group-lg > .btn {
+       font-size: calc(0.9271875rem + 0.32625vw) ; } }
  
  .btn-sm, .btn-group-sm > .btn {
    padding: 0.25rem 0.5rem;
@@@ -4462,6 -4519,9 +4519,9 @@@ input[type="button"].btn-block 
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15); }
+   @media (max-width: 1200px) {
+     .dropdown-menu {
+       font-size: calc(0.90375rem + 0.045vw) ; } }
  
  .dropdown-menu-left {
    right: auto;
@@@ -4771,6 -4831,9 +4831,9 @@@
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da; }
+   @media (max-width: 1200px) {
+     .input-group-text {
+       font-size: calc(0.90375rem + 0.045vw) ; } }
    .input-group-text input[type="radio"],
    .input-group-text input[type="checkbox"] {
      margin-top: 0; }
@@@ -4788,6 -4851,14 +4851,14 @@@
    padding: 0.5rem 1rem;
    font-size: 1.171875rem;
    line-height: 1.5; }
+   @media (max-width: 1200px) {
+     .input-group-lg > .form-control,
+     .input-group-lg > .custom-select,
+     .input-group-lg > .input-group-prepend > .input-group-text,
+     .input-group-lg > .input-group-append > .input-group-text,
+     .input-group-lg > .input-group-prepend > .btn,
+     .input-group-lg > .input-group-append > .btn {
+       font-size: calc(0.9271875rem + 0.32625vw) ; } }
  
  .input-group-sm > .form-control:not(textarea),
  .input-group-sm > .custom-select {
@@@ -4927,6 -4998,9 +4998,9 @@@
    border: 1px solid #ced4da;
    border-radius: 0;
    appearance: none; }
+   @media (max-width: 1200px) {
+     .custom-select {
+       font-size: calc(0.90375rem + 0.045vw) ; } }
    .custom-select:focus {
      border-color: #6eb5f3;
      outline: 0;
@@@ -4957,6 -5031,9 +5031,9 @@@
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    font-size: 1.171875rem; }
+   @media (max-width: 1200px) {
+     .custom-select-lg {
+       font-size: calc(0.9271875rem + 0.32625vw) ; } }
  
  .custom-file {
    position: relative;
@@@ -5193,6 -5270,9 +5270,9 @@@
    font-size: 1.171875rem;
    line-height: inherit;
    white-space: nowrap; }
+   @media (max-width: 1200px) {
+     .navbar-brand {
+       font-size: calc(0.9271875rem + 0.32625vw) ; } }
    .navbar-brand:hover, .navbar-brand:focus {
      text-decoration: none; }
  
@@@ -5225,6 -5305,9 +5305,9 @@@
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent; }
+   @media (max-width: 1200px) {
+     .navbar-toggler {
+       font-size: calc(0.9271875rem + 0.32625vw) ; } }
    .navbar-toggler:hover, .navbar-toggler:focus {
      text-decoration: none; }
  
@@@ -5626,6 -5709,9 +5709,9 @@@
    padding: 0.75rem 1.5rem;
    font-size: 1.171875rem;
    line-height: 1.5; }
+   @media (max-width: 1200px) {
+     .pagination-lg .page-link {
+       font-size: calc(0.9271875rem + 0.32625vw) ; } }
  
  .pagination-sm .page-link {
    padding: 0.25rem 0.5rem;
@@@ -6077,6 -6163,9 +6163,9 @@@
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5; }
+   @media (max-width: 1200px) {
+     .close {
+       font-size: calc(0.950625rem + 0.6075vw) ; } }
    .close:hover {
      color: #000;
      text-decoration: none; }
@@@ -6462,6 -6551,9 +6551,9 @@@ a.close.disabled 
    font-size: 0.9375rem;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb; }
+   @media (max-width: 1200px) {
+     .popover-header {
+       font-size: calc(0.90375rem + 0.045vw) ; } }
    .popover-header:empty {
      display: none; }
  
@@@ -9399,18 -9491,28 +9491,28 @@@ input[disabled] 
  #region-main {
    overflow-x: auto;
    overflow-y: visible;
-   border: 1px solid rgba(0, 0, 0, 0.125);
-   padding: 1.25rem;
    background-color: #fff; }
  
- .context-header-settings-menu,
- .region-main-settings-menu {
-   float: right;
-   width: auto;
-   max-width: 4em;
-   height: 2em;
-   display: block;
-   margin-top: 4px; }
+ @media (min-width: 576px) {
+   #region-main {
+     border: 1px solid rgba(0, 0, 0, 0.125);
+     padding: 1.25rem; } }
+ 
+ @media (min-width: 576px) {
+   .context-header-settings-menu,
+   .region-main-settings-menu {
+     float: right;
+     width: auto;
+     max-width: 4em;
+     height: 2em;
+     display: block;
+     margin-top: 4px; } }
+ 
+ @media (max-width: 767.98px) {
+   .context-header-settings-menu,
+   .region-main-settings-menu {
+     display: flex;
+     justify-content: flex-end; } }
  
  #goto-top-link {
    visibility: hidden;
@@@ -9433,6 -9535,10 +9535,10 @@@
      right: 0;
      transform: translateY(-100%); }
  
+ @media (max-width: 767.98px) {
+   #goto-top-link {
+     bottom: 0; } }
+ 
  body.scrolled #goto-top-link {
    opacity: 1;
    visibility: visible;
@@@ -9551,6 -9657,12 +9657,12 @@@ a.autolink.glossary:hover 
    background-color: transparent;
    margin-top: -1px; }
  
+ @media (max-width: 767.98px) {
+   .pagelayout-mydashboard #region-main-box,
+   .pagelayout-login #region-main-box {
+     padding-left: 0;
+     padding-right: 0; } }
+ 
  .collapsibleregioncaption img {
    vertical-align: middle; }
  
@@@ -10239,57 -10351,42 +10351,42 @@@ tr.flagged-tag a 
    float: left;
    padding-top: 20px; }
  
- /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
- .mod-indent-1 {
-   width: 30px; }
- 
- .mod-indent-2 {
-   width: 60px; }
- 
- .mod-indent-3 {
-   width: 90px; }
- 
- .mod-indent-4 {
-   width: 120px; }
- 
- .mod-indent-5 {
-   width: 150px; }
- 
- .mod-indent-6 {
-   width: 180px; }
- 
- .mod-indent-7 {
-   width: 210px; }
- 
- .mod-indent-8 {
-   width: 240px; }
- 
- .mod-indent-9 {
-   width: 270px; }
- 
- .mod-indent-10 {
-   width: 300px; }
- 
- .mod-indent-11 {
-   width: 330px; }
- 
- .mod-indent-12 {
-   width: 360px; }
- 
- .mod-indent-13 {
-   width: 390px; }
- 
- .mod-indent-14 {
-   width: 420px; }
- 
- .mod-indent-15 {
-   width: 450px; }
- 
- .mod-indent-16 {
-   width: 480px; }
- 
- .mod-indent-huge {
-   width: 480px; }
+ @media (min-width: 576px) {
+   /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
+   .mod-indent-1 {
+     width: 30px; }
+   .mod-indent-2 {
+     width: 60px; }
+   .mod-indent-3 {
+     width: 90px; }
+   .mod-indent-4 {
+     width: 120px; }
+   .mod-indent-5 {
+     width: 150px; }
+   .mod-indent-6 {
+     width: 180px; }
+   .mod-indent-7 {
+     width: 210px; }
+   .mod-indent-8 {
+     width: 240px; }
+   .mod-indent-9 {
+     width: 270px; }
+   .mod-indent-10 {
+     width: 300px; }
+   .mod-indent-11 {
+     width: 330px; }
+   .mod-indent-12 {
+     width: 360px; }
+   .mod-indent-13 {
+     width: 390px; }
+   .mod-indent-14 {
+     width: 420px; }
+   .mod-indent-15 {
+     width: 450px; }
+   .mod-indent-16 {
+     width: 480px; }
+   .mod-indent-huge {
+     width: 480px; } }
  
  /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
  .resourcecontent .mediaplugin_mp3 object {
@@@ -11033,10 -11130,11 +11130,11 @@@ dd:after 
      left: 0;
      right: auto;
      white-space: nowrap; }
-   .inplaceeditable.inplaceeditingon input {
-     width: 330px;
-     vertical-align: text-bottom;
-     margin-bottom: 0; }
+   @media (min-width: 576px) {
+     .inplaceeditable.inplaceeditingon input {
+       width: 330px;
+       vertical-align: text-bottom;
+       margin-bottom: 0; } }
    .inplaceeditable.inplaceeditingon select {
      margin-bottom: 0; }
  
@@@ -11399,6 -11497,91 +11497,91 @@@ body.h5p-embed .h5pmessages 
  .alert-dark a {
    color: #040505; }
  
+ @media (max-width: 767.98px) {
+   #page-navbar {
+     width: 100%; }
+   .breadcrumb:not(:empty) {
+     width: 100%;
+     border: 2px solid #e9ecef;
+     padding: 0.25rem;
+     margin-bottom: 0.5rem; }
+     .breadcrumb:not(:empty) .breadcrumb-item {
+       padding-top: 0.3333333333rem;
+       padding-bottom: 0.3333333333rem;
+       display: inline-block; }
+   .mform {
+     width: 100%;
+     padding-right: 15px;
+     padding-left: 15px; }
+   .pagination {
+     flex-wrap: wrap;
+     justify-content: center; }
+   .custom-select {
+     max-width: 100%; }
+   .card .card-body {
+     padding: 0.625rem; }
+   #page-header .card {
+     border: 0; }
+     #page-header .card .card-body {
+       padding: 0; }
+   .nav-tabs,
+   .nav-pills {
+     margin: 0;
+     border: 0;
+     padding: 0.125rem;
+     background-color: #e9ecef; }
+     .nav-tabs .nav-item,
+     .nav-pills .nav-item {
+       flex: 1 1 auto;
+       text-align: center; }
+     .nav-tabs .nav-link,
+     .nav-pills .nav-link {
+       background: #fff;
+       border: 0;
+       margin: 0.125rem; }
+       .nav-tabs .nav-link.active,
+       .nav-pills .nav-link.active {
+         color: #6c757d;
+         border-color: #6c757d;
+         border-color: #6c757d; }
+         .nav-tabs .nav-link.active:hover,
+         .nav-pills .nav-link.active:hover {
+           color: #fff;
+           background-color: #6c757d;
+           border-color: #6c757d; }
+         .nav-tabs .nav-link.active:focus, .nav-tabs .nav-link.active.focus,
+         .nav-pills .nav-link.active:focus,
+         .nav-pills .nav-link.active.focus {
+           box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); }
+         .nav-tabs .nav-link.active.disabled, .nav-tabs .nav-link.active:disabled,
+         .nav-pills .nav-link.active.disabled,
+         .nav-pills .nav-link.active:disabled {
+           color: #6c757d;
+           background-color: transparent; }
+         .nav-tabs .nav-link.active:not(:disabled):not(.disabled):active, .nav-tabs .nav-link.active:not(:disabled):not(.disabled).active,
+         .show > .nav-tabs .nav-link.active.dropdown-toggle,
+         .nav-pills .nav-link.active:not(:disabled):not(.disabled):active,
+         .nav-pills .nav-link.active:not(:disabled):not(.disabled).active,
+         .show >
+         .nav-pills .nav-link.active.dropdown-toggle {
+           color: #fff;
+           background-color: #6c757d;
+           border-color: #6c757d; }
+           .nav-tabs .nav-link.active:not(:disabled):not(.disabled):active:focus, .nav-tabs .nav-link.active:not(:disabled):not(.disabled).active:focus,
+           .show > .nav-tabs .nav-link.active.dropdown-toggle:focus,
+           .nav-pills .nav-link.active:not(:disabled):not(.disabled):active:focus,
+           .nav-pills .nav-link.active:not(:disabled):not(.disabled).active:focus,
+           .show >
+           .nav-pills .nav-link.active.dropdown-toggle:focus {
+             box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); } }
+ 
+ @media (max-width: 576px) and (max-height: 320px) {
+   div#page {
+     margin-top: 0; }
+   .navbar.fixed-top {
+     position: relative;
+     z-index: inherit; } }
+ 
  .icon {
    font-size: 16px;
    width: 16px;
@@@ -11795,30 -11978,42 +11978,42 @@@
  .jsenabled .admin_colourpicker_preview {
    display: inline; }
  
- .jsenabled .admin_colourpicker {
-   display: block;
-   height: 102px;
-   width: 410px;
-   margin-bottom: 10px;
-   box-sizing: content-box; }
+ @media (min-width: 768px) {
+   .jsenabled .admin_colourpicker {
+     display: block;
+     height: 102px;
+     width: 410px;
+     margin-bottom: 10px;
+     box-sizing: content-box; }
+   .admin_colourpicker .colourdialogue {
+     float: left;
+     border: 1px solid #d1edf6; }
+   .admin_colourpicker .previewcolour {
+     border: 1px solid #d1edf6;
+     margin-left: 301px; }
+   .admin_colourpicker .currentcolour {
+     border: 1px solid #d1edf6;
+     margin-left: 301px;
+     border-top-width: 0; } }
+ 
+ @media (max-width: 767.98px) {
+   .jsenabled .admin_colourpicker {
+     height: 150px;
+     margin-bottom: 10px;
+     display: block;
+     position: relative; }
+   .admin_colourpicker .previewcolour {
+     display: none; }
+   .admin_colourpicker .currentcolour {
+     position: absolute;
+     border: 1px solid #dee2e6;
+     top: 100px;
+     left: 0; } }
  
  .admin_colourpicker .loadingicon {
    vertical-align: middle;
    margin-left: auto; }
  
- .admin_colourpicker .colourdialogue {
-   float: left;
-   border: 1px solid #d1edf6; }
- 
- .admin_colourpicker .previewcolour {
-   border: 1px solid #d1edf6;
-   margin-left: 301px; }
- 
- .admin_colourpicker .currentcolour {
-   border: 1px solid #d1edf6;
-   margin-left: 301px;
-   border-top-width: 0; }
- 
  #page-admin-index #notice .checkforupdates {
    text-align: center; }
  
@@@ -11994,25 -12189,28 +12189,28 @@@
    float: right; }
  
  /* We put an absolutely positioned div in a relatively positioned div so it takes up no space */
- #region-main-settings-menu {
-   position: relative;
-   float: left;
-   width: 100%; }
- 
- #region-main-settings-menu > div {
-   position: absolute;
-   right: 0;
-   z-index: 100;
-   margin: 1rem; }
+ @media (min-width: 576px) {
+   #region-main-settings-menu {
+     position: relative;
+     float: left;
+     width: 100%; }
+   #region-main-settings-menu > div {
+     position: absolute;
+     right: 0;
+     z-index: 100;
+     margin: 1rem; }
+   .region_main_settings_menu_proxy {
+     width: 4rem;
+     height: 2rem;
+     background-color: #fff;
+     margin-left: 0.625rem;
+     margin-bottom: 0.625rem;
+     border-bottom-left-radius: 0.5rem;
+     float: right; } }
  
- .region_main_settings_menu_proxy {
-   width: 4rem;
-   height: 2rem;
-   background-color: #fff;
-   margin-left: 0.625rem;
-   margin-bottom: 0.625rem;
-   border-bottom-left-radius: 0.5rem;
-   float: right; }
+ @media (max-width: 767.98px) {
+   #region-main-settings-menu .menubar {
+     justify-content: flex-end; } }
  
  #region-main-settings-menu.has-blocks,
  #region-main.has-blocks {
@@@ -12229,6 -12427,11 +12427,11 @@@
  .block.invisibleblock .card-title {
    color: #6c757d; }
  
+ @media (max-width: 767.98px) {
+   .block.card {
+     border-left: 0;
+     border-right: 0; } }
+ 
  .navbar {
    max-height: 50px; }
  
@@@ -12538,8 -12741,9 +12741,9 @@@ body:not(.editing) .sitetopic ul.sectio
    body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
      padding-left: 0; }
  
- .course-content ul.section {
-   margin: 1rem; }
+ @media (min-width: 576px) {
+   .course-content ul.section {
+     margin: 1rem; } }
  
  .section .side {
    margin-top: 0.5rem; }
@@@ -12590,9 -12794,10 +12794,10 @@@
    display: block;
    height: inherit; }
  
- .section .label .mod-indent-outer {
-   padding-left: 24px;
-   display: block; }
+ @media (min-width: 576px) {
+   .section .label .mod-indent-outer {
+     padding-left: 24px;
+     display: block; } }
  
  .section .filler {
    width: 16px;
@@@ -12753,11 -12958,16 +12958,16 @@@
    .course-content ul.weeks li.section {
      margin-top: 1rem;
      padding-bottom: 1rem; }
-     .course-content ul.topics li.section .summary,
-     .course-content ul.topics li.section .content > .availabilityinfo,
-     .course-content ul.weeks li.section .summary,
-     .course-content ul.weeks li.section .content > .availabilityinfo {
-       margin-left: 25px; }
+     .course-content ul.topics li.section .content,
+     .course-content ul.weeks li.section .content {
+       margin: 0;
+       padding: 0; }
+     @media (min-width: 576px) {
+       .course-content ul.topics li.section .summary,
+       .course-content ul.topics li.section .content > .availabilityinfo,
+       .course-content ul.weeks li.section .summary,
+       .course-content ul.weeks li.section .content > .availabilityinfo {
+         margin-left: 25px; } }
      .course-content ul.topics li.section .left,
      .course-content ul.topics li.section .right,
      .course-content ul.weeks li.section .left,
@@@ -12766,12 -12976,23 +12976,23 @@@
        text-align: right;
        width: auto; }
  
+ @media (max-width: 767.98px) {
+   body:not(.editing) .course-content ul.topics li.section .left,
+   body:not(.editing) .course-content ul.topics li.section .right,
+   body:not(.editing) .course-content ul.weeks li.section .left,
+   body:not(.editing) .course-content ul.weeks li.section .right {
+     display: none; } }
+ 
  .course-content {
    margin-top: 0; }
  
  .course-content .hidden {
    display: none; }
  
+ @media (max-width: 767.98px) {
+   .course-content li.section ul {
+     padding-left: 0; } }
+ 
  .course-content li.section ul {
    list-style: disc; }
    .course-content li.section ul ul {
@@@ -13388,7 -13609,6 +13609,6 @@@ span.editinstructions 
  /* Use a variable for the drawer background colors. */
  [data-region="drawer"] {
    position: fixed;
-   padding: 20px 20px;
    width: 285px;
    top: 50px;
    height: calc(100% - 50px);
@@@ -13400,6 -13620,10 +13620,10 @@@
    -moz-transition: right 0.5s ease, left 0.5s ease;
    transition: right 0.5s ease, left 0.5s ease; }
  
+ @media (min-width: 576px) {
+   [data-region="drawer"] {
+     padding: 20px 20px; } }
+ 
  #nav-drawer {
    right: auto;
    left: 0;
@@@ -13457,6 -13681,8 +13681,8 @@@ body.drawer-ease 
      padding: 0;
      visibility: visible;
      opacity: 1; }
+   [data-region=right-hand-drawer] .closewidget {
+     display: none; }
    [data-region=right-hand-drawer].hidden {
      display: block;
      right: -320px;
@@@ -13467,6 -13693,18 +13693,18 @@@
        [data-region=right-hand-drawer].hidden {
          transition: none; } }
  
+ @media (max-width: 767.98px) {
+   [data-region=right-hand-drawer].drawer {
+     top: 0;
+     height: 100%;
+     z-index: 1030; }
+   [data-region=right-hand-drawer] .closewidget {
+     display: block;
+     padding: 0 0.2rem; }
+   body.drawer-open-left,
+   body.drawer-open-right {
+     overflow: hidden; } }
+ 
  .dir-rtl [data-region=right-hand-drawer] {
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.08); }
  
@@@ -14538,6 -14776,16 +14776,16 @@@ a.ygtvspacer:hover 
      min-height: 400px; }
    .message-app .header-container {
      flex-shrink: 0; }
+   .message-app .overflow-y {
+     overflow-y: auto; }
+   @media (max-height: 320px) {
+     .message-app .header-container [data-region="view-overview"]:not(.hidden) {
+       display: flex;
+       align-items: center; }
+     .message-app .footer-container [data-region="view-overview"] {
+       display: none; }
+     .message-app .overflow-y {
+       overflow-y: unset; } }
    .message-app .body-container {
      flex: 1;
      overflow: hidden; }
@@@ -14546,7 -14794,8 +14794,8 @@@
        right: 0;
        left: 0;
        top: 0;
-       bottom: 0; }
+       bottom: 0;
+       overflow: auto; }
    .message-app .footer-container {
      flex-shrink: 0; }
      .message-app .footer-container textarea {
@@@ -14692,6 -14941,12 +14941,12 @@@
      .message-app .emoji-picker-container {
        right: -0.5rem; } }
  
+ @media (max-height: 495px) {
+   .message-app .emoji-picker-container {
+     position: fixed;
+     top: 0;
+     transform: none; } }
+ 
  .message-app .emoji-auto-complete-container {
    overflow: auto;
    max-height: 90px;
@@@ -15047,7 -15302,8 +15302,8 @@@ body.jsenabled .questionflag input[type
    margin: 1em 0; }
  
  #page-mod-quiz-edit ul.slots .activityinstance > a {
-   display: inline;
+   display: flex;
+   align-items: center;
    text-indent: 0;
    padding-left: 0; }
  
@@@ -15554,8 -15810,9 +15810,9 @@@ body.path-question-type .mform fieldset
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6; }
  
- .mform > .form-group {
-   margin-left: 1.5rem; }
+ @media (min-width: 576px) {
+   .mform > .form-group {
+     margin-left: 1.5rem; } }
  
  .editor_atto_content.form-control {
    width: 100%; }
@@@ -16250,6 -16507,8 +16507,8 @@@ select 
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      font-size: 1.171875rem;
+     @media (max-width: 1200px) {
+       font-size: calc(0.9271875rem + 0.32625vw) ; }
      line-height: 1.5;
      right: 0; } }
  
@@@ -16264,6 -16523,8 +16523,8 @@@
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      font-size: 1.171875rem;
+     @media (max-width: 1200px) {
+       font-size: calc(0.9271875rem + 0.32625vw) ; }
      line-height: 1.5;
      right: 0; }
    to {
@@@ -17797,9 -18058,6 +18058,6 @@@ body.behat-site .custom-control-label::
  .phpinfo h2 {
    margin: auto; }
  
- .phpinfo h2 {
-   width: 600px; }
- 
  .phpinfo .e,
  .phpinfo .v,
  .phpinfo .h {
@@@ -18405,8 -18663,7 +18663,8 @@@ span[data-flexitour="container"][x-plac
        font-size: 4em; }
  
  body {
 -  -webkit-font-smoothing: antialiased; }
 +  -webkit-font-smoothing: antialiased;
 +  -moz-osx-font-smoothing: grayscale; }
  
  .navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); }

diff --combined theme/classic/scss/preset/default.scss
index ed35647,3cf2b03..858f81d
--- 1/theme/classic/scss/preset/default.scss
--- 2/theme/classic/scss/preset/default.scss
+++ b/theme/classic/scss/preset/default.scss
@@@ -34,12 -34,14 +34,14 @@@ $warning-outline: #a6670e
  
  // Options
  $enable-rounded: true !default;
+ $enable-responsive-font-sizes: true !default;
  
  // Body
  $body-color:    $gray-800 !default;
  
  // Fonts
  $font-size-base: 0.9375rem !default;
+ $rfs-base-font-size: 0.9rem !default;
  $headings-font-weight:   300 !default;
  
  // Navbar
@@@ -81,11 -83,6 +83,11 @@@ $theme-colors: map-merge(
  // Import Core moodle CSS
  @import "moodle";
  
 +body {
 +    -webkit-font-smoothing: antialiased;
 +    -moz-osx-font-smoothing: grayscale;
 +}
 +
  // Preset CSS
  .navbar {
      box-shadow: 0 2px 4px rgba(0, 0, 0, .08);

diff --combined theme/classic/style/moodle.css
index d5ea721,4a12543..535c36d
--- 1/theme/classic/style/moodle.css
--- 2/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@@ -2385,6 -2385,9 +2385,9 @@@ body 
    color: #343a40;
    text-align: left;
    background-color: #fff; }
+   @media (max-width: 1200px) {
+     body {
+       font-size: calc(0.90375rem + 0.045vw) ; } }
  
  [tabindex="-1"]:focus {
    outline: 0 !important; }
@@@ -2592,6 -2595,9 +2595,9 @@@ legend 
    line-height: inherit;
    color: inherit;
    white-space: normal; }
+   @media (max-width: 1200px) {
+     legend {
+       font-size: calc(0.96rem + 0.72vw) ; } }
  
  progress {
    vertical-align: baseline; }
@@@ -2632,45 -2638,78 +2638,78 @@@ h1, h2, h3, h4, h5, h6
  
  h1, .h1 {
    font-size: 2.34375rem; }
+   @media (max-width: 1200px) {
+     h1, .h1 {
+       font-size: calc(1.044375rem + 1.7325vw) ; } }
  
  h2, .h2 {
    font-size: 1.875rem; }
+   @media (max-width: 1200px) {
+     h2, .h2 {
+       font-size: calc(0.9975rem + 1.17vw) ; } }
  
  h3, .h3 {
    font-size: 1.640625rem; }
+   @media (max-width: 1200px) {
+     h3, .h3 {
+       font-size: calc(0.9740625rem + 0.88875vw) ; } }
  
  h4, .h4 {
    font-size: 1.40625rem; }
+   @media (max-width: 1200px) {
+     h4, .h4 {
+       font-size: calc(0.950625rem + 0.6075vw) ; } }
  
  h5, .h5 {
    font-size: 1.171875rem; }
+   @media (max-width: 1200px) {
+     h5, .h5 {
+       font-size: calc(0.9271875rem + 0.32625vw) ; } }
  
  h6, .h6 {
    font-size: 0.9375rem; }
+   @media (max-width: 1200px) {
+     h6, .h6 {
+       font-size: calc(0.90375rem + 0.045vw) ; } }
  
  .lead {
    font-size: 1.171875rem;
    font-weight: 300; }
+   @media (max-width: 1200px) {
+     .lead {
+       font-size: calc(0.9271875rem + 0.32625vw) ; } }
  
  .display-1 {
    font-size: 6rem;
    font-weight: 300;
    line-height: 1.2; }
+   @media (max-width: 1200px) {
+     .display-1 {
+       font-size: calc(1.41rem + 6.12vw) ; } }
  
  .display-2 {
    font-size: 5.5rem;
    font-weight: 300;
    line-height: 1.2; }
+   @media (max-width: 1200px) {
+     .display-2 {
+       font-size: calc(1.36rem + 5.52vw) ; } }
  
  .display-3 {
    font-size: 4.5rem;
    font-weight: 300;
    line-height: 1.2; }
+   @media (max-width: 1200px) {
+     .display-3 {
+       font-size: calc(1.26rem + 4.32vw) ; } }
  
  .display-4 {
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 1.2; }
+   @media (max-width: 1200px) {
+     .display-4 {
+       font-size: calc(1.16rem + 3.12vw) ; } }
  
  hr {
    margin-top: 1rem;
@@@ -2708,6 -2747,9 +2747,9 @@@ mark
  .blockquote {
    margin-bottom: 1rem;
    font-size: 1.171875rem; }
+   @media (max-width: 1200px) {
+     .blockquote {
+       font-size: calc(0.9271875rem + 0.32625vw) ; } }
  
  .blockquote-footer {
    display: block;
@@@ -3628,6 -3670,9 +3670,9 @@@ pre 
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
+   @media (max-width: 1200px) {
+     .form-control {
+       font-size: calc(0.90375rem + 0.045vw) ; } }
    @media (prefers-reduced-motion: reduce) {
      .form-control {
        transition: none; } }
@@@ -3668,6 -3713,9 +3713,9 @@@ select.form-control:focus::-ms-value 
    padding-bottom: calc(0.5rem + 1px);
    font-size: 1.171875rem;
    line-height: 1.5; }
+   @media (max-width: 1200px) {
+     .col-form-label-lg {
+       font-size: calc(0.9271875rem + 0.32625vw) ; } }
  
  .col-form-label-sm {
    padding-top: calc(0.25rem + 1px);
@@@ -3703,6 -3751,9 +3751,9 @@@
    font-size: 1.171875rem;
    line-height: 1.5;
    border-radius: 0.3rem; }
+   @media (max-width: 1200px) {
+     .form-control-lg {
+       font-size: calc(0.9271875rem + 0.32625vw) ; } }
  
  select.form-control[size], select.form-control[multiple] {
    height: auto; }
@@@ -4006,6 -4057,9 +4057,9 @@@ textarea.form-control 
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
+   @media (max-width: 1200px) {
+     .btn {
+       font-size: calc(0.90375rem + 0.045vw) ; } }
    @media (prefers-reduced-motion: reduce) {
      .btn {
        transition: none; } }
@@@ -4393,6 -4447,9 +4447,9 @@@ fieldset:disabled a.btn 
    font-size: 1.171875rem;
    line-height: 1.5;
    border-radius: 0.3rem; }
+   @media (max-width: 1200px) {
+     .btn-lg, .btn-group-lg > .btn {
+       font-size: calc(0.9271875rem + 0.32625vw) ; } }
  
  .btn-sm, .btn-group-sm > .btn {
    padding: 0.25rem 0.5rem;
@@@ -4469,6 -4526,9 +4526,9 @@@ input[type="button"].btn-block 
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem; }
+   @media (max-width: 1200px) {
+     .dropdown-menu {
+       font-size: calc(0.90375rem + 0.045vw) ; } }
  
  .dropdown-menu-left {
    right: auto;
@@@ -4812,6 -4872,9 +4872,9 @@@
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0.25rem; }
+   @media (max-width: 1200px) {
+     .input-group-text {
+       font-size: calc(0.90375rem + 0.045vw) ; } }
    .input-group-text input[type="radio"],
    .input-group-text input[type="checkbox"] {
      margin-top: 0; }
@@@ -4830,6 -4893,14 +4893,14 @@@
    font-size: 1.171875rem;
    line-height: 1.5;
    border-radius: 0.3rem; }
+   @media (max-width: 1200px) {
+     .input-group-lg > .form-control,
+     .input-group-lg > .custom-select,
+     .input-group-lg > .input-group-prepend > .input-group-text,
+     .input-group-lg > .input-group-append > .input-group-text,
+     .input-group-lg > .input-group-prepend > .btn,
+     .input-group-lg > .input-group-append > .btn {
+       font-size: calc(0.9271875rem + 0.32625vw) ; } }
  
  .input-group-sm > .form-control:not(textarea),
  .input-group-sm > .custom-select {
@@@ -4991,6 -5062,9 +5062,9 @@@
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    appearance: none; }
+   @media (max-width: 1200px) {
+     .custom-select {
+       font-size: calc(0.90375rem + 0.045vw) ; } }
    .custom-select:focus {
      border-color: #6eb5f3;
      outline: 0;
@@@ -5021,6 -5095,9 +5095,9 @@@
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    font-size: 1.171875rem; }
+   @media (max-width: 1200px) {
+     .custom-select-lg {
+       font-size: calc(0.9271875rem + 0.32625vw) ; } }
  
  .custom-file {
    position: relative;
@@@ -5273,6 -5350,9 +5350,9 @@@
    font-size: 1.171875rem;
    line-height: inherit;
    white-space: nowrap; }
+   @media (max-width: 1200px) {
+     .navbar-brand {
+       font-size: calc(0.9271875rem + 0.32625vw) ; } }
    .navbar-brand:hover, .navbar-brand:focus {
      text-decoration: none; }
  
@@@ -5306,6 -5386,9 +5386,9 @@@
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem; }
+   @media (max-width: 1200px) {
+     .navbar-toggler {
+       font-size: calc(0.9271875rem + 0.32625vw) ; } }
    .navbar-toggler:hover, .navbar-toggler:focus {
      text-decoration: none; }
  
@@@ -5757,6 -5840,9 +5840,9 @@@
    padding: 0.75rem 1.5rem;
    font-size: 1.171875rem;
    line-height: 1.5; }
+   @media (max-width: 1200px) {
+     .pagination-lg .page-link {
+       font-size: calc(0.9271875rem + 0.32625vw) ; } }
  
  .pagination-lg .page-item:first-child .page-link {
    border-top-left-radius: 0.3rem;
@@@ -6271,6 -6357,9 +6357,9 @@@
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5; }
+   @media (max-width: 1200px) {
+     .close {
+       font-size: calc(0.950625rem + 0.6075vw) ; } }
    .close:hover {
      color: #000;
      text-decoration: none; }
@@@ -6666,6 -6755,9 +6755,9 @@@ a.close.disabled 
    border-bottom: 1px solid #ebebeb;
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px); }
+   @media (max-width: 1200px) {
+     .popover-header {
+       font-size: calc(0.90375rem + 0.045vw) ; } }
    .popover-header:empty {
      display: none; }
  
@@@ -9604,19 -9696,29 +9696,29 @@@ input[disabled] 
  #region-main {
    overflow-x: auto;
    overflow-y: visible;
-   border: 1px solid rgba(0, 0, 0, 0.125);
-   border-radius: 0.25rem;
-   padding: 1.25rem;
    background-color: #fff; }
  
- .context-header-settings-menu,
- .region-main-settings-menu {
-   float: right;
-   width: auto;
-   max-width: 4em;
-   height: 2em;
-   display: block;
-   margin-top: 4px; }
+ @media (min-width: 576px) {
+   #region-main {
+     border: 1px solid rgba(0, 0, 0, 0.125);
+     border-radius: 0.25rem;
+     padding: 1.25rem; } }
+ 
+ @media (min-width: 576px) {
+   .context-header-settings-menu,
+   .region-main-settings-menu {
+     float: right;
+     width: auto;
+     max-width: 4em;
+     height: 2em;
+     display: block;
+     margin-top: 4px; } }
+ 
+ @media (max-width: 767.98px) {
+   .context-header-settings-menu,
+   .region-main-settings-menu {
+     display: flex;
+     justify-content: flex-end; } }
  
  #goto-top-link {
    visibility: hidden;
@@@ -9639,6 -9741,10 +9741,10 @@@
      right: 0;
      transform: translateY(-100%); }
  
+ @media (max-width: 767.98px) {
+   #goto-top-link {
+     bottom: 0; } }
+ 
  body.scrolled #goto-top-link {
    opacity: 1;
    visibility: visible;
@@@ -9757,6 -9863,12 +9863,12 @@@ a.autolink.glossary:hover 
    background-color: transparent;
    margin-top: -1px; }
  
+ @media (max-width: 767.98px) {
+   .pagelayout-mydashboard #region-main-box,
+   .pagelayout-login #region-main-box {
+     padding-left: 0;
+     padding-right: 0; } }
+ 
  .collapsibleregioncaption img {
    vertical-align: middle; }
  
@@@ -10445,57 -10557,42 +10557,42 @@@ tr.flagged-tag a 
    float: left;
    padding-top: 20px; }
  
- /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
- .mod-indent-1 {
-   width: 30px; }
- 
- .mod-indent-2 {
-   width: 60px; }
- 
- .mod-indent-3 {
-   width: 90px; }
- 
- .mod-indent-4 {
-   width: 120px; }
- 
- .mod-indent-5 {
-   width: 150px; }
- 
- .mod-indent-6 {
-   width: 180px; }
- 
- .mod-indent-7 {
-   width: 210px; }
- 
- .mod-indent-8 {
-   width: 240px; }
- 
- .mod-indent-9 {
-   width: 270px; }
- 
- .mod-indent-10 {
-   width: 300px; }
- 
- .mod-indent-11 {
-   width: 330px; }
- 
- .mod-indent-12 {
-   width: 360px; }
- 
- .mod-indent-13 {
-   width: 390px; }
- 
- .mod-indent-14 {
-   width: 420px; }
- 
- .mod-indent-15 {
-   width: 450px; }
- 
- .mod-indent-16 {
-   width: 480px; }
- 
- .mod-indent-huge {
-   width: 480px; }
+ @media (min-width: 576px) {
+   /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
+   .mod-indent-1 {
+     width: 30px; }
+   .mod-indent-2 {
+     width: 60px; }
+   .mod-indent-3 {
+     width: 90px; }
+   .mod-indent-4 {
+     width: 120px; }
+   .mod-indent-5 {
+     width: 150px; }
+   .mod-indent-6 {
+     width: 180px; }
+   .mod-indent-7 {
+     width: 210px; }
+   .mod-indent-8 {
+     width: 240px; }
+   .mod-indent-9 {
+     width: 270px; }
+   .mod-indent-10 {
+     width: 300px; }
+   .mod-indent-11 {
+     width: 330px; }
+   .mod-indent-12 {
+     width: 360px; }
+   .mod-indent-13 {
+     width: 390px; }
+   .mod-indent-14 {
+     width: 420px; }
+   .mod-indent-15 {
+     width: 450px; }
+   .mod-indent-16 {
+     width: 480px; }
+   .mod-indent-huge {
+     width: 480px; } }
  
  /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
  .resourcecontent .mediaplugin_mp3 object {
@@@ -11245,10 -11342,11 +11342,11 @@@ dd:after 
      left: 0;
      right: auto;
      white-space: nowrap; }
-   .inplaceeditable.inplaceeditingon input {
-     width: 330px;
-     vertical-align: text-bottom;
-     margin-bottom: 0; }
+   @media (min-width: 576px) {
+     .inplaceeditable.inplaceeditingon input {
+       width: 330px;
+       vertical-align: text-bottom;
+       margin-bottom: 0; } }
    .inplaceeditable.inplaceeditingon select {
      margin-bottom: 0; }
  
@@@ -11611,6 -11709,91 +11709,91 @@@ body.h5p-embed .h5pmessages 
  .alert-dark a {
    color: #040505; }
  
+ @media (max-width: 767.98px) {
+   #page-navbar {
+     width: 100%; }
+   .breadcrumb:not(:empty) {
+     width: 100%;
+     border: 2px solid #e9ecef;
+     padding: 0.25rem;
+     margin-bottom: 0.5rem; }
+     .breadcrumb:not(:empty) .breadcrumb-item {
+       padding-top: 0.3333333333rem;
+       padding-bottom: 0.3333333333rem;
+       display: inline-block; }
+   .mform {
+     width: 100%;
+     padding-right: 15px;
+     padding-left: 15px; }
+   .pagination {
+     flex-wrap: wrap;
+     justify-content: center; }
+   .custom-select {
+     max-width: 100%; }
+   .card .card-body {
+     padding: 0.625rem; }
+   #page-header .card {
+     border: 0; }
+     #page-header .card .card-body {
+       padding: 0; }
+   .nav-tabs,
+   .nav-pills {
+     margin: 0;
+     border: 0;
+     padding: 0.125rem;
+     background-color: #e9ecef; }
+     .nav-tabs .nav-item,
+     .nav-pills .nav-item {
+       flex: 1 1 auto;
+       text-align: center; }
+     .nav-tabs .nav-link,
+     .nav-pills .nav-link {
+       background: #fff;
+       border: 0;
+       margin: 0.125rem; }
+       .nav-tabs .nav-link.active,
+       .nav-pills .nav-link.active {
+         color: #6c757d;
+         border-color: #6c757d;
+         border-color: #6c757d; }
+         .nav-tabs .nav-link.active:hover,
+         .nav-pills .nav-link.active:hover {
+           color: #fff;
+           background-color: #6c757d;
+           border-color: #6c757d; }
+         .nav-tabs .nav-link.active:focus, .nav-tabs .nav-link.active.focus,
+         .nav-pills .nav-link.active:focus,
+         .nav-pills .nav-link.active.focus {
+           box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); }
+         .nav-tabs .nav-link.active.disabled, .nav-tabs .nav-link.active:disabled,
+         .nav-pills .nav-link.active.disabled,
+         .nav-pills .nav-link.active:disabled {
+           color: #6c757d;
+           background-color: transparent; }
+         .nav-tabs .nav-link.active:not(:disabled):not(.disabled):active, .nav-tabs .nav-link.active:not(:disabled):not(.disabled).active,
+         .show > .nav-tabs .nav-link.active.dropdown-toggle,
+         .nav-pills .nav-link.active:not(:disabled):not(.disabled):active,
+         .nav-pills .nav-link.active:not(:disabled):not(.disabled).active,
+         .show >
+         .nav-pills .nav-link.active.dropdown-toggle {
+           color: #fff;
+           background-color: #6c757d;
+           border-color: #6c757d; }
+           .nav-tabs .nav-link.active:not(:disabled):not(.disabled):active:focus, .nav-tabs .nav-link.active:not(:disabled):not(.disabled).active:focus,
+           .show > .nav-tabs .nav-link.active.dropdown-toggle:focus,
+           .nav-pills .nav-link.active:not(:disabled):not(.disabled):active:focus,
+           .nav-pills .nav-link.active:not(:disabled):not(.disabled).active:focus,
+           .show >
+           .nav-pills .nav-link.active.dropdown-toggle:focus {
+             box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); } }
+ 
+ @media (max-width: 576px) and (max-height: 320px) {
+   div#page {
+     margin-top: 0; }
+   .navbar.fixed-top {
+     position: relative;
+     z-index: inherit; } }
+ 
  .icon {
    font-size: 16px;
    width: 16px;
@@@ -12007,30 -12190,42 +12190,42 @@@
  .jsenabled .admin_colourpicker_preview {
    display: inline; }
  
- .jsenabled .admin_colourpicker {
-   display: block;
-   height: 102px;
-   width: 410px;
-   margin-bottom: 10px;
-   box-sizing: content-box; }
+ @media (min-width: 768px) {
+   .jsenabled .admin_colourpicker {
+     display: block;
+     height: 102px;
+     width: 410px;
+     margin-bottom: 10px;
+     box-sizing: content-box; }
+   .admin_colourpicker .colourdialogue {
+     float: left;
+     border: 1px solid #d1edf6; }
+   .admin_colourpicker .previewcolour {
+     border: 1px solid #d1edf6;
+     margin-left: 301px; }
+   .admin_colourpicker .currentcolour {
+     border: 1px solid #d1edf6;
+     margin-left: 301px;
+     border-top-width: 0; } }
+ 
+ @media (max-width: 767.98px) {
+   .jsenabled .admin_colourpicker {
+     height: 150px;
+     margin-bottom: 10px;
+     display: block;
+     position: relative; }
+   .admin_colourpicker .previewcolour {
+     display: none; }
+   .admin_colourpicker .currentcolour {
+     position: absolute;
+     border: 1px solid #dee2e6;
+     top: 100px;
+     left: 0; } }
  
  .admin_colourpicker .loadingicon {
    vertical-align: middle;
    margin-left: auto; }
  
- .admin_colourpicker .colourdialogue {
-   float: left;
-   border: 1px solid #d1edf6; }
- 
- .admin_colourpicker .previewcolour {
-   border: 1px solid #d1edf6;
-   margin-left: 301px; }
- 
- .admin_colourpicker .currentcolour {
-   border: 1px solid #d1edf6;
-   margin-left: 301px;
-   border-top-width: 0; }
- 
  #page-admin-index #notice .checkforupdates {
    text-align: center; }
  
@@@ -12207,25 -12402,28 +12402,28 @@@
    float: right; }
  
  /* We put an absolutely positioned div in a relatively positioned div so it takes up no space */
- #region-main-settings-menu {
-   position: relative;
-   float: left;
-   width: 100%; }
- 
- #region-main-settings-menu > div {
-   position: absolute;
-   right: 0;
-   z-index: 100;
-   margin: 1rem; }
+ @media (min-width: 576px) {
+   #region-main-settings-menu {
+     position: relative;
+     float: left;
+     width: 100%; }
+   #region-main-settings-menu > div {
+     position: absolute;
+     right: 0;
+     z-index: 100;
+     margin: 1rem; }
+   .region_main_settings_menu_proxy {
+     width: 4rem;
+     height: 2rem;
+     background-color: #fff;
+     margin-left: 0.625rem;
+     margin-bottom: 0.625rem;
+     border-bottom-left-radius: 0.5rem;
+     float: right; } }
  
- .region_main_settings_menu_proxy {
-   width: 4rem;
-   height: 2rem;
-   background-color: #fff;
-   margin-left: 0.625rem;
-   margin-bottom: 0.625rem;
-   border-bottom-left-radius: 0.5rem;
-   float: right; }
+ @media (max-width: 767.98px) {
+   #region-main-settings-menu .menubar {
+     justify-content: flex-end; } }
  
  #region-main-settings-menu.has-blocks,
  #region-main.has-blocks {
@@@ -12442,6 -12640,11 +12640,11 @@@
  .block.invisibleblock .card-title {
    color: #6c757d; }
  
+ @media (max-width: 767.98px) {
+   .block.card {
+     border-left: 0;
+     border-right: 0; } }
+ 
  .navbar {
    max-height: 50px; }
  
@@@ -12751,8 -12954,9 +12954,9 @@@ body:not(.editing) .sitetopic ul.sectio
    body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
      padding-left: 0; }
  
- .course-content ul.section {
-   margin: 1rem; }
+ @media (min-width: 576px) {
+   .course-content ul.section {
+     margin: 1rem; } }
  
  .section .side {
    margin-top: 0.5rem; }
@@@ -12803,9 -13007,10 +13007,10 @@@
    display: block;
    height: inherit; }
  
- .section .label .mod-indent-outer {
-   padding-left: 24px;
-   display: block; }
+ @media (min-width: 576px) {
+   .section .label .mod-indent-outer {
+     padding-left: 24px;
+     display: block; } }
  
  .section .filler {
    width: 16px;
@@@ -12966,11 -13171,16 +13171,16 @@@
    .course-content ul.weeks li.section {
      margin-top: 1rem;
      padding-bottom: 1rem; }
-     .course-content ul.topics li.section .summary,
-     .course-content ul.topics li.section .content > .availabilityinfo,
-     .course-content ul.weeks li.section .summary,
-     .course-content ul.weeks li.section .content > .availabilityinfo {
-       margin-left: 25px; }
+     .course-content ul.topics li.section .content,
+     .course-content ul.weeks li.section .content {
+       margin: 0;
+       padding: 0; }
+     @media (min-width: 576px) {
+       .course-content ul.topics li.section .summary,
+       .course-content ul.topics li.section .content > .availabilityinfo,
+       .course-content ul.weeks li.section .summary,
+       .course-content ul.weeks li.section .content > .availabilityinfo {
+         margin-left: 25px; } }
      .course-content ul.topics li.section .left,
      .course-content ul.topics li.section .right,
      .course-content ul.weeks li.section .left,
@@@ -12979,12 -13189,23 +13189,23 @@@
        text-align: right;
        width: auto; }
  
+ @media (max-width: 767.98px) {
+   body:not(.editing) .course-content ul.topics li.section .left,
+   body:not(.editing) .course-content ul.topics li.section .right,
+   body:not(.editing) .course-content ul.weeks li.section .left,
+   body:not(.editing) .course-content ul.weeks li.section .right {
+     display: none; } }
+ 
  .course-content {
    margin-top: 0; }
  
  .course-content .hidden {
    display: none; }
  
+ @media (max-width: 767.98px) {
+   .course-content li.section ul {
+     padding-left: 0; } }
+ 
  .course-content li.section ul {
    list-style: disc; }
    .course-content li.section ul ul {
@@@ -13603,7 -13824,6 +13824,6 @@@ span.editinstructions 
  /* Use a variable for the drawer background colors. */
  [data-region="drawer"] {
    position: fixed;
-   padding: 20px 20px;
    width: 285px;
    top: 50px;
    height: calc(100% - 50px);
@@@ -13615,6 -13835,10 +13835,10 @@@
    -moz-transition: right 0.5s ease, left 0.5s ease;
    transition: right 0.5s ease, left 0.5s ease; }
  
+ @media (min-width: 576px) {
+   [data-region="drawer"] {
+     padding: 20px 20px; } }
+ 
  #nav-drawer {
    right: auto;
    left: 0;
@@@ -13672,6 -13896,8 +13896,8 @@@ body.drawer-ease 
      padding: 0;
      visibility: visible;
      opacity: 1; }
+   [data-region=right-hand-drawer] .closewidget {
+     display: none; }
    [data-region=right-hand-drawer].hidden {
      display: block;
      right: -320px;
@@@ -13682,6 -13908,18 +13908,18 @@@
        [data-region=right-hand-drawer].hidden {
          transition: none; } }
  
+ @media (max-width: 767.98px) {
+   [data-region=right-hand-drawer].drawer {
+     top: 0;
+     height: 100%;
+     z-index: 1030; }
+   [data-region=right-hand-drawer] .closewidget {
+     display: block;
+     padding: 0 0.2rem; }
+   body.drawer-open-left,
+   body.drawer-open-right {
+     overflow: hidden; } }
+ 
  .dir-rtl [data-region=right-hand-drawer] {
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.08); }
  
@@@ -14754,6 -14992,16 +14992,16 @@@ a.ygtvspacer:hover 
      min-height: 400px; }
    .message-app .header-container {
      flex-shrink: 0; }
+   .message-app .overflow-y {
+     overflow-y: auto; }
+   @media (max-height: 320px) {
+     .message-app .header-container [data-region="view-overview"]:not(.hidden) {
+       display: flex;
+       align-items: center; }
+     .message-app .footer-container [data-region="view-overview"] {
+       display: none; }
+     .message-app .overflow-y {
+       overflow-y: unset; } }
    .message-app .body-container {
      flex: 1;
      overflow: hidden; }
@@@ -14762,7 -15010,8 +15010,8 @@@
        right: 0;
        left: 0;
        top: 0;
-       bottom: 0; }
+       bottom: 0;
+       overflow: auto; }
    .message-app .footer-container {
      flex-shrink: 0; }
      .message-app .footer-container textarea {
@@@ -14908,6 -15157,12 +15157,12 @@@
      .message-app .emoji-picker-container {
        right: -0.5rem; } }
  
+ @media (max-height: 495px) {
+   .message-app .emoji-picker-container {
+     position: fixed;
+     top: 0;
+     transform: none; } }
+ 
  .message-app .emoji-auto-complete-container {
    overflow: auto;
    max-height: 90px;
@@@ -15268,7 -15523,8 +15523,8 @@@ body.jsenabled .questionflag input[type
    margin: 1em 0; }
  
  #page-mod-quiz-edit ul.slots .activityinstance > a {
-   display: inline;
+   display: flex;
+   align-items: center;
    text-indent: 0;
    padding-left: 0; }
  
@@@ -15779,8 -16035,9 +16035,9 @@@ body.path-question-type .mform fieldset
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6; }
  
- .mform > .form-group {
-   margin-left: 1.5rem; }
+ @media (min-width: 576px) {
+   .mform > .form-group {
+     margin-left: 1.5rem; } }
  
  .editor_atto_content.form-control {
    width: 100%; }
@@@ -16477,6 -16734,8 +16734,8 @@@ select 
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      font-size: 1.171875rem;
+     @media (max-width: 1200px) {
+       font-size: calc(0.9271875rem + 0.32625vw) ; }
      line-height: 1.5;
      right: 0; } }
  
@@@ -16491,6 -16750,8 +16750,8 @@@
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      font-size: 1.171875rem;
+     @media (max-width: 1200px) {
+       font-size: calc(0.9271875rem + 0.32625vw) ; }
      line-height: 1.5;
      right: 0; }
    to {
@@@ -17978,9 -18239,6 +18239,6 @@@ body.behat-site .custom-control-label::
  .phpinfo h2 {
    margin: auto; }
  
- .phpinfo h2 {
-   width: 600px; }
- 
  .phpinfo .e,
  .phpinfo .v,
  .phpinfo .h {
@@@ -18587,10 -18845,6 +18845,10 @@@ span[data-flexitour="container"][x-plac
        height: 1em;
        font-size: 4em; }
  
 +body {
 +  -webkit-font-smoothing: antialiased;
 +  -moz-osx-font-smoothing: grayscale; }
 +
  .navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); }