diff --git a/skins/elastic/styles/embed.less b/skins/elastic/styles/embed.less
index e28301155..841477982 100644
--- a/skins/elastic/styles/embed.less
+++ b/skins/elastic/styles/embed.less
@@ -1,95 +1,95 @@
 /**
  * Roundcube Webmail styles for the Elastic skin
  *
  * Copyright (c) The Roundcube Dev Team
  *
  * The contents are subject to the Creative Commons Attribution-ShareAlike
  * License. It is allowed to copy, distribute, transmit and to adapt the work
  * by keeping credits to the original authors in the README.md file.
  * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
  */
 
 /* Style for embedded pages and TinyMCE editor content page */
 
 @import "global";
 
 .mce-content-body {
     margin: 4px;
     color: @color-input;
 
     div.pre {
         font-family: monospace;
     }
 
     blockquote {
         border-left: #1010ff 2px solid;
         margin: 0;
         padding: 0 0.4em;
     }
 }
 
 .rcmail-inline-message {
-    .font-family;
+    .font-family();
     font-size: @page-font-size;
     padding: .5em;
     margin: 0 0 .5em 0;
     opacity: .95;
     color: @color-message;
     background-color: @color-message-warning-box-background;
     display: flex;
     align-items: center;
 
     &:before {
-        .font-icon-class;
+        .font-icon-class();
         font-size: 1.5em;
         line-height: 1;
         width: 1em;
         margin-right: .3em;
         content: @fa-var-exclamation-triangle;
         color: @color-message-warning;
     }
 
     span {
         line-height: 1.5;
     }
 
     a {
         color: @color-link;
     }
 
     a:hover {
         color: @color-link-hover;
     }
 
     button {
         vertical-align: middle;
         white-space: nowrap;
         padding: .375em .75em;
         margin-left: .5em;
         font-size: 1em;
         line-height: 1.5;
         border-radius: .25em;
         border: 1px solid transparent;
         color: @color-btn-primary;
         background: @color-btn-primary-background;
 
         &:focus {
             box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 50%);
         }
 
         &:hover {
             background: darken(@color-btn-primary-background, 8%);
             border-color: darken(@color-btn-primary-background, 10%);
         }
 
         &:not([disabled]):not(.disabled):active {
             background: darken(@color-btn-primary-background, 11%);
             border-color: darken(@color-btn-primary-background, 13%);
             box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 53%);
         }
     }
 }
 
 .rcmail-inline-buttons {
     margin: 0;
 }
diff --git a/skins/elastic/styles/global.less b/skins/elastic/styles/global.less
index bca3259c0..38618bd27 100644
--- a/skins/elastic/styles/global.less
+++ b/skins/elastic/styles/global.less
@@ -1,97 +1,97 @@
 /**
  * Roundcube Webmail styles for the Elastic skin
  *
  * Copyright (c) The Roundcube Dev Team
  *
  * The contents are subject to the Creative Commons Attribution-ShareAlike
  * License. It is allowed to copy, distribute, transmit and to adapt the work
  * by keeping credits to the original authors in the README.md file.
  * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
  */
 
 @import (reference) "variables";
 @import (reference) "mixins";
 
 /*** Fonts ***/
 
 @font-face {
   font-family: 'Icons';
   font-style: normal;
   font-weight: 900;
   src: url("../fonts/fa-solid-900.woff2") format('woff2'),
        url("../fonts/fa-solid-900.woff") format('woff');
 }
 
 @font-face {
   font-family: 'Icons';
   font-style: normal;
   font-weight: 400;
   src: url("../fonts/fa-regular-400.woff2") format('woff2'),
        url("../fonts/fa-regular-400.woff") format('woff');
 }
 
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
   src: local('Roboto'), local('Roboto-Regular'),
        url('../fonts/roboto-v19-regular.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
        url('../fonts/roboto-v19-regular.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
 }
 
 @font-face {
   font-family: 'Roboto';
   font-style: italic;
   font-weight: 400;
   src: local('Roboto Italic'), local('Roboto-Italic'),
        url('../fonts/roboto-v19-italic.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
        url('../fonts/roboto-v19-italic.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
 }
 
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 700;
   src: local('Roboto Bold'), local('Roboto-Bold'),
        url('../fonts/roboto-v19-regular-700.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
        url('../fonts/roboto-v19-regular-700.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
 }
 
 @font-face {
   font-family: 'Roboto';
   font-style: italic;
   font-weight: 700;
   src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
        url('../fonts/roboto-v19-italic-700.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
        url('../fonts/roboto-v19-italic-700.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
 }
 
 /* Reset some Bootstrap style */
 
 body, button, input, optgroup, select, textarea, .popover {
-    .font-family;
+    .font-family();
 }
 
 button, input, select, textarea {
     line-height: initial;
 }
 
 input {
     vertical-align: middle;
 }
 
 a {
     color: @color-link;
 
     &:hover {
         color: @color-link-hover;
     }
 
     &.disabled {
         pointer-events: none;
     }
 
     &.disabled:not(.btn) {
         opacity: .5;
     }
 }
diff --git a/skins/elastic/styles/layout.less b/skins/elastic/styles/layout.less
index 322593694..8a79da0e1 100644
--- a/skins/elastic/styles/layout.less
+++ b/skins/elastic/styles/layout.less
@@ -1,403 +1,403 @@
 /**
  * Roundcube Webmail styles for the Elastic skin
  *
  * Copyright (c) The Roundcube Dev Team
  *
  * The contents are subject to the Creative Commons Attribution-ShareAlike
  * License. It is allowed to copy, distribute, transmit and to adapt the work
  * by keeping credits to the original authors in the README.md file.
  * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
  */
 
 /*** Responsive design - Layout ***/
 
 /*
 - Large screen (width > 1200px)
    -----------------------------------------------------------------------------------------------------
    |  menu  |        sidebar        |         list          |                 content                  |
    -----------------------------------------------------------------------------------------------------
 - Normal screen (1200px => width => 768px) - typical: 768x1024 (iPad Mini/Air)
    -------------------------------------------------------------------
    |menu|    sidebar/list     |               content                |
    -------------------------------------------------------------------
 - Small (480px < width < 768px)
    ------------------------------------------
    |menu|     sidebar/list/content          |
    ------------------------------------------
 - Phone (width <= 480px) - typical: 320x480 (iPhone 5), 375x667 (iPhone 6-7), 360x564 (Galaxy S6)
    ------------------------
    | sidebar/list/content |
    ------------------------
 */
 
 html {
     height: 100%;
     font-size: @page-font-size;
 }
 
 body {
     min-width: @page-min-width;
     height: 100%;
     color: @color-font;
     overflow: hidden;
 
     html.iframe & {
         overflow: auto;
     }
 }
 
 #layout {
     overflow: hidden;
     display: flex;
     height: 100%;
     width: 100%;
 
     & > div {
         & > .scroller {
             flex: 1;
             position: relative; // for .listing-info positioning
         }
 
         & > .header,
         & > .footer {
             font-size: @layout-header-font-size;
             font-weight: bold;
             line-height: @layout-header-height;
             height: @layout-header-height;
             min-height: @layout-header-height;
             padding: 0 .25em;
             margin: 0;
             position: relative; // for absolute positioning of searchbar
             overflow: hidden;
             white-space: nowrap;
             display: flex;
             justify-content: center;
         }
 
         & > .header {
             border-bottom: 1px solid @color-layout-border;
             color: @color-layout-header;
             background-color: @color-layout-header-background;
 
             .header-title {
-                .overflow-ellipsis;
+                .overflow-ellipsis();
                 flex: 1;
                 text-align: center;
                 margin: 0 -20rem;
             }
 
             a.button {
                 color: @color-toolbar-button;
             }
 
             a.toolbar-list-button,
             a.toolbar-menu-button {
                 order: 99; // always the last button
             }
         }
 
         & > .footer {
             border-top: 1px solid @color-layout-border;
             background-color: @color-layout-footer-background;
 
             & when not (@layout-footer-height = @layout-header-height) {
                 height: @layout-footer-height;
                 min-height: @layout-footer-height;
                 line-height: @layout-footer-height;
             }
 
             &.small {
                 height: @layout-footer-small-height;
                 min-height: @layout-footer-small-height;
                 line-height: @layout-footer-small-height;
             }
 
             &:empty {
                 display: none;
             }
         }
     }
 }
 
 #layout-sidebar {
     position: relative; // e.g. for .column-resizer
     display: flex;
     flex-direction: column;
     flex: 2;
     max-width: 30%;
     min-width: 220px;
     border-right: 1px solid @color-layout-border;
     background-color: @color-layout-sidebar-background;
 
     &.sidebar-right {
         order: 2;
         border-right: 0;
         border-left: 1px solid @color-layout-border;
         // sidebar on right is unusual situation, probably there's no list in layout,
         // in such a case we can make it a little bit wider
         flex: 3;
     }
 }
 
 #layout-list {
     position: relative; // e.g. for .column-resizer
     display: flex;
     flex-direction: column;
     flex: 3;
     max-width: 30%;
     min-width: 300px;
     border-right: 1px solid @color-layout-border;
     background-color: @color-layout-list-background;
 }
 
 #layout-content {
     display: flex;
     flex: 6;
     flex-direction: column;
     background-color: @color-layout-content-background;
 
     html.iframe & {
         height: 100%;
     }
 
     & > .formcontent, // e.g. Help plugin
     & > .content {
         height: 100%;
         width: 100%;
         overflow: auto;
         flex: 1;
     }
 
     .iframe-wrapper {
         width: 100%;
         flex: 1;
 
         iframe {
             width: 100%;
             height: 100%;
             border: 0;
         }
     }
 
     &.only > .scroller {
         overflow: auto;
     }
 }
 
 #layout-menu {
     &.popover {
         left: 0 !important;
     }
 
     .popover-header {
         height: @layout-header-height;
         line-height: @layout-header-height;
         border: 0;
         border-radius: 0;
         text-align: center;
 
         img {
             max-height: @layout-header-height;
             max-width: @layout-menu-width;
             padding: .25rem;
 
             @media screen and (min-width: (@screen-width-xs + 1px)) and (max-width: @screen-width-medium) {
                 max-width: @layout-menu-width * 0.45;
             }
         }
 
         @media screen and (min-width: (@screen-width-xs + 1px)) {
             padding: 0 !important;
             background-color: @color-taskmenu-background !important;
 
             a {
                 display: none !important;
             }
         }
 
         html.layout-phone & {
             display: flex !important;
             align-items: center;
             justify-content: center;
             padding: 0 .5rem;
 
             img {
                 max-width: @layout-mobile-menu-width - 50px;
             }
 
             a {
                 width: auto;
                 flex: 1;
 
                 &:before {
                     height: @layout-touch-header-height;
                     float: right;
                 }
 
                 .inner {
                     display: none;
                 }
             }
         }
     }
 }
 
 .column-resizer {
     cursor: col-resize;
     z-index: 1;
     position: absolute;
     top: 0;
     right: -3px;
     width: 6px;
     height: 100%;
 
     .sidebar-right & {
         left: -3px;
     }
 }
 
 
 @media screen and (max-width: @screen-width-large) {
     #layout-sidebar,
     #layout-list {
         min-width: 260px;
         flex: 3;
     }
 
     #layout-list > .header > a.button {
         padding: 0 .25rem;
         margin: 0 .25rem;
     }
 }
 
 @media screen and (max-width: @screen-width-medium) {
     // Disable column resizing by hiding splitters and reseting columns width
     .column-resizer {
         display: none;
     }
     #layout-sidebar,
     #layout-list {
         width: auto !important;
         flex: 3 !important;
     }
 }
 
 @media screen and (max-width: @screen-width-small) {
     #layout-sidebar,
     #layout-list {
         max-width: none;
         border: 0 !important;
     }
 
     #layout > div > .header {
         background-color: @color-layout-mobile-header-background;
 
         a.button {
             // make the button active area smaller on touch devices
             margin: 0 .3rem !important;
             padding: 0 !important;
 
             &:before {
                 font-size: 1.75rem;
                 height: @layout-touch-header-height;
                 margin: 0;
             }
 
             &.filter:before {
                 font-size: 1.6rem; // this icon is too big in FA5
             }
 
             .inner {
                 display: none;
             }
         }
     }
 
     #layout > div > .footer {
         background-color: @color-layout-mobile-footer-background;
     }
 
     a.toolbar-list-button {
         display: none;
     }
 }
 
 @media screen and (max-width: @screen-width-xs) {
 }
 
 @media screen and (max-width: @screen-width-mini) {
     #layout-sidebar,
     #layout-list {
         min-width: @page-min-width;
     }
 }
 
 @media screen and (min-width: (@screen-width-xs + 1px)) {
     a.task-menu-button {
         display: none;
     }
 
     #layout-menu {
         // FIXME: we set background color here not in taskmenu.less, because
         // otherwise background is partially white on Android/iOS
         background-color: @color-taskmenu-background;
         width: @layout-menu-width-sm;
     }
 }
 
 @media screen and (min-width: (@screen-width-small + 1px)) {
     .floating-action-buttons,
     #layout-content > .header > .header-title,
     #layout > div > .header > .buttons,
     a.toolbar-menu-button {
         display: none;
     }
 }
 
 @media screen and (min-width: (@screen-width-medium + 1px)) {
     #layout-menu {
         width: @layout-menu-width;
     }
 }
 
 @media screen and (min-width: (@screen-width-large + 1px)) {
     #layout-list > .header > .header-title:not(.all-sizes),
     a.toolbar-list-button,
     a.back-list-button,
     a.back-sidebar-button {
         display: none;
     }
 }
 
 html.layout-phone {
     .hidden-phone {
         display: none !important;
     }
 }
 
 html.layout-phone,
 html.layout-small {
     .hidden-small {
         display: none !important;
     }
 }
 
 html.layout-small {
     .hidden-lbs {
         display: none !important;
     }
 }
 
 html.layout-large,
 html.layout-normal {
     .hidden-lbs,
     .hidden-big {
         display: none !important;
     }
 }
 
 html.layout-large {
     .hidden-large {
         display: none !important;
     }
 }
