Merge branch 'MDL-63915_master' of git://github.com/markn86/moodle
authorAndrew Nicols <andrew@nicols.co.uk>
Wed, 27 Feb 2019 04:08:09 +0000 (12:08 +0800)
committerAndrew Nicols <andrew@nicols.co.uk>
Wed, 27 Feb 2019 04:08:09 +0000 (12:08 +0800)
1  2 
lib/outputrenderers.php
message/classes/api.php
theme/boost/style/moodle.css
theme/bootstrapbase/style/moodle.css

diff --combined lib/outputrenderers.php
@@@ -368,38 -368,6 +368,38 @@@ class renderer_base 
              theme_get_revision(), $logo);
      }
  
 +    /**
 +     * Whether we should display the logo in the navbar.
 +     *
 +     * We will when there are no main logos, and we have compact logo.
 +     *
 +     * @return bool
 +     */
 +    public function should_display_navbar_logo() {
 +        $logo = $this->get_compact_logo_url();
 +        return !empty($logo) && !$this->should_display_main_logo();
 +    }
 +
 +    /**
 +     * Whether we should display the main logo.
 +     *
 +     * @param int $headinglevel
 +     * @return bool
 +     */
 +    public function should_display_main_logo($headinglevel = 1) {
 +        global $PAGE;
 +
 +        // Only render the logo if we're on the front page or login page and the we have a logo.
 +        $logo = $this->get_logo_url();
 +        if ($headinglevel == 1 && !empty($logo)) {
 +            if ($PAGE->pagelayout == 'frontpage' || $PAGE->pagelayout == 'login') {
 +                return true;
 +            }
 +        }
 +
 +        return false;
 +    }
 +
  }
  
  
