diff --git a/README.md b/README.md
index ab87089..1524e99 100644
--- a/README.md
+++ b/README.md
@@ -100,9 +100,6 @@ Check out some of the available themes you can choose from.
 
 ![Screenshot of Gruvbox theme.](screenshots/gruvbox_full.png)
 
-#### [Inbox](themes/inbox)
-![Screenshot of Inbox theme.](screenshots/inbox.png)
-
 ### [Nord](themes/nord)
 ![Screenshot of Nord theme.](screenshots/nord.png)
 
diff --git a/docker-compose.yml b/docker-compose.yml
index 66c2207..1233454 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -13,6 +13,7 @@ services:
     restart: always
     volumes:
       # Allows changes made to project directory to be accessed by the container and persist.
-      - .:/var/projects/protonmail-themes 
+      - ./templates:/var/projects/protonmail-themes/templates
+      - ./themes:/var/projects/protonmail-themes/themes
       # Adds a volume to store node dependencies.
-      - /var/projects/protonmail-themes/node_modules
\ No newline at end of file
+      - /var/projects/protonmail-themes/node_modules
diff --git a/docs/README.md b/docs/README.md
index fc1d614..50d34f5 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,6 +1,6 @@
 # Documentation
 
-A  breakdown of how the project works, and details on how themes are generated and now to create new ones.
+A breakdown of how the project works, and details on how themes are generated and now to create new ones.
 
 <details>
 <summary>Click to show available documentation</summary>
@@ -19,6 +19,7 @@ A  breakdown of how the project works, and details on how themes are generated a
 </details>
 
 ## Quick Setup Guide
+
 > **Required for theme creation only**
 
 Before making a contribution you might want to setup the project in order to test fixes and compile themes. Install NodeJS first and after forking/cloning this repository install the dependencies:
@@ -28,7 +29,7 @@ cd protonmail-themes
 npm install
 ```
 
-Themes can be created by duplicating and renaming the [example theme folder](../templates/theme_example) and its `.scss` file to the chosen theme name. 
+Themes can be created by duplicating and renaming the [example theme folder](../templates/theme_example) and its `.scss` file to the chosen theme name.
 
 A theme name folder and file should be separared by undercores if it has more than one word and should be places in [`/templates/`](../templates):
 
@@ -56,6 +57,7 @@ npm run build
 ## Creating a theme
 
 Themes can be created in `/templates` and should be contained on a folder with the same name of the theme. For instance:
+
 ```
 /templates
     /new_theme
@@ -63,19 +65,20 @@ Themes can be created in `/templates` and should be contained on a folder with t
 ```
 
 After creating your theme folder and file, `new_theme.scss` should look similar to this snippet:
+
 ```scss
 /*! =========================================== *
  * Template THEME
- * Version: #{$version}
+ * Version: #{info.$version}
  * Author: You name here
  * Website: Your website here
  * Tweets Your twitter handle
  * =========================================== */
 
 // Change colors here and they will change everywhere.
-$base: #1C1C1C;
+$base: #1c1c1c;
 $search: #000;
-$highlight: #2FBF71;
+$highlight: #2fbf71;
 $navigation: #fff;
 
 $text_color: #0d0d0d;
@@ -84,7 +87,6 @@ $danger_color: #d62646;
 $warning_color: #ffaa00;
 
 @import "../@theme-base/styles";
-@import "../@theme-base/dark_mode";
 
 // Please do not remove the imports above, add overrides and other partials below this line.
 ```
@@ -92,11 +94,13 @@ $warning_color: #ffaa00;
 The snippet will change the colors of the elements across the theme. However, you can extend or override the theme further by adding changes to `_override.scss`. Additionally, [custom partials can be added](https://sass-lang.com/guide). You can refer to [the guide on editing theme templates](./theme-templates-guide.md) for more information on customizing themes.
 
 ## Themes
+
 Ready to use themes are stored at [`/themes`](../themes) and can be copied over to the Custom Theme text area avalaible at the `Appearance -> Themes` section on your ProtonMail settings. Each theme has it's own folder with one or more `.css` files in it. The text inside these `.css` files is what needs to be copied to the custom theme section in ProtonMail for the theme to be applied.
 
-These themes are compiled  from `.scss` templates into a final `.css`.
+These themes are compiled from `.scss` templates into a final `.css`.
 
 ## Templates
+
 The templates folder at [`/templates`](../templates) hold style rules for all the themes as well as their particular color palettes. All themes import their styles from the [`/@theme-base/_styles.scss`](../templates/@theme-base/_styles.scss) partial and this is the file that should be changed when fixing a bug in styling or adding styles to a newly introduced element in the UI.
 
 In addition to [`_styles.scss`](../templates/@theme-base/_styles.scss), the [`/@theme-base/_full.scss`](../templates/@theme-base/_full.scss) will create a version of the theme where the base colour will be applied to further areas in the UI and can be used to have themes closer to a "dark mode" aesthetic.
@@ -105,7 +109,7 @@ Changes made in these two files will apply to all themes. Two `.css` files are c
 
 Theme colors be changed in their template files and can be found inside in their theme template folder. For instance, to change the Green Lume theme, change the variables at `/template/gree_lume/green_lume.scss`. The color values applied to those variables will replicate across ProtonMail's UI when the theme is applied.
 
-The [`/@theme-base`](../templates/@theme-base/) folder also includes two other folders with styling. These are [part of ProtonMail's Design System](https://github.com/ProtonMail/design-system/tree/master/_sass) and serve as a starting point to create the themes.  
+The [`/@theme-base`](../templates/@theme-base/) folder also includes two other folders with styling. These are [part of ProtonMail's Design System](https://github.com/ProtonMail/design-system/tree/master/_sass) and serve as a starting point to create the themes.
 
 ## Theme Compilation
 
@@ -122,11 +126,13 @@ npm run build
 ```
 
 # Contributing
-Everyone who is learning or already has a grasp of SASS and CSS is encouraged to contribute to the project. If you're applying a fix to `gulpfile.js` or any other files there's not set rules for now. 
+
+Everyone who is learning or already has a grasp of SASS and CSS is encouraged to contribute to the project. If you're applying a fix to `gulpfile.js` or any other files there's not set rules for now.
 
 Most contributions are usually theme related and if you're thinking of making a pull request please change the respective `.scss` file in favor of the compiled stylesheet (in `/themes`) in order to make these changes permanent and available for everyone. Templates can be found at `/templates/@theme-base`.
 
 If this is not clear please don't worry! Feel free to open a PR anyway and I'm happy to walk you through it.
 
 # Is there something missing?
-If your question wasn't addressed here please feel free open an issue.
\ No newline at end of file
+
+If your question wasn't addressed here please feel free open an issue.
diff --git a/docs/theme-templates-guide.md b/docs/theme-templates-guide.md
index 129e3bb..e5b14fa 100644
--- a/docs/theme-templates-guide.md
+++ b/docs/theme-templates-guide.md
@@ -4,7 +4,7 @@
 
 There's a template provided at [`/templates/theme_example`](`../templates/theme_example`) that allows anyone that knows a bit a about `SCSS` to generate a theme.
 
-This template does not style every single element of ProtonMail's UI and sticks to changing the `color` of elements rather than `position` or `font`. 
+This template does not style every single element of ProtonMail's UI and sticks to changing the `color` of elements rather than `position` or `font`.
 
 Feel free to extend and adapt this template to your needs by creating an `_override.scss` file and adding new styles there, those styles will be scoped to your theme only. The [Ochin theme can be consulted as an example](../templates/ochin) of using overrides can be used on a theme.
 
@@ -13,12 +13,13 @@ Feel free to extend and adapt this template to your needs by creating an `_overr
 Sass was used to enable users and contributors to create themes without having to create a stylesheet from scratch. In order to create a theme it will require [some knowledge of how variables work in Sass](http://sass-lang.com/guide).
 
 ### 1. Setting color palette
+
 Decide at least four colors you would like to use in your theme, then replace the `hex` values on the following variables:
 
 ```scss
-$base: #1C1C1C;
+$base: #1c1c1c;
 $search: #000;
-$highlight: #2FBF71;
+$highlight: #2fbf71;
 $navigation: #fff;
 ```
 
@@ -27,6 +28,7 @@ Each variable applies to a certain area of the UI. The `$base` color changes the
 > [Coolors is a good tool to create a palette](https://coolors.co/) if you're unsure of which colors to use!
 
 #### (Optional) Changing other variables
+
 There is another set of variables available that will change elements that tend to fall out of the groups defined earlier. This could include content boxes, warnings, or elements that usually show up on the Settings part of the app. Feel free to experiment changing these if you are looking for a bit more customization (for adding more to the theme you can also extend the template, we'll get to this later).
 
 ```scss
@@ -37,11 +39,13 @@ $warning_color: #ffaa00;
 ```
 
 ### 2. Compiling the template from SASS into a CSS theme
+
 This project [includes a way of compiling themes using Gulp](./README.md#theme-compilation) but the way you do this is entirely up to you. You could do it through the command line, perhaps you use [Atom](https://atom.io/) and a plugin to compile your `.scss` files into CSS as you write them. Use [Webpack](https://webpack.js.org/) or [Sassmeister](https://www.sassmeister.com/). This project can compile your theme by running `npm run build`, provided that dependencies were installed.
 
-Regardless of the way you choose to do this you should end up with a `theme_template.css` *not* `.scss`.
+Regardless of the way you choose to do this you should end up with a `theme_template.css` _not_ `.scss`.
 
 ### 3. (Optional) Extending you theme.
+
 Editing the variables can create a decent theme but you might want to further develop it and style as many elements as you like. To further customize your theme, add the extra CSS to an `_override.scss` file and add additional styles there. The file should be in `/templates/you_theme/`:
 
 ```bash
@@ -60,10 +64,9 @@ Override styles will be scoped to your theme only. The [Ochin theme can be consu
 // Color variables here...
 
 @import "../@theme-base/styles";
-@import "../@theme-base/dark_mode";
 
 // Please do not remove the imports above, add overrides and other partials below this line.
-@import 'override';
+@import "override";
 ```
 
 In `_override.scss` add the styles specific to your theme:
@@ -81,4 +84,5 @@ In `_override.scss` add the styles specific to your theme:
 Your theme will compile to CSS and can be found in `/themes/your_theme_name` by running the build task present in the [quick setup guide](README.md#quick-setup-guide), in the README.
 
 ### Final touches
-Test your theme on ProtonMail and re-iterate as needed. If you think your theme is ready and *cool* you can submit a pull request and add it to this repo so everyone can use it.
+
+Test your theme on ProtonMail and re-iterate as needed. If you think your theme is ready and _cool_ you can submit a pull request and add it to this repo so everyone can use it.
diff --git a/docs/theme-versioning.md b/docs/theme-versioning.md
index 87fcf07..20f56a5 100644
--- a/docs/theme-versioning.md
+++ b/docs/theme-versioning.md
@@ -3,17 +3,17 @@
 In `templates/@theme-base/` there is a `_version.scss` partial. This partial includes a single line of code that aids in keeping the version of all themes up to date:
 
 ```scss
-$version: 'v4.0.0-beta15';
+$version: "v4.0.0-beta15";
 ```
 
 This variable is used in all themes by default and it will print the current version when a theme is compiled. For example, this theme header:
 
 ```scss
-@import "../@theme-base/version";
+@use "../@theme-base/version" as info;
 
 /*! =========================================== *
  * SLICK THEME
- * Version: #{$version}
+ * Version: #{info.$version}
  * Author: ProtonMail
  * Website: www.protonmail.com
  * Twitter: @protonmail
@@ -35,12 +35,12 @@ Will compile to:
 In some cases a theme might have a specific version it is compatible with. In that case the variable can be pointed to another version on the theme template file:
 
 ```scss
-@import "../@theme-base/version";
+@use "../@theme-base/version" as info;
 $version: "v4.0.0-beta3";
 
 /*! =========================================== *
  * SLICK THEME
- * Version: #{$version}
+ * Version: #{info.$version}
  * Author: ProtonMail
  * Website: www.protonmail.com
  * Twitter: @protonmail
diff --git a/screenshots/inbox.png b/screenshots/inbox.png
deleted file mode 100644
index 1b66b05..0000000
Binary files a/screenshots/inbox.png and /dev/null differ
diff --git a/templates/@theme-base/_dark_mode.scss b/templates/@theme-base/_dark_mode.scss
deleted file mode 100644
index 188148c..0000000
--- a/templates/@theme-base/_dark_mode.scss
+++ /dev/null
@@ -1,610 +0,0 @@
-// Applies theme styles across as many areas of the layout as possible.
-
-// Scrollbar (PM currently does not style this element)
-body {
-  scrollbar-color: lighten($base, 10%) lighten($base, 2%);
-}
-::-webkit-scrollbar {
-  width: 16px;
-
-  &-track {
-    background: lighten($base, 2%);
-  }
-  &-thumb {
-    background: lighten($base, 10%);
-    box-shadow: inset 0 0 0 4px lighten($base, 2%);
-    border-radius: 16px;
-  }
-}
-
-.isDarkMode {
-  .bordered,
-  .bordered-container:not([class*="composerInputMeta-"]),
-  .breadcrumb-container {
-    border-color: lighten($base, 10%);
-  }
-
-  .dropDown-content::after, .dropDown-content::before,
-  .dropDown:not(.dropDown--noCaret)::before,
-  .dropDown-content {
-    background: $base;
-    border: $base;
-  }
-
-  .dropDown-item-button:focus, .dropDown-item-button:focus-within, 
-  .dropDown-item-button:hover, .dropDown-item-link:focus, 
-  .dropDown-item-link:focus-within, .dropDown-item-link:hover {
-    background-color: darken($base, 5%);
-  }
-  
-  .dropDown-item-button.is-disabled, .dropDown-item-button[disabled],
-  .dropDown-item-link.is-disabled, .dropDown-item-link[disabled] {
-    background-color: darken($base, 2%);
-  }
-
-  .squireToolbar-select-list {
-    background: $base;
-    color: $text_color;
-  }
-
-  .squireToolbar-dropdown-divider {
-    background-color: lighten($base, 10%);
-  }
-
-  .squireToolbar-select-item:hover {
-    background: darken($base, 2%);
-  }
-
-  // Compose window
-  #pm_composer .composer,
-  .composerInputMeta-overlay {
-    background: $base;
-  }
-
-  #pm_composer .composer .fill {
-    background: $base;
-  }
-
-  .composer-body-container textarea {
-    background: $base;
-  }
-
-  .composer-addresses-item {
-    background: darken($base, 5%);
-  }
-  
-  
-  .composer-addresses-autocomplete {
-    ul {
-      background: darken($base, 5%);
-    }
-    
-    li[aria-selected="true"],
-    li:hover {
-      background: $base;
-    }
-  }
-
-  // Email tags present in new message window
-  .autocompleteEmails-item {
-    background-color: darken($base, 2%);
-    border-color: darken($base, 2%);
-  }
-
-  .autocompleteEmails-label {
-    border-left: 1px solid lighten($base, 10%);
-    border-right: 1px solid lighten($base, 10%);
-  }
-
-  .composerOptions-container.show {
-    background: darken($base, 2%);
-
-    .shadow-container {
-      background: $base;
-      color: $text_color;
-    }
-  }
-
-  .pm-button.pm-button--primary {
-    background: darken($highlight, 10%);
-    color: $text_color;
-    border-color: darken($highlight, 10%);
-  }
-
-  .pm-button.pm-button--primary:hover {
-    background: $highlight;
-    color: $text_color;
-  }
-
-  .is-disabled.pm-button--error, .is-disabled.pm-button--error.pm-button--info, .is-disabled.pm-button--error.pm-button--redborder, .is-disabled.pm-button--primary, .is-disabled.pm-button--primary.pm-button--info, .is-disabled.pm-button--primary.pm-button--redborder, .is-disabled.pm-button--warning, .is-disabled.pm-button--warning.pm-button--info, .is-disabled.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info[disabled], .pm-button--error.pm-button--redborder[disabled], .pm-button--error[disabled], .pm-button--primary.pm-button--info[disabled], .pm-button--primary.pm-button--redborder[disabled], .pm-button--primary[disabled], .pm-button--warning.pm-button--info[disabled], .pm-button--warning.pm-button--redborder[disabled], .pm-button--warning[disabled], .pm-button-blue.is-disabled, .pm-button-blue.is-disabled.pm-button--info, .pm-button-blue.is-disabled.pm-button--redborder, .pm-button-blue.pm-button--info[disabled], .pm-button-blue.pm-button--redborder[disabled], .pm-button-blue[disabled], .pm-button.is-disabled.pm-button--error, .pm-button.is-disabled.pm-button--primary, .pm-button.is-disabled.pm-button--warning, .pm-button.pm-button--error[disabled], .pm-button.pm-button--primary[disabled], .pm-button.pm-button--warning[disabled], .pm-button.pm-button-blue.is-disabled, .pm-button.pm-button-blue[disabled] {
-    background-color: darken($base, 2%);
-    border-color: lighten($base, 10%);
-    color: darken($text_color, 10%);
-  }
-
-  .pm-button:not(.pm-button-blue):not(.pv-button-green):not(.pm-button--primary):not(.pm-button--primaryborderEvenInDarkMode):not(.pm-button--link):not(.pm-button--error):not(.pm-button--warning):not(.pm-button--redborder):not(.pm-button--primaryborder), .pm-button--info {
-    color: $text_color;
-    background-color: $base;
-    border-color: lighten($base, 10%);
-  }
-
-  .pm-group-buttons > .pm-group-button.pm-button--primary {
-    border-color: lighten($base, 10%);
-  }
-
-  .pm-button-blueborder {
-    border-color: $highlight;
-    color: $highlight;
-  }
-
-  .pm-button-blueborder:hover {
-    border-color: lighten($highlight, 5%);
-    color: lighten($highlight, 5%);
-  }
-
-  [class*="squireToolbar-row"] .squireToolbar-action-mode:active, [class*="squireToolbar-row"] .squireToolbar-action-mode:hover, [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:active, [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:hover {
-    background: lighten($base, 2%) !important;
-  }
-
-  .squireToolbar-separator {
-    background: lighten($base, 5%);
-  }
-
-  .composerTime-container,
-  [class*="composer-field"] {
-    color: $text_color;
-  }
-
-  .composerInputMeta-overlay-fakefield {
-    border-color: $text_color;
-  }
-
-  // Encryption icon
-  .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg {
-    color: white;
-  }
-
-  // Message items
-  .conversation {
-    border-color: lighten($base, 10%);
-  }
-
-  .main-area,
-  .main-area--noHeader, 
-  .main-area--withToolbar,
-  .main-area--withToolbar--noHeader,
-  [class*="block-info-"] {
-    color: $text_color;
-  }
-
-  [class*="block-info"] {
-    background-color: lighten($base, 10%);
-    color: $text_color;
-  }
-
-  .fill-global-grey {
-    fill: $highlight;
-  }
-
-  .starbutton {
-    fill: $extra_color;
-  }
-
-  // Read message
-  .bg-global-light, kbd {
-    background: $base;
-  }
-
-  // Contacts items and header
-  .item-container, .item-container-row, .contactsummary-container {
-    background: $base;
-  }
-
-  .items-column-list-inner, .ReactVirtualized__Grid__innerScrollContainer {
-    border-color: lighten($base, 10%);
-
-    .item-container, .item-container-row {
-      border-color: lighten($base, 10%);
-    }
-  }
-
-  // Unread, not active
-  .item-container:not(.item-is-selected):not(.read):not(.active),
-  .item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active),
-  .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .squireToolbar-container {
-    background: lighten($base, 5%);
-  }
-
-  // Active
-  .item-container.active, .item-is-selected {
-    background: darken($base, 2%);
-    .flex-item-fluid {
-      color: $highlight;
-    }
-  }
-
-  // Selected message checkbox
-  .item-icon {
-    background-color: $base;
-    border: 1px solid darken($text_color, 5%);
-  }
-
-  .selectBoxElement-container:hover .item-icon {
-    background-color: $base;
-    border: 1px solid darken($highlight, 5%);
-
-    .item-icon-fakecheck-icon {
-      fill: darken($highlight, 5%);
-    }
-  }
-
-  .selectBoxElement-container {
-    color: $text_color;
-  }
-
-  .selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-    background-color: darken($highlight, 5%);
-    border-color: darken($highlight, 5%);
-  }
-
-  .item-checkbox + .item-icon:hover,
-  .item-checkbox:hover + .item-icon {
-    background-color: darken($base, 5%);
-  }
-
-  // Message list background area
-  .items-column-list,
-  .elementList-container-row {
-    background-color: $base;
-  }
-
-  // Current message panel
-  .composer-container {
-    background: lighten($base, 5%);
-  }
-
-  .message-header {
-    background-color: lighten($base, 5%);
-  }
-
-  .view-column-detail {
-    background-color: $base;
-  }
-
-  details:first-child {
-    border-color: lighten($base, 10%);
-  }
-
-  .items-column-list,
-  .message-container, 
-  .message-attachments {
-    border-color: lighten($base, 10%);
-  }
-
-  .message-container:not(.sent):not(.draft) .message-header.message-summary::before, 
-  .message-header.is-inbound::before {
-    border-top: 1px solid lighten($base, 10%);
-    border-left: 1px solid lighten($base, 10%);
-    background-color: lighten($base, 5%);
-  }
-
-  // Mailing list block
-  .message-infobox {
-    background-color: $base;
-  }
-
-  // Email body background, text and links
-  .message-content.frame.message-frame {
-    background: white;
-    color: black;
-  }
-
-  .block-info-standard, .bodyDecrypted blockquote {
-    border-color: $highlight;
-  }
-
-  .squireDropdown-item-label {
-    color: $text_color;
-  }
-
-  .squireToolbar-action-color {
-    background: transparent;
-  }
-
-  // This forces the background of a new message to used the base color.
-  .angular-squire-iframe body {
-    color: $text_color;
-    background: lighten($base, 5%);
-
-    a {
-      color: $highlight;
-    }
-  }
-
-  .plaintext-editor {
-    color: $text_color;
-  }
-
-  // Attachment button
-  .pm-button, .pm-button--info, .pm-button--redborder {
-    background: $base;
-    border-color: lighten($base, 10%);
-    color: $text_color;
-  }
-
-  .message-attachmentInfo {
-    border-color: lighten($base, 10%);
-  }
-
-  .is-hover.pm-button--info, .is-hover.pm-button--redborder,
-  .pm-button--info:focus, .pm-button--info:focus-within,
-  .pm-button--info:hover, .pm-button--redborder:focus,
-  .pm-button--redborder:focus-within, .pm-button--redborder:hover,
-  .pm-button.is-hover, .pm-button:focus-within, 
-  .pm-button:hover:not(.pm-button--primary) {
-    color: $highlight;
-  }
-
-  .pm-button:focus {
-    color: $text_color;
-  }
-
-  .is-disabled.pm-button--info,
-  .is-disabled.pm-button--redborder,
-  .pm-button--info[disabled],
-  .pm-button--redborder[disabled],
-  .pm-button.is-disabled,
-  .pm-button[disabled] {
-    background: lighten($base, 10%);
-  }
-
-  .is-active.pm-button--info,
-  .is-active.pm-button--redborder,
-  .pm-button--info:not(div):active,
-  .pm-button--redborder:not(div):active,
-  .pm-button.is-active, .pm-button:not(div):active {
-    background: lighten($base, 10%);
-    color: $highlight;
-  }
-
-  // Dropdowns
-  .dropDown-content {
-    background: $base;
-    color: $text_color;
-
-    button {
-      color: $text_color;
-    }
-
-    .elementsSelector-btn-action,
-    .dropDown-item:hover {
-      color: $text_color;
-    }
-
-    .dropDown-item:hover {
-      background: lighten($base, 5%) !important;
-    }
-
-    .dropDown-item + .dropDown-item {
-      border-top: 1px solid lighten($base, 10%);
-    }
-
-    .dropDown-item {
-      .color-global-grey {
-        color: $text_color;
-      }
-    }
-  }
-
-  .dropDown {
-    .dropDown-content {
-      &::before, &::after {
-        border-bottom-color: $base;
-      }
-    }
-  }
-
-  .dropDown--right-bottom {
-    &::before {
-      border-right-color: $base;
-    }
-
-    .dropDown-content {
-      &::before, &::after {
-        background: $base;
-      }
-    }
-  }
-
-  .dropDown--bottom-right {
-    .dropDown-content {
-      &::before, &::after {
-        background: $base;
-      }
-    }
-  }
-
-  .dropDown--bottom-left::before, 
-  .dropDown--bottom-right::before, 
-  .dropDown--bottom::before {
-    border-bottom-color: lighten($base, 10%);
-  }
-
-  .dropDown--bottom-right {
-    border: 1px solid lighten($base, 10%);
-  }
-
-  .pm-field-icon-container[type="search"], .pm-field[type="search"] {
-    background-color: lighten($base, 5%);
-  }
-
-  .dropDown-contentInner {
-    background-color: $base;
-
-    &::before, &::after {
-      background-color: $base;
-    }
-
-    .dropDown-item span {
-      color: $text_color !important;
-    }
-  }
-
-  .searchbox-field[type="search"]:not(#global_search) {
-    background: $text_color;
-    color: $base;
-  }
-
-  // Links
-
-  .link:active, .link:focus, .link:hover, 
-  a:active, a:focus, a:hover,
-  .pm-button--link:hover,
-  .composerInputMeta-label:hover {
-    color: lighten($highlight, 5%);
-  }
-
-  // Modal
-  .pm-modal, .pm-modalContentInner {
-    background-color: $base;
-    color: $text_color;
-
-    &::before, &::after {
-      background-color: $base;
-    }
-    
-    .labelColorSelector-item-mask {
-      border: 2px solid lighten($base, 15%);
-    }
-  }
-
-  .pm-button--primaryborder, .pm-button-blueborder {
-    border-color: $highlight;
-    color: $highlight;
-    background-color: lighten($base, 5%);
-    transition: background-color .2s ease-in-out;
-  }
-
-  .is-hover.pm-button--primaryborder, .pm-button--primaryborder:focus,
-  .pm-button--primaryborder:focus-within, .pm-button--primaryborder:hover,
-  .pm-button-blueborder.is-hover, .pm-button-blueborder:focus,
-  .pm-button-blueborder:focus-within, .pm-button-blueborder:hover {
-    border-color: $highlight;
-    color: $highlight;
-    background-color: darken($base, 1%);
-  }
-
-  .scrollshadow-static {
-    background: $base;
-  }
-
-  // Input fields
-  .pm-field, .pm-field-icon-container,
-  .focus.pm-field-icon-container, .pm-field-icon-container:focus,
-  .pm-field-icon-container:focus-within, .pm-field.focus,
-  .pm-field:focus, .pm-field:focus-within,
-  .composerInputMeta-overlay-fakefield,
-  .composerInputMeta-autocomplete {
-    color: $text_color;
-    background-color: lighten($base, 5%);
-
-    &::placeholder {
-      color: darken($text_color, 5%);
-    }
-  }
-
-  .composerInputMeta-autocomplete input {
-    color: $text_color;
-    background-color: lighten($base, 5%);
-
-    &::placeholder {
-      color: darken($text_color, 5%);
-    }
-  }
-
-  select.pm-field, select.pm-field-icon-container {
-    background-color: lighten($base, 5%);
-    color: $text_color;
-  }
-
-  // Storage progress modal
-  .storageProgress-content.dropDown-content--rightbottom {
-    &::before {
-      border-right-color: $base;
-    }
-  }
-
-  // Settings panel
-  .sticky-title {
-    background: lighten($base, 2%);
-  }
-
-  .bg-global-highlight {
-    background-color: $base;
-  }
-
-  .bg-white-dm {
-    background-color: lighten($base, 5%);
-  }
-
-  .main-area, .main-area--noHeader, 
-  .main-area--withToolbar,
-  .main-area--withToolbar--noHeader, 
-  [class*="block-info-"] {
-    color: $text_color;
-  }
-
-  .main-area, .main-area--noHeader, 
-  .main-area--withToolbar, .main-area--withToolbar--noHeader {
-    background: $base;
-  }
-
-  .context-bar {
-    background: $base;
-  }
-
-  .subnav {
-    background: lighten($base, 5%);
-    
-    .link, a {
-      color: $highlight;
-    }
-    
-    .link:active, .link:focus, .link:hover, a:active, a:focus, a:hover {
-      color: lighten($highlight, 5%);
-    }
-  }
-
-  // Toggle button
-  .pm-toggle-label {
-    border-color: lighten($base, 10%);
-    background: lighten($base, 5%);
-
-    &::before {
-      background: $base;
-    }
-
-    .pm-toggle-label-img {
-      fill: $text_color;
-    }
-  }
-
-  // Plans table
-  .pm-plans-table-row--highlighted {
-    background-color: $base;
-  }
-
-  // Forms
-  .pm-checkbox-fakecheck,
-  .pm-radio-fakeradio {
-    background: transparent;
-  }
-
-  [class*="icon-"].color-primary {
-    color: $highlight;
-  }
-
-  .color-global-grey-dm {
-    color: $highlight;
-  }
-}
diff --git a/templates/@theme-base/_styles.scss b/templates/@theme-base/_styles.scss
index 0f6dee1..a0d8122 100644
--- a/templates/@theme-base/_styles.scss
+++ b/templates/@theme-base/_styles.scss
@@ -1,428 +1,259 @@
-// Styles defined by Protonmail see https://design-system-beta.netlify.com/sass-variables/ ->
-
-@import "../@theme-base/reusable-components/design-system-config";
-
-$main-bg-color: $base;
-$secondary-bg-color: darken($base, 5%);
-$bgcolor-searchbox-field: $search;
-$bgcolor-spacebar: rgba(255, 255, 255, 0.1);
-$bgcolor-aside-link: rgba(0, 0, 0, 0.3);
-$bgcolor-toolbar: lighten($base, 5%);
-$fillcolor-logo: $pm-global-light;
-$fillcolor-icons: $white;
-$color-nav-link: $navigation;
-$color-nav-active: $highlight;
-$color-standard-text: $white;
-$boxshadow-main: none; 
-
-@import "../@theme-base/pm-styles/pm-theme-config";
-
-// Theme template styles ->
-
-// Loading state
-html:not(.editor-squire-iframe) body {
-  background: $base;
-  color: $text_color;
-}
-
-// Compose button
-.pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue {
-  color: $text_color;
-  background-color: $highlight;
-  border: 1px solid $highlight;
-  transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
-}
-
-.is-hover.pm-button--error, .is-hover.pm-button--primary, .is-hover.pm-button--warning, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover {
-  color: $navigation;
-  box-shadow: 0 0 .35714em 0 rgba(0,0,0,.2);
-  background: darken($highlight, 5%);
-  border: 1px solid darken($highlight, 5%);
-}
-
-// Button classes
-.pm-button--primaryborder-dark, .pm-button-blueborder-dark {
-  background: $main-bg-color;
-  border-color: $highlight;
-  color: $highlight;
-}
-
-.is-active.pm-button--primaryborder-dark, .is-hover.pm-button--primaryborder-dark, .pm-button--primaryborder-dark:focus, .pm-button--primaryborder-dark:focus-within, .pm-button--primaryborder-dark:hover, .pm-button--primaryborder-dark:not(div):active, .pm-button-blueborder-dark.is-active, .pm-button-blueborder-dark.is-hover, .pm-button-blueborder-dark:focus, .pm-button-blueborder-dark:focus-within, .pm-button-blueborder-dark:hover, .pm-button-blueborder-dark:not(div):active {
-  background: $main-bg-color;
-  border-color: lighten($highlight, 5%);
-  color: lighten($highlight, 5%);
-}
-
-.pm-button--primaryborder, .pm-button-blueborder {
-  border-color: darken($highlight, 5%);
-  color: darken($highlight, 5%);
-}
-
-.is-hover.pm-button--primaryborder, .pm-button--primaryborder:focus, .pm-button--primaryborder:focus-within, .pm-button--primaryborder:hover, .pm-button-blueborder.is-hover, .pm-button-blueborder:focus, .pm-button-blueborder:focus-within, .pm-button-blueborder:hover {
-  border-color: darken($highlight, 5%);
-  color: darken($highlight, 5%);
-}
-
-// Disabled button
-.is-disabled.pm-button--error, .is-disabled.pm-button--error.pm-button--info, .is-disabled.pm-button--error.pm-button--redborder, .is-disabled.pm-button--primary, .is-disabled.pm-button--primary.pm-button--info, .is-disabled.pm-button--primary.pm-button--redborder, .is-disabled.pm-button--warning, .is-disabled.pm-button--warning.pm-button--info, .is-disabled.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info[disabled], .pm-button--error.pm-button--redborder[disabled], .pm-button--error[disabled], .pm-button--primary.pm-button--info[disabled], .pm-button--primary.pm-button--redborder[disabled], .pm-button--primary[disabled], .pm-button--warning.pm-button--info[disabled], .pm-button--warning.pm-button--redborder[disabled], .pm-button--warning[disabled], .pm-button-blue.is-disabled, .pm-button-blue.is-disabled.pm-button--info, .pm-button-blue.is-disabled.pm-button--redborder, .pm-button-blue.pm-button--info[disabled], .pm-button-blue.pm-button--redborder[disabled], .pm-button-blue[disabled], .pm-button.is-disabled.pm-button--error, .pm-button.is-disabled.pm-button--primary, .pm-button.is-disabled.pm-button--warning, .pm-button.pm-button--error[disabled], .pm-button.pm-button--primary[disabled], .pm-button.pm-button--warning[disabled], .pm-button.pm-button-blue.is-disabled, .pm-button.pm-button-blue[disabled] {
-  background-color: lighten($highlight, 40%);
-  border-color: lighten($highlight, 5%);
-  color: darken($highlight, 10%);
-}
-
-.bg-primary {
-  background-color: lighten($main-bg-color, 5%);
-}
-
-.color-primary {
-  color: $highlight;
-}
-
-// Message numbers
-.navigation__counterItem {
-  background: darken($highlight, 10%);
-  color: lighten($text_color, 35%);
-}
-
-// Message items
-.item-container-row:hover::before, .item-container:hover::before {
-  border-color: lighten($highlight, 10%);
-}
-
-.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon {
-  border-color: lighten($highlight, 25%);
-}
-
-.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon {
-  fill: darken($highlight, 10%);
-}
-
-// Storage indicator
-.circle-chart__circle {
-  stroke: $highlight;
-}
-
-// Top navigation
-#dropdown-0 {
-  .dropDown-content::after, .dropDown-content::before,
-  &.dropDown:not(.dropDown--noCaret)::before,
-  .dropDown-content {
-    background: $base;
-  }
-}
-
-.dropDown:not(.dropDown--noCaret)::before,
-.dropDown::after,
-.dropDown-logout-initials,
-.dropDown-item-hr {
-  border-color: lighten($base, 5%) !important; 
-}
-
-#global_search.searchbox-field[type="search"] {
-  background-color: $search;
-  color: $text_color;
-}
-
-.searchbox-advanced-search-button:active,
-.searchbox-advanced-search-button:focus,
-.searchbox-advanced-search-button:hover {
-  background-color: $base;
-}
-
-.topnav-link, .topnav-link > .topnav-icon {
-  color: $navigation;
-  transition: color .2s ease-in-out;
-}
-
-.topnav-link:active, .topnav-link:focus, 
-.topnav-link:hover, .topnav-link[aria-current="true"] {
-  color: $highlight;
-}
-
-.topnav-link:active > .topnav-icon, .topnav-link:focus > .topnav-icon, 
-.topnav-link:hover > .topnav-icon, .topnav-link[aria-current=true] > .topnav-icon {
-  color: $highlight;
-}
-
-.protonmail .text-purple {
-  color: $base !important;
-}
-
-.protonmail .text-purple:hover {
-  color: darken($highlight, 10%) !important;
-}
-
-// Dropdown
-.dropDown-item-button:focus, .dropDown-item-button:hover, .dropDown-item-link:focus, .dropDown-item-link:hover {
-  color: $highlight;
-}
-
-// Compose window
-#pm_composer .composer,
-.composerInputMeta-overlay {
-  .composerHeader-container {
-    background: lighten($base, 5%);
-  }
-}
-
-#pm_composer .composer .fill {
-  background: $color-standard-text;
-}
-
-// Conversation items
-.conversation {
-  &.marked::before {
-    background: $highlight;
-  }
-}
-
-.item-container, .item-container-row  {
-  &:not(.item-is-selected):not(.item-contact):not(.read):not(.active) {
-    background: $color-standard-text;
-  }
-}
-
-.item-container.selected, .item-container-row.selected,
-.item-container.active, .item-is-selected {
-  background: rgba($highlight, 0.1);
-}
-
-.selectBoxElement-container:hover {
-  .item-icon {
-    background-color: transparent;
-    border: 1px solid darken($highlight, 5%);
-
-    .item-icon-fakecheck-icon {
-      fill: darken($highlight, 5%);
-    }
-  }
-
- .item-checkbox:checked + .item-icon {
-    background-color: darken($highlight, 5%);
-    border-color: darken($highlight, 5%);
-  }
-}
-
-.item-checkbox:checked + .item-icon {
-  background-color: $highlight;
-  border-color: $highlight;
-}
-
-.item-checkbox + .item-icon:hover {
-  background-color: darken($highlight, 5%);
-  border-color: darken($highlight, 5%);
-}
-
-.item-checkbox + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: $navigation;
-}
-
-.item-checkbox:checked + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: $navigation;
-}
-
-// Star icon
-.starbutton {
-  fill: $highlight !important;
-  opacity: 0.7;
-}
-
-.starbutton:focus, .starbutton:hover {
-  fill: $highlight;
-}
-
-// Encryption icon
-.autocompleteEmailsItem-icon svg.encryptionIcon {
-  fill: darken($highlight, 5%);
-}
-
-.encryptionStatus .color-pm-blue svg {
-  color: darken($highlight, 5%);
-  fill: darken($highlight, 5%);
-}
-
-.encryptionStatus .color-global-grey-dm svg {
-  color: black;
-}
-
-// Highlighted text (seen when multiple messages are selected)
-.color-pm-blue {
-  color: $highlight;
-}
-
-// Radio buttons
-.pm-radio:checked + .pm-radio-fakeradio::before {
-  background: $highlight;
-}
-
-// Information blocks
-.block-info-standard {
-  border-color: $info_color;
-}
-
-.block-info-standard-warning {
-  border-color: $warning_color;
-}
-
-.block-info-standard-error {
-  border-color: $danger_color;
-}
-
-// Links across the site:
-.link, a, .pm-button--link {
-  color: darken($highlight, 10%);
-  transition: color .2s ease-in-out;
-}
-
-.link:active, .link:focus, .link:hover, 
-a:active, a:focus, a:hover,
-.pm-button--link:hover {
-  color: darken($highlight, 10%);
-}
-
-// Buttons
-.pm-button {
-  &--primary {
-    background-color: $highlight;
-    border-color: $highlight;
-  }
-
-  &--link, &.pm-button--link {
-    color: $highlight;
-  }
-}
-
-.pm-button--error, .pm-button--error.pm-button--info, .pm-button--error.pm-button--redborder, .pm-button--primary, .pm-button--primary.pm-button--info, .pm-button--primary.pm-button--redborder, .pm-button--warning, .pm-button--warning.pm-button--info, .pm-button--warning.pm-button--redborder, .pm-button-blue, .pm-button-blue.pm-button--info, .pm-button-blue.pm-button--redborder, .pm-button.pm-button--error, .pm-button.pm-button--primary, .pm-button.pm-button--warning, .pm-button.pm-button-blue {
-  background-color: $highlight;
-  border-color: $highlight;
-}
-
-.is-hover.pm-button--error, .is-hover.pm-button--error.pm-button--info, .is-hover.pm-button--error.pm-button--redborder, .is-hover.pm-button--primary, .is-hover.pm-button--primary.pm-button--info, .is-hover.pm-button--primary.pm-button--redborder, .is-hover.pm-button--warning, .is-hover.pm-button--warning.pm-button--info, .is-hover.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:focus, .pm-button--error.pm-button--info:focus-within, .pm-button--error.pm-button--info:hover, .pm-button--error.pm-button--redborder:focus, .pm-button--error.pm-button--redborder:focus-within, .pm-button--error.pm-button--redborder:hover, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary.pm-button--info:focus, .pm-button--primary.pm-button--info:focus-within, .pm-button--primary.pm-button--info:hover, .pm-button--primary.pm-button--redborder:focus, .pm-button--primary.pm-button--redborder:focus-within, .pm-button--primary.pm-button--redborder:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning.pm-button--info:focus, .pm-button--warning.pm-button--info:focus-within, .pm-button--warning.pm-button--info:hover, .pm-button--warning.pm-button--redborder:focus, .pm-button--warning.pm-button--redborder:focus-within, .pm-button--warning.pm-button--redborder:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue.is-hover.pm-button--info, .pm-button-blue.is-hover.pm-button--redborder, .pm-button-blue.pm-button--info:focus, .pm-button-blue.pm-button--info:focus-within, .pm-button-blue.pm-button--info:hover, .pm-button-blue.pm-button--redborder:focus, .pm-button-blue.pm-button--redborder:focus-within, .pm-button-blue.pm-button--redborder:hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover, .pm-button.is-hover.pm-button--error, .pm-button.is-hover.pm-button--primary, .pm-button.is-hover.pm-button--warning, .pm-button.pm-button--error:focus, .pm-button.pm-button--error:focus-within, .pm-button.pm-button--error:hover, .pm-button.pm-button--primary:focus, .pm-button.pm-button--primary:focus-within, .pm-button.pm-button--primary:hover, .pm-button.pm-button--warning:focus, .pm-button.pm-button--warning:focus-within, .pm-button.pm-button--warning:hover, .pm-button.pm-button-blue.is-hover, .pm-button.pm-button-blue:focus, .pm-button.pm-button-blue:focus-within, .pm-button.pm-button-blue:hover {
-  background: darken($highlight, 5%);
-  border: 1px solid darken($highlight, 5%);
-}
-
-.is-active.pm-button--error, .is-active.pm-button--error.pm-button--info, .is-active.pm-button--error.pm-button--redborder, .is-active.pm-button--primary, .is-active.pm-button--primary.pm-button--info, .is-active.pm-button--primary.pm-button--redborder, .is-active.pm-button--warning, .is-active.pm-button--warning.pm-button--info, .is-active.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:not(div):active, .pm-button--error.pm-button--redborder:not(div):active, .pm-button--error:not(div):active, .pm-button--primary.pm-button--info:not(div):active, .pm-button--primary.pm-button--redborder:not(div):active, .pm-button--primary:not(div):active, .pm-button--warning.pm-button--info:not(div):active, .pm-button--warning.pm-button--redborder:not(div):active, .pm-button--warning:not(div):active, .pm-button-blue.is-active, .pm-button-blue.is-active.pm-button--info, .pm-button-blue.is-active.pm-button--redborder, .pm-button-blue.pm-button--info:not(div):active, .pm-button-blue.pm-button--redborder:not(div):active, .pm-button-blue:not(div):active, .pm-button.is-active.pm-button--error, .pm-button.is-active.pm-button--primary, .pm-button.is-active.pm-button--warning, .pm-button.pm-button--error:not(div):active, .pm-button.pm-button--primary:not(div):active, .pm-button.pm-button--warning:not(div):active, .pm-button.pm-button-blue.is-active, .pm-button.pm-button-blue:not(div):active {
-  background: darken($highlight, 10%);
-  border-color: darken($highlight, 10%);
-}
-
-.pm-button-blueborder {
-  box-shadow: none;
-  border-color: $base;
-  color: $base;
-  transition: color .2s ease-in-out, border-color .2s ease-in-out;
-}
-
-.pm-button-blueborder:hover {
-  box-shadow: none;
-  border-color: darken($highlight, 10%);
-  color: darken($highlight, 10%);
-}
-
-.is-active.pm-button--primaryborder,
-.pm-button--primaryborder:not(div):active,
-.pm-button-blueborder.is-active,
-.pm-button-blueborder:not(div):active {
-  border-color: darken($highlight, 10%);
-  color: darken($highlight, 10%);
-  background: transparent;
-}
-
-.pm-group-buttons > .pm-group-button.pm-button--primary {
-  border-color: darken($highlight, 10%);
-}
-
-.bg-pm-blue-gradient {
-  .pm-button--transparent:hover {
-    color: $text_color;
-    border-color: $text_color;
-  }
-}
-
-// Settings toggle button
-.pm-toggle-checkbox:checked+.pm-toggle-label:before {
-  background: $highlight;
-  border-color: $highlight;
-}
-
-// Message panel
-
-.composer-title-bar {
-  background: $base;
-}
-
-.color-global-light {
-  color: $text_color;
-}
-
-.angular-squire-iframe body {
-  a {
-    color: $highlight;
-  }
-} 
-
-// Attachment icon
-.fill-pm-blue,
-.message-attachmentIcon .file-outer-icon.is-embedded {
-  fill: $highlight;
-}
-
-// Subscription plans
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2) {
-  border-color: $highlight;
-  color: $highlight;
-
-  &::before {
-    background-color: $highlight;
-  }
-}
-
-.pm-table--highlight[data-plan-number="1"] tr td:nth-child(2), 
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2),
-.pm-table--highlight[data-plan-number="1"] tr:last-child td:nth-child(2) {
-  border-color: $highlight;
-}
-
-.pm-simple-table-row-th {
-  .fill-primary {
-    fill: $highlight;
-  }
-}
-
-// Forms
-.pm-checkbox-fakecheck, .pm-radio-fakeradio {
-  border-color: $base;
-
-  [class*="icon-"] {
-    fill: $highlight;
-  }
-}
-
-[class*="icon-"].color-primary {
-  color: $base;
-
-  &:hover {
-    color: darken($highlight, 10%);
-  }
-}
-
-.pm-field, .editor,
-.editor-toolbar,
-.border-bottom,
-.border-top,
-.message-container.is-opened > .message-header {
-  border-color: darken($base, 10%);
-}
-
-// Badges
-.badgeLabel, .badgeLabel-primary {
-  border-color: darken($highlight, 10%);
-}
-
-.badgeLabel,
-.badgeLabel-blue,
-.badgeLabel-primary,
-.bg-pm-blue {
-  background-color: darken($highlight, 10%);
+@use "sass:meta";
+@use "sass:color";
+
+:root,
+.ui-standard {
+  --primary: #{$highlight};
+  --primary-contrast: white;
+  --signal-danger: #ed4c51;
+  --signal-danger-hover: #f7595e;
+  --signal-danger-active: #ff666b;
+  --signal-danger-contrast: white;
+  --signal-warning: #f5930a;
+  --signal-warning-hover: #f5a716;
+  --signal-warning-active: #f5b922;
+  --signal-warning-contrast: black;
+  --signal-success: #349172;
+  --signal-success-hover: #339c79;
+  --signal-success-active: #31a67f;
+  --signal-success-contrast: white;
+  --signal-info: #2c89db;
+  --signal-info-hover: #3491e3;
+  --signal-info-active: #3d99eb;
+  --signal-info-contrast: white;
+  --text-norm: white;
+  --text-weak: #a4a9b5;
+  --text-hint: #696f7d;
+  --text-disabled: #575d6b;
+  --text-invert: #262a33;
+  --field-norm: #{$text_color};
+  --field-hover: #{darken($highlight, 5%)};
+  --field-disabled: #464b58;
+  --border-norm: #{darken($base, 8%)};
+  --border-weak: #{darken($base, 5%)};
+  --background-norm: #{$base} !important;
+  --background-weak: #{lighten($base, 5%)};
+  --background-strong: #{darken($base, 10%)};
+  --interaction-norm: #{$highlight};
+  --interaction-norm-hover: #{color.scale($highlight, $lightness: 5%)};
+  --interaction-norm-active: #{color.scale($highlight, $lightness: 10%)};
+  --interaction-norm-contrast: white;
+  --interaction-weak: #{darken($base, 3%)} !important;
+  --interaction-weak-hover: #{darken($base, 5%)};
+  --interaction-weak-active: #696f7d;
+  --interaction-default: transparent;
+  --interaction-default-hover: rgba(87, 93, 107, 0.2);
+  --interaction-default-active: rgba(87, 93, 107, 0.3);
+  --shadow-norm-opacity: 0.32;
+  --shadow-lifted-opacity: 0.4;
+  --backdrop-norm: rgba(0, 0, 0, 0.32);
+  --optional-scrollbar-thumb-color: #464b58;
+  --optional-scrollbar-thumb-hover-color: #575d6b;
+  --optional-email-item-read-background-color: #1a1d24;
+  --optional-email-item-read-text-color: var(--text-weak);
+  --optional-email-item-selected-background-color: #{color.scale($highlight, $blackness: 20%)};
+}
+
+.ui-prominent,
+.ui-standard,
+:root {
+  --selection-background-color: var(
+    --optional-selection-background-color,
+    var(--primary)
+  );
+  --selection-text-color: var(
+    --optional-selection-text-color,
+    var(--primary-contrast)
+  );
+  --header-background-color: #{$base} !important;
+  --sidebar-background-color: var(
+    --optional-sidebar-background-color,
+    var(--background-norm)
+  );
+  --navigation-current-item-marker-color: var(
+    --optional-navigation-current-item-marker-color,
+    var(--interaction-norm)
+  );
+  --navigation-current-item-background-color: var(
+    --optional-navigation-current-item-background-color,
+    var(--interaction-default-hover)
+  );
+  --navigation-current-item-text-color: var(
+    --optional-navigation-current-item-text-color,
+    var(--text-norm)
+  );
+  --main-box-shadow: var(--optional-main-box-shadow, none);
+  --main-border-color: var(--optional-main-border-color, var(--border-norm));
+  --navigation-item-count-background-color: var(
+    --optional-navigation-item-count-background-color,
+    var(--primary)
+  );
+  --navigation-item-count-text-color: var(
+    --optional-navigation-item-count-text-color,
+    var(--primary-contrast)
+  );
+  --toolbar-background-color: var(
+    --optional-toolbar-background-color,
+    var(--background-weak)
+  );
+  --toolbar-border-bottom-color: var(
+    --optional-toolbar-border-bottom-color,
+    var(--border-norm)
+  );
+  --toolbar-text-color: var(--optional-toolbar-text-color, var(--text-norm));
+  --toolbar-separator-color: var(
+    --optional-toolbar-separator-color,
+    var(--border-norm)
+  );
+  --scrollbar-thumb-color: var(
+    --optional-scrollbar-thumb-color,
+    hsla(0, 0%, 50%, 0.25)
+  );
+  --scrollbar-thumb-hover-color: var(
+    --optional-scrollbar-thumb-hover-color,
+    hsla(0, 0%, 50%, 0.5)
+  );
+  --tooltip-background-color: var(--optional-tooltip-background-color, #000);
+  --tooltip-text-color: var(--optional-tooltip-text-color, #fff);
+  --email-item-unread-background-color: var(
+    --optional-email-item-unread-background-color,
+    var(--background-norm)
+  );
+  --email-item-unread-text-color: var(
+    --optional-email-item-unread-text-color,
+    var(--text-norm)
+  );
+  --email-item-unread-icon-background-color: var(
+    --optional-email-item-unread-icon-background-color,
+    var(--background-strong)
+  );
+  --email-item-unread-icon-text-color: var(
+    --optional-email-item-unread-icon-text-color,
+    inherit
+  );
+  --email-item-read-background-color: #{lighten($base, 5%)};
+  --email-item-read-text-color: #{$text_color};
+  --email-item-read-icon-background-color: var(
+    --optional-email-item-read-icon-background-color,
+    var(--background-strong)
+  );
+  --email-item-read-icon-text-color: var(
+    --optional-email-item-read-icon-text-color,
+    inherit
+  );
+  --email-item-selected-background-color: var(
+    --optional-email-item-selected-background-color,
+    var(--interaction-norm)
+  );
+  --email-item-selected-text-color: var(
+    --optional-email-item-selected-text-color,
+    var(--interaction-norm-contrast)
+  );
+  --email-item-selected-icon-background-color: var(
+    --optional-email-item-selected-icon-background-color,
+    var(--interaction-norm-hover)
+  );
+  --email-item-selected-icon-text-color: var(
+    --optional-email-item-selected-icon-text-color,
+    inherit
+  );
+  --email-item-focus-marker-color: var(
+    --optional-email-item-focus-marker-color,
+    var(--interaction-norm)
+  );
+  --email-item-selected-focus-marker-color: var(
+    --optional-email-item-selected-focus-marker-color,
+    var(--interaction-norm-hover)
+  );
+  --email-message-view-background-color: var(
+    --optional-email-message-view-background-color,
+    var(--background-norm)
+  );
+  --field-background-color: var(
+    --optional-field-background-color,
+    var(--background-norm)
+  );
+  --field-text-color: var(--optional-field-text-color, var(--text-norm));
+  --field-placeholder-color: var(
+    --optional-field-placeholder-color,
+    var(--text-hint)
+  );
+  --field-hover-background-color: var(
+    --optional-field-hover-background-color,
+    var(--background-norm)
+  );
+  --field-hover-text-color: var(
+    --optional-field-hover-text-color,
+    var(--text-norm)
+  );
+  --field-focus-background-color: var(
+    --optional-field-focus-background-color,
+    var(--background-norm)
+  );
+  --field-focus-text-color: var(
+    --optional-field-focus-text-color,
+    var(--text-norm)
+  );
+  --field-disabled-background-color: var(
+    --optional-field-disabled-background-color,
+    var(--background-norm)
+  );
+  --field-disabled-text-color: var(
+    --optional-field-disabled-text-color,
+    var(--text-disabled)
+  );
+  --select-background-color: var(
+    --optional-select-background-color,
+    var(--field-background-color)
+  );
+  --favorite-icon-color: var(--optional-favorite-icon-color, orange);
+  --mark-background-color: var(--optional-mark-background-color, #ff0);
+  --mark-text-color: var(--optional-mark-text-color, #000);
+  --mark-font-weight: var(--optional-mark-font-weight, normal);
+  --modal-background-color: var(--optional-modal-background-color);
+  --modal-text-color: var(--optional-modal-text-color);
+  --file-preview-text-color: var(
+    --optional-file-preview-text-color,
+    var(--text-norm)
+  );
+  --file-preview-background-color: var(
+    --optional-file-preview-background-color,
+    var(--background-norm)
+  );
+  --border-radius: var(--optional-border-radius, 3);
+  --font-family: var(
+    --optional-font-family,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen-Sans,
+    Ubuntu,
+    Cantarell,
+    Helvetica Neue,
+    sans-serif
+  );
+}
+
+.button-solid-norm {
+  --button-default-background-color: #{$highlight};
+  --button-hover-background-color: #{color.scale($highlight, $lightness: 10%)};
+  --button-active-background-color: #{color.scale($highlight, $lightness: 10%)};
+  --button-default-text-color: #{$text_color};
+  --button-hover-text-color: var(--interaction-norm-contrast);
+  --button-active-text-color: var(--interaction-norm-contrast);
+}
+
+// Search Element
+:root {
+  --searchbox-background-color: #{$search};
+  --searchbox-text-color: #{$text_color} !important;
+  --optional-sidebar-background-color: #{$base};
+  --optional-email-item-unread-icon-background-color: #{darken($base, 8%)};
+  --optional-email-item-unread-icon-text-color: #{$text_color};
+}
+
+// Storage Bar
+.meter-bar-thumb, .used-space{
+  --signal-success: #{$highlight};
 }
\ No newline at end of file
diff --git a/templates/@theme-base/_version.scss b/templates/@theme-base/_version.scss
index 7ca0a56..021d275 100644
--- a/templates/@theme-base/_version.scss
+++ b/templates/@theme-base/_version.scss
@@ -1,2 +1,2 @@
 // Used to update theme version across all themes.
-$version: 'v4.0.0-beta.33';
\ No newline at end of file
+$version: 'v4.0.8';
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-apps-dropdown.scss b/templates/@theme-base/pm-styles/_pm-apps-dropdown.scss
deleted file mode 100644
index 2df125e..0000000
--- a/templates/@theme-base/pm-styles/_pm-apps-dropdown.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-.appsDropdown {
-	&.dropDown {
-		--min-width: 13em;
-		--max-width: 15.5em; // Be carefull to not exceed the nav bar
-		--max-height: 25em;
-
-		--dropdown-border-color: #{$pm-tertiary-grey};
-		--dropdown-bg-color: #{$pm-secondary-grey};
-
-		color: $pm-global-light;
-
-		@include respond-to($breakpoint-small, 'min') {
-			box-shadow: 0 .5rem 1.5rem 0 rgba(black, .75);
-		}
-
-		a {
-			&,
-			&:hover,
-			&:focus {
-				color: $white;
-			}
-		}
-	}
-
-	&-button {
-		border-radius: $global-border-radius;
-		padding: .25em;
-
-		&:hover,
-		&:focus,
-		&[aria-expanded="true"] {
-			background-color: $navigation-hover-bg-color;
-		}
-		& &-icon { // override icon-16p
-			width: 1em;
-			height: 1em;
-			font-size: 2em;
-		}
-	}
-
-	/* No border for now
-	&-item.dropDown-item {
-		--bordercolor-input: #{$pm-tertiary-grey};
-	}
-	*/
-
-	&-link {
-		&,
-		&:hover,
-		&:focus {
-			text-decoration: none;
-		}
-
-		&:hover,
-		&:focus {
-			background-color: rgba(white, .05);
-		}
-	}
-}
diff --git a/templates/@theme-base/pm-styles/_pm-aside.scss b/templates/@theme-base/pm-styles/_pm-aside.scss
deleted file mode 100644
index b20a714..0000000
--- a/templates/@theme-base/pm-styles/_pm-aside.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * aside bar
- */
-
-  .aside-link {
-	border-radius: 50%;
-	width: 32px;
-	height: 32px;
-	padding: 7px;
-	background: var(--bgcolor-aside-link, $pm-global-altgrey);
-
-	&:focus,
-	&:hover,
-	&:active,
-	&[aria-current="true"] {
-	  background: $white;
-	  color: $pm-primary;
-
-	  .aside-linkIcon {
-		fill: $pm-primary;
-	  }
-
-	}
-  }
-  .aside-linkIcon {
-	width: 17px;
-	height: 17px;
-	fill: var(--fillcolor-icons, $pm-global-light);
-  }
diff --git a/templates/@theme-base/pm-styles/_pm-badges.scss b/templates/@theme-base/pm-styles/_pm-badges.scss
deleted file mode 100644
index 897fb50..0000000
--- a/templates/@theme-base/pm-styles/_pm-badges.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
- * badges/labels
- */
-$border-width: 2px !default;
-[class*="badgeLabel"] {
-  @extend .uppercase;
-  @extend .color-white;
-  @extend .inline-flex;
-  font-size: rem(11); // to be sure this is the same height everywhere
-  padding: 0 em(2) em(1);
-  line-height: 1;
-  border-radius: $global-border-radius;
-  border-width: $border-width;
-  border-style: solid;
-}
-
-.badgeLabel-success {
-  @extend .bg-global-success;
-  border-color: $pm-global-success;
-}
-
-.badgeLabel-blue {
-  @extend .bg-pm-blue;
-  border-color: $pm-blue;
-}
-
-.badgeLabel-green {
-  @extend .bg-pv-green;
-  border-color: $pv-green;
-}
-
-@if ($pm-primary == $pm-blue) {
-  .badgeLabel-primary,
-  .badgeLabel {
-    @extend .bg-pm-blue;
-    border-color: $pm-blue;
-  }
-}
-@else {
-  .badgeLabel-primary,
-  .badgeLabel {
-    @extend .bg-pv-green;
-    border-color: $pv-green;
-  }
-}
-
-.badgeLabel-grey {
-  @extend .bg-global-grey;
-  border-color: $pm-global-grey;
-}
-
-.badgeLabel-greylight {
-  background: var(--bordercolor-input, $pm-global-muted);
-  border-color: var(--bordercolor-input, $pm-global-muted);
-  color: var(--color-main-area, $black);
-}
-
-.badgeLabel-warning {
-  @extend .bg-global-attention;
-  border-color: $pm-global-attention;
-  color: $black;
-}
-
-.badgeLabel-error {
-  @extend .bg-global-warning;
-  border-color: $pm-global-warning;
-}
diff --git a/templates/@theme-base/pm-styles/_pm-blue-theme.scss b/templates/@theme-base/pm-styles/_pm-blue-theme.scss
deleted file mode 100644
index 227cb21..0000000
--- a/templates/@theme-base/pm-styles/_pm-blue-theme.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@import "../reusable-components/design-system-config";
-
-$main-bg-color: $pm-blue-dark;
-$secondary-bg-color: $pm-blue-light;
-$bgcolor-searchbox-field: rgba(0, 0, 0, 0.2);
-$bgcolor-spacebar: rgba(255, 255, 255, 0.1);
-$bgcolor-aside-link: rgba(0, 0, 0, 0.3);
-$bgcolor-toolbar: $pm-blue-light;
-$fillcolor-logo: $pm-global-light;
-$fillcolor-icons: $white;
-$color-nav-link: $white;
-$color-nav-active: $white;
-$color-standard-text: $white;
-$boxshadow-main: none;
-
-@import "./pm-theme-config";
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-breadcrumb-domain.scss b/templates/@theme-base/pm-styles/_pm-breadcrumb-domain.scss
deleted file mode 100644
index f1556e5..0000000
--- a/templates/@theme-base/pm-styles/_pm-breadcrumb-domain.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Breadcrumb domain
- */
-.breadcrumb-container {
-  @extend .bordered-container;
-}
-.breadcrumb-item:not(:last-of-type)::after {
-  content: '';
-  display: inline-block;
-  width: 1.6rem;
-  height: 1.6rem;
-  background: transparent url("#{$path-images}sprite-for-css-only.svg#css-greater") 0 0 no-repeat;
-  background-size: 1.4rem;
-  position: relative;
-  top: 6px;
-  opacity: .3;
-}
-@if $rtl-option == true {
-  [dir="rtl"] {
-    .breadcrumb-item:not(:last-of-type)::after {
-      background-image: url("#{$path-images}sprite-for-css-only.svg#css-lesser");
-    }
-  }
-}
-.breadcrumb-button {
-  padding: .4em;
-  opacity: .3;
-  color: inherit;
-}
-[disabled][aria-current="step"].breadcrumb-button {
-  font-weight: bold;
-  opacity: 1;
-  color: inherit;
-}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-buttons-mixins.scss b/templates/@theme-base/pm-styles/_pm-buttons-mixins.scss
deleted file mode 100644
index c418354..0000000
--- a/templates/@theme-base/pm-styles/_pm-buttons-mixins.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-// these mixins are present to be called from pm-buttons and pm-darkmode
-@import "../reusable-components/design-system-config";
-
-
-@mixin button-disabled-state ($color: null) {
-  pointer-events: none;
-
-  @if $color == null {
-    background-color: $pm-global-muted;
-    border-color: $pm-global-border;
-    color: rgba( $pm-global-grey, .3 );
-  }
-  @else {
-    background-color: rgba($color, .2);
-    border-color: rgba($color, .25);
-    color: rgba($color, .5);
-  }
-}
-
-@mixin button-disabled-state-dm() {
-  background-color: $pm-global-grey;
-  color: rgba( $pm-global-muted, .3 );
-  pointer-events: none;
-  border-color: rgba( $pm-global-muted, .3 );
-  & svg {
-    fill: rgba( $pm-global-muted, .3 );
-  }
-}
-
-@mixin pm-button-dark {
-  color: $white;
-  background-color: $pm-global-grey;
-  border-color: var(--bordercolor-input, $pm-global-border);
-
-  &:focus,
-  &:hover,
-  &.is-hover {
-    color: $white;
-    background-color: rgba(0, 0, 0, 0.2);
-  }
-  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
-  &.is-active {
-    background-color: rgba(0, 0, 0, 0.5);
-  }
-  &[disabled],
-  &.is-disabled {
-    @include button-disabled-state-dm;
-  }
-  /* just to cancel examples  */
-  &.is-hover:hover {
-    background-color: rgba(0, 0, 0, 0.2);
-  }
-}
-
-
-@mixin pm-button-blueborder-dark {
-  border-color: $pm-primary-light;
-  color: $pm-primary-light;
-  background-color: $pm-global-grey;
-
-  &:focus,
-  &:hover,
-  &:focus-within,
-  &.is-hover,
-  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
-  &.is-active {
-    background-color: rgba(0, 0, 0, 0.2);
-    border-color: $pm-primary-light;
-    color: $pm-primary-dark;
-  }
-  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
-  &.is-active {
-    background-color: rgba(0, 0, 0, 0.5);
-  }
-  &[disabled],
-  &.is-disabled {
-    @include button-disabled-state-dm;
-  }
-}
-
-@mixin pv-button-greenborder-dark {
-  border-color: $pv-green-light;
-  color: $pv-green-light;
-  background-color: $pm-global-grey;
-
-  &:focus,
-  &:hover,
-  &:focus-within,
-  &.is-hover,
-  &:active,
-  &.is-active {
-    background-color: rgba(0, 0, 0, 0.2);
-    border-color: $pv-green-dark;
-    color: $pv-green-dark;
-  }
-  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
-  &.is-active {
-    background-color: rgba(0, 0, 0, 0.5);
-  }
-  &[disabled],
-  &.is-disabled {
-    @include button-disabled-state-dm;
-  }
-}
diff --git a/templates/@theme-base/pm-styles/_pm-buttons.scss b/templates/@theme-base/pm-styles/_pm-buttons.scss
deleted file mode 100644
index 5b053a0..0000000
--- a/templates/@theme-base/pm-styles/_pm-buttons.scss
+++ /dev/null
@@ -1,428 +0,0 @@
-
-/*
- * Buttons
- */
-@import "pm-buttons-mixins";
-
-[class*="pm-button"],
-[class*="pv-button"] {
-  border-radius: $global-border-radius;
-  padding: em(5) em(16) em(6); // design want 34px height
-  border-style: solid;
-  border-width: 1px;
-  text-decoration: none;
-  transition: .15s easing(easeOutQuint), background-position 0s;
-  & > button { // this is for drop down buttons
-    color: inherit;
-  }
-  &:hover,
-  &:focus,
-  &:focus-within,
-  &:active {
-    text-decoration: none;
-  }
-}
-
-.pm-button {
-  border-color: $pm-global-border;
-  background-color: $white;
-  color: $pm-global-grey;
-
-
-  &:hover,
-  &:focus,
-  &:focus-within,
-  &.is-hover {
-    color: $pm-global-grey;
-    box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2);
-  }
-  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
-  &.is-active {
-    //background-color: $pm-global-border;
-    background-image: radial-gradient(closest-side, transparent, rgba(black, .1));
-    box-shadow: none;
-  }
-  &[disabled],
-  &.is-disabled {
-    @include button-disabled-state;
-  }
-  /* just to cancel examples  */
-  &.is-active:hover {
-    box-shadow: none;
-  }
-  &.is-hover:hover {
-    background-color: $white;
-  }
-
-  &.p0 {
-    padding: 0;
-  }
-
-  &[aria-expanded="true"] .caret-like {
-	@extend .rotateX-180;
-  }
-
-  &.pm-select {
-	  padding-right: .6rem;
-	  .mauto {
-		  display: flex;
-		  width: 100%;
-	  }
-	  .mr0-5 {
-		  flex: 1 1 0px;
-		  @extend .ellipsis;
-	  }
-  }
-}
-
-
-.pm-button-dark {
-  @include pm-button-dark;
-}
-
-
-.pm-button-blue,
-.pm-button.pm-button-blue {
-  color: $white;
-  background-color: $pm-primary;
-  border: 1px solid $pm-primary;
-
-  &:focus,
-  &:hover,
-  &:focus-within,
-  &.is-hover {
-    color: $white;
-    box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2);
-    background-color: $pm-primary-dark;
-  }
-  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
-  &.is-active {
-    background-color: $pm-primary-dark;
-    text-shadow: 1px 1px 10px rgba( $white, .3 ),-1px -1px 10px rgba( $white, .3 );
-    box-shadow: none;
-  }
-  &[disabled],
-  &.is-disabled {
-    @include button-disabled-state($pm-primary);
-  }
-  /* just to cancel examples  */
-  &.is-hover:hover {
-    background-color: $pm-primary-dark;
-  }
-}
-
-.pm-button-blueborder {
-  border-color: $pm-primary;
-  color: $pm-primary;
-  background-color: $white;
-
-  &:focus,
-  &:hover,
-  &:focus-within,
-  &.is-hover {
-    box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2);
-    border-color: $pm-primary-dark;
-    color: $pm-primary-dark;
-  }
-  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
-  &.is-active {
-    border-color: $pm-primary-dark;
-    color: $pm-primary-dark;
-    background-image: radial-gradient(closest-side, transparent, rgba(black, .1));
-    box-shadow: none;
-  }
-  &[disabled],
-  &.is-disabled {
-    @include button-disabled-state;
-  }
-}
-
-
-.pm-button-blueborder-dark {
-  @include pm-button-blueborder-dark;
-}
-
-.pv-button-green,
-.pm-button.pv-button-green {
-  color: $white;
-  background-color: $pv-green;
-  border: 1px solid $pv-green;
-
-  &:focus,
-  &:hover,
-  &:focus-within,
-  &.is-hover {
-    color: $white;
-    box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2);
-    background-color: $pv-green-dark;
-  }
-  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
-  &.is-active {
-    background-color: $pv-green-dark;
-    text-shadow: 1px 1px 10px rgba( $white, .3 ),-1px -1px 10px rgba( $white, .3 );
-    box-shadow: none;
-  }
-  &[disabled],
-  &.is-disabled {
-    @include button-disabled-state($pv-green);
-  }
-  /* just to cancel examples  */
-  &.is-hover:hover {
-    background-color: $pv-green-dark;
-  }
-}
-
-.pv-button-greenborder {
-  border-color: $pv-green;
-  color: $pv-green;
-  background-color: $white;
-
-  &:focus,
-  &:hover,
-  &:focus-within,
-  &.is-hover {
-    box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2);
-    border-color: $pv-green-dark;
-    color: $pv-green-dark;
-  }
-  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
-  &.is-active {
-    border-color: $pv-green-dark;
-    color: $pv-green-dark;
-    background-image: radial-gradient(closest-side, transparent, rgba(black, .1));
-    box-shadow: none;
-  }
-  &[disabled],
-  &.is-disabled {
-    @include button-disabled-state;
-  }
-}
-
-
-.pv-button-greenborder-dark {
-  @include pv-button-greenborder-dark;
-}
-
-
-
-/* modifiers */
-.pm-button--large {
-  padding: em(10) em(20) em(9); // design want 42px height
-}
-.pm-button--small {
-  padding: em(1) em(12) em(2); // design want 26px height
-}
-
-.pm-button--for-icon {
-  padding-left: .75em;
-  padding-right: .75em;
-}
-.pm-button--for-smallicon {
-  padding-left: .25em;
-  padding-right: .25em;
-}
-
-/* button group */
-.pm-group-buttons {
-  @extend .inline-flex;
-  @extend .flex-nowrap;
-}
-.pm-group-button,
-.pm-group-button.is-active,
-.pm-group-button:hover,
-.pm-group-button:focus,
-.pm-group-button:active {
-  border-radius: 0;
-  border-left-width: 0;
-}
-.pm-group-button:hover,
-.pm-group-button:focus,
-.pm-group-button:active {
-  position: relative;
-}
-
-.pm-group-buttons > .pm-group-button:first-child {
-  border-radius: $global-border-radius 0 0 $global-border-radius;
-  border-left-width: 1px;
-}
-.pm-group-buttons > .pm-group-button:last-child {
-  border-radius: 0 $global-border-radius $global-border-radius 0;
-}
-
-@if $rtl-option == true {
-  [dir="rtl"] {
-    .pm-group-buttons > .pm-group-button:not(.pagination-expand):first-child {
-      border-radius: 0 $global-border-radius $global-border-radius 0;
-      border-right-width: 1px;
-      border-left-width: 0;
-    }
-    .pm-group-buttons > .pm-group-button:not(.pagination-expand):last-child {
-      border-radius: $global-border-radius 0 0 $global-border-radius;
-      border-left-width: 1px;
-    }
-  }
-}
-
-/* special case for group button with primary colors */
-.pm-group-buttons > .pm-group-button.pm-button--primary {
-	border-color: $pm-primary;
-	border-left-width: 0;
-	&:first-child {
-		border-left-width: 1px;
-	}
-	&:not(:last-child) {
-		border-right-color: var(--bgcolor-main-area, $white);
-	}
-}
-
-/* exception for group buttons, disabled state should keep the border */
-.pm-group-button {
-  &[disabled],
-  &.is-disabled {
-    &.pm-button {
-      border-color: $pm-global-border;
-    }
-    &.pm-button-blueborder {
-      border-color: $pm-primary;
-    }
-    &.pv-button-greenborder {
-      border-color: $pv-green;
-    }
-  }
-}
-
-
-/* aliases for buttons => different per project */
-/* primary/link/error/warning/info */
-@if ($pm-primary == $pm-blue) {
-  .pm-button--primary {
-    @extend .pm-button-blue;
-  }
-  .pm-button--primaryborder,
-  .pm-button--primaryborderEvenInDarkMode {
-    @extend .pm-button-blueborder;
-  }
-  .pm-button--primaryborder-dark {
-    @extend .pm-button-blueborder-dark;
-  }
-}
-@else {
-  .pm-button--primary {
-    @extend .pv-button-green;
-  }
-  .pm-button--primaryborder,
-  .pm-button--primaryborderEvenInDarkMode {
-    @extend .pv-button-greenborder;
-  }
-  .pm-button--primaryborder-dark {
-    @extend .pv-button-greenborder-dark;
-  }
-}
-.pm-button--link,
-.pm-button.pm-button--link {
-  color: $color-links;
-  border-width: 0;
-  box-shadow: none;
-  text-decoration: underline;
-  background-color: transparent; // to avoid heriting from other classes
-  padding-left: 0;
-  padding-right: 0;
-  &:focus,
-  &:hover,
-  &:not(div):active,
-  &:active {
-    color: $color-hover;
-    text-decoration: underline;
-    box-shadow: none;
-    background: transparent; // to avoid heriting from other classes
-  }
-  &[disabled],
-  &.is-disabled {
-    color:  rgba( $pm-global-grey, .5 );
-    pointer-events: none;
-    text-decoration: none;
-    background-color: transparent; // to avoid heriting from other classes
-  }
-  &.nodecoration {
-	  text-decoration: none;
-  }
-  &.pm-button--currentColor {
-	  color: currentColor;
-  }
-}
-.pm-button--error,
-.pm-button.pm-button--error {
-  @extend .pm-button-blue;
-  background-color: $pm-global-warning;
-  border-color: $pm-global-warning;
-  &:focus,
-  &:hover,
-  &:not(div):active { // not div is here for a specificity issue for another fix
-    background-color: $pm-global-warning;
-    border-color: $pm-global-warning;
-  }
-  &[disabled],
-  &.is-disabled {
-    @include button-disabled-state($pm-global-warning);
-  }
-}
-.pm-button--warning,
-.pm-button.pm-button--warning {
-  @extend .pm-button-blue;
-  background-color: $pm-global-attention;
-  border-color: $pm-global-attention;
-  &:focus,
-  &:hover,
-  &:not(div):active { // not div is here for a specificity issue for another fix
-    background-color: $pm-global-attention;
-    border-color: $pm-global-attention;
-  }
-  &[disabled],
-  &.is-disabled {
-    @include button-disabled-state($pm-global-attention);
-  }
-}
-.pm-button--info {
-  @extend .pm-button;
-}
-
-/* other aliases requested */
-.pm-button--redborder,
-.pm-button.pm-button--redborder {
-	@extend .pm-button;
-	border-color: $pm-global-warning;
-	color: $pm-global-warning;
-  	&:focus,
-	&:hover,
-	&:not(div):active,
-	&:active {
-		color: $pm-global-warning;
-	}
-}
-.pm-button--whiteborder,
-.pm-button--primary.pm-button.pm-button--whiteborder {
-  border: 1px solid $white;
-}
-
-/* other modifiers requested */
-.pm-button--noborder {
-  border: 0;
-}
-.pm-button--currentColor {
-  color: currentColor;
-}
-.pm-button--pill {
-  border-radius: 2em;
-}
-.pm-button--transparent {
-  /* When using currentColor, you need to set the color you want on a container */
-  border: 1px solid currentColor;
-  color: currentColor;
-  &:focus,
-  &:hover,
-  &:not(div):active,
-  &:active {
-    background-color: rgba(black, .2);
-    color: currentColor;
-  }
-}
diff --git a/templates/@theme-base/pm-styles/_pm-choose-account.scss b/templates/@theme-base/pm-styles/_pm-choose-account.scss
deleted file mode 100644
index 24eb237..0000000
--- a/templates/@theme-base/pm-styles/_pm-choose-account.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * Choose account SSO
- */
-
-
-
-.button-account-container {
-	border: 1px solid var(--bordercolor-input, $pm-global-muted); // inconsistent with borders...
-	max-height: 50vh;
-	@include respond-to($breakpoint-small) {
-		max-height: none;
-	}
-}
-
-.button-account-container-inner {
-	border-right: 1px solid var(--bordercolor-input, $pm-global-muted); // inconsistent with borders...
-}
-
-.button-account {
-
-    &-login {
-		transition: opacity .35s easing(easeInOut), visibility 0s;
-		opacity: 0;
-		width: 0;
-		transition-delay: 0s, .35s;
-	}
-
-	&:focus,
-	&:hover,
-	&:active {
-		background-color: var(--bgcolor-input, $pm-input-background);
-
-		.button-account-login {
-			opacity: 1;
-			width: auto;
-			transition-delay: 0s;
-		}
-
-	}
-}
diff --git a/templates/@theme-base/pm-styles/_pm-circlebar.scss b/templates/@theme-base/pm-styles/_pm-circlebar.scss
deleted file mode 100644
index 8cb6629..0000000
--- a/templates/@theme-base/pm-styles/_pm-circlebar.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-$stroke-width: 3px !default; // be careful to udpate SVG if you want to update this value
-
-// this component is used for VPN
-// and for the moment on Angular/React sidebar
-.circle-chart__background {
-  stroke: var(--color-main-area, $pm-global-grey);
-  opacity: .2;
-  stroke-width: $stroke-width;
-  fill: transparent;
-}
-.circle-chart__background--bigger .circle-chart__background {
-  stroke: var(--bgcolor-input, rgba($pm-global-grey, .2));
-  opacity: .4;
-}
-
-.circle-chart__circle {
-  stroke: $pm-global-success;
-  stroke-width: $stroke-width;
-  fill: transparent;
-  animation: circle-chart-fill 2s reverse;
-  transform: rotate(-90deg);
-  transform-origin: center;
-}
-.circle-bar--medium .circle-chart__circle {
-   stroke: $pm-global-attention;
-}
-.circle-bar--full .circle-chart__circle {
-  stroke: $pm-global-warning;
-}
-.circle-chart__percent {
-  fill: var(--color-main-area, rgba($pm-global-grey, .5) );
-}
-
-.circle-chart-info {
-  color: var(--color-standard-text, $pm-global-light);
-}
-
-
-@keyframes circle-chart-fill {
-  to { stroke-dasharray: 0 100; }
-}
diff --git a/templates/@theme-base/pm-styles/_pm-color-selector.scss b/templates/@theme-base/pm-styles/_pm-color-selector.scss
deleted file mode 100644
index 8e37e9c..0000000
--- a/templates/@theme-base/pm-styles/_pm-color-selector.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-.ColorSelector {
-
-	&-container {
-		@include respond-to($breakpoint-small, 'min') {
-			max-width: 13em;
-		}
-	}
-
-	&-item {
-		position: relative;
-		display: inline-block;
-		height: 2.5em;
-		width: 2.5em;
-		border-radius: 50%;
-		padding: 0;
-		margin: .125em;
-		overflow: hidden;
-		cursor: pointer;
-
-		&-mask {
-			position: absolute;
-			display: inline-flex;
-			justify-content: center;
-			align-items: center;
-			top: 0;
-			left: 0;
-			bottom: 0;
-			right: 0;
-			border-radius: 50%;
-			z-index: 2;
-			background: currentColor;
-			border: 2px solid var(--bgcolor-main-area, white);
-			pointer-events: none;
-			transition: border .1s ease-out;
-		}
-
-		&.selected &-mask {
-			border:3px solid rgba(0, 0, 0, .1);
-		}
-
-		svg {
-			opacity: 0;
-			color: white;
-			display: inline-block;
-			transition: opacity .1s linear;
-		}
-
-		&:hover svg {
-			opacity: .75;
-		}
-
-		&.selected svg {
-			opacity: 1;
-		}
-
-	}
-
-	&-input-color[type="radio"] {
-		position: absolute;
-		z-index: 1;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		opacity: 0;
-		margin: 0;
-		cursor: pointer;
-	}
-}
diff --git a/templates/@theme-base/pm-styles/_pm-containers.scss b/templates/@theme-base/pm-styles/_pm-containers.scss
deleted file mode 100644
index e9b44a4..0000000
--- a/templates/@theme-base/pm-styles/_pm-containers.scss
+++ /dev/null
@@ -1,163 +0,0 @@
-/*
- * containers
- */
-.bordered,
-.bordered-container,
-.dashed,
-.dashed-container {
-  border: 1px solid var(--bordercolor-input, $pm-global-border);
-}
-.bordered-container,
-.dashed-container {
-  border-radius: $global-border-radius;
-}
-.bordered-container--error {
-  border-color: $pm-global-warning;
-}
-
-.dashed,
-.dashed-container {
-  border-style: dashed;
-}
-
-.border-bottom {
-  border-bottom: 1px solid var(--bordercolor-input, $pm-global-border);
-}
-.border-bottom--dashed {
-  border-bottom-style: dashed;
-}
-.border-bottom--currentColor {
-  border-bottom-color: currentColor;
-}
-.border-top {
-  border-top: 1px solid var(--bordercolor-input, $pm-global-border);
-}
-.border-top--dashed {
-  border-top-style: dashed;
-}
-.border-left {
-  border-left: 1px solid var(--bordercolor-input, $pm-global-border);
-}
-.border-right {
-  border-right: 1px solid var(--bordercolor-input, $pm-global-border);
-}
-
-.border-currentColor {
-  border: 1px solid currentColor;
-}
-
-.borderColor-primary {
-	border-color: $pm-primary;
-}
-
-.shadow-container {
-  box-shadow: 0 0 20px 0 $input-shadow-color;
-}
-
-.tiny-shadow-container {
-	box-shadow: 0 1px 3px 0 var(--bgcolor-main-area, $pm-global-border);
-	border: 1px solid var(--bordercolor-input, transparent);
-}
-
-.row--orderable {
-  z-index: 666; /* In case the modal is open */
-  background: var(--bgcolor-main-area, $white);
-  color: var(--color-main-area, $pm-global-grey);
-}
-
-$block-info-border-width: 3px !default;
-[class*="block-info"] {
-  padding: 0.5em 1.2em;
-  color: var(--color-main-area, $pm-global-grey);
-  background-color: var(--bordercolor-input, $pm-global-light);
-  border-left-width: $block-info-border-width;
-  border-left-style: solid;
-}
-@if $rtl-option == true {
-  [dir="rtl"] {
-    [class*="block-info"] {
-      border-left-width: 0;
-      border-right-width: $block-info-border-width;
-      border-right-style: solid;
-    }
-  }
-}
-.block-info {
-  border-color: $pm-primary;
-}
-.block-info-error {
-  border-color: $pm-global-warning;
-}
-.block-info-warning {
-  border-color: $pm-global-attention;
-}
-.block-info-success {
-  border-color: $pm-global-success;
-}
-
-[class*="block-info-standard"] {
-  padding: 0.2em 1.2em;
-  background-color: transparent;
-}
-.block-info-standard {
-  border-color: $pm-primary;
-}
-.block-info-standard-error {
-  border-color: $pm-global-warning;
-}
-.block-info-standard-warning {
-  border-color: $pm-global-attention;
-}
-.block-info-standard-success {
-  border-color: $pm-global-success;
-}
-// other colors might be added later
-
-[class*="block-info"].color-white {
-  color: $white;
-}
-
-/**
- * details/summary
- */
-details {
-  border-bottom: 1px solid $pm-global-border;
-  border-radius: $global-border-radius;
-
-  & > summary::-webkit-details-marker {
-    display: none;
-  }
-  &:first-child {
-    border-top: 1px solid $pm-global-border;
-  }
-  &[open] > summary {
-    background: url(#{$path-images}sprite-for-css-only.svg#css-caret-close) 0
-      50% no-repeat;
-  }
-}
-summary {
-  padding: 1em 0 1em 2rem;
-  background: url(#{$path-images}sprite-for-css-only.svg#css-caret) 0 50%
-    no-repeat;
-  list-style: none;
-  border: 0;
-  cursor: pointer;
-}
-
-
-
-/* welcome boxes in a 2 column design */
-$breakpoint-2-columns: 1180 !default;
-@include respond-to($breakpoint-2-columns) {
-    .boxes-placeholder-container {
-       flex-direction: column;
-       > * {
-           margin-bottom: 1em;
-           width: 100%;
-           flex-basis: auto;
-       }
-	}
-	.boxes-placeholder-button {
-		margin-top: 0;
-	}
-}
diff --git a/templates/@theme-base/pm-styles/_pm-context-bar.scss b/templates/@theme-base/pm-styles/_pm-context-bar.scss
deleted file mode 100644
index 49250ba..0000000
--- a/templates/@theme-base/pm-styles/_pm-context-bar.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.context-bar {
-	background: var(--bgcolor-context-bar, $pm-global-muted);
-
-	@include respond-to($breakpoint-medium, 'min') {
-		width: $context-bar-width;
-		min-width: $context-bar-min-width;
-		max-width: var(--width-context-bar, $context-bar-max-width);
-		border-left: 1px solid var(--bordercolor-input, $pm-global-border);
-	}
-
-	@include respond-to($breakpoint-medium) {
-		border-top: 1px solid var(--bordercolor-input, $pm-global-border);
-	}
-
-	&-inner {
-		position: sticky;
-		top: 0;
-		padding: 2em;
-	}
-}
diff --git a/templates/@theme-base/pm-styles/_pm-conversations.scss b/templates/@theme-base/pm-styles/_pm-conversations.scss
deleted file mode 100644
index 184516f..0000000
--- a/templates/@theme-base/pm-styles/_pm-conversations.scss
+++ /dev/null
@@ -1,831 +0,0 @@
-/*
- * Shared for placeholder loading
- */
-@keyframes loadingItem {
-	from { opacity: .05; }
-	to   { opacity: .15; }
-}
-
-%item-loading-pseudo {
-	content: '\00a0';
-	display: inline-block;
-	border-radius: $global-border-radius;
-	background-color: currentColor;
-	line-height: 1.2;
-	opacity: 0;
-}
-
-%appearing-container {
-	animation: itemFadeIn .5s easing(easeOutQuint);
-}
-
-%placeholder-loading {
-	animation: loadingItem .5s calc(var(--index, 0) * 20ms) easing(easeOutSine) infinite alternate;
-}
-
-@keyframes itemFadeIn {
-	from { opacity: 0; }
-	to   { opacity: 1; }
-}
-
-
-/*
- * items (conversations/contacts lists)
- */
-$container-to-width: 3em !default;
-
-.items-column-list {
-	width: var(--width-conversation-column, calc((100% + var(--width-sidebar, #{$width-sidebar})) * #{$conversations-column-width/1%/100}));
-}
-
-.items-column-list-inner,
-.ReactVirtualized__Grid__innerScrollContainer {
-	border: solid var(--bordercolor-input, $pm-global-border);
-	border-width: 0 1px;
-	min-height: 100%;
-}
-
-.items-column-list-inner--noborder {
-	// fix for Contact and ReactVirtualized__Grid
-	border: 0;
-}
-
-.items-column-list--mobile {
-	width: 100%;
-}
-
-.items-column-list,
-.items-column-list--mobile,
-.view-column-detail {
-	height: 100%;
-}
-
-.view-column-detail {
-	background: var(--bgcolor-view-column-detail, $white);
-}
-
-$item-container-height: 6.4rem !default;
-$item-container-padding-top-bottom: em(8.5) !default;
-$item-container-padding-left-right: em(12) !default;
-
-$item-container-height-compact-mode: 4.8rem !default;
-$item-container-row-height-compact-mode: 4rem !default;
-
-.item-container,
-.item-container-row {
-	@extend %appearing-container;
-	position: relative;
-	padding: $item-container-padding-top-bottom $item-container-padding-left-right; // design wants ~64 height
-	border-bottom: 1px solid var(--bordercolor-input, $pm-global-border);
-	background-color: var(--bgcolor-item-column-list, $pm-global-muted);
-
-	&::before {
-		content: '';
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		z-index: 1;
-		pointer-events: none;
-		border: 1px solid transparent;
-		transition: .15s easing(easeOutQuart);
-	}
-
-	&:hover::before {
-		border-color: $pm-primary-light;
-		box-shadow: 0 .125em .25em 0 var(--dropdown-box-shadow, $input-shadow-color);
-	}
-}
-
-.item-container {
-	height: $item-container-height;
-}
-// fix for Firefox multi-selection issue
-.item-checkbox-label > .item-checkbox {
-	width: 100%;
-	height: 100%;
-	z-index: 1;
-}
-
-.item-firstline,
-.item-secondline {
-	margin-bottom: .25em;
-}
-
-.item-secondline:empty {
-	min-height: 1.5em;
-}
-
-/* Compact view */
-.is-shown-when-compact {
-	display: none;
-}
-
-.is-compact {
-
-	.item-container,
-	.item-container-row {
-		height: $item-container-height-compact-mode;
-
-		.item-container-inner {
-			padding: em(0) em(12);
-		}
-	}
-	.item-container-row {
-		height: $item-container-row-height-compact-mode;
-	}
-	.item-icon-compact {
-		&::after {
-			height: $item-container-row-height-compact-mode;
-		}
-	}
-	.item-firstline,
-	.item-secondline {
-		margin: 0;
-	}
-
-	.is-hidden-when-compact {
-		display: none;
-	}
-
-	.is-shown-when-compact {
-		display: flex;
-	}
-}
-
-.item-is-selected,
-.item-container.active {
-	// alias for Angular
-	background-color: var(--bgcolor-item-column-active, $conversation-selected-bg);
-}
-
-.item-container:not(.item-is-selected):not(.read):not(.active),
-.item-container-row:not(.item-is-selected):not(.read):not(.active) {
-	background-color: var(--bgcolor-unread-item-column-list, $white);
-}
-
-.item-is-loading {
-	background-color: var(--bgcolor-main-area, white);
-	pointer-events: none;
-
-	.item-checkbox-label::before,
-	.item-icon-compact::before,
-	.item-senders::before,
-	.item-senddate-col::before,
-	.item-senddate-row::before,
-	.item-weight::before,
-	.item-star,
-	.item-subject::before {
-		@extend %placeholder-loading;
-	}
-
-	.item-checkbox-label,
-	.item-icon-compact {
-		position: relative;
-
-		&::before {
-			content: '';
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			z-index: 1;
-			border-radius: $global-border-radius;
-			background-color: currentColor;
-			opacity: 0;
-		}
-
-		.item-icon,
-		.pm-checkbox-fakecheck {
-			opacity: 0;
-		}
-	}
-
-	.item-senders,
-	.item-senddate-col,
-	.item-senddate-row,
-	.item-weight,
-	.item-subject {
-		&::before {
-			@extend %item-loading-pseudo;
-		}
-	}
-
-	.item-senders {
-		&::before {
-			width: 35%;
-		}
-	}
-
-	.item-senddate-col {
-		min-width: 6em;
-
-		&::before {
-			width: 100%;
-		}
-	}
-
-	.item-senddate-row {
-
-		&::before {
-			width: 70%;
-		}
-	}
-
-	.item-weight {
-		min-width: 4em;
-
-		&::before {
-			width: 100%;
-		}
-	}
-
-	.item-subject {
-		&::before {
-			width: 60%;
-		}
-	}
-}
-
-
-
-$conversation-icon-size: 3.2rem !default;
-
-.item-icon {
-	width: $conversation-icon-size;
-	height: $conversation-icon-size;
-	font-size: 1.2rem;
-	border: 1px solid var(--bordercolor-input, $pm-global-border);
-	background-color: var(--bordercolor-input, $white);
-}
-
-.item-icon-compact {
-	width: $conversation-icon-size;
-	height: $conversation-icon-size;
-	border-radius: 50%;
-	font-size: 1.2rem;
-	transition: background .25s ease;
-
-	&:hover {
-		background: var(--bordercolor-input, $pm-global-light);
-	}
-	&::after {
-		content: '';
-		position: absolute;
-		left: -#{em(12)};
-		right: -#{em(12)};
-		top: -#{($item-container-height-compact-mode - $conversation-icon-size)/2};
-        height: $item-container-height-compact-mode;
-	}
-}
-
-.item-checkbox {
-
-	// for allowing hovering larger than fake circle
-	&:after {
-		content: '';
-		position: absolute;
-		top: -#{($item-container-height - $conversation-icon-size)/2};
-		bottom: -#{($item-container-height - $conversation-icon-size)/2};
-		left: em(-12);
-		width: calc(#{$conversation-icon-size} + #{$item-container-padding-left-right} + .5rem);
-		// icon size + padding container + tiny margin for comfort
-	}
-
-	// hidden fake check by default
-	&+.item-icon>.item-icon-fakecheck {
-		display: none;
-	}
-
-	// focus state (used global hover state) => NEEDS IMPROVEMENTS
-	// &:focus + .item-icon {
-	//   & > .item-abbr {
-	//     display: none;
-	//   }
-
-	//   & > .item-icon-fakecheck {
-	//     display: flex;
-	//     transform: scale(1);
-	//   }
-
-	//   .item-icon-fakecheck-icon {
-	//     fill: $pm-global-border;
-	//   }
-	// }
-
-	// hover state of checkbox
-	&:hover+.item-icon,
-	&+.item-icon:hover {
-		background-color: var(--bgcolor-input, $white);
-		border-color: var(--bordercolor-input, $pm-global-border);
-
-		&>.item-abbr {
-			display: none;
-		}
-
-		&>.item-icon-fakecheck {
-			display: flex;
-			transform: scale(1);
-		}
-
-		.item-icon-fakecheck-icon {
-			fill: $pm-primary;
-		}
-	}
-
-	// checked state
-	&:checked+.item-icon {
-		background-color: $pm-primary;
-		border-color: $pm-primary;
-
-		&>.item-abbr {
-			display: none;
-		}
-
-		&>.item-icon-fakecheck {
-			display: flex;
-			animation: conversationIconIn ease .15s;
-		}
-
-		.item-icon-fakecheck-icon {
-			fill: $white;
-		}
-	}
-}
-
-// fix pseudo element for row layout
-.item-container-row {
-	.item-checkbox {
-		&:after {
-			top: -#{$item-container-padding-top-bottom};
-			bottom: -#{$item-container-padding-top-bottom};
-		}
-	}
-	.item-weight {
-		min-width: 5em;
-	}
-}
-
-@keyframes conversationIconIn {
-	0% {
-		transform: scale(0);
-	}
-
-	100% {
-		transform: scale(1);
-	}
-}
-
-.item-sender--smaller,
-.item-date {
-	font-size: em(12);
-}
-
-.message-header-metas-container {
-	height: $conversation-icon-size;
-}
-
-.starbutton {
-	color: var(--color-main-area, $pm-global-grey);
-	width: 1.6rem;
-	height: 1.6rem;
-	opacity: .5;
-
-	&:focus,
-	&:hover {
-		color: $pm-global-attention;
-		opacity: 1;
-	}
-
-	[class*="starbutton-icon"] {
-		position: absolute;
-		top: 0;
-		left: 0;
-	}
-
-	.starbutton-icon-starred {
-		transform: scale(0);
-		transition: transform .15s ease;
-	}
-}
-
-.starbutton--is-starred {
-	opacity: 1;
-	color: $pm-global-attention;
-
-	.starbutton-icon-starred {
-		transform: scale(1);
-	}
-}
-
-.pill-icon {
-	display: inline-flex;
-	padding: .125em .5em;
-	border-radius: 1em;
-	line-height: 1;
-
-	& > * {
-		color: white;
-	}
-
-	&-attachment {
-		background-color: rgba(black, .5);
-		// Plus some adaptations for dark theme in _pm-dark-theme.scss
-	}
-}
-
-/*
- * view messages
- */
-.message-conversation-summary {
-	.is-appearing-content {
-		@extend %appearing-container;
-	}
-
-	&-is-loading {
-		pointer-events: none;
-	}
-
-	&-is-loading &-header,
-	&-is-loading &-stat {
-		position: relative;
-
-		&::before {
-			@extend %item-loading-pseudo;
-			@extend %placeholder-loading;
-		}
-	}
-
-	&-is-loading &-header {
-		&::before {
-			width: 25%;
-
-			@include respond-to($breakpoint-small) {
-				width: 50%;
-			}
-		}
-	}
-
-	&-is-loading &-stat {
-		&::before {
-			width: 2em;
-		}
-	}
-
-	&-is-loading &-star {
-		@extend %placeholder-loading;
-	}
-}
-
-.trashed-messages,
-.message-header {
-	background-color: var(--bgcolor-item-column-list, $pm-global-muted);
-}
-
-.message-container {
-	border: 1px solid var(--bordercolor-input, $pm-global-border);
-	border-radius: $global-border-radius;
-	@extend %appearing-container;
-}
-
-.message-header {
-	border-radius: $global-border-radius; // Can't overflow 'cause of ::before, so repeat radius
-	padding: .6em;
-
-	.is-appearing-content {
-		@extend %appearing-container;
-	}
-
-	&.is-unread {
-		background: var(--bgcolor-unread-item-column-list, $white);
-		box-shadow: 2px 2px 3px 0px $input-shadow-color;
-		font-weight: bold;
-	}
-
-	&.is-loading {
-		pointer-events: none;
-	}
-
-	&.is-loading .message-recipient-item-icon,
-	&.is-loading &-star {
-		@extend %placeholder-loading;
-	}
-
-	&.is-loading .message-recipient-item-icon {
-		background-color: currentColor;
-		opacity: 0;
-	}
-
-	&.is-loading .message-recipient-item-label,
-	&.is-loading .message-recipient-item-address,
-	&.is-loading &-metas,
-	&.is-loading &-to,
-	&.is-loading &-contact,
-	&.is-loading .message-show-hide-link-container {
-		position: relative;
-
-		&::before {
-			@extend %item-loading-pseudo;
-			@extend %placeholder-loading;
-		}
-	}
-
-	&.is-loading .message-recipient-item-label {
-		width: 100%;
-		max-width: 7.5em;
-
-		&::before {
-			width: 100%;
-		}
-	}
-
-	&.is-loading .message-recipient-item-address {
-		width: 100%;
-		max-width: 12.5em;
-
-		&::before {
-			width: 100%;
-		}
-	}
-
-	&.is-loading &-metas {
-		&::before {
-			width: 10em;
-		}
-	}
-
-	&.is-loading &-to {
-		&::before {
-			width: 1.25em;
-		}
-	}
-
-	&.is-loading &-contact {
-		&::before {
-			width: 7.5em;
-		}
-	}
-
-	&.is-loading .message-show-hide-link-container {
-		&::before {
-			width: 6em;
-		}
-	}
-}
-
-// hide extra container when there is nothing inside
-.message-header-extra:empty {
-	display: none;
-}
-
-// when expanded but no full details
-.message-header-expanded {
-	padding: .6em .6em 0 .6em;
-
-	.message-show-hide-link {
-		padding: 0;
-	}
-}
-
-// alignements when expanded/details
-.message-header--showDetails {
-	.message-show-hide-link-container {
-		padding-left: calc(#{$container-to-width} + #{$conversation-icon-size} + .75em);
-	}
-
-	// show/hide details should go below otherwise it will be strangely place depending of recipients
-	.message-header-recipients {
-		flex-direction: column;
-
-		&>* {
-			width: 100%;
-			flex-basis: auto;
-		}
-	}
-
-	.message-recipient-item-expanded {
-		margin-top: .25em;
-
-		@include respond-to($breakpoint-small) {
-			margin-top: .5em;
-		}
-
-		.message-recipient-item:not(:first-child) {
-			margin-top: .25em;
-		}
-	}
-
-	// display of email default none except when details
-	.message-recipient-item-address,
-	.message-recipient-item-label {
-		@extend .ellipsis;
-
-		@include respond-to($breakpoint-small) {
-			display: block;
-		}
-	}
-	.message-recipient-item-lockIcon::before {
-		@include respond-to($breakpoint-small) {
-			content: '\00a0';
-			width: 100%;
-		}
-	}
-}
-
-.message-detailed-header-extra {
-	.item-date {
-		font-size: 1.4rem;
-	}
-}
-
-/* states classes */
-.message-container.is-opened {
-
-	>.message-header {
-		border-bottom: 1px solid var(--bordercolor-input, $pm-global-border);
-	}
-
-}
-
-.message-container--hasAttachment {
-	.message-content {
-		border-radius: 0;
-	}
-}
-
-.message-content {
-	transition: .5s easing(easeOutSine);
-	transition-property: background-color, color;
-
-	&-loading-placeholder {
-		position: relative;
-
-		&::before {
-			@extend %item-loading-pseudo;
-			@extend %placeholder-loading;
-			width: 100%;
-		}
-	}
-}
-
-.message-expand {
-	padding: 0 .5em .6em; // centers
-	background-color: var(--bgcolor-item-column-list, $pm-global-light);
-	line-height: .75;
-}
-
-.message-attachments {
-	font-size: 1.4rem;
-}
-
-.message-attachmentPrimaryAction,
-.message-attachmentSecondaryAction {
-	&:hover,
-	&:focus-within {
-		box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2);
-	}
-}
-.isDarkMode {
-	.message-attachmentPrimaryAction,
-	.message-attachmentSecondaryAction {
-		background-color: $pm-global-grey;
-		&:hover,
-		&:focus-within {
-			background-color: rgba(0, 0, 0, 0.2);
-		}
-	}
-}
-
-
-.message-attachmentSecondaryAction {
-	svg[aria-busy="true"] {
-		background-size: 16px;
-	}
-}
-
-.message-attachment {
-	line-height: 1.3;
-	padding: 0;
-
-	&:hover,
-	&:focus,
-	&:active {
-		text-decoration: none;
-	}
-}
-
-.message-attachmentList-item-container {
-    margin-top: .5em;
-	width: 50%;
-
-    &:first-child,
-    &:nth-child(2) {
-        margin-top: 0;
-    }
-    &:nth-child(even) {
-        padding-left: 0.5em;
-    }
-    &:nth-child(odd) {
-        padding-right: 0.5em;
-    }
-    // fix on last only if there are more than 4
-    &:nth-child(n + 5):last-child {
-        padding-bottom: 0.5em;
-    }
-
-	@include respond-to($breakpoint-tiny) {
-		width: 100%;
-		&:nth-child(even),
-		&:nth-child(odd) {
-			padding-left: 0;
-			padding-right: 0;
-		}
-		&:nth-child(2) {
-			margin-top: .5em;
-		}
-	}
-
-}
-
-
-.message-attachmentList-item {
-	&--uploadInProgress {
-		background-color: var(--bordercolor-input, $pm-global-muted);
-		.message-attachmentSecondaryAction {
-			border: 0;
-		}
-	}
-	&--loading {
-		background: var(--bordercolor-input, $pm-global-muted);
-	}
-}
-
-
-$message-attachment-icon-width: 2.6em !default;
-.message-attachmentIcon {
-	width: $message-attachment-icon-width;
-
-	svg:not([class*="fill-"]) {
-		fill: var(--color-main-area, $black);
-	}
-}
-
-
-.message-attachmentInfo {
-	border-left: 1px solid var(--bordercolor-input, $pm-global-border);
-	padding: .3em .7em;
-	max-width: calc(100% - #{$message-attachment-icon-width});
-}
-
-.message-attachmentSize {
-	font-size: 1.2rem;
-	opacity: .5;
-}
-
-.message-infobox {
-	background: var(--bgcolor-main-area, $white);
-}
-
-.container-to {
-	min-width: $container-to-width;
-
-	.item-icon {
-		&:focus,
-		&:hover {
-			.item-abbr {
-				display: none;
-			}
-
-			.item-caret {
-				display: block;
-			}
-		}
-	}
-}
-
-
-.compose-fab {
-	position: fixed;
-	bottom: 1em;
-	right: 1.6em;
-	z-index: 77;
-	height: 6.6rem;
-	width: 6.6rem;
-	border-radius: 50%;
-	padding: .5em;
-	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
-	transition: bottom .5s easing(easeOutQuart);
-
-	&--is-higher {
-		bottom: 4em;
-	}
-
-	&--inBackground {
-		z-index: 0;
-	}
-}
-
-
-@import "_pm-reset-display-messages";
diff --git a/templates/@theme-base/pm-styles/_pm-cursors.scss b/templates/@theme-base/pm-styles/_pm-cursors.scss
deleted file mode 100644
index 49fe0ed..0000000
--- a/templates/@theme-base/pm-styles/_pm-cursors.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- * Cursors
- */
-$list-cursors: default, help, wait, grab, row-resize, pointer !default;
-
-@each $cursor in $list-cursors {
-  .cursor-#{$cursor} { cursor: #{$cursor}; }
-}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-custom-scrollbar.scss b/templates/@theme-base/pm-styles/_pm-custom-scrollbar.scss
deleted file mode 100644
index 9770856..0000000
--- a/templates/@theme-base/pm-styles/_pm-custom-scrollbar.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-$scrollbar-track-color: transparent !default;
-$scrollbar-size       : .6rem !default;
-$scrollbar-margin     : .2rem !default;
-
-@if $custom-scroll {
-
-	body {
-		&:not(.isDarkMode) {
-			--scrollbar-thumb-color      : #{rgba(black, .35)};
-			--scrollbar-thumb-hover-color: #{rgba(black, .5)};
-		}
-
-		&.isDarkMode {
-			--scrollbar-thumb-color      : #{rgba(white, .2)};
-			--scrollbar-thumb-hover-color: #{rgba(white, .5)};
-		}
-	}
-
-	* {
-		$real-size: $scrollbar-size + ($scrollbar-margin * 2);
-
-		// W3C, Firefox
-		scrollbar-width: thin;
-		scrollbar-color: var(--scrollbar-thumb-color) $scrollbar-track-color;
-
-		// webkit specific
-		&::-webkit-scrollbar {
-			width: $real-size;
-			height: $real-size;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			border: $scrollbar-margin solid transparent; // Margin
-			background-clip: padding-box; // Booyah!
-			border-radius: $real-size/2;
-			background-color: var(--scrollbar-thumb-color);
-		}
-
-		&::-webkit-scrollbar-track {
-			background-color: $scrollbar-track-color;
-		}
-
-		&::-webkit-scrollbar-thumb:horizontal,
-		&::-webkit-scrollbar-thumb:vertical {
-			&:hover {
-				background-color: var(--scrollbar-thumb-hover-color);
-			}
-		}
-
-		&::-webkit-scrollbar-corner {
-			visibility: hidden;
-		}
-	}
-}
diff --git a/templates/@theme-base/pm-styles/_pm-dark-theme.scss b/templates/@theme-base/pm-styles/_pm-dark-theme.scss
deleted file mode 100644
index 7e3dbbc..0000000
--- a/templates/@theme-base/pm-styles/_pm-dark-theme.scss
+++ /dev/null
@@ -1,215 +0,0 @@
-/* dark-mode
- * Come to the Dark Mode, we have wookies
- */
-
-@import "./pm-buttons-mixins";
-
-// forms/buttons
-.pm-button:not(.pm-button-blue):not(.pv-button-green):not(.pm-button--primary):not(.pm-button--primaryborderEvenInDarkMode):not(.pm-button--link):not(.pm-button--error):not(.pm-button--warning):not(.pm-button--redborder):not(.pm-button--primaryborder),
-.pm-button--info {
-  @include pm-button-dark;
-}
-
-// didn’t used extend, not possible in @media for design system website
-$primary-border-blue-selectors: ".pm-button-blueborder";
-@if ($pm-primary == $pm-blue) {
-	$primary-border-blue-selectors: $primary-border-blue-selectors + ", .pm-button--primaryborder";
-}
-#{$primary-border-blue-selectors} {
-  @include pm-button-blueborder-dark;
-}
-
-$primary-border-green-selectors: ".pv-button-greenborder";
-@if ($pm-primary == $pv-green) {
-	$primary-border-green-selectors: $primary-border-green-selectors + ", .pm-button--primaryborder";
-}
-#{$primary-border-green-selectors} {
-  @include pv-button-greenborder-dark;
-}
-
-
-.pm-button--redborder,
-.pm-button.pm-button--redborder {
-	background-color: transparent;
-	&:focus,
-	&:hover,
-	&:not(div):active,
-	&:active {
-		color: $pm-global-warning;
-	}
-}
-
-.pm-button--link,
-a, .link,
-.pm-button.pm-button--link {
-  &:focus,
-  &:hover,
-  &:not(div):active,
-  &:active {
-    color: currentColor;
-  }
-  &[disabled],
-  &.is-disabled {
-    color:  rgba( $white, .5 );
-  }
-}
-
-.pm-group-button {
-  &[disabled],
-  &.is-disabled {
-    &.pm-button {
-      border-color: var(--bordercolor-input, $pm-global-border);
-    }
-    &.pm-button-blueborder {
-      border-color: $pm-primary-light;
-    }
-    &.pv-button-greenborder {
-      border-color: $pv-green-light;
-    }
-  }
-}
-
-
-.pm-field {
-  &[type="search"] {
-    background-image: url("#{$path-images}sprite-for-css-only.svg#css-search-white");
-  }
-}
-@if $rtl-option == true {
-  [dir="rtl"] {
-    [type="search"].pm-field {
-      background-image: url("#{$path-images}sprite-for-css-only.svg#css-search-rtl-white");
-    }
-  }
-}
-
-.pm-field[disabled] {
-  color:  rgba( $white, .5);
-  opacity: .6;
-}
-
-
-select.pm-field {
-  background-image: url("#{$path-images}sprite-for-css-only.svg#css-caret-white");
-}
-.pm-checkbox {
-  &:indeterminate + .pm-checkbox-fakecheck {
-    background-image: url("#{$path-images}sprite-for-css-only.svg#css-dash-white");
-  }
-}
-.pm-toggle-checkbox {
-  &[aria-busy="true"] + .pm-toggle-label  {
-    &::before {
-      background-image: url(#{$path-images}loading-atom-smaller-dark.svg);
-    }
-  }
-  &[disabled] + .pm-toggle-label  {
-    background-color: transparent;
-    opacity: .6;
-  }
-}
-
-.searchbox-field[type="search"] {
-  background-image: none;
-}
-
-.pm-toggle-label {
-  & > .pm-toggle-label-text:first-child .pm-toggle-label-img {
-     fill: $white;
-  }
-}
-
-// loading
-[aria-busy="true"] {
-  background-image: url(#{$path-images}loading-atom-smaller-dark.svg);
-}
-
-button[aria-busy="true"] {
-  background-image: url(#{$path-images}loading-atom-smaller-disabled-dark.svg);
-}
-
-
-
-tr[aria-busy="true"] td,
-td[aria-busy="true"] {
-  &::before {
-    background-image: url(#{$path-images}loading-atom-smaller-dark.svg);
-  }
-}
-
-.progressive[aria-busy="true"] {
-  &::before {
-    animation-name: backgroundLoading-dark;
-  }
-}
-
-@keyframes backgroundLoading-dark {
-  0% {
-    background-color: $pm-secondary-grey;
-  }
-  100% {
-    background-color: lighten($pm-secondary-grey, 10%);
-  }
-}
-
-
-// others
-details {
-  &[open] > summary {
-    background-image: url(#{$path-images}sprite-for-css-only.svg#css-caret-close-white);
-  }
-}
-summary {
-  background-image: url(#{$path-images}sprite-for-css-only.svg#css-caret-white);
-}
-
-
-.appConfigBody-darkmode, // for Angular
-.isDarkMode {
-  .display-on-darkmode {
-    display: flex;
-  }
-  .hide-on-darkmode {
-    display: none;
-  }
-}
-
-
-
-// quick and dirty
-.fill-global-grey:not(.fill-pm-blue):not(.fill-primary),
-.fill-black:not(.fill-pm-blue):not(.fill-primary) { fill: $white; } // dirty, I know
-
-.fill-currentColor { fill: currentColor; } // to avoid some issues
-
-
-.qr-code {
-	border: 1px solid $white;
-}
-
-.pill-icon-attachment {
-	background-color: rgba(black, .45);
-
-}
-
-
-// global
-:root {
-  --bgcolor-item-column-list: #{$pm-global-grey};
-  --bgcolor-unread-item-column-list: #{$pm-global-altgrey};
-  --bgcolor-view-column-detail: #{$pm-secondary-grey};
-  --bgcolor-main-area: #{$pm-secondary-grey};
-  --bgcolor-context-bar: #{$pm-secondary-grey};
-  --bgcolor-subheader: #{$bluish-grey};
-  --bgcolor-toolbar: #{$pm-global-altgrey};
-  --color-main-area: #{$white};
-  --bgcolor-disabled-checkboxes-radios: #{$pm-global-altgrey};
-  --bgcolor-item-column-active: #{$pm-blue-dark};
-  --bordercolor-input: #{$pm-tertiary-grey};
-  --bgcolor-muted: #{$pm-tertiary-grey};
-  --bgcolor-input: #{$pm-global-altgrey};
-  --bgcolor-highlight: #{$pm-global-altgrey};
-  --color-input: #{$white};
-  --dropdown-box-shadow: #{rgba(black, .75)};
-  --bgcolor-meterbar: #{rgba(black, .375)};
-}
diff --git a/templates/@theme-base/pm-styles/_pm-dropdown-logout.scss b/templates/@theme-base/pm-styles/_pm-dropdown-logout.scss
deleted file mode 100644
index 66a51ee..0000000
--- a/templates/@theme-base/pm-styles/_pm-dropdown-logout.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-.dropDown-logout-button {
-	border-radius: $global-border-radius;
-	color: var(--color-nav-link, $white);
-
-	&:focus,
-	&:hover,
-	&[aria-expanded="true"] {
-		background-color: $navigation-hover-bg-color;
-
-	}
-
-	&:focus,
-	&:hover {
-		.dropDown-logout-initials {
-			background-color: rgba(0, 0, 0, 0.2);
-		}
-	}
-
-	&[aria-expanded="true"] {
-		.dropDown-logout-initials {
-			background-color: rgba(0, 0, 0, 0.5);
-		}
-	}
-}
-
-.dropDown-logout-text {
-	margin-top: auto;
-	margin-bottom: auto;
-}
-
-// yes, but only on HUGE screens for looooooooooong accounts
-@include respond-to(1400, 'min') {
-	.dropDown-logout-button {
-		max-width: 18em;
-	}
-}
-
-.dropDown-logout-email {
-	font-size: 1rem;
-}
-
-.dropDown-logout-initials {
-	min-width: 2.5em;
-	min-height: 2.5em;
-	border: 1px solid var(--bordercolor-input, $pm-global-border);
-	color: $white;
-}
-
-@if $rtl-option == true {
-	[dir="rtl"] {
-		.dropDown-logout-button > span:first-child {
-			margin-left: .5em;
-			margin-right: 0;
-		}
-	}
-}
diff --git a/templates/@theme-base/pm-styles/_pm-dropdown.scss b/templates/@theme-base/pm-styles/_pm-dropdown.scss
deleted file mode 100644
index c864c1a..0000000
--- a/templates/@theme-base/pm-styles/_pm-dropdown.scss
+++ /dev/null
@@ -1,198 +0,0 @@
-/* dropdown examples */
-$dropDown-width: 200px !default;
-$dropDown-wide-width: 450px !default;
-$dropDown-narrow-width: 8em !default;
-
-.dropDown {
-  @extend .relative;
-}
-.dropDown-content {
-  position: absolute;
-  z-index: 10;
-  left: calc(50% - #{$dropDown-width/2});
-  top: 100%;
-  margin-top: 2rem;
-  display: block;
-  opacity: 1;
-  transition: visibility 0s ease, transform .15s ease, opacity .15s ease ;
-  transform-origin: top center;
-  transform: scale(1,1);
-  visibility: visible;
-  transition-delay: 0s;
-  width: $dropDown-width;
-  background: var(--bgcolor-main-area, $white);
-  border-radius: $global-border-radius;
-  box-shadow: 0 0 16px 3px $input-shadow-color;
-  color: var(--color-main-area, $pm-global-grey);
-}
-
-.dropDown-content--narrow {
-  left: calc(50% - #{$dropDown-narrow-width/2});
-  width: $dropDown-narrow-width;
-}
-
-.dropDown-content--wide {
-  left: calc(50% - #{$dropDown-wide-width/2});
-  width: $dropDown-wide-width;
-}
-
-.dropDown-content--rightbottom {
-  left: 100%;
-  bottom: 0;
-  top: auto;
-  margin-left: 2em;
-  transform-origin: center left;
-}
-
-@if $rtl-option == true {
-  [dir="rtl"] {
-    .dropDown-content--rightbottom {
-      left: auto;
-      right: 100%;
-      margin-right: 2em;
-      transform-origin: center right;
-    }
-  }
-}
-
-
-/* This is the hidden state */
-[hidden].dropDown-content {
-  display: block;
-  opacity: 0;
-  visibility: hidden;
-  transform: scale(1,0);
-  transition-delay: .15s, 0s, 0s;
-}
-[hidden].dropDown-content--rightbottom {
-  transform: scale(0,1);
-}
-
-.dropDown-contentInner {
-  position: relative;
-  overflow: auto;
-  min-height: 4em;
-  max-height: 30vh;
-  padding: 0; // no padding for the drop shadow :-\
-  margin: 0;
-
-  background: var(--bgcolor-main-area, $white) no-repeat;
-  background-image: radial-gradient(farthest-side at 50% 0,var(--bordercolor-input, #acb0bf),transparent),radial-gradient(farthest-side at 50% 100%,var(--bordercolor-input, #acb0bf),transparent);
-  background-position: 50% 0, 0 100%;
-  background-size: calc(100% - 20px) 3px;
-
-}
-.dropDown-contentInner {
-  &::before,
-  &::after {
-    content: '';
-    position: relative;
-    display: block;
-    z-index: 1;
-    background: var(--bgcolor-main-area, $white);
-    height: 10px;
-  }
-}
-
-/* position of dropDown variations */
-.dropDown--leftArrow .dropDown-content {
-  left: 0;
-}
-.dropDown--rightArrow .dropDown-content {
-  left: auto;
-  right: 0;
-}
-
-@if $rtl-option == true {
-  [dir="rtl"] {
-    .dropDown--leftArrow .dropDown-content {
-      right: 0;
-      left: auto;
-    }
-    .dropDown--rightArrow .dropDown-content {
-      left: 0;
-      right: auto;
-    }
-  }
-}
-
-/* arrow on top of dropdown */
-.dropDown-content::before {
-  content: '';
-  position: absolute;
-  top: -2rem;
-  left: calc(50% - 1rem);
-  width: 1rem;
-  height: 1rem;
-  border: 1rem solid transparent;
-  border-bottom: 1rem solid var(--bgcolor-main-area, $white);
-}
-
-.dropDown--leftArrow .dropDown-content::before {
-  left: 1rem;
-}
-.dropDown--rightArrow .dropDown-content::before {
-  left: auto;
-  right: 1rem;
-}
-
-.dropDown--leftBottomArrow .dropDown-content::before {
-  top: auto;
-  left: -2rem;
-  bottom: 1rem;
-  border: 1rem solid transparent;
-  border-right: 1rem solid var(--bgcolor-main-area, $white);
-}
-
-@if $rtl-option == true {
-  [dir="rtl"] {
-    .dropDown-content::before {
-      right: calc(50% - 1rem);
-      left: auto;
-    }
-
-    .dropDown--leftArrow .dropDown-content::before {
-      right: 1rem;
-      left: auto;
-    }
-    .dropDown--rightArrow .dropDown-content::before {
-      right: auto;
-      left: 1rem;
-    }
-
-    .dropDown--leftBottomArrow .dropDown-content::before {
-      left: 100%;
-      right: auto;
-      border: 1rem solid transparent;
-      border-left: 1rem solid var(--bgcolor-main-area, $white);
-    }
-  }
-}
-
-.dropDown-link,
-.dropDown-link:focus,
-.dropDown-link:hover,
-.dropDown-link:active {
-  color: currentColor;
-  text-decoration: none;
-}
-.dropDown-item:focus-within,
-.dropDown-item:hover {
-  background-color: var(--bgcolor-input, $pm-global-light);
-}
-.dropDown-item {
-	padding-left: 1em;
-}
-
-/* border on items */
-.dropDown-item + .dropDown-item {
-  border-top: 1px solid var(--bordercolor-input, $pm-global-border);
-}
-
-/* pagination caret */
-.expand-caret {
-  fill: currentColor;
-}
-.dropDown [aria-expanded="true"] .expand-caret {
-  @extend .rotateX-180;
-}
diff --git a/templates/@theme-base/pm-styles/_pm-editableSection.scss b/templates/@theme-base/pm-styles/_pm-editableSection.scss
deleted file mode 100644
index b629c41..0000000
--- a/templates/@theme-base/pm-styles/_pm-editableSection.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-@import '~design-system/_sass/reusable-components/_design-system-config.scss';
-
-.editableSection-container {
-	grid-template-columns: min-content minmax(5em, 1fr);
-	> .border-bottom {
-		padding-bottom: 1em;
-	}
-
-	> :not(.border-bottom) {
-		margin-top: 1em;
-	}
-
-	// not enough place
-	&--sizeTablet {
-		@include respond-to(780) {
-			--label-width: 15em;
-		}
-	}
-
-	@include respond-to($breakpoint-small) {
-		grid-template-columns: auto;
-		gap: .5em;
-		> .onmobile-pb0 {
-			padding-bottom: 0;
-		}
-		> :not(.border-bottom) {
-			margin-top: 0;
-		}
-	}
-}
diff --git a/templates/@theme-base/pm-styles/_pm-ellipsis-loader.scss b/templates/@theme-base/pm-styles/_pm-ellipsis-loader.scss
deleted file mode 100644
index 89db271..0000000
--- a/templates/@theme-base/pm-styles/_pm-ellipsis-loader.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.ellipsis-loader {
-	display: inline-block;
-	width: 1.4em;
-	vertical-align: baseline;
-	text-align: left;
-
-	&::before {
-		content: '\00a0';
-		font-family: monospace;
-		animation: ellipsis-loading linear 1s infinite;
-	}
-}
-
-@keyframes ellipsis-loading {
-	0%  { content: '\00a0'; }
-	25% { content: '.'; }
-	50% { content: '..'; }
-	75% { content: '...'; }
-}
diff --git a/templates/@theme-base/pm-styles/_pm-forms.scss b/templates/@theme-base/pm-styles/_pm-forms.scss
deleted file mode 100644
index 3d424fb..0000000
--- a/templates/@theme-base/pm-styles/_pm-forms.scss
+++ /dev/null
@@ -1,530 +0,0 @@
-/* input design */
-.placeholder,
-::placeholder {
-  color: var(--color-input, rgba($pm-global-grey, .65));
-  font-style: normal;
-  opacity: .6;
-}
-
-// fix "autofill state"
-input:-webkit-autofill{
-  box-shadow: 200px 200px 100px var(--bgcolor-input, $pm-input-background) inset;
-}
-
-/* removes X in input when typing in IE/EDGE */
-input::-ms-clear {
-  width: 0;
-  height: 0;
-}
-/* removes native password revealer for IE/EDGE */
-input::-ms-reveal {
-  display: none;
-}
-
-$field-container: 26rem !default;
-.pm-field-container {
-  width: $field-container;
-  @extend .mw100;
-  @extend .inbl;
-  @extend .relative;
-  &.auto {
-    @extend .auto;
-  }
-}
-
-.pm-field {
-  filter: none; // fixes Firefox autofill color
-  border: 1px solid var(--bordercolor-input, $input-defaut-border);
-  padding: em(6) em(16); // design want 34px height (actually 35 to avoid .5px)
-  background-color: var(--bgcolor-input, $pm-input-background);
-  border-radius: $global-border-radius;
-  color: var(--color-input, $pm-global-grey);
-  outline: 0;
-  height: $default-height-fields;
-  &.pm-field--tiny,
-  &.pm-field--small,
-  &.pm-field--large {
-    height: auto;
-  }
-  &:focus,
-  &.focus,
-  &:focus-within {
-    background-color: var(--bgcolor-main-area, $white);
-    box-shadow: 0 0 10px 0 $input-shadow-color;
-  }
-  &[aria-invalid="true"]:not(:focus),
-  &[aria-invalid="true"]:not(.ng-pristine) {
-    border-color: $pm-global-warning;
-    box-shadow: none;
-  }
-  &.is-valid:not(:focus) {
-    border-color: $pm-global-success;
-  }
-  &[disabled] {
-    color: rgba( $pm-global-grey, .3 );
-  }
-  &.w100 {
-    width: 100%;
-  }
-  &.wauto {
-    width: auto;
-  }
-  &:-moz-ui-invalid { // fixes some Firefox issues with HTML5 validation
-    box-shadow: none;
-  }
-
-  &[type="search"] {
-    background: url("#{$path-images}sprite-for-css-only.svg#css-search") 6px 50% no-repeat;
-    background-size: 1.5rem;
-    padding-left: 2em;
-    &::-webkit-search-cancel-button {
-      display: none;
-    }
-  }
-
-  &[type="number"] {
-      padding-right: .25em;
-  }
-}
-@if $rtl-option == true {
-  [dir="rtl"] {
-    [type="search"].pm-field {
-      padding-left: 0;
-      padding-right: 2em;
-      background: url("#{$path-images}sprite-for-css-only.svg#css-search-rtl") calc(100% - 6px) 50% no-repeat;
-    }
-  }
-}
-
-select.pm-field {
-  background: var(--bgcolor-input, $pm-input-background) url("#{$path-images}sprite-for-css-only.svg#css-caret") calc(100% - 6px) 50% no-repeat;
-  background-size: 1.5rem;
-  padding-left: 1em;
-  padding-right: 20px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  cursor: pointer;
-  &::-ms-expand {
-    display: none;
-  }
-  > optgroup {
-	background-color: var(--bgcolor-highlight, $pm-global-light);
-  }
-  &.pm-field--linkSelect {
-		border: 1px solid transparent;
-		padding-left: 0;
-		width: auto;
-		color: $pm-primary;
-		padding-right: 2.5rem;
-		@if ($pm-primary == $pm-blue) {
-			background-image: url("#{$path-images}sprite-for-css-only.svg#css-caret-primary-blue");
-		}
-		@else {
-			background-image: url("#{$path-images}sprite-for-css-only.svg#css-caret-primary-green");
-		}
-		&,
-		&:focus,
-		&.focus,
-		&:focus-within,
-		&:hover {
-			background-color: transparent;
-			box-shadow: none;
-		}
-		&:focus,
-		&.focus,
-		&:focus-within,
-		&:hover {
-			background-image: url("#{$path-images}sprite-for-css-only.svg#css-caret");
-			border-color: transparent;
-			text-decoration: underline;
-			color: $color-hover;
-		}
-
-		> * {
-			color: $pm-primary;
-		}
-  }
-}
-
-
-textarea {
-	min-height: $default-height-fields; // Equals pm-field inputs height
-	&.pm-field {
-		height: auto;
-	}
-}
-
-/* firefox bug */
-textarea[required].pm-field.field-pristine:invalid {
-  box-shadow: none;
-}
-
-@if $rtl-option == true {
-  [dir="rtl"] {
-    select.pm-field {
-      background-position: 6px 50%;
-      padding-right: 1em;
-      padding-left: 20px;
-    }
-  }
-}
-
-/* errors */
-.error-zone {
-  transition: transform .15s linear, max-height .15s linear;
-  transform: scaleY(1);
-  transform-origin: top center;
-  &:empty {
-    transform: scaleY(0);
-  }
-}
-
-// general rule: if focus is on the field => don't display error yet
-.pm-field-icon-container:focus-within + .error-zone,
-.pm-field:focus + .error-zone {
-  transform: scaleY(0);
-  max-height: 0;
-}
-
-
-
-
-/* sizes/other modifiers */
-.pm-field--tiny {
-  padding: em(6); // useful for address group
-}
-.pm-field--small {
-  padding: em(2) em(16);  // design want 26px height (actually 27 to avoid .5px)
-}
-.pm-field--large {
-  padding: em(10) em(16); // design want 42px height (actually 43 to avoid .5px)
-}
-.pm-field--highlight {
-  border-color: $pm-primary;
-  border-width: 2px;
-  background-color: rgba($pm-primary, .1);
-}
-
-/* checkboxes */
-.pm-checkbox-fakecheck {
-  display: inline-flex;
-  border: 1px solid var(--bordercolor-input, $pm-global-border);
-  border-radius: 2px;
-  min-width: 1.6rem;
-  width: 1.6rem;
-  height: 1.6rem;
-  margin: auto .5rem auto 0;
-}
-.item-icon-compact .pm-checkbox-fakecheck {
-  margin: auto;
-  background: var(--bgcolor-input, $white);
-}
-.pm-checkbox-fakecheck-img {
-  margin: auto;
-  width: 1rem;
-  transform: scale(0);
-  transition: .15s transform linear;
-}
-.pm-checkbox {
-  @extend .sr-only;
-  &:checked + .pm-checkbox-fakecheck {
-    .pm-checkbox-fakecheck-img {
-      transform: scale(1);
-    }
-  }
-  &:focus + .pm-checkbox-fakecheck {
-    box-shadow: 0 0 10px 0 $input-shadow-color;
-  }
-  &[disabled] + .pm-checkbox-fakecheck,
-  &:indeterminate + .pm-checkbox-fakecheck {
-    background: var(--bgcolor-disabled-checkboxes-radios, $pm-global-muted);
-  }
-  &:indeterminate + .pm-checkbox-fakecheck {
-      content: '';
-      width: 1.6rem;
-      height: 1.6rem;
-      background-image: url("#{$path-images}sprite-for-css-only.svg#css-dash");
-      background-repeat: no-repeat;
-  }
-}
-
-// exception for toolbar
-.pm-select-all {
-  .pm-checkbox-fakecheck {
-    border: 1px solid #585C67;
-    background-color: var(--bgcolor-aside-link, #484E59);
-  }
-  .pm-checkbox-fakecheck-img {
-    fill: var(--fillcolor-icons, $white);
-  }
-}
-
-
-/* radios */
-.pm-radio-fakeradio {
-  @extend .pm-checkbox-fakecheck;
-  border-radius: 50%;
-}
-.pm-radio--onTop .pm-radio-fakeradio {
-  margin-top: .25em;
-}
-
-.pm-radio-fakeradio::before {
-  content: '';
-  margin: auto;
-  width: .8rem;
-  height: .8rem;
-  border-radius: 50%;
-  background: transparent;
-  transform: scale(0);
-  transition: .15s transform linear;
-}
-
-.pm-radio {
-  @extend .sr-only;
-  &:checked + .pm-radio-fakeradio::before {
-    background: $pm-primary;
-    transform: scale(1);
-  }
-  &:focus + .pm-radio-fakeradio {
-    box-shadow: 0 0 10px 0 $input-shadow-color;
-  }
-  &[disabled] + .pm-radio-fakeradio {
-    background: var(--bgcolor-disabled-checkboxes-radios, $pm-global-muted);
-  }
-}
-
-
-/* toggle */
-$width: 5.5em !default;
-.pm-toggle-label {
-  margin-top: .15em;
-  // height: 2em;
-  width: $width;
-  display: inline-flex;
-  border: 1px solid var(--bordercolor-input, $pm-global-border);
-  background: var(--bgcolor-view-column-detail, $pm-input-background);
-  border-radius: 2rem;
-  padding: 2px;
-  position: relative;
-  transition: border-color .15s ease-out;
-  &::before {
-    content: '';
-    position: absolute;
-    width: calc( #{$width/2} - 2px);
-    transition: transform .25s ease, background-color .25s ease, border-color .25s linear;
-    border-radius: 2rem;
-    background: var(--bgcolor-context-bar, $pm-global-muted);
-    top: 2px;
-    left: 0;
-    bottom: 2px;
-    transform: translateX(2px);
-    border: 1px solid var(--bordercolor-input, $pm-global-border);
-  }
-  & > .pm-toggle-label-text {
-    align-self: center;
-    margin: 0;
-    text-align: center;
-    border-radius: 2rem;
-    padding: em(6) 0;
-    width: #{$width/2};
-    position: relative;
-    z-index: 2;
-    display: inline-flex;
-    & .pm-toggle-label-img {
-      transition: fill .1s steps(1, end);
-    }
-  }
-}
-@if $rtl-option == true {
-  [dir="rtl"] {
-    .pm-toggle-label {
-      &::before {
-        left: auto;
-        right: 0;
-        transform: translateX(-2px);
-      }
-    }
-  }
-}
-
-.pm-toggle-label-img {
-  margin: auto;
-  width: 1.6rem;
-  height: 1.6rem;
-  fill: var(--bordercolor-input, $black);
-  .pm-toggle-label--theme-toggle & {
-    fill: black;
-  }
-}
-
-// checked state
-.pm-toggle-checkbox {
-  @extend .invisible;
-  &:checked + .pm-toggle-label {
-    & > .pm-toggle-label-text:first-child .pm-toggle-label-img {
-      fill: var(--bordercolor-input, $black);
-    }
-    & > .pm-toggle-label-text:last-child .pm-toggle-label-img {
-      fill: $white;
-    }
-    &::before {
-      background: $pm-primary;
-      transform: translateX( #{$width/2} ) translateX(-2px);
-      // transform: translateX( calc( 2.5rem - 2px) ); does NOT work in IE11
-      border-color: $pm-primary-dark;
-    }
-  }
-  &:checked + .pm-toggle-label--theme-toggle { // Theme toggle inside user dropdown
-    & > .pm-toggle-label-text:last-child .pm-toggle-label-img {
-      fill: #fce988;
-    }
-    &::before {
-      background: rgba(black, .75);
-      border-color: rgba(white, .25);
-    }
-  }
-  &:focus + .pm-toggle-label {
-    box-shadow: 0 0 10px 0 $input-shadow-color;
-  }
-  &[disabled] + .pm-toggle-label  {
-    background: rgba($pm-global-muted, .6);
-    .pm-toggle-label-text {
-      opacity: .3;
-    }
-  }
-  &[aria-busy="true"] + .pm-toggle-label  {
-    border-color: $pm-global-border;
-    &::before {
-      border-color: transparent;
-      transform: translateX( #{$width/4} ) translateX(-2px);
-      background: transparent url(#{$path-images}loading-atom-smaller.svg) 50% 50% no-repeat;
-    }
-    & > .pm-toggle-label-text {
-      opacity: 0;
-    }
-  }
-
-}
-@if $rtl-option == true {
-  [dir="rtl"] {
-    .pm-toggle-checkbox {
-      &:checked + .pm-toggle-label {
-        &::before {
-          transform: translateX( -#{$width/2} ) translateX(2px);
-        }
-      }
-      &[aria-busy="true"] + .pm-toggle-label  {
-        &::before {
-          //background-color: $pm-primary;
-          transform: translateX( -#{$width/4} ) translateX(2px);
-        }
-      }
-    }
-  }
-}
-
-
-.pm-toggle-label--small {
-  margin-top: .25em;
-  font-size: .8em;
-  & .pm-toggle-label-img {
-    width: 1.3rem;
-    height: 1.3rem;
-  }
-}
-
-
-
-/* label */
-// $pm-label-width defined in global vars
-.pm-label {
-  padding-top: .5em;
-  width: var(--label-width, $pm-label-width);
-  padding-right: .5em;
-  max-width: 100%;
-  flex-shrink: 0;
-  &.pt0 {
-    padding-top: 0;
-  }
-  &.auto {
-    width: auto;
-  }
-  &--small {
-    font-size: 1.2rem;
-    line-height: 2;
-  }
-}
-
-// case for forms labelled only with icons (calendar popover, etc.)
-$pm-label-icon-width: 2.4em !default;
-.pm-form--iconLabels .pm-label {
-  width: $pm-label-icon-width;
-}
-
-/* container address */
-.pm-field-container--address {
-  margin-top: -1.6em;
-}
-
-
-/* field with icon */
-.pm-field-icon-container {
-  @extend .pm-field; // added focus-within inside on pm-field for this fake-field :)
-  min-height: calc(#{$default-height-fields} + 2px);
-  padding: 0;
-  > .pm-field {
-    border: 0;
-    width: calc(100% - 1.5em);
-  }
-  &:focus-within {
-    > .pm-field {
-      background-color: transparent;
-      box-shadow: none;
-      outline: 0;
-    }
-  }
-}
-.pm-field-icon-container--invalid:not(:focus-within) {
-  border-color: $pm-global-warning;
-  > .pm-field {
-    border-color: $pm-global-warning;
-  }
-}
-
-/* @protonmail.com field */
-.pm-field--username,
-.signLayout-container .pm-field--username.pm-field--username {
-	padding-right: var(--padding-right-field-above, 9em);
-}
-
-
-/* special case for very large inputs in modals, like rich text editor */
-.pm-modalContainer .pm-field-container--full {
-  width: calc(100% - var(--label-width, #{$pm-label-width}));
-}
-@include respond-to(1360) {
-  .pm-modalContainer .pm-field-container--full {
-      width: $field-container;
-  }
-}
-@include respond-to(830) {
-  .pm-modalContainer .pm-field-container--full {
-      width: calc(100% - var(--label-width, #{$pm-label-width}));
-  }
-}
-
-@include respond-to($breakpoint-small) {
-  .pm-modalContainer .pm-field-container--full {
-      width: 100%;
-  }
-}
-/* end special case */
-
-
-/* special stupid case for signup iframe challenge... not using same styles for the moment */
-.signLayout-container {
-	.pm-field--username {
-        padding: em(10) em(16); // design want 42px height (actually 41 to avoid .5px)
-    }
-}
diff --git a/templates/@theme-base/pm-styles/_pm-header-searchbar.scss b/templates/@theme-base/pm-styles/_pm-header-searchbar.scss
deleted file mode 100644
index 169dc02..0000000
--- a/templates/@theme-base/pm-styles/_pm-header-searchbar.scss
+++ /dev/null
@@ -1,110 +0,0 @@
-.searchbox-container {
-  width: $conversations-column-width;
-}
-.searchbox-container:empty {
-  width: 0;
-
-  // if there is no search bar, the next element (navigation) is pushed to the right (VPN/settings/etc.)
-
-  // & + .topnav-container {
-
-  //   & .topnav-list {
-  //     justify-content: flex-end;
-
-  //     & > li:last-child {
-  //       margin-left: 0;
-  //     }
-
-  //   }
-
-  // }
-}
-.searchbox-container input::placeholder {
-  color: var(--color-standard-text, rgba(255, 255, 255, .6) );
-}
-.searchbox-field[type="search"] {
-  height: 4rem;
-  background-color: var(--bgcolor-searchbox-field, rgba($black, .3));
-  background-image: none;
-  border-color: var(--main-bg-color, $black);
-  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05);
-  background-size: 2rem;
-  padding-left: calc(2em + 2rem);
-  padding-right: 4rem;
-  color: var(--color-standard-text, $white);
-  border-width: 0;
-}
-.searchbox-search-button {
-  position: absolute;
-  left: 1em;
-  top: 0;
-  bottom: 0;
-  & > .searchbox-search-button-icon {
-    width: 2.2rem;
-    height: 2.2rem;
-    fill: var(--fillcolor-icons, $white);
-  }
-}
-.searchbox-advanced-search-button {
-  position: absolute;
-  right: .25em;
-  top: .5em;
-  bottom: .5em;
-  padding: 0 .5rem;
-  border-radius: 50%;
-  &:focus,
-  &:hover,
-  &:active {
-    background-color: $pm-global-altgrey;
-  }
-  & > .searchbox-advanced-search-icon {
-    fill: var(--fillcolor-icons, $white);
-  }
-}
-
-.searchbox-container--reset-advanced {
-  .searchbox-field[type="search"] {
-    padding-right: 6.25rem;
-  }
-  [type="reset"].searchbox-advanced-search-button {
-    right: 2.75rem;
-  }
-}
-
-@include respond-to($breakpoint-small) {
-  .searchbox-advanced-search-button {
-    position: static;
-  }
-}
-
-@if $rtl-option == true {
-  [dir="rtl"] {
-    .searchbox-field[type="search"] {
-      padding-right: calc(2em + 2rem);
-      padding-left: 4rem;
-      background-image: none;
-      background-size: 2rem;
-    }
-    .searchbox-search-button-icon {
-      @extend .mirror;
-    }
-    .searchbox-search-button {
-      right: 1em;
-      left: auto;
-    }
-    .searchbox-advanced-search-button {
-      right: auto;
-      left: 0;
-    }
-    .searchbox-container--reset-advanced {
-      .searchbox-field[type="search"] {
-        padding-right: calc(2em + 2rem);
-        padding-left: 6rem;
-      }
-      .searchbox-advanced-search-button {
-        right: auto;
-        left: 2.5rem;
-      }
-    }
-  }
-}
diff --git a/templates/@theme-base/pm-styles/_pm-header-topnav.scss b/templates/@theme-base/pm-styles/_pm-header-topnav.scss
deleted file mode 100644
index 64b60db..0000000
--- a/templates/@theme-base/pm-styles/_pm-header-topnav.scss
+++ /dev/null
@@ -1,143 +0,0 @@
-.topnav-link {
-	border: 1px solid transparent;
-	border-radius: $global-border-radius;
-	padding: 1.25rem 1.75rem;
-	color: var(--color-nav-link, $white);
-	text-decoration: none;
-
-	&:focus,
-	&:hover,
-	&:active,
-	&[aria-current="true"] {
-		background-color:  $navigation-hover-bg-color;
-		color: inherit;
-		text-decoration: none;
-	}
-
-	&[aria-current="true"] {
-		font-weight: bold;
-	}
-
-	& > svg {
-		fill: var(--fillcolor-icons, $white);
-	}
-	&--blackfriday:before {
-		content: '';
-		position: absolute;
-		width: 7px;
-		height: 7px;
-		background: $pm-global-warning;
-		border-radius: 50%;
-		left: calc(1.75rem + 15px);
-		top: calc(50% - 14px);
-	}
-}
-
-
-@if $rtl-option == true {
-	[dir="rtl"] {
-		.topnav-list {
-			margin-left: 0;
-			margin-right: 1em;
-		}
-		.topnav-icon {
-			margin-right: 0;
-			margin-left: .5em;
-		}
-	}
-}
-
-/* Decrease margins (was 1em) */
-@include respond-to(1500) {
-	.topnav-list {
-		> li {
-			margin-right: 1px;
-		}
-	}
-}
-
-
-@include respond-to(1300) {
-	.topnav-list--four-elements {
-		.navigation-title {
-			// equivalent of .sr-only, but impossible to extend in a breakpoint
-			border: 0;
-			clip: rect(0 0 0 0);
-			height: 1px;
-			margin: -1px;
-			overflow: hidden;
-			padding: 0;
-			position: absolute;
-			width: 1px;
-		}
-
-		.topnav-icon {
-			margin-right: 0;
-
-			&.expand-caret {
-				margin-left: .25em;
-			}
-		}
-	}
-}
-
-@include respond-to(870) {
-	.topnav-list--four-elements {
-
-		.topnav-link {
-			padding-left: .5rem;
-			padding-right: .5rem;
-		}
-		.topnav-link--blackfriday:before {
-			left: calc(.5rem + 15px);
-		}
-	}
-}
-
-@include respond-to(1100) {
-	.navigation-title {
-		// equivalent of .sr-only, but impossible to extend in a breakpoint
-		border: 0;
-		clip: rect(0 0 0 0);
-		height: 1px;
-		margin: -1px;
-		overflow: hidden;
-		padding: 0;
-		position: absolute;
-		width: 1px;
-	}
-
-	.topnav-icon {
-		margin-right: 0;
-	}
-}
-
-
-@include respond-to($breakpoint-small) {
-	.topnav-icon {
-		width: 24px;
-		height: 24px;
-	}
-	.topnav-list--four-elements .topnav-link {
-		padding-left: 1.75rem;
-		padding-right: 1.75rem;
-	}
-	.topnav-list--four-elements .topnav-link--blackfriday:before,
-	.topnav-link--blackfriday:before {
-		left: calc(1.75rem + 22px);
-		top: calc(50% - 18px);
-	}
-}
-
-@include respond-to($breakpoint-tiny) {
-	.topnav-list--four-elements .topnav-link,
-	.topnav-link {
-		padding-left: .5rem;
-		padding-right: .5rem;
-	}
-	.topnav-list--four-elements .topnav-link--blackfriday:before,
-	.topnav-link--blackfriday:before {
-		left: calc(.5rem + 22px);
-	}
-}
-
diff --git a/templates/@theme-base/pm-styles/_pm-input-button.scss b/templates/@theme-base/pm-styles/_pm-input-button.scss
deleted file mode 100644
index 2a0f313..0000000
--- a/templates/@theme-base/pm-styles/_pm-input-button.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.input-button.pm-button {
-    width: 2.5em;
-    padding: em(6); // Same as inputs
-}
-
-.input-button-input {
-    &:focus + .input-button {
-        // Same as buttons
-        box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2);
-    }
-
-    &:checked + .input-button {
-        // Need !important because current dark mode management. Remove those as soon as possible.
-        background-color: $pm-primary !important;
-        border-color: $pm-primary !important;
-    }
-
-    &:checked:not(:active) + .input-button {
-        // Need !important because current dark mode management. Remove those as soon as possible.
-        color: $white !important;
-    }
-
-    &:active + .input-button {
-        // Need !important because current dark mode management. Remove those as soon as possible.
-        border-color: $pm-global-border !important;
-    }
-}
diff --git a/templates/@theme-base/pm-styles/_pm-label-stack.scss b/templates/@theme-base/pm-styles/_pm-label-stack.scss
deleted file mode 100644
index abba58d..0000000
--- a/templates/@theme-base/pm-styles/_pm-label-stack.scss
+++ /dev/null
@@ -1,134 +0,0 @@
-.label-stack {
-	--item-wide: 10em;
-	--item-narrow: 1.25em;
-	--item-scale: .7;
-
-	font-weight: normal; // Overrides when unread email context
-
-	&.mw100 {
-		--item-wide: 100%;
-	}
-
-	&-item,
-	&-overflow-count {
-		border-radius: 1em;
-		line-height: 1;
-	}
-
-	&-item {
-		max-width: var(--item-wide);
-		margin: .125em;
-		background-color: var(--color, currentColor);
-
-		&-button,
-		&-delete {
-			color: white;
-		}
-
-		&-button {
-			padding: .125em .5em;
-			text-align: left;
-		}
-
-		&-delete {
-			margin-right: .5em;
-
-			&-icon {
-				display: block;
-			}
-		}
-	}
-
-	&-overflow-count {
-		background-color: rgba(black, .5);
-		margin-left: .125em;
-		cursor: pointer;
-
-		& > * {
-			display: block;
-			padding: .125em .375em .125em .25em;
-			color: white;
-		}
-	}
-
-	&:not(.is-stacked) {
-		margin: -.125em;
-
-		.label-stack-item {
-			&:hover,
-			&:focus-within {
-				box-shadow: 0 0 em(5) 0 rgba(black, .2); // Same hover style than buttons
-			}
-		}
-	}
-
-	&.is-stacked {
-		overflow: hidden;
-		align-items: baseline;
-		flex-wrap: nowrap;
-
-		.label-stack-item {
-			overflow: hidden;
-			margin: 0;
-			transition: transform .1s .2s easing(easeOutQuart),
-			            max-width .2s 0s easing(easeOutQuart);
-
-			&:hover,
-			&:focus-within,
-			&:first-child {
-				transition-delay: 0s, .075s;
-			}
-
-			&:not(:first-child) {
-				--button-opacity: 0;
-				max-width: var(--item-narrow);
-				transform: scale(var(--item-scale));
-			}
-
-			&-button,
-			&-delete-icon {
-				transition: opacity .2s .1s easing(easeOutQuart);
-			}
-
-			&-button {
-				opacity: var(--button-opacity, 1);
-			}
-
-			&-delete {
-				overflow: hidden;
-
-				&-icon {
-					opacity: var(--button-opacity, 1);
-				}
-			}
-		}
-
-		@include respond-to($breakpoint-small, 'max') {
-			.label-stack-item-delete {
-				display: none;
-			}
-		}
-
-		@include respond-to($breakpoint-small, 'min') {
-			&:hover,
-			&:focus-within {
-				.label-stack-item {
-					// Avoid gitch effect on first-child
-					&:first-child:not(:hover):not(:focus-within) {
-						--button-opacity: 0;
-						max-width: var(--item-narrow);
-						transform: scale(var(--item-scale));
-						transition-delay: .2s, 0s;
-					}
-
-					&:not(:first-child):hover,
-					&:not(:first-child):focus-within {
-						--button-opacity: 1;
-						max-width: var(--item-wide);
-						transform: scale(1);
-					}
-				}
-			}
-		}
-	}
-}
diff --git a/templates/@theme-base/pm-styles/_pm-layout.scss b/templates/@theme-base/pm-styles/_pm-layout.scss
deleted file mode 100644
index 5ded72d..0000000
--- a/templates/@theme-base/pm-styles/_pm-layout.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/* for 1px-high hr */
-hr {
-  background-color: $color-hr;
-  border: 0;
-  color: $color-hr;
-  height: $hr-height;
-  margin: 0 0 1em;
-  padding: 0;
-}
-
-/* rounded corners */
-.rounded { border-radius: $global-border-radius; }
-.rounded50 { border-radius: 50%; }
-.rounded1e { border-radius: 1em; }
-.rounded0 { border-radius: 0; }
-.rounded0-left { border-top-left-radius: 0; border-bottom-left-radius: 0; }
-.rounded0-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }
-
-kbd {
-  @extend .rounded;
-  background-color: var(--bgcolor-main-area, $pm-global-light);
-  border: 1px solid var(--bordercolor-input, $pm-global-border);
-}
diff --git a/templates/@theme-base/pm-styles/_pm-light-theme.scss b/templates/@theme-base/pm-styles/_pm-light-theme.scss
deleted file mode 100644
index b8bf232..0000000
--- a/templates/@theme-base/pm-styles/_pm-light-theme.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@import "../reusable-components/design-system-config";
-
-$main-bg-color: $pm-global-light;
-$secondary-bg-color: $white;
-$bgcolor-searchbox-field: $white;
-$bgcolor-spacebar: rgba(0, 0, 0, 0.05);
-$bgcolor-aside-link: #e3e4e7;
-$bgcolor-toolbar: $pm-global-light;
-$fillcolor-logo: $pm-blue;
-$fillcolor-icons: $pm-global-grey;
-$color-nav-link: $pm-global-grey;
-$color-nav-active: $pm-blue-dark;
-$color-standard-text: $pm-global-grey;
-$boxshadow-main: 0 0 15px 0 rgba(0, 0, 0, 0.1);
-
-@import "./pm-theme-config";
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-loader-animation.scss b/templates/@theme-base/pm-styles/_pm-loader-animation.scss
deleted file mode 100644
index 79d4682..0000000
--- a/templates/@theme-base/pm-styles/_pm-loader-animation.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-// Init values
-$animation-duration       : 3s !default;
-$second-circle-time-offset: .125s !default;
-
-// We need to adjust animation for each size.
-$stroke-map: (
-	default: 4.5,
-	bold   : 6.5,
-	xbold : 15
-) !default;
-
-.loadingAnimation {
-	// We need a different duration than each circle for the whole loader
-	// to have an animation that seems visually "random", so here, duration +20% and ease.
-	animation: loaderRotation #{$animation-duration * 1.2} ease-in-out infinite;
-	will-change: transform;
-
-	@keyframes loaderRotation {
-		from { transform: rotate(0); }
-		to   { transform: rotate(360deg); }
-	}
-
-	&-circle {
-		transform-origin: 50%;
-		fill: none;
-		stroke: currentColor;
-		stroke-width: map-get($stroke-map, default);
-		will-change: transform;
-		animation: $animation-duration linear infinite;
-
-		&:nth-of-type(1) {
-			animation-name: loaderOrbitX;
-		}
-
-		&:nth-of-type(2) {
-			animation-name: loaderOrbitY;
-			animation-delay: $second-circle-time-offset;
-		}
-	}
-
-	@each $name, $value in $stroke-map {
-
-		@if $name != 'default' {
-			&.is-#{$name} &-circle {
-				stroke-width: $value;
-
-				&:nth-of-type(1) {
-					animation-name: #{'loaderOrbitX-' + $name};
-				}
-
-				&:nth-of-type(2) {
-					animation-name: #{'loaderOrbitY-' + $name};
-				}
-			}
-		}
-
-		@each $axis in (X,Y) {
-			@keyframes #{'loaderOrbit' + $axis + if($name == 'default', '', '-' + $name)} {
-				from {
-					transform: #{'rotate' + $axis + '(0)'};
-					stroke-width: $value;
-				}
-				25% {
-					stroke-width: $value * 2;
-				}
-				50% {
-					stroke-width: $value;
-				}
-				75% {
-					stroke-width: $value * 2;
-				}
-				to {
-					transform: #{'rotate' + $axis + '(360deg)'};
-					stroke-width: $value;
-				}
-			}
-		}
-	}
-}
diff --git a/templates/@theme-base/pm-styles/_pm-loadingcontent.scss b/templates/@theme-base/pm-styles/_pm-loadingcontent.scss
deleted file mode 100644
index 0cf480b..0000000
--- a/templates/@theme-base/pm-styles/_pm-loadingcontent.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-[aria-busy="true"] {
-	background-image: url(#{$path-images}loading-atom-smaller.svg);
-	background-position: 50% 50%;
-	background-repeat: no-repeat;
-}
-
-button[aria-busy="true"] {
-	padding-left: em(5);
-	padding-right: em(27);
-	background-image: url(#{$path-images}loading-atom-smaller-disabled.svg);
-	background-position: calc(100% - .25em) 50%;
-	background-size: 1.5em;
-	background-repeat: no-repeat;
-}
-
-.pm-button--small[aria-busy="true"] {
-	padding-left: em(2);
-	padding-right: em(22);
-	background-size: 1.25em;
-	background-position: calc(100% - .125em) 50%;
-}
-
-tr[aria-busy="true"] {
-	background-image: none;
-
-	td::after {
-		content: '\00a0'; // Force a height with default line height
-		pointer-events: none;
-		visibility: hidden;
-	}
-}
-
-tr[aria-busy="true"] td,
-td[aria-busy="true"] {
-	position: relative;
-	background-image: none;
-	&::before {
-		content: '';
-		position: absolute;
-		top: 0;
-		right: 0;
-		left: 0;
-		bottom: 0;
-		background: var(--bgcolor-main-area, white) url(#{$path-images}loading-atom-smaller.svg) 50% 50% no-repeat;
-	}
-}
-
-svg[aria-busy="true"] {
-	& > * {
-		visibility: hidden;
-	}
-}
-
-.progressive[aria-busy="true"] {
-	position: relative;
-	background-image: none;
-	&::before {
-		content: '';
-		position: absolute;
-		top: 0;
-		right: 0;
-		left: 0;
-		bottom: 0;
-		background-image: none;
-		animation: backgroundLoading 1s linear infinite alternate;
-	}
-}
-
-@keyframes backgroundLoading {
-	0% {
-		background-color: $white;
-	}
-	100% {
-		background-color: #eee;
-	}
-}
diff --git a/templates/@theme-base/pm-styles/_pm-meterbar.scss b/templates/@theme-base/pm-styles/_pm-meterbar.scss
deleted file mode 100644
index b717caf..0000000
--- a/templates/@theme-base/pm-styles/_pm-meterbar.scss
+++ /dev/null
@@ -1,88 +0,0 @@
-@mixin meterbar-size($size: 1.5rem) {
-	height: $size;
-	border-radius: #{$size/2};
-
-	&::-moz-meter-bar {
-		border-radius: #{$size/2};
-	}
-
-	&::-webkit-meter-bar {
-		height: $size; // Chrome 83 does not make meter and its bar the same height -_-v
-	}
-
-	&::-webkit-meter-optimum-value {
-		border-radius: #{$size/2};
-	}
-
-	&::-webkit-meter-suboptimum-value {
-		border-radius: #{$size/2};
-	}
-
-	&::-webkit-meter-even-less-good-value {
-		border-radius: #{$size/2};
-	}
-}
-
-.meterbar {
-	@include meterbar-size;
-
-	width: 100%;
-	background: var(--bgcolor-meterbar, $pm-global-muted);
-
-	//-webkit-appearance: none; // Can't. Well, because Chrome.
-	// -moz-appearance: none;
-	/* autoprefixer: ignore next */
-	// appearance: none;
-
-
-	&::-webkit-meter-bar {
-		border: none;
-		background: none;
-	}
-
-	&::-moz-meter-bar {
-		display: inherit;
-	}
-
-	&:not(#{&}--primary) {
-		&::-webkit-meter-optimum-value {
-			background: $pm-global-success;
-		}
-		&::-webkit-meter-suboptimum-value {
-			background: $pm-global-attention;
-		}
-		&::-webkit-meter-even-less-good-value {
-			background: $pm-global-warning;
-		}
-
-		&:-moz-meter-optimum::-moz-meter-bar {
-			background: $pm-global-success;
-		}
-		&:-moz-meter-sub-optimum::-moz-meter-bar {
-			background: $pm-global-attention;
-		}
-		&:-moz-meter-sub-sub-optimum::-moz-meter-bar {
-			background: $pm-global-warning;
-		}
-	}
-
-	&--primary {
-		&::-webkit-meter-optimum-value {
-			background: $pm-primary;
-		}
-		&::-webkit-meter-suboptimum-value {
-			background: $pm-primary;
-		}
-		&::-webkit-meter-even-less-good-value {
-			background: $pm-primary;
-		}
-
-		&::-moz-meter-bar {
-			background: $pm-primary;
-		}
-	}
-
-	&.is-thin {
-		@include meterbar-size(.375em);
-	}
-}
diff --git a/templates/@theme-base/pm-styles/_pm-mini-calendar.scss b/templates/@theme-base/pm-styles/_pm-mini-calendar.scss
deleted file mode 100644
index 65368bd..0000000
--- a/templates/@theme-base/pm-styles/_pm-mini-calendar.scss
+++ /dev/null
@@ -1,177 +0,0 @@
-$minicalendar-day-color: $black !default;
-$minicalendar-day-color-on-dark-background: $white !default;
-$minicalendar-fontsize: 1.2rem !default;
-$minicalendar-cell-size: 2em !default;
-$minicalendar-bg-color-range-selection: #51555F !default;
-
-.minicalendar {
-    font-size: $minicalendar-fontsize;
-}
-
-.minicalendar-grid--displayWeekNumber {
-    display: grid;
-    grid-template-columns: 30px auto;
-    grid-template-rows: auto;
-}
-
-.minicalendar-weekdays,
-.minicalendar-weeknumbers,
-.minicalendar-day--inactive-month {
-    opacity: .4;
-}
-
-.minicalendar-weekdays {
-    display: grid;
-    grid-template-columns: repeat( var(--minicalendar-weekdays-numberOfDaysInWeek, 7), 1fr);
-    grid-template-rows: 1fr;
-}
-.minicalendar-days {
-    display: grid;
-    grid-template-columns: repeat( var(--minicalendar-days-numberOfDays, 7), 1fr);
-    grid-template-rows: repeat( var(----minicalendar-days-numberOfWeeks, 4), 1fr);
-    grid-gap: 1px 0px;
-}
-
-.minicalendar-day {
-    color: var(--color-main-area, $minicalendar-day-color);
-}
-.minicalendar-days {
-    user-select: none;
-}
-
-.minicalendar-weekdays {
-    border-bottom: 1px dotted $pm-global-border;
-}
-
-.minicalendar-weeknumbers > span {
-
-    &:first-of-type {
-        border-bottom: 1px dotted $pm-global-border;
-    }
-    &:not(:first-of-type) {
-        min-height: $minicalendar-cell-size;
-    }
-
-}
-.minicalendar-weeknumbers-heading {
-    display: inline-block;
-    transform: scale(.7);
-}
-
-.minicalendar-day {
-    position: relative;
-    min-width: #{$minicalendar-cell-size + 0.35em};
-    min-height: #{$minicalendar-cell-size + 0.35em};
-    border-radius: 50%;
-    &:focus,
-    &:hover {
-        background: rgba($minicalendar-bg-color-range-selection, .25);
-    }
-}
-
-.minicalendar-grid--displayWeekNumber .minicalendar-day {
-    min-width: $minicalendar-cell-size;
-    min-height: $minicalendar-cell-size;
-}
-
-.minicalendar-day[aria-current="date"]::before {
-    content: attr(data-current-day);
-    speak: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    font-weight: bold;
-    line-height: 2.3;  // check modifier below when no week displayed
-    color: $white;
-    background: $calendar-today-color;
-    border-radius: 50%;
-}
-.minicalendar-day[aria-current="date"][aria-pressed=true]::before {
-    background: $calendar-selected-day-color;
-}
-// fix in case of range selection in responsive view
-$mini-calendar-currentDay-size: 2.5em !default;
-.minicalendar-day--range.minicalendar-day[aria-current="date"]::before {
-    left: calc(50% - #{$mini-calendar-currentDay-size/2});
-    max-width: $mini-calendar-currentDay-size;
-}
-
-.minicalendar-grid--displayWeekNumber .minicalendar-day {
-    &[aria-current="date"]::before {
-        line-height: 2;
-    }
-}
-
-.minicalendar--onDarkBackground {
-    .minicalendar-day {
-        color: $minicalendar-day-color-on-dark-background;
-        &:focus,
-        &:hover {
-            background: rgba($minicalendar-bg-color-range-selection, .8);
-        }
-    }
-}
-
-.minicalendar-day[aria-pressed=true] {
-     color: $white;
-     background: $calendar-selected-day-color;
-     border-radius: 50%;
-}
-
-$minicalendar-day-marker-size: 3px !default;
-.minicalendar-day--marker {
-    position: absolute;
-    bottom: 1px;
-    left: calc(50% - #{$minicalendar-day-marker-size/2});
-    height: $minicalendar-day-marker-size;
-    width: $minicalendar-day-marker-size;
-    background-color: $pm-primary;
-    border-radius: 50%;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.minicalendar-day[aria-pressed=true],
-.minicalendar-day[aria-pressed=date] {
-    .minicalendar-day--marker {
-        background-color: $white;
-    }
-}
-
-.minicalendar-day--range {
-    width: 100%;
-}
-
-.minicalendar-day--range-bound {
-    background: $pm-primary;
-}
-
-.minicalendar-day--range[aria-pressed=true],
-.minicalendar-day--range[aria-pressed=true]:hover,
-.minicalendar-day--range[aria-pressed=true]:focus {
-    background: $minicalendar-bg-color-range-selection;
-    border-radius: 0;
-}
-
-// ranges
-.minicalendar {
-    .minicalendar-day--range-bound-begin,
-    .minicalendar-day--range-bound-begin:hover,
-    .minicalendar-day--range-bound-begin:focus {
-        border-top-left-radius: 40%;
-        border-bottom-left-radius: 40%;
-    }
-    .minicalendar-day--range-bound-end,
-    .minicalendar-day--range-bound-end:hover,
-    .minicalendar-day--range-bound-end:focus  {
-        border-top-right-radius: 40%;
-        border-bottom-right-radius: 40%;
-    }
-    .minicalendar-day--range-bound-begin.minicalendar-day--range-bound-end {
-        border-radius: 50%;
-    }
-}
-
diff --git a/templates/@theme-base/pm-styles/_pm-modal.scss b/templates/@theme-base/pm-styles/_pm-modal.scss
deleted file mode 100644
index 5ea41aa..0000000
--- a/templates/@theme-base/pm-styles/_pm-modal.scss
+++ /dev/null
@@ -1,287 +0,0 @@
-/*
- * Modals
- */
-/* overlay covers everything */
-$modal-width: 50% !default;
-$modal-max-width: 70rem !default;
-
-$modal-breakpoint-width: 52em !default;
-$modal-breakpoint-height: 22em !default;
-$breakpoint-low-height-modal: em(500, 16) !default;
-
-$modal-max-height: 80% !default;
-
-$modal-wider-width: 70% !default;
-$modal-wider-max-width: 100rem !default;
-
-$modal-full-dimension: 98% !default;
-$modal-full-max-width: 150rem !default;
-
-$modal-smaller-width: 28em !default;
-
-.pm-modalOverlay {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  background: rgba( 0, 0, 0, .4 );
-  z-index: 666;
-  animation: pm-modalOverlayIn ease .5s 1 normal ;
-}
-
-.pm-modalContainer {
-  position: fixed;
-  top: 0; left: 0; bottom: 0; right: 0;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  z-index: 666;
-  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
-}
-
-.pm-modalContainer--inBackground {
-  z-index: 600;
-}
-
-.pm-modalOverlayOut {
-  animation: pm-modalOverlayOut ease .5s 1  normal ;
-  animation-fill-mode: forwards;
-}
-
-
-@keyframes pm-modalOverlayIn {
-  0% {
-    background: rgba( 0, 0, 0, 0 );
-  }
-  100% {
-    background: rgba( 0, 0, 0, .4 );
-  }
-}
-
-@keyframes pm-modalOverlayOut {
-  0% {
-    background: rgba( 0, 0, 0, .4 );
-  }
-  100% {
-    background: rgba( 0, 0, 0, 0 );
-  }
-}
-
-.pm-modal {
-  position: relative;
-  width: $modal-max-width;
-  max-height: $modal-max-height;
-  max-width: $modal-max-width;
-  background: var(--bgcolor-main-area, $white);
-  color: var(--color-main-area, $pm-global-grey);
-  padding: 0;
-  overflow: hidden;
-  border-radius: $global-border-radius;
-  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.3);
-  animation: pm-modalIn ease .15s 1 normal;
-  animation-fill-mode: both;
-  animation-delay: .1s; // stupid fix for Safari crazy display bug
-  margin: auto;
-  display: flex;
-  flex-direction: column;
-  cursor: default;
-}
-
-@keyframes pm-modalIn {
-  0% {
-    opacity: 0;
-	  transform: scale(.8);
-  }
-  100% {
-    opacity: 1;
-	  transform: scale(1);
-  }
-}
-
-@keyframes pm-modalOut {
-  0% {
-    opacity: 1;
-	  transform: scale(1);
-  }
-  100% {
-    opacity: 0;
-	  transform: scale(.8);
-  }
-}
-
-.pm-modalOut {
-  animation: pm-modalOut ease .15s 1 normal ;
-  animation-fill-mode: both;
-}
-
-.pm-modal--auto {
-  width: auto;
-}
-.pm-modal--smaller {
-  width: $modal-smaller-width;
-}
-.pm-modal--wider {
-  width: $modal-wider-width;
-  max-width: $modal-wider-max-width;
-}
-.pm-modal--full {
-  width: $modal-full-dimension;
-  max-width: $modal-full-dimension;
-  height: $modal-full-dimension;
-  max-height: $modal-full-dimension;
-  margin: 1%;
-}
-.pm-modal--heightAuto {
-	height: auto;
-	max-height: $modal-full-dimension;
-	margin-top: 1%;
-	margin-bottom: 1%;
-}
-
-
-
-
-.pm-modalClose {
-  position: absolute;
-  right: .5rem;
-  top: .5rem;
-  @extend .flex;
-  overflow: hidden;
-  background: transparent;
-  border-radius: 1em;
-  border: 0;
-  font-size: 1em;
-  padding: 0;
-  line-height: 1;
-  cursor: pointer;
-  z-index: 1;
-}
-
-// not defined, left this in case of
-// .pm-modalClose:focus,
-// .pm-modalClose:hover,
-// .pm-modalClose:active {
-// }
-// .pm-modalClose:hover,
-// .pm-modalClose:active {
-// }
-@if $rtl-option == true {
-  [dir="rtl"] {
-    .pm-modalClose {
-      left: .5rem;
-      right: auto;
-    }
-  }
-}
-
-.pm-modalContent {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  overflow: auto;
-  position: relative;
-}
-
-.pm-modalHeader {
-  padding: rem(30) rem(30) rem(15) rem(30);
-  flex: 0;
-}
-.pm-modalTitle {
-  font-size: 2.2rem;
-  line-height: 1.5;
-  margin-bottom: 0;
-}
-.pm-modalFooter {
-  padding: rem(15) rem(30) rem(30);
-  flex: 0;
-
-  min-height: 7.9rem; // only for Safari the ugly
-  [class*="pm-button"] { // only for Safari the ugly
-    min-height: 3.4rem;
-  }
-}
-
-.pm-modalContentInner {
-  position: relative;
-  overflow-x: hidden;
-  overflow-y: auto;
-  flex: 1 1 auto;
-  padding: 0 rem(30);
-
-  background: var(--bgcolor-main-area, $white) no-repeat;
-
-  > p:first-child {
-    margin-top: 0;
-  }
-  > p:last-child {
-	margin-bottom: 0;
-  }
-}
-
-// adaptation for labels
-$pm-label-shorter-width: 10em !default;
-.pm-modal--shorterLabels .pm-label {
-  width: var(--label-shorter-width, $pm-label-shorter-width);
-}
-
-@include respond-to($breakpoint-small) {
-  .pm-modal--shorterLabels .onmobile-flex-column .pm-label {
-    width: 100%;
-  }
-}
-
-
-// modal with title visually hidden
-.pm-modalHeader--no-title {
-	padding-top: 2rem;
-}
-
-
-// single button on right
-.pm-modalFooter [class*="pm-button"]:only-child {
-  margin-left: auto;
-}
-@if $rtl-option == true {
-  [dir="rtl"] {
-    .pm-modalFooter [class*="pm-button"]:only-child {
-      margin-right: auto;
-      margin-left: 0;
-    }
-  }
-}
-
-@media (max-height: $breakpoint-low-height-modal) {
-  .pm-modal {
-    max-height: $modal-full-dimension;
-  }
-  .pm-modalFooter {
-	padding-bottom: 1rem;
-	min-height: 5.9rem; // only for Safari the ugly
-  }
-  .pm-modalHeader {
-    padding-top: 1rem;
-    padding-bottom: .5rem;
-  }
-}
-
-
-// small viewports
-@media (max-width: $modal-breakpoint-width) {
-  .pm-modal {
-    margin: 1%;
-    min-width: 0;
-    width: 98%;
-    max-width: 98%;
-    max-height: 98%;
-    align-self: center;
-  }
-}
-
-@include respond-to($breakpoint-large, 'min') {
-	.pm-modal--full {
-		max-width: $modal-full-max-width;
-		margin-left: auto;
-		margin-right: auto;
-	}
-}
diff --git a/templates/@theme-base/pm-styles/_pm-navigation.scss b/templates/@theme-base/pm-styles/_pm-navigation.scss
deleted file mode 100644
index d8e7e0a..0000000
--- a/templates/@theme-base/pm-styles/_pm-navigation.scss
+++ /dev/null
@@ -1,180 +0,0 @@
-/*
- * navigation
- */
-$navigation-fillcolor-icons: #6D7178 !default;
-$padding-left-link: 2rem !default;
-
-.navigation__link,
-.navigation__link--groupHeader {
-  padding: .95rem 1em .95rem $padding-left-link;
-  color: var(--color-nav-link, $white);
-  text-decoration: none;
-  display: block;
-}
-
-@if $rtl-option == true {
-  [dir="rtl"] {
-    .navigation__link,
-    .navigation__link--groupHeader {
-      padding: .95rem $padding-left-link .95rem 1em;
-    }
-  }
-}
-
-.navigation__icon {
-  color: var(--fillcolor-icons, $navigation-fillcolor-icons);
-}
-
-.navigation__refresh {
-  display: none;
-}
-
-.navigation__link:focus,
-.navigation__link:hover {
-  background: $navigation-hover-bg-color;
-  color: var(--color-nav-link, $pm-global-light);
-  text-decoration: none;
-}
-[aria-current="page"].navigation__link {
-  background: $navigation-hover-bg-color;
-  color: var(--color-nav-active, $white);
-  font-weight: bold;
-
-  &:hover .navigation__icon:not(.navigation__icon--expand),
-  .navigation__icon {
-    color: var(--color-nav-active, $white);
-  }
-
-  .navigation__refresh {
-    display: inline-flex;
-  }
-
-}
-
-// labels/folders sections
-.navigation__link--groupHeader-link {
-  color: var(--color-nav-link, $white);
-  .navigation__icon--expand {
-    color: var(--fillcolor-icons, $navigation-fillcolor-icons);
-  }
-  //&:focus, // gimme focus-visible !!!!
-  &:hover {
-    color: var(--color-nav-link, $pm-global-light);
-    .navigation__icon {
-		color: var(--fillcolor-icons, $white);
-    }
-  }
-}
-
-/* expand hover only on button + groupHeader */
-.navigation__link--groupHeader-link {
-  color: var(--fillcolor-icons, $navigation-fillcolor-icons);
-}
-.navigation__link--expand:focus,
-.navigation__link--expand:hover,
-//.navigation__link--groupHeader-link:focus,
-.navigation__link--groupHeader-link:hover {
-  .navigation__icon--expand {
-    color: var(--fillcolor-icons, $white);
-  }
-}
-
-/* items counters */
-.navigation__counterItem {
-  background: $pm-primary;
-  color: $white;
-  font-size: 1.1rem;
-  padding: 0.2rem .4em 0; // em value for top gives non rounded value, so rem
-  border-radius: 1.1rem;
-  line-height: 1;
-  height: 1.6rem;
-  font-variant: tabular-nums;
-  &:empty {
-      display: none; // removes a bug on Webkit
-  }
-}
-
-
-/* Sub folders */
-.navigation__item {
-  [data-level="1"] {
-    padding-left: 1em;
-  }
-  [data-level="2"] {
-    padding-left: 2em;
-  }
-}
-
-
-
-/* Sub-navigation */
-.navigation__sublist {
-  margin-left: $padding-left-link;
-  overflow: hidden;
-  opacity: 1;
-  transition: visibility 0s ease, transform .5s ease, opacity .5s ease, max-height .5s ease ;
-  transform-origin: top center;
-  transform: scale(1,1);
-  max-height: 44em;
-  visibility: visible;
-  transition-delay: 0s;
-  &[aria-hidden="true"] {
-    display: block;
-    opacity: 0;
-    max-height: 0;
-    visibility: hidden;
-    transform: scale(1,0);
-    transition-duration: 0s, .25s, .25s, .25s;
-    transition-delay: .5s, 0s, 0s, 0s;
-  }
-}
-.navigation__subitem {
-  margin-left: .7rem;
-}
-.navigation__sublink {
-  border-left: 2px solid $navigation-fillcolor-icons;
-  display: block;
-  padding: .75rem 1rem .75rem 1.5rem;
-  text-decoration: none;
-  color:  var(--color-nav-link, $white);
-  &:focus,
-  &:hover {
-    background: $navigation-hover-bg-color;
-    color:  var(--color-nav-link, $pm-global-light);
-    text-decoration: none;
-  }
-  &:hover {
-    border-left: 2px solid var(--color-nav-link, rgba($pm-global-light, .5));
-  }
-  &[aria-current="true"] {
-    border-left: 2px solid var(--color-nav-active, $white);
-    font-weight: bold;
-  }
-}
-
-
-@if $rtl-option == true {
-  [dir="rtl"] {
-    .navigation__sublist {
-      margin-left: 0;
-      margin-right: $padding-left-link;
-    }
-    .navigation__subitem {
-      margin-left: 0;
-      margin-right: .7rem;
-    }
-    .navigation__sublink {
-      border-left: 0;
-      border-right: 2px solid $navigation-fillcolor-icons;
-      padding: .75rem 1.5rem .75rem 1rem;
-      &:hover {
-        border-left: 0;
-        border-right: 2px solid var(--color-nav-link, $pm-global-light);
-      }
-      &[aria-current="true"] {
-        border-left: 0;
-        border-right: 2px solid var(--color-nav-active, $pm-primary);
-      }
-    }
-  }
-}
diff --git a/templates/@theme-base/pm-styles/_pm-notifications.scss b/templates/@theme-base/pm-styles/_pm-notifications.scss
deleted file mode 100644
index 6215758..0000000
--- a/templates/@theme-base/pm-styles/_pm-notifications.scss
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
- * Notifications
- */
-.notifications-container {
-  position: fixed;
-  top: 1em;
-  left: 50%;
-  z-index: 777;
-  -webkit-transform: translateX(-50%);
-  transform: translateX(-50%);
-}
-
-[class*="notification-"] {
-  border-radius: $global-border-radius;
-  overflow: hidden;
-  display: block;
-}
-.notification {
-  &-alert {
-    background: $pm-global-warning;
-    color: $pm-global-light;
-  }
-  &-success {
-    background: $pm-global-success;
-    color: $pm-global-light;
-  }
-  &-warning {
-    background: $pm-global-attention;
-    color: $pm-global-grey;
-  }
-  &-info {
-    background: $pm-primary;
-    color: $white;
-  }
-}
-
-.notificationIn {
-  animation-duration: 1s;
-  animation-fill-mode: forwards;
-  animation-timing-function: ease;
-  animation-name: notificationIn;
-}
-
-.notificationOut {
-  animation-duration: 1s;
-  animation-fill-mode: forwards;
-  animation-timing-function: ease;
-  animation-name: notificationOut;
-}
-
-
-@keyframes notificationIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateY(-50px);
-    transform: translateY(-50px);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform: translateY(0);
-    transform: translateY(0);
-  }
-}
-
-@keyframes notificationOut {
-  0% {
-    opacity: 1;
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-  100% {
-    opacity: 0;
-    -webkit-transform: scale(0);
-    transform: scale(0);
-    max-height: 0;
-    padding: 0;
-    margin-bottom: 0;
-  }
-}
-
-
-@include respond-to($breakpoint-small) {
-
-  .notifications-container {
-	text-align: center;
-  }
-}
-
-@include respond-to($breakpoint-tiny) {
-
-	.notifications-container,
-	[class*="notification-"] {
-	  -webkit-transform: none;
-      transform: none;
-	  left: 1em;
-	  right: 1em;
-	  width: calc(100% - 2em);
-	}
-}
diff --git a/templates/@theme-base/pm-styles/_pm-overview-grid.scss b/templates/@theme-base/pm-styles/_pm-overview-grid.scss
deleted file mode 100644
index 0ec1f6b..0000000
--- a/templates/@theme-base/pm-styles/_pm-overview-grid.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * settings home
- */
-
-.overview-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(25rem,1fr));
-	grid-auto-flow: row dense;
-	grid-gap: 2rem;
-
-	&-item {
-		&--tall {
-			grid-row: span 2;
-		}
-
-		&--full {
-			grid-column: 1 / -1;
-		}
-	}
-}
diff --git a/templates/@theme-base/pm-styles/_pm-panels.scss b/templates/@theme-base/pm-styles/_pm-panels.scss
deleted file mode 100644
index 4016245..0000000
--- a/templates/@theme-base/pm-styles/_pm-panels.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * Information panels
- */
-.information-panel-image {
-  position: absolute;
-  width: 48px;
-  height: 36px;
-  top: 19px;
-  left: -12px;
-  border: 1px solid var(--bordercolor-input, $pm-global-border);
-  border-radius: $global-border-radius;
-  border-bottom-left-radius: 0;
-  background-color: var(--bgcolor-main-area, $pm-global-light);
-
-  &::before {
-    content: '';
-    position: absolute;
-    display: inline-block;
-    width: 12px;
-    height: 10px;
-    top: calc(100% + 1px);
-    left: -1px;
-    border: 6px solid transparent;
-    border-top: 6px solid var(--bordercolor-input, $pm-global-border);
-    border-right: 6px solid var(--bordercolor-input, $pm-global-border);
-  }
-}
-
-.information-panel-content {
-  margin: 1.6rem 2.3rem 1.6rem 5.1rem;
-}
-
-.information-panel-icon {
-  fill: var(--fillcolor-icons, $black);
-}
-
-@if $rtl-option == true {
-  [dir="rtl"] {
-    .information-panel-image {
-      left: auto;
-      right: -12px;
-      &::before {
-        left: auto;
-        right: -1px;
-        border: 6px solid transparent;
-        border-top: 6px solid var(--bordercolor-input, $pm-global-border);
-        border-left: 6px solid var(--bordercolor-input, $pm-global-border);
-      }
-    }
-    .information-panel-content {
-      margin: 1.6rem 5.1rem 1.6rem 2.3rem;
-    }
-  }
-}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-progressbar.scss b/templates/@theme-base/pm-styles/_pm-progressbar.scss
deleted file mode 100644
index 339edc5..0000000
--- a/templates/@theme-base/pm-styles/_pm-progressbar.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-@mixin progressbar-size($size: .5em) {
-	height: $size;
-	border-radius: #{$size/2};
-
-	&::-webkit-progress-bar {
-		border-radius: #{$size/2};
-	}
-
-	&::-webkit-progress-value {
-		border-radius: #{$size/2};
-	}
-
-	&::-moz-progress-bar {
-		border-radius: #{$size/2};
-	}
-}
-
-.progressbar {
-	@include progressbar-size();
-
-	background: var(--bordercolor-input, $pm-global-border);
-	color: $pm-primary;
-	appearance: none;
-
-	&::-webkit-progress-bar {
-		background-color: var(--bordercolor-input, $pm-global-border);
-	}
-
-	&::-webkit-progress-value {
-		background: $pm-primary;
-		transition: .25s width easing(easeInOutQuint);
-	}
-
-	&::-moz-progress-bar {
-		background: $pm-primary;
-		transition: .25s width easing(easeInOutQuint);
-	}
-
-	&::-ms-fill {
-		border-color: currentColor;
-	}
-
-	@each $variant, $color in (
-		disabled : darken($pm-global-muted, 25%),
-		running  : $pm-global-info,
-		success  : $pm-global-success,
-		warning  : $pm-global-attention,
-		error    : $pm-global-warning
-	) {
-		&--#{$variant} {
-			color: $color;
-
-			&::-webkit-progress-value {
-				background: $color;
-			}
-
-			&::-moz-progress-bar {
-				background: $color;
-			}
-		}
-	}
-
-	&.is-thin {
-		@include progressbar-size(.25em);
-	}
-}
diff --git a/templates/@theme-base/pm-styles/_pm-reset-display-messages.scss b/templates/@theme-base/pm-styles/_pm-reset-display-messages.scss
deleted file mode 100644
index 15cb319..0000000
--- a/templates/@theme-base/pm-styles/_pm-reset-display-messages.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-// reset/display fixes for emails contents
-.message-content {
-	@extend .p1;
-	// rules coming from Angular
-	box-sizing: content-box; // to avoid problems in some emails
-	border-radius: 0 0 $global-border-radius $global-border-radius;
-
-	// remove reset margins
-	blockquote, dl, ol, p, pre, td, th, ul {
-		margin-top: 0;
-		margin-bottom: 0;
-	}
-	p {
-		margin-top: 1em;
-		margin-bottom: 1em;
-	}
-
-	table {
-		margin-bottom: 0;
-	}
-
-}
diff --git a/templates/@theme-base/pm-styles/_pm-scale.scss b/templates/@theme-base/pm-styles/_pm-scale.scss
deleted file mode 100644
index 37f3994..0000000
--- a/templates/@theme-base/pm-styles/_pm-scale.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.scale-buttons-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, 2.5em);
-    grid-gap: 0.5rem;
-    justify-content: space-between;
-}
diff --git a/templates/@theme-base/pm-styles/_pm-scrollshadow.scss b/templates/@theme-base/pm-styles/_pm-scrollshadow.scss
deleted file mode 100644
index 6f23256..0000000
--- a/templates/@theme-base/pm-styles/_pm-scrollshadow.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-$scrollshadow-height: .5rem !default;
-
-.scrollshadow {
-
-	&-sticky {
-		position: sticky;
-		display: block;
-		height: $scrollshadow-height;
-
-		&--top {
-			top: 0;
-			background-image: radial-gradient(farthest-side at 50% 0, var(--bordercolor-input, #acb0bf), transparent);
-		}
-
-		&--bottom {
-			bottom: 0;
-			background-image: radial-gradient(farthest-side at 50% 100%, var(--bordercolor-input, #acb0bf), transparent);
-		}
-	}
-
-	&-static {
-		position: absolute;
-		display: block;
-		left: 0;
-		right: 0;
-		height: $scrollshadow-height;
-		background: var(--bgcolor-main-area, #fff);
-
-		&--top {
-			top: 0;
-		}
-
-		&--bottom {
-			bottom: 0;
-		}
-	}
-}
diff --git a/templates/@theme-base/pm-styles/_pm-stepdots.scss b/templates/@theme-base/pm-styles/_pm-stepdots.scss
deleted file mode 100644
index dfd0d21..0000000
--- a/templates/@theme-base/pm-styles/_pm-stepdots.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- *
- */
-
-.stepDots {
-
-	&-item:not(:last-child) {
-       margin-right: .5em;
-	}
-
-	&-dot {
-		width: .8rem;
-		height: .8rem;
-		background-color: var(--bordercolor-input, $pm-global-border);
-		transition: background-color .25s easing(ease);
-
-		&:focus,
-		&:hover,
-		&:active {
-			background-color: $pm-primary;
-		}
-		&[aria-selected="true"] {
-			background-color: var(--secondary-bg-color, $pm-global-altgrey);
-		}
-	}
-
-}
diff --git a/templates/@theme-base/pm-styles/_pm-sticky-header.scss b/templates/@theme-base/pm-styles/_pm-sticky-header.scss
deleted file mode 100644
index e5baac2..0000000
--- a/templates/@theme-base/pm-styles/_pm-sticky-header.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
- * sticky header and container for sections
- */
-
-$sticky-title-height: 10rem !default;
-.sticky-title {
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0;
-  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
-  padding: .5em .75em;
-  background: inherit;
-  z-index: 11;
-}
-.sticky-title--onTop {
-  box-shadow: none;
-}
-.sticky-title--noPadding {
-  padding: 0;
-}
-
-.container-section-sticky {
-  padding: 3em 2em 0 2em;
-  max-width: 120ch; // avoid too long lines
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.container-section-sticky.pt0 { // 😓
-  padding-top: 0;
-}
-
-.container-section-sticky--fullwidth {
-  max-width: none;
-}
-
-.container-section-sticky-section {
-  margin-bottom: 8rem;
-}
-
-
-/* trick for fixing anchor links */
-.header-height-anchor {
-  position: absolute;
-  top: -#{$sticky-title-height};
-}
-
-// not sticky on mobile
-@include respond-to($breakpoint-small) {
-  .sticky-title:not(.onmobile-remain-sticky) {
-    position: static;
-    box-shadow: none;
-  }
-  .container-section-sticky-section {
-    margin-bottom: 8rem;
-  }
-  .header-height-anchor {
-    position: static;
-    top: 0;
-  }
-}
-
diff --git a/templates/@theme-base/pm-styles/_pm-table-plans.scss b/templates/@theme-base/pm-styles/_pm-table-plans.scss
deleted file mode 100644
index 55096ce..0000000
--- a/templates/@theme-base/pm-styles/_pm-table-plans.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-/*
- * Plans tables
- */
- .pm-plans-table {
-  @extend .noborder;
-  @extend .w100; 
-  border-collapse: separate;
-  border-spacing: 0;
-  @extend .min-w35e;
-}
-
-.pm-plans-table {
-  caption {
-    transform: scale(0);
-  }
-  td,
-  th {
-    padding: em(16);
-    border: 1px solid $pm-global-border;
-    border-bottom: 0;
-    border-right: 0;
-  }
-  th.is-empty {
-    border: 0;
-  }
-  th:not(.pm-simple-table-row-th) {
-    @extend .uppercase;
-  }
-  tr td:last-child,
-  tr th:last-child {
-    border-right: 1px solid $pm-global-border;
-  }
-  thead {
-    tr:first-of-type {
-      & :nth-child(2) {
-        border-top-left-radius: $global-border-radius;
-      }
-      & :last-child {
-        border-top-right-radius: $global-border-radius;
-      }
-    }
-  }
-  tbody {
-    tr:last-of-type {
-      td,
-      th {
-        border-bottom: 1px solid $pm-global-border;
-      }
-      & :first-child {
-        border-bottom-left-radius: $global-border-radius;
-      }
-      & :last-child {
-        border-bottom-right-radius: $global-border-radius;
-      }
-    }
-  }
-  tbody tr {
-    .pm-simple-table-row-th {
-      padding-left: 2em;
-    }
-    &:first-of-type .pm-simple-table-row-th {
-      border-top-left-radius: $global-border-radius;
-    }
-  }
-
-
-}
-
-
-@include respond-to(1100) { 
-
-  .pm-plans-table {
-    tbody tr {
-      .pm-simple-table-row-th {
-        padding: em(10);
-      }
-    }
-
-  }
-
-}
-
-@include respond-to($breakpoint-medium) { 
-
-  .pm-plans-table {
-    td,
-    th {
-      padding: em(10);
-    }
-
-  }
-
-}
-
-
-
-/* modifiers for highlighting a plan */
-/* ADR : 
-   - getting type or unit from attr is not supported by any browser => https://developer.mozilla.org/en-US/docs/Web/CSS/attr
-   - CSS custom properties can't be used in selectors => https://css-irl.info/practical-tips-css-variables/
-   - content attribute can't be herited https://stackoverflow.com/questions/7175113/content-attribute-to-inherit-node-value
- */
-
-$border-width: 2px !default;
-$nb-plans-max: 4 !default;
-
-@for $i from 1 through $nb-plans-max {
-
-  .pm-table--highlight[data-plan-number="#{$i}"] {
-    & tr td:nth-child(#{$i+1}),
-    & tr th:nth-child(#{$i+1}) {
-      border-left: #{$border-width} solid $pm-primary;
-      border-right: #{$border-width} solid $pm-primary;
-    }
-    & tr:last-child td:nth-child(#{$i+1}) {
-      border-bottom: #{$border-width} solid $pm-primary;
-    }
-    & tr th:nth-child(#{$i+1}) {
-      border-top: #{$border-width} solid $pm-primary;
-      position: relative;
-      color: $pm-primary;
-      &:before {
-        content: attr(data-highlight);
-        display: block;
-        position: absolute;
-        bottom: 100%;
-        left: -#{$border-width};
-        right: -#{$border-width};
-        background-color: $pm-primary;
-        color: $white;
-        text-align: center;
-        font-weight: bold;
-        text-transform: uppercase;
-        font-size: 1.2rem;
-        padding: .25em;
-        border-radius: $global-border-radius $global-border-radius 0 0;
-      }
-    }
-    & tr td:nth-child(#{$i+2}),
-    & tr th:nth-child(#{$i+2}) {
-      border-left: 0;
-    }
-  }
-
-}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-table.scss b/templates/@theme-base/pm-styles/_pm-table.scss
deleted file mode 100644
index 867cf26..0000000
--- a/templates/@theme-base/pm-styles/_pm-table.scss
+++ /dev/null
@@ -1,119 +0,0 @@
-/*
- * tables
- */
-.pm-simple-table {
-	@extend .border-collapse;
-	@extend .noborder;
-	@extend .w100;
-
-	caption {
-		transform: scale(0);
-	}
-
-	td,
-	th {
-		padding: em(9);
-		border-bottom: 1px solid var(--bordercolor-input, $pm-global-border);
-	}
-
-	th:not(#{&}-row-th) {
-		@extend .uppercase;
-		@extend .alignleft;
-
-		&.aligncenter {
-			@extend .aligncenter;
-		}
-
-		&.alignright {
-			@extend .alignright;
-		}
-		@include respond-to($breakpoint-small) {
-			&.onmobile-aligncenter {
-				@extend .onmobile-aligncenter;
-			}
-		}
-	}
-
-	// no style for this case
-	&-row-th {
-		font-weight: normal;
-	}
-
-	/* alternate bg for rows */
-	&--alternate-bg-row tbody tr:nth-child(odd){
-		background-color: var(--bgcolor-input, $pm-global-light);
-	}
-
-	&--isHoverable tbody tr {
-		@media (hover: hover) {
-			&:hover,
-			&:focus-within {
-				background-color: var(--bgcolor-input, $pm-global-light);
-			}
-		}
-	}
-
-	tr#{&}-stickyRow {
-		td,
-		th {
-			position: sticky;
-			top: 0;
-			background: var(--bgcolor-main-area, $white);
-			z-index: 1;
-
-			&::after {
-				content: '';
-				position: absolute;
-				top: 100%;
-				left: 0;
-				right: 0;
-				z-index: -1;
-				height: 1rem;
-				background: linear-gradient(to bottom, rgba(black, .1) 0%, transparent 100%);
-				pointer-events: none;
-				transition: opacity .125s ease-out;
-			}
-		}
-	}
-
-	tr#{&}-stickyRow#{&}-stickyRow--isOnTop {
-		td,
-		th {
-			&::after {
-				opacity: 0;
-			}
-		}
-	}
-
-	/* bordered-table */
-	&--bordered {
-		&,
-		th,
-		td {
-			border: 1px solid var(--bordercolor-input, $pm-global-border);
-		}
-	}
-
-	&--has-actions {
-		td,
-		th {
-			&:last-child {
-				text-align: right;
-			}
-		}
-	}
-
-	/* simple dirty fix */
-	a svg {
-		@extend .relative;
-		top: -0.15em;
-	}
-}
-
-
-/*
- * specifics case
- */
-.pm-plans-table-row--highlighted {
-	background-color: var(--bgcolor-input, $pm-global-light);
-}
diff --git a/templates/@theme-base/pm-styles/_pm-tabs.scss b/templates/@theme-base/pm-styles/_pm-tabs.scss
deleted file mode 100644
index b726541..0000000
--- a/templates/@theme-base/pm-styles/_pm-tabs.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-.tabs-list {
-  margin: 0;
-  padding: 0;
-  @extend .unstyled;
-  @extend .flex;
-  @extend .relative;
-  white-space: nowrap;
-}
-
-.tabs-list-item {
-  margin-right: 1rem;
-  color: var(--text-sub-header, $text-sub-header);
-  min-width: auto;
-}
-
-.tabs-list-link {
-  @extend .flex;
-  color: inherit;
-  border-bottom: 2px solid transparent;
-  padding: .5em;
-  @extend .nodecoration;
-  @extend .relative;
-  top: 1px;
-  transition: color 0.15s ease-out, border-bottom 0.15s ease-out;
-  &:focus,
-  &:hover {
-    @extend .nodecoration;
-    color: var(--color-main-area, $pm-global-grey);
-    border-bottom: 2px solid var(--bordercolor-input, $pm-global-border);
-  }
-  &[disabled] {
-    opacity: .4;
-    cursor: default;
-    pointer-events: none;
-  }
-}
-
-[aria-selected="true"].tabs-list-link {
-  border-bottom: 2px solid $pm-primary;
-  color: var(--color-main-area, $pm-global-grey);
-}
-
-.tabs-container {
-  border-bottom: 1px solid var(--bordercolor-input, $pm-global-border);
-
-  &[class*='sticky'] {
-    background: var(--bgcolor-main-area, $white);
-  }
-}
-
-.tabs-indicator {
-  position: absolute;
-  border-bottom: 2px solid $pm-primary;
-  content: "";
-  height: 0;
-  bottom: -1px;
-  left: 0;
-  right: 0;
-  transform-origin: left center;
-  transition: transform .15s ease-out;
-  transform: translateX(var(--translate)) scaleX(var(--scale));
-}
-/* hidden state for content is not necessary for React, added in exception for Design system website */
diff --git a/templates/@theme-base/pm-styles/_pm-theme-config.scss b/templates/@theme-base/pm-styles/_pm-theme-config.scss
deleted file mode 100644
index 3e82024..0000000
--- a/templates/@theme-base/pm-styles/_pm-theme-config.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-:root {
-  --main-bg-color: #{$main-bg-color};
-  --secondary-bg-color: #{$secondary-bg-color};
-  --bgcolor-searchbox-field: #{$bgcolor-searchbox-field};
-  --bgcolor-spacebar: #{$bgcolor-spacebar};
-  --bgcolor-aside-link: #{$bgcolor-aside-link};
-  --bgcolor-toolbar: #{$bgcolor-toolbar};
-  --fillcolor-logo: #{$fillcolor-logo};
-  --fillcolor-icons: #{$fillcolor-icons};
-  --color-nav-link: #{$color-nav-link};
-  --color-nav-active: #{$color-nav-active};
-  --color-standard-text: #{$color-standard-text};
-  --boxshadow-main: #{$boxshadow-main};
-}   
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-toolbar.scss b/templates/@theme-base/pm-styles/_pm-toolbar.scss
deleted file mode 100644
index d9e4fa8..0000000
--- a/templates/@theme-base/pm-styles/_pm-toolbar.scss
+++ /dev/null
@@ -1,127 +0,0 @@
-/*
- * toolbar
- */
-:root {
-	--padding-toolbar-button: #{em(16, $base-font)};
-	--padding-toolbar-button-dropdown: #{em(12, $base-font)};
-}
-
-.toolbar {
-  position: relative;
-  z-index: 1;
-  height: $toolbar-height;
-  background: var(--bgcolor-toolbar, $pm-global-altgrey);
-  box-shadow: 0 -1px 0 0 rgba(white, 0.2),
-              0 1px 0 0 rgba(black, 0.2);
-}
-.toolbar-button,
-.pm-button.toolbar-button { // to avoid issues in darkmode
-  // resets to avoid pm-button styles
-  padding: unset;
-  background: unset;
-  border: unset;
-  border-radius: unset;
-
-  padding-left: var(--padding-toolbar-button);
-  padding-right: var(--padding-toolbar-button);
-  display: flex; // alignment fix on Chrome
-
-  &:hover {
-    box-shadow: unset;
-    background-color: var(--bgcolor-spacebar, #505560);
-  }
-  &[disabled] {
-    background: unset;
-    opacity: .4;
-  }
-  &:active,
-  &.is-active,
-  &:not(div):active,
-  [aria-expanded="true"] {
-    background: unset;
-    background-color: var(--bgcolor-spacebar, #2F333E);
-  }
-}
-.toolbar-button--dropdown {
-  padding-left: var(--padding-toolbar-button-dropdown);
-  padding-right: var(--padding-toolbar-button-dropdown);
-}
-.toolbar-icon,
-.expand-caret.toolbar-icon {
-  fill: var(--fillcolor-icons, $white);
-}
-.toolbar-separator {
-  width: 2px;
-  background-image: linear-gradient(90deg, var(--bgcolor-spacebar, #4F5460) 0, var(--bgcolor-spacebar, #4F5460) 1px, var(--bgcolor-spacebar, #353A46) 1px);
-}
-.toolbar button[aria-disabled="true"],
-.toolbar .toolbar-button[aria-disabled="true"] {
-  opacity: .5;
-  pointer-events: none;
-}
-
-.toolbar-select {
-  padding-left: em(16, $base-font);
-  padding-right: em(16, $base-font);
-  color: var(--fillcolor-icons, $white);
-  background: url("#{$path-images}sprite-for-css-only.svg#css-caret-white") calc(100% - 6px) 50% no-repeat;
-}
-.toolbar-select option {
-  color: $black; // for Chrome bug
-}
-.isDarkMode {
-	.toolbar-select {
-		background-color: var(--bgcolor-toolbar, $pm-global-altgrey);
-		option {
-			color: $pm-global-light; // for Chrome bug
-		}
-
-	}
-}
-
-
-.toolbar--heavy {
-	@include respond-to(1100) {
-		--padding-toolbar-button: #{em(12, $base-font)};
-		--padding-toolbar-button-dropdown: #{em(10, $base-font)};
-	}
-	// use the forceps Luke ^^
-	@include respond-to(980) {
-		--padding-toolbar-button: #{em(11, $base-font)};
-		--padding-toolbar-button-dropdown: #{em(8, $base-font)};
-	}
-
-	@include respond-to($breakpoint-medium) {
-		--padding-toolbar-button: #{em(16, $base-font)};
-		--padding-toolbar-button-dropdown: #{em(12, $base-font)};
-	}
-
-	@include respond-to(750) {
-		--padding-toolbar-button: #{em(12, $base-font)};
-		--padding-toolbar-button-dropdown: #{em(8, $base-font)};
-	}
-
-	@include respond-to($breakpoint-small) {
-		--padding-toolbar-button: #{em(16, $base-font)};
-		--padding-toolbar-button-dropdown: #{em(12, $base-font)};
-	}
-
-	@include respond-to($breakpoint-tiny) {
-		--padding-toolbar-button: #{em(14, $base-font)};
-		--padding-toolbar-button-dropdown: #{em(10, $base-font)};
-	}
-	@include respond-to(320) {
-		--padding-toolbar-button: #{em(12, $base-font)};
-		--padding-toolbar-button-dropdown: #{em(6, $base-font)};
-	}
-
-}
-
-
-
-
-@include respond-to($breakpoint-small) {
-  .toolbar {
-    border-radius: 0;
-  }
-}
diff --git a/templates/@theme-base/pm-styles/_pm-tooltips.scss b/templates/@theme-base/pm-styles/_pm-tooltips.scss
deleted file mode 100644
index b5443e5..0000000
--- a/templates/@theme-base/pm-styles/_pm-tooltips.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-/*
- * tooltips
- */
- $tooltip-width: 14em;
- $arrow-width: .5em;
- 
- [class*="tooltip-"][aria-hidden="true"]:not(.tooltip-container) {
-   display: none;
- }
- 
- /* position relative for containers */
- .tooltip-container {
-   @extend .relative;
-   @extend .inbl;
- }
- 
- /* tooltip styles */
- /* factorisation */
- [class*="tooltip-"]:not(.tooltip-container) {
-   position: absolute;
-   z-index: 666;
-   width: $tooltip-width;
-   border-radius: $global-border-radius;
-   background: $pm-global-grey;
-   color: $pm-global-light;
-   padding: .5em;
-   text-align: center;
- }
- .tooltip-top {
-   bottom: calc(100% + #{$arrow-width} + 10px ); // 100% from bottom + arrow width + small margin
-   left: calc(50% - #{$tooltip-width/2} );
- }
- .tooltip-right {
-   left: calc(100% + #{$arrow-width} + 10px );
-   top: 0;
- }
- .tooltip-bottom {
-   top: calc(100% + #{$arrow-width} + 10px ); // 100% from bottom + arrow width + small margin
-   left: calc(50% - #{$tooltip-width/2} );
- }
- .tooltip-left {
-   right: calc(100% + #{$arrow-width} + 10px );
-   top: 0;
- }
- 
- /* used pseudo-element to make arrows */
- /* factorisation */
- [class*="tooltip-"]:not(.tooltip-container)::before {
-   content: '';
-   speak: none;
-   position: absolute;
-   z-index: 666;
-   width: $arrow-width;
-   height: $arrow-width;
-   pointer-events: none;
- }
- 
- .tooltip-top::before {
-   top: 100%;
-   left: calc(50% - #{$arrow-width} );
-   border: $arrow-width solid transparent;
-   border-top: $arrow-width solid $pm-global-grey;
- }
- .tooltip-right::before {
-   top: calc(50% - #{$arrow-width} );
-   left: -#{$arrow-width*2};
-   border: $arrow-width solid transparent;
-   border-right: $arrow-width solid $pm-global-grey;
- }
- .tooltip-bottom::before {
-   bottom: 100%;
-   left: calc(50% - #{$arrow-width} );
-   border: $arrow-width solid transparent;
-   border-bottom: $arrow-width solid $pm-global-grey;
- }
- .tooltip-left::before {
-   top: calc(50% - #{$arrow-width} );
-   right: -#{$arrow-width*2};
-   border: $arrow-width solid transparent;
-   border-left: $arrow-width solid $pm-global-grey;
- }
- 
- 
- /* responsive ? */
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-treeview.scss b/templates/@theme-base/pm-styles/_pm-treeview.scss
deleted file mode 100644
index aef046d..0000000
--- a/templates/@theme-base/pm-styles/_pm-treeview.scss
+++ /dev/null
@@ -1,108 +0,0 @@
-/*
- Tree view (subfolders, etc.)
- */
-
-$treeview-border-width: 1px !default;
-$treeview-indentation-margin: 3rem !default;
-
-
-.treeview-item {
-
-    border-bottom : $treeview-border-width solid var(--bordercolor-input, $pm-global-border);
-	margin-bottom: -$treeview-border-width;
-
-	$arrow-width: .9rem !default;
-	$arrow-height: .7rem !default;
-	$circle-size: .8rem !default;
-
-	&--moveInside,
-	&--moveTop,
-	&--moveBottom {
-		&::before {
-			content: '';
-			position: absolute;
-		}
-	}
-	&--moveInside {
-		&::before {
-			left: -$arrow-width;
-			height: 0;
-			width: 0;
-			border: $arrow-height solid transparent;
-			border-left-color: $pm-primary;
-			border-left-width: $arrow-width;
-		}
-	}
-	&--moveTop,
-	&--moveBottom {
-		&::before {
-			left: -#{$circle-size/2};
-			height: $circle-size;
-			width: $circle-size;
-			border-radius: 50%;
-			background: $pm-primary;
-		}
-	}
-	&--moveInside#{&}--selfGrabbed { // no primary color on the self grabbed element
-		&::before {
-			border-left-color: $pm-global-muted;
-		}
-	}
-	&--moveTop::before {
-		top: -#{$circle-size/2};
-	}
-	&--moveBottom::before {
-		bottom: -#{$circle-size/2};
-	}
-
-	&--moveTop::after,
-	&--moveBottom::after {
-		content: '';
-		position: absolute;
-		left: 0;
-		right: 0;
-		height: 1px;
-		background: $pm-primary;
-	}
-	&--moveTop::after {
-		top: 0;
-	}
-	&--moveBottom::after {
-		bottom: -1px;
-	}
-	&--moveInside {
-		background-color: var(--bgcolor-highlight, $pm-global-light);
-	}
-
-    .treeview-item .treeview-item {
-		padding-left: $treeview-indentation-margin;
-		&.treeview-item--moveInside {
-			background: linear-gradient(to right, transparent 0, transparent #{$treeview-indentation-margin}, var(--bgcolor-highlight, $pm-global-light) #{$treeview-indentation-margin});
-			&::before {
-				left: calc(-#{$arrow-width} + #{$treeview-indentation-margin});
-			}
-		}
-		&.treeview-item--moveTop,
-		&.treeview-item--moveBottom {
-			&::before {
-				left: calc(-#{$circle-size/2} + #{$treeview-indentation-margin});
-			}
-		}
-		&--moveTop::after,
-		&--moveBottom::after {
-			left: #{$treeview-indentation-margin};
-		}
-	}
-
-}
-
-
-
-
-
-@include respond-to($breakpoint-medium) {
-    .treeview-toggle,
-    .treeview-actions {
-       width: em(100);
-    }
-}
diff --git a/templates/@theme-base/pm-styles/_pm-wizard.scss b/templates/@theme-base/pm-styles/_pm-wizard.scss
deleted file mode 100644
index 85204dc..0000000
--- a/templates/@theme-base/pm-styles/_pm-wizard.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-/*
- * wizard
- */
-
-$height-wizard: 6px !default;
-$size-current-pin: 16px !default;
-
-.wizard-container {
-  position: relative;
-  padding-top: 1.5em;
-  padding-left: 2px; // "optical" alignment, difficult to align text and circle ^^
-}
-
-.wizard-container--noTextDisplayed {
-  padding-top: 0;
-}
-
-.wizard {
-  height: $height-wizard;
-  display: flex;
-}
-
-.wizard-marker {
-  display: flex;
-  width: $size-current-pin;
-  height: $size-current-pin;
-  border-radius: 50%;
-  position: relative;
-  top: -#{$height-wizard - 1};
-  background-image: radial-gradient(circle, $pm-primary 0, $pm-primary #{$height-wizard/2}, transparent #{$height-wizard/2});
-}
-
-.wizard-item {
-  
-  background: var(--bordercolor-input, $pm-global-border);
-
-  &:not(:last-child) {
-    @extend .flex-item-fluid;
-  }
-  
-  // positionned first element always with a aria-current/is-complete
-  &:first-child {
-    background: none;
-    background-image: linear-gradient(to left, var(--bordercolor-input, $pm-global-border) 0,  var(--bordercolor-input, $pm-global-border) calc(100% - #{$height-wizard/2}), transparent calc(100% - #{$height-wizard/2}) );
-  }
-  &:last-child {
-    background: none;
-    background-image: linear-gradient(to right, var(--bordercolor-input, $pm-global-border) 0,  var(--bordercolor-input, $pm-global-border) 50%, transparent 50%);
-    &.is-complete::after {
-      content: none;
-    }
-  }
-  
-  &[aria-current="step"],
-  &.is-complete {
-    &::before {
-      content: '';
-      position: relative;
-      display: block;
-      border-radius: 50%;
-      z-index: 1;
-      top: -#{$height-wizard - 1};
-      left: -1px;
-      width: $size-current-pin;
-      height: $size-current-pin;
-    }
-
-    .wizard-marker {
-      display: none;
-    }
-  }
-  &[aria-current="step"]::before {
-    background-image: radial-gradient(circle, $white 0, $white #{$height-wizard/2}, $pm-primary #{$height-wizard/2});
-  }
-  &.is-complete::before {
-    background: $pm-primary url("#{$path-images}sprite-for-css-only.svg#css-on") 50% 50% no-repeat;
-    background-size: #{$size-current-pin - $height-wizard};
-  }
-  &.is-complete::after {
-    content: '';
-    position: relative;
-    display: block;
-    width: 100%;
-    height: $height-wizard;
-    top: -$size-current-pin;
-    background-color: $pm-primary;
-  }
-  &[aria-current="step"] .wizard-item-inner {
-    position: absolute;
-    top: 0;
-    left: 0;
-    font-size: 2rem;
-    font-weight: bold;
-  }
-  &:not([aria-current]) .wizard-item-inner {
-    @extend .invisible;
-  }
-}
-
-.wizard-container--noTextDisplayed .wizard-item[aria-current="step"] .wizard-item-inner {
-  @extend .invisible;
-}
\ No newline at end of file
diff --git a/templates/@theme-base/reusable-components/_design-system-colors.scss b/templates/@theme-base/reusable-components/_design-system-colors.scss
deleted file mode 100644
index 650d1aa..0000000
--- a/templates/@theme-base/reusable-components/_design-system-colors.scss
+++ /dev/null
@@ -1,339 +0,0 @@
-/* PM and VPN colors */
-.bg-global-grey {
-  background-color: $pm-global-grey;
-}
-.bg-global-altgrey {
-  background-color: $pm-global-altgrey;
-}
-.bg-global-altgrey-gradient {
-  background-image: linear-gradient(to bottom, $pm-global-grey, $pm-global-altgrey);
-}
-.bg-global-light {
-  background-color: $pm-global-light;
-}
-.bg-global-border {
-  background-color: var(--bordercolor-input, $pm-global-border);
-}
-.bg-global-muted {
-  background-color: $pm-global-muted;
-}
-.bg-global-muted-dm {
-  background-color: var(--bgcolor-muted, $pm-global-muted);
-}
-.bg-global-success {
-  background-color: $pm-global-success;
-}
-.bg-global-warning {
-  background-color: $pm-global-warning;
-}
-.bg-global-attention {
-  background-color: $pm-global-attention;
-}
-.bg-global-info {
-  background-color: $pm-global-info;
-}
-.bg-pm-blue {
-  background-color: $pm-blue;
-}
-.bg-pm-blue-dark {
-  background-color: $pm-blue-dark;
-}
-.bg-pm-blue-light {
-  background-color: $pm-blue-light;
-}
-.bg-pm-blue-gradient {
-	background-image: $pm-blue-gradient;
-}
-
-.bg-global-highlight {
-  background-color: var(--bgcolor-highlight, $pm-global-light);
-}
-
-
-.bg-pv-green {
-  background-color: $pv-green;
-}
-.bg-pv-green-dark {
-  background-color: $pv-green-dark;
-}
-.bg-pv-green-light {
-  background-color: $pv-green-light;
-}
-
-.bg-white {
-  background-color: $white;
-}
-.bg-black {
-  background-color: $black;
-}
-
-.bg-white-dm {
-  background-color: var(--bgcolor-main-area, $white);
-}
-
-.bg-visionary {
-  background-color: $visionary;
-}
-.bg-plus {
-  background-color: $plus;
-}
-.bg-professional {
-  background-color: $professional;
-}
-.bg-vpnbasic {
-  background-color: $vpnbasic;
-}
-.bg-vpnplus {
-  background-color: $vpnplus;
-}
-.bg-primary {
-  background-color: $pm-primary;
-}
-.bg-inherit {
-  background: inherit;
-}
-.bg-currentColor {
-  background: currentColor;
-}
-
-.fill-global-grey {
-  fill: $pm-global-grey;
-}
-.fill-global-altgrey {
-  fill: $pm-global-altgrey;
-}
-.fill-global-light {
-  fill: $pm-global-light;
-}
-.fill-global-highlight {
-  fill: var(--bgcolor-highlight, $pm-global-light);
-}
-.fill-global-border {
-  fill: $pm-global-border;
-}
-.fill-global-muted {
-  fill: $pm-global-muted;
-}
-.fill-global-success {
-  fill: $pm-global-success;
-}
-.fill-global-warning {
-  fill: $pm-global-warning;
-}
-.fill-global-attention {
-  fill: $pm-global-attention;
-}
-.fill-pm-blue {
-  fill: $pm-blue;
-}
-.fill-pm-blue-dark {
-  fill: $pm-blue-dark;
-}
-.fill-pm-blue-light {
-  fill: $pm-blue-light;
-}
-
-.fill-pv-green {
-  fill: $pv-green;
-}
-.fill-pv-green-dark {
-  fill: $pv-green-dark;
-}
-.fill-pv-green-light {
-  fill: $pv-green-light;
-}
-
-.fill-white {
-  fill: $white;
-}
-.fill-white-dm {
-  fill: var(--bgcolor-main-area, $white);
-}
-.fill-black {
-  fill: $black;
-}
-.fill-currentColor {
-  fill: currentColor;
-}
-.fill-primary {
-  fill: $pm-primary;
-}
-
-.fill-visionary {
-  fill: $visionary;
-}
-.fill-plus {
-  fill: $plus;
-}
-.fill-professional {
-  fill: $professional;
-}
-.fill-vpnbasic {
-  fill: $vpnbasic;
-}
-.fill-vpnplus {
-  fill: $vpnplus;
-}
-.fill-beta.fill-beta { // specificity because bold class is applied and after
-  fill: $pm-primary-dark;
-  font-weight: normal;
-  font-style: italic;
-}
-
-.stroke-global-grey {
-  stroke: $pm-global-grey;
-}
-.stroke-global-altgrey {
-  stroke: $pm-global-altgrey;
-}
-.stroke-global-light {
-  stroke: $pm-global-light;
-}
-.stroke-global-border {
-  stroke: $pm-global-border;
-}
-.stroke-global-muted {
-  stroke: $pm-global-muted;
-}
-.stroke-global-success {
-  stroke: $pm-global-success;
-}
-.stroke-global-warning {
-  stroke: $pm-global-warning;
-}
-.stroke-global-attention {
-  stroke: $pm-global-attention;
-}
-.stroke-pm-blue {
-  stroke: $pm-blue;
-}
-.stroke-pm-blue-dark {
-  stroke: $pm-blue-dark;
-}
-.stroke-pm-blue-light {
-  stroke: $pm-blue-light;
-}
-
-.stroke-pv-green {
-  stroke: $pv-green;
-}
-.stroke-pv-green-dark {
-  stroke: $pv-green-dark;
-}
-.stroke-pv-green-light {
-  stroke: $pv-green-light;
-}
-
-.stroke-white {
-  stroke: $white;
-}
-.stroke-black {
-  stroke: $black;
-}
-.stroke-currentColor {
-  stroke: currentColor;
-}
-.stroke-primary {
-  stroke: $pm-primary;
-}
-
-
-.stroke-visionary {
-  stroke: $visionary;
-}
-.stroke-plus {
-  stroke: $plus;
-}
-.stroke-professional {
-  stroke: $professional;
-}
-.stroke-vpnbasic {
-  stroke: $vpnbasic;
-}
-.stroke-vpnplus {
-  stroke: $vpnplus;
-}
-
-
-
-.color-global-grey {
-  color: $pm-global-grey;
-}
-.color-global-grey-dm {
-  color: var(--color-main-area, $pm-global-grey);
-}
-.color-global-altgrey {
-  color: $pm-global-altgrey;
-}
-.color-global-light {
-  color: $pm-global-light;
-}
-.color-global-border {
-  color: $pm-global-border;
-}
-.color-global-muted {
-  color: $pm-global-muted;
-}
-.color-global-success {
-  color: $pm-global-success;
-}
-.color-global-warning {
-  color: $pm-global-warning;
-}
-.color-global-attention {
-  color: $pm-global-attention;
-}
-.color-global-info {
-  color: $pm-global-info;
-}
-.color-pm-blue {
-  color: $pm-blue;
-}
-.color-pm-blue-dark {
-  color: $pm-blue-dark;
-}
-.color-pm-blue-light {
-  color: $pm-blue-light;
-}
-.color-subheader {
-  color: var(--bgcolor-subheader, $text-sub-header);
-}
-
-.color-pv-green {
-  color: $pv-green;
-}
-.color-pv-green-dark {
-  color: $pv-green-dark;
-}
-.color-pv-green-light {
-  color: $pv-green-light;
-}
-
-.color-white {
-  color: $white;
-}
-.color-black {
-  color: $black;
-}
-.color-currentColor {
-  color: currentColor;
-}
-.color-primary {
-  color: $pm-primary;
-}
-
-.color-visionary {
-  color: $visionary;
-}
-.color-plus {
-  color: $plus;
-}
-.color-professional {
-  color: $professional;
-}
-.color-vpnbasic {
-  color: $vpnbasic;
-}
-.color-vpnplus {
-  color: $vpnplus;
-}
diff --git a/templates/@theme-base/reusable-components/_design-system-config.scss b/templates/@theme-base/reusable-components/_design-system-config.scss
deleted file mode 100644
index 98473cd..0000000
--- a/templates/@theme-base/reusable-components/_design-system-config.scss
+++ /dev/null
@@ -1,481 +0,0 @@
-// Sass variables: adapt them to your designs globally
-
-// base size for text
-$base-font             : 14 !default; // if "14" then 1em = 14px
-// default line-height
-$l-h                   : 1.5 !default;
-
-$size-h1               : 36 !default;
-$size-h2               : 28 !default;
-$size-h3               : 20 !default;
-$size-h4               : 18 !default;
-$size-h5               : 17 !default;
-$size-h6               : 16 !default;
-
-// Use typo helpers on demand
-$use-other-typo-helpers       : true !default;
-$use-other-line-height-helpers: true !default;
-
-$size-smallest         : 9 !default;
-$size-smaller          : 10 !default;
-$size-small            : 12 !default;
-$size-big              : 16 !default;
-$size-bigger           : 18 !default;
-$size-biggest          : 20 !default;
-
-// fonts
-$font-family           : -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !default;
-$font-family-monospace : SFMono-Regular,Consolas,"Liberation Mono","Menlo",monospace,monospace !default;
-// explanation for double monospace http://code.iamkate.com/html-and-css/fixing-browsers-broken-monospace-font-handling/
-
-// project colors
-$pm-global-grey        : #262a33 !default;
-$pm-global-altgrey     : #3c414e !default;
-$bluish-grey           : #9799a6 !default;
-$pm-global-light       : #f6f7fa !default;
-$pm-global-border      : #dde6ec !default;
-$pm-global-muted       : #eeeff3 !default;
-$pm-global-info        : #008cff !default;
-$pm-global-success     : #5db039 !default;
-$pm-global-warning     : #ec5858 !default;
-$pm-global-attention   : #eac819 !default;
-$pm-blue               : #657ee4 !default;
-$pm-blue-dark          : #526ee0 !default;
-$pm-blue-light         : #788ee8 !default;
-$pm-blue-gradient      : linear-gradient(130deg, #657ee4 -7%, #7351d1 64%, #7350d1 127%);
-
-$white                 : #fff !default;
-$black                 : #000 !default;
-
-$pv-green              : #4da358 !default;
-$pv-green-dark         : #3e8447 !default;
-$pv-green-light        : #5fb364 !default;
-
-// plans
-$visionary             : #6ddcfb !default;
-$plus                  : #c6e422 !default;
-$professional          : #d4b46e !default;
-$vpnbasic              : #f67f60 !default;
-$vpnplus               : #9ccc23 !default;
-
-// primary
-$pm-primary            : $pm-blue !default;
-$pm-primary-light      : $pm-blue-light !default;
-$pm-primary-dark       : $pm-blue-dark !default;
-
-// not approved colors
-$pm-input-background   : #fcfdff !default;
-$plan-logo-color       : #8ed60f !default;
-$conversation-selected-bg: rgba($pm-blue, .5) !default;
-$input-shadow-color    : rgba(0, 0, 0, 0.16) !default;
-$autocomplete-bg-color-hover : #f4f4f4 !default;
-$text-sub-header       : #767676 !default;
-
-// needed for darkmode
-$pm-secondary-grey     : #2e323d !default;
-$pm-tertiary-grey      : #505560 !default; // border input
-
-// needed globally
-$calendar-selected-day-color: $pm-blue-light !default;
-$calendar-today-color: $pm-primary-dark !default;
-
-$navigation-hover-bg-color: rgba(white, .05) !default;
-
-// colors
-$color-links           : $pm-primary !default;
-$color-hover           : $black !default;
-$color-hr              : $pm-global-border !default;
-$hr-height             : 1px !default;
-$color-alert           : $pm-global-warning !default;
-$color-bg-button       : $white !default;
-$color-txt-button      : $black !default;
-
-$global-border-radius  : 3px !default;
-
-// inputs
-$input-defaut-border   : $pm-global-border !default;
-
-// main breakpoints
-$breakpoint-large      : 1500 !default;
-$breakpoint-medium-landscape : 1100 !default;
-$breakpoint-medium     : 910 !default;
-$breakpoint-small      : 680 !default;
-$breakpoint-tiny       : 450 !default;
-
-// RTL
-$rtl-option            : false !default;
-// RTL = Right To Left =>
-// to adapt a website in a language that is written from right to left
-// designed for multilingual websites with LTR et RTL
-
-// Custom scrollbar everywhere
-$custom-scroll         : true !default;
-
-
-// hyphens
-$hyphenation           : false !default;
-
-// clear floats
-$use-clearleft_right   : false !default;
-$use-clearhidden       : false !default;
-$use-clearfix          : false !default;
-
-// color reset for mark tag
-$use-color-reset-mark  : true !default;
-$default-bgColor-mark  : #ff0 !default;
-
-
-// vertical rhythm
-// possible values     : 'double_top_single_bottom', 'single_top_single_bottom', 'single_top', 'single_bottom'
-$vertical-rhythm        : 'single_bottom' !default;
-
-// units for typo
-// possible values     : 'use_em',  'use_rem', 'use_rem_with_em_fallback'
-$typo-unit             : 'use_rem' !default;
-
-// applies 62.5% on html (to make 10px default font size), simplifies rem calculation
-$root-equiv-10-px      : true !default;
-
-// basic premise: default user setting for font size is at 16 pixels in the browser
-// you should NEVER update this value, however… who can predict the future…
-$root-default-font-size: 16 !default;
-
-// applies main colors on body tag
-$apply-body-styles     : true !default;
-
-// others
-$use-reset-button      : true !default;
-$use-ie-calc-font-fallback: false !default;
-$use-old-ie-fallbacks  : true !default;
-$use-height-auto-img   : true !default;
-$use-height-auto-td    : true !default;
-$use-height-auto-table : true !default;
-
-// default config for webpack, can be overriden by "global config" in styles-pm.scss
-$path-images           : '../../assets/img/shared/' !default;
-
-
-// variables for global layouts, allowing you to use calc for components and adapt quickly if needed
-$header-height         : 8rem !default;
-$width-sidebar         : 24rem !default; // main navigation
-$toolbar-height        : 5rem !default;
-$context-bar-width     : 25vw !default; // context bar on the right
-$context-bar-min-width : 30rem !default;
-$context-bar-max-width : 40rem !default;
-
-$default-height-fields : 3.5rem !default;
-
-$conversations-column-width: 35% !default;  // used also to align search bar on top
-
-$pm-label-width: 18em !default;
-
-
-// Sass functions: don’t touch if you are not sure ;)
-
-@function em($px, $base: $base-font) {
-
-  @return ($px / $base) * 1em;
-
-}
-
-@function rem($px, $reset-applied: $root-equiv-10-px, $user-default-font-size: $root-default-font-size) {
-
-  @if ( $reset-applied == true ) {
-      @return ($px / 10) * 1rem;
-  }
-  @else {
-         @return ($px / $user-default-font-size) * 1rem;
-		}
-
-}
-
-
-// calculated via https://rocssti.net/en/builder-css
-// based on http://soqr.fr/vertical-rhythm/ thanks @goetter & @eQRoeil
-
-@function line-height ($font-size, $base-height, $base-font, $type-vr) {
-
-  $coef: ceil(1 / ($base-height * $base-font / $font-size));
-  $height: ($base-font * $base-height / $font-size) ;
-
-  @return ($height * $coef) ;
-
-}
-
-
-@function margin-em ($font-size, $base-height, $base-font, $type-vr) {
-
-  $coef: ceil(1 / ($base-height * $base-font / $font-size));
-  $other_coef: ceil($base-height * $base-font / $font-size);
-  $height: ($base-font * $base-height / $font-size) ;
-  $margin: ($height * $coef );
-
-  @if $type-vr == 'double_top_single_bottom' {
-     @return ( ($margin * $other_coef)*1em 0 ( ($margin/2) * $other_coef) *1em 0 );
-  }
-  @if $type-vr == 'single_top_single_bottom' {
-	@return ( ( ($margin/2) * $other_coef) *1em 0 );
-  }
-  @else if $type-vr == 'single_bottom' {
-     @return ( 0 0 ( ($margin/2) * $other_coef) *1em 0 );
-  }
-  @else if $type-vr == 'single_top' {
-     @return ( ( ($margin/2) * $other_coef) *1em 0 0 0 );
-  }
-  @else if $type-vr == 'double_top_double_bottom_without_coef' {
-     @return (($margin *1em) 0);
-  }
-}
-
-
-@mixin rhythm( $value, $type-vr: $vertical-rhythm, $type-unit: $typo-unit ){
-
-  @if $type-unit == 'use_em' {
-     font-size: em($value);
-  }
-  @else if $type-unit == 'use_rem' {
-     font-size: rem($value);
-  }
-  @else if $type-unit == 'use_rem_with_em_fallback' {
-     font-size: em($value);
-     font-size: rem($value);
-  }
-  line-height: line-height($value, $l-h, $base-font, $type-vr);
-  margin: margin-em($value, $l-h, $base-font, $type-vr) ;
-
-}
-
-
-@mixin vendor-prefix($property, $value, $prefixes: webkit moz ms o) {
-
-  @if $prefixes {
-    @each $prefix in $prefixes {
-      #{'-' + $prefix + '-' + $property}: $value;
-    }
-  }
-  #{$property}: $value;
-
-}
-
-
-@mixin color-opacity($color, $opacity: 0.9) {
-    color: $color; /* The Fallback */
-    color: rgba($color, $opacity);
-}
-
-@mixin background-opacity($color, $opacity: 0.9) {
-    background-color: $color; /* The Fallback */
-    background-color: rgba($color, $opacity);
-}
-
-
-
-// Replace `$search` with `$replace` in `$string`
-// @author Hugo Giraudel
-// @param {String} $string - Initial string
-// @param {String} $search - Substring to replace
-// @param {String} $replace ('') - New value
-// @return {String} - Updated string
-@function str-replace($string, $search, $replace: "") {
-  $index: str-index($string, $search);
-
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-  }
-
-  @return $string;
-}
-
-
-
-
-// Generate margins
-// example
-// $list-margin: mt, mr, mb, ml, m;
-// $list-margin-values: 0, 1, 2, 3; // specify 2.5 if needed
-
-@mixin margin-generator ($list-margin, $list-margin-values, $prefix: "") {
-
-  @each $margin-type in $list-margin {
-     @each $margin in $list-margin-values {
-        //$temp_m : str-slice($margin-type, 0, 1);
-        $temp_t : str-slice($margin-type, 2, 3);
-
-        $property: margin;
-
-        @if $temp_t == t {
-           $property: margin-top;
-        } @else if $temp_t == r {
-           $property: margin-right;
-        } @else if $temp_t == b {
-           $property: margin-bottom;
-        } @else if $temp_t == l {
-           $property: margin-left;
-        }
-
-
-        $value : $margin + 0em;
-        /* #{$value} */
-
-        @if $margin == 0 {
-           $value : $margin;
-        }
-
-        // convert to string
-        $text-margin: $margin + '';
-        // 1.5 = 1-5
-        $property-class: str-replace($text-margin, '.', '-');
-
-        // . mr 1-5 { margin-right: 1.5em ;}
-        .#{$prefix}#{$margin-type}#{$property-class} { #{$property}: #{$value}; }
-
-
-        }
-     }
-
-}
-
-
-
-// Generate paddings
-// example
-// $list-padding: pt, pr, pb, pl, p;
-// $list-padding-values: 0, 1, 2, 3; // specify 2.5 if needed
-
-@mixin padding-generator ($list-padding, $list-padding-values, $prefix: "") {
-
-  @each $padding-type in $list-padding {
-     @each $padding in $list-padding-values {
-        //$temp_p : str-slice($padding-type, 0, 1);
-        $temp_t : str-slice($padding-type, 2, 3);
-
-        $property: padding;
-
-        @if $temp_t == t {
-           $property: padding-top;
-        } @else if $temp_t == r {
-           $property: padding-right;
-        } @else if $temp_t == b {
-           $property: padding-bottom;
-        } @else if $temp_t == l {
-           $property: padding-left;
-        }
-
-        $value : $padding + 0em;
-        @if $padding == 0 {
-           $value : $padding;
-        }
-
-        // convert to string
-        $text-padding: $padding + '';
-        // 1.5 = 1-5
-        $property-class: str-replace($text-padding, '.', '-');
-
-        .#{$prefix}#{$padding-type}#{$property-class} { #{$property}: #{$value}; }
-
-
-        }
-     }
-}
-
-
-//
-// Responsive management in em
-//
-
-@mixin respond-to ($breakpoint, $query-type : 'max') {
-  @if $query-type == "max" {
-     @media (max-width: em($breakpoint, $root-default-font-size)) {
-      @content;
-    }
-  }
-
-  @else if $query-type == "min" {
-     @media (min-width: em($breakpoint + 1, $root-default-font-size)) {
-      @content;
-    }
-  }
-
-  @else if $query-type == "height" {
-     @media (max-height: em($breakpoint, $root-default-font-size)) {
-      @content;
-     }
-  }
-
-  @else if $query-type == "min-height" {
-	@media (min-height: em($breakpoint, $root-default-font-size)) {
-	 @content;
-	}
- }
-
-  @else  {
-    @warn "Type non supported.";
-  }
-}
-
-
-//
-// body::before: to get current breakpoint in JS
-//
-@mixin body-before ($value-content, $display-none : false) {
-  @if $value-content != "" {
-    body::before {
-      content: '#{$value-content}';
-      @if $display-none == true {
-        display: none;
-      }
-    }
-  }
-  @else  {
-    @warn "$value-content not specified";
-  }
-
-}
-
-
-//
-// Easing functions for transitions and animations
-// Learn more at http://easings.net/
-//
-
-@function easing($type: 'ease') {
-
-	$value: '';
-
-	@if      $type == 'linear'         { $value: '0, 0, 1, 1'; }
-	@else if $type == 'ease'           { $value: '0.25, 0.1, 0.25, 1'; }
-	@else if $type == 'easeIn'         { $value: '0.42, 0, 1, 1'; }
-	@else if $type == 'easeOut'        { $value: '0, 0, 0.58, 1'; }
-	@else if $type == 'easeInOut'      { $value: '0.42, 0, 0.58, 1'; }
-
-	@else if $type == 'easeInSine'     { $value: '0.12, 0, 0.39, 0'; }
-	@else if $type == 'easeInQuad'     { $value: '0.11, 0, 0.5, 0'; }
-	@else if $type == 'easeInCubic'    { $value: '0.32, 0, 0.67, 0'; }
-	@else if $type == 'easeInQuart'    { $value: '0.5 , 0, 0.75, 0'; }
-	@else if $type == 'easeInQuint'    { $value: '0.64, 0, 0.78, 0'; }
-	@else if $type == 'easeInExpo'     { $value: '0.7 , 0, 0.84, 0'; }
-	@else if $type == 'easeInCirc'     { $value: '0.55, 0, 1, 0.45'; }
-	@else if $type == 'easeInBack'     { $value: '0.36, 0, 0.66, -0.56'; }
-
-	@else if $type == 'easeOutSine'    { $value: '0.61, 1, 0.88, 1'; }
-	@else if $type == 'easeOutQuad'    { $value: '0.5, 1, 0.89, 1'; }
-	@else if $type == 'easeOutCubic'   { $value: '0.33, 1, 0.68, 1'; }
-	@else if $type == 'easeOutQuart'   { $value: '0.25, 1, 0.5, 1'; }
-	@else if $type == 'easeOutQuint'   { $value: '0.22, 1, 0.36, 1'; }
-	@else if $type == 'easeOutExpo'    { $value: '0.16, 1, 0.3, 1'; }
-	@else if $type == 'easeOutCirc'    { $value: '0, 0.55, 0.45, 1'; }
-	@else if $type == 'easeOutBack'    { $value: '0.34, 1.56, 0.64, 1'; }
-
-	@else if $type == 'easeInOutSine'  { $value: '0.37, 0, 0.63, 1'; }
-	@else if $type == 'easeInOutQuad'  { $value: '0.45, 0, 0.55, 1'; }
-	@else if $type == 'easeInOutCubic' { $value: '0.65, 0, 0.35, 1'; }
-	@else if $type == 'easeInOutQuart' { $value: '0.76, 0, 0.24, 1'; }
-	@else if $type == 'easeInOutQuint' { $value: '0.83, 0, 0.17, 1'; }
-	@else if $type == 'easeInOutExpo'  { $value: '0.87, 0, 0.13, 1'; }
-	@else if $type == 'easeInOutCirc'  { $value: '0.85, 0, 0.15, 1'; }
-	@else if $type == 'easeInOutBack'  { $value: '0.68, -0.6, 0.32, 1.6'; }
-
-	@else { @error "'#{$type}' is not a correct value for easing()."; }
-
-	@return cubic-bezier(unquote($value));
-}
diff --git a/templates/@theme-base/reusable-components/_design-system-forms.scss b/templates/@theme-base/reusable-components/_design-system-forms.scss
deleted file mode 100644
index 8b34cdb..0000000
--- a/templates/@theme-base/reusable-components/_design-system-forms.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
- * inputs
- */
-/* resets */
-
-/* makes you want to click on */
-label,
-button,
-input[type="submit"],
-input[type="button"],
-input[type="reset"] {
-  cursor: pointer;
-}
-button[disabled],
-input[type="submit"][disabled],
-input[type="button"][disabled],
-input[type="reset"][disabled] {
-  cursor: default;
-  pointer-events: none;
-}
-
-/* for field texts */
-.label {
-  display: inline-block;
-}
-
-/* avoid dummy resize */
-textarea {
-  resize: vertical;
-  cursor: auto; // fixes an issue on Chrome using CSS custom scroll
-}
-/* remove a Firefox difference on button tag */
-button::-moz-focus-inner { border: 0; padding: 0; }
-
-label,
-button,
-input,
-select {
-  color: currentColor;
-  vertical-align: middle;
-}
-
-@if $use-reset-button == false {
-  /** fix typo inputs **/
-  input,
-  select,
-  textarea,
-  optgroup,
-  button {
-    font: inherit;
-  }
-}
-
-/*
- * avoids dimensioning for radio, checkboxes and images
- * and a different display on IE
- */
-input[type="radio"],
-input[type="checkbox"],
-input[type="image"] {
-  background-color: transparent;
-  border: 0;
-  width: auto;
-}
-// for components that rely on checkboxes
-input[type="radio"],
-input[type="checkbox"] {
-	opacity: 0;
-	// this is a crazy fix for Firefox - for having ::after stuff working on it for mail conversations
-	// to have increased area around checkbox for clicking
-	/* autoprefixer: ignore next */
-	-moz-appearance: initial;
-}
-
-/* to cancel input sizing or other if needed */
-.auto {
-  width: auto;
-  min-width: 0;
-}
-
diff --git a/templates/@theme-base/reusable-components/_design-system-layout-modules.scss b/templates/@theme-base/reusable-components/_design-system-layout-modules.scss
deleted file mode 100644
index 8b2b5be..0000000
--- a/templates/@theme-base/reusable-components/_design-system-layout-modules.scss
+++ /dev/null
@@ -1,920 +0,0 @@
-/**
- * layout
- */
-
-/* it depends, it exceeds (french joke) */
-%reset-responsive-height-max-width {
-    height: auto;
-    max-width: 100%;
-}
-
-blockquote,
-code,
-pre,
-textarea,
-input,
-svg {
-    @extend %reset-responsive-height-max-width;
-}
-
-%reset-responsive-max-width-only {
-    max-width: 100%;
-}
-
-@if $use-height-auto-td==true {
-    td {
-        @extend %reset-responsive-height-max-width;
-    }
-}
-@else {
-    td {
-        @extend %reset-responsive-max-width-only;
-    }
-}
-
-@if $use-height-auto-img==true {
-    img {
-        @extend %reset-responsive-height-max-width;
-    }
-}
-@else {
-    img {
-        @extend %reset-responsive-max-width-only;
-    }
-}
-@if $use-height-auto-table==true {
-    table {
-        @extend %reset-responsive-height-max-width;
-    }
-}
-@else {
-    table {
-        @extend %reset-responsive-max-width-only;
-    }
-}
-
-/* no reset on embed, object & video, some players don't like */
-
-
-.hauto {
-    height: auto;
-}
-
-/* useful to manage floats */
-/* containing floats */
-.mod,
-.scroll-if-needed {
-    overflow: auto;
-}
-
-.scroll-horizontal-if-needed {
-    overflow-x: auto;
-}
-
-.mod--hidden,
-.no-scroll {
-    overflow: hidden;
-}
-
-.scroll-smooth-touch {
-    -webkit-overflow-scrolling: touch;
-}
-
-/* some floattings */
-.left {
-    float: left;
-}
-
-.right {
-    float: right;
-}
-
-@if $rtl-option==true {
-
-    /* RTL */
-    [dir="rtl"] .left {
-        float: right;
-    }
-
-    [dir="rtl"] .right {
-        float: left;
-    }
-}
-
-/* clear floats */
-.clear {
-    clear: both;
-}
-
-@if $use-clearleft_right==true {
-    .clearleft {
-        clear: left;
-    }
-
-    .clearright {
-        clear: right;
-    }
-
-    @if $rtl-option==true {
-
-        /* RTL */
-        [dir="rtl"] .clearleft {
-            clear: right;
-        }
-
-        [dir="rtl"] .clearright {
-            clear: left;
-        }
-    }
-}
-
-@if $use-clearhidden==true {
-    .clearhidden {
-        clear: both;
-        margin: 0;
-        padding: 0;
-        visibility: hidden;
-    }
-}
-
-@if $use-clearfix==true {
-    .clearfix:after {
-        content: ".";
-        display: block;
-        height: 0;
-        clear: both;
-        visibility: hidden;
-    }
-}
-
-/* gut: "spacing" empty div */
-.gut {
-    height: 1px;
-}
-
-/* table-design in CSS */
-.row {
-    display: table;
-    table-layout: fixed;
-}
-
-.inline-row {
-    display: inline-table;
-    table-layout: fixed;
-}
-
-.line {
-    display: table-row;
-}
-
-.col {
-    display: table-cell;
-    vertical-align: top;
-}
-
-.col-noalign {
-    display: table-cell;
-}
-
-/* alignments */
-.aligntop {
-    vertical-align: top;
-}
-
-.alignbottom {
-    vertical-align: bottom;
-}
-
-.alignmiddle {
-    vertical-align: middle;
-}
-
-.alignbaseline {
-    vertical-align: baseline;
-}
-
-.alignsub {
-    vertical-align: sub;
-}
-
-/* block */
-.bl {
-    display: block;
-}
-
-.inline {
-	display: inline;
-}
-
-/* inline-block, useful for grids, and not only */
-.inbl {
-    display: inline-block;
-}
-
-/* grid = element of inline-grid */
-.grid {
-    @extend .inbl;
-    @extend .aligntop;
-}
-
-/* to relativize */
-.relative {
-    position: relative;
-}
-
-/* centered block */
-.center {
-    margin-left: auto;
-    margin-right: auto;
-}
-
-/* to absolute */
-.absolute {
-    position: absolute;
-    z-index: 1;
-}
-.z667 {
-	z-index: 667;
-}
-
-/* to centered absolute */
-.centered-absolute {
-	position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-.centered-absolute-horizontal {
-	left: 50%;
-    transform: translate(-50%, 0%);
-}
-
-.covered-absolute {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-}
-
-/* to top right */
-.top-right {
-    top: 0;
-    right: 0;
-}
-
-.bottom {
-	bottom: 0;
-}
-
-@if $rtl-option==true {
-    [dir="rtl"] {
-        .top-right {
-            left: 0;
-            right: auto;
-        }
-    }
-}
-
-.right-icon,
-.right-text {
-    top: 0;
-    right: .5em;
-	height: $default-height-fields; // height of field
-	align-content: center;
-}
-.right-text {
-	right: 1em;
-}
-.right-text-inner {
-	padding-bottom: .2rem;
-}
-
-@if $rtl-option==true {
-    [dir="rtl"] {
-        .right-icon,
-		.right-text {
-            left: .5em;
-            right: auto;
-		}
-		.right-text {
-			left: 1em;
-		}
-    }
-}
-
-
-
-.fixed {
-    position: fixed;
-}
-
-
-.sticky {
-	&-top,
-	&-bottom {
-		position: sticky;
-		z-index: 1;
-	}
-
-	&-top {
-		top: 0;
-	}
-
-	&-bottom {
-		bottom: 0;
-	}
-}
-
-/* hardware-acceleration activation */
-.hardware-accelerated {
-    @include vendor-prefix(transform, translateZ(0));
-}
-
-/* block widths */
-.w0 {
-    width: 0;
-}
-
-.w1 {
-    width: 1%;
-}
-
-.w2 {
-    width: 2%;
-}
-
-.w3 {
-    width: 3%;
-}
-
-.w5 {
-    width: 5%;
-}
-
-.w10 {
-    width: 10%;
-}
-
-.w15 {
-    width: 15%;
-}
-
-.w20 {
-    width: 20%;
-}
-
-.w25 {
-    width: 25%;
-}
-
-.w30 {
-    width: 30%;
-}
-
-.w33 {
-    width: 33.333%;
-}
-
-.w40 {
-    width: 40%;
-}
-
-.w45 {
-    width: 45%;
-}
-
-.w49 {
-    width: 49%;
-}
-
-.w50 {
-    width: 50%;
-}
-
-.w60 {
-    width: 60%;
-}
-
-.w66 {
-    width: 66.666%;
-}
-
-.w70 {
-    width: 70%;
-}
-
-.w75 {
-    width: 75%;
-}
-
-.w80 {
-    width: 80%;
-}
-
-.w90 {
-    width: 90%;
-}
-
-.w95 {
-    width: 95%;
-}
-
-.w100 {
-    width: 100%;
-}
-
-/* here you may add px widths */
-$list-width-px: 40, 50, 70, 150, 200, 500 !default;
-// ex .w500p { width: 500px; }
-
-@each $width in $list-width-px {
-    .w#{$width}p {
-        width: #{$width}px;
-    }
-}
-
-/* here you may add rem widths */
-$list-width-rem: 33 !default; // say 33
-// ex .w500p { width: 500px; }
-
-@each $width in $list-width-rem {
-    .w#{$width}r {
-        width: #{$width}rem;
-    }
-}
-
-/* here you may add em widths */
-$list-width-em: 2, 6, 8, 10, 11, 13, 14, 16 !default;
-// ex .w16e { width: 16em; }
-
-@each $width in $list-width-em {
-    .w#{$width}e {
-        width: #{$width}em;
-    }
-}
-
-/* max-block widths */
-
-/* here you may add max-widths % */
-$list-max-widths: 50, 60, 80, 100 !default;
-@each $max-width in $list-max-widths {
-    .mw#{$max-width} {
-        max-width: #{$max-width * 1%};
-    }
-}
-
-/* here you may add pixel max-widths */
-$list-max-width-px: 100, 650 !default;
-
-@each $max-width in $list-max-width-px {
-    .mw#{$max-width}p {
-        max-width: #{$max-width}px;
-    }
-}
-
-/* here you may add ch max-widths */
-$list-max-width-ch: 70 !default;
-
-@each $max-width in $list-max-width-ch {
-    .mw#{$max-width}ch {
-        max-width: #{$max-width}ch;
-    }
-}
-
-/* here you may add em max-widths */
-$list-max-width-em: 5, 7, 8, 13, 15, 18, 30, 37, 40, 50 !default;
-
-@each $max-width in $list-max-width-em {
-    .mw#{$max-width}e {
-        max-width: #{$max-width}em;
-    }
-}
-
-$list-min-width-em: 1.4, 3, 5, 14, 35 !default;
-
-@each $min-width in $list-min-width-em {
-    $fragment-class: str-replace(inspect($min-width), '.', '-'); // inspect to convert to string
-
-    .min-w#{$fragment-class}e {
-        min-width: #{$min-width}em;
-    }
-}
-
-
-$list-min-height-em: 5, 16 !default;
-
-@each $min-height in $list-min-height-em {
-    .min-h#{$min-height}e {
-        min-height: #{$min-height}em;
-    }
-}
-
-
-.h100 {
-    height: 100%;
-}
-
-.h100v {
-    height: 100vh;
-}
-
-/* margins */
-.mt1r {
-    margin-top: 1rem;
-}
-
-.mt0-5r {
-    margin-top: .5rem;
-}
-
-.mr0-5r {
-    margin-right: .5rem;
-}
-
-$list-margins: m, mt, mr, mb, ml !default;
-$list-margins-values: 0, 0.1, 0.25, 0.4, 0.5, 0.6, 0.75, 1, 1.5, 2, 4 !default; // specify 2.5 if needed
-
-@include margin-generator($list-margins, $list-margins-values);
-
-.mtauto {
-    margin-top: auto;
-}
-
-.mrauto {
-    margin-right: auto;
-}
-
-.mbauto {
-    margin-bottom: auto;
-}
-
-.mlauto {
-    margin-left: auto;
-}
-
-.mauto {
-    margin: auto;
-}
-
-@if $rtl-option==true {
-    [dir="rtl"] {
-        .mrauto {
-            margin-right: 0;
-            margin-left: auto;
-        }
-
-        .mlauto {
-            margin-left: 0;
-            margin-right: auto;
-        }
-    }
-}
-
-/* paddings */
-
-$list-paddings: p, pt, pr, pb, pl !default;
-$list-paddings-values: 0, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4 !default; // specify 2.5 if needed
-
-@include padding-generator($list-paddings, $list-paddings-values);
-
-/* to hide text with accessibility… a11y */
-.invisible,
-.sr-only {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-	width: 1px;
-	top: 0; // needed for Safari dumb and 💩 behaviour
-}
-
-.nonvisible {
-    visibility: hidden;
-}
-
-.opacity-50 {
-    opacity: 0.5;
-}
-
-.opacity-40 {
-    opacity: 0.4;
-}
-
-.opacity-30 {
-    opacity: 0.3;
-}
-
-.filter-blur {
-    filter: blur(4px);
-}
-
-.hidden,
-[hidden],
-.display-on-darkmode {
-    display: none;
-}
-
-/* hidden everywhere */
-.nodesktop {
-    display: none;
-}
-
-/* hidden on desktop */
-/*.noprint   {} /* hidden on print */
-/*.notablet  {} /* hidden on tablets */
-/*.nomobile  {} /* hidden on mobile */
-
-.list-2columns {
-    -webkit-column-count: 2;
-    -moz-column-count: 2;
-    column-count: 2;
-    -webkit-column-gap: 0;
-    -moz-column-gap: 0;
-    column-gap: 0;
-
-    & > * {
-        -webkit-column-break-inside: avoid;
-        /* Chrome, Safari, Opera */
-        page-break-inside: avoid;
-        /* Firefox */
-        break-inside: avoid;
-        /* IE 10+ */
-        break-inside: avoid-column;
-        /* W3C */
-    }
-}
-
-/*
- * ratio container (for responsive iframes/videos/etc.)
- */
-[class*="ratio-container-"] {
-    width: 100%;
-    height: 0;
-    @extend .relative;
-}
-
-.ratio-container-square {
-    padding-top: 100%;
-}
-
-.ratio-container-16-9 {
-    padding-top: 56.25%;
-}
-
-.ratio-container-5-1 {
-    padding-top: 20%;
-}
-
-.inner-ratio-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
-/*
- * Flexbox helpers, also name tartiflex
- */
-.inline-flex,
-.inline-flex-vcenter {
-    display: -webkit-inline-box;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-}
-
-.flex,
-.flex-flex-children,
-.flex-noMinChildren {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-}
-
-.flex-row {
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: row;
-    flex-direction: row;
-}
-
-.flex-reverse {
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: reverse;
-    -ms-flex-direction: row-reverse;
-    flex-direction: row-reverse;
-}
-
-.flex-column {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column;
-}
-
-.flex-column-reverse {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: reverse;
-    -ms-flex-direction: column-reverse;
-    flex-direction: column-reverse;
-}
-
-.flex-spacebetween {
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-}
-
-.flex-spacearound {
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-around;
-}
-
-.flex-justify-start {
-    -webkit-box-pack: start;
-    -ms-flex-pack: start;
-    justify-content: flex-start;
-}
-
-.flex-justify-end {
-    -webkit-box-pack: end;
-    -ms-flex-pack: end;
-    justify-content: flex-end;
-}
-
-.flex-justify-center {
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-}
-
-.flex-nowrap {
-    -ms-flex-wrap: nowrap;
-    flex-wrap: nowrap;
-}
-
-/* fix aspect ratio */
-.flex > *,
-.no-min-dims {
-  min-height: 0;
-  min-width: 0;
-}
-
-.flex-flex-children > * {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-}
-
-.inline-flex-vcenter > *,
-.flex-item-centered-vert {
-    margin-top: auto;
-    margin-bottom: auto;
-    align-self: center;
-}
-
-.flex-items-center {
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    -ms-grid-row-align: center;
-    align-items: center;
-}
-
-.flex-items-baseline {
-    -webkit-box-align: baseline;
-    -ms-flex-align: baseline;
-    -ms-grid-row-align: baseline;
-    align-items: baseline;
-}
-
-.flex-items-start {
-    -webkit-box-align: start;
-    -ms-flex-align: start;
-    -ms-grid-row-align: flex-start;
-    align-items: flex-start;
-}
-
-.flex-items-end {
-    -webkit-box-align: end;
-    -ms-flex-align: end;
-    -ms-grid-row-align: flex-end;
-    align-items: flex-end;
-}
-
-.flex-items-stretch {
-    align-items: stretch;
-}
-
-.flex-item-fluid {
-    -webkit-box-flex: 1;
-    -ms-flex: 1 1 0px;
-    flex: 1 1 0px;
-}
-
-.flex-item-fluid-auto {
-    flex: 1 1 auto;
-}
-
-.flex-item-noshrink {
-    -ms-flex-negative: 0;
-    flex-shrink: 0;
-}
-
-.flex-item-nogrow {
-    -webkit-box-flex: 0;
-    -ms-flex-positive: 0;
-    flex-grow: 0;
-}
-
-.flex-item-grow-2 {
-    -webkit-box-flex: 2;
-    -ms-flex-positive: 2;
-    flex-grow: 2;
-}
-
-.flex-item-noflex {
-    -webkit-box-flex: 0;
-    -ms-flex: 0;
-    flex: 0;
-}
-
-.flex-self-vcenter {
-    -ms-flex-item-align: center;
-    align-self: center;
-}
-
-.flex-self-start {
-    -ms-flex-item-align: start;
-    align-self: flex-start;
-}
-
-.flex-self-end {
-    -ms-flex-item-align: end;
-    align-self: flex-end;
-}
-
-.flex-autogrid {
-    margin: 0 -0.5em;
-    @extend .flex;
-    @extend .flex-spacebetween;
-}
-
-.flex-autogrid-item {
-    @extend .flex-item-fluid;
-    padding: 0 0.5em 1em;
-}
-
-.flex-autogrid-item.pb0 {
-    padding-bottom: 0;
-}
-
-.inline-grid-container {
-	display: inline-grid;
-}
-
-/* RTL/others */
-.mirror,
-[dir="rtl"] .on-rtl-mirror {
-    -webkit-transform: rotateY(180deg);
-    transform: rotateY(180deg);
-}
-
-.rotateX-180 {
-    -webkit-transform: rotateX(180deg);
-    transform: rotateX(180deg);
-}
-
-.rotateZ-90 {
-    -webkit-transform: rotateZ(90deg);
-    transform: rotateZ(90deg);
-}
-
-.rotateZ-270 {
-    -webkit-transform: rotateZ(270deg);
-    transform: rotateZ(270deg);
-}
-
-/* increase surface click/tap */
-.increase-surface-click::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
-.no-pointer-events,
-.no-pointer-events-children * {
-    pointer-events: none;
-}
diff --git a/templates/@theme-base/reusable-components/_design-system-links-icons.scss b/templates/@theme-base/reusable-components/_design-system-links-icons.scss
deleted file mode 100644
index 0207be2..0000000
--- a/templates/@theme-base/reusable-components/_design-system-links-icons.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-/* links */
-
-/* remember focus */
-a,
-.link {
-  color: $color-links;
-  text-decoration: underline;
-  cursor: pointer;
-
-  &:focus,
-  &:hover,
-  &:active {
-    color: $color-hover;
-    text-decoration: underline;
-  }
-}
-
-.nodecoration {
-  text-decoration: none;
-}
-.underline {
-  text-decoration: underline;
-}
-.underline-hover:hover,
-.underline-hover:focus {
-  text-decoration: underline;
-}
-
-.primary-link {
-  &:focus,
-  &:hover {
-    color: $pm-primary;
-  }
-}
-
-.hover-same-color {
-  &:focus,
-  &:hover {
-    &.color-white {
-      color: $white;
-    }
-    &.primary-link {
-      color: $pm-primary;
-    }
-  }
-}
-
-.button-showOnHover:focus,
-.button-showOnHover:hover {
-	.button-showOnHover-element {
-		visibility: visible;
-	}
-}
-
-
-
-/* links with icons, may use DATA-URI */
-
-/* external links */
-/*a[href^="http://"],
-a[href^="https://"] {
-
-}*/
-/* if full URL of the website in an internal link, remove icon */
-/*a[href^="http://www.mydomain.com"] {
-
-}*/
-/* contact, mailto links */
-/*.mail,
-a[href^="mailto:"] {
-
-}*/
-/* if URL ends with .pdf or whatever */
-/*a[href$=".pdf"] {
-
-}*/
-
-/* facto icons */
-[class*="icon-"] {
-  @extend .alignmiddle;
-  @extend .inbl;
-  fill: currentColor;
-}
-
-$list-icon-pixels: 6,8,10,11,12,14,16,18,20,24,28,40,42,60,100 !default;
-
-@each $width in $list-icon-pixels {
-  .icon-#{$width}p {
-    width: #{$width}px;
-    height: #{$width}px;
-  }
-}
-
-$list-icon-percent: 50 !default;
-@each $width in $list-icon-percent {
-  .icon-#{$width} {
-    width: percentage($width / 100);
-    height: percentage($width / 100);
-  }
-}
-
-.path2x {
-  stroke-width: 1px;
-  &.fill-global-light {
-    stroke: $pm-global-light;
-  }
-}
diff --git a/templates/@theme-base/reusable-components/_design-system-print.scss b/templates/@theme-base/reusable-components/_design-system-print.scss
deleted file mode 100644
index eadc123..0000000
--- a/templates/@theme-base/reusable-components/_design-system-print.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-@media print {
-  /**
-   * add in this all elements which need to be hardly reseted for print
-   */
-  body,
-  html,
-  .page,
-  .reset4print {
-    background-color: $white;
-    background-image: none;
-    border: 0;
-    box-shadow: none;
-    color: $black;
-    float: none;
-    height: auto;
-    margin: 0;
-    max-width: 100%;
-    min-height: 0;
-    padding: 0;
-    position: static;
-    width: auto;
-    opacity: 1;
-    visibility: visible;
-    max-height: none;
-    display: block;
-  }
-
-  .is-printed-version {
-	.pm-modalContainer,
-	.pm-modal,
-	.pm-modalContentInner,
-	.pm-modalContent {
-		@extend .reset4print;
-	}
-	.pm-modalContentInner::before,
-	.pm-modalContentInner::after {
-		content: none;
-	}
-  }
-
-  body {
-    padding: .5em;
-	overflow: auto;
-
-	/* put back normal mode for print :) */
-	--bgcolor-item-column-list: initial;
-	--bgcolor-unread-item-column-list: initial;
-	--bgcolor-view-column-detail: initial;
-	--bgcolor-main-area: initial;
-	--bgcolor-context-bar: initial;
-	--bgcolor-toolbar: initial;
-	--color-context-bar-link: initial;
-	--color-main-area: initial;
-	--fillcolor-icons: initial;
-	--bgcolor-disabled-checkboxes-radios: initial;
-	--bgcolor-item-column-active: initial;
-	--bordercolor-input: initial;
-	--bgcolor-input: initial;
-	--bgcolor-highlight: initial;
-	--color-input: initial;
-
-	.pm-button:not(.pm-button--primary):not(.pm-button--link), .pm-button--info {
-		border-color: $pm-global-border;
-		background: $white;
-		color: $pm-global-grey;
-	}
-
-  }
-
-
-  /* hide unnecessary elements */
-  .noprint {
-    display: none;
-  }
-  .is-printed-version {
-	.app-root,
-	.pm-modalOverlay,
-	.pm-modalHeader,
-	.pm-modalFooter,
-	.pm-modalContentInnerTopShadow,
-	.pm-modalContentInnerBottomShadow,
-	.item-icon,
-	[class^="scrollshadow-"] {
-		@extend .noprint;
-	}
-  }
-
-  /* display specific elements for print */
-  .onprint {
-    display: block;
-  }
-
-  /* avoid problematic page break */
-  ul, ol {
-    page-break-inside: avoid;
-  }
-  h1, h2, h3, caption {
-    page-break-after: avoid;
-  }
-
-
-} /* end print */
diff --git a/templates/@theme-base/reusable-components/_design-system-reduced-motion.scss b/templates/@theme-base/reusable-components/_design-system-reduced-motion.scss
deleted file mode 100644
index 437cc53..0000000
--- a/templates/@theme-base/reusable-components/_design-system-reduced-motion.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * reduced motion MQ: for vestibular disorders
- */
-@media (prefers-reduced-motion: reduce) {
-  *, *:before, *:after {
-    animation-duration: 0s !important;
-    transition-duration: 0s !important;
-  }
-}
\ No newline at end of file
diff --git a/templates/@theme-base/reusable-components/_design-system-reset.scss b/templates/@theme-base/reusable-components/_design-system-reset.scss
deleted file mode 100644
index 3554888..0000000
--- a/templates/@theme-base/reusable-components/_design-system-reset.scss
+++ /dev/null
@@ -1,181 +0,0 @@
-/* for HTML 5 */
-article, aside, datagrid, datalist, details, dialog, figure, footer, header, main, menu, nav, section { display: block; }
-audio, canvas, progress, video { display: inline-block; }
-abbr, eventsource, mark, meter, time, output, bb { display: inline; }
-
-/* to comment/fallback if you care about IE<8 */
-html { box-sizing: border-box; }
-*, *:before, *:after {
-  box-sizing: inherit;
-}
-
-/* reset minimum */
-html, body, blockquote, ul, ol, form, button, figure { margin: 0; padding: 0; }
-button, progress { border: 0; }
-p, ul, ol, dl, blockquote, pre, menu, td, th {
-  font-size: 1em;
-  line-height: $l-h;
-  margin: $l-h * 1em 0;
-}
-
-@if $use-reset-button == true {
-  /* reset buttons, remember to style them in forms */
-  input, select, textarea, optgroup, button {
-    background: transparent;
-    border: 0;
-    font: inherit;
-    -webkit-appearance: none;
-  }
-  // -webkit-appearance: none makes vocalization failing
-  input[type="checkbox"] {
-	-webkit-appearance: checkbox;
-  }
-  input[type="radio"] {
-	-webkit-appearance: radio;
-  }
-
-}
-@else {
-	input, select, textarea, optgroup, button {
-		font: inherit;
-	}
-}
-
-/* fix display img/iframe */
-img,
-iframe { vertical-align: middle; }
-
-ul, ol, menu { padding-left: 2em; }
-
-dd { margin-left: 2em; }
-
-
-@if $rtl-option == true {
-  /* RTL */
-  [dir="rtl"] {
-	ul,
-    ol {
-    	padding-left: 0;
-    	padding-right: 2em;
-	  }
-	dd {
-		margin-left: 0;
-		margin-right: 2em;
-	}
-  }
-}
-
-
-@if $root-equiv-10-px == true {
-  /* base font size at 10px */
-  html {
-	font-size: 62.5%;
-	@if ( $use-ie-calc-font-fallback == true ){
-		font-size: calc(1em * 0.625);
-	}
-  }
-}
-
-@if $apply-body-styles == true {
-	body {
-	background: $pm-global-grey;
-	color: $pm-global-light;
-	font-family: $font-family;
-	text-rendering: geometricPrecision;
-	-webkit-font-smoothing: antialiased;
-
-	@if $typo-unit == 'use_em' {
-		@if $root-equiv-10-px == true {
-		font-size: em($base-font, 10);
-		}
-		@else {
-			font-size: em($base-font, $root-default-font-size);
-			}
-	}
-	@else if $typo-unit == 'use_rem' {
-		font-size: var(--body-fontsize, rem($base-font));
-	}
-	@else if $typo-unit == 'use_rem_with_em_fallback' {
-		@if $root-equiv-10-px == true {
-		font-size: em($base-font, 10);
-		}
-		@else {
-			font-size: em($base-font, $root-default-font-size);
-			}
-		font-size: rem($base-font);
-	}
-	line-height: $l-h;
-	min-height: 100%;
-	}
-}
-
-
-// Sass placeholder, don't touch if you are not sure ;)
-%bold {
-    font-weight: bold;
-}
-b, strong {
-	@extend %bold;
-}
-
-/* harmonization between Chrome/Firefox */
-pre, code, kbd, samp {
-	font-family: $font-family-monospace;
-	font-size: 1em;
-}
-pre {
-    white-space: pre-wrap;
-    word-wrap: break-word;
-}
-
-// tiny reset for mark tag
-mark {
-	@if ( $use-color-reset-mark == true ) {
-		background-color: unset;
-	}
-	@else {
-		background-color: var(--bgcolor-mark, $default-bgColor-mark);
-	}
-	color: var(--color-mark, currentColor);
-	font-weight: bold;
-}
-
-small {
-	font-size: 80%;
-}
-
-
-/* avoid border on images in links + fix border image IE */
-a:link img,
-a:visited img,
-img {
-	border-style: none;
-}
-
-/* tiny control */
-audio:not([controls]) {
-    display: none;
-    height: 0;
-}
-
-/* important, abbr are good */
-/* only those with a title are shown */
-abbr[title] {
-  border-bottom: dotted 1px;
-  cursor: help;
-  text-decoration: none;
-  /* color inherited from text */
-}
-
-
-code,
-pre,
-samp {
-  white-space: pre-wrap;
-}
-code {
-  line-height: 1;
-}
-dfn {
-    font-style: italic;
-}
diff --git a/templates/@theme-base/reusable-components/_design-system-responsive.scss b/templates/@theme-base/reusable-components/_design-system-responsive.scss
deleted file mode 100644
index 83edd6d..0000000
--- a/templates/@theme-base/reusable-components/_design-system-responsive.scss
+++ /dev/null
@@ -1,299 +0,0 @@
-/* general case */
-@include body-before ('desktop', true);
-
-
-/**
- * medium/tablet landscape minor breakpoint
- */
-@include respond-to($breakpoint-medium-landscape) {
-
-	$list-paddings-medium-landscape: p, pt, pr, pb, pl !default;
-	$list-paddings-medium-landscape-values: 0, 1 !default; // specify 2.5 if needed
-
-	@include padding-generator($list-paddings-medium-landscape, $list-paddings-medium-landscape-values, "ontablet-landscape-");
-
-}
-
-/**
- * medium/tablet breakpoint
- */
-@include respond-to($breakpoint-medium, 'min') {
-	.ondesktop {
-		&-h100 {
-			height: 100%;
-		}
-	}
-}
-
-/**
- * medium/tablet breakpoint
- */
-@include respond-to($breakpoint-medium) {
-
-  /**
-   * layout/modules
-   */
-
-  /* display elements */
-  .nodesktop { display: block; }
-
-  /* hide unnecessary elements */
-  .notablet { display: none; }
-
-  /* linearization of floating content/table-layout */
-  .autotablet {
-    float: none;
-    display: block;
-    width: auto;
-  }
-
-  /* margins */
-  $list-margins-tablet: m, mt, mr, mb, ml !default;
-  $list-margins-tablet-values: 0, 1, 2 !default; // specify 2.5 if needed
-
-  @include margin-generator($list-margins-tablet, $list-margins-tablet-values, "ontablet-");
-
-  /* paddings */
-  $list-paddings-tablet: p, pt, pr, pb, pl !default;
-  $list-paddings-tablet-values: 0, 1, 2 !default; // specify 2.5 if needed
-
-  @include padding-generator($list-paddings-tablet, $list-paddings-tablet-values, "ontablet-");
-
-  /* text aligns */
-  .ontablet- {
-    &alignleft   { text-align: left; }
-    &aligncenter { text-align: center; }
-    &alignright  { text-align: right; }
-  }
-
-  .ontablet- {
-    &flex-column {
-      flex-direction: column;
-      & > * {
-        width: 100%;
-        flex-basis: auto;
-      }
-	}
-
-    &w25         { width: 25%; }
-    &w100        { width: 100%; }
-    &mw100       { max-width: 100%; }
-	&wauto       { width: auto; }
-
-	@for $i from 2 through 3 {
-		&hideTd#{$i} {
-			td:nth-child(#{$i}) {
-				display: none;
-			}
-		}
-	}
-
-	&list-1column {
-		-webkit-column-count: 1;
-		   -moz-column-count: 1;
-				column-count: 1;
-	}
-
-  }
-
-  /**
-   * global structure adaptation (page / skip links / header / main content / footer)
-   */
-  @include body-before ('tablet');
-
-}
-
-
-
-
-/**
- * small/mobile breakpoint
- */
-@include respond-to($breakpoint-small) {
-
-  /**
-   * layout/modules
-   */
-
-  /* display elements */
-  .notablet { display: block; }
-
-  /* hide unnecessary elements */
-  .nomobile { display: none; }
-
-  /* linearization of floating content/table-layout */
-  .automobile {
-    float: none;
-    display: block;
-    width: auto;
-  }
-
-  /* margins */
-  $list-margins-mobile: m, mt, mr, mb, ml !default;
-  $list-margins-mobile-values: 0, 0.25, 0.5, 1, 2, 3.5 !default; // specify 2.5 if needed
-
-  @include margin-generator($list-margins-mobile, $list-margins-mobile-values, "onmobile-");
-
-  /* paddings */
-  $list-paddings-mobile: p, pt, pr, pb, pl !default;
-  $list-paddings-mobile-values: 0, 0.25, 0.5, 1, 2 !default; // specify 2.5 if needed
-
-  @include padding-generator($list-paddings-mobile, $list-paddings-mobile-values, "onmobile-");
-
-  /* text aligns */
-  .onmobile- {
-    &alignleft   { text-align: left; }
-    &aligncenter { text-align: center; }
-    &alignright  { text-align: right; }
-  }
-
-  .onmobile- {
-    &flex-column {
-      flex-direction: column;
-      & > * {
-        width: 100%;
-        flex-basis: auto;
-      }
-      &.flex-autogrid {
-		margin: 0;
-		&.mb1 {
-			margin-bottom: 1em;
-		}
-      }
-      & > .flex-autogrid-item {
-        padding: 0;
-        min-height: auto;
-      }
-    }
-    &flex-column-nostretch {
-      flex-direction: column;
-      & > * {
-        align-self: center;
-      }
-	}
-	&flex-item-fluid {
-		flex: 1 1 0px;
-	}
-	&flex-item-fluid-auto {
-		flex: 1 1 auto;
-	}
-	&no-flex {
-		flex: 0 0 auto;
-	}
-	&flex-shrink {
-		flex-shrink: 1;
-	}
-	&flex-self-start {
-		align-self: start;
-	}
-	&flex-wrap {
-      flex-wrap: wrap;
-    }
-	&mw100 {
-      max-width: 100%;
-    }
-	&min-w100 {
-      min-width: 100%;
-    }
-    &wauto {
-      width: auto;
-    }
-    &w25{
-      width: 25%;
-	}
-	&w33{
-      width: 33%;
-	}
-	&w100 {
-      width: 100%;
-	}
-	&no-border {
-		border: 0;
-	}
-
-    &static {
-      position: static;
-	}
-	@for $i from 2 through 5 {
-		&hideTd#{$i} {
-			td:nth-child(#{$i}) {
-				display: none;
-			}
-		}
-	}
-	&list-1column {
-		-webkit-column-count: 1;
-		   -moz-column-count: 1;
-				column-count: 1;
-	}
-  }
-
-
-  /**
-   * global structure adaptation (page / skip links / header / main content / footer)
-   */
-  @include body-before ('mobile');
-
-}
-
-
-
-/**
- * tiny/small mobile breakpoint
- */
-@include respond-to($breakpoint-tiny) {
-
-  /**
-   * layout/modules
-   */
-
-  /* display elements */
-  /*.nomobile { display: block; }*/
-
-  /* hide unnecessary elements */
-  .notinymobile { display: none; }
-
-  /* linearization of floating content/table-layout */
-  .autotinymobile {
-    float: none;
-    display: block;
-    width: auto;
-  }
-  .ontinymobile- {
-    &wauto {
-      width: auto;
-	}
-	&flex-self-start {
-		align-self: flex-start;
-	}
-	&flex-column {
-      flex-direction: column;
-      & > * {
-        width: 100%;
-        flex-basis: auto;
-      }
-	}
-	&hideTd3 {
-		td:nth-child(3) {
-			display: none;
-		}
-	}
-  }
-  /* margins */
-  $list-margins-tinymobile: m, mt, mr, mb, ml !default;
-  $list-margins-tinymobile-values: 0, 1 !default;
-
-  @include margin-generator($list-margins-tinymobile, $list-margins-tinymobile-values, "ontinymobile-");
-
-  /* paddings */
-  //$list-paddings-tinymobile: p, pt, pr, pb, pl !default;
-  //$list-paddings-tinymobile-values: 0, 1, 2 !default; // specify 2.5 if needed
-
-  //@include padding-generator($list-paddings-tinymobile, $list-paddings-tinymobile-values, "ontinymobile-");
-
-  /**
-   * global structure adaptation (page / skip links / header / main content / footer)
-   */
-  @include body-before ('tinymobile');
-
-}
diff --git a/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss b/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss
deleted file mode 100644
index b54dd8f..0000000
--- a/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss
+++ /dev/null
@@ -1,222 +0,0 @@
-.noborder,
-iframe,
-dialog { border: 0; }
-
-.border-collapse {
-  border-collapse: collapse;
-}
-
-.unstyled {
-	padding-left: 0;
-	list-style-type: none;
-}
-
-@if $rtl-option == true {
-	/* RTL */
-	[dir="rtl"] {
-		.unstyled {
-			padding-right: 0;
-		}
-	}
-}
-
-/*
- * taken from http://tinytypo.tetue.net/ made by @tetue
- * tuned with the help of https://www.nicolas-hoffmann.net/utilitaires/codes-hexas-ascii-unicode-utf8-caracteres-usuels.php
- *
- * see https://en.wikipedia.org/wiki/Quotation_mark#Summary_table for reference
- */
-q {
-  quotes: "\201C" "\201D" "\2018" "\2019";
-}
-:lang(fr) > q {
-  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019";
-}
-:lang(en) > q {
-  quotes: "\201C" "\201D" "\2018" "\2019";
-}
-q:before {
-  content: open-quote;
-}
-q:after {
-  content: close-quote;
-}
-
-@import './_includes/_resets/typo-sub-sup';
-
-/* avoid margin problems */
-@if $vertical-rhythm == 'single_top' or $vertical-rhythm == 'double_top_single_bottom' {
-  h1,.h1,
-  h2,.h2,
-  h3,.h3,
-  h4,.h4,
-  h5,.h5,
-  h6,.h6{
-    &:first-child {
-      margin-top: 0;
-    }
-  }
-  /* remove bottom margin on last child */
-  p,
-  ul,
-  ol,
-  dl,
-  blockquote,
-  pre,
-  table {
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-}
-
-/* avoid margin on nested elements */
-li p,
-li ul {
-  margin-bottom: 0;
-  margin-top: 0;
-}
-
-/* Hyphenation: Thou shalt not pass (Moïse or Gandalf, don’t remember) */
-@if $hyphenation == true {
-  textarea,
-  table,
-  td,
-  th,
-  code,
-  pre,
-  samp,
-  div,
-  p {
-    word-break: break-word;
-  }
-  @supports (-webkit-hyphens: auto) or (hyphens: auto) {
-    textarea,
-    table,
-    td,
-    th,
-    code,
-    pre,
-    samp,
-    div,
-    p {
-      word-break: normal;
-      @include vendor-prefix(hyphens, auto, webkit);
-    }
-  }
-}
-@else {
-  .cut {
-    word-break: break-word;
-  }
-  @supports (-webkit-hyphens: auto) or (hyphens: auto) {
-    .cut {
-      word-break: normal;
-      @include vendor-prefix(hyphens, auto, webkit);
-    }
-  }
-}
-
-/* remove hyphenation if needed */
-.nocut {
-  word-wrap: normal;
-}
-@supports (-webkit-hyphens: auto) or (hyphens: auto) {
-  .nocut {
-    @include vendor-prefix(hyphens, none, webkit);
-  }
-}
-
-.break {
-  word-break: break-word;
-}
-.hyphens {
-	@include vendor-prefix(hyphens, auto, webkit);
-}
-
-kbd {
-  border: solid 1px;
-  border-top-left-radius: .5em;
-  border-top-right-radius: .5em;
-  padding: 0 .25em;
-}
-table {
-  margin-bottom: 1.5em;
-  table-layout: fixed;
-}
-
-/* text aligns */
-.alignright  { text-align: right; }
-.aligncenter { text-align: center; }
-.alignleft   { text-align: left; }
-
-@if $rtl-option == true {
-  /* RTL */
-  [dir="rtl"] .alignright  { text-align: left; }
-  [dir="rtl"] .alignleft   { text-align: right; }
-}
-
-.ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.ellipsis-two-lines,
-.ellipsis-four-lines {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-.ellipsis-two-lines {
-  -webkit-line-clamp: 2;
-}
-.ellipsis-four-lines {
-  -webkit-line-clamp: 4;
-}
-
-.uppercase {
-  text-transform: uppercase;
-}
-.capitalize {
-  text-transform: capitalize;
-}
-.capitalize-block {
-  text-transform: lowercase;
-  &:first-letter {
-    text-transform: uppercase;
-  }
-}
-
-.strong, .bold {
-	@extend %bold;
-}
-.nobold {
-	font-weight: normal;
-}
-
-.semibold {
-  font-weight: 600;
-}
-
-.italic {
-  font-style: italic;
-}
-
-.no-outline {
-  outline: 0;
-}
-
-.strike {
-	text-decoration: line-through;
-}
-
-.pre-wrap {
-	white-space: pre-wrap;
-}
-.no-wrap {
-  white-space: nowrap;
-}
-.pre {
-	white-space: pre;
-}
-
diff --git a/templates/@theme-base/reusable-components/_design-system-viewport-fix.scss b/templates/@theme-base/reusable-components/_design-system-viewport-fix.scss
deleted file mode 100644
index 01a82ae..0000000
--- a/templates/@theme-base/reusable-components/_design-system-viewport-fix.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-/* fix viewport for Win8 (snap mode) and preparing day
- * when viewport will be supported by all render engines
- *
- * Examples: http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
- * width=device-width => width: device-width;
- * height=device-height => height: device-height;
- * initial-scale=2 => zoom: 2;
- * maximum-scale=2 => max-zoom: 2;
- * minimum-scale=0.5 => min-zoom: 0.5;
- * user-scalable=no => user-zoom: fixed;
- *
- * for Win8 snap mode => only width: device-width; works for the moment
- */
-  
-
-/* if anyone has a mixin for this, feel free to share */
-
-  
-@-webkit-viewport {
-  width: device-width;
-}
-@-moz-viewport {
-  width: device-width;
-}
-@-ms-viewport {
-  width: device-width;
-}
-@-o-viewport {
-  width: device-width;
-}
-@viewport {
-  width: device-width;
-}
diff --git a/templates/@theme-base/reusable-components/_includes/_resets/_typo-sub-sup.scss b/templates/@theme-base/reusable-components/_includes/_resets/_typo-sub-sup.scss
deleted file mode 100644
index 6e9b3d7..0000000
--- a/templates/@theme-base/reusable-components/_includes/_resets/_typo-sub-sup.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-/* avoid ugly line-height */
-sup,
-sub {
-  vertical-align: 0;
-  position: relative;
-}
-sup {
-  bottom: 1ex;
-}
-sub {
-  top: .5ex;
-}
diff --git a/templates/blue_and_orange/blue_and_orange.scss b/templates/blue_and_orange/blue_and_orange.scss
index f8ddaef..c7396d1 100644
--- a/templates/blue_and_orange/blue_and_orange.scss
+++ b/templates/blue_and_orange/blue_and_orange.scss
@@ -1,25 +1,24 @@
-@import "../@theme-base/version";
+@use "../@theme-base/version" as info;
 
 /*! =========================================== *
  * BLUE AND ORANGE THEME
- * Version: #{$version}
+ * Version: #{info.$version}
  * Author: Cristiano Almeida
  * Website: www.csalmeida.com
  * Twitter: @_csalmeida
  * =========================================== */
 
-$base: #0F4C5C;
-$search: #0A353F;
-$highlight: #ED7D3A;
+$base: #0f4c5c;
+$search: #0a353f;
+$highlight: #ed7d3a;
 $navigation: #fff;
 
-$text_color: #e6eaf0;
+$text_color: #f5f7fa;
 $extra_color: #0d0d0d;
 $danger_color: #d62646;
 $warning_color: #ffaa00;
 $info_color: #1b68c6;
 
 @import "../@theme-base/styles";
-@import "../@theme-base/dark_mode";
 
-// Please do not remove the imports above, add overrides and other partials below this line.
\ No newline at end of file
+// Please do not remove the imports above, add overrides and other partials below this line.
diff --git a/templates/dark_bubble_gum/dark_bubble_gum.scss b/templates/dark_bubble_gum/dark_bubble_gum.scss
index ff139d9..a6bb8a1 100644
--- a/templates/dark_bubble_gum/dark_bubble_gum.scss
+++ b/templates/dark_bubble_gum/dark_bubble_gum.scss
@@ -1,16 +1,16 @@
-@import "../@theme-base/version";
+@use "../@theme-base/version" as info;
 
 /*! =========================================== *
  * DARK BUBBLE GUM THEME
- * Version: #{$version}
+ * Version: #{info.$version}
  * Author: Cristiano Almeida
  * Website: www.csalmeida.com
  * Twitter: @_csalmeida
  * =========================================== */
 
-$base: #1C1C1C;
+$base: #1c1c1c;
 $search: #131212;
-$highlight: #EF2D56;
+$highlight: #ef2d56;
 $navigation: #fff;
 
 $text_color: #e6eaf0;
@@ -20,6 +20,5 @@ $warning_color: #ffaa00;
 $info_color: #1b68c6;
 
 @import "../@theme-base/styles";
-@import "../@theme-base/dark_mode";
 
-// Please do not remove the imports above, add overrides and other partials below this line.
\ No newline at end of file
+// Please do not remove the imports above, add overrides and other partials below this line.
diff --git a/templates/deutera_one/_override.scss b/templates/deutera_one/_override.scss
index 38c1f33..de7226a 100644
--- a/templates/deutera_one/_override.scss
+++ b/templates/deutera_one/_override.scss
@@ -1,88 +1,12 @@
-// Compose button
-.pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue {
-  color: #fff;
-  background-color: $search;
-  border: 1px solid $search;
-  transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
+:root,
+.ui-standard {
+  --primary-contrast: #{$search};
+  --email-item-selected-text-color: #{$search};
+  --email-item-selected-icon-text-color: #{$search};
 }
 
-.is-hover.pm-button--error, .is-hover.pm-button--primary, .is-hover.pm-button--warning, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover {
-  color: $navigation;
-  box-shadow: 0 0 .35714em 0 rgba(0,0,0,.2);
-  background: darken($search, 5%);
-  border: 1px solid darken($search, 5%);
-}
-
-// Conversation items
-.conversation {
-  &.marked::before {
-    background: $search;
-  }
-
-  .item-checkbox:checked + .item-icon {
-    background-color: $base;
-    border-color: $base;
-  }
-
-  .item-checkbox + .item-icon:hover .item-icon-fakecheck-icon {
-    fill: $base;
-  }
-
-  .item-checkbox:checked + .item-icon:hover .item-icon-fakecheck-icon {
-    fill: #fff;
-  }
-}
-
-// Highlighted text (seen when multiple messages are selected)
-.color-pm-blue {
-  color: $base;
-}
-
-// Radio buttons
-.pm-radio:checked + .pm-radio-fakeradio::before {
-  background: $search;
-}
-
-// Information blocks
-.block-info-standard {
-  border-color: $info_color;
-}
-
-.block-info-standard-warning {
-  border-color: darken($info_color, 10%);
-}
-
-.block-info-standard-error {
-  border-color: black;
-}
-
-// Links
-.link:active, .link:focus, .link:hover, a:active, a:focus, a:hover {
-  color: darken($highlight, 30%);
-}
-
-// Top notifications
-.notification-success {
-  background: $search;
-  color: #fff;
-}
-
-.notification-warning {
-  background: $highlight;
-  color: $base;
-}
-
-.notification-info {
-  background: $base;
-  color: #fff;
-}
-
-// Toggle button
-.pm-toggle-checkbox:checked+.pm-toggle-label:before {
-  background: $base;
-  border-color: $base;
-}
-
-.pm-toggle-checkbox:checked+.pm-toggle-label>.pm-toggle-label-text:last-child {
-  fill: #fff;
+.button-solid-norm {
+  --button-default-text-color: #{$search};
+  --button-hover-text-color: #{$search};
+  --button-active-text-color: #{$search};
 }
\ No newline at end of file
diff --git a/templates/deutera_one/deutera_one.scss b/templates/deutera_one/deutera_one.scss
index e2a8ba1..08ea768 100644
--- a/templates/deutera_one/deutera_one.scss
+++ b/templates/deutera_one/deutera_one.scss
@@ -1,8 +1,8 @@
-@import "../@theme-base/version";
+@use "../@theme-base/version" as info;
 
 /*! =========================================== *
  * DEUTERA ONE THEME
- * Version: #{$version}
+ * Version: #{info.$version}
  * Author: Cristiano Almeida
  * Website: www.csalmeida.com
  * Twitter: @_csalmeida
@@ -20,7 +20,6 @@ $warning_color: #ffaa00;
 $info_color: #1b68c6;
 
 @import "../@theme-base/styles";
-@import "../@theme-base/dark_mode";
 
 // Please do not remove the imports above, add overrides and other partials below this line.
-@import 'override';
\ No newline at end of file
+@import "override";
diff --git a/templates/dracula/dracula.scss b/templates/dracula/dracula.scss
index 3df23cb..be6fabe 100644
--- a/templates/dracula/dracula.scss
+++ b/templates/dracula/dracula.scss
@@ -1,8 +1,8 @@
-@import "../@theme-base/version";
+@use "../@theme-base/version" as info;
 
 /*! =========================================== *
  * DRACULA Theme
- * Version: #{$version}
+ * Version: #{info.$version}
  * Author: Mike Barkmin
  * Website: www.barkmin.eu
  * Twitter: @mikebarkmin
@@ -10,16 +10,15 @@
 
 $base: #282a36;
 $search: #000;
-$highlight: #FF79C6;
-$navigation: #D8D8D8;
+$highlight: #ff79c6;
+$navigation: #d8d8d8;
 
 $text_color: #e6eaf0;
 $extra_color: #50fa7b;
-$danger_color:  #ff5555;
+$danger_color: #ff5555;
 $warning_color: #ffb86c;
 $info_color: #1b68c6;
 
 @import "../@theme-base/styles";
-@import "../@theme-base/dark_mode";
 
-// Please do not remove the imports above, add overrides and other partials below this line.
\ No newline at end of file
+// Please do not remove the imports above, add overrides and other partials below this line.
diff --git a/templates/green_lume/green_lume.scss b/templates/green_lume/green_lume.scss
index 4d78793..f4fefa9 100644
--- a/templates/green_lume/green_lume.scss
+++ b/templates/green_lume/green_lume.scss
@@ -1,17 +1,17 @@
-@import "../@theme-base/version";
+@use "../@theme-base/version" as info;
 
 /*! =========================================== *
  * GREEN LUME THEME
- * Version: #{$version}
+ * Version: #{info.$version}
  * Author: Cristiano Almeida
  * Website: www.csalmeida.com
  * Tweets @_csalmeida
  * =========================================== */
 
 // Change colors here and they will change everywhere.
-$base: #1C1C1C;
+$base: #1c1c1c;
 $search: #000;
-$highlight: #2FBF71;
+$highlight: #2fbf71;
 $navigation: #fff;
 
 $text_color: #d6d6d6;
@@ -21,6 +21,5 @@ $warning_color: #ffaa00;
 $info_color: #1b68c6;
 
 @import "../@theme-base/styles";
-@import "../@theme-base/dark_mode";
 
-// Please do not remove the imports above, add overrides and other partials below this line.
\ No newline at end of file
+// Please do not remove the imports above, add overrides and other partials below this line.
diff --git a/templates/gruvbox/gruvbox.scss b/templates/gruvbox/gruvbox.scss
index 9a873e5..94eb443 100644
--- a/templates/gruvbox/gruvbox.scss
+++ b/templates/gruvbox/gruvbox.scss
@@ -1,8 +1,8 @@
-@import "../@theme-base/version";
+@use "../@theme-base/version" as info;
 
 /*! =========================================== *
  * GRUVBOX THEME
- * Version: #{$version}
+ * Version: #{info.$version}
  * Author: AntoineÐ 
  * Website: www.antoined.fr
  * Mastodon: @antoined@h.kher.nl
@@ -21,6 +21,5 @@ $warning_color: #d79921;
 $info_color: #458588;
 
 @import "../@theme-base/styles";
-@import "../@theme-base/dark_mode";
 
-// Please do not remove the imports above, add overrides and other partials below this line.
\ No newline at end of file
+// Please do not remove the imports above, add overrides and other partials below this line.
diff --git a/templates/inbox/_override.scss b/templates/inbox/_override.scss
deleted file mode 100644
index 9c51181..0000000
--- a/templates/inbox/_override.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-[aria-current="page"].navigation__link, [aria-current="page"].navigation__link .navigation__icon, [aria-current="page"].navigation__link:hover .navigation__icon:not(.navigation__icon--expand) {
-  color: $text_color;
-}
-
-.toolbar {
-  background: darken($base, 5%);
-}
-
-// Dark Mode
-.isDarkMode {
-  .pm-button, .pm-button--info, .pm-button--redborder {
-    background: darken($highlight, 2%);
-  }
-  
-  .pm-button--primaryborder {
-    background: transparent;
-    border-color: $text_color;
-    color: $text_color;
-  }
-  
-  .pm-button--primaryborder:hover {
-    border-color: $text_color;
-    color: $highlight;
-  }
-  
-  .composer-body-container textarea {
-    background: darken($base, 15%);
-  }
-}
\ No newline at end of file
diff --git a/templates/inbox/inbox.scss b/templates/inbox/inbox.scss
deleted file mode 100644
index 1d9a8bf..0000000
--- a/templates/inbox/inbox.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@import "../@theme-base/version";
-
-/*! =========================================== *
- * INBOX
- * Version: #{$version}
- * Author: Cristiano Almeida
- * Website: https://www.csalmeida.com
- * Twitter: @_csalmeida
- * =========================================== */
-
- $base: #296cd8;
- $search: #7297C4;
- $highlight: #D23F31;
- $navigation: #F2F2F2;
- $compose: #D23F31;
- $compose_text: #F2F2F2;
- 
- $text_color: #F2F2F2;
- $extra_color: #0d0d0d;
- $danger_color: #d62646;
- $warning_color: #ffaa00;
- $info_color: #1b68c6;
- 
- @import "../@theme-base/styles";
- @import "../@theme-base/dark_mode";
- 
- // Please do not remove the imports above, add overrides and other partials below this line.
- @import 'override';
- 
\ No newline at end of file
diff --git a/templates/monokai/monokai.scss b/templates/monokai/monokai.scss
index 81443fa..2e46378 100644
--- a/templates/monokai/monokai.scss
+++ b/templates/monokai/monokai.scss
@@ -1,17 +1,17 @@
-@import "../@theme-base/version";
+@use "../@theme-base/version" as info;
 
 /*! =========================================== *
  * MONOKAI THEME
- * Version: #{$version}
+ * Version: #{info.$version}
  * Author: tripscripts
  * Website: N/A
  * Twitter: N/A
  * =========================================== */
 
-$base: #1D1E1A;
-$search: #5B26D6;
-$highlight: #89C62A;
-$navigation: #FFF;
+$base: #1d1e1a;
+$search: #5b26d6;
+$highlight: #89c62a;
+$navigation: #fff;
 
 $text_color: #e6eaf0;
 $extra_color: #0d0d0d;
@@ -20,6 +20,5 @@ $warning_color: #ffaa00;
 $info_color: #1b68c6;
 
 @import "../@theme-base/styles";
-@import "../@theme-base/dark_mode";
 
-// Please do not remove the imports above, add overrides and other partials below this line.
\ No newline at end of file
+// Please do not remove the imports above, add overrides and other partials below this line.
diff --git a/templates/nord/nord.scss b/templates/nord/nord.scss
index 1a55bfb..ca5e744 100644
--- a/templates/nord/nord.scss
+++ b/templates/nord/nord.scss
@@ -1,25 +1,24 @@
-@import "../@theme-base/version";
+@use "../@theme-base/version" as info;
 
 /*! =========================================== *
  * NORD Theme
- * Version:  #{$version}
+ * Version:  #{info.$version}
  * Author:   ch1r0x
  * Website:  github.com/ch1r0x
  * Mastodon: @ch1r0x
  * =========================================== */
 
-$base: #2E3440;
-$search: #3B4252;
-$highlight: #5E81AC;
-$navigation: #E5E9F0;
+$base: #2e3440;
+$search: #3b4252;
+$highlight: #5e81ac;
+$navigation: #e5e9f0;
 
-$text_color: #ECEFF4;
-$extra_color: #88C0D0;
-$danger_color:  #BF616A;
-$warning_color: #D08770;
-$info_color: #A3BE8C;
+$text_color: #eceff4;
+$extra_color: #88c0d0;
+$danger_color: #bf616a;
+$warning_color: #d08770;
+$info_color: #a3be8c;
 
 @import "../@theme-base/styles";
-@import "../@theme-base/dark_mode";
 
 // Please do not remove the imports above, add overrides and other partials below this line.
diff --git a/templates/ochin/ochin.scss b/templates/ochin/ochin.scss
index 75c8da3..cde6dcf 100644
--- a/templates/ochin/ochin.scss
+++ b/templates/ochin/ochin.scss
@@ -1,19 +1,19 @@
-@import "../@theme-base/version";
+@use "../@theme-base/version" as info;
 
 /*! =========================================== *
  * OCHIN
- * Version: #{$version}
+ * Version: #{info.$version}
  * Author: Cristiano Almeida
  * Website: https://www.csalmeida.com
  * Twitter: @_csalmeida
  * =========================================== */
 
-$base: #333E4C;
-$search: #1A2533;
-$highlight: #A8E576;
-$navigation: #C2C5CA;
-$compose: #7297C4;
-$compose_text: #FFF;
+$base: #333e4c;
+$search: #1a2533;
+$highlight: #a8e576;
+$navigation: #c2c5ca;
+$compose: #7297c4;
+$compose_text: #fff;
 
 $text_color: #e6eaf0;
 $extra_color: #0d0d0d;
@@ -22,7 +22,6 @@ $warning_color: #ffaa00;
 $info_color: #1b68c6;
 
 @import "../@theme-base/styles";
-@import "../@theme-base/dark_mode";
 
 // Please do not remove the imports above, add overrides and other partials below this line.
-@import 'override';
+@import "override";
diff --git a/templates/theme_example/theme_example.scss b/templates/theme_example/theme_example.scss
index 8edf74b..54528ca 100644
--- a/templates/theme_example/theme_example.scss
+++ b/templates/theme_example/theme_example.scss
@@ -1,17 +1,17 @@
-@import "../@theme-base/version";
+@use "../@theme-base/version" as info;
 
 /*! =========================================== *
  * Template THEME
- * Version: #{$version}
+ * Version: #{info.$version}
  * Author: You name here
  * Website: Your website here
  * Twitter: Your twitter handle
  * =========================================== */
 
 // Change colors here and they will change everywhere.
-$base: #1C1C1C;
+$base: #1c1c1c;
 $search: #000;
-$highlight: #2FBF71;
+$highlight: #2fbf71;
 $navigation: #fff;
 
 $text_color: #0d0d0d;
@@ -21,6 +21,5 @@ $warning_color: #ffaa00;
 $info_color: #1b68c6;
 
 @import "../@theme-base/styles";
-@import "../@theme-base/dark_mode";
 
-// Please do not remove the imports above, add overrides and other partials below this line.
\ No newline at end of file
+// Please do not remove the imports above, add overrides and other partials below this line.
diff --git a/templates/vitamin_c/vitamin_c.scss b/templates/vitamin_c/vitamin_c.scss
index 076d6e4..9e0d5bd 100644
--- a/templates/vitamin_c/vitamin_c.scss
+++ b/templates/vitamin_c/vitamin_c.scss
@@ -1,17 +1,17 @@
-@import "../@theme-base/version";
+@use "../@theme-base/version" as info;
 
 /*! =========================================== *
  * VITAMIN C THEME
- * Version: #{$version}
+ * Version: #{info.$version}
  * Author: Cristiano Almeida
  * Website: www.csalmeida.com
  * Twitter: @_csalmeida
  * =========================================== */
 
 $base: #004358;
-$search: #1F8A70;
-$highlight: #FD7400;
-$navigation: #FFE11A;
+$search: #1f8a70;
+$highlight: #fd7400;
+$navigation: #ffe11a;
 
 $text_color: #e6eaf0;
 $extra_color: #0d0d0d;
@@ -20,6 +20,5 @@ $warning_color: #ffaa00;
 $info_color: #1b68c6;
 
 @import "../@theme-base/styles";
-@import "../@theme-base/dark_mode";
 
-// Please do not remove the imports above, add overrides and other partials below this line.
\ No newline at end of file
+// Please do not remove the imports above, add overrides and other partials below this line.
diff --git a/themes/blue_and_orange/blue_and_orange.css b/themes/blue_and_orange/blue_and_orange.css
index 4fdcc49..10ca52f 100644
--- a/themes/blue_and_orange/blue_and_orange.css
+++ b/themes/blue_and_orange/blue_and_orange.css
@@ -1,735 +1,261 @@
 /*! =========================================== *
  * BLUE AND ORANGE THEME
- * Version: v4.0.0-beta.33
+ * Version: v4.0.8
  * Author: Cristiano Almeida
  * Website: www.csalmeida.com
  * Twitter: @_csalmeida
  * =========================================== */
+:root,
+.ui-standard {
+  --primary: #ed7d3a;
+  --primary-contrast: white;
+  --signal-danger: #ed4c51;
+  --signal-danger-hover: #f7595e;
+  --signal-danger-active: #ff666b;
+  --signal-danger-contrast: white;
+  --signal-warning: #f5930a;
+  --signal-warning-hover: #f5a716;
+  --signal-warning-active: #f5b922;
+  --signal-warning-contrast: black;
+  --signal-success: #349172;
+  --signal-success-hover: #339c79;
+  --signal-success-active: #31a67f;
+  --signal-success-contrast: white;
+  --signal-info: #2c89db;
+  --signal-info-hover: #3491e3;
+  --signal-info-active: #3d99eb;
+  --signal-info-contrast: white;
+  --text-norm: white;
+  --text-weak: #a4a9b5;
+  --text-hint: #696f7d;
+  --text-disabled: #575d6b;
+  --text-invert: #262a33;
+  --field-norm: #f5f7fa;
+  --field-hover: #eb6e23;
+  --field-disabled: #464b58;
+  --border-norm: #092f39;
+  --border-weak: #0b3a46;
+  --background-norm: #0f4c5c !important;
+  --background-weak: #135e72;
+  --background-strong: #082830;
+  --interaction-norm: #ed7d3a;
+  --interaction-norm-hover: #ee8444;
+  --interaction-norm-active: #ef8a4e;
+  --interaction-norm-contrast: white;
+  --interaction-weak: #0d414f !important;
+  --interaction-weak-hover: #0b3a46;
+  --interaction-weak-active: #696f7d;
+  --interaction-default: transparent;
+  --interaction-default-hover: rgba(87, 93, 107, 0.2);
+  --interaction-default-active: rgba(87, 93, 107, 0.3);
+  --shadow-norm-opacity: 0.32;
+  --shadow-lifted-opacity: 0.4;
+  --backdrop-norm: rgba(0, 0, 0, 0.32);
+  --optional-scrollbar-thumb-color: #464b58;
+  --optional-scrollbar-thumb-hover-color: #575d6b;
+  --optional-email-item-read-background-color: #1a1d24;
+  --optional-email-item-read-text-color: var(--text-weak);
+  --optional-email-item-selected-background-color: #be6b3a;
+}
+
+.ui-prominent,
+.ui-standard,
 :root {
-  --main-bg-color: #0F4C5C;
-  --secondary-bg-color: #0b3a46;
-  --bgcolor-searchbox-field: #0A353F;
-  --bgcolor-spacebar: rgba(255, 255, 255, 0.1);
-  --bgcolor-aside-link: rgba(0, 0, 0, 0.3);
-  --bgcolor-toolbar: #135e72;
-  --fillcolor-logo: #f6f7fa;
-  --fillcolor-icons: #fff;
-  --color-nav-link: #fff;
-  --color-nav-active: #ED7D3A;
-  --color-standard-text: #fff;
-  --boxshadow-main: none; }
+  --selection-background-color: var(
+    --optional-selection-background-color,
+    var(--primary)
+  );
+  --selection-text-color: var(
+    --optional-selection-text-color,
+    var(--primary-contrast)
+  );
+  --header-background-color: #0f4c5c !important;
+  --sidebar-background-color: var(
+    --optional-sidebar-background-color,
+    var(--background-norm)
+  );
+  --navigation-current-item-marker-color: var(
+    --optional-navigation-current-item-marker-color,
+    var(--interaction-norm)
+  );
+  --navigation-current-item-background-color: var(
+    --optional-navigation-current-item-background-color,
+    var(--interaction-default-hover)
+  );
+  --navigation-current-item-text-color: var(
+    --optional-navigation-current-item-text-color,
+    var(--text-norm)
+  );
+  --main-box-shadow: var(--optional-main-box-shadow, none);
+  --main-border-color: var(--optional-main-border-color, var(--border-norm));
+  --navigation-item-count-background-color: var(
+    --optional-navigation-item-count-background-color,
+    var(--primary)
+  );
+  --navigation-item-count-text-color: var(
+    --optional-navigation-item-count-text-color,
+    var(--primary-contrast)
+  );
+  --toolbar-background-color: var(
+    --optional-toolbar-background-color,
+    var(--background-weak)
+  );
+  --toolbar-border-bottom-color: var(
+    --optional-toolbar-border-bottom-color,
+    var(--border-norm)
+  );
+  --toolbar-text-color: var(--optional-toolbar-text-color, var(--text-norm));
+  --toolbar-separator-color: var(
+    --optional-toolbar-separator-color,
+    var(--border-norm)
+  );
+  --scrollbar-thumb-color: var(
+    --optional-scrollbar-thumb-color,
+    hsla(0, 0%, 50%, 0.25)
+  );
+  --scrollbar-thumb-hover-color: var(
+    --optional-scrollbar-thumb-hover-color,
+    hsla(0, 0%, 50%, 0.5)
+  );
+  --tooltip-background-color: var(--optional-tooltip-background-color, #000);
+  --tooltip-text-color: var(--optional-tooltip-text-color, #fff);
+  --email-item-unread-background-color: var(
+    --optional-email-item-unread-background-color,
+    var(--background-norm)
+  );
+  --email-item-unread-text-color: var(
+    --optional-email-item-unread-text-color,
+    var(--text-norm)
+  );
+  --email-item-unread-icon-background-color: var(
+    --optional-email-item-unread-icon-background-color,
+    var(--background-strong)
+  );
+  --email-item-unread-icon-text-color: var(
+    --optional-email-item-unread-icon-text-color,
+    inherit
+  );
+  --email-item-read-background-color: #135e72;
+  --email-item-read-text-color: #f5f7fa;
+  --email-item-read-icon-background-color: var(
+    --optional-email-item-read-icon-background-color,
+    var(--background-strong)
+  );
+  --email-item-read-icon-text-color: var(
+    --optional-email-item-read-icon-text-color,
+    inherit
+  );
+  --email-item-selected-background-color: var(
+    --optional-email-item-selected-background-color,
+    var(--interaction-norm)
+  );
+  --email-item-selected-text-color: var(
+    --optional-email-item-selected-text-color,
+    var(--interaction-norm-contrast)
+  );
+  --email-item-selected-icon-background-color: var(
+    --optional-email-item-selected-icon-background-color,
+    var(--interaction-norm-hover)
+  );
+  --email-item-selected-icon-text-color: var(
+    --optional-email-item-selected-icon-text-color,
+    inherit
+  );
+  --email-item-focus-marker-color: var(
+    --optional-email-item-focus-marker-color,
+    var(--interaction-norm)
+  );
+  --email-item-selected-focus-marker-color: var(
+    --optional-email-item-selected-focus-marker-color,
+    var(--interaction-norm-hover)
+  );
+  --email-message-view-background-color: var(
+    --optional-email-message-view-background-color,
+    var(--background-norm)
+  );
+  --field-background-color: var(
+    --optional-field-background-color,
+    var(--background-norm)
+  );
+  --field-text-color: var(--optional-field-text-color, var(--text-norm));
+  --field-placeholder-color: var(
+    --optional-field-placeholder-color,
+    var(--text-hint)
+  );
+  --field-hover-background-color: var(
+    --optional-field-hover-background-color,
+    var(--background-norm)
+  );
+  --field-hover-text-color: var(
+    --optional-field-hover-text-color,
+    var(--text-norm)
+  );
+  --field-focus-background-color: var(
+    --optional-field-focus-background-color,
+    var(--background-norm)
+  );
+  --field-focus-text-color: var(
+    --optional-field-focus-text-color,
+    var(--text-norm)
+  );
+  --field-disabled-background-color: var(
+    --optional-field-disabled-background-color,
+    var(--background-norm)
+  );
+  --field-disabled-text-color: var(
+    --optional-field-disabled-text-color,
+    var(--text-disabled)
+  );
+  --select-background-color: var(
+    --optional-select-background-color,
+    var(--field-background-color)
+  );
+  --favorite-icon-color: var(--optional-favorite-icon-color, orange);
+  --mark-background-color: var(--optional-mark-background-color, #ff0);
+  --mark-text-color: var(--optional-mark-text-color, #000);
+  --mark-font-weight: var(--optional-mark-font-weight, normal);
+  --modal-background-color: var(--optional-modal-background-color);
+  --modal-text-color: var(--optional-modal-text-color);
+  --file-preview-text-color: var(
+    --optional-file-preview-text-color,
+    var(--text-norm)
+  );
+  --file-preview-background-color: var(
+    --optional-file-preview-background-color,
+    var(--background-norm)
+  );
+  --border-radius: var(--optional-border-radius, 3);
+  --font-family: var(
+    --optional-font-family,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen-Sans,
+    Ubuntu,
+    Cantarell,
+    Helvetica Neue,
+    sans-serif
+  );
+}
+
+.button-solid-norm {
+  --button-default-background-color: #ed7d3a;
+  --button-hover-background-color: #ef8a4e;
+  --button-active-background-color: #ef8a4e;
+  --button-default-text-color: #f5f7fa;
+  --button-hover-text-color: var(--interaction-norm-contrast);
+  --button-active-text-color: var(--interaction-norm-contrast);
+}
 
-html:not(.editor-squire-iframe) body {
-  background: #0F4C5C;
-  color: #e6eaf0; }
-
-.pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue {
-  color: #e6eaf0;
-  background-color: #ED7D3A;
-  border: 1px solid #ED7D3A;
-  transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; }
-
-.is-hover.pm-button--error, .is-hover.pm-button--primary, .is-hover.pm-button--warning, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover {
-  color: #fff;
-  box-shadow: 0 0 0.35714em 0 rgba(0, 0, 0, 0.2);
-  background: #eb6e23;
-  border: 1px solid #eb6e23; }
-
-.pm-button--primaryborder-dark, .pm-button-blueborder-dark {
-  background: #0F4C5C;
-  border-color: #ED7D3A;
-  color: #ED7D3A; }
-
-.is-active.pm-button--primaryborder-dark, .is-hover.pm-button--primaryborder-dark, .pm-button--primaryborder-dark:focus, .pm-button--primaryborder-dark:focus-within, .pm-button--primaryborder-dark:hover, .pm-button--primaryborder-dark:not(div):active, .pm-button-blueborder-dark.is-active, .pm-button-blueborder-dark.is-hover, .pm-button-blueborder-dark:focus, .pm-button-blueborder-dark:focus-within, .pm-button-blueborder-dark:hover, .pm-button-blueborder-dark:not(div):active {
-  background: #0F4C5C;
-  border-color: #ef8c51;
-  color: #ef8c51; }
-
-.pm-button--primaryborder, .pm-button-blueborder {
-  border-color: #eb6e23;
-  color: #eb6e23; }
-
-.is-hover.pm-button--primaryborder, .pm-button--primaryborder:focus, .pm-button--primaryborder:focus-within, .pm-button--primaryborder:hover, .pm-button-blueborder.is-hover, .pm-button-blueborder:focus, .pm-button-blueborder:focus-within, .pm-button-blueborder:hover {
-  border-color: #eb6e23;
-  color: #eb6e23; }
-
-.is-disabled.pm-button--error, .is-disabled.pm-button--error.pm-button--info, .is-disabled.pm-button--error.pm-button--redborder, .is-disabled.pm-button--primary, .is-disabled.pm-button--primary.pm-button--info, .is-disabled.pm-button--primary.pm-button--redborder, .is-disabled.pm-button--warning, .is-disabled.pm-button--warning.pm-button--info, .is-disabled.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info[disabled], .pm-button--error.pm-button--redborder[disabled], .pm-button--error[disabled], .pm-button--primary.pm-button--info[disabled], .pm-button--primary.pm-button--redborder[disabled], .pm-button--primary[disabled], .pm-button--warning.pm-button--info[disabled], .pm-button--warning.pm-button--redborder[disabled], .pm-button--warning[disabled], .pm-button-blue.is-disabled, .pm-button-blue.is-disabled.pm-button--info, .pm-button-blue.is-disabled.pm-button--redborder, .pm-button-blue.pm-button--info[disabled], .pm-button-blue.pm-button--redborder[disabled], .pm-button-blue[disabled], .pm-button.is-disabled.pm-button--error, .pm-button.is-disabled.pm-button--primary, .pm-button.is-disabled.pm-button--warning, .pm-button.pm-button--error[disabled], .pm-button.pm-button--primary[disabled], .pm-button.pm-button--warning[disabled], .pm-button.pm-button-blue.is-disabled, .pm-button.pm-button-blue[disabled] {
-  background-color: #fef8f5;
-  border-color: #ef8c51;
-  color: #e06014; }
-
-.bg-primary {
-  background-color: #135e72; }
-
-.color-primary {
-  color: #ED7D3A; }
-
-.navigation__counterItem {
-  background: #e06014;
-  color: white; }
-
-.item-container-row:hover::before, .item-container:hover::before {
-  border-color: #f19c69; }
-
-.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon {
-  border-color: #f8caaf; }
-
-.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon {
-  fill: #e06014; }
-
-.circle-chart__circle {
-  stroke: #ED7D3A; }
-
-#dropdown-0 .dropDown-content::after, #dropdown-0 .dropDown-content::before, #dropdown-0.dropDown:not(.dropDown--noCaret)::before,
-#dropdown-0 .dropDown-content {
-  background: #0F4C5C; }
-
-.dropDown:not(.dropDown--noCaret)::before,
-.dropDown::after,
-.dropDown-logout-initials,
-.dropDown-item-hr {
-  border-color: #135e72 !important; }
-
-#global_search.searchbox-field[type="search"] {
-  background-color: #0A353F;
-  color: #e6eaf0; }
-
-.searchbox-advanced-search-button:active,
-.searchbox-advanced-search-button:focus,
-.searchbox-advanced-search-button:hover {
-  background-color: #0F4C5C; }
-
-.topnav-link, .topnav-link > .topnav-icon {
-  color: #fff;
-  transition: color .2s ease-in-out; }
-
-.topnav-link:active, .topnav-link:focus,
-.topnav-link:hover, .topnav-link[aria-current="true"] {
-  color: #ED7D3A; }
-
-.topnav-link:active > .topnav-icon, .topnav-link:focus > .topnav-icon,
-.topnav-link:hover > .topnav-icon, .topnav-link[aria-current=true] > .topnav-icon {
-  color: #ED7D3A; }
-
-.protonmail .text-purple {
-  color: #0F4C5C !important; }
-
-.protonmail .text-purple:hover {
-  color: #e06014 !important; }
-
-.dropDown-item-button:focus, .dropDown-item-button:hover, .dropDown-item-link:focus, .dropDown-item-link:hover {
-  color: #ED7D3A; }
-
-#pm_composer .composer .composerHeader-container,
-.composerInputMeta-overlay .composerHeader-container {
-  background: #135e72; }
-
-#pm_composer .composer .fill {
-  background: #fff; }
-
-.conversation.marked::before {
-  background: #ED7D3A; }
-
-.item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active) {
-  background: #fff; }
-
-.item-container.selected, .item-container-row.selected,
-.item-container.active, .item-is-selected {
-  background: rgba(237, 125, 58, 0.1); }
-
-.selectBoxElement-container:hover .item-icon {
-  background-color: transparent;
-  border: 1px solid #eb6e23; }
-  .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon {
-    fill: #eb6e23; }
-
-.selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-  background-color: #eb6e23;
-  border-color: #eb6e23; }
-
-.item-checkbox:checked + .item-icon {
-  background-color: #ED7D3A;
-  border-color: #ED7D3A; }
-
-.item-checkbox + .item-icon:hover {
-  background-color: #eb6e23;
-  border-color: #eb6e23; }
-
-.item-checkbox + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #fff; }
-
-.item-checkbox:checked + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #fff; }
-
-.starbutton {
-  fill: #ED7D3A !important;
-  opacity: 0.7; }
-
-.starbutton:focus, .starbutton:hover {
-  fill: #ED7D3A; }
-
-.autocompleteEmailsItem-icon svg.encryptionIcon {
-  fill: #eb6e23; }
-
-.encryptionStatus .color-pm-blue svg {
-  color: #eb6e23;
-  fill: #eb6e23; }
-
-.encryptionStatus .color-global-grey-dm svg {
-  color: black; }
-
-.color-pm-blue {
-  color: #ED7D3A; }
-
-.pm-radio:checked + .pm-radio-fakeradio::before {
-  background: #ED7D3A; }
-
-.block-info-standard {
-  border-color: #1b68c6; }
-
-.block-info-standard-warning {
-  border-color: #ffaa00; }
-
-.block-info-standard-error {
-  border-color: #d62646; }
-
-.link, a, .pm-button--link {
-  color: #e06014;
-  transition: color .2s ease-in-out; }
-
-.link:active, .link:focus, .link:hover,
-a:active, a:focus, a:hover,
-.pm-button--link:hover {
-  color: #e06014; }
-
-.pm-button--primary {
-  background-color: #ED7D3A;
-  border-color: #ED7D3A; }
-
-.pm-button--link, .pm-button.pm-button--link {
-  color: #ED7D3A; }
-
-.pm-button--error, .pm-button--error.pm-button--info, .pm-button--error.pm-button--redborder, .pm-button--primary, .pm-button--primary.pm-button--info, .pm-button--primary.pm-button--redborder, .pm-button--warning, .pm-button--warning.pm-button--info, .pm-button--warning.pm-button--redborder, .pm-button-blue, .pm-button-blue.pm-button--info, .pm-button-blue.pm-button--redborder, .pm-button.pm-button--error, .pm-button.pm-button--primary, .pm-button.pm-button--warning, .pm-button.pm-button-blue {
-  background-color: #ED7D3A;
-  border-color: #ED7D3A; }
-
-.is-hover.pm-button--error, .is-hover.pm-button--error.pm-button--info, .is-hover.pm-button--error.pm-button--redborder, .is-hover.pm-button--primary, .is-hover.pm-button--primary.pm-button--info, .is-hover.pm-button--primary.pm-button--redborder, .is-hover.pm-button--warning, .is-hover.pm-button--warning.pm-button--info, .is-hover.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:focus, .pm-button--error.pm-button--info:focus-within, .pm-button--error.pm-button--info:hover, .pm-button--error.pm-button--redborder:focus, .pm-button--error.pm-button--redborder:focus-within, .pm-button--error.pm-button--redborder:hover, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary.pm-button--info:focus, .pm-button--primary.pm-button--info:focus-within, .pm-button--primary.pm-button--info:hover, .pm-button--primary.pm-button--redborder:focus, .pm-button--primary.pm-button--redborder:focus-within, .pm-button--primary.pm-button--redborder:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning.pm-button--info:focus, .pm-button--warning.pm-button--info:focus-within, .pm-button--warning.pm-button--info:hover, .pm-button--warning.pm-button--redborder:focus, .pm-button--warning.pm-button--redborder:focus-within, .pm-button--warning.pm-button--redborder:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue.is-hover.pm-button--info, .pm-button-blue.is-hover.pm-button--redborder, .pm-button-blue.pm-button--info:focus, .pm-button-blue.pm-button--info:focus-within, .pm-button-blue.pm-button--info:hover, .pm-button-blue.pm-button--redborder:focus, .pm-button-blue.pm-button--redborder:focus-within, .pm-button-blue.pm-button--redborder:hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover, .pm-button.is-hover.pm-button--error, .pm-button.is-hover.pm-button--primary, .pm-button.is-hover.pm-button--warning, .pm-button.pm-button--error:focus, .pm-button.pm-button--error:focus-within, .pm-button.pm-button--error:hover, .pm-button.pm-button--primary:focus, .pm-button.pm-button--primary:focus-within, .pm-button.pm-button--primary:hover, .pm-button.pm-button--warning:focus, .pm-button.pm-button--warning:focus-within, .pm-button.pm-button--warning:hover, .pm-button.pm-button-blue.is-hover, .pm-button.pm-button-blue:focus, .pm-button.pm-button-blue:focus-within, .pm-button.pm-button-blue:hover {
-  background: #eb6e23;
-  border: 1px solid #eb6e23; }
-
-.is-active.pm-button--error, .is-active.pm-button--error.pm-button--info, .is-active.pm-button--error.pm-button--redborder, .is-active.pm-button--primary, .is-active.pm-button--primary.pm-button--info, .is-active.pm-button--primary.pm-button--redborder, .is-active.pm-button--warning, .is-active.pm-button--warning.pm-button--info, .is-active.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:not(div):active, .pm-button--error.pm-button--redborder:not(div):active, .pm-button--error:not(div):active, .pm-button--primary.pm-button--info:not(div):active, .pm-button--primary.pm-button--redborder:not(div):active, .pm-button--primary:not(div):active, .pm-button--warning.pm-button--info:not(div):active, .pm-button--warning.pm-button--redborder:not(div):active, .pm-button--warning:not(div):active, .pm-button-blue.is-active, .pm-button-blue.is-active.pm-button--info, .pm-button-blue.is-active.pm-button--redborder, .pm-button-blue.pm-button--info:not(div):active, .pm-button-blue.pm-button--redborder:not(div):active, .pm-button-blue:not(div):active, .pm-button.is-active.pm-button--error, .pm-button.is-active.pm-button--primary, .pm-button.is-active.pm-button--warning, .pm-button.pm-button--error:not(div):active, .pm-button.pm-button--primary:not(div):active, .pm-button.pm-button--warning:not(div):active, .pm-button.pm-button-blue.is-active, .pm-button.pm-button-blue:not(div):active {
-  background: #e06014;
-  border-color: #e06014; }
-
-.pm-button-blueborder {
-  box-shadow: none;
-  border-color: #0F4C5C;
-  color: #0F4C5C;
-  transition: color .2s ease-in-out, border-color .2s ease-in-out; }
-
-.pm-button-blueborder:hover {
-  box-shadow: none;
-  border-color: #e06014;
-  color: #e06014; }
-
-.is-active.pm-button--primaryborder,
-.pm-button--primaryborder:not(div):active,
-.pm-button-blueborder.is-active,
-.pm-button-blueborder:not(div):active {
-  border-color: #e06014;
-  color: #e06014;
-  background: transparent; }
-
-.pm-group-buttons > .pm-group-button.pm-button--primary {
-  border-color: #e06014; }
-
-.bg-pm-blue-gradient .pm-button--transparent:hover {
-  color: #e6eaf0;
-  border-color: #e6eaf0; }
-
-.pm-toggle-checkbox:checked + .pm-toggle-label:before {
-  background: #ED7D3A;
-  border-color: #ED7D3A; }
-
-.composer-title-bar {
-  background: #0F4C5C; }
-
-.color-global-light {
-  color: #e6eaf0; }
-
-.angular-squire-iframe body a {
-  color: #ED7D3A; }
-
-.fill-pm-blue,
-.message-attachmentIcon .file-outer-icon.is-embedded {
-  fill: #ED7D3A; }
-
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2) {
-  border-color: #ED7D3A;
-  color: #ED7D3A; }
-  .pm-table--highlight[data-plan-number="1"] tr th:nth-child(2)::before {
-    background-color: #ED7D3A; }
-
-.pm-table--highlight[data-plan-number="1"] tr td:nth-child(2),
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2),
-.pm-table--highlight[data-plan-number="1"] tr:last-child td:nth-child(2) {
-  border-color: #ED7D3A; }
-
-.pm-simple-table-row-th .fill-primary {
-  fill: #ED7D3A; }
-
-.pm-checkbox-fakecheck, .pm-radio-fakeradio {
-  border-color: #0F4C5C; }
-  .pm-checkbox-fakecheck [class*="icon-"], .pm-radio-fakeradio [class*="icon-"] {
-    fill: #ED7D3A; }
-
-[class*="icon-"].color-primary {
-  color: #0F4C5C; }
-  [class*="icon-"].color-primary:hover {
-    color: #e06014; }
-
-.pm-field, .editor,
-.editor-toolbar,
-.border-bottom,
-.border-top,
-.message-container.is-opened > .message-header {
-  border-color: #082830; }
-
-.badgeLabel, .badgeLabel-primary {
-  border-color: #e06014; }
-
-.badgeLabel,
-.badgeLabel-blue,
-.badgeLabel-primary,
-.bg-pm-blue {
-  background-color: #e06014; }
-
-body {
-  scrollbar-color: #167088 #105365; }
-
-::-webkit-scrollbar {
-  width: 16px; }
-  ::-webkit-scrollbar-track {
-    background: #105365; }
-  ::-webkit-scrollbar-thumb {
-    background: #167088;
-    box-shadow: inset 0 0 0 4px #105365;
-    border-radius: 16px; }
-
-.isDarkMode .bordered,
-.isDarkMode .bordered-container:not([class*="composerInputMeta-"]),
-.isDarkMode .breadcrumb-container {
-  border-color: #167088; }
-
-.isDarkMode .dropDown-content::after, .isDarkMode .dropDown-content::before,
-.isDarkMode .dropDown:not(.dropDown--noCaret)::before,
-.isDarkMode .dropDown-content {
-  background: #0F4C5C;
-  border: #0F4C5C; }
-
-.isDarkMode .dropDown-item-button:focus, .isDarkMode .dropDown-item-button:focus-within,
-.isDarkMode .dropDown-item-button:hover, .isDarkMode .dropDown-item-link:focus,
-.isDarkMode .dropDown-item-link:focus-within, .isDarkMode .dropDown-item-link:hover {
-  background-color: #0b3a46; }
-
-.isDarkMode .dropDown-item-button.is-disabled, .isDarkMode .dropDown-item-button[disabled],
-.isDarkMode .dropDown-item-link.is-disabled, .isDarkMode .dropDown-item-link[disabled] {
-  background-color: #0e4553; }
-
-.isDarkMode .squireToolbar-select-list {
-  background: #0F4C5C;
-  color: #e6eaf0; }
-
-.isDarkMode .squireToolbar-dropdown-divider {
-  background-color: #167088; }
-
-.isDarkMode .squireToolbar-select-item:hover {
-  background: #0e4553; }
-
-.isDarkMode #pm_composer .composer,
-.isDarkMode .composerInputMeta-overlay {
-  background: #0F4C5C; }
-
-.isDarkMode #pm_composer .composer .fill {
-  background: #0F4C5C; }
-
-.isDarkMode .composer-body-container textarea {
-  background: #0F4C5C; }
-
-.isDarkMode .composer-addresses-item {
-  background: #0b3a46; }
-
-.isDarkMode .composer-addresses-autocomplete ul {
-  background: #0b3a46; }
-
-.isDarkMode .composer-addresses-autocomplete li[aria-selected="true"],
-.isDarkMode .composer-addresses-autocomplete li:hover {
-  background: #0F4C5C; }
-
-.isDarkMode .autocompleteEmails-item {
-  background-color: #0e4553;
-  border-color: #0e4553; }
-
-.isDarkMode .autocompleteEmails-label {
-  border-left: 1px solid #167088;
-  border-right: 1px solid #167088; }
-
-.isDarkMode .composerOptions-container.show {
-  background: #0e4553; }
-  .isDarkMode .composerOptions-container.show .shadow-container {
-    background: #0F4C5C;
-    color: #e6eaf0; }
-
-.isDarkMode .pm-button.pm-button--primary {
-  background: #e06014;
-  color: #e6eaf0;
-  border-color: #e06014; }
-
-.isDarkMode .pm-button.pm-button--primary:hover {
-  background: #ED7D3A;
-  color: #e6eaf0; }
-
-.isDarkMode .is-disabled.pm-button--error, .isDarkMode .is-disabled.pm-button--error.pm-button--info, .isDarkMode .is-disabled.pm-button--error.pm-button--redborder, .isDarkMode .is-disabled.pm-button--primary, .isDarkMode .is-disabled.pm-button--primary.pm-button--info, .isDarkMode .is-disabled.pm-button--primary.pm-button--redborder, .isDarkMode .is-disabled.pm-button--warning, .isDarkMode .is-disabled.pm-button--warning.pm-button--info, .isDarkMode .is-disabled.pm-button--warning.pm-button--redborder, .isDarkMode .pm-button--error.pm-button--info[disabled], .isDarkMode .pm-button--error.pm-button--redborder[disabled], .isDarkMode .pm-button--error[disabled], .isDarkMode .pm-button--primary.pm-button--info[disabled], .isDarkMode .pm-button--primary.pm-button--redborder[disabled], .isDarkMode .pm-button--primary[disabled], .isDarkMode .pm-button--warning.pm-button--info[disabled], .isDarkMode .pm-button--warning.pm-button--redborder[disabled], .isDarkMode .pm-button--warning[disabled], .isDarkMode .pm-button-blue.is-disabled, .isDarkMode .pm-button-blue.is-disabled.pm-button--info, .isDarkMode .pm-button-blue.is-disabled.pm-button--redborder, .isDarkMode .pm-button-blue.pm-button--info[disabled], .isDarkMode .pm-button-blue.pm-button--redborder[disabled], .isDarkMode .pm-button-blue[disabled], .isDarkMode .pm-button.is-disabled.pm-button--error, .isDarkMode .pm-button.is-disabled.pm-button--primary, .isDarkMode .pm-button.is-disabled.pm-button--warning, .isDarkMode .pm-button.pm-button--error[disabled], .isDarkMode .pm-button.pm-button--primary[disabled], .isDarkMode .pm-button.pm-button--warning[disabled], .isDarkMode .pm-button.pm-button-blue.is-disabled, .isDarkMode .pm-button.pm-button-blue[disabled] {
-  background-color: #0e4553;
-  border-color: #167088;
-  color: #c6cfdd; }
-
-.isDarkMode .pm-button:not(.pm-button-blue):not(.pv-button-green):not(.pm-button--primary):not(.pm-button--primaryborderEvenInDarkMode):not(.pm-button--link):not(.pm-button--error):not(.pm-button--warning):not(.pm-button--redborder):not(.pm-button--primaryborder), .isDarkMode .pm-button--info {
-  color: #e6eaf0;
-  background-color: #0F4C5C;
-  border-color: #167088; }
-
-.isDarkMode .pm-group-buttons > .pm-group-button.pm-button--primary {
-  border-color: #167088; }
-
-.isDarkMode .pm-button-blueborder {
-  border-color: #ED7D3A;
-  color: #ED7D3A; }
-
-.isDarkMode .pm-button-blueborder:hover {
-  border-color: #ef8c51;
-  color: #ef8c51; }
-
-.isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:active, .isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:hover, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:active, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:hover {
-  background: #105365 !important; }
-
-.isDarkMode .squireToolbar-separator {
-  background: #135e72; }
-
-.isDarkMode .composerTime-container,
-.isDarkMode [class*="composer-field"] {
-  color: #e6eaf0; }
-
-.isDarkMode .composerInputMeta-overlay-fakefield {
-  border-color: #e6eaf0; }
-
-.isDarkMode .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg {
-  color: white; }
-
-.isDarkMode .conversation {
-  border-color: #167088; }
-
-.isDarkMode .main-area,
-.isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar,
-.isDarkMode .main-area--withToolbar--noHeader,
-.isDarkMode [class*="block-info-"] {
-  color: #e6eaf0; }
-
-.isDarkMode [class*="block-info"] {
-  background-color: #167088;
-  color: #e6eaf0; }
-
-.isDarkMode .fill-global-grey {
-  fill: #ED7D3A; }
-
-.isDarkMode .starbutton {
-  fill: #0d0d0d; }
-
-.isDarkMode .bg-global-light, .isDarkMode kbd {
-  background: #0F4C5C; }
-
-.isDarkMode .item-container, .isDarkMode .item-container-row, .isDarkMode .contactsummary-container {
-  background: #0F4C5C; }
-
-.isDarkMode .items-column-list-inner, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer {
-  border-color: #167088; }
-  .isDarkMode .items-column-list-inner .item-container, .isDarkMode .items-column-list-inner .item-container-row, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container-row {
-    border-color: #167088; }
-
-.isDarkMode .item-container:not(.item-is-selected):not(.read):not(.active),
-.isDarkMode .item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active),
-.isDarkMode .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .isDarkMode .squireToolbar-container {
-  background: #135e72; }
-
-.isDarkMode .item-container.active, .isDarkMode .item-is-selected {
-  background: #0e4553; }
-  .isDarkMode .item-container.active .flex-item-fluid, .isDarkMode .item-is-selected .flex-item-fluid {
-    color: #ED7D3A; }
-
-.isDarkMode .item-icon {
-  background-color: #0F4C5C;
-  border: 1px solid #d6dde6; }
-
-.isDarkMode .selectBoxElement-container:hover .item-icon {
-  background-color: #0F4C5C;
-  border: 1px solid #eb6e23; }
-  .isDarkMode .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon {
-    fill: #eb6e23; }
-
-.isDarkMode .selectBoxElement-container {
-  color: #e6eaf0; }
-
-.isDarkMode .selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-  background-color: #eb6e23;
-  border-color: #eb6e23; }
-
-.isDarkMode .item-checkbox + .item-icon:hover,
-.isDarkMode .item-checkbox:hover + .item-icon {
-  background-color: #0b3a46; }
-
-.isDarkMode .items-column-list,
-.isDarkMode .elementList-container-row {
-  background-color: #0F4C5C; }
-
-.isDarkMode .composer-container {
-  background: #135e72; }
-
-.isDarkMode .message-header {
-  background-color: #135e72; }
-
-.isDarkMode .view-column-detail {
-  background-color: #0F4C5C; }
-
-.isDarkMode details:first-child {
-  border-color: #167088; }
-
-.isDarkMode .items-column-list,
-.isDarkMode .message-container,
-.isDarkMode .message-attachments {
-  border-color: #167088; }
-
-.isDarkMode .message-container:not(.sent):not(.draft) .message-header.message-summary::before,
-.isDarkMode .message-header.is-inbound::before {
-  border-top: 1px solid #167088;
-  border-left: 1px solid #167088;
-  background-color: #135e72; }
-
-.isDarkMode .message-infobox {
-  background-color: #0F4C5C; }
-
-.isDarkMode .message-content.frame.message-frame {
-  background: white;
-  color: black; }
-
-.isDarkMode .block-info-standard, .isDarkMode .bodyDecrypted blockquote {
-  border-color: #ED7D3A; }
-
-.isDarkMode .squireDropdown-item-label {
-  color: #e6eaf0; }
-
-.isDarkMode .squireToolbar-action-color {
-  background: transparent; }
-
-.isDarkMode .angular-squire-iframe body {
-  color: #e6eaf0;
-  background: #135e72; }
-  .isDarkMode .angular-squire-iframe body a {
-    color: #ED7D3A; }
-
-.isDarkMode .plaintext-editor {
-  color: #e6eaf0; }
-
-.isDarkMode .pm-button, .isDarkMode .pm-button--info, .isDarkMode .pm-button--redborder {
-  background: #0F4C5C;
-  border-color: #167088;
-  color: #e6eaf0; }
-
-.isDarkMode .message-attachmentInfo {
-  border-color: #167088; }
-
-.isDarkMode .is-hover.pm-button--info, .isDarkMode .is-hover.pm-button--redborder,
-.isDarkMode .pm-button--info:focus, .isDarkMode .pm-button--info:focus-within,
-.isDarkMode .pm-button--info:hover, .isDarkMode .pm-button--redborder:focus,
-.isDarkMode .pm-button--redborder:focus-within, .isDarkMode .pm-button--redborder:hover,
-.isDarkMode .pm-button.is-hover, .isDarkMode .pm-button:focus-within,
-.isDarkMode .pm-button:hover:not(.pm-button--primary) {
-  color: #ED7D3A; }
-
-.isDarkMode .pm-button:focus {
-  color: #e6eaf0; }
-
-.isDarkMode .is-disabled.pm-button--info,
-.isDarkMode .is-disabled.pm-button--redborder,
-.isDarkMode .pm-button--info[disabled],
-.isDarkMode .pm-button--redborder[disabled],
-.isDarkMode .pm-button.is-disabled,
-.isDarkMode .pm-button[disabled] {
-  background: #167088; }
-
-.isDarkMode .is-active.pm-button--info,
-.isDarkMode .is-active.pm-button--redborder,
-.isDarkMode .pm-button--info:not(div):active,
-.isDarkMode .pm-button--redborder:not(div):active,
-.isDarkMode .pm-button.is-active, .isDarkMode .pm-button:not(div):active {
-  background: #167088;
-  color: #ED7D3A; }
-
-.isDarkMode .dropDown-content {
-  background: #0F4C5C;
-  color: #e6eaf0; }
-  .isDarkMode .dropDown-content button {
-    color: #e6eaf0; }
-  .isDarkMode .dropDown-content .elementsSelector-btn-action,
-  .isDarkMode .dropDown-content .dropDown-item:hover {
-    color: #e6eaf0; }
-  .isDarkMode .dropDown-content .dropDown-item:hover {
-    background: #135e72 !important; }
-  .isDarkMode .dropDown-content .dropDown-item + .dropDown-item {
-    border-top: 1px solid #167088; }
-  .isDarkMode .dropDown-content .dropDown-item .color-global-grey {
-    color: #e6eaf0; }
-
-.isDarkMode .dropDown .dropDown-content::before, .isDarkMode .dropDown .dropDown-content::after {
-  border-bottom-color: #0F4C5C; }
-
-.isDarkMode .dropDown--right-bottom::before {
-  border-right-color: #0F4C5C; }
-
-.isDarkMode .dropDown--right-bottom .dropDown-content::before, .isDarkMode .dropDown--right-bottom .dropDown-content::after {
-  background: #0F4C5C; }
-
-.isDarkMode .dropDown--bottom-right .dropDown-content::before, .isDarkMode .dropDown--bottom-right .dropDown-content::after {
-  background: #0F4C5C; }
-
-.isDarkMode .dropDown--bottom-left::before,
-.isDarkMode .dropDown--bottom-right::before,
-.isDarkMode .dropDown--bottom::before {
-  border-bottom-color: #167088; }
-
-.isDarkMode .dropDown--bottom-right {
-  border: 1px solid #167088; }
-
-.isDarkMode .pm-field-icon-container[type="search"], .isDarkMode .pm-field[type="search"] {
-  background-color: #135e72; }
-
-.isDarkMode .dropDown-contentInner {
-  background-color: #0F4C5C; }
-  .isDarkMode .dropDown-contentInner::before, .isDarkMode .dropDown-contentInner::after {
-    background-color: #0F4C5C; }
-  .isDarkMode .dropDown-contentInner .dropDown-item span {
-    color: #e6eaf0 !important; }
-
-.isDarkMode .searchbox-field[type="search"]:not(#global_search) {
-  background: #e6eaf0;
-  color: #0F4C5C; }
-
-.isDarkMode .link:active, .isDarkMode .link:focus, .isDarkMode .link:hover,
-.isDarkMode a:active, .isDarkMode a:focus, .isDarkMode a:hover,
-.isDarkMode .pm-button--link:hover,
-.isDarkMode .composerInputMeta-label:hover {
-  color: #ef8c51; }
-
-.isDarkMode .pm-modal, .isDarkMode .pm-modalContentInner {
-  background-color: #0F4C5C;
-  color: #e6eaf0; }
-  .isDarkMode .pm-modal::before, .isDarkMode .pm-modal::after, .isDarkMode .pm-modalContentInner::before, .isDarkMode .pm-modalContentInner::after {
-    background-color: #0F4C5C; }
-  .isDarkMode .pm-modal .labelColorSelector-item-mask, .isDarkMode .pm-modalContentInner .labelColorSelector-item-mask {
-    border: 2px solid #1a829e; }
-
-.isDarkMode .pm-button--primaryborder, .isDarkMode .pm-button-blueborder {
-  border-color: #ED7D3A;
-  color: #ED7D3A;
-  background-color: #135e72;
-  transition: background-color .2s ease-in-out; }
-
-.isDarkMode .is-hover.pm-button--primaryborder, .isDarkMode .pm-button--primaryborder:focus,
-.isDarkMode .pm-button--primaryborder:focus-within, .isDarkMode .pm-button--primaryborder:hover,
-.isDarkMode .pm-button-blueborder.is-hover, .isDarkMode .pm-button-blueborder:focus,
-.isDarkMode .pm-button-blueborder:focus-within, .isDarkMode .pm-button-blueborder:hover {
-  border-color: #ED7D3A;
-  color: #ED7D3A;
-  background-color: #0e4858; }
-
-.isDarkMode .scrollshadow-static {
-  background: #0F4C5C; }
-
-.isDarkMode .pm-field, .isDarkMode .pm-field-icon-container,
-.isDarkMode .focus.pm-field-icon-container, .isDarkMode .pm-field-icon-container:focus,
-.isDarkMode .pm-field-icon-container:focus-within, .isDarkMode .pm-field.focus,
-.isDarkMode .pm-field:focus, .isDarkMode .pm-field:focus-within,
-.isDarkMode .composerInputMeta-overlay-fakefield,
-.isDarkMode .composerInputMeta-autocomplete {
-  color: #e6eaf0;
-  background-color: #135e72; }
-  .isDarkMode .pm-field::placeholder, .isDarkMode .pm-field-icon-container::placeholder,
-  .isDarkMode .focus.pm-field-icon-container::placeholder, .isDarkMode .pm-field-icon-container:focus::placeholder,
-  .isDarkMode .pm-field-icon-container:focus-within::placeholder, .isDarkMode .pm-field.focus::placeholder,
-  .isDarkMode .pm-field:focus::placeholder, .isDarkMode .pm-field:focus-within::placeholder,
-  .isDarkMode .composerInputMeta-overlay-fakefield::placeholder,
-  .isDarkMode .composerInputMeta-autocomplete::placeholder {
-    color: #d6dde6; }
-
-.isDarkMode .composerInputMeta-autocomplete input {
-  color: #e6eaf0;
-  background-color: #135e72; }
-  .isDarkMode .composerInputMeta-autocomplete input::placeholder {
-    color: #d6dde6; }
-
-.isDarkMode select.pm-field, .isDarkMode select.pm-field-icon-container {
-  background-color: #135e72;
-  color: #e6eaf0; }
-
-.isDarkMode .storageProgress-content.dropDown-content--rightbottom::before {
-  border-right-color: #0F4C5C; }
-
-.isDarkMode .sticky-title {
-  background: #105365; }
-
-.isDarkMode .bg-global-highlight {
-  background-color: #0F4C5C; }
-
-.isDarkMode .bg-white-dm {
-  background-color: #135e72; }
-
-.isDarkMode .main-area, .isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar,
-.isDarkMode .main-area--withToolbar--noHeader,
-.isDarkMode [class*="block-info-"] {
-  color: #e6eaf0; }
-
-.isDarkMode .main-area, .isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar, .isDarkMode .main-area--withToolbar--noHeader {
-  background: #0F4C5C; }
-
-.isDarkMode .context-bar {
-  background: #0F4C5C; }
-
-.isDarkMode .subnav {
-  background: #135e72; }
-  .isDarkMode .subnav .link, .isDarkMode .subnav a {
-    color: #ED7D3A; }
-  .isDarkMode .subnav .link:active, .isDarkMode .subnav .link:focus, .isDarkMode .subnav .link:hover, .isDarkMode .subnav a:active, .isDarkMode .subnav a:focus, .isDarkMode .subnav a:hover {
-    color: #ef8c51; }
-
-.isDarkMode .pm-toggle-label {
-  border-color: #167088;
-  background: #135e72; }
-  .isDarkMode .pm-toggle-label::before {
-    background: #0F4C5C; }
-  .isDarkMode .pm-toggle-label .pm-toggle-label-img {
-    fill: #e6eaf0; }
-
-.isDarkMode .pm-plans-table-row--highlighted {
-  background-color: #0F4C5C; }
-
-.isDarkMode .pm-checkbox-fakecheck,
-.isDarkMode .pm-radio-fakeradio {
-  background: transparent; }
-
-.isDarkMode [class*="icon-"].color-primary {
-  color: #ED7D3A; }
-
-.isDarkMode .color-global-grey-dm {
-  color: #ED7D3A; }
+:root {
+  --searchbox-background-color: #0a353f;
+  --searchbox-text-color: #f5f7fa !important;
+  --optional-sidebar-background-color: #0f4c5c;
+  --optional-email-item-unread-icon-background-color: #092f39;
+  --optional-email-item-unread-icon-text-color: #f5f7fa;
+}
+
+.meter-bar-thumb, .used-space {
+  --signal-success: #ed7d3a;
+}
\ No newline at end of file
diff --git a/themes/dark_bubble_gum/dark_bubble_gum.css b/themes/dark_bubble_gum/dark_bubble_gum.css
index c125e78..3266a02 100644
--- a/themes/dark_bubble_gum/dark_bubble_gum.css
+++ b/themes/dark_bubble_gum/dark_bubble_gum.css
@@ -1,735 +1,261 @@
 /*! =========================================== *
  * DARK BUBBLE GUM THEME
- * Version: v4.0.0-beta.33
+ * Version: v4.0.8
  * Author: Cristiano Almeida
  * Website: www.csalmeida.com
  * Twitter: @_csalmeida
  * =========================================== */
+:root,
+.ui-standard {
+  --primary: #ef2d56;
+  --primary-contrast: white;
+  --signal-danger: #ed4c51;
+  --signal-danger-hover: #f7595e;
+  --signal-danger-active: #ff666b;
+  --signal-danger-contrast: white;
+  --signal-warning: #f5930a;
+  --signal-warning-hover: #f5a716;
+  --signal-warning-active: #f5b922;
+  --signal-warning-contrast: black;
+  --signal-success: #349172;
+  --signal-success-hover: #339c79;
+  --signal-success-active: #31a67f;
+  --signal-success-contrast: white;
+  --signal-info: #2c89db;
+  --signal-info-hover: #3491e3;
+  --signal-info-active: #3d99eb;
+  --signal-info-contrast: white;
+  --text-norm: white;
+  --text-weak: #a4a9b5;
+  --text-hint: #696f7d;
+  --text-disabled: #575d6b;
+  --text-invert: #262a33;
+  --field-norm: #e6eaf0;
+  --field-hover: #ed1543;
+  --field-disabled: #464b58;
+  --border-norm: #080808;
+  --border-weak: #0f0f0f;
+  --background-norm: #1c1c1c !important;
+  --background-weak: #292929;
+  --background-strong: #030303;
+  --interaction-norm: #ef2d56;
+  --interaction-norm-hover: #f0385e;
+  --interaction-norm-active: #f14267;
+  --interaction-norm-contrast: white;
+  --interaction-weak: #141414 !important;
+  --interaction-weak-hover: #0f0f0f;
+  --interaction-weak-active: #696f7d;
+  --interaction-default: transparent;
+  --interaction-default-hover: rgba(87, 93, 107, 0.2);
+  --interaction-default-active: rgba(87, 93, 107, 0.3);
+  --shadow-norm-opacity: 0.32;
+  --shadow-lifted-opacity: 0.4;
+  --backdrop-norm: rgba(0, 0, 0, 0.32);
+  --optional-scrollbar-thumb-color: #464b58;
+  --optional-scrollbar-thumb-hover-color: #575d6b;
+  --optional-email-item-read-background-color: #1a1d24;
+  --optional-email-item-read-text-color: var(--text-weak);
+  --optional-email-item-selected-background-color: #bf2d4c;
+}
+
+.ui-prominent,
+.ui-standard,
 :root {
-  --main-bg-color: #1C1C1C;
-  --secondary-bg-color: #0f0f0f;
-  --bgcolor-searchbox-field: #131212;
-  --bgcolor-spacebar: rgba(255, 255, 255, 0.1);
-  --bgcolor-aside-link: rgba(0, 0, 0, 0.3);
-  --bgcolor-toolbar: #292929;
-  --fillcolor-logo: #f6f7fa;
-  --fillcolor-icons: #fff;
-  --color-nav-link: #fff;
-  --color-nav-active: #EF2D56;
-  --color-standard-text: #fff;
-  --boxshadow-main: none; }
+  --selection-background-color: var(
+    --optional-selection-background-color,
+    var(--primary)
+  );
+  --selection-text-color: var(
+    --optional-selection-text-color,
+    var(--primary-contrast)
+  );
+  --header-background-color: #1c1c1c !important;
+  --sidebar-background-color: var(
+    --optional-sidebar-background-color,
+    var(--background-norm)
+  );
+  --navigation-current-item-marker-color: var(
+    --optional-navigation-current-item-marker-color,
+    var(--interaction-norm)
+  );
+  --navigation-current-item-background-color: var(
+    --optional-navigation-current-item-background-color,
+    var(--interaction-default-hover)
+  );
+  --navigation-current-item-text-color: var(
+    --optional-navigation-current-item-text-color,
+    var(--text-norm)
+  );
+  --main-box-shadow: var(--optional-main-box-shadow, none);
+  --main-border-color: var(--optional-main-border-color, var(--border-norm));
+  --navigation-item-count-background-color: var(
+    --optional-navigation-item-count-background-color,
+    var(--primary)
+  );
+  --navigation-item-count-text-color: var(
+    --optional-navigation-item-count-text-color,
+    var(--primary-contrast)
+  );
+  --toolbar-background-color: var(
+    --optional-toolbar-background-color,
+    var(--background-weak)
+  );
+  --toolbar-border-bottom-color: var(
+    --optional-toolbar-border-bottom-color,
+    var(--border-norm)
+  );
+  --toolbar-text-color: var(--optional-toolbar-text-color, var(--text-norm));
+  --toolbar-separator-color: var(
+    --optional-toolbar-separator-color,
+    var(--border-norm)
+  );
+  --scrollbar-thumb-color: var(
+    --optional-scrollbar-thumb-color,
+    hsla(0, 0%, 50%, 0.25)
+  );
+  --scrollbar-thumb-hover-color: var(
+    --optional-scrollbar-thumb-hover-color,
+    hsla(0, 0%, 50%, 0.5)
+  );
+  --tooltip-background-color: var(--optional-tooltip-background-color, #000);
+  --tooltip-text-color: var(--optional-tooltip-text-color, #fff);
+  --email-item-unread-background-color: var(
+    --optional-email-item-unread-background-color,
+    var(--background-norm)
+  );
+  --email-item-unread-text-color: var(
+    --optional-email-item-unread-text-color,
+    var(--text-norm)
+  );
+  --email-item-unread-icon-background-color: var(
+    --optional-email-item-unread-icon-background-color,
+    var(--background-strong)
+  );
+  --email-item-unread-icon-text-color: var(
+    --optional-email-item-unread-icon-text-color,
+    inherit
+  );
+  --email-item-read-background-color: #292929;
+  --email-item-read-text-color: #e6eaf0;
+  --email-item-read-icon-background-color: var(
+    --optional-email-item-read-icon-background-color,
+    var(--background-strong)
+  );
+  --email-item-read-icon-text-color: var(
+    --optional-email-item-read-icon-text-color,
+    inherit
+  );
+  --email-item-selected-background-color: var(
+    --optional-email-item-selected-background-color,
+    var(--interaction-norm)
+  );
+  --email-item-selected-text-color: var(
+    --optional-email-item-selected-text-color,
+    var(--interaction-norm-contrast)
+  );
+  --email-item-selected-icon-background-color: var(
+    --optional-email-item-selected-icon-background-color,
+    var(--interaction-norm-hover)
+  );
+  --email-item-selected-icon-text-color: var(
+    --optional-email-item-selected-icon-text-color,
+    inherit
+  );
+  --email-item-focus-marker-color: var(
+    --optional-email-item-focus-marker-color,
+    var(--interaction-norm)
+  );
+  --email-item-selected-focus-marker-color: var(
+    --optional-email-item-selected-focus-marker-color,
+    var(--interaction-norm-hover)
+  );
+  --email-message-view-background-color: var(
+    --optional-email-message-view-background-color,
+    var(--background-norm)
+  );
+  --field-background-color: var(
+    --optional-field-background-color,
+    var(--background-norm)
+  );
+  --field-text-color: var(--optional-field-text-color, var(--text-norm));
+  --field-placeholder-color: var(
+    --optional-field-placeholder-color,
+    var(--text-hint)
+  );
+  --field-hover-background-color: var(
+    --optional-field-hover-background-color,
+    var(--background-norm)
+  );
+  --field-hover-text-color: var(
+    --optional-field-hover-text-color,
+    var(--text-norm)
+  );
+  --field-focus-background-color: var(
+    --optional-field-focus-background-color,
+    var(--background-norm)
+  );
+  --field-focus-text-color: var(
+    --optional-field-focus-text-color,
+    var(--text-norm)
+  );
+  --field-disabled-background-color: var(
+    --optional-field-disabled-background-color,
+    var(--background-norm)
+  );
+  --field-disabled-text-color: var(
+    --optional-field-disabled-text-color,
+    var(--text-disabled)
+  );
+  --select-background-color: var(
+    --optional-select-background-color,
+    var(--field-background-color)
+  );
+  --favorite-icon-color: var(--optional-favorite-icon-color, orange);
+  --mark-background-color: var(--optional-mark-background-color, #ff0);
+  --mark-text-color: var(--optional-mark-text-color, #000);
+  --mark-font-weight: var(--optional-mark-font-weight, normal);
+  --modal-background-color: var(--optional-modal-background-color);
+  --modal-text-color: var(--optional-modal-text-color);
+  --file-preview-text-color: var(
+    --optional-file-preview-text-color,
+    var(--text-norm)
+  );
+  --file-preview-background-color: var(
+    --optional-file-preview-background-color,
+    var(--background-norm)
+  );
+  --border-radius: var(--optional-border-radius, 3);
+  --font-family: var(
+    --optional-font-family,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen-Sans,
+    Ubuntu,
+    Cantarell,
+    Helvetica Neue,
+    sans-serif
+  );
+}
+
+.button-solid-norm {
+  --button-default-background-color: #ef2d56;
+  --button-hover-background-color: #f14267;
+  --button-active-background-color: #f14267;
+  --button-default-text-color: #e6eaf0;
+  --button-hover-text-color: var(--interaction-norm-contrast);
+  --button-active-text-color: var(--interaction-norm-contrast);
+}
 
-html:not(.editor-squire-iframe) body {
-  background: #1C1C1C;
-  color: #e6eaf0; }
-
-.pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue {
-  color: #e6eaf0;
-  background-color: #EF2D56;
-  border: 1px solid #EF2D56;
-  transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; }
-
-.is-hover.pm-button--error, .is-hover.pm-button--primary, .is-hover.pm-button--warning, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover {
-  color: #fff;
-  box-shadow: 0 0 0.35714em 0 rgba(0, 0, 0, 0.2);
-  background: #ed1543;
-  border: 1px solid #ed1543; }
-
-.pm-button--primaryborder-dark, .pm-button-blueborder-dark {
-  background: #1C1C1C;
-  border-color: #EF2D56;
-  color: #EF2D56; }
-
-.is-active.pm-button--primaryborder-dark, .is-hover.pm-button--primaryborder-dark, .pm-button--primaryborder-dark:focus, .pm-button--primaryborder-dark:focus-within, .pm-button--primaryborder-dark:hover, .pm-button--primaryborder-dark:not(div):active, .pm-button-blueborder-dark.is-active, .pm-button-blueborder-dark.is-hover, .pm-button-blueborder-dark:focus, .pm-button-blueborder-dark:focus-within, .pm-button-blueborder-dark:hover, .pm-button-blueborder-dark:not(div):active {
-  background: #1C1C1C;
-  border-color: #f14569;
-  color: #f14569; }
-
-.pm-button--primaryborder, .pm-button-blueborder {
-  border-color: #ed1543;
-  color: #ed1543; }
-
-.is-hover.pm-button--primaryborder, .pm-button--primaryborder:focus, .pm-button--primaryborder:focus-within, .pm-button--primaryborder:hover, .pm-button-blueborder.is-hover, .pm-button-blueborder:focus, .pm-button-blueborder:focus-within, .pm-button-blueborder:hover {
-  border-color: #ed1543;
-  color: #ed1543; }
-
-.is-disabled.pm-button--error, .is-disabled.pm-button--error.pm-button--info, .is-disabled.pm-button--error.pm-button--redborder, .is-disabled.pm-button--primary, .is-disabled.pm-button--primary.pm-button--info, .is-disabled.pm-button--primary.pm-button--redborder, .is-disabled.pm-button--warning, .is-disabled.pm-button--warning.pm-button--info, .is-disabled.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info[disabled], .pm-button--error.pm-button--redborder[disabled], .pm-button--error[disabled], .pm-button--primary.pm-button--info[disabled], .pm-button--primary.pm-button--redborder[disabled], .pm-button--primary[disabled], .pm-button--warning.pm-button--info[disabled], .pm-button--warning.pm-button--redborder[disabled], .pm-button--warning[disabled], .pm-button-blue.is-disabled, .pm-button-blue.is-disabled.pm-button--info, .pm-button-blue.is-disabled.pm-button--redborder, .pm-button-blue.pm-button--info[disabled], .pm-button-blue.pm-button--redborder[disabled], .pm-button-blue[disabled], .pm-button.is-disabled.pm-button--error, .pm-button.is-disabled.pm-button--primary, .pm-button.is-disabled.pm-button--warning, .pm-button.pm-button--error[disabled], .pm-button.pm-button--primary[disabled], .pm-button.pm-button--warning[disabled], .pm-button.pm-button-blue.is-disabled, .pm-button.pm-button-blue[disabled] {
-  background-color: #fdebef;
-  border-color: #f14569;
-  color: #d9103b; }
-
-.bg-primary {
-  background-color: #292929; }
-
-.color-primary {
-  color: #EF2D56; }
-
-.navigation__counterItem {
-  background: #d9103b;
-  color: white; }
-
-.item-container-row:hover::before, .item-container:hover::before {
-  border-color: #f35c7c; }
-
-.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon {
-  border-color: #f8a3b5; }
-
-.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon {
-  fill: #d9103b; }
-
-.circle-chart__circle {
-  stroke: #EF2D56; }
-
-#dropdown-0 .dropDown-content::after, #dropdown-0 .dropDown-content::before, #dropdown-0.dropDown:not(.dropDown--noCaret)::before,
-#dropdown-0 .dropDown-content {
-  background: #1C1C1C; }
-
-.dropDown:not(.dropDown--noCaret)::before,
-.dropDown::after,
-.dropDown-logout-initials,
-.dropDown-item-hr {
-  border-color: #292929 !important; }
-
-#global_search.searchbox-field[type="search"] {
-  background-color: #131212;
-  color: #e6eaf0; }
-
-.searchbox-advanced-search-button:active,
-.searchbox-advanced-search-button:focus,
-.searchbox-advanced-search-button:hover {
-  background-color: #1C1C1C; }
-
-.topnav-link, .topnav-link > .topnav-icon {
-  color: #fff;
-  transition: color .2s ease-in-out; }
-
-.topnav-link:active, .topnav-link:focus,
-.topnav-link:hover, .topnav-link[aria-current="true"] {
-  color: #EF2D56; }
-
-.topnav-link:active > .topnav-icon, .topnav-link:focus > .topnav-icon,
-.topnav-link:hover > .topnav-icon, .topnav-link[aria-current=true] > .topnav-icon {
-  color: #EF2D56; }
-
-.protonmail .text-purple {
-  color: #1C1C1C !important; }
-
-.protonmail .text-purple:hover {
-  color: #d9103b !important; }
-
-.dropDown-item-button:focus, .dropDown-item-button:hover, .dropDown-item-link:focus, .dropDown-item-link:hover {
-  color: #EF2D56; }
-
-#pm_composer .composer .composerHeader-container,
-.composerInputMeta-overlay .composerHeader-container {
-  background: #292929; }
-
-#pm_composer .composer .fill {
-  background: #fff; }
-
-.conversation.marked::before {
-  background: #EF2D56; }
-
-.item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active) {
-  background: #fff; }
-
-.item-container.selected, .item-container-row.selected,
-.item-container.active, .item-is-selected {
-  background: rgba(239, 45, 86, 0.1); }
-
-.selectBoxElement-container:hover .item-icon {
-  background-color: transparent;
-  border: 1px solid #ed1543; }
-  .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon {
-    fill: #ed1543; }
-
-.selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-  background-color: #ed1543;
-  border-color: #ed1543; }
-
-.item-checkbox:checked + .item-icon {
-  background-color: #EF2D56;
-  border-color: #EF2D56; }
-
-.item-checkbox + .item-icon:hover {
-  background-color: #ed1543;
-  border-color: #ed1543; }
-
-.item-checkbox + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #fff; }
-
-.item-checkbox:checked + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #fff; }
-
-.starbutton {
-  fill: #EF2D56 !important;
-  opacity: 0.7; }
-
-.starbutton:focus, .starbutton:hover {
-  fill: #EF2D56; }
-
-.autocompleteEmailsItem-icon svg.encryptionIcon {
-  fill: #ed1543; }
-
-.encryptionStatus .color-pm-blue svg {
-  color: #ed1543;
-  fill: #ed1543; }
-
-.encryptionStatus .color-global-grey-dm svg {
-  color: black; }
-
-.color-pm-blue {
-  color: #EF2D56; }
-
-.pm-radio:checked + .pm-radio-fakeradio::before {
-  background: #EF2D56; }
-
-.block-info-standard {
-  border-color: #1b68c6; }
-
-.block-info-standard-warning {
-  border-color: #ffaa00; }
-
-.block-info-standard-error {
-  border-color: #d62646; }
-
-.link, a, .pm-button--link {
-  color: #d9103b;
-  transition: color .2s ease-in-out; }
-
-.link:active, .link:focus, .link:hover,
-a:active, a:focus, a:hover,
-.pm-button--link:hover {
-  color: #d9103b; }
-
-.pm-button--primary {
-  background-color: #EF2D56;
-  border-color: #EF2D56; }
-
-.pm-button--link, .pm-button.pm-button--link {
-  color: #EF2D56; }
-
-.pm-button--error, .pm-button--error.pm-button--info, .pm-button--error.pm-button--redborder, .pm-button--primary, .pm-button--primary.pm-button--info, .pm-button--primary.pm-button--redborder, .pm-button--warning, .pm-button--warning.pm-button--info, .pm-button--warning.pm-button--redborder, .pm-button-blue, .pm-button-blue.pm-button--info, .pm-button-blue.pm-button--redborder, .pm-button.pm-button--error, .pm-button.pm-button--primary, .pm-button.pm-button--warning, .pm-button.pm-button-blue {
-  background-color: #EF2D56;
-  border-color: #EF2D56; }
-
-.is-hover.pm-button--error, .is-hover.pm-button--error.pm-button--info, .is-hover.pm-button--error.pm-button--redborder, .is-hover.pm-button--primary, .is-hover.pm-button--primary.pm-button--info, .is-hover.pm-button--primary.pm-button--redborder, .is-hover.pm-button--warning, .is-hover.pm-button--warning.pm-button--info, .is-hover.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:focus, .pm-button--error.pm-button--info:focus-within, .pm-button--error.pm-button--info:hover, .pm-button--error.pm-button--redborder:focus, .pm-button--error.pm-button--redborder:focus-within, .pm-button--error.pm-button--redborder:hover, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary.pm-button--info:focus, .pm-button--primary.pm-button--info:focus-within, .pm-button--primary.pm-button--info:hover, .pm-button--primary.pm-button--redborder:focus, .pm-button--primary.pm-button--redborder:focus-within, .pm-button--primary.pm-button--redborder:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning.pm-button--info:focus, .pm-button--warning.pm-button--info:focus-within, .pm-button--warning.pm-button--info:hover, .pm-button--warning.pm-button--redborder:focus, .pm-button--warning.pm-button--redborder:focus-within, .pm-button--warning.pm-button--redborder:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue.is-hover.pm-button--info, .pm-button-blue.is-hover.pm-button--redborder, .pm-button-blue.pm-button--info:focus, .pm-button-blue.pm-button--info:focus-within, .pm-button-blue.pm-button--info:hover, .pm-button-blue.pm-button--redborder:focus, .pm-button-blue.pm-button--redborder:focus-within, .pm-button-blue.pm-button--redborder:hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover, .pm-button.is-hover.pm-button--error, .pm-button.is-hover.pm-button--primary, .pm-button.is-hover.pm-button--warning, .pm-button.pm-button--error:focus, .pm-button.pm-button--error:focus-within, .pm-button.pm-button--error:hover, .pm-button.pm-button--primary:focus, .pm-button.pm-button--primary:focus-within, .pm-button.pm-button--primary:hover, .pm-button.pm-button--warning:focus, .pm-button.pm-button--warning:focus-within, .pm-button.pm-button--warning:hover, .pm-button.pm-button-blue.is-hover, .pm-button.pm-button-blue:focus, .pm-button.pm-button-blue:focus-within, .pm-button.pm-button-blue:hover {
-  background: #ed1543;
-  border: 1px solid #ed1543; }
-
-.is-active.pm-button--error, .is-active.pm-button--error.pm-button--info, .is-active.pm-button--error.pm-button--redborder, .is-active.pm-button--primary, .is-active.pm-button--primary.pm-button--info, .is-active.pm-button--primary.pm-button--redborder, .is-active.pm-button--warning, .is-active.pm-button--warning.pm-button--info, .is-active.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:not(div):active, .pm-button--error.pm-button--redborder:not(div):active, .pm-button--error:not(div):active, .pm-button--primary.pm-button--info:not(div):active, .pm-button--primary.pm-button--redborder:not(div):active, .pm-button--primary:not(div):active, .pm-button--warning.pm-button--info:not(div):active, .pm-button--warning.pm-button--redborder:not(div):active, .pm-button--warning:not(div):active, .pm-button-blue.is-active, .pm-button-blue.is-active.pm-button--info, .pm-button-blue.is-active.pm-button--redborder, .pm-button-blue.pm-button--info:not(div):active, .pm-button-blue.pm-button--redborder:not(div):active, .pm-button-blue:not(div):active, .pm-button.is-active.pm-button--error, .pm-button.is-active.pm-button--primary, .pm-button.is-active.pm-button--warning, .pm-button.pm-button--error:not(div):active, .pm-button.pm-button--primary:not(div):active, .pm-button.pm-button--warning:not(div):active, .pm-button.pm-button-blue.is-active, .pm-button.pm-button-blue:not(div):active {
-  background: #d9103b;
-  border-color: #d9103b; }
-
-.pm-button-blueborder {
-  box-shadow: none;
-  border-color: #1C1C1C;
-  color: #1C1C1C;
-  transition: color .2s ease-in-out, border-color .2s ease-in-out; }
-
-.pm-button-blueborder:hover {
-  box-shadow: none;
-  border-color: #d9103b;
-  color: #d9103b; }
-
-.is-active.pm-button--primaryborder,
-.pm-button--primaryborder:not(div):active,
-.pm-button-blueborder.is-active,
-.pm-button-blueborder:not(div):active {
-  border-color: #d9103b;
-  color: #d9103b;
-  background: transparent; }
-
-.pm-group-buttons > .pm-group-button.pm-button--primary {
-  border-color: #d9103b; }
-
-.bg-pm-blue-gradient .pm-button--transparent:hover {
-  color: #e6eaf0;
-  border-color: #e6eaf0; }
-
-.pm-toggle-checkbox:checked + .pm-toggle-label:before {
-  background: #EF2D56;
-  border-color: #EF2D56; }
-
-.composer-title-bar {
-  background: #1C1C1C; }
-
-.color-global-light {
-  color: #e6eaf0; }
-
-.angular-squire-iframe body a {
-  color: #EF2D56; }
-
-.fill-pm-blue,
-.message-attachmentIcon .file-outer-icon.is-embedded {
-  fill: #EF2D56; }
-
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2) {
-  border-color: #EF2D56;
-  color: #EF2D56; }
-  .pm-table--highlight[data-plan-number="1"] tr th:nth-child(2)::before {
-    background-color: #EF2D56; }
-
-.pm-table--highlight[data-plan-number="1"] tr td:nth-child(2),
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2),
-.pm-table--highlight[data-plan-number="1"] tr:last-child td:nth-child(2) {
-  border-color: #EF2D56; }
-
-.pm-simple-table-row-th .fill-primary {
-  fill: #EF2D56; }
-
-.pm-checkbox-fakecheck, .pm-radio-fakeradio {
-  border-color: #1C1C1C; }
-  .pm-checkbox-fakecheck [class*="icon-"], .pm-radio-fakeradio [class*="icon-"] {
-    fill: #EF2D56; }
-
-[class*="icon-"].color-primary {
-  color: #1C1C1C; }
-  [class*="icon-"].color-primary:hover {
-    color: #d9103b; }
-
-.pm-field, .editor,
-.editor-toolbar,
-.border-bottom,
-.border-top,
-.message-container.is-opened > .message-header {
-  border-color: #030303; }
-
-.badgeLabel, .badgeLabel-primary {
-  border-color: #d9103b; }
-
-.badgeLabel,
-.badgeLabel-blue,
-.badgeLabel-primary,
-.bg-pm-blue {
-  background-color: #d9103b; }
-
-body {
-  scrollbar-color: #363636 #212121; }
-
-::-webkit-scrollbar {
-  width: 16px; }
-  ::-webkit-scrollbar-track {
-    background: #212121; }
-  ::-webkit-scrollbar-thumb {
-    background: #363636;
-    box-shadow: inset 0 0 0 4px #212121;
-    border-radius: 16px; }
-
-.isDarkMode .bordered,
-.isDarkMode .bordered-container:not([class*="composerInputMeta-"]),
-.isDarkMode .breadcrumb-container {
-  border-color: #363636; }
-
-.isDarkMode .dropDown-content::after, .isDarkMode .dropDown-content::before,
-.isDarkMode .dropDown:not(.dropDown--noCaret)::before,
-.isDarkMode .dropDown-content {
-  background: #1C1C1C;
-  border: #1C1C1C; }
-
-.isDarkMode .dropDown-item-button:focus, .isDarkMode .dropDown-item-button:focus-within,
-.isDarkMode .dropDown-item-button:hover, .isDarkMode .dropDown-item-link:focus,
-.isDarkMode .dropDown-item-link:focus-within, .isDarkMode .dropDown-item-link:hover {
-  background-color: #0f0f0f; }
-
-.isDarkMode .dropDown-item-button.is-disabled, .isDarkMode .dropDown-item-button[disabled],
-.isDarkMode .dropDown-item-link.is-disabled, .isDarkMode .dropDown-item-link[disabled] {
-  background-color: #171717; }
-
-.isDarkMode .squireToolbar-select-list {
-  background: #1C1C1C;
-  color: #e6eaf0; }
-
-.isDarkMode .squireToolbar-dropdown-divider {
-  background-color: #363636; }
-
-.isDarkMode .squireToolbar-select-item:hover {
-  background: #171717; }
-
-.isDarkMode #pm_composer .composer,
-.isDarkMode .composerInputMeta-overlay {
-  background: #1C1C1C; }
-
-.isDarkMode #pm_composer .composer .fill {
-  background: #1C1C1C; }
-
-.isDarkMode .composer-body-container textarea {
-  background: #1C1C1C; }
-
-.isDarkMode .composer-addresses-item {
-  background: #0f0f0f; }
-
-.isDarkMode .composer-addresses-autocomplete ul {
-  background: #0f0f0f; }
-
-.isDarkMode .composer-addresses-autocomplete li[aria-selected="true"],
-.isDarkMode .composer-addresses-autocomplete li:hover {
-  background: #1C1C1C; }
-
-.isDarkMode .autocompleteEmails-item {
-  background-color: #171717;
-  border-color: #171717; }
-
-.isDarkMode .autocompleteEmails-label {
-  border-left: 1px solid #363636;
-  border-right: 1px solid #363636; }
-
-.isDarkMode .composerOptions-container.show {
-  background: #171717; }
-  .isDarkMode .composerOptions-container.show .shadow-container {
-    background: #1C1C1C;
-    color: #e6eaf0; }
-
-.isDarkMode .pm-button.pm-button--primary {
-  background: #d9103b;
-  color: #e6eaf0;
-  border-color: #d9103b; }
-
-.isDarkMode .pm-button.pm-button--primary:hover {
-  background: #EF2D56;
-  color: #e6eaf0; }
-
-.isDarkMode .is-disabled.pm-button--error, .isDarkMode .is-disabled.pm-button--error.pm-button--info, .isDarkMode .is-disabled.pm-button--error.pm-button--redborder, .isDarkMode .is-disabled.pm-button--primary, .isDarkMode .is-disabled.pm-button--primary.pm-button--info, .isDarkMode .is-disabled.pm-button--primary.pm-button--redborder, .isDarkMode .is-disabled.pm-button--warning, .isDarkMode .is-disabled.pm-button--warning.pm-button--info, .isDarkMode .is-disabled.pm-button--warning.pm-button--redborder, .isDarkMode .pm-button--error.pm-button--info[disabled], .isDarkMode .pm-button--error.pm-button--redborder[disabled], .isDarkMode .pm-button--error[disabled], .isDarkMode .pm-button--primary.pm-button--info[disabled], .isDarkMode .pm-button--primary.pm-button--redborder[disabled], .isDarkMode .pm-button--primary[disabled], .isDarkMode .pm-button--warning.pm-button--info[disabled], .isDarkMode .pm-button--warning.pm-button--redborder[disabled], .isDarkMode .pm-button--warning[disabled], .isDarkMode .pm-button-blue.is-disabled, .isDarkMode .pm-button-blue.is-disabled.pm-button--info, .isDarkMode .pm-button-blue.is-disabled.pm-button--redborder, .isDarkMode .pm-button-blue.pm-button--info[disabled], .isDarkMode .pm-button-blue.pm-button--redborder[disabled], .isDarkMode .pm-button-blue[disabled], .isDarkMode .pm-button.is-disabled.pm-button--error, .isDarkMode .pm-button.is-disabled.pm-button--primary, .isDarkMode .pm-button.is-disabled.pm-button--warning, .isDarkMode .pm-button.pm-button--error[disabled], .isDarkMode .pm-button.pm-button--primary[disabled], .isDarkMode .pm-button.pm-button--warning[disabled], .isDarkMode .pm-button.pm-button-blue.is-disabled, .isDarkMode .pm-button.pm-button-blue[disabled] {
-  background-color: #171717;
-  border-color: #363636;
-  color: #c6cfdd; }
-
-.isDarkMode .pm-button:not(.pm-button-blue):not(.pv-button-green):not(.pm-button--primary):not(.pm-button--primaryborderEvenInDarkMode):not(.pm-button--link):not(.pm-button--error):not(.pm-button--warning):not(.pm-button--redborder):not(.pm-button--primaryborder), .isDarkMode .pm-button--info {
-  color: #e6eaf0;
-  background-color: #1C1C1C;
-  border-color: #363636; }
-
-.isDarkMode .pm-group-buttons > .pm-group-button.pm-button--primary {
-  border-color: #363636; }
-
-.isDarkMode .pm-button-blueborder {
-  border-color: #EF2D56;
-  color: #EF2D56; }
-
-.isDarkMode .pm-button-blueborder:hover {
-  border-color: #f14569;
-  color: #f14569; }
-
-.isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:active, .isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:hover, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:active, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:hover {
-  background: #212121 !important; }
-
-.isDarkMode .squireToolbar-separator {
-  background: #292929; }
-
-.isDarkMode .composerTime-container,
-.isDarkMode [class*="composer-field"] {
-  color: #e6eaf0; }
-
-.isDarkMode .composerInputMeta-overlay-fakefield {
-  border-color: #e6eaf0; }
-
-.isDarkMode .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg {
-  color: white; }
-
-.isDarkMode .conversation {
-  border-color: #363636; }
-
-.isDarkMode .main-area,
-.isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar,
-.isDarkMode .main-area--withToolbar--noHeader,
-.isDarkMode [class*="block-info-"] {
-  color: #e6eaf0; }
-
-.isDarkMode [class*="block-info"] {
-  background-color: #363636;
-  color: #e6eaf0; }
-
-.isDarkMode .fill-global-grey {
-  fill: #EF2D56; }
-
-.isDarkMode .starbutton {
-  fill: #0d0d0d; }
-
-.isDarkMode .bg-global-light, .isDarkMode kbd {
-  background: #1C1C1C; }
-
-.isDarkMode .item-container, .isDarkMode .item-container-row, .isDarkMode .contactsummary-container {
-  background: #1C1C1C; }
-
-.isDarkMode .items-column-list-inner, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer {
-  border-color: #363636; }
-  .isDarkMode .items-column-list-inner .item-container, .isDarkMode .items-column-list-inner .item-container-row, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container-row {
-    border-color: #363636; }
-
-.isDarkMode .item-container:not(.item-is-selected):not(.read):not(.active),
-.isDarkMode .item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active),
-.isDarkMode .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .isDarkMode .squireToolbar-container {
-  background: #292929; }
-
-.isDarkMode .item-container.active, .isDarkMode .item-is-selected {
-  background: #171717; }
-  .isDarkMode .item-container.active .flex-item-fluid, .isDarkMode .item-is-selected .flex-item-fluid {
-    color: #EF2D56; }
-
-.isDarkMode .item-icon {
-  background-color: #1C1C1C;
-  border: 1px solid #d6dde6; }
-
-.isDarkMode .selectBoxElement-container:hover .item-icon {
-  background-color: #1C1C1C;
-  border: 1px solid #ed1543; }
-  .isDarkMode .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon {
-    fill: #ed1543; }
-
-.isDarkMode .selectBoxElement-container {
-  color: #e6eaf0; }
-
-.isDarkMode .selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-  background-color: #ed1543;
-  border-color: #ed1543; }
-
-.isDarkMode .item-checkbox + .item-icon:hover,
-.isDarkMode .item-checkbox:hover + .item-icon {
-  background-color: #0f0f0f; }
-
-.isDarkMode .items-column-list,
-.isDarkMode .elementList-container-row {
-  background-color: #1C1C1C; }
-
-.isDarkMode .composer-container {
-  background: #292929; }
-
-.isDarkMode .message-header {
-  background-color: #292929; }
-
-.isDarkMode .view-column-detail {
-  background-color: #1C1C1C; }
-
-.isDarkMode details:first-child {
-  border-color: #363636; }
-
-.isDarkMode .items-column-list,
-.isDarkMode .message-container,
-.isDarkMode .message-attachments {
-  border-color: #363636; }
-
-.isDarkMode .message-container:not(.sent):not(.draft) .message-header.message-summary::before,
-.isDarkMode .message-header.is-inbound::before {
-  border-top: 1px solid #363636;
-  border-left: 1px solid #363636;
-  background-color: #292929; }
-
-.isDarkMode .message-infobox {
-  background-color: #1C1C1C; }
-
-.isDarkMode .message-content.frame.message-frame {
-  background: white;
-  color: black; }
-
-.isDarkMode .block-info-standard, .isDarkMode .bodyDecrypted blockquote {
-  border-color: #EF2D56; }
-
-.isDarkMode .squireDropdown-item-label {
-  color: #e6eaf0; }
-
-.isDarkMode .squireToolbar-action-color {
-  background: transparent; }
-
-.isDarkMode .angular-squire-iframe body {
-  color: #e6eaf0;
-  background: #292929; }
-  .isDarkMode .angular-squire-iframe body a {
-    color: #EF2D56; }
-
-.isDarkMode .plaintext-editor {
-  color: #e6eaf0; }
-
-.isDarkMode .pm-button, .isDarkMode .pm-button--info, .isDarkMode .pm-button--redborder {
-  background: #1C1C1C;
-  border-color: #363636;
-  color: #e6eaf0; }
-
-.isDarkMode .message-attachmentInfo {
-  border-color: #363636; }
-
-.isDarkMode .is-hover.pm-button--info, .isDarkMode .is-hover.pm-button--redborder,
-.isDarkMode .pm-button--info:focus, .isDarkMode .pm-button--info:focus-within,
-.isDarkMode .pm-button--info:hover, .isDarkMode .pm-button--redborder:focus,
-.isDarkMode .pm-button--redborder:focus-within, .isDarkMode .pm-button--redborder:hover,
-.isDarkMode .pm-button.is-hover, .isDarkMode .pm-button:focus-within,
-.isDarkMode .pm-button:hover:not(.pm-button--primary) {
-  color: #EF2D56; }
-
-.isDarkMode .pm-button:focus {
-  color: #e6eaf0; }
-
-.isDarkMode .is-disabled.pm-button--info,
-.isDarkMode .is-disabled.pm-button--redborder,
-.isDarkMode .pm-button--info[disabled],
-.isDarkMode .pm-button--redborder[disabled],
-.isDarkMode .pm-button.is-disabled,
-.isDarkMode .pm-button[disabled] {
-  background: #363636; }
-
-.isDarkMode .is-active.pm-button--info,
-.isDarkMode .is-active.pm-button--redborder,
-.isDarkMode .pm-button--info:not(div):active,
-.isDarkMode .pm-button--redborder:not(div):active,
-.isDarkMode .pm-button.is-active, .isDarkMode .pm-button:not(div):active {
-  background: #363636;
-  color: #EF2D56; }
-
-.isDarkMode .dropDown-content {
-  background: #1C1C1C;
-  color: #e6eaf0; }
-  .isDarkMode .dropDown-content button {
-    color: #e6eaf0; }
-  .isDarkMode .dropDown-content .elementsSelector-btn-action,
-  .isDarkMode .dropDown-content .dropDown-item:hover {
-    color: #e6eaf0; }
-  .isDarkMode .dropDown-content .dropDown-item:hover {
-    background: #292929 !important; }
-  .isDarkMode .dropDown-content .dropDown-item + .dropDown-item {
-    border-top: 1px solid #363636; }
-  .isDarkMode .dropDown-content .dropDown-item .color-global-grey {
-    color: #e6eaf0; }
-
-.isDarkMode .dropDown .dropDown-content::before, .isDarkMode .dropDown .dropDown-content::after {
-  border-bottom-color: #1C1C1C; }
-
-.isDarkMode .dropDown--right-bottom::before {
-  border-right-color: #1C1C1C; }
-
-.isDarkMode .dropDown--right-bottom .dropDown-content::before, .isDarkMode .dropDown--right-bottom .dropDown-content::after {
-  background: #1C1C1C; }
-
-.isDarkMode .dropDown--bottom-right .dropDown-content::before, .isDarkMode .dropDown--bottom-right .dropDown-content::after {
-  background: #1C1C1C; }
-
-.isDarkMode .dropDown--bottom-left::before,
-.isDarkMode .dropDown--bottom-right::before,
-.isDarkMode .dropDown--bottom::before {
-  border-bottom-color: #363636; }
-
-.isDarkMode .dropDown--bottom-right {
-  border: 1px solid #363636; }
-
-.isDarkMode .pm-field-icon-container[type="search"], .isDarkMode .pm-field[type="search"] {
-  background-color: #292929; }
-
-.isDarkMode .dropDown-contentInner {
-  background-color: #1C1C1C; }
-  .isDarkMode .dropDown-contentInner::before, .isDarkMode .dropDown-contentInner::after {
-    background-color: #1C1C1C; }
-  .isDarkMode .dropDown-contentInner .dropDown-item span {
-    color: #e6eaf0 !important; }
-
-.isDarkMode .searchbox-field[type="search"]:not(#global_search) {
-  background: #e6eaf0;
-  color: #1C1C1C; }
-
-.isDarkMode .link:active, .isDarkMode .link:focus, .isDarkMode .link:hover,
-.isDarkMode a:active, .isDarkMode a:focus, .isDarkMode a:hover,
-.isDarkMode .pm-button--link:hover,
-.isDarkMode .composerInputMeta-label:hover {
-  color: #f14569; }
-
-.isDarkMode .pm-modal, .isDarkMode .pm-modalContentInner {
-  background-color: #1C1C1C;
-  color: #e6eaf0; }
-  .isDarkMode .pm-modal::before, .isDarkMode .pm-modal::after, .isDarkMode .pm-modalContentInner::before, .isDarkMode .pm-modalContentInner::after {
-    background-color: #1C1C1C; }
-  .isDarkMode .pm-modal .labelColorSelector-item-mask, .isDarkMode .pm-modalContentInner .labelColorSelector-item-mask {
-    border: 2px solid #424242; }
-
-.isDarkMode .pm-button--primaryborder, .isDarkMode .pm-button-blueborder {
-  border-color: #EF2D56;
-  color: #EF2D56;
-  background-color: #292929;
-  transition: background-color .2s ease-in-out; }
-
-.isDarkMode .is-hover.pm-button--primaryborder, .isDarkMode .pm-button--primaryborder:focus,
-.isDarkMode .pm-button--primaryborder:focus-within, .isDarkMode .pm-button--primaryborder:hover,
-.isDarkMode .pm-button-blueborder.is-hover, .isDarkMode .pm-button-blueborder:focus,
-.isDarkMode .pm-button-blueborder:focus-within, .isDarkMode .pm-button-blueborder:hover {
-  border-color: #EF2D56;
-  color: #EF2D56;
-  background-color: #191919; }
-
-.isDarkMode .scrollshadow-static {
-  background: #1C1C1C; }
-
-.isDarkMode .pm-field, .isDarkMode .pm-field-icon-container,
-.isDarkMode .focus.pm-field-icon-container, .isDarkMode .pm-field-icon-container:focus,
-.isDarkMode .pm-field-icon-container:focus-within, .isDarkMode .pm-field.focus,
-.isDarkMode .pm-field:focus, .isDarkMode .pm-field:focus-within,
-.isDarkMode .composerInputMeta-overlay-fakefield,
-.isDarkMode .composerInputMeta-autocomplete {
-  color: #e6eaf0;
-  background-color: #292929; }
-  .isDarkMode .pm-field::placeholder, .isDarkMode .pm-field-icon-container::placeholder,
-  .isDarkMode .focus.pm-field-icon-container::placeholder, .isDarkMode .pm-field-icon-container:focus::placeholder,
-  .isDarkMode .pm-field-icon-container:focus-within::placeholder, .isDarkMode .pm-field.focus::placeholder,
-  .isDarkMode .pm-field:focus::placeholder, .isDarkMode .pm-field:focus-within::placeholder,
-  .isDarkMode .composerInputMeta-overlay-fakefield::placeholder,
-  .isDarkMode .composerInputMeta-autocomplete::placeholder {
-    color: #d6dde6; }
-
-.isDarkMode .composerInputMeta-autocomplete input {
-  color: #e6eaf0;
-  background-color: #292929; }
-  .isDarkMode .composerInputMeta-autocomplete input::placeholder {
-    color: #d6dde6; }
-
-.isDarkMode select.pm-field, .isDarkMode select.pm-field-icon-container {
-  background-color: #292929;
-  color: #e6eaf0; }
-
-.isDarkMode .storageProgress-content.dropDown-content--rightbottom::before {
-  border-right-color: #1C1C1C; }
-
-.isDarkMode .sticky-title {
-  background: #212121; }
-
-.isDarkMode .bg-global-highlight {
-  background-color: #1C1C1C; }
-
-.isDarkMode .bg-white-dm {
-  background-color: #292929; }
-
-.isDarkMode .main-area, .isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar,
-.isDarkMode .main-area--withToolbar--noHeader,
-.isDarkMode [class*="block-info-"] {
-  color: #e6eaf0; }
-
-.isDarkMode .main-area, .isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar, .isDarkMode .main-area--withToolbar--noHeader {
-  background: #1C1C1C; }
-
-.isDarkMode .context-bar {
-  background: #1C1C1C; }
-
-.isDarkMode .subnav {
-  background: #292929; }
-  .isDarkMode .subnav .link, .isDarkMode .subnav a {
-    color: #EF2D56; }
-  .isDarkMode .subnav .link:active, .isDarkMode .subnav .link:focus, .isDarkMode .subnav .link:hover, .isDarkMode .subnav a:active, .isDarkMode .subnav a:focus, .isDarkMode .subnav a:hover {
-    color: #f14569; }
-
-.isDarkMode .pm-toggle-label {
-  border-color: #363636;
-  background: #292929; }
-  .isDarkMode .pm-toggle-label::before {
-    background: #1C1C1C; }
-  .isDarkMode .pm-toggle-label .pm-toggle-label-img {
-    fill: #e6eaf0; }
-
-.isDarkMode .pm-plans-table-row--highlighted {
-  background-color: #1C1C1C; }
-
-.isDarkMode .pm-checkbox-fakecheck,
-.isDarkMode .pm-radio-fakeradio {
-  background: transparent; }
-
-.isDarkMode [class*="icon-"].color-primary {
-  color: #EF2D56; }
-
-.isDarkMode .color-global-grey-dm {
-  color: #EF2D56; }
+:root {
+  --searchbox-background-color: #131212;
+  --searchbox-text-color: #e6eaf0 !important;
+  --optional-sidebar-background-color: #1c1c1c;
+  --optional-email-item-unread-icon-background-color: #080808;
+  --optional-email-item-unread-icon-text-color: #e6eaf0;
+}
+
+.meter-bar-thumb, .used-space {
+  --signal-success: #ef2d56;
+}
\ No newline at end of file
diff --git a/themes/deutera_one/deutera_one.css b/themes/deutera_one/deutera_one.css
index 89669f6..9d8d53d 100644
--- a/themes/deutera_one/deutera_one.css
+++ b/themes/deutera_one/deutera_one.css
@@ -1,797 +1,274 @@
 /*! =========================================== *
  * DEUTERA ONE THEME
- * Version: v4.0.0-beta.33
+ * Version: v4.0.8
  * Author: Cristiano Almeida
  * Website: www.csalmeida.com
  * Twitter: @_csalmeida
  * =========================================== */
+:root,
+.ui-standard {
+  --primary: #ffed00;
+  --primary-contrast: white;
+  --signal-danger: #ed4c51;
+  --signal-danger-hover: #f7595e;
+  --signal-danger-active: #ff666b;
+  --signal-danger-contrast: white;
+  --signal-warning: #f5930a;
+  --signal-warning-hover: #f5a716;
+  --signal-warning-active: #f5b922;
+  --signal-warning-contrast: black;
+  --signal-success: #349172;
+  --signal-success-hover: #339c79;
+  --signal-success-active: #31a67f;
+  --signal-success-contrast: white;
+  --signal-info: #2c89db;
+  --signal-info-hover: #3491e3;
+  --signal-info-active: #3d99eb;
+  --signal-info-contrast: white;
+  --text-norm: white;
+  --text-weak: #a4a9b5;
+  --text-hint: #696f7d;
+  --text-disabled: #575d6b;
+  --text-invert: #262a33;
+  --field-norm: #e6eaf0;
+  --field-hover: #e6d500;
+  --field-disabled: #464b58;
+  --border-norm: #00004d;
+  --border-weak: #00005d;
+  --background-norm: #000076 !important;
+  --background-weak: #000090;
+  --background-strong: #000043;
+  --interaction-norm: #ffed00;
+  --interaction-norm-hover: #ffee0d;
+  --interaction-norm-active: #ffef1a;
+  --interaction-norm-contrast: white;
+  --interaction-weak: #000067 !important;
+  --interaction-weak-hover: #00005d;
+  --interaction-weak-active: #696f7d;
+  --interaction-default: transparent;
+  --interaction-default-hover: rgba(87, 93, 107, 0.2);
+  --interaction-default-active: rgba(87, 93, 107, 0.3);
+  --shadow-norm-opacity: 0.32;
+  --shadow-lifted-opacity: 0.4;
+  --backdrop-norm: rgba(0, 0, 0, 0.32);
+  --optional-scrollbar-thumb-color: #464b58;
+  --optional-scrollbar-thumb-hover-color: #575d6b;
+  --optional-email-item-read-background-color: #1a1d24;
+  --optional-email-item-read-text-color: var(--text-weak);
+  --optional-email-item-selected-background-color: #ccbe00;
+}
+
+.ui-prominent,
+.ui-standard,
 :root {
-  --main-bg-color: #000076;
-  --secondary-bg-color: #00005d;
-  --bgcolor-searchbox-field: #08426b;
-  --bgcolor-spacebar: rgba(255, 255, 255, 0.1);
-  --bgcolor-aside-link: rgba(0, 0, 0, 0.3);
-  --bgcolor-toolbar: #000090;
-  --fillcolor-logo: #f6f7fa;
-  --fillcolor-icons: #fff;
-  --color-nav-link: #fff;
-  --color-nav-active: #ffed00;
-  --color-standard-text: #fff;
-  --boxshadow-main: none; }
+  --selection-background-color: var(
+    --optional-selection-background-color,
+    var(--primary)
+  );
+  --selection-text-color: var(
+    --optional-selection-text-color,
+    var(--primary-contrast)
+  );
+  --header-background-color: #000076 !important;
+  --sidebar-background-color: var(
+    --optional-sidebar-background-color,
+    var(--background-norm)
+  );
+  --navigation-current-item-marker-color: var(
+    --optional-navigation-current-item-marker-color,
+    var(--interaction-norm)
+  );
+  --navigation-current-item-background-color: var(
+    --optional-navigation-current-item-background-color,
+    var(--interaction-default-hover)
+  );
+  --navigation-current-item-text-color: var(
+    --optional-navigation-current-item-text-color,
+    var(--text-norm)
+  );
+  --main-box-shadow: var(--optional-main-box-shadow, none);
+  --main-border-color: var(--optional-main-border-color, var(--border-norm));
+  --navigation-item-count-background-color: var(
+    --optional-navigation-item-count-background-color,
+    var(--primary)
+  );
+  --navigation-item-count-text-color: var(
+    --optional-navigation-item-count-text-color,
+    var(--primary-contrast)
+  );
+  --toolbar-background-color: var(
+    --optional-toolbar-background-color,
+    var(--background-weak)
+  );
+  --toolbar-border-bottom-color: var(
+    --optional-toolbar-border-bottom-color,
+    var(--border-norm)
+  );
+  --toolbar-text-color: var(--optional-toolbar-text-color, var(--text-norm));
+  --toolbar-separator-color: var(
+    --optional-toolbar-separator-color,
+    var(--border-norm)
+  );
+  --scrollbar-thumb-color: var(
+    --optional-scrollbar-thumb-color,
+    hsla(0, 0%, 50%, 0.25)
+  );
+  --scrollbar-thumb-hover-color: var(
+    --optional-scrollbar-thumb-hover-color,
+    hsla(0, 0%, 50%, 0.5)
+  );
+  --tooltip-background-color: var(--optional-tooltip-background-color, #000);
+  --tooltip-text-color: var(--optional-tooltip-text-color, #fff);
+  --email-item-unread-background-color: var(
+    --optional-email-item-unread-background-color,
+    var(--background-norm)
+  );
+  --email-item-unread-text-color: var(
+    --optional-email-item-unread-text-color,
+    var(--text-norm)
+  );
+  --email-item-unread-icon-background-color: var(
+    --optional-email-item-unread-icon-background-color,
+    var(--background-strong)
+  );
+  --email-item-unread-icon-text-color: var(
+    --optional-email-item-unread-icon-text-color,
+    inherit
+  );
+  --email-item-read-background-color: #000090;
+  --email-item-read-text-color: #e6eaf0;
+  --email-item-read-icon-background-color: var(
+    --optional-email-item-read-icon-background-color,
+    var(--background-strong)
+  );
+  --email-item-read-icon-text-color: var(
+    --optional-email-item-read-icon-text-color,
+    inherit
+  );
+  --email-item-selected-background-color: var(
+    --optional-email-item-selected-background-color,
+    var(--interaction-norm)
+  );
+  --email-item-selected-text-color: var(
+    --optional-email-item-selected-text-color,
+    var(--interaction-norm-contrast)
+  );
+  --email-item-selected-icon-background-color: var(
+    --optional-email-item-selected-icon-background-color,
+    var(--interaction-norm-hover)
+  );
+  --email-item-selected-icon-text-color: var(
+    --optional-email-item-selected-icon-text-color,
+    inherit
+  );
+  --email-item-focus-marker-color: var(
+    --optional-email-item-focus-marker-color,
+    var(--interaction-norm)
+  );
+  --email-item-selected-focus-marker-color: var(
+    --optional-email-item-selected-focus-marker-color,
+    var(--interaction-norm-hover)
+  );
+  --email-message-view-background-color: var(
+    --optional-email-message-view-background-color,
+    var(--background-norm)
+  );
+  --field-background-color: var(
+    --optional-field-background-color,
+    var(--background-norm)
+  );
+  --field-text-color: var(--optional-field-text-color, var(--text-norm));
+  --field-placeholder-color: var(
+    --optional-field-placeholder-color,
+    var(--text-hint)
+  );
+  --field-hover-background-color: var(
+    --optional-field-hover-background-color,
+    var(--background-norm)
+  );
+  --field-hover-text-color: var(
+    --optional-field-hover-text-color,
+    var(--text-norm)
+  );
+  --field-focus-background-color: var(
+    --optional-field-focus-background-color,
+    var(--background-norm)
+  );
+  --field-focus-text-color: var(
+    --optional-field-focus-text-color,
+    var(--text-norm)
+  );
+  --field-disabled-background-color: var(
+    --optional-field-disabled-background-color,
+    var(--background-norm)
+  );
+  --field-disabled-text-color: var(
+    --optional-field-disabled-text-color,
+    var(--text-disabled)
+  );
+  --select-background-color: var(
+    --optional-select-background-color,
+    var(--field-background-color)
+  );
+  --favorite-icon-color: var(--optional-favorite-icon-color, orange);
+  --mark-background-color: var(--optional-mark-background-color, #ff0);
+  --mark-text-color: var(--optional-mark-text-color, #000);
+  --mark-font-weight: var(--optional-mark-font-weight, normal);
+  --modal-background-color: var(--optional-modal-background-color);
+  --modal-text-color: var(--optional-modal-text-color);
+  --file-preview-text-color: var(
+    --optional-file-preview-text-color,
+    var(--text-norm)
+  );
+  --file-preview-background-color: var(
+    --optional-file-preview-background-color,
+    var(--background-norm)
+  );
+  --border-radius: var(--optional-border-radius, 3);
+  --font-family: var(
+    --optional-font-family,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen-Sans,
+    Ubuntu,
+    Cantarell,
+    Helvetica Neue,
+    sans-serif
+  );
+}
+
+.button-solid-norm {
+  --button-default-background-color: #ffed00;
+  --button-hover-background-color: #ffef1a;
+  --button-active-background-color: #ffef1a;
+  --button-default-text-color: #e6eaf0;
+  --button-hover-text-color: var(--interaction-norm-contrast);
+  --button-active-text-color: var(--interaction-norm-contrast);
+}
 
-html:not(.editor-squire-iframe) body {
-  background: #000076;
-  color: #e6eaf0; }
-
-.pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue {
-  color: #e6eaf0;
-  background-color: #ffed00;
-  border: 1px solid #ffed00;
-  transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; }
-
-.is-hover.pm-button--error, .is-hover.pm-button--primary, .is-hover.pm-button--warning, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover {
-  color: #fff;
-  box-shadow: 0 0 0.35714em 0 rgba(0, 0, 0, 0.2);
-  background: #e6d500;
-  border: 1px solid #e6d500; }
-
-.pm-button--primaryborder-dark, .pm-button-blueborder-dark {
-  background: #000076;
-  border-color: #ffed00;
-  color: #ffed00; }
-
-.is-active.pm-button--primaryborder-dark, .is-hover.pm-button--primaryborder-dark, .pm-button--primaryborder-dark:focus, .pm-button--primaryborder-dark:focus-within, .pm-button--primaryborder-dark:hover, .pm-button--primaryborder-dark:not(div):active, .pm-button-blueborder-dark.is-active, .pm-button-blueborder-dark.is-hover, .pm-button-blueborder-dark:focus, .pm-button-blueborder-dark:focus-within, .pm-button-blueborder-dark:hover, .pm-button-blueborder-dark:not(div):active {
-  background: #000076;
-  border-color: #ffef1a;
-  color: #ffef1a; }
-
-.pm-button--primaryborder, .pm-button-blueborder {
-  border-color: #e6d500;
-  color: #e6d500; }
-
-.is-hover.pm-button--primaryborder, .pm-button--primaryborder:focus, .pm-button--primaryborder:focus-within, .pm-button--primaryborder:hover, .pm-button-blueborder.is-hover, .pm-button-blueborder:focus, .pm-button-blueborder:focus-within, .pm-button-blueborder:hover {
-  border-color: #e6d500;
-  color: #e6d500; }
-
-.is-disabled.pm-button--error, .is-disabled.pm-button--error.pm-button--info, .is-disabled.pm-button--error.pm-button--redborder, .is-disabled.pm-button--primary, .is-disabled.pm-button--primary.pm-button--info, .is-disabled.pm-button--primary.pm-button--redborder, .is-disabled.pm-button--warning, .is-disabled.pm-button--warning.pm-button--info, .is-disabled.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info[disabled], .pm-button--error.pm-button--redborder[disabled], .pm-button--error[disabled], .pm-button--primary.pm-button--info[disabled], .pm-button--primary.pm-button--redborder[disabled], .pm-button--primary[disabled], .pm-button--warning.pm-button--info[disabled], .pm-button--warning.pm-button--redborder[disabled], .pm-button--warning[disabled], .pm-button-blue.is-disabled, .pm-button-blue.is-disabled.pm-button--info, .pm-button-blue.is-disabled.pm-button--redborder, .pm-button-blue.pm-button--info[disabled], .pm-button-blue.pm-button--redborder[disabled], .pm-button-blue[disabled], .pm-button.is-disabled.pm-button--error, .pm-button.is-disabled.pm-button--primary, .pm-button.is-disabled.pm-button--warning, .pm-button.pm-button--error[disabled], .pm-button.pm-button--primary[disabled], .pm-button.pm-button--warning[disabled], .pm-button.pm-button-blue.is-disabled, .pm-button.pm-button-blue[disabled] {
-  background-color: #fffbcc;
-  border-color: #ffef1a;
-  color: #ccbe00; }
-
-.bg-primary {
-  background-color: #000090; }
-
-.color-primary {
-  color: #ffed00; }
-
-.navigation__counterItem {
-  background: #ccbe00;
-  color: white; }
-
-.item-container-row:hover::before, .item-container:hover::before {
-  border-color: #fff133; }
-
-.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon {
-  border-color: #fff680; }
-
-.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon {
-  fill: #ccbe00; }
-
-.circle-chart__circle {
-  stroke: #ffed00; }
-
-#dropdown-0 .dropDown-content::after, #dropdown-0 .dropDown-content::before, #dropdown-0.dropDown:not(.dropDown--noCaret)::before,
-#dropdown-0 .dropDown-content {
-  background: #000076; }
-
-.dropDown:not(.dropDown--noCaret)::before,
-.dropDown::after,
-.dropDown-logout-initials,
-.dropDown-item-hr {
-  border-color: #000090 !important; }
-
-#global_search.searchbox-field[type="search"] {
-  background-color: #08426b;
-  color: #e6eaf0; }
-
-.searchbox-advanced-search-button:active,
-.searchbox-advanced-search-button:focus,
-.searchbox-advanced-search-button:hover {
-  background-color: #000076; }
-
-.topnav-link, .topnav-link > .topnav-icon {
-  color: #fff;
-  transition: color .2s ease-in-out; }
-
-.topnav-link:active, .topnav-link:focus,
-.topnav-link:hover, .topnav-link[aria-current="true"] {
-  color: #ffed00; }
-
-.topnav-link:active > .topnav-icon, .topnav-link:focus > .topnav-icon,
-.topnav-link:hover > .topnav-icon, .topnav-link[aria-current=true] > .topnav-icon {
-  color: #ffed00; }
-
-.protonmail .text-purple {
-  color: #000076 !important; }
-
-.protonmail .text-purple:hover {
-  color: #ccbe00 !important; }
-
-.dropDown-item-button:focus, .dropDown-item-button:hover, .dropDown-item-link:focus, .dropDown-item-link:hover {
-  color: #ffed00; }
-
-#pm_composer .composer .composerHeader-container,
-.composerInputMeta-overlay .composerHeader-container {
-  background: #000090; }
-
-#pm_composer .composer .fill {
-  background: #fff; }
-
-.conversation.marked::before {
-  background: #ffed00; }
-
-.item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active) {
-  background: #fff; }
-
-.item-container.selected, .item-container-row.selected,
-.item-container.active, .item-is-selected {
-  background: rgba(255, 237, 0, 0.1); }
-
-.selectBoxElement-container:hover .item-icon {
-  background-color: transparent;
-  border: 1px solid #e6d500; }
-  .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon {
-    fill: #e6d500; }
-
-.selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-  background-color: #e6d500;
-  border-color: #e6d500; }
-
-.item-checkbox:checked + .item-icon {
-  background-color: #ffed00;
-  border-color: #ffed00; }
-
-.item-checkbox + .item-icon:hover {
-  background-color: #e6d500;
-  border-color: #e6d500; }
-
-.item-checkbox + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #fff; }
-
-.item-checkbox:checked + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #fff; }
-
-.starbutton {
-  fill: #ffed00 !important;
-  opacity: 0.7; }
-
-.starbutton:focus, .starbutton:hover {
-  fill: #ffed00; }
-
-.autocompleteEmailsItem-icon svg.encryptionIcon {
-  fill: #e6d500; }
-
-.encryptionStatus .color-pm-blue svg {
-  color: #e6d500;
-  fill: #e6d500; }
-
-.encryptionStatus .color-global-grey-dm svg {
-  color: black; }
-
-.color-pm-blue {
-  color: #ffed00; }
-
-.pm-radio:checked + .pm-radio-fakeradio::before {
-  background: #ffed00; }
-
-.block-info-standard {
-  border-color: #1b68c6; }
-
-.block-info-standard-warning {
-  border-color: #ffaa00; }
-
-.block-info-standard-error {
-  border-color: #d62646; }
-
-.link, a, .pm-button--link {
-  color: #ccbe00;
-  transition: color .2s ease-in-out; }
-
-.link:active, .link:focus, .link:hover,
-a:active, a:focus, a:hover,
-.pm-button--link:hover {
-  color: #ccbe00; }
-
-.pm-button--primary {
-  background-color: #ffed00;
-  border-color: #ffed00; }
-
-.pm-button--link, .pm-button.pm-button--link {
-  color: #ffed00; }
-
-.pm-button--error, .pm-button--error.pm-button--info, .pm-button--error.pm-button--redborder, .pm-button--primary, .pm-button--primary.pm-button--info, .pm-button--primary.pm-button--redborder, .pm-button--warning, .pm-button--warning.pm-button--info, .pm-button--warning.pm-button--redborder, .pm-button-blue, .pm-button-blue.pm-button--info, .pm-button-blue.pm-button--redborder, .pm-button.pm-button--error, .pm-button.pm-button--primary, .pm-button.pm-button--warning, .pm-button.pm-button-blue {
-  background-color: #ffed00;
-  border-color: #ffed00; }
-
-.is-hover.pm-button--error, .is-hover.pm-button--error.pm-button--info, .is-hover.pm-button--error.pm-button--redborder, .is-hover.pm-button--primary, .is-hover.pm-button--primary.pm-button--info, .is-hover.pm-button--primary.pm-button--redborder, .is-hover.pm-button--warning, .is-hover.pm-button--warning.pm-button--info, .is-hover.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:focus, .pm-button--error.pm-button--info:focus-within, .pm-button--error.pm-button--info:hover, .pm-button--error.pm-button--redborder:focus, .pm-button--error.pm-button--redborder:focus-within, .pm-button--error.pm-button--redborder:hover, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary.pm-button--info:focus, .pm-button--primary.pm-button--info:focus-within, .pm-button--primary.pm-button--info:hover, .pm-button--primary.pm-button--redborder:focus, .pm-button--primary.pm-button--redborder:focus-within, .pm-button--primary.pm-button--redborder:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning.pm-button--info:focus, .pm-button--warning.pm-button--info:focus-within, .pm-button--warning.pm-button--info:hover, .pm-button--warning.pm-button--redborder:focus, .pm-button--warning.pm-button--redborder:focus-within, .pm-button--warning.pm-button--redborder:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue.is-hover.pm-button--info, .pm-button-blue.is-hover.pm-button--redborder, .pm-button-blue.pm-button--info:focus, .pm-button-blue.pm-button--info:focus-within, .pm-button-blue.pm-button--info:hover, .pm-button-blue.pm-button--redborder:focus, .pm-button-blue.pm-button--redborder:focus-within, .pm-button-blue.pm-button--redborder:hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover, .pm-button.is-hover.pm-button--error, .pm-button.is-hover.pm-button--primary, .pm-button.is-hover.pm-button--warning, .pm-button.pm-button--error:focus, .pm-button.pm-button--error:focus-within, .pm-button.pm-button--error:hover, .pm-button.pm-button--primary:focus, .pm-button.pm-button--primary:focus-within, .pm-button.pm-button--primary:hover, .pm-button.pm-button--warning:focus, .pm-button.pm-button--warning:focus-within, .pm-button.pm-button--warning:hover, .pm-button.pm-button-blue.is-hover, .pm-button.pm-button-blue:focus, .pm-button.pm-button-blue:focus-within, .pm-button.pm-button-blue:hover {
-  background: #e6d500;
-  border: 1px solid #e6d500; }
-
-.is-active.pm-button--error, .is-active.pm-button--error.pm-button--info, .is-active.pm-button--error.pm-button--redborder, .is-active.pm-button--primary, .is-active.pm-button--primary.pm-button--info, .is-active.pm-button--primary.pm-button--redborder, .is-active.pm-button--warning, .is-active.pm-button--warning.pm-button--info, .is-active.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:not(div):active, .pm-button--error.pm-button--redborder:not(div):active, .pm-button--error:not(div):active, .pm-button--primary.pm-button--info:not(div):active, .pm-button--primary.pm-button--redborder:not(div):active, .pm-button--primary:not(div):active, .pm-button--warning.pm-button--info:not(div):active, .pm-button--warning.pm-button--redborder:not(div):active, .pm-button--warning:not(div):active, .pm-button-blue.is-active, .pm-button-blue.is-active.pm-button--info, .pm-button-blue.is-active.pm-button--redborder, .pm-button-blue.pm-button--info:not(div):active, .pm-button-blue.pm-button--redborder:not(div):active, .pm-button-blue:not(div):active, .pm-button.is-active.pm-button--error, .pm-button.is-active.pm-button--primary, .pm-button.is-active.pm-button--warning, .pm-button.pm-button--error:not(div):active, .pm-button.pm-button--primary:not(div):active, .pm-button.pm-button--warning:not(div):active, .pm-button.pm-button-blue.is-active, .pm-button.pm-button-blue:not(div):active {
-  background: #ccbe00;
-  border-color: #ccbe00; }
-
-.pm-button-blueborder {
-  box-shadow: none;
-  border-color: #000076;
-  color: #000076;
-  transition: color .2s ease-in-out, border-color .2s ease-in-out; }
-
-.pm-button-blueborder:hover {
-  box-shadow: none;
-  border-color: #ccbe00;
-  color: #ccbe00; }
-
-.is-active.pm-button--primaryborder,
-.pm-button--primaryborder:not(div):active,
-.pm-button-blueborder.is-active,
-.pm-button-blueborder:not(div):active {
-  border-color: #ccbe00;
-  color: #ccbe00;
-  background: transparent; }
-
-.pm-group-buttons > .pm-group-button.pm-button--primary {
-  border-color: #ccbe00; }
-
-.bg-pm-blue-gradient .pm-button--transparent:hover {
-  color: #e6eaf0;
-  border-color: #e6eaf0; }
-
-.pm-toggle-checkbox:checked + .pm-toggle-label:before {
-  background: #ffed00;
-  border-color: #ffed00; }
-
-.composer-title-bar {
-  background: #000076; }
-
-.color-global-light {
-  color: #e6eaf0; }
-
-.angular-squire-iframe body a {
-  color: #ffed00; }
-
-.fill-pm-blue,
-.message-attachmentIcon .file-outer-icon.is-embedded {
-  fill: #ffed00; }
-
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2) {
-  border-color: #ffed00;
-  color: #ffed00; }
-  .pm-table--highlight[data-plan-number="1"] tr th:nth-child(2)::before {
-    background-color: #ffed00; }
-
-.pm-table--highlight[data-plan-number="1"] tr td:nth-child(2),
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2),
-.pm-table--highlight[data-plan-number="1"] tr:last-child td:nth-child(2) {
-  border-color: #ffed00; }
-
-.pm-simple-table-row-th .fill-primary {
-  fill: #ffed00; }
-
-.pm-checkbox-fakecheck, .pm-radio-fakeradio {
-  border-color: #000076; }
-  .pm-checkbox-fakecheck [class*="icon-"], .pm-radio-fakeradio [class*="icon-"] {
-    fill: #ffed00; }
-
-[class*="icon-"].color-primary {
-  color: #000076; }
-  [class*="icon-"].color-primary:hover {
-    color: #ccbe00; }
-
-.pm-field, .editor,
-.editor-toolbar,
-.border-bottom,
-.border-top,
-.message-container.is-opened > .message-header {
-  border-color: #000043; }
-
-.badgeLabel, .badgeLabel-primary {
-  border-color: #ccbe00; }
-
-.badgeLabel,
-.badgeLabel-blue,
-.badgeLabel-primary,
-.bg-pm-blue {
-  background-color: #ccbe00; }
-
-body {
-  scrollbar-color: #0000a9 navy; }
-
-::-webkit-scrollbar {
-  width: 16px; }
-  ::-webkit-scrollbar-track {
-    background: navy; }
-  ::-webkit-scrollbar-thumb {
-    background: #0000a9;
-    box-shadow: inset 0 0 0 4px navy;
-    border-radius: 16px; }
-
-.isDarkMode .bordered,
-.isDarkMode .bordered-container:not([class*="composerInputMeta-"]),
-.isDarkMode .breadcrumb-container {
-  border-color: #0000a9; }
-
-.isDarkMode .dropDown-content::after, .isDarkMode .dropDown-content::before,
-.isDarkMode .dropDown:not(.dropDown--noCaret)::before,
-.isDarkMode .dropDown-content {
-  background: #000076;
-  border: #000076; }
-
-.isDarkMode .dropDown-item-button:focus, .isDarkMode .dropDown-item-button:focus-within,
-.isDarkMode .dropDown-item-button:hover, .isDarkMode .dropDown-item-link:focus,
-.isDarkMode .dropDown-item-link:focus-within, .isDarkMode .dropDown-item-link:hover {
-  background-color: #00005d; }
-
-.isDarkMode .dropDown-item-button.is-disabled, .isDarkMode .dropDown-item-button[disabled],
-.isDarkMode .dropDown-item-link.is-disabled, .isDarkMode .dropDown-item-link[disabled] {
-  background-color: #00006c; }
-
-.isDarkMode .squireToolbar-select-list {
-  background: #000076;
-  color: #e6eaf0; }
-
-.isDarkMode .squireToolbar-dropdown-divider {
-  background-color: #0000a9; }
-
-.isDarkMode .squireToolbar-select-item:hover {
-  background: #00006c; }
-
-.isDarkMode #pm_composer .composer,
-.isDarkMode .composerInputMeta-overlay {
-  background: #000076; }
-
-.isDarkMode #pm_composer .composer .fill {
-  background: #000076; }
-
-.isDarkMode .composer-body-container textarea {
-  background: #000076; }
-
-.isDarkMode .composer-addresses-item {
-  background: #00005d; }
-
-.isDarkMode .composer-addresses-autocomplete ul {
-  background: #00005d; }
-
-.isDarkMode .composer-addresses-autocomplete li[aria-selected="true"],
-.isDarkMode .composer-addresses-autocomplete li:hover {
-  background: #000076; }
-
-.isDarkMode .autocompleteEmails-item {
-  background-color: #00006c;
-  border-color: #00006c; }
-
-.isDarkMode .autocompleteEmails-label {
-  border-left: 1px solid #0000a9;
-  border-right: 1px solid #0000a9; }
-
-.isDarkMode .composerOptions-container.show {
-  background: #00006c; }
-  .isDarkMode .composerOptions-container.show .shadow-container {
-    background: #000076;
-    color: #e6eaf0; }
-
-.isDarkMode .pm-button.pm-button--primary {
-  background: #ccbe00;
-  color: #e6eaf0;
-  border-color: #ccbe00; }
-
-.isDarkMode .pm-button.pm-button--primary:hover {
-  background: #ffed00;
-  color: #e6eaf0; }
-
-.isDarkMode .is-disabled.pm-button--error, .isDarkMode .is-disabled.pm-button--error.pm-button--info, .isDarkMode .is-disabled.pm-button--error.pm-button--redborder, .isDarkMode .is-disabled.pm-button--primary, .isDarkMode .is-disabled.pm-button--primary.pm-button--info, .isDarkMode .is-disabled.pm-button--primary.pm-button--redborder, .isDarkMode .is-disabled.pm-button--warning, .isDarkMode .is-disabled.pm-button--warning.pm-button--info, .isDarkMode .is-disabled.pm-button--warning.pm-button--redborder, .isDarkMode .pm-button--error.pm-button--info[disabled], .isDarkMode .pm-button--error.pm-button--redborder[disabled], .isDarkMode .pm-button--error[disabled], .isDarkMode .pm-button--primary.pm-button--info[disabled], .isDarkMode .pm-button--primary.pm-button--redborder[disabled], .isDarkMode .pm-button--primary[disabled], .isDarkMode .pm-button--warning.pm-button--info[disabled], .isDarkMode .pm-button--warning.pm-button--redborder[disabled], .isDarkMode .pm-button--warning[disabled], .isDarkMode .pm-button-blue.is-disabled, .isDarkMode .pm-button-blue.is-disabled.pm-button--info, .isDarkMode .pm-button-blue.is-disabled.pm-button--redborder, .isDarkMode .pm-button-blue.pm-button--info[disabled], .isDarkMode .pm-button-blue.pm-button--redborder[disabled], .isDarkMode .pm-button-blue[disabled], .isDarkMode .pm-button.is-disabled.pm-button--error, .isDarkMode .pm-button.is-disabled.pm-button--primary, .isDarkMode .pm-button.is-disabled.pm-button--warning, .isDarkMode .pm-button.pm-button--error[disabled], .isDarkMode .pm-button.pm-button--primary[disabled], .isDarkMode .pm-button.pm-button--warning[disabled], .isDarkMode .pm-button.pm-button-blue.is-disabled, .isDarkMode .pm-button.pm-button-blue[disabled] {
-  background-color: #00006c;
-  border-color: #0000a9;
-  color: #c6cfdd; }
-
-.isDarkMode .pm-button:not(.pm-button-blue):not(.pv-button-green):not(.pm-button--primary):not(.pm-button--primaryborderEvenInDarkMode):not(.pm-button--link):not(.pm-button--error):not(.pm-button--warning):not(.pm-button--redborder):not(.pm-button--primaryborder), .isDarkMode .pm-button--info {
-  color: #e6eaf0;
-  background-color: #000076;
-  border-color: #0000a9; }
-
-.isDarkMode .pm-group-buttons > .pm-group-button.pm-button--primary {
-  border-color: #0000a9; }
-
-.isDarkMode .pm-button-blueborder {
-  border-color: #ffed00;
-  color: #ffed00; }
-
-.isDarkMode .pm-button-blueborder:hover {
-  border-color: #ffef1a;
-  color: #ffef1a; }
-
-.isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:active, .isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:hover, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:active, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:hover {
-  background: navy !important; }
-
-.isDarkMode .squireToolbar-separator {
-  background: #000090; }
-
-.isDarkMode .composerTime-container,
-.isDarkMode [class*="composer-field"] {
-  color: #e6eaf0; }
-
-.isDarkMode .composerInputMeta-overlay-fakefield {
-  border-color: #e6eaf0; }
-
-.isDarkMode .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg {
-  color: white; }
-
-.isDarkMode .conversation {
-  border-color: #0000a9; }
-
-.isDarkMode .main-area,
-.isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar,
-.isDarkMode .main-area--withToolbar--noHeader,
-.isDarkMode [class*="block-info-"] {
-  color: #e6eaf0; }
-
-.isDarkMode [class*="block-info"] {
-  background-color: #0000a9;
-  color: #e6eaf0; }
-
-.isDarkMode .fill-global-grey {
-  fill: #ffed00; }
-
-.isDarkMode .starbutton {
-  fill: #0d0d0d; }
-
-.isDarkMode .bg-global-light, .isDarkMode kbd {
-  background: #000076; }
-
-.isDarkMode .item-container, .isDarkMode .item-container-row, .isDarkMode .contactsummary-container {
-  background: #000076; }
-
-.isDarkMode .items-column-list-inner, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer {
-  border-color: #0000a9; }
-  .isDarkMode .items-column-list-inner .item-container, .isDarkMode .items-column-list-inner .item-container-row, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container-row {
-    border-color: #0000a9; }
-
-.isDarkMode .item-container:not(.item-is-selected):not(.read):not(.active),
-.isDarkMode .item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active),
-.isDarkMode .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .isDarkMode .squireToolbar-container {
-  background: #000090; }
-
-.isDarkMode .item-container.active, .isDarkMode .item-is-selected {
-  background: #00006c; }
-  .isDarkMode .item-container.active .flex-item-fluid, .isDarkMode .item-is-selected .flex-item-fluid {
-    color: #ffed00; }
-
-.isDarkMode .item-icon {
-  background-color: #000076;
-  border: 1px solid #d6dde6; }
-
-.isDarkMode .selectBoxElement-container:hover .item-icon {
-  background-color: #000076;
-  border: 1px solid #e6d500; }
-  .isDarkMode .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon {
-    fill: #e6d500; }
-
-.isDarkMode .selectBoxElement-container {
-  color: #e6eaf0; }
-
-.isDarkMode .selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-  background-color: #e6d500;
-  border-color: #e6d500; }
-
-.isDarkMode .item-checkbox + .item-icon:hover,
-.isDarkMode .item-checkbox:hover + .item-icon {
-  background-color: #00005d; }
-
-.isDarkMode .items-column-list,
-.isDarkMode .elementList-container-row {
-  background-color: #000076; }
-
-.isDarkMode .composer-container {
-  background: #000090; }
-
-.isDarkMode .message-header {
-  background-color: #000090; }
-
-.isDarkMode .view-column-detail {
-  background-color: #000076; }
-
-.isDarkMode details:first-child {
-  border-color: #0000a9; }
-
-.isDarkMode .items-column-list,
-.isDarkMode .message-container,
-.isDarkMode .message-attachments {
-  border-color: #0000a9; }
-
-.isDarkMode .message-container:not(.sent):not(.draft) .message-header.message-summary::before,
-.isDarkMode .message-header.is-inbound::before {
-  border-top: 1px solid #0000a9;
-  border-left: 1px solid #0000a9;
-  background-color: #000090; }
-
-.isDarkMode .message-infobox {
-  background-color: #000076; }
-
-.isDarkMode .message-content.frame.message-frame {
-  background: white;
-  color: black; }
-
-.isDarkMode .block-info-standard, .isDarkMode .bodyDecrypted blockquote {
-  border-color: #ffed00; }
-
-.isDarkMode .squireDropdown-item-label {
-  color: #e6eaf0; }
-
-.isDarkMode .squireToolbar-action-color {
-  background: transparent; }
-
-.isDarkMode .angular-squire-iframe body {
-  color: #e6eaf0;
-  background: #000090; }
-  .isDarkMode .angular-squire-iframe body a {
-    color: #ffed00; }
-
-.isDarkMode .plaintext-editor {
-  color: #e6eaf0; }
-
-.isDarkMode .pm-button, .isDarkMode .pm-button--info, .isDarkMode .pm-button--redborder {
-  background: #000076;
-  border-color: #0000a9;
-  color: #e6eaf0; }
-
-.isDarkMode .message-attachmentInfo {
-  border-color: #0000a9; }
-
-.isDarkMode .is-hover.pm-button--info, .isDarkMode .is-hover.pm-button--redborder,
-.isDarkMode .pm-button--info:focus, .isDarkMode .pm-button--info:focus-within,
-.isDarkMode .pm-button--info:hover, .isDarkMode .pm-button--redborder:focus,
-.isDarkMode .pm-button--redborder:focus-within, .isDarkMode .pm-button--redborder:hover,
-.isDarkMode .pm-button.is-hover, .isDarkMode .pm-button:focus-within,
-.isDarkMode .pm-button:hover:not(.pm-button--primary) {
-  color: #ffed00; }
-
-.isDarkMode .pm-button:focus {
-  color: #e6eaf0; }
-
-.isDarkMode .is-disabled.pm-button--info,
-.isDarkMode .is-disabled.pm-button--redborder,
-.isDarkMode .pm-button--info[disabled],
-.isDarkMode .pm-button--redborder[disabled],
-.isDarkMode .pm-button.is-disabled,
-.isDarkMode .pm-button[disabled] {
-  background: #0000a9; }
-
-.isDarkMode .is-active.pm-button--info,
-.isDarkMode .is-active.pm-button--redborder,
-.isDarkMode .pm-button--info:not(div):active,
-.isDarkMode .pm-button--redborder:not(div):active,
-.isDarkMode .pm-button.is-active, .isDarkMode .pm-button:not(div):active {
-  background: #0000a9;
-  color: #ffed00; }
-
-.isDarkMode .dropDown-content {
-  background: #000076;
-  color: #e6eaf0; }
-  .isDarkMode .dropDown-content button {
-    color: #e6eaf0; }
-  .isDarkMode .dropDown-content .elementsSelector-btn-action,
-  .isDarkMode .dropDown-content .dropDown-item:hover {
-    color: #e6eaf0; }
-  .isDarkMode .dropDown-content .dropDown-item:hover {
-    background: #000090 !important; }
-  .isDarkMode .dropDown-content .dropDown-item + .dropDown-item {
-    border-top: 1px solid #0000a9; }
-  .isDarkMode .dropDown-content .dropDown-item .color-global-grey {
-    color: #e6eaf0; }
-
-.isDarkMode .dropDown .dropDown-content::before, .isDarkMode .dropDown .dropDown-content::after {
-  border-bottom-color: #000076; }
-
-.isDarkMode .dropDown--right-bottom::before {
-  border-right-color: #000076; }
-
-.isDarkMode .dropDown--right-bottom .dropDown-content::before, .isDarkMode .dropDown--right-bottom .dropDown-content::after {
-  background: #000076; }
-
-.isDarkMode .dropDown--bottom-right .dropDown-content::before, .isDarkMode .dropDown--bottom-right .dropDown-content::after {
-  background: #000076; }
-
-.isDarkMode .dropDown--bottom-left::before,
-.isDarkMode .dropDown--bottom-right::before,
-.isDarkMode .dropDown--bottom::before {
-  border-bottom-color: #0000a9; }
-
-.isDarkMode .dropDown--bottom-right {
-  border: 1px solid #0000a9; }
-
-.isDarkMode .pm-field-icon-container[type="search"], .isDarkMode .pm-field[type="search"] {
-  background-color: #000090; }
-
-.isDarkMode .dropDown-contentInner {
-  background-color: #000076; }
-  .isDarkMode .dropDown-contentInner::before, .isDarkMode .dropDown-contentInner::after {
-    background-color: #000076; }
-  .isDarkMode .dropDown-contentInner .dropDown-item span {
-    color: #e6eaf0 !important; }
-
-.isDarkMode .searchbox-field[type="search"]:not(#global_search) {
-  background: #e6eaf0;
-  color: #000076; }
-
-.isDarkMode .link:active, .isDarkMode .link:focus, .isDarkMode .link:hover,
-.isDarkMode a:active, .isDarkMode a:focus, .isDarkMode a:hover,
-.isDarkMode .pm-button--link:hover,
-.isDarkMode .composerInputMeta-label:hover {
-  color: #ffef1a; }
-
-.isDarkMode .pm-modal, .isDarkMode .pm-modalContentInner {
-  background-color: #000076;
-  color: #e6eaf0; }
-  .isDarkMode .pm-modal::before, .isDarkMode .pm-modal::after, .isDarkMode .pm-modalContentInner::before, .isDarkMode .pm-modalContentInner::after {
-    background-color: #000076; }
-  .isDarkMode .pm-modal .labelColorSelector-item-mask, .isDarkMode .pm-modalContentInner .labelColorSelector-item-mask {
-    border: 2px solid #0000c3; }
-
-.isDarkMode .pm-button--primaryborder, .isDarkMode .pm-button-blueborder {
-  border-color: #ffed00;
-  color: #ffed00;
-  background-color: #000090;
-  transition: background-color .2s ease-in-out; }
-
-.isDarkMode .is-hover.pm-button--primaryborder, .isDarkMode .pm-button--primaryborder:focus,
-.isDarkMode .pm-button--primaryborder:focus-within, .isDarkMode .pm-button--primaryborder:hover,
-.isDarkMode .pm-button-blueborder.is-hover, .isDarkMode .pm-button-blueborder:focus,
-.isDarkMode .pm-button-blueborder:focus-within, .isDarkMode .pm-button-blueborder:hover {
-  border-color: #ffed00;
-  color: #ffed00;
-  background-color: #000071; }
-
-.isDarkMode .scrollshadow-static {
-  background: #000076; }
-
-.isDarkMode .pm-field, .isDarkMode .pm-field-icon-container,
-.isDarkMode .focus.pm-field-icon-container, .isDarkMode .pm-field-icon-container:focus,
-.isDarkMode .pm-field-icon-container:focus-within, .isDarkMode .pm-field.focus,
-.isDarkMode .pm-field:focus, .isDarkMode .pm-field:focus-within,
-.isDarkMode .composerInputMeta-overlay-fakefield,
-.isDarkMode .composerInputMeta-autocomplete {
-  color: #e6eaf0;
-  background-color: #000090; }
-  .isDarkMode .pm-field::placeholder, .isDarkMode .pm-field-icon-container::placeholder,
-  .isDarkMode .focus.pm-field-icon-container::placeholder, .isDarkMode .pm-field-icon-container:focus::placeholder,
-  .isDarkMode .pm-field-icon-container:focus-within::placeholder, .isDarkMode .pm-field.focus::placeholder,
-  .isDarkMode .pm-field:focus::placeholder, .isDarkMode .pm-field:focus-within::placeholder,
-  .isDarkMode .composerInputMeta-overlay-fakefield::placeholder,
-  .isDarkMode .composerInputMeta-autocomplete::placeholder {
-    color: #d6dde6; }
-
-.isDarkMode .composerInputMeta-autocomplete input {
-  color: #e6eaf0;
-  background-color: #000090; }
-  .isDarkMode .composerInputMeta-autocomplete input::placeholder {
-    color: #d6dde6; }
-
-.isDarkMode select.pm-field, .isDarkMode select.pm-field-icon-container {
-  background-color: #000090;
-  color: #e6eaf0; }
-
-.isDarkMode .storageProgress-content.dropDown-content--rightbottom::before {
-  border-right-color: #000076; }
-
-.isDarkMode .sticky-title {
-  background: navy; }
-
-.isDarkMode .bg-global-highlight {
-  background-color: #000076; }
-
-.isDarkMode .bg-white-dm {
-  background-color: #000090; }
-
-.isDarkMode .main-area, .isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar,
-.isDarkMode .main-area--withToolbar--noHeader,
-.isDarkMode [class*="block-info-"] {
-  color: #e6eaf0; }
-
-.isDarkMode .main-area, .isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar, .isDarkMode .main-area--withToolbar--noHeader {
-  background: #000076; }
-
-.isDarkMode .context-bar {
-  background: #000076; }
-
-.isDarkMode .subnav {
-  background: #000090; }
-  .isDarkMode .subnav .link, .isDarkMode .subnav a {
-    color: #ffed00; }
-  .isDarkMode .subnav .link:active, .isDarkMode .subnav .link:focus, .isDarkMode .subnav .link:hover, .isDarkMode .subnav a:active, .isDarkMode .subnav a:focus, .isDarkMode .subnav a:hover {
-    color: #ffef1a; }
-
-.isDarkMode .pm-toggle-label {
-  border-color: #0000a9;
-  background: #000090; }
-  .isDarkMode .pm-toggle-label::before {
-    background: #000076; }
-  .isDarkMode .pm-toggle-label .pm-toggle-label-img {
-    fill: #e6eaf0; }
-
-.isDarkMode .pm-plans-table-row--highlighted {
-  background-color: #000076; }
-
-.isDarkMode .pm-checkbox-fakecheck,
-.isDarkMode .pm-radio-fakeradio {
-  background: transparent; }
-
-.isDarkMode [class*="icon-"].color-primary {
-  color: #ffed00; }
-
-.isDarkMode .color-global-grey-dm {
-  color: #ffed00; }
-
-.pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue {
-  color: #fff;
-  background-color: #08426b;
-  border: 1px solid #08426b;
-  transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; }
-
-.is-hover.pm-button--error, .is-hover.pm-button--primary, .is-hover.pm-button--warning, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover {
-  color: #fff;
-  box-shadow: 0 0 0.35714em 0 rgba(0, 0, 0, 0.2);
-  background: #063353;
-  border: 1px solid #063353; }
-
-.conversation.marked::before {
-  background: #08426b; }
-
-.conversation .item-checkbox:checked + .item-icon {
-  background-color: #000076;
-  border-color: #000076; }
-
-.conversation .item-checkbox + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #000076; }
-
-.conversation .item-checkbox:checked + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #fff; }
-
-.color-pm-blue {
-  color: #000076; }
-
-.pm-radio:checked + .pm-radio-fakeradio::before {
-  background: #08426b; }
-
-.block-info-standard {
-  border-color: #1b68c6; }
-
-.block-info-standard-warning {
-  border-color: #155099; }
-
-.block-info-standard-error {
-  border-color: black; }
-
-.link:active, .link:focus, .link:hover, a:active, a:focus, a:hover {
-  color: #665f00; }
-
-.notification-success {
-  background: #08426b;
-  color: #fff; }
-
-.notification-warning {
-  background: #ffed00;
-  color: #000076; }
-
-.notification-info {
-  background: #000076;
-  color: #fff; }
-
-.pm-toggle-checkbox:checked + .pm-toggle-label:before {
-  background: #000076;
-  border-color: #000076; }
-
-.pm-toggle-checkbox:checked + .pm-toggle-label > .pm-toggle-label-text:last-child {
-  fill: #fff; }
+:root {
+  --searchbox-background-color: #08426b;
+  --searchbox-text-color: #e6eaf0 !important;
+  --optional-sidebar-background-color: #000076;
+  --optional-email-item-unread-icon-background-color: #00004d;
+  --optional-email-item-unread-icon-text-color: #e6eaf0;
+}
+
+.meter-bar-thumb, .used-space {
+  --signal-success: #ffed00;
+}
+
+:root,
+.ui-standard {
+  --primary-contrast: #08426b;
+  --email-item-selected-text-color: #08426b;
+  --email-item-selected-icon-text-color: #08426b;
+}
+
+.button-solid-norm {
+  --button-default-text-color: #08426b;
+  --button-hover-text-color: #08426b;
+  --button-active-text-color: #08426b;
+}
\ No newline at end of file
diff --git a/themes/dracula/dracula.css b/themes/dracula/dracula.css
index a388fd2..6d707e1 100644
--- a/themes/dracula/dracula.css
+++ b/themes/dracula/dracula.css
@@ -1,735 +1,261 @@
 /*! =========================================== *
  * DRACULA Theme
- * Version: v4.0.0-beta.33
+ * Version: v4.0.8
  * Author: Mike Barkmin
  * Website: www.barkmin.eu
  * Twitter: @mikebarkmin
  * =========================================== */
+:root,
+.ui-standard {
+  --primary: #ff79c6;
+  --primary-contrast: white;
+  --signal-danger: #ed4c51;
+  --signal-danger-hover: #f7595e;
+  --signal-danger-active: #ff666b;
+  --signal-danger-contrast: white;
+  --signal-warning: #f5930a;
+  --signal-warning-hover: #f5a716;
+  --signal-warning-active: #f5b922;
+  --signal-warning-contrast: black;
+  --signal-success: #349172;
+  --signal-success-hover: #339c79;
+  --signal-success-active: #31a67f;
+  --signal-success-contrast: white;
+  --signal-info: #2c89db;
+  --signal-info-hover: #3491e3;
+  --signal-info-active: #3d99eb;
+  --signal-info-contrast: white;
+  --text-norm: white;
+  --text-weak: #a4a9b5;
+  --text-hint: #696f7d;
+  --text-disabled: #575d6b;
+  --text-invert: #262a33;
+  --field-norm: #e6eaf0;
+  --field-hover: #ff60bb;
+  --field-disabled: #464b58;
+  --border-norm: #17181f;
+  --border-weak: #1d1f27;
+  --background-norm: #282a36 !important;
+  --background-weak: #333545;
+  --background-strong: #121319;
+  --interaction-norm: #ff79c6;
+  --interaction-norm-hover: #ff80c9;
+  --interaction-norm-active: #ff86cc;
+  --interaction-norm-contrast: white;
+  --interaction-weak: #21232d !important;
+  --interaction-weak-hover: #1d1f27;
+  --interaction-weak-active: #696f7d;
+  --interaction-default: transparent;
+  --interaction-default-hover: rgba(87, 93, 107, 0.2);
+  --interaction-default-active: rgba(87, 93, 107, 0.3);
+  --shadow-norm-opacity: 0.32;
+  --shadow-lifted-opacity: 0.4;
+  --backdrop-norm: rgba(0, 0, 0, 0.32);
+  --optional-scrollbar-thumb-color: #464b58;
+  --optional-scrollbar-thumb-hover-color: #575d6b;
+  --optional-email-item-read-background-color: #1a1d24;
+  --optional-email-item-read-text-color: var(--text-weak);
+  --optional-email-item-selected-background-color: #cc79a9;
+}
+
+.ui-prominent,
+.ui-standard,
 :root {
-  --main-bg-color: #282a36;
-  --secondary-bg-color: #1d1f27;
-  --bgcolor-searchbox-field: #000;
-  --bgcolor-spacebar: rgba(255, 255, 255, 0.1);
-  --bgcolor-aside-link: rgba(0, 0, 0, 0.3);
-  --bgcolor-toolbar: #333545;
-  --fillcolor-logo: #f6f7fa;
-  --fillcolor-icons: #fff;
-  --color-nav-link: #D8D8D8;
-  --color-nav-active: #FF79C6;
-  --color-standard-text: #fff;
-  --boxshadow-main: none; }
+  --selection-background-color: var(
+    --optional-selection-background-color,
+    var(--primary)
+  );
+  --selection-text-color: var(
+    --optional-selection-text-color,
+    var(--primary-contrast)
+  );
+  --header-background-color: #282a36 !important;
+  --sidebar-background-color: var(
+    --optional-sidebar-background-color,
+    var(--background-norm)
+  );
+  --navigation-current-item-marker-color: var(
+    --optional-navigation-current-item-marker-color,
+    var(--interaction-norm)
+  );
+  --navigation-current-item-background-color: var(
+    --optional-navigation-current-item-background-color,
+    var(--interaction-default-hover)
+  );
+  --navigation-current-item-text-color: var(
+    --optional-navigation-current-item-text-color,
+    var(--text-norm)
+  );
+  --main-box-shadow: var(--optional-main-box-shadow, none);
+  --main-border-color: var(--optional-main-border-color, var(--border-norm));
+  --navigation-item-count-background-color: var(
+    --optional-navigation-item-count-background-color,
+    var(--primary)
+  );
+  --navigation-item-count-text-color: var(
+    --optional-navigation-item-count-text-color,
+    var(--primary-contrast)
+  );
+  --toolbar-background-color: var(
+    --optional-toolbar-background-color,
+    var(--background-weak)
+  );
+  --toolbar-border-bottom-color: var(
+    --optional-toolbar-border-bottom-color,
+    var(--border-norm)
+  );
+  --toolbar-text-color: var(--optional-toolbar-text-color, var(--text-norm));
+  --toolbar-separator-color: var(
+    --optional-toolbar-separator-color,
+    var(--border-norm)
+  );
+  --scrollbar-thumb-color: var(
+    --optional-scrollbar-thumb-color,
+    hsla(0, 0%, 50%, 0.25)
+  );
+  --scrollbar-thumb-hover-color: var(
+    --optional-scrollbar-thumb-hover-color,
+    hsla(0, 0%, 50%, 0.5)
+  );
+  --tooltip-background-color: var(--optional-tooltip-background-color, #000);
+  --tooltip-text-color: var(--optional-tooltip-text-color, #fff);
+  --email-item-unread-background-color: var(
+    --optional-email-item-unread-background-color,
+    var(--background-norm)
+  );
+  --email-item-unread-text-color: var(
+    --optional-email-item-unread-text-color,
+    var(--text-norm)
+  );
+  --email-item-unread-icon-background-color: var(
+    --optional-email-item-unread-icon-background-color,
+    var(--background-strong)
+  );
+  --email-item-unread-icon-text-color: var(
+    --optional-email-item-unread-icon-text-color,
+    inherit
+  );
+  --email-item-read-background-color: #333545;
+  --email-item-read-text-color: #e6eaf0;
+  --email-item-read-icon-background-color: var(
+    --optional-email-item-read-icon-background-color,
+    var(--background-strong)
+  );
+  --email-item-read-icon-text-color: var(
+    --optional-email-item-read-icon-text-color,
+    inherit
+  );
+  --email-item-selected-background-color: var(
+    --optional-email-item-selected-background-color,
+    var(--interaction-norm)
+  );
+  --email-item-selected-text-color: var(
+    --optional-email-item-selected-text-color,
+    var(--interaction-norm-contrast)
+  );
+  --email-item-selected-icon-background-color: var(
+    --optional-email-item-selected-icon-background-color,
+    var(--interaction-norm-hover)
+  );
+  --email-item-selected-icon-text-color: var(
+    --optional-email-item-selected-icon-text-color,
+    inherit
+  );
+  --email-item-focus-marker-color: var(
+    --optional-email-item-focus-marker-color,
+    var(--interaction-norm)
+  );
+  --email-item-selected-focus-marker-color: var(
+    --optional-email-item-selected-focus-marker-color,
+    var(--interaction-norm-hover)
+  );
+  --email-message-view-background-color: var(
+    --optional-email-message-view-background-color,
+    var(--background-norm)
+  );
+  --field-background-color: var(
+    --optional-field-background-color,
+    var(--background-norm)
+  );
+  --field-text-color: var(--optional-field-text-color, var(--text-norm));
+  --field-placeholder-color: var(
+    --optional-field-placeholder-color,
+    var(--text-hint)
+  );
+  --field-hover-background-color: var(
+    --optional-field-hover-background-color,
+    var(--background-norm)
+  );
+  --field-hover-text-color: var(
+    --optional-field-hover-text-color,
+    var(--text-norm)
+  );
+  --field-focus-background-color: var(
+    --optional-field-focus-background-color,
+    var(--background-norm)
+  );
+  --field-focus-text-color: var(
+    --optional-field-focus-text-color,
+    var(--text-norm)
+  );
+  --field-disabled-background-color: var(
+    --optional-field-disabled-background-color,
+    var(--background-norm)
+  );
+  --field-disabled-text-color: var(
+    --optional-field-disabled-text-color,
+    var(--text-disabled)
+  );
+  --select-background-color: var(
+    --optional-select-background-color,
+    var(--field-background-color)
+  );
+  --favorite-icon-color: var(--optional-favorite-icon-color, orange);
+  --mark-background-color: var(--optional-mark-background-color, #ff0);
+  --mark-text-color: var(--optional-mark-text-color, #000);
+  --mark-font-weight: var(--optional-mark-font-weight, normal);
+  --modal-background-color: var(--optional-modal-background-color);
+  --modal-text-color: var(--optional-modal-text-color);
+  --file-preview-text-color: var(
+    --optional-file-preview-text-color,
+    var(--text-norm)
+  );
+  --file-preview-background-color: var(
+    --optional-file-preview-background-color,
+    var(--background-norm)
+  );
+  --border-radius: var(--optional-border-radius, 3);
+  --font-family: var(
+    --optional-font-family,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen-Sans,
+    Ubuntu,
+    Cantarell,
+    Helvetica Neue,
+    sans-serif
+  );
+}
+
+.button-solid-norm {
+  --button-default-background-color: #ff79c6;
+  --button-hover-background-color: #ff86cc;
+  --button-active-background-color: #ff86cc;
+  --button-default-text-color: #e6eaf0;
+  --button-hover-text-color: var(--interaction-norm-contrast);
+  --button-active-text-color: var(--interaction-norm-contrast);
+}
 
-html:not(.editor-squire-iframe) body {
-  background: #282a36;
-  color: #e6eaf0; }
-
-.pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue {
-  color: #e6eaf0;
-  background-color: #FF79C6;
-  border: 1px solid #FF79C6;
-  transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; }
-
-.is-hover.pm-button--error, .is-hover.pm-button--primary, .is-hover.pm-button--warning, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover {
-  color: #D8D8D8;
-  box-shadow: 0 0 0.35714em 0 rgba(0, 0, 0, 0.2);
-  background: #ff60bb;
-  border: 1px solid #ff60bb; }
-
-.pm-button--primaryborder-dark, .pm-button-blueborder-dark {
-  background: #282a36;
-  border-color: #FF79C6;
-  color: #FF79C6; }
-
-.is-active.pm-button--primaryborder-dark, .is-hover.pm-button--primaryborder-dark, .pm-button--primaryborder-dark:focus, .pm-button--primaryborder-dark:focus-within, .pm-button--primaryborder-dark:hover, .pm-button--primaryborder-dark:not(div):active, .pm-button-blueborder-dark.is-active, .pm-button-blueborder-dark.is-hover, .pm-button-blueborder-dark:focus, .pm-button-blueborder-dark:focus-within, .pm-button-blueborder-dark:hover, .pm-button-blueborder-dark:not(div):active {
-  background: #282a36;
-  border-color: #ff93d1;
-  color: #ff93d1; }
-
-.pm-button--primaryborder, .pm-button-blueborder {
-  border-color: #ff60bb;
-  color: #ff60bb; }
-
-.is-hover.pm-button--primaryborder, .pm-button--primaryborder:focus, .pm-button--primaryborder:focus-within, .pm-button--primaryborder:hover, .pm-button-blueborder.is-hover, .pm-button-blueborder:focus, .pm-button-blueborder:focus-within, .pm-button-blueborder:hover {
-  border-color: #ff60bb;
-  color: #ff60bb; }
-
-.is-disabled.pm-button--error, .is-disabled.pm-button--error.pm-button--info, .is-disabled.pm-button--error.pm-button--redborder, .is-disabled.pm-button--primary, .is-disabled.pm-button--primary.pm-button--info, .is-disabled.pm-button--primary.pm-button--redborder, .is-disabled.pm-button--warning, .is-disabled.pm-button--warning.pm-button--info, .is-disabled.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info[disabled], .pm-button--error.pm-button--redborder[disabled], .pm-button--error[disabled], .pm-button--primary.pm-button--info[disabled], .pm-button--primary.pm-button--redborder[disabled], .pm-button--primary[disabled], .pm-button--warning.pm-button--info[disabled], .pm-button--warning.pm-button--redborder[disabled], .pm-button--warning[disabled], .pm-button-blue.is-disabled, .pm-button-blue.is-disabled.pm-button--info, .pm-button-blue.is-disabled.pm-button--redborder, .pm-button-blue.pm-button--info[disabled], .pm-button-blue.pm-button--redborder[disabled], .pm-button-blue[disabled], .pm-button.is-disabled.pm-button--error, .pm-button.is-disabled.pm-button--primary, .pm-button.is-disabled.pm-button--warning, .pm-button.pm-button--error[disabled], .pm-button.pm-button--primary[disabled], .pm-button.pm-button--warning[disabled], .pm-button.pm-button-blue.is-disabled, .pm-button.pm-button-blue[disabled] {
-  background-color: white;
-  border-color: #ff93d1;
-  color: #ff46b0; }
-
-.bg-primary {
-  background-color: #333545; }
-
-.color-primary {
-  color: #FF79C6; }
-
-.navigation__counterItem {
-  background: #ff46b0;
-  color: white; }
-
-.item-container-row:hover::before, .item-container:hover::before {
-  border-color: #ffacdc; }
-
-.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon {
-  border-color: #fff9fc; }
-
-.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon {
-  fill: #ff46b0; }
-
-.circle-chart__circle {
-  stroke: #FF79C6; }
-
-#dropdown-0 .dropDown-content::after, #dropdown-0 .dropDown-content::before, #dropdown-0.dropDown:not(.dropDown--noCaret)::before,
-#dropdown-0 .dropDown-content {
-  background: #282a36; }
-
-.dropDown:not(.dropDown--noCaret)::before,
-.dropDown::after,
-.dropDown-logout-initials,
-.dropDown-item-hr {
-  border-color: #333545 !important; }
-
-#global_search.searchbox-field[type="search"] {
-  background-color: #000;
-  color: #e6eaf0; }
-
-.searchbox-advanced-search-button:active,
-.searchbox-advanced-search-button:focus,
-.searchbox-advanced-search-button:hover {
-  background-color: #282a36; }
-
-.topnav-link, .topnav-link > .topnav-icon {
-  color: #D8D8D8;
-  transition: color .2s ease-in-out; }
-
-.topnav-link:active, .topnav-link:focus,
-.topnav-link:hover, .topnav-link[aria-current="true"] {
-  color: #FF79C6; }
-
-.topnav-link:active > .topnav-icon, .topnav-link:focus > .topnav-icon,
-.topnav-link:hover > .topnav-icon, .topnav-link[aria-current=true] > .topnav-icon {
-  color: #FF79C6; }
-
-.protonmail .text-purple {
-  color: #282a36 !important; }
-
-.protonmail .text-purple:hover {
-  color: #ff46b0 !important; }
-
-.dropDown-item-button:focus, .dropDown-item-button:hover, .dropDown-item-link:focus, .dropDown-item-link:hover {
-  color: #FF79C6; }
-
-#pm_composer .composer .composerHeader-container,
-.composerInputMeta-overlay .composerHeader-container {
-  background: #333545; }
-
-#pm_composer .composer .fill {
-  background: #fff; }
-
-.conversation.marked::before {
-  background: #FF79C6; }
-
-.item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active) {
-  background: #fff; }
-
-.item-container.selected, .item-container-row.selected,
-.item-container.active, .item-is-selected {
-  background: rgba(255, 121, 198, 0.1); }
-
-.selectBoxElement-container:hover .item-icon {
-  background-color: transparent;
-  border: 1px solid #ff60bb; }
-  .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon {
-    fill: #ff60bb; }
-
-.selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-  background-color: #ff60bb;
-  border-color: #ff60bb; }
-
-.item-checkbox:checked + .item-icon {
-  background-color: #FF79C6;
-  border-color: #FF79C6; }
-
-.item-checkbox + .item-icon:hover {
-  background-color: #ff60bb;
-  border-color: #ff60bb; }
-
-.item-checkbox + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #D8D8D8; }
-
-.item-checkbox:checked + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #D8D8D8; }
-
-.starbutton {
-  fill: #FF79C6 !important;
-  opacity: 0.7; }
-
-.starbutton:focus, .starbutton:hover {
-  fill: #FF79C6; }
-
-.autocompleteEmailsItem-icon svg.encryptionIcon {
-  fill: #ff60bb; }
-
-.encryptionStatus .color-pm-blue svg {
-  color: #ff60bb;
-  fill: #ff60bb; }
-
-.encryptionStatus .color-global-grey-dm svg {
-  color: black; }
-
-.color-pm-blue {
-  color: #FF79C6; }
-
-.pm-radio:checked + .pm-radio-fakeradio::before {
-  background: #FF79C6; }
-
-.block-info-standard {
-  border-color: #1b68c6; }
-
-.block-info-standard-warning {
-  border-color: #ffb86c; }
-
-.block-info-standard-error {
-  border-color: #ff5555; }
-
-.link, a, .pm-button--link {
-  color: #ff46b0;
-  transition: color .2s ease-in-out; }
-
-.link:active, .link:focus, .link:hover,
-a:active, a:focus, a:hover,
-.pm-button--link:hover {
-  color: #ff46b0; }
-
-.pm-button--primary {
-  background-color: #FF79C6;
-  border-color: #FF79C6; }
-
-.pm-button--link, .pm-button.pm-button--link {
-  color: #FF79C6; }
-
-.pm-button--error, .pm-button--error.pm-button--info, .pm-button--error.pm-button--redborder, .pm-button--primary, .pm-button--primary.pm-button--info, .pm-button--primary.pm-button--redborder, .pm-button--warning, .pm-button--warning.pm-button--info, .pm-button--warning.pm-button--redborder, .pm-button-blue, .pm-button-blue.pm-button--info, .pm-button-blue.pm-button--redborder, .pm-button.pm-button--error, .pm-button.pm-button--primary, .pm-button.pm-button--warning, .pm-button.pm-button-blue {
-  background-color: #FF79C6;
-  border-color: #FF79C6; }
-
-.is-hover.pm-button--error, .is-hover.pm-button--error.pm-button--info, .is-hover.pm-button--error.pm-button--redborder, .is-hover.pm-button--primary, .is-hover.pm-button--primary.pm-button--info, .is-hover.pm-button--primary.pm-button--redborder, .is-hover.pm-button--warning, .is-hover.pm-button--warning.pm-button--info, .is-hover.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:focus, .pm-button--error.pm-button--info:focus-within, .pm-button--error.pm-button--info:hover, .pm-button--error.pm-button--redborder:focus, .pm-button--error.pm-button--redborder:focus-within, .pm-button--error.pm-button--redborder:hover, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary.pm-button--info:focus, .pm-button--primary.pm-button--info:focus-within, .pm-button--primary.pm-button--info:hover, .pm-button--primary.pm-button--redborder:focus, .pm-button--primary.pm-button--redborder:focus-within, .pm-button--primary.pm-button--redborder:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning.pm-button--info:focus, .pm-button--warning.pm-button--info:focus-within, .pm-button--warning.pm-button--info:hover, .pm-button--warning.pm-button--redborder:focus, .pm-button--warning.pm-button--redborder:focus-within, .pm-button--warning.pm-button--redborder:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue.is-hover.pm-button--info, .pm-button-blue.is-hover.pm-button--redborder, .pm-button-blue.pm-button--info:focus, .pm-button-blue.pm-button--info:focus-within, .pm-button-blue.pm-button--info:hover, .pm-button-blue.pm-button--redborder:focus, .pm-button-blue.pm-button--redborder:focus-within, .pm-button-blue.pm-button--redborder:hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover, .pm-button.is-hover.pm-button--error, .pm-button.is-hover.pm-button--primary, .pm-button.is-hover.pm-button--warning, .pm-button.pm-button--error:focus, .pm-button.pm-button--error:focus-within, .pm-button.pm-button--error:hover, .pm-button.pm-button--primary:focus, .pm-button.pm-button--primary:focus-within, .pm-button.pm-button--primary:hover, .pm-button.pm-button--warning:focus, .pm-button.pm-button--warning:focus-within, .pm-button.pm-button--warning:hover, .pm-button.pm-button-blue.is-hover, .pm-button.pm-button-blue:focus, .pm-button.pm-button-blue:focus-within, .pm-button.pm-button-blue:hover {
-  background: #ff60bb;
-  border: 1px solid #ff60bb; }
-
-.is-active.pm-button--error, .is-active.pm-button--error.pm-button--info, .is-active.pm-button--error.pm-button--redborder, .is-active.pm-button--primary, .is-active.pm-button--primary.pm-button--info, .is-active.pm-button--primary.pm-button--redborder, .is-active.pm-button--warning, .is-active.pm-button--warning.pm-button--info, .is-active.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:not(div):active, .pm-button--error.pm-button--redborder:not(div):active, .pm-button--error:not(div):active, .pm-button--primary.pm-button--info:not(div):active, .pm-button--primary.pm-button--redborder:not(div):active, .pm-button--primary:not(div):active, .pm-button--warning.pm-button--info:not(div):active, .pm-button--warning.pm-button--redborder:not(div):active, .pm-button--warning:not(div):active, .pm-button-blue.is-active, .pm-button-blue.is-active.pm-button--info, .pm-button-blue.is-active.pm-button--redborder, .pm-button-blue.pm-button--info:not(div):active, .pm-button-blue.pm-button--redborder:not(div):active, .pm-button-blue:not(div):active, .pm-button.is-active.pm-button--error, .pm-button.is-active.pm-button--primary, .pm-button.is-active.pm-button--warning, .pm-button.pm-button--error:not(div):active, .pm-button.pm-button--primary:not(div):active, .pm-button.pm-button--warning:not(div):active, .pm-button.pm-button-blue.is-active, .pm-button.pm-button-blue:not(div):active {
-  background: #ff46b0;
-  border-color: #ff46b0; }
-
-.pm-button-blueborder {
-  box-shadow: none;
-  border-color: #282a36;
-  color: #282a36;
-  transition: color .2s ease-in-out, border-color .2s ease-in-out; }
-
-.pm-button-blueborder:hover {
-  box-shadow: none;
-  border-color: #ff46b0;
-  color: #ff46b0; }
-
-.is-active.pm-button--primaryborder,
-.pm-button--primaryborder:not(div):active,
-.pm-button-blueborder.is-active,
-.pm-button-blueborder:not(div):active {
-  border-color: #ff46b0;
-  color: #ff46b0;
-  background: transparent; }
-
-.pm-group-buttons > .pm-group-button.pm-button--primary {
-  border-color: #ff46b0; }
-
-.bg-pm-blue-gradient .pm-button--transparent:hover {
-  color: #e6eaf0;
-  border-color: #e6eaf0; }
-
-.pm-toggle-checkbox:checked + .pm-toggle-label:before {
-  background: #FF79C6;
-  border-color: #FF79C6; }
-
-.composer-title-bar {
-  background: #282a36; }
-
-.color-global-light {
-  color: #e6eaf0; }
-
-.angular-squire-iframe body a {
-  color: #FF79C6; }
-
-.fill-pm-blue,
-.message-attachmentIcon .file-outer-icon.is-embedded {
-  fill: #FF79C6; }
-
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2) {
-  border-color: #FF79C6;
-  color: #FF79C6; }
-  .pm-table--highlight[data-plan-number="1"] tr th:nth-child(2)::before {
-    background-color: #FF79C6; }
-
-.pm-table--highlight[data-plan-number="1"] tr td:nth-child(2),
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2),
-.pm-table--highlight[data-plan-number="1"] tr:last-child td:nth-child(2) {
-  border-color: #FF79C6; }
-
-.pm-simple-table-row-th .fill-primary {
-  fill: #FF79C6; }
-
-.pm-checkbox-fakecheck, .pm-radio-fakeradio {
-  border-color: #282a36; }
-  .pm-checkbox-fakecheck [class*="icon-"], .pm-radio-fakeradio [class*="icon-"] {
-    fill: #FF79C6; }
-
-[class*="icon-"].color-primary {
-  color: #282a36; }
-  [class*="icon-"].color-primary:hover {
-    color: #ff46b0; }
-
-.pm-field, .editor,
-.editor-toolbar,
-.border-bottom,
-.border-top,
-.message-container.is-opened > .message-header {
-  border-color: #121319; }
-
-.badgeLabel, .badgeLabel-primary {
-  border-color: #ff46b0; }
-
-.badgeLabel,
-.badgeLabel-blue,
-.badgeLabel-primary,
-.bg-pm-blue {
-  background-color: #ff46b0; }
-
-body {
-  scrollbar-color: #3e4153 #2c2f3c; }
-
-::-webkit-scrollbar {
-  width: 16px; }
-  ::-webkit-scrollbar-track {
-    background: #2c2f3c; }
-  ::-webkit-scrollbar-thumb {
-    background: #3e4153;
-    box-shadow: inset 0 0 0 4px #2c2f3c;
-    border-radius: 16px; }
-
-.isDarkMode .bordered,
-.isDarkMode .bordered-container:not([class*="composerInputMeta-"]),
-.isDarkMode .breadcrumb-container {
-  border-color: #3e4153; }
-
-.isDarkMode .dropDown-content::after, .isDarkMode .dropDown-content::before,
-.isDarkMode .dropDown:not(.dropDown--noCaret)::before,
-.isDarkMode .dropDown-content {
-  background: #282a36;
-  border: #282a36; }
-
-.isDarkMode .dropDown-item-button:focus, .isDarkMode .dropDown-item-button:focus-within,
-.isDarkMode .dropDown-item-button:hover, .isDarkMode .dropDown-item-link:focus,
-.isDarkMode .dropDown-item-link:focus-within, .isDarkMode .dropDown-item-link:hover {
-  background-color: #1d1f27; }
-
-.isDarkMode .dropDown-item-button.is-disabled, .isDarkMode .dropDown-item-button[disabled],
-.isDarkMode .dropDown-item-link.is-disabled, .isDarkMode .dropDown-item-link[disabled] {
-  background-color: #242530; }
-
-.isDarkMode .squireToolbar-select-list {
-  background: #282a36;
-  color: #e6eaf0; }
-
-.isDarkMode .squireToolbar-dropdown-divider {
-  background-color: #3e4153; }
-
-.isDarkMode .squireToolbar-select-item:hover {
-  background: #242530; }
-
-.isDarkMode #pm_composer .composer,
-.isDarkMode .composerInputMeta-overlay {
-  background: #282a36; }
-
-.isDarkMode #pm_composer .composer .fill {
-  background: #282a36; }
-
-.isDarkMode .composer-body-container textarea {
-  background: #282a36; }
-
-.isDarkMode .composer-addresses-item {
-  background: #1d1f27; }
-
-.isDarkMode .composer-addresses-autocomplete ul {
-  background: #1d1f27; }
-
-.isDarkMode .composer-addresses-autocomplete li[aria-selected="true"],
-.isDarkMode .composer-addresses-autocomplete li:hover {
-  background: #282a36; }
-
-.isDarkMode .autocompleteEmails-item {
-  background-color: #242530;
-  border-color: #242530; }
-
-.isDarkMode .autocompleteEmails-label {
-  border-left: 1px solid #3e4153;
-  border-right: 1px solid #3e4153; }
-
-.isDarkMode .composerOptions-container.show {
-  background: #242530; }
-  .isDarkMode .composerOptions-container.show .shadow-container {
-    background: #282a36;
-    color: #e6eaf0; }
-
-.isDarkMode .pm-button.pm-button--primary {
-  background: #ff46b0;
-  color: #e6eaf0;
-  border-color: #ff46b0; }
-
-.isDarkMode .pm-button.pm-button--primary:hover {
-  background: #FF79C6;
-  color: #e6eaf0; }
-
-.isDarkMode .is-disabled.pm-button--error, .isDarkMode .is-disabled.pm-button--error.pm-button--info, .isDarkMode .is-disabled.pm-button--error.pm-button--redborder, .isDarkMode .is-disabled.pm-button--primary, .isDarkMode .is-disabled.pm-button--primary.pm-button--info, .isDarkMode .is-disabled.pm-button--primary.pm-button--redborder, .isDarkMode .is-disabled.pm-button--warning, .isDarkMode .is-disabled.pm-button--warning.pm-button--info, .isDarkMode .is-disabled.pm-button--warning.pm-button--redborder, .isDarkMode .pm-button--error.pm-button--info[disabled], .isDarkMode .pm-button--error.pm-button--redborder[disabled], .isDarkMode .pm-button--error[disabled], .isDarkMode .pm-button--primary.pm-button--info[disabled], .isDarkMode .pm-button--primary.pm-button--redborder[disabled], .isDarkMode .pm-button--primary[disabled], .isDarkMode .pm-button--warning.pm-button--info[disabled], .isDarkMode .pm-button--warning.pm-button--redborder[disabled], .isDarkMode .pm-button--warning[disabled], .isDarkMode .pm-button-blue.is-disabled, .isDarkMode .pm-button-blue.is-disabled.pm-button--info, .isDarkMode .pm-button-blue.is-disabled.pm-button--redborder, .isDarkMode .pm-button-blue.pm-button--info[disabled], .isDarkMode .pm-button-blue.pm-button--redborder[disabled], .isDarkMode .pm-button-blue[disabled], .isDarkMode .pm-button.is-disabled.pm-button--error, .isDarkMode .pm-button.is-disabled.pm-button--primary, .isDarkMode .pm-button.is-disabled.pm-button--warning, .isDarkMode .pm-button.pm-button--error[disabled], .isDarkMode .pm-button.pm-button--primary[disabled], .isDarkMode .pm-button.pm-button--warning[disabled], .isDarkMode .pm-button.pm-button-blue.is-disabled, .isDarkMode .pm-button.pm-button-blue[disabled] {
-  background-color: #242530;
-  border-color: #3e4153;
-  color: #c6cfdd; }
-
-.isDarkMode .pm-button:not(.pm-button-blue):not(.pv-button-green):not(.pm-button--primary):not(.pm-button--primaryborderEvenInDarkMode):not(.pm-button--link):not(.pm-button--error):not(.pm-button--warning):not(.pm-button--redborder):not(.pm-button--primaryborder), .isDarkMode .pm-button--info {
-  color: #e6eaf0;
-  background-color: #282a36;
-  border-color: #3e4153; }
-
-.isDarkMode .pm-group-buttons > .pm-group-button.pm-button--primary {
-  border-color: #3e4153; }
-
-.isDarkMode .pm-button-blueborder {
-  border-color: #FF79C6;
-  color: #FF79C6; }
-
-.isDarkMode .pm-button-blueborder:hover {
-  border-color: #ff93d1;
-  color: #ff93d1; }
-
-.isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:active, .isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:hover, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:active, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:hover {
-  background: #2c2f3c !important; }
-
-.isDarkMode .squireToolbar-separator {
-  background: #333545; }
-
-.isDarkMode .composerTime-container,
-.isDarkMode [class*="composer-field"] {
-  color: #e6eaf0; }
-
-.isDarkMode .composerInputMeta-overlay-fakefield {
-  border-color: #e6eaf0; }
-
-.isDarkMode .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg {
-  color: white; }
-
-.isDarkMode .conversation {
-  border-color: #3e4153; }
-
-.isDarkMode .main-area,
-.isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar,
-.isDarkMode .main-area--withToolbar--noHeader,
-.isDarkMode [class*="block-info-"] {
-  color: #e6eaf0; }
-
-.isDarkMode [class*="block-info"] {
-  background-color: #3e4153;
-  color: #e6eaf0; }
-
-.isDarkMode .fill-global-grey {
-  fill: #FF79C6; }
-
-.isDarkMode .starbutton {
-  fill: #50fa7b; }
-
-.isDarkMode .bg-global-light, .isDarkMode kbd {
-  background: #282a36; }
-
-.isDarkMode .item-container, .isDarkMode .item-container-row, .isDarkMode .contactsummary-container {
-  background: #282a36; }
-
-.isDarkMode .items-column-list-inner, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer {
-  border-color: #3e4153; }
-  .isDarkMode .items-column-list-inner .item-container, .isDarkMode .items-column-list-inner .item-container-row, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container-row {
-    border-color: #3e4153; }
-
-.isDarkMode .item-container:not(.item-is-selected):not(.read):not(.active),
-.isDarkMode .item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active),
-.isDarkMode .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .isDarkMode .squireToolbar-container {
-  background: #333545; }
-
-.isDarkMode .item-container.active, .isDarkMode .item-is-selected {
-  background: #242530; }
-  .isDarkMode .item-container.active .flex-item-fluid, .isDarkMode .item-is-selected .flex-item-fluid {
-    color: #FF79C6; }
-
-.isDarkMode .item-icon {
-  background-color: #282a36;
-  border: 1px solid #d6dde6; }
-
-.isDarkMode .selectBoxElement-container:hover .item-icon {
-  background-color: #282a36;
-  border: 1px solid #ff60bb; }
-  .isDarkMode .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon {
-    fill: #ff60bb; }
-
-.isDarkMode .selectBoxElement-container {
-  color: #e6eaf0; }
-
-.isDarkMode .selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-  background-color: #ff60bb;
-  border-color: #ff60bb; }
-
-.isDarkMode .item-checkbox + .item-icon:hover,
-.isDarkMode .item-checkbox:hover + .item-icon {
-  background-color: #1d1f27; }
-
-.isDarkMode .items-column-list,
-.isDarkMode .elementList-container-row {
-  background-color: #282a36; }
-
-.isDarkMode .composer-container {
-  background: #333545; }
-
-.isDarkMode .message-header {
-  background-color: #333545; }
-
-.isDarkMode .view-column-detail {
-  background-color: #282a36; }
-
-.isDarkMode details:first-child {
-  border-color: #3e4153; }
-
-.isDarkMode .items-column-list,
-.isDarkMode .message-container,
-.isDarkMode .message-attachments {
-  border-color: #3e4153; }
-
-.isDarkMode .message-container:not(.sent):not(.draft) .message-header.message-summary::before,
-.isDarkMode .message-header.is-inbound::before {
-  border-top: 1px solid #3e4153;
-  border-left: 1px solid #3e4153;
-  background-color: #333545; }
-
-.isDarkMode .message-infobox {
-  background-color: #282a36; }
-
-.isDarkMode .message-content.frame.message-frame {
-  background: white;
-  color: black; }
-
-.isDarkMode .block-info-standard, .isDarkMode .bodyDecrypted blockquote {
-  border-color: #FF79C6; }
-
-.isDarkMode .squireDropdown-item-label {
-  color: #e6eaf0; }
-
-.isDarkMode .squireToolbar-action-color {
-  background: transparent; }
-
-.isDarkMode .angular-squire-iframe body {
-  color: #e6eaf0;
-  background: #333545; }
-  .isDarkMode .angular-squire-iframe body a {
-    color: #FF79C6; }
-
-.isDarkMode .plaintext-editor {
-  color: #e6eaf0; }
-
-.isDarkMode .pm-button, .isDarkMode .pm-button--info, .isDarkMode .pm-button--redborder {
-  background: #282a36;
-  border-color: #3e4153;
-  color: #e6eaf0; }
-
-.isDarkMode .message-attachmentInfo {
-  border-color: #3e4153; }
-
-.isDarkMode .is-hover.pm-button--info, .isDarkMode .is-hover.pm-button--redborder,
-.isDarkMode .pm-button--info:focus, .isDarkMode .pm-button--info:focus-within,
-.isDarkMode .pm-button--info:hover, .isDarkMode .pm-button--redborder:focus,
-.isDarkMode .pm-button--redborder:focus-within, .isDarkMode .pm-button--redborder:hover,
-.isDarkMode .pm-button.is-hover, .isDarkMode .pm-button:focus-within,
-.isDarkMode .pm-button:hover:not(.pm-button--primary) {
-  color: #FF79C6; }
-
-.isDarkMode .pm-button:focus {
-  color: #e6eaf0; }
-
-.isDarkMode .is-disabled.pm-button--info,
-.isDarkMode .is-disabled.pm-button--redborder,
-.isDarkMode .pm-button--info[disabled],
-.isDarkMode .pm-button--redborder[disabled],
-.isDarkMode .pm-button.is-disabled,
-.isDarkMode .pm-button[disabled] {
-  background: #3e4153; }
-
-.isDarkMode .is-active.pm-button--info,
-.isDarkMode .is-active.pm-button--redborder,
-.isDarkMode .pm-button--info:not(div):active,
-.isDarkMode .pm-button--redborder:not(div):active,
-.isDarkMode .pm-button.is-active, .isDarkMode .pm-button:not(div):active {
-  background: #3e4153;
-  color: #FF79C6; }
-
-.isDarkMode .dropDown-content {
-  background: #282a36;
-  color: #e6eaf0; }
-  .isDarkMode .dropDown-content button {
-    color: #e6eaf0; }
-  .isDarkMode .dropDown-content .elementsSelector-btn-action,
-  .isDarkMode .dropDown-content .dropDown-item:hover {
-    color: #e6eaf0; }
-  .isDarkMode .dropDown-content .dropDown-item:hover {
-    background: #333545 !important; }
-  .isDarkMode .dropDown-content .dropDown-item + .dropDown-item {
-    border-top: 1px solid #3e4153; }
-  .isDarkMode .dropDown-content .dropDown-item .color-global-grey {
-    color: #e6eaf0; }
-
-.isDarkMode .dropDown .dropDown-content::before, .isDarkMode .dropDown .dropDown-content::after {
-  border-bottom-color: #282a36; }
-
-.isDarkMode .dropDown--right-bottom::before {
-  border-right-color: #282a36; }
-
-.isDarkMode .dropDown--right-bottom .dropDown-content::before, .isDarkMode .dropDown--right-bottom .dropDown-content::after {
-  background: #282a36; }
-
-.isDarkMode .dropDown--bottom-right .dropDown-content::before, .isDarkMode .dropDown--bottom-right .dropDown-content::after {
-  background: #282a36; }
-
-.isDarkMode .dropDown--bottom-left::before,
-.isDarkMode .dropDown--bottom-right::before,
-.isDarkMode .dropDown--bottom::before {
-  border-bottom-color: #3e4153; }
-
-.isDarkMode .dropDown--bottom-right {
-  border: 1px solid #3e4153; }
-
-.isDarkMode .pm-field-icon-container[type="search"], .isDarkMode .pm-field[type="search"] {
-  background-color: #333545; }
-
-.isDarkMode .dropDown-contentInner {
-  background-color: #282a36; }
-  .isDarkMode .dropDown-contentInner::before, .isDarkMode .dropDown-contentInner::after {
-    background-color: #282a36; }
-  .isDarkMode .dropDown-contentInner .dropDown-item span {
-    color: #e6eaf0 !important; }
-
-.isDarkMode .searchbox-field[type="search"]:not(#global_search) {
-  background: #e6eaf0;
-  color: #282a36; }
-
-.isDarkMode .link:active, .isDarkMode .link:focus, .isDarkMode .link:hover,
-.isDarkMode a:active, .isDarkMode a:focus, .isDarkMode a:hover,
-.isDarkMode .pm-button--link:hover,
-.isDarkMode .composerInputMeta-label:hover {
-  color: #ff93d1; }
-
-.isDarkMode .pm-modal, .isDarkMode .pm-modalContentInner {
-  background-color: #282a36;
-  color: #e6eaf0; }
-  .isDarkMode .pm-modal::before, .isDarkMode .pm-modal::after, .isDarkMode .pm-modalContentInner::before, .isDarkMode .pm-modalContentInner::after {
-    background-color: #282a36; }
-  .isDarkMode .pm-modal .labelColorSelector-item-mask, .isDarkMode .pm-modalContentInner .labelColorSelector-item-mask {
-    border: 2px solid #494c62; }
-
-.isDarkMode .pm-button--primaryborder, .isDarkMode .pm-button-blueborder {
-  border-color: #FF79C6;
-  color: #FF79C6;
-  background-color: #333545;
-  transition: background-color .2s ease-in-out; }
-
-.isDarkMode .is-hover.pm-button--primaryborder, .isDarkMode .pm-button--primaryborder:focus,
-.isDarkMode .pm-button--primaryborder:focus-within, .isDarkMode .pm-button--primaryborder:hover,
-.isDarkMode .pm-button-blueborder.is-hover, .isDarkMode .pm-button-blueborder:focus,
-.isDarkMode .pm-button-blueborder:focus-within, .isDarkMode .pm-button-blueborder:hover {
-  border-color: #FF79C6;
-  color: #FF79C6;
-  background-color: #262833; }
-
-.isDarkMode .scrollshadow-static {
-  background: #282a36; }
-
-.isDarkMode .pm-field, .isDarkMode .pm-field-icon-container,
-.isDarkMode .focus.pm-field-icon-container, .isDarkMode .pm-field-icon-container:focus,
-.isDarkMode .pm-field-icon-container:focus-within, .isDarkMode .pm-field.focus,
-.isDarkMode .pm-field:focus, .isDarkMode .pm-field:focus-within,
-.isDarkMode .composerInputMeta-overlay-fakefield,
-.isDarkMode .composerInputMeta-autocomplete {
-  color: #e6eaf0;
-  background-color: #333545; }
-  .isDarkMode .pm-field::placeholder, .isDarkMode .pm-field-icon-container::placeholder,
-  .isDarkMode .focus.pm-field-icon-container::placeholder, .isDarkMode .pm-field-icon-container:focus::placeholder,
-  .isDarkMode .pm-field-icon-container:focus-within::placeholder, .isDarkMode .pm-field.focus::placeholder,
-  .isDarkMode .pm-field:focus::placeholder, .isDarkMode .pm-field:focus-within::placeholder,
-  .isDarkMode .composerInputMeta-overlay-fakefield::placeholder,
-  .isDarkMode .composerInputMeta-autocomplete::placeholder {
-    color: #d6dde6; }
-
-.isDarkMode .composerInputMeta-autocomplete input {
-  color: #e6eaf0;
-  background-color: #333545; }
-  .isDarkMode .composerInputMeta-autocomplete input::placeholder {
-    color: #d6dde6; }
-
-.isDarkMode select.pm-field, .isDarkMode select.pm-field-icon-container {
-  background-color: #333545;
-  color: #e6eaf0; }
-
-.isDarkMode .storageProgress-content.dropDown-content--rightbottom::before {
-  border-right-color: #282a36; }
-
-.isDarkMode .sticky-title {
-  background: #2c2f3c; }
-
-.isDarkMode .bg-global-highlight {
-  background-color: #282a36; }
-
-.isDarkMode .bg-white-dm {
-  background-color: #333545; }
-
-.isDarkMode .main-area, .isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar,
-.isDarkMode .main-area--withToolbar--noHeader,
-.isDarkMode [class*="block-info-"] {
-  color: #e6eaf0; }
-
-.isDarkMode .main-area, .isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar, .isDarkMode .main-area--withToolbar--noHeader {
-  background: #282a36; }
-
-.isDarkMode .context-bar {
-  background: #282a36; }
-
-.isDarkMode .subnav {
-  background: #333545; }
-  .isDarkMode .subnav .link, .isDarkMode .subnav a {
-    color: #FF79C6; }
-  .isDarkMode .subnav .link:active, .isDarkMode .subnav .link:focus, .isDarkMode .subnav .link:hover, .isDarkMode .subnav a:active, .isDarkMode .subnav a:focus, .isDarkMode .subnav a:hover {
-    color: #ff93d1; }
-
-.isDarkMode .pm-toggle-label {
-  border-color: #3e4153;
-  background: #333545; }
-  .isDarkMode .pm-toggle-label::before {
-    background: #282a36; }
-  .isDarkMode .pm-toggle-label .pm-toggle-label-img {
-    fill: #e6eaf0; }
-
-.isDarkMode .pm-plans-table-row--highlighted {
-  background-color: #282a36; }
-
-.isDarkMode .pm-checkbox-fakecheck,
-.isDarkMode .pm-radio-fakeradio {
-  background: transparent; }
-
-.isDarkMode [class*="icon-"].color-primary {
-  color: #FF79C6; }
-
-.isDarkMode .color-global-grey-dm {
-  color: #FF79C6; }
+:root {
+  --searchbox-background-color: #000;
+  --searchbox-text-color: #e6eaf0 !important;
+  --optional-sidebar-background-color: #282a36;
+  --optional-email-item-unread-icon-background-color: #17181f;
+  --optional-email-item-unread-icon-text-color: #e6eaf0;
+}
+
+.meter-bar-thumb, .used-space {
+  --signal-success: #ff79c6;
+}
\ No newline at end of file
diff --git a/themes/green_lume/green_lume.css b/themes/green_lume/green_lume.css
index 3ef0091..7eb31ac 100644
--- a/themes/green_lume/green_lume.css
+++ b/themes/green_lume/green_lume.css
@@ -1,735 +1,261 @@
 /*! =========================================== *
  * GREEN LUME THEME
- * Version: v4.0.0-beta.33
+ * Version: v4.0.8
  * Author: Cristiano Almeida
  * Website: www.csalmeida.com
  * Tweets @_csalmeida
  * =========================================== */
+:root,
+.ui-standard {
+  --primary: #2fbf71;
+  --primary-contrast: white;
+  --signal-danger: #ed4c51;
+  --signal-danger-hover: #f7595e;
+  --signal-danger-active: #ff666b;
+  --signal-danger-contrast: white;
+  --signal-warning: #f5930a;
+  --signal-warning-hover: #f5a716;
+  --signal-warning-active: #f5b922;
+  --signal-warning-contrast: black;
+  --signal-success: #349172;
+  --signal-success-hover: #339c79;
+  --signal-success-active: #31a67f;
+  --signal-success-contrast: white;
+  --signal-info: #2c89db;
+  --signal-info-hover: #3491e3;
+  --signal-info-active: #3d99eb;
+  --signal-info-contrast: white;
+  --text-norm: white;
+  --text-weak: #a4a9b5;
+  --text-hint: #696f7d;
+  --text-disabled: #575d6b;
+  --text-invert: #262a33;
+  --field-norm: #d6d6d6;
+  --field-hover: #2aab65;
+  --field-disabled: #464b58;
+  --border-norm: #080808;
+  --border-weak: #0f0f0f;
+  --background-norm: #1c1c1c !important;
+  --background-weak: #292929;
+  --background-strong: #030303;
+  --interaction-norm: #2fbf71;
+  --interaction-norm-hover: #32ca77;
+  --interaction-norm-active: #3bcf7e;
+  --interaction-norm-contrast: white;
+  --interaction-weak: #141414 !important;
+  --interaction-weak-hover: #0f0f0f;
+  --interaction-weak-active: #696f7d;
+  --interaction-default: transparent;
+  --interaction-default-hover: rgba(87, 93, 107, 0.2);
+  --interaction-default-active: rgba(87, 93, 107, 0.3);
+  --shadow-norm-opacity: 0.32;
+  --shadow-lifted-opacity: 0.4;
+  --backdrop-norm: rgba(0, 0, 0, 0.32);
+  --optional-scrollbar-thumb-color: #464b58;
+  --optional-scrollbar-thumb-hover-color: #575d6b;
+  --optional-email-item-read-background-color: #1a1d24;
+  --optional-email-item-read-text-color: var(--text-weak);
+  --optional-email-item-selected-background-color: #2f995f;
+}
+
+.ui-prominent,
+.ui-standard,
 :root {
-  --main-bg-color: #1C1C1C;
-  --secondary-bg-color: #0f0f0f;
-  --bgcolor-searchbox-field: #000;
-  --bgcolor-spacebar: rgba(255, 255, 255, 0.1);
-  --bgcolor-aside-link: rgba(0, 0, 0, 0.3);
-  --bgcolor-toolbar: #292929;
-  --fillcolor-logo: #f6f7fa;
-  --fillcolor-icons: #fff;
-  --color-nav-link: #fff;
-  --color-nav-active: #2FBF71;
-  --color-standard-text: #fff;
-  --boxshadow-main: none; }
+  --selection-background-color: var(
+    --optional-selection-background-color,
+    var(--primary)
+  );
+  --selection-text-color: var(
+    --optional-selection-text-color,
+    var(--primary-contrast)
+  );
+  --header-background-color: #1c1c1c !important;
+  --sidebar-background-color: var(
+    --optional-sidebar-background-color,
+    var(--background-norm)
+  );
+  --navigation-current-item-marker-color: var(
+    --optional-navigation-current-item-marker-color,
+    var(--interaction-norm)
+  );
+  --navigation-current-item-background-color: var(
+    --optional-navigation-current-item-background-color,
+    var(--interaction-default-hover)
+  );
+  --navigation-current-item-text-color: var(
+    --optional-navigation-current-item-text-color,
+    var(--text-norm)
+  );
+  --main-box-shadow: var(--optional-main-box-shadow, none);
+  --main-border-color: var(--optional-main-border-color, var(--border-norm));
+  --navigation-item-count-background-color: var(
+    --optional-navigation-item-count-background-color,
+    var(--primary)
+  );
+  --navigation-item-count-text-color: var(
+    --optional-navigation-item-count-text-color,
+    var(--primary-contrast)
+  );
+  --toolbar-background-color: var(
+    --optional-toolbar-background-color,
+    var(--background-weak)
+  );
+  --toolbar-border-bottom-color: var(
+    --optional-toolbar-border-bottom-color,
+    var(--border-norm)
+  );
+  --toolbar-text-color: var(--optional-toolbar-text-color, var(--text-norm));
+  --toolbar-separator-color: var(
+    --optional-toolbar-separator-color,
+    var(--border-norm)
+  );
+  --scrollbar-thumb-color: var(
+    --optional-scrollbar-thumb-color,
+    hsla(0, 0%, 50%, 0.25)
+  );
+  --scrollbar-thumb-hover-color: var(
+    --optional-scrollbar-thumb-hover-color,
+    hsla(0, 0%, 50%, 0.5)
+  );
+  --tooltip-background-color: var(--optional-tooltip-background-color, #000);
+  --tooltip-text-color: var(--optional-tooltip-text-color, #fff);
+  --email-item-unread-background-color: var(
+    --optional-email-item-unread-background-color,
+    var(--background-norm)
+  );
+  --email-item-unread-text-color: var(
+    --optional-email-item-unread-text-color,
+    var(--text-norm)
+  );
+  --email-item-unread-icon-background-color: var(
+    --optional-email-item-unread-icon-background-color,
+    var(--background-strong)
+  );
+  --email-item-unread-icon-text-color: var(
+    --optional-email-item-unread-icon-text-color,
+    inherit
+  );
+  --email-item-read-background-color: #292929;
+  --email-item-read-text-color: #d6d6d6;
+  --email-item-read-icon-background-color: var(
+    --optional-email-item-read-icon-background-color,
+    var(--background-strong)
+  );
+  --email-item-read-icon-text-color: var(
+    --optional-email-item-read-icon-text-color,
+    inherit
+  );
+  --email-item-selected-background-color: var(
+    --optional-email-item-selected-background-color,
+    var(--interaction-norm)
+  );
+  --email-item-selected-text-color: var(
+    --optional-email-item-selected-text-color,
+    var(--interaction-norm-contrast)
+  );
+  --email-item-selected-icon-background-color: var(
+    --optional-email-item-selected-icon-background-color,
+    var(--interaction-norm-hover)
+  );
+  --email-item-selected-icon-text-color: var(
+    --optional-email-item-selected-icon-text-color,
+    inherit
+  );
+  --email-item-focus-marker-color: var(
+    --optional-email-item-focus-marker-color,
+    var(--interaction-norm)
+  );
+  --email-item-selected-focus-marker-color: var(
+    --optional-email-item-selected-focus-marker-color,
+    var(--interaction-norm-hover)
+  );
+  --email-message-view-background-color: var(
+    --optional-email-message-view-background-color,
+    var(--background-norm)
+  );
+  --field-background-color: var(
+    --optional-field-background-color,
+    var(--background-norm)
+  );
+  --field-text-color: var(--optional-field-text-color, var(--text-norm));
+  --field-placeholder-color: var(
+    --optional-field-placeholder-color,
+    var(--text-hint)
+  );
+  --field-hover-background-color: var(
+    --optional-field-hover-background-color,
+    var(--background-norm)
+  );
+  --field-hover-text-color: var(
+    --optional-field-hover-text-color,
+    var(--text-norm)
+  );
+  --field-focus-background-color: var(
+    --optional-field-focus-background-color,
+    var(--background-norm)
+  );
+  --field-focus-text-color: var(
+    --optional-field-focus-text-color,
+    var(--text-norm)
+  );
+  --field-disabled-background-color: var(
+    --optional-field-disabled-background-color,
+    var(--background-norm)
+  );
+  --field-disabled-text-color: var(
+    --optional-field-disabled-text-color,
+    var(--text-disabled)
+  );
+  --select-background-color: var(
+    --optional-select-background-color,
+    var(--field-background-color)
+  );
+  --favorite-icon-color: var(--optional-favorite-icon-color, orange);
+  --mark-background-color: var(--optional-mark-background-color, #ff0);
+  --mark-text-color: var(--optional-mark-text-color, #000);
+  --mark-font-weight: var(--optional-mark-font-weight, normal);
+  --modal-background-color: var(--optional-modal-background-color);
+  --modal-text-color: var(--optional-modal-text-color);
+  --file-preview-text-color: var(
+    --optional-file-preview-text-color,
+    var(--text-norm)
+  );
+  --file-preview-background-color: var(
+    --optional-file-preview-background-color,
+    var(--background-norm)
+  );
+  --border-radius: var(--optional-border-radius, 3);
+  --font-family: var(
+    --optional-font-family,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen-Sans,
+    Ubuntu,
+    Cantarell,
+    Helvetica Neue,
+    sans-serif
+  );
+}
+
+.button-solid-norm {
+  --button-default-background-color: #2fbf71;
+  --button-hover-background-color: #3bcf7e;
+  --button-active-background-color: #3bcf7e;
+  --button-default-text-color: #d6d6d6;
+  --button-hover-text-color: var(--interaction-norm-contrast);
+  --button-active-text-color: var(--interaction-norm-contrast);
+}
 
-html:not(.editor-squire-iframe) body {
-  background: #1C1C1C;
-  color: #d6d6d6; }
-
-.pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue {
-  color: #d6d6d6;
-  background-color: #2FBF71;
-  border: 1px solid #2FBF71;
-  transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; }
-
-.is-hover.pm-button--error, .is-hover.pm-button--primary, .is-hover.pm-button--warning, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover {
-  color: #fff;
-  box-shadow: 0 0 0.35714em 0 rgba(0, 0, 0, 0.2);
-  background: #2aab65;
-  border: 1px solid #2aab65; }
-
-.pm-button--primaryborder-dark, .pm-button-blueborder-dark {
-  background: #1C1C1C;
-  border-color: #2FBF71;
-  color: #2FBF71; }
-
-.is-active.pm-button--primaryborder-dark, .is-hover.pm-button--primaryborder-dark, .pm-button--primaryborder-dark:focus, .pm-button--primaryborder-dark:focus-within, .pm-button--primaryborder-dark:hover, .pm-button--primaryborder-dark:not(div):active, .pm-button-blueborder-dark.is-active, .pm-button-blueborder-dark.is-hover, .pm-button-blueborder-dark:focus, .pm-button-blueborder-dark:focus-within, .pm-button-blueborder-dark:hover, .pm-button-blueborder-dark:not(div):active {
-  background: #1C1C1C;
-  border-color: #39ce7e;
-  color: #39ce7e; }
-
-.pm-button--primaryborder, .pm-button-blueborder {
-  border-color: #2aab65;
-  color: #2aab65; }
-
-.is-hover.pm-button--primaryborder, .pm-button--primaryborder:focus, .pm-button--primaryborder:focus-within, .pm-button--primaryborder:hover, .pm-button-blueborder.is-hover, .pm-button-blueborder:focus, .pm-button-blueborder:focus-within, .pm-button-blueborder:hover {
-  border-color: #2aab65;
-  color: #2aab65; }
-
-.is-disabled.pm-button--error, .is-disabled.pm-button--error.pm-button--info, .is-disabled.pm-button--error.pm-button--redborder, .is-disabled.pm-button--primary, .is-disabled.pm-button--primary.pm-button--info, .is-disabled.pm-button--primary.pm-button--redborder, .is-disabled.pm-button--warning, .is-disabled.pm-button--warning.pm-button--info, .is-disabled.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info[disabled], .pm-button--error.pm-button--redborder[disabled], .pm-button--error[disabled], .pm-button--primary.pm-button--info[disabled], .pm-button--primary.pm-button--redborder[disabled], .pm-button--primary[disabled], .pm-button--warning.pm-button--info[disabled], .pm-button--warning.pm-button--redborder[disabled], .pm-button--warning[disabled], .pm-button-blue.is-disabled, .pm-button-blue.is-disabled.pm-button--info, .pm-button-blue.is-disabled.pm-button--redborder, .pm-button-blue.pm-button--info[disabled], .pm-button-blue.pm-button--redborder[disabled], .pm-button-blue[disabled], .pm-button.is-disabled.pm-button--error, .pm-button.is-disabled.pm-button--primary, .pm-button.is-disabled.pm-button--warning, .pm-button.pm-button--error[disabled], .pm-button.pm-button--primary[disabled], .pm-button.pm-button--warning[disabled], .pm-button.pm-button-blue.is-disabled, .pm-button.pm-button-blue[disabled] {
-  background-color: #c8f2db;
-  border-color: #39ce7e;
-  color: #259659; }
-
-.bg-primary {
-  background-color: #292929; }
-
-.color-primary {
-  color: #2FBF71; }
-
-.navigation__counterItem {
-  background: #259659;
-  color: white; }
-
-.item-container-row:hover::before, .item-container:hover::before {
-  border-color: #4ed38b; }
-
-.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon {
-  border-color: #8be2b3; }
-
-.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon {
-  fill: #259659; }
-
-.circle-chart__circle {
-  stroke: #2FBF71; }
-
-#dropdown-0 .dropDown-content::after, #dropdown-0 .dropDown-content::before, #dropdown-0.dropDown:not(.dropDown--noCaret)::before,
-#dropdown-0 .dropDown-content {
-  background: #1C1C1C; }
-
-.dropDown:not(.dropDown--noCaret)::before,
-.dropDown::after,
-.dropDown-logout-initials,
-.dropDown-item-hr {
-  border-color: #292929 !important; }
-
-#global_search.searchbox-field[type="search"] {
-  background-color: #000;
-  color: #d6d6d6; }
-
-.searchbox-advanced-search-button:active,
-.searchbox-advanced-search-button:focus,
-.searchbox-advanced-search-button:hover {
-  background-color: #1C1C1C; }
-
-.topnav-link, .topnav-link > .topnav-icon {
-  color: #fff;
-  transition: color .2s ease-in-out; }
-
-.topnav-link:active, .topnav-link:focus,
-.topnav-link:hover, .topnav-link[aria-current="true"] {
-  color: #2FBF71; }
-
-.topnav-link:active > .topnav-icon, .topnav-link:focus > .topnav-icon,
-.topnav-link:hover > .topnav-icon, .topnav-link[aria-current=true] > .topnav-icon {
-  color: #2FBF71; }
-
-.protonmail .text-purple {
-  color: #1C1C1C !important; }
-
-.protonmail .text-purple:hover {
-  color: #259659 !important; }
-
-.dropDown-item-button:focus, .dropDown-item-button:hover, .dropDown-item-link:focus, .dropDown-item-link:hover {
-  color: #2FBF71; }
-
-#pm_composer .composer .composerHeader-container,
-.composerInputMeta-overlay .composerHeader-container {
-  background: #292929; }
-
-#pm_composer .composer .fill {
-  background: #fff; }
-
-.conversation.marked::before {
-  background: #2FBF71; }
-
-.item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active) {
-  background: #fff; }
-
-.item-container.selected, .item-container-row.selected,
-.item-container.active, .item-is-selected {
-  background: rgba(47, 191, 113, 0.1); }
-
-.selectBoxElement-container:hover .item-icon {
-  background-color: transparent;
-  border: 1px solid #2aab65; }
-  .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon {
-    fill: #2aab65; }
-
-.selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-  background-color: #2aab65;
-  border-color: #2aab65; }
-
-.item-checkbox:checked + .item-icon {
-  background-color: #2FBF71;
-  border-color: #2FBF71; }
-
-.item-checkbox + .item-icon:hover {
-  background-color: #2aab65;
-  border-color: #2aab65; }
-
-.item-checkbox + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #fff; }
-
-.item-checkbox:checked + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #fff; }
-
-.starbutton {
-  fill: #2FBF71 !important;
-  opacity: 0.7; }
-
-.starbutton:focus, .starbutton:hover {
-  fill: #2FBF71; }
-
-.autocompleteEmailsItem-icon svg.encryptionIcon {
-  fill: #2aab65; }
-
-.encryptionStatus .color-pm-blue svg {
-  color: #2aab65;
-  fill: #2aab65; }
-
-.encryptionStatus .color-global-grey-dm svg {
-  color: black; }
-
-.color-pm-blue {
-  color: #2FBF71; }
-
-.pm-radio:checked + .pm-radio-fakeradio::before {
-  background: #2FBF71; }
-
-.block-info-standard {
-  border-color: #1b68c6; }
-
-.block-info-standard-warning {
-  border-color: #ffaa00; }
-
-.block-info-standard-error {
-  border-color: #d62646; }
-
-.link, a, .pm-button--link {
-  color: #259659;
-  transition: color .2s ease-in-out; }
-
-.link:active, .link:focus, .link:hover,
-a:active, a:focus, a:hover,
-.pm-button--link:hover {
-  color: #259659; }
-
-.pm-button--primary {
-  background-color: #2FBF71;
-  border-color: #2FBF71; }
-
-.pm-button--link, .pm-button.pm-button--link {
-  color: #2FBF71; }
-
-.pm-button--error, .pm-button--error.pm-button--info, .pm-button--error.pm-button--redborder, .pm-button--primary, .pm-button--primary.pm-button--info, .pm-button--primary.pm-button--redborder, .pm-button--warning, .pm-button--warning.pm-button--info, .pm-button--warning.pm-button--redborder, .pm-button-blue, .pm-button-blue.pm-button--info, .pm-button-blue.pm-button--redborder, .pm-button.pm-button--error, .pm-button.pm-button--primary, .pm-button.pm-button--warning, .pm-button.pm-button-blue {
-  background-color: #2FBF71;
-  border-color: #2FBF71; }
-
-.is-hover.pm-button--error, .is-hover.pm-button--error.pm-button--info, .is-hover.pm-button--error.pm-button--redborder, .is-hover.pm-button--primary, .is-hover.pm-button--primary.pm-button--info, .is-hover.pm-button--primary.pm-button--redborder, .is-hover.pm-button--warning, .is-hover.pm-button--warning.pm-button--info, .is-hover.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:focus, .pm-button--error.pm-button--info:focus-within, .pm-button--error.pm-button--info:hover, .pm-button--error.pm-button--redborder:focus, .pm-button--error.pm-button--redborder:focus-within, .pm-button--error.pm-button--redborder:hover, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary.pm-button--info:focus, .pm-button--primary.pm-button--info:focus-within, .pm-button--primary.pm-button--info:hover, .pm-button--primary.pm-button--redborder:focus, .pm-button--primary.pm-button--redborder:focus-within, .pm-button--primary.pm-button--redborder:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning.pm-button--info:focus, .pm-button--warning.pm-button--info:focus-within, .pm-button--warning.pm-button--info:hover, .pm-button--warning.pm-button--redborder:focus, .pm-button--warning.pm-button--redborder:focus-within, .pm-button--warning.pm-button--redborder:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue.is-hover.pm-button--info, .pm-button-blue.is-hover.pm-button--redborder, .pm-button-blue.pm-button--info:focus, .pm-button-blue.pm-button--info:focus-within, .pm-button-blue.pm-button--info:hover, .pm-button-blue.pm-button--redborder:focus, .pm-button-blue.pm-button--redborder:focus-within, .pm-button-blue.pm-button--redborder:hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover, .pm-button.is-hover.pm-button--error, .pm-button.is-hover.pm-button--primary, .pm-button.is-hover.pm-button--warning, .pm-button.pm-button--error:focus, .pm-button.pm-button--error:focus-within, .pm-button.pm-button--error:hover, .pm-button.pm-button--primary:focus, .pm-button.pm-button--primary:focus-within, .pm-button.pm-button--primary:hover, .pm-button.pm-button--warning:focus, .pm-button.pm-button--warning:focus-within, .pm-button.pm-button--warning:hover, .pm-button.pm-button-blue.is-hover, .pm-button.pm-button-blue:focus, .pm-button.pm-button-blue:focus-within, .pm-button.pm-button-blue:hover {
-  background: #2aab65;
-  border: 1px solid #2aab65; }
-
-.is-active.pm-button--error, .is-active.pm-button--error.pm-button--info, .is-active.pm-button--error.pm-button--redborder, .is-active.pm-button--primary, .is-active.pm-button--primary.pm-button--info, .is-active.pm-button--primary.pm-button--redborder, .is-active.pm-button--warning, .is-active.pm-button--warning.pm-button--info, .is-active.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:not(div):active, .pm-button--error.pm-button--redborder:not(div):active, .pm-button--error:not(div):active, .pm-button--primary.pm-button--info:not(div):active, .pm-button--primary.pm-button--redborder:not(div):active, .pm-button--primary:not(div):active, .pm-button--warning.pm-button--info:not(div):active, .pm-button--warning.pm-button--redborder:not(div):active, .pm-button--warning:not(div):active, .pm-button-blue.is-active, .pm-button-blue.is-active.pm-button--info, .pm-button-blue.is-active.pm-button--redborder, .pm-button-blue.pm-button--info:not(div):active, .pm-button-blue.pm-button--redborder:not(div):active, .pm-button-blue:not(div):active, .pm-button.is-active.pm-button--error, .pm-button.is-active.pm-button--primary, .pm-button.is-active.pm-button--warning, .pm-button.pm-button--error:not(div):active, .pm-button.pm-button--primary:not(div):active, .pm-button.pm-button--warning:not(div):active, .pm-button.pm-button-blue.is-active, .pm-button.pm-button-blue:not(div):active {
-  background: #259659;
-  border-color: #259659; }
-
-.pm-button-blueborder {
-  box-shadow: none;
-  border-color: #1C1C1C;
-  color: #1C1C1C;
-  transition: color .2s ease-in-out, border-color .2s ease-in-out; }
-
-.pm-button-blueborder:hover {
-  box-shadow: none;
-  border-color: #259659;
-  color: #259659; }
-
-.is-active.pm-button--primaryborder,
-.pm-button--primaryborder:not(div):active,
-.pm-button-blueborder.is-active,
-.pm-button-blueborder:not(div):active {
-  border-color: #259659;
-  color: #259659;
-  background: transparent; }
-
-.pm-group-buttons > .pm-group-button.pm-button--primary {
-  border-color: #259659; }
-
-.bg-pm-blue-gradient .pm-button--transparent:hover {
-  color: #d6d6d6;
-  border-color: #d6d6d6; }
-
-.pm-toggle-checkbox:checked + .pm-toggle-label:before {
-  background: #2FBF71;
-  border-color: #2FBF71; }
-
-.composer-title-bar {
-  background: #1C1C1C; }
-
-.color-global-light {
-  color: #d6d6d6; }
-
-.angular-squire-iframe body a {
-  color: #2FBF71; }
-
-.fill-pm-blue,
-.message-attachmentIcon .file-outer-icon.is-embedded {
-  fill: #2FBF71; }
-
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2) {
-  border-color: #2FBF71;
-  color: #2FBF71; }
-  .pm-table--highlight[data-plan-number="1"] tr th:nth-child(2)::before {
-    background-color: #2FBF71; }
-
-.pm-table--highlight[data-plan-number="1"] tr td:nth-child(2),
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2),
-.pm-table--highlight[data-plan-number="1"] tr:last-child td:nth-child(2) {
-  border-color: #2FBF71; }
-
-.pm-simple-table-row-th .fill-primary {
-  fill: #2FBF71; }
-
-.pm-checkbox-fakecheck, .pm-radio-fakeradio {
-  border-color: #1C1C1C; }
-  .pm-checkbox-fakecheck [class*="icon-"], .pm-radio-fakeradio [class*="icon-"] {
-    fill: #2FBF71; }
-
-[class*="icon-"].color-primary {
-  color: #1C1C1C; }
-  [class*="icon-"].color-primary:hover {
-    color: #259659; }
-
-.pm-field, .editor,
-.editor-toolbar,
-.border-bottom,
-.border-top,
-.message-container.is-opened > .message-header {
-  border-color: #030303; }
-
-.badgeLabel, .badgeLabel-primary {
-  border-color: #259659; }
-
-.badgeLabel,
-.badgeLabel-blue,
-.badgeLabel-primary,
-.bg-pm-blue {
-  background-color: #259659; }
-
-body {
-  scrollbar-color: #363636 #212121; }
-
-::-webkit-scrollbar {
-  width: 16px; }
-  ::-webkit-scrollbar-track {
-    background: #212121; }
-  ::-webkit-scrollbar-thumb {
-    background: #363636;
-    box-shadow: inset 0 0 0 4px #212121;
-    border-radius: 16px; }
-
-.isDarkMode .bordered,
-.isDarkMode .bordered-container:not([class*="composerInputMeta-"]),
-.isDarkMode .breadcrumb-container {
-  border-color: #363636; }
-
-.isDarkMode .dropDown-content::after, .isDarkMode .dropDown-content::before,
-.isDarkMode .dropDown:not(.dropDown--noCaret)::before,
-.isDarkMode .dropDown-content {
-  background: #1C1C1C;
-  border: #1C1C1C; }
-
-.isDarkMode .dropDown-item-button:focus, .isDarkMode .dropDown-item-button:focus-within,
-.isDarkMode .dropDown-item-button:hover, .isDarkMode .dropDown-item-link:focus,
-.isDarkMode .dropDown-item-link:focus-within, .isDarkMode .dropDown-item-link:hover {
-  background-color: #0f0f0f; }
-
-.isDarkMode .dropDown-item-button.is-disabled, .isDarkMode .dropDown-item-button[disabled],
-.isDarkMode .dropDown-item-link.is-disabled, .isDarkMode .dropDown-item-link[disabled] {
-  background-color: #171717; }
-
-.isDarkMode .squireToolbar-select-list {
-  background: #1C1C1C;
-  color: #d6d6d6; }
-
-.isDarkMode .squireToolbar-dropdown-divider {
-  background-color: #363636; }
-
-.isDarkMode .squireToolbar-select-item:hover {
-  background: #171717; }
-
-.isDarkMode #pm_composer .composer,
-.isDarkMode .composerInputMeta-overlay {
-  background: #1C1C1C; }
-
-.isDarkMode #pm_composer .composer .fill {
-  background: #1C1C1C; }
-
-.isDarkMode .composer-body-container textarea {
-  background: #1C1C1C; }
-
-.isDarkMode .composer-addresses-item {
-  background: #0f0f0f; }
-
-.isDarkMode .composer-addresses-autocomplete ul {
-  background: #0f0f0f; }
-
-.isDarkMode .composer-addresses-autocomplete li[aria-selected="true"],
-.isDarkMode .composer-addresses-autocomplete li:hover {
-  background: #1C1C1C; }
-
-.isDarkMode .autocompleteEmails-item {
-  background-color: #171717;
-  border-color: #171717; }
-
-.isDarkMode .autocompleteEmails-label {
-  border-left: 1px solid #363636;
-  border-right: 1px solid #363636; }
-
-.isDarkMode .composerOptions-container.show {
-  background: #171717; }
-  .isDarkMode .composerOptions-container.show .shadow-container {
-    background: #1C1C1C;
-    color: #d6d6d6; }
-
-.isDarkMode .pm-button.pm-button--primary {
-  background: #259659;
-  color: #d6d6d6;
-  border-color: #259659; }
-
-.isDarkMode .pm-button.pm-button--primary:hover {
-  background: #2FBF71;
-  color: #d6d6d6; }
-
-.isDarkMode .is-disabled.pm-button--error, .isDarkMode .is-disabled.pm-button--error.pm-button--info, .isDarkMode .is-disabled.pm-button--error.pm-button--redborder, .isDarkMode .is-disabled.pm-button--primary, .isDarkMode .is-disabled.pm-button--primary.pm-button--info, .isDarkMode .is-disabled.pm-button--primary.pm-button--redborder, .isDarkMode .is-disabled.pm-button--warning, .isDarkMode .is-disabled.pm-button--warning.pm-button--info, .isDarkMode .is-disabled.pm-button--warning.pm-button--redborder, .isDarkMode .pm-button--error.pm-button--info[disabled], .isDarkMode .pm-button--error.pm-button--redborder[disabled], .isDarkMode .pm-button--error[disabled], .isDarkMode .pm-button--primary.pm-button--info[disabled], .isDarkMode .pm-button--primary.pm-button--redborder[disabled], .isDarkMode .pm-button--primary[disabled], .isDarkMode .pm-button--warning.pm-button--info[disabled], .isDarkMode .pm-button--warning.pm-button--redborder[disabled], .isDarkMode .pm-button--warning[disabled], .isDarkMode .pm-button-blue.is-disabled, .isDarkMode .pm-button-blue.is-disabled.pm-button--info, .isDarkMode .pm-button-blue.is-disabled.pm-button--redborder, .isDarkMode .pm-button-blue.pm-button--info[disabled], .isDarkMode .pm-button-blue.pm-button--redborder[disabled], .isDarkMode .pm-button-blue[disabled], .isDarkMode .pm-button.is-disabled.pm-button--error, .isDarkMode .pm-button.is-disabled.pm-button--primary, .isDarkMode .pm-button.is-disabled.pm-button--warning, .isDarkMode .pm-button.pm-button--error[disabled], .isDarkMode .pm-button.pm-button--primary[disabled], .isDarkMode .pm-button.pm-button--warning[disabled], .isDarkMode .pm-button.pm-button-blue.is-disabled, .isDarkMode .pm-button.pm-button-blue[disabled] {
-  background-color: #171717;
-  border-color: #363636;
-  color: #bdbdbd; }
-
-.isDarkMode .pm-button:not(.pm-button-blue):not(.pv-button-green):not(.pm-button--primary):not(.pm-button--primaryborderEvenInDarkMode):not(.pm-button--link):not(.pm-button--error):not(.pm-button--warning):not(.pm-button--redborder):not(.pm-button--primaryborder), .isDarkMode .pm-button--info {
-  color: #d6d6d6;
-  background-color: #1C1C1C;
-  border-color: #363636; }
-
-.isDarkMode .pm-group-buttons > .pm-group-button.pm-button--primary {
-  border-color: #363636; }
-
-.isDarkMode .pm-button-blueborder {
-  border-color: #2FBF71;
-  color: #2FBF71; }
-
-.isDarkMode .pm-button-blueborder:hover {
-  border-color: #39ce7e;
-  color: #39ce7e; }
-
-.isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:active, .isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:hover, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:active, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:hover {
-  background: #212121 !important; }
-
-.isDarkMode .squireToolbar-separator {
-  background: #292929; }
-
-.isDarkMode .composerTime-container,
-.isDarkMode [class*="composer-field"] {
-  color: #d6d6d6; }
-
-.isDarkMode .composerInputMeta-overlay-fakefield {
-  border-color: #d6d6d6; }
-
-.isDarkMode .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg {
-  color: white; }
-
-.isDarkMode .conversation {
-  border-color: #363636; }
-
-.isDarkMode .main-area,
-.isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar,
-.isDarkMode .main-area--withToolbar--noHeader,
-.isDarkMode [class*="block-info-"] {
-  color: #d6d6d6; }
-
-.isDarkMode [class*="block-info"] {
-  background-color: #363636;
-  color: #d6d6d6; }
-
-.isDarkMode .fill-global-grey {
-  fill: #2FBF71; }
-
-.isDarkMode .starbutton {
-  fill: #eac819; }
-
-.isDarkMode .bg-global-light, .isDarkMode kbd {
-  background: #1C1C1C; }
-
-.isDarkMode .item-container, .isDarkMode .item-container-row, .isDarkMode .contactsummary-container {
-  background: #1C1C1C; }
-
-.isDarkMode .items-column-list-inner, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer {
-  border-color: #363636; }
-  .isDarkMode .items-column-list-inner .item-container, .isDarkMode .items-column-list-inner .item-container-row, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container-row {
-    border-color: #363636; }
-
-.isDarkMode .item-container:not(.item-is-selected):not(.read):not(.active),
-.isDarkMode .item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active),
-.isDarkMode .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .isDarkMode .squireToolbar-container {
-  background: #292929; }
-
-.isDarkMode .item-container.active, .isDarkMode .item-is-selected {
-  background: #171717; }
-  .isDarkMode .item-container.active .flex-item-fluid, .isDarkMode .item-is-selected .flex-item-fluid {
-    color: #2FBF71; }
-
-.isDarkMode .item-icon {
-  background-color: #1C1C1C;
-  border: 1px solid #c9c9c9; }
-
-.isDarkMode .selectBoxElement-container:hover .item-icon {
-  background-color: #1C1C1C;
-  border: 1px solid #2aab65; }
-  .isDarkMode .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon {
-    fill: #2aab65; }
-
-.isDarkMode .selectBoxElement-container {
-  color: #d6d6d6; }
-
-.isDarkMode .selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-  background-color: #2aab65;
-  border-color: #2aab65; }
-
-.isDarkMode .item-checkbox + .item-icon:hover,
-.isDarkMode .item-checkbox:hover + .item-icon {
-  background-color: #0f0f0f; }
-
-.isDarkMode .items-column-list,
-.isDarkMode .elementList-container-row {
-  background-color: #1C1C1C; }
-
-.isDarkMode .composer-container {
-  background: #292929; }
-
-.isDarkMode .message-header {
-  background-color: #292929; }
-
-.isDarkMode .view-column-detail {
-  background-color: #1C1C1C; }
-
-.isDarkMode details:first-child {
-  border-color: #363636; }
-
-.isDarkMode .items-column-list,
-.isDarkMode .message-container,
-.isDarkMode .message-attachments {
-  border-color: #363636; }
-
-.isDarkMode .message-container:not(.sent):not(.draft) .message-header.message-summary::before,
-.isDarkMode .message-header.is-inbound::before {
-  border-top: 1px solid #363636;
-  border-left: 1px solid #363636;
-  background-color: #292929; }
-
-.isDarkMode .message-infobox {
-  background-color: #1C1C1C; }
-
-.isDarkMode .message-content.frame.message-frame {
-  background: white;
-  color: black; }
-
-.isDarkMode .block-info-standard, .isDarkMode .bodyDecrypted blockquote {
-  border-color: #2FBF71; }
-
-.isDarkMode .squireDropdown-item-label {
-  color: #d6d6d6; }
-
-.isDarkMode .squireToolbar-action-color {
-  background: transparent; }
-
-.isDarkMode .angular-squire-iframe body {
-  color: #d6d6d6;
-  background: #292929; }
-  .isDarkMode .angular-squire-iframe body a {
-    color: #2FBF71; }
-
-.isDarkMode .plaintext-editor {
-  color: #d6d6d6; }
-
-.isDarkMode .pm-button, .isDarkMode .pm-button--info, .isDarkMode .pm-button--redborder {
-  background: #1C1C1C;
-  border-color: #363636;
-  color: #d6d6d6; }
-
-.isDarkMode .message-attachmentInfo {
-  border-color: #363636; }
-
-.isDarkMode .is-hover.pm-button--info, .isDarkMode .is-hover.pm-button--redborder,
-.isDarkMode .pm-button--info:focus, .isDarkMode .pm-button--info:focus-within,
-.isDarkMode .pm-button--info:hover, .isDarkMode .pm-button--redborder:focus,
-.isDarkMode .pm-button--redborder:focus-within, .isDarkMode .pm-button--redborder:hover,
-.isDarkMode .pm-button.is-hover, .isDarkMode .pm-button:focus-within,
-.isDarkMode .pm-button:hover:not(.pm-button--primary) {
-  color: #2FBF71; }
-
-.isDarkMode .pm-button:focus {
-  color: #d6d6d6; }
-
-.isDarkMode .is-disabled.pm-button--info,
-.isDarkMode .is-disabled.pm-button--redborder,
-.isDarkMode .pm-button--info[disabled],
-.isDarkMode .pm-button--redborder[disabled],
-.isDarkMode .pm-button.is-disabled,
-.isDarkMode .pm-button[disabled] {
-  background: #363636; }
-
-.isDarkMode .is-active.pm-button--info,
-.isDarkMode .is-active.pm-button--redborder,
-.isDarkMode .pm-button--info:not(div):active,
-.isDarkMode .pm-button--redborder:not(div):active,
-.isDarkMode .pm-button.is-active, .isDarkMode .pm-button:not(div):active {
-  background: #363636;
-  color: #2FBF71; }
-
-.isDarkMode .dropDown-content {
-  background: #1C1C1C;
-  color: #d6d6d6; }
-  .isDarkMode .dropDown-content button {
-    color: #d6d6d6; }
-  .isDarkMode .dropDown-content .elementsSelector-btn-action,
-  .isDarkMode .dropDown-content .dropDown-item:hover {
-    color: #d6d6d6; }
-  .isDarkMode .dropDown-content .dropDown-item:hover {
-    background: #292929 !important; }
-  .isDarkMode .dropDown-content .dropDown-item + .dropDown-item {
-    border-top: 1px solid #363636; }
-  .isDarkMode .dropDown-content .dropDown-item .color-global-grey {
-    color: #d6d6d6; }
-
-.isDarkMode .dropDown .dropDown-content::before, .isDarkMode .dropDown .dropDown-content::after {
-  border-bottom-color: #1C1C1C; }
-
-.isDarkMode .dropDown--right-bottom::before {
-  border-right-color: #1C1C1C; }
-
-.isDarkMode .dropDown--right-bottom .dropDown-content::before, .isDarkMode .dropDown--right-bottom .dropDown-content::after {
-  background: #1C1C1C; }
-
-.isDarkMode .dropDown--bottom-right .dropDown-content::before, .isDarkMode .dropDown--bottom-right .dropDown-content::after {
-  background: #1C1C1C; }
-
-.isDarkMode .dropDown--bottom-left::before,
-.isDarkMode .dropDown--bottom-right::before,
-.isDarkMode .dropDown--bottom::before {
-  border-bottom-color: #363636; }
-
-.isDarkMode .dropDown--bottom-right {
-  border: 1px solid #363636; }
-
-.isDarkMode .pm-field-icon-container[type="search"], .isDarkMode .pm-field[type="search"] {
-  background-color: #292929; }
-
-.isDarkMode .dropDown-contentInner {
-  background-color: #1C1C1C; }
-  .isDarkMode .dropDown-contentInner::before, .isDarkMode .dropDown-contentInner::after {
-    background-color: #1C1C1C; }
-  .isDarkMode .dropDown-contentInner .dropDown-item span {
-    color: #d6d6d6 !important; }
-
-.isDarkMode .searchbox-field[type="search"]:not(#global_search) {
-  background: #d6d6d6;
-  color: #1C1C1C; }
-
-.isDarkMode .link:active, .isDarkMode .link:focus, .isDarkMode .link:hover,
-.isDarkMode a:active, .isDarkMode a:focus, .isDarkMode a:hover,
-.isDarkMode .pm-button--link:hover,
-.isDarkMode .composerInputMeta-label:hover {
-  color: #39ce7e; }
-
-.isDarkMode .pm-modal, .isDarkMode .pm-modalContentInner {
-  background-color: #1C1C1C;
-  color: #d6d6d6; }
-  .isDarkMode .pm-modal::before, .isDarkMode .pm-modal::after, .isDarkMode .pm-modalContentInner::before, .isDarkMode .pm-modalContentInner::after {
-    background-color: #1C1C1C; }
-  .isDarkMode .pm-modal .labelColorSelector-item-mask, .isDarkMode .pm-modalContentInner .labelColorSelector-item-mask {
-    border: 2px solid #424242; }
-
-.isDarkMode .pm-button--primaryborder, .isDarkMode .pm-button-blueborder {
-  border-color: #2FBF71;
-  color: #2FBF71;
-  background-color: #292929;
-  transition: background-color .2s ease-in-out; }
-
-.isDarkMode .is-hover.pm-button--primaryborder, .isDarkMode .pm-button--primaryborder:focus,
-.isDarkMode .pm-button--primaryborder:focus-within, .isDarkMode .pm-button--primaryborder:hover,
-.isDarkMode .pm-button-blueborder.is-hover, .isDarkMode .pm-button-blueborder:focus,
-.isDarkMode .pm-button-blueborder:focus-within, .isDarkMode .pm-button-blueborder:hover {
-  border-color: #2FBF71;
-  color: #2FBF71;
-  background-color: #191919; }
-
-.isDarkMode .scrollshadow-static {
-  background: #1C1C1C; }
-
-.isDarkMode .pm-field, .isDarkMode .pm-field-icon-container,
-.isDarkMode .focus.pm-field-icon-container, .isDarkMode .pm-field-icon-container:focus,
-.isDarkMode .pm-field-icon-container:focus-within, .isDarkMode .pm-field.focus,
-.isDarkMode .pm-field:focus, .isDarkMode .pm-field:focus-within,
-.isDarkMode .composerInputMeta-overlay-fakefield,
-.isDarkMode .composerInputMeta-autocomplete {
-  color: #d6d6d6;
-  background-color: #292929; }
-  .isDarkMode .pm-field::placeholder, .isDarkMode .pm-field-icon-container::placeholder,
-  .isDarkMode .focus.pm-field-icon-container::placeholder, .isDarkMode .pm-field-icon-container:focus::placeholder,
-  .isDarkMode .pm-field-icon-container:focus-within::placeholder, .isDarkMode .pm-field.focus::placeholder,
-  .isDarkMode .pm-field:focus::placeholder, .isDarkMode .pm-field:focus-within::placeholder,
-  .isDarkMode .composerInputMeta-overlay-fakefield::placeholder,
-  .isDarkMode .composerInputMeta-autocomplete::placeholder {
-    color: #c9c9c9; }
-
-.isDarkMode .composerInputMeta-autocomplete input {
-  color: #d6d6d6;
-  background-color: #292929; }
-  .isDarkMode .composerInputMeta-autocomplete input::placeholder {
-    color: #c9c9c9; }
-
-.isDarkMode select.pm-field, .isDarkMode select.pm-field-icon-container {
-  background-color: #292929;
-  color: #d6d6d6; }
-
-.isDarkMode .storageProgress-content.dropDown-content--rightbottom::before {
-  border-right-color: #1C1C1C; }
-
-.isDarkMode .sticky-title {
-  background: #212121; }
-
-.isDarkMode .bg-global-highlight {
-  background-color: #1C1C1C; }
-
-.isDarkMode .bg-white-dm {
-  background-color: #292929; }
-
-.isDarkMode .main-area, .isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar,
-.isDarkMode .main-area--withToolbar--noHeader,
-.isDarkMode [class*="block-info-"] {
-  color: #d6d6d6; }
-
-.isDarkMode .main-area, .isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar, .isDarkMode .main-area--withToolbar--noHeader {
-  background: #1C1C1C; }
-
-.isDarkMode .context-bar {
-  background: #1C1C1C; }
-
-.isDarkMode .subnav {
-  background: #292929; }
-  .isDarkMode .subnav .link, .isDarkMode .subnav a {
-    color: #2FBF71; }
-  .isDarkMode .subnav .link:active, .isDarkMode .subnav .link:focus, .isDarkMode .subnav .link:hover, .isDarkMode .subnav a:active, .isDarkMode .subnav a:focus, .isDarkMode .subnav a:hover {
-    color: #39ce7e; }
-
-.isDarkMode .pm-toggle-label {
-  border-color: #363636;
-  background: #292929; }
-  .isDarkMode .pm-toggle-label::before {
-    background: #1C1C1C; }
-  .isDarkMode .pm-toggle-label .pm-toggle-label-img {
-    fill: #d6d6d6; }
-
-.isDarkMode .pm-plans-table-row--highlighted {
-  background-color: #1C1C1C; }
-
-.isDarkMode .pm-checkbox-fakecheck,
-.isDarkMode .pm-radio-fakeradio {
-  background: transparent; }
-
-.isDarkMode [class*="icon-"].color-primary {
-  color: #2FBF71; }
-
-.isDarkMode .color-global-grey-dm {
-  color: #2FBF71; }
+:root {
+  --searchbox-background-color: #000;
+  --searchbox-text-color: #d6d6d6 !important;
+  --optional-sidebar-background-color: #1c1c1c;
+  --optional-email-item-unread-icon-background-color: #080808;
+  --optional-email-item-unread-icon-text-color: #d6d6d6;
+}
+
+.meter-bar-thumb, .used-space {
+  --signal-success: #2fbf71;
+}
\ No newline at end of file
diff --git a/themes/gruvbox/gruvbox.css b/themes/gruvbox/gruvbox.css
index 38c3aa6..02f7496 100644
--- a/themes/gruvbox/gruvbox.css
+++ b/themes/gruvbox/gruvbox.css
@@ -1,737 +1,263 @@
 @charset "UTF-8";
 /*! =========================================== *
  * GRUVBOX THEME
- * Version: v4.0.0-beta.33
+ * Version: v4.0.8
  * Author: AntoineÐ 
  * Website: www.antoined.fr
  * Mastodon: @antoined@h.kher.nl
  * Based: https://github.com/morhetz/gruvbox-contrib
  * =========================================== */
+:root,
+.ui-standard {
+  --primary: #689d6a;
+  --primary-contrast: white;
+  --signal-danger: #ed4c51;
+  --signal-danger-hover: #f7595e;
+  --signal-danger-active: #ff666b;
+  --signal-danger-contrast: white;
+  --signal-warning: #f5930a;
+  --signal-warning-hover: #f5a716;
+  --signal-warning-active: #f5b922;
+  --signal-warning-contrast: black;
+  --signal-success: #349172;
+  --signal-success-hover: #339c79;
+  --signal-success-active: #31a67f;
+  --signal-success-contrast: white;
+  --signal-info: #2c89db;
+  --signal-info-hover: #3491e3;
+  --signal-info-active: #3d99eb;
+  --signal-info-contrast: white;
+  --text-norm: white;
+  --text-weak: #a4a9b5;
+  --text-hint: #696f7d;
+  --text-disabled: #575d6b;
+  --text-invert: #262a33;
+  --field-norm: #fbf1c7;
+  --field-hover: #5d8f5f;
+  --field-disabled: #464b58;
+  --border-norm: #141414;
+  --border-weak: #1b1b1b;
+  --background-norm: #282828 !important;
+  --background-weak: #353535;
+  --background-strong: #0f0f0f;
+  --interaction-norm: #689d6a;
+  --interaction-norm-hover: #70a271;
+  --interaction-norm-active: #77a779;
+  --interaction-norm-contrast: white;
+  --interaction-weak: #202020 !important;
+  --interaction-weak-hover: #1b1b1b;
+  --interaction-weak-active: #696f7d;
+  --interaction-default: transparent;
+  --interaction-default-hover: rgba(87, 93, 107, 0.2);
+  --interaction-default-active: rgba(87, 93, 107, 0.3);
+  --shadow-norm-opacity: 0.32;
+  --shadow-lifted-opacity: 0.4;
+  --backdrop-norm: rgba(0, 0, 0, 0.32);
+  --optional-scrollbar-thumb-color: #464b58;
+  --optional-scrollbar-thumb-hover-color: #575d6b;
+  --optional-email-item-read-background-color: #1a1d24;
+  --optional-email-item-read-text-color: var(--text-weak);
+  --optional-email-item-selected-background-color: #687e69;
+}
+
+.ui-prominent,
+.ui-standard,
 :root {
-  --main-bg-color: #282828;
-  --secondary-bg-color: #1b1b1b;
-  --bgcolor-searchbox-field: #32302f;
-  --bgcolor-spacebar: rgba(255, 255, 255, 0.1);
-  --bgcolor-aside-link: rgba(0, 0, 0, 0.3);
-  --bgcolor-toolbar: #353535;
-  --fillcolor-logo: #f6f7fa;
-  --fillcolor-icons: #fff;
-  --color-nav-link: #fbf1c7;
-  --color-nav-active: #689d6a;
-  --color-standard-text: #fff;
-  --boxshadow-main: none; }
+  --selection-background-color: var(
+    --optional-selection-background-color,
+    var(--primary)
+  );
+  --selection-text-color: var(
+    --optional-selection-text-color,
+    var(--primary-contrast)
+  );
+  --header-background-color: #282828 !important;
+  --sidebar-background-color: var(
+    --optional-sidebar-background-color,
+    var(--background-norm)
+  );
+  --navigation-current-item-marker-color: var(
+    --optional-navigation-current-item-marker-color,
+    var(--interaction-norm)
+  );
+  --navigation-current-item-background-color: var(
+    --optional-navigation-current-item-background-color,
+    var(--interaction-default-hover)
+  );
+  --navigation-current-item-text-color: var(
+    --optional-navigation-current-item-text-color,
+    var(--text-norm)
+  );
+  --main-box-shadow: var(--optional-main-box-shadow, none);
+  --main-border-color: var(--optional-main-border-color, var(--border-norm));
+  --navigation-item-count-background-color: var(
+    --optional-navigation-item-count-background-color,
+    var(--primary)
+  );
+  --navigation-item-count-text-color: var(
+    --optional-navigation-item-count-text-color,
+    var(--primary-contrast)
+  );
+  --toolbar-background-color: var(
+    --optional-toolbar-background-color,
+    var(--background-weak)
+  );
+  --toolbar-border-bottom-color: var(
+    --optional-toolbar-border-bottom-color,
+    var(--border-norm)
+  );
+  --toolbar-text-color: var(--optional-toolbar-text-color, var(--text-norm));
+  --toolbar-separator-color: var(
+    --optional-toolbar-separator-color,
+    var(--border-norm)
+  );
+  --scrollbar-thumb-color: var(
+    --optional-scrollbar-thumb-color,
+    hsla(0, 0%, 50%, 0.25)
+  );
+  --scrollbar-thumb-hover-color: var(
+    --optional-scrollbar-thumb-hover-color,
+    hsla(0, 0%, 50%, 0.5)
+  );
+  --tooltip-background-color: var(--optional-tooltip-background-color, #000);
+  --tooltip-text-color: var(--optional-tooltip-text-color, #fff);
+  --email-item-unread-background-color: var(
+    --optional-email-item-unread-background-color,
+    var(--background-norm)
+  );
+  --email-item-unread-text-color: var(
+    --optional-email-item-unread-text-color,
+    var(--text-norm)
+  );
+  --email-item-unread-icon-background-color: var(
+    --optional-email-item-unread-icon-background-color,
+    var(--background-strong)
+  );
+  --email-item-unread-icon-text-color: var(
+    --optional-email-item-unread-icon-text-color,
+    inherit
+  );
+  --email-item-read-background-color: #353535;
+  --email-item-read-text-color: #fbf1c7;
+  --email-item-read-icon-background-color: var(
+    --optional-email-item-read-icon-background-color,
+    var(--background-strong)
+  );
+  --email-item-read-icon-text-color: var(
+    --optional-email-item-read-icon-text-color,
+    inherit
+  );
+  --email-item-selected-background-color: var(
+    --optional-email-item-selected-background-color,
+    var(--interaction-norm)
+  );
+  --email-item-selected-text-color: var(
+    --optional-email-item-selected-text-color,
+    var(--interaction-norm-contrast)
+  );
+  --email-item-selected-icon-background-color: var(
+    --optional-email-item-selected-icon-background-color,
+    var(--interaction-norm-hover)
+  );
+  --email-item-selected-icon-text-color: var(
+    --optional-email-item-selected-icon-text-color,
+    inherit
+  );
+  --email-item-focus-marker-color: var(
+    --optional-email-item-focus-marker-color,
+    var(--interaction-norm)
+  );
+  --email-item-selected-focus-marker-color: var(
+    --optional-email-item-selected-focus-marker-color,
+    var(--interaction-norm-hover)
+  );
+  --email-message-view-background-color: var(
+    --optional-email-message-view-background-color,
+    var(--background-norm)
+  );
+  --field-background-color: var(
+    --optional-field-background-color,
+    var(--background-norm)
+  );
+  --field-text-color: var(--optional-field-text-color, var(--text-norm));
+  --field-placeholder-color: var(
+    --optional-field-placeholder-color,
+    var(--text-hint)
+  );
+  --field-hover-background-color: var(
+    --optional-field-hover-background-color,
+    var(--background-norm)
+  );
+  --field-hover-text-color: var(
+    --optional-field-hover-text-color,
+    var(--text-norm)
+  );
+  --field-focus-background-color: var(
+    --optional-field-focus-background-color,
+    var(--background-norm)
+  );
+  --field-focus-text-color: var(
+    --optional-field-focus-text-color,
+    var(--text-norm)
+  );
+  --field-disabled-background-color: var(
+    --optional-field-disabled-background-color,
+    var(--background-norm)
+  );
+  --field-disabled-text-color: var(
+    --optional-field-disabled-text-color,
+    var(--text-disabled)
+  );
+  --select-background-color: var(
+    --optional-select-background-color,
+    var(--field-background-color)
+  );
+  --favorite-icon-color: var(--optional-favorite-icon-color, orange);
+  --mark-background-color: var(--optional-mark-background-color, #ff0);
+  --mark-text-color: var(--optional-mark-text-color, #000);
+  --mark-font-weight: var(--optional-mark-font-weight, normal);
+  --modal-background-color: var(--optional-modal-background-color);
+  --modal-text-color: var(--optional-modal-text-color);
+  --file-preview-text-color: var(
+    --optional-file-preview-text-color,
+    var(--text-norm)
+  );
+  --file-preview-background-color: var(
+    --optional-file-preview-background-color,
+    var(--background-norm)
+  );
+  --border-radius: var(--optional-border-radius, 3);
+  --font-family: var(
+    --optional-font-family,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen-Sans,
+    Ubuntu,
+    Cantarell,
+    Helvetica Neue,
+    sans-serif
+  );
+}
+
+.button-solid-norm {
+  --button-default-background-color: #689d6a;
+  --button-hover-background-color: #77a779;
+  --button-active-background-color: #77a779;
+  --button-default-text-color: #fbf1c7;
+  --button-hover-text-color: var(--interaction-norm-contrast);
+  --button-active-text-color: var(--interaction-norm-contrast);
+}
 
-html:not(.editor-squire-iframe) body {
-  background: #282828;
-  color: #fbf1c7; }
-
-.pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue {
-  color: #fbf1c7;
-  background-color: #689d6a;
-  border: 1px solid #689d6a;
-  transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; }
-
-.is-hover.pm-button--error, .is-hover.pm-button--primary, .is-hover.pm-button--warning, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover {
-  color: #fbf1c7;
-  box-shadow: 0 0 0.35714em 0 rgba(0, 0, 0, 0.2);
-  background: #5d8f5f;
-  border: 1px solid #5d8f5f; }
-
-.pm-button--primaryborder-dark, .pm-button-blueborder-dark {
-  background: #282828;
-  border-color: #689d6a;
-  color: #689d6a; }
-
-.is-active.pm-button--primaryborder-dark, .is-hover.pm-button--primaryborder-dark, .pm-button--primaryborder-dark:focus, .pm-button--primaryborder-dark:focus-within, .pm-button--primaryborder-dark:hover, .pm-button--primaryborder-dark:not(div):active, .pm-button-blueborder-dark.is-active, .pm-button-blueborder-dark.is-hover, .pm-button-blueborder-dark:focus, .pm-button-blueborder-dark:focus-within, .pm-button-blueborder-dark:hover, .pm-button-blueborder-dark:not(div):active {
-  background: #282828;
-  border-color: #77a779;
-  color: #77a779; }
-
-.pm-button--primaryborder, .pm-button-blueborder {
-  border-color: #5d8f5f;
-  color: #5d8f5f; }
-
-.is-hover.pm-button--primaryborder, .pm-button--primaryborder:focus, .pm-button--primaryborder:focus-within, .pm-button--primaryborder:hover, .pm-button-blueborder.is-hover, .pm-button-blueborder:focus, .pm-button-blueborder:focus-within, .pm-button-blueborder:hover {
-  border-color: #5d8f5f;
-  color: #5d8f5f; }
-
-.is-disabled.pm-button--error, .is-disabled.pm-button--error.pm-button--info, .is-disabled.pm-button--error.pm-button--redborder, .is-disabled.pm-button--primary, .is-disabled.pm-button--primary.pm-button--info, .is-disabled.pm-button--primary.pm-button--redborder, .is-disabled.pm-button--warning, .is-disabled.pm-button--warning.pm-button--info, .is-disabled.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info[disabled], .pm-button--error.pm-button--redborder[disabled], .pm-button--error[disabled], .pm-button--primary.pm-button--info[disabled], .pm-button--primary.pm-button--redborder[disabled], .pm-button--primary[disabled], .pm-button--warning.pm-button--info[disabled], .pm-button--warning.pm-button--redborder[disabled], .pm-button--warning[disabled], .pm-button-blue.is-disabled, .pm-button-blue.is-disabled.pm-button--info, .pm-button-blue.is-disabled.pm-button--redborder, .pm-button-blue.pm-button--info[disabled], .pm-button-blue.pm-button--redborder[disabled], .pm-button-blue[disabled], .pm-button.is-disabled.pm-button--error, .pm-button.is-disabled.pm-button--primary, .pm-button.is-disabled.pm-button--warning, .pm-button.pm-button--error[disabled], .pm-button.pm-button--primary[disabled], .pm-button.pm-button--warning[disabled], .pm-button.pm-button-blue.is-disabled, .pm-button.pm-button-blue[disabled] {
-  background-color: #e4ede4;
-  border-color: #77a779;
-  color: #537f54; }
-
-.bg-primary {
-  background-color: #353535; }
-
-.color-primary {
-  color: #689d6a; }
-
-.navigation__counterItem {
-  background: #537f54;
-  color: white; }
-
-.item-container-row:hover::before, .item-container:hover::before {
-  border-color: #87b189; }
-
-.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon {
-  border-color: #b5cfb6; }
-
-.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon {
-  fill: #537f54; }
-
-.circle-chart__circle {
-  stroke: #689d6a; }
-
-#dropdown-0 .dropDown-content::after, #dropdown-0 .dropDown-content::before, #dropdown-0.dropDown:not(.dropDown--noCaret)::before,
-#dropdown-0 .dropDown-content {
-  background: #282828; }
-
-.dropDown:not(.dropDown--noCaret)::before,
-.dropDown::after,
-.dropDown-logout-initials,
-.dropDown-item-hr {
-  border-color: #353535 !important; }
-
-#global_search.searchbox-field[type="search"] {
-  background-color: #32302f;
-  color: #fbf1c7; }
-
-.searchbox-advanced-search-button:active,
-.searchbox-advanced-search-button:focus,
-.searchbox-advanced-search-button:hover {
-  background-color: #282828; }
-
-.topnav-link, .topnav-link > .topnav-icon {
-  color: #fbf1c7;
-  transition: color .2s ease-in-out; }
-
-.topnav-link:active, .topnav-link:focus,
-.topnav-link:hover, .topnav-link[aria-current="true"] {
-  color: #689d6a; }
-
-.topnav-link:active > .topnav-icon, .topnav-link:focus > .topnav-icon,
-.topnav-link:hover > .topnav-icon, .topnav-link[aria-current=true] > .topnav-icon {
-  color: #689d6a; }
-
-.protonmail .text-purple {
-  color: #282828 !important; }
-
-.protonmail .text-purple:hover {
-  color: #537f54 !important; }
-
-.dropDown-item-button:focus, .dropDown-item-button:hover, .dropDown-item-link:focus, .dropDown-item-link:hover {
-  color: #689d6a; }
-
-#pm_composer .composer .composerHeader-container,
-.composerInputMeta-overlay .composerHeader-container {
-  background: #353535; }
-
-#pm_composer .composer .fill {
-  background: #fff; }
-
-.conversation.marked::before {
-  background: #689d6a; }
-
-.item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active) {
-  background: #fff; }
-
-.item-container.selected, .item-container-row.selected,
-.item-container.active, .item-is-selected {
-  background: rgba(104, 157, 106, 0.1); }
-
-.selectBoxElement-container:hover .item-icon {
-  background-color: transparent;
-  border: 1px solid #5d8f5f; }
-  .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon {
-    fill: #5d8f5f; }
-
-.selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-  background-color: #5d8f5f;
-  border-color: #5d8f5f; }
-
-.item-checkbox:checked + .item-icon {
-  background-color: #689d6a;
-  border-color: #689d6a; }
-
-.item-checkbox + .item-icon:hover {
-  background-color: #5d8f5f;
-  border-color: #5d8f5f; }
-
-.item-checkbox + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #fbf1c7; }
-
-.item-checkbox:checked + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #fbf1c7; }
-
-.starbutton {
-  fill: #689d6a !important;
-  opacity: 0.7; }
-
-.starbutton:focus, .starbutton:hover {
-  fill: #689d6a; }
-
-.autocompleteEmailsItem-icon svg.encryptionIcon {
-  fill: #5d8f5f; }
-
-.encryptionStatus .color-pm-blue svg {
-  color: #5d8f5f;
-  fill: #5d8f5f; }
-
-.encryptionStatus .color-global-grey-dm svg {
-  color: black; }
-
-.color-pm-blue {
-  color: #689d6a; }
-
-.pm-radio:checked + .pm-radio-fakeradio::before {
-  background: #689d6a; }
-
-.block-info-standard {
-  border-color: #458588; }
-
-.block-info-standard-warning {
-  border-color: #d79921; }
-
-.block-info-standard-error {
-  border-color: #cc241d; }
-
-.link, a, .pm-button--link {
-  color: #537f54;
-  transition: color .2s ease-in-out; }
-
-.link:active, .link:focus, .link:hover,
-a:active, a:focus, a:hover,
-.pm-button--link:hover {
-  color: #537f54; }
-
-.pm-button--primary {
-  background-color: #689d6a;
-  border-color: #689d6a; }
-
-.pm-button--link, .pm-button.pm-button--link {
-  color: #689d6a; }
-
-.pm-button--error, .pm-button--error.pm-button--info, .pm-button--error.pm-button--redborder, .pm-button--primary, .pm-button--primary.pm-button--info, .pm-button--primary.pm-button--redborder, .pm-button--warning, .pm-button--warning.pm-button--info, .pm-button--warning.pm-button--redborder, .pm-button-blue, .pm-button-blue.pm-button--info, .pm-button-blue.pm-button--redborder, .pm-button.pm-button--error, .pm-button.pm-button--primary, .pm-button.pm-button--warning, .pm-button.pm-button-blue {
-  background-color: #689d6a;
-  border-color: #689d6a; }
-
-.is-hover.pm-button--error, .is-hover.pm-button--error.pm-button--info, .is-hover.pm-button--error.pm-button--redborder, .is-hover.pm-button--primary, .is-hover.pm-button--primary.pm-button--info, .is-hover.pm-button--primary.pm-button--redborder, .is-hover.pm-button--warning, .is-hover.pm-button--warning.pm-button--info, .is-hover.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:focus, .pm-button--error.pm-button--info:focus-within, .pm-button--error.pm-button--info:hover, .pm-button--error.pm-button--redborder:focus, .pm-button--error.pm-button--redborder:focus-within, .pm-button--error.pm-button--redborder:hover, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary.pm-button--info:focus, .pm-button--primary.pm-button--info:focus-within, .pm-button--primary.pm-button--info:hover, .pm-button--primary.pm-button--redborder:focus, .pm-button--primary.pm-button--redborder:focus-within, .pm-button--primary.pm-button--redborder:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning.pm-button--info:focus, .pm-button--warning.pm-button--info:focus-within, .pm-button--warning.pm-button--info:hover, .pm-button--warning.pm-button--redborder:focus, .pm-button--warning.pm-button--redborder:focus-within, .pm-button--warning.pm-button--redborder:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue.is-hover.pm-button--info, .pm-button-blue.is-hover.pm-button--redborder, .pm-button-blue.pm-button--info:focus, .pm-button-blue.pm-button--info:focus-within, .pm-button-blue.pm-button--info:hover, .pm-button-blue.pm-button--redborder:focus, .pm-button-blue.pm-button--redborder:focus-within, .pm-button-blue.pm-button--redborder:hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover, .pm-button.is-hover.pm-button--error, .pm-button.is-hover.pm-button--primary, .pm-button.is-hover.pm-button--warning, .pm-button.pm-button--error:focus, .pm-button.pm-button--error:focus-within, .pm-button.pm-button--error:hover, .pm-button.pm-button--primary:focus, .pm-button.pm-button--primary:focus-within, .pm-button.pm-button--primary:hover, .pm-button.pm-button--warning:focus, .pm-button.pm-button--warning:focus-within, .pm-button.pm-button--warning:hover, .pm-button.pm-button-blue.is-hover, .pm-button.pm-button-blue:focus, .pm-button.pm-button-blue:focus-within, .pm-button.pm-button-blue:hover {
-  background: #5d8f5f;
-  border: 1px solid #5d8f5f; }
-
-.is-active.pm-button--error, .is-active.pm-button--error.pm-button--info, .is-active.pm-button--error.pm-button--redborder, .is-active.pm-button--primary, .is-active.pm-button--primary.pm-button--info, .is-active.pm-button--primary.pm-button--redborder, .is-active.pm-button--warning, .is-active.pm-button--warning.pm-button--info, .is-active.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:not(div):active, .pm-button--error.pm-button--redborder:not(div):active, .pm-button--error:not(div):active, .pm-button--primary.pm-button--info:not(div):active, .pm-button--primary.pm-button--redborder:not(div):active, .pm-button--primary:not(div):active, .pm-button--warning.pm-button--info:not(div):active, .pm-button--warning.pm-button--redborder:not(div):active, .pm-button--warning:not(div):active, .pm-button-blue.is-active, .pm-button-blue.is-active.pm-button--info, .pm-button-blue.is-active.pm-button--redborder, .pm-button-blue.pm-button--info:not(div):active, .pm-button-blue.pm-button--redborder:not(div):active, .pm-button-blue:not(div):active, .pm-button.is-active.pm-button--error, .pm-button.is-active.pm-button--primary, .pm-button.is-active.pm-button--warning, .pm-button.pm-button--error:not(div):active, .pm-button.pm-button--primary:not(div):active, .pm-button.pm-button--warning:not(div):active, .pm-button.pm-button-blue.is-active, .pm-button.pm-button-blue:not(div):active {
-  background: #537f54;
-  border-color: #537f54; }
-
-.pm-button-blueborder {
-  box-shadow: none;
-  border-color: #282828;
-  color: #282828;
-  transition: color .2s ease-in-out, border-color .2s ease-in-out; }
-
-.pm-button-blueborder:hover {
-  box-shadow: none;
-  border-color: #537f54;
-  color: #537f54; }
-
-.is-active.pm-button--primaryborder,
-.pm-button--primaryborder:not(div):active,
-.pm-button-blueborder.is-active,
-.pm-button-blueborder:not(div):active {
-  border-color: #537f54;
-  color: #537f54;
-  background: transparent; }
-
-.pm-group-buttons > .pm-group-button.pm-button--primary {
-  border-color: #537f54; }
-
-.bg-pm-blue-gradient .pm-button--transparent:hover {
-  color: #fbf1c7;
-  border-color: #fbf1c7; }
-
-.pm-toggle-checkbox:checked + .pm-toggle-label:before {
-  background: #689d6a;
-  border-color: #689d6a; }
-
-.composer-title-bar {
-  background: #282828; }
-
-.color-global-light {
-  color: #fbf1c7; }
-
-.angular-squire-iframe body a {
-  color: #689d6a; }
-
-.fill-pm-blue,
-.message-attachmentIcon .file-outer-icon.is-embedded {
-  fill: #689d6a; }
-
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2) {
-  border-color: #689d6a;
-  color: #689d6a; }
-  .pm-table--highlight[data-plan-number="1"] tr th:nth-child(2)::before {
-    background-color: #689d6a; }
-
-.pm-table--highlight[data-plan-number="1"] tr td:nth-child(2),
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2),
-.pm-table--highlight[data-plan-number="1"] tr:last-child td:nth-child(2) {
-  border-color: #689d6a; }
-
-.pm-simple-table-row-th .fill-primary {
-  fill: #689d6a; }
-
-.pm-checkbox-fakecheck, .pm-radio-fakeradio {
-  border-color: #282828; }
-  .pm-checkbox-fakecheck [class*="icon-"], .pm-radio-fakeradio [class*="icon-"] {
-    fill: #689d6a; }
-
-[class*="icon-"].color-primary {
-  color: #282828; }
-  [class*="icon-"].color-primary:hover {
-    color: #537f54; }
-
-.pm-field, .editor,
-.editor-toolbar,
-.border-bottom,
-.border-top,
-.message-container.is-opened > .message-header {
-  border-color: #0f0f0f; }
-
-.badgeLabel, .badgeLabel-primary {
-  border-color: #537f54; }
-
-.badgeLabel,
-.badgeLabel-blue,
-.badgeLabel-primary,
-.bg-pm-blue {
-  background-color: #537f54; }
-
-body {
-  scrollbar-color: #424242 #2d2d2d; }
-
-::-webkit-scrollbar {
-  width: 16px; }
-  ::-webkit-scrollbar-track {
-    background: #2d2d2d; }
-  ::-webkit-scrollbar-thumb {
-    background: #424242;
-    box-shadow: inset 0 0 0 4px #2d2d2d;
-    border-radius: 16px; }
-
-.isDarkMode .bordered,
-.isDarkMode .bordered-container:not([class*="composerInputMeta-"]),
-.isDarkMode .breadcrumb-container {
-  border-color: #424242; }
-
-.isDarkMode .dropDown-content::after, .isDarkMode .dropDown-content::before,
-.isDarkMode .dropDown:not(.dropDown--noCaret)::before,
-.isDarkMode .dropDown-content {
-  background: #282828;
-  border: #282828; }
-
-.isDarkMode .dropDown-item-button:focus, .isDarkMode .dropDown-item-button:focus-within,
-.isDarkMode .dropDown-item-button:hover, .isDarkMode .dropDown-item-link:focus,
-.isDarkMode .dropDown-item-link:focus-within, .isDarkMode .dropDown-item-link:hover {
-  background-color: #1b1b1b; }
-
-.isDarkMode .dropDown-item-button.is-disabled, .isDarkMode .dropDown-item-button[disabled],
-.isDarkMode .dropDown-item-link.is-disabled, .isDarkMode .dropDown-item-link[disabled] {
-  background-color: #232323; }
-
-.isDarkMode .squireToolbar-select-list {
-  background: #282828;
-  color: #fbf1c7; }
-
-.isDarkMode .squireToolbar-dropdown-divider {
-  background-color: #424242; }
-
-.isDarkMode .squireToolbar-select-item:hover {
-  background: #232323; }
-
-.isDarkMode #pm_composer .composer,
-.isDarkMode .composerInputMeta-overlay {
-  background: #282828; }
-
-.isDarkMode #pm_composer .composer .fill {
-  background: #282828; }
-
-.isDarkMode .composer-body-container textarea {
-  background: #282828; }
-
-.isDarkMode .composer-addresses-item {
-  background: #1b1b1b; }
-
-.isDarkMode .composer-addresses-autocomplete ul {
-  background: #1b1b1b; }
-
-.isDarkMode .composer-addresses-autocomplete li[aria-selected="true"],
-.isDarkMode .composer-addresses-autocomplete li:hover {
-  background: #282828; }
-
-.isDarkMode .autocompleteEmails-item {
-  background-color: #232323;
-  border-color: #232323; }
-
-.isDarkMode .autocompleteEmails-label {
-  border-left: 1px solid #424242;
-  border-right: 1px solid #424242; }
-
-.isDarkMode .composerOptions-container.show {
-  background: #232323; }
-  .isDarkMode .composerOptions-container.show .shadow-container {
-    background: #282828;
-    color: #fbf1c7; }
-
-.isDarkMode .pm-button.pm-button--primary {
-  background: #537f54;
-  color: #fbf1c7;
-  border-color: #537f54; }
-
-.isDarkMode .pm-button.pm-button--primary:hover {
-  background: #689d6a;
-  color: #fbf1c7; }
-
-.isDarkMode .is-disabled.pm-button--error, .isDarkMode .is-disabled.pm-button--error.pm-button--info, .isDarkMode .is-disabled.pm-button--error.pm-button--redborder, .isDarkMode .is-disabled.pm-button--primary, .isDarkMode .is-disabled.pm-button--primary.pm-button--info, .isDarkMode .is-disabled.pm-button--primary.pm-button--redborder, .isDarkMode .is-disabled.pm-button--warning, .isDarkMode .is-disabled.pm-button--warning.pm-button--info, .isDarkMode .is-disabled.pm-button--warning.pm-button--redborder, .isDarkMode .pm-button--error.pm-button--info[disabled], .isDarkMode .pm-button--error.pm-button--redborder[disabled], .isDarkMode .pm-button--error[disabled], .isDarkMode .pm-button--primary.pm-button--info[disabled], .isDarkMode .pm-button--primary.pm-button--redborder[disabled], .isDarkMode .pm-button--primary[disabled], .isDarkMode .pm-button--warning.pm-button--info[disabled], .isDarkMode .pm-button--warning.pm-button--redborder[disabled], .isDarkMode .pm-button--warning[disabled], .isDarkMode .pm-button-blue.is-disabled, .isDarkMode .pm-button-blue.is-disabled.pm-button--info, .isDarkMode .pm-button-blue.is-disabled.pm-button--redborder, .isDarkMode .pm-button-blue.pm-button--info[disabled], .isDarkMode .pm-button-blue.pm-button--redborder[disabled], .isDarkMode .pm-button-blue[disabled], .isDarkMode .pm-button.is-disabled.pm-button--error, .isDarkMode .pm-button.is-disabled.pm-button--primary, .isDarkMode .pm-button.is-disabled.pm-button--warning, .isDarkMode .pm-button.pm-button--error[disabled], .isDarkMode .pm-button.pm-button--primary[disabled], .isDarkMode .pm-button.pm-button--warning[disabled], .isDarkMode .pm-button.pm-button-blue.is-disabled, .isDarkMode .pm-button.pm-button-blue[disabled] {
-  background-color: #232323;
-  border-color: #424242;
-  color: #f8e597; }
-
-.isDarkMode .pm-button:not(.pm-button-blue):not(.pv-button-green):not(.pm-button--primary):not(.pm-button--primaryborderEvenInDarkMode):not(.pm-button--link):not(.pm-button--error):not(.pm-button--warning):not(.pm-button--redborder):not(.pm-button--primaryborder), .isDarkMode .pm-button--info {
-  color: #fbf1c7;
-  background-color: #282828;
-  border-color: #424242; }
-
-.isDarkMode .pm-group-buttons > .pm-group-button.pm-button--primary {
-  border-color: #424242; }
-
-.isDarkMode .pm-button-blueborder {
-  border-color: #689d6a;
-  color: #689d6a; }
-
-.isDarkMode .pm-button-blueborder:hover {
-  border-color: #77a779;
-  color: #77a779; }
-
-.isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:active, .isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:hover, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:active, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:hover {
-  background: #2d2d2d !important; }
-
-.isDarkMode .squireToolbar-separator {
-  background: #353535; }
-
-.isDarkMode .composerTime-container,
-.isDarkMode [class*="composer-field"] {
-  color: #fbf1c7; }
-
-.isDarkMode .composerInputMeta-overlay-fakefield {
-  border-color: #fbf1c7; }
-
-.isDarkMode .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg {
-  color: white; }
-
-.isDarkMode .conversation {
-  border-color: #424242; }
-
-.isDarkMode .main-area,
-.isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar,
-.isDarkMode .main-area--withToolbar--noHeader,
-.isDarkMode [class*="block-info-"] {
-  color: #fbf1c7; }
-
-.isDarkMode [class*="block-info"] {
-  background-color: #424242;
-  color: #fbf1c7; }
-
-.isDarkMode .fill-global-grey {
-  fill: #689d6a; }
-
-.isDarkMode .starbutton {
-  fill: #1d2021; }
-
-.isDarkMode .bg-global-light, .isDarkMode kbd {
-  background: #282828; }
-
-.isDarkMode .item-container, .isDarkMode .item-container-row, .isDarkMode .contactsummary-container {
-  background: #282828; }
-
-.isDarkMode .items-column-list-inner, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer {
-  border-color: #424242; }
-  .isDarkMode .items-column-list-inner .item-container, .isDarkMode .items-column-list-inner .item-container-row, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container-row {
-    border-color: #424242; }
-
-.isDarkMode .item-container:not(.item-is-selected):not(.read):not(.active),
-.isDarkMode .item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active),
-.isDarkMode .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .isDarkMode .squireToolbar-container {
-  background: #353535; }
-
-.isDarkMode .item-container.active, .isDarkMode .item-is-selected {
-  background: #232323; }
-  .isDarkMode .item-container.active .flex-item-fluid, .isDarkMode .item-is-selected .flex-item-fluid {
-    color: #689d6a; }
-
-.isDarkMode .item-icon {
-  background-color: #282828;
-  border: 1px solid #f9ebaf; }
-
-.isDarkMode .selectBoxElement-container:hover .item-icon {
-  background-color: #282828;
-  border: 1px solid #5d8f5f; }
-  .isDarkMode .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon {
-    fill: #5d8f5f; }
-
-.isDarkMode .selectBoxElement-container {
-  color: #fbf1c7; }
-
-.isDarkMode .selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-  background-color: #5d8f5f;
-  border-color: #5d8f5f; }
-
-.isDarkMode .item-checkbox + .item-icon:hover,
-.isDarkMode .item-checkbox:hover + .item-icon {
-  background-color: #1b1b1b; }
-
-.isDarkMode .items-column-list,
-.isDarkMode .elementList-container-row {
-  background-color: #282828; }
-
-.isDarkMode .composer-container {
-  background: #353535; }
-
-.isDarkMode .message-header {
-  background-color: #353535; }
-
-.isDarkMode .view-column-detail {
-  background-color: #282828; }
-
-.isDarkMode details:first-child {
-  border-color: #424242; }
-
-.isDarkMode .items-column-list,
-.isDarkMode .message-container,
-.isDarkMode .message-attachments {
-  border-color: #424242; }
-
-.isDarkMode .message-container:not(.sent):not(.draft) .message-header.message-summary::before,
-.isDarkMode .message-header.is-inbound::before {
-  border-top: 1px solid #424242;
-  border-left: 1px solid #424242;
-  background-color: #353535; }
-
-.isDarkMode .message-infobox {
-  background-color: #282828; }
-
-.isDarkMode .message-content.frame.message-frame {
-  background: white;
-  color: black; }
-
-.isDarkMode .block-info-standard, .isDarkMode .bodyDecrypted blockquote {
-  border-color: #689d6a; }
-
-.isDarkMode .squireDropdown-item-label {
-  color: #fbf1c7; }
-
-.isDarkMode .squireToolbar-action-color {
-  background: transparent; }
-
-.isDarkMode .angular-squire-iframe body {
-  color: #fbf1c7;
-  background: #353535; }
-  .isDarkMode .angular-squire-iframe body a {
-    color: #689d6a; }
-
-.isDarkMode .plaintext-editor {
-  color: #fbf1c7; }
-
-.isDarkMode .pm-button, .isDarkMode .pm-button--info, .isDarkMode .pm-button--redborder {
-  background: #282828;
-  border-color: #424242;
-  color: #fbf1c7; }
-
-.isDarkMode .message-attachmentInfo {
-  border-color: #424242; }
-
-.isDarkMode .is-hover.pm-button--info, .isDarkMode .is-hover.pm-button--redborder,
-.isDarkMode .pm-button--info:focus, .isDarkMode .pm-button--info:focus-within,
-.isDarkMode .pm-button--info:hover, .isDarkMode .pm-button--redborder:focus,
-.isDarkMode .pm-button--redborder:focus-within, .isDarkMode .pm-button--redborder:hover,
-.isDarkMode .pm-button.is-hover, .isDarkMode .pm-button:focus-within,
-.isDarkMode .pm-button:hover:not(.pm-button--primary) {
-  color: #689d6a; }
-
-.isDarkMode .pm-button:focus {
-  color: #fbf1c7; }
-
-.isDarkMode .is-disabled.pm-button--info,
-.isDarkMode .is-disabled.pm-button--redborder,
-.isDarkMode .pm-button--info[disabled],
-.isDarkMode .pm-button--redborder[disabled],
-.isDarkMode .pm-button.is-disabled,
-.isDarkMode .pm-button[disabled] {
-  background: #424242; }
-
-.isDarkMode .is-active.pm-button--info,
-.isDarkMode .is-active.pm-button--redborder,
-.isDarkMode .pm-button--info:not(div):active,
-.isDarkMode .pm-button--redborder:not(div):active,
-.isDarkMode .pm-button.is-active, .isDarkMode .pm-button:not(div):active {
-  background: #424242;
-  color: #689d6a; }
-
-.isDarkMode .dropDown-content {
-  background: #282828;
-  color: #fbf1c7; }
-  .isDarkMode .dropDown-content button {
-    color: #fbf1c7; }
-  .isDarkMode .dropDown-content .elementsSelector-btn-action,
-  .isDarkMode .dropDown-content .dropDown-item:hover {
-    color: #fbf1c7; }
-  .isDarkMode .dropDown-content .dropDown-item:hover {
-    background: #353535 !important; }
-  .isDarkMode .dropDown-content .dropDown-item + .dropDown-item {
-    border-top: 1px solid #424242; }
-  .isDarkMode .dropDown-content .dropDown-item .color-global-grey {
-    color: #fbf1c7; }
-
-.isDarkMode .dropDown .dropDown-content::before, .isDarkMode .dropDown .dropDown-content::after {
-  border-bottom-color: #282828; }
-
-.isDarkMode .dropDown--right-bottom::before {
-  border-right-color: #282828; }
-
-.isDarkMode .dropDown--right-bottom .dropDown-content::before, .isDarkMode .dropDown--right-bottom .dropDown-content::after {
-  background: #282828; }
-
-.isDarkMode .dropDown--bottom-right .dropDown-content::before, .isDarkMode .dropDown--bottom-right .dropDown-content::after {
-  background: #282828; }
-
-.isDarkMode .dropDown--bottom-left::before,
-.isDarkMode .dropDown--bottom-right::before,
-.isDarkMode .dropDown--bottom::before {
-  border-bottom-color: #424242; }
-
-.isDarkMode .dropDown--bottom-right {
-  border: 1px solid #424242; }
-
-.isDarkMode .pm-field-icon-container[type="search"], .isDarkMode .pm-field[type="search"] {
-  background-color: #353535; }
-
-.isDarkMode .dropDown-contentInner {
-  background-color: #282828; }
-  .isDarkMode .dropDown-contentInner::before, .isDarkMode .dropDown-contentInner::after {
-    background-color: #282828; }
-  .isDarkMode .dropDown-contentInner .dropDown-item span {
-    color: #fbf1c7 !important; }
-
-.isDarkMode .searchbox-field[type="search"]:not(#global_search) {
-  background: #fbf1c7;
-  color: #282828; }
-
-.isDarkMode .link:active, .isDarkMode .link:focus, .isDarkMode .link:hover,
-.isDarkMode a:active, .isDarkMode a:focus, .isDarkMode a:hover,
-.isDarkMode .pm-button--link:hover,
-.isDarkMode .composerInputMeta-label:hover {
-  color: #77a779; }
-
-.isDarkMode .pm-modal, .isDarkMode .pm-modalContentInner {
-  background-color: #282828;
-  color: #fbf1c7; }
-  .isDarkMode .pm-modal::before, .isDarkMode .pm-modal::after, .isDarkMode .pm-modalContentInner::before, .isDarkMode .pm-modalContentInner::after {
-    background-color: #282828; }
-  .isDarkMode .pm-modal .labelColorSelector-item-mask, .isDarkMode .pm-modalContentInner .labelColorSelector-item-mask {
-    border: 2px solid #4e4e4e; }
-
-.isDarkMode .pm-button--primaryborder, .isDarkMode .pm-button-blueborder {
-  border-color: #689d6a;
-  color: #689d6a;
-  background-color: #353535;
-  transition: background-color .2s ease-in-out; }
-
-.isDarkMode .is-hover.pm-button--primaryborder, .isDarkMode .pm-button--primaryborder:focus,
-.isDarkMode .pm-button--primaryborder:focus-within, .isDarkMode .pm-button--primaryborder:hover,
-.isDarkMode .pm-button-blueborder.is-hover, .isDarkMode .pm-button-blueborder:focus,
-.isDarkMode .pm-button-blueborder:focus-within, .isDarkMode .pm-button-blueborder:hover {
-  border-color: #689d6a;
-  color: #689d6a;
-  background-color: #252525; }
-
-.isDarkMode .scrollshadow-static {
-  background: #282828; }
-
-.isDarkMode .pm-field, .isDarkMode .pm-field-icon-container,
-.isDarkMode .focus.pm-field-icon-container, .isDarkMode .pm-field-icon-container:focus,
-.isDarkMode .pm-field-icon-container:focus-within, .isDarkMode .pm-field.focus,
-.isDarkMode .pm-field:focus, .isDarkMode .pm-field:focus-within,
-.isDarkMode .composerInputMeta-overlay-fakefield,
-.isDarkMode .composerInputMeta-autocomplete {
-  color: #fbf1c7;
-  background-color: #353535; }
-  .isDarkMode .pm-field::placeholder, .isDarkMode .pm-field-icon-container::placeholder,
-  .isDarkMode .focus.pm-field-icon-container::placeholder, .isDarkMode .pm-field-icon-container:focus::placeholder,
-  .isDarkMode .pm-field-icon-container:focus-within::placeholder, .isDarkMode .pm-field.focus::placeholder,
-  .isDarkMode .pm-field:focus::placeholder, .isDarkMode .pm-field:focus-within::placeholder,
-  .isDarkMode .composerInputMeta-overlay-fakefield::placeholder,
-  .isDarkMode .composerInputMeta-autocomplete::placeholder {
-    color: #f9ebaf; }
-
-.isDarkMode .composerInputMeta-autocomplete input {
-  color: #fbf1c7;
-  background-color: #353535; }
-  .isDarkMode .composerInputMeta-autocomplete input::placeholder {
-    color: #f9ebaf; }
-
-.isDarkMode select.pm-field, .isDarkMode select.pm-field-icon-container {
-  background-color: #353535;
-  color: #fbf1c7; }
-
-.isDarkMode .storageProgress-content.dropDown-content--rightbottom::before {
-  border-right-color: #282828; }
-
-.isDarkMode .sticky-title {
-  background: #2d2d2d; }
-
-.isDarkMode .bg-global-highlight {
-  background-color: #282828; }
-
-.isDarkMode .bg-white-dm {
-  background-color: #353535; }
-
-.isDarkMode .main-area, .isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar,
-.isDarkMode .main-area--withToolbar--noHeader,
-.isDarkMode [class*="block-info-"] {
-  color: #fbf1c7; }
-
-.isDarkMode .main-area, .isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar, .isDarkMode .main-area--withToolbar--noHeader {
-  background: #282828; }
-
-.isDarkMode .context-bar {
-  background: #282828; }
-
-.isDarkMode .subnav {
-  background: #353535; }
-  .isDarkMode .subnav .link, .isDarkMode .subnav a {
-    color: #689d6a; }
-  .isDarkMode .subnav .link:active, .isDarkMode .subnav .link:focus, .isDarkMode .subnav .link:hover, .isDarkMode .subnav a:active, .isDarkMode .subnav a:focus, .isDarkMode .subnav a:hover {
-    color: #77a779; }
-
-.isDarkMode .pm-toggle-label {
-  border-color: #424242;
-  background: #353535; }
-  .isDarkMode .pm-toggle-label::before {
-    background: #282828; }
-  .isDarkMode .pm-toggle-label .pm-toggle-label-img {
-    fill: #fbf1c7; }
-
-.isDarkMode .pm-plans-table-row--highlighted {
-  background-color: #282828; }
-
-.isDarkMode .pm-checkbox-fakecheck,
-.isDarkMode .pm-radio-fakeradio {
-  background: transparent; }
-
-.isDarkMode [class*="icon-"].color-primary {
-  color: #689d6a; }
-
-.isDarkMode .color-global-grey-dm {
-  color: #689d6a; }
+:root {
+  --searchbox-background-color: #32302f;
+  --searchbox-text-color: #fbf1c7 !important;
+  --optional-sidebar-background-color: #282828;
+  --optional-email-item-unread-icon-background-color: #141414;
+  --optional-email-item-unread-icon-text-color: #fbf1c7;
+}
+
+.meter-bar-thumb, .used-space {
+  --signal-success: #689d6a;
+}
\ No newline at end of file
diff --git a/themes/inbox/inbox.css b/themes/inbox/inbox.css
deleted file mode 100644
index 214e6aa..0000000
--- a/themes/inbox/inbox.css
+++ /dev/null
@@ -1,756 +0,0 @@
-/*! =========================================== *
- * INBOX
- * Version: v4.0.0-beta.33
- * Author: Cristiano Almeida
- * Website: https://www.csalmeida.com
- * Twitter: @_csalmeida
- * =========================================== */
-:root {
-  --main-bg-color: #296cd8;
-  --secondary-bg-color: #2461c4;
-  --bgcolor-searchbox-field: #7297C4;
-  --bgcolor-spacebar: rgba(255, 255, 255, 0.1);
-  --bgcolor-aside-link: rgba(0, 0, 0, 0.3);
-  --bgcolor-toolbar: #3f7bdc;
-  --fillcolor-logo: #f6f7fa;
-  --fillcolor-icons: #fff;
-  --color-nav-link: #F2F2F2;
-  --color-nav-active: #D23F31;
-  --color-standard-text: #fff;
-  --boxshadow-main: none; }
-
-html:not(.editor-squire-iframe) body {
-  background: #296cd8;
-  color: #F2F2F2; }
-
-.pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue {
-  color: #F2F2F2;
-  background-color: #D23F31;
-  border: 1px solid #D23F31;
-  transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; }
-
-.is-hover.pm-button--error, .is-hover.pm-button--primary, .is-hover.pm-button--warning, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover {
-  color: #F2F2F2;
-  box-shadow: 0 0 0.35714em 0 rgba(0, 0, 0, 0.2);
-  background: #c0372a;
-  border: 1px solid #c0372a; }
-
-.pm-button--primaryborder-dark, .pm-button-blueborder-dark {
-  background: #296cd8;
-  border-color: #D23F31;
-  color: #D23F31; }
-
-.is-active.pm-button--primaryborder-dark, .is-hover.pm-button--primaryborder-dark, .pm-button--primaryborder-dark:focus, .pm-button--primaryborder-dark:focus-within, .pm-button--primaryborder-dark:hover, .pm-button--primaryborder-dark:not(div):active, .pm-button-blueborder-dark.is-active, .pm-button-blueborder-dark.is-hover, .pm-button-blueborder-dark:focus, .pm-button-blueborder-dark:focus-within, .pm-button-blueborder-dark:hover, .pm-button-blueborder-dark:not(div):active {
-  background: #296cd8;
-  border-color: #d75346;
-  color: #d75346; }
-
-.pm-button--primaryborder, .pm-button-blueborder {
-  border-color: #c0372a;
-  color: #c0372a; }
-
-.is-hover.pm-button--primaryborder, .pm-button--primaryborder:focus, .pm-button--primaryborder:focus-within, .pm-button--primaryborder:hover, .pm-button-blueborder.is-hover, .pm-button-blueborder:focus, .pm-button-blueborder:focus-within, .pm-button-blueborder:hover {
-  border-color: #c0372a;
-  color: #c0372a; }
-
-.is-disabled.pm-button--error, .is-disabled.pm-button--error.pm-button--info, .is-disabled.pm-button--error.pm-button--redborder, .is-disabled.pm-button--primary, .is-disabled.pm-button--primary.pm-button--info, .is-disabled.pm-button--primary.pm-button--redborder, .is-disabled.pm-button--warning, .is-disabled.pm-button--warning.pm-button--info, .is-disabled.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info[disabled], .pm-button--error.pm-button--redborder[disabled], .pm-button--error[disabled], .pm-button--primary.pm-button--info[disabled], .pm-button--primary.pm-button--redborder[disabled], .pm-button--primary[disabled], .pm-button--warning.pm-button--info[disabled], .pm-button--warning.pm-button--redborder[disabled], .pm-button--warning[disabled], .pm-button-blue.is-disabled, .pm-button-blue.is-disabled.pm-button--info, .pm-button-blue.is-disabled.pm-button--redborder, .pm-button-blue.pm-button--info[disabled], .pm-button-blue.pm-button--redborder[disabled], .pm-button-blue[disabled], .pm-button.is-disabled.pm-button--error, .pm-button.is-disabled.pm-button--primary, .pm-button.is-disabled.pm-button--warning, .pm-button.pm-button--error[disabled], .pm-button.pm-button--primary[disabled], .pm-button.pm-button--warning[disabled], .pm-button.pm-button-blue.is-disabled, .pm-button.pm-button-blue[disabled] {
-  background-color: #f7dbd8;
-  border-color: #d75346;
-  color: #ab3125; }
-
-.bg-primary {
-  background-color: #3f7bdc; }
-
-.color-primary {
-  color: #D23F31; }
-
-.navigation__counterItem {
-  background: #ab3125;
-  color: white; }
-
-.item-container-row:hover::before, .item-container:hover::before {
-  border-color: #db665b; }
-
-.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon {
-  border-color: #e9a19a; }
-
-.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon {
-  fill: #ab3125; }
-
-.circle-chart__circle {
-  stroke: #D23F31; }
-
-#dropdown-0 .dropDown-content::after, #dropdown-0 .dropDown-content::before, #dropdown-0.dropDown:not(.dropDown--noCaret)::before,
-#dropdown-0 .dropDown-content {
-  background: #296cd8; }
-
-.dropDown:not(.dropDown--noCaret)::before,
-.dropDown::after,
-.dropDown-logout-initials,
-.dropDown-item-hr {
-  border-color: #3f7bdc !important; }
-
-#global_search.searchbox-field[type="search"] {
-  background-color: #7297C4;
-  color: #F2F2F2; }
-
-.searchbox-advanced-search-button:active,
-.searchbox-advanced-search-button:focus,
-.searchbox-advanced-search-button:hover {
-  background-color: #296cd8; }
-
-.topnav-link, .topnav-link > .topnav-icon {
-  color: #F2F2F2;
-  transition: color .2s ease-in-out; }
-
-.topnav-link:active, .topnav-link:focus,
-.topnav-link:hover, .topnav-link[aria-current="true"] {
-  color: #D23F31; }
-
-.topnav-link:active > .topnav-icon, .topnav-link:focus > .topnav-icon,
-.topnav-link:hover > .topnav-icon, .topnav-link[aria-current=true] > .topnav-icon {
-  color: #D23F31; }
-
-.protonmail .text-purple {
-  color: #296cd8 !important; }
-
-.protonmail .text-purple:hover {
-  color: #ab3125 !important; }
-
-.dropDown-item-button:focus, .dropDown-item-button:hover, .dropDown-item-link:focus, .dropDown-item-link:hover {
-  color: #D23F31; }
-
-#pm_composer .composer .composerHeader-container,
-.composerInputMeta-overlay .composerHeader-container {
-  background: #3f7bdc; }
-
-#pm_composer .composer .fill {
-  background: #fff; }
-
-.conversation.marked::before {
-  background: #D23F31; }
-
-.item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active) {
-  background: #fff; }
-
-.item-container.selected, .item-container-row.selected,
-.item-container.active, .item-is-selected {
-  background: rgba(210, 63, 49, 0.1); }
-
-.selectBoxElement-container:hover .item-icon {
-  background-color: transparent;
-  border: 1px solid #c0372a; }
-  .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon {
-    fill: #c0372a; }
-
-.selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-  background-color: #c0372a;
-  border-color: #c0372a; }
-
-.item-checkbox:checked + .item-icon {
-  background-color: #D23F31;
-  border-color: #D23F31; }
-
-.item-checkbox + .item-icon:hover {
-  background-color: #c0372a;
-  border-color: #c0372a; }
-
-.item-checkbox + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #F2F2F2; }
-
-.item-checkbox:checked + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #F2F2F2; }
-
-.starbutton {
-  fill: #D23F31 !important;
-  opacity: 0.7; }
-
-.starbutton:focus, .starbutton:hover {
-  fill: #D23F31; }
-
-.autocompleteEmailsItem-icon svg.encryptionIcon {
-  fill: #c0372a; }
-
-.encryptionStatus .color-pm-blue svg {
-  color: #c0372a;
-  fill: #c0372a; }
-
-.encryptionStatus .color-global-grey-dm svg {
-  color: black; }
-
-.color-pm-blue {
-  color: #D23F31; }
-
-.pm-radio:checked + .pm-radio-fakeradio::before {
-  background: #D23F31; }
-
-.block-info-standard {
-  border-color: #1b68c6; }
-
-.block-info-standard-warning {
-  border-color: #ffaa00; }
-
-.block-info-standard-error {
-  border-color: #d62646; }
-
-.link, a, .pm-button--link {
-  color: #ab3125;
-  transition: color .2s ease-in-out; }
-
-.link:active, .link:focus, .link:hover,
-a:active, a:focus, a:hover,
-.pm-button--link:hover {
-  color: #ab3125; }
-
-.pm-button--primary {
-  background-color: #D23F31;
-  border-color: #D23F31; }
-
-.pm-button--link, .pm-button.pm-button--link {
-  color: #D23F31; }
-
-.pm-button--error, .pm-button--error.pm-button--info, .pm-button--error.pm-button--redborder, .pm-button--primary, .pm-button--primary.pm-button--info, .pm-button--primary.pm-button--redborder, .pm-button--warning, .pm-button--warning.pm-button--info, .pm-button--warning.pm-button--redborder, .pm-button-blue, .pm-button-blue.pm-button--info, .pm-button-blue.pm-button--redborder, .pm-button.pm-button--error, .pm-button.pm-button--primary, .pm-button.pm-button--warning, .pm-button.pm-button-blue {
-  background-color: #D23F31;
-  border-color: #D23F31; }
-
-.is-hover.pm-button--error, .is-hover.pm-button--error.pm-button--info, .is-hover.pm-button--error.pm-button--redborder, .is-hover.pm-button--primary, .is-hover.pm-button--primary.pm-button--info, .is-hover.pm-button--primary.pm-button--redborder, .is-hover.pm-button--warning, .is-hover.pm-button--warning.pm-button--info, .is-hover.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:focus, .pm-button--error.pm-button--info:focus-within, .pm-button--error.pm-button--info:hover, .pm-button--error.pm-button--redborder:focus, .pm-button--error.pm-button--redborder:focus-within, .pm-button--error.pm-button--redborder:hover, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary.pm-button--info:focus, .pm-button--primary.pm-button--info:focus-within, .pm-button--primary.pm-button--info:hover, .pm-button--primary.pm-button--redborder:focus, .pm-button--primary.pm-button--redborder:focus-within, .pm-button--primary.pm-button--redborder:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning.pm-button--info:focus, .pm-button--warning.pm-button--info:focus-within, .pm-button--warning.pm-button--info:hover, .pm-button--warning.pm-button--redborder:focus, .pm-button--warning.pm-button--redborder:focus-within, .pm-button--warning.pm-button--redborder:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue.is-hover.pm-button--info, .pm-button-blue.is-hover.pm-button--redborder, .pm-button-blue.pm-button--info:focus, .pm-button-blue.pm-button--info:focus-within, .pm-button-blue.pm-button--info:hover, .pm-button-blue.pm-button--redborder:focus, .pm-button-blue.pm-button--redborder:focus-within, .pm-button-blue.pm-button--redborder:hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover, .pm-button.is-hover.pm-button--error, .pm-button.is-hover.pm-button--primary, .pm-button.is-hover.pm-button--warning, .pm-button.pm-button--error:focus, .pm-button.pm-button--error:focus-within, .pm-button.pm-button--error:hover, .pm-button.pm-button--primary:focus, .pm-button.pm-button--primary:focus-within, .pm-button.pm-button--primary:hover, .pm-button.pm-button--warning:focus, .pm-button.pm-button--warning:focus-within, .pm-button.pm-button--warning:hover, .pm-button.pm-button-blue.is-hover, .pm-button.pm-button-blue:focus, .pm-button.pm-button-blue:focus-within, .pm-button.pm-button-blue:hover {
-  background: #c0372a;
-  border: 1px solid #c0372a; }
-
-.is-active.pm-button--error, .is-active.pm-button--error.pm-button--info, .is-active.pm-button--error.pm-button--redborder, .is-active.pm-button--primary, .is-active.pm-button--primary.pm-button--info, .is-active.pm-button--primary.pm-button--redborder, .is-active.pm-button--warning, .is-active.pm-button--warning.pm-button--info, .is-active.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:not(div):active, .pm-button--error.pm-button--redborder:not(div):active, .pm-button--error:not(div):active, .pm-button--primary.pm-button--info:not(div):active, .pm-button--primary.pm-button--redborder:not(div):active, .pm-button--primary:not(div):active, .pm-button--warning.pm-button--info:not(div):active, .pm-button--warning.pm-button--redborder:not(div):active, .pm-button--warning:not(div):active, .pm-button-blue.is-active, .pm-button-blue.is-active.pm-button--info, .pm-button-blue.is-active.pm-button--redborder, .pm-button-blue.pm-button--info:not(div):active, .pm-button-blue.pm-button--redborder:not(div):active, .pm-button-blue:not(div):active, .pm-button.is-active.pm-button--error, .pm-button.is-active.pm-button--primary, .pm-button.is-active.pm-button--warning, .pm-button.pm-button--error:not(div):active, .pm-button.pm-button--primary:not(div):active, .pm-button.pm-button--warning:not(div):active, .pm-button.pm-button-blue.is-active, .pm-button.pm-button-blue:not(div):active {
-  background: #ab3125;
-  border-color: #ab3125; }
-
-.pm-button-blueborder {
-  box-shadow: none;
-  border-color: #296cd8;
-  color: #296cd8;
-  transition: color .2s ease-in-out, border-color .2s ease-in-out; }
-
-.pm-button-blueborder:hover {
-  box-shadow: none;
-  border-color: #ab3125;
-  color: #ab3125; }
-
-.is-active.pm-button--primaryborder,
-.pm-button--primaryborder:not(div):active,
-.pm-button-blueborder.is-active,
-.pm-button-blueborder:not(div):active {
-  border-color: #ab3125;
-  color: #ab3125;
-  background: transparent; }
-
-.pm-group-buttons > .pm-group-button.pm-button--primary {
-  border-color: #ab3125; }
-
-.bg-pm-blue-gradient .pm-button--transparent:hover {
-  color: #F2F2F2;
-  border-color: #F2F2F2; }
-
-.pm-toggle-checkbox:checked + .pm-toggle-label:before {
-  background: #D23F31;
-  border-color: #D23F31; }
-
-.composer-title-bar {
-  background: #296cd8; }
-
-.color-global-light {
-  color: #F2F2F2; }
-
-.angular-squire-iframe body a {
-  color: #D23F31; }
-
-.fill-pm-blue,
-.message-attachmentIcon .file-outer-icon.is-embedded {
-  fill: #D23F31; }
-
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2) {
-  border-color: #D23F31;
-  color: #D23F31; }
-  .pm-table--highlight[data-plan-number="1"] tr th:nth-child(2)::before {
-    background-color: #D23F31; }
-
-.pm-table--highlight[data-plan-number="1"] tr td:nth-child(2),
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2),
-.pm-table--highlight[data-plan-number="1"] tr:last-child td:nth-child(2) {
-  border-color: #D23F31; }
-
-.pm-simple-table-row-th .fill-primary {
-  fill: #D23F31; }
-
-.pm-checkbox-fakecheck, .pm-radio-fakeradio {
-  border-color: #296cd8; }
-  .pm-checkbox-fakecheck [class*="icon-"], .pm-radio-fakeradio [class*="icon-"] {
-    fill: #D23F31; }
-
-[class*="icon-"].color-primary {
-  color: #296cd8; }
-  [class*="icon-"].color-primary:hover {
-    color: #ab3125; }
-
-.pm-field, .editor,
-.editor-toolbar,
-.border-bottom,
-.border-top,
-.message-container.is-opened > .message-header {
-  border-color: #2056ae; }
-
-.badgeLabel, .badgeLabel-primary {
-  border-color: #ab3125; }
-
-.badgeLabel,
-.badgeLabel-blue,
-.badgeLabel-primary,
-.bg-pm-blue {
-  background-color: #ab3125; }
-
-body {
-  scrollbar-color: #548ae0 #3272da; }
-
-::-webkit-scrollbar {
-  width: 16px; }
-  ::-webkit-scrollbar-track {
-    background: #3272da; }
-  ::-webkit-scrollbar-thumb {
-    background: #548ae0;
-    box-shadow: inset 0 0 0 4px #3272da;
-    border-radius: 16px; }
-
-.isDarkMode .bordered,
-.isDarkMode .bordered-container:not([class*="composerInputMeta-"]),
-.isDarkMode .breadcrumb-container {
-  border-color: #548ae0; }
-
-.isDarkMode .dropDown-content::after, .isDarkMode .dropDown-content::before,
-.isDarkMode .dropDown:not(.dropDown--noCaret)::before,
-.isDarkMode .dropDown-content {
-  background: #296cd8;
-  border: #296cd8; }
-
-.isDarkMode .dropDown-item-button:focus, .isDarkMode .dropDown-item-button:focus-within,
-.isDarkMode .dropDown-item-button:hover, .isDarkMode .dropDown-item-link:focus,
-.isDarkMode .dropDown-item-link:focus-within, .isDarkMode .dropDown-item-link:hover {
-  background-color: #2461c4; }
-
-.isDarkMode .dropDown-item-button.is-disabled, .isDarkMode .dropDown-item-button[disabled],
-.isDarkMode .dropDown-item-link.is-disabled, .isDarkMode .dropDown-item-link[disabled] {
-  background-color: #2667d1; }
-
-.isDarkMode .squireToolbar-select-list {
-  background: #296cd8;
-  color: #F2F2F2; }
-
-.isDarkMode .squireToolbar-dropdown-divider {
-  background-color: #548ae0; }
-
-.isDarkMode .squireToolbar-select-item:hover {
-  background: #2667d1; }
-
-.isDarkMode #pm_composer .composer,
-.isDarkMode .composerInputMeta-overlay {
-  background: #296cd8; }
-
-.isDarkMode #pm_composer .composer .fill {
-  background: #296cd8; }
-
-.isDarkMode .composer-body-container textarea {
-  background: #296cd8; }
-
-.isDarkMode .composer-addresses-item {
-  background: #2461c4; }
-
-.isDarkMode .composer-addresses-autocomplete ul {
-  background: #2461c4; }
-
-.isDarkMode .composer-addresses-autocomplete li[aria-selected="true"],
-.isDarkMode .composer-addresses-autocomplete li:hover {
-  background: #296cd8; }
-
-.isDarkMode .autocompleteEmails-item {
-  background-color: #2667d1;
-  border-color: #2667d1; }
-
-.isDarkMode .autocompleteEmails-label {
-  border-left: 1px solid #548ae0;
-  border-right: 1px solid #548ae0; }
-
-.isDarkMode .composerOptions-container.show {
-  background: #2667d1; }
-  .isDarkMode .composerOptions-container.show .shadow-container {
-    background: #296cd8;
-    color: #F2F2F2; }
-
-.isDarkMode .pm-button.pm-button--primary {
-  background: #ab3125;
-  color: #F2F2F2;
-  border-color: #ab3125; }
-
-.isDarkMode .pm-button.pm-button--primary:hover {
-  background: #D23F31;
-  color: #F2F2F2; }
-
-.isDarkMode .is-disabled.pm-button--error, .isDarkMode .is-disabled.pm-button--error.pm-button--info, .isDarkMode .is-disabled.pm-button--error.pm-button--redborder, .isDarkMode .is-disabled.pm-button--primary, .isDarkMode .is-disabled.pm-button--primary.pm-button--info, .isDarkMode .is-disabled.pm-button--primary.pm-button--redborder, .isDarkMode .is-disabled.pm-button--warning, .isDarkMode .is-disabled.pm-button--warning.pm-button--info, .isDarkMode .is-disabled.pm-button--warning.pm-button--redborder, .isDarkMode .pm-button--error.pm-button--info[disabled], .isDarkMode .pm-button--error.pm-button--redborder[disabled], .isDarkMode .pm-button--error[disabled], .isDarkMode .pm-button--primary.pm-button--info[disabled], .isDarkMode .pm-button--primary.pm-button--redborder[disabled], .isDarkMode .pm-button--primary[disabled], .isDarkMode .pm-button--warning.pm-button--info[disabled], .isDarkMode .pm-button--warning.pm-button--redborder[disabled], .isDarkMode .pm-button--warning[disabled], .isDarkMode .pm-button-blue.is-disabled, .isDarkMode .pm-button-blue.is-disabled.pm-button--info, .isDarkMode .pm-button-blue.is-disabled.pm-button--redborder, .isDarkMode .pm-button-blue.pm-button--info[disabled], .isDarkMode .pm-button-blue.pm-button--redborder[disabled], .isDarkMode .pm-button-blue[disabled], .isDarkMode .pm-button.is-disabled.pm-button--error, .isDarkMode .pm-button.is-disabled.pm-button--primary, .isDarkMode .pm-button.is-disabled.pm-button--warning, .isDarkMode .pm-button.pm-button--error[disabled], .isDarkMode .pm-button.pm-button--primary[disabled], .isDarkMode .pm-button.pm-button--warning[disabled], .isDarkMode .pm-button.pm-button-blue.is-disabled, .isDarkMode .pm-button.pm-button-blue[disabled] {
-  background-color: #2667d1;
-  border-color: #548ae0;
-  color: #d9d9d9; }
-
-.isDarkMode .pm-button:not(.pm-button-blue):not(.pv-button-green):not(.pm-button--primary):not(.pm-button--primaryborderEvenInDarkMode):not(.pm-button--link):not(.pm-button--error):not(.pm-button--warning):not(.pm-button--redborder):not(.pm-button--primaryborder), .isDarkMode .pm-button--info {
-  color: #F2F2F2;
-  background-color: #296cd8;
-  border-color: #548ae0; }
-
-.isDarkMode .pm-group-buttons > .pm-group-button.pm-button--primary {
-  border-color: #548ae0; }
-
-.isDarkMode .pm-button-blueborder {
-  border-color: #D23F31;
-  color: #D23F31; }
-
-.isDarkMode .pm-button-blueborder:hover {
-  border-color: #d75346;
-  color: #d75346; }
-
-.isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:active, .isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:hover, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:active, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:hover {
-  background: #3272da !important; }
-
-.isDarkMode .squireToolbar-separator {
-  background: #3f7bdc; }
-
-.isDarkMode .composerTime-container,
-.isDarkMode [class*="composer-field"] {
-  color: #F2F2F2; }
-
-.isDarkMode .composerInputMeta-overlay-fakefield {
-  border-color: #F2F2F2; }
-
-.isDarkMode .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg {
-  color: white; }
-
-.isDarkMode .conversation {
-  border-color: #548ae0; }
-
-.isDarkMode .main-area,
-.isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar,
-.isDarkMode .main-area--withToolbar--noHeader,
-.isDarkMode [class*="block-info-"] {
-  color: #F2F2F2; }
-
-.isDarkMode [class*="block-info"] {
-  background-color: #548ae0;
-  color: #F2F2F2; }
-
-.isDarkMode .fill-global-grey {
-  fill: #D23F31; }
-
-.isDarkMode .starbutton {
-  fill: #0d0d0d; }
-
-.isDarkMode .bg-global-light, .isDarkMode kbd {
-  background: #296cd8; }
-
-.isDarkMode .item-container, .isDarkMode .item-container-row, .isDarkMode .contactsummary-container {
-  background: #296cd8; }
-
-.isDarkMode .items-column-list-inner, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer {
-  border-color: #548ae0; }
-  .isDarkMode .items-column-list-inner .item-container, .isDarkMode .items-column-list-inner .item-container-row, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container-row {
-    border-color: #548ae0; }
-
-.isDarkMode .item-container:not(.item-is-selected):not(.read):not(.active),
-.isDarkMode .item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active),
-.isDarkMode .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .isDarkMode .squireToolbar-container {
-  background: #3f7bdc; }
-
-.isDarkMode .item-container.active, .isDarkMode .item-is-selected {
-  background: #2667d1; }
-  .isDarkMode .item-container.active .flex-item-fluid, .isDarkMode .item-is-selected .flex-item-fluid {
-    color: #D23F31; }
-
-.isDarkMode .item-icon {
-  background-color: #296cd8;
-  border: 1px solid #e5e5e5; }
-
-.isDarkMode .selectBoxElement-container:hover .item-icon {
-  background-color: #296cd8;
-  border: 1px solid #c0372a; }
-  .isDarkMode .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon {
-    fill: #c0372a; }
-
-.isDarkMode .selectBoxElement-container {
-  color: #F2F2F2; }
-
-.isDarkMode .selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-  background-color: #c0372a;
-  border-color: #c0372a; }
-
-.isDarkMode .item-checkbox + .item-icon:hover,
-.isDarkMode .item-checkbox:hover + .item-icon {
-  background-color: #2461c4; }
-
-.isDarkMode .items-column-list,
-.isDarkMode .elementList-container-row {
-  background-color: #296cd8; }
-
-.isDarkMode .composer-container {
-  background: #3f7bdc; }
-
-.isDarkMode .message-header {
-  background-color: #3f7bdc; }
-
-.isDarkMode .view-column-detail {
-  background-color: #296cd8; }
-
-.isDarkMode details:first-child {
-  border-color: #548ae0; }
-
-.isDarkMode .items-column-list,
-.isDarkMode .message-container,
-.isDarkMode .message-attachments {
-  border-color: #548ae0; }
-
-.isDarkMode .message-container:not(.sent):not(.draft) .message-header.message-summary::before,
-.isDarkMode .message-header.is-inbound::before {
-  border-top: 1px solid #548ae0;
-  border-left: 1px solid #548ae0;
-  background-color: #3f7bdc; }
-
-.isDarkMode .message-infobox {
-  background-color: #296cd8; }
-
-.isDarkMode .message-content.frame.message-frame {
-  background: white;
-  color: black; }
-
-.isDarkMode .block-info-standard, .isDarkMode .bodyDecrypted blockquote {
-  border-color: #D23F31; }
-
-.isDarkMode .squireDropdown-item-label {
-  color: #F2F2F2; }
-
-.isDarkMode .squireToolbar-action-color {
-  background: transparent; }
-
-.isDarkMode .angular-squire-iframe body {
-  color: #F2F2F2;
-  background: #3f7bdc; }
-  .isDarkMode .angular-squire-iframe body a {
-    color: #D23F31; }
-
-.isDarkMode .plaintext-editor {
-  color: #F2F2F2; }
-
-.isDarkMode .pm-button, .isDarkMode .pm-button--info, .isDarkMode .pm-button--redborder {
-  background: #296cd8;
-  border-color: #548ae0;
-  color: #F2F2F2; }
-
-.isDarkMode .message-attachmentInfo {
-  border-color: #548ae0; }
-
-.isDarkMode .is-hover.pm-button--info, .isDarkMode .is-hover.pm-button--redborder,
-.isDarkMode .pm-button--info:focus, .isDarkMode .pm-button--info:focus-within,
-.isDarkMode .pm-button--info:hover, .isDarkMode .pm-button--redborder:focus,
-.isDarkMode .pm-button--redborder:focus-within, .isDarkMode .pm-button--redborder:hover,
-.isDarkMode .pm-button.is-hover, .isDarkMode .pm-button:focus-within,
-.isDarkMode .pm-button:hover:not(.pm-button--primary) {
-  color: #D23F31; }
-
-.isDarkMode .pm-button:focus {
-  color: #F2F2F2; }
-
-.isDarkMode .is-disabled.pm-button--info,
-.isDarkMode .is-disabled.pm-button--redborder,
-.isDarkMode .pm-button--info[disabled],
-.isDarkMode .pm-button--redborder[disabled],
-.isDarkMode .pm-button.is-disabled,
-.isDarkMode .pm-button[disabled] {
-  background: #548ae0; }
-
-.isDarkMode .is-active.pm-button--info,
-.isDarkMode .is-active.pm-button--redborder,
-.isDarkMode .pm-button--info:not(div):active,
-.isDarkMode .pm-button--redborder:not(div):active,
-.isDarkMode .pm-button.is-active, .isDarkMode .pm-button:not(div):active {
-  background: #548ae0;
-  color: #D23F31; }
-
-.isDarkMode .dropDown-content {
-  background: #296cd8;
-  color: #F2F2F2; }
-  .isDarkMode .dropDown-content button {
-    color: #F2F2F2; }
-  .isDarkMode .dropDown-content .elementsSelector-btn-action,
-  .isDarkMode .dropDown-content .dropDown-item:hover {
-    color: #F2F2F2; }
-  .isDarkMode .dropDown-content .dropDown-item:hover {
-    background: #3f7bdc !important; }
-  .isDarkMode .dropDown-content .dropDown-item + .dropDown-item {
-    border-top: 1px solid #548ae0; }
-  .isDarkMode .dropDown-content .dropDown-item .color-global-grey {
-    color: #F2F2F2; }
-
-.isDarkMode .dropDown .dropDown-content::before, .isDarkMode .dropDown .dropDown-content::after {
-  border-bottom-color: #296cd8; }
-
-.isDarkMode .dropDown--right-bottom::before {
-  border-right-color: #296cd8; }
-
-.isDarkMode .dropDown--right-bottom .dropDown-content::before, .isDarkMode .dropDown--right-bottom .dropDown-content::after {
-  background: #296cd8; }
-
-.isDarkMode .dropDown--bottom-right .dropDown-content::before, .isDarkMode .dropDown--bottom-right .dropDown-content::after {
-  background: #296cd8; }
-
-.isDarkMode .dropDown--bottom-left::before,
-.isDarkMode .dropDown--bottom-right::before,
-.isDarkMode .dropDown--bottom::before {
-  border-bottom-color: #548ae0; }
-
-.isDarkMode .dropDown--bottom-right {
-  border: 1px solid #548ae0; }
-
-.isDarkMode .pm-field-icon-container[type="search"], .isDarkMode .pm-field[type="search"] {
-  background-color: #3f7bdc; }
-
-.isDarkMode .dropDown-contentInner {
-  background-color: #296cd8; }
-  .isDarkMode .dropDown-contentInner::before, .isDarkMode .dropDown-contentInner::after {
-    background-color: #296cd8; }
-  .isDarkMode .dropDown-contentInner .dropDown-item span {
-    color: #F2F2F2 !important; }
-
-.isDarkMode .searchbox-field[type="search"]:not(#global_search) {
-  background: #F2F2F2;
-  color: #296cd8; }
-
-.isDarkMode .link:active, .isDarkMode .link:focus, .isDarkMode .link:hover,
-.isDarkMode a:active, .isDarkMode a:focus, .isDarkMode a:hover,
-.isDarkMode .pm-button--link:hover,
-.isDarkMode .composerInputMeta-label:hover {
-  color: #d75346; }
-
-.isDarkMode .pm-modal, .isDarkMode .pm-modalContentInner {
-  background-color: #296cd8;
-  color: #F2F2F2; }
-  .isDarkMode .pm-modal::before, .isDarkMode .pm-modal::after, .isDarkMode .pm-modalContentInner::before, .isDarkMode .pm-modalContentInner::after {
-    background-color: #296cd8; }
-  .isDarkMode .pm-modal .labelColorSelector-item-mask, .isDarkMode .pm-modalContentInner .labelColorSelector-item-mask {
-    border: 2px solid #6a98e4; }
-
-.isDarkMode .pm-button--primaryborder, .isDarkMode .pm-button-blueborder {
-  border-color: #D23F31;
-  color: #D23F31;
-  background-color: #3f7bdc;
-  transition: background-color .2s ease-in-out; }
-
-.isDarkMode .is-hover.pm-button--primaryborder, .isDarkMode .pm-button--primaryborder:focus,
-.isDarkMode .pm-button--primaryborder:focus-within, .isDarkMode .pm-button--primaryborder:hover,
-.isDarkMode .pm-button-blueborder.is-hover, .isDarkMode .pm-button-blueborder:focus,
-.isDarkMode .pm-button-blueborder:focus-within, .isDarkMode .pm-button-blueborder:hover {
-  border-color: #D23F31;
-  color: #D23F31;
-  background-color: #276ad5; }
-
-.isDarkMode .scrollshadow-static {
-  background: #296cd8; }
-
-.isDarkMode .pm-field, .isDarkMode .pm-field-icon-container,
-.isDarkMode .focus.pm-field-icon-container, .isDarkMode .pm-field-icon-container:focus,
-.isDarkMode .pm-field-icon-container:focus-within, .isDarkMode .pm-field.focus,
-.isDarkMode .pm-field:focus, .isDarkMode .pm-field:focus-within,
-.isDarkMode .composerInputMeta-overlay-fakefield,
-.isDarkMode .composerInputMeta-autocomplete {
-  color: #F2F2F2;
-  background-color: #3f7bdc; }
-  .isDarkMode .pm-field::placeholder, .isDarkMode .pm-field-icon-container::placeholder,
-  .isDarkMode .focus.pm-field-icon-container::placeholder, .isDarkMode .pm-field-icon-container:focus::placeholder,
-  .isDarkMode .pm-field-icon-container:focus-within::placeholder, .isDarkMode .pm-field.focus::placeholder,
-  .isDarkMode .pm-field:focus::placeholder, .isDarkMode .pm-field:focus-within::placeholder,
-  .isDarkMode .composerInputMeta-overlay-fakefield::placeholder,
-  .isDarkMode .composerInputMeta-autocomplete::placeholder {
-    color: #e5e5e5; }
-
-.isDarkMode .composerInputMeta-autocomplete input {
-  color: #F2F2F2;
-  background-color: #3f7bdc; }
-  .isDarkMode .composerInputMeta-autocomplete input::placeholder {
-    color: #e5e5e5; }
-
-.isDarkMode select.pm-field, .isDarkMode select.pm-field-icon-container {
-  background-color: #3f7bdc;
-  color: #F2F2F2; }
-
-.isDarkMode .storageProgress-content.dropDown-content--rightbottom::before {
-  border-right-color: #296cd8; }
-
-.isDarkMode .sticky-title {
-  background: #3272da; }
-
-.isDarkMode .bg-global-highlight {
-  background-color: #296cd8; }
-
-.isDarkMode .bg-white-dm {
-  background-color: #3f7bdc; }
-
-.isDarkMode .main-area, .isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar,
-.isDarkMode .main-area--withToolbar--noHeader,
-.isDarkMode [class*="block-info-"] {
-  color: #F2F2F2; }
-
-.isDarkMode .main-area, .isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar, .isDarkMode .main-area--withToolbar--noHeader {
-  background: #296cd8; }
-
-.isDarkMode .context-bar {
-  background: #296cd8; }
-
-.isDarkMode .subnav {
-  background: #3f7bdc; }
-  .isDarkMode .subnav .link, .isDarkMode .subnav a {
-    color: #D23F31; }
-  .isDarkMode .subnav .link:active, .isDarkMode .subnav .link:focus, .isDarkMode .subnav .link:hover, .isDarkMode .subnav a:active, .isDarkMode .subnav a:focus, .isDarkMode .subnav a:hover {
-    color: #d75346; }
-
-.isDarkMode .pm-toggle-label {
-  border-color: #548ae0;
-  background: #3f7bdc; }
-  .isDarkMode .pm-toggle-label::before {
-    background: #296cd8; }
-  .isDarkMode .pm-toggle-label .pm-toggle-label-img {
-    fill: #F2F2F2; }
-
-.isDarkMode .pm-plans-table-row--highlighted {
-  background-color: #296cd8; }
-
-.isDarkMode .pm-checkbox-fakecheck,
-.isDarkMode .pm-radio-fakeradio {
-  background: transparent; }
-
-.isDarkMode [class*="icon-"].color-primary {
-  color: #D23F31; }
-
-.isDarkMode .color-global-grey-dm {
-  color: #D23F31; }
-
-[aria-current="page"].navigation__link, [aria-current="page"].navigation__link .navigation__icon, [aria-current="page"].navigation__link:hover .navigation__icon:not(.navigation__icon--expand) {
-  color: #F2F2F2; }
-
-.toolbar {
-  background: #2461c4; }
-
-.isDarkMode .pm-button, .isDarkMode .pm-button--info, .isDarkMode .pm-button--redborder {
-  background: #cc3a2d; }
-
-.isDarkMode .pm-button--primaryborder {
-  background: transparent;
-  border-color: #F2F2F2;
-  color: #F2F2F2; }
-
-.isDarkMode .pm-button--primaryborder:hover {
-  border-color: #F2F2F2;
-  color: #D23F31; }
-
-.isDarkMode .composer-body-container textarea {
-  background: #1c4c99; }
diff --git a/themes/monokai/monokai.css b/themes/monokai/monokai.css
index f7b2b1f..c0f4dcf 100644
--- a/themes/monokai/monokai.css
+++ b/themes/monokai/monokai.css
@@ -1,735 +1,261 @@
 /*! =========================================== *
  * MONOKAI THEME
- * Version: v4.0.0-beta.33
+ * Version: v4.0.8
  * Author: tripscripts
  * Website: N/A
  * Twitter: N/A
  * =========================================== */
+:root,
+.ui-standard {
+  --primary: #89c62a;
+  --primary-contrast: white;
+  --signal-danger: #ed4c51;
+  --signal-danger-hover: #f7595e;
+  --signal-danger-active: #ff666b;
+  --signal-danger-contrast: white;
+  --signal-warning: #f5930a;
+  --signal-warning-hover: #f5a716;
+  --signal-warning-active: #f5b922;
+  --signal-warning-contrast: black;
+  --signal-success: #349172;
+  --signal-success-hover: #339c79;
+  --signal-success-active: #31a67f;
+  --signal-success-contrast: white;
+  --signal-info: #2c89db;
+  --signal-info-hover: #3491e3;
+  --signal-info-active: #3d99eb;
+  --signal-info-contrast: white;
+  --text-norm: white;
+  --text-weak: #a4a9b5;
+  --text-hint: #696f7d;
+  --text-disabled: #575d6b;
+  --text-invert: #262a33;
+  --field-norm: #e6eaf0;
+  --field-hover: #7ab126;
+  --field-disabled: #464b58;
+  --border-norm: #080807;
+  --border-weak: #10100e;
+  --background-norm: #1d1e1a !important;
+  --background-weak: #2a2c26;
+  --background-strong: #030302;
+  --interaction-norm: #89c62a;
+  --interaction-norm-hover: #91d12c;
+  --interaction-norm-active: #97d437;
+  --interaction-norm-contrast: white;
+  --interaction-weak: #151613 !important;
+  --interaction-weak-hover: #10100e;
+  --interaction-weak-active: #696f7d;
+  --interaction-default: transparent;
+  --interaction-default-hover: rgba(87, 93, 107, 0.2);
+  --interaction-default-active: rgba(87, 93, 107, 0.3);
+  --shadow-norm-opacity: 0.32;
+  --shadow-lifted-opacity: 0.4;
+  --backdrop-norm: rgba(0, 0, 0, 0.32);
+  --optional-scrollbar-thumb-color: #464b58;
+  --optional-scrollbar-thumb-hover-color: #575d6b;
+  --optional-email-item-read-background-color: #1a1d24;
+  --optional-email-item-read-text-color: var(--text-weak);
+  --optional-email-item-selected-background-color: #719e2a;
+}
+
+.ui-prominent,
+.ui-standard,
 :root {
-  --main-bg-color: #1D1E1A;
-  --secondary-bg-color: #10100e;
-  --bgcolor-searchbox-field: #5B26D6;
-  --bgcolor-spacebar: rgba(255, 255, 255, 0.1);
-  --bgcolor-aside-link: rgba(0, 0, 0, 0.3);
-  --bgcolor-toolbar: #2a2c26;
-  --fillcolor-logo: #f6f7fa;
-  --fillcolor-icons: #fff;
-  --color-nav-link: #FFF;
-  --color-nav-active: #89C62A;
-  --color-standard-text: #fff;
-  --boxshadow-main: none; }
+  --selection-background-color: var(
+    --optional-selection-background-color,
+    var(--primary)
+  );
+  --selection-text-color: var(
+    --optional-selection-text-color,
+    var(--primary-contrast)
+  );
+  --header-background-color: #1d1e1a !important;
+  --sidebar-background-color: var(
+    --optional-sidebar-background-color,
+    var(--background-norm)
+  );
+  --navigation-current-item-marker-color: var(
+    --optional-navigation-current-item-marker-color,
+    var(--interaction-norm)
+  );
+  --navigation-current-item-background-color: var(
+    --optional-navigation-current-item-background-color,
+    var(--interaction-default-hover)
+  );
+  --navigation-current-item-text-color: var(
+    --optional-navigation-current-item-text-color,
+    var(--text-norm)
+  );
+  --main-box-shadow: var(--optional-main-box-shadow, none);
+  --main-border-color: var(--optional-main-border-color, var(--border-norm));
+  --navigation-item-count-background-color: var(
+    --optional-navigation-item-count-background-color,
+    var(--primary)
+  );
+  --navigation-item-count-text-color: var(
+    --optional-navigation-item-count-text-color,
+    var(--primary-contrast)
+  );
+  --toolbar-background-color: var(
+    --optional-toolbar-background-color,
+    var(--background-weak)
+  );
+  --toolbar-border-bottom-color: var(
+    --optional-toolbar-border-bottom-color,
+    var(--border-norm)
+  );
+  --toolbar-text-color: var(--optional-toolbar-text-color, var(--text-norm));
+  --toolbar-separator-color: var(
+    --optional-toolbar-separator-color,
+    var(--border-norm)
+  );
+  --scrollbar-thumb-color: var(
+    --optional-scrollbar-thumb-color,
+    hsla(0, 0%, 50%, 0.25)
+  );
+  --scrollbar-thumb-hover-color: var(
+    --optional-scrollbar-thumb-hover-color,
+    hsla(0, 0%, 50%, 0.5)
+  );
+  --tooltip-background-color: var(--optional-tooltip-background-color, #000);
+  --tooltip-text-color: var(--optional-tooltip-text-color, #fff);
+  --email-item-unread-background-color: var(
+    --optional-email-item-unread-background-color,
+    var(--background-norm)
+  );
+  --email-item-unread-text-color: var(
+    --optional-email-item-unread-text-color,
+    var(--text-norm)
+  );
+  --email-item-unread-icon-background-color: var(
+    --optional-email-item-unread-icon-background-color,
+    var(--background-strong)
+  );
+  --email-item-unread-icon-text-color: var(
+    --optional-email-item-unread-icon-text-color,
+    inherit
+  );
+  --email-item-read-background-color: #2a2c26;
+  --email-item-read-text-color: #e6eaf0;
+  --email-item-read-icon-background-color: var(
+    --optional-email-item-read-icon-background-color,
+    var(--background-strong)
+  );
+  --email-item-read-icon-text-color: var(
+    --optional-email-item-read-icon-text-color,
+    inherit
+  );
+  --email-item-selected-background-color: var(
+    --optional-email-item-selected-background-color,
+    var(--interaction-norm)
+  );
+  --email-item-selected-text-color: var(
+    --optional-email-item-selected-text-color,
+    var(--interaction-norm-contrast)
+  );
+  --email-item-selected-icon-background-color: var(
+    --optional-email-item-selected-icon-background-color,
+    var(--interaction-norm-hover)
+  );
+  --email-item-selected-icon-text-color: var(
+    --optional-email-item-selected-icon-text-color,
+    inherit
+  );
+  --email-item-focus-marker-color: var(
+    --optional-email-item-focus-marker-color,
+    var(--interaction-norm)
+  );
+  --email-item-selected-focus-marker-color: var(
+    --optional-email-item-selected-focus-marker-color,
+    var(--interaction-norm-hover)
+  );
+  --email-message-view-background-color: var(
+    --optional-email-message-view-background-color,
+    var(--background-norm)
+  );
+  --field-background-color: var(
+    --optional-field-background-color,
+    var(--background-norm)
+  );
+  --field-text-color: var(--optional-field-text-color, var(--text-norm));
+  --field-placeholder-color: var(
+    --optional-field-placeholder-color,
+    var(--text-hint)
+  );
+  --field-hover-background-color: var(
+    --optional-field-hover-background-color,
+    var(--background-norm)
+  );
+  --field-hover-text-color: var(
+    --optional-field-hover-text-color,
+    var(--text-norm)
+  );
+  --field-focus-background-color: var(
+    --optional-field-focus-background-color,
+    var(--background-norm)
+  );
+  --field-focus-text-color: var(
+    --optional-field-focus-text-color,
+    var(--text-norm)
+  );
+  --field-disabled-background-color: var(
+    --optional-field-disabled-background-color,
+    var(--background-norm)
+  );
+  --field-disabled-text-color: var(
+    --optional-field-disabled-text-color,
+    var(--text-disabled)
+  );
+  --select-background-color: var(
+    --optional-select-background-color,
+    var(--field-background-color)
+  );
+  --favorite-icon-color: var(--optional-favorite-icon-color, orange);
+  --mark-background-color: var(--optional-mark-background-color, #ff0);
+  --mark-text-color: var(--optional-mark-text-color, #000);
+  --mark-font-weight: var(--optional-mark-font-weight, normal);
+  --modal-background-color: var(--optional-modal-background-color);
+  --modal-text-color: var(--optional-modal-text-color);
+  --file-preview-text-color: var(
+    --optional-file-preview-text-color,
+    var(--text-norm)
+  );
+  --file-preview-background-color: var(
+    --optional-file-preview-background-color,
+    var(--background-norm)
+  );
+  --border-radius: var(--optional-border-radius, 3);
+  --font-family: var(
+    --optional-font-family,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen-Sans,
+    Ubuntu,
+    Cantarell,
+    Helvetica Neue,
+    sans-serif
+  );
+}
+
+.button-solid-norm {
+  --button-default-background-color: #89c62a;
+  --button-hover-background-color: #97d437;
+  --button-active-background-color: #97d437;
+  --button-default-text-color: #e6eaf0;
+  --button-hover-text-color: var(--interaction-norm-contrast);
+  --button-active-text-color: var(--interaction-norm-contrast);
+}
 
-html:not(.editor-squire-iframe) body {
-  background: #1D1E1A;
-  color: #e6eaf0; }
-
-.pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue {
-  color: #e6eaf0;
-  background-color: #89C62A;
-  border: 1px solid #89C62A;
-  transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; }
-
-.is-hover.pm-button--error, .is-hover.pm-button--primary, .is-hover.pm-button--warning, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover {
-  color: #FFF;
-  box-shadow: 0 0 0.35714em 0 rgba(0, 0, 0, 0.2);
-  background: #7ab126;
-  border: 1px solid #7ab126; }
-
-.pm-button--primaryborder-dark, .pm-button-blueborder-dark {
-  background: #1D1E1A;
-  border-color: #89C62A;
-  color: #89C62A; }
-
-.is-active.pm-button--primaryborder-dark, .is-hover.pm-button--primaryborder-dark, .pm-button--primaryborder-dark:focus, .pm-button--primaryborder-dark:focus-within, .pm-button--primaryborder-dark:hover, .pm-button--primaryborder-dark:not(div):active, .pm-button-blueborder-dark.is-active, .pm-button-blueborder-dark.is-hover, .pm-button-blueborder-dark:focus, .pm-button-blueborder-dark:focus-within, .pm-button-blueborder-dark:hover, .pm-button-blueborder-dark:not(div):active {
-  background: #1D1E1A;
-  border-color: #96d435;
-  color: #96d435; }
-
-.pm-button--primaryborder, .pm-button-blueborder {
-  border-color: #7ab126;
-  color: #7ab126; }
-
-.is-hover.pm-button--primaryborder, .pm-button--primaryborder:focus, .pm-button--primaryborder:focus-within, .pm-button--primaryborder:hover, .pm-button-blueborder.is-hover, .pm-button-blueborder:focus, .pm-button-blueborder:focus-within, .pm-button-blueborder:hover {
-  border-color: #7ab126;
-  color: #7ab126; }
-
-.is-disabled.pm-button--error, .is-disabled.pm-button--error.pm-button--info, .is-disabled.pm-button--error.pm-button--redborder, .is-disabled.pm-button--primary, .is-disabled.pm-button--primary.pm-button--info, .is-disabled.pm-button--primary.pm-button--redborder, .is-disabled.pm-button--warning, .is-disabled.pm-button--warning.pm-button--info, .is-disabled.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info[disabled], .pm-button--error.pm-button--redborder[disabled], .pm-button--error[disabled], .pm-button--primary.pm-button--info[disabled], .pm-button--primary.pm-button--redborder[disabled], .pm-button--primary[disabled], .pm-button--warning.pm-button--info[disabled], .pm-button--warning.pm-button--redborder[disabled], .pm-button--warning[disabled], .pm-button-blue.is-disabled, .pm-button-blue.is-disabled.pm-button--info, .pm-button-blue.is-disabled.pm-button--redborder, .pm-button-blue.pm-button--info[disabled], .pm-button-blue.pm-button--redborder[disabled], .pm-button-blue[disabled], .pm-button.is-disabled.pm-button--error, .pm-button.is-disabled.pm-button--primary, .pm-button.is-disabled.pm-button--warning, .pm-button.pm-button--error[disabled], .pm-button.pm-button--primary[disabled], .pm-button.pm-button--warning[disabled], .pm-button.pm-button-blue.is-disabled, .pm-button.pm-button-blue[disabled] {
-  background-color: #e3f3c9;
-  border-color: #96d435;
-  color: #6c9c21; }
-
-.bg-primary {
-  background-color: #2a2c26; }
-
-.color-primary {
-  color: #89C62A; }
-
-.navigation__counterItem {
-  background: #6c9c21;
-  color: white; }
-
-.item-container-row:hover::before, .item-container:hover::before {
-  border-color: #a1d94a; }
-
-.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon {
-  border-color: #c2e689; }
-
-.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon {
-  fill: #6c9c21; }
-
-.circle-chart__circle {
-  stroke: #89C62A; }
-
-#dropdown-0 .dropDown-content::after, #dropdown-0 .dropDown-content::before, #dropdown-0.dropDown:not(.dropDown--noCaret)::before,
-#dropdown-0 .dropDown-content {
-  background: #1D1E1A; }
-
-.dropDown:not(.dropDown--noCaret)::before,
-.dropDown::after,
-.dropDown-logout-initials,
-.dropDown-item-hr {
-  border-color: #2a2c26 !important; }
-
-#global_search.searchbox-field[type="search"] {
-  background-color: #5B26D6;
-  color: #e6eaf0; }
-
-.searchbox-advanced-search-button:active,
-.searchbox-advanced-search-button:focus,
-.searchbox-advanced-search-button:hover {
-  background-color: #1D1E1A; }
-
-.topnav-link, .topnav-link > .topnav-icon {
-  color: #FFF;
-  transition: color .2s ease-in-out; }
-
-.topnav-link:active, .topnav-link:focus,
-.topnav-link:hover, .topnav-link[aria-current="true"] {
-  color: #89C62A; }
-
-.topnav-link:active > .topnav-icon, .topnav-link:focus > .topnav-icon,
-.topnav-link:hover > .topnav-icon, .topnav-link[aria-current=true] > .topnav-icon {
-  color: #89C62A; }
-
-.protonmail .text-purple {
-  color: #1D1E1A !important; }
-
-.protonmail .text-purple:hover {
-  color: #6c9c21 !important; }
-
-.dropDown-item-button:focus, .dropDown-item-button:hover, .dropDown-item-link:focus, .dropDown-item-link:hover {
-  color: #89C62A; }
-
-#pm_composer .composer .composerHeader-container,
-.composerInputMeta-overlay .composerHeader-container {
-  background: #2a2c26; }
-
-#pm_composer .composer .fill {
-  background: #fff; }
-
-.conversation.marked::before {
-  background: #89C62A; }
-
-.item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active) {
-  background: #fff; }
-
-.item-container.selected, .item-container-row.selected,
-.item-container.active, .item-is-selected {
-  background: rgba(137, 198, 42, 0.1); }
-
-.selectBoxElement-container:hover .item-icon {
-  background-color: transparent;
-  border: 1px solid #7ab126; }
-  .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon {
-    fill: #7ab126; }
-
-.selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-  background-color: #7ab126;
-  border-color: #7ab126; }
-
-.item-checkbox:checked + .item-icon {
-  background-color: #89C62A;
-  border-color: #89C62A; }
-
-.item-checkbox + .item-icon:hover {
-  background-color: #7ab126;
-  border-color: #7ab126; }
-
-.item-checkbox + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #FFF; }
-
-.item-checkbox:checked + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #FFF; }
-
-.starbutton {
-  fill: #89C62A !important;
-  opacity: 0.7; }
-
-.starbutton:focus, .starbutton:hover {
-  fill: #89C62A; }
-
-.autocompleteEmailsItem-icon svg.encryptionIcon {
-  fill: #7ab126; }
-
-.encryptionStatus .color-pm-blue svg {
-  color: #7ab126;
-  fill: #7ab126; }
-
-.encryptionStatus .color-global-grey-dm svg {
-  color: black; }
-
-.color-pm-blue {
-  color: #89C62A; }
-
-.pm-radio:checked + .pm-radio-fakeradio::before {
-  background: #89C62A; }
-
-.block-info-standard {
-  border-color: #1b68c6; }
-
-.block-info-standard-warning {
-  border-color: #ffaa00; }
-
-.block-info-standard-error {
-  border-color: #d62646; }
-
-.link, a, .pm-button--link {
-  color: #6c9c21;
-  transition: color .2s ease-in-out; }
-
-.link:active, .link:focus, .link:hover,
-a:active, a:focus, a:hover,
-.pm-button--link:hover {
-  color: #6c9c21; }
-
-.pm-button--primary {
-  background-color: #89C62A;
-  border-color: #89C62A; }
-
-.pm-button--link, .pm-button.pm-button--link {
-  color: #89C62A; }
-
-.pm-button--error, .pm-button--error.pm-button--info, .pm-button--error.pm-button--redborder, .pm-button--primary, .pm-button--primary.pm-button--info, .pm-button--primary.pm-button--redborder, .pm-button--warning, .pm-button--warning.pm-button--info, .pm-button--warning.pm-button--redborder, .pm-button-blue, .pm-button-blue.pm-button--info, .pm-button-blue.pm-button--redborder, .pm-button.pm-button--error, .pm-button.pm-button--primary, .pm-button.pm-button--warning, .pm-button.pm-button-blue {
-  background-color: #89C62A;
-  border-color: #89C62A; }
-
-.is-hover.pm-button--error, .is-hover.pm-button--error.pm-button--info, .is-hover.pm-button--error.pm-button--redborder, .is-hover.pm-button--primary, .is-hover.pm-button--primary.pm-button--info, .is-hover.pm-button--primary.pm-button--redborder, .is-hover.pm-button--warning, .is-hover.pm-button--warning.pm-button--info, .is-hover.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:focus, .pm-button--error.pm-button--info:focus-within, .pm-button--error.pm-button--info:hover, .pm-button--error.pm-button--redborder:focus, .pm-button--error.pm-button--redborder:focus-within, .pm-button--error.pm-button--redborder:hover, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary.pm-button--info:focus, .pm-button--primary.pm-button--info:focus-within, .pm-button--primary.pm-button--info:hover, .pm-button--primary.pm-button--redborder:focus, .pm-button--primary.pm-button--redborder:focus-within, .pm-button--primary.pm-button--redborder:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning.pm-button--info:focus, .pm-button--warning.pm-button--info:focus-within, .pm-button--warning.pm-button--info:hover, .pm-button--warning.pm-button--redborder:focus, .pm-button--warning.pm-button--redborder:focus-within, .pm-button--warning.pm-button--redborder:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue.is-hover.pm-button--info, .pm-button-blue.is-hover.pm-button--redborder, .pm-button-blue.pm-button--info:focus, .pm-button-blue.pm-button--info:focus-within, .pm-button-blue.pm-button--info:hover, .pm-button-blue.pm-button--redborder:focus, .pm-button-blue.pm-button--redborder:focus-within, .pm-button-blue.pm-button--redborder:hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover, .pm-button.is-hover.pm-button--error, .pm-button.is-hover.pm-button--primary, .pm-button.is-hover.pm-button--warning, .pm-button.pm-button--error:focus, .pm-button.pm-button--error:focus-within, .pm-button.pm-button--error:hover, .pm-button.pm-button--primary:focus, .pm-button.pm-button--primary:focus-within, .pm-button.pm-button--primary:hover, .pm-button.pm-button--warning:focus, .pm-button.pm-button--warning:focus-within, .pm-button.pm-button--warning:hover, .pm-button.pm-button-blue.is-hover, .pm-button.pm-button-blue:focus, .pm-button.pm-button-blue:focus-within, .pm-button.pm-button-blue:hover {
-  background: #7ab126;
-  border: 1px solid #7ab126; }
-
-.is-active.pm-button--error, .is-active.pm-button--error.pm-button--info, .is-active.pm-button--error.pm-button--redborder, .is-active.pm-button--primary, .is-active.pm-button--primary.pm-button--info, .is-active.pm-button--primary.pm-button--redborder, .is-active.pm-button--warning, .is-active.pm-button--warning.pm-button--info, .is-active.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:not(div):active, .pm-button--error.pm-button--redborder:not(div):active, .pm-button--error:not(div):active, .pm-button--primary.pm-button--info:not(div):active, .pm-button--primary.pm-button--redborder:not(div):active, .pm-button--primary:not(div):active, .pm-button--warning.pm-button--info:not(div):active, .pm-button--warning.pm-button--redborder:not(div):active, .pm-button--warning:not(div):active, .pm-button-blue.is-active, .pm-button-blue.is-active.pm-button--info, .pm-button-blue.is-active.pm-button--redborder, .pm-button-blue.pm-button--info:not(div):active, .pm-button-blue.pm-button--redborder:not(div):active, .pm-button-blue:not(div):active, .pm-button.is-active.pm-button--error, .pm-button.is-active.pm-button--primary, .pm-button.is-active.pm-button--warning, .pm-button.pm-button--error:not(div):active, .pm-button.pm-button--primary:not(div):active, .pm-button.pm-button--warning:not(div):active, .pm-button.pm-button-blue.is-active, .pm-button.pm-button-blue:not(div):active {
-  background: #6c9c21;
-  border-color: #6c9c21; }
-
-.pm-button-blueborder {
-  box-shadow: none;
-  border-color: #1D1E1A;
-  color: #1D1E1A;
-  transition: color .2s ease-in-out, border-color .2s ease-in-out; }
-
-.pm-button-blueborder:hover {
-  box-shadow: none;
-  border-color: #6c9c21;
-  color: #6c9c21; }
-
-.is-active.pm-button--primaryborder,
-.pm-button--primaryborder:not(div):active,
-.pm-button-blueborder.is-active,
-.pm-button-blueborder:not(div):active {
-  border-color: #6c9c21;
-  color: #6c9c21;
-  background: transparent; }
-
-.pm-group-buttons > .pm-group-button.pm-button--primary {
-  border-color: #6c9c21; }
-
-.bg-pm-blue-gradient .pm-button--transparent:hover {
-  color: #e6eaf0;
-  border-color: #e6eaf0; }
-
-.pm-toggle-checkbox:checked + .pm-toggle-label:before {
-  background: #89C62A;
-  border-color: #89C62A; }
-
-.composer-title-bar {
-  background: #1D1E1A; }
-
-.color-global-light {
-  color: #e6eaf0; }
-
-.angular-squire-iframe body a {
-  color: #89C62A; }
-
-.fill-pm-blue,
-.message-attachmentIcon .file-outer-icon.is-embedded {
-  fill: #89C62A; }
-
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2) {
-  border-color: #89C62A;
-  color: #89C62A; }
-  .pm-table--highlight[data-plan-number="1"] tr th:nth-child(2)::before {
-    background-color: #89C62A; }
-
-.pm-table--highlight[data-plan-number="1"] tr td:nth-child(2),
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2),
-.pm-table--highlight[data-plan-number="1"] tr:last-child td:nth-child(2) {
-  border-color: #89C62A; }
-
-.pm-simple-table-row-th .fill-primary {
-  fill: #89C62A; }
-
-.pm-checkbox-fakecheck, .pm-radio-fakeradio {
-  border-color: #1D1E1A; }
-  .pm-checkbox-fakecheck [class*="icon-"], .pm-radio-fakeradio [class*="icon-"] {
-    fill: #89C62A; }
-
-[class*="icon-"].color-primary {
-  color: #1D1E1A; }
-  [class*="icon-"].color-primary:hover {
-    color: #6c9c21; }
-
-.pm-field, .editor,
-.editor-toolbar,
-.border-bottom,
-.border-top,
-.message-container.is-opened > .message-header {
-  border-color: #030302; }
-
-.badgeLabel, .badgeLabel-primary {
-  border-color: #6c9c21; }
-
-.badgeLabel,
-.badgeLabel-blue,
-.badgeLabel-primary,
-.bg-pm-blue {
-  background-color: #6c9c21; }
-
-body {
-  scrollbar-color: #373932 #22231f; }
-
-::-webkit-scrollbar {
-  width: 16px; }
-  ::-webkit-scrollbar-track {
-    background: #22231f; }
-  ::-webkit-scrollbar-thumb {
-    background: #373932;
-    box-shadow: inset 0 0 0 4px #22231f;
-    border-radius: 16px; }
-
-.isDarkMode .bordered,
-.isDarkMode .bordered-container:not([class*="composerInputMeta-"]),
-.isDarkMode .breadcrumb-container {
-  border-color: #373932; }
-
-.isDarkMode .dropDown-content::after, .isDarkMode .dropDown-content::before,
-.isDarkMode .dropDown:not(.dropDown--noCaret)::before,
-.isDarkMode .dropDown-content {
-  background: #1D1E1A;
-  border: #1D1E1A; }
-
-.isDarkMode .dropDown-item-button:focus, .isDarkMode .dropDown-item-button:focus-within,
-.isDarkMode .dropDown-item-button:hover, .isDarkMode .dropDown-item-link:focus,
-.isDarkMode .dropDown-item-link:focus-within, .isDarkMode .dropDown-item-link:hover {
-  background-color: #10100e; }
-
-.isDarkMode .dropDown-item-button.is-disabled, .isDarkMode .dropDown-item-button[disabled],
-.isDarkMode .dropDown-item-link.is-disabled, .isDarkMode .dropDown-item-link[disabled] {
-  background-color: #181915; }
-
-.isDarkMode .squireToolbar-select-list {
-  background: #1D1E1A;
-  color: #e6eaf0; }
-
-.isDarkMode .squireToolbar-dropdown-divider {
-  background-color: #373932; }
-
-.isDarkMode .squireToolbar-select-item:hover {
-  background: #181915; }
-
-.isDarkMode #pm_composer .composer,
-.isDarkMode .composerInputMeta-overlay {
-  background: #1D1E1A; }
-
-.isDarkMode #pm_composer .composer .fill {
-  background: #1D1E1A; }
-
-.isDarkMode .composer-body-container textarea {
-  background: #1D1E1A; }
-
-.isDarkMode .composer-addresses-item {
-  background: #10100e; }
-
-.isDarkMode .composer-addresses-autocomplete ul {
-  background: #10100e; }
-
-.isDarkMode .composer-addresses-autocomplete li[aria-selected="true"],
-.isDarkMode .composer-addresses-autocomplete li:hover {
-  background: #1D1E1A; }
-
-.isDarkMode .autocompleteEmails-item {
-  background-color: #181915;
-  border-color: #181915; }
-
-.isDarkMode .autocompleteEmails-label {
-  border-left: 1px solid #373932;
-  border-right: 1px solid #373932; }
-
-.isDarkMode .composerOptions-container.show {
-  background: #181915; }
-  .isDarkMode .composerOptions-container.show .shadow-container {
-    background: #1D1E1A;
-    color: #e6eaf0; }
-
-.isDarkMode .pm-button.pm-button--primary {
-  background: #6c9c21;
-  color: #e6eaf0;
-  border-color: #6c9c21; }
-
-.isDarkMode .pm-button.pm-button--primary:hover {
-  background: #89C62A;
-  color: #e6eaf0; }
-
-.isDarkMode .is-disabled.pm-button--error, .isDarkMode .is-disabled.pm-button--error.pm-button--info, .isDarkMode .is-disabled.pm-button--error.pm-button--redborder, .isDarkMode .is-disabled.pm-button--primary, .isDarkMode .is-disabled.pm-button--primary.pm-button--info, .isDarkMode .is-disabled.pm-button--primary.pm-button--redborder, .isDarkMode .is-disabled.pm-button--warning, .isDarkMode .is-disabled.pm-button--warning.pm-button--info, .isDarkMode .is-disabled.pm-button--warning.pm-button--redborder, .isDarkMode .pm-button--error.pm-button--info[disabled], .isDarkMode .pm-button--error.pm-button--redborder[disabled], .isDarkMode .pm-button--error[disabled], .isDarkMode .pm-button--primary.pm-button--info[disabled], .isDarkMode .pm-button--primary.pm-button--redborder[disabled], .isDarkMode .pm-button--primary[disabled], .isDarkMode .pm-button--warning.pm-button--info[disabled], .isDarkMode .pm-button--warning.pm-button--redborder[disabled], .isDarkMode .pm-button--warning[disabled], .isDarkMode .pm-button-blue.is-disabled, .isDarkMode .pm-button-blue.is-disabled.pm-button--info, .isDarkMode .pm-button-blue.is-disabled.pm-button--redborder, .isDarkMode .pm-button-blue.pm-button--info[disabled], .isDarkMode .pm-button-blue.pm-button--redborder[disabled], .isDarkMode .pm-button-blue[disabled], .isDarkMode .pm-button.is-disabled.pm-button--error, .isDarkMode .pm-button.is-disabled.pm-button--primary, .isDarkMode .pm-button.is-disabled.pm-button--warning, .isDarkMode .pm-button.pm-button--error[disabled], .isDarkMode .pm-button.pm-button--primary[disabled], .isDarkMode .pm-button.pm-button--warning[disabled], .isDarkMode .pm-button.pm-button-blue.is-disabled, .isDarkMode .pm-button.pm-button-blue[disabled] {
-  background-color: #181915;
-  border-color: #373932;
-  color: #c6cfdd; }
-
-.isDarkMode .pm-button:not(.pm-button-blue):not(.pv-button-green):not(.pm-button--primary):not(.pm-button--primaryborderEvenInDarkMode):not(.pm-button--link):not(.pm-button--error):not(.pm-button--warning):not(.pm-button--redborder):not(.pm-button--primaryborder), .isDarkMode .pm-button--info {
-  color: #e6eaf0;
-  background-color: #1D1E1A;
-  border-color: #373932; }
-
-.isDarkMode .pm-group-buttons > .pm-group-button.pm-button--primary {
-  border-color: #373932; }
-
-.isDarkMode .pm-button-blueborder {
-  border-color: #89C62A;
-  color: #89C62A; }
-
-.isDarkMode .pm-button-blueborder:hover {
-  border-color: #96d435;
-  color: #96d435; }
-
-.isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:active, .isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:hover, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:active, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:hover {
-  background: #22231f !important; }
-
-.isDarkMode .squireToolbar-separator {
-  background: #2a2c26; }
-
-.isDarkMode .composerTime-container,
-.isDarkMode [class*="composer-field"] {
-  color: #e6eaf0; }
-
-.isDarkMode .composerInputMeta-overlay-fakefield {
-  border-color: #e6eaf0; }
-
-.isDarkMode .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg {
-  color: white; }
-
-.isDarkMode .conversation {
-  border-color: #373932; }
-
-.isDarkMode .main-area,
-.isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar,
-.isDarkMode .main-area--withToolbar--noHeader,
-.isDarkMode [class*="block-info-"] {
-  color: #e6eaf0; }
-
-.isDarkMode [class*="block-info"] {
-  background-color: #373932;
-  color: #e6eaf0; }
-
-.isDarkMode .fill-global-grey {
-  fill: #89C62A; }
-
-.isDarkMode .starbutton {
-  fill: #0d0d0d; }
-
-.isDarkMode .bg-global-light, .isDarkMode kbd {
-  background: #1D1E1A; }
-
-.isDarkMode .item-container, .isDarkMode .item-container-row, .isDarkMode .contactsummary-container {
-  background: #1D1E1A; }
-
-.isDarkMode .items-column-list-inner, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer {
-  border-color: #373932; }
-  .isDarkMode .items-column-list-inner .item-container, .isDarkMode .items-column-list-inner .item-container-row, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container-row {
-    border-color: #373932; }
-
-.isDarkMode .item-container:not(.item-is-selected):not(.read):not(.active),
-.isDarkMode .item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active),
-.isDarkMode .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .isDarkMode .squireToolbar-container {
-  background: #2a2c26; }
-
-.isDarkMode .item-container.active, .isDarkMode .item-is-selected {
-  background: #181915; }
-  .isDarkMode .item-container.active .flex-item-fluid, .isDarkMode .item-is-selected .flex-item-fluid {
-    color: #89C62A; }
-
-.isDarkMode .item-icon {
-  background-color: #1D1E1A;
-  border: 1px solid #d6dde6; }
-
-.isDarkMode .selectBoxElement-container:hover .item-icon {
-  background-color: #1D1E1A;
-  border: 1px solid #7ab126; }
-  .isDarkMode .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon {
-    fill: #7ab126; }
-
-.isDarkMode .selectBoxElement-container {
-  color: #e6eaf0; }
-
-.isDarkMode .selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-  background-color: #7ab126;
-  border-color: #7ab126; }
-
-.isDarkMode .item-checkbox + .item-icon:hover,
-.isDarkMode .item-checkbox:hover + .item-icon {
-  background-color: #10100e; }
-
-.isDarkMode .items-column-list,
-.isDarkMode .elementList-container-row {
-  background-color: #1D1E1A; }
-
-.isDarkMode .composer-container {
-  background: #2a2c26; }
-
-.isDarkMode .message-header {
-  background-color: #2a2c26; }
-
-.isDarkMode .view-column-detail {
-  background-color: #1D1E1A; }
-
-.isDarkMode details:first-child {
-  border-color: #373932; }
-
-.isDarkMode .items-column-list,
-.isDarkMode .message-container,
-.isDarkMode .message-attachments {
-  border-color: #373932; }
-
-.isDarkMode .message-container:not(.sent):not(.draft) .message-header.message-summary::before,
-.isDarkMode .message-header.is-inbound::before {
-  border-top: 1px solid #373932;
-  border-left: 1px solid #373932;
-  background-color: #2a2c26; }
-
-.isDarkMode .message-infobox {
-  background-color: #1D1E1A; }
-
-.isDarkMode .message-content.frame.message-frame {
-  background: white;
-  color: black; }
-
-.isDarkMode .block-info-standard, .isDarkMode .bodyDecrypted blockquote {
-  border-color: #89C62A; }
-
-.isDarkMode .squireDropdown-item-label {
-  color: #e6eaf0; }
-
-.isDarkMode .squireToolbar-action-color {
-  background: transparent; }
-
-.isDarkMode .angular-squire-iframe body {
-  color: #e6eaf0;
-  background: #2a2c26; }
-  .isDarkMode .angular-squire-iframe body a {
-    color: #89C62A; }
-
-.isDarkMode .plaintext-editor {
-  color: #e6eaf0; }
-
-.isDarkMode .pm-button, .isDarkMode .pm-button--info, .isDarkMode .pm-button--redborder {
-  background: #1D1E1A;
-  border-color: #373932;
-  color: #e6eaf0; }
-
-.isDarkMode .message-attachmentInfo {
-  border-color: #373932; }
-
-.isDarkMode .is-hover.pm-button--info, .isDarkMode .is-hover.pm-button--redborder,
-.isDarkMode .pm-button--info:focus, .isDarkMode .pm-button--info:focus-within,
-.isDarkMode .pm-button--info:hover, .isDarkMode .pm-button--redborder:focus,
-.isDarkMode .pm-button--redborder:focus-within, .isDarkMode .pm-button--redborder:hover,
-.isDarkMode .pm-button.is-hover, .isDarkMode .pm-button:focus-within,
-.isDarkMode .pm-button:hover:not(.pm-button--primary) {
-  color: #89C62A; }
-
-.isDarkMode .pm-button:focus {
-  color: #e6eaf0; }
-
-.isDarkMode .is-disabled.pm-button--info,
-.isDarkMode .is-disabled.pm-button--redborder,
-.isDarkMode .pm-button--info[disabled],
-.isDarkMode .pm-button--redborder[disabled],
-.isDarkMode .pm-button.is-disabled,
-.isDarkMode .pm-button[disabled] {
-  background: #373932; }
-
-.isDarkMode .is-active.pm-button--info,
-.isDarkMode .is-active.pm-button--redborder,
-.isDarkMode .pm-button--info:not(div):active,
-.isDarkMode .pm-button--redborder:not(div):active,
-.isDarkMode .pm-button.is-active, .isDarkMode .pm-button:not(div):active {
-  background: #373932;
-  color: #89C62A; }
-
-.isDarkMode .dropDown-content {
-  background: #1D1E1A;
-  color: #e6eaf0; }
-  .isDarkMode .dropDown-content button {
-    color: #e6eaf0; }
-  .isDarkMode .dropDown-content .elementsSelector-btn-action,
-  .isDarkMode .dropDown-content .dropDown-item:hover {
-    color: #e6eaf0; }
-  .isDarkMode .dropDown-content .dropDown-item:hover {
-    background: #2a2c26 !important; }
-  .isDarkMode .dropDown-content .dropDown-item + .dropDown-item {
-    border-top: 1px solid #373932; }
-  .isDarkMode .dropDown-content .dropDown-item .color-global-grey {
-    color: #e6eaf0; }
-
-.isDarkMode .dropDown .dropDown-content::before, .isDarkMode .dropDown .dropDown-content::after {
-  border-bottom-color: #1D1E1A; }
-
-.isDarkMode .dropDown--right-bottom::before {
-  border-right-color: #1D1E1A; }
-
-.isDarkMode .dropDown--right-bottom .dropDown-content::before, .isDarkMode .dropDown--right-bottom .dropDown-content::after {
-  background: #1D1E1A; }
-
-.isDarkMode .dropDown--bottom-right .dropDown-content::before, .isDarkMode .dropDown--bottom-right .dropDown-content::after {
-  background: #1D1E1A; }
-
-.isDarkMode .dropDown--bottom-left::before,
-.isDarkMode .dropDown--bottom-right::before,
-.isDarkMode .dropDown--bottom::before {
-  border-bottom-color: #373932; }
-
-.isDarkMode .dropDown--bottom-right {
-  border: 1px solid #373932; }
-
-.isDarkMode .pm-field-icon-container[type="search"], .isDarkMode .pm-field[type="search"] {
-  background-color: #2a2c26; }
-
-.isDarkMode .dropDown-contentInner {
-  background-color: #1D1E1A; }
-  .isDarkMode .dropDown-contentInner::before, .isDarkMode .dropDown-contentInner::after {
-    background-color: #1D1E1A; }
-  .isDarkMode .dropDown-contentInner .dropDown-item span {
-    color: #e6eaf0 !important; }
-
-.isDarkMode .searchbox-field[type="search"]:not(#global_search) {
-  background: #e6eaf0;
-  color: #1D1E1A; }
-
-.isDarkMode .link:active, .isDarkMode .link:focus, .isDarkMode .link:hover,
-.isDarkMode a:active, .isDarkMode a:focus, .isDarkMode a:hover,
-.isDarkMode .pm-button--link:hover,
-.isDarkMode .composerInputMeta-label:hover {
-  color: #96d435; }
-
-.isDarkMode .pm-modal, .isDarkMode .pm-modalContentInner {
-  background-color: #1D1E1A;
-  color: #e6eaf0; }
-  .isDarkMode .pm-modal::before, .isDarkMode .pm-modal::after, .isDarkMode .pm-modalContentInner::before, .isDarkMode .pm-modalContentInner::after {
-    background-color: #1D1E1A; }
-  .isDarkMode .pm-modal .labelColorSelector-item-mask, .isDarkMode .pm-modalContentInner .labelColorSelector-item-mask {
-    border: 2px solid #45473e; }
-
-.isDarkMode .pm-button--primaryborder, .isDarkMode .pm-button-blueborder {
-  border-color: #89C62A;
-  color: #89C62A;
-  background-color: #2a2c26;
-  transition: background-color .2s ease-in-out; }
-
-.isDarkMode .is-hover.pm-button--primaryborder, .isDarkMode .pm-button--primaryborder:focus,
-.isDarkMode .pm-button--primaryborder:focus-within, .isDarkMode .pm-button--primaryborder:hover,
-.isDarkMode .pm-button-blueborder.is-hover, .isDarkMode .pm-button-blueborder:focus,
-.isDarkMode .pm-button-blueborder:focus-within, .isDarkMode .pm-button-blueborder:hover {
-  border-color: #89C62A;
-  color: #89C62A;
-  background-color: #1a1b18; }
-
-.isDarkMode .scrollshadow-static {
-  background: #1D1E1A; }
-
-.isDarkMode .pm-field, .isDarkMode .pm-field-icon-container,
-.isDarkMode .focus.pm-field-icon-container, .isDarkMode .pm-field-icon-container:focus,
-.isDarkMode .pm-field-icon-container:focus-within, .isDarkMode .pm-field.focus,
-.isDarkMode .pm-field:focus, .isDarkMode .pm-field:focus-within,
-.isDarkMode .composerInputMeta-overlay-fakefield,
-.isDarkMode .composerInputMeta-autocomplete {
-  color: #e6eaf0;
-  background-color: #2a2c26; }
-  .isDarkMode .pm-field::placeholder, .isDarkMode .pm-field-icon-container::placeholder,
-  .isDarkMode .focus.pm-field-icon-container::placeholder, .isDarkMode .pm-field-icon-container:focus::placeholder,
-  .isDarkMode .pm-field-icon-container:focus-within::placeholder, .isDarkMode .pm-field.focus::placeholder,
-  .isDarkMode .pm-field:focus::placeholder, .isDarkMode .pm-field:focus-within::placeholder,
-  .isDarkMode .composerInputMeta-overlay-fakefield::placeholder,
-  .isDarkMode .composerInputMeta-autocomplete::placeholder {
-    color: #d6dde6; }
-
-.isDarkMode .composerInputMeta-autocomplete input {
-  color: #e6eaf0;
-  background-color: #2a2c26; }
-  .isDarkMode .composerInputMeta-autocomplete input::placeholder {
-    color: #d6dde6; }
-
-.isDarkMode select.pm-field, .isDarkMode select.pm-field-icon-container {
-  background-color: #2a2c26;
-  color: #e6eaf0; }
-
-.isDarkMode .storageProgress-content.dropDown-content--rightbottom::before {
-  border-right-color: #1D1E1A; }
-
-.isDarkMode .sticky-title {
-  background: #22231f; }
-
-.isDarkMode .bg-global-highlight {
-  background-color: #1D1E1A; }
-
-.isDarkMode .bg-white-dm {
-  background-color: #2a2c26; }
-
-.isDarkMode .main-area, .isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar,
-.isDarkMode .main-area--withToolbar--noHeader,
-.isDarkMode [class*="block-info-"] {
-  color: #e6eaf0; }
-
-.isDarkMode .main-area, .isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar, .isDarkMode .main-area--withToolbar--noHeader {
-  background: #1D1E1A; }
-
-.isDarkMode .context-bar {
-  background: #1D1E1A; }
-
-.isDarkMode .subnav {
-  background: #2a2c26; }
-  .isDarkMode .subnav .link, .isDarkMode .subnav a {
-    color: #89C62A; }
-  .isDarkMode .subnav .link:active, .isDarkMode .subnav .link:focus, .isDarkMode .subnav .link:hover, .isDarkMode .subnav a:active, .isDarkMode .subnav a:focus, .isDarkMode .subnav a:hover {
-    color: #96d435; }
-
-.isDarkMode .pm-toggle-label {
-  border-color: #373932;
-  background: #2a2c26; }
-  .isDarkMode .pm-toggle-label::before {
-    background: #1D1E1A; }
-  .isDarkMode .pm-toggle-label .pm-toggle-label-img {
-    fill: #e6eaf0; }
-
-.isDarkMode .pm-plans-table-row--highlighted {
-  background-color: #1D1E1A; }
-
-.isDarkMode .pm-checkbox-fakecheck,
-.isDarkMode .pm-radio-fakeradio {
-  background: transparent; }
-
-.isDarkMode [class*="icon-"].color-primary {
-  color: #89C62A; }
-
-.isDarkMode .color-global-grey-dm {
-  color: #89C62A; }
+:root {
+  --searchbox-background-color: #5b26d6;
+  --searchbox-text-color: #e6eaf0 !important;
+  --optional-sidebar-background-color: #1d1e1a;
+  --optional-email-item-unread-icon-background-color: #080807;
+  --optional-email-item-unread-icon-text-color: #e6eaf0;
+}
+
+.meter-bar-thumb, .used-space {
+  --signal-success: #89c62a;
+}
\ No newline at end of file
diff --git a/themes/nord/nord.css b/themes/nord/nord.css
index fd4db8c..208b640 100644
--- a/themes/nord/nord.css
+++ b/themes/nord/nord.css
@@ -1,735 +1,261 @@
 /*! =========================================== *
  * NORD Theme
- * Version:  v4.0.0-beta.33
+ * Version:  v4.0.8
  * Author:   ch1r0x
  * Website:  github.com/ch1r0x
  * Mastodon: @ch1r0x
  * =========================================== */
+:root,
+.ui-standard {
+  --primary: #5e81ac;
+  --primary-contrast: white;
+  --signal-danger: #ed4c51;
+  --signal-danger-hover: #f7595e;
+  --signal-danger-active: #ff666b;
+  --signal-danger-contrast: white;
+  --signal-warning: #f5930a;
+  --signal-warning-hover: #f5a716;
+  --signal-warning-active: #f5b922;
+  --signal-warning-contrast: black;
+  --signal-success: #349172;
+  --signal-success-hover: #339c79;
+  --signal-success-active: #31a67f;
+  --signal-success-contrast: white;
+  --signal-info: #2c89db;
+  --signal-info-hover: #3491e3;
+  --signal-info-active: #3d99eb;
+  --signal-info-contrast: white;
+  --text-norm: white;
+  --text-weak: #a4a9b5;
+  --text-hint: #696f7d;
+  --text-disabled: #575d6b;
+  --text-invert: #262a33;
+  --field-norm: #eceff4;
+  --field-hover: #52749f;
+  --field-disabled: #464b58;
+  --border-norm: #1d2128;
+  --border-weak: #232831;
+  --background-norm: #2e3440 !important;
+  --background-weak: #39404f;
+  --background-strong: #191c22;
+  --interaction-norm: #5e81ac;
+  --interaction-norm-hover: #6687b0;
+  --interaction-norm-active: #6e8eb4;
+  --interaction-norm-contrast: white;
+  --interaction-weak: #282d37 !important;
+  --interaction-weak-hover: #232831;
+  --interaction-weak-active: #696f7d;
+  --interaction-default: transparent;
+  --interaction-default-hover: rgba(87, 93, 107, 0.2);
+  --interaction-default-active: rgba(87, 93, 107, 0.3);
+  --shadow-norm-opacity: 0.32;
+  --shadow-lifted-opacity: 0.4;
+  --backdrop-norm: rgba(0, 0, 0, 0.32);
+  --optional-scrollbar-thumb-color: #464b58;
+  --optional-scrollbar-thumb-hover-color: #575d6b;
+  --optional-email-item-read-background-color: #1a1d24;
+  --optional-email-item-read-text-color: var(--text-weak);
+  --optional-email-item-selected-background-color: #5e728a;
+}
+
+.ui-prominent,
+.ui-standard,
 :root {
-  --main-bg-color: #2E3440;
-  --secondary-bg-color: #232831;
-  --bgcolor-searchbox-field: #3B4252;
-  --bgcolor-spacebar: rgba(255, 255, 255, 0.1);
-  --bgcolor-aside-link: rgba(0, 0, 0, 0.3);
-  --bgcolor-toolbar: #39404f;
-  --fillcolor-logo: #f6f7fa;
-  --fillcolor-icons: #fff;
-  --color-nav-link: #E5E9F0;
-  --color-nav-active: #5E81AC;
-  --color-standard-text: #fff;
-  --boxshadow-main: none; }
+  --selection-background-color: var(
+    --optional-selection-background-color,
+    var(--primary)
+  );
+  --selection-text-color: var(
+    --optional-selection-text-color,
+    var(--primary-contrast)
+  );
+  --header-background-color: #2e3440 !important;
+  --sidebar-background-color: var(
+    --optional-sidebar-background-color,
+    var(--background-norm)
+  );
+  --navigation-current-item-marker-color: var(
+    --optional-navigation-current-item-marker-color,
+    var(--interaction-norm)
+  );
+  --navigation-current-item-background-color: var(
+    --optional-navigation-current-item-background-color,
+    var(--interaction-default-hover)
+  );
+  --navigation-current-item-text-color: var(
+    --optional-navigation-current-item-text-color,
+    var(--text-norm)
+  );
+  --main-box-shadow: var(--optional-main-box-shadow, none);
+  --main-border-color: var(--optional-main-border-color, var(--border-norm));
+  --navigation-item-count-background-color: var(
+    --optional-navigation-item-count-background-color,
+    var(--primary)
+  );
+  --navigation-item-count-text-color: var(
+    --optional-navigation-item-count-text-color,
+    var(--primary-contrast)
+  );
+  --toolbar-background-color: var(
+    --optional-toolbar-background-color,
+    var(--background-weak)
+  );
+  --toolbar-border-bottom-color: var(
+    --optional-toolbar-border-bottom-color,
+    var(--border-norm)
+  );
+  --toolbar-text-color: var(--optional-toolbar-text-color, var(--text-norm));
+  --toolbar-separator-color: var(
+    --optional-toolbar-separator-color,
+    var(--border-norm)
+  );
+  --scrollbar-thumb-color: var(
+    --optional-scrollbar-thumb-color,
+    hsla(0, 0%, 50%, 0.25)
+  );
+  --scrollbar-thumb-hover-color: var(
+    --optional-scrollbar-thumb-hover-color,
+    hsla(0, 0%, 50%, 0.5)
+  );
+  --tooltip-background-color: var(--optional-tooltip-background-color, #000);
+  --tooltip-text-color: var(--optional-tooltip-text-color, #fff);
+  --email-item-unread-background-color: var(
+    --optional-email-item-unread-background-color,
+    var(--background-norm)
+  );
+  --email-item-unread-text-color: var(
+    --optional-email-item-unread-text-color,
+    var(--text-norm)
+  );
+  --email-item-unread-icon-background-color: var(
+    --optional-email-item-unread-icon-background-color,
+    var(--background-strong)
+  );
+  --email-item-unread-icon-text-color: var(
+    --optional-email-item-unread-icon-text-color,
+    inherit
+  );
+  --email-item-read-background-color: #39404f;
+  --email-item-read-text-color: #eceff4;
+  --email-item-read-icon-background-color: var(
+    --optional-email-item-read-icon-background-color,
+    var(--background-strong)
+  );
+  --email-item-read-icon-text-color: var(
+    --optional-email-item-read-icon-text-color,
+    inherit
+  );
+  --email-item-selected-background-color: var(
+    --optional-email-item-selected-background-color,
+    var(--interaction-norm)
+  );
+  --email-item-selected-text-color: var(
+    --optional-email-item-selected-text-color,
+    var(--interaction-norm-contrast)
+  );
+  --email-item-selected-icon-background-color: var(
+    --optional-email-item-selected-icon-background-color,
+    var(--interaction-norm-hover)
+  );
+  --email-item-selected-icon-text-color: var(
+    --optional-email-item-selected-icon-text-color,
+    inherit
+  );
+  --email-item-focus-marker-color: var(
+    --optional-email-item-focus-marker-color,
+    var(--interaction-norm)
+  );
+  --email-item-selected-focus-marker-color: var(
+    --optional-email-item-selected-focus-marker-color,
+    var(--interaction-norm-hover)
+  );
+  --email-message-view-background-color: var(
+    --optional-email-message-view-background-color,
+    var(--background-norm)
+  );
+  --field-background-color: var(
+    --optional-field-background-color,
+    var(--background-norm)
+  );
+  --field-text-color: var(--optional-field-text-color, var(--text-norm));
+  --field-placeholder-color: var(
+    --optional-field-placeholder-color,
+    var(--text-hint)
+  );
+  --field-hover-background-color: var(
+    --optional-field-hover-background-color,
+    var(--background-norm)
+  );
+  --field-hover-text-color: var(
+    --optional-field-hover-text-color,
+    var(--text-norm)
+  );
+  --field-focus-background-color: var(
+    --optional-field-focus-background-color,
+    var(--background-norm)
+  );
+  --field-focus-text-color: var(
+    --optional-field-focus-text-color,
+    var(--text-norm)
+  );
+  --field-disabled-background-color: var(
+    --optional-field-disabled-background-color,
+    var(--background-norm)
+  );
+  --field-disabled-text-color: var(
+    --optional-field-disabled-text-color,
+    var(--text-disabled)
+  );
+  --select-background-color: var(
+    --optional-select-background-color,
+    var(--field-background-color)
+  );
+  --favorite-icon-color: var(--optional-favorite-icon-color, orange);
+  --mark-background-color: var(--optional-mark-background-color, #ff0);
+  --mark-text-color: var(--optional-mark-text-color, #000);
+  --mark-font-weight: var(--optional-mark-font-weight, normal);
+  --modal-background-color: var(--optional-modal-background-color);
+  --modal-text-color: var(--optional-modal-text-color);
+  --file-preview-text-color: var(
+    --optional-file-preview-text-color,
+    var(--text-norm)
+  );
+  --file-preview-background-color: var(
+    --optional-file-preview-background-color,
+    var(--background-norm)
+  );
+  --border-radius: var(--optional-border-radius, 3);
+  --font-family: var(
+    --optional-font-family,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen-Sans,
+    Ubuntu,
+    Cantarell,
+    Helvetica Neue,
+    sans-serif
+  );
+}
+
+.button-solid-norm {
+  --button-default-background-color: #5e81ac;
+  --button-hover-background-color: #6e8eb4;
+  --button-active-background-color: #6e8eb4;
+  --button-default-text-color: #eceff4;
+  --button-hover-text-color: var(--interaction-norm-contrast);
+  --button-active-text-color: var(--interaction-norm-contrast);
+}
 
-html:not(.editor-squire-iframe) body {
-  background: #2E3440;
-  color: #ECEFF4; }
-
-.pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue {
-  color: #ECEFF4;
-  background-color: #5E81AC;
-  border: 1px solid #5E81AC;
-  transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; }
-
-.is-hover.pm-button--error, .is-hover.pm-button--primary, .is-hover.pm-button--warning, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover {
-  color: #E5E9F0;
-  box-shadow: 0 0 0.35714em 0 rgba(0, 0, 0, 0.2);
-  background: #52749f;
-  border: 1px solid #52749f; }
-
-.pm-button--primaryborder-dark, .pm-button-blueborder-dark {
-  background: #2E3440;
-  border-color: #5E81AC;
-  color: #5E81AC; }
-
-.is-active.pm-button--primaryborder-dark, .is-hover.pm-button--primaryborder-dark, .pm-button--primaryborder-dark:focus, .pm-button--primaryborder-dark:focus-within, .pm-button--primaryborder-dark:hover, .pm-button--primaryborder-dark:not(div):active, .pm-button-blueborder-dark.is-active, .pm-button-blueborder-dark.is-hover, .pm-button-blueborder-dark:focus, .pm-button-blueborder-dark:focus-within, .pm-button-blueborder-dark:hover, .pm-button-blueborder-dark:not(div):active {
-  background: #2E3440;
-  border-color: #6f8eb5;
-  color: #6f8eb5; }
-
-.pm-button--primaryborder, .pm-button-blueborder {
-  border-color: #52749f;
-  color: #52749f; }
-
-.is-hover.pm-button--primaryborder, .pm-button--primaryborder:focus, .pm-button--primaryborder:focus-within, .pm-button--primaryborder:hover, .pm-button-blueborder.is-hover, .pm-button-blueborder:focus, .pm-button-blueborder:focus-within, .pm-button-blueborder:hover {
-  border-color: #52749f;
-  color: #52749f; }
-
-.is-disabled.pm-button--error, .is-disabled.pm-button--error.pm-button--info, .is-disabled.pm-button--error.pm-button--redborder, .is-disabled.pm-button--primary, .is-disabled.pm-button--primary.pm-button--info, .is-disabled.pm-button--primary.pm-button--redborder, .is-disabled.pm-button--warning, .is-disabled.pm-button--warning.pm-button--info, .is-disabled.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info[disabled], .pm-button--error.pm-button--redborder[disabled], .pm-button--error[disabled], .pm-button--primary.pm-button--info[disabled], .pm-button--primary.pm-button--redborder[disabled], .pm-button--primary[disabled], .pm-button--warning.pm-button--info[disabled], .pm-button--warning.pm-button--redborder[disabled], .pm-button--warning[disabled], .pm-button-blue.is-disabled, .pm-button-blue.is-disabled.pm-button--info, .pm-button-blue.is-disabled.pm-button--redborder, .pm-button-blue.pm-button--info[disabled], .pm-button-blue.pm-button--redborder[disabled], .pm-button-blue[disabled], .pm-button.is-disabled.pm-button--error, .pm-button.is-disabled.pm-button--primary, .pm-button.is-disabled.pm-button--warning, .pm-button.pm-button--error[disabled], .pm-button.pm-button--primary[disabled], .pm-button.pm-button--warning[disabled], .pm-button.pm-button-blue.is-disabled, .pm-button.pm-button-blue[disabled] {
-  background-color: #e5eaf1;
-  border-color: #6f8eb5;
-  color: #49688e; }
-
-.bg-primary {
-  background-color: #39404f; }
-
-.color-primary {
-  color: #5E81AC; }
-
-.navigation__counterItem {
-  background: #49688e;
-  color: white; }
-
-.item-container-row:hover::before, .item-container:hover::before {
-  border-color: #809bbd; }
-
-.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon {
-  border-color: #b2c3d7; }
-
-.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon {
-  fill: #49688e; }
-
-.circle-chart__circle {
-  stroke: #5E81AC; }
-
-#dropdown-0 .dropDown-content::after, #dropdown-0 .dropDown-content::before, #dropdown-0.dropDown:not(.dropDown--noCaret)::before,
-#dropdown-0 .dropDown-content {
-  background: #2E3440; }
-
-.dropDown:not(.dropDown--noCaret)::before,
-.dropDown::after,
-.dropDown-logout-initials,
-.dropDown-item-hr {
-  border-color: #39404f !important; }
-
-#global_search.searchbox-field[type="search"] {
-  background-color: #3B4252;
-  color: #ECEFF4; }
-
-.searchbox-advanced-search-button:active,
-.searchbox-advanced-search-button:focus,
-.searchbox-advanced-search-button:hover {
-  background-color: #2E3440; }
-
-.topnav-link, .topnav-link > .topnav-icon {
-  color: #E5E9F0;
-  transition: color .2s ease-in-out; }
-
-.topnav-link:active, .topnav-link:focus,
-.topnav-link:hover, .topnav-link[aria-current="true"] {
-  color: #5E81AC; }
-
-.topnav-link:active > .topnav-icon, .topnav-link:focus > .topnav-icon,
-.topnav-link:hover > .topnav-icon, .topnav-link[aria-current=true] > .topnav-icon {
-  color: #5E81AC; }
-
-.protonmail .text-purple {
-  color: #2E3440 !important; }
-
-.protonmail .text-purple:hover {
-  color: #49688e !important; }
-
-.dropDown-item-button:focus, .dropDown-item-button:hover, .dropDown-item-link:focus, .dropDown-item-link:hover {
-  color: #5E81AC; }
-
-#pm_composer .composer .composerHeader-container,
-.composerInputMeta-overlay .composerHeader-container {
-  background: #39404f; }
-
-#pm_composer .composer .fill {
-  background: #fff; }
-
-.conversation.marked::before {
-  background: #5E81AC; }
-
-.item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active) {
-  background: #fff; }
-
-.item-container.selected, .item-container-row.selected,
-.item-container.active, .item-is-selected {
-  background: rgba(94, 129, 172, 0.1); }
-
-.selectBoxElement-container:hover .item-icon {
-  background-color: transparent;
-  border: 1px solid #52749f; }
-  .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon {
-    fill: #52749f; }
-
-.selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-  background-color: #52749f;
-  border-color: #52749f; }
-
-.item-checkbox:checked + .item-icon {
-  background-color: #5E81AC;
-  border-color: #5E81AC; }
-
-.item-checkbox + .item-icon:hover {
-  background-color: #52749f;
-  border-color: #52749f; }
-
-.item-checkbox + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #E5E9F0; }
-
-.item-checkbox:checked + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #E5E9F0; }
-
-.starbutton {
-  fill: #5E81AC !important;
-  opacity: 0.7; }
-
-.starbutton:focus, .starbutton:hover {
-  fill: #5E81AC; }
-
-.autocompleteEmailsItem-icon svg.encryptionIcon {
-  fill: #52749f; }
-
-.encryptionStatus .color-pm-blue svg {
-  color: #52749f;
-  fill: #52749f; }
-
-.encryptionStatus .color-global-grey-dm svg {
-  color: black; }
-
-.color-pm-blue {
-  color: #5E81AC; }
-
-.pm-radio:checked + .pm-radio-fakeradio::before {
-  background: #5E81AC; }
-
-.block-info-standard {
-  border-color: #A3BE8C; }
-
-.block-info-standard-warning {
-  border-color: #D08770; }
-
-.block-info-standard-error {
-  border-color: #BF616A; }
-
-.link, a, .pm-button--link {
-  color: #49688e;
-  transition: color .2s ease-in-out; }
-
-.link:active, .link:focus, .link:hover,
-a:active, a:focus, a:hover,
-.pm-button--link:hover {
-  color: #49688e; }
-
-.pm-button--primary {
-  background-color: #5E81AC;
-  border-color: #5E81AC; }
-
-.pm-button--link, .pm-button.pm-button--link {
-  color: #5E81AC; }
-
-.pm-button--error, .pm-button--error.pm-button--info, .pm-button--error.pm-button--redborder, .pm-button--primary, .pm-button--primary.pm-button--info, .pm-button--primary.pm-button--redborder, .pm-button--warning, .pm-button--warning.pm-button--info, .pm-button--warning.pm-button--redborder, .pm-button-blue, .pm-button-blue.pm-button--info, .pm-button-blue.pm-button--redborder, .pm-button.pm-button--error, .pm-button.pm-button--primary, .pm-button.pm-button--warning, .pm-button.pm-button-blue {
-  background-color: #5E81AC;
-  border-color: #5E81AC; }
-
-.is-hover.pm-button--error, .is-hover.pm-button--error.pm-button--info, .is-hover.pm-button--error.pm-button--redborder, .is-hover.pm-button--primary, .is-hover.pm-button--primary.pm-button--info, .is-hover.pm-button--primary.pm-button--redborder, .is-hover.pm-button--warning, .is-hover.pm-button--warning.pm-button--info, .is-hover.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:focus, .pm-button--error.pm-button--info:focus-within, .pm-button--error.pm-button--info:hover, .pm-button--error.pm-button--redborder:focus, .pm-button--error.pm-button--redborder:focus-within, .pm-button--error.pm-button--redborder:hover, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary.pm-button--info:focus, .pm-button--primary.pm-button--info:focus-within, .pm-button--primary.pm-button--info:hover, .pm-button--primary.pm-button--redborder:focus, .pm-button--primary.pm-button--redborder:focus-within, .pm-button--primary.pm-button--redborder:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning.pm-button--info:focus, .pm-button--warning.pm-button--info:focus-within, .pm-button--warning.pm-button--info:hover, .pm-button--warning.pm-button--redborder:focus, .pm-button--warning.pm-button--redborder:focus-within, .pm-button--warning.pm-button--redborder:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue.is-hover.pm-button--info, .pm-button-blue.is-hover.pm-button--redborder, .pm-button-blue.pm-button--info:focus, .pm-button-blue.pm-button--info:focus-within, .pm-button-blue.pm-button--info:hover, .pm-button-blue.pm-button--redborder:focus, .pm-button-blue.pm-button--redborder:focus-within, .pm-button-blue.pm-button--redborder:hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover, .pm-button.is-hover.pm-button--error, .pm-button.is-hover.pm-button--primary, .pm-button.is-hover.pm-button--warning, .pm-button.pm-button--error:focus, .pm-button.pm-button--error:focus-within, .pm-button.pm-button--error:hover, .pm-button.pm-button--primary:focus, .pm-button.pm-button--primary:focus-within, .pm-button.pm-button--primary:hover, .pm-button.pm-button--warning:focus, .pm-button.pm-button--warning:focus-within, .pm-button.pm-button--warning:hover, .pm-button.pm-button-blue.is-hover, .pm-button.pm-button-blue:focus, .pm-button.pm-button-blue:focus-within, .pm-button.pm-button-blue:hover {
-  background: #52749f;
-  border: 1px solid #52749f; }
-
-.is-active.pm-button--error, .is-active.pm-button--error.pm-button--info, .is-active.pm-button--error.pm-button--redborder, .is-active.pm-button--primary, .is-active.pm-button--primary.pm-button--info, .is-active.pm-button--primary.pm-button--redborder, .is-active.pm-button--warning, .is-active.pm-button--warning.pm-button--info, .is-active.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:not(div):active, .pm-button--error.pm-button--redborder:not(div):active, .pm-button--error:not(div):active, .pm-button--primary.pm-button--info:not(div):active, .pm-button--primary.pm-button--redborder:not(div):active, .pm-button--primary:not(div):active, .pm-button--warning.pm-button--info:not(div):active, .pm-button--warning.pm-button--redborder:not(div):active, .pm-button--warning:not(div):active, .pm-button-blue.is-active, .pm-button-blue.is-active.pm-button--info, .pm-button-blue.is-active.pm-button--redborder, .pm-button-blue.pm-button--info:not(div):active, .pm-button-blue.pm-button--redborder:not(div):active, .pm-button-blue:not(div):active, .pm-button.is-active.pm-button--error, .pm-button.is-active.pm-button--primary, .pm-button.is-active.pm-button--warning, .pm-button.pm-button--error:not(div):active, .pm-button.pm-button--primary:not(div):active, .pm-button.pm-button--warning:not(div):active, .pm-button.pm-button-blue.is-active, .pm-button.pm-button-blue:not(div):active {
-  background: #49688e;
-  border-color: #49688e; }
-
-.pm-button-blueborder {
-  box-shadow: none;
-  border-color: #2E3440;
-  color: #2E3440;
-  transition: color .2s ease-in-out, border-color .2s ease-in-out; }
-
-.pm-button-blueborder:hover {
-  box-shadow: none;
-  border-color: #49688e;
-  color: #49688e; }
-
-.is-active.pm-button--primaryborder,
-.pm-button--primaryborder:not(div):active,
-.pm-button-blueborder.is-active,
-.pm-button-blueborder:not(div):active {
-  border-color: #49688e;
-  color: #49688e;
-  background: transparent; }
-
-.pm-group-buttons > .pm-group-button.pm-button--primary {
-  border-color: #49688e; }
-
-.bg-pm-blue-gradient .pm-button--transparent:hover {
-  color: #ECEFF4;
-  border-color: #ECEFF4; }
-
-.pm-toggle-checkbox:checked + .pm-toggle-label:before {
-  background: #5E81AC;
-  border-color: #5E81AC; }
-
-.composer-title-bar {
-  background: #2E3440; }
-
-.color-global-light {
-  color: #ECEFF4; }
-
-.angular-squire-iframe body a {
-  color: #5E81AC; }
-
-.fill-pm-blue,
-.message-attachmentIcon .file-outer-icon.is-embedded {
-  fill: #5E81AC; }
-
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2) {
-  border-color: #5E81AC;
-  color: #5E81AC; }
-  .pm-table--highlight[data-plan-number="1"] tr th:nth-child(2)::before {
-    background-color: #5E81AC; }
-
-.pm-table--highlight[data-plan-number="1"] tr td:nth-child(2),
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2),
-.pm-table--highlight[data-plan-number="1"] tr:last-child td:nth-child(2) {
-  border-color: #5E81AC; }
-
-.pm-simple-table-row-th .fill-primary {
-  fill: #5E81AC; }
-
-.pm-checkbox-fakecheck, .pm-radio-fakeradio {
-  border-color: #2E3440; }
-  .pm-checkbox-fakecheck [class*="icon-"], .pm-radio-fakeradio [class*="icon-"] {
-    fill: #5E81AC; }
-
-[class*="icon-"].color-primary {
-  color: #2E3440; }
-  [class*="icon-"].color-primary:hover {
-    color: #49688e; }
-
-.pm-field, .editor,
-.editor-toolbar,
-.border-bottom,
-.border-top,
-.message-container.is-opened > .message-header {
-  border-color: #191c22; }
-
-.badgeLabel, .badgeLabel-primary {
-  border-color: #49688e; }
-
-.badgeLabel,
-.badgeLabel-blue,
-.badgeLabel-primary,
-.bg-pm-blue {
-  background-color: #49688e; }
-
-body {
-  scrollbar-color: #434c5e #323946; }
-
-::-webkit-scrollbar {
-  width: 16px; }
-  ::-webkit-scrollbar-track {
-    background: #323946; }
-  ::-webkit-scrollbar-thumb {
-    background: #434c5e;
-    box-shadow: inset 0 0 0 4px #323946;
-    border-radius: 16px; }
-
-.isDarkMode .bordered,
-.isDarkMode .bordered-container:not([class*="composerInputMeta-"]),
-.isDarkMode .breadcrumb-container {
-  border-color: #434c5e; }
-
-.isDarkMode .dropDown-content::after, .isDarkMode .dropDown-content::before,
-.isDarkMode .dropDown:not(.dropDown--noCaret)::before,
-.isDarkMode .dropDown-content {
-  background: #2E3440;
-  border: #2E3440; }
-
-.isDarkMode .dropDown-item-button:focus, .isDarkMode .dropDown-item-button:focus-within,
-.isDarkMode .dropDown-item-button:hover, .isDarkMode .dropDown-item-link:focus,
-.isDarkMode .dropDown-item-link:focus-within, .isDarkMode .dropDown-item-link:hover {
-  background-color: #232831; }
-
-.isDarkMode .dropDown-item-button.is-disabled, .isDarkMode .dropDown-item-button[disabled],
-.isDarkMode .dropDown-item-link.is-disabled, .isDarkMode .dropDown-item-link[disabled] {
-  background-color: #2a2f3a; }
-
-.isDarkMode .squireToolbar-select-list {
-  background: #2E3440;
-  color: #ECEFF4; }
-
-.isDarkMode .squireToolbar-dropdown-divider {
-  background-color: #434c5e; }
-
-.isDarkMode .squireToolbar-select-item:hover {
-  background: #2a2f3a; }
-
-.isDarkMode #pm_composer .composer,
-.isDarkMode .composerInputMeta-overlay {
-  background: #2E3440; }
-
-.isDarkMode #pm_composer .composer .fill {
-  background: #2E3440; }
-
-.isDarkMode .composer-body-container textarea {
-  background: #2E3440; }
-
-.isDarkMode .composer-addresses-item {
-  background: #232831; }
-
-.isDarkMode .composer-addresses-autocomplete ul {
-  background: #232831; }
-
-.isDarkMode .composer-addresses-autocomplete li[aria-selected="true"],
-.isDarkMode .composer-addresses-autocomplete li:hover {
-  background: #2E3440; }
-
-.isDarkMode .autocompleteEmails-item {
-  background-color: #2a2f3a;
-  border-color: #2a2f3a; }
-
-.isDarkMode .autocompleteEmails-label {
-  border-left: 1px solid #434c5e;
-  border-right: 1px solid #434c5e; }
-
-.isDarkMode .composerOptions-container.show {
-  background: #2a2f3a; }
-  .isDarkMode .composerOptions-container.show .shadow-container {
-    background: #2E3440;
-    color: #ECEFF4; }
-
-.isDarkMode .pm-button.pm-button--primary {
-  background: #49688e;
-  color: #ECEFF4;
-  border-color: #49688e; }
-
-.isDarkMode .pm-button.pm-button--primary:hover {
-  background: #5E81AC;
-  color: #ECEFF4; }
-
-.isDarkMode .is-disabled.pm-button--error, .isDarkMode .is-disabled.pm-button--error.pm-button--info, .isDarkMode .is-disabled.pm-button--error.pm-button--redborder, .isDarkMode .is-disabled.pm-button--primary, .isDarkMode .is-disabled.pm-button--primary.pm-button--info, .isDarkMode .is-disabled.pm-button--primary.pm-button--redborder, .isDarkMode .is-disabled.pm-button--warning, .isDarkMode .is-disabled.pm-button--warning.pm-button--info, .isDarkMode .is-disabled.pm-button--warning.pm-button--redborder, .isDarkMode .pm-button--error.pm-button--info[disabled], .isDarkMode .pm-button--error.pm-button--redborder[disabled], .isDarkMode .pm-button--error[disabled], .isDarkMode .pm-button--primary.pm-button--info[disabled], .isDarkMode .pm-button--primary.pm-button--redborder[disabled], .isDarkMode .pm-button--primary[disabled], .isDarkMode .pm-button--warning.pm-button--info[disabled], .isDarkMode .pm-button--warning.pm-button--redborder[disabled], .isDarkMode .pm-button--warning[disabled], .isDarkMode .pm-button-blue.is-disabled, .isDarkMode .pm-button-blue.is-disabled.pm-button--info, .isDarkMode .pm-button-blue.is-disabled.pm-button--redborder, .isDarkMode .pm-button-blue.pm-button--info[disabled], .isDarkMode .pm-button-blue.pm-button--redborder[disabled], .isDarkMode .pm-button-blue[disabled], .isDarkMode .pm-button.is-disabled.pm-button--error, .isDarkMode .pm-button.is-disabled.pm-button--primary, .isDarkMode .pm-button.is-disabled.pm-button--warning, .isDarkMode .pm-button.pm-button--error[disabled], .isDarkMode .pm-button.pm-button--primary[disabled], .isDarkMode .pm-button.pm-button--warning[disabled], .isDarkMode .pm-button.pm-button-blue.is-disabled, .isDarkMode .pm-button.pm-button-blue[disabled] {
-  background-color: #2a2f3a;
-  border-color: #434c5e;
-  color: #ccd4e1; }
-
-.isDarkMode .pm-button:not(.pm-button-blue):not(.pv-button-green):not(.pm-button--primary):not(.pm-button--primaryborderEvenInDarkMode):not(.pm-button--link):not(.pm-button--error):not(.pm-button--warning):not(.pm-button--redborder):not(.pm-button--primaryborder), .isDarkMode .pm-button--info {
-  color: #ECEFF4;
-  background-color: #2E3440;
-  border-color: #434c5e; }
-
-.isDarkMode .pm-group-buttons > .pm-group-button.pm-button--primary {
-  border-color: #434c5e; }
-
-.isDarkMode .pm-button-blueborder {
-  border-color: #5E81AC;
-  color: #5E81AC; }
-
-.isDarkMode .pm-button-blueborder:hover {
-  border-color: #6f8eb5;
-  color: #6f8eb5; }
-
-.isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:active, .isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:hover, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:active, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:hover {
-  background: #323946 !important; }
-
-.isDarkMode .squireToolbar-separator {
-  background: #39404f; }
-
-.isDarkMode .composerTime-container,
-.isDarkMode [class*="composer-field"] {
-  color: #ECEFF4; }
-
-.isDarkMode .composerInputMeta-overlay-fakefield {
-  border-color: #ECEFF4; }
-
-.isDarkMode .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg {
-  color: white; }
-
-.isDarkMode .conversation {
-  border-color: #434c5e; }
-
-.isDarkMode .main-area,
-.isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar,
-.isDarkMode .main-area--withToolbar--noHeader,
-.isDarkMode [class*="block-info-"] {
-  color: #ECEFF4; }
-
-.isDarkMode [class*="block-info"] {
-  background-color: #434c5e;
-  color: #ECEFF4; }
-
-.isDarkMode .fill-global-grey {
-  fill: #5E81AC; }
-
-.isDarkMode .starbutton {
-  fill: #88C0D0; }
-
-.isDarkMode .bg-global-light, .isDarkMode kbd {
-  background: #2E3440; }
-
-.isDarkMode .item-container, .isDarkMode .item-container-row, .isDarkMode .contactsummary-container {
-  background: #2E3440; }
-
-.isDarkMode .items-column-list-inner, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer {
-  border-color: #434c5e; }
-  .isDarkMode .items-column-list-inner .item-container, .isDarkMode .items-column-list-inner .item-container-row, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container-row {
-    border-color: #434c5e; }
-
-.isDarkMode .item-container:not(.item-is-selected):not(.read):not(.active),
-.isDarkMode .item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active),
-.isDarkMode .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .isDarkMode .squireToolbar-container {
-  background: #39404f; }
-
-.isDarkMode .item-container.active, .isDarkMode .item-is-selected {
-  background: #2a2f3a; }
-  .isDarkMode .item-container.active .flex-item-fluid, .isDarkMode .item-is-selected .flex-item-fluid {
-    color: #5E81AC; }
-
-.isDarkMode .item-icon {
-  background-color: #2E3440;
-  border: 1px solid #dce1eb; }
-
-.isDarkMode .selectBoxElement-container:hover .item-icon {
-  background-color: #2E3440;
-  border: 1px solid #52749f; }
-  .isDarkMode .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon {
-    fill: #52749f; }
-
-.isDarkMode .selectBoxElement-container {
-  color: #ECEFF4; }
-
-.isDarkMode .selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-  background-color: #52749f;
-  border-color: #52749f; }
-
-.isDarkMode .item-checkbox + .item-icon:hover,
-.isDarkMode .item-checkbox:hover + .item-icon {
-  background-color: #232831; }
-
-.isDarkMode .items-column-list,
-.isDarkMode .elementList-container-row {
-  background-color: #2E3440; }
-
-.isDarkMode .composer-container {
-  background: #39404f; }
-
-.isDarkMode .message-header {
-  background-color: #39404f; }
-
-.isDarkMode .view-column-detail {
-  background-color: #2E3440; }
-
-.isDarkMode details:first-child {
-  border-color: #434c5e; }
-
-.isDarkMode .items-column-list,
-.isDarkMode .message-container,
-.isDarkMode .message-attachments {
-  border-color: #434c5e; }
-
-.isDarkMode .message-container:not(.sent):not(.draft) .message-header.message-summary::before,
-.isDarkMode .message-header.is-inbound::before {
-  border-top: 1px solid #434c5e;
-  border-left: 1px solid #434c5e;
-  background-color: #39404f; }
-
-.isDarkMode .message-infobox {
-  background-color: #2E3440; }
-
-.isDarkMode .message-content.frame.message-frame {
-  background: white;
-  color: black; }
-
-.isDarkMode .block-info-standard, .isDarkMode .bodyDecrypted blockquote {
-  border-color: #5E81AC; }
-
-.isDarkMode .squireDropdown-item-label {
-  color: #ECEFF4; }
-
-.isDarkMode .squireToolbar-action-color {
-  background: transparent; }
-
-.isDarkMode .angular-squire-iframe body {
-  color: #ECEFF4;
-  background: #39404f; }
-  .isDarkMode .angular-squire-iframe body a {
-    color: #5E81AC; }
-
-.isDarkMode .plaintext-editor {
-  color: #ECEFF4; }
-
-.isDarkMode .pm-button, .isDarkMode .pm-button--info, .isDarkMode .pm-button--redborder {
-  background: #2E3440;
-  border-color: #434c5e;
-  color: #ECEFF4; }
-
-.isDarkMode .message-attachmentInfo {
-  border-color: #434c5e; }
-
-.isDarkMode .is-hover.pm-button--info, .isDarkMode .is-hover.pm-button--redborder,
-.isDarkMode .pm-button--info:focus, .isDarkMode .pm-button--info:focus-within,
-.isDarkMode .pm-button--info:hover, .isDarkMode .pm-button--redborder:focus,
-.isDarkMode .pm-button--redborder:focus-within, .isDarkMode .pm-button--redborder:hover,
-.isDarkMode .pm-button.is-hover, .isDarkMode .pm-button:focus-within,
-.isDarkMode .pm-button:hover:not(.pm-button--primary) {
-  color: #5E81AC; }
-
-.isDarkMode .pm-button:focus {
-  color: #ECEFF4; }
-
-.isDarkMode .is-disabled.pm-button--info,
-.isDarkMode .is-disabled.pm-button--redborder,
-.isDarkMode .pm-button--info[disabled],
-.isDarkMode .pm-button--redborder[disabled],
-.isDarkMode .pm-button.is-disabled,
-.isDarkMode .pm-button[disabled] {
-  background: #434c5e; }
-
-.isDarkMode .is-active.pm-button--info,
-.isDarkMode .is-active.pm-button--redborder,
-.isDarkMode .pm-button--info:not(div):active,
-.isDarkMode .pm-button--redborder:not(div):active,
-.isDarkMode .pm-button.is-active, .isDarkMode .pm-button:not(div):active {
-  background: #434c5e;
-  color: #5E81AC; }
-
-.isDarkMode .dropDown-content {
-  background: #2E3440;
-  color: #ECEFF4; }
-  .isDarkMode .dropDown-content button {
-    color: #ECEFF4; }
-  .isDarkMode .dropDown-content .elementsSelector-btn-action,
-  .isDarkMode .dropDown-content .dropDown-item:hover {
-    color: #ECEFF4; }
-  .isDarkMode .dropDown-content .dropDown-item:hover {
-    background: #39404f !important; }
-  .isDarkMode .dropDown-content .dropDown-item + .dropDown-item {
-    border-top: 1px solid #434c5e; }
-  .isDarkMode .dropDown-content .dropDown-item .color-global-grey {
-    color: #ECEFF4; }
-
-.isDarkMode .dropDown .dropDown-content::before, .isDarkMode .dropDown .dropDown-content::after {
-  border-bottom-color: #2E3440; }
-
-.isDarkMode .dropDown--right-bottom::before {
-  border-right-color: #2E3440; }
-
-.isDarkMode .dropDown--right-bottom .dropDown-content::before, .isDarkMode .dropDown--right-bottom .dropDown-content::after {
-  background: #2E3440; }
-
-.isDarkMode .dropDown--bottom-right .dropDown-content::before, .isDarkMode .dropDown--bottom-right .dropDown-content::after {
-  background: #2E3440; }
-
-.isDarkMode .dropDown--bottom-left::before,
-.isDarkMode .dropDown--bottom-right::before,
-.isDarkMode .dropDown--bottom::before {
-  border-bottom-color: #434c5e; }
-
-.isDarkMode .dropDown--bottom-right {
-  border: 1px solid #434c5e; }
-
-.isDarkMode .pm-field-icon-container[type="search"], .isDarkMode .pm-field[type="search"] {
-  background-color: #39404f; }
-
-.isDarkMode .dropDown-contentInner {
-  background-color: #2E3440; }
-  .isDarkMode .dropDown-contentInner::before, .isDarkMode .dropDown-contentInner::after {
-    background-color: #2E3440; }
-  .isDarkMode .dropDown-contentInner .dropDown-item span {
-    color: #ECEFF4 !important; }
-
-.isDarkMode .searchbox-field[type="search"]:not(#global_search) {
-  background: #ECEFF4;
-  color: #2E3440; }
-
-.isDarkMode .link:active, .isDarkMode .link:focus, .isDarkMode .link:hover,
-.isDarkMode a:active, .isDarkMode a:focus, .isDarkMode a:hover,
-.isDarkMode .pm-button--link:hover,
-.isDarkMode .composerInputMeta-label:hover {
-  color: #6f8eb5; }
-
-.isDarkMode .pm-modal, .isDarkMode .pm-modalContentInner {
-  background-color: #2E3440;
-  color: #ECEFF4; }
-  .isDarkMode .pm-modal::before, .isDarkMode .pm-modal::after, .isDarkMode .pm-modalContentInner::before, .isDarkMode .pm-modalContentInner::after {
-    background-color: #2E3440; }
-  .isDarkMode .pm-modal .labelColorSelector-item-mask, .isDarkMode .pm-modalContentInner .labelColorSelector-item-mask {
-    border: 2px solid #4e586d; }
-
-.isDarkMode .pm-button--primaryborder, .isDarkMode .pm-button-blueborder {
-  border-color: #5E81AC;
-  color: #5E81AC;
-  background-color: #39404f;
-  transition: background-color .2s ease-in-out; }
-
-.isDarkMode .is-hover.pm-button--primaryborder, .isDarkMode .pm-button--primaryborder:focus,
-.isDarkMode .pm-button--primaryborder:focus-within, .isDarkMode .pm-button--primaryborder:hover,
-.isDarkMode .pm-button-blueborder.is-hover, .isDarkMode .pm-button-blueborder:focus,
-.isDarkMode .pm-button-blueborder:focus-within, .isDarkMode .pm-button-blueborder:hover {
-  border-color: #5E81AC;
-  color: #5E81AC;
-  background-color: #2c323d; }
-
-.isDarkMode .scrollshadow-static {
-  background: #2E3440; }
-
-.isDarkMode .pm-field, .isDarkMode .pm-field-icon-container,
-.isDarkMode .focus.pm-field-icon-container, .isDarkMode .pm-field-icon-container:focus,
-.isDarkMode .pm-field-icon-container:focus-within, .isDarkMode .pm-field.focus,
-.isDarkMode .pm-field:focus, .isDarkMode .pm-field:focus-within,
-.isDarkMode .composerInputMeta-overlay-fakefield,
-.isDarkMode .composerInputMeta-autocomplete {
-  color: #ECEFF4;
-  background-color: #39404f; }
-  .isDarkMode .pm-field::placeholder, .isDarkMode .pm-field-icon-container::placeholder,
-  .isDarkMode .focus.pm-field-icon-container::placeholder, .isDarkMode .pm-field-icon-container:focus::placeholder,
-  .isDarkMode .pm-field-icon-container:focus-within::placeholder, .isDarkMode .pm-field.focus::placeholder,
-  .isDarkMode .pm-field:focus::placeholder, .isDarkMode .pm-field:focus-within::placeholder,
-  .isDarkMode .composerInputMeta-overlay-fakefield::placeholder,
-  .isDarkMode .composerInputMeta-autocomplete::placeholder {
-    color: #dce1eb; }
-
-.isDarkMode .composerInputMeta-autocomplete input {
-  color: #ECEFF4;
-  background-color: #39404f; }
-  .isDarkMode .composerInputMeta-autocomplete input::placeholder {
-    color: #dce1eb; }
-
-.isDarkMode select.pm-field, .isDarkMode select.pm-field-icon-container {
-  background-color: #39404f;
-  color: #ECEFF4; }
-
-.isDarkMode .storageProgress-content.dropDown-content--rightbottom::before {
-  border-right-color: #2E3440; }
-
-.isDarkMode .sticky-title {
-  background: #323946; }
-
-.isDarkMode .bg-global-highlight {
-  background-color: #2E3440; }
-
-.isDarkMode .bg-white-dm {
-  background-color: #39404f; }
-
-.isDarkMode .main-area, .isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar,
-.isDarkMode .main-area--withToolbar--noHeader,
-.isDarkMode [class*="block-info-"] {
-  color: #ECEFF4; }
-
-.isDarkMode .main-area, .isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar, .isDarkMode .main-area--withToolbar--noHeader {
-  background: #2E3440; }
-
-.isDarkMode .context-bar {
-  background: #2E3440; }
-
-.isDarkMode .subnav {
-  background: #39404f; }
-  .isDarkMode .subnav .link, .isDarkMode .subnav a {
-    color: #5E81AC; }
-  .isDarkMode .subnav .link:active, .isDarkMode .subnav .link:focus, .isDarkMode .subnav .link:hover, .isDarkMode .subnav a:active, .isDarkMode .subnav a:focus, .isDarkMode .subnav a:hover {
-    color: #6f8eb5; }
-
-.isDarkMode .pm-toggle-label {
-  border-color: #434c5e;
-  background: #39404f; }
-  .isDarkMode .pm-toggle-label::before {
-    background: #2E3440; }
-  .isDarkMode .pm-toggle-label .pm-toggle-label-img {
-    fill: #ECEFF4; }
-
-.isDarkMode .pm-plans-table-row--highlighted {
-  background-color: #2E3440; }
-
-.isDarkMode .pm-checkbox-fakecheck,
-.isDarkMode .pm-radio-fakeradio {
-  background: transparent; }
-
-.isDarkMode [class*="icon-"].color-primary {
-  color: #5E81AC; }
-
-.isDarkMode .color-global-grey-dm {
-  color: #5E81AC; }
+:root {
+  --searchbox-background-color: #3b4252;
+  --searchbox-text-color: #eceff4 !important;
+  --optional-sidebar-background-color: #2e3440;
+  --optional-email-item-unread-icon-background-color: #1d2128;
+  --optional-email-item-unread-icon-text-color: #eceff4;
+}
+
+.meter-bar-thumb, .used-space {
+  --signal-success: #5e81ac;
+}
\ No newline at end of file
diff --git a/themes/ochin/ochin.css b/themes/ochin/ochin.css
index 8ef0ee4..e2a1c31 100644
--- a/themes/ochin/ochin.css
+++ b/themes/ochin/ochin.css
@@ -1,746 +1,274 @@
 /*! =========================================== *
  * OCHIN
- * Version: v4.0.0-beta.33
+ * Version: v4.0.8
  * Author: Cristiano Almeida
  * Website: https://www.csalmeida.com
  * Twitter: @_csalmeida
  * =========================================== */
+:root,
+.ui-standard {
+  --primary: #a8e576;
+  --primary-contrast: white;
+  --signal-danger: #ed4c51;
+  --signal-danger-hover: #f7595e;
+  --signal-danger-active: #ff666b;
+  --signal-danger-contrast: white;
+  --signal-warning: #f5930a;
+  --signal-warning-hover: #f5a716;
+  --signal-warning-active: #f5b922;
+  --signal-warning-contrast: black;
+  --signal-success: #349172;
+  --signal-success-hover: #339c79;
+  --signal-success-active: #31a67f;
+  --signal-success-contrast: white;
+  --signal-info: #2c89db;
+  --signal-info-hover: #3491e3;
+  --signal-info-active: #3d99eb;
+  --signal-info-contrast: white;
+  --text-norm: white;
+  --text-weak: #a4a9b5;
+  --text-hint: #696f7d;
+  --text-disabled: #575d6b;
+  --text-invert: #262a33;
+  --field-norm: #e6eaf0;
+  --field-hover: #9ae161;
+  --field-disabled: #464b58;
+  --border-norm: #232a34;
+  --border-weak: #29323d;
+  --background-norm: #333e4c !important;
+  --background-weak: #3d4a5b;
+  --background-strong: #1f252d;
+  --interaction-norm: #a8e576;
+  --interaction-norm-hover: #ace67d;
+  --interaction-norm-active: #b1e884;
+  --interaction-norm-contrast: white;
+  --interaction-weak: #2d3743 !important;
+  --interaction-weak-hover: #29323d;
+  --interaction-weak-active: #696f7d;
+  --interaction-default: transparent;
+  --interaction-default-hover: rgba(87, 93, 107, 0.2);
+  --interaction-default-active: rgba(87, 93, 107, 0.3);
+  --shadow-norm-opacity: 0.32;
+  --shadow-lifted-opacity: 0.4;
+  --backdrop-norm: rgba(0, 0, 0, 0.32);
+  --optional-scrollbar-thumb-color: #464b58;
+  --optional-scrollbar-thumb-hover-color: #575d6b;
+  --optional-email-item-read-background-color: #1a1d24;
+  --optional-email-item-read-text-color: var(--text-weak);
+  --optional-email-item-selected-background-color: #93b776;
+}
+
+.ui-prominent,
+.ui-standard,
 :root {
-  --main-bg-color: #333E4C;
-  --secondary-bg-color: #29323d;
-  --bgcolor-searchbox-field: #1A2533;
-  --bgcolor-spacebar: rgba(255, 255, 255, 0.1);
-  --bgcolor-aside-link: rgba(0, 0, 0, 0.3);
-  --bgcolor-toolbar: #3d4a5b;
-  --fillcolor-logo: #f6f7fa;
-  --fillcolor-icons: #fff;
-  --color-nav-link: #C2C5CA;
-  --color-nav-active: #A8E576;
-  --color-standard-text: #fff;
-  --boxshadow-main: none; }
+  --selection-background-color: var(
+    --optional-selection-background-color,
+    var(--primary)
+  );
+  --selection-text-color: var(
+    --optional-selection-text-color,
+    var(--primary-contrast)
+  );
+  --header-background-color: #333e4c !important;
+  --sidebar-background-color: var(
+    --optional-sidebar-background-color,
+    var(--background-norm)
+  );
+  --navigation-current-item-marker-color: var(
+    --optional-navigation-current-item-marker-color,
+    var(--interaction-norm)
+  );
+  --navigation-current-item-background-color: var(
+    --optional-navigation-current-item-background-color,
+    var(--interaction-default-hover)
+  );
+  --navigation-current-item-text-color: var(
+    --optional-navigation-current-item-text-color,
+    var(--text-norm)
+  );
+  --main-box-shadow: var(--optional-main-box-shadow, none);
+  --main-border-color: var(--optional-main-border-color, var(--border-norm));
+  --navigation-item-count-background-color: var(
+    --optional-navigation-item-count-background-color,
+    var(--primary)
+  );
+  --navigation-item-count-text-color: var(
+    --optional-navigation-item-count-text-color,
+    var(--primary-contrast)
+  );
+  --toolbar-background-color: var(
+    --optional-toolbar-background-color,
+    var(--background-weak)
+  );
+  --toolbar-border-bottom-color: var(
+    --optional-toolbar-border-bottom-color,
+    var(--border-norm)
+  );
+  --toolbar-text-color: var(--optional-toolbar-text-color, var(--text-norm));
+  --toolbar-separator-color: var(
+    --optional-toolbar-separator-color,
+    var(--border-norm)
+  );
+  --scrollbar-thumb-color: var(
+    --optional-scrollbar-thumb-color,
+    hsla(0, 0%, 50%, 0.25)
+  );
+  --scrollbar-thumb-hover-color: var(
+    --optional-scrollbar-thumb-hover-color,
+    hsla(0, 0%, 50%, 0.5)
+  );
+  --tooltip-background-color: var(--optional-tooltip-background-color, #000);
+  --tooltip-text-color: var(--optional-tooltip-text-color, #fff);
+  --email-item-unread-background-color: var(
+    --optional-email-item-unread-background-color,
+    var(--background-norm)
+  );
+  --email-item-unread-text-color: var(
+    --optional-email-item-unread-text-color,
+    var(--text-norm)
+  );
+  --email-item-unread-icon-background-color: var(
+    --optional-email-item-unread-icon-background-color,
+    var(--background-strong)
+  );
+  --email-item-unread-icon-text-color: var(
+    --optional-email-item-unread-icon-text-color,
+    inherit
+  );
+  --email-item-read-background-color: #3d4a5b;
+  --email-item-read-text-color: #e6eaf0;
+  --email-item-read-icon-background-color: var(
+    --optional-email-item-read-icon-background-color,
+    var(--background-strong)
+  );
+  --email-item-read-icon-text-color: var(
+    --optional-email-item-read-icon-text-color,
+    inherit
+  );
+  --email-item-selected-background-color: var(
+    --optional-email-item-selected-background-color,
+    var(--interaction-norm)
+  );
+  --email-item-selected-text-color: var(
+    --optional-email-item-selected-text-color,
+    var(--interaction-norm-contrast)
+  );
+  --email-item-selected-icon-background-color: var(
+    --optional-email-item-selected-icon-background-color,
+    var(--interaction-norm-hover)
+  );
+  --email-item-selected-icon-text-color: var(
+    --optional-email-item-selected-icon-text-color,
+    inherit
+  );
+  --email-item-focus-marker-color: var(
+    --optional-email-item-focus-marker-color,
+    var(--interaction-norm)
+  );
+  --email-item-selected-focus-marker-color: var(
+    --optional-email-item-selected-focus-marker-color,
+    var(--interaction-norm-hover)
+  );
+  --email-message-view-background-color: var(
+    --optional-email-message-view-background-color,
+    var(--background-norm)
+  );
+  --field-background-color: var(
+    --optional-field-background-color,
+    var(--background-norm)
+  );
+  --field-text-color: var(--optional-field-text-color, var(--text-norm));
+  --field-placeholder-color: var(
+    --optional-field-placeholder-color,
+    var(--text-hint)
+  );
+  --field-hover-background-color: var(
+    --optional-field-hover-background-color,
+    var(--background-norm)
+  );
+  --field-hover-text-color: var(
+    --optional-field-hover-text-color,
+    var(--text-norm)
+  );
+  --field-focus-background-color: var(
+    --optional-field-focus-background-color,
+    var(--background-norm)
+  );
+  --field-focus-text-color: var(
+    --optional-field-focus-text-color,
+    var(--text-norm)
+  );
+  --field-disabled-background-color: var(
+    --optional-field-disabled-background-color,
+    var(--background-norm)
+  );
+  --field-disabled-text-color: var(
+    --optional-field-disabled-text-color,
+    var(--text-disabled)
+  );
+  --select-background-color: var(
+    --optional-select-background-color,
+    var(--field-background-color)
+  );
+  --favorite-icon-color: var(--optional-favorite-icon-color, orange);
+  --mark-background-color: var(--optional-mark-background-color, #ff0);
+  --mark-text-color: var(--optional-mark-text-color, #000);
+  --mark-font-weight: var(--optional-mark-font-weight, normal);
+  --modal-background-color: var(--optional-modal-background-color);
+  --modal-text-color: var(--optional-modal-text-color);
+  --file-preview-text-color: var(
+    --optional-file-preview-text-color,
+    var(--text-norm)
+  );
+  --file-preview-background-color: var(
+    --optional-file-preview-background-color,
+    var(--background-norm)
+  );
+  --border-radius: var(--optional-border-radius, 3);
+  --font-family: var(
+    --optional-font-family,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen-Sans,
+    Ubuntu,
+    Cantarell,
+    Helvetica Neue,
+    sans-serif
+  );
+}
+
+.button-solid-norm {
+  --button-default-background-color: #a8e576;
+  --button-hover-background-color: #b1e884;
+  --button-active-background-color: #b1e884;
+  --button-default-text-color: #e6eaf0;
+  --button-hover-text-color: var(--interaction-norm-contrast);
+  --button-active-text-color: var(--interaction-norm-contrast);
+}
 
-html:not(.editor-squire-iframe) body {
-  background: #333E4C;
-  color: #e6eaf0; }
-
-.pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue {
-  color: #e6eaf0;
-  background-color: #A8E576;
-  border: 1px solid #A8E576;
-  transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; }
-
-.is-hover.pm-button--error, .is-hover.pm-button--primary, .is-hover.pm-button--warning, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover {
-  color: #C2C5CA;
-  box-shadow: 0 0 0.35714em 0 rgba(0, 0, 0, 0.2);
-  background: #9ae161;
-  border: 1px solid #9ae161; }
-
-.pm-button--primaryborder-dark, .pm-button-blueborder-dark {
-  background: #333E4C;
-  border-color: #A8E576;
-  color: #A8E576; }
-
-.is-active.pm-button--primaryborder-dark, .is-hover.pm-button--primaryborder-dark, .pm-button--primaryborder-dark:focus, .pm-button--primaryborder-dark:focus-within, .pm-button--primaryborder-dark:hover, .pm-button--primaryborder-dark:not(div):active, .pm-button-blueborder-dark.is-active, .pm-button-blueborder-dark.is-hover, .pm-button-blueborder-dark:focus, .pm-button-blueborder-dark:focus-within, .pm-button-blueborder-dark:hover, .pm-button-blueborder-dark:not(div):active {
-  background: #333E4C;
-  border-color: #b6e98b;
-  color: #b6e98b; }
-
-.pm-button--primaryborder, .pm-button-blueborder {
-  border-color: #9ae161;
-  color: #9ae161; }
-
-.is-hover.pm-button--primaryborder, .pm-button--primaryborder:focus, .pm-button--primaryborder:focus-within, .pm-button--primaryborder:hover, .pm-button-blueborder.is-hover, .pm-button-blueborder:focus, .pm-button-blueborder:focus-within, .pm-button-blueborder:hover {
-  border-color: #9ae161;
-  color: #9ae161; }
-
-.is-disabled.pm-button--error, .is-disabled.pm-button--error.pm-button--info, .is-disabled.pm-button--error.pm-button--redborder, .is-disabled.pm-button--primary, .is-disabled.pm-button--primary.pm-button--info, .is-disabled.pm-button--primary.pm-button--redborder, .is-disabled.pm-button--warning, .is-disabled.pm-button--warning.pm-button--info, .is-disabled.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info[disabled], .pm-button--error.pm-button--redborder[disabled], .pm-button--error[disabled], .pm-button--primary.pm-button--info[disabled], .pm-button--primary.pm-button--redborder[disabled], .pm-button--primary[disabled], .pm-button--warning.pm-button--info[disabled], .pm-button--warning.pm-button--redborder[disabled], .pm-button--warning[disabled], .pm-button-blue.is-disabled, .pm-button-blue.is-disabled.pm-button--info, .pm-button-blue.is-disabled.pm-button--redborder, .pm-button-blue.pm-button--info[disabled], .pm-button-blue.pm-button--redborder[disabled], .pm-button-blue[disabled], .pm-button.is-disabled.pm-button--error, .pm-button.is-disabled.pm-button--primary, .pm-button.is-disabled.pm-button--warning, .pm-button.pm-button--error[disabled], .pm-button.pm-button--primary[disabled], .pm-button.pm-button--warning[disabled], .pm-button.pm-button-blue.is-disabled, .pm-button.pm-button-blue[disabled] {
-  background-color: white;
-  border-color: #b6e98b;
-  color: #8ddd4b; }
-
-.bg-primary {
-  background-color: #3d4a5b; }
-
-.color-primary {
-  color: #A8E576; }
-
-.navigation__counterItem {
-  background: #8ddd4b;
-  color: white; }
-
-.item-container-row:hover::before, .item-container:hover::before {
-  border-color: #c3eda1; }
-
-.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon {
-  border-color: #ecf9e1; }
-
-.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon {
-  fill: #8ddd4b; }
-
-.circle-chart__circle {
-  stroke: #A8E576; }
-
-#dropdown-0 .dropDown-content::after, #dropdown-0 .dropDown-content::before, #dropdown-0.dropDown:not(.dropDown--noCaret)::before,
-#dropdown-0 .dropDown-content {
-  background: #333E4C; }
-
-.dropDown:not(.dropDown--noCaret)::before,
-.dropDown::after,
-.dropDown-logout-initials,
-.dropDown-item-hr {
-  border-color: #3d4a5b !important; }
-
-#global_search.searchbox-field[type="search"] {
-  background-color: #1A2533;
-  color: #e6eaf0; }
-
-.searchbox-advanced-search-button:active,
-.searchbox-advanced-search-button:focus,
-.searchbox-advanced-search-button:hover {
-  background-color: #333E4C; }
-
-.topnav-link, .topnav-link > .topnav-icon {
-  color: #C2C5CA;
-  transition: color .2s ease-in-out; }
-
-.topnav-link:active, .topnav-link:focus,
-.topnav-link:hover, .topnav-link[aria-current="true"] {
-  color: #A8E576; }
-
-.topnav-link:active > .topnav-icon, .topnav-link:focus > .topnav-icon,
-.topnav-link:hover > .topnav-icon, .topnav-link[aria-current=true] > .topnav-icon {
-  color: #A8E576; }
-
-.protonmail .text-purple {
-  color: #333E4C !important; }
-
-.protonmail .text-purple:hover {
-  color: #8ddd4b !important; }
-
-.dropDown-item-button:focus, .dropDown-item-button:hover, .dropDown-item-link:focus, .dropDown-item-link:hover {
-  color: #A8E576; }
-
-#pm_composer .composer .composerHeader-container,
-.composerInputMeta-overlay .composerHeader-container {
-  background: #3d4a5b; }
-
-#pm_composer .composer .fill {
-  background: #fff; }
-
-.conversation.marked::before {
-  background: #A8E576; }
-
-.item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active) {
-  background: #fff; }
-
-.item-container.selected, .item-container-row.selected,
-.item-container.active, .item-is-selected {
-  background: rgba(168, 229, 118, 0.1); }
-
-.selectBoxElement-container:hover .item-icon {
-  background-color: transparent;
-  border: 1px solid #9ae161; }
-  .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon {
-    fill: #9ae161; }
-
-.selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-  background-color: #9ae161;
-  border-color: #9ae161; }
-
-.item-checkbox:checked + .item-icon {
-  background-color: #A8E576;
-  border-color: #A8E576; }
-
-.item-checkbox + .item-icon:hover {
-  background-color: #9ae161;
-  border-color: #9ae161; }
-
-.item-checkbox + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #C2C5CA; }
-
-.item-checkbox:checked + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #C2C5CA; }
-
-.starbutton {
-  fill: #A8E576 !important;
-  opacity: 0.7; }
-
-.starbutton:focus, .starbutton:hover {
-  fill: #A8E576; }
-
-.autocompleteEmailsItem-icon svg.encryptionIcon {
-  fill: #9ae161; }
-
-.encryptionStatus .color-pm-blue svg {
-  color: #9ae161;
-  fill: #9ae161; }
-
-.encryptionStatus .color-global-grey-dm svg {
-  color: black; }
-
-.color-pm-blue {
-  color: #A8E576; }
-
-.pm-radio:checked + .pm-radio-fakeradio::before {
-  background: #A8E576; }
-
-.block-info-standard {
-  border-color: #1b68c6; }
-
-.block-info-standard-warning {
-  border-color: #ffaa00; }
-
-.block-info-standard-error {
-  border-color: #d62646; }
-
-.link, a, .pm-button--link {
-  color: #8ddd4b;
-  transition: color .2s ease-in-out; }
-
-.link:active, .link:focus, .link:hover,
-a:active, a:focus, a:hover,
-.pm-button--link:hover {
-  color: #8ddd4b; }
-
-.pm-button--primary {
-  background-color: #A8E576;
-  border-color: #A8E576; }
-
-.pm-button--link, .pm-button.pm-button--link {
-  color: #A8E576; }
-
-.pm-button--error, .pm-button--error.pm-button--info, .pm-button--error.pm-button--redborder, .pm-button--primary, .pm-button--primary.pm-button--info, .pm-button--primary.pm-button--redborder, .pm-button--warning, .pm-button--warning.pm-button--info, .pm-button--warning.pm-button--redborder, .pm-button-blue, .pm-button-blue.pm-button--info, .pm-button-blue.pm-button--redborder, .pm-button.pm-button--error, .pm-button.pm-button--primary, .pm-button.pm-button--warning, .pm-button.pm-button-blue {
-  background-color: #A8E576;
-  border-color: #A8E576; }
-
-.is-hover.pm-button--error, .is-hover.pm-button--error.pm-button--info, .is-hover.pm-button--error.pm-button--redborder, .is-hover.pm-button--primary, .is-hover.pm-button--primary.pm-button--info, .is-hover.pm-button--primary.pm-button--redborder, .is-hover.pm-button--warning, .is-hover.pm-button--warning.pm-button--info, .is-hover.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:focus, .pm-button--error.pm-button--info:focus-within, .pm-button--error.pm-button--info:hover, .pm-button--error.pm-button--redborder:focus, .pm-button--error.pm-button--redborder:focus-within, .pm-button--error.pm-button--redborder:hover, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary.pm-button--info:focus, .pm-button--primary.pm-button--info:focus-within, .pm-button--primary.pm-button--info:hover, .pm-button--primary.pm-button--redborder:focus, .pm-button--primary.pm-button--redborder:focus-within, .pm-button--primary.pm-button--redborder:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning.pm-button--info:focus, .pm-button--warning.pm-button--info:focus-within, .pm-button--warning.pm-button--info:hover, .pm-button--warning.pm-button--redborder:focus, .pm-button--warning.pm-button--redborder:focus-within, .pm-button--warning.pm-button--redborder:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue.is-hover.pm-button--info, .pm-button-blue.is-hover.pm-button--redborder, .pm-button-blue.pm-button--info:focus, .pm-button-blue.pm-button--info:focus-within, .pm-button-blue.pm-button--info:hover, .pm-button-blue.pm-button--redborder:focus, .pm-button-blue.pm-button--redborder:focus-within, .pm-button-blue.pm-button--redborder:hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover, .pm-button.is-hover.pm-button--error, .pm-button.is-hover.pm-button--primary, .pm-button.is-hover.pm-button--warning, .pm-button.pm-button--error:focus, .pm-button.pm-button--error:focus-within, .pm-button.pm-button--error:hover, .pm-button.pm-button--primary:focus, .pm-button.pm-button--primary:focus-within, .pm-button.pm-button--primary:hover, .pm-button.pm-button--warning:focus, .pm-button.pm-button--warning:focus-within, .pm-button.pm-button--warning:hover, .pm-button.pm-button-blue.is-hover, .pm-button.pm-button-blue:focus, .pm-button.pm-button-blue:focus-within, .pm-button.pm-button-blue:hover {
-  background: #9ae161;
-  border: 1px solid #9ae161; }
-
-.is-active.pm-button--error, .is-active.pm-button--error.pm-button--info, .is-active.pm-button--error.pm-button--redborder, .is-active.pm-button--primary, .is-active.pm-button--primary.pm-button--info, .is-active.pm-button--primary.pm-button--redborder, .is-active.pm-button--warning, .is-active.pm-button--warning.pm-button--info, .is-active.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:not(div):active, .pm-button--error.pm-button--redborder:not(div):active, .pm-button--error:not(div):active, .pm-button--primary.pm-button--info:not(div):active, .pm-button--primary.pm-button--redborder:not(div):active, .pm-button--primary:not(div):active, .pm-button--warning.pm-button--info:not(div):active, .pm-button--warning.pm-button--redborder:not(div):active, .pm-button--warning:not(div):active, .pm-button-blue.is-active, .pm-button-blue.is-active.pm-button--info, .pm-button-blue.is-active.pm-button--redborder, .pm-button-blue.pm-button--info:not(div):active, .pm-button-blue.pm-button--redborder:not(div):active, .pm-button-blue:not(div):active, .pm-button.is-active.pm-button--error, .pm-button.is-active.pm-button--primary, .pm-button.is-active.pm-button--warning, .pm-button.pm-button--error:not(div):active, .pm-button.pm-button--primary:not(div):active, .pm-button.pm-button--warning:not(div):active, .pm-button.pm-button-blue.is-active, .pm-button.pm-button-blue:not(div):active {
-  background: #8ddd4b;
-  border-color: #8ddd4b; }
-
-.pm-button-blueborder {
-  box-shadow: none;
-  border-color: #333E4C;
-  color: #333E4C;
-  transition: color .2s ease-in-out, border-color .2s ease-in-out; }
-
-.pm-button-blueborder:hover {
-  box-shadow: none;
-  border-color: #8ddd4b;
-  color: #8ddd4b; }
-
-.is-active.pm-button--primaryborder,
-.pm-button--primaryborder:not(div):active,
-.pm-button-blueborder.is-active,
-.pm-button-blueborder:not(div):active {
-  border-color: #8ddd4b;
-  color: #8ddd4b;
-  background: transparent; }
-
-.pm-group-buttons > .pm-group-button.pm-button--primary {
-  border-color: #8ddd4b; }
-
-.bg-pm-blue-gradient .pm-button--transparent:hover {
-  color: #e6eaf0;
-  border-color: #e6eaf0; }
-
-.pm-toggle-checkbox:checked + .pm-toggle-label:before {
-  background: #A8E576;
-  border-color: #A8E576; }
-
-.composer-title-bar {
-  background: #333E4C; }
-
-.color-global-light {
-  color: #e6eaf0; }
-
-.angular-squire-iframe body a {
-  color: #A8E576; }
-
-.fill-pm-blue,
-.message-attachmentIcon .file-outer-icon.is-embedded {
-  fill: #A8E576; }
-
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2) {
-  border-color: #A8E576;
-  color: #A8E576; }
-  .pm-table--highlight[data-plan-number="1"] tr th:nth-child(2)::before {
-    background-color: #A8E576; }
-
-.pm-table--highlight[data-plan-number="1"] tr td:nth-child(2),
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2),
-.pm-table--highlight[data-plan-number="1"] tr:last-child td:nth-child(2) {
-  border-color: #A8E576; }
-
-.pm-simple-table-row-th .fill-primary {
-  fill: #A8E576; }
-
-.pm-checkbox-fakecheck, .pm-radio-fakeradio {
-  border-color: #333E4C; }
-  .pm-checkbox-fakecheck [class*="icon-"], .pm-radio-fakeradio [class*="icon-"] {
-    fill: #A8E576; }
-
-[class*="icon-"].color-primary {
-  color: #333E4C; }
-  [class*="icon-"].color-primary:hover {
-    color: #8ddd4b; }
-
-.pm-field, .editor,
-.editor-toolbar,
-.border-bottom,
-.border-top,
-.message-container.is-opened > .message-header {
-  border-color: #1f252d; }
-
-.badgeLabel, .badgeLabel-primary {
-  border-color: #8ddd4b; }
-
-.badgeLabel,
-.badgeLabel-blue,
-.badgeLabel-primary,
-.bg-pm-blue {
-  background-color: #8ddd4b; }
-
-body {
-  scrollbar-color: #47576b #374352; }
-
-::-webkit-scrollbar {
-  width: 16px; }
-  ::-webkit-scrollbar-track {
-    background: #374352; }
-  ::-webkit-scrollbar-thumb {
-    background: #47576b;
-    box-shadow: inset 0 0 0 4px #374352;
-    border-radius: 16px; }
-
-.isDarkMode .bordered,
-.isDarkMode .bordered-container:not([class*="composerInputMeta-"]),
-.isDarkMode .breadcrumb-container {
-  border-color: #47576b; }
-
-.isDarkMode .dropDown-content::after, .isDarkMode .dropDown-content::before,
-.isDarkMode .dropDown:not(.dropDown--noCaret)::before,
-.isDarkMode .dropDown-content {
-  background: #333E4C;
-  border: #333E4C; }
-
-.isDarkMode .dropDown-item-button:focus, .isDarkMode .dropDown-item-button:focus-within,
-.isDarkMode .dropDown-item-button:hover, .isDarkMode .dropDown-item-link:focus,
-.isDarkMode .dropDown-item-link:focus-within, .isDarkMode .dropDown-item-link:hover {
-  background-color: #29323d; }
-
-.isDarkMode .dropDown-item-button.is-disabled, .isDarkMode .dropDown-item-button[disabled],
-.isDarkMode .dropDown-item-link.is-disabled, .isDarkMode .dropDown-item-link[disabled] {
-  background-color: #2f3946; }
-
-.isDarkMode .squireToolbar-select-list {
-  background: #333E4C;
-  color: #e6eaf0; }
-
-.isDarkMode .squireToolbar-dropdown-divider {
-  background-color: #47576b; }
-
-.isDarkMode .squireToolbar-select-item:hover {
-  background: #2f3946; }
-
-.isDarkMode #pm_composer .composer,
-.isDarkMode .composerInputMeta-overlay {
-  background: #333E4C; }
-
-.isDarkMode #pm_composer .composer .fill {
-  background: #333E4C; }
-
-.isDarkMode .composer-body-container textarea {
-  background: #333E4C; }
-
-.isDarkMode .composer-addresses-item {
-  background: #29323d; }
-
-.isDarkMode .composer-addresses-autocomplete ul {
-  background: #29323d; }
-
-.isDarkMode .composer-addresses-autocomplete li[aria-selected="true"],
-.isDarkMode .composer-addresses-autocomplete li:hover {
-  background: #333E4C; }
-
-.isDarkMode .autocompleteEmails-item {
-  background-color: #2f3946;
-  border-color: #2f3946; }
-
-.isDarkMode .autocompleteEmails-label {
-  border-left: 1px solid #47576b;
-  border-right: 1px solid #47576b; }
-
-.isDarkMode .composerOptions-container.show {
-  background: #2f3946; }
-  .isDarkMode .composerOptions-container.show .shadow-container {
-    background: #333E4C;
-    color: #e6eaf0; }
-
-.isDarkMode .pm-button.pm-button--primary {
-  background: #8ddd4b;
-  color: #e6eaf0;
-  border-color: #8ddd4b; }
-
-.isDarkMode .pm-button.pm-button--primary:hover {
-  background: #A8E576;
-  color: #e6eaf0; }
-
-.isDarkMode .is-disabled.pm-button--error, .isDarkMode .is-disabled.pm-button--error.pm-button--info, .isDarkMode .is-disabled.pm-button--error.pm-button--redborder, .isDarkMode .is-disabled.pm-button--primary, .isDarkMode .is-disabled.pm-button--primary.pm-button--info, .isDarkMode .is-disabled.pm-button--primary.pm-button--redborder, .isDarkMode .is-disabled.pm-button--warning, .isDarkMode .is-disabled.pm-button--warning.pm-button--info, .isDarkMode .is-disabled.pm-button--warning.pm-button--redborder, .isDarkMode .pm-button--error.pm-button--info[disabled], .isDarkMode .pm-button--error.pm-button--redborder[disabled], .isDarkMode .pm-button--error[disabled], .isDarkMode .pm-button--primary.pm-button--info[disabled], .isDarkMode .pm-button--primary.pm-button--redborder[disabled], .isDarkMode .pm-button--primary[disabled], .isDarkMode .pm-button--warning.pm-button--info[disabled], .isDarkMode .pm-button--warning.pm-button--redborder[disabled], .isDarkMode .pm-button--warning[disabled], .isDarkMode .pm-button-blue.is-disabled, .isDarkMode .pm-button-blue.is-disabled.pm-button--info, .isDarkMode .pm-button-blue.is-disabled.pm-button--redborder, .isDarkMode .pm-button-blue.pm-button--info[disabled], .isDarkMode .pm-button-blue.pm-button--redborder[disabled], .isDarkMode .pm-button-blue[disabled], .isDarkMode .pm-button.is-disabled.pm-button--error, .isDarkMode .pm-button.is-disabled.pm-button--primary, .isDarkMode .pm-button.is-disabled.pm-button--warning, .isDarkMode .pm-button.pm-button--error[disabled], .isDarkMode .pm-button.pm-button--primary[disabled], .isDarkMode .pm-button.pm-button--warning[disabled], .isDarkMode .pm-button.pm-button-blue.is-disabled, .isDarkMode .pm-button.pm-button-blue[disabled] {
-  background-color: #2f3946;
-  border-color: #47576b;
-  color: #c6cfdd; }
-
-.isDarkMode .pm-button:not(.pm-button-blue):not(.pv-button-green):not(.pm-button--primary):not(.pm-button--primaryborderEvenInDarkMode):not(.pm-button--link):not(.pm-button--error):not(.pm-button--warning):not(.pm-button--redborder):not(.pm-button--primaryborder), .isDarkMode .pm-button--info {
-  color: #e6eaf0;
-  background-color: #333E4C;
-  border-color: #47576b; }
-
-.isDarkMode .pm-group-buttons > .pm-group-button.pm-button--primary {
-  border-color: #47576b; }
-
-.isDarkMode .pm-button-blueborder {
-  border-color: #A8E576;
-  color: #A8E576; }
-
-.isDarkMode .pm-button-blueborder:hover {
-  border-color: #b6e98b;
-  color: #b6e98b; }
-
-.isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:active, .isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:hover, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:active, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:hover {
-  background: #374352 !important; }
-
-.isDarkMode .squireToolbar-separator {
-  background: #3d4a5b; }
-
-.isDarkMode .composerTime-container,
-.isDarkMode [class*="composer-field"] {
-  color: #e6eaf0; }
-
-.isDarkMode .composerInputMeta-overlay-fakefield {
-  border-color: #e6eaf0; }
-
-.isDarkMode .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg {
-  color: white; }
-
-.isDarkMode .conversation {
-  border-color: #47576b; }
-
-.isDarkMode .main-area,
-.isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar,
-.isDarkMode .main-area--withToolbar--noHeader,
-.isDarkMode [class*="block-info-"] {
-  color: #e6eaf0; }
-
-.isDarkMode [class*="block-info"] {
-  background-color: #47576b;
-  color: #e6eaf0; }
-
-.isDarkMode .fill-global-grey {
-  fill: #A8E576; }
-
-.isDarkMode .starbutton {
-  fill: #0d0d0d; }
-
-.isDarkMode .bg-global-light, .isDarkMode kbd {
-  background: #333E4C; }
-
-.isDarkMode .item-container, .isDarkMode .item-container-row, .isDarkMode .contactsummary-container {
-  background: #333E4C; }
-
-.isDarkMode .items-column-list-inner, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer {
-  border-color: #47576b; }
-  .isDarkMode .items-column-list-inner .item-container, .isDarkMode .items-column-list-inner .item-container-row, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container-row {
-    border-color: #47576b; }
-
-.isDarkMode .item-container:not(.item-is-selected):not(.read):not(.active),
-.isDarkMode .item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active),
-.isDarkMode .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .isDarkMode .squireToolbar-container {
-  background: #3d4a5b; }
-
-.isDarkMode .item-container.active, .isDarkMode .item-is-selected {
-  background: #2f3946; }
-  .isDarkMode .item-container.active .flex-item-fluid, .isDarkMode .item-is-selected .flex-item-fluid {
-    color: #A8E576; }
-
-.isDarkMode .item-icon {
-  background-color: #333E4C;
-  border: 1px solid #d6dde6; }
-
-.isDarkMode .selectBoxElement-container:hover .item-icon {
-  background-color: #333E4C;
-  border: 1px solid #9ae161; }
-  .isDarkMode .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon {
-    fill: #9ae161; }
-
-.isDarkMode .selectBoxElement-container {
-  color: #e6eaf0; }
-
-.isDarkMode .selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-  background-color: #9ae161;
-  border-color: #9ae161; }
-
-.isDarkMode .item-checkbox + .item-icon:hover,
-.isDarkMode .item-checkbox:hover + .item-icon {
-  background-color: #29323d; }
-
-.isDarkMode .items-column-list,
-.isDarkMode .elementList-container-row {
-  background-color: #333E4C; }
-
-.isDarkMode .composer-container {
-  background: #3d4a5b; }
-
-.isDarkMode .message-header {
-  background-color: #3d4a5b; }
-
-.isDarkMode .view-column-detail {
-  background-color: #333E4C; }
-
-.isDarkMode details:first-child {
-  border-color: #47576b; }
-
-.isDarkMode .items-column-list,
-.isDarkMode .message-container,
-.isDarkMode .message-attachments {
-  border-color: #47576b; }
-
-.isDarkMode .message-container:not(.sent):not(.draft) .message-header.message-summary::before,
-.isDarkMode .message-header.is-inbound::before {
-  border-top: 1px solid #47576b;
-  border-left: 1px solid #47576b;
-  background-color: #3d4a5b; }
-
-.isDarkMode .message-infobox {
-  background-color: #333E4C; }
-
-.isDarkMode .message-content.frame.message-frame {
-  background: white;
-  color: black; }
-
-.isDarkMode .block-info-standard, .isDarkMode .bodyDecrypted blockquote {
-  border-color: #A8E576; }
-
-.isDarkMode .squireDropdown-item-label {
-  color: #e6eaf0; }
-
-.isDarkMode .squireToolbar-action-color {
-  background: transparent; }
-
-.isDarkMode .angular-squire-iframe body {
-  color: #e6eaf0;
-  background: #3d4a5b; }
-  .isDarkMode .angular-squire-iframe body a {
-    color: #A8E576; }
-
-.isDarkMode .plaintext-editor {
-  color: #e6eaf0; }
-
-.isDarkMode .pm-button, .isDarkMode .pm-button--info, .isDarkMode .pm-button--redborder {
-  background: #333E4C;
-  border-color: #47576b;
-  color: #e6eaf0; }
-
-.isDarkMode .message-attachmentInfo {
-  border-color: #47576b; }
-
-.isDarkMode .is-hover.pm-button--info, .isDarkMode .is-hover.pm-button--redborder,
-.isDarkMode .pm-button--info:focus, .isDarkMode .pm-button--info:focus-within,
-.isDarkMode .pm-button--info:hover, .isDarkMode .pm-button--redborder:focus,
-.isDarkMode .pm-button--redborder:focus-within, .isDarkMode .pm-button--redborder:hover,
-.isDarkMode .pm-button.is-hover, .isDarkMode .pm-button:focus-within,
-.isDarkMode .pm-button:hover:not(.pm-button--primary) {
-  color: #A8E576; }
-
-.isDarkMode .pm-button:focus {
-  color: #e6eaf0; }
-
-.isDarkMode .is-disabled.pm-button--info,
-.isDarkMode .is-disabled.pm-button--redborder,
-.isDarkMode .pm-button--info[disabled],
-.isDarkMode .pm-button--redborder[disabled],
-.isDarkMode .pm-button.is-disabled,
-.isDarkMode .pm-button[disabled] {
-  background: #47576b; }
-
-.isDarkMode .is-active.pm-button--info,
-.isDarkMode .is-active.pm-button--redborder,
-.isDarkMode .pm-button--info:not(div):active,
-.isDarkMode .pm-button--redborder:not(div):active,
-.isDarkMode .pm-button.is-active, .isDarkMode .pm-button:not(div):active {
-  background: #47576b;
-  color: #A8E576; }
-
-.isDarkMode .dropDown-content {
-  background: #333E4C;
-  color: #e6eaf0; }
-  .isDarkMode .dropDown-content button {
-    color: #e6eaf0; }
-  .isDarkMode .dropDown-content .elementsSelector-btn-action,
-  .isDarkMode .dropDown-content .dropDown-item:hover {
-    color: #e6eaf0; }
-  .isDarkMode .dropDown-content .dropDown-item:hover {
-    background: #3d4a5b !important; }
-  .isDarkMode .dropDown-content .dropDown-item + .dropDown-item {
-    border-top: 1px solid #47576b; }
-  .isDarkMode .dropDown-content .dropDown-item .color-global-grey {
-    color: #e6eaf0; }
-
-.isDarkMode .dropDown .dropDown-content::before, .isDarkMode .dropDown .dropDown-content::after {
-  border-bottom-color: #333E4C; }
-
-.isDarkMode .dropDown--right-bottom::before {
-  border-right-color: #333E4C; }
-
-.isDarkMode .dropDown--right-bottom .dropDown-content::before, .isDarkMode .dropDown--right-bottom .dropDown-content::after {
-  background: #333E4C; }
-
-.isDarkMode .dropDown--bottom-right .dropDown-content::before, .isDarkMode .dropDown--bottom-right .dropDown-content::after {
-  background: #333E4C; }
-
-.isDarkMode .dropDown--bottom-left::before,
-.isDarkMode .dropDown--bottom-right::before,
-.isDarkMode .dropDown--bottom::before {
-  border-bottom-color: #47576b; }
-
-.isDarkMode .dropDown--bottom-right {
-  border: 1px solid #47576b; }
-
-.isDarkMode .pm-field-icon-container[type="search"], .isDarkMode .pm-field[type="search"] {
-  background-color: #3d4a5b; }
-
-.isDarkMode .dropDown-contentInner {
-  background-color: #333E4C; }
-  .isDarkMode .dropDown-contentInner::before, .isDarkMode .dropDown-contentInner::after {
-    background-color: #333E4C; }
-  .isDarkMode .dropDown-contentInner .dropDown-item span {
-    color: #e6eaf0 !important; }
-
-.isDarkMode .searchbox-field[type="search"]:not(#global_search) {
-  background: #e6eaf0;
-  color: #333E4C; }
-
-.isDarkMode .link:active, .isDarkMode .link:focus, .isDarkMode .link:hover,
-.isDarkMode a:active, .isDarkMode a:focus, .isDarkMode a:hover,
-.isDarkMode .pm-button--link:hover,
-.isDarkMode .composerInputMeta-label:hover {
-  color: #b6e98b; }
-
-.isDarkMode .pm-modal, .isDarkMode .pm-modalContentInner {
-  background-color: #333E4C;
-  color: #e6eaf0; }
-  .isDarkMode .pm-modal::before, .isDarkMode .pm-modal::after, .isDarkMode .pm-modalContentInner::before, .isDarkMode .pm-modalContentInner::after {
-    background-color: #333E4C; }
-  .isDarkMode .pm-modal .labelColorSelector-item-mask, .isDarkMode .pm-modalContentInner .labelColorSelector-item-mask {
-    border: 2px solid #52637a; }
-
-.isDarkMode .pm-button--primaryborder, .isDarkMode .pm-button-blueborder {
-  border-color: #A8E576;
-  color: #A8E576;
-  background-color: #3d4a5b;
-  transition: background-color .2s ease-in-out; }
-
-.isDarkMode .is-hover.pm-button--primaryborder, .isDarkMode .pm-button--primaryborder:focus,
-.isDarkMode .pm-button--primaryborder:focus-within, .isDarkMode .pm-button--primaryborder:hover,
-.isDarkMode .pm-button-blueborder.is-hover, .isDarkMode .pm-button-blueborder:focus,
-.isDarkMode .pm-button-blueborder:focus-within, .isDarkMode .pm-button-blueborder:hover {
-  border-color: #A8E576;
-  color: #A8E576;
-  background-color: #313c49; }
-
-.isDarkMode .scrollshadow-static {
-  background: #333E4C; }
-
-.isDarkMode .pm-field, .isDarkMode .pm-field-icon-container,
-.isDarkMode .focus.pm-field-icon-container, .isDarkMode .pm-field-icon-container:focus,
-.isDarkMode .pm-field-icon-container:focus-within, .isDarkMode .pm-field.focus,
-.isDarkMode .pm-field:focus, .isDarkMode .pm-field:focus-within,
-.isDarkMode .composerInputMeta-overlay-fakefield,
-.isDarkMode .composerInputMeta-autocomplete {
-  color: #e6eaf0;
-  background-color: #3d4a5b; }
-  .isDarkMode .pm-field::placeholder, .isDarkMode .pm-field-icon-container::placeholder,
-  .isDarkMode .focus.pm-field-icon-container::placeholder, .isDarkMode .pm-field-icon-container:focus::placeholder,
-  .isDarkMode .pm-field-icon-container:focus-within::placeholder, .isDarkMode .pm-field.focus::placeholder,
-  .isDarkMode .pm-field:focus::placeholder, .isDarkMode .pm-field:focus-within::placeholder,
-  .isDarkMode .composerInputMeta-overlay-fakefield::placeholder,
-  .isDarkMode .composerInputMeta-autocomplete::placeholder {
-    color: #d6dde6; }
-
-.isDarkMode .composerInputMeta-autocomplete input {
-  color: #e6eaf0;
-  background-color: #3d4a5b; }
-  .isDarkMode .composerInputMeta-autocomplete input::placeholder {
-    color: #d6dde6; }
-
-.isDarkMode select.pm-field, .isDarkMode select.pm-field-icon-container {
-  background-color: #3d4a5b;
-  color: #e6eaf0; }
-
-.isDarkMode .storageProgress-content.dropDown-content--rightbottom::before {
-  border-right-color: #333E4C; }
-
-.isDarkMode .sticky-title {
-  background: #374352; }
-
-.isDarkMode .bg-global-highlight {
-  background-color: #333E4C; }
-
-.isDarkMode .bg-white-dm {
-  background-color: #3d4a5b; }
-
-.isDarkMode .main-area, .isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar,
-.isDarkMode .main-area--withToolbar--noHeader,
-.isDarkMode [class*="block-info-"] {
-  color: #e6eaf0; }
-
-.isDarkMode .main-area, .isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar, .isDarkMode .main-area--withToolbar--noHeader {
-  background: #333E4C; }
-
-.isDarkMode .context-bar {
-  background: #333E4C; }
-
-.isDarkMode .subnav {
-  background: #3d4a5b; }
-  .isDarkMode .subnav .link, .isDarkMode .subnav a {
-    color: #A8E576; }
-  .isDarkMode .subnav .link:active, .isDarkMode .subnav .link:focus, .isDarkMode .subnav .link:hover, .isDarkMode .subnav a:active, .isDarkMode .subnav a:focus, .isDarkMode .subnav a:hover {
-    color: #b6e98b; }
-
-.isDarkMode .pm-toggle-label {
-  border-color: #47576b;
-  background: #3d4a5b; }
-  .isDarkMode .pm-toggle-label::before {
-    background: #333E4C; }
-  .isDarkMode .pm-toggle-label .pm-toggle-label-img {
-    fill: #e6eaf0; }
-
-.isDarkMode .pm-plans-table-row--highlighted {
-  background-color: #333E4C; }
-
-.isDarkMode .pm-checkbox-fakecheck,
-.isDarkMode .pm-radio-fakeradio {
-  background: transparent; }
-
-.isDarkMode [class*="icon-"].color-primary {
-  color: #A8E576; }
+:root {
+  --searchbox-background-color: #1a2533;
+  --searchbox-text-color: #e6eaf0 !important;
+  --optional-sidebar-background-color: #333e4c;
+  --optional-email-item-unread-icon-background-color: #232a34;
+  --optional-email-item-unread-icon-text-color: #e6eaf0;
+}
 
-.isDarkMode .color-global-grey-dm {
-  color: #A8E576; }
+.meter-bar-thumb, .used-space {
+  --signal-success: #a8e576;
+}
 
 .pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue {
-  color: #FFF;
-  background-color: #7297C4;
-  border: 1px solid #7297C4; }
+  color: #fff;
+  background-color: #7297c4;
+  border: 1px solid #7297c4;
+}
 
 .is-hover.pm-button--error, .is-hover.pm-button--primary, .is-hover.pm-button--warning, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover {
-  color: #FFF;
+  color: #fff;
   box-shadow: 0 0 0.35714em 0 rgba(0, 0, 0, 0.2);
   background: #3d6493;
-  border: 1px solid #3d6493; }
+  border: 1px solid #3d6493;
+}
\ No newline at end of file
diff --git a/themes/vitamin_c/vitamin_c.css b/themes/vitamin_c/vitamin_c.css
index 40c26bd..c15b5b4 100644
--- a/themes/vitamin_c/vitamin_c.css
+++ b/themes/vitamin_c/vitamin_c.css
@@ -1,735 +1,261 @@
 /*! =========================================== *
  * VITAMIN C THEME
- * Version: v4.0.0-beta.33
+ * Version: v4.0.8
  * Author: Cristiano Almeida
  * Website: www.csalmeida.com
  * Twitter: @_csalmeida
  * =========================================== */
+:root,
+.ui-standard {
+  --primary: #fd7400;
+  --primary-contrast: white;
+  --signal-danger: #ed4c51;
+  --signal-danger-hover: #f7595e;
+  --signal-danger-active: #ff666b;
+  --signal-danger-contrast: white;
+  --signal-warning: #f5930a;
+  --signal-warning-hover: #f5a716;
+  --signal-warning-active: #f5b922;
+  --signal-warning-contrast: black;
+  --signal-success: #349172;
+  --signal-success-hover: #339c79;
+  --signal-success-active: #31a67f;
+  --signal-success-contrast: white;
+  --signal-info: #2c89db;
+  --signal-info-hover: #3491e3;
+  --signal-info-active: #3d99eb;
+  --signal-info-contrast: white;
+  --text-norm: white;
+  --text-weak: #a4a9b5;
+  --text-hint: #696f7d;
+  --text-disabled: #575d6b;
+  --text-invert: #262a33;
+  --field-norm: #e6eaf0;
+  --field-hover: #e46800;
+  --field-disabled: #464b58;
+  --border-norm: #00242f;
+  --border-weak: #00303f;
+  --background-norm: #004358 !important;
+  --background-weak: #005672;
+  --background-strong: #001c25;
+  --interaction-norm: #fd7400;
+  --interaction-norm-hover: #ff7b0b;
+  --interaction-norm-active: #ff8218;
+  --interaction-norm-contrast: white;
+  --interaction-weak: #003749 !important;
+  --interaction-weak-hover: #00303f;
+  --interaction-weak-active: #696f7d;
+  --interaction-default: transparent;
+  --interaction-default-hover: rgba(87, 93, 107, 0.2);
+  --interaction-default-active: rgba(87, 93, 107, 0.3);
+  --shadow-norm-opacity: 0.32;
+  --shadow-lifted-opacity: 0.4;
+  --backdrop-norm: rgba(0, 0, 0, 0.32);
+  --optional-scrollbar-thumb-color: #464b58;
+  --optional-scrollbar-thumb-hover-color: #575d6b;
+  --optional-email-item-read-background-color: #1a1d24;
+  --optional-email-item-read-text-color: var(--text-weak);
+  --optional-email-item-selected-background-color: #ca5d00;
+}
+
+.ui-prominent,
+.ui-standard,
 :root {
-  --main-bg-color: #004358;
-  --secondary-bg-color: #00303f;
-  --bgcolor-searchbox-field: #1F8A70;
-  --bgcolor-spacebar: rgba(255, 255, 255, 0.1);
-  --bgcolor-aside-link: rgba(0, 0, 0, 0.3);
-  --bgcolor-toolbar: #005672;
-  --fillcolor-logo: #f6f7fa;
-  --fillcolor-icons: #fff;
-  --color-nav-link: #FFE11A;
-  --color-nav-active: #FD7400;
-  --color-standard-text: #fff;
-  --boxshadow-main: none; }
+  --selection-background-color: var(
+    --optional-selection-background-color,
+    var(--primary)
+  );
+  --selection-text-color: var(
+    --optional-selection-text-color,
+    var(--primary-contrast)
+  );
+  --header-background-color: #004358 !important;
+  --sidebar-background-color: var(
+    --optional-sidebar-background-color,
+    var(--background-norm)
+  );
+  --navigation-current-item-marker-color: var(
+    --optional-navigation-current-item-marker-color,
+    var(--interaction-norm)
+  );
+  --navigation-current-item-background-color: var(
+    --optional-navigation-current-item-background-color,
+    var(--interaction-default-hover)
+  );
+  --navigation-current-item-text-color: var(
+    --optional-navigation-current-item-text-color,
+    var(--text-norm)
+  );
+  --main-box-shadow: var(--optional-main-box-shadow, none);
+  --main-border-color: var(--optional-main-border-color, var(--border-norm));
+  --navigation-item-count-background-color: var(
+    --optional-navigation-item-count-background-color,
+    var(--primary)
+  );
+  --navigation-item-count-text-color: var(
+    --optional-navigation-item-count-text-color,
+    var(--primary-contrast)
+  );
+  --toolbar-background-color: var(
+    --optional-toolbar-background-color,
+    var(--background-weak)
+  );
+  --toolbar-border-bottom-color: var(
+    --optional-toolbar-border-bottom-color,
+    var(--border-norm)
+  );
+  --toolbar-text-color: var(--optional-toolbar-text-color, var(--text-norm));
+  --toolbar-separator-color: var(
+    --optional-toolbar-separator-color,
+    var(--border-norm)
+  );
+  --scrollbar-thumb-color: var(
+    --optional-scrollbar-thumb-color,
+    hsla(0, 0%, 50%, 0.25)
+  );
+  --scrollbar-thumb-hover-color: var(
+    --optional-scrollbar-thumb-hover-color,
+    hsla(0, 0%, 50%, 0.5)
+  );
+  --tooltip-background-color: var(--optional-tooltip-background-color, #000);
+  --tooltip-text-color: var(--optional-tooltip-text-color, #fff);
+  --email-item-unread-background-color: var(
+    --optional-email-item-unread-background-color,
+    var(--background-norm)
+  );
+  --email-item-unread-text-color: var(
+    --optional-email-item-unread-text-color,
+    var(--text-norm)
+  );
+  --email-item-unread-icon-background-color: var(
+    --optional-email-item-unread-icon-background-color,
+    var(--background-strong)
+  );
+  --email-item-unread-icon-text-color: var(
+    --optional-email-item-unread-icon-text-color,
+    inherit
+  );
+  --email-item-read-background-color: #005672;
+  --email-item-read-text-color: #e6eaf0;
+  --email-item-read-icon-background-color: var(
+    --optional-email-item-read-icon-background-color,
+    var(--background-strong)
+  );
+  --email-item-read-icon-text-color: var(
+    --optional-email-item-read-icon-text-color,
+    inherit
+  );
+  --email-item-selected-background-color: var(
+    --optional-email-item-selected-background-color,
+    var(--interaction-norm)
+  );
+  --email-item-selected-text-color: var(
+    --optional-email-item-selected-text-color,
+    var(--interaction-norm-contrast)
+  );
+  --email-item-selected-icon-background-color: var(
+    --optional-email-item-selected-icon-background-color,
+    var(--interaction-norm-hover)
+  );
+  --email-item-selected-icon-text-color: var(
+    --optional-email-item-selected-icon-text-color,
+    inherit
+  );
+  --email-item-focus-marker-color: var(
+    --optional-email-item-focus-marker-color,
+    var(--interaction-norm)
+  );
+  --email-item-selected-focus-marker-color: var(
+    --optional-email-item-selected-focus-marker-color,
+    var(--interaction-norm-hover)
+  );
+  --email-message-view-background-color: var(
+    --optional-email-message-view-background-color,
+    var(--background-norm)
+  );
+  --field-background-color: var(
+    --optional-field-background-color,
+    var(--background-norm)
+  );
+  --field-text-color: var(--optional-field-text-color, var(--text-norm));
+  --field-placeholder-color: var(
+    --optional-field-placeholder-color,
+    var(--text-hint)
+  );
+  --field-hover-background-color: var(
+    --optional-field-hover-background-color,
+    var(--background-norm)
+  );
+  --field-hover-text-color: var(
+    --optional-field-hover-text-color,
+    var(--text-norm)
+  );
+  --field-focus-background-color: var(
+    --optional-field-focus-background-color,
+    var(--background-norm)
+  );
+  --field-focus-text-color: var(
+    --optional-field-focus-text-color,
+    var(--text-norm)
+  );
+  --field-disabled-background-color: var(
+    --optional-field-disabled-background-color,
+    var(--background-norm)
+  );
+  --field-disabled-text-color: var(
+    --optional-field-disabled-text-color,
+    var(--text-disabled)
+  );
+  --select-background-color: var(
+    --optional-select-background-color,
+    var(--field-background-color)
+  );
+  --favorite-icon-color: var(--optional-favorite-icon-color, orange);
+  --mark-background-color: var(--optional-mark-background-color, #ff0);
+  --mark-text-color: var(--optional-mark-text-color, #000);
+  --mark-font-weight: var(--optional-mark-font-weight, normal);
+  --modal-background-color: var(--optional-modal-background-color);
+  --modal-text-color: var(--optional-modal-text-color);
+  --file-preview-text-color: var(
+    --optional-file-preview-text-color,
+    var(--text-norm)
+  );
+  --file-preview-background-color: var(
+    --optional-file-preview-background-color,
+    var(--background-norm)
+  );
+  --border-radius: var(--optional-border-radius, 3);
+  --font-family: var(
+    --optional-font-family,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen-Sans,
+    Ubuntu,
+    Cantarell,
+    Helvetica Neue,
+    sans-serif
+  );
+}
+
+.button-solid-norm {
+  --button-default-background-color: #fd7400;
+  --button-hover-background-color: #ff8218;
+  --button-active-background-color: #ff8218;
+  --button-default-text-color: #e6eaf0;
+  --button-hover-text-color: var(--interaction-norm-contrast);
+  --button-active-text-color: var(--interaction-norm-contrast);
+}
 
-html:not(.editor-squire-iframe) body {
-  background: #004358;
-  color: #e6eaf0; }
-
-.pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue {
-  color: #e6eaf0;
-  background-color: #FD7400;
-  border: 1px solid #FD7400;
-  transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; }
-
-.is-hover.pm-button--error, .is-hover.pm-button--primary, .is-hover.pm-button--warning, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover {
-  color: #FFE11A;
-  box-shadow: 0 0 0.35714em 0 rgba(0, 0, 0, 0.2);
-  background: #e46800;
-  border: 1px solid #e46800; }
-
-.pm-button--primaryborder-dark, .pm-button-blueborder-dark {
-  background: #004358;
-  border-color: #FD7400;
-  color: #FD7400; }
-
-.is-active.pm-button--primaryborder-dark, .is-hover.pm-button--primaryborder-dark, .pm-button--primaryborder-dark:focus, .pm-button--primaryborder-dark:focus-within, .pm-button--primaryborder-dark:hover, .pm-button--primaryborder-dark:not(div):active, .pm-button-blueborder-dark.is-active, .pm-button-blueborder-dark.is-hover, .pm-button-blueborder-dark:focus, .pm-button-blueborder-dark:focus-within, .pm-button-blueborder-dark:hover, .pm-button-blueborder-dark:not(div):active {
-  background: #004358;
-  border-color: #ff8218;
-  color: #ff8218; }
-
-.pm-button--primaryborder, .pm-button-blueborder {
-  border-color: #e46800;
-  color: #e46800; }
-
-.is-hover.pm-button--primaryborder, .pm-button--primaryborder:focus, .pm-button--primaryborder:focus-within, .pm-button--primaryborder:hover, .pm-button-blueborder.is-hover, .pm-button-blueborder:focus, .pm-button-blueborder:focus-within, .pm-button-blueborder:hover {
-  border-color: #e46800;
-  color: #e46800; }
-
-.is-disabled.pm-button--error, .is-disabled.pm-button--error.pm-button--info, .is-disabled.pm-button--error.pm-button--redborder, .is-disabled.pm-button--primary, .is-disabled.pm-button--primary.pm-button--info, .is-disabled.pm-button--primary.pm-button--redborder, .is-disabled.pm-button--warning, .is-disabled.pm-button--warning.pm-button--info, .is-disabled.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info[disabled], .pm-button--error.pm-button--redborder[disabled], .pm-button--error[disabled], .pm-button--primary.pm-button--info[disabled], .pm-button--primary.pm-button--redborder[disabled], .pm-button--primary[disabled], .pm-button--warning.pm-button--info[disabled], .pm-button--warning.pm-button--redborder[disabled], .pm-button--warning[disabled], .pm-button-blue.is-disabled, .pm-button-blue.is-disabled.pm-button--info, .pm-button-blue.is-disabled.pm-button--redborder, .pm-button-blue.pm-button--info[disabled], .pm-button-blue.pm-button--redborder[disabled], .pm-button-blue[disabled], .pm-button.is-disabled.pm-button--error, .pm-button.is-disabled.pm-button--primary, .pm-button.is-disabled.pm-button--warning, .pm-button.pm-button--error[disabled], .pm-button.pm-button--primary[disabled], .pm-button.pm-button--warning[disabled], .pm-button.pm-button-blue.is-disabled, .pm-button.pm-button-blue[disabled] {
-  background-color: #ffe2ca;
-  border-color: #ff8218;
-  color: #ca5d00; }
-
-.bg-primary {
-  background-color: #005672; }
-
-.color-primary {
-  color: #FD7400; }
-
-.navigation__counterItem {
-  background: #ca5d00;
-  color: white; }
-
-.item-container-row:hover::before, .item-container:hover::before {
-  border-color: #ff8f31; }
-
-.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon {
-  border-color: #ffb97e; }
-
-.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon {
-  fill: #ca5d00; }
-
-.circle-chart__circle {
-  stroke: #FD7400; }
-
-#dropdown-0 .dropDown-content::after, #dropdown-0 .dropDown-content::before, #dropdown-0.dropDown:not(.dropDown--noCaret)::before,
-#dropdown-0 .dropDown-content {
-  background: #004358; }
-
-.dropDown:not(.dropDown--noCaret)::before,
-.dropDown::after,
-.dropDown-logout-initials,
-.dropDown-item-hr {
-  border-color: #005672 !important; }
-
-#global_search.searchbox-field[type="search"] {
-  background-color: #1F8A70;
-  color: #e6eaf0; }
-
-.searchbox-advanced-search-button:active,
-.searchbox-advanced-search-button:focus,
-.searchbox-advanced-search-button:hover {
-  background-color: #004358; }
-
-.topnav-link, .topnav-link > .topnav-icon {
-  color: #FFE11A;
-  transition: color .2s ease-in-out; }
-
-.topnav-link:active, .topnav-link:focus,
-.topnav-link:hover, .topnav-link[aria-current="true"] {
-  color: #FD7400; }
-
-.topnav-link:active > .topnav-icon, .topnav-link:focus > .topnav-icon,
-.topnav-link:hover > .topnav-icon, .topnav-link[aria-current=true] > .topnav-icon {
-  color: #FD7400; }
-
-.protonmail .text-purple {
-  color: #004358 !important; }
-
-.protonmail .text-purple:hover {
-  color: #ca5d00 !important; }
-
-.dropDown-item-button:focus, .dropDown-item-button:hover, .dropDown-item-link:focus, .dropDown-item-link:hover {
-  color: #FD7400; }
-
-#pm_composer .composer .composerHeader-container,
-.composerInputMeta-overlay .composerHeader-container {
-  background: #005672; }
-
-#pm_composer .composer .fill {
-  background: #fff; }
-
-.conversation.marked::before {
-  background: #FD7400; }
-
-.item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active) {
-  background: #fff; }
-
-.item-container.selected, .item-container-row.selected,
-.item-container.active, .item-is-selected {
-  background: rgba(253, 116, 0, 0.1); }
-
-.selectBoxElement-container:hover .item-icon {
-  background-color: transparent;
-  border: 1px solid #e46800; }
-  .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon {
-    fill: #e46800; }
-
-.selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-  background-color: #e46800;
-  border-color: #e46800; }
-
-.item-checkbox:checked + .item-icon {
-  background-color: #FD7400;
-  border-color: #FD7400; }
-
-.item-checkbox + .item-icon:hover {
-  background-color: #e46800;
-  border-color: #e46800; }
-
-.item-checkbox + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #FFE11A; }
-
-.item-checkbox:checked + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: #FFE11A; }
-
-.starbutton {
-  fill: #FD7400 !important;
-  opacity: 0.7; }
-
-.starbutton:focus, .starbutton:hover {
-  fill: #FD7400; }
-
-.autocompleteEmailsItem-icon svg.encryptionIcon {
-  fill: #e46800; }
-
-.encryptionStatus .color-pm-blue svg {
-  color: #e46800;
-  fill: #e46800; }
-
-.encryptionStatus .color-global-grey-dm svg {
-  color: black; }
-
-.color-pm-blue {
-  color: #FD7400; }
-
-.pm-radio:checked + .pm-radio-fakeradio::before {
-  background: #FD7400; }
-
-.block-info-standard {
-  border-color: #1b68c6; }
-
-.block-info-standard-warning {
-  border-color: #ffaa00; }
-
-.block-info-standard-error {
-  border-color: #d62646; }
-
-.link, a, .pm-button--link {
-  color: #ca5d00;
-  transition: color .2s ease-in-out; }
-
-.link:active, .link:focus, .link:hover,
-a:active, a:focus, a:hover,
-.pm-button--link:hover {
-  color: #ca5d00; }
-
-.pm-button--primary {
-  background-color: #FD7400;
-  border-color: #FD7400; }
-
-.pm-button--link, .pm-button.pm-button--link {
-  color: #FD7400; }
-
-.pm-button--error, .pm-button--error.pm-button--info, .pm-button--error.pm-button--redborder, .pm-button--primary, .pm-button--primary.pm-button--info, .pm-button--primary.pm-button--redborder, .pm-button--warning, .pm-button--warning.pm-button--info, .pm-button--warning.pm-button--redborder, .pm-button-blue, .pm-button-blue.pm-button--info, .pm-button-blue.pm-button--redborder, .pm-button.pm-button--error, .pm-button.pm-button--primary, .pm-button.pm-button--warning, .pm-button.pm-button-blue {
-  background-color: #FD7400;
-  border-color: #FD7400; }
-
-.is-hover.pm-button--error, .is-hover.pm-button--error.pm-button--info, .is-hover.pm-button--error.pm-button--redborder, .is-hover.pm-button--primary, .is-hover.pm-button--primary.pm-button--info, .is-hover.pm-button--primary.pm-button--redborder, .is-hover.pm-button--warning, .is-hover.pm-button--warning.pm-button--info, .is-hover.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:focus, .pm-button--error.pm-button--info:focus-within, .pm-button--error.pm-button--info:hover, .pm-button--error.pm-button--redborder:focus, .pm-button--error.pm-button--redborder:focus-within, .pm-button--error.pm-button--redborder:hover, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary.pm-button--info:focus, .pm-button--primary.pm-button--info:focus-within, .pm-button--primary.pm-button--info:hover, .pm-button--primary.pm-button--redborder:focus, .pm-button--primary.pm-button--redborder:focus-within, .pm-button--primary.pm-button--redborder:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning.pm-button--info:focus, .pm-button--warning.pm-button--info:focus-within, .pm-button--warning.pm-button--info:hover, .pm-button--warning.pm-button--redborder:focus, .pm-button--warning.pm-button--redborder:focus-within, .pm-button--warning.pm-button--redborder:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue.is-hover.pm-button--info, .pm-button-blue.is-hover.pm-button--redborder, .pm-button-blue.pm-button--info:focus, .pm-button-blue.pm-button--info:focus-within, .pm-button-blue.pm-button--info:hover, .pm-button-blue.pm-button--redborder:focus, .pm-button-blue.pm-button--redborder:focus-within, .pm-button-blue.pm-button--redborder:hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover, .pm-button.is-hover.pm-button--error, .pm-button.is-hover.pm-button--primary, .pm-button.is-hover.pm-button--warning, .pm-button.pm-button--error:focus, .pm-button.pm-button--error:focus-within, .pm-button.pm-button--error:hover, .pm-button.pm-button--primary:focus, .pm-button.pm-button--primary:focus-within, .pm-button.pm-button--primary:hover, .pm-button.pm-button--warning:focus, .pm-button.pm-button--warning:focus-within, .pm-button.pm-button--warning:hover, .pm-button.pm-button-blue.is-hover, .pm-button.pm-button-blue:focus, .pm-button.pm-button-blue:focus-within, .pm-button.pm-button-blue:hover {
-  background: #e46800;
-  border: 1px solid #e46800; }
-
-.is-active.pm-button--error, .is-active.pm-button--error.pm-button--info, .is-active.pm-button--error.pm-button--redborder, .is-active.pm-button--primary, .is-active.pm-button--primary.pm-button--info, .is-active.pm-button--primary.pm-button--redborder, .is-active.pm-button--warning, .is-active.pm-button--warning.pm-button--info, .is-active.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:not(div):active, .pm-button--error.pm-button--redborder:not(div):active, .pm-button--error:not(div):active, .pm-button--primary.pm-button--info:not(div):active, .pm-button--primary.pm-button--redborder:not(div):active, .pm-button--primary:not(div):active, .pm-button--warning.pm-button--info:not(div):active, .pm-button--warning.pm-button--redborder:not(div):active, .pm-button--warning:not(div):active, .pm-button-blue.is-active, .pm-button-blue.is-active.pm-button--info, .pm-button-blue.is-active.pm-button--redborder, .pm-button-blue.pm-button--info:not(div):active, .pm-button-blue.pm-button--redborder:not(div):active, .pm-button-blue:not(div):active, .pm-button.is-active.pm-button--error, .pm-button.is-active.pm-button--primary, .pm-button.is-active.pm-button--warning, .pm-button.pm-button--error:not(div):active, .pm-button.pm-button--primary:not(div):active, .pm-button.pm-button--warning:not(div):active, .pm-button.pm-button-blue.is-active, .pm-button.pm-button-blue:not(div):active {
-  background: #ca5d00;
-  border-color: #ca5d00; }
-
-.pm-button-blueborder {
-  box-shadow: none;
-  border-color: #004358;
-  color: #004358;
-  transition: color .2s ease-in-out, border-color .2s ease-in-out; }
-
-.pm-button-blueborder:hover {
-  box-shadow: none;
-  border-color: #ca5d00;
-  color: #ca5d00; }
-
-.is-active.pm-button--primaryborder,
-.pm-button--primaryborder:not(div):active,
-.pm-button-blueborder.is-active,
-.pm-button-blueborder:not(div):active {
-  border-color: #ca5d00;
-  color: #ca5d00;
-  background: transparent; }
-
-.pm-group-buttons > .pm-group-button.pm-button--primary {
-  border-color: #ca5d00; }
-
-.bg-pm-blue-gradient .pm-button--transparent:hover {
-  color: #e6eaf0;
-  border-color: #e6eaf0; }
-
-.pm-toggle-checkbox:checked + .pm-toggle-label:before {
-  background: #FD7400;
-  border-color: #FD7400; }
-
-.composer-title-bar {
-  background: #004358; }
-
-.color-global-light {
-  color: #e6eaf0; }
-
-.angular-squire-iframe body a {
-  color: #FD7400; }
-
-.fill-pm-blue,
-.message-attachmentIcon .file-outer-icon.is-embedded {
-  fill: #FD7400; }
-
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2) {
-  border-color: #FD7400;
-  color: #FD7400; }
-  .pm-table--highlight[data-plan-number="1"] tr th:nth-child(2)::before {
-    background-color: #FD7400; }
-
-.pm-table--highlight[data-plan-number="1"] tr td:nth-child(2),
-.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2),
-.pm-table--highlight[data-plan-number="1"] tr:last-child td:nth-child(2) {
-  border-color: #FD7400; }
-
-.pm-simple-table-row-th .fill-primary {
-  fill: #FD7400; }
-
-.pm-checkbox-fakecheck, .pm-radio-fakeradio {
-  border-color: #004358; }
-  .pm-checkbox-fakecheck [class*="icon-"], .pm-radio-fakeradio [class*="icon-"] {
-    fill: #FD7400; }
-
-[class*="icon-"].color-primary {
-  color: #004358; }
-  [class*="icon-"].color-primary:hover {
-    color: #ca5d00; }
-
-.pm-field, .editor,
-.editor-toolbar,
-.border-bottom,
-.border-top,
-.message-container.is-opened > .message-header {
-  border-color: #001c25; }
-
-.badgeLabel, .badgeLabel-primary {
-  border-color: #ca5d00; }
-
-.badgeLabel,
-.badgeLabel-blue,
-.badgeLabel-primary,
-.bg-pm-blue {
-  background-color: #ca5d00; }
-
-body {
-  scrollbar-color: #006a8b #004b62; }
-
-::-webkit-scrollbar {
-  width: 16px; }
-  ::-webkit-scrollbar-track {
-    background: #004b62; }
-  ::-webkit-scrollbar-thumb {
-    background: #006a8b;
-    box-shadow: inset 0 0 0 4px #004b62;
-    border-radius: 16px; }
-
-.isDarkMode .bordered,
-.isDarkMode .bordered-container:not([class*="composerInputMeta-"]),
-.isDarkMode .breadcrumb-container {
-  border-color: #006a8b; }
-
-.isDarkMode .dropDown-content::after, .isDarkMode .dropDown-content::before,
-.isDarkMode .dropDown:not(.dropDown--noCaret)::before,
-.isDarkMode .dropDown-content {
-  background: #004358;
-  border: #004358; }
-
-.isDarkMode .dropDown-item-button:focus, .isDarkMode .dropDown-item-button:focus-within,
-.isDarkMode .dropDown-item-button:hover, .isDarkMode .dropDown-item-link:focus,
-.isDarkMode .dropDown-item-link:focus-within, .isDarkMode .dropDown-item-link:hover {
-  background-color: #00303f; }
-
-.isDarkMode .dropDown-item-button.is-disabled, .isDarkMode .dropDown-item-button[disabled],
-.isDarkMode .dropDown-item-link.is-disabled, .isDarkMode .dropDown-item-link[disabled] {
-  background-color: #003b4e; }
-
-.isDarkMode .squireToolbar-select-list {
-  background: #004358;
-  color: #e6eaf0; }
-
-.isDarkMode .squireToolbar-dropdown-divider {
-  background-color: #006a8b; }
-
-.isDarkMode .squireToolbar-select-item:hover {
-  background: #003b4e; }
-
-.isDarkMode #pm_composer .composer,
-.isDarkMode .composerInputMeta-overlay {
-  background: #004358; }
-
-.isDarkMode #pm_composer .composer .fill {
-  background: #004358; }
-
-.isDarkMode .composer-body-container textarea {
-  background: #004358; }
-
-.isDarkMode .composer-addresses-item {
-  background: #00303f; }
-
-.isDarkMode .composer-addresses-autocomplete ul {
-  background: #00303f; }
-
-.isDarkMode .composer-addresses-autocomplete li[aria-selected="true"],
-.isDarkMode .composer-addresses-autocomplete li:hover {
-  background: #004358; }
-
-.isDarkMode .autocompleteEmails-item {
-  background-color: #003b4e;
-  border-color: #003b4e; }
-
-.isDarkMode .autocompleteEmails-label {
-  border-left: 1px solid #006a8b;
-  border-right: 1px solid #006a8b; }
-
-.isDarkMode .composerOptions-container.show {
-  background: #003b4e; }
-  .isDarkMode .composerOptions-container.show .shadow-container {
-    background: #004358;
-    color: #e6eaf0; }
-
-.isDarkMode .pm-button.pm-button--primary {
-  background: #ca5d00;
-  color: #e6eaf0;
-  border-color: #ca5d00; }
-
-.isDarkMode .pm-button.pm-button--primary:hover {
-  background: #FD7400;
-  color: #e6eaf0; }
-
-.isDarkMode .is-disabled.pm-button--error, .isDarkMode .is-disabled.pm-button--error.pm-button--info, .isDarkMode .is-disabled.pm-button--error.pm-button--redborder, .isDarkMode .is-disabled.pm-button--primary, .isDarkMode .is-disabled.pm-button--primary.pm-button--info, .isDarkMode .is-disabled.pm-button--primary.pm-button--redborder, .isDarkMode .is-disabled.pm-button--warning, .isDarkMode .is-disabled.pm-button--warning.pm-button--info, .isDarkMode .is-disabled.pm-button--warning.pm-button--redborder, .isDarkMode .pm-button--error.pm-button--info[disabled], .isDarkMode .pm-button--error.pm-button--redborder[disabled], .isDarkMode .pm-button--error[disabled], .isDarkMode .pm-button--primary.pm-button--info[disabled], .isDarkMode .pm-button--primary.pm-button--redborder[disabled], .isDarkMode .pm-button--primary[disabled], .isDarkMode .pm-button--warning.pm-button--info[disabled], .isDarkMode .pm-button--warning.pm-button--redborder[disabled], .isDarkMode .pm-button--warning[disabled], .isDarkMode .pm-button-blue.is-disabled, .isDarkMode .pm-button-blue.is-disabled.pm-button--info, .isDarkMode .pm-button-blue.is-disabled.pm-button--redborder, .isDarkMode .pm-button-blue.pm-button--info[disabled], .isDarkMode .pm-button-blue.pm-button--redborder[disabled], .isDarkMode .pm-button-blue[disabled], .isDarkMode .pm-button.is-disabled.pm-button--error, .isDarkMode .pm-button.is-disabled.pm-button--primary, .isDarkMode .pm-button.is-disabled.pm-button--warning, .isDarkMode .pm-button.pm-button--error[disabled], .isDarkMode .pm-button.pm-button--primary[disabled], .isDarkMode .pm-button.pm-button--warning[disabled], .isDarkMode .pm-button.pm-button-blue.is-disabled, .isDarkMode .pm-button.pm-button-blue[disabled] {
-  background-color: #003b4e;
-  border-color: #006a8b;
-  color: #c6cfdd; }
-
-.isDarkMode .pm-button:not(.pm-button-blue):not(.pv-button-green):not(.pm-button--primary):not(.pm-button--primaryborderEvenInDarkMode):not(.pm-button--link):not(.pm-button--error):not(.pm-button--warning):not(.pm-button--redborder):not(.pm-button--primaryborder), .isDarkMode .pm-button--info {
-  color: #e6eaf0;
-  background-color: #004358;
-  border-color: #006a8b; }
-
-.isDarkMode .pm-group-buttons > .pm-group-button.pm-button--primary {
-  border-color: #006a8b; }
-
-.isDarkMode .pm-button-blueborder {
-  border-color: #FD7400;
-  color: #FD7400; }
-
-.isDarkMode .pm-button-blueborder:hover {
-  border-color: #ff8218;
-  color: #ff8218; }
-
-.isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:active, .isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:hover, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:active, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:hover {
-  background: #004b62 !important; }
-
-.isDarkMode .squireToolbar-separator {
-  background: #005672; }
-
-.isDarkMode .composerTime-container,
-.isDarkMode [class*="composer-field"] {
-  color: #e6eaf0; }
-
-.isDarkMode .composerInputMeta-overlay-fakefield {
-  border-color: #e6eaf0; }
-
-.isDarkMode .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg {
-  color: white; }
-
-.isDarkMode .conversation {
-  border-color: #006a8b; }
-
-.isDarkMode .main-area,
-.isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar,
-.isDarkMode .main-area--withToolbar--noHeader,
-.isDarkMode [class*="block-info-"] {
-  color: #e6eaf0; }
-
-.isDarkMode [class*="block-info"] {
-  background-color: #006a8b;
-  color: #e6eaf0; }
-
-.isDarkMode .fill-global-grey {
-  fill: #FD7400; }
-
-.isDarkMode .starbutton {
-  fill: #0d0d0d; }
-
-.isDarkMode .bg-global-light, .isDarkMode kbd {
-  background: #004358; }
-
-.isDarkMode .item-container, .isDarkMode .item-container-row, .isDarkMode .contactsummary-container {
-  background: #004358; }
-
-.isDarkMode .items-column-list-inner, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer {
-  border-color: #006a8b; }
-  .isDarkMode .items-column-list-inner .item-container, .isDarkMode .items-column-list-inner .item-container-row, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container-row {
-    border-color: #006a8b; }
-
-.isDarkMode .item-container:not(.item-is-selected):not(.read):not(.active),
-.isDarkMode .item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active),
-.isDarkMode .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .isDarkMode .squireToolbar-container {
-  background: #005672; }
-
-.isDarkMode .item-container.active, .isDarkMode .item-is-selected {
-  background: #003b4e; }
-  .isDarkMode .item-container.active .flex-item-fluid, .isDarkMode .item-is-selected .flex-item-fluid {
-    color: #FD7400; }
-
-.isDarkMode .item-icon {
-  background-color: #004358;
-  border: 1px solid #d6dde6; }
-
-.isDarkMode .selectBoxElement-container:hover .item-icon {
-  background-color: #004358;
-  border: 1px solid #e46800; }
-  .isDarkMode .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon {
-    fill: #e46800; }
-
-.isDarkMode .selectBoxElement-container {
-  color: #e6eaf0; }
-
-.isDarkMode .selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-  background-color: #e46800;
-  border-color: #e46800; }
-
-.isDarkMode .item-checkbox + .item-icon:hover,
-.isDarkMode .item-checkbox:hover + .item-icon {
-  background-color: #00303f; }
-
-.isDarkMode .items-column-list,
-.isDarkMode .elementList-container-row {
-  background-color: #004358; }
-
-.isDarkMode .composer-container {
-  background: #005672; }
-
-.isDarkMode .message-header {
-  background-color: #005672; }
-
-.isDarkMode .view-column-detail {
-  background-color: #004358; }
-
-.isDarkMode details:first-child {
-  border-color: #006a8b; }
-
-.isDarkMode .items-column-list,
-.isDarkMode .message-container,
-.isDarkMode .message-attachments {
-  border-color: #006a8b; }
-
-.isDarkMode .message-container:not(.sent):not(.draft) .message-header.message-summary::before,
-.isDarkMode .message-header.is-inbound::before {
-  border-top: 1px solid #006a8b;
-  border-left: 1px solid #006a8b;
-  background-color: #005672; }
-
-.isDarkMode .message-infobox {
-  background-color: #004358; }
-
-.isDarkMode .message-content.frame.message-frame {
-  background: white;
-  color: black; }
-
-.isDarkMode .block-info-standard, .isDarkMode .bodyDecrypted blockquote {
-  border-color: #FD7400; }
-
-.isDarkMode .squireDropdown-item-label {
-  color: #e6eaf0; }
-
-.isDarkMode .squireToolbar-action-color {
-  background: transparent; }
-
-.isDarkMode .angular-squire-iframe body {
-  color: #e6eaf0;
-  background: #005672; }
-  .isDarkMode .angular-squire-iframe body a {
-    color: #FD7400; }
-
-.isDarkMode .plaintext-editor {
-  color: #e6eaf0; }
-
-.isDarkMode .pm-button, .isDarkMode .pm-button--info, .isDarkMode .pm-button--redborder {
-  background: #004358;
-  border-color: #006a8b;
-  color: #e6eaf0; }
-
-.isDarkMode .message-attachmentInfo {
-  border-color: #006a8b; }
-
-.isDarkMode .is-hover.pm-button--info, .isDarkMode .is-hover.pm-button--redborder,
-.isDarkMode .pm-button--info:focus, .isDarkMode .pm-button--info:focus-within,
-.isDarkMode .pm-button--info:hover, .isDarkMode .pm-button--redborder:focus,
-.isDarkMode .pm-button--redborder:focus-within, .isDarkMode .pm-button--redborder:hover,
-.isDarkMode .pm-button.is-hover, .isDarkMode .pm-button:focus-within,
-.isDarkMode .pm-button:hover:not(.pm-button--primary) {
-  color: #FD7400; }
-
-.isDarkMode .pm-button:focus {
-  color: #e6eaf0; }
-
-.isDarkMode .is-disabled.pm-button--info,
-.isDarkMode .is-disabled.pm-button--redborder,
-.isDarkMode .pm-button--info[disabled],
-.isDarkMode .pm-button--redborder[disabled],
-.isDarkMode .pm-button.is-disabled,
-.isDarkMode .pm-button[disabled] {
-  background: #006a8b; }
-
-.isDarkMode .is-active.pm-button--info,
-.isDarkMode .is-active.pm-button--redborder,
-.isDarkMode .pm-button--info:not(div):active,
-.isDarkMode .pm-button--redborder:not(div):active,
-.isDarkMode .pm-button.is-active, .isDarkMode .pm-button:not(div):active {
-  background: #006a8b;
-  color: #FD7400; }
-
-.isDarkMode .dropDown-content {
-  background: #004358;
-  color: #e6eaf0; }
-  .isDarkMode .dropDown-content button {
-    color: #e6eaf0; }
-  .isDarkMode .dropDown-content .elementsSelector-btn-action,
-  .isDarkMode .dropDown-content .dropDown-item:hover {
-    color: #e6eaf0; }
-  .isDarkMode .dropDown-content .dropDown-item:hover {
-    background: #005672 !important; }
-  .isDarkMode .dropDown-content .dropDown-item + .dropDown-item {
-    border-top: 1px solid #006a8b; }
-  .isDarkMode .dropDown-content .dropDown-item .color-global-grey {
-    color: #e6eaf0; }
-
-.isDarkMode .dropDown .dropDown-content::before, .isDarkMode .dropDown .dropDown-content::after {
-  border-bottom-color: #004358; }
-
-.isDarkMode .dropDown--right-bottom::before {
-  border-right-color: #004358; }
-
-.isDarkMode .dropDown--right-bottom .dropDown-content::before, .isDarkMode .dropDown--right-bottom .dropDown-content::after {
-  background: #004358; }
-
-.isDarkMode .dropDown--bottom-right .dropDown-content::before, .isDarkMode .dropDown--bottom-right .dropDown-content::after {
-  background: #004358; }
-
-.isDarkMode .dropDown--bottom-left::before,
-.isDarkMode .dropDown--bottom-right::before,
-.isDarkMode .dropDown--bottom::before {
-  border-bottom-color: #006a8b; }
-
-.isDarkMode .dropDown--bottom-right {
-  border: 1px solid #006a8b; }
-
-.isDarkMode .pm-field-icon-container[type="search"], .isDarkMode .pm-field[type="search"] {
-  background-color: #005672; }
-
-.isDarkMode .dropDown-contentInner {
-  background-color: #004358; }
-  .isDarkMode .dropDown-contentInner::before, .isDarkMode .dropDown-contentInner::after {
-    background-color: #004358; }
-  .isDarkMode .dropDown-contentInner .dropDown-item span {
-    color: #e6eaf0 !important; }
-
-.isDarkMode .searchbox-field[type="search"]:not(#global_search) {
-  background: #e6eaf0;
-  color: #004358; }
-
-.isDarkMode .link:active, .isDarkMode .link:focus, .isDarkMode .link:hover,
-.isDarkMode a:active, .isDarkMode a:focus, .isDarkMode a:hover,
-.isDarkMode .pm-button--link:hover,
-.isDarkMode .composerInputMeta-label:hover {
-  color: #ff8218; }
-
-.isDarkMode .pm-modal, .isDarkMode .pm-modalContentInner {
-  background-color: #004358;
-  color: #e6eaf0; }
-  .isDarkMode .pm-modal::before, .isDarkMode .pm-modal::after, .isDarkMode .pm-modalContentInner::before, .isDarkMode .pm-modalContentInner::after {
-    background-color: #004358; }
-  .isDarkMode .pm-modal .labelColorSelector-item-mask, .isDarkMode .pm-modalContentInner .labelColorSelector-item-mask {
-    border: 2px solid #007da5; }
-
-.isDarkMode .pm-button--primaryborder, .isDarkMode .pm-button-blueborder {
-  border-color: #FD7400;
-  color: #FD7400;
-  background-color: #005672;
-  transition: background-color .2s ease-in-out; }
-
-.isDarkMode .is-hover.pm-button--primaryborder, .isDarkMode .pm-button--primaryborder:focus,
-.isDarkMode .pm-button--primaryborder:focus-within, .isDarkMode .pm-button--primaryborder:hover,
-.isDarkMode .pm-button-blueborder.is-hover, .isDarkMode .pm-button-blueborder:focus,
-.isDarkMode .pm-button-blueborder:focus-within, .isDarkMode .pm-button-blueborder:hover {
-  border-color: #FD7400;
-  color: #FD7400;
-  background-color: #003f53; }
-
-.isDarkMode .scrollshadow-static {
-  background: #004358; }
-
-.isDarkMode .pm-field, .isDarkMode .pm-field-icon-container,
-.isDarkMode .focus.pm-field-icon-container, .isDarkMode .pm-field-icon-container:focus,
-.isDarkMode .pm-field-icon-container:focus-within, .isDarkMode .pm-field.focus,
-.isDarkMode .pm-field:focus, .isDarkMode .pm-field:focus-within,
-.isDarkMode .composerInputMeta-overlay-fakefield,
-.isDarkMode .composerInputMeta-autocomplete {
-  color: #e6eaf0;
-  background-color: #005672; }
-  .isDarkMode .pm-field::placeholder, .isDarkMode .pm-field-icon-container::placeholder,
-  .isDarkMode .focus.pm-field-icon-container::placeholder, .isDarkMode .pm-field-icon-container:focus::placeholder,
-  .isDarkMode .pm-field-icon-container:focus-within::placeholder, .isDarkMode .pm-field.focus::placeholder,
-  .isDarkMode .pm-field:focus::placeholder, .isDarkMode .pm-field:focus-within::placeholder,
-  .isDarkMode .composerInputMeta-overlay-fakefield::placeholder,
-  .isDarkMode .composerInputMeta-autocomplete::placeholder {
-    color: #d6dde6; }
-
-.isDarkMode .composerInputMeta-autocomplete input {
-  color: #e6eaf0;
-  background-color: #005672; }
-  .isDarkMode .composerInputMeta-autocomplete input::placeholder {
-    color: #d6dde6; }
-
-.isDarkMode select.pm-field, .isDarkMode select.pm-field-icon-container {
-  background-color: #005672;
-  color: #e6eaf0; }
-
-.isDarkMode .storageProgress-content.dropDown-content--rightbottom::before {
-  border-right-color: #004358; }
-
-.isDarkMode .sticky-title {
-  background: #004b62; }
-
-.isDarkMode .bg-global-highlight {
-  background-color: #004358; }
-
-.isDarkMode .bg-white-dm {
-  background-color: #005672; }
-
-.isDarkMode .main-area, .isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar,
-.isDarkMode .main-area--withToolbar--noHeader,
-.isDarkMode [class*="block-info-"] {
-  color: #e6eaf0; }
-
-.isDarkMode .main-area, .isDarkMode .main-area--noHeader,
-.isDarkMode .main-area--withToolbar, .isDarkMode .main-area--withToolbar--noHeader {
-  background: #004358; }
-
-.isDarkMode .context-bar {
-  background: #004358; }
-
-.isDarkMode .subnav {
-  background: #005672; }
-  .isDarkMode .subnav .link, .isDarkMode .subnav a {
-    color: #FD7400; }
-  .isDarkMode .subnav .link:active, .isDarkMode .subnav .link:focus, .isDarkMode .subnav .link:hover, .isDarkMode .subnav a:active, .isDarkMode .subnav a:focus, .isDarkMode .subnav a:hover {
-    color: #ff8218; }
-
-.isDarkMode .pm-toggle-label {
-  border-color: #006a8b;
-  background: #005672; }
-  .isDarkMode .pm-toggle-label::before {
-    background: #004358; }
-  .isDarkMode .pm-toggle-label .pm-toggle-label-img {
-    fill: #e6eaf0; }
-
-.isDarkMode .pm-plans-table-row--highlighted {
-  background-color: #004358; }
-
-.isDarkMode .pm-checkbox-fakecheck,
-.isDarkMode .pm-radio-fakeradio {
-  background: transparent; }
-
-.isDarkMode [class*="icon-"].color-primary {
-  color: #FD7400; }
-
-.isDarkMode .color-global-grey-dm {
-  color: #FD7400; }
+:root {
+  --searchbox-background-color: #1f8a70;
+  --searchbox-text-color: #e6eaf0 !important;
+  --optional-sidebar-background-color: #004358;
+  --optional-email-item-unread-icon-background-color: #00242f;
+  --optional-email-item-unread-icon-text-color: #e6eaf0;
+}
+
+.meter-bar-thumb, .used-space {
+  --signal-success: #fd7400;
+}
\ No newline at end of file