diff --git a/skins/elastic/styles/styles.less b/skins/elastic/styles/styles.less
index 77eea659d..d39779435 100644
--- a/skins/elastic/styles/styles.less
+++ b/skins/elastic/styles/styles.less
@@ -1,405 +1,405 @@
 /**
  * Roundcube Webmail styles for the Elastic skin
  *
  * Copyright (c) The Roundcube Dev Team
  *
  * The contents are subject to the Creative Commons Attribution-ShareAlike
  * License. It is allowed to copy, distribute, transmit and to adapt the work
  * by keeping credits to the original authors in the README.md file.
  * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
  */
 
 @import "global";
 @import "layout";
 @import "widgets/common";
 @import "widgets/buttons";
 @import "widgets/jqueryui";
 @import "widgets/dialogs";
 @import "widgets/menu";
 @import "widgets/messages";
 @import "widgets/lists";
 @import "widgets/forms";
 @import "widgets/editor";
 
 
 /*** Login form ***/
 
 .task-login {
     #layout-content {
         text-align: center;
         width: 100%;
         display: block;
     }
 
     #logo {
         display: inline-block;
         position: relative;
         top: 16vh;
         max-height: 100px;
     }
 }
 
 #login-form {
     margin: 0 auto;
     top: 20vh;
     width: 95%;
     max-width: 320px;
     position: relative;
 
     // Fixes table width in IE11
     table, tbody {
         display: block;
     }
 
     // Fixes input width in IE11
     .row {
         margin-right: 0;
         margin-left: 0;
     }
 }
 
 #rcmloginsubmit {
     &:before {
         display: none !important;
     }
 }
 
 #login-footer {
     flex: 1;
     color: @color-black-shade-text;
 
     & > div {
         margin-top: 1rem;
         padding: 1rem;
         background: @color-black-shade-bg;
         border-radius: .3rem;
     }
 }
 
 #login-addon {
     position: absolute;
     bottom: 0;
     max-height: 30%;
     margin: 1rem !important;
     width: auto !important;
     overflow: auto;
 
     @media screen and (min-width: (@screen-width-small + 1px)) {
         max-width: @screen-width-small;
         margin: auto !important;
         bottom: 1rem;
         left: 0;
         right: 0;
     }
 }
 
 body.task-error-login #layout {
     #layout-menu,
     #layout-content > .header {
         display: none;
     }
 }
 
 /*** Addressbook UI ***/
 
 #contactpic {
     width: @layout-contact-icon-width;
     height: @layout-contact-icon-height;
     border-radius: .5rem;
     overflow: hidden;
     display:table-cell;
     vertical-align:middle;
     text-align: center;
     background-color: @color-image-upload-background;
 
     img {
         max-width: @layout-contact-icon-width;
         max-height: @layout-contact-icon-height;
     }
 }
 
 #contacthead {
     .names {
         margin-bottom: .5rem;
 
         span.namefield {
             font-size: 1.5rem;
             font-weight: bold;
             line-height: 1.2;
         }
     }
 
     &.readonly {
         .source.row {
             color: @color-form-hint;
             font-size: 90%;
             margin-bottom: .25rem;
         }
     }
 }
 
 /*** Mail UI ***/
 
 #message-header {
     margin-bottom: 1rem;
 
     .subject {
         font-size: 1.5rem;
         font-weight: bold;
 
         body.status-flagged &:before {
             &:extend(.font-icon-class);
             display: inline;
             float: none;
             content: @fa-var-flag;
             font-size: 1em;
             color: @color-error;
         }
 
         a.extwin {
             &:before {
                 &:extend(.font-icon-class);
                 float: none;
                 display: inline-block;
                 font-size: 75%;
                 line-height: 1.5;
                 margin: 0;
                 content: @fa-var-external-link-square-alt;
             }
         }
 
         span.inner {
             display: none;
         }
     }
 
     .short-header {
         display: flex;
 
         img.contactphoto {
             margin: 0 1rem 0 0;
             border-radius: 50%;
             width: @mail-header-photo-height;
             height: @mail-header-photo-height;
             object-fit: cover;
         }
 
         div.header-content {
             min-height: @mail-header-photo-height;
             flex: 1;
         }
 
         div.header-subject {
             line-height: @mail-header-photo-height/2;
 
             & > span {
                 line-height: 1.5;
                 display: inline-block;
                 vertical-align: middle;
             }
         }
 
         div.header-links {
             a {
                 font-size: 90%;
                 margin-right: .5rem;
                 text-decoration: none;
                 white-space: nowrap;
                 display: inline-block;
 
                 &:before {
                     &:extend(.font-icon-class);
                     height: 1.5rem;
                     line-height: 1.3;
                 }
 
                 &.envelope:before {
                     content: @fa-var-envelope;
                 }
 
                 &.html:before {
                     content: @fa-var-image;
                 }
 
                 &.plain:before {
                     content: @fa-var-align-justify;
                 }
 
                 &.zipdownload:before {
                     content: @fa-var-download;
                 }
             }
         }
 
         .message-partheaders {
             margin: 0 !important;
             padding: .25rem 0 !important;
         }
     }
 
     a.extwin,
     a.headers {
         text-decoration: none;
     }
 }
 
 #message-content {
     .attachmentslist:not(:empty) {
         margin-bottom: 1rem;
     }
 }
 
 #messagebody {
     &.mailvelope {
         margin: 0;
 
         iframe {
             min-height: 75vh;
         }
     }
 }
 
 .message-part,
 .message-htmlpart {
     padding-top: .5rem;
     // Fixes absolute positioned mail message content
     position: relative;
 
     &:not(:first-child) {
         border-top: 1px solid lighten(@color-mail-headers, 50%);
         margin-top: .5rem;
     }
 
     div.rcmBody {
         // Remove margins that can be set by the mail message styles
         margin: 0 !important;
     }
 
     blockquote {
-        .overflow-ellipsis;
+        .overflow-ellipsis();
         color: @color-blockquote-0;
         border-left: 2px solid @color-blockquote-0-border;
         border-right: 2px solid @color-blockquote-0-border;
         background-color: @color-blockquote-background;
         margin: 2px 0;
         padding: 0 .4em;
 
         blockquote {
             color: @color-blockquote-1;
             border-left: 2px solid @color-blockquote-1-border;
             border-right: 2px solid @color-blockquote-1-border;
 
             blockquote {
                 color: @color-blockquote-2;
                 border-left: 2px solid @color-blockquote-2-border;
                 border-right: 2px solid @color-blockquote-2-border;
             }
         }
 
         span.blockquote-link {
             top: 0;
             cursor: pointer;
             right: .5rem;
             min-width: 4rem;
             padding: .2rem .25rem .2rem .5rem;
             font-size: 90%;
             text-align: center;
             color: @color-black-shade-text;
             background: @color-black-shade-bg;
             border: 1px solid @color-black-shade-border;
             border-radius: .3rem;
             line-height: 1;
-            .font-family; // don't inherit monospace font
+            .font-family(); // don't inherit monospace font
 
             &:after {
                 &:extend(.font-icon-class);
                 content: @fa-var-angle-down;
                 display: inline-block;
                 float: none;
                 margin: 0;
                 font-size: 90%;
             }
 
             &.collapsed:after {
                 content: @fa-var-angle-up;
             }
         }
 
         &.blockquote-header {
             text-overflow: ellipsis !important;
             padding-right: 5rem !important;
         }
     }
 }
 
 .message-part {
     span.sig {
         color: @color-mail-signature;
     }
 
     div.pre {
         font-family: monospace;
     }
 }
 
 .message-partheaders {
     padding: .5rem 0;
     margin: .5rem 0 0 0;
     font-size: 90%;
     border-top: 1px solid @color-list-border;
     border-bottom: 1px solid @color-list-border;
     color: @color-mail-headers;
 
     .header-title {
-        .overflow-ellipsis;
+        .overflow-ellipsis();
         white-space: nowrap;
         max-width: 8em;
         font-weight: bold;
         padding-right: 1rem;
         vertical-align: top;
     }
 
     .subject {
         font-weight: bold;
     }
 
     & + .message-part,
     & + .message-htmlpart {
         border-top: 0;
         margin: 0;
     }
 }
 
 #compose-attachments {
     margin: 1rem 1rem 0 1rem;
 }
 
 #composestatusbar {
     opacity: .3;
     right: 2.5rem;
 
     @media screen and (min-width: (@screen-width-small + 1px)) {
         display: none;
     }
 
     a.button {
         display: inline-block;
 
         &:before {
             line-height: @layout-touch-header-height;
             font-size: 1.25rem !important;
         }
     }
 }
 
 /*** Settings UI ***/
 
 // A default icon for settings menu entries added by plugins
 .settings-default-icon {
     tr > td.section::before,
     li > a:before {
         content: @fa-var-cog;
     }
 }
 
 @import "_styles";
diff --git a/skins/elastic/styles/widgets/common.less b/skins/elastic/styles/widgets/common.less
index b0ecd38bc..3b3eab738 100644
--- a/skins/elastic/styles/widgets/common.less
+++ b/skins/elastic/styles/widgets/common.less
@@ -1,586 +1,586 @@
 /**
  * Roundcube Webmail styles for the Elastic skin
  *
  * Copyright (c) The Roundcube Dev Team
  *
  * The contents are subject to the Creative Commons Attribution-ShareAlike
  * License. It is allowed to copy, distribute, transmit and to adapt the work
  * by keeping credits to the original authors in the README.md file.
  * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
  */
 
 /*** Common UI elements ***/
 
 .rcmaddcontact,
 .hidden,
 .voice {
     display: none !important;
 }
 
 font.bold {
     font-weight: bold;
 }
 
 #rcmdraglayer {
     min-width: 260px;
     width: 260px;
     background-color: @color-drag-layer-background;
     color: @color-drag-layer;
     box-shadow: 3px 3px 5px @color-drag-layer-shadow;
     border-radius: .3rem;
     z-index: 250;
     opacity: .92;
     padding: .5rem;
     white-space: nowrap;
 
     div {
         line-height: 1.6em;
-        .overflow-ellipsis;
+        .overflow-ellipsis();
     }
 }
 
 .frame-content {
     padding: 1rem;
 
     h2 {
         font-weight: bold;
         font-size: 1.5em;
     }
 
     h3 {
         font-weight: bold;
         font-size: 1.25em;
     }
 }
 
 .listbox {
     .scroller {
         width: 100%;
         overflow-x: hidden;
         overflow-y: auto;
     }
 
     .navlist {
         height: 0;
         flex: initial !important;
 
         .listing {
             tr:last-child td,
             li:last-child {
                 border-bottom: 0;
             }
         }
     }
 
     .popup & {
         height: 100%;
         display: flex;
         flex-direction: column;
 
         .scroller {
             flex: 1;
         }
 
         .footer {
             border-top: 1px solid @color-layout-border;
             background-color: @color-searchbar-background;
         }
     }
 }
 
 .contact-header {
     display: flex;
     margin-bottom: 1rem;
 
     .contact-photo {
         min-width: @layout-contact-icon-width;
     }
 
     .contact-head {
         margin-left: 1rem;
         margin-top: 0 !important;
 
         legend {
             display: none;
         }
     }
 }
 
 
 @image-attachment-size: 250px;
 
 // this is when image thumbnails are enabled
 p.image-attachment {
     position: relative;
     border: 1px solid @color-border;
     border-radius: .3rem;
     background-color: @color-message-background;
     float: left;
     margin: .5rem;
     min-width: 47%;
     min-height: @image-attachment-size;
     overflow: hidden;
     // use flexbox to center the image
     display: flex;
     justify-content: center;
 
     @media screen and (max-width: @screen-width-xs) {
         float: none;
         margin: .5rem 0 .5rem 0;
     }
 
     .image-link {
         align-self: center;
         text-align: center;
         margin: 1.6rem .5rem;
     }
 
     span {
         color: @color-form-hint;
         padding: 0 .5rem;
         font-size: 90%;
         white-space: nowrap;
         position: absolute;
         line-height: 1.5rem;
     }
 
     .image-filename {
-        .overflow-ellipsis;
+        .overflow-ellipsis();
         left: 0;
         top: 0;
         right: 0;
         padding-right: 4rem;
     }
 
     .image-filesize {
         right: 0;
         top: 0;
     }
 
     .attachment-links {
         position: absolute;
         bottom: 0;
         left: 0;
         width: 100%;
         text-align: center;
 
         a {
             text-decoration: none;
             display: inline-block;
             padding: 0 .5rem;
             line-height: 1.5rem;
         }
 
         a:before {
             &:extend(.font-icon-class);
             display: inline-block;
         }
 
         a.open:before {
             content: @fa-var-external-link-square-alt;
         }
 
         a.download:before {
             content: @fa-var-download;
         }
     }
 }
 
 // this is when image thumbnails are disabled
 fieldset.image-attachment {
     margin-top: .5rem;
 
     legend {
         color: @color-form-hint;
         font-size: .9rem;
         border-top: 1px solid lighten(@color-mail-headers, 50%);
         margin: 0;
     }
 
     img {
         max-width: 100%;
     }
 }
 
 #folder-selector {
     overflow-y: auto;
 }
 
 .noselect {
     user-select: none;
     -moz-user-select: none;
     -khtml-user-select: none;
     -ms-user-select: none;
     -webkit-user-select: none;
 }
 
 .iframe-loader {
     width: 100%;
     position: absolute;
     top: 0;
     bottom: 0;
     background-color: rgba(255, 255, 255, .95);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 3;
 
     .spinner-border {
         width: 7rem;
         height: 7rem;
         color: @color-spinner-circle;
         border: 1rem solid;
         border-color: currentColor @color-spinner-item currentColor currentColor;
     }
 }
 
 .footer.toolbar + .iframe-loader {
     top: @layout-header-height;
     bottom: @layout-header-height;
 }
 
 // iOS: Fix scrolling of iframe, display scrollbars on scrollable elements
 .ios-scroll {
     padding: 0;
     -webkit-overflow-scrolling: touch !important;
     overflow: scroll !important;
 
     &.iframe-wrapper {
         margin-top: 1px; // FIXME: without this scrolling hides the wrapper neighbours' border
     }
 }
 
 .webkit-scroller {
     &::-webkit-scrollbar {
         -webkit-appearance: none;
     }
 
     &::-webkit-scrollbar:vertical {
         width: .5rem;
     }
 
     &::-webkit-scrollbar:horizontal {
         height: .5rem;
     }
 
     &::-webkit-scrollbar-thumb {
         background-color: rgba(0, 0, 0, .3);
         border-radius: .25rem;
         border: 2px solid #fff;
     }
 }
 
 .quota-widget {
     width: 100%;
     max-width: 15em;
     padding: .5rem 1rem;
     display: flex;
     align-items: center;
     color: @color-quota-text;
 
     &:before {
         &:extend(.font-icon-class);
         content: @fa-var-hdd;
         line-height: 1;
     }
 
     .count {
         color: @color-quota-text;
         font-size: 80%;
         order: 2;
     }
 
     .bar {
         flex: 1;
         height: .5rem;
         margin: 0 1rem;
         background-color: @color-quota-background;
         border: 1px solid @color-layout-border;
         border-radius: .25rem;
         overflow: hidden;
     }
 
     .value {
         display: block;
         background-color: @color-quota-value;
         height: 1rem;
         opacity: .75;
 
         &.warning {
             background-color: @color-quota-value-warning;
         }
     }
 }
 
 .image-tools {
     position: absolute;
     top: 5rem;
     left: 0;
     height: @layout-header-height;
     overflow: hidden;
     transform: translateX(-87%);
     transition: transform 0.3s ease-in-out;
     background-color: @color-image-tools-background;
     border-radius: 0 .3rem .3rem 0;
 
     .menu {
         float: left;
     }
 
     a.button.icon.tools {
         padding: 0 .25rem;
         display: inline-block;
         height: @layout-header-height;
 
         span.inner {
             display: none;
         }
 
         &:before {
             line-height: @layout-header-height;
             margin: 0;
         }
     }
 
     &.open {
         transform: translateX(0);
 
         a.button.icon.tools:before {
             content: @fa-var-chevron-left;
         }
     }
 
     a {
         color: @color-image-tools !important;
 
         &:focus,
         &:hover {
             background-color: @color-image-tools-hover !important;
             outline: 0;
         }
     }
 }
 
 .quota-info {
     width: 100%;
     display: table !important;
 
     td,th {
         text-align: center;
         white-space: nowrap;
     }
 
     th {
         border-top: 0;
     }
 
     .root {
         line-height: 1;
         font-style: italic;
         color: @color-popover-separator;
         background-color: @color-popover-separator-background;
     }
 
     th:first-child,
     .name {
         text-align: left;
     }
 }
 
 // Make Bootstrap tabs non-wrappable
 .nav-tabs {
     flex-wrap: nowrap;
 
     .nav-item {
         white-space: nowrap;
         overflow: hidden;
     }
 
     .nav-link {
-        .overflow-ellipsis;
+        .overflow-ellipsis();
     }
 }
 
 .props-table {
     td.title {
         width: 7em;
     }
 }
 
 .table-widget {
     display: flex;
     flex-direction: column;
     margin-bottom: .5rem;
     border: 1px solid @color-table-border;
 
     & > .content {
         overflow-x: auto;
         flex-grow: 1;
         height: 18.5em;
 
         table th {
             border-top: 0;
         }
     }
 
     & > .footer {
         height: 3.5rem;
         border-top: 1px solid @color-table-border;
         text-align: left;
 
         a {
             padding: .2rem .45rem !important;
             height: 3.5rem !important;
         }
     }
 
     table {
         margin: 0;
         max-height: 18.5em;
     }
 
     // Options table is a table with first column for identifier/description
     // and other columns for a state flag. E.g. ACL table
     table.options-table {
         td,th {
             text-align: center;
             vertical-align: middle;
 
             &:first-child {
-                .overflow-ellipsis;
+                .overflow-ellipsis();
                 text-align: left;
             }
         }
 
         tr:last-child td {
             border-bottom: 1px solid @color-table-border;
         }
 
         tr.selected td {
             background-color: @color-table-selected-background;
             color: @color-table-selected;
             outline: 0;
         }
 
         td:not(:first-child) span {
             display: inline-block;
             line-height: 1.25;
 
             &:before {
                 &:extend(.font-icon-class);
             }
         }
 
         td.enabled span:before {
             content: @fa-var-check;
         }
 
         td.partial span:before {
             opacity: .3;
             content: @fa-var-check;
         }
     }
 }
 
 table.compact-table {
     margin: 0;
     width: 100%;
 
     *:not(.invalid-feedback) {
         font-size: inherit;
     }
 
     td {
         padding: .25rem;
         border: 0;
     }
 
     td:first-child {
         padding-left: 0;
     }
 
     td:last-child {
         padding-right: 0;
     }
 }
 
 table.table {
     .checkbox-cell {
         width: 3rem;
         white-space: nowrap;
         overflow: hidden;
         text-align: center;
         padding: .5rem;
 
         html.touch & {
             padding: .5rem .3rem;
         }
     }
 
     th.checkbox-cell {
         padding: .75rem 0;
         max-width: 1rem;
 
         &:before {
             &:extend(.font-icon-class);
             cursor: pointer;
             margin: 0 1rem;
             line-height: 1;
         }
 
         &.subscription:before {
             content: @fa-var-rss-square;
         }
 
         &.alarm:before {
             .font-icon-regular(@fa-var-bell);
         }
 
         &.read:before {
             content: @fa-var-eye;
         }
 
         &.write:before {
             content: @fa-var-pencil-alt;
         }
     }
 
     .buttons-cell {
         width: 1%;
         white-space: nowrap;
         text-align: center;
 
         a.button:before {
             line-height: 1;
             float: none;
             display: inline-block;
         }
 
         @media screen and (min-width: @screen-width-xs) {
             a.button .inner {
                 display: inline;
             }
         }
     }
 
     label {
         margin: 0;
         display: inline;
     }
 
     fieldset.tab-pane & thead th {
         border: 0;
     }
 
     tr.deleted td {
         color: @color-list-deleted !important;
     }
 }
 
 /* Bootstrap's .table style overwrites */
 .table {
     thead th {
         border-width: 1px;
         white-space: nowrap;
     }
 }
