From 611e828d1a2cd87ca00b196447f6d1e360c9bae2 Mon Sep 17 00:00:00 2001
From: Stephen Abello <stephen.abello@combodo.com>
Date: Thu, 12 Dec 2019 15:44:35 +0100
Subject: [PATCH] =?UTF-8?q?N=C2=B02314=20Introduce=20custom=20themes=20for?=
 =?UTF-8?q?=20iTop's=20console?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 application/dashboard.class.inc.php           |    2 +-
 application/datatable.class.inc.php           |    2 +-
 application/displayblock.class.inc.php        |    4 +-
 application/itopwebpage.class.inc.php         |   86 +-
 application/menunode.class.inc.php            |    2 +-
 application/nicewebpage.class.inc.php         |    6 +-
 application/themehandler.class.inc.php        |   74 +
 application/ui.extkeywidget.class.inc.php     |    6 +-
 core/config.class.inc.php                     |    8 +
 css/css-variables.scss                        |   72 +-
 css/light-grey.css                            | 3251 -----------------
 css/light-grey.scss                           |  373 +-
 .../datamodel.itop-config-mgmt.xml            |   15 +
 images/actions_bkg.png                        |  Bin 160 -> 0 bytes
 images/actions_left.png                       |  Bin 117 -> 0 bytes
 images/asc.gif                                |  Bin 54 -> 0 bytes
 images/help.png                               |  Bin 413 -> 0 bytes
 images/home.png                               |  Bin 219 -> 0 bytes
 images/menu.png                               |  Bin 174 -> 0 bytes
 images/mini-arrow-orange-open.gif             |  Bin 53 -> 0 bytes
 images/mini-arrow-orange.gif                  |  Bin 54 -> 0 bytes
 images/mini_add.gif                           |  Bin 82 -> 0 bytes
 images/mini_search.gif                        |  Bin 99 -> 0 bytes
 images/mini_tree.gif                          |  Bin 74 -> 0 bytes
 images/newsroom-message.svg                   |  102 -
 images/newsroom_menu.png                      |  Bin 302 -> 0 bytes
 images/on-off-menu.png                        |  Bin 459 -> 0 bytes
 images/pencil-menu.png                        |  Bin 399 -> 0 bytes
 images/printableversion.png                   |  Bin 421 -> 0 bytes
 js/newsroom_menu.js                           |   15 +-
 js/simple_graph.js                            |    2 +-
 lib/composer/autoload_classmap.php            |    3 +
 lib/composer/autoload_static.php              |    3 +
 pages/UI.php                                  |    2 +-
 pages/preferences.php                         |    2 +-
 setup/compiler.class.inc.php                  |   59 +
 setup/itopdesignformat.class.inc.php          |    4 +
 37 files changed, 499 insertions(+), 3594 deletions(-)
 create mode 100644 application/themehandler.class.inc.php
 delete mode 100644 css/light-grey.css
 delete mode 100644 images/actions_bkg.png
 delete mode 100644 images/actions_left.png
 delete mode 100644 images/asc.gif
 delete mode 100644 images/help.png
 delete mode 100644 images/home.png
 delete mode 100644 images/menu.png
 delete mode 100644 images/mini-arrow-orange-open.gif
 delete mode 100644 images/mini-arrow-orange.gif
 delete mode 100644 images/mini_add.gif
 delete mode 100644 images/mini_search.gif
 delete mode 100644 images/mini_tree.gif
 delete mode 100755 images/newsroom-message.svg
 delete mode 100644 images/newsroom_menu.png
 delete mode 100755 images/on-off-menu.png
 delete mode 100755 images/pencil-menu.png
 delete mode 100644 images/printableversion.png