@@@ -544,9 -512,6 +544,9 @@@ class core_renderer extends renderer_ba
       */
      protected $unique_main_content_token;
  
 +    /** @var custom_menu_item language The language menu if created */
 +    protected $language = null;
 +
      /**
       * Constructor
       *
       * @return string HTML fragment.
       */
      public function standard_head_html() {
 -        global $CFG, $SESSION;
 +        global $CFG, $SESSION, $SITE, $PAGE;
  
          // Before we output any content, we need to ensure that certain
          // page components are set up.
              $output .= "\n".$CFG->additionalhtmlhead;
          }
  
 +        if ($PAGE->pagelayout == 'frontpage') {
 +            $summary = s(strip_tags(format_text($SITE->summary, FORMAT_HTML)));
 +            if (!empty($summary)) {
 +                $output .= "<meta name=\"description\" content=\"$summary\" />\n";
 +            }
 +        }
 +
          return $output;
      }
  
      /**
       * Renders an action menu component.
       *
 -     * ARIA references:
 -     *   - http://www.w3.org/WAI/GL/wiki/Using_ARIA_menus
 -     *   - http://stackoverflow.com/questions/12279113/recommended-wai-aria-implementation-for-navigation-bar-menu
 -     *
       * @param action_menu $menu
       * @return string HTML
       */
      public function render_action_menu(action_menu $menu) {
 +
 +        // We don't want the class icon there!
 +        foreach ($menu->get_secondary_actions() as $action) {
 +            if ($action instanceof \action_menu_link && $action->has_class('icon')) {
 +                $action->attributes['class'] = preg_replace('/(^|\s+)icon(\s+|$)/i', '', $action->attributes['class']);
 +            }
 +        }
 +
 +        if ($menu->is_empty()) {
 +            return '';
 +        }
          $context = $menu->export_for_template($this);
 +
          return $this->render_from_template('core/action_menu', $context);
      }
  
      /**
       * Prints a nice side block with an optional header.
       *
 -     * The content is described
 -     * by a {@link core_renderer::block_contents} object.
 -     *
 -     * <div id="inst{$instanceid}" class="block_{$blockname} block">
 -     *      <div class="header"></div>
 -     *      <div class="content">
 -     *          ...CONTENT...
 -     *          <div class="footer">
 -     *          </div>
 -     *      </div>
 -     *      <div class="annotation">
 -     *      </div>
 -     * </div>
 -     *
       * @param block_contents $bc HTML for the content
       * @param string $region the region the block is appearing in.
       * @return string the HTML to be output.
          if (empty($bc->blockinstanceid) || !strip_tags($bc->title)) {
              $bc->collapsible = block_contents::NOT_HIDEABLE;
          }
 -        if (!empty($bc->blockinstanceid)) {
 -            $bc->attributes['data-instanceid'] = $bc->blockinstanceid;
 -        }
 -        $skiptitle = strip_tags($bc->title);
 -        if ($bc->blockinstanceid && !empty($skiptitle)) {
 -            $bc->attributes['aria-labelledby'] = 'instance-'.$bc->blockinstanceid.'-header';
 -        } else if (!empty($bc->arialabel)) {
 -            $bc->attributes['aria-label'] = $bc->arialabel;
 -        }
 -        if ($bc->dockable) {
 -            $bc->attributes['data-dockable'] = 1;
 -        }
 -        if ($bc->collapsible == block_contents::HIDDEN) {
 -            $bc->add_class('hidden');
 -        }
 -        if (!empty($bc->controls)) {
 -            $bc->add_class('block_with_controls');
 -        }
 -
  
 -        if (empty($skiptitle)) {
 -            $output = '';
 -            $skipdest = '';
 -        } else {
 -            $output = html_writer::link('#sb-'.$bc->skipid, get_string('skipa', 'access', $skiptitle),
 -                      array('class' => 'skip skip-block', 'id' => 'fsb-' . $bc->skipid));
 -            $skipdest = html_writer::span('', 'skip-block-to',
 -                      array('id' => 'sb-' . $bc->skipid));
 +        $id = !empty($bc->attributes['id']) ? $bc->attributes['id'] : uniqid('block-');
 +        $context = new stdClass();
 +        $context->skipid = $bc->skipid;
 +        $context->blockinstanceid = $bc->blockinstanceid;
 +        $context->dockable = $bc->dockable;
 +        $context->id = $id;
 +        $context->hidden = $bc->collapsible == block_contents::HIDDEN;
 +        $context->skiptitle = strip_tags($bc->title);
 +        $context->showskiplink = !empty($context->skiptitle);
 +        $context->arialabel = $bc->arialabel;
 +        $context->ariarole = !empty($bc->attributes['role']) ? $bc->attributes['role'] : 'complementary';
 +        $context->type = $bc->attributes['data-block'];
 +        $context->title = $bc->title;
 +        $context->content = $bc->content;
 +        $context->annotation = $bc->annotation;
 +        $context->footer = $bc->footer;
 +        $context->hascontrols = !empty($bc->controls);
 +        if ($context->hascontrols) {
 +            $context->controls = $this->block_controls($bc->controls, $id);
          }
  
 -        $output .= html_writer::start_tag('div', $bc->attributes);
 -
 -        $output .= $this->block_header($bc);
 -        $output .= $this->block_content($bc);
 -
 -        $output .= html_writer::end_tag('div');
 -
 -        $output .= $this->block_annotation($bc);
 -
 -        $output .= $skipdest;
 -
 -        $this->init_block_hider_js($bc);
 -        return $output;
 -    }
 -
 -    /**
 -     * Produces a header for a block
 -     *
 -     * @param block_contents $bc
 -     * @return string
 -     */
 -    protected function block_header(block_contents $bc) {
 -
 -        $title = '';
 -        if ($bc->title) {
 -            $attributes = array();
 -            if ($bc->blockinstanceid) {
 -                $attributes['id'] = 'instance-'.$bc->blockinstanceid.'-header';
 -            }
 -            $title = html_writer::tag('h2', $bc->title, $attributes);
 -        }
 -
 -        $blockid = null;
 -        if (isset($bc->attributes['id'])) {
 -            $blockid = $bc->attributes['id'];
 -        }
 -        $controlshtml = $this->block_controls($bc->controls, $blockid);
 -
 -        $output = '';
 -        if ($title || $controlshtml) {
 -            $output .= html_writer::tag('div', html_writer::tag('div', html_writer::tag('div', '', array('class'=>'block_action')). $title . $controlshtml, array('class' => 'title')), array('class' => 'header'));
 -        }
 -        return $output;
 -    }
 -
 -    /**
 -     * Produces the content area for a block
 -     *
 -     * @param block_contents $bc
 -     * @return string
 -     */
 -    protected function block_content(block_contents $bc) {
 -        $output = html_writer::start_tag('div', array('class' => 'content'));
 -        if (!$bc->title && !$this->block_controls($bc->controls)) {
 -            $output .= html_writer::tag('div', '', array('class'=>'block_action notitle'));
 -        }
 -        $output .= $bc->content;
 -        $output .= $this->block_footer($bc);
 -        $output .= html_writer::end_tag('div');
 -
 -        return $output;
 -    }
 -
 -    /**
 -     * Produces the footer for a block
 -     *
 -     * @param block_contents $bc
 -     * @return string
 -     */
 -    protected function block_footer(block_contents $bc) {
 -        $output = '';
 -        if ($bc->footer) {
 -            $output .= html_writer::tag('div', $bc->footer, array('class' => 'footer'));
 -        }
 -        return $output;
 -    }
 -
 -    /**
 -     * Produces the annotation for a block
 -     *
 -     * @param block_contents $bc
 -     * @return string
 -     */
 -    protected function block_annotation(block_contents $bc) {
 -        $output = '';
 -        if ($bc->annotation) {
 -            $output .= html_writer::tag('div', $bc->annotation, array('class' => 'blockannotation'));
 -        }
 -        return $output;
 -    }
 -
 -    /**
 -     * Calls the JS require function to hide a block.
 -     *
 -     * @param block_contents $bc A block_contents object
 -     */
 -    protected function init_block_hider_js(block_contents $bc) {
 -        if (!empty($bc->attributes['id']) and $bc->collapsible != block_contents::NOT_HIDEABLE) {
 -            $config = new stdClass;
 -            $config->id = $bc->attributes['id'];
 -            $config->title = strip_tags($bc->title);
 -            $config->preference = 'block' . $bc->blockinstanceid . 'hidden';
 -            $config->tooltipVisible = get_string('hideblocka', 'access', $config->title);
 -            $config->tooltipHidden = get_string('showblocka', 'access', $config->title);
 -
 -            $this->page->requires->js_init_call('M.util.init_block_hider', array($config));
 -            user_preference_allow_ajax_update($config->preference, PARAM_BOOL);
 -        }
 +        return $this->render_from_template('core/block', $context);
      }
  
      /**
       * @return string HTML fragment
       */
      protected function render_single_button(single_button $button) {
 -        $attributes = array('type'     => 'submit',
 -                            'value'    => $button->label,
 -                            'disabled' => $button->disabled ? 'disabled' : null,
 -                            'title'    => $button->tooltip);
 -
 -        if ($button->actions) {
 -            $id = html_writer::random_id('single_button');
 -            $attributes['id'] = $id;
 -            foreach ($button->actions as $action) {
 -                $this->add_action_handler($action, $id);
 -            }
 -        }
 -
 -        // first the input element
 -        $output = html_writer::empty_tag('input', $attributes);
 -
 -        // then hidden fields
 -        $params = $button->url->params();
 -        if ($button->method === 'post') {
 -            $params['sesskey'] = sesskey();
 -        }
 -        foreach ($params as $var => $val) {
 -            $output .= html_writer::empty_tag('input', array('type' => 'hidden', 'name' => $var, 'value' => $val));
 -        }
 -
 -        // then div wrapper for xhtml strictness
 -        $output = html_writer::tag('div', $output);
 -
 -        // now the form itself around it
 -        if ($button->method === 'get') {
 -            $url = $button->url->out_omit_querystring(true); // url without params, the anchor part allowed
 -        } else {
 -            $url = $button->url->out_omit_querystring();     // url without params, the anchor part not allowed
 -        }
 -        if ($url === '') {
 -            $url = '#'; // there has to be always some action
 -        }
 -        $attributes = array('method' => $button->method,
 -                            'action' => $url,
 -                            'id'     => $button->formid);
 -        $output = html_writer::tag('form', $output, $attributes);
 -
 -        // and finally one more wrapper with class
 -        return html_writer::tag('div', $output, array('class' => $button->class));
 +        return $this->render_from_template('core/single_button', $button->export_for_template($this));
      }
  
      /**
       * @return string HTML fragment
       */
      protected function render_help_icon(help_icon $helpicon) {
 -        return $this->render_from_template('core/help_icon', $helpicon->export_for_template($this));
 +        $context = $helpicon->export_for_template($this);
 +        return $this->render_from_template('core/help_icon', $context);
      }
  
      /**
@@@ -3033,7 -3154,7 +3033,7 @@@ EOD
      public function box_start($classes = 'generalbox', $id = null, $attributes = array()) {
          $this->opencontainers->push('box', html_writer::end_tag('div'));
          $attributes['id'] = $id;
 -        $attributes['class'] = 'box ' . renderer_base::prepare_classes($classes);
 +        $attributes['class'] = 'box py-3 ' . renderer_base::prepare_classes($classes);
          return html_writer::start_tag('div', $attributes);
      }
  
      }
  
      /**
 -     * Return the navbar content so that it can be echoed out by the layout
 -     *
 -     * @return string XHTML navbar
 +     * This renders the navbar.
 +     * Uses bootstrap compatible html.
       */
      public function navbar() {
 -        $items = $this->page->navbar->get_items();
 -        $itemcount = count($items);
 -        if ($itemcount === 0) {
 -            return '';
 -        }
 -
 -        $htmlblocks = array();
 -        // Iterate the navarray and display each node
 -        $separator = get_separator();
 -        for ($i=0;$i < $itemcount;$i++) {
 -            $item = $items[$i];
 -            $item->hideicon = true;
 -            if ($i===0) {
 -                $content = html_writer::tag('li', $this->render($item));
 -            } else {
 -                $content = html_writer::tag('li', $separator.$this->render($item));
 -            }
 -            $htmlblocks[] = $content;
 -        }
 -
 -        //accessibility: heading for navbar list  (MDL-20446)
 -        $navbarcontent = html_writer::tag('span', get_string('pagepath'),
 -                array('class' => 'accesshide', 'id' => 'navbar-label'));
 -        $navbarcontent .= html_writer::tag('nav',
 -                html_writer::tag('ul', join('', $htmlblocks)),
 -                array('aria-labelledby' => 'navbar-label'));
 -        // XHTML
 -        return $navbarcontent;
 +        return $this->render_from_template('core/navbar', $this->page->navbar);
      }
  
      /**
       */
      public function custom_menu($custommenuitems = '') {
          global $CFG;
 +
          if (empty($custommenuitems) && !empty($CFG->custommenuitems)) {
              $custommenuitems = $CFG->custommenuitems;
          }
 -        if (empty($custommenuitems)) {
 -            return '';
 +        $custommenu = new custom_menu($custommenuitems, current_language());
 +        return $this->render_custom_menu($custommenu);
 +    }
 +
 +    /**
 +     * We want to show the custom menus as a list of links in the footer on small screens.
 +     * Just return the menu object exported so we can render it differently.
 +     */
 +    public function custom_menu_flat() {
 +        global $CFG;
 +        $custommenuitems = '';
 +
 +        if (empty($custommenuitems) && !empty($CFG->custommenuitems)) {
 +            $custommenuitems = $CFG->custommenuitems;
          }
          $custommenu = new custom_menu($custommenuitems, current_language());
 -        return $this->render($custommenu);
 +        $langs = get_string_manager()->get_list_of_translations();
 +        $haslangmenu = $this->lang_menu() != '';
 +
 +        if ($haslangmenu) {
 +            $strlang = get_string('language');
 +            $currentlang = current_language();
 +            if (isset($langs[$currentlang])) {
 +                $currentlang = $langs[$currentlang];
 +            } else {
 +                $currentlang = $strlang;
 +            }
 +            $this->language = $custommenu->add($currentlang, new moodle_url('#'), $strlang, 10000);
 +            foreach ($langs as $langtype => $langname) {
 +                $this->language->add($langname, new moodle_url($this->page->url, array('lang' => $langtype)), $langname);
 +            }
 +        }
 +
 +        return $custommenu->export_for_template($this);
      }
  
      /**
       * @return string
       */
      protected function render_custom_menu(custom_menu $menu) {
 -        static $menucount = 0;
 -        // If the menu has no children return an empty string
 -        if (!$menu->has_children()) {
 +        global $CFG;
 +
 +        $langs = get_string_manager()->get_list_of_translations();
 +        $haslangmenu = $this->lang_menu() != '';
 +
 +        if (!$menu->has_children() && !$haslangmenu) {
              return '';
          }
 -        // Increment the menu count. This is used for ID's that get worked with
 -        // in JavaScript as is essential
 -        $menucount++;
 -        // Initialise this custom menu (the custom menu object is contained in javascript-static
 -        $jscode = js_writer::function_call_with_Y('M.core_custom_menu.init', array('custom_menu_'.$menucount));
 -        $jscode = "(function(){{$jscode}})";
 -        $this->page->requires->yui_module('node-menunav', $jscode);
 -        // Build the root nodes as required by YUI
 -        $content = html_writer::start_tag('div', array('id'=>'custom_menu_'.$menucount, 'class'=>'yui3-menu yui3-menu-horizontal javascript-disabled custom-menu'));
 -        $content .= html_writer::start_tag('div', array('class'=>'yui3-menu-content'));
 -        $content .= html_writer::start_tag('ul');
 -        // Render each child
 +
 +        if ($haslangmenu) {
 +            $strlang = get_string('language');
 +            $currentlang = current_language();
 +            if (isset($langs[$currentlang])) {
 +                $currentlang = $langs[$currentlang];
 +            } else {
 +                $currentlang = $strlang;
 +            }
 +            $this->language = $menu->add($currentlang, new moodle_url('#'), $strlang, 10000);
 +            foreach ($langs as $langtype => $langname) {
 +                $this->language->add($langname, new moodle_url($this->page->url, array('lang' => $langtype)), $langname);
 +            }
 +        }
 +
 +        $content = '';
          foreach ($menu->get_children() as $item) {
 -            $content .= $this->render_custom_menu_item($item);
 +            $context = $item->export_for_template($this);
 +            $content .= $this->render_from_template('core/custom_menu_item', $context);
          }
 -        // Close the open tags
 -        $content .= html_writer::end_tag('ul');
 -        $content .= html_writer::end_tag('div');
 -        $content .= html_writer::end_tag('div');
 -        // Return the custom menu
 +
          return $content;
      }
  
          if (empty($tabtree->subtree)) {
              return '';
          }
 -        $str = '';
 -        $str .= html_writer::start_tag('div', array('class' => 'tabtree'));
 -        $str .= $this->render_tabobject($tabtree);
 -        $str .= html_writer::end_tag('div').
 -                html_writer::tag('div', ' ', array('class' => 'clearer'));
 -        return $str;
 +        $data = $tabtree->export_for_template($this);
 +        return $this->render_from_template('core/tabtree', $data);
      }
  
      /**
       * @return string
       */
      public function body_css_classes(array $additionalclasses = array()) {
 -        // Add a class for each block region on the page.
 -        // We use the block manager here because the theme object makes get_string calls.
 -        $usedregions = array();
 -        foreach ($this->page->blocks->get_regions() as $region) {
 -            $additionalclasses[] = 'has-region-'.$region;
 -            if ($this->page->blocks->region_has_content($region, $this)) {
 -                $additionalclasses[] = 'used-region-'.$region;
 -                $usedregions[] = $region;
 -            } else {
 -                $additionalclasses[] = 'empty-region-'.$region;
 -            }
 -            if ($this->page->blocks->region_completely_docked($region, $this)) {
 -                $additionalclasses[] = 'docked-region-'.$region;
 -            }
 -        }
 -        if (!$usedregions) {
 -            // No regions means there is only content, add 'content-only' class.
 -            $additionalclasses[] = 'content-only';
 -        } else if (count($usedregions) === 1) {
 -            // Add the -only class for the only used region.
 -            $region = array_shift($usedregions);
 -            $additionalclasses[] = $region . '-only';
 -        }
 -        foreach ($this->page->layout_options as $option => $value) {
 -            if ($value) {
 -                $additionalclasses[] = 'layout-option-'.$option;
 -            }
 -        }
 -        $css = $this->page->bodyclasses .' '. join(' ', $additionalclasses);
 -        return $css;
 +        return $this->page->bodyclasses . ' ' . implode(' ', $additionalclasses);
      }
  
      /**
       * @return string The output.
       */
      public function render_preferences_groups(preferences_groups $renderable) {
 -        $html = '';
 -        $html .= html_writer::start_div('row-fluid');
 -        $html .= html_writer::start_tag('div', array('class' => 'span12 preferences-groups'));
 -        $i = 0;
 -        $open = false;
 -        foreach ($renderable->groups as $group) {
 -            if ($i == 0 || $i % 3 == 0) {
 -                if ($open) {
 -                    $html .= html_writer::end_tag('div');
 -                }
 -                $html .= html_writer::start_tag('div', array('class' => 'row-fluid'));
 -                $open = true;
 -            }
 -            $html .= $this->render($group);
 -            $i++;
 -        }
 -
 -        $html .= html_writer::end_tag('div');
 -
 -        $html .= html_writer::end_tag('ul');
 -        $html .= html_writer::end_tag('div');
 -        $html .= html_writer::end_div();
 -        return $html;
 +        return $this->render_from_template('core/preferences_groups', $renderable);
      }
  
      /**
      }
  
      public function context_header($headerinfo = null, $headinglevel = 1) {
 -        global $DB, $USER, $CFG;
 +        global $DB, $USER, $CFG, $SITE;
          require_once($CFG->dirroot . '/user/lib.php');
          $context = $this->page->context;
          $heading = null;
          $imagedata = null;
          $subheader = null;
          $userbuttons = null;
 +
 +        if ($this->should_display_main_logo($headinglevel)) {
 +            $sitename = format_string($SITE->fullname, true, array('context' => context_course::instance(SITEID)));
 +            return html_writer::div(html_writer::empty_tag('img', [
 +                    'src' => $this->get_logo_url(null, 150), 'alt' => $sitename]), 'logo');
 +        }
 +
          // Make sure to use the heading if it has been set.
          if (isset($headerinfo['heading'])) {
              $heading = $headerinfo['heading'];
                              'title' => get_string('message', 'message'),
                              'url' => new moodle_url('/message/index.php', array('id' => $user->id)),
                              'image' => 'message',
-                             'linkattributes' => array('role' => 'button'),
+                             'linkattributes' => \core_message\helper::messageuser_link_params($user->id),
                              'page' => $this->page
                          ),
                          'togglecontact' => array(
                      if ($button['buttontype'] === 'togglecontact') {
                          \core_message\helper::togglecontact_requirejs();
                      }
+                     if ($button['buttontype'] === 'message') {
+                         \core_message\helper::messageuser_requirejs();
+                     }
                      $image = $this->pix_icon($button['formattedimage'], $button['title'], 'moodle', array(
                          'class' => 'iconsmall',
                          'role' => 'presentation'
       * @return string HTML to display the main header.
       */
      public function full_header() {
 -        $html = html_writer::start_tag('header', array('id' => 'page-header', 'class' => 'clearfix'));
 -        $html .= $this->context_header();
 -        $html .= html_writer::start_div('clearfix', array('id' => 'page-navbar'));
 -        $html .= html_writer::tag('div', $this->navbar(), array('class' => 'breadcrumb-nav'));
 -        $html .= html_writer::div($this->page_heading_button(), 'breadcrumb-button');
 -        $html .= html_writer::end_div();
 -        $html .= html_writer::tag('div', $this->course_header(), array('id' => 'course-header'));
 -        $html .= html_writer::end_tag('header');
 -        return $html;
 +        global $PAGE;
 +
 +        $header = new stdClass();
 +        $header->settingsmenu = $this->context_header_settings_menu();
 +        $header->contextheader = $this->context_header();
 +        $header->hasnavbar = empty($PAGE->layout_options['nonavbar']);
 +        $header->navbar = $this->navbar();
 +        $header->pageheadingbutton = $this->page_heading_button();
 +        $header->courseheader = $this->course_header();
 +        return $this->render_from_template('core/full_header', $header);
 +    }
 +
 +    /**
 +     * This is an optional menu that can be added to a layout by a theme. It contains the
 +     * menu for the course administration, only on the course main page.
 +     *
 +     * @return string
 +     */
 +    public function context_header_settings_menu() {
 +        $context = $this->page->context;
 +        $menu = new action_menu();
 +
 +        $items = $this->page->navbar->get_items();
 +        $currentnode = end($items);
 +
 +        $showcoursemenu = false;
 +        $showfrontpagemenu = false;
 +        $showusermenu = false;
 +
 +        // We are on the course home page.
 +        if (($context->contextlevel == CONTEXT_COURSE) &&
 +                !empty($currentnode) &&
 +                ($currentnode->type == navigation_node::TYPE_COURSE || $currentnode->type == navigation_node::TYPE_SECTION)) {
 +            $showcoursemenu = true;
 +        }
 +
 +        $courseformat = course_get_format($this->page->course);
 +        // This is a single activity course format, always show the course menu on the activity main page.
 +        if ($context->contextlevel == CONTEXT_MODULE &&
 +                !$courseformat->has_view_page()) {
 +
 +            $this->page->navigation->initialise();
 +            $activenode = $this->page->navigation->find_active_node();
 +            // If the settings menu has been forced then show the menu.
 +            if ($this->page->is_settings_menu_forced()) {
 +                $showcoursemenu = true;
 +            } else if (!empty($activenode) && ($activenode->type == navigation_node::TYPE_ACTIVITY ||
 +                            $activenode->type == navigation_node::TYPE_RESOURCE)) {
 +
 +                // We only want to show the menu on the first page of the activity. This means
 +                // the breadcrumb has no additional nodes.
 +                if ($currentnode && ($currentnode->key == $activenode->key && $currentnode->type == $activenode->type)) {
 +                    $showcoursemenu = true;
 +                }
 +            }
 +        }
 +
 +        // This is the site front page.
 +        if ($context->contextlevel == CONTEXT_COURSE &&
 +                !empty($currentnode) &&
 +                $currentnode->key === 'home') {
 +            $showfrontpagemenu = true;
 +        }
 +
 +        // This is the user profile page.
 +        if ($context->contextlevel == CONTEXT_USER &&
 +                !empty($currentnode) &&
 +                ($currentnode->key === 'myprofile')) {
 +            $showusermenu = true;
 +        }
 +
 +        if ($showfrontpagemenu) {
 +            $settingsnode = $this->page->settingsnav->find('frontpage', navigation_node::TYPE_SETTING);
 +            if ($settingsnode) {
 +                // Build an action menu based on the visible nodes from this navigation tree.
 +                $skipped = $this->build_action_menu_from_navigation($menu, $settingsnode, false, true);
 +
 +                // We only add a list to the full settings menu if we didn't include every node in the short menu.
 +                if ($skipped) {
 +                    $text = get_string('morenavigationlinks');
 +                    $url = new moodle_url('/course/admin.php', array('courseid' => $this->page->course->id));
 +                    $link = new action_link($url, $text, null, null, new pix_icon('t/edit', $text));
 +                    $menu->add_secondary_action($link);
 +                }
 +            }
 +        } else if ($showcoursemenu) {
 +            $settingsnode = $this->page->settingsnav->find('courseadmin', navigation_node::TYPE_COURSE);
 +            if ($settingsnode) {
 +                // Build an action menu based on the visible nodes from this navigation tree.
 +                $skipped = $this->build_action_menu_from_navigation($menu, $settingsnode, false, true);
 +
 +                // We only add a list to the full settings menu if we didn't include every node in the short menu.
 +                if ($skipped) {
 +                    $text = get_string('morenavigationlinks');
 +                    $url = new moodle_url('/course/admin.php', array('courseid' => $this->page->course->id));
 +                    $link = new action_link($url, $text, null, null, new pix_icon('t/edit', $text));
 +                    $menu->add_secondary_action($link);
 +                }
 +            }
 +        } else if ($showusermenu) {
 +            // Get the course admin node from the settings navigation.
 +            $settingsnode = $this->page->settingsnav->find('useraccount', navigation_node::TYPE_CONTAINER);
 +            if ($settingsnode) {
 +                // Build an action menu based on the visible nodes from this navigation tree.
 +                $this->build_action_menu_from_navigation($menu, $settingsnode);
 +            }
 +        }
 +
 +        return $this->render($menu);
 +    }
 +
 +    /**
 +     * Take a node in the nav tree and make an action menu out of it.
 +     * The links are injected in the action menu.
 +     *
 +     * @param action_menu $menu
 +     * @param navigation_node $node
 +     * @param boolean $indent
 +     * @param boolean $onlytopleafnodes
 +     * @return boolean nodesskipped - True if nodes were skipped in building the menu
 +     */
 +    protected function build_action_menu_from_navigation(action_menu $menu,
 +            navigation_node $node,
 +            $indent = false,
 +            $onlytopleafnodes = false) {
 +        $skipped = false;
 +        // Build an action menu based on the visible nodes from this navigation tree.
 +        foreach ($node->children as $menuitem) {
 +            if ($menuitem->display) {
 +                if ($onlytopleafnodes && $menuitem->children->count()) {
 +                    $skipped = true;
 +                    continue;
 +                }
 +                if ($menuitem->action) {
 +                    if ($menuitem->action instanceof action_link) {
 +                        $link = $menuitem->action;
 +                        // Give preference to setting icon over action icon.
 +                        if (!empty($menuitem->icon)) {
 +                            $link->icon = $menuitem->icon;
 +                        }
 +                    } else {
 +                        $link = new action_link($menuitem->action, $menuitem->text, null, null, $menuitem->icon);
 +                    }
 +                } else {
 +                    if ($onlytopleafnodes) {
 +                        $skipped = true;
 +                        continue;
 +                    }
 +                    $link = new action_link(new moodle_url('#'), $menuitem->text, null, ['disabled' => true], $menuitem->icon);
 +                }
 +                if ($indent) {
 +                    $link->add_class('ml-4');
 +                }
 +                if (!empty($menuitem->classes)) {
 +                    $link->add_class(implode(" ", $menuitem->classes));
 +                }
 +
 +                $menu->add_secondary_action($link);
 +                $skipped = $skipped || $this->build_action_menu_from_navigation($menu, $menuitem, true);
 +            }
 +        }
 +        return $skipped;
 +    }
 +
 +    /**
 +     * This is an optional menu that can be added to a layout by a theme. It contains the
 +     * menu for the most specific thing from the settings block. E.g. Module administration.
 +     *
 +     * @return string
 +     */
 +    public function region_main_settings_menu() {
 +        $context = $this->page->context;
 +        $menu = new action_menu();
 +
 +        if ($context->contextlevel == CONTEXT_MODULE) {
 +
 +            $this->page->navigation->initialise();
 +            $node = $this->page->navigation->find_active_node();
 +            $buildmenu = false;
 +            // If the settings menu has been forced then show the menu.
 +            if ($this->page->is_settings_menu_forced()) {
 +                $buildmenu = true;
 +            } else if (!empty($node) && ($node->type == navigation_node::TYPE_ACTIVITY ||
 +                            $node->type == navigation_node::TYPE_RESOURCE)) {
 +
 +                $items = $this->page->navbar->get_items();
 +                $navbarnode = end($items);
 +                // We only want to show the menu on the first page of the activity. This means
 +                // the breadcrumb has no additional nodes.
 +                if ($navbarnode && ($navbarnode->key === $node->key && $navbarnode->type == $node->type)) {
 +                    $buildmenu = true;
 +                }
 +            }
 +            if ($buildmenu) {
 +                // Get the course admin node from the settings navigation.
 +                $node = $this->page->settingsnav->find('modulesettings', navigation_node::TYPE_SETTING);
 +                if ($node) {
 +                    // Build an action menu based on the visible nodes from this navigation tree.
 +                    $this->build_action_menu_from_navigation($menu, $node);
 +                }
 +            }
 +
 +        } else if ($context->contextlevel == CONTEXT_COURSECAT) {
 +            // For course category context, show category settings menu, if we're on the course category page.
 +            if ($this->page->pagetype === 'course-index-category') {
 +                $node = $this->page->settingsnav->find('categorysettings', navigation_node::TYPE_CONTAINER);
 +                if ($node) {
 +                    // Build an action menu based on the visible nodes from this navigation tree.
 +                    $this->build_action_menu_from_navigation($menu, $node);
 +                }
 +            }
 +
 +        } else {
 +            $items = $this->page->navbar->get_items();
 +            $navbarnode = end($items);
 +
 +            if ($navbarnode && ($navbarnode->key === 'participants')) {
 +                $node = $this->page->settingsnav->find('users', navigation_node::TYPE_CONTAINER);
 +                if ($node) {
 +                    // Build an action menu based on the visible nodes from this navigation tree.
 +                    $this->build_action_menu_from_navigation($menu, $node);
 +                }
 +
 +            }
 +        }
 +        return $this->render($menu);
      }
  
      /**
       * @return string
       */
      public function render_login(\core_auth\output\login $form) {
 -        global $CFG;
 +        global $CFG, $SITE;
  
          $context = $form->export_for_template($this);
  
              $context->cookieshelpiconformatted = $this->help_icon('cookiesenabled');
          }
          $context->errorformatted = $this->error_text($context->error);
 +        $url = $this->get_logo_url();
 +        if ($url) {
 +            $url = $url->out(false);
 +        }
 +        $context->logourl = $url;
 +        $context->sitename = format_string($SITE->fullname, true,
 +                ['context' => context_course::instance(SITEID), "escape" => false]);
  
          return $this->render_from_template('core/loginform', $context);
      }
       * @return string
       */
      public function render_login_signup_form($form) {
 +        global $SITE;
 +
          $context = $form->export_for_template($this);
 +        $url = $this->get_logo_url();
 +        if ($url) {
 +            $url = $url->out(false);
 +        }
 +        $context['logourl'] = $url;
 +        $context['sitename'] = format_string($SITE->fullname, true,
 +                ['context' => context_course::instance(SITEID), "escape" => false]);
  
          return $this->render_from_template('core/signup_form_layout', $context);
      }