diff --git a/skins/elastic/styles/widgets/editor.less b/skins/elastic/styles/widgets/editor.less
index f29af29fb..aefbbf5e1 100644
--- a/skins/elastic/styles/widgets/editor.less
+++ b/skins/elastic/styles/widgets/editor.less
@@ -1,965 +1,965 @@
 /**
  * Roundcube Webmail styles for the Elastic skin
  *
  * Copyright (c) The Roundcube Dev Team
  *
  * The contents are subject to the Creative Commons Attribution-ShareAlike
  * License. It is allowed to copy, distribute, transmit and to adapt the work
  * by keeping credits to the original authors in the README.md file.
  * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
  */
 
 
 /*** Text Editor widget (and TinyMCE editor) ***/
 
 .mce-tinymce {
     &.mce-container.mce-panel {
         border-radius: .25rem;
         border-color: @color-input-border;
         overflow: hidden;
     }
 
     .mce-btn,
     .mce-panel {
         background-color: @color-input-addon-background;
     }
 
     .mce-panel {
         border-color: @color-input-border;
     }
 
     &.focused {
         border-color: @color-input-border-focus !important;
         box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow !important;
     }
 }
 
 .mce-top-part::before,
 .mce-tinymce,
 .mce-window {
     box-shadow: none !important;
 }
 
 .mce-btn {
     &.mce-active {
         background: @color-btn-secondary-background !important;
     }
 }
 
 .mce-window {
     &.mce-container {
         border: 0;
 
         & :not(.mce-ico) {
-            .font-family;
+            .font-family();
         }
     }
 
     .mce-reset {
         background: #fff;
     }
 
     .mce-container-body {
         &.mce-abs-layout {
             overflow: unset;
         }
 
         .mce-abs-end {
             display: none;
         }
     }
 
     .mce-window-head {
         height: @layout-header-height;
         border-bottom: 1px solid @color-dialog-header-border;
         padding: 0;
 
         .mce-title {
             line-height: @layout-header-height;
             font-size: 1.25rem;
             padding: 0 3rem 0 1rem;
             color: @color-dialog-header;
         }
 
         .mce-close {
             border: 0;
             color: @color-dialog-header;
             background: transparent;
             right: 0;
             top: 0;
             position: absolute;
             height: (@layout-header-height - .75rem);
             width: 1.25em;
             margin: 0 .25rem;
             padding: .1rem .75rem;
             cursor: pointer;
             outline: 0;
 
             &:before {
                 &:extend(.font-icon-class);
                 content: @fa-var-times;
                 margin: 0;
             }
 
             i {
                 display: none;
             }
         }
     }
 
     .mce-foot {
         border: 0;
         height: @layout-header-height !important;
         position: relative;
 
         @media screen and (max-width: @screen-width-xs) {
             border-top: 1px solid @color-dialog-header-border;
         }
 
         .mce-container-body {
             height: 100% !important;
             display: flex;
             align-items: center;
             justify-content: flex-end; // just 'end' does not work in Chrome
 
             .mce-btn {
                 position: initial;
                 margin-right: .5rem;
                 line-height: 1;
                 width: auto !important;
                 height: auto !important;
 
                 &:last-child {
                     margin-right: 1rem;
                 }
 
                 .mce-txt {
                     line-height: 1.5;
                     vertical-align: unset;
                 }
 
                 button:before {
                     &:extend(.font-icon-class);
                     display: inline;
                     float: none;
                     vertical-align: middle;
                     margin-right: .4rem;
                 }
             }
 
             .mce-abs-end {
                 position: initial;
                 width: 1rem;
                 order: 9;
             }
         }
 
         .mce-btn {
-            .btn-secondary;
+            .btn-secondary();
             border-radius: .3rem;
             border-color: transparent;
 
             &:focus {
                 border-color: transparent !important;
                 color: @color-btn-secondary;
                 background: @color-btn-secondary-background;
             }
 
             &.mce-primary {
-                .btn-primary;
+                .btn-primary();
             }
 
             button:hover,
             button {
                 color: @color-btn-secondary;
                 padding: .5rem .75rem;
             }
         }
 
         .mce-btn:last-child button:before {
             content: @fa-var-times;
         }
 
         .mce-btn.mce-primary button:before {
             content: @fa-var-check;
         }
 
         .mce-search-foot {
             div:nth-of-type(2) button:before {
                 content: @fa-var-search;
             }
             div:nth-of-type(3) button:before,
             div:nth-of-type(4) button:before {
                 content: @fa-var-pencil-alt;
             }
             div:nth-of-type(6) button:before {
                 content: @fa-var-chevron-left;
             }
             div:nth-of-type(7) button:before {
                 content: @fa-var-chevron-right;
             }
             div:nth-of-type(7) button:after {
                 &:extend(.font-icon-class);
                 display: inline;
                 float: none;
                 margin: 0 0 0 .2rem;
                 content: @fa-var-chevron-right;
             }
 
             @media screen and (min-width: (@screen-width-xs + 1px)) {
                 div:nth-of-type(6) {
                     margin-left: .5rem;
                 }
                 div:nth-of-type(7) button {
                     &:before {
                         display: none;
                     }
                 }
             }
         }
     }
 
     // Form elements, let's keep'em in .mce-window to make overwriting simpler
 
     .mce-formitem {
         min-width: 450px;
         position: unset !important;
 
         & > .mce-container-body {
             margin-bottom: .5rem;
 
             & > * {
                 width: 75% !important;
                 position: unset !important;
             }
 
             & > label {
                 max-width: 25%;
                 min-width: 25%;
                 line-height: 2.5 !important;
             }
         }
 
         .mce-widget {
             border-radius: .25rem;
         }
     }
 
     .mce-form {
         padding: 1rem;
         box-sizing: border-box;
 
         .mce-form {
             padding: 0;
             position: unset !important;
             width: 100% !important;
 
             & > .mce-container-body {
                 flex-wrap: wrap;
                 height: auto !important;
             }
 
             .mce-formitem {
                 min-width: 100%;
                 width: 100% !important;
             }
         }
 
         .mce-container {
             height: auto !important;
 
             .mce-container-body {
                 display: flex;
                 height: auto !important;
 
                 & > input:not([size="5"]) {
                     position: relative;
                     left: 0 !important;
                     flex: 1;
                 }
 
             }
         }
 
         & > .mce-container-body {
             box-sizing: border-box;
             width: 100% !important;
         }
 
         .mce-form-split {
             .mce-formitem {
                 min-width: auto;
 
                 & > .mce-container-body {
                     width: 100% !important;
                 }
             }
         }
 
         label {
             position: unset;
             line-height: 2.5 !important;
             height: auto !important;
         }
     }
 
     .mce-colorpicker {
         & + .mce-form {
             width: 150px !important;
             padding: 0;
 
             .mce-formitem {
                 min-width: unset;
 
                 & + :not(.mce-formitem) {
                     height: 50px !important;
                 }
             }
         }
     }
 
     .mce-textbox {
         padding: .375rem .75rem !important;
         line-height: 1.5;
         color: @color-font;
 
         &:not(textarea) {
             height: auto !important;
         }
 
         &:focus {
             color: @color-font;
             border-color: @color-input-border-focus;
             box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow;
         }
 
         &[size="5"] {
             width: auto !important;
         }
 
         &.mce-multiline {
             line-height: 1.25;
             width: 100% !important;
             position: unset;
             box-sizing: border-box;
             display: block;
         }
     }
 
     .mce-listbox {
         button {
             line-height: 1.5;
             padding: .375rem .75rem;
         }
 
         &:focus {
             border-color: @color-input-border-focus !important;
             box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow !important;
         }
     }
 
     .mce-checkbox {
         line-height: 2.5;
 
         i.mce-i-checkbox {
             border: 0;
             width: auto;
             color: @color-checkbox;
             text-indent: 0;
 
             &:before {
                 &:extend(.font-icon-class);
                 margin: 0;
                 content: @fa-var-toggle-off;
             }
         }
 
         &.mce-checked i.mce-i-checkbox:before {
             content: @fa-var-toggle-on;
         }
 
         &:focus {
             i.mce-i-checkbox {
                 border: 0;
             }
         }
     }
 
     .mce-combobox {
         display: flex;
 
         input {
             border-radius: .3rem 0 0 .3rem;
             flex: 1;
 
             &:focus {
                 z-index: 1;
             }
         }
 
         &.mce-combobox-fake {
             input {
                 border-radius: .3rem;
             }
         }
 
         button {
             padding: .4rem .6rem;
         }
 
         .mce-btn {
             border-radius: 0 .3rem .3rem 0;
             background: @color-input-addon-background;
 
             &:focus {
                 background-color: @color-input-border-focus-shadow;
                 border-color: #c5c5c5;
             }
         }
     }
 
     .mce-tabs {
         padding-top: 1rem;
         margin: 0 1rem;
         border-color: @color-layout-border;
 
         .mce-tab {
             border-radius: .25rem .25rem 0 0;
             padding: .5rem 1rem;
             height: auto !important;
             border: 1px solid transparent;
             color: @color-link;
             background: transparent;
             margin-bottom: -1px;
 
             &.mce-active {
                 border: 1px solid @color-layout-border;
                 border-bottom-color: #fff;
                 color: @color-font !important;
             }
 
             &:not(.mce-active):hover {
                 border: 1px solid @color-list-border;
                 border-bottom-color: transparent;
                 border-bottom: 0;
             }
 
             &:focus {
                 outline: unset !important;
             }
         }
     }
 
     .mce-label {
         text-shadow: none;
         color: @color-font;
     }
 }
 
 
 // Menus and popovers, e.g. color selector, emoticons selector, font selector
 .mce-menu,
 .mce-floatpanel.mce-popover {
     box-shadow: 3px 3px 5px @color-popover-shadow !important;
     border-color: @color-layout-border !important;
     border-radius: .3rem;
 }
 
 .mce-menu {
     .mce-menu-item.mce-active {
         color: @color-menu-hover;
         background-color: @color-menu-hover-background;
     }
 
     .popover-header {
         display: none !important;
     }
 }
 
 div.mce-menubtn.mce-opened {
     z-index: 65530 !important; // BUG: https://github.com/tinymce/tinymce/issues/4542
 }
 
 #mce-modal-block.mce-in {
     background-color: @color-dialog-overlay-background;
     opacity: 1 !important;
 }
 
 @media screen and (max-width: @screen-width-xs) {
     .mce-window {
         width: 100% !important;
         height: 100% !important;
         left: 0 !important;
         top: 0 !important;
         border-width: 0 !important;
 
         & > .mce-reset {
             display: flex;
             flex-direction: column;
             height: 100%;
         }
 
         .mce-window-body {
             flex: 1;
             overflow-y: auto !important;
         }
 
         & > .mce-reset > div,
         .mce-container-body {
             width: 100% !important;
         }
 
         .mce-window-head {
             background-color: @color-layout-mobile-header-background;
 
             .mce-title {
                 font-size: 1rem;
                 text-align: center;
                 padding: 0 1rem;
             }
 
             .mce-close {
                 display: none;
             }
         }
 
         .mce-foot {
             background-color: @color-layout-mobile-footer-background;
 
             .mce-container-body {
                 justify-content: space-evenly;
 
                 .mce-btn {
                     position: initial;
                     height: 100% !important;
                     margin: 0;
                     background: transparent;
                     border-width: 0;
 
                     &:focus {
                         box-shadow: none;
                     }
 
                     &:hover {
                         background: transparent;
                     }
 
                     &:last-child {
                         margin: 0;
                     }
 
                     button {
                         color: @color-font;
                         padding: .45rem;
                         font-size: .9rem;
 
                         &:before {
                             display: block;
                             float: none;
                             width: 100%;
                             margin: 0;
                             line-height: 1.75;
                             height: 1.75rem;
                         }
                     }
                 }
 
                 .mce-abs-end {
                     display: none;
                 }
             }
 
             .mce-search-foot {
                 div:nth-of-type(7) button:after {
                     display: none;
                 }
             }
         }
 
         .mce-form,
         .mce-form + .mce-container, // for Embed tab in Media dialog
         .mce-formitem,
         .mce-combobox,
         .mce-panel:not(.mce-popover) {
             width: 100% !important;
         }
 
         .mce-formitem {
             min-width: unset;
         }
 
         .mce-form {
             & > .mce-container-body {
                 display: flex;
                 flex-direction: column;
                 left: 0;
                 right: 0;
                 box-sizing: border-box;
             }
 
             .mce-container-body {
                 height: auto !important;
                 flex-direction: column;
 
                 & > label {
                     position: unset !important;
                     width: 100% !important;
                     max-width: 100%;
                 }
 
                 & > label + * {
                     position: unset !important;
                     width: auto !important;
                 }
 
                 & > .mce-checkbox {
                     position: absolute;
                     left: 0 !important;
                     top: 3rem !important;
                 }
             }
         }
 
         // FIXME: How to fix the input width in less hacky way?
         .mce-combobox input {
             max-width: ~"calc(100% - 4rem)";
         }
         .mce-combobox-fake input {
             max-width: ~"calc(100% - 1.7rem)";
         }
     }
 
     .mce-menu {
         width: @layout-mobile-menu-width !important;
         right: 0;
         top: 0 !important;
         left: auto !important;
         height: 100% !important;
         max-height: unset !important;
         padding: 0 !important;
         margin: 0 !important;
         border-radius: 0;
         border: 0 !important;
 
         .popover-header {
             display: block !important;
 
             a {
                 font-size: 1.2rem;
                 line-height: @layout-touch-header-height;
 
                 &:before {
                     content: @fa-var-times;
                 }
             }
         }
 
         .mce-container-body {
             width: 100% !important;
         }
 
         .mce-menu-item {
             height: @layout-touch-menu-record-height;
             line-height: @layout-touch-menu-record-height;
             padding: 0 .5rem;
             border-left: 0;
             border-bottom: 1px solid @color-list-border;
             margin: 0;
 
             .mce-ico {
                 font-size: 150%;
                 padding: 0 .7rem 0 .25rem;
                 margin-top: -.2rem;
             }
 
             .mce-text {
                 font-size: 1.2rem;
-                .font-family;
+                .font-family();
                 line-height: @layout-touch-menu-record-height;
                 color: @color-font;
             }
 
             .mce-caret {
                 display: none;
             }
 
             &.mce-menu-item-preview {
                 &.mce-active {
                     border-left: none;
                     position: relative;
 
                     &:after {
-                        .font-icon-class; // :extend() does not work here
+                        .font-icon-class(); // :extend() does not work here
                         content: @fa-var-check;
                         position: absolute;
                         right: .5rem;
                         top: 0;
                         color: @color-font;
                     }
                 }
             }
 
             &.mce-menu-item-expand {
                 position: relative;
 
                 &:after {
-                    .font-icon-class; // :extend() does not work here
+                    .font-icon-class(); // :extend() does not work here
                     content: @fa-var-angle-right;
                     position: absolute;
                     right: .5rem;
                     top: 0;
                     color: @color-font;
                 }
             }
         }
     }
 
     .mce-menu-item-sep,
     .mce-menu-shortcut {
         display: none !important;
     }
 
     .mce-charmap-dialog {
         position: unset !important;
 
         + .mce-container {
             display: none;
         }
     }
 
     .mce-charmap {
         display: block;
 
         tbody {
             display: block;
         }
 
         tr {
             display: flex;
             flex-wrap: wrap;
         }
 
         td {
             flex: 1;
             height: auto !important;
             min-width: 17%;
             padding: 0 !important;
             border: 0 !important;
             border-bottom: 1px solid @color-list-border !important;
 
             div {
                 font-size: 3rem;
                 line-height: 2;
             }
         }
     }
 }
 
 html.touch .mce-grid td {
     padding: .5rem;
 }
 
 
 /*** Media file selector for TinyMCE ***/
 
 .image-selector {
     margin: 1rem 1rem 1rem 1rem !important;
     padding: 1rem .5rem 10rem .5rem !important;
 
     &.droptarget {
         border: .2rem dashed @color-table-border;
 
         &:after {
             margin-top: 2rem;
         }
     }
 
     button {
-        .btn-secondary;
+        .btn-secondary();
         padding: .5rem .75rem;
         line-height: 1.5;
         position: relative;
 
         &:before {
             line-height: 1;
         }
     }
 
     form {
         position: absolute;
         top: 0;
     }
 
     .attachmentslist {
         margin-left: 0;
         overflow-x: hidden;
         overflow-y: auto;
         height: 19.1em;
 
         li {
             padding: .25rem;
             cursor: pointer;
 
             &:before {
                 display: none;
             }
 
             &:hover,
             &:focus {
                 background: @color-list-selected-background;
             }
 
             span.name {
                 flex: 1;
                 margin: auto;
                 padding-left: 1rem;
-                .overflow-ellipsis;
+                .overflow-ellipsis();
             }
 
             span.img {
                 height: 80px;
                 width: 80px;
                 display: flex;
                 border: 1px solid @color-list-border;
                 background: white;
                 border-radius: .75rem;
                 overflow: hidden;
             }
 
             img {
                 margin: auto;
             }
         }
 
         html.layout-phone & {
             height: auto;
         }
     }
 }
 
 
 /*** HTML editor widget ***/
 
 .html-editor {
     position: relative;
     margin-bottom: .2rem;
 
     .editor-toolbar {
         position: absolute;
         left: 1px;
         top: 1px;
         right: 1px;
         border-radius: .25rem .25rem 0 0;
         border-bottom: 1px solid @color-input-border;
         background-color: @color-input-addon-background;
 
         .mce-i-html {
             display: block;
             padding: 1px 5px;
             margin: 2px;
             width: 2rem;
             height: 24px;
             border: 1px solid transparent;
             color: #595959;
 
             &:focus,
             &:hover {
                 text-decoration: none;
                 border-color: #e2e4e7;
                 background-color: #fff;
             }
         }
     }
 
     // hide toolbar in html mode and in mailvelope mode
     &.mailvelope .editor-toolbar,
     .mce-tinymce + textarea + .editor-toolbar {
         display: none;
     }
 
     .mce-i-html:before,
     .mce-i-plaintext:before {
         &:extend(.font-icon-class);
         margin: 0;
         width: 1em;
         font-size: 1.2rem;
     }
 
     .mce-i-html:before {
         content: @fa-var-image;
         line-height: 1.2em;
     }
 
     .mce-i-plaintext:before {
         content: @fa-var-window-close; //@fa-var-align-justify;
     }
 
     & > .googie_edit_layer,
     & > textarea {
         font-family: monospace;
         width: 100% !important;
         padding-top: 2.5rem;
         resize: none;
     }
 
     & > iframe { // e.g. mailvelope frame
         border-radius: .3rem;
         border: 1px solid @color-input-border;
         min-height: 30em;
     }
 
     #composebody_ifr {
         min-height: 30em;
     }
 }
 
 
 /*** GoogieSpell widget ***/
 
 .googie_window {
     width: 16rem;
     height: auto;
 }
 
 .googie_edit_layer {
     font-family: monospace;
 
     // from Bootstrap's textarea
     padding: .5rem .75rem;
     border: 1px solid @color-input-border;
     border-radius: .3rem;
     line-height: 1.5;
 }
 
 .googie_link {
     color: @color-spellcheck-link;
     text-decoration: underline;
     cursor: pointer;
 }
 
 .googie_list {
     li {
         min-width: 8rem;
         width: auto;
 
         &.googie_list_onhover {
             color: @color-menu-hover;
             background-color: @color-menu-hover-background;
         }
 
         .googie_list_revert:before {
             &:extend(.font-icon-class);
             content: @fa-var-undo;
         }
 
         .googie_add_to_dict:before {
             &:extend(.font-icon-class);
             content: @fa-var-plus-square;
         }
     }
 
     input {
         display: inline-block;
         margin: .25rem .5rem;
     }
 }