diff --git a/application/dashboard.class.inc.php b/application/dashboard.class.inc.php
index 892239644..98c8c9e1f 100644
--- a/application/dashboard.class.inc.php
+++ b/application/dashboard.class.inc.php
@@ -982,7 +982,7 @@ EOF
 	{
 		$oPage->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/jquery.iframe-transport.js');
 		$oPage->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/jquery.fileupload.js');
-		$sEditMenu = "<div id=\"DashboardMenu\"><ul><li><img src=\"../images/pencil-menu.png\"><ul>";
+		$sEditMenu = "<div id=\"DashboardMenu\"><ul><li><i class=\"top-right-icon icon-additional-arrow fas fa-pencil-alt\"></i><ul>";
 	
 		$aActions = array();
 		$sFile = addslashes($this->sDefinitionFile);
diff --git a/application/datatable.class.inc.php b/application/datatable.class.inc.php
index d687de538..7f5bbfcdb 100644
--- a/application/datatable.class.inc.php
+++ b/application/datatable.class.inc.php
@@ -369,7 +369,7 @@ EOF;
 		if (!$oPage->IsPrintableVersion())
 		{
 			$sMenuTitle = Dict::S('UI:ConfigureThisList');
-			$sHtml = '<div class="itop_popup toolkit_menu" id="tk_'.$this->iListId.'"><ul><li><img src="../images/toolkit_menu.png?t='.utils::GetCacheBusterTimestamp().'"><ul>';
+			$sHtml = '<div class="itop_popup toolkit_menu" id="tk_'.$this->iListId.'"><ul><li><i class="fas fa-tools"></i><i class="fas fa-caret-down"></i><ul>';
 	
 			$oMenuItem1 = new JSPopupMenuItem('iTop::ConfigureList', $sMenuTitle, "$('#datatable_dlg_".$this->iListId."').dialog('open');");
 			$aActions = array(
diff --git a/application/displayblock.class.inc.php b/application/displayblock.class.inc.php
index c84b3f038..71eb26da1 100644
--- a/application/displayblock.class.inc.php
+++ b/application/displayblock.class.inc.php
@@ -1880,11 +1880,11 @@ class MenuBlock extends DisplayBlock
 		{
 			if (count($aFavoriteActions) > 0)
 			{
-				$sHtml .= "<div class=\"itop_popup actions_menu\"><ul>\n<li>".Dict::S('UI:Menu:OtherActions')."\n<ul>\n";
+				$sHtml .= "<div class=\"itop_popup actions_menu\"><ul>\n<li>".Dict::S('UI:Menu:OtherActions')."<i class=\"fas fa-caret-down\"></i>"."\n<ul>\n";
 			}
 			else
 			{
-				$sHtml .= "<div class=\"itop_popup actions_menu\"><ul>\n<li>".Dict::S('UI:Menu:Actions')."\n<ul>\n";
+				$sHtml .= "<div class=\"itop_popup actions_menu\"><ul>\n<li>".Dict::S('UI:Menu:Actions')."<i class=\"fas fa-caret-down\"></i>"."\n<ul>\n";
 			}
 
 			$sHtml .= $oPage->RenderPopupMenuItems($aActions, $aFavoriteActions);
diff --git a/application/itopwebpage.class.inc.php b/application/itopwebpage.class.inc.php
index c4a39a4a8..a26187a33 100644
--- a/application/itopwebpage.class.inc.php
+++ b/application/itopwebpage.class.inc.php
@@ -837,6 +837,8 @@ JS
 	protected function InitNewsroom()
 	{
 		$sNewsroomInitialImage = '';
+		$aProviderParams = array();
+
 		if (MetaModel::GetConfig()->Get('newsroom_enabled') !== false)
 	 	{
 			$oUser = UserRights::GetUserObject();
@@ -844,49 +846,47 @@ JS
 			 * @var iNewsroomProvider[] $aProviders
 			 */
 			$aProviders = MetaModel::EnumPlugins('iNewsroomProvider');
-			$aProviderParams = array();
 			foreach($aProviders as $oProvider)
 			{
 				$oProvider->SetConfig(MetaModel::GetConfig());
-				$bProviderEnabled = appUserPreferences::GetPref('newsroom_provider_'.get_class($oProvider), true);
-			if ($bProviderEnabled && $oProvider->IsApplicable($oUser))
-			{
-				$aProviderParams[] = array(
-					'label' => $oProvider->GetLabel(),
-					'fetch_url' => $oProvider->GetFetchURL(),
-					'view_all_url' => $oProvider->GetViewAllURL(),
-					'mark_all_as_read_url' => $oProvider->GetMarkAllAsReadURL(),
-					'placeholders' => $oProvider->GetPlaceholders(),
-					'ttl' => $oProvider->GetTTL(),
-				);
+				$bProviderEnabled = appUserPreferences::GetPref('newsroom_provider_'.get_class($oProvider),true);
+				if ($bProviderEnabled && $oProvider->IsApplicable($oUser))
+				{
+					$aProviderParams[] = array(
+						'label' => $oProvider->GetLabel(),
+						'fetch_url' => $oProvider->GetFetchURL(),
+						'view_all_url' => $oProvider->GetViewAllURL(),
+						'mark_all_as_read_url' => $oProvider->GetMarkAllAsReadURL(),
+						'placeholders' => $oProvider->GetPlaceholders(),
+						'ttl' => $oProvider->GetTTL(),
+					);
+				}
 			}
-			}
-
-			// Show newsroom only if there are some providers
-			if (count($aProviderParams) > 0)
-			{
-				$sImageUrl= '../images/newsroom_menu.png';
-				$sPlaceholderImageUrl= '../images/newsroom-message.svg';
-				$aParams = array(
-					'image_url' => $sImageUrl,
-					'placeholder_image_url' => $sPlaceholderImageUrl,
-					'cache_uuid' => 'itop-newsroom-'.UserRights::GetUserId().'-'.md5(APPROOT),
-					'providers' => $aProviderParams,
-					'display_limit' => (int)appUserPreferences::GetPref('newsroom_display_size', 7),
-					'labels' => array(
-						'no_message' => Dict::S('UI:Newsroom:NoNewMessage'),
-						'mark_all_as_read' => Dict::S('UI:Newsroom:MarkAllAsRead'),
-						'view_all' => Dict::S('UI:Newsroom:ViewAllMessages'),
-					),
-				);
-				$sParams = json_encode($aParams);
-				$this->add_ready_script(
-	<<<EOF
-		$('#top-left-newsroom-cell').newsroom_menu($sParams);
+		}
+		// Show newsroom only if there are some providers
+		if (count($aProviderParams) > 0)
+		{
+			$sImageUrl= 'fas fa-comment-dots';
+			$sPlaceholderImageUrl= 'far fa-envelope';
+			$aParams = array(
+				'image_icon' => $sImageUrl,
+				'placeholder_image_icon' => $sPlaceholderImageUrl,
+				'cache_uuid' => 'itop-newsroom-'.UserRights::GetUserId().'-'.md5(APPROOT),
+				'providers' => $aProviderParams,
+				'display_limit' => (int)appUserPreferences::GetPref('newsroom_display_size', 7),
+				'labels' => array(
+					'no_message' => Dict::S('UI:Newsroom:NoNewMessage'),
+					'mark_all_as_read' => Dict::S('UI:Newsroom:MarkAllAsRead'),
+					'view_all' => Dict::S('UI:Newsroom:ViewAllMessages'),
+				),
+			);
+			$sParams = json_encode($aParams);
+			$this->add_ready_script(
+<<<EOF
+	$('#top-left-newsroom-cell').newsroom_menu($sParams);
 EOF
-				);
-				$sNewsroomInitialImage = '<img style="opacity:0.4" src="../images/newsroom_menu.png">';
-			}
+			);
+			$sNewsroomInitialImage = '<i style="opacity:0.4" class="top-right-icon fas fa-comment-dots"></i>';
 		}
 		// else no newsroom menu
 		return $sNewsroomInitialImage;
@@ -1203,7 +1203,7 @@ EOF;
 			{
 				$sLogonMessage = Dict::Format('UI:LoggedAsMessage', $sUserName);
 			}
-			$sLogOffMenu = "<span id=\"logOffBtn\"><ul><li><img src=\"../images/on-off-menu.png\"><ul>";
+			$sLogOffMenu = "<span id=\"logOffBtn\"><ul><li><i class=\"top-right-icon icon-additional-arrow fas fa-power-off\"></i><ul>";
 			$sLogOffMenu .= "<li><span>$sLogonMessage</span></li>\n";
 			$aActions = array();
 
@@ -1365,10 +1365,10 @@ EOF;
 			$sHtml .= ' <table id="top-bar-table">';
 			$sHtml .= ' <tr>';
 			$sHtml .= ' <td id="open-left-pane"  class="menu-pane-exclusive" style="'.$GoHomeInitialStyle.'" onclick="$(\'body\').layout().open(\'west\');">';
-			$sHtml .= ' <img src="../images/menu.png">';
+			$sHtml .= ' <i class="fas fa-bars"></i>';
 			$sHtml .= ' </td>';
 			$sHtml .= ' <td id="go-home" class="menu-pane-exclusive" style="'.$GoHomeInitialStyle.'">';
-			$sHtml .= ' <a href="'.utils::GetAbsoluteUrlAppRoot().'pages/UI.php"><img src="../images/home.png"></a>';
+			$sHtml .= ' <a href="'.utils::GetAbsoluteUrlAppRoot().'pages/UI.php"><i class="fas fa-home"></i></a>';
 			$sHtml .= ' </td>';
 			$sHtml .= ' <td class="top-bar-spacer menu-pane-exclusive" style="'.$GoHomeInitialStyle.'">';
 			$sHtml .= ' </td>';
@@ -1378,8 +1378,8 @@ EOF;
 			$sHtml .= ' <td id="top-bar-table-search">';
 			$sHtml .= '		<div id="global-search"><form action="'.utils::GetAbsoluteUrlAppRoot().'pages/UI.php">';
 			$sHtml .= '		<table id="top-left-buttons-area"><tr>';
-			$sHtml .= '			<td id="top-left-global-search-cell"><div id="global-search-area"><input id="global-search-input" type="text" name="text" placeholder="'.$sDefaultPlaceHolder.'" value="'.$sText.'"></input><div '.$sOnClick.' id="global-search-image"><input type="hidden" name="operation" value="full_text"/></div></div></td>';
-			$sHtml .= '     	<td id="top-left-help-cell"><a id="help-link" href="'.$sOnlineHelpUrl.'" target="_blank"><img title="'.Dict::S('UI:Help').'" src="../images/help.png?t='.utils::GetCacheBusterTimestamp().'"/></td>';
+			$sHtml .= '			<td id="top-left-global-search-cell"><div id="global-search-area"><input id="global-search-input" type="text" name="text" placeholder="'.$sDefaultPlaceHolder.'" value="'.$sText.'"></input><div '.$sOnClick.' id="global-search-image"><i class="top-right-icon fa-flip-horizontal fas fa-search"></i><input type="hidden" name="operation" value="full_text"/></div></div></td>';
+			$sHtml .= '     	<td id="top-left-help-cell"><a id="help-link" href="'.$sOnlineHelpUrl.'" target="_blank" title="'.Dict::S('UI:Help').'"><i class="top-right-icon fas fa-question-circle"></i></a></td>';
 			$sHtml .= '		<td id="top-left-newsroom-cell">'.$sNewsRoomInitialImage.'</td>';
 			$sHtml .= '     	<td id="top-left-logoff-cell">'.self::FilterXSS($sLogOffMenu).'</td>';
 			$sHtml .= '     </tr></table></form></div>';
diff --git a/application/menunode.class.inc.php b/application/menunode.class.inc.php
index 28bb75ba6..071af7a04 100644
--- a/application/menunode.class.inc.php
+++ b/application/menunode.class.inc.php
@@ -988,7 +988,7 @@ class SearchMenuNode extends MenuNode
 	public function RenderContent(WebPage $oPage, $aExtraParams = array())
 	{
 		ApplicationMenu::CheckMenuIdEnabled($this->GetMenuId());
-		$oPage->SetBreadCrumbEntry("menu-".$this->sMenuId, $this->GetTitle(), '', '', utils::GetAbsoluteUrlAppRoot().'images/search.png');
+		$oPage->SetBreadCrumbEntry("menu-".$this->sMenuId, $this->GetTitle(), '', '', utils::GetAbsoluteUrlAppRoot().'images/breadcrumb-search.png');
 
 		$oSearch = new DBObjectSearch($this->sClass);
 		$aParams = array_merge(array('table_id' => 'Menu_'.utils::GetSafeId($this->GetMenuId())), $aExtraParams);
diff --git a/application/nicewebpage.class.inc.php b/application/nicewebpage.class.inc.php
index 5ab67ecf8..ca3ac1cac 100644
--- a/application/nicewebpage.class.inc.php
+++ b/application/nicewebpage.class.inc.php
@@ -46,8 +46,7 @@ class NiceWebPage extends WebPage
 		{
 			$this->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/jquery-migrate.prod.min.js');
 		}
-		$this->add_linked_stylesheet(utils::GetAbsoluteUrlAppRoot().'css/ui-lightness/jquery-ui-1.11.4.custom.css');
-		$this->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/jquery-ui-1.11.4.custom.min.js');
+	    $this->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/jquery-ui-1.11.4.custom.min.js');
 		$this->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/utils.js');
 		$this->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/hovertip.js');
 		// table sorting
@@ -124,7 +123,8 @@ class NiceWebPage extends WebPage
 	$("table.listResults").tableHover(); // hover tables
 EOF
 		);
-		$this->add_saas("css/light-grey.scss");
+	    $sCssThemeUrl = ThemeHandler::GetTheme();
+		$this->add_linked_stylesheet($sCssThemeUrl);
 
 		$this->m_sRootUrl = $this->GetAbsoluteUrlAppRoot();
      	$sAbsURLAppRoot = addslashes($this->m_sRootUrl);
diff --git a/application/themehandler.class.inc.php b/application/themehandler.class.inc.php
new file mode 100644
index 000000000..375d86ef9
--- /dev/null
+++ b/application/themehandler.class.inc.php
@@ -0,0 +1,74 @@
+<?php
+/**
+ *
+ *  * Copyright (C) 2013-2019 Combodo SARL
+ *  *
+ *  * This file is part of iTop.
+ *  *
+ *  * iTop is free software; you can redistribute it and/or modify
+ *  * it under the terms of the GNU Affero General Public License as published by
+ *  * the Free Software Foundation, either version 3 of the License, or
+ *  * (at your option) any later version.
+ *  *
+ *  * iTop is distributed in the hope that it will be useful,
+ *  * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  * GNU Affero General Public License for more details.
+ *  *
+ *  * You should have received a copy of the GNU Affero General Public License
+ *  
+ */
+
+use ScssPhp\ScssPhp\Compiler;
+
+class ThemeHandler{
+
+	public static function GetTheme()
+	{
+		$sThemeId = MetaModel::GetConfig()->Get('backoffice_default_theme');
+		$sEnvPath =  APPROOT.'env-' . utils::GetCurrentEnvironment() .'/';
+		$sThemePath = $sEnvPath.'/branding/themes/'.$sThemeId.'/';
+		$aThemeParameters = json_decode(file_get_contents($sThemePath.'theme-parameters.json'), true);
+		$sThemeCssPath = $sThemePath.'main.css';
+		
+		$sTheme = '';
+		$iStyleLastModified = 0;
+		clearstatcache();
+		// Loading files to import and stylesheet to compile, also getting most recent modification time on overall files
+		foreach ($aThemeParameters['imports'] as $sImport)
+		{
+			$sTheme.= '@import "' . $sImport . '";' . "\n";
+			
+			$iImportLastModified = filemtime($sEnvPath.$sImport);
+			$iStyleLastModified = $iStyleLastModified < $iImportLastModified ? $iImportLastModified : $iStyleLastModified;
+		}
+		foreach ($aThemeParameters['stylesheets'] as $sStylesheet)
+		{
+			$sTheme.= '@import "' . $sStylesheet . '";'."\n";
+			
+			$iStylesheetLastModified = filemtime($sEnvPath.$sStylesheet);
+			$iStyleLastModified = $iStyleLastModified < $iStylesheetLastModified ? $iStylesheetLastModified : $iStyleLastModified;
+		}
+		
+		// Checking if our compiled css is outdated
+		if (!file_exists($sThemeCssPath) || (is_writable($sThemePath) && (filemtime($sThemeCssPath) < $iStyleLastModified)))
+		{
+			$oScss = new Compiler();
+			$oScss->setFormatter('ScssPhp\\ScssPhp\\Formatter\\Expanded');
+			// Setting our xml variables
+			$oScss->setVariables($aThemeParameters['variables']);
+			// Setting our import path to env-*
+			$oScss->setImportPaths($sEnvPath);
+			// Temporary disabling max exec time while compiling
+			$iCurrentMaxExecTime = (int) ini_get('max_execution_time');
+			set_time_limit(0);
+			// Compiling our theme
+			$sThemeCss = $oScss->compile($sTheme);
+			set_time_limit($iCurrentMaxExecTime);
+			file_put_contents($sThemePath.'main.css', $sThemeCss);
+		}
+		// Return absolute url to theme compiled css
+		return utils::GetAbsoluteUrlModulesRoot().'/branding/themes/'.$sThemeId.'/main.css';
+	}
+}
+
diff --git a/application/ui.extkeywidget.class.inc.php b/application/ui.extkeywidget.class.inc.php
index b371d6204..5ea48a021 100644
--- a/application/ui.extkeywidget.class.inc.php
+++ b/application/ui.extkeywidget.class.inc.php
@@ -274,7 +274,7 @@ EOF
 
 			// the input for the auto-complete
 			$sHTMLValue .= "<input class=\"field_autocomplete\" type=\"text\" id=\"label_$this->iId\" value=\"$sDisplayValue\"/>";
-			$sHTMLValue .= "<span class=\"field_input_btn\"><img id=\"mini_search_{$this->iId}\" style=\"border:0;vertical-align:middle;cursor:pointer;\" src=\"../images/mini_search.gif?t=".utils::GetCacheBusterTimestamp()."\" onClick=\"oACWidget_{$this->iId}.Search();\"/></span>";
+			$sHTMLValue .= "<span class=\"field_input_btn\"><div class=\"mini_button\"  id=\"mini_search_{$this->iId}\" onClick=\"oACWidget_{$this->iId}.Search();\"><i class=\"fas fa-search\"></i></div></span>";
 
 			// another hidden input to store & pass the object's Id
 			$sHTMLValue .= "<input type=\"hidden\" id=\"$this->iId\" name=\"{$sAttrFieldPrefix}{$sFieldName}\" value=\"".htmlentities($value, ENT_QUOTES, 'UTF-8')."\" />\n";
@@ -298,7 +298,7 @@ EOF
 		}
 		if ($bExtensions && MetaModel::IsHierarchicalClass($this->sTargetClass) !== false)
 		{
-			$sHTMLValue .= "<span class=\"field_input_btn\"><img id=\"mini_tree_{$this->iId}\" style=\"border:0;vertical-align:middle;cursor:pointer;\" src=\"../images/mini_tree.gif?t=".utils::GetCacheBusterTimestamp()."\" onClick=\"oACWidget_{$this->iId}.HKDisplay();\"/></span>";
+			$sHTMLValue .= "<span class=\"field_input_btn\"><div class=\"mini_button\" id=\"mini_tree_{$this->iId}\" onClick=\"oACWidget_{$this->iId}.HKDisplay();\"><i class=\"fas fa-sitemap\"></i></div></span>";
 			$oPage->add_ready_script(
 <<<EOF
 			if ($('#ac_tree_{$this->iId}').length == 0)
@@ -312,7 +312,7 @@ EOF
 		{
 			$sCallbackName = (MetaModel::IsAbstract($this->sTargetClass)) ? 'SelectObjectClass' : 'CreateObject';
 
-			$sHTMLValue .= "<span class=\"field_input_btn\"><img id=\"mini_add_{$this->iId}\" style=\"border:0;vertical-align:middle;cursor:pointer;\" src=\"../images/mini_add.gif?t=".utils::GetCacheBusterTimestamp()."\" onClick=\"oACWidget_{$this->iId}.{$sCallbackName}();\"/></span>";
+			$sHTMLValue .= "<span class=\"field_input_btn\"><div class=\"mini_button\" id=\"mini_add_{$this->iId}\" onClick=\"oACWidget_{$this->iId}.{$sCallbackName}();\"><i class=\"fas fa-plus\"></i></div></span>";
 			$oPage->add_ready_script(
 <<<EOF
 		if ($('#ajax_{$this->iId}').length == 0)
diff --git a/core/config.class.inc.php b/core/config.class.inc.php
index e2a251fb2..24819a8d7 100644
--- a/core/config.class.inc.php
+++ b/core/config.class.inc.php
@@ -1240,6 +1240,14 @@ class Config
 			'source_of_value' => '',
 			'show_in_conf_sample' => false,
 		),
+		'backoffice_default_theme' => array(
+			'type' => 'string',
+			'description' => 'Default theme used for '.ITOP_APPLICATION_SHORT.'\'s console',
+			'default' => 'light-grey',
+			'value' => '',
+			'source_of_value' => '',
+			'show_in_conf_sample' => false,
+		),
 	);
 
 	public function IsProperty($sPropCode)
diff --git a/css/css-variables.scss b/css/css-variables.scss
index 453575903..7542437db 100644
--- a/css/css-variables.scss
+++ b/css/css-variables.scss
@@ -1,5 +1,6 @@
 // Beware the version number MUST be enclosed with quotes otherwise v2.3.0 becomes v2 0.3 .0
 $version: "v2.7.0-dev";
+$approot-relative: "../../../../../"; // relative to env-***/branding/themes/***/main.css
 
 // Base colors
 $gray-base:              #000 !default;
@@ -21,32 +22,57 @@ $combodo-dark-gray-dark:	darken($combodo-dark-gray, 13.5%) !default;
 $combodo-dark-gray-darker:	darken($combodo-dark-gray, 18%) !default;
 
 // Vars
-$highlight-color: $combodo-orange;
-$grey-color: #555555;
-$complement-color: #1c94c4;
-$complement-light: #d6e8ef;
-$frame-background-color: $gray-extra-light;
-$text-color: #000;
-$box-radius: 0px;
-$box-shadow-regular: 0 1px 1px rgba(0, 0, 0, 0.15);
+$highlight-color: $combodo-orange !default;
+$grey-color: #555555 !default;
+$complement-color: #1c94c4 !default;
+$complement-light: #d6e8ef !default;
+$frame-background-color: $gray-extra-light !default;
+$text-color: #000 !default;
+$box-radius: 0px !default;
+$box-shadow-regular: 0 1px 1px rgba(0, 0, 0, 0.15) !default;
 
-$hyperlink-color: $complement-color;
-$hyperlink-text-decoration: none;
+$hyperlink-color: $complement-color !default;
+$hyperlink-text-decoration: none !default;
 
 ////////////
 // Search //
-$search-criteria-box-color: #2D2D2D;
-$search-criteria-box-picto-color: #E87C1E;
-$search-criteria-box-bg-color: #EEEEEE;
-$search-criteria-box-hover-color: $white;
-$search-criteria-box-border-color: #CCCCCC;
-$search-criteria-box-border: 1px solid $search-criteria-box-border-color;
-$search-criteria-box-radius: 1px;
+$search-criteria-box-color: #2D2D2D !default;
+$search-criteria-box-picto-color: #E87C1E !default;
+$search-criteria-box-bg-color: #EEEEEE !default;
+$search-criteria-box-hover-color: $white !default;
+$search-criteria-box-border-color: #CCCCCC !default;
+$search-criteria-box-border: 1px solid $search-criteria-box-border-color !default;
+$search-criteria-box-radius: 1px !default;
 //
-$search-add-criteria-box-color: $search-criteria-box-color;
-$search-add-criteria-box-bg-color: $white;
-$search-add-criteria-box-hover-color: $gray-extra-light;
+$search-add-criteria-box-color: $search-criteria-box-color !default;
+$search-add-criteria-box-bg-color: $white !default;
+$search-add-criteria-box-hover-color: $gray-extra-light !default;
 //
-$search-button-box-color: $combodo-orange;
-$search-button-box-bg-color: $white;
-$search-button-box-bg-hover-color: $gray-extra-light;
+$search-button-box-color: $combodo-orange !default;
+$search-button-box-bg-color: $white !default;
+$search-button-box-bg-hover-color: $gray-extra-light !default;
+
+// Console elements
+$summary-details-background: $grey-color !default; 
+$main-header-background: $frame-background-color !default;
+$table-even-background: $frame-background-color !default;
+$popup-menu-highlight-color: $highlight-color !default;
+$popup-menu-text-color: #000 !default;
+$popup-menu-background-color: #fff !default;
+$popup-menu-text-higlight-color: #fff !default;
+$breadcrumb-color: #555 !default;
+$breadcrumb-text-color: #fff !default;
+$breadcrumb-highlight-color: $highlight-color !default;
+$breadcrumb-text-highlight-color: #fff !default;
+
+// JQuery UI widgets vars
+$primary-text-color: #333333 !default;
+$secondary-text-color: $grey-color !default;
+$error-text-color: $white !default;
+$highlight-text-color: #363636 !default;
+$hover-background-color: #fde17c;
+$border-highlight-color: #f26522;
+$highlight-item-color: $white !default;
+$content-color: #eeeeee !default; 
+$default-font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif !default;
+$icons-filter: hue-rotate(0deg) !default;
\ No newline at end of file
diff --git a/css/light-grey.css b/css/light-grey.css
deleted file mode 100644
index 3d3879992..000000000
--- a/css/light-grey.css
+++ /dev/null
@@ -1,3251 +0,0 @@
-/*
- * Copyright (C) 2013-2019 Combodo SARL
- *
- * This file is part of iTop.
- *
- * iTop is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * iTop is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- */
-
-/* CSS Document */
-body {
-  font-family: Tahoma, Verdana, Arial, Helvetica;
-  font-size: 10pt;
-  color: #000;
-  margin: 0;
-  /* Remove body margin/padding */
-  padding: 0;
-  overflow: hidden;
-  /* Remove scroll bars on browser window */
-}
-body.printable-version {
-  margin: 1.5em;
-  overflow: auto;
-}
-/* to prevent flicker, hide the pane's content until it's ready */
-.ui-layout-center, .ui-layout-north, .ui-layout-south {
-  display: none;
-}
-.ui-layout-content {
-  padding-left: 10px;
-}
-.ui-layout-content .ui-tabs-nav li {
-  /* Overriding jQuery UI theme to see active tab better */
-  margin-bottom: 2px;
-}
-.ui-layout-content .ui-tabs-nav li.ui-tabs-active {
-  padding-bottom: 3px;
-}
-.raw_output {
-  font-family: Courier-New, Courier, Arial, Helvetica;
-  font-size: 8pt;
-  background-color: #eee;
-  color: #000;
-  border: 1px dashed #000;
-  padding: 0.25em;
-  margin-top: 1em;
-}
-h1 {
-  font-family: Tahoma, Verdana, Arial, Helvetica;
-  color: #000;
-  font-weight: bold;
-  font-size: 12pt;
-}
-h2 {
-  font-family: Tahoma, Verdana, Arial, Helvetica;
-  color: #000;
-  font-weight: normal;
-  font-size: 12pt;
-}
-h3 {
-  font-family: Tahoma, Verdana, Arial, Helvetica;
-  color: #000;
-  font-weight: normal;
-  font-size: 10pt;
-}
-label {
-  cursor: pointer;
-}
-.hilite, .hilite a, .hilite a:visited {
-  color: #ea7d1e;
-  text-decoration: none;
-}
-table.datatable {
-  width: 100%;
-  border: 0;
-  padding: 0;
-}
-td.menucontainer {
-  text-align: right;
-}
-table.listResults {
-  padding: 0px;
-  border-top: 3px solid #f1f1f1;
-  border-left: 3px solid #f1f1f1;
-  border-bottom: 3px solid #e6e6e1;
-  border-right: 3px solid #e6e6e1;
-  width: 100%;
-  background-color: #fff;
-}
-table.listResults td {
-  padding: 2px;
-}
-table.listResults td .view-image {
-  width: inherit !important;
-  height: inherit !important;
-}
-table.listResults td .view-image img {
-  max-width: 48px !important;
-  max-height: 48px !important;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-table.listResults > tbody > tr > * {
-  transition: background-color 400ms linear;
-}
-table.listResults > tbody > tr:hover > * {
-  cursor: pointer;
-}
-table.listResults > tbody > tr.selected:hover > * {
-  /* hover on lines is currently done toggling td.hover, and having a rule for links */
-  background-color: #f3b37b;
-  color: #000;
-}
-table.listResults > tbody > tr:hover > * {
-  /* hover on lines is currently done toggling td.hover, and having a rule for links */
-  background-color: #fdf5d0;
-  color: #000;
-}
-.edit-image .view-image {
-  display: inline-block;
-}
-.edit-image .view-image img[src=""], .edit-image .view-image img[src="null"] {
-  visibility: hidden;
-}
-.edit-image .view-image.dirty.compat {
-  background-image: url("ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png");
-}
-.edit-image .view-image.dirty.compat img {
-  opacity: 0.3;
-}
-.edit-image .edit-buttons {
-  display: inline-block;
-  vertical-align: top;
-  margin-top: 4px;
-  margin-left: 3px;
-}
-.edit-image .edit-buttons .button {
-  cursor: pointer;
-  margin-bottom: 3px;
-  padding: 2px;
-  background-color: #ea7d1e;
-}
-.edit-image .edit-buttons .button.disabled {
-  cursor: default;
-  background-color: #555;
-  opacity: 0.3;
-}
-.edit-image .edit-buttons .button .ui-icon {
-  background-image: url("ui-lightness/images/ui-icons_ffffff_256x240.png");
-}
-.edit-image .file-input {
-  display: block;
-}
-/* Center the image both horizontally and vertically, withing a box which size is fixed (depends on the attribute definition) */
-.details .view-image {
-  text-align: center;
-  padding: 2px;
-  border: 2px solid #ddd;
-  border-radius: 6px;
-}
-.details .view-image img {
-  display: inline-block;
-  vertical-align: middle;
-  max-width: 90% !important;
-  max-height: 90% !important;
-  cursor: zoom-in;
-}
-.details .view-image .helper-middle {
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-}
-table.listContainer {
-  border: 0;
-  padding: 0;
-  margin: 0;
-  width: 100%;
-  clear: both;
-}
-tr.containerHeader, tr.containerHeader td {
-  background: transparent;
-}
-tr.even td, .wizContainer tr.even td {
-  background-color: #f1f1f1;
-}
-tr.red_even td, .wizContainer tr.red_even td {
-  background-color: #f97e75;
-  color: #fff;
-}
-tr.red td, .wizContainer tr.red td {
-  background-color: #f9a397;
-  color: #fff;
-}
-tr.orange_even td, .wizContainer tr.orange_even td {
-  background-color: #f4d07a;
-}
-tr.orange td, .wizContainer tr.orange td {
-  background-color: #f4e96c;
-}
-tr.green_even td, .wizContainer tr.green_even td {
-  background-color: #bee5a3;
-}
-tr.green td, .wizContainer tr.green td {
-  background-color: #b3e5b4;
-}
-tr td.hover, tr.even td.hover, .hover a, .hover a:visited, .hover a:hover, .wizContainer tr.even td.hover, .wizContainer tr td.hover {
-  color: #000;
-}
-th {
-  font-family: Tahoma, Verdana, Arial, Helvetica;
-  font-size: 8pt;
-  color: #1c94c4;
-  height: 20px;
-  background: #f1f1f1 bottom repeat-x;
-}
-th.header {
-  cursor: pointer;
-  background-repeat: no-repeat;
-  background-position: center right;
-  background-repeat: no-repeat;
-  padding-right: 16px;
-}
-th.headerSortUp {
-  background-image: url(../images/asc.gif);
-  text-decoration: underline;
-  cursor: pointer;
-}
-th.headerSortDown {
-  background-image: url(../images/desc.gif);
-  text-decoration: underline;
-  cursor: pointer;
-}
-td {
-  font-family: Tahoma, Verdana, Arial, Helvetica;
-  font-size: 12px;
-  color: #696969;
-  nobackground-color: #fff;
-  padding: 0px;
-}
-tr.clicked td {
-  font-family: Tahoma, Verdana, Arial, Helvetica;
-  font-size: smaller;
-  background-color: #ffcfe8;
-}
-td.label {
-  vertical-align: top;
-}
-td.label span {
-  font-family: Tahoma, Verdana, Arial, Helvetica;
-  font-size: 12px;
-  color: #000;
-  padding: 5px;
-  padding-right: 10px;
-  font-weight: bold;
-  vertical-align: top;
-  text-align: right;
-  display: block;
-}
-fieldset td.label span {
-  padding: 3px;
-  padding-right: 10px;
-}
-fieldset {
-  margin-top: 3px;
-  -moz-border-radius: 6px;
-  -webkit-border-radius: 6px;
-  border-radius: 6px;
-  border-style: solid;
-  border-color: #ddd;
-}
-legend {
-  font-family: Tahoma, Verdana, Arial, Helvetica;
-  font-size: 12px;
-  padding: 8px;
-  color: #fff;
-  background-color: #1c94c4;
-  font-weight: bold;
-  -moz-border-radius: 6px;
-  -webkit-border-radius: 6px;
-  border-radius: 6px;
-}
-legend.transparent {
-  background: transparent;
-  color: #333;
-  font-size: 1em;
-  font-weight: normal;
-  padding: 0;
-}
-.ui-widget-content td legend a, .ui-widget-content td legend a:hover, .ui-widget-content td legend a:visited {
-  color: #fff;
-}
-.ui-widget-content td a, p a, p a:visited, td a, td a:visited {
-  text-decoration: none;
-  color: #1c94c4;
-}
-.ui-widget-content td a.cke_button, .ui-widget-content td a.cke_toolbox_collapser, .ui-widget-content td a.cke_combo_button, cke_dialog a {
-  padding-left: 0;
-  background-image: none;
-}
-.ui-widget-content td a:hover, p a:hover, td a:hover {
-  text-decoration: underline;
-  color: #ea7d1e;
-}
-.cke_reset_all *:hover {
-  text-decoration: none;
-  color: #000;
-}
-table.cke_dialog_contents a.cke_dialog_ui_button_ok {
-  color: #000;
-  border-color: #ea7d1e;
-  background: #ea7d1e;
-}
-.cke_notifications_area {
-  display: none;
-}
-td a.no-arrow, td a.no-arrow:visited, .SearchDrawer a.no-arrow, .SearchDrawer a.no-arrow:visited {
-  text-decoration: none;
-  color: #000;
-  padding-left: 0px;
-  background: inherit;
-}
-td a.no-arrow:hover {
-  text-decoration: underline;
-  color: #d81515;
-  padding-left: 0px;
-  background: inherit;
-}
-td a:hover .text_decoration, td a:visited:hover .text_decoration {
-  color: #d56e14;
-}
-td a .text_decoration, td a:visited .text_decoration {
-  vertical-align: baseline;
-  text-decoration: none;
-  color: #ea7d1e;
-  margin-right: 8px;
-  transition: color 0.2s ease-in-out;
-}
-a.small_action {
-  font-family: Tahoma, Verdana, Arial, Helvetica;
-  font-size: 8pt;
-  color: #000;
-  text-decoration: none;
-}
-.display_block {
-  padding: 0.25em;
-}
-.actions_details {
-  float: right;
-  margin-top: 10px;
-  margin-right: 10px;
-  padding-left: 5px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  background: #ea7d1e url(../images/actions_left.png?v=v2.7.0-dev) no-repeat left;
-}
-.actions_details span {
-  background: url(../images/actions_right.png?v=v2.7.0-dev) no-repeat right;
-  color: #fff;
-  font-weight: bold;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  padding-right: 12px;
-}
-.actions_details a {
-  text-decoration: none;
-}
-.loading {
-  noborder: 1px dashed #ccc;
-  background: #b9c1c8;
-  padding: 0.25em;
-}
-input.textSearch {
-  border: 1px solid #000;
-  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
-  font-size: 12px;
-  color: #000;
-}
-.ac_input {
-  border: 1px solid #7f9db9;
-  background: #fff url(../images/ac-background.gif) no-repeat right;
-}
-/* By Rom */
-.csvimport_createobj {
-  color: #a00;
-  background-color: #eee;
-}
-.csvimport_error {
-  font-weight: bold;
-  color: #f00;
-  background-color: #eee;
-}
-.csvimport_warning {
-  color: #c88;
-  background-color: #eee;
-}
-.csvimport_ok {
-  color: #000;
-  background-color: #bfb;
-}
-.csvimport_reconkey {
-  font-style: italic;
-  color: #888;
-  background-color: #fff;
-}
-.csvimport_extreconkey {
-  color: #888;
-  background-color: #fff;
-}
-#accordion {
-  display: none;
-}
-#accordion h3 {
-  padding: 10px;
-}
-.ui-accordion-content ul {
-  list-style: none;
-  list-style-image: none;
-  padding-left: 16px;
-  margin-top: 8px;
-}
-.ui-accordion-content li.submenu {
-  margin-top: 8px;
-}
-.ui-accordion-content ul ul {
-  padding: 8px 0px 8px 8px;
-  margin: 0;
-  list-style: none;
-  list-style-image: none;
-  border: 0;
-}
-.nothing {
-  noborder-top: 1px solid #8b8b8b;
-  padding: 4px 0px 0px 16px;
-  font-size: 8pt;
-  background: url(../images/green-square.gif) no-repeat bottom left;
-  color: #83b217;
-  font-weight: bold;
-  text-decoration: none;
-}
-div.ui-accordion-content {
-  padding-top: 10px;
-  padding-left: 10px;
-}
-.ui-accordion-content a, ui-accordion-content a:visited {
-  color: #1c94c4;
-  text-decoration: none;
-}
-.ui-accordion-content a:hover {
-  color: #ea7d1e;
-  text-decoration: none;
-}
-.ui-accordion-content ul {
-  padding-left: 0;
-  margin-top: 0;
-}
-.ui-accordion-content li {
-  color: #555;
-  text-decoration: none;
-  margin: 0;
-  padding: 0px 0pt 0px 16px;
-  font-size: 9pt;
-  background: url(../images/mini-arrow-orange.gif) no-repeat top left;
-  font-weight: normal;
-  border: 0;
-}
-a.CollapsibleLabel, td a.CollapsibleLabel {
-  margin: 0;
-  padding: 0px 0pt 0px 16px;
-  font-size: 8pt;
-  text-decoration: none;
-  color: #555;
-  background: url(../images/mini-arrow-orange.gif) no-repeat left;
-}
-/* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
-a.CollapsibleLabel.open, td a.CollapsibleLabel.open {
-  margin: 0;
-  padding: 0px 0pt 0px 16px;
-  font-size: 8pt;
-  text-decoration: none;
-  color: #ea7d1e;
-  background: url(../images/mini-arrow-orange-open.gif) no-repeat left;
-}
-.page_header {
-  background-color: #f1f1f1;
-  padding: 5px;
-}
-/* move up a header immediately following a display block (i.e. "actions" menu) */
-.display_block + .page_header {
-  margin-top: -8px;
-}
-.notreeview li {
-  background: url(../images/tv-item.gif) 0 0 no-repeat;
-}
-.notreeview .collapsable {
-  background-image: url(../images/tv-collapsable.gif);
-}
-.notreeview .expandable {
-  background-image: url(../images/tv-expandable.gif);
-}
-.notreeview .last {
-  background-image: url(../images/tv-item-last.gif);
-}
-.notreeview .lastCollapsable {
-  background-image: url(../images/tv-collapsable-last.gif);
-}
-.notreeview .lastExpandable {
-  background-image: url(../images/tv-expandable-last.gif);
-}
-#OrganizationSelection {
-  padding: 5px 0px 16px 20px;
-}
-/* popup menus */
-div.itop_popup {
-  margin: 0;
-  padding: 0;
-  float: right;
-}
-div.itop_popup > ul > li {
-  list-style: none;
-  cursor: pointer;
-  position: relative;
-}
-div.actions_menu > ul {
-  height: 19px;
-  line-height: 17px;
-  vertical-align: middle;
-  display: block;
-  nowidth: 70px;
-  padding-left: 5px;
-  /* Nasty work-around for IE... en attendant mieux */
-  background: #ea7d1e url(../images/actions_left.png?v=v2.7.0-dev) no-repeat top left;
-  cursor: pointer;
-  margin: 0;
-}
-div.actions_menu > ul > li {
-  float: left;
-  list-style: none;
-  font-size: 11px;
-  font-family: Tahoma, sans-serif;
-  height: 17px;
-  padding-right: 16px;
-  padding-left: 4px;
-  background: url(../images/actions_right.png?v=v2.7.0-dev) no-repeat top right transparent;
-  font-weight: bold;
-  color: #fff;
-  vertical-align: middle;
-  margin: 0;
-}
-#logOffBtn > ul > li {
-  list-style: none;
-  vertical-align: middle;
-  margin: 0;
-  padding-left: 10px;
-  padding-right: 10px;
-  cursor: pointer;
-}
-#logOffBtn > ul {
-  list-style: none;
-  vertical-align: middle;
-  margin: 0;
-  padding: 0;
-  height: 25px;
-}
-.itop_popup > ul > li > ul, #logOffBtn > ul > li > ul {
-  box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.5);
-}
-.itop_popup li a, #logOffBtn li a {
-  display: block;
-  padding: 5px 12px;
-  text-decoration: none;
-  nowidth: 70px;
-  color: #000;
-  font-weight: bold;
-  white-space: nowrap;
-  background: #fff;
-}
-#logOffBtn li span {
-  display: block;
-  padding: 5px 12px;
-  text-decoration: none;
-  nowidth: 70px;
-  color: #000;
-  white-space: nowrap;
-  background: #fff;
-}
-.itop_popup ul {
-  padding-left: 0;
-}
-.menucontainer div.toolkit_menu {
-  margin-left: 10px;
-}
-.itop_popup li a:hover, #logOffBtn li a:hover {
-  background: #1a4473;
-}
-.itop_popup ul > li > ul, #logOffBtn ul > li > ul {
-  border: 1px solid black;
-  background: #fff;
-}
-.itop_popup li > ul, #logOffBtn li > ul {
-  margin: 0;
-  padding: 0;
-  position: absolute;
-  display: none;
-  border-top: 1px solid white;
-  z-index: 1500;
-}
-.itop_popup li ul li, #logOffBtn li ul li {
-  float: none;
-  display: inline;
-}
-.itop_popup li ul li a, #logOffBtn li ul li a {
-  width: auto;
-  text-align: left;
-}
-.itop_popup li ul li a:hover, #logOffBtn li ul li a:hover {
-  background: #ea7d1e;
-  color: #fff;
-  font-weight: bold;
-}
-.itop_popup > ul {
-  margin: 0;
-}
-hr.menu-separator {
-  border: none 0;
-  border-top: 1px solid #ccc;
-  color: #ccc;
-  background-color: transparent;
-  height: 1px;
-  margin: 3px;
-  cursor: default;
-}
-/************************************/
-.wizHeader {
-  background: #1c94c4;
-  padding: 15px;
-}
-.wizContainer {
-  border: 5px solid #1c94c4;
-  background: #d6e8ef;
-  padding: 5px;
-}
-.wizContainer table tr td {
-  background: transparent;
-}
-.alignRight {
-  text-align: right;
-  padding: 3px;
-}
-.alignLeft {
-  text-align: left;
-  padding: 3px;
-}
-.red {
-  background-color: #ff6000;
-  color: #000;
-}
-th.red {
-  background: url(../images/red-header.gif) bottom left repeat-x;
-  color: #000;
-}
-.green {
-  background-color: #0c0;
-  color: #000;
-}
-th.green {
-  background: url(../images/green-header.gif) bottom left repeat-x;
-  color: #000;
-}
-.orange {
-  background-color: #ffde00;
-  color: #000;
-}
-th.orange {
-  background: url(../images/orange-header.gif) bottom left repeat-x;
-  color: #000;
-}
-/* For Date Picker: Creates a little calendar icon
- * instead of a text link for "Choose date"
- */
-td a.dp-choose-date, a.dp-choose-date, td a.dp-choose-date:hover, a.dp-choose-date:hover, td a.dp-choose-date:visited, a.dp-choose-date:visited {
-  float: left;
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  margin: 5px 3px 0;
-  display: block;
-  text-indent: -2000px;
-  overflow: hidden;
-  background: url(../images/calendar.png?v=v2.7.0-dev) no-repeat;
-}
-td a.dp-choose-date.dp-disabled, a.dp-choose-date.dp-disabled {
-  background-position: 0 -20px;
-  cursor: default;
-}
-/* For Date Picker: makes the input field shorter once the date picker code
- * has run (to allow space for the calendar icon)
- */
-input.dp-applied {
-  width: 140px;
-  float: left;
-}
-/* For search forms */
-.mini_tabs a {
-  text-decoration: none;
-  font-weight: bold;
-  color: #ccc;
-  background-color: #333;
-  padding-left: 1em;
-  padding-right: 1em;
-  padding-bottom: 0.25em;
-}
-.mini_tabs a.selected {
-  color: #fff;
-  background-color: #1c94c4;
-  padding-top: 0.25em;
-}
-.mini_tabs ul {
-  margin: -10px;
-}
-.mini_tabs ul li {
-  float: right;
-  list-style: none;
-  nopadding-left: 1em;
-  nopadding-right: 1em;
-  margin-top: 0;
-}
-/* Search forms v2 */
-.search_box {
-  box-sizing: border-box;
-  position: relative;
-  z-index: 1100;
-  /* To be over the table block/unblock UI. Not very sure about this. */
-  text-align: center;
-  /* Used when form is closed */
-  /* Sizing reset */
-}
-.search_box * {
-  box-sizing: border-box;
-}
-.search_form_handler {
-  position: relative;
-  z-index: 10;
-  width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  font-size: 12px;
-  text-align: left;
-  /* To compensate .search_box:text-align */
-  border: 1px solid #1c94c4;
-  /* Sizing reset */
-  /* Hyperlink reset */
-  /* Input reset */
-  /* List helpers */
-}
-.search_form_handler * {
-  box-sizing: border-box;
-}
-.search_form_handler a {
-  color: inherit;
-  text-decoration: none;
-}
-.search_form_handler input[type="text"], .search_form_handler select {
-  padding: 1px 2px;
-}
-.search_form_handler:not(.closed) .sf_title .sft_short {
-  display: none;
-}
-.search_form_handler:not(.closed) .sf_title .sft_hint, .search_form_handler:not(.closed) .sf_title .sfobs_hint, .search_form_handler:not(.closed) .sf_title .sft_toggler {
-  margin-top: 4px;
-}
-.search_form_handler:not(.closed) .sf_title .sft_toggler {
-  transform: rotateX(180deg);
-  transition: transform 0.5s linear;
-}
-.search_form_handler.closed {
-  margin-bottom: 0.5em;
-  width: 150px;
-  overflow: hidden;
-  border-radius: 4px;
-  background-color: #1c94c4;
-}
-.search_form_handler.closed .sf_criterion_area {
-  height: 0;
-  opacity: 0;
-  padding: 0;
-}
-.search_form_handler.closed .sf_title {
-  padding: 6px 8px;
-  text-align: center;
-  font-size: 12px;
-}
-.search_form_handler.closed .sf_title .sft_long {
-  display: none;
-}
-.search_form_handler.closed .sf_title .sft_hint, .search_form_handler.closed .sf_title .sfobs_hint {
-  display: none;
-}
-.search_form_handler:not(.no_auto_submit) .sft_hint {
-  display: none;
-}
-.search_form_handler:not(.no_auto_submit) .sfc_fg_apply {
-  display: none;
-}
-.search_form_handler.no_auto_submit .sfc_fg_search {
-  display: none;
-}
-.search_form_handler.no_auto_submit .sft_hint {
-  display: inline-block;
-}
-.search_form_handler:not(.hide_obsolete_data) .sfobs_hint {
-  display: none;
-}
-.search_form_handler.hide_obsolete_data .sfobs_hint {
-  display: inline-block;
-}
-.search_form_handler.hide_obsolete_data.no_auto_submit .sfobs_hint {
-  margin-left: 30px;
-}
-.search_form_handler .sf_title {
-  transition: opacity 0.3s, background-color 0.3s, color 0.3s linear;
-  padding: 8px 10px;
-  margin: 0;
-  color: #fff;
-  background-color: #1c94c4;
-  cursor: pointer;
-}
-.search_form_handler .sf_title .sft_hint, .search_form_handler .sf_title .sfobs_hint {
-  font-size: 8pt;
-  font-style: italic;
-}
-.search_form_handler .sf_title .sft_toggler {
-  margin-left: 0.7em;
-  transition: color 0.2s ease-in-out, transform 0.4s ease-in-out;
-}
-.search_form_handler .sf_title .sft_toggler:hover {
-  color: #f1f1f1;
-}
-.search_form_handler .sf_message {
-  display: none;
-  margin: 8px 8px 0px 8px;
-  border-radius: 0px;
-}
-.search_form_handler .sf_criterion_area {
-  /*display: none;*/
-  padding: 8px 8px 3px 8px;
-  /* padding-bottom must equals to padding-top - .search_form_criteria:margin-bottom */
-  background-color: #fff;
-  /* Common style between criterion and more criterion */
-  /* Criteria tags */
-  /* More criterion */
-  /* Misc. buttons */
-}
-.search_form_handler .sf_criterion_area .sf_criterion_row {
-  position: relative;
-}
-.search_form_handler .sf_criterion_area .sf_criterion_row:not(:first-child) {
-  margin-top: 20px;
-}
-.search_form_handler .sf_criterion_area .sf_criterion_row:not(:first-child)::before {
-  content: "";
-  position: absolute;
-  top: -12px;
-  left: 0px;
-  width: 100%;
-  border-top: 1px solid #ccc;
-}
-.search_form_handler .sf_criterion_area .sf_criterion_row:not(:first-child)::after {
-  content: "or";
-  /* TODO: Make this into a dict entry */
-  position: absolute;
-  top: -20px;
-  left: 8px;
-  padding-left: 5px;
-  padding-right: 5px;
-  color: #808080;
-  background-color: #fff;
-  /* Must match .sf_criterion_area:background-color */
-}
-.search_form_handler .sf_criterion_area .sf_criterion_row .sf_criterion_group {
-  display: inline;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria, .search_form_handler .sf_criterion_area .sf_more_criterion, .search_form_handler .sf_criterion_area .sf_button {
-  position: relative;
-  display: inline-block;
-  margin-right: 10px;
-  margin-bottom: 5px;
-  vertical-align: top;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.opened, .search_form_handler .sf_criterion_area .sf_more_criterion.opened, .search_form_handler .sf_criterion_area .sf_button.opened {
-  margin-bottom: 0px;
-  /* To compensate the .sfc/.sfm_header:padding-bottom: 13px */
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.opened .sfc_header, .search_form_handler .sf_criterion_area .sf_more_criterion.opened .sfc_header, .search_form_handler .sf_criterion_area .sf_button.opened .sfc_header, .search_form_handler .sf_criterion_area .search_form_criteria.opened .sfm_header, .search_form_handler .sf_criterion_area .sf_more_criterion.opened .sfm_header, .search_form_handler .sf_criterion_area .sf_button.opened .sfm_header {
-  border-bottom: none !important;
-  box-shadow: none !important;
-  padding-bottom: 13px;
-  /* Must be equal to .search_form_criteria:margin-bottom + this:padding-bottom */
-}
-.search_form_handler .sf_criterion_area .search_form_criteria > *, .search_form_handler .sf_criterion_area .sf_more_criterion > *, .search_form_handler .sf_criterion_area .sf_button > * {
-  padding: 7px 8px;
-  vertical-align: top;
-  border: 1px solid #ccc;
-  border-radius: 1px;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group, .search_form_handler .sf_criterion_area .sf_more_criterion .sfc_form_group, .search_form_handler .sf_criterion_area .sf_button .sfc_form_group, .search_form_handler .sf_criterion_area .search_form_criteria .sfm_content, .search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content, .search_form_handler .sf_criterion_area .sf_button .sfm_content {
-  position: absolute;
-  z-index: -1;
-  min-width: 100%;
-  left: 0px;
-  margin-top: -1px;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_buttons, .search_form_handler .sf_criterion_area .sf_more_criterion .sfc_form_group .sfc_fg_buttons, .search_form_handler .sf_criterion_area .sf_button .sfc_form_group .sfc_fg_buttons, .search_form_handler .sf_criterion_area .search_form_criteria .sfm_content .sfc_fg_buttons, .search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content .sfc_fg_buttons, .search_form_handler .sf_criterion_area .sf_button .sfm_content .sfc_fg_buttons {
-  white-space: nowrap;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria {
-  /* Non editable criteria */
-  /* Draft criteria (modifications not applied) */
-  /* Opened criteria (form group displayed) */
-  /* Add "and" on criterion but the one and submit button */
-  /* Top left corner icons */
-  /* Special criterion processing */
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.locked {
-  background-color: #f1f1f1;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.locked .sfc_title {
-  user-select: none;
-  cursor: initial;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.draft .sfc_header, .search_form_handler .sf_criterion_area .search_form_criteria.draft .sfc_form_group {
-  border-style: dashed;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.draft .sfc_title {
-  font-style: italic;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.opened {
-  z-index: 1;
-  /* To be over other criterion */
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.opened .sfc_toggle {
-  transform: rotateX(-180deg);
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.opened .sfc_form_group {
-  display: block;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.opened_left .sfc_form_group {
-  left: auto;
-  right: 0px;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria:not(:last-of-type) {
-  margin-right: 30px;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria:not(:last-of-type)::after {
-  /* TODO: Find an elegant way to do this, without hardcoding the content (could be a <style> in the markup) and margin. Note, only a few languages (hawaiian and stuff like this have more than 4 letters in for "and" word. */
-  content: "and";
-  position: absolute;
-  top: 8px;
-  left: calc(100% + 0px);
-  margin-right: 5px;
-  margin-left: 5px;
-  text-align: center;
-  color: #808080;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria > * {
-  background-color: #eee;
-  color: #2d2d2d;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_toggle, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_close {
-  position: absolute;
-  top: 7px;
-  color: #e87c1e;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_locked {
-  position: absolute;
-  top: 9px;
-  color: #808080;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_toggle {
-  display: inline-block;
-  right: 23px;
-  transition: all 0.3s ease-in-out;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_close, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_locked {
-  right: 7px;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_title {
-  max-width: 240px;
-  padding-right: 30px;
-  white-space: nowrap;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_title .sfc_values {
-  font-weight: bold;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group {
-  /* Form group (operators) is displayed only when the criteria is toggled to opened state */
-  display: none;
-  max-width: 450px;
-  max-height: 520px;
-  overflow: auto;
-  /* Show only first operator in simple mode */
-  /* Show all operators in advanced mode */
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators {
-  font-size: 12px;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator.force_hide {
-  display: none !important;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator > label {
-  line-height: 20px;
-  white-space: nowrap;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator > label > * {
-  display: inline-block;
-  vertical-align: middle;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_op_radio {
-  width: 12px;
-  margin: 0px;
-  margin-right: 7px;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_op_name {
-  width: 90px;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_op_content input[type="text"] {
-  width: 160px;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices label > input {
-  vertical-align: middle;
-  margin-left: 0px;
-  margin-right: 8px;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices .sfc_opc_mc_items_wrapper {
-  max-height: 415px;
-  /* Must be less than .sfc_form_group:max-height - .sfc_opc_mc_toggler:height - .sfc_opc_mc_filter:height */
-  overflow-y: auto;
-  margin: 0px -8px;
-  /* Compensate .sfc_opc_multichoices side padding so the hover style can take the full with */
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices .sfc_opc_mc_items_wrapper .sfc_opc_mc_items .sfc_opc_mc_items_list.sfc_opc_mc_items_selected {
-  position: relative;
-  padding-top: 5px;
-  margin-top: 5px;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices .sfc_opc_mc_items_wrapper .sfc_opc_mc_items .sfc_opc_mc_items_list.sfc_opc_mc_items_selected::before {
-  content: "";
-  position: absolute;
-  border-top: 1px solid #ddd;
-  width: calc(100% - 12px);
-  /* minus margin-left x2 */
-  margin-left: 6px;
-  top: 0px;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices .sfc_opc_mc_items_wrapper .sfc_opc_mc_items .sfc_opc_mc_items_list .sfc_opc_mc_placeholder {
-  padding: 15px 8px;
-  font-style: italic;
-  text-align: center;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices .sfc_opc_mc_items_wrapper .sfc_opc_mc_items .sfc_opc_mc_items_list .sfc_opc_mc_item {
-  padding: 4px 8px;
-  /* Putting back the padding remove by .sfc_opc_mc_items */
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices .sfc_opc_mc_items_wrapper .sfc_opc_mc_items .sfc_opc_mc_items_list .sfc_opc_mc_item:hover {
-  background-color: #fff;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices .sfc_opc_mc_items_wrapper .sfc_opc_mc_items .sfc_opc_mc_items_list .sfc_opc_mc_item label {
-  display: inline-block;
-  width: 100%;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices .sfc_opc_mc_items_wrapper .sfc_opc_mc_items_hint {
-  margin-top: 15px;
-  margin-bottom: 15px;
-  padding-left: 9px;
-  padding-right: 9px;
-  color: #777;
-  font-size: 10px;
-  font-style: italic;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices .sfc_opc_mc_items_wrapper .sfc_opc_mc_items_hint > span {
-  margin-right: 0.5em;
-  font-style: italic;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_search, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_apply, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_cancel {
-  margin-top: 8px;
-  padding: 3px 6px;
-  font-size: 11px;
-  /* Not bold, so it looks like 10px/bold of more/less buttons */
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_search, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_apply {
-  margin-right: 5px;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_more, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_less {
-  position: absolute;
-  bottom: 4px;
-  right: 0px;
-  cursor: pointer;
-  color: #3f7294;
-  font-size: 10px;
-  font-weight: bold;
-  border: none;
-  background-color: transparent;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_more > span, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_less > span {
-  margin-left: 3px;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operator:not(:first-of-type), .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operator:first-of-type .sfc_op_radio {
-  display: none;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_less {
-  display: none;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_more {
-  display: inline-block;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.advanced .sfc_fg_operator {
-  margin-bottom: 3px;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.advanced .sfc_fg_operator:last-of-type {
-  margin-bottom: 0px;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.advanced .sfc_fg_operator:not(:first-of-type), .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.advanced .sfc_fg_operator:first-of-type .sfc_op_radio {
-  display: inherit;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.advanced .sfc_fg_less {
-  display: inline-block;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.advanced .sfc_fg_more {
-  display: none;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.advanced .hide_on_advanced {
-  display: none;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group:not(.advanced) .hide_on_less {
-  display: none;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_raw > * {
-  border-color: transparent;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_raw .sfc_title {
-  cursor: initial;
-  padding-right: 20px;
-  /* Less than regular as there is no toggle icon */
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_raw .sfc_form_group {
-  display: none;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_enum .sfc_form_group .sfc_fg_operator_in > label {
-  display: inline-block;
-  width: 100%;
-  line-height: initial;
-  white-space: nowrap;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_enum .sfc_form_group .sfc_fg_operator_in > label .sfc_op_content {
-  width: 100%;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_tag_set .sfc_form_group .sfc_fg_operator_in > label {
-  display: inline-block;
-  width: 100%;
-  line-height: initial;
-  white-space: nowrap;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_tag_set .sfc_form_group .sfc_fg_operator_in > label .sfc_op_content {
-  width: 100%;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_numeric .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_between .sfc_op_content_from_outer {
-  display: inline;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_numeric .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_between .sfc_op_content_until_outer {
-  display: inline;
-  margin-left: 5px;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_numeric .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_between label.sfc_op_content_from_label, .search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_numeric .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_between label.sfc_op_content_until_label {
-  width: 45px;
-  display: inline-block;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_numeric .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_between input[type="text"] {
-  width: 77px;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_date_time .sfc_form_group.advanced .sfc_fg_operator_between, .search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_date .sfc_form_group.advanced .sfc_fg_operator_between {
-  margin-bottom: 5px;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_date_time .sfc_fg_operator_between_days input, .search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_date .sfc_fg_operator_between_days input {
-  width: 135px;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_date_time button.ui-datepicker-trigger, .search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_date button.ui-datepicker-trigger {
-  background: none;
-  border: none;
-  height: 100%;
-  padding: 2px;
-}
-.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_date_time button.ui-datepicker-trigger img, .search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_date button.ui-datepicker-trigger img {
-  vertical-align: middle;
-}
-.search_form_handler .sf_criterion_area .sf_more_criterion.opened {
-  z-index: 2;
-  /* To be over criterion */
-}
-.search_form_handler .sf_criterion_area .sf_more_criterion.opened .sfm_content {
-  display: inherit;
-}
-.search_form_handler .sf_criterion_area .sf_more_criterion.opened_left .sfm_content {
-  left: auto;
-  right: 0px;
-}
-.search_form_handler .sf_criterion_area .sf_more_criterion > * {
-  background-color: #fff;
-  color: #2d2d2d;
-}
-.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_toggler .sfm_tg_title {
-  margin-right: 7px;
-}
-.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_toggler .sfm_tg_icon {
-  color: #e87c1e;
-}
-.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content {
-  display: none;
-  min-width: 200px;
-  /* To avoid element going to thin on filter, not very slick */
-}
-.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content .sfm_lists {
-  margin: 0px -8px;
-  padding: 0px 8px;
-  max-height: 400px;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content .sfm_lists .sfl_items > li:hover {
-  background-color: #f1f1f1;
-}
-.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content .sfm_buttons {
-  display: none;
-}
-.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content .sfm_buttons button {
-  margin-top: 8px;
-  margin-right: 5px;
-  padding: 3px 6px;
-  font-size: 11px;
-}
-.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content .sfm_buttons button:last-of-type {
-  margin-right: 0px;
-}
-.search_form_handler .sf_criterion_area .sf_button {
-  cursor: pointer;
-}
-.search_form_handler .sf_criterion_area .sf_button > * {
-  background-color: #fff;
-  color: #ea7d1e;
-}
-.search_form_handler .sf_list:not(:first-of-type) .sfl_title {
-  border-top: 1px solid #ddd;
-  padding-top: 8px;
-  margin-top: 5px;
-}
-.search_form_handler .sf_list .sfl_title {
-  font-weight: bold;
-}
-.search_form_handler .sf_list .sfl_items {
-  margin: 5px -8px 0px -8px;
-  padding: 0px;
-}
-.search_form_handler .sf_list .sfl_items > li {
-  padding: 4px 8px;
-  list-style: none;
-  white-space: nowrap;
-}
-.search_form_handler .sf_list .sfl_items > li:hover {
-  background-color: #fff;
-}
-.search_form_handler .sf_list .sfl_items > li.sfl_i_placeholder {
-  font-style: italic;
-  opacity: 0.8;
-}
-.search_form_handler .sf_list .sfl_items > li > label {
-  display: inline-block;
-  width: 100%;
-}
-.search_form_handler .sf_list .sfl_items > li > label > * {
-  vertical-align: middle;
-}
-.search_form_handler .sf_list .sfl_items > li > label > input[type="checkbox"] {
-  margin-left: 0px;
-  margin-right: 8px;
-}
-.search_form_handler .sf_filter {
-  position: relative;
-  margin-top: 8px;
-  margin-bottom: 8px;
-}
-.search_form_handler .sf_filter input, .search_form_handler .sf_filter button, .search_form_handler .sf_filter .sff_picto {
-  vertical-align: middle;
-  height: 22px;
-}
-.search_form_handler .sf_filter input, .search_form_handler .sf_filter button {
-  border: 1px solid #ababab;
-}
-.search_form_handler .sf_filter input {
-  width: 100% !important;
-}
-.search_form_handler .sf_filter button {
-  width: 23px;
-  /* Must be equals to .sf_filter > *:height */
-  background-color: #fff;
-  color: #ea7d1e;
-  font-size: 10px;
-}
-.search_form_handler .sf_filter button:first-of-type {
-  margin-left: 5px;
-}
-.search_form_handler .sf_filter button:not(:first-of-type) {
-  border-left: transparent;
-}
-.search_form_handler .sf_filter .sff_input_wrapper {
-  position: relative;
-}
-.search_form_handler .sf_filter .sff_input_wrapper .sff_picto {
-  position: absolute;
-  right: 5px;
-  top: 2px;
-  opacity: 0.6;
-  user-select: none;
-}
-.search_form_handler .sf_filter .sff_input_wrapper .sff_reset {
-  display: none;
-}
-.search_form_handler .sf_filter .sff_input_wrapper input::-ms-clear {
-  display: none;
-}
-.search_form_handler .sf_filter.sf_with_buttons input {
-  width: calc(100% - 28px) !important;
-  /* Minus button outter width (only one for now) */
-  min-width: 120px;
-}
-.sf_results_area .sf_results_placeholder {
-  margin-top: 100px;
-  text-align: center;
-}
-.sf_results_area .sf_results_placeholder button > span {
-  margin-left: 0.5em;
-}
-.hidden {
-  display: none !important;
-}
-.visible {
-  display: initial !important;
-}
-.mandatory {
-  border: 1px solid #f00;
-}
-/* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
-table.listResults tr.odd td.truncated, table.listResults tr td.truncated, .wizContainer table.listResults tr.odd td.truncated, .wizContainer table.listResults tr td.truncated {
-  background: url(../images/truncated.png?v=v2.7.0-dev) bottom repeat-x;
-}
-/* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
-table.listResults tr.even td.truncated, .wizContainer table.listResults tr.even td.truncated {
-  background: #f9f9f1 url(../images/truncated.png?v=v2.7.0-dev) bottom repeat-x;
-}
-/* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
-table.listResults tr.even td.hover.truncated, .wizContainer table.listResults tr.even td.hover.truncated {
-  background: #fdf5d0 url(../images/truncated.png?v=v2.7.0-dev) bottom repeat-x;
-}
-/* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
-table.listResults tr.odd td.hover.truncated, table.listResults tr td.hover.truncated, .wizContainer table.listResults tr.odd td.hover.truncated, .wizContainer table.listResults tr td.hover.truncated {
-  background: #fdf5d0 url(../images/truncated.png?v=v2.7.0-dev) bottom repeat-x;
-}
-table.listResults.truncated {
-  border-bottom: 0;
-  padding-bottom: 0;
-}
-tr.csv_row0 td {
-  padding-top: 5px;
-  padding-bottom: 5px;
-  padding-left: 10px;
-  padding-right: 10px;
-  background: #fff;
-  border-left: #000 1px solid;
-}
-tr.csv_row1 td {
-  padding-top: 5px;
-  padding-bottom: 5px;
-  padding-left: 10px;
-  padding-right: 10px;
-  background: #f9f9f1;
-  border-left: #000 1px solid;
-}
-tr.csv_row1 th, tr.csv_row0 th {
-  padding-top: 5px;
-  padding-bottom: 5px;
-  padding-left: 10px;
-  padding-right: 10px;
-  border-left: #000 1px solid;
-}
-td.cell_modified {
-  font-weight: bold;
-  color: #000;
-}
-td.cell_error {
-  font-weight: bold;
-  color: #d81515;
-}
-table.transparent, table.transparent td {
-  background: transparent;
-}
-p.page-header {
-  color: #1c94c4;
-  font-weight: bold;
-  font-size: 12pt;
-  font-family: Verdana, Arial, Helvetica, Sans-Serif;
-}
-td.dashboard {
-  vertical-align: top;
-  border: 1px solid #ccc;
-  padding: 0.5em;
-  width: 50%;
-}
-.white {
-  background-color: #fff;
-}
-/*** New Lacanau layout ***/
-.ui-layout-pane {
-  /* all 'panes' */
-  overflow: auto;
-}
-.ui-layout-resizer {
-  /* all 'resizer-bars' */
-  background: #f1f1f1;
-}
-.ui-layout-toggler {
-  /* all 'toggler-buttons' */
-  background: #aaa;
-}
-div#top-left {
-  width: 28px;
-  height: 70px;
-  background: #f1f1f1;
-  float: left;
-}
-div#header-logo {
-  width: 100%;
-  height: 70px;
-  background: #f1f1f1;
-}
-.ui-layout-pane-west {
-  background: #f1f1f1;
-}
-div#right {
-  min-width: 260px;
-}
-div#menu {
-  width: 100%;
-  overflow: auto;
-}
-.header-menu {
-  padding-left: 24px;
-  padding-right: 8px;
-  padding-bottom: 24px;
-  background: transparent;
-}
-div#inner_menu {
-  padding-left: 24px;
-  padding-right: 8px;
-  background: transparent;
-}
-div#logo {
-  height: 70px;
-  nowidth: 100%;
-  text-align: center;
-}
-div#logo div {
-  height: 88px;
-  width: 244px;
-  background: url(../images/itop-logo-2.png?v=v2.7.0-dev) left no-repeat;
-}
-#left-pane .ui-layout-north {
-  overflow: hidden;
-}
-#top-bar {
-  background: #f1f1f1;
-  text-align: right;
-}
-.app-message {
-  float: left;
-  margin-top: 2px;
-  margin-right: 4px;
-  padding: 6px 9px;
-  background-color: #ea7d1e;
-  color: white;
-  border-radius: 6px;
-  text-align: left;
-}
-.app-message-icon {
-  margin-right: 5px;
-}
-.fa-sm {
-  font-size: 0.66em;
-}
-.object-details-header {
-  margin-top: 7px;
-  margin-bottom: 7px;
-}
-.object-icon {
-  display: table-cell;
-  vertical-align: middle;
-  padding-left: 10px;
-  padding-right: 10px;
-}
-.object-infos {
-  display: table-cell;
-  vertical-align: middle;
-}
-.object-name {
-  margin-top: 0px;
-  margin-bottom: 0px;
-}
-.tags {
-  margin-top: 5px;
-}
-.tag {
-  font-size: 10px;
-  font-weight: initial;
-  display: inline-block;
-  color: white;
-  background-color: #555;
-  padding: 3px 6px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-}
-.text-danger {
-  color: red;
-}
-#global-search {
-  height: 55px;
-  float: right;
-  text-align: right;
-  overflow-y: hidden;
-}
-#global-search table, #global-search tr td, #global-search tr {
-  padding: 0;
-  border: 0;
-  height: 55px;
-  margin: 0;
-  background: transparent;
-  overflow-y: hidden;
-  vertical-align: middle;
-}
-#global-search-area {
-  line-height: 55px;
-}
-#global-search-input {
-  vertical-align: middle;
-  -moz-border-radius: 6px;
-  -webkit-border-radius: 6px;
-  border-radius: 6px;
-  border: 1px #ccc solid;
-  height: 18px;
-  width: 180px;
-  padding: 3px;
-  background: #fff;
-  display: inline-block;
-}
-#global-search-image {
-  vertical-align: middle;
-  background: url(../images/search.png?v=v2.7.0-dev) center center no-repeat;
-  display: inline-block;
-  width: 28px;
-  height: 30px;
-  margin-left: -8px;
-  cursor: pointer;
-}
-#help-link img {
-  padding: 0;
-  border: 0;
-}
-#help-link {
-  padding: 0;
-  border: 0;
-  background: transparent;
-  margin-left: 15px;
-  margin-right: 10px;
-}
-div.icon {
-  width: 20px;
-  height: 20px;
-  margin: 2px;
-  float: right;
-}
-span.ui-icon {
-  float: left;
-  margin: 0 2px;
-}
-.ui-layout-button-pin-down {
-  background: url(../images/splitter-bkg.png?v=v2.7.0-dev) transparent;
-  width: 16px;
-  background-position: -144px -144px;
-}
-.ui-layout-resizer-west-open {
-  background-color: #f1f1f1;
-  width: 8px;
-}
-div.footer img {
-  border: 0;
-  margin-bottom: 5px;
-  margin-top: 5px;
-}
-div.footer {
-  text-align: center;
-}
-#SearchResultsToAdd table.listResults tbody {
-  height: 300px;
-  overflow-y: auto;
-}
-tr.row_unchanged td {
-  border-bottom: 1px #ccc solid;
-  padding: 2px;
-}
-.wizContainer table tr.row_error td {
-  border-bottom: 1px #ccc solid;
-  background-color: #fdd;
-  padding: 2px;
-}
-tr.row_modified td {
-  border-bottom: 1px #ccc solid;
-  padding: 2px;
-}
-tr.row_added td {
-  border-bottom: 1px #ccc solid;
-  padding: 2px;
-}
-a.truncated {
-  cursor: pointer;
-}
-.org_combo {
-  font-size: x-small;
-  width: auto;
-  max-width: 200px;
-}
-span.form_validation {
-  width: 24px;
-  text-align: center;
-}
-.notification {
-  border: 1px solid #c33;
-  background-color: #fee;
-  padding: 0.5em;
-  margin: 0.5em;
-  text-align: center;
-  width: 95%;
-  -moz-border-radius: 0.5em;
-}
-.wiki_broken_link {
-  text-decoration: line-through;
-}
-.synoptics, .synoptics tr td {
-  background: transparent;
-  padding: 10px;
-  font-size: 1em;
-  vertical-align: middle;
-  color: #fff;
-  text-align: center;
-}
-.synoptics tr td.arrow {
-  color: #333;
-  border-top: 1px dashed #333;
-  width: 100px;
-}
-.synoptics tr.synoptics_header td {
-  color: #000;
-  font-size: 1em;
-  vertical-align: middle;
-  text-align: center;
-}
-.mono_value {
-  display: inline-block;
-  background-color: #3c3;
-  color: #fff;
-  font-weight: bold;
-  padding: 3px;
-  padding-left: 5px;
-  padding-right: 5px;
-  margin-left: 3px;
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
-  border-radius: 10px;
-}
-.multi_values {
-  display: inline-block;
-  background-color: #c33;
-  color: #fff;
-  font-weight: bold;
-  padding: 3px;
-  padding-left: 5px;
-  padding-right: 5px;
-  margin-left: 3px;
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
-  border-radius: 10px;
-}
-.caselog {
-  overflow-x: hidden;
-  display: block;
-  overflow-y: auto;
-  border: 1px #ddd solid;
-  font-family: Tahoma, Verdana, Arial, Helvetica;
-  font-size: 12px;
-}
-.caselog_input_header {
-  padding-top: 3px;
-  padding-bottom: 3px;
-  border-top: 1px solid #fff;
-  background: #ddd;
-  width: 100%;
-  height: 21px;
-}
-.caselog_input_header:empty {
-  display: none;
-}
-.editor_magnifier {
-  /* !important so it overrides the .cke_reset_all style */
-  background-position: center center !important;
-  background-repeat: no-repeat !important;
-  background-size: 100% !important;
-}
-.editor_magnifier:hover {
-  background-color: #ccc;
-}
-.caselog_header {
-  padding: 3px;
-  border-top: 1px solid #fff;
-  background: #ddd url(../images/plus.gif) left no-repeat;
-  padding-left: 16px;
-  cursor: pointer;
-  width: 100%;
-}
-.caselog_header.open {
-  background: #ddd url(../images/minus.gif) left no-repeat;
-}
-.caselog_entry, .caselog_entry_html {
-  overflow-x: auto;
-}
-.caselog_entry {
-  padding: 3px;
-  padding-left: 16px;
-  border-bottom: 1px #999 solid;
-  margin-left: 0;
-  margin-right: 0;
-  white-space: pre-wrap;
-  /* css-3 */
-  white-space: -moz-pre-wrap;
-  /* Mozilla, since 1999 */
-  white-space: -pre-wrap;
-  /* Opera 4-6 */
-  white-space: -o-pre-wrap;
-  /* Opera 7 */
-  word-wrap: break-word;
-  /* Internet Explorer 5.5+, CSS3 */
-}
-.caselog_entry_html p, .HTML p {
-  margin-top: 0.25em;
-  margin-bottom: 0.25em;
-}
-/* Helper classes for object details display. */
-.one-col-details {
-  min-width: 400px;
-  max-width: 600px;
-}
-.n-cols-details {
-  width: 100%;
-}
-.n-cols-details > tbody > tr > td {
-  min-width: 240px;
-}
-.details {
-  border-collapse: collapse;
-  noborder-bottom: 2px #fff solid;
-  nowidth: 100%;
-}
-.details * {
-  box-sizing: border-box;
-}
-fieldset .details > .field_container {
-  background: transparent;
-  border: 0;
-}
-.field_container {
-  display: table;
-  width: 100%;
-  margin-bottom: 5px;
-  border-bottom: 2px #ddd solid;
-  box-sizing: border-box;
-  /* .field_label, .field_data */
-}
-.field_container:last-child {
-  margin-bottom: 0px;
-}
-.field_container.field_large {
-  display: inherit;
-  /* .field_label, .field_data */
-}
-.field_container.field_large > div {
-  display: inherit;
-  /* .field_value, .field_comments, .field_infos */
-}
-.field_container.field_large > div.field_label {
-  width: inherit;
-  margin-bottom: 5px;
-}
-.field_container.field_large > div.field_data {
-  margin-top: 8px;
-  margin-bottom: 10px;
-}
-.field_container * {
-  box-sizing: border-box;
-}
-.field_container > div {
-  display: table-cell;
-  vertical-align: top;
-  /* .field_value, .field_comments, .field_infos */
-}
-.field_container > div.field_label {
-  min-width: 100px;
-  max-width: 145px;
-  width: 30%;
-  padding-right: 10px;
-}
-.field_container > div.field_label > label, .field_container > div.field_label span {
-  color: #000;
-  font-weight: bold;
-}
-.field_container > div.field_data {
-  display: table;
-  width: 100%;
-  margin-bottom: 5px;
-}
-.field_container > div > div {
-  display: table-cell;
-  width: auto;
-}
-.field_container > div > div.field_comments, .field_container > div > div.field_infos {
-  width: 50px;
-}
-.field_container > div > div.field_value .attribute-edit {
-  display: table;
-  width: 100%;
-  /* TODO: Refactor so status icon show over mandatory icon */
-}
-.field_container > div > div.field_value .attribute-edit .form_validation, .field_container > div > div.field_value .attribute-edit .field_status {
-  display: table-cell;
-  width: 20px;
-  padding-left: 0.4em;
-  vertical-align: middle;
-}
-.field_container > div > div.field_value .attribute-edit .form-field-container .form-field-content > .form_validation, .field_container > div > div.field_value .attribute-edit .form-field-container .form-field-content > .field_status {
-  display: inline;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone {
-  width: 100%;
-  /* auto; */
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_string > select, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_password > select, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_string input, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_password input {
-  width: 100%;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_onewaypassword {
-  display: table-cell;
-  width: auto;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_onewaypassword > * {
-  display: block;
-  width: 100%;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_onewaypassword > span {
-  margin-bottom: 3px;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_date, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_datetime {
-  display: table;
-  width: 100%;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_date > input, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_datetime > input {
-  display: table-cell;
-  width: 100%;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_date > span, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_datetime > span {
-  display: table-cell;
-  width: 20px;
-  padding-left: 0.4em;
-  vertical-align: middle;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_date > span > img, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_datetime > span > img {
-  width: 20px;
-  cursor: pointer;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text {
-  border: none;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text .f_i_text_header {
-  /* Inspired by .cke_top */
-  padding: 6px 8px 6px;
-  white-space: normal;
-  border-bottom: 1px solid #fff;
-  background: #f2f2f2;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text .f_i_text_header .fullscreen_button {
-  display: block;
-  width: 15px;
-  height: 15px;
-  border: 1px #a6a6a6 solid;
-  cursor: pointer;
-  background-image: url('../images/full-screen.png');
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: 98%;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text .f_i_text_header .fullscreen_button:hover, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text .f_i_text_header .fullscreen_button:focus {
-  background-color: #ccc;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text textarea {
-  /* Size for default display */
-  width: 100%;
-  height: 100%;
-  padding: 5px 10px;
-  border: none;
-  resize: none;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text.fullscreen {
-  z-index: 100;
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text.fullscreen textarea {
-  /* Size set again here to override resize value when in fullscreen */
-  width: 100% !important;
-  height: 100% !important;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text.fullscreen .fullscreen_button {
-  width: 22px;
-  height: 22px;
-  background-color: #ccc;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_document > input {
-  width: 100%;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_document > span {
-  display: inline-block;
-  margin-bottom: 2px;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_image input {
-  width: 100%;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_extkey {
-  display: table;
-  width: 100%;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_extkey > .field_select_wrapper {
-  display: table-cell;
-  width: auto;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_extkey > .field_select_wrapper > select {
-  width: 100%;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_extkey > .field_autocomplete {
-  display: table-cell;
-  width: 100%;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_extkey > .field_input_btn {
-  display: table-cell;
-  width: 25px;
-  padding-left: 0.4em;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_extkey > .field_input_btn > img {
-  max-width: 20px;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_set .selectize-control {
-  width: 100%;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_set .selectize-control .selectize-dropdown, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_set .selectize-control .selectize-input, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_set .selectize-control .selectize-input input {
-  font-size: 12px;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_set .selectize-control .selectize-input {
-  padding: 2px 2px 0px 2px;
-  /* padding-bottom = padding-top - item margin-bottom */
-  border: 1px solid #ababab;
-  border-radius: 0;
-}
-.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_set .selectize-control .selectize-input .attribute-set-item.partial-code {
-  color: rgba(34, 34, 34, 0.6);
-  background-color: #eaeaea;
-}
-.one-col-details .details .field_container.field_small div.field_label {
-  /* On a single column, field labels can take more width but they are limited so it doesn't feel weird when all labels are short */
-  width: 175px;
-  max-width: inherit;
-}
-/* This is extracted from the ".details > .field_container ..." because of the fullscreen option (element is moved at the end of the body */
-.field_input_text {
-  border: none;
-}
-.field_input_text .f_i_text_header {
-  /* Inspired by .cke_top */
-  padding: 6px 8px 6px;
-  white-space: normal;
-  border-bottom: 1px solid #fff;
-  background: #f2f2f2;
-}
-.field_input_text .f_i_text_header .fullscreen_button {
-  display: block;
-  width: 15px;
-  height: 15px;
-  border: 1px #a6a6a6 solid;
-  cursor: pointer;
-  background-image: url('../images/full-screen.png');
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: 98%;
-}
-.field_input_text .f_i_text_header .fullscreen_button:hover, .field_input_text .f_i_text_header .fullscreen_button:focus {
-  background-color: #ccc;
-}
-.field_input_text textarea {
-  /* Size for default display */
-  width: 100%;
-  height: 100%;
-  margin: 0px;
-  padding: 5px 10px;
-  border: none;
-  resize: none;
-}
-.field_input_text.fullscreen {
-  z-index: 100;
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-}
-.field_input_text.fullscreen textarea {
-  /* Size set again here to override resize value when in fullscreen */
-  width: 100% !important;
-  height: 100% !important;
-}
-.field_input_text.fullscreen .fullscreen_button {
-  width: 22px;
-  height: 22px;
-  background-color: #ccc;
-}
-#SiloSelection {
-  padding-top: 3px;
-  padding-right: 30px;
-  text-align: left;
-}
-#SiloSelection * {
-  box-sizing: border-box;
-  vertical-align: middle;
-}
-#SiloSelection .ac_input {
-  width: 100%;
-}
-#SiloSelection .field_input_extkey {
-  display: table;
-  width: 100%;
-}
-#SiloSelection .field_input_extkey .field_select_wrapper {
-  display: table-cell;
-  width: 100%;
-}
-#SiloSelection .field_input_extkey .field_select_wrapper > select {
-  width: 100%;
-  max-width: initial;
-}
-#SiloSelection .field_input_extkey .field_input_btn {
-  display: table-cell;
-  width: 25px;
-  padding-left: 0.4em;
-}
-.ac_dlg_loading {
-  background: white url('../images/indicator.gif') right center no-repeat;
-}
-table.pagination {
-  display: inline-block;
-}
-table.pagination tr td {
-  padding: 3px;
-}
-.pagination_container {
-  padding-left: 3px;
-}
-.pager p {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.pager td span {
-  min-width: 20px;
-  padding-left: 2px;
-  padding-right: 2px;
-  display: inline-block;
-  text-align: center;
-  cursor: pointer;
-}
-.pager td span.curr_page {
-  color: #fff;
-  background: #999;
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-  border-radius: 4px;
-}
-img.prev, img.first, img.next, img.last {
-  cursor: pointer;
-}
-div.actions_button {
-  float: right;
-  background: #ea7d1e url("../images/actions_left.png?v=v2.7.0-dev") no-repeat scroll left top;
-  padding-left: 5px;
-  margin-top: 0;
-  margin-right: 10px;
-  height: 19px;
-  vertical-align: middle;
-}
-div.actions_button a, .actions_button a:hover, .actions_button a:visited {
-  background: #ea7d1e url(../images/actions_bkg.png?v=v2.7.0-dev) no-repeat scroll right top;
-  color: #fff;
-  padding-right: 8px;
-  cursor: pointer;
-  font-family: Tahoma, sans-serif;
-  font-size: 11px;
-  font-weight: bold;
-  padding-left: 4px;
-  text-decoration: none;
-  height: 19px;
-  line-height: 17px;
-  display: block;
-}
-select#org_id {
-  max-width: 90%;
-}
-/*********** Dashboards ***********/
-.itop-dashboard {
-  background-color: #fff;
-}
-.itop-dashboard a {
-  cursor: not-allowed;
-}
-.dragHover {
-  background: url(./ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=v2.7.0-dev);
-}
-.edit_mode .dashlet {
-  background: url(./ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=v2.7.0-dev);
-  padding: 5px;
-  margin: 0;
-  position: relative;
-}
-.edit_mode .dashlet-selected {
-  background: #ea7d1e !important;
-  padding: 5px;
-  margin: 0;
-}
-/* Prevent cursor clicking on the calendar (eg. While editing dashlet) */
-.dashlet-blocker {
-  position: absolute;
-  z-index: 9;
-  /* To be above calendar links & all, but below .close-box (9) */
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  cursor: not-allowed;
-}
-td.layout_cell {
-  height: 50px;
-  /* min-height does not work */
-  vertical-align: top;
-}
-.dashlet-content {
-  position: relative;
-  background: #fff;
-  margin: 0;
-  overflow: auto;
-}
-table.prop_table {
-  border-bottom: 2px solid #f9f9f1;
-  padding: 1px;
-  width: 100%;
-}
-.close-box {
-  margin: 5px;
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 10;
-  background: transparent url(../images/delete.png?v=v2.7.0-dev) no-repeat center;
-}
-td.prop_value {
-  text-align: left;
-}
-tr.itop-property-field-modified td {
-  background: #fbb;
-}
-tr.itop-property-field-modified td.hover {
-  background: #f99;
-}
-td.prop_value textarea, td.prop_value input[type=text] {
-  width: 98%;
-}
-td.prop_icon {
-  width: 20px;
-}
-.dashlet {
-  text-align: left;
-}
-.dashlet-inline {
-  display: inline-block;
-}
-.dashlet-badge a.actions {
-  background: none repeat scroll 0 0 transparent;
-  color: #666;
-  font-size: 16px;
-  text-decoration: none;
-}
-.dashlet-content .display_block {
-  text-align: left;
-}
-.dashlet-unknown .dashlet-content, .dashlet-proxy .dashlet-content {
-  padding: 8px;
-  background-color: #f2f2f2;
-  text-align: center;
-}
-.dashlet-unknown .dashlet-content .dashlet-ukn-text, .dashlet-proxy .dashlet-content .dashlet-ukn-text, .dashlet-unknown .dashlet-content .dashlet-pxy-text, .dashlet-proxy .dashlet-content .dashlet-pxy-text {
-  margin-top: 10px;
-}
-.prop_apply .ui-icon-alert {
-  display: none;
-}
-.prop_apply .ui-state-error .ui-icon-alert {
-  display: block;
-}
-.ui-state-error .ui-icon-circle-check {
-  display: none;
-}
-.summary-details {
-  float: right;
-  margin-top: 5px;
-}
-.summary-details th {
-  background: none repeat scroll 0 0 #555;
-  color: #eee;
-  padding: 5px;
-  text-align: center;
-}
-.main_header {
-  background-color: #f1f1f1;
-  min-height: 60px;
-  width: 100%;
-}
-.main_header h1 {
-  color: #1c94c4;
-  line-height: 16px;
-  margin-bottom: 0;
-  margin-top: 0;
-  padding-bottom: 10px;
-  padding-top: 10px;
-}
-.main_header img {
-  margin-top: 10px;
-  margin-right: 10px;
-  float: left;
-}
-a.summary, a.summary:hover {
-  background: none repeat scroll 0 0 transparent;
-  color: #666;
-  text-decoration: none;
-  padding-left: 0;
-}
-.summary-details td {
-  background: none repeat scroll 0 0 transparent;
-  padding: 5px;
-  text-align: center;
-}
-.dashboard-title {
-  display: block;
-  float: left;
-  color: #000;
-  font-weight: bold;
-  font-size: 1.2em;
-  margin: 10px;
-}
-.dashboard_contents {
-  width: 100%;
-  background-color: #fff;
-}
-.dashboard-selector {
-  display: block;
-  float: right;
-  margin-top: 10px;
-}
-.dashboard-selector .selector-label {
-  display: inline-block;
-  margin-left: 10px;
-  margin-right: 10px;
-  vertical-align: super;
-}
-#DashboardMenu {
-  display: block;
-  float: right;
-  font-size: 12px;
-  margin: 10px;
-}
-#DashboardMenu > ul > li {
-  list-style: none;
-  vertical-align: middle;
-  margin: 0;
-  padding: 0;
-  cursor: pointer;
-}
-#DashboardMenu > ul {
-  list-style: none;
-  vertical-align: middle;
-  margin: 0;
-  padding: 0;
-  height: 25px;
-}
-#DashboardMenu li a {
-  display: block;
-  padding: 5px 12px;
-  text-decoration: none;
-  color: #000;
-  font-weight: bold;
-  text-align: left;
-  white-space: nowrap;
-  background: #fff;
-}
-#DashboardMenu li span {
-  display: block;
-  padding: 5px 12px;
-  text-decoration: none;
-  color: #000;
-  white-space: nowrap;
-  background: #fff;
-}
-#DashboardMenu li {
-  list-style: none;
-}
-#DashboardMenu li a:hover {
-  background: #1a4473;
-}
-#DashboardMenu ul > li > ul {
-  border: 1px solid black;
-  background: #fff;
-}
-#DashboardMenu li > ul {
-  margin: 0;
-  padding: 0;
-  position: absolute;
-  display: none;
-  border-top: 1px solid white;
-  z-index: 1500;
-}
-#DashboardMenu li ul li a:hover {
-  background: #ea7d1e;
-  color: #fff;
-  font-weight: bold;
-  list-style: none;
-}
-.sortable_field_list {
-  display: inline-block;
-  width: 250px;
-  height: 150px;
-  border: 1px #333 solid;
-  overflow: auto;
-  padding-left: 0;
-  margin: 0;
-}
-.sortable_field_list li {
-  list-style: none;
-  font-size: 11px;
-}
-.sort_order {
-  display: inline-block;
-  width: 16px;
-  height: 12px;
-}
-.sort_none {
-  background: url(../images/bg.gif) no-repeat center;
-}
-.sort_asc {
-  background: url(../images/desc.gif) no-repeat center;
-}
-.sort_desc {
-  background: url(../images/asc.gif) no-repeat center;
-}
-.sort_hidden {
-  display: none;
-}
-.sortable_field_list > li.selected {
-  background: #f6a828;
-}
-.itop-deleted-object {
-  text-decoration: line-through;
-}
-.header_message {
-  padding: 1em;
-  font-size: 10pt;
-  background: #fff;
-  border: 1px solid #999;
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-  border-radius: 4px;
-  margin-bottom: 10px;
-}
-.message_info {
-  border: 1px solid #993;
-  background: url(../images/info-mini.png?v=v2.7.0-dev) 1em 1em no-repeat #ffc;
-  padding-left: 3em;
-}
-.message_ok {
-  border: 1px solid #393;
-  background: url(../images/ok.png?v=v2.7.0-dev) 1em 1em no-repeat #cfc;
-  padding-left: 3em;
-}
-.message_warning {
-  border: 1px solid #ec9800;
-  background: url(../images/error.png?v=v2.7.0-dev) 1em 1em no-repeat #ffd78d;
-  color: #000;
-  padding-left: 3em;
-}
-.message_error {
-  border: 1px solid #933;
-  background: url(../images/error.png?v=v2.7.0-dev) 1em 1em no-repeat #fcc;
-  padding-left: 3em;
-}
-.fg-menu a img {
-  border: 0;
-}
-div.ui-dialog-header {
-  padding-bottom: 10px;
-  padding-top: 7px;
-}
-.form_field_error {
-  border: 1px solid #933;
-  background: #fcc;
-}
-.simple-graph, .graph_config {
-  background: #fff;
-}
-.graph_config {
-  padding: 0.25em;
-}
-.graph_config button.ui-widget {
-  font-size: 12px;
-}
-.ui-tooltip, .arrow:after {
-  background: #f1f1f1;
-  border: 1px solid #555;
-}
-.ui-tooltip {
-  padding: 10px 10px;
-  box-shadow: 0 0 7px black;
-  max-width: 350px;
-  overflow: hidden;
-}
-.ui-tooltip .arrow {
-  width: 70px;
-  height: 16px;
-  overflow: hidden;
-  position: absolute;
-  left: 50%;
-  margin-left: -35px;
-  bottom: -16px;
-}
-.ui-tooltip .arrow.top {
-  top: -16px;
-  bottom: auto;
-}
-.ui-tooltip .arrow.left {
-  left: 20%;
-}
-.ui-tooltip .arrow:after {
-  content: "";
-  position: absolute;
-  left: 20px;
-  top: -20px;
-  width: 25px;
-  height: 25px;
-  box-shadow: 6px 5px 9px -9px black;
-  -webkit-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-.ui-tooltip .arrow.top:after {
-  bottom: -20px;
-  top: auto;
-}
-.ui-tooltip .ui-tooltip-content {
-  overflow-x: auto;
-}
-table.export_parameters td {
-  padding-right: 2em;
-}
-.table_preview > table {
-  border-collapse: collapse;
-  max-height: 150px;
-  overflow: auto;
-  display: block;
-}
-.table_preview > table > thead > tr > th, .table_preview > table > tbody > tr > td {
-  border: 1px #555 solid;
-  min-height: 1em;
-  padding-left: 0.25em;
-  padding-right: 0.25em;
-  font-size: 10pt;
-}
-.table_preview > table > tbody > tr > td {
-  vertical-align: top;
-}
-.table_preview .drag-handle {
-  cursor: move;
-}
-.table_preview div.text-preview {
-  white-space: pre-wrap;
-}
-/* Format for the PDF output */
-.table_preview .view-image {
-  width: inherit !important;
-  height: inherit !important;
-  text-align: center;
-}
-.table_preview .view-image img {
-  max-width: 48px !important;
-  max-height: 48px !important;
-  display: inline-block;
-}
-.graph_zoom {
-  display: inline-block;
-  float: right;
-  margin-right: 2em;
-}
-.graph_zoom_slider {
-  display: inline-block;
-  width: 10em;
-}
-.graph_zoom_plus, .graph_zoom_minus {
-  display: inline-block;
-  margin-left: 1em;
-  margin-right: 1em;
-}
-div.explain-printable {
-  border: 5px solid #1c94c4;
-  background: #d6e8ef;
-  color: #000;
-  padding: 10px;
-  margin: 0;
-  font-size: 12px;
-}
-.hideable-chapter {
-  cursor: pointer;
-}
-#hiddeable_chapters .ui-tabs .ui-tabs-nav li.hideable-chapter span {
-  padding-left: 20px;
-  background: url(../images/eye-open-555.png?v=v2.7.0-dev) 2px center no-repeat;
-}
-#hiddeable_chapters .ui-tabs .ui-tabs-nav li.hideable-chapter.strikethrough span {
-  text-decoration: line-through;
-  background: url(../images/eye-closed-555.png?v=v2.7.0-dev) 2px center no-repeat;
-}
-.printable-version legend {
-  padding-left: 26px;
-  background: #1c94c4 url(../images/eye-open-fff.png?v=v2.7.0-dev) 8px center no-repeat;
-}
-.printable-version .strikethrough legend {
-  background: #1c94c4 url(../images/eye-closed-fff.png?v=v2.7.0-dev) 8px center no-repeat;
-}
-.printable-version fieldset.strikethrough span {
-  display: none;
-}
-h2.printable-tab-title {
-  border-bottom: 2px solid;
-}
-.strikethrough {
-  text-decoration: line-through;
-}
-select.multiselect {
-  max-width: 150px;
-}
-span.search-button, span.refresh-button {
-  display: inline-block;
-  width: 21px;
-  height: 18px;
-  cursor: pointer;
-  color: #fff;
-  text-align: center;
-  padding-top: 3px;
-  font-size: 10px;
-}
-.actions_button.icon_actions_button {
-  padding: 0 2px 0 2px;
-}
-.case-log-history-entry {
-  display: block;
-}
-.case-log-history-entry-end {
-  display: none;
-}
-.expanded .case-log-history-entry-end {
-  display: inline;
-}
-.case-log-history-entry-more {
-  display: inline;
-}
-.expanded .case-log-history-entry-more {
-  display: none;
-}
-.case-log-history-entry .case-log-history-entry-toggle {
-  display: inline-block;
-  float: none;
-  pointer: cursor;
-  vertical-align: bottom;
-}
-.printable-tab .case-log-history-entry-end {
-  display: inline;
-}
-.printable-tab .case-log-history-entry-more {
-  display: none;
-}
-.printable-tab .case-log-history-entry .case-log-history-entry-toggle {
-  display: none;
-}
-.history_entry {
-  position: relative !important;
-  max-width: 100%;
-}
-.history_entry_truncated {
-  max-height: 7em;
-  overflow: hidden;
-}
-.history_truncated_toggler {
-  position: absolute !important;
-  bottom: 0;
-  right: 0;
-  display: block;
-  cursor: pointer;
-  width: 16px;
-  height: 16px;
-  background-image: url(ui-lightness/images/ui-icons_222222_256x240.png);
-  background-position: -16px -192px;
-}
-.history_entry_truncated .history_truncated_toggler {
-  background-position: 0 -192px;
-}
-#top-bar-table {
-  width: 100%;
-  padding-left: 5px;
-}
-#top-bar-table #open-left-pane {
-  text-align: center;
-  width: 40px !important;
-  cursor: pointer;
-}
-#top-bar-table #go-home {
-  text-align: center;
-  width: 40px !important;
-}
-#top-bar-table #go-home a {
-  text-decoration: none;
-  color: #555;
-  font-size: 9pt;
-  padding: 0;
-  background: none;
-  display: inline-block;
-  line-height: 55px;
-  width: 100%;
-}
-#top-bar-table .top-bar-spacer {
-  width: 35px !important;
-}
-#top-bar-table #top-bar-table-search {
-  min-width: 370px;
-}
-#itop-breadcrumb {
-  overflow: hidden;
-  float: left;
-  background: #f1f1f1;
-}
-#itop-breadcrumb .breadcrumb-item {
-  float: left;
-  margin: 3px 22px 2px 0px;
-}
-#itop-breadcrumb .breadcrumb-item .icon img {
-  height: 15px;
-  width: auto;
-  margin-right: 5px;
-  -webkit-filter: grayscale(100%);
-  filter: grayscale(100%);
-  opacity: 0.5;
-}
-#itop-breadcrumb .breadcrumb-item a {
-  text-decoration: none;
-  color: #555;
-  font-size: 9pt;
-  padding: 0;
-  background: none;
-}
-#itop-breadcrumb .breadcrumb-item a:hover .icon img {
-  -webkit-filter: none;
-  filter: none;
-  opacity: 1;
-}
-#itop-breadcrumb .breadcrumb-item a span.truncate {
-  max-width: 200px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: inline-block;
-}
-#itop-breadcrumb .breadcrumb-item a:hover {
-  text-decoration: none;
-  color: #ea7d1e;
-}
-#itop-breadcrumb .breadcrumb-item a::after {
-  content: '';
-  position: absolute;
-  background-image: url(../images/breadcrumb-separator.png?v=v2.7.0-dev);
-  background-repeat: no-repeat;
-  width: 8px;
-  height: 16px;
-  margin-left: 5px;
-}
-#itop-breadcrumb .breadcrumb-item:last-child a::after {
-  display: none;
-}
-#itop-breadcrumb .breadcrumb-item.breadcrumb-current {
-  text-decoration: none;
-  color: #555;
-  font-size: 9pt;
-  padding: 0;
-  background: none;
-}
-#itop-breadcrumb .breadcrumb-item.breadcrumb-current span.truncate {
-  max-width: 200px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: inline-block;
-}
-.ui-datepicker-buttonpane, .ui-timepicker-div {
-  font-size: 9pt;
-  font-family: Tahoma, Verdana, Arial, Helvetica;
-}
-.date_format_tooltip td {
-  padding: 0.25em;
-}
-#setup .module-selection-banner img {
-  max-height: 48px;
-}
-#setup .module-selection-body {
-  height: 28em;
-  overflow: auto;
-  border: #ccc 1px solid;
-}
-#setup .module-selection-body .wiz-choice:checked ~ .description #itop-ticket-mgmt-simple-ticket-enhanced-portal:not(:checked) ~ .description::after, #setup .module-selection-body .wiz-choice:checked ~ .description #itop-ticket-mgmt-itil-enhanced-portal:not(:checked) ~ .description::after {
-  content: "Legacy portal is no longer part of iTop, by leaving this option unchecked your portal users won't be able to access iTop anymore.";
-  display: block;
-  margin-top: 0.5em;
-  font-weight: bold;
-  color: rgba(230, 0, 0, 0.722);
-}
-.mfp-close {
-  cursor: pointer !important;
-}
-.qtip-content {
-  font-size: 12px;
-}
-.qtip-content p:first-child {
-  margin-top: 0px;
-}
-.qtip-content p:last-child {
-  margin-bottom: 0px;
-}
-.synchro-source-title {
-  font-weight: bolder;
-}
-.synchro-source-description {
-  font-size: smaller;
-  margin-top: 3px;
-  margin-bottom: 1px;
-}
-.object-ref-icon.fas {
-  color: #ea7d1e;
-  font-size: smaller;
-  vertical-align: 1px;
-  margin-right: 1px;
-}
-.object-ref-icon-disabled.fas {
-  color: #555;
-  font-size: smaller;
-  margin-right: 1px;
-}
-.object-ref-link {
-  background: none;
-}
-.extension-source {
-  display: inline-block;
-  background-color: #555;
-  padding: 3px;
-  font-size: 10px;
-  color: #fff;
-  border-radius: 4px;
-}
-#img-lifecycle {
-  width: 100%;
-}
-#img-lifecycle:hover {
-  width: 100%;
-  cursor: pointer;
-}
-#search-model {
-  width: 85%;
-}
-.mfp-figure:after {
-  background-color: #dff1ff;
-}
-#classDetailsClassName {
-  display: inline;
-}
-.qtip-content a, .qtip-content a:visited {
-  color: #1c94c4;
-  text-decoration: none;
-}
-.qtip-content a:hover, .qtip-content a:active {
-  color: #e87c1e;
-  text-decoration: none;
-}
-.data-model-viewer a, .data-model-viewer a:visited {
-  color: #1c94c4;
-  text-decoration: none;
-}
-.data-model-viewer a:hover {
-  color: #e87c1e;
-  text-decoration: none;
-}
-table.listResults .originColor {
-  width: 0px;
-  padding: 2px !important;
-}
-#displaySelectorLabel, #changeDefaultDisplay {
-  display: inline-block;
-}
-#dataModelSplitPane {
-  height: 100%;
-}
-#dataModelClassIcon, dataModelScrollableDiv > img {
-  padding-right: 13px;
-  display: inline;
-}
-#dataModelScrollableDiv {
-  background-color: #eee;
-  position: fixed;
-  z-index: -1;
-  width: 100%;
-}
-#dataModelHeader {
-  background-color: white;
-}
-#dataModelSplitPane #tabbedContent_0 {
-  z-index: -2;
-}
-#dataModelScrollableClassName, #dataModelScrollableClassIcon {
-  display: inline;
-}
-#dataModelScrollableDiv > img {
-  padding-right: 5px;
-}
-#dataModelSplitPane .ui-layout-resizer {
-  background: #ddd;
-  width: 10px !important;
-  margin-left: 15px !important;
-}
-#dataModelSplitPane .ui-layout-resizer :hover {
-  background: #e87c1e;
-}
-#dataModelSplitPane .ui-layout-resizer-west {
-  border-left: 1px solid #bbb;
-  border-right: 1px solid #bbb;
-}
-#dataModelSplitPane .ui-layout-resizer-east {
-  border-left: 1px solid #bbb;
-  border-right: 1px solid #bbb;
-}
-#dataModelSplitPane .ui-layout-toggler {
-  background: #aaa;
-  width: 10px !important;
-}
-#dataModelSplitPane .ui-layout-toggler:hover {
-  background: #e87c1e;
-}
-.dataModelSchema g {
-  cursor: pointer;
-}
-.dataModelSchema g:hover rect:not(.liseret) {
-  fill: #dbe4f0;
-}
-.dataModelSchema text {
-  fill: black;
-  font: 10px sans-serif;
-  text-anchor: middle;
-}
-#selfreferencing:hover ~ g > .selfattr {
-  fill: #dbe4f0;
-}
-.tooltipD3 {
-  position: fixed;
-  text-align: center;
-  background: #eee;
-  border: 1px solid #555;
-  border-radius: 2px;
-  pointer-events: none;
-  fill: black;
-  font: 11px sans-serif;
-  text-anchor: middle;
-}
-#tooltipD3_top {
-  font-weight: bold;
-  border-bottom: 1px solid #555;
-  padding: 3px;
-}
-.tooltipD3 i {
-  font-size: 14px;
-}
-.tooltipD3 span {
-  margin: 2px;
-}
-.data-model-viewer {
-  background-color: #fff;
-  margin-top: 7px !important;
-  margin-left: 15px !important;
-}
-#delDataModelSearch {
-  color: #e87c1e;
-  display: inline-block;
-  font-size: 15px;
-  margin-left: 1%;
-}
-#dataModelSplitPane .ui-layout-center {
-  margin-left: 30px !important;
-}
-#ds_flash {
-  margin-bottom: 5px;
-}
-.menu-icon-select {
-  max-height: 300px;
-  position: absolute;
-  z-index: 201;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-.menu-icon-select > .ui-menu-item {
-  padding: 0.3em 3%;
-}
-.menu-icon-select > .ui-menu-item > * {
-  width: 100%;
-  white-space: nowrap;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-}
-.menu-icon-select > .ui-menu-item > * > img {
-  max-width: 80px;
-  max-height: 45px;
-  margin-right: 10px;
-}
-.attribute.attribute-set .attribute-set-item::after {
-  content: ",";
-  margin-right: 0.5em;
-}
-.attribute.attribute-set .attribute-set-item:last-of-type::after {
-  content: "";
-  margin-right: 0;
-}
-.attribute.attribute-set.history-added .attribute-set-item {
-  font-weight: bold;
-}
-.attribute.attribute-set.history-removed .attribute-set-item {
-  text-decoration: line-through;
-  font-style: italic;
-}
-.attribute-edit .attribute-set .attribute-set-item, .attribute-tag-set.attribute-set .attribute-set-item, .selectize-control > .selectize-input > .item[data-value], .selectize-control.multi > .selectize-input > .item[data-value], .selectize-control > .selectize-input > .item[data-value].active, .selectize-control.multi > .selectize-input > .item[data-value].active {
-  display: inline-block;
-  margin-right: 3px;
-  margin-bottom: 3px;
-  padding: 4px 6px;
-  max-width: 120px;
-  background: #fdfdfd none;
-  border-radius: 2px;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px 1px #f1f1f1;
-  color: #222;
-  text-shadow: none;
-  vertical-align: middle;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.attribute-edit .attribute-set .attribute-set-item::after, .attribute-tag-set.attribute-set .attribute-set-item::after, .selectize-control > .selectize-input > .item[data-value]::after, .selectize-control.multi > .selectize-input > .item[data-value]::after, .selectize-control > .selectize-input > .item[data-value].active::after, .selectize-control.multi > .selectize-input > .item[data-value].active::after {
-  content: "";
-  margin-right: 0;
-}
-.selectize-control > .selectize-input.has-items:after, .selectize-control.multi > .selectize-input.has-items:after {
-  content: "+";
-  display: inline-block;
-  font-size: 17px;
-  font-weight: bold;
-  color: #222;
-}
-.selectize-control > .selectize-input > .item[data-value], .selectize-control.multi > .selectize-input > .item[data-value] {
-  padding-right: 1.5em !important;
-  border: 1px solid #ddd;
-}
-.selectize-control > .selectize-input > .item[data-value] > .remove, .selectize-control.multi > .selectize-input > .item[data-value] > .remove {
-  padding-top: 0.3em;
-  border: none;
-}
-/* The switch - the box around the slider */
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 36px;
-  height: 20px;
-  vertical-align: baseline;
-}
-/* Hide default HTML checkbox */
-.switch input {
-  display: none;
-}
-/* The slider */
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  transition: 0.4s;
-}
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 15px;
-  width: 15px;
-  left: 3px;
-  bottom: 3px;
-  background-color: white;
-  transition: 0.4s;
-}
-input:checked + .slider {
-  background-color: #ea7d1e;
-}
-input:focus + .slider {
-  box-shadow: 0 0 1px #ea7d1e;
-}
-input:checked + .slider:before {
-  transform: translateX(14.5px);
-}
-/* Rounded sliders */
-.slider.round {
-  border-radius: 20px;
-}
-.slider.round:before {
-  border-radius: 7px;
-}
-#newsroom_menu li span {
-  display: block;
-  padding: 5px 12px;
-  text-decoration: none;
-  white-space: nowrap;
-}
-#newsroom_menu li li p {
-  text-align: left;
-  margin: 2px;
-  margin-left: 5px;
-  margin-right: 5px;
-  cursor: pointer;
-  background-color: transparent;
-}
-#newsroom_menu > ul > li > ul {
-  margin-top: 8px;
-}
-#newsroom_menu > ul > li > ul > li {
-  display: block;
-  border-bottom: 1px #ddd solid;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  text-align: left;
-}
-#newsroom_menu > ul > li > ul > li:hover, #newsroom_menu > ul > li > ul > li:hover h1, #newsroom_menu > ul > li > ul > li:hover h2, #newsroom_menu > ul > li > ul > li:hover h3 {
-  background: #ea7d1e;
-  color: #fff;
-}
-#newsroom_menu li li:last-of-type {
-  border-bottom: 0;
-}
-#newsroom_menu li {
-  list-style: none;
-  cursor: pointer;
-  color: #000;
-}
-#newsroom_menu li ul {
-  width: 300px;
-}
-#top-left-newsroom-cell {
-  padding-right: 11px !important;
-}
-#newsroom_menu_icon {
-  position: relative;
-  top: 8px;
-}
-#newsroom_menu_counter_container {
-  position: relative;
-  top: -26px;
-  left: 4px;
-}
-#newsroom_menu_counter {
-  display: inline-block;
-  padding: 2px;
-  border-radius: 8px;
-  text-align: center;
-  width: 12px;
-  box-shadow: 1px 1px 2px 0px #777;
-  font-size: 8pt;
-  background-color: #1c94c4;
-  color: #fff;
-  cursor: pointer;
-}
-.newsroom_extra_messages_counter {
-  display: inline-block !important;
-  padding: 2px !important;
-  border-radius: 8px;
-  text-align: center;
-  font-size: 8pt;
-  min-width: 12px;
-  background-color: #808080;
-  color: #fff;
-  float: right;
-  margin-right: 5px;
-}
-.newsroom_menu_item > div > img {
-  float: left;
-  width: 32px;
-  max-height: 32px;
-  margin-top: 0;
-  margin-bottom: 0;
-  margin-left: 5px;
-  margin-right: 5px;
-}
-#newsroom_menu_dismiss_all, #newsroom_menu_show_all {
-  text-align: center !important;
-}
-#newsroom_show_all_submenu {
-  text-align: center;
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-}
-#newsroom_show_all_submenu > ul {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-#newsroom_show_all_submenu > ul > li > ul {
-  margin-top: 8px;
-}
-#newsroom_show_all_submenu > ul > li > ul > li {
-  display: block;
-  border-bottom: 1px #ddd solid;
-  padding-left: 5px;
-  padding-top: 4px;
-  padding-bottom: 6px;
-  text-align: left;
-}
-#newsroom_show_all_submenu > ul > li > ul > li:hover {
-  background: #ea7d1e;
-  color: #fff;
-}
-#newsroom_show_all_submenu li ul {
-  width: 200px;
-  color: #000;
-}
-.no-padding {
-  padding: 0 !important;
-}
-.newsroom_menu_item_date {
-  padding: 0 !important;
-  margin-bottom: -10px;
-  font-size: 8pt;
-  text-align: right;
-  margin-top: -2px;
-  margin-right: 5px;
-  color: #fff;
-}
-#newsroom_display_size {
-  height: 1em;
-  width: 3em;
-}
-#newsroom_no_new_message p {
-  text-align: center !important;
-  cursor: default !important;
-  font-style: italic;
-}
-#newsroom_no_new_message {
-  color: #444 !important;
-}
-#newsroom_no_new_message:hover {
-  cursor: default !important;
-  color: #444 !important;
-  background-color: #fff !important;
-}
-#newsroom_menu h1 {
-  font-weight: 700;
-  font-size: 16px;
-  margin-bottom: 0.5em;
-}
-#newsroom_menu h2 {
-  font-weight: 700;
-  font-size: 14px;
-  margin-bottom: 0.5em;
-}
-#newsroom_menu h3, #newsroom_menu h4, #newsroom_menu h5 {
-  font-weight: 700;
-  font-size: 12px;
-  margin-bottom: 0.5em;
-}
-.clearboth {
-  clear: both;
-}
-/* font-awesome 4 to 5 BC fix */
-.pull-right {
-  float: right;
-}
-.pull-left {
-  float: left;
-}
diff --git a/css/light-grey.scss b/css/light-grey.scss
index 4d1251447..3cf2b3d9e 100644
--- a/css/light-grey.scss
+++ b/css/light-grey.scss
@@ -1,35 +1,4 @@
-/*!
- * Copyright (C) 2013-2019 Combodo SARL
- *
- * This file is part of iTop.
- *
- * iTop is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * iTop is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- */
-
-@import 'css-variables.scss';
-
-$hilight-color: $highlight-color;
-$summary-details-background: $grey-color;
-$main-header-background: $frame-background-color;
-$table-even-background: $frame-background-color;
-$popup-menu-highlight-color: $highlight-color;
-$popup-menu-text-color: #000;
-$popup-menu-background-color: #fff;
-$popup-menu-text-higlight-color: #fff;
-$breadcrumb-color: #555;
-$breadcrumb-text-color: #fff;
-$breadcrumb-highlight-color: $highlight-color;
-$breadcrumb-text-highlight-color: #fff;
+//@import 'css-variables.scss';
 
 /* CSS Document */
 body {
@@ -96,7 +65,7 @@ label {
 }
 
 .hilite, .hilite a, .hilite a:visited {
-    color: $hilight-color;
+    color: $highlight-color;
     text-decoration: none;
 }
 table.datatable {
@@ -114,7 +83,7 @@ table.listResults {
 	border-bottom: 3px solid #e6e6e1;  
 	border-right: 3px solid #e6e6e1;
 	width: 100%;
-	background-color: #fff;
+	background-color: $white;
 }
 
 table.listResults td {
@@ -172,7 +141,7 @@ table.listResults > tbody > tr:hover > * {
 
 	  &.compat {
 		// Browser not supporting FileReader
-		background-image: url("ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png");
+		background-image: url($approot-relative + "css/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=" + $version);
 		img {
 		  opacity: 0.3;
 		}
@@ -198,7 +167,7 @@ table.listResults > tbody > tr:hover > * {
 		opacity: 0.3;
 	  }
 	  .ui-icon {
-		background-image: url("ui-lightness/images/ui-icons_ffffff_256x240.png");
+		background-image: url($approot-relative + "css/ui-lightness/images/ui-icons_ffffff_256x240.png?v=" + $version);
 	  }
 	}
   }
@@ -212,7 +181,7 @@ table.listResults > tbody > tr:hover > * {
 .details .view-image {
   text-align: center;
   padding: 2px;
-  border: 2px solid #DDDDDD;
+  border: 2px solid $gray-lighter;
   border-radius: 6px;
 
   img {
@@ -247,11 +216,11 @@ tr.even td, .wizContainer tr.even td {
 } 
 tr.red_even td, .wizContainer tr.red_even td {
 	background-color: #f97e75;
-	color: #fff;
+	color: $white;
 }
 tr.red td, .wizContainer tr.red td {
 	background-color: #f9a397;
-	color: #fff;
+	color: $white;
 }
 tr.orange_even td, .wizContainer tr.orange_even td {
 	background-color: #f4d07a;
@@ -288,15 +257,29 @@ th.header {
 }
 
 th.headerSortUp {
-	background-image: url(../images/asc.gif);
 	text-decoration: underline;
 	cursor: pointer;
+	padding-right: 5px;
+	&::after {
+		text-align: right;
+		content: '\f0d7';
+		font-family: 'FontAwesome';
+		color: $complement-color;
+		float: right;
+	}
 }
 
 th.headerSortDown {
-	background-image: url(../images/desc.gif);
 	text-decoration: underline;
 	cursor: pointer;
+	padding-right: 5px;
+	&::after {
+		text-align: right;
+		content: '\f0d8';
+		font-family: 'FontAwesome';
+		color: $complement-color;
+		float: right;
+	}
 }
 
 td {
@@ -319,7 +302,7 @@ td.label {
 td.label span {
     font-family: Tahoma, Verdana, Arial, Helvetica;
     font-size: 12px;
-    color: #000000;
+    color: $text-color;
     padding: 5px;
     padding-right: 10px;	
     font-weight:bold;
@@ -377,10 +360,10 @@ legend.transparent {
 }
 .cke_reset_all *:hover {
 	text-decoration: none;
-	color: #000;
+	color: $text-color;
 }
 table.cke_dialog_contents a.cke_dialog_ui_button_ok {
-    color: #000;
+    color: $text-color;
     border-color: $highlight-color;
     background: $highlight-color;
 }
@@ -389,7 +372,7 @@ table.cke_dialog_contents a.cke_dialog_ui_button_ok {
 }
 td a.no-arrow, td a.no-arrow:visited, .SearchDrawer a.no-arrow, .SearchDrawer a.no-arrow:visited {
 	text-decoration:none;
-	color:#000000;
+	color: $text-color;
 	padding-left:0px;
 	background: inherit;
 }
@@ -419,7 +402,7 @@ td a:visited{
 a.small_action {
     font-family: Tahoma, Verdana, Arial, Helvetica;
     font-size: 8pt;
-    color: #000000;
+    color: $text-color;
 	text-decoration:none;
 }
 .display_block {
@@ -432,10 +415,10 @@ a.small_action {
 	padding-left: 5px;
 	padding-top: 2px;
 	padding-bottom: 2px;
-	background: $highlight-color url(../images/actions_left.png?v=#{$version}) no-repeat left;
+	background: $highlight-color;
 }
 .actions_details span{
-	background: url(../images/actions_right.png?v=#{$version}) no-repeat right;
+	background: url($approot-relative + "images/actions_right.png?v=" + $version) no-repeat right;
 	color: #fff;
 	font-weight: bold;
 	padding-top: 2px;
@@ -452,15 +435,15 @@ a.small_action {
 }
 
 input.textSearch {
-	border:1px solid #000;
+	border:1px solid $gray-base;
 	font-family:Tahoma,Verdana, Arial, Helvetica, sans-serif;
 	font-size: 12px;
-	color:#000000;
+	color: $text-color;
 }
 
 .ac_input {
 	border: 1px solid #7f9db9;
-	background: #fff url(../images/ac-background.gif) no-repeat right;
+	background: #fff url($approot-relative + "images/ac-background.gif?v=" + $version) no-repeat right;
 }
 /* By Rom */
 .csvimport_createobj {
@@ -477,17 +460,17 @@ input.textSearch {
     background-color:#EEEEEE;
 }
 .csvimport_ok {
-    color: #000000;
+    color: $text-color;
     background-color:#BBFFBB;
 }
 .csvimport_reconkey {
     font-style: italic;
     color: #888888;
-    background-color:#FFFFFF;
+    background-color: $white;
 }
 .csvimport_extreconkey {
     color: #888888;
-    background-color:#FFFFFF;
+    background-color: $white;
 }
 #accordion {
 	display:none;
@@ -520,7 +503,7 @@ input.textSearch {
     noborder-top: 1px solid #8b8b8b;
     padding: 4px 0px 0px 16px;   	
 	font-size:8pt;
-    background: url(../images/green-square.gif) no-repeat bottom left;
+    background: url($approot-relative + "images/green-square.gif?v=" + $version) no-repeat bottom left;
     color:#83b217;
     font-weight:bold;
 	text-decoration:none;
@@ -544,34 +527,52 @@ div.ui-accordion-content {
 	margin-top: 0;
 }
 
-.ui-accordion-content li { 
-	color:$grey-color;
-	text-decoration:none;
+.ui-accordion-content li {
+	color: $grey-color;
+	text-decoration: none;
 	margin: 0;
 	padding: 0px 0pt 0px 16px;
 	font-size: 9pt;
-    background: url(../images/mini-arrow-orange.gif) no-repeat top left;
-    font-weight:normal;
-    border: 0;
+	font-weight: normal;
+	border: 0;
+	::before {
+		color: $highlight-color;
+		content: '\f0da';
+		font-family: 'FontAwesome';
+		margin-right: 6px;
+		font-size: 10px;
+	}
 }
 
-a.CollapsibleLabel, td a.CollapsibleLabel { 
+td a.CollapsibleLabel, a.CollapsibleLabel{ 
 	margin: 0;
 	padding: 0px 0pt 0px 16px;
 	font-size:8pt;
 	text-decoration:none;
 	color:$grey-color;
-    background: url(../images/mini-arrow-orange.gif) no-repeat left;
+}
+td a.CollapsibleLabel::before, a.CollapsibleLabel::before{
+	color: $highlight-color;
+	content: '\f0da';
+	font-family: 'FontAwesome';
+	margin-right: 6px;
+	font-size: 10px;
 }
 
-/* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
-a.CollapsibleLabel.open,  td a.CollapsibleLabel.open { 
+	/* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
+td a.CollapsibleLabel.open, a.CollapsibleLabel.open{ 
 	margin: 0;
 	padding: 0px 0pt 0px 16px;
 	font-size:8pt;
 	text-decoration:none;
 	color: $highlight-color;
-    background: url(../images/mini-arrow-orange-open.gif) no-repeat left;
+}
+td a.CollapsibleLabel.open::before, a.CollapsibleLabel.open::before {
+	color: $highlight-color;
+	content: '\f0d7';
+	font-family: 'FontAwesome';
+	margin-right: 6px;
+	font-size: 10px;
 }
 
 .page_header {
@@ -583,12 +584,12 @@ a.CollapsibleLabel.open,  td a.CollapsibleLabel.open {
 	margin-top: -8px;
 }
 
-.notreeview li { background: url(../images/tv-item.gif) 0 0 no-repeat; }
-.notreeview .collapsable { background-image: url(../images/tv-collapsable.gif); }
-.notreeview .expandable { background-image: url(../images/tv-expandable.gif); }
-.notreeview .last { background-image: url(../images/tv-item-last.gif); }
-.notreeview .lastCollapsable { background-image: url(../images/tv-collapsable-last.gif); }
-.notreeview .lastExpandable { background-image: url(../images/tv-expandable-last.gif); }
+.notreeview li { background: url($approot-relative + "images/tv-item.gif?v=" + $version) 0 0 no-repeat; }
+.notreeview .collapsable { background-image: url($approot-relative + "images/tv-collapsable.gif?v=" + $version); }
+.notreeview .expandable { background-image: url($approot-relative + "images/tv-expandable.gif?v=" + $version); }
+.notreeview .last { background-image: url($approot-relative + "images/tv-item-last.gif?v=" + $version); }
+.notreeview .lastCollapsable { background-image: url($approot-relative + "images/tv-collapsable-last.gif?v=" + $version); }
+.notreeview .lastExpandable { background-image: url($approot-relative + "images/tv-expandable-last.gif?v=" + $version); }
 
 #OrganizationSelection {
     padding:5px 0px 16px 20px;
@@ -613,7 +614,7 @@ div.actions_menu > ul {
 	display:block;
 	nowidth:70px; /* Nasty work-around for IE... en attendant mieux */
 	padding-left: 5px;
-	background: $highlight-color url(../images/actions_left.png?v=#{$version}) no-repeat top left;
+	background: $highlight-color;
 	cursor: pointer;
 	margin: 0;
 }
@@ -624,14 +625,18 @@ div.actions_menu > ul > li {
 	font-size: 11px;
 	font-family: Tahoma,sans-serif;
 	height: 17px;
-	padding-right: 16px;
+	padding-right: 10px;
 	padding-left: 4px;
-	background: url(../images/actions_right.png?v=#{$version}) no-repeat top right transparent;
 	font-weight: bold;
 	color: $popup-menu-text-higlight-color;
 	vertical-align: middle;
 	margin: 0;
 }
+
+div.actions_menu > ul > li > i {
+	margin-left: 5px;
+}
+
 #logOffBtn > ul > li {
 	list-style: none;
 	vertical-align: middle;
@@ -675,9 +680,33 @@ div.actions_menu > ul > li {
 }
 
 .menucontainer div.toolkit_menu {
+	background: $highlight-color;
 	margin-left: 10px;
+	> ul > li 
+	{
+		float: left;
+		list-style: none;
+		font-size: 11px;
+		font-family: Tahoma, sans-serif;
+		height: 19px;
+		padding-right: 4px;
+		padding-left: 6px;
+		font-weight: bold;
+		color:#fff;
+		vertical-align: middle;
+		line-height: 17px;
+		margin: 0;
+		> i:nth-child(1) {
+			font-size: 13px;
+			padding-top: 3px;
+		}
+		> i:nth-child(2) {
+			margin-left: 5px;
+		}
+	}
 }
 
+
 .itop_popup li a:hover, #logOffBtn li a:hover {
 	background: #1A4473;
 }
@@ -750,31 +779,31 @@ hr.menu-separator {
 
 .red {
 	background-color: #ff6000;
-	color: #000;
+	color: $text-color;
 }
 
 th.red {
-	background: url(../images/red-header.gif) bottom left repeat-x;
-	color: #000;
+	background: url($approot-relative + "images/red-header.gif?v=" + $version) bottom left repeat-x;
+	color: $text-color;
 }
 
 .green {
 	background-color: #00cc00;
-	color: #000;
+	color: $text-color;
 }
 th.green {
-	background: url(../images/green-header.gif) bottom left repeat-x;
-	color: #000;
+	background: url($approot-relative + "images/green-header.gif?v=" + $version) bottom left repeat-x;
+	color: $text-color;
 }
 
 .orange {
 	background-color: #ffde00;
-	color: #000;
+	color: $text-color;
 }
 
 th.orange {
-	background: url(../images/orange-header.gif) bottom left repeat-x;
-	color: #000;
+	background: url($approot-relative + "images/orange-header.gif?v=" + $version) bottom left repeat-x;
+	color: $text-color;
 }
 
 /* For Date Picker: Creates a little calendar icon
@@ -789,7 +818,7 @@ td a.dp-choose-date, a.dp-choose-date, td a.dp-choose-date:hover, a.dp-choose-da
 	display: block;
 	text-indent: -2000px;
 	overflow: hidden;
-	background: url(../images/calendar.png?v=#{$version}) no-repeat; 
+	background: url($approot-relative + "images/calendar.png?v=" + $version) no-repeat; 
 }
 td a.dp-choose-date.dp-disabled, a.dp-choose-date.dp-disabled {
 	background-position: 0 -20px;
@@ -949,7 +978,7 @@ input.dp-applied {
 		transition: opacity 0.3s, background-color 0.3s, color 0.3s linear;
 		padding: 8px 10px;
 		margin: 0;
-		color: #ffffff;
+		color: $white;
 		background-color: $complement-color;
 		cursor: pointer;
 		.sft_hint,
@@ -1629,22 +1658,22 @@ input.dp-applied {
 
 /* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
 table.listResults tr.odd td.truncated, table.listResults tr td.truncated, .wizContainer table.listResults tr.odd td.truncated, .wizContainer table.listResults tr td.truncated {
-	background: url(../images/truncated.png?v=#{$version}) bottom  repeat-x;
+	background: url($approot-relative + "images/truncated.png?v=" + $version) bottom  repeat-x;
 }
 
 /* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
 table.listResults tr.even td.truncated, .wizContainer table.listResults  tr.even td.truncated {
-	background: #f9f9f1 url(../images/truncated.png?v=#{$version}) bottom  repeat-x;
+	background: #f9f9f1 url($approot-relative + "images/truncated.png?v=" + $version) bottom  repeat-x;
 }
 
 /* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
 table.listResults tr.even td.hover.truncated, .wizContainer table.listResults  tr.even td.hover.truncated {
-	background: #fdf5d0 url(../images/truncated.png?v=#{$version}) bottom  repeat-x;
+	background: #fdf5d0 url($approot-relative + "images/truncated.png?v=" + $version) bottom  repeat-x;
 }
 
 /* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
 table.listResults tr.odd td.hover.truncated,  table.listResults tr td.hover.truncated, .wizContainer table.listResults  tr.odd td.hover.truncated, .wizContainer table.listResults  tr td.hover.truncated {
-	background: #fdf5d0 url(../images/truncated.png?v=#{$version}) bottom  repeat-x;
+	background: #fdf5d0 url($approot-relative + "images/truncated.png?v=" + $version) bottom  repeat-x;
 }
 
 table.listResults.truncated {
@@ -1658,7 +1687,7 @@ tr.csv_row0 td {
 	padding-left:10px;
 	padding-right:10px;
 	background: #fff;
-	border-left: #000 1px solid;
+	border-left: $gray-base 1px solid;
 	
 }
 tr.csv_row1 td {
@@ -1667,7 +1696,7 @@ tr.csv_row1 td {
 	padding-left:10px;
 	padding-right:10px;
 	background: #f9f9f1;
-	border-left: #000 1px solid;
+	border-left: $gray-base 1px solid;
 	
 }
 tr.csv_row1 th, tr.csv_row0 th {
@@ -1675,13 +1704,13 @@ tr.csv_row1 th, tr.csv_row0 th {
 	padding-bottom:5px;
 	padding-left:10px;
 	padding-right:10px;
-	border-left: #000 1px solid;
+	border-left: $gray-base 1px solid;
 	
 }
 
 td.cell_modified {
 	font-weight: bold;
-	color: #000;
+	color: $text-color;
 }
 
 td.cell_error {
@@ -1759,7 +1788,7 @@ div#logo {
 div#logo div {
 	height: 88px;
 	width: 244px;
-	background: url(../images/itop-logo-2.png?v=#{$version}) left no-repeat;
+	background: url($approot-relative + "images/itop-logo-2.png?v=" + $version) left no-repeat;
 }
 #left-pane .ui-layout-north {
 	overflow: hidden;
@@ -1857,16 +1886,29 @@ div#logo div {
 }
 #global-search-image {
 	vertical-align: middle;
-	background: url(../images/search.png?v=#{$version}) center center no-repeat;
 	display:inline-block;
 	width: 28px;
 	height: 30px;
-	margin-left: -8px;
+	margin-left: -4px;
 	cursor: pointer;
+	line-height: 39px;
+	> i {
+		font-size: 22px;
+	}
 }
-#help-link img {
+.top-right-icon{
 	padding: 0;
 	border: 0;
+	color: $highlight-color;
+	text-decoration: none;
+	font-size: 20px;
+}
+.icon-additional-arrow::after{
+	font-family: "FontAwesome";
+	content: "\f0dd";
+	color: $highlight-color;
+	font-size: 11px;
+	margin-left: 2px;
 }
 #help-link {
 	padding: 0;
@@ -1881,12 +1923,27 @@ div.icon {
 	margin: 2px;
 	float: right;
 }
+.mini_button {
+	background-color: $highlight-color;
+	border:0;
+	cursor:pointer;
+	width: 20px;
+	height: 20px;
+	line-height: 20px;
+	text-align: center;
+	display: inline-block;
+	vertical-align: middle;
+	> i {
+		color: $white;
+		font-size: 11px;
+	}
+}
 span.ui-icon {
 	float:left;
 	margin:0 2px;
 }
 .ui-layout-button-pin-down {
-	background: url(../images/splitter-bkg.png?v=#{$version}) transparent;
+	background: url($approot-relative + "images/splitter-bkg.png?v=" + $version) transparent;
 	width: 16px;
 	background-position: -144px -144px;
 }
@@ -1962,7 +2019,8 @@ span.form_validation {
 	width:100px;
 }
 .synoptics tr.synoptics_header td {
-	color:#000; font-size:1em;
+	color: $text-color;
+	font-size:1em;
 	vertical-align:middle;
 	text-align:center;
 }
@@ -2023,13 +2081,13 @@ span.form_validation {
 .caselog_header {
 	padding:3px;
 	border-top:1px solid #fff;
-	background: #ddd url(../images/plus.gif) left no-repeat;
+	background: #ddd url($approot-relative + "images/plus.gif?v=" + $version) left no-repeat;
 	padding-left: 16px;
 	cursor: pointer;
 	width:100%;
 }
 .caselog_header.open {
-	background: #ddd url(../images/minus.gif) left no-repeat;
+	background: #ddd url($approot-relative + "images/minus.gif?v=" + $version) left no-repeat;
 }
 .caselog_entry,
 .caselog_entry_html {
@@ -2127,7 +2185,7 @@ fieldset .details>.field_container {
 			padding-right: 10px;
 
 			> label,span {
-				color: #000000;
+				color: $text-color;
 				font-weight:bold;
 			}
 		}
@@ -2230,7 +2288,7 @@ fieldset .details>.field_container {
 									height: 15px;
 									border: 1px #A6A6A6 solid;
 									cursor: pointer;
-									background-image: url('../images/full-screen.png');
+									background-image: url($approot-relative + "images/full-screen.png?v=" + $version);
 									background-repeat: no-repeat;
 									background-position: center center;
 									background-size: 98%;
@@ -2371,7 +2429,7 @@ fieldset .details>.field_container {
 			height: 15px;
 			border: 1px #A6A6A6 solid;
 			cursor: pointer;
-			background-image: url('../images/full-screen.png');
+			background-image: url($approot-relative + "images/full-screen.png?v=" + $version);
 			background-repeat: no-repeat;
 			background-position: center center;
 			background-size: 98%;
@@ -2416,7 +2474,7 @@ fieldset .details>.field_container {
 	padding-right: 30px;
 	text-align: left;
 
-	*{
+	*:not(i){
 		box-sizing: border-box;
 		vertical-align: middle;
 	}
@@ -2447,7 +2505,7 @@ fieldset .details>.field_container {
 	}
 }
 .ac_dlg_loading {
-	background: white url('../images/indicator.gif') right center no-repeat;
+	background: white url($approot-relative + "images/indicator.gif?v=" + $version) right center no-repeat;
 }
 table.pagination {
 	display:inline-block;
@@ -2483,7 +2541,7 @@ img.prev, img.first, img.next, img.last {
 }
 div.actions_button {
 	float:right;
-	background: $highlight-color url("../images/actions_left.png?v=#{$version}") no-repeat scroll left top;
+	background: $highlight-color;
 	padding-left: 5px;
 	margin-top: 0;
 	margin-right: 10px;
@@ -2492,7 +2550,7 @@ div.actions_button {
 }
 
 div.actions_button a, .actions_button a:hover, .actions_button a:visited {
-	background: $highlight-color  url(../images/actions_bkg.png?v=#{$version}) no-repeat scroll right top;
+	background: $highlight-color;
 	color:#fff;
 	padding-right: 8px;
 	cursor:pointer;
@@ -2516,10 +2574,10 @@ select#org_id {
 	cursor: not-allowed;
 }
 .dragHover {
-	background: url(./ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=#{$version});
+	background: url($approot-relative + "css/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v="+ $version);
 }
 .edit_mode .dashlet {
-	background: url(./ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=#{$version});
+	background: url($approot-relative + "css/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=" + $version);
 	padding: 5px;
 	margin:0;
 	position:relative;
@@ -2562,7 +2620,7 @@ table.prop_table {
 	top: 0;
 	right: 0;
 	z-index: 10;
-	background: transparent url(../images/delete.png?v=#{$version}) no-repeat center;
+	background: transparent url($approot-relative + "images/delete.png?v=" + $version) no-repeat center;
 }
 td.prop_value {
 	text-align: left;
@@ -2716,19 +2774,19 @@ a.summary,  a.summary:hover {
 	display: block;
 	padding: 5px 12px;
 	text-decoration: none;
-	color: #000;
+	color: $text-color;
 	font-weight: bold;
 	text-align: left;
 	white-space: nowrap;
-	background: #fff;
+	background: $white;
 }
 #DashboardMenu li span {
 	display: block;
 	padding: 5px 12px;
 	text-decoration: none;
-	color: #000;
+	color: $text-color;
 	white-space: nowrap;
-	background: #fff;
+	background: $white;
 }
 #DashboardMenu li {
 	list-style: none;
@@ -2739,8 +2797,8 @@ a.summary,  a.summary:hover {
 
 #DashboardMenu ul > li > ul
 {	
-	border: 1px solid black;
-	background: #fff;
+	border: 1px solid $gray-base;
+	background: $white;
 }
 	
 #DashboardMenu li > ul
@@ -2748,7 +2806,7 @@ a.summary,  a.summary:hover {
 	padding: 0;
 	position: absolute;
 	display: none;
-	border-top: 1px solid white;
+	border-top: 1px solid $white;
 	z-index: 1500;
 }
 #DashboardMenu li ul li a:hover{
@@ -2776,19 +2834,19 @@ a.summary,  a.summary:hover {
 	height: 12px;
 }
 .sort_none {
-	background: url(../images/bg.gif) no-repeat center;
+	background: url($approot-relative + "images/bg.gif?v=" + $version) no-repeat center;
 }
 .sort_asc {
-	background: url(../images/desc.gif) no-repeat center;
+	background: url($approot-relative + "images/desc.gif?v=" + $version) no-repeat center;
 }
 .sort_desc {
-	background: url(../images/asc.gif) no-repeat center;
+	background: url($approot-relative + "images/asc.gif?v=" + $version) no-repeat center;
 }
 .sort_hidden {
 	display: none;
 }
 .sortable_field_list > li.selected {
-	background: #F6A828;
+	background: $highlight-color;
 }
 .itop-deleted-object {
 	text-decoration: line-through;
@@ -2796,7 +2854,7 @@ a.summary,  a.summary:hover {
 .header_message {
 	padding: 1em;
 	font-size: 10pt;
-	background: #fff;
+	background: $white;
 	border: 1px solid #999;
 	-moz-border-radius: 4px;
 	-webkit-border-radius: 4px;
@@ -2805,23 +2863,23 @@ a.summary,  a.summary:hover {
 }
 .message_info {
 	border: 1px solid #993;
-	background: url(../images/info-mini.png?v=#{$version}) 1em 1em no-repeat #ffc;
+	background: url($approot-relative + "images/info-mini.png?v=" + $version) 1em 1em no-repeat #ffc;
 	padding-left: 3em;
 }
 .message_ok {
 	border: 1px solid #393;
-	background: url(../images/ok.png?v=#{$version}) 1em 1em no-repeat #cfc;
+	background: url($approot-relative + "images/ok.png?v=" + $version) 1em 1em no-repeat #cfc;
 	padding-left: 3em;
 }
 .message_warning {
 	border: 1px solid #ec9800;
-	background: url(../images/error.png?v=#{$version}) 1em 1em no-repeat #ffd78d;
-	color: #000;
+	background: url($approot-relative + "images/error.png?v=" + $version) 1em 1em no-repeat #ffd78d;
+	color: $text-color;
 	padding-left: 3em;
 }
 .message_error {
 	border: 1px solid #933;
-	background: url(../images/error.png?v=#{$version}) 1em 1em no-repeat #fcc;
+	background: url($approot-relative + "images/error.png?v=" + $version) 1em 1em no-repeat #fcc;
 	padding-left: 3em;
 }
 .fg-menu a img {
@@ -2836,7 +2894,7 @@ div.ui-dialog-header {
 	background: #fcc;
 }
 .simple-graph, .graph_config {
-	background: #fff;
+	background: $white;
 }
 .graph_config {
 	padding: 0.25em;
@@ -2944,7 +3002,7 @@ table.export_parameters td {
 div.explain-printable {
 	border: 5px solid $complement-color;
 	background: $complement-light;
-	color: #000;
+	color: $text-color;
 	padding: 10px;
 	margin: 0;
 	font-size: 12px;
@@ -2955,19 +3013,19 @@ div.explain-printable {
 }
 #hiddeable_chapters .ui-tabs .ui-tabs-nav li.hideable-chapter span {
 	padding-left: 20px;
-	background: url(../images/eye-open-555.png?v=#{$version}) 2px center no-repeat;
+	background: url($approot-relative + "images/eye-open-555.png?v=" + $version) 2px center no-repeat;
 }
 
 #hiddeable_chapters .ui-tabs .ui-tabs-nav li.hideable-chapter.strikethrough span {
 	text-decoration: line-through;
-	background: url(../images/eye-closed-555.png?v=#{$version}) 2px center no-repeat;
+	background: url($approot-relative + "images/eye-closed-555.png?v=" + $version) 2px center no-repeat;
 }
 .printable-version legend {
 	padding-left: 26px;
-	background: $complement-color url(../images/eye-open-fff.png?v=#{$version}) 8px center no-repeat;
+	background: $complement-color url($approot-relative + "images/eye-open-fff.png?v=" + $version) 8px center no-repeat;
 }
 .printable-version .strikethrough legend {
-	background: $complement-color url(../images/eye-closed-fff.png?v=#{$version}) 8px center no-repeat;
+	background: $complement-color url($approot-relative + "images/eye-closed-fff.png?v=" + $version) 8px center no-repeat;
 }
 .printable-version fieldset.strikethrough span {
 	display: none;
@@ -2986,7 +3044,7 @@ span.search-button, span.refresh-button {
 	width: 21px;
 	height: 18px;
 	cursor: pointer;
-	color: #FFFFFF;
+	color: $white;
 	text-align: center;
 	padding-top: 3px;
 	font-size: 10px;
@@ -3040,7 +3098,7 @@ span.search-button, span.refresh-button {
 	cursor: pointer;
 	width: 16px;
 	height: 16px;
-	background-image: url(ui-lightness/images/ui-icons_222222_256x240.png);
+	background-image: url($approot-relative + "css/ui-lightness/images/ui-icons_222222_256x240.png?v=" + $version);
 	background-position: -16px -192px;
 }
 .history_entry_truncated .history_truncated_toggler {
@@ -3059,6 +3117,10 @@ span.search-button, span.refresh-button {
 	text-align: center;
 	width: $top-button-width !important;
 	cursor: pointer;
+	i {
+      font-size: 20px;
+	  color: $highlight-color;
+	}
   }
   #go-home {
 	text-align: center;
@@ -3073,8 +3135,11 @@ span.search-button, span.refresh-button {
 
 	  // Make the whole cell clickable
 	  display: inline-block;
-	  line-height: $top-button-heigth;
 	  width: 100%;
+	  i {
+		font-size: 20px;
+	    color: $highlight-color;
+	  }
 	}
   }
   .top-bar-spacer{
@@ -3137,7 +3202,7 @@ span.search-button, span.refresh-button {
 	  &::after{
 		content:'';
 		position: absolute;
-		background-image: url(../images/breadcrumb-separator.png?v=#{$version});
+		background-image: url($approot-relative + "images/breadcrumb-separator.png?v=" + $version);
 		background-repeat: no-repeat;
 		width: 8px;
 		height: 16px;
@@ -3243,7 +3308,7 @@ span.search-button, span.refresh-button {
 	background-color: $grey-color;
 	padding:3px;
 	font-size:10px;
-	color:#fff;
+	color: $white;
     border-radius: 4px;
 }
 
@@ -3271,21 +3336,21 @@ span.search-button, span.refresh-button {
 }
 
 .qtip-content a, .qtip-content a:visited{
-	color : #1c94c4;
+	color : $complement-color;
 	text-decoration: none;
 }
 .qtip-content a:hover, .qtip-content a:active{
-	color : #e87c1e;
+	color : $highlight-color;
 	text-decoration: none;
 }
 
 .data-model-viewer a, .data-model-viewer a:visited {
-	color : #1c94c4;
+	color : $complement-color;
 	text-decoration : none;
 }
 
 .data-model-viewer a:hover {
-	color: #e87c1e;
+	color: $highlight-color;
 	text-decoration: none;
 }
 
@@ -3312,7 +3377,7 @@ table.listResults .originColor{
     width: 100%
 }
 #dataModelHeader{
-	background-color: white;
+	background-color: $white;
 }
 
 #dataModelSplitPane  #tabbedContent_0{
@@ -3332,7 +3397,7 @@ table.listResults .originColor{
 	margin-left: 15px !important;
 }
 #dataModelSplitPane .ui-layout-resizer :hover{
-	background: #E87C1E;
+	background: $highlight-color;
 }
 #dataModelSplitPane .ui-layout-resizer-west{
 	border-left : 1px solid #BBB;
@@ -3348,7 +3413,7 @@ table.listResults .originColor{
 	width:10px !important;
 }
 #dataModelSplitPane .ui-layout-toggler:hover{
-	background: #E87C1E;
+	background: $highlight-color;
 }
 .dataModelSchema g {
 	cursor: pointer;
@@ -3388,13 +3453,13 @@ table.listResults .originColor{
 }
 
 .data-model-viewer{
-	background-color: #FFF;
+	background-color: $white;
 	margin-top:7px !important;
 	margin-left: 15px !important;
 }
 
 #delDataModelSearch {
-	color: #E87C1E;
+	color: $highlight-color;
 	display:inline-block;
 	font-size:15px;
 	margin-left:1%;
@@ -3611,7 +3676,7 @@ input:checked + .slider:before {
 }
 #newsroom_menu > ul > li > ul > li {
 	display: block;
-	border-bottom: 1px #ddd solid;
+	border-bottom: 1px $gray-lighter solid;
 	padding-top: 10px;
 	padding-bottom: 10px;
 	text-align: left;
@@ -3640,8 +3705,8 @@ input:checked + .slider:before {
 }
 #newsroom_menu_counter_container {
 	position:relative;
-	top:-26px;
-	left:4px;
+	top:-23px;
+	left:3px;
 }
 #newsroom_menu_counter {
 	display:inline-block;
@@ -3693,7 +3758,7 @@ input:checked + .slider:before {
 }
 #newsroom_show_all_submenu > ul > li > ul > li {
 	display: block;
-	border-bottom: 1px #ddd solid;
+	border-bottom: 1px $gray-lighter solid;
 	padding-left: 5px;
 	padding-top: 4px;
 	padding-bottom: 6px;
@@ -3705,7 +3770,7 @@ input:checked + .slider:before {
 }
 #newsroom_show_all_submenu li ul {
 	width: 200px;
-	color:#000;
+	color:$text-color;
 }
 .no-padding {
 	padding: 0 !important;
diff --git a/datamodels/2.x/itop-config-mgmt/datamodel.itop-config-mgmt.xml b/datamodels/2.x/itop-config-mgmt/datamodel.itop-config-mgmt.xml
index 487accde1..dade63ef7 100755
--- a/datamodels/2.x/itop-config-mgmt/datamodel.itop-config-mgmt.xml
+++ b/datamodels/2.x/itop-config-mgmt/datamodel.itop-config-mgmt.xml
@@ -8517,4 +8517,19 @@
       <enable_action>UR_ACTION_MODIFY</enable_action>
     </menu>
   </menus>
+  <branding >
+    <themes>
+      <theme id="light-grey" _delta="define">
+        <variables>
+        </variables>
+        <imports>
+          <import id="css-variables">../css/css-variables.scss</import>
+        </imports>
+        <stylesheets>
+          <stylesheet id="jqueryui">../css/ui-lightness/jqueryui.scss</stylesheet>
+          <stylesheet id="main">../css/light-grey.scss</stylesheet>
+        </stylesheets>
+      </theme> 
+    </themes>
+  </branding>
 </itop_design>
diff --git a/images/actions_bkg.png b/images/actions_bkg.png
deleted file mode 100644
index 5b26483428d03137dc6c0582422247debd6c3d37..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 160
zcmeAS@N?(olHy`uVBq!ia0vp^zkpbfg9%7h^QvhBDajJoh?3y^w370~qErUQl>DSr
z1<%~X^wgl##FWaylc_d9MNXbBjv*Dd-dtkjWia44u%TE{!_~lOgQJsnVr0qFX6bz_
xH)P-Nm9g(`zI*UpLiq-3F!wl=DJI3p#<0zWafw`+<WZn$44$rjF6*2UngH_)GQ<D?

diff --git a/images/actions_left.png b/images/actions_left.png
deleted file mode 100644
index 182b616912a0c2b90506c25ff98ede3949ef3bde..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 117
zcmeAS@N?(olHy`uVBq!ia0vp^tUxTt!2~2{d4048Qj#UE5hcO-X(i=}MX3yqDfvmM
z3ZA)%>8U}fi7AzZCsS>Jio`u#978H@CDjBfA8%lpArWxU<1sUf1jA}k#wD*lx|jf!
OFnGH9xvX<aXaWFu)F6fc

diff --git a/images/asc.gif b/images/asc.gif
deleted file mode 100644
index c3d4820fd080b558dfab3b0401acbebca49708d6..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 54
zcmZ?wbhEHb6lGvxXkcWJnR4X+|Nn|VSr{1@7#VaJfB+=Jz{J}lzkvJ2`CGHoFJ`Og
HGFSruf{zZ_

diff --git a/images/help.png b/images/help.png
deleted file mode 100644
index 26b09fecbfd6f292a7aa4c76f0a0dad951f3bedc..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 413
zcmV;O0b>4%P)<h;3K|Lk000e1NJLTq000&M000#T1^@s6LLeTM0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUzKS@MERCwC7RlyB{KoCS@1Lw!5iI#vR
zXbD<^mLMNrexw8_K}x_9pal}2exwAvOU5{!yN4ep84}=j*qz%wMqSrMLtx@AkJDUx
zA6u?LgJ+FpZJArPe!%Q}{|F0MSY{BEKDM<yLOhWK#!6tNh%yYsE2`$(3Qx2Y7T!=k
z+ru$e%S}i)^F*D82g|}+=Q6#}{Tla)WW^C*XQU*$rA$+hvDZA7JbjB*D7Qoc5n02Y
z?<Ff@Wg|=PSxZ7vH+^Mnl!XkJ;R-EgP>qyGu#bH-*!32{nNs18$1Q?2aQS6Gw3ae%
z*dw9D=bx4RbVbqQ?-UGGl}o}oCalj64QXid5@n=~H))YD@<HJmyYGuHXfPzv-9M+B
z6JPdt{<bEiHVmF_9JHg8ET)dRVfTxW@1vo9P2*@FyaX5kQl?4~VwM*y00000NkvXX
Hu0mjf`x>cO

diff --git a/images/home.png b/images/home.png
deleted file mode 100644
index e7efb87179204fb17a8e00c22cee64827651ba7d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 219
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`Y)RhkE)4%caKYZ?lYt_f1s;*b
z3=G`DAk4@xYmNj^kiEpy*OmPNi?ooeL7x1ZOF*FvPZ!4!i_^&o2bklooUq)pVq)=u
z<!yrV)7aSB{sydD>~eZBvx{`YvYCwY6?<H=j%9KvbI#f*b;x5;8jrKY$qPM69Lh6i
zJ#15`erT_0r5Yt?Xk-8ch5;NA95)?Kw2JIbkdSaNWMJq%rxWY6NB$YmP6kg`KbLh*
G2~7YLenWl$

diff --git a/images/menu.png b/images/menu.png
deleted file mode 100644
index 7bd291559bd4adb2a9dc7f87a0c381171a7d9ee9..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 174
zcmeAS@N?(olHy`uVBq!ia0vp^B0$W?!3HGtkJx+wQfx`y?k)`fL2$v|<&%LToCO|{
z#S9GG!XV7ZFl&wkP>{XE)7O>#0gE)R27B_$d^MnuwWo_?h{fsTnn306^BcPwIvY<l
zykgsAU|?{=h$rp9k40{IR$KSZF?^xCH2s2m7x&h^d#W$EpVH5g;$TQ&<xFE|Q~L%q
OhQZU-&t;ucLK6TW1vBUX

diff --git a/images/mini-arrow-orange-open.gif b/images/mini-arrow-orange-open.gif
deleted file mode 100644
index 7e3192e8149945d8753675fef7cb5f6bba33b7e6..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 53
zcmZ?wbhEHb<YM4tXkcV`-Oup<|9{1wEQ|~cj0`#qKmd|qVB+cNUwNAQzevi0n;{Gg
F)&O+K4mtn;

diff --git a/images/mini-arrow-orange.gif b/images/mini-arrow-orange.gif
deleted file mode 100644
index 5f10700c45fe457a34aeae2ef64a0062a680852a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 54
zcmZ?wbhEHb<YM4tXkcV`-Oup<|9{1wEQ|~cj0`#qKmd|qVB+oRU&)?*L9B<<>Q#{z
GgEatpoDI$Z

diff --git a/images/mini_add.gif b/images/mini_add.gif
deleted file mode 100644
index 09ab4914b1a45f62ec124507bb87dbc85e85403c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 82
zcmZ?wbhEHb6k!lyn8?8Jyr1L$|Nk#)<QNzj6o0Y+Nd^WT5CM{BU{apazw-23{>5{2
iS+aBvMBV!DsIbG9VZq#`5^LhRIn#Zve>*F}U=0B3b{h-;

diff --git a/images/mini_search.gif b/images/mini_search.gif
deleted file mode 100644
index cbb169da13bfc0d50169d7e7c70d73a3da6f007a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 99
zcmZ?wbhEHb6k!lyn8?8JezDf`evbeD|G%h_Q~b%o00KH70wmACWHP6J<>|NlGiNAC
yF*dCeV7F`N{g4{|VZxJ*R@zl%9pZsEQZl9UBpFy=@Yb!3V^j0dnm&Pv!5RQn1tBy5

diff --git a/images/mini_tree.gif b/images/mini_tree.gif
deleted file mode 100644
index 9d7ad958b8202eb8eeb9b53f903a3566a341a5ad..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 74
zcmZ?wbhEHb6k!lyXkcLY|NsAs8ac(EEDRu^10p~&3`~kW{VPwu<(2CW3T$|JSn>6%
Y&_$nnmsX@Eh|GG$ar~3dc~%B%08&>PX#fBK

diff --git a/images/newsroom-message.svg b/images/newsroom-message.svg
deleted file mode 100755
index ed20e23ad..000000000
--- a/images/newsroom-message.svg
+++ /dev/null
@@ -1,102 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="143.92165mm"
-   height="143.92165mm"
-   viewBox="0 0 143.92165 143.92165"
-   version="1.1"
-   id="svg8"
-   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
-   sodipodi:docname="newsroom-message.svg">
-  <defs
-     id="defs2" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="0.98994949"
-     inkscape:cx="327.16772"
-     inkscape:cy="203.50251"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     inkscape:window-width="1920"
-     inkscape:window-height="1005"
-     inkscape:window-x="1911"
-     inkscape:window-y="-9"
-     inkscape:window-maximized="1"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0" />
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Calque 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-40.487099,-26.129204)">
-    <circle
-       style="opacity:1;fill:#ea7d1e;fill-opacity:1;stroke:none;stroke-width:10.02023888;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
-       id="path4514"
-       cx="112.44792"
-       cy="98.090027"
-       r="71.960823"
-       inkscape:export-xdpi="5.6475177"
-       inkscape:export-ydpi="5.6475177" />
-    <g
-       id="g4519"
-       transform="matrix(0.88767549,0,0,0.88076684,12.630661,11.695584)"
-       inkscape:export-xdpi="5.6475177"
-       inkscape:export-ydpi="5.6475177">
-      <rect
-         ry="10.000007"
-         rx="10.000007"
-         y="65.111603"
-         x="66.712799"
-         height="65.956848"
-         width="91.470238"
-         id="rect4508"
-         style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
-         inkscape:export-xdpi="5.6475177"
-         inkscape:export-ydpi="5.6475177" />
-      <path
-         sodipodi:nodetypes="czc"
-         inkscape:connector-curvature="0"
-         id="path4510"
-         d="m 70.492558,70.403272 c 0,0 25.469056,36.944678 42.445432,36.599868 16.97638,-0.34481 41.46528,-37.355819 41.46528,-37.355819"
-         style="fill:none;stroke:#ffffff;stroke-width:7;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-         inkscape:export-xdpi="5.6475177"
-         inkscape:export-ydpi="5.6475177" />
-      <path
-         sodipodi:nodetypes="cccc"
-         inkscape:connector-curvature="0"
-         id="path4512"
-         d="M 70.114582,128.23363 100.73065,100.1689 m 23.24553,-0.188992 30.42709,28.631692"
-         style="fill:none;stroke:#ffffff;stroke-width:7;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-         inkscape:export-xdpi="5.6475177"
-         inkscape:export-ydpi="5.6475177" />
-    </g>
-  </g>
-</svg>
diff --git a/images/newsroom_menu.png b/images/newsroom_menu.png
deleted file mode 100644
index f1958055e552ce47e3f71d937a1902df164d67fb..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 302
zcmeAS@N?(olHy`uVBq!ia0vp^azHG~!3HD)zsDs4DYhhUcNc~i3^fdLZp^dIfFhg)
z9+AZi4BWyX%*Zfnjs#GUy~NYkmHiPnuYjohmdcGKK%w29E{-7{$CDEz6b^W-IV5gc
zRIttEwDPUUo*Y3vhfZdRi#n^*6B05MF0WzhoaWxE6792asY>*@mNlJRnQa-yGuX63
zjRj{<$Vf7@67YyQs4!tiQ-<ADon_ICOuVoDUoi++^i=Tif^UZ0YkBGdmA}i!uehKi
z|Cp<2hJ|v}O`oqy!Z)9v=yU9U?6xBLLLu`sm(Hd_(WwTfFE}?$Y?0!$G?CC;yK;ud
ug*zSEQYTi*om|=fdSTxJujYg&3=AA{4pxPsLSKR2VDNPHb6Mw<&;$TA5ofyq

diff --git a/images/on-off-menu.png b/images/on-off-menu.png
deleted file mode 100755
index 4beee080402acbc321e8845dbef5f9093784ee98..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 459
zcmV;+0W|)JP)<h;3K|Lk000e1NJLTq0015U000#T1^@s6QTJY90000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUzZAnByRCwCNR?BU}FbuVfEZ|;}Qv+xP
zX9RnMc7(3r9NJTRh)2i@%?R-b^$G!+Q+vt?E)_flEF&8JBrpL&kVNZ=kK#*A(=^c(
zHscdxj2ig!`k2y?k?$5C$AcEvHIZ45OYX@N@`C(fY{qeq*hGxCqgqf~fZCd<T?h6*
zafyod%f7&d*TmPD4&Bo5!s1rsUu>R(dT*t_T-O@MflQtRsLQw(VKv-aLEmL#YrGKv
zxeTC-oUr~6d@wLt#<HbnfJ6#7uYE?}+o2hAx~jH*1$ZU0PDj6L2Q20#4wmbj5qk^Z
zRAjfln`Dw56xy|3Pej~>_TRUq+E?@UZxaXT_0%O0kv8M|C)E6MxCVOlxbRZB3T-rS
ztQX=91VKXcE9C-xdr@OY;SOU8fw4klR+@4-+T|rQ$#jQrJGRGJWPHC5mP}CY6{}7B
zy@2GJ$n^e^P+qPTufGZbcFovK_17nkCbB;P1^{>TnQG(r{fPho002ovPDHLkV1oUh
B%|HME

diff --git a/images/pencil-menu.png b/images/pencil-menu.png
deleted file mode 100755
index 604bd24a729be80188e4a0f5649e026aa5a397b0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 399
zcmV;A0dW3_P)<h;3K|Lk000e1NJLTq000^Q000#T1^@s6SRDQv0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUzF-b&0RCwBA`2YVu1Eu&yjhq7^HB1Z?
zf|s@O`+?McAYG169TOESae#6=@L9$P@)j8u@B*n#NR}Xj3i0NLofP{BYDo|tB_N+U
zP$TF-K3M?7JAn8A7Wo4}A042`BBVG085D}eGLR*X*z~fHX^9ySb3vt6!_?riglLQK
zSYiyNCj;?1d}gpvU<nL-2Kr<nA#<3Bv}6MgOAg=*E~4@gnok^Xq%KEd<CulW;38-V
zP!G<W4^+#@L`Ixo^$Ex@T$W(O5!8}fP_6^1ae{6cG9MmCNInq);!J2UV@yt*fPxX-
zQe+>&B78RxUxMa~v*biPwqRs}x&S#<fqc;b#HWB*iBwAn<s$<$abu{@E>go1WQ(dP
t%_qd>BTyal28dgM_yV?Ko>Bl1U;qH8(WA2+@k0Or002ovPDHLkV1nF9mqP#m

diff --git a/images/printableversion.png b/images/printableversion.png
deleted file mode 100644
index ffc7365ba744875b1231263f43f8f41fe94c3d5f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 421
zcmV;W0b2fvP)<h;3K|Lk000e1NJLTq000sI000sQ0ssI2*{m4=00009a7bBm000XU
z000XU0RWnu7ytkO2XskIMF-yq5ey_2`%lvH0003*Nkl<ZD9@dfKTASk6vm%>pChKC
z*Tu!a)lXp1*jP&q5mXQk2`x1TwKNDVeS#XCw8^2?z@e>hY;Y1nB&;ECnTpceaIaU1
z_nP)j=Wx!C=lpw(m(vvHf8trgP@=VZIVCk&-q2vueI*&M9BY~Pm2<rs0FuGCCoM*D
z(lw{Vri2853Pe6Piz*PIe`6%=y*p#jiI&z~weHq6Lzak$i0|k`M1&#hYxmYwV>s@G
z`?-6)nrDUMBaHlWQO4sH0F~Jv_cjw|ngG-&b5;z?2cG#o2R89sOho$SBh|MTwhO&d
zR-5XC3~MpCmLH7OKANgkBdHoyzrCqO)ig|}Gyz}^I?>#X+j=Y+JFNU-+W9m|>!b!i
z^=ucjFEWx^0uaj<mECOT)A}nZ>;M=(Ka5Y=aY!c4>VA`Oa@?Z+_f3BQ08Cj>u1dco
P00000NkvXXu0mjf3|+9J

diff --git a/js/newsroom_menu.js b/js/newsroom_menu.js
index c33759a61..8c5558c5b 100644
--- a/js/newsroom_menu.js
+++ b/js/newsroom_menu.js
@@ -7,10 +7,10 @@ $(function()
 		// default options
 		options:
 		{
-			image_url: '',
+			image_icon: '',
 			cache_uuid: '',
 			display_limit: 7,
-			placeholder_image_url: '../images/transparent_32_32.png',
+			placeholder_image_icon: '',
 			providers: [],
 			labels: {
 				'no_message': 'No new message',
@@ -157,7 +157,7 @@ $(function()
 			var me = this;
 			var iTotalCount = aAllMessages.length;
 			var iCount = 0;
-			var sHtml = '<span id="newsroom_menu" class="itop_popup toolkit_menu"><ul><li><img id="newsroom_menu_icon" src="'+this.options.image_url+'"><ul>';
+			var sHtml = '<span id="newsroom_menu" class="itop_popup toolkit_menu"><ul><li><i id="newsroom_menu_icon" class="top-right-icon icon-additional-arrow '+this.options.image_icon+'"></i><ul>';
 			sHtml += '<li class="newsroom_menu_item" id="newsroom_menu_dismiss_all"><i class="fas fa-fw fa-check"></i>'+this.options.labels.mark_all_as_read+'</li>';
 			moment.locale(GetUserLanguage());
 			var aUnreadMessagesByProvider = [];
@@ -171,13 +171,14 @@ $(function()
 				aUnreadMessagesByProvider[oMessage.provider]++;
 				if (iCount < this.options.display_limit)
 				{
+					var sImage = '';
 					if ((oMessage.image !== undefined) && (oMessage.image !== null))
 					{
-						sImageUrl = oMessage.image;					
+						sImage = '<img src="'+oMessage.image+'">';
 					}
 					else
 					{
-						sImageUrl = this.options.placeholder_image_url;
+						sImage = '<i class="'+this.options.placeholder_image_icon+'"></i>';
 					}				
 					var div = document.createElement("div");
 					div.textContent = oMessage.text;
@@ -185,7 +186,7 @@ $(function()
 					var converter = new showdown.Converter({noHeaderId: true});
 				    var sRichDescription = converter.makeHtml(sDescription);
 				    sRichDescription += '<span class="newsroom_menu_item_date">'+this.options.providers[oMessage.provider].label+' - '+moment(oMessage.start_date).fromNow()+'</span>';
-					sHtml += '<li class="newsroom_menu_item" data-msg-id="'+oMessage.id+'" data-provider-id="'+oMessage.provider+'" data-url="'+oMessage.url+'" id="newsroom_menu_item_'+oMessage.id+'"><div><img src="'+sImageUrl+'"><p>'+sRichDescription+'</p><div style="clear:both"></div></div></li>';
+					sHtml += '<li class="newsroom_menu_item" data-msg-id="'+oMessage.id+'" data-provider-id="'+oMessage.provider+'" data-url="'+oMessage.url+'" id="newsroom_menu_item_'+oMessage.id+'"><div>'+sImage+'<p>'+sRichDescription+'</p><div style="clear:both"></div></div></li>';
 				}
 				iCount++;
 			}
@@ -372,7 +373,7 @@ $(function()
 			{
 				this._markAllMessagesAsRead(k);
 			}
-			$('#newsroom_menu').html('<img src="'+this.options.image_url+'" style="opacity:0.4" title="'+this.options.labels.no_message+'">');
+			$('#newsroom_menu').html('<i class="top-right-icon '+this.options.image_icon+'" style="opacity:0.4" title="'+this.options.labels.no_message+'"></i>');
 			$('#newsroom_menu_counter_container').remove();
 			this._getAllMessages();
 		}
diff --git a/js/simple_graph.js b/js/simple_graph.js
index 318894e8d..96210d684 100644
--- a/js/simple_graph.js
+++ b/js/simple_graph.js
@@ -478,7 +478,7 @@ $(function()
 				sHtml += '</select>'
 			}
 			sHtml += '&nbsp;<button type="button" id="'+sId+'_refresh_btn">'+this.options.labels.refresh+'</button>';
-			sHtml += '<div class="itop_popup toolkit_menu graph" style="font-size: 12px;" id="'+sPopupMenuId+'"><ul><li><img src="../images/toolkit_menu.png"><ul>';
+			sHtml += '<div class="itop_popup toolkit_menu graph" style="font-size: 12px;" id="'+sPopupMenuId+'"><ul><li><i class="fas fa-tools"></i><i class="fas fa-caret-down"></i><ul>';
 			if (this.options.export_as_pdf != null)
 			{
 				sHtml += '<li><a href="#" id="'+sPopupMenuId+'_pdf">'+this.options.export_as_pdf.label+'</a></li>';			
diff --git a/lib/composer/autoload_classmap.php b/lib/composer/autoload_classmap.php
index 6c605b6ce..ecf914d25 100644
--- a/lib/composer/autoload_classmap.php
+++ b/lib/composer/autoload_classmap.php
@@ -290,6 +290,8 @@ return array(
     'MySQLHasGoneAwayException' => $baseDir . '/core/cmdbsource.class.inc.php',
     'MySQLNoTransactionException' => $baseDir . '/core/cmdbsource.class.inc.php',
     'MySQLQueryHasNoResultException' => $baseDir . '/core/cmdbsource.class.inc.php',
+    'NestedQueryExpression' => $baseDir . '/core/oql/expression.class.inc.php',
+    'NestedQueryOqlExpression' => $baseDir . '/core/oql/oqlquery.class.inc.php',
     'NewObjectMenuNode' => $baseDir . '/application/menunode.class.inc.php',
     'NewsroomProviderBase' => $baseDir . '/application/newsroomprovider.class.inc.php',
     'NiceWebPage' => $baseDir . '/application/nicewebpage.class.inc.php',
@@ -1484,6 +1486,7 @@ return array(
     'TemplateMenuNode' => $baseDir . '/application/menunode.class.inc.php',
     'TemplateString' => $baseDir . '/core/templatestring.class.inc.php',
     'TemplateStringPlaceholder' => $baseDir . '/core/templatestring.class.inc.php',
+    'ThemeHandler' => $baseDir . '/application/themehandler.class.inc.php',
     'ToolsLog' => $baseDir . '/core/log.class.inc.php',
     'Trigger' => $baseDir . '/core/trigger.class.inc.php',
     'TriggerOnObject' => $baseDir . '/core/trigger.class.inc.php',
diff --git a/lib/composer/autoload_static.php b/lib/composer/autoload_static.php
index d3312109d..f896fa275 100644
--- a/lib/composer/autoload_static.php
+++ b/lib/composer/autoload_static.php
@@ -522,6 +522,8 @@ class ComposerStaticInit0018331147de7601e7552f7da8e3bb8b
         'MySQLHasGoneAwayException' => __DIR__ . '/../..' . '/core/cmdbsource.class.inc.php',
         'MySQLNoTransactionException' => __DIR__ . '/../..' . '/core/cmdbsource.class.inc.php',
         'MySQLQueryHasNoResultException' => __DIR__ . '/../..' . '/core/cmdbsource.class.inc.php',
+        'NestedQueryExpression' => __DIR__ . '/../..' . '/core/oql/expression.class.inc.php',
+        'NestedQueryOqlExpression' => __DIR__ . '/../..' . '/core/oql/oqlquery.class.inc.php',
         'NewObjectMenuNode' => __DIR__ . '/../..' . '/application/menunode.class.inc.php',
         'NewsroomProviderBase' => __DIR__ . '/../..' . '/application/newsroomprovider.class.inc.php',
         'NiceWebPage' => __DIR__ . '/../..' . '/application/nicewebpage.class.inc.php',
@@ -1716,6 +1718,7 @@ class ComposerStaticInit0018331147de7601e7552f7da8e3bb8b
         'TemplateMenuNode' => __DIR__ . '/../..' . '/application/menunode.class.inc.php',
         'TemplateString' => __DIR__ . '/../..' . '/core/templatestring.class.inc.php',
         'TemplateStringPlaceholder' => __DIR__ . '/../..' . '/core/templatestring.class.inc.php',
+        'ThemeHandler' => __DIR__ . '/../..' . '/application/themehandler.class.inc.php',
         'ToolsLog' => __DIR__ . '/../..' . '/core/log.class.inc.php',
         'Trigger' => __DIR__ . '/../..' . '/core/trigger.class.inc.php',
         'TriggerOnObject' => __DIR__ . '/../..' . '/core/trigger.class.inc.php',
diff --git a/pages/UI.php b/pages/UI.php
index c53c99238..cea417a66 100644
--- a/pages/UI.php
+++ b/pages/UI.php
@@ -628,7 +628,7 @@ try
 					$sPageId = "ui-global-search";
 					$sLabel = Dict::S('UI:SearchResultsTitle');
 					$sDescription = Dict::S('UI:SearchResultsTitle+');
-					$oP->SetBreadCrumbEntry($sPageId, $sLabel, $sDescription, '', utils::GetAbsoluteUrlAppRoot().'images/search.png');
+					$oP->SetBreadCrumbEntry($sPageId, $sLabel, $sDescription, '', utils::GetAbsoluteUrlAppRoot().'images/breadcrumb-search.png');
 					$oP->add("<div style=\"padding: 10px;\">\n");
 					$oP->add("<div class=\"header_message\" id=\"full_text_progress\" style=\"position: fixed; background-color: #cccccc; opacity: 0.7; padding: 1.5em;\">\n");
 					$oP->add('<img id="full_text_indicator" src="../images/indicator.gif">&nbsp;<span style="padding: 1.5em;">'.Dict::Format('UI:Search:Ongoing', htmlentities($sFullText, ENT_QUOTES, 'UTF-8')).'</span>');
diff --git a/pages/preferences.php b/pages/preferences.php
index 7b085a66c..5cdc3d4a1 100644
--- a/pages/preferences.php
+++ b/pages/preferences.php
@@ -320,7 +320,7 @@ EOF
 		if ($iNewsroomDisplaySize < 1) $iNewsroomDisplaySize = 1;
 		if ($iNewsroomDisplaySize > 20) $iNewsroomDisplaySize = 20;
 		$sInput = '<input min="1" max="20" id="newsroom_display_size" type="number" size="2" name="newsroom_display_size" value="'.$iNewsroomDisplaySize.'">';
-		$sIcon = '<img src="../images/newsroom_menu.png" style="vertical-align:middle">';
+		$sIcon = '<i id="newsroom_menu_icon" class="top-right-icon icon-additional-arrow fas fa-comment-dots" style="top: 0;"></i>';
 		$oP->p(Dict::Format('UI:Newsroom:DisplayAtMost_X_Messages', $sInput, $sIcon));
 		
 		/**
diff --git a/setup/compiler.class.inc.php b/setup/compiler.class.inc.php
index 9ebb6ad0f..66e543041 100644
--- a/setup/compiler.class.inc.php
+++ b/setup/compiler.class.inc.php
@@ -2642,6 +2642,62 @@ EOF;
 			copy($sSourceFile, $sTargetFile);
 		}
 	}
+	/**
+	 * @param $oBrandingNode
+	 * @param $sTempTargetDir
+	 * @param $sFinalTargetDir
+	 *
+	 * @throws \Exception
+	 */
+	protected function CompileThemes($oBrandingNode, $sTempTargetDir, $sFinalTargetDir)
+	{
+		$oThemeNodes = $oBrandingNode->GetNodes('themes/theme'); 
+		$sThemesDir = $sTempTargetDir.'/branding/themes/';
+		if(!is_dir($sThemesDir))
+		{
+			SetupUtils::builddir($sThemesDir);
+		}
+		foreach($oThemeNodes as $oTheme)
+		{
+			$sThemeId = $oTheme->getAttribute('id');
+			$sThemeDir = $sTempTargetDir.'/branding/themes/'.$sThemeId;
+
+			if(!is_dir($sThemesDir.$sThemeId))
+			{
+				SetupUtils::builddir($sThemesDir.$sThemeId);
+			}
+			
+			$oVariables = $oTheme->GetNodes('variables/variable');
+			$oImports = $oTheme->GetNodes('imports/import');
+			$oStylesheets = $oTheme->GetNodes('stylesheets/stylesheet');
+			
+			$aThemeParameters = array(
+				'variables' => array(),
+				'imports' => array(),
+				'stylesheets' => array(),
+			);
+			// json array
+			$sVariablesContent = '';
+			foreach($oVariables as $oVariable)
+			{
+				$sVariableId = $oVariable->getAttribute('id');
+				$aThemeParameters['variables'][$sVariableId] = $oVariable->GetText();
+			}
+
+			foreach($oImports as $oImport)
+			{
+				$sImportId = $oImport->getAttribute('id');
+				$aThemeParameters['imports'][$sImportId] = $oImport->GetText();
+			}
+			
+			foreach($oStylesheets as $oStylesheet)
+			{
+				$sStylesheetId = $oStylesheet->getAttribute('id');
+				$aThemeParameters['stylesheets'][$sStylesheetId] = $oStylesheet->GetText();
+			}
+			file_put_contents($sThemeDir.'/theme-parameters.json', json_encode($aThemeParameters));
+		}
+	}
 
 	/**
 	 * @param $oBrandingNode
@@ -2669,6 +2725,9 @@ EOF;
 			{
 				SetupUtils::rrmdir($sTempTargetDir.'/branding/images');
 			}
+			
+			// Compile themes 
+			$this->CompileThemes($oBrandingNode, $sTempTargetDir, $sFinalTargetDir);
 		}
 	}
 
diff --git a/setup/itopdesignformat.class.inc.php b/setup/itopdesignformat.class.inc.php
index bd0783081..6872e40f7 100644
--- a/setup/itopdesignformat.class.inc.php
+++ b/setup/itopdesignformat.class.inc.php
@@ -699,6 +699,10 @@ class iTopDesignFormat
 		// -- 1283 : remove "in_new_window" option for WebPageMenuNode
 		$sPath = "/itop_design/menus/menu[@xsi:type='WebPageMenuNode']/in_new_window";
 		$this->RemoveNodeFromXPath($sPath);
+		
+		// -- 2314 : remove "themes" nodes
+		$sPath = "/itop_design/branding/themes";
+		$this->RemoveNodeFromXPath($sPath);
 	}
 
 	private function RemoveNodeFromXPath($sPath)