@@@ -4910,7 -4843,6 +4913,7 @@@ class core_renderer_maintenance extend
  
      /**
       * Initialises the renderer instance.
 +     *
       * @param moodle_page $page
       * @param string $target
       * @throws coding_exception
       * @return string
       */
      public function block(block_contents $bc, $region) {
 -        // Computer says no blocks.
 -        // debugging('Please do not use $OUTPUT->'.__FUNCTION__.'() when performing maintenance tasks.', DEBUG_DEVELOPER);
          return '';
      }
  
       * @return string
       */
      public function blocks($region, $classes = array(), $tag = 'aside') {
 -        // Computer says no blocks.
 -        // debugging('Please do not use $OUTPUT->'.__FUNCTION__.'() when performing maintenance tasks.', DEBUG_DEVELOPER);
          return '';
      }
  
       * @return string
       */
      public function blocks_for_region($region) {
 -        // Computer says no blocks for region.
 -        // debugging('Please do not use $OUTPUT->'.__FUNCTION__.'() when performing maintenance tasks.', DEBUG_DEVELOPER);
          return '';
      }
  
       * @return string
       */
      public function course_content_header($onlyifnotcalledbefore = false) {
 -        // Computer says no course content header.
 -        // debugging('Please do not use $OUTPUT->'.__FUNCTION__.'() when performing maintenance tasks.', DEBUG_DEVELOPER);
          return '';
      }
  
       * @return string
       */
      public function course_content_footer($onlyifnotcalledbefore = false) {
 -        // Computer says no course content footer.
 -        // debugging('Please do not use $OUTPUT->'.__FUNCTION__.'() when performing maintenance tasks.', DEBUG_DEVELOPER);
          return '';
      }
  
       * @return string
       */
      public function course_header() {
 -        // Computer says no course header.
 -        // debugging('Please do not use $OUTPUT->'.__FUNCTION__.'() when performing maintenance tasks.', DEBUG_DEVELOPER);
          return '';
      }
  
       * @return string
       */
      public function course_footer() {
 -        // Computer says no course footer.
 -        // debugging('Please do not use $OUTPUT->'.__FUNCTION__.'() when performing maintenance tasks.', DEBUG_DEVELOPER);
          return '';
      }
  
       * @return string
       */
      public function custom_menu($custommenuitems = '') {
 -        // Computer says no custom menu.
 -        // debugging('Please do not use $OUTPUT->'.__FUNCTION__.'() when performing maintenance tasks.', DEBUG_DEVELOPER);
          return '';
      }
  
       * @return string
       */
      public function file_picker($options) {
 -        // Computer says no file picker.
 -        // debugging('Please do not use $OUTPUT->'.__FUNCTION__.'() when performing maintenance tasks.', DEBUG_DEVELOPER);
          return '';
      }
  
       * @return string
       */
      public function htmllize_file_tree($dir) {
 -        // Hell no we don't want no htmllized file tree.
 -        // Also why on earth is this function on the core renderer???
 -        // debugging('Please do not use $OUTPUT->'.__FUNCTION__.'() when performing maintenance tasks.', DEBUG_DEVELOPER);
          return '';
  
      }
       * @param block_contents $bc
       */
      public function init_block_hider_js(block_contents $bc) {
 -        // Computer says no JavaScript.
 -        // Do nothing, ridiculous method.
 +        // Does nothing.
      }
  
      /**
       * @return string
       */
      public function lang_menu() {
 -        // Computer says no lang menu.
 -        // debugging('Please do not use $OUTPUT->'.__FUNCTION__.'() when performing maintenance tasks.', DEBUG_DEVELOPER);
          return '';
      }
  
       * @return string
       */
      public function login_info($withlinks = null) {
 -        // Computer says no login info.
 -        // debugging('Please do not use $OUTPUT->'.__FUNCTION__.'() when performing maintenance tasks.', DEBUG_DEVELOPER);
          return '';
      }
  
 +    /**
 +     * Secure login info.
 +     *
 +     * @return string
 +     */
 +    public function secure_login_info() {
 +        return $this->login_info(false);
 +    }
 +
      /**
       * Does nothing. The maintenance renderer cannot produce user pictures.
       *
       * @return string
       */
      public function user_picture(stdClass $user, array $options = null) {
 -        // Computer says no user pictures.
 -        // debugging('Please do not use $OUTPUT->'.__FUNCTION__.'() when performing maintenance tasks.', DEBUG_DEVELOPER);
          return '';
      }
  }