diff --git a/skins/elastic/styles/widgets/forms.less b/skins/elastic/styles/widgets/forms.less
index 50bcb4ee2..b05d1eeb1 100644
--- a/skins/elastic/styles/widgets/forms.less
+++ b/skins/elastic/styles/widgets/forms.less
@@ -1,1393 +1,1393 @@
 /**
  * Roundcube Webmail styles for the Elastic skin
  *
  * Copyright (c) The Roundcube Dev Team
  *
  * The contents are subject to the Creative Commons Attribution-ShareAlike
  * License. It is allowed to copy, distribute, transmit and to adapt the work
  * by keeping credits to the original authors in the README.md file.
  * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
  */
 
 /*** Common form elements ***/
 
 #uploadform {
     display: none;
 }
 
 form.smart-upload,
 input.smart-upload {
     visibility: hidden;
     width: 1px;
     height: 1px;
     opacity: 0;
 }
 
 
 .propform {
     // TODO: do we need this?
     &:not(.popupmenu) {
         width: 100%;
     }
 
     // This is the way we can have multiple checkboxes in a single form field
     .form-check td:not(.title) > label {
         display: block;
         margin: 0;
         line-height: 2rem;
 
         label {
             margin-right: .5rem;
         }
     }
 
     td.datetime {
         display: flex;
 
         input:first-child {
             margin-right: .5rem;
         }
         input:last-child {
             width: 75%;
         }
     }
 
     td.rowbuttons {
         width: 1%;
         white-space: nowrap;
         vertical-align: top;
 
         span {
             display: none;
         }
 
         a {
             padding: 0;
             line-height: 2.3rem;
             height: 2.3rem;
             font-size: 1rem;
 
             &:before {
                 &:extend(.font-icon-class);
                 content: @fa-var-plus;
                 vertical-align: unset;
 
                 @media screen and (min-width: (@screen-width-bs-phone + 1px)) {
                     margin: 0 !important;
                 }
             }
 
             &.delete:before {
                 content: @fa-var-trash-alt;
             }
 
             &.advanced:before {
                 content: @fa-var-cog;
             }
 
             &:not(:last-child) {
                 margin-right: .25rem;
             }
         }
     }
 
     td.rowactions {
         width: 1%;
         vertical-align: top;
 
         .form-control {
             width: auto;
         }
     }
 
     td.rowtargets {
         vertical-align: top;
 
         .composite {
             input, textarea, select, .multi-input, .input-group {
                 margin-bottom: .5rem;
             }
 
             .input-group {
                 input, textarea, select, .multi-input {
                     margin-bottom: 0;
                 }
             }
 
             br {
                 display: block;
             }
         }
 
         .input-group {
             margin-bottom: .25rem;
 
             *:first-child.input-group-prepend {
                 text-align: left;
                 min-width: 7.5em;
 
                 & > * {
                     width: 100%;
                 }
             }
         }
 
         & > .advanced {
             margin-top: .25rem;
         }
     }
 
     td.title {
         padding-top: 0;
         padding-bottom: 0;
     }
 
     td > .flexbox {
         display: flex;
 
         & > .multi-input {
             width: 100%;
             margin-left: .25rem;
         }
     }
 
     &.groupped {
         &.readonly {
             legend {
                 margin: 0;
             }
 
             .row.input-group {
                 margin-bottom: 0 !important;
             }
 
             label {
                 min-width: 7rem;
                 // Overwrite Bootstrap .input-group-* style to make the label transparent
                 background-color: transparent;
                 border: 0;
                 border-radius: 0;
             }
         }
 
         .row.input-group {
             margin-bottom: .5rem;
             flex-wrap: nowrap;
 
             & > *:first-child {
-                .overflow-ellipsis;
+                .overflow-ellipsis();
                 min-width: 8rem;
 
                 &:not(select) {
                     padding: 0;
                 }
 
                 @media screen and (max-width: @screen-width-xs) {
                     min-width: 6rem;
                     width: 6rem;
                     flex-grow: unset;
                 }
 
                 label {
                     width: 100%;
                 }
             }
 
             & > *:nth-child(2) {
                 flex-grow: 30;
             }
 
             &:last-child {
                 margin-bottom: 1rem;
             }
 
             select {
                 text-align: left;
             }
 
             &.composite select {
                 height: auto;
             }
 
             .content {
                 padding: 0;
                 display: flex;
                 flex-wrap: wrap;
                 border-radius: 0;
 
                 input {
                     border-radius: 0;
                     border-color: transparent;
                 }
 
                 .ff_street {
                     width: 100%;
                 }
 
                 .ff_locality {
                     width: 75%;
                 }
 
                 .ff_zipcode {
                     width: 25%;
                 }
 
                 .ff_country, .ff_region {
                     width: 50%;
                 }
             }
         }
 
         .form-control-plaintext {
             flex-grow: 1;
             border: 0;
         }
     }
 
     .addfield {
         margin: 0;
 
         select {
             width: 8rem;
             margin-top: .5rem;
         }
     }
 
     .form-text {
         font-size: 90%;
         color: @color-form-hint;
     }
 
     // Some dialogs may use simple one-row forms like this
     &.row.form-group {
         margin-left: 0;
         margin-right: 0;
 
         label, div {
             padding-left: 0;
             padding-right: 0;
         }
     }
 
     // Some forms may use multiple elements that are not part of .input-group
     // add proper spacing
     select + select,
     select + .input-group {
         padding-top: .5rem;
     }
 
     &.text-only {
         margin-bottom: .25rem;
 
         tr {
             margin: 0;
         }
 
         label {
             padding-bottom: 0 !important;
         }
 
         @media screen and (max-width: @screen-width-bs-phone) {
             tr {
                 display: table-row;
             }
 
             td {
                 width: auto;
 
                 &:first-child {
                     width: 33%;
                 }
             }
 
             :not(tr).form-group.row {
                 .col-form-label {
                     width: 33%;
                 }
 
                 & > :last-child {
                     width: 67%;
                 }
             }
         }
     }
 }
 
 @media screen and (max-width: @screen-width-bs-phone) {
     .propform {
         table.compact-table {
             .rowactions > select,
             .flexbox > select {
                 width: 100%;
             }
 
             tr {
                 display: flex;
                 flex-direction: column;
 
                 td {
                     width: 100%;
                     padding: .25rem 0 0 0;
 
                     &.rowbuttons {
                         text-align: right;
                         padding-top: 0;
 
                         a {
                             margin-left: .5rem;
 
                             & > span {
                                 display: inline;
                             }
                         }
                     }
                 }
             }
         }
     }
 }
 
 .propform,
 .formcontent {
     fieldset:not(.tab-pane):nth-of-type(n+2) {
         margin-top: 1em;
     }
 
     legend {
         font-weight: bold;
         font-size: 1.2em;
     }
 
     label {
         -webkit-hyphens: auto;
         -ms-hyphens: auto;
         hyphens: auto;
         overflow: hidden;
         margin-bottom: 0;
     }
 }
 
 fieldset.advanced {
     > legend {
         width: auto;
         cursor: pointer;
 
         &:after {
             &:extend(.font-icon-class);
             float: right;
             margin: 0 0 0 .25rem;
             line-height: inherit;
             font-size: inherit;
             content: @fa-var-angle-up;
         }
 
         &.closed:after {
             content: @fa-var-angle-down;
         }
     }
 }
 
 @media screen and (max-width: @screen-width-bs-phone) {
     .formcontent .text-only {
         .form-group:not(tr) {
             margin-bottom: .25rem;
 
             .col-form-label {
                 width: 33%;
 
                 & + span {
                     width: 67%;
                 }
             }
         }
     }
 
     html.iframe .formcontent > .propform {
         padding: .25rem;
     }
 }
 
 // Forms fixes for IE and Edge
 html.ms .propform {
     .row:not(.form-check) > td {
         display: flex;
         flex-wrap: wrap; // puts "hint" element below the input
     }
     @media screen and (min-width: @screen-width-bs-phone) {
         .row.form-check > td {
             display: flex;
         }
     }
 }
 
 
 .formcontainer {
     display: flex;
     flex-direction: column;
     justify-content:flex-start;
     overflow-y: hidden !important;
 
     .formcontent {
         overflow-x: hidden;
         overflow-y: auto;
     }
 
     .formbuttons {
         padding: 0.5rem 1rem;
 
         button {
             margin-right: .5rem;
         }
     }
 
     // Prevent button truncation on tablets
     html.iframe.ipad &,
     html.iframe.webkit.tablet & {
         .formbuttons {
             min-height: 4rem;
         }
     }
 
     // We don't need buttons element on small devices, nor flex display
     html.layout-small &,
     html.layout-phone & {
         display: initial;
         overflow-y: auto !important;
 
         .formcontent {
             overflow: initial !important;
         }
 
         .formbuttons {
             display: none;
         }
     }
 }
 
 
 .formcontent {
     &:not(.popupmenu) {
         padding: 1rem;
     }
 
     .row {
         margin-right: 0; // without these the form is too wide causing horizontal scrollbar appearence
         margin-left: 0;
 
         // Note: We never use odd numbers here
         .col, .col-2, .col-4, .col-6, .col-8, .col-10, .col-12,
         .col-sm, .col-sm-2, .col-sm-4, .col-sm-6, .col-sm-8, .col-sm-10, .col-sm-12 {
             // overwrite Bootstrap's redundant padding
             padding: 0;
         }
 
         .form-control-plaintext,
         label.col-form-label {
             padding: floor(.375 * @page-font-size) floor(.375 * @page-font-size) floor(.375 * @page-font-size) 0;
         }
 
         .form-control-plaintext {
             padding-bottom: 0;
             border: 0;
         }
 
         @media screen and (max-width: @screen-width-bs-phone) {
             &.form-group {
                 & > td label {
                     padding-bottom: 0;
                 }
             }
         }
     }
 
     .row.form-check {
         padding: 0; // without these e.g. inputs in compose screen are not aligned properly
         display: flex; // https://github.com/twbs/bootstrap/issues/22348
         flex-wrap: nowrap;
 
         // alignment fixes needed because we do not stick precissely to Bootstrap's form structure
         @media screen and (max-width: @screen-width-bs-phone) {
             .col-6 {
                 max-width: 100%;
                 flex: auto;
             }
 
             & > *:last-child {
                 width: 1%;
                 min-width: 2.6rem; // for .custom-switch
             }
 
             &.with-link > *:last-child {
                 min-width: 8rem;
             }
         }
 
         .form-check-input {
             margin: .5rem 0; // fixes checkbox alignment with other inputs in a form
         }
 
         .custom-switch + a {
             line-height: 2;
             vertical-align: bottom;
         }
 
         td > label {
             padding-bottom: 0;
         }
     }
 
     .nav-tabs {
         margin-bottom: 1rem;
 
         &:empty {
             display: none;
         }
     }
 
     .hint {
         font-style: italic;
         color: @color-form-hint;
     }
 
     // RAW (CodeMirror) editor
     &.raweditor {
         height: 100%;
 
         form {
             height: 100%;
         }
 
         textarea {
             font-family: monospace;
             height: 100%;
         }
 
         .CodeMirror {
             border: 1px solid @color-input-border;
             border-radius: .3rem;
             height: 100%;
             color: @color-font;
         }
 
         .CodeMirror-focused {
             border-color: @color-input-border-focus;
             box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow;
         }
 
         .CodeMirror-linebackground.line-error {
             background-color: @color-error;
             opacity: 0.4;
         }
 
         .errorGutter {
             width: .8em;
         }
     }
 }
 
 @media screen and (max-width: @screen-width-mini) {
     .formcontent {
         .col-form-label {
             flex: auto;
             max-width: 100%;
         }
         .col-6, .col-8, .col-10 {
             flex: auto;
             max-width: 100%;
         }
     }
 }
 
 
 /* Some common icons for "iconized inputs" */
 .input-group .icon {
     text-decoration: none;
     padding: floor(.375 * @page-font-size) .5rem;
 
     &.input-group-text {
         min-width: 2.4rem;
     }
 
     &:before {
         &:extend(.font-icon-class);
         margin: 0 !important;
         line-height: 1;
         font-size: 1.1rem;
     }
     &.user:before {
         content: @fa-var-user;
     }
     &.pass:before {
         content: @fa-var-lock;
     }
     &.host:before {
         content: @fa-var-home;
     }
     &.language:before {
         content: @fa-var-globe;
     }
     &.cancel:before {
         content: @fa-var-times;
     }
     &.delete:before {
         content: @fa-var-trash-alt;
     }
     &.edit:before {
         content: @fa-var-pencil-alt;
     }
     &.add:before {
         content: @fa-var-plus;
     }
     &.add.recipient:before {
         content: @fa-var-users;
     }
     &.search:before {
         content: @fa-var-search;
     }
     &.filter:before {
         content: @fa-var-filter;
     }
     &.key:before {
         content: @fa-var-key;
     }
 
     .inner {
         display: none;
     }
 }
 
 .input-group a {
     &:focus {
         background-color: @color-input-border-focus-shadow;
         outline: 0;
     }
 }
 
 @proplist-record-height: 2rem;
 .proplist {
     margin-bottom: 0;
     padding: 0;
 
     li {
         list-style-type: none;
         line-height: @proplist-record-height;
         margin-bottom: .25rem;
         display: flex;
         align-items: center;
 
         &:last-child {
             margin-bottom: 0;
         }
 
         input[type=radio] {
             margin-right: .5em;
 
             &:disabled + label {
                 opacity: .5;
             }
         }
 
         label:not(.input-group-text) {
             margin: 0;
             line-height: @proplist-record-height;
         }
 
         select {
             width: auto;
             display: inline;
         }
     }
 }
 
 .checklist {
     & > div {
         line-height: 2rem;
         display: block; // overwrite .custom-switch
     }
 
     .custom-control-label {
         &:before,
         &:after {
             margin: calc(floor(.15 * @page-font-size) * -1) 0 0 0;
         }
     }
 
     & > div + br {
         display: none;
     }
 }
 
 /*** Forms in popups ***/
 
 .popup form.propform {
     padding: .25rem;
     overflow-x: hidden;
 }
 
 .popupmenu.form {
     &.nolist {
         padding: 0 .5rem;
     }
 
     ul {
         list-style-type: none;
         padding: 0;
         margin: 0;
     }
 
     li:not(.separator) {
         padding: 0 1rem;
 
         label {
             margin: 0;
             line-height: @listing-line-height;
 
             input {
                 margin-right: .5rem;
             }
         }
     }
 
     input {
         vertical-align: middle;
     }
 
     select {
         margin: .5rem 0;
     }
 
     .buttons {
         text-align: center;
         padding: .5rem;
     }
 }
 
 
 /*** Smart list (multiple input) field ***/
 
 .multi-input {
     & > .content {
         max-height: 11.65em;
         overflow: hidden;
         overflow-y: auto;
         border-radius: .25rem;
         border: 1px solid @color-input-border;
 
         &.focused {
-            .style-input-focus;
+            .style-input-focus();
         }
 
         // TODO: style button focus
     }
 
     a.icon {
         &.reset:before {
             &:extend(.font-icon-class);
             content: @fa-var-trash-alt;
         }
     }
 
     input.form-control {
         padding-left: .75rem;
         height: auto; // fixes input height
     }
 
     input,
     input:focus,
     .input-group-text {
         border-radius: 0;
         border: 0;
         border-bottom: 1px solid @color-input-border;
         box-shadow: none;
     }
 
     .input-group-text {
         border-left: 1px solid @color-input-border;
     }
 
     .input-group-append {
         margin-left: 0;
     }
 
     .input-group {
         margin: 0 !important;
         flex-wrap: nowrap; // Bootstrap makes them wrappable (imho)
 
         &:last-child * {
             border-bottom: 0;
         }
     }
 
     & + .btn {
         margin-top: .5rem;
     }
 
     &.is-invalid {
         & > .content {
             border: 1px solid @color-input-border-invalid;
             &.focused {
                 border-color: @color-input-border-invalid;
                 box-shadow: 0 0 0 .2rem @color-input-border-invalid-shadow;
             }
         }
 
         & > .invalid-feedback {
             display: inline-block;
             line-height: 1.5;
         }
     }
 }
 
 
 /*** Files upload widget with list of files, upload form and drop area ***/
 
 .file-upload {
     padding: 1rem 1rem 12rem;
     margin: 0 1rem .25rem 1rem;
     border-radius: .5rem;
     border: .2rem dashed @color-table-border;
 
     fieldset & {
         margin: 0;
     }
 
     .upload-form {
         text-align: center;
         padding-bottom: 1em;
 
         a.btn,
         button {
             margin-bottom: .25rem;
         }
     }
 
    .hint {
         margin-bottom: .5rem;
         color: @color-form-hint;
         text-align: center;
     }
 
     .attachmentslist {
         border: 0;
         background: transparent;
 
         li {
             position: relative;
             display: flex;
             padding-right: 1.5em;
             margin: 0.15em 0;
 
             a.filename {
                 flex: 1;
             }
 
             a.delete,
             a.cancelupload {
                 position: absolute;
                 right: 0.25em;
                 width: auto; // fix button width if the widget is in a .popupmenu
             }
 
             a.dropdown {
                 margin-right: .5em;
             }
 
             .inner {
                 display: none;
             }
         }
     }
 
     &.droptarget {
         padding-bottom: .5rem !important;
 
         &:after {
             content: @icon-file-drop;
             width: 10rem;
             margin: 5rem auto 0 auto;
             display: block;
         }
 
         &.active {
             border-color: darken(@color-toolbar-button-background-hover, 20%);
         }
 
         &.hover {
             border-color: darken(@color-toolbar-button-background-hover, 20%);
             background-color: @color-toolbar-button-background-hover;
         }
     }
 }
 
 
 /*** Smart recipient input field ***/
 
 @recipient-input-margin-fix: round(.25 * @page-font-size);
 
 .recipient-input {
     display: flex;
     flex-wrap: wrap;
     padding: 0 .75rem @recipient-input-margin-fix .75rem;
     list-style-type: none;
     cursor: text;
     height: auto; // reset .form-control height
 
     &.focus {
-        .style-input-focus;
+        .style-input-focus();
     }
 
     .recipient {
         display: flex;
         position: relative;
         max-width: ~"calc(50% - 3px)";
         border: 1px solid @color-recipient-input-border;
         background-color: @color-recipient-input-background;
         border-radius: .25em;
         padding: 0 .25em;
         margin-top: @recipient-input-margin-fix;
         margin-right: .2em;
         white-space: nowrap;
         cursor: default;
 
         @media screen and (max-width: 450px) {
             width: 100%;
             max-width: 100%;
         }
     }
 
     .name {
-        .overflow-ellipsis;
+        .overflow-ellipsis();
         flex-grow: 1;
         line-height: 1.1;
         padding: floor(.25 * @page-font-size);
         vertical-align: middle;
     }
 
     .email {
         text-indent: -5000rem;
         display: inline-block;
         width: 0;
     }
 
     .quotes {
         position: absolute;
         width: 0;
         opacity: 0;
     }
 
     a.button.icon {
         font-size: .8em;
         cursor: pointer;
         padding: 0;
 
         &:before {
             float: none;
             display: inline-block;
             width: 1em;
             line-height: 1.5;
         }
     }
 
     li {
         max-width: 100%;
 
         &:not(.recipient) {
             user-select: text;
         }
 
         &.input {
             flex: 1;
             min-width: 100px;
         }
     }
 
     input {
         width: 100%;
         background: transparent !important;
         border: 0 !important;
         margin-top: @recipient-input-margin-fix;
         outline: 0;
         line-height: 1.5;
 
         &::-ms-clear {
             display: none; // removes clear icon in IE11
         }
     }
 }
 
 /*** Tagedit widget (from jqueryui plugin) ***/
 
 .tagedit-list {
     display: flex;
     flex-wrap: wrap;
     padding: 0 .75rem @recipient-input-margin-fix .75rem;
     margin: 0;
     list-style-type: none;
     min-height: 2.3rem;
 
     & + .placeholder {
         display: none;
     }
 
     &[tabindex="-1"] {
-        .style-input-focus;
+        .style-input-focus();
     }
 
     li.tagedit-listelement-new {
         margin-top: @recipient-input-margin-fix;
 
         input {
             width: 15px;
             background: transparent !important;
             border: 0;
             outline: 0;
             margin: 0;
             padding: 0;
             line-height: 1.5;
 
             &.tagedit-input-disabled {
                 visibility: hidden;
             }
         }
     }
 
     li.tagedit-listelement-old {
         max-width: 50%;
         border: 1px solid @color-recipient-input-border;
         background-color: @color-recipient-input-background;
         border-radius: .25em;
         margin-top: @recipient-input-margin-fix;
         margin-right: .2em;
         white-space: nowrap;
 
         a /* TODO: .tagedit-close, .tagedit-break, .tagedit-delete, .tagedit-save */ {
             font-size: .8em;
             cursor: pointer;
             display: inline-block;
             width: 1.1em;
             overflow: hidden;
             vertical-align: middle;
             margin-right: .2rem;
 
             &:before {
                 &:extend(.font-icon-class);
                 content: @fa-var-times;
                 width: 1em;
                 line-height: 1.2;
             }
         }
 
         span {
-            .overflow-ellipsis;
+            .overflow-ellipsis();
             flex-grow: 1;
             display: inline-block;
             line-height: 1.4;
             padding: 0 .25rem;
             vertical-align: middle;
         }
     }
 
     li.tagedit-listelement-focus {
         // TODO
     }
 }
 
 
 /*** Skin selection widget ***/
 
 .skinselection {
     white-space: nowrap;
     display: table-row;
 
     & > span {
         display: table-cell;
         vertical-align: middle;
         padding: .1em .5em;
         white-space: normal;
 
         &:last-child {
             padding-right: 0;
         }
     }
 
     .skinitem input {
         width: auto;
     }
 
     .skinname {
         font-weight: bold;
     }
 
     .skinlicense,
     .skinlicense a {
         font-style: italic;
         text-decoration: none;
     }
 
     .skinlicense a:hover {
         text-decoration: underline;
     }
 
     .skinlicense,
     .skinauthor {
         font-size: 90%;
     }
 
     .skinthumbnail {
         width: 64px;
         height: 64px;
         border: 1px solid @color-input-border;
         background: #fff;
         border-radius: 4px;
     }
 }
 
 /*** Percent input with jQuery-UI slider ***/
 
 // Structure: <input><span.label><div.ui-slider>
 .input-percent-slider {
     display: flex;
     align-items: center;
 
     input {
         max-width: 4em;
     }
 
     span.label {
         line-height: 2.4;
         padding: 0 .5rem 0 .25rem;
     }
 
     div.ui-slider {
         flex: 1;
         margin: 0 .5em;
     }
 }
 
 
 /*** Image upload widget ***/
 
 .image-upload {
     position: relative;
     overflow: hidden;
     cursor: pointer;
     background-color: @color-image-upload-background;
 
     a.button {
         display: none;
         position: absolute;
         left: 0;
         top: 0;
         background-color: rgba(255, 255, 255, .85);
         border-radius: 5px;
         width: 2.5em;
         padding: .5em;
         margin: .5em;
         line-height: 1;
     }
 
     &.changed a.button {
         display: inline;
     }
 }
 
 .input-group-combo {
     select:first-of-type {
         &.alone {
             border-radius: .25rem !important;
         }
 
         &:not(.alone) {
             flex: unset;
             width: auto;
         }
     }
 
     .input-group {
         padding: 0 !important;
         flex: 2;
     }
 
     select + select,
     .input-group :first-child {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
     }
 }
 
 
 /*** General browser hacks ***/
 
 // Remove outline on selects in Firefox
 @-moz-document url-prefix() {
     select:-moz-focusring {
        color: transparent !important;
        text-shadow: 0 0 0 @color-font !important;
     }
 }
 
 
 /*** Bootstrap style overrides and improvements ***/
 
 .form-control {
     color: @color-font;
 
     &:focus {
         color: @color-font;
         border-color: @color-input-border-focus;
         box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow;
     }
 
     // FIXME: This fixes style of required inputs in Firefox/Edge, but
     // makes inputs on login form red-bordered, commented for now
     // &:invalid,
     &.is-invalid {
         border-color: @color-input-border-invalid;
         box-shadow: none;
 
         &:focus {
             border-color: @color-input-border-invalid;
             box-shadow: 0 0 0 .2rem @color-input-border-invalid-shadow;
         }
     }
 
     &::placeholder {
         color: @color-input-placeholder;
     }
 
     // Note: This must be a separate rule
     &::-ms-input-placeholder,
     &::-webkit-input-placeholder {
         color: @color-input-placeholder;
     }
 }
 
 .invalid-feedback {
     color: @color-error;
     font-size: 90%;
 }
 
 .form-group {
     margin-bottom: .5rem;
 }
 
 .input-group-text {
     color: @color-input;
     background-color: @color-input-addon-background;
 
     input:focus {
         z-index: 1;
         border-color: @color-input-border-focus !important;
     }
 }
 
 .custom-switch {
     padding-left: 0;
     display: inline-block;
 
     .custom-control-input {
         left: 0;
 
         &:focus ~ .custom-control-label:before {
             box-shadow: 0 0 0 .2rem @color-checkbox-focus-shadow;
         }
 
         &:focus:not(:checked) ~ .custom-control-label::before {
             border-color: @color-checkbox-focus;
         }
 
         &:checked ~ .custom-control-label::before {
             border-color: @color-checkbox;
             background-color: @color-checkbox;
         }
 
         &:checked:disabled ~ .custom-control-label::before {
             border-color: @color-checkbox-checked-disabled;
             background-color: @color-checkbox-checked-disabled;
         }
     }
 
     // Make switches bigger, we use smaller font than Bootstrap's default
 
     .custom-control-label {
         padding-left: 2.5rem;
         min-height: 2rem;
         line-height: 2;
         display: inline-block;
 
         html.touch & {
             padding-left: 3rem;
         }
 
         &:before,
         &:after {
             border-radius: .6rem;
             margin: floor(.15 * @page-font-size) 0;
 
             html.touch & {
                 border-radius: .8rem;
                 margin: 0;
             }
         }
 
         &:before {
             left: 2px;
             top: 4px;
             width: floor(1.9 * @page-font-size);
             height: floor(1.2 * @page-font-size);
 
             html.touch & {
                 top: floor(.2 * @page-font-size);
                 width: floor(2.5 * @page-font-size);
                 height: floor(1.6 * @page-font-size);
             }
         }
 
         &:after {
             left: 4px;
             top: 6px;
             width: floor(1.2 * @page-font-size) - 4;
             height: floor(1.2 * @page-font-size) - 4;
 
             html.touch & {
                 top: floor(.2 * @page-font-size) + 2;
                 height: floor(1.6 * @page-font-size) - 4;
                 width: floor(1.6 * @page-font-size) - 4;
             }
         }
     }
 
     .custom-control-input:checked ~ .custom-control-label::after {
         transform: translateX(floor(1.2 * @page-font-size) - 6);
 
         html.touch & {
             transform: translateX(floor(1.6 * @page-font-size) - 9);
         }
     }
 
     .custom-control-input:not(:disabled) ~ .custom-control-label {
         &:after, &:before {
             cursor: pointer;
         }
     }
 }
 
 .custom-file {
     display: block;
 
     .custom-file-label {
         white-space: nowrap;
-        .overflow-ellipsis;
+        .overflow-ellipsis();
         padding-right: 100px;
         line-height: 1.5 !important;
     }
 
     & + .hint {
         margin-top: floor(.25 * @page-font-size);
     }
 }
 
 .custom-file-input:focus ~ .custom-file-label {
     border-color: @color-input-border-focus;
     box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow;
 }
