commit ef5eff50643bb16dbb22c13f655cac4be688f48c
Author: Olga Brani <olgabrani@grnet.gr>
Date:   Tue Feb 18 16:32:02 2014 +0200

    uinext: More tags

diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
index c52f4c4..4c65270 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
@@ -743,16 +743,7 @@ $(document).ready(function(){
 
     ui.replaceClass($('a.current, a.active'), 'outline', 'full', 'snf-');
 
-    $('.tag-data').mouseover(function() {
-        $(this).find('.delete').css({visibility: 'visible'})
-    });
-    $('.tag-data').mouseleave(function(){
-        $(this).find('.delete').css({visibility: 'hidden'})
-    });
-    $('.tag-data .delete').click(function(e) {
-        e.preventDefault();
-        $(this).closest('div').fadeOut('slow');
-    });
+
 
     $('.storage-progress').hover(
         function(e){
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/components/tag-el.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/components/tag-el.js
new file mode 100644
index 0000000..6dd684e
--- /dev/null
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/components/tag-el.js
@@ -0,0 +1,20 @@
+App.TagElComponent = Ember.Component.extend({
+    tagName: 'li',
+    title:'tag1',
+    color: 'yellow',
+    style: function () {
+        return 'background-color:'+this.color;
+    }.property('color'),
+
+    didInsertElement: function() {
+        this.$().find('.tag').attr('data-tooltip','');
+        Foundation.libs.tooltips.init();
+    },
+
+    actions: {
+        deleteTag: function() {
+            this.sendAction();
+        },
+    },
+
+});
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/controllers/items.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/controllers/items.js
index f9c640e..cc04faa 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/controllers/items.js
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/controllers/items.js
@@ -1,9 +1,8 @@
 App.ItemsListController = Ember.ArrayController.extend({
     
     codeName: '',
-    
 
-    // returns the same as codename, i.e. networks
+    // returns the same as codename, i.e. networks, serves as page title
     title: function () {
         return this.codeName;
     }.property(),
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/controllers/vm.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/controllers/vm.js
index a8e1938..ce6dc3b 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/controllers/vm.js
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/controllers/vm.js
@@ -28,7 +28,12 @@ App.VmController = Ember.ObjectController.extend({
     }.property('model.enabledActions'),
 
     actions: {
-        
+
+/*        deleteTag: function() {
+            console.log('t');
+            alert('skata');
+        },
+*/
         modalConnect: function(){
             var component = Ember.View.views["modal-connect"];
             component.set('message', 'connect to your <3 ' + this.get('model').get('name'));
@@ -69,4 +74,7 @@ App.VmController = Ember.ObjectController.extend({
         },
 
     },
-});
\ No newline at end of file
+});
+
+
+App.VmInfoController = App.VmController.extend();
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/routes/vm.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/routes/vm.js
index 439dfe1..e54bd7e 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/routes/vm.js
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/routes/vm.js
@@ -8,28 +8,23 @@ App.VmRoute = Ember.Route.extend({
         this.render('vm');
 
         this.render('lt-bar', {
-          into: 'vm',
-          outlet: 'lt-bar',
-          controller: 'vms',
+            into: 'vm',
+            outlet: 'lt-bar',
+            controller: 'vms',
         });
-
-/*        this.render('test', {
-          into: 'item',
-          outlet: 'test',
-          controller: 'vm',
-        });*/
-    }
-
+    },
 });
 
 
 App.VminitRoute = Ember.Route.extend({
 
   model: function(params){
-    return this.store.find('vm');
+      return this.store.find('vm');
   },
 
   afterModel: function(model) {
-    this.transitionTo('vm', model.get('firstObject').id);
-  }
-});
\ No newline at end of file
+       this.transitionTo('vm', model.get('firstObject').id);
+  },
+
+});
+
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/routes/vmDetails.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/routes/vmDetails.js
index c226108..6f268f3 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/routes/vmDetails.js
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/routes/vmDetails.js
@@ -1,17 +1,31 @@
 App.VmInfoRoute = Ember.Route.extend({
-     renderTemplate: function() {
+    renderTemplate: function() {
         this.render('details/info');
     },
+    model: function (params) {
+        return this.modelFor("vm");
+    },
+    actions: {
+        deleteTag: function(argument) {
+          alert('action route');
+        },
+    },
 });
 
 App.VmDiskConnectedRoute = Ember.Route.extend({
-     renderTemplate: function() {
+    renderTemplate: function() {
         this.render('details/disk-connected');
     },
+    model: function (params) {
+        return this.modelFor("vm");
+    }
 });
 
 App.VmNetworkConnectedRoute = Ember.Route.extend({
-     renderTemplate: function() {
+    renderTemplate: function() {
         this.render('details/network-connected');
     },
+    model: function (params) {
+        return this.modelFor("vm");
+    }
 });
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/views/tags-list.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/views/tags-list.js
index 78f520a..3045712 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/views/tags-list.js
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/views/tags-list.js
@@ -1,5 +1,5 @@
 App.tagsListView = Ember.View.extend({
-    tagName: 'div',
+    tagName: 'ul',
     classNames: ['tags'],
     templateName: 'tags-list',
 });
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/router.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/router.js
index 07bf4cb..f408c0c 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/router.js
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/router.js
@@ -1,21 +1,25 @@
 App.Router.map(function (argument) {
+
 	this.resource('vms', { path: '/vms/:view_cls' });
     this.resource('vminit', { path: '/vm'});
 	this.resource('vm', { path: '/vm/:vm_id' }, function () {
-		this.route('info');
-		this.route('disk-connected');
-		this.route('network-connected');
+		;this.route('info');
+        this.route('disk-connected');
+        this.route('network-connected')
 	});
-	this.resource('networks', {path: '/networks/:view_cls'});
+
+    this.resource('networks', {path: '/networks/:view_cls'});
     this.resource('networkinit', { path: '/network'});
 	this.resource('network', { path: '/network/:network_id' }, function () {
 		this.route('info');
 		this.route('vm-connected');
 	});
+
     this.resource('volumes', {path: '/volumes/:view_cls'});
     this.resource('volumeinit', { path: '/volume'});
     this.resource('volume', { path: '/volume/:volume_id' }, function () {
        this.route('info');
        this.route('vm-connected');
     });
+
 });
\ No newline at end of file
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates.js
index d013e4f..008a70c 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates.js
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates.js
@@ -238,13 +238,24 @@ function program1(depth0,data) {
   
 });
 
-Ember.TEMPLATES["components/tag-a"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {
+Ember.TEMPLATES["components/tag-el"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {
 this.compilerInfo = [4,'>= 1.0.0'];
 helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {};
-  
+  var buffer = '', stack1, escapeExpression=this.escapeExpression;
 
 
-  data.buffer.push("&nbsp;");
+  data.buffer.push("<a href=\"\" ");
+  data.buffer.push(escapeExpression(helpers['bind-attr'].call(depth0, {hash:{
+    'title': ("title"),
+    'style': ("style")
+  },hashTypes:{'title': "ID",'style': "ID"},hashContexts:{'title': depth0,'style': depth0},contexts:[],types:[],data:data})));
+  data.buffer.push(" class=\"has-tip tag\">&nbsp;</a>\n<span>");
+  stack1 = helpers._triageMustache.call(depth0, "title", {hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["ID"],data:data});
+  if(stack1 || stack1 === 0) { data.buffer.push(stack1); }
+  data.buffer.push("</span>\n<a class=\"delete\" ");
+  data.buffer.push(escapeExpression(helpers.action.call(depth0, "deleteTag", {hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["STRING"],data:data})));
+  data.buffer.push("><span class=\"snf-trash-outline\"></span></a>");
+  return buffer;
   
 });
 
@@ -271,12 +282,15 @@ function program1(depth0,data) {
 Ember.TEMPLATES["details/info"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {
 this.compilerInfo = [4,'>= 1.0.0'];
 helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {};
-  var stack1, helper, options, self=this, helperMissing=helpers.helperMissing;
+  var stack1, helper, options, escapeExpression=this.escapeExpression, self=this, helperMissing=helpers.helperMissing;
 
 function program1(depth0,data) {
   
-  
-  data.buffer.push("\n	<section class=\"info-block\">\n		<h2>info</h2>\n		<dl>\n			<dt><span class=\"snf-font snf-pc-full\"></span>Name</dt>\n			<dd>\n				<div class=\"editable\">\n			        <span class=\"input-txt\">My Opensuse Desktop Server 1</span>\n			        <input type=\"text\">\n			        <span class=\"editbuttons\">\n						<a href=\"#\" class=\"edit\"><span class=\"snf-edit\"></span></a>\n						<a href=\"#\" class=\"save\"><span class=\"snf-ok-sign\"></span></a>\n						<a href=\"#\" class=\"cancel\"><span class=\"snf-cancel-circled\"></span></a>\n					</span>\n			    </div>\n			</dd>\n			<dt><span class=\"snf-font snf-dashboard-outline\"></span>Assigned Project</dt>\n			<dd>Basic Project</dd>\n			<dt><span class=\"snf-chip-outline snf-font\"></span>CPUs</dt>\n			<dd>4</dd>\n			<dt><span class=\"snf-ram-full snf-font\"></span>RAM</dt>\n			<dd>512 MB</dd>\n			<dt><span class=\"snf-volume-full snf-font\"></span>System Disk Size</dt>\n			<dd>4GB</dd>\n			<dt><span class=\"snf-volume-full snf-font\"></span>Storage Type</dt>\n			<dd>Archipelago</dd>\n			<dt><span class=\"snf-image-full snf-font\"></span>Image Name</dt>\n			<dd>Fedora</dd>\n			<dt><span class=\"snf-image-full snf-font\"></span>Image Size</dt>\n			<dd>3.68 GB</dd>\n			<dt><span class=\"snf-nic-full snf-font\"></span>IPv4</dt>\n			<dd>83.212.96.152</dd>\n			<dt><span class=\"snf-nic-full snf-font\"></span>IPv4</dt>\n			<dd>83.212.96.153</dd>\n			<dt><span class=\"snf-nic-full snf-font\"></span>IPv6</dt>\n			<dd>2001:648:2ffc:1112:a80c:eaff:fec2:8cd9</dd>\n		</dl>\n	</section>\n	<section class=\"info-block tags\">\n		<h2>tags</h2>\n		<div class=\"tag-data\">\n			<a href=\"\" class=\"tag tag1 has-tip\" data-tooltip=\"\" title=\"Tooltip1\">&nbsp;</a>\n			<span>Tag Name</span>\n			<a class=\"delete\"><span class=\"snf-trash-outline\"></span></a>\n		</div>\n		<div class=\"tag-data\">\n			<a href=\"\" class=\"tag tag2 has-tip\" data-tooltip=\"\" title=\"Tooltip1\">&nbsp;</a>\n			<span>Tag Name</span>\n			<a class=\"delete\"><span class=\"snf-trash-outline\"></span></a>\n		</div>\n		<div class=\"tag-data\">\n			<a href=\"\" class=\"tag tag3 has-tip\" data-tooltip=\"\" title=\"Tooltip1\">&nbsp;</a>\n			<span>Tag Name</span>\n			<a class=\"delete\"><span class=\"snf-trash-outline\"></span></a>\n		</div>\n		<div class=\"buttons\">\n			<a href=\"\" class=\"btn1 show-add-tag wrap-a\" id=\"show-add-tag\">add new tag</a>\n		</div>\n		<div class=\"snf-color-picker\">\n		<h3>Select color:</h3>\n			<form action=\"#\" method=\"post\">\n				<div id=\"picker-2\">\n					<div class=\"farbtastic\">\n						<div class=\"color\" style=\"background-color: rgb(255, 0, 21);\"></div>\n						<div class=\"wheel\"></div>\n						<div class=\"overlay\"></div>\n						<div class=\"h-marker marker\" style=\"left: 90px; top: 13px;\"></div>\n						<div class=\"sl-marker marker\" style=\"left: 87px; top: 114px;\"></div>\n					</div>\n				</div>\n				<div class=\"form-item\">\n					<input type=\"text\" id=\"color-2\" class=\"color-preview \"name=\"color\" value=\"#16C1E9\" disabled>\n					<span class=\"input\"><input class=\"tag_name\" type=\"text\" placeholder=\"My Tag\"></span>\n				</div>\n			</form>\n			<div class=\"btns\">\n				<a class=\"btn1 wrap-a\" href=\"\">OK</a>\n				<a class=\"btn1 hide-add-tag wrap-a\" href=\"\">CANCEL</a>\n			</div>\n		</div>\n	</section>\n	<section class=\"info-block charts\">\n		<div>\n			<h2>CPU utilization</h2>\n			<div class=\"graph_container\">\n				<img src=\"images/cpu-ts.png\" alt=\"CPU utilization graph\">\n			</div>\n		</div>\n		<div>\n			<h2>Network utilization</h2>\n			<div class=\"graph_container\">\n				<img src=\"images/net-ts.png\" alt=\"network utilization graph\">\n			</div>\n		</div>\n	</section>\n");
+  var buffer = '';
+  data.buffer.push("\n\n	<section class=\"info-block\">\n		<h2>info</h2>\n		<dl>\n			<dt><span class=\"snf-font snf-pc-full\"></span>Name</dt>\n			<dd>\n				<div class=\"editable\">\n			        <span class=\"input-txt\">My Opensuse Desktop Server 1</span>\n			        <input type=\"text\">\n			        <span class=\"editbuttons\">\n						<a href=\"#\" class=\"edit\"><span class=\"snf-edit\"></span></a>\n						<a href=\"#\" class=\"save\"><span class=\"snf-ok-sign\"></span></a>\n						<a href=\"#\" class=\"cancel\"><span class=\"snf-cancel-circled\"></span></a>\n					</span>\n			    </div>\n			</dd>\n			<dt><span class=\"snf-font snf-dashboard-outline\"></span>Assigned Project</dt>\n			<dd>Basic Project</dd>\n			<dt><span class=\"snf-chip-outline snf-font\"></span>CPUs</dt>\n			<dd>4</dd>\n			<dt><span class=\"snf-ram-full snf-font\"></span>RAM</dt>\n			<dd>512 MB</dd>\n			<dt><span class=\"snf-volume-full snf-font\"></span>System Disk Size</dt>\n			<dd>4GB</dd>\n			<dt><span class=\"snf-volume-full snf-font\"></span>Storage Type</dt>\n			<dd>Archipelago</dd>\n			<dt><span class=\"snf-image-full snf-font\"></span>Image Name</dt>\n			<dd>Fedora</dd>\n			<dt><span class=\"snf-image-full snf-font\"></span>Image Size</dt>\n			<dd>3.68 GB</dd>\n			<dt><span class=\"snf-nic-full snf-font\"></span>IPv4</dt>\n			<dd>83.212.96.152</dd>\n			<dt><span class=\"snf-nic-full snf-font\"></span>IPv4</dt>\n			<dd>83.212.96.153</dd>\n			<dt><span class=\"snf-nic-full snf-font\"></span>IPv6</dt>\n			<dd>2001:648:2ffc:1112:a80c:eaff:fec2:8cd9</dd>\n		</dl>\n	</section>\n	<section class=\"info-block tags\">\n		<h2>tags</h2>\n		");
+  data.buffer.push(escapeExpression(helpers.view.call(depth0, "App.tagsListView", {hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["ID"],data:data})));
+  data.buffer.push("\n		<div class=\"buttons\">\n			<a href=\"\" class=\"btn1 show-add-tag wrap-a\" id=\"show-add-tag\">add new tag</a>\n		</div>\n		<div class=\"snf-color-picker\">\n		<h3>Select color:</h3>\n			<form action=\"#\" method=\"post\">\n				<div id=\"picker-2\">\n					<div class=\"farbtastic\">\n						<div class=\"color\" style=\"background-color: rgb(255, 0, 21);\"></div>\n						<div class=\"wheel\"></div>\n						<div class=\"overlay\"></div>\n						<div class=\"h-marker marker\" style=\"left: 90px; top: 13px;\"></div>\n						<div class=\"sl-marker marker\" style=\"left: 87px; top: 114px;\"></div>\n					</div>\n				</div>\n				<div class=\"form-item\">\n					<input type=\"text\" id=\"color-2\" class=\"color-preview \"name=\"color\" value=\"#16C1E9\" disabled>\n					<span class=\"input\"><input class=\"tag_name\" type=\"text\" placeholder=\"My Tag\"></span>\n				</div>\n			</form>\n			<div class=\"btns\">\n				<a class=\"btn1 wrap-a\" href=\"\">OK</a>\n				<a class=\"btn1 hide-add-tag wrap-a\" href=\"\">CANCEL</a>\n			</div>\n		</div>\n	</section>\n	<section class=\"info-block charts\">\n		<div>\n			<h2>CPU utilization</h2>\n			<div class=\"graph_container\">\n				<img src=\"images/cpu-ts.png\" alt=\"CPU utilization graph\">\n			</div>\n		</div>\n		<div>\n			<h2>Network utilization</h2>\n			<div class=\"graph_container\">\n				<img src=\"images/net-ts.png\" alt=\"network utilization graph\">\n			</div>\n		</div>\n	</section>\n");
+  return buffer;
   }
 
   stack1 = (helper = helpers['details-content'] || (depth0 && depth0['details-content']),options={hash:{
@@ -527,10 +541,10 @@ function program2(depth0,data) {
   
   var buffer = '', helper, options;
   data.buffer.push("\n        ");
-  data.buffer.push(escapeExpression((helper = helpers['tag-a'] || (depth0 && depth0['tag-a']),options={hash:{
+  data.buffer.push(escapeExpression((helper = helpers['tag-el'] || (depth0 && depth0['tag-el']),options={hash:{
     'title': ("tag.name"),
     'color': ("tag.color")
-  },hashTypes:{'title': "ID",'color': "ID"},hashContexts:{'title': depth0,'color': depth0},contexts:[],types:[],data:data},helper ? helper.call(depth0, options) : helperMissing.call(depth0, "tag-a", options))));
+  },hashTypes:{'title': "ID",'color': "ID"},hashContexts:{'title': depth0,'color': depth0},contexts:[],types:[],data:data},helper ? helper.call(depth0, options) : helperMissing.call(depth0, "tag-el", options))));
   data.buffer.push("\n    ");
   return buffer;
   }
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/components/tag-el.hbs b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/components/tag-el.hbs
new file mode 100644
index 0000000..3ffc25b
--- /dev/null
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/components/tag-el.hbs
@@ -0,0 +1,3 @@
+<a href="" {{bind-attr title=title style=style}} class="has-tip tag">&nbsp;</a>
+<span>{{title}}</span>
+<a class="delete" {{action 'deleteTag'}}><span class="snf-trash-outline"></span></a>
\ No newline at end of file
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/details/info.hbs b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/details/info.hbs
index 437ace2..677ecc0 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/details/info.hbs
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/details/info.hbs
@@ -1,4 +1,5 @@
 {{#details-content id="info" class="info-simple"}}
+
 	<section class="info-block">
 		<h2>info</h2>
 		<dl>
@@ -38,21 +39,7 @@
 	</section>
 	<section class="info-block tags">
 		<h2>tags</h2>
-		<div class="tag-data">
-			<a href="" class="tag tag1 has-tip" data-tooltip="" title="Tooltip1">&nbsp;</a>
-			<span>Tag Name</span>
-			<a class="delete"><span class="snf-trash-outline"></span></a>
-		</div>
-		<div class="tag-data">
-			<a href="" class="tag tag2 has-tip" data-tooltip="" title="Tooltip1">&nbsp;</a>
-			<span>Tag Name</span>
-			<a class="delete"><span class="snf-trash-outline"></span></a>
-		</div>
-		<div class="tag-data">
-			<a href="" class="tag tag3 has-tip" data-tooltip="" title="Tooltip1">&nbsp;</a>
-			<span>Tag Name</span>
-			<a class="delete"><span class="snf-trash-outline"></span></a>
-		</div>
+		{{view App.tagsListView}}
 		<div class="buttons">
 			<a href="" class="btn1 show-add-tag wrap-a" id="show-add-tag">add new tag</a>
 		</div>
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/item.hbs b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/item.hbs
index 0108681..e97be6f 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/item.hbs
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/item.hbs
@@ -13,7 +13,7 @@
 		<div class= "status">
 			<span class="state">{{status-to-text this.status}}</span>
 		</div>
-
+{{!-- {{codeNameParent}} kai edw vlepei ton controller--}}
 		{{view App.tagsListView}}
 
 	</div>
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/tags-list.hbs b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/tags-list.hbs
index 98bfb1a..5d117b8 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/tags-list.hbs
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/tags-list.hbs
@@ -1,6 +1,6 @@
 {{#if hasTags}}
     {{#each tag in this.tags}}
-        {{tag-a title=tag.name color=tag.color}}
+        {{tag-el title=tag.name color=tag.color}}
     {{/each}}
 {{/if}}
 {{!-- {{icon}} --}}
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_details.scss b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_details.scss
index 2b619b5..d1a7dfc 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_details.scss
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_details.scss
@@ -115,16 +115,18 @@ $details-icon-large : 90px;
 					margin-bottom: 1em;
 				}
 			}
-			&.tags {
+			.tags {
 				text-align:left;
-				.tag-data {
-					min-width: 30%;
+				li {
+					list-style: none outside none;
 					display: inline-block;
-					padding: 4px 0;
-					.delete {
-						margin-left: 10px;
-						visibility: hidden;
-					}
+					margin-right: 25px;
+				}
+				.tag {
+					vertical-align: middle;
+				}
+				.delete {
+					margin-left: 10px;	
 				}
 				.btns {
 					margin-top: 77px;
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_items-list.scss b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_items-list.scss
index 3ac761a..cbab8b5 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_items-list.scss
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_items-list.scss
@@ -153,6 +153,12 @@
 				overflow: hidden;
 				.tags {
 					margin:1em 0;
+					li {
+						display: inline;
+					}
+					span, .delete {
+						display: none;
+					}
 				}
 			}
 		}
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
index 1ab1ddb..0f5fdcf 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
@@ -7837,12 +7837,20 @@ body .jspVerticalBar .jspArrow.jspArrowUp {
 .grid-view .items-list > li .container .tags {
   margin: 1em 0;
 }
+/* line 156, ../sass/_items-list.scss */
+.grid-view .items-list > li .container .tags li {
+  display: inline;
+}
+/* line 159, ../sass/_items-list.scss */
+.grid-view .items-list > li .container .tags span, .grid-view .items-list > li .container .tags .delete {
+  display: none;
+}
 
-/* line 162, ../sass/_items-list.scss */
+/* line 168, ../sass/_items-list.scss */
 .list-view .btn5, .list-view .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col a, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col .list-view a, .list-view .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li a, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li .list-view a, .list-view #volume-wizard .step .volume_options > li .options-bar .options li a, #volume-wizard .step .volume_options > li .options-bar .options li .list-view a, .storage-progress .btn5, .storage-progress .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col a, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col .storage-progress a, .storage-progress .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li a, .body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li .storage-progress a, .storage-progress #volume-wizard .step .volume_options > li .options-bar .options li a, #volume-wizard .step .volume_options > li .options-bar .options li .storage-progress a {
   display: none;
 }
-/* line 165, ../sass/_items-list.scss */
+/* line 171, ../sass/_items-list.scss */
 .list-view .lt-bar, .storage-progress .lt-bar {
   position: fixed;
   overflow: scroll;
@@ -7857,100 +7865,100 @@ body .jspVerticalBar .jspArrow.jspArrowUp {
   background: white;
   z-index: 3;
 }
-/* line 167, ../sass/_items-list.scss */
+/* line 173, ../sass/_items-list.scss */
 .list-view .lt-bar ul, .storage-progress .lt-bar ul {
   list-style: none outside none;
   font-size: 0.75em;
 }
-/* line 170, ../sass/_items-list.scss */
+/* line 176, ../sass/_items-list.scss */
 .list-view .lt-bar ul li, .storage-progress .lt-bar ul li {
   list-style: none outside none;
   height: 30px;
   line-height: 30px;
 }
-/* line 174, ../sass/_items-list.scss */
+/* line 180, ../sass/_items-list.scss */
 .list-view .lt-bar ul li.select, .storage-progress .lt-bar ul li.select {
   text-transform: capitalize;
 }
-/* line 176, ../sass/_items-list.scss */
+/* line 182, ../sass/_items-list.scss */
 .list-view .lt-bar ul li.select span, .storage-progress .lt-bar ul li.select span {
   font-size: 16px;
   margin-right: 5px;
   position: relative;
   top: 2px;
 }
-/* line 182, ../sass/_items-list.scss */
+/* line 188, ../sass/_items-list.scss */
 .list-view .lt-bar ul li.select em, .storage-progress .lt-bar ul li.select em {
   display: none;
   font-style: normal;
 }
-/* line 186, ../sass/_items-list.scss */
+/* line 192, ../sass/_items-list.scss */
 .list-view .lt-bar ul li.select:hover, .storage-progress .lt-bar ul li.select:hover {
   color: #e660a3;
   cursor: pointer;
 }
-/* line 190, ../sass/_items-list.scss */
+/* line 196, ../sass/_items-list.scss */
 .list-view .lt-bar ul li.select.selected, .storage-progress .lt-bar ul li.select.selected {
   text-transform: lowercase;
 }
-/* line 192, ../sass/_items-list.scss */
+/* line 198, ../sass/_items-list.scss */
 .list-view .lt-bar ul li.select.selected em, .storage-progress .lt-bar ul li.select.selected em {
   text-transform: capitalize;
 }
-/* line 200, ../sass/_items-list.scss */
+/* line 206, ../sass/_items-list.scss */
 .list-view .lt-bar ul.lt-actions li a, .storage-progress .lt-bar ul.lt-actions li a {
   color: #bebebe;
 }
-/* line 202, ../sass/_items-list.scss */
+/* line 208, ../sass/_items-list.scss */
 .list-view .lt-bar ul.lt-actions li a:hover, .storage-progress .lt-bar ul.lt-actions li a:hover {
   color: #bebebe;
   cursor: default;
 }
-/* line 206, ../sass/_items-list.scss */
+/* line 212, ../sass/_items-list.scss */
 .list-view .lt-bar ul.lt-actions li a.active, .storage-progress .lt-bar ul.lt-actions li a.active {
   color: #485057;
 }
-/* line 208, ../sass/_items-list.scss */
+/* line 214, ../sass/_items-list.scss */
 .list-view .lt-bar ul.lt-actions li a.active:hover, .storage-progress .lt-bar ul.lt-actions li a.active:hover {
   color: #e660a3;
   cursor: pointer;
 }
-/* line 213, ../sass/_items-list.scss */
+/* line 219, ../sass/_items-list.scss */
 .list-view .lt-bar ul.lt-actions li a span, .storage-progress .lt-bar ul.lt-actions li a span {
   margin-right: 6px;
   width: 14px;
   display: inline-block;
 }
-/* line 217, ../sass/_items-list.scss */
+/* line 223, ../sass/_items-list.scss */
 .list-view .lt-bar ul.lt-actions li a span.snf-folder-move-outline, .storage-progress .lt-bar ul.lt-actions li a span.snf-folder-move-outline {
   font-size: 1.5em;
   position: relative;
 }
-/* line 229, ../sass/_items-list.scss */
+/* line 235, ../sass/_items-list.scss */
 .list-view .lt-bar ul.more li a span, .storage-progress .lt-bar ul.more li a span {
   font-size: 1.5em;
   margin-right: 2px;
 }
-/* line 238, ../sass/_items-list.scss */
+/* line 244, ../sass/_items-list.scss */
 .list-view .items-list, .storage-progress .items-list {
   overflow: hidden;
 }
-/* line 240, ../sass/_items-list.scss */
+/* line 246, ../sass/_items-list.scss */
 .list-view .items-list > li, .storage-progress .items-list > li {
   height: auto;
   width: 100%;
   padding: 15px 15px 15px 140px;
   background-image: none;
 }
-/* line 241, ../sass/_items-list.scss */
+/* line 247, ../sass/_items-list.scss */
 .list-view .items-list > li.selected, .storage-progress .items-list > li.selected {
   background-color: #ced248;
 }
-/* line 249, ../sass/_items-list.scss */
+/* line 255, ../sass/_items-list.scss */
 .list-view .items-list > li:hover, .storage-progress .items-list > li:hover {
   background-color: #ced248;
 }
-/* line 252, ../sass/_items-list.scss */
+/* line 258, ../sass/_items-list.scss */
 .list-view .items-list > li .check, .storage-progress .items-list > li .check {
   width: 60px;
   height: 30px;
@@ -7959,19 +7967,19 @@ body .jspVerticalBar .jspArrow.jspArrowUp {
   float: left;
   padding-left: 20px;
 }
-/* line 259, ../sass/_items-list.scss */
+/* line 265, ../sass/_items-list.scss */
 .list-view .items-list > li .check:hover, .storage-progress .items-list > li .check:hover {
   cursor: pointer;
   color: #e660a3;
 }
-/* line 264, ../sass/_items-list.scss */
+/* line 270, ../sass/_items-list.scss */
 .list-view .items-list > li .img-wrap, .storage-progress .items-list > li .img-wrap {
   width: 60px;
   float: left;
   text-align: center;
   height: 30px;
 }
-/* line 269, ../sass/_items-list.scss */
+/* line 275, ../sass/_items-list.scss */
 .list-view .items-list > li .img-wrap .os, .storage-progress .items-list > li .img-wrap .os {
   background: url("../images/os-unknown.png") no-repeat center center;
   width: 14px;
@@ -7987,12 +7995,12 @@ body .jspVerticalBar .jspArrow.jspArrowUp {
   margin-left: -7px;
   top: 6px;
 }
-/* line 280, ../sass/_items-list.scss */
+/* line 286, ../sass/_items-list.scss */
 .list-view .items-list > li .img-wrap .snf-font, .storage-progress .items-list > li .img-wrap .snf-font {
   font-size: 30px;
   line-height: 120%;
 }
-/* line 285, ../sass/_items-list.scss */
+/* line 291, ../sass/_items-list.scss */
 .list-view .items-list > li h4, .storage-progress .items-list > li h4 {
   width: 180px;
   overflow: hidden;
@@ -8005,18 +8013,18 @@ body .jspVerticalBar .jspArrow.jspArrowUp {
   color: inherit;
   padding-right: 20px;
 }
-/* line 297, ../sass/_items-list.scss */
+/* line 303, ../sass/_items-list.scss */
 .list-view .items-list > li .tags, .storage-progress .items-list > li .tags {
   float: left;
   width: 100px;
   height: 30px;
   line-height: 30px;
 }
-/* line 302, ../sass/_items-list.scss */
+/* line 308, ../sass/_items-list.scss */
 .list-view .items-list > li .tags a, .storage-progress .items-list > li .tags a {
   vertical-align: middle;
 }
-/* line 306, ../sass/_items-list.scss */
+/* line 312, ../sass/_items-list.scss */
 .list-view .items-list > li .size, .list-view .items-list > li .remove, .storage-progress .items-list > li .size, .storage-progress .items-list > li .remove {
   float: left;
   width: 100px;
@@ -8026,7 +8034,7 @@ body .jspVerticalBar .jspArrow.jspArrowUp {
   text-align: left;
   padding-left: 20px;
 }
-/* line 315, ../sass/_items-list.scss */
+/* line 321, ../sass/_items-list.scss */
 .list-view .items-list > li .status, .storage-progress .items-list > li .status {
   position: absolute;
   left: 260px;
@@ -8036,11 +8044,11 @@ body .jspVerticalBar .jspArrow.jspArrowUp {
   line-height: 110%;
   width: 240px;
 }
-/* line 323, ../sass/_items-list.scss */
+/* line 329, ../sass/_items-list.scss */
 .list-view .items-list > li .status span, .storage-progress .items-list > li .status span {
   display: inline;
 }
-/* line 327, ../sass/_items-list.scss */
+/* line 333, ../sass/_items-list.scss */
 .list-view .items-list > li .info, .list-view .items-list > li .progress-col, .storage-progress .items-list > li .info, .storage-progress .items-list > li .progress-col {
   float: left;
   width: 220px;
@@ -8049,7 +8057,7 @@ body .jspVerticalBar .jspArrow.jspArrowUp {
   line-height: 30px;
   font-size: 0.75em;
 }
-/* line 335, ../sass/_items-list.scss */
+/* line 341, ../sass/_items-list.scss */
 .list-view .items-list > li .actions, .storage-progress .items-list > li .actions {
   float: left;
   height: 30px;
@@ -8058,11 +8066,11 @@ body .jspVerticalBar .jspArrow.jspArrowUp {
   padding: 0 10px;
   top: 2px;
 }
-/* line 343, ../sass/_items-list.scss */
+/* line 349, ../sass/_items-list.scss */
 .list-view .items-list > li .actions a:first-child, .storage-progress .items-list > li .actions a:first-child {
   margin-right: 5px;
 }
-/* line 348, ../sass/_items-list.scss */
+/* line 354, ../sass/_items-list.scss */
 .list-view .items-list > li .actions-col, .list-view .items-list > li .remove, .storage-progress .items-list > li .actions-col, .storage-progress .items-list > li .remove {
   visibility: hidden;
   height: 30px;
@@ -8071,69 +8079,69 @@ body .jspVerticalBar .jspArrow.jspArrowUp {
   width: 140px;
   float: left;
 }
-/* line 355, ../sass/_items-list.scss */
+/* line 361, ../sass/_items-list.scss */
 .list-view .items-list > li .actions-col a, .list-view .items-list > li .remove a, .storage-progress .items-list > li .actions-col a, .storage-progress .items-list > li .remove a {
   margin-right: 10px;
 }
-/* line 360, ../sass/_items-list.scss */
+/* line 366, ../sass/_items-list.scss */
 .list-view .items-list > li.add-new:hover, .storage-progress .items-list > li.add-new:hover {
   background: #485057;
 }
-/* line 363, ../sass/_items-list.scss */
+/* line 369, ../sass/_items-list.scss */
 .list-view .items-list > li.add-new .check, .storage-progress .items-list > li.add-new .check {
   visibility: hidden;
 }
-/* line 366, ../sass/_items-list.scss */
+/* line 372, ../sass/_items-list.scss */
 .list-view .items-list > li.add-new h4, .storage-progress .items-list > li.add-new h4 {
   margin: 0;
 }
-/* line 370, ../sass/_items-list.scss */
+/* line 376, ../sass/_items-list.scss */
 .list-view .items-list > li.add-new .img-wrap .symbol, .storage-progress .items-list > li.add-new .img-wrap .symbol {
   font-size: 24px;
 }
-/* line 377, ../sass/_items-list.scss */
+/* line 383, ../sass/_items-list.scss */
 .list-view .items-list > li.building .img-wrap .incomplete, .storage-progress .items-list > li.building .img-wrap .incomplete {
   width: 30px;
   margin: 0 auto;
 }
-/* line 381, ../sass/_items-list.scss */
+/* line 387, ../sass/_items-list.scss */
 .list-view .items-list > li.building .img-wrap .complete, .storage-progress .items-list > li.building .img-wrap .complete {
   top: -30px;
   margin: 0 auto;
 }
 
-/* line 395, ../sass/_items-list.scss */
+/* line 401, ../sass/_items-list.scss */
 .containers .storage .items-list > li:hover {
   background-color: inherit;
 }
 
-/* line 406, ../sass/_items-list.scss */
+/* line 412, ../sass/_items-list.scss */
 .storage .lt-bar .lt-actions .select {
   margin-right: 4px;
 }
 
-/* line 415, ../sass/_items-list.scss */
+/* line 421, ../sass/_items-list.scss */
 .lt-bar .items-list .check, .lt-bar .items-list .actions, .lt-bar .items-list .info {
   display: none;
 }
-/* line 418, ../sass/_items-list.scss */
+/* line 424, ../sass/_items-list.scss */
 .lt-bar .items-list .container {
   padding: 40px 0;
 }
-/* line 421, ../sass/_items-list.scss */
+/* line 427, ../sass/_items-list.scss */
 .lt-bar .items-list .side-actions {
   display: none;
 }
 
 /* img-wrap div ( colors & styles ) */
-/* line 430, ../sass/_items-list.scss */
+/* line 436, ../sass/_items-list.scss */
 .img-wrap {
   width: 60px;
   position: relative;
   display: inline-block;
   line-height: 100%;
 }
-/* line 436, ../sass/_items-list.scss */
+/* line 442, ../sass/_items-list.scss */
 .img-wrap .os {
   background: url("../images/os-unknown.png") no-repeat center center;
   width: 22px;
@@ -8146,19 +8154,19 @@ body .jspVerticalBar .jspArrow.jspArrowUp {
   left: 50%;
   margin-left: -11px;
 }
-/* line 442, ../sass/_items-list.scss */
+/* line 448, ../sass/_items-list.scss */
 .img-wrap .os.windows {
   background-image: url("../images/os-windows.png");
 }
-/* line 443, ../sass/_items-list.scss */
+/* line 449, ../sass/_items-list.scss */
 .img-wrap .os.kubuntu {
   background-image: url("../images/os-kubuntu.png");
 }
-/* line 444, ../sass/_items-list.scss */
+/* line 450, ../sass/_items-list.scss */
 .img-wrap .os.fedora {
   background-image: url("../images/os-fedora.png");
 }
-/* line 445, ../sass/_items-list.scss */
+/* line 451, ../sass/_items-list.scss */
 .img-wrap .os.symbol {
   position: relative;
   top: -50px;
@@ -8238,16 +8246,16 @@ body .jspVerticalBar .jspArrow.jspArrowUp {
   color: #e660a3;
 }
 
-/* line 482, ../sass/_items-list.scss */
+/* line 488, ../sass/_items-list.scss */
 .building .img-wrap .snf-pc-full {
   display: block;
 }
-/* line 486, ../sass/_items-list.scss */
+/* line 492, ../sass/_items-list.scss */
 .building .img-wrap .incomplete {
   color: #ed8cbc;
   width: 60px;
 }
-/* line 490, ../sass/_items-list.scss */
+/* line 496, ../sass/_items-list.scss */
 .building .img-wrap .complete {
   width: 0%;
   position: absolute;
@@ -8406,51 +8414,54 @@ body .jspVerticalBar .jspArrow.jspArrowUp {
   margin-bottom: 1em;
 }
 /* line 118, ../sass/_details.scss */
-.details .info-simple .info-block.tags {
+.details .info-simple .info-block .tags {
   text-align: left;
 }
 /* line 120, ../sass/_details.scss */
-.details .info-simple .info-block.tags .tag-data {
-  min-width: 30%;
+.details .info-simple .info-block .tags li {
+  list-style: none outside none;
   display: inline-block;
-  padding: 4px 0;
+  margin-right: 25px;
+}
+/* line 125, ../sass/_details.scss */
+.details .info-simple .info-block .tags .tag {
+  vertical-align: middle;
 }
-/* line 124, ../sass/_details.scss */
-.details .info-simple .info-block.tags .tag-data .delete {
+/* line 128, ../sass/_details.scss */
+.details .info-simple .info-block .tags .delete {
   margin-left: 10px;
-  visibility: hidden;
 }
-/* line 129, ../sass/_details.scss */
-.details .info-simple .info-block.tags .btns {
+/* line 131, ../sass/_details.scss */
+.details .info-simple .info-block .tags .btns {
   margin-top: 77px;
   margin-bottom: 20px;
 }
-/* line 132, ../sass/_details.scss */
-.details .info-simple .info-block.tags .btns a:first-child {
+/* line 134, ../sass/_details.scss */
+.details .info-simple .info-block .tags .btns a:first-child {
   margin-right: 15px;
 }
-/* line 136, ../sass/_details.scss */
-.details .info-simple .info-block.tags .buttons {
+/* line 138, ../sass/_details.scss */
+.details .info-simple .info-block .tags .buttons {
   margin-top: 25px;
   margin-bottom: 25px;
 }
-/* line 140, ../sass/_details.scss */
-.details .info-simple .info-block.tags h3 {
+/* line 142, ../sass/_details.scss */
+.details .info-simple .info-block .tags h3 {
   margin: 0;
   font-size: 0.875em;
   font-weight: normal;
 }
-/* line 147, ../sass/_details.scss */
+/* line 149, ../sass/_details.scss */
 .details .info-simple .info-block.charts .graph_container {
   margin-bottom: 20px;
 }
-/* line 154, ../sass/_details.scss */
+/* line 156, ../sass/_details.scss */
 .details .content h2 {
   font-size: 1em;
   line-height: 1;
   margin-bottom: 40px;
 }
-/* line 160, ../sass/_details.scss */
+/* line 162, ../sass/_details.scss */
 .details .lt-bar {
   position: fixed;
   overflow: scroll;
@@ -8467,17 +8478,17 @@ body .jspVerticalBar .jspArrow.jspArrowUp {
   padding: 0;
   display: none;
 }
-/* line 166, ../sass/_details.scss */
+/* line 168, ../sass/_details.scss */
 .details .lt-bar .items-list .img-wrap .snf-font {
   font-size: 3.75em;
 }
 
-/* line 174, ../sass/_details.scss */
+/* line 176, ../sass/_details.scss */
 .scroll-wrap {
   position: relative;
 }
 
-/* line 179, ../sass/_details.scss */
+/* line 181, ../sass/_details.scss */
 .toggle-lt-bar {
   position: absolute;
   left: 0;
@@ -8490,12 +8501,12 @@ body .jspVerticalBar .jspArrow.jspArrowUp {
   line-height: 85px;
   padding: 0 5px;
 }
-/* line 190, ../sass/_details.scss */
+/* line 192, ../sass/_details.scss */
 .toggle-lt-bar:hover {
   background: #e660a3;
   color: #fff;
 }
-/* line 194, ../sass/_details.scss */
+/* line 196, ../sass/_details.scss */
 .toggle-lt-bar.fix-position {
   position: fixed;
   top: 145px;
@@ -8504,46 +8515,46 @@ body .jspVerticalBar .jspArrow.jspArrowUp {
   border: 1px solid white;
 }
 
-/* line 205, ../sass/_details.scss */
+/* line 207, ../sass/_details.scss */
 .list-availables > span {
   margin-bottom: 1em;
   display: inline-block;
 }
-/* line 209, ../sass/_details.scss */
+/* line 211, ../sass/_details.scss */
 .list-availables ul {
   list-style-type: none;
 }
-/* line 211, ../sass/_details.scss */
+/* line 213, ../sass/_details.scss */
 .list-availables ul li {
   line-height: 2.5em;
 }
-/* line 213, ../sass/_details.scss */
+/* line 215, ../sass/_details.scss */
 .list-availables ul li span {
   display: inline-block;
 }
-/* line 215, ../sass/_details.scss */
+/* line 217, ../sass/_details.scss */
 .list-availables ul li span:not(:last-child), .list-availables ul li span span:not(:first-child) {
   margin-right: 20px;
 }
-/* line 218, ../sass/_details.scss */
+/* line 220, ../sass/_details.scss */
 .list-availables ul li span:first-child {
   margin-right: 30px;
 }
-/* line 221, ../sass/_details.scss */
+/* line 223, ../sass/_details.scss */
 .list-availables ul li span.snf-font {
   vertical-align: middle;
 }
-/* line 223, ../sass/_details.scss */
+/* line 225, ../sass/_details.scss */
 .list-availables ul li span.snf-font.snf-network-full, .list-availables ul li span.snf-font.snf-volume-full {
   font-size: 24px;
   color: #e660a3;
 }
-/* line 228, ../sass/_details.scss */
+/* line 230, ../sass/_details.scss */
 .list-availables ul li span.name {
   width: 50%;
 }
 
-/* line 237, ../sass/_details.scss */
+/* line 239, ../sass/_details.scss */
 .select-list {
   border: 0 !important;
   /*Removes border*/
