diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less
index d6d0c0c15..41b4a547f 100644
--- a/skins/elastic/styles/colors.less
+++ b/skins/elastic/styles/colors.less
@@ -109,7 +109,7 @@
 @color-message-success:             @color-success;
 @color-message-warning:             @color-warning;
 @color-message-error:               @color-error;
-@color-message-loading:             @color-taskmenu-background;
+@color-message-loading:             tint(@color-font, 30%);
 @color-message-error-box:           @color-message;
 @color-message-information-box:     @color-message;
 @color-message-success-box:         @color-message;
diff --git a/skins/elastic/styles/widgets/messages.less b/skins/elastic/styles/widgets/messages.less
index 72a5a487b..11be4120f 100644
--- a/skins/elastic/styles/widgets/messages.less
+++ b/skins/elastic/styles/widgets/messages.less
@@ -91,6 +91,10 @@
         content: @fa-var-lock; // enigma plugin
     }
 
+    &.chat > i.icon:before {
+        content: @fa-var-comment;
+    }
+
     // This works with following structure: <i> <span> [button].
     // <span> here is a one-line text, and button can be anything but <span>.
     &.aligned-buttons {
@@ -177,6 +181,8 @@
 
     div {
         border-color: transparent;
+        background-color: @color-message;
+        color: #fff;
 
         &.voice {
             position: absolute;
@@ -186,63 +192,30 @@
         i.icon {
             font-size: 1.5em !important;
         }
-    }
-
-    .loading {
-        background-color: @color-message-loading;
-        color: #fff;
 
         & > i.icon:before {
             color: #fff;
         }
     }
 
-    .alert-info.information {
-        color: #fff;
-        background-color: @color-message-information;
-
-        & > i.icon:before {
-            color: #fff;
-        }
+    .loading {
+        background-color: @color-message-loading;
     }
 
-    .alert-info.notice {
-        color: #fff;
-        background-color: @color-taskmenu-background;
-
-        & > i.icon:before {
-            color: #fff;
-        }
-
-        &.chat > i.icon:before {
-            content: @fa-var-comment;
-        }
+    .alert-info.information {
+        background-color: @color-message-information;
     }
 
     .alert-success {
-        color: #fff;
         background-color: @color-message-success;
-
-        & > i.icon:before {
-            color: #fff;
-        }
     }
 
     .alert-warning {
         background-color: @color-message-warning;
-
-        & > i.icon:before {
-            color: #fff;
-        }
     }
 
     .alert-danger {
-        color: #fff;
         background-color: @color-message-error;
-
-        & > i.icon:before {
-            color: #fff;
-        }
     }
 
     a {
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
index b3712ac64..e0b8d2257 100644
--- a/skins/elastic/ui.js
+++ b/skins/elastic/ui.js
@@ -1790,7 +1790,7 @@ function rcube_elastic_ui()
 
         // we need the content to be non-text node for best alignment
         if (wrap && addicon && !$(object).is('.aligned-buttons')) {
-            $(object).wrap('<span>');
+            $(object).html($('<span>').html($(object).html()));
         }
 
         // Type can be e.g. 'notice chat'