diff --git a/skins/elastic/styles/widgets/jqueryui.less b/skins/elastic/styles/widgets/jqueryui.less
index 56a060932..383f14202 100644
--- a/skins/elastic/styles/widgets/jqueryui.less
+++ b/skins/elastic/styles/widgets/jqueryui.less
@@ -1,438 +1,438 @@
 /**
  * Roundcube Webmail styles for the Elastic skin
  *
  * Copyright (c) The Roundcube Dev Team
  *
  * The contents are subject to the Creative Commons Attribution-ShareAlike
  * License. It is allowed to copy, distribute, transmit and to adapt the work
  * by keeping credits to the original authors in the README.md file.
  * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
  */
 
 /*** jQuery-UI widgets' style overrides ***/
 
 .ui-widget-overlay {
     background-color: @color-dialog-overlay-background;
     opacity: 1 !important; // override jQuery-UI opacity, the color above is semi-transparent
 
     &.datepicker {
         z-index: 119; // above Bootstrap's form controls, below datepicker
     }
 }
 
 .ui-widget {
     border: 1px solid @color-datepicker-border;
     box-shadow: 3px 3px 5px @color-popover-shadow;
     border-radius: .3rem;
 }
 
 .ui-menu {
     overflow-y: auto;
     overflow-x: hidden;
     max-height: 400px;
     border-radius: .3rem;
     z-index: 240;
     position: absolute;
 
    .ui-state-active {
         border: 0 !important;
         background-color: @color-menu-hover-background !important;
     }
 
     .ui-menu-item {
         white-space: nowrap;
         cursor: default;
     }
 
     .ui-menu-item-wrapper {
         margin: 0 !important;
     }
 }
 
 .ui-dialog {
     border-radius: 0;
     box-shadow: none;
 
     &.no-titlebar {
         .ui-dialog-titlebar {
             display: none;
         }
     }
 
     .ui-dialog-titlebar {
         height: @layout-header-height;
         border-bottom: 1px solid @color-dialog-header-border;
 
         button {
             &:before {
                 margin: 0;
             }
         }
     }
 
     .ui-dialog-title {
         line-height: @layout-header-height;
         font-size: 1.25rem;
         padding: 0 3rem 0 1rem;
         color: @color-dialog-header;
     }
 
     .ui-dialog-titlebar-close {
         border: 0;
         color: @color-dialog-header;
         background: transparent;
         right: 0;
         top: 0;
         position: absolute;
         padding: .25rem .5rem;
         margin: ((@layout-header-height - 2 * @page-font-size) / 2) .5rem;
 
         &:before {
             &:extend(.font-icon-class);
             content: @fa-var-times;
             line-height: 1.5rem;
             margin: 0 !important;
         }
     }
 
     .ui-dialog-content {
         & > .popupmenu {
             display: block !important;
         }
     }
 
     .ui-dialog-buttonpane {
         .ui-dialog-buttonset {
             display: flex;
             justify-content: flex-end;
 
             a.btn-link,
             button {
-                .overflow-ellipsis;
+                .overflow-ellipsis();
                 min-width: 5rem;
                 margin: floor(.65 * @page-font-size) floor(.3 * @page-font-size);
 
                 &:last-child {
                     margin-right: 0;
                 }
             }
 
             a.btn-link {
                 padding-right: 0;
                 padding-left: 0;
                 text-decoration: none;
                 color: @color-font;
 
                 &:focus {
                     background-color: fade(@color-btn-primary-background, 50%);
                 }
 
                 &.options {
                     order: -1;
                     padding: .375rem .25rem;
                     margin-right: .3rem;
 
                     &:before {
                         // this icon is for mobile version
                         &:extend(.font-icon-class);
                         content: @fa-var-cog;
                         width: 100%;
                         height: 1.25em;
                     }
                 }
             }
         }
     }
 
     iframe,
     .ui-dialog-content.iframe {
         padding: 0;
         width: 100% !important;
         height: 100%;
         border: 0;
         overflow: hidden;
     }
 }
 
 // Fix scrollbar/resize issue e.g. in qr-code dialog
 .ui-dialog,
 .ui-dialog-content {
     box-sizing: initial;
 }
 
 // Overwriting this icon generally prevents from loading bigger images sprite from jQuery-UI
 .ui-widget-content .ui-icon.ui-resizable-se {
     background: @icon-resize-corner;
 }
 
 /* FIXME: why do I need !important here? */
 
 @media screen and (max-width: @screen-width-xs) {
     .ui-dialog {
         width: 100% !important;
         height: 100% !important;
         display: flex;
         flex-direction: column;
         border: 0;
         top: 0 !important; // for Chrome
 
         .ui-resizable-handle,
         .ui-dialog-titlebar-close {
             display: none !important;
         }
 
         .ui-dialog-titlebar {
             height: @layout-touch-header-height;
             text-align: center;
             background-color: @color-layout-mobile-header-background;
         }
 
         .ui-dialog-title {
             line-height: @layout-touch-header-height;
             font-size: @layout-header-font-size;
             padding: 0 1rem;
         }
 
         .ui-dialog-content {
             flex: 1;
             &:not(.iframe) {
                 padding: 1rem;
             }
         }
 
         .ui-dialog-buttonpane {
             padding: 0 !important;
             text-align: center !important;
             border-top: 1px solid @color-dialog-header-border;
             height: @layout-header-height !important;
             background-color: @color-layout-mobile-footer-background;
 
             .ui-dialog-buttonset {
                 justify-content: space-around;
 
                 button {
                     margin: 0 !important;
                     padding: .45rem;
                     border: 0 !important;
                     height: @layout-header-height;
                     box-shadow: none;
                     font-size: 90%;
                     line-height: 1.5;
 
                     &:before {
                         display: block !important;
                         float: none;
                         width: auto;
                         height: 1.75rem;
                         line-height: 1.75;
                         margin: 0 !important;
                     }
 
                     &:active {
                         box-shadow: none;
                     }
 
                     &.btn-primary,
                     &.btn-secondary {
                         color: @color-toolbar-button;
                         background: transparent;
                     }
 
                     &.btn-danger {
                         color: @color-btn-danger-background;
                         background: transparent;
                     }
 
                     &.disabled,
                     &:disabled {
                         opacity: .5;
                     }
 
                     &.cancel {
                         order: 100; // makes Cancel/close button the last one
                     }
                 }
 
                 a.btn-link {
                     color: @color-toolbar-button;
                     margin: 0;
                     padding: .45rem;
                     font-size: 90%;
 
                     &.options:before {
                         display: block !important;
                         height: 1.75rem;
                         line-height: 1.75;
                         margin: 0;
                     }
                 }
             }
         }
     }
 }
 
 /* Slider widget */
 
 .ui-slider {
     box-shadow: none;
 
     .ui-slider-range {
         border-radius: .3rem;
         background: lighten(@color-main, 30%);
     }
 
     .ui-slider-handle {
         border-radius: .3rem;
 
         &.ui-state-active {
             background: @color-main;
             border-color: @color-main-dark;
         }
     }
 }
 
 /* Datepicker widget */
 
 .ui-datepicker {
     // Always display datepicker centered, overwriting widgets position
     margin: ~"calc(50vh - 10em) calc(50vw - 10em) !important";
     top: 0 !important;
     left: 0 !important;
     box-shadow: none;
     user-select: none;
 
     &:not(.ui-datepicker-inline) {
         z-index: 120 !important; // fixes datepicker over input-group and dialogs
     }
 
     .ui-datepicker-header,
     .ui-datepicker-title {
         line-height: 4rem;
         height: 4rem;
         padding: 0;
     }
 
     .ui-datepicker-header {
         border-bottom: 1px solid @color-dialog-header-border;
 
         a {
             height: 4rem;
         }
 
         select {
             display: inline-block;
         }
     }
 
     .ui-icon {
         background-image: none !important;
         background-position: none !important;
     }
 
     .ui-datepicker-prev,
     .ui-datepicker-next {
         cursor: pointer;
         width: auto;
 
         &:before {
         &:extend(.font-icon-class);
             content: "\f053";
             margin: 0 .25em;
             height: auto;
             width: 1em;
         }
     }
 
     .ui-datepicker-prev:before {
         content: "\f053";
     }
 
     .ui-datepicker-next:before {
         content: "\f054";
     }
 
     td a {
         padding: 0;
         line-height: 1.8em;
         border-radius: .3rem;
     }
 
     .ui-state-default,
     &.ui-widget-content .ui-state-default {
         border: 0;
         background: transparent;
         color: @color-datepicker-font;
     }
 
     .ui-datepicker-days-cell-over a,
     .ui-datepicker-days-cell-over a.ui-state-default,
     .ui-state-highlight,
     &.ui-widget-content .ui-state-highlight {
         background: @color-datepicker-highlight-background;
         color: @color-datepicker-highlight;
     }
 
     a.ui-state-active {
         background: @color-datepicker-active-background !important;
         color: @color-datepicker-active !important;
         font-weight: bold;
     }
 
     html.touch {
         & {
             td a {
                 font-size: 1.2em;
                 line-height: 2.2em;
             }
         }
     }
 }
 
 // Fixes datepicker z-index issue on input-group inputs in dialogs
 // With non-relative position the input's z-index is ignored
 .input-group > .form-control.hasDatepicker {
     position: initial;
 }
 
 .minicolors-panel {
     border: 1px solid @color-datepicker-border;
     box-shadow: 3px 3px 5px @color-popover-shadow;
     border-radius: .3rem;
     height: 152px;
     padding: 1px;
 }
 
 .input-group {
     .minicolors-input {
         width: 100%;
         // needed so minicolors panel is not out of screen
         // when the input is on the right side, e.g. Calendar plugin settings
         // This is obviously minicolors script issue
         min-width: 130px;
         border-left: 0;
         border-right: 0;
     }
 }
 
 @media screen and (max-width: @screen-width-mini) {
     .ui-widget-content {
         border-radius: 0;
     }
 
     .ui-menu {
         border-radius: .3rem;
         left: 15px !important;
         right: 15px;
         width: auto;
     }
 
     .ui-dialog {
         .ui-dialog-content:not(.iframe) {
             padding: .65rem;
         }
     }
 
     .ui-autocomplete {
         // TODO: e.g. time input autocompletion on mobile
     }
 }
