diff --git a/src/app/features/tasks/task/new.scss b/src/app/features/tasks/task/new.scss
new file mode 100644
index 0000000000..6d3ccf5bb9
--- /dev/null
+++ b/src/app/features/tasks/task/new.scss
@@ -0,0 +1,762 @@
+@import '../../../../variables';
+
+//$this-task-text-color: #333333;
+//$this-task-text-color-dark: #dddddd;
+$this-task-text-color-done: #aaaaaa;
+$task-inner-padding-left-right: 6px;
+$this-active-shadow: $whiteframe-shadow-6dp;
+$this-first-line-min-height: 40px;
+$this-icon-default-opacity: 0.7;
+$this-current-task-zoom: 1.0178571428, 1;
+
+// z-indexes
+$z-drag-handle: 1;
+$z-task-title: 4;
+$z-btn: 4;
+$z-time-wrapper: 4;
+$z-btn-hover: 5;
+$z-hover-controls: 6;
+$z-progress-bar: 7;
+
+$z-check-done: 11;
+$z-first-line-controls-hover: 12;
+$z-swipe-block: 13;
+$z-toggle-sub-task-btn: 14;
+$z-task-title-focus: 15;
+
+$z-is-current-host: 20;
+$z-focus-host: 20;
+
+$z-drag-over-msg: 21;
+
+$z-time-btn-svg-wrapper: 5555;
+
+
+// TASK BOX STYLES
+// ---------------
+:host {
+  display: block;
+  position: relative;
+
+  > .inner-wrapper {
+    padding: 3px 0;
+    padding: 4px 0;
+    margin-bottom: 0;
+
+    .first-line {
+      min-height: $this-first-line-min-height;
+    }
+
+    //&.isCurrent,
+    &.isAdditionalInfoOpen {
+      margin-top: $s*2;
+      margin-bottom: $s*2;
+    }
+  }
+
+  &:last-child > .inner-wrapper {
+    margin-bottom: 0;
+  }
+
+  &.isCurrent {
+    z-index: $z-is-current-host;
+  }
+
+  &:focus {
+    z-index: $z-focus-host;
+    outline: none;
+
+    > .inner-wrapper > .box {
+      border-radius: $card-border-radius;
+
+      @include mq(xs, min) {
+        border: 1px solid $c-accent !important;
+        box-shadow: $whiteframe-shadow-5dp;
+      }
+    }
+  }
+}
+
+.inner-wrapper {
+  position: relative;
+
+  > .first-line {
+    position: relative;
+  }
+
+  > .box {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    transition: $transition-standard;
+    transition-property: transform;
+    box-shadow: $shadow-card-shadow;
+    //border-radius: $card-border-radius;
+    border: 1px solid $light-theme-extra-border-color;
+    border-bottom-color: transparent;
+
+    @include darkTheme {
+      border-color: $dark-theme-extra-border-color;
+      border-color: $dark-theme-bg;
+      //border-color: rgb(55, 55, 55);
+      border-bottom-color: transparent;
+    }
+
+    :host:first-child & {
+      border-top-left-radius: $card-border-radius;
+      border-top-right-radius: $card-border-radius;
+    }
+
+    :host:last-child & {
+      border-bottom-left-radius: $card-border-radius;
+      border-bottom-right-radius: $card-border-radius;
+    }
+
+    :host-context(.isLightTheme):last-child {
+      border-bottom-color: $light-theme-extra-border-color;
+    }
+
+    :host-context(.isDarkTheme):last-child {
+      border-bottom-color: $dark-theme-extra-border-color;
+      border-bottom-color: $dark-theme-bg;
+      //border-bottom-color: rgb(55, 55, 55);
+    }
+  }
+
+  &.isCurrent > .box {
+    transform: scale($this-current-task-zoom);
+    box-shadow: $this-active-shadow;
+    border-color: transparent;
+    border-radius: $card-border-radius;
+  }
+
+  &.isDone {
+    > .first-line {
+      position: relative;
+
+      .time-wrapper,
+      .controls,
+      .title-and-left-btns-wrapper {
+        opacity: 0.3;
+      }
+
+      .time {
+        opacity: 1;
+      }
+
+      .task-title {
+        //color: $this-task-text-color-done;
+        //text-decoration: line-through;
+      }
+    }
+  }
+}
+
+
+.sub-tasks {
+  margin: 0 $s;
+  @include mq(xs) {
+    //margin: $s $s*2 $s $s*3;
+    margin: $s;
+    margin-left: $s*3;
+    margin-right: 0;
+  }
+}
+
+
+
+
+.first-line {
+  display: flex;
+  flex-wrap: nowrap;
+  user-select: none;
+  justify-content: space-between;
+  align-items: center;
+  touch-action: pan-y;
+
+  @include mq(xs, max) {
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+}
+
+
+.title-and-left-btns-wrapper {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  min-height: 36px;
+  flex-grow: 1;
+  flex-basis: 70%;
+  @include mq(xs, max) {
+    //margin-bottom: 5px;
+    //flex-shrink: 0;
+    flex-basis: 50%;
+  }
+}
+
+// CONTROLS
+// --------
+.all-controls-wrapper {
+  display: flex;
+  flex-flow: row;
+  position: relative;
+  margin-left: $s;
+
+  &:hover {
+    .hover-controls {
+      opacity: 1;
+      transform: scaleX(1);
+    }
+  }
+}
+
+.controls {
+  white-space: nowrap;
+  text-align: right;
+  margin-right: 2px;
+  position: relative;
+
+  @include mq(xs, max) {
+    white-space: normal;
+    margin-left: 5px;
+  }
+}
+
+
+.hover-controls {
+  @include mq(xs, max) {
+    display: none !important;
+  }
+
+  display: flex;
+  flex-flow: row;
+  transform: scaleX(0);
+  transform-origin: right center;
+  opacity: 0;
+  transition: $transition-ultra-fast;
+  transition-property: transform, opacity;
+  position: absolute;
+  right: 100%;
+  top: 0;
+  z-index: $z-hover-controls;
+
+  :host-context(.isReducedTheme.isDarkTheme) & {
+    background-color: $dark-theme-bg;
+  }
+
+  :host-context(.isReducedTheme.isLightTheme) & {
+    background-color: $light-theme-bg;
+  }
+
+  .inner-wrapper.isCurrent > .first-line > .all-controls-wrapper > &:before {
+    border-left: 1px solid rgba(255, 255, 255, 0.9);
+  }
+
+
+  // extra hitarea
+  &:after {
+    position: absolute;
+    top: -$s*1.5;
+    right: 0;
+    left: -$s*1.5;
+    bottom: -$s*1.5;
+    content: '';
+  }
+
+  &:before {
+    content: '';
+    border-left: 1px solid rgba(200, 200, 200, 0.9);
+    width: 1px;
+    height: 90%;
+    position: absolute;
+    left: 0;
+    top: 5%;
+  }
+}
+
+
+// OTHER UI ELEMENTS
+// -----------------
+
+// TASK TITLE
+.task-title {
+  flex-grow: 1;
+  text-align: left;
+  outline: none;
+  margin-left: 2px;
+  padding: 4px 0 4px 6px;
+  line-height: 1.5;
+  min-height: 20px;
+  text-overflow: ellipsis;
+  cursor: text;
+  transition: $transition-leave;
+  transition-property: opacity, transform;
+  background: inherit;
+  position: relative;
+  overflow: visible;
+  user-select: none;
+  caret-color: #000000;
+  z-index: $z-task-title;
+
+  // needs to be block for it not to mess up
+  display: block !important;
+
+  @include darkTheme() {
+    caret-color: #ffffff;
+  }
+
+  &:first-letter {
+    // we can't do this, as this messes up text input :/
+    // text-transform: uppercase;
+  }
+
+  .isCurrent & {
+    //font-weight: bold;
+  }
+
+  &:after {
+    transition: $transition-leave;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    content: '';
+    box-shadow: $shadow-edit-on-click;
+    opacity: 0;
+    z-index: -1;
+    border: 1px solid black;
+    pointer-events: none;
+    background: #fff;
+
+    @include darkTheme() {
+      background: $dark-theme-bg-lighter;
+      border: 1px solid #ffffff;
+      box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.8), $whiteframe-shadow-13dp;
+    }
+  }
+
+
+  &:focus {
+    z-index: $z-task-title-focus;
+    user-select: all;
+    // thee magic number is 16/14 so we scale to whole pixels
+    transform: scale(1.142857143);
+    transition: $transition-standard;
+
+    // NOTE: needed to overwrite color for current task
+    color: $light-theme-text-color;
+
+    @include darkTheme() {
+      color: #fff;
+    }
+
+    .is-hide-controls & {
+      transform-origin: center center;
+      transform: scale(1.142857143) translateX(20px);
+    }
+
+    &:after {
+      opacity: 1;
+      transition: $transition-standard;
+    }
+
+    @include mq(xs, max) {
+      transform: scale(1);
+    }
+  }
+}
+
+
+// TIME
+.time-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: stretch;
+  padding-right: $s;
+  z-index: $z-time-wrapper;
+
+  &.isEditable {
+    cursor: pointer;
+
+    button {
+      transition: $transition-standard !important;
+      opacity: 0 !important;
+    }
+
+    &:hover {
+      .time,
+      button {
+        transition: $transition-standard;
+        opacity: 1 !important;
+      }
+    }
+  }
+
+  .time {
+    font-style: italic;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.8;
+    font-weight: 300;
+
+    @include mq(xs) {
+      opacity: 0.4;
+    }
+
+    @include mq(xs, max) {
+      font-size: 13px;
+    }
+
+    :host:focus > .inner-wrapper > .first-line &,
+      //:host:hover > .inner-wrapper > .first-line &,
+    .inner-wrapper.isCurrent > .first-line & {
+      opacity: 1;
+    }
+
+    .time-val,
+    .separator {
+      display: block;
+      white-space: nowrap;
+    }
+
+    .separator {
+      padding: 0 $s/2;
+    }
+  }
+}
+
+
+.additional-info {
+  display: block;
+  // required as sort of a clearfix (fixes padding issue)
+  overflow: hidden;
+}
+
+
+.drag-over-msg {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  opacity: 1;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+  display: flex;
+  z-index: $z-drag-over-msg;
+}
+
+
+.check-done {
+  opacity: 0.5;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  display: block;
+  z-index: $z-check-done;
+  transform: translate(-50%, -50%);
+  transition: $transition-standard;
+
+
+  &:hover {
+    opacity: 1 !important;
+  }
+
+  mat-icon {
+    $this-size: 40px;
+    font-size: $this-size;
+    height: $this-size;
+    width: $this-size;
+    line-height: $this-size;
+
+    &.undo {
+      display: none;
+    }
+  }
+
+  &:hover {
+    mat-icon {
+      animation: $transition-duration-m success-btn-ani linear;
+    }
+
+    .check {
+      display: none;
+    }
+
+    .undo {
+      display: block;
+    }
+  }
+}
+
+
+// SWIPE BLOCKS
+.block-left,
+.block-right {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 33%;
+  min-width: 100px;
+  z-index: $z-swipe-block;
+  transition: $transition-standard;
+  transform: scaleX(0);
+
+  &.isActive {
+    background-color: $c-accent;
+  }
+
+  mat-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scaleX(1.1);
+  }
+}
+
+
+.block-left {
+  pointer-events: none;
+  color: #fff;
+  left: 0;
+  transform-origin: left center;
+  box-shadow: $shadow-card-shadow;
+}
+
+.block-right {
+  pointer-events: none;
+  color: #fff;
+  right: 0;
+  transform-origin: right center;
+  box-shadow: $shadow-card-shadow;
+}
+
+progress-bar {
+  z-index: $z-progress-bar;
+}
+
+
+// BUTTON STYLES AND DRAG HANDLE
+// -----------------------------
+@include mq(xs) {
+  .first-line .menu-trigger {
+    opacity: 0;
+  }
+
+  .first-line:hover {
+    .drag-handle {
+      opacity: 1;
+    }
+
+    .hover-controls {
+      opacity: 1;
+      transform: scaleX(1);
+    }
+
+    .menu-trigger {
+      @include standardTaskOpacityChange;
+    }
+
+    .time-wrapper {
+      visibility: hidden;
+    }
+  }
+}
+
+.ico-btn {
+  &.delete-btn {
+    mat-icon.delete-icon {
+      color: $red !important;
+      @include darkTheme {
+        color: $red !important;
+      }
+    }
+
+    &:hover {
+      background: $red-danger !important;
+
+      mat-icon.delete-icon {
+        color: #ffffff !important;
+        @include darkTheme {
+          color: #ffffff !important;
+        }
+      }
+    }
+  }
+}
+
+.toggle-sub-tasks-btn,
+.first-line .ico-btn {
+  $this-button-spacer: 1px;
+  margin: 0 $this-button-spacer;
+  padding: 0;
+  z-index: $z-btn;
+  @extend %standardTaskOpacityChange;
+
+  &:hover {
+    z-index: $z-btn-hover;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+
+.drag-handle {
+  min-width: 24px;
+  margin: 0 4px 0 9px;
+  position: relative;
+  z-index: $z-drag-handle;
+  cursor: grab;
+  @extend %standardTaskOpacityChange;
+
+  // fixes drag and drop on mobile
+  touch-action: none;
+
+  @include mq(xs) {
+    opacity: 0;
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  // hit area
+  &:after {
+    content: '';
+    position: absolute;
+    top: -$s*0.25;
+    bottom: -$s*0.25;
+    left: -$s*0.25;
+    right: -$s*0.25;
+
+    @include mq(xs) {
+      top: -$s*2;
+      bottom: -$s*2;
+      left: -$s*2;
+      right: -$s*0.5;
+    }
+  }
+}
+
+
+
+.toggle-sub-tasks-btn,
+.first-line .ico-btn {
+  $this-button-spacer: 1px;
+  margin: 0 $this-button-spacer;
+  padding: 0;
+  z-index: $z-btn;
+  @extend %standardTaskOpacityChange;
+
+  &:hover {
+    z-index: $z-btn-hover;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.toggle-sub-tasks-btn {
+  position: absolute !important;
+  transform: translateY(-50%);
+  left: -23px;
+  top: 50%;
+  z-index: $z-toggle-sub-task-btn !important;
+  min-width: 0;
+  min-height: 0;
+  width: 32px;
+  height: 32px;
+  margin-top: -1px !important;
+  transform-origin: left top;
+  opacity: 1 !important;
+
+  &:hover {
+    transform: scale(1.3) translateY(-50%) !important;
+
+    mat-icon {
+      opacity: 1;
+    }
+  }
+
+  &:hover {
+    opacity: 1 !important;
+  }
+
+  mat-icon {
+    transition: $transition-standard;
+    margin-top: -8px;
+    opacity: $this-icon-default-opacity;
+
+    &.isHideDoneTasks {
+      transform: rotate(-45deg);
+    }
+  }
+}
+
+
+.attachment-btn,
+.show-additional-info-btn {
+  mat-icon {
+    transition: transform $transition-standard;
+    backface-visibility: hidden;
+  }
+
+  &.isActive mat-icon {
+    transform: rotate(45deg);
+  }
+}
+
+
+.time-btn {
+  position: relative;
+  overflow: visible;
+
+  ::ng-deep .svg-wrapper {
+    z-index: $z-time-btn-svg-wrapper;
+    position: absolute;
+    width: 44px;
+    height: 44px;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+  }
+}
+
+
+// ANIMATIONS ETC
+// --------------
+@keyframes success-btn-ani {
+  0% {
+    transform: scale(0.5) rotate(-180deg);
+  }
+  50% {
+    transform: scale(1) rotate(-90deg);
+  }
+  100% {
+    transform: scale(1) rotate(0deg);
+  }
+}
+
+.isPreventPointerEventsWhilePanning {
+  * {
+    user-select: none !important;
+    pointer-events: none !important;
+    transition: none !important;
+  }
+}
diff --git a/src/app/features/tasks/task/task.component.html b/src/app/features/tasks/task/task.component.html
index aa54f09308..3f0746c188 100644
--- a/src/app/features/tasks/task/task.component.html
+++ b/src/app/features/tasks/task/task.component.html
@@ -57,7 +57,7 @@
       </mat-icon>
     </button>
 
-    <div class="title-bar-wrapper">
+    <div class="title-and-left-btns-wrapper">
       <mat-icon [class.handle-par]="!task.parentId"
                 [class.handle-sub]="task.parentId"
                 class="drag-handle"
diff --git a/src/app/features/tasks/task/task.component.mixins.scss b/src/app/features/tasks/task/task.component.mixins.scss
new file mode 100644
index 0000000000..7fa658704f
--- /dev/null
+++ b/src/app/features/tasks/task/task.component.mixins.scss
@@ -0,0 +1,22 @@
+@mixin standardTaskOpacityChange {
+  opacity: $this-icon-default-opacity;
+  transition: transform $transition-fast;
+
+  :host:focus &,
+  .isCurrent &,
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+}
+
+%standardTaskOpacityChange {
+  @include standardTaskOpacityChange;
+}
+
+%standardTaskZoom {
+  &:hover,
+  &:focus {
+    transform: scale(1.2);
+  }
+}
diff --git a/src/app/features/tasks/task/task.component.scss b/src/app/features/tasks/task/task.component.scss
index f5b079d29c..710b9de84b 100644
--- a/src/app/features/tasks/task/task.component.scss
+++ b/src/app/features/tasks/task/task.component.scss
@@ -31,731 +31,13 @@ $z-drag-over-msg: 21;
 
 $z-time-btn-svg-wrapper: 5555;
 
-@mixin standardTaskOpacityChange {
-  opacity: $this-icon-default-opacity;
-  transition: transform $transition-fast;
+@import './task.component.mixins';
+@import './new';
 
-  :host:focus &,
-  .isCurrent &,
-  &:hover,
-  &:focus {
-    opacity: 1;
-  }
-}
 
-%standardTaskOpacityChange {
-  @include standardTaskOpacityChange;
-}
 
-%standardTaskZoom {
-  &:hover,
-  &:focus {
-    transform: scale(1.2);
-  }
-}
 
-:host {
-  display: block;
-  position: relative;
-
-  > .inner-wrapper {
-    padding: 3px 0;
-    padding: 4px 0;
-    margin-bottom: 0;
-
-    .first-line {
-      min-height: $this-first-line-min-height;
-    }
-
-    //&.isCurrent,
-    &.isAdditionalInfoOpen {
-      margin-top: $s*2;
-      margin-bottom: $s*2;
-    }
-  }
-
-  &:last-child > .inner-wrapper {
-    margin-bottom: 0;
-  }
-
-  &.isCurrent {
-    z-index: $z-is-current-host;
-  }
-
-  &:focus {
-    z-index: $z-focus-host;
-    outline: none;
-
-    > .inner-wrapper > .box {
-      border-radius: $card-border-radius;
-
-      @include mq(xs, min) {
-        border: 1px solid $c-accent !important;
-        box-shadow: $whiteframe-shadow-5dp;
-      }
-    }
-  }
-}
-
-.sub-tasks {
-  margin: 0 $s;
-  @include mq(xs) {
-    //margin: $s $s*2 $s $s*3;
-    margin: $s;
-    margin-left: $s*3;
-    margin-right: 0;
-  }
-}
-
-.title-bar-wrapper {
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: center;
-  min-height: 36px;
-  flex-grow: 1;
-  flex-basis: 70%;
-  @include mq(xs, max) {
-    //margin-bottom: 5px;
-    //flex-shrink: 0;
-    flex-basis: 50%;
-  }
-}
-
-.isAdditionalInfoOpen > .first-line {
-  .task-title {
-    //font-weight: bold;
-  }
-}
-
-
-.toggle-sub-tasks-btn,
-.first-line .ico-btn {
-  $this-button-spacer: 1px;
-  margin: 0 $this-button-spacer;
-  padding: 0;
-  z-index: $z-btn;
-  @extend %standardTaskOpacityChange;
-
-  &:hover {
-    z-index: $z-btn-hover;
-  }
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.toggle-sub-tasks-btn {
-  position: absolute !important;
-  transform: translateY(-50%);
-  left: -23px;
-  top: 50%;
-  z-index: $z-toggle-sub-task-btn !important;
-  min-width: 0;
-  min-height: 0;
-  width: 32px;
-  height: 32px;
-  margin-top: -1px !important;
-  transform-origin: left top;
-  opacity: 1 !important;
-
-  &:hover {
-    transform: scale(1.3) translateY(-50%) !important;
-
-    mat-icon {
-      opacity: 1;
-    }
-  }
-
-  &:hover {
-    opacity: 1 !important;
-  }
-
-  mat-icon {
-    transition: $transition-standard;
-    margin-top: -8px;
-    opacity: $this-icon-default-opacity;
-
-    &.isHideDoneTasks {
-      transform: rotate(-45deg);
-    }
-  }
-}
-
-
-.first-line {
-  display: flex;
-  flex-wrap: nowrap;
-  user-select: none;
-  justify-content: space-between;
-  align-items: center;
-  touch-action: pan-y;
-
-  @include mq(xs, max) {
-    flex-wrap: wrap;
-    justify-content: flex-end;
-  }
-}
-
-.ico-btn {
-  &.delete-btn {
-    mat-icon.delete-icon {
-      color: $red !important;
-      @include darkTheme {
-        color: $red !important;
-      }
-    }
-
-    &:hover {
-      background: $red-danger !important;
-
-      mat-icon.delete-icon {
-        color: #ffffff !important;
-        @include darkTheme {
-          color: #ffffff !important;
-        }
-      }
-    }
-  }
-}
-
-.attachment-btn,
-.show-additional-info-btn {
-  mat-icon {
-    transition: transform $transition-standard;
-    backface-visibility: hidden;
-  }
-
-  &.isActive mat-icon {
-    transform: rotate(45deg);
-  }
-}
-
-.all-controls-wrapper {
-  display: flex;
-  flex-flow: row;
-  position: relative;
-  margin-left: $s;
-
-  &:hover {
-    .hover-controls {
-      opacity: 1;
-      transform: scaleX(1);
-    }
-  }
-}
-
-@include mq(xs) {
-  .first-line .menu-trigger {
-    opacity: 0;
-  }
-
-  .first-line:hover {
-    .drag-handle {
-      opacity: 1;
-    }
-
-    .hover-controls {
-      opacity: 1;
-      transform: scaleX(1);
-    }
-
-    .menu-trigger {
-      @include standardTaskOpacityChange;
-    }
-
-    .time-wrapper {
-      visibility: hidden;
-    }
-  }
-}
-
-
-.hover-controls {
-  @include mq(xs, max) {
-    display: none !important;
-  }
-
-  display: flex;
-  flex-flow: row;
-  transform: scaleX(0);
-  transform-origin: right center;
-  opacity: 0;
-  transition: $transition-ultra-fast;
-  transition-property: transform, opacity;
-  position: absolute;
-  right: 100%;
-  top: 0;
-  z-index: $z-hover-controls;
-
-  :host-context(.isReducedTheme.isDarkTheme) & {
-    background-color: $dark-theme-bg;
-  }
-
-  :host-context(.isReducedTheme.isLightTheme) & {
-    background-color: $light-theme-bg;
-  }
-
-  .inner-wrapper.isCurrent > .first-line > .all-controls-wrapper > &:before {
-    border-left: 1px solid rgba(255, 255, 255, 0.9);
-  }
-
-
-  // extra hitarea
-  &:after {
-    position: absolute;
-    top: -$s*1.5;
-    right: 0;
-    left: -$s*1.5;
-    bottom: -$s*1.5;
-    content: '';
-  }
-
-  &:before {
-    content: '';
-    border-left: 1px solid rgba(200, 200, 200, 0.9);
-    width: 1px;
-    height: 90%;
-    position: absolute;
-    left: 0;
-    top: 5%;
-  }
-}
-
-
-.controls {
-  white-space: nowrap;
-  text-align: right;
-  margin-right: 2px;
-  position: relative;
-
-  @include mq(xs, max) {
-    white-space: normal;
-    margin-left: 5px;
-  }
-}
-
-
-.inner-wrapper {
-  position: relative;
-
-  > .first-line {
-    position: relative;
-  }
-
-  > .box {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    transition: $transition-standard;
-    transition-property: transform;
-    box-shadow: $shadow-card-shadow;
-    //border-radius: $card-border-radius;
-    border: 1px solid $light-theme-extra-border-color;
-    border-bottom-color: transparent;
-
-    @include darkTheme {
-      border-color: $dark-theme-extra-border-color;
-      border-color: $dark-theme-bg;
-      //border-color: rgb(55, 55, 55);
-      border-bottom-color: transparent;
-    }
-
-    :host:first-child & {
-      border-top-left-radius: $card-border-radius;
-      border-top-right-radius: $card-border-radius;
-    }
-
-    :host:last-child & {
-      border-bottom-left-radius: $card-border-radius;
-      border-bottom-right-radius: $card-border-radius;
-    }
-
-    :host-context(.isLightTheme):last-child {
-      border-bottom-color: $light-theme-extra-border-color;
-    }
-
-    :host-context(.isDarkTheme):last-child {
-      border-bottom-color: $dark-theme-extra-border-color;
-      border-bottom-color: $dark-theme-bg;
-      //border-bottom-color: rgb(55, 55, 55);
-    }
-  }
-
-  &.isCurrent > .box {
-    transform: scale($this-current-task-zoom);
-    box-shadow: $this-active-shadow;
-    border-color: transparent;
-    border-radius: $card-border-radius;
-  }
-
-  &.isDone {
-    > .first-line {
-      position: relative;
-
-      .time-wrapper,
-      .controls,
-      .title-bar-wrapper {
-        opacity: 0.3;
-      }
-
-      .time {
-        opacity: 1;
-      }
-
-      .task-title {
-        //color: $this-task-text-color-done;
-        //text-decoration: line-through;
-      }
-    }
-  }
-}
-
-.drag-handle {
-  min-width: 24px;
-  margin: 0 4px 0 9px;
-  position: relative;
-  z-index: $z-drag-handle;
-  cursor: grab;
-  @extend %standardTaskOpacityChange;
-
-  // fixes drag and drop on mobile
-  touch-action: none;
-
-  @include mq(xs) {
-    opacity: 0;
-  }
-
-  &:active {
-    cursor: grabbing;
-  }
-
-  // hit area
-  &:after {
-    content: '';
-    position: absolute;
-    top: -$s*0.25;
-    bottom: -$s*0.25;
-    left: -$s*0.25;
-    right: -$s*0.25;
-
-    @include mq(xs) {
-      top: -$s*2;
-      bottom: -$s*2;
-      left: -$s*2;
-      right: -$s*0.5;
-    }
-  }
-}
-
-.task-title {
-  flex-grow: 1;
-  text-align: left;
-  outline: none;
-  margin-left: 2px;
-  padding: 4px 0 4px 6px;
-  line-height: 1.5;
-  min-height: 20px;
-  text-overflow: ellipsis;
-  cursor: text;
-  transition: $transition-leave;
-  transition-property: opacity, transform;
-  background: inherit;
-  position: relative;
-  overflow: visible;
-  user-select: none;
-  caret-color: #000000;
-  z-index: $z-task-title;
-
-  // needs to be block for it not to mess up
-  display: block !important;
-
-  @include darkTheme() {
-    caret-color: #ffffff;
-  }
-
-  &:first-letter {
-    // we can't do this, as this messes up text input :/
-    // text-transform: uppercase;
-  }
-
-  .isCurrent & {
-    //font-weight: bold;
-  }
-
-  &:after {
-    transition: $transition-leave;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    content: '';
-    box-shadow: $shadow-edit-on-click;
-    opacity: 0;
-    z-index: -1;
-    border: 1px solid black;
-    pointer-events: none;
-    background: #fff;
-
-    @include darkTheme() {
-      background: $dark-theme-bg-lighter;
-      border: 1px solid #ffffff;
-      box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.8), $whiteframe-shadow-13dp;
-    }
-  }
-
-
-  &:focus {
-    z-index: $z-task-title-focus;
-    user-select: all;
-    // thee magic number is 16/14 so we scale to whole pixels
-    transform: scale(1.142857143);
-    transition: $transition-standard;
-
-    // NOTE: needed to overwrite color for current task
-    color: $light-theme-text-color;
-
-    @include darkTheme() {
-      color: #fff;
-    }
-
-    .is-hide-controls & {
-      transform-origin: center center;
-      transform: scale(1.142857143) translateX(20px);
-    }
-
-    &:after {
-      opacity: 1;
-      transition: $transition-standard;
-    }
-
-    @include mq(xs, max) {
-      transform: scale(1);
-    }
-  }
-}
-
-input {
-  width: 100%;
-  display: block;
-  box-sizing: border-box;
-  height: 30px;
-  padding: 4px 10px;
-  border: none;
-}
-
-.time-wrapper {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: stretch;
-  padding-right: $s;
-  z-index: $z-time-wrapper;
-
-  &.isEditable {
-    cursor: pointer;
-
-    button {
-      transition: $transition-standard !important;
-      opacity: 0 !important;
-    }
-
-    &:hover {
-      .time,
-      button {
-        transition: $transition-standard;
-        opacity: 1 !important;
-      }
-    }
-  }
-
-  .time {
-    font-style: italic;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    opacity: 0.8;
-    font-weight: 300;
-
-    @include mq(xs) {
-      opacity: 0.4;
-    }
-
-    @include mq(xs, max) {
-      font-size: 13px;
-    }
-
-    :host:focus > .inner-wrapper > .first-line &,
-      //:host:hover > .inner-wrapper > .first-line &,
-    .inner-wrapper.isCurrent > .first-line & {
-      opacity: 1;
-    }
-
-    .time-val,
-    .separator {
-      display: block;
-      white-space: nowrap;
-    }
-
-    .separator {
-      padding: 0 $s/2;
-    }
-  }
-
-}
-
-
-.additional-info {
-  display: block;
-  // required as sort of a clearfix (fixes padding issue)
-  overflow: hidden;
-}
-
-.drag-over-msg {
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  opacity: 1;
-  justify-content: center;
-  align-items: center;
-  font-weight: bold;
-  display: flex;
-  z-index: $z-drag-over-msg;
-}
-
-.time-btn {
-  position: relative;
-  overflow: visible;
-
-  ::ng-deep .svg-wrapper {
-    z-index: $z-time-btn-svg-wrapper;
-    position: absolute;
-    width: 44px;
-    height: 44px;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0);
-  }
-}
-
-.check-done {
-  opacity: 0.5;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  display: block;
-  z-index: $z-check-done;
-  transform: translate(-50%, -50%);
-  transition: $transition-standard;
-
-
-  &:hover {
-    opacity: 1 !important;
-  }
-
-  mat-icon {
-    $this-size: 40px;
-    font-size: $this-size;
-    height: $this-size;
-    width: $this-size;
-    line-height: $this-size;
-
-    &.undo {
-      display: none;
-    }
-  }
-
-  &:hover {
-    mat-icon {
-      animation: $transition-duration-m success-btn-ani linear;
-    }
-
-    .check {
-      display: none;
-    }
-
-    .undo {
-      display: block;
-    }
-  }
-}
-
-progress-bar {
-  z-index: $z-progress-bar;
-}
-
-.block-left,
-.block-right {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 33%;
-  min-width: 100px;
-  z-index: $z-swipe-block;
-  transition: $transition-standard;
-  transform: scaleX(0);
-
-  &.isActive {
-    background-color: $c-accent;
-  }
-
-  mat-icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) scaleX(1.1);
-  }
-}
-
-.block-left {
-  pointer-events: none;
-  color: #fff;
-  left: 0;
-  transform-origin: left center;
-  box-shadow: $shadow-card-shadow;
-}
-
-.block-right {
-  pointer-events: none;
-  color: #fff;
-  right: 0;
-  transform-origin: right center;
-  box-shadow: $shadow-card-shadow;
-}
-
-@keyframes success-btn-ani {
-  0% {
-    transform: scale(0.5) rotate(-180deg);
-  }
-  50% {
-    transform: scale(1) rotate(-90deg);
-  }
-  100% {
-    transform: scale(1) rotate(0deg);
-  }
-}
-
-.isPreventPointerEventsWhilePanning {
-  * {
-    user-select: none !important;
-    pointer-events: none !important;
-    transition: none !important;
-  }
-}
-
-// DEBUGGING CODE TO CHECK WITH NO BOXES UI
-//
+// REDUCED THEME STYLES
 :host-context(.isReducedTheme) {
   > .inner-wrapper:not(.isCurrent) > .box {
     box-shadow: none !important;