Merge branch 'MDL-63915_master' of git://github.com/markn86/moodle
[moodle.git] / theme / boost / style / moodle.css
index a2cb32e..5853b52 100644 (file)
@@ -13370,425 +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 {
@@ -13999,79 +13580,6 @@ a.ygtvspacer:hover {
         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; }
@@ -14115,141 +13623,135 @@ a.ygtvspacer:hover {
       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; }