diff --git a/skins/elastic/styles/widgets/lists.less b/skins/elastic/styles/widgets/lists.less
index b6e9a4ff8..97ef87e5b 100644
--- a/skins/elastic/styles/widgets/lists.less
+++ b/skins/elastic/styles/widgets/lists.less
@@ -1,1035 +1,1035 @@
 /**
  * Roundcube Webmail styles for the Elastic skin
  *
  * Copyright (c) The Roundcube Dev Team
  *
  * The contents are subject to the Creative Commons Attribution-ShareAlike
  * License. It is allowed to copy, distribute, transmit and to adapt the work
  * by keeping credits to the original authors in the README.md file.
  * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
  */
 
 /*** List and treelist widgets ***/
 
 .listing {
     tbody td,
     li {
         border-bottom: 1px solid @color-list-border;
         cursor: default;
         font-weight: normal;
         line-height: @listing-line-height;
     }
 
     tbody td,
     li a {
         padding: 0 .5rem;
         white-space: nowrap;
         vertical-align: middle;
         color: @color-list;
     }
 
     tbody td {
-        .overflow-ellipsis;
+        .overflow-ellipsis();
         outline: none;
 
         a {
             color: @color-list;
         }
     }
 
     li a {
         display: block;
         text-decoration: none;
         cursor: default;
         width: 100%;
     }
 
     li.selected,
     tr.selected td {
         color: @color-list-selected;
         background-color: @color-list-selected-background;
     }
 
     td.selection {
         padding: 0 0 0 .5em;
         width: 2em;
         text-align: center;
 
         & > input {
             vertical-align: middle;
         }
     }
 
     &:not(.withselection) td.selection {
         display: none;
     }
 
     td.name {
-        .overflow-ellipsis;
+        .overflow-ellipsis();
     }
 
     td.action {
         padding: 0 .5em;
         width: 2em;
         text-align: center;
 
         &:empty {
             width: 0;
         }
 
         a {
             display: block;
             overflow: hidden;
             text-decoration: none;
 
             &:before {
                 &:extend(.font-icon-class);
                 margin: 0;
                 font-size: 1rem;
             }
         }
 
         a.pushgroup:before {
             content: @fa-var-chevron-right;
         }
     }
 
     li.droptarget > a,
     tr.droptarget > td {
         background-color: @color-list-droptarget-background;
     }
 
     li.disabled,
     tr.disabled td {
         color: @color-list-deleted;
     }
 
     li > a.virtual,
     li.virtual > a {
         opacity: .4;
     }
 
     span.secondary {
         color: @color-list-secondary;
     }
 }
 
 // Focus indicator
 html:not(.touch) {
     .listing {
         li > a,
         tbody tr > td:first-child,
         &:not(.withselection) tbody tr > td.selection + td {
             border-left: 2px solid transparent;
         }
 
         li > a:focus,
         &.focus tbody tr.focused > td:first-child,
         &.focus:not(.withselection) tbody tr.focused > td.selection + td {
             border-left: 2px solid @color-list-focus-indicator;
             outline: 0;
         }
     }
 }
 
 table.listing {
     width: 100%;
     table-layout: fixed;
     // border-spacing/border-collapse here fix problem with our focus indicator
     // when the table cells use overflow: hidden. I.e. we use border-spacing:0
     // instead of Bootstrap's border-collapse:collapse. Is this cross-browser?
     border-spacing: 0;
     border-collapse: unset;
 }
 
 ul.listing {
     margin: 0;
     padding: 0;
 
     & > ul {
         padding: 0;
     }
 
     li {
-        .overflow-ellipsis;
+        .overflow-ellipsis();
         white-space: nowrap;
         position: relative;
         list-style: none;
 
         ul {
             border-top: 1px solid @color-list-border;
             padding-left: 1.5em;
 
             li:last-child {
                 border-bottom: none;
             }
         }
 
         .custom-switch {
             position: absolute;
             padding: 0;
             top: 0;
             right: 0;
             height: @listing-line-height;
             vertical-align: middle;
 
             .custom-control-label {
                 &:before,
                 &:after {
                     margin-top: .4rem;
 
                     html.touch & {
                         margin-top: .75rem;
                     }
                 }
             }
 
             html.touch & {
                 height: @listing-touch-line-height;
             }
         }
     }
 
     &.simplelist {
         li {
             padding: 0 .5rem;
         }
     }
 }
 
 .listing-info {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 80%;
     text-align: center;
     font-weight: bold;
     color: @color-list-secondary;
 }
 
 html.touch {
     .listing:not(.toolbar) li,
     .listing tbody td {
         line-height: @listing-touch-line-height;
         font-size: 1.2rem;
     }
 
     li input[type=checkbox] {
         height: @listing-touch-line-height;
     }
 
     td.selection {
         padding: 0;
         width: 3em;
     }
 }
 
 @media screen and (max-width: @screen-width-large) {
     .listing.selection-large-only {
         li.selected {
             color: @color-list;
             background-color: transparent;
         }
     }
 }
 
 
 /* icons */
 
 .listing.iconized li {
     a:before {
         &:extend(.font-icon-class);
         height: 2em; // TODO: ?
         margin-right: .5rem;
     }
     &.preferences > a:before {
         content: @fa-var-sliders-h;
     }
     &.folders > a:before {
         content: @fa-var-folder;
     }
     &.responses > a:before {
         content: @fa-var-comment;
     }
     &.identities > a:before {
         content: @fa-var-id-card;
     }
     &.password > a:before {
         content: @fa-var-lock;
     }
     &.addressbook a:before {
         .font-icon-regular(@fa-var-address-book);
     }
     &.contactgroup a:before {
         .font-icon-solid(@fa-var-users);
     }
     &.contactsearch a:before {
         content: @fa-var-search;
     }
     &.filter > a:before {
         content: @fa-var-filter;
     }
     &.vacation > a:before {
         .font-icon-regular(@fa-var-clock);
     }
     &.forward > a:before {
         content: @fa-var-share-square;
     }
     &.enigma.keys > a:before {
         content: @fa-var-key;
     }
     &.userinfo > a:before {
         content: @fa-var-info-circle;
     }
     &.twofactorauth > a:before {
         content: @fa-var-sign-in-alt;
     }
 
     a.help:before {
         content: @fa-var-life-ring;
     }
     a.about:before {
         .font-icon-regular(@fa-var-question-circle);
     }
     a.license:before {
         content: @fa-var-shield-alt;
     }
 
     // autocomplete popup
     & > i:before {
         &:extend(.font-icon-class);
         content: @fa-var-user;
         margin-left: .5rem;
     }
     &.group > i:before {
         content: @fa-var-users;
     }
 }
 
 html.ie11 .listing.iconized li a:before {
     font-size: 1.25rem;
 }
 
 .listing.iconized tr {
     td:before {
         &:extend(.font-icon-class);
         margin-right: .5rem;
     }
     &.contact.person td.name:before {
         content: @fa-var-user;
     }
     &.contact.group td.name:before {
         content: @fa-var-users;
     }
     &.general > td.section:before {
         content: @fa-var-desktop;
     }
     &.mailbox > td.section:before {
         .font-icon-regular(@fa-var-envelope);
     }
     &.mailview > td.section:before {
         content: @fa-var-inbox;
     }
     &.compose > td.section:before {
         content: @fa-var-paper-plane;
     }
     &.addressbook > td.section:before {
         content: @fa-var-users;
     }
     &.folders > td.section:before {
         .font-icon-regular(@fa-var-folder);
     }
     &.server > td.section:before {
         content: @fa-var-server;
     }
     &.enigma > td.section:before {
         content: @fa-var-lock;
     }
     &.calendar > td.section:before {
         content: @fa-var-calendar;
     }
     &.chat > td.section:before {
         content: @fa-var-comments;
     }
 }
 
 /* selecatable list: e.g. spellcheck language selection */
 .listing.iconized.selectable li {
     a:before {
         &:extend(.font-icon-class);
         content: "";
     }
     a.selected:before {
         content: @fa-var-check;
     }
 }
 
 .popupmenu .listing {
     li > a {
         border-left: 0;
 
         &:not(.disabled):hover {
             color: @color-menu-hover;
             background-color: @color-menu-hover-background;
         }
     }
 
     li.selected {
         color: @color-menu-hover;
         background-color: @color-menu-hover-background;
     }
 
     td {
-        .overflow-ellipsis;
+        .overflow-ellipsis();
     }
 }
 
 ul.treelist {
     li {
         div.treetoggle {
             position: absolute;
             top: 0;
             left: 0;
             width: @listing-treetoggle-width;
             cursor: pointer;
             background-color: transparent;
 
             &:before {
                 &:extend(.font-icon-class);
                 content: @fa-var-angle-right;
                 margin-left: .25em;
                 font-size: 1em;
             }
 
             &.expanded:before {
                 content: @fa-var-angle-down;
             }
         }
 
         & > a {
-            .overflow-ellipsis;
+            .overflow-ellipsis();
             padding-left: @listing-treetoggle-width;
         }
 
         &.selected {
             // reset .listing selection style
             color: inherit;
             background-color: transparent;
 
             & > div > a, // this is used e.g. by kolab_addressbook
             & > a {
                 color: @color-list-selected;
                 background-color: @color-list-selected-background;
             }
         }
 
         ul {
             padding: 0;
 
             li {
                 padding-left: 0;
                 a { padding-left: (2 * @listing-treetoggle-width); }
                 div.treetoggle { left: @listing-treetoggle-width; }
 
                 li {
                     a { padding-left: (3 * @listing-treetoggle-width); }
                     div.treetoggle { left: (2 * @listing-treetoggle-width); }
 
                     li {
                         a { padding-left: (4 * @listing-treetoggle-width); }
                         div.treetoggle { left: (3 * @listing-treetoggle-width); }
 
                         li {
                             a { padding-left: (5 * @listing-treetoggle-width); }
                             div.treetoggle { left: (4 * @listing-treetoggle-width); }
 
                             li {
                                 a { padding-left: (6 * @listing-treetoggle-width); }
                                 div.treetoggle { left: (5 * @listing-treetoggle-width); }
                             }
                         }
                     }
                 }
             }
         }
     }
 
     &.notree {
         div.treetoggle {
             display: none;
         }
 
         li > a {
             padding-left: .5em;
         }
     }
 }
 
 /*** Folders list widget ***/
 
 .folderlist {
     li {
         &.mailbox {
             &.unread {
                 & > a {
                     padding-right: 2.8em;
                     font-weight: bold;
                 }
             }
 
             .unreadcount {
                 position: absolute;
                 top: 0;
                 right: 0;
                 min-width: 2em;
                 line-height: 1.4rem;
                 margin: (@listing-line-height - 1.4 * @page-font-size) / 2;
                 padding: 0 .3em;
                 border-radius: .4em;
                 background: @color-list-badge-background;
                 color: @color-list-badge;
                 text-align: center;
                 font-weight: bold;
 
                 html.touch & {
                     line-height: 2rem;
                     margin: (@listing-touch-line-height - 2 * @page-font-size) / 2;
                 }
             }
 
             &.recent {
                 & > a {
                     color: @color-list-recent;
 
                     & > .unreadcount {
                         background: @color-list-recent-badge-background;
                         color: @color-list-recent-badge;
                     }
                 }
             }
 
             &.root {
                 display: none !important;
                 // FIXME: This element is confusing, I propose to not use it
             }
         }
 
         a:before {
             &:extend(.font-icon-class);
             .font-icon-regular(@fa-var-folder);
             margin-right: .5rem;
         }
 
         &.inbox > a:before {
             .font-icon-solid(@fa-var-inbox);
         }
         &.trash a:before {
             .font-icon-solid(@fa-var-trash-alt);
         }
         &.trash.empty > a:before {
             .font-icon-regular(@fa-var-trash-alt);
         }
         &.drafts a:before {
             .font-icon-solid(@fa-var-pencil-alt);
         }
         &.sent a:before {
             .font-icon-solid(@fa-var-paper-plane);
         }
         &.junk a:before {
             .font-icon-solid(@fa-var-fire-alt);
         }
         &.archive > a:before {
             .font-icon-solid(@fa-var-archive);
         }
     }
 
     // folder-selector fix for left padding
     &.menu a:before {
         margin-left: .5em;
     }
 }
 
 
 /*** Messages list widget ***/
 
 .messagelist > thead,
 .messagelist .branch,
 table.fixedcopy {
     display: none;
 }
 
 .messagelist {
     td {
         border-left: 0;
         width: 2em;
         vertical-align: top;
         font-size: 1rem !important;
     }
 
     td.subject {
         width: 100%;
         padding-right: 0;
         display: flex;
         flex-wrap: wrap;
 
         a {
             text-decoration: none;
             cursor: default;
         }
 
         span {
             line-height: 2em;
 
             &.date {
                 font-size: 90%;
                 color: @color-list-secondary;
             }
 
             &.fromto {
-                .overflow-ellipsis;
+                .overflow-ellipsis();
                 flex: 1;
                 font-size: 90%;
                 color: @color-list-secondary;
                 padding-left: 1.5em;
                 padding-right: .5rem;
             }
 
             &.subject {
-                .overflow-ellipsis;
+                .overflow-ellipsis();
                 width: 100%;
             }
         }
     }
 
     td.threads {
         padding: 0 0 0 .25rem;
         width: 1.5em;
     }
 
     td.flags {
         width: 2.5em;
 
         & > span {
             height: 1.7em;
             line-height: 1.7em;
             display: block;
 
             &.flag {
                 cursor: pointer;
             }
         }
     }
 
     tr.flagged td,
     tr.flagged td.subject span.subject a,
     tr.flagged td.subject span.date,
     tr.flagged td.subject span.fromto {
         color: @color-list-flagged;
     }
 
     tr.deleted td,
     tr.deleted td.subject span.subject a,
     tr.deleted td.subject span.date,
     tr.deleted td.subject span.fromto {
         color: @color-list-deleted;
     }
 
     tr.unread td.subject span.subject {
         font-weight: bold;
     }
 
     // thread parent message with unread children
     tr.unroot td.subject a {
         text-decoration: underline;
     }
 
     tr.thread td.threads div:before {
         &:extend(.font-icon-class);
         content: @fa-var-angle-right;
         cursor: pointer;
         width: 1em;
     }
 
     tr.thread.expanded td.threads div:before {
         content: @fa-var-angle-down;
     }
 
     td.subject span.msgicon.status {
         &:before {
             &:extend(.font-icon-class);
             content: @fa-var-circle;
             cursor: pointer;
             font-size: .4rem;
             width: 1.1rem;
             height: 2rem;
         }
 
         &.unread:before {
             content: @fa-var-circle;
             color: @color-list-unread-status;
             font-size: .5rem;
         }
 
         &.unreadchildren:before {
             .font-icon-regular(@fa-var-circle);
             font-size: .5rem;
         }
 
         &.replied:before {
             .font-icon-solid(@fa-var-reply);
             font-size: 1rem;
         }
 
         &.forwarded:before {
             .font-icon-solid(@fa-var-share);
             font-size: 1rem;
         }
 
         &.replied.forwarded:before {
             .font-icon-solid(@fa-var-reply);
             font-size: 1rem;
         }
 
         &.replied.forwarded:after {
             &:extend(.font-icon-class);
             .font-icon-solid(@fa-var-share);
             font-size: 1rem;
             opacity: .5;
             margin: 0 -0.1em 0 -1.25em;
         }
     }
 
     tr.deleted td.subject span.msgicon.status {
         &:before {
             .font-icon-solid(@fa-var-ban) !important;
             font-size: 1rem;
         }
 
         &:after {
             display: none !important;
         }
     }
 
     span.attachment span {
         &:extend(.font-icon-class);
         color: @color-list-icon;
 
         &:before {
             margin: 0;
             content: @fa-var-paperclip;
         }
         &.report:before {
             .font-icon-regular(@fa-var-file-alt);
         }
         &.encrypted:before {
             content: @fa-var-lock;
         }
         &.vcard:before {
             .font-icon-regular(@fa-var-user); // vcard_attachments plugin
         }
     }
 
     span.flagged:before {
         &:extend(.font-icon-class);
         content: @fa-var-flag;
     }
 
     tr.flaggedroot:not(:hover) span.unflagged:before {
         &:extend(.font-icon-class);
         content: @fa-var-flag;
         color: @color-list-icon;
     }
 
     tr:hover span.unflagged:before {
         &:extend(.font-icon-class);
         .font-icon-regular(@fa-var-flag);
     }
 }
 
 // On touch devices hide flag icon, but do it in a way
 // that saves as much room as possible, keeping the attachment icon
 html.layout-phone,
 html.touch {
     .messagelist {
         tr {
             position: relative;
         }
         td.flags {
             top: .25rem;
             right: 0;
             bottom: 0;
 
             .flag {
                 visibility: hidden;
             }
         }
         td.subject {
             padding-right: .5em;
 
             .subject {
                 padding-right: 1.5rem;
             }
         }
     }
 }
 
 
 /* Contacts list */
 
 .contactlist {
     .contact.readonly td {
         font-style: italic;
     }
 
     td.action {
         // TODO
         a {
             // TODO
         }
     }
 
     // for contacts list in mail compose
     td.contact:before {
         &:extend(.font-icon-class);
         content: @fa-var-user;
     }
 
     // for contacts list in mail compose
     td.contactgroup:before {
         &:extend(.font-icon-class);
         content: @fa-var-users;
     }
 
     span.email {
         display: inline;
         color: @color-list-secondary;
         font-style: italic;
         margin-left: .5em;
     }
 
     li {
         a:before {
             &:extend(.font-icon-class);
             margin-right: .5rem;
         }
 
         a.addressbook::before {
             .font-icon-regular(@fa-var-address-book);
         }
 
         a.contactgroup::before {
             .font-icon-solid(@fa-var-users);
         }
     }
 }
 
 
 /* Attachments list */
 
 @attachmentslist-item-height:   2rem;
 
 .attachmentslist {
     padding: 0;
     margin: 0;
 
     background-color: @color-attachmentlist-background;
     border: 1px solid @color-attachmentlist-border;
 
     &:empty {
         padding: 0;
         border: 0;
     }
 
     li {
         list-style: none;
         display: inline-flex;
         white-space: nowrap;
         line-height: @attachmentslist-item-height;
         padding: 0 .25em;
         max-width: 100%;
 
         &:before {
             &:extend(.font-icon-class);
             .font-icon-regular(@fa-var-file);
             height: @attachmentslist-item-height;
             margin: 0;
         }
 
         &.txt:before,
         &.text:before {
             .font-icon-regular(@fa-var-file-alt);
         }
 
         &.pdf:before {
             .font-icon-regular(@fa-var-file-pdf);
         }
 
         &.odt:before,
         &.doc:before,
         &.docx:before,
         &.msword:before {
             .font-icon-regular(@fa-var-file-word);
         }
 
         &.ods:before,
         &.xls:before,
         &.xlsx:before,
         &.msexcel:before {
             .font-icon-regular(@fa-var-file-excel);
         }
 
         &.rar:before,
         &.zip:before,
         &.gz:before {
             .font-icon-regular(@fa-var-file-archive);
         }
 
         &.image:before,
         &.jpg:before,
         &.jpeg:before,
         &.png:before {
             .font-icon-regular(@fa-var-file-image);
         }
 
         &.mp3:before,
         &.audio:before {
             .font-icon-regular(@fa-var-file-audio);
         }
 
         &.m4p:before,
         &.video:before {
             .font-icon-regular(@fa-var-file-video);
         }
 
         &.ics:before,
         &.calendar:before {
             // TODO
         }
 
         &.vcard:before {
             .font-icon-regular(@fa-var-address-card);
         }
 
         &.html:before {
             .font-icon-regular(@fa-var-file-code);
         }
 
         &.eml:before,
         &.rfc822:before {
             // TODO
         }
 
         &.odp:before,
         &.otp:before,
         &.ppt:before,
         &.pptx:before,
         &.ppsx:before,
         &.vnd.mspowerpoint:before {
             .font-icon-regular(@fa-var-file-powerpoint);
         }
 
         &.sig:before,
         &.pgp-signature:before,
         &.pkcs7-signature:before {
             // TODO
         }
 
         &.application.asc:before {
             // TODO
         }
 
         &.application.pgp-keys:before {
             // TODO
         }
 
         a {
             text-decoration: none;
             line-height: @attachmentslist-item-height;
             height: @attachmentslist-item-height;
         }
 
         a.cancelupload:before,
         a.delete:before {
             &:extend(.font-icon-class);
             content: @fa-var-trash-alt;
             line-height: @attachmentslist-item-height;
             height: @attachmentslist-item-height;
             margin: 0;
         }
 
         a.dropdown:before {
             margin: 0;
         }
 
         &.uploading:before {
-            .animated-icon-class;
+            .animated-icon-class();
             .font-icon-solid(@fa-var-circle-notch);
         }
 
         a.filename {
             display: flex;
             overflow: hidden;
             padding: 0 .2em;
         }
 
         .attachment-name {
-            .overflow-ellipsis;
+            .overflow-ellipsis();
             color: @color-font;
         }
 
         .attachment-size {
             color: @color-list-secondary;
             padding-left: .25em;
         }
     }
 }
 
 .keylist {
     padding: 0;
     list-style: none;
 
     li {
         line-height: 2;
 
         &:before {
             &:extend(.font-icon-class);
             content: @fa-var-key;
             line-height: 1.5;
         }
     }
 }
 
 #identities-table {
     td.mail:before {
         &:extend(.font-icon-class);
         content: @fa-var-id-card;
     }
 }
 
 #responses-table {
     td.name:before {
         &:extend(.font-icon-class);
         content: @fa-var-comment;
     }
 }
 
 #filterslist {
     td.name:before {
         &:extend(.font-icon-class);
         content: @fa-var-filter;
     }
 }
 
 #filtersetslist {
     td.name:before {
         &:extend(.font-icon-class);
         content: @fa-var-file-alt;
     }
 }
 
 #subscription-table {
     li.mailbox a {
         padding-right: 2.5rem;
     }
 }
