diff --git a/less-build.sh b/less-build.sh
index 08bbace5..be63e9f6 100755
--- a/less-build.sh
+++ b/less-build.sh
@@ -1,9 +1,6 @@
 #!/bin/sh
 
 # First you have to link/copy /skins directory from Roundcube repo
 # into ./skins here
 
-# Note: You can remove -x option to generate non-minified file
-#       (remember to remove ".min" from the output file name)
-
-lessc --relative-urls -x plugins/libkolab/skins/elastic/libkolab.less > plugins/libkolab/skins/elastic/libkolab.min.css
+lessc --clean-css="--s1 --advanced" --rewrite-urls=all plugins/libkolab/skins/elastic/libkolab.less > plugins/libkolab/skins/elastic/libkolab.min.css
diff --git a/plugins/libkolab/skins/elastic/include/calendar.less b/plugins/libkolab/skins/elastic/include/calendar.less
index 479803ef..0d553247 100644
--- a/plugins/libkolab/skins/elastic/include/calendar.less
+++ b/plugins/libkolab/skins/elastic/include/calendar.less
@@ -1,1309 +1,1310 @@
 /**
  * Kolab core library
  *
  * This file contains Elastic skin styles for calendar plugin.
  *
  * @author Aleksander Machniak <machniak@kolabsys.com>
  *
  * Copyright (C) 2012-2018, Kolab Systems AG <contact@kolabsys.com>
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
  * published by the Free Software Foundation, either version 3 of the
  * License, or (at your option) any later version.
  *
  * This program is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  * GNU Affero General Public License for more details.
  *
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
 .menu {
     a.calendarlink:before {
         content: @fa-var-calendar-alt;
     }
 
     a.send:before {
         content: @fa-var-paper-plane;
     }
 }
 
 // Icon for resources in autocompletion list
 .listing.iconized li.resource > i:before {
     content: @fa-var-cube;
 }
 
 a.button {
     &.today:before {
         .font-icon-regular(@fa-var-calendar);
     }
 
     &.date:before {
         .font-icon-regular(@fa-var-calendar-alt);
     }
 }
 
 .listing {
     li {
         & > div {
             &.calendar {
                 .calname:before {
                     &:extend(.font-icon-class);
                     content: @fa-var-calendar-alt;
                 }
 
                 .actions {
                     padding-right: .25rem;
 
                     :last-child {
                         margin-right: 0;
                     }
                 }
             }
 
             &.calendar.cal---invitation--pending .calname:before,
             &.calendar.cal---invitation--declined .calname:before {
                 .font-icon-regular(@fa-var-calendar-alt);
             }
 
             &.calendar.cal-__bdays__ .calname:before {
                 content: @fa-var-birthday-cake;
             }
 
             &.calendar.cal---invitation--pending,
             &.calendar.cal---invitation--declined,
             &.calendar.cal-__bdays__ {
                 font-style: italic;
 
                 a.calname {
                     padding-right: 2.5em;
                 }
 
                 .count {
                     right: 4.2em;
                     font-style: normal;
                 }
             }
         }
 
         // Calednars list element (color indicator) used in Larry
         span.handle {
             display: none;
         }
     }
 }
 
 #calendarcategories {
     .input-group:not(:last-child) {
         margin-bottom: .25rem;
     }
 }
 
 fieldset.categories .input-group {
     .minicolors-input {
         border-radius: 0;
     }
 
     .minicolors + .input-group-append {
         margin-left: 0;
     }
 
     a.button.create {
         &:before {
             &:extend(.font-icon-class);
             content: @fa-var-plus;
             line-height: 1;
         }
     }
 }
 
 .calendar-invitebox {
     & > i.icon:before {
         content: @fa-var-calendar !important;
     }
 }
 
 .calendar-agenda-preview {
     display: none;
     margin-top: .5rem;
     border-top: 1px solid #ddd;
 
     h3 {
         margin-top: .5rem;
     }
 
     .event-row {
         white-space: nowrap;
-        .overflow-ellipsis;
+        .overflow-ellipsis();
 
         &.current {
             color: #333;
             font-weight: bold;
         }
 
         &.no-event {
             font-style: italic;
         }
 
         &.fc-invitation-needs-action {
             color: @color-black-shade-text;
 
             .event-title {
                 font-style: italic;
             }
         }
     }
 
     .event-title {
         padding-left: .5rem;
     }
 
     .event-date {
     }
 }
 
 #calendar.content {
-    overflow: hidden !important; // fullcalendar widget implements scrolling on its own
+    // fullcalendar widget implements scrolling on its own
+    overflow: hidden !important;
     position: relative;
 }
 
 .calendar-datepicker {
     // overwrite jQuery-UI datepicker styles
     .ui-datepicker {
         margin: 0 !important;
         border: 0;
         border-radius: 0;
         width: auto;
         min-width: auto !important;
         font-size: .9rem;
         background-color: @color-black-shade-bg;
 
         table {
             margin: 0;
         }
 
         td a {
             font-size: .9rem !important;
         }
     }
 
     .ui-datepicker-header {
         background-color: @color-black-shade-bg;
         border-top: 1px solid @color-layout-border;
     }
 
     .ui-dialog & {
         .ui-datepicker {
             background: transparent;
         }
 
         .ui-datepicker-header {
             background: transparent;
             border: 0;
         }
 
         td a {
             line-height: 3em !important;
             font-size: 1rem !important;
         }
     }
 }
 
 // Fullcalendar styles
 @import "fullcalendar";
 
 @color-calendar-border: @color-layout-border;
 @color-calendar-free-bg: fadeout(@color-black-shade-text, 80%);
 @color-calendar-today: fadeout(@color-warning, 80%);
 @color-event-default: #c00;
 
 .fc {
     body.quickview-active & .fc-scroller {
         background: data-uri("image/svg+xml;charset=utf-8", "../images/eye.svg") center no-repeat;
         background-size: 50%;
     }
 
     .fc-header-toolbar {
         display: flex;
         background-color: @color-black-shade-bg;
         margin: 0;
 
         & > * > * {
             float: none;
             margin: 0;
         }
     }
 
     .fc-left {
         order: 1;
 
         .fc-button-group {
             display: none;
         }
     }
 
     .fc-center {
         flex: 1;
         order: 2;
         text-align: center;
         padding: .25rem;
 
         h2 {
             margin: 0;
             color: @color-black-shade-text;
             white-space: nowrap;
             font-size: 1.25rem;
             font-weight: bold;
         }
     }
 
     .fc-right {
         order: 3;
         text-align: right;
 
         .fc-button {
             display: none;
         }
     }
 
     button {
         height: unset;
         padding: .3rem .75rem;
     }
 
     button.prev:before {
         &:extend(.font-icon-class);
         content: @fa-var-angle-left;
         margin: 0 !important;
         line-height: 1;
     }
 
     button.next:before {
         &:extend(.font-icon-class);
         content: @fa-var-angle-right;
         margin: 0 !important;
         line-height: 1;
     }
 
     .btn-group {
         padding: .5rem;
         margin: 0;
     }
 
     .fc-type-freebusy {
         opacity: 0.6;
 
         .fc-title {
             position: absolute;
             top: -5000px;
         }
 
         td {
             color: #999;
         }
     }
 
     .fc-event-dot {
         background-color: @color-event-default;
     }
 
     a.fc-event, a.fc-event:hover {
         color: #fff;
     }
 
     .fc-event {
         font-size: 13px;
         background-color: @color-event-default;
         border-color: @color-event-default;
 
         .fc-title {
             font-weight: bold;
         }
 
         .fc-bg {
             opacity: .15;
             margin-top: 1.1rem;
         }
 
         &.fc-invitation-needs-action,
         &.fc-invitation-tentative,
         &.fc-invitation-declined {
             border: 1px dashed #999;
         }
 
         &.fc-event-ns-other.fc-invitation-declined {
             opacity: 0.7;
 
             .fc-title {
                 text-decoration: line-through;
             }
         }
 
         &.fc-invitation-tentative .fc-bg {
             background: url(data:image/gif;base64,R0lGODlhCAAIAPABAOuJAP///yH/C1hNUCBEYXRhWE1QAT8AIfkEBQAAAQAsAAAAAAgACAAAAg4Egmipx+ZaDPCtVPFNBQA7) 0 0 repeat #fff;
         }
 
         &.fc-invitation-needs-action .fc-bg {
             background: url(data:image/gif;base64,R0lGODlhCAAIAPABAFdXx////yH/C1hNUCBEYXRhWE1QAT8AIfkEBQAAAQAsAAAAAAgACAAAAg4Egmipx+ZaDPCtVPFNBQA7) 0 0 repeat #fff;
         }
 
         &.fc-invitation-declined .fc-bg {
             background: url(data:image/gif;base64,R0lGODlhCAAIAPABAMwAAP///yH/C1hNUCBEYXRhWE1QAT8AIfkEBQAAAQAsAAAAAAgACAAAAg4Egmipx+ZaDPCtVPFNBQA7) 0 0 repeat #fff;
         }
     }
 
     .fc-list-view {
         tr.fc-invitation-tentative,
         tr.fc-invitation-declined,
         tr.fc-invitation-needs-action {
             color: #888;
 
             .fc-event-dot {
                 background-color: #888;
             }
         }
     }
 
     .fc-needs-action,
     .fc-declined,
     .cal-event-status-cancelled {
         opacity: 0.6;
     }
 
     .fc-time i {
         display: inline-block;
         width: 1em;
         height: 1em;
         margin-left: .25rem;
 
         &:before {
             &:extend(.font-icon-class);
             font-size: 1em;
             line-height: 1;
             margin-top: .1rem;
         }
 
         &.fc-icon-recurring:before {
             .font-icon-regular(@fa-var-clone);
         }
 
         &.fc-icon-alarms:before {
             content: @fa-var-bell;
         }
 
         &.fc-icon-sensitive:before {
             content: @fa-var-lock;
         }
     }
 
     .fc-event-temp {
         opacity: 0.4;
     }
 
     .fc-nonbusiness {
         background-color: @color-calendar-free-bg;
     }
 
     .fc-day.fc-today {
         background: @color-calendar-today !important;
     }
 
     .fc-now-indicator {
         border-color: @color-success;
         border-width: 1.5px;
     }
 
     .fc-list-item,
     .fc-list-item:hover td {
         background: transparent;
     }
 
     .fc-list-item td,
     .fc-list-item a {
         cursor: default;
     }
 
     .fc-list-item-title {
         font-weight: bold;
     }
 
     .fc-list-table td {
         padding: .5rem;
     }
 
     .fc-list-heading td {
         background: fadeout(@color-black-shade-text, 90%);
     }
 
     .fc-list-empty {
         display: none;
     }
 
     .fc-more {
         color: @color-link !important;
         white-space: nowrap;
     }
 
     .fc-axis,
     .fc-day-number,
     .fc-week-number,
     .fc-day-header,
     .fc-week-header {
         color: @color-black-shade-text;
         font-size: .95rem;
         padding: .15rem !important;
     }
 
     .fc-week-number {
         text-align: center;
     }
 
     .fc-popover {
         border-radius: .3rem;
 
         .fc-header {
             color: @color-black-shade-text;
             font-size: .95rem;
             font-weight: bold;
         }
 
         .fc-icon-x::after {
             top: 3px;
         }
     }
 
     // remove redundant borders
     .fc-view.fc-widget-content,
     td.fc-head-container {
         border-left-width: 0;
     }
 
     .fc-list-view,
     .fc-body > tr > .fc-widget-content,
     .fc-body .fc-bg-sceleton .fc-widget-content,
     .fc-body .fc-bg .fc-widget-content {
         border-bottom-width: 0;
     }
 
     // fullcalendar style overrides for printing
     .print-content & {
         .fc-header-toolbar {
             background-color: #fff;
         }
 
         .fc-center h2 {
             color: #000;
             padding-bottom: .75rem;
             font-size: 1.5rem !important;
         }
 
         .fc-day.fc-today {
             background: transparent !important;
         }
 
         a.fc-event {
             color: #000;
             background-color: #fff !important;
         }
 
         .fc-event-description {
             white-space: pre-wrap;
             font-size: 90%;
         }
 
         .fc-event-location {
             width: 20%;
         }
 
         .fc-event-row-secondary td {
             border: 0;
             padding-top: 0 !important;
         }
 
         .fc-scroller {
             overflow: visible !important;
             height: auto !important;
         }
 
         // Re-add removed borders
         .fc-view.fc-widget-content,
         td.fc-head-container {
             border-left-width: 1px;
         }
 
         .fc-list-view,
         .fc-agenda-view,
         .fc-month-view {
             border-bottom: 1px solid #ddd;
         }
     }
 
     @media screen and (max-width: @screen-width-small) {
         .fc-left {
             display: block;
             width: 100%;
             padding: 0;
 
             button {
                 flex: 1 1 auto;
                 border-radius: 0;
             }
 
             .btn-group {
                 padding: 0;
                 display: flex;
             }
         }
 
         .fc-list-table .fc-event-location,
         .fc-center,
         .fc-right {
             display: none;
         }
     }
 
     @media screen and (min-width: (@screen-width-small + 1px)) and (max-width: 920px) {
         .fc-center {
-            .overflow-ellipsis;
+            .overflow-ellipsis();
             flex: 1;
 
             h2 {
                 font-size: 1rem;
                 line-height: 1;
                 padding-top: .45rem;
             }
         }
 
         .fc-left,
         .fc-right {
             .btn {
                 padding-left: .5rem;
                 padding-right: .5rem;
             }
         }
     }
 }
 
 // Add scrollbar on iOS
 html:matches(.ipad,.iphone) {
     .ui-dialog-content:not(.iframe),
     #fish-eye-view,
     .fc-scroller {
         &::-webkit-scrollbar {
             -webkit-appearance: none;
         }
 
         &::-webkit-scrollbar:vertical {
              width: .6rem;
         }
 
         &::-webkit-scrollbar:horizontal {
             height: .6rem;
         }
 
         &::-webkit-scrollbar-thumb {
             background-color: rgba(0, 0, 0, .4);
             border-radius: .3rem;
             border: 2px solid #fff;
         }
     }
 }
 
 body.task-calendar {
     #print-layout {
         #calendar-view-selector {
             float: right;
             padding-top: .25rem;
         }
 
         #calendarlist {
             margin-top: 1rem;
 
             &, ul {
                 list-style: none;
                 padding: 0;
             }
 
             li {
                 display: inline-block;
                 white-space: nowrap;
             }
 
             ul, li, div {
                 float: left;
             }
 
             div {
                 margin-right: 2rem;
             }
 
             a {
                 text-decoration: none;
                 cursor: auto;
             }
 
             input,
             span.actions,
             span.handle {
                 display: none;
             }
         }
     }
 
     @media screen and (min-width: (@screen-width-small + 1px)) {
         #layout-sidebar {
             flex: 2;
             max-width: 400px;
             min-width: 240px;
         }
     }
 
     // improve datepicker
     .ui-datepicker {
         td {
             width: 12.5%;
         }
 
         .ui-datepicker-week-col {
             color: @color-black-shade-border;
             text-align: center;
         }
     }
 
     .ui-datepicker-inline {
         .ui-datepicker-week-col {
             color: @color-link;
             cursor: pointer;
         }
 
         .ui-datepicker-activerange {
             background-color: @color-list-selected-background;
         }
     }
 }
 
 #timezone-display {
     font-size: .9rem;
     color: @color-black-shade-text;
 }
 
 #agendaoptions {
     padding: 0 .5rem .5rem .5rem;
     display: flex;
     background-color: @color-black-shade-bg;
 
     .input-group {
         padding-right: .5rem;
         flex-wrap: nowrap;
 //        width: 50%;
 
         &:last-child {
             padding-right: 0;
         }
     }
 
     select {
         min-width: 7em;
     }
 
     .input-group-prepend {
         overflow: hidden;
         margin-bottom: 0;
 
         span {
             display: block;
-            .overflow-ellipsis;
+            .overflow-ellipsis();
         }
     }
 }
 
 #eventshow {
     margin: 0;
 
     .event-title {
         font-size: 1.5rem;
         font-weight: bold;
     }
 
     .event-location {
-        .overflow-ellipsis;
+        .overflow-ellipsis();
         white-space: nowrap;
     }
 
     .event-description {
         margin: 1rem 0;
     }
 
     .event-attendees {
         margin-bottom: 1rem;
 
         .attendee {
             margin-right: .25rem;
         }
     }
 
     .event-partstat {
         & > span {
             display: flex;
         }
 
         .rsvp-status {
             &:before {
                 display: inline;
                 float: none;
             }
         }
 
         .changersvp {
             cursor: pointer;
             font-size: 1.2rem;
             margin-left: 1em;
 
             &:before {
                 &:extend(.font-icon-class);
                 content: @fa-var-pen-square;
                 float: none;
                 display: inline;
                 line-height: 1;
             }
         }
 
         .inner {
             display: none;
         }
     }
 }
 
 #eventedit {
     .edit-attendees-table td {
         padding-top: .15rem;
 
         &.role {
             padding-left: 0;
             width: 9em;
         }
     }
 }
 
 #fish-eye-view {
     padding: 0;
 
     @media screen and (min-width: (@screen-width-small + 1px)) {
         border-bottom: 1px solid @color-calendar-border;
     }
 }
 
 @color-availability-unknown:        #bbb;           // Larry: #ddd;
 @color-availability-free:           @color-success; // Larry: #abd640;
 @color-availability-busy:           @color-error;   // Larry: #e26569;
 @color-availability-tentative:      #8383fc;
 @color-availability-out-of-office:  #fbaa68;
 
 .availability {
     span {
         margin-right: .5rem;
         color: @color-black-shade-text;
 
         &:before {
             &:extend(.font-icon-class);
             content: @fa-var-square;
             display: inline;
             float: none;
         }
 
         &.legend:before {
             font-size: 1em;
         }
 
         &.loading:before {
-            .animated-icon-class;
+            .animated-icon-class();
             content: @fa-var-circle-notch;
             display: block;
             line-height: 1;
         }
 
         &.unknown:before {
             color: @color-availability-unknown;
         }
 
         &.free:before {
             color: @color-availability-free;
         }
 
         &.busy:before {
             color: @color-availability-busy;
         }
 
         &.tentative:before {
             color: @color-availability-tentative;
         }
 
         &.out-of-office:before {
             color: @color-availability-out-of-office;
         }
     }
 }
 
 // fixes additional checkbox in Elastic's .datetime widget
 .datetime {
     .custom-switch {
         padding-left: .5rem;
 
         label {
             line-height: 2;
             margin-top: .2rem;
         }
     }
 
     input {
         width: 10em !important;
     }
 
     @media screen and (max-width: 420px) {
         input {
             width: 8em !important;
 
             & + input {
                 width: 6em !important;
             }
         }
     }
 }
 
 .calendar-scheduler {
     .nav {
         align-items: center;
 
         button:first-child {
             margin-right: .25rem;
         }
 
         & > div {
             white-space: nowrap;
         }
 
         @media screen and (max-width: 420px) {
             button {
                 padding-left: .5rem;
                 padding-right: .5rem;
             }
         }
     }
 
     .schedule-buttons {
         .prev-slot:before {
             content: @fa-var-chevron-left;
         }
 
         .next-slot:after {
             &:extend(.font-icon-class);
             content: @fa-var-chevron-right;
             display: inline-block;
             float: none;
             margin-right: 0;
         }
     }
 
     .schedule-options {
         flex: 1;
         margin-left: 1rem;
 
         html.layout-phone & {
             order: 100;
             margin-left: 0;
         }
     }
 
     .schedule-nav {
         flex: 1;
         margin-left: .3rem;
         text-align: right;
 
         button {
             line-height: 1.8;
         }
     }
 
     .schedule-range {
         width: 60%;
         margin-top: 2rem;
 
         html.layout-phone & {
             margin: 0;
         }
     }
 
     .schedule-legend {
         .attendee {
             margin-right: .5rem;
         }
     }
 
     .attendees-list {
         position: relative;
 
         a.attendee-role-toggle {
             position: absolute;
             left: 0;
             display: inline-block;
             width: 1em;
             cursor: pointer;
         }
 
         div.attendee {
             border-top: 1px solid @color-list-border;
             line-height: 1.7rem;
             height: 1.8rem;
         }
 
         .attendee {
             white-space: nowrap;
 
             &.spacer {
                 height: 10px;
             }
 
             &.loading:before {
-                .animated-icon-class;
+                .animated-icon-class();
                 .font-icon-solid(@fa-var-circle-notch);
             }
 
             &.total {
                 font-weight: bold;
             }
 
             &.total,
             &.spacer {
                 &:before {
                     display: none;
                 }
             }
         }
     }
 
     .schedule-table {
         table-layout: fixed;
 
         th {
             border-top: 0;
         }
 
         td.attendees {
             width: 25%;
             overflow: hidden;
             border-top: 0;
 
             html.layout-phone & {
                 width: 35%;
             }
 
             .attendees-list {
                 border-bottom: 1px solid @color-table-border;
             }
         }
 
         td.times {
             width: auto;
             border-top: 0;
 
             table {
                 margin: 0;
             }
 
             td {
                 height: 1.8rem;
                 border-top: 1px solid @color-list-border;
                 white-space: nowrap;
             }
         }
 
         div.scroll {
             position: relative;
             overflow: auto;
         }
 
         .timesheader {
             height: 1.4rem;
             border-top: 1px solid @color-table-border;
         }
 
         .boxtitle {
             margin: 0;
             padding: 0;
             font-size: 1rem;
             font-weight: bold;
             padding-top: .5rem;
             line-height: 2;
         }
 
         td {
             padding: 4px;
         }
 
         tbody td {
             padding: 0;
 
             div {
                 height: 100%;
             }
         }
 
         tr.spacer td {
             padding: 0;
             height: 10px;
         }
 
         tr.dates th[colspan="1"] {
             min-width: 48px;
             max-width: 48px;
             text-align: center;
             font-size: .7rem;
             line-height: 2.9;
         }
 
         tr.times td {
             cursor: pointer;
             min-width: 48px;
             max-width: 48px;
             font-size: .7rem;
             text-align: center;
             color: @color-link;
             height: 1.4rem;
             padding: 0 .1rem;
             vertical-align: middle;
             border-top: 1px solid @color-table-border;
             border-left: 1px solid @color-list-border;
         }
 
         .fbcontent {
             td {
                 border-left: 1px solid @color-list-border;
             }
 
             &:last-child td {
                 border-bottom: 1px solid @color-table-border;
             }
         }
 
         div.unknown {
             background-color: @color-availability-unknown;
         }
 
         div.free {
             background-color: @color-availability-free;
         }
 
         div.busy {
             background-color: @color-availability-busy;
         }
 
         div.tentative {
             background-color: @color-availability-tentative;
         }
 
         div.out-of-office {
             background-color: @color-availability-out-of-office;
         }
 
         div.all-busy,
         div.all-tentative,
         div.all-out-of-office {
             overflow: hidden;
 
             // This span imitates a slanting line across the parent element
             span {
                 display: block;
                 width: 300%;
                 height: 300%;
                 border: 1px solid #fff;
                 background: darken(@color-availability-busy, 10%);
                 transform: rotate(42deg) translate(2%);
             }
 
             &.w10 span {
                 display: none;
             }
 
             &.w20 span,
             &.w25 span {
                 transform: rotate(17deg) translate(-9%);
             }
 
             &.w30 span {
                 transform: rotate(28deg) translate(-7%);
             }
 
             &.w33 span {
                 transform: rotate(32deg) translate(-5%);
             }
 
             &.w40 span {
                 transform: rotate(36deg) translate(-3%);
             }
 
             &.w60 span {
                 transform: rotate(48deg) translate(6%);
             }
 
             &.w67 span {
                 transform: rotate(52deg) translate(9%);
             }
 
             &.w70 span,
             &.w75 span {
                 transform: rotate(55deg) translate(12%, 30%);
             }
 
             &.w80 span {
                 transform: rotate(56deg) translate(13%, 30%);
             }
 
             &.w90 span {
                 transform: rotate(59deg) translate(16%, 30%);
             }
 
             &.w100 span {
                 transform: rotate(62deg) translate(19%, 30%);
             }
         }
 
         div.all-tentative span {
             background: darken(@color-availability-tentative, 10%);
         }
 
         div.all-out-of-office span {
             background: darken(@color-availability-out-of-office, 10%);
         }
     }
 }
 
 #schedule-event-time {
     position: absolute;
     border-radius: .3rem;
     cursor: move;
     border: 2px solid #444;
     background-color: rgba(0, 0, 0, .3);
 }
 
 .resources-dialog {
     .resource-selection {
         flex: 4;
         min-width: 300px;
     }
 
     .resource-content {
         flex: 10;
         margin-left: 1em;
     }
 
     .listing li.resource > a {
         color: @color-font;
 
         &:before {
             &:extend(.font-icon-class);
             content: @fa-var-cube;
         }
     }
 
     .slot-nav {
         display: none; // TODO
     }
 }
 
 #resource-availability {
     height: 100%;
 
     .fc {
         height: 100%;
         overflow: hidden;
         position: relative;
         border-bottom: 1px solid #ddd;
     }
 
     .fc-view {
         border-left: 1px solid #ddd;
     }
 
     .fc-header-toolbar {
         height: 0;
     }
 }
 
 .standalone-invitebox {
     margin: 0 auto;
     max-width: 500px;
     width: 95%;
     display: flex;
     flex-direction: column;
     top: 15vh;
     position: relative;
 
     #logo {
         max-height: 90px;
     }
 
     .invitebox {
         margin-top: 3em !important;
     }
 }
 
 .searchbar a.button.date {
     @media screen and (min-width: (@screen-width-small + 1px)) {
         display: none;
     }
 }
 
 #rcmfd_alarmvalue {
     max-width: 80px;
 }
 
 @media screen and (max-width: @screen-width-small) {
     #agendaoptions {
         padding-top: .5rem;
     }
 
     .calendar-scheduler {
         .schedule-range {
             width: 100%;
         }
     }
 
     #layout-sidebar .calendar-datepicker {
         display: none;
     }
 
     .resources-dialog {
         .resource-content {
             display: none;
             margin: 0;
         }
 
         .resource-content {
             ul {
                 margin: 1em 1em 0 1em;
             }
         }
     }
 
     #resource-availability {
         margin: 0 1em;
     }
 }
 
 body.task-calendar .header-title {
     position: relative;
 
     .tz {
         position: absolute;
         bottom: 0;
         left: 0;
         width: 100%;
         line-height: 2;
         font-size: .8rem;
         font-weight: normal;
         color: @color-black-shade-text;
     }
 }
diff --git a/plugins/libkolab/skins/elastic/include/kolab_activesync.less b/plugins/libkolab/skins/elastic/include/kolab_activesync.less
index 95700df9..98c4fa52 100644
--- a/plugins/libkolab/skins/elastic/include/kolab_activesync.less
+++ b/plugins/libkolab/skins/elastic/include/kolab_activesync.less
@@ -1,53 +1,53 @@
 /**
  * Kolab core library
  *
  * This file contains Elastic skin styles for kolab_activesync plugin.
  *
  * @author Aleksander Machniak <machniak@kolabsys.com>
  *
  * Copyright (C) 2012-2018, Kolab Systems AG <contact@kolabsys.com>
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
  * published by the Free Software Foundation, either version 3 of the
  * License, or (at your option) any later version.
  *
  * This program is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  * GNU Affero General Public License for more details.
  *
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
 .listing.iconized li {
     &.activesync > a:before {
         content: @fa-var-rss-square;
     }
 }
 
 #devices-table {
     td:not(.selection) {
         display: flex;
 
         &:before {
             &:extend(.font-icon-class);
             content: @fa-var-rss-square; // TODO: mobile icon is not free
         }
 
         span {
-            .overflow-ellipsis;
+            .overflow-ellipsis();
         }
     }
 
     .devicealias {
         flex: 1;
     }
 
     .devicetype {
         max-width: 40%;
         font-style: italic;
         padding-left: .5em;
     }
 }
diff --git a/plugins/libkolab/skins/elastic/include/kolab_files.less b/plugins/libkolab/skins/elastic/include/kolab_files.less
index 401c1823..ad12f4cc 100644
--- a/plugins/libkolab/skins/elastic/include/kolab_files.less
+++ b/plugins/libkolab/skins/elastic/include/kolab_files.less
@@ -1,525 +1,525 @@
 /**
  * Kolab core library
  *
  * This file contains Elastic skin styles for kolab_files plugin.
  *
  * @author Aleksander Machniak <machniak@kolabsys.com>
  *
  * Copyright (C) 2012-2018, Kolab Systems AG <contact@kolabsys.com>
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
  * published by the Free Software Foundation, either version 3 of the
  * License, or (at your option) any later version.
  *
  * This program is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  * GNU Affero General Public License for more details.
  *
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
 a.btn.fromcloud:before,
 li > a.icon.saveas:before,
 a.button.filesaveall:before,
 a.button.saveas:before {
     &:extend(.font-icon-class);
     content: @fa-var-folder;
 }
 
 .menu {
     a.mount.storage:before {
         content: @fa-var-database;
     }
 
     a.open:before {
         content: @fa-var-eye;
     }
 
     a.cancel:before {
         content: @fa-var-times;
     }
 
     a.share:before {
         content: @fa-var-share-alt;
     }
 }
 
 .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link.options.add-folder {
     order: -1;
 
     &:before {
         content: @fa-var-plus;
     }
 }
 
 .folderlist {
     li.collection {
         a.name {
             padding-left: .5em;
         }
 
         &.audio a.name:before {
             .font-icon-solid(@fa-var-volume-up);
         }
 
         &.video a.name:before {
             .font-icon-solid(@fa-var-video);
         }
 
         &.image a.name:before {
             content: @fa-var-image;
         }
 
         &.document a.name:before {
             .font-icon-solid(@fa-var-book);
         }
 
         &.sessions a.name:before {
             .font-icon-solid(@fa-var-users);
         }
     }
 
     li.mailbox {
         a.subscription {
             cursor: pointer;
             // reset listing's link style
             padding: 0 !important;
             border-left: 0;
             width: auto;
 
             &:before {
                 .font-icon-regular(@fa-var-bookmark); // TODO: better icon
                 height: auto;
                 color: @color-link;
                 margin-right: .25rem;
             }
 
             &.subscribed:before {
                 &:extend(.font-icon-class);
                 .font-icon-solid(@fa-var-bookmark); // TODO: better icon
             }
         }
     }
 }
 
 #filelistcontainer {
     position: relative;
 }
 
 #filesuploadform {
     // force upload form position, otherwise it breaks layout
     position: absolute !important;
 }
 
 #filelistbox {
     height: 100%;
 
     &.droptarget {
         &.active {
             box-shadow: 0 0 2px 1px darken(@color-toolbar-button-background-hover, 20%) inset;
         }
 
         &.hover {
             box-shadow: 0 0 2px 1px darken(@color-toolbar-button-background-hover, 20%) inset;
             background-color: @color-toolbar-button-background-hover;
         }
     }
 }
 
 .filelist {
     thead {
         display: none;
     }
 
     td.options {
         display: none;
     }
 
     td.name {
         position: relative;
     }
 
     td.mtime {
         width: 11em;
     }
 
     td.size {
         text-align: right;
         width: 6em;
     }
 
     tr.session > td.name {
         padding-right: 2em;
 
         &:after {
             &:extend(.font-icon-class);
             content: @fa-var-users;
             color: @color-black-shade-border;
             position: absolute;
             right: .25em;
             top: 0;
         }
     }
 
     tr.session.invited > td.name:after {
         color: @color-success;
     }
 
     tr.session.owner > td.name:after {
         color: @color-black;
     }
 }
 
 @media screen and (max-width: @screen-width-xs) {
     .filelist {
         td.mtime {
             display: none;
         }
     }
 }
 
 .filelist tbody td.filename {
     & span {
         background: transparent !important;
     }
 
     & span:before {
         &:extend(.font-icon-class);
         .font-icon-regular(@fa-var-file);
     }
 
     &.pdf span:before,
     &.application_pdf span:before {
         content: @fa-var-file-pdf;
     }
 
     &.application_vnd_openxmlformats_officedocument_wordprocessingml_document span:before,
     &.application_vnd_openxmlformats_officedocument_wordprocessingml_template span:before,
     &.application_vnd_ms_word span:before,
     &.application_msword span:before {
         content: @fa-var-file-word;
     }
 
     &.application_vnd_ms_excel span:before,
     &.application_vnd_openxmlformats_officedocument_spreadsheetml_sheet span:before,
     &.application_vnd_openxmlformats_officedocument_spreadsheetml_template span:before,
     &.application_vnd_oasis_opendocument_spreadsheet span:before,
     &.application_vnd_oasis_opendocument_spreadsheet_template span:before {
         content: @fa-var-file-excel;
     }
 
     &.application_vnd_openxmlformats_officedocument_presentationml_presentation span:before,
     &.application_vnd_openxmlformats_officedocument_presentationml_template span:before,
     &.application_vnd_openxmlformats_officedocument_presentationml_slideshow span:before,
     &.application_vnd_ms_powerpoint span:before {
         content: @fa-var-file-powerpoint;
     }
 
     &.application_vnd_oasis_opendocument_text span:before {
         content: @fa-var-file-alt; // TODO
     }
 
     &.application_vnd_oasis_opendocument_presentation span:before,
     &.application_vnd_oasis_opendocument_presentation_template span:before {
         content: @fa-var-file-powerpoint; // TODO
     }
 
     &.tar span:before,
     &.application_zip span:before,
     &.application_x_7z_compressed span:before,
     &.application_x_ace span:before,
     &.application_x_arc span:before,
     &.application_x_arj span:before,
     &.application_x_bzip_compressed_tar span:before,
     &.application_x_lha span:before,
     &.application_x_rar span:before,
     &.application_x_tarz span:before,
     &.application_x_tzo span:before,
     &.application_x_zip span:before,
     &.application_x_zoo span:before {
         content: @fa-var-file-archive;
     }
 
     &.image span:before,
     &.image_png span:before,
     &.image_svg_xml span:before,
     &.image_jpeg span:before,
     &.image_jpeg2000 span:before,
     &.image_x_eps span:before,
     &.application_vnd_stardivision_draw span:before,
     &.application_vnd_sun_xml_draw span:before,
     &.application_vnd_sun_xml_draw_template span:before {
         content: @fa-var-file-image;
     }
 
     &.application_pgp_keys span:before,
     &.application_pkcs7_mime span:before {
         // TODO
     }
 
     &.audio span:before {
         content: @fa-var-file-audio;
     }
 
     &.video span:before {
         content: @fa-var-file-video;
     }
 
     &.ascii span:before,
     &.text_plain span:before {
         content: @fa-var-file-alt;
     }
 
     &.vcalendar span:before {
         // TODO
     }
 
     &.vcard span:before,
     &.text_x_vcard span:before {
         // TODO
     }
 
     &.text_html span:before {
         content: @fa-var-file-code;
     }
 
     &.style_css span:before {
         // TODO
     }
 
     &.text_csv span:before {
         // TODO
     }
 
     &.message_rfc822 span:before {
         // TODO
     }
 }
 
 #folder-mount-form {
     td.source {
         display: flex;
         align-items: flex-start;
         padding: .5rem;
 
         &.selected {
             background-color: @color-list-selected-background;
         }
 
         & > input {
             height: 32px;
             margin-right: .5rem;
         }
 
         & > div {
             flex: 1;
         }
 
         img {
             height: 32px;
             margin-right: .5rem;
         }
 
         .name {
             font-weight: bold;
         }
 
         .description {
             font-size: 90%;
         }
 
         table {
             margin-top: .5rem;
         }
 
         .form-group {
             margin-bottom: 0;
         }
     }
 
     .auth-options {
         margin-top: .5rem;
 
         & > label:before {
             line-height: 1;
         }
     }
 }
 
 .files-dialog {
     .selection-list {
         flex: 1;
         min-width: 220px;
     }
 
     .selection-content {
         flex: 2;
 
         @media screen and (min-width: (@screen-width-small + 1px)) {
             border: 1px solid @color-layout-border;
             border-left: 0;
         }
     }
 
     a.subscription {
         display: none;
     }
 
     @media screen and (max-width: @screen-width-small) {
         .selection-list {
             display: none;
         }
     }
 }
 
 .document-editor-header {
     .toolbar {
         text-align: left !important;
         flex: 1;
 
         a {
             text-align: center;
         }
     }
 
     a.button.icon.members:before {
         content: @fa-var-users;
     }
 
     #collaborators {
         order: 9;
         display: flex;
         margin-right: .5rem;
         margin-left: 2rem;
 
         a.button.add:before {
             &:extend(.font-icon-class);
             content: @fa-var-plus;
         }
 
         .inner {
             display: none;
         }
     }
 
     #doc-title {
         flex: 1;
         order: 8;
 
         input {
             display: inline;
         }
     }
 }
 
 .session-members {
     img.photo {
         width: 48px;
         height: 48px;
         min-width: 48px;
         overflow: hidden;
         background: url("@{skin-path}/images/contactpic.png") center center no-repeat #fff;
         background-size: cover;
         border-radius: 50%;
         border: solid 3px #eee;
         margin-left: .5rem;
     }
 
     ul {
         padding: 0;
         margin: 0;
         list-style-type: none;
 
         li {
             display: flex;
             align-items: center;
         }
 
         img.photo {
             margin-left: 0;
             margin-right: 1em;
         }
     }
 }
 
 .editors-dialog {
     table {
         th {
             border: 0;
         }
 
         tr:last-child td {
             border-bottom: 1px solid @color-layout-border;
         }
 
         td.options {
             width: 1%;
 
             a.delete:before {
                 &:extend(.font-icon-class);
                 content: @fa-var-trash-alt;
                 display: inline;
                 line-height: 1;
             }
         }
     }
 
     label {
         display: block;
     }
 }
 
 button.participant.add:before {
     content: @fa-var-user-plus;
 }
 
 .iframe-wrapper.file-type-audio,
 .iframe-wrapper.file-type-video {
     display: flex;
     align-items: center;
     justify-content: center;
 
     @media screen and (min-width: (@screen-width-small + 1px)) {
         padding: 1em;
     }
 }
 
 #shareform {
     table {
         td,th {
             padding-left: .15rem;
             max-width: 10vw; // needed for overflow
-            .overflow-ellipsis;
+            .overflow-ellipsis();
 
             &:last-child {
                 padding-right: .15rem;
                 width: 1%;
                 max-width: unset;
             }
         }
 
         td {
             vertical-align: middle;
 
             &.form {
                 input {
                     margin-bottom: .25rem;
                     width: 100%;
                 }
             }
         }
 
         tr + tr > td {
             border-top: 0;
             padding-bottom: .25rem;
         }
 
         button {
             padding: .185rem .75rem;
             width: 100%;
         }
     }
 }
diff --git a/plugins/libkolab/skins/elastic/include/kolab_notes.less b/plugins/libkolab/skins/elastic/include/kolab_notes.less
index 2d4fa4a7..bc856c2b 100644
--- a/plugins/libkolab/skins/elastic/include/kolab_notes.less
+++ b/plugins/libkolab/skins/elastic/include/kolab_notes.less
@@ -1,97 +1,97 @@
 /**
  * Kolab core library
  *
  * This file contains Elastic skin styles for kolab_notes plugin.
  *
  * @author Aleksander Machniak <machniak@kolabsys.com>
  *
  * Copyright (C) 2012-2018, Kolab Systems AG <contact@kolabsys.com>
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
  * published by the Free Software Foundation, either version 3 of the
  * License, or (at your option) any later version.
  *
  * This program is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  * GNU Affero General Public License for more details.
  *
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
 .menu {
     a.appendnote:before {
         content: @fa-var-sticky-note;
     }
 }
 
 // Fixes TinyMCE editor height=0 issue
 #noteform iframe {
     min-height: 10rem;
 }
 
 #notereferences {
     margin-top: .5rem;
 
     .attachmentslist a.delete {
         margin-left: .5rem;
     }
 }
 
 #notedetailstitle {
     .dates {
         color: @color-list-secondary;
     }
 }
 
 #print-layout {
     #notetitle {
         font-size: 1.5rem;
         line-height: 2;
     }
 
     #notetags {
         margin-bottom: .5rem;
     }
 
     #notecreated {
         margin-right: 2rem;
     }
 }
 
 #kolabnoteslist {
     tr {
         display: flex;
     }
 
     td.title {
-        .overflow-ellipsis;
+        .overflow-ellipsis();
         flex: 1;
 
         &:before {
             &:extend(.font-icon-class);
             .font-icon-regular(@fa-var-sticky-note);
         }
     }
 
     td.date {
         overflow: unset;
         color: @color-list-secondary;
         font-style: italic;
     }
 }
 
 .kolabmessagenotes {
     & > i.icon:before {
         .font-icon-regular(@fa-var-sticky-note) !important;
     }
 
     & > a {
-        .overflow-ellipsis;
+        .overflow-ellipsis();
         white-space: nowrap;
         display: block;
         text-decoration: none;
     }
 }
diff --git a/plugins/libkolab/skins/elastic/include/libcalendaring.less b/plugins/libkolab/skins/elastic/include/libcalendaring.less
index 40a47e88..f4451057 100644
--- a/plugins/libkolab/skins/elastic/include/libcalendaring.less
+++ b/plugins/libkolab/skins/elastic/include/libcalendaring.less
@@ -1,717 +1,717 @@
 /**
  * Kolab core library
  *
  * This file contains Elastic skin styles for libcalendaring plugin.
  *
  * @author Aleksander Machniak <machniak@kolabsys.com>
  *
  * Copyright (C) 2012-2018, Kolab Systems AG <contact@kolabsys.com>
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
  * published by the Free Software Foundation, either version 3 of the
  * License, or (at your option) any later version.
  *
  * This program is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  * GNU Affero General Public License for more details.
  *
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
 .invitebox {
     & > i.icon {
         position: absolute;
         top: 0;
         padding-top: .5em;
     }
 
     & > span {
         padding-left: 2.5em;
     }
 
     td {
         padding: 2px;
         vertical-align: top;
 
         &.ititle {
             font-weight: bold;
             padding-right: 0.5em;
         }
 
         &.label {
             color: #666;
             padding-right: 1em;
         }
 
         &.sensitivity {
             font-weight: bold;
         }
 
         &.recurrence-id {
             text-transform: uppercase;
             font-style: italic;
         }
 
         &.date.modified {
             font-weight: bold;
             color: @color-error;
         }
 
         em {
             font-weight: bold;
         }
     }
 
     .itip-buttons {
         display: flex;
         flex-wrap: wrap;
 
         input.button {
             margin: 0 .25rem .25rem 0;
         }
     }
 
     .rsvp-buttons {
         width: 100%;
         padding-top: .25rem;
     }
 
     .itip-reply-controls {
         margin-top: .25rem;
         width: 100%;
         line-height: 2;
 
         & > label {
             display: inline;
 
             label {
                 line-height: 1;
                 margin-right: .25rem;
             }
         }
 
         a {
             margin-left: 1em;
             white-space: nowrap;
         }
     }
 
     .rsvp-status {
         margin: .5rem 0;
         width: 100%;
 
         &.hint {
             color: #666;
             font-style: italic;
         }
     }
 
     .folder-select {
         white-space: nowrap;
 
         select {
             display: initial;
             width: auto;
         }
     }
 }
 
 .rsvp-status {
     &:before {
         line-height: 1.1;
         color: lighten(@color-black, 25%);
         float: none;
         display: inline;
     }
 
     &.loading:before {
         &:extend(.font-icon-class);
-        .animated-icon-class;
+        .animated-icon-class();
         content: @fa-var-circle-notch;
         line-height: 1;
     }
 
     &.declined:before {
         &:extend(.font-icon-class);
         content: @fa-var-ban;
         color: @color-error;
     }
 
     &.tentative:before {
         &:extend(.font-icon-class);
         content: @fa-var-check-circle;
         color: @color-warning;
     }
 
     &.accepted:before {
         &:extend(.font-icon-class);
         content: @fa-var-check-circle;
         color: @color-success;
     }
 
     &.delegated:before {
         &:extend(.font-icon-class);
         content: @fa-var-share;
     }
 
     &.needs-action:before {
         &:extend(.font-icon-class);
         content: @fa-var-question-circle;
     }
 }
 
 .attendee {
     &:before {
         &:extend(.font-icon-class);
         content: @fa-var-question-circle;
         display: inline;
         float: none;
         font-size: 1em;
         color: @color-black-shade-text;
     }
 
     &.req-participant:before {
         content: @fa-var-user;
     }
 
     &.opt-participant:before {
         .font-icon-regular(@fa-var-user);
     }
 
     &.non-participant:before {
         content: @fa-var-user;
         color: #ccc;
     }
 
     &.chair:before {
         content: @fa-var-user; // todo
         color: @color-warning;
     }
 
     &.completed:before,
     &.accepted:before {
         content: @fa-var-check-circle;
         color: @color-success;
     }
 
     &.declined:before {
         content: @fa-var-ban;
         color: @color-error;
     }
 
     &.tentative:before {
         content: @fa-var-check-circle;
         color: @color-warning;
     }
 
     &.delegated:before {
         content: @fa-var-share;
     }
 
     &.organizer:before {
         content: @fa-var-briefcase; // TODO: better icon
     }
 
     &.in-process:before {
         content: @fa-var-cog;
     }
 }
 
 .attendees-comentbox {
     label {
         display: inline;
     }
 }
 
 .edit-attendees-table {
     width: 100%;
 
     th, td {
         width: 1%;
         text-align: center;
     }
 
     td {
         border: 0;
         padding: 0 .3rem;
     }
 
     th {
         border-bottom: 1px solid #eee !important;
     }
 
     th.name, td.name, th.role, td.role {
         width: auto;
         text-align: left;
     }
 
     th.invite {
         input {
             display: none;
         }
 
         label {
             cursor: pointer;
         }
 
         label:before {
             &:extend(.font-icon-class);
             content: @fa-var-envelope;
             display: inline;
             float: none;
             margin-left: .25rem;
         }
 
     }
 
     td.invite {
         .custom-switch {
             margin-top: .15rem;
         }
     }
 
     td.name {
         span {
             line-height: 2.5;
             display: flex;
 
             & > :first-child {
-                .overflow-ellipsis;
+                .overflow-ellipsis();
                 // width and flex is required to make overflow working
                 flex: 1;
                 width: 1px;
                 white-space: nowrap;
             }
         }
     }
 
     td.availability,
     td.confirmstate {
         span {
             margin: 0;
         }
 
         span:after,
         span:before {
             line-height: 2;
             margin: 0;
             font-size: 1.2em;
             height: 2em;
             width: 2em;
         }
     }
 
     td.options {
         a {
             display: inline-block;
             height: 2em;
 
             &:before {
                 line-height: 1.8;
                 margin: 0;
             }
         }
     }
 
     a.expandlink {
         &:before {
             content: @fa-var-plus-square;
             line-height: 2;
         }
     }
 
     .inner {
         display: none;
     }
 
     html.layout-phone & {
         th.availability,
         th.confirmstate {
             text-indent: -5000px;
         }
 
         td.role {
             max-width: 7em;
         }
 
         select {
             padding-left: .5rem;
         }
     }
 }
 
 .form-searchbar {
     display: flex;
     margin-bottom: .5rem;
 
     input[type=text] {
         flex: 1;
 
         html.layout-phone & {
             max-width: 50%;
         }
     }
 
     input[type=button] {
         margin-left: .5em;
-        .overflow-ellipsis;
+        .overflow-ellipsis();
     }
 }
 
 .attachmentslist li.ics:before,
 .attachmentslist li.text.calendar:before,
 .messagelist tbody .attachment span.ical:before {
     .font-icon-regular(@fa-var-calendar-alt);
 }
 
 .alarms-input {
     .edit-alarm-item {
         display: flex;
 
         & + .edit-alarm-item {
             margin-top: .25rem;
         }
 
         &.first .delete-alarm,
         &:not(.first) .add-alarm {
             display: none;
         }
     }
 
     .edit-alarm-buttons {
         a {
             border-top-right-radius: .25rem !important;
             border-bottom-right-radius: .25rem !important;
 
             &:before {
                 margin: 0;
                 width: 1em;
             }
 
             &:focus {
                 box-shadow: none;
             }
 
             &.add:before {
                 content: @fa-var-plus;
             }
         }
 
         .inner {
             display: none;
         }
     }
 
     .edit-alarm-type {
         flex: 1;
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
 
         &:focus {
             z-index: 2;
         }
     }
 
     .edit-alarm-set {
         display: flex;
         flex: 1;
     }
 
     .edit-alarm-values {
         flex: 5;
 
         .form-control {
             border-radius: 0;
         }
 
         :first-child {
             border-left: 0;
         }
     }
 
     .edit-alarm-offset {
         flex: 5;
     }
 
     .edit-alarm-date,
     .edit-alarm-time,
     .edit-alarm-related {
         flex: 3;
     }
 }
 
 .recurrence-form {
     .recurrence-rdates {
         width: 100%;
         padding: 0;
         list-style-type: none;
 
         &:empty {
             margin: 0;
         }
 
         a.delete {
             margin-left: 2em;
             &:before {
                 display: inline-block;
                 float: none;
             }
         }
 
         .inner {
             display: none;
         }
     }
 
     .recurrence-onevery {
         select {
             width: 40%;
             display: inline;
         }
     }
 
     .inputform {
         display: flex;
 
         input.button {
             margin-left: .25rem;
         }
     }
 
     div.line {
         width: 100%;
         display: flex;
         margin-bottom: .25rem;
 
         label {
             margin-left: .5em;
             min-width: 4em;
             line-height: 2.5;
         }
     }
 
     .month,
     .monthday,
     .weekday {
         display: inline-block;
         width: 3.5em;
         margin-right: .5rem;
         white-space: nowrap;
 
         input {
             margin-right: .25rem;
         }
     }
 
     .monthday {
         width: 2.75em;
     }
 
     .table td {
         border: 0;
         padding: 0;
 
         &.label {
             white-space: nowrap;
         }
 
         &:first-child label {
             line-height: 2.5;
         }
 
         & label.monthday:first-child {
             margin-top: .5rem;
         }
     }
 
     .input-group-append,
     .input-group-prepend {
         display: initial; // fixes buggy height of the element
     }
 }
 
 #event-status-badge {
     width: 7rem;
     height: 7rem;
     position: absolute;
     top: 0;
     right: 0;
     overflow: hidden;
 
     span {
         display: none;
         text-transform: uppercase;
         line-height: 20px;
         position: absolute;
         left: -2.4rem;
         top: 2.4rem;
         width: 13.2rem;
         text-align: center;
         font-weight: bold;
         font-size: .85rem;
         color: #fff;
         -webkit-transform: rotate(45deg);
         transform: rotate(45deg);
 
         &:before {
             &:extend(.font-icon-class);
             display: inline;
             float: none;
         }
 
         .status-cancelled & {
             background-color: darken(@color-error, 10%);
             display: block;
 
             &:before {
                 content: @fa-var-times-circle;
             }
         }
 
         .sensitivity-private & {
             background-color: darken(@color-warning, 10%);
             display: block;
 
             &:before {
                 content: @fa-var-lock;
             }
         }
 
         .sensitivity-confidential & {
             background-color: darken(@color-error, 10%);
             display: block;
 
             &:before {
                 content: @fa-var-user-secret;
             }
         }
     }
 }
 
 #alarm-display {
     h3 {
         font-size: 1.2rem;
         margin-bottom: .25rem;
 
         &:before {
             &:extend(.font-icon-class);
             .font-icon-regular(@fa-var-calendar-alt);
             font-size: 1em;
         }
 
         &.type-task:before {
             .font-icon-regular(@fa-var-calendar-check);
         }
     }
 
     .event-section {
         font-size: .9rem;
         color: @color-black-shade-text;
         white-space: nowrap;
-        .overflow-ellipsis;
+        .overflow-ellipsis();
     }
 
     .alarm-actions {
         text-align: right;
         margin-bottom: .25rem;
 
         a {
             &:first-child {
                 margin-right: 1em;
             }
 
             &:before {
                 &:extend(.font-icon-class);
                 display: inline;
                 float: none;
             }
         }
     }
 
     a.alarm-action-snooze:before {
         content: @fa-var-bell-slash;
     }
 
     a.alarm-action-dismiss:before {
         content: @fa-var-trash-alt;
     }
 }
 
 #alarm-snooze-dropdown a:before {
     .font-icon-regular(@fa-var-clock);
 }
 
 .dialog-message {
     margin: 0;
     opacity: .95;
     width: 100%;
     padding: .75em;
     margin-top: .25em;
     color: @color-message;
     background-color: @color-message-warning-box-background;
 
     & > label {
         margin: 0;
         display: block;
 
         label:before {
             line-height: 1.25;
             margin-right: .25rem;
         }
     }
 
     .message {
         display: flex;
     }
 
     & + .savemode {
         margin-top: 1rem;
 
         a.btn {
             margin-right: .5rem;
         }
     }
 
     & > .savemode {
         margin-top: .5rem;
 
         label {
             margin-right: 1rem;
         }
 
         input {
             margin-right: .25rem;
         }
     }
 }
 
 @media screen and (max-width: 420px) {
     .nav-link.nav-icon {
         width: 3em;
         margin-right: 5px;
         padding: .5rem .5rem .5rem .65rem;
 
         &:before {
-            .font-icon-class;
+            .font-icon-class();
             margin: 0 1rem 0 0;
             width: 1em;
             line-height: 1.2;
         }
 
         &.resources:before {
             content: @fa-var-cube;
             margin-left: .1rem;
         }
 
         &.attachments:before {
             content: @fa-var-paperclip;
         }
 
         &.attendees:before {
             content: @fa-var-users;
         }
     }
 }
diff --git a/plugins/libkolab/skins/elastic/include/tasklist.less b/plugins/libkolab/skins/elastic/include/tasklist.less
index f4aae230..66687632 100644
--- a/plugins/libkolab/skins/elastic/include/tasklist.less
+++ b/plugins/libkolab/skins/elastic/include/tasklist.less
@@ -1,363 +1,363 @@
 /**
  * Kolab core library
  *
  * This file contains Elastic skin styles for tasklist plugin.
  *
  * @author Aleksander Machniak <machniak@kolabsys.com>
  *
  * Copyright (C) 2012-2018, Kolab Systems AG <contact@kolabsys.com>
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
  * published by the Free Software Foundation, either version 3 of the
  * License, or (at your option) any later version.
  *
  * This program is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  * GNU Affero General Public License for more details.
  *
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
 
 .menu {
     a.tasklist:before,
     a.tasklistlink:before,
     a.taskaddlink:before {
         content: @fa-var-calendar-check;
     }
 }
 
 .tasklist-invitebox {
     & > i.icon:before {
         content: @fa-var-calendar-check !important;
     }
 }
 
 .listing {
     li {
         & > div {
             &.tasklist .listname:before {
                 &:extend(.font-icon-class);
                 content: @fa-var-calendar-check;
             }
         }
     }
 }
 
 @tasklist-record-height: 3.8rem;
 
 #tasklist {
     li.taskitem {
         border-bottom: 0;
 
         div.taskhead {
             position: relative;
             display: block;
             height: @tasklist-record-height;
             padding-left: (1 * @listing-treetoggle-width);
             outline: 0;
 
             &.flagged {
                 color: @color-list-flagged !important;
             }
 
             &.selected {
                 background-color: @color-list-selected-background;
             }
 
             &.droptarget {
                 background-color: @color-list-droptarget-background;
             }
 
             &.complete {
                 span.title {
                     color: @color-list-deleted;
                 }
 
                 .progressbar {
                     display: none;
                 }
             }
         }
 
         & > div,
         & > span {
             border-bottom: 1px solid @color-list-border;
         }
 
         ul {
             padding: 0;
             border: 0;
 
             li {
                 padding-left: 0;
                 .taskhead, .title { padding-left: (2 * @listing-treetoggle-width + .25rem); }
                 .childtoggle { left: @listing-treetoggle-width; }
 
                 li {
                     .taskhead, .title { padding-left: (3 * @listing-treetoggle-width + .25rem); }
                     .childtoggle { left: (2 * @listing-treetoggle-width); }
 
                     li {
                         .taskhead, .title { padding-left: (4 * @listing-treetoggle-width + .25rem); }
                         .childtoggle { left: (3 * @listing-treetoggle-width); }
 
                         li {
                             .taskhead, .title { padding-left: (5 * @listing-treetoggle-width + .25rem); }
                             .childtoggle { left: (4 * @listing-treetoggle-width); }
 
                             li {
                                 .taskhead, .title { padding-left: (6 * @listing-treetoggle-width + .25rem); }
                                 .childtoggle { left: (5 * @listing-treetoggle-width); }
                             }
                         }
                     }
                 }
             }
         }
     }
 
     .childtoggle {
         position: absolute;
         left: 0;
         top: 0;
         width: @listing-treetoggle-width;
         padding: 0 0 0 .25rem;
         height: @tasklist-record-height;
         cursor: pointer;
         z-index: 1;
 
         .inner {
             display: none;
         }
 
         &:before {
             &:extend(.font-icon-class);
             content: @fa-var-angle-right;
             margin: 0;
             width: 1em;
             line-height: @tasklist-record-height;
         }
 
         &.expanded:before {
             content: @fa-var-angle-down;
         }
 
         &.collapsed:before {
             content: @fa-var-angle-right;
         }
     }
 
     span.title {
         position: absolute;
         left: 0;
         right: 0;
         bottom: 0;
         line-height: 2em;
         padding: 0 0 0 .2em;
         padding-left: (1 * @listing-treetoggle-width + .25rem);
         margin-right: 2em;
-        .overflow-ellipsis;
+        .overflow-ellipsis();
     }
 
     span.tags {
         position: absolute;
         right: 2em;
         top: 0;
         line-height: 2em;
         text-align: right;
     }
 
     span.date {
         position: absolute;
         padding-left: .2em;
         font-size: 90%;
         line-height: 2.5;
         color: @color-list-secondary;
         cursor: pointer;
 
         input {
             line-height: 1;
             padding: 0;
             margin-top: -2px;
         }
     }
 
     span.flagged {
         position: absolute;
         right: 0;
         top: 0;
         line-height: 1.8em;
         cursor: pointer;
     }
 
     .taskhead:not(.flagged):hover span.flagged:before {
         &:extend(.font-icon-class);
         .font-icon-regular(@fa-var-flag);
     }
 
     .taskhead.flagged span.flagged:before {
         &:extend(.font-icon-class);
         content: @fa-var-flag;
     }
 
     .progressbar {
         position: absolute;
         bottom: 1px;
         left: .2em;
         right: .2em;
 
         .progressvalue {
             border-top: 2px solid @color-warning;
         }
     }
 
     .custom-switch {
         position: absolute;
         top: 1.4rem;
         z-index: 1;
         height: 2.3em;
     }
 
     .actions {
         display: none;
     }
 
     // Focus indicator
     @media screen and (min-width: @screen-width-large) {
         .taskhead {
             border-left: 2px solid transparent;
         }
 
         .taskhead.focused {
             border-left: 2px solid @color-list-focus-indicator;
             outline: 0;
         }
     }
 }
 
 html.touch #tasklist {
     li {
         font-size: 1rem;
     }
 
     span.flagged,
     input[type=checkbox],
     .custom-switch {
         display: none;
     }
 
     span.title {
         margin-right: .5rem;
     }
 
     span.tags {
         right: .5rem;
     }
 }
 
 #taskshow {
     & + .formbuttons {
         button.disabled {
             display: none;
         }
     }
 
     .task-parent-title {
         color: @color-black-shade-text;
         font-size: 90%;
         margin-bottom: .5rem;
     }
 
     .task-title {
         font-size: 1.5rem;
         font-weight: bold;
     }
 
     .task-description {
         margin: 1rem 0;
     }
 
     &.status-completed h2 {
         color: @color-list-deleted;
     }
 
     &.status-flagged h2:before {
         &:extend(.font-icon-class);
         content: @fa-var-flag;
         color: @color-error;
         font-size: .9em;
     }
 
     .attachmentslist li {
         margin-right: 1em;
     }
 }
 
 #taskedit-attachment-form {
     // fixes redundant scrolling and height issue on task edit form
     position: absolute;
 }
 
 .messagetasklinks {
     & > i.icon:before {
         content: @fa-var-calendar-check !important;
     }
 
     .tasklist {
         list-style-type: none;
         margin: 0;
         padding: 0;
 
         li {
             display: flex;
             align-items: center;
         }
     }
 
     input {
         height: auto !important;
     }
 }
 
 #print-layout {
     #tasklist {
         padding: 0;
 
         li {
             list-style-type: none;
         }
 
         .description {
             display: block;
             white-space: pre-wrap;
         }
 
         .title {
             position: relative;
             font-weight: bold;
             padding: 0;
             margin: 0;
         }
 
         .taskhead {
             height: auto;
         }
     }
 }
 
 .taskitem-draghelper {
-    .overflow-ellipsis;
+    .overflow-ellipsis();
 }
 
 .quickview-active {
     // TODO ?
 }
 
 #rootdroppable {
     // TODO ?
 }
 
diff --git a/plugins/libkolab/skins/elastic/libkolab.less b/plugins/libkolab/skins/elastic/libkolab.less
index 8481910e..5f7a458e 100644
--- a/plugins/libkolab/skins/elastic/libkolab.less
+++ b/plugins/libkolab/skins/elastic/libkolab.less
@@ -1,623 +1,623 @@
 /**
  * Kolab core library
  *
  * This file contains Elastic skin styles for various Kolab plugins.
  *
  * @author Aleksander Machniak <machniak@kolabsys.com>
  *
  * Copyright (C) 2012-2018, Kolab Systems AG <contact@kolabsys.com>
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
  * published by the Free Software Foundation, either version 3 of the
  * License, or (at your option) any later version.
  *
  * This program is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  * GNU Affero General Public License for more details.
  *
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
 @skin: "elastic";
 @skin-path: "../../../../skins/@{skin}";
 
 @import (reference) "@{skin-path}/styles/variables";
 @import (reference) "@{skin-path}/styles/mixins";
 
 
 /*** Common folders list extensions ***/
 
 .listing {
     // Fix focus indicator, because we add div element in the list record
     @media screen and (min-width: @screen-width-large) {
         li > div > a {
             border-left: 2px solid transparent;
         }
         li > div > a:focus {
             border-left: 2px solid @color-list-focus-indicator;
             outline: 0;
         }
     }
 
     li {
         & > div {
             display: flex;
 
             & > a:first-child {
-                .overflow-ellipsis;
+                .overflow-ellipsis();
                 position: relative;
                 flex-grow: 1;
 
                 & + input {
                     position: initial;
                 }
             }
 
             .custom-switch {
                 position: relative;
             }
 
             &.folder .listname:before {
                 &:extend(.font-icon-class);
                 content: @fa-var-sticky-note;
                 margin-right: .5rem;
             }
 
             span.actions {
                 display: flex;
 
                 input + & {
                     padding-right: 2em;
                 }
 
                 a {
                     padding: 0;
                     margin: 0;
                     margin-right: .2rem;
                     cursor: pointer;
 
                     &:before {
                         margin: 0;
                     }
 
                     &.remove {
                         display: none;
                     }
                 }
 
                 html.touch & {
                     padding-left: .2rem;
                     a {
                         margin-right: .5rem;
                     }
                 }
             }
 
             a.quickview {
                 &:before {
                     content: @fa-var-eye;
                     opacity: .2;
                     color: @color-link;
                 }
 
                 &:after {
                     display: none !important;
                 }
             }
 
             &.focusview {
                 a.quickview:before {
                     content: @fa-var-eye;
                     opacity: 1;
                 }
             }
 
             .subscribed {
                 cursor: pointer;
                 // reset listing's link style
                 padding: 0 !important;
                 border-left: 0;
                 width: auto;
 
                 &:before {
                     .font-icon-regular(@fa-var-bookmark); // TODO: better icon
                     height: auto;
                     color: @color-link;
                     margin-right: .25rem;
                 }
             }
 
             // span.subscribed is used on addressbooks list, a.subscribed in other places
             span.subscribed:before {
                 &:extend(.font-icon-class);
                 .font-icon-regular(@fa-var-bookmark); // TODO: better icon
             }
 
             &.subscribed {
                 .subscribed:before {
                     .font-icon-solid(@fa-var-bookmark); // TODO: better icon
                 }
             }
         }
 
         &.selected > div > * {
             color: @color-list-selected;
             background-color: @color-list-selected-background;
         }
 
         & > div.readonly a:first-child,
         &.readonly:not(.virtual) > div a:first-child {
             &:after {
                 &:extend(.font-icon-class);
                 content: @fa-var-lock;
                 position: absolute;
                 left: 2.25rem;
                 top: @listing-line-height / 2;
                 font-size: .9em !important;
                 width: .9em;
                 line-height: 1;
                 height: 1em !important;
                 background-color: #fff;
                 border-radius: 50% 50% 0 0;
                 color: @color-font;
                 opacity: .9;
 
                 html.touch & {
                     top: @listing-touch-line-height / 2;
                     left: 2.7rem;
                 }
             }
         }
 
         & > div.other.user > .listname,
         &.other.user > div a:first-child {
             &:before {
                 .font-icon-solid(@fa-var-user);
             }
         }
 
         & > div.virtual.user > .listname,
         &.virtual.user > div a:first-child {
             &:after {
                 display: none;
             }
         }
 
         & > div.virtual.shared > .listname,
         &.virtual.shared > div a:first-child {
             &:before {
                 .font-icon-solid(@fa-var-share-alt);
             }
 
             &:after {
                 display: none;
             }
         }
 
         &.virtual > div > a {
             opacity: .5;
         }
     }
 
     // Tree structure fix
     &.treelist:not(.notree) {
         & > li > div > a {
             padding-left: @listing-treetoggle-width;
         }
     }
 
     li.droptarget > div {
         background-color: @color-list-droptarget-background;
     }
 
     li .count {
         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-secondary;
         color: #fff;
         text-align: center;
         font-weight: bold;
 
         html.touch & {
             line-height: 2rem;
             margin: (@listing-touch-line-height - 2 * @page-font-size)/2;
         }
     }
 }
 
 @treelist-readonly-icon-margin: 1.7em;
 .treelist {
     ul {
         li {
             a:first-child:after {
                 margin-left: 1 * @treelist-readonly-icon-margin !important;
             }
 
             li {
                 a:first-child:after {
                     margin-left: 2 * @treelist-readonly-icon-margin !important;
                 }
 
                 li {
                     a:first-child:after {
                         margin-left: 3 * @treelist-readonly-icon-margin !important;
                     }
 
                     li {
                         a:first-child:after {
                             margin-left: 4 * @treelist-readonly-icon-margin !important;
                         }
 
                         li {
                             a:first-child:after {
                                 margin-left: 5 * @treelist-readonly-icon-margin !important;
                             }
 
                             li {
                                 a:first-child:after {
                                     margin-left: 6 * @treelist-readonly-icon-margin !important;
                                 }
                             }
                         }
                     }
                 }
             }
         }
     }
 
     &.notree {
         li a:first-child:after {
             left: 1.3rem !important;
         }
     }
 }
 
 .searchresults {
     .boxtitle {
         line-height: 2rem !important;
         font-size: 80%;
         padding: 0 .5rem;
         margin: 0;
         color: @color-popover-separator;
         background-color: @color-popover-separator-background;
         text-align: center;
         border-bottom: 1px solid @color-layout-border;
     }
 }
 
 .folderlist li.mailbox {
     &.type-event > a:before {
         .font-icon-solid(@fa-var-calendar);
     }
     &.type-task > a:before {
         .font-icon-solid(@fa-var-calendar-check);
     }
     &.type-journal > a:before {
         .font-icon-regular(@fa-var-calendar);
     }
     &.type-contact > a:before {
         .font-icon-regular(@fa-var-address-book);
     }
     &.type-note > a:before {
         .font-icon-regular(@fa-var-sticky-note);
     }
     &.type-configuration > a:before {
         .font-icon-solid(@fa-var-cog);
     }
     &.type-freebusy > a:before {
         .font-icon-regular(@fa-var-calendar);
     }
     &.type-file > a:before {
         .font-icon-solid(@fa-var-folder);
     }
 }
 
 .menu {
     li.search {
         padding: .25rem .5rem;
     }
 
     a.history:before {
         content: @fa-var-history;
     }
 }
 
 button.btn {
     &.save.notify:before {
         content: @fa-var-envelope;
     }
 
     &.print:before {
         content: @fa-var-print;
     }
 }
 
 // E.g. notes preview frame
 .watermark {
     background: url("@{skin-path}/images/logo.svg") center no-repeat #fff;
     background-size: 30%;
     background-blend-mode: luminosity;
     width: 100%;
     height: 100%;
 
     & > * {
         display: none;
     }
 
     // this is to blend the watermark image
     &:before {
         content: "";
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         background: rgba(255, 255, 255, .85);
     }
 
     &.formcontainer {
         background: transparent !important;
 
         &:before {
             display: none;
         }
 
         & > * {
             display: block;
         }
 
         html.layout-small &,
         html.layout-phone & {
             overflow-y: auto !important;
         }
     }
 }
 
 .form-group > .datetime {
     display: flex;
     white-space: nowrap;
 
     input {
         width: 10em;
     }
 
     input:first-child {
         margin-right: .5rem;
         width: 15em;
     }
 
     a {
         margin-left: 1em;
         text-align: right;
         flex: 1;
         line-height: 2.4;
     }
 }
 
 .form-section.form-group.form-check {
     display: flex;
     padding: 0;
 
     label {
         order: 10;
     }
 }
 
 .formcontent.text-only .faded * {
     color: @color-black-shade-text;
 }
 
 .linkslist {
     // Reset .attachmentslist style
     border: 0 !important;
     background: transparent !important;
 
     li.link {
         padding: 0;
 
         &.message.eml:before {
             content: @fa-var-envelope;
         }
 
         a.messagelink {
-            .overflow-ellipsis;
+            .overflow-ellipsis();
         }
 
         a.delete .inner {
             display: none;
         }
     }
 }
 
 .print-config {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 10000;
     padding: .5em 1em;
     background-color: @color-black-shade-bg;
 
     button.print {
         margin-right: 1rem;
     }
 
     .prop {
         line-height: 2;
         margin-left: .5rem;
         display: inline-block;
         vertical-align: middle;
 
         label {
             margin: 0;
         }
     }
 
     @media print {
         display: none;
     }
 
     & + .print-content {
         position: relative;
         top: 0;
         left: 0;
         height: auto;
         margin: 5em auto 0 auto;
         overflow: visible;
     }
 }
 
 .selection-dialog {
     .ui-dialog-content {
         display: flex !important;
         overflow: hidden !important;
     }
 
     .selection-list {
         display: flex;
         flex-direction: column;
         border: 1px solid @color-layout-border;
         justify-content: center;
     }
 
     .ui-dialog-content .popupmenu {
         display: flex !important; // overwrites .popupmenu style
         width: 100%;
     }
 
     .scroller {
         flex: 1;
         overflow-y: auto;
     }
 
     .header {
         border-bottom: 1px solid @color-layout-border;
         display: flex;
         background-color: @color-layout-header-background;
         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;
         position: relative; // for absolute positioning of searchbar
         overflow: hidden;
         white-space: nowrap;
 
         a.button {
             color: @color-toolbar-button;
             margin: 0 .3rem;
 
             &:before {
                 margin: 0;
             }
         }
     }
 
     .header-title {
         width: 100%;
         text-align: center;
         margin: 0 2em;
     }
 
     .selection-content {
         display: flex;
         flex-direction: column;
     }
 
     .tab-content {
         margin-top: 1rem;
         height: 100%;
         overflow-y: auto;
     }
 
     .form-addon {
         margin: 0;
         padding: .5rem 0;
         width: 100%;
         background-color: @color-black-shade-bg;
         border-top: 1px solid @color-layout-border;
     }
 
     // overwrite .popupmenu colors
     .listing {
         ul {
             background-color: @color-layout-list-background;
         }
 
         li.selected {
             color: @color-font;
         }
     }
 
     @media screen and (max-width: @screen-width-small) {
         .ui-dialog-content {
             padding: 0 !important;
         }
 
         .ui-dialog-titlebar {
             display: none;
             margin: 0;
         }
 
         .selection-list {
             border: 0;
         }
 
         .selection-list,
         .selection-content {
             .header-title {
                 margin-left: 0;
             }
         }
 
         .header {
             a:before {
                 font-size: 1.75rem;
             }
         }
     }
 }
 
 // Use icons-only on taskmenu with small screen height
 @media screen and (max-height: 750px) and (min-width: (@screen-width-small + 1px)) {
     #layout-menu .popover-header img,
     #layout-menu {
         width: @layout-menu-width-sm;
     }
 
     #taskmenu {
         a {
             height: @layout-menu-width-sm;
             width: @layout-menu-width-sm;
             font-size: 1.2rem !important;
         }
 
         .special-buttons {
             width: @layout-menu-width-sm;
         }
 
         span.inner {
             display: none;
         }
     }
 }
 
 @import "include/calendar";
 @import "include/kolab_activesync";
 @import "include/kolab_delegation";
 @import "include/kolab_files";
 @import "include/kolab_notes";
 @import "include/kolab_tags";
 @import "include/libcalendaring";
 @import "include/tasklist";
 @import "include/darkmode";