diff --combined message/classes/api.php
@@@ -151,10 -151,9 +151,9 @@@ class api 
      /**
       * Handles searching for user in a particular course in the message area.
       *
-      * TODO: This function should be removed once the new group messaging UI is in place and the old messaging UI is removed.
-      * For now we are not removing/deprecating this function for backwards compatibility with messaging UI.
-      * But we are deprecating data_for_messagearea_search_users_in_course external function.
-      * Followup: MDL-63915
+      * TODO: This function should be removed once the related web service goes through final deprecation.
+      * The related web service is data_for_messagearea_search_users_in_course.
+      * Followup: MDL-63261
       *
       * @param int $userid The user id doing the searching
       * @param int $courseid The id of the course we are searching in
      /**
       * Handles searching for user in the message area.
       *
-      * TODO: This function should be removed once the new group messaging UI is in place and the old messaging UI is removed.
-      * For now we are not removing/deprecating this function for backwards compatibility with messaging UI.
-      * But we are deprecating data_for_messagearea_search_users external function.
-      * Followup: MDL-63915
+      * TODO: This function should be removed once the related web service goes through final deprecation.
+      * The related web service is data_for_messagearea_search_users.
+      * Followup: MDL-63261
       *
       * @param int $userid The user id doing the searching
       * @param string $search The string the user is searching
                              $members[$convid][$key]->canmessage = null;
                              $members[$convid][$key]->contactrequests = [];
                          }
 +                    } else { // Remove all members and individual conversations where we could not get the member's information.
 +                        unset($members[$convid][$key]);
 +
 +                        // If the conversation is an individual conversation, then we should remove it from the list.
 +                        if ($conversations[$convid]->conversationtype == self::MESSAGE_CONVERSATION_TYPE_INDIVIDUAL) {
 +                            unset($conversations[$convid]);
 +                        }
                      }
                  }
              }
      /**
       * Returns the contacts to display in the contacts area.
       *
-      * TODO: This function should be removed once the new group messaging UI is in place and the old messaging UI is removed.
-      * For now we are not removing/deprecating this function for backwards compatibility with messaging UI.
-      * Followup: MDL-63915
+      * TODO: This function should be removed once the related web service goes through final deprecation.
+      * The related web service is data_for_messagearea_contacts.
+      * Followup: MDL-63261
       *
       * @param int $userid The user id
       * @param int $limitfrom
      /**
       * Returns the messages to display in the message area.
       *
-      * TODO: This function should be removed once the new group messaging UI is in place and the old messaging UI is removed.
-      * For now we are not removing/deprecating this function for backwards compatibility with messaging UI.
-      * Followup: MDL-63915
+      * TODO: This function should be removed once the related web service goes through final deprecation.
+      * The related web service is data_for_messagearea_messages.
+      * Followup: MDL-63261
       *
       * @param int $userid the current user
       * @param int $otheruserid the other user
      /**
       * Returns the most recent message between two users.
       *
-      * TODO: This function should be removed once the new group messaging UI is in place and the old messaging UI is removed.
-      * For now we are not removing/deprecating this function for backwards compatibility with messaging UI.
-      * Followup: MDL-63915
+      * TODO: This function should be removed once the related web service goes through final deprecation.
+      * The related web service is data_for_messagearea_get_most_recent_message.
+      * Followup: MDL-63261
       *
       * @param int $userid the current user
       * @param int $otheruserid the other user
      /**
       * Returns the profile information for a contact for a user.
       *
-      * TODO: This function should be removed once the new group messaging UI is in place and the old messaging UI is removed.
-      * For now we are not removing/deprecating this function for backwards compatibility with messaging UI.
-      * Followup: MDL-63915
+      * TODO: This function should be removed once the related web service goes through final deprecation.
+      * The related web service is data_for_messagearea_get_profile.
+      * Followup: MDL-63261
       *
       * @param int $userid The user id
       * @param int $otheruserid The id of the user whose profile we want to view.
@@@ -10535,10 -10535,6 +10535,10 @@@ div.editor_atto_toolbar button .icon 
    right: 0 !important;
    /* stylelint-disable-line declaration-no-important */ }
  
 +.overflow-hidden {
 +  overflow: hidden !important;
 +  /* stylelint-disable-line declaration-no-important */ }
 +
  .icon {
    font-size: 16px;
    width: 16px;
    .dashboard-card-deck .dashboard-card .dashboard-card-footer {
      padding: 0.8rem; }
  
 +.dashboard-card-deck.fixed-width-cards .dashboard-card {
 +  width: 300px; }
 +
  @media (min-width: 576px) {
 -  .dashboard-card-deck .dashboard-card {
 +  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      width: calc(50% - 0.5rem); } }
  
  @media (min-width: 840px) {
 -  .dashboard-card-deck .dashboard-card {
 +  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      width: calc(33.33% - 0.5rem); } }
  
  @media (min-width: 1100px) {
 -  .dashboard-card-deck .dashboard-card {
 +  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      width: calc(25% - 0.5rem); } }
  
  @media (min-width: 1360px) {
 -  .dashboard-card-deck .dashboard-card {
 +  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      width: calc(20% - 0.5rem); } }
  
  @media (min-width: 1200px) {
 -  #region-main.has-blocks .dashboard-card-deck .dashboard-card {
 +  #region-main.has-blocks .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      width: calc(33.33% - 0.5rem); } }
  
  @media (min-width: 1470px) {
 -  #region-main.has-blocks .dashboard-card-deck .dashboard-card {
 +  #region-main.has-blocks .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      width: calc(25% - 0.5rem); } }
  
  @media (min-width: 768px) {
 -  body.drawer-open-left .dashboard-card-deck .dashboard-card {
 +  body.drawer-open-left .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      width: calc(100% - 0.5rem); } }
  
  @media (min-width: 861px) {
 -  body.drawer-open-left .dashboard-card-deck .dashboard-card {
 +  body.drawer-open-left .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      width: calc(50% - 0.5rem); } }
  
  @media (min-width: 1122px) {
 -  body.drawer-open-left .dashboard-card-deck .dashboard-card {
 +  body.drawer-open-left .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      width: calc(33.33% - 0.5rem); } }
  
  @media (min-width: 1381px) {
 -  body.drawer-open-left .dashboard-card-deck .dashboard-card {
 +  body.drawer-open-left .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      width: calc(25% - 0.5rem); } }
  
  @media (min-width: 1200px) {
 -  body.drawer-open-left #region-main.has-blocks .dashboard-card-deck .dashboard-card {
 +  body.drawer-open-left #region-main.has-blocks .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      width: calc(100% - 0.5rem); } }
  
  @media (min-width: 1236px) {
 -  body.drawer-open-left #region-main.has-blocks .dashboard-card-deck .dashboard-card {
 +  body.drawer-open-left #region-main.has-blocks .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      width: calc(50% - 0.5rem); } }
  
  @media (min-width: 1497px) {
 -  body.drawer-open-left #region-main.has-blocks .dashboard-card-deck .dashboard-card {
 +  body.drawer-open-left #region-main.has-blocks .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      width: calc(33.33% - 0.5rem); } }
  
  @media (min-width: 1200px) {
 -  #block-region-side-pre .dashboard-card-deck {
 +  #block-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) {
      margin-left: 0;
      margin-right: 0; }
 -    #block-region-side-pre .dashboard-card-deck .dashboard-card {
 +    #block-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
        width: calc(100% - 0.5rem) !important; } }
  
 +.block_recentlyaccessedcourses .paging-bar-container {
 +  margin-top: -2.4rem;
 +  justify-content: flex-end; }
 +
 +@media (max-width: 575.98px) {
 +  .block_recentlyaccessedcourses .paging-bar-container {
 +    margin-top: 0; } }
 +
 +#block-region-side-pre .block_recentlyaccessedcourses .paging-bar-container {
 +  margin-top: 0; }
 +
  .block_recentlyaccesseditems img.icon {
    height: auto;
    width: auto;
@@@ -13370,425 -13352,6 +13370,6 @@@ a.ygtvspacer:hover 
  .hidden {
    display: none; }
  
- .messaging-area-container {
-   margin-bottom: 30px; }
-   .messaging-area-container .status .online-text {
-     display: none;
-     color: #7d7; }
-   .messaging-area-container .status .offline-text {
-     color: #ff6961; }
-   .messaging-area-container .status.online .online-text {
-     display: inherit; }
-   .messaging-area-container .status.online .offline-text {
-     display: none; }
-   .messaging-area-container a,
-   .messaging-area-container .btn.btn-link,
-   .messaging-area-container #page-grade-grading-manage .actions .btn-link.action,
-   #page-grade-grading-manage .actions .messaging-area-container .btn-link.action,
-   .messaging-area-container #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link,
-   #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .messaging-area-container input.btn-link,
-   .messaging-area-container #rubric-rubric.gradingform_rubric .btn-link.addcriterion,
-   #rubric-rubric.gradingform_rubric .messaging-area-container .btn-link.addcriterion {
-     color: #4f94cd; }
-   .messaging-area-container .messaging-area {
-     border: 1px solid #e3e3e3;
-     clear: both; }
-     .messaging-area-container .messaging-area img {
-       max-width: 100%; }
-     .messaging-area-container .messaging-area .contacts-area {
-       border-right: 1px solid #e3e3e3;
-       height: 600px;
-       width: 280px;
-       display: inline-block;
-       box-sizing: border-box; }
-       @media (max-height: 670px) {
-         .messaging-area-container .messaging-area .contacts-area {
-           height: 500px; } }
-       .messaging-area-container .messaging-area .contacts-area.searchfilter .searchtextarea {
-         height: 80px; }
-       .messaging-area-container .messaging-area .contacts-area.searchfilter .searcharea {
-         height: 470px; }
-       .messaging-area-container .messaging-area .contacts-area .searchtextarea {
-         padding: 5px;
-         text-align: center;
-         height: 50px;
-         box-sizing: border-box;
-         line-height: 50px;
-         background-color: #fff;
-         transition: background-color linear 0.2s; }
-         .messaging-area-container .messaging-area .contacts-area .searchtextarea input {
-           height: 28px;
-           line-height: 20px;
-           margin-bottom: 10px;
-           vertical-align: middle;
-           padding: 4px 6px;
-           background-color: #f5f5f5;
-           border: 0;
-           width: 90%;
-           box-shadow: none;
-           transition: background-color linear 0.2s; }
-           .messaging-area-container .messaging-area .contacts-area .searchtextarea input:focus {
-             box-shadow: none; }
-         .messaging-area-container .messaging-area .contacts-area .searchtextarea.searching {
-           background-color: #f5f5f5;
-           transition: background-color linear 0.2s; }
-           .messaging-area-container .messaging-area .contacts-area .searchtextarea.searching input {
-             background-color: #fff;
-             transition: background-color linear 0.2s; }
-         .messaging-area-container .messaging-area .contacts-area .searchtextarea .searchfilterarea {
-           line-height: 20px;
-           cursor: pointer; }
-           .messaging-area-container .messaging-area .contacts-area .searchtextarea .searchfilterarea .searchfilter {
-             float: left; }
-           .messaging-area-container .messaging-area .contacts-area .searchtextarea .searchfilterarea .searchfilterdelete {
-             float: left;
-             margin-left: 5px; }
-       .messaging-area-container .messaging-area .contacts-area .searcharea .heading {
-         text-align: center;
-         border-top: 1px solid black;
-         border-bottom: 1px solid black;
-         font-size: 14px;
-         font-weight: bold; }
-       .messaging-area-container .messaging-area .contacts-area .searcharea .course {
-         text-align: center; }
-         .messaging-area-container .messaging-area .contacts-area .searcharea .course:hover {
-           background-color: #4f94cd;
-           color: #fff;
-           border: none;
-           cursor: pointer; }
-       .messaging-area-container .messaging-area .contacts-area .searcharea .noresults {
-         padding-top: 20px;
-         text-align: center; }
-       .messaging-area-container .messaging-area .contacts-area .contacts {
-         height: 500px;
-         overflow-y: auto;
-         -webkit-overflow-scrolling: touch; }
-         @media (max-height: 670px) {
-           .messaging-area-container .messaging-area .contacts-area .contacts {
-             height: 400px; } }
-         .messaging-area-container .messaging-area .contacts-area .contacts .nocontacts {
-           padding-top: 20px;
-           text-align: center; }
-         .messaging-area-container .messaging-area .contacts-area .contacts .contact {
-           height: 66px;
-           cursor: pointer;
-           border-bottom: 1px solid #e3e3e3;
-           box-sizing: border-box; }
-           .messaging-area-container .messaging-area .contacts-area .contacts .contact.unread {
-             background-color: #f1f1f1; }
-             .messaging-area-container .messaging-area .contacts-area .contacts .contact.unread .picture {
-               border-color: #f1f1f1; }
-             .messaging-area-container .messaging-area .contacts-area .contacts .contact.unread .information {
-               width: 60%; }
-             .messaging-area-container .messaging-area .contacts-area .contacts .contact.unread .unread-count-container {
-               display: inline-block;
-               width: 15%;
-               float: left; }
-           .messaging-area-container .messaging-area .contacts-area .contacts .contact:hover {
-             background-color: #4f94cd;
-             color: #fff;
-             border: none;
-             background-color: #79b5e6; }
-             .messaging-area-container .messaging-area .contacts-area .contacts .contact:hover .information .lastmessage {
-               color: #fff; }
-             .messaging-area-container .messaging-area .contacts-area .contacts .contact:hover .picture {
-               border: none; }
-           .messaging-area-container .messaging-area .contacts-area .contacts .contact.selected {
-             background-color: #4f94cd;
-             color: #fff;
-             border: none; }
-             .messaging-area-container .messaging-area .contacts-area .contacts .contact.selected .information .lastmessage {
-               color: #fff; }
-             .messaging-area-container .messaging-area .contacts-area .contacts .contact.selected .picture {
-               border: none; }
-           .messaging-area-container .messaging-area .contacts-area .contacts .contact .picture {
-             line-height: 66px;
-             text-align: center;
-             height: 66px;
-             border-bottom: 1px solid #fff;
-             width: 25%;
-             float: left;
-             display: inline-block;
-             box-sizing: border-box; }
-             .messaging-area-container .messaging-area .contacts-area .contacts .contact .picture img {
-               border-radius: 50%;
-               height: 54px; }
-           .messaging-area-container .messaging-area .contacts-area .contacts .contact .information {
-             padding: 6px 0;
-             height: 66px;
-             width: 75%;
-             float: left;
-             display: inline-block;
-             box-sizing: border-box; }
-             .messaging-area-container .messaging-area .contacts-area .contacts .contact .information .name {
-               font-weight: bold; }
-               .messaging-area-container .messaging-area .contacts-area .contacts .contact .information .name img {
-                 vertical-align: baseline; }
-             .messaging-area-container .messaging-area .contacts-area .contacts .contact .information .lastmessage {
-               word-wrap: break-word;
-               margin: 0;
-               height: 40px;
-               line-height: 17px;
-               overflow: hidden;
-               text-overflow: ellipsis;
-               white-space: nowrap;
-               color: #a1a1a1;
-               padding-right: 10px; }
-           .messaging-area-container .messaging-area .contacts-area .contacts .contact .unread-count-container {
-             display: none;
-             line-height: 66px;
-             text-align: center;
-             box-sizing: border-box; }
-       .messaging-area-container .messaging-area .contacts-area .tabs {
-         border-top: 1px solid #e3e3e3;
-         height: 50px;
-         box-sizing: border-box; }
-         .messaging-area-container .messaging-area .contacts-area .tabs .tab {
-           cursor: pointer;
-           height: 100%;
-           background-color: #f5f5f5;
-           margin: 0;
-           width: 50%;
-           text-align: center;
-           float: left; }
-           .messaging-area-container .messaging-area .contacts-area .tabs .tab:hover {
-             color: #4f94cd; }
-           .messaging-area-container .messaging-area .contacts-area .tabs .tab .tabimage {
-             height: 30px;
-             line-height: 30px; }
-             .messaging-area-container .messaging-area .contacts-area .tabs .tab .tabimage img {
-               height: 20px; }
-         .messaging-area-container .messaging-area .contacts-area .tabs .tab.selected {
-           color: #4f94cd; }
-     .messaging-area-container .messaging-area .messages-area {
-       width: calc(100% - 280px);
-       height: 600px;
-       box-sizing: border-box;
-       margin: 0;
-       position: relative;
-       float: right; }
-       @media (max-height: 670px) {
-         .messaging-area-container .messaging-area .messages-area {
-           height: 500px; } }
-       .messaging-area-container .messaging-area .messages-area .btn-container {
-         position: absolute;
-         top: 0;
-         left: 0;
-         padding-left: 15px;
-         font-weight: normal; }
-         .messaging-area-container .messaging-area .messages-area .btn-container.view-toggle {
-           display: none; }
-         .messaging-area-container .messaging-area .messages-area .btn-container.delete-all {
-           display: none; }
-       .messaging-area-container .messaging-area .messages-area .profile-header {
-         height: 50px;
-         line-height: 50px;
-         display: none; }
-         .messaging-area-container .messaging-area .messages-area .profile-header .btn-container {
-           display: block; }
-           .messaging-area-container .messaging-area .messages-area .profile-header .btn-container .btn-link {
-             padding: 0;
-             line-height: inherit; }
-       .messaging-area-container .messaging-area .messages-area .profile {
-         padding: 30px;
-         font-size: 16px;
-         height: 600px;
-         box-sizing: border-box;
-         overflow-y: auto;
-         -webkit-overflow-scrolling: touch; }
-         @media (max-height: 670px) {
-           .messaging-area-container .messaging-area .messages-area .profile {
-             height: 500px; } }
-         .messaging-area-container .messaging-area .messages-area .profile .user-container {
-           height: 100px; }
-           .messaging-area-container .messaging-area .messages-area .profile .user-container .profile-picture {
-             border-radius: 50%;
-             max-height: 100px;
-             display: inline-block; }
-           .messaging-area-container .messaging-area .messages-area .profile .user-container .name-container {
-             display: inline-block;
-             vertical-align: top;
-             margin-top: 20px;
-             margin-left: 10px; }
-             .messaging-area-container .messaging-area .messages-area .profile .user-container .name-container .name {
-               font-weight: bold;
-               display: block; }
-             .messaging-area-container .messaging-area .messages-area .profile .user-container .name-container .status {
-               display: block;
-               font-size: 14px; }
-         .messaging-area-container .messaging-area .messages-area .profile .information {
-           margin: 0;
-           display: inline-block;
-           float: right;
-           margin-top: 20px;
-           font-size: 14px;
-           list-style: none; }
-           .messaging-area-container .messaging-area .messages-area .profile .information .name {
-             display: inline-block;
-             font-weight: bold;
-             text-align: right;
-             margin-right: 10px; }
-           .messaging-area-container .messaging-area .messages-area .profile .information .value {
-             display: inline-block; }
-         .messaging-area-container .messaging-area .messages-area .profile .actions {
-           padding-top: 80px; }
-           .messaging-area-container .messaging-area .messages-area .profile .actions .separator {
-             border-bottom: 1px solid #e3e3e3;
-             margin-bottom: 20px;
-             padding-bottom: 5px; }
-             .messaging-area-container .messaging-area .messages-area .profile .actions .separator a.danger {
-               color: #ff6961; }
-       .messaging-area-container .messaging-area .messages-area .messages-header {
-         height: 50px;
-         font-weight: bold;
-         line-height: 50px;
-         box-sizing: border-box;
-         border-bottom: 1px solid #e3e3e3;
-         text-align: center;
-         position: relative; }
-         .messaging-area-container .messaging-area .messages-area .messages-header .btn-link {
-           padding: 0;
-           line-height: inherit; }
-         .messaging-area-container .messaging-area .messages-area .messages-header .delete-instructions {
-           display: none; }
-         .messaging-area-container .messaging-area .messages-area .messages-header .name-container {
-           padding-top: 9px;
-           display: inline-block; }
-           .messaging-area-container .messaging-area .messages-area .messages-header .name-container .name {
-             line-height: 20px; }
-           .messaging-area-container .messaging-area .messages-area .messages-header .name-container .status {
-             line-height: 12px;
-             font-size: 12px;
-             font-weight: normal; }
-         .messaging-area-container .messaging-area .messages-area .messages-header .actions {
-           position: absolute;
-           top: 0;
-           right: 0;
-           padding-right: 15px;
-           font-weight: normal; }
-           .messaging-area-container .messaging-area .messages-area .messages-header .actions .cancel-messages-delete {
-             display: none; }
-       .messaging-area-container .messaging-area .messages-area .messages {
-         height: 500px;
-         overflow-y: auto;
-         overflow-x: hidden;
-         -webkit-overflow-scrolling: touch;
-         box-sizing: border-box;
-         padding: 20px; }
-         @media (max-height: 670px) {
-           .messaging-area-container .messaging-area .messages-area .messages {
-             height: 400px; } }
-         .messaging-area-container .messaging-area .messages-area .messages .blocktime {
-           clear: both;
-           text-align: center;
-           color: #a1a1a1;
-           font-size: 12px;
-           margin: 5px 0; }
-         .messaging-area-container .messaging-area .messages-area .messages .message .deletemessagecheckbox {
-           display: none;
-           text-align: center;
-           padding-top: 5px; }
-         .messaging-area-container .messaging-area .messages-area .messages .message .content {
-           border: 1px solid #e3e3e3;
-           padding: 10px;
-           margin-bottom: 5px;
-           font-size: 12px;
-           word-wrap: break-word;
-           max-width: 55%;
-           position: relative; }
-           .messaging-area-container .messaging-area .messages-area .messages .message .content .text {
-             display: block; }
-             .messaging-area-container .messaging-area .messages-area .messages .message .content .text p {
-               margin: 0; }
-           .messaging-area-container .messaging-area .messages-area .messages .message .content .timesent {
-             font-size: 10px;
-             color: #a1a1a1;
-             float: right; }
-         .messaging-area-container .messaging-area .messages-area .messages .message .content.left {
-           margin-left: auto; }
-         .messaging-area-container .messaging-area .messages-area .messages .message .content.right {
-           margin-right: auto; }
-       .messaging-area-container .messaging-area .messages-area .response {
-         display: table;
-         padding: 10px 10px 9px;
-         position: absolute;
-         bottom: 0;
-         left: 0;
-         width: 100%;
-         line-height: 28px;
-         text-align: center;
-         border-top: 1px solid #e3e3e3;
-         box-sizing: border-box;
-         background-color: #fff;
-         transition: background-color linear 0.2s; }
-         .messaging-area-container .messaging-area .messages-area .response .delete-confirmation {
-           display: none; }
-           .messaging-area-container .messaging-area .messages-area .response .delete-confirmation .btn.btn-link.confirm, .messaging-area-container .messaging-area .messages-area .response .delete-confirmation #page-grade-grading-manage .actions .btn-link.confirm.action, #page-grade-grading-manage .actions .messaging-area-container .messaging-area .messages-area .response .delete-confirmation .btn-link.confirm.action, .messaging-area-container .messaging-area .messages-area .response .delete-confirmation #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.confirm, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .messaging-area-container .messaging-area .messages-area .response .delete-confirmation input.btn-link.confirm, .messaging-area-container .messaging-area .messages-area .response .delete-confirmation #rubric-rubric.gradingform_rubric .btn-link.confirm.addcriterion, #rubric-rubric.gradingform_rubric .messaging-area-container .messaging-area .messages-area .response .delete-confirmation .btn-link.confirm.addcriterion {
-             border: 1px solid #4f94cd;
-             height: 30px; }
-             .messaging-area-container .messaging-area .messages-area .response .delete-confirmation .btn.btn-link.confirm:hover, .messaging-area-container .messaging-area .messages-area .response .delete-confirmation #page-grade-grading-manage .actions .btn-link.confirm.action:hover, #page-grade-grading-manage .actions .messaging-area-container .messaging-area .messages-area .response .delete-confirmation .btn-link.confirm.action:hover, .messaging-area-container .messaging-area .messages-area .response .delete-confirmation #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.confirm:hover, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .messaging-area-container .messaging-area .messages-area .response .delete-confirmation input.btn-link.confirm:hover, .messaging-area-container .messaging-area .messages-area .response .delete-confirmation #rubric-rubric.gradingform_rubric .btn-link.confirm.addcriterion:hover, #rubric-rubric.gradingform_rubric .messaging-area-container .messaging-area .messages-area .response .delete-confirmation .btn-link.confirm.addcriterion:hover {
-               background-color: #4f94cd;
-               color: #fff;
-               text-shadow: none; }
-         .messaging-area-container .messaging-area .messages-area .response .message-box {
-           display: table-row; }
-           .messaging-area-container .messaging-area .messages-area .response .message-box .message-text-container {
-             display: table-cell; }
-             .messaging-area-container .messaging-area .messages-area .response .message-box .message-text-container textarea {
-               line-height: 20px;
-               padding: 4px 6px;
-               vertical-align: middle;
-               width: 100%;
-               margin: 0;
-               resize: none;
-               border: none;
-               box-shadow: none;
-               box-sizing: border-box;
-               background-color: #f5f5f5;
-               transition: background-color linear 0.2s; }
-               .messaging-area-container .messaging-area .messages-area .response .message-box .message-text-container textarea:focus {
-                 box-shadow: none; }
-           .messaging-area-container .messaging-area .messages-area .response .message-box .send-button-container {
-             display: table-cell;
-             width: 1px; }
-             .messaging-area-container .messaging-area .messages-area .response .message-box .send-button-container button {
-               height: 30px; }
-         .messaging-area-container .messaging-area .messages-area .response.messaging {
-           background-color: #f5f5f5;
-           transition: background-color linear 0.2s; }
-           .messaging-area-container .messaging-area .messages-area .response.messaging .message-box .message-text-container textarea {
-             background-color: #fff;
-             transition: background-color linear 0.2s; }
-       .messaging-area-container .messaging-area .messages-area.editing .messages-header .btn-container.view-all {
-         display: none; }
-       .messaging-area-container .messaging-area .messages-area.editing .messages-header .btn-container.delete-all {
-         display: block; }
-       .messaging-area-container .messaging-area .messages-area.editing .messages-header .delete-instructions {
-         display: block; }
-       .messaging-area-container .messaging-area .messages-area.editing .messages-header .name-container {
-         display: none; }
-       .messaging-area-container .messaging-area .messages-area.editing .messages-header .actions .messages-delete {
-         display: none; }
-       .messaging-area-container .messaging-area .messages-area.editing .messages-header .actions .cancel-messages-delete {
-         display: block; }
-       .messaging-area-container .messaging-area .messages-area.editing .messages .message {
-         cursor: pointer; }
-         .messaging-area-container .messaging-area .messages-area.editing .messages .message[aria-checked="true"] .content {
-           background-color: #4f94cd;
-           border-color: #4f94cd;
-           color: #fff; }
-           .messaging-area-container .messaging-area .messages-area.editing .messages .message[aria-checked="true"] .content .timesent {
-             color: #fff; }
-         .messaging-area-container .messaging-area .messages-area.editing .messages .message[aria-checked="false"] .content:hover {
-           background-color: #79b5e6;
-           color: #fff; }
-           .messaging-area-container .messaging-area .messages-area.editing .messages .message[aria-checked="false"] .content:hover .timesent {
-             color: #fff; }
-       .messaging-area-container .messaging-area .messages-area.editing .response .delete-confirmation {
-         display: block; }
-       .messaging-area-container .messaging-area .messages-area.editing .response .message-box {
-         display: none; }
  .preferences-container .container-fluid {
    padding: 0; }
    .preferences-container .container-fluid .span6 {
          display: none; }
  
  @media (max-width: 979px) {
-   .messaging-area-container .messaging-area {
-     position: relative;
-     overflow: hidden;
-     height: 600px; } }
-   @media (max-width: 979px) and (max-height: 670px) {
-     .messaging-area-container .messaging-area {
-       height: 500px; } }
- @media (max-width: 979px) {
-     .messaging-area-container .messaging-area .messages-area .messages-header .btn-container.view-toggle {
-       display: block; }
-     .messaging-area-container .messaging-area .messages-area .messages-header .btn-container.delete-all {
-       display: none; }
-     .messaging-area-container .messaging-area .messages-area .profile-header {
-       display: block; }
-     .messaging-area-container .messaging-area .messages-area .profile {
-       height: 550px; }
-     .messaging-area-container .messaging-area .messages-area.editing .messages-header .btn-container.view-toggle {
-       display: none; }
-     .messaging-area-container .messaging-area .messages-area.editing .messages-header .btn-container.delete-all {
-       display: block; }
-     .messaging-area-container .messaging-area .contacts-area {
-       width: 100%;
-       border-right: none;
-       position: absolute;
-       top: 0;
-       left: 0;
-       right: auto;
-       bottom: auto; }
-     .messaging-area-container .messaging-area .messages-area {
-       width: 100%;
-       position: absolute;
-       top: 0;
-       left: auto;
-       right: 0;
-       bottom: auto; }
-     .messaging-area-container .messaging-area.show-messages .contacts-area {
-       left: -100%;
-       opacity: 0;
-       visibility: hidden;
-       transition: left 0.25s, opacity 0.25s, visibility 0.25s; }
-     .messaging-area-container .messaging-area.show-messages .messages-area {
-       right: 0;
-       opacity: 1;
-       visibility: visible;
-       transition: right 0.25s, opacity 0.25s, visibility 0.25s; }
-     .messaging-area-container .messaging-area.hide-messages .contacts-area {
-       left: 0;
-       opacity: 1;
-       visibility: visible;
-       transition: left 0.25s, opacity 0.25s, visibility 0.25s; }
-       .messaging-area-container .messaging-area.hide-messages .contacts-area .contact.selected {
-         background-color: inherit;
-         color: inherit;
-         border-bottom: 1px solid #e3e3e3; }
-         .messaging-area-container .messaging-area.hide-messages .contacts-area .contact.selected:hover {
-           background-color: #4f94cd;
-           color: #fff;
-           border: none;
-           background-color: #79b5e6; }
-           .messaging-area-container .messaging-area.hide-messages .contacts-area .contact.selected:hover .information .lastmessage {
-             color: #fff; }
-           .messaging-area-container .messaging-area.hide-messages .contacts-area .contact.selected:hover .picture {
-             border: none; }
-         .messaging-area-container .messaging-area.hide-messages .contacts-area .contact.selected .picture {
-           border-bottom: 1px solid #fff; }
-         .messaging-area-container .messaging-area.hide-messages .contacts-area .contact.selected .information .lastmessage {
-           color: #a1a1a1; }
-     .messaging-area-container .messaging-area.hide-messages .messages-area {
-       right: -100%;
-       opacity: 0;
-       visibility: hidden;
-       transition: right 0.25s, opacity 0.25s, visibility 0.25s; }
    .notification-area {
      position: relative;
      overflow: hidden; }
        visibility: visible;
        transition: right 0.25s; } }
  
- .message-drawer {
-   position: fixed;
-   top: 50px;
-   right: 0;
-   height: calc(100% - 50px);
-   width: 320px;
-   z-index: 1020;
-   box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.08);
+ .message-app {
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease-in-out; }
-   .message-drawer.hidden {
+   .message-app.drawer {
+     z-index: 1020;
+     position: fixed;
+     top: 50px;
+     right: 0;
+     height: calc(100% - 50px);
+     width: 320px;
+     box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.08); }
+     .message-app.drawer .body-container > * {
+       position: absolute; }
+   .message-app.main {
+     height: 768px; }
+   .message-app.hidden {
      display: block;
      right: -320px; }
-   .message-drawer .header-container {
+   .message-app .header-container {
      flex-shrink: 0; }
-   .message-drawer .body-container {
+   .message-app .body-container {
      flex: 1;
      overflow: hidden; }
-     .message-drawer .body-container > * {
-       position: absolute;
+     .message-app .body-container > * {
        right: 0;
        left: 0;
        top: 0;
        bottom: 0; }
-   .message-drawer .footer-container {
+   .message-app .footer-container {
      flex-shrink: 0;
      overflow-x: hidden; }
-   .message-drawer .matchtext {
+   .message-app .matchtext {
      background-color: #b5d9f9;
      color: #373a3c;
      height: 1.5rem; }
-   .message-drawer .contact-status {
+   .message-app .contact-status {
      position: absolute;
      left: 39px;
      top: 39px;
      width: 10px;
      height: 10px;
      border-radius: 50%; }
-     .message-drawer .contact-status.online {
+     .message-app .contact-status.online {
        border: 1px solid #fff;
        background-color: #5cb85c; }
-   .message-drawer .message p {
+   .message-app .message p {
      margin: 0; }
-   .message-drawer .clickable {
+   .message-app .clickable {
      cursor: pointer; }
-     .message-drawer .clickable:hover {
+     .message-app .clickable:hover {
        box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.05), 3px 3px 5px -2px rgba(0, 0, 0, 0.1), 1px 1px 5px 0 rgba(0, 0, 0, 0.03); }
-   .message-drawer a,
-   .message-drawer .btn-link {
+   .message-app a,
+   .message-app .btn-link {
      color: inherit; }
-   .message-drawer .btn-link:hover, .message-drawer .btn-link:focus {
+   .message-app .btn-link:hover, .message-app .btn-link:focus {
      background-color: rgba(0, 0, 0, 0.035);
      text-decoration: none; }
-   .message-drawer .icon {
+   .message-app .icon {
      margin-right: 0; }
-   .message-drawer .overview-section-toggle .collapsed-icon-container {
+   .message-app .overview-section-toggle .collapsed-icon-container {
      display: none; }
-   .message-drawer .overview-section-toggle .expanded-icon-container {
+   .message-app .overview-section-toggle .expanded-icon-container {
      display: inline-block; }
-   .message-drawer .overview-section-toggle.collapsed .collapsed-icon-container {
+   .message-app .overview-section-toggle.collapsed .collapsed-icon-container {
      display: inline-block; }
-   .message-drawer .overview-section-toggle.collapsed .expanded-icon-container {
+   .message-app .overview-section-toggle.collapsed .expanded-icon-container {
      display: none; }
-   .message-drawer .btn.btn-link.btn-icon, .message-drawer #page-grade-grading-manage .actions .btn-link.btn-icon.action, #page-grade-grading-manage .actions .message-drawer .btn-link.btn-icon.action, .message-drawer #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .message-drawer input.btn-link.btn-icon, .message-drawer #rubric-rubric.gradingform_rubric .btn-link.btn-icon.addcriterion, #rubric-rubric.gradingform_rubric .message-drawer .btn-link.btn-icon.addcriterion {
+   .message-app .btn.btn-link.btn-icon, .message-app #page-grade-grading-manage .actions .btn-link.btn-icon.action, #page-grade-grading-manage .actions .message-app .btn-link.btn-icon.action, .message-app #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .message-app input.btn-link.btn-icon, .message-app #rubric-rubric.gradingform_rubric .btn-link.btn-icon.addcriterion, #rubric-rubric.gradingform_rubric .message-app .btn-link.btn-icon.addcriterion {
      height: 16px;
      width: 16px;
      padding: 0;
      border-radius: 50%;
      flex-shrink: 0; }
-     .message-drawer .btn.btn-link.btn-icon:hover, .message-drawer #page-grade-grading-manage .actions .btn-link.btn-icon.action:hover, #page-grade-grading-manage .actions .message-drawer .btn-link.btn-icon.action:hover, .message-drawer #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon:hover, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .message-drawer input.btn-link.btn-icon:hover, .message-drawer #rubric-rubric.gradingform_rubric .btn-link.btn-icon.addcriterion:hover, #rubric-rubric.gradingform_rubric .message-drawer .btn-link.btn-icon.addcriterion:hover, .message-drawer .btn.btn-link.btn-icon:focus, .message-drawer #page-grade-grading-manage .actions .btn-link.btn-icon.action:focus, #page-grade-grading-manage .actions .message-drawer .btn-link.btn-icon.action:focus, .message-drawer #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon:focus, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .message-drawer input.btn-link.btn-icon:focus, .message-drawer #rubric-rubric.gradingform_rubric .btn-link.btn-icon.addcriterion:focus, #rubric-rubric.gradingform_rubric .message-drawer .btn-link.btn-icon.addcriterion:focus {
+     .message-app .btn.btn-link.btn-icon:hover, .message-app #page-grade-grading-manage .actions .btn-link.btn-icon.action:hover, #page-grade-grading-manage .actions .message-app .btn-link.btn-icon.action:hover, .message-app #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon:hover, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .message-app input.btn-link.btn-icon:hover, .message-app #rubric-rubric.gradingform_rubric .btn-link.btn-icon.addcriterion:hover, #rubric-rubric.gradingform_rubric .message-app .btn-link.btn-icon.addcriterion:hover, .message-app .btn.btn-link.btn-icon:focus, .message-app #page-grade-grading-manage .actions .btn-link.btn-icon.action:focus, #page-grade-grading-manage .actions .message-app .btn-link.btn-icon.action:focus, .message-app #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon:focus, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .message-app input.btn-link.btn-icon:focus, .message-app #rubric-rubric.gradingform_rubric .btn-link.btn-icon.addcriterion:focus, #rubric-rubric.gradingform_rubric .message-app .btn-link.btn-icon.addcriterion:focus {
        background-color: #e9ecef; }
-     .message-drawer .btn.btn-link.btn-icon.icon-size-0, .message-drawer #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-0.action, #page-grade-grading-manage .actions .message-drawer .btn-link.btn-icon.icon-size-0.action, .message-drawer #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-0, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .message-drawer input.btn-link.btn-icon.icon-size-0, .message-drawer #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-0.addcriterion, #rubric-rubric.gradingform_rubric .message-drawer .btn-link.btn-icon.icon-size-0.addcriterion {
+     .message-app .btn.btn-link.btn-icon.icon-size-0, .message-app #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-0.action, #page-grade-grading-manage .actions .message-app .btn-link.btn-icon.icon-size-0.action, .message-app #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-0, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .message-app input.btn-link.btn-icon.icon-size-0, .message-app #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-0.addcriterion, #rubric-rubric.gradingform_rubric .message-app .btn-link.btn-icon.icon-size-0.addcriterion {
        height: 20px !important;
        /* stylelint-disable-line declaration-no-important */
        width: 20px !important;
        /* stylelint-disable-line declaration-no-important */ }
-     .message-drawer .btn.btn-link.btn-icon.icon-size-1, .message-drawer #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-1.action, #page-grade-grading-manage .actions .message-drawer .btn-link.btn-icon.icon-size-1.action, .message-drawer #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-1, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .message-drawer input.btn-link.btn-icon.icon-size-1, .message-drawer #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-1.addcriterion, #rubric-rubric.gradingform_rubric .message-drawer .btn-link.btn-icon.icon-size-1.addcriterion {
+     .message-app .btn.btn-link.btn-icon.icon-size-1, .message-app #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-1.action, #page-grade-grading-manage .actions .message-app .btn-link.btn-icon.icon-size-1.action, .message-app #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-1, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .message-app input.btn-link.btn-icon.icon-size-1, .message-app #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-1.addcriterion, #rubric-rubric.gradingform_rubric .message-app .btn-link.btn-icon.icon-size-1.addcriterion {
        height: 24px !important;
        /* stylelint-disable-line declaration-no-important */
        width: 24px !important;
        /* stylelint-disable-line declaration-no-important */ }
-     .message-drawer .btn.btn-link.btn-icon.icon-size-2, .message-drawer #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-2.action, #page-grade-grading-manage .actions .message-drawer .btn-link.btn-icon.icon-size-2.action, .message-drawer #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-2, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .message-drawer input.btn-link.btn-icon.icon-size-2, .message-drawer #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-2.addcriterion, #rubric-rubric.gradingform_rubric .message-drawer .btn-link.btn-icon.icon-size-2.addcriterion {
+     .message-app .btn.btn-link.btn-icon.icon-size-2, .message-app #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-2.action, #page-grade-grading-manage .actions .message-app .btn-link.btn-icon.icon-size-2.action, .message-app #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-2, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .message-app input.btn-link.btn-icon.icon-size-2, .message-app #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-2.addcriterion, #rubric-rubric.gradingform_rubric .message-app .btn-link.btn-icon.icon-size-2.addcriterion {
        height: 28px !important;
        /* stylelint-disable-line declaration-no-important */
        width: 28px !important;
        /* stylelint-disable-line declaration-no-important */ }
-     .message-drawer .btn.btn-link.btn-icon.icon-size-3, .message-drawer #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-3.action, #page-grade-grading-manage .actions .message-drawer .btn-link.btn-icon.icon-size-3.action, .message-drawer #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-3, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .message-drawer input.btn-link.btn-icon.icon-size-3, .message-drawer #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-3.addcriterion, #rubric-rubric.gradingform_rubric .message-drawer .btn-link.btn-icon.icon-size-3.addcriterion {
+     .message-app .btn.btn-link.btn-icon.icon-size-3, .message-app #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-3.action, #page-grade-grading-manage .actions .message-app .btn-link.btn-icon.icon-size-3.action, .message-app #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-3, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .message-app input.btn-link.btn-icon.icon-size-3, .message-app #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-3.addcriterion, #rubric-rubric.gradingform_rubric .message-app .btn-link.btn-icon.icon-size-3.addcriterion {
        height: 36px !important;
        /* stylelint-disable-line declaration-no-important */
        width: 36px !important;
        /* stylelint-disable-line declaration-no-important */ }
-     .message-drawer .btn.btn-link.btn-icon.icon-size-4, .message-drawer #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-4.action, #page-grade-grading-manage .actions .message-drawer .btn-link.btn-icon.icon-size-4.action, .message-drawer #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-4, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .message-drawer input.btn-link.btn-icon.icon-size-4, .message-drawer #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-4.addcriterion, #rubric-rubric.gradingform_rubric .message-drawer .btn-link.btn-icon.icon-size-4.addcriterion {
+     .message-app .btn.btn-link.btn-icon.icon-size-4, .message-app #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-4.action, #page-grade-grading-manage .actions .message-app .btn-link.btn-icon.icon-size-4.action, .message-app #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-4, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .message-app input.btn-link.btn-icon.icon-size-4, .message-app #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-4.addcriterion, #rubric-rubric.gradingform_rubric .message-app .btn-link.btn-icon.icon-size-4.addcriterion {
        height: 44px !important;
        /* stylelint-disable-line declaration-no-important */
        width: 44px !important;
        /* stylelint-disable-line declaration-no-important */ }
-     .message-drawer .btn.btn-link.btn-icon.icon-size-5, .message-drawer #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-5.action, #page-grade-grading-manage .actions .message-drawer .btn-link.btn-icon.icon-size-5.action, .message-drawer #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-5, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .message-drawer input.btn-link.btn-icon.icon-size-5, .message-drawer #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-5.addcriterion, #rubric-rubric.gradingform_rubric .message-drawer .btn-link.btn-icon.icon-size-5.addcriterion {
+     .message-app .btn.btn-link.btn-icon.icon-size-5, .message-app #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-5.action, #page-grade-grading-manage .actions .message-app .btn-link.btn-icon.icon-size-5.action, .message-app #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-5, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .message-app input.btn-link.btn-icon.icon-size-5, .message-app #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-5.addcriterion, #rubric-rubric.gradingform_rubric .message-app .btn-link.btn-icon.icon-size-5.addcriterion {
        height: 68px !important;
        /* stylelint-disable-line declaration-no-important */
        width: 68px !important;
        /* stylelint-disable-line declaration-no-important */ }
-   .message-drawer .view-overview-body .section {
+   .message-app .view-overview-body .section {
      display: block; }
-     .message-drawer .view-overview-body .section.expanded {
+     .message-app .view-overview-body .section.expanded {
        display: flex; }
-   .message-drawer .view-conversation .content-message-container img {
+   .message-app .view-conversation .content-message-container img {
      max-width: 100%; }
-   .message-drawer .list-group .list-group-item {
+   .message-app .list-group .list-group-item {
      border-left: 0;
      border-right: 0; }
-     .message-drawer .list-group .list-group-item:first-child {
+     .message-app .list-group .list-group-item:first-child {
        border-top: 0; }
-     .message-drawer .list-group .list-group-item:last-child {
+     .message-app .list-group .list-group-item:last-child {
        border-bottom: 0; }
-   .message-drawer .last-message {
+   .message-app .last-message {
      min-height: 1.5rem; }
-   .message-drawer .section .collapsing {
+   .message-app .section .collapsing {
      overflow: hidden; }
-   .message-drawer .lazy-load-list {
+   .message-app .lazy-load-list {
      overflow-y: auto; }
  
  .dir-rtl .message-drawer {
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.08); }
  
- @media (max-width: 480px) {
-   .messaging-area-container .messaging-area .messages-area.editing .messages-header {
-     height: 80px; }
-     .messaging-area-container .messaging-area .messages-area.editing .messages-header .delete-all {
-       top: 30px; }
-     .messaging-area-container .messaging-area .messages-area.editing .messages-header .actions {
-       top: 30px; }
-   .messaging-area-container .messaging-area .messages-area.editing .messages {
-     height: 470px; } }
  /* Question */
  .questionbank h2 {
    margin-top: 0; }
@@@ -4831,10 -4831,6 +4831,10 @@@ h3.sectionname .inplaceeditable.inplace
    right: 0 !important;
    /* stylelint-disable-line declaration-no-important */
  }
 +.overflow-hidden {
 +  overflow: hidden !important;
 +  /* stylelint-disable-line declaration-no-important */
 +}
  /* admin.less */
  .formtable tbody th {
    font-weight: normal;
@@@ -5248,12 -5244,10 +5248,12 @@@ img.iconsmall 
  .adminsettingsflags label {
    margin-right: 7px;
  }
 -.form-description {
 +.form-description,
 +.form-dependenton {
    clear: right;
  }
  .form-description pre,
 +.form-dependenton pre,
  .formsettingheading pre {
    /* Code examples should be left aligned. */
    /*rtl:ignore*/
@@@ -8177,530 -8171,6 +8177,6 @@@ a.ygtvspacer:hover 
    padding-left: 5px;
  }
  /** The message area **/
- .messaging-area-container {
-   margin-bottom: 30px;
- }
- .messaging-area-container .status .online-text {
-   display: none;
-   color: #7d7;
- }
- .messaging-area-container .status .offline-text {
-   color: #ff6961;
- }
- .messaging-area-container .status.online .online-text {
-   display: inherit;
- }
- .messaging-area-container .status.online .offline-text {
-   display: none;
- }
- .messaging-area-container a,
- .messaging-area-container .btn.btn-link {
-   color: #4f94cd;
- }
- .messaging-area-container .messaging-area {
-   border: 1px solid #e3e3e3;
-   clear: both;
-   border-radius: 4px;
- }
- .messaging-area-container .messaging-area img {
-   max-width: 100%;
- }
- .messaging-area-container .messaging-area .contacts-area {
-   border-right: 1px solid #e3e3e3;
-   height: 600px;
-   width: 280px;
-   display: inline-block;
-   box-sizing: border-box;
- }
- @media (max-height: 670px) {
-   .messaging-area-container .messaging-area .contacts-area {
-     height: 500px;
-   }
- }
- .messaging-area-container .messaging-area .contacts-area.searchfilter .searchtextarea {
-   height: 80px;
- }
- .messaging-area-container .messaging-area .contacts-area.searchfilter .searcharea {
-   height: 470px;
- }
- .messaging-area-container .messaging-area .contacts-area .searchtextarea {
-   padding: 5px;
-   text-align: center;
-   height: 50px;
-   box-sizing: border-box;
-   line-height: 50px;
-   background-color: #fff;
-   transition: background-color linear 0.2s;
- }
- .messaging-area-container .messaging-area .contacts-area .searchtextarea input {
-   background-color: #f5f5f5;
-   border: 0;
-   width: 90%;
-   box-shadow: none;
-   transition: background-color linear 0.2s;
- }
- .messaging-area-container .messaging-area .contacts-area .searchtextarea input:focus {
-   box-shadow: none;
- }
- .messaging-area-container .messaging-area .contacts-area .searchtextarea.searching {
-   background-color: #f5f5f5;
-   transition: background-color linear 0.2s;
- }
- .messaging-area-container .messaging-area .contacts-area .searchtextarea.searching input {
-   background-color: #fff;
-   transition: background-color linear 0.2s;
- }
- .messaging-area-container .messaging-area .contacts-area .searchtextarea .searchfilterarea {
-   line-height: 20px;
-   cursor: pointer;
- }
- .messaging-area-container .messaging-area .contacts-area .searchtextarea .searchfilterarea .searchfilter {
-   float: left;
- }
- .messaging-area-container .messaging-area .contacts-area .searchtextarea .searchfilterarea .searchfilterdelete {
-   float: left;
-   margin-left: 5px;
- }
- .messaging-area-container .messaging-area .contacts-area .searcharea .heading {
-   text-align: center;
-   border-top: 1px solid black;
-   border-bottom: 1px solid black;
-   font-size: 14px;
-   font-weight: bold;
- }
- .messaging-area-container .messaging-area .contacts-area .searcharea .course {
-   text-align: center;
- }
- .messaging-area-container .messaging-area .contacts-area .searcharea .course:hover {
-   background-color: #4f94cd;
-   color: #fff;
-   border: none;
-   cursor: pointer;
- }
- .messaging-area-container .messaging-area .contacts-area .searcharea .noresults {
-   padding-top: 20px;
-   text-align: center;
- }
- .messaging-area-container .messaging-area .contacts-area .contacts {
-   height: 500px;
-   overflow-y: auto;
-   -webkit-overflow-scrolling: touch;
- }
- @media (max-height: 670px) {
-   .messaging-area-container .messaging-area .contacts-area .contacts {
-     height: 400px;
-   }
- }
- .messaging-area-container .messaging-area .contacts-area .contacts .nocontacts {
-   padding-top: 20px;
-   text-align: center;
- }
- .messaging-area-container .messaging-area .contacts-area .contacts .contact {
-   height: 66px;
-   cursor: pointer;
-   border-bottom: 1px solid #e3e3e3;
-   box-sizing: border-box;
- }
- .messaging-area-container .messaging-area .contacts-area .contacts .contact.unread {
-   background-color: #f1f1f1;
- }
- .messaging-area-container .messaging-area .contacts-area .contacts .contact.unread .picture {
-   border-color: #f1f1f1;
- }
- .messaging-area-container .messaging-area .contacts-area .contacts .contact.unread .information {
-   width: 60%;
- }
- .messaging-area-container .messaging-area .contacts-area .contacts .contact.unread .unread-count-container {
-   display: inline-block;
-   width: 15%;
-   float: left;
- }
- .messaging-area-container .messaging-area .contacts-area .contacts .contact:hover {
-   background-color: #4f94cd;
-   color: #fff;
-   border: none;
-   background-color: #79b5e6;
- }
- .messaging-area-container .messaging-area .contacts-area .contacts .contact:hover .information .lastmessage {
-   color: #fff;
- }
- .messaging-area-container .messaging-area .contacts-area .contacts .contact:hover .picture {
-   border: none;
- }
- .messaging-area-container .messaging-area .contacts-area .contacts .contact.selected {
-   background-color: #4f94cd;
-   color: #fff;
-   border: none;
- }
- .messaging-area-container .messaging-area .contacts-area .contacts .contact.selected .information .lastmessage {
-   color: #fff;
- }
- .messaging-area-container .messaging-area .contacts-area .contacts .contact.selected .picture {
-   border: none;
- }
- .messaging-area-container .messaging-area .contacts-area .contacts .contact .picture {
-   line-height: 66px;
-   text-align: center;
-   height: 66px;
-   border-bottom: 1px solid #fff;
-   width: 25%;
-   float: left;
-   display: inline-block;
-   box-sizing: border-box;
- }
- .messaging-area-container .messaging-area .contacts-area .contacts .contact .picture img {
-   border-radius: 50%;
-   height: 54px;
- }
- .messaging-area-container .messaging-area .contacts-area .contacts .contact .information {
-   padding: 6px 0;
-   height: 66px;
-   width: 75%;
-   float: left;
-   display: inline-block;
-   box-sizing: border-box;
- }
- .messaging-area-container .messaging-area .contacts-area .contacts .contact .information .name {
-   font-weight: bold;
- }
- .messaging-area-container .messaging-area .contacts-area .contacts .contact .information .name img {
-   vertical-align: baseline;
- }
- .messaging-area-container .messaging-area .contacts-area .contacts .contact .information .lastmessage {
-   word-wrap: break-word;
-   margin: 0;
-   height: 40px;
-   line-height: 17px;
-   overflow: hidden;
-   text-overflow: ellipsis;
-   white-space: nowrap;
-   color: #a1a1a1;
-   padding-right: 10px;
- }
- .messaging-area-container .messaging-area .contacts-area .contacts .contact .unread-count-container {
-   display: none;
-   line-height: 66px;
-   text-align: center;
-   box-sizing: border-box;
- }
- .messaging-area-container .messaging-area .contacts-area .tabs {
-   border-top: 1px solid #e3e3e3;
-   height: 50px;
-   box-sizing: border-box;
- }
- .messaging-area-container .messaging-area .contacts-area .tabs .tab {
-   cursor: pointer;
-   height: 100%;
-   background-color: #f5f5f5;
-   margin: 0;
-   width: 50%;
-   text-align: center;
-   float: left;
- }
- .messaging-area-container .messaging-area .contacts-area .tabs .tab:hover {
-   color: #4f94cd;
- }
- .messaging-area-container .messaging-area .contacts-area .tabs .tab .tabimage {
-   height: 30px;
-   line-height: 30px;
- }
- .messaging-area-container .messaging-area .contacts-area .tabs .tab .tabimage img {
-   height: 20px;
- }
- .messaging-area-container .messaging-area .contacts-area .tabs .tab.selected {
-   color: #4f94cd;
- }
- .messaging-area-container .messaging-area .messages-area {
-   width: calc(100% - 280px);
-   height: 600px;
-   box-sizing: border-box;
-   margin: 0;
-   position: relative;
-   float: right;
- }
- @media (max-height: 670px) {
-   .messaging-area-container .messaging-area .messages-area {
-     height: 500px;
-   }
- }
- .messaging-area-container .messaging-area .messages-area .btn-container {
-   position: absolute;
-   top: 0;
-   left: 0;
-   padding-left: 15px;
-   font-weight: normal;
- }
- .messaging-area-container .messaging-area .messages-area .btn-container.view-toggle {
-   display: none;
- }
- .messaging-area-container .messaging-area .messages-area .btn-container.delete-all {
-   display: none;
- }
- .messaging-area-container .messaging-area .messages-area .profile-header {
-   height: 50px;
-   line-height: 50px;
-   display: none;
- }
- .messaging-area-container .messaging-area .messages-area .profile-header .btn-container {
-   display: block;
- }
- .messaging-area-container .messaging-area .messages-area .profile-header .btn-container .btn-link {
-   padding: 0;
-   line-height: inherit;
- }
- .messaging-area-container .messaging-area .messages-area .profile {
-   padding: 30px;
-   font-size: 16px;
-   height: 600px;
-   box-sizing: border-box;
-   overflow-y: auto;
-   -webkit-overflow-scrolling: touch;
- }
- @media (max-height: 670px) {
-   .messaging-area-container .messaging-area .messages-area .profile {
-     height: 500px;
-   }
- }
- .messaging-area-container .messaging-area .messages-area .profile .user-container {
-   height: 100px;
- }
- .messaging-area-container .messaging-area .messages-area .profile .user-container .profile-picture {
-   border-radius: 50%;
-   max-height: 100px;
-   display: inline-block;
- }
- .messaging-area-container .messaging-area .messages-area .profile .user-container .name-container {
-   display: inline-block;
-   vertical-align: top;
-   margin-top: 20px;
-   margin-left: 10px;
- }
- .messaging-area-container .messaging-area .messages-area .profile .user-container .name-container .name {
-   font-weight: bold;
-   display: block;
- }
- .messaging-area-container .messaging-area .messages-area .profile .user-container .name-container .status {
-   display: block;
-   font-size: 14px;
- }
- .messaging-area-container .messaging-area .messages-area .profile .information {
-   margin: 0;
-   display: inline-block;
-   float: right;
-   margin-top: 20px;
-   font-size: 14px;
-   list-style: none;
- }
- .messaging-area-container .messaging-area .messages-area .profile .information .name {
-   display: inline-block;
-   font-weight: bold;
-   text-align: right;
-   margin-right: 10px;
- }
- .messaging-area-container .messaging-area .messages-area .profile .information .value {
-   display: inline-block;
- }
- .messaging-area-container .messaging-area .messages-area .profile .actions {
-   padding-top: 80px;
- }
- .messaging-area-container .messaging-area .messages-area .profile .actions .separator {
-   border-bottom: 1px solid #e3e3e3;
-   margin-bottom: 20px;
-   padding-bottom: 5px;
- }
- .messaging-area-container .messaging-area .messages-area .profile .actions .separator a.danger {
-   color: #ff6961;
- }
- .messaging-area-container .messaging-area .messages-area .messages-header {
-   height: 50px;
-   font-weight: bold;
-   line-height: 50px;
-   box-sizing: border-box;
-   border-bottom: 1px solid #e3e3e3;
-   text-align: center;
-   position: relative;
- }
- .messaging-area-container .messaging-area .messages-area .messages-header .btn-link {
-   padding: 0;
-   line-height: inherit;
- }
- .messaging-area-container .messaging-area .messages-area .messages-header .delete-instructions {
-   display: none;
- }
- .messaging-area-container .messaging-area .messages-area .messages-header .name-container {
-   padding-top: 9px;
-   display: inline-block;
- }
- .messaging-area-container .messaging-area .messages-area .messages-header .name-container .name {
-   line-height: 20px;
- }
- .messaging-area-container .messaging-area .messages-area .messages-header .name-container .status {
-   line-height: 12px;
-   font-size: 12px;
-   font-weight: normal;
- }
- .messaging-area-container .messaging-area .messages-area .messages-header .actions {
-   position: absolute;
-   top: 0;
-   right: 0;
-   padding-right: 15px;
-   font-weight: normal;
- }
- .messaging-area-container .messaging-area .messages-area .messages-header .actions .cancel-messages-delete {
-   display: none;
- }
- .messaging-area-container .messaging-area .messages-area .messages {
-   height: 500px;
-   overflow-y: auto;
-   overflow-x: hidden;
-   -webkit-overflow-scrolling: touch;
-   box-sizing: border-box;
-   padding: 20px;
- }
- @media (max-height: 670px) {
-   .messaging-area-container .messaging-area .messages-area .messages {
-     height: 400px;
-   }
- }
- .messaging-area-container .messaging-area .messages-area .messages .blocktime {
-   clear: both;
-   text-align: center;
-   color: #a1a1a1;
-   font-size: 12px;
-   margin: 5px 0;
- }
- .messaging-area-container .messaging-area .messages-area .messages .message .deletemessagecheckbox {
-   display: none;
-   text-align: center;
-   padding-top: 5px;
- }
- .messaging-area-container .messaging-area .messages-area .messages .message .content {
-   border: 1px solid #e3e3e3;
-   padding: 10px;
-   margin-bottom: 5px;
-   font-size: 12px;
-   word-wrap: break-word;
-   max-width: 55%;
-   border-radius: 4px;
-   position: relative;
- }
- .messaging-area-container .messaging-area .messages-area .messages .message .content .text {
-   display: block;
- }
- .messaging-area-container .messaging-area .messages-area .messages .message .content .text p {
-   margin: 0;
- }
- .messaging-area-container .messaging-area .messages-area .messages .message .content .timesent {
-   font-size: 10px;
-   color: #a1a1a1;
-   float: right;
- }
- .messaging-area-container .messaging-area .messages-area .messages .message .content.left {
-   float: left;
- }
- .messaging-area-container .messaging-area .messages-area .messages .message .content.right {
-   float: right;
- }
- .messaging-area-container .messaging-area .messages-area .response {
-   display: table;
-   border-bottom-right-radius: 4px;
-   padding: 10px 10px 9px;
-   position: absolute;
-   bottom: 0;
-   left: 0;
-   width: 100%;
-   line-height: 28px;
-   text-align: center;
-   border-top: 1px solid #e3e3e3;
-   box-sizing: border-box;
-   background-color: #fff;
-   transition: background-color linear 0.2s;
- }
- .messaging-area-container .messaging-area .messages-area .response .delete-confirmation {
-   display: none;
- }
- .messaging-area-container .messaging-area .messages-area .response .delete-confirmation .btn.btn-link.confirm {
-   border: 1px solid #4f94cd;
-   border-radius: 4px;
- }
- .messaging-area-container .messaging-area .messages-area .response .delete-confirmation .btn.btn-link.confirm:hover {
-   background-color: #4f94cd;
-   color: #fff;
-   text-shadow: none;
- }
- .messaging-area-container .messaging-area .messages-area .response .message-box {
-   display: table-row;
- }
- .messaging-area-container .messaging-area .messages-area .response .message-box .message-text-container {
-   display: table-cell;
- }
- .messaging-area-container .messaging-area .messages-area .response .message-box .message-text-container textarea {
-   width: 100%;
-   margin: 0;
-   resize: none;
-   border: none;
-   box-shadow: none;
-   box-sizing: border-box;
-   background-color: #f5f5f5;
-   transition: background-color linear 0.2s;
- }
- .messaging-area-container .messaging-area .messages-area .response .message-box .message-text-container textarea:focus {
-   box-shadow: none;
- }
- .messaging-area-container .messaging-area .messages-area .response .message-box .send-button-container {
-   display: table-cell;
-   width: 1px;
- }
- .messaging-area-container .messaging-area .messages-area .response.messaging {
-   background-color: #f5f5f5;
-   transition: background-color linear 0.2s;
- }
- .messaging-area-container .messaging-area .messages-area .response.messaging .message-box .message-text-container textarea {
-   background-color: #fff;
-   transition: background-color linear 0.2s;
- }
- .messaging-area-container .messaging-area .messages-area.editing .messages-header .btn-container.view-all {
-   display: none;
- }
- .messaging-area-container .messaging-area .messages-area.editing .messages-header .btn-container.delete-all {
-   display: block;
- }
- .messaging-area-container .messaging-area .messages-area.editing .messages-header .delete-instructions {
-   display: block;
- }
- .messaging-area-container .messaging-area .messages-area.editing .messages-header .name-container {
-   display: none;
- }
- .messaging-area-container .messaging-area .messages-area.editing .messages-header .actions .messages-delete {
-   display: none;
- }
- .messaging-area-container .messaging-area .messages-area.editing .messages-header .actions .cancel-messages-delete {
-   display: block;
- }
- .messaging-area-container .messaging-area .messages-area.editing .messages .message {
-   cursor: pointer;
- }
- .messaging-area-container .messaging-area .messages-area.editing .messages .message[aria-checked="true"] .content {
-   background-color: #4f94cd;
-   border-color: #4f94cd;
-   color: #fff;
- }
- .messaging-area-container .messaging-area .messages-area.editing .messages .message[aria-checked="true"] .content .timesent {
-   color: #fff;
- }
- .messaging-area-container .messaging-area .messages-area.editing .messages .message[aria-checked="false"] .content:hover {
-   background-color: #79b5e6;
-   color: #fff;
- }
- .messaging-area-container .messaging-area .messages-area.editing .messages .message[aria-checked="false"] .content:hover .timesent {
-   color: #fff;
- }
- .messaging-area-container .messaging-area .messages-area.editing .response .delete-confirmation {
-   display: block;
- }
- .messaging-area-container .messaging-area .messages-area.editing .response .message-box {
-   display: none;
- }
  .preferences-container .container-fluid {
    padding: 0;
  }
    display: none;
  }
  @media (max-width: 979px) {
-   .messaging-area-container .messaging-area {
-     position: relative;
-     overflow: hidden;
-     height: 600px;
-   }
-   .messaging-area-container .messaging-area .messages-area .messages-header .btn-container.view-toggle {
-     display: block;
-   }
-   .messaging-area-container .messaging-area .messages-area .messages-header .btn-container.delete-all {
-     display: none;
-   }
-   .messaging-area-container .messaging-area .messages-area .profile-header {
-     display: block;
-   }
-   .messaging-area-container .messaging-area .messages-area .profile {
-     height: 550px;
-   }
-   .messaging-area-container .messaging-area .messages-area.editing .messages-header .btn-container.view-toggle {
-     display: none;
-   }
-   .messaging-area-container .messaging-area .messages-area.editing .messages-header .btn-container.delete-all {
-     display: block;
-   }
-   .messaging-area-container .messaging-area .contacts-area {
-     width: 100%;
-     border-right: none;
-     position: absolute;
-     top: 0;
-     left: 0;
-     right: auto;
-     bottom: auto;
-   }
-   .messaging-area-container .messaging-area .messages-area {
-     width: 100%;
-     position: absolute;
-     top: 0;
-     left: auto;
-     right: 0;
-     bottom: auto;
-   }
-   .messaging-area-container .messaging-area.show-messages .contacts-area {
-     left: -100%;
-     opacity: 0;
-     visibility: hidden;
-     transition: left 0.25s, opacity 0.25s, visibility 0.25s;
-   }
-   .messaging-area-container .messaging-area.show-messages .messages-area {
-     right: 0;
-     opacity: 1;
-     visibility: visible;
-     transition: right 0.25s, opacity 0.25s, visibility 0.25s;
-   }
-   .messaging-area-container .messaging-area.hide-messages .contacts-area {
-     left: 0;
-     opacity: 1;
-     visibility: visible;
-     transition: left 0.25s, opacity 0.25s, visibility 0.25s;
-   }
-   .messaging-area-container .messaging-area.hide-messages .contacts-area .contact.selected {
-     background-color: inherit;
-     color: inherit;
-     border-bottom: 1px solid #e3e3e3;
-   }
-   .messaging-area-container .messaging-area.hide-messages .contacts-area .contact.selected:hover {
-     background-color: #4f94cd;
-     color: #fff;
-     border: none;
-     background-color: #79b5e6;
-   }
-   .messaging-area-container .messaging-area.hide-messages .contacts-area .contact.selected:hover .information .lastmessage {
-     color: #fff;
-   }
-   .messaging-area-container .messaging-area.hide-messages .contacts-area .contact.selected:hover .picture {
-     border: none;
-   }
-   .messaging-area-container .messaging-area.hide-messages .contacts-area .contact.selected .picture {
-     border-bottom: 1px solid #fff;
-   }
-   .messaging-area-container .messaging-area.hide-messages .contacts-area .contact.selected .information .lastmessage {
-     color: #a1a1a1;
-   }
-   .messaging-area-container .messaging-area.hide-messages .messages-area {
-     right: -100%;
-     opacity: 0;
-     visibility: hidden;
-     transition: right 0.25s, opacity 0.25s, visibility 0.25s;
-   }
    .notification-area {
      position: relative;
      overflow: hidden;
      transition: right 0.25s;
    }
  }
- @media (max-width: 979px) and (max-height: 670px) {
-   .messaging-area-container .messaging-area {
-     height: 500px;
-   }
- }
- .message-drawer {
-   position: fixed;
-   top: 0;
-   height: 100%;
-   right: 0;
-   width: 320px;
-   z-index: 999;
+ .message-app {
    background-color: #fff;
-   box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
+ .message-app.drawer {
+   position: fixed;
+   right: 0;
+   width: 320px;
+   z-index: 999;
+   box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.08);
+ }
+ .message-app.main {
+   height: 768px;
+ }
  @media (min-width: 980px) {
-   .message-drawer {
+   .message-app {
      height: calc(100% - 42px);
      top: 42px;
    }
-   .message-drawer .drawer-top {
+   .message-app .drawer-top {
      display: none;
    }
  }
- .message-drawer.hidden {
+ .message-app.hidden {
    display: block;
    right: -320px;
  }
- .message-drawer .header-container {
+ .message-app .header-container {
    flex-shrink: 0;
  }
- .message-drawer .searchinput {
+ .message-app .searchinput {
    box-shadow: none;
    width: 100%;
  }
- .message-drawer [data-region="confirm-dialogue-container"] {
+ .message-app [data-region="confirm-dialogue-container"] {
    box-sizing: border-box;
  }
- .message-drawer [data-region="confirm-dialogue-container"] * {
+ .message-app [data-region="confirm-dialogue-container"] * {
    box-sizing: border-box;
  }
- .message-drawer [data-region="confirm-dialogue-container"] .btn-block {
+ .message-app [data-region="confirm-dialogue-container"] .btn-block {
    margin-left: 0;
  }
- .message-drawer .body-container {
+ .message-app .body-container {
    flex: 1;
    overflow: hidden;
  }
- .message-drawer .body-container > * {
+ .message-app .body-container > * {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
  }
- .message-drawer .footer-container {
+ .message-app .footer-container {
    flex-shrink: 0;
    overflow-x: hidden;
  }
- .message-drawer .matchtext {
+ .message-app .matchtext {
    background-color: #ade6fe;
    color: #333;
    height: 1.5rem;
  }
- .message-drawer .contact-status {
+ .message-app .contact-status {
    position: absolute;
    left: 39px;
    top: 39px;
    height: 10px;
    border-radius: 50%;
  }
- .message-drawer .contact-status.online {
+ .message-app .contact-status.online {
    border: 1px solid #46a546;
    background-color: #46a546;
  }
- .message-drawer a,
- .message-drawer .btn-link {
+ .message-app a,
+ .message-app .btn-link {
    text-decoration: none;
    color: inherit;
  }
- .message-drawer .btn-link:hover,
- .message-drawer .btn-link:focus {
+ .message-app .btn-link:hover,
+ .message-app .btn-link:focus {
    background-color: #e8e8e8;
    text-decoration: none;
  }
- .message-drawer .accordion-group .collapse.in {
+ .message-app .accordion-group .collapse.in {
    overflow-y: auto;
  }
- .message-drawer .message p {
+ .message-app .message p {
    margin: 0;
  }
- .message-drawer .clickable {
+ .message-app .clickable {
    cursor: pointer;
  }
- .message-drawer .clickable:hover {
+ .message-app .clickable:hover {
    box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.05), 3px 3px 5px -2px rgba(0, 0, 0, 0.1), 1px 1px 5px 0 rgba(0, 0, 0, 0.03);
  }
- .message-drawer h6,
- .message-drawer .h6 {
+ .message-app h6,
+ .message-app .h6 {
    font-size: 14px;
    font-weight: normal;
  }
- .message-drawer .accordion-group .collapsed-icon-container {
+ .message-app .accordion-group .collapsed-icon-container {
    display: inline-block;
  }
- .message-drawer .accordion-group .expanded-icon-container {
+ .message-app .accordion-group .expanded-icon-container {
    display: none;
  }
- .message-drawer .accordion-group.expanded .collapsed-icon-container {
+ .message-app .accordion-group.expanded .collapsed-icon-container {
    display: none;
  }
- .message-drawer .accordion-group.expanded .expanded-icon-container {
+ .message-app .accordion-group.expanded .expanded-icon-container {
    display: inline-block;
  }
- .message-drawer .view-overview-body .section {
+ .message-app .view-overview-body .section {
    display: block;
  }
- .message-drawer .view-overview-body .section.expanded {
+ .message-app .view-overview-body .section.expanded {
    display: flex;
    flex-direction: column;
  }
- .message-drawer .onepix {
+ .message-app .onepix {
    height: 1px;
    width: 1px;
    position: absolute;
  }
- .message-drawer .view-conversation .content-message-container img {
+ .message-app .view-conversation .content-message-container img {
    max-width: 100%;
  }
- .message-drawer .list-group .list-group-item {
+ .message-app .list-group .list-group-item {
    border-top: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
    margin-bottom: -1px;
  }
- .message-drawer .list-group .list-group-item:first-child {
+ .message-app .list-group .list-group-item:first-child {
    border-top: 0;
  }
- .message-drawer .list-group .list-group-item:last-child {
+ .message-app .list-group .list-group-item:last-child {
    border-bottom: 0;
    margin-bottom: 0;
  }
- .message-drawer .last-message {
+ .message-app .last-message {
    min-height: 20px;
  }
- .message-drawer .lazy-load-list {
+ .message-app .lazy-load-list {
    overflow-y: auto;
  }
  @media (max-width: 480px) {
@@@ -16454,67 -15835,64 +15841,67 @@@ body 
    width: calc(100% - 0.5rem);
    flex-basis: auto;
  }
 +.dashboard-card-deck.fixed-width-cards .dashboard-card {
 +  width: 300px;
 +}
  @media (min-width: 647px) {
 -  .dashboard-card-deck .dashboard-card {
 +  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      display: flex;
      flex-direction: column;
      width: calc(50% - 0.5rem);
    }
  }
  @media (min-width: 888px) {
 -  .dashboard-card-deck .dashboard-card {
 +  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      width: calc(33.333% - 0.5rem);
    }
  }
  @media (min-width: 1147px) {
 -  .dashboard-card-deck .dashboard-card {
 +  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      width: calc(25% - 0.5rem);
    }
  }
  @media (min-width: 1407px) {
 -  .dashboard-card-deck .dashboard-card {
 +  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      width: calc(20% - 0.5rem);
    }
  }
  @media (min-width: 768px) {
 -  body.used-region-side-pre.empty-region-side-post .dashboard-card-deck .dashboard-card,
 -  body.used-region-side-post.empty-region-side-pre .dashboard-card-deck .dashboard-card {
 +  body.used-region-side-pre.empty-region-side-post .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card,
 +  body.used-region-side-post.empty-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      width: calc(100% - 0.5rem);
    }
  }
  @media (min-width: 815px) {
 -  body.used-region-side-pre.empty-region-side-post .dashboard-card-deck .dashboard-card,
 -  body.used-region-side-post.empty-region-side-pre .dashboard-card-deck .dashboard-card {
 +  body.used-region-side-pre.empty-region-side-post .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card,
 +  body.used-region-side-post.empty-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      width: calc(50% - 0.5rem);
    }
  }
  @media (min-width: 1163px) {
 -  body.used-region-side-pre.empty-region-side-post .dashboard-card-deck .dashboard-card,
 -  body.used-region-side-post.empty-region-side-pre .dashboard-card-deck .dashboard-card {
 +  body.used-region-side-pre.empty-region-side-post .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card,
 +  body.used-region-side-post.empty-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      width: calc(33.333% - 0.5rem);
    }
  }
  @media (min-width: 1514px) {
 -  body.used-region-side-pre.empty-region-side-post .dashboard-card-deck .dashboard-card,
 -  body.used-region-side-post.empty-region-side-pre .dashboard-card-deck .dashboard-card {
 +  body.used-region-side-pre.empty-region-side-post .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card,
 +  body.used-region-side-post.empty-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      width: calc(25% - 0.5rem);
    }
  }
  @media (min-width: 768px) {
 -  body.used-region-side-pre.used-region-side-post .dashboard-card-deck .dashboard-card {
 +  body.used-region-side-pre.used-region-side-post .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      width: calc(100% - 0.5rem);
    }
  }
  @media (min-width: 1144px) {
 -  body.used-region-side-pre.used-region-side-post .dashboard-card-deck .dashboard-card {
 +  body.used-region-side-pre.used-region-side-post .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      width: calc(50% - 0.5rem);
    }
  }
  @media (min-width: 1680px) {
 -  body.used-region-side-pre.used-region-side-post .dashboard-card-deck .dashboard-card {
 +  body.used-region-side-pre.used-region-side-post .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
      width: calc(33.333% - 0.5rem);
    }
  }
@@@ -16724,7 -16102,6 +16111,7 @@@ form 
  }
  .form-item .form-setting,
  .form-item .form-description,
 +.form-item .form-dependenton,
  .mform .fitem .felement,
  #page-mod-forum-search .c1 {
    *display: inline-block;
  }
  .form-item .form-setting:first-child,
  .form-item .form-description:first-child,
 +.form-item .form-dependenton:first-child,
  .mform .fitem .felement:first-child,
  #page-mod-forum-search .c1:first-child {
    *padding-left: 200px;
    margin-bottom: 0;
  }
  .form-item .form-description,
 +.form-item .form-dependenton,
  .felement.fstatic {
    color: #595959;
    display: block;
    margin-bottom: 10px;
    padding-top: 5px;
  }
 -.form-item .form-description {
 +.form-item .form-description,
 +.form-item .form-dependenton {
    padding-top: 0;
  }
  .fitem .fstaticlabel {
@@@ -20792,7 -20166,6 +20179,7 @@@ span[data-flexitour="container"][x-plac
    }
    .form-item .form-setting,
    .form-item .form-description,
 +  .form-item .form-dependenton,
    .mform .fitem .felement,
    #page-mod-forum-search .c1,
    .mform .fdescription.required,
    }
    .form-item .form-setting,
    .form-item .form-description,
 +  .form-item .form-dependenton,
    .mform .fitem .felement,
    #page-mod-forum-search .c1,
    .mform .fdescription.required,
    .mform .fitem .felement,
    .path-backup .mform .fitem .felement,
    .mform .fdescription.required,
 -  .form-item .form-description {
 +  .form-item .form-description,
 +  .form-item .form-dependenton {
      margin-left: 0;
    }
    table#form td.submit,