diff --git a/skins/elastic/styles/widgets/menu.less b/skins/elastic/styles/widgets/menu.less
index 052da703f..8b831b9a9 100644
--- a/skins/elastic/styles/widgets/menu.less
+++ b/skins/elastic/styles/widgets/menu.less
@@ -1,936 +1,936 @@
 /**
  * Roundcube Webmail styles for the Elastic skin
  *
  * Copyright (c) The Roundcube Dev Team
  *
  * The contents are subject to the Creative Commons Attribution-ShareAlike
  * License. It is allowed to copy, distribute, transmit and to adapt the work
  * by keeping credits to the original authors in the README.md file.
  * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
  */
 
 /*** Toolbar widget ***/
 
 .menu {
     margin: 0;
     text-align: center;
     white-space: nowrap;
 
     a {
-        .overflow-ellipsis;
+        .overflow-ellipsis();
         text-decoration: none;
 
         &:before {
             &:extend(.font-icon-class);
             content: "\00a0"; // blank placeholder
         }
 
         &:hover,
         &:focus {
             outline: 0;
         }
 
         &:not(.disabled):focus,
         &:not(.disabled):hover {
             background-color: @color-toolbar-button-background-hover;
         }
     }
 
     &.toolbar {
         li {
             display: inline-block;
             height: @layout-touch-header-height;
         }
 
         a {
             color: @color-toolbar-button;
             display: block;
             float: left;
             border: 0 !important;
             height: @layout-header-height;
             min-width: 3.2rem;
             max-width: 6rem;
             width: auto; // reset width defined for links in .listing
             padding: .45rem;
             line-height: 1.5;
             cursor: pointer;
             font-size: 1rem;
             text-align: center;
 
             &:before {
                 height: 1.75rem !important;
                 float: none !important;
                 width: auto !important;
                 margin: 0 !important;
             }
 
             &.selected {
                 color: @color-success;
             }
         }
 
         & > .spacer {
             width: 1em;
         }
 
         .dropbutton {
             &:not(.disabled):hover {
                 background-color: @color-toolbar-button-background-hover;
             }
 
             a.dropdown {
                 padding: 0 .3rem;
 
                 &:before {
                     line-height: @layout-header-height;
                 }
 
                 &:hover {
                     background-color: darken(@color-toolbar-button-background-hover, 5%);
                 }
             }
         }
     }
 
     span.inner {
         font-size: 90%;
         font-weight: normal;
     }
 
     .dropbutton {
         display: inline-block;
 
         a.dropdown {
             font-size: 75%;
             min-width: 0;
 
             html.ie11 &:before {
                 font-size: 80%;
             }
 
             span.inner {
                 display: none;
             }
         }
 
         a:first-child {
             padding-right: 0;
         }
     }
 
     &.pagenav {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 0 !important;
         font-size: 100%; // in case this is .footer.small
 
         a {
             flex-grow: 1;
             display: inline-block;
             min-width: 2rem !important;
             height: @layout-footer-small-height;
             color: @color-toolbar-button;
 
             &:before {
                 margin: 0;
                 display: inline;
                 float: none;
                 line-height: @layout-footer-small-height;
             }
         }
 
         .pagenav-text {
-            .overflow-ellipsis;
+            .overflow-ellipsis();
             color: @color-list-pagenav;
             flex-grow: 4;
             font-size: 80%;
         }
 
         input {
             width: 3rem;
             max-width: 5rem;
             font-size: 90%;
             text-align: center;
             max-height: 1.6rem;
             margin: 0 .2rem;
 
             html.layout-phone & {
                 display: none;
             }
         }
 
         span.inner {
             display: none;
         }
 
         &.pagenav-list {
             cursor: pointer;
             background-color: @color-searchbar-background;
             border-bottom: 1px solid @color-list-border;
 
             a {
                 flex-grow: unset;
             }
 
             .pagenav-text {
                 text-align: left;
                 font-size: 100%;
             }
 
             & + .navlist {
                 background-color: #fbfbfb;
             }
 
             &.expanded + .navlist {
                 border-bottom: 1px solid @color-layout-border;
             }
         }
     }
 
     &.content-frame-navigation.hide-nav-buttons {
         a.next,
         a.prev {
             display: none;
         }
     }
 
     .listselectors {
         max-width: 100%;
         display: flex;
         justify-content: space-around;
     }
 
     .buttons {
         display: block;
 
         button {
             display: block;
             float: left;
             cursor: pointer;
             color: @color-toolbar-button;
             background-color: transparent;
             border: 0;
             padding: 0;
             height: @layout-touch-header-height;
             line-height: @layout-touch-header-height;
             width: 2.5em;
 
             &:before {
                 font-size: 1.75rem;
             }
         }
     }
 
     .popover & {
         li {
             display: block;
             height: auto;
             text-align: left;
 
             &.spacer {
                 display: none;
             }
 
             &:last-child {
                 border: 0;
             }
 
             &.separator {
                 line-height: 1.5rem !important;
                 font-size: .75rem !important;
                 padding: 0 .5rem;
                 color: @color-popover-separator;
                 background-color: @color-popover-separator-background;
 
                 label {
                     margin: 0; // Unsets Bootstrap label margin, bug?
                 }
             }
 
             a {
                 height: unset;
                 max-width: 100%;
                 width: 100%;
                 line-height: @listing-line-height;
                 display: block;
                 padding: 0 .5rem;
                 text-align: left;
 
                 &:before {
                     line-height: inherit;
                     height: inherit !important;
                     margin-right: .5rem !important;
                     float: left !important;
                     width: 1.18em !important;
                     min-width: 1.18em;
                 }
 
                 &:not(.disabled):hover {
                     color: @color-menu-hover;
                     background-color: @color-menu-hover-background;
                 }
 
                 &[aria-haspopup] {
                     display: flex;
 
                     &:after {
                         &:extend(.font-icon-class);
                         color: @color-black-shade-text;
                         font-size: .9em;
                         margin: 0 0 0 .2em;
                         min-width: 1.18em;
                         content: @fa-var-chevron-right;
 
                         html.layout-small & {
                             margin: 0 .2em;
                         }
                     }
 
                     &.dropdown:after {
                         color: @color-list;
                         margin: 0 .6em !important;
                     }
 
                     &:hover:after {
                         color: @color-menu-hover;
                     }
 
                     & > span {
-                        .overflow-ellipsis;
+                        .overflow-ellipsis();
                         flex: 1;
                     }
                 }
             }
 
             span.inner {
                 font-size: 100%;
             }
         }
 
         .dropbutton {
             display: flex;
 
             a:first-child {
-                .overflow-ellipsis;
+                .overflow-ellipsis();
                 flex: 1;
             }
 
             &:not(.disabled):hover {
                 background-color: @color-popover-mobile-dropbutton-background;
             }
 
             a.dropdown {
                 width: 3.5rem;
                 padding: 0 .5em;
                 background-color: @color-popover-mobile-dropbutton-background;
 
                 &:hover {
                     background-color: @color-menu-hover-background;
                 }
 
                 // Note: :before icon is replaced with :after icon by a[aria-haspopup] above
 
                 &:before,
                 span.inner {
                     display: none;
                 }
             }
         }
 
         &.no-icon a:before {
             display: none;
         }
     }
 }
 
 @media screen and (min-width: (@screen-width-small + 1px)) {
     .content-frame-navigation {
         display: none !important;
     }
 
     .header a.button.icon {
         &:not(.disabled):focus,
         &:not(.disabled):hover {
             background-color: @color-toolbar-button-background-hover;
             outline: 0;
         }
 
         &:before {
             margin: 0;
         }
     }
 }
 
 @media screen and (max-width: @screen-width-small) {
     .menu.footer {
         justify-content: space-around !important;
 
         & > * {
             flex-grow: 1;
         }
 
         .buttons {
             display: flex;
             justify-content: space-evenly;
         }
 
         .listselectors > * {
             flex-grow: 1;
         }
     }
 
     .menu.listing a {
         color: @color-font;
     }
 }
 
 a.toolbar-button {
     cursor: pointer;
 
     @media screen and (min-width: (@screen-width-large + 1px)) {
         line-height: 1.5;
         padding: .45rem;
 
         &:before {
             float: none !important;
             height: 1.75rem !important;
             line-height: 1.5;
             width: auto !important;
         }
 
         span.inner {
             display: inline !important;
             font-weight: normal;
             font-size: 90%;
         }
     }
 }
 
 /*** Menu button icons ***/
 
 .menu a {
     &.mail:before {
         content: @fa-var-envelope;
     }
     &.contacts:before {
         content: @fa-var-users;
     }
     &.options:before {
         content: @fa-var-sliders-h;
     }
     &.settings:before {
         content: @fa-var-cog;
     }
     &.help:before {
         content: @fa-var-life-ring;
     }
     &.logout:before {
         content: @fa-var-power-off;
     }
     &.about:before {
         content: @fa-var-question;
     }
     &.refresh:before {
         content: @fa-var-sync;
     }
     &.compose:before {
         content: @fa-var-edit;
     }
     &.calendar:before {
         content: @fa-var-calendar-alt;
     }
     &.tasklist:before {
         content: @fa-var-tasks;
     }
     &.files:before {
         content: @fa-var-folder;
     }
     &.notes:before {
         content: @fa-var-sticky-note;
     }
     &.chat:before {
         content: @fa-var-comments;
     }
     &.actions:before {
         content: @fa-var-cog;
     }
     &.addressbook:before {
         content: @fa-var-user;
     }
     &.archive:before {
         content: @fa-var-archive;
     }
     &.assigngroup:before {
         content: @fa-var-user-plus;
     }
     &.attach:before,
     &.vcard:before {
         content: @fa-var-paperclip;
     }
     &.next:before {
         content: @fa-var-arrow-right;
     }
     &.prev:before,
     &.back:before {
         content: @fa-var-arrow-left;
     }
     &.check:before {
         content: "";
     }
     &.check.selected:before {
         content: @fa-var-check;
     }
     &.closewin:before {
         content: @fa-var-window-close;
     }
     &.collapse:before {
         content: @fa-var-angle-down;
     }
     &.copy:before {
         content: @fa-var-copy;
     }
     &.create:before {
         content: @fa-var-plus-square;
     }
     &.delete:before {
         content: @fa-var-trash-alt;
     }
     &.download:before,
     &.download.eml:before,
     &.download.maildir:before,
     &.download.mbox:before {
         content: @fa-var-download;
     }
     &.dropdown:before {
         content: @fa-var-caret-down;
     }
     &.edit:before {
         content: @fa-var-pencil-alt;
     }
     &.encrypt:before,
     &.enigma:before {
         content: @fa-var-lock;
     }
     &.encrypt.sign:before {
         content: @fa-var-lock; // TODO
     }
     &.expand:before {
         content: @fa-var-angle-right;
     }
     &.expand.all:before {
         content: @fa-var-angle-double-down;
     }
     &.expand.none:before {
         content: @fa-var-angle-double-up;
     }
     &.export:before,
     &.export.all:before,
     &.export.selection:before {
         content: @fa-var-download;
     }
     &.expunge:before {
         content: @fa-var-compress-arrows-alt;
     }
     &.extwin:before {
         content: @fa-var-external-link-square-alt;
     }
     &.filterlink:before {
         content: @fa-var-filter;
     }
     &.firstpage:before {
         content: @fa-var-angle-double-left;
     }
     &.nextpage:before {
         content: @fa-var-angle-right;
     }
     &.prevpage:before {
         content: @fa-var-angle-left;
     }
     &.lastpage:before {
         content: @fa-var-angle-double-right;
     }
     &.flag:before,
     &.select.flagged:before {
         .font-icon-solid(@fa-var-flag);
     }
     &.unflag:before {
         .font-icon-regular(@fa-var-flag);
     }
     &.folders:before {
         content: @fa-var-folder;
     }
     &.forward:before,
     &.forward.attachment:before,
     &.forward.bounce:before,
     &.forward.inline:before {
         content: @fa-var-share;
     }
     &.import:before,
     &.upload:before {
         content: @fa-var-upload;
     }
     &.insertresponse:before {
         content: @fa-var-comment;
     }
     &.junk:before {
         content: @fa-var-fire-alt;
     }
     &.notjunk:before {
         content: @fa-var-inbox;
     }
     &.markmessage:before {
         content: @fa-var-tag;
     }
     &.more:before {
         content: @fa-var-ellipsis-h;
     }
     &.move:before {
         content: @fa-var-folder-open;
     }
     &.print:before {
         content: @fa-var-print;
     }
     &.properties:before {
         content: @fa-var-file;
     }
     &.purge:before {
         content: @fa-var-eraser;
     }
     &.qrcode:before {
         content: @fa-var-qrcode;
     }
     &.read:before {
         .font-icon-regular(@fa-var-envelope-open);
     }
     &.unread:before,
     &.expand.unread:before,
     &.select.unread:before {
         .font-icon-solid(@fa-var-envelope);
     }
     &.recipient:before {
         .font-icon-regular(@fa-var-envelope);
     }
     &.refresh:before {
         content: @fa-var-sync;
     }
     &.remove:before {
         content: @fa-var-eraser;
     }
     &.removegroup:before {
         content: @fa-var-user-times;
     }
     &.rename:before {
         content: @fa-var-pencil-alt;
     }
     &.reply:before {
         content: @fa-var-reply;
     }
     &.reply-all:before,
     &.reply.all:before,
     &.reply.list:before {
         content: @fa-var-reply-all;
     }
     &.responses:before {
         content: @fa-var-comment;
     }
     &.rotate:before {
         content: @fa-var-redo-alt;
     }
     &.save:before {
         .font-icon-regular(@fa-var-save);
     }
     &.search:before {
         content: @fa-var-search;
     }
     &.search.delete:before {
         content: @fa-var-trash-alt;
     }
     &.select:before {
         content: @fa-var-mouse-pointer;
     }
     &.select.all:before {
         content: @fa-var-asterisk;
     }
     &.select.invert:before {
         content: @fa-var-check-square;
     }
     &.select.none:before {
         .font-icon-solid(@fa-var-times);
     }
     &.select.page:before {
         .font-icon-solid(@fa-var-bars);
     }
     &.selection:before {
         .font-icon-regular(@fa-var-check-square) !important;
     }
     &.send:before {
         content: @fa-var-paper-plane;
     }
     &.showurl:before {
         content: @fa-var-link;
     }
     &.signature:before {
         content: @fa-var-signature;
     }
     &.source:before {
         content: @fa-var-file-code;
     }
     &.spellcheck:before {
         content: @fa-var-spell-check;
     }
     &.status:before {
         .font-icon-regular(@fa-var-lightbulb);
     }
     &.submit:before {
         content: @fa-var-check;
     }
     &.threads:before {
         content: @fa-var-comments;
     }
     &.zoomin:before {
         content: @fa-var-search-plus;
     }
     &.zoomout:before {
         content: @fa-var-search-minus;
     }
 }
 
 
 /*** Searchbar and searchoptions widgets ***/
 
 .searchbar {
     height: @layout-searchbar-height;
     min-height: @layout-searchbar-height; // because of Flexbox
     line-height: @layout-searchbar-height;
     background-color: @color-searchbar-background;
     border-bottom: 1px solid @color-list-border;
     display: flex;
     align-items: center;
     overflow: hidden;
     position: relative;
 
     form {
         flex: 1;
         display: flex;
 
         &:before {
             &:extend(.font-icon-class);
             content: @fa-var-search;
             height: @layout-searchbar-height;
             color: @color-list-pagenav;
             margin: 0 0 0 .75rem;
         }
     }
 
     input {
         width: 100%;
         border: 0;
         background: transparent;
         padding: .5rem;
         line-height: normal; // fixes placeholder misalignment in IE11
         outline: 0; // removes focus outline in Chrome
 
         &::-ms-clear {
             display: none; // for IE
         }
     }
 
     a {
         color: @color-toolbar-button;
 
         &:before {
             &:extend(.font-icon-class);
             width: 2rem;
             height: @layout-searchbar-height;
             margin: 0;
         }
 
         &.options:before {
             content: @fa-var-angle-down;
         }
 
         &.reset:before {
             content: @fa-var-times;
             font-size: 1rem;
         }
 
         &.unread:before {
             .font-icon-solid(@fa-var-envelope);
         }
 
         &.reset,
         &.search {
             display: none;
         }
 
         &.selected {
             color: @color-success;
         }
     }
 
     span.inner {
         display: none;
     }
 
     &.active {
         a.reset {
             display: inline;
         }
     }
 
     &.open a.options:before {
         content: @fa-var-angle-up;
     }
 }
 
 .searchoptions {
     button.search {
         width: 100%;
     }
 
     ul.proplist {
         & + div {
             margin-top: 1rem;
         }
     }
 
     .input-group {
         &:not(:last-child) {
             margin-bottom: .5rem;
         }
 
         .input-group-prepend {
             width: 30%;
         }
 
         label {
             width: 100%;
         }
     }
 
     .formbuttons {
         // this is needed because we hide .formbuttons on small devices
         // we don't want it for search options form
         display: block !important;
     }
 }
 
 
 /*** Taskmenu ***/
 
 #taskmenu {
     a {
         display: block;
         float: none;
     }
 
     @media screen and (max-width: @screen-width-xs) {
         z-index: 30001; // because autocompletion popup uses z-index:30000
         overflow-x: hidden;
 
         a {
             max-width: unset;
             padding: 0 .5em;
             margin-top: 1px;
             text-align: left;
             line-height: @layout-touch-menu-record-height;
             height: @layout-touch-menu-record-height;
             border-bottom: 1px solid @color-list-border !important;
             color: @color-list;
             font-size: 1.2rem;
 
             &:before {
                 float: left !important;
                 width: 1.2em !important;
                 margin-right: .5rem !important;
             }
         }
 
         span.inner {
             font-size: 100%;
         }
     }
 
     @media screen and (min-width: (@screen-width-xs + 1px)) {
         a {
             color: @color-taskmenu-button;
             padding: .45rem 0;
             min-width: unset;
 
             &.selected {
                 color: @color-taskmenu-button-selected;
                 background: @color-taskmenu-button-selected-background;
 
                 &:hover {
                     color: @color-taskmenu-button-selected-hover;
                     background: @color-taskmenu-button-background-hover;
                 }
             }
 
             &:hover {
                 color: @color-taskmenu-button-hover;
                 background: @color-taskmenu-button-background-hover;
             }
         }
 
         .special-buttons {
             position: absolute;
             bottom: 0;
             left: 0;
             background-color: @color-taskmenu-background;
         }
 
         .action-buttons {
             a {
                 color: @color-taskmenu-button-action;
                 background: @color-taskmenu-button-action-background;
 
                 &:hover {
                     color: @color-taskmenu-button-action-hover;
                     background: @color-taskmenu-button-action-background-hover;
                 }
             }
         }
 
         a.logout {
             color: @color-taskmenu-button-logout-hover !important;
         }
     }
 
     @media screen and (min-width: (@screen-width-xs + 1px)) and (max-width: @screen-width-medium) {
         a {
             width: @layout-menu-width-sm;
             height: @layout-menu-width-sm;
             font-size: 1.2rem;
             padding: 0;
 
             &:before {
                 line-height: @layout-menu-width-sm;
             }
         }
 
         span.inner {
             display: none;
         }
     }
 
     @media screen and (min-width: (@screen-width-medium + 1px)) {
         a {
             width: @layout-menu-width;
             font-size: 1rem;
 
             &:before {
                 float: none; // fixed overflowing text in Edge
             }
 
             &:focus {
                 background-color: @color-taskmenu-button-selected-background;
             }
         }
 
         span.inner {
             padding: 0 .1em;
         }
     }
 }
diff --git a/skins/elastic/styles/widgets/messages.less b/skins/elastic/styles/widgets/messages.less
index 093ab08b2..f81ac5467 100644
--- a/skins/elastic/styles/widgets/messages.less
+++ b/skins/elastic/styles/widgets/messages.less
@@ -1,267 +1,267 @@
 /**
  * Roundcube Webmail styles for the Elastic skin
  *
  * Copyright (c) The Roundcube Dev Team
  *
  * The contents are subject to the Creative Commons Attribution-ShareAlike
  * License. It is allowed to copy, distribute, transmit and to adapt the work
  * by keeping credits to the original authors in the README.md file.
  * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
  */
 
 /*** UI Messages ***/
 
 // .boxwarning/.boxerror/.boxinformation classes are converted to .ui.alert in bootstrap_init()
 
 .ui.alert {
     margin: 0;
     margin-bottom: .2rem;
     opacity: .95;
     width: 100%;
     padding: .75em;
     color: @color-message;
     border: 1px solid @color-message-border;
     background-color: @color-message-background;
     display: flex;
     align-items: center;
 
     @media screen and (max-width: @screen-width-xs) {
         border: 0;
     }
 
     span {
         margin: auto 0;
     }
 
     & > i.icon {
         line-height: 1;
         color: lighten(@color-black, 25%);
         margin: auto 0;
     }
 
     & > i.icon:before {
         &:extend(.font-icon-class);
         content: @fa-var-info-circle;
         margin-right: .6rem;
     }
 
     .btn {
         margin-left: .5rem;
     }
 
     &.loading {
         color: @color-message-loading;
 
         & > i.icon:before {
             content: @fa-var-circle-notch;
-            .animated-icon-class;
+            .animated-icon-class();
             width: 1em;
         }
     }
 
     &.alert-success > i.icon:before {
         content: @fa-var-check-circle;
         color: @color-message-success;
     }
 
     &.alert-warning > i.icon:before {
         content: @fa-var-exclamation-triangle;
         color: @color-message-warning;
     }
 
     &.alert-danger > i.icon:before {
         content: @fa-var-exclamation-circle;
         color: @color-message-error;
     }
 
     &.vcardattachment > i.icon:before {
         content: @fa-var-address-card; // vcard_attachments plugin
     }
 
     &.enigmaattachment > i.icon:before {
         content: @fa-var-key; // enigma plugin
     }
 
     &.signed > i.icon:before,
     &.encrypted > i.icon:before {
         content: @fa-var-lock; // enigma plugin
     }
 
     &.chat > i.icon:before {
         content: @fa-var-comment;
     }
 
     // #6797: Fix for long buttons issue
     .boxbuttons {
         white-space: nowrap;
 
         .btn {
-            .overflow-ellipsis;
+            .overflow-ellipsis();
             max-width: 220px;
         }
 
         @media screen and (max-width: @screen-width-xs) {
             display: flex;
             flex-direction: column;
 
             .btn {
                 max-width: 160px;
 
                 &:not(:first-child) {
                     margin-top: .25rem;
                 }
             }
         }
     }
 
     // This works with following structure: <i> <span> [button].
     // <span> here is a one-line text, and button can be anything but <span>.
     &.aligned-buttons {
         display: flex;
 
         span {
             flex: 1;
         }
     }
 
     a:not(.btn) {
         color: @color-message-link;
         font-weight: @color-message-link-font-weight;
     }
 
     h3 {
         font-weight: bold;
         font-size: 1.2rem;
     }
 
     p {
         margin: 1rem 0;
     }
 
     &.boxerror,
     &.boxconfirmation,
     &.boxinformation,
     &.boxwarning {
         padding: .5em;
         border-radius: 0;
 
         i.icon {
             font-size: 1.5em !important;
         }
     }
 
     &.boxerror {
         background-color: @color-message-error-box-background;
         & when not(@color-message-error-box = @color-message) { color: @color-message-error-box; }
     }
 
     &.boxinformation {
         background-color: @color-message-information-box-background;
         & when not(@color-message-information-box = @color-message) { color: @color-message-information-box; }
     }
 
     &.boxconfirmation {
         background-color: @color-message-success-box-background;
         & when not(@color-message-error-box = @color-message) { color: @color-message-error-box; }
     }
 
     &.boxwarning {
         background-color: @color-message-warning-box-background;
         & when not(@color-message-warning-box = @color-message) { color: @color-message-warning-box; }
     }
 
     & + table {
         margin-top: 1em;
     }
 }
 
 #messagestack {
     position: absolute;
     bottom: .5em;
     right: .7em;
     z-index: 105; // needs to be above .ui-widget-overlay
     width: 320px;
     height: auto;
     max-height: 85%;
 
     @media screen and (max-width: @screen-width-xs) {
         left: 0;
         right: 0;
         bottom: 0;
         width: auto;
     }
 
     div {
         background-color: @color-message;
         color: @color-message-text;
 
         @media screen and (max-width: @screen-width-xs) {
             margin: 0;
             border-radius: 0;
             min-height: 4.2rem;
         }
 
         &.voice {
             position: absolute;
             top: -1000px;
         }
 
         i.icon {
             font-size: 1.5em !important;
         }
 
         & > i.icon:before {
             color: @color-message-text;
         }
 
         &:last-child {
             margin-bottom: 0;
         }
     }
 
     .loading {
         background-color: @color-message-loading;
         & when not(@color-message-loading-text = @color-message-text) { color: @color-message-loading-text; }
         & > i.icon:before {
             & when not(@color-message-loading-text = @color-message-text) { color: @color-message-loading-text; }
         }
     }
 
     .alert-info.information {
         background-color: @color-message-information;
         & when not(@color-message-information-text = @color-message-text) { color: @color-message-information-text; }
         & > i.icon:before {
             & when not(@color-message-information-text = @color-message-text) { color: @color-message-information-text; }
         }
     }
 
     .alert-success {
         background-color: @color-message-success;
         & when not(@color-message-success-text = @color-message-text) { color: @color-message-success-text; }
         & > i.icon:before {
             & when not(@color-message-success-text = @color-message-text) { color: @color-message-success-text; }
         }
     }
 
     .alert-warning {
         background-color: @color-message-warning;
         & when not(@color-message-warning-text = @color-message-text) { color: @color-message-warning-text; }
         & > i.icon:before {
             & when not(@color-message-warning-text = @color-message-text) { color: @color-message-warning-text; }
         }
     }
 
     .alert-danger {
         background-color: @color-message-error;
         & when not(@color-message-error-text = @color-message-text) { color: @color-message-error-text; }
         & > i.icon:before {
             & when not(@color-message-error-text = @color-message-text) { color: @color-message-error-text; }
         }
     }
 
     a {
         color: inherit !important;
         text-decoration: underline;
         cursor: pointer;